@assembly-js/design-system 3.1.2 → 3.1.3

package/dist/esm/components/Icon.js

@@ -1,12 +1,50 @@
 // This file is generated by a script. Do not edit this file directly.
 var _excluded = ["icon"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
 import React from "react";
 import * as icons from "../icons";
+import { icons as faIcons } from "./IconPicker/icons.generated";
+import { iconToFaMap } from "../icons/iconToFaMap";
+var faIconMap;
+function getFAIconMap() {
+  if (!faIconMap) {
+    faIconMap = new Map(faIcons.map(function (i) {
+      return [i.name, i];
+    }));
+  }
+  return faIconMap;
+}
+
+/**
+ * Icon component that renders either a Font Awesome icon or a Design System icon.
+ * it checks if the icon name is in the Font Awesome icon set and renders the corresponding icon.
+ * if not, it falls back to the Design System icon set and renders the corresponding icon.
+ * @param icon - The name of the icon to render.
+ * @param props - The props to pass to the icon component.
+ * @returns The icon component.
+ */
 export var Icon = function Icon(_ref) {
   var icon = _ref.icon,
     props = _objectWithoutProperties(_ref, _excluded);
+  var mappedFaIcon = iconToFaMap[icon];
+
+  // if the icon name has a mapped fa icon, render the mapped fa icon, otherwise render the fa icon
+  var faIcon = mappedFaIcon ? getFAIconMap().get(mappedFaIcon) : getFAIconMap().get(icon);
+  if (faIcon) {
+    return /*#__PURE__*/React.createElement("svg", _extends({
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: faIcon.viewBox,
+      fill: "currentColor",
+      overflow: "visible",
+      "aria-hidden": "true"
+    }, props), /*#__PURE__*/React.createElement("path", {
+      d: faIcon.path
+    }));
+  }
+
+  // Fall back to DS icon
   var IconComponent = icons[icon];
   if (!IconComponent) return null;
   return /*#__PURE__*/React.createElement(IconComponent, props);

package/dist/esm/components/IconPicker/IconGrid.js

@@ -0,0 +1,201 @@
+// This file is generated by a script. Do not edit this file directly.
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, forwardRef } from 'react';
+import { cn } from "../../common/utils";
+import { BaseButton } from "../Button/Base";
+function renderIcon(icon) {
+  if (icon.source === 'ds') {
+    return /*#__PURE__*/React.createElement(icon.Component, {
+      className: "cop-h-[19px] cop-w-[19px]",
+      "aria-hidden": "true"
+    });
+  }
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: icon.viewBox,
+    fill: "currentColor",
+    className: "cop-h-[19px] cop-w-[19px]",
+    overflow: "visible",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: icon.path
+  }));
+}
+var COLUMNS = 8;
+export var IconGrid = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var icons = _ref.icons,
+    onSelect = _ref.onSelect,
+    selectedIcon = _ref.selectedIcon,
+    onEscapeFromGrid = _ref.onEscapeFromGrid;
+  var _useState = useState(-1),
+    _useState2 = _slicedToArray(_useState, 2),
+    focusedIndex = _useState2[0],
+    setFocusedIndex = _useState2[1];
+  var itemRefs = useRef([]);
+  var hasScrolledToSelected = useRef(false);
+
+  // Expose focusFirst so the parent can transfer focus into the grid
+  useImperativeHandle(ref, function () {
+    return {
+      focusFirst: function focusFirst() {
+        var selectedIdx = icons.findIndex(function (icon) {
+          return icon.name === selectedIcon;
+        });
+        setFocusedIndex(selectedIdx >= 0 ? selectedIdx : 0);
+      },
+      resetFocus: function resetFocus() {
+        setFocusedIndex(-1);
+      }
+    };
+  });
+
+  // Reset focused index and trim stale refs when the icon list changes
+  useEffect(function () {
+    setFocusedIndex(-1);
+    itemRefs.current.length = icons.length;
+  }, [icons]);
+
+  // Focus the item at focusedIndex when it changes
+  useEffect(function () {
+    if (focusedIndex >= 0 && focusedIndex < icons.length) {
+      var el = itemRefs.current[focusedIndex];
+      var btn = el === null || el === void 0 ? void 0 : el.querySelector('button');
+      btn === null || btn === void 0 || btn.focus();
+      el === null || el === void 0 || el.scrollIntoView({
+        block: 'nearest'
+      });
+    }
+  }, [focusedIndex, icons.length]);
+  var handleKeyDown = useCallback(function (e) {
+    var len = icons.length;
+    if (len === 0) return;
+    var nextIndex = focusedIndex;
+    var col = focusedIndex % COLUMNS;
+    switch (e.key) {
+      case 'ArrowRight':
+        // Stop at end of row
+        if (col < COLUMNS - 1 && focusedIndex + 1 < len) {
+          nextIndex = focusedIndex + 1;
+        }
+        break;
+      case 'ArrowLeft':
+        // Stop at start of row
+        if (col > 0) {
+          nextIndex = focusedIndex - 1;
+        }
+        break;
+      case 'ArrowDown':
+        nextIndex = focusedIndex + COLUMNS;
+        break;
+      case 'ArrowUp':
+        // If in the top row, escape back to search
+        if (focusedIndex < COLUMNS) {
+          onEscapeFromGrid === null || onEscapeFromGrid === void 0 || onEscapeFromGrid();
+          setFocusedIndex(-1);
+          e.preventDefault();
+          return;
+        }
+        nextIndex = focusedIndex - COLUMNS;
+        break;
+      case 'Home':
+        nextIndex = 0;
+        break;
+      case 'End':
+        nextIndex = len - 1;
+        break;
+      case 'Enter':
+        {
+          var icon = icons[focusedIndex];
+          if (focusedIndex >= 0 && icon) {
+            onSelect(icon);
+          }
+          e.preventDefault();
+          return;
+        }
+      default:
+        return;
+    }
+    e.preventDefault();
+    // Clamp within bounds
+    nextIndex = Math.max(0, Math.min(nextIndex, len - 1));
+    setFocusedIndex(nextIndex);
+  }, [focusedIndex, icons, onSelect, onEscapeFromGrid]);
+
+  // Find the boundary between DS and FA icons (for the divider)
+  var dividerIndex = useMemo(function () {
+    var firstFaIdx = icons.findIndex(function (icon) {
+      return icon.source === 'fa';
+    });
+    // Show divider only when both DS and FA icons are present
+    if (firstFaIdx > 0 && icons.some(function (icon) {
+      return icon.source === 'ds';
+    })) {
+      return firstFaIdx;
+    }
+    return -1;
+  }, [icons]);
+
+  // Row index where the divider appears (between DS and FA sections)
+  var dividerRowIndex = dividerIndex > 0 ? Math.ceil(dividerIndex / COLUMNS) : -1;
+
+  // Chunk icons into rows for proper ARIA grid hierarchy
+  var rows = useMemo(function () {
+    var result = [];
+    for (var i = 0; i < icons.length; i += COLUMNS) {
+      result.push(icons.slice(i, i + COLUMNS));
+    }
+    return result;
+  }, [icons]);
+  if (icons.length === 0) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "cop-flex cop-h-[262px] cop-items-center cop-justify-center"
+    }, /*#__PURE__*/React.createElement("p", {
+      className: "cop-text-sm cop-text-[#6b6f76]"
+    }, "No icons found"));
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    role: "grid",
+    "aria-label": "Icon grid",
+    onKeyDown: handleKeyDown,
+    className: "cop--m-[3px] cop-grid cop-h-[262px] cop-content-start cop-overflow-y-auto cop-p-[3px] [scrollbar-color:rgba(0,0,0,0.2)_transparent] [scrollbar-width:thin]"
+  }, rows.map(function (row, rowIndex) {
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: rowIndex
+    }, rowIndex === dividerRowIndex && /*#__PURE__*/React.createElement("div", {
+      role: "separator",
+      className: "cop-my-2 cop-h-px cop-bg-[#eff1f4]"
+    }), /*#__PURE__*/React.createElement("div", {
+      role: "row",
+      className: "cop-grid cop-grid-cols-[repeat(8,1fr)] cop-gap-x-[6px] cop-gap-y-[8px]"
+    }, row.map(function (icon, colIndex) {
+      var flatIndex = rowIndex * COLUMNS + colIndex;
+      var isSelected = selectedIcon === icon.name;
+      return /*#__PURE__*/React.createElement("div", {
+        key: icon.name,
+        role: "gridcell",
+        ref: function ref(el) {
+          itemRefs.current[flatIndex] = el;
+          if (isSelected && el && !hasScrolledToSelected.current) {
+            hasScrolledToSelected.current = true;
+            el.scrollIntoView({
+              block: 'nearest'
+            });
+          }
+        }
+      }, /*#__PURE__*/React.createElement(BaseButton, {
+        variant: "minimal",
+        tabIndex: flatIndex === focusedIndex ? 0 : -1,
+        onClick: function onClick() {
+          return onSelect(icon);
+        },
+        "aria-label": icon.name,
+        className: cn('cop-p-[5px]', isSelected && 'cop-bg-secondary cop-text-gray-700 hover:cop-border-secondary hover:cop-bg-secondary')
+      }, renderIcon(icon)));
+    })));
+  }));
+});
+IconGrid.displayName = 'IconGrid';

