@raystack/apsara 0.31.1 → 0.33.0

package/dist/v1/components/dialog/dialog.module.css.cjs

@@ -0,0 +1,8 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {"dialogOverlay":"dialog-module_dialogOverlay__gtTvA","dialogContent":"dialog-module_dialogContent__DvkhU","close":"dialog-module_close__g-6GW","overlayBlur":"dialog-module_overlayBlur__5363s","fadeIn":"dialog-module_fadeIn__Yyp5s","fadeOut":"dialog-module_fadeOut__H7gVW","overlay":"dialog-module_overlay__sppBT"};
+
+exports.default = styles;
+//# sourceMappingURL=dialog.module.css.cjs.map

package/dist/v1/components/dialog/dialog.module.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/v1/components/dialog/dialog.module.css.js

@@ -0,0 +1,4 @@
+var styles = {"dialogOverlay":"dialog-module_dialogOverlay__gtTvA","dialogContent":"dialog-module_dialogContent__DvkhU","close":"dialog-module_close__g-6GW","overlayBlur":"dialog-module_overlayBlur__5363s","fadeIn":"dialog-module_fadeIn__Yyp5s","fadeOut":"dialog-module_fadeOut__H7gVW","overlay":"dialog-module_overlay__sppBT"};
+
+export { styles as default };
+//# sourceMappingURL=dialog.module.css.js.map

package/dist/v1/components/dialog/dialog.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/v1/components/dialog/index.d.ts

@@ -0,0 +1,2 @@
+export { Dialog } from "./dialog";
+//# sourceMappingURL=index.d.ts.map

package/dist/v1/components/dialog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../v1/components/dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}

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

@@ -12,22 +12,33 @@ require('../../node_modules/.pnpm/react-day-picker@9.0.4_react@18.2.0/node_modul
 require('../../node_modules/.pnpm/react-day-picker@9.0.4_react@18.2.0/node_modules/react-day-picker/dist/esm/useDayPicker.cjs');
 require('../tooltip/tooltip.cjs');
 var datePicker = require('../calendar/date-picker.cjs');
-var rangePicker = require('../calendar/range-picker.cjs');
+require('../../node_modules/.pnpm/dayjs@1.11.11/node_modules/dayjs/dayjs.min.cjs');
+require('../popover/popover.cjs');
 var filterChip_module = require('./filter-chip.module.css.cjs');
+var filters = require('../../types/filters.cjs');
 
-const FilterChip = ({ label, value, onRemove = () => null, className, ref, columnType = 'text', options = [], onValueChange, onOperationChange, leadingIcon, ...props }) => {
-    const [operation, setOperation] = React.useState('is');
-    const [filterValue, setFilterValue] = React.useState(value || '');
-    const operationOptions = [
-        { label: 'is', value: 'is' },
-        { label: 'is not', value: 'is not' },
-        { label: 'contains', value: 'contains' },
-    ];
+const Operation = ({ label, columnType = filters.FilterType.text, onOperationSelect, }) => {
+    const filterOptions = filters.filterOperators[columnType] || [];
+    // FilterOperatorTypes gives error as Select returns string
+    const [value, setValue] = React.useState(filterOptions?.[0]?.value);
     React.useEffect(() => {
-        if (onOperationChange) {
-            onOperationChange(operation);
+        const selectedOption = filterOptions.find((o) => o.value === value);
+        if (selectedOption) {
+            onOperationSelect(selectedOption);
         }
-    }, [operation]);
+    }, [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.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 = "text", options = [], onValueChange, onOperationChange, leadingIcon, ...props }) => {
+    const [operation, setOperation] = React.useState();
+    const [filterValue, setFilterValue] = React.useState(value || "");
+    React.useEffect(() => {
+        if (onOperationChange && operation?.value) {
+            onOperationChange(operation?.value);
+        }
+    }, [operation?.value]);
     React.useEffect(() => {
         if (onValueChange) {
             onValueChange(filterValue);
@@ -35,17 +46,15 @@ const FilterChip = ({ label, value, onRemove = () => null, className, ref, colum
     }, [filterValue]);
     const renderValueInput = () => {
         switch (columnType) {
-            case 'select':
-                return (jsxRuntime.jsxRuntimeExports.jsxs(select.Select, { value: filterValue, onValueChange: setFilterValue, children: [jsxRuntime.jsxRuntimeExports.jsx(select.Select.Trigger, { variant: "filter", children: jsxRuntime.jsxRuntimeExports.jsx("div", { 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, children: opt.label }, opt.value))) })] }));
-            case 'date':
-                return (jsxRuntime.jsxRuntimeExports.jsx("div", { className: filterChip_module.default.dateFieldWrapper, children: jsxRuntime.jsxRuntimeExports.jsx(datePicker.DatePicker, { onSelect: (date) => setFilterValue(date), showCalendarIcon: false, textFieldProps: { className: filterChip_module.default.dateField } }) }));
-            case 'range':
-                return (jsxRuntime.jsxRuntimeExports.jsx("div", { className: filterChip_module.default.dateFieldWrapper, children: jsxRuntime.jsxRuntimeExports.jsx(rangePicker.RangePicker, { textFieldProps: { className: filterChip_module.default.dateField }, onSelect: (range) => setFilterValue(range), showCalendarIcon: false, value: filterValue }) }));
+            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()))) })] }));
+            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 } }) }));
             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(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", style: { gap: 'var(--rs-space-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.jsxs(select.Select, { defaultValue: operation, onValueChange: setOperation, "aria-labelledby": `${label}-label`, children: [jsxRuntime.jsxRuntimeExports.jsx(select.Select.Trigger, { className: filterChip_module.default.operation, variant: "filter", "aria-label": `${label} filter operation`, children: jsxRuntime.jsxRuntimeExports.jsx("span", { className: filterChip_module.default.operationText, children: operation }) }), jsxRuntime.jsxRuntimeExports.jsx(select.Select.Content, { "data-variant": "filter", children: operationOptions.map((opt) => (jsxRuntime.jsxRuntimeExports.jsx(select.Select.Item, { value: opt.value, "aria-label": `Filter ${label} ${opt.label}`, children: opt.label }, opt.value))) })] }), 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: [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 }) })] }) }));
 };
 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 { ReactNode, useEffect, useState, ReactElement } from \"react\";\nimport { Box } from \"../box\";\nimport { Flex } from \"../flex\";\nimport { Select } from \"../select\";\nimport { Text } from \"../text\";\nimport { TextField } from \"../textfield\";\nimport { DatePicker, RangePicker } from \"../calendar\";\nimport styles from \"./filter-chip.module.css\";\n\ntype FilterVariant = 'select' | 'text' | 'date' | 'range' | 'number';\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?: FilterVariant;\n  options?: Array<{ label: string; value: string }>;\n  onValueChange?: (value: any) => void;\n  onOperationChange?: (operation: string) => void;\n  leadingIcon?: ReactElement;\n}\n\nexport const FilterChip = ({\n  label,\n  value,\n  onRemove = () => null,\n  className,\n  ref,\n  columnType = 'text',\n  options = [],\n  onValueChange,\n  onOperationChange,\n  leadingIcon,\n  ...props\n}: FilterChipProps) => {\n  const [operation, setOperation] = useState('is');\n  const [filterValue, setFilterValue] = useState<any>(value || '');\n\n  const operationOptions = [\n    { label: 'is', value: 'is' },\n    { label: 'is not', value: 'is not' },\n    { label: 'contains', value: 'contains' },\n  ];\n\n  useEffect(() => {\n    if (onOperationChange) {\n      onOperationChange(operation);\n    }\n  }, [operation]);\n\n  useEffect(() => {\n    if (onValueChange) {\n      onValueChange(filterValue);\n    }\n  }, [filterValue]);\n\n  const renderValueInput = () => {\n    switch (columnType) {\n      case 'select':\n        return (\n          <Select\n            value={filterValue}\n            onValueChange={setFilterValue}\n          >\n            <Select.Trigger variant=\"filter\">\n              <div className={styles.selectValue}>\n                <Select.Value placeholder=\"Select value\" />\n              </div>\n            </Select.Trigger>\n            <Select.Content data-variant=\"filter\">\n              {options.map((opt) => (\n                <Select.Item key={opt.value} value={opt.value}>\n                  {opt.label}\n                </Select.Item>\n              ))}\n            </Select.Content>\n          </Select>\n        );\n      case 'date':\n        return (\n          <div className={styles.dateFieldWrapper}>\n            <DatePicker \n              onSelect={(date) => setFilterValue(date)}\n              showCalendarIcon={false}\n              textFieldProps={{ className: styles.dateField }}\n            />\n          </div>\n        );\n      case 'range':\n        return (\n          <div className={styles.dateFieldWrapper}>\n            <RangePicker\n              textFieldProps={{ className: styles.dateField }}\n              onSelect={(range) => setFilterValue(range)}\n              showCalendarIcon={false}\n              value={filterValue}\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\" style={{ gap: 'var(--rs-space-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        <Select defaultValue={operation} onValueChange={setOperation} aria-labelledby={`${label}-label`}>\n          <Select.Trigger className={styles.operation} variant=\"filter\" aria-label={`${label} filter operation`}>\n            <span className={styles.operationText}>{operation}</span>\n          </Select.Trigger>\n          <Select.Content data-variant=\"filter\">\n            {operationOptions.map((opt) => (\n              <Select.Item key={opt.value} value={opt.value} aria-label={`Filter ${label} ${opt.label}`}>\n                {opt.label}\n              </Select.Item>\n            ))}\n          </Select.Content>\n        </Select>\n        {renderValueInput()}\n          <div className={styles.removeIconContainer} \n            role=\"button\"\n            tabIndex={0}\n            aria-label={`Remove ${label} filter`}\n          >\n            <Cross1Icon \n              className={styles.removeIcon}\n              onClick={onRemove}\n            />\n          </div>\n      </Flex>\n    </Box>\n  );\n};\n\nFilterChip.displayName = \"FilterChip\";\n"],"names":["useState","useEffect","_jsxs","Select","_jsx","styles","DatePicker","RangePicker","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 { ReactNode, useEffect, useState, ReactElement } from \"react\";\nimport { Box } from \"../box\";\nimport { Flex } from \"../flex\";\nimport { Select } from \"../select\";\nimport { Text } from \"../text\";\nimport { TextField } from \"../textfield\";\nimport { DatePicker } from \"../calendar\";\nimport styles from \"./filter-chip.module.css\";\nimport {\n  FilterSelectOption,\n  FilterOperation,\n  FilterType,\n  FilterTypes,\n  filterOperators,\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.text,\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 = \"text\",\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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"}

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

