@lax-wp/design-system 0.13.44 → 0.13.45

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),E=require("../../../_virtual/index.cjs.js"),M=require("react-select/creatable"),g=require("@mui/icons-material"),P=require("antd"),V=require("../../data-display/typography/Typography.cjs.js"),T=require("../../icons/HelpIcon.cjs.js"),O=require("../../data-display/label/Label.cjs.js"),$=require("react"),A=require("../shared/InputLabel.cjs.js"),B=require("../../../hooks/useIsDarkMode.cjs.js"),v=({id:l,label:i,errorMessage:n,selectOptions:h,loading:y,isClearable:C,multiSelect:t,selectedValues:c,disabled:d,required:s,value:p,className:S,tooltip:x,tags:j,originalCase:w=!1,onChange:b,filterOption:D,placeholder:k,...I})=>{const r=B.useIsDarkMode(),[L,u]=$.useState(!1),f=(e,o)=>{b&&b(e);const m=document.getElementById(l);if(m){const H=new CustomEvent("pilot-change",{bubbles:!0,detail:{selector:`#${l}`,value:e,type:"change"}});m.dispatchEvent(H)}},F={control:(e,o)=>({...e,borderColor:n&&s?r?"#F04438":"#fda49b":o.isFocused?"var(--color-primary-600)":r?"#434343":"#d9d9d9",backgroundColor:r?"#141414":o.isDisabled?"#f5f5f5":"#fff",borderRadius:"6px",padding:"0 4px 0 12px",opacity:o.isDisabled?.6:1,cursor:o.isDisabled?"not-allowed":"pointer",boxShadow:o.isFocused?r?"0 0 0 1.5px var(--color-primary-950)":"0 0 0 1.5px var(--color-primary-100)":"none","&:hover":{borderColor:n&&s?r?"#F04438":"#fda49b":"var(--color-primary-600)"}}),valueContainer:e=>({...e,fontSize:"14px",padding:0}),input:e=>({...e,margin:"0",padding:"0",color:r?"rgba(255,255,255,0.85)":"inherit"}),indicatorsContainer:e=>({...e,padding:0}),option:(e,o)=>({...e,fontSize:"14px",lineHeight:"22px",padding:"5px 12px",margin:0,backgroundColor:o.isSelected?r?"var(--color-primary-975)":"var(--color-primary-50)":o.isFocused?r?"var(--color-primary-950)":"var(--color-primary-100)":r?"#141414":"#fff",color:o.isDisabled?r?"rgba(255,255,255,0.25)":"#a3a3a3":r?o.isSelected?"var(--color-primary-600)":"rgba(255,255,255,0.85)":"rgba(0,0,0,0.88)",cursor:o.isDisabled?"not-allowed":"pointer",opacity:o.isDisabled?.6:1,"&:hover":{backgroundColor:o.isDisabled?r?"#141414":"#fff":r?"var(--color-primary-950)":"var(--color-primary-100)"},"&:active":{backgroundColor:r?"var(--color-primary-950)":"var(--color-primary-50)"}}),singleValue:(e,o)=>({...e,fontSize:"14px",lineHeight:"20px",color:o.isDisabled?r?"rgba(255,255,255,0.25)":"#a3a3a3":r?"rgba(255,255,255,0.85)":"rgba(0,0,0,0.88)"}),placeholder:e=>({...e,fontSize:"14px",whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden",color:r?"rgba(255,255,255,0.25)":"#bfbfbf"}),multiValue:e=>({...e,backgroundColor:r?"rgba(255,255,255,0.08)":"#f0f5ff",border:r?"1px solid transparent":"1px solid #adc6ff",borderRadius:"4px"}),multiValueLabel:e=>({...e,color:r?"rgba(255,255,255,0.85)":"var(--color-primary-600)",fontSize:"12px"}),multiValueRemove:e=>({...e,color:r?"rgba(255,255,255,0.85)":"var(--color-primary-600)","&:hover":{backgroundColor:r?"rgba(255,255,255,0.16)":"#e6f4ff",color:r?"#fff":"var(--color-primary-600)"}}),menu:e=>({...e,zIndex:5001,borderRadius:"8px",boxShadow:r?"0 6px 16px 0 rgba(0,0,0,0.45)":"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)",backgroundColor:r?"#141414":"#fff",border:r?"1px solid #303030":"none",overflow:"hidden"}),menuList:e=>({...e,padding:"0",maxHeight:"256px"})},z=!!c?.length,N=L&&!d&&(C?z||!!p:!1),q=e=>{e.stopPropagation(),e.preventDefault(),f(t?[]:null)},R=()=>a.jsx("div",{className:"flex items-center",children:N?a.jsx(g.CancelRounded,{onClick:q,sx:{fontSize:"16px",cursor:"pointer",color:r?"rgba(255,255,255,0.45)":"rgba(0,0,0,0.25)","&:hover":{color:r?"rgba(255,255,255,0.65)":"rgba(0,0,0,0.45)"}}}):a.jsx(g.ChevronLeftRounded,{className:"-rotate-90",sx:{fontSize:"18px",color:r?"rgba(255,255,255,0.25)":"rgba(0,0,0,0.25)"}})});return a.jsxs("div",{id:l,className:E("w-full flex flex-col gap-1",S),onMouseDown:e=>e.stopPropagation(),role:"group","aria-labelledby":i?l+"Label":void 0,children:[i&&a.jsxs("label",{id:l+"Label",htmlFor:"text",className:`text-xs font-medium text-gray-600 dark:text-black-300 inline-flex items-center gap-1 ${w?"":"capitalize"}`,children:[a.jsx(A.InputLabel,{label:i||"",required:s||!1}),a.jsx(O.Label,{labels:j}),x&&a.jsx(P.Tooltip,{placement:"top",title:x,children:a.jsx("div",{className:"cursor-pointer",children:a.jsx(T.HelpIcon,{className:"w-icon-sm h-icon-sm"})})})]}),a.jsx("div",{onMouseEnter:()=>u(!0),onMouseLeave:()=>u(!1),children:a.jsx(M,{...I,id:"cm"+i,classNamePrefix:"lax-select",required:s,options:h,isClearable:!1,isLoading:y,isDisabled:d,styles:F,isMulti:t,value:t?c:p,onChange:f,filterOption:D,placeholder:k,classNames:{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:R,IndicatorSeparator:()=>null}})}),n&&a.jsx(V.Typography,{className:"text-error-500",appearance:"custom",size:"extra-small",variant:"medium",children:n})]})};v.displayName="CreatableSelectField";exports.CreatableSelectField=v;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),V=require("../../../_virtual/index.cjs.js"),E=require("react-select/creatable"),g=require("@mui/icons-material"),M=require("antd"),P=require("../../data-display/typography/Typography.cjs.js"),T=require("../../icons/HelpIcon.cjs.js"),O=require("../../data-display/label/Label.cjs.js"),$=require("react"),A=require("../shared/InputLabel.cjs.js"),B=require("../../../hooks/useIsDarkMode.cjs.js"),h=({id:l,label:i,errorMessage:n,selectOptions:v,loading:y,isClearable:C,multiSelect:s,selectedValues:c,disabled:d,required:t,value:p,className:S,tooltip:x,tags:j,originalCase:w=!1,onChange:b,filterOption:D,placeholder:k,...I})=>{const r=B.useIsDarkMode(),[L,u]=$.useState(!1),m=(e,o)=>{b&&b(e);const f=document.getElementById(l);if(f){const H=new CustomEvent("pilot-change",{bubbles:!0,detail:{selector:`#${l}`,value:e,type:"change"}});f.dispatchEvent(H)}},F={control:(e,o)=>({...e,borderColor:n&&t?r?"#F04438":"#fda49b":o.isFocused?"var(--color-primary-600)":r?"#434343":"#d9d9d9",backgroundColor:r?"#141414":o.isDisabled?"#f5f5f5":"#fff",borderRadius:"6px",padding:"0 4px 0 12px",opacity:o.isDisabled?.6:1,cursor:o.isDisabled?"not-allowed":"pointer",boxShadow:o.isFocused?r?"0 0 0 1.5px var(--color-primary-950)":"0 0 0 1.5px var(--color-primary-100)":"none","&:hover":{borderColor:n&&t?r?"#F04438":"#fda49b":"var(--color-primary-600)"}}),valueContainer:e=>({...e,fontSize:"14px",padding:0}),input:e=>({...e,margin:"0",padding:"0",color:r?"rgba(255,255,255,0.85)":"inherit"}),indicatorsContainer:e=>({...e,padding:0}),option:(e,o)=>({...e,fontSize:"14px",lineHeight:"22px",padding:"5px 12px",margin:0,backgroundColor:o.isSelected?r?"var(--color-primary-975)":"var(--color-primary-50)":o.isFocused?r?"var(--color-primary-950)":"var(--color-primary-100)":r?"#141414":"#fff",color:o.isDisabled?r?"rgba(255,255,255,0.25)":"#a3a3a3":r?o.isSelected?"var(--color-primary-600)":"rgba(255,255,255,0.85)":"rgba(0,0,0,0.88)",cursor:o.isDisabled?"not-allowed":"pointer",opacity:o.isDisabled?.6:1,"&:hover":{backgroundColor:o.isDisabled?r?"#141414":"#fff":r?"var(--color-primary-950)":"var(--color-primary-100)"},"&:active":{backgroundColor:r?"var(--color-primary-950)":"var(--color-primary-50)"}}),singleValue:(e,o)=>({...e,fontSize:"14px",lineHeight:"20px",color:o.isDisabled?r?"rgba(255,255,255,0.25)":"#a3a3a3":r?"rgba(255,255,255,0.85)":"rgba(0,0,0,0.88)"}),placeholder:e=>({...e,fontSize:"14px",whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden",color:r?"rgba(255,255,255,0.25)":"#bfbfbf"}),multiValue:e=>({...e,backgroundColor:r?"rgba(255,255,255,0.08)":"#f0f5ff",border:r?"1px solid transparent":"1px solid #adc6ff",borderRadius:"4px"}),multiValueLabel:e=>({...e,color:r?"rgba(255,255,255,0.85)":"var(--color-primary-600)",fontSize:"12px"}),multiValueRemove:e=>({...e,color:r?"rgba(255,255,255,0.85)":"var(--color-primary-600)","&:hover":{backgroundColor:r?"rgba(255,255,255,0.16)":"#e6f4ff",color:r?"#fff":"var(--color-primary-600)"}}),menu:e=>({...e,zIndex:5001,borderRadius:"8px",boxShadow:r?"0 6px 16px 0 rgba(0,0,0,0.45)":"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)",backgroundColor:r?"#141414":"#fff",border:r?"1px solid #303030":"none",overflow:"hidden"}),menuList:e=>({...e,padding:"0",maxHeight:"256px"})},z=!!c?.length,N=L&&!d&&(C?z||!!p:!1),q=e=>{e.stopPropagation(),e.preventDefault(),m(s?[]:null)},R=()=>a.jsx("div",{className:"flex items-center",children:N?a.jsx(g.CancelRounded,{onClick:q,sx:{fontSize:"16px",cursor:"pointer",color:r?"rgba(255,255,255,0.45)":"rgba(0,0,0,0.25)","&:hover":{color:r?"rgba(255,255,255,0.65)":"rgba(0,0,0,0.45)"}}}):a.jsx(g.ChevronLeftRounded,{className:"-rotate-90",sx:{fontSize:"18px",color:r?"rgba(255,255,255,0.25)":"rgba(0,0,0,0.25)"}})});return a.jsxs("div",{id:l,className:V("w-full flex flex-col gap-1",S),onMouseDown:e=>e.stopPropagation(),role:"group","aria-labelledby":i?l+"Label":void 0,children:[i&&a.jsxs("label",{id:l+"Label",htmlFor:"text",className:`text-xs font-medium text-gray-600 dark:text-black-300 inline-flex items-center gap-1 ${w?"":"capitalize"}`,children:[a.jsx(A.InputLabel,{label:i||"",required:t||!1}),a.jsx(O.Label,{labels:j}),x&&a.jsx(M.Tooltip,{placement:"top",title:x,children:a.jsx("div",{className:"cursor-pointer",children:a.jsx(T.HelpIcon,{className:"w-icon-sm h-icon-sm"})})})]}),a.jsx("div",{onMouseEnter:()=>u(!0),onMouseLeave:()=>u(!1),children:a.jsx(E,{...I,id:"cm"+i,classNamePrefix:"lax-select",required:t,options:v,isClearable:!1,isLoading:y,isDisabled:d,styles:F,isMulti:s,value:s?c:p,onChange:m,filterOption:D,placeholder:k,classNames:{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"',singleValue:()=>"!text-inherit",multiValue:()=>"!text-inherit"},components:{DropdownIndicator:R,IndicatorSeparator:()=>null}})}),n&&a.jsx(P.Typography,{className:"text-error-500",appearance:"custom",size:"extra-small",variant:"medium",children:n})]})};h.displayName="CreatableSelectField";exports.CreatableSelectField=h;
 //# sourceMappingURL=CreatableSelect.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CreatableSelect.cjs.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","DropdownIndicator","jsx","CancelRounded","ChevronLeftRounded","jsxs","cn","InputLabel","Label","Tooltip","HelpIcon","CreatableSelect","Typography"],"mappings":"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"}
+{"version":3,"file":"CreatableSelect.cjs.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            singleValue: () => '!text-inherit',\n            multiValue: () => '!text-inherit',\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","DropdownIndicator","jsx","CancelRounded","ChevronLeftRounded","jsxs","cn","InputLabel","Label","Tooltip","HelpIcon","CreatableSelect","Typography"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import { jsxs as g, jsx as a } from "react/jsx-runtime";
-import V from "../../../_virtual/index.es.js";
+import R from "../../../_virtual/index.es.js";
 import M from "react-select/creatable";
 import { CancelRounded as P, ChevronLeftRounded as j } from "@mui/icons-material";
 import { Tooltip as T } from "antd";
@@ -12,14 +12,14 @@ import { useIsDarkMode as G } from "../../../hooks/useIsDarkMode.es.js";
 const J = ({
   id: l,
   label: i,
-  errorMessage: n,
-  selectOptions: v,
-  loading: h,
+  errorMessage: t,
+  selectOptions: h,
+  loading: v,
   isClearable: y,
   multiSelect: s,
   selectedValues: c,
   disabled: p,
-  required: t,
+  required: n,
   value: d,
   className: C,
   tooltip: m,
@@ -34,7 +34,7 @@ const J = ({
     f && f(o);
     const u = document.getElementById(l);
     if (u) {
-      const R = new CustomEvent("pilot-change", {
+      const H = new CustomEvent("pilot-change", {
         bubbles: !0,
         detail: {
           selector: `#${l}`,
@@ -42,12 +42,12 @@ const J = ({
           type: "change"
         }
       });
-      u.dispatchEvent(R);
+      u.dispatchEvent(H);
     }
   }, L = {
     control: (o, e) => ({
       ...o,
-      borderColor: n && t ? r ? "#F04438" : "#fda49b" : e.isFocused ? "var(--color-primary-600)" : r ? "#434343" : "#d9d9d9",
+      borderColor: t && n ? r ? "#F04438" : "#fda49b" : e.isFocused ? "var(--color-primary-600)" : r ? "#434343" : "#d9d9d9",
       backgroundColor: r ? "#141414" : e.isDisabled ? "#f5f5f5" : "#fff",
       borderRadius: "6px",
       padding: "0 4px 0 12px",
@@ -55,7 +55,7 @@ const J = ({
       cursor: e.isDisabled ? "not-allowed" : "pointer",
       boxShadow: e.isFocused ? r ? "0 0 0 1.5px var(--color-primary-950)" : "0 0 0 1.5px var(--color-primary-100)" : "none",
       "&:hover": {
-        borderColor: n && t ? r ? "#F04438" : "#fda49b" : "var(--color-primary-600)"
+        borderColor: t && n ? r ? "#F04438" : "#fda49b" : "var(--color-primary-600)"
       }
     }),
     valueContainer: (o) => ({
@@ -137,12 +137,12 @@ const J = ({
       padding: "0",
       maxHeight: "256px"
     })
-  }, N = !!c?.length, I = F && !p && (y ? N || !!d : !1), E = (o) => {
+  }, N = !!c?.length, I = F && !p && (y ? N || !!d : !1), V = (o) => {
     o.stopPropagation(), o.preventDefault(), x(s ? [] : null);
-  }, H = () => /* @__PURE__ */ a("div", { className: "flex items-center", children: I ? /* @__PURE__ */ a(
+  }, E = () => /* @__PURE__ */ a("div", { className: "flex items-center", children: I ? /* @__PURE__ */ a(
     P,
     {
-      onClick: E,
+      onClick: V,
       sx: {
         fontSize: "16px",
         cursor: "pointer",
@@ -166,7 +166,7 @@ const J = ({
     "div",
     {
       id: l,
-      className: V("w-full flex flex-col gap-1", C),
+      className: R("w-full flex flex-col gap-1", C),
       onMouseDown: (o) => o.stopPropagation(),
       role: "group",
       "aria-labelledby": i ? l + "Label" : void 0,
@@ -178,7 +178,7 @@ const J = ({
             htmlFor: "text",
             className: `text-xs font-medium text-gray-600 dark:text-black-300 inline-flex items-center gap-1 ${w ? "" : "capitalize"}`,
             children: [
-              /* @__PURE__ */ a(A, { label: i || "", required: t || !1 }),
+              /* @__PURE__ */ a(A, { label: i || "", required: n || !1 }),
               /* @__PURE__ */ a(O, { labels: S }),
               m && /* @__PURE__ */ a(T, { placement: "top", title: m, children: /* @__PURE__ */ a("div", { className: "cursor-pointer", children: /* @__PURE__ */ a(B, { className: "w-icon-sm h-icon-sm" }) }) })
             ]
@@ -195,10 +195,10 @@ const J = ({
                 ...z,
                 id: "cm" + i,
                 classNamePrefix: "lax-select",
-                required: t,
-                options: v,
+                required: n,
+                options: h,
                 isClearable: !1,
-                isLoading: h,
+                isLoading: v,
                 isDisabled: p,
                 styles: L,
                 isMulti: s,
@@ -211,24 +211,26 @@ const J = ({
                   option: () => "!text-sm",
                   control: () => "!min-h-8 !text-sm",
                   valueContainer: () => "!text-sm",
-                  placeholder: () => '!text-sm text-neutral-400 dark:text-neutral-400"'
+                  placeholder: () => '!text-sm text-neutral-400 dark:text-neutral-400"',
+                  singleValue: () => "!text-inherit",
+                  multiValue: () => "!text-inherit"
                 },
                 components: {
-                  DropdownIndicator: H,
+                  DropdownIndicator: E,
                   IndicatorSeparator: () => null
                 }
               }
             )
           }
         ),
-        n && /* @__PURE__ */ a(
+        t && /* @__PURE__ */ a(
           $,
           {
             className: "text-error-500",
             appearance: "custom",
             size: "extra-small",
             variant: "medium",
-            children: n
+            children: t
           }
         )
       ]

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 !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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"}
+{"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            singleValue: () => '!text-inherit',\n            multiValue: () => '!text-inherit',\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/package.json

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