package/dist/esm/components/IconPicker/IconPicker.js

@@ -0,0 +1,254 @@
+// This file is generated by a script. Do not edit this file directly.
+'use client';
+
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+import { cn } from "../../common/utils";
+import { BaseButton } from "../Button/Base";
+import { Input } from "../Input";
+import { IconGrid } from "./IconGrid";
+import { searchIcons } from "./searchIcons";
+import { pickerIcons } from "./pickerIcons";
+import { iconToFaMap } from "../../icons/iconToFaMap";
+var IconPicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var value = _ref.value,
+    onChange = _ref.onChange,
+    defaultValue = _ref.defaultValue,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? 'Select an icon' : _ref$placeholder,
+    className = _ref.className,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+  var isControlled = value !== undefined;
+  var _React$useState = React.useState(defaultValue),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    internalValue = _React$useState2[0],
+    setInternalValue = _React$useState2[1];
+  var selectedIcon = React.useMemo(function () {
+    if (isControlled) {
+      // if the icon value is a legacy icon picker value
+      if (iconToFaMap[value]) {
+        return iconToFaMap[value];
+      }
+      return value;
+    } else {
+      return internalValue;
+    }
+  }, [isControlled, value, internalValue]);
+  var selectedIconData = React.useMemo(function () {
+    return pickerIcons.find(function (icon) {
+      return icon.name === selectedIcon;
+    });
+  }, [selectedIcon]);
+  var _React$useState3 = React.useState(false),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    open = _React$useState4[0],
+    setOpen = _React$useState4[1];
+  var _React$useState5 = React.useState(''),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    search = _React$useState6[0],
+    setSearch = _React$useState6[1];
+  var _React$useState7 = React.useState(''),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    debouncedSearch = _React$useState8[0],
+    setDebouncedSearch = _React$useState8[1];
+  var triggerRef = React.useRef(null);
+  var popoverRef = React.useRef(null);
+  var searchInputRef = React.useRef(null);
+  var gridRef = React.useRef(null);
+  var _React$useState9 = React.useState({
+      top: 0,
+      left: 0
+    }),
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    coords = _React$useState10[0],
+    setCoords = _React$useState10[1];
+
+  // Merge forwarded ref with internal ref
+  React.useImperativeHandle(ref, function () {
+    return triggerRef.current;
+  });
+
+  // Debounce search input
+  React.useEffect(function () {
+    var timeout = setTimeout(function () {
+      return setDebouncedSearch(search);
+    }, 200);
+    return function () {
+      return clearTimeout(timeout);
+    };
+  }, [search]);
+
+  // Filter icons by search
+  var filteredIcons = React.useMemo(function () {
+    return searchIcons(debouncedSearch, pickerIcons);
+  }, [debouncedSearch]);
+
+  // Position popover below trigger with viewport boundary checks
+  var updatePosition = React.useCallback(function () {
+    var _popoverRef$current$o, _popoverRef$current;
+    if (!triggerRef.current) return;
+    var rect = triggerRef.current.getBoundingClientRect();
+    var popoverWidth = 330;
+    var popoverHeight = (_popoverRef$current$o = (_popoverRef$current = popoverRef.current) === null || _popoverRef$current === void 0 ? void 0 : _popoverRef$current.offsetHeight) !== null && _popoverRef$current$o !== void 0 ? _popoverRef$current$o : 300;
+    var gap = 4;
+    var top = rect.bottom + gap;
+    var left = rect.left;
+
+    // If popover overflows bottom, position above trigger
+    if (top + popoverHeight > window.innerHeight) {
+      top = rect.top - gap - popoverHeight;
+    }
+
+    // Clamp horizontal position within viewport
+    if (left + popoverWidth > window.innerWidth) {
+      left = window.innerWidth - popoverWidth - gap;
+    }
+    if (left < gap) {
+      left = gap;
+    }
+    setCoords({
+      top: top,
+      left: left
+    });
+  }, []);
+
+  // Update position when opened
+  React.useLayoutEffect(function () {
+    if (open) {
+      updatePosition();
+      // Focus search input after positioning
+      requestAnimationFrame(function () {
+        var _searchInputRef$curre;
+        return (_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 ? void 0 : _searchInputRef$curre.focus();
+      });
+    }
+  }, [open, updatePosition]);
+
+  // Lock body scroll while open and reposition on resize
+  React.useEffect(function () {
+    if (!open) return;
+    var prevOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    window.addEventListener('resize', updatePosition);
+    return function () {
+      document.body.style.overflow = prevOverflow;
+      window.removeEventListener('resize', updatePosition);
+    };
+  }, [open, updatePosition]);
+
+  // Close on outside click
+  React.useEffect(function () {
+    if (!open) return;
+    var handleMouseDown = function handleMouseDown(e) {
+      var _triggerRef$current, _popoverRef$current2;
+      var target = e.target;
+      if ((_triggerRef$current = triggerRef.current) !== null && _triggerRef$current !== void 0 && _triggerRef$current.contains(target) || (_popoverRef$current2 = popoverRef.current) !== null && _popoverRef$current2 !== void 0 && _popoverRef$current2.contains(target)) {
+        return;
+      }
+      setOpen(false);
+      setSearch('');
+    };
+    document.addEventListener('mousedown', handleMouseDown);
+    return function () {
+      return document.removeEventListener('mousedown', handleMouseDown);
+    };
+  }, [open]);
+
+  // Close on Escape
+  React.useEffect(function () {
+    if (!open) return;
+    var handleKeyDown = function handleKeyDown(e) {
+      if (e.key === 'Escape') {
+        setOpen(false);
+        setSearch('');
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return function () {
+      return document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [open]);
+  var handleSelect = React.useCallback(function (icon) {
+    if (!isControlled) setInternalValue(icon.name);
+    onChange === null || onChange === void 0 || onChange(icon.name);
+    setOpen(false);
+    setSearch('');
+  }, [isControlled, onChange]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    ref: triggerRef,
+    className: "cop-inline-flex"
+  }, /*#__PURE__*/React.createElement(BaseButton, {
+    variant: "minimal",
+    disabled: disabled,
+    onClick: function onClick() {
+      return setOpen(function (prev) {
+        return !prev;
+      });
+    },
+    "aria-label": selectedIcon !== null && selectedIcon !== void 0 ? selectedIcon : placeholder,
+    "aria-haspopup": "dialog",
+    "aria-expanded": open,
+    className: cn('cop-p-[7px]', className)
+  }, selectedIconData ? selectedIconData.source === 'ds' ? /*#__PURE__*/React.createElement(selectedIconData.Component, {
+    className: "cop-h-4 cop-w-4",
+    "aria-hidden": "true"
+  }) : /*#__PURE__*/React.createElement("svg", {
+    viewBox: selectedIconData.viewBox,
+    fill: "currentColor",
+    className: "cop-h-4 cop-w-4",
+    overflow: "visible",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: selectedIconData.path
+  })) : /*#__PURE__*/React.createElement("span", {
+    className: "cop-text-muted-foreground cop-text-sm"
+  }, placeholder))), open && /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement("div", {
+    ref: popoverRef,
+    style: {
+      top: coords.top,
+      left: coords.left
+    },
+    className: "cop-fixed cop-z-1500 cop-w-[330px] cop-overflow-clip cop-rounded cop-border cop-border-solid cop-border-[#eff1f4] cop-bg-white cop-shadow-[0px_6px_20px_0px_rgba(0,0,0,0.07)]"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "cop-px-3 cop-pt-3"
+  }, /*#__PURE__*/React.createElement(Input, {
+    ref: searchInputRef,
+    placeholder: "Search icons",
+    value: search,
+    onChange: function onChange(e) {
+      return setSearch(e.target.value);
+    },
+    onFocus: function onFocus() {
+      var _gridRef$current, _gridRef$current$rese;
+      return (_gridRef$current = gridRef.current) === null || _gridRef$current === void 0 || (_gridRef$current$rese = _gridRef$current.resetFocus) === null || _gridRef$current$rese === void 0 ? void 0 : _gridRef$current$rese.call(_gridRef$current);
+    },
+    onKeyDown: function onKeyDown(e) {
+      if ((e.key === 'ArrowDown' || e.key === 'Enter') && filteredIcons.length > 0) {
+        var _gridRef$current2;
+        e.preventDefault();
+        (_gridRef$current2 = gridRef.current) === null || _gridRef$current2 === void 0 || _gridRef$current2.focusFirst();
+      }
+    },
+    className: "focus-visible:cop-border-[#1a1a1a] focus-visible:cop-ring-0 focus-visible:cop-ring-offset-0"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "cop-py-3 cop-pl-3 cop-pr-0"
+  }, /*#__PURE__*/React.createElement(IconGrid, {
+    ref: gridRef,
+    icons: filteredIcons,
+    onSelect: handleSelect,
+    selectedIcon: selectedIcon,
+    onEscapeFromGrid: function onEscapeFromGrid() {
+      var _searchInputRef$curre2;
+      return (_searchInputRef$curre2 = searchInputRef.current) === null || _searchInputRef$curre2 === void 0 ? void 0 : _searchInputRef$curre2.focus();
+    }
+  }))), document.body));
+});
+IconPicker.displayName = 'IconPicker';
+export { IconPicker };

