@raystack/apsara 0.44.1 → 0.44.3

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

@@ -4,6 +4,7 @@ var jsxRuntime = require('../../node_modules/.pnpm/react@18.2.0/node_modules/rea
 var reactIcons_esm = require('../../node_modules/.pnpm/@radix-ui_react-icons@1.3.0_react@18.2.0/node_modules/@radix-ui/react-icons/dist/react-icons.esm.cjs');
 var React = require('react');
 var box = require('../box/box.cjs');
+var index = require('../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.cjs');
 require('../../node_modules/.pnpm/react-day-picker@9.0.4_react@18.2.0/node_modules/react-day-picker/dist/esm/UI.cjs');
 require('../../node_modules/.pnpm/react-day-picker@9.0.4_react@18.2.0/node_modules/react-day-picker/dist/esm/useDayPicker.cjs');
 var flex = require('../flex/flex.cjs');
@@ -18,23 +19,35 @@ var textfield = require('../textfield/textfield.cjs');
 var filterChip_module = require('./filter-chip.module.css.cjs');
 var filters = require('../../types/filters.cjs');
 
+const chip = index.cva(filterChip_module.default.chip, {
+    variants: {
+        variant: {
+            default: filterChip_module.default["chip-default"],
+            text: null,
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
 const Operation = ({ label, columnType = filters.FilterType.string, onOperationSelect, }) => {
     const filterOptions = filters.filterOperators[columnType] || [];
     // FilterOperatorTypes gives error as Select returns string
     const [value, setValue] = React.useState(filterOptions?.[0]?.value);
     React.useEffect(() => {
-        const selectedOption = filterOptions.find((o) => o.value === value);
+        const selectedOption = filterOptions.find(o => o.value === value);
         if (selectedOption) {
             onOperationSelect(selectedOption);
         }
     }, [value]);
-    return (jsxRuntime.jsxRuntimeExports.jsxs(select.Select, { value: value, onValueChange: setValue, "aria-labelledby": `${label}-label`, children: [jsxRuntime.jsxRuntimeExports.jsx(select.Select.Trigger, { variant: "filter", className: filterChip_module.default.operation, "aria-label": `${label} filter operation`, children: jsxRuntime.jsxRuntimeExports.jsx(select.Select.Value, { placeholder: "Select operation", className: filterChip_module.default.operationText }) }), jsxRuntime.jsxRuntimeExports.jsx(select.Select.Content, { "data-variant": "filter", children: filterOptions.map((opt) => {
+    return (jsxRuntime.jsxRuntimeExports.jsxs(select.Select, { value: value, onValueChange: setValue, "aria-labelledby": `${label}-label`, children: [jsxRuntime.jsxRuntimeExports.jsx(select.Select.Trigger, { variant: "text", className: filterChip_module.default.selectValue, "aria-label": `${label} filter operation`, children: jsxRuntime.jsxRuntimeExports.jsx(select.Select.Value, { placeholder: "Select operation", className: filterChip_module.default.operationText }) }), jsxRuntime.jsxRuntimeExports.jsx(select.Select.Content, { "data-variant": "filter", children: filterOptions.map(opt => {
                     return (jsxRuntime.jsxRuntimeExports.jsx(select.Select.Item, { value: opt.value, "aria-label": `Filter ${label} ${opt.label}`, children: opt.label }, opt.value));
                 }) })] }));
 };
-const FilterChip = ({ label, value, onRemove = () => null, className, ref, columnType = filters.FilterType.string, options = [], onValueChange, onOperationChange, leadingIcon, ...props }) => {
+const FilterChip = ({ label, value, onRemove, className, ref, columnType = filters.FilterType.string, options = [], onValueChange, onOperationChange, leadingIcon, variant, ...props }) => {
     const [operation, setOperation] = React.useState();
     const [filterValue, setFilterValue] = React.useState(value || "");
+    const showOnRemove = typeof onRemove === "function";
     React.useEffect(() => {
         if (onOperationChange && operation?.value) {
             onOperationChange(operation?.value);
@@ -48,14 +61,14 @@ const FilterChip = ({ label, value, onRemove = () => null, className, ref, colum
     const renderValueInput = () => {
         switch (columnType) {
             case filters.FilterType.select:
-                return (jsxRuntime.jsxRuntimeExports.jsxs(select.Select, { value: filterValue.toString(), onValueChange: setFilterValue, children: [jsxRuntime.jsxRuntimeExports.jsx(select.Select.Trigger, { variant: "filter", className: filterChip_module.default.selectValue, children: jsxRuntime.jsxRuntimeExports.jsx(select.Select.Value, { placeholder: "Select value" }) }), jsxRuntime.jsxRuntimeExports.jsx(select.Select.Content, { "data-variant": "filter", children: options.map((opt) => (jsxRuntime.jsxRuntimeExports.jsx(select.Select.Item, { value: opt.value.toString(), children: opt.label }, opt.value.toString()))) })] }));
+                return (jsxRuntime.jsxRuntimeExports.jsxs(select.Select, { value: filterValue.toString(), onValueChange: setFilterValue, children: [jsxRuntime.jsxRuntimeExports.jsx(select.Select.Trigger, { variant: "text", className: index.cx(filterChip_module.default.selectValue, filterChip_module.default.selectColumn), children: jsxRuntime.jsxRuntimeExports.jsx(select.Select.Value, { placeholder: "Select value" }) }), jsxRuntime.jsxRuntimeExports.jsx(select.Select.Content, { "data-variant": "filter", children: options.map(opt => (jsxRuntime.jsxRuntimeExports.jsx(select.Select.Item, { value: opt.value.toString(), children: opt.label }, opt.value.toString()))) })] }));
             case filters.FilterType.date:
-                return (jsxRuntime.jsxRuntimeExports.jsx("div", { className: filterChip_module.default.dateFieldWrapper, children: jsxRuntime.jsxRuntimeExports.jsx(datePicker.DatePicker, { value: filterValue, onSelect: (date) => setFilterValue(date), showCalendarIcon: false, textFieldProps: { className: filterChip_module.default.dateField } }) }));
+                return (jsxRuntime.jsxRuntimeExports.jsx("div", { className: filterChip_module.default.dateFieldWrapper, children: jsxRuntime.jsxRuntimeExports.jsx(datePicker.DatePicker, { value: filterValue, onSelect: date => setFilterValue(date), showCalendarIcon: false, textFieldProps: { className: filterChip_module.default.dateField } }) }));
             default:
-                return (jsxRuntime.jsxRuntimeExports.jsx("div", { className: filterChip_module.default.textFieldWrapper, children: jsxRuntime.jsxRuntimeExports.jsx(textfield.TextField, { className: filterChip_module.default.textField, value: filterValue, onChange: (e) => setFilterValue(e.target.value) }) }));
+                return (jsxRuntime.jsxRuntimeExports.jsx("div", { className: filterChip_module.default.textFieldWrapper, children: jsxRuntime.jsxRuntimeExports.jsx(textfield.TextField, { className: filterChip_module.default.textField, value: filterValue, onChange: e => setFilterValue(e.target.value) }) }));
         }
     };
-    return (jsxRuntime.jsxRuntimeExports.jsx(box.Box, { ref: ref, className: [filterChip_module.default.chip, className].filter(Boolean).join(" "), role: "group", "aria-label": `Filter by ${label}`, ...props, children: jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { align: "center", children: [jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { align: "center", gap: 2, children: [leadingIcon && (jsxRuntime.jsxRuntimeExports.jsx("span", { className: filterChip_module.default.leadingIcon, "aria-hidden": "true", children: leadingIcon })), jsxRuntime.jsxRuntimeExports.jsx(text.Text, { size: 2, weight: "normal", children: label })] }), jsxRuntime.jsxRuntimeExports.jsx(Operation, { columnType: columnType, label: label, onOperationSelect: setOperation }), renderValueInput(), jsxRuntime.jsxRuntimeExports.jsx("div", { className: filterChip_module.default.removeIconContainer, role: "button", tabIndex: 0, "aria-label": `Remove ${label} filter`, children: jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.Cross1Icon, { className: filterChip_module.default.removeIcon, onClick: onRemove }) })] }) }));
+    return (jsxRuntime.jsxRuntimeExports.jsx(box.Box, { ref: ref, className: chip({ variant, className }), role: "group", "aria-label": `Filter by ${label}`, ...props, children: jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { align: "center", children: [jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { align: "center", gap: 2, children: [leadingIcon && (jsxRuntime.jsxRuntimeExports.jsx("span", { className: filterChip_module.default.leadingIcon, "aria-hidden": "true", children: leadingIcon })), jsxRuntime.jsxRuntimeExports.jsx(text.Text, { size: 2, weight: "normal", children: label })] }), jsxRuntime.jsxRuntimeExports.jsx(Operation, { columnType: columnType, label: label, onOperationSelect: setOperation }), renderValueInput(), showOnRemove && (jsxRuntime.jsxRuntimeExports.jsx("button", { className: filterChip_module.default.removeIconContainer, "aria-label": `Remove ${label} filter`, onClick: onRemove, children: jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.Cross1Icon, { className: filterChip_module.default.removeIcon }) }))] }) }));
 };
 FilterChip.displayName = "FilterChip";
 

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

@@ -1 +1 @@
-{"version":3,"file":"filter-chip.cjs","sources":["../../../../v1/components/filter-chip/filter-chip.tsx"],"sourcesContent":["import { Cross1Icon } from \"@radix-ui/react-icons\";\nimport { ReactElement,ReactNode, useEffect, useState } from \"react\";\n\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 \"~/v1/types/filters\";\n\nexport interface FilterChipProps {\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    >\n      <Select.Trigger\n        variant=\"filter\"\n        className={styles.operation}\n        aria-label={`${label} filter operation`}\n      >\n        <Select.Value\n          placeholder=\"Select operation\"\n          className={styles.operationText}\n        />\n      </Select.Trigger>\n      <Select.Content data-variant=\"filter\">\n        {filterOptions.map((opt) => {\n          return (\n            <Select.Item\n              key={opt.value}\n              value={opt.value}\n              aria-label={`Filter ${label} ${opt.label}`}\n            >\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 = () => null,\n  className,\n  ref,\n  columnType = FilterType.string,\n  options = [],\n  onValueChange,\n  onOperationChange,\n  leadingIcon,\n  ...props\n}: FilterChipProps) => {\n  const [operation, setOperation] = useState<FilterOperation>();\n  const [filterValue, setFilterValue] = useState<any>(value || \"\");\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 variant=\"filter\" className={styles.selectValue}>\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) => setFilterValue(date)}\n              showCalendarIcon={false}\n              textFieldProps={{ 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={[styles.chip, className].filter(Boolean).join(\" \")}\n      role=\"group\"\n      aria-label={`Filter by ${label}`}\n      {...props}\n    >\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        <div\n          className={styles.removeIconContainer}\n          role=\"button\"\n          tabIndex={0}\n          aria-label={`Remove ${label} filter`}\n        >\n          <Cross1Icon className={styles.removeIcon} onClick={onRemove} />\n        </div>\n      </Flex>\n    </Box>\n  );\n};\n\nFilterChip.displayName = \"FilterChip\";\n"],"names":["FilterType","filterOperators","useState","useEffect","_jsxs","Select","_jsx","styles","DatePicker","TextField","Box","Flex","Text","Cross1Icon"],"mappings":"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"}
+{"version":3,"file":"filter-chip.cjs","sources":["../../../../v1/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 \"~/v1/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              textFieldProps={{ 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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"}

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

@@ -1,6 +1,10 @@
 import { ReactElement, ReactNode } from "react";
 import { FilterSelectOption, FilterTypes } from "~/v1/types/filters";
-export interface FilterChipProps {
+import { VariantProps } from "class-variance-authority";
+declare const chip: (props?: ({
+    variant?: "text" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface FilterChipProps extends VariantProps<typeof chip> {
     label: string;
     value?: string;
     onRemove?: () => void;
@@ -14,7 +18,8 @@ export interface FilterChipProps {
     leadingIcon?: ReactElement;
 }
 export declare const FilterChip: {
-    ({ label, value, onRemove, className, ref, columnType, options, onValueChange, onOperationChange, leadingIcon, ...props }: FilterChipProps): import("react/jsx-runtime").JSX.Element;
+    ({ label, value, onRemove, className, ref, columnType, options, onValueChange, onOperationChange, leadingIcon, variant, ...props }: FilterChipProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
+export {};
 //# sourceMappingURL=filter-chip.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"filter-chip.d.ts","sourceRoot":"","sources":["../../../../v1/components/filter-chip/filter-chip.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAC,SAAS,EAAuB,MAAM,OAAO,CAAC;AAUpE,OAAO,EAGL,kBAAkB,EAElB,WAAW,EACZ,MAAM,oBAAoB,CAAC;AAE5B,MAAM,WAAW,eAAe;IAC9B,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;AAyDD,eAAO,MAAM,UAAU;+HAYpB,eAAe;;CAgGjB,CAAC"}
+{"version":3,"file":"filter-chip.d.ts","sourceRoot":"","sources":["../../../../v1/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,oBAAoB,CAAC;AAC5B,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"}

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

@@ -2,6 +2,7 @@ import { j as jsxRuntimeExports } from '../../node_modules/.pnpm/react@18.2.0/no
 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 '../../node_modules/.pnpm/react-day-picker@9.0.4_react@18.2.0/node_modules/react-day-picker/dist/esm/UI.js';
 import '../../node_modules/.pnpm/react-day-picker@9.0.4_react@18.2.0/node_modules/react-day-picker/dist/esm/useDayPicker.js';
 import { Flex } from '../flex/flex.js';
@@ -16,23 +17,35 @@ import { TextField } from '../textfield/textfield.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,
+        },
+    },
+    defaultVariants: {
+        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);
+        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: "filter", className: styles.operation, "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.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 = () => null, className, ref, columnType = FilterType.string, options = [], onValueChange, onOperationChange, leadingIcon, ...props }) => {
+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);
@@ -46,14 +59,14 @@ const FilterChip = ({ label, value, onRemove = () => null, className, ref, colum
     const renderValueInput = () => {
         switch (columnType) {
             case FilterType.select:
-                return (jsxRuntimeExports.jsxs(Select, { value: filterValue.toString(), onValueChange: setFilterValue, children: [jsxRuntimeExports.jsx(Select.Trigger, { variant: "filter", className: styles.selectValue, 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: 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()))) })] }));
             case FilterType.date:
-                return (jsxRuntimeExports.jsx("div", { className: styles.dateFieldWrapper, children: jsxRuntimeExports.jsx(DatePicker, { value: filterValue, onSelect: (date) => setFilterValue(date), showCalendarIcon: false, textFieldProps: { className: styles.dateField } }) }));
+                return (jsxRuntimeExports.jsx("div", { className: styles.dateFieldWrapper, children: jsxRuntimeExports.jsx(DatePicker, { value: filterValue, onSelect: date => setFilterValue(date), showCalendarIcon: false, textFieldProps: { 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 => setFilterValue(e.target.value) }) }));
         }
     };
-    return (jsxRuntimeExports.jsx(Box, { ref: ref, className: [styles.chip, className].filter(Boolean).join(" "), 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(), jsxRuntimeExports.jsx("div", { className: styles.removeIconContainer, role: "button", tabIndex: 0, "aria-label": `Remove ${label} filter`, children: jsxRuntimeExports.jsx(Cross1Icon, { className: styles.removeIcon, onClick: onRemove }) })] }) }));
+    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 }) }))] }) }));
 };
 FilterChip.displayName = "FilterChip";
 

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

@@ -1 +1 @@
-{"version":3,"file":"filter-chip.js","sources":["../../../../v1/components/filter-chip/filter-chip.tsx"],"sourcesContent":["import { Cross1Icon } from \"@radix-ui/react-icons\";\nimport { ReactElement,ReactNode, useEffect, useState } from \"react\";\n\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 \"~/v1/types/filters\";\n\nexport interface FilterChipProps {\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    >\n      <Select.Trigger\n        variant=\"filter\"\n        className={styles.operation}\n        aria-label={`${label} filter operation`}\n      >\n        <Select.Value\n          placeholder=\"Select operation\"\n          className={styles.operationText}\n        />\n      </Select.Trigger>\n      <Select.Content data-variant=\"filter\">\n        {filterOptions.map((opt) => {\n          return (\n            <Select.Item\n              key={opt.value}\n              value={opt.value}\n              aria-label={`Filter ${label} ${opt.label}`}\n            >\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 = () => null,\n  className,\n  ref,\n  columnType = FilterType.string,\n  options = [],\n  onValueChange,\n  onOperationChange,\n  leadingIcon,\n  ...props\n}: FilterChipProps) => {\n  const [operation, setOperation] = useState<FilterOperation>();\n  const [filterValue, setFilterValue] = useState<any>(value || \"\");\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 variant=\"filter\" className={styles.selectValue}>\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) => setFilterValue(date)}\n              showCalendarIcon={false}\n              textFieldProps={{ 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={[styles.chip, className].filter(Boolean).join(\" \")}\n      role=\"group\"\n      aria-label={`Filter by ${label}`}\n      {...props}\n    >\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        <div\n          className={styles.removeIconContainer}\n          role=\"button\"\n          tabIndex={0}\n          aria-label={`Remove ${label} filter`}\n        >\n          <Cross1Icon className={styles.removeIcon} onClick={onRemove} />\n        </div>\n      </Flex>\n    </Box>\n  );\n};\n\nFilterChip.displayName = \"FilterChip\";\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;AAuCA,MAAM,SAAS,GAAG,CAAC,EACjB,KAAK,EACL,UAAU,GAAG,UAAU,CAAC,MAAM,EAC9B,iBAAiB,GACF,KAAI;IACnB,MAAM,aAAa,GAAG,eAAe,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;;AAExD,IAAA,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,aAAa,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;IAEtE,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,cAAc,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;QACpE,IAAI,cAAc,EAAE;YAClB,iBAAiB,CAAC,cAAc,CAAC,CAAC;SACnC;AACH,KAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;AAEZ,IAAA,QACEA,sBAAA,CAAC,MAAM,EAAA,EACL,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,QAAQ,EAAA,iBAAA,EACN,GAAG,KAAK,CAAA,MAAA,CAAQ,EAEjC,QAAA,EAAA,CAAAC,qBAAA,CAAC,MAAM,CAAC,OAAO,EAAA,EACb,OAAO,EAAC,QAAQ,EAChB,SAAS,EAAE,MAAM,CAAC,SAAS,gBACf,CAAG,EAAA,KAAK,CAAmB,iBAAA,CAAA,EAAA,QAAA,EAEvCA,qBAAC,CAAA,MAAM,CAAC,KAAK,EACX,EAAA,WAAW,EAAC,kBAAkB,EAC9B,SAAS,EAAE,MAAM,CAAC,aAAa,EAAA,CAC/B,EACa,CAAA,EACjBA,qBAAC,CAAA,MAAM,CAAC,OAAO,oBAAc,QAAQ,EAAA,QAAA,EAClC,aAAa,CAAC,GAAG,CAAC,CAAC,GAAG,KAAI;AACzB,oBAAA,QACEA,qBAAA,CAAC,MAAM,CAAC,IAAI,EAAA,EAEV,KAAK,EAAE,GAAG,CAAC,KAAK,EAAA,YAAA,EACJ,CAAU,OAAA,EAAA,KAAK,CAAI,CAAA,EAAA,GAAG,CAAC,KAAK,CAAE,CAAA,EAAA,QAAA,EAEzC,GAAG,CAAC,KAAK,EAAA,EAJL,GAAG,CAAC,KAAK,CAKF,EACd;AACJ,iBAAC,CAAC,EAAA,CACa,CACV,EAAA,CAAA,EACT;AACJ,CAAC,CAAC;AAEW,MAAA,UAAU,GAAG,CAAC,EACzB,KAAK,EACL,KAAK,EACL,QAAQ,GAAG,MAAM,IAAI,EACrB,SAAS,EACT,GAAG,EACH,UAAU,GAAG,UAAU,CAAC,MAAM,EAC9B,OAAO,GAAG,EAAE,EACZ,aAAa,EACb,iBAAiB,EACjB,WAAW,EACX,GAAG,KAAK,EACQ,KAAI;IACpB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,EAAmB,CAAC;AAC9D,IAAA,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAM,KAAK,IAAI,EAAE,CAAC,CAAC;IAEjE,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,iBAAiB,IAAI,SAAS,EAAE,KAAK,EAAE;AACzC,YAAA,iBAAiB,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;SACrC;AACH,KAAC,EAAE,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC;IAEvB,SAAS,CAAC,MAAK;QACb,IAAI,aAAa,EAAE;YACjB,aAAa,CAAC,WAAW,CAAC,CAAC;SAC5B;AACH,KAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,MAAM,gBAAgB,GAAG,MAAK;QAC5B,QAAQ,UAAU;YAChB,KAAK,UAAU,CAAC,MAAM;AACpB,gBAAA,QACED,sBAAC,CAAA,MAAM,IAAC,KAAK,EAAE,WAAW,CAAC,QAAQ,EAAE,EAAE,aAAa,EAAE,cAAc,EAAA,QAAA,EAAA,CAClEC,sBAAC,MAAM,CAAC,OAAO,EAAC,EAAA,OAAO,EAAC,QAAQ,EAAC,SAAS,EAAE,MAAM,CAAC,WAAW,YAC5DA,qBAAC,CAAA,MAAM,CAAC,KAAK,EAAA,EAAC,WAAW,EAAC,cAAc,GAAG,EAC5B,CAAA,EACjBA,sBAAC,MAAM,CAAC,OAAO,EAAA,EAAA,cAAA,EAAc,QAAQ,EAClC,QAAA,EAAA,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,MACfA,sBAAC,MAAM,CAAC,IAAI,EAEV,EAAA,KAAK,EAAE,GAAG,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAA,QAAA,EAE1B,GAAG,CAAC,KAAK,IAHL,GAAG,CAAC,KAAK,CAAC,QAAQ,EAAE,CAIb,CACf,CAAC,EACa,CAAA,CAAA,EAAA,CACV,EACT;YACJ,KAAK,UAAU,CAAC,IAAI;AAClB,gBAAA,QACEA,qBAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,gBAAgB,EACrC,QAAA,EAAAA,qBAAA,CAAC,UAAU,EACT,EAAA,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,CAAC,IAAI,KAAK,cAAc,CAAC,IAAI,CAAC,EACxC,gBAAgB,EAAE,KAAK,EACvB,cAAc,EAAE,EAAE,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,EAC/C,CAAA,EAAA,CACE,EACN;AACJ,YAAA;AACE,gBAAA,QACEA,qBAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,gBAAgB,EAAA,QAAA,EACrCA,qBAAC,CAAA,SAAS,IACR,SAAS,EAAE,MAAM,CAAC,SAAS,EAC3B,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,CAAC,CAAC,KAAK,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC/C,CAAA,EAAA,CACE,EACN;SACL;AACH,KAAC,CAAC;AAEF,IAAA,QACEA,qBAAA,CAAC,GAAG,EAAA,EACF,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAC7D,IAAI,EAAC,OAAO,gBACA,CAAa,UAAA,EAAA,KAAK,CAAE,CAAA,EAAA,GAC5B,KAAK,EAAA,QAAA,EAETD,sBAAC,CAAA,IAAI,IAAC,KAAK,EAAC,QAAQ,EAAA,QAAA,EAAA,CAClBA,sBAAC,CAAA,IAAI,EAAC,EAAA,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAE,CAAC,EAAA,QAAA,EAAA,CACxB,WAAW,KACVC,qBAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,WAAW,EAAA,aAAA,EAAc,MAAM,EAAA,QAAA,EACpD,WAAW,EACP,CAAA,CACR,EACDA,qBAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAE,CAAC,EAAE,MAAM,EAAC,QAAQ,EAC3B,QAAA,EAAA,KAAK,EACD,CAAA,CAAA,EAAA,CACF,EACPA,qBAAC,CAAA,SAAS,EACR,EAAA,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,YAAY,EAAA,CAC/B,EACD,gBAAgB,EAAE,EACnBA,qBAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,MAAM,CAAC,mBAAmB,EACrC,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACC,YAAA,EAAA,CAAA,OAAA,EAAU,KAAK,CAAS,OAAA,CAAA,EAAA,QAAA,EAEpCA,qBAAC,CAAA,UAAU,EAAC,EAAA,SAAS,EAAE,MAAM,CAAC,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAI,CAAA,EAAA,CAC3D,CACD,EAAA,CAAA,EAAA,CACH,EACN;AACJ,EAAE;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
+{"version":3,"file":"filter-chip.js","sources":["../../../../v1/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 \"~/v1/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              textFieldProps={{ 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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"}

package/dist/v1/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__Xtd92","operation":"filter-chip-module_operation__Iz7zn","operationText":"filter-chip-module_operationText__K1q9g","value":"filter-chip-module_value__IFHoO","removeIconContainer":"filter-chip-module_removeIconContainer__UeW6o","removeIcon":"filter-chip-module_removeIcon__bFszf","selectValue":"filter-chip-module_selectValue__PfhJJ","leadingIcon":"filter-chip-module_leadingIcon__GIwM2","textFieldWrapper":"filter-chip-module_textFieldWrapper__nnPsW","textField":"filter-chip-module_textField__mAkGW","dateFieldWrapper":"filter-chip-module_dateFieldWrapper__9R6q3","dateField":"filter-chip-module_dateField__5bfrR"};
+var styles = {"chip":"filter-chip-module_chip__Xtd92","chip-default":"filter-chip-module_chip-default__i1Etr","operationText":"filter-chip-module_operationText__K1q9g","value":"filter-chip-module_value__IFHoO","removeIconContainer":"filter-chip-module_removeIconContainer__UeW6o","removeIcon":"filter-chip-module_removeIcon__bFszf","selectValue":"filter-chip-module_selectValue__PfhJJ","selectColumn":"filter-chip-module_selectColumn__796IA","leadingIcon":"filter-chip-module_leadingIcon__GIwM2","textFieldWrapper":"filter-chip-module_textFieldWrapper__nnPsW","textField":"filter-chip-module_textField__mAkGW","dateFieldWrapper":"filter-chip-module_dateFieldWrapper__9R6q3","dateField":"filter-chip-module_dateField__5bfrR","chip___default":"filter-chip-module_chip-default__i1Etr"};
 
 exports.default = styles;
 //# sourceMappingURL=filter-chip.module.css.cjs.map

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

@@ -1,4 +1,4 @@
-var styles = {"chip":"filter-chip-module_chip__Xtd92","operation":"filter-chip-module_operation__Iz7zn","operationText":"filter-chip-module_operationText__K1q9g","value":"filter-chip-module_value__IFHoO","removeIconContainer":"filter-chip-module_removeIconContainer__UeW6o","removeIcon":"filter-chip-module_removeIcon__bFszf","selectValue":"filter-chip-module_selectValue__PfhJJ","leadingIcon":"filter-chip-module_leadingIcon__GIwM2","textFieldWrapper":"filter-chip-module_textFieldWrapper__nnPsW","textField":"filter-chip-module_textField__mAkGW","dateFieldWrapper":"filter-chip-module_dateFieldWrapper__9R6q3","dateField":"filter-chip-module_dateField__5bfrR"};
+var styles = {"chip":"filter-chip-module_chip__Xtd92","chip-default":"filter-chip-module_chip-default__i1Etr","operationText":"filter-chip-module_operationText__K1q9g","value":"filter-chip-module_value__IFHoO","removeIconContainer":"filter-chip-module_removeIconContainer__UeW6o","removeIcon":"filter-chip-module_removeIcon__bFszf","selectValue":"filter-chip-module_selectValue__PfhJJ","selectColumn":"filter-chip-module_selectColumn__796IA","leadingIcon":"filter-chip-module_leadingIcon__GIwM2","textFieldWrapper":"filter-chip-module_textFieldWrapper__nnPsW","textField":"filter-chip-module_textField__mAkGW","dateFieldWrapper":"filter-chip-module_dateFieldWrapper__9R6q3","dateField":"filter-chip-module_dateField__5bfrR","chip___default":"filter-chip-module_chip-default__i1Etr"};
 
 export { styles as default };
 //# sourceMappingURL=filter-chip.module.css.js.map

package/dist/v1/components/spinner/spinner.cjs

@@ -26,7 +26,7 @@ const spinner = index.cva(spinner_module.default.spinner, {
     },
     defaultVariants: {
         size: 1,
-        color: "default",
+        color: "neutral",
     },
 });
 const Spinner = React.forwardRef(({ className, size, color, ...props }, ref) => (jsxRuntime.jsxRuntimeExports.jsx("div", { ref: ref, className: spinner({ size, color, className }), role: "status", "aria-hidden": "true", ...props, children: [...Array(8)].map((_, index) => (jsxRuntime.jsxRuntimeExports.jsx("div", { className: spinner_module.default.pole }, index))) })));

package/dist/v1/components/spinner/spinner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.cjs","sources":["../../../../v1/components/spinner/spinner.tsx"],"sourcesContent":["import { cva, VariantProps } from \"class-variance-authority\";\nimport { ComponentPropsWithoutRef, ElementRef, forwardRef } from \"react\";\n\nimport styles from './spinner.module.css';\n\nconst spinner = cva(styles.spinner, {\n  variants: {\n    size: {\n      1: styles[\"spinner-size-1\"],\n      2: styles[\"spinner-size-2\"],\n      3: styles[\"spinner-size-3\"],\n      4: styles[\"spinner-size-4\"],\n      5: styles[\"spinner-size-5\"],\n      6: styles[\"spinner-size-6\"],\n    },\n    color: {\n      default: styles[\"spinner-color-default\"],\n      neutral: styles[\"spinner-color-neutral\"],\n      accent: styles[\"spinner-color-accent\"],\n      danger: styles[\"spinner-color-danger\"],\n      success: styles[\"spinner-color-success\"],\n      attention: styles[\"spinner-color-attention\"],\n    }\n  },\n  defaultVariants: {\n    size: 1,\n    color: \"default\",\n  },\n});\n\nexport interface SpinnerProps\n  extends ComponentPropsWithoutRef<\"div\">,\n    VariantProps<typeof spinner> {\n  size?: 1 | 2 | 3 | 4 | 5 | 6;\n  color?: \"default\" | \"neutral\" | \"accent\" | \"danger\" | \"success\" | \"attention\";\n}\n\nexport const Spinner = forwardRef<ElementRef<\"div\">, SpinnerProps>(\n  ({ className, size, color, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={spinner({ size, color, className })}\n      role=\"status\"\n      aria-hidden=\"true\"\n      {...props}\n    >\n      {[...Array(8)].map((_, index) => (\n        <div key={index} className={styles.pole} />\n      ))}\n    </div>\n  )\n);\n\nSpinner.displayName = 'Spinner';\n"],"names":["cva","styles","forwardRef","_jsx"],"mappings":";;;;;;;AAKA,MAAM,OAAO,GAAGA,SAAG,CAACC,sBAAM,CAAC,OAAO,EAAE;AAClC,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,CAAC,EAAEA,sBAAM,CAAC,gBAAgB,CAAC;AAC3B,YAAA,CAAC,EAAEA,sBAAM,CAAC,gBAAgB,CAAC;AAC3B,YAAA,CAAC,EAAEA,sBAAM,CAAC,gBAAgB,CAAC;AAC3B,YAAA,CAAC,EAAEA,sBAAM,CAAC,gBAAgB,CAAC;AAC3B,YAAA,CAAC,EAAEA,sBAAM,CAAC,gBAAgB,CAAC;AAC3B,YAAA,CAAC,EAAEA,sBAAM,CAAC,gBAAgB,CAAC;AAC5B,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,OAAO,EAAEA,sBAAM,CAAC,uBAAuB,CAAC;AACxC,YAAA,OAAO,EAAEA,sBAAM,CAAC,uBAAuB,CAAC;AACxC,YAAA,MAAM,EAAEA,sBAAM,CAAC,sBAAsB,CAAC;AACtC,YAAA,MAAM,EAAEA,sBAAM,CAAC,sBAAsB,CAAC;AACtC,YAAA,OAAO,EAAEA,sBAAM,CAAC,uBAAuB,CAAC;AACxC,YAAA,SAAS,EAAEA,sBAAM,CAAC,yBAAyB,CAAC;AAC7C,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,CAAC;AACP,QAAA,KAAK,EAAE,SAAS;AACjB,KAAA;AACF,CAAA,CAAC,CAAC;AASU,MAAA,OAAO,GAAGC,gBAAU,CAC/B,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MACxCC,gCAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,EAC9C,IAAI,EAAC,QAAQ,EAAA,aAAA,EACD,MAAM,EAAA,GACd,KAAK,EAER,QAAA,EAAA,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,MAC1BA,gCAAiB,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEF,sBAAM,CAAC,IAAI,EAAA,EAA7B,KAAK,CAA4B,CAC5C,CAAC,EACE,CAAA,CACP,EACD;AAEF,OAAO,CAAC,WAAW,GAAG,SAAS;;;;"}
+{"version":3,"file":"spinner.cjs","sources":["../../../../v1/components/spinner/spinner.tsx"],"sourcesContent":["import { cva, VariantProps } from \"class-variance-authority\";\nimport { ComponentPropsWithoutRef, ElementRef, forwardRef } from \"react\";\n\nimport styles from './spinner.module.css';\n\nconst spinner = cva(styles.spinner, {\n  variants: {\n    size: {\n      1: styles[\"spinner-size-1\"],\n      2: styles[\"spinner-size-2\"],\n      3: styles[\"spinner-size-3\"],\n      4: styles[\"spinner-size-4\"],\n      5: styles[\"spinner-size-5\"],\n      6: styles[\"spinner-size-6\"],\n    },\n    color: {\n      default: styles[\"spinner-color-default\"],\n      neutral: styles[\"spinner-color-neutral\"],\n      accent: styles[\"spinner-color-accent\"],\n      danger: styles[\"spinner-color-danger\"],\n      success: styles[\"spinner-color-success\"],\n      attention: styles[\"spinner-color-attention\"],\n    }\n  },\n  defaultVariants: {\n    size: 1,\n    color: \"neutral\",\n  },\n});\n\nexport interface SpinnerProps\n  extends ComponentPropsWithoutRef<\"div\">,\n    VariantProps<typeof spinner> {\n  size?: 1 | 2 | 3 | 4 | 5 | 6;\n  color?: \"default\" | \"neutral\" | \"accent\" | \"danger\" | \"success\" | \"attention\";\n}\n\nexport const Spinner = forwardRef<ElementRef<\"div\">, SpinnerProps>(\n  ({ className, size, color, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={spinner({ size, color, className })}\n      role=\"status\"\n      aria-hidden=\"true\"\n      {...props}\n    >\n      {[...Array(8)].map((_, index) => (\n        <div key={index} className={styles.pole} />\n      ))}\n    </div>\n  )\n);\n\nSpinner.displayName = 'Spinner';\n"],"names":["cva","styles","forwardRef","_jsx"],"mappings":";;;;;;;AAKA,MAAM,OAAO,GAAGA,SAAG,CAACC,sBAAM,CAAC,OAAO,EAAE;AAClC,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,CAAC,EAAEA,sBAAM,CAAC,gBAAgB,CAAC;AAC3B,YAAA,CAAC,EAAEA,sBAAM,CAAC,gBAAgB,CAAC;AAC3B,YAAA,CAAC,EAAEA,sBAAM,CAAC,gBAAgB,CAAC;AAC3B,YAAA,CAAC,EAAEA,sBAAM,CAAC,gBAAgB,CAAC;AAC3B,YAAA,CAAC,EAAEA,sBAAM,CAAC,gBAAgB,CAAC;AAC3B,YAAA,CAAC,EAAEA,sBAAM,CAAC,gBAAgB,CAAC;AAC5B,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,OAAO,EAAEA,sBAAM,CAAC,uBAAuB,CAAC;AACxC,YAAA,OAAO,EAAEA,sBAAM,CAAC,uBAAuB,CAAC;AACxC,YAAA,MAAM,EAAEA,sBAAM,CAAC,sBAAsB,CAAC;AACtC,YAAA,MAAM,EAAEA,sBAAM,CAAC,sBAAsB,CAAC;AACtC,YAAA,OAAO,EAAEA,sBAAM,CAAC,uBAAuB,CAAC;AACxC,YAAA,SAAS,EAAEA,sBAAM,CAAC,yBAAyB,CAAC;AAC7C,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,CAAC;AACP,QAAA,KAAK,EAAE,SAAS;AACjB,KAAA;AACF,CAAA,CAAC,CAAC;AASU,MAAA,OAAO,GAAGC,gBAAU,CAC/B,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MACxCC,gCAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,EAC9C,IAAI,EAAC,QAAQ,EAAA,aAAA,EACD,MAAM,EAAA,GACd,KAAK,EAER,QAAA,EAAA,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,MAC1BA,gCAAiB,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEF,sBAAM,CAAC,IAAI,EAAA,EAA7B,KAAK,CAA4B,CAC5C,CAAC,EACE,CAAA,CACP,EACD;AAEF,OAAO,CAAC,WAAW,GAAG,SAAS;;;;"}

package/dist/v1/components/spinner/spinner.js

@@ -24,7 +24,7 @@ const spinner = cva(styles.spinner, {
     },
     defaultVariants: {
         size: 1,
-        color: "default",
+        color: "neutral",
     },
 });
 const Spinner = forwardRef(({ className, size, color, ...props }, ref) => (jsxRuntimeExports.jsx("div", { ref: ref, className: spinner({ size, color, className }), role: "status", "aria-hidden": "true", ...props, children: [...Array(8)].map((_, index) => (jsxRuntimeExports.jsx("div", { className: styles.pole }, index))) })));

package/dist/v1/components/spinner/spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.js","sources":["../../../../v1/components/spinner/spinner.tsx"],"sourcesContent":["import { cva, VariantProps } from \"class-variance-authority\";\nimport { ComponentPropsWithoutRef, ElementRef, forwardRef } from \"react\";\n\nimport styles from './spinner.module.css';\n\nconst spinner = cva(styles.spinner, {\n  variants: {\n    size: {\n      1: styles[\"spinner-size-1\"],\n      2: styles[\"spinner-size-2\"],\n      3: styles[\"spinner-size-3\"],\n      4: styles[\"spinner-size-4\"],\n      5: styles[\"spinner-size-5\"],\n      6: styles[\"spinner-size-6\"],\n    },\n    color: {\n      default: styles[\"spinner-color-default\"],\n      neutral: styles[\"spinner-color-neutral\"],\n      accent: styles[\"spinner-color-accent\"],\n      danger: styles[\"spinner-color-danger\"],\n      success: styles[\"spinner-color-success\"],\n      attention: styles[\"spinner-color-attention\"],\n    }\n  },\n  defaultVariants: {\n    size: 1,\n    color: \"default\",\n  },\n});\n\nexport interface SpinnerProps\n  extends ComponentPropsWithoutRef<\"div\">,\n    VariantProps<typeof spinner> {\n  size?: 1 | 2 | 3 | 4 | 5 | 6;\n  color?: \"default\" | \"neutral\" | \"accent\" | \"danger\" | \"success\" | \"attention\";\n}\n\nexport const Spinner = forwardRef<ElementRef<\"div\">, SpinnerProps>(\n  ({ className, size, color, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={spinner({ size, color, className })}\n      role=\"status\"\n      aria-hidden=\"true\"\n      {...props}\n    >\n      {[...Array(8)].map((_, index) => (\n        <div key={index} className={styles.pole} />\n      ))}\n    </div>\n  )\n);\n\nSpinner.displayName = 'Spinner';\n"],"names":["_jsx"],"mappings":";;;;;AAKA,MAAM,OAAO,GAAG,GAAG,CAAC,MAAM,CAAC,OAAO,EAAE;AAClC,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,CAAC,EAAE,MAAM,CAAC,gBAAgB,CAAC;AAC3B,YAAA,CAAC,EAAE,MAAM,CAAC,gBAAgB,CAAC;AAC3B,YAAA,CAAC,EAAE,MAAM,CAAC,gBAAgB,CAAC;AAC3B,YAAA,CAAC,EAAE,MAAM,CAAC,gBAAgB,CAAC;AAC3B,YAAA,CAAC,EAAE,MAAM,CAAC,gBAAgB,CAAC;AAC3B,YAAA,CAAC,EAAE,MAAM,CAAC,gBAAgB,CAAC;AAC5B,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,OAAO,EAAE,MAAM,CAAC,uBAAuB,CAAC;AACxC,YAAA,OAAO,EAAE,MAAM,CAAC,uBAAuB,CAAC;AACxC,YAAA,MAAM,EAAE,MAAM,CAAC,sBAAsB,CAAC;AACtC,YAAA,MAAM,EAAE,MAAM,CAAC,sBAAsB,CAAC;AACtC,YAAA,OAAO,EAAE,MAAM,CAAC,uBAAuB,CAAC;AACxC,YAAA,SAAS,EAAE,MAAM,CAAC,yBAAyB,CAAC;AAC7C,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,CAAC;AACP,QAAA,KAAK,EAAE,SAAS;AACjB,KAAA;AACF,CAAA,CAAC,CAAC;AASU,MAAA,OAAO,GAAG,UAAU,CAC/B,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MACxCA,qBAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,EAC9C,IAAI,EAAC,QAAQ,EAAA,aAAA,EACD,MAAM,EAAA,GACd,KAAK,EAER,QAAA,EAAA,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,MAC1BA,qBAAiB,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,IAAI,EAAA,EAA7B,KAAK,CAA4B,CAC5C,CAAC,EACE,CAAA,CACP,EACD;AAEF,OAAO,CAAC,WAAW,GAAG,SAAS;;;;"}
+{"version":3,"file":"spinner.js","sources":["../../../../v1/components/spinner/spinner.tsx"],"sourcesContent":["import { cva, VariantProps } from \"class-variance-authority\";\nimport { ComponentPropsWithoutRef, ElementRef, forwardRef } from \"react\";\n\nimport styles from './spinner.module.css';\n\nconst spinner = cva(styles.spinner, {\n  variants: {\n    size: {\n      1: styles[\"spinner-size-1\"],\n      2: styles[\"spinner-size-2\"],\n      3: styles[\"spinner-size-3\"],\n      4: styles[\"spinner-size-4\"],\n      5: styles[\"spinner-size-5\"],\n      6: styles[\"spinner-size-6\"],\n    },\n    color: {\n      default: styles[\"spinner-color-default\"],\n      neutral: styles[\"spinner-color-neutral\"],\n      accent: styles[\"spinner-color-accent\"],\n      danger: styles[\"spinner-color-danger\"],\n      success: styles[\"spinner-color-success\"],\n      attention: styles[\"spinner-color-attention\"],\n    }\n  },\n  defaultVariants: {\n    size: 1,\n    color: \"neutral\",\n  },\n});\n\nexport interface SpinnerProps\n  extends ComponentPropsWithoutRef<\"div\">,\n    VariantProps<typeof spinner> {\n  size?: 1 | 2 | 3 | 4 | 5 | 6;\n  color?: \"default\" | \"neutral\" | \"accent\" | \"danger\" | \"success\" | \"attention\";\n}\n\nexport const Spinner = forwardRef<ElementRef<\"div\">, SpinnerProps>(\n  ({ className, size, color, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={spinner({ size, color, className })}\n      role=\"status\"\n      aria-hidden=\"true\"\n      {...props}\n    >\n      {[...Array(8)].map((_, index) => (\n        <div key={index} className={styles.pole} />\n      ))}\n    </div>\n  )\n);\n\nSpinner.displayName = 'Spinner';\n"],"names":["_jsx"],"mappings":";;;;;AAKA,MAAM,OAAO,GAAG,GAAG,CAAC,MAAM,CAAC,OAAO,EAAE;AAClC,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,CAAC,EAAE,MAAM,CAAC,gBAAgB,CAAC;AAC3B,YAAA,CAAC,EAAE,MAAM,CAAC,gBAAgB,CAAC;AAC3B,YAAA,CAAC,EAAE,MAAM,CAAC,gBAAgB,CAAC;AAC3B,YAAA,CAAC,EAAE,MAAM,CAAC,gBAAgB,CAAC;AAC3B,YAAA,CAAC,EAAE,MAAM,CAAC,gBAAgB,CAAC;AAC3B,YAAA,CAAC,EAAE,MAAM,CAAC,gBAAgB,CAAC;AAC5B,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,OAAO,EAAE,MAAM,CAAC,uBAAuB,CAAC;AACxC,YAAA,OAAO,EAAE,MAAM,CAAC,uBAAuB,CAAC;AACxC,YAAA,MAAM,EAAE,MAAM,CAAC,sBAAsB,CAAC;AACtC,YAAA,MAAM,EAAE,MAAM,CAAC,sBAAsB,CAAC;AACtC,YAAA,OAAO,EAAE,MAAM,CAAC,uBAAuB,CAAC;AACxC,YAAA,SAAS,EAAE,MAAM,CAAC,yBAAyB,CAAC;AAC7C,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,CAAC;AACP,QAAA,KAAK,EAAE,SAAS;AACjB,KAAA;AACF,CAAA,CAAC,CAAC;AASU,MAAA,OAAO,GAAG,UAAU,CAC/B,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MACxCA,qBAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,EAC9C,IAAI,EAAC,QAAQ,EAAA,aAAA,EACD,MAAM,EAAA,GACd,KAAK,EAER,QAAA,EAAA,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,MAC1BA,qBAAiB,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,IAAI,EAAA,EAA7B,KAAK,CAA4B,CAC5C,CAAC,EACE,CAAA,CACP,EACD;AAEF,OAAO,CAAC,WAAW,GAAG,SAAS;;;;"}