@lax-wp/design-system 0.13.44 → 0.13.46

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":";;;;;;;;;;;AA8FO,MAAMA,IAAuB,CAAC;AAAA,EACnC,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,eAAAC;AAAA,EACA,SAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,GAAGC;AACL,MAAuD;AACrD,QAAMC,IAAaC,EAAA,GACb,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAE1CC,IAAe,CAACC,GAAeC,MAAsB;AAEzD,IAAIX,KACFA,EAASU,CAAQ;AAInB,UAAME,IAAmB,SAAS,eAAe3B,CAAE;AACnD,QAAI2B,GAAkB;AACpB,YAAMC,IAAmB,IAAI,YAAY,gBAAgB;AAAA,QACvD,SAAS;AAAA,QACT,QAAQ;AAAA,UACN,UAAU,IAAI5B,CAAE;AAAA,UAChB,OAAOyB;AAAA,UACP,MAAM;AAAA,QAAA;AAAA,MACR,CACD;AACD,MAAAE,EAAiB,cAAcC,CAAgB;AAAA,IACjD;AAAA,EACF,GAEMC,IAAa;AAAA,IACjB,SAAS,CAACC,GAAiBC,OAAgB;AAAA,MACzC,GAAGD;AAAA,MACH,aACE5B,KAAgBO,IACZU,IAAa,YAAY,YACzBY,EAAM,YACJ,6BACAZ,IAAa,YAAY;AAAA,MACjC,iBAAiBA,IACb,YACAY,EAAM,aAAa,YAAY;AAAA,MACnC,cAAc;AAAA,MACd,SAAS;AAAA,MACT,SAASA,EAAM,aAAa,MAAM;AAAA,MAClC,QAAQA,EAAM,aAAa,gBAAgB;AAAA,MAC3C,WAAWA,EAAM,YACbZ,IACE,yCACA,yCACF;AAAA,MACJ,WAAW;AAAA,QACT,aACEjB,KAAgBO,IACZU,IAAa,YAAY,YACzB;AAAA,MAAA;AAAA,IACR;AAAA,IAEF,gBAAgB,CAACW,OAAqB;AAAA,MACpC,GAAGA;AAAA,MACH,UAAU;AAAA,MACV,SAAS;AAAA,IAAA;AAAA,IAEX,OAAO,CAACA,OAAqB;AAAA,MAC3B,GAAGA;AAAA,MACH,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,OAAOX,IAAa,2BAA2B;AAAA,IAAA;AAAA,IAEjD,qBAAqB,CAACW,OAAqB;AAAA,MACzC,GAAGA;AAAA,MACH,SAAS;AAAA,IAAA;AAAA,IAEX,QAAQ,CAACA,GAAiBC,OAAgB;AAAA,MACxC,GAAGD;AAAA,MACH,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,iBAAiBC,EAAM,aACnBZ,IAAa,6BAA6B,4BAC1CY,EAAM,YACJZ,IAAa,6BAA6B,6BAC5CA,IAAa,YAAY;AAAA,MAC7B,OAAOY,EAAM,aACTZ,IAAa,2BAA2B,YACxCA,IACEY,EAAM,aACJ,6BACA,2BACF;AAAA,MACN,QAAQA,EAAM,aAAa,gBAAgB;AAAA,MAC3C,SAASA,EAAM,aAAa,MAAM;AAAA,MAClC,WAAW;AAAA,QACT,iBAAiBA,EAAM,aACnBZ,IAAa,YAAY,SACzBA,IAAa,6BAA6B;AAAA,MAAA;AAAA,MAEhD,YAAY;AAAA,QACV,iBAAiBA,IAAa,6BAA6B;AAAA,MAAA;AAAA,IAC7D;AAAA,IAEF,aAAa,CAACW,GAAiBC,OAAgB;AAAA,MAC7C,GAAGD;AAAA,MACH,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,OAAOC,EAAM,aACTZ,IAAa,2BAA2B,YACxCA,IAAa,2BAA2B;AAAA,IAAA;AAAA,IAE9C,aAAa,CAACW,OAAqB;AAAA,MACjC,GAAGA;AAAA,MACH,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,cAAc;AAAA,MACd,UAAU;AAAA,MACV,OAAOX,IAAa,2BAA2B;AAAA,IAAA;AAAA,IAEjD,YAAY,CAACW,OAAqB;AAAA,MAChC,GAAGA;AAAA,MACH,iBAAiBX,IAAa,2BAA2B;AAAA,MACzD,QAAQA,IAAa,0BAA0B;AAAA,MAC/C,cAAc;AAAA,IAAA;AAAA,IAEhB,iBAAiB,CAACW,OAAqB;AAAA,MACrC,GAAGA;AAAA,MACH,OAAOX,IAAa,2BAA2B;AAAA,MAC/C,UAAU;AAAA,IAAA;AAAA,IAEZ,kBAAkB,CAACW,OAAqB;AAAA,MACtC,GAAGA;AAAA,MACH,OAAOX,IAAa,2BAA2B;AAAA,MAC/C,WAAW;AAAA,QACT,iBAAiBA,IAAa,2BAA2B;AAAA,QACzD,OAAOA,IAAa,SAAS;AAAA,MAAA;AAAA,IAC/B;AAAA,IAEF,MAAM,CAACW,OAAqB;AAAA,MAC1B,GAAGA;AAAA,MACH,QAAQ;AAAA,MACR,cAAc;AAAA,MACd,WAAWX,IACP,kCACA;AAAA,MACJ,iBAAiBA,IAAa,YAAY;AAAA,MAC1C,QAAQA,IAAa,sBAAsB;AAAA,MAC3C,UAAU;AAAA,IAAA;AAAA,IAEZ,UAAU,CAACW,OAAqB;AAAA,MAC9B,GAAGA;AAAA,MACH,SAAS;AAAA,MACT,WAAW;AAAA,IAAA;AAAA,EACb,GAGIE,IAAoB,CAAC,CAACzB,GAAgB,QAGtC0B,IAAgBZ,KAAa,CAACb,MADXH,IAAc2B,KADtB,CAAC,CAACtB,IACoD,KAGjEwB,IAAc,CAACC,MAAwB;AAC3C,IAAAA,EAAE,gBAAA,GACFA,EAAE,eAAA,GACFX,EAAalB,IAAc,CAAA,IAAK,IAAI;AAAA,EACtC,GAEM8B,IAAoB,MACxB,gBAAAC,EAAC,OAAA,EAAI,WAAU,qBACZ,UAAAJ,IACC,gBAAAI;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAASJ;AAAA,MACT,IAAI;AAAA,QACF,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,OAAOf,IAAa,2BAA2B;AAAA,QAC/C,WAAW;AAAA,UACT,OAAOA,IAAa,2BAA2B;AAAA,QAAA;AAAA,MACjD;AAAA,IACF;AAAA,EAAA,IAGF,gBAAAkB;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,IAAI;AAAA,QACF,UAAU;AAAA,QACV,OAAOpB,IAAa,2BAA2B;AAAA,MAAA;AAAA,IACjD;AAAA,EAAA,GAGN;AAGF,SACE,gBAAAqB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAAxC;AAAA,MACA,WAAWyC,EAAG,8BAA8B9B,CAAS;AAAA,MACrD,aAAa,CAACwB,MAAMA,EAAE,gBAAA;AAAA,MACtB,MAAK;AAAA,MACL,mBAAiBlC,IAAQD,IAAK,UAAU;AAAA,MAEvC,UAAA;AAAA,QAAAC,KACC,gBAAAuC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAIxC,IAAK;AAAA,YACT,SAAQ;AAAA,YACR,WAAW,wFAAyFc,IAA8B,KAAf,YAAiB;AAAA,YAEpI,UAAA;AAAA,cAAA,gBAAAuB,EAACK,KAAW,OAAOzC,KAAS,IAAI,UAAUQ,KAAY,IAAO;AAAA,cAC7D,gBAAA4B,EAACM,GAAA,EAAM,QAAQ9B,EAAA,CAAM;AAAA,cACpBD,KACC,gBAAAyB,EAACO,GAAA,EAAQ,WAAU,OAAM,OAAOhC,GAC9B,UAAA,gBAAAyB,EAAC,OAAA,EAAI,WAAU,kBACb,UAAA,gBAAAA,EAACQ,GAAA,EAAS,WAAU,uBAAsB,GAC5C,EAAA,CACF;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAKN,gBAAAR;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,cAAc,MAAMf,EAAa,EAAI;AAAA,YACrC,cAAc,MAAMA,EAAa,EAAK;AAAA,YAEtC,UAAA,gBAAAe;AAAA,cAACS;AAAA,cAAA;AAAA,gBACE,GAAG5B;AAAA,gBACJ,IAAI,OAAOjB;AAAA,gBACX,iBAAgB;AAAA,gBAChB,UAAAQ;AAAA,gBACA,SAASN;AAAA,gBACT,aAAa;AAAA,gBACb,WAAWC;AAAA,gBACX,YAAYI;AAAA,gBACZ,QAAQqB;AAAA,gBACR,SAASvB;AAAA,gBACT,OAAOA,IAAcC,IAAiBG;AAAA,gBACtC,UAAUc;AAAA,gBACV,cAAAR;AAAA,gBACA,aAAAC;AAAA,gBACA,YAAY;AAAA,kBACV,UAAU,MAAM;AAAA,kBAChB,QAAQ,MAAM;AAAA,kBACd,SAAS,MAAM;AAAA,kBACf,gBAAgB,MAAM;AAAA,kBACtB,aAAa,MAAM;AAAA,kBACnB,aAAa,MAAM;AAAA,kBACnB,YAAY,MAAM;AAAA,gBAAA;AAAA,gBAEpB,YAAY;AAAA,kBACV,mBAAAmB;AAAA,kBACA,oBAAoB,MAAM;AAAA,gBAAA;AAAA,cAC5B;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,QAEDlC,KACC,gBAAAmC;AAAA,UAACU;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,YAAW;AAAA,YACX,MAAK;AAAA,YACL,SAAQ;AAAA,YAEP,UAAA7C;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAIR;AAEAH,EAAqB,cAAc;"}