@@ -1,5 +1,5 @@
 import { ReactNode, ReactElement } from "react";
-type FilterVariant = 'select' | 'text' | 'date' | 'range' | 'number';
+import { FilterSelectOption, FilterTypes } from "~/v1/types/filters";
 export interface FilterChipProps {
     label: string;
     value?: string;
@@ -7,11 +7,8 @@ export interface FilterChipProps {
     className?: string;
     ref?: React.RefObject<HTMLDivElement>;
     children?: ReactNode;
-    columnType?: FilterVariant;
-    options?: Array<{
-        label: string;
-        value: string;
-    }>;
+    columnType?: FilterTypes;
+    options?: FilterSelectOption[];
     onValueChange?: (value: any) => void;
     onOperationChange?: (operation: string) => void;
     leadingIcon?: ReactElement;
@@ -20,5 +17,4 @@ export declare const FilterChip: {
     ({ label, value, onRemove, className, ref, columnType, options, onValueChange, onOperationChange, leadingIcon, ...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,SAAS,EAAuB,YAAY,EAAE,MAAM,OAAO,CAAC;AASrE,KAAK,aAAa,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAErE,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,aAAa,CAAC;IAC3B,OAAO,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClD,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;AAED,eAAO,MAAM,UAAU;+HAYpB,eAAe;;CA2HjB,CAAC"}
+{"version":3,"file":"filter-chip.d.ts","sourceRoot":"","sources":["../../../../v1/components/filter-chip/filter-chip.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAuB,YAAY,EAAE,MAAM,OAAO,CAAC;AAQrE,OAAO,EACL,kBAAkB,EAGlB,WAAW,EAEZ,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"}

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

@@ -10,22 +10,33 @@ import '../../node_modules/.pnpm/react-day-picker@9.0.4_react@18.2.0/node_module
 import '../../node_modules/.pnpm/react-day-picker@9.0.4_react@18.2.0/node_modules/react-day-picker/dist/esm/useDayPicker.js';
 import '../tooltip/tooltip.js';
 import { DatePicker } from '../calendar/date-picker.js';
-import { RangePicker } from '../calendar/range-picker.js';
+import '../../node_modules/.pnpm/dayjs@1.11.11/node_modules/dayjs/dayjs.min.js';
+import '../popover/popover.js';
 import styles from './filter-chip.module.css.js';
+import { FilterType, filterOperators } from '../../types/filters.js';
 
-const FilterChip = ({ label, value, onRemove = () => null, className, ref, columnType = 'text', options = [], onValueChange, onOperationChange, leadingIcon, ...props }) => {
-    const [operation, setOperation] = useState('is');
-    const [filterValue, setFilterValue] = useState(value || '');
-    const operationOptions = [
-        { label: 'is', value: 'is' },
-        { label: 'is not', value: 'is not' },
-        { label: 'contains', value: 'contains' },
-    ];
+const Operation = ({ label, columnType = FilterType.text, onOperationSelect, }) => {
+    const filterOptions = filterOperators[columnType] || [];
+    // FilterOperatorTypes gives error as Select returns string
+    const [value, setValue] = useState(filterOptions?.[0]?.value);
     useEffect(() => {
-        if (onOperationChange) {
-            onOperationChange(operation);
+        const selectedOption = filterOptions.find((o) => o.value === value);
+        if (selectedOption) {
+            onOperationSelect(selectedOption);
         }
-    }, [operation]);
+    }, [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.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 = "text", options = [], onValueChange, onOperationChange, leadingIcon, ...props }) => {
+    const [operation, setOperation] = useState();
+    const [filterValue, setFilterValue] = useState(value || "");
+    useEffect(() => {
+        if (onOperationChange && operation?.value) {
+            onOperationChange(operation?.value);
+        }
+    }, [operation?.value]);
     useEffect(() => {
         if (onValueChange) {
             onValueChange(filterValue);
@@ -33,17 +44,15 @@ const FilterChip = ({ label, value, onRemove = () => null, className, ref, colum
     }, [filterValue]);
     const renderValueInput = () => {
         switch (columnType) {
-            case 'select':
-                return (jsxRuntimeExports.jsxs(Select, { value: filterValue, onValueChange: setFilterValue, children: [jsxRuntimeExports.jsx(Select.Trigger, { variant: "filter", children: jsxRuntimeExports.jsx("div", { 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, children: opt.label }, opt.value))) })] }));
-            case 'date':
-                return (jsxRuntimeExports.jsx("div", { className: styles.dateFieldWrapper, children: jsxRuntimeExports.jsx(DatePicker, { onSelect: (date) => setFilterValue(date), showCalendarIcon: false, textFieldProps: { className: styles.dateField } }) }));
-            case 'range':
-                return (jsxRuntimeExports.jsx("div", { className: styles.dateFieldWrapper, children: jsxRuntimeExports.jsx(RangePicker, { textFieldProps: { className: styles.dateField }, onSelect: (range) => setFilterValue(range), showCalendarIcon: false, value: filterValue }) }));
+            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()))) })] }));
+            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 } }) }));
             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(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", style: { gap: 'var(--rs-space-2)' }, children: [leadingIcon && (jsxRuntimeExports.jsx("span", { className: styles.leadingIcon, "aria-hidden": "true", children: leadingIcon })), jsxRuntimeExports.jsx(Text, { size: 2, weight: "normal", children: label })] }), jsxRuntimeExports.jsxs(Select, { defaultValue: operation, onValueChange: setOperation, "aria-labelledby": `${label}-label`, children: [jsxRuntimeExports.jsx(Select.Trigger, { className: styles.operation, variant: "filter", "aria-label": `${label} filter operation`, children: jsxRuntimeExports.jsx("span", { className: styles.operationText, children: operation }) }), jsxRuntimeExports.jsx(Select.Content, { "data-variant": "filter", children: operationOptions.map((opt) => (jsxRuntimeExports.jsx(Select.Item, { value: opt.value, "aria-label": `Filter ${label} ${opt.label}`, children: opt.label }, opt.value))) })] }), 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: [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 }) })] }) }));
 };
 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 { ReactNode, useEffect, useState, ReactElement } from \"react\";\nimport { Box } from \"../box\";\nimport { Flex } from \"../flex\";\nimport { Select } from \"../select\";\nimport { Text } from \"../text\";\nimport { TextField } from \"../textfield\";\nimport { DatePicker, RangePicker } from \"../calendar\";\nimport styles from \"./filter-chip.module.css\";\n\ntype FilterVariant = 'select' | 'text' | 'date' | 'range' | 'number';\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?: FilterVariant;\n  options?: Array<{ label: string; value: string }>;\n  onValueChange?: (value: any) => void;\n  onOperationChange?: (operation: string) => void;\n  leadingIcon?: ReactElement;\n}\n\nexport const FilterChip = ({\n  label,\n  value,\n  onRemove = () => null,\n  className,\n  ref,\n  columnType = 'text',\n  options = [],\n  onValueChange,\n  onOperationChange,\n  leadingIcon,\n  ...props\n}: FilterChipProps) => {\n  const [operation, setOperation] = useState('is');\n  const [filterValue, setFilterValue] = useState<any>(value || '');\n\n  const operationOptions = [\n    { label: 'is', value: 'is' },\n    { label: 'is not', value: 'is not' },\n    { label: 'contains', value: 'contains' },\n  ];\n\n  useEffect(() => {\n    if (onOperationChange) {\n      onOperationChange(operation);\n    }\n  }, [operation]);\n\n  useEffect(() => {\n    if (onValueChange) {\n      onValueChange(filterValue);\n    }\n  }, [filterValue]);\n\n  const renderValueInput = () => {\n    switch (columnType) {\n      case 'select':\n        return (\n          <Select\n            value={filterValue}\n            onValueChange={setFilterValue}\n          >\n            <Select.Trigger variant=\"filter\">\n              <div className={styles.selectValue}>\n                <Select.Value placeholder=\"Select value\" />\n              </div>\n            </Select.Trigger>\n            <Select.Content data-variant=\"filter\">\n              {options.map((opt) => (\n                <Select.Item key={opt.value} value={opt.value}>\n                  {opt.label}\n                </Select.Item>\n              ))}\n            </Select.Content>\n          </Select>\n        );\n      case 'date':\n        return (\n          <div className={styles.dateFieldWrapper}>\n            <DatePicker \n              onSelect={(date) => setFilterValue(date)}\n              showCalendarIcon={false}\n              textFieldProps={{ className: styles.dateField }}\n            />\n          </div>\n        );\n      case 'range':\n        return (\n          <div className={styles.dateFieldWrapper}>\n            <RangePicker\n              textFieldProps={{ className: styles.dateField }}\n              onSelect={(range) => setFilterValue(range)}\n              showCalendarIcon={false}\n              value={filterValue}\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\" style={{ gap: 'var(--rs-space-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        <Select defaultValue={operation} onValueChange={setOperation} aria-labelledby={`${label}-label`}>\n          <Select.Trigger className={styles.operation} variant=\"filter\" aria-label={`${label} filter operation`}>\n            <span className={styles.operationText}>{operation}</span>\n          </Select.Trigger>\n          <Select.Content data-variant=\"filter\">\n            {operationOptions.map((opt) => (\n              <Select.Item key={opt.value} value={opt.value} aria-label={`Filter ${label} ${opt.label}`}>\n                {opt.label}\n              </Select.Item>\n            ))}\n          </Select.Content>\n        </Select>\n        {renderValueInput()}\n          <div className={styles.removeIconContainer} \n            role=\"button\"\n            tabIndex={0}\n            aria-label={`Remove ${label} filter`}\n          >\n            <Cross1Icon \n              className={styles.removeIcon}\n              onClick={onRemove}\n            />\n          </div>\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":["../../../../v1/components/filter-chip/filter-chip.tsx"],"sourcesContent":["import { Cross1Icon } from \"@radix-ui/react-icons\";\nimport { ReactNode, useEffect, useState, ReactElement } from \"react\";\nimport { Box } from \"../box\";\nimport { Flex } from \"../flex\";\nimport { Select } from \"../select\";\nimport { Text } from \"../text\";\nimport { TextField } from \"../textfield\";\nimport { DatePicker } from \"../calendar\";\nimport styles from \"./filter-chip.module.css\";\nimport {\n  FilterSelectOption,\n  FilterOperation,\n  FilterType,\n  FilterTypes,\n  filterOperators,\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.text,\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 = \"text\",\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":"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"}

