@arbor-education/design-system.components 3.1.0 → 3.2.0

package/.github/pull_request_template.md

@@ -21,12 +21,13 @@
 <!-- Step-by-step testing instructions. Include any browser-specific or environment-specific notes.
      Chromatic will post a Storybook link automatically — no need to include one here. -->
 
-1. 
-2. 
-3. 
+1.
+2.
+3.
 
 ## Checklist
 
+- [ ] This contribution has been discussed with the design system team in the [contribution process Slack channel](https://arbor-education.slack.com/archives/C0BJU1K3HH9)
 - [ ] This PR does **one thing** — the title does not contain "and" or "also"
 - [ ] The meaningful code diff is under 400 lines (or a justification is written in "Notes for code owners")
 - [ ] `yarn check-types` passes with no errors

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 3.2.0
+
+### Minor Changes
+
+- [#252](https://github.com/arbor-education/design-system.components/pull/252) [`9247537`](https://github.com/arbor-education/design-system.components/commit/9247537f0297ad464e0e4d059b186ba10db6d0d6) Thanks [@Alex-DN-SP](https://github.com/Alex-DN-SP)! - MIS-73878 Allow all lucide icons in DS Icon component
+
+### Patch Changes
+
+- [#251](https://github.com/arbor-education/design-system.components/pull/251) [`a084aa2`](https://github.com/arbor-education/design-system.components/commit/a084aa29dd18c4fa4ccb8300087140330d66ed49) Thanks [@rickbairstow](https://github.com/rickbairstow)! - MIS-74535 Updates PR template
+
 ## 3.1.0
 
 ### Minor Changes

package/CONTRIBUTING.md

@@ -110,6 +110,7 @@ Each commit should tell part of the story. A reviewer should be able to follow y
 
 Run through this checklist yourself before requesting review:
 
+- [ ] This contribution has been discussed with the design system team in the [contribution process Slack channel](https://arbor-education.slack.com/archives/C0BJU1K3HH9)
 - [ ] My branch name includes the Jira ticket number (e.g. `feature/MIS-12345-add-button-variant`)
 - [ ] My PR does **one thing**. The title does not contain "and" or "also"
 - [ ] The diff is under 400 lines of meaningful code (or I have written a justification)

package/dist/components/formField/inputs/selectDropdown/items/item/SelectDropdownItem.d.ts

@@ -1,4 +1,4 @@
-import { allowedIcons } from '../../../../../icon/allowedIcons.js';
+import type { IconName } from '../../../../../icon/allowedIcons.js';
 export type SelectDropdownItemBaseProps = {
     value: string;
     selected?: boolean;
@@ -7,7 +7,7 @@ export type SelectDropdownItemBaseProps = {
 export type SelectDropdownItemProps = {
     value: string;
     label?: string;
-    icon?: keyof typeof allowedIcons;
+    icon?: IconName;
     header?: string;
     group?: string;
     closeAfterSelection?: boolean;

package/dist/components/formField/inputs/selectDropdown/items/item/SelectDropdownItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectDropdownItem.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/formField/inputs/selectDropdown/items/item/SelectDropdownItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAK5D,MAAM,MAAM,2BAA2B,GAAG;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEzC,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B,GAAG,2BAA2B,CAAC;AAEhC,eAAO,MAAM,kBAAkB,GAAI,OAAO,uBAAuB,gCAyBhE,CAAC"}
+{"version":3,"file":"SelectDropdownItem.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/formField/inputs/selectDropdown/items/item/SelectDropdownItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAK7D,MAAM,MAAM,2BAA2B,GAAG;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEzC,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B,GAAG,2BAA2B,CAAC;AAEhC,eAAO,MAAM,kBAAkB,GAAI,OAAO,uBAAuB,gCAyBhE,CAAC"}

package/dist/components/formField/inputs/selectDropdown/items/item/SelectDropdownItem.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { allowedIcons } from '../../../../../icon/allowedIcons.js';
 import { Icon } from '../../../../../icon/Icon.js';
 import { Dropdown } from '../../../../../dropdown/Dropdown.js';
 import classNames from 'classnames';

package/dist/components/formField/inputs/selectDropdown/items/item/SelectDropdownItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectDropdownItem.js","sourceRoot":"","sources":["../../../../../../../src/components/formField/inputs/selectDropdown/items/item/SelectDropdownItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACxD,OAAO,UAAU,MAAM,YAAY,CAAC;AAiBpC,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAE,EAAE;IACnE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,GAAG,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,mBAAmB,EAAE,GAAG,KAAK,CAAC;IAEjG,MAAM,OAAO,GAAG,UAAU,CAAC,0BAA0B,EAAE;QACrD,qCAAqC,EAAE,MAAM;KAC9C,CAAC,CAAC;IAEH,OAAO,CACL,MAAC,QAAQ,CAAC,UAAU,IAClB,SAAS,EAAE,OAAO,EAClB,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,GAAG,EAAE,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,EAC1C,mBAAmB,EAAE,mBAAmB,aAEvC,IAAI,IAAI,CACP,eAAM,SAAS,EAAC,+BAA+B,YAC7C,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,GAAI,GACzB,CACR,EACD,eAAK,SAAS,EAAC,gCAAgC,aAC5C,MAAM,IAAI,aAAI,SAAS,EAAC,iCAAiC,YAAE,MAAM,GAAM,EACxE,eAAM,SAAS,EAAC,kCAAkC,YAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,GAAQ,IAC7E,IACc,CACvB,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"SelectDropdownItem.js","sourceRoot":"","sources":["../../../../../../../src/components/formField/inputs/selectDropdown/items/item/SelectDropdownItem.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACxD,OAAO,UAAU,MAAM,YAAY,CAAC;AAiBpC,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAE,EAAE;IACnE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,GAAG,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,mBAAmB,EAAE,GAAG,KAAK,CAAC;IAEjG,MAAM,OAAO,GAAG,UAAU,CAAC,0BAA0B,EAAE;QACrD,qCAAqC,EAAE,MAAM;KAC9C,CAAC,CAAC;IAEH,OAAO,CACL,MAAC,QAAQ,CAAC,UAAU,IAClB,SAAS,EAAE,OAAO,EAClB,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,GAAG,EAAE,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,EAC1C,mBAAmB,EAAE,mBAAmB,aAEvC,IAAI,IAAI,CACP,eAAM,SAAS,EAAC,+BAA+B,YAC7C,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,GAAI,GACzB,CACR,EACD,eAAK,SAAS,EAAC,gCAAgC,aAC5C,MAAM,IAAI,aAAI,SAAS,EAAC,iCAAiC,YAAE,MAAM,GAAM,EACxE,eAAM,SAAS,EAAC,kCAAkC,YAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,GAAQ,IAC7E,IACc,CACvB,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/formField/inputs/time/TimeInput.d.ts

@@ -22,7 +22,7 @@ export declare const TimeInput: import("react").ForwardRefExoticComponent<{
     onValueChange?: (value: string) => void;
     searchType?: ComboboxSearchType;
     highlightStringMatches?: boolean;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type" | "defaultValue" | "value"> & {
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "defaultValue" | "value"> & {
     value?: TimeValue | "";
     defaultValue?: TimeValue | "";
 } & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/formField/inputs/time/TimeInput.stories.d.ts

@@ -10,7 +10,7 @@ declare const meta: {
         onValueChange?: (value: string) => void;
         searchType?: import("../../../combobox/types.js").ComboboxSearchType;
         highlightStringMatches?: boolean;
-    } & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "size" | "type" | "defaultValue" | "value"> & {
+    } & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "defaultValue" | "value"> & {
         value?: TimeValue | "";
         defaultValue?: TimeValue | "";
     } & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/icon/Icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/icon/Icon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAgB,KAAK,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAChE,OAAO,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAE5D,KAAK,SAAS,GAAG;IACf,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,IAAI,EAAE,QAAQ,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,OAAO,SAAS,gCAapC,CAAC;AAEF,yBAAiB,IAAI,CAAC;IACpB,KAAY,KAAK,GAAG,SAAS,CAAC;IAC9B,KAAY,IAAI,GAAG,QAAQ,CAAC;IAC5B,KAAY,IAAI,GAAG,QAAQ,CAAC;IAC5B,KAAY,WAAW,GAAG,eAAe,CAAC;CAC3C"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/icon/Icon.tsx"],"names":[],"mappings":"AACA,OAAO,EAA4B,KAAK,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5E,OAAO,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAE5D,KAAK,SAAS,GAAG;IACf,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,IAAI,EAAE,QAAQ,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAwBF,eAAO,MAAM,IAAI,GAAI,OAAO,SAAS,gCAYpC,CAAC;AAEF,yBAAiB,IAAI,CAAC;IACpB,KAAY,KAAK,GAAG,SAAS,CAAC;IAC9B,KAAY,IAAI,GAAG,QAAQ,CAAC;IAC5B,KAAY,IAAI,GAAG,QAAQ,CAAC;IAC5B,KAAY,WAAW,GAAG,eAAe,CAAC;CAC3C"}

package/dist/components/icon/Icon.js

@@ -1,10 +1,25 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
-import { allowedIcons } from './allowedIcons.js';
+import { customIcons, iconAliases } from './allowedIcons.js';
+import { LucideIcon } from './LucideIcon.js';
+const isCustomIconName = (name) => Object.prototype.hasOwnProperty.call(customIcons, name);
+const isAliasedIconName = (name) => Object.prototype.hasOwnProperty.call(iconAliases, name);
+const resolveLucideName = (name) => isAliasedIconName(name) ? iconAliases[name] : name;
+/**
+ * Arbor's custom icons and aliases are resolved before the Lucide set, so an Arbor name always wins
+ * over the Lucide icon it shadows.
+ */
+const IconGlyph = (props) => {
+    const { name, ...glyphProps } = props;
+    if (isCustomIconName(name)) {
+        const CustomIcon = customIcons[name];
+        return _jsx(CustomIcon, { ...glyphProps });
+    }
+    return _jsx(LucideIcon, { name: resolveLucideName(name), ...glyphProps });
+};
 export const Icon = (props) => {
     const { size = 16, color = 'currentColor', name, screenReaderText, className } = props;
-    const Component = allowedIcons[name];
     const classes = classNames(className, `ds-icon ds-icon-${name}`);
-    return (_jsxs(_Fragment, { children: [_jsx(Component, { size: size, color: color, className: classes, role: "img", "aria-hidden": true }), !!screenReaderText && (_jsx("span", { className: "sr-only", children: screenReaderText }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(IconGlyph, { name: name, size: size, color: color, className: classes, role: "img", "aria-hidden": true }), !!screenReaderText && (_jsx("span", { className: "sr-only", children: screenReaderText }))] }));
 };
 //# sourceMappingURL=Icon.js.map

package/dist/components/icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/components/icon/Icon.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,YAAY,EAAiB,MAAM,mBAAmB,CAAC;AAWhE,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,KAAgB,EAAE,EAAE;IACvC,MAAM,EAAE,IAAI,GAAG,EAAE,EAAE,KAAK,GAAG,cAAc,EAAE,IAAI,EAAE,gBAAgB,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IACvF,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACrC,MAAM,OAAO,GAAG,UAAU,CAAC,SAAS,EAAE,mBAAmB,IAAI,EAAE,CAAC,CAAC;IACjE,OAAO,CACL,8BAEE,KAAC,SAAS,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAC,KAAK,wBAAe,EACjF,CAAC,CAAC,gBAAgB,IAAI,CACrB,eAAM,SAAS,EAAC,SAAS,YAAE,gBAAgB,GAAQ,CACpD,IACA,CACJ,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/components/icon/Icon.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,WAAW,EAAiB,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EAAE,UAAU,EAAuB,MAAM,iBAAiB,CAAC;AAWlE,MAAM,gBAAgB,GAAG,CAAC,IAAc,EAAoC,EAAE,CAC5E,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;AAE1D,MAAM,iBAAiB,GAAG,CAAC,IAAc,EAAoC,EAAE,CAC7E,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;AAE1D,MAAM,iBAAiB,GAAG,CAAC,IAAiD,EAAkB,EAAE,CAC9F,iBAAiB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;AAErD;;;GAGG;AACH,MAAM,SAAS,GAAG,CAAC,KAA2C,EAAE,EAAE;IAChE,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IACtC,IAAI,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC;QAC3B,MAAM,UAAU,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;QACrC,OAAO,KAAC,UAAU,OAAK,UAAU,GAAI,CAAC;IACxC,CAAC;IACD,OAAO,KAAC,UAAU,IAAC,IAAI,EAAE,iBAAiB,CAAC,IAAI,CAAC,KAAM,UAAU,GAAI,CAAC;AACvE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,KAAgB,EAAE,EAAE;IACvC,MAAM,EAAE,IAAI,GAAG,EAAE,EAAE,KAAK,GAAG,cAAc,EAAE,IAAI,EAAE,gBAAgB,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IACvF,MAAM,OAAO,GAAG,UAAU,CAAC,SAAS,EAAE,mBAAmB,IAAI,EAAE,CAAC,CAAC;IACjE,OAAO,CACL,8BAEE,KAAC,SAAS,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAC,KAAK,wBAAe,EAC7F,CAAC,CAAC,gBAAgB,IAAI,CACrB,eAAM,SAAS,EAAC,SAAS,YAAE,gBAAgB,GAAQ,CACpD,IACA,CACJ,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/icon/Icon.stories.d.ts

@@ -1,5 +1,6 @@
 import type { StoryObj } from '@storybook/react-vite';
 import { Icon } from './Icon.js';
+import { type IconName } from './allowedIcons.js';
 declare function IconDocsPage(): import("react").JSX.Element;
 declare const meta: {
     title: string;
@@ -7,7 +8,7 @@ declare const meta: {
         size?: import("./types.js").IconSize;
         color?: string;
         screenReaderText?: string;
-        name: import("./allowedIcons.js").IconName;
+        name: IconName;
         className?: string;
     }) => import("react").JSX.Element;
     parameters: {
@@ -20,7 +21,7 @@ declare const meta: {
     argTypes: {
         name: {
             control: "select";
-            options: string[];
+            options: IconName[];
             description: string;
             table: {
                 type: {
@@ -91,4 +92,5 @@ export declare const CustomSolidVariants: Story;
 export declare const InButtonContext: Story;
 export declare const InStatusIndicatorContext: Story;
 export declare const InEmptyStateContext: Story;
+export declare const IconSearch: Story;
 //# sourceMappingURL=Icon.stories.d.ts.map

package/dist/components/icon/Icon.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.stories.d.ts","sourceRoot":"","sources":["../../../src/components/icon/Icon.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAW5D,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAmNjC,iBAAS,YAAY,gCAqBpB;AAMD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwFmB,CAAC;AAE9B,eAAe,IAAI,CAAC;AAGpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA6oBnC,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAgDtB,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAiDrC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAmD7B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA+C7B,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KA6CpC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAoDjC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAkD7B,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KA+CtC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAmDjC,CAAC"}
+{"version":3,"file":"Icon.stories.d.ts","sourceRoot":"","sources":["../../../src/components/icon/Icon.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAW5D,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAuN7D,iBAAS,YAAY,gCAsBpB;AA8FD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwFmB,CAAC;AAE9B,eAAe,IAAI,CAAC;AAGpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA4oBnC,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAgDtB,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAiDrC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAmD7B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA+C7B,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KA6CpC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAoDjC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAkD7B,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KA+CtC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAmDjC,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KASxB,CAAC"}

package/dist/components/icon/Icon.stories.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
 import { Controls, Heading as DocHeading, Markdown, Primary as DocPrimary, Stories, Subtitle, Title, } from '@storybook/addon-docs/blocks';
 import { Button } from '../button/Button.js';
 import { Icon } from './Icon.js';
-import { allowedIcons } from './allowedIcons.js';
+import { iconNames } from './allowedIcons.js';
 import { iconSizes } from './types.js';
 // ---------------------------------------------------------------------------
 // Docs page content
@@ -177,7 +178,7 @@ const DEVELOPER_NOTES = [
     '- **Status icons** — must be paired with visible text where possible (WCAG 1.4.1: use of colour).',
     '  Do not rely on icon colour alone to communicate success, warning, or error.',
     '- **Icon-only interactions** — must have accessible label + tooltip on hover/focus.',
-    '- **Avoid `title` attributes** — Lucide SVGs sometimes include `<title>` elements; Arbor\'s `allowedIcons`',
+    '- **Avoid `title` attributes** — Lucide SVGs sometimes include `<title>` elements; Arbor\'s `Icon`',
     '  wrapper suppresses these via `aria-hidden`. Do not rely on SVG `title` for accessible names.',
     '- **"Opens in new tab"** — communicate this in text (`<span class="sr-only">opens in new tab</span>`),',
     '  not only via the `external-link` icon.',
@@ -195,7 +196,7 @@ const DEVELOPER_NOTES = [
     '| Type | Description |',
     '|---|---|',
     '| `Icon.Props` | Full props interface |',
-    '| `Icon.Name` | Union of all icon name strings — see argTypes for full list |',
+    '| `Icon.Name` | Union of every valid name: the whole Lucide set, plus Arbor aliases and custom icons |',
     '| `Icon.Size` | `12 \\| 16 \\| 24` |',
     '| `Icon.CustomProps` | Props for custom SVG icons |',
 ].join('\n');
@@ -204,10 +205,95 @@ const RELATED_COMPONENTS = [
     '',
     '[Button](?path=/docs/components-button--docs) · [Banner](?path=/docs/components-banner--docs) · [Badge](?path=/docs/components-badge--docs) · [Dot](?path=/docs/components-dot--docs) · [Tag](?path=/docs/components-tag--docs)',
 ].join('\n');
+const CATALOGUE_INTRO = [
+    'The Arbor-curated names are grouped below. Every [Lucide](https://lucide.dev/icons) icon name is',
+    'also valid — use the **Icon search** story above to find one by name.',
+].join('\n');
 const PROPS_INTRO = 'The preview below is wired to the **Controls** panel — tweak any prop to see the story update in real time.';
 function IconDocsPage() {
-    return (_jsxs(_Fragment, { children: [_jsx(Title, {}), _jsx(Subtitle, {}), _jsx(Markdown, { children: DESCRIPTION_INTRO }), _jsx(DocHeading, { children: "Interactive example" }), _jsx(Markdown, { children: PROPS_INTRO }), _jsx(DocPrimary, {}), _jsx(Controls, {}), _jsx(DocHeading, { children: "Usage guidance" }), _jsx(Markdown, { children: USAGE_GUIDANCE }), _jsx(DocHeading, { children: "Developer notes" }), _jsx(Markdown, { children: DEVELOPER_NOTES }), _jsx(DocHeading, { children: "Examples" }), _jsx(Stories, { title: "" }), _jsx(DocHeading, { children: "Icon catalogue" }), _jsx(IconGalleryTemplate, {}), _jsx(Markdown, { children: RELATED_COMPONENTS })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Title, {}), _jsx(Subtitle, {}), _jsx(Markdown, { children: DESCRIPTION_INTRO }), _jsx(DocHeading, { children: "Interactive example" }), _jsx(Markdown, { children: PROPS_INTRO }), _jsx(DocPrimary, {}), _jsx(Controls, {}), _jsx(DocHeading, { children: "Usage guidance" }), _jsx(Markdown, { children: USAGE_GUIDANCE }), _jsx(DocHeading, { children: "Developer notes" }), _jsx(Markdown, { children: DEVELOPER_NOTES }), _jsx(DocHeading, { children: "Examples" }), _jsx(Stories, { title: "" }), _jsx(DocHeading, { children: "Icon catalogue" }), _jsx(Markdown, { children: CATALOGUE_INTRO }), _jsx(IconGalleryTemplate, {}), _jsx(Markdown, { children: RELATED_COMPONENTS })] }));
 }
+const ICON_CATEGORIES = [
+    {
+        heading: 'Navigation',
+        icons: [
+            'arrow-up', 'arrow-down', 'arrow-left', 'arrow-right',
+            'arrow-right-from-line', 'arrow-up-right',
+            'chevron-up', 'chevron-down', 'chevron-left', 'chevron-right',
+            'chevrons-left', 'chevrons-right',
+            'corner-down-left', 'menu',
+            'ellipsis', 'ellipsis-vertical', '3-dot', 'grab',
+        ],
+    },
+    {
+        heading: 'Actions',
+        icons: [
+            'pencil', 'trash', 'save', 'copy', 'download', 'upload',
+            'share', 'send', 'redo', 'undo', 'plus', 'minus',
+            'circle-plus', 'iteration-ccw', 'switch-camera',
+        ],
+    },
+    {
+        heading: 'Status / severity',
+        icons: [
+            'info', 'circle-alert', 'triangle-alert',
+            'circle-check', 'circle-check-big', 'circle-x',
+            'circle-help', 'check', 'check-solid', 'x', 'x-solid',
+        ],
+    },
+    {
+        heading: 'Content / media',
+        icons: [
+            'file', 'files', 'clipboard', 'clipboard-list',
+            'book-open', 'camera', 'mic', 'paperclip',
+            'sheet', 'table',
+            'sparkles', 'party-popper', 'lightbulb',
+            'favourite-outline', 'favourite-filled',
+        ],
+    },
+    {
+        heading: 'Charts / data',
+        icons: [
+            'chart-column-increasing', 'chart-spline',
+            'trending-up', 'trending-down',
+            'percent', 'circle-percent',
+            'sorting', 'funnel', 'sliders-horizontal', 'list-filter-plus',
+        ],
+    },
+    {
+        heading: 'People / org',
+        icons: [
+            'user', 'guardians', 'group', 'staff', 'graduation-cap',
+        ],
+    },
+    {
+        heading: 'System / state',
+        icons: [
+            'eye', 'eye-off', 'lock', 'lock-open', 'loader',
+            'pin', 'flag', 'house', 'history', 'clock-3', 'date',
+            'settings', 'expand', 'shrink', 'link', 'external-link',
+            'log-out', 'search', 'mail', 'phone', 'smartphone',
+            'monitor', 'projector', 'archive',
+        ],
+    },
+    {
+        heading: 'Other / misc',
+        icons: [
+            'dot', 'layout-list', 'list', 'grid-3x3',
+            'paint-bucket', 'message-square-more',
+        ],
+    },
+    {
+        heading: 'Custom / brand',
+        icons: ['ask-arbor', 'google'],
+    },
+];
+/**
+ * The Arbor-curated names, used for the Controls select. The `name` prop accepts every Lucide icon
+ * too, but ~1,900 options in a dropdown is not a usable control — use the Icon search story to
+ * explore the full set.
+ */
+const CURATED_ICON_NAMES = ICON_CATEGORIES.flatMap(category => category.icons);
 // ---------------------------------------------------------------------------
 // Meta
 // ---------------------------------------------------------------------------
@@ -224,12 +310,12 @@ const meta = {
     argTypes: {
         name: {
             control: 'select',
-            options: Object.keys(allowedIcons),
+            options: CURATED_ICON_NAMES,
             description: [
                 'Kebab-case key identifying the icon to render. Required.',
-                'Maps to an entry in `allowedIcons` — TypeScript errors on any unknown value.',
-                'There are currently 106 valid options covering navigation, actions, status,',
-                'content, data, people, and system contexts.',
+                'Every [Lucide](https://lucide.dev) icon name is valid, plus Arbor\'s own aliases and custom',
+                'icons — TypeScript errors on any unknown value. The dropdown below lists the Arbor-curated',
+                'names only; use the **Icon search** story to browse the full set.',
                 'Commonly used: `pencil` (edit), `trash` (delete), `plus` (add), `x` (close/remove),',
                 '`check` (confirm), `3-dot` (more actions), `chevron-down` (expand), `triangle-alert` (warning).',
             ].join(' '),
@@ -440,81 +526,29 @@ const CustomSolidVariantsTemplate = () => (_jsxs("div", { style: {
                 flexDirection: 'column',
                 gap: 'var(--spacing-large)',
             }, children: [_jsx("p", { className: "ds-text", style: { margin: 0, color: 'var(--color-grey-600)' }, children: "Favourite/bookmark active state" }), _jsxs("div", { style: { display: 'flex', gap: 'var(--spacing-xlarge)', alignItems: 'center' }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 'var(--spacing-small)' }, children: [_jsx(Icon, { name: "favourite-outline", size: 24 }), _jsx("span", { className: "ds-text", style: { color: 'var(--color-grey-600)' }, children: "favourite-outline" })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 'var(--spacing-small)' }, children: [_jsx(Icon, { name: "favourite-filled", size: 24, color: "var(--color-brand-600)" }), _jsx("span", { className: "ds-text", style: { color: 'var(--color-grey-600)' }, children: "favourite-filled" })] })] })] })] }));
-const ICON_CATEGORIES = [
-    {
-        heading: 'Navigation',
-        icons: [
-            'arrow-up', 'arrow-down', 'arrow-left', 'arrow-right',
-            'arrow-right-from-line', 'arrow-up-right',
-            'chevron-up', 'chevron-down', 'chevron-left', 'chevron-right',
-            'chevrons-left', 'chevrons-right',
-            'corner-down-left', 'menu',
-            'ellipsis', 'ellipsis-vertical', '3-dot', 'grab',
-        ],
-    },
-    {
-        heading: 'Actions',
-        icons: [
-            'pencil', 'trash', 'save', 'copy', 'download', 'upload',
-            'share', 'send', 'redo', 'undo', 'plus', 'minus',
-            'circle-plus', 'iteration-ccw', 'switch-camera',
-        ],
-    },
-    {
-        heading: 'Status / severity',
-        icons: [
-            'info', 'circle-alert', 'triangle-alert',
-            'circle-check', 'circle-check-big', 'circle-x',
-            'circle-help', 'check', 'check-solid', 'x', 'x-solid',
-        ],
-    },
-    {
-        heading: 'Content / media',
-        icons: [
-            'file', 'files', 'clipboard', 'clipboard-list',
-            'book-open', 'camera', 'mic', 'paperclip',
-            'sheet', 'table',
-            'sparkles', 'party-popper', 'lightbulb',
-            'favourite-outline', 'favourite-filled',
-        ],
-    },
-    {
-        heading: 'Charts / data',
-        icons: [
-            'chart-column-increasing', 'chart-spline',
-            'trending-up', 'trending-down',
-            'percent', 'circle-percent',
-            'sorting', 'funnel', 'sliders-horizontal', 'list-filter-plus',
-        ],
-    },
-    {
-        heading: 'People / org',
-        icons: [
-            'user', 'guardians', 'group', 'staff', 'graduation-cap',
-        ],
-    },
-    {
-        heading: 'System / state',
-        icons: [
-            'eye', 'eye-off', 'lock', 'lock-open', 'loader',
-            'pin', 'flag', 'house', 'history', 'clock-3', 'date',
-            'settings', 'expand', 'shrink', 'link', 'external-link',
-            'log-out', 'search', 'mail', 'phone', 'smartphone',
-            'monitor', 'projector', 'archive',
-        ],
-    },
-    {
-        heading: 'Other / misc',
-        icons: [
-            'dot', 'layout-list', 'list', 'grid-3x3',
-            'paint-bucket', 'message-square-more',
-        ],
-    },
-    {
-        heading: 'Custom / brand',
-        icons: ['ask-arbor', 'google'],
-    },
-];
+// ---------------------------------------------------------------------------
+// IconGallery — all icons grouped by semantic category
+// ---------------------------------------------------------------------------
+const ICON_CARD_GRID_STYLE = {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fill, minmax(7rem, 1fr))',
+    gap: 'var(--spacing-small)',
+};
+const IconCard = ({ name }) => (_jsxs("div", { style: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: 'var(--spacing-xsmall)',
+        padding: 'var(--spacing-medium)',
+        borderRadius: 'var(--border-radius-small)',
+        border: '1px solid var(--color-grey-200)',
+        background: 'var(--color-grey-100)',
+    }, children: [_jsx(Icon, { name: name, size: 16 }), _jsx("span", { className: "ds-text", style: {
+                color: 'var(--color-grey-600)',
+                wordBreak: 'break-word',
+                textAlign: 'center',
+                fontSize: 'var(--font-size-1-11)',
+            }, children: name })] }));
 const IconGalleryTemplate = () => (_jsx("div", { style: {
         padding: 'var(--spacing-xlarge)',
         width: '100%',
@@ -523,25 +557,32 @@ const IconGalleryTemplate = () => (_jsx("div", { style: {
                     margin: '0 0 var(--spacing-large) 0',
                     color: 'var(--color-grey-600)',
                     fontWeight: 'var(--font-weight-semi-bold)',
-                }, children: category.heading }), _jsx("div", { style: {
-                    display: 'grid',
-                    gridTemplateColumns: 'repeat(auto-fill, minmax(7rem, 1fr))',
-                    gap: 'var(--spacing-small)',
-                }, children: category.icons.map(name => (_jsxs("div", { style: {
-                        display: 'flex',
-                        flexDirection: 'column',
-                        alignItems: 'center',
-                        gap: 'var(--spacing-xsmall)',
-                        padding: 'var(--spacing-medium)',
-                        borderRadius: 'var(--border-radius-small)',
-                        border: '1px solid var(--color-grey-200)',
-                        background: 'var(--color-grey-100)',
-                    }, children: [_jsx(Icon, { name: name, size: 16 }), _jsx("span", { className: "ds-text", style: {
-                                color: 'var(--color-grey-600)',
-                                wordBreak: 'break-word',
-                                textAlign: 'center',
-                                fontSize: 'var(--font-size-1-11)',
-                            }, children: name })] }, name))) })] }, category.heading))) }));
+                }, children: category.heading }), _jsx("div", { style: ICON_CARD_GRID_STYLE, children: category.icons.map(name => (_jsx(IconCard, { name: name }, name))) })] }, category.heading))) }));
+// ---------------------------------------------------------------------------
+// IconSearch — search the whole Lucide set without rendering ~1,900 SVGs at once
+// ---------------------------------------------------------------------------
+const SEARCH_RESULT_LIMIT = 120;
+const IconSearchTemplate = () => {
+    const [query, setQuery] = useState('');
+    const searchTerm = query.trim().toLowerCase();
+    const matches = useMemo(() => (searchTerm
+        ? iconNames.filter(name => name.includes(searchTerm))
+        : CURATED_ICON_NAMES), [searchTerm]);
+    const visible = matches.slice(0, SEARCH_RESULT_LIMIT);
+    return (_jsxs("div", { style: { padding: 'var(--spacing-xlarge)', width: '100%', maxWidth: '900px' }, children: [_jsxs("label", { className: "ds-text", htmlFor: "ds-icon-search", style: {
+                    display: 'block',
+                    marginBottom: 'var(--spacing-xsmall)',
+                    fontWeight: 'var(--font-weight-semi-bold)',
+                }, children: ["Search", ' ', iconNames.length, ' ', "icon names"] }), _jsx("input", { id: "ds-icon-search", type: "search", value: query, onChange: event => setQuery(event.target.value), placeholder: "e.g. calendar, arrow, user", style: {
+                    width: '100%',
+                    padding: 'var(--spacing-small)',
+                    marginBottom: 'var(--spacing-small)',
+                    borderRadius: 'var(--border-radius-small)',
+                    border: '1px solid var(--color-grey-300)',
+                } }), _jsx("p", { className: "ds-text", style: { margin: '0 0 var(--spacing-large) 0', color: 'var(--color-grey-600)' }, children: searchTerm
+                    ? `${matches.length} match${matches.length === 1 ? '' : 'es'}${matches.length > visible.length ? ` — showing the first ${visible.length}` : ''}`
+                    : `Showing the ${visible.length} Arbor-curated names — type to search the full set.` }), _jsx("div", { style: ICON_CARD_GRID_STYLE, children: visible.map(name => (_jsx(IconCard, { name: name }, name))) }), searchTerm && matches.length === 0 && (_jsxs("p", { className: "ds-text", style: { margin: 0, color: 'var(--color-grey-600)' }, children: ["No icon name contains \u201C", searchTerm, "\u201D. Browse the full set at", ' ', _jsx("a", { href: "https://lucide.dev/icons", target: "_blank", rel: "noreferrer", children: "lucide.dev/icons" }), "."] }))] }));
+};
 const InButtonContextTemplate = () => (_jsxs("div", { style: {
         padding: 'var(--spacing-xlarge)',
         display: 'flex',
@@ -994,4 +1035,11 @@ export default InEmptyStateContextExample;
     'Do not use `size={24}` in list items, table cells, or button icons — reserve it for',
     'full-area statements like this one.',
 ].join(' '));
+export const IconSearch = withDescription({
+    render: () => _jsx(IconSearchTemplate, {}),
+    parameters: { layout: 'fullscreen' },
+}, [
+    'Every Lucide icon name is a valid `name`, which is far too many to render at once — search',
+    'instead. Icons load on demand, so only the ones you actually render are downloaded.',
+].join(' '));
 //# sourceMappingURL=Icon.stories.js.map