package/dist/components/forms/date-range/DateRange.cjs.js

@@ -1,17 +1,17 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),re=require("antd"),Y=require("../../../_virtual/index.cjs.js"),r=require("react"),A=require("dayjs"),ne=require("../../button/IconButton.cjs.js"),se=require("../shared/InputLabel.cjs.js"),p=require("../../icon/icons.generated.cjs.js"),{RangePicker:V}=re.DatePicker,W={ENTER:"Enter"},J=()=>Math.random().toString(36).substring(2,9),ae=(i,s)=>{const k=r.useRef(s);r.useEffect(()=>{k.current=s},[s]),r.useEffect(()=>{const f=o=>k.current(o);return document.addEventListener(i,f),()=>{document.removeEventListener(i,f)}},[i])},Q=({onCalendarChange:i=void 0,onChange:s,required:k,label:f,startDate:o,endDate:d,errorMessage:m,className:M,id:l,disabled:j=!1,dateFormat:v,shouldPopOnParent:B=!0,getPopupContainer:b,maxDateRange:u,open:C,onOpenChange:S,placement:L="bottomLeft",renderAsIconButton:N=!1,iconButtonClassName:X,iconClassName:Z,labelExtra:T,inputEmphasis:F="default"})=>{const q=F==="modified"&&!m,y=F==="deleted"&&!m,R=F==="success"&&!m,P=q?"var(--Warning-50, #FFFAEB)":y?"var(--Error-50, #FEF2F2)":R?"var(--Success-50, #F0FDF4)":"",E=q?"var(--Warning-200, #FEDF89)":y?"var(--Error-200, #FECACA)":R?"var(--Success-200, #BBF7D0)":"",[D,x]=r.useState(!1),[$,z]=r.useState(!1),h=r.useRef(null),K=r.useRef(null),I=r.useRef(!1),g=r.useRef(!1),a=e=>e?A(e):null,w=`date-range-start-${J()}`,O=`date-range-end-${J()}`,G=()=>{x(!0),setTimeout(()=>{h.current&&h.current.focus()},0)};ae("keydown",e=>{if(e.key===W.ENTER&&document.activeElement instanceof HTMLInputElement){if(document?.activeElement?.id===w){const n=A(document?.activeElement?.value);n.isValid()&&s([n,a(d)])}if(document?.activeElement?.id===O){const n=A(document?.activeElement?.value);n.isValid()&&s([a(o),n])}}});const _=r.useCallback(e=>{const[n,c]=[a(o),a(d)];return u?n?e.isBefore(n.startOf("day"))||e.isAfter(n.add(u,"day").endOf("day")):c?e.isBefore(c.subtract(u,"day").startOf("day"))||e.isAfter(c.endOf("day")):!1:!1},[o,d,u]),H=r.useCallback(e=>{if(e.key===W.ENTER&&!(N?D:C??$)){e.preventDefault(),e.stopPropagation();const c=e.target.closest("form");if(c){const U=c.querySelector('button[type="submit"]');U?U.click():c.requestSubmit()}}},[N,D,C,$]),ee=r.useCallback(e=>{if(e&&I.current){I.current=!1,x(!1);return}x(e),e||(I.current=!0,requestAnimationFrame(()=>{h.current?.focus(),requestAnimationFrame(()=>{I.current=!1})}))},[]),te=r.useCallback(e=>{if(e&&g.current){g.current=!1,z(!1),S?.(!1);return}z(e),S?.(e),e||(g.current=!0,requestAnimationFrame(()=>{K.current?.focus(),requestAnimationFrame(()=>{g.current=!1})}))},[S]);return N?t.jsxs("div",{id:l,className:M,onKeyDownCapture:H,children:[t.jsx(ne,{onClick:G,disabled:j,variant:"default",className:X,children:t.jsx(p.CalendarMonthIcon,{size:20,className:Y("w-5 h-5",Z)})}),t.jsx(V,{ref:h,onChange:e=>{s(e),x(!1)},onCalendarChange:i,value:[a(o),a(d)],id:{start:w,end:O},allowClear:!0,format:v||"DD MMM, YYYY",separator:t.jsx(p.CheckIndeterminateSmallFilledIcon,{size:20,className:"text-neutral-400 dark:text-gray-100"}),suffixIcon:t.jsx(p.CalendarMonthIcon,{size:14,className:"text-neutral-400 dark:text-gray-100"}),getPopupContainer:b||(B?e=>e.parentElement:()=>document.body),disabled:j,disabledDate:u?_:void 0,autoComplete:"off",open:D,onOpenChange:ee,placement:L,style:{position:"absolute",opacity:0,pointerEvents:"none",width:0,height:0}})]}):t.jsxs("div",{id:l,className:Y("flex flex-col",M),onKeyDownCapture:H,children:[(f||T)&&t.jsxs("div",{className:"mb-1 flex items-center justify-between gap-1",children:[t.jsx(se.InputLabel,{label:f||"",required:k||!1}),T]}),(P||E)&&t.jsx("style",{children:`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),re=require("antd"),w=require("../../../_virtual/index.cjs.js"),r=require("react"),A=require("dayjs"),ne=require("../../button/IconButton.cjs.js"),se=require("../shared/InputLabel.cjs.js"),p=require("../../icon/icons.generated.cjs.js"),{RangePicker:V}=re.DatePicker,W={ENTER:"Enter"},J=()=>Math.random().toString(36).substring(2,9),ae=(i,s)=>{const k=r.useRef(s);r.useEffect(()=>{k.current=s},[s]),r.useEffect(()=>{const f=c=>k.current(c);return document.addEventListener(i,f),()=>{document.removeEventListener(i,f)}},[i])},Q=({onCalendarChange:i=void 0,onChange:s,required:k,label:f,startDate:c,endDate:d,errorMessage:m,className:M,id:l,disabled:j=!1,dateFormat:v,shouldPopOnParent:B=!0,getPopupContainer:b,maxDateRange:u,open:C,onOpenChange:S,placement:L="bottomLeft",renderAsIconButton:N=!1,iconButtonClassName:X,iconClassName:Z,labelExtra:T,inputEmphasis:F="default"})=>{const q=F==="modified"&&!m,x=F==="deleted"&&!m,R=F==="success"&&!m,P=q?"var(--Warning-50, #FFFAEB)":x?"var(--Error-50, #FEF2F2)":R?"var(--Success-50, #F0FDF4)":"",y=q?"var(--Warning-200, #FEDF89)":x?"var(--Error-200, #FECACA)":R?"var(--Success-200, #BBF7D0)":"",[D,E]=r.useState(!1),[$,z]=r.useState(!1),I=r.useRef(null),K=r.useRef(null),h=r.useRef(!1),g=r.useRef(!1),a=e=>e?A(e):null,O=`date-range-start-${J()}`,Y=`date-range-end-${J()}`,G=()=>{E(!0),setTimeout(()=>{I.current&&I.current.focus()},0)};ae("keydown",e=>{if(e.key===W.ENTER&&document.activeElement instanceof HTMLInputElement){if(document?.activeElement?.id===O){const n=A(document?.activeElement?.value);n.isValid()&&s([n,a(d)])}if(document?.activeElement?.id===Y){const n=A(document?.activeElement?.value);n.isValid()&&s([a(c),n])}}});const _=r.useCallback(e=>{const[n,o]=[a(c),a(d)];return u?n?e.isBefore(n.startOf("day"))||e.isAfter(n.add(u,"day").endOf("day")):o?e.isBefore(o.subtract(u,"day").startOf("day"))||e.isAfter(o.endOf("day")):!1:!1},[c,d,u]),H=r.useCallback(e=>{if(e.key===W.ENTER&&!(N?D:C??$)){e.preventDefault(),e.stopPropagation();const o=e.target.closest("form");if(o){const U=o.querySelector('button[type="submit"]');U?U.click():o.requestSubmit()}}},[N,D,C,$]),ee=r.useCallback(e=>{if(e&&h.current){h.current=!1,E(!1);return}E(e),e||(h.current=!0,requestAnimationFrame(()=>{I.current?.focus(),requestAnimationFrame(()=>{h.current=!1})}))},[]),te=r.useCallback(e=>{if(e&&g.current){g.current=!1,z(!1),S?.(!1);return}z(e),S?.(e),e||(g.current=!0,requestAnimationFrame(()=>{K.current?.focus(),requestAnimationFrame(()=>{g.current=!1})}))},[S]);return N?t.jsxs("div",{id:l,className:M,onKeyDownCapture:H,children:[t.jsx(ne,{onClick:G,disabled:j,variant:"default",className:X,children:t.jsx(p.CalendarMonthIcon,{size:20,className:w("w-5 h-5",Z)})}),t.jsx(V,{ref:I,onChange:e=>{s(e),E(!1)},onCalendarChange:i,value:[a(c),a(d)],id:{start:O,end:Y},allowClear:!0,format:v||"DD MMM, YYYY",separator:t.jsx(p.CheckIndeterminateSmallFilledIcon,{size:20,className:"text-neutral-400 dark:text-gray-100"}),suffixIcon:t.jsx(p.CalendarMonthIcon,{size:14,className:"text-neutral-400 dark:text-gray-100"}),getPopupContainer:b||(B?e=>e.parentElement:()=>document.body),disabled:j,disabledDate:u?_:void 0,autoComplete:"off",open:D,onOpenChange:ee,placement:L})]}):t.jsxs("div",{id:l,className:w("flex flex-col",M),onKeyDownCapture:H,children:[(f||T)&&t.jsxs("div",{className:"mb-1 flex items-center justify-between gap-1",children:[t.jsx(se.InputLabel,{label:f||"",required:k||!1}),T]}),(P||y)&&t.jsx("style",{children:`
           #${l} .ant-picker {
             background-color: ${P} !important;
-            border-color: ${E} !important;
+            border-color: ${y} !important;
           }
           #${l} .ant-picker:hover {
-            border-color: ${E} !important;
+            border-color: ${y} !important;
           }
           #${l} .ant-picker.ant-picker-focused {
-            border-color: ${E} !important;
-            box-shadow: 0 0 0 2px ${y?"rgba(254,202,202,0.45)":q?"rgba(254,223,137,0.45)":"rgba(187,247,208,0.45)"} !important;
+            border-color: ${y} !important;
+            box-shadow: 0 0 0 2px ${x?"rgba(254,202,202,0.45)":q?"rgba(254,223,137,0.45)":"rgba(187,247,208,0.45)"} !important;
           }
           #${l} .ant-picker .ant-picker-input > input {
-            color: ${y?"#475467":R?"#101828":"inherit"};
+            color: ${x?"#475467":R?"#101828":"inherit"};
           }
-        `}),t.jsx(V,{ref:K,onChange:s,onCalendarChange:i,value:[a(o),a(d)],id:{start:w,end:O},allowClear:!0,format:v||"DD MMM, YYYY",separator:t.jsx(p.CheckIndeterminateSmallFilledIcon,{size:20,className:"text-neutral-400 dark:text-gray-100"}),suffixIcon:t.jsx(p.CalendarMonthIcon,{size:14,className:"text-neutral-400 dark:text-gray-100"}),getPopupContainer:b||(B?e=>e.parentElement:()=>document.body),disabled:j,disabledDate:u?_:void 0,open:C??$,onOpenChange:te,autoComplete:"off",placement:L}),m&&t.jsx("p",{className:Y("text-sm font-inter font-normal text-left pt-[6px]","text-red-500"),children:m})]})};Q.displayName="DateRange";exports.DateRange=Q;
+        `}),t.jsx(V,{ref:K,onChange:s,onCalendarChange:i,value:[a(c),a(d)],id:{start:O,end:Y},allowClear:!0,format:v||"DD MMM, YYYY",separator:t.jsx(p.CheckIndeterminateSmallFilledIcon,{size:20,className:"text-neutral-400 dark:text-gray-100"}),suffixIcon:t.jsx(p.CalendarMonthIcon,{size:14,className:"text-neutral-400 dark:text-gray-100"}),getPopupContainer:b||(B?e=>e.parentElement:()=>document.body),disabled:j,disabledDate:u?_:void 0,open:C??$,onOpenChange:te,autoComplete:"off",placement:L}),m&&t.jsx("p",{className:w("text-sm font-inter font-normal text-left pt-[6px]","text-red-500"),children:m})]})};Q.displayName="DateRange";exports.DateRange=Q;
 //# sourceMappingURL=DateRange.cjs.js.map

