@raystack/apsara 0.48.1 → 0.48.3

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

@@ -1 +1 @@
-{"version":3,"file":"filter-chip.cjs","sources":["../../../components/filter-chip/filter-chip.tsx"],"sourcesContent":["import { Cross1Icon } from \"@radix-ui/react-icons\";\nimport { ReactElement, ReactNode, useEffect, useState } from \"react\";\n\nimport { Box } from \"../box\";\nimport { DatePicker } from \"../calendar\";\nimport { Flex } from \"../flex\";\nimport { Select } from \"../select\";\nimport { Text } from \"../text\";\nimport { TextField } from \"../textfield\";\nimport styles from \"./filter-chip.module.css\";\nimport {\n  FilterOperation,\n  filterOperators,\n  FilterSelectOption,\n  FilterType,\n  FilterTypes,\n} from \"~/types/filters\";\nimport { cva, cx, VariantProps } from \"class-variance-authority\";\n\nconst chip = cva(styles.chip, {\n  variants: {\n    variant: {\n      default: styles[\"chip-default\"],\n      text: null,\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n});\n\nexport interface FilterChipProps extends VariantProps<typeof chip> {\n  label: string;\n  value?: string;\n  onRemove?: () => void;\n  className?: string;\n  ref?: React.RefObject<HTMLDivElement>;\n  children?: ReactNode;\n  columnType?: FilterTypes;\n  options?: FilterSelectOption[];\n  onValueChange?: (value: any) => void;\n  onOperationChange?: (operation: string) => void;\n  leadingIcon?: ReactElement;\n}\n\ninterface OperationProps {\n  label: string;\n  columnType: FilterTypes;\n  onOperationSelect: (op: FilterOperation) => void;\n}\n\nconst Operation = ({\n  label,\n  columnType = FilterType.string,\n  onOperationSelect,\n}: OperationProps) => {\n  const filterOptions = filterOperators[columnType] || [];\n  // FilterOperatorTypes gives error as Select returns string\n  const [value, setValue] = useState<string>(filterOptions?.[0]?.value);\n\n  useEffect(() => {\n    const selectedOption = filterOptions.find(o => o.value === value);\n    if (selectedOption) {\n      onOperationSelect(selectedOption);\n    }\n  }, [value]);\n\n  return (\n    <Select\n      value={value}\n      onValueChange={setValue}\n      aria-labelledby={`${label}-label`}>\n      <Select.Trigger\n        variant=\"text\"\n        className={styles.selectValue}\n        aria-label={`${label} filter operation`}>\n        <Select.Value\n          placeholder=\"Select operation\"\n          className={styles.operationText}\n        />\n      </Select.Trigger>\n      <Select.Content data-variant=\"filter\">\n        {filterOptions.map(opt => {\n          return (\n            <Select.Item\n              key={opt.value}\n              value={opt.value}\n              aria-label={`Filter ${label} ${opt.label}`}>\n              {opt.label}\n            </Select.Item>\n          );\n        })}\n      </Select.Content>\n    </Select>\n  );\n};\n\nexport const FilterChip = ({\n  label,\n  value,\n  onRemove,\n  className,\n  ref,\n  columnType = FilterType.string,\n  options = [],\n  onValueChange,\n  onOperationChange,\n  leadingIcon,\n  variant,\n  ...props\n}: FilterChipProps) => {\n  const [operation, setOperation] = useState<FilterOperation>();\n  const [filterValue, setFilterValue] = useState<any>(value || \"\");\n\n  const showOnRemove = typeof onRemove === \"function\";\n\n  useEffect(() => {\n    if (onOperationChange && operation?.value) {\n      onOperationChange(operation?.value);\n    }\n  }, [operation?.value]);\n\n  useEffect(() => {\n    if (onValueChange) {\n      onValueChange(filterValue);\n    }\n  }, [filterValue]);\n\n  const renderValueInput = () => {\n    switch (columnType) {\n      case FilterType.select:\n        return (\n          <Select value={filterValue.toString()} onValueChange={setFilterValue}>\n            <Select.Trigger\n              variant=\"text\"\n              className={cx(styles.selectValue, styles.selectColumn)}>\n              <Select.Value placeholder=\"Select value\" />\n            </Select.Trigger>\n            <Select.Content data-variant=\"filter\">\n              {options.map(opt => (\n                <Select.Item\n                  key={opt.value.toString()}\n                  value={opt.value.toString()}>\n                  {opt.label}\n                </Select.Item>\n              ))}\n            </Select.Content>\n          </Select>\n        );\n      case FilterType.date:\n        return (\n          <div className={styles.dateFieldWrapper}>\n            <DatePicker\n              value={filterValue}\n              onSelect={date => setFilterValue(date)}\n              showCalendarIcon={false}\n              inputFieldProps={{ className: styles.dateField }}\n            />\n          </div>\n        );\n      default:\n        return (\n          <div className={styles.textFieldWrapper}>\n            <TextField\n              className={styles.textField}\n              value={filterValue}\n              onChange={e => setFilterValue(e.target.value)}\n            />\n          </div>\n        );\n    }\n  };\n\n  return (\n    <Box\n      ref={ref}\n      className={chip({ variant, className })}\n      role=\"group\"\n      aria-label={`Filter by ${label}`}\n      {...props}>\n      <Flex align=\"center\">\n        <Flex align=\"center\" gap={2}>\n          {leadingIcon && (\n            <span className={styles.leadingIcon} aria-hidden=\"true\">\n              {leadingIcon}\n            </span>\n          )}\n          <Text size={2} weight=\"normal\">\n            {label}\n          </Text>\n        </Flex>\n        <Operation\n          columnType={columnType}\n          label={label}\n          onOperationSelect={setOperation}\n        />\n        {renderValueInput()}\n        {showOnRemove && (\n          <button\n            className={styles.removeIconContainer}\n            aria-label={`Remove ${label} filter`}\n            onClick={onRemove}>\n            <Cross1Icon className={styles.removeIcon} />\n          </button>\n        )}\n      </Flex>\n    </Box>\n  );\n};\n\nFilterChip.displayName = \"FilterChip\";\n"],"names":["cva","styles","FilterType","filterOperators","useState","useEffect","_jsxs","Select","_jsx","cx","DatePicker","TextField","Box","Flex","Text","Cross1Icon"],"mappings":"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"}
+{"version":3,"file":"filter-chip.cjs","sources":["../../../components/filter-chip/filter-chip.tsx"],"sourcesContent":["import { Cross1Icon } from '@radix-ui/react-icons';\nimport { VariantProps, cva, cx } from 'class-variance-authority';\nimport { ReactElement, ReactNode, useCallback, useState } from 'react';\nimport {\n  FilterOperation,\n  FilterOperator,\n  FilterSelectOption,\n  FilterType,\n  FilterTypes,\n  filterOperators\n} from '~/types/filters';\nimport { DatePicker } from '../calendar';\nimport { Flex } from '../flex';\nimport { Select } from '../select';\nimport { Text } from '../text';\nimport { TextField } from '../textfield';\nimport { Operation } from './filter-chip-operation';\nimport styles from './filter-chip.module.css';\n\nconst chip = cva(styles.chip, {\n  variants: {\n    variant: {\n      default: styles['chip-default'],\n      text: null\n    }\n  },\n  defaultVariants: {\n    variant: 'default'\n  }\n});\n\nexport interface FilterChipProps extends VariantProps<typeof chip> {\n  label: string;\n  value?: string;\n  onRemove?: () => void;\n  className?: string;\n  ref?: React.RefObject<HTMLDivElement>;\n  children?: ReactNode;\n  columnType?: FilterTypes;\n  options?: FilterSelectOption[];\n  onValueChange?: (value: any, operation: string) => void;\n  onOperationChange?: (operation: string) => void;\n  leadingIcon?: ReactElement;\n  operations?: FilterOperator<string>[];\n}\n\nexport const FilterChip = ({\n  label,\n  value,\n  onRemove,\n  className,\n  ref,\n  columnType = FilterType.string,\n  options = [],\n  onValueChange,\n  onOperationChange,\n  leadingIcon,\n  variant,\n  operations,\n  ...props\n}: FilterChipProps) => {\n  const computedOperations = operations?.length\n    ? operations\n    : filterOperators[columnType];\n\n  const [operation, setOperation] = useState<FilterOperation | undefined>(\n    computedOperations?.[0]\n  );\n  const [filterValue, setFilterValue] = useState<any>(value || '');\n\n  const showOnRemove = typeof onRemove === 'function';\n\n  const handleOperationChange = useCallback(\n    (operation: FilterOperation) => {\n      setOperation(operation);\n      if (operation?.value) onOperationChange?.(operation.value);\n    },\n    [onOperationChange]\n  );\n\n  const handleFilterValueChange = useCallback(\n    (value: any) => {\n      setFilterValue(value);\n      onValueChange?.(value, operation?.value ?? '');\n    },\n    [operation, onValueChange]\n  );\n\n  const renderValueInput = () => {\n    switch (columnType) {\n      case FilterType.select:\n        return (\n          <Select\n            value={filterValue.toString()}\n            onValueChange={handleFilterValueChange}\n          >\n            <Select.Trigger\n              variant='text'\n              className={cx(styles.selectValue, styles.selectColumn)}\n            >\n              <Select.Value placeholder='Select value' />\n            </Select.Trigger>\n            <Select.Content data-variant='filter'>\n              {options.map(opt => (\n                <Select.Item\n                  key={opt.value.toString()}\n                  value={opt.value.toString()}\n                >\n                  {opt.label}\n                </Select.Item>\n              ))}\n            </Select.Content>\n          </Select>\n        );\n      case FilterType.date:\n        return (\n          <div className={styles.dateFieldWrapper}>\n            <DatePicker\n              value={filterValue}\n              onSelect={date => handleFilterValueChange(date)}\n              showCalendarIcon={false}\n              inputFieldProps={{ className: styles.dateField }}\n            />\n          </div>\n        );\n      default:\n        return (\n          <div className={styles.textFieldWrapper}>\n            <TextField\n              className={styles.textField}\n              value={filterValue}\n              onChange={e => handleFilterValueChange(e.target.value)}\n            />\n          </div>\n        );\n    }\n  };\n\n  return (\n    <Flex\n      align='center'\n      ref={ref}\n      className={chip({ variant, className })}\n      role='group'\n      aria-label={`Filter by ${label}`}\n      {...props}\n    >\n      <Flex align='center' gap={2} className={styles['chip-label']}>\n        {leadingIcon && (\n          <span className={styles.leadingIcon} aria-hidden='true'>\n            {leadingIcon}\n          </span>\n        )}\n        <Text size={2} weight='normal'>\n          {label}\n        </Text>\n      </Flex>\n      <Operation\n        operations={computedOperations}\n        label={label}\n        value={operation}\n        onChange={handleOperationChange}\n      />\n      {renderValueInput()}\n      {showOnRemove && (\n        <button\n          className={styles.removeIconContainer}\n          aria-label={`Remove ${label} filter`}\n          onClick={onRemove}\n        >\n          <Cross1Icon className={styles.removeIcon} />\n        </button>\n      )}\n    </Flex>\n  );\n};\n\nFilterChip.displayName = 'FilterChip';\n"],"names":["cva","styles","FilterType","filterOperators","useState","useCallback","_jsxs","Select","_jsx","cx","DatePicker","TextField","Flex","Text","Operation","Cross1Icon"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
-import { ReactElement, ReactNode } from "react";
-import { FilterSelectOption, FilterTypes } from "~/types/filters";
-import { VariantProps } from "class-variance-authority";
+import { VariantProps } from 'class-variance-authority';
+import { ReactElement, ReactNode } from 'react';
+import { FilterOperator, FilterSelectOption, FilterTypes } from '~/types/filters';
 declare const chip: (props?: ({
     variant?: "text" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
@@ -13,12 +13,13 @@ export interface FilterChipProps extends VariantProps<typeof chip> {
     children?: ReactNode;
     columnType?: FilterTypes;
     options?: FilterSelectOption[];
-    onValueChange?: (value: any) => void;
+    onValueChange?: (value: any, operation: string) => void;
     onOperationChange?: (operation: string) => void;
     leadingIcon?: ReactElement;
+    operations?: FilterOperator<string>[];
 }
 export declare const FilterChip: {
-    ({ label, value, onRemove, className, ref, columnType, options, onValueChange, onOperationChange, leadingIcon, variant, ...props }: FilterChipProps): import("react/jsx-runtime").JSX.Element;
+    ({ label, value, onRemove, className, ref, columnType, options, onValueChange, onOperationChange, leadingIcon, variant, operations, ...props }: FilterChipProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"filter-chip.d.ts","sourceRoot":"","sources":["../../../components/filter-chip/filter-chip.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AASrE,OAAO,EAGL,kBAAkB,EAElB,WAAW,EACZ,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAW,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAEjE,QAAA,MAAM,IAAI;;8EAUR,CAAC;AAEH,MAAM,WAAW,eAAgB,SAAQ,YAAY,CAAC,OAAO,IAAI,CAAC;IAChE,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,OAAO,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC/B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACrC,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,WAAW,CAAC,EAAE,YAAY,CAAC;CAC5B;AAsDD,eAAO,MAAM,UAAU;wIAapB,eAAe;;CAkGjB,CAAC"}
+{"version":3,"file":"filter-chip.d.ts","sourceRoot":"","sources":["../../../components/filter-chip/filter-chip.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAW,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAyB,MAAM,OAAO,CAAC;AACvE,OAAO,EAEL,cAAc,EACd,kBAAkB,EAElB,WAAW,EAEZ,MAAM,iBAAiB,CAAC;AASzB,QAAA,MAAM,IAAI;;8EAUR,CAAC;AAEH,MAAM,WAAW,eAAgB,SAAQ,YAAY,CAAC,OAAO,IAAI,CAAC;IAChE,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,OAAO,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC/B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACxD,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,UAAU,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,EAAE,CAAC;CACvC;AAED,eAAO,MAAM,UAAU;oJAcpB,eAAe;;CAmHjB,CAAC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"filter-chip.js","sources":["../../../components/filter-chip/filter-chip.tsx"],"sourcesContent":["import { Cross1Icon } from \"@radix-ui/react-icons\";\nimport { ReactElement, ReactNode, useEffect, useState } from \"react\";\n\nimport { Box } from \"../box\";\nimport { DatePicker } from \"../calendar\";\nimport { Flex } from \"../flex\";\nimport { Select } from \"../select\";\nimport { Text } from \"../text\";\nimport { TextField } from \"../textfield\";\nimport styles from \"./filter-chip.module.css\";\nimport {\n  FilterOperation,\n  filterOperators,\n  FilterSelectOption,\n  FilterType,\n  FilterTypes,\n} from \"~/types/filters\";\nimport { cva, cx, VariantProps } from \"class-variance-authority\";\n\nconst chip = cva(styles.chip, {\n  variants: {\n    variant: {\n      default: styles[\"chip-default\"],\n      text: null,\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n});\n\nexport interface FilterChipProps extends VariantProps<typeof chip> {\n  label: string;\n  value?: string;\n  onRemove?: () => void;\n  className?: string;\n  ref?: React.RefObject<HTMLDivElement>;\n  children?: ReactNode;\n  columnType?: FilterTypes;\n  options?: FilterSelectOption[];\n  onValueChange?: (value: any) => void;\n  onOperationChange?: (operation: string) => void;\n  leadingIcon?: ReactElement;\n}\n\ninterface OperationProps {\n  label: string;\n  columnType: FilterTypes;\n  onOperationSelect: (op: FilterOperation) => void;\n}\n\nconst Operation = ({\n  label,\n  columnType = FilterType.string,\n  onOperationSelect,\n}: OperationProps) => {\n  const filterOptions = filterOperators[columnType] || [];\n  // FilterOperatorTypes gives error as Select returns string\n  const [value, setValue] = useState<string>(filterOptions?.[0]?.value);\n\n  useEffect(() => {\n    const selectedOption = filterOptions.find(o => o.value === value);\n    if (selectedOption) {\n      onOperationSelect(selectedOption);\n    }\n  }, [value]);\n\n  return (\n    <Select\n      value={value}\n      onValueChange={setValue}\n      aria-labelledby={`${label}-label`}>\n      <Select.Trigger\n        variant=\"text\"\n        className={styles.selectValue}\n        aria-label={`${label} filter operation`}>\n        <Select.Value\n          placeholder=\"Select operation\"\n          className={styles.operationText}\n        />\n      </Select.Trigger>\n      <Select.Content data-variant=\"filter\">\n        {filterOptions.map(opt => {\n          return (\n            <Select.Item\n              key={opt.value}\n              value={opt.value}\n              aria-label={`Filter ${label} ${opt.label}`}>\n              {opt.label}\n            </Select.Item>\n          );\n        })}\n      </Select.Content>\n    </Select>\n  );\n};\n\nexport const FilterChip = ({\n  label,\n  value,\n  onRemove,\n  className,\n  ref,\n  columnType = FilterType.string,\n  options = [],\n  onValueChange,\n  onOperationChange,\n  leadingIcon,\n  variant,\n  ...props\n}: FilterChipProps) => {\n  const [operation, setOperation] = useState<FilterOperation>();\n  const [filterValue, setFilterValue] = useState<any>(value || \"\");\n\n  const showOnRemove = typeof onRemove === \"function\";\n\n  useEffect(() => {\n    if (onOperationChange && operation?.value) {\n      onOperationChange(operation?.value);\n    }\n  }, [operation?.value]);\n\n  useEffect(() => {\n    if (onValueChange) {\n      onValueChange(filterValue);\n    }\n  }, [filterValue]);\n\n  const renderValueInput = () => {\n    switch (columnType) {\n      case FilterType.select:\n        return (\n          <Select value={filterValue.toString()} onValueChange={setFilterValue}>\n            <Select.Trigger\n              variant=\"text\"\n              className={cx(styles.selectValue, styles.selectColumn)}>\n              <Select.Value placeholder=\"Select value\" />\n            </Select.Trigger>\n            <Select.Content data-variant=\"filter\">\n              {options.map(opt => (\n                <Select.Item\n                  key={opt.value.toString()}\n                  value={opt.value.toString()}>\n                  {opt.label}\n                </Select.Item>\n              ))}\n            </Select.Content>\n          </Select>\n        );\n      case FilterType.date:\n        return (\n          <div className={styles.dateFieldWrapper}>\n            <DatePicker\n              value={filterValue}\n              onSelect={date => setFilterValue(date)}\n              showCalendarIcon={false}\n              inputFieldProps={{ className: styles.dateField }}\n            />\n          </div>\n        );\n      default:\n        return (\n          <div className={styles.textFieldWrapper}>\n            <TextField\n              className={styles.textField}\n              value={filterValue}\n              onChange={e => setFilterValue(e.target.value)}\n            />\n          </div>\n        );\n    }\n  };\n\n  return (\n    <Box\n      ref={ref}\n      className={chip({ variant, className })}\n      role=\"group\"\n      aria-label={`Filter by ${label}`}\n      {...props}>\n      <Flex align=\"center\">\n        <Flex align=\"center\" gap={2}>\n          {leadingIcon && (\n            <span className={styles.leadingIcon} aria-hidden=\"true\">\n              {leadingIcon}\n            </span>\n          )}\n          <Text size={2} weight=\"normal\">\n            {label}\n          </Text>\n        </Flex>\n        <Operation\n          columnType={columnType}\n          label={label}\n          onOperationSelect={setOperation}\n        />\n        {renderValueInput()}\n        {showOnRemove && (\n          <button\n            className={styles.removeIconContainer}\n            aria-label={`Remove ${label} filter`}\n            onClick={onRemove}>\n            <Cross1Icon className={styles.removeIcon} />\n          </button>\n        )}\n      </Flex>\n    </Box>\n  );\n};\n\nFilterChip.displayName = \"FilterChip\";\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"filter-chip.js","sources":["../../../components/filter-chip/filter-chip.tsx"],"sourcesContent":["import { Cross1Icon } from '@radix-ui/react-icons';\nimport { VariantProps, cva, cx } from 'class-variance-authority';\nimport { ReactElement, ReactNode, useCallback, useState } from 'react';\nimport {\n  FilterOperation,\n  FilterOperator,\n  FilterSelectOption,\n  FilterType,\n  FilterTypes,\n  filterOperators\n} from '~/types/filters';\nimport { DatePicker } from '../calendar';\nimport { Flex } from '../flex';\nimport { Select } from '../select';\nimport { Text } from '../text';\nimport { TextField } from '../textfield';\nimport { Operation } from './filter-chip-operation';\nimport styles from './filter-chip.module.css';\n\nconst chip = cva(styles.chip, {\n  variants: {\n    variant: {\n      default: styles['chip-default'],\n      text: null\n    }\n  },\n  defaultVariants: {\n    variant: 'default'\n  }\n});\n\nexport interface FilterChipProps extends VariantProps<typeof chip> {\n  label: string;\n  value?: string;\n  onRemove?: () => void;\n  className?: string;\n  ref?: React.RefObject<HTMLDivElement>;\n  children?: ReactNode;\n  columnType?: FilterTypes;\n  options?: FilterSelectOption[];\n  onValueChange?: (value: any, operation: string) => void;\n  onOperationChange?: (operation: string) => void;\n  leadingIcon?: ReactElement;\n  operations?: FilterOperator<string>[];\n}\n\nexport const FilterChip = ({\n  label,\n  value,\n  onRemove,\n  className,\n  ref,\n  columnType = FilterType.string,\n  options = [],\n  onValueChange,\n  onOperationChange,\n  leadingIcon,\n  variant,\n  operations,\n  ...props\n}: FilterChipProps) => {\n  const computedOperations = operations?.length\n    ? operations\n    : filterOperators[columnType];\n\n  const [operation, setOperation] = useState<FilterOperation | undefined>(\n    computedOperations?.[0]\n  );\n  const [filterValue, setFilterValue] = useState<any>(value || '');\n\n  const showOnRemove = typeof onRemove === 'function';\n\n  const handleOperationChange = useCallback(\n    (operation: FilterOperation) => {\n      setOperation(operation);\n      if (operation?.value) onOperationChange?.(operation.value);\n    },\n    [onOperationChange]\n  );\n\n  const handleFilterValueChange = useCallback(\n    (value: any) => {\n      setFilterValue(value);\n      onValueChange?.(value, operation?.value ?? '');\n    },\n    [operation, onValueChange]\n  );\n\n  const renderValueInput = () => {\n    switch (columnType) {\n      case FilterType.select:\n        return (\n          <Select\n            value={filterValue.toString()}\n            onValueChange={handleFilterValueChange}\n          >\n            <Select.Trigger\n              variant='text'\n              className={cx(styles.selectValue, styles.selectColumn)}\n            >\n              <Select.Value placeholder='Select value' />\n            </Select.Trigger>\n            <Select.Content data-variant='filter'>\n              {options.map(opt => (\n                <Select.Item\n                  key={opt.value.toString()}\n                  value={opt.value.toString()}\n                >\n                  {opt.label}\n                </Select.Item>\n              ))}\n            </Select.Content>\n          </Select>\n        );\n      case FilterType.date:\n        return (\n          <div className={styles.dateFieldWrapper}>\n            <DatePicker\n              value={filterValue}\n              onSelect={date => handleFilterValueChange(date)}\n              showCalendarIcon={false}\n              inputFieldProps={{ className: styles.dateField }}\n            />\n          </div>\n        );\n      default:\n        return (\n          <div className={styles.textFieldWrapper}>\n            <TextField\n              className={styles.textField}\n              value={filterValue}\n              onChange={e => handleFilterValueChange(e.target.value)}\n            />\n          </div>\n        );\n    }\n  };\n\n  return (\n    <Flex\n      align='center'\n      ref={ref}\n      className={chip({ variant, className })}\n      role='group'\n      aria-label={`Filter by ${label}`}\n      {...props}\n    >\n      <Flex align='center' gap={2} className={styles['chip-label']}>\n        {leadingIcon && (\n          <span className={styles.leadingIcon} aria-hidden='true'>\n            {leadingIcon}\n          </span>\n        )}\n        <Text size={2} weight='normal'>\n          {label}\n        </Text>\n      </Flex>\n      <Operation\n        operations={computedOperations}\n        label={label}\n        value={operation}\n        onChange={handleOperationChange}\n      />\n      {renderValueInput()}\n      {showOnRemove && (\n        <button\n          className={styles.removeIconContainer}\n          aria-label={`Remove ${label} filter`}\n          onClick={onRemove}\n        >\n          <Cross1Icon className={styles.removeIcon} />\n        </button>\n      )}\n    </Flex>\n  );\n};\n\nFilterChip.displayName = 'FilterChip';\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var styles = {"chip":"filter-chip-module_chip__BphAr","chip-default":"filter-chip-module_chip-default__q9QfE","operationText":"filter-chip-module_operationText__spj1Y","value":"filter-chip-module_value__5JK-z","removeIconContainer":"filter-chip-module_removeIconContainer__W5cow","removeIcon":"filter-chip-module_removeIcon__6xmN1","selectValue":"filter-chip-module_selectValue__qtzzQ","selectColumn":"filter-chip-module_selectColumn__uaqj2","leadingIcon":"filter-chip-module_leadingIcon__ANvl2","textFieldWrapper":"filter-chip-module_textFieldWrapper__29UIA","textField":"filter-chip-module_textField__tADFO","dateFieldWrapper":"filter-chip-module_dateFieldWrapper__fPmxI","dateField":"filter-chip-module_dateField__nxEVq","chip___default":"filter-chip-module_chip-default__q9QfE"};
+var styles = {"chip":"filter-chip-module_chip__BphAr","chip-default":"filter-chip-module_chip-default__q9QfE","chip-label":"filter-chip-module_chip-label__-ugGs","operationText":"filter-chip-module_operationText__spj1Y","value":"filter-chip-module_value__5JK-z","removeIconContainer":"filter-chip-module_removeIconContainer__W5cow","removeIcon":"filter-chip-module_removeIcon__6xmN1","selectValue":"filter-chip-module_selectValue__qtzzQ","selectColumn":"filter-chip-module_selectColumn__uaqj2","leadingIcon":"filter-chip-module_leadingIcon__ANvl2","textFieldWrapper":"filter-chip-module_textFieldWrapper__29UIA","textField":"filter-chip-module_textField__tADFO","dateFieldWrapper":"filter-chip-module_dateFieldWrapper__fPmxI","dateField":"filter-chip-module_dateField__nxEVq","chip___default":"filter-chip-module_chip-default__q9QfE","chip___label":"filter-chip-module_chip-label__-ugGs"};
 
 exports.default = styles;
 //# sourceMappingURL=filter-chip.module.css.cjs.map

package/dist/components/filter-chip/filter-chip.module.css.js

@@ -1,4 +1,4 @@
-var styles = {"chip":"filter-chip-module_chip__BphAr","chip-default":"filter-chip-module_chip-default__q9QfE","operationText":"filter-chip-module_operationText__spj1Y","value":"filter-chip-module_value__5JK-z","removeIconContainer":"filter-chip-module_removeIconContainer__W5cow","removeIcon":"filter-chip-module_removeIcon__6xmN1","selectValue":"filter-chip-module_selectValue__qtzzQ","selectColumn":"filter-chip-module_selectColumn__uaqj2","leadingIcon":"filter-chip-module_leadingIcon__ANvl2","textFieldWrapper":"filter-chip-module_textFieldWrapper__29UIA","textField":"filter-chip-module_textField__tADFO","dateFieldWrapper":"filter-chip-module_dateFieldWrapper__fPmxI","dateField":"filter-chip-module_dateField__nxEVq","chip___default":"filter-chip-module_chip-default__q9QfE"};
+var styles = {"chip":"filter-chip-module_chip__BphAr","chip-default":"filter-chip-module_chip-default__q9QfE","chip-label":"filter-chip-module_chip-label__-ugGs","operationText":"filter-chip-module_operationText__spj1Y","value":"filter-chip-module_value__5JK-z","removeIconContainer":"filter-chip-module_removeIconContainer__W5cow","removeIcon":"filter-chip-module_removeIcon__6xmN1","selectValue":"filter-chip-module_selectValue__qtzzQ","selectColumn":"filter-chip-module_selectColumn__uaqj2","leadingIcon":"filter-chip-module_leadingIcon__ANvl2","textFieldWrapper":"filter-chip-module_textFieldWrapper__29UIA","textField":"filter-chip-module_textField__tADFO","dateFieldWrapper":"filter-chip-module_dateFieldWrapper__fPmxI","dateField":"filter-chip-module_dateField__nxEVq","chip___default":"filter-chip-module_chip-default__q9QfE","chip___label":"filter-chip-module_chip-label__-ugGs"};
 
 export { styles as default };
 //# sourceMappingURL=filter-chip.module.css.js.map

package/dist/components/input-field/input-field.cjs

@@ -1,10 +1,9 @@
 'use strict';
 
 var jsxRuntime = require('../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.cjs');
+var reactIcons_esm = require('../../node_modules/.pnpm/@radix-ui_react-icons@1.3.0_react@18.2.0/node_modules/@radix-ui/react-icons/dist/react-icons.esm.cjs');
 var index = require('../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.cjs');
-var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
 var React = require('react');
-var reactIcons_esm = require('../../node_modules/.pnpm/@radix-ui_react-icons@1.3.0_react@18.2.0/node_modules/@radix-ui/react-icons/dist/react-icons.esm.cjs');
 var tooltip = require('../tooltip/tooltip.cjs');
 var chip = require('../chip/chip.cjs');
 var inputField_module = require('./input-field.module.css.cjs');
@@ -13,23 +12,23 @@ var inputField_module = require('./input-field.module.css.cjs');
 const inputWrapper = index.cva(inputField_module.default.inputWrapper, {
     variants: {
         size: {
-            small: inputField_module.default["size-small"],
-            large: inputField_module.default["size-large"],
+            small: inputField_module.default['size-small'],
+            large: inputField_module.default['size-large']
         },
         variant: {
-            default: inputField_module.default["variant-default"],
-            borderless: inputField_module.default["variant-borderless"],
-        },
+            default: inputField_module.default['variant-default'],
+            borderless: inputField_module.default['variant-borderless']
+        }
     },
     defaultVariants: {
-        size: "large",
-        variant: "default",
-    },
+        size: 'large',
+        variant: 'default'
+    }
 });
-const InputField = React.forwardRef(({ className, disabled, label, helperText, placeholder, error, leadingIcon, trailingIcon, optional, prefix, suffix, width, chips, maxChipsVisible = 2, size, infoTooltip, variant = "default", ...props }, ref) => {
-    return (jsxRuntime.jsxRuntimeExports.jsxs("div", { className: inputField_module.default.container, style: { width: width || "100%" }, children: [label && (jsxRuntime.jsxRuntimeExports.jsxs("div", { className: inputField_module.default.labelContainer, children: [jsxRuntime.jsxRuntimeExports.jsxs("label", { className: clsx.clsx(inputField_module.default.label, disabled && inputField_module.default["label-disabled"]), children: [label, optional && jsxRuntime.jsxRuntimeExports.jsx("span", { className: inputField_module.default.optional, children: "(optional)" })] }), infoTooltip && (jsxRuntime.jsxRuntimeExports.jsx(tooltip.Tooltip, { message: infoTooltip, side: "right", children: jsxRuntime.jsxRuntimeExports.jsx("span", { className: inputField_module.default.helpIcon, children: jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.InfoCircledIcon, {}) }) }))] })), jsxRuntime.jsxRuntimeExports.jsxs("div", { className: clsx.clsx(inputWrapper({ size, variant, className }), error && inputField_module.default["input-error-wrapper"], disabled && inputField_module.default["input-disabled-wrapper"], chips?.length && inputField_module.default["has-chips"]), children: [leadingIcon && (jsxRuntime.jsxRuntimeExports.jsx("div", { className: inputField_module.default["leading-icon"], children: leadingIcon })), prefix && jsxRuntime.jsxRuntimeExports.jsx("div", { className: inputField_module.default.prefix, children: prefix }), jsxRuntime.jsxRuntimeExports.jsxs("div", { className: inputField_module.default["chip-input-container"], children: [chips?.slice(0, maxChipsVisible).map((chip$1, index) => (jsxRuntime.jsxRuntimeExports.jsx(chip.Chip, { variant: "outline", isDismissible: !!chip$1.onRemove, onDismiss: chip$1.onRemove, className: inputField_module.default.chip, children: chip$1.label }, index))), chips && chips.length > maxChipsVisible && (jsxRuntime.jsxRuntimeExports.jsxs("span", { className: inputField_module.default["chip-overflow"], children: ["+", chips.length - maxChipsVisible] })), jsxRuntime.jsxRuntimeExports.jsx("input", { ref: ref, className: clsx.clsx(inputField_module.default["input-field"], leadingIcon && inputField_module.default["has-leading-icon"], trailingIcon && inputField_module.default["has-trailing-icon"], prefix && inputField_module.default["has-prefix"], suffix && inputField_module.default["has-suffix"], error && inputField_module.default["input-error"], disabled && inputField_module.default["input-disabled"], className), "aria-invalid": !!error, placeholder: placeholder, disabled: disabled, ...props })] }), suffix && jsxRuntime.jsxRuntimeExports.jsx("div", { className: inputField_module.default.suffix, children: suffix }), trailingIcon && (jsxRuntime.jsxRuntimeExports.jsx("div", { className: inputField_module.default["trailing-icon"], children: trailingIcon }))] }), (error || helperText) && (jsxRuntime.jsxRuntimeExports.jsx("span", { className: clsx.clsx(inputField_module.default["helper-text"], error && inputField_module.default["helper-text-error"], disabled && inputField_module.default["helper-text-disabled"]), children: error || helperText }))] }));
+const InputField = React.forwardRef(({ className, disabled, label, helperText, placeholder, error, leadingIcon, trailingIcon, optional, prefix, suffix, width, chips, maxChipsVisible = 2, size, infoTooltip, variant = 'default', ...props }, ref) => {
+    return (jsxRuntime.jsxRuntimeExports.jsxs("div", { className: inputField_module.default.container, style: { width: width || '100%' }, children: [label && (jsxRuntime.jsxRuntimeExports.jsxs("div", { className: inputField_module.default.labelContainer, children: [jsxRuntime.jsxRuntimeExports.jsxs("label", { className: index.cx(inputField_module.default.label, disabled && inputField_module.default['label-disabled']), children: [label, optional && jsxRuntime.jsxRuntimeExports.jsx("span", { className: inputField_module.default.optional, children: "(optional)" })] }), infoTooltip && (jsxRuntime.jsxRuntimeExports.jsx(tooltip.Tooltip, { message: infoTooltip, side: 'right', children: jsxRuntime.jsxRuntimeExports.jsx("span", { className: inputField_module.default.helpIcon, children: jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.InfoCircledIcon, {}) }) }))] })), jsxRuntime.jsxRuntimeExports.jsxs("div", { className: index.cx(inputWrapper({ size, variant, className }), error && inputField_module.default['input-error-wrapper'], disabled && inputField_module.default['input-disabled-wrapper'], chips?.length && inputField_module.default['has-chips']), children: [leadingIcon && (jsxRuntime.jsxRuntimeExports.jsx("div", { className: inputField_module.default['leading-icon'], children: leadingIcon })), prefix && jsxRuntime.jsxRuntimeExports.jsx("div", { className: inputField_module.default.prefix, children: prefix }), jsxRuntime.jsxRuntimeExports.jsxs("div", { className: inputField_module.default['chip-input-container'], children: [chips?.slice(0, maxChipsVisible).map((chip$1, index) => (jsxRuntime.jsxRuntimeExports.jsx(chip.Chip, { variant: 'outline', isDismissible: !!chip$1.onRemove, onDismiss: chip$1.onRemove, className: inputField_module.default.chip, children: chip$1.label }, index))), chips && chips.length > maxChipsVisible && (jsxRuntime.jsxRuntimeExports.jsxs("span", { className: inputField_module.default['chip-overflow'], children: ["+", chips.length - maxChipsVisible] })), jsxRuntime.jsxRuntimeExports.jsx("input", { ref: ref, className: index.cx(inputField_module.default['input-field'], leadingIcon && inputField_module.default['has-leading-icon'], trailingIcon && inputField_module.default['has-trailing-icon'], prefix && inputField_module.default['has-prefix'], suffix && inputField_module.default['has-suffix'], error && inputField_module.default['input-error'], disabled && inputField_module.default['input-disabled'], className), "aria-invalid": !!error, placeholder: placeholder, disabled: disabled, ...props })] }), suffix && jsxRuntime.jsxRuntimeExports.jsx("div", { className: inputField_module.default.suffix, children: suffix }), trailingIcon && (jsxRuntime.jsxRuntimeExports.jsx("div", { className: inputField_module.default['trailing-icon'], children: trailingIcon }))] }), (error || helperText) && (jsxRuntime.jsxRuntimeExports.jsx("span", { className: index.cx(inputField_module.default['helper-text'], error && inputField_module.default['helper-text-error'], disabled && inputField_module.default['helper-text-disabled']), children: error || helperText }))] }));
 });
-InputField.displayName = "InputField";
+InputField.displayName = 'InputField';
 
 exports.InputField = InputField;
 //# sourceMappingURL=input-field.cjs.map

package/dist/components/input-field/input-field.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"input-field.cjs","sources":["../../../components/input-field/input-field.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport clsx from \"clsx\";\nimport { ComponentPropsWithoutRef, ReactNode, forwardRef } from \"react\";\nimport { InfoCircledIcon } from \"@radix-ui/react-icons\";\nimport { Tooltip } from \"../tooltip\";\n\nimport { Chip } from \"../chip\";\nimport styles from \"./input-field.module.css\";\n\n// Todo: Add a dropdown support\n\nconst inputWrapper = cva(styles.inputWrapper, {\n  variants: {\n    size: {\n      small: styles[\"size-small\"],\n      large: styles[\"size-large\"],\n    },\n    variant: {\n      default: styles[\"variant-default\"],\n      borderless: styles[\"variant-borderless\"],\n    },\n  },\n  defaultVariants: {\n    size: \"large\",\n    variant: \"default\",\n  },\n});\n\nexport interface InputFieldProps\n  extends Omit<ComponentPropsWithoutRef<\"input\">, \"error\" | \"size\">,\n    VariantProps<typeof inputWrapper> {\n  label?: string;\n  helperText?: string;\n  error?: string;\n  disabled?: boolean;\n  leadingIcon?: ReactNode;\n  trailingIcon?: ReactNode;\n  optional?: boolean;\n  prefix?: string;\n  suffix?: string;\n  width?: string | number;\n  chips?: Array<{ label: string; onRemove?: () => void }>;\n  maxChipsVisible?: number;\n  infoTooltip?: string;\n  variant?: \"default\" | \"borderless\";\n}\n\nexport const InputField = forwardRef<HTMLInputElement, InputFieldProps>(\n  (\n    {\n      className,\n      disabled,\n      label,\n      helperText,\n      placeholder,\n      error,\n      leadingIcon,\n      trailingIcon,\n      optional,\n      prefix,\n      suffix,\n      width,\n      chips,\n      maxChipsVisible = 2,\n      size,\n      infoTooltip,\n      variant = \"default\",\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div className={styles.container} style={{ width: width || \"100%\" }}>\n        {label && (\n          <div className={styles.labelContainer}>\n            <label\n              className={clsx(\n                styles.label,\n                disabled && styles[\"label-disabled\"]\n              )}\n            >\n              {label}\n              {optional && <span className={styles.optional}>(optional)</span>}\n            </label>\n            {infoTooltip && (\n              <Tooltip message={infoTooltip} side=\"right\">\n                <span className={styles.helpIcon}>\n                  <InfoCircledIcon />\n                </span>\n              </Tooltip>\n            )}\n          </div>\n        )}\n        <div\n          className={clsx(\n            inputWrapper({ size, variant, className }),\n            error && styles[\"input-error-wrapper\"],\n            disabled && styles[\"input-disabled-wrapper\"],\n            chips?.length && styles[\"has-chips\"]\n          )}\n        >\n          {leadingIcon && (\n            <div className={styles[\"leading-icon\"]}>{leadingIcon}</div>\n          )}\n          {prefix && <div className={styles.prefix}>{prefix}</div>}\n\n          <div className={styles[\"chip-input-container\"]}>\n            {chips?.slice(0, maxChipsVisible).map((chip, index) => (\n              <Chip\n                key={index}\n                variant=\"outline\"\n                isDismissible={!!chip.onRemove}\n                onDismiss={chip.onRemove}\n                className={styles.chip}\n              >\n                {chip.label}\n              </Chip>\n            ))}\n            {chips && chips.length > maxChipsVisible && (\n              <span className={styles[\"chip-overflow\"]}>\n                +{chips.length - maxChipsVisible}\n              </span>\n            )}\n            <input\n              ref={ref}\n              className={clsx(\n                styles[\"input-field\"],\n                leadingIcon && styles[\"has-leading-icon\"],\n                trailingIcon && styles[\"has-trailing-icon\"],\n                prefix && styles[\"has-prefix\"],\n                suffix && styles[\"has-suffix\"],\n                error && styles[\"input-error\"],\n                disabled && styles[\"input-disabled\"],\n                className\n              )}\n              aria-invalid={!!error}\n              placeholder={placeholder}\n              disabled={disabled}\n              {...props}\n            />\n          </div>\n\n          {suffix && <div className={styles.suffix}>{suffix}</div>}\n          {trailingIcon && (\n            <div className={styles[\"trailing-icon\"]}>{trailingIcon}</div>\n          )}\n        </div>\n        {(error || helperText) && (\n          <span\n            className={clsx(\n              styles[\"helper-text\"],\n              error && styles[\"helper-text-error\"],\n              disabled && styles[\"helper-text-disabled\"]\n            )}\n          >\n            {error || helperText}\n          </span>\n        )}\n      </div>\n    );\n  }\n);\n\nInputField.displayName = \"InputField\";\n"],"names":["cva","styles","forwardRef","_jsxs","clsx","_jsx","Tooltip","InfoCircledIcon","chip","Chip"],"mappings":"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"}
+{"version":3,"file":"input-field.cjs","sources":["../../../components/input-field/input-field.tsx"],"sourcesContent":["import { InfoCircledIcon } from '@radix-ui/react-icons';\nimport { type VariantProps, cva, cx } from 'class-variance-authority';\nimport { ComponentPropsWithoutRef, ReactNode, forwardRef } from 'react';\nimport { Tooltip } from '../tooltip';\n\nimport { Chip } from '../chip';\nimport styles from './input-field.module.css';\n\n// Todo: Add a dropdown support\n\nconst inputWrapper = cva(styles.inputWrapper, {\n  variants: {\n    size: {\n      small: styles['size-small'],\n      large: styles['size-large']\n    },\n    variant: {\n      default: styles['variant-default'],\n      borderless: styles['variant-borderless']\n    }\n  },\n  defaultVariants: {\n    size: 'large',\n    variant: 'default'\n  }\n});\n\nexport interface InputFieldProps\n  extends Omit<ComponentPropsWithoutRef<'input'>, 'error' | 'size'>,\n    VariantProps<typeof inputWrapper> {\n  label?: string;\n  helperText?: string;\n  error?: string;\n  disabled?: boolean;\n  leadingIcon?: ReactNode;\n  trailingIcon?: ReactNode;\n  optional?: boolean;\n  prefix?: string;\n  suffix?: string;\n  width?: string | number;\n  chips?: Array<{ label: string; onRemove?: () => void }>;\n  maxChipsVisible?: number;\n  infoTooltip?: string;\n  variant?: 'default' | 'borderless';\n}\n\nexport const InputField = forwardRef<HTMLInputElement, InputFieldProps>(\n  (\n    {\n      className,\n      disabled,\n      label,\n      helperText,\n      placeholder,\n      error,\n      leadingIcon,\n      trailingIcon,\n      optional,\n      prefix,\n      suffix,\n      width,\n      chips,\n      maxChipsVisible = 2,\n      size,\n      infoTooltip,\n      variant = 'default',\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div className={styles.container} style={{ width: width || '100%' }}>\n        {label && (\n          <div className={styles.labelContainer}>\n            <label\n              className={cx(styles.label, disabled && styles['label-disabled'])}\n            >\n              {label}\n              {optional && <span className={styles.optional}>(optional)</span>}\n            </label>\n            {infoTooltip && (\n              <Tooltip message={infoTooltip} side='right'>\n                <span className={styles.helpIcon}>\n                  <InfoCircledIcon />\n                </span>\n              </Tooltip>\n            )}\n          </div>\n        )}\n        <div\n          className={cx(\n            inputWrapper({ size, variant, className }),\n            error && styles['input-error-wrapper'],\n            disabled && styles['input-disabled-wrapper'],\n            chips?.length && styles['has-chips']\n          )}\n        >\n          {leadingIcon && (\n            <div className={styles['leading-icon']}>{leadingIcon}</div>\n          )}\n          {prefix && <div className={styles.prefix}>{prefix}</div>}\n\n          <div className={styles['chip-input-container']}>\n            {chips?.slice(0, maxChipsVisible).map((chip, index) => (\n              <Chip\n                key={index}\n                variant='outline'\n                isDismissible={!!chip.onRemove}\n                onDismiss={chip.onRemove}\n                className={styles.chip}\n              >\n                {chip.label}\n              </Chip>\n            ))}\n            {chips && chips.length > maxChipsVisible && (\n              <span className={styles['chip-overflow']}>\n                +{chips.length - maxChipsVisible}\n              </span>\n            )}\n            <input\n              ref={ref}\n              className={cx(\n                styles['input-field'],\n                leadingIcon && styles['has-leading-icon'],\n                trailingIcon && styles['has-trailing-icon'],\n                prefix && styles['has-prefix'],\n                suffix && styles['has-suffix'],\n                error && styles['input-error'],\n                disabled && styles['input-disabled'],\n                className\n              )}\n              aria-invalid={!!error}\n              placeholder={placeholder}\n              disabled={disabled}\n              {...props}\n            />\n          </div>\n\n          {suffix && <div className={styles.suffix}>{suffix}</div>}\n          {trailingIcon && (\n            <div className={styles['trailing-icon']}>{trailingIcon}</div>\n          )}\n        </div>\n        {(error || helperText) && (\n          <span\n            className={cx(\n              styles['helper-text'],\n              error && styles['helper-text-error'],\n              disabled && styles['helper-text-disabled']\n            )}\n          >\n            {error || helperText}\n          </span>\n        )}\n      </div>\n    );\n  }\n);\n\nInputField.displayName = 'InputField';\n"],"names":["cva","styles","forwardRef","_jsxs","cx","_jsx","Tooltip","InfoCircledIcon","chip","Chip"],"mappings":"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"}

package/dist/components/input-field/input-field.d.ts

@@ -1,10 +1,10 @@
-import { type VariantProps } from "class-variance-authority";
-import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { type VariantProps } from 'class-variance-authority';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
 declare const inputWrapper: (props?: ({
     size?: "small" | "large" | null | undefined;
     variant?: "default" | "borderless" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export interface InputFieldProps extends Omit<ComponentPropsWithoutRef<"input">, "error" | "size">, VariantProps<typeof inputWrapper> {
+export interface InputFieldProps extends Omit<ComponentPropsWithoutRef<'input'>, 'error' | 'size'>, VariantProps<typeof inputWrapper> {
     label?: string;
     helperText?: string;
     error?: string;
@@ -21,7 +21,7 @@ export interface InputFieldProps extends Omit<ComponentPropsWithoutRef<"input">,
     }>;
     maxChipsVisible?: number;
     infoTooltip?: string;
-    variant?: "default" | "borderless";
+    variant?: 'default' | 'borderless';
 }
 export declare const InputField: import("react").ForwardRefExoticComponent<InputFieldProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/dist/components/input-field/input-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input-field.d.ts","sourceRoot":"","sources":["../../../components/input-field/input-field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,EAAE,wBAAwB,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AASxE,QAAA,MAAM,YAAY;;;8EAehB,CAAC;AAEH,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,wBAAwB,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,EAC/D,YAAY,CAAC,OAAO,YAAY,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAC;IACxD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC;CACpC;AAED,eAAO,MAAM,UAAU,8GAkHtB,CAAC"}
+{"version":3,"file":"input-field.d.ts","sourceRoot":"","sources":["../../../components/input-field/input-field.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,YAAY,EAAW,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,wBAAwB,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AAQxE,QAAA,MAAM,YAAY;;;8EAehB,CAAC;AAEH,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,wBAAwB,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,EAC/D,YAAY,CAAC,OAAO,YAAY,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAC;IACxD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC;CACpC;AAED,eAAO,MAAM,UAAU,8GA+GtB,CAAC"}

package/dist/components/input-field/input-field.js

@@ -1,8 +1,7 @@
 import { j as jsxRuntimeExports } from '../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
-import { cva } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
-import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
-import { forwardRef } from 'react';
 import { InfoCircledIcon } from '../../node_modules/.pnpm/@radix-ui_react-icons@1.3.0_react@18.2.0/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js';
+import { cx, cva } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
+import { forwardRef } from 'react';
 import { Tooltip } from '../tooltip/tooltip.js';
 import { Chip } from '../chip/chip.js';
 import styles from './input-field.module.css.js';
@@ -11,23 +10,23 @@ import styles from './input-field.module.css.js';
 const inputWrapper = cva(styles.inputWrapper, {
     variants: {
         size: {
-            small: styles["size-small"],
-            large: styles["size-large"],
+            small: styles['size-small'],
+            large: styles['size-large']
         },
         variant: {
-            default: styles["variant-default"],
-            borderless: styles["variant-borderless"],
-        },
+            default: styles['variant-default'],
+            borderless: styles['variant-borderless']
+        }
     },
     defaultVariants: {
-        size: "large",
-        variant: "default",
-    },
+        size: 'large',
+        variant: 'default'
+    }
 });
-const InputField = forwardRef(({ className, disabled, label, helperText, placeholder, error, leadingIcon, trailingIcon, optional, prefix, suffix, width, chips, maxChipsVisible = 2, size, infoTooltip, variant = "default", ...props }, ref) => {
-    return (jsxRuntimeExports.jsxs("div", { className: styles.container, style: { width: width || "100%" }, children: [label && (jsxRuntimeExports.jsxs("div", { className: styles.labelContainer, children: [jsxRuntimeExports.jsxs("label", { className: clsx(styles.label, disabled && styles["label-disabled"]), children: [label, optional && jsxRuntimeExports.jsx("span", { className: styles.optional, children: "(optional)" })] }), infoTooltip && (jsxRuntimeExports.jsx(Tooltip, { message: infoTooltip, side: "right", children: jsxRuntimeExports.jsx("span", { className: styles.helpIcon, children: jsxRuntimeExports.jsx(InfoCircledIcon, {}) }) }))] })), jsxRuntimeExports.jsxs("div", { className: clsx(inputWrapper({ size, variant, className }), error && styles["input-error-wrapper"], disabled && styles["input-disabled-wrapper"], chips?.length && styles["has-chips"]), children: [leadingIcon && (jsxRuntimeExports.jsx("div", { className: styles["leading-icon"], children: leadingIcon })), prefix && jsxRuntimeExports.jsx("div", { className: styles.prefix, children: prefix }), jsxRuntimeExports.jsxs("div", { className: styles["chip-input-container"], children: [chips?.slice(0, maxChipsVisible).map((chip, index) => (jsxRuntimeExports.jsx(Chip, { variant: "outline", isDismissible: !!chip.onRemove, onDismiss: chip.onRemove, className: styles.chip, children: chip.label }, index))), chips && chips.length > maxChipsVisible && (jsxRuntimeExports.jsxs("span", { className: styles["chip-overflow"], children: ["+", chips.length - maxChipsVisible] })), jsxRuntimeExports.jsx("input", { ref: ref, className: clsx(styles["input-field"], leadingIcon && styles["has-leading-icon"], trailingIcon && styles["has-trailing-icon"], prefix && styles["has-prefix"], suffix && styles["has-suffix"], error && styles["input-error"], disabled && styles["input-disabled"], className), "aria-invalid": !!error, placeholder: placeholder, disabled: disabled, ...props })] }), suffix && jsxRuntimeExports.jsx("div", { className: styles.suffix, children: suffix }), trailingIcon && (jsxRuntimeExports.jsx("div", { className: styles["trailing-icon"], children: trailingIcon }))] }), (error || helperText) && (jsxRuntimeExports.jsx("span", { className: clsx(styles["helper-text"], error && styles["helper-text-error"], disabled && styles["helper-text-disabled"]), children: error || helperText }))] }));
+const InputField = forwardRef(({ className, disabled, label, helperText, placeholder, error, leadingIcon, trailingIcon, optional, prefix, suffix, width, chips, maxChipsVisible = 2, size, infoTooltip, variant = 'default', ...props }, ref) => {
+    return (jsxRuntimeExports.jsxs("div", { className: styles.container, style: { width: width || '100%' }, children: [label && (jsxRuntimeExports.jsxs("div", { className: styles.labelContainer, children: [jsxRuntimeExports.jsxs("label", { className: cx(styles.label, disabled && styles['label-disabled']), children: [label, optional && jsxRuntimeExports.jsx("span", { className: styles.optional, children: "(optional)" })] }), infoTooltip && (jsxRuntimeExports.jsx(Tooltip, { message: infoTooltip, side: 'right', children: jsxRuntimeExports.jsx("span", { className: styles.helpIcon, children: jsxRuntimeExports.jsx(InfoCircledIcon, {}) }) }))] })), jsxRuntimeExports.jsxs("div", { className: cx(inputWrapper({ size, variant, className }), error && styles['input-error-wrapper'], disabled && styles['input-disabled-wrapper'], chips?.length && styles['has-chips']), children: [leadingIcon && (jsxRuntimeExports.jsx("div", { className: styles['leading-icon'], children: leadingIcon })), prefix && jsxRuntimeExports.jsx("div", { className: styles.prefix, children: prefix }), jsxRuntimeExports.jsxs("div", { className: styles['chip-input-container'], children: [chips?.slice(0, maxChipsVisible).map((chip, index) => (jsxRuntimeExports.jsx(Chip, { variant: 'outline', isDismissible: !!chip.onRemove, onDismiss: chip.onRemove, className: styles.chip, children: chip.label }, index))), chips && chips.length > maxChipsVisible && (jsxRuntimeExports.jsxs("span", { className: styles['chip-overflow'], children: ["+", chips.length - maxChipsVisible] })), jsxRuntimeExports.jsx("input", { ref: ref, className: cx(styles['input-field'], leadingIcon && styles['has-leading-icon'], trailingIcon && styles['has-trailing-icon'], prefix && styles['has-prefix'], suffix && styles['has-suffix'], error && styles['input-error'], disabled && styles['input-disabled'], className), "aria-invalid": !!error, placeholder: placeholder, disabled: disabled, ...props })] }), suffix && jsxRuntimeExports.jsx("div", { className: styles.suffix, children: suffix }), trailingIcon && (jsxRuntimeExports.jsx("div", { className: styles['trailing-icon'], children: trailingIcon }))] }), (error || helperText) && (jsxRuntimeExports.jsx("span", { className: cx(styles['helper-text'], error && styles['helper-text-error'], disabled && styles['helper-text-disabled']), children: error || helperText }))] }));
 });
-InputField.displayName = "InputField";
+InputField.displayName = 'InputField';
 
 export { InputField };
 //# sourceMappingURL=input-field.js.map

package/dist/components/input-field/input-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-field.js","sources":["../../../components/input-field/input-field.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport clsx from \"clsx\";\nimport { ComponentPropsWithoutRef, ReactNode, forwardRef } from \"react\";\nimport { InfoCircledIcon } from \"@radix-ui/react-icons\";\nimport { Tooltip } from \"../tooltip\";\n\nimport { Chip } from \"../chip\";\nimport styles from \"./input-field.module.css\";\n\n// Todo: Add a dropdown support\n\nconst inputWrapper = cva(styles.inputWrapper, {\n  variants: {\n    size: {\n      small: styles[\"size-small\"],\n      large: styles[\"size-large\"],\n    },\n    variant: {\n      default: styles[\"variant-default\"],\n      borderless: styles[\"variant-borderless\"],\n    },\n  },\n  defaultVariants: {\n    size: \"large\",\n    variant: \"default\",\n  },\n});\n\nexport interface InputFieldProps\n  extends Omit<ComponentPropsWithoutRef<\"input\">, \"error\" | \"size\">,\n    VariantProps<typeof inputWrapper> {\n  label?: string;\n  helperText?: string;\n  error?: string;\n  disabled?: boolean;\n  leadingIcon?: ReactNode;\n  trailingIcon?: ReactNode;\n  optional?: boolean;\n  prefix?: string;\n  suffix?: string;\n  width?: string | number;\n  chips?: Array<{ label: string; onRemove?: () => void }>;\n  maxChipsVisible?: number;\n  infoTooltip?: string;\n  variant?: \"default\" | \"borderless\";\n}\n\nexport const InputField = forwardRef<HTMLInputElement, InputFieldProps>(\n  (\n    {\n      className,\n      disabled,\n      label,\n      helperText,\n      placeholder,\n      error,\n      leadingIcon,\n      trailingIcon,\n      optional,\n      prefix,\n      suffix,\n      width,\n      chips,\n      maxChipsVisible = 2,\n      size,\n      infoTooltip,\n      variant = \"default\",\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div className={styles.container} style={{ width: width || \"100%\" }}>\n        {label && (\n          <div className={styles.labelContainer}>\n            <label\n              className={clsx(\n                styles.label,\n                disabled && styles[\"label-disabled\"]\n              )}\n            >\n              {label}\n              {optional && <span className={styles.optional}>(optional)</span>}\n            </label>\n            {infoTooltip && (\n              <Tooltip message={infoTooltip} side=\"right\">\n                <span className={styles.helpIcon}>\n                  <InfoCircledIcon />\n                </span>\n              </Tooltip>\n            )}\n          </div>\n        )}\n        <div\n          className={clsx(\n            inputWrapper({ size, variant, className }),\n            error && styles[\"input-error-wrapper\"],\n            disabled && styles[\"input-disabled-wrapper\"],\n            chips?.length && styles[\"has-chips\"]\n          )}\n        >\n          {leadingIcon && (\n            <div className={styles[\"leading-icon\"]}>{leadingIcon}</div>\n          )}\n          {prefix && <div className={styles.prefix}>{prefix}</div>}\n\n          <div className={styles[\"chip-input-container\"]}>\n            {chips?.slice(0, maxChipsVisible).map((chip, index) => (\n              <Chip\n                key={index}\n                variant=\"outline\"\n                isDismissible={!!chip.onRemove}\n                onDismiss={chip.onRemove}\n                className={styles.chip}\n              >\n                {chip.label}\n              </Chip>\n            ))}\n            {chips && chips.length > maxChipsVisible && (\n              <span className={styles[\"chip-overflow\"]}>\n                +{chips.length - maxChipsVisible}\n              </span>\n            )}\n            <input\n              ref={ref}\n              className={clsx(\n                styles[\"input-field\"],\n                leadingIcon && styles[\"has-leading-icon\"],\n                trailingIcon && styles[\"has-trailing-icon\"],\n                prefix && styles[\"has-prefix\"],\n                suffix && styles[\"has-suffix\"],\n                error && styles[\"input-error\"],\n                disabled && styles[\"input-disabled\"],\n                className\n              )}\n              aria-invalid={!!error}\n              placeholder={placeholder}\n              disabled={disabled}\n              {...props}\n            />\n          </div>\n\n          {suffix && <div className={styles.suffix}>{suffix}</div>}\n          {trailingIcon && (\n            <div className={styles[\"trailing-icon\"]}>{trailingIcon}</div>\n          )}\n        </div>\n        {(error || helperText) && (\n          <span\n            className={clsx(\n              styles[\"helper-text\"],\n              error && styles[\"helper-text-error\"],\n              disabled && styles[\"helper-text-disabled\"]\n            )}\n          >\n            {error || helperText}\n          </span>\n        )}\n      </div>\n    );\n  }\n);\n\nInputField.displayName = \"InputField\";\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"input-field.js","sources":["../../../components/input-field/input-field.tsx"],"sourcesContent":["import { InfoCircledIcon } from '@radix-ui/react-icons';\nimport { type VariantProps, cva, cx } from 'class-variance-authority';\nimport { ComponentPropsWithoutRef, ReactNode, forwardRef } from 'react';\nimport { Tooltip } from '../tooltip';\n\nimport { Chip } from '../chip';\nimport styles from './input-field.module.css';\n\n// Todo: Add a dropdown support\n\nconst inputWrapper = cva(styles.inputWrapper, {\n  variants: {\n    size: {\n      small: styles['size-small'],\n      large: styles['size-large']\n    },\n    variant: {\n      default: styles['variant-default'],\n      borderless: styles['variant-borderless']\n    }\n  },\n  defaultVariants: {\n    size: 'large',\n    variant: 'default'\n  }\n});\n\nexport interface InputFieldProps\n  extends Omit<ComponentPropsWithoutRef<'input'>, 'error' | 'size'>,\n    VariantProps<typeof inputWrapper> {\n  label?: string;\n  helperText?: string;\n  error?: string;\n  disabled?: boolean;\n  leadingIcon?: ReactNode;\n  trailingIcon?: ReactNode;\n  optional?: boolean;\n  prefix?: string;\n  suffix?: string;\n  width?: string | number;\n  chips?: Array<{ label: string; onRemove?: () => void }>;\n  maxChipsVisible?: number;\n  infoTooltip?: string;\n  variant?: 'default' | 'borderless';\n}\n\nexport const InputField = forwardRef<HTMLInputElement, InputFieldProps>(\n  (\n    {\n      className,\n      disabled,\n      label,\n      helperText,\n      placeholder,\n      error,\n      leadingIcon,\n      trailingIcon,\n      optional,\n      prefix,\n      suffix,\n      width,\n      chips,\n      maxChipsVisible = 2,\n      size,\n      infoTooltip,\n      variant = 'default',\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div className={styles.container} style={{ width: width || '100%' }}>\n        {label && (\n          <div className={styles.labelContainer}>\n            <label\n              className={cx(styles.label, disabled && styles['label-disabled'])}\n            >\n              {label}\n              {optional && <span className={styles.optional}>(optional)</span>}\n            </label>\n            {infoTooltip && (\n              <Tooltip message={infoTooltip} side='right'>\n                <span className={styles.helpIcon}>\n                  <InfoCircledIcon />\n                </span>\n              </Tooltip>\n            )}\n          </div>\n        )}\n        <div\n          className={cx(\n            inputWrapper({ size, variant, className }),\n            error && styles['input-error-wrapper'],\n            disabled && styles['input-disabled-wrapper'],\n            chips?.length && styles['has-chips']\n          )}\n        >\n          {leadingIcon && (\n            <div className={styles['leading-icon']}>{leadingIcon}</div>\n          )}\n          {prefix && <div className={styles.prefix}>{prefix}</div>}\n\n          <div className={styles['chip-input-container']}>\n            {chips?.slice(0, maxChipsVisible).map((chip, index) => (\n              <Chip\n                key={index}\n                variant='outline'\n                isDismissible={!!chip.onRemove}\n                onDismiss={chip.onRemove}\n                className={styles.chip}\n              >\n                {chip.label}\n              </Chip>\n            ))}\n            {chips && chips.length > maxChipsVisible && (\n              <span className={styles['chip-overflow']}>\n                +{chips.length - maxChipsVisible}\n              </span>\n            )}\n            <input\n              ref={ref}\n              className={cx(\n                styles['input-field'],\n                leadingIcon && styles['has-leading-icon'],\n                trailingIcon && styles['has-trailing-icon'],\n                prefix && styles['has-prefix'],\n                suffix && styles['has-suffix'],\n                error && styles['input-error'],\n                disabled && styles['input-disabled'],\n                className\n              )}\n              aria-invalid={!!error}\n              placeholder={placeholder}\n              disabled={disabled}\n              {...props}\n            />\n          </div>\n\n          {suffix && <div className={styles.suffix}>{suffix}</div>}\n          {trailingIcon && (\n            <div className={styles['trailing-icon']}>{trailingIcon}</div>\n          )}\n        </div>\n        {(error || helperText) && (\n          <span\n            className={cx(\n              styles['helper-text'],\n              error && styles['helper-text-error'],\n              disabled && styles['helper-text-disabled']\n            )}\n          >\n            {error || helperText}\n          </span>\n        )}\n      </div>\n    );\n  }\n);\n\nInputField.displayName = 'InputField';\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/components/select/select-item.cjs

@@ -11,7 +11,8 @@ var selectRoot = require('./select-root.cjs');
 var select_module = require('./select.module.css.cjs');
 var index = require('../../node_modules/.pnpm/@radix-ui_react-select@2.2.5_@types_react-dom@18.0.11_@types_react@18.2.12_react-dom@18.3.1_react@18.2.0__react@18.2.0/node_modules/@radix-ui/react-select/dist/index.cjs');
 
-const SelectItem = React.forwardRef(({ className, children, value, leadingIcon, disabled, ...props }, ref) => {
+const SelectItem = React.forwardRef(({ className, children, value: providedValue, leadingIcon, disabled, ...props }, ref) => {
+    const value = String(providedValue);
     const { registerItem, unregisterItem, autocomplete, searchValue, value: selectValue, shouldFilter, multiple } = selectRoot.useSelectContext();
     const isSelected = multiple
         ? selectValue?.includes(value)

package/dist/components/select/select-item.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"select-item.cjs","sources":["../../../components/select/select-item.tsx"],"sourcesContent":["import { ComboboxItem } from '@ariakit/react';\nimport { cx } from 'class-variance-authority';\nimport { Select as SelectPrimitive } from 'radix-ui';\nimport { ElementRef, forwardRef, useLayoutEffect } from 'react';\nimport { Checkbox } from '../checkbox';\nimport { getMatch } from '../dropdown-menu/utils';\nimport { Text } from '../text';\nimport { useSelectContext } from './select-root';\nimport styles from './select.module.css';\n\nexport const SelectItem = forwardRef<\n  ElementRef<typeof SelectPrimitive.Item>,\n  Omit<SelectPrimitive.SelectItemProps, 'asChild'> & {\n    leadingIcon?: React.ReactNode;\n  }\n>(({ className, children, value, leadingIcon, disabled, ...props }, ref) => {\n  const {\n    registerItem,\n    unregisterItem,\n    autocomplete,\n    searchValue,\n    value: selectValue,\n    shouldFilter,\n    multiple\n  } = useSelectContext();\n\n  const isSelected = multiple\n    ? selectValue?.includes(value)\n    : value === selectValue;\n  const isMatched = getMatch(value, children, searchValue);\n  const isHidden = shouldFilter && isSelected && !isMatched;\n\n  const element =\n    typeof children === 'string' ? (\n      <>\n        {leadingIcon && <div className={styles.itemIcon}>{leadingIcon}</div>}\n        <Text>{children}</Text>\n      </>\n    ) : (\n      children\n    );\n\n  useLayoutEffect(() => {\n    registerItem({ leadingIcon, children, value });\n    return () => {\n      unregisterItem(value);\n    };\n  }, [value, children, registerItem, unregisterItem, leadingIcon]);\n\n  if (shouldFilter && !isMatched && !isSelected) {\n    // Not selected and doesn't match search, so don't render at all\n    return null;\n  }\n\n  return (\n    <SelectPrimitive.Item\n      ref={ref}\n      value={value}\n      className={cx(styles.menuitem, className, isHidden && styles.hidden)}\n      data-hidden={isHidden}\n      disabled={disabled || isHidden}\n      asChild={autocomplete}\n      aria-selected={isSelected}\n      data-checked={isSelected}\n      {...props}\n    >\n      {autocomplete ? (\n        <ComboboxItem\n          clickOnEnter={false}\n          clickOnSpace={false}\n          onBlurCapture={event => {\n            event.preventDefault();\n          }}\n        >\n          {multiple && <Checkbox checked={isSelected} />}\n          {element}\n        </ComboboxItem>\n      ) : (\n        <>\n          {multiple && <Checkbox checked={isSelected} />}\n          {element}\n        </>\n      )}\n    </SelectPrimitive.Item>\n  );\n});\nSelectItem.displayName = SelectPrimitive.Item.displayName;\n"],"names":["forwardRef","useSelectContext","getMatch","_jsxs","_jsx","styles","Text","useLayoutEffect","SelectPrimitive.Item","cx","ComboboxItem","Checkbox","_Fragment"],"mappings":";;;;;;;;;;;;;AAUa,MAAA,UAAU,GAAGA,gBAAU,CAKlC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;IACzE,MAAM,EACJ,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,WAAW,EACX,KAAK,EAAE,WAAW,EAClB,YAAY,EACZ,QAAQ,EACT,GAAGC,2BAAgB,EAAE,CAAC;IAEvB,MAAM,UAAU,GAAG,QAAQ;AACzB,UAAE,WAAW,EAAE,QAAQ,CAAC,KAAK,CAAC;AAC9B,UAAE,KAAK,KAAK,WAAW,CAAC;IAC1B,MAAM,SAAS,GAAGC,cAAQ,CAAC,KAAK,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC;IACzD,MAAM,QAAQ,GAAG,YAAY,IAAI,UAAU,IAAI,CAAC,SAAS,CAAC;AAE1D,IAAA,MAAM,OAAO,GACX,OAAO,QAAQ,KAAK,QAAQ,IAC1BC,sFACG,WAAW,IAAIC,gCAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEC,qBAAM,CAAC,QAAQ,EAAA,QAAA,EAAG,WAAW,EAAO,CAAA,EACpED,gCAAC,CAAAE,SAAI,cAAE,QAAQ,EAAA,CAAQ,CACtB,EAAA,CAAA,KAEH,QAAQ,CACT,CAAC;IAEJC,qBAAe,CAAC,MAAK;QACnB,YAAY,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC;AAC/C,QAAA,OAAO,MAAK;YACV,cAAc,CAAC,KAAK,CAAC,CAAC;AACxB,SAAC,CAAC;AACJ,KAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,cAAc,EAAE,WAAW,CAAC,CAAC,CAAC;IAEjE,IAAI,YAAY,IAAI,CAAC,SAAS,IAAI,CAAC,UAAU,EAAE;;AAE7C,QAAA,OAAO,IAAI,CAAC;KACb;AAED,IAAA,QACEH,gCAAA,CAACI,UAAoB,EACnB,EAAA,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,SAAS,EAAEC,UAAE,CAACJ,qBAAM,CAAC,QAAQ,EAAE,SAAS,EAAE,QAAQ,IAAIA,qBAAM,CAAC,MAAM,CAAC,EAAA,aAAA,EACvD,QAAQ,EACrB,QAAQ,EAAE,QAAQ,IAAI,QAAQ,EAC9B,OAAO,EAAE,YAAY,EAAA,eAAA,EACN,UAAU,EAAA,cAAA,EACX,UAAU,EAAA,GACpB,KAAK,EAAA,QAAA,EAER,YAAY,IACXF,iCAAC,CAAAO,qBAAY,EACX,EAAA,YAAY,EAAE,KAAK,EACnB,YAAY,EAAE,KAAK,EACnB,aAAa,EAAE,KAAK,IAAG;gBACrB,KAAK,CAAC,cAAc,EAAE,CAAC;AACzB,aAAC,EAEA,QAAA,EAAA,CAAA,QAAQ,IAAIN,gCAAA,CAACO,iBAAQ,EAAC,EAAA,OAAO,EAAE,UAAU,GAAI,EAC7C,OAAO,CACK,EAAA,CAAA,KAEfR,iCAAA,CAAAS,qCAAA,EAAA,EAAA,QAAA,EAAA,CACG,QAAQ,IAAIR,gCAAC,CAAAO,iBAAQ,IAAC,OAAO,EAAE,UAAU,EAAA,CAAI,EAC7C,OAAO,CAAA,EAAA,CACP,CACJ,EAAA,CACoB,EACvB;AACJ,CAAC,EAAE;AACH,UAAU,CAAC,WAAW,GAAGH,UAAoB,CAAC,WAAW;;;;"}
+{"version":3,"file":"select-item.cjs","sources":["../../../components/select/select-item.tsx"],"sourcesContent":["import { ComboboxItem } from '@ariakit/react';\nimport { cx } from 'class-variance-authority';\nimport { Select as SelectPrimitive } from 'radix-ui';\nimport { ElementRef, forwardRef, useLayoutEffect } from 'react';\nimport { Checkbox } from '../checkbox';\nimport { getMatch } from '../dropdown-menu/utils';\nimport { Text } from '../text';\nimport { useSelectContext } from './select-root';\nimport styles from './select.module.css';\n\nexport const SelectItem = forwardRef<\n  ElementRef<typeof SelectPrimitive.Item>,\n  Omit<SelectPrimitive.SelectItemProps, 'asChild'> & {\n    leadingIcon?: React.ReactNode;\n  }\n>(\n  (\n    {\n      className,\n      children,\n      value: providedValue,\n      leadingIcon,\n      disabled,\n      ...props\n    },\n    ref\n  ) => {\n    const value = String(providedValue);\n    const {\n      registerItem,\n      unregisterItem,\n      autocomplete,\n      searchValue,\n      value: selectValue,\n      shouldFilter,\n      multiple\n    } = useSelectContext();\n\n    const isSelected = multiple\n      ? selectValue?.includes(value)\n      : value === selectValue;\n    const isMatched = getMatch(value, children, searchValue);\n    const isHidden = shouldFilter && isSelected && !isMatched;\n\n    const element =\n      typeof children === 'string' ? (\n        <>\n          {leadingIcon && <div className={styles.itemIcon}>{leadingIcon}</div>}\n          <Text>{children}</Text>\n        </>\n      ) : (\n        children\n      );\n\n    useLayoutEffect(() => {\n      registerItem({ leadingIcon, children, value });\n      return () => {\n        unregisterItem(value);\n      };\n    }, [value, children, registerItem, unregisterItem, leadingIcon]);\n\n    if (shouldFilter && !isMatched && !isSelected) {\n      // Not selected and doesn't match search, so don't render at all\n      return null;\n    }\n\n    return (\n      <SelectPrimitive.Item\n        ref={ref}\n        value={value}\n        className={cx(styles.menuitem, className, isHidden && styles.hidden)}\n        data-hidden={isHidden}\n        disabled={disabled || isHidden}\n        asChild={autocomplete}\n        aria-selected={isSelected}\n        data-checked={isSelected}\n        {...props}\n      >\n        {autocomplete ? (\n          <ComboboxItem\n            clickOnEnter={false}\n            clickOnSpace={false}\n            onBlurCapture={event => {\n              event.preventDefault();\n            }}\n          >\n            {multiple && <Checkbox checked={isSelected} />}\n            {element}\n          </ComboboxItem>\n        ) : (\n          <>\n            {multiple && <Checkbox checked={isSelected} />}\n            {element}\n          </>\n        )}\n      </SelectPrimitive.Item>\n    );\n  }\n);\nSelectItem.displayName = SelectPrimitive.Item.displayName;\n"],"names":["forwardRef","useSelectContext","getMatch","_jsxs","_jsx","styles","Text","useLayoutEffect","SelectPrimitive.Item","cx","ComboboxItem","Checkbox","_Fragment"],"mappings":";;;;;;;;;;;;;AAUa,MAAA,UAAU,GAAGA,gBAAU,CAMlC,CACE,EACE,SAAS,EACT,QAAQ,EACR,KAAK,EAAE,aAAa,EACpB,WAAW,EACX,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,KACD;AACF,IAAA,MAAM,KAAK,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC;IACpC,MAAM,EACJ,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,WAAW,EACX,KAAK,EAAE,WAAW,EAClB,YAAY,EACZ,QAAQ,EACT,GAAGC,2BAAgB,EAAE,CAAC;IAEvB,MAAM,UAAU,GAAG,QAAQ;AACzB,UAAE,WAAW,EAAE,QAAQ,CAAC,KAAK,CAAC;AAC9B,UAAE,KAAK,KAAK,WAAW,CAAC;IAC1B,MAAM,SAAS,GAAGC,cAAQ,CAAC,KAAK,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC;IACzD,MAAM,QAAQ,GAAG,YAAY,IAAI,UAAU,IAAI,CAAC,SAAS,CAAC;AAE1D,IAAA,MAAM,OAAO,GACX,OAAO,QAAQ,KAAK,QAAQ,IAC1BC,sFACG,WAAW,IAAIC,gCAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEC,qBAAM,CAAC,QAAQ,EAAA,QAAA,EAAG,WAAW,EAAO,CAAA,EACpED,gCAAC,CAAAE,SAAI,cAAE,QAAQ,EAAA,CAAQ,CACtB,EAAA,CAAA,KAEH,QAAQ,CACT,CAAC;IAEJC,qBAAe,CAAC,MAAK;QACnB,YAAY,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC;AAC/C,QAAA,OAAO,MAAK;YACV,cAAc,CAAC,KAAK,CAAC,CAAC;AACxB,SAAC,CAAC;AACJ,KAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,cAAc,EAAE,WAAW,CAAC,CAAC,CAAC;IAEjE,IAAI,YAAY,IAAI,CAAC,SAAS,IAAI,CAAC,UAAU,EAAE;;AAE7C,QAAA,OAAO,IAAI,CAAC;KACb;AAED,IAAA,QACEH,gCAAA,CAACI,UAAoB,EACnB,EAAA,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,SAAS,EAAEC,UAAE,CAACJ,qBAAM,CAAC,QAAQ,EAAE,SAAS,EAAE,QAAQ,IAAIA,qBAAM,CAAC,MAAM,CAAC,EAAA,aAAA,EACvD,QAAQ,EACrB,QAAQ,EAAE,QAAQ,IAAI,QAAQ,EAC9B,OAAO,EAAE,YAAY,EAAA,eAAA,EACN,UAAU,EAAA,cAAA,EACX,UAAU,EAAA,GACpB,KAAK,EAAA,QAAA,EAER,YAAY,IACXF,iCAAC,CAAAO,qBAAY,EACX,EAAA,YAAY,EAAE,KAAK,EACnB,YAAY,EAAE,KAAK,EACnB,aAAa,EAAE,KAAK,IAAG;gBACrB,KAAK,CAAC,cAAc,EAAE,CAAC;AACzB,aAAC,EAEA,QAAA,EAAA,CAAA,QAAQ,IAAIN,gCAAA,CAACO,iBAAQ,EAAC,EAAA,OAAO,EAAE,UAAU,GAAI,EAC7C,OAAO,CACK,EAAA,CAAA,KAEfR,iCAAA,CAAAS,qCAAA,EAAA,EAAA,QAAA,EAAA,CACG,QAAQ,IAAIR,gCAAC,CAAAO,iBAAQ,IAAC,OAAO,EAAE,UAAU,EAAA,CAAI,EAC7C,OAAO,CAAA,EAAA,CACP,CACJ,EAAA,CACoB,EACvB;AACJ,CAAC,EACD;AACF,UAAU,CAAC,WAAW,GAAGH,UAAoB,CAAC,WAAW;;;;"}

package/dist/components/select/select-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select-item.d.ts","sourceRoot":"","sources":["../../../components/select/select-item.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,UAAU,CAAC;AAQrD,eAAO,MAAM,UAAU;kBAGL,MAAM,SAAS;kDAwE/B,CAAC"}
+{"version":3,"file":"select-item.d.ts","sourceRoot":"","sources":["../../../components/select/select-item.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,UAAU,CAAC;AAQrD,eAAO,MAAM,UAAU;kBAGL,MAAM,SAAS;kDAqFhC,CAAC"}