fix: lodash tree shaking (#1852)

fix: replace named lodash imports with deep ones for better tree shaking

Instead of

  import { debounce } from 'lodash';

use

  import debounce from 'lodash/debounce';

This helps with tree shaking. In particular I ran into issues with this
when trying to update Remix apps to use Vite.

An alternative would be to use 'lodash-es' instead, which is esm modules.

.eslintrc

@@ -95,11 +95,17 @@
     },
     {
       "files": ["src/**/*.{ts,tsx}"],
-      "excludedFiles": ["src/**/*.stories.{ts,tsx}"],
+      "excludedFiles": ["src/**/*.{stories,test,spec}.{ts,tsx}"],
       "rules": {
         "no-restricted-imports": [
           "error",
           {
+            "paths": [
+              {
+                "name": "lodash",
+                "message": "For better tree shaking, prefer deep imports from lodash (e.g. import at from 'lodash/at') instead of named (e.g. import {at} from 'lodash)"
+              }
+            ],
             "patterns": [
               {
                 "group": ["**/tokens-dist/ts/colors"],

src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { debounce } from 'lodash';
+import debounce from 'lodash/debounce';
 import React, { createContext, useContext, type ReactNode } from 'react';
 import { flattenReactChildren } from '../../util/flattenReactChildren';
 import Icon, { type IconName } from '../Icon';

src/components/Icon/Icon.stories.tsx

@@ -1,5 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { kebabCase } from 'lodash';
+import kebabCase from 'lodash/kebabCase';
 import React from 'react';
 import { Icon, type IconProps } from './Icon';
 import icons, { type IconName } from '../../icons/spritemap';

src/components/Table/Filters.tsx

@@ -1,4 +1,4 @@
-import { debounce } from 'lodash';
+import debounce from 'lodash/debounce';
 import React, { useEffect, useState } from 'react';
 import {
   Checkbox,

src/components/Table/StackedCardsToTable.tsx

@@ -1,4 +1,4 @@
-import { debounce } from 'lodash';
+import debounce from 'lodash/debounce';
 import React, { useEffect, useState } from 'react';
 import { Card, Table, Text } from '../../../src';
 

src/components/Tabs/Tabs.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { debounce } from 'lodash';
+import debounce from 'lodash/debounce';
 import React, {
   type ReactNode,
   useCallback,