@lax-wp/design-system 0.13.37-beta.0 → 0.13.38

package/dist/components/forms/creatable-select/CreatableSelect.es.js

@@ -1,4 +1,4 @@
-import { jsxs as u, jsx as a } from "react/jsx-runtime";
+import { jsxs as g, jsx as a } from "react/jsx-runtime";
 import V from "../../../_virtual/index.es.js";
 import M from "react-select/creatable";
 import { CancelRounded as P, ChevronLeftRounded as j } from "@mui/icons-material";
@@ -32,8 +32,8 @@ const J = ({
 }) => {
   const r = G(), [F, b] = _(!1), x = (o, e) => {
     f && f(o);
-    const g = document.getElementById(l);
-    if (g) {
+    const u = document.getElementById(l);
+    if (u) {
       const R = new CustomEvent("pilot-change", {
         bubbles: !0,
         detail: {
@@ -42,7 +42,7 @@ const J = ({
           type: "change"
         }
       });
-      g.dispatchEvent(R);
+      u.dispatchEvent(R);
     }
   }, L = {
     control: (o, e) => ({
@@ -162,7 +162,7 @@ const J = ({
       }
     }
   ) });
-  return /* @__PURE__ */ u(
+  return /* @__PURE__ */ g(
     "div",
     {
       id: l,
@@ -171,7 +171,7 @@ const J = ({
       role: "group",
       "aria-labelledby": i ? l + "Label" : void 0,
       children: [
-        i && /* @__PURE__ */ u(
+        i && /* @__PURE__ */ g(
           "label",
           {
             id: l + "Label",
@@ -207,8 +207,11 @@ const J = ({
                 filterOption: D,
                 placeholder: k,
                 classNames: {
-                  menuList: () => "nowheel",
-                  control: () => "!min-h-8 !text-sm"
+                  menuList: () => "nowheel !text-sm",
+                  option: () => "!text-sm",
+                  control: () => "!min-h-8 !text-sm",
+                  valueContainer: () => "!text-sm",
+                  placeholder: () => '!text-sm text-neutral-400 dark:text-neutral-400"'
                 },
                 components: {
                   DropdownIndicator: H,

package/dist/components/forms/creatable-select/CreatableSelect.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"CreatableSelect.es.js","sources":["../../../../src/components/forms/creatable-select/CreatableSelect.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport cn from \"classnames\";\nimport CreatableSelect from \"react-select/creatable\";\nimport { CancelRounded, ChevronLeftRounded } from \"@mui/icons-material\";\nimport { Tooltip } from \"antd\";\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { HelpIcon } from \"../../icons/HelpIcon\";\nimport { Label } from \"../../data-display/label/Label\";\nimport type { LabelType } from \"../../data-display/label/Label\";\nimport { useState, type ComponentProps } from \"react\";\nimport { InputLabel } from \"../shared/InputLabel\";\nimport { useIsDarkMode } from \"../../../hooks/useIsDarkMode\";\n\n/**\n * Option type for the CreatableSelect component\n */\nexport interface SelectOption {\n  /** The value of the option */\n  value: string | number;\n  /** The label displayed for the option */\n  label: string;\n  /** Whether the option is disabled */\n  isDisabled?: boolean;\n  /** Additional data for the option */\n  data?: Record<string, unknown>;\n}\n\n/**\n * Props for the CreatableSelectField component\n * Matches the lax-web-portal implementation for drop-in replacement\n */\nexport type TProps = {\n  /** Unique identifier for the select */\n  id: string;\n  /** Label text to display above the select */\n  label: string;\n  /** Placeholder text for the select */\n  placeholder?: string;\n  /** Current value for single select */\n  value?: any;\n  /** Callback function called when selection changes */\n  onChange(data: any): void;\n  /** Error message to display below the select */\n  errorMessage?: string;\n  /** Array of available options */\n  selectOptions: any[];\n  /** Whether the select is in loading state */\n  loading?: boolean;\n  /** Whether multiple selections are allowed */\n  multiSelect?: boolean;\n  /** Current values for multi select */\n  selectedValues?: any[];\n  /** Custom filter function for options */\n  filterOption?: any;\n  /** Whether to preserve original case in the label */\n  originalCase?: boolean;\n  /** Whether the select is disabled */\n  disabled?: boolean;\n  /** Whether the select is clearable */\n  isClearable?: boolean;\n  /** Whether the field is required */\n  required?: boolean;\n  /** Tags/labels to display next to the label */\n  tags?: (string | LabelType)[];\n  /** Tooltip text for the help icon */\n  tooltip?: string;\n  /** Additional CSS classes for the wrapper */\n  className?: string;\n};\n\n// Export type alias for backward compatibility\nexport type CreatableSelectProps = TProps & ComponentProps<typeof CreatableSelect>;\n\n/**\n * A creatable select component with label, validation, and styling support.\n * Features dark mode support, accessibility enhancements, and comprehensive prop support.\n * Built on top of react-select/creatable for advanced functionality.\n *\n * This component is designed as a drop-in replacement for the lax-web-portal\n * CreatableSelectField component.\n *\n * @example\n * ```tsx\n * <CreatableSelectField\n *   id=\"tags\"\n *   label=\"Tags\"\n *   selectOptions={tagOptions}\n *   value={selectedTag}\n *   onChange={(newValue) => setSelectedTag(newValue)}\n *   placeholder=\"Select or create tags...\"\n *   multiSelect\n * />\n * ```\n */\nexport const CreatableSelectField = ({\n  id,\n  label,\n  errorMessage,\n  selectOptions,\n  loading,\n  isClearable,\n  multiSelect,\n  selectedValues,\n  disabled,\n  required,\n  value,\n  className,\n  tooltip,\n  tags,\n  originalCase = false,\n  onChange,\n  filterOption,\n  placeholder,\n  ...props\n}: TProps & ComponentProps<typeof CreatableSelect>) => {\n  const isDarkMode = useIsDarkMode();\n  const [isHovered, setIsHovered] = useState(false);\n\n  const handleChange = (newValue: any, _actionMeta?: any) => {\n    // Call the original onChange handler\n    if (onChange) {\n      onChange(newValue);\n    }\n\n    // Dispatch pilot-change event for recording\n    const containerElement = document.getElementById(id);\n    if (containerElement) {\n      const pilotChangeEvent = new CustomEvent(\"pilot-change\", {\n        bubbles: true,\n        detail: {\n          selector: `#${id}`,\n          value: newValue,\n          type: \"change\",\n        },\n      });\n      containerElement.dispatchEvent(pilotChangeEvent);\n    }\n  };\n\n  const styleProps = {\n    control: (baseStyles: any, state: any) => ({\n      ...baseStyles,\n      borderColor:\n        errorMessage && required\n          ? isDarkMode ? \"#F04438\" : \"#fda49b\"\n          : state.isFocused\n            ? \"var(--color-primary-600)\"\n            : isDarkMode ? \"#434343\" : \"#d9d9d9\",\n      backgroundColor: isDarkMode\n        ? \"#141414\"\n        : state.isDisabled ? \"#f5f5f5\" : \"#fff\",\n      borderRadius: \"6px\",\n      padding: \"0 4px 0 12px\",\n      opacity: state.isDisabled ? 0.6 : 1,\n      cursor: state.isDisabled ? \"not-allowed\" : \"pointer\",\n      boxShadow: state.isFocused\n        ? isDarkMode\n          ? \"0 0 0 1.5px var(--color-primary-950)\"\n          : \"0 0 0 1.5px var(--color-primary-100)\"\n        : \"none\",\n      \"&:hover\": {\n        borderColor:\n          errorMessage && required\n            ? isDarkMode ? \"#F04438\" : \"#fda49b\"\n            : \"var(--color-primary-600)\",\n      },\n    }),\n    valueContainer: (baseStyles: any) => ({\n      ...baseStyles,\n      fontSize: \"14px\",\n      padding: 0,\n    }),\n    input: (baseStyles: any) => ({\n      ...baseStyles,\n      margin: \"0\",\n      padding: \"0\",\n      color: isDarkMode ? \"rgba(255,255,255,0.85)\" : \"inherit\",\n    }),\n    indicatorsContainer: (baseStyles: any) => ({\n      ...baseStyles,\n      padding: 0,\n    }),\n    option: (baseStyles: any, state: any) => ({\n      ...baseStyles,\n      fontSize: \"14px\",\n      lineHeight: \"22px\",\n      padding: \"5px 12px\",\n      margin: 0,\n      backgroundColor: state.isSelected\n        ? isDarkMode ? \"var(--color-primary-975)\" : \"var(--color-primary-50)\"\n        : state.isFocused\n          ? isDarkMode ? \"var(--color-primary-950)\" : \"var(--color-primary-100)\"\n        : isDarkMode ? \"#141414\" : \"#fff\",\n      color: state.isDisabled\n        ? isDarkMode ? \"rgba(255,255,255,0.25)\" : \"#a3a3a3\"\n        : isDarkMode\n          ? state.isSelected\n            ? \"var(--color-primary-600)\"\n            : \"rgba(255,255,255,0.85)\"\n          : \"rgba(0,0,0,0.88)\",\n      cursor: state.isDisabled ? \"not-allowed\" : \"pointer\",\n      opacity: state.isDisabled ? 0.6 : 1,\n      \"&:hover\": {\n        backgroundColor: state.isDisabled\n          ? isDarkMode ? \"#141414\" : \"#fff\"\n          : isDarkMode ? \"var(--color-primary-950)\" : \"var(--color-primary-100)\",\n      },\n      \"&:active\": {\n        backgroundColor: isDarkMode ? \"var(--color-primary-950)\" : \"var(--color-primary-50)\",\n      },\n    }),\n    singleValue: (baseStyles: any, state: any) => ({\n      ...baseStyles,\n      fontSize: \"14px\",\n      lineHeight: \"20px\",\n      color: state.isDisabled\n        ? isDarkMode ? \"rgba(255,255,255,0.25)\" : \"#a3a3a3\"\n        : isDarkMode ? \"rgba(255,255,255,0.85)\" : \"rgba(0,0,0,0.88)\",\n    }),\n    placeholder: (baseStyles: any) => ({\n      ...baseStyles,\n      fontSize: \"14px\",\n      whiteSpace: \"nowrap\" as const,\n      textOverflow: \"ellipsis\",\n      overflow: \"hidden\",\n      color: isDarkMode ? \"rgba(255,255,255,0.25)\" : \"#bfbfbf\",\n    }),\n    multiValue: (baseStyles: any) => ({\n      ...baseStyles,\n      backgroundColor: isDarkMode ? \"rgba(255,255,255,0.08)\" : \"#f0f5ff\",\n      border: isDarkMode ? \"1px solid transparent\" : \"1px solid #adc6ff\",\n      borderRadius: \"4px\",\n    }),\n    multiValueLabel: (baseStyles: any) => ({\n      ...baseStyles,\n      color: isDarkMode ? \"rgba(255,255,255,0.85)\" : \"var(--color-primary-600)\",\n      fontSize: \"12px\",\n    }),\n    multiValueRemove: (baseStyles: any) => ({\n      ...baseStyles,\n      color: isDarkMode ? \"rgba(255,255,255,0.85)\" : \"var(--color-primary-600)\",\n      \"&:hover\": {\n        backgroundColor: isDarkMode ? \"rgba(255,255,255,0.16)\" : \"#e6f4ff\",\n        color: isDarkMode ? \"#fff\" : \"var(--color-primary-600)\",\n      },\n    }),\n    menu: (baseStyles: any) => ({\n      ...baseStyles,\n      zIndex: 5001,\n      borderRadius: \"8px\",\n      boxShadow: isDarkMode\n        ? \"0 6px 16px 0 rgba(0,0,0,0.45)\"\n        : \"0 6px 16px 0 rgba(0,0,0,0.08), 0 3px 6px -4px rgba(0,0,0,0.12), 0 9px 28px 8px rgba(0,0,0,0.05)\",\n      backgroundColor: isDarkMode ? \"#141414\" : \"#fff\",\n      border: isDarkMode ? \"1px solid #303030\" : \"none\",\n      overflow: \"hidden\",\n    }),\n    menuList: (baseStyles: any) => ({\n      ...baseStyles,\n      padding: \"0\",\n      maxHeight: \"256px\",\n    }),\n  };\n\n  const hasSelectedValues = !!selectedValues?.length;\n  const hasValue = !!value;\n  const isFieldClearable = isClearable ? hasSelectedValues || hasValue : false;\n  const showClearIcon = isHovered && !disabled && isFieldClearable;\n\n  const handleClear = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    e.preventDefault();\n    handleChange(multiSelect ? [] : null);\n  };\n\n  const DropdownIndicator = () => (\n    <div className=\"flex items-center\">\n      {showClearIcon ? (\n        <CancelRounded\n          onClick={handleClear}\n          sx={{\n            fontSize: \"16px\",\n            cursor: \"pointer\",\n            color: isDarkMode ? \"rgba(255,255,255,0.45)\" : \"rgba(0,0,0,0.25)\",\n            \"&:hover\": {\n              color: isDarkMode ? \"rgba(255,255,255,0.65)\" : \"rgba(0,0,0,0.45)\",\n            },\n          }}\n        />\n      ) : (\n        <ChevronLeftRounded\n          className=\"-rotate-90\"\n          sx={{\n            fontSize: \"18px\",\n            color: isDarkMode ? \"rgba(255,255,255,0.25)\" : \"rgba(0,0,0,0.25)\",\n          }}\n        />\n      )}\n    </div>\n  );\n\n  return (\n    <div\n      id={id}\n      className={cn(\"w-full flex flex-col gap-1\", className)}\n      onMouseDown={(e) => e.stopPropagation()}\n      role=\"group\"\n      aria-labelledby={label ? id + \"Label\" : undefined}\n    >\n      {label && (\n        <label\n          id={id + \"Label\"}\n          htmlFor=\"text\"\n          className={`text-xs font-medium text-gray-600 dark:text-black-300 inline-flex items-center gap-1 ${!originalCase ? \"capitalize\" : \"\"}`}\n        >\n          <InputLabel label={label || \"\"} required={required || false} />\n          <Label labels={tags} />\n          {tooltip && (\n            <Tooltip placement=\"top\" title={tooltip}>\n              <div className=\"cursor-pointer\">\n                <HelpIcon className=\"w-icon-sm h-icon-sm\" />\n              </div>\n            </Tooltip>\n          )}\n        </label>\n      )}\n\n      <div\n        onMouseEnter={() => setIsHovered(true)}\n        onMouseLeave={() => setIsHovered(false)}\n      >\n        <CreatableSelect\n          {...props}\n          id={\"cm\" + label}\n          classNamePrefix=\"lax-select\"\n          required={required}\n          options={selectOptions}\n          isClearable={false}\n          isLoading={loading}\n          isDisabled={disabled}\n          styles={styleProps}\n          isMulti={multiSelect}\n          value={multiSelect ? selectedValues : value}\n          onChange={handleChange}\n          filterOption={filterOption}\n          placeholder={placeholder}\n          classNames={{\n            menuList: () => \"nowheel\",\n            control: ()=> \"!min-h-8 !text-sm\"\n          }}\n          components={{\n            DropdownIndicator,\n            IndicatorSeparator: () => null,\n          }}\n        />\n      </div>\n      {errorMessage && (\n        <Typography\n          className=\"text-error-500\"\n          appearance=\"custom\"\n          size=\"extra-small\"\n          variant=\"medium\"\n        >\n          {errorMessage}\n        </Typography>\n      )}\n    </div>\n  );\n};\n\nCreatableSelectField.displayName = \"CreatableSelectField\";\n"],"names":["CreatableSelectField","id","label","errorMessage","selectOptions","loading","isClearable","multiSelect","selectedValues","disabled","required","value","className","tooltip","tags","originalCase","onChange","filterOption","placeholder","props","isDarkMode","useIsDarkMode","isHovered","setIsHovered","useState","handleChange","newValue","_actionMeta","containerElement","pilotChangeEvent","styleProps","baseStyles","state","hasSelectedValues","showClearIcon","handleClear","e","DropdownIndicator","jsx","CancelRounded","ChevronLeftRounded","jsxs","cn","InputLabel","Label","Tooltip","HelpIcon","CreatableSelect","Typography"],"mappings":"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"}
+{"version":3,"file":"CreatableSelect.es.js","sources":["../../../../src/components/forms/creatable-select/CreatableSelect.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport cn from \"classnames\";\nimport CreatableSelect from \"react-select/creatable\";\nimport { CancelRounded, ChevronLeftRounded } from \"@mui/icons-material\";\nimport { Tooltip } from \"antd\";\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { HelpIcon } from \"../../icons/HelpIcon\";\nimport { Label } from \"../../data-display/label/Label\";\nimport type { LabelType } from \"../../data-display/label/Label\";\nimport { useState, type ComponentProps } from \"react\";\nimport { InputLabel } from \"../shared/InputLabel\";\nimport { useIsDarkMode } from \"../../../hooks/useIsDarkMode\";\n\n/**\n * Option type for the CreatableSelect component\n */\nexport interface SelectOption {\n  /** The value of the option */\n  value: string | number;\n  /** The label displayed for the option */\n  label: string;\n  /** Whether the option is disabled */\n  isDisabled?: boolean;\n  /** Additional data for the option */\n  data?: Record<string, unknown>;\n}\n\n/**\n * Props for the CreatableSelectField component\n * Matches the lax-web-portal implementation for drop-in replacement\n */\nexport type TProps = {\n  /** Unique identifier for the select */\n  id: string;\n  /** Label text to display above the select */\n  label: string;\n  /** Placeholder text for the select */\n  placeholder?: string;\n  /** Current value for single select */\n  value?: any;\n  /** Callback function called when selection changes */\n  onChange(data: any): void;\n  /** Error message to display below the select */\n  errorMessage?: string;\n  /** Array of available options */\n  selectOptions: any[];\n  /** Whether the select is in loading state */\n  loading?: boolean;\n  /** Whether multiple selections are allowed */\n  multiSelect?: boolean;\n  /** Current values for multi select */\n  selectedValues?: any[];\n  /** Custom filter function for options */\n  filterOption?: any;\n  /** Whether to preserve original case in the label */\n  originalCase?: boolean;\n  /** Whether the select is disabled */\n  disabled?: boolean;\n  /** Whether the select is clearable */\n  isClearable?: boolean;\n  /** Whether the field is required */\n  required?: boolean;\n  /** Tags/labels to display next to the label */\n  tags?: (string | LabelType)[];\n  /** Tooltip text for the help icon */\n  tooltip?: string;\n  /** Additional CSS classes for the wrapper */\n  className?: string;\n};\n\n// Export type alias for backward compatibility\nexport type CreatableSelectProps = TProps & ComponentProps<typeof CreatableSelect>;\n\n/**\n * A creatable select component with label, validation, and styling support.\n * Features dark mode support, accessibility enhancements, and comprehensive prop support.\n * Built on top of react-select/creatable for advanced functionality.\n *\n * This component is designed as a drop-in replacement for the lax-web-portal\n * CreatableSelectField component.\n *\n * @example\n * ```tsx\n * <CreatableSelectField\n *   id=\"tags\"\n *   label=\"Tags\"\n *   selectOptions={tagOptions}\n *   value={selectedTag}\n *   onChange={(newValue) => setSelectedTag(newValue)}\n *   placeholder=\"Select or create tags...\"\n *   multiSelect\n * />\n * ```\n */\nexport const CreatableSelectField = ({\n  id,\n  label,\n  errorMessage,\n  selectOptions,\n  loading,\n  isClearable,\n  multiSelect,\n  selectedValues,\n  disabled,\n  required,\n  value,\n  className,\n  tooltip,\n  tags,\n  originalCase = false,\n  onChange,\n  filterOption,\n  placeholder,\n  ...props\n}: TProps & ComponentProps<typeof CreatableSelect>) => {\n  const isDarkMode = useIsDarkMode();\n  const [isHovered, setIsHovered] = useState(false);\n\n  const handleChange = (newValue: any, _actionMeta?: any) => {\n    // Call the original onChange handler\n    if (onChange) {\n      onChange(newValue);\n    }\n\n    // Dispatch pilot-change event for recording\n    const containerElement = document.getElementById(id);\n    if (containerElement) {\n      const pilotChangeEvent = new CustomEvent(\"pilot-change\", {\n        bubbles: true,\n        detail: {\n          selector: `#${id}`,\n          value: newValue,\n          type: \"change\",\n        },\n      });\n      containerElement.dispatchEvent(pilotChangeEvent);\n    }\n  };\n\n  const styleProps = {\n    control: (baseStyles: any, state: any) => ({\n      ...baseStyles,\n      borderColor:\n        errorMessage && required\n          ? isDarkMode ? \"#F04438\" : \"#fda49b\"\n          : state.isFocused\n            ? \"var(--color-primary-600)\"\n            : isDarkMode ? \"#434343\" : \"#d9d9d9\",\n      backgroundColor: isDarkMode\n        ? \"#141414\"\n        : state.isDisabled ? \"#f5f5f5\" : \"#fff\",\n      borderRadius: \"6px\",\n      padding: \"0 4px 0 12px\",\n      opacity: state.isDisabled ? 0.6 : 1,\n      cursor: state.isDisabled ? \"not-allowed\" : \"pointer\",\n      boxShadow: state.isFocused\n        ? isDarkMode\n          ? \"0 0 0 1.5px var(--color-primary-950)\"\n          : \"0 0 0 1.5px var(--color-primary-100)\"\n        : \"none\",\n      \"&:hover\": {\n        borderColor:\n          errorMessage && required\n            ? isDarkMode ? \"#F04438\" : \"#fda49b\"\n            : \"var(--color-primary-600)\",\n      },\n    }),\n    valueContainer: (baseStyles: any) => ({\n      ...baseStyles,\n      fontSize: \"14px\",\n      padding: 0,\n    }),\n    input: (baseStyles: any) => ({\n      ...baseStyles,\n      margin: \"0\",\n      padding: \"0\",\n      color: isDarkMode ? \"rgba(255,255,255,0.85)\" : \"inherit\",\n    }),\n    indicatorsContainer: (baseStyles: any) => ({\n      ...baseStyles,\n      padding: 0,\n    }),\n    option: (baseStyles: any, state: any) => ({\n      ...baseStyles,\n      fontSize: \"14px\",\n      lineHeight: \"22px\",\n      padding: \"5px 12px\",\n      margin: 0,\n      backgroundColor: state.isSelected\n        ? isDarkMode ? \"var(--color-primary-975)\" : \"var(--color-primary-50)\"\n        : state.isFocused\n          ? isDarkMode ? \"var(--color-primary-950)\" : \"var(--color-primary-100)\"\n        : isDarkMode ? \"#141414\" : \"#fff\",\n      color: state.isDisabled\n        ? isDarkMode ? \"rgba(255,255,255,0.25)\" : \"#a3a3a3\"\n        : isDarkMode\n          ? state.isSelected\n            ? \"var(--color-primary-600)\"\n            : \"rgba(255,255,255,0.85)\"\n          : \"rgba(0,0,0,0.88)\",\n      cursor: state.isDisabled ? \"not-allowed\" : \"pointer\",\n      opacity: state.isDisabled ? 0.6 : 1,\n      \"&:hover\": {\n        backgroundColor: state.isDisabled\n          ? isDarkMode ? \"#141414\" : \"#fff\"\n          : isDarkMode ? \"var(--color-primary-950)\" : \"var(--color-primary-100)\",\n      },\n      \"&:active\": {\n        backgroundColor: isDarkMode ? \"var(--color-primary-950)\" : \"var(--color-primary-50)\",\n      },\n    }),\n    singleValue: (baseStyles: any, state: any) => ({\n      ...baseStyles,\n      fontSize: \"14px\",\n      lineHeight: \"20px\",\n      color: state.isDisabled\n        ? isDarkMode ? \"rgba(255,255,255,0.25)\" : \"#a3a3a3\"\n        : isDarkMode ? \"rgba(255,255,255,0.85)\" : \"rgba(0,0,0,0.88)\",\n    }),\n    placeholder: (baseStyles: any) => ({\n      ...baseStyles,\n      fontSize: \"14px\",\n      whiteSpace: \"nowrap\" as const,\n      textOverflow: \"ellipsis\",\n      overflow: \"hidden\",\n      color: isDarkMode ? \"rgba(255,255,255,0.25)\" : \"#bfbfbf\",\n    }),\n    multiValue: (baseStyles: any) => ({\n      ...baseStyles,\n      backgroundColor: isDarkMode ? \"rgba(255,255,255,0.08)\" : \"#f0f5ff\",\n      border: isDarkMode ? \"1px solid transparent\" : \"1px solid #adc6ff\",\n      borderRadius: \"4px\",\n    }),\n    multiValueLabel: (baseStyles: any) => ({\n      ...baseStyles,\n      color: isDarkMode ? \"rgba(255,255,255,0.85)\" : \"var(--color-primary-600)\",\n      fontSize: \"12px\",\n    }),\n    multiValueRemove: (baseStyles: any) => ({\n      ...baseStyles,\n      color: isDarkMode ? \"rgba(255,255,255,0.85)\" : \"var(--color-primary-600)\",\n      \"&:hover\": {\n        backgroundColor: isDarkMode ? \"rgba(255,255,255,0.16)\" : \"#e6f4ff\",\n        color: isDarkMode ? \"#fff\" : \"var(--color-primary-600)\",\n      },\n    }),\n    menu: (baseStyles: any) => ({\n      ...baseStyles,\n      zIndex: 5001,\n      borderRadius: \"8px\",\n      boxShadow: isDarkMode\n        ? \"0 6px 16px 0 rgba(0,0,0,0.45)\"\n        : \"0 6px 16px 0 rgba(0,0,0,0.08), 0 3px 6px -4px rgba(0,0,0,0.12), 0 9px 28px 8px rgba(0,0,0,0.05)\",\n      backgroundColor: isDarkMode ? \"#141414\" : \"#fff\",\n      border: isDarkMode ? \"1px solid #303030\" : \"none\",\n      overflow: \"hidden\",\n    }),\n    menuList: (baseStyles: any) => ({\n      ...baseStyles,\n      padding: \"0\",\n      maxHeight: \"256px\",\n    }),\n  };\n\n  const hasSelectedValues = !!selectedValues?.length;\n  const hasValue = !!value;\n  const isFieldClearable = isClearable ? hasSelectedValues || hasValue : false;\n  const showClearIcon = isHovered && !disabled && isFieldClearable;\n\n  const handleClear = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    e.preventDefault();\n    handleChange(multiSelect ? [] : null);\n  };\n\n  const DropdownIndicator = () => (\n    <div className=\"flex items-center\">\n      {showClearIcon ? (\n        <CancelRounded\n          onClick={handleClear}\n          sx={{\n            fontSize: \"16px\",\n            cursor: \"pointer\",\n            color: isDarkMode ? \"rgba(255,255,255,0.45)\" : \"rgba(0,0,0,0.25)\",\n            \"&:hover\": {\n              color: isDarkMode ? \"rgba(255,255,255,0.65)\" : \"rgba(0,0,0,0.45)\",\n            },\n          }}\n        />\n      ) : (\n        <ChevronLeftRounded\n          className=\"-rotate-90\"\n          sx={{\n            fontSize: \"18px\",\n            color: isDarkMode ? \"rgba(255,255,255,0.25)\" : \"rgba(0,0,0,0.25)\",\n          }}\n        />\n      )}\n    </div>\n  );\n\n  return (\n    <div\n      id={id}\n      className={cn(\"w-full flex flex-col gap-1\", className)}\n      onMouseDown={(e) => e.stopPropagation()}\n      role=\"group\"\n      aria-labelledby={label ? id + \"Label\" : undefined}\n    >\n      {label && (\n        <label\n          id={id + \"Label\"}\n          htmlFor=\"text\"\n          className={`text-xs font-medium text-gray-600 dark:text-black-300 inline-flex items-center gap-1 ${!originalCase ? \"capitalize\" : \"\"}`}\n        >\n          <InputLabel label={label || \"\"} required={required || false} />\n          <Label labels={tags} />\n          {tooltip && (\n            <Tooltip placement=\"top\" title={tooltip}>\n              <div className=\"cursor-pointer\">\n                <HelpIcon className=\"w-icon-sm h-icon-sm\" />\n              </div>\n            </Tooltip>\n          )}\n        </label>\n      )}\n\n      <div\n        onMouseEnter={() => setIsHovered(true)}\n        onMouseLeave={() => setIsHovered(false)}\n      >\n        <CreatableSelect\n          {...props}\n          id={\"cm\" + label}\n          classNamePrefix=\"lax-select\"\n          required={required}\n          options={selectOptions}\n          isClearable={false}\n          isLoading={loading}\n          isDisabled={disabled}\n          styles={styleProps}\n          isMulti={multiSelect}\n          value={multiSelect ? selectedValues : value}\n          onChange={handleChange}\n          filterOption={filterOption}\n          placeholder={placeholder}\n          classNames={{\n            menuList: () => \"nowheel !text-sm\",\n            option: () => \"!text-sm\",\n            control: () => \"!min-h-8 !text-sm\",\n            valueContainer: () => '!text-sm',\n            placeholder: () => '!text-sm text-neutral-400 dark:text-neutral-400\"'\n          }}\n          components={{\n            DropdownIndicator,\n            IndicatorSeparator: () => null,\n          }}\n        />\n      </div>\n      {errorMessage && (\n        <Typography\n          className=\"text-error-500\"\n          appearance=\"custom\"\n          size=\"extra-small\"\n          variant=\"medium\"\n        >\n          {errorMessage}\n        </Typography>\n      )}\n    </div>\n  );\n};\n\nCreatableSelectField.displayName = \"CreatableSelectField\";\n"],"names":["CreatableSelectField","id","label","errorMessage","selectOptions","loading","isClearable","multiSelect","selectedValues","disabled","required","value","className","tooltip","tags","originalCase","onChange","filterOption","placeholder","props","isDarkMode","useIsDarkMode","isHovered","setIsHovered","useState","handleChange","newValue","_actionMeta","containerElement","pilotChangeEvent","styleProps","baseStyles","state","hasSelectedValues","showClearIcon","handleClear","e","DropdownIndicator","jsx","CancelRounded","ChevronLeftRounded","jsxs","cn","InputLabel","Label","Tooltip","HelpIcon","CreatableSelect","Typography"],"mappings":"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"}

package/dist/components/forms/icon-picker/IconPicker.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),w=require("../../../_virtual/index.cjs.js"),d=require("react"),C=require("react-window"),v=require("@mui/icons-material"),I=require("@mui/material"),y=require("antd"),k=require("../../data-display/typography/Typography.cjs.js"),N=require("../input-field/InputField.cjs.js"),x=require("../../../types/icon-picker.cjs.js"),P=require("../../../utils/countryFlags.cjs.js"),S=require("../shared/InputLabel.cjs.js");function q(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const c=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(n,a,c.get?c:{enumerable:!0,get:()=>e[a]})}}return n.default=e,Object.freeze(n)}const h=q(v),R=Object.keys(h).filter(e=>e?.endsWith("Rounded")),O=[...R||[],...(x.COUNTRY_CODES||[]).map(e=>`flag-${e}`)],D=e=>{if(e?.startsWith("flag-")){const n=e?.replace("flag-","");return x.countryNameFromCode(n||"")||n}return e.replaceAll(/([A-Z])/g," $1").trim()},T=({onChange:e,selectedIcon:n,setOpen:a})=>{const[c,f]=d.useState(""),l=(O||[]).filter(r=>{if(r?.startsWith("flag-")){const s=r?.replace("flag-","");return s?.toLowerCase()?.includes(c?.trim()?.toLowerCase()||"")||x.countryNameFromCode(s||"")?.toLowerCase()?.includes(c?.trim()?.toLowerCase()||"")}return r?.trim()?.toLowerCase()?.includes(c?.trim()?.toLowerCase()||"")}),p=(r,s)=>{if(s.stopPropagation(),n===r){e?.(null);return}e?.(r),a?.(!1)};return t.jsxs("div",{className:"flex flex-col gap-3",onKeyDown:r=>{r.key==="Enter"&&(r.preventDefault(),r.stopPropagation())},children:[t.jsx(N.InputField,{id:"input-field-icon-picker",placeholder:"Search icons...",onChange:r=>f(r||""),fieldSuffix:t.jsx(h.Search,{className:"!w-4 !h-4 text-neutral-400"})}),t.jsx(C.FixedSizeGrid,{columnCount:5,rowCount:Math.ceil((l?.length||0)/5),columnWidth:40,rowHeight:40,width:220,height:240,children:({columnIndex:r,rowIndex:s,style:m})=>{const g=s*5+r,i=l?.[g];return i?t.jsx("div",{style:m,className:"p-1",children:t.jsx(y.Tooltip,{title:D(i),placement:"bottom",children:t.jsx(I.IconButton,{type:"button",className:w("flex items-center justify-center  !rounded-md hover:bg-neutral-200 dark:hover:bg-black-700",{"!bg-primary-50 dark:!bg-black-800":n===i}),onClick:u=>p(i,u),onKeyDown:u=>{u.key==="Enter"&&(u.preventDefault(),u.stopPropagation())},children:t.jsx(b,{iconName:i,className:"!w-5 !h-5 text-neutral-900 dark:text-white"})})})}):null}})]})},b=({iconName:e,sx:n,className:a,isHovering:c})=>{if(e?.startsWith?.("flag-")){const l=e?.replace("flag-","");return P.getFlagComponent?.(l||"",c||!1)||t.jsx("div",{children:"-"})}const f=h?.[e];return f?t.jsx(f,{sx:n,className:a,isHovering:c}):t.jsx("div",{children:"-"})},L=({selectedIcon:e,onChange:n,label:a,required:c=!1,allowClear:f=!0,disabled:l=!1,errorMessage:p,dropdownPosition:r="bottom"})=>{const[s,m]=d.useState(!1),g=d.useRef(!1),i=d.useRef(null),u=d.useRef(!1);d.useEffect(()=>{u.current&&!s&&i.current?.focus(),u.current=s},[s]);const j=o=>{o.stopPropagation(),n?.("")};return t.jsx(y.Popover,{arrow:!1,placement:r,trigger:"click",getPopupContainer:o=>o?.parentElement||document.body,open:s,onOpenChange:o=>{o?(g.current&&m(!0),g.current=!1):m(!1)},content:t.jsx(T,{onChange:n,selectedIcon:e,setOpen:m}),children:t.jsxs("div",{className:"flex flex-col gap-1",children:[a?t.jsx(S.InputLabel,{label:a||"",required:c||!1}):null,t.jsxs("button",{ref:i,type:"button",id:`btn-icon-picker-icon-${e?"selected":"unselected"}`,className:`lax-form-trigger min-w-[83px] py-1.5 px-3 rounded-md border ${l?"cursor-not-allowed opacity-60 bg-neutral-50 dark:bg-black-800":"bg-white dark:bg-black-800"} ${p?"border-red-500":"focus:border-primary-600 dark:focus:border-primary-400"} flex items-center justify-between gap-2`,disabled:l,onClick:o=>{if(l){o.preventDefault(),o.stopPropagation();return}o.detail>0&&(g.current=!0)},onKeyDown:o=>{o.key==="Enter"&&(o.preventDefault(),s||o.currentTarget.closest("form")?.querySelector('button[type="submit"]')?.click())},children:[e?t.jsx(b,{iconName:e,className:"!w-5 !h-5 text-neutral-900 dark:text-white"}):t.jsx(k.Typography,{size:"small",variant:"medium",appearance:"subtitle",children:"Select Icon"}),e&&f&&!l?t.jsx(h.CloseRounded,{className:"!w-5 !h-5 hover:bg-neutral-100 dark:hover:bg-black-800 rounded-full transition-colors cursor-pointer text-neutral-400 dark:text-neutral-500",onClick:j}):null]}),p&&t.jsx(k.Typography,{size:"extra-small",className:"text-red-500 font-medium",children:p})]})})},F=d.lazy(()=>Promise.resolve({default:e=>t.jsx(d.Suspense,{fallback:t.jsx("div",{className:"min-w-20 h-8 animate-pulse bg-neutral-100 dark:bg-black-800 rounded-md"}),children:t.jsx(L,{...e})})}));exports.IconPicker=F;exports.IconRenderer=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),w=require("../../../_virtual/index.cjs.js"),d=require("react"),C=require("react-window"),v=require("@mui/icons-material"),I=require("@mui/material"),y=require("antd"),k=require("../../data-display/typography/Typography.cjs.js"),N=require("../input-field/InputField.cjs.js"),x=require("../../../types/icon-picker.cjs.js"),P=require("../../../utils/countryFlags.cjs.js"),S=require("../shared/InputLabel.cjs.js");function q(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const c=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(n,a,c.get?c:{enumerable:!0,get:()=>e[a]})}}return n.default=e,Object.freeze(n)}const h=q(v),R=Object.keys(h).filter(e=>e?.endsWith("Rounded")),O=[...R||[],...(x.COUNTRY_CODES||[]).map(e=>`flag-${e}`)],D=e=>{if(e?.startsWith("flag-")){const n=e?.replace("flag-","");return x.countryNameFromCode(n||"")||n}return e.replaceAll(/([A-Z])/g," $1").trim()},T=({onChange:e,selectedIcon:n,setOpen:a})=>{const[c,f]=d.useState(""),l=(O||[]).filter(r=>{if(r?.startsWith("flag-")){const s=r?.replace("flag-","");return s?.toLowerCase()?.includes(c?.trim()?.toLowerCase()||"")||x.countryNameFromCode(s||"")?.toLowerCase()?.includes(c?.trim()?.toLowerCase()||"")}return r?.trim()?.toLowerCase()?.includes(c?.trim()?.toLowerCase()||"")}),p=(r,s)=>{if(s.stopPropagation(),n===r){e?.(null);return}e?.(r),a?.(!1)};return t.jsxs("div",{className:"flex flex-col gap-3",onKeyDown:r=>{r.key==="Enter"&&(r.preventDefault(),r.stopPropagation())},children:[t.jsx(N.InputField,{id:"input-field-icon-picker",placeholder:"Search icons...",onChange:r=>f(r||""),fieldSuffix:t.jsx(h.Search,{className:"!w-4 !h-4 text-neutral-400"})}),t.jsx(C.FixedSizeGrid,{columnCount:5,rowCount:Math.ceil((l?.length||0)/5),columnWidth:40,rowHeight:40,width:220,height:240,children:({columnIndex:r,rowIndex:s,style:m})=>{const g=s*5+r,i=l?.[g];return i?t.jsx("div",{style:m,className:"p-1",children:t.jsx(y.Tooltip,{title:D(i),placement:"bottom",children:t.jsx(I.IconButton,{type:"button",className:w("flex items-center justify-center  !rounded-md hover:bg-neutral-200 dark:hover:bg-black-700",{"!bg-primary-50 dark:!bg-black-800":n===i}),onClick:u=>p(i,u),onKeyDown:u=>{u.key==="Enter"&&(u.preventDefault(),u.stopPropagation())},children:t.jsx(b,{iconName:i,className:"!w-5 !h-5 text-neutral-900 dark:text-white"})})})}):null}})]})},b=({iconName:e,sx:n,className:a,isHovering:c})=>{if(e?.startsWith?.("flag-")){const l=e?.replace("flag-","");return P.getFlagComponent?.(l||"",c||!1)||t.jsx("div",{children:"-"})}const f=h?.[e];return f?t.jsx(f,{sx:n,className:a,isHovering:c}):t.jsx("div",{children:"-"})},L=({selectedIcon:e,onChange:n,label:a,required:c=!1,allowClear:f=!0,disabled:l=!1,errorMessage:p,dropdownPosition:r="bottom"})=>{const[s,m]=d.useState(!1),g=d.useRef(!1),i=d.useRef(null),u=d.useRef(!1);d.useEffect(()=>{u.current&&!s&&i.current?.focus(),u.current=s},[s]);const j=o=>{o.stopPropagation(),n?.("")};return t.jsx(y.Popover,{arrow:!1,placement:r,trigger:"click",getPopupContainer:o=>o?.parentElement||document.body,open:s,onOpenChange:o=>{o?(g.current&&m(!0),g.current=!1):m(!1)},content:t.jsx(T,{onChange:n,selectedIcon:e,setOpen:m}),children:t.jsxs("div",{className:"flex flex-col gap-1",children:[a?t.jsx(S.InputLabel,{label:a||"",required:c||!1}):null,t.jsxs("button",{ref:i,type:"button",id:`btn-icon-picker-icon-${e?"selected":"unselected"}`,className:`lax-form-trigger min-w-[83px] py-1.5 px-3 rounded-md border ${l?"cursor-not-allowed opacity-60 bg-neutral-50 dark:bg-black-800":"bg-white dark:bg-black-800"} ${p?"border-red-500":"focus:border-primary-600 dark:focus:border-primary-400"} flex items-center justify-between gap-2`,disabled:l,onClick:o=>{if(l){o.preventDefault(),o.stopPropagation();return}o.detail>0&&(g.current=!0)},onKeyDown:o=>{o.key==="Enter"&&(o.preventDefault(),s||o.currentTarget.closest("form")?.querySelector('button[type="submit"]')?.click())},children:[e?t.jsx(b,{iconName:e,className:"!w-5 !h-5 text-neutral-900 dark:text-white"}):t.jsx(k.Typography,{size:"small",variant:"regular",appearance:"subtitle",children:"Select Icon"}),e&&f&&!l?t.jsx(h.CloseRounded,{className:"!w-5 !h-5 hover:bg-neutral-100 dark:hover:bg-black-800 rounded-full transition-colors cursor-pointer text-neutral-400 dark:text-neutral-500",onClick:j}):null]}),p&&t.jsx(k.Typography,{size:"extra-small",className:"text-red-500 font-medium",children:p})]})})},F=d.lazy(()=>Promise.resolve({default:e=>t.jsx(d.Suspense,{fallback:t.jsx("div",{className:"min-w-20 h-8 animate-pulse bg-neutral-100 dark:bg-black-800 rounded-md"}),children:t.jsx(L,{...e})})}));exports.IconPicker=F;exports.IconRenderer=b;
 //# sourceMappingURL=IconPicker.cjs.js.map

package/dist/components/forms/icon-picker/IconPicker.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconPicker.cjs.js","sources":["../../../../src/components/forms/icon-picker/IconPicker.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport React, { Suspense, useEffect, useRef, useState } from 'react';\nimport { FixedSizeGrid, type GridChildComponentProps } from 'react-window';\nimport * as AllIcons from '@mui/icons-material';\nimport { IconButton, type SvgIconOwnProps } from '@mui/material';\nimport { Popover, Tooltip } from \"antd\";\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { InputField } from \"../input-field/InputField\";\nimport { COUNTRY_CODES, countryNameFromCode } from \"../../../types/icon-picker\";\nimport { getFlagComponent } from \"../../../utils/countryFlags\";\nimport { InputLabel } from '../shared/InputLabel';\n\nconst roundedIconNames = Object.keys(AllIcons).filter((name) =>\n  name?.endsWith(\"Rounded\")\n);\n\n// Merge icon names and country codes for the picker\nconst mergedIconNames = [\n  ...(roundedIconNames || []),\n  ...(COUNTRY_CODES || []).map((code) => `flag-${code}`),\n];\n\n// Utility function to convert camelCase to human-readable format\nconst formatIconName = (iconName: string): string => {\n  // Handle flag icons\n  if (iconName?.startsWith(\"flag-\")) {\n    const code = iconName?.replace(\"flag-\", \"\");\n    return countryNameFromCode(code || \"\") || code;\n  }\n\n  // Convert camelCase to space-separated words\n  // e.g., \"PersonRounded\" -> \"Person Rounded\"\n  return iconName.replaceAll(/([A-Z])/g, \" $1\").trim();\n};\n\n/** Ant Design `Popover` placement for the icon panel (bottom edge of the trigger). */\nexport type IconPickerDropdownPosition = 'bottom' | 'bottomLeft' | 'bottomRight';\n\nexport interface IconPickerContentProps {\n  selectedIcon: string | null;\n  onChange: (iconName: string | null) => void;\n  label?: string;\n  required?: boolean;\n  allowClear?: boolean;\n  disabled?: boolean;\n  errorMessage?: string;\n  /** Popover placement: `bottom` | `bottomLeft` | `bottomRight`. Default: `bottom`. */\n  dropdownPosition?: IconPickerDropdownPosition;\n}\n\ninterface IconPickerContentInternalProps {\n  onChange: (iconName: string | null) => void;\n  selectedIcon: string | null;\n  setOpen?: React.Dispatch<React.SetStateAction<boolean>>;\n}\n\nconst IconPickerContent = ({\n  onChange,\n  selectedIcon,\n  setOpen,\n}: IconPickerContentInternalProps) => {\n  const [searchTerm, setSearchTerm] = useState<string>(\"\");\n\n  // Filter both icons and flags\n  const filteredIcons = (mergedIconNames || []).filter((name) => {\n    if (name?.startsWith(\"flag-\")) {\n      // For flags, allow search by country code or country name\n      const code = name?.replace(\"flag-\", \"\");\n      return (\n        code\n          ?.toLowerCase()\n          ?.includes(searchTerm?.trim()?.toLowerCase() || \"\") ||\n        countryNameFromCode(code || \"\")\n          ?.toLowerCase()\n          ?.includes(searchTerm?.trim()?.toLowerCase() || \"\")\n      );\n    }\n    return name\n      ?.trim()\n      ?.toLowerCase()\n      ?.includes(searchTerm?.trim()?.toLowerCase() || \"\");\n  });\n\n  const handleClick = (icon: string, event: React.MouseEvent) => {\n    event.stopPropagation();\n    if (selectedIcon === icon) {\n      onChange?.(null);\n      return;\n    }\n    onChange?.(icon);\n    setOpen?.(false);\n  };\n\n  return (\n    <div \n      className=\"flex flex-col gap-3\"\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') {\n          e.preventDefault();\n          e.stopPropagation();\n        }\n      }}\n    >\n      <InputField\n        id={`input-field-icon-picker`}\n        placeholder=\"Search icons...\"\n        onChange={(value) => setSearchTerm(value || \"\")}\n        fieldSuffix={\n          <AllIcons.Search className=\"!w-4 !h-4 text-neutral-400\" />\n        }\n      />\n      <FixedSizeGrid\n        columnCount={5}\n        rowCount={Math.ceil((filteredIcons?.length || 0) / 5)}\n        columnWidth={40}\n        rowHeight={40}\n        width={220}\n        height={240}\n      >\n        {({ columnIndex, rowIndex, style }: GridChildComponentProps) => {\n          const itemIndex = rowIndex * 5 + columnIndex;\n          const iconName = filteredIcons?.[itemIndex];\n          return iconName ? (\n            <div style={style} className=\"p-1\">\n              <Tooltip title={formatIconName(iconName)} placement='bottom'>\n                <IconButton\n                type='button'\n                  className={classNames(\n                    \"flex items-center justify-center  !rounded-md hover:bg-neutral-200 dark:hover:bg-black-700\",\n                    {\n                      \"!bg-primary-50 dark:!bg-black-800\":\n                        selectedIcon === iconName,\n                    }\n                  )}\n                  onClick={(event) => handleClick(iconName, event)}\n                  onKeyDown={(e) => {\n                    if (e.key === 'Enter') {\n                      e.preventDefault();\n                      e.stopPropagation();\n                    }\n                  }}\n                >\n                  <IconRenderer\n                    iconName={iconName}\n                    className=\"!w-5 !h-5 text-neutral-900 dark:text-white\"\n                  />\n                </IconButton>\n              </Tooltip>\n            </div>\n          ) : null;\n        }}\n      </FixedSizeGrid>\n    </div>\n  );\n};\n\ninterface IconRendererProps {\n  iconName: string;\n  sx?: SvgIconOwnProps['sx'];\n  className?: string;\n  isHovering?: boolean;\n}\n\nexport const IconRenderer = ({ iconName, sx, className, isHovering }: IconRendererProps) => {\n  // Render flag if iconName starts with 'flag-'\n  if (iconName?.startsWith?.('flag-')) {\n    const code = iconName?.replace('flag-', '');\n    return getFlagComponent?.(code || '', isHovering || false) || <div>-</div>;\n  }\n  const Icon = AllIcons?.[iconName as keyof typeof AllIcons] as React.ComponentType<{\n    sx?: SvgIconOwnProps['sx'];\n    className?: string;\n    isHovering?: boolean;\n  }>;\n\n  if (!Icon) {\n    return <div>-</div>;\n  }\n\n  return <Icon sx={sx} className={className} isHovering={isHovering} />;\n};\n\nconst IconPickerBase = ({\n  selectedIcon,\n  onChange,\n  label,\n  required = false,\n  allowClear = true,\n  disabled = false,\n  errorMessage,\n  dropdownPosition = 'bottom',\n}: IconPickerContentProps) => {\n  const [open, setOpen] = useState(false);\n  const mouseClickRef = useRef(false);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const wasOpenRef = useRef(false);\n\n  useEffect(() => {\n    if (wasOpenRef.current && !open) {\n      buttonRef.current?.focus();\n    }\n    wasOpenRef.current = open;\n  }, [open]);\n  const handleClearIcon = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    onChange?.('');\n  };\n\n  return (\n    <Popover\n      arrow={false}\n      placement={dropdownPosition}\n      trigger='click'\n      getPopupContainer={(triggerNode) => triggerNode?.parentElement || document.body}\n      open={open}\n      onOpenChange={(newOpen) => {\n        if (newOpen) {\n          if (mouseClickRef.current) {\n            setOpen(true);\n          }\n          mouseClickRef.current = false;\n        } else {\n          setOpen(false);\n        }\n      }}\n      content={<IconPickerContent onChange={onChange} selectedIcon={selectedIcon} setOpen={setOpen} />}\n    >\n      <div className='flex flex-col gap-1'>\n        {label ? (\n          <InputLabel label={label || \"\"} required={required || false} />\n        ) : null}\n        <button\n          ref={buttonRef}\n          type='button'\n          id={`btn-icon-picker-icon-${selectedIcon ? 'selected' : 'unselected'}`}\n          className={`lax-form-trigger min-w-[83px] py-1.5 px-3 rounded-md border ${\n            disabled ? 'cursor-not-allowed opacity-60 bg-neutral-50 dark:bg-black-800' : 'bg-white dark:bg-black-800'\n          } ${errorMessage ? 'border-red-500' : 'focus:border-primary-600 dark:focus:border-primary-400'} flex items-center justify-between gap-2`}\n          disabled={disabled}\n          onClick={(e) => {\n            if (disabled) {\n              e.preventDefault();\n              e.stopPropagation();\n              return;\n            }\n            if (e.detail > 0) {\n              mouseClickRef.current = true;\n            }\n          }}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') {\n              e.preventDefault();\n              if (!open) {\n                const form = (e.currentTarget as HTMLElement).closest('form');\n                const submitBtn = form?.querySelector('button[type=\"submit\"]') as HTMLButtonElement | null;\n                submitBtn?.click();\n              }\n            }\n          }}\n        >\n          {selectedIcon ? (\n            <IconRenderer iconName={selectedIcon} className='!w-5 !h-5 text-neutral-900 dark:text-white' />\n          ) : (\n            <Typography\n              size='small'\n              variant='medium'\n              appearance='subtitle'\n            >\n              Select Icon\n            </Typography>\n          )}\n          {selectedIcon && allowClear && !disabled ? (\n            <AllIcons.CloseRounded\n              className='!w-5 !h-5 hover:bg-neutral-100 dark:hover:bg-black-800 rounded-full transition-colors cursor-pointer text-neutral-400 dark:text-neutral-500'\n              onClick={handleClearIcon}\n            />\n          ) : (\n           null\n          )}\n        </button>\n        {errorMessage && (\n          <Typography size='extra-small' className='text-red-500 font-medium'>\n            {errorMessage}\n          </Typography>\n        )}\n      </div>\n    </Popover>\n  );\n};\n\nexport const IconPicker = React.lazy(() =>\n  Promise.resolve({\n    default: (props: IconPickerContentProps) => (\n      <Suspense fallback={<div className='min-w-20 h-8 animate-pulse bg-neutral-100 dark:bg-black-800 rounded-md' />}>\n        <IconPickerBase {...props} />\n      </Suspense>\n    ),\n  }),\n);\n\n"],"names":["roundedIconNames","AllIcons","name","mergedIconNames","COUNTRY_CODES","code","formatIconName","iconName","countryNameFromCode","IconPickerContent","onChange","selectedIcon","setOpen","searchTerm","setSearchTerm","useState","filteredIcons","handleClick","icon","event","jsxs","e","jsx","InputField","value","FixedSizeGrid","columnIndex","rowIndex","style","itemIndex","Tooltip","IconButton","classNames","IconRenderer","sx","className","isHovering","getFlagComponent","Icon","IconPickerBase","label","required","allowClear","disabled","errorMessage","dropdownPosition","open","mouseClickRef","useRef","buttonRef","wasOpenRef","useEffect","handleClearIcon","Popover","triggerNode","newOpen","InputLabel","Typography","IconPicker","React","props","Suspense"],"mappings":"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"}
+{"version":3,"file":"IconPicker.cjs.js","sources":["../../../../src/components/forms/icon-picker/IconPicker.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport React, { Suspense, useEffect, useRef, useState } from 'react';\nimport { FixedSizeGrid, type GridChildComponentProps } from 'react-window';\nimport * as AllIcons from '@mui/icons-material';\nimport { IconButton, type SvgIconOwnProps } from '@mui/material';\nimport { Popover, Tooltip } from \"antd\";\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { InputField } from \"../input-field/InputField\";\nimport { COUNTRY_CODES, countryNameFromCode } from \"../../../types/icon-picker\";\nimport { getFlagComponent } from \"../../../utils/countryFlags\";\nimport { InputLabel } from '../shared/InputLabel';\n\nconst roundedIconNames = Object.keys(AllIcons).filter((name) =>\n  name?.endsWith(\"Rounded\")\n);\n\n// Merge icon names and country codes for the picker\nconst mergedIconNames = [\n  ...(roundedIconNames || []),\n  ...(COUNTRY_CODES || []).map((code) => `flag-${code}`),\n];\n\n// Utility function to convert camelCase to human-readable format\nconst formatIconName = (iconName: string): string => {\n  // Handle flag icons\n  if (iconName?.startsWith(\"flag-\")) {\n    const code = iconName?.replace(\"flag-\", \"\");\n    return countryNameFromCode(code || \"\") || code;\n  }\n\n  // Convert camelCase to space-separated words\n  // e.g., \"PersonRounded\" -> \"Person Rounded\"\n  return iconName.replaceAll(/([A-Z])/g, \" $1\").trim();\n};\n\n/** Ant Design `Popover` placement for the icon panel (bottom edge of the trigger). */\nexport type IconPickerDropdownPosition = 'bottom' | 'bottomLeft' | 'bottomRight';\n\nexport interface IconPickerContentProps {\n  selectedIcon: string | null;\n  onChange: (iconName: string | null) => void;\n  label?: string;\n  required?: boolean;\n  allowClear?: boolean;\n  disabled?: boolean;\n  errorMessage?: string;\n  /** Popover placement: `bottom` | `bottomLeft` | `bottomRight`. Default: `bottom`. */\n  dropdownPosition?: IconPickerDropdownPosition;\n}\n\ninterface IconPickerContentInternalProps {\n  onChange: (iconName: string | null) => void;\n  selectedIcon: string | null;\n  setOpen?: React.Dispatch<React.SetStateAction<boolean>>;\n}\n\nconst IconPickerContent = ({\n  onChange,\n  selectedIcon,\n  setOpen,\n}: IconPickerContentInternalProps) => {\n  const [searchTerm, setSearchTerm] = useState<string>(\"\");\n\n  // Filter both icons and flags\n  const filteredIcons = (mergedIconNames || []).filter((name) => {\n    if (name?.startsWith(\"flag-\")) {\n      // For flags, allow search by country code or country name\n      const code = name?.replace(\"flag-\", \"\");\n      return (\n        code\n          ?.toLowerCase()\n          ?.includes(searchTerm?.trim()?.toLowerCase() || \"\") ||\n        countryNameFromCode(code || \"\")\n          ?.toLowerCase()\n          ?.includes(searchTerm?.trim()?.toLowerCase() || \"\")\n      );\n    }\n    return name\n      ?.trim()\n      ?.toLowerCase()\n      ?.includes(searchTerm?.trim()?.toLowerCase() || \"\");\n  });\n\n  const handleClick = (icon: string, event: React.MouseEvent) => {\n    event.stopPropagation();\n    if (selectedIcon === icon) {\n      onChange?.(null);\n      return;\n    }\n    onChange?.(icon);\n    setOpen?.(false);\n  };\n\n  return (\n    <div \n      className=\"flex flex-col gap-3\"\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') {\n          e.preventDefault();\n          e.stopPropagation();\n        }\n      }}\n    >\n      <InputField\n        id={`input-field-icon-picker`}\n        placeholder=\"Search icons...\"\n        onChange={(value) => setSearchTerm(value || \"\")}\n        fieldSuffix={\n          <AllIcons.Search className=\"!w-4 !h-4 text-neutral-400\" />\n        }\n      />\n      <FixedSizeGrid\n        columnCount={5}\n        rowCount={Math.ceil((filteredIcons?.length || 0) / 5)}\n        columnWidth={40}\n        rowHeight={40}\n        width={220}\n        height={240}\n      >\n        {({ columnIndex, rowIndex, style }: GridChildComponentProps) => {\n          const itemIndex = rowIndex * 5 + columnIndex;\n          const iconName = filteredIcons?.[itemIndex];\n          return iconName ? (\n            <div style={style} className=\"p-1\">\n              <Tooltip title={formatIconName(iconName)} placement='bottom'>\n                <IconButton\n                type='button'\n                  className={classNames(\n                    \"flex items-center justify-center  !rounded-md hover:bg-neutral-200 dark:hover:bg-black-700\",\n                    {\n                      \"!bg-primary-50 dark:!bg-black-800\":\n                        selectedIcon === iconName,\n                    }\n                  )}\n                  onClick={(event) => handleClick(iconName, event)}\n                  onKeyDown={(e) => {\n                    if (e.key === 'Enter') {\n                      e.preventDefault();\n                      e.stopPropagation();\n                    }\n                  }}\n                >\n                  <IconRenderer\n                    iconName={iconName}\n                    className=\"!w-5 !h-5 text-neutral-900 dark:text-white\"\n                  />\n                </IconButton>\n              </Tooltip>\n            </div>\n          ) : null;\n        }}\n      </FixedSizeGrid>\n    </div>\n  );\n};\n\ninterface IconRendererProps {\n  iconName: string;\n  sx?: SvgIconOwnProps['sx'];\n  className?: string;\n  isHovering?: boolean;\n}\n\nexport const IconRenderer = ({ iconName, sx, className, isHovering }: IconRendererProps) => {\n  // Render flag if iconName starts with 'flag-'\n  if (iconName?.startsWith?.('flag-')) {\n    const code = iconName?.replace('flag-', '');\n    return getFlagComponent?.(code || '', isHovering || false) || <div>-</div>;\n  }\n  const Icon = AllIcons?.[iconName as keyof typeof AllIcons] as React.ComponentType<{\n    sx?: SvgIconOwnProps['sx'];\n    className?: string;\n    isHovering?: boolean;\n  }>;\n\n  if (!Icon) {\n    return <div>-</div>;\n  }\n\n  return <Icon sx={sx} className={className} isHovering={isHovering} />;\n};\n\nconst IconPickerBase = ({\n  selectedIcon,\n  onChange,\n  label,\n  required = false,\n  allowClear = true,\n  disabled = false,\n  errorMessage,\n  dropdownPosition = 'bottom',\n}: IconPickerContentProps) => {\n  const [open, setOpen] = useState(false);\n  const mouseClickRef = useRef(false);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const wasOpenRef = useRef(false);\n\n  useEffect(() => {\n    if (wasOpenRef.current && !open) {\n      buttonRef.current?.focus();\n    }\n    wasOpenRef.current = open;\n  }, [open]);\n  const handleClearIcon = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    onChange?.('');\n  };\n\n  return (\n    <Popover\n      arrow={false}\n      placement={dropdownPosition}\n      trigger='click'\n      getPopupContainer={(triggerNode) => triggerNode?.parentElement || document.body}\n      open={open}\n      onOpenChange={(newOpen) => {\n        if (newOpen) {\n          if (mouseClickRef.current) {\n            setOpen(true);\n          }\n          mouseClickRef.current = false;\n        } else {\n          setOpen(false);\n        }\n      }}\n      content={<IconPickerContent onChange={onChange} selectedIcon={selectedIcon} setOpen={setOpen} />}\n    >\n      <div className='flex flex-col gap-1'>\n        {label ? (\n          <InputLabel label={label || \"\"} required={required || false} />\n        ) : null}\n        <button\n          ref={buttonRef}\n          type='button'\n          id={`btn-icon-picker-icon-${selectedIcon ? 'selected' : 'unselected'}`}\n          className={`lax-form-trigger min-w-[83px] py-1.5 px-3 rounded-md border ${\n            disabled ? 'cursor-not-allowed opacity-60 bg-neutral-50 dark:bg-black-800' : 'bg-white dark:bg-black-800'\n          } ${errorMessage ? 'border-red-500' : 'focus:border-primary-600 dark:focus:border-primary-400'} flex items-center justify-between gap-2`}\n          disabled={disabled}\n          onClick={(e) => {\n            if (disabled) {\n              e.preventDefault();\n              e.stopPropagation();\n              return;\n            }\n            if (e.detail > 0) {\n              mouseClickRef.current = true;\n            }\n          }}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') {\n              e.preventDefault();\n              if (!open) {\n                const form = (e.currentTarget as HTMLElement).closest('form');\n                const submitBtn = form?.querySelector('button[type=\"submit\"]') as HTMLButtonElement | null;\n                submitBtn?.click();\n              }\n            }\n          }}\n        >\n          {selectedIcon ? (\n            <IconRenderer iconName={selectedIcon} className='!w-5 !h-5 text-neutral-900 dark:text-white' />\n          ) : (\n            <Typography\n              size='small'\n              variant='regular'\n              appearance='subtitle'\n            >\n              Select Icon\n            </Typography>\n          )}\n          {selectedIcon && allowClear && !disabled ? (\n            <AllIcons.CloseRounded\n              className='!w-5 !h-5 hover:bg-neutral-100 dark:hover:bg-black-800 rounded-full transition-colors cursor-pointer text-neutral-400 dark:text-neutral-500'\n              onClick={handleClearIcon}\n            />\n          ) : (\n           null\n          )}\n        </button>\n        {errorMessage && (\n          <Typography size='extra-small' className='text-red-500 font-medium'>\n            {errorMessage}\n          </Typography>\n        )}\n      </div>\n    </Popover>\n  );\n};\n\nexport const IconPicker = React.lazy(() =>\n  Promise.resolve({\n    default: (props: IconPickerContentProps) => (\n      <Suspense fallback={<div className='min-w-20 h-8 animate-pulse bg-neutral-100 dark:bg-black-800 rounded-md' />}>\n        <IconPickerBase {...props} />\n      </Suspense>\n    ),\n  }),\n);\n\n"],"names":["roundedIconNames","AllIcons","name","mergedIconNames","COUNTRY_CODES","code","formatIconName","iconName","countryNameFromCode","IconPickerContent","onChange","selectedIcon","setOpen","searchTerm","setSearchTerm","useState","filteredIcons","handleClick","icon","event","jsxs","e","jsx","InputField","value","FixedSizeGrid","columnIndex","rowIndex","style","itemIndex","Tooltip","IconButton","classNames","IconRenderer","sx","className","isHovering","getFlagComponent","Icon","IconPickerBase","label","required","allowClear","disabled","errorMessage","dropdownPosition","open","mouseClickRef","useRef","buttonRef","wasOpenRef","useEffect","handleClearIcon","Popover","triggerNode","newOpen","InputLabel","Typography","IconPicker","React","props","Suspense"],"mappings":"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"}

package/dist/components/forms/icon-picker/IconPicker.es.js

@@ -157,7 +157,7 @@ const W = Object.keys(h).filter(
                 k,
                 {
                   size: "small",
-                  variant: "medium",
+                  variant: "regular",
                   appearance: "subtitle",
                   children: "Select Icon"
                 }

package/dist/components/forms/icon-picker/IconPicker.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconPicker.es.js","sources":["../../../../src/components/forms/icon-picker/IconPicker.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport React, { Suspense, useEffect, useRef, useState } from 'react';\nimport { FixedSizeGrid, type GridChildComponentProps } from 'react-window';\nimport * as AllIcons from '@mui/icons-material';\nimport { IconButton, type SvgIconOwnProps } from '@mui/material';\nimport { Popover, Tooltip } from \"antd\";\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { InputField } from \"../input-field/InputField\";\nimport { COUNTRY_CODES, countryNameFromCode } from \"../../../types/icon-picker\";\nimport { getFlagComponent } from \"../../../utils/countryFlags\";\nimport { InputLabel } from '../shared/InputLabel';\n\nconst roundedIconNames = Object.keys(AllIcons).filter((name) =>\n  name?.endsWith(\"Rounded\")\n);\n\n// Merge icon names and country codes for the picker\nconst mergedIconNames = [\n  ...(roundedIconNames || []),\n  ...(COUNTRY_CODES || []).map((code) => `flag-${code}`),\n];\n\n// Utility function to convert camelCase to human-readable format\nconst formatIconName = (iconName: string): string => {\n  // Handle flag icons\n  if (iconName?.startsWith(\"flag-\")) {\n    const code = iconName?.replace(\"flag-\", \"\");\n    return countryNameFromCode(code || \"\") || code;\n  }\n\n  // Convert camelCase to space-separated words\n  // e.g., \"PersonRounded\" -> \"Person Rounded\"\n  return iconName.replaceAll(/([A-Z])/g, \" $1\").trim();\n};\n\n/** Ant Design `Popover` placement for the icon panel (bottom edge of the trigger). */\nexport type IconPickerDropdownPosition = 'bottom' | 'bottomLeft' | 'bottomRight';\n\nexport interface IconPickerContentProps {\n  selectedIcon: string | null;\n  onChange: (iconName: string | null) => void;\n  label?: string;\n  required?: boolean;\n  allowClear?: boolean;\n  disabled?: boolean;\n  errorMessage?: string;\n  /** Popover placement: `bottom` | `bottomLeft` | `bottomRight`. Default: `bottom`. */\n  dropdownPosition?: IconPickerDropdownPosition;\n}\n\ninterface IconPickerContentInternalProps {\n  onChange: (iconName: string | null) => void;\n  selectedIcon: string | null;\n  setOpen?: React.Dispatch<React.SetStateAction<boolean>>;\n}\n\nconst IconPickerContent = ({\n  onChange,\n  selectedIcon,\n  setOpen,\n}: IconPickerContentInternalProps) => {\n  const [searchTerm, setSearchTerm] = useState<string>(\"\");\n\n  // Filter both icons and flags\n  const filteredIcons = (mergedIconNames || []).filter((name) => {\n    if (name?.startsWith(\"flag-\")) {\n      // For flags, allow search by country code or country name\n      const code = name?.replace(\"flag-\", \"\");\n      return (\n        code\n          ?.toLowerCase()\n          ?.includes(searchTerm?.trim()?.toLowerCase() || \"\") ||\n        countryNameFromCode(code || \"\")\n          ?.toLowerCase()\n          ?.includes(searchTerm?.trim()?.toLowerCase() || \"\")\n      );\n    }\n    return name\n      ?.trim()\n      ?.toLowerCase()\n      ?.includes(searchTerm?.trim()?.toLowerCase() || \"\");\n  });\n\n  const handleClick = (icon: string, event: React.MouseEvent) => {\n    event.stopPropagation();\n    if (selectedIcon === icon) {\n      onChange?.(null);\n      return;\n    }\n    onChange?.(icon);\n    setOpen?.(false);\n  };\n\n  return (\n    <div \n      className=\"flex flex-col gap-3\"\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') {\n          e.preventDefault();\n          e.stopPropagation();\n        }\n      }}\n    >\n      <InputField\n        id={`input-field-icon-picker`}\n        placeholder=\"Search icons...\"\n        onChange={(value) => setSearchTerm(value || \"\")}\n        fieldSuffix={\n          <AllIcons.Search className=\"!w-4 !h-4 text-neutral-400\" />\n        }\n      />\n      <FixedSizeGrid\n        columnCount={5}\n        rowCount={Math.ceil((filteredIcons?.length || 0) / 5)}\n        columnWidth={40}\n        rowHeight={40}\n        width={220}\n        height={240}\n      >\n        {({ columnIndex, rowIndex, style }: GridChildComponentProps) => {\n          const itemIndex = rowIndex * 5 + columnIndex;\n          const iconName = filteredIcons?.[itemIndex];\n          return iconName ? (\n            <div style={style} className=\"p-1\">\n              <Tooltip title={formatIconName(iconName)} placement='bottom'>\n                <IconButton\n                type='button'\n                  className={classNames(\n                    \"flex items-center justify-center  !rounded-md hover:bg-neutral-200 dark:hover:bg-black-700\",\n                    {\n                      \"!bg-primary-50 dark:!bg-black-800\":\n                        selectedIcon === iconName,\n                    }\n                  )}\n                  onClick={(event) => handleClick(iconName, event)}\n                  onKeyDown={(e) => {\n                    if (e.key === 'Enter') {\n                      e.preventDefault();\n                      e.stopPropagation();\n                    }\n                  }}\n                >\n                  <IconRenderer\n                    iconName={iconName}\n                    className=\"!w-5 !h-5 text-neutral-900 dark:text-white\"\n                  />\n                </IconButton>\n              </Tooltip>\n            </div>\n          ) : null;\n        }}\n      </FixedSizeGrid>\n    </div>\n  );\n};\n\ninterface IconRendererProps {\n  iconName: string;\n  sx?: SvgIconOwnProps['sx'];\n  className?: string;\n  isHovering?: boolean;\n}\n\nexport const IconRenderer = ({ iconName, sx, className, isHovering }: IconRendererProps) => {\n  // Render flag if iconName starts with 'flag-'\n  if (iconName?.startsWith?.('flag-')) {\n    const code = iconName?.replace('flag-', '');\n    return getFlagComponent?.(code || '', isHovering || false) || <div>-</div>;\n  }\n  const Icon = AllIcons?.[iconName as keyof typeof AllIcons] as React.ComponentType<{\n    sx?: SvgIconOwnProps['sx'];\n    className?: string;\n    isHovering?: boolean;\n  }>;\n\n  if (!Icon) {\n    return <div>-</div>;\n  }\n\n  return <Icon sx={sx} className={className} isHovering={isHovering} />;\n};\n\nconst IconPickerBase = ({\n  selectedIcon,\n  onChange,\n  label,\n  required = false,\n  allowClear = true,\n  disabled = false,\n  errorMessage,\n  dropdownPosition = 'bottom',\n}: IconPickerContentProps) => {\n  const [open, setOpen] = useState(false);\n  const mouseClickRef = useRef(false);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const wasOpenRef = useRef(false);\n\n  useEffect(() => {\n    if (wasOpenRef.current && !open) {\n      buttonRef.current?.focus();\n    }\n    wasOpenRef.current = open;\n  }, [open]);\n  const handleClearIcon = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    onChange?.('');\n  };\n\n  return (\n    <Popover\n      arrow={false}\n      placement={dropdownPosition}\n      trigger='click'\n      getPopupContainer={(triggerNode) => triggerNode?.parentElement || document.body}\n      open={open}\n      onOpenChange={(newOpen) => {\n        if (newOpen) {\n          if (mouseClickRef.current) {\n            setOpen(true);\n          }\n          mouseClickRef.current = false;\n        } else {\n          setOpen(false);\n        }\n      }}\n      content={<IconPickerContent onChange={onChange} selectedIcon={selectedIcon} setOpen={setOpen} />}\n    >\n      <div className='flex flex-col gap-1'>\n        {label ? (\n          <InputLabel label={label || \"\"} required={required || false} />\n        ) : null}\n        <button\n          ref={buttonRef}\n          type='button'\n          id={`btn-icon-picker-icon-${selectedIcon ? 'selected' : 'unselected'}`}\n          className={`lax-form-trigger min-w-[83px] py-1.5 px-3 rounded-md border ${\n            disabled ? 'cursor-not-allowed opacity-60 bg-neutral-50 dark:bg-black-800' : 'bg-white dark:bg-black-800'\n          } ${errorMessage ? 'border-red-500' : 'focus:border-primary-600 dark:focus:border-primary-400'} flex items-center justify-between gap-2`}\n          disabled={disabled}\n          onClick={(e) => {\n            if (disabled) {\n              e.preventDefault();\n              e.stopPropagation();\n              return;\n            }\n            if (e.detail > 0) {\n              mouseClickRef.current = true;\n            }\n          }}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') {\n              e.preventDefault();\n              if (!open) {\n                const form = (e.currentTarget as HTMLElement).closest('form');\n                const submitBtn = form?.querySelector('button[type=\"submit\"]') as HTMLButtonElement | null;\n                submitBtn?.click();\n              }\n            }\n          }}\n        >\n          {selectedIcon ? (\n            <IconRenderer iconName={selectedIcon} className='!w-5 !h-5 text-neutral-900 dark:text-white' />\n          ) : (\n            <Typography\n              size='small'\n              variant='medium'\n              appearance='subtitle'\n            >\n              Select Icon\n            </Typography>\n          )}\n          {selectedIcon && allowClear && !disabled ? (\n            <AllIcons.CloseRounded\n              className='!w-5 !h-5 hover:bg-neutral-100 dark:hover:bg-black-800 rounded-full transition-colors cursor-pointer text-neutral-400 dark:text-neutral-500'\n              onClick={handleClearIcon}\n            />\n          ) : (\n           null\n          )}\n        </button>\n        {errorMessage && (\n          <Typography size='extra-small' className='text-red-500 font-medium'>\n            {errorMessage}\n          </Typography>\n        )}\n      </div>\n    </Popover>\n  );\n};\n\nexport const IconPicker = React.lazy(() =>\n  Promise.resolve({\n    default: (props: IconPickerContentProps) => (\n      <Suspense fallback={<div className='min-w-20 h-8 animate-pulse bg-neutral-100 dark:bg-black-800 rounded-md' />}>\n        <IconPickerBase {...props} />\n      </Suspense>\n    ),\n  }),\n);\n\n"],"names":["roundedIconNames","AllIcons","name","mergedIconNames","COUNTRY_CODES","code","formatIconName","iconName","countryNameFromCode","IconPickerContent","onChange","selectedIcon","setOpen","searchTerm","setSearchTerm","useState","filteredIcons","handleClick","icon","event","jsxs","e","jsx","InputField","value","FixedSizeGrid","columnIndex","rowIndex","style","itemIndex","Tooltip","IconButton","classNames","IconRenderer","sx","className","isHovering","getFlagComponent","Icon","IconPickerBase","label","required","allowClear","disabled","errorMessage","dropdownPosition","open","mouseClickRef","useRef","buttonRef","wasOpenRef","useEffect","handleClearIcon","Popover","triggerNode","newOpen","InputLabel","Typography","IconPicker","React","props","Suspense"],"mappings":"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"}
+{"version":3,"file":"IconPicker.es.js","sources":["../../../../src/components/forms/icon-picker/IconPicker.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport React, { Suspense, useEffect, useRef, useState } from 'react';\nimport { FixedSizeGrid, type GridChildComponentProps } from 'react-window';\nimport * as AllIcons from '@mui/icons-material';\nimport { IconButton, type SvgIconOwnProps } from '@mui/material';\nimport { Popover, Tooltip } from \"antd\";\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { InputField } from \"../input-field/InputField\";\nimport { COUNTRY_CODES, countryNameFromCode } from \"../../../types/icon-picker\";\nimport { getFlagComponent } from \"../../../utils/countryFlags\";\nimport { InputLabel } from '../shared/InputLabel';\n\nconst roundedIconNames = Object.keys(AllIcons).filter((name) =>\n  name?.endsWith(\"Rounded\")\n);\n\n// Merge icon names and country codes for the picker\nconst mergedIconNames = [\n  ...(roundedIconNames || []),\n  ...(COUNTRY_CODES || []).map((code) => `flag-${code}`),\n];\n\n// Utility function to convert camelCase to human-readable format\nconst formatIconName = (iconName: string): string => {\n  // Handle flag icons\n  if (iconName?.startsWith(\"flag-\")) {\n    const code = iconName?.replace(\"flag-\", \"\");\n    return countryNameFromCode(code || \"\") || code;\n  }\n\n  // Convert camelCase to space-separated words\n  // e.g., \"PersonRounded\" -> \"Person Rounded\"\n  return iconName.replaceAll(/([A-Z])/g, \" $1\").trim();\n};\n\n/** Ant Design `Popover` placement for the icon panel (bottom edge of the trigger). */\nexport type IconPickerDropdownPosition = 'bottom' | 'bottomLeft' | 'bottomRight';\n\nexport interface IconPickerContentProps {\n  selectedIcon: string | null;\n  onChange: (iconName: string | null) => void;\n  label?: string;\n  required?: boolean;\n  allowClear?: boolean;\n  disabled?: boolean;\n  errorMessage?: string;\n  /** Popover placement: `bottom` | `bottomLeft` | `bottomRight`. Default: `bottom`. */\n  dropdownPosition?: IconPickerDropdownPosition;\n}\n\ninterface IconPickerContentInternalProps {\n  onChange: (iconName: string | null) => void;\n  selectedIcon: string | null;\n  setOpen?: React.Dispatch<React.SetStateAction<boolean>>;\n}\n\nconst IconPickerContent = ({\n  onChange,\n  selectedIcon,\n  setOpen,\n}: IconPickerContentInternalProps) => {\n  const [searchTerm, setSearchTerm] = useState<string>(\"\");\n\n  // Filter both icons and flags\n  const filteredIcons = (mergedIconNames || []).filter((name) => {\n    if (name?.startsWith(\"flag-\")) {\n      // For flags, allow search by country code or country name\n      const code = name?.replace(\"flag-\", \"\");\n      return (\n        code\n          ?.toLowerCase()\n          ?.includes(searchTerm?.trim()?.toLowerCase() || \"\") ||\n        countryNameFromCode(code || \"\")\n          ?.toLowerCase()\n          ?.includes(searchTerm?.trim()?.toLowerCase() || \"\")\n      );\n    }\n    return name\n      ?.trim()\n      ?.toLowerCase()\n      ?.includes(searchTerm?.trim()?.toLowerCase() || \"\");\n  });\n\n  const handleClick = (icon: string, event: React.MouseEvent) => {\n    event.stopPropagation();\n    if (selectedIcon === icon) {\n      onChange?.(null);\n      return;\n    }\n    onChange?.(icon);\n    setOpen?.(false);\n  };\n\n  return (\n    <div \n      className=\"flex flex-col gap-3\"\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') {\n          e.preventDefault();\n          e.stopPropagation();\n        }\n      }}\n    >\n      <InputField\n        id={`input-field-icon-picker`}\n        placeholder=\"Search icons...\"\n        onChange={(value) => setSearchTerm(value || \"\")}\n        fieldSuffix={\n          <AllIcons.Search className=\"!w-4 !h-4 text-neutral-400\" />\n        }\n      />\n      <FixedSizeGrid\n        columnCount={5}\n        rowCount={Math.ceil((filteredIcons?.length || 0) / 5)}\n        columnWidth={40}\n        rowHeight={40}\n        width={220}\n        height={240}\n      >\n        {({ columnIndex, rowIndex, style }: GridChildComponentProps) => {\n          const itemIndex = rowIndex * 5 + columnIndex;\n          const iconName = filteredIcons?.[itemIndex];\n          return iconName ? (\n            <div style={style} className=\"p-1\">\n              <Tooltip title={formatIconName(iconName)} placement='bottom'>\n                <IconButton\n                type='button'\n                  className={classNames(\n                    \"flex items-center justify-center  !rounded-md hover:bg-neutral-200 dark:hover:bg-black-700\",\n                    {\n                      \"!bg-primary-50 dark:!bg-black-800\":\n                        selectedIcon === iconName,\n                    }\n                  )}\n                  onClick={(event) => handleClick(iconName, event)}\n                  onKeyDown={(e) => {\n                    if (e.key === 'Enter') {\n                      e.preventDefault();\n                      e.stopPropagation();\n                    }\n                  }}\n                >\n                  <IconRenderer\n                    iconName={iconName}\n                    className=\"!w-5 !h-5 text-neutral-900 dark:text-white\"\n                  />\n                </IconButton>\n              </Tooltip>\n            </div>\n          ) : null;\n        }}\n      </FixedSizeGrid>\n    </div>\n  );\n};\n\ninterface IconRendererProps {\n  iconName: string;\n  sx?: SvgIconOwnProps['sx'];\n  className?: string;\n  isHovering?: boolean;\n}\n\nexport const IconRenderer = ({ iconName, sx, className, isHovering }: IconRendererProps) => {\n  // Render flag if iconName starts with 'flag-'\n  if (iconName?.startsWith?.('flag-')) {\n    const code = iconName?.replace('flag-', '');\n    return getFlagComponent?.(code || '', isHovering || false) || <div>-</div>;\n  }\n  const Icon = AllIcons?.[iconName as keyof typeof AllIcons] as React.ComponentType<{\n    sx?: SvgIconOwnProps['sx'];\n    className?: string;\n    isHovering?: boolean;\n  }>;\n\n  if (!Icon) {\n    return <div>-</div>;\n  }\n\n  return <Icon sx={sx} className={className} isHovering={isHovering} />;\n};\n\nconst IconPickerBase = ({\n  selectedIcon,\n  onChange,\n  label,\n  required = false,\n  allowClear = true,\n  disabled = false,\n  errorMessage,\n  dropdownPosition = 'bottom',\n}: IconPickerContentProps) => {\n  const [open, setOpen] = useState(false);\n  const mouseClickRef = useRef(false);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const wasOpenRef = useRef(false);\n\n  useEffect(() => {\n    if (wasOpenRef.current && !open) {\n      buttonRef.current?.focus();\n    }\n    wasOpenRef.current = open;\n  }, [open]);\n  const handleClearIcon = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    onChange?.('');\n  };\n\n  return (\n    <Popover\n      arrow={false}\n      placement={dropdownPosition}\n      trigger='click'\n      getPopupContainer={(triggerNode) => triggerNode?.parentElement || document.body}\n      open={open}\n      onOpenChange={(newOpen) => {\n        if (newOpen) {\n          if (mouseClickRef.current) {\n            setOpen(true);\n          }\n          mouseClickRef.current = false;\n        } else {\n          setOpen(false);\n        }\n      }}\n      content={<IconPickerContent onChange={onChange} selectedIcon={selectedIcon} setOpen={setOpen} />}\n    >\n      <div className='flex flex-col gap-1'>\n        {label ? (\n          <InputLabel label={label || \"\"} required={required || false} />\n        ) : null}\n        <button\n          ref={buttonRef}\n          type='button'\n          id={`btn-icon-picker-icon-${selectedIcon ? 'selected' : 'unselected'}`}\n          className={`lax-form-trigger min-w-[83px] py-1.5 px-3 rounded-md border ${\n            disabled ? 'cursor-not-allowed opacity-60 bg-neutral-50 dark:bg-black-800' : 'bg-white dark:bg-black-800'\n          } ${errorMessage ? 'border-red-500' : 'focus:border-primary-600 dark:focus:border-primary-400'} flex items-center justify-between gap-2`}\n          disabled={disabled}\n          onClick={(e) => {\n            if (disabled) {\n              e.preventDefault();\n              e.stopPropagation();\n              return;\n            }\n            if (e.detail > 0) {\n              mouseClickRef.current = true;\n            }\n          }}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') {\n              e.preventDefault();\n              if (!open) {\n                const form = (e.currentTarget as HTMLElement).closest('form');\n                const submitBtn = form?.querySelector('button[type=\"submit\"]') as HTMLButtonElement | null;\n                submitBtn?.click();\n              }\n            }\n          }}\n        >\n          {selectedIcon ? (\n            <IconRenderer iconName={selectedIcon} className='!w-5 !h-5 text-neutral-900 dark:text-white' />\n          ) : (\n            <Typography\n              size='small'\n              variant='regular'\n              appearance='subtitle'\n            >\n              Select Icon\n            </Typography>\n          )}\n          {selectedIcon && allowClear && !disabled ? (\n            <AllIcons.CloseRounded\n              className='!w-5 !h-5 hover:bg-neutral-100 dark:hover:bg-black-800 rounded-full transition-colors cursor-pointer text-neutral-400 dark:text-neutral-500'\n              onClick={handleClearIcon}\n            />\n          ) : (\n           null\n          )}\n        </button>\n        {errorMessage && (\n          <Typography size='extra-small' className='text-red-500 font-medium'>\n            {errorMessage}\n          </Typography>\n        )}\n      </div>\n    </Popover>\n  );\n};\n\nexport const IconPicker = React.lazy(() =>\n  Promise.resolve({\n    default: (props: IconPickerContentProps) => (\n      <Suspense fallback={<div className='min-w-20 h-8 animate-pulse bg-neutral-100 dark:bg-black-800 rounded-md' />}>\n        <IconPickerBase {...props} />\n      </Suspense>\n    ),\n  }),\n);\n\n"],"names":["roundedIconNames","AllIcons","name","mergedIconNames","COUNTRY_CODES","code","formatIconName","iconName","countryNameFromCode","IconPickerContent","onChange","selectedIcon","setOpen","searchTerm","setSearchTerm","useState","filteredIcons","handleClick","icon","event","jsxs","e","jsx","InputField","value","FixedSizeGrid","columnIndex","rowIndex","style","itemIndex","Tooltip","IconButton","classNames","IconRenderer","sx","className","isHovering","getFlagComponent","Icon","IconPickerBase","label","required","allowClear","disabled","errorMessage","dropdownPosition","open","mouseClickRef","useRef","buttonRef","wasOpenRef","useEffect","handleClearIcon","Popover","triggerNode","newOpen","InputLabel","Typography","IconPicker","React","props","Suspense"],"mappings":";;;;;;;;;;;;AAYA,MAAMA,IAAmB,OAAO,KAAKC,CAAQ,EAAE;AAAA,EAAO,CAACC,MACrDA,GAAM,SAAS,SAAS;AAC1B,GAGMC,IAAkB;AAAA,EACtB,GAAIH,KAAoB,CAAA;AAAA,EACxB,IAAII,KAAiB,CAAA,GAAI,IAAI,CAACC,MAAS,QAAQA,CAAI,EAAE;AACvD,GAGMC,IAAiB,CAACC,MAA6B;AAEnD,MAAIA,GAAU,WAAW,OAAO,GAAG;AACjC,UAAMF,IAAOE,GAAU,QAAQ,SAAS,EAAE;AAC1C,WAAOC,EAAoBH,KAAQ,EAAE,KAAKA;AAAA,EAC5C;AAIA,SAAOE,EAAS,WAAW,YAAY,KAAK,EAAE,KAAA;AAChD,GAuBME,IAAoB,CAAC;AAAA,EACzB,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,SAAAC;AACF,MAAsC;AACpC,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAAiB,EAAE,GAGjDC,KAAiBb,KAAmB,CAAA,GAAI,OAAO,CAACD,MAAS;AAC7D,QAAIA,GAAM,WAAW,OAAO,GAAG;AAE7B,YAAMG,IAAOH,GAAM,QAAQ,SAAS,EAAE;AACtC,aACEG,GACI,eACA,SAASQ,GAAY,QAAQ,iBAAiB,EAAE,KACpDL,EAAoBH,KAAQ,EAAE,GAC1B,YAAA,GACA,SAASQ,GAAY,KAAA,GAAQ,YAAA,KAAiB,EAAE;AAAA,IAExD;AACA,WAAOX,GACH,QACA,eACA,SAASW,GAAY,KAAA,GAAQ,YAAA,KAAiB,EAAE;AAAA,EACtD,CAAC,GAEKI,IAAc,CAACC,GAAcC,MAA4B;AAE7D,QADAA,EAAM,gBAAA,GACFR,MAAiBO,GAAM;AACzB,MAAAR,IAAW,IAAI;AACf;AAAA,IACF;AACA,IAAAA,IAAWQ,CAAI,GACfN,IAAU,EAAK;AAAA,EACjB;AAEA,SACE,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,WAAW,CAACC,MAAM;AAChB,QAAIA,EAAE,QAAQ,YACZA,EAAE,eAAA,GACFA,EAAE,gBAAA;AAAA,MAEN;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ,aAAY;AAAA,YACZ,UAAU,CAACC,MAAUV,EAAcU,KAAS,EAAE;AAAA,YAC9C,aACE,gBAAAF,EAACrB,EAAS,QAAT,EAAgB,WAAU,6BAAA,CAA6B;AAAA,UAAA;AAAA,QAAA;AAAA,QAG5D,gBAAAqB;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,aAAa;AAAA,YACb,UAAU,KAAK,MAAMT,GAAe,UAAU,KAAK,CAAC;AAAA,YACpD,aAAa;AAAA,YACb,WAAW;AAAA,YACX,OAAO;AAAA,YACP,QAAQ;AAAA,YAEP,UAAA,CAAC,EAAE,aAAAU,GAAa,UAAAC,GAAU,OAAAC,QAAqC;AAC9D,oBAAMC,IAAYF,IAAW,IAAID,GAC3BnB,IAAWS,IAAgBa,CAAS;AAC1C,qBAAOtB,IACL,gBAAAe,EAAC,OAAA,EAAI,OAAAM,GAAc,WAAU,OAC3B,UAAA,gBAAAN,EAACQ,GAAA,EAAQ,OAAOxB,EAAeC,CAAQ,GAAG,WAAU,UAClD,UAAA,gBAAAe;AAAA,gBAACS;AAAA,gBAAA;AAAA,kBACD,MAAK;AAAA,kBACH,WAAWC;AAAAA,oBACT;AAAA,oBACA;AAAA,sBACE,qCACErB,MAAiBJ;AAAA,oBAAA;AAAA,kBACrB;AAAA,kBAEF,SAAS,CAACY,MAAUF,EAAYV,GAAUY,CAAK;AAAA,kBAC/C,WAAW,CAACE,MAAM;AAChB,oBAAIA,EAAE,QAAQ,YACZA,EAAE,eAAA,GACFA,EAAE,gBAAA;AAAA,kBAEN;AAAA,kBAEA,UAAA,gBAAAC;AAAA,oBAACW;AAAA,oBAAA;AAAA,sBACC,UAAA1B;AAAA,sBACA,WAAU;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBACZ;AAAA,cAAA,EACF,CACF,GACF,IACE;AAAA,YACN;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN,GASa0B,IAAe,CAAC,EAAE,UAAA1B,GAAU,IAAA2B,GAAI,WAAAC,GAAW,YAAAC,QAAoC;AAE1F,MAAI7B,GAAU,aAAa,OAAO,GAAG;AACnC,UAAMF,IAAOE,GAAU,QAAQ,SAAS,EAAE;AAC1C,WAAO8B,IAAmBhC,KAAQ,IAAI+B,KAAc,EAAK,KAAK,gBAAAd,EAAC,SAAI,UAAA,IAAA,CAAC;AAAA,EACtE;AACA,QAAMgB,IAAOrC,IAAWM,CAAiC;AAMzD,SAAK+B,IAIE,gBAAAhB,EAACgB,GAAA,EAAK,IAAAJ,GAAQ,WAAAC,GAAsB,YAAAC,EAAA,CAAwB,IAH1D,gBAAAd,EAAC,SAAI,UAAA,IAAA,CAAC;AAIjB,GAEMiB,IAAiB,CAAC;AAAA,EACtB,cAAA5B;AAAA,EACA,UAAAD;AAAA,EACA,OAAA8B;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,YAAAC,IAAa;AAAA,EACb,UAAAC,IAAW;AAAA,EACX,cAAAC;AAAA,EACA,kBAAAC,IAAmB;AACrB,MAA8B;AAC5B,QAAM,CAACC,GAAMlC,CAAO,IAAIG,EAAS,EAAK,GAChCgC,IAAgBC,EAAO,EAAK,GAC5BC,IAAYD,EAA0B,IAAI,GAC1CE,IAAaF,EAAO,EAAK;AAE/B,EAAAG,EAAU,MAAM;AACd,IAAID,EAAW,WAAW,CAACJ,KACzBG,EAAU,SAAS,MAAA,GAErBC,EAAW,UAAUJ;AAAA,EACvB,GAAG,CAACA,CAAI,CAAC;AACT,QAAMM,IAAkB,CAAC/B,MAAwB;AAC/C,IAAAA,EAAE,gBAAA,GACFX,IAAW,EAAE;AAAA,EACf;AAEA,SACE,gBAAAY;AAAA,IAAC+B;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP,WAAWR;AAAA,MACX,SAAQ;AAAA,MACR,mBAAmB,CAACS,MAAgBA,GAAa,iBAAiB,SAAS;AAAA,MAC3E,MAAAR;AAAA,MACA,cAAc,CAACS,MAAY;AACzB,QAAIA,KACER,EAAc,WAChBnC,EAAQ,EAAI,GAEdmC,EAAc,UAAU,MAExBnC,EAAQ,EAAK;AAAA,MAEjB;AAAA,MACA,SAAS,gBAAAU,EAACb,GAAA,EAAkB,UAAAC,GAAoB,cAAAC,GAA4B,SAAAC,GAAkB;AAAA,MAE9F,UAAA,gBAAAQ,EAAC,OAAA,EAAI,WAAU,uBACZ,UAAA;AAAA,QAAAoB,IACC,gBAAAlB,EAACkC,KAAW,OAAOhB,KAAS,IAAI,UAAUC,KAAY,IAAO,IAC3D;AAAA,QACJ,gBAAArB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAK6B;AAAA,YACL,MAAK;AAAA,YACL,IAAI,wBAAwBtC,IAAe,aAAa,YAAY;AAAA,YACpE,WAAW,+DACTgC,IAAW,kEAAkE,4BAC/E,IAAIC,IAAe,mBAAmB,wDAAwD;AAAA,YAC9F,UAAAD;AAAA,YACA,SAAS,CAACtB,MAAM;AACd,kBAAIsB,GAAU;AACZ,gBAAAtB,EAAE,eAAA,GACFA,EAAE,gBAAA;AACF;AAAA,cACF;AACA,cAAIA,EAAE,SAAS,MACb0B,EAAc,UAAU;AAAA,YAE5B;AAAA,YACA,WAAW,CAAC1B,MAAM;AAChB,cAAIA,EAAE,QAAQ,YACZA,EAAE,eAAA,GACGyB,KACWzB,EAAE,cAA8B,QAAQ,MAAM,GACpC,cAAc,uBAAuB,GAClD,MAAA;AAAA,YAGjB;AAAA,YAEC,UAAA;AAAA,cAAAV,sBACEsB,GAAA,EAAa,UAAUtB,GAAc,WAAU,8CAA6C,IAE7F,gBAAAW;AAAA,gBAACmC;AAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBACL,SAAQ;AAAA,kBACR,YAAW;AAAA,kBACZ,UAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,cAIF9C,KAAgB+B,KAAc,CAACC,IAC9B,gBAAArB;AAAA,gBAACrB,EAAS;AAAA,gBAAT;AAAA,kBACC,WAAU;AAAA,kBACV,SAASmD;AAAA,gBAAA;AAAA,cAAA,IAGZ;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGFR,KACC,gBAAAtB,EAACmC,GAAA,EAAW,MAAK,eAAc,WAAU,4BACtC,UAAAb,EAAA,CACH;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN,GAEac,IAAaC,EAAM;AAAA,EAAK,MACnC,QAAQ,QAAQ;AAAA,IACd,SAAS,CAACC,MACR,gBAAAtC,EAACuC,KAAS,UAAU,gBAAAvC,EAAC,OAAA,EAAI,WAAU,0EAAyE,GAC1G,UAAA,gBAAAA,EAACiB,GAAA,EAAgB,GAAGqB,GAAO,EAAA,CAC7B;AAAA,EAAA,CAEH;AACH;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lax-wp/design-system",
   "private": false,
-  "version": "0.13.37-beta.0",
+  "version": "0.13.38",
   "type": "module",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",