@cryptlex/web-components 6.7.22 → 6.7.24

package/dist/components/date-picker.d.ts

@@ -2,6 +2,7 @@ import { DatePickerProps as AriaDatePickerProps, DateRangePickerProps as AriaDat
 import { ZonedDateTime } from '@internationalized/date';
 import { FormFieldProps } from './form';
 interface DatePickerProps<T extends AriaDateValue> extends AriaDatePickerProps<T>, FormFieldProps {
+    inputClassName?: string;
 }
 /**
  * Date picker component for selecting single dates.
@@ -19,7 +20,7 @@ interface DatePickerProps<T extends AriaDateValue> extends AriaDatePickerProps<T
  * />
  * ```
  */
-export declare function DatePicker<T extends AriaDateValue>({ label, description, errorMessage, requiredIndicator, className, ...props }: DatePickerProps<T>): import("react").JSX.Element;
+export declare function DatePicker<T extends AriaDateValue>({ label, description, errorMessage, requiredIndicator, className, inputClassName, ...props }: DatePickerProps<T>): import("react").JSX.Element;
 /**
  * Form-integrated date picker that works with TanStack Form.
  *

package/dist/components/date-picker.js

@@ -1,2 +1,2 @@
-"use client";import{classNames as e}from"../utilities/theme.js";import{_ as t}from"../icons.js";import{useFieldContext as n}from"../utilities/form-context.js";import{Button as r}from"./button.js";import{FieldGroup as i,FormField as a}from"./form.js";import{getFieldErrorMessage as o}from"../utilities/form.js";import{Calendar as s,RangeCalendar as c}from"./calendar.js";import{DateInput as l}from"./datefield.js";import{jsx as u,jsxs as d}from"react/jsx-runtime";import{DatePicker as f,DateRangePicker as p,Dialog as m,Popover as h,composeRenderProps as g}from"react-aria-components";import{getLocalTimeZone as _,parseAbsolute as v,toZoned as y}from"@internationalized/date";var b=({className:t,popoverClassName:n,...r})=>u(h,{className:g(n,t=>e(`w-auto p-3 bg-surface-primary border`,t)),children:u(m,{className:e(`flex w-full flex-col gap-y-2 outline-none sm:flex-row sm:gap-x-icon sm:gap-y-0`,t),...r})});function x({label:n,description:o,errorMessage:c,requiredIndicator:p,className:m,...h}){return d(f,{className:g(m,t=>e(`group flex flex-col gap-2`,t)),...h,children:[u(a,{label:n,description:o,errorMessage:c,requiredIndicator:p,children:d(i,{children:[u(l,{className:`flex-1`,variant:`ghost`}),u(r,{variant:`ghost`,size:`icon`,className:`-me-3 ms-2`,children:u(t,{"aria-hidden":!0})})]})}),u(b,{children:u(s,{})})]})}function S({...e}){let t=n({disabled:e.isDisabled});return u(x,{requiredIndicator:t.isRequired,hideTimeZone:!0,granularity:`day`,isDisabled:e.isDisabled||t.isSubmitting,value:t.state.value?v(t.state.value,_()):null,onChange:e=>e?t.handleChange(y(e,_()).toAbsoluteString()):t.handleChange(null),onBlur:t.handleBlur,isInvalid:!!o(t),errorMessage:o(t),...e})}function C({label:n,description:o,errorMessage:s,className:f,...m}){return d(p,{className:g(f,t=>e(`group flex flex-col gap-2`,t)),...m,children:[u(a,{label:n,errorMessage:s,description:o,children:d(i,{children:[u(l,{variant:`ghost`,slot:`start`}),u(`span`,{"aria-hidden":!0,className:`px-2 body-sm text-muted-foreground`,children:`-`}),u(l,{className:`flex-1`,variant:`ghost`,slot:`end`}),u(r,{variant:`ghost`,size:`icon`,className:`mr-1 data-[focus-visible]:ring-offset-0`,children:u(t,{"aria-hidden":!0})})]})}),u(b,{children:u(c,{})})]})}export{x as DatePicker,C as DateRangePicker,S as TfDatePicker};
+"use client";import{classNames as e}from"../utilities/theme.js";import{_ as t}from"../icons.js";import{useFieldContext as n}from"../utilities/form-context.js";import{Button as r}from"./button.js";import{FieldGroup as i,FormField as a}from"./form.js";import{getFieldErrorMessage as o}from"../utilities/form.js";import{Calendar as s,RangeCalendar as c}from"./calendar.js";import{DateInput as l}from"./datefield.js";import{jsx as u,jsxs as d}from"react/jsx-runtime";import{DatePicker as f,DateRangePicker as p,Dialog as m,Popover as h,composeRenderProps as g}from"react-aria-components";import{getLocalTimeZone as _,parseAbsolute as v,toZoned as y}from"@internationalized/date";var b=({className:t,popoverClassName:n,...r})=>u(h,{className:g(n,t=>e(`w-auto p-3 bg-surface-primary border`,t)),children:u(m,{className:e(`flex w-full flex-col gap-y-2 outline-none sm:flex-row sm:gap-x-icon sm:gap-y-0`,t),...r})});function x({label:n,description:o,errorMessage:c,requiredIndicator:p,className:m,inputClassName:h,..._}){return d(f,{className:g(m,t=>e(`group flex flex-col gap-2`,t)),..._,children:[u(a,{label:n,description:o,errorMessage:c,requiredIndicator:p,children:d(i,{className:h,children:[u(l,{className:`flex-1`,variant:`ghost`}),u(r,{variant:`ghost`,size:`icon`,className:`-me-3 ms-2`,children:u(t,{"aria-hidden":!0})})]})}),u(b,{children:u(s,{})})]})}function S({...e}){let t=n({disabled:e.isDisabled});return u(x,{requiredIndicator:t.isRequired,hideTimeZone:!0,granularity:`day`,isDisabled:e.isDisabled||t.isSubmitting,value:t.state.value?v(t.state.value,_()):null,onChange:e=>e?t.handleChange(y(e,_()).toAbsoluteString()):t.handleChange(null),onBlur:t.handleBlur,isInvalid:!!o(t),errorMessage:o(t),...e})}function C({label:n,description:o,errorMessage:s,className:f,...m}){return d(p,{className:g(f,t=>e(`group flex flex-col gap-2`,t)),...m,children:[u(a,{label:n,errorMessage:s,description:o,children:d(i,{children:[u(l,{variant:`ghost`,slot:`start`}),u(`span`,{"aria-hidden":!0,className:`px-2 body-sm text-muted-foreground`,children:`-`}),u(l,{className:`flex-1`,variant:`ghost`,slot:`end`}),u(r,{variant:`ghost`,size:`icon`,className:`mr-1 data-[focus-visible]:ring-offset-0`,children:u(t,{"aria-hidden":!0})})]})}),u(b,{children:u(c,{})})]})}export{x as DatePicker,C as DateRangePicker,S as TfDatePicker};
 //# sourceMappingURL=date-picker.js.map

package/dist/components/date-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.js","names":[],"sources":["../../lib/components/date-picker.tsx"],"sourcesContent":["'use client';\nimport {\n    DatePicker as AriaDatePicker,\n    DatePickerProps as AriaDatePickerProps,\n    DateRangePicker as AriaDateRangePicker,\n    DateRangePickerProps as AriaDateRangePickerProps,\n    DateValue as AriaDateValue,\n    Dialog as AriaDialog,\n    DialogProps as AriaDialogProps,\n    PopoverProps as AriaPopoverProps,\n    composeRenderProps,\n    Popover,\n} from 'react-aria-components';\n\nimport { getLocalTimeZone, parseAbsolute, toZoned, type ZonedDateTime } from '@internationalized/date';\nimport { Button } from '../components/button';\nimport { Calendar, RangeCalendar } from '../components/calendar';\nimport { DateInput } from '../components/datefield';\nimport { getFieldErrorMessage } from '../utilities/form';\nimport { useFieldContext } from '../utilities/form-context';\nimport { classNames } from '../utilities/theme';\nimport { FieldGroup, FormField, type FormFieldProps } from './form';\nimport { IcDate } from './icons';\n\n/**\n * Popover container for date picker content.\n *\n * @remarks\n * Provides consistent styling and positioning for the calendar popup.\n */\nconst DatePickerContent = ({\n    className,\n    popoverClassName,\n    ...props\n}: AriaDialogProps & { popoverClassName?: AriaPopoverProps['className'] }) => (\n    <Popover\n        className={composeRenderProps(popoverClassName, className =>\n            classNames('w-auto p-3 bg-surface-primary border', className)\n        )}\n    >\n        <AriaDialog\n            className={classNames(\n                'flex w-full flex-col gap-y-2 outline-none sm:flex-row sm:gap-x-icon sm:gap-y-0',\n                className\n            )}\n            {...props}\n        />\n    </Popover>\n);\n\ninterface DatePickerProps<T extends AriaDateValue> extends AriaDatePickerProps<T>, FormFieldProps {}\n\n/**\n * Date picker component for selecting single dates.\n *\n * @remarks\n * Built with React Aria for accessibility and internationalization support.\n * Supports date validation, min/max values, and custom date formatting.\n *\n * @example\n * ```tsx\n * <DatePicker\n *   label=\"Event Date\"\n *   isRequired\n *   minValue={today(getLocalTimeZone())}\n * />\n * ```\n */\nexport function DatePicker<T extends AriaDateValue>({\n    label,\n    description,\n    errorMessage,\n    requiredIndicator,\n    className,\n    ...props\n}: DatePickerProps<T>) {\n    return (\n        <AriaDatePicker\n            className={composeRenderProps(className, className => classNames('group flex flex-col gap-2', className))}\n            {...props}\n        >\n            <FormField {...{ label, description, errorMessage, requiredIndicator }}>\n                <FieldGroup>\n                    <DateInput className=\"flex-1\" variant=\"ghost\" />\n                    <Button variant=\"ghost\" size=\"icon\" className={'-me-3 ms-2'}>\n                        <IcDate aria-hidden />\n                    </Button>\n                </FieldGroup>\n            </FormField>\n            <DatePickerContent>\n                <Calendar />\n            </DatePickerContent>\n        </AriaDatePicker>\n    );\n}\n\n/**\n * Form-integrated date picker that works with TanStack Form.\n *\n * @remarks\n * Automatically handles form state, validation, and error messages.\n * Uses the field context to connect with the form's validation system.\n */\nexport function TfDatePicker({\n    ...props\n}: Omit<DatePickerProps<ZonedDateTime>, 'value' | 'onChange' | 'onBlur' | 'isInvalid' | 'errorMessage'>) {\n    const field = useFieldContext<string | null>({ disabled: props.isDisabled });\n    return (\n        <DatePicker\n            requiredIndicator={field.isRequired}\n            hideTimeZone\n            granularity=\"day\"\n            isDisabled={props.isDisabled || field.isSubmitting}\n            value={field.state.value ? parseAbsolute(field.state.value, getLocalTimeZone()) : null}\n            onChange={v =>\n                v ? field.handleChange(toZoned(v, getLocalTimeZone()).toAbsoluteString()) : field.handleChange(null)\n            }\n            onBlur={field.handleBlur}\n            isInvalid={!!getFieldErrorMessage(field)}\n            errorMessage={getFieldErrorMessage(field)}\n            {...props}\n        />\n    );\n}\n\ninterface DateRangePickerProps<T extends AriaDateValue> extends AriaDateRangePickerProps<T>, FormFieldProps {}\n\n/**\n * Date range picker component for selecting start and end dates.\n *\n * @remarks\n * Allows users to select a date range with start and end values.\n * Built with React Aria for accessibility and internationalization support.\n * Features separate input fields for start and end dates with range validation.\n *\n * @example\n * ```tsx\n * <DateRangePicker\n *   label=\"Booking Period\"\n *   description=\"Select your stay dates\"\n *   isRequired\n * />\n * ```\n */\nexport function DateRangePicker<T extends AriaDateValue>({\n    label,\n    description,\n    errorMessage,\n    className,\n    ...props\n}: DateRangePickerProps<T>) {\n    return (\n        <AriaDateRangePicker\n            className={composeRenderProps(className, className => classNames('group flex flex-col gap-2', className))}\n            {...props}\n        >\n            <FormField label={label} errorMessage={errorMessage} description={description}>\n                <FieldGroup>\n                    <DateInput variant=\"ghost\" slot={'start'} />\n                    <span aria-hidden className=\"px-2 body-sm text-muted-foreground\">\n                        -\n                    </span>\n                    <DateInput className=\"flex-1\" variant=\"ghost\" slot={'end'} />\n                    <Button variant=\"ghost\" size=\"icon\" className=\"mr-1 data-[focus-visible]:ring-offset-0\">\n                        <IcDate aria-hidden />\n                    </Button>\n                </FieldGroup>\n            </FormField>\n            <DatePickerContent>\n                <RangeCalendar />\n            </DatePickerContent>\n        </AriaDateRangePicker>\n    );\n}\n"],"mappings":"mqBA8BA,IAAM,GAAqB,CACvB,YACA,mBACA,GAAG,KAEH,EAAC,EAAD,CACI,UAAW,EAAmB,EAAkB,GAC5C,EAAW,uCAAwC,CAAS,CAChE,EAEA,SAAA,EAAC,EAAD,CACI,UAAW,EACP,iFACA,CACJ,EACA,GAAI,CACP,CAAA,CACI,CAAA,EAqBb,SAAgB,EAAoC,CAChD,QACA,cACA,eACA,oBACA,YACA,GAAG,GACgB,CACnB,OACI,EAAC,EAAD,CACI,UAAW,EAAmB,EAAW,GAAa,EAAW,4BAA6B,CAAS,CAAC,EACxG,GAAI,EAFR,SAAA,CAII,EAAC,EAAD,CAAiB,QAAO,cAAa,eAAc,oBAC/C,SAAA,EAAC,EAAD,CAAA,SAAA,CACI,EAAC,EAAD,CAAW,UAAU,SAAS,QAAQ,OAAS,CAAA,EAC/C,EAAC,EAAD,CAAQ,QAAQ,QAAQ,KAAK,OAAO,UAAW,aAC3C,SAAA,EAAC,EAAD,CAAQ,cAAA,EAAa,CAAA,CACjB,CAAA,CACA,CAAA,CAAA,CACL,CAAA,EACX,EAAC,EAAD,CAAA,SACI,EAAC,EAAD,CAAW,CAAA,CACI,CAAA,CACP,GAExB,CASA,SAAgB,EAAa,CACzB,GAAG,GACkG,CACrG,IAAM,EAAQ,EAA+B,CAAE,SAAU,EAAM,UAAW,CAAC,EAC3E,OACI,EAAC,EAAD,CACI,kBAAmB,EAAM,WACzB,aAAA,GACA,YAAY,MACZ,WAAY,EAAM,YAAc,EAAM,aACtC,MAAO,EAAM,MAAM,MAAQ,EAAc,EAAM,MAAM,MAAO,EAAiB,CAAC,EAAI,KAClF,SAAU,GACN,EAAI,EAAM,aAAa,EAAQ,EAAG,EAAiB,CAAC,CAAC,CAAC,iBAAiB,CAAC,EAAI,EAAM,aAAa,IAAI,EAEvG,OAAQ,EAAM,WACd,UAAW,CAAC,CAAC,EAAqB,CAAK,EACvC,aAAc,EAAqB,CAAK,EACxC,GAAI,CACP,CAAA,CAET,CAqBA,SAAgB,EAAyC,CACrD,QACA,cACA,eACA,YACA,GAAG,GACqB,CACxB,OACI,EAAC,EAAD,CACI,UAAW,EAAmB,EAAW,GAAa,EAAW,4BAA6B,CAAS,CAAC,EACxG,GAAI,EAFR,SAAA,CAII,EAAC,EAAD,CAAkB,QAAqB,eAA2B,cAC9D,SAAA,EAAC,EAAD,CAAA,SAAA,CACI,EAAC,EAAD,CAAW,QAAQ,QAAQ,KAAM,OAAU,CAAA,EAC3C,EAAC,OAAD,CAAM,cAAA,GAAY,UAAU,qCAAqC,SAAA,GAE3D,CAAA,EACN,EAAC,EAAD,CAAW,UAAU,SAAS,QAAQ,QAAQ,KAAM,KAAQ,CAAA,EAC5D,EAAC,EAAD,CAAQ,QAAQ,QAAQ,KAAK,OAAO,UAAU,0CAC1C,SAAA,EAAC,EAAD,CAAQ,cAAA,EAAa,CAAA,CACjB,CAAA,CACA,CAAA,CAAA,CACL,CAAA,EACX,EAAC,EAAD,CAAA,SACI,EAAC,EAAD,CAAgB,CAAA,CACD,CAAA,CACF,GAE7B"}
+{"version":3,"file":"date-picker.js","names":[],"sources":["../../lib/components/date-picker.tsx"],"sourcesContent":["'use client';\nimport {\n    DatePicker as AriaDatePicker,\n    DatePickerProps as AriaDatePickerProps,\n    DateRangePicker as AriaDateRangePicker,\n    DateRangePickerProps as AriaDateRangePickerProps,\n    DateValue as AriaDateValue,\n    Dialog as AriaDialog,\n    DialogProps as AriaDialogProps,\n    PopoverProps as AriaPopoverProps,\n    composeRenderProps,\n    Popover,\n} from 'react-aria-components';\n\nimport { getLocalTimeZone, parseAbsolute, toZoned, type ZonedDateTime } from '@internationalized/date';\nimport { Button } from '../components/button';\nimport { Calendar, RangeCalendar } from '../components/calendar';\nimport { DateInput } from '../components/datefield';\nimport { getFieldErrorMessage } from '../utilities/form';\nimport { useFieldContext } from '../utilities/form-context';\nimport { classNames } from '../utilities/theme';\nimport { FieldGroup, FormField, type FormFieldProps } from './form';\nimport { IcDate } from './icons';\n\n/**\n * Popover container for date picker content.\n *\n * @remarks\n * Provides consistent styling and positioning for the calendar popup.\n */\nconst DatePickerContent = ({\n    className,\n    popoverClassName,\n    ...props\n}: AriaDialogProps & { popoverClassName?: AriaPopoverProps['className'] }) => (\n    <Popover\n        className={composeRenderProps(popoverClassName, className =>\n            classNames('w-auto p-3 bg-surface-primary border', className)\n        )}\n    >\n        <AriaDialog\n            className={classNames(\n                'flex w-full flex-col gap-y-2 outline-none sm:flex-row sm:gap-x-icon sm:gap-y-0',\n                className\n            )}\n            {...props}\n        />\n    </Popover>\n);\n\ninterface DatePickerProps<T extends AriaDateValue> extends AriaDatePickerProps<T>, FormFieldProps {\n    inputClassName?: string;\n}\n\n/**\n * Date picker component for selecting single dates.\n *\n * @remarks\n * Built with React Aria for accessibility and internationalization support.\n * Supports date validation, min/max values, and custom date formatting.\n *\n * @example\n * ```tsx\n * <DatePicker\n *   label=\"Event Date\"\n *   isRequired\n *   minValue={today(getLocalTimeZone())}\n * />\n * ```\n */\nexport function DatePicker<T extends AriaDateValue>({\n    label,\n    description,\n    errorMessage,\n    requiredIndicator,\n    className,\n    inputClassName,\n    ...props\n}: DatePickerProps<T>) {\n    return (\n        <AriaDatePicker\n            className={composeRenderProps(className, className => classNames('group flex flex-col gap-2', className))}\n            {...props}\n        >\n            <FormField {...{ label, description, errorMessage, requiredIndicator }}>\n                <FieldGroup className={inputClassName}>\n                    <DateInput className=\"flex-1\" variant=\"ghost\" />\n                    <Button variant=\"ghost\" size=\"icon\" className={'-me-3 ms-2'}>\n                        <IcDate aria-hidden />\n                    </Button>\n                </FieldGroup>\n            </FormField>\n            <DatePickerContent>\n                <Calendar />\n            </DatePickerContent>\n        </AriaDatePicker>\n    );\n}\n\n/**\n * Form-integrated date picker that works with TanStack Form.\n *\n * @remarks\n * Automatically handles form state, validation, and error messages.\n * Uses the field context to connect with the form's validation system.\n */\nexport function TfDatePicker({\n    ...props\n}: Omit<DatePickerProps<ZonedDateTime>, 'value' | 'onChange' | 'onBlur' | 'isInvalid' | 'errorMessage'>) {\n    const field = useFieldContext<string | null>({ disabled: props.isDisabled });\n    return (\n        <DatePicker\n            requiredIndicator={field.isRequired}\n            hideTimeZone\n            granularity=\"day\"\n            isDisabled={props.isDisabled || field.isSubmitting}\n            value={field.state.value ? parseAbsolute(field.state.value, getLocalTimeZone()) : null}\n            onChange={v =>\n                v ? field.handleChange(toZoned(v, getLocalTimeZone()).toAbsoluteString()) : field.handleChange(null)\n            }\n            onBlur={field.handleBlur}\n            isInvalid={!!getFieldErrorMessage(field)}\n            errorMessage={getFieldErrorMessage(field)}\n            {...props}\n        />\n    );\n}\n\ninterface DateRangePickerProps<T extends AriaDateValue> extends AriaDateRangePickerProps<T>, FormFieldProps {}\n\n/**\n * Date range picker component for selecting start and end dates.\n *\n * @remarks\n * Allows users to select a date range with start and end values.\n * Built with React Aria for accessibility and internationalization support.\n * Features separate input fields for start and end dates with range validation.\n *\n * @example\n * ```tsx\n * <DateRangePicker\n *   label=\"Booking Period\"\n *   description=\"Select your stay dates\"\n *   isRequired\n * />\n * ```\n */\nexport function DateRangePicker<T extends AriaDateValue>({\n    label,\n    description,\n    errorMessage,\n    className,\n    ...props\n}: DateRangePickerProps<T>) {\n    return (\n        <AriaDateRangePicker\n            className={composeRenderProps(className, className => classNames('group flex flex-col gap-2', className))}\n            {...props}\n        >\n            <FormField label={label} errorMessage={errorMessage} description={description}>\n                <FieldGroup>\n                    <DateInput variant=\"ghost\" slot={'start'} />\n                    <span aria-hidden className=\"px-2 body-sm text-muted-foreground\">\n                        -\n                    </span>\n                    <DateInput className=\"flex-1\" variant=\"ghost\" slot={'end'} />\n                    <Button variant=\"ghost\" size=\"icon\" className=\"mr-1 data-[focus-visible]:ring-offset-0\">\n                        <IcDate aria-hidden />\n                    </Button>\n                </FieldGroup>\n            </FormField>\n            <DatePickerContent>\n                <RangeCalendar />\n            </DatePickerContent>\n        </AriaDateRangePicker>\n    );\n}\n"],"mappings":"mqBA8BA,IAAM,GAAqB,CACvB,YACA,mBACA,GAAG,KAEH,EAAC,EAAD,CACI,UAAW,EAAmB,EAAkB,GAC5C,EAAW,uCAAwC,CAAS,CAChE,EAEA,SAAA,EAAC,EAAD,CACI,UAAW,EACP,iFACA,CACJ,EACA,GAAI,CACP,CAAA,CACI,CAAA,EAuBb,SAAgB,EAAoC,CAChD,QACA,cACA,eACA,oBACA,YACA,iBACA,GAAG,GACgB,CACnB,OACI,EAAC,EAAD,CACI,UAAW,EAAmB,EAAW,GAAa,EAAW,4BAA6B,CAAS,CAAC,EACxG,GAAI,EAFR,SAAA,CAII,EAAC,EAAD,CAAiB,QAAO,cAAa,eAAc,oBAC/C,SAAA,EAAC,EAAD,CAAY,UAAW,EAAvB,SAAA,CACI,EAAC,EAAD,CAAW,UAAU,SAAS,QAAQ,OAAS,CAAA,EAC/C,EAAC,EAAD,CAAQ,QAAQ,QAAQ,KAAK,OAAO,UAAW,aAC3C,SAAA,EAAC,EAAD,CAAQ,cAAA,EAAa,CAAA,CACjB,CAAA,CACA,GACL,CAAA,EACX,EAAC,EAAD,CAAA,SACI,EAAC,EAAD,CAAW,CAAA,CACI,CAAA,CACP,GAExB,CASA,SAAgB,EAAa,CACzB,GAAG,GACkG,CACrG,IAAM,EAAQ,EAA+B,CAAE,SAAU,EAAM,UAAW,CAAC,EAC3E,OACI,EAAC,EAAD,CACI,kBAAmB,EAAM,WACzB,aAAA,GACA,YAAY,MACZ,WAAY,EAAM,YAAc,EAAM,aACtC,MAAO,EAAM,MAAM,MAAQ,EAAc,EAAM,MAAM,MAAO,EAAiB,CAAC,EAAI,KAClF,SAAU,GACN,EAAI,EAAM,aAAa,EAAQ,EAAG,EAAiB,CAAC,CAAC,CAAC,iBAAiB,CAAC,EAAI,EAAM,aAAa,IAAI,EAEvG,OAAQ,EAAM,WACd,UAAW,CAAC,CAAC,EAAqB,CAAK,EACvC,aAAc,EAAqB,CAAK,EACxC,GAAI,CACP,CAAA,CAET,CAqBA,SAAgB,EAAyC,CACrD,QACA,cACA,eACA,YACA,GAAG,GACqB,CACxB,OACI,EAAC,EAAD,CACI,UAAW,EAAmB,EAAW,GAAa,EAAW,4BAA6B,CAAS,CAAC,EACxG,GAAI,EAFR,SAAA,CAII,EAAC,EAAD,CAAkB,QAAqB,eAA2B,cAC9D,SAAA,EAAC,EAAD,CAAA,SAAA,CACI,EAAC,EAAD,CAAW,QAAQ,QAAQ,KAAM,OAAU,CAAA,EAC3C,EAAC,OAAD,CAAM,cAAA,GAAY,UAAU,qCAAqC,SAAA,GAE3D,CAAA,EACN,EAAC,EAAD,CAAW,UAAU,SAAS,QAAQ,QAAQ,KAAM,KAAQ,CAAA,EAC5D,EAAC,EAAD,CAAQ,QAAQ,QAAQ,KAAK,OAAO,UAAU,0CAC1C,SAAA,EAAC,EAAD,CAAQ,cAAA,EAAa,CAAA,CACjB,CAAA,CACA,CAAA,CAAA,CACL,CAAA,EACX,EAAC,EAAD,CAAA,SACI,EAAC,EAAD,CAAgB,CAAA,CACD,CAAA,CACF,GAE7B"}

package/dist/components/id-search.js

@@ -1,2 +1,2 @@
-"use client";import{getEmptyLabel as e,isEmptyValue as t}from"../utilities/empty-option.js";import{classNames as n}from"../utilities/theme.js";import{useCtxClient as r}from"../utilities/ctx-client.js";import{useFieldContext as i}from"../utilities/form-context.js";import{FormField as a}from"./form.js";import{getFieldErrorMessage as o}from"../utilities/form.js";import{ComboBox as s,ComboBoxChip as c,ComboBoxChipList as l,ComboBoxFieldGroup as u,ComboBoxInput as d,ComboBoxItem as ee,ComboBoxListBox as f,ComboBoxPopover as p}from"./combobox.js";import{useId as m,useMemo as h,useState as g}from"react";import{jsx as _,jsxs as v}from"react/jsx-runtime";import{keepPreviousData as y,useQuery as b}from"@tanstack/react-query";function x(e){return e.name??e.displayName??``}function S(e){return Array.isArray(e)&&e.every(e=>{if(!e||typeof e!=`object`||!(`id`in e)||typeof e.id!=`string`)return!1;let t=`name`in e&&typeof e.name==`string`,n=`displayName`in e&&typeof e.displayName==`string`;return t||n})}function C({label:i,description:o,errorMessage:C,requiredIndicator:w,isDisabled:T,isInvalid:E,onBlur:D,path:O,onChange:k,value:A,accessor:j,getItemLabel:M,defaultParams:N,className:P,emptyOption:F,selectionMode:I,...L}){if(O===`/v3/me`)throw Error(`Path "/v3/me" is not supported with IdSearch since it is not a searchable resource.`);let R=m(),z=L.id||R,B=r(),V=M??x,H=e=>String(e[j]??e.id),U=e=>{let t=V(e);return typeof t==`string`?t:x(e)},[W,G]=g(``),{data:K,isError:q,error:J}=b({queryKey:[`get`,O,W],queryFn:async()=>{let e=await B.GET(O,{params:{query:{...N?.query,search:W,limit:50,page:1},path:{...N?.path}}});return S(e.data)?e.data:[]},placeholderData:y}),Y=Array.isArray(A)?A:null,X=Array.isArray(A)?A:typeof A==`string`&&A?[A]:[],Z=X.slice().join(`,`),{data:Q}=b({queryKey:[`get`,O,`selected`,j,Z],queryFn:async()=>{let e=await B.GET(O,{params:{query:{...N?.query,[j]:{in:Z},limit:X.length,page:1},path:{...N?.path}}});return S(e.data)?e.data:[]},enabled:X.length>0,placeholderData:y}),$=e=>K?.find(t=>H(t)===e)??Q?.find(t=>H(t)===e),te=h(()=>{let e=K??[];if(I===`multiple`)return e;let t=X[0],n=e.some(e=>H(e)===t);if(!t||n)return e;let r=$(t);return r?[r,...e]:e},[K,Q,j,X.join(` `),I]),ne=F&&t(A)?e(F):`Search...`;return _(`div`,{className:`group form-field`,"data-invalid":E?``:void 0,children:_(a,{label:i,description:o,errorMessage:C,requiredIndicator:w,htmlFor:z,children:v(s,{...L,id:z,isDisabled:T,isInvalid:E,selectionMode:I,value:A,onChange:e=>{k(Array.isArray(e)?e.map(String):e==null?null:String(e))},inputValue:I===`multiple`?W:void 0,onInputChange:G,allowsEmptyCollection:!0,defaultFilter:()=>!0,onOpenChange:e=>{e||(D?.(A),G(``))},children:[v(u,{className:n(Y?`h-auto flex-wrap items-center py-1`:void 0,P),children:[Y&&Y.length>0&&_(l,{onRemove:e=>k(Y.filter(t=>!e.has(t))),items:Y.flatMap(e=>{let t=$(e);if(!t)return[];let n=V(t);return[{id:e,label:n,textValue:typeof n==`string`?n:x(t)}]}),children:e=>_(c,{textValue:e.textValue,children:e.label},e.id)}),_(d,{placeholder:ne})]}),_(p,{placement:`bottom start`,children:q?_(`div`,{className:`text-destructive p-icon body-sm`,children:J.message}):_(f,{items:te,className:`border-none`,renderEmptyState:()=>_(`div`,{className:`body-sm p-2`,children:`No results found.`}),children:e=>_(ee,{id:H(e),textValue:U(e),children:V(e)},H(e))})})]})})})}function w({accessor:e,getItemLabel:n,disallowEmptySelection:r,onChange:i,...a}){return _(C,{...a,accessor:e,getItemLabel:n,selectionMode:`single`,onChange:e=>{Array.isArray(e)||r&&t(e)||i(e)}})}function T({accessor:e,getItemLabel:t,disallowEmptySelection:n,onChange:r,...i}){return _(C,{...i,accessor:e,getItemLabel:t,selectionMode:`multiple`,onChange:e=>{Array.isArray(e)&&(n&&e.length===0||r(e))}})}function E({isDisabled:e,...t}){let n=i({disabled:e});return _(w,{requiredIndicator:n.isRequired,isDisabled:e||n.isSubmitting,value:n.state.value,onBlur:e=>n.handleBlur(),onChange:e=>n.handleChange(e),isInvalid:!!o(n),errorMessage:o(n),...t})}function D({isDisabled:e,...t}){let n=i({disabled:e});return _(T,{requiredIndicator:n.isRequired,isDisabled:e||n.isSubmitting,value:n.state.value,onBlur:e=>n.handleBlur(),onChange:e=>n.handleChange(e),isInvalid:!!o(n),errorMessage:o(n),...t})}export{T as MultipleIdSearchInput,w as SingleIdSearchInput,D as TfMultipleIdSearchInput,E as TfSingleIdSearchInput};
+"use client";import{getEmptyLabel as e,isEmptyValue as t}from"../utilities/empty-option.js";import{classNames as n}from"../utilities/theme.js";import{useCtxClient as r}from"../utilities/ctx-client.js";import{useFieldContext as i}from"../utilities/form-context.js";import{FormField as a}from"./form.js";import{getFieldErrorMessage as o}from"../utilities/form.js";import{ComboBox as s,ComboBoxChip as c,ComboBoxChipList as l,ComboBoxFieldGroup as u,ComboBoxInput as d,ComboBoxItem as ee,ComboBoxListBox as f,ComboBoxPopover as p}from"./combobox.js";import{useId as m,useMemo as h,useState as g}from"react";import{jsx as _,jsxs as v}from"react/jsx-runtime";import{keepPreviousData as y,useQuery as b}from"@tanstack/react-query";function x(e){return e.name??e.displayName??``}function S(e){return Array.isArray(e)&&e.every(e=>{if(!e||typeof e!=`object`||!(`id`in e)||typeof e.id!=`string`)return!1;let t=`name`in e&&typeof e.name==`string`,n=`displayName`in e&&typeof e.displayName==`string`;return t||n})}function C({label:i,description:o,errorMessage:C,requiredIndicator:w,isDisabled:T,isInvalid:E,onBlur:D,path:O,onChange:k,value:A,accessor:j,getItemLabel:M,defaultParams:N,className:P,emptyOption:F,selectionMode:I,...L}){if(O===`/v3/me`)throw Error(`Path "/v3/me" is not supported with IdSearch since it is not a searchable resource.`);let R=m(),z=L.id||R,B=r(),V=M??x,H=e=>String(e[j]??e.id),U=e=>{let t=V(e);return typeof t==`string`?t:x(e)},[W,G]=g(``),{data:K,isError:q,error:J}=b({queryKey:[`get`,O,W],queryFn:async()=>{let e=await B.GET(O,{params:{query:{...N?.query,search:W,limit:50,page:1},path:{...N?.path}}});return S(e.data)?e.data:[]},placeholderData:y}),Y=Array.isArray(A)?A:null,X=Array.isArray(A)?A:typeof A==`string`&&A?[A]:[],Z=X.slice().join(`,`),{data:Q}=b({queryKey:[`get`,O,`selected`,j,Z],queryFn:async()=>{let e=await B.GET(O,{params:{query:{...N?.query,[j]:{in:Z},limit:X.length,page:1},path:{...N?.path}}});return S(e.data)?e.data:[]},enabled:X.length>0,placeholderData:y}),$=e=>K?.find(t=>H(t)===e)??Q?.find(t=>H(t)===e),te=h(()=>{let e=K??[];if(I===`multiple`)return e;let t=X[0],n=e.some(e=>H(e)===t);if(!t||n)return e;let r=$(t);return r?[r,...e]:e},[K,Q,j,X.join(` `),I]),ne=F&&t(A)?e(F):`Search...`;return _(`div`,{className:`group form-field`,"data-invalid":E?``:void 0,children:v(s,{...L,isDisabled:T,isInvalid:E,selectionMode:I,value:A,onChange:e=>{k(Array.isArray(e)?e.map(String):e==null?null:String(e))},inputValue:I===`multiple`?W:void 0,onInputChange:G,menuTrigger:`focus`,allowsEmptyCollection:!0,defaultFilter:()=>!0,onOpenChange:e=>{e||(D?.(A),G(``))},children:[_(a,{label:i,description:o,errorMessage:C,requiredIndicator:w,htmlFor:z,children:v(u,{className:n(Y?`h-auto flex-wrap items-center py-1`:void 0,P),children:[Y&&Y.length>0&&_(l,{"aria-label":typeof i==`string`?`Selected ${i}`:`Selected items`,onRemove:e=>k(Y.filter(t=>!e.has(t))),items:Y.flatMap(e=>{let t=$(e);if(!t)return[];let n=V(t);return[{id:e,label:n,textValue:typeof n==`string`?n:x(t)}]}),children:e=>_(c,{textValue:e.textValue,children:e.label},e.id)}),_(d,{id:z,placeholder:ne})]})}),_(p,{placement:`bottom start`,children:q?_(`div`,{className:`text-destructive p-icon body-sm`,children:J.message}):_(f,{items:te,className:`border-none`,renderEmptyState:()=>_(`div`,{className:`body-sm p-2`,children:`No results found.`}),children:e=>_(ee,{id:H(e),textValue:U(e),children:V(e)},H(e))})})]})})}function w({accessor:e,getItemLabel:n,disallowEmptySelection:r,onChange:i,...a}){return _(C,{...a,accessor:e,getItemLabel:n,selectionMode:`single`,onChange:e=>{Array.isArray(e)||r&&t(e)||i(e)}})}function T({accessor:e,getItemLabel:t,disallowEmptySelection:n,onChange:r,...i}){return _(C,{...i,accessor:e,getItemLabel:t,selectionMode:`multiple`,onChange:e=>{Array.isArray(e)&&(n&&e.length===0||r(e))}})}function E({isDisabled:e,...t}){let n=i({disabled:e});return _(w,{requiredIndicator:n.isRequired,isDisabled:e||n.isSubmitting,value:n.state.value,onBlur:e=>n.handleBlur(),onChange:e=>n.handleChange(e),isInvalid:!!o(n),errorMessage:o(n),...t})}function D({isDisabled:e,...t}){let n=i({disabled:e});return _(T,{requiredIndicator:n.isRequired,isDisabled:e||n.isSubmitting,value:n.state.value,onBlur:e=>n.handleBlur(),onChange:e=>n.handleChange(e),isInvalid:!!o(n),errorMessage:o(n),...t})}export{T as MultipleIdSearchInput,w as SingleIdSearchInput,D as TfMultipleIdSearchInput,E as TfSingleIdSearchInput};
 //# sourceMappingURL=id-search.js.map

package/dist/components/id-search.js.map

@@ -1 +1 @@
-{"version":3,"file":"id-search.js","names":[],"sources":["../../lib/components/id-search.tsx"],"sourcesContent":["'use client';\nimport { keepPreviousData, useQuery } from '@tanstack/react-query';\nimport { useId, useMemo, useState } from 'react';\n\nimport type { ClientPathsWithMethod } from 'openapi-fetch';\nimport {\n    ComboBox,\n    ComboBoxChip,\n    ComboBoxChipList,\n    ComboBoxFieldGroup,\n    ComboBoxInput,\n    ComboBoxItem,\n    ComboBoxListBox,\n    ComboBoxPopover,\n} from '../components/combobox';\nimport { useCtxClient, type CtxClientType } from '../utilities/ctx-client';\nimport { getEmptyLabel, isEmptyValue, type EmptyOption } from '../utilities/empty-option';\nimport { getFieldErrorMessage } from '../utilities/form';\nimport { useFieldContext } from '../utilities/form-context';\nimport { classNames } from '../utilities/theme';\nimport { FormField, type FormFieldProps } from './form';\n/**\n * Minimal resource shape used by the ID search inputs.\n * `id` is required; the label comes from `name` or `displayName`.\n *\n * @example\n * const user: BaseSearchableResource = { id: 'u_123', name: 'Nabeel Farooq' };\n * const product: BaseSearchableResource = { id: 'p_123', displayName: 'My Product' };\n */\ntype BaseSearchableResource = {\n    /** Unique identifier used as the input value. */\n    id: string;\n    /** Human-readable label shown to users. */\n    name?: string;\n    displayName?: string;\n};\n\n/** Resources commonly expose either `name` or `displayName` as their human-readable label. */\nfunction getResourceLabel(item: BaseSearchableResource): string {\n    return item.name ?? item.displayName ?? '';\n}\n\n/**\n * Type guard to check if a value is an array of searchable resources\n */\nfunction isSearchableResourceArray<T extends BaseSearchableResource>(value: unknown): value is T[] {\n    return (\n        Array.isArray(value) &&\n        value.every(item => {\n            if (!item || typeof item !== 'object' || !('id' in item) || typeof item.id !== 'string') return false;\n            const hasName = 'name' in item && typeof item.name === 'string';\n            const hasDisplayName = 'displayName' in item && typeof item.displayName === 'string';\n            return hasName || hasDisplayName;\n        })\n    );\n}\n\n/**\n * - Generic, accessible ID-search building block.\n * - Search (powered by react-query)\n * - Renders an accessible `ComboBox`: the input itself shows the current selection's label\n *   (single) or a row of removable chips (multiple), searching in place as you type.\n * - Exposes a controlled `value`/`onChange` contract so callers (and wrappers) can manage state\n *\n * @template T - resource type extending `BaseSearchableResource` (must have `id`; label is `name` or `displayName`)\n *\n * @param props - props object (see inline property JSDoc for the most important fields). `value`/`onChange`\n * use the widened `string | string[] | null` shape shared by both selection modes - `SingleIdSearchInput`\n * and `MultipleIdSearchInput` narrow it back down for their own public API.\n *\n * @remarks\n * - Search is automatically handled based on the `path` prop using the API client from context\n * - When the popover closes, `onBlur` (if provided) is called with the current `value`.\n * - `defaultParams` can be used to pass additional query parameters to the search endpoint\n *\n * @example\n * <BaseIdSearchInput\n *   label=\"Owner\"\n *   path=\"/v3/users\"\n *   accessor=\"id\"\n *   selectionMode=\"single\"\n *   value={ownerId}\n *   onChange={setOwnerId}\n * />\n *\n * @testing\n * - Ensure API client is provided via context; assert keyboard navigation, open/close behavior, and `onBlur` call on popover close.\n */\nfunction BaseIdSearchInput<T extends BaseSearchableResource>({\n    label,\n    description,\n    errorMessage,\n    requiredIndicator,\n    isDisabled,\n    isInvalid,\n    onBlur,\n    path,\n    onChange,\n    value,\n    accessor,\n    getItemLabel,\n    defaultParams,\n    className,\n    emptyOption,\n    selectionMode,\n    ...props\n}: FormFieldProps & {\n    path: ClientPathsWithMethod<CtxClientType, 'get'>;\n    /** Disable interactions. */\n    isDisabled?: boolean;\n    /** Whether the field is invalid. */\n    isInvalid?: boolean;\n    /** Key used to access an alternate display accessor on item (kept for compatibility). */\n    accessor: keyof BaseSearchableResource;\n    getItemLabel?: (item: T) => React.ReactNode;\n    /** Controlled value. */\n    value: string | string[] | null;\n    /** Called when popover closes or the field blurs with the current value. */\n    onBlur?: (v: string | string[] | null) => void;\n    /** Controlled change handler. */\n    onChange: (v: string | string[] | null) => void;\n    /** Default parameters to include in the request. This is useful when using /v3/users?role='admin' or /v3/organizations/ID/user-groups */\n    defaultParams?: Record<'path' | 'query', any>;\n    /** Optional className to customize the trigger button styling. */\n    className?: string;\n    /* Optional empty option  to show when value is empty. */\n    emptyOption?: EmptyOption;\n    selectionMode: 'single' | 'multiple';\n} & Omit<\n        React.ComponentProps<typeof ComboBox>,\n        | 'children'\n        | 'items'\n        | 'className'\n        | 'selectionMode'\n        | 'value'\n        | 'onChange'\n        | 'onInputChange'\n        | 'inputValue'\n        | 'onBlur'\n    >) {\n    if (path === '/v3/me') {\n        throw Error('Path \"/v3/me\" is not supported with IdSearch since it is not a searchable resource.');\n    }\n\n    const generatedId = useId();\n    const fieldId = props.id || generatedId;\n    const client = useCtxClient();\n    const itemLabel = getItemLabel ?? getResourceLabel;\n    const getItemId = (item: T) => String(item[accessor] ?? item.id);\n    const itemTextValue = (item: T): string => {\n        const label = itemLabel(item);\n        return typeof label === 'string' ? label : getResourceLabel(item);\n    };\n\n    const [search, setSearch] = useState('');\n    const { data, isError, error } = useQuery({\n        queryKey: ['get', path, search],\n        queryFn: async (): Promise<T[]> => {\n            const result = await client.GET(path, {\n                params: {\n                    query: { ...defaultParams?.query, search, limit: 50, page: 1 },\n                    path: { ...defaultParams?.path },\n                },\n            });\n            return isSearchableResourceArray<T>(result.data) ? result.data : [];\n        },\n        placeholderData: keepPreviousData,\n    });\n\n    const chipValues = Array.isArray(value) ? value : null;\n    const selectedIds = Array.isArray(value) ? value : typeof value === 'string' && value ? [value] : [];\n\n    const selectedIdsKey = selectedIds.slice().join(',');\n    const { data: selectedItemsData } = useQuery({\n        queryKey: ['get', path, 'selected', accessor, selectedIdsKey],\n        queryFn: async (): Promise<T[]> => {\n            const result = await client.GET(path, {\n                params: {\n                    query: {\n                        ...defaultParams?.query,\n                        [accessor]: { in: selectedIdsKey },\n                        limit: selectedIds.length,\n                        page: 1,\n                    },\n                    path: { ...defaultParams?.path },\n                },\n            });\n            return isSearchableResourceArray<T>(result.data) ? result.data : [];\n        },\n        enabled: selectedIds.length > 0,\n        placeholderData: keepPreviousData,\n    });\n\n    const resolveItem = (id: string): T | undefined =>\n        data?.find(item => getItemId(item) === id) ?? selectedItemsData?.find(item => getItemId(item) === id);\n\n    const items = useMemo(() => {\n        const searchResults = data ?? [];\n        if (selectionMode === 'multiple') {\n            return searchResults;\n        }\n\n        const selectedId = selectedIds[0];\n        const selectedItemIsPresent = searchResults.some(item => getItemId(item) === selectedId);\n        if (!selectedId || selectedItemIsPresent) {\n            return searchResults;\n        }\n\n        const missingSelectedItem = resolveItem(selectedId);\n        return missingSelectedItem ? [missingSelectedItem, ...searchResults] : searchResults;\n    }, [data, selectedItemsData, accessor, selectedIds.join(' '), selectionMode]);\n\n    const placeholder = emptyOption && isEmptyValue(value) ? getEmptyLabel(emptyOption) : 'Search...';\n\n    return (\n        <div className=\"group form-field\" data-invalid={isInvalid ? '' : undefined}>\n            <FormField {...{ label, description, errorMessage, requiredIndicator, htmlFor: fieldId }}>\n                <ComboBox\n                    {...props}\n                    id={fieldId}\n                    isDisabled={isDisabled}\n                    isInvalid={isInvalid}\n                    selectionMode={selectionMode}\n                    value={value}\n                    onChange={v => {\n                        onChange(Array.isArray(v) ? v.map(String) : v == null ? null : String(v));\n                    }}\n                    inputValue={selectionMode === 'multiple' ? search : undefined}\n                    onInputChange={setSearch}\n                    allowsEmptyCollection\n                    defaultFilter={() => true}\n                    onOpenChange={isOpen => {\n                        if (!isOpen) {\n                            onBlur?.(value);\n                            setSearch('');\n                        }\n                    }}\n                >\n                    <ComboBoxFieldGroup\n                        className={classNames(chipValues ? 'h-auto flex-wrap items-center py-1' : undefined, className)}\n                    >\n                        {chipValues && chipValues.length > 0 && (\n                            <ComboBoxChipList\n                                onRemove={keys => onChange(chipValues.filter(v => !keys.has(v)))}\n                                items={chipValues.flatMap(v => {\n                                    const match = resolveItem(v);\n                                    if (!match) return [];\n                                    const label = itemLabel(match);\n                                    const textValue = typeof label === 'string' ? label : getResourceLabel(match);\n                                    return [{ id: v, label, textValue }];\n                                })}\n                            >\n                                {item => (\n                                    <ComboBoxChip key={item.id} textValue={item.textValue}>\n                                        {item.label}\n                                    </ComboBoxChip>\n                                )}\n                            </ComboBoxChipList>\n                        )}\n                        <ComboBoxInput placeholder={placeholder} />\n                    </ComboBoxFieldGroup>\n                    <ComboBoxPopover placement=\"bottom start\">\n                        {isError ? (\n                            <div className=\"text-destructive p-icon body-sm\">{error.message}</div>\n                        ) : (\n                            <ComboBoxListBox\n                                items={items}\n                                className=\"border-none\"\n                                renderEmptyState={() => <div className=\"body-sm p-2\">No results found.</div>}\n                            >\n                                {item => (\n                                    <ComboBoxItem\n                                        key={getItemId(item)}\n                                        id={getItemId(item)}\n                                        textValue={itemTextValue(item)}\n                                    >\n                                        {itemLabel(item)}\n                                    </ComboBoxItem>\n                                )}\n                            </ComboBoxListBox>\n                        )}\n                    </ComboBoxPopover>\n                </ComboBox>\n            </FormField>\n        </div>\n    );\n}\n\n/**\n * Single-selection ID search input.\n *\n * Thin, typed wrapper around `BaseIdSearchInput` specialized for the very common single-ID case.\n * Adapts the internal selection events into `onChange(id?: string)` and renders the selected label.\n *\n * @template T - resource type (extends BaseSearchableResource)\n *\n * @param props - Inherits `BaseIdSearchInput` props but uses `string[]` value type.\n *\n * @example\n * <SingleIdSearchInput\n *   label=\"Reporter\"\n *   value={reporterId}\n *   onChange={setReporterId}\n * />\n *\n */\nexport function SingleIdSearchInput<T extends BaseSearchableResource>({\n    accessor,\n    getItemLabel,\n    disallowEmptySelection,\n    onChange,\n    ...props\n}: Omit<React.ComponentProps<typeof BaseIdSearchInput<T>>, 'selectionMode' | 'value' | 'onChange'> & {\n    disallowEmptySelection?: boolean;\n    value: string | null;\n    onChange: (v: string | null) => void;\n}) {\n    return (\n        <BaseIdSearchInput\n            {...props}\n            accessor={accessor}\n            getItemLabel={getItemLabel}\n            selectionMode=\"single\"\n            onChange={v => {\n                if (Array.isArray(v)) return;\n                if (disallowEmptySelection && isEmptyValue(v)) return;\n                onChange(v);\n            }}\n        />\n    );\n}\n\n/**\n * Multi-selection ID search input.\n *\n * Thin wrapper around `BaseIdSearchInput` for the multiple-ID (`string[]`) case.\n * Adapts internal selection events into `onChange(ids: string[])`.\n *\n * @template T - resource type (extends BaseSearchableResource)\n *\n * @param props - Inherits `BaseIdSearchInput` props but uses `string[]` value type.\n *\n * @example\n * <MultipleIdSearchInput\n *   label=\"Reviewers\"\n *   value={reviewerIds}\n *   onChange={setReviewerIds}\n * />\n *\n * @remarks\n * - The `renderLabel` joins selected item names with commas for compact display.\n */\nexport function MultipleIdSearchInput<T extends BaseSearchableResource>({\n    accessor,\n    getItemLabel,\n    disallowEmptySelection,\n    onChange,\n    ...props\n}: Omit<React.ComponentProps<typeof BaseIdSearchInput<T>>, 'selectionMode' | 'value' | 'onChange'> & {\n    disallowEmptySelection?: boolean;\n    value: string[];\n    onChange: (v: string[]) => void;\n}) {\n    return (\n        <BaseIdSearchInput\n            {...props}\n            accessor={accessor}\n            getItemLabel={getItemLabel}\n            selectionMode=\"multiple\"\n            onChange={vals => {\n                if (!Array.isArray(vals)) return;\n                if (disallowEmptySelection && vals.length === 0) return;\n                onChange(vals);\n            }}\n        />\n    );\n}\n\n/**\n * Form-integrated single-select ID input (field wrapper).\n *\n * Integrates `SingleIdSearchInput` into the form system using `useFieldContext`.\n * - wires `value`, `onChange`, and `onBlur`\n * - disables the control while the form is submitting\n * - surfaces field-level error messages\n *\n * @example\n * <TfSingleIdSearchInput name=\"ownerId\" label=\"Owner\" />\n \n */\nexport function TfSingleIdSearchInput<T extends BaseSearchableResource>({\n    isDisabled,\n    ...props\n}: Omit<React.ComponentProps<typeof SingleIdSearchInput<T>>, 'value' | 'onChange' | 'onBlur'>) {\n    const field = useFieldContext<string | null>({ disabled: isDisabled });\n    return (\n        <SingleIdSearchInput\n            requiredIndicator={field.isRequired}\n            isDisabled={isDisabled || field.isSubmitting}\n            value={field.state.value}\n            onBlur={_ => field.handleBlur()}\n            onChange={e => field.handleChange(e)}\n            isInvalid={!!getFieldErrorMessage(field)}\n            errorMessage={getFieldErrorMessage(field)}\n            {...props}\n        />\n    );\n}\n\n/**\n * Form-integrated multi-select ID input (field wrapper).\n *\n * Integrates `MultipleIdSearchInput` into the form system using `useFieldContext`.\n * - wires `value`, `onChange`, and `onBlur`\n * - disables the control while the form is submitting\n * - surfaces field-level error messages\n *\n * @example\n * <TfMultipleIdSearchInput name=\"reviewerIds\" label=\"Reviewers\" />\n *\n */\nexport function TfMultipleIdSearchInput<T extends BaseSearchableResource>({\n    isDisabled,\n    ...props\n}: Omit<React.ComponentProps<typeof MultipleIdSearchInput<T>>, 'value' | 'onChange'>) {\n    const field = useFieldContext<string[]>({ disabled: isDisabled });\n    return (\n        <MultipleIdSearchInput\n            requiredIndicator={field.isRequired}\n            isDisabled={isDisabled || field.isSubmitting}\n            value={field.state.value}\n            onBlur={_ => field.handleBlur()}\n            onChange={e => field.handleChange(e)}\n            isInvalid={!!getFieldErrorMessage(field)}\n            errorMessage={getFieldErrorMessage(field)}\n            {...props}\n        />\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"id-search.js","names":[],"sources":["../../lib/components/id-search.tsx"],"sourcesContent":["'use client';\nimport { keepPreviousData, useQuery } from '@tanstack/react-query';\nimport { useId, useMemo, useState } from 'react';\n\nimport type { ClientPathsWithMethod } from 'openapi-fetch';\nimport {\n    ComboBox,\n    ComboBoxChip,\n    ComboBoxChipList,\n    ComboBoxFieldGroup,\n    ComboBoxInput,\n    ComboBoxItem,\n    ComboBoxListBox,\n    ComboBoxPopover,\n} from '../components/combobox';\nimport { useCtxClient, type CtxClientType } from '../utilities/ctx-client';\nimport { getEmptyLabel, isEmptyValue, type EmptyOption } from '../utilities/empty-option';\nimport { getFieldErrorMessage } from '../utilities/form';\nimport { useFieldContext } from '../utilities/form-context';\nimport { classNames } from '../utilities/theme';\nimport { FormField, type FormFieldProps } from './form';\n/**\n * Minimal resource shape used by the ID search inputs.\n * `id` is required; the label comes from `name` or `displayName`.\n *\n * @example\n * const user: BaseSearchableResource = { id: 'u_123', name: 'Nabeel Farooq' };\n * const product: BaseSearchableResource = { id: 'p_123', displayName: 'My Product' };\n */\ntype BaseSearchableResource = {\n    /** Unique identifier used as the input value. */\n    id: string;\n    /** Human-readable label shown to users. */\n    name?: string;\n    displayName?: string;\n};\n\n/** Resources commonly expose either `name` or `displayName` as their human-readable label. */\nfunction getResourceLabel(item: BaseSearchableResource): string {\n    return item.name ?? item.displayName ?? '';\n}\n\n/**\n * Type guard to check if a value is an array of searchable resources\n */\nfunction isSearchableResourceArray<T extends BaseSearchableResource>(value: unknown): value is T[] {\n    return (\n        Array.isArray(value) &&\n        value.every(item => {\n            if (!item || typeof item !== 'object' || !('id' in item) || typeof item.id !== 'string') return false;\n            const hasName = 'name' in item && typeof item.name === 'string';\n            const hasDisplayName = 'displayName' in item && typeof item.displayName === 'string';\n            return hasName || hasDisplayName;\n        })\n    );\n}\n\n/**\n * - Generic, accessible ID-search building block.\n * - Search (powered by react-query)\n * - Renders an accessible `ComboBox`: the input itself shows the current selection's label\n *   (single) or a row of removable chips (multiple), searching in place as you type.\n * - Exposes a controlled `value`/`onChange` contract so callers (and wrappers) can manage state\n *\n * @template T - resource type extending `BaseSearchableResource` (must have `id`; label is `name` or `displayName`)\n *\n * @param props - props object (see inline property JSDoc for the most important fields). `value`/`onChange`\n * use the widened `string | string[] | null` shape shared by both selection modes - `SingleIdSearchInput`\n * and `MultipleIdSearchInput` narrow it back down for their own public API.\n *\n * @remarks\n * - Search is automatically handled based on the `path` prop using the API client from context\n * - When the popover closes, `onBlur` (if provided) is called with the current `value`.\n * - `defaultParams` can be used to pass additional query parameters to the search endpoint\n *\n * @example\n * <BaseIdSearchInput\n *   label=\"Owner\"\n *   path=\"/v3/users\"\n *   accessor=\"id\"\n *   selectionMode=\"single\"\n *   value={ownerId}\n *   onChange={setOwnerId}\n * />\n *\n * @testing\n * - Ensure API client is provided via context; assert keyboard navigation, open/close behavior, and `onBlur` call on popover close.\n */\nfunction BaseIdSearchInput<T extends BaseSearchableResource>({\n    label,\n    description,\n    errorMessage,\n    requiredIndicator,\n    isDisabled,\n    isInvalid,\n    onBlur,\n    path,\n    onChange,\n    value,\n    accessor,\n    getItemLabel,\n    defaultParams,\n    className,\n    emptyOption,\n    selectionMode,\n    ...props\n}: FormFieldProps & {\n    path: ClientPathsWithMethod<CtxClientType, 'get'>;\n    /** Disable interactions. */\n    isDisabled?: boolean;\n    /** Whether the field is invalid. */\n    isInvalid?: boolean;\n    /** Key used to access an alternate display accessor on item (kept for compatibility). */\n    accessor: keyof BaseSearchableResource;\n    getItemLabel?: (item: T) => React.ReactNode;\n    /** Controlled value. */\n    value: string | string[] | null;\n    /** Called when popover closes or the field blurs with the current value. */\n    onBlur?: (v: string | string[] | null) => void;\n    /** Controlled change handler. */\n    onChange: (v: string | string[] | null) => void;\n    /** Default parameters to include in the request. This is useful when using /v3/users?role='admin' or /v3/organizations/ID/user-groups */\n    defaultParams?: Record<'path' | 'query', any>;\n    /** Optional className to customize the trigger button styling. */\n    className?: string;\n    /* Optional empty option  to show when value is empty. */\n    emptyOption?: EmptyOption;\n    selectionMode: 'single' | 'multiple';\n} & Omit<\n        React.ComponentProps<typeof ComboBox>,\n        | 'children'\n        | 'items'\n        | 'className'\n        | 'selectionMode'\n        | 'value'\n        | 'onChange'\n        | 'onInputChange'\n        | 'inputValue'\n        | 'onBlur'\n    >) {\n    if (path === '/v3/me') {\n        throw Error('Path \"/v3/me\" is not supported with IdSearch since it is not a searchable resource.');\n    }\n\n    const generatedId = useId();\n    const fieldId = props.id || generatedId;\n    const client = useCtxClient();\n    const itemLabel = getItemLabel ?? getResourceLabel;\n    const getItemId = (item: T) => String(item[accessor] ?? item.id);\n    const itemTextValue = (item: T): string => {\n        const label = itemLabel(item);\n        return typeof label === 'string' ? label : getResourceLabel(item);\n    };\n\n    const [search, setSearch] = useState('');\n    const { data, isError, error } = useQuery({\n        queryKey: ['get', path, search],\n        queryFn: async (): Promise<T[]> => {\n            const result = await client.GET(path, {\n                params: {\n                    query: { ...defaultParams?.query, search, limit: 50, page: 1 },\n                    path: { ...defaultParams?.path },\n                },\n            });\n            return isSearchableResourceArray<T>(result.data) ? result.data : [];\n        },\n        placeholderData: keepPreviousData,\n    });\n\n    const chipValues = Array.isArray(value) ? value : null;\n    const selectedIds = Array.isArray(value) ? value : typeof value === 'string' && value ? [value] : [];\n\n    const selectedIdsKey = selectedIds.slice().join(',');\n    const { data: selectedItemsData } = useQuery({\n        queryKey: ['get', path, 'selected', accessor, selectedIdsKey],\n        queryFn: async (): Promise<T[]> => {\n            const result = await client.GET(path, {\n                params: {\n                    query: {\n                        ...defaultParams?.query,\n                        [accessor]: { in: selectedIdsKey },\n                        limit: selectedIds.length,\n                        page: 1,\n                    },\n                    path: { ...defaultParams?.path },\n                },\n            });\n            return isSearchableResourceArray<T>(result.data) ? result.data : [];\n        },\n        enabled: selectedIds.length > 0,\n        placeholderData: keepPreviousData,\n    });\n\n    const resolveItem = (id: string): T | undefined =>\n        data?.find(item => getItemId(item) === id) ?? selectedItemsData?.find(item => getItemId(item) === id);\n\n    const items = useMemo(() => {\n        const searchResults = data ?? [];\n        if (selectionMode === 'multiple') {\n            return searchResults;\n        }\n\n        const selectedId = selectedIds[0];\n        const selectedItemIsPresent = searchResults.some(item => getItemId(item) === selectedId);\n        if (!selectedId || selectedItemIsPresent) {\n            return searchResults;\n        }\n\n        const missingSelectedItem = resolveItem(selectedId);\n        return missingSelectedItem ? [missingSelectedItem, ...searchResults] : searchResults;\n    }, [data, selectedItemsData, accessor, selectedIds.join(' '), selectionMode]);\n\n    const placeholder = emptyOption && isEmptyValue(value) ? getEmptyLabel(emptyOption) : 'Search...';\n\n    return (\n        <div className=\"group form-field\" data-invalid={isInvalid ? '' : undefined}>\n            <ComboBox\n                {...props}\n                isDisabled={isDisabled}\n                isInvalid={isInvalid}\n                selectionMode={selectionMode}\n                value={value}\n                onChange={v => {\n                    onChange(Array.isArray(v) ? v.map(String) : v == null ? null : String(v));\n                }}\n                inputValue={selectionMode === 'multiple' ? search : undefined}\n                onInputChange={setSearch}\n                menuTrigger=\"focus\"\n                allowsEmptyCollection\n                defaultFilter={() => true}\n                onOpenChange={open => {\n                    if (!open) {\n                        onBlur?.(value);\n                        setSearch('');\n                    }\n                }}\n            >\n                <FormField {...{ label, description, errorMessage, requiredIndicator, htmlFor: fieldId }}>\n                    <ComboBoxFieldGroup\n                        className={classNames(chipValues ? 'h-auto flex-wrap items-center py-1' : undefined, className)}\n                    >\n                        {chipValues && chipValues.length > 0 && (\n                            <ComboBoxChipList\n                                aria-label={typeof label === 'string' ? `Selected ${label}` : 'Selected items'}\n                                onRemove={keys => onChange(chipValues.filter(v => !keys.has(v)))}\n                                items={chipValues.flatMap(v => {\n                                    const match = resolveItem(v);\n                                    if (!match) return [];\n                                    const label = itemLabel(match);\n                                    const textValue = typeof label === 'string' ? label : getResourceLabel(match);\n                                    return [{ id: v, label, textValue }];\n                                })}\n                            >\n                                {item => (\n                                    <ComboBoxChip key={item.id} textValue={item.textValue}>\n                                        {item.label}\n                                    </ComboBoxChip>\n                                )}\n                            </ComboBoxChipList>\n                        )}\n                        <ComboBoxInput id={fieldId} placeholder={placeholder} />\n                    </ComboBoxFieldGroup>\n                </FormField>\n                <ComboBoxPopover placement=\"bottom start\">\n                    {isError ? (\n                        <div className=\"text-destructive p-icon body-sm\">{error.message}</div>\n                    ) : (\n                        <ComboBoxListBox\n                            items={items}\n                            className=\"border-none\"\n                            renderEmptyState={() => <div className=\"body-sm p-2\">No results found.</div>}\n                        >\n                            {item => (\n                                <ComboBoxItem\n                                    key={getItemId(item)}\n                                    id={getItemId(item)}\n                                    textValue={itemTextValue(item)}\n                                >\n                                    {itemLabel(item)}\n                                </ComboBoxItem>\n                            )}\n                        </ComboBoxListBox>\n                    )}\n                </ComboBoxPopover>\n            </ComboBox>\n        </div>\n    );\n}\n\n/**\n * Single-selection ID search input.\n *\n * Thin, typed wrapper around `BaseIdSearchInput` specialized for the very common single-ID case.\n * Adapts the internal selection events into `onChange(id?: string)` and renders the selected label.\n *\n * @template T - resource type (extends BaseSearchableResource)\n *\n * @param props - Inherits `BaseIdSearchInput` props but uses `string[]` value type.\n *\n * @example\n * <SingleIdSearchInput\n *   label=\"Reporter\"\n *   value={reporterId}\n *   onChange={setReporterId}\n * />\n *\n */\nexport function SingleIdSearchInput<T extends BaseSearchableResource>({\n    accessor,\n    getItemLabel,\n    disallowEmptySelection,\n    onChange,\n    ...props\n}: Omit<React.ComponentProps<typeof BaseIdSearchInput<T>>, 'selectionMode' | 'value' | 'onChange'> & {\n    disallowEmptySelection?: boolean;\n    value: string | null;\n    onChange: (v: string | null) => void;\n}) {\n    return (\n        <BaseIdSearchInput\n            {...props}\n            accessor={accessor}\n            getItemLabel={getItemLabel}\n            selectionMode=\"single\"\n            onChange={v => {\n                if (Array.isArray(v)) return;\n                if (disallowEmptySelection && isEmptyValue(v)) return;\n                onChange(v);\n            }}\n        />\n    );\n}\n\n/**\n * Multi-selection ID search input.\n *\n * Thin wrapper around `BaseIdSearchInput` for the multiple-ID (`string[]`) case.\n * Adapts internal selection events into `onChange(ids: string[])`.\n *\n * @template T - resource type (extends BaseSearchableResource)\n *\n * @param props - Inherits `BaseIdSearchInput` props but uses `string[]` value type.\n *\n * @example\n * <MultipleIdSearchInput\n *   label=\"Reviewers\"\n *   value={reviewerIds}\n *   onChange={setReviewerIds}\n * />\n *\n * @remarks\n * - The `renderLabel` joins selected item names with commas for compact display.\n */\nexport function MultipleIdSearchInput<T extends BaseSearchableResource>({\n    accessor,\n    getItemLabel,\n    disallowEmptySelection,\n    onChange,\n    ...props\n}: Omit<React.ComponentProps<typeof BaseIdSearchInput<T>>, 'selectionMode' | 'value' | 'onChange'> & {\n    disallowEmptySelection?: boolean;\n    value: string[];\n    onChange: (v: string[]) => void;\n}) {\n    return (\n        <BaseIdSearchInput\n            {...props}\n            accessor={accessor}\n            getItemLabel={getItemLabel}\n            selectionMode=\"multiple\"\n            onChange={vals => {\n                if (!Array.isArray(vals)) return;\n                if (disallowEmptySelection && vals.length === 0) return;\n                onChange(vals);\n            }}\n        />\n    );\n}\n\n/**\n * Form-integrated single-select ID input (field wrapper).\n *\n * Integrates `SingleIdSearchInput` into the form system using `useFieldContext`.\n * - wires `value`, `onChange`, and `onBlur`\n * - disables the control while the form is submitting\n * - surfaces field-level error messages\n *\n * @example\n * <TfSingleIdSearchInput name=\"ownerId\" label=\"Owner\" />\n \n */\nexport function TfSingleIdSearchInput<T extends BaseSearchableResource>({\n    isDisabled,\n    ...props\n}: Omit<React.ComponentProps<typeof SingleIdSearchInput<T>>, 'value' | 'onChange' | 'onBlur'>) {\n    const field = useFieldContext<string | null>({ disabled: isDisabled });\n    return (\n        <SingleIdSearchInput\n            requiredIndicator={field.isRequired}\n            isDisabled={isDisabled || field.isSubmitting}\n            value={field.state.value}\n            onBlur={_ => field.handleBlur()}\n            onChange={e => field.handleChange(e)}\n            isInvalid={!!getFieldErrorMessage(field)}\n            errorMessage={getFieldErrorMessage(field)}\n            {...props}\n        />\n    );\n}\n\n/**\n * Form-integrated multi-select ID input (field wrapper).\n *\n * Integrates `MultipleIdSearchInput` into the form system using `useFieldContext`.\n * - wires `value`, `onChange`, and `onBlur`\n * - disables the control while the form is submitting\n * - surfaces field-level error messages\n *\n * @example\n * <TfMultipleIdSearchInput name=\"reviewerIds\" label=\"Reviewers\" />\n *\n */\nexport function TfMultipleIdSearchInput<T extends BaseSearchableResource>({\n    isDisabled,\n    ...props\n}: Omit<React.ComponentProps<typeof MultipleIdSearchInput<T>>, 'value' | 'onChange'>) {\n    const field = useFieldContext<string[]>({ disabled: isDisabled });\n    return (\n        <MultipleIdSearchInput\n            requiredIndicator={field.isRequired}\n            isDisabled={isDisabled || field.isSubmitting}\n            value={field.state.value}\n            onBlur={_ => field.handleBlur()}\n            onChange={e => field.handleChange(e)}\n            isInvalid={!!getFieldErrorMessage(field)}\n            errorMessage={getFieldErrorMessage(field)}\n            {...props}\n        />\n    );\n}\n"],"mappings":"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"}

package/dist/components/menu.d.ts

@@ -22,6 +22,8 @@ interface MenuProps<T> extends AriaMenuProps<T>, VariantProps<typeof buttonVaria
     isNonModal?: boolean;
     id?: string;
     withChevron?: boolean;
+    /** Optional className applied to the trigger button (e.g. to override its background). */
+    triggerClassName?: string;
 }
-export declare function EasyMenu<T extends object>({ label, children, variant, isDisabled, withChevron, size, isNonModal, id, 'aria-label': ariaLabel, ...props }: MenuProps<T>): import("react").JSX.Element;
+export declare function EasyMenu<T extends object>({ label, children, variant, isDisabled, withChevron, size, isNonModal, id, triggerClassName, 'aria-label': ariaLabel, ...props }: MenuProps<T>): import("react").JSX.Element;
 export {};

package/dist/components/menu.js

@@ -1,2 +1,2 @@
-import{classNames as e}from"../utilities/theme.js";import{b as t,c as n,jt as r}from"../icons.js";import{ListBoxCollection as i}from"./list-box.js";import{SelectPopover as a,SelectTrigger as o}from"./select.js";import{Fragment as s,jsx as c,jsxs as l}from"react/jsx-runtime";import{Header as u,Keyboard as d,Menu as f,MenuItem as p,MenuTrigger as m,Separator as h,SubmenuTrigger as g,composeRenderProps as _}from"react-aria-components";var v=m,y=g,b=i;function x({className:t,...n}){return c(a,{className:_(t,t=>e(t)),...n})}function S({className:t,...n}){return c(f,{className:e(`overflow-auto p-1 outline-0 body-base`,t),escapeKeyBehavior:`none`,...n})}function C({children:i,className:a,...o}){return c(p,{textValue:o.textValue||(typeof i==`string`?i:void 0),className:_(a,t=>e(`btn btn-ghost relative flex justify-start input-dim`,`data-[selection-mode]:pl-input`,t)),...o,children:_(i,(e,i)=>l(s,{children:[c(`span`,{className:`absolute left-2 flex size-icon items-center justify-center`,children:i.isSelected&&l(s,{children:[i.selectionMode==`single`&&c(t,{className:`size-icon fill-current`}),i.selectionMode==`multiple`&&c(n,{className:`size-icon`})]})}),e,i.hasSubmenu&&c(r,{className:`ml-auto size-icon`})]}))})}function w({className:t,inset:n,separator:r=!0,...i}){return c(u,{className:e(`px-3 py-1.5 body font-semibold`,n&&`pl-input`,r&&`-mx-1 mb-1 border-b border-b-border pb-2.5`,t),...i})}function T({className:t,...n}){return c(h,{className:e(`-mx-1 my-1 h-px bg-muted`,t),...n})}function E({className:t,...n}){return c(d,{className:e(`ml-auto body-sm tracking-widest opacity-60`,t),...n})}function D({label:e,children:t,variant:n,isDisabled:r,withChevron:i=!0,size:a,isNonModal:s,id:u,"aria-label":d=`Menu`,...f}){return l(v,{...f,children:[c(o,{id:u,isDisabled:r,autoFocus:!!f.autoFocus,variant:n,size:a,"aria-label":d,withChevron:i,children:e}),c(x,{className:`overflow-auto`,children:c(S,{...f,children:t})})]})}export{D as EasyMenu,S as Menu,b as MenuCollection,w as MenuHeader,C as MenuItem,E as MenuKeyboard,x as MenuPopover,T as MenuSeparator,y as MenuSubTrigger,v as MenuTrigger};
+import{classNames as e}from"../utilities/theme.js";import{b as t,c as n,jt as r}from"../icons.js";import{ListBoxCollection as i}from"./list-box.js";import{SelectPopover as a,SelectTrigger as o}from"./select.js";import{Fragment as s,jsx as c,jsxs as l}from"react/jsx-runtime";import{Header as u,Keyboard as d,Menu as f,MenuItem as p,MenuTrigger as m,Separator as h,SubmenuTrigger as g,composeRenderProps as _}from"react-aria-components";var v=m,y=g,b=i;function x({className:t,...n}){return c(a,{className:_(t,t=>e(t)),...n})}function S({className:t,...n}){return c(f,{className:e(`overflow-auto p-1 outline-0 body-base`,t),escapeKeyBehavior:`none`,...n})}function C({children:i,className:a,...o}){return c(p,{textValue:o.textValue||(typeof i==`string`?i:void 0),className:_(a,t=>e(`btn btn-ghost relative flex justify-start input-dim`,`data-[selection-mode]:pl-input`,t)),...o,children:_(i,(e,i)=>l(s,{children:[c(`span`,{className:`absolute left-2 flex size-icon items-center justify-center`,children:i.isSelected&&l(s,{children:[i.selectionMode==`single`&&c(t,{className:`size-icon fill-current`}),i.selectionMode==`multiple`&&c(n,{className:`size-icon`})]})}),e,i.hasSubmenu&&c(r,{className:`ml-auto size-icon`})]}))})}function w({className:t,inset:n,separator:r=!0,...i}){return c(u,{className:e(`px-3 py-1.5 body font-semibold`,n&&`pl-input`,r&&`-mx-1 mb-1 border-b border-b-border pb-2.5`,t),...i})}function T({className:t,...n}){return c(h,{className:e(`-mx-1 my-1 h-px bg-muted`,t),...n})}function E({className:t,...n}){return c(d,{className:e(`ml-auto body-sm tracking-widest opacity-60`,t),...n})}function D({label:e,children:t,variant:n,isDisabled:r,withChevron:i=!0,size:a,isNonModal:s,id:u,triggerClassName:d,"aria-label":f=`Menu`,...p}){return l(v,{...p,children:[c(o,{id:u,isDisabled:r,autoFocus:!!p.autoFocus,variant:n,size:a,"aria-label":f,withChevron:i,className:d,children:e}),c(x,{className:`overflow-auto`,children:c(S,{...p,children:t})})]})}export{D as EasyMenu,S as Menu,b as MenuCollection,w as MenuHeader,C as MenuItem,E as MenuKeyboard,x as MenuPopover,T as MenuSeparator,y as MenuSubTrigger,v as MenuTrigger};
 //# sourceMappingURL=menu.js.map

package/dist/components/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","names":[],"sources":["../../lib/components/menu.tsx"],"sourcesContent":["import { VariantProps } from 'class-variance-authority';\nimport {\n    Header as AriaHeader,\n    Keyboard as AriaKeyboard,\n    Menu as AriaMenu,\n    MenuItem as AriaMenuItem,\n    MenuItemProps as AriaMenuItemProps,\n    MenuProps as AriaMenuProps,\n    MenuTrigger as AriaMenuTrigger,\n    MenuTriggerProps as AriaMenuTriggerProps,\n    Separator as AriaSeparator,\n    SeparatorProps as AriaSeparatorProps,\n    SubmenuTrigger as AriaSubmenuTrigger,\n    composeRenderProps,\n    PopoverProps,\n} from 'react-aria-components';\n\nimport { classNames } from '../utilities/theme';\n\nimport { buttonVariants } from './button';\nimport { IcCheck, IcDot, IcRight } from './icons';\nimport { ListBoxCollection } from './list-box';\nimport { SelectPopover, SelectTrigger } from './select';\n\nexport const MenuTrigger = AriaMenuTrigger;\nexport const MenuSubTrigger = AriaSubmenuTrigger;\nexport const MenuCollection = ListBoxCollection;\n\nexport function MenuPopover({ className, ...props }: PopoverProps) {\n    return <SelectPopover className={composeRenderProps(className, className => classNames(className))} {...props} />;\n}\n\nexport function Menu<T extends object>({ className, ...props }: AriaMenuProps<T>) {\n    return (\n        <AriaMenu\n            className={classNames('overflow-auto p-1 outline-0 body-base', className)}\n            escapeKeyBehavior=\"none\"\n            {...props}\n        />\n    );\n}\n\nexport function MenuItem({ children, className, ...props }: AriaMenuItemProps & { ref?: React.Ref<HTMLDivElement> }) {\n    return (\n        <AriaMenuItem\n            textValue={props.textValue || (typeof children === 'string' ? children : undefined)}\n            className={composeRenderProps(className, className =>\n                classNames(\n                    'btn btn-ghost relative flex justify-start input-dim',\n                    /* Selection Mode */\n                    'data-[selection-mode]:pl-input',\n                    className\n                )\n            )}\n            {...props}\n        >\n            {composeRenderProps(children, (children, renderProps) => (\n                <>\n                    <span className=\"absolute left-2 flex size-icon items-center justify-center\">\n                        {renderProps.isSelected && (\n                            <>\n                                {renderProps.selectionMode == 'single' && <IcDot className=\"size-icon fill-current\" />}\n                                {renderProps.selectionMode == 'multiple' && <IcCheck className=\"size-icon\" />}\n                            </>\n                        )}\n                    </span>\n\n                    {children}\n\n                    {renderProps.hasSubmenu && <IcRight className=\"ml-auto size-icon\" />}\n                </>\n            ))}\n        </AriaMenuItem>\n    );\n}\n\ninterface MenuHeaderProps extends React.ComponentProps<typeof AriaHeader> {\n    inset?: boolean;\n    separator?: boolean;\n}\n\nexport function MenuHeader({ className, inset, separator = true, ...props }: MenuHeaderProps) {\n    return (\n        <AriaHeader\n            className={classNames(\n                'px-3 py-1.5 body font-semibold',\n                inset && 'pl-input',\n                separator && '-mx-1 mb-1 border-b border-b-border pb-2.5',\n                className\n            )}\n            {...props}\n        />\n    );\n}\n\nexport function MenuSeparator({ className, ...props }: AriaSeparatorProps) {\n    return <AriaSeparator className={classNames('-mx-1 my-1 h-px bg-muted', className)} {...props} />;\n}\n\nexport function MenuKeyboard({ className, ...props }: React.ComponentProps<typeof AriaKeyboard>) {\n    return <AriaKeyboard className={classNames('ml-auto body-sm tracking-widest opacity-60', className)} {...props} />;\n}\ninterface MenuProps<T>\n    extends AriaMenuProps<T>,\n        VariantProps<typeof buttonVariants>,\n        Omit<AriaMenuTriggerProps, 'children'> {\n    label?: React.ReactNode;\n    isDisabled?: boolean;\n    isNonModal?: boolean;\n    id?: string;\n    withChevron?: boolean;\n}\n// TODO name this better\nexport function EasyMenu<T extends object>({\n    label,\n    children,\n    variant,\n    isDisabled,\n    withChevron = true,\n    size,\n    isNonModal,\n    id,\n    'aria-label': ariaLabel = 'Menu',\n    ...props\n}: MenuProps<T>) {\n    return (\n        <MenuTrigger {...props}>\n            <SelectTrigger\n                id={id}\n                isDisabled={isDisabled}\n                autoFocus={!!props.autoFocus}\n                variant={variant}\n                size={size}\n                aria-label={ariaLabel}\n                withChevron={withChevron}\n            >\n                {label}\n            </SelectTrigger>\n            <MenuPopover className=\"overflow-auto\">\n                <Menu {...props}>{children}</Menu>\n            </MenuPopover>\n        </MenuTrigger>\n    );\n}\n"],"mappings":"obAwBA,IAAa,EAAc,EACd,EAAiB,EACjB,EAAiB,EAE9B,SAAgB,EAAY,CAAE,YAAW,GAAG,GAAuB,CAC/D,OAAO,EAAC,EAAD,CAAe,UAAW,EAAmB,EAAW,GAAa,EAAW,CAAS,CAAC,EAAG,GAAI,CAAQ,CAAA,CACpH,CAEA,SAAgB,EAAuB,CAAE,YAAW,GAAG,GAA2B,CAC9E,OACI,EAAC,EAAD,CACI,UAAW,EAAW,wCAAyC,CAAS,EACxE,kBAAkB,OAClB,GAAI,CACP,CAAA,CAET,CAEA,SAAgB,EAAS,CAAE,WAAU,YAAW,GAAG,GAAkE,CACjH,OACI,EAAC,EAAD,CACI,UAAW,EAAM,YAAc,OAAO,GAAa,SAAW,EAAW,IAAA,IACzE,UAAW,EAAmB,EAAW,GACrC,EACI,sDAEA,iCACA,CACJ,CACJ,EACA,GAAI,EAEH,SAAA,EAAmB,GAAW,EAAU,IACrC,EAAA,EAAA,CAAA,SAAA,CACI,EAAC,OAAD,CAAM,UAAU,6DACX,SAAA,EAAY,YACT,EAAA,EAAA,CAAA,SAAA,CACK,EAAY,eAAiB,UAAY,EAAC,EAAD,CAAO,UAAU,wBAA0B,CAAA,EACpF,EAAY,eAAiB,YAAc,EAAC,EAAD,CAAS,UAAU,WAAa,CAAA,CAC9E,CAAA,CAAA,CAEJ,CAAA,EAEL,EAEA,EAAY,YAAc,EAAC,EAAD,CAAS,UAAU,mBAAqB,CAAA,CACrE,CAAA,CAAA,CACL,CACS,CAAA,CAEtB,CAOA,SAAgB,EAAW,CAAE,YAAW,QAAO,YAAY,GAAM,GAAG,GAA0B,CAC1F,OACI,EAAC,EAAD,CACI,UAAW,EACP,iCACA,GAAS,WACT,GAAa,6CACb,CACJ,EACA,GAAI,CACP,CAAA,CAET,CAEA,SAAgB,EAAc,CAAE,YAAW,GAAG,GAA6B,CACvE,OAAO,EAAC,EAAD,CAAe,UAAW,EAAW,2BAA4B,CAAS,EAAG,GAAI,CAAQ,CAAA,CACpG,CAEA,SAAgB,EAAa,CAAE,YAAW,GAAG,GAAoD,CAC7F,OAAO,EAAC,EAAD,CAAc,UAAW,EAAW,6CAA8C,CAAS,EAAG,GAAI,CAAQ,CAAA,CACrH,CAYA,SAAgB,EAA2B,CACvC,QACA,WACA,UACA,aACA,cAAc,GACd,OACA,aACA,KACA,aAAc,EAAY,OAC1B,GAAG,GACU,CACb,OACI,EAAC,EAAD,CAAa,GAAI,EAAjB,SAAA,CACI,EAAC,EAAD,CACQ,KACQ,aACZ,UAAW,CAAC,CAAC,EAAM,UACV,UACH,OACN,aAAY,EACC,cAEZ,SAAA,CACU,CAAA,EACf,EAAC,EAAD,CAAa,UAAU,gBACnB,SAAA,EAAC,EAAD,CAAM,GAAI,EAAQ,UAAe,CAAA,CACxB,CAAA,CACJ,GAErB"}
+{"version":3,"file":"menu.js","names":[],"sources":["../../lib/components/menu.tsx"],"sourcesContent":["import { VariantProps } from 'class-variance-authority';\nimport {\n    Header as AriaHeader,\n    Keyboard as AriaKeyboard,\n    Menu as AriaMenu,\n    MenuItem as AriaMenuItem,\n    MenuItemProps as AriaMenuItemProps,\n    MenuProps as AriaMenuProps,\n    MenuTrigger as AriaMenuTrigger,\n    MenuTriggerProps as AriaMenuTriggerProps,\n    Separator as AriaSeparator,\n    SeparatorProps as AriaSeparatorProps,\n    SubmenuTrigger as AriaSubmenuTrigger,\n    composeRenderProps,\n    PopoverProps,\n} from 'react-aria-components';\n\nimport { classNames } from '../utilities/theme';\n\nimport { buttonVariants } from './button';\nimport { IcCheck, IcDot, IcRight } from './icons';\nimport { ListBoxCollection } from './list-box';\nimport { SelectPopover, SelectTrigger } from './select';\n\nexport const MenuTrigger = AriaMenuTrigger;\nexport const MenuSubTrigger = AriaSubmenuTrigger;\nexport const MenuCollection = ListBoxCollection;\n\nexport function MenuPopover({ className, ...props }: PopoverProps) {\n    return <SelectPopover className={composeRenderProps(className, className => classNames(className))} {...props} />;\n}\n\nexport function Menu<T extends object>({ className, ...props }: AriaMenuProps<T>) {\n    return (\n        <AriaMenu\n            className={classNames('overflow-auto p-1 outline-0 body-base', className)}\n            escapeKeyBehavior=\"none\"\n            {...props}\n        />\n    );\n}\n\nexport function MenuItem({ children, className, ...props }: AriaMenuItemProps & { ref?: React.Ref<HTMLDivElement> }) {\n    return (\n        <AriaMenuItem\n            textValue={props.textValue || (typeof children === 'string' ? children : undefined)}\n            className={composeRenderProps(className, className =>\n                classNames(\n                    'btn btn-ghost relative flex justify-start input-dim',\n                    /* Selection Mode */\n                    'data-[selection-mode]:pl-input',\n                    className\n                )\n            )}\n            {...props}\n        >\n            {composeRenderProps(children, (children, renderProps) => (\n                <>\n                    <span className=\"absolute left-2 flex size-icon items-center justify-center\">\n                        {renderProps.isSelected && (\n                            <>\n                                {renderProps.selectionMode == 'single' && <IcDot className=\"size-icon fill-current\" />}\n                                {renderProps.selectionMode == 'multiple' && <IcCheck className=\"size-icon\" />}\n                            </>\n                        )}\n                    </span>\n\n                    {children}\n\n                    {renderProps.hasSubmenu && <IcRight className=\"ml-auto size-icon\" />}\n                </>\n            ))}\n        </AriaMenuItem>\n    );\n}\n\ninterface MenuHeaderProps extends React.ComponentProps<typeof AriaHeader> {\n    inset?: boolean;\n    separator?: boolean;\n}\n\nexport function MenuHeader({ className, inset, separator = true, ...props }: MenuHeaderProps) {\n    return (\n        <AriaHeader\n            className={classNames(\n                'px-3 py-1.5 body font-semibold',\n                inset && 'pl-input',\n                separator && '-mx-1 mb-1 border-b border-b-border pb-2.5',\n                className\n            )}\n            {...props}\n        />\n    );\n}\n\nexport function MenuSeparator({ className, ...props }: AriaSeparatorProps) {\n    return <AriaSeparator className={classNames('-mx-1 my-1 h-px bg-muted', className)} {...props} />;\n}\n\nexport function MenuKeyboard({ className, ...props }: React.ComponentProps<typeof AriaKeyboard>) {\n    return <AriaKeyboard className={classNames('ml-auto body-sm tracking-widest opacity-60', className)} {...props} />;\n}\ninterface MenuProps<T>\n    extends AriaMenuProps<T>, VariantProps<typeof buttonVariants>, Omit<AriaMenuTriggerProps, 'children'> {\n    label?: React.ReactNode;\n    isDisabled?: boolean;\n    isNonModal?: boolean;\n    id?: string;\n    withChevron?: boolean;\n    /** Optional className applied to the trigger button (e.g. to override its background). */\n    triggerClassName?: string;\n}\n// TODO name this better\nexport function EasyMenu<T extends object>({\n    label,\n    children,\n    variant,\n    isDisabled,\n    withChevron = true,\n    size,\n    isNonModal,\n    id,\n    triggerClassName,\n    'aria-label': ariaLabel = 'Menu',\n    ...props\n}: MenuProps<T>) {\n    return (\n        <MenuTrigger {...props}>\n            <SelectTrigger\n                id={id}\n                isDisabled={isDisabled}\n                autoFocus={!!props.autoFocus}\n                variant={variant}\n                size={size}\n                aria-label={ariaLabel}\n                withChevron={withChevron}\n                className={triggerClassName}\n            >\n                {label}\n            </SelectTrigger>\n            <MenuPopover className=\"overflow-auto\">\n                <Menu {...props}>{children}</Menu>\n            </MenuPopover>\n        </MenuTrigger>\n    );\n}\n"],"mappings":"obAwBA,IAAa,EAAc,EACd,EAAiB,EACjB,EAAiB,EAE9B,SAAgB,EAAY,CAAE,YAAW,GAAG,GAAuB,CAC/D,OAAO,EAAC,EAAD,CAAe,UAAW,EAAmB,EAAW,GAAa,EAAW,CAAS,CAAC,EAAG,GAAI,CAAQ,CAAA,CACpH,CAEA,SAAgB,EAAuB,CAAE,YAAW,GAAG,GAA2B,CAC9E,OACI,EAAC,EAAD,CACI,UAAW,EAAW,wCAAyC,CAAS,EACxE,kBAAkB,OAClB,GAAI,CACP,CAAA,CAET,CAEA,SAAgB,EAAS,CAAE,WAAU,YAAW,GAAG,GAAkE,CACjH,OACI,EAAC,EAAD,CACI,UAAW,EAAM,YAAc,OAAO,GAAa,SAAW,EAAW,IAAA,IACzE,UAAW,EAAmB,EAAW,GACrC,EACI,sDAEA,iCACA,CACJ,CACJ,EACA,GAAI,EAEH,SAAA,EAAmB,GAAW,EAAU,IACrC,EAAA,EAAA,CAAA,SAAA,CACI,EAAC,OAAD,CAAM,UAAU,6DACX,SAAA,EAAY,YACT,EAAA,EAAA,CAAA,SAAA,CACK,EAAY,eAAiB,UAAY,EAAC,EAAD,CAAO,UAAU,wBAA0B,CAAA,EACpF,EAAY,eAAiB,YAAc,EAAC,EAAD,CAAS,UAAU,WAAa,CAAA,CAC9E,CAAA,CAAA,CAEJ,CAAA,EAEL,EAEA,EAAY,YAAc,EAAC,EAAD,CAAS,UAAU,mBAAqB,CAAA,CACrE,CAAA,CAAA,CACL,CACS,CAAA,CAEtB,CAOA,SAAgB,EAAW,CAAE,YAAW,QAAO,YAAY,GAAM,GAAG,GAA0B,CAC1F,OACI,EAAC,EAAD,CACI,UAAW,EACP,iCACA,GAAS,WACT,GAAa,6CACb,CACJ,EACA,GAAI,CACP,CAAA,CAET,CAEA,SAAgB,EAAc,CAAE,YAAW,GAAG,GAA6B,CACvE,OAAO,EAAC,EAAD,CAAe,UAAW,EAAW,2BAA4B,CAAS,EAAG,GAAI,CAAQ,CAAA,CACpG,CAEA,SAAgB,EAAa,CAAE,YAAW,GAAG,GAAoD,CAC7F,OAAO,EAAC,EAAD,CAAc,UAAW,EAAW,6CAA8C,CAAS,EAAG,GAAI,CAAQ,CAAA,CACrH,CAYA,SAAgB,EAA2B,CACvC,QACA,WACA,UACA,aACA,cAAc,GACd,OACA,aACA,KACA,mBACA,aAAc,EAAY,OAC1B,GAAG,GACU,CACb,OACI,EAAC,EAAD,CAAa,GAAI,EAAjB,SAAA,CACI,EAAC,EAAD,CACQ,KACQ,aACZ,UAAW,CAAC,CAAC,EAAM,UACV,UACH,OACN,aAAY,EACC,cACb,UAAW,EAEV,SAAA,CACU,CAAA,EACf,EAAC,EAAD,CAAa,UAAU,gBACnB,SAAA,EAAC,EAAD,CAAM,GAAI,EAAQ,UAAe,CAAA,CACxB,CAAA,CACJ,GAErB"}

package/dist/components/multi-select.d.ts

@@ -7,11 +7,12 @@ interface MultipleSelectionProps {
     onChange: (v: Set<string | number>) => void;
     items: SelectOption[];
 }
-export interface MultiSelectProps extends MultipleSelectionProps, FormFieldProps, Omit<React.ComponentProps<typeof EasyMenu>, 'label' | 'items'> {
+export interface MultiSelectProps extends MultipleSelectionProps, FormFieldProps, Omit<React.ComponentProps<typeof EasyMenu>, 'label' | 'items' | 'triggerClassName'> {
     triggerLabel?: ((value: Set<string | number>) => React.ReactNode) | React.ReactNode;
     maxVisibleItems?: number;
+    inputClassName?: string;
 }
-export declare function MultiSelect({ items, value, onChange: setValue, label, errorMessage, description, requiredIndicator, maxVisibleItems, ...props }: MultiSelectProps): React.JSX.Element;
+export declare function MultiSelect({ items, value, onChange: setValue, label, errorMessage, description, requiredIndicator, maxVisibleItems, inputClassName, ...props }: MultiSelectProps): React.JSX.Element;
 export interface TfMultiSelectProps extends Omit<MultiSelectProps, 'value' | 'onChange'> {
 }
 export declare function TfMultiSelect({ ...props }: TfMultiSelectProps): React.JSX.Element;

package/dist/components/multi-select.js

@@ -1,2 +1,2 @@
-"use client";import{useFieldContext as e}from"../utilities/form-context.js";import{FormField as t}from"./form.js";import{getFieldErrorMessage as n}from"../utilities/form.js";import{EasyMenu as r,MenuItem as i}from"./menu.js";import{useId as a}from"react";import{Fragment as o,jsx as s,jsxs as c}from"react/jsx-runtime";function l(e,t,n){let r=new Map(e.map(e=>[e.id,e.label])),i=Array.from(t).map(e=>r.get(e)).filter(e=>e!==void 0);if(i.length===0)return`Select options`;let a=i.slice(0,n).flatMap((e,t)=>t===0?[e]:[`, `,e]),l=i.length-n;return l>0?c(o,{children:[a,` +`,l,` more`]}):s(o,{children:a})}function u(e,t,n,r){return e===void 0?l(n,t,r):typeof e==`function`?e(t):e}function d({items:e,value:n,onChange:o,label:c,errorMessage:l,description:d,requiredIndicator:f,maxVisibleItems:p=2,...m}){let h=a(),g=m.id||h;return s(`div`,{className:`group form-field`,children:s(t,{label:c,description:d,errorMessage:l,requiredIndicator:f,htmlFor:g,children:s(r,{id:g,isNonModal:!1,selectionMode:`multiple`,selectedKeys:n,onSelectionChange:e=>{typeof e!=`string`&&o(e)},items:e,label:u(m.triggerLabel,n,e,p),...m,children:e=>s(i,{id:e.id,isDisabled:e?.disabled,children:e.label},e.id)})})})}function f({...t}){let r=e({disabled:t.isDisabled});return s(d,{requiredIndicator:r.isRequired,value:new Set(r.state.value),onChange:e=>r.setValue(Array.from(e)),onClose:r.handleBlur,errorMessage:n(r),...t,isDisabled:t.isDisabled||r.isSubmitting})}export{d as MultiSelect,f as TfMultiSelect};
+"use client";import{useFieldContext as e}from"../utilities/form-context.js";import{FormField as t}from"./form.js";import{getFieldErrorMessage as n}from"../utilities/form.js";import{EasyMenu as r,MenuItem as i}from"./menu.js";import{useId as a}from"react";import{Fragment as o,jsx as s,jsxs as c}from"react/jsx-runtime";function l(e,t,n){let r=new Map(e.map(e=>[e.id,e.label])),i=Array.from(t).map(e=>r.get(e)).filter(e=>e!==void 0);if(i.length===0)return`Select options`;let a=i.slice(0,n).flatMap((e,t)=>t===0?[e]:[`, `,e]),l=i.length-n;return l>0?c(o,{children:[a,` +`,l,` more`]}):s(o,{children:a})}function u(e,t,n,r){return e===void 0?l(n,t,r):typeof e==`function`?e(t):e}function d({items:e,value:n,onChange:o,label:c,errorMessage:l,description:d,requiredIndicator:f,maxVisibleItems:p=2,inputClassName:m,...h}){let g=a(),_=h.id||g;return s(`div`,{className:`group form-field`,children:s(t,{label:c,description:d,errorMessage:l,requiredIndicator:f,htmlFor:_,children:s(r,{id:_,isNonModal:!1,selectionMode:`multiple`,selectedKeys:n,onSelectionChange:e=>{typeof e!=`string`&&o(e)},items:e,label:u(h.triggerLabel,n,e,p),triggerClassName:m,...h,children:e=>s(i,{id:e.id,isDisabled:e?.disabled,children:e.label},e.id)})})})}function f({...t}){let r=e({disabled:t.isDisabled});return s(d,{requiredIndicator:r.isRequired,value:new Set(r.state.value),onChange:e=>r.setValue(Array.from(e)),onClose:r.handleBlur,errorMessage:n(r),...t,isDisabled:t.isDisabled||r.isSubmitting})}export{d as MultiSelect,f as TfMultiSelect};
 //# sourceMappingURL=multi-select.js.map

package/dist/components/multi-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"multi-select.js","names":[],"sources":["../../lib/components/multi-select.tsx"],"sourcesContent":["'use client';\nimport React, { useId } from 'react';\nimport { EasyMenu, MenuItem } from '../components/menu';\nimport type { SelectOption } from '../components/select-options';\nimport { getFieldErrorMessage } from '../utilities/form';\nimport { useFieldContext } from '../utilities/form-context';\nimport { FormField, type FormFieldProps } from './form';\n\ninterface MultipleSelectionProps {\n    value: Set<string | number>;\n    onChange: (v: Set<string | number>) => void;\n    items: SelectOption[];\n}\n\nexport interface MultiSelectProps\n    extends MultipleSelectionProps,\n        FormFieldProps,\n        Omit<React.ComponentProps<typeof EasyMenu>, 'label' | 'items'> {\n    triggerLabel?: ((value: Set<string | number>) => React.ReactNode) | React.ReactNode;\n    maxVisibleItems?: number;\n}\n\nfunction getDefaultTriggerLabel(\n    items: SelectOption[],\n    value: Set<string | number>,\n    maxVisibleItems: number\n): React.ReactNode {\n    const idToLabel = new Map<string | number, React.ReactNode>(items.map(item => [item.id, item.label]));\n\n    const labels = Array.from(value)\n        .map(id => idToLabel.get(id))\n        .filter((x): x is React.ReactNode => x !== undefined);\n\n    if (labels.length === 0) return 'Select options';\n\n    const visible = labels.slice(0, maxVisibleItems);\n    const withCommas = visible.flatMap((node, i) => (i === 0 ? [node] : [', ', node]));\n    const overflowCount = labels.length - maxVisibleItems;\n\n    return overflowCount > 0 ? (\n        <>\n            {withCommas} +{overflowCount} more\n        </>\n    ) : (\n        <>{withCommas}</>\n    );\n}\n\nfunction getTriggerLabel(\n    triggerLabel: MultiSelectProps['triggerLabel'],\n    value: Set<string | number>,\n    items: SelectOption[],\n    maxVisibleItems: number\n): React.ReactNode {\n    if (triggerLabel === undefined) {\n        return getDefaultTriggerLabel(items, value, maxVisibleItems);\n    }\n\n    if (typeof triggerLabel === 'function') {\n        return triggerLabel(value);\n    }\n\n    return triggerLabel;\n}\n\nexport function MultiSelect({\n    items,\n    value,\n    onChange: setValue,\n    label,\n    errorMessage,\n    description,\n    requiredIndicator,\n    maxVisibleItems = 2,\n    ...props\n}: MultiSelectProps) {\n    const generatedId = useId();\n    const fieldId = props.id || generatedId;\n\n    return (\n        <div className=\"group form-field\">\n            <FormField {...{ label, description, errorMessage, requiredIndicator, htmlFor: fieldId }}>\n                <EasyMenu\n                    id={fieldId}\n                    isNonModal={false}\n                    selectionMode=\"multiple\"\n                    selectedKeys={value}\n                    onSelectionChange={v => {\n                        if (typeof v === 'string') return;\n                        setValue(v);\n                    }}\n                    items={items}\n                    label={getTriggerLabel(props.triggerLabel, value, items, maxVisibleItems)}\n                    {...props}\n                >\n                    {item => (\n                        <MenuItem id={item.id} key={item.id} isDisabled={item?.disabled}>\n                            {item.label}\n                        </MenuItem>\n                    )}\n                </EasyMenu>\n            </FormField>\n        </div>\n    );\n}\n\nexport interface TfMultiSelectProps extends Omit<MultiSelectProps, 'value' | 'onChange'> {}\nexport function TfMultiSelect({ ...props }: TfMultiSelectProps) {\n    const field = useFieldContext<string[]>({\n        disabled: props.isDisabled,\n    });\n\n    return (\n        <MultiSelect\n            requiredIndicator={field.isRequired}\n            value={new Set(field.state.value)}\n            // @ts-expect-error\n            onChange={e => field.setValue(Array.from(e))}\n            onClose={field.handleBlur}\n            errorMessage={getFieldErrorMessage(field)}\n            {...props}\n            isDisabled={props.isDisabled || field.isSubmitting}\n        />\n    );\n}\n"],"mappings":"+TAsBA,SAAS,EACL,EACA,EACA,EACe,CACf,IAAM,EAAY,IAAI,IAAsC,EAAM,IAAI,GAAQ,CAAC,EAAK,GAAI,EAAK,KAAK,CAAC,CAAC,EAE9F,EAAS,MAAM,KAAK,CAAK,CAAC,CAC3B,IAAI,GAAM,EAAU,IAAI,CAAE,CAAC,CAAC,CAC5B,OAAQ,GAA4B,IAAM,IAAA,EAAS,EAExD,GAAI,EAAO,SAAW,EAAG,MAAO,iBAGhC,IAAM,EADU,EAAO,MAAM,EAAG,CACb,CAAA,CAAQ,SAAS,EAAM,IAAO,IAAM,EAAI,CAAC,CAAI,EAAI,CAAC,KAAM,CAAI,CAAE,EAC3E,EAAgB,EAAO,OAAS,EAEtC,OAAO,EAAgB,EACnB,EAAA,EAAA,CAAA,SAAA,CACK,EAAW,KAAG,EAAc,OAC/B,CAAA,CAAA,EAEF,EAAA,EAAA,CAAA,SAAG,CAAa,CAAA,CAExB,CAEA,SAAS,EACL,EACA,EACA,EACA,EACe,CASf,OARI,IAAiB,IAAA,GACV,EAAuB,EAAO,EAAO,CAAe,EAG3D,OAAO,GAAiB,WACjB,EAAa,CAAK,EAGtB,CACX,CAEA,SAAgB,EAAY,CACxB,QACA,QACA,SAAU,EACV,QACA,eACA,cACA,oBACA,kBAAkB,EAClB,GAAG,GACc,CACjB,IAAM,EAAc,EAAM,EACpB,EAAU,EAAM,IAAM,EAE5B,OACI,EAAC,MAAD,CAAK,UAAU,mBACX,SAAA,EAAC,EAAD,CAAiB,QAAO,cAAa,eAAc,oBAAmB,QAAS,EAC3E,SAAA,EAAC,EAAD,CACI,GAAI,EACJ,WAAY,GACZ,cAAc,WACd,aAAc,EACd,kBAAmB,GAAK,CAChB,OAAO,GAAM,UACjB,EAAS,CAAC,CACd,EACO,QACP,MAAO,EAAgB,EAAM,aAAc,EAAO,EAAO,CAAe,EACxE,GAAI,EAEH,SAAA,GACG,EAAC,EAAD,CAAU,GAAI,EAAK,GAAkB,WAAY,GAAM,SAClD,SAAA,EAAK,KACA,EAFkB,EAAK,EAEvB,CAER,CAAA,CACH,CAAA,CACV,CAAA,CAEb,CAGA,SAAgB,EAAc,CAAE,GAAG,GAA6B,CAC5D,IAAM,EAAQ,EAA0B,CACpC,SAAU,EAAM,UACpB,CAAC,EAED,OACI,EAAC,EAAD,CACI,kBAAmB,EAAM,WACzB,MAAO,IAAI,IAAI,EAAM,MAAM,KAAK,EAEhC,SAAU,GAAK,EAAM,SAAS,MAAM,KAAK,CAAC,CAAC,EAC3C,QAAS,EAAM,WACf,aAAc,EAAqB,CAAK,EACxC,GAAI,EACJ,WAAY,EAAM,YAAc,EAAM,YACzC,CAAA,CAET"}
+{"version":3,"file":"multi-select.js","names":[],"sources":["../../lib/components/multi-select.tsx"],"sourcesContent":["'use client';\nimport React, { useId } from 'react';\nimport { EasyMenu, MenuItem } from '../components/menu';\nimport type { SelectOption } from '../components/select-options';\nimport { getFieldErrorMessage } from '../utilities/form';\nimport { useFieldContext } from '../utilities/form-context';\nimport { FormField, type FormFieldProps } from './form';\n\ninterface MultipleSelectionProps {\n    value: Set<string | number>;\n    onChange: (v: Set<string | number>) => void;\n    items: SelectOption[];\n}\n\nexport interface MultiSelectProps\n    extends\n        MultipleSelectionProps,\n        FormFieldProps,\n        Omit<React.ComponentProps<typeof EasyMenu>, 'label' | 'items' | 'triggerClassName'> {\n    triggerLabel?: ((value: Set<string | number>) => React.ReactNode) | React.ReactNode;\n    maxVisibleItems?: number;\n    inputClassName?: string;\n}\n\nfunction getDefaultTriggerLabel(\n    items: SelectOption[],\n    value: Set<string | number>,\n    maxVisibleItems: number\n): React.ReactNode {\n    const idToLabel = new Map<string | number, React.ReactNode>(items.map(item => [item.id, item.label]));\n\n    const labels = Array.from(value)\n        .map(id => idToLabel.get(id))\n        .filter((x): x is React.ReactNode => x !== undefined);\n\n    if (labels.length === 0) return 'Select options';\n\n    const visible = labels.slice(0, maxVisibleItems);\n    const withCommas = visible.flatMap((node, i) => (i === 0 ? [node] : [', ', node]));\n    const overflowCount = labels.length - maxVisibleItems;\n\n    return overflowCount > 0 ? (\n        <>\n            {withCommas} +{overflowCount} more\n        </>\n    ) : (\n        <>{withCommas}</>\n    );\n}\n\nfunction getTriggerLabel(\n    triggerLabel: MultiSelectProps['triggerLabel'],\n    value: Set<string | number>,\n    items: SelectOption[],\n    maxVisibleItems: number\n): React.ReactNode {\n    if (triggerLabel === undefined) {\n        return getDefaultTriggerLabel(items, value, maxVisibleItems);\n    }\n\n    if (typeof triggerLabel === 'function') {\n        return triggerLabel(value);\n    }\n\n    return triggerLabel;\n}\n\nexport function MultiSelect({\n    items,\n    value,\n    onChange: setValue,\n    label,\n    errorMessage,\n    description,\n    requiredIndicator,\n    maxVisibleItems = 2,\n    inputClassName,\n    ...props\n}: MultiSelectProps) {\n    const generatedId = useId();\n    const fieldId = props.id || generatedId;\n\n    return (\n        <div className=\"group form-field\">\n            <FormField {...{ label, description, errorMessage, requiredIndicator, htmlFor: fieldId }}>\n                <EasyMenu\n                    id={fieldId}\n                    isNonModal={false}\n                    selectionMode=\"multiple\"\n                    selectedKeys={value}\n                    onSelectionChange={v => {\n                        if (typeof v === 'string') return;\n                        setValue(v);\n                    }}\n                    items={items}\n                    label={getTriggerLabel(props.triggerLabel, value, items, maxVisibleItems)}\n                    triggerClassName={inputClassName}\n                    {...props}\n                >\n                    {item => (\n                        <MenuItem id={item.id} key={item.id} isDisabled={item?.disabled}>\n                            {item.label}\n                        </MenuItem>\n                    )}\n                </EasyMenu>\n            </FormField>\n        </div>\n    );\n}\n\nexport interface TfMultiSelectProps extends Omit<MultiSelectProps, 'value' | 'onChange'> {}\nexport function TfMultiSelect({ ...props }: TfMultiSelectProps) {\n    const field = useFieldContext<string[]>({\n        disabled: props.isDisabled,\n    });\n\n    return (\n        <MultiSelect\n            requiredIndicator={field.isRequired}\n            value={new Set(field.state.value)}\n            // @ts-expect-error\n            onChange={e => field.setValue(Array.from(e))}\n            onClose={field.handleBlur}\n            errorMessage={getFieldErrorMessage(field)}\n            {...props}\n            isDisabled={props.isDisabled || field.isSubmitting}\n        />\n    );\n}\n"],"mappings":"+TAwBA,SAAS,EACL,EACA,EACA,EACe,CACf,IAAM,EAAY,IAAI,IAAsC,EAAM,IAAI,GAAQ,CAAC,EAAK,GAAI,EAAK,KAAK,CAAC,CAAC,EAE9F,EAAS,MAAM,KAAK,CAAK,CAAC,CAC3B,IAAI,GAAM,EAAU,IAAI,CAAE,CAAC,CAAC,CAC5B,OAAQ,GAA4B,IAAM,IAAA,EAAS,EAExD,GAAI,EAAO,SAAW,EAAG,MAAO,iBAGhC,IAAM,EADU,EAAO,MAAM,EAAG,CACb,CAAA,CAAQ,SAAS,EAAM,IAAO,IAAM,EAAI,CAAC,CAAI,EAAI,CAAC,KAAM,CAAI,CAAE,EAC3E,EAAgB,EAAO,OAAS,EAEtC,OAAO,EAAgB,EACnB,EAAA,EAAA,CAAA,SAAA,CACK,EAAW,KAAG,EAAc,OAC/B,CAAA,CAAA,EAEF,EAAA,EAAA,CAAA,SAAG,CAAa,CAAA,CAExB,CAEA,SAAS,EACL,EACA,EACA,EACA,EACe,CASf,OARI,IAAiB,IAAA,GACV,EAAuB,EAAO,EAAO,CAAe,EAG3D,OAAO,GAAiB,WACjB,EAAa,CAAK,EAGtB,CACX,CAEA,SAAgB,EAAY,CACxB,QACA,QACA,SAAU,EACV,QACA,eACA,cACA,oBACA,kBAAkB,EAClB,iBACA,GAAG,GACc,CACjB,IAAM,EAAc,EAAM,EACpB,EAAU,EAAM,IAAM,EAE5B,OACI,EAAC,MAAD,CAAK,UAAU,mBACX,SAAA,EAAC,EAAD,CAAiB,QAAO,cAAa,eAAc,oBAAmB,QAAS,EAC3E,SAAA,EAAC,EAAD,CACI,GAAI,EACJ,WAAY,GACZ,cAAc,WACd,aAAc,EACd,kBAAmB,GAAK,CAChB,OAAO,GAAM,UACjB,EAAS,CAAC,CACd,EACO,QACP,MAAO,EAAgB,EAAM,aAAc,EAAO,EAAO,CAAe,EACxE,iBAAkB,EAClB,GAAI,EAEH,SAAA,GACG,EAAC,EAAD,CAAU,GAAI,EAAK,GAAkB,WAAY,GAAM,SAClD,SAAA,EAAK,KACA,EAFkB,EAAK,EAEvB,CAER,CAAA,CACH,CAAA,CACV,CAAA,CAEb,CAGA,SAAgB,EAAc,CAAE,GAAG,GAA6B,CAC5D,IAAM,EAAQ,EAA0B,CACpC,SAAU,EAAM,UACpB,CAAC,EAED,OACI,EAAC,EAAD,CACI,kBAAmB,EAAM,WACzB,MAAO,IAAI,IAAI,EAAM,MAAM,KAAK,EAEhC,SAAU,GAAK,EAAM,SAAS,MAAM,KAAK,CAAC,CAAC,EAC3C,QAAS,EAAM,WACf,aAAc,EAAqB,CAAK,EACxC,GAAI,EACJ,WAAY,EAAM,YAAc,EAAM,YACzC,CAAA,CAET"}

package/dist/components/numberfield.d.ts

@@ -1,8 +1,10 @@
 import { InputProps as AriaInputProps, NumberFieldProps as AriaNumberFieldProps } from 'react-aria-components';
 import { FormFieldProps } from './form';
 export declare function NumberFieldInput({ className, ...props }: AriaInputProps): import("react").JSX.Element;
-export type NumberFieldProps = AriaNumberFieldProps & FormFieldProps;
-export declare function NumberField({ label, description, errorMessage, requiredIndicator, className, ...props }: NumberFieldProps): import("react").JSX.Element;
+export type NumberFieldProps = AriaNumberFieldProps & FormFieldProps & {
+    inputClassName?: string;
+};
+export declare function NumberField({ label, description, errorMessage, requiredIndicator, className, inputClassName, ...props }: NumberFieldProps): import("react").JSX.Element;
 export declare function TfNumberField({ isDisabled, ...props }: Omit<React.ComponentProps<typeof NumberField>, 'value' | 'id' | 'onChange' | 'onBlur'>): import("react").JSX.Element;
 export declare function DaysField({ label, description, errorMessage, requiredIndicator, className, ...props }: NumberFieldProps): import("react").JSX.Element;
 export declare function TfDaysField({ isDisabled, ...props }: Omit<React.ComponentProps<typeof DaysField>, 'value' | 'id' | 'onChange' | 'onBlur'>): import("react").JSX.Element;

package/dist/components/numberfield.js

@@ -1,2 +1,2 @@
-"use client";import{classNames as e}from"../utilities/theme.js";import{Wt as t,x as n}from"../icons.js";import{useFieldContext as r}from"../utilities/form-context.js";import{Button as i}from"./button.js";import{FieldGroup as a,FormField as o}from"./form.js";import{getFieldErrorMessage as s}from"../utilities/form.js";import{jsx as c,jsxs as l}from"react/jsx-runtime";import{Input as u,NumberField as d,composeRenderProps as f}from"react-aria-components";var p=d;function m({className:t,...n}){return c(u,{className:f(t,t=>e(`w-fit min-w-0 flex-1 border-r border-transparent outline-0 placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden`,t)),...n})}function h({className:r,...i}){return l(`div`,{className:e(`absolute right-0 flex h-full flex-col border-l`,r),...i,children:[c(g,{slot:`increment`,children:c(t,{"aria-hidden":!0,className:`size-icon`})}),c(`div`,{className:`border-b`}),c(g,{slot:`decrement`,children:c(n,{"aria-hidden":!0,className:`size-icon`})})]})}function g({className:t,...n}){return c(i,{className:f(t,t=>e(`w-auto grow h-3 px-0.5 text-muted-foreground`,t)),variant:`ghost`,size:`none`,...n})}function _({label:t,description:n,errorMessage:r,requiredIndicator:i,className:s,...u}){return c(p,{className:f(s,t=>e(`group form-field`,t)),...u,children:c(o,{label:t,description:n,errorMessage:r,requiredIndicator:i,children:l(a,{children:[c(m,{className:`pr-input`}),c(h,{})]})})})}function v({isDisabled:e,...t}){let n=r({disabled:e});return c(_,{isInvalid:!!s(n),isDisabled:e||n.isSubmitting,value:n.state.value,id:n.name,onChange:n.handleChange,onBlur:n.handleBlur,errorMessage:s(n),requiredIndicator:n.isRequired,...t})}function y({label:t,description:n,errorMessage:r,requiredIndicator:i,className:s,...u}){return c(p,{className:f(s,t=>e(`group form-field`,t)),...u,children:c(o,{label:t,description:n,errorMessage:r,requiredIndicator:i,children:l(a,{children:[c(m,{className:`pr-input`}),c(`div`,{className:`absolute right-3 opacity-80 select-none text-muted`,children:`days`})]})})})}function b({isDisabled:e,...t}){let n=r({disabled:e}),i=86400,a=n.state.value==null?void 0:n.state.value/i;return c(y,{isInvalid:!!s(n),isDisabled:e||n.isSubmitting,value:a,id:n.name,onChange:e=>{let t=e*i;n.handleChange(t)},onBlur:n.handleBlur,errorMessage:s(n),requiredIndicator:n.isRequired,...t})}export{y as DaysField,_ as NumberField,m as NumberFieldInput,b as TfDaysField,v as TfNumberField};
+"use client";import{classNames as e}from"../utilities/theme.js";import{Wt as t,x as n}from"../icons.js";import{useFieldContext as r}from"../utilities/form-context.js";import{Button as i}from"./button.js";import{FieldGroup as a,FormField as o}from"./form.js";import{getFieldErrorMessage as s}from"../utilities/form.js";import{jsx as c,jsxs as l}from"react/jsx-runtime";import{Input as u,NumberField as d,composeRenderProps as f}from"react-aria-components";var p=d;function m({className:t,...n}){return c(u,{className:f(t,t=>e(`w-fit min-w-0 flex-1 border-r border-transparent outline-0 placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden`,t)),...n})}function h({className:r,...i}){return l(`div`,{className:e(`absolute right-0 flex h-full flex-col border-l`,r),...i,children:[c(g,{slot:`increment`,children:c(t,{"aria-hidden":!0,className:`size-icon`})}),c(`div`,{className:`border-b`}),c(g,{slot:`decrement`,children:c(n,{"aria-hidden":!0,className:`size-icon`})})]})}function g({className:t,...n}){return c(i,{className:f(t,t=>e(`w-auto grow h-3 px-0.5 text-muted-foreground`,t)),variant:`ghost`,size:`none`,...n})}function _({label:t,description:n,errorMessage:r,requiredIndicator:i,className:s,inputClassName:u,...d}){return c(p,{className:f(s,t=>e(`group form-field`,t)),...d,children:c(o,{label:t,description:n,errorMessage:r,requiredIndicator:i,children:l(a,{className:u,children:[c(m,{className:`pr-input`}),c(h,{})]})})})}function v({isDisabled:e,...t}){let n=r({disabled:e});return c(_,{isInvalid:!!s(n),isDisabled:e||n.isSubmitting,value:n.state.value,id:n.name,onChange:n.handleChange,onBlur:n.handleBlur,errorMessage:s(n),requiredIndicator:n.isRequired,...t})}function y({label:t,description:n,errorMessage:r,requiredIndicator:i,className:s,...u}){return c(p,{className:f(s,t=>e(`group form-field`,t)),...u,children:c(o,{label:t,description:n,errorMessage:r,requiredIndicator:i,children:l(a,{children:[c(m,{className:`pr-input`}),c(`div`,{className:`absolute right-3 opacity-80 select-none text-muted`,children:`days`})]})})})}function b({isDisabled:e,...t}){let n=r({disabled:e}),i=86400,a=n.state.value==null?void 0:n.state.value/i;return c(y,{isInvalid:!!s(n),isDisabled:e||n.isSubmitting,value:a,id:n.name,onChange:e=>{let t=e*i;n.handleChange(t)},onBlur:n.handleBlur,errorMessage:s(n),requiredIndicator:n.isRequired,...t})}export{y as DaysField,_ as NumberField,m as NumberFieldInput,b as TfDaysField,v as TfNumberField};
 //# sourceMappingURL=numberfield.js.map

package/dist/components/numberfield.js.map

@@ -1 +1 @@
-{"version":3,"file":"numberfield.js","names":[],"sources":["../../lib/components/numberfield.tsx"],"sourcesContent":["'use client';\nimport {\n    ButtonProps as AriaButtonProps,\n    Input as AriaInput,\n    InputProps as AriaInputProps,\n    NumberField as AriaNumberField,\n    NumberFieldProps as AriaNumberFieldProps,\n    composeRenderProps,\n} from 'react-aria-components';\n\nimport { Button } from '../components/button';\nimport { getFieldErrorMessage } from '../utilities/form';\nimport { useFieldContext } from '../utilities/form-context';\nimport { classNames } from '../utilities/theme';\nimport { FieldGroup, FormField, type FormFieldProps } from './form';\nimport { IcDown, IcUp } from './icons';\n\nconst ANumberField = AriaNumberField;\n\nexport function NumberFieldInput({ className, ...props }: AriaInputProps) {\n    return (\n        <AriaInput\n            className={composeRenderProps(className, className =>\n                classNames(\n                    'w-fit min-w-0 flex-1 border-r border-transparent outline-0 placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden',\n                    className\n                )\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction NumberFieldSteppers({ className, ...props }: React.ComponentProps<'div'>) {\n    return (\n        <div className={classNames('absolute right-0 flex h-full flex-col border-l', className)} {...props}>\n            <NumberFieldStepper slot=\"increment\">\n                <IcUp aria-hidden className=\"size-icon\" />\n            </NumberFieldStepper>\n            <div className=\"border-b\" />\n            <NumberFieldStepper slot=\"decrement\">\n                <IcDown aria-hidden className=\"size-icon\" />\n            </NumberFieldStepper>\n        </div>\n    );\n}\n\nfunction NumberFieldStepper({ className, ...props }: AriaButtonProps) {\n    return (\n        <Button\n            className={composeRenderProps(className, className =>\n                classNames('w-auto grow h-3 px-0.5 text-muted-foreground', className)\n            )}\n            variant={'ghost'}\n            size={'none'}\n            {...props}\n        />\n    );\n}\n\nexport type NumberFieldProps = AriaNumberFieldProps & FormFieldProps;\nexport function NumberField({\n    label,\n    description,\n    errorMessage,\n    requiredIndicator,\n    className,\n    ...props\n}: NumberFieldProps) {\n    return (\n        <ANumberField\n            className={composeRenderProps(className, className => classNames('group form-field', className))}\n            {...props}\n        >\n            <FormField {...{ label, description, errorMessage, requiredIndicator }}>\n                <FieldGroup>\n                    <NumberFieldInput className={'pr-input'} />\n                    <NumberFieldSteppers />\n                </FieldGroup>\n            </FormField>\n        </ANumberField>\n    );\n}\n\nexport function TfNumberField({\n    isDisabled,\n    ...props\n}: Omit<React.ComponentProps<typeof NumberField>, 'value' | 'id' | 'onChange' | 'onBlur'>) {\n    const field = useFieldContext<number>({ disabled: isDisabled });\n\n    return (\n        <NumberField\n            isInvalid={!!getFieldErrorMessage(field)}\n            isDisabled={isDisabled || field.isSubmitting}\n            value={field.state.value}\n            id={field.name}\n            onChange={field.handleChange}\n            onBlur={field.handleBlur}\n            errorMessage={getFieldErrorMessage(field)}\n            requiredIndicator={field.isRequired}\n            {...props}\n        />\n    );\n}\n\nexport function DaysField({\n    label,\n    description,\n    errorMessage,\n    requiredIndicator,\n    className,\n    ...props\n}: NumberFieldProps) {\n    return (\n        <ANumberField\n            className={composeRenderProps(className, className => classNames('group form-field', className))}\n            {...props}\n        >\n            <FormField {...{ label, description, errorMessage, requiredIndicator }}>\n                <FieldGroup>\n                    <NumberFieldInput className={'pr-input'} />\n                    <div className=\"absolute right-3 opacity-80 select-none text-muted\">days</div>\n                </FieldGroup>\n            </FormField>\n        </ANumberField>\n    );\n}\n\nexport function TfDaysField({\n    isDisabled,\n    ...props\n}: Omit<React.ComponentProps<typeof DaysField>, 'value' | 'id' | 'onChange' | 'onBlur'>) {\n    const field = useFieldContext<number>({ disabled: isDisabled });\n\n    const SECONDS_PER_DAY = 86400; // 24 * 60 * 60\n\n    // Convert seconds to days for display\n    const daysValue = field.state.value != null ? field.state.value / SECONDS_PER_DAY : undefined;\n\n    // Convert days to seconds when value changes\n    const handleDaysChange = (days: number) => {\n        const seconds = days * SECONDS_PER_DAY;\n        field.handleChange(seconds);\n    };\n\n    return (\n        <DaysField\n            isInvalid={!!getFieldErrorMessage(field)}\n            isDisabled={isDisabled || field.isSubmitting}\n            value={daysValue}\n            id={field.name}\n            onChange={handleDaysChange}\n            onBlur={field.handleBlur}\n            errorMessage={getFieldErrorMessage(field)}\n            requiredIndicator={field.isRequired}\n            {...props}\n        />\n    );\n}\n"],"mappings":"ucAiBA,IAAM,EAAe,EAErB,SAAgB,EAAiB,CAAE,YAAW,GAAG,GAAyB,CACtE,OACI,EAAC,EAAD,CACI,UAAW,EAAmB,EAAW,GACrC,EACI,wIACA,CACJ,CACJ,EACA,GAAI,CACP,CAAA,CAET,CAEA,SAAS,EAAoB,CAAE,YAAW,GAAG,GAAsC,CAC/E,OACI,EAAC,MAAD,CAAK,UAAW,EAAW,iDAAkD,CAAS,EAAG,GAAI,EAA7F,SAAA,CACI,EAAC,EAAD,CAAoB,KAAK,YACrB,SAAA,EAAC,EAAD,CAAM,cAAA,GAAY,UAAU,WAAa,CAAA,CACzB,CAAA,EACpB,EAAC,MAAD,CAAK,UAAU,UAAY,CAAA,EAC3B,EAAC,EAAD,CAAoB,KAAK,YACrB,SAAA,EAAC,EAAD,CAAQ,cAAA,GAAY,UAAU,WAAa,CAAA,CAC3B,CAAA,CACnB,GAEb,CAEA,SAAS,EAAmB,CAAE,YAAW,GAAG,GAA0B,CAClE,OACI,EAAC,EAAD,CACI,UAAW,EAAmB,EAAW,GACrC,EAAW,+CAAgD,CAAS,CACxE,EACA,QAAS,QACT,KAAM,OACN,GAAI,CACP,CAAA,CAET,CAGA,SAAgB,EAAY,CACxB,QACA,cACA,eACA,oBACA,YACA,GAAG,GACc,CACjB,OACI,EAAC,EAAD,CACI,UAAW,EAAmB,EAAW,GAAa,EAAW,mBAAoB,CAAS,CAAC,EAC/F,GAAI,EAEJ,SAAA,EAAC,EAAD,CAAiB,QAAO,cAAa,eAAc,oBAC/C,SAAA,EAAC,EAAD,CAAA,SAAA,CACI,EAAC,EAAD,CAAkB,UAAW,UAAa,CAAA,EAC1C,EAAC,EAAD,CAAsB,CAAA,CACd,CAAA,CAAA,CACL,CAAA,CACD,CAAA,CAEtB,CAEA,SAAgB,EAAc,CAC1B,aACA,GAAG,GACoF,CACvF,IAAM,EAAQ,EAAwB,CAAE,SAAU,CAAW,CAAC,EAE9D,OACI,EAAC,EAAD,CACI,UAAW,CAAC,CAAC,EAAqB,CAAK,EACvC,WAAY,GAAc,EAAM,aAChC,MAAO,EAAM,MAAM,MACnB,GAAI,EAAM,KACV,SAAU,EAAM,aAChB,OAAQ,EAAM,WACd,aAAc,EAAqB,CAAK,EACxC,kBAAmB,EAAM,WACzB,GAAI,CACP,CAAA,CAET,CAEA,SAAgB,EAAU,CACtB,QACA,cACA,eACA,oBACA,YACA,GAAG,GACc,CACjB,OACI,EAAC,EAAD,CACI,UAAW,EAAmB,EAAW,GAAa,EAAW,mBAAoB,CAAS,CAAC,EAC/F,GAAI,EAEJ,SAAA,EAAC,EAAD,CAAiB,QAAO,cAAa,eAAc,oBAC/C,SAAA,EAAC,EAAD,CAAA,SAAA,CACI,EAAC,EAAD,CAAkB,UAAW,UAAa,CAAA,EAC1C,EAAC,MAAD,CAAK,UAAU,qDAAqD,SAAA,MAAS,CAAA,CACrE,CAAA,CAAA,CACL,CAAA,CACD,CAAA,CAEtB,CAEA,SAAgB,EAAY,CACxB,aACA,GAAG,GACkF,CACrF,IAAM,EAAQ,EAAwB,CAAE,SAAU,CAAW,CAAC,EAExD,EAAkB,MAGlB,EAAY,EAAM,MAAM,OAAS,KAA6C,IAAA,GAAtC,EAAM,MAAM,MAAQ,EAQlE,OACI,EAAC,EAAD,CACI,UAAW,CAAC,CAAC,EAAqB,CAAK,EACvC,WAAY,GAAc,EAAM,aAChC,MAAO,EACP,GAAI,EAAM,KACV,SAXkB,GAAiB,CACvC,IAAM,EAAU,EAAO,EACvB,EAAM,aAAa,CAAO,CAC9B,EASQ,OAAQ,EAAM,WACd,aAAc,EAAqB,CAAK,EACxC,kBAAmB,EAAM,WACzB,GAAI,CACP,CAAA,CAET"}
+{"version":3,"file":"numberfield.js","names":[],"sources":["../../lib/components/numberfield.tsx"],"sourcesContent":["'use client';\nimport {\n    ButtonProps as AriaButtonProps,\n    Input as AriaInput,\n    InputProps as AriaInputProps,\n    NumberField as AriaNumberField,\n    NumberFieldProps as AriaNumberFieldProps,\n    composeRenderProps,\n} from 'react-aria-components';\n\nimport { Button } from '../components/button';\nimport { getFieldErrorMessage } from '../utilities/form';\nimport { useFieldContext } from '../utilities/form-context';\nimport { classNames } from '../utilities/theme';\nimport { FieldGroup, FormField, type FormFieldProps } from './form';\nimport { IcDown, IcUp } from './icons';\n\nconst ANumberField = AriaNumberField;\n\nexport function NumberFieldInput({ className, ...props }: AriaInputProps) {\n    return (\n        <AriaInput\n            className={composeRenderProps(className, className =>\n                classNames(\n                    'w-fit min-w-0 flex-1 border-r border-transparent outline-0 placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden',\n                    className\n                )\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction NumberFieldSteppers({ className, ...props }: React.ComponentProps<'div'>) {\n    return (\n        <div className={classNames('absolute right-0 flex h-full flex-col border-l', className)} {...props}>\n            <NumberFieldStepper slot=\"increment\">\n                <IcUp aria-hidden className=\"size-icon\" />\n            </NumberFieldStepper>\n            <div className=\"border-b\" />\n            <NumberFieldStepper slot=\"decrement\">\n                <IcDown aria-hidden className=\"size-icon\" />\n            </NumberFieldStepper>\n        </div>\n    );\n}\n\nfunction NumberFieldStepper({ className, ...props }: AriaButtonProps) {\n    return (\n        <Button\n            className={composeRenderProps(className, className =>\n                classNames('w-auto grow h-3 px-0.5 text-muted-foreground', className)\n            )}\n            variant={'ghost'}\n            size={'none'}\n            {...props}\n        />\n    );\n}\n\nexport type NumberFieldProps = AriaNumberFieldProps & FormFieldProps & { inputClassName?: string };\nexport function NumberField({\n    label,\n    description,\n    errorMessage,\n    requiredIndicator,\n    className,\n    inputClassName,\n    ...props\n}: NumberFieldProps) {\n    return (\n        <ANumberField\n            className={composeRenderProps(className, className => classNames('group form-field', className))}\n            {...props}\n        >\n            <FormField {...{ label, description, errorMessage, requiredIndicator }}>\n                <FieldGroup className={inputClassName}>\n                    <NumberFieldInput className={'pr-input'} />\n                    <NumberFieldSteppers />\n                </FieldGroup>\n            </FormField>\n        </ANumberField>\n    );\n}\n\nexport function TfNumberField({\n    isDisabled,\n    ...props\n}: Omit<React.ComponentProps<typeof NumberField>, 'value' | 'id' | 'onChange' | 'onBlur'>) {\n    const field = useFieldContext<number>({ disabled: isDisabled });\n\n    return (\n        <NumberField\n            isInvalid={!!getFieldErrorMessage(field)}\n            isDisabled={isDisabled || field.isSubmitting}\n            value={field.state.value}\n            id={field.name}\n            onChange={field.handleChange}\n            onBlur={field.handleBlur}\n            errorMessage={getFieldErrorMessage(field)}\n            requiredIndicator={field.isRequired}\n            {...props}\n        />\n    );\n}\n\nexport function DaysField({\n    label,\n    description,\n    errorMessage,\n    requiredIndicator,\n    className,\n    ...props\n}: NumberFieldProps) {\n    return (\n        <ANumberField\n            className={composeRenderProps(className, className => classNames('group form-field', className))}\n            {...props}\n        >\n            <FormField {...{ label, description, errorMessage, requiredIndicator }}>\n                <FieldGroup>\n                    <NumberFieldInput className={'pr-input'} />\n                    <div className=\"absolute right-3 opacity-80 select-none text-muted\">days</div>\n                </FieldGroup>\n            </FormField>\n        </ANumberField>\n    );\n}\n\nexport function TfDaysField({\n    isDisabled,\n    ...props\n}: Omit<React.ComponentProps<typeof DaysField>, 'value' | 'id' | 'onChange' | 'onBlur'>) {\n    const field = useFieldContext<number>({ disabled: isDisabled });\n\n    const SECONDS_PER_DAY = 86400; // 24 * 60 * 60\n\n    // Convert seconds to days for display\n    const daysValue = field.state.value != null ? field.state.value / SECONDS_PER_DAY : undefined;\n\n    // Convert days to seconds when value changes\n    const handleDaysChange = (days: number) => {\n        const seconds = days * SECONDS_PER_DAY;\n        field.handleChange(seconds);\n    };\n\n    return (\n        <DaysField\n            isInvalid={!!getFieldErrorMessage(field)}\n            isDisabled={isDisabled || field.isSubmitting}\n            value={daysValue}\n            id={field.name}\n            onChange={handleDaysChange}\n            onBlur={field.handleBlur}\n            errorMessage={getFieldErrorMessage(field)}\n            requiredIndicator={field.isRequired}\n            {...props}\n        />\n    );\n}\n"],"mappings":"ucAiBA,IAAM,EAAe,EAErB,SAAgB,EAAiB,CAAE,YAAW,GAAG,GAAyB,CACtE,OACI,EAAC,EAAD,CACI,UAAW,EAAmB,EAAW,GACrC,EACI,wIACA,CACJ,CACJ,EACA,GAAI,CACP,CAAA,CAET,CAEA,SAAS,EAAoB,CAAE,YAAW,GAAG,GAAsC,CAC/E,OACI,EAAC,MAAD,CAAK,UAAW,EAAW,iDAAkD,CAAS,EAAG,GAAI,EAA7F,SAAA,CACI,EAAC,EAAD,CAAoB,KAAK,YACrB,SAAA,EAAC,EAAD,CAAM,cAAA,GAAY,UAAU,WAAa,CAAA,CACzB,CAAA,EACpB,EAAC,MAAD,CAAK,UAAU,UAAY,CAAA,EAC3B,EAAC,EAAD,CAAoB,KAAK,YACrB,SAAA,EAAC,EAAD,CAAQ,cAAA,GAAY,UAAU,WAAa,CAAA,CAC3B,CAAA,CACnB,GAEb,CAEA,SAAS,EAAmB,CAAE,YAAW,GAAG,GAA0B,CAClE,OACI,EAAC,EAAD,CACI,UAAW,EAAmB,EAAW,GACrC,EAAW,+CAAgD,CAAS,CACxE,EACA,QAAS,QACT,KAAM,OACN,GAAI,CACP,CAAA,CAET,CAGA,SAAgB,EAAY,CACxB,QACA,cACA,eACA,oBACA,YACA,iBACA,GAAG,GACc,CACjB,OACI,EAAC,EAAD,CACI,UAAW,EAAmB,EAAW,GAAa,EAAW,mBAAoB,CAAS,CAAC,EAC/F,GAAI,EAEJ,SAAA,EAAC,EAAD,CAAiB,QAAO,cAAa,eAAc,oBAC/C,SAAA,EAAC,EAAD,CAAY,UAAW,EAAvB,SAAA,CACI,EAAC,EAAD,CAAkB,UAAW,UAAa,CAAA,EAC1C,EAAC,EAAD,CAAsB,CAAA,CACd,GACL,CAAA,CACD,CAAA,CAEtB,CAEA,SAAgB,EAAc,CAC1B,aACA,GAAG,GACoF,CACvF,IAAM,EAAQ,EAAwB,CAAE,SAAU,CAAW,CAAC,EAE9D,OACI,EAAC,EAAD,CACI,UAAW,CAAC,CAAC,EAAqB,CAAK,EACvC,WAAY,GAAc,EAAM,aAChC,MAAO,EAAM,MAAM,MACnB,GAAI,EAAM,KACV,SAAU,EAAM,aAChB,OAAQ,EAAM,WACd,aAAc,EAAqB,CAAK,EACxC,kBAAmB,EAAM,WACzB,GAAI,CACP,CAAA,CAET,CAEA,SAAgB,EAAU,CACtB,QACA,cACA,eACA,oBACA,YACA,GAAG,GACc,CACjB,OACI,EAAC,EAAD,CACI,UAAW,EAAmB,EAAW,GAAa,EAAW,mBAAoB,CAAS,CAAC,EAC/F,GAAI,EAEJ,SAAA,EAAC,EAAD,CAAiB,QAAO,cAAa,eAAc,oBAC/C,SAAA,EAAC,EAAD,CAAA,SAAA,CACI,EAAC,EAAD,CAAkB,UAAW,UAAa,CAAA,EAC1C,EAAC,MAAD,CAAK,UAAU,qDAAqD,SAAA,MAAS,CAAA,CACrE,CAAA,CAAA,CACL,CAAA,CACD,CAAA,CAEtB,CAEA,SAAgB,EAAY,CACxB,aACA,GAAG,GACkF,CACrF,IAAM,EAAQ,EAAwB,CAAE,SAAU,CAAW,CAAC,EAExD,EAAkB,MAGlB,EAAY,EAAM,MAAM,OAAS,KAA6C,IAAA,GAAtC,EAAM,MAAM,MAAQ,EAQlE,OACI,EAAC,EAAD,CACI,UAAW,CAAC,CAAC,EAAqB,CAAK,EACvC,WAAY,GAAc,EAAM,aAChC,MAAO,EACP,GAAI,EAAM,KACV,SAXkB,GAAiB,CACvC,IAAM,EAAU,EAAO,EACvB,EAAM,aAAa,CAAO,CAC9B,EASQ,OAAQ,EAAM,WACd,aAAc,EAAqB,CAAK,EACxC,kBAAmB,EAAM,WACzB,GAAI,CACP,CAAA,CAET"}

package/dist/data-table-filter.js

@@ -1,2 +1,2 @@
-"use client";import{formatDate as e}from"./utilities/date.js";import{Duration as t}from"./utilities/duration.js";import{formatDays as n,formatFilesize as r,formatNumber as i}from"./utilities/numbers.js";import{pluralizeTimes as a}from"./utilities/string.js";import{classNames as o}from"./utilities/theme.js";import{ALL_OS as s,useProjectName as c,useResourceFormatter as l}from"./utilities/resources.js";import{Dt as u,F as d,G as f,K as p,L as m,Lt as h,N as g,Rt as _,U as ee,Y as v,_ as y,c as b,ct as x,d as te,jt as ne,l as S,n as re,ot as C,q as w,rt as T,z as ie,zt as ae}from"./icons.js";import{ALL_LICENSE_TYPES as oe,getSubscriptionStartTriggerLabel as E}from"./components/select-options.js";import{CountryName as D}from"./utilities/countries.js";import{useCtxClient as se}from"./utilities/ctx-client.js";import{Loader as O}from"./components/loader.js";import{Button as k}from"./components/button.js";import{Checkbox as ce}from"./components/checkbox.js";import{Popover as le,PopoverTrigger as ue}from"./components/popover.js";import{SelectTrigger as de}from"./components/select.js";import{EasyMenu as A,Menu as j,MenuHeader as M,MenuItem as N,MenuPopover as P,MenuTrigger as F}from"./components/menu.js";import{MultiSelect as I}from"./components/multi-select.js";import{NumberField as L}from"./components/numberfield.js";import{TextField as fe}from"./components/textfield.js";import{DatePicker as R}from"./components/date-picker.js";import{useIsMobile as z}from"./utilities/use-mobile.js";import{Badge as B}from"./components/badge.js";import{Tag as V,TagGroup as H}from"./components/tag-group.js";import{SearchField as pe}from"./components/searchfield.js";import{Table as me,TableBody as he,TableCell as ge,TableHead as _e,TableHeader as ve,TableRow as ye}from"./components/table.js";import{Tooltip as be,TooltipTrigger as xe}from"./components/tooltip.js";import{ControlledDialogProvider as Se,DialogBody as Ce,DialogFooter as we,DialogHeader as Te,DialogTitle as Ee,useControlledDialog as U}from"./components/dialog.js";import{ProgressBar as De}from"./components/progress-bar.js";import{MultipleIdSearchInput as Oe}from"./components/id-search.js";import{merge as ke}from"lodash-es";import{Fragment as Ae,createContext as je,useContext as Me,useEffect as W,useMemo as G,useRef as Ne,useState as K}from"react";import{Fragment as q,jsx as J,jsxs as Y}from"react/jsx-runtime";import{Pressable as Pe}from"react-aria-components";import{getLocalTimeZone as Fe,parseAbsolute as X}from"@internationalized/date";import{DndContext as Ie,DragOverlay as Le,KeyboardSensor as Re,PointerSensor as ze,closestCenter as Be,useSensor as Ve,useSensors as He}from"@dnd-kit/core";import{SortableContext as Ue,arrayMove as We,sortableKeyboardCoordinates as Ge,useSortable as Ke,verticalListSortingStrategy as qe}from"@dnd-kit/sortable";import{CSS as Je}from"@dnd-kit/utilities";import{useInfiniteQuery as Ye,useQuery as Xe}from"@tanstack/react-query";import{createColumnHelper as Ze,flexRender as Qe,getCoreRowModel as $e,useReactTable as et}from"@tanstack/react-table";import{useLocalStorage as tt}from"@uidotdev/usehooks";function nt(e){return e?e.desc?`-${e.id}`:`+${e.id}`:`-createdAt`}var rt=Ze(),it=[rt.accessor(`checkbox`,{header:({table:e})=>J(ce,{isIndeterminate:e.getIsSomeRowsSelected()&&!e.getIsAllPageRowsSelected(),isSelected:e.getIsAllPageRowsSelected()||e.getIsSomePageRowsSelected(),onChange:()=>e.toggleAllPageRowsSelected(),"aria-label":`Select all`,size:`sm`}),cell:({row:e})=>J(ce,{isSelected:e.getIsSelected(),onChange:()=>e.toggleSelected(),"aria-label":`Select row`,size:`sm`}),enableSorting:!1,enableHiding:!1})],Z=`TableActions`;function at(e){return e.length===0?[]:[rt.accessor(Z,{header:`Actions`,id:Z,enableHiding:!1,cell:({row:t})=>J(Dt,{label:J(x,{className:`text-icon-primary`}),data:t.original,items:e}),enableSorting:!1})]}function ot(){return Ze()}function st({path:e,resourceName:t,pathParameters:n,queryParameters:r,columns:i,filterConfig:a,columnsToHideByDefault:o={},allowSelection:s=!1,allowToolbar:c=!0,initialFilters:l=[],previewFilters:u,tableActions:d,Card:f,onRowNavigate:p,disableTableView:m,hideViewToggle:h,include:g}){let[_,ee]=K({pagination:{pageIndex:0,pageSize:20},sorting:[]}),{sorting:v,pagination:y}=_,[b,x]=K(``),[te,ne]=K({}),[S,re]=K(l),C=G(()=>S.filter(e=>e.active!==!1).map(e=>{if(e.type===`derived-select`){let t=a[e.property];return t?.type===`derived-select`?t.toApiQuery(String(e.value??``)):{}}let t=e.value instanceof Set?Array.from(e.value):e.value;return e.needOperator===!1?{[e.property]:Array.isArray(t)?t.join(`,`):t}:e.operator===`between`&&Array.isArray(t)&&t.length===2?{[e.property]:{gte:t[0],lte:t[1]}}:Array.isArray(t)?{[e.property]:{[e.operator]:t.join(`,`)}}:{[e.property]:{[e.operator]:t}}}).reduce((e,t)=>ke(e,t),{}),[S,a]),w=g?.length?g.join(`,`):void 0,T={...r,...C,limit:y.pageSize,sort:nt(v[0]),search:b,...w?{include:w}:{}},ie=se(),ae=[`get`,e,{...T,page:y.pageIndex+1},`table`],oe=[`get`,e,T,`card`],E=`${e}_ctx`,[D,O]=tt(`${E}_column_order_preference`,[]),[k,ce]=tt(`${E}_column_visibility_preference`,{id:!1,...o}),[le,ue]=tt(`${E}_view_mode_preference`,m?`card`:`table`),de=z(),A=m||de&&f?`card`:le,j=e=>{ee(t=>({...t,...e}))};async function M(t){let i=await ie.GET(e,{params:{query:{...r,page:t,limit:y.pageSize,sort:T.sort,search:T.search,...w?{include:w}:{},...C},path:n}});return{data:i.data??[],total:Number.parseInt(i.response.headers.get(`Pagination-Count`)||`0`),nextPage:t+1}}let N=Xe({queryKey:ae,enabled:A===`table`,queryFn:()=>M(y.pageIndex+1),placeholderData:e=>e}),P=Ye({queryKey:oe,enabled:A===`card`,initialPageParam:1,queryFn:({pageParam:e})=>M(e),getNextPageParam:(e,t)=>t.flatMap(e=>e.data).length<e.total?e.nextPage:void 0}),F=G(()=>A===`table`?N.data?.data??[]:P.data?.pages.flatMap(e=>e.data)??[],[A,N.data,P.data]),I=G(()=>A===`table`?N.data?.total??0:P.data?.pages[0]?.total??0,[A,N.data,P.data]),L=A===`table`?N:{...P,data:{data:F,total:I},isLoading:P.isLoading,isFetching:P.isFetching,isError:P.isError,error:P.error,refetch:P.refetch},fe=d.filter(wt),R=[...s?it:[],...i,...at(fe??[])];function B(e){return typeof e==`function`}function V(e,t){return B(e)?e(t):e}let H=et({data:F,columns:R,getCoreRowModel:$e(),rowCount:I,manualPagination:!0,onPaginationChange:e=>{j({pagination:V(e,y)})},manualSorting:!0,onSortingChange:e=>{ne({}),j({sorting:[...V(e,v)]})},manualFiltering:!0,onColumnVisibilityChange:e=>{ce(V(e,k))},onRowSelectionChange:e=>{ne(V(e,te))},onColumnOrderChange:e=>{O(V(e,D))},state:{sorting:v,columnVisibility:k,pagination:y,rowSelection:te,columnOrder:D},meta:{refetch:L.refetch}});return W(()=>{let e=H.getAllFlatColumns().map(e=>e.id),t=e.filter(e=>e!==`checkbox`&&e!==Z);O(n=>{let r=n.filter(e=>t.includes(e)),i=t.filter(e=>!n.includes(e)),a=r.length>0?[...r,...i]:t;return[...e.includes(`checkbox`)?[`checkbox`]:[],...a,...e.includes(Z)?[Z]:[]]})},[]),{tableState:_,updateTableState:j,query:L,setSearchQuery:x,searchQuery:b,tanTable:H,mergedFilters:C,filters:S,setFilters:re,filterConfig:a,tableActions:d,pathParameters:n,queryParameters:r,viewMode:A,setViewMode:ue,Card:f,allowSelection:s,allowToolbar:c,previewFilters:u,infiniteQuery:P,disableTableView:m,hideViewToggle:h,onRowNavigate:p,resourceName:t}}var ct=je(null);function Q(){let e=Me(ct);if(!e)throw Error(`DataTable should be used within DataTableProvider.`);return e}function lt({children:e,...t}){return J(ct.Provider,{value:t,children:e})}function ut(){let{query:e,resourceName:t,mergedFilters:n,searchQuery:r}=Q(),i=l();if(e.isFetching)return null;if(e.isError)return Y(`span`,{className:`flex gap-3 items-center`,children:[J(ee,{className:`text-icon-primary`}),J(`span`,{children:e.error?.message})]});if(e.data?.data?.length===0){let e=t&&a(i(t),2).toLowerCase(),o=Object.keys(n).length>0||r.length>0;return Y(`div`,{className:`text-center flex flex-col gap-2`,children:[J(`p`,{className:`font-semibold text-text-primary`,children:e?`No ${e} found.`:`No results found.`}),o&&J(`p`,{className:`text-text-secondary`,children:`Adjust your filter or search request.`})]})}return J(q,{children:`Unknown error. Please contact customer support.`})}function dt({cardGridClassName:e}){let{query:t,tanTable:n,viewMode:r,tableActions:i,Card:a}=Q(),o=i.filter(wt),s=r===`card`&&!!a;return t.isLoading?J(`div`,{className:`body-sm flex items-center justify-center min-h-32`,children:J(O,{})}):n.getRowModel().rows.length===0?J(`div`,{className:`body-sm flex items-center justify-center min-h-32 text-muted`,children:J(ut,{})}):s?J(pt,{Card:a,actions:o,className:e}):J(St,{className:`w-full`})}function ft({className:e,cardGridClassName:t,...n}){let{viewMode:r,Card:i,allowToolbar:a}=Q(),s=r===`card`&&!!i;return J(q,{children:Y(Se,{children:[a&&J(_t,{}),Y(`section`,{...n,className:o(`z-20 flex flex-col`,s?``:`border rounded-lg`,e),children:[J(`div`,{className:`w-full overflow-auto relative rounded-t-lg [scrollbar-width:none]`,tabIndex:0,children:J(dt,{cardGridClassName:t})}),!s&&Y(`div`,{className:`flex w-full justify-between border-t gap-icon py-2 px-icon bg-surface-secondary rounded-b-lg overflow-x-auto`,children:[Y(`div`,{className:`flex gap-icon`,children:[J(mt,{}),J(gt,{})]}),J(ht,{})]})]})]})})}function pt({Card:e,actions:t,className:n,...r}){let{tanTable:i,allowSelection:a}=Q(),{infiniteQuery:s}=Q(),c=Ne(null);return W(()=>{let e=c.current;if(!e)return;let t=new IntersectionObserver(e=>{e[0].isIntersecting&&s.hasNextPage&&!s.isFetchingNextPage&&s.fetchNextPage()},{threshold:.1});return t.observe(e),()=>t.disconnect()},[s.hasNextPage,s.isFetchingNextPage]),Y(`div`,{...r,className:o(n,`grid grid-cols-1 lg:grid-cols-2 gap-icon pb-input`),children:[i.getRowModel().rows.map((n,r)=>{let i={isSelected:n.getIsSelected(),onToggle:()=>n.toggleSelected(),allowSelection:a};return J(Ae,{children:e(n.original,t,i,r)},n.id)}),J(`div`,{ref:c,className:`col-span-full h-4 flex items-center justify-center`,children:s.isFetchingNextPage&&J(O,{})})]})}function mt(){if(c()===`customer-portal`)return null;let{tanTable:e}=Q(),[t,n]=K(null),r=l(),i=He(Ve(ze),Ve(Re,{coordinateGetter:Ge}));return J(Ie,{sensors:i,collisionDetection:Be,onDragStart:e=>{let{active:t}=e;n(t.id.toString())},onDragEnd:t=>{let{active:r,over:i}=t;if(i&&r.id!==i.id){let t=e.getState().columnOrder,n=t.indexOf(r.id.toString()),a=t.indexOf(i.id.toString());e.setColumnOrder([...We(t,n,a)])}n(null)},children:Y(Ue,{items:e.getState().columnOrder,strategy:qe,children:[Y(A,{label:Y(q,{children:[J(te,{className:`inline align-bottom me-1 text-icon-primary`}),`Columns`]}),selectionMode:`multiple`,size:`sm`,items:e.getAllFlatColumns(),selectedKeys:e.getVisibleFlatColumns().map(e=>e.id),children:[J(N,{onAction:()=>e.toggleAllColumnsVisible(),className:`italic`,children:`(select all)`}),e.getState().columnOrder.map(t=>{let n=e.getAllFlatColumns().find(e=>e.id===t);return!n||n.id===`checkbox`||n.id===Z?null:J(a,{column:n},n.id)})]}),J(Le,{children:t?J(`div`,{className:`opacity-70 border-2 border-primary`,children:r(t)}):null})]})});function a({column:e}){let{attributes:t,listeners:n,setNodeRef:r,transform:i,transition:a}=Ke({id:e.id}),o={transform:Je.Transform.toString(i),transition:a,zIndex:`999`};return Y(N,{ref:r,style:o,...t,id:e.id,onAction:()=>e.toggleVisibility(),isDisabled:!e.getCanHide(),className:`flex items-center`,children:[J(ie,{...n,className:`size-icon cursor-grab text-icon-primary`}),yt(e),e.getIsSorted()&&J(vt,{className:`size-icon`,direction:e.getIsSorted()})]})}}function ht(){let{tanTable:e}=Q(),t=e.getRowCount();return Y(`div`,{className:`flex items-center gap-2`,children:[J(`span`,{className:`whitespace-nowrap body-sm text-muted`,children:`${e.getState().pagination.pageIndex*e.getState().pagination.pageSize+1} - ${Math.min((e.getState().pagination.pageIndex+1)*e.getState().pagination.pageSize,t)} of ${t?.toLocaleString()}`}),(e.getCanNextPage()||e.getCanPreviousPage())&&Y(q,{children:[J(k,{"aria-label":`First page`,onPress:()=>e.firstPage(),isDisabled:!e.getCanPreviousPage(),variant:`neutral`,size:`icon-sm`,children:J(m,{})}),J(k,{"aria-label":`Previous page`,onPress:()=>e.previousPage(),isDisabled:!e.getCanPreviousPage(),variant:`neutral`,size:`icon-sm`,children:J(w,{})}),J(k,{"aria-label":`Next page`,onPress:()=>e.nextPage(),isDisabled:!e.getCanNextPage(),variant:`neutral`,size:`icon-sm`,children:J(ne,{})}),J(k,{"aria-label":`Last page`,onClick:()=>e.lastPage(),isDisabled:!e.getCanNextPage(),variant:`neutral`,size:`icon-sm`,children:J(f,{})})]})]})}function gt(){if(c()===`customer-portal`)return null;let{tanTable:e}=Q();return J(A,{label:e.getState().pagination.pageSize.toString(),selectionMode:`single`,size:`sm`,selectedKeys:[e.getState().pagination.pageSize.toString()],items:[10,20,30,40,50].map(e=>({id:e.toString(),value:e})),children:t=>J(N,{onAction:()=>e.setPageSize(t.value),children:t.value})})}function _t(){let{query:e,tanTable:t,searchQuery:n,setSearchQuery:r,tableActions:i,viewMode:a,setViewMode:s,Card:c,previewFilters:l,disableTableView:d,hideViewToggle:f}=Q(),m=t.getSelectedRowModel().rows.length>0,h=z(),g=i.filter(e=>e.resourceType!==`single`).filter(e=>e.resourceType===`multiple`===m);return Y(`section`,{className:`flex justify-between my-0 mb-icon gap-icon overflow-x-auto py-1`,children:[Y(`div`,{className:o(`flex gap-icon max-md:min-w-0 max-md:flex-1`),children:[J(k,{"aria-label":`Refresh`,isPending:e.isFetching,onClick:()=>e.refetch(),variant:`neutral`,size:`icon`,className:o(`max-md:shrink-0`),children:J(u,{})}),J(pe,{value:n,onChange:r,className:o(`max-md:min-w-0 max-md:flex-1`)}),J(zt,{previewFilters:l,className:o(`max-md:shrink-0`)})]}),!h&&Y(`div`,{className:`flex gap-icon`,children:[J(Et,{items:g,isFetching:e.isFetching}),c&&!d&&!f&&Y(`div`,{className:`flex gap-1 bg-surface-primary rounded-md overflow-hidden`,children:[J(k,{variant:a===`table`?`primary`:`neutral`,size:`icon`,onPress:()=>s(`table`),"aria-label":`Table view`,className:`border-none`,children:J(T,{})}),J(k,{variant:a===`card`?`primary`:`neutral`,size:`icon`,onPress:()=>s(`card`),"aria-label":`Card view`,className:`border-none`,children:J(p,{})})]})]}),h&&g.length>0&&J(`div`,{className:`fixed inset-x-0 bottom-0 z-30 flex gap-icon border-t bg-surface-primary p-icon`,children:J(Et,{items:g,isFetching:e.isFetching,buttonClassName:`flex-1 justify-center`})})]})}function vt({direction:e,...t}){return J(e===`asc`?h:e===`desc`?_:ae,{className:`size-3.5`,...t})}function yt(e){let t=l(),n=e.columnDef.header;return typeof n==`string`?n:t(e.id)}function bt(a){let o=a.column.columnDef.meta?.displayType,c=a.getValue();if(c==null)return null;switch(o){case`date`:return J(`span`,{className:`tabular-nums`,children:e(c)});case`number`:return J(`span`,{className:`block text-right tabular-nums`,children:i(c)});case`boolean`:return J(B,{variant:c?`success`:`destructive`,className:`capitalize`,children:String(c)});case`badge`:return J(B,{children:String(c)});case`tags`:return J(H,{items:(Array.isArray(c)?c:[String(c)]).map(e=>({id:e,name:e})),className:`!flex-nowrap`,children:e=>J(V,{children:e.name})});case`progressBar`:let[a,o]=c;return J(De,{meterClassName:`w-16`,label:`${a}/${o}`,minValue:0,maxValue:o,value:a});case`country`:return J(D,{value:c});case`enum`:return J(`span`,{className:`uppercase w-full`,children:String(c)});case`fileSize`:return r(c);case`days`:return n(c);case`os`:return s[c]??c;case`licenseType`:return oe[c]??c;case`subscriptionInterval`:return t.formatISODuration(c);case`subscriptionStartTrigger`:return E(c);default:return String(c)}}function xt({header:e}){let t=e.column.columnDef.header;return typeof t==`string`||!t||typeof t==`function`&&typeof t(e.getContext())==`string`?yt(e.column):Qe(t,e.getContext())}function St({className:e}){let{tanTable:t,onRowNavigate:n}=Q(),r=(e,t,n=`z-50`)=>o(`text-left body-sm font-medium whitespace-nowrap`,e&&`sticky right-0 ${n} text-center justify-center`,t);return Y(me,{className:o(`table-auto border-0`,e),children:[J(ve,{className:`sticky top-0 z-10 rounded-lg border-stroke-secondary!`,children:t.getHeaderGroups().map(e=>J(ye,{className:`border-stroke-secondary!`,children:e.headers.map(e=>Y(_e,{scope:`col`,colSpan:e.colSpan,className:r(e.id===Z,`bg-surface-secondary`),children:[!e.column.getCanSort()&&!e.isPlaceholder&&J(`div`,{className:o(`w-full flex items-center gap-1 text-xs uppercase font-semibold text-text-secondary`,e.id===Z?`justify-center`:`justify-start`),children:J(xt,{header:e})}),e.column.getCanSort()&&Y(k,{variant:`ghost`,size:`none`,className:o(`w-full p-1 rounded-md uppercase text-text-secondary text-xs font-semibold`,e.id===Z?`justify-center`:`justify-start`,e.column.getIsSorted()?`text-primary`:``),onPress:e.column.getToggleSortingHandler(),children:[J(`span`,{children:J(xt,{header:e})}),e.column.getIsSorted()&&J(vt,{direction:e.column.getIsSorted()})]})]},e.id))},e.id))}),J(he,{children:t.getRowModel().rows.map(e=>J(ye,{className:o(`group border-stroke-secondary! bg-surface-primary hover:not-data-[selected=true]:bg-surface-secondary data-[selected=true]:bg-surface-tertiary`,n&&`cursor-pointer focus-visible:outline focus-visible:outline-ring`),"data-selected":e.getIsSelected(),...n&&{role:`link`,tabIndex:0,onClick:t=>{t.target.closest(`a, button, input, select, textarea, [role="button"]`)||n(e.original)},onKeyDown:t=>{t.key===`Enter`&&n(e.original)}},children:e.getVisibleCells().map(e=>{let t=e.column.id===Z,n=e.column.columnDef.meta?.displayType?bt(e):Qe(e.column.columnDef.cell,e.getContext());return J(ge,{className:o(r(t,t?`bg-surface-primary group-hover:not-group-data-[selected=true]:bg-surface-secondary group-data-[selected=true]:bg-surface-tertiary`:``,`z-1`),t&&`flex justify-center items-center`),children:n},e.id)})},e.id))})]})}function Ct(e){return e.resourceType===`none`}function wt(e){return e.resourceType===`single`}function Tt(e){return e.resourceType===`multiple`}function Et({items:e,isFetching:t,buttonClassName:n}){let{openDialog:r,closeDialog:i}=U(),{tanTable:a,mergedFilters:s}=Q();function c(e,t){return e.isDisabled?Ct(e)?e.isDisabled():Tt(e)?e.isDisabled(t):!1:!1}let l=a.getSelectedRowModel().rows.map(e=>e.original);return J(q,{children:e.map((e,a)=>{let u=e.icon,d=c(e,l)||t;return Y(k,{"aria-label":e.label,type:`button`,isDisabled:d,className:o(`animate-in fade-in slide-in-from-right-15 duration-300 transition-transform`,n),onPress:t=>{let n={event:t,openDialog:r,closeDialog:i,activeFilters:s};Ct(e)?e.onPress(n):Tt(e)&&e.onPress({...n,data:l})},variant:e.variant??`neutral`,children:[u&&J(u,{"aria-hidden":!0}),J(`span`,{children:e.label})]},`${e.label}-${a}`)})})}function Dt({label:e,items:t,data:n}){let{openDialog:r,closeDialog:i}=U(),{mergedFilters:a}=Q();return t.length<5?J(`div`,{className:`flex items-center`,children:t.map((e,t)=>{let o=e.icon,s=typeof e.label==`function`?e.label(n):e.label;return Y(xe,{children:[J(k,{"aria-label":typeof s==`string`?s:void 0,isDisabled:e.isDisabled?.(n)??!1,variant:`ghost`,size:`icon`,onPress:()=>{let t={openDialog:r,closeDialog:i};e.onPress({...t,data:n,activeFilters:a})},children:J(o,{className:`size-icon`})}),J(be,{children:s})]},`${t}-${typeof s==`string`?s:``}`)})}):J(A,{withChevron:!1,"aria-label":`Actions`,label:e,size:`icon`,children:t.map((e,t)=>{let o=e.icon,s=typeof e.label==`function`?e.label(n):e.label;return Y(N,{id:typeof s==`string`?s:void 0,isDisabled:e.isDisabled?.(n)??!1,onAction:()=>{let t={openDialog:r,closeDialog:i};wt(e)&&e.onPress({...t,data:n,activeFilters:a})},children:[J(o,{className:`size-icon`}),s]},`${t}-${typeof s==`string`?s:``}`)})})}var Ot=[`eq`,`ne`,`cn`,`nc`,`sw`,`ew`,`in`,`nin`,`gt`,`gte`,`lt`,`lte`,`between`],kt={eq:`equal to`,ne:`not equal to`,cn:`contains`,nc:`does not contain`,sw:`starts with`,ew:`ends with`,in:`includes`,nin:`does not include`,gt:`greater than`,gte:`greater than or equal to`,lt:`less than`,lte:`less than or equal to`,between:`between`},At={eq:`=`,ne:`≠`,cn:`contains`,nc:`!contains`,sw:`starts with`,ew:`ends with`,in:`in`,nin:`not in`,gt:`>`,gte:`≥`,lt:`<`,lte:`≤`,between:`↔`};function $(e,t){let n=t.type,r=`${e}-${Date.now()}`,i=n===`bool`||n===`derived-select`?!1:t.needOperator??!0,a=i?jt[n][0]:`eq`,o={id:r,property:e,operator:a,needOperator:i};switch(n){case`bool`:return{...o,type:n,value:!0};case`derived-select`:return{...o,type:n,value:t.options[0]?.id??``};case`string`:return{...o,type:n,value:``};case`date`:return{...o,type:n,value:a===`between`?[new Date().toISOString(),new Date().toISOString()]:new Date().toISOString()};case`id`:return{...o,type:n,value:``};case`id-search`:return{...o,type:n,value:[]};case`enum`:return{...o,type:n,value:new Set};case`number`:return{...o,type:n,value:0}}}var jt={bool:[`eq`],"derived-select":[`eq`],enum:[`in`,`nin`],id:[`in`,`nin`],"id-search":[`in`,`nin`],string:[`eq`,`ne`,`cn`,`nc`,`sw`,`ew`,`in`,`nin`],date:[`between`,`lt`,`gt`],number:[`eq`,`ne`,`gt`,`gte`,`lt`,`lte`]};function Mt(e,t){let n=t.value===void 0?e.value:t.value,r=t.operator??e.operator;if(e.type===`date`&&t.operator!==void 0){if(r===`between`&&!Array.isArray(n)){let e=typeof n==`string`?n:new Date().toISOString();n=[e,e]}else r!==`between`&&Array.isArray(n)&&(n=n[0]??new Date().toISOString())}return n}function Nt(){let{setFilters:e,filterConfig:t}=Q();return{updateFilter:(n,r)=>{e(e=>{let i=e.find(e=>e.property===n)??$(n,t[n]),a={...i,...r,value:Mt(i,r),active:!0};return e.some(e=>e.id===i.id)?e.map(e=>e.id===i.id?a:e):[...e,a]})},removeFilter:n=>{e(e=>{let r=e.find(e=>e.id===n);return r?r.isPreview?e.map(e=>e.id===n?{...$(e.property,t[e.property]),active:!1,isPreview:!0}:e):e.filter(e=>e.id!==n):e})},clearAllFilters:()=>{e(e=>e.filter(e=>e.isPreview).map(e=>({...$(e.property,t[e.property]),active:!1,isPreview:!0})))}}}function Pt(t,n){switch(t.type){case`string`:case`id`:return t.value??``;case`number`:return t.value?.toString()??``;case`bool`:return t.value?`true`:`false`;case`derived-select`:{let e=n[t.property];if(!e||e.type!==`derived-select`)return t.value??``;let r=e.options.find(e=>e.id===t.value);return typeof r?.label==`string`?r.label:t.value??``}case`date`:if(Array.isArray(t.value)){let[n,r]=t.value;return`${e(n,{dateStyle:`short`})??``} – ${e(r,{dateStyle:`short`})??``}`}return t.value?e(t.value,{dateStyle:`short`})??``:``;case`enum`:return t.value&&t.value.size>0?`${t.value.size} selected`:``;case`id-search`:return t.value&&t.value.length>0?t.value.length===1?`1 item`:`${t.value.length} items`:``}}function Ft({filter:e,filterConfig:t,onChange:n}){if(e.type===`string`||e.type===`id`)return J(fe,{autoFocus:!0,value:e.value??``,onChange:n,"aria-label":`Filter value`});if(e.type===`number`)return J(L,{autoFocus:!0,value:e.value,onChange:n,"aria-label":`Filter value`});if(e.type===`date`){if(e.operator===`between`){let[t,r]=Array.isArray(e.value)?e.value:[new Date().toISOString(),new Date().toISOString()],i=X(t,Fe()),a=X(r,Fe());return Y(`div`,{className:`flex flex-col gap-icon`,children:[J(R,{autoFocus:!0,hideTimeZone:!0,label:`From`,value:i,onChange:e=>n([e?e.toAbsoluteString():t,r])}),J(R,{hideTimeZone:!0,label:`To`,value:a,onChange:e=>n([t,e?e.toAbsoluteString():r])})]})}let t=e.value&&!Array.isArray(e.value)?X(e.value,Fe()):null;return J(R,{autoFocus:!0,hideTimeZone:!0,value:t,onChange:e=>n(e?e.toAbsoluteString():new Date().toISOString()),"aria-label":`Filter date`})}if(e.type===`enum`){let r=t[e.property];return r.type===`enum`?J(I,{autoFocus:!0,items:r.options,value:e.value??new Set,onChange:n,"aria-label":`Filter value`}):null}if(e.type===`id-search`){let r=t[e.property];if(r.type!==`id-search`)return null;let i=r.defaultParams;return J(Oe,{autoFocus:!0,path:r.path,accessor:r.accessor,defaultParams:i,value:e.value??[],onChange:n,"aria-label":`Filter value`})}return null}function It({filter:e,filterConfig:t,resourceFormatter:n,onRemove:r,onUpdate:i,isOpen:a,onOpenChange:o}){let s=e.needOperator===!1?[`eq`]:jt[e.type],l=Pt(e,t),u=c(),f=z(),p=e.type===`bool`||e.type===`derived-select`,m=f?Y(`div`,{className:`flex flex-col gap-1`,children:[J(`span`,{className:`body-sm text-muted`,children:n(e.property)}),J(de,{type:`button`,className:`w-full`,"aria-label":n(e.property),children:l})]}):Y(k,{type:`button`,variant:e.active===!1?`neutral`:`primary_neutral`,className:`animate-in slide-in-from-left-10 fade-in flex justify-between gap-2`,children:[J(d,{}),p?J(`span`,{className:`font-medium`,children:l}):Y(q,{children:[J(`span`,{className:`font-medium`,children:n(e.property)}),u!==`customer-portal`&&J(`span`,{children:At[e.operator]}),u!==`customer-portal`&&l&&J(`span`,{children:l})]}),e.active!==!1&&J(Pe,{onPress:()=>r(),children:J(`span`,{className:`bg-primary hover:bg-destructive rounded-full size-icon flex justify-center items-center`,children:J(S,{className:`size-2.5 text-surface-primary`})})})]});if(p){let r,s;if(e.type===`bool`)r=[{id:`true`,label:`True`},{id:`false`,label:`False`}],s=e.value?`true`:`false`;else{let n=t[e.property];r=n?.type===`derived-select`?n.options:[],s=e.value??``}return Y(F,{isOpen:a,onOpenChange:o,children:[J(`div`,{className:`relative`,children:m}),Y(P,{className:`min-w-48`,children:[J(M,{inset:!0,separator:!1,children:n(e.property)}),J(j,{selectionMode:`single`,disallowEmptySelection:!0,selectedKeys:new Set([s]),onSelectionChange:t=>{if(t===`all`)return;let n=t.values().next().value;n!=null&&i({value:e.type===`bool`?String(n)===`true`:String(n)})},"aria-label":`Filter value`,children:r.map(e=>J(N,{id:e.id,children:e.label},e.id))})]})]})}return Y(ue,{isOpen:a,onOpenChange:o,children:[J(`div`,{className:`relative`,children:m}),J(le,{className:`p-icon min-w-48`,children:Y(`div`,{className:`flex flex-col gap-icon`,children:[s.length>1&&J(A,{label:kt[e.operator],variant:`neutral`,"aria-label":`Change operator`,children:s.map(e=>J(N,{onAction:()=>i({operator:e}),children:kt[e]},e))}),J(Ft,{filter:e,filterConfig:t,onChange:e=>i({value:e})}),J(k,{type:`button`,variant:`neutral`,className:`self-end`,onPress:r,"aria-label":`Remove ${n(e.property)} filter`,children:`Clear`})]})})]})}function Lt({onApply:e}){let{filters:t,filterConfig:n}=Q(),r=l(),{updateFilter:i,removeFilter:a,clearAllFilters:o}=Nt(),[s,c]=K(null);return Y(q,{children:[J(Te,{children:J(Ee,{children:`Filter`})}),J(Ce,{className:`flex flex-col gap-input`,children:Object.keys(n).map(e=>{let o=t.find(t=>t.property===e)??$(e,n[e]);return J(It,{filter:o,filterConfig:n,resourceFormatter:r,onRemove:()=>a(o.id),onUpdate:t=>i(e,t),isOpen:s===e,onOpenChange:t=>c(t?e:null)},e)})}),Y(we,{children:[J(k,{variant:`neutral`,onPress:()=>{o(),c(null)},children:`Clear All`}),J(k,{variant:`primary`,onPress:e,children:`Apply`})]})]})}function Rt({className:e,hasClearableFilters:t,isDisabled:n,onClearAll:r,...i}){let{openDialog:a,closeDialog:s}=U();return J(`section`,{...i,className:o(`flex items-center`,e),children:Y(k,{variant:t?`primary_neutral`:`neutral`,isDisabled:n,"aria-label":`Filter`,onPress:()=>a(J(Lt,{onApply:s})),className:`min-w-0 flex-1`,children:[J(d,{}),`Filters`,t&&J(Pe,{onPress:r,children:J(`span`,{className:`animate-slide-in bg-primary hover:bg-destructive rounded-full size-icon flex justify-center items-center`,children:J(S,{className:`size-2.5 text-surface-primary`})})})]})})}function zt({className:e,previewFilters:t,...n}){let{filters:r,query:i,setFilters:a,filterConfig:s}=Q(),c=z(),u=l(),f=Object.keys(s).length>0,p=Object.keys(s).filter(e=>!r.some(t=>t.property===e)).sort(),[m,h]=K(null),g=Ne(!1);W(()=>{if(!g.current&&r.length===0){let e=[];t&&t.length>0&&e.push(...t.filter(e=>s[e]).map(e=>({...$(e,s[e]),active:!1,isPreview:!0}))),e.length>0&&a(e)}g.current=!0},[]);let{updateFilter:_,removeFilter:ee,clearAllFilters:v}=Nt(),y=e=>{let t=$(e,s[e]);a([...r,t]),h(t.id)},b=r.some(e=>!e.isPreview||e.active!==!1),x=()=>{v(),h(null)};return c?f?J(Rt,{...n,className:e,hasClearableFilters:b,isDisabled:i.isPending,onClearAll:x}):null:Y(`section`,{...n,className:o(`flex flex-wrap gap-icon items-center`,e),children:[r.filter(e=>e.property in s).map(e=>J(It,{filter:e,filterConfig:s,resourceFormatter:u,onRemove:()=>ee(e.id),onUpdate:t=>_(e.property,t),isOpen:m===e.id,onOpenChange:t=>h(t?e.id:null)},e.id)),p.length>0&&J(A,{label:J(d,{}),isDisabled:i.isPending,variant:`neutral`,"aria-label":`Add filter`,children:p.map(e=>{let t=Bt[s[e].type];return Y(N,{className:`!justify-between`,onAction:()=>y(e),children:[u(e),J(t,{})]},e)})}),b&&J(k,{variant:`ghost`,onPress:x,"aria-label":`Clear all filters`,className:`animate-in fade-in`,children:`Clear All`})]})}var Bt={"id-search":g,bool:b,"derived-select":b,date:y,enum:v,id:re,number:C,string:b};export{ct as a,Q as c,ft as i,st as l,zt as n,lt as o,Ot as r,ot as s,kt as t};
+"use client";import{formatDate as e}from"./utilities/date.js";import{Duration as t}from"./utilities/duration.js";import{formatDays as n,formatFilesize as r,formatNumber as i}from"./utilities/numbers.js";import{pluralizeTimes as a}from"./utilities/string.js";import{classNames as o}from"./utilities/theme.js";import{ALL_OS as s,useProjectName as c,useResourceFormatter as l}from"./utilities/resources.js";import{Dt as u,F as d,G as f,K as p,L as m,Lt as h,N as g,Rt as _,U as v,Y as y,_ as b,c as x,ct as S,d as ee,jt as C,l as w,n as te,ot as T,q as E,rt as D,z as ne,zt as re}from"./icons.js";import{ALL_LICENSE_TYPES as ie,getSubscriptionStartTriggerLabel as O}from"./components/select-options.js";import{CountryName as ae}from"./utilities/countries.js";import{useCtxClient as oe}from"./utilities/ctx-client.js";import{Loader as k}from"./components/loader.js";import{Button as A}from"./components/button.js";import{Checkbox as j}from"./components/checkbox.js";import{Popover as se,PopoverTrigger as ce}from"./components/popover.js";import{SelectTrigger as le}from"./components/select.js";import{EasyMenu as M,Menu as N,MenuItem as P,MenuPopover as F,MenuTrigger as I}from"./components/menu.js";import{MultiSelect as L}from"./components/multi-select.js";import{NumberField as R}from"./components/numberfield.js";import{TextField as z}from"./components/textfield.js";import{DatePicker as B}from"./components/date-picker.js";import{useIsMobile as V}from"./utilities/use-mobile.js";import{Badge as H}from"./components/badge.js";import{Tag as ue,TagGroup as U}from"./components/tag-group.js";import{SearchField as W}from"./components/searchfield.js";import{Table as de,TableBody as fe,TableCell as pe,TableHead as me,TableHeader as he,TableRow as ge}from"./components/table.js";import{Tooltip as _e,TooltipTrigger as ve}from"./components/tooltip.js";import{ControlledDialogProvider as ye,DialogBody as be,DialogFooter as xe,DialogHeader as Se,DialogTitle as Ce,useControlledDialog as G}from"./components/dialog.js";import{ProgressBar as we}from"./components/progress-bar.js";import{MultipleIdSearchInput as Te}from"./components/id-search.js";import{merge as Ee}from"lodash-es";import{Fragment as De,createContext as Oe,useContext as ke,useEffect as K,useMemo as Ae,useRef as je,useState as q}from"react";import{Fragment as J,jsx as Y,jsxs as X}from"react/jsx-runtime";import{Pressable as Me}from"react-aria-components";import{getLocalTimeZone as Ne,parseAbsolute as Pe}from"@internationalized/date";import{DndContext as Fe,DragOverlay as Ie,KeyboardSensor as Le,PointerSensor as Re,closestCenter as ze,useSensor as Be,useSensors as Ve}from"@dnd-kit/core";import{SortableContext as He,arrayMove as Ue,sortableKeyboardCoordinates as We,useSortable as Ge,verticalListSortingStrategy as Ke}from"@dnd-kit/sortable";import{CSS as qe}from"@dnd-kit/utilities";import{useInfiniteQuery as Je,useQuery as Ye}from"@tanstack/react-query";import{createColumnHelper as Xe,flexRender as Ze,getCoreRowModel as Qe,useReactTable as $e}from"@tanstack/react-table";import{useLocalStorage as et}from"@uidotdev/usehooks";function tt(e){return e?e.desc?`-${e.id}`:`+${e.id}`:`-createdAt`}var nt=Xe(),rt=[nt.accessor(`checkbox`,{header:({table:e})=>Y(j,{isIndeterminate:e.getIsSomeRowsSelected()&&!e.getIsAllPageRowsSelected(),isSelected:e.getIsAllPageRowsSelected()||e.getIsSomePageRowsSelected(),onChange:()=>e.toggleAllPageRowsSelected(),"aria-label":`Select all`,size:`sm`}),cell:({row:e})=>Y(j,{isSelected:e.getIsSelected(),onChange:()=>e.toggleSelected(),"aria-label":`Select row`,size:`sm`}),enableSorting:!1,enableHiding:!1})],Z=`TableActions`;function it(e){return e.length===0?[]:[nt.accessor(Z,{header:`Actions`,id:Z,enableHiding:!1,cell:({row:t})=>Y(Et,{label:Y(S,{className:`text-icon-primary`}),data:t.original,items:e}),enableSorting:!1})]}function at(){return Xe()}function ot({path:e,resourceName:t,pathParameters:n,queryParameters:r,columns:i,filterConfig:a,columnsToHideByDefault:o={},allowSelection:s=!1,allowToolbar:c=!0,initialFilters:l=[],previewFilters:u,tableActions:d,Card:f,onRowNavigate:p,disableTableView:m,hideViewToggle:h,include:g}){let[_,v]=q({pagination:{pageIndex:0,pageSize:20},sorting:[]}),{sorting:y,pagination:b}=_,[x,S]=q(``),[ee,C]=q({}),[w,te]=q(l),T=Ae(()=>w.filter(e=>e.active!==!1).map(e=>{if(e.type===`derived-select`){let t=a[e.property];return t?.type===`derived-select`?t.toApiQuery(String(e.value??``)):{}}let t=e.value instanceof Set?Array.from(e.value):e.value;return e.needOperator===!1?{[e.property]:Array.isArray(t)?t.join(`,`):t}:e.operator===`between`&&Array.isArray(t)&&t.length===2?{[e.property]:{gte:t[0],lte:t[1]}}:Array.isArray(t)?{[e.property]:{[e.operator]:t.join(`,`)}}:{[e.property]:{[e.operator]:t}}}).reduce((e,t)=>Ee(e,t),{}),[w,a]),E=g?.length?g.join(`,`):void 0,D={...r,...T,limit:b.pageSize,sort:tt(y[0]),search:x,...E?{include:E}:{}},ne=oe(),re=[`get`,e,{...D,page:b.pageIndex+1},`table`],ie=[`get`,e,D,`card`],O=`${e}_ctx`,[ae,k]=et(`${O}_column_order_preference`,[]),[A,j]=et(`${O}_column_visibility_preference`,{id:!1,...o}),[se,ce]=et(`${O}_view_mode_preference`,m?`card`:`table`),le=V(),M=m||le&&f?`card`:se,N=e=>{v(t=>({...t,...e}))};async function P(t){let i=await ne.GET(e,{params:{query:{...r,page:t,limit:b.pageSize,sort:D.sort,search:D.search,...E?{include:E}:{},...T},path:n}});return{data:i.data??[],total:Number.parseInt(i.response.headers.get(`Pagination-Count`)||`0`),nextPage:t+1}}let F=Ye({queryKey:re,enabled:M===`table`,queryFn:()=>P(b.pageIndex+1),placeholderData:e=>e}),I=Je({queryKey:ie,enabled:M===`card`,initialPageParam:1,queryFn:({pageParam:e})=>P(e),getNextPageParam:(e,t)=>t.flatMap(e=>e.data).length<e.total?e.nextPage:void 0}),L=Ae(()=>M===`table`?F.data?.data??[]:I.data?.pages.flatMap(e=>e.data)??[],[M,F.data,I.data]),R=Ae(()=>M===`table`?F.data?.total??0:I.data?.pages[0]?.total??0,[M,F.data,I.data]),z=M===`table`?F:{...I,data:{data:L,total:R},isLoading:I.isLoading,isFetching:I.isFetching,isError:I.isError,error:I.error,refetch:I.refetch},B=d.filter(Ct),H=[...s?rt:[],...i,...it(B??[])];function ue(e){return typeof e==`function`}function U(e,t){return ue(e)?e(t):e}let W=$e({data:L,columns:H,getCoreRowModel:Qe(),rowCount:R,manualPagination:!0,onPaginationChange:e=>{N({pagination:U(e,b)})},manualSorting:!0,onSortingChange:e=>{C({}),N({sorting:[...U(e,y)]})},manualFiltering:!0,onColumnVisibilityChange:e=>{j(U(e,A))},onRowSelectionChange:e=>{C(U(e,ee))},onColumnOrderChange:e=>{k(U(e,ae))},state:{sorting:y,columnVisibility:A,pagination:b,rowSelection:ee,columnOrder:ae},meta:{refetch:z.refetch}});return K(()=>{let e=W.getAllFlatColumns().map(e=>e.id),t=e.filter(e=>e!==`checkbox`&&e!==Z);k(n=>{let r=n.filter(e=>t.includes(e)),i=t.filter(e=>!n.includes(e)),a=r.length>0?[...r,...i]:t;return[...e.includes(`checkbox`)?[`checkbox`]:[],...a,...e.includes(Z)?[Z]:[]]})},[]),{tableState:_,updateTableState:N,query:z,setSearchQuery:S,searchQuery:x,tanTable:W,mergedFilters:T,filters:w,setFilters:te,filterConfig:a,tableActions:d,pathParameters:n,queryParameters:r,viewMode:M,setViewMode:ce,Card:f,allowSelection:s,allowToolbar:c,previewFilters:u,infiniteQuery:I,disableTableView:m,hideViewToggle:h,onRowNavigate:p,resourceName:t}}var st=Oe(null);function Q(){let e=ke(st);if(!e)throw Error(`DataTable should be used within DataTableProvider.`);return e}function ct({children:e,...t}){return Y(st.Provider,{value:t,children:e})}function lt(){let{query:e,resourceName:t,mergedFilters:n,searchQuery:r}=Q(),i=l();if(e.isFetching)return null;if(e.isError)return X(`span`,{className:`flex gap-3 items-center`,children:[Y(v,{className:`text-icon-primary`}),Y(`span`,{children:e.error?.message})]});if(e.data?.data?.length===0){let e=t&&a(i(t),2).toLowerCase(),o=Object.keys(n).length>0||r.length>0;return X(`div`,{className:`text-center flex flex-col gap-2`,children:[Y(`p`,{className:`font-semibold text-text-primary`,children:e?`No ${e} found.`:`No results found.`}),o&&Y(`p`,{className:`text-text-secondary`,children:`Adjust your filter or search request.`})]})}return Y(J,{children:`Unknown error. Please contact customer support.`})}function ut({cardGridClassName:e}){let{query:t,tanTable:n,viewMode:r,tableActions:i,Card:a}=Q(),o=i.filter(Ct),s=r===`card`&&!!a;return t.isLoading?Y(`div`,{className:`body-sm flex items-center justify-center min-h-32`,children:Y(k,{})}):n.getRowModel().rows.length===0?Y(`div`,{className:`body-sm flex items-center justify-center min-h-32 text-muted`,children:Y(lt,{})}):s?Y(ft,{Card:a,actions:o,className:e}):Y(xt,{className:`w-full`})}function dt({className:e,cardGridClassName:t,...n}){let{viewMode:r,Card:i,allowToolbar:a}=Q(),s=r===`card`&&!!i;return Y(J,{children:X(ye,{children:[a&&Y(gt,{}),X(`section`,{...n,className:o(`z-20 flex flex-col`,s?``:`border rounded-lg`,e),children:[Y(`div`,{className:`w-full overflow-auto relative rounded-t-lg [scrollbar-width:none]`,tabIndex:0,children:Y(ut,{cardGridClassName:t})}),!s&&X(`div`,{className:`flex w-full justify-between border-t gap-icon py-2 px-icon bg-surface-secondary rounded-b-lg overflow-x-auto`,children:[X(`div`,{className:`flex gap-icon`,children:[Y(pt,{}),Y(ht,{})]}),Y(mt,{})]})]})]})})}function ft({Card:e,actions:t,className:n,...r}){let{tanTable:i,allowSelection:a}=Q(),{infiniteQuery:s}=Q(),c=je(null);return K(()=>{let e=c.current;if(!e)return;let t=new IntersectionObserver(e=>{e[0].isIntersecting&&s.hasNextPage&&!s.isFetchingNextPage&&s.fetchNextPage()},{threshold:.1});return t.observe(e),()=>t.disconnect()},[s.hasNextPage,s.isFetchingNextPage]),X(`div`,{...r,className:o(n,`grid grid-cols-1 lg:grid-cols-2 gap-icon pb-input`),children:[i.getRowModel().rows.map((n,r)=>{let i={isSelected:n.getIsSelected(),onToggle:()=>n.toggleSelected(),allowSelection:a};return Y(De,{children:e(n.original,t,i,r)},n.id)}),Y(`div`,{ref:c,className:`col-span-full h-4 flex items-center justify-center`,children:s.isFetchingNextPage&&Y(k,{})})]})}function pt(){if(c()===`customer-portal`)return null;let{tanTable:e}=Q(),[t,n]=q(null),r=l(),i=Ve(Be(Re),Be(Le,{coordinateGetter:We}));return Y(Fe,{sensors:i,collisionDetection:ze,onDragStart:e=>{let{active:t}=e;n(t.id.toString())},onDragEnd:t=>{let{active:r,over:i}=t;if(i&&r.id!==i.id){let t=e.getState().columnOrder,n=t.indexOf(r.id.toString()),a=t.indexOf(i.id.toString());e.setColumnOrder([...Ue(t,n,a)])}n(null)},children:X(He,{items:e.getState().columnOrder,strategy:Ke,children:[X(M,{label:X(J,{children:[Y(ee,{className:`inline align-bottom me-1 text-icon-primary`}),`Columns`]}),selectionMode:`multiple`,size:`sm`,items:e.getAllFlatColumns(),selectedKeys:e.getVisibleFlatColumns().map(e=>e.id),children:[Y(P,{onAction:()=>e.toggleAllColumnsVisible(),className:`italic`,children:`(select all)`}),e.getState().columnOrder.map(t=>{let n=e.getAllFlatColumns().find(e=>e.id===t);return!n||n.id===`checkbox`||n.id===Z?null:Y(a,{column:n},n.id)})]}),Y(Ie,{children:t?Y(`div`,{className:`opacity-70 border-2 border-primary`,children:r(t)}):null})]})});function a({column:e}){let{attributes:t,listeners:n,setNodeRef:r,transform:i,transition:a}=Ge({id:e.id}),o={transform:qe.Transform.toString(i),transition:a,zIndex:`999`};return X(P,{ref:r,style:o,...t,id:e.id,onAction:()=>e.toggleVisibility(),isDisabled:!e.getCanHide(),className:`flex items-center`,children:[Y(ne,{...n,className:`size-icon cursor-grab text-icon-primary`}),vt(e),e.getIsSorted()&&Y(_t,{className:`size-icon`,direction:e.getIsSorted()})]})}}function mt(){let{tanTable:e}=Q(),t=e.getRowCount();return X(`div`,{className:`flex items-center gap-2`,children:[Y(`span`,{className:`whitespace-nowrap body-sm text-muted`,children:`${e.getState().pagination.pageIndex*e.getState().pagination.pageSize+1} - ${Math.min((e.getState().pagination.pageIndex+1)*e.getState().pagination.pageSize,t)} of ${t?.toLocaleString()}`}),(e.getCanNextPage()||e.getCanPreviousPage())&&X(J,{children:[Y(A,{"aria-label":`First page`,onPress:()=>e.firstPage(),isDisabled:!e.getCanPreviousPage(),variant:`neutral`,size:`icon-sm`,children:Y(m,{})}),Y(A,{"aria-label":`Previous page`,onPress:()=>e.previousPage(),isDisabled:!e.getCanPreviousPage(),variant:`neutral`,size:`icon-sm`,children:Y(E,{})}),Y(A,{"aria-label":`Next page`,onPress:()=>e.nextPage(),isDisabled:!e.getCanNextPage(),variant:`neutral`,size:`icon-sm`,children:Y(C,{})}),Y(A,{"aria-label":`Last page`,onClick:()=>e.lastPage(),isDisabled:!e.getCanNextPage(),variant:`neutral`,size:`icon-sm`,children:Y(f,{})})]})]})}function ht(){if(c()===`customer-portal`)return null;let{tanTable:e}=Q();return Y(M,{label:e.getState().pagination.pageSize.toString(),selectionMode:`single`,size:`sm`,selectedKeys:[e.getState().pagination.pageSize.toString()],items:[10,20,30,40,50].map(e=>({id:e.toString(),value:e})),children:t=>Y(P,{onAction:()=>e.setPageSize(t.value),children:t.value})})}function gt(){let{query:e,tanTable:t,searchQuery:n,setSearchQuery:r,tableActions:i,viewMode:a,setViewMode:s,Card:c,previewFilters:l,disableTableView:d,hideViewToggle:f}=Q(),m=t.getSelectedRowModel().rows.length>0,h=V(),g=i.filter(e=>e.resourceType!==`single`).filter(e=>e.resourceType===`multiple`===m);return X(`section`,{className:`flex justify-between my-0 mb-icon gap-icon overflow-x-auto py-1`,children:[X(`div`,{className:o(`flex gap-icon max-md:min-w-0 max-md:flex-1`),children:[Y(A,{"aria-label":`Refresh`,isPending:e.isFetching,onClick:()=>e.refetch(),variant:`neutral`,size:`icon`,className:o(`max-md:shrink-0`),children:Y(u,{})}),Y(W,{value:n,onChange:r,className:o(`max-md:min-w-0 max-md:flex-1`)}),Y(Rt,{previewFilters:l,className:o(`max-md:shrink-0`)})]}),!h&&X(`div`,{className:`flex gap-icon`,children:[Y(Tt,{items:g,isFetching:e.isFetching}),c&&!d&&!f&&X(`div`,{className:`flex gap-1 bg-surface-primary rounded-md overflow-hidden`,children:[Y(A,{variant:a===`table`?`primary`:`neutral`,size:`icon`,onPress:()=>s(`table`),"aria-label":`Table view`,className:`border-none`,children:Y(D,{})}),Y(A,{variant:a===`card`?`primary`:`neutral`,size:`icon`,onPress:()=>s(`card`),"aria-label":`Card view`,className:`border-none`,children:Y(p,{})})]})]}),h&&g.length>0&&Y(`div`,{className:`fixed inset-x-0 bottom-0 z-30 flex gap-icon border-t bg-surface-primary p-icon`,children:Y(Tt,{items:g,isFetching:e.isFetching,buttonClassName:`flex-1 justify-center`})})]})}function _t({direction:e,...t}){return Y(e===`asc`?h:e===`desc`?_:re,{className:`size-3.5`,...t})}function vt(e){let t=l(),n=e.columnDef.header;return typeof n==`string`?n:t(e.id)}function yt(a){let o=a.column.columnDef.meta?.displayType,c=a.getValue();if(c==null)return null;switch(o){case`date`:return Y(`span`,{className:`tabular-nums`,children:e(c)});case`number`:return Y(`span`,{className:`block text-right tabular-nums`,children:i(c)});case`boolean`:return Y(H,{variant:c?`success`:`destructive`,className:`capitalize`,children:String(c)});case`badge`:return Y(H,{children:String(c)});case`tags`:return Y(U,{items:(Array.isArray(c)?c:[String(c)]).map(e=>({id:e,name:e})),className:`!flex-nowrap`,children:e=>Y(ue,{children:e.name})});case`progressBar`:let[a,o]=c;return Y(we,{meterClassName:`w-16`,label:`${a}/${o}`,minValue:0,maxValue:o,value:a});case`country`:return Y(ae,{value:c});case`enum`:return Y(`span`,{className:`uppercase w-full`,children:String(c)});case`fileSize`:return r(c);case`days`:return n(c);case`os`:return s[c]??c;case`licenseType`:return ie[c]??c;case`subscriptionInterval`:return t.formatISODuration(c);case`subscriptionStartTrigger`:return O(c);default:return String(c)}}function bt({header:e}){let t=e.column.columnDef.header;return typeof t==`string`||!t||typeof t==`function`&&typeof t(e.getContext())==`string`?vt(e.column):Ze(t,e.getContext())}function xt({className:e}){let{tanTable:t,onRowNavigate:n}=Q(),r=(e,t,n=`z-50`)=>o(`text-left body-sm font-medium whitespace-nowrap`,e&&`sticky right-0 ${n} text-center justify-center`,t);return X(de,{className:o(`table-auto border-0`,e),children:[Y(he,{className:`sticky top-0 z-10 rounded-lg border-stroke-secondary!`,children:t.getHeaderGroups().map(e=>Y(ge,{className:`border-stroke-secondary!`,children:e.headers.map(e=>X(me,{scope:`col`,colSpan:e.colSpan,className:r(e.id===Z,`bg-surface-secondary`),children:[!e.column.getCanSort()&&!e.isPlaceholder&&Y(`div`,{className:o(`w-full flex items-center gap-1 text-xs uppercase font-semibold text-text-secondary`,e.id===Z?`justify-center`:`justify-start`),children:Y(bt,{header:e})}),e.column.getCanSort()&&X(A,{variant:`ghost`,size:`none`,className:o(`w-full p-1 rounded-md uppercase text-text-secondary text-xs font-semibold`,e.id===Z?`justify-center`:`justify-start`,e.column.getIsSorted()?`text-primary`:``),onPress:e.column.getToggleSortingHandler(),children:[Y(`span`,{children:Y(bt,{header:e})}),e.column.getIsSorted()&&Y(_t,{direction:e.column.getIsSorted()})]})]},e.id))},e.id))}),Y(fe,{children:t.getRowModel().rows.map(e=>Y(ge,{className:o(`group border-stroke-secondary! bg-surface-primary hover:not-data-[selected=true]:bg-surface-secondary data-[selected=true]:bg-surface-tertiary`,n&&`cursor-pointer focus-visible:outline focus-visible:outline-ring`),"data-selected":e.getIsSelected(),...n&&{role:`link`,tabIndex:0,onClick:t=>{t.target.closest(`a, button, input, select, textarea, [role="button"]`)||n(e.original)},onKeyDown:t=>{t.key===`Enter`&&n(e.original)}},children:e.getVisibleCells().map(e=>{let t=e.column.id===Z,n=e.column.columnDef.meta?.displayType?yt(e):Ze(e.column.columnDef.cell,e.getContext());return Y(pe,{className:o(r(t,t?`bg-surface-primary group-hover:not-group-data-[selected=true]:bg-surface-secondary group-data-[selected=true]:bg-surface-tertiary`:``,`z-1`),t&&`flex justify-center items-center`),children:n},e.id)})},e.id))})]})}function St(e){return e.resourceType===`none`}function Ct(e){return e.resourceType===`single`}function wt(e){return e.resourceType===`multiple`}function Tt({items:e,isFetching:t,buttonClassName:n}){let{openDialog:r,closeDialog:i}=G(),{tanTable:a,mergedFilters:s}=Q();function c(e,t){return e.isDisabled?St(e)?e.isDisabled():wt(e)?e.isDisabled(t):!1:!1}let l=a.getSelectedRowModel().rows.map(e=>e.original);return Y(J,{children:e.map((e,a)=>{let u=e.icon,d=c(e,l)||t;return X(A,{"aria-label":e.label,type:`button`,isDisabled:d,className:o(`animate-in fade-in slide-in-from-right-15 duration-300 transition-transform`,n),onPress:t=>{let n={event:t,openDialog:r,closeDialog:i,activeFilters:s};St(e)?e.onPress(n):wt(e)&&e.onPress({...n,data:l})},variant:e.variant??`neutral`,children:[u&&Y(u,{"aria-hidden":!0}),Y(`span`,{children:e.label})]},`${e.label}-${a}`)})})}function Et({label:e,items:t,data:n}){let{openDialog:r,closeDialog:i}=G(),{mergedFilters:a}=Q();return t.length<5?Y(`div`,{className:`flex items-center`,children:t.map((e,t)=>{let o=e.icon,s=typeof e.label==`function`?e.label(n):e.label;return X(ve,{children:[Y(A,{"aria-label":typeof s==`string`?s:void 0,isDisabled:e.isDisabled?.(n)??!1,variant:`ghost`,size:`icon`,onPress:()=>{let t={openDialog:r,closeDialog:i};e.onPress({...t,data:n,activeFilters:a})},children:Y(o,{className:`size-icon`})}),Y(_e,{children:s})]},`${t}-${typeof s==`string`?s:``}`)})}):Y(M,{withChevron:!1,"aria-label":`Actions`,label:e,size:`icon`,children:t.map((e,t)=>{let o=e.icon,s=typeof e.label==`function`?e.label(n):e.label;return X(P,{id:typeof s==`string`?s:void 0,isDisabled:e.isDisabled?.(n)??!1,onAction:()=>{let t={openDialog:r,closeDialog:i};Ct(e)&&e.onPress({...t,data:n,activeFilters:a})},children:[Y(o,{className:`size-icon`}),s]},`${t}-${typeof s==`string`?s:``}`)})})}var Dt=[`eq`,`ne`,`cn`,`nc`,`sw`,`ew`,`in`,`nin`,`gt`,`gte`,`lt`,`lte`,`between`],Ot={eq:`equal to`,ne:`not equal to`,cn:`contains`,nc:`does not contain`,sw:`starts with`,ew:`ends with`,in:`includes`,nin:`does not include`,gt:`greater than`,gte:`greater than or equal to`,lt:`less than`,lte:`less than or equal to`,between:`between`},kt={eq:`=`,ne:`≠`,cn:`contains`,nc:`!contains`,sw:`starts with`,ew:`ends with`,in:`in`,nin:`not in`,gt:`>`,gte:`≥`,lt:`<`,lte:`≤`,between:`↔`};function $(e,t){let n=t.type,r=`${e}-${Date.now()}`,i=n===`bool`||n===`derived-select`?!1:t.needOperator??!0,a=i?At[n][0]:`eq`,o={id:r,property:e,operator:a,needOperator:i};switch(n){case`bool`:return{...o,type:n,value:!0};case`derived-select`:return{...o,type:n,value:t.options[0]?.id??``};case`string`:return{...o,type:n,value:``};case`date`:return{...o,type:n,value:a===`between`?[new Date().toISOString(),new Date().toISOString()]:new Date().toISOString()};case`id`:return{...o,type:n,value:``};case`id-search`:return{...o,type:n,value:[]};case`enum`:return{...o,type:n,value:new Set};case`number`:return{...o,type:n,value:0}}}var At={bool:[`eq`],"derived-select":[`eq`],enum:[`in`,`nin`],id:[`in`,`nin`],"id-search":[`in`,`nin`],string:[`eq`,`ne`,`cn`,`nc`,`sw`,`ew`,`in`,`nin`],date:[`between`,`lt`,`gt`],number:[`eq`,`ne`,`gt`,`gte`,`lt`,`lte`]};function jt(e,t){let n=t.value===void 0?e.value:t.value,r=t.operator??e.operator;if(e.type===`date`&&t.operator!==void 0){if(r===`between`&&!Array.isArray(n)){let e=typeof n==`string`?n:new Date().toISOString();n=[e,e]}else r!==`between`&&Array.isArray(n)&&(n=n[0]??new Date().toISOString())}return n}function Mt(){let{setFilters:e,filterConfig:t}=Q();return{updateFilter:(n,r)=>{e(e=>{let i=e.find(e=>e.property===n)??$(n,t[n]),a={...i,...r,value:jt(i,r),active:!0};return e.some(e=>e.id===i.id)?e.map(e=>e.id===i.id?a:e):[...e,a]})},removeFilter:n=>{e(e=>{let r=e.find(e=>e.id===n);return r?r.isPreview?e.map(e=>e.id===n?{...$(e.property,t[e.property]),active:!1,isPreview:!0}:e):e.filter(e=>e.id!==n):e})},clearAllFilters:()=>{e(e=>e.filter(e=>e.isPreview).map(e=>({...$(e.property,t[e.property]),active:!1,isPreview:!0})))}}}function Nt(t,n){switch(t.type){case`string`:case`id`:return t.value??``;case`number`:return t.value?.toString()??``;case`bool`:return t.value?`true`:`false`;case`derived-select`:{let e=n[t.property];if(!e||e.type!==`derived-select`)return t.value??``;let r=e.options.find(e=>e.id===t.value);return typeof r?.label==`string`?r.label:t.value??``}case`date`:if(Array.isArray(t.value)){let[n,r]=t.value;return`${e(n,{dateStyle:`short`})??``} – ${e(r,{dateStyle:`short`})??``}`}return t.value?e(t.value,{dateStyle:`short`})??``:``;case`enum`:return t.value&&t.value.size>0?`${t.value.size} selected`:``;case`id-search`:return t.value&&t.value.length>0?t.value.length===1?`1 item`:`${t.value.length} items`:``}}function Pt({filter:e,filterConfig:t,onChange:n}){if(e.type===`string`||e.type===`id`)return Y(z,{autoFocus:!0,value:e.value??``,onChange:n,"aria-label":`Filter value`,inputClassName:`bg-surface-secondary`});if(e.type===`number`)return Y(R,{autoFocus:!0,value:e.value,onChange:n,"aria-label":`Filter value`,inputClassName:`bg-surface-secondary`});if(e.type===`date`){if(e.operator===`between`){let[t,r]=Array.isArray(e.value)?e.value:[new Date().toISOString(),new Date().toISOString()],i=Pe(t,Ne()),a=Pe(r,Ne());return X(`div`,{className:`flex flex-col gap-icon`,children:[Y(B,{autoFocus:!0,hideTimeZone:!0,label:`From`,value:i,onChange:e=>n([e?e.toAbsoluteString():t,r]),inputClassName:`bg-surface-secondary`}),Y(B,{hideTimeZone:!0,label:`To`,value:a,onChange:e=>n([t,e?e.toAbsoluteString():r]),inputClassName:`bg-surface-secondary`})]})}let t=e.value&&!Array.isArray(e.value)?Pe(e.value,Ne()):null;return Y(B,{autoFocus:!0,hideTimeZone:!0,value:t,onChange:e=>n(e?e.toAbsoluteString():new Date().toISOString()),"aria-label":`Filter date`,inputClassName:`bg-surface-secondary`})}if(e.type===`enum`){let r=t[e.property];return r.type===`enum`?Y(L,{autoFocus:!0,items:r.options,value:e.value??new Set,onChange:n,"aria-label":`Filter value`,inputClassName:`bg-surface-secondary`}):null}if(e.type===`id-search`){let r=t[e.property];if(r.type!==`id-search`)return null;let i=r.defaultParams;return Y(Te,{autoFocus:!0,path:r.path,accessor:r.accessor,defaultParams:i,value:e.value??[],onChange:n,"aria-label":`Filter value`,className:`bg-surface-secondary`})}return null}function Ft({filter:e,filterConfig:t,resourceFormatter:n,onRemove:r,onUpdate:i,isOpen:a,onOpenChange:o}){let s=e.needOperator===!1?[`eq`]:At[e.type],l=Nt(e,t),u=c(),f=V(),p=e.type===`bool`||e.type===`derived-select`,m=f?X(`div`,{className:`flex flex-col gap-1`,children:[Y(`span`,{className:`body-sm text-muted`,children:n(e.property)}),Y(le,{type:`button`,className:`w-full`,"aria-label":n(e.property),children:l})]}):X(A,{type:`button`,variant:e.active===!1?`neutral`:`primary_neutral`,className:`animate-in slide-in-from-left-10 fade-in flex justify-between gap-2`,children:[Y(d,{}),p?Y(`span`,{className:`font-medium`,children:n(e.property)}):X(J,{children:[Y(`span`,{className:`font-medium`,children:n(e.property)}),u!==`customer-portal`&&Y(`span`,{children:kt[e.operator]}),u!==`customer-portal`&&l&&Y(`span`,{children:l})]}),e.active!==!1&&Y(Me,{onPress:()=>r(),children:Y(`span`,{className:`bg-primary hover:bg-destructive rounded-full size-icon flex justify-center items-center`,children:Y(w,{className:`size-2.5 text-surface-primary`})})})]});if(p){let n,r;if(e.type===`bool`)n=[{id:`true`,label:`True`},{id:`false`,label:`False`}],r=e.value?`true`:`false`;else{let i=t[e.property];n=i?.type===`derived-select`?i.options:[],r=e.value??``}return X(I,{isOpen:a,onOpenChange:o,children:[Y(`div`,{className:`relative`,children:m}),Y(F,{className:`min-w-48`,children:Y(N,{selectionMode:`single`,disallowEmptySelection:!0,selectedKeys:new Set([r]),onSelectionChange:t=>{if(t===`all`)return;let n=t.values().next().value;n!=null&&i({value:e.type===`bool`?String(n)===`true`:String(n)})},"aria-label":`Filter value`,children:n.map(e=>Y(P,{id:e.id,children:e.label},e.id))})})]})}return X(ce,{isOpen:a,onOpenChange:o,children:[Y(`div`,{className:`relative`,children:m}),Y(se,{className:`p-icon min-w-48`,children:X(`div`,{className:`flex flex-col gap-2`,children:[u!==`customer-portal`&&s.length>1&&Y(M,{label:Ot[e.operator],variant:`neutral`,"aria-label":`Change operator`,triggerClassName:`bg-surface-secondary`,children:s.map(e=>Y(P,{onAction:()=>i({operator:e}),children:Ot[e]},e))}),Y(Pt,{filter:e,filterConfig:t,onChange:e=>i({value:e})}),Y(A,{type:`button`,variant:`neutral`,className:`self-start`,onPress:r,"aria-label":`Remove ${n(e.property)} filter`,children:`Clear`})]})})]})}function It({onApply:e}){let{filters:t,filterConfig:n}=Q(),r=l(),{updateFilter:i,removeFilter:a,clearAllFilters:o}=Mt(),[s,c]=q(null);return X(J,{children:[Y(Se,{children:Y(Ce,{children:`Filter`})}),Y(be,{className:`flex flex-col gap-input`,children:Object.keys(n).map(e=>{let o=t.find(t=>t.property===e)??$(e,n[e]);return Y(Ft,{filter:o,filterConfig:n,resourceFormatter:r,onRemove:()=>a(o.id),onUpdate:t=>i(e,t),isOpen:s===e,onOpenChange:t=>c(t?e:null)},e)})}),X(xe,{children:[Y(A,{variant:`neutral`,onPress:()=>{o(),c(null)},children:`Clear All`}),Y(A,{variant:`primary`,onPress:e,children:`Apply`})]})]})}function Lt({className:e,hasClearableFilters:t,isDisabled:n,onClearAll:r,...i}){let{openDialog:a,closeDialog:s}=G();return Y(`section`,{...i,className:o(`flex items-center`,e),children:X(A,{variant:t?`primary_neutral`:`neutral`,isDisabled:n,"aria-label":`Filter`,onPress:()=>a(Y(It,{onApply:s})),className:`min-w-0 flex-1`,children:[Y(d,{}),`Filters`,t&&Y(Me,{onPress:r,children:Y(`span`,{className:`animate-slide-in bg-primary hover:bg-destructive rounded-full size-icon flex justify-center items-center`,children:Y(w,{className:`size-2.5 text-surface-primary`})})})]})})}function Rt({className:e,previewFilters:t,...n}){let{filters:r,query:i,setFilters:a,filterConfig:s}=Q(),c=V(),u=l(),f=Object.keys(s).length>0,p=Object.keys(s).filter(e=>!r.some(t=>t.property===e)).sort(),[m,h]=q(null),g=je(!1);K(()=>{if(!g.current&&r.length===0){let e=[];t&&t.length>0&&e.push(...t.filter(e=>s[e]).map(e=>({...$(e,s[e]),active:!1,isPreview:!0}))),e.length>0&&a(e)}g.current=!0},[]);let{updateFilter:_,removeFilter:v,clearAllFilters:y}=Mt(),b=e=>{let t=$(e,s[e]);a([...r,t]),h(t.id)},x=r.some(e=>!e.isPreview||e.active!==!1),S=()=>{y(),h(null)};return c?f?Y(Lt,{...n,className:e,hasClearableFilters:x,isDisabled:i.isPending,onClearAll:S}):null:X(`section`,{...n,className:o(`flex flex-wrap gap-icon items-center`,e),children:[r.filter(e=>e.property in s).map(e=>Y(Ft,{filter:e,filterConfig:s,resourceFormatter:u,onRemove:()=>v(e.id),onUpdate:t=>_(e.property,t),isOpen:m===e.id,onOpenChange:t=>h(t?e.id:null)},e.id)),p.length>0&&Y(M,{label:Y(d,{}),isDisabled:i.isPending,variant:`neutral`,"aria-label":`Add filter`,children:p.map(e=>{let t=zt[s[e].type];return X(P,{className:`!justify-between`,onAction:()=>b(e),children:[u(e),Y(t,{})]},e)})}),x&&Y(A,{variant:`ghost`,onPress:S,"aria-label":`Clear all filters`,className:`animate-in fade-in`,children:`Clear All`})]})}var zt={"id-search":g,bool:x,"derived-select":x,date:b,enum:y,id:te,number:T,string:x};export{st as a,Q as c,dt as i,ot as l,Rt as n,ct as o,Dt as r,at as s,Ot as t};
 //# sourceMappingURL=data-table-filter.js.map

package/dist/data-table-filter.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-filter.js","names":[],"sources":["../lib/components/data-table.tsx","../lib/components/data-table-filter.tsx"],"sourcesContent":["'use client';\nimport type { operations } from '@cryptlex/web-api-types/develop';\nimport {\n    closestCenter,\n    DndContext,\n    DragOverlay,\n    KeyboardSensor,\n    PointerSensor,\n    useSensor,\n    useSensors,\n} from '@dnd-kit/core';\nimport {\n    arrayMove,\n    SortableContext,\n    sortableKeyboardCoordinates,\n    useSortable,\n    verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { useInfiniteQuery, useQuery } from '@tanstack/react-query';\n\nimport {\n    type Column,\n    type ColumnDef,\n    type ColumnOrderState,\n    createColumnHelper,\n    flexRender,\n    getCoreRowModel,\n    type Header,\n    type PaginationState,\n    type RowData,\n    type RowSelectionState,\n    type SortingState,\n    type Updater,\n    useReactTable,\n    type VisibilityState,\n} from '@tanstack/react-table';\nimport { useLocalStorage } from '@uidotdev/usehooks';\nimport { merge } from 'lodash-es';\nimport React, { createContext, Fragment, useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport { Badge } from '../components/badge';\n\nimport { Button } from '../components/button';\nimport {\n    DataTableFilter,\n    type FilterConfig,\n    type FiltersConfig,\n    type TableFilter,\n} from '../components/data-table-filter';\nimport { Loader } from '../components/loader';\nimport { EasyMenu, MenuItem } from '../components/menu';\nimport { SearchField } from '../components/searchfield';\nimport { TableBody, TableCell, Table as TableComponent, TableHead, TableHeader, TableRow } from '../components/table';\nimport { CountryName } from '../utilities/countries';\nimport { formatDate } from '../utilities/date';\nimport { Duration } from '../utilities/duration';\nimport { formatDays, formatFilesize, formatNumber } from '../utilities/numbers';\nimport {\n    ALL_OS,\n    type ApiFilter,\n    type ApiPathParameters,\n    type ApiResponseBody,\n    type CtxResourceName,\n    useProjectName,\n    useResourceFormatter,\n} from '../utilities/resources';\nimport { pluralizeTimes } from '../utilities/string';\nimport { classNames } from '../utilities/theme';\nimport { useIsMobile } from '../utilities/use-mobile';\nimport { Checkbox } from './checkbox';\nimport { Tooltip, TooltipTrigger } from './tooltip';\n\nimport {\n    type CtxIcon,\n    IcColumns,\n    IcFirst,\n    IcGrip,\n    IcInfo,\n    IcLast,\n    IcLayoutGrid,\n    IcLeft,\n    IcMenu,\n    IcMoreVertical,\n    IcRefresh,\n    IcRight,\n    IcSortAsc,\n    IcSortDesc,\n    IcSortNone,\n} from './icons';\nimport { ALL_LICENSE_TYPES, getSubscriptionStartTriggerLabel } from './select-options';\n\nimport type { Cell, ColumnHelper } from '@tanstack/react-table';\nimport type { ClientPathsWithMethod } from 'openapi-fetch';\nimport type { PressEvent } from 'react-aria-components';\nimport { type CtxClientType, useCtxClient } from '../utilities/ctx-client';\nimport { ControlledDialogProvider, useControlledDialog } from './dialog';\nimport { ProgressBar } from './progress-bar';\nimport { Tag, TagGroup } from './tag-group';\n\nexport type DisplayType =\n    | 'string'\n    | 'boolean'\n    | 'date'\n    | 'number'\n    | 'enum'\n    | 'badge'\n    | 'tags'\n    | 'country'\n    | 'fileSize'\n    | 'days'\n    | 'os'\n    | 'licenseType'\n    | 'subscriptionInterval'\n    | 'subscriptionStartTrigger'\n    | 'progressBar';\n\ndeclare module '@tanstack/react-table' {\n    interface ColumnMeta<TData extends RowData, TValue> {\n        displayType: DisplayType;\n    }\n}\n\nfunction generateSortParam(sort: { id: string; desc: boolean } | undefined): string {\n    if (sort) {\n        if (sort.desc) {\n            return `-${sort.id}`;\n        } else {\n            return `+${sort.id}`;\n        }\n    } else {\n        return '-createdAt';\n    }\n}\n\nconst cH = createColumnHelper<any>();\nconst TABLE_CHECK_BOX_COLUMN = [\n    cH.accessor('checkbox', {\n        header: ({ table }) => (\n            <Checkbox\n                isIndeterminate={table.getIsSomeRowsSelected() && !table.getIsAllPageRowsSelected()}\n                isSelected={table.getIsAllPageRowsSelected() || table.getIsSomePageRowsSelected()}\n                onChange={() => table.toggleAllPageRowsSelected()}\n                aria-label=\"Select all\"\n                size=\"sm\"\n            />\n        ),\n\n        cell: ({ row }) => (\n            <Checkbox\n                isSelected={row.getIsSelected()}\n                onChange={() => row.toggleSelected()}\n                aria-label=\"Select row\"\n                size=\"sm\"\n            />\n        ),\n        enableSorting: false,\n        enableHiding: false,\n    }),\n];\n\nconst ACTIONS_COLUMN_ID = 'TableActions';\nfunction getActionsColumn<T extends object>(rowActions: SingleResourceAction<T>[]) {\n    if (rowActions.length === 0) return [];\n\n    return [\n        cH.accessor(ACTIONS_COLUMN_ID, {\n            header: 'Actions',\n            id: ACTIONS_COLUMN_ID,\n            enableHiding: false,\n            cell: ({ row }) => (\n                <TableActionsRowMenu\n                    label={<IcMoreVertical className=\"text-icon-primary\" />}\n                    data={row.original}\n                    items={rowActions}\n                />\n            ),\n            enableSorting: false,\n        }),\n    ];\n}\n\ntype DataTableFactoryBase<\n    T extends object,\n    TOperation extends keyof operations,\n    TFilterConfig extends FiltersConfig<TOperation> = FiltersConfig<TOperation>,\n> = {\n    path: NoInfer<ClientPathsWithMethod<CtxClientType, 'get'>>;\n    resourceName?: CtxResourceName;\n    pathParameters?: NoInfer<ApiPathParameters<TOperation>>;\n    queryParameters?: NoInfer<Partial<ApiFilter<TOperation>>>;\n    columns: ColumnDef<T, any>[];\n    tableActions: TableAction<T>[];\n    columnsToHideByDefault?: Partial<Record<keyof T, boolean>>; // Columns that are hidden by default\n    allowSelection?: boolean;\n    allowToolbar?: boolean;\n    filterConfig: TFilterConfig;\n    initialFilters: TableFilter[];\n    previewFilters?: (keyof TFilterConfig)[];\n    /** When provided, each row becomes a navigable link. Called with the row's data on click or Enter. */\n    onRowNavigate?: (row: T) => void;\n    /** Related resources to embed in list responses, e.g. `['users', 'organization']` → `?include=users,organization`. */\n    include?: string[];\n    /** Hides the table/card view toggle button even when both views are available. The initial view mode (or the mobile-forced card view) still applies. */\n    hideViewToggle?: boolean;\n};\n\ntype CardRenderer<T> = (\n    item: T,\n    actions: SingleResourceAction<T>[],\n    selection: CardSelectionProps,\n    index?: number\n) => React.ReactNode;\n\ntype DataTableFactory<\n    T extends object,\n    TOperation extends keyof operations,\n    TFilterConfig extends FiltersConfig<TOperation> = FiltersConfig<TOperation>,\n> = DataTableFactoryBase<T, TOperation, TFilterConfig> &\n    ({ disableTableView: true; Card: CardRenderer<T> } | { disableTableView?: false; Card?: CardRenderer<T> });\n\ntype DataTableState = {\n    sorting: SortingState;\n    pagination: PaginationState;\n};\n\nexport function getColumnHelper<O extends keyof operations>(): ColumnHelper<ApiResponseBody<O>> {\n    return createColumnHelper<ApiResponseBody<O>>();\n}\n/**\n * Hook for handling all data-table state. Used in DataTableContext\n */\nexport function useDataTableState<\n    T extends object,\n    TOperation extends keyof operations,\n    TFilterConfig extends FiltersConfig<TOperation> = FiltersConfig<TOperation>,\n>({\n    path,\n    resourceName,\n    pathParameters,\n    queryParameters,\n    columns,\n    filterConfig,\n    columnsToHideByDefault = {},\n    allowSelection = false,\n    allowToolbar = true,\n    initialFilters = [],\n    previewFilters,\n    tableActions,\n    Card,\n    onRowNavigate,\n    disableTableView,\n    hideViewToggle,\n    include,\n}: DataTableFactory<T, TOperation, TFilterConfig>) {\n    const [tableState, _setTableState] = useState<DataTableState>({\n        /** Reflect in URL in host application  */\n        pagination: { pageIndex: 0, pageSize: 20 }, // Pagination state\n        sorting: [], // Sorting state\n    });\n\n    const { sorting, pagination } = tableState;\n\n    const [searchQuery, setSearchQuery] = useState('');\n\n    const [rowSelection, setRowSelection] = useState<RowSelectionState>({});\n\n    /** Reflect in URL in host application  */\n    const [filters, setFilters] = useState(initialFilters);\n    const mergedFilters = useMemo(() => {\n        // TODO, generic transform fn\n        return filters\n            .filter(tf => tf.active !== false)\n            .map(tf => {\n                // Virtual filters (e.g. a \"status\" filter derived from several boolean properties) are\n                // expanded into real API query params via their filterConfig's toApiQuery.\n                if (tf.type === 'derived-select') {\n                    const config = (filterConfig as Record<string, FilterConfig>)[tf.property];\n                    return config?.type === 'derived-select' ? config.toApiQuery(String(tf.value ?? '')) : {};\n                }\n                // Enum filters store their selection as a Set; normalize to an array so it's\n                // joined into a comma-separated string like other multi-value filters instead of\n                // being passed through as a Set, which the API client's query serializer can't handle.\n                const value = tf.value instanceof Set ? Array.from(tf.value) : tf.value;\n                // Filters that don't need an operator are sent as `property=value`\n                if (tf.needOperator === false) {\n                    return {\n                        [tf.property]: Array.isArray(value) ? value.join(',') : value,\n                    };\n                }\n                if (tf.operator === 'between' && Array.isArray(value) && value.length === 2) {\n                    return {\n                        [tf.property]: {\n                            gte: value[0],\n                            lte: value[1],\n                        },\n                    };\n                }\n                if (Array.isArray(value)) {\n                    return {\n                        [tf.property]: {\n                            [tf.operator]: value.join(','),\n                        },\n                    };\n                }\n                return {\n                    [tf.property]: {\n                        [tf.operator]: value,\n                    },\n                };\n            })\n            .reduce((acc, current) => {\n                return merge(acc, current);\n            }, {});\n    }, [filters, filterConfig]);\n\n    const includeParam = include?.length ? include.join(',') : undefined;\n\n    // Page is deliberately excluded here: the card view's infinite query always starts from\n    // page 1 and accumulates pages, so its cache key must not depend on the table's pageIndex.\n    const sharedQueryParams = {\n        ...queryParameters,\n        ...mergedFilters,\n        limit: pagination.pageSize,\n        sort: generateSortParam(sorting[0]),\n        search: searchQuery,\n        ...(includeParam ? { include: includeParam } : {}),\n    };\n\n    const client = useCtxClient();\n    const tableQueryKey = ['get', path, { ...sharedQueryParams, page: pagination.pageIndex + 1 }, 'table'];\n    const cardQueryKey = ['get', path, sharedQueryParams, 'card'];\n\n    const prefsKey = `${path}_ctx`;\n    const [columnOrder, setColumnOrder] = useLocalStorage<ColumnOrderState>(`${prefsKey}_column_order_preference`, []);\n    const [columnVisibility, setColumnVisibility] = useLocalStorage<VisibilityState>(\n        `${prefsKey}_column_visibility_preference`,\n        {\n            id: false,\n            ...columnsToHideByDefault,\n        }\n    );\n    const [viewMode, setViewMode] = useLocalStorage<'table' | 'card'>(\n        `${prefsKey}_view_mode_preference`,\n        disableTableView ? 'card' : 'table'\n    );\n    // On mobile, always render cards (when a Card renderer is available) regardless of the user's saved preference.\n    const isMobile = useIsMobile();\n    const effectiveViewMode = disableTableView || (isMobile && Card) ? 'card' : viewMode;\n\n    // Update table state with new values\n    const updateTableState = (updates: Partial<DataTableState>) => {\n        _setTableState(prev => ({ ...prev, ...updates }));\n    };\n\n    async function fetchPage(pageParam: number) {\n        const res = await client.GET(path, {\n            params: {\n                query: {\n                    ...queryParameters,\n                    page: pageParam,\n                    limit: pagination.pageSize,\n                    sort: sharedQueryParams.sort,\n                    search: sharedQueryParams.search,\n                    ...(includeParam ? { include: includeParam } : {}),\n                    ...mergedFilters,\n                },\n                path: pathParameters as any,\n            },\n        });\n        return {\n            data: (res.data ?? []) as T[],\n            total: Number.parseInt(res.response.headers.get('Pagination-Count') || '0'),\n            nextPage: pageParam + 1,\n        };\n    }\n\n    const tableQuery = useQuery({\n        queryKey: tableQueryKey,\n        enabled: effectiveViewMode === 'table',\n        queryFn: () => fetchPage(pagination.pageIndex + 1),\n        placeholderData: prev => prev,\n    });\n\n    const infiniteQuery = useInfiniteQuery({\n        queryKey: cardQueryKey,\n        enabled: effectiveViewMode === 'card',\n        initialPageParam: 1,\n        queryFn: ({ pageParam }) => fetchPage(pageParam),\n        getNextPageParam: (lastPage, allPages) => {\n            const fetched = allPages.flatMap(p => p.data).length;\n            return fetched < lastPage.total ? lastPage.nextPage : undefined;\n        },\n    });\n\n    // Flatten data into a single array for tanStack table\n    const flatData = useMemo<T[]>(() => {\n        if (effectiveViewMode === 'table') return tableQuery.data?.data ?? [];\n        return infiniteQuery.data?.pages.flatMap(p => p.data) ?? [];\n    }, [effectiveViewMode, tableQuery.data, infiniteQuery.data]);\n\n    const total = useMemo(() => {\n        if (effectiveViewMode === 'table') return tableQuery.data?.total ?? 0;\n        return infiniteQuery.data?.pages[0]?.total ?? 0;\n    }, [effectiveViewMode, tableQuery.data, infiniteQuery.data]);\n\n    const query =\n        effectiveViewMode === 'table'\n            ? tableQuery\n            : {\n                  ...infiniteQuery,\n                  data: { data: flatData, total },\n                  isLoading: infiniteQuery.isLoading,\n                  isFetching: infiniteQuery.isFetching,\n                  isError: infiniteQuery.isError,\n                  error: infiniteQuery.error,\n                  refetch: infiniteQuery.refetch,\n              };\n\n    const rowActions = tableActions.filter(isSingleResourceAction);\n    /**\n     * ID,createdAt and updatedAt will be added by default for all tables\n     * If selection is allowed, checkbox will be added\n     * If the dto has metadata, dynamics columns for all the metadata key-value will be added(particular for a view)\n     * If there are actions for the table, they will be placed fixed at the right side of table.\n     */\n    const cols: ColumnDef<any, any>[] = [\n        ...(allowSelection ? TABLE_CHECK_BOX_COLUMN : []),\n        ...columns,\n        ...getActionsColumn<T>(rowActions ?? []),\n    ];\n\n    // Type-guard for updater\n    function isUpdaterFunction<T>(updater: Updater<T>): updater is (old: T) => T {\n        return typeof updater === 'function';\n    }\n    // Utility function to resolve updater\n    function resolveUpdater<T>(updater: Updater<T>, currentValue: T) {\n        if (isUpdaterFunction(updater)) {\n            return updater(currentValue);\n        }\n        return updater;\n    }\n\n    // Use react-table's hook to create the table instance\n    const tanTable = useReactTable({\n        data: flatData,\n        columns: cols,\n        getCoreRowModel: getCoreRowModel(),\n        rowCount: total,\n        manualPagination: true, // Handle pagination manually since pagination is done server side for data tables\n        onPaginationChange: updater => {\n            updateTableState({ pagination: resolveUpdater(updater, pagination) });\n        },\n        manualSorting: true, // Handle sorting manually since sorting is done server side for data tables\n        onSortingChange: updater => {\n            setRowSelection({});\n            updateTableState({ sorting: [...resolveUpdater(updater, sorting)] }); // Reset selection when sorting.\n        },\n        manualFiltering: true, // Handle filtering manually since filtering is done server side for data tables\n        onColumnVisibilityChange: updater => {\n            setColumnVisibility(resolveUpdater(updater, columnVisibility));\n        },\n        onRowSelectionChange: updater => {\n            setRowSelection(resolveUpdater(updater, rowSelection));\n        },\n        onColumnOrderChange: updater => {\n            setColumnOrder(resolveUpdater(updater, columnOrder));\n        },\n        state: {\n            sorting: sorting,\n            columnVisibility: columnVisibility,\n            pagination: pagination,\n            rowSelection: rowSelection,\n            columnOrder: columnOrder,\n        },\n        meta: {\n            refetch: query.refetch,\n        },\n    });\n\n    // By default, ColumnDef does not give guarantees of column.id existing. Once useReactTable is called, all columns are assigned IDs.\n    // This populates the columnIds in the columnOrder state\n    useEffect(() => {\n        const allIds = tanTable.getAllFlatColumns().map(c => c.id);\n        const middleIds = allIds.filter(id => id !== 'checkbox' && id !== ACTIONS_COLUMN_ID);\n        setColumnOrder(prevOrder => {\n            // Preserve any existing custom order for the non-special columns; append newly seen ones.\n            const preserved = prevOrder.filter(id => middleIds.includes(id));\n            const rest = middleIds.filter(id => !prevOrder.includes(id));\n            const orderedMiddle = preserved.length > 0 ? [...preserved, ...rest] : middleIds;\n            return [\n                ...(allIds.includes('checkbox') ? ['checkbox'] : []),\n                ...orderedMiddle,\n                ...(allIds.includes(ACTIONS_COLUMN_ID) ? [ACTIONS_COLUMN_ID] : []),\n            ];\n        });\n    }, []);\n\n    return {\n        tableState,\n        updateTableState,\n        query,\n        setSearchQuery,\n        searchQuery,\n        tanTable,\n        mergedFilters,\n        filters,\n        setFilters,\n        filterConfig,\n        tableActions,\n        pathParameters,\n        queryParameters,\n        viewMode: effectiveViewMode,\n        setViewMode,\n        Card,\n        allowSelection,\n        allowToolbar,\n        previewFilters,\n        infiniteQuery,\n        disableTableView,\n        hideViewToggle,\n        onRowNavigate,\n        resourceName,\n    } as const;\n}\n\nexport const DataTableContext = createContext<ReturnType<typeof useDataTableState> | null>(null);\n// TODO, don't export this\nexport function useDataTable() {\n    const ctx = useContext(DataTableContext);\n    if (!ctx) {\n        throw Error('DataTable should be used within DataTableProvider.');\n    }\n    return ctx;\n}\n\nexport function DataTableProvider<T extends object, TOperation extends keyof operations>({\n    children,\n    ...props\n}: { children: React.ReactNode } & ReturnType<typeof useDataTableState<T, TOperation>>) {\n    // @ts-expect-error, propogating the generic type further will be more complex. Since this is a tightly coupled type, it should be okay but reviewed whenever useDataTableState changes.\n    return <DataTableContext.Provider value={props}>{children}</DataTableContext.Provider>;\n}\n\nfunction EmptyMessage() {\n    const { query, resourceName, mergedFilters, searchQuery } = useDataTable();\n    const resourceFormatter = useResourceFormatter();\n    if (query.isFetching) return null;\n    if (query.isError)\n        return (\n            <span className=\"flex gap-3 items-center\">\n                <IcInfo className=\"text-icon-primary\" />\n                <span>{query.error?.message}</span>\n            </span>\n        );\n    if (query.data?.data?.length === 0) {\n        const resourceNamePlural = resourceName && pluralizeTimes(resourceFormatter(resourceName), 2).toLowerCase();\n        const hasActiveFilterOrSearch = Object.keys(mergedFilters).length > 0 || searchQuery.length > 0;\n        return (\n            <div className=\"text-center flex flex-col gap-2\">\n                <p className=\"font-semibold text-text-primary\">\n                    {resourceNamePlural ? `No ${resourceNamePlural} found.` : 'No results found.'}\n                </p>\n                {hasActiveFilterOrSearch && (\n                    <p className=\"text-text-secondary\">Adjust your filter or search request.</p>\n                )}\n            </div>\n        );\n    }\n    return <>Unknown error. Please contact customer support.</>;\n}\n\nfunction Content({ cardGridClassName }: { cardGridClassName?: string }) {\n    const { query, tanTable, viewMode, tableActions, Card } = useDataTable();\n    const cardActions = tableActions.filter(isSingleResourceAction);\n    const isCardView = viewMode === 'card' && !!Card;\n\n    if (query.isLoading)\n        return (\n            <div className=\"body-sm flex items-center justify-center min-h-32\">\n                <Loader />\n            </div>\n        );\n    if (tanTable.getRowModel().rows.length === 0)\n        return (\n            <div className=\"body-sm flex items-center justify-center min-h-32 text-muted\">\n                <EmptyMessage />\n            </div>\n        );\n    if (isCardView) return <CardGrid Card={Card!} actions={cardActions} className={cardGridClassName} />;\n    return <TableContent className=\"w-full\" />;\n}\n\nexport type DataTableProps = React.ComponentProps<'section'> & {\n    cardGridClassName?: string;\n};\nexport function DataTable({ className, cardGridClassName, ...props }: DataTableProps) {\n    const { viewMode, Card, allowToolbar } = useDataTable();\n    const isCardView = viewMode === 'card' && !!Card;\n\n    return (\n        <>\n            <ControlledDialogProvider>\n                {/* Table Actions Section */}\n                {allowToolbar && <Actions />}\n                <section\n                    {...props}\n                    className={classNames('z-20 flex flex-col', !isCardView ? 'border rounded-lg' : '', className)}\n                >\n                    {/* The div here is necessary because TableContent is internally a <table> tag and does not respect width, height CSS */}\n                    <div className=\"w-full overflow-auto relative rounded-t-lg [scrollbar-width:none]\" tabIndex={0}>\n                        <Content cardGridClassName={cardGridClassName} />\n                    </div>\n\n                    {/* Table Footer Section with Pagination and Column Picker */}\n                    {!isCardView && (\n                        <div className=\"flex w-full justify-between border-t gap-icon py-2 px-icon bg-surface-secondary rounded-b-lg overflow-x-auto\">\n                            <div className=\"flex gap-icon\">\n                                <ColumnPicker />\n                                <PageSize />\n                            </div>\n                            <Paginator />\n                        </div>\n                    )}\n                </section>\n            </ControlledDialogProvider>\n        </>\n    );\n}\n\nexport type CardSelectionProps = {\n    isSelected: boolean;\n    onToggle: () => void;\n    allowSelection: boolean;\n};\n\nfunction CardGrid<T>({\n    Card,\n    actions,\n    className,\n    ...props\n}: {\n    Card: CardRenderer<T>;\n    actions: SingleResourceAction<T>[];\n} & React.ComponentProps<'div'>) {\n    const { tanTable, allowSelection } = useDataTable();\n    const { infiniteQuery } = useDataTable(); // expose from context\n    const sentinelRef = useRef<HTMLDivElement>(null);\n\n    // Todo: virtualization, see https://tanstack.com/virtual/latest/docs/introduction\n    useEffect(() => {\n        const el = sentinelRef.current;\n        if (!el) return;\n\n        const observer = new IntersectionObserver(\n            entries => {\n                if (entries[0].isIntersecting && infiniteQuery.hasNextPage && !infiniteQuery.isFetchingNextPage) {\n                    infiniteQuery.fetchNextPage();\n                }\n            },\n            { threshold: 0.1 }\n        );\n\n        observer.observe(el);\n        return () => observer.disconnect();\n    }, [infiniteQuery.hasNextPage, infiniteQuery.isFetchingNextPage]);\n\n    return (\n        <div {...props} className={classNames(className, 'grid grid-cols-1 lg:grid-cols-2 gap-icon pb-input')}>\n            {tanTable.getRowModel().rows.map((row, index) => {\n                const selection: CardSelectionProps = {\n                    isSelected: row.getIsSelected(),\n                    onToggle: () => row.toggleSelected(),\n                    allowSelection,\n                };\n                return <Fragment key={row.id}>{Card(row.original, actions, selection, index)}</Fragment>;\n            })}\n\n            {/* Invisible sentinel at the bottom triggers next page fetch */}\n            <div ref={sentinelRef} className=\"col-span-full h-4 flex items-center justify-center\">\n                {infiniteQuery.isFetchingNextPage && <Loader />}\n            </div>\n        </div>\n    );\n}\n\n// TODO, ?include query param on Licenses, Activations and other future resources that need this\nfunction ColumnPicker() {\n    const projectName = useProjectName();\n\n    if (projectName === 'customer-portal') {\n        return null;\n    }\n\n    const { tanTable } = useDataTable();\n    const [activeId, setActiveId] = useState<string | null>(null);\n\n    const resourceFormatter = useResourceFormatter();\n\n    const sensors = useSensors(\n        useSensor(PointerSensor),\n        useSensor(KeyboardSensor, {\n            coordinateGetter: sortableKeyboardCoordinates,\n        })\n    );\n    return (\n        <DndContext\n            sensors={sensors}\n            collisionDetection={closestCenter}\n            onDragStart={event => {\n                const { active } = event;\n                setActiveId(active.id.toString());\n            }}\n            onDragEnd={event => {\n                const { active, over } = event;\n\n                if (over && active.id !== over.id) {\n                    const columnOrder = tanTable.getState().columnOrder;\n                    const oldIndex = columnOrder.indexOf(active.id.toString());\n                    const newIndex = columnOrder.indexOf(over.id.toString());\n                    tanTable.setColumnOrder([...arrayMove(columnOrder, oldIndex, newIndex)]);\n                }\n\n                setActiveId(null);\n            }}\n        >\n            <SortableContext items={tanTable.getState().columnOrder} strategy={verticalListSortingStrategy}>\n                <EasyMenu\n                    label={\n                        <>\n                            <IcColumns className=\"inline align-bottom me-1 text-icon-primary\" />\n                            Columns\n                        </>\n                    }\n                    selectionMode=\"multiple\"\n                    size={'sm'}\n                    items={tanTable.getAllFlatColumns()}\n                    // Using selectedKeys = 'all' does not mark MenuItems with isDisabled=true as selected. This is not the intended behaviour in this use-case.\n                    selectedKeys={tanTable.getVisibleFlatColumns().map(c => c.id)}\n                >\n                    <MenuItem onAction={() => tanTable.toggleAllColumnsVisible()} className={'italic'}>\n                        (select all)\n                    </MenuItem>\n                    {tanTable.getState().columnOrder.map(colId => {\n                        const col = tanTable.getAllFlatColumns().find(c => c.id === colId);\n                        // Don't show checkbox and actions columns in picker\n                        if (!col || col.id === 'checkbox' || col.id === ACTIONS_COLUMN_ID) return null;\n                        return <SortableItem key={col.id} column={col} />;\n                    })}\n                </EasyMenu>\n                <DragOverlay>\n                    {activeId ? (\n                        <div className=\"opacity-70 border-2 border-primary\">{resourceFormatter(activeId)}</div>\n                    ) : null}\n                </DragOverlay>\n            </SortableContext>\n        </DndContext>\n    );\n\n    function SortableItem({ column }: { column: Column<any, unknown> }) {\n        const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: column.id });\n        const style = {\n            transform: CSS.Transform.toString(transform),\n            transition,\n            zIndex: '999',\n        };\n        return (\n            <MenuItem\n                ref={setNodeRef}\n                style={style}\n                {...attributes}\n                id={column.id}\n                onAction={() => column.toggleVisibility()}\n                isDisabled={!column.getCanHide()}\n                className=\"flex items-center\"\n            >\n                <IcGrip {...listeners} className=\"size-icon cursor-grab text-icon-primary\" />\n                {getColumnHeaderText(column)}\n                {column.getIsSorted() && <SortIcon className=\"size-icon\" direction={column.getIsSorted()} />}\n            </MenuItem>\n        );\n    }\n}\n\nfunction Paginator() {\n    const { tanTable } = useDataTable();\n    const rowCount = tanTable.getRowCount();\n    return (\n        <div className=\"flex items-center gap-2\">\n            <span className=\"whitespace-nowrap body-sm text-muted\">\n                {`${tanTable.getState().pagination.pageIndex * tanTable.getState().pagination.pageSize + 1} - ${Math.min(\n                    (tanTable.getState().pagination.pageIndex + 1) * tanTable.getState().pagination.pageSize,\n                    rowCount\n                )} of ${rowCount?.toLocaleString()}`}\n            </span>\n\n            {(tanTable.getCanNextPage() || tanTable.getCanPreviousPage()) && (\n                <>\n                    <Button\n                        aria-label=\"First page\"\n                        onPress={() => tanTable.firstPage()}\n                        isDisabled={!tanTable.getCanPreviousPage()}\n                        variant=\"neutral\"\n                        size={'icon-sm'}\n                    >\n                        <IcFirst />\n                    </Button>\n                    <Button\n                        aria-label=\"Previous page\"\n                        onPress={() => tanTable.previousPage()}\n                        isDisabled={!tanTable.getCanPreviousPage()}\n                        variant=\"neutral\"\n                        size={'icon-sm'}\n                    >\n                        <IcLeft />\n                    </Button>\n                    <Button\n                        aria-label=\"Next page\"\n                        onPress={() => tanTable.nextPage()}\n                        isDisabled={!tanTable.getCanNextPage()}\n                        variant=\"neutral\"\n                        size={'icon-sm'}\n                    >\n                        <IcRight />\n                    </Button>\n                    <Button\n                        aria-label=\"Last page\"\n                        onClick={() => tanTable.lastPage()}\n                        isDisabled={!tanTable.getCanNextPage()}\n                        variant=\"neutral\"\n                        size={'icon-sm'}\n                    >\n                        <IcLast />\n                    </Button>\n                </>\n            )}\n        </div>\n    );\n}\n\nfunction PageSize() {\n    const projectName = useProjectName();\n\n    if (projectName === 'customer-portal') {\n        return null;\n    }\n\n    const { tanTable } = useDataTable();\n    const PAGE_SIZES = [10, 20, 30, 40, 50];\n\n    return (\n        <EasyMenu\n            label={tanTable.getState().pagination.pageSize.toString()}\n            selectionMode=\"single\"\n            size={'sm'}\n            selectedKeys={[tanTable.getState().pagination.pageSize.toString()]}\n            items={PAGE_SIZES.map(s => ({ id: s.toString(), value: s }))}\n        >\n            {items => <MenuItem onAction={() => tanTable.setPageSize(items.value)}>{items.value}</MenuItem>}\n        </EasyMenu>\n    );\n}\n\nfunction Actions() {\n    const {\n        query,\n        tanTable,\n        searchQuery,\n        setSearchQuery,\n        tableActions,\n        viewMode,\n        setViewMode,\n        Card,\n        previewFilters,\n        disableTableView,\n        hideViewToggle,\n    } = useDataTable();\n    const hasSelectedRows = tanTable.getSelectedRowModel().rows.length > 0;\n    const isMobile = useIsMobile();\n\n    const filteredActions = tableActions\n        .filter(ta => ta.resourceType !== 'single')\n        .filter(ta => (ta.resourceType === 'multiple') === hasSelectedRows);\n\n    return (\n        <section className=\"flex justify-between my-0 mb-icon gap-icon overflow-x-auto py-1\">\n            <div className={classNames('flex gap-icon max-md:min-w-0 max-md:flex-1')}>\n                <Button\n                    aria-label=\"Refresh\"\n                    isPending={query.isFetching}\n                    onClick={() => query.refetch()}\n                    variant={'neutral'}\n                    size={'icon'}\n                    className={classNames('max-md:shrink-0')}\n                >\n                    <IcRefresh />\n                </Button>\n                <SearchField\n                    value={searchQuery}\n                    onChange={setSearchQuery}\n                    className={classNames('max-md:min-w-0 max-md:flex-1')}\n                />\n                <DataTableFilter previewFilters={previewFilters} className={classNames('max-md:shrink-0')} />\n            </div>\n\n            {/* On mobile, actions render in a bar fixed to the bottom of the screen instead of here. */}\n            {!isMobile && (\n                <div className=\"flex gap-icon\">\n                    <TableActions items={filteredActions} isFetching={query.isFetching} />\n                    {Card &&\n                        !disableTableView &&\n                        !hideViewToggle && ( // Only show view mode toggle button if a Card component was provided and table view is enabled\n                            <div className=\"flex gap-1 bg-surface-primary rounded-md overflow-hidden\">\n                                <Button\n                                    variant={viewMode === 'table' ? 'primary' : 'neutral'}\n                                    size=\"icon\"\n                                    onPress={() => setViewMode('table')}\n                                    aria-label=\"Table view\"\n                                    className=\"border-none\"\n                                >\n                                    <IcMenu />\n                                </Button>\n                                <Button\n                                    variant={viewMode === 'card' ? 'primary' : 'neutral'}\n                                    size=\"icon\"\n                                    onPress={() => setViewMode('card')}\n                                    aria-label=\"Card view\"\n                                    className=\"border-none\"\n                                >\n                                    <IcLayoutGrid />\n                                </Button>\n                            </div>\n                        )}\n                </div>\n            )}\n            {isMobile && filteredActions.length > 0 && (\n                <div className=\"fixed inset-x-0 bottom-0 z-30 flex gap-icon border-t bg-surface-primary p-icon\">\n                    <TableActions\n                        items={filteredActions}\n                        isFetching={query.isFetching}\n                        buttonClassName=\"flex-1 justify-center\"\n                    />\n                </div>\n            )}\n        </section>\n    );\n}\n\nfunction SortIcon({\n    direction,\n    ...props\n}: { direction: 'asc' | 'desc' | false } & Omit<React.ComponentProps<'svg'>, 'direction'>) {\n    if (direction === 'asc') return <IcSortAsc className=\"size-3.5\" {...props} />;\n    else if (direction === 'desc') return <IcSortDesc className=\"size-3.5\" {...props} />;\n    else return <IcSortNone className=\"size-3.5\" {...props} />;\n}\n\nfunction getColumnHeaderText(column: Column<any, unknown>): string {\n    const resourceFormatter = useResourceFormatter();\n    const headerDef = column.columnDef.header;\n    return typeof headerDef === 'string' ? headerDef : resourceFormatter(column.id);\n}\n\n/**\n * Renders a cell value based on the displayType metadata\n * @param cell - The cell to render\n * @returns The formatted value as a React node\n */\nfunction renderCellByDisplayType(cell: Cell<any, any>): React.ReactNode {\n    const displayType = cell.column.columnDef.meta?.displayType;\n    const value = cell.getValue();\n\n    if (value === null || value === undefined) {\n        return null;\n    }\n\n    switch (displayType) {\n        case 'date':\n            return <span className=\"tabular-nums\">{formatDate(value)}</span>;\n        case 'number':\n            return <span className=\"block text-right tabular-nums\">{formatNumber(value)}</span>;\n        case 'boolean':\n            return (\n                <Badge variant={Boolean(value) ? 'success' : 'destructive'} className=\"capitalize\">\n                    {String(value)}\n                </Badge>\n            );\n        case 'badge':\n            return <Badge>{String(value)}</Badge>;\n        case 'tags':\n            let items: string[] = !Array.isArray(value) ? [String(value)] : value;\n            return (\n                <TagGroup items={items.map(item => ({ id: item, name: item }))} className=\"!flex-nowrap\">\n                    {item => <Tag>{item.name}</Tag>}\n                </TagGroup>\n            );\n        case 'progressBar':\n            const [currentValue, maxValue] = value;\n            return (\n                <ProgressBar\n                    meterClassName=\"w-16\"\n                    label={`${currentValue}/${maxValue}`}\n                    minValue={0}\n                    maxValue={maxValue}\n                    value={currentValue}\n                />\n            );\n        case 'country':\n            return <CountryName value={value} />;\n        case 'enum':\n            return <span className=\"uppercase w-full\">{String(value)}</span>;\n        case 'fileSize':\n            return formatFilesize(value);\n        case 'days':\n            return formatDays(value);\n        case 'os':\n            return ALL_OS[value as keyof typeof ALL_OS] ?? value;\n        case 'licenseType':\n            return ALL_LICENSE_TYPES[value as string] ?? value;\n        case 'subscriptionInterval':\n            return Duration.formatISODuration(value);\n        case 'subscriptionStartTrigger':\n            return getSubscriptionStartTriggerLabel(value);\n        default:\n            return String(value);\n    }\n}\n\nfunction HeaderText({ header }: { header: Header<any, unknown> }) {\n    const headerDef = header.column.columnDef.header;\n\n    if (typeof headerDef === 'string' || !headerDef) {\n        return getColumnHeaderText(header.column);\n    }\n\n    if (typeof headerDef === 'function') {\n        const result = headerDef(header.getContext());\n        if (typeof result === 'string') {\n            return getColumnHeaderText(header.column);\n        }\n        return flexRender(headerDef, header.getContext());\n    }\n\n    return flexRender(headerDef, header.getContext());\n}\n\n// TODO, automate checking valid HTML\nfunction TableContent({ className }: React.ComponentProps<typeof TableComponent>) {\n    const { tanTable, onRowNavigate } = useDataTable();\n    const tableCellStyle = (isSticky: boolean, className?: string, zIndex: string = 'z-50') =>\n        classNames(\n            'text-left body-sm font-medium whitespace-nowrap',\n            isSticky && `sticky right-0 ${zIndex} text-center justify-center`,\n            className\n        );\n    return (\n        <TableComponent className={classNames('table-auto border-0', className)}>\n            <TableHeader className=\"sticky top-0 z-10 rounded-lg border-stroke-secondary!\">\n                {tanTable.getHeaderGroups().map(headerGroup => (\n                    <TableRow key={headerGroup.id} className=\"border-stroke-secondary!\">\n                        {headerGroup.headers.map(header => (\n                            <TableHead\n                                scope=\"col\"\n                                key={header.id}\n                                colSpan={header.colSpan}\n                                className={tableCellStyle(header.id === ACTIONS_COLUMN_ID, 'bg-surface-secondary')}\n                            >\n                                {!header.column.getCanSort() && !header.isPlaceholder && (\n                                    <div\n                                        className={classNames(\n                                            'w-full flex items-center gap-1 text-xs uppercase font-semibold text-text-secondary',\n                                            header.id === ACTIONS_COLUMN_ID ? 'justify-center' : 'justify-start'\n                                        )}\n                                    >\n                                        <HeaderText header={header} />\n                                    </div>\n                                )}\n                                {header.column.getCanSort() && (\n                                    <Button\n                                        variant=\"ghost\"\n                                        size={'none'}\n                                        className={classNames(\n                                            'w-full p-1 rounded-md uppercase text-text-secondary text-xs font-semibold',\n                                            header.id === ACTIONS_COLUMN_ID ? 'justify-center' : 'justify-start',\n                                            header.column.getIsSorted() ? 'text-primary' : ''\n                                        )}\n                                        onPress={header.column.getToggleSortingHandler()}\n                                    >\n                                        <span>\n                                            <HeaderText header={header} />\n                                        </span>\n                                        {header.column.getIsSorted() && (\n                                            <SortIcon direction={header.column.getIsSorted()} />\n                                        )}\n                                    </Button>\n                                )}\n                            </TableHead>\n                        ))}\n                    </TableRow>\n                ))}\n            </TableHeader>\n            <TableBody>\n                {tanTable.getRowModel().rows.map(row => (\n                    <TableRow\n                        className={classNames(\n                            'group border-stroke-secondary! bg-surface-primary hover:not-data-[selected=true]:bg-surface-secondary data-[selected=true]:bg-surface-tertiary',\n                            onRowNavigate && 'cursor-pointer focus-visible:outline focus-visible:outline-ring'\n                        )}\n                        key={row.id}\n                        data-selected={row.getIsSelected()}\n                        {...(onRowNavigate && {\n                            role: 'link',\n                            tabIndex: 0,\n                            onClick: (e: React.MouseEvent<HTMLTableRowElement>) => {\n                                if (\n                                    (e.target as Element).closest('a, button, input, select, textarea, [role=\"button\"]')\n                                )\n                                    return;\n                                onRowNavigate(row.original);\n                            },\n                            onKeyDown: (e: React.KeyboardEvent<HTMLTableRowElement>) => {\n                                if (e.key === 'Enter') onRowNavigate(row.original);\n                            },\n                        })}\n                    >\n                        {row.getVisibleCells().map(cell => {\n                            const isActionsColumn = cell.column.id === ACTIONS_COLUMN_ID;\n                            const cellContent = cell.column.columnDef.meta?.displayType\n                                ? renderCellByDisplayType(cell)\n                                : flexRender(cell.column.columnDef.cell, cell.getContext());\n\n                            return (\n                                <TableCell\n                                    key={cell.id}\n                                    className={classNames(\n                                        tableCellStyle(\n                                            isActionsColumn,\n                                            isActionsColumn\n                                                ? 'bg-surface-primary group-hover:not-group-data-[selected=true]:bg-surface-secondary group-data-[selected=true]:bg-surface-tertiary'\n                                                : '',\n                                            'z-1'\n                                        ),\n                                        isActionsColumn && 'flex justify-center items-center'\n                                    )}\n                                >\n                                    {cellContent}\n                                </TableCell>\n                            );\n                        })}\n                    </TableRow>\n                ))}\n            </TableBody>\n        </TableComponent>\n    );\n}\n\n/** Base properties shared by all table actions */\ntype ActionBase = {\n    label: string;\n    icon: CtxIcon;\n    tooltip?: string;\n    /** Optional button variant to pass through to Button (defaults to neutral) */\n    variant?: React.ComponentProps<typeof Button>['variant'];\n};\n\n/** Context provided to onPress functions in TableActions */\ntype ActionPressContext = {\n    event?: PressEvent;\n    openDialog: (c: React.ReactNode) => void;\n    closeDialog: () => void;\n    activeFilters?: Record<string, unknown>;\n};\n\nexport type NoResourceAction = ActionBase & {\n    resourceType: 'none';\n    isDisabled?: () => boolean;\n    onPress: (c: ActionPressContext) => void;\n};\n\nexport type SingleResourceAction<T> = Omit<ActionBase, 'label'> & {\n    resourceType: 'single';\n    /** Label function that receives row data for dynamic labels */\n    label: string | ((data: T) => React.ReactNode);\n    isDisabled?: (data: T) => boolean;\n    onPress: (c: ActionPressContext & { data: T }) => void;\n};\n\nexport type BulkResourceAction<T> = ActionBase & {\n    resourceType: 'multiple';\n    isDisabled?: (data: T[]) => boolean;\n    onPress: (c: ActionPressContext & { data: T[] }) => void;\n};\n\n/** Common table action type that works for both action and dialog types */\nexport type TableAction<T> = NoResourceAction | SingleResourceAction<T> | BulkResourceAction<T>;\n\nfunction isNoResourceAction<T>(item: TableAction<T>): item is NoResourceAction {\n    return item.resourceType === 'none';\n}\n\nfunction isSingleResourceAction<T>(item: TableAction<T>): item is SingleResourceAction<T> {\n    return item.resourceType === 'single';\n}\n\nfunction isBulkResourceAction<T>(item: TableAction<T>): item is BulkResourceAction<T> {\n    return item.resourceType === 'multiple';\n}\n\nexport type TableActionsProps<T> = {\n    /** Array of table actions to render */\n    readonly items: (NoResourceAction | BulkResourceAction<T>)[];\n    /** Whether the table is currently fetching data */\n    readonly isFetching?: boolean;\n    /** Additional class names applied to each action button */\n    readonly buttonClassName?: string;\n};\n\nfunction TableActions<T>({ items, isFetching, buttonClassName }: TableActionsProps<T>) {\n    const { openDialog, closeDialog } = useControlledDialog();\n    const { tanTable, mergedFilters } = useDataTable();\n\n    function getTableActionIsDisabled<T>(item: TableAction<T>, rows: T[]): boolean {\n        if (!item.isDisabled) return false;\n\n        if (isNoResourceAction(item)) {\n            return item.isDisabled();\n        } else if (isBulkResourceAction(item)) {\n            return item.isDisabled(rows);\n        }\n        return false;\n    }\n\n    const selectedRows = tanTable.getSelectedRowModel().rows.map(r => r.original);\n    return (\n        <>\n            {items.map((item, i) => {\n                const Icon = item.icon;\n                const isDisabled = getTableActionIsDisabled(item, selectedRows) || isFetching;\n\n                return (\n                    <Button\n                        key={`${item.label}-${i}`}\n                        aria-label={item.label}\n                        type=\"button\"\n                        isDisabled={isDisabled}\n                        className={classNames(\n                            'animate-in fade-in slide-in-from-right-15 duration-300 transition-transform',\n                            buttonClassName\n                        )}\n                        onPress={e => {\n                            const context = { event: e, openDialog, closeDialog, activeFilters: mergedFilters };\n                            // TableActions only has Bulk actions and NoResource actions\n                            if (isNoResourceAction(item)) {\n                                item.onPress(context);\n                            } else if (isBulkResourceAction(item)) {\n                                item.onPress({ ...context, data: selectedRows });\n                            }\n                        }}\n                        variant={item.variant ?? 'neutral'}\n                    >\n                        {Icon && <Icon aria-hidden />}\n                        <span>{item.label}</span>\n                    </Button>\n                );\n            })}\n        </>\n    );\n}\n\nfunction TableActionsRowMenu<T>({\n    label,\n    items,\n    data,\n}: {\n    readonly label: React.ReactNode;\n    readonly items: SingleResourceAction<T>[];\n    readonly data: T;\n}) {\n    const { openDialog, closeDialog } = useControlledDialog();\n    const { mergedFilters } = useDataTable();\n    if (items.length < 5) {\n        return (\n            <div className=\"flex items-center\">\n                {items.map((it, i) => {\n                    const Icon = it.icon;\n                    const itemLabel = typeof it.label === 'function' ? it.label(data) : it.label;\n                    return (\n                        <TooltipTrigger key={`${i}-${typeof itemLabel === 'string' ? itemLabel : ''}`}>\n                            <Button\n                                aria-label={typeof itemLabel === 'string' ? itemLabel : undefined}\n                                isDisabled={it.isDisabled?.(data) ?? false}\n                                variant=\"ghost\"\n                                size=\"icon\"\n                                onPress={() => {\n                                    const context = { openDialog, closeDialog };\n                                    it.onPress({ ...context, data, activeFilters: mergedFilters });\n                                }}\n                            >\n                                <Icon className=\"size-icon\" />\n                            </Button>\n                            <Tooltip>{itemLabel}</Tooltip>\n                        </TooltipTrigger>\n                    );\n                })}\n            </div>\n        );\n    }\n\n    return (\n        <EasyMenu withChevron={false} aria-label=\"Actions\" label={label} size={'icon'}>\n            {items.map((it, i) => {\n                const Icon = it.icon;\n                const label = typeof it.label === 'function' ? it.label(data) : it.label;\n                return (\n                    <MenuItem\n                        key={`${i}-${typeof label === 'string' ? label : ''}`}\n                        id={typeof label === 'string' ? label : undefined}\n                        isDisabled={it.isDisabled?.(data) ?? false}\n                        onAction={() => {\n                            const context = { openDialog, closeDialog };\n                            if (isSingleResourceAction(it)) {\n                                it.onPress({ ...context, data, activeFilters: mergedFilters });\n                            }\n                        }}\n                    >\n                        <Icon className=\"size-icon\" />\n                        {label}\n                    </MenuItem>\n                );\n            })}\n        </EasyMenu>\n    );\n}\n","'use client';\nimport type { operations } from '@cryptlex/web-api-types/develop';\nimport { getLocalTimeZone, parseAbsolute, type ZonedDateTime } from '@internationalized/date';\nimport { useEffect, useRef, useState } from 'react';\nimport { Pressable } from 'react-aria-components';\nimport { Button } from '../components/button';\nimport { useDataTable } from '../components/data-table';\nimport { DatePicker } from '../components/date-picker';\nimport { EasyMenu, Menu, MenuHeader, MenuItem, MenuPopover, MenuTrigger } from '../components/menu';\nimport { MultiSelect, type MultiSelectProps } from '../components/multi-select';\nimport { NumberField } from '../components/numberfield';\nimport { Popover, PopoverTrigger } from '../components/popover';\nimport { SelectTrigger } from '../components/select';\nimport type { SelectOption } from '../components/select-options';\nimport { TextField } from '../components/textfield';\nimport { formatDate } from '../utilities/date';\nimport { useProjectName, useResourceFormatter, type ApiFilters } from '../utilities/resources';\nimport { classNames } from '../utilities/theme';\nimport { DialogBody, DialogFooter, DialogHeader, DialogTitle, useControlledDialog } from './dialog';\nimport { IcAccount, IcCheck, IcClose, IcDate, IcFile, IcFilter, IcLicense, IcMinus, type CtxIcon } from './icons';\nimport { MultipleIdSearchInput } from './id-search';\nimport { useIsMobile } from '../utilities/use-mobile';\n\nexport const FILTER_COMPARISON_OPERATORS = [\n    'eq',\n    'ne',\n    'cn',\n    'nc',\n    'sw',\n    'ew',\n    'in',\n    'nin',\n    'gt',\n    'gte',\n    'lt',\n    'lte',\n    'between',\n] as const;\nexport type FilterComparisonOperator = (typeof FILTER_COMPARISON_OPERATORS)[number];\n\nexport const COMPARISON_OPERATOR_LABELS: Record<FilterComparisonOperator, string> = {\n    eq: 'equal to',\n    ne: 'not equal to',\n    cn: 'contains',\n    nc: 'does not contain',\n    sw: 'starts with',\n    ew: 'ends with',\n    in: 'includes',\n    nin: 'does not include',\n    gt: 'greater than',\n    gte: 'greater than or equal to',\n    lt: 'less than',\n    lte: 'less than or equal to',\n    between: 'between',\n};\n\nconst COMPARISON_OPERATOR_SHORT_LABELS: Record<FilterComparisonOperator, string> = {\n    eq: '=',\n    ne: '≠',\n    cn: 'contains',\n    nc: '!contains',\n    sw: 'starts with',\n    ew: 'ends with',\n    in: 'in',\n    nin: 'not in',\n    gt: '>',\n    gte: '≥',\n    lt: '<',\n    lte: '≤',\n    between: '↔',\n};\n\ntype BaseLocalFilter<T extends FilterType, V> = {\n    id: string;\n    type: T;\n    property: string;\n    operator: FilterComparisonOperator;\n    value: V | undefined;\n    displayValue?: string;\n    /** If false, the filter chip is shown in the UI but not sent as a query parameter. Becomes true once the user edits the value. */\n    active?: boolean;\n    /** If true, clearing the filter resets it to preview state instead of removing it. */\n    isPreview?: boolean;\n    /** If false, the filter is sent as `property=value` without an operator. UI only shows \"equal to\". Always false for bool filters. */\n    needOperator?: boolean;\n};\ntype EnumLocalFilter = BaseLocalFilter<'enum', Set<string | number>>;\ntype IdLocalFilter = BaseLocalFilter<'id', string>;\ntype BoolLocalFilter = BaseLocalFilter<'bool', boolean>;\ntype StringLocalFilter = BaseLocalFilter<'string', string>;\ntype NumberLocalFilter = BaseLocalFilter<'number', number>;\n// DatePicker accepts a string, and converts it to a ZonedDateTime. Between operator uses [from, to] tuple.\ntype DateLocalFilter = BaseLocalFilter<'date', string | [string, string]>;\ntype IdSearchLocalFilter = BaseLocalFilter<'id-search', string[]>;\n// Single-choice filter. Typically used for virtual/computed filters (see FilterConfig['toApiQuery']).\ntype DerivedSelectLocalFilter = BaseLocalFilter<'derived-select', string>;\n// TODO, entitlementSets.productIds\nfunction createNewFilter(property: string, config: FilterConfig): TableFilter {\n    const type = config.type;\n    const id = `${property}-${Date.now()}`;\n    // Bool and derived-select filters never send an operator\n    const resolvedNeedOperator = type === 'bool' || type === 'derived-select' ? false : (config.needOperator ?? true);\n    const operator = resolvedNeedOperator ? FilterOperations[type][0] : 'eq';\n    const base = { id, property, operator, needOperator: resolvedNeedOperator };\n\n    switch (type) {\n        case 'bool':\n            return { ...base, type, value: true };\n        case 'derived-select':\n            return { ...base, type, value: config.options[0]?.id ?? '' };\n        case 'string':\n            return { ...base, type, value: '' };\n        case 'date':\n            return {\n                ...base,\n                type,\n                value:\n                    operator === 'between'\n                        ? ([new Date().toISOString(), new Date().toISOString()] as [string, string])\n                        : new Date().toISOString(),\n            };\n        case 'id':\n            return { ...base, type, value: '' };\n        case 'id-search':\n            return { ...base, type, value: [] };\n        case 'enum':\n            return { ...base, type, value: new Set<string | number>() };\n        case 'number':\n            return { ...base, type, value: 0 };\n    }\n}\n\nexport type TableFilter =\n    | EnumLocalFilter\n    | IdLocalFilter\n    | BoolLocalFilter\n    | StringLocalFilter\n    | DateLocalFilter\n    | IdSearchLocalFilter\n    | NumberLocalFilter\n    | DerivedSelectLocalFilter;\n\nexport type FilterConfig = (\n    | { type: 'enum'; options: MultiSelectProps['items'] }\n    | ({ type: 'id-search' } & Pick<\n          React.ComponentProps<typeof MultipleIdSearchInput>,\n          'accessor' | 'path' | 'defaultParams'\n      >)\n    | { type: 'id' }\n    | { type: 'bool' }\n    | { type: 'string' }\n    | { type: 'date' }\n    | { type: 'number' }\n    | {\n          type: 'derived-select';\n          options: SelectOption[];\n          /**\n           * Maps the selected option's id to real API query params. Required for `derived-select` filters,\n           * since they're meant for virtual/computed properties that don't map 1:1 to an API filter property\n           * (e.g. a \"status\" filter derived from several boolean properties like `revoked`/`expired`).\n           */\n          toApiQuery: (value: string) => Record<string, unknown>;\n      }\n) & {\n    /**\n     * When false, the filter is sent as `property=value` instead of `property[operator]=value`,\n     * and the UI locks the operator to \"equal to\". Defaults to true. Bool and derived-select filters are always treated as false.\n     */\n    needOperator?: boolean;\n};\n\nexport type FilterType = FilterConfig['type'];\n\nconst FilterOperations: Record<FilterType, FilterComparisonOperator[]> = {\n    bool: ['eq'],\n    'derived-select': ['eq'],\n    enum: ['in', 'nin'],\n    id: ['in', 'nin'],\n    'id-search': ['in', 'nin'],\n    string: ['eq', 'ne', 'cn', 'nc', 'sw', 'ew', 'in', 'nin'],\n    date: ['between', 'lt', 'gt'],\n    number: ['eq', 'ne', 'gt', 'gte', 'lt', 'lte'],\n};\n\n// TS workaround to get rid of filterConfig: Required<Record<never, FilterConfig>>\nexport type FiltersConfig<TOperation extends keyof operations> = [keyof ApiFilters<TOperation>] extends [never]\n    ? Record<string, FilterConfig>\n    : Required<Record<keyof ApiFilters<TOperation>, FilterConfig>>;\n\ntype FilterUpdate = { operator?: FilterComparisonOperator; value?: TableFilter['value'] };\n\n// Normalizes date filter values when the operator changes: \"between\" needs a [from, to] tuple,\n// every other date operator needs a single value.\nfunction resolveFilterValue(f: TableFilter, updates: FilterUpdate) {\n    let value = updates.value !== undefined ? updates.value : f.value;\n    const newOperator = updates.operator ?? f.operator;\n    if (f.type === 'date' && updates.operator !== undefined) {\n        if (newOperator === 'between' && !Array.isArray(value)) {\n            const str = typeof value === 'string' ? value : new Date().toISOString();\n            value = [str, str];\n        } else if (newOperator !== 'between' && Array.isArray(value)) {\n            value = value[0] ?? new Date().toISOString();\n        }\n    }\n    return value;\n}\n\n// Shared filter mutations, used by both the desktop chip row and the mobile dialog so they stay in sync\n// with the single `useDataTable()` state instead of each keeping their own copy of this logic.\nfunction useFilterActions() {\n    const { setFilters, filterConfig } = useDataTable();\n\n    // Updates the filter for `property` if one exists, otherwise creates and adds it.\n    const updateFilter = (property: string, updates: FilterUpdate) => {\n        setFilters(prev => {\n            const base = prev.find(f => f.property === property) ?? createNewFilter(property, filterConfig[property]);\n            const updated = {\n                ...base,\n                ...updates,\n                value: resolveFilterValue(base, updates),\n                active: true,\n            } as TableFilter;\n            return prev.some(f => f.id === base.id)\n                ? prev.map(f => (f.id === base.id ? updated : f))\n                : [...prev, updated];\n        });\n    };\n\n    // No-op if `id` isn't in state yet (e.g. a filter that was never edited).\n    const removeFilter = (id: string) => {\n        setFilters(prev => {\n            const filter = prev.find(f => f.id === id);\n            if (!filter) return prev;\n            if (filter.isPreview) {\n                return prev.map(f =>\n                    f.id === id\n                        ? {\n                              ...createNewFilter(f.property, filterConfig[f.property]),\n                              active: false,\n                              isPreview: true,\n                          }\n                        : f\n                );\n            }\n            return prev.filter(f => f.id !== id);\n        });\n    };\n\n    const clearAllFilters = () => {\n        setFilters(prev =>\n            prev\n                .filter(f => f.isPreview)\n                .map(f => ({\n                    ...createNewFilter(f.property, filterConfig[f.property]),\n                    active: false,\n                    isPreview: true,\n                }))\n        );\n    };\n\n    return { updateFilter, removeFilter, clearAllFilters };\n}\n\nfunction getFilterValueSummary(filter: TableFilter, filterConfig: Record<string, FilterConfig>): string {\n    switch (filter.type) {\n        case 'string':\n        case 'id':\n            return filter.value ?? '';\n        case 'number':\n            return filter.value?.toString() ?? '';\n        case 'bool':\n            return filter.value ? 'true' : 'false';\n        case 'derived-select': {\n            const config = filterConfig[filter.property];\n            if (!config || config.type !== 'derived-select') return filter.value ?? '';\n            const option = config.options.find(o => o.id === filter.value);\n            return typeof option?.label === 'string' ? option.label : (filter.value ?? '');\n        }\n        case 'date':\n            if (Array.isArray(filter.value)) {\n                const [from, to] = filter.value;\n                return `${formatDate(from, { dateStyle: 'short' }) ?? ''} – ${formatDate(to, { dateStyle: 'short' }) ?? ''}`;\n            }\n            return filter.value ? (formatDate(filter.value, { dateStyle: 'short' }) ?? '') : '';\n        case 'enum':\n            return filter.value && filter.value.size > 0 ? `${filter.value.size} selected` : '';\n        case 'id-search':\n            return filter.value && filter.value.length > 0\n                ? filter.value.length === 1\n                    ? '1 item'\n                    : `${filter.value.length} items`\n                : '';\n    }\n}\n\nfunction FilterValueInput({\n    filter,\n    filterConfig,\n    onChange,\n}: {\n    filter: TableFilter;\n    filterConfig: Record<string, FilterConfig>;\n    onChange: (value: TableFilter['value']) => void;\n}) {\n    if (filter.type === 'string' || filter.type === 'id') {\n        return (\n            <TextField\n                autoFocus\n                value={filter.value ?? ''}\n                onChange={onChange as (v: string) => void}\n                aria-label=\"Filter value\"\n            />\n        );\n    }\n\n    if (filter.type === 'number') {\n        return (\n            <NumberField\n                autoFocus\n                value={filter.value}\n                onChange={onChange as (v: number) => void}\n                aria-label=\"Filter value\"\n            />\n        );\n    }\n\n    if (filter.type === 'date') {\n        if (filter.operator === 'between') {\n            const [fromStr, toStr] = Array.isArray(filter.value)\n                ? filter.value\n                : [new Date().toISOString(), new Date().toISOString()];\n            const from = parseAbsolute(fromStr, getLocalTimeZone());\n            const to = parseAbsolute(toStr, getLocalTimeZone());\n            return (\n                <div className=\"flex flex-col gap-icon\">\n                    <DatePicker<ZonedDateTime>\n                        autoFocus\n                        hideTimeZone\n                        label=\"From\"\n                        value={from}\n                        onChange={v => onChange([v ? v.toAbsoluteString() : fromStr, toStr])}\n                    />\n                    <DatePicker<ZonedDateTime>\n                        hideTimeZone\n                        label=\"To\"\n                        value={to}\n                        onChange={v => onChange([fromStr, v ? v.toAbsoluteString() : toStr])}\n                    />\n                </div>\n            );\n        }\n        const value =\n            filter.value && !Array.isArray(filter.value) ? parseAbsolute(filter.value, getLocalTimeZone()) : null;\n        return (\n            <DatePicker<ZonedDateTime>\n                autoFocus\n                hideTimeZone\n                value={value}\n                onChange={v => onChange(v ? v.toAbsoluteString() : new Date().toISOString())}\n                aria-label=\"Filter date\"\n            />\n        );\n    }\n\n    if (filter.type === 'enum') {\n        const config = filterConfig[filter.property];\n        if (config.type !== 'enum') return null;\n        return (\n            <MultiSelect\n                autoFocus\n                items={config.options}\n                value={filter.value ?? new Set<string | number>()}\n                onChange={onChange as (v: Set<string | number>) => void}\n                aria-label=\"Filter value\"\n            />\n        );\n    }\n\n    if (filter.type === 'id-search') {\n        const config = filterConfig[filter.property];\n        if (config.type !== 'id-search') return null;\n        const defaultParams = config.defaultParams;\n        return (\n            <MultipleIdSearchInput\n                autoFocus\n                path={config.path}\n                accessor={config.accessor}\n                defaultParams={defaultParams}\n                value={filter.value ?? []}\n                onChange={onChange as (v: string[]) => void}\n                aria-label=\"Filter value\"\n            />\n        );\n    }\n\n    return null;\n}\n\nfunction FilterChip({\n    filter,\n    filterConfig,\n    resourceFormatter,\n    onRemove,\n    onUpdate,\n    isOpen,\n    onOpenChange,\n}: {\n    filter: TableFilter;\n    filterConfig: Record<string, FilterConfig>;\n    resourceFormatter: (key: string) => string;\n    onRemove: () => void;\n    onUpdate: (updates: FilterUpdate) => void;\n    isOpen?: boolean;\n    onOpenChange?: (isOpen: boolean) => void;\n}) {\n    // Operator is locked to \"equal to\" when the filter doesn't send one\n    const operators = filter.needOperator === false ? (['eq'] as const) : FilterOperations[filter.type];\n    const valueSummary = getFilterValueSummary(filter, filterConfig);\n\n    const project = useProjectName();\n    const isMobile = useIsMobile();\n\n    // Bool and derived-select filters always resolve to a single fixed operator (\"equal to\") and their\n    // value is one choice from a flat list, so the chip shows the selected value itself (not the\n    // property name), and the dropdown carries the property name as its title instead.\n    const isDirectMenu = filter.type === 'bool' || filter.type === 'derived-select';\n\n    const chipButton = isMobile ? (\n        <div className=\"flex flex-col gap-1\">\n            <span className=\"body-sm text-muted\">{resourceFormatter(filter.property)}</span>\n            <SelectTrigger type=\"button\" className=\"w-full\" aria-label={resourceFormatter(filter.property)}>\n                {valueSummary}\n            </SelectTrigger>\n        </div>\n    ) : (\n        <Button\n            type=\"button\"\n            variant={filter.active === false ? 'neutral' : 'primary_neutral'}\n            className={'animate-in slide-in-from-left-10 fade-in flex justify-between gap-2'}\n        >\n            <IcFilter />\n            {isDirectMenu ? (\n                <span className=\"font-medium\">{valueSummary}</span>\n            ) : (\n                <>\n                    <span className=\"font-medium\">{resourceFormatter(filter.property)}</span>\n                    {project !== 'customer-portal' && <span>{COMPARISON_OPERATOR_SHORT_LABELS[filter.operator]}</span>}\n                    {project !== 'customer-portal' && valueSummary && <span>{valueSummary}</span>}\n                </>\n            )}\n            {filter.active !== false && (\n                <Pressable onPress={() => onRemove()}>\n                    <span className=\"bg-primary hover:bg-destructive rounded-full size-icon flex justify-center items-center\">\n                        <IcClose className=\"size-2.5 text-surface-primary\" />\n                    </span>\n                </Pressable>\n            )}\n        </Button>\n    );\n\n    if (isDirectMenu) {\n        let options: SelectOption[];\n        let selectedKey: string;\n        if (filter.type === 'bool') {\n            options = [\n                { id: 'true', label: 'True' },\n                { id: 'false', label: 'False' },\n            ];\n            selectedKey = filter.value ? 'true' : 'false';\n        } else {\n            const config = filterConfig[filter.property];\n            options = config?.type === 'derived-select' ? config.options : [];\n            selectedKey = filter.value ?? '';\n        }\n\n        return (\n            <MenuTrigger isOpen={isOpen} onOpenChange={onOpenChange}>\n                <div className=\"relative\">{chipButton}</div>\n                <MenuPopover className=\"min-w-48\">\n                    <MenuHeader inset separator={false}>\n                        {resourceFormatter(filter.property)}\n                    </MenuHeader>\n                    <Menu\n                        selectionMode=\"single\"\n                        disallowEmptySelection\n                        selectedKeys={new Set([selectedKey])}\n                        onSelectionChange={keys => {\n                            if (keys === 'all') return;\n                            const key = keys.values().next().value as string | number | undefined;\n                            if (key == null) return;\n                            onUpdate({ value: filter.type === 'bool' ? String(key) === 'true' : String(key) });\n                        }}\n                        aria-label=\"Filter value\"\n                    >\n                        {options.map(option => (\n                            <MenuItem key={option.id} id={option.id}>\n                                {option.label}\n                            </MenuItem>\n                        ))}\n                    </Menu>\n                </MenuPopover>\n            </MenuTrigger>\n        );\n    }\n\n    return (\n        <PopoverTrigger isOpen={isOpen} onOpenChange={onOpenChange}>\n            <div className=\"relative\">{chipButton}</div>\n            <Popover className=\"p-icon min-w-48\">\n                <div className=\"flex flex-col gap-icon\">\n                    {operators.length > 1 && (\n                        <EasyMenu\n                            label={COMPARISON_OPERATOR_LABELS[filter.operator]}\n                            variant=\"neutral\"\n                            aria-label=\"Change operator\"\n                        >\n                            {operators.map(op => (\n                                <MenuItem key={op} onAction={() => onUpdate({ operator: op })}>\n                                    {COMPARISON_OPERATOR_LABELS[op]}\n                                </MenuItem>\n                            ))}\n                        </EasyMenu>\n                    )}\n                    <FilterValueInput\n                        filter={filter}\n                        filterConfig={filterConfig}\n                        onChange={value => onUpdate({ value })}\n                    />\n                    <Button\n                        type=\"button\"\n                        variant=\"neutral\"\n                        className={'self-end'}\n                        onPress={onRemove}\n                        aria-label={`Remove ${resourceFormatter(filter.property)} filter`}\n                    >\n                        Clear\n                    </Button>\n                </div>\n            </Popover>\n        </PopoverTrigger>\n    );\n}\n\nfunction MobileFilterDialogContent({ onApply }: { onApply: () => void }) {\n    const { filters, filterConfig } = useDataTable();\n    const resourceFormatter = useResourceFormatter();\n    const { updateFilter, removeFilter, clearAllFilters } = useFilterActions();\n    const [openProperty, setOpenProperty] = useState<string | null>(null);\n\n    return (\n        <>\n            <DialogHeader>\n                <DialogTitle>Filter</DialogTitle>\n            </DialogHeader>\n            <DialogBody className=\"flex flex-col gap-input\">\n                {Object.keys(filterConfig).map(key => {\n                    const filter = filters.find(f => f.property === key) ?? createNewFilter(key, filterConfig[key]);\n                    return (\n                        <FilterChip\n                            key={key}\n                            filter={filter}\n                            filterConfig={filterConfig}\n                            resourceFormatter={resourceFormatter}\n                            onRemove={() => removeFilter(filter.id)}\n                            onUpdate={updates => updateFilter(key, updates)}\n                            isOpen={openProperty === key}\n                            onOpenChange={open => setOpenProperty(open ? key : null)}\n                        />\n                    );\n                })}\n            </DialogBody>\n            <DialogFooter>\n                <Button\n                    variant=\"neutral\"\n                    onPress={() => {\n                        clearAllFilters();\n                        setOpenProperty(null);\n                    }}\n                >\n                    Clear All\n                </Button>\n                <Button variant=\"primary\" onPress={onApply}>\n                    Apply\n                </Button>\n            </DialogFooter>\n        </>\n    );\n}\n\nfunction MobileDataTableFilter({\n    className,\n    hasClearableFilters,\n    isDisabled,\n    onClearAll,\n    ...props\n}: React.ComponentProps<'section'> & {\n    hasClearableFilters: boolean;\n    isDisabled: boolean;\n    onClearAll: () => void;\n}) {\n    const { openDialog, closeDialog } = useControlledDialog();\n\n    return (\n        <section {...props} className={classNames('flex items-center', className)}>\n            <Button\n                variant={hasClearableFilters ? 'primary_neutral' : 'neutral'}\n                isDisabled={isDisabled}\n                aria-label=\"Filter\"\n                onPress={() => openDialog(<MobileFilterDialogContent onApply={closeDialog} />)}\n                className=\"min-w-0 flex-1\"\n            >\n                <IcFilter />\n                Filters\n                {hasClearableFilters && (\n                    <Pressable onPress={onClearAll}>\n                        <span className=\"animate-slide-in bg-primary hover:bg-destructive rounded-full size-icon flex justify-center items-center\">\n                            <IcClose className=\"size-2.5 text-surface-primary\" />\n                        </span>\n                    </Pressable>\n                )}\n            </Button>\n        </section>\n    );\n}\n\nexport function DataTableFilter({\n    className,\n    previewFilters,\n    ...props\n}: React.ComponentProps<'section'> & {\n    /** Keys from filterConfig to show as filter chips on mount, not applied until the user edits them. */\n    previewFilters?: string[];\n}) {\n    const { filters, query, setFilters, filterConfig } = useDataTable();\n    const isMobile = useIsMobile();\n    const resourceFormatter = useResourceFormatter();\n    const hasFilterConfig = Object.keys(filterConfig).length > 0;\n    const filterKeys = Object.keys(filterConfig)\n        .filter(k => !filters.some(f => f.property === k))\n        .sort();\n    const [openFilterId, setOpenFilterId] = useState<string | null>(null);\n\n    const initialized = useRef(false);\n    useEffect(() => {\n        if (!initialized.current && filters.length === 0) {\n            const toSet: TableFilter[] = [];\n            if (previewFilters && previewFilters.length > 0) {\n                toSet.push(\n                    ...previewFilters\n                        .filter(key => filterConfig[key])\n                        .map(key => ({\n                            ...createNewFilter(key, filterConfig[key]),\n                            active: false as const,\n                            isPreview: true as const,\n                        }))\n                );\n            }\n            if (toSet.length > 0) setFilters(toSet);\n        }\n        initialized.current = true;\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    const { updateFilter, removeFilter, clearAllFilters } = useFilterActions();\n\n    const addFilter = (property: string) => {\n        const newFilter = createNewFilter(property, filterConfig[property]);\n        setFilters([...filters, newFilter]);\n        setOpenFilterId(newFilter.id);\n    };\n\n    const hasClearableFilters = filters.some(f => !f.isPreview || f.active !== false);\n\n    const handleClearAll = () => {\n        clearAllFilters();\n        setOpenFilterId(null);\n    };\n\n    if (isMobile) {\n        if (!hasFilterConfig) return null;\n        return (\n            <MobileDataTableFilter\n                {...props}\n                className={className}\n                hasClearableFilters={hasClearableFilters}\n                isDisabled={query.isPending}\n                onClearAll={handleClearAll}\n            />\n        );\n    }\n\n    return (\n        <section {...props} className={classNames('flex flex-wrap gap-icon items-center', className)}>\n            {filters\n                .filter(filter => filter.property in filterConfig)\n                .map(filter => (\n                    <FilterChip\n                        key={filter.id}\n                        filter={filter}\n                        filterConfig={filterConfig}\n                        resourceFormatter={resourceFormatter}\n                        onRemove={() => removeFilter(filter.id)}\n                        onUpdate={updates => updateFilter(filter.property, updates)}\n                        isOpen={openFilterId === filter.id}\n                        onOpenChange={open => setOpenFilterId(open ? filter.id : null)}\n                    />\n                ))}\n\n            {filterKeys.length > 0 && (\n                <EasyMenu label={<IcFilter />} isDisabled={query.isPending} variant=\"neutral\" aria-label=\"Add filter\">\n                    {filterKeys.map(k => {\n                        const type = filterConfig[k].type;\n                        const Icon = FilterIcon[type];\n                        return (\n                            <MenuItem className={'!justify-between'} key={k} onAction={() => addFilter(k)}>\n                                {resourceFormatter(k)}\n                                <Icon />\n                            </MenuItem>\n                        );\n                    })}\n                </EasyMenu>\n            )}\n\n            {hasClearableFilters && (\n                <Button\n                    variant=\"ghost\"\n                    onPress={handleClearAll}\n                    aria-label=\"Clear all filters\"\n                    className=\"animate-in fade-in\"\n                >\n                    Clear All\n                </Button>\n            )}\n        </section>\n    );\n}\n\nconst FilterIcon: Record<FilterConfig['type'], CtxIcon> = {\n    'id-search': IcFile,\n    bool: IcCheck,\n    'derived-select': IcCheck,\n    date: IcDate,\n    enum: IcLicense,\n    id: IcAccount,\n    number: IcMinus,\n    string: IcCheck,\n};\n"],"mappings":"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"}
+{"version":3,"file":"data-table-filter.js","names":[],"sources":["../lib/components/data-table.tsx","../lib/components/data-table-filter.tsx"],"sourcesContent":["'use client';\nimport type { operations } from '@cryptlex/web-api-types/develop';\nimport {\n    closestCenter,\n    DndContext,\n    DragOverlay,\n    KeyboardSensor,\n    PointerSensor,\n    useSensor,\n    useSensors,\n} from '@dnd-kit/core';\nimport {\n    arrayMove,\n    SortableContext,\n    sortableKeyboardCoordinates,\n    useSortable,\n    verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { useInfiniteQuery, useQuery } from '@tanstack/react-query';\n\nimport {\n    type Column,\n    type ColumnDef,\n    type ColumnOrderState,\n    createColumnHelper,\n    flexRender,\n    getCoreRowModel,\n    type Header,\n    type PaginationState,\n    type RowData,\n    type RowSelectionState,\n    type SortingState,\n    type Updater,\n    useReactTable,\n    type VisibilityState,\n} from '@tanstack/react-table';\nimport { useLocalStorage } from '@uidotdev/usehooks';\nimport { merge } from 'lodash-es';\nimport React, { createContext, Fragment, useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport { Badge } from '../components/badge';\n\nimport { Button } from '../components/button';\nimport {\n    DataTableFilter,\n    type FilterConfig,\n    type FiltersConfig,\n    type TableFilter,\n} from '../components/data-table-filter';\nimport { Loader } from '../components/loader';\nimport { EasyMenu, MenuItem } from '../components/menu';\nimport { SearchField } from '../components/searchfield';\nimport { TableBody, TableCell, Table as TableComponent, TableHead, TableHeader, TableRow } from '../components/table';\nimport { CountryName } from '../utilities/countries';\nimport { formatDate } from '../utilities/date';\nimport { Duration } from '../utilities/duration';\nimport { formatDays, formatFilesize, formatNumber } from '../utilities/numbers';\nimport {\n    ALL_OS,\n    type ApiFilter,\n    type ApiPathParameters,\n    type ApiResponseBody,\n    type CtxResourceName,\n    useProjectName,\n    useResourceFormatter,\n} from '../utilities/resources';\nimport { pluralizeTimes } from '../utilities/string';\nimport { classNames } from '../utilities/theme';\nimport { useIsMobile } from '../utilities/use-mobile';\nimport { Checkbox } from './checkbox';\nimport { Tooltip, TooltipTrigger } from './tooltip';\n\nimport {\n    type CtxIcon,\n    IcColumns,\n    IcFirst,\n    IcGrip,\n    IcInfo,\n    IcLast,\n    IcLayoutGrid,\n    IcLeft,\n    IcMenu,\n    IcMoreVertical,\n    IcRefresh,\n    IcRight,\n    IcSortAsc,\n    IcSortDesc,\n    IcSortNone,\n} from './icons';\nimport { ALL_LICENSE_TYPES, getSubscriptionStartTriggerLabel } from './select-options';\n\nimport type { Cell, ColumnHelper } from '@tanstack/react-table';\nimport type { ClientPathsWithMethod } from 'openapi-fetch';\nimport type { PressEvent } from 'react-aria-components';\nimport { type CtxClientType, useCtxClient } from '../utilities/ctx-client';\nimport { ControlledDialogProvider, useControlledDialog } from './dialog';\nimport { ProgressBar } from './progress-bar';\nimport { Tag, TagGroup } from './tag-group';\n\nexport type DisplayType =\n    | 'string'\n    | 'boolean'\n    | 'date'\n    | 'number'\n    | 'enum'\n    | 'badge'\n    | 'tags'\n    | 'country'\n    | 'fileSize'\n    | 'days'\n    | 'os'\n    | 'licenseType'\n    | 'subscriptionInterval'\n    | 'subscriptionStartTrigger'\n    | 'progressBar';\n\ndeclare module '@tanstack/react-table' {\n    interface ColumnMeta<TData extends RowData, TValue> {\n        displayType: DisplayType;\n    }\n}\n\nfunction generateSortParam(sort: { id: string; desc: boolean } | undefined): string {\n    if (sort) {\n        if (sort.desc) {\n            return `-${sort.id}`;\n        } else {\n            return `+${sort.id}`;\n        }\n    } else {\n        return '-createdAt';\n    }\n}\n\nconst cH = createColumnHelper<any>();\nconst TABLE_CHECK_BOX_COLUMN = [\n    cH.accessor('checkbox', {\n        header: ({ table }) => (\n            <Checkbox\n                isIndeterminate={table.getIsSomeRowsSelected() && !table.getIsAllPageRowsSelected()}\n                isSelected={table.getIsAllPageRowsSelected() || table.getIsSomePageRowsSelected()}\n                onChange={() => table.toggleAllPageRowsSelected()}\n                aria-label=\"Select all\"\n                size=\"sm\"\n            />\n        ),\n\n        cell: ({ row }) => (\n            <Checkbox\n                isSelected={row.getIsSelected()}\n                onChange={() => row.toggleSelected()}\n                aria-label=\"Select row\"\n                size=\"sm\"\n            />\n        ),\n        enableSorting: false,\n        enableHiding: false,\n    }),\n];\n\nconst ACTIONS_COLUMN_ID = 'TableActions';\nfunction getActionsColumn<T extends object>(rowActions: SingleResourceAction<T>[]) {\n    if (rowActions.length === 0) return [];\n\n    return [\n        cH.accessor(ACTIONS_COLUMN_ID, {\n            header: 'Actions',\n            id: ACTIONS_COLUMN_ID,\n            enableHiding: false,\n            cell: ({ row }) => (\n                <TableActionsRowMenu\n                    label={<IcMoreVertical className=\"text-icon-primary\" />}\n                    data={row.original}\n                    items={rowActions}\n                />\n            ),\n            enableSorting: false,\n        }),\n    ];\n}\n\ntype DataTableFactoryBase<\n    T extends object,\n    TOperation extends keyof operations,\n    TFilterConfig extends FiltersConfig<TOperation> = FiltersConfig<TOperation>,\n> = {\n    path: NoInfer<ClientPathsWithMethod<CtxClientType, 'get'>>;\n    resourceName?: CtxResourceName;\n    pathParameters?: NoInfer<ApiPathParameters<TOperation>>;\n    queryParameters?: NoInfer<Partial<ApiFilter<TOperation>>>;\n    columns: ColumnDef<T, any>[];\n    tableActions: TableAction<T>[];\n    columnsToHideByDefault?: Partial<Record<keyof T, boolean>>; // Columns that are hidden by default\n    allowSelection?: boolean;\n    allowToolbar?: boolean;\n    filterConfig: TFilterConfig;\n    initialFilters: TableFilter[];\n    previewFilters?: (keyof TFilterConfig)[];\n    /** When provided, each row becomes a navigable link. Called with the row's data on click or Enter. */\n    onRowNavigate?: (row: T) => void;\n    /** Related resources to embed in list responses, e.g. `['users', 'organization']` → `?include=users,organization`. */\n    include?: string[];\n    /** Hides the table/card view toggle button even when both views are available. The initial view mode (or the mobile-forced card view) still applies. */\n    hideViewToggle?: boolean;\n};\n\ntype CardRenderer<T> = (\n    item: T,\n    actions: SingleResourceAction<T>[],\n    selection: CardSelectionProps,\n    index?: number\n) => React.ReactNode;\n\ntype DataTableFactory<\n    T extends object,\n    TOperation extends keyof operations,\n    TFilterConfig extends FiltersConfig<TOperation> = FiltersConfig<TOperation>,\n> = DataTableFactoryBase<T, TOperation, TFilterConfig> &\n    ({ disableTableView: true; Card: CardRenderer<T> } | { disableTableView?: false; Card?: CardRenderer<T> });\n\ntype DataTableState = {\n    sorting: SortingState;\n    pagination: PaginationState;\n};\n\nexport function getColumnHelper<O extends keyof operations>(): ColumnHelper<ApiResponseBody<O>> {\n    return createColumnHelper<ApiResponseBody<O>>();\n}\n/**\n * Hook for handling all data-table state. Used in DataTableContext\n */\nexport function useDataTableState<\n    T extends object,\n    TOperation extends keyof operations,\n    TFilterConfig extends FiltersConfig<TOperation> = FiltersConfig<TOperation>,\n>({\n    path,\n    resourceName,\n    pathParameters,\n    queryParameters,\n    columns,\n    filterConfig,\n    columnsToHideByDefault = {},\n    allowSelection = false,\n    allowToolbar = true,\n    initialFilters = [],\n    previewFilters,\n    tableActions,\n    Card,\n    onRowNavigate,\n    disableTableView,\n    hideViewToggle,\n    include,\n}: DataTableFactory<T, TOperation, TFilterConfig>) {\n    const [tableState, _setTableState] = useState<DataTableState>({\n        /** Reflect in URL in host application  */\n        pagination: { pageIndex: 0, pageSize: 20 }, // Pagination state\n        sorting: [], // Sorting state\n    });\n\n    const { sorting, pagination } = tableState;\n\n    const [searchQuery, setSearchQuery] = useState('');\n\n    const [rowSelection, setRowSelection] = useState<RowSelectionState>({});\n\n    /** Reflect in URL in host application  */\n    const [filters, setFilters] = useState(initialFilters);\n    const mergedFilters = useMemo(() => {\n        // TODO, generic transform fn\n        return filters\n            .filter(tf => tf.active !== false)\n            .map(tf => {\n                // Virtual filters (e.g. a \"status\" filter derived from several boolean properties) are\n                // expanded into real API query params via their filterConfig's toApiQuery.\n                if (tf.type === 'derived-select') {\n                    const config = (filterConfig as Record<string, FilterConfig>)[tf.property];\n                    return config?.type === 'derived-select' ? config.toApiQuery(String(tf.value ?? '')) : {};\n                }\n                // Enum filters store their selection as a Set; normalize to an array so it's\n                // joined into a comma-separated string like other multi-value filters instead of\n                // being passed through as a Set, which the API client's query serializer can't handle.\n                const value = tf.value instanceof Set ? Array.from(tf.value) : tf.value;\n                // Filters that don't need an operator are sent as `property=value`\n                if (tf.needOperator === false) {\n                    return {\n                        [tf.property]: Array.isArray(value) ? value.join(',') : value,\n                    };\n                }\n                if (tf.operator === 'between' && Array.isArray(value) && value.length === 2) {\n                    return {\n                        [tf.property]: {\n                            gte: value[0],\n                            lte: value[1],\n                        },\n                    };\n                }\n                if (Array.isArray(value)) {\n                    return {\n                        [tf.property]: {\n                            [tf.operator]: value.join(','),\n                        },\n                    };\n                }\n                return {\n                    [tf.property]: {\n                        [tf.operator]: value,\n                    },\n                };\n            })\n            .reduce((acc, current) => {\n                return merge(acc, current);\n            }, {});\n    }, [filters, filterConfig]);\n\n    const includeParam = include?.length ? include.join(',') : undefined;\n\n    // Page is deliberately excluded here: the card view's infinite query always starts from\n    // page 1 and accumulates pages, so its cache key must not depend on the table's pageIndex.\n    const sharedQueryParams = {\n        ...queryParameters,\n        ...mergedFilters,\n        limit: pagination.pageSize,\n        sort: generateSortParam(sorting[0]),\n        search: searchQuery,\n        ...(includeParam ? { include: includeParam } : {}),\n    };\n\n    const client = useCtxClient();\n    const tableQueryKey = ['get', path, { ...sharedQueryParams, page: pagination.pageIndex + 1 }, 'table'];\n    const cardQueryKey = ['get', path, sharedQueryParams, 'card'];\n\n    const prefsKey = `${path}_ctx`;\n    const [columnOrder, setColumnOrder] = useLocalStorage<ColumnOrderState>(`${prefsKey}_column_order_preference`, []);\n    const [columnVisibility, setColumnVisibility] = useLocalStorage<VisibilityState>(\n        `${prefsKey}_column_visibility_preference`,\n        {\n            id: false,\n            ...columnsToHideByDefault,\n        }\n    );\n    const [viewMode, setViewMode] = useLocalStorage<'table' | 'card'>(\n        `${prefsKey}_view_mode_preference`,\n        disableTableView ? 'card' : 'table'\n    );\n    // On mobile, always render cards (when a Card renderer is available) regardless of the user's saved preference.\n    const isMobile = useIsMobile();\n    const effectiveViewMode = disableTableView || (isMobile && Card) ? 'card' : viewMode;\n\n    // Update table state with new values\n    const updateTableState = (updates: Partial<DataTableState>) => {\n        _setTableState(prev => ({ ...prev, ...updates }));\n    };\n\n    async function fetchPage(pageParam: number) {\n        const res = await client.GET(path, {\n            params: {\n                query: {\n                    ...queryParameters,\n                    page: pageParam,\n                    limit: pagination.pageSize,\n                    sort: sharedQueryParams.sort,\n                    search: sharedQueryParams.search,\n                    ...(includeParam ? { include: includeParam } : {}),\n                    ...mergedFilters,\n                },\n                path: pathParameters as any,\n            },\n        });\n        return {\n            data: (res.data ?? []) as T[],\n            total: Number.parseInt(res.response.headers.get('Pagination-Count') || '0'),\n            nextPage: pageParam + 1,\n        };\n    }\n\n    const tableQuery = useQuery({\n        queryKey: tableQueryKey,\n        enabled: effectiveViewMode === 'table',\n        queryFn: () => fetchPage(pagination.pageIndex + 1),\n        placeholderData: prev => prev,\n    });\n\n    const infiniteQuery = useInfiniteQuery({\n        queryKey: cardQueryKey,\n        enabled: effectiveViewMode === 'card',\n        initialPageParam: 1,\n        queryFn: ({ pageParam }) => fetchPage(pageParam),\n        getNextPageParam: (lastPage, allPages) => {\n            const fetched = allPages.flatMap(p => p.data).length;\n            return fetched < lastPage.total ? lastPage.nextPage : undefined;\n        },\n    });\n\n    // Flatten data into a single array for tanStack table\n    const flatData = useMemo<T[]>(() => {\n        if (effectiveViewMode === 'table') return tableQuery.data?.data ?? [];\n        return infiniteQuery.data?.pages.flatMap(p => p.data) ?? [];\n    }, [effectiveViewMode, tableQuery.data, infiniteQuery.data]);\n\n    const total = useMemo(() => {\n        if (effectiveViewMode === 'table') return tableQuery.data?.total ?? 0;\n        return infiniteQuery.data?.pages[0]?.total ?? 0;\n    }, [effectiveViewMode, tableQuery.data, infiniteQuery.data]);\n\n    const query =\n        effectiveViewMode === 'table'\n            ? tableQuery\n            : {\n                  ...infiniteQuery,\n                  data: { data: flatData, total },\n                  isLoading: infiniteQuery.isLoading,\n                  isFetching: infiniteQuery.isFetching,\n                  isError: infiniteQuery.isError,\n                  error: infiniteQuery.error,\n                  refetch: infiniteQuery.refetch,\n              };\n\n    const rowActions = tableActions.filter(isSingleResourceAction);\n    /**\n     * ID,createdAt and updatedAt will be added by default for all tables\n     * If selection is allowed, checkbox will be added\n     * If the dto has metadata, dynamics columns for all the metadata key-value will be added(particular for a view)\n     * If there are actions for the table, they will be placed fixed at the right side of table.\n     */\n    const cols: ColumnDef<any, any>[] = [\n        ...(allowSelection ? TABLE_CHECK_BOX_COLUMN : []),\n        ...columns,\n        ...getActionsColumn<T>(rowActions ?? []),\n    ];\n\n    // Type-guard for updater\n    function isUpdaterFunction<T>(updater: Updater<T>): updater is (old: T) => T {\n        return typeof updater === 'function';\n    }\n    // Utility function to resolve updater\n    function resolveUpdater<T>(updater: Updater<T>, currentValue: T) {\n        if (isUpdaterFunction(updater)) {\n            return updater(currentValue);\n        }\n        return updater;\n    }\n\n    // Use react-table's hook to create the table instance\n    const tanTable = useReactTable({\n        data: flatData,\n        columns: cols,\n        getCoreRowModel: getCoreRowModel(),\n        rowCount: total,\n        manualPagination: true, // Handle pagination manually since pagination is done server side for data tables\n        onPaginationChange: updater => {\n            updateTableState({ pagination: resolveUpdater(updater, pagination) });\n        },\n        manualSorting: true, // Handle sorting manually since sorting is done server side for data tables\n        onSortingChange: updater => {\n            setRowSelection({});\n            updateTableState({ sorting: [...resolveUpdater(updater, sorting)] }); // Reset selection when sorting.\n        },\n        manualFiltering: true, // Handle filtering manually since filtering is done server side for data tables\n        onColumnVisibilityChange: updater => {\n            setColumnVisibility(resolveUpdater(updater, columnVisibility));\n        },\n        onRowSelectionChange: updater => {\n            setRowSelection(resolveUpdater(updater, rowSelection));\n        },\n        onColumnOrderChange: updater => {\n            setColumnOrder(resolveUpdater(updater, columnOrder));\n        },\n        state: {\n            sorting: sorting,\n            columnVisibility: columnVisibility,\n            pagination: pagination,\n            rowSelection: rowSelection,\n            columnOrder: columnOrder,\n        },\n        meta: {\n            refetch: query.refetch,\n        },\n    });\n\n    // By default, ColumnDef does not give guarantees of column.id existing. Once useReactTable is called, all columns are assigned IDs.\n    // This populates the columnIds in the columnOrder state\n    useEffect(() => {\n        const allIds = tanTable.getAllFlatColumns().map(c => c.id);\n        const middleIds = allIds.filter(id => id !== 'checkbox' && id !== ACTIONS_COLUMN_ID);\n        setColumnOrder(prevOrder => {\n            // Preserve any existing custom order for the non-special columns; append newly seen ones.\n            const preserved = prevOrder.filter(id => middleIds.includes(id));\n            const rest = middleIds.filter(id => !prevOrder.includes(id));\n            const orderedMiddle = preserved.length > 0 ? [...preserved, ...rest] : middleIds;\n            return [\n                ...(allIds.includes('checkbox') ? ['checkbox'] : []),\n                ...orderedMiddle,\n                ...(allIds.includes(ACTIONS_COLUMN_ID) ? [ACTIONS_COLUMN_ID] : []),\n            ];\n        });\n    }, []);\n\n    return {\n        tableState,\n        updateTableState,\n        query,\n        setSearchQuery,\n        searchQuery,\n        tanTable,\n        mergedFilters,\n        filters,\n        setFilters,\n        filterConfig,\n        tableActions,\n        pathParameters,\n        queryParameters,\n        viewMode: effectiveViewMode,\n        setViewMode,\n        Card,\n        allowSelection,\n        allowToolbar,\n        previewFilters,\n        infiniteQuery,\n        disableTableView,\n        hideViewToggle,\n        onRowNavigate,\n        resourceName,\n    } as const;\n}\n\nexport const DataTableContext = createContext<ReturnType<typeof useDataTableState> | null>(null);\n// TODO, don't export this\nexport function useDataTable() {\n    const ctx = useContext(DataTableContext);\n    if (!ctx) {\n        throw Error('DataTable should be used within DataTableProvider.');\n    }\n    return ctx;\n}\n\nexport function DataTableProvider<T extends object, TOperation extends keyof operations>({\n    children,\n    ...props\n}: { children: React.ReactNode } & ReturnType<typeof useDataTableState<T, TOperation>>) {\n    // @ts-expect-error, propogating the generic type further will be more complex. Since this is a tightly coupled type, it should be okay but reviewed whenever useDataTableState changes.\n    return <DataTableContext.Provider value={props}>{children}</DataTableContext.Provider>;\n}\n\nfunction EmptyMessage() {\n    const { query, resourceName, mergedFilters, searchQuery } = useDataTable();\n    const resourceFormatter = useResourceFormatter();\n    if (query.isFetching) return null;\n    if (query.isError)\n        return (\n            <span className=\"flex gap-3 items-center\">\n                <IcInfo className=\"text-icon-primary\" />\n                <span>{query.error?.message}</span>\n            </span>\n        );\n    if (query.data?.data?.length === 0) {\n        const resourceNamePlural = resourceName && pluralizeTimes(resourceFormatter(resourceName), 2).toLowerCase();\n        const hasActiveFilterOrSearch = Object.keys(mergedFilters).length > 0 || searchQuery.length > 0;\n        return (\n            <div className=\"text-center flex flex-col gap-2\">\n                <p className=\"font-semibold text-text-primary\">\n                    {resourceNamePlural ? `No ${resourceNamePlural} found.` : 'No results found.'}\n                </p>\n                {hasActiveFilterOrSearch && (\n                    <p className=\"text-text-secondary\">Adjust your filter or search request.</p>\n                )}\n            </div>\n        );\n    }\n    return <>Unknown error. Please contact customer support.</>;\n}\n\nfunction Content({ cardGridClassName }: { cardGridClassName?: string }) {\n    const { query, tanTable, viewMode, tableActions, Card } = useDataTable();\n    const cardActions = tableActions.filter(isSingleResourceAction);\n    const isCardView = viewMode === 'card' && !!Card;\n\n    if (query.isLoading)\n        return (\n            <div className=\"body-sm flex items-center justify-center min-h-32\">\n                <Loader />\n            </div>\n        );\n    if (tanTable.getRowModel().rows.length === 0)\n        return (\n            <div className=\"body-sm flex items-center justify-center min-h-32 text-muted\">\n                <EmptyMessage />\n            </div>\n        );\n    if (isCardView) return <CardGrid Card={Card!} actions={cardActions} className={cardGridClassName} />;\n    return <TableContent className=\"w-full\" />;\n}\n\nexport type DataTableProps = React.ComponentProps<'section'> & {\n    cardGridClassName?: string;\n};\nexport function DataTable({ className, cardGridClassName, ...props }: DataTableProps) {\n    const { viewMode, Card, allowToolbar } = useDataTable();\n    const isCardView = viewMode === 'card' && !!Card;\n\n    return (\n        <>\n            <ControlledDialogProvider>\n                {/* Table Actions Section */}\n                {allowToolbar && <Actions />}\n                <section\n                    {...props}\n                    className={classNames('z-20 flex flex-col', !isCardView ? 'border rounded-lg' : '', className)}\n                >\n                    {/* The div here is necessary because TableContent is internally a <table> tag and does not respect width, height CSS */}\n                    <div className=\"w-full overflow-auto relative rounded-t-lg [scrollbar-width:none]\" tabIndex={0}>\n                        <Content cardGridClassName={cardGridClassName} />\n                    </div>\n\n                    {/* Table Footer Section with Pagination and Column Picker */}\n                    {!isCardView && (\n                        <div className=\"flex w-full justify-between border-t gap-icon py-2 px-icon bg-surface-secondary rounded-b-lg overflow-x-auto\">\n                            <div className=\"flex gap-icon\">\n                                <ColumnPicker />\n                                <PageSize />\n                            </div>\n                            <Paginator />\n                        </div>\n                    )}\n                </section>\n            </ControlledDialogProvider>\n        </>\n    );\n}\n\nexport type CardSelectionProps = {\n    isSelected: boolean;\n    onToggle: () => void;\n    allowSelection: boolean;\n};\n\nfunction CardGrid<T>({\n    Card,\n    actions,\n    className,\n    ...props\n}: {\n    Card: CardRenderer<T>;\n    actions: SingleResourceAction<T>[];\n} & React.ComponentProps<'div'>) {\n    const { tanTable, allowSelection } = useDataTable();\n    const { infiniteQuery } = useDataTable(); // expose from context\n    const sentinelRef = useRef<HTMLDivElement>(null);\n\n    // Todo: virtualization, see https://tanstack.com/virtual/latest/docs/introduction\n    useEffect(() => {\n        const el = sentinelRef.current;\n        if (!el) return;\n\n        const observer = new IntersectionObserver(\n            entries => {\n                if (entries[0].isIntersecting && infiniteQuery.hasNextPage && !infiniteQuery.isFetchingNextPage) {\n                    infiniteQuery.fetchNextPage();\n                }\n            },\n            { threshold: 0.1 }\n        );\n\n        observer.observe(el);\n        return () => observer.disconnect();\n    }, [infiniteQuery.hasNextPage, infiniteQuery.isFetchingNextPage]);\n\n    return (\n        <div {...props} className={classNames(className, 'grid grid-cols-1 lg:grid-cols-2 gap-icon pb-input')}>\n            {tanTable.getRowModel().rows.map((row, index) => {\n                const selection: CardSelectionProps = {\n                    isSelected: row.getIsSelected(),\n                    onToggle: () => row.toggleSelected(),\n                    allowSelection,\n                };\n                return <Fragment key={row.id}>{Card(row.original, actions, selection, index)}</Fragment>;\n            })}\n\n            {/* Invisible sentinel at the bottom triggers next page fetch */}\n            <div ref={sentinelRef} className=\"col-span-full h-4 flex items-center justify-center\">\n                {infiniteQuery.isFetchingNextPage && <Loader />}\n            </div>\n        </div>\n    );\n}\n\n// TODO, ?include query param on Licenses, Activations and other future resources that need this\nfunction ColumnPicker() {\n    const projectName = useProjectName();\n\n    if (projectName === 'customer-portal') {\n        return null;\n    }\n\n    const { tanTable } = useDataTable();\n    const [activeId, setActiveId] = useState<string | null>(null);\n\n    const resourceFormatter = useResourceFormatter();\n\n    const sensors = useSensors(\n        useSensor(PointerSensor),\n        useSensor(KeyboardSensor, {\n            coordinateGetter: sortableKeyboardCoordinates,\n        })\n    );\n    return (\n        <DndContext\n            sensors={sensors}\n            collisionDetection={closestCenter}\n            onDragStart={event => {\n                const { active } = event;\n                setActiveId(active.id.toString());\n            }}\n            onDragEnd={event => {\n                const { active, over } = event;\n\n                if (over && active.id !== over.id) {\n                    const columnOrder = tanTable.getState().columnOrder;\n                    const oldIndex = columnOrder.indexOf(active.id.toString());\n                    const newIndex = columnOrder.indexOf(over.id.toString());\n                    tanTable.setColumnOrder([...arrayMove(columnOrder, oldIndex, newIndex)]);\n                }\n\n                setActiveId(null);\n            }}\n        >\n            <SortableContext items={tanTable.getState().columnOrder} strategy={verticalListSortingStrategy}>\n                <EasyMenu\n                    label={\n                        <>\n                            <IcColumns className=\"inline align-bottom me-1 text-icon-primary\" />\n                            Columns\n                        </>\n                    }\n                    selectionMode=\"multiple\"\n                    size={'sm'}\n                    items={tanTable.getAllFlatColumns()}\n                    // Using selectedKeys = 'all' does not mark MenuItems with isDisabled=true as selected. This is not the intended behaviour in this use-case.\n                    selectedKeys={tanTable.getVisibleFlatColumns().map(c => c.id)}\n                >\n                    <MenuItem onAction={() => tanTable.toggleAllColumnsVisible()} className={'italic'}>\n                        (select all)\n                    </MenuItem>\n                    {tanTable.getState().columnOrder.map(colId => {\n                        const col = tanTable.getAllFlatColumns().find(c => c.id === colId);\n                        // Don't show checkbox and actions columns in picker\n                        if (!col || col.id === 'checkbox' || col.id === ACTIONS_COLUMN_ID) return null;\n                        return <SortableItem key={col.id} column={col} />;\n                    })}\n                </EasyMenu>\n                <DragOverlay>\n                    {activeId ? (\n                        <div className=\"opacity-70 border-2 border-primary\">{resourceFormatter(activeId)}</div>\n                    ) : null}\n                </DragOverlay>\n            </SortableContext>\n        </DndContext>\n    );\n\n    function SortableItem({ column }: { column: Column<any, unknown> }) {\n        const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: column.id });\n        const style = {\n            transform: CSS.Transform.toString(transform),\n            transition,\n            zIndex: '999',\n        };\n        return (\n            <MenuItem\n                ref={setNodeRef}\n                style={style}\n                {...attributes}\n                id={column.id}\n                onAction={() => column.toggleVisibility()}\n                isDisabled={!column.getCanHide()}\n                className=\"flex items-center\"\n            >\n                <IcGrip {...listeners} className=\"size-icon cursor-grab text-icon-primary\" />\n                {getColumnHeaderText(column)}\n                {column.getIsSorted() && <SortIcon className=\"size-icon\" direction={column.getIsSorted()} />}\n            </MenuItem>\n        );\n    }\n}\n\nfunction Paginator() {\n    const { tanTable } = useDataTable();\n    const rowCount = tanTable.getRowCount();\n    return (\n        <div className=\"flex items-center gap-2\">\n            <span className=\"whitespace-nowrap body-sm text-muted\">\n                {`${tanTable.getState().pagination.pageIndex * tanTable.getState().pagination.pageSize + 1} - ${Math.min(\n                    (tanTable.getState().pagination.pageIndex + 1) * tanTable.getState().pagination.pageSize,\n                    rowCount\n                )} of ${rowCount?.toLocaleString()}`}\n            </span>\n\n            {(tanTable.getCanNextPage() || tanTable.getCanPreviousPage()) && (\n                <>\n                    <Button\n                        aria-label=\"First page\"\n                        onPress={() => tanTable.firstPage()}\n                        isDisabled={!tanTable.getCanPreviousPage()}\n                        variant=\"neutral\"\n                        size={'icon-sm'}\n                    >\n                        <IcFirst />\n                    </Button>\n                    <Button\n                        aria-label=\"Previous page\"\n                        onPress={() => tanTable.previousPage()}\n                        isDisabled={!tanTable.getCanPreviousPage()}\n                        variant=\"neutral\"\n                        size={'icon-sm'}\n                    >\n                        <IcLeft />\n                    </Button>\n                    <Button\n                        aria-label=\"Next page\"\n                        onPress={() => tanTable.nextPage()}\n                        isDisabled={!tanTable.getCanNextPage()}\n                        variant=\"neutral\"\n                        size={'icon-sm'}\n                    >\n                        <IcRight />\n                    </Button>\n                    <Button\n                        aria-label=\"Last page\"\n                        onClick={() => tanTable.lastPage()}\n                        isDisabled={!tanTable.getCanNextPage()}\n                        variant=\"neutral\"\n                        size={'icon-sm'}\n                    >\n                        <IcLast />\n                    </Button>\n                </>\n            )}\n        </div>\n    );\n}\n\nfunction PageSize() {\n    const projectName = useProjectName();\n\n    if (projectName === 'customer-portal') {\n        return null;\n    }\n\n    const { tanTable } = useDataTable();\n    const PAGE_SIZES = [10, 20, 30, 40, 50];\n\n    return (\n        <EasyMenu\n            label={tanTable.getState().pagination.pageSize.toString()}\n            selectionMode=\"single\"\n            size={'sm'}\n            selectedKeys={[tanTable.getState().pagination.pageSize.toString()]}\n            items={PAGE_SIZES.map(s => ({ id: s.toString(), value: s }))}\n        >\n            {items => <MenuItem onAction={() => tanTable.setPageSize(items.value)}>{items.value}</MenuItem>}\n        </EasyMenu>\n    );\n}\n\nfunction Actions() {\n    const {\n        query,\n        tanTable,\n        searchQuery,\n        setSearchQuery,\n        tableActions,\n        viewMode,\n        setViewMode,\n        Card,\n        previewFilters,\n        disableTableView,\n        hideViewToggle,\n    } = useDataTable();\n    const hasSelectedRows = tanTable.getSelectedRowModel().rows.length > 0;\n    const isMobile = useIsMobile();\n\n    const filteredActions = tableActions\n        .filter(ta => ta.resourceType !== 'single')\n        .filter(ta => (ta.resourceType === 'multiple') === hasSelectedRows);\n\n    return (\n        <section className=\"flex justify-between my-0 mb-icon gap-icon overflow-x-auto py-1\">\n            <div className={classNames('flex gap-icon max-md:min-w-0 max-md:flex-1')}>\n                <Button\n                    aria-label=\"Refresh\"\n                    isPending={query.isFetching}\n                    onClick={() => query.refetch()}\n                    variant={'neutral'}\n                    size={'icon'}\n                    className={classNames('max-md:shrink-0')}\n                >\n                    <IcRefresh />\n                </Button>\n                <SearchField\n                    value={searchQuery}\n                    onChange={setSearchQuery}\n                    className={classNames('max-md:min-w-0 max-md:flex-1')}\n                />\n                <DataTableFilter previewFilters={previewFilters} className={classNames('max-md:shrink-0')} />\n            </div>\n\n            {/* On mobile, actions render in a bar fixed to the bottom of the screen instead of here. */}\n            {!isMobile && (\n                <div className=\"flex gap-icon\">\n                    <TableActions items={filteredActions} isFetching={query.isFetching} />\n                    {Card &&\n                        !disableTableView &&\n                        !hideViewToggle && ( // Only show view mode toggle button if a Card component was provided and table view is enabled\n                            <div className=\"flex gap-1 bg-surface-primary rounded-md overflow-hidden\">\n                                <Button\n                                    variant={viewMode === 'table' ? 'primary' : 'neutral'}\n                                    size=\"icon\"\n                                    onPress={() => setViewMode('table')}\n                                    aria-label=\"Table view\"\n                                    className=\"border-none\"\n                                >\n                                    <IcMenu />\n                                </Button>\n                                <Button\n                                    variant={viewMode === 'card' ? 'primary' : 'neutral'}\n                                    size=\"icon\"\n                                    onPress={() => setViewMode('card')}\n                                    aria-label=\"Card view\"\n                                    className=\"border-none\"\n                                >\n                                    <IcLayoutGrid />\n                                </Button>\n                            </div>\n                        )}\n                </div>\n            )}\n            {isMobile && filteredActions.length > 0 && (\n                <div className=\"fixed inset-x-0 bottom-0 z-30 flex gap-icon border-t bg-surface-primary p-icon\">\n                    <TableActions\n                        items={filteredActions}\n                        isFetching={query.isFetching}\n                        buttonClassName=\"flex-1 justify-center\"\n                    />\n                </div>\n            )}\n        </section>\n    );\n}\n\nfunction SortIcon({\n    direction,\n    ...props\n}: { direction: 'asc' | 'desc' | false } & Omit<React.ComponentProps<'svg'>, 'direction'>) {\n    if (direction === 'asc') return <IcSortAsc className=\"size-3.5\" {...props} />;\n    else if (direction === 'desc') return <IcSortDesc className=\"size-3.5\" {...props} />;\n    else return <IcSortNone className=\"size-3.5\" {...props} />;\n}\n\nfunction getColumnHeaderText(column: Column<any, unknown>): string {\n    const resourceFormatter = useResourceFormatter();\n    const headerDef = column.columnDef.header;\n    return typeof headerDef === 'string' ? headerDef : resourceFormatter(column.id);\n}\n\n/**\n * Renders a cell value based on the displayType metadata\n * @param cell - The cell to render\n * @returns The formatted value as a React node\n */\nfunction renderCellByDisplayType(cell: Cell<any, any>): React.ReactNode {\n    const displayType = cell.column.columnDef.meta?.displayType;\n    const value = cell.getValue();\n\n    if (value === null || value === undefined) {\n        return null;\n    }\n\n    switch (displayType) {\n        case 'date':\n            return <span className=\"tabular-nums\">{formatDate(value)}</span>;\n        case 'number':\n            return <span className=\"block text-right tabular-nums\">{formatNumber(value)}</span>;\n        case 'boolean':\n            return (\n                <Badge variant={Boolean(value) ? 'success' : 'destructive'} className=\"capitalize\">\n                    {String(value)}\n                </Badge>\n            );\n        case 'badge':\n            return <Badge>{String(value)}</Badge>;\n        case 'tags':\n            let items: string[] = !Array.isArray(value) ? [String(value)] : value;\n            return (\n                <TagGroup items={items.map(item => ({ id: item, name: item }))} className=\"!flex-nowrap\">\n                    {item => <Tag>{item.name}</Tag>}\n                </TagGroup>\n            );\n        case 'progressBar':\n            const [currentValue, maxValue] = value;\n            return (\n                <ProgressBar\n                    meterClassName=\"w-16\"\n                    label={`${currentValue}/${maxValue}`}\n                    minValue={0}\n                    maxValue={maxValue}\n                    value={currentValue}\n                />\n            );\n        case 'country':\n            return <CountryName value={value} />;\n        case 'enum':\n            return <span className=\"uppercase w-full\">{String(value)}</span>;\n        case 'fileSize':\n            return formatFilesize(value);\n        case 'days':\n            return formatDays(value);\n        case 'os':\n            return ALL_OS[value as keyof typeof ALL_OS] ?? value;\n        case 'licenseType':\n            return ALL_LICENSE_TYPES[value as string] ?? value;\n        case 'subscriptionInterval':\n            return Duration.formatISODuration(value);\n        case 'subscriptionStartTrigger':\n            return getSubscriptionStartTriggerLabel(value);\n        default:\n            return String(value);\n    }\n}\n\nfunction HeaderText({ header }: { header: Header<any, unknown> }) {\n    const headerDef = header.column.columnDef.header;\n\n    if (typeof headerDef === 'string' || !headerDef) {\n        return getColumnHeaderText(header.column);\n    }\n\n    if (typeof headerDef === 'function') {\n        const result = headerDef(header.getContext());\n        if (typeof result === 'string') {\n            return getColumnHeaderText(header.column);\n        }\n        return flexRender(headerDef, header.getContext());\n    }\n\n    return flexRender(headerDef, header.getContext());\n}\n\n// TODO, automate checking valid HTML\nfunction TableContent({ className }: React.ComponentProps<typeof TableComponent>) {\n    const { tanTable, onRowNavigate } = useDataTable();\n    const tableCellStyle = (isSticky: boolean, className?: string, zIndex: string = 'z-50') =>\n        classNames(\n            'text-left body-sm font-medium whitespace-nowrap',\n            isSticky && `sticky right-0 ${zIndex} text-center justify-center`,\n            className\n        );\n    return (\n        <TableComponent className={classNames('table-auto border-0', className)}>\n            <TableHeader className=\"sticky top-0 z-10 rounded-lg border-stroke-secondary!\">\n                {tanTable.getHeaderGroups().map(headerGroup => (\n                    <TableRow key={headerGroup.id} className=\"border-stroke-secondary!\">\n                        {headerGroup.headers.map(header => (\n                            <TableHead\n                                scope=\"col\"\n                                key={header.id}\n                                colSpan={header.colSpan}\n                                className={tableCellStyle(header.id === ACTIONS_COLUMN_ID, 'bg-surface-secondary')}\n                            >\n                                {!header.column.getCanSort() && !header.isPlaceholder && (\n                                    <div\n                                        className={classNames(\n                                            'w-full flex items-center gap-1 text-xs uppercase font-semibold text-text-secondary',\n                                            header.id === ACTIONS_COLUMN_ID ? 'justify-center' : 'justify-start'\n                                        )}\n                                    >\n                                        <HeaderText header={header} />\n                                    </div>\n                                )}\n                                {header.column.getCanSort() && (\n                                    <Button\n                                        variant=\"ghost\"\n                                        size={'none'}\n                                        className={classNames(\n                                            'w-full p-1 rounded-md uppercase text-text-secondary text-xs font-semibold',\n                                            header.id === ACTIONS_COLUMN_ID ? 'justify-center' : 'justify-start',\n                                            header.column.getIsSorted() ? 'text-primary' : ''\n                                        )}\n                                        onPress={header.column.getToggleSortingHandler()}\n                                    >\n                                        <span>\n                                            <HeaderText header={header} />\n                                        </span>\n                                        {header.column.getIsSorted() && (\n                                            <SortIcon direction={header.column.getIsSorted()} />\n                                        )}\n                                    </Button>\n                                )}\n                            </TableHead>\n                        ))}\n                    </TableRow>\n                ))}\n            </TableHeader>\n            <TableBody>\n                {tanTable.getRowModel().rows.map(row => (\n                    <TableRow\n                        className={classNames(\n                            'group border-stroke-secondary! bg-surface-primary hover:not-data-[selected=true]:bg-surface-secondary data-[selected=true]:bg-surface-tertiary',\n                            onRowNavigate && 'cursor-pointer focus-visible:outline focus-visible:outline-ring'\n                        )}\n                        key={row.id}\n                        data-selected={row.getIsSelected()}\n                        {...(onRowNavigate && {\n                            role: 'link',\n                            tabIndex: 0,\n                            onClick: (e: React.MouseEvent<HTMLTableRowElement>) => {\n                                if (\n                                    (e.target as Element).closest('a, button, input, select, textarea, [role=\"button\"]')\n                                )\n                                    return;\n                                onRowNavigate(row.original);\n                            },\n                            onKeyDown: (e: React.KeyboardEvent<HTMLTableRowElement>) => {\n                                if (e.key === 'Enter') onRowNavigate(row.original);\n                            },\n                        })}\n                    >\n                        {row.getVisibleCells().map(cell => {\n                            const isActionsColumn = cell.column.id === ACTIONS_COLUMN_ID;\n                            const cellContent = cell.column.columnDef.meta?.displayType\n                                ? renderCellByDisplayType(cell)\n                                : flexRender(cell.column.columnDef.cell, cell.getContext());\n\n                            return (\n                                <TableCell\n                                    key={cell.id}\n                                    className={classNames(\n                                        tableCellStyle(\n                                            isActionsColumn,\n                                            isActionsColumn\n                                                ? 'bg-surface-primary group-hover:not-group-data-[selected=true]:bg-surface-secondary group-data-[selected=true]:bg-surface-tertiary'\n                                                : '',\n                                            'z-1'\n                                        ),\n                                        isActionsColumn && 'flex justify-center items-center'\n                                    )}\n                                >\n                                    {cellContent}\n                                </TableCell>\n                            );\n                        })}\n                    </TableRow>\n                ))}\n            </TableBody>\n        </TableComponent>\n    );\n}\n\n/** Base properties shared by all table actions */\ntype ActionBase = {\n    label: string;\n    icon: CtxIcon;\n    tooltip?: string;\n    /** Optional button variant to pass through to Button (defaults to neutral) */\n    variant?: React.ComponentProps<typeof Button>['variant'];\n};\n\n/** Context provided to onPress functions in TableActions */\ntype ActionPressContext = {\n    event?: PressEvent;\n    openDialog: (c: React.ReactNode) => void;\n    closeDialog: () => void;\n    activeFilters?: Record<string, unknown>;\n};\n\nexport type NoResourceAction = ActionBase & {\n    resourceType: 'none';\n    isDisabled?: () => boolean;\n    onPress: (c: ActionPressContext) => void;\n};\n\nexport type SingleResourceAction<T> = Omit<ActionBase, 'label'> & {\n    resourceType: 'single';\n    /** Label function that receives row data for dynamic labels */\n    label: string | ((data: T) => React.ReactNode);\n    isDisabled?: (data: T) => boolean;\n    onPress: (c: ActionPressContext & { data: T }) => void;\n};\n\nexport type BulkResourceAction<T> = ActionBase & {\n    resourceType: 'multiple';\n    isDisabled?: (data: T[]) => boolean;\n    onPress: (c: ActionPressContext & { data: T[] }) => void;\n};\n\n/** Common table action type that works for both action and dialog types */\nexport type TableAction<T> = NoResourceAction | SingleResourceAction<T> | BulkResourceAction<T>;\n\nfunction isNoResourceAction<T>(item: TableAction<T>): item is NoResourceAction {\n    return item.resourceType === 'none';\n}\n\nfunction isSingleResourceAction<T>(item: TableAction<T>): item is SingleResourceAction<T> {\n    return item.resourceType === 'single';\n}\n\nfunction isBulkResourceAction<T>(item: TableAction<T>): item is BulkResourceAction<T> {\n    return item.resourceType === 'multiple';\n}\n\nexport type TableActionsProps<T> = {\n    /** Array of table actions to render */\n    readonly items: (NoResourceAction | BulkResourceAction<T>)[];\n    /** Whether the table is currently fetching data */\n    readonly isFetching?: boolean;\n    /** Additional class names applied to each action button */\n    readonly buttonClassName?: string;\n};\n\nfunction TableActions<T>({ items, isFetching, buttonClassName }: TableActionsProps<T>) {\n    const { openDialog, closeDialog } = useControlledDialog();\n    const { tanTable, mergedFilters } = useDataTable();\n\n    function getTableActionIsDisabled<T>(item: TableAction<T>, rows: T[]): boolean {\n        if (!item.isDisabled) return false;\n\n        if (isNoResourceAction(item)) {\n            return item.isDisabled();\n        } else if (isBulkResourceAction(item)) {\n            return item.isDisabled(rows);\n        }\n        return false;\n    }\n\n    const selectedRows = tanTable.getSelectedRowModel().rows.map(r => r.original);\n    return (\n        <>\n            {items.map((item, i) => {\n                const Icon = item.icon;\n                const isDisabled = getTableActionIsDisabled(item, selectedRows) || isFetching;\n\n                return (\n                    <Button\n                        key={`${item.label}-${i}`}\n                        aria-label={item.label}\n                        type=\"button\"\n                        isDisabled={isDisabled}\n                        className={classNames(\n                            'animate-in fade-in slide-in-from-right-15 duration-300 transition-transform',\n                            buttonClassName\n                        )}\n                        onPress={e => {\n                            const context = { event: e, openDialog, closeDialog, activeFilters: mergedFilters };\n                            // TableActions only has Bulk actions and NoResource actions\n                            if (isNoResourceAction(item)) {\n                                item.onPress(context);\n                            } else if (isBulkResourceAction(item)) {\n                                item.onPress({ ...context, data: selectedRows });\n                            }\n                        }}\n                        variant={item.variant ?? 'neutral'}\n                    >\n                        {Icon && <Icon aria-hidden />}\n                        <span>{item.label}</span>\n                    </Button>\n                );\n            })}\n        </>\n    );\n}\n\nfunction TableActionsRowMenu<T>({\n    label,\n    items,\n    data,\n}: {\n    readonly label: React.ReactNode;\n    readonly items: SingleResourceAction<T>[];\n    readonly data: T;\n}) {\n    const { openDialog, closeDialog } = useControlledDialog();\n    const { mergedFilters } = useDataTable();\n    if (items.length < 5) {\n        return (\n            <div className=\"flex items-center\">\n                {items.map((it, i) => {\n                    const Icon = it.icon;\n                    const itemLabel = typeof it.label === 'function' ? it.label(data) : it.label;\n                    return (\n                        <TooltipTrigger key={`${i}-${typeof itemLabel === 'string' ? itemLabel : ''}`}>\n                            <Button\n                                aria-label={typeof itemLabel === 'string' ? itemLabel : undefined}\n                                isDisabled={it.isDisabled?.(data) ?? false}\n                                variant=\"ghost\"\n                                size=\"icon\"\n                                onPress={() => {\n                                    const context = { openDialog, closeDialog };\n                                    it.onPress({ ...context, data, activeFilters: mergedFilters });\n                                }}\n                            >\n                                <Icon className=\"size-icon\" />\n                            </Button>\n                            <Tooltip>{itemLabel}</Tooltip>\n                        </TooltipTrigger>\n                    );\n                })}\n            </div>\n        );\n    }\n\n    return (\n        <EasyMenu withChevron={false} aria-label=\"Actions\" label={label} size={'icon'}>\n            {items.map((it, i) => {\n                const Icon = it.icon;\n                const label = typeof it.label === 'function' ? it.label(data) : it.label;\n                return (\n                    <MenuItem\n                        key={`${i}-${typeof label === 'string' ? label : ''}`}\n                        id={typeof label === 'string' ? label : undefined}\n                        isDisabled={it.isDisabled?.(data) ?? false}\n                        onAction={() => {\n                            const context = { openDialog, closeDialog };\n                            if (isSingleResourceAction(it)) {\n                                it.onPress({ ...context, data, activeFilters: mergedFilters });\n                            }\n                        }}\n                    >\n                        <Icon className=\"size-icon\" />\n                        {label}\n                    </MenuItem>\n                );\n            })}\n        </EasyMenu>\n    );\n}\n","'use client';\nimport type { operations } from '@cryptlex/web-api-types/develop';\nimport { getLocalTimeZone, parseAbsolute, type ZonedDateTime } from '@internationalized/date';\nimport { useEffect, useRef, useState } from 'react';\nimport { Pressable } from 'react-aria-components';\nimport { Button } from '../components/button';\nimport { useDataTable } from '../components/data-table';\nimport { DatePicker } from '../components/date-picker';\nimport { EasyMenu, Menu, MenuItem, MenuPopover, MenuTrigger } from '../components/menu';\nimport { MultiSelect, type MultiSelectProps } from '../components/multi-select';\nimport { NumberField } from '../components/numberfield';\nimport { Popover, PopoverTrigger } from '../components/popover';\nimport { SelectTrigger } from '../components/select';\nimport type { SelectOption } from '../components/select-options';\nimport { TextField } from '../components/textfield';\nimport { formatDate } from '../utilities/date';\nimport { useProjectName, useResourceFormatter, type ApiFilters } from '../utilities/resources';\nimport { classNames } from '../utilities/theme';\nimport { DialogBody, DialogFooter, DialogHeader, DialogTitle, useControlledDialog } from './dialog';\nimport { IcAccount, IcCheck, IcClose, IcDate, IcFile, IcFilter, IcLicense, IcMinus, type CtxIcon } from './icons';\nimport { MultipleIdSearchInput } from './id-search';\nimport { useIsMobile } from '../utilities/use-mobile';\n\nexport const FILTER_COMPARISON_OPERATORS = [\n    'eq',\n    'ne',\n    'cn',\n    'nc',\n    'sw',\n    'ew',\n    'in',\n    'nin',\n    'gt',\n    'gte',\n    'lt',\n    'lte',\n    'between',\n] as const;\nexport type FilterComparisonOperator = (typeof FILTER_COMPARISON_OPERATORS)[number];\n\nexport const COMPARISON_OPERATOR_LABELS: Record<FilterComparisonOperator, string> = {\n    eq: 'equal to',\n    ne: 'not equal to',\n    cn: 'contains',\n    nc: 'does not contain',\n    sw: 'starts with',\n    ew: 'ends with',\n    in: 'includes',\n    nin: 'does not include',\n    gt: 'greater than',\n    gte: 'greater than or equal to',\n    lt: 'less than',\n    lte: 'less than or equal to',\n    between: 'between',\n};\n\nconst COMPARISON_OPERATOR_SHORT_LABELS: Record<FilterComparisonOperator, string> = {\n    eq: '=',\n    ne: '≠',\n    cn: 'contains',\n    nc: '!contains',\n    sw: 'starts with',\n    ew: 'ends with',\n    in: 'in',\n    nin: 'not in',\n    gt: '>',\n    gte: '≥',\n    lt: '<',\n    lte: '≤',\n    between: '↔',\n};\n\ntype BaseLocalFilter<T extends FilterType, V> = {\n    id: string;\n    type: T;\n    property: string;\n    operator: FilterComparisonOperator;\n    value: V | undefined;\n    displayValue?: string;\n    /** If false, the filter chip is shown in the UI but not sent as a query parameter. Becomes true once the user edits the value. */\n    active?: boolean;\n    /** If true, clearing the filter resets it to preview state instead of removing it. */\n    isPreview?: boolean;\n    /** If false, the filter is sent as `property=value` without an operator. UI only shows \"equal to\". Always false for bool filters. */\n    needOperator?: boolean;\n};\ntype EnumLocalFilter = BaseLocalFilter<'enum', Set<string | number>>;\ntype IdLocalFilter = BaseLocalFilter<'id', string>;\ntype BoolLocalFilter = BaseLocalFilter<'bool', boolean>;\ntype StringLocalFilter = BaseLocalFilter<'string', string>;\ntype NumberLocalFilter = BaseLocalFilter<'number', number>;\n// DatePicker accepts a string, and converts it to a ZonedDateTime. Between operator uses [from, to] tuple.\ntype DateLocalFilter = BaseLocalFilter<'date', string | [string, string]>;\ntype IdSearchLocalFilter = BaseLocalFilter<'id-search', string[]>;\n// Single-choice filter. Typically used for virtual/computed filters (see FilterConfig['toApiQuery']).\ntype DerivedSelectLocalFilter = BaseLocalFilter<'derived-select', string>;\n// TODO, entitlementSets.productIds\nfunction createNewFilter(property: string, config: FilterConfig): TableFilter {\n    const type = config.type;\n    const id = `${property}-${Date.now()}`;\n    // Bool and derived-select filters never send an operator\n    const resolvedNeedOperator = type === 'bool' || type === 'derived-select' ? false : (config.needOperator ?? true);\n    const operator = resolvedNeedOperator ? FilterOperations[type][0] : 'eq';\n    const base = { id, property, operator, needOperator: resolvedNeedOperator };\n\n    switch (type) {\n        case 'bool':\n            return { ...base, type, value: true };\n        case 'derived-select':\n            return { ...base, type, value: config.options[0]?.id ?? '' };\n        case 'string':\n            return { ...base, type, value: '' };\n        case 'date':\n            return {\n                ...base,\n                type,\n                value:\n                    operator === 'between'\n                        ? ([new Date().toISOString(), new Date().toISOString()] as [string, string])\n                        : new Date().toISOString(),\n            };\n        case 'id':\n            return { ...base, type, value: '' };\n        case 'id-search':\n            return { ...base, type, value: [] };\n        case 'enum':\n            return { ...base, type, value: new Set<string | number>() };\n        case 'number':\n            return { ...base, type, value: 0 };\n    }\n}\n\nexport type TableFilter =\n    | EnumLocalFilter\n    | IdLocalFilter\n    | BoolLocalFilter\n    | StringLocalFilter\n    | DateLocalFilter\n    | IdSearchLocalFilter\n    | NumberLocalFilter\n    | DerivedSelectLocalFilter;\n\nexport type FilterConfig = (\n    | { type: 'enum'; options: MultiSelectProps['items'] }\n    | ({ type: 'id-search' } & Pick<\n          React.ComponentProps<typeof MultipleIdSearchInput>,\n          'accessor' | 'path' | 'defaultParams'\n      >)\n    | { type: 'id' }\n    | { type: 'bool' }\n    | { type: 'string' }\n    | { type: 'date' }\n    | { type: 'number' }\n    | {\n          type: 'derived-select';\n          options: SelectOption[];\n          /**\n           * Maps the selected option's id to real API query params. Required for `derived-select` filters,\n           * since they're meant for virtual/computed properties that don't map 1:1 to an API filter property\n           * (e.g. a \"status\" filter derived from several boolean properties like `revoked`/`expired`).\n           */\n          toApiQuery: (value: string) => Record<string, unknown>;\n      }\n) & {\n    /**\n     * When false, the filter is sent as `property=value` instead of `property[operator]=value`,\n     * and the UI locks the operator to \"equal to\". Defaults to true. Bool and derived-select filters are always treated as false.\n     */\n    needOperator?: boolean;\n};\n\nexport type FilterType = FilterConfig['type'];\n\nconst FilterOperations: Record<FilterType, FilterComparisonOperator[]> = {\n    bool: ['eq'],\n    'derived-select': ['eq'],\n    enum: ['in', 'nin'],\n    id: ['in', 'nin'],\n    'id-search': ['in', 'nin'],\n    string: ['eq', 'ne', 'cn', 'nc', 'sw', 'ew', 'in', 'nin'],\n    date: ['between', 'lt', 'gt'],\n    number: ['eq', 'ne', 'gt', 'gte', 'lt', 'lte'],\n};\n\n// TS workaround to get rid of filterConfig: Required<Record<never, FilterConfig>>\nexport type FiltersConfig<TOperation extends keyof operations> = [keyof ApiFilters<TOperation>] extends [never]\n    ? Record<string, FilterConfig>\n    : Required<Record<keyof ApiFilters<TOperation>, FilterConfig>>;\n\ntype FilterUpdate = { operator?: FilterComparisonOperator; value?: TableFilter['value'] };\n\n// Normalizes date filter values when the operator changes: \"between\" needs a [from, to] tuple,\n// every other date operator needs a single value.\nfunction resolveFilterValue(f: TableFilter, updates: FilterUpdate) {\n    let value = updates.value !== undefined ? updates.value : f.value;\n    const newOperator = updates.operator ?? f.operator;\n    if (f.type === 'date' && updates.operator !== undefined) {\n        if (newOperator === 'between' && !Array.isArray(value)) {\n            const str = typeof value === 'string' ? value : new Date().toISOString();\n            value = [str, str];\n        } else if (newOperator !== 'between' && Array.isArray(value)) {\n            value = value[0] ?? new Date().toISOString();\n        }\n    }\n    return value;\n}\n\n// Shared filter mutations, used by both the desktop chip row and the mobile dialog so they stay in sync\n// with the single `useDataTable()` state instead of each keeping their own copy of this logic.\nfunction useFilterActions() {\n    const { setFilters, filterConfig } = useDataTable();\n\n    // Updates the filter for `property` if one exists, otherwise creates and adds it.\n    const updateFilter = (property: string, updates: FilterUpdate) => {\n        setFilters(prev => {\n            const base = prev.find(f => f.property === property) ?? createNewFilter(property, filterConfig[property]);\n            const updated = {\n                ...base,\n                ...updates,\n                value: resolveFilterValue(base, updates),\n                active: true,\n            } as TableFilter;\n            return prev.some(f => f.id === base.id)\n                ? prev.map(f => (f.id === base.id ? updated : f))\n                : [...prev, updated];\n        });\n    };\n\n    // No-op if `id` isn't in state yet (e.g. a filter that was never edited).\n    const removeFilter = (id: string) => {\n        setFilters(prev => {\n            const filter = prev.find(f => f.id === id);\n            if (!filter) return prev;\n            if (filter.isPreview) {\n                return prev.map(f =>\n                    f.id === id\n                        ? {\n                              ...createNewFilter(f.property, filterConfig[f.property]),\n                              active: false,\n                              isPreview: true,\n                          }\n                        : f\n                );\n            }\n            return prev.filter(f => f.id !== id);\n        });\n    };\n\n    const clearAllFilters = () => {\n        setFilters(prev =>\n            prev\n                .filter(f => f.isPreview)\n                .map(f => ({\n                    ...createNewFilter(f.property, filterConfig[f.property]),\n                    active: false,\n                    isPreview: true,\n                }))\n        );\n    };\n\n    return { updateFilter, removeFilter, clearAllFilters };\n}\n\nfunction getFilterValueSummary(filter: TableFilter, filterConfig: Record<string, FilterConfig>): string {\n    switch (filter.type) {\n        case 'string':\n        case 'id':\n            return filter.value ?? '';\n        case 'number':\n            return filter.value?.toString() ?? '';\n        case 'bool':\n            return filter.value ? 'true' : 'false';\n        case 'derived-select': {\n            const config = filterConfig[filter.property];\n            if (!config || config.type !== 'derived-select') return filter.value ?? '';\n            const option = config.options.find(o => o.id === filter.value);\n            return typeof option?.label === 'string' ? option.label : (filter.value ?? '');\n        }\n        case 'date':\n            if (Array.isArray(filter.value)) {\n                const [from, to] = filter.value;\n                return `${formatDate(from, { dateStyle: 'short' }) ?? ''} – ${formatDate(to, { dateStyle: 'short' }) ?? ''}`;\n            }\n            return filter.value ? (formatDate(filter.value, { dateStyle: 'short' }) ?? '') : '';\n        case 'enum':\n            return filter.value && filter.value.size > 0 ? `${filter.value.size} selected` : '';\n        case 'id-search':\n            return filter.value && filter.value.length > 0\n                ? filter.value.length === 1\n                    ? '1 item'\n                    : `${filter.value.length} items`\n                : '';\n    }\n}\n\nfunction FilterValueInput({\n    filter,\n    filterConfig,\n    onChange,\n}: {\n    filter: TableFilter;\n    filterConfig: Record<string, FilterConfig>;\n    onChange: (value: TableFilter['value']) => void;\n}) {\n    if (filter.type === 'string' || filter.type === 'id') {\n        return (\n            <TextField\n                autoFocus\n                value={filter.value ?? ''}\n                onChange={onChange as (v: string) => void}\n                aria-label=\"Filter value\"\n                inputClassName=\"bg-surface-secondary\"\n            />\n        );\n    }\n\n    if (filter.type === 'number') {\n        return (\n            <NumberField\n                autoFocus\n                value={filter.value}\n                onChange={onChange as (v: number) => void}\n                aria-label=\"Filter value\"\n                inputClassName=\"bg-surface-secondary\"\n            />\n        );\n    }\n\n    if (filter.type === 'date') {\n        if (filter.operator === 'between') {\n            const [fromStr, toStr] = Array.isArray(filter.value)\n                ? filter.value\n                : [new Date().toISOString(), new Date().toISOString()];\n            const from = parseAbsolute(fromStr, getLocalTimeZone());\n            const to = parseAbsolute(toStr, getLocalTimeZone());\n            return (\n                <div className=\"flex flex-col gap-icon\">\n                    <DatePicker<ZonedDateTime>\n                        autoFocus\n                        hideTimeZone\n                        label=\"From\"\n                        value={from}\n                        onChange={v => onChange([v ? v.toAbsoluteString() : fromStr, toStr])}\n                        inputClassName=\"bg-surface-secondary\"\n                    />\n                    <DatePicker<ZonedDateTime>\n                        hideTimeZone\n                        label=\"To\"\n                        value={to}\n                        onChange={v => onChange([fromStr, v ? v.toAbsoluteString() : toStr])}\n                        inputClassName=\"bg-surface-secondary\"\n                    />\n                </div>\n            );\n        }\n        const value =\n            filter.value && !Array.isArray(filter.value) ? parseAbsolute(filter.value, getLocalTimeZone()) : null;\n        return (\n            <DatePicker<ZonedDateTime>\n                autoFocus\n                hideTimeZone\n                value={value}\n                onChange={v => onChange(v ? v.toAbsoluteString() : new Date().toISOString())}\n                aria-label=\"Filter date\"\n                inputClassName=\"bg-surface-secondary\"\n            />\n        );\n    }\n\n    if (filter.type === 'enum') {\n        const config = filterConfig[filter.property];\n        if (config.type !== 'enum') return null;\n        return (\n            <MultiSelect\n                autoFocus\n                items={config.options}\n                value={filter.value ?? new Set<string | number>()}\n                onChange={onChange as (v: Set<string | number>) => void}\n                aria-label=\"Filter value\"\n                inputClassName=\"bg-surface-secondary\"\n            />\n        );\n    }\n\n    if (filter.type === 'id-search') {\n        const config = filterConfig[filter.property];\n        if (config.type !== 'id-search') return null;\n        const defaultParams = config.defaultParams;\n        return (\n            <MultipleIdSearchInput\n                autoFocus\n                path={config.path}\n                accessor={config.accessor}\n                defaultParams={defaultParams}\n                value={filter.value ?? []}\n                onChange={onChange as (v: string[]) => void}\n                aria-label=\"Filter value\"\n                className=\"bg-surface-secondary\"\n            />\n        );\n    }\n\n    return null;\n}\n\nfunction FilterChip({\n    filter,\n    filterConfig,\n    resourceFormatter,\n    onRemove,\n    onUpdate,\n    isOpen,\n    onOpenChange,\n}: {\n    filter: TableFilter;\n    filterConfig: Record<string, FilterConfig>;\n    resourceFormatter: (key: string) => string;\n    onRemove: () => void;\n    onUpdate: (updates: FilterUpdate) => void;\n    isOpen?: boolean;\n    onOpenChange?: (isOpen: boolean) => void;\n}) {\n    // Operator is locked to \"equal to\" when the filter doesn't send one\n    const operators = filter.needOperator === false ? (['eq'] as const) : FilterOperations[filter.type];\n    const valueSummary = getFilterValueSummary(filter, filterConfig);\n\n    const project = useProjectName();\n    const isMobile = useIsMobile();\n\n    // Bool and derived-select filters always resolve to a single fixed operator (\"equal to\") and their\n    // value is one choice from a flat list, so they use a direct menu instead of the operator/value popover.\n    const isDirectMenu = filter.type === 'bool' || filter.type === 'derived-select';\n\n    const chipButton = isMobile ? (\n        <div className=\"flex flex-col gap-1\">\n            <span className=\"body-sm text-muted\">{resourceFormatter(filter.property)}</span>\n            <SelectTrigger type=\"button\" className=\"w-full\" aria-label={resourceFormatter(filter.property)}>\n                {valueSummary}\n            </SelectTrigger>\n        </div>\n    ) : (\n        <Button\n            type=\"button\"\n            variant={filter.active === false ? 'neutral' : 'primary_neutral'}\n            className={'animate-in slide-in-from-left-10 fade-in flex justify-between gap-2'}\n        >\n            <IcFilter />\n            {isDirectMenu ? (\n                <span className=\"font-medium\">{resourceFormatter(filter.property)}</span>\n            ) : (\n                <>\n                    <span className=\"font-medium\">{resourceFormatter(filter.property)}</span>\n                    {project !== 'customer-portal' && <span>{COMPARISON_OPERATOR_SHORT_LABELS[filter.operator]}</span>}\n                    {project !== 'customer-portal' && valueSummary && <span>{valueSummary}</span>}\n                </>\n            )}\n            {filter.active !== false && (\n                <Pressable onPress={() => onRemove()}>\n                    <span className=\"bg-primary hover:bg-destructive rounded-full size-icon flex justify-center items-center\">\n                        <IcClose className=\"size-2.5 text-surface-primary\" />\n                    </span>\n                </Pressable>\n            )}\n        </Button>\n    );\n\n    if (isDirectMenu) {\n        let options: SelectOption[];\n        let selectedKey: string;\n        if (filter.type === 'bool') {\n            options = [\n                { id: 'true', label: 'True' },\n                { id: 'false', label: 'False' },\n            ];\n            selectedKey = filter.value ? 'true' : 'false';\n        } else {\n            const config = filterConfig[filter.property];\n            options = config?.type === 'derived-select' ? config.options : [];\n            selectedKey = filter.value ?? '';\n        }\n\n        return (\n            <MenuTrigger isOpen={isOpen} onOpenChange={onOpenChange}>\n                <div className=\"relative\">{chipButton}</div>\n                <MenuPopover className=\"min-w-48\">\n                    <Menu\n                        selectionMode=\"single\"\n                        disallowEmptySelection\n                        selectedKeys={new Set([selectedKey])}\n                        onSelectionChange={keys => {\n                            if (keys === 'all') return;\n                            const key = keys.values().next().value as string | number | undefined;\n                            if (key == null) return;\n                            onUpdate({ value: filter.type === 'bool' ? String(key) === 'true' : String(key) });\n                        }}\n                        aria-label=\"Filter value\"\n                    >\n                        {options.map(option => (\n                            <MenuItem key={option.id} id={option.id}>\n                                {option.label}\n                            </MenuItem>\n                        ))}\n                    </Menu>\n                </MenuPopover>\n            </MenuTrigger>\n        );\n    }\n\n    return (\n        <PopoverTrigger isOpen={isOpen} onOpenChange={onOpenChange}>\n            <div className=\"relative\">{chipButton}</div>\n            <Popover className=\"p-icon min-w-48\">\n                <div className=\"flex flex-col gap-2\">\n                    {project !== 'customer-portal' && operators.length > 1 && (\n                        <EasyMenu\n                            label={COMPARISON_OPERATOR_LABELS[filter.operator]}\n                            variant=\"neutral\"\n                            aria-label=\"Change operator\"\n                            triggerClassName=\"bg-surface-secondary\"\n                        >\n                            {operators.map(op => (\n                                <MenuItem key={op} onAction={() => onUpdate({ operator: op })}>\n                                    {COMPARISON_OPERATOR_LABELS[op]}\n                                </MenuItem>\n                            ))}\n                        </EasyMenu>\n                    )}\n                    <FilterValueInput\n                        filter={filter}\n                        filterConfig={filterConfig}\n                        onChange={value => onUpdate({ value })}\n                    />\n                    <Button\n                        type=\"button\"\n                        variant=\"neutral\"\n                        className={'self-start'}\n                        onPress={onRemove}\n                        aria-label={`Remove ${resourceFormatter(filter.property)} filter`}\n                    >\n                        Clear\n                    </Button>\n                </div>\n            </Popover>\n        </PopoverTrigger>\n    );\n}\n\nfunction MobileFilterDialogContent({ onApply }: { onApply: () => void }) {\n    const { filters, filterConfig } = useDataTable();\n    const resourceFormatter = useResourceFormatter();\n    const { updateFilter, removeFilter, clearAllFilters } = useFilterActions();\n    const [openProperty, setOpenProperty] = useState<string | null>(null);\n\n    return (\n        <>\n            <DialogHeader>\n                <DialogTitle>Filter</DialogTitle>\n            </DialogHeader>\n            <DialogBody className=\"flex flex-col gap-input\">\n                {Object.keys(filterConfig).map(key => {\n                    const filter = filters.find(f => f.property === key) ?? createNewFilter(key, filterConfig[key]);\n                    return (\n                        <FilterChip\n                            key={key}\n                            filter={filter}\n                            filterConfig={filterConfig}\n                            resourceFormatter={resourceFormatter}\n                            onRemove={() => removeFilter(filter.id)}\n                            onUpdate={updates => updateFilter(key, updates)}\n                            isOpen={openProperty === key}\n                            onOpenChange={open => setOpenProperty(open ? key : null)}\n                        />\n                    );\n                })}\n            </DialogBody>\n            <DialogFooter>\n                <Button\n                    variant=\"neutral\"\n                    onPress={() => {\n                        clearAllFilters();\n                        setOpenProperty(null);\n                    }}\n                >\n                    Clear All\n                </Button>\n                <Button variant=\"primary\" onPress={onApply}>\n                    Apply\n                </Button>\n            </DialogFooter>\n        </>\n    );\n}\n\nfunction MobileDataTableFilter({\n    className,\n    hasClearableFilters,\n    isDisabled,\n    onClearAll,\n    ...props\n}: React.ComponentProps<'section'> & {\n    hasClearableFilters: boolean;\n    isDisabled: boolean;\n    onClearAll: () => void;\n}) {\n    const { openDialog, closeDialog } = useControlledDialog();\n\n    return (\n        <section {...props} className={classNames('flex items-center', className)}>\n            <Button\n                variant={hasClearableFilters ? 'primary_neutral' : 'neutral'}\n                isDisabled={isDisabled}\n                aria-label=\"Filter\"\n                onPress={() => openDialog(<MobileFilterDialogContent onApply={closeDialog} />)}\n                className=\"min-w-0 flex-1\"\n            >\n                <IcFilter />\n                Filters\n                {hasClearableFilters && (\n                    <Pressable onPress={onClearAll}>\n                        <span className=\"animate-slide-in bg-primary hover:bg-destructive rounded-full size-icon flex justify-center items-center\">\n                            <IcClose className=\"size-2.5 text-surface-primary\" />\n                        </span>\n                    </Pressable>\n                )}\n            </Button>\n        </section>\n    );\n}\n\nexport function DataTableFilter({\n    className,\n    previewFilters,\n    ...props\n}: React.ComponentProps<'section'> & {\n    /** Keys from filterConfig to show as filter chips on mount, not applied until the user edits them. */\n    previewFilters?: string[];\n}) {\n    const { filters, query, setFilters, filterConfig } = useDataTable();\n    const isMobile = useIsMobile();\n    const resourceFormatter = useResourceFormatter();\n    const hasFilterConfig = Object.keys(filterConfig).length > 0;\n    const filterKeys = Object.keys(filterConfig)\n        .filter(k => !filters.some(f => f.property === k))\n        .sort();\n    const [openFilterId, setOpenFilterId] = useState<string | null>(null);\n\n    const initialized = useRef(false);\n    useEffect(() => {\n        if (!initialized.current && filters.length === 0) {\n            const toSet: TableFilter[] = [];\n            if (previewFilters && previewFilters.length > 0) {\n                toSet.push(\n                    ...previewFilters\n                        .filter(key => filterConfig[key])\n                        .map(key => ({\n                            ...createNewFilter(key, filterConfig[key]),\n                            active: false as const,\n                            isPreview: true as const,\n                        }))\n                );\n            }\n            if (toSet.length > 0) setFilters(toSet);\n        }\n        initialized.current = true;\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    const { updateFilter, removeFilter, clearAllFilters } = useFilterActions();\n\n    const addFilter = (property: string) => {\n        const newFilter = createNewFilter(property, filterConfig[property]);\n        setFilters([...filters, newFilter]);\n        setOpenFilterId(newFilter.id);\n    };\n\n    const hasClearableFilters = filters.some(f => !f.isPreview || f.active !== false);\n\n    const handleClearAll = () => {\n        clearAllFilters();\n        setOpenFilterId(null);\n    };\n\n    if (isMobile) {\n        if (!hasFilterConfig) return null;\n        return (\n            <MobileDataTableFilter\n                {...props}\n                className={className}\n                hasClearableFilters={hasClearableFilters}\n                isDisabled={query.isPending}\n                onClearAll={handleClearAll}\n            />\n        );\n    }\n\n    return (\n        <section {...props} className={classNames('flex flex-wrap gap-icon items-center', className)}>\n            {filters\n                .filter(filter => filter.property in filterConfig)\n                .map(filter => (\n                    <FilterChip\n                        key={filter.id}\n                        filter={filter}\n                        filterConfig={filterConfig}\n                        resourceFormatter={resourceFormatter}\n                        onRemove={() => removeFilter(filter.id)}\n                        onUpdate={updates => updateFilter(filter.property, updates)}\n                        isOpen={openFilterId === filter.id}\n                        onOpenChange={open => setOpenFilterId(open ? filter.id : null)}\n                    />\n                ))}\n\n            {filterKeys.length > 0 && (\n                <EasyMenu label={<IcFilter />} isDisabled={query.isPending} variant=\"neutral\" aria-label=\"Add filter\">\n                    {filterKeys.map(k => {\n                        const type = filterConfig[k].type;\n                        const Icon = FilterIcon[type];\n                        return (\n                            <MenuItem className={'!justify-between'} key={k} onAction={() => addFilter(k)}>\n                                {resourceFormatter(k)}\n                                <Icon />\n                            </MenuItem>\n                        );\n                    })}\n                </EasyMenu>\n            )}\n\n            {hasClearableFilters && (\n                <Button\n                    variant=\"ghost\"\n                    onPress={handleClearAll}\n                    aria-label=\"Clear all filters\"\n                    className=\"animate-in fade-in\"\n                >\n                    Clear All\n                </Button>\n            )}\n        </section>\n    );\n}\n\nconst FilterIcon: Record<FilterConfig['type'], CtxIcon> = {\n    'id-search': IcFile,\n    bool: IcCheck,\n    'derived-select': IcCheck,\n    date: IcDate,\n    enum: IcLicense,\n    id: IcAccount,\n    number: IcMinus,\n    string: IcCheck,\n};\n"],"mappings":"uhGA0HA,SAAS,GAAkB,EAAyD,CAQ5E,OAPA,EACI,EAAK,KACE,IAAI,EAAK,KAET,IAAI,EAAK,KAGb,YAEf,CAEA,IAAM,GAAK,GAAwB,EAC7B,GAAyB,CAC3B,GAAG,SAAS,WAAY,CACpB,QAAS,CAAE,WACP,EAAC,EAAD,CACI,gBAAiB,EAAM,sBAAsB,GAAK,CAAC,EAAM,yBAAyB,EAClF,WAAY,EAAM,yBAAyB,GAAK,EAAM,0BAA0B,EAChF,aAAgB,EAAM,0BAA0B,EAChD,aAAW,aACX,KAAK,IACR,CAAA,EAGL,MAAO,CAAE,SACL,EAAC,EAAD,CACI,WAAY,EAAI,cAAc,EAC9B,aAAgB,EAAI,eAAe,EACnC,aAAW,aACX,KAAK,IACR,CAAA,EAEL,cAAe,GACf,aAAc,EAClB,CAAC,CACL,EAEM,EAAoB,eAC1B,SAAS,GAAmC,EAAuC,CAG/E,OAFI,EAAW,SAAW,EAAU,CAAC,EAE9B,CACH,GAAG,SAAS,EAAmB,CAC3B,OAAQ,UACR,GAAI,EACJ,aAAc,GACd,MAAO,CAAE,SACL,EAAC,GAAD,CACI,MAAO,EAAC,EAAD,CAAgB,UAAU,mBAAqB,CAAA,EACtD,KAAM,EAAI,SACV,MAAO,CACV,CAAA,EAEL,cAAe,EACnB,CAAC,CACL,CACJ,CA8CA,SAAgB,IAAgF,CAC5F,OAAO,GAAuC,CAClD,CAIA,SAAgB,GAId,CACE,OACA,eACA,iBACA,kBACA,UACA,eACA,yBAAyB,CAAC,EAC1B,iBAAiB,GACjB,eAAe,GACf,iBAAiB,CAAC,EAClB,iBACA,eACA,OACA,gBACA,mBACA,iBACA,WAC+C,CAC/C,GAAM,CAAC,EAAY,GAAkB,EAAyB,CAE1D,WAAY,CAAE,UAAW,EAAG,SAAU,EAAG,EACzC,QAAS,CAAC,CACd,CAAC,EAEK,CAAE,UAAS,cAAe,EAE1B,CAAC,EAAa,GAAkB,EAAS,EAAE,EAE3C,CAAC,GAAc,GAAmB,EAA4B,CAAC,CAAC,EAGhE,CAAC,EAAS,IAAc,EAAS,CAAc,EAC/C,EAAgB,OAEX,EACF,OAAO,GAAM,EAAG,SAAW,EAAK,CAAC,CACjC,IAAI,GAAM,CAGP,GAAI,EAAG,OAAS,iBAAkB,CAC9B,IAAM,EAAU,EAA8C,EAAG,UACjE,OAAO,GAAQ,OAAS,iBAAmB,EAAO,WAAW,OAAO,EAAG,OAAS,EAAE,CAAC,EAAI,CAAC,CAC5F,CAIA,IAAM,EAAQ,EAAG,iBAAiB,IAAM,MAAM,KAAK,EAAG,KAAK,EAAI,EAAG,MAsBlE,OApBI,EAAG,eAAiB,GACb,EACF,EAAG,UAAW,MAAM,QAAQ,CAAK,EAAI,EAAM,KAAK,GAAG,EAAI,CAC5D,EAEA,EAAG,WAAa,WAAa,MAAM,QAAQ,CAAK,GAAK,EAAM,SAAW,EAC/D,EACF,EAAG,UAAW,CACX,IAAK,EAAM,GACX,IAAK,EAAM,EACf,CACJ,EAEA,MAAM,QAAQ,CAAK,EACZ,EACF,EAAG,UAAW,EACV,EAAG,UAAW,EAAM,KAAK,GAAG,CACjC,CACJ,EAEG,EACF,EAAG,UAAW,EACV,EAAG,UAAW,CACnB,CACJ,CACJ,CAAC,CAAC,CACD,QAAQ,EAAK,IACH,GAAM,EAAK,CAAO,EAC1B,CAAC,CAAC,EACV,CAAC,EAAS,CAAY,CAAC,EAEpB,EAAe,GAAS,OAAS,EAAQ,KAAK,GAAG,EAAI,IAAA,GAIrD,EAAoB,CACtB,GAAG,EACH,GAAG,EACH,MAAO,EAAW,SAClB,KAAM,GAAkB,EAAQ,EAAE,EAClC,OAAQ,EACR,GAAI,EAAe,CAAE,QAAS,CAAa,EAAI,CAAC,CACpD,EAEM,GAAS,GAAa,EACtB,GAAgB,CAAC,MAAO,EAAM,CAAE,GAAG,EAAmB,KAAM,EAAW,UAAY,CAAE,EAAG,OAAO,EAC/F,GAAe,CAAC,MAAO,EAAM,EAAmB,MAAM,EAEtD,EAAW,GAAG,EAAK,MACnB,CAAC,GAAa,GAAkB,GAAkC,GAAG,EAAS,0BAA2B,CAAC,CAAC,EAC3G,CAAC,EAAkB,GAAuB,GAC5C,GAAG,EAAS,+BACZ,CACI,GAAI,GACJ,GAAG,CACP,CACJ,EACM,CAAC,GAAU,IAAe,GAC5B,GAAG,EAAS,uBACZ,EAAmB,OAAS,OAChC,EAEM,GAAW,EAAY,EACvB,EAAoB,GAAqB,IAAY,EAAQ,OAAS,GAGtE,EAAoB,GAAqC,CAC3D,EAAe,IAAS,CAAE,GAAG,EAAM,GAAG,CAAQ,EAAE,CACpD,EAEA,eAAe,EAAU,EAAmB,CACxC,IAAM,EAAM,MAAM,GAAO,IAAI,EAAM,CAC/B,OAAQ,CACJ,MAAO,CACH,GAAG,EACH,KAAM,EACN,MAAO,EAAW,SAClB,KAAM,EAAkB,KACxB,OAAQ,EAAkB,OAC1B,GAAI,EAAe,CAAE,QAAS,CAAa,EAAI,CAAC,EAChD,GAAG,CACP,EACA,KAAM,CACV,CACJ,CAAC,EACD,MAAO,CACH,KAAO,EAAI,MAAQ,CAAC,EACpB,MAAO,OAAO,SAAS,EAAI,SAAS,QAAQ,IAAI,kBAAkB,GAAK,GAAG,EAC1E,SAAU,EAAY,CAC1B,CACJ,CAEA,IAAM,EAAa,GAAS,CACxB,SAAU,GACV,QAAS,IAAsB,QAC/B,YAAe,EAAU,EAAW,UAAY,CAAC,EACjD,gBAAiB,GAAQ,CAC7B,CAAC,EAEK,EAAgB,GAAiB,CACnC,SAAU,GACV,QAAS,IAAsB,OAC/B,iBAAkB,EAClB,SAAU,CAAE,eAAgB,EAAU,CAAS,EAC/C,kBAAmB,EAAU,IACT,EAAS,QAAQ,GAAK,EAAE,IAAI,CAAC,CAAC,OAC7B,EAAS,MAAQ,EAAS,SAAW,IAAA,EAE9D,CAAC,EAGK,EAAW,OACT,IAAsB,QAAgB,EAAW,MAAM,MAAQ,CAAC,EAC7D,EAAc,MAAM,MAAM,QAAQ,GAAK,EAAE,IAAI,GAAK,CAAC,EAC3D,CAAC,EAAmB,EAAW,KAAM,EAAc,IAAI,CAAC,EAErD,EAAQ,OACN,IAAsB,QAAgB,EAAW,MAAM,OAAS,EAC7D,EAAc,MAAM,MAAM,EAAE,EAAE,OAAS,EAC/C,CAAC,EAAmB,EAAW,KAAM,EAAc,IAAI,CAAC,EAErD,EACF,IAAsB,QAChB,EACA,CACI,GAAG,EACH,KAAM,CAAE,KAAM,EAAU,OAAM,EAC9B,UAAW,EAAc,UACzB,WAAY,EAAc,WAC1B,QAAS,EAAc,QACvB,MAAO,EAAc,MACrB,QAAS,EAAc,OAC3B,EAEJ,EAAa,EAAa,OAAO,EAAsB,EAOvD,EAA8B,CAChC,GAAI,EAAiB,GAAyB,CAAC,EAC/C,GAAG,EACH,GAAG,GAAoB,GAAc,CAAC,CAAC,CAC3C,EAGA,SAAS,GAAqB,EAA+C,CACzE,OAAO,OAAO,GAAY,UAC9B,CAEA,SAAS,EAAkB,EAAqB,EAAiB,CAI7D,OAHI,GAAkB,CAAO,EAClB,EAAQ,CAAY,EAExB,CACX,CAGA,IAAM,EAAW,GAAc,CAC3B,KAAM,EACN,QAAS,EACT,gBAAiB,GAAgB,EACjC,SAAU,EACV,iBAAkB,GAClB,mBAAoB,GAAW,CAC3B,EAAiB,CAAE,WAAY,EAAe,EAAS,CAAU,CAAE,CAAC,CACxE,EACA,cAAe,GACf,gBAAiB,GAAW,CACxB,EAAgB,CAAC,CAAC,EAClB,EAAiB,CAAE,QAAS,CAAC,GAAG,EAAe,EAAS,CAAO,CAAC,CAAE,CAAC,CACvE,EACA,gBAAiB,GACjB,yBAA0B,GAAW,CACjC,EAAoB,EAAe,EAAS,CAAgB,CAAC,CACjE,EACA,qBAAsB,GAAW,CAC7B,EAAgB,EAAe,EAAS,EAAY,CAAC,CACzD,EACA,oBAAqB,GAAW,CAC5B,EAAe,EAAe,EAAS,EAAW,CAAC,CACvD,EACA,MAAO,CACM,UACS,mBACN,aACE,gBACD,cACjB,EACA,KAAM,CACF,QAAS,EAAM,OACnB,CACJ,CAAC,EAoBD,OAhBA,MAAgB,CACZ,IAAM,EAAS,EAAS,kBAAkB,CAAC,CAAC,IAAI,GAAK,EAAE,EAAE,EACnD,EAAY,EAAO,OAAO,GAAM,IAAO,YAAc,IAAO,CAAiB,EACnF,EAAe,GAAa,CAExB,IAAM,EAAY,EAAU,OAAO,GAAM,EAAU,SAAS,CAAE,CAAC,EACzD,EAAO,EAAU,OAAO,GAAM,CAAC,EAAU,SAAS,CAAE,CAAC,EACrD,EAAgB,EAAU,OAAS,EAAI,CAAC,GAAG,EAAW,GAAG,CAAI,EAAI,EACvE,MAAO,CACH,GAAI,EAAO,SAAS,UAAU,EAAI,CAAC,UAAU,EAAI,CAAC,EAClD,GAAG,EACH,GAAI,EAAO,SAAS,CAAiB,EAAI,CAAC,CAAiB,EAAI,CAAC,CACpE,CACJ,CAAC,CACL,EAAG,CAAC,CAAC,EAEE,CACH,aACA,mBACA,QACA,iBACA,cACA,WACA,gBACA,UACA,cACA,eACA,eACA,iBACA,kBACA,SAAU,EACV,eACA,OACA,iBACA,eACA,iBACA,gBACA,mBACA,iBACA,gBACA,cACJ,CACJ,CAEA,IAAa,GAAmB,GAA2D,IAAI,EAE/F,SAAgB,GAAe,CAC3B,IAAM,EAAM,GAAW,EAAgB,EACvC,GAAI,CAAC,EACD,MAAM,MAAM,oDAAoD,EAEpE,OAAO,CACX,CAEA,SAAgB,GAAyE,CACrF,WACA,GAAG,GACiF,CAEpF,OAAO,EAAC,GAAiB,SAAlB,CAA2B,MAAO,EAAQ,UAAoC,CAAA,CACzF,CAEA,SAAS,IAAe,CACpB,GAAM,CAAE,QAAO,eAAc,gBAAe,eAAgB,EAAa,EACnE,EAAoB,EAAqB,EAC/C,GAAI,EAAM,WAAY,OAAO,KAC7B,GAAI,EAAM,QACN,OACI,EAAC,OAAD,CAAM,UAAU,0BAAhB,SAAA,CACI,EAAC,EAAD,CAAQ,UAAU,mBAAqB,CAAA,EACvC,EAAC,OAAD,CAAA,SAAO,EAAM,OAAO,OAAc,CAAA,CAChC,IAEd,GAAI,EAAM,MAAM,MAAM,SAAW,EAAG,CAChC,IAAM,EAAqB,GAAgB,EAAe,EAAkB,CAAY,EAAG,CAAC,CAAC,CAAC,YAAY,EACpG,EAA0B,OAAO,KAAK,CAAa,CAAC,CAAC,OAAS,GAAK,EAAY,OAAS,EAC9F,OACI,EAAC,MAAD,CAAK,UAAU,kCAAf,SAAA,CACI,EAAC,IAAD,CAAG,UAAU,kCACR,SAAA,EAAqB,MAAM,EAAmB,SAAW,mBAC3D,CAAA,EACF,GACG,EAAC,IAAD,CAAG,UAAU,sBAAsB,SAAA,uCAAwC,CAAA,CAE9E,GAEb,CACA,OAAO,EAAA,EAAA,CAAA,SAAE,iDAAiD,CAAA,CAC9D,CAEA,SAAS,GAAQ,CAAE,qBAAqD,CACpE,GAAM,CAAE,QAAO,WAAU,WAAU,eAAc,QAAS,EAAa,EACjE,EAAc,EAAa,OAAO,EAAsB,EACxD,EAAa,IAAa,QAAU,CAAC,CAAC,EAe5C,OAbI,EAAM,UAEF,EAAC,MAAD,CAAK,UAAU,oDACX,SAAA,EAAC,EAAD,CAAS,CAAA,CACR,CAAA,EAET,EAAS,YAAY,CAAC,CAAC,KAAK,SAAW,EAEnC,EAAC,MAAD,CAAK,UAAU,+DACX,SAAA,EAAC,GAAD,CAAe,CAAA,CACd,CAAA,EAET,EAAmB,EAAC,GAAD,CAAgB,OAAO,QAAS,EAAa,UAAW,CAAoB,CAAA,EAC5F,EAAC,GAAD,CAAc,UAAU,QAAU,CAAA,CAC7C,CAKA,SAAgB,GAAU,CAAE,YAAW,oBAAmB,GAAG,GAAyB,CAClF,GAAM,CAAE,WAAU,OAAM,gBAAiB,EAAa,EAChD,EAAa,IAAa,QAAU,CAAC,CAAC,EAE5C,OACI,EAAA,EAAA,CAAA,SACI,EAAC,GAAD,CAAA,SAAA,CAEK,GAAgB,EAAC,GAAD,CAAU,CAAA,EAC3B,EAAC,UAAD,CACI,GAAI,EACJ,UAAW,EAAW,qBAAuB,EAAmC,GAAtB,oBAA0B,CAAS,EAFjG,SAAA,CAKI,EAAC,MAAD,CAAK,UAAU,oEAAoE,SAAU,EACzF,SAAA,EAAC,GAAD,CAA4B,mBAAoB,CAAA,CAC/C,CAAA,EAGJ,CAAC,GACE,EAAC,MAAD,CAAK,UAAU,+GAAf,SAAA,CACI,EAAC,MAAD,CAAK,UAAU,gBAAf,SAAA,CACI,EAAC,GAAD,CAAe,CAAA,EACf,EAAC,GAAD,CAAW,CAAA,CACV,CACL,CAAA,EAAA,EAAC,GAAD,CAAY,CAAA,CACX,CAEJ,CAAA,CAAA,CACa,CAAA,CAAA,CAAA,CAAA,CAC5B,CAAA,CAEV,CAQA,SAAS,GAAY,CACjB,OACA,UACA,YACA,GAAG,GAI0B,CAC7B,GAAM,CAAE,WAAU,kBAAmB,EAAa,EAC5C,CAAE,iBAAkB,EAAa,EACjC,EAAc,GAAuB,IAAI,EAoB/C,OAjBA,MAAgB,CACZ,IAAM,EAAK,EAAY,QACvB,GAAI,CAAC,EAAI,OAET,IAAM,EAAW,IAAI,qBACjB,GAAW,CACH,EAAQ,EAAE,CAAC,gBAAkB,EAAc,aAAe,CAAC,EAAc,oBACzE,EAAc,cAAc,CAEpC,EACA,CAAE,UAAW,EAAI,CACrB,EAGA,OADA,EAAS,QAAQ,CAAE,MACN,EAAS,WAAW,CACrC,EAAG,CAAC,EAAc,YAAa,EAAc,kBAAkB,CAAC,EAG5D,EAAC,MAAD,CAAK,GAAI,EAAO,UAAW,EAAW,EAAW,mDAAmD,EAApG,SAAA,CACK,EAAS,YAAY,CAAC,CAAC,KAAK,KAAK,EAAK,IAAU,CAC7C,IAAM,EAAgC,CAClC,WAAY,EAAI,cAAc,EAC9B,aAAgB,EAAI,eAAe,EACnC,gBACJ,EACA,OAAO,EAAC,GAAD,CAAA,SAAwB,EAAK,EAAI,SAAU,EAAS,EAAW,CAAK,CAAY,EAAjE,EAAI,EAA6D,CAC3F,CAAC,EAGD,EAAC,MAAD,CAAK,IAAK,EAAa,UAAU,qDAC5B,SAAA,EAAc,oBAAsB,EAAC,EAAD,CAAS,CAAA,CAC7C,CAAA,CACJ,GAEb,CAGA,SAAS,IAAe,CAGpB,GAFoB,EAEhB,IAAgB,kBAChB,OAAO,KAGX,GAAM,CAAE,YAAa,EAAa,EAC5B,CAAC,EAAU,GAAe,EAAwB,IAAI,EAEtD,EAAoB,EAAqB,EAEzC,EAAU,GACZ,GAAU,EAAa,EACvB,GAAU,GAAgB,CACtB,iBAAkB,EACtB,CAAC,CACL,EACA,OACI,EAAC,GAAD,CACa,UACT,mBAAoB,GACpB,YAAa,GAAS,CAClB,GAAM,CAAE,UAAW,EACnB,EAAY,EAAO,GAAG,SAAS,CAAC,CACpC,EACA,UAAW,GAAS,CAChB,GAAM,CAAE,SAAQ,QAAS,EAEzB,GAAI,GAAQ,EAAO,KAAO,EAAK,GAAI,CAC/B,IAAM,EAAc,EAAS,SAAS,CAAC,CAAC,YAClC,EAAW,EAAY,QAAQ,EAAO,GAAG,SAAS,CAAC,EACnD,EAAW,EAAY,QAAQ,EAAK,GAAG,SAAS,CAAC,EACvD,EAAS,eAAe,CAAC,GAAG,GAAU,EAAa,EAAU,CAAQ,CAAC,CAAC,CAC3E,CAEA,EAAY,IAAI,CACpB,EAEA,SAAA,EAAC,GAAD,CAAiB,MAAO,EAAS,SAAS,CAAC,CAAC,YAAa,SAAU,GAAnE,SAAA,CACI,EAAC,EAAD,CACI,MACI,EAAA,EAAA,CAAA,SAAA,CACI,EAAC,GAAD,CAAW,UAAU,4CAA8C,CAAA,EAAC,SAEtE,CAAA,CAAA,EAEN,cAAc,WACd,KAAM,KACN,MAAO,EAAS,kBAAkB,EAElC,aAAc,EAAS,sBAAsB,CAAC,CAAC,IAAI,GAAK,EAAE,EAAE,EAXhE,SAAA,CAaI,EAAC,EAAD,CAAU,aAAgB,EAAS,wBAAwB,EAAG,UAAW,SAAU,SAAA,cAEzE,CAAA,EACT,EAAS,SAAS,CAAC,CAAC,YAAY,IAAI,GAAS,CAC1C,IAAM,EAAM,EAAS,kBAAkB,CAAC,CAAC,KAAK,GAAK,EAAE,KAAO,CAAK,EAGjE,MADI,CAAC,GAAO,EAAI,KAAO,YAAc,EAAI,KAAO,EAA0B,KACnE,EAAC,EAAD,CAA2B,OAAQ,CAAM,EAAtB,EAAI,EAAkB,CACpD,CAAC,CACK,CACV,CAAA,EAAA,EAAC,GAAD,CAAA,SACK,EACG,EAAC,MAAD,CAAK,UAAU,qCAAsC,SAAA,EAAkB,CAAQ,CAAO,CAAA,EACtF,IACK,CAAA,CACA,GACT,CAAA,EAGhB,SAAS,EAAa,CAAE,UAA4C,CAChE,GAAM,CAAE,aAAY,YAAW,aAAY,YAAW,cAAe,GAAY,CAAE,GAAI,EAAO,EAAG,CAAC,EAC5F,EAAQ,CACV,UAAW,GAAI,UAAU,SAAS,CAAS,EAC3C,aACA,OAAQ,KACZ,EACA,OACI,EAAC,EAAD,CACI,IAAK,EACE,QACP,GAAI,EACJ,GAAI,EAAO,GACX,aAAgB,EAAO,iBAAiB,EACxC,WAAY,CAAC,EAAO,WAAW,EAC/B,UAAU,oBAPd,SAAA,CASI,EAAC,GAAD,CAAQ,GAAI,EAAW,UAAU,yCAA2C,CAAA,EAC3E,GAAoB,CAAM,EAC1B,EAAO,YAAY,GAAK,EAAC,GAAD,CAAU,UAAU,YAAY,UAAW,EAAO,YAAY,CAAI,CAAA,CACrF,GAElB,CACJ,CAEA,SAAS,IAAY,CACjB,GAAM,CAAE,YAAa,EAAa,EAC5B,EAAW,EAAS,YAAY,EACtC,OACI,EAAC,MAAD,CAAK,UAAU,0BAAf,SAAA,CACI,EAAC,OAAD,CAAM,UAAU,uCACX,SAAA,GAAG,EAAS,SAAS,CAAC,CAAC,WAAW,UAAY,EAAS,SAAS,CAAC,CAAC,WAAW,SAAW,EAAE,KAAK,KAAK,KAChG,EAAS,SAAS,CAAC,CAAC,WAAW,UAAY,GAAK,EAAS,SAAS,CAAC,CAAC,WAAW,SAChF,CACJ,EAAE,MAAM,GAAU,eAAe,GAC/B,CAAA,GAEJ,EAAS,eAAe,GAAK,EAAS,mBAAmB,IACvD,EAAA,EAAA,CAAA,SAAA,CACI,EAAC,EAAD,CACI,aAAW,aACX,YAAe,EAAS,UAAU,EAClC,WAAY,CAAC,EAAS,mBAAmB,EACzC,QAAQ,UACR,KAAM,UAEN,SAAA,EAAC,EAAD,CAAU,CAAA,CACN,CAAA,EACR,EAAC,EAAD,CACI,aAAW,gBACX,YAAe,EAAS,aAAa,EACrC,WAAY,CAAC,EAAS,mBAAmB,EACzC,QAAQ,UACR,KAAM,UAEN,SAAA,EAAC,EAAD,CAAS,CAAA,CACL,CAAA,EACR,EAAC,EAAD,CACI,aAAW,YACX,YAAe,EAAS,SAAS,EACjC,WAAY,CAAC,EAAS,eAAe,EACrC,QAAQ,UACR,KAAM,UAEN,SAAA,EAAC,EAAD,CAAU,CAAA,CACN,CAAA,EACR,EAAC,EAAD,CACI,aAAW,YACX,YAAe,EAAS,SAAS,EACjC,WAAY,CAAC,EAAS,eAAe,EACrC,QAAQ,UACR,KAAM,UAEN,SAAA,EAAC,EAAD,CAAS,CAAA,CACL,CAAA,CACV,CAAA,CAAA,CAEL,GAEb,CAEA,SAAS,IAAW,CAGhB,GAFoB,EAEhB,IAAgB,kBAChB,OAAO,KAGX,GAAM,CAAE,YAAa,EAAa,EAGlC,OACI,EAAC,EAAD,CACI,MAAO,EAAS,SAAS,CAAC,CAAC,WAAW,SAAS,SAAS,EACxD,cAAc,SACd,KAAM,KACN,aAAc,CAAC,EAAS,SAAS,CAAC,CAAC,WAAW,SAAS,SAAS,CAAC,EACjE,MAAO,CARK,GAAI,GAAI,GAAI,GAAI,EAQrB,CAAA,CAAW,IAAI,IAAM,CAAE,GAAI,EAAE,SAAS,EAAG,MAAO,CAAE,EAAE,EAE1D,SAAA,GAAS,EAAC,EAAD,CAAU,aAAgB,EAAS,YAAY,EAAM,KAAK,EAAI,SAAA,EAAM,KAAgB,CAAA,CACxF,CAAA,CAElB,CAEA,SAAS,IAAU,CACf,GAAM,CACF,QACA,WACA,cACA,iBACA,eACA,WACA,cACA,OACA,iBACA,mBACA,kBACA,EAAa,EACX,EAAkB,EAAS,oBAAoB,CAAC,CAAC,KAAK,OAAS,EAC/D,EAAW,EAAY,EAEvB,EAAkB,EACnB,OAAO,GAAM,EAAG,eAAiB,QAAQ,CAAC,CAC1C,OAAO,GAAO,EAAG,eAAiB,aAAgB,CAAe,EAEtE,OACI,EAAC,UAAD,CAAS,UAAU,kEAAnB,SAAA,CACI,EAAC,MAAD,CAAK,UAAW,EAAW,4CAA4C,EAAvE,SAAA,CACI,EAAC,EAAD,CACI,aAAW,UACX,UAAW,EAAM,WACjB,YAAe,EAAM,QAAQ,EAC7B,QAAS,UACT,KAAM,OACN,UAAW,EAAW,iBAAiB,EAEvC,SAAA,EAAC,EAAD,CAAY,CAAA,CACR,CAAA,EACR,EAAC,EAAD,CACI,MAAO,EACP,SAAU,EACV,UAAW,EAAW,8BAA8B,CACvD,CAAA,EACD,EAAC,GAAD,CAAiC,iBAAgB,UAAW,EAAW,iBAAiB,CAAI,CAAA,CAC3F,IAGJ,CAAC,GACE,EAAC,MAAD,CAAK,UAAU,gBAAf,SAAA,CACI,EAAC,GAAD,CAAc,MAAO,EAAiB,WAAY,EAAM,UAAa,CAAA,EACpE,GACG,CAAC,GACD,CAAC,GACG,EAAC,MAAD,CAAK,UAAU,2DAAf,SAAA,CACI,EAAC,EAAD,CACI,QAAS,IAAa,QAAU,UAAY,UAC5C,KAAK,OACL,YAAe,EAAY,OAAO,EAClC,aAAW,aACX,UAAU,cAEV,SAAA,EAAC,EAAD,CAAS,CAAA,CACL,CAAA,EACR,EAAC,EAAD,CACI,QAAS,IAAa,OAAS,UAAY,UAC3C,KAAK,OACL,YAAe,EAAY,MAAM,EACjC,aAAW,YACX,UAAU,cAEV,SAAA,EAAC,EAAD,CAAe,CAAA,CACX,CAAA,CACP,CAEZ,CAAA,CAAA,IAER,GAAY,EAAgB,OAAS,GAClC,EAAC,MAAD,CAAK,UAAU,iFACX,SAAA,EAAC,GAAD,CACI,MAAO,EACP,WAAY,EAAM,WAClB,gBAAgB,uBACnB,CAAA,CACA,CAAA,CAEJ,GAEjB,CAEA,SAAS,GAAS,CACd,YACA,GAAG,GACoF,CAGlF,OAF2B,EAA5B,IAAc,MAAe,EACxB,IAAc,OAAgB,EAC1B,GAFmB,CAAW,UAAU,WAAW,GAAI,CAAQ,CAEnB,CAC7D,CAEA,SAAS,GAAoB,EAAsC,CAC/D,IAAM,EAAoB,EAAqB,EACzC,EAAY,EAAO,UAAU,OACnC,OAAO,OAAO,GAAc,SAAW,EAAY,EAAkB,EAAO,EAAE,CAClF,CAOA,SAAS,GAAwB,EAAuC,CACpE,IAAM,EAAc,EAAK,OAAO,UAAU,MAAM,YAC1C,EAAQ,EAAK,SAAS,EAE5B,GAAI,GAAU,KACV,OAAO,KAGX,OAAQ,EAAR,CACI,IAAK,OACD,OAAO,EAAC,OAAD,CAAM,UAAU,eAAgB,SAAA,EAAW,CAAK,CAAQ,CAAA,EACnE,IAAK,SACD,OAAO,EAAC,OAAD,CAAM,UAAU,gCAAiC,SAAA,EAAa,CAAK,CAAQ,CAAA,EACtF,IAAK,UACD,OACI,EAAC,EAAD,CAAO,QAAiB,EAAS,UAAY,cAAe,UAAU,aACjE,SAAA,OAAO,CAAK,CACV,CAAA,EAEf,IAAK,QACD,OAAO,EAAC,EAAD,CAAA,SAAQ,OAAO,CAAK,CAAS,CAAA,EACxC,IAAK,OAED,OACI,EAAC,EAAD,CAAU,OAFS,MAAM,QAAQ,CAAK,EAAsB,EAAlB,CAAC,OAAO,CAAK,CAAC,EAAI,CAErC,IAAI,IAAS,CAAE,GAAI,EAAM,KAAM,CAAK,EAAE,EAAG,UAAU,eACrE,SAAA,GAAQ,EAAC,GAAD,CAAA,SAAM,EAAK,IAAU,CAAA,CACxB,CAAA,EAElB,IAAK,cACD,GAAM,CAAC,EAAc,GAAY,EACjC,OACI,EAAC,GAAD,CACI,eAAe,OACf,MAAO,GAAG,EAAa,GAAG,IAC1B,SAAU,EACA,WACV,MAAO,CACV,CAAA,EAET,IAAK,UACD,OAAO,EAAC,GAAD,CAAoB,OAAQ,CAAA,EACvC,IAAK,OACD,OAAO,EAAC,OAAD,CAAM,UAAU,mBAAoB,SAAA,OAAO,CAAK,CAAQ,CAAA,EACnE,IAAK,WACD,OAAO,EAAe,CAAK,EAC/B,IAAK,OACD,OAAO,EAAW,CAAK,EAC3B,IAAK,KACD,OAAO,EAAO,IAAiC,EACnD,IAAK,cACD,OAAO,GAAkB,IAAoB,EACjD,IAAK,uBACD,OAAO,EAAS,kBAAkB,CAAK,EAC3C,IAAK,2BACD,OAAO,EAAiC,CAAK,EACjD,QACI,OAAO,OAAO,CAAK,CAC3B,CACJ,CAEA,SAAS,GAAW,CAAE,UAA4C,CAC9D,IAAM,EAAY,EAAO,OAAO,UAAU,OAc1C,OAZI,OAAO,GAAc,UAAY,CAAC,GAIlC,OAAO,GAAc,YAEjB,OADW,EAAU,EAAO,WAAW,CAChC,GAAW,SALf,GAAoB,EAAO,MAAM,EAQjC,GAAW,EAAW,EAAO,WAAW,CAAC,CAIxD,CAGA,SAAS,GAAa,CAAE,aAA0D,CAC9E,GAAM,CAAE,WAAU,iBAAkB,EAAa,EAC3C,GAAkB,EAAmB,EAAoB,EAAiB,SAC5E,EACI,kDACA,GAAY,kBAAkB,EAAO,6BACrC,CACJ,EACJ,OACI,EAAC,GAAD,CAAgB,UAAW,EAAW,sBAAuB,CAAS,EAAtE,SAAA,CACI,EAAC,GAAD,CAAa,UAAU,wDAClB,SAAA,EAAS,gBAAgB,CAAC,CAAC,IAAI,GAC5B,EAAC,GAAD,CAA+B,UAAU,2BACpC,SAAA,EAAY,QAAQ,IAAI,GACrB,EAAC,GAAD,CACI,MAAM,MAEN,QAAS,EAAO,QAChB,UAAW,EAAe,EAAO,KAAO,EAAmB,sBAAsB,EAJrF,SAAA,CAMK,CAAC,EAAO,OAAO,WAAW,GAAK,CAAC,EAAO,eACpC,EAAC,MAAD,CACI,UAAW,EACP,qFACA,EAAO,KAAO,EAAoB,iBAAmB,eACzD,EAEA,SAAA,EAAC,GAAD,CAAoB,QAAS,CAAA,CAC5B,CAAA,EAER,EAAO,OAAO,WAAW,GACtB,EAAC,EAAD,CACI,QAAQ,QACR,KAAM,OACN,UAAW,EACP,4EACA,EAAO,KAAO,EAAoB,iBAAmB,gBACrD,EAAO,OAAO,YAAY,EAAI,eAAiB,EACnD,EACA,QAAS,EAAO,OAAO,wBAAwB,EARnD,SAAA,CAUI,EAAC,OAAD,CAAA,SACI,EAAC,GAAD,CAAoB,QAAS,CAAA,CAC3B,CAAA,EACL,EAAO,OAAO,YAAY,GACvB,EAAC,GAAD,CAAU,UAAW,EAAO,OAAO,YAAY,CAAI,CAAA,CAEnD,CAEL,CAAA,CAAA,CAjCF,EAAA,EAAO,EAiCL,CACd,CACK,EAvCK,EAAY,EAuCjB,CACb,CACQ,CAAA,EACb,EAAC,GAAD,CAAA,SACK,EAAS,YAAY,CAAC,CAAC,KAAK,IAAI,GAC7B,EAAC,GAAD,CACI,UAAW,EACP,iJACA,GAAiB,iEACrB,EAEA,gBAAe,EAAI,cAAc,EACjC,GAAK,GAAiB,CAClB,KAAM,OACN,SAAU,EACV,QAAU,GAA6C,CAE9C,EAAE,OAAmB,QAAQ,qDAAqD,GAGvF,EAAc,EAAI,QAAQ,CAC9B,EACA,UAAY,GAAgD,CACpD,EAAE,MAAQ,SAAS,EAAc,EAAI,QAAQ,CACrD,CACJ,EAEC,SAAA,EAAI,gBAAgB,CAAC,CAAC,IAAI,GAAQ,CAC/B,IAAM,EAAkB,EAAK,OAAO,KAAO,EACrC,EAAc,EAAK,OAAO,UAAU,MAAM,YAC1C,GAAwB,CAAI,EAC5B,GAAW,EAAK,OAAO,UAAU,KAAM,EAAK,WAAW,CAAC,EAE9D,OACI,EAAC,GAAD,CAEI,UAAW,EACP,EACI,EACA,EACM,oIACA,GACN,KACJ,EACA,GAAmB,kCACvB,EAEC,SAAA,CACM,EAbF,EAAK,EAaH,CAEnB,CAAC,CACK,EAzCD,EAAI,EAyCH,CACb,CACM,CAAA,CACC,GAExB,CA0CA,SAAS,GAAsB,EAAgD,CAC3E,OAAO,EAAK,eAAiB,MACjC,CAEA,SAAS,GAA0B,EAAuD,CACtF,OAAO,EAAK,eAAiB,QACjC,CAEA,SAAS,GAAwB,EAAqD,CAClF,OAAO,EAAK,eAAiB,UACjC,CAWA,SAAS,GAAgB,CAAE,QAAO,aAAY,mBAAyC,CACnF,GAAM,CAAE,aAAY,eAAgB,EAAoB,EAClD,CAAE,WAAU,iBAAkB,EAAa,EAEjD,SAAS,EAA4B,EAAsB,EAAoB,CAQ3E,OAPK,EAAK,WAEN,GAAmB,CAAI,EAChB,EAAK,WAAW,EAChB,GAAqB,CAAI,EACzB,EAAK,WAAW,CAAI,EAExB,GAPsB,EAQjC,CAEA,IAAM,EAAe,EAAS,oBAAoB,CAAC,CAAC,KAAK,IAAI,GAAK,EAAE,QAAQ,EAC5E,OACI,EAAA,EAAA,CAAA,SACK,EAAM,KAAK,EAAM,IAAM,CACpB,IAAM,EAAO,EAAK,KACZ,EAAa,EAAyB,EAAM,CAAY,GAAK,EAEnE,OACI,EAAC,EAAD,CAEI,aAAY,EAAK,MACjB,KAAK,SACO,aACZ,UAAW,EACP,8EACA,CACJ,EACA,QAAS,GAAK,CACV,IAAM,EAAU,CAAE,MAAO,EAAG,aAAY,cAAa,cAAe,CAAc,EAE9E,GAAmB,CAAI,EACvB,EAAK,QAAQ,CAAO,EACb,GAAqB,CAAI,GAChC,EAAK,QAAQ,CAAE,GAAG,EAAS,KAAM,CAAa,CAAC,CAEvD,EACA,QAAS,EAAK,SAAW,UAlB7B,SAAA,CAoBK,GAAQ,EAAC,EAAD,CAAM,cAAA,EAAa,CAAA,EAC5B,EAAC,OAAD,CAAA,SAAO,EAAK,KAAY,CAAA,CACpB,CArBC,EAAA,GAAG,EAAK,MAAM,GAAG,GAqBlB,CAEhB,CAAC,CACH,CAAA,CAEV,CAEA,SAAS,GAAuB,CAC5B,QACA,QACA,QAKD,CACC,GAAM,CAAE,aAAY,eAAgB,EAAoB,EAClD,CAAE,iBAAkB,EAAa,EA6BvC,OA5BI,EAAM,OAAS,EAEX,EAAC,MAAD,CAAK,UAAU,oBACV,SAAA,EAAM,KAAK,EAAI,IAAM,CAClB,IAAM,EAAO,EAAG,KACV,EAAY,OAAO,EAAG,OAAU,WAAa,EAAG,MAAM,CAAI,EAAI,EAAG,MACvE,OACI,EAAC,GAAD,CAAA,SAAA,CACI,EAAC,EAAD,CACI,aAAY,OAAO,GAAc,SAAW,EAAY,IAAA,GACxD,WAAY,EAAG,aAAa,CAAI,GAAK,GACrC,QAAQ,QACR,KAAK,OACL,YAAe,CACX,IAAM,EAAU,CAAE,aAAY,aAAY,EAC1C,EAAG,QAAQ,CAAE,GAAG,EAAS,OAAM,cAAe,CAAc,CAAC,CACjE,EAEA,SAAA,EAAC,EAAD,CAAM,UAAU,WAAa,CAAA,CACzB,CAAA,EACR,EAAC,GAAD,CAAA,SAAU,CAAmB,CAAA,CACjB,CAAA,EAdK,GAAG,EAAE,GAAG,OAAO,GAAc,SAAW,EAAY,IAczD,CAExB,CAAC,CACA,CAAA,EAKT,EAAC,EAAD,CAAU,YAAa,GAAO,aAAW,UAAiB,QAAO,KAAM,OAClE,SAAA,EAAM,KAAK,EAAI,IAAM,CAClB,IAAM,EAAO,EAAG,KACV,EAAQ,OAAO,EAAG,OAAU,WAAa,EAAG,MAAM,CAAI,EAAI,EAAG,MACnE,OACI,EAAC,EAAD,CAEI,GAAI,OAAO,GAAU,SAAW,EAAQ,IAAA,GACxC,WAAY,EAAG,aAAa,CAAI,GAAK,GACrC,aAAgB,CACZ,IAAM,EAAU,CAAE,aAAY,aAAY,EACtC,GAAuB,CAAE,GACzB,EAAG,QAAQ,CAAE,GAAG,EAAS,OAAM,cAAe,CAAc,CAAC,CAErE,EATJ,SAAA,CAWI,EAAC,EAAD,CAAM,UAAU,WAAa,CAAA,EAC5B,CACK,CAZD,EAAA,GAAG,EAAE,GAAG,OAAO,GAAU,SAAW,EAAQ,IAY3C,CAElB,CAAC,CACK,CAAA,CAElB,CC7xCA,IAAa,GAA8B,CACvC,KACA,KACA,KACA,KACA,KACA,KACA,KACA,MACA,KACA,MACA,KACA,MACA,SACJ,EAGa,GAAuE,CAChF,GAAI,WACJ,GAAI,eACJ,GAAI,WACJ,GAAI,mBACJ,GAAI,cACJ,GAAI,YACJ,GAAI,WACJ,IAAK,mBACL,GAAI,eACJ,IAAK,2BACL,GAAI,YACJ,IAAK,wBACL,QAAS,SACb,EAEM,GAA6E,CAC/E,GAAI,IACJ,GAAI,IACJ,GAAI,WACJ,GAAI,YACJ,GAAI,cACJ,GAAI,YACJ,GAAI,KACJ,IAAK,SACL,GAAI,IACJ,IAAK,IACL,GAAI,IACJ,IAAK,IACL,QAAS,GACb,EA2BA,SAAS,EAAgB,EAAkB,EAAmC,CAC1E,IAAM,EAAO,EAAO,KACd,EAAK,GAAG,EAAS,GAAG,KAAK,IAAI,IAE7B,EAAuB,IAAS,QAAU,IAAS,iBAAmB,GAAS,EAAO,cAAgB,GACtG,EAAW,EAAuB,GAAiB,EAAK,CAAC,GAAK,KAC9D,EAAO,CAAE,KAAI,WAAU,WAAU,aAAc,CAAqB,EAE1E,OAAQ,EAAR,CACI,IAAK,OACD,MAAO,CAAE,GAAG,EAAM,OAAM,MAAO,EAAK,EACxC,IAAK,iBACD,MAAO,CAAE,GAAG,EAAM,OAAM,MAAO,EAAO,QAAQ,EAAE,EAAE,IAAM,EAAG,EAC/D,IAAK,SACD,MAAO,CAAE,GAAG,EAAM,OAAM,MAAO,EAAG,EACtC,IAAK,OACD,MAAO,CACH,GAAG,EACH,OACA,MACI,IAAa,UACN,CAAC,IAAI,KAAK,CAAA,CAAE,YAAY,EAAG,IAAI,KAAK,CAAA,CAAE,YAAY,CAAC,EACpD,IAAI,KAAK,CAAA,CAAE,YAAY,CACrC,EACJ,IAAK,KACD,MAAO,CAAE,GAAG,EAAM,OAAM,MAAO,EAAG,EACtC,IAAK,YACD,MAAO,CAAE,GAAG,EAAM,OAAM,MAAO,CAAC,CAAE,EACtC,IAAK,OACD,MAAO,CAAE,GAAG,EAAM,OAAM,MAAO,IAAI,GAAuB,EAC9D,IAAK,SACD,MAAO,CAAE,GAAG,EAAM,OAAM,MAAO,CAAE,CACzC,CACJ,CA2CA,IAAM,GAAmE,CACrE,KAAM,CAAC,IAAI,EACX,iBAAkB,CAAC,IAAI,EACvB,KAAM,CAAC,KAAM,KAAK,EAClB,GAAI,CAAC,KAAM,KAAK,EAChB,YAAa,CAAC,KAAM,KAAK,EACzB,OAAQ,CAAC,KAAM,KAAM,KAAM,KAAM,KAAM,KAAM,KAAM,KAAK,EACxD,KAAM,CAAC,UAAW,KAAM,IAAI,EAC5B,OAAQ,CAAC,KAAM,KAAM,KAAM,MAAO,KAAM,KAAK,CACjD,EAWA,SAAS,GAAmB,EAAgB,EAAuB,CAC/D,IAAI,EAAQ,EAAQ,QAAU,IAAA,GAA4B,EAAE,MAAlB,EAAQ,MAC5C,EAAc,EAAQ,UAAY,EAAE,SAC1C,GAAI,EAAE,OAAS,QAAU,EAAQ,WAAa,IAAA,GAAW,CACrD,GAAI,IAAgB,WAAa,CAAC,MAAM,QAAQ,CAAK,EAAG,CACpD,IAAM,EAAM,OAAO,GAAU,SAAW,EAAQ,IAAI,KAAK,CAAA,CAAE,YAAY,EACvE,EAAQ,CAAC,EAAK,CAAG,CACrB,MAAW,IAAgB,WAAa,MAAM,QAAQ,CAAK,IACvD,EAAQ,EAAM,IAAM,IAAI,KAAK,CAAA,CAAE,YAAY,EAEnD,CACA,OAAO,CACX,CAIA,SAAS,IAAmB,CACxB,GAAM,CAAE,aAAY,gBAAiB,EAAa,EAkDlD,MAAO,CAAE,cA/Ca,EAAkB,IAA0B,CAC9D,EAAW,GAAQ,CACf,IAAM,EAAO,EAAK,KAAK,GAAK,EAAE,WAAa,CAAQ,GAAK,EAAgB,EAAU,EAAa,EAAS,EAClG,EAAU,CACZ,GAAG,EACH,GAAG,EACH,MAAO,GAAmB,EAAM,CAAO,EACvC,OAAQ,EACZ,EACA,OAAO,EAAK,KAAK,GAAK,EAAE,KAAO,EAAK,EAAE,EAChC,EAAK,IAAI,GAAM,EAAE,KAAO,EAAK,GAAK,EAAU,CAAE,EAC9C,CAAC,GAAG,EAAM,CAAO,CAC3B,CAAC,CACL,EAkCuB,aA/BD,GAAe,CACjC,EAAW,GAAQ,CACf,IAAM,EAAS,EAAK,KAAK,GAAK,EAAE,KAAO,CAAE,EAazC,OAZK,EACD,EAAO,UACA,EAAK,IAAI,GACZ,EAAE,KAAO,EACH,CACI,GAAG,EAAgB,EAAE,SAAU,EAAa,EAAE,SAAS,EACvD,OAAQ,GACR,UAAW,EACf,EACA,CACV,EAEG,EAAK,OAAO,GAAK,EAAE,KAAO,CAAE,EAZf,CAaxB,CAAC,CACL,EAcqC,oBAZP,CAC1B,EAAW,GACP,EACK,OAAO,GAAK,EAAE,SAAS,CAAC,CACxB,IAAI,IAAM,CACP,GAAG,EAAgB,EAAE,SAAU,EAAa,EAAE,SAAS,EACvD,OAAQ,GACR,UAAW,EACf,EAAE,CACV,CACJ,CAEqD,CACzD,CAEA,SAAS,GAAsB,EAAqB,EAAoD,CACpG,OAAQ,EAAO,KAAf,CACI,IAAK,SACL,IAAK,KACD,OAAO,EAAO,OAAS,GAC3B,IAAK,SACD,OAAO,EAAO,OAAO,SAAS,GAAK,GACvC,IAAK,OACD,OAAO,EAAO,MAAQ,OAAS,QACnC,IAAK,iBAAkB,CACnB,IAAM,EAAS,EAAa,EAAO,UACnC,GAAI,CAAC,GAAU,EAAO,OAAS,iBAAkB,OAAO,EAAO,OAAS,GACxE,IAAM,EAAS,EAAO,QAAQ,KAAK,GAAK,EAAE,KAAO,EAAO,KAAK,EAC7D,OAAO,OAAO,GAAQ,OAAU,SAAW,EAAO,MAAS,EAAO,OAAS,EAC/E,CACA,IAAK,OACD,GAAI,MAAM,QAAQ,EAAO,KAAK,EAAG,CAC7B,GAAM,CAAC,EAAM,GAAM,EAAO,MAC1B,MAAO,GAAG,EAAW,EAAM,CAAE,UAAW,OAAQ,CAAC,GAAK,GAAG,KAAK,EAAW,EAAI,CAAE,UAAW,OAAQ,CAAC,GAAK,IAC5G,CACA,OAAO,EAAO,MAAS,EAAW,EAAO,MAAO,CAAE,UAAW,OAAQ,CAAC,GAAK,GAAM,GACrF,IAAK,OACD,OAAO,EAAO,OAAS,EAAO,MAAM,KAAO,EAAI,GAAG,EAAO,MAAM,KAAK,WAAa,GACrF,IAAK,YACD,OAAO,EAAO,OAAS,EAAO,MAAM,OAAS,EACvC,EAAO,MAAM,SAAW,EACpB,SACA,GAAG,EAAO,MAAM,OAAO,QAC3B,EACd,CACJ,CAEA,SAAS,GAAiB,CACtB,SACA,eACA,YAKD,CACC,GAAI,EAAO,OAAS,UAAY,EAAO,OAAS,KAC5C,OACI,EAAC,EAAD,CACI,UAAA,GACA,MAAO,EAAO,OAAS,GACb,WACV,aAAW,eACX,eAAe,sBAClB,CAAA,EAIT,GAAI,EAAO,OAAS,SAChB,OACI,EAAC,EAAD,CACI,UAAA,GACA,MAAO,EAAO,MACJ,WACV,aAAW,eACX,eAAe,sBAClB,CAAA,EAIT,GAAI,EAAO,OAAS,OAAQ,CACxB,GAAI,EAAO,WAAa,UAAW,CAC/B,GAAM,CAAC,EAAS,GAAS,MAAM,QAAQ,EAAO,KAAK,EAC7C,EAAO,MACP,CAAC,IAAI,KAAK,CAAA,CAAE,YAAY,EAAG,IAAI,KAAK,CAAA,CAAE,YAAY,CAAC,EACnD,EAAO,GAAc,EAAS,GAAiB,CAAC,EAChD,EAAK,GAAc,EAAO,GAAiB,CAAC,EAClD,OACI,EAAC,MAAD,CAAK,UAAU,yBAAf,SAAA,CACI,EAAC,EAAD,CACI,UAAA,GACA,aAAA,GACA,MAAM,OACN,MAAO,EACP,SAAU,GAAK,EAAS,CAAC,EAAI,EAAE,iBAAiB,EAAI,EAAS,CAAK,CAAC,EACnE,eAAe,sBAClB,CAAA,EACD,EAAC,EAAD,CACI,aAAA,GACA,MAAM,KACN,MAAO,EACP,SAAU,GAAK,EAAS,CAAC,EAAS,EAAI,EAAE,iBAAiB,EAAI,CAAK,CAAC,EACnE,eAAe,sBAClB,CAAA,CACA,GAEb,CACA,IAAM,EACF,EAAO,OAAS,CAAC,MAAM,QAAQ,EAAO,KAAK,EAAI,GAAc,EAAO,MAAO,GAAiB,CAAC,EAAI,KACrG,OACI,EAAC,EAAD,CACI,UAAA,GACA,aAAA,GACO,QACP,SAAU,GAAK,EAAS,EAAI,EAAE,iBAAiB,EAAI,IAAI,KAAK,CAAA,CAAE,YAAY,CAAC,EAC3E,aAAW,cACX,eAAe,sBAClB,CAAA,CAET,CAEA,GAAI,EAAO,OAAS,OAAQ,CACxB,IAAM,EAAS,EAAa,EAAO,UAEnC,OADI,EAAO,OAAS,OAEhB,EAAC,EAAD,CACI,UAAA,GACA,MAAO,EAAO,QACd,MAAO,EAAO,OAAS,IAAI,IACjB,WACV,aAAW,eACX,eAAe,sBAClB,CAAA,EAT8B,IAWvC,CAEA,GAAI,EAAO,OAAS,YAAa,CAC7B,IAAM,EAAS,EAAa,EAAO,UACnC,GAAI,EAAO,OAAS,YAAa,OAAO,KACxC,IAAM,EAAgB,EAAO,cAC7B,OACI,EAAC,GAAD,CACI,UAAA,GACA,KAAM,EAAO,KACb,SAAU,EAAO,SACF,gBACf,MAAO,EAAO,OAAS,CAAC,EACd,WACV,aAAW,eACX,UAAU,sBACb,CAAA,CAET,CAEA,OAAO,IACX,CAEA,SAAS,GAAW,CAChB,SACA,eACA,oBACA,WACA,WACA,SACA,gBASD,CAEC,IAAM,EAAY,EAAO,eAAiB,GAAS,CAAC,IAAI,EAAc,GAAiB,EAAO,MACxF,EAAe,GAAsB,EAAQ,CAAY,EAEzD,EAAU,EAAe,EACzB,EAAW,EAAY,EAIvB,EAAe,EAAO,OAAS,QAAU,EAAO,OAAS,iBAEzD,EAAa,EACf,EAAC,MAAD,CAAK,UAAU,sBAAf,SAAA,CACI,EAAC,OAAD,CAAM,UAAU,qBAAsB,SAAA,EAAkB,EAAO,QAAQ,CAAQ,CAAA,EAC/E,EAAC,GAAD,CAAe,KAAK,SAAS,UAAU,SAAS,aAAY,EAAkB,EAAO,QAAQ,EACxF,SAAA,CACU,CAAA,CACd,CAEL,CAAA,EAAA,EAAC,EAAD,CACI,KAAK,SACL,QAAS,EAAO,SAAW,GAAQ,UAAY,kBAC/C,UAAW,sEAHf,SAAA,CAKI,EAAC,EAAD,CAAW,CAAA,EACV,EACG,EAAC,OAAD,CAAM,UAAU,cAAe,SAAA,EAAkB,EAAO,QAAQ,CAAQ,CAAA,EAExE,EAAA,EAAA,CAAA,SAAA,CACI,EAAC,OAAD,CAAM,UAAU,cAAe,SAAA,EAAkB,EAAO,QAAQ,CAAQ,CAAA,EACvE,IAAY,mBAAqB,EAAC,OAAD,CAAA,SAAO,GAAiC,EAAO,SAAgB,CAAA,EAChG,IAAY,mBAAqB,GAAgB,EAAC,OAAD,CAAA,SAAO,CAAmB,CAAA,CAC9E,CAAA,CAAA,EAEL,EAAO,SAAW,IACf,EAAC,GAAD,CAAW,YAAe,EAAS,EAC/B,SAAA,EAAC,OAAD,CAAM,UAAU,0FACZ,SAAA,EAAC,EAAD,CAAS,UAAU,+BAAiC,CAAA,CAClD,CAAA,CACC,CAAA,CAEX,IAGZ,GAAI,EAAc,CACd,IAAI,EACA,EACJ,GAAI,EAAO,OAAS,OAChB,EAAU,CACN,CAAE,GAAI,OAAQ,MAAO,MAAO,EAC5B,CAAE,GAAI,QAAS,MAAO,OAAQ,CAClC,EACA,EAAc,EAAO,MAAQ,OAAS,YACnC,CACH,IAAM,EAAS,EAAa,EAAO,UACnC,EAAU,GAAQ,OAAS,iBAAmB,EAAO,QAAU,CAAC,EAChE,EAAc,EAAO,OAAS,EAClC,CAEA,OACI,EAAC,EAAD,CAAqB,SAAsB,eAA3C,SAAA,CACI,EAAC,MAAD,CAAK,UAAU,WAAY,SAAA,CAAgB,CAAA,EAC3C,EAAC,EAAD,CAAa,UAAU,WACnB,SAAA,EAAC,EAAD,CACI,cAAc,SACd,uBAAA,GACA,aAAc,IAAI,IAAI,CAAC,CAAW,CAAC,EACnC,kBAAmB,GAAQ,CACvB,GAAI,IAAS,MAAO,OACpB,IAAM,EAAM,EAAK,OAAO,CAAC,CAAC,KAAK,CAAC,CAAC,MAC7B,GAAO,MACX,EAAS,CAAE,MAAO,EAAO,OAAS,OAAS,OAAO,CAAG,IAAM,OAAS,OAAO,CAAG,CAAE,CAAC,CACrF,EACA,aAAW,eAEV,SAAA,EAAQ,IAAI,GACT,EAAC,EAAD,CAA0B,GAAI,EAAO,GAChC,SAAA,EAAO,KACF,EAFK,EAAO,EAEZ,CACb,CACC,CAAA,CACG,CAAA,CACJ,GAErB,CAEA,OACI,EAAC,GAAD,CAAwB,SAAsB,eAA9C,SAAA,CACI,EAAC,MAAD,CAAK,UAAU,WAAY,SAAA,CAAgB,CAAA,EAC3C,EAAC,GAAD,CAAS,UAAU,kBACf,SAAA,EAAC,MAAD,CAAK,UAAU,sBAAf,SAAA,CACK,IAAY,mBAAqB,EAAU,OAAS,GACjD,EAAC,EAAD,CACI,MAAO,GAA2B,EAAO,UACzC,QAAQ,UACR,aAAW,kBACX,iBAAiB,uBAEhB,SAAA,EAAU,IAAI,GACX,EAAC,EAAD,CAAmB,aAAgB,EAAS,CAAE,SAAU,CAAG,CAAC,EACvD,SAAA,GAA2B,EACtB,EAFK,CAEL,CACb,CACK,CAAA,EAEd,EAAC,GAAD,CACY,SACM,eACd,SAAU,GAAS,EAAS,CAAE,OAAM,CAAC,CACxC,CAAA,EACD,EAAC,EAAD,CACI,KAAK,SACL,QAAQ,UACR,UAAW,aACX,QAAS,EACT,aAAY,UAAU,EAAkB,EAAO,QAAQ,EAAE,SAC5D,SAAA,OAEO,CAAA,CACP,GACA,CAAA,CACG,GAExB,CAEA,SAAS,GAA0B,CAAE,WAAoC,CACrE,GAAM,CAAE,UAAS,gBAAiB,EAAa,EACzC,EAAoB,EAAqB,EACzC,CAAE,eAAc,eAAc,mBAAoB,GAAiB,EACnE,CAAC,EAAc,GAAmB,EAAwB,IAAI,EAEpE,OACI,EAAA,EAAA,CAAA,SAAA,CACI,EAAC,GAAD,CAAA,SACI,EAAC,GAAD,CAAA,SAAa,QAAmB,CAAA,CACtB,CAAA,EACd,EAAC,GAAD,CAAY,UAAU,0BACjB,SAAA,OAAO,KAAK,CAAY,CAAC,CAAC,IAAI,GAAO,CAClC,IAAM,EAAS,EAAQ,KAAK,GAAK,EAAE,WAAa,CAAG,GAAK,EAAgB,EAAK,EAAa,EAAI,EAC9F,OACI,EAAC,GAAD,CAEY,SACM,eACK,oBACnB,aAAgB,EAAa,EAAO,EAAE,EACtC,SAAU,GAAW,EAAa,EAAK,CAAO,EAC9C,OAAQ,IAAiB,EACzB,aAAc,GAAQ,EAAgB,EAAO,EAAM,IAAI,CAC1D,EARQ,CAQR,CAET,CAAC,CACO,CAAA,EACZ,EAAC,GAAD,CAAA,SAAA,CACI,EAAC,EAAD,CACI,QAAQ,UACR,YAAe,CACX,EAAgB,EAChB,EAAgB,IAAI,CACxB,EACH,SAAA,WAEO,CAAA,EACR,EAAC,EAAD,CAAQ,QAAQ,UAAU,QAAS,EAAS,SAAA,OAEpC,CAAA,CACE,CAAA,CAAA,CAChB,CAAA,CAAA,CAEV,CAEA,SAAS,GAAsB,CAC3B,YACA,sBACA,aACA,aACA,GAAG,GAKJ,CACC,GAAM,CAAE,aAAY,eAAgB,EAAoB,EAExD,OACI,EAAC,UAAD,CAAS,GAAI,EAAO,UAAW,EAAW,oBAAqB,CAAS,EACpE,SAAA,EAAC,EAAD,CACI,QAAS,EAAsB,kBAAoB,UACvC,aACZ,aAAW,SACX,YAAe,EAAW,EAAC,GAAD,CAA2B,QAAS,CAAc,CAAA,CAAC,EAC7E,UAAU,iBALd,SAAA,CAOI,EAAC,EAAD,CAAW,CAAA,EAAC,UAEX,GACG,EAAC,GAAD,CAAW,QAAS,EAChB,SAAA,EAAC,OAAD,CAAM,UAAU,2GACZ,SAAA,EAAC,EAAD,CAAS,UAAU,+BAAiC,CAAA,CAClD,CAAA,CACC,CAAA,CAEX,GACH,CAAA,CAEjB,CAEA,SAAgB,GAAgB,CAC5B,YACA,iBACA,GAAG,GAIJ,CACC,GAAM,CAAE,UAAS,QAAO,aAAY,gBAAiB,EAAa,EAC5D,EAAW,EAAY,EACvB,EAAoB,EAAqB,EACzC,EAAkB,OAAO,KAAK,CAAY,CAAC,CAAC,OAAS,EACrD,EAAa,OAAO,KAAK,CAAY,CAAC,CACvC,OAAO,GAAK,CAAC,EAAQ,KAAK,GAAK,EAAE,WAAa,CAAC,CAAC,CAAC,CACjD,KAAK,EACJ,CAAC,EAAc,GAAmB,EAAwB,IAAI,EAE9D,EAAc,GAAO,EAAK,EAChC,MAAgB,CACZ,GAAI,CAAC,EAAY,SAAW,EAAQ,SAAW,EAAG,CAC9C,IAAM,EAAuB,CAAC,EAC1B,GAAkB,EAAe,OAAS,GAC1C,EAAM,KACF,GAAG,EACE,OAAO,GAAO,EAAa,EAAI,CAAC,CAChC,IAAI,IAAQ,CACT,GAAG,EAAgB,EAAK,EAAa,EAAI,EACzC,OAAQ,GACR,UAAW,EACf,EAAE,CACV,EAEA,EAAM,OAAS,GAAG,EAAW,CAAK,CAC1C,CACA,EAAY,QAAU,EAE1B,EAAG,CAAC,CAAC,EAEL,GAAM,CAAE,eAAc,eAAc,mBAAoB,GAAiB,EAEnE,EAAa,GAAqB,CACpC,IAAM,EAAY,EAAgB,EAAU,EAAa,EAAS,EAClE,EAAW,CAAC,GAAG,EAAS,CAAS,CAAC,EAClC,EAAgB,EAAU,EAAE,CAChC,EAEM,EAAsB,EAAQ,KAAK,GAAK,CAAC,EAAE,WAAa,EAAE,SAAW,EAAK,EAE1E,MAAuB,CACzB,EAAgB,EAChB,EAAgB,IAAI,CACxB,EAeA,OAbI,EACK,EAED,EAAC,GAAD,CACI,GAAI,EACO,YACU,sBACrB,WAAY,EAAM,UAClB,WAAY,CACf,CAAA,EARwB,KAa7B,EAAC,UAAD,CAAS,GAAI,EAAO,UAAW,EAAW,uCAAwC,CAAS,EAA3F,SAAA,CACK,EACI,OAAO,GAAU,EAAO,YAAY,CAAY,CAAC,CACjD,IAAI,GACD,EAAC,GAAD,CAEY,SACM,eACK,oBACnB,aAAgB,EAAa,EAAO,EAAE,EACtC,SAAU,GAAW,EAAa,EAAO,SAAU,CAAO,EAC1D,OAAQ,IAAiB,EAAO,GAChC,aAAc,GAAQ,EAAgB,EAAO,EAAO,GAAK,IAAI,CAChE,EARQ,EAAO,EAQf,CACJ,EAEJ,EAAW,OAAS,GACjB,EAAC,EAAD,CAAU,MAAO,EAAC,EAAD,CAAW,CAAA,EAAG,WAAY,EAAM,UAAW,QAAQ,UAAU,aAAW,aACpF,SAAA,EAAW,IAAI,GAAK,CAEjB,IAAM,EAAO,GADA,EAAa,EAAE,CAAC,MAE7B,OACI,EAAC,EAAD,CAAU,UAAW,mBAA4B,aAAgB,EAAU,CAAC,EAA5E,SAAA,CACK,EAAkB,CAAC,EACpB,EAAC,EAAD,CAAO,CAAA,CACD,CAHoC,EAAA,CAGpC,CAElB,CAAC,CACK,CAAA,EAGb,GACG,EAAC,EAAD,CACI,QAAQ,QACR,QAAS,EACT,aAAW,oBACX,UAAU,qBACb,SAAA,WAEO,CAAA,CAEP,GAEjB,CAEA,IAAM,GAAoD,CACtD,YAAa,EACb,KAAM,EACN,iBAAkB,EAClB,KAAM,EACN,KAAM,EACN,GAAI,GACJ,OAAQ,EACR,OAAQ,CACZ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cryptlex/web-components",
-  "version": "6.7.22",
+  "version": "6.7.24",
   "description": "React component library for Cryptlex web applications",
   "author": "Cryptlex",
   "type": "module",