package/dist/components/forms/date-range/DateRange.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateRange.cjs.js","sources":["../../../../src/components/forms/date-range/DateRange.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { DatePicker } from \"antd\";\nimport cn from \"classnames\";\nimport React from \"react\";\nimport dayjs from \"dayjs\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport IconButton from \"../../button/IconButton\";\nimport { InputLabel } from \"../shared/InputLabel\";\nimport { CalendarMonthIcon, CheckIndeterminateSmallFilledIcon } from '../../icon';\n\nconst { RangePicker } = DatePicker;\n\n// Keyboard keys constant\nconst KEYBOARD_KEYS = {\n  ENTER: \"Enter\",\n} as const;\n\n/**\n * Generate a short UUID\n */\nconst generateShortUUID = (): string => {\n  return Math.random().toString(36).substring(2, 9);\n};\n\n/**\n * Hook to add event listeners\n */\nconst useEventListener = <K extends keyof DocumentEventMap>(\n  eventName: K,\n  handler: (event: DocumentEventMap[K]) => void\n) => {\n  const savedHandler = useRef(handler);\n\n  useEffect(() => {\n    savedHandler.current = handler;\n  }, [handler]);\n\n  useEffect(() => {\n    const eventListener = (event: DocumentEventMap[K]) =>\n      savedHandler.current(event);\n    document.addEventListener(eventName, eventListener);\n    return () => {\n      document.removeEventListener(eventName, eventListener);\n    };\n  }, [eventName]);\n};\n\n/**\n * Props for the DateRange component\n * Matches the lax-web-portal implementation for drop-in replacement\n */\nexport type TDateRangeProps = {\n  /** Unique identifier for the date range */\n  id: string;\n  /** Label text to display above the date range */\n  label?: string;\n  /** Start date value (ISO string or formatted date string) */\n  startDate: string;\n  /** End date value (ISO string or formatted date string) */\n  endDate: string;\n  /** Callback function called when date range changes */\n  onChange(data: any): void;\n  /** Callback function called when calendar selection changes */\n  onCalendarChange?(data: any): void;\n  /** Whether the field is required */\n  required?: boolean;\n  /** Error message to display below the date range */\n  errorMessage?: string;\n  /** Additional CSS classes for the wrapper */\n  className?: string;\n  /** Whether the date range is disabled */\n  disabled?: boolean;\n  /** Custom date format */\n  dateFormat?: string;\n  /** Whether popup should render inside parent element */\n  shouldPopOnParent?: boolean;\n  /** Custom function to get popup container */\n  getPopupContainer?: (trigger: HTMLElement | null) => HTMLElement;\n  /** Maximum date range in days */\n  maxDateRange?: number;\n  /** Whether the picker is open */\n  open?: boolean;\n  /** Callback function called when open state changes */\n  onOpenChange?(open: boolean): void;\n  /** Placement of the dropdown */\n  placement?: \"bottomLeft\" | \"bottomRight\" | \"topLeft\" | \"topRight\";\n  /** Whether to render as an icon button that triggers the date picker */\n  renderAsIconButton?: boolean;\n  /** Additional CSS classes for the icon button */\n  iconButtonClassName?: string;\n  /** Additional CSS classes for the calendar icon inside the button */\n  iconClassName?: string;\n  /** Optional extra content in the label row (e.g. actions, badges) */\n  labelExtra?: React.ReactNode;\n  /** Input surface style: `'modified'` — Warning colors; `'deleted'` — Error colors; `'success'` — Success colors. */\n  inputEmphasis?: \"default\" | \"modified\" | \"deleted\" | \"success\";\n};\n\n/**\n * A date range picker component with label, validation, and styling support.\n * Features proper date handling, validation, and comprehensive prop support.\n * Built on top of Ant Design's RangePicker for advanced functionality.\n *\n * This component is designed as a drop-in replacement for the lax-web-portal\n * DateRange component.\n *\n * @example\n * ```tsx\n * <DateRange\n *   id=\"event-dates\"\n *   label=\"Event Duration\"\n *   startDate={startDate}\n *   endDate={endDate}\n *   onChange={(dates) => {\n *     setStartDate(dates[0]);\n *     setEndDate(dates[1]);\n *   }}\n *   required\n * />\n * ```\n */\nexport const DateRange = ({\n  onCalendarChange = undefined,\n  onChange,\n  required,\n  label,\n  startDate,\n  endDate,\n  errorMessage,\n  className,\n  id,\n  disabled = false,\n  dateFormat,\n  shouldPopOnParent = true,\n  getPopupContainer: customGetPopupContainer,\n  maxDateRange,\n  open,\n  onOpenChange,\n  placement = \"bottomLeft\",\n  renderAsIconButton = false,\n  iconButtonClassName,\n  iconClassName,\n  labelExtra,\n  inputEmphasis = \"default\",\n}: TDateRangeProps) => {\n  const emphasisModifiedSkin = inputEmphasis === \"modified\" && !errorMessage;\n  const emphasisDeletedSkin = inputEmphasis === \"deleted\" && !errorMessage;\n  const emphasisSuccessSkin = inputEmphasis === \"success\" && !errorMessage;\n  const emphasisBg =\n    emphasisModifiedSkin ? \"var(--Warning-50, #FFFAEB)\" :\n    emphasisDeletedSkin ? \"var(--Error-50, #FEF2F2)\" :\n    emphasisSuccessSkin ? \"var(--Success-50, #F0FDF4)\" : \"\";\n  const emphasisBorder =\n    emphasisModifiedSkin ? \"var(--Warning-200, #FEDF89)\" :\n    emphasisDeletedSkin ? \"var(--Error-200, #FECACA)\" :\n    emphasisSuccessSkin ? \"var(--Success-200, #BBF7D0)\" : \"\";\n  const [isOpen, setIsOpen] = useState(false);\n  const [isNormalPickerOpen, setIsNormalPickerOpen] = useState(false);\n  const pickerRef = useRef<any>(null);\n  const normalPickerRef = useRef<any>(null);\n  const suppressNextIconOpenRef = useRef(false);\n  const suppressNextNormalOpenRef = useRef(false);\n\n  const parseDate = (str: string | number | Date | dayjs.Dayjs) => {\n    if (!str) return null;\n    return dayjs(str);\n  };\n\n  const START_ID = `date-range-start-${generateShortUUID()}`;\n  const END_ID = `date-range-end-${generateShortUUID()}`;\n\n  const handleIconClick = () => {\n    setIsOpen(true);\n    setTimeout(() => {\n      if (pickerRef.current) {\n        pickerRef.current.focus();\n      }\n    }, 0);\n  };\n\n  useEventListener(\"keydown\", (e: KeyboardEvent) => {\n    if (\n      e.key === KEYBOARD_KEYS.ENTER &&\n      document.activeElement instanceof HTMLInputElement\n    ) {\n      if (document?.activeElement?.id === START_ID) {\n        const date = dayjs(document?.activeElement?.value);\n        if (date.isValid()) {\n          onChange([date, parseDate(endDate)]);\n        }\n      }\n      if (document?.activeElement?.id === END_ID) {\n        const date = dayjs(document?.activeElement?.value);\n        if (date.isValid()) {\n          onChange([parseDate(startDate), date]);\n        }\n      }\n    }\n  });\n\n  const disabledDate = useCallback(\n    (current: dayjs.Dayjs) => {\n      const [start, end] = [parseDate(startDate), parseDate(endDate)];\n\n      if (!maxDateRange) return false;\n\n      if (start) {\n        return (\n          current.isBefore(start.startOf(\"day\")) ||\n          current.isAfter(start.add(maxDateRange, \"day\").endOf(\"day\"))\n        );\n      }\n\n      if (end) {\n        return (\n          current.isBefore(end.subtract(maxDateRange, \"day\").startOf(\"day\")) ||\n          current.isAfter(end.endOf(\"day\"))\n        );\n      }\n\n      return false;\n    },\n    [startDate, endDate, maxDateRange]\n  );\n\n  const handleKeyDownCapture = useCallback((e: React.KeyboardEvent) => {\n    if (e.key === KEYBOARD_KEYS.ENTER) {\n      const pickerIsOpen = renderAsIconButton ? isOpen : (open ?? isNormalPickerOpen);\n      if (!pickerIsOpen) {\n        e.preventDefault();\n        e.stopPropagation();\n\n        const form = (e.target as HTMLElement).closest('form');\n        if (form) {\n          const submitBtn = form.querySelector<HTMLButtonElement>('button[type=\"submit\"]');\n          if (submitBtn) {\n            submitBtn.click();\n          } else {\n            form.requestSubmit();\n          }\n        }\n      }\n    }\n  }, [renderAsIconButton, isOpen, open, isNormalPickerOpen]);\n\n  const handleIconPickerOpenChange = useCallback((nextOpen: boolean) => {\n    if (nextOpen && suppressNextIconOpenRef.current) {\n      suppressNextIconOpenRef.current = false;\n      setIsOpen(false);\n      return;\n    }\n\n    setIsOpen(nextOpen);\n    if (!nextOpen) {\n      suppressNextIconOpenRef.current = true;\n      requestAnimationFrame(() => {\n        pickerRef.current?.focus();\n        requestAnimationFrame(() => {\n          suppressNextIconOpenRef.current = false;\n        });\n      });\n    }\n  }, []);\n\n  const handleNormalOpenChange = useCallback((nextOpen: boolean) => {\n    if (nextOpen && suppressNextNormalOpenRef.current) {\n      suppressNextNormalOpenRef.current = false;\n      setIsNormalPickerOpen(false);\n      onOpenChange?.(false);\n      return;\n    }\n\n    setIsNormalPickerOpen(nextOpen);\n    onOpenChange?.(nextOpen);\n    if (!nextOpen) {\n      suppressNextNormalOpenRef.current = true;\n      requestAnimationFrame(() => {\n        normalPickerRef.current?.focus();\n        requestAnimationFrame(() => {\n          suppressNextNormalOpenRef.current = false;\n        });\n      });\n    }\n  }, [onOpenChange]);\n\n  if (renderAsIconButton) {\n    return (\n      <div id={id} className={className} onKeyDownCapture={handleKeyDownCapture}>\n        <IconButton\n          onClick={handleIconClick}\n          disabled={disabled}\n          variant=\"default\"\n          className={iconButtonClassName}\n        >\n          <CalendarMonthIcon size={20} className={cn(\"w-5 h-5\", iconClassName)} />\n        </IconButton>\n        <RangePicker\n          ref={pickerRef}\n          onChange={(dates) => {\n            onChange(dates);\n            setIsOpen(false);\n          }}\n          onCalendarChange={onCalendarChange}\n          value={[parseDate(startDate), parseDate(endDate)]}\n          id={{ start: START_ID, end: END_ID }}\n          allowClear\n          format={dateFormat ? dateFormat : \"DD MMM, YYYY\"}\n          separator={<CheckIndeterminateSmallFilledIcon size={20} className=\"text-neutral-400 dark:text-gray-100\" />}\n          suffixIcon={<CalendarMonthIcon size={14} className=\"text-neutral-400 dark:text-gray-100\" />}\n          getPopupContainer={\n            customGetPopupContainer\n              ? customGetPopupContainer\n              : shouldPopOnParent\n                ? (trigger) => trigger.parentElement as HTMLElement\n                : () => document.body\n          }\n          disabled={disabled}\n          disabledDate={maxDateRange ? disabledDate : undefined}\n          autoComplete=\"off\"\n          open={isOpen}\n          onOpenChange={handleIconPickerOpenChange}\n          placement={placement}\n          style={{ position: \"absolute\", opacity: 0, pointerEvents: \"none\", width: 0, height: 0 }}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div id={id} className={cn(\"flex flex-col\", className)} onKeyDownCapture={handleKeyDownCapture}>\n      {(label || labelExtra) && (\n        <div className=\"mb-1 flex items-center justify-between gap-1\">\n          <InputLabel label={label || \"\"} required={required || false} />\n          {labelExtra}\n        </div>\n      )}\n      {(emphasisBg || emphasisBorder) && (\n        <style>{`\n          #${id} .ant-picker {\n            background-color: ${emphasisBg} !important;\n            border-color: ${emphasisBorder} !important;\n          }\n          #${id} .ant-picker:hover {\n            border-color: ${emphasisBorder} !important;\n          }\n          #${id} .ant-picker.ant-picker-focused {\n            border-color: ${emphasisBorder} !important;\n            box-shadow: 0 0 0 2px ${emphasisDeletedSkin ? \"rgba(254,202,202,0.45)\" : emphasisModifiedSkin ? \"rgba(254,223,137,0.45)\" : \"rgba(187,247,208,0.45)\"} !important;\n          }\n          #${id} .ant-picker .ant-picker-input > input {\n            color: ${emphasisDeletedSkin ? \"#475467\" : emphasisSuccessSkin ? \"#101828\" : \"inherit\"};\n          }\n        `}</style>\n      )}\n      <RangePicker\n        ref={normalPickerRef}\n        onChange={onChange}\n        onCalendarChange={onCalendarChange}\n        value={[parseDate(startDate), parseDate(endDate)]}\n        id={{ start: START_ID, end: END_ID }}\n        allowClear\n        format={dateFormat ? dateFormat : \"DD MMM, YYYY\"}\n        separator={\n          <CheckIndeterminateSmallFilledIcon size={20} className='text-neutral-400 dark:text-gray-100' />\n        }\n        suffixIcon={\n          <CalendarMonthIcon size={14} className='text-neutral-400 dark:text-gray-100' />\n        }\n        getPopupContainer={\n          customGetPopupContainer\n            ? customGetPopupContainer\n            : shouldPopOnParent\n              ? (trigger) => trigger.parentElement as HTMLElement\n              : () => document.body\n        }\n        disabled={disabled}\n        disabledDate={maxDateRange ? disabledDate : undefined}\n        open={open ?? isNormalPickerOpen}\n        onOpenChange={handleNormalOpenChange}\n        autoComplete=\"off\"\n        placement={placement}\n      />\n      {errorMessage && (\n        <p\n          className={cn(\n            \"text-sm font-inter font-normal text-left pt-[6px]\",\n            \"text-red-500\"\n          )}\n        >\n          {errorMessage}\n        </p>\n      )}\n    </div>\n  );\n};\n\nDateRange.displayName = \"DateRange\";\n\n"],"names":["RangePicker","DatePicker","KEYBOARD_KEYS","generateShortUUID","useEventListener","eventName","handler","savedHandler","useRef","useEffect","eventListener","event","DateRange","onCalendarChange","onChange","required","label","startDate","endDate","errorMessage","className","id","disabled","dateFormat","shouldPopOnParent","customGetPopupContainer","maxDateRange","open","onOpenChange","placement","renderAsIconButton","iconButtonClassName","iconClassName","labelExtra","inputEmphasis","emphasisModifiedSkin","emphasisDeletedSkin","emphasisSuccessSkin","emphasisBg","emphasisBorder","isOpen","setIsOpen","useState","isNormalPickerOpen","setIsNormalPickerOpen","pickerRef","normalPickerRef","suppressNextIconOpenRef","suppressNextNormalOpenRef","parseDate","str","dayjs","START_ID","END_ID","handleIconClick","date","disabledDate","useCallback","current","start","end","handleKeyDownCapture","form","submitBtn","handleIconPickerOpenChange","nextOpen","handleNormalOpenChange","jsxs","jsx","IconButton","CalendarMonthIcon","cn","dates","CheckIndeterminateSmallFilledIcon","trigger","InputLabel"],"mappings":"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"}
+{"version":3,"file":"DateRange.cjs.js","sources":["../../../../src/components/forms/date-range/DateRange.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { DatePicker } from \"antd\";\nimport cn from \"classnames\";\nimport React from \"react\";\nimport dayjs from \"dayjs\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport IconButton from \"../../button/IconButton\";\nimport { InputLabel } from \"../shared/InputLabel\";\nimport { CalendarMonthIcon, CheckIndeterminateSmallFilledIcon } from '../../icon';\n\nconst { RangePicker } = DatePicker;\n\n// Keyboard keys constant\nconst KEYBOARD_KEYS = {\n  ENTER: \"Enter\",\n} as const;\n\n/**\n * Generate a short UUID\n */\nconst generateShortUUID = (): string => {\n  return Math.random().toString(36).substring(2, 9);\n};\n\n/**\n * Hook to add event listeners\n */\nconst useEventListener = <K extends keyof DocumentEventMap>(\n  eventName: K,\n  handler: (event: DocumentEventMap[K]) => void\n) => {\n  const savedHandler = useRef(handler);\n\n  useEffect(() => {\n    savedHandler.current = handler;\n  }, [handler]);\n\n  useEffect(() => {\n    const eventListener = (event: DocumentEventMap[K]) =>\n      savedHandler.current(event);\n    document.addEventListener(eventName, eventListener);\n    return () => {\n      document.removeEventListener(eventName, eventListener);\n    };\n  }, [eventName]);\n};\n\n/**\n * Props for the DateRange component\n * Matches the lax-web-portal implementation for drop-in replacement\n */\nexport type TDateRangeProps = {\n  /** Unique identifier for the date range */\n  id: string;\n  /** Label text to display above the date range */\n  label?: string;\n  /** Start date value (ISO string or formatted date string) */\n  startDate: string;\n  /** End date value (ISO string or formatted date string) */\n  endDate: string;\n  /** Callback function called when date range changes */\n  onChange(data: any): void;\n  /** Callback function called when calendar selection changes */\n  onCalendarChange?(data: any): void;\n  /** Whether the field is required */\n  required?: boolean;\n  /** Error message to display below the date range */\n  errorMessage?: string;\n  /** Additional CSS classes for the wrapper */\n  className?: string;\n  /** Whether the date range is disabled */\n  disabled?: boolean;\n  /** Custom date format */\n  dateFormat?: string;\n  /** Whether popup should render inside parent element */\n  shouldPopOnParent?: boolean;\n  /** Custom function to get popup container */\n  getPopupContainer?: (trigger: HTMLElement | null) => HTMLElement;\n  /** Maximum date range in days */\n  maxDateRange?: number;\n  /** Whether the picker is open */\n  open?: boolean;\n  /** Callback function called when open state changes */\n  onOpenChange?(open: boolean): void;\n  /** Placement of the dropdown */\n  placement?: \"bottomLeft\" | \"bottomRight\" | \"topLeft\" | \"topRight\";\n  /** Whether to render as an icon button that triggers the date picker */\n  renderAsIconButton?: boolean;\n  /** Additional CSS classes for the icon button */\n  iconButtonClassName?: string;\n  /** Additional CSS classes for the calendar icon inside the button */\n  iconClassName?: string;\n  /** Optional extra content in the label row (e.g. actions, badges) */\n  labelExtra?: React.ReactNode;\n  /** Input surface style: `'modified'` — Warning colors; `'deleted'` — Error colors; `'success'` — Success colors. */\n  inputEmphasis?: \"default\" | \"modified\" | \"deleted\" | \"success\";\n};\n\n/**\n * A date range picker component with label, validation, and styling support.\n * Features proper date handling, validation, and comprehensive prop support.\n * Built on top of Ant Design's RangePicker for advanced functionality.\n *\n * This component is designed as a drop-in replacement for the lax-web-portal\n * DateRange component.\n *\n * @example\n * ```tsx\n * <DateRange\n *   id=\"event-dates\"\n *   label=\"Event Duration\"\n *   startDate={startDate}\n *   endDate={endDate}\n *   onChange={(dates) => {\n *     setStartDate(dates[0]);\n *     setEndDate(dates[1]);\n *   }}\n *   required\n * />\n * ```\n */\nexport const DateRange = ({\n  onCalendarChange = undefined,\n  onChange,\n  required,\n  label,\n  startDate,\n  endDate,\n  errorMessage,\n  className,\n  id,\n  disabled = false,\n  dateFormat,\n  shouldPopOnParent = true,\n  getPopupContainer: customGetPopupContainer,\n  maxDateRange,\n  open,\n  onOpenChange,\n  placement = \"bottomLeft\",\n  renderAsIconButton = false,\n  iconButtonClassName,\n  iconClassName,\n  labelExtra,\n  inputEmphasis = \"default\",\n}: TDateRangeProps) => {\n  const emphasisModifiedSkin = inputEmphasis === \"modified\" && !errorMessage;\n  const emphasisDeletedSkin = inputEmphasis === \"deleted\" && !errorMessage;\n  const emphasisSuccessSkin = inputEmphasis === \"success\" && !errorMessage;\n  const emphasisBg =\n    emphasisModifiedSkin ? \"var(--Warning-50, #FFFAEB)\" :\n    emphasisDeletedSkin ? \"var(--Error-50, #FEF2F2)\" :\n    emphasisSuccessSkin ? \"var(--Success-50, #F0FDF4)\" : \"\";\n  const emphasisBorder =\n    emphasisModifiedSkin ? \"var(--Warning-200, #FEDF89)\" :\n    emphasisDeletedSkin ? \"var(--Error-200, #FECACA)\" :\n    emphasisSuccessSkin ? \"var(--Success-200, #BBF7D0)\" : \"\";\n  const [isOpen, setIsOpen] = useState(false);\n  const [isNormalPickerOpen, setIsNormalPickerOpen] = useState(false);\n  const pickerRef = useRef<any>(null);\n  const normalPickerRef = useRef<any>(null);\n  const suppressNextIconOpenRef = useRef(false);\n  const suppressNextNormalOpenRef = useRef(false);\n\n  const parseDate = (str: string | number | Date | dayjs.Dayjs) => {\n    if (!str) return null;\n    return dayjs(str);\n  };\n\n  const START_ID = `date-range-start-${generateShortUUID()}`;\n  const END_ID = `date-range-end-${generateShortUUID()}`;\n\n  const handleIconClick = () => {\n    setIsOpen(true);\n    setTimeout(() => {\n      if (pickerRef.current) {\n        pickerRef.current.focus();\n      }\n    }, 0);\n  };\n\n  useEventListener(\"keydown\", (e: KeyboardEvent) => {\n    if (\n      e.key === KEYBOARD_KEYS.ENTER &&\n      document.activeElement instanceof HTMLInputElement\n    ) {\n      if (document?.activeElement?.id === START_ID) {\n        const date = dayjs(document?.activeElement?.value);\n        if (date.isValid()) {\n          onChange([date, parseDate(endDate)]);\n        }\n      }\n      if (document?.activeElement?.id === END_ID) {\n        const date = dayjs(document?.activeElement?.value);\n        if (date.isValid()) {\n          onChange([parseDate(startDate), date]);\n        }\n      }\n    }\n  });\n\n  const disabledDate = useCallback(\n    (current: dayjs.Dayjs) => {\n      const [start, end] = [parseDate(startDate), parseDate(endDate)];\n\n      if (!maxDateRange) return false;\n\n      if (start) {\n        return (\n          current.isBefore(start.startOf(\"day\")) ||\n          current.isAfter(start.add(maxDateRange, \"day\").endOf(\"day\"))\n        );\n      }\n\n      if (end) {\n        return (\n          current.isBefore(end.subtract(maxDateRange, \"day\").startOf(\"day\")) ||\n          current.isAfter(end.endOf(\"day\"))\n        );\n      }\n\n      return false;\n    },\n    [startDate, endDate, maxDateRange]\n  );\n\n  const handleKeyDownCapture = useCallback((e: React.KeyboardEvent) => {\n    if (e.key === KEYBOARD_KEYS.ENTER) {\n      const pickerIsOpen = renderAsIconButton ? isOpen : (open ?? isNormalPickerOpen);\n      if (!pickerIsOpen) {\n        e.preventDefault();\n        e.stopPropagation();\n\n        const form = (e.target as HTMLElement).closest('form');\n        if (form) {\n          const submitBtn = form.querySelector<HTMLButtonElement>('button[type=\"submit\"]');\n          if (submitBtn) {\n            submitBtn.click();\n          } else {\n            form.requestSubmit();\n          }\n        }\n      }\n    }\n  }, [renderAsIconButton, isOpen, open, isNormalPickerOpen]);\n\n  const handleIconPickerOpenChange = useCallback((nextOpen: boolean) => {\n    if (nextOpen && suppressNextIconOpenRef.current) {\n      suppressNextIconOpenRef.current = false;\n      setIsOpen(false);\n      return;\n    }\n\n    setIsOpen(nextOpen);\n    if (!nextOpen) {\n      suppressNextIconOpenRef.current = true;\n      requestAnimationFrame(() => {\n        pickerRef.current?.focus();\n        requestAnimationFrame(() => {\n          suppressNextIconOpenRef.current = false;\n        });\n      });\n    }\n  }, []);\n\n  const handleNormalOpenChange = useCallback((nextOpen: boolean) => {\n    if (nextOpen && suppressNextNormalOpenRef.current) {\n      suppressNextNormalOpenRef.current = false;\n      setIsNormalPickerOpen(false);\n      onOpenChange?.(false);\n      return;\n    }\n\n    setIsNormalPickerOpen(nextOpen);\n    onOpenChange?.(nextOpen);\n    if (!nextOpen) {\n      suppressNextNormalOpenRef.current = true;\n      requestAnimationFrame(() => {\n        normalPickerRef.current?.focus();\n        requestAnimationFrame(() => {\n          suppressNextNormalOpenRef.current = false;\n        });\n      });\n    }\n  }, [onOpenChange]);\n\n  if (renderAsIconButton) {\n    return (\n      <div id={id} className={className} onKeyDownCapture={handleKeyDownCapture}>\n        <IconButton\n          onClick={handleIconClick}\n          disabled={disabled}\n          variant=\"default\"\n          className={iconButtonClassName}\n        >\n          <CalendarMonthIcon size={20} className={cn(\"w-5 h-5\", iconClassName)} />\n        </IconButton>\n        <RangePicker\n          ref={pickerRef}\n          onChange={(dates) => {\n            onChange(dates);\n            setIsOpen(false);\n          }}\n          onCalendarChange={onCalendarChange}\n          value={[parseDate(startDate), parseDate(endDate)]}\n          id={{ start: START_ID, end: END_ID }}\n          allowClear\n          format={dateFormat ? dateFormat : \"DD MMM, YYYY\"}\n          separator={<CheckIndeterminateSmallFilledIcon size={20} className=\"text-neutral-400 dark:text-gray-100\" />}\n          suffixIcon={<CalendarMonthIcon size={14} className=\"text-neutral-400 dark:text-gray-100\" />}\n          getPopupContainer={\n            customGetPopupContainer\n              ? customGetPopupContainer\n              : shouldPopOnParent\n                ? (trigger) => trigger.parentElement as HTMLElement\n                : () => document.body\n          }\n          disabled={disabled}\n          disabledDate={maxDateRange ? disabledDate : undefined}\n          autoComplete=\"off\"\n          open={isOpen}\n          onOpenChange={handleIconPickerOpenChange}\n          placement={placement}\n          // style={{ position: \"absolute\", opacity: 0, pointerEvents: \"none\", width: 0, height: 0 }}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div id={id} className={cn(\"flex flex-col\", className)} onKeyDownCapture={handleKeyDownCapture}>\n      {(label || labelExtra) && (\n        <div className=\"mb-1 flex items-center justify-between gap-1\">\n          <InputLabel label={label || \"\"} required={required || false} />\n          {labelExtra}\n        </div>\n      )}\n      {(emphasisBg || emphasisBorder) && (\n        <style>{`\n          #${id} .ant-picker {\n            background-color: ${emphasisBg} !important;\n            border-color: ${emphasisBorder} !important;\n          }\n          #${id} .ant-picker:hover {\n            border-color: ${emphasisBorder} !important;\n          }\n          #${id} .ant-picker.ant-picker-focused {\n            border-color: ${emphasisBorder} !important;\n            box-shadow: 0 0 0 2px ${emphasisDeletedSkin ? \"rgba(254,202,202,0.45)\" : emphasisModifiedSkin ? \"rgba(254,223,137,0.45)\" : \"rgba(187,247,208,0.45)\"} !important;\n          }\n          #${id} .ant-picker .ant-picker-input > input {\n            color: ${emphasisDeletedSkin ? \"#475467\" : emphasisSuccessSkin ? \"#101828\" : \"inherit\"};\n          }\n        `}</style>\n      )}\n      <RangePicker\n        ref={normalPickerRef}\n        onChange={onChange}\n        onCalendarChange={onCalendarChange}\n        value={[parseDate(startDate), parseDate(endDate)]}\n        id={{ start: START_ID, end: END_ID }}\n        allowClear\n        format={dateFormat ? dateFormat : \"DD MMM, YYYY\"}\n        separator={\n          <CheckIndeterminateSmallFilledIcon size={20} className='text-neutral-400 dark:text-gray-100' />\n        }\n        suffixIcon={\n          <CalendarMonthIcon size={14} className='text-neutral-400 dark:text-gray-100' />\n        }\n        getPopupContainer={\n          customGetPopupContainer\n            ? customGetPopupContainer\n            : shouldPopOnParent\n              ? (trigger) => trigger.parentElement as HTMLElement\n              : () => document.body\n        }\n        disabled={disabled}\n        disabledDate={maxDateRange ? disabledDate : undefined}\n        open={open ?? isNormalPickerOpen}\n        onOpenChange={handleNormalOpenChange}\n        autoComplete=\"off\"\n        placement={placement}\n      />\n      {errorMessage && (\n        <p\n          className={cn(\n            \"text-sm font-inter font-normal text-left pt-[6px]\",\n            \"text-red-500\"\n          )}\n        >\n          {errorMessage}\n        </p>\n      )}\n    </div>\n  );\n};\n\nDateRange.displayName = \"DateRange\";\n\n"],"names":["RangePicker","DatePicker","KEYBOARD_KEYS","generateShortUUID","useEventListener","eventName","handler","savedHandler","useRef","useEffect","eventListener","event","DateRange","onCalendarChange","onChange","required","label","startDate","endDate","errorMessage","className","id","disabled","dateFormat","shouldPopOnParent","customGetPopupContainer","maxDateRange","open","onOpenChange","placement","renderAsIconButton","iconButtonClassName","iconClassName","labelExtra","inputEmphasis","emphasisModifiedSkin","emphasisDeletedSkin","emphasisSuccessSkin","emphasisBg","emphasisBorder","isOpen","setIsOpen","useState","isNormalPickerOpen","setIsNormalPickerOpen","pickerRef","normalPickerRef","suppressNextIconOpenRef","suppressNextNormalOpenRef","parseDate","str","dayjs","START_ID","END_ID","handleIconClick","date","disabledDate","useCallback","current","start","end","handleKeyDownCapture","form","submitBtn","handleIconPickerOpenChange","nextOpen","handleNormalOpenChange","jsxs","jsx","IconButton","CalendarMonthIcon","cn","dates","CheckIndeterminateSmallFilledIcon","trigger","InputLabel"],"mappings":"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"}