@narmi/design_system 4.46.0 → 4.46.1

package/dist/tokens/js/reactNativeWeb.js

@@ -1,6 +1,6 @@
 /**
 * DO NOT EDIT
-* Generated by style-dictionary on Fri Oct 24 2025 22:45:06 GMT+0000 (Coordinated Universal Time)
+* Generated by style-dictionary on Tue Nov 04 2025 16:48:07 GMT+0000 (Coordinated Universal Time)
 * github.com/narmi/design_system/
 */
 

package/dist/types/Alert/index.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import type { IconName } from "../types/Icon.types";
+import { default as React } from 'react';
+import { IconName } from '../types/Icon.types';
 interface AlertProps {
     /** The alert is only visible when this prop is set to `true` */
     isActive?: boolean;

package/dist/types/AutocompleteModal/AutoComplete.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import { default as React } from 'react';
 export type AutoCompleteItem = React.ReactElement;
 export interface AutoCompleteProps {
     /** Input label */

package/dist/types/AutocompleteModal/Item.d.ts

@@ -1,4 +1,4 @@
-import PropTypes from "prop-types";
+import { default as PropTypes } from 'prop-types';
 declare const AutocompleteModalItem: {
     ({ children, value }: {
         children: any;

package/dist/types/AutocompleteModal/index.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import { default as React } from 'react';
 export interface AutocompleteModalProps {
     /** Input label */
     inputLabel: string;
@@ -30,9 +30,9 @@ declare const AutocompleteModal: {
         }): import("react/jsx-runtime").JSX.Element;
         displayName: string;
         propTypes: {
-            value: import("prop-types").Validator<string>;
-            searchValue: import("prop-types").Requireable<string>;
-            children: import("prop-types").Requireable<NonNullable<import("prop-types").ReactNodeLike>>;
+            value: import('prop-types').Validator<string>;
+            searchValue: import('prop-types').Requireable<string>;
+            children: import('prop-types').Requireable<NonNullable<import('prop-types').ReactNodeLike>>;
         };
     };
 };

package/dist/types/Button/index.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import type { IconName } from "../types/Icon.types";
+import { default as React } from 'react';
+import { IconName } from '../types/Icon.types';
 export interface ButtonProps {
     /** Renders the button label */
     label?: string;

package/dist/types/Checkbox/index.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import { default as React } from 'react';
 interface CheckboxProps {
     /** Content of `label` element */
     label?: string;

package/dist/types/Chip/index.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import type { IconName } from "../types/Icon.types";
+import { default as React } from 'react';
+import { IconName } from '../types/Icon.types';
 export declare const VALID_KINDS: readonly ["info", "success", "warn", "error", "primary", "secondary"];
 interface ChipProps {
     /** String to render within chip */

package/dist/types/ContentCard/index.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import { default as React } from 'react';
 interface ContentCardProps {
     /** Accepts any content as children */
     children: React.ReactNode;

package/dist/types/ContextMenu/index.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import { default as React } from 'react';
 export interface ContextMenuProps {
     /** Optional value for `data-testid` attribute */
     testId?: string;

package/dist/types/Dialog/index.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import { default as React } from 'react';
 export interface DialogProps {
     /** Scrollable contents of the Dialog */
     children: React.ReactNode;

package/dist/types/DisabledShim/index.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import PropTypes from "prop-types";
+import { default as React } from 'react';
+import { default as PropTypes } from 'prop-types';
 interface DisabledShimProps {
     children: React.ReactNode;
     isDisabled?: boolean;

package/dist/types/LoadingSkeleton/index.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import { default as React } from 'react';
 interface LoadingSkeletonProps {
     /** Loadable content area - will render normally unless `isLoading` is true. */
     children?: React.ReactNode;

package/dist/types/Radio/index.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import { default as React } from 'react';
 export type RadioKind = "normal" | "card" | "input-card" | "checkmark" | "rating";
 interface RadioProps {
     /** The `name` attribute for radio input. Use this to group radio sets. */

package/dist/types/RadioButtons/index.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import type { RadioKind } from "../Radio";
+import { default as React } from 'react';
+import { RadioKind } from '../Radio';
 type RadioButtonsLayouts = "row" | "row-start";
 type RadioButtonsKind = RadioKind | RadioButtonsLayouts;
 interface RadioButtonsProps {

package/dist/types/Row/RowItem.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import { default as React } from 'react';
 export interface RowItemProps {
     /**
      * When `true`, the row item shrinks to content size of its children.

package/dist/types/Row/index.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import { default as React } from 'react';
 export interface RowProps {
     /**
      * Adjusts size of gap between row items.
@@ -27,7 +27,7 @@ export interface RowProps {
  */
 declare const Row: {
     ({ alignItems, justifyContent, gapSize, as, className, children, testId, }: RowProps): import("react/jsx-runtime").JSX.Element;
-    Item: ({ shrink, as, className, children, testId, }: import("./RowItem").RowItemProps) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ shrink, as, className, children, testId, }: import('./RowItem').RowItemProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default Row;
 //# sourceMappingURL=index.d.ts.map

package/dist/types/SeparatorList/index.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import { default as React } from 'react';
 interface SeparatorListProps {
     items: React.ReactNode[];
     separator?: string;

package/dist/types/Snackbar/index.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import { default as React } from 'react';
 /**
  * A status toolbar for multiple selection in a table.
  * Intended to be rendered in fixed position over a table.

package/dist/types/SplitButton/SplitButtonMenu.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import { default as React } from 'react';
 export interface SplitButtonMenuProps {
     children: React.ReactElement | React.ReactElement[];
 }

package/dist/types/SplitButton/SplitButtonPopover.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import { default as React } from 'react';
 export interface SplitButtonPopoverProps {
     children: React.ReactElement | React.ReactElement[];
 }

package/dist/types/SplitButton/index.d.ts

@@ -1,7 +1,7 @@
-import React from "react";
-import { ButtonProps } from "../Button";
-import { SplitButtonPopoverProps } from "./SplitButtonPopover";
-import { SplitButtonMenuProps } from "./SplitButtonMenu";
+import { default as React } from 'react';
+import { ButtonProps } from '../Button';
+import { SplitButtonPopoverProps } from './SplitButtonPopover';
+import { SplitButtonMenuProps } from './SplitButtonMenu';
 interface SplitButtonProps extends ButtonProps {
     children: React.ReactElement<SplitButtonPopoverProps> | React.ReactElement<SplitButtonMenuProps>;
     kind?: "primary" | "secondary" | "tonal";

package/dist/types/Table/Body.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import { default as React } from 'react';
 declare const Body: ({ children }: {
     children: React.ReactNode;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/types/Table/Cell.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import { default as React } from 'react';
 export interface CellProps {
     children: React.ReactNode;
     textAlign?: "start" | "end" | "center";

package/dist/types/Table/Header.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import { default as React } from 'react';
 declare const Header: ({ children }: {
     children: React.ReactNode;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/types/Table/HeaderCell.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import { default as React } from 'react';
 export interface HeaderCellProps {
     children: React.ReactNode;
     textAlign?: "start" | "end" | "center";

package/dist/types/Table/Row.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import { default as React } from 'react';
 export interface TableRowProps {
     children: React.ReactNode;
     onRowClick?: () => void;

package/dist/types/Table/index.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import { default as React } from 'react';
 /** Minimum size at which to show a column. "*" means "all" */
 export type ColMinBreakpoint = "*" | "s" | "m" | "l";
 /** Subset of breakpoints that can be returned by `useBreakpoints` hook */
@@ -51,9 +51,9 @@ declare const Table: {
     Body: ({ children }: {
         children: React.ReactNode;
     }) => import("react/jsx-runtime").JSX.Element;
-    Row: ({ children, onRowClick }: import("./Row").TableRowProps) => import("react/jsx-runtime").JSX.Element;
-    Cell: ({ children, textAlign, _colIndex }: import("./Cell").CellProps) => import("react/jsx-runtime").JSX.Element;
-    HeaderCell: ({ children, textAlign, onClick, _colIndex, }: import("./HeaderCell").HeaderCellProps) => import("react/jsx-runtime").JSX.Element;
+    Row: ({ children, onRowClick }: import('./Row').TableRowProps) => import("react/jsx-runtime").JSX.Element;
+    Cell: ({ children, textAlign, _colIndex }: import('./Cell').CellProps) => import("react/jsx-runtime").JSX.Element;
+    HeaderCell: ({ children, textAlign, onClick, _colIndex, }: import('./HeaderCell').HeaderCellProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default Table;
 //# sourceMappingURL=index.d.ts.map

package/dist/types/Table/util/breakpoint.d.ts

@@ -1,4 +1,4 @@
-import type { ColMinBreakpoint, ViewportBreakpoint } from "..";
+import { ColMinBreakpoint, ViewportBreakpoint } from '..';
 /**
  * Determines if a current viewport breakpoint satisfies a minimum required breakpoint.
  * Uses "mobile-first" logic where a larger viewport satisfies smaller breakpoint requirements.

package/dist/types/Table/util/colVisibilityContext.d.ts

@@ -1,4 +1,4 @@
-import type { ColMinBreakpoint, ViewportBreakpoint } from "..";
+import { ColMinBreakpoint, ViewportBreakpoint } from '..';
 interface ColVisibilityContextProps {
     currentBreakpoint: ViewportBreakpoint;
     colVisibility: ColMinBreakpoint[];
@@ -7,6 +7,6 @@ interface ColVisibilityContextProps {
  * Takes layout options passed into the root `Table` component
  * and makes them available via context to all subcomponents.
  */
-declare const ColVisibilityContext: import("react").Context<ColVisibilityContextProps>;
+declare const ColVisibilityContext: import('react').Context<ColVisibilityContextProps>;
 export default ColVisibilityContext;
 //# sourceMappingURL=colVisibilityContext.d.ts.map

package/dist/types/Table/util/grid.d.ts

@@ -1,4 +1,4 @@
-import type { ColLayoutConfig, CSSValue, ViewportBreakpoint } from "..";
+import { ColLayoutConfig, CSSValue, ViewportBreakpoint } from '..';
 /**
  * Determine the final `grid-template-columns` value to apply
  * to a rowgroup element.

package/dist/types/TableAutocomplete/Item.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import { default as React } from 'react';
 export interface TableAutocompleteItemProps {
     /**
      * String representation of the option.

package/dist/types/TableAutocomplete/index.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-export type { TableAutocompleteItemProps } from "./Item";
+import { default as React } from 'react';
+export type { TableAutocompleteItemProps } from './Item';
 export type TableAutocompleteItem = React.ReactElement;
 export interface TableAutocompleteProps {
     /** Input label for accessibility */
@@ -37,7 +37,7 @@ export declare const filterItems: (items: TableAutocompleteItem[], inputValue: s
  */
 declare const TableAutocomplete: {
     ({ label, children, onChange, onInputChange, filterItemsByInput, footerContent, placeholder, isDisabled, hasError, inputValue, }: TableAutocompleteProps): import("react/jsx-runtime").JSX.Element;
-    Item: React.FC<import("./Item").TableAutocompleteItemProps>;
+    Item: React.FC<import('./Item').TableAutocompleteItemProps>;
 };
 export default TableAutocomplete;
 //# sourceMappingURL=index.d.ts.map

package/dist/types/TableInput/index.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import { default as React } from 'react';
 export interface TableInputProps {
     /** Current value of the input */
     value: string;

package/dist/types/Tabs/TabsList.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import { default as React } from 'react';
 export interface TabsListProps {
     /** Children must be of type `Tabs.Tab` */
     children: React.ReactNode;

package/dist/types/Tabs/TabsPanel.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import { default as React } from 'react';
 export interface TabsPanelProps {
     /** The content of the tab panel (any node type) */
     children: React.ReactNode;

package/dist/types/Tabs/context.d.ts

@@ -9,6 +9,6 @@ interface TabsContextProps {
     isResponsive: boolean;
     setIsResponsive: (isResponsive: boolean) => void;
 }
-declare const TabsContext: import("react").Context<TabsContextProps>;
+declare const TabsContext: import('react').Context<TabsContextProps>;
 export default TabsContext;
 //# sourceMappingURL=context.d.ts.map

package/dist/types/Tabs/index.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import { default as React } from 'react';
 interface TabsProps {
     /**
      * Direct children of `Tabs` should be one of:
@@ -29,9 +29,9 @@ interface TabsProps {
  */
 declare const Tabs: {
     ({ children, defaultSelectedIndex, selectedIndex, onTabChange, hasBorder, testId, }: TabsProps): import("react/jsx-runtime").JSX.Element;
-    List: ({ children, xPadding }: import("./TabsList").TabsListProps) => import("react/jsx-runtime").JSX.Element;
-    Tab: ({ label, tabId, testId }: import("./TabsTab").TabsTabProps) => import("react/jsx-runtime").JSX.Element;
-    Panel: ({ children, tabId, testId }: import("./TabsPanel").TabsPanelProps) => import("react/jsx-runtime").JSX.Element;
+    List: ({ children, xPadding }: import('./TabsList').TabsListProps) => import("react/jsx-runtime").JSX.Element;
+    Tab: ({ label, tabId, testId }: import('./TabsTab').TabsTabProps) => import("react/jsx-runtime").JSX.Element;
+    Panel: ({ children, tabId, testId }: import('./TabsPanel').TabsPanelProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default Tabs;
 //# sourceMappingURL=index.d.ts.map

package/dist/types/Tooltip/index.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import { default as React } from 'react';
 export interface TooltipProps {
     /** The root node of JSX passed into Tooltip as children will act as the tooltip trigger */
     children: React.ReactNode;

package/dist/types/index.d.ts

@@ -1,35 +1,32 @@
-/**
- * Typed Components
- */
-import Alert from "./Alert";
-import AutocompleteModal from "./AutocompleteModal";
-import Avatar from "./Avatar";
-import Button from "./Button";
-import ContentCard from "./ContentCard";
-import Checkbox from "./Checkbox";
-import Chip from "./Chip";
-import ContextMenu from "./ContextMenu";
-import Count from "./Count";
-import Dialog from "./Dialog";
-import DisabledShim from "./DisabledShim";
-import ProgressBar from "./ProgressBar";
-import Radio from "./Radio";
-import RadioButtons from "./RadioButtons";
-import Row from "./Row";
-import SeparatorList from "./SeparatorList";
-import Slider from "./Slider";
-import Snackbar from "./Snackbar";
-import Spinner from "./Spinner";
-import SplitButton from "./SplitButton";
-import LoadingSkeleton from "./LoadingSkeleton";
-import Table from "./Table";
-import TableAutocomplete from "./TableAutocomplete";
-import TableDateInput from "./TableDateInput";
-import TableInput from "./TableInput";
-import Tabs from "./Tabs";
-import Tooltip from "./Tooltip";
-import useSupportsAnchorPositioning from "./hooks/useSupportsAnchorPositioning";
-import useBreakpoints from "./hooks/useBreakpoints";
+import { default as Alert } from './Alert';
+import { default as AutocompleteModal } from './AutocompleteModal';
+import { default as Avatar } from './Avatar';
+import { default as Button } from './Button';
+import { default as ContentCard } from './ContentCard';
+import { default as Checkbox } from './Checkbox';
+import { default as Chip } from './Chip';
+import { default as ContextMenu } from './ContextMenu';
+import { default as Count } from './Count';
+import { default as Dialog } from './Dialog';
+import { default as DisabledShim } from './DisabledShim';
+import { default as ProgressBar } from './ProgressBar';
+import { default as Radio } from './Radio';
+import { default as RadioButtons } from './RadioButtons';
+import { default as Row } from './Row';
+import { default as SeparatorList } from './SeparatorList';
+import { default as Slider } from './Slider';
+import { default as Snackbar } from './Snackbar';
+import { default as Spinner } from './Spinner';
+import { default as SplitButton } from './SplitButton';
+import { default as LoadingSkeleton } from './LoadingSkeleton';
+import { default as Table } from './Table';
+import { default as TableAutocomplete } from './TableAutocomplete';
+import { default as TableDateInput } from './TableDateInput';
+import { default as TableInput } from './TableInput';
+import { default as Tabs } from './Tabs';
+import { default as Tooltip } from './Tooltip';
+import { default as useSupportsAnchorPositioning } from './hooks/useSupportsAnchorPositioning';
+import { default as useBreakpoints } from './hooks/useBreakpoints';
 /**
  * Untyped Components
  */
@@ -62,6 +59,6 @@ declare const TruncatedAccount: any;
 declare const useLockBodyScroll: any;
 declare const formatNumber: any;
 declare const formatDate: any;
-export * from "./types/Icon.types";
+export * from './types/Icon.types';
 export { AutocompleteModal, Avatar, Button, Checkbox, Chip, ContentCard, ContextMenu, Count, DisabledShim, Radio, RadioButtons, Row, SeparatorList, Slider, Snackbar, Alert, CollapsibleCard, Combobox, DateInput, Dialog, Drawer, Dropdown, DropdownTrigger, Error, FieldToken, FormSection, IconButton, Input, LoadingShim, LoadingSkeleton, MenuButton, MultiSelect, Pagination, PlainButton, ProgressBar, Popover, ResponsiveFlex, Select, Sidebar, Spinner, SplitButton, Table, TableAutocomplete, TableDateInput, TableInput, Tabs, Tag, TextInput, TimelineEvent, Toggle, TokenInput, Tooltip, TruncatedAccount, useBreakpoints, useLockBodyScroll, useSupportsAnchorPositioning, formatNumber, formatDate, };
 //# sourceMappingURL=index.d.ts.map

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@narmi/design_system",
-  "version": "4.46.0",
+  "version": "4.46.1",
   "description": "⚡ A consistent look-and-feel and extensible interface for Narmi experiences 🔥",
   "main": "dist/index.js",
+  "style": "dist/style.css",
   "files": [
     "dist/*"
   ],
@@ -12,13 +13,13 @@
     "node": ">=22"
   },
   "scripts": {
-    "watch": "watch 'npm run build' src",
     "build:types": "node ./scripts/buildTypes.mjs",
     "build:jsdoc": "node ./scripts/jsDoc.mjs",
     "build:classdoc": "node ./scripts/classManifest.mjs",
     "build:tokens": "style-dictionary build --config=./tokens/config.js",
-    "build:components": "webpack --mode=production",
-    "build": "npx tsc && npm run build:tokens && npm run build:jsdoc && npm run build:classdoc && npm run build:components",
+    "build:css": "sass src/index.scss dist/style.css --style=compressed --source-map",
+    "build:components": "vite build && node ./scripts/copyIcons.mjs",
+    "build": "npm run build:tokens && npx tsc && npm run build:css && npm run build:jsdoc && npm run build:components && npm run build:classdoc",
     "build:clean": "rm -rf dist/ && npm run build",
     "prepublish": "npm run build",
     "test": "jest",
@@ -30,7 +31,7 @@
     "chromatic": "npx chromatic --project-token $CHROMATIC_PROJECT_TOKEN --exit-zero-on-changes",
     "stats:components": "node ./scripts/component-adoption.mjs",
     "stats:classes": "node ./scripts/class-adoption.mjs",
-    "dev": "tmux new-session \"npm i && npm run watch\"\\; split-window 'npm run storybook'"
+    "dev": "npm run storybook"
   },
   "peerDependencies": {
     "react": "^16 || ^17 || ^18 || ^19",
@@ -44,7 +45,6 @@
     "@babel/preset-env": "^7.15.6",
     "@babel/preset-react": "^7.14.5",
     "@babel/preset-typescript": "^7.23.2",
-    "@chromatic-com/storybook": "^4.1.1",
     "@commitlint/cli": "^19",
     "@commitlint/config-conventional": "^19.2.2",
     "@mdx-js/mdx": "^3.1.0",
@@ -52,18 +52,18 @@
     "@semantic-release/changelog": "^6.0.0",
     "@semantic-release/git": "^10.0.0",
     "@storybook/addon-a11y": "^9.1.13",
-    "@storybook/addon-links": "^9.1.13",
     "@storybook/addon-docs": "^9.1.13",
-    "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
-    "@storybook/react-webpack5": "^9.1.13",
+    "@storybook/addon-links": "^9.1.13",
+    "@storybook/react-vite": "^9.1.13",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/jest": "^27.0.2",
+    "@types/jest": "^30.0.0",
     "@types/react": "^18.2.31",
     "@types/react-dom": "^18.2.14",
     "@typescript-eslint/eslint-plugin": "^6.12.0",
     "@typescript-eslint/parser": "^6.12.0",
+    "@vitejs/plugin-react": "^5.0.4",
     "babel-jest": "^30",
     "babel-loader": "^8.2.2",
     "chromatic": "^6",
@@ -102,7 +102,10 @@
     "tinycolor2": "^1.4.2",
     "typescript": "^5.2.2",
     "use-clipboard-copy": "^0.2.0",
-    "watch": "^1.0.2",
+    "vite": "^7.1.11",
+    "vite-plugin-css-injected-by-js": "^3.5.2",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-libcss": "^1.1.2",
     "webpack": "^5.50.0",
     "webpack-cli": "^4.8.0",
     "webpack-dev-server": "^5"

package/dist/icons/Icons.stories.jsx

@@ -1,74 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import {
-  Title,
-  Subtitle,
-  Primary,
-  Stories,
-} from "@storybook/addon-docs/blocks";
-import iconSelection from "dist/icons/selection.json";
-import compatIcons from "./compat-icons";
-
-const IconDocs = ({ iconNames }) => {
-  return (
-    <div className="nds-typography">
-      <div className="icon-demo">
-        {iconNames.map((name) => (
-          <div key={name} className="icon-demo-box">
-            <span className={`icon-demo-icon narmi-icon-${name}`}> </span>
-            <span className="icon-demo-title">{name}</span>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-IconDocs.propTypes = {
-  iconNames: PropTypes.arrayOf(PropTypes.string).isRequired,
-};
-
-// Main Icons story
-export const Icons = () => {
-  const iconNames = [];
-
-  iconSelection.icons.forEach((iconData) => {
-    const namesAndAliases = iconData.properties.name.split(",");
-    namesAndAliases.forEach((name) => {
-      iconNames.push(name.trim());
-    });
-  });
-  return <IconDocs iconNames={iconNames} />;
-};
-
-// Mobile-Compatible Icons story
-export const MobileCompatibleIcons = () => (
-  <>
-    <IconDocs iconNames={compatIcons.icons} />
-  </>
-);
-MobileCompatibleIcons.parameters = {
-  docs: {
-    description: {
-      story: `This set of icons is safe to use in our mobile application.
-      These shapes are supported down to release \`v2022.7\` (NDS version \`v2.21.2\`)
-      to account for users on older versions of the mobile app.`,
-    },
-  },
-};
-
-export default {
-  title: "Style/Icons",
-  parameters: {
-    docs: {
-      page: () => (
-        <>
-          <Title />
-          <Subtitle />
-          <Primary />
-          <Stories />
-        </>
-      ),
-    },
-  },
-};