package/dist/v1/components/flex/flex.cjs

@@ -32,6 +32,15 @@ const flex = index.cva(flex_module.default.flex, {
             wrapReverse: flex_module.default["wrap-wrapReverse"],
         },
         gap: {
+            1: flex_module.default["gap-1"],
+            2: flex_module.default["gap-2"],
+            3: flex_module.default["gap-3"],
+            4: flex_module.default["gap-4"],
+            5: flex_module.default["gap-5"],
+            6: flex_module.default["gap-6"],
+            7: flex_module.default["gap-7"],
+            8: flex_module.default["gap-8"],
+            9: flex_module.default["gap-9"],
             "extra-small": flex_module.default["gap-xs"],
             small: flex_module.default["gap-sm"],
             medium: flex_module.default["gap-md"],

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

@@ -1 +1 @@
-{"version":3,"file":"flex.cjs","sources":["../../../../v1/components/flex/flex.tsx"],"sourcesContent":["import { cva, VariantProps } from \"class-variance-authority\";\nimport { forwardRef, HTMLAttributes, PropsWithChildren } from \"react\";\n\nimport styles from \"./flex.module.css\";\n\nconst flex = cva(styles.flex, {\n  variants: {\n    direction: {\n      row: styles[\"direction-row\"],\n      column: styles[\"direction-column\"],\n      rowReverse: styles[\"direction-rowReverse\"],\n      columnReverse: styles[\"direction-columnReverse\"],\n    },\n    align: {\n      start: styles[\"align-start\"],\n      center: styles[\"align-center\"],\n      end: styles[\"align-end\"],\n      stretch: styles[\"align-stretch\"],\n      baseline: styles[\"align-baseline\"],\n    },\n    justify: {\n      start: styles[\"justify-start\"],\n      center: styles[\"justify-center\"],\n      end: styles[\"justify-end\"],\n      between: styles[\"justify-between\"],\n    },\n    wrap: {\n      noWrap: styles[\"wrap-noWrap\"],\n      wrap: styles[\"wrap-wrap\"],\n      wrapReverse: styles[\"wrap-wrapReverse\"],\n    },\n    gap: {\n      \"extra-small\": styles[\"gap-xs\"],\n      small: styles[\"gap-sm\"],\n      medium: styles[\"gap-md\"],\n      large: styles[\"gap-lg\"],\n      \"extra-large\": styles[\"gap-xl\"],\n    },\n  },\n  defaultVariants: {\n    direction: \"row\",\n    align: \"stretch\",\n    justify: \"start\",\n    wrap: \"noWrap\",\n  },\n});\n\ntype BoxProps = PropsWithChildren<VariantProps<typeof flex>> &\n  HTMLAttributes<HTMLDivElement>;\n\nexport const Flex = forwardRef<HTMLDivElement, BoxProps>(\n  (\n    { children, direction, align, justify, wrap, gap, className, ...props },\n    ref\n  ) => {\n    return (\n      <div\n        className={flex({ direction, align, justify, wrap, gap, className })}\n        {...props}\n        ref={ref}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["cva","styles","forwardRef","_jsx"],"mappings":";;;;;;;AAKA,MAAM,IAAI,GAAGA,SAAG,CAACC,mBAAM,CAAC,IAAI,EAAE;AAC5B,IAAA,QAAQ,EAAE;AACR,QAAA,SAAS,EAAE;AACT,YAAA,GAAG,EAAEA,mBAAM,CAAC,eAAe,CAAC;AAC5B,YAAA,MAAM,EAAEA,mBAAM,CAAC,kBAAkB,CAAC;AAClC,YAAA,UAAU,EAAEA,mBAAM,CAAC,sBAAsB,CAAC;AAC1C,YAAA,aAAa,EAAEA,mBAAM,CAAC,yBAAyB,CAAC;AACjD,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,KAAK,EAAEA,mBAAM,CAAC,aAAa,CAAC;AAC5B,YAAA,MAAM,EAAEA,mBAAM,CAAC,cAAc,CAAC;AAC9B,YAAA,GAAG,EAAEA,mBAAM,CAAC,WAAW,CAAC;AACxB,YAAA,OAAO,EAAEA,mBAAM,CAAC,eAAe,CAAC;AAChC,YAAA,QAAQ,EAAEA,mBAAM,CAAC,gBAAgB,CAAC;AACnC,SAAA;AACD,QAAA,OAAO,EAAE;AACP,YAAA,KAAK,EAAEA,mBAAM,CAAC,eAAe,CAAC;AAC9B,YAAA,MAAM,EAAEA,mBAAM,CAAC,gBAAgB,CAAC;AAChC,YAAA,GAAG,EAAEA,mBAAM,CAAC,aAAa,CAAC;AAC1B,YAAA,OAAO,EAAEA,mBAAM,CAAC,iBAAiB,CAAC;AACnC,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,MAAM,EAAEA,mBAAM,CAAC,aAAa,CAAC;AAC7B,YAAA,IAAI,EAAEA,mBAAM,CAAC,WAAW,CAAC;AACzB,YAAA,WAAW,EAAEA,mBAAM,CAAC,kBAAkB,CAAC;AACxC,SAAA;AACD,QAAA,GAAG,EAAE;AACH,YAAA,aAAa,EAAEA,mBAAM,CAAC,QAAQ,CAAC;AAC/B,YAAA,KAAK,EAAEA,mBAAM,CAAC,QAAQ,CAAC;AACvB,YAAA,MAAM,EAAEA,mBAAM,CAAC,QAAQ,CAAC;AACxB,YAAA,KAAK,EAAEA,mBAAM,CAAC,QAAQ,CAAC;AACvB,YAAA,aAAa,EAAEA,mBAAM,CAAC,QAAQ,CAAC;AAChC,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,SAAS,EAAE,KAAK;AAChB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,OAAO,EAAE,OAAO;AAChB,QAAA,IAAI,EAAE,QAAQ;AACf,KAAA;AACF,CAAA,CAAC,CAAC;AAKI,MAAM,IAAI,GAAGC,gBAAU,CAC5B,CACE,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACvE,GAAG,KACD;AACF,IAAA,QACEC,gCAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,IAAI,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,EAAA,GAChE,KAAK,EACT,GAAG,EAAE,GAAG,EAAA,QAAA,EAEP,QAAQ,EAAA,CACL,EACN;AACJ,CAAC;;;;"}
+{"version":3,"file":"flex.cjs","sources":["../../../../v1/components/flex/flex.tsx"],"sourcesContent":["import { cva, VariantProps } from \"class-variance-authority\";\nimport { forwardRef, HTMLAttributes, PropsWithChildren } from \"react\";\n\nimport styles from \"./flex.module.css\";\n\nconst flex = cva(styles.flex, {\n  variants: {\n    direction: {\n      row: styles[\"direction-row\"],\n      column: styles[\"direction-column\"],\n      rowReverse: styles[\"direction-rowReverse\"],\n      columnReverse: styles[\"direction-columnReverse\"],\n    },\n    align: {\n      start: styles[\"align-start\"],\n      center: styles[\"align-center\"],\n      end: styles[\"align-end\"],\n      stretch: styles[\"align-stretch\"],\n      baseline: styles[\"align-baseline\"],\n    },\n    justify: {\n      start: styles[\"justify-start\"],\n      center: styles[\"justify-center\"],\n      end: styles[\"justify-end\"],\n      between: styles[\"justify-between\"],\n    },\n    wrap: {\n      noWrap: styles[\"wrap-noWrap\"],\n      wrap: styles[\"wrap-wrap\"],\n      wrapReverse: styles[\"wrap-wrapReverse\"],\n    },\n    gap: {\n      1: styles[\"gap-1\"],\n      2: styles[\"gap-2\"],\n      3: styles[\"gap-3\"],\n      4: styles[\"gap-4\"],\n      5: styles[\"gap-5\"],\n      6: styles[\"gap-6\"],\n      7: styles[\"gap-7\"],\n      8: styles[\"gap-8\"],\n      9: styles[\"gap-9\"],\n      \"extra-small\": styles[\"gap-xs\"],\n      small: styles[\"gap-sm\"],\n      medium: styles[\"gap-md\"],\n      large: styles[\"gap-lg\"],\n      \"extra-large\": styles[\"gap-xl\"],\n    },\n  },\n  defaultVariants: {\n    direction: \"row\",\n    align: \"stretch\",\n    justify: \"start\",\n    wrap: \"noWrap\",\n  },\n});\n\ntype BoxProps = PropsWithChildren<VariantProps<typeof flex>> &\n  HTMLAttributes<HTMLDivElement>;\n\nexport const Flex = forwardRef<HTMLDivElement, BoxProps>(\n  (\n    { children, direction, align, justify, wrap, gap, className, ...props },\n    ref\n  ) => {\n    return (\n      <div\n        className={flex({ direction, align, justify, wrap, gap, className })}\n        {...props}\n        ref={ref}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["cva","styles","forwardRef","_jsx"],"mappings":"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"}

package/dist/v1/components/flex/flex.d.ts

@@ -5,7 +5,7 @@ export declare const Flex: import("react").ForwardRefExoticComponent<VariantProp
     align?: "start" | "center" | "end" | "stretch" | "baseline" | null | undefined;
     justify?: "start" | "center" | "end" | "between" | null | undefined;
     wrap?: "wrap" | "noWrap" | "wrapReverse" | null | undefined;
-    gap?: "extra-small" | "small" | "medium" | "large" | "extra-large" | null | undefined;
+    gap?: "extra-small" | "small" | "medium" | "large" | "extra-large" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string> & {
     children?: import("react").ReactNode;
 } & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/v1/components/flex/flex.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"flex.d.ts","sourceRoot":"","sources":["../../../../v1/components/flex/flex.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAc,cAAc,EAAqB,MAAM,OAAO,CAAC;AAiDtE,eAAO,MAAM,IAAI;;;;;;;;mFAehB,CAAC"}
+{"version":3,"file":"flex.d.ts","sourceRoot":"","sources":["../../../../v1/components/flex/flex.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAc,cAAc,EAAqB,MAAM,OAAO,CAAC;AA0DtE,eAAO,MAAM,IAAI;;;;;;;;mFAehB,CAAC"}

package/dist/v1/components/flex/flex.js

@@ -30,6 +30,15 @@ const flex = cva(styles.flex, {
             wrapReverse: styles["wrap-wrapReverse"],
         },
         gap: {
+            1: styles["gap-1"],
+            2: styles["gap-2"],
+            3: styles["gap-3"],
+            4: styles["gap-4"],
+            5: styles["gap-5"],
+            6: styles["gap-6"],
+            7: styles["gap-7"],
+            8: styles["gap-8"],
+            9: styles["gap-9"],
             "extra-small": styles["gap-xs"],
             small: styles["gap-sm"],
             medium: styles["gap-md"],

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

@@ -1 +1 @@
-{"version":3,"file":"flex.js","sources":["../../../../v1/components/flex/flex.tsx"],"sourcesContent":["import { cva, VariantProps } from \"class-variance-authority\";\nimport { forwardRef, HTMLAttributes, PropsWithChildren } from \"react\";\n\nimport styles from \"./flex.module.css\";\n\nconst flex = cva(styles.flex, {\n  variants: {\n    direction: {\n      row: styles[\"direction-row\"],\n      column: styles[\"direction-column\"],\n      rowReverse: styles[\"direction-rowReverse\"],\n      columnReverse: styles[\"direction-columnReverse\"],\n    },\n    align: {\n      start: styles[\"align-start\"],\n      center: styles[\"align-center\"],\n      end: styles[\"align-end\"],\n      stretch: styles[\"align-stretch\"],\n      baseline: styles[\"align-baseline\"],\n    },\n    justify: {\n      start: styles[\"justify-start\"],\n      center: styles[\"justify-center\"],\n      end: styles[\"justify-end\"],\n      between: styles[\"justify-between\"],\n    },\n    wrap: {\n      noWrap: styles[\"wrap-noWrap\"],\n      wrap: styles[\"wrap-wrap\"],\n      wrapReverse: styles[\"wrap-wrapReverse\"],\n    },\n    gap: {\n      \"extra-small\": styles[\"gap-xs\"],\n      small: styles[\"gap-sm\"],\n      medium: styles[\"gap-md\"],\n      large: styles[\"gap-lg\"],\n      \"extra-large\": styles[\"gap-xl\"],\n    },\n  },\n  defaultVariants: {\n    direction: \"row\",\n    align: \"stretch\",\n    justify: \"start\",\n    wrap: \"noWrap\",\n  },\n});\n\ntype BoxProps = PropsWithChildren<VariantProps<typeof flex>> &\n  HTMLAttributes<HTMLDivElement>;\n\nexport const Flex = forwardRef<HTMLDivElement, BoxProps>(\n  (\n    { children, direction, align, justify, wrap, gap, className, ...props },\n    ref\n  ) => {\n    return (\n      <div\n        className={flex({ direction, align, justify, wrap, gap, className })}\n        {...props}\n        ref={ref}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["_jsx"],"mappings":";;;;;AAKA,MAAM,IAAI,GAAG,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE;AAC5B,IAAA,QAAQ,EAAE;AACR,QAAA,SAAS,EAAE;AACT,YAAA,GAAG,EAAE,MAAM,CAAC,eAAe,CAAC;AAC5B,YAAA,MAAM,EAAE,MAAM,CAAC,kBAAkB,CAAC;AAClC,YAAA,UAAU,EAAE,MAAM,CAAC,sBAAsB,CAAC;AAC1C,YAAA,aAAa,EAAE,MAAM,CAAC,yBAAyB,CAAC;AACjD,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,KAAK,EAAE,MAAM,CAAC,aAAa,CAAC;AAC5B,YAAA,MAAM,EAAE,MAAM,CAAC,cAAc,CAAC;AAC9B,YAAA,GAAG,EAAE,MAAM,CAAC,WAAW,CAAC;AACxB,YAAA,OAAO,EAAE,MAAM,CAAC,eAAe,CAAC;AAChC,YAAA,QAAQ,EAAE,MAAM,CAAC,gBAAgB,CAAC;AACnC,SAAA;AACD,QAAA,OAAO,EAAE;AACP,YAAA,KAAK,EAAE,MAAM,CAAC,eAAe,CAAC;AAC9B,YAAA,MAAM,EAAE,MAAM,CAAC,gBAAgB,CAAC;AAChC,YAAA,GAAG,EAAE,MAAM,CAAC,aAAa,CAAC;AAC1B,YAAA,OAAO,EAAE,MAAM,CAAC,iBAAiB,CAAC;AACnC,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,MAAM,EAAE,MAAM,CAAC,aAAa,CAAC;AAC7B,YAAA,IAAI,EAAE,MAAM,CAAC,WAAW,CAAC;AACzB,YAAA,WAAW,EAAE,MAAM,CAAC,kBAAkB,CAAC;AACxC,SAAA;AACD,QAAA,GAAG,EAAE;AACH,YAAA,aAAa,EAAE,MAAM,CAAC,QAAQ,CAAC;AAC/B,YAAA,KAAK,EAAE,MAAM,CAAC,QAAQ,CAAC;AACvB,YAAA,MAAM,EAAE,MAAM,CAAC,QAAQ,CAAC;AACxB,YAAA,KAAK,EAAE,MAAM,CAAC,QAAQ,CAAC;AACvB,YAAA,aAAa,EAAE,MAAM,CAAC,QAAQ,CAAC;AAChC,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,SAAS,EAAE,KAAK;AAChB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,OAAO,EAAE,OAAO;AAChB,QAAA,IAAI,EAAE,QAAQ;AACf,KAAA;AACF,CAAA,CAAC,CAAC;AAKI,MAAM,IAAI,GAAG,UAAU,CAC5B,CACE,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACvE,GAAG,KACD;AACF,IAAA,QACEA,qBAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,IAAI,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,EAAA,GAChE,KAAK,EACT,GAAG,EAAE,GAAG,EAAA,QAAA,EAEP,QAAQ,EAAA,CACL,EACN;AACJ,CAAC;;;;"}
+{"version":3,"file":"flex.js","sources":["../../../../v1/components/flex/flex.tsx"],"sourcesContent":["import { cva, VariantProps } from \"class-variance-authority\";\nimport { forwardRef, HTMLAttributes, PropsWithChildren } from \"react\";\n\nimport styles from \"./flex.module.css\";\n\nconst flex = cva(styles.flex, {\n  variants: {\n    direction: {\n      row: styles[\"direction-row\"],\n      column: styles[\"direction-column\"],\n      rowReverse: styles[\"direction-rowReverse\"],\n      columnReverse: styles[\"direction-columnReverse\"],\n    },\n    align: {\n      start: styles[\"align-start\"],\n      center: styles[\"align-center\"],\n      end: styles[\"align-end\"],\n      stretch: styles[\"align-stretch\"],\n      baseline: styles[\"align-baseline\"],\n    },\n    justify: {\n      start: styles[\"justify-start\"],\n      center: styles[\"justify-center\"],\n      end: styles[\"justify-end\"],\n      between: styles[\"justify-between\"],\n    },\n    wrap: {\n      noWrap: styles[\"wrap-noWrap\"],\n      wrap: styles[\"wrap-wrap\"],\n      wrapReverse: styles[\"wrap-wrapReverse\"],\n    },\n    gap: {\n      1: styles[\"gap-1\"],\n      2: styles[\"gap-2\"],\n      3: styles[\"gap-3\"],\n      4: styles[\"gap-4\"],\n      5: styles[\"gap-5\"],\n      6: styles[\"gap-6\"],\n      7: styles[\"gap-7\"],\n      8: styles[\"gap-8\"],\n      9: styles[\"gap-9\"],\n      \"extra-small\": styles[\"gap-xs\"],\n      small: styles[\"gap-sm\"],\n      medium: styles[\"gap-md\"],\n      large: styles[\"gap-lg\"],\n      \"extra-large\": styles[\"gap-xl\"],\n    },\n  },\n  defaultVariants: {\n    direction: \"row\",\n    align: \"stretch\",\n    justify: \"start\",\n    wrap: \"noWrap\",\n  },\n});\n\ntype BoxProps = PropsWithChildren<VariantProps<typeof flex>> &\n  HTMLAttributes<HTMLDivElement>;\n\nexport const Flex = forwardRef<HTMLDivElement, BoxProps>(\n  (\n    { children, direction, align, justify, wrap, gap, className, ...props },\n    ref\n  ) => {\n    return (\n      <div\n        className={flex({ direction, align, justify, wrap, gap, className })}\n        {...props}\n        ref={ref}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["_jsx"],"mappings":";;;;;AAKA,MAAM,IAAI,GAAG,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE;AAC5B,IAAA,QAAQ,EAAE;AACR,QAAA,SAAS,EAAE;AACT,YAAA,GAAG,EAAE,MAAM,CAAC,eAAe,CAAC;AAC5B,YAAA,MAAM,EAAE,MAAM,CAAC,kBAAkB,CAAC;AAClC,YAAA,UAAU,EAAE,MAAM,CAAC,sBAAsB,CAAC;AAC1C,YAAA,aAAa,EAAE,MAAM,CAAC,yBAAyB,CAAC;AACjD,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,KAAK,EAAE,MAAM,CAAC,aAAa,CAAC;AAC5B,YAAA,MAAM,EAAE,MAAM,CAAC,cAAc,CAAC;AAC9B,YAAA,GAAG,EAAE,MAAM,CAAC,WAAW,CAAC;AACxB,YAAA,OAAO,EAAE,MAAM,CAAC,eAAe,CAAC;AAChC,YAAA,QAAQ,EAAE,MAAM,CAAC,gBAAgB,CAAC;AACnC,SAAA;AACD,QAAA,OAAO,EAAE;AACP,YAAA,KAAK,EAAE,MAAM,CAAC,eAAe,CAAC;AAC9B,YAAA,MAAM,EAAE,MAAM,CAAC,gBAAgB,CAAC;AAChC,YAAA,GAAG,EAAE,MAAM,CAAC,aAAa,CAAC;AAC1B,YAAA,OAAO,EAAE,MAAM,CAAC,iBAAiB,CAAC;AACnC,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,MAAM,EAAE,MAAM,CAAC,aAAa,CAAC;AAC7B,YAAA,IAAI,EAAE,MAAM,CAAC,WAAW,CAAC;AACzB,YAAA,WAAW,EAAE,MAAM,CAAC,kBAAkB,CAAC;AACxC,SAAA;AACD,QAAA,GAAG,EAAE;AACH,YAAA,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC;AAClB,YAAA,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC;AAClB,YAAA,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC;AAClB,YAAA,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC;AAClB,YAAA,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC;AAClB,YAAA,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC;AAClB,YAAA,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC;AAClB,YAAA,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC;AAClB,YAAA,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC;AAClB,YAAA,aAAa,EAAE,MAAM,CAAC,QAAQ,CAAC;AAC/B,YAAA,KAAK,EAAE,MAAM,CAAC,QAAQ,CAAC;AACvB,YAAA,MAAM,EAAE,MAAM,CAAC,QAAQ,CAAC;AACxB,YAAA,KAAK,EAAE,MAAM,CAAC,QAAQ,CAAC;AACvB,YAAA,aAAa,EAAE,MAAM,CAAC,QAAQ,CAAC;AAChC,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,SAAS,EAAE,KAAK;AAChB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,OAAO,EAAE,OAAO;AAChB,QAAA,IAAI,EAAE,QAAQ;AACf,KAAA;AACF,CAAA,CAAC,CAAC;AAKI,MAAM,IAAI,GAAG,UAAU,CAC5B,CACE,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACvE,GAAG,KACD;AACF,IAAA,QACEA,qBAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,IAAI,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,EAAA,GAChE,KAAK,EACT,GAAG,EAAE,GAAG,EAAA,QAAA,EAEP,QAAQ,EAAA,CACL,EACN;AACJ,CAAC;;;;"}

package/dist/v1/components/flex/flex.module.css.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var styles = {"flex":"flex-module_flex__fZ-Sc","direction-row":"flex-module_direction-row__77aQi","direction-column":"flex-module_direction-column__j4KqT","direction-rowReverse":"flex-module_direction-rowReverse__MPbAV","direction-columnReverse":"flex-module_direction-columnReverse__VLSDf","align-start":"flex-module_align-start__MCmFu","align-center":"flex-module_align-center__MNhmy","align-end":"flex-module_align-end__mUpw6","align-stretch":"flex-module_align-stretch__gqBJq","align-baseline":"flex-module_align-baseline__Ih3rJ","justify-start":"flex-module_justify-start__Qazki","justify-center":"flex-module_justify-center__DGV33","justify-end":"flex-module_justify-end__maAst","justify-between":"flex-module_justify-between__5A-HF","wrap-noWrap":"flex-module_wrap-noWrap__vo-yi","wrap-wrap":"flex-module_wrap-wrap__1GYoe","wrap-wrapReverse":"flex-module_wrap-wrapReverse__ONfVN","gap-xs":"flex-module_gap-xs__WltLq","gap-sm":"flex-module_gap-sm__0u17E","gap-md":"flex-module_gap-md__qXNWu","gap-lg":"flex-module_gap-lg__84NhB","gap-xl":"flex-module_gap-xl__Ix6vc","direction___row":"flex-module_direction-row__77aQi","direction___column":"flex-module_direction-column__j4KqT","direction___rowReverse":"flex-module_direction-rowReverse__MPbAV","direction___columnReverse":"flex-module_direction-columnReverse__VLSDf","align___start":"flex-module_align-start__MCmFu","align___center":"flex-module_align-center__MNhmy","align___end":"flex-module_align-end__mUpw6","align___stretch":"flex-module_align-stretch__gqBJq","align___baseline":"flex-module_align-baseline__Ih3rJ","justify___start":"flex-module_justify-start__Qazki","justify___center":"flex-module_justify-center__DGV33","justify___end":"flex-module_justify-end__maAst","justify___between":"flex-module_justify-between__5A-HF","wrap___noWrap":"flex-module_wrap-noWrap__vo-yi","wrap___wrap":"flex-module_wrap-wrap__1GYoe","wrap___wrapReverse":"flex-module_wrap-wrapReverse__ONfVN","gap___xs":"flex-module_gap-xs__WltLq","gap___sm":"flex-module_gap-sm__0u17E","gap___md":"flex-module_gap-md__qXNWu","gap___lg":"flex-module_gap-lg__84NhB","gap___xl":"flex-module_gap-xl__Ix6vc"};
+var styles = {"flex":"flex-module_flex__fZ-Sc","direction-row":"flex-module_direction-row__77aQi","direction-column":"flex-module_direction-column__j4KqT","direction-rowReverse":"flex-module_direction-rowReverse__MPbAV","direction-columnReverse":"flex-module_direction-columnReverse__VLSDf","align-start":"flex-module_align-start__MCmFu","align-center":"flex-module_align-center__MNhmy","align-end":"flex-module_align-end__mUpw6","align-stretch":"flex-module_align-stretch__gqBJq","align-baseline":"flex-module_align-baseline__Ih3rJ","justify-start":"flex-module_justify-start__Qazki","justify-center":"flex-module_justify-center__DGV33","justify-end":"flex-module_justify-end__maAst","justify-between":"flex-module_justify-between__5A-HF","wrap-noWrap":"flex-module_wrap-noWrap__vo-yi","wrap-wrap":"flex-module_wrap-wrap__1GYoe","wrap-wrapReverse":"flex-module_wrap-wrapReverse__ONfVN","gap-xs":"flex-module_gap-xs__WltLq","gap-sm":"flex-module_gap-sm__0u17E","gap-md":"flex-module_gap-md__qXNWu","gap-lg":"flex-module_gap-lg__84NhB","gap-xl":"flex-module_gap-xl__Ix6vc","gap-1":"flex-module_gap-1__oXYV2","gap-2":"flex-module_gap-2__EkH82","gap-3":"flex-module_gap-3__MdG1V","gap-4":"flex-module_gap-4__LteTu","gap-5":"flex-module_gap-5__RGfOW","gap-6":"flex-module_gap-6__cjVhp","gap-7":"flex-module_gap-7__64Ulj","gap-8":"flex-module_gap-8__ZLXCo","gap-9":"flex-module_gap-9__qs4Nl","direction___row":"flex-module_direction-row__77aQi","direction___column":"flex-module_direction-column__j4KqT","direction___rowReverse":"flex-module_direction-rowReverse__MPbAV","direction___columnReverse":"flex-module_direction-columnReverse__VLSDf","align___start":"flex-module_align-start__MCmFu","align___center":"flex-module_align-center__MNhmy","align___end":"flex-module_align-end__mUpw6","align___stretch":"flex-module_align-stretch__gqBJq","align___baseline":"flex-module_align-baseline__Ih3rJ","justify___start":"flex-module_justify-start__Qazki","justify___center":"flex-module_justify-center__DGV33","justify___end":"flex-module_justify-end__maAst","justify___between":"flex-module_justify-between__5A-HF","wrap___noWrap":"flex-module_wrap-noWrap__vo-yi","wrap___wrap":"flex-module_wrap-wrap__1GYoe","wrap___wrapReverse":"flex-module_wrap-wrapReverse__ONfVN","gap___xs":"flex-module_gap-xs__WltLq","gap___sm":"flex-module_gap-sm__0u17E","gap___md":"flex-module_gap-md__qXNWu","gap___lg":"flex-module_gap-lg__84NhB","gap___xl":"flex-module_gap-xl__Ix6vc","gap___1":"flex-module_gap-1__oXYV2","gap___2":"flex-module_gap-2__EkH82","gap___3":"flex-module_gap-3__MdG1V","gap___4":"flex-module_gap-4__LteTu","gap___5":"flex-module_gap-5__RGfOW","gap___6":"flex-module_gap-6__cjVhp","gap___7":"flex-module_gap-7__64Ulj","gap___8":"flex-module_gap-8__ZLXCo","gap___9":"flex-module_gap-9__qs4Nl"};
 
 exports.default = styles;
 //# sourceMappingURL=flex.module.css.cjs.map

package/dist/v1/components/flex/flex.module.css.js

@@ -1,4 +1,4 @@
-var styles = {"flex":"flex-module_flex__fZ-Sc","direction-row":"flex-module_direction-row__77aQi","direction-column":"flex-module_direction-column__j4KqT","direction-rowReverse":"flex-module_direction-rowReverse__MPbAV","direction-columnReverse":"flex-module_direction-columnReverse__VLSDf","align-start":"flex-module_align-start__MCmFu","align-center":"flex-module_align-center__MNhmy","align-end":"flex-module_align-end__mUpw6","align-stretch":"flex-module_align-stretch__gqBJq","align-baseline":"flex-module_align-baseline__Ih3rJ","justify-start":"flex-module_justify-start__Qazki","justify-center":"flex-module_justify-center__DGV33","justify-end":"flex-module_justify-end__maAst","justify-between":"flex-module_justify-between__5A-HF","wrap-noWrap":"flex-module_wrap-noWrap__vo-yi","wrap-wrap":"flex-module_wrap-wrap__1GYoe","wrap-wrapReverse":"flex-module_wrap-wrapReverse__ONfVN","gap-xs":"flex-module_gap-xs__WltLq","gap-sm":"flex-module_gap-sm__0u17E","gap-md":"flex-module_gap-md__qXNWu","gap-lg":"flex-module_gap-lg__84NhB","gap-xl":"flex-module_gap-xl__Ix6vc","direction___row":"flex-module_direction-row__77aQi","direction___column":"flex-module_direction-column__j4KqT","direction___rowReverse":"flex-module_direction-rowReverse__MPbAV","direction___columnReverse":"flex-module_direction-columnReverse__VLSDf","align___start":"flex-module_align-start__MCmFu","align___center":"flex-module_align-center__MNhmy","align___end":"flex-module_align-end__mUpw6","align___stretch":"flex-module_align-stretch__gqBJq","align___baseline":"flex-module_align-baseline__Ih3rJ","justify___start":"flex-module_justify-start__Qazki","justify___center":"flex-module_justify-center__DGV33","justify___end":"flex-module_justify-end__maAst","justify___between":"flex-module_justify-between__5A-HF","wrap___noWrap":"flex-module_wrap-noWrap__vo-yi","wrap___wrap":"flex-module_wrap-wrap__1GYoe","wrap___wrapReverse":"flex-module_wrap-wrapReverse__ONfVN","gap___xs":"flex-module_gap-xs__WltLq","gap___sm":"flex-module_gap-sm__0u17E","gap___md":"flex-module_gap-md__qXNWu","gap___lg":"flex-module_gap-lg__84NhB","gap___xl":"flex-module_gap-xl__Ix6vc"};
+var styles = {"flex":"flex-module_flex__fZ-Sc","direction-row":"flex-module_direction-row__77aQi","direction-column":"flex-module_direction-column__j4KqT","direction-rowReverse":"flex-module_direction-rowReverse__MPbAV","direction-columnReverse":"flex-module_direction-columnReverse__VLSDf","align-start":"flex-module_align-start__MCmFu","align-center":"flex-module_align-center__MNhmy","align-end":"flex-module_align-end__mUpw6","align-stretch":"flex-module_align-stretch__gqBJq","align-baseline":"flex-module_align-baseline__Ih3rJ","justify-start":"flex-module_justify-start__Qazki","justify-center":"flex-module_justify-center__DGV33","justify-end":"flex-module_justify-end__maAst","justify-between":"flex-module_justify-between__5A-HF","wrap-noWrap":"flex-module_wrap-noWrap__vo-yi","wrap-wrap":"flex-module_wrap-wrap__1GYoe","wrap-wrapReverse":"flex-module_wrap-wrapReverse__ONfVN","gap-xs":"flex-module_gap-xs__WltLq","gap-sm":"flex-module_gap-sm__0u17E","gap-md":"flex-module_gap-md__qXNWu","gap-lg":"flex-module_gap-lg__84NhB","gap-xl":"flex-module_gap-xl__Ix6vc","gap-1":"flex-module_gap-1__oXYV2","gap-2":"flex-module_gap-2__EkH82","gap-3":"flex-module_gap-3__MdG1V","gap-4":"flex-module_gap-4__LteTu","gap-5":"flex-module_gap-5__RGfOW","gap-6":"flex-module_gap-6__cjVhp","gap-7":"flex-module_gap-7__64Ulj","gap-8":"flex-module_gap-8__ZLXCo","gap-9":"flex-module_gap-9__qs4Nl","direction___row":"flex-module_direction-row__77aQi","direction___column":"flex-module_direction-column__j4KqT","direction___rowReverse":"flex-module_direction-rowReverse__MPbAV","direction___columnReverse":"flex-module_direction-columnReverse__VLSDf","align___start":"flex-module_align-start__MCmFu","align___center":"flex-module_align-center__MNhmy","align___end":"flex-module_align-end__mUpw6","align___stretch":"flex-module_align-stretch__gqBJq","align___baseline":"flex-module_align-baseline__Ih3rJ","justify___start":"flex-module_justify-start__Qazki","justify___center":"flex-module_justify-center__DGV33","justify___end":"flex-module_justify-end__maAst","justify___between":"flex-module_justify-between__5A-HF","wrap___noWrap":"flex-module_wrap-noWrap__vo-yi","wrap___wrap":"flex-module_wrap-wrap__1GYoe","wrap___wrapReverse":"flex-module_wrap-wrapReverse__ONfVN","gap___xs":"flex-module_gap-xs__WltLq","gap___sm":"flex-module_gap-sm__0u17E","gap___md":"flex-module_gap-md__qXNWu","gap___lg":"flex-module_gap-lg__84NhB","gap___xl":"flex-module_gap-xl__Ix6vc","gap___1":"flex-module_gap-1__oXYV2","gap___2":"flex-module_gap-2__EkH82","gap___3":"flex-module_gap-3__MdG1V","gap___4":"flex-module_gap-4__LteTu","gap___5":"flex-module_gap-5__RGfOW","gap___6":"flex-module_gap-6__cjVhp","gap___7":"flex-module_gap-7__64Ulj","gap___8":"flex-module_gap-8__ZLXCo","gap___9":"flex-module_gap-9__qs4Nl"};
 
 export { styles as default };
 //# sourceMappingURL=flex.module.css.js.map

package/dist/v1/components/icon-button/icon-button.cjs

@@ -18,7 +18,7 @@ const iconButton = index.cva(iconButton_module.default.iconButton, {
         size: 2,
     },
 });
-const IconButton = React.forwardRef(({ className, size, disabled, children, 'aria-label': ariaLabel, ...props }, ref) => (jsxRuntime.jsxRuntimeExports.jsx("button", { ref: ref, className: iconButton({ size, className }), disabled: disabled, type: "button", "aria-label": ariaLabel, "aria-disabled": disabled, ...props, children: jsxRuntime.jsxRuntimeExports.jsx("div", { "aria-hidden": "true", children: children }) })));
+const IconButton = React.forwardRef(({ className, size, disabled, children, 'aria-label': ariaLabel, style, ...props }, ref) => (jsxRuntime.jsxRuntimeExports.jsx("button", { ref: ref, className: iconButton({ size, className }), disabled: disabled, type: "button", "aria-label": ariaLabel, "aria-disabled": disabled, style: style, ...props, children: jsxRuntime.jsxRuntimeExports.jsx("div", { "aria-hidden": "true", children: children }) })));
 IconButton.displayName = 'IconButton';
 
 exports.IconButton = IconButton;

package/dist/v1/components/icon-button/icon-button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.cjs","sources":["../../../../v1/components/icon-button/icon-button.tsx"],"sourcesContent":["import { cva, VariantProps } from \"class-variance-authority\";\nimport { ComponentPropsWithoutRef, ElementRef, forwardRef } from \"react\";\n\nimport styles from './icon-button.module.css';\n\nconst iconButton = cva(styles.iconButton, {\n  variants: {\n    size: {\n      1: styles[\"iconButton-size-1\"],\n      2: styles[\"iconButton-size-2\"],\n      3: styles[\"iconButton-size-3\"],\n      4: styles[\"iconButton-size-4\"],\n    }\n  },\n  defaultVariants: {\n    size: 2,\n  },\n});\n\nexport interface IconButtonProps\n  extends ComponentPropsWithoutRef<\"button\">,\n    VariantProps<typeof iconButton> {\n  size?: 1 | 2 | 3 | 4;\n  'aria-label'?: string;\n}\n\nexport const IconButton = forwardRef<ElementRef<\"button\">, IconButtonProps>(\n  ({ className, size, disabled, children, 'aria-label': ariaLabel, ...props }, ref) => (\n    <button\n      ref={ref}\n      className={iconButton({ size, className })}\n      disabled={disabled}\n      type=\"button\"\n      aria-label={ariaLabel}\n      aria-disabled={disabled}\n      {...props}\n    >\n      <div aria-hidden=\"true\">\n        {children}\n      </div>\n    </button>\n  )\n);\n\nIconButton.displayName = 'IconButton';\n"],"names":["cva","styles","forwardRef","_jsx"],"mappings":";;;;;;;AAKA,MAAM,UAAU,GAAGA,SAAG,CAACC,yBAAM,CAAC,UAAU,EAAE;AACxC,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,CAAC,EAAEA,yBAAM,CAAC,mBAAmB,CAAC;AAC9B,YAAA,CAAC,EAAEA,yBAAM,CAAC,mBAAmB,CAAC;AAC9B,YAAA,CAAC,EAAEA,yBAAM,CAAC,mBAAmB,CAAC;AAC9B,YAAA,CAAC,EAAEA,yBAAM,CAAC,mBAAmB,CAAC;AAC/B,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,CAAC;AACR,KAAA;AACF,CAAA,CAAC,CAAC;AASI,MAAM,UAAU,GAAGC,gBAAU,CAClC,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC9EC,gCAAA,CAAA,QAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAC1C,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,QAAQ,EAAA,YAAA,EACD,SAAS,EAAA,eAAA,EACN,QAAQ,EAAA,GACnB,KAAK,EAET,QAAA,EAAAA,gCAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAiB,MAAM,EAAA,QAAA,EACpB,QAAQ,EAAA,CACL,EACC,CAAA,CACV,EACD;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
+{"version":3,"file":"icon-button.cjs","sources":["../../../../v1/components/icon-button/icon-button.tsx"],"sourcesContent":["import { cva, VariantProps } from \"class-variance-authority\";\nimport { ComponentPropsWithoutRef, ElementRef, forwardRef } from \"react\";\n\nimport styles from './icon-button.module.css';\n\nconst iconButton = cva(styles.iconButton, {\n  variants: {\n    size: {\n      1: styles[\"iconButton-size-1\"],\n      2: styles[\"iconButton-size-2\"],\n      3: styles[\"iconButton-size-3\"],\n      4: styles[\"iconButton-size-4\"],\n    }\n  },\n  defaultVariants: {\n    size: 2,\n  },\n});\n\nexport interface IconButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof iconButton> {\n  size?: 1 | 2 | 3 | 4;\n  'aria-label'?: string;\n}\n\nexport const IconButton = forwardRef<ElementRef<\"button\">, IconButtonProps>(\n  ({ \n    className, \n    size, \n    disabled, \n    children, \n    'aria-label': ariaLabel,\n    style,\n    ...props \n  }, ref) => (\n    <button\n      ref={ref}\n      className={iconButton({ size, className })}\n      disabled={disabled}\n      type=\"button\"\n      aria-label={ariaLabel}\n      aria-disabled={disabled}\n      style={style}\n      {...props}\n    >\n      <div aria-hidden=\"true\">\n        {children}\n      </div>\n    </button>\n  )\n);\n\nIconButton.displayName = 'IconButton';\n"],"names":["cva","styles","forwardRef","_jsx"],"mappings":";;;;;;;AAKA,MAAM,UAAU,GAAGA,SAAG,CAACC,yBAAM,CAAC,UAAU,EAAE;AACxC,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,CAAC,EAAEA,yBAAM,CAAC,mBAAmB,CAAC;AAC9B,YAAA,CAAC,EAAEA,yBAAM,CAAC,mBAAmB,CAAC;AAC9B,YAAA,CAAC,EAAEA,yBAAM,CAAC,mBAAmB,CAAC;AAC9B,YAAA,CAAC,EAAEA,yBAAM,CAAC,mBAAmB,CAAC;AAC/B,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,CAAC;AACR,KAAA;AACF,CAAA,CAAC,CAAC;AASI,MAAM,UAAU,GAAGC,gBAAU,CAClC,CAAC,EACC,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,GAAG,MACJC,gCACE,CAAA,QAAA,EAAA,EAAA,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAC1C,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,QAAQ,EAAA,YAAA,EACD,SAAS,EAAA,eAAA,EACN,QAAQ,EACvB,KAAK,EAAE,KAAK,KACR,KAAK,EAAA,QAAA,EAETA,gCAAiB,CAAA,KAAA,EAAA,EAAA,aAAA,EAAA,MAAM,YACpB,QAAQ,EAAA,CACL,EACC,CAAA,CACV,EACD;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}

package/dist/v1/components/icon-button/icon-button.d.ts

@@ -1,9 +1,8 @@
 import { VariantProps } from "class-variance-authority";
-import { ComponentPropsWithoutRef } from "react";
 declare const iconButton: (props?: ({
     size?: 1 | 2 | 3 | 4 | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export interface IconButtonProps extends ComponentPropsWithoutRef<"button">, VariantProps<typeof iconButton> {
+export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof iconButton> {
     size?: 1 | 2 | 3 | 4;
     'aria-label'?: string;
 }

package/dist/v1/components/icon-button/icon-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../../v1/components/icon-button/icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,wBAAwB,EAA0B,MAAM,OAAO,CAAC;AAIzE,QAAA,MAAM,UAAU;;mFAYd,CAAC;AAEH,MAAM,WAAW,eACf,SAAQ,wBAAwB,CAAC,QAAQ,CAAC,EACxC,YAAY,CAAC,OAAO,UAAU,CAAC;IACjC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,UAAU,+GAgBtB,CAAC"}
+{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../../v1/components/icon-button/icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAK7D,QAAA,MAAM,UAAU;;mFAYd,CAAC;AAEH,MAAM,WAAW,eACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,YAAY,CAAC,OAAO,UAAU,CAAC;IACjC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,UAAU,+GAyBtB,CAAC"}

package/dist/v1/components/icon-button/icon-button.js

@@ -16,7 +16,7 @@ const iconButton = cva(styles.iconButton, {
         size: 2,
     },
 });
-const IconButton = forwardRef(({ className, size, disabled, children, 'aria-label': ariaLabel, ...props }, ref) => (jsxRuntimeExports.jsx("button", { ref: ref, className: iconButton({ size, className }), disabled: disabled, type: "button", "aria-label": ariaLabel, "aria-disabled": disabled, ...props, children: jsxRuntimeExports.jsx("div", { "aria-hidden": "true", children: children }) })));
+const IconButton = forwardRef(({ className, size, disabled, children, 'aria-label': ariaLabel, style, ...props }, ref) => (jsxRuntimeExports.jsx("button", { ref: ref, className: iconButton({ size, className }), disabled: disabled, type: "button", "aria-label": ariaLabel, "aria-disabled": disabled, style: style, ...props, children: jsxRuntimeExports.jsx("div", { "aria-hidden": "true", children: children }) })));
 IconButton.displayName = 'IconButton';
 
 export { IconButton };

package/dist/v1/components/icon-button/icon-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.js","sources":["../../../../v1/components/icon-button/icon-button.tsx"],"sourcesContent":["import { cva, VariantProps } from \"class-variance-authority\";\nimport { ComponentPropsWithoutRef, ElementRef, forwardRef } from \"react\";\n\nimport styles from './icon-button.module.css';\n\nconst iconButton = cva(styles.iconButton, {\n  variants: {\n    size: {\n      1: styles[\"iconButton-size-1\"],\n      2: styles[\"iconButton-size-2\"],\n      3: styles[\"iconButton-size-3\"],\n      4: styles[\"iconButton-size-4\"],\n    }\n  },\n  defaultVariants: {\n    size: 2,\n  },\n});\n\nexport interface IconButtonProps\n  extends ComponentPropsWithoutRef<\"button\">,\n    VariantProps<typeof iconButton> {\n  size?: 1 | 2 | 3 | 4;\n  'aria-label'?: string;\n}\n\nexport const IconButton = forwardRef<ElementRef<\"button\">, IconButtonProps>(\n  ({ className, size, disabled, children, 'aria-label': ariaLabel, ...props }, ref) => (\n    <button\n      ref={ref}\n      className={iconButton({ size, className })}\n      disabled={disabled}\n      type=\"button\"\n      aria-label={ariaLabel}\n      aria-disabled={disabled}\n      {...props}\n    >\n      <div aria-hidden=\"true\">\n        {children}\n      </div>\n    </button>\n  )\n);\n\nIconButton.displayName = 'IconButton';\n"],"names":["_jsx"],"mappings":";;;;;AAKA,MAAM,UAAU,GAAG,GAAG,CAAC,MAAM,CAAC,UAAU,EAAE;AACxC,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,CAAC,EAAE,MAAM,CAAC,mBAAmB,CAAC;AAC9B,YAAA,CAAC,EAAE,MAAM,CAAC,mBAAmB,CAAC;AAC9B,YAAA,CAAC,EAAE,MAAM,CAAC,mBAAmB,CAAC;AAC9B,YAAA,CAAC,EAAE,MAAM,CAAC,mBAAmB,CAAC;AAC/B,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,CAAC;AACR,KAAA;AACF,CAAA,CAAC,CAAC;AASI,MAAM,UAAU,GAAG,UAAU,CAClC,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC9EA,qBAAA,CAAA,QAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAC1C,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,QAAQ,EAAA,YAAA,EACD,SAAS,EAAA,eAAA,EACN,QAAQ,EAAA,GACnB,KAAK,EAET,QAAA,EAAAA,qBAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAiB,MAAM,EAAA,QAAA,EACpB,QAAQ,EAAA,CACL,EACC,CAAA,CACV,EACD;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
+{"version":3,"file":"icon-button.js","sources":["../../../../v1/components/icon-button/icon-button.tsx"],"sourcesContent":["import { cva, VariantProps } from \"class-variance-authority\";\nimport { ComponentPropsWithoutRef, ElementRef, forwardRef } from \"react\";\n\nimport styles from './icon-button.module.css';\n\nconst iconButton = cva(styles.iconButton, {\n  variants: {\n    size: {\n      1: styles[\"iconButton-size-1\"],\n      2: styles[\"iconButton-size-2\"],\n      3: styles[\"iconButton-size-3\"],\n      4: styles[\"iconButton-size-4\"],\n    }\n  },\n  defaultVariants: {\n    size: 2,\n  },\n});\n\nexport interface IconButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof iconButton> {\n  size?: 1 | 2 | 3 | 4;\n  'aria-label'?: string;\n}\n\nexport const IconButton = forwardRef<ElementRef<\"button\">, IconButtonProps>(\n  ({ \n    className, \n    size, \n    disabled, \n    children, \n    'aria-label': ariaLabel,\n    style,\n    ...props \n  }, ref) => (\n    <button\n      ref={ref}\n      className={iconButton({ size, className })}\n      disabled={disabled}\n      type=\"button\"\n      aria-label={ariaLabel}\n      aria-disabled={disabled}\n      style={style}\n      {...props}\n    >\n      <div aria-hidden=\"true\">\n        {children}\n      </div>\n    </button>\n  )\n);\n\nIconButton.displayName = 'IconButton';\n"],"names":["_jsx"],"mappings":";;;;;AAKA,MAAM,UAAU,GAAG,GAAG,CAAC,MAAM,CAAC,UAAU,EAAE;AACxC,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,CAAC,EAAE,MAAM,CAAC,mBAAmB,CAAC;AAC9B,YAAA,CAAC,EAAE,MAAM,CAAC,mBAAmB,CAAC;AAC9B,YAAA,CAAC,EAAE,MAAM,CAAC,mBAAmB,CAAC;AAC9B,YAAA,CAAC,EAAE,MAAM,CAAC,mBAAmB,CAAC;AAC/B,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,CAAC;AACR,KAAA;AACF,CAAA,CAAC,CAAC;AASI,MAAM,UAAU,GAAG,UAAU,CAClC,CAAC,EACC,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,GAAG,MACJA,qBACE,CAAA,QAAA,EAAA,EAAA,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAC1C,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,QAAQ,EAAA,YAAA,EACD,SAAS,EAAA,eAAA,EACN,QAAQ,EACvB,KAAK,EAAE,KAAK,KACR,KAAK,EAAA,QAAA,EAETA,qBAAiB,CAAA,KAAA,EAAA,EAAA,aAAA,EAAA,MAAM,YACpB,QAAQ,EAAA,CACL,EACC,CAAA,CACV,EACD;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}