@lax-wp/design-system 0.13.43 → 0.13.45

package/dist/components/dropdown/Dropdown.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),C=require("antd"),p=require("react"),t=require("../../lib/utils.cjs.js"),f=require("../icon/icons.generated.cjs.js");function j(e){return!!e&&!("type"in e)}const O=({items:e,onItemClick:s,minWidth:l=200,onItemSelected:a})=>n.jsx("div",{className:"bg-white dark:bg-black-800 border border-neutral-200 dark:border-black-600 rounded-[8px] shadow flex flex-col gap-1 p-0",style:{minWidth:l},children:e?.map((r,o)=>r?"type"in r&&r.type==="divider"?n.jsx("div",{className:"h-px bg-neutral-200 dark:bg-black-600 mx-1 my-0.5"},r.key??`divider-${o}`):"type"in r&&r.type==="group"?n.jsxs("div",{children:[r.label&&n.jsx("div",{className:"px-3 py-1 text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wide",children:r.label}),r.children?.map((c,x)=>j(c)?n.jsx(k,{item:c,onItemClick:s,onItemSelected:a},c.key??x):null)]},r.key??`group-${o}`):j(r)?n.jsx(k,{item:r,onItemClick:s,onItemSelected:a},r.key??o):null:null)}),k=({item:e,onItemClick:s,isChild:l=!1,onItemSelected:a})=>{const[r,o]=p.useState(e.defaultOpen??!1),[c,x]=p.useState(!1),h=Array.isArray(e.children)&&e.children.length>0,d=h&&e.expandable===!0,i=h&&!e.expandable,v=e.icon!==void 0,w=u=>{if(e.disabled)return;if(d){o(g=>!g);return}const b=String(e.key??"");i||(e.onClick?.({key:b,domEvent:u}),s?.({key:b,keyPath:[b],domEvent:u}),a?.())},E=p.useCallback(()=>{x(!1),a?.()},[a]),M=t.cn("flex items-center justify-between rounded-[4px] cursor-pointer select-none w-full transition-colors duration-100",l?"pl-9 pr-1 min-h-[36px]":"px-0 py-0.5",!v&&"overflow-hidden",e.disabled?"opacity-50 cursor-not-allowed":"",e.className),R=t.cn("flex items-center justify-between gap-3 rounded-[4px] cursor-pointer select-none w-full transition-colors duration-100 dark:bg-black-800",l?"pl-9 pr-1 py-2 min-h-[36px]":"px-3 py-2",e.disabled?"opacity-50 cursor-not-allowed":"",e.className),N=d?n.jsx(f.ExpandMoreFilledIcon,{size:16,className:t.cn("flex-none transition-transform duration-200",r?"rotate-180":"rotate-0")}):i?n.jsx(f.KeyboardArrowRightIcon,{size:16,className:"flex-none"}):null,y=p.isValidElement(e.label)&&e.label.type?.displayName==="OptionButton",S=y&&N?p.cloneElement(e.label,{chevron:N}):e.label,m=v?n.jsxs("div",{className:R,onClick:e.disabled?void 0:w,children:[n.jsxs("div",{className:"flex items-center gap-3 min-w-0 flex-1",children:[n.jsx("span",{className:t.cn("flex-none flex items-center justify-center",l?"size-4":"size-5"),children:e.icon}),n.jsx("span",{className:t.cn("text-sm font-medium leading-5 whitespace-nowrap",e.danger?"text-error-600":"text-neutral-900 dark:text-neutral-100"),children:e.label})]}),d&&n.jsx(f.ExpandMoreFilledIcon,{size:20,className:t.cn("flex-none text-neutral-500 dark:text-neutral-400 transition-transform duration-200",r?"rotate-180":"rotate-0")}),i&&n.jsx(f.KeyboardArrowRightIcon,{size:20,className:"flex-none text-neutral-500 dark:text-neutral-400"})]}):n.jsxs("div",{className:M,onClick:e.disabled?void 0:w,children:[n.jsx("div",{className:t.cn("min-w-0 flex-1"),children:S}),!y&&d&&n.jsx(f.ExpandMoreFilledIcon,{size:16,className:t.cn("flex-none mr-2 text-neutral-500 dark:text-neutral-400 transition-transform duration-200",r?"rotate-180":"rotate-0")}),!y&&i&&n.jsx(f.KeyboardArrowRightIcon,{size:16,className:"flex-none mr-2 text-neutral-500 dark:text-neutral-400"})]});return i?n.jsx(C.Popover,{open:c,onOpenChange:x,content:n.jsx(O,{items:e.children,onItemClick:s,onItemSelected:E}),trigger:"hover",placement:"rightTop",overlayInnerStyle:{padding:0},overlayStyle:{padding:0},arrow:!1,children:n.jsx("div",{children:m})}):n.jsxs("div",{children:[m,d&&n.jsx("div",{className:t.cn("grid transition-[grid-template-rows] duration-200 ease-in-out",r?"grid-rows-[1fr]":"grid-rows-[0fr]"),children:n.jsx("div",{className:"overflow-hidden",children:n.jsx("div",{className:"flex flex-col",children:e.children?.map((u,b)=>{if(!u||!j(u))return null;const g=b===(e.children?.length??0)-1;return n.jsxs("div",{className:"relative",children:[n.jsx("div",{className:"absolute left-[19px] top-0 w-3.5 border-l border-b border-neutral-200 dark:border-black-600 rounded-bl-[6px] pointer-events-none",style:{height:"calc(50% + 4px)"}}),!g&&n.jsx("div",{className:"absolute left-[19px] top-1/2 bottom-0 w-px bg-neutral-200 dark:bg-black-600 pointer-events-none"}),n.jsx(k,{item:u,onItemClick:s,isChild:!0,onItemSelected:a})]},u.key??b)})})})})]})},z=({children:e,menu:s,minWidth:l=200,onOpenChange:a,...r})=>{const[o,c]=p.useState(0),x=(d,i)=>{d||c(v=>v+1),a?.(d,i)},h=p.useCallback(()=>n.jsx(O,{items:s?.items,onItemClick:s?.onClick,minWidth:l},o),[s?.items,s?.onClick,l,o]);return n.jsx(C.Dropdown,{...r,onOpenChange:x,popupRender:h,children:e})};exports.Dropdown=z;exports.default=z;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),C=require("antd"),p=require("react"),t=require("../../lib/utils.cjs.js"),f=require("../icon/icons.generated.cjs.js");function j(e){return!!e&&!("type"in e)}const O=({items:e,onItemClick:s,minWidth:l=200,onItemSelected:a})=>n.jsx("div",{className:"bg-white dark:bg-black-800 border border-neutral-200 dark:border-black-600 rounded-[8px] shadow flex flex-col p-0 border-none overflow-hidden",style:{minWidth:l},children:e?.map((r,o)=>r?"type"in r&&r.type==="divider"?n.jsx("div",{className:"h-px bg-neutral-200 dark:bg-black-600 mx-1 my-0.5"},r.key??`divider-${o}`):"type"in r&&r.type==="group"?n.jsxs("div",{children:[r.label&&n.jsx("div",{className:"px-3 py-1 text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wide",children:r.label}),r.children?.map((c,x)=>j(c)?n.jsx(k,{item:c,onItemClick:s,onItemSelected:a},c.key??x):null)]},r.key??`group-${o}`):j(r)?n.jsx(k,{item:r,onItemClick:s,onItemSelected:a},r.key??o):null:null)}),k=({item:e,onItemClick:s,isChild:l=!1,onItemSelected:a})=>{const[r,o]=p.useState(e.defaultOpen??!1),[c,x]=p.useState(!1),h=Array.isArray(e.children)&&e.children.length>0,d=h&&e.expandable===!0,i=h&&!e.expandable,v=e.icon!==void 0,w=u=>{if(e.disabled)return;if(d){o(g=>!g);return}const b=String(e.key??"");i||(e.onClick?.({key:b,domEvent:u}),s?.({key:b,keyPath:[b],domEvent:u}),a?.())},E=p.useCallback(()=>{x(!1),a?.()},[a]),M=t.cn("flex items-center justify-between rounded-[4px] cursor-pointer select-none w-full transition-colors duration-100",l?"pl-9 pr-1 min-h-[36px]":"px-0 py-0.5",!v&&"overflow-hidden",e.disabled?"opacity-50 cursor-not-allowed":"",e.className),R=t.cn("flex items-center justify-between gap-3 rounded-[4px] cursor-pointer select-none w-full transition-colors duration-100 dark:bg-black-800",l?"pl-9 pr-1 py-2 min-h-[36px]":"px-3 py-2",e.disabled?"opacity-50 cursor-not-allowed":"",e.className),N=d?n.jsx(f.ExpandMoreFilledIcon,{size:16,className:t.cn("flex-none transition-transform duration-200",r?"rotate-180":"rotate-0")}):i?n.jsx(f.KeyboardArrowRightIcon,{size:16,className:"flex-none"}):null,y=p.isValidElement(e.label)&&e.label.type?.displayName==="OptionButton",S=y&&N?p.cloneElement(e.label,{chevron:N}):e.label,m=v?n.jsxs("div",{className:R,onClick:e.disabled?void 0:w,children:[n.jsxs("div",{className:"flex items-center gap-3 min-w-0 flex-1",children:[n.jsx("span",{className:t.cn("flex-none flex items-center justify-center",l?"size-4":"size-5"),children:e.icon}),n.jsx("span",{className:t.cn("text-sm font-medium leading-5 whitespace-nowrap",e.danger?"text-error-600":"text-neutral-900 dark:text-neutral-100"),children:e.label})]}),d&&n.jsx(f.ExpandMoreFilledIcon,{size:20,className:t.cn("flex-none text-neutral-500 dark:text-neutral-400 transition-transform duration-200",r?"rotate-180":"rotate-0")}),i&&n.jsx(f.KeyboardArrowRightIcon,{size:20,className:"flex-none text-neutral-500 dark:text-neutral-400"})]}):n.jsxs("div",{className:M,onClick:e.disabled?void 0:w,children:[n.jsx("div",{className:t.cn("min-w-0 flex-1"),children:S}),!y&&d&&n.jsx(f.ExpandMoreFilledIcon,{size:16,className:t.cn("flex-none mr-2 text-neutral-500 dark:text-neutral-400 transition-transform duration-200",r?"rotate-180":"rotate-0")}),!y&&i&&n.jsx(f.KeyboardArrowRightIcon,{size:16,className:"flex-none mr-2 text-neutral-500 dark:text-neutral-400"})]});return i?n.jsx(C.Popover,{open:c,onOpenChange:x,content:n.jsx(O,{items:e.children,onItemClick:s,onItemSelected:E}),trigger:"hover",placement:"rightTop",overlayInnerStyle:{padding:0},overlayStyle:{padding:0},arrow:!1,children:n.jsx("div",{children:m})}):n.jsxs("div",{children:[m,d&&n.jsx("div",{className:t.cn("grid transition-[grid-template-rows] duration-200 ease-in-out",r?"grid-rows-[1fr]":"grid-rows-[0fr]"),children:n.jsx("div",{className:"overflow-hidden",children:n.jsx("div",{className:"flex flex-col",children:e.children?.map((u,b)=>{if(!u||!j(u))return null;const g=b===(e.children?.length??0)-1;return n.jsxs("div",{className:"relative",children:[n.jsx("div",{className:"absolute left-[19px] top-0 w-3.5 border-l border-b border-neutral-200 dark:border-black-600 rounded-bl-[6px] pointer-events-none",style:{height:"calc(50% + 4px)"}}),!g&&n.jsx("div",{className:"absolute left-[19px] top-1/2 bottom-0 w-px bg-neutral-200 dark:bg-black-600 pointer-events-none"}),n.jsx(k,{item:u,onItemClick:s,isChild:!0,onItemSelected:a})]},u.key??b)})})})})]})},z=({children:e,menu:s,minWidth:l=200,onOpenChange:a,...r})=>{const[o,c]=p.useState(0),x=(d,i)=>{d||c(v=>v+1),a?.(d,i)},h=p.useCallback(()=>n.jsx(O,{items:s?.items,onItemClick:s?.onClick,minWidth:l},o),[s?.items,s?.onClick,l,o]);return n.jsx(C.Dropdown,{...r,onOpenChange:x,popupRender:h,children:e})};exports.Dropdown=z;exports.default=z;
 //# sourceMappingURL=Dropdown.cjs.js.map

package/dist/components/dropdown/Dropdown.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.cjs.js","sources":["../../../src/components/dropdown/Dropdown.tsx"],"sourcesContent":["import { Dropdown as AntDropdown, Popover } from 'antd';\nimport type { DropdownProps as AntDropdownProps } from 'antd';\nimport React, { useCallback, useState } from 'react';\nimport { cn } from '../../lib/utils';\nimport {\n  ExpandMoreFilledIcon,\n  KeyboardArrowRightIcon,\n} from '../icon';\n\n// ─── Item Types ──────────────────────────────────────────────────────────────\n\nexport interface DropdownMenuItemDef {\n  key?: string | number;\n  label?: React.ReactNode;\n  /** Icon displayed before the label (enables native rendering mode). */\n  icon?: React.ReactNode;\n  disabled?: boolean;\n  /** Renders label in error-600 color. */\n  danger?: boolean;\n  className?: string;\n  onClick?: (info: { key: string; domEvent: React.MouseEvent }) => void;\n  children?: DropdownItemDef[];\n  /**\n   * When `true` and `children` is provided, items expand inline below the\n   * parent rather than opening a side-panel popup. Defaults to `false`.\n   */\n  expandable?: boolean;\n  /** When `expandable` is true, controls the initial open state. */\n  defaultOpen?: boolean;\n}\n\nexport interface DropdownDividerDef {\n  type: 'divider';\n  key?: string | number;\n  dashed?: boolean;\n}\n\nexport interface DropdownGroupDef {\n  type: 'group';\n  key?: string | number;\n  label?: React.ReactNode;\n  children?: DropdownItemDef[];\n}\n\nexport type DropdownItemDef =\n  | DropdownMenuItemDef\n  | DropdownDividerDef\n  | DropdownGroupDef\n  | null\n  | undefined;\n\nexport interface DropdownMenuConfig {\n  items?: DropdownItemDef[];\n  onClick?: (info: {\n    key: string;\n    keyPath: string[];\n    domEvent: React.MouseEvent;\n  }) => void;\n  [key: string]: unknown;\n}\n\nexport interface DropdownProps\n  extends Omit<AntDropdownProps, 'overlay' | 'dropdownRender' | 'menu'> {\n  menu?: DropdownMenuConfig;\n  /** Minimum width of the dropdown panel in pixels. Defaults to 200. */\n  minWidth?: number;\n}\n\n// ─── Internal helpers ────────────────────────────────────────────────────────\n\nfunction isMenuItemDef(item: DropdownItemDef): item is DropdownMenuItemDef {\n  return !!item && !('type' in item);\n}\n\n// ─── DropdownMenuPanel ────────────────────────────────────────────────────────\n\ninterface DropdownMenuPanelProps {\n  items?: DropdownItemDef[];\n  onItemClick?: DropdownMenuConfig['onClick'];\n  minWidth?: number;\n  /** Fires after a leaf item is clicked. Used to close ancestor popovers. */\n  onItemSelected?: () => void;\n}\n\nconst DropdownMenuPanel: React.FC<DropdownMenuPanelProps> = ({\n  items,\n  onItemClick,\n  minWidth = 200,\n  onItemSelected,\n}) => {\n  return (\n    <div\n      className='bg-white dark:bg-black-800 border border-neutral-200 dark:border-black-600 rounded-[8px] shadow flex flex-col gap-1 p-0'\n      style={{ minWidth }}\n    >\n      {items?.map((item, idx) => {\n        if (!item) return null;\n\n        if ('type' in item && item.type === 'divider') {\n          return (\n            <div\n              key={item.key ?? `divider-${idx}`}\n              className='h-px bg-neutral-200 dark:bg-black-600 mx-1 my-0.5'\n            />\n          );\n        }\n\n        if ('type' in item && item.type === 'group') {\n          return (\n            <div key={item.key ?? `group-${idx}`}>\n              {item.label && (\n                <div className='px-3 py-1 text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wide'>\n                  {item.label}\n                </div>\n              )}\n              {item.children?.map((child, childIdx) =>\n                isMenuItemDef(child) ? (\n                  <DropdownMenuItemRow\n                    key={(child as DropdownMenuItemDef).key ?? childIdx}\n                    item={child}\n                    onItemClick={onItemClick}\n                    onItemSelected={onItemSelected}\n                  />\n                ) : null,\n              )}\n            </div>\n          );\n        }\n\n        if (isMenuItemDef(item)) {\n          return (\n            <DropdownMenuItemRow\n              key={item.key ?? idx}\n              item={item}\n              onItemClick={onItemClick}\n              onItemSelected={onItemSelected}\n            />\n          );\n        }\n\n        return null;\n      })}\n    </div>\n  );\n};\n\n// ─── DropdownMenuItemRow ─────────────────────────────────────────────────────\n\ninterface DropdownMenuItemRowProps {\n  item: DropdownMenuItemDef;\n  onItemClick?: DropdownMenuConfig['onClick'];\n  isChild?: boolean;\n  /** Closes the enclosing popover. Propagates upward through nested submenus. */\n  onItemSelected?: () => void;\n}\n\nconst DropdownMenuItemRow: React.FC<DropdownMenuItemRowProps> = ({\n  item,\n  onItemClick,\n  isChild = false,\n  onItemSelected,\n}) => {\n  const [expanded, setExpanded] = useState(item.defaultOpen ?? false);\n  const [popoverOpen, setPopoverOpen] = useState(false);\n\n  const hasChildren =\n    Array.isArray(item.children) && item.children.length > 0;\n  const isCollapsable = hasChildren && item.expandable === true;\n  const isSubmenu = hasChildren && !item.expandable;\n  const isNative = item.icon !== undefined;\n\n  const handleClick = (e: React.MouseEvent) => {\n    if (item.disabled) return;\n\n    if (isCollapsable) {\n      setExpanded((prev) => !prev);\n      return;\n    }\n\n    const key = String(item.key ?? '');\n    if (!isSubmenu) {\n      item.onClick?.({ key, domEvent: e });\n      onItemClick?.({ key, keyPath: [key], domEvent: e });\n      onItemSelected?.();\n    }\n  };\n\n  const handleChildSelected = useCallback(() => {\n    setPopoverOpen(false);\n    onItemSelected?.();\n  }, [onItemSelected]);\n\n  const containerClasses = cn(\n    'flex items-center justify-between rounded-[4px] cursor-pointer select-none w-full transition-colors duration-100',\n    isChild ? 'pl-9 pr-1 min-h-[36px]' : 'px-0 py-0.5',\n    !isNative && 'overflow-hidden',\n    item.disabled ? 'opacity-50 cursor-not-allowed' : '',\n    item.className,\n  );\n\n  const nativeContainerClasses = cn(\n    'flex items-center justify-between gap-3 rounded-[4px] cursor-pointer select-none w-full transition-colors duration-100 dark:bg-black-800',\n    isChild ? 'pl-9 pr-1 py-2 min-h-[36px]' : 'px-3 py-2',\n    item.disabled ? 'opacity-50 cursor-not-allowed' : '',\n    item.className,\n  );\n\n  const compatChevron = isCollapsable ? (\n    <ExpandMoreFilledIcon\n      size={16}\n      className={cn(\n        'flex-none transition-transform duration-200',\n        expanded ? 'rotate-180' : 'rotate-0',\n      )}\n    />\n  ) : isSubmenu ? (\n    <KeyboardArrowRightIcon size={16} className='flex-none' />\n  ) : null;\n\n  const compatLabelIsOptionButton =\n    React.isValidElement(item.label) &&\n    (item.label.type as { displayName?: string })?.displayName === 'OptionButton';\n\n  const compatLabelNode =\n    compatLabelIsOptionButton && compatChevron\n      ? React.cloneElement(item.label as React.ReactElement<{ chevron?: React.ReactNode }>, {\n          chevron: compatChevron,\n        })\n      : item.label;\n\n  const itemContent = isNative ? (\n    // Native rendering: icon + label + optional indicator\n    <div className={nativeContainerClasses} onClick={!item.disabled ? handleClick : undefined}>\n      <div className='flex items-center gap-3 min-w-0 flex-1'>\n        <span\n          className={cn(\n            'flex-none flex items-center justify-center',\n            isChild ? 'size-4' : 'size-5',\n          )}\n        >\n          {item.icon}\n        </span>\n        <span\n          className={cn(\n            'text-sm font-medium leading-5 whitespace-nowrap',\n            item.danger\n              ? 'text-error-600'\n              : 'text-neutral-900 dark:text-neutral-100',\n          )}\n        >\n          {item.label}\n        </span>\n      </div>\n\n      {isCollapsable && (\n        <ExpandMoreFilledIcon\n          size={20}\n          className={cn(\n            'flex-none text-neutral-500 dark:text-neutral-400 transition-transform duration-200',\n            expanded ? 'rotate-180' : 'rotate-0',\n          )}\n        />\n      )}\n      {isSubmenu && (\n        <KeyboardArrowRightIcon\n          size={20}\n          className='flex-none text-neutral-500 dark:text-neutral-400'\n        />\n      )}\n    </div>\n  ) : (\n    // Compat rendering: label is a fully rendered node (e.g. OptionButton).\n    // For OptionButton labels we inject the chevron as a prop so it sits inside\n    // the button's hover area; for any other node we fall back to a sibling chevron.\n    <div className={containerClasses} onClick={!item.disabled ? handleClick : undefined}>\n      <div className={cn('min-w-0 flex-1')}>{compatLabelNode}</div>\n      {!compatLabelIsOptionButton && isCollapsable && (\n        <ExpandMoreFilledIcon\n          size={16}\n          className={cn(\n            'flex-none mr-2 text-neutral-500 dark:text-neutral-400 transition-transform duration-200',\n            expanded ? 'rotate-180' : 'rotate-0',\n          )}\n        />\n      )}\n      {!compatLabelIsOptionButton && isSubmenu && (\n        <KeyboardArrowRightIcon\n          size={16}\n          className='flex-none mr-2 text-neutral-500 dark:text-neutral-400'\n        />\n      )}\n    </div>\n  );\n\n  if (isSubmenu) {\n    return (\n      <Popover\n        open={popoverOpen}\n        onOpenChange={setPopoverOpen}\n        content={\n          <DropdownMenuPanel\n            items={item.children}\n            onItemClick={onItemClick}\n            onItemSelected={handleChildSelected}\n          />\n        }\n        trigger='hover'\n        placement='rightTop'\n        overlayInnerStyle={{ padding: 0 }}\n        overlayStyle={{ padding: 0 }}\n        arrow={false}\n      >\n        <div>{itemContent}</div>\n      </Popover>\n    );\n  }\n\n  return (\n    <div>\n      {itemContent}\n      {isCollapsable && (\n        <div\n          className={cn(\n            'grid transition-[grid-template-rows] duration-200 ease-in-out',\n            expanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',\n          )}\n        >\n          <div className='overflow-hidden'>\n            <div className='flex flex-col'>\n              {item.children?.map((child, idx) => {\n                if (!child || !isMenuItemDef(child)) return null;\n                const isLast = idx === (item.children?.length ?? 0) - 1;\n                return (\n                  <div key={(child as DropdownMenuItemDef).key ?? idx} className='relative'>\n                    {/* L-shaped connector: vertical segment from top to row midpoint, curves right */}\n                    <div\n                      className='absolute left-[19px] top-0 w-3.5 border-l border-b border-neutral-200 dark:border-black-600 rounded-bl-[6px] pointer-events-none'\n                      style={{ height: 'calc(50% + 4px)' }}\n                    />\n                    {/* Vertical bridge down to next sibling */}\n                    {!isLast && (\n                      <div className='absolute left-[19px] top-1/2 bottom-0 w-px bg-neutral-200 dark:bg-black-600 pointer-events-none' />\n                    )}\n                    <DropdownMenuItemRow\n                      item={child as DropdownMenuItemDef}\n                      onItemClick={onItemClick}\n                      isChild\n                      onItemSelected={onItemSelected}\n                    />\n                  </div>\n                );\n              })}\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\n// ─── Dropdown ────────────────────────────────────────────────────────────────\n\nexport const Dropdown: React.FC<DropdownProps> = ({\n  children,\n  menu,\n  minWidth = 200,\n  onOpenChange,\n  ...rest\n}) => {\n  const [remountKey, setRemountKey] = useState(0);\n\n  const handleOpenChange: AntDropdownProps['onOpenChange'] = (open, info) => {\n    if (!open) {\n      // Force-remount the panel on close so nested collapsible/submenu\n      // open state is reset the next time the dropdown is opened.\n      setRemountKey((k) => k + 1);\n    }\n    onOpenChange?.(open, info);\n  };\n\n  const popupRender = useCallback(\n    () => (\n      <DropdownMenuPanel\n        key={remountKey}\n        items={menu?.items as DropdownItemDef[]}\n        onItemClick={menu?.onClick as DropdownMenuConfig['onClick']}\n        minWidth={minWidth}\n      />\n    ),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [menu?.items, menu?.onClick, minWidth, remountKey],\n  );\n\n  return (\n    <AntDropdown\n      {...rest}\n      onOpenChange={handleOpenChange}\n      popupRender={popupRender}\n    >\n      {children as React.ReactElement}\n    </AntDropdown>\n  );\n};\n\nexport default Dropdown;\n"],"names":["isMenuItemDef","item","DropdownMenuPanel","items","onItemClick","minWidth","onItemSelected","jsx","idx","child","childIdx","DropdownMenuItemRow","isChild","expanded","setExpanded","useState","popoverOpen","setPopoverOpen","hasChildren","isCollapsable","isSubmenu","isNative","handleClick","e","prev","key","handleChildSelected","useCallback","containerClasses","cn","nativeContainerClasses","compatChevron","ExpandMoreFilledIcon","KeyboardArrowRightIcon","compatLabelIsOptionButton","React","compatLabelNode","itemContent","jsxs","Popover","isLast","Dropdown","children","menu","onOpenChange","rest","remountKey","setRemountKey","handleOpenChange","open","info","k","popupRender","AntDropdown"],"mappings":"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"}
+{"version":3,"file":"Dropdown.cjs.js","sources":["../../../src/components/dropdown/Dropdown.tsx"],"sourcesContent":["import { Dropdown as AntDropdown, Popover } from 'antd';\nimport type { DropdownProps as AntDropdownProps } from 'antd';\nimport React, { useCallback, useState } from 'react';\nimport { cn } from '../../lib/utils';\nimport {\n  ExpandMoreFilledIcon,\n  KeyboardArrowRightIcon,\n} from '../icon';\n\n// ─── Item Types ──────────────────────────────────────────────────────────────\n\nexport interface DropdownMenuItemDef {\n  key?: string | number;\n  label?: React.ReactNode;\n  /** Icon displayed before the label (enables native rendering mode). */\n  icon?: React.ReactNode;\n  disabled?: boolean;\n  /** Renders label in error-600 color. */\n  danger?: boolean;\n  className?: string;\n  onClick?: (info: { key: string; domEvent: React.MouseEvent }) => void;\n  children?: DropdownItemDef[];\n  /**\n   * When `true` and `children` is provided, items expand inline below the\n   * parent rather than opening a side-panel popup. Defaults to `false`.\n   */\n  expandable?: boolean;\n  /** When `expandable` is true, controls the initial open state. */\n  defaultOpen?: boolean;\n}\n\nexport interface DropdownDividerDef {\n  type: 'divider';\n  key?: string | number;\n  dashed?: boolean;\n}\n\nexport interface DropdownGroupDef {\n  type: 'group';\n  key?: string | number;\n  label?: React.ReactNode;\n  children?: DropdownItemDef[];\n}\n\nexport type DropdownItemDef =\n  | DropdownMenuItemDef\n  | DropdownDividerDef\n  | DropdownGroupDef\n  | null\n  | undefined;\n\nexport interface DropdownMenuConfig {\n  items?: DropdownItemDef[];\n  onClick?: (info: {\n    key: string;\n    keyPath: string[];\n    domEvent: React.MouseEvent;\n  }) => void;\n  [key: string]: unknown;\n}\n\nexport interface DropdownProps\n  extends Omit<AntDropdownProps, 'overlay' | 'dropdownRender' | 'menu'> {\n  menu?: DropdownMenuConfig;\n  /** Minimum width of the dropdown panel in pixels. Defaults to 200. */\n  minWidth?: number;\n}\n\n// ─── Internal helpers ────────────────────────────────────────────────────────\n\nfunction isMenuItemDef(item: DropdownItemDef): item is DropdownMenuItemDef {\n  return !!item && !('type' in item);\n}\n\n// ─── DropdownMenuPanel ────────────────────────────────────────────────────────\n\ninterface DropdownMenuPanelProps {\n  items?: DropdownItemDef[];\n  onItemClick?: DropdownMenuConfig['onClick'];\n  minWidth?: number;\n  /** Fires after a leaf item is clicked. Used to close ancestor popovers. */\n  onItemSelected?: () => void;\n}\n\nconst DropdownMenuPanel: React.FC<DropdownMenuPanelProps> = ({\n  items,\n  onItemClick,\n  minWidth = 200,\n  onItemSelected,\n}) => {\n  return (\n    <div\n      className='bg-white dark:bg-black-800 border border-neutral-200 dark:border-black-600 rounded-[8px] shadow flex flex-col p-0 border-none overflow-hidden'\n      style={{ minWidth }}\n    >\n      {items?.map((item, idx) => {\n        if (!item) return null;\n\n        if ('type' in item && item.type === 'divider') {\n          return (\n            <div\n              key={item.key ?? `divider-${idx}`}\n              className='h-px bg-neutral-200 dark:bg-black-600 mx-1 my-0.5'\n            />\n          );\n        }\n\n        if ('type' in item && item.type === 'group') {\n          return (\n            <div key={item.key ?? `group-${idx}`}>\n              {item.label && (\n                <div className='px-3 py-1 text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wide'>\n                  {item.label}\n                </div>\n              )}\n              {item.children?.map((child, childIdx) =>\n                isMenuItemDef(child) ? (\n                  <DropdownMenuItemRow\n                    key={(child as DropdownMenuItemDef).key ?? childIdx}\n                    item={child}\n                    onItemClick={onItemClick}\n                    onItemSelected={onItemSelected}\n                  />\n                ) : null,\n              )}\n            </div>\n          );\n        }\n\n        if (isMenuItemDef(item)) {\n          return (\n            <DropdownMenuItemRow\n              key={item.key ?? idx}\n              item={item}\n              onItemClick={onItemClick}\n              onItemSelected={onItemSelected}\n            />\n          );\n        }\n\n        return null;\n      })}\n    </div>\n  );\n};\n\n// ─── DropdownMenuItemRow ─────────────────────────────────────────────────────\n\ninterface DropdownMenuItemRowProps {\n  item: DropdownMenuItemDef;\n  onItemClick?: DropdownMenuConfig['onClick'];\n  isChild?: boolean;\n  /** Closes the enclosing popover. Propagates upward through nested submenus. */\n  onItemSelected?: () => void;\n}\n\nconst DropdownMenuItemRow: React.FC<DropdownMenuItemRowProps> = ({\n  item,\n  onItemClick,\n  isChild = false,\n  onItemSelected,\n}) => {\n  const [expanded, setExpanded] = useState(item.defaultOpen ?? false);\n  const [popoverOpen, setPopoverOpen] = useState(false);\n\n  const hasChildren =\n    Array.isArray(item.children) && item.children.length > 0;\n  const isCollapsable = hasChildren && item.expandable === true;\n  const isSubmenu = hasChildren && !item.expandable;\n  const isNative = item.icon !== undefined;\n\n  const handleClick = (e: React.MouseEvent) => {\n    if (item.disabled) return;\n\n    if (isCollapsable) {\n      setExpanded((prev) => !prev);\n      return;\n    }\n\n    const key = String(item.key ?? '');\n    if (!isSubmenu) {\n      item.onClick?.({ key, domEvent: e });\n      onItemClick?.({ key, keyPath: [key], domEvent: e });\n      onItemSelected?.();\n    }\n  };\n\n  const handleChildSelected = useCallback(() => {\n    setPopoverOpen(false);\n    onItemSelected?.();\n  }, [onItemSelected]);\n\n  const containerClasses = cn(\n    'flex items-center justify-between rounded-[4px] cursor-pointer select-none w-full transition-colors duration-100',\n    isChild ? 'pl-9 pr-1 min-h-[36px]' : 'px-0 py-0.5',\n    !isNative && 'overflow-hidden',\n    item.disabled ? 'opacity-50 cursor-not-allowed' : '',\n    item.className,\n  );\n\n  const nativeContainerClasses = cn(\n    'flex items-center justify-between gap-3 rounded-[4px] cursor-pointer select-none w-full transition-colors duration-100 dark:bg-black-800',\n    isChild ? 'pl-9 pr-1 py-2 min-h-[36px]' : 'px-3 py-2',\n    item.disabled ? 'opacity-50 cursor-not-allowed' : '',\n    item.className,\n  );\n\n  const compatChevron = isCollapsable ? (\n    <ExpandMoreFilledIcon\n      size={16}\n      className={cn(\n        'flex-none transition-transform duration-200',\n        expanded ? 'rotate-180' : 'rotate-0',\n      )}\n    />\n  ) : isSubmenu ? (\n    <KeyboardArrowRightIcon size={16} className='flex-none' />\n  ) : null;\n\n  const compatLabelIsOptionButton =\n    React.isValidElement(item.label) &&\n    (item.label.type as { displayName?: string })?.displayName === 'OptionButton';\n\n  const compatLabelNode =\n    compatLabelIsOptionButton && compatChevron\n      ? React.cloneElement(item.label as React.ReactElement<{ chevron?: React.ReactNode }>, {\n          chevron: compatChevron,\n        })\n      : item.label;\n\n  const itemContent = isNative ? (\n    // Native rendering: icon + label + optional indicator\n    <div className={nativeContainerClasses} onClick={!item.disabled ? handleClick : undefined}>\n      <div className='flex items-center gap-3 min-w-0 flex-1'>\n        <span\n          className={cn(\n            'flex-none flex items-center justify-center',\n            isChild ? 'size-4' : 'size-5',\n          )}\n        >\n          {item.icon}\n        </span>\n        <span\n          className={cn(\n            'text-sm font-medium leading-5 whitespace-nowrap',\n            item.danger\n              ? 'text-error-600'\n              : 'text-neutral-900 dark:text-neutral-100',\n          )}\n        >\n          {item.label}\n        </span>\n      </div>\n\n      {isCollapsable && (\n        <ExpandMoreFilledIcon\n          size={20}\n          className={cn(\n            'flex-none text-neutral-500 dark:text-neutral-400 transition-transform duration-200',\n            expanded ? 'rotate-180' : 'rotate-0',\n          )}\n        />\n      )}\n      {isSubmenu && (\n        <KeyboardArrowRightIcon\n          size={20}\n          className='flex-none text-neutral-500 dark:text-neutral-400'\n        />\n      )}\n    </div>\n  ) : (\n    // Compat rendering: label is a fully rendered node (e.g. OptionButton).\n    // For OptionButton labels we inject the chevron as a prop so it sits inside\n    // the button's hover area; for any other node we fall back to a sibling chevron.\n    <div className={containerClasses} onClick={!item.disabled ? handleClick : undefined}>\n      <div className={cn('min-w-0 flex-1')}>{compatLabelNode}</div>\n      {!compatLabelIsOptionButton && isCollapsable && (\n        <ExpandMoreFilledIcon\n          size={16}\n          className={cn(\n            'flex-none mr-2 text-neutral-500 dark:text-neutral-400 transition-transform duration-200',\n            expanded ? 'rotate-180' : 'rotate-0',\n          )}\n        />\n      )}\n      {!compatLabelIsOptionButton && isSubmenu && (\n        <KeyboardArrowRightIcon\n          size={16}\n          className='flex-none mr-2 text-neutral-500 dark:text-neutral-400'\n        />\n      )}\n    </div>\n  );\n\n  if (isSubmenu) {\n    return (\n      <Popover\n        open={popoverOpen}\n        onOpenChange={setPopoverOpen}\n        content={\n          <DropdownMenuPanel\n            items={item.children}\n            onItemClick={onItemClick}\n            onItemSelected={handleChildSelected}\n          />\n        }\n        trigger='hover'\n        placement='rightTop'\n        overlayInnerStyle={{ padding: 0 }}\n        overlayStyle={{ padding: 0 }}\n        arrow={false}\n      >\n        <div>{itemContent}</div>\n      </Popover>\n    );\n  }\n\n  return (\n    <div>\n      {itemContent}\n      {isCollapsable && (\n        <div\n          className={cn(\n            'grid transition-[grid-template-rows] duration-200 ease-in-out',\n            expanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',\n          )}\n        >\n          <div className='overflow-hidden'>\n            <div className='flex flex-col'>\n              {item.children?.map((child, idx) => {\n                if (!child || !isMenuItemDef(child)) return null;\n                const isLast = idx === (item.children?.length ?? 0) - 1;\n                return (\n                  <div key={(child as DropdownMenuItemDef).key ?? idx} className='relative'>\n                    {/* L-shaped connector: vertical segment from top to row midpoint, curves right */}\n                    <div\n                      className='absolute left-[19px] top-0 w-3.5 border-l border-b border-neutral-200 dark:border-black-600 rounded-bl-[6px] pointer-events-none'\n                      style={{ height: 'calc(50% + 4px)' }}\n                    />\n                    {/* Vertical bridge down to next sibling */}\n                    {!isLast && (\n                      <div className='absolute left-[19px] top-1/2 bottom-0 w-px bg-neutral-200 dark:bg-black-600 pointer-events-none' />\n                    )}\n                    <DropdownMenuItemRow\n                      item={child as DropdownMenuItemDef}\n                      onItemClick={onItemClick}\n                      isChild\n                      onItemSelected={onItemSelected}\n                    />\n                  </div>\n                );\n              })}\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\n// ─── Dropdown ────────────────────────────────────────────────────────────────\n\nexport const Dropdown: React.FC<DropdownProps> = ({\n  children,\n  menu,\n  minWidth = 200,\n  onOpenChange,\n  ...rest\n}) => {\n  const [remountKey, setRemountKey] = useState(0);\n\n  const handleOpenChange: AntDropdownProps['onOpenChange'] = (open, info) => {\n    if (!open) {\n      // Force-remount the panel on close so nested collapsible/submenu\n      // open state is reset the next time the dropdown is opened.\n      setRemountKey((k) => k + 1);\n    }\n    onOpenChange?.(open, info);\n  };\n\n  const popupRender = useCallback(\n    () => (\n      <DropdownMenuPanel\n        key={remountKey}\n        items={menu?.items as DropdownItemDef[]}\n        onItemClick={menu?.onClick as DropdownMenuConfig['onClick']}\n        minWidth={minWidth}\n      />\n    ),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [menu?.items, menu?.onClick, minWidth, remountKey],\n  );\n\n  return (\n    <AntDropdown\n      {...rest}\n      onOpenChange={handleOpenChange}\n      popupRender={popupRender}\n    >\n      {children as React.ReactElement}\n    </AntDropdown>\n  );\n};\n\nexport default Dropdown;\n"],"names":["isMenuItemDef","item","DropdownMenuPanel","items","onItemClick","minWidth","onItemSelected","jsx","idx","child","childIdx","DropdownMenuItemRow","isChild","expanded","setExpanded","useState","popoverOpen","setPopoverOpen","hasChildren","isCollapsable","isSubmenu","isNative","handleClick","e","prev","key","handleChildSelected","useCallback","containerClasses","cn","nativeContainerClasses","compatChevron","ExpandMoreFilledIcon","KeyboardArrowRightIcon","compatLabelIsOptionButton","React","compatLabelNode","itemContent","jsxs","Popover","isLast","Dropdown","children","menu","onOpenChange","rest","remountKey","setRemountKey","handleOpenChange","open","info","k","popupRender","AntDropdown"],"mappings":"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"}

