@raystack/apsara 0.48.1 → 0.48.3

package/dist/components/dropdown-menu/dropdown-menu-root.js

@@ -1,7 +1,7 @@
 import { j as jsxRuntimeExports } from '../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
 import { MenuProvider } from '../../node_modules/.pnpm/@ariakit_react-core@0.4.16_react-dom@18.3.1_react@18.2.0__react@18.2.0/node_modules/@ariakit/react-core/esm/menu/menu-provider.js';
 import { ComboboxProvider } from '../../node_modules/.pnpm/@ariakit_react-core@0.4.16_react-dom@18.3.1_react@18.2.0__react@18.2.0/node_modules/@ariakit/react-core/esm/combobox/combobox-provider.js';
-import { createContext, useContext, useState } from 'react';
+import { createContext, useContext, useState, useCallback } from 'react';
 
 /**
  Root context to manage the Dropdown control
@@ -13,35 +13,35 @@ const useDropdownContext = () => {
     if (!context)
         return {};
     const shouldFilter = !!(context?.autocomplete &&
-        context?.autocompleteMode === "auto" &&
+        context?.autocompleteMode === 'auto' &&
         context?.searchValue?.length);
     const shouldFilterParent = !!(context?.parent?.autocomplete &&
-        context?.parent?.autocompleteMode === "auto" &&
+        context?.parent?.autocompleteMode === 'auto' &&
         context?.parent?.searchValue?.length);
     return {
         ...context,
         shouldFilter,
         parent: context?.parent && {
             ...context.parent,
-            shouldFilter: shouldFilterParent,
-        },
+            shouldFilter: shouldFilterParent
+        }
     };
 };
-const DropdownMenuRoot = ({ autocomplete, autocompleteMode = "auto", searchValue: providedSearchValue, onSearch, focusLoop = true, defaultSearchValue = "", ...props }) => {
+const DropdownMenuRoot = ({ autocomplete, autocompleteMode = 'auto', searchValue: providedSearchValue, onSearch, focusLoop = true, defaultSearchValue = '', onOpenChange, ...props }) => {
     const [internalSearchValue, setInternalSearchValue] = useState(defaultSearchValue);
     const dropdownContext = useDropdownContext();
     const searchValue = providedSearchValue ?? internalSearchValue;
-    const setValue = (value) => {
+    const setValue = useCallback((value) => {
         setInternalSearchValue(value);
         onSearch?.(value);
-    };
-    const element = jsxRuntimeExports.jsx(MenuProvider, { focusLoop: focusLoop, ...props });
+    }, [onSearch]);
+    const element = (jsxRuntimeExports.jsx(MenuProvider, { focusLoop: focusLoop, setOpen: onOpenChange, ...props }));
     return (jsxRuntimeExports.jsx(DropdownContext.Provider, { value: {
             autocomplete,
             parent: dropdownContext,
             autocompleteMode,
-            searchValue,
-        }, children: autocomplete ? (jsxRuntimeExports.jsx(ComboboxProvider, { resetValueOnHide: true, focusLoop: focusLoop, includesBaseElement: false, value: searchValue, setValue: setValue, children: element })) : (element) }));
+            searchValue
+        }, children: autocomplete ? (jsxRuntimeExports.jsx(ComboboxProvider, { resetValueOnHide: true, focusLoop: focusLoop, includesBaseElement: false, value: searchValue, setOpen: onOpenChange, setValue: setValue, children: element })) : (element) }));
 };
 
 export { DropdownContext, DropdownMenuRoot, useDropdownContext };

package/dist/components/dropdown-menu/dropdown-menu-root.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-menu-root.js","sources":["../../../components/dropdown-menu/dropdown-menu-root.tsx"],"sourcesContent":["import {\n  ComboboxProvider,\n  MenuProvider,\n  MenuProviderProps,\n} from \"@ariakit/react\";\nimport { createContext, useContext, useState } from \"react\";\n\ninterface CommonProps {\n  autocomplete?: boolean;\n  autocompleteMode?: \"auto\" | \"manual\";\n  searchValue?: string;\n}\n\ninterface DropdownContextValue extends CommonProps {\n  parent?: CommonProps;\n}\n\ninterface UseDropdownContext extends DropdownContextValue {\n  shouldFilter?: boolean;\n  parent?: CommonProps & {\n    shouldFilter?: boolean;\n  };\n}\n\n/**\n Root context to manage the Dropdown control\n @remarks Only for internal usage.\n */\n\nexport const DropdownContext = createContext<DropdownContextValue | undefined>(\n  undefined,\n);\n\nexport const useDropdownContext = (): UseDropdownContext => {\n  const context = useContext(DropdownContext);\n  if (!context) return {};\n\n  const shouldFilter = !!(\n    context?.autocomplete &&\n    context?.autocompleteMode === \"auto\" &&\n    context?.searchValue?.length\n  );\n\n  const shouldFilterParent = !!(\n    context?.parent?.autocomplete &&\n    context?.parent?.autocompleteMode === \"auto\" &&\n    context?.parent?.searchValue?.length\n  );\n\n  return {\n    ...context,\n    shouldFilter,\n    parent: context?.parent && {\n      ...context.parent,\n      shouldFilter: shouldFilterParent,\n    },\n  };\n};\n\nexport interface NormalDropdownMenuRootProps extends MenuProviderProps {\n  autocomplete?: false;\n  autocompleteMode?: never;\n  searchValue?: never;\n  onSearch?: never;\n  defaultSearchValue?: never;\n}\n\nexport interface AutocompleteDropdownMenuRootProps\n  extends MenuProviderProps,\n    CommonProps {\n  autocomplete: true;\n  onSearch?: (value: string) => void;\n  defaultSearchValue?: string;\n}\n\nexport type DropdownMenuRootProps =\n  | NormalDropdownMenuRootProps\n  | AutocompleteDropdownMenuRootProps;\n\nexport const DropdownMenuRoot = ({\n  autocomplete,\n  autocompleteMode = \"auto\",\n  searchValue: providedSearchValue,\n  onSearch,\n  focusLoop = true,\n  defaultSearchValue = \"\",\n  ...props\n}: DropdownMenuRootProps) => {\n  const [internalSearchValue, setInternalSearchValue] =\n    useState(defaultSearchValue);\n  const dropdownContext = useDropdownContext();\n\n  const searchValue = providedSearchValue ?? internalSearchValue;\n\n  const setValue = (value: string) => {\n    setInternalSearchValue(value);\n    onSearch?.(value);\n  };\n\n  const element = <MenuProvider focusLoop={focusLoop} {...props} />;\n\n  return (\n    <DropdownContext.Provider\n      value={{\n        autocomplete,\n        parent: dropdownContext,\n        autocompleteMode,\n        searchValue,\n      }}>\n      {autocomplete ? (\n        <ComboboxProvider\n          resetValueOnHide\n          focusLoop={focusLoop}\n          includesBaseElement={false}\n          value={searchValue}\n          setValue={setValue}>\n          {element}\n        </ComboboxProvider>\n      ) : (\n        element\n      )}\n    </DropdownContext.Provider>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;AAwBA;;;AAGG;MAEU,eAAe,GAAG,aAAa,CAC1C,SAAS,EACT;AAEK,MAAM,kBAAkB,GAAG,MAAyB;AACzD,IAAA,MAAM,OAAO,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;AAC5C,IAAA,IAAI,CAAC,OAAO;AAAE,QAAA,OAAO,EAAE,CAAC;AAExB,IAAA,MAAM,YAAY,GAAG,CAAC,EACpB,OAAO,EAAE,YAAY;QACrB,OAAO,EAAE,gBAAgB,KAAK,MAAM;AACpC,QAAA,OAAO,EAAE,WAAW,EAAE,MAAM,CAC7B,CAAC;IAEF,MAAM,kBAAkB,GAAG,CAAC,EAC1B,OAAO,EAAE,MAAM,EAAE,YAAY;AAC7B,QAAA,OAAO,EAAE,MAAM,EAAE,gBAAgB,KAAK,MAAM;AAC5C,QAAA,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,CACrC,CAAC;IAEF,OAAO;AACL,QAAA,GAAG,OAAO;QACV,YAAY;AACZ,QAAA,MAAM,EAAE,OAAO,EAAE,MAAM,IAAI;YACzB,GAAG,OAAO,CAAC,MAAM;AACjB,YAAA,YAAY,EAAE,kBAAkB;AACjC,SAAA;KACF,CAAC;AACJ,EAAE;AAsBK,MAAM,gBAAgB,GAAG,CAAC,EAC/B,YAAY,EACZ,gBAAgB,GAAG,MAAM,EACzB,WAAW,EAAE,mBAAmB,EAChC,QAAQ,EACR,SAAS,GAAG,IAAI,EAChB,kBAAkB,GAAG,EAAE,EACvB,GAAG,KAAK,EACc,KAAI;IAC1B,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GACjD,QAAQ,CAAC,kBAAkB,CAAC,CAAC;AAC/B,IAAA,MAAM,eAAe,GAAG,kBAAkB,EAAE,CAAC;AAE7C,IAAA,MAAM,WAAW,GAAG,mBAAmB,IAAI,mBAAmB,CAAC;AAE/D,IAAA,MAAM,QAAQ,GAAG,CAAC,KAAa,KAAI;QACjC,sBAAsB,CAAC,KAAK,CAAC,CAAC;AAC9B,QAAA,QAAQ,GAAG,KAAK,CAAC,CAAC;AACpB,KAAC,CAAC;IAEF,MAAM,OAAO,GAAGA,qBAAA,CAAC,YAAY,EAAA,EAAC,SAAS,EAAE,SAAS,EAAA,GAAM,KAAK,EAAA,CAAI,CAAC;AAElE,IAAA,QACEA,qBAAC,CAAA,eAAe,CAAC,QAAQ,EAAA,EACvB,KAAK,EAAE;YACL,YAAY;AACZ,YAAA,MAAM,EAAE,eAAe;YACvB,gBAAgB;YAChB,WAAW;AACZ,SAAA,EAAA,QAAA,EACA,YAAY,IACXA,sBAAC,gBAAgB,EAAA,EACf,gBAAgB,EAAA,IAAA,EAChB,SAAS,EAAE,SAAS,EACpB,mBAAmB,EAAE,KAAK,EAC1B,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,QAAQ,YACjB,OAAO,EAAA,CACS,KAEnB,OAAO,CACR,EAAA,CACwB,EAC3B;AACJ;;;;"}
+{"version":3,"file":"dropdown-menu-root.js","sources":["../../../components/dropdown-menu/dropdown-menu-root.tsx"],"sourcesContent":["import {\n  ComboboxProvider,\n  MenuProvider,\n  MenuProviderProps\n} from '@ariakit/react';\nimport { createContext, useCallback, useContext, useState } from 'react';\n\ninterface CommonProps {\n  autocomplete?: boolean;\n  autocompleteMode?: 'auto' | 'manual';\n  searchValue?: string;\n}\n\ninterface DropdownContextValue extends CommonProps {\n  parent?: CommonProps;\n}\n\ninterface UseDropdownContext extends DropdownContextValue {\n  shouldFilter?: boolean;\n  parent?: CommonProps & {\n    shouldFilter?: boolean;\n  };\n}\n\n/**\n Root context to manage the Dropdown control\n @remarks Only for internal usage.\n */\n\nexport const DropdownContext = createContext<DropdownContextValue | undefined>(\n  undefined\n);\n\nexport const useDropdownContext = (): UseDropdownContext => {\n  const context = useContext(DropdownContext);\n  if (!context) return {};\n\n  const shouldFilter = !!(\n    context?.autocomplete &&\n    context?.autocompleteMode === 'auto' &&\n    context?.searchValue?.length\n  );\n\n  const shouldFilterParent = !!(\n    context?.parent?.autocomplete &&\n    context?.parent?.autocompleteMode === 'auto' &&\n    context?.parent?.searchValue?.length\n  );\n\n  return {\n    ...context,\n    shouldFilter,\n    parent: context?.parent && {\n      ...context.parent,\n      shouldFilter: shouldFilterParent\n    }\n  };\n};\n\nexport interface BaseMenuProviderProps\n  extends Omit<MenuProviderProps, 'setOpen'> {\n  onOpenChange?: MenuProviderProps['setOpen'];\n}\n\nexport interface NormalDropdownMenuRootProps extends BaseMenuProviderProps {\n  autocomplete?: false;\n  autocompleteMode?: never;\n  searchValue?: never;\n  onSearch?: never;\n  defaultSearchValue?: never;\n}\n\nexport interface AutocompleteDropdownMenuRootProps\n  extends BaseMenuProviderProps,\n    CommonProps {\n  autocomplete: true;\n  onSearch?: (value: string) => void;\n  defaultSearchValue?: string;\n}\n\nexport type DropdownMenuRootProps =\n  | NormalDropdownMenuRootProps\n  | AutocompleteDropdownMenuRootProps;\n\nexport const DropdownMenuRoot = ({\n  autocomplete,\n  autocompleteMode = 'auto',\n  searchValue: providedSearchValue,\n  onSearch,\n  focusLoop = true,\n  defaultSearchValue = '',\n  onOpenChange,\n  ...props\n}: DropdownMenuRootProps) => {\n  const [internalSearchValue, setInternalSearchValue] =\n    useState(defaultSearchValue);\n  const dropdownContext = useDropdownContext();\n\n  const searchValue = providedSearchValue ?? internalSearchValue;\n\n  const setValue = useCallback(\n    (value: string) => {\n      setInternalSearchValue(value);\n      onSearch?.(value);\n    },\n    [onSearch]\n  );\n\n  const element = (\n    <MenuProvider focusLoop={focusLoop} setOpen={onOpenChange} {...props} />\n  );\n\n  return (\n    <DropdownContext.Provider\n      value={{\n        autocomplete,\n        parent: dropdownContext,\n        autocompleteMode,\n        searchValue\n      }}\n    >\n      {autocomplete ? (\n        <ComboboxProvider\n          resetValueOnHide\n          focusLoop={focusLoop}\n          includesBaseElement={false}\n          value={searchValue}\n          setOpen={onOpenChange}\n          setValue={setValue}\n        >\n          {element}\n        </ComboboxProvider>\n      ) : (\n        element\n      )}\n    </DropdownContext.Provider>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;AAwBA;;;AAGG;MAEU,eAAe,GAAG,aAAa,CAC1C,SAAS,EACT;AAEK,MAAM,kBAAkB,GAAG,MAAyB;AACzD,IAAA,MAAM,OAAO,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;AAC5C,IAAA,IAAI,CAAC,OAAO;AAAE,QAAA,OAAO,EAAE,CAAC;AAExB,IAAA,MAAM,YAAY,GAAG,CAAC,EACpB,OAAO,EAAE,YAAY;QACrB,OAAO,EAAE,gBAAgB,KAAK,MAAM;AACpC,QAAA,OAAO,EAAE,WAAW,EAAE,MAAM,CAC7B,CAAC;IAEF,MAAM,kBAAkB,GAAG,CAAC,EAC1B,OAAO,EAAE,MAAM,EAAE,YAAY;AAC7B,QAAA,OAAO,EAAE,MAAM,EAAE,gBAAgB,KAAK,MAAM;AAC5C,QAAA,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,CACrC,CAAC;IAEF,OAAO;AACL,QAAA,GAAG,OAAO;QACV,YAAY;AACZ,QAAA,MAAM,EAAE,OAAO,EAAE,MAAM,IAAI;YACzB,GAAG,OAAO,CAAC,MAAM;AACjB,YAAA,YAAY,EAAE,kBAAkB;AACjC,SAAA;KACF,CAAC;AACJ,EAAE;AA2BK,MAAM,gBAAgB,GAAG,CAAC,EAC/B,YAAY,EACZ,gBAAgB,GAAG,MAAM,EACzB,WAAW,EAAE,mBAAmB,EAChC,QAAQ,EACR,SAAS,GAAG,IAAI,EAChB,kBAAkB,GAAG,EAAE,EACvB,YAAY,EACZ,GAAG,KAAK,EACc,KAAI;IAC1B,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GACjD,QAAQ,CAAC,kBAAkB,CAAC,CAAC;AAC/B,IAAA,MAAM,eAAe,GAAG,kBAAkB,EAAE,CAAC;AAE7C,IAAA,MAAM,WAAW,GAAG,mBAAmB,IAAI,mBAAmB,CAAC;AAE/D,IAAA,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,KAAa,KAAI;QAChB,sBAAsB,CAAC,KAAK,CAAC,CAAC;AAC9B,QAAA,QAAQ,GAAG,KAAK,CAAC,CAAC;AACpB,KAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;AAEF,IAAA,MAAM,OAAO,IACXA,qBAAC,CAAA,YAAY,IAAC,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,YAAY,KAAM,KAAK,EAAA,CAAI,CACzE,CAAC;AAEF,IAAA,QACEA,qBAAC,CAAA,eAAe,CAAC,QAAQ,EAAA,EACvB,KAAK,EAAE;YACL,YAAY;AACZ,YAAA,MAAM,EAAE,eAAe;YACvB,gBAAgB;YAChB,WAAW;AACZ,SAAA,EAAA,QAAA,EAEA,YAAY,IACXA,qBAAA,CAAC,gBAAgB,EACf,EAAA,gBAAgB,EAChB,IAAA,EAAA,SAAS,EAAE,SAAS,EACpB,mBAAmB,EAAE,KAAK,EAC1B,KAAK,EAAE,WAAW,EAClB,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,QAAQ,EAEjB,QAAA,EAAA,OAAO,GACS,KAEnB,OAAO,CACR,EAAA,CACwB,EAC3B;AACJ;;;;"}

package/dist/components/dropdown-menu/dropdown-menu-trigger.cjs

@@ -9,8 +9,12 @@ var dropdownMenuRoot = require('./dropdown-menu-root.cjs');
 var utils = require('./utils.cjs');
 var index = require('../../node_modules/.pnpm/@radix-ui_react-slot@1.2.3_@types_react@18.2.12_react@18.2.0/node_modules/@radix-ui/react-slot/dist/index.cjs');
 
-const DropdownMenuTrigger = React.forwardRef(({ children, asChild, ...props }, ref) => {
-    return (jsxRuntime.jsxRuntimeExports.jsx(menuButton.MenuButton, { ref: ref, render: asChild ? jsxRuntime.jsxRuntimeExports.jsx(index.Root, {}) : undefined, ...props, children: children }));
+const DropdownMenuTrigger = React.forwardRef(({ children, asChild, stopPropagation = true, onClick, ...props }, ref) => {
+    return (jsxRuntime.jsxRuntimeExports.jsx(menuButton.MenuButton, { ref: ref, render: asChild ? jsxRuntime.jsxRuntimeExports.jsx(index.Root, {}) : undefined, onClick: (e) => {
+            if (stopPropagation)
+                e.stopPropagation();
+            onClick?.(e);
+        }, ...props, children: children }));
 });
 /**
  * `TriggerItem` is a helper component that renders a `Trigger` as a `MenuItem`.

package/dist/components/dropdown-menu/dropdown-menu-trigger.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-menu-trigger.cjs","sources":["../../../components/dropdown-menu/dropdown-menu-trigger.tsx"],"sourcesContent":["import { MenuButton, MenuButtonProps } from '@ariakit/react';\nimport { Slot } from 'radix-ui';\nimport { forwardRef } from 'react';\nimport { TriangleRightIcon } from '~/icons';\nimport { DropdownMenuItem, DropdownMenuItemProps } from './dropdown-menu-item';\nimport { useDropdownContext } from './dropdown-menu-root';\nimport { WithAsChild } from './types';\nimport { getMatch } from './utils';\n\nexport interface DropdownMenuTriggerProps\n  extends WithAsChild<MenuButtonProps> {}\n\nexport const DropdownMenuTrigger = forwardRef<\n  HTMLButtonElement,\n  DropdownMenuTriggerProps\n>(({ children, asChild, ...props }, ref) => {\n  return (\n    <MenuButton\n      ref={ref}\n      render={asChild ? <Slot.Root /> : undefined}\n      {...props}\n    >\n      {children}\n    </MenuButton>\n  );\n});\n\nexport interface DropdownMenuTriggerItemProps extends DropdownMenuItemProps {}\n\n/**\n * `TriggerItem` is a helper component that renders a `Trigger` as a `MenuItem`.\n */\nexport const DropdownMenuTriggerItem = forwardRef<\n  HTMLButtonElement,\n  DropdownMenuTriggerItemProps\n>(\n  (\n    { children, value, trailingIcon = <TriangleRightIcon />, ...props },\n    ref\n  ) => {\n    const { parent } = useDropdownContext();\n\n    if (\n      parent?.shouldFilter &&\n      !getMatch(value, children, parent?.searchValue)\n    ) {\n      return null;\n    }\n\n    return (\n      <MenuButton\n        ref={ref}\n        render={\n          <DropdownMenuItem\n            value={value}\n            trailingIcon={trailingIcon}\n            {...props}\n            forceRender={parent?.autocomplete ? 'combobox' : 'auto'}\n          />\n        }\n      >\n        {children}\n      </MenuButton>\n    );\n  }\n);\n"],"names":["forwardRef","_jsx","MenuButton","Slot.Root","TriangleRightIcon","useDropdownContext","getMatch","DropdownMenuItem"],"mappings":";;;;;;;;;;;AAYa,MAAA,mBAAmB,GAAGA,gBAAU,CAG3C,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;AACzC,IAAA,QACEC,gCAAA,CAACC,qBAAU,EAAA,EACT,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,OAAO,GAAGD,gCAAC,CAAAE,UAAS,EAAG,EAAA,CAAA,GAAG,SAAS,EAAA,GACvC,KAAK,EAAA,QAAA,EAER,QAAQ,EAAA,CACE,EACb;AACJ,CAAC,EAAE;AAIH;;AAEG;AACU,MAAA,uBAAuB,GAAGH,gBAAU,CAI/C,CACE,EAAE,QAAQ,EAAE,KAAK,EAAE,YAAY,GAAGC,gCAAA,CAACG,4BAAiB,EAAA,EAAA,CAAG,EAAE,GAAG,KAAK,EAAE,EACnE,GAAG,KACD;AACF,IAAA,MAAM,EAAE,MAAM,EAAE,GAAGC,mCAAkB,EAAE,CAAC;IAExC,IACE,MAAM,EAAE,YAAY;QACpB,CAACC,cAAQ,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,CAAC,EAC/C;AACA,QAAA,OAAO,IAAI,CAAC;KACb;AAED,IAAA,QACEL,gCAAC,CAAAC,qBAAU,IACT,GAAG,EAAE,GAAG,EACR,MAAM,EACJD,gCAAA,CAACM,iCAAgB,EACf,EAAA,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EACtB,GAAA,KAAK,EACT,WAAW,EAAE,MAAM,EAAE,YAAY,GAAG,UAAU,GAAG,MAAM,EAAA,CACvD,YAGH,QAAQ,EAAA,CACE,EACb;AACJ,CAAC;;;;;"}
+{"version":3,"file":"dropdown-menu-trigger.cjs","sources":["../../../components/dropdown-menu/dropdown-menu-trigger.tsx"],"sourcesContent":["import { MenuButton, MenuButtonProps } from '@ariakit/react';\nimport { Slot } from 'radix-ui';\nimport { PointerEvent, forwardRef } from 'react';\nimport { TriangleRightIcon } from '~/icons';\nimport { DropdownMenuItem, DropdownMenuItemProps } from './dropdown-menu-item';\nimport { useDropdownContext } from './dropdown-menu-root';\nimport { WithAsChild } from './types';\nimport { getMatch } from './utils';\n\nexport interface DropdownMenuTriggerProps extends WithAsChild<MenuButtonProps> {\n  stopPropagation?: boolean;\n}\n\nexport const DropdownMenuTrigger = forwardRef<\n  HTMLButtonElement,\n  DropdownMenuTriggerProps\n>(({ children, asChild, stopPropagation = true, onClick, ...props }, ref) => {\n  return (\n    <MenuButton\n      ref={ref}\n      render={asChild ? <Slot.Root /> : undefined}\n      onClick={(\n        e: PointerEvent<HTMLButtonElement> & PointerEvent<HTMLDivElement>\n      ) => {\n        if (stopPropagation) e.stopPropagation();\n        onClick?.(e);\n      }}\n      {...props}\n    >\n      {children}\n    </MenuButton>\n  );\n});\n\nexport interface DropdownMenuTriggerItemProps extends DropdownMenuItemProps {}\n\n/**\n * `TriggerItem` is a helper component that renders a `Trigger` as a `MenuItem`.\n */\nexport const DropdownMenuTriggerItem = forwardRef<\n  HTMLButtonElement,\n  DropdownMenuTriggerItemProps\n>(\n  (\n    { children, value, trailingIcon = <TriangleRightIcon />, ...props },\n    ref\n  ) => {\n    const { parent } = useDropdownContext();\n\n    if (\n      parent?.shouldFilter &&\n      !getMatch(value, children, parent?.searchValue)\n    ) {\n      return null;\n    }\n\n    return (\n      <MenuButton\n        ref={ref}\n        render={\n          <DropdownMenuItem\n            value={value}\n            trailingIcon={trailingIcon}\n            {...props}\n            forceRender={parent?.autocomplete ? 'combobox' : 'auto'}\n          />\n        }\n      >\n        {children}\n      </MenuButton>\n    );\n  }\n);\n"],"names":["forwardRef","_jsx","MenuButton","Slot.Root","TriangleRightIcon","useDropdownContext","getMatch","DropdownMenuItem"],"mappings":";;;;;;;;;;;AAaa,MAAA,mBAAmB,GAAGA,gBAAU,CAG3C,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,eAAe,GAAG,IAAI,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;AAC1E,IAAA,QACEC,gCAAA,CAACC,qBAAU,EAAA,EACT,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,OAAO,GAAGD,gCAAC,CAAAE,UAAS,EAAG,EAAA,CAAA,GAAG,SAAS,EAC3C,OAAO,EAAE,CACP,CAAiE,KAC/D;AACF,YAAA,IAAI,eAAe;gBAAE,CAAC,CAAC,eAAe,EAAE,CAAC;AACzC,YAAA,OAAO,GAAG,CAAC,CAAC,CAAC;AACf,SAAC,KACG,KAAK,EAAA,QAAA,EAER,QAAQ,EAAA,CACE,EACb;AACJ,CAAC,EAAE;AAIH;;AAEG;AACU,MAAA,uBAAuB,GAAGH,gBAAU,CAI/C,CACE,EAAE,QAAQ,EAAE,KAAK,EAAE,YAAY,GAAGC,gCAAA,CAACG,4BAAiB,EAAA,EAAA,CAAG,EAAE,GAAG,KAAK,EAAE,EACnE,GAAG,KACD;AACF,IAAA,MAAM,EAAE,MAAM,EAAE,GAAGC,mCAAkB,EAAE,CAAC;IAExC,IACE,MAAM,EAAE,YAAY;QACpB,CAACC,cAAQ,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,CAAC,EAC/C;AACA,QAAA,OAAO,IAAI,CAAC;KACb;AAED,IAAA,QACEL,gCAAC,CAAAC,qBAAU,IACT,GAAG,EAAE,GAAG,EACR,MAAM,EACJD,gCAAA,CAACM,iCAAgB,EACf,EAAA,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EACtB,GAAA,KAAK,EACT,WAAW,EAAE,MAAM,EAAE,YAAY,GAAG,UAAU,GAAG,MAAM,EAAA,CACvD,YAGH,QAAQ,EAAA,CACE,EACb;AACJ,CAAC;;;;;"}

package/dist/components/dropdown-menu/dropdown-menu-trigger.d.ts

@@ -2,6 +2,7 @@ import { MenuButtonProps } from '@ariakit/react';
 import { DropdownMenuItemProps } from './dropdown-menu-item';
 import { WithAsChild } from './types';
 export interface DropdownMenuTriggerProps extends WithAsChild<MenuButtonProps> {
+    stopPropagation?: boolean;
 }
 export declare const DropdownMenuTrigger: import("react").ForwardRefExoticComponent<Omit<DropdownMenuTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 export interface DropdownMenuTriggerItemProps extends DropdownMenuItemProps {

package/dist/components/dropdown-menu/dropdown-menu-trigger.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-menu-trigger.d.ts","sourceRoot":"","sources":["../../../components/dropdown-menu/dropdown-menu-trigger.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAI7D,OAAO,EAAoB,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAE/E,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAGtC,MAAM,WAAW,wBACf,SAAQ,WAAW,CAAC,eAAe,CAAC;CAAG;AAEzC,eAAO,MAAM,mBAAmB,qIAa9B,CAAC;AAEH,MAAM,WAAW,4BAA6B,SAAQ,qBAAqB;CAAG;AAE9E;;GAEG;AACH,eAAO,MAAM,uBAAuB,yIAiCnC,CAAC"}
+{"version":3,"file":"dropdown-menu-trigger.d.ts","sourceRoot":"","sources":["../../../components/dropdown-menu/dropdown-menu-trigger.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAI7D,OAAO,EAAoB,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAE/E,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAGtC,MAAM,WAAW,wBAAyB,SAAQ,WAAW,CAAC,eAAe,CAAC;IAC5E,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,mBAAmB,qIAmB9B,CAAC;AAEH,MAAM,WAAW,4BAA6B,SAAQ,qBAAqB;CAAG;AAE9E;;GAEG;AACH,eAAO,MAAM,uBAAuB,yIAiCnC,CAAC"}

package/dist/components/dropdown-menu/dropdown-menu-trigger.js

@@ -7,8 +7,12 @@ import { useDropdownContext } from './dropdown-menu-root.js';
 import { getMatch } from './utils.js';
 import { Root as Slot } from '../../node_modules/.pnpm/@radix-ui_react-slot@1.2.3_@types_react@18.2.12_react@18.2.0/node_modules/@radix-ui/react-slot/dist/index.js';
 
-const DropdownMenuTrigger = forwardRef(({ children, asChild, ...props }, ref) => {
-    return (jsxRuntimeExports.jsx(MenuButton, { ref: ref, render: asChild ? jsxRuntimeExports.jsx(Slot, {}) : undefined, ...props, children: children }));
+const DropdownMenuTrigger = forwardRef(({ children, asChild, stopPropagation = true, onClick, ...props }, ref) => {
+    return (jsxRuntimeExports.jsx(MenuButton, { ref: ref, render: asChild ? jsxRuntimeExports.jsx(Slot, {}) : undefined, onClick: (e) => {
+            if (stopPropagation)
+                e.stopPropagation();
+            onClick?.(e);
+        }, ...props, children: children }));
 });
 /**
  * `TriggerItem` is a helper component that renders a `Trigger` as a `MenuItem`.

package/dist/components/dropdown-menu/dropdown-menu-trigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-menu-trigger.js","sources":["../../../components/dropdown-menu/dropdown-menu-trigger.tsx"],"sourcesContent":["import { MenuButton, MenuButtonProps } from '@ariakit/react';\nimport { Slot } from 'radix-ui';\nimport { forwardRef } from 'react';\nimport { TriangleRightIcon } from '~/icons';\nimport { DropdownMenuItem, DropdownMenuItemProps } from './dropdown-menu-item';\nimport { useDropdownContext } from './dropdown-menu-root';\nimport { WithAsChild } from './types';\nimport { getMatch } from './utils';\n\nexport interface DropdownMenuTriggerProps\n  extends WithAsChild<MenuButtonProps> {}\n\nexport const DropdownMenuTrigger = forwardRef<\n  HTMLButtonElement,\n  DropdownMenuTriggerProps\n>(({ children, asChild, ...props }, ref) => {\n  return (\n    <MenuButton\n      ref={ref}\n      render={asChild ? <Slot.Root /> : undefined}\n      {...props}\n    >\n      {children}\n    </MenuButton>\n  );\n});\n\nexport interface DropdownMenuTriggerItemProps extends DropdownMenuItemProps {}\n\n/**\n * `TriggerItem` is a helper component that renders a `Trigger` as a `MenuItem`.\n */\nexport const DropdownMenuTriggerItem = forwardRef<\n  HTMLButtonElement,\n  DropdownMenuTriggerItemProps\n>(\n  (\n    { children, value, trailingIcon = <TriangleRightIcon />, ...props },\n    ref\n  ) => {\n    const { parent } = useDropdownContext();\n\n    if (\n      parent?.shouldFilter &&\n      !getMatch(value, children, parent?.searchValue)\n    ) {\n      return null;\n    }\n\n    return (\n      <MenuButton\n        ref={ref}\n        render={\n          <DropdownMenuItem\n            value={value}\n            trailingIcon={trailingIcon}\n            {...props}\n            forceRender={parent?.autocomplete ? 'combobox' : 'auto'}\n          />\n        }\n      >\n        {children}\n      </MenuButton>\n    );\n  }\n);\n"],"names":["_jsx","Slot.Root","TriangleRightIcon"],"mappings":";;;;;;;;;AAYa,MAAA,mBAAmB,GAAG,UAAU,CAG3C,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;AACzC,IAAA,QACEA,qBAAA,CAAC,UAAU,EAAA,EACT,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,OAAO,GAAGA,qBAAC,CAAAC,IAAS,EAAG,EAAA,CAAA,GAAG,SAAS,EAAA,GACvC,KAAK,EAAA,QAAA,EAER,QAAQ,EAAA,CACE,EACb;AACJ,CAAC,EAAE;AAIH;;AAEG;AACU,MAAA,uBAAuB,GAAG,UAAU,CAI/C,CACE,EAAE,QAAQ,EAAE,KAAK,EAAE,YAAY,GAAGD,qBAAA,CAACE,gBAAiB,EAAA,EAAA,CAAG,EAAE,GAAG,KAAK,EAAE,EACnE,GAAG,KACD;AACF,IAAA,MAAM,EAAE,MAAM,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAExC,IACE,MAAM,EAAE,YAAY;QACpB,CAAC,QAAQ,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,CAAC,EAC/C;AACA,QAAA,OAAO,IAAI,CAAC;KACb;AAED,IAAA,QACEF,qBAAC,CAAA,UAAU,IACT,GAAG,EAAE,GAAG,EACR,MAAM,EACJA,qBAAA,CAAC,gBAAgB,EACf,EAAA,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EACtB,GAAA,KAAK,EACT,WAAW,EAAE,MAAM,EAAE,YAAY,GAAG,UAAU,GAAG,MAAM,EAAA,CACvD,YAGH,QAAQ,EAAA,CACE,EACb;AACJ,CAAC;;;;"}
+{"version":3,"file":"dropdown-menu-trigger.js","sources":["../../../components/dropdown-menu/dropdown-menu-trigger.tsx"],"sourcesContent":["import { MenuButton, MenuButtonProps } from '@ariakit/react';\nimport { Slot } from 'radix-ui';\nimport { PointerEvent, forwardRef } from 'react';\nimport { TriangleRightIcon } from '~/icons';\nimport { DropdownMenuItem, DropdownMenuItemProps } from './dropdown-menu-item';\nimport { useDropdownContext } from './dropdown-menu-root';\nimport { WithAsChild } from './types';\nimport { getMatch } from './utils';\n\nexport interface DropdownMenuTriggerProps extends WithAsChild<MenuButtonProps> {\n  stopPropagation?: boolean;\n}\n\nexport const DropdownMenuTrigger = forwardRef<\n  HTMLButtonElement,\n  DropdownMenuTriggerProps\n>(({ children, asChild, stopPropagation = true, onClick, ...props }, ref) => {\n  return (\n    <MenuButton\n      ref={ref}\n      render={asChild ? <Slot.Root /> : undefined}\n      onClick={(\n        e: PointerEvent<HTMLButtonElement> & PointerEvent<HTMLDivElement>\n      ) => {\n        if (stopPropagation) e.stopPropagation();\n        onClick?.(e);\n      }}\n      {...props}\n    >\n      {children}\n    </MenuButton>\n  );\n});\n\nexport interface DropdownMenuTriggerItemProps extends DropdownMenuItemProps {}\n\n/**\n * `TriggerItem` is a helper component that renders a `Trigger` as a `MenuItem`.\n */\nexport const DropdownMenuTriggerItem = forwardRef<\n  HTMLButtonElement,\n  DropdownMenuTriggerItemProps\n>(\n  (\n    { children, value, trailingIcon = <TriangleRightIcon />, ...props },\n    ref\n  ) => {\n    const { parent } = useDropdownContext();\n\n    if (\n      parent?.shouldFilter &&\n      !getMatch(value, children, parent?.searchValue)\n    ) {\n      return null;\n    }\n\n    return (\n      <MenuButton\n        ref={ref}\n        render={\n          <DropdownMenuItem\n            value={value}\n            trailingIcon={trailingIcon}\n            {...props}\n            forceRender={parent?.autocomplete ? 'combobox' : 'auto'}\n          />\n        }\n      >\n        {children}\n      </MenuButton>\n    );\n  }\n);\n"],"names":["_jsx","Slot.Root","TriangleRightIcon"],"mappings":";;;;;;;;;AAaa,MAAA,mBAAmB,GAAG,UAAU,CAG3C,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,eAAe,GAAG,IAAI,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;AAC1E,IAAA,QACEA,qBAAA,CAAC,UAAU,EAAA,EACT,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,OAAO,GAAGA,qBAAC,CAAAC,IAAS,EAAG,EAAA,CAAA,GAAG,SAAS,EAC3C,OAAO,EAAE,CACP,CAAiE,KAC/D;AACF,YAAA,IAAI,eAAe;gBAAE,CAAC,CAAC,eAAe,EAAE,CAAC;AACzC,YAAA,OAAO,GAAG,CAAC,CAAC,CAAC;AACf,SAAC,KACG,KAAK,EAAA,QAAA,EAER,QAAQ,EAAA,CACE,EACb;AACJ,CAAC,EAAE;AAIH;;AAEG;AACU,MAAA,uBAAuB,GAAG,UAAU,CAI/C,CACE,EAAE,QAAQ,EAAE,KAAK,EAAE,YAAY,GAAGD,qBAAA,CAACE,gBAAiB,EAAA,EAAA,CAAG,EAAE,GAAG,KAAK,EAAE,EACnE,GAAG,KACD;AACF,IAAA,MAAM,EAAE,MAAM,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAExC,IACE,MAAM,EAAE,YAAY;QACpB,CAAC,QAAQ,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,CAAC,EAC/C;AACA,QAAA,OAAO,IAAI,CAAC;KACb;AAED,IAAA,QACEF,qBAAC,CAAA,UAAU,IACT,GAAG,EAAE,GAAG,EACR,MAAM,EACJA,qBAAA,CAAC,gBAAgB,EACf,EAAA,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EACtB,GAAA,KAAK,EACT,WAAW,EAAE,MAAM,EAAE,YAAY,GAAG,UAAU,GAAG,MAAM,EAAA,CACvD,YAGH,QAAQ,EAAA,CACE,EACb;AACJ,CAAC;;;;"}

package/dist/components/dropdown-menu/dropdown-menu.d.ts

@@ -1,4 +1,4 @@
-export declare const DropdownMenu: (({ autocomplete, autocompleteMode, searchValue: providedSearchValue, onSearch, focusLoop, defaultSearchValue, ...props }: import("./dropdown-menu-root").DropdownMenuRootProps) => import("react/jsx-runtime").JSX.Element) & {
+export declare const DropdownMenu: (({ autocomplete, autocompleteMode, searchValue: providedSearchValue, onSearch, focusLoop, defaultSearchValue, onOpenChange, ...props }: import("./dropdown-menu-root").DropdownMenuRootProps) => import("react/jsx-runtime").JSX.Element) & {
     Trigger: import("react").ForwardRefExoticComponent<Omit<import("./dropdown-menu-trigger").DropdownMenuTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
     /**
      * `TriggerItem` is a helper component that renders a `Trigger` as a `MenuItem`.

package/dist/components/empty-state/empty-state.cjs

@@ -1,16 +1,16 @@
 'use strict';
 
 var jsxRuntime = require('../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.cjs');
-var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
+var index = require('../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.cjs');
 var flex = require('../flex/flex.cjs');
 var text = require('../text/text.cjs');
 var emptyState_module = require('./empty-state.module.css.cjs');
 
-const EmptyState = ({ icon, heading, subHeading, primaryAction, secondaryAction, classNames, variant = "empty1", }) => {
-    if (variant === "empty2") {
-        return (jsxRuntime.jsxRuntimeExports.jsx(flex.Flex, { align: "center", justify: "center", className: emptyState_module.default.emptyStatePage, children: jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { direction: "column", align: "start", gap: "medium", className: clsx.clsx(emptyState_module.default.emptyStateContent, classNames?.container), children: [jsxRuntime.jsxRuntimeExports.jsx("div", { className: clsx.clsx(emptyState_module.default.iconContainer, classNames?.iconContainer), children: jsxRuntime.jsxRuntimeExports.jsx("div", { className: clsx.clsx(emptyState_module.default.icon, emptyState_module.default.iconLarge, classNames?.icon), children: icon }) }), heading && (jsxRuntime.jsxRuntimeExports.jsx(text.Text, { size: 5, weight: 500, className: clsx.clsx(emptyState_module.default.headerText, classNames?.heading), children: heading })), subHeading && (jsxRuntime.jsxRuntimeExports.jsx(text.Text, { size: 4, weight: 400, className: clsx.clsx(emptyState_module.default.subHeaderText, classNames?.subHeading), children: subHeading })), jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { gap: "medium", children: [primaryAction, secondaryAction] })] }) }));
+const EmptyState = ({ icon, heading, subHeading, primaryAction, secondaryAction, classNames, variant = 'empty1' }) => {
+    if (variant === 'empty2') {
+        return (jsxRuntime.jsxRuntimeExports.jsx(flex.Flex, { align: 'center', justify: 'center', className: emptyState_module.default.emptyStatePage, children: jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { direction: 'column', align: 'start', gap: 'medium', className: index.cx(emptyState_module.default.emptyStateContent, classNames?.container), children: [jsxRuntime.jsxRuntimeExports.jsx("div", { className: index.cx(emptyState_module.default.iconContainer, classNames?.iconContainer), children: jsxRuntime.jsxRuntimeExports.jsx("div", { className: index.cx(emptyState_module.default.icon, emptyState_module.default.iconLarge, classNames?.icon), children: icon }) }), heading && (jsxRuntime.jsxRuntimeExports.jsx(text.Text, { size: 5, weight: 500, className: index.cx(emptyState_module.default.headerText, classNames?.heading), children: heading })), subHeading && (jsxRuntime.jsxRuntimeExports.jsx(text.Text, { size: 4, weight: 400, className: index.cx(emptyState_module.default.subHeaderText, classNames?.subHeading), children: subHeading })), jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { gap: 'medium', children: [primaryAction, secondaryAction] })] }) }));
     }
-    return (jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { direction: "column", align: "center", gap: "medium", className: clsx.clsx(emptyState_module.default.emptyState, classNames?.container), children: [jsxRuntime.jsxRuntimeExports.jsx("div", { className: clsx.clsx(emptyState_module.default.iconContainer, classNames?.iconContainer), children: jsxRuntime.jsxRuntimeExports.jsx("div", { className: clsx.clsx(emptyState_module.default.icon, classNames?.icon), children: icon }) }), jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { direction: "column", gap: "small", align: "center", children: [heading && (jsxRuntime.jsxRuntimeExports.jsx(text.Text, { size: 5, weight: 500, className: clsx.clsx(emptyState_module.default.headerText, classNames?.heading), children: heading })), subHeading && (jsxRuntime.jsxRuntimeExports.jsx(text.Text, { size: 4, weight: 400, className: clsx.clsx(emptyState_module.default.subHeaderText, classNames?.subHeading), children: subHeading }))] }), primaryAction, secondaryAction] }));
+    return (jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { direction: 'column', align: 'center', gap: 'medium', className: index.cx(emptyState_module.default.emptyState, classNames?.container), children: [jsxRuntime.jsxRuntimeExports.jsx("div", { className: index.cx(emptyState_module.default.iconContainer, classNames?.iconContainer), children: jsxRuntime.jsxRuntimeExports.jsx("div", { className: index.cx(emptyState_module.default.icon, classNames?.icon), children: icon }) }), jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { direction: 'column', gap: 'small', align: 'center', children: [heading && (jsxRuntime.jsxRuntimeExports.jsx(text.Text, { size: 5, weight: 500, className: index.cx(emptyState_module.default.headerText, classNames?.heading), children: heading })), subHeading && (jsxRuntime.jsxRuntimeExports.jsx(text.Text, { size: 4, weight: 400, className: index.cx(emptyState_module.default.subHeaderText, classNames?.subHeading), children: subHeading }))] }), primaryAction, secondaryAction] }));
 };
 
 exports.EmptyState = EmptyState;

package/dist/components/empty-state/empty-state.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"empty-state.cjs","sources":["../../../components/empty-state/empty-state.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport { Flex } from \"../flex\";\nimport { Text } from \"../text\";\nimport styles from \"./empty-state.module.css\";\n\ntype classNameKeys =\n  | \"container\"\n  | \"iconContainer\"\n  | \"icon\"\n  | \"heading\"\n  | \"subHeading\";\n\ninterface EmptyStateProps {\n  icon: React.ReactNode;\n  heading?: React.ReactNode;\n  subHeading?: React.ReactNode;\n  primaryAction?: React.ReactNode;\n  secondaryAction?: React.ReactNode;\n  classNames?: Partial<Record<classNameKeys, string>>;\n  variant?: \"empty1\" | \"empty2\";\n}\n\nexport const EmptyState = ({\n  icon,\n  heading,\n  subHeading,\n  primaryAction,\n  secondaryAction,\n  classNames,\n  variant = \"empty1\",\n}: EmptyStateProps) => {\n  if (variant === \"empty2\") {\n    return (\n      <Flex\n        align=\"center\"\n        justify=\"center\"\n        className={styles.emptyStatePage}\n      >\n        <Flex\n          direction=\"column\"\n          align=\"start\"\n          gap=\"medium\"\n          className={clsx(styles.emptyStateContent, classNames?.container)}\n        >\n          <div className={clsx(styles.iconContainer, classNames?.iconContainer)}>\n            <div className={clsx(styles.icon, styles.iconLarge, classNames?.icon)}>{icon}</div>\n          </div>\n          \n          {heading && (\n            <Text\n              size={5}\n              weight={500}\n              className={clsx(styles.headerText, classNames?.heading)}\n            >\n              {heading}\n            </Text>\n          )}\n\n          {subHeading && (\n            <Text\n              size={4}\n              weight={400}\n              className={clsx(styles.subHeaderText, classNames?.subHeading)}\n            >\n              {subHeading}\n            </Text>\n          )}\n\n          <Flex gap=\"medium\">\n            {primaryAction}\n            {secondaryAction}\n          </Flex>\n        </Flex>\n      </Flex>\n    );\n  }\n\n\n\n  return (\n    <Flex\n      direction=\"column\"\n      align=\"center\"\n      gap=\"medium\"\n      className={clsx(styles.emptyState, classNames?.container)}\n    >\n      <div className={clsx(styles.iconContainer, classNames?.iconContainer)}>\n        <div className={clsx(styles.icon, classNames?.icon)}>{icon}</div>\n      </div>\n\n      <Flex direction=\"column\" gap=\"small\" align=\"center\">\n        {heading && (\n          <Text\n            size={5}\n            weight={500}\n            className={clsx(styles.headerText, classNames?.heading)}\n          >\n            {heading}\n          </Text>\n        )}\n\n        {subHeading && (\n          <Text\n            size={4}\n            weight={400}\n            className={clsx(styles.subHeaderText, classNames?.subHeading)}\n          >\n            {subHeading}\n          </Text>\n        )}\n      </Flex>\n\n      {primaryAction}\n\n      {secondaryAction}\n    </Flex>\n  );\n};\n"],"names":["_jsx","Flex","styles","_jsxs","clsx","Text"],"mappings":"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"}
+{"version":3,"file":"empty-state.cjs","sources":["../../../components/empty-state/empty-state.tsx"],"sourcesContent":["import { cx } from 'class-variance-authority';\nimport { Flex } from '../flex';\nimport { Text } from '../text';\nimport styles from './empty-state.module.css';\n\ntype classNameKeys =\n  | 'container'\n  | 'iconContainer'\n  | 'icon'\n  | 'heading'\n  | 'subHeading';\n\ninterface EmptyStateProps {\n  icon: React.ReactNode;\n  heading?: React.ReactNode;\n  subHeading?: React.ReactNode;\n  primaryAction?: React.ReactNode;\n  secondaryAction?: React.ReactNode;\n  classNames?: Partial<Record<classNameKeys, string>>;\n  variant?: 'empty1' | 'empty2';\n}\n\nexport const EmptyState = ({\n  icon,\n  heading,\n  subHeading,\n  primaryAction,\n  secondaryAction,\n  classNames,\n  variant = 'empty1'\n}: EmptyStateProps) => {\n  if (variant === 'empty2') {\n    return (\n      <Flex align='center' justify='center' className={styles.emptyStatePage}>\n        <Flex\n          direction='column'\n          align='start'\n          gap='medium'\n          className={cx(styles.emptyStateContent, classNames?.container)}\n        >\n          <div className={cx(styles.iconContainer, classNames?.iconContainer)}>\n            <div\n              className={cx(styles.icon, styles.iconLarge, classNames?.icon)}\n            >\n              {icon}\n            </div>\n          </div>\n\n          {heading && (\n            <Text\n              size={5}\n              weight={500}\n              className={cx(styles.headerText, classNames?.heading)}\n            >\n              {heading}\n            </Text>\n          )}\n\n          {subHeading && (\n            <Text\n              size={4}\n              weight={400}\n              className={cx(styles.subHeaderText, classNames?.subHeading)}\n            >\n              {subHeading}\n            </Text>\n          )}\n\n          <Flex gap='medium'>\n            {primaryAction}\n            {secondaryAction}\n          </Flex>\n        </Flex>\n      </Flex>\n    );\n  }\n\n  return (\n    <Flex\n      direction='column'\n      align='center'\n      gap='medium'\n      className={cx(styles.emptyState, classNames?.container)}\n    >\n      <div className={cx(styles.iconContainer, classNames?.iconContainer)}>\n        <div className={cx(styles.icon, classNames?.icon)}>{icon}</div>\n      </div>\n\n      <Flex direction='column' gap='small' align='center'>\n        {heading && (\n          <Text\n            size={5}\n            weight={500}\n            className={cx(styles.headerText, classNames?.heading)}\n          >\n            {heading}\n          </Text>\n        )}\n\n        {subHeading && (\n          <Text\n            size={4}\n            weight={400}\n            className={cx(styles.subHeaderText, classNames?.subHeading)}\n          >\n            {subHeading}\n          </Text>\n        )}\n      </Flex>\n\n      {primaryAction}\n\n      {secondaryAction}\n    </Flex>\n  );\n};\n"],"names":["_jsx","Flex","styles","_jsxs","cx","Text"],"mappings":"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"}

package/dist/components/empty-state/empty-state.d.ts

@@ -1,4 +1,4 @@
-type classNameKeys = "container" | "iconContainer" | "icon" | "heading" | "subHeading";
+type classNameKeys = 'container' | 'iconContainer' | 'icon' | 'heading' | 'subHeading';
 interface EmptyStateProps {
     icon: React.ReactNode;
     heading?: React.ReactNode;
@@ -6,8 +6,8 @@ interface EmptyStateProps {
     primaryAction?: React.ReactNode;
     secondaryAction?: React.ReactNode;
     classNames?: Partial<Record<classNameKeys, string>>;
-    variant?: "empty1" | "empty2";
+    variant?: 'empty1' | 'empty2';
 }
-export declare const EmptyState: ({ icon, heading, subHeading, primaryAction, secondaryAction, classNames, variant, }: EmptyStateProps) => import("react/jsx-runtime").JSX.Element;
+export declare const EmptyState: ({ icon, heading, subHeading, primaryAction, secondaryAction, classNames, variant }: EmptyStateProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=empty-state.d.ts.map

package/dist/components/empty-state/empty-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"empty-state.d.ts","sourceRoot":"","sources":["../../../components/empty-state/empty-state.tsx"],"names":[],"mappings":"AAMA,KAAK,aAAa,GACd,WAAW,GACX,eAAe,GACf,MAAM,GACN,SAAS,GACT,YAAY,CAAC;AAEjB,UAAU,eAAe;IACvB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,UAAU,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC;IACpD,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;CAC/B;AAED,eAAO,MAAM,UAAU,wFAQpB,eAAe,4CAuFjB,CAAC"}
+{"version":3,"file":"empty-state.d.ts","sourceRoot":"","sources":["../../../components/empty-state/empty-state.tsx"],"names":[],"mappings":"AAKA,KAAK,aAAa,GACd,WAAW,GACX,eAAe,GACf,MAAM,GACN,SAAS,GACT,YAAY,CAAC;AAEjB,UAAU,eAAe;IACvB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,UAAU,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC;IACpD,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;CAC/B;AAED,eAAO,MAAM,UAAU,uFAQpB,eAAe,4CAqFjB,CAAC"}

package/dist/components/empty-state/empty-state.js

@@ -1,14 +1,14 @@
 import { j as jsxRuntimeExports } from '../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
-import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
+import { cx } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
 import { Flex } from '../flex/flex.js';
 import { Text } from '../text/text.js';
 import styles from './empty-state.module.css.js';
 
-const EmptyState = ({ icon, heading, subHeading, primaryAction, secondaryAction, classNames, variant = "empty1", }) => {
-    if (variant === "empty2") {
-        return (jsxRuntimeExports.jsx(Flex, { align: "center", justify: "center", className: styles.emptyStatePage, children: jsxRuntimeExports.jsxs(Flex, { direction: "column", align: "start", gap: "medium", className: clsx(styles.emptyStateContent, classNames?.container), children: [jsxRuntimeExports.jsx("div", { className: clsx(styles.iconContainer, classNames?.iconContainer), children: jsxRuntimeExports.jsx("div", { className: clsx(styles.icon, styles.iconLarge, classNames?.icon), children: icon }) }), heading && (jsxRuntimeExports.jsx(Text, { size: 5, weight: 500, className: clsx(styles.headerText, classNames?.heading), children: heading })), subHeading && (jsxRuntimeExports.jsx(Text, { size: 4, weight: 400, className: clsx(styles.subHeaderText, classNames?.subHeading), children: subHeading })), jsxRuntimeExports.jsxs(Flex, { gap: "medium", children: [primaryAction, secondaryAction] })] }) }));
+const EmptyState = ({ icon, heading, subHeading, primaryAction, secondaryAction, classNames, variant = 'empty1' }) => {
+    if (variant === 'empty2') {
+        return (jsxRuntimeExports.jsx(Flex, { align: 'center', justify: 'center', className: styles.emptyStatePage, children: jsxRuntimeExports.jsxs(Flex, { direction: 'column', align: 'start', gap: 'medium', className: cx(styles.emptyStateContent, classNames?.container), children: [jsxRuntimeExports.jsx("div", { className: cx(styles.iconContainer, classNames?.iconContainer), children: jsxRuntimeExports.jsx("div", { className: cx(styles.icon, styles.iconLarge, classNames?.icon), children: icon }) }), heading && (jsxRuntimeExports.jsx(Text, { size: 5, weight: 500, className: cx(styles.headerText, classNames?.heading), children: heading })), subHeading && (jsxRuntimeExports.jsx(Text, { size: 4, weight: 400, className: cx(styles.subHeaderText, classNames?.subHeading), children: subHeading })), jsxRuntimeExports.jsxs(Flex, { gap: 'medium', children: [primaryAction, secondaryAction] })] }) }));
     }
-    return (jsxRuntimeExports.jsxs(Flex, { direction: "column", align: "center", gap: "medium", className: clsx(styles.emptyState, classNames?.container), children: [jsxRuntimeExports.jsx("div", { className: clsx(styles.iconContainer, classNames?.iconContainer), children: jsxRuntimeExports.jsx("div", { className: clsx(styles.icon, classNames?.icon), children: icon }) }), jsxRuntimeExports.jsxs(Flex, { direction: "column", gap: "small", align: "center", children: [heading && (jsxRuntimeExports.jsx(Text, { size: 5, weight: 500, className: clsx(styles.headerText, classNames?.heading), children: heading })), subHeading && (jsxRuntimeExports.jsx(Text, { size: 4, weight: 400, className: clsx(styles.subHeaderText, classNames?.subHeading), children: subHeading }))] }), primaryAction, secondaryAction] }));
+    return (jsxRuntimeExports.jsxs(Flex, { direction: 'column', align: 'center', gap: 'medium', className: cx(styles.emptyState, classNames?.container), children: [jsxRuntimeExports.jsx("div", { className: cx(styles.iconContainer, classNames?.iconContainer), children: jsxRuntimeExports.jsx("div", { className: cx(styles.icon, classNames?.icon), children: icon }) }), jsxRuntimeExports.jsxs(Flex, { direction: 'column', gap: 'small', align: 'center', children: [heading && (jsxRuntimeExports.jsx(Text, { size: 5, weight: 500, className: cx(styles.headerText, classNames?.heading), children: heading })), subHeading && (jsxRuntimeExports.jsx(Text, { size: 4, weight: 400, className: cx(styles.subHeaderText, classNames?.subHeading), children: subHeading }))] }), primaryAction, secondaryAction] }));
 };
 
 export { EmptyState };

package/dist/components/empty-state/empty-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"empty-state.js","sources":["../../../components/empty-state/empty-state.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport { Flex } from \"../flex\";\nimport { Text } from \"../text\";\nimport styles from \"./empty-state.module.css\";\n\ntype classNameKeys =\n  | \"container\"\n  | \"iconContainer\"\n  | \"icon\"\n  | \"heading\"\n  | \"subHeading\";\n\ninterface EmptyStateProps {\n  icon: React.ReactNode;\n  heading?: React.ReactNode;\n  subHeading?: React.ReactNode;\n  primaryAction?: React.ReactNode;\n  secondaryAction?: React.ReactNode;\n  classNames?: Partial<Record<classNameKeys, string>>;\n  variant?: \"empty1\" | \"empty2\";\n}\n\nexport const EmptyState = ({\n  icon,\n  heading,\n  subHeading,\n  primaryAction,\n  secondaryAction,\n  classNames,\n  variant = \"empty1\",\n}: EmptyStateProps) => {\n  if (variant === \"empty2\") {\n    return (\n      <Flex\n        align=\"center\"\n        justify=\"center\"\n        className={styles.emptyStatePage}\n      >\n        <Flex\n          direction=\"column\"\n          align=\"start\"\n          gap=\"medium\"\n          className={clsx(styles.emptyStateContent, classNames?.container)}\n        >\n          <div className={clsx(styles.iconContainer, classNames?.iconContainer)}>\n            <div className={clsx(styles.icon, styles.iconLarge, classNames?.icon)}>{icon}</div>\n          </div>\n          \n          {heading && (\n            <Text\n              size={5}\n              weight={500}\n              className={clsx(styles.headerText, classNames?.heading)}\n            >\n              {heading}\n            </Text>\n          )}\n\n          {subHeading && (\n            <Text\n              size={4}\n              weight={400}\n              className={clsx(styles.subHeaderText, classNames?.subHeading)}\n            >\n              {subHeading}\n            </Text>\n          )}\n\n          <Flex gap=\"medium\">\n            {primaryAction}\n            {secondaryAction}\n          </Flex>\n        </Flex>\n      </Flex>\n    );\n  }\n\n\n\n  return (\n    <Flex\n      direction=\"column\"\n      align=\"center\"\n      gap=\"medium\"\n      className={clsx(styles.emptyState, classNames?.container)}\n    >\n      <div className={clsx(styles.iconContainer, classNames?.iconContainer)}>\n        <div className={clsx(styles.icon, classNames?.icon)}>{icon}</div>\n      </div>\n\n      <Flex direction=\"column\" gap=\"small\" align=\"center\">\n        {heading && (\n          <Text\n            size={5}\n            weight={500}\n            className={clsx(styles.headerText, classNames?.heading)}\n          >\n            {heading}\n          </Text>\n        )}\n\n        {subHeading && (\n          <Text\n            size={4}\n            weight={400}\n            className={clsx(styles.subHeaderText, classNames?.subHeading)}\n          >\n            {subHeading}\n          </Text>\n        )}\n      </Flex>\n\n      {primaryAction}\n\n      {secondaryAction}\n    </Flex>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"empty-state.js","sources":["../../../components/empty-state/empty-state.tsx"],"sourcesContent":["import { cx } from 'class-variance-authority';\nimport { Flex } from '../flex';\nimport { Text } from '../text';\nimport styles from './empty-state.module.css';\n\ntype classNameKeys =\n  | 'container'\n  | 'iconContainer'\n  | 'icon'\n  | 'heading'\n  | 'subHeading';\n\ninterface EmptyStateProps {\n  icon: React.ReactNode;\n  heading?: React.ReactNode;\n  subHeading?: React.ReactNode;\n  primaryAction?: React.ReactNode;\n  secondaryAction?: React.ReactNode;\n  classNames?: Partial<Record<classNameKeys, string>>;\n  variant?: 'empty1' | 'empty2';\n}\n\nexport const EmptyState = ({\n  icon,\n  heading,\n  subHeading,\n  primaryAction,\n  secondaryAction,\n  classNames,\n  variant = 'empty1'\n}: EmptyStateProps) => {\n  if (variant === 'empty2') {\n    return (\n      <Flex align='center' justify='center' className={styles.emptyStatePage}>\n        <Flex\n          direction='column'\n          align='start'\n          gap='medium'\n          className={cx(styles.emptyStateContent, classNames?.container)}\n        >\n          <div className={cx(styles.iconContainer, classNames?.iconContainer)}>\n            <div\n              className={cx(styles.icon, styles.iconLarge, classNames?.icon)}\n            >\n              {icon}\n            </div>\n          </div>\n\n          {heading && (\n            <Text\n              size={5}\n              weight={500}\n              className={cx(styles.headerText, classNames?.heading)}\n            >\n              {heading}\n            </Text>\n          )}\n\n          {subHeading && (\n            <Text\n              size={4}\n              weight={400}\n              className={cx(styles.subHeaderText, classNames?.subHeading)}\n            >\n              {subHeading}\n            </Text>\n          )}\n\n          <Flex gap='medium'>\n            {primaryAction}\n            {secondaryAction}\n          </Flex>\n        </Flex>\n      </Flex>\n    );\n  }\n\n  return (\n    <Flex\n      direction='column'\n      align='center'\n      gap='medium'\n      className={cx(styles.emptyState, classNames?.container)}\n    >\n      <div className={cx(styles.iconContainer, classNames?.iconContainer)}>\n        <div className={cx(styles.icon, classNames?.icon)}>{icon}</div>\n      </div>\n\n      <Flex direction='column' gap='small' align='center'>\n        {heading && (\n          <Text\n            size={5}\n            weight={500}\n            className={cx(styles.headerText, classNames?.heading)}\n          >\n            {heading}\n          </Text>\n        )}\n\n        {subHeading && (\n          <Text\n            size={4}\n            weight={400}\n            className={cx(styles.subHeaderText, classNames?.subHeading)}\n          >\n            {subHeading}\n          </Text>\n        )}\n      </Flex>\n\n      {primaryAction}\n\n      {secondaryAction}\n    </Flex>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/components/filter-chip/filter-chip-operation.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+var jsxRuntime = require('../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.cjs');
+var React = require('react');
+var select = require('../select/select.cjs');
+var text = require('../text/text.cjs');
+var filterChip_module = require('./filter-chip.module.css.cjs');
+
+const Operation = ({ label, value, onChange, operations }) => {
+    const operationValue = value?.value ?? '';
+    const handleValueChange = React.useCallback((newValue) => {
+        const operation = operations.find(o => o.value === newValue);
+        if (operation)
+            onChange(operation);
+    }, [operations, onChange]);
+    if (operations.length === 1)
+        return (jsxRuntime.jsxRuntimeExports.jsx(text.Text, { variant: 'secondary', className: filterChip_module.default.selectValue, children: operations[0].label }));
+    return (jsxRuntime.jsxRuntimeExports.jsxs(select.Select, { value: operationValue, onValueChange: handleValueChange, "aria-labelledby": `${label}-label`, children: [jsxRuntime.jsxRuntimeExports.jsx(select.Select.Trigger, { variant: 'text', className: filterChip_module.default.selectValue, "aria-label": `${label} filter operation`, children: jsxRuntime.jsxRuntimeExports.jsx(select.Select.Value, { placeholder: 'Select operation', className: filterChip_module.default.operationText }) }), jsxRuntime.jsxRuntimeExports.jsx(select.Select.Content, { "data-variant": 'filter', children: operations.map(operation => {
+                    return (jsxRuntime.jsxRuntimeExports.jsx(select.Select.Item, { value: operation.value, "aria-label": `Filter ${label} ${operation.label}`, children: operation.label }, operation.value));
+                }) })] }));
+};
+
+exports.Operation = Operation;
+//# sourceMappingURL=filter-chip-operation.cjs.map

package/dist/components/filter-chip/filter-chip-operation.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-chip-operation.cjs","sources":["../../../components/filter-chip/filter-chip-operation.tsx"],"sourcesContent":["import { useCallback } from 'react';\nimport { FilterOperation, FilterOperator } from '~/types/filters';\nimport { Select } from '../select';\nimport { Text } from '../text';\nimport styles from './filter-chip.module.css';\n\ninterface OperationProps {\n  label: string;\n  value?: FilterOperation;\n  onChange: (operation: FilterOperation) => void;\n  operations: FilterOperator<string>[];\n}\n\nexport const Operation = ({\n  label,\n  value,\n  onChange,\n  operations\n}: OperationProps) => {\n  const operationValue = value?.value ?? '';\n\n  const handleValueChange = useCallback(\n    (newValue: string) => {\n      const operation = operations.find(o => o.value === newValue);\n      if (operation) onChange(operation);\n    },\n    [operations, onChange]\n  );\n\n  if (operations.length === 1)\n    return (\n      <Text variant='secondary' className={styles.selectValue}>\n        {operations[0].label}\n      </Text>\n    );\n\n  return (\n    <Select\n      value={operationValue}\n      onValueChange={handleValueChange}\n      aria-labelledby={`${label}-label`}\n    >\n      <Select.Trigger\n        variant='text'\n        className={styles.selectValue}\n        aria-label={`${label} filter operation`}\n      >\n        <Select.Value\n          placeholder='Select operation'\n          className={styles.operationText}\n        />\n      </Select.Trigger>\n      <Select.Content data-variant='filter'>\n        {operations.map(operation => {\n          return (\n            <Select.Item\n              key={operation.value}\n              value={operation.value}\n              aria-label={`Filter ${label} ${operation.label}`}\n            >\n              {operation.label}\n            </Select.Item>\n          );\n        })}\n      </Select.Content>\n    </Select>\n  );\n};\n"],"names":["useCallback","_jsx","Text","styles","_jsxs","Select"],"mappings":";;;;;;;;AAaO,MAAM,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,UAAU,EACK,KAAI;AACnB,IAAA,MAAM,cAAc,GAAG,KAAK,EAAE,KAAK,IAAI,EAAE,CAAC;AAE1C,IAAA,MAAM,iBAAiB,GAAGA,iBAAW,CACnC,CAAC,QAAgB,KAAI;AACnB,QAAA,MAAM,SAAS,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC;AAC7D,QAAA,IAAI,SAAS;YAAE,QAAQ,CAAC,SAAS,CAAC,CAAC;AACrC,KAAC,EACD,CAAC,UAAU,EAAE,QAAQ,CAAC,CACvB,CAAC;AAEF,IAAA,IAAI,UAAU,CAAC,MAAM,KAAK,CAAC;QACzB,QACEC,iCAACC,SAAI,EAAA,EAAC,OAAO,EAAC,WAAW,EAAC,SAAS,EAAEC,yBAAM,CAAC,WAAW,EAAA,QAAA,EACpD,UAAU,CAAC,CAAC,CAAC,CAAC,KAAK,EACf,CAAA,EACP;AAEJ,IAAA,QACEC,iCAAA,CAACC,aAAM,EAAA,EACL,KAAK,EAAE,cAAc,EACrB,aAAa,EAAE,iBAAiB,EAAA,iBAAA,EACf,GAAG,KAAK,CAAA,MAAA,CAAQ,EAEjC,QAAA,EAAA,CAAAJ,gCAAA,CAACI,aAAM,CAAC,OAAO,EAAA,EACb,OAAO,EAAC,MAAM,EACd,SAAS,EAAEF,yBAAM,CAAC,WAAW,EACjB,YAAA,EAAA,CAAA,EAAG,KAAK,CAAA,iBAAA,CAAmB,EAEvC,QAAA,EAAAF,gCAAA,CAACI,aAAM,CAAC,KAAK,EAAA,EACX,WAAW,EAAC,kBAAkB,EAC9B,SAAS,EAAEF,yBAAM,CAAC,aAAa,EAC/B,CAAA,EAAA,CACa,EACjBF,gCAAA,CAACI,aAAM,CAAC,OAAO,EAAc,EAAA,cAAA,EAAA,QAAQ,EAClC,QAAA,EAAA,UAAU,CAAC,GAAG,CAAC,SAAS,IAAG;AAC1B,oBAAA,QACEJ,gCAAA,CAACI,aAAM,CAAC,IAAI,EAAA,EAEV,KAAK,EAAE,SAAS,CAAC,KAAK,EAAA,YAAA,EACV,CAAU,OAAA,EAAA,KAAK,CAAI,CAAA,EAAA,SAAS,CAAC,KAAK,CAAE,CAAA,EAAA,QAAA,EAE/C,SAAS,CAAC,KAAK,EAAA,EAJX,SAAS,CAAC,KAAK,CAKR,EACd;AACJ,iBAAC,CAAC,EAAA,CACa,CACV,EAAA,CAAA,EACT;AACJ;;;;"}

package/dist/components/filter-chip/filter-chip-operation.d.ts

@@ -0,0 +1,10 @@
+import { FilterOperation, FilterOperator } from '~/types/filters';
+interface OperationProps {
+    label: string;
+    value?: FilterOperation;
+    onChange: (operation: FilterOperation) => void;
+    operations: FilterOperator<string>[];
+}
+export declare const Operation: ({ label, value, onChange, operations }: OperationProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=filter-chip-operation.d.ts.map

package/dist/components/filter-chip/filter-chip-operation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-chip-operation.d.ts","sourceRoot":"","sources":["../../../components/filter-chip/filter-chip-operation.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAKlE,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,QAAQ,EAAE,CAAC,SAAS,EAAE,eAAe,KAAK,IAAI,CAAC;IAC/C,UAAU,EAAE,cAAc,CAAC,MAAM,CAAC,EAAE,CAAC;CACtC;AAED,eAAO,MAAM,SAAS,2CAKnB,cAAc,4CAiDhB,CAAC"}

package/dist/components/filter-chip/filter-chip-operation.js

@@ -0,0 +1,22 @@
+import { j as jsxRuntimeExports } from '../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
+import { useCallback } from 'react';
+import { Select } from '../select/select.js';
+import { Text } from '../text/text.js';
+import styles from './filter-chip.module.css.js';
+
+const Operation = ({ label, value, onChange, operations }) => {
+    const operationValue = value?.value ?? '';
+    const handleValueChange = useCallback((newValue) => {
+        const operation = operations.find(o => o.value === newValue);
+        if (operation)
+            onChange(operation);
+    }, [operations, onChange]);
+    if (operations.length === 1)
+        return (jsxRuntimeExports.jsx(Text, { variant: 'secondary', className: styles.selectValue, children: operations[0].label }));
+    return (jsxRuntimeExports.jsxs(Select, { value: operationValue, onValueChange: handleValueChange, "aria-labelledby": `${label}-label`, children: [jsxRuntimeExports.jsx(Select.Trigger, { variant: 'text', className: styles.selectValue, "aria-label": `${label} filter operation`, children: jsxRuntimeExports.jsx(Select.Value, { placeholder: 'Select operation', className: styles.operationText }) }), jsxRuntimeExports.jsx(Select.Content, { "data-variant": 'filter', children: operations.map(operation => {
+                    return (jsxRuntimeExports.jsx(Select.Item, { value: operation.value, "aria-label": `Filter ${label} ${operation.label}`, children: operation.label }, operation.value));
+                }) })] }));
+};
+
+export { Operation };
+//# sourceMappingURL=filter-chip-operation.js.map

package/dist/components/filter-chip/filter-chip-operation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-chip-operation.js","sources":["../../../components/filter-chip/filter-chip-operation.tsx"],"sourcesContent":["import { useCallback } from 'react';\nimport { FilterOperation, FilterOperator } from '~/types/filters';\nimport { Select } from '../select';\nimport { Text } from '../text';\nimport styles from './filter-chip.module.css';\n\ninterface OperationProps {\n  label: string;\n  value?: FilterOperation;\n  onChange: (operation: FilterOperation) => void;\n  operations: FilterOperator<string>[];\n}\n\nexport const Operation = ({\n  label,\n  value,\n  onChange,\n  operations\n}: OperationProps) => {\n  const operationValue = value?.value ?? '';\n\n  const handleValueChange = useCallback(\n    (newValue: string) => {\n      const operation = operations.find(o => o.value === newValue);\n      if (operation) onChange(operation);\n    },\n    [operations, onChange]\n  );\n\n  if (operations.length === 1)\n    return (\n      <Text variant='secondary' className={styles.selectValue}>\n        {operations[0].label}\n      </Text>\n    );\n\n  return (\n    <Select\n      value={operationValue}\n      onValueChange={handleValueChange}\n      aria-labelledby={`${label}-label`}\n    >\n      <Select.Trigger\n        variant='text'\n        className={styles.selectValue}\n        aria-label={`${label} filter operation`}\n      >\n        <Select.Value\n          placeholder='Select operation'\n          className={styles.operationText}\n        />\n      </Select.Trigger>\n      <Select.Content data-variant='filter'>\n        {operations.map(operation => {\n          return (\n            <Select.Item\n              key={operation.value}\n              value={operation.value}\n              aria-label={`Filter ${label} ${operation.label}`}\n            >\n              {operation.label}\n            </Select.Item>\n          );\n        })}\n      </Select.Content>\n    </Select>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;AAaO,MAAM,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,UAAU,EACK,KAAI;AACnB,IAAA,MAAM,cAAc,GAAG,KAAK,EAAE,KAAK,IAAI,EAAE,CAAC;AAE1C,IAAA,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,QAAgB,KAAI;AACnB,QAAA,MAAM,SAAS,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC;AAC7D,QAAA,IAAI,SAAS;YAAE,QAAQ,CAAC,SAAS,CAAC,CAAC;AACrC,KAAC,EACD,CAAC,UAAU,EAAE,QAAQ,CAAC,CACvB,CAAC;AAEF,IAAA,IAAI,UAAU,CAAC,MAAM,KAAK,CAAC;QACzB,QACEA,sBAAC,IAAI,EAAA,EAAC,OAAO,EAAC,WAAW,EAAC,SAAS,EAAE,MAAM,CAAC,WAAW,EAAA,QAAA,EACpD,UAAU,CAAC,CAAC,CAAC,CAAC,KAAK,EACf,CAAA,EACP;AAEJ,IAAA,QACEC,sBAAA,CAAC,MAAM,EAAA,EACL,KAAK,EAAE,cAAc,EACrB,aAAa,EAAE,iBAAiB,EAAA,iBAAA,EACf,GAAG,KAAK,CAAA,MAAA,CAAQ,EAEjC,QAAA,EAAA,CAAAD,qBAAA,CAAC,MAAM,CAAC,OAAO,EAAA,EACb,OAAO,EAAC,MAAM,EACd,SAAS,EAAE,MAAM,CAAC,WAAW,EACjB,YAAA,EAAA,CAAA,EAAG,KAAK,CAAA,iBAAA,CAAmB,EAEvC,QAAA,EAAAA,qBAAA,CAAC,MAAM,CAAC,KAAK,EAAA,EACX,WAAW,EAAC,kBAAkB,EAC9B,SAAS,EAAE,MAAM,CAAC,aAAa,EAC/B,CAAA,EAAA,CACa,EACjBA,qBAAA,CAAC,MAAM,CAAC,OAAO,EAAc,EAAA,cAAA,EAAA,QAAQ,EAClC,QAAA,EAAA,UAAU,CAAC,GAAG,CAAC,SAAS,IAAG;AAC1B,oBAAA,QACEA,qBAAA,CAAC,MAAM,CAAC,IAAI,EAAA,EAEV,KAAK,EAAE,SAAS,CAAC,KAAK,EAAA,YAAA,EACV,CAAU,OAAA,EAAA,KAAK,CAAI,CAAA,EAAA,SAAS,CAAC,KAAK,CAAE,CAAA,EAAA,QAAA,EAE/C,SAAS,CAAC,KAAK,EAAA,EAJX,SAAS,CAAC,KAAK,CAKR,EACd;AACJ,iBAAC,CAAC,EAAA,CACa,CACV,EAAA,CAAA,EACT;AACJ;;;;"}

package/dist/components/filter-chip/filter-chip.cjs

@@ -2,75 +2,63 @@
 
 var jsxRuntime = require('../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.cjs');
 var reactIcons_esm = require('../../node_modules/.pnpm/@radix-ui_react-icons@1.3.0_react@18.2.0/node_modules/@radix-ui/react-icons/dist/react-icons.esm.cjs');
-var React = require('react');
-var box = require('../box/box.cjs');
 var index = require('../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.cjs');
+var React = require('react');
+var filters = require('../../types/filters.cjs');
 var flex = require('../flex/flex.cjs');
+require('../icon-button/icon-button.cjs');
 var select = require('../select/select.cjs');
-require('../tooltip/tooltip.cjs');
 require('../skeleton/skeleton.cjs');
-require('../icon-button/icon-button.cjs');
+require('../tooltip/tooltip.cjs');
 var datePicker = require('../calendar/date-picker.cjs');
 require('../../node_modules/.pnpm/dayjs@1.11.11/node_modules/dayjs/dayjs.min.cjs');
 require('../popover/popover.cjs');
 require('../input-field/input-field.cjs');
 var text = require('../text/text.cjs');
 var textfield = require('../textfield/textfield.cjs');
+var filterChipOperation = require('./filter-chip-operation.cjs');
 var filterChip_module = require('./filter-chip.module.css.cjs');
-var filters = require('../../types/filters.cjs');
 
 const chip = index.cva(filterChip_module.default.chip, {
     variants: {
         variant: {
-            default: filterChip_module.default["chip-default"],
-            text: null,
-        },
+            default: filterChip_module.default['chip-default'],
+            text: null
+        }
     },
     defaultVariants: {
-        variant: "default",
-    },
+        variant: 'default'
+    }
 });
-const Operation = ({ label, columnType = filters.FilterType.string, onOperationSelect, }) => {
-    const filterOptions = filters.filterOperators[columnType] || [];
-    // FilterOperatorTypes gives error as Select returns string
-    const [value, setValue] = React.useState(filterOptions?.[0]?.value);
-    React.useEffect(() => {
-        const selectedOption = filterOptions.find(o => o.value === value);
-        if (selectedOption) {
-            onOperationSelect(selectedOption);
-        }
-    }, [value]);
-    return (jsxRuntime.jsxRuntimeExports.jsxs(select.Select, { value: value, onValueChange: setValue, "aria-labelledby": `${label}-label`, children: [jsxRuntime.jsxRuntimeExports.jsx(select.Select.Trigger, { variant: "text", className: filterChip_module.default.selectValue, "aria-label": `${label} filter operation`, children: jsxRuntime.jsxRuntimeExports.jsx(select.Select.Value, { placeholder: "Select operation", className: filterChip_module.default.operationText }) }), jsxRuntime.jsxRuntimeExports.jsx(select.Select.Content, { "data-variant": "filter", children: filterOptions.map(opt => {
-                    return (jsxRuntime.jsxRuntimeExports.jsx(select.Select.Item, { value: opt.value, "aria-label": `Filter ${label} ${opt.label}`, children: opt.label }, opt.value));
-                }) })] }));
-};
-const FilterChip = ({ label, value, onRemove, className, ref, columnType = filters.FilterType.string, options = [], onValueChange, onOperationChange, leadingIcon, variant, ...props }) => {
-    const [operation, setOperation] = React.useState();
-    const [filterValue, setFilterValue] = React.useState(value || "");
-    const showOnRemove = typeof onRemove === "function";
-    React.useEffect(() => {
-        if (onOperationChange && operation?.value) {
-            onOperationChange(operation?.value);
-        }
-    }, [operation?.value]);
-    React.useEffect(() => {
-        if (onValueChange) {
-            onValueChange(filterValue);
-        }
-    }, [filterValue]);
+const FilterChip = ({ label, value, onRemove, className, ref, columnType = filters.FilterType.string, options = [], onValueChange, onOperationChange, leadingIcon, variant, operations, ...props }) => {
+    const computedOperations = operations?.length
+        ? operations
+        : filters.filterOperators[columnType];
+    const [operation, setOperation] = React.useState(computedOperations?.[0]);
+    const [filterValue, setFilterValue] = React.useState(value || '');
+    const showOnRemove = typeof onRemove === 'function';
+    const handleOperationChange = React.useCallback((operation) => {
+        setOperation(operation);
+        if (operation?.value)
+            onOperationChange?.(operation.value);
+    }, [onOperationChange]);
+    const handleFilterValueChange = React.useCallback((value) => {
+        setFilterValue(value);
+        onValueChange?.(value, operation?.value ?? '');
+    }, [operation, onValueChange]);
     const renderValueInput = () => {
         switch (columnType) {
             case filters.FilterType.select:
-                return (jsxRuntime.jsxRuntimeExports.jsxs(select.Select, { value: filterValue.toString(), onValueChange: setFilterValue, children: [jsxRuntime.jsxRuntimeExports.jsx(select.Select.Trigger, { variant: "text", className: index.cx(filterChip_module.default.selectValue, filterChip_module.default.selectColumn), children: jsxRuntime.jsxRuntimeExports.jsx(select.Select.Value, { placeholder: "Select value" }) }), jsxRuntime.jsxRuntimeExports.jsx(select.Select.Content, { "data-variant": "filter", children: options.map(opt => (jsxRuntime.jsxRuntimeExports.jsx(select.Select.Item, { value: opt.value.toString(), children: opt.label }, opt.value.toString()))) })] }));
+                return (jsxRuntime.jsxRuntimeExports.jsxs(select.Select, { value: filterValue.toString(), onValueChange: handleFilterValueChange, children: [jsxRuntime.jsxRuntimeExports.jsx(select.Select.Trigger, { variant: 'text', className: index.cx(filterChip_module.default.selectValue, filterChip_module.default.selectColumn), children: jsxRuntime.jsxRuntimeExports.jsx(select.Select.Value, { placeholder: 'Select value' }) }), jsxRuntime.jsxRuntimeExports.jsx(select.Select.Content, { "data-variant": 'filter', children: options.map(opt => (jsxRuntime.jsxRuntimeExports.jsx(select.Select.Item, { value: opt.value.toString(), children: opt.label }, opt.value.toString()))) })] }));
             case filters.FilterType.date:
-                return (jsxRuntime.jsxRuntimeExports.jsx("div", { className: filterChip_module.default.dateFieldWrapper, children: jsxRuntime.jsxRuntimeExports.jsx(datePicker.DatePicker, { value: filterValue, onSelect: date => setFilterValue(date), showCalendarIcon: false, inputFieldProps: { className: filterChip_module.default.dateField } }) }));
+                return (jsxRuntime.jsxRuntimeExports.jsx("div", { className: filterChip_module.default.dateFieldWrapper, children: jsxRuntime.jsxRuntimeExports.jsx(datePicker.DatePicker, { value: filterValue, onSelect: date => handleFilterValueChange(date), showCalendarIcon: false, inputFieldProps: { className: filterChip_module.default.dateField } }) }));
             default:
-                return (jsxRuntime.jsxRuntimeExports.jsx("div", { className: filterChip_module.default.textFieldWrapper, children: jsxRuntime.jsxRuntimeExports.jsx(textfield.TextField, { className: filterChip_module.default.textField, value: filterValue, onChange: e => setFilterValue(e.target.value) }) }));
+                return (jsxRuntime.jsxRuntimeExports.jsx("div", { className: filterChip_module.default.textFieldWrapper, children: jsxRuntime.jsxRuntimeExports.jsx(textfield.TextField, { className: filterChip_module.default.textField, value: filterValue, onChange: e => handleFilterValueChange(e.target.value) }) }));
         }
     };
-    return (jsxRuntime.jsxRuntimeExports.jsx(box.Box, { ref: ref, className: chip({ variant, className }), role: "group", "aria-label": `Filter by ${label}`, ...props, children: jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { align: "center", children: [jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { align: "center", gap: 2, children: [leadingIcon && (jsxRuntime.jsxRuntimeExports.jsx("span", { className: filterChip_module.default.leadingIcon, "aria-hidden": "true", children: leadingIcon })), jsxRuntime.jsxRuntimeExports.jsx(text.Text, { size: 2, weight: "normal", children: label })] }), jsxRuntime.jsxRuntimeExports.jsx(Operation, { columnType: columnType, label: label, onOperationSelect: setOperation }), renderValueInput(), showOnRemove && (jsxRuntime.jsxRuntimeExports.jsx("button", { className: filterChip_module.default.removeIconContainer, "aria-label": `Remove ${label} filter`, onClick: onRemove, children: jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.Cross1Icon, { className: filterChip_module.default.removeIcon }) }))] }) }));
+    return (jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { align: 'center', ref: ref, className: chip({ variant, className }), role: 'group', "aria-label": `Filter by ${label}`, ...props, children: [jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { align: 'center', gap: 2, className: filterChip_module.default['chip-label'], children: [leadingIcon && (jsxRuntime.jsxRuntimeExports.jsx("span", { className: filterChip_module.default.leadingIcon, "aria-hidden": 'true', children: leadingIcon })), jsxRuntime.jsxRuntimeExports.jsx(text.Text, { size: 2, weight: 'normal', children: label })] }), jsxRuntime.jsxRuntimeExports.jsx(filterChipOperation.Operation, { operations: computedOperations, label: label, value: operation, onChange: handleOperationChange }), renderValueInput(), showOnRemove && (jsxRuntime.jsxRuntimeExports.jsx("button", { className: filterChip_module.default.removeIconContainer, "aria-label": `Remove ${label} filter`, onClick: onRemove, children: jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.Cross1Icon, { className: filterChip_module.default.removeIcon }) }))] }));
 };
-FilterChip.displayName = "FilterChip";
+FilterChip.displayName = 'FilterChip';
 
 exports.FilterChip = FilterChip;
 //# sourceMappingURL=filter-chip.cjs.map