package/dist/esm/components/IconPicker/__tests__/searchIcons.test.js

@@ -0,0 +1,55 @@
+// This file is generated by a script. Do not edit this file directly.
+import { searchIcons } from "../searchIcons";
+jest.mock("../icons.generated", function () {
+  return {
+    searchTermsMap: {
+      heart: ['love', 'like', 'favorite'],
+      'heart-crack': ['break', 'love', 'sad'],
+      star: ['favorite', 'rating'],
+      house: ['home', 'building'],
+      'magnifying-glass': ['search', 'find', 'look'],
+      gear: ['settings', 'configure']
+    }
+  };
+});
+var faIcon = function faIcon(name) {
+  return {
+    source: 'fa',
+    name: name,
+    viewBox: '0 0 512 512',
+    path: 'M0 0'
+  };
+};
+var fixture = [faIcon('heart'), faIcon('heart-crack'), faIcon('star'), faIcon('house'), faIcon('magnifying-glass'), faIcon('filter'), faIcon('gear')];
+describe('searchIcons', function () {
+  it('returns all icons for an empty query', function () {
+    expect(searchIcons('', fixture)).toEqual(fixture);
+    expect(searchIcons('  ', fixture)).toEqual(fixture);
+  });
+  it('matches icons by name', function () {
+    var results = searchIcons('heart', fixture);
+    expect(results).toHaveLength(2);
+    expect(results.map(function (i) {
+      return i.name;
+    })).toEqual(['heart', 'heart-crack']);
+  });
+  it('matches icons by searchTerms', function () {
+    var results = searchIcons('love', fixture);
+    expect(results).toHaveLength(2);
+    expect(results.map(function (i) {
+      return i.name;
+    })).toEqual(['heart', 'heart-crack']);
+  });
+  it('matches icons by partial prefix', function () {
+    var _results$;
+    var results = searchIcons('mag', fixture);
+    expect(results).toHaveLength(1);
+    expect((_results$ = results[0]) === null || _results$ === void 0 ? void 0 : _results$.name).toBe('magnifying-glass');
+  });
+  it('matches icons by search term prefix', function () {
+    var _results$2;
+    var results = searchIcons('set', fixture);
+    expect(results).toHaveLength(1);
+    expect((_results$2 = results[0]) === null || _results$2 === void 0 ? void 0 : _results$2.name).toBe('gear');
+  });
+});

package/dist/esm/components/IconPicker/dsPickerIcons.js

@@ -0,0 +1,18 @@
+// This file is generated by a script. Do not edit this file directly.
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import * as icons from "../../icons";
+export var dsPickerIcons = Object.entries(icons).map(function (_ref) {
+  var _ref2 = _slicedToArray(_ref, 2),
+    name = _ref2[0],
+    Component = _ref2[1];
+  return {
+    source: 'ds',
+    name: name,
+    Component: Component
+  };
+});