package/dist/components/dropdown/Dropdown.es.js

@@ -1,8 +1,8 @@
 import { jsx as n, jsxs as x } from "react/jsx-runtime";
 import { Dropdown as K, Popover as L } from "antd";
-import D, { useState as m, useCallback as E } from "react";
+import D, { useState as g, useCallback as E } from "react";
 import { cn as l } from "../../lib/utils.es.js";
-import { ExpandMoreFilledIcon as g, KeyboardArrowRightIcon as k } from "../icon/icons.generated.es.js";
+import { ExpandMoreFilledIcon as k, KeyboardArrowRightIcon as m } from "../icon/icons.generated.es.js";
 function w(e) {
   return !!e && !("type" in e);
 }
@@ -14,7 +14,7 @@ const j = ({
 }) => /* @__PURE__ */ n(
   "div",
   {
-    className: "bg-white dark:bg-black-800 border border-neutral-200 dark:border-black-600 rounded-[8px] shadow flex flex-col gap-1 p-0",
+    className: "bg-white dark:bg-black-800 border border-neutral-200 dark:border-black-600 rounded-[8px] shadow flex flex-col p-0 border-none overflow-hidden",
     style: { minWidth: o },
     children: e?.map((r, s) => r ? "type" in r && r.type === "divider" ? /* @__PURE__ */ n(
       "div",
@@ -51,7 +51,7 @@ const j = ({
   isChild: o = !1,
   onItemSelected: t
 }) => {
-  const [r, s] = m(e.defaultOpen ?? !1), [i, u] = m(!1), b = Array.isArray(e.children) && e.children.length > 0, d = b && e.expandable === !0, c = b && !e.expandable, h = e.icon !== void 0, C = (p) => {
+  const [r, s] = g(e.defaultOpen ?? !1), [i, u] = g(!1), b = Array.isArray(e.children) && e.children.length > 0, d = b && e.expandable === !0, c = b && !e.expandable, h = e.icon !== void 0, C = (p) => {
     if (e.disabled) return;
     if (d) {
       s((y) => !y);
@@ -73,7 +73,7 @@ const j = ({
     e.disabled ? "opacity-50 cursor-not-allowed" : "",
     e.className
   ), z = d ? /* @__PURE__ */ n(
-    g,
+    k,
     {
       size: 16,
       className: l(
@@ -81,7 +81,7 @@ const j = ({
         r ? "rotate-180" : "rotate-0"
       )
     }
-  ) : c ? /* @__PURE__ */ n(k, { size: 16, className: "flex-none" }) : null, v = D.isValidElement(e.label) && e.label.type?.displayName === "OptionButton", A = v && z ? D.cloneElement(e.label, {
+  ) : c ? /* @__PURE__ */ n(m, { size: 16, className: "flex-none" }) : null, v = D.isValidElement(e.label) && e.label.type?.displayName === "OptionButton", A = v && z ? D.cloneElement(e.label, {
     chevron: z
   }) : e.label, O = h ? (
     // Native rendering: icon + label + optional indicator
@@ -109,7 +109,7 @@ const j = ({
         )
       ] }),
       d && /* @__PURE__ */ n(
-        g,
+        k,
         {
           size: 20,
           className: l(
@@ -119,7 +119,7 @@ const j = ({
         }
       ),
       c && /* @__PURE__ */ n(
-        k,
+        m,
         {
           size: 20,
           className: "flex-none text-neutral-500 dark:text-neutral-400"
@@ -133,7 +133,7 @@ const j = ({
     /* @__PURE__ */ x("div", { className: M, onClick: e.disabled ? void 0 : C, children: [
       /* @__PURE__ */ n("div", { className: l("min-w-0 flex-1"), children: A }),
       !v && d && /* @__PURE__ */ n(
-        g,
+        k,
         {
           size: 16,
           className: l(
@@ -143,7 +143,7 @@ const j = ({
         }
       ),
       !v && c && /* @__PURE__ */ n(
-        k,
+        m,
         {
           size: 16,
           className: "flex-none mr-2 text-neutral-500 dark:text-neutral-400"
@@ -213,7 +213,7 @@ const j = ({
   onOpenChange: t,
   ...r
 }) => {
-  const [s, i] = m(0), u = (d, c) => {
+  const [s, i] = g(0), u = (d, c) => {
     d || i((h) => h + 1), t?.(d, c);
   }, b = E(
     () => /* @__PURE__ */ n(

package/dist/components/dropdown/Dropdown.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.es.js","sources":["../../../src/components/dropdown/Dropdown.tsx"],"sourcesContent":["import { Dropdown as AntDropdown, Popover } from 'antd';\nimport type { DropdownProps as AntDropdownProps } from 'antd';\nimport React, { useCallback, useState } from 'react';\nimport { cn } from '../../lib/utils';\nimport {\n  ExpandMoreFilledIcon,\n  KeyboardArrowRightIcon,\n} from '../icon';\n\n// ─── Item Types ──────────────────────────────────────────────────────────────\n\nexport interface DropdownMenuItemDef {\n  key?: string | number;\n  label?: React.ReactNode;\n  /** Icon displayed before the label (enables native rendering mode). */\n  icon?: React.ReactNode;\n  disabled?: boolean;\n  /** Renders label in error-600 color. */\n  danger?: boolean;\n  className?: string;\n  onClick?: (info: { key: string; domEvent: React.MouseEvent }) => void;\n  children?: DropdownItemDef[];\n  /**\n   * When `true` and `children` is provided, items expand inline below the\n   * parent rather than opening a side-panel popup. Defaults to `false`.\n   */\n  expandable?: boolean;\n  /** When `expandable` is true, controls the initial open state. */\n  defaultOpen?: boolean;\n}\n\nexport interface DropdownDividerDef {\n  type: 'divider';\n  key?: string | number;\n  dashed?: boolean;\n}\n\nexport interface DropdownGroupDef {\n  type: 'group';\n  key?: string | number;\n  label?: React.ReactNode;\n  children?: DropdownItemDef[];\n}\n\nexport type DropdownItemDef =\n  | DropdownMenuItemDef\n  | DropdownDividerDef\n  | DropdownGroupDef\n  | null\n  | undefined;\n\nexport interface DropdownMenuConfig {\n  items?: DropdownItemDef[];\n  onClick?: (info: {\n    key: string;\n    keyPath: string[];\n    domEvent: React.MouseEvent;\n  }) => void;\n  [key: string]: unknown;\n}\n\nexport interface DropdownProps\n  extends Omit<AntDropdownProps, 'overlay' | 'dropdownRender' | 'menu'> {\n  menu?: DropdownMenuConfig;\n  /** Minimum width of the dropdown panel in pixels. Defaults to 200. */\n  minWidth?: number;\n}\n\n// ─── Internal helpers ────────────────────────────────────────────────────────\n\nfunction isMenuItemDef(item: DropdownItemDef): item is DropdownMenuItemDef {\n  return !!item && !('type' in item);\n}\n\n// ─── DropdownMenuPanel ────────────────────────────────────────────────────────\n\ninterface DropdownMenuPanelProps {\n  items?: DropdownItemDef[];\n  onItemClick?: DropdownMenuConfig['onClick'];\n  minWidth?: number;\n  /** Fires after a leaf item is clicked. Used to close ancestor popovers. */\n  onItemSelected?: () => void;\n}\n\nconst DropdownMenuPanel: React.FC<DropdownMenuPanelProps> = ({\n  items,\n  onItemClick,\n  minWidth = 200,\n  onItemSelected,\n}) => {\n  return (\n    <div\n      className='bg-white dark:bg-black-800 border border-neutral-200 dark:border-black-600 rounded-[8px] shadow flex flex-col gap-1 p-0'\n      style={{ minWidth }}\n    >\n      {items?.map((item, idx) => {\n        if (!item) return null;\n\n        if ('type' in item && item.type === 'divider') {\n          return (\n            <div\n              key={item.key ?? `divider-${idx}`}\n              className='h-px bg-neutral-200 dark:bg-black-600 mx-1 my-0.5'\n            />\n          );\n        }\n\n        if ('type' in item && item.type === 'group') {\n          return (\n            <div key={item.key ?? `group-${idx}`}>\n              {item.label && (\n                <div className='px-3 py-1 text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wide'>\n                  {item.label}\n                </div>\n              )}\n              {item.children?.map((child, childIdx) =>\n                isMenuItemDef(child) ? (\n                  <DropdownMenuItemRow\n                    key={(child as DropdownMenuItemDef).key ?? childIdx}\n                    item={child}\n                    onItemClick={onItemClick}\n                    onItemSelected={onItemSelected}\n                  />\n                ) : null,\n              )}\n            </div>\n          );\n        }\n\n        if (isMenuItemDef(item)) {\n          return (\n            <DropdownMenuItemRow\n              key={item.key ?? idx}\n              item={item}\n              onItemClick={onItemClick}\n              onItemSelected={onItemSelected}\n            />\n          );\n        }\n\n        return null;\n      })}\n    </div>\n  );\n};\n\n// ─── DropdownMenuItemRow ─────────────────────────────────────────────────────\n\ninterface DropdownMenuItemRowProps {\n  item: DropdownMenuItemDef;\n  onItemClick?: DropdownMenuConfig['onClick'];\n  isChild?: boolean;\n  /** Closes the enclosing popover. Propagates upward through nested submenus. */\n  onItemSelected?: () => void;\n}\n\nconst DropdownMenuItemRow: React.FC<DropdownMenuItemRowProps> = ({\n  item,\n  onItemClick,\n  isChild = false,\n  onItemSelected,\n}) => {\n  const [expanded, setExpanded] = useState(item.defaultOpen ?? false);\n  const [popoverOpen, setPopoverOpen] = useState(false);\n\n  const hasChildren =\n    Array.isArray(item.children) && item.children.length > 0;\n  const isCollapsable = hasChildren && item.expandable === true;\n  const isSubmenu = hasChildren && !item.expandable;\n  const isNative = item.icon !== undefined;\n\n  const handleClick = (e: React.MouseEvent) => {\n    if (item.disabled) return;\n\n    if (isCollapsable) {\n      setExpanded((prev) => !prev);\n      return;\n    }\n\n    const key = String(item.key ?? '');\n    if (!isSubmenu) {\n      item.onClick?.({ key, domEvent: e });\n      onItemClick?.({ key, keyPath: [key], domEvent: e });\n      onItemSelected?.();\n    }\n  };\n\n  const handleChildSelected = useCallback(() => {\n    setPopoverOpen(false);\n    onItemSelected?.();\n  }, [onItemSelected]);\n\n  const containerClasses = cn(\n    'flex items-center justify-between rounded-[4px] cursor-pointer select-none w-full transition-colors duration-100',\n    isChild ? 'pl-9 pr-1 min-h-[36px]' : 'px-0 py-0.5',\n    !isNative && 'overflow-hidden',\n    item.disabled ? 'opacity-50 cursor-not-allowed' : '',\n    item.className,\n  );\n\n  const nativeContainerClasses = cn(\n    'flex items-center justify-between gap-3 rounded-[4px] cursor-pointer select-none w-full transition-colors duration-100 dark:bg-black-800',\n    isChild ? 'pl-9 pr-1 py-2 min-h-[36px]' : 'px-3 py-2',\n    item.disabled ? 'opacity-50 cursor-not-allowed' : '',\n    item.className,\n  );\n\n  const compatChevron = isCollapsable ? (\n    <ExpandMoreFilledIcon\n      size={16}\n      className={cn(\n        'flex-none transition-transform duration-200',\n        expanded ? 'rotate-180' : 'rotate-0',\n      )}\n    />\n  ) : isSubmenu ? (\n    <KeyboardArrowRightIcon size={16} className='flex-none' />\n  ) : null;\n\n  const compatLabelIsOptionButton =\n    React.isValidElement(item.label) &&\n    (item.label.type as { displayName?: string })?.displayName === 'OptionButton';\n\n  const compatLabelNode =\n    compatLabelIsOptionButton && compatChevron\n      ? React.cloneElement(item.label as React.ReactElement<{ chevron?: React.ReactNode }>, {\n          chevron: compatChevron,\n        })\n      : item.label;\n\n  const itemContent = isNative ? (\n    // Native rendering: icon + label + optional indicator\n    <div className={nativeContainerClasses} onClick={!item.disabled ? handleClick : undefined}>\n      <div className='flex items-center gap-3 min-w-0 flex-1'>\n        <span\n          className={cn(\n            'flex-none flex items-center justify-center',\n            isChild ? 'size-4' : 'size-5',\n          )}\n        >\n          {item.icon}\n        </span>\n        <span\n          className={cn(\n            'text-sm font-medium leading-5 whitespace-nowrap',\n            item.danger\n              ? 'text-error-600'\n              : 'text-neutral-900 dark:text-neutral-100',\n          )}\n        >\n          {item.label}\n        </span>\n      </div>\n\n      {isCollapsable && (\n        <ExpandMoreFilledIcon\n          size={20}\n          className={cn(\n            'flex-none text-neutral-500 dark:text-neutral-400 transition-transform duration-200',\n            expanded ? 'rotate-180' : 'rotate-0',\n          )}\n        />\n      )}\n      {isSubmenu && (\n        <KeyboardArrowRightIcon\n          size={20}\n          className='flex-none text-neutral-500 dark:text-neutral-400'\n        />\n      )}\n    </div>\n  ) : (\n    // Compat rendering: label is a fully rendered node (e.g. OptionButton).\n    // For OptionButton labels we inject the chevron as a prop so it sits inside\n    // the button's hover area; for any other node we fall back to a sibling chevron.\n    <div className={containerClasses} onClick={!item.disabled ? handleClick : undefined}>\n      <div className={cn('min-w-0 flex-1')}>{compatLabelNode}</div>\n      {!compatLabelIsOptionButton && isCollapsable && (\n        <ExpandMoreFilledIcon\n          size={16}\n          className={cn(\n            'flex-none mr-2 text-neutral-500 dark:text-neutral-400 transition-transform duration-200',\n            expanded ? 'rotate-180' : 'rotate-0',\n          )}\n        />\n      )}\n      {!compatLabelIsOptionButton && isSubmenu && (\n        <KeyboardArrowRightIcon\n          size={16}\n          className='flex-none mr-2 text-neutral-500 dark:text-neutral-400'\n        />\n      )}\n    </div>\n  );\n\n  if (isSubmenu) {\n    return (\n      <Popover\n        open={popoverOpen}\n        onOpenChange={setPopoverOpen}\n        content={\n          <DropdownMenuPanel\n            items={item.children}\n            onItemClick={onItemClick}\n            onItemSelected={handleChildSelected}\n          />\n        }\n        trigger='hover'\n        placement='rightTop'\n        overlayInnerStyle={{ padding: 0 }}\n        overlayStyle={{ padding: 0 }}\n        arrow={false}\n      >\n        <div>{itemContent}</div>\n      </Popover>\n    );\n  }\n\n  return (\n    <div>\n      {itemContent}\n      {isCollapsable && (\n        <div\n          className={cn(\n            'grid transition-[grid-template-rows] duration-200 ease-in-out',\n            expanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',\n          )}\n        >\n          <div className='overflow-hidden'>\n            <div className='flex flex-col'>\n              {item.children?.map((child, idx) => {\n                if (!child || !isMenuItemDef(child)) return null;\n                const isLast = idx === (item.children?.length ?? 0) - 1;\n                return (\n                  <div key={(child as DropdownMenuItemDef).key ?? idx} className='relative'>\n                    {/* L-shaped connector: vertical segment from top to row midpoint, curves right */}\n                    <div\n                      className='absolute left-[19px] top-0 w-3.5 border-l border-b border-neutral-200 dark:border-black-600 rounded-bl-[6px] pointer-events-none'\n                      style={{ height: 'calc(50% + 4px)' }}\n                    />\n                    {/* Vertical bridge down to next sibling */}\n                    {!isLast && (\n                      <div className='absolute left-[19px] top-1/2 bottom-0 w-px bg-neutral-200 dark:bg-black-600 pointer-events-none' />\n                    )}\n                    <DropdownMenuItemRow\n                      item={child as DropdownMenuItemDef}\n                      onItemClick={onItemClick}\n                      isChild\n                      onItemSelected={onItemSelected}\n                    />\n                  </div>\n                );\n              })}\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\n// ─── Dropdown ────────────────────────────────────────────────────────────────\n\nexport const Dropdown: React.FC<DropdownProps> = ({\n  children,\n  menu,\n  minWidth = 200,\n  onOpenChange,\n  ...rest\n}) => {\n  const [remountKey, setRemountKey] = useState(0);\n\n  const handleOpenChange: AntDropdownProps['onOpenChange'] = (open, info) => {\n    if (!open) {\n      // Force-remount the panel on close so nested collapsible/submenu\n      // open state is reset the next time the dropdown is opened.\n      setRemountKey((k) => k + 1);\n    }\n    onOpenChange?.(open, info);\n  };\n\n  const popupRender = useCallback(\n    () => (\n      <DropdownMenuPanel\n        key={remountKey}\n        items={menu?.items as DropdownItemDef[]}\n        onItemClick={menu?.onClick as DropdownMenuConfig['onClick']}\n        minWidth={minWidth}\n      />\n    ),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [menu?.items, menu?.onClick, minWidth, remountKey],\n  );\n\n  return (\n    <AntDropdown\n      {...rest}\n      onOpenChange={handleOpenChange}\n      popupRender={popupRender}\n    >\n      {children as React.ReactElement}\n    </AntDropdown>\n  );\n};\n\nexport default Dropdown;\n"],"names":["isMenuItemDef","item","DropdownMenuPanel","items","onItemClick","minWidth","onItemSelected","jsx","idx","child","childIdx","DropdownMenuItemRow","isChild","expanded","setExpanded","useState","popoverOpen","setPopoverOpen","hasChildren","isCollapsable","isSubmenu","isNative","handleClick","e","prev","key","handleChildSelected","useCallback","containerClasses","cn","nativeContainerClasses","compatChevron","ExpandMoreFilledIcon","KeyboardArrowRightIcon","compatLabelIsOptionButton","React","compatLabelNode","itemContent","jsxs","Popover","isLast","Dropdown","children","menu","onOpenChange","rest","remountKey","setRemountKey","handleOpenChange","open","info","k","popupRender","AntDropdown"],"mappings":"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"}
+{"version":3,"file":"Dropdown.es.js","sources":["../../../src/components/dropdown/Dropdown.tsx"],"sourcesContent":["import { Dropdown as AntDropdown, Popover } from 'antd';\nimport type { DropdownProps as AntDropdownProps } from 'antd';\nimport React, { useCallback, useState } from 'react';\nimport { cn } from '../../lib/utils';\nimport {\n  ExpandMoreFilledIcon,\n  KeyboardArrowRightIcon,\n} from '../icon';\n\n// ─── Item Types ──────────────────────────────────────────────────────────────\n\nexport interface DropdownMenuItemDef {\n  key?: string | number;\n  label?: React.ReactNode;\n  /** Icon displayed before the label (enables native rendering mode). */\n  icon?: React.ReactNode;\n  disabled?: boolean;\n  /** Renders label in error-600 color. */\n  danger?: boolean;\n  className?: string;\n  onClick?: (info: { key: string; domEvent: React.MouseEvent }) => void;\n  children?: DropdownItemDef[];\n  /**\n   * When `true` and `children` is provided, items expand inline below the\n   * parent rather than opening a side-panel popup. Defaults to `false`.\n   */\n  expandable?: boolean;\n  /** When `expandable` is true, controls the initial open state. */\n  defaultOpen?: boolean;\n}\n\nexport interface DropdownDividerDef {\n  type: 'divider';\n  key?: string | number;\n  dashed?: boolean;\n}\n\nexport interface DropdownGroupDef {\n  type: 'group';\n  key?: string | number;\n  label?: React.ReactNode;\n  children?: DropdownItemDef[];\n}\n\nexport type DropdownItemDef =\n  | DropdownMenuItemDef\n  | DropdownDividerDef\n  | DropdownGroupDef\n  | null\n  | undefined;\n\nexport interface DropdownMenuConfig {\n  items?: DropdownItemDef[];\n  onClick?: (info: {\n    key: string;\n    keyPath: string[];\n    domEvent: React.MouseEvent;\n  }) => void;\n  [key: string]: unknown;\n}\n\nexport interface DropdownProps\n  extends Omit<AntDropdownProps, 'overlay' | 'dropdownRender' | 'menu'> {\n  menu?: DropdownMenuConfig;\n  /** Minimum width of the dropdown panel in pixels. Defaults to 200. */\n  minWidth?: number;\n}\n\n// ─── Internal helpers ────────────────────────────────────────────────────────\n\nfunction isMenuItemDef(item: DropdownItemDef): item is DropdownMenuItemDef {\n  return !!item && !('type' in item);\n}\n\n// ─── DropdownMenuPanel ────────────────────────────────────────────────────────\n\ninterface DropdownMenuPanelProps {\n  items?: DropdownItemDef[];\n  onItemClick?: DropdownMenuConfig['onClick'];\n  minWidth?: number;\n  /** Fires after a leaf item is clicked. Used to close ancestor popovers. */\n  onItemSelected?: () => void;\n}\n\nconst DropdownMenuPanel: React.FC<DropdownMenuPanelProps> = ({\n  items,\n  onItemClick,\n  minWidth = 200,\n  onItemSelected,\n}) => {\n  return (\n    <div\n      className='bg-white dark:bg-black-800 border border-neutral-200 dark:border-black-600 rounded-[8px] shadow flex flex-col p-0 border-none overflow-hidden'\n      style={{ minWidth }}\n    >\n      {items?.map((item, idx) => {\n        if (!item) return null;\n\n        if ('type' in item && item.type === 'divider') {\n          return (\n            <div\n              key={item.key ?? `divider-${idx}`}\n              className='h-px bg-neutral-200 dark:bg-black-600 mx-1 my-0.5'\n            />\n          );\n        }\n\n        if ('type' in item && item.type === 'group') {\n          return (\n            <div key={item.key ?? `group-${idx}`}>\n              {item.label && (\n                <div className='px-3 py-1 text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wide'>\n                  {item.label}\n                </div>\n              )}\n              {item.children?.map((child, childIdx) =>\n                isMenuItemDef(child) ? (\n                  <DropdownMenuItemRow\n                    key={(child as DropdownMenuItemDef).key ?? childIdx}\n                    item={child}\n                    onItemClick={onItemClick}\n                    onItemSelected={onItemSelected}\n                  />\n                ) : null,\n              )}\n            </div>\n          );\n        }\n\n        if (isMenuItemDef(item)) {\n          return (\n            <DropdownMenuItemRow\n              key={item.key ?? idx}\n              item={item}\n              onItemClick={onItemClick}\n              onItemSelected={onItemSelected}\n            />\n          );\n        }\n\n        return null;\n      })}\n    </div>\n  );\n};\n\n// ─── DropdownMenuItemRow ─────────────────────────────────────────────────────\n\ninterface DropdownMenuItemRowProps {\n  item: DropdownMenuItemDef;\n  onItemClick?: DropdownMenuConfig['onClick'];\n  isChild?: boolean;\n  /** Closes the enclosing popover. Propagates upward through nested submenus. */\n  onItemSelected?: () => void;\n}\n\nconst DropdownMenuItemRow: React.FC<DropdownMenuItemRowProps> = ({\n  item,\n  onItemClick,\n  isChild = false,\n  onItemSelected,\n}) => {\n  const [expanded, setExpanded] = useState(item.defaultOpen ?? false);\n  const [popoverOpen, setPopoverOpen] = useState(false);\n\n  const hasChildren =\n    Array.isArray(item.children) && item.children.length > 0;\n  const isCollapsable = hasChildren && item.expandable === true;\n  const isSubmenu = hasChildren && !item.expandable;\n  const isNative = item.icon !== undefined;\n\n  const handleClick = (e: React.MouseEvent) => {\n    if (item.disabled) return;\n\n    if (isCollapsable) {\n      setExpanded((prev) => !prev);\n      return;\n    }\n\n    const key = String(item.key ?? '');\n    if (!isSubmenu) {\n      item.onClick?.({ key, domEvent: e });\n      onItemClick?.({ key, keyPath: [key], domEvent: e });\n      onItemSelected?.();\n    }\n  };\n\n  const handleChildSelected = useCallback(() => {\n    setPopoverOpen(false);\n    onItemSelected?.();\n  }, [onItemSelected]);\n\n  const containerClasses = cn(\n    'flex items-center justify-between rounded-[4px] cursor-pointer select-none w-full transition-colors duration-100',\n    isChild ? 'pl-9 pr-1 min-h-[36px]' : 'px-0 py-0.5',\n    !isNative && 'overflow-hidden',\n    item.disabled ? 'opacity-50 cursor-not-allowed' : '',\n    item.className,\n  );\n\n  const nativeContainerClasses = cn(\n    'flex items-center justify-between gap-3 rounded-[4px] cursor-pointer select-none w-full transition-colors duration-100 dark:bg-black-800',\n    isChild ? 'pl-9 pr-1 py-2 min-h-[36px]' : 'px-3 py-2',\n    item.disabled ? 'opacity-50 cursor-not-allowed' : '',\n    item.className,\n  );\n\n  const compatChevron = isCollapsable ? (\n    <ExpandMoreFilledIcon\n      size={16}\n      className={cn(\n        'flex-none transition-transform duration-200',\n        expanded ? 'rotate-180' : 'rotate-0',\n      )}\n    />\n  ) : isSubmenu ? (\n    <KeyboardArrowRightIcon size={16} className='flex-none' />\n  ) : null;\n\n  const compatLabelIsOptionButton =\n    React.isValidElement(item.label) &&\n    (item.label.type as { displayName?: string })?.displayName === 'OptionButton';\n\n  const compatLabelNode =\n    compatLabelIsOptionButton && compatChevron\n      ? React.cloneElement(item.label as React.ReactElement<{ chevron?: React.ReactNode }>, {\n          chevron: compatChevron,\n        })\n      : item.label;\n\n  const itemContent = isNative ? (\n    // Native rendering: icon + label + optional indicator\n    <div className={nativeContainerClasses} onClick={!item.disabled ? handleClick : undefined}>\n      <div className='flex items-center gap-3 min-w-0 flex-1'>\n        <span\n          className={cn(\n            'flex-none flex items-center justify-center',\n            isChild ? 'size-4' : 'size-5',\n          )}\n        >\n          {item.icon}\n        </span>\n        <span\n          className={cn(\n            'text-sm font-medium leading-5 whitespace-nowrap',\n            item.danger\n              ? 'text-error-600'\n              : 'text-neutral-900 dark:text-neutral-100',\n          )}\n        >\n          {item.label}\n        </span>\n      </div>\n\n      {isCollapsable && (\n        <ExpandMoreFilledIcon\n          size={20}\n          className={cn(\n            'flex-none text-neutral-500 dark:text-neutral-400 transition-transform duration-200',\n            expanded ? 'rotate-180' : 'rotate-0',\n          )}\n        />\n      )}\n      {isSubmenu && (\n        <KeyboardArrowRightIcon\n          size={20}\n          className='flex-none text-neutral-500 dark:text-neutral-400'\n        />\n      )}\n    </div>\n  ) : (\n    // Compat rendering: label is a fully rendered node (e.g. OptionButton).\n    // For OptionButton labels we inject the chevron as a prop so it sits inside\n    // the button's hover area; for any other node we fall back to a sibling chevron.\n    <div className={containerClasses} onClick={!item.disabled ? handleClick : undefined}>\n      <div className={cn('min-w-0 flex-1')}>{compatLabelNode}</div>\n      {!compatLabelIsOptionButton && isCollapsable && (\n        <ExpandMoreFilledIcon\n          size={16}\n          className={cn(\n            'flex-none mr-2 text-neutral-500 dark:text-neutral-400 transition-transform duration-200',\n            expanded ? 'rotate-180' : 'rotate-0',\n          )}\n        />\n      )}\n      {!compatLabelIsOptionButton && isSubmenu && (\n        <KeyboardArrowRightIcon\n          size={16}\n          className='flex-none mr-2 text-neutral-500 dark:text-neutral-400'\n        />\n      )}\n    </div>\n  );\n\n  if (isSubmenu) {\n    return (\n      <Popover\n        open={popoverOpen}\n        onOpenChange={setPopoverOpen}\n        content={\n          <DropdownMenuPanel\n            items={item.children}\n            onItemClick={onItemClick}\n            onItemSelected={handleChildSelected}\n          />\n        }\n        trigger='hover'\n        placement='rightTop'\n        overlayInnerStyle={{ padding: 0 }}\n        overlayStyle={{ padding: 0 }}\n        arrow={false}\n      >\n        <div>{itemContent}</div>\n      </Popover>\n    );\n  }\n\n  return (\n    <div>\n      {itemContent}\n      {isCollapsable && (\n        <div\n          className={cn(\n            'grid transition-[grid-template-rows] duration-200 ease-in-out',\n            expanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',\n          )}\n        >\n          <div className='overflow-hidden'>\n            <div className='flex flex-col'>\n              {item.children?.map((child, idx) => {\n                if (!child || !isMenuItemDef(child)) return null;\n                const isLast = idx === (item.children?.length ?? 0) - 1;\n                return (\n                  <div key={(child as DropdownMenuItemDef).key ?? idx} className='relative'>\n                    {/* L-shaped connector: vertical segment from top to row midpoint, curves right */}\n                    <div\n                      className='absolute left-[19px] top-0 w-3.5 border-l border-b border-neutral-200 dark:border-black-600 rounded-bl-[6px] pointer-events-none'\n                      style={{ height: 'calc(50% + 4px)' }}\n                    />\n                    {/* Vertical bridge down to next sibling */}\n                    {!isLast && (\n                      <div className='absolute left-[19px] top-1/2 bottom-0 w-px bg-neutral-200 dark:bg-black-600 pointer-events-none' />\n                    )}\n                    <DropdownMenuItemRow\n                      item={child as DropdownMenuItemDef}\n                      onItemClick={onItemClick}\n                      isChild\n                      onItemSelected={onItemSelected}\n                    />\n                  </div>\n                );\n              })}\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\n// ─── Dropdown ────────────────────────────────────────────────────────────────\n\nexport const Dropdown: React.FC<DropdownProps> = ({\n  children,\n  menu,\n  minWidth = 200,\n  onOpenChange,\n  ...rest\n}) => {\n  const [remountKey, setRemountKey] = useState(0);\n\n  const handleOpenChange: AntDropdownProps['onOpenChange'] = (open, info) => {\n    if (!open) {\n      // Force-remount the panel on close so nested collapsible/submenu\n      // open state is reset the next time the dropdown is opened.\n      setRemountKey((k) => k + 1);\n    }\n    onOpenChange?.(open, info);\n  };\n\n  const popupRender = useCallback(\n    () => (\n      <DropdownMenuPanel\n        key={remountKey}\n        items={menu?.items as DropdownItemDef[]}\n        onItemClick={menu?.onClick as DropdownMenuConfig['onClick']}\n        minWidth={minWidth}\n      />\n    ),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [menu?.items, menu?.onClick, minWidth, remountKey],\n  );\n\n  return (\n    <AntDropdown\n      {...rest}\n      onOpenChange={handleOpenChange}\n      popupRender={popupRender}\n    >\n      {children as React.ReactElement}\n    </AntDropdown>\n  );\n};\n\nexport default Dropdown;\n"],"names":["isMenuItemDef","item","DropdownMenuPanel","items","onItemClick","minWidth","onItemSelected","jsx","idx","child","childIdx","DropdownMenuItemRow","isChild","expanded","setExpanded","useState","popoverOpen","setPopoverOpen","hasChildren","isCollapsable","isSubmenu","isNative","handleClick","e","prev","key","handleChildSelected","useCallback","containerClasses","cn","nativeContainerClasses","compatChevron","ExpandMoreFilledIcon","KeyboardArrowRightIcon","compatLabelIsOptionButton","React","compatLabelNode","itemContent","jsxs","Popover","isLast","Dropdown","children","menu","onOpenChange","rest","remountKey","setRemountKey","handleOpenChange","open","info","k","popupRender","AntDropdown"],"mappings":"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"}

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/package.json

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