npm - @raystack/apsara - Versions diffs - 0.38.0 → 0.40.0 - Mend

@raystack/apsara 0.38.0 → 0.40.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (99) hide show

package/dist/v1/components/empty-state/empty-state.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"empty-state.js","sources":["../../../../v1/components/empty-state/empty-state.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport { Flex } from \"../flex\";\nimport { Text } from \"../text\";\nimport styles from \"./empty-state.module.css\";\n\ntype classNameKeys =\n \| \"container\"\n \| \"iconContainer\"\n \| \"icon\"\n \| \"heading\"\n \| \"subHeading\";\n\ninterface ~~EmptystateProps~~ {\n icon: React.ReactNode;\n heading?: React.ReactNode;\n subHeading?: React.ReactNode;\n primaryAction?: React.ReactNode;\n secondaryAction?: React.ReactNode;\n classNames?: Partial<Record<classNameKeys, string>>;\n}\n\nexport const EmptyState = ({\n icon,\n heading,\n subHeading,\n primaryAction,\n secondaryAction,\n classNames,\n}: ~~EmptystateProps~~) => {\n return (\n <Flex\n direction=\"column\"\n align=\"center\"\n gap=\"medium\"\n className={clsx(styles.emptyState, classNames?.container)}\n >\n <div className={clsx(styles.iconContainer, classNames?.iconContainer)}>\n <div className={clsx(styles.icon, classNames?.icon)}>{icon}</div>\n </div>\n\n <Flex direction=\"column\" gap=\"small\" align=\"center\">\n {heading && (\n <Text\n size={5}\n weight={500}\n className={clsx(styles.headerText, classNames?.heading)}\n >\n {heading}\n </Text>\n )}\n\n {subHeading && (\n <Text\n size={4}\n weight={400}\n className={clsx(styles.subHeaderText, classNames?.subHeading)}\n >\n {subHeading}\n </Text>\n )}\n </Flex>\n\n {primaryAction}\n\n {secondaryAction}\n </Flex>\n );\n};\n"],"names":["~~_jsxs~~","~~_jsx~~"],"mappings":";;;;;;~~AAsBa~~,~~MAAA,~~UAAU,GAAG,CAAC,EACzB,IAAI,EACJ,OAAO,EACP,UAAU,EACV,aAAa,EACb,eAAe,EACf,UAAU,~~GACM~~,KAAI;AACpB,IAAA,QACEA,sBAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAC,QAAQ,EAClB,KAAK,EAAC,QAAQ,EACd,GAAG,EAAC,QAAQ,EACZ,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,UAAU,EAAE,SAAS,CAAC,EAEzD,QAAA,EAAA,~~CAAAC~~,qBAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,aAAa,EAAE,UAAU,EAAE,aAAa,CAAC,EACnE,QAAA,EAAAA,qBAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,EAAA,QAAA,EAAG,IAAI,EAAA,CAAO,GAC7D,~~EAEND~~,sBAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,QAAQ,EAAC,GAAG,EAAC,OAAO,EAAC,KAAK,EAAC,QAAQ,EAAA,QAAA,EAAA,CAChD,OAAO,~~KACNC~~,qBAAC,CAAA,IAAI,EACH,EAAA,IAAI,EAAE,CAAC,EACP,MAAM,EAAE,GAAG,EACX,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,UAAU,EAAE,OAAO,CAAC,EAEtD,QAAA,EAAA,OAAO,EACH,CAAA,CACR,EAEA,UAAU,KACTA,qBAAA,CAAC,IAAI,EAAA,EACH,IAAI,EAAE,CAAC,EACP,MAAM,EAAE,GAAG,EACX,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,aAAa,EAAE,UAAU,EAAE,UAAU,CAAC,YAE5D,UAAU,EAAA,CACN,CACR,CAAA,EAAA,CACI,EAEN,aAAa,EAEb,eAAe,CAAA,EAAA,CACX,EACP;AACJ;;;;"}
1	+ {"version":3,"file":"empty-state.js","sources":["../../../../v1/components/empty-state/empty-state.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport { Flex } from \"../flex\";\nimport { Text } from \"../text\";\nimport styles from \"./empty-state.module.css\";\n\ntype classNameKeys =\n \| \"container\"\n \| \"iconContainer\"\n \| \"icon\"\n \| \"heading\"\n \| \"subHeading\";\n\ninterface EmptyStateProps {\n icon: React.ReactNode;\n heading?: React.ReactNode;\n subHeading?: React.ReactNode;\n primaryAction?: React.ReactNode;\n secondaryAction?: React.ReactNode;\n classNames?: Partial<Record<classNameKeys, string>>;\n variant?: \"empty1\" \| \"empty2\";\n}\n\nexport const EmptyState = ({\n icon,\n heading,\n subHeading,\n primaryAction,\n secondaryAction,\n classNames,\n variant = \"empty1\",\n}: EmptyStateProps) => {\n if (variant === \"empty2\") {\n return (\n <Flex\n align=\"center\"\n justify=\"center\"\n className={styles.emptyStatePage}\n >\n <Flex\n direction=\"column\"\n align=\"start\"\n gap=\"medium\"\n className={clsx(styles.emptyStateContent, classNames?.container)}\n >\n <div className={clsx(styles.iconContainer, classNames?.iconContainer)}>\n <div className={clsx(styles.icon, styles.iconLarge, classNames?.icon)}>{icon}</div>\n </div>\n \n {heading && (\n <Text\n size={5}\n weight={500}\n className={clsx(styles.headerText, classNames?.heading)}\n >\n {heading}\n </Text>\n )}\n\n {subHeading && (\n <Text\n size={4}\n weight={400}\n className={clsx(styles.subHeaderText, classNames?.subHeading)}\n >\n {subHeading}\n </Text>\n )}\n\n <Flex gap=\"medium\">\n {primaryAction}\n {secondaryAction}\n </Flex>\n </Flex>\n </Flex>\n );\n }\n\n\n\n return (\n <Flex\n direction=\"column\"\n align=\"center\"\n gap=\"medium\"\n className={clsx(styles.emptyState, classNames?.container)}\n >\n <div className={clsx(styles.iconContainer, classNames?.iconContainer)}>\n <div className={clsx(styles.icon, classNames?.icon)}>{icon}</div>\n </div>\n\n <Flex direction=\"column\" gap=\"small\" align=\"center\">\n {heading && (\n <Text\n size={5}\n weight={500}\n className={clsx(styles.headerText, classNames?.heading)}\n >\n {heading}\n </Text>\n )}\n\n {subHeading && (\n <Text\n size={4}\n weight={400}\n className={clsx(styles.subHeaderText, classNames?.subHeading)}\n >\n {subHeading}\n </Text>\n )}\n </Flex>\n\n {primaryAction}\n\n {secondaryAction}\n </Flex>\n );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/v1/components/empty-state/empty-state.module.css.cjs CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-var styles = {"emptyState":"empty-state-module_emptyState__3KNNK","iconContainer":"empty-state-module_iconContainer__mVbR-","icon":"empty-state-module_icon__91WkM","headerText":"empty-state-module_headerText__OiviM","subHeaderText":"empty-state-module_subHeaderText__dn22j"};
+var styles = {"emptyState":"empty-state-module_emptyState__3KNNK","iconContainer":"empty-state-module_iconContainer__mVbR-","icon":"empty-state-module_icon__91WkM","headerText":"empty-state-module_headerText__OiviM","subHeaderText":"empty-state-module_subHeaderText__dn22j","emptyStateContent":"empty-state-module_emptyStateContent__iC-e-","emptyStateLeft":"empty-state-module_emptyStateLeft__BJODL","iconLarge":"empty-state-module_iconLarge__fxqeP","actionContainer":"empty-state-module_actionContainer__LFHrF","emptyStatePage":"empty-state-module_emptyStatePage__czPW7"};
 exports.default = styles;
 //# sourceMappingURL=empty-state.module.css.cjs.map

package/dist/v1/components/empty-state/empty-state.module.css.js CHANGED Viewed

@@ -1,4 +1,4 @@
-var styles = {"emptyState":"empty-state-module_emptyState__3KNNK","iconContainer":"empty-state-module_iconContainer__mVbR-","icon":"empty-state-module_icon__91WkM","headerText":"empty-state-module_headerText__OiviM","subHeaderText":"empty-state-module_subHeaderText__dn22j"};
+var styles = {"emptyState":"empty-state-module_emptyState__3KNNK","iconContainer":"empty-state-module_iconContainer__mVbR-","icon":"empty-state-module_icon__91WkM","headerText":"empty-state-module_headerText__OiviM","subHeaderText":"empty-state-module_subHeaderText__dn22j","emptyStateContent":"empty-state-module_emptyStateContent__iC-e-","emptyStateLeft":"empty-state-module_emptyStateLeft__BJODL","iconLarge":"empty-state-module_iconLarge__fxqeP","actionContainer":"empty-state-module_actionContainer__LFHrF","emptyStatePage":"empty-state-module_emptyStatePage__czPW7"};
 export { styles as default };
 //# sourceMappingURL=empty-state.module.css.js.map

package/dist/v1/components/input-field/input-field.cjs CHANGED Viewed

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

package/dist/v1/components/input-field/input-field.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input-field.cjs","sources":["../../../../v1/components/input-field/input-field.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport clsx from \"clsx\";\nimport { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { InfoCircledIcon } from \"@radix-ui/react-icons\";\nimport { Tooltip } from \"../tooltip\";\n\nimport { Chip } from \"../chip\";\nimport styles from \"./input-field.module.css\";\n\n// Todo: Add a dropdown support\n\nconst inputWrapper = cva(styles.inputWrapper, {\n variants: {\n size: {\n small: styles[\"size-small\"],\n large: styles[\"size-large\"],\n }\n },\n defaultVariants: {\n size: \"large\",\n }\n});\n\nexport interface InputFieldProps\n extends Omit<ComponentPropsWithoutRef<\"input\">, \"error\" \| \"size\">,\n VariantProps<typeof inputWrapper> {\n label?: string;\n helperText?: string;\n error?: string;\n disabled?: boolean;\n leadingIcon?: ReactNode;\n trailingIcon?: ReactNode;\n optional?: boolean;\n prefix?: string;\n suffix?: string;\n width?: string \| number;\n chips?: Array<{ label: string; onRemove?: () => void }>;\n maxChipsVisible?: number;\n ref?: React.RefObject<HTMLInputElement>;\n infoTooltip?: string;\n}\n\nexport const InputField = ({ \n className,\n disabled,\n label,\n helperText,\n placeholder,\n error,\n leadingIcon,\n trailingIcon,\n optional,\n prefix,\n suffix,\n width,\n chips,\n maxChipsVisible = 2,\n ~~ref,\n~~ size,\n infoTooltip,\n ...props \n}~~: InputFieldProps~~) => {\n return (\n <div className={styles.container} style={{ width: width \|\| '100%' }}>\n {label && (\n <div className={styles.labelContainer}>\n <label className={clsx(styles.label, disabled && styles[\"label-disabled\"])}>\n {label}\n {optional && <span className={styles.optional}>(optional)</span>}\n </label>\n {infoTooltip && (\n <Tooltip message={infoTooltip} side=\"right\">\n <span className={styles.helpIcon}>\n <InfoCircledIcon />\n </span>\n </Tooltip>\n )}\n </div>\n )}\n <div \n className={clsx(\n inputWrapper({ size, className }),\n error && styles['input-error-wrapper'],\n disabled && styles['input-disabled-wrapper'],\n chips?.length && styles['has-chips']\n )}\n >\n {leadingIcon && <div className={styles['leading-icon']}>{leadingIcon}</div>}\n {prefix && <div className={styles.prefix}>{prefix}</div>}\n \n <div className={styles['chip-input-container']}>\n {chips?.slice(0, maxChipsVisible).map((chip, index) => (\n <Chip\n key={index}\n variant=\"outline\"\n isDismissible={!!chip.onRemove}\n onDismiss={chip.onRemove}\n className={styles.chip}\n >\n {chip.label}\n </Chip>\n ))}\n {chips && chips.length > maxChipsVisible && (\n <span className={styles['chip-overflow']}>\n +{chips.length - maxChipsVisible}\n </span>\n )}\n <input\n ref={ref}\n className={clsx(\n styles['input-field'],\n leadingIcon && styles['has-leading-icon'],\n trailingIcon && styles['has-trailing-icon'],\n prefix && styles['has-prefix'],\n suffix && styles['has-suffix'],\n error && styles['input-error'],\n disabled && styles['input-disabled'],\n className\n )}\n aria-invalid={!!error}\n placeholder={placeholder}\n disabled={disabled}\n {...props}\n />\n </div>\n \n {suffix && <div className={styles.suffix}>{suffix}</div>}\n {trailingIcon && <div className={styles['trailing-icon']}>{trailingIcon}</div>}\n </div>\n {(error \|\| helperText) && (\n <span \n className={clsx(\n styles['helper-text']~~, \~~n error && styles['helper-text-error'],\n disabled && styles['helper-text-disabled']\n )}\n >\n {error \|\| helperText}\n </span>\n )}\n </div>\n );\n};\n\nInputField.displayName = \"InputField\";"],"names":["cva","styles","_jsxs","clsx","_jsx","Tooltip","InfoCircledIcon","chip","Chip"],"mappings":"~~;;;;;;;;;;~~AASA;AAEA,MAAM,YAAY,GAAGA,SAAG,CAACC,yBAAM,CAAC,YAAY,EAAE;AAC5C,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,KAAK,EAAEA,yBAAM,CAAC,YAAY,CAAC;AAC3B,YAAA,KAAK,EAAEA,yBAAM,CAAC,YAAY,CAAC;AAC5B,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,OAAO;~~AACd~~,KAAA;AACF,CAAA,CAAC,CAAC;~~MAqBU~~,UAAU,~~GAAG~~,~~CAAC~~,~~EACzB~~,SAAS,EACT,QAAQ,EACR,KAAK,EACL,UAAU,EACV,WAAW,EACX,KAAK,EACL,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,MAAM,EACN,MAAM,EACN,KAAK,EACL,KAAK,EACL,eAAe,GAAG,CAAC,EACnB,~~GAAG,EACH,~~IAAI,EACJ,WAAW,EACX,GAAG,~~KAAK~~,~~EACQ~~,~~KAAI;AACpB~~,~~IAAA~~,~~QACEC~~,~~iCAAK~~,~~CAAA~~,~~KAAA~~,~~EAAA~~,~~EAAA~~,SAAS,~~EAAED~~,yBAAM,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,IAAI,MAAM,EAAE,~~EAAA~~,QAAA,EAAA,~~CAChE~~,KAAK,~~KACJC~~,~~2CAAK~~,SAAS,~~EAAED~~,yBAAM,CAAC,cAAc,~~aACnCC~~,~~iCAAO~~,~~CAAA~~,~~OAAA~~,~~EAAA~~,~~EAAA,~~SAAS,EAAEC,SAAI,~~CAACF~~,yBAAM,CAAC,KAAK,~~EAAE~~,QAAQ,IAAIA,yBAAM,CAAC,gBAAgB,CAAC,~~CAAC~~,~~EAAA~~,QAAA,EAAA,~~CACvE~~,KAAK,EACL,QAAQ,~~IAAIG~~,~~gCAAM~~,~~CAAA,MAAA,EAAA,EAAA,~~SAAS,~~EAAEH~~,yBAAM,CAAC,QAAQ,~~EAAmB~~,~~QAAA~~,EAAA,~~YAAA,EAAA,~~CAAA,~~CAAA,EAAA,CAC1D,~~EACP,WAAW,~~KACVG~~,~~gCAAC~~,~~CAAAC,~~eAAO,~~IAAC~~,OAAO,EAAE,WAAW,EAAE,IAAI,EAAC,OAAO,~~EAAA~~,QAAA,~~EACzCD~~,~~2CAAM~~,SAAS,~~EAAEH~~,yBAAM,CAAC,QAAQ,~~YAC9BG~~,~~gCAAC~~,~~CAAAE~~,8BAAe,~~KAAG~~,~~EACd~~,~~CAAA~~,~~EAAA~~,~~CACC~~,CACX,~~CACG~~,~~EAAA,CAAA,~~CACP,EACDJ,~~iCACE~~,~~CAAA,KAAA,EAAA,EAAA,~~SAAS,EAAEC,SAAI,CACb,YAAY,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,~~EACjC~~,KAAK,~~IAAIF~~,yBAAM,CAAC,qBAAqB,CAAC,EACtC,QAAQ,IAAIA,yBAAM,CAAC,wBAAwB,CAAC,EAC5C,KAAK,EAAE,MAAM,IAAIA,yBAAM,CAAC,WAAW,CAAC,CACrC,EAAA,QAAA,EAAA,CAEA,WAAW,~~IAAIG~~,~~gCAAA~~,~~CAAA,KAAA,EAAA,EAAK,~~SAAS,~~EAAEH~~,yBAAM,CAAC,cAAc,CAAC,~~YAAG~~,~~WAAW~~,EAAA,~~CAAO~~,~~EAC1E~~,MAAM,~~IAAIG~~,~~0CAAK~~,SAAS,~~EAAEH~~,yBAAM,CAAC,MAAM,~~YAAG~~,~~MAAM~~,~~EAAA~~,~~CAAO~~,~~EAExDC~~,~~iCAAK,~~CAAA,~~KAAA~~,~~EAAA~~,~~EAAA,~~SAAS,~~EAAED~~,yBAAM,CAAC,sBAAsB,CAAC,~~EAAA~~,QAAA,EAAA,~~CAC3C~~,KAAK,EAAE,KAAK,CAAC,CAAC,EAAE,eAAe,CAAC,CAAC,GAAG,CAAC,~~CAACM~~,MAAI,EAAE,KAAK,MAChDH,~~gCAAC~~,~~CAAAI,~~SAAI,~~IAEH~~,OAAO,EAAC,SAAS,EACjB,aAAa,EAAE,CAAC,CAACD,MAAI,CAAC,QAAQ,EAC9B,SAAS,EAAEA,MAAI,CAAC,QAAQ,EACxB,SAAS,~~EAAEN~~,yBAAM,CAAC,IAAI,~~YAErBM~~,MAAI,CAAC,KAAK,EANN,~~EAAA,~~KAAK,CAOL,CACR,CAAC,EACD,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,eAAe,KACtCL,~~iCAAM~~,CAAA,MAAA,EAAA,~~EAAA~~,SAAS,~~EAAED~~,yBAAM,CAAC,eAAe,CAAC,~~EAAA~~,~~QAAA,EAAA,CAAA,GAAA,EACpC,~~KAAK,CAAC,MAAM,GAAG,eAAe,~~CAAA~~,~~EAAA,CAC3B,~~CACR,~~EACDG~~,~~gCAAA~~,~~CAAA,OAAA,EAAA,EACE,~~GAAG,EAAE,GAAG,EACR,SAAS,EAAED,SAAI,~~CACbF~~,yBAAM,CAAC,aAAa,CAAC,EACrB,WAAW,IAAIA,yBAAM,CAAC,kBAAkB,CAAC,EACzC,YAAY,IAAIA,yBAAM,CAAC,mBAAmB,CAAC,EAC3C,MAAM,IAAIA,yBAAM,CAAC,YAAY,CAAC,EAC9B,MAAM,IAAIA,yBAAM,CAAC,YAAY,CAAC,EAC9B,KAAK,IAAIA,yBAAM,CAAC,aAAa,CAAC,EAC9B,QAAQ,IAAIA,yBAAM,CAAC,gBAAgB,CAAC,EACpC,SAAS,CACV,kBACa,CAAC,CAAC,KAAK,EACrB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,KACd,KAAK,EAAA,CACT,IACE,EAEL,MAAM,~~IAAIG~~,gCAAK,CAAA,KAAA,EAAA,EAAA,SAAS,~~EAAEH~~,yBAAM,CAAC,MAAM,EAAG,QAAA,EAAA,MAAM,GAAO,EACvD,YAAY,~~IAAIG~~,~~gCAAK~~,CAAA,KAAA,EAAA,~~EAAA~~,SAAS,~~EAAEH~~,yBAAM,CAAC,eAAe,CAAC,EAAA,QAAA,EAAG,YAAY,EAAO,CAAA,~~CAAA~~,~~EAAA~~,~~CAC1E,~~EACL,CAAC,KAAK,IAAI,UAAU,~~MACnBG~~,~~gCAAA~~,~~CAAA,MAAA,EAAA,EACE,~~SAAS,EAAED,SAAI,~~CACbF~~,yBAAM,CAAC,aAAa,CAAC,EACrB,KAAK,IAAIA,yBAAM,CAAC,mBAAmB,CAAC,EACpC,QAAQ,IAAIA,yBAAM,CAAC,sBAAsB,CAAC,CAC3C,~~EAAA~~,~~QAAA,EAEA,~~KAAK,IAAI,UAAU,~~GACf~~,CACR,~~CAAA~~,EAAA,~~CACG~~,EACN;AACJ,~~EAAE~~;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
1	+ {"version":3,"file":"input-field.cjs","sources":["../../../../v1/components/input-field/input-field.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport clsx from \"clsx\";\nimport { ComponentPropsWithoutRef, ReactNode, forwardRef } from \"react\";\nimport { InfoCircledIcon } from \"@radix-ui/react-icons\";\nimport { Tooltip } from \"../tooltip\";\n\nimport { Chip } from \"../chip\";\nimport styles from \"./input-field.module.css\";\n\n// Todo: Add a dropdown support\n\nconst inputWrapper = cva(styles.inputWrapper, {\n variants: {\n size: {\n small: styles[\"size-small\"],\n large: styles[\"size-large\"],\n },\n variant: {\n default: styles[\"variant-default\"],\n borderless: styles[\"variant-borderless\"],\n },\n },\n defaultVariants: {\n size: \"large\",\n variant: \"default\",\n },\n});\n\nexport interface InputFieldProps\n extends Omit<ComponentPropsWithoutRef<\"input\">, \"error\" \| \"size\">,\n VariantProps<typeof inputWrapper> {\n label?: string;\n helperText?: string;\n error?: string;\n disabled?: boolean;\n leadingIcon?: ReactNode;\n trailingIcon?: ReactNode;\n optional?: boolean;\n prefix?: string;\n suffix?: string;\n width?: string \| number;\n chips?: Array<{ label: string; onRemove?: () => void }>;\n maxChipsVisible?: number;\n ref?: React.RefObject<HTMLInputElement>;\n infoTooltip?: string;\n variant?: \"default\" \| \"borderless\";\n}\n\nexport const InputField = forwardRef<HTMLInputElement, InputFieldProps>(\n (\n {\n className,\n disabled,\n label,\n helperText,\n placeholder,\n error,\n leadingIcon,\n trailingIcon,\n optional,\n prefix,\n suffix,\n width,\n chips,\n maxChipsVisible = 2,\n size,\n infoTooltip,\n variant = \"default\",\n ...props\n },\n ref\n ) => {\n return (\n <div className={styles.container} style={{ width: width \|\| \"100%\" }}>\n {label && (\n <div className={styles.labelContainer}>\n <label\n className={clsx(\n styles.label,\n disabled && styles[\"label-disabled\"]\n )}\n >\n {label}\n {optional && <span className={styles.optional}>(optional)</span>}\n </label>\n {infoTooltip && (\n <Tooltip message={infoTooltip} side=\"right\">\n <span className={styles.helpIcon}>\n <InfoCircledIcon />\n </span>\n </Tooltip>\n )}\n </div>\n )}\n <div\n className={clsx(\n inputWrapper({ size, variant, className }),\n error && styles[\"input-error-wrapper\"],\n disabled && styles[\"input-disabled-wrapper\"],\n chips?.length && styles[\"has-chips\"]\n )}\n >\n {leadingIcon && (\n <div className={styles[\"leading-icon\"]}>{leadingIcon}</div>\n )}\n {prefix && <div className={styles.prefix}>{prefix}</div>}\n\n <div className={styles[\"chip-input-container\"]}>\n {chips?.slice(0, maxChipsVisible).map((chip, index) => (\n <Chip\n key={index}\n variant=\"outline\"\n isDismissible={!!chip.onRemove}\n onDismiss={chip.onRemove}\n className={styles.chip}\n >\n {chip.label}\n </Chip>\n ))}\n {chips && chips.length > maxChipsVisible && (\n <span className={styles[\"chip-overflow\"]}>\n +{chips.length - maxChipsVisible}\n </span>\n )}\n <input\n ref={ref}\n className={clsx(\n styles[\"input-field\"],\n leadingIcon && styles[\"has-leading-icon\"],\n trailingIcon && styles[\"has-trailing-icon\"],\n prefix && styles[\"has-prefix\"],\n suffix && styles[\"has-suffix\"],\n error && styles[\"input-error\"],\n disabled && styles[\"input-disabled\"],\n className\n )}\n aria-invalid={!!error}\n placeholder={placeholder}\n disabled={disabled}\n {...props}\n />\n </div>\n\n {suffix && <div className={styles.suffix}>{suffix}</div>}\n {trailingIcon && (\n <div className={styles[\"trailing-icon\"]}>{trailingIcon}</div>\n )}\n </div>\n {(error \|\| helperText) && (\n <span\n className={clsx(\n styles[\"helper-text\"],\n error && styles[\"helper-text-error\"],\n disabled && styles[\"helper-text-disabled\"]\n )}\n >\n {error \|\| helperText}\n </span>\n )}\n </div>\n );\n }\n);\n\nInputField.displayName = \"InputField\";\n"],"names":["cva","styles","forwardRef","_jsxs","clsx","_jsx","Tooltip","InfoCircledIcon","chip","Chip"],"mappings":";;;;;;;;;;;AASA;AAEA,MAAM,YAAY,GAAGA,SAAG,CAACC,yBAAM,CAAC,YAAY,EAAE;AAC5C,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,KAAK,EAAEA,yBAAM,CAAC,YAAY,CAAC;AAC3B,YAAA,KAAK,EAAEA,yBAAM,CAAC,YAAY,CAAC;AAC5B,SAAA;AACD,QAAA,OAAO,EAAE;AACP,YAAA,OAAO,EAAEA,yBAAM,CAAC,iBAAiB,CAAC;AAClC,YAAA,UAAU,EAAEA,yBAAM,CAAC,oBAAoB,CAAC;AACzC,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,OAAO;AACb,QAAA,OAAO,EAAE,SAAS;AACnB,KAAA;AACF,CAAA,CAAC,CAAC;AAsBU,MAAA,UAAU,GAAGC,gBAAU,CAClC,CACE,EACE,SAAS,EACT,QAAQ,EACR,KAAK,EACL,UAAU,EACV,WAAW,EACX,KAAK,EACL,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,MAAM,EACN,MAAM,EACN,KAAK,EACL,KAAK,EACL,eAAe,GAAG,CAAC,EACnB,IAAI,EACJ,WAAW,EACX,OAAO,GAAG,SAAS,EACnB,GAAG,KAAK,EACT,EACD,GAAG,KACD;IACF,QACEC,2CAAK,SAAS,EAAEF,yBAAM,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,IAAI,MAAM,EAAE,EAChE,QAAA,EAAA,CAAA,KAAK,KACJE,iCAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEF,yBAAM,CAAC,cAAc,EAAA,QAAA,EAAA,CACnCE,6CACE,SAAS,EAAEC,SAAI,CACbH,yBAAM,CAAC,KAAK,EACZ,QAAQ,IAAIA,yBAAM,CAAC,gBAAgB,CAAC,CACrC,EAEA,QAAA,EAAA,CAAA,KAAK,EACL,QAAQ,IAAII,2CAAM,SAAS,EAAEJ,yBAAM,CAAC,QAAQ,2BAAmB,CAC1D,EAAA,CAAA,EACP,WAAW,KACVI,iCAACC,eAAO,EAAA,EAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAC,OAAO,EACzC,QAAA,EAAAD,gCAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAEJ,yBAAM,CAAC,QAAQ,EAAA,QAAA,EAC9BI,iCAACE,8BAAe,EAAA,EAAA,CAAG,GACd,EACC,CAAA,CACX,IACG,CACP,EACDJ,2CACE,SAAS,EAAEC,SAAI,CACb,YAAY,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,EAC1C,KAAK,IAAIH,yBAAM,CAAC,qBAAqB,CAAC,EACtC,QAAQ,IAAIA,yBAAM,CAAC,wBAAwB,CAAC,EAC5C,KAAK,EAAE,MAAM,IAAIA,yBAAM,CAAC,WAAW,CAAC,CACrC,EAAA,QAAA,EAAA,CAEA,WAAW,KACVI,0CAAK,SAAS,EAAEJ,yBAAM,CAAC,cAAc,CAAC,EAAG,QAAA,EAAA,WAAW,GAAO,CAC5D,EACA,MAAM,IAAII,gCAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEJ,yBAAM,CAAC,MAAM,EAAA,QAAA,EAAG,MAAM,EAAO,CAAA,EAExDE,2CAAK,SAAS,EAAEF,yBAAM,CAAC,sBAAsB,CAAC,EAC3C,QAAA,EAAA,CAAA,KAAK,EAAE,KAAK,CAAC,CAAC,EAAE,eAAe,CAAC,CAAC,GAAG,CAAC,CAACO,MAAI,EAAE,KAAK,MAChDH,iCAACI,SAAI,EAAA,EAEH,OAAO,EAAC,SAAS,EACjB,aAAa,EAAE,CAAC,CAACD,MAAI,CAAC,QAAQ,EAC9B,SAAS,EAAEA,MAAI,CAAC,QAAQ,EACxB,SAAS,EAAEP,yBAAM,CAAC,IAAI,EAErB,QAAA,EAAAO,MAAI,CAAC,KAAK,EAAA,EANN,KAAK,CAOL,CACR,CAAC,EACD,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,eAAe,KACtCL,iCAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAEF,yBAAM,CAAC,eAAe,CAAC,kBACpC,KAAK,CAAC,MAAM,GAAG,eAAe,IAC3B,CACR,EACDI,4CACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAED,SAAI,CACbH,yBAAM,CAAC,aAAa,CAAC,EACrB,WAAW,IAAIA,yBAAM,CAAC,kBAAkB,CAAC,EACzC,YAAY,IAAIA,yBAAM,CAAC,mBAAmB,CAAC,EAC3C,MAAM,IAAIA,yBAAM,CAAC,YAAY,CAAC,EAC9B,MAAM,IAAIA,yBAAM,CAAC,YAAY,CAAC,EAC9B,KAAK,IAAIA,yBAAM,CAAC,aAAa,CAAC,EAC9B,QAAQ,IAAIA,yBAAM,CAAC,gBAAgB,CAAC,EACpC,SAAS,CACV,kBACa,CAAC,CAAC,KAAK,EACrB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,KACd,KAAK,EAAA,CACT,IACE,EAEL,MAAM,IAAII,gCAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEJ,yBAAM,CAAC,MAAM,EAAG,QAAA,EAAA,MAAM,GAAO,EACvD,YAAY,KACXI,gCAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEJ,yBAAM,CAAC,eAAe,CAAC,EAAA,QAAA,EAAG,YAAY,EAAO,CAAA,CAC9D,IACG,EACL,CAAC,KAAK,IAAI,UAAU,MACnBI,2CACE,SAAS,EAAED,SAAI,CACbH,yBAAM,CAAC,aAAa,CAAC,EACrB,KAAK,IAAIA,yBAAM,CAAC,mBAAmB,CAAC,EACpC,QAAQ,IAAIA,yBAAM,CAAC,sBAAsB,CAAC,CAC3C,YAEA,KAAK,IAAI,UAAU,EACf,CAAA,CACR,CACG,EAAA,CAAA,EACN;AACJ,CAAC,EACD;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}

package/dist/v1/components/input-field/input-field.d.ts CHANGED Viewed

@@ -2,6 +2,7 @@ import { type VariantProps } from "class-variance-authority";
 import { ComponentPropsWithoutRef, ReactNode } from "react";
 declare const inputWrapper: (props?: ({
     size?: "small" | "large" | null | undefined;
+    variant?: "default" | "borderless" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export interface InputFieldProps extends Omit<ComponentPropsWithoutRef<"input">, "error" | "size">, VariantProps<typeof inputWrapper> {
     label?: string;
@@ -21,10 +22,8 @@ export interface InputFieldProps extends Omit<ComponentPropsWithoutRef<"input">,
     maxChipsVisible?: number;
     ref?: React.RefObject<HTMLInputElement>;
     infoTooltip?: string;
+    variant?: "default" | "borderless";
 }
-export declare const InputField: {
-    ({ className, disabled, label, helperText, placeholder, error, leadingIcon, trailingIcon, optional, prefix, suffix, width, chips, maxChipsVisible, ref, size, infoTooltip, ...props }: InputFieldProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const InputField: import("react").ForwardRefExoticComponent<Omit<InputFieldProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export {};
 //# sourceMappingURL=input-field.d.ts.map

package/dist/v1/components/input-field/input-field.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input-field.d.ts","sourceRoot":"","sources":["../../../../v1/components/input-field/input-field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,EAAE,wBAAwB,EAAE,SAAS,~~EAAE~~,MAAM,OAAO,CAAC;~~AAS5D~~,QAAA,MAAM,YAAY~~;;mFAUhB~~,CAAC;AAEH,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,wBAAwB,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,EAC/D,YAAY,CAAC,OAAO,YAAY,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAC;IACxD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;~~CACtB~~;AAED,eAAO,MAAM,UAAU~~;2LAmBpB~~,~~eAAe;;CAiFjB~~,CAAC"}
1	+ {"version":3,"file":"input-field.d.ts","sourceRoot":"","sources":["../../../../v1/components/input-field/input-field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,EAAE,wBAAwB,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AASxE,QAAA,MAAM,YAAY;;;mFAehB,CAAC;AAEH,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,wBAAwB,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,EAC/D,YAAY,CAAC,OAAO,YAAY,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAC;IACxD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC;CACpC;AAED,eAAO,MAAM,UAAU,2HAkHtB,CAAC"}

package/dist/v1/components/input-field/input-field.js CHANGED Viewed

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

package/dist/v1/components/input-field/input-field.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input-field.js","sources":["../../../../v1/components/input-field/input-field.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport clsx from \"clsx\";\nimport { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { InfoCircledIcon } from \"@radix-ui/react-icons\";\nimport { Tooltip } from \"../tooltip\";\n\nimport { Chip } from \"../chip\";\nimport styles from \"./input-field.module.css\";\n\n// Todo: Add a dropdown support\n\nconst inputWrapper = cva(styles.inputWrapper, {\n variants: {\n size: {\n small: styles[\"size-small\"],\n large: styles[\"size-large\"],\n }\n },\n defaultVariants: {\n size: \"large\",\n }\n});\n\nexport interface InputFieldProps\n extends Omit<ComponentPropsWithoutRef<\"input\">, \"error\" \| \"size\">,\n VariantProps<typeof inputWrapper> {\n label?: string;\n helperText?: string;\n error?: string;\n disabled?: boolean;\n leadingIcon?: ReactNode;\n trailingIcon?: ReactNode;\n optional?: boolean;\n prefix?: string;\n suffix?: string;\n width?: string \| number;\n chips?: Array<{ label: string; onRemove?: () => void }>;\n maxChipsVisible?: number;\n ref?: React.RefObject<HTMLInputElement>;\n infoTooltip?: string;\n}\n\nexport const InputField = ({ \n className,\n disabled,\n label,\n helperText,\n placeholder,\n error,\n leadingIcon,\n trailingIcon,\n optional,\n prefix,\n suffix,\n width,\n chips,\n maxChipsVisible = 2,\n ~~ref,\n~~ size,\n infoTooltip,\n ...props \n}~~: InputFieldProps~~) => {\n return (\n <div className={styles.container} style={{ width: width \|\| '100%' }}>\n {label && (\n <div className={styles.labelContainer}>\n <label className={clsx(styles.label, disabled && styles[\"label-disabled\"])}>\n {label}\n {optional && <span className={styles.optional}>(optional)</span>}\n </label>\n {infoTooltip && (\n <Tooltip message={infoTooltip} side=\"right\">\n <span className={styles.helpIcon}>\n <InfoCircledIcon />\n </span>\n </Tooltip>\n )}\n </div>\n )}\n <div \n className={clsx(\n inputWrapper({ size, className }),\n error && styles['input-error-wrapper'],\n disabled && styles['input-disabled-wrapper'],\n chips?.length && styles['has-chips']\n )}\n >\n {leadingIcon && <div className={styles['leading-icon']}>{leadingIcon}</div>}\n {prefix && <div className={styles.prefix}>{prefix}</div>}\n \n <div className={styles['chip-input-container']}>\n {chips?.slice(0, maxChipsVisible).map((chip, index) => (\n <Chip\n key={index}\n variant=\"outline\"\n isDismissible={!!chip.onRemove}\n onDismiss={chip.onRemove}\n className={styles.chip}\n >\n {chip.label}\n </Chip>\n ))}\n {chips && chips.length > maxChipsVisible && (\n <span className={styles['chip-overflow']}>\n +{chips.length - maxChipsVisible}\n </span>\n )}\n <input\n ref={ref}\n className={clsx(\n styles['input-field'],\n leadingIcon && styles['has-leading-icon'],\n trailingIcon && styles['has-trailing-icon'],\n prefix && styles['has-prefix'],\n suffix && styles['has-suffix'],\n error && styles['input-error'],\n disabled && styles['input-disabled'],\n className\n )}\n aria-invalid={!!error}\n placeholder={placeholder}\n disabled={disabled}\n {...props}\n />\n </div>\n \n {suffix && <div className={styles.suffix}>{suffix}</div>}\n {trailingIcon && <div className={styles['trailing-icon']}>{trailingIcon}</div>}\n </div>\n {(error \|\| helperText) && (\n <span \n className={clsx(\n styles['helper-text']~~, \~~n error && styles['helper-text-error'],\n disabled && styles['helper-text-disabled']\n )}\n >\n {error \|\| helperText}\n </span>\n )}\n </div>\n );\n};\n\nInputField.displayName = \"InputField\";"],"names":["_jsxs","_jsx"],"mappings":"~~;;;;;;;;~~AASA;AAEA,MAAM,YAAY,GAAG,GAAG,CAAC,MAAM,CAAC,YAAY,EAAE;AAC5C,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,KAAK,EAAE,MAAM,CAAC,YAAY,CAAC;AAC3B,YAAA,KAAK,EAAE,MAAM,CAAC,YAAY,CAAC;AAC5B,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,OAAO;~~AACd~~,KAAA;AACF,CAAA,CAAC,CAAC;~~MAqBU~~,UAAU,GAAG,~~CAAC~~,~~EACzB~~,SAAS,EACT,QAAQ,EACR,KAAK,EACL,UAAU,EACV,WAAW,EACX,KAAK,EACL,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,MAAM,EACN,MAAM,EACN,KAAK,EACL,KAAK,EACL,eAAe,GAAG,CAAC,EACnB,~~GAAG,EACH,~~IAAI,EACJ,WAAW,EACX,GAAG,~~KAAK~~,~~EACQ~~,~~KAAI;AACpB~~,~~IAAA~~,~~QACEA~~,~~sBAAK~~,~~CAAA~~,~~KAAA~~,~~EAAA~~,~~EAAA~~,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,IAAI,MAAM,EAAE,~~EAAA~~,QAAA,EAAA,~~CAChE~~,KAAK,KACJA,~~gCAAK~~,SAAS,EAAE,MAAM,CAAC,cAAc,~~aACnCA~~,~~sBAAO~~,~~CAAA~~,~~OAAA~~,~~EAAA~~,~~EAAA,~~SAAS,EAAE,IAAI,~~CAAC~~,MAAM,CAAC,KAAK,~~EAAE~~,QAAQ,IAAI,MAAM,CAAC,gBAAgB,CAAC,~~CAAC~~,~~EAAA~~,QAAA,EAAA,~~CACvE~~,KAAK,EACL,QAAQ,IAAIC,~~qBAAM~~,~~CAAA,MAAA,EAAA,EAAA,~~SAAS,EAAE,MAAM,CAAC,QAAQ,~~EAAmB~~,~~QAAA~~,EAAA,~~YAAA,EAAA,~~CAAA,~~CAAA,EAAA,CAC1D,~~EACP,WAAW,KACVA,~~qBAAC~~,~~CAAA,~~OAAO,~~IAAC~~,OAAO,EAAE,WAAW,EAAE,IAAI,EAAC,OAAO,~~EAAA~~,QAAA,~~EACzCA~~,~~gCAAM~~,SAAS,EAAE,MAAM,CAAC,QAAQ,~~YAC9BA~~,~~qBAAC~~,~~CAAA~~,eAAe,~~KAAG~~,~~EACd~~,~~CAAA~~,~~EAAA~~,~~CACC~~,CACX,~~CACG~~,~~EAAA,CAAA,~~CACP,EACDD,~~sBACE~~,~~CAAA,KAAA,EAAA,EAAA,~~SAAS,EAAE,IAAI,CACb,YAAY,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,~~EACjC~~,KAAK,IAAI,MAAM,CAAC,qBAAqB,CAAC,EACtC,QAAQ,IAAI,MAAM,CAAC,wBAAwB,CAAC,EAC5C,KAAK,EAAE,MAAM,IAAI,MAAM,CAAC,WAAW,CAAC,CACrC,EAAA,QAAA,EAAA,CAEA,WAAW,~~IAAIC~~,~~qBAAA,CAAA,KAAA,EAAA,EAAK,~~SAAS,EAAE,MAAM,CAAC,cAAc,CAAC,~~YAAG~~,~~WAAW~~,EAAA,~~CAAO~~,~~EAC1E~~,MAAM,IAAIA~~,+BAAK~~,SAAS,EAAE,MAAM,CAAC,MAAM,~~YAAG~~,~~MAAM~~,~~EAAA~~,~~CAAO~~,~~EAExDD~~,~~sBAAK,~~CAAA,~~KAAA~~,~~EAAA~~,~~EAAA,~~SAAS,EAAE,MAAM,CAAC,sBAAsB,CAAC,~~EAAA~~,QAAA,EAAA,~~CAC3C~~,KAAK,EAAE,KAAK,CAAC,CAAC,EAAE,eAAe,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,MAChDC,~~qBAAC~~,~~CAAA,~~IAAI,~~IAEH~~,OAAO,EAAC,SAAS,EACjB,aAAa,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,EAC9B,SAAS,EAAE,IAAI,CAAC,QAAQ,EACxB,SAAS,EAAE,MAAM,CAAC,IAAI,~~YAErB~~,IAAI,CAAC,KAAK,EANN,~~EAAA,~~KAAK,CAOL,CACR,CAAC,EACD,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,eAAe,KACtCD,~~sBAAM~~,CAAA,MAAA,EAAA,~~EAAA~~,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,~~EAAA~~,~~QAAA,EAAA,CAAA,GAAA,EACpC,~~KAAK,CAAC,MAAM,GAAG,eAAe,~~CAAA~~,~~EAAA,CAC3B,~~CACR,EACDC,~~qBAAA~~,~~CAAA,OAAA,EAAA,EACE,~~GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,aAAa,CAAC,EACrB,WAAW,IAAI,MAAM,CAAC,kBAAkB,CAAC,EACzC,YAAY,IAAI,MAAM,CAAC,mBAAmB,CAAC,EAC3C,MAAM,IAAI,MAAM,CAAC,YAAY,CAAC,EAC9B,MAAM,IAAI,MAAM,CAAC,YAAY,CAAC,EAC9B,KAAK,IAAI,MAAM,CAAC,aAAa,CAAC,EAC9B,QAAQ,IAAI,MAAM,CAAC,gBAAgB,CAAC,EACpC,SAAS,CACV,kBACa,CAAC,CAAC,KAAK,EACrB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,KACd,KAAK,EAAA,CACT,IACE,EAEL,MAAM,IAAIA,qBAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,MAAM,EAAG,QAAA,EAAA,MAAM,GAAO,EACvD,YAAY,~~IAAIA~~,~~qBAAK~~,CAAA,KAAA,EAAA,~~EAAA~~,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,EAAA,QAAA,EAAG,YAAY,EAAO,CAAA,~~CAAA~~,~~EAAA~~,~~CAC1E,~~EACL,CAAC,KAAK,IAAI,UAAU,MACnBA,~~qBAAA~~,~~CAAA,MAAA,EAAA,EACE,~~SAAS,EAAE,IAAI,CACb,MAAM,CAAC,aAAa,CAAC,EACrB,KAAK,IAAI,MAAM,CAAC,mBAAmB,CAAC,EACpC,QAAQ,IAAI,MAAM,CAAC,sBAAsB,CAAC,CAC3C,~~EAAA~~,~~QAAA,EAEA,~~KAAK,IAAI,UAAU,~~GACf~~,CACR,~~CAAA~~,EAAA,~~CACG~~,EACN;AACJ,~~EAAE~~;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
1	+ {"version":3,"file":"input-field.js","sources":["../../../../v1/components/input-field/input-field.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport clsx from \"clsx\";\nimport { ComponentPropsWithoutRef, ReactNode, forwardRef } from \"react\";\nimport { InfoCircledIcon } from \"@radix-ui/react-icons\";\nimport { Tooltip } from \"../tooltip\";\n\nimport { Chip } from \"../chip\";\nimport styles from \"./input-field.module.css\";\n\n// Todo: Add a dropdown support\n\nconst inputWrapper = cva(styles.inputWrapper, {\n variants: {\n size: {\n small: styles[\"size-small\"],\n large: styles[\"size-large\"],\n },\n variant: {\n default: styles[\"variant-default\"],\n borderless: styles[\"variant-borderless\"],\n },\n },\n defaultVariants: {\n size: \"large\",\n variant: \"default\",\n },\n});\n\nexport interface InputFieldProps\n extends Omit<ComponentPropsWithoutRef<\"input\">, \"error\" \| \"size\">,\n VariantProps<typeof inputWrapper> {\n label?: string;\n helperText?: string;\n error?: string;\n disabled?: boolean;\n leadingIcon?: ReactNode;\n trailingIcon?: ReactNode;\n optional?: boolean;\n prefix?: string;\n suffix?: string;\n width?: string \| number;\n chips?: Array<{ label: string; onRemove?: () => void }>;\n maxChipsVisible?: number;\n ref?: React.RefObject<HTMLInputElement>;\n infoTooltip?: string;\n variant?: \"default\" \| \"borderless\";\n}\n\nexport const InputField = forwardRef<HTMLInputElement, InputFieldProps>(\n (\n {\n className,\n disabled,\n label,\n helperText,\n placeholder,\n error,\n leadingIcon,\n trailingIcon,\n optional,\n prefix,\n suffix,\n width,\n chips,\n maxChipsVisible = 2,\n size,\n infoTooltip,\n variant = \"default\",\n ...props\n },\n ref\n ) => {\n return (\n <div className={styles.container} style={{ width: width \|\| \"100%\" }}>\n {label && (\n <div className={styles.labelContainer}>\n <label\n className={clsx(\n styles.label,\n disabled && styles[\"label-disabled\"]\n )}\n >\n {label}\n {optional && <span className={styles.optional}>(optional)</span>}\n </label>\n {infoTooltip && (\n <Tooltip message={infoTooltip} side=\"right\">\n <span className={styles.helpIcon}>\n <InfoCircledIcon />\n </span>\n </Tooltip>\n )}\n </div>\n )}\n <div\n className={clsx(\n inputWrapper({ size, variant, className }),\n error && styles[\"input-error-wrapper\"],\n disabled && styles[\"input-disabled-wrapper\"],\n chips?.length && styles[\"has-chips\"]\n )}\n >\n {leadingIcon && (\n <div className={styles[\"leading-icon\"]}>{leadingIcon}</div>\n )}\n {prefix && <div className={styles.prefix}>{prefix}</div>}\n\n <div className={styles[\"chip-input-container\"]}>\n {chips?.slice(0, maxChipsVisible).map((chip, index) => (\n <Chip\n key={index}\n variant=\"outline\"\n isDismissible={!!chip.onRemove}\n onDismiss={chip.onRemove}\n className={styles.chip}\n >\n {chip.label}\n </Chip>\n ))}\n {chips && chips.length > maxChipsVisible && (\n <span className={styles[\"chip-overflow\"]}>\n +{chips.length - maxChipsVisible}\n </span>\n )}\n <input\n ref={ref}\n className={clsx(\n styles[\"input-field\"],\n leadingIcon && styles[\"has-leading-icon\"],\n trailingIcon && styles[\"has-trailing-icon\"],\n prefix && styles[\"has-prefix\"],\n suffix && styles[\"has-suffix\"],\n error && styles[\"input-error\"],\n disabled && styles[\"input-disabled\"],\n className\n )}\n aria-invalid={!!error}\n placeholder={placeholder}\n disabled={disabled}\n {...props}\n />\n </div>\n\n {suffix && <div className={styles.suffix}>{suffix}</div>}\n {trailingIcon && (\n <div className={styles[\"trailing-icon\"]}>{trailingIcon}</div>\n )}\n </div>\n {(error \|\| helperText) && (\n <span\n className={clsx(\n styles[\"helper-text\"],\n error && styles[\"helper-text-error\"],\n disabled && styles[\"helper-text-disabled\"]\n )}\n >\n {error \|\| helperText}\n </span>\n )}\n </div>\n );\n }\n);\n\nInputField.displayName = \"InputField\";\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/v1/components/input-field/input-field.module.css.cjs CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-var styles = {"container":"input-field-module_container__EO1UE","label":"input-field-module_label__FIn-3","label-disabled":"input-field-module_label-disabled__YTPfz","inputWrapper":"input-field-module_inputWrapper__rZaqO","input-error-wrapper":"input-field-module_input-error-wrapper__xaNft","input-disabled-wrapper":"input-field-module_input-disabled-wrapper__szNYx","leading-icon":"input-field-module_leading-icon__J2Bif","trailing-icon":"input-field-module_trailing-icon__dNS8s","input-field":"input-field-module_input-field__M-gOb","input-default":"input-field-module_input-default__mI0I1","input-disabled":"input-field-module_input-disabled__Wpj4W","helper-text":"input-field-module_helper-text__PclGf","helper-text-error":"input-field-module_helper-text-error__1NSM-","helper-text-disabled":"input-field-module_helper-text-disabled__QcIBu","has-leading-icon":"input-field-module_has-leading-icon__Yxj6I","has-trailing-icon":"input-field-module_has-trailing-icon__uA7mP","optional":"input-field-module_optional__awrgj","has-chips":"input-field-module_has-chips__OvxNF","chip":"input-field-module_chip__Z2zua","chip-input-container":"input-field-module_chip-input-container__FJsHY","size-large":"input-field-module_size-large__nA2yK","size-small":"input-field-module_size-small__FFwSX","chip-overflow":"input-field-module_chip-overflow__n9kta","prefix":"input-field-module_prefix__WBsMj","suffix":"input-field-module_suffix__LiSQ0","has-prefix":"input-field-module_has-prefix__wV726","has-suffix":"input-field-module_has-suffix__UgqC6","labelContainer":"input-field-module_labelContainer__80FMe","helpIcon":"input-field-module_helpIcon__s8XKN","label___disabled":"input-field-module_label-disabled__YTPfz","input___error___wrapper":"input-field-module_input-error-wrapper__xaNft","input___disabled___wrapper":"input-field-module_input-disabled-wrapper__szNYx","leading___icon":"input-field-module_leading-icon__J2Bif","trailing___icon":"input-field-module_trailing-icon__dNS8s","input___field":"input-field-module_input-field__M-gOb","input___default":"input-field-module_input-default__mI0I1","input___disabled":"input-field-module_input-disabled__Wpj4W","helper___text":"input-field-module_helper-text__PclGf","helper___text___error":"input-field-module_helper-text-error__1NSM-","helper___text___disabled":"input-field-module_helper-text-disabled__QcIBu","has___leading___icon":"input-field-module_has-leading-icon__Yxj6I","has___trailing___icon":"input-field-module_has-trailing-icon__uA7mP","has___chips":"input-field-module_has-chips__OvxNF","chip___input___container":"input-field-module_chip-input-container__FJsHY","size___large":"input-field-module_size-large__nA2yK","size___small":"input-field-module_size-small__FFwSX","chip___overflow":"input-field-module_chip-overflow__n9kta","has___prefix":"input-field-module_has-prefix__wV726","has___suffix":"input-field-module_has-suffix__UgqC6"};
+var styles = {"container":"input-field-module_container__EO1UE","label":"input-field-module_label__FIn-3","label-disabled":"input-field-module_label-disabled__YTPfz","inputWrapper":"input-field-module_inputWrapper__rZaqO","input-error-wrapper":"input-field-module_input-error-wrapper__xaNft","input-disabled-wrapper":"input-field-module_input-disabled-wrapper__szNYx","leading-icon":"input-field-module_leading-icon__J2Bif","trailing-icon":"input-field-module_trailing-icon__dNS8s","input-field":"input-field-module_input-field__M-gOb","input-default":"input-field-module_input-default__mI0I1","input-disabled":"input-field-module_input-disabled__Wpj4W","helper-text":"input-field-module_helper-text__PclGf","helper-text-error":"input-field-module_helper-text-error__1NSM-","helper-text-disabled":"input-field-module_helper-text-disabled__QcIBu","has-leading-icon":"input-field-module_has-leading-icon__Yxj6I","has-trailing-icon":"input-field-module_has-trailing-icon__uA7mP","optional":"input-field-module_optional__awrgj","has-chips":"input-field-module_has-chips__OvxNF","chip":"input-field-module_chip__Z2zua","chip-input-container":"input-field-module_chip-input-container__FJsHY","size-large":"input-field-module_size-large__nA2yK","size-small":"input-field-module_size-small__FFwSX","chip-overflow":"input-field-module_chip-overflow__n9kta","prefix":"input-field-module_prefix__WBsMj","suffix":"input-field-module_suffix__LiSQ0","has-prefix":"input-field-module_has-prefix__wV726","has-suffix":"input-field-module_has-suffix__UgqC6","labelContainer":"input-field-module_labelContainer__80FMe","helpIcon":"input-field-module_helpIcon__s8XKN","variant-borderless":"input-field-module_variant-borderless__D9VpD","label___disabled":"input-field-module_label-disabled__YTPfz","input___error___wrapper":"input-field-module_input-error-wrapper__xaNft","input___disabled___wrapper":"input-field-module_input-disabled-wrapper__szNYx","leading___icon":"input-field-module_leading-icon__J2Bif","trailing___icon":"input-field-module_trailing-icon__dNS8s","input___field":"input-field-module_input-field__M-gOb","input___default":"input-field-module_input-default__mI0I1","input___disabled":"input-field-module_input-disabled__Wpj4W","helper___text":"input-field-module_helper-text__PclGf","helper___text___error":"input-field-module_helper-text-error__1NSM-","helper___text___disabled":"input-field-module_helper-text-disabled__QcIBu","has___leading___icon":"input-field-module_has-leading-icon__Yxj6I","has___trailing___icon":"input-field-module_has-trailing-icon__uA7mP","has___chips":"input-field-module_has-chips__OvxNF","chip___input___container":"input-field-module_chip-input-container__FJsHY","size___large":"input-field-module_size-large__nA2yK","size___small":"input-field-module_size-small__FFwSX","chip___overflow":"input-field-module_chip-overflow__n9kta","has___prefix":"input-field-module_has-prefix__wV726","has___suffix":"input-field-module_has-suffix__UgqC6","variant___borderless":"input-field-module_variant-borderless__D9VpD"};
 exports.default = styles;
 //# sourceMappingURL=input-field.module.css.cjs.map

package/dist/v1/components/input-field/input-field.module.css.js CHANGED Viewed

@@ -1,4 +1,4 @@
-var styles = {"container":"input-field-module_container__EO1UE","label":"input-field-module_label__FIn-3","label-disabled":"input-field-module_label-disabled__YTPfz","inputWrapper":"input-field-module_inputWrapper__rZaqO","input-error-wrapper":"input-field-module_input-error-wrapper__xaNft","input-disabled-wrapper":"input-field-module_input-disabled-wrapper__szNYx","leading-icon":"input-field-module_leading-icon__J2Bif","trailing-icon":"input-field-module_trailing-icon__dNS8s","input-field":"input-field-module_input-field__M-gOb","input-default":"input-field-module_input-default__mI0I1","input-disabled":"input-field-module_input-disabled__Wpj4W","helper-text":"input-field-module_helper-text__PclGf","helper-text-error":"input-field-module_helper-text-error__1NSM-","helper-text-disabled":"input-field-module_helper-text-disabled__QcIBu","has-leading-icon":"input-field-module_has-leading-icon__Yxj6I","has-trailing-icon":"input-field-module_has-trailing-icon__uA7mP","optional":"input-field-module_optional__awrgj","has-chips":"input-field-module_has-chips__OvxNF","chip":"input-field-module_chip__Z2zua","chip-input-container":"input-field-module_chip-input-container__FJsHY","size-large":"input-field-module_size-large__nA2yK","size-small":"input-field-module_size-small__FFwSX","chip-overflow":"input-field-module_chip-overflow__n9kta","prefix":"input-field-module_prefix__WBsMj","suffix":"input-field-module_suffix__LiSQ0","has-prefix":"input-field-module_has-prefix__wV726","has-suffix":"input-field-module_has-suffix__UgqC6","labelContainer":"input-field-module_labelContainer__80FMe","helpIcon":"input-field-module_helpIcon__s8XKN","label___disabled":"input-field-module_label-disabled__YTPfz","input___error___wrapper":"input-field-module_input-error-wrapper__xaNft","input___disabled___wrapper":"input-field-module_input-disabled-wrapper__szNYx","leading___icon":"input-field-module_leading-icon__J2Bif","trailing___icon":"input-field-module_trailing-icon__dNS8s","input___field":"input-field-module_input-field__M-gOb","input___default":"input-field-module_input-default__mI0I1","input___disabled":"input-field-module_input-disabled__Wpj4W","helper___text":"input-field-module_helper-text__PclGf","helper___text___error":"input-field-module_helper-text-error__1NSM-","helper___text___disabled":"input-field-module_helper-text-disabled__QcIBu","has___leading___icon":"input-field-module_has-leading-icon__Yxj6I","has___trailing___icon":"input-field-module_has-trailing-icon__uA7mP","has___chips":"input-field-module_has-chips__OvxNF","chip___input___container":"input-field-module_chip-input-container__FJsHY","size___large":"input-field-module_size-large__nA2yK","size___small":"input-field-module_size-small__FFwSX","chip___overflow":"input-field-module_chip-overflow__n9kta","has___prefix":"input-field-module_has-prefix__wV726","has___suffix":"input-field-module_has-suffix__UgqC6"};
+var styles = {"container":"input-field-module_container__EO1UE","label":"input-field-module_label__FIn-3","label-disabled":"input-field-module_label-disabled__YTPfz","inputWrapper":"input-field-module_inputWrapper__rZaqO","input-error-wrapper":"input-field-module_input-error-wrapper__xaNft","input-disabled-wrapper":"input-field-module_input-disabled-wrapper__szNYx","leading-icon":"input-field-module_leading-icon__J2Bif","trailing-icon":"input-field-module_trailing-icon__dNS8s","input-field":"input-field-module_input-field__M-gOb","input-default":"input-field-module_input-default__mI0I1","input-disabled":"input-field-module_input-disabled__Wpj4W","helper-text":"input-field-module_helper-text__PclGf","helper-text-error":"input-field-module_helper-text-error__1NSM-","helper-text-disabled":"input-field-module_helper-text-disabled__QcIBu","has-leading-icon":"input-field-module_has-leading-icon__Yxj6I","has-trailing-icon":"input-field-module_has-trailing-icon__uA7mP","optional":"input-field-module_optional__awrgj","has-chips":"input-field-module_has-chips__OvxNF","chip":"input-field-module_chip__Z2zua","chip-input-container":"input-field-module_chip-input-container__FJsHY","size-large":"input-field-module_size-large__nA2yK","size-small":"input-field-module_size-small__FFwSX","chip-overflow":"input-field-module_chip-overflow__n9kta","prefix":"input-field-module_prefix__WBsMj","suffix":"input-field-module_suffix__LiSQ0","has-prefix":"input-field-module_has-prefix__wV726","has-suffix":"input-field-module_has-suffix__UgqC6","labelContainer":"input-field-module_labelContainer__80FMe","helpIcon":"input-field-module_helpIcon__s8XKN","variant-borderless":"input-field-module_variant-borderless__D9VpD","label___disabled":"input-field-module_label-disabled__YTPfz","input___error___wrapper":"input-field-module_input-error-wrapper__xaNft","input___disabled___wrapper":"input-field-module_input-disabled-wrapper__szNYx","leading___icon":"input-field-module_leading-icon__J2Bif","trailing___icon":"input-field-module_trailing-icon__dNS8s","input___field":"input-field-module_input-field__M-gOb","input___default":"input-field-module_input-default__mI0I1","input___disabled":"input-field-module_input-disabled__Wpj4W","helper___text":"input-field-module_helper-text__PclGf","helper___text___error":"input-field-module_helper-text-error__1NSM-","helper___text___disabled":"input-field-module_helper-text-disabled__QcIBu","has___leading___icon":"input-field-module_has-leading-icon__Yxj6I","has___trailing___icon":"input-field-module_has-trailing-icon__uA7mP","has___chips":"input-field-module_has-chips__OvxNF","chip___input___container":"input-field-module_chip-input-container__FJsHY","size___large":"input-field-module_size-large__nA2yK","size___small":"input-field-module_size-small__FFwSX","chip___overflow":"input-field-module_chip-overflow__n9kta","has___prefix":"input-field-module_has-prefix__wV726","has___suffix":"input-field-module_has-suffix__UgqC6","variant___borderless":"input-field-module_variant-borderless__D9VpD"};
 export { styles as default };
 //# sourceMappingURL=input-field.module.css.js.map

package/dist/v1/components/search/search.cjs CHANGED Viewed

@@ -2,24 +2,20 @@
 var jsxRuntime = require('../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.cjs');
 var reactIcons_esm = require('../../node_modules/.pnpm/@radix-ui_react-icons@1.3.0_react@18.2.0/node_modules/@radix-ui/react-icons/dist/react-icons.esm.cjs');
-var index = require('../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.cjs');
-var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
+var inputField = require('../input-field/input-field.cjs');
+var iconButton = require('../icon-button/icon-button.cjs');
 var search_module = require('./search.module.css.cjs');
+var React = require('react');
-const searchField = index.cva(search_module.default.searchField, {
-    variants: {
-        size: {
-            small: search_module.default["search-small"],
-            large: search_module.default["search-large"],
-        }
-    },
-    defaultVariants: {
-        size: "large",
-    }
+const Search = React.forwardRef(({ className, disabled, placeholder = "Search", size, showClearButton, onClear, value, onChange, width = "100%", variant = "default", ...props }, ref) => {
+    const trailingIconWithClear = showClearButton && value ? (jsxRuntime.jsxRuntimeExports.jsx("div", { className: search_module.default.clearButtonWrapper, children: jsxRuntime.jsxRuntimeExports.jsx(iconButton.IconButton, { size: size === "small" ? 2 : 3, onClick: (e) => {
+                e.stopPropagation();
+                if (!disabled && onClear) {
+                    onClear();
+                }
+            }, disabled: disabled, "aria-label": "Clear search", className: search_module.default.clearButton, children: jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.CrossCircledIcon, {}) }) })) : undefined;
+    return (jsxRuntime.jsxRuntimeExports.jsx("div", { className: search_module.default.container, role: "search", style: { width }, children: jsxRuntime.jsxRuntimeExports.jsx(inputField.InputField, { leadingIcon: jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.MagnifyingGlassIcon, {}), trailingIcon: trailingIconWithClear, placeholder: placeholder, disabled: disabled, value: value, onChange: onChange, size: size, className: className, "aria-label": placeholder, variant: variant, ref: ref, ...props }) }));
 });
-const Search = ({ className, disabled, placeholder = "Search", size, showClearButton, onClear, value, ref, ...props }) => {
-    return (jsxRuntime.jsxRuntimeExports.jsxs("div", { className: clsx.clsx(search_module.default.container, disabled && search_module.default.disabled), role: "search", children: [jsxRuntime.jsxRuntimeExports.jsx("span", { className: search_module.default.leadingIcon, "aria-hidden": "true", children: jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.MagnifyingGlassIcon, {}) }), jsxRuntime.jsxRuntimeExports.jsx("input", { ref: ref, type: "text", className: clsx.clsx(searchField({ size, className }), disabled && search_module.default["search-disabled"]), placeholder: placeholder, disabled: disabled, value: value, "aria-label": placeholder, ...props }), showClearButton && value && !disabled && (jsxRuntime.jsxRuntimeExports.jsx("button", { className: search_module.default.clearButton, onClick: onClear, disabled: disabled, type: "button", "aria-label": "Clear search", tabIndex: 0, children: jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.CrossCircledIcon, { height: 16, width: 16 }) }))] }));
-};
 Search.displayName = "Search";
 exports.Search = Search;

package/dist/v1/components/search/search.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"search.cjs","sources":["../../../../v1/components/search/search.tsx"],"sourcesContent":["import { CrossCircledIcon,MagnifyingGlassIcon } from \"@radix-ui/react-icons\";\nimport { ~~cva,~~ ~~type~~ ~~VariantProps~~ } from \"~~class~~-~~variance~~-~~authority~~\";\nimport ~~clsx~~ from \"~~clsx~~\";\n\nimport styles from \"./search.module.css\";\~~n\nconst~~ ~~searchField = cva(styles.searchField,~~ {~~\n variants:~~ ~~{\n size:~~ ~~{\n small: styles[\"search-small\"],\n large: styles[\"search-large\"],\n~~ }~~\n },\n defaultVariants:~~ ~~{\n size:~~ \"~~large~~\"~~,\n }\n})~~;\n\nexport interface SearchProps extends ~~VariantProps~~<~~typeof~~ ~~searchField~~> {\n ~~className?: string;\n disabled?: boolean;\n placeholder?: string;\n~~ showClearButton?: boolean;\n onClear?: () => void;\n ~~value~~?: ~~string;\n ref?:~~ ~~React.RefObject<HTMLInputElement>;\n onChange?:~~ ~~(e: React.ChangeEvent<HTMLInputElement>) => void~~;\n ~~onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;\n type?: string;\n name?: string;\n id?: string;\n~~}\n\nexport const Search = ({ \n ~~className,~~ \n ~~disabled,~~ \n placeholder = \"Search\"~~, \~~n size~~, \~~n showClearButton~~, \~~n onClear~~, \~~n value,\n ~~ref~~,\n ...props \n}: SearchProps) => {\n ~~return~~ (\n <div \n ~~className~~={~~clsx~~(~~styles~~.~~container,~~ disabled && ~~styles.disabled~~)} \n ~~role~~=\"search\"\n ~~>\n <span~~ className={styles.~~leadingIcon~~} ~~aria-hidden=\"true~~\">\n <~~MagnifyingGlassIcon~~ />\n </~~span~~>\n ~~<input~~\n ~~ref~~={~~ref~~}~~\n type~~=\"~~text~~\"~~\n className~~={~~clsx(\n searchField(~~{ ~~size,~~ ~~className~~ }~~),\~~n ~~disabled~~ ~~&& styles[~~\~~"search-disabled\"]\~~n )}\n placeholder={placeholder}\n disabled={disabled}\n value={value}\n ~~aria-label~~={~~placeholder~~}\n {~~...props~~}\n ~~/>\n {showClearButton && value && !disabled && (\n <button \n~~ className={~~styles.clearButton~~}\n ~~onClick~~={~~onClear~~}\n ~~disabled~~={~~disabled~~}\n ~~type=\"button\"\n aria-label=\"Clear search\"\n tabIndex~~={0}\n ~~>\n~~ ~~<CrossCircledIcon height=~~{16} ~~width={16}/>\~~n ~~</button>\~~n ~~)}\n~~ </div>\n );\n};\n\nSearch.displayName = \"Search\";"],"names":["~~cva~~","~~styles~~","~~_jsxs~~","~~clsx~~","~~_jsx~~","~~MagnifyingGlassIcon~~","~~CrossCircledIcon~~"],"mappings":"~~;;;;;;;;AAMA~~,MAAM,~~WAAW,~~GAAGA,~~SAAG~~,~~CAACC~~,~~qBAAM~~,~~CAAC~~,~~WAAW~~,~~EAAE;AAC1C~~,~~IAAA,~~QAAQ,~~EAAE;AACR~~,~~QAAA~~,~~IAAI~~,~~EAAE;AACJ~~,~~YAAA~~,~~KAAK~~,~~EAAEA~~,~~qBAAM~~,~~CAAC~~,~~cAAc~~,~~CAAC;AAC7B~~,~~YAAA,~~KAAK,~~EAAEA~~,~~qBAAM~~,~~CAAC~~,~~cAAc~~,~~CAAC;AAC9B~~,~~SAAA;AACF~~,~~KAAA;AACD~~,~~IAAA~~,~~eAAe~~,~~EAAE;AACf~~,~~QAAA~~,~~IAAI~~,~~EAAE~~,~~OAAO;AACd~~,~~KAAA;AACF~~,~~CAAA~~,~~CAAC,CAAC~~;~~AAiBI~~,~~MAAM~~,MAAM,~~GAAG~~,~~CAAC~~,~~EACrB~~,~~SAAS~~,~~EACT~~,~~QAAQ~~,~~EACR~~,~~WAAW~~,~~GAAG~~,~~QAAQ~~,~~EACtB~~,~~IAAI~~,~~EACJ~~,~~eAAe~~,~~EACf~~,~~OAAO~~,~~EACP~~,~~KAAK~~,~~EACL~~,~~GAAG~~,~~EACH~~,~~GAAG~~,~~KAAK~~,~~EACI~~,~~KAAI;AAChB~~,~~IAAA~~,~~QACEC~~,~~iCAAA~~,~~CAAA~~,~~KAAA~~,~~EAAA~~,~~EACE~~,~~SAAS~~,~~EAAEC~~,~~SAAI~~,~~CAACF~~,~~qBAAM~~,CAAC,~~SAAS~~,EAAE,~~QAAQ~~,~~IAAIA~~,~~qBAAM~~,CAAC,QAAQ,~~CAAC~~,~~EAC9D~~,~~IAAI~~,~~EAAC~~,~~QAAQ~~,~~EAEb~~,~~QAAA~~,~~EAAA~~,~~CAAAG~~,~~gCAAA~~,~~CAAA~~,~~MAAA~~,~~EAAA~~,~~EAAM~~,SAAS,~~EAAEH~~,qBAAM,CAAC,WAAW,~~EAAA~~,~~aAAA,EAAc,MAAM,EACrD,~~QAAA,~~EAAAG~~,gCAAA,~~CAACC~~,~~kCAAmB,~~EAAA,EAAA,CAAG,~~EAClB~~,CAAA,~~EACPD~~,~~gCACE~~,~~CAAA~~,~~OAAA~~,~~EAAA~~,~~EAAA~~,~~GAAG~~,~~EAAE~~,~~GAAG~~,~~EACR~~,~~IAAI~~,~~EAAC~~,~~MAAM,EACX,~~SAAS,~~EAAED~~,~~SAAI~~,~~CACb,WAAW,~~CAAC,~~EAAE,IAAI,EAAE,~~SAAS,EAAE,~~CAAC~~,~~EAChC~~,QAAQ,~~IAAIF~~,~~qBAAM~~,~~CAAC,iBAAiB,CAAC,CACtC,EACD,WAAW,~~EAAE,~~WAAW,EACxB,QAAQ,~~EAAE,~~QAAQ,EAClB,~~KAAK,EAAE,~~KAAK,~~EAAA,~~YAAA~~,~~EACA~~,~~WAAW~~,~~EAAA~~,~~GACnB~~,~~KAAK~~,EAAA,~~CACT~~,~~EACD~~,~~eAAe~~,~~IAAI~~,~~KAAK~~,~~IAAI~~,~~CAAC~~,~~QAAQ,KACpCG,gCAAA,~~CAAA,~~QAAA~~,~~EAAA~~,~~EACE~~,~~SAAS~~,~~EAAEH~~,~~qBAAM,CAAC,~~WAAW,~~EAC7B,OAAO,~~EAAE,~~OAAO~~,~~EAChB~~,QAAQ,EAAE,QAAQ,EAClB,~~IAAI~~,~~EAAC~~,~~QAAQ~~,~~EACF~~,~~YAAA~~,~~EAAA~~,~~cAAc~~,~~EACzB~~,~~QAAQ~~,EAAE,~~CAAC~~,~~EAAA~~,~~QAAA~~,~~EAEXG~~,~~gCAAC~~,~~CAAAE,+BAAgB~~,~~EAAC~~,EAAA,~~MAAM~~,~~EAAE~~,~~EAAE~~,EAAE,~~KAAK~~,~~EAAE~~,EAAE,~~EAAG~~,~~CAAA~~,~~EAAA~~,~~CACnC~~,~~CACV~~,CAAA,EAAA,~~CACG~~,EACN;AACJ,~~EAAE~~;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}
1	+ {"version":3,"file":"search.cjs","sources":["../../../../v1/components/search/search.tsx"],"sourcesContent":["import { CrossCircledIcon, MagnifyingGlassIcon } from \"@radix-ui/react-icons\";\nimport { InputField } from \"../input-field\";\nimport { InputFieldProps } from \"../input-field/input-field\";\nimport { IconButton } from \"../icon-button\";\n\nimport styles from \"./search.module.css\";\nimport { forwardRef } from \"react\";\n\nexport interface SearchProps extends Omit<InputFieldProps, \"leadingIcon\"> {\n showClearButton?: boolean;\n onClear?: () => void;\n variant?: \"default\" \| \"borderless\";\n}\n\nexport const Search = forwardRef<HTMLInputElement, SearchProps>(\n (\n {\n className,\n disabled,\n placeholder = \"Search\",\n size,\n showClearButton,\n onClear,\n value,\n onChange,\n width = \"100%\",\n variant = \"default\",\n ...props\n }: SearchProps,\n ref\n ) => {\n const trailingIconWithClear =\n showClearButton && value ? (\n <div className={styles.clearButtonWrapper}>\n <IconButton\n size={size === \"small\" ? 2 : 3}\n onClick={(e) => {\n e.stopPropagation();\n if (!disabled && onClear) {\n onClear();\n }\n }}\n disabled={disabled}\n aria-label=\"Clear search\"\n className={styles.clearButton}\n >\n <CrossCircledIcon />\n </IconButton>\n </div>\n ) : undefined;\n\n return (\n <div className={styles.container} role=\"search\" style={{ width }}>\n <InputField\n leadingIcon={<MagnifyingGlassIcon />}\n trailingIcon={trailingIconWithClear}\n placeholder={placeholder}\n disabled={disabled}\n value={value}\n onChange={onChange}\n size={size}\n className={className}\n aria-label={placeholder}\n variant={variant}\n ref={ref}\n {...props}\n />\n </div>\n );\n }\n);\n\nSearch.displayName = \"Search\";\n"],"names":["forwardRef","_jsx","styles","IconButton","CrossCircledIcon","InputField","MagnifyingGlassIcon"],"mappings":";;;;;;;;;AAca,MAAA,MAAM,GAAGA,gBAAU,CAC9B,CACE,EACE,SAAS,EACT,QAAQ,EACR,WAAW,GAAG,QAAQ,EACtB,IAAI,EACJ,eAAe,EACf,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,GAAG,MAAM,EACd,OAAO,GAAG,SAAS,EACnB,GAAG,KAAK,EACI,EACd,GAAG,KACD;AACF,IAAA,MAAM,qBAAqB,GACzB,eAAe,IAAI,KAAK,IACtBC,gCAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,qBAAM,CAAC,kBAAkB,EAAA,QAAA,EACvCD,iCAACE,qBAAU,EAAA,EACT,IAAI,EAAE,IAAI,KAAK,OAAO,GAAG,CAAC,GAAG,CAAC,EAC9B,OAAO,EAAE,CAAC,CAAC,KAAI;gBACb,CAAC,CAAC,eAAe,EAAE,CAAC;AACpB,gBAAA,IAAI,CAAC,QAAQ,IAAI,OAAO,EAAE;AACxB,oBAAA,OAAO,EAAE,CAAC;iBACX;aACF,EACD,QAAQ,EAAE,QAAQ,gBACP,cAAc,EACzB,SAAS,EAAED,qBAAM,CAAC,WAAW,EAE7B,QAAA,EAAAD,gCAAA,CAACG,+BAAgB,EAAA,EAAA,CAAG,EACT,CAAA,EAAA,CACT,IACJ,SAAS,CAAC;AAEhB,IAAA,QACEH,gCAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,qBAAM,CAAC,SAAS,EAAE,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAA,QAAA,EAC9DD,gCAAC,CAAAI,qBAAU,EACT,EAAA,WAAW,EAAEJ,gCAAC,CAAAK,kCAAmB,EAAG,EAAA,CAAA,EACpC,YAAY,EAAE,qBAAqB,EACnC,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACR,YAAA,EAAA,WAAW,EACvB,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAG,EACJ,GAAA,KAAK,EACT,CAAA,EAAA,CACE,EACN;AACJ,CAAC,EACD;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}

package/dist/v1/components/search/search.d.ts CHANGED Viewed

@@ -1,24 +1,8 @@
-import { type VariantProps } from "class-variance-authority";
-declare const searchField: (props?: ({
-    size?: "small" | "large" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export interface SearchProps extends VariantProps<typeof searchField> {
-    className?: string;
-    disabled?: boolean;
-    placeholder?: string;
+import { InputFieldProps } from "../input-field/input-field";
+export interface SearchProps extends Omit<InputFieldProps, "leadingIcon"> {
     showClearButton?: boolean;
     onClear?: () => void;
-    value?: string;
-    ref?: React.RefObject<HTMLInputElement>;
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
-    type?: string;
-    name?: string;
-    id?: string;
+    variant?: "default" | "borderless";
 }
-export declare const Search: {
-    ({ className, disabled, placeholder, size, showClearButton, onClear, value, ref, ...props }: SearchProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export {};
+export declare const Search: import("react").ForwardRefExoticComponent<Omit<SearchProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=search.d.ts.map

package/dist/v1/components/search/search.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../../../../v1/components/search/search.tsx"],"names":[],"mappings":"~~AACA~~,OAAO,~~EAAO~~,~~KAAK~~,~~YAAY,~~EAAE,MAAM,~~0BAA0B~~,CAAC;~~AAKlE~~,~~QAAA,~~MAAM,WAAW~~;;mFAUf~~,~~CAAC;AAEH,MAAM,WAAW,~~WAAY,SAAQ,~~YAAY~~,CAAC,~~OAAO~~,~~WAAW,CAAC;IACnE,SAAS,CAAC,~~EAAE,~~MAAM~~,CAAC;~~IACnB~~,~~QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,~~eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,~~KAAK~~,CAAC,EAAE,~~MAAM~~,~~CAAC;IACf,~~GAAG,~~CAAC~~,~~EAAE,KAAK,~~CAAC~~,SAAS,CAAC,gBAAgB,CAAC,CAAC~~;~~IACxC,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC~~;~~IAC5D,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC/D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;~~AAED,eAAO,MAAM,MAAM~~;iGAUhB~~,~~WAAW;;CAoCb~~,CAAC"}
1	+ {"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../../../../v1/components/search/search.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAM7D,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,eAAe,EAAE,aAAa,CAAC;IACvE,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC;CACpC;AAED,eAAO,MAAM,MAAM,uHAwDlB,CAAC"}

package/dist/v1/components/search/search.js CHANGED Viewed

@@ -1,23 +1,19 @@
 import { j as jsxRuntimeExports } from '../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
-import { MagnifyingGlassIcon, CrossCircledIcon } 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 { cva } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
-import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
+import { CrossCircledIcon, MagnifyingGlassIcon } 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 { InputField } from '../input-field/input-field.js';
+import { IconButton } from '../icon-button/icon-button.js';
 import styles from './search.module.css.js';
+import { forwardRef } from 'react';
-const searchField = cva(styles.searchField, {
-    variants: {
-        size: {
-            small: styles["search-small"],
-            large: styles["search-large"],
-        }
-    },
-    defaultVariants: {
-        size: "large",
-    }
+const Search = forwardRef(({ className, disabled, placeholder = "Search", size, showClearButton, onClear, value, onChange, width = "100%", variant = "default", ...props }, ref) => {
+    const trailingIconWithClear = showClearButton && value ? (jsxRuntimeExports.jsx("div", { className: styles.clearButtonWrapper, children: jsxRuntimeExports.jsx(IconButton, { size: size === "small" ? 2 : 3, onClick: (e) => {
+                e.stopPropagation();
+                if (!disabled && onClear) {
+                    onClear();
+                }
+            }, disabled: disabled, "aria-label": "Clear search", className: styles.clearButton, children: jsxRuntimeExports.jsx(CrossCircledIcon, {}) }) })) : undefined;
+    return (jsxRuntimeExports.jsx("div", { className: styles.container, role: "search", style: { width }, children: jsxRuntimeExports.jsx(InputField, { leadingIcon: jsxRuntimeExports.jsx(MagnifyingGlassIcon, {}), trailingIcon: trailingIconWithClear, placeholder: placeholder, disabled: disabled, value: value, onChange: onChange, size: size, className: className, "aria-label": placeholder, variant: variant, ref: ref, ...props }) }));
 });
-const Search = ({ className, disabled, placeholder = "Search", size, showClearButton, onClear, value, ref, ...props }) => {
-    return (jsxRuntimeExports.jsxs("div", { className: clsx(styles.container, disabled && styles.disabled), role: "search", children: [jsxRuntimeExports.jsx("span", { className: styles.leadingIcon, "aria-hidden": "true", children: jsxRuntimeExports.jsx(MagnifyingGlassIcon, {}) }), jsxRuntimeExports.jsx("input", { ref: ref, type: "text", className: clsx(searchField({ size, className }), disabled && styles["search-disabled"]), placeholder: placeholder, disabled: disabled, value: value, "aria-label": placeholder, ...props }), showClearButton && value && !disabled && (jsxRuntimeExports.jsx("button", { className: styles.clearButton, onClick: onClear, disabled: disabled, type: "button", "aria-label": "Clear search", tabIndex: 0, children: jsxRuntimeExports.jsx(CrossCircledIcon, { height: 16, width: 16 }) }))] }));
-};
 Search.displayName = "Search";
 export { Search };

package/dist/v1/components/search/search.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"search.js","sources":["../../../../v1/components/search/search.tsx"],"sourcesContent":["import { CrossCircledIcon,MagnifyingGlassIcon } from \"@radix-ui/react-icons\";\nimport { ~~cva,~~ ~~type~~ ~~VariantProps~~ } from \"~~class~~-~~variance~~-~~authority~~\";\nimport ~~clsx~~ from \"~~clsx~~\";\n\nimport styles from \"./search.module.css\";\~~n\nconst~~ ~~searchField = cva(styles.searchField,~~ {~~\n variants:~~ ~~{\n size:~~ ~~{\n small: styles[\"search-small\"],\n large: styles[\"search-large\"],\n~~ }~~\n },\n defaultVariants:~~ ~~{\n size:~~ \"~~large~~\"~~,\n }\n})~~;\n\nexport interface SearchProps extends ~~VariantProps~~<~~typeof~~ ~~searchField~~> {\n ~~className?: string;\n disabled?: boolean;\n placeholder?: string;\n~~ showClearButton?: boolean;\n onClear?: () => void;\n ~~value~~?: ~~string;\n ref?:~~ ~~React.RefObject<HTMLInputElement>;\n onChange?:~~ ~~(e: React.ChangeEvent<HTMLInputElement>) => void~~;\n ~~onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;\n type?: string;\n name?: string;\n id?: string;\n~~}\n\nexport const Search = ({ \n ~~className,~~ \n ~~disabled,~~ \n placeholder = \"Search\"~~, \~~n size~~, \~~n showClearButton~~, \~~n onClear~~, \~~n value,\n ~~ref~~,\n ...props \n}: SearchProps) => {\n ~~return~~ (\n <div \n ~~className~~={~~clsx~~(~~styles~~.~~container,~~ disabled && ~~styles.disabled~~)} \n ~~role~~=\"search\"\n ~~>\n <span~~ className={styles.~~leadingIcon~~} ~~aria-hidden=\"true~~\">\n <~~MagnifyingGlassIcon~~ />\n </~~span~~>\n ~~<input~~\n ~~ref~~={~~ref~~}~~\n type~~=\"~~text~~\"~~\n className~~={~~clsx(\n searchField(~~{ ~~size,~~ ~~className~~ }~~),\~~n ~~disabled~~ ~~&& styles[~~\~~"search-disabled\"]\~~n )}\n placeholder={placeholder}\n disabled={disabled}\n value={value}\n ~~aria-label~~={~~placeholder~~}\n {~~...props~~}\n ~~/>\n {showClearButton && value && !disabled && (\n <button \n~~ className={~~styles.clearButton~~}\n ~~onClick~~={~~onClear~~}\n ~~disabled~~={~~disabled~~}\n ~~type=\"button\"\n aria-label=\"Clear search\"\n tabIndex~~={0}\n ~~>\n~~ ~~<CrossCircledIcon height=~~{16} ~~width={16}/>\~~n ~~</button>\~~n ~~)}\n~~ </div>\n );\n};\n\nSearch.displayName = \"Search\";"],"names":["~~_jsxs","~~_jsx"],"mappings":"~~;;;;;;AAMA~~,MAAM,~~WAAW,~~GAAG,~~GAAG~~,~~CAAC~~,~~MAAM~~,~~CAAC~~,WAAW,~~EAAE;AAC1C~~,~~IAAA,~~QAAQ,~~EAAE;AACR~~,~~QAAA,~~IAAI,~~EAAE;AACJ~~,~~YAAA~~,~~KAAK~~,~~EAAE~~,~~MAAM~~,~~CAAC~~,~~cAAc~~,~~CAAC;AAC7B~~,~~YAAA~~,KAAK,~~EAAE~~,MAAM,~~CAAC~~,~~cAAc~~,~~CAAC;AAC9B~~,~~SAAA;AACF~~,~~KAAA;AACD~~,~~IAAA~~,~~eAAe~~,~~EAAE;AACf~~,~~QAAA~~,~~IAAI~~,~~EAAE,OAAO~~;~~AACd,KAAA;~~AACF,~~CAAA~~,~~CAAC,CAAC;AAiBI,~~MAAM,~~MAAM~~,~~GAAG~~,~~CAAC~~,~~EACrB~~,~~SAAS~~,~~EACT~~,~~QAAQ~~,~~EACR~~,~~WAAW~~,~~GAAG~~,~~QAAQ~~,~~EACtB~~,~~IAAI~~,~~EACJ~~,~~eAAe~~,~~EACf~~,~~OAAO~~,~~EACP~~,~~KAAK~~,~~EACL~~,~~GAAG~~,~~EACH~~,~~GAAG~~,~~KAAK~~,~~EACI~~,~~KAAI;AAChB~~,~~IAAA~~,~~QACEA~~,~~sBAAA~~,~~CAAA~~,~~KAAA~~,~~EAAA~~,~~EACE~~,~~SAAS~~,EAAE,~~IAAI~~,CAAC,~~MAAM~~,CAAC,~~SAAS~~,EAAE,~~QAAQ~~,IAAI,~~MAAM,~~CAAC,QAAQ,~~CAAC~~,~~EAC9D~~,~~IAAI~~,~~EAAC~~,~~QAAQ~~,~~EAEb~~,~~QAAA~~,~~EAAA~~,~~CAAAC~~,~~qBAAA~~,~~CAAA~~,~~MAAA~~,~~EAAA~~,~~EAAM~~,SAAS,EAAE,MAAM,CAAC,WAAW,~~EAAA~~,~~aAAA,EAAc,MAAM,EACrD,~~QAAA,EAAAA,qBAAA,CAAC,~~mBAAmB~~,EAAA,EAAA,CAAG,~~EAClB~~,CAAA,~~EACPA~~,~~qBACE~~,~~CAAA~~,~~OAAA~~,~~EAAA~~,~~EAAA~~,~~GAAG~~,~~EAAE~~,~~GAAG~~,~~EACR~~,~~IAAI~~,~~EAAC~~,~~MAAM,EACX,~~SAAS,EAAE,~~IAAI~~,~~CACb,WAAW,~~CAAC,~~EAAE,IAAI,EAAE,~~SAAS,EAAE,~~CAAC~~,~~EAChC~~,QAAQ,~~IAAI~~,~~MAAM~~,~~CAAC,iBAAiB,CAAC,CACtC,EACD,WAAW,~~EAAE,~~WAAW,EACxB,QAAQ,~~EAAE,~~QAAQ,EAClB,~~KAAK,EAAE,~~KAAK,~~EAAA,~~YAAA~~,~~EACA~~,~~WAAW~~,~~EAAA~~,~~GACnB~~,~~KAAK~~,EAAA,~~CACT~~,~~EACD~~,~~eAAe~~,~~IAAI~~,~~KAAK~~,~~IAAI~~,~~CAAC~~,~~QAAQ,KACpCA,qBAAA,~~CAAA,~~QAAA~~,~~EAAA~~,~~EACE,SAAS,~~EAAE,~~MAAM~~,~~CAAC~~,WAAW,~~EAC7B,OAAO,~~EAAE,~~OAAO~~,~~EAChB~~,QAAQ,EAAE,QAAQ,EAClB,~~IAAI~~,~~EAAC~~,~~QAAQ~~,~~EACF~~,~~YAAA~~,~~EAAA~~,~~cAAc~~,~~EACzB~~,~~QAAQ~~,EAAE,~~CAAC~~,~~EAAA~~,~~QAAA~~,~~EAEXA~~,~~qBAAC~~,~~CAAA~~,~~gBAAgB~~,~~EAAC,~~EAAA,~~MAAM~~,~~EAAE~~,~~EAAE~~,EAAE,~~KAAK~~,~~EAAE~~,EAAE,~~EAAG~~,~~CAAA~~,~~EAAA~~,~~CACnC~~,~~CACV~~,CAAA,EAAA,~~CACG~~,EACN;AACJ,~~EAAE~~;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}
1	+ {"version":3,"file":"search.js","sources":["../../../../v1/components/search/search.tsx"],"sourcesContent":["import { CrossCircledIcon, MagnifyingGlassIcon } from \"@radix-ui/react-icons\";\nimport { InputField } from \"../input-field\";\nimport { InputFieldProps } from \"../input-field/input-field\";\nimport { IconButton } from \"../icon-button\";\n\nimport styles from \"./search.module.css\";\nimport { forwardRef } from \"react\";\n\nexport interface SearchProps extends Omit<InputFieldProps, \"leadingIcon\"> {\n showClearButton?: boolean;\n onClear?: () => void;\n variant?: \"default\" \| \"borderless\";\n}\n\nexport const Search = forwardRef<HTMLInputElement, SearchProps>(\n (\n {\n className,\n disabled,\n placeholder = \"Search\",\n size,\n showClearButton,\n onClear,\n value,\n onChange,\n width = \"100%\",\n variant = \"default\",\n ...props\n }: SearchProps,\n ref\n ) => {\n const trailingIconWithClear =\n showClearButton && value ? (\n <div className={styles.clearButtonWrapper}>\n <IconButton\n size={size === \"small\" ? 2 : 3}\n onClick={(e) => {\n e.stopPropagation();\n if (!disabled && onClear) {\n onClear();\n }\n }}\n disabled={disabled}\n aria-label=\"Clear search\"\n className={styles.clearButton}\n >\n <CrossCircledIcon />\n </IconButton>\n </div>\n ) : undefined;\n\n return (\n <div className={styles.container} role=\"search\" style={{ width }}>\n <InputField\n leadingIcon={<MagnifyingGlassIcon />}\n trailingIcon={trailingIconWithClear}\n placeholder={placeholder}\n disabled={disabled}\n value={value}\n onChange={onChange}\n size={size}\n className={className}\n aria-label={placeholder}\n variant={variant}\n ref={ref}\n {...props}\n />\n </div>\n );\n }\n);\n\nSearch.displayName = \"Search\";\n"],"names":["_jsx"],"mappings":";;;;;;;AAca,MAAA,MAAM,GAAG,UAAU,CAC9B,CACE,EACE,SAAS,EACT,QAAQ,EACR,WAAW,GAAG,QAAQ,EACtB,IAAI,EACJ,eAAe,EACf,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,GAAG,MAAM,EACd,OAAO,GAAG,SAAS,EACnB,GAAG,KAAK,EACI,EACd,GAAG,KACD;AACF,IAAA,MAAM,qBAAqB,GACzB,eAAe,IAAI,KAAK,IACtBA,qBAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,kBAAkB,EAAA,QAAA,EACvCA,sBAAC,UAAU,EAAA,EACT,IAAI,EAAE,IAAI,KAAK,OAAO,GAAG,CAAC,GAAG,CAAC,EAC9B,OAAO,EAAE,CAAC,CAAC,KAAI;gBACb,CAAC,CAAC,eAAe,EAAE,CAAC;AACpB,gBAAA,IAAI,CAAC,QAAQ,IAAI,OAAO,EAAE;AACxB,oBAAA,OAAO,EAAE,CAAC;iBACX;aACF,EACD,QAAQ,EAAE,QAAQ,gBACP,cAAc,EACzB,SAAS,EAAE,MAAM,CAAC,WAAW,EAE7B,QAAA,EAAAA,qBAAA,CAAC,gBAAgB,EAAA,EAAA,CAAG,EACT,CAAA,EAAA,CACT,IACJ,SAAS,CAAC;AAEhB,IAAA,QACEA,qBAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAA,QAAA,EAC9DA,qBAAC,CAAA,UAAU,EACT,EAAA,WAAW,EAAEA,qBAAC,CAAA,mBAAmB,EAAG,EAAA,CAAA,EACpC,YAAY,EAAE,qBAAqB,EACnC,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACR,YAAA,EAAA,WAAW,EACvB,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAG,EACJ,GAAA,KAAK,EACT,CAAA,EAAA,CACE,EACN;AACJ,CAAC,EACD;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}

package/dist/v1/components/search/search.module.css.cjs CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-var styles = {"container":"search-module_container__8gEJW","disabled":"search-module_disabled__hsaoU","searchField":"search-module_searchField__-tDuP","search-small":"search-module_search-small__-ZBT7","search-large":"search-module_search-large__KhTvs","search-disabled":"search-module_search-disabled__F7Fe0","leadingIcon":"search-module_leadingIcon__qHtrW","clearButton":"search-module_clearButton__CGShe","search___small":"search-module_search-small__-ZBT7","search___large":"search-module_search-large__KhTvs","search___disabled":"search-module_search-disabled__F7Fe0"};
+var styles = {"container":"search-module_container__8gEJW","clearButtonWrapper":"search-module_clearButtonWrapper__QQGqN","clearButton":"search-module_clearButton__CGShe"};
 exports.default = styles;
 //# sourceMappingURL=search.module.css.cjs.map

package/dist/v1/components/search/search.module.css.js CHANGED Viewed

@@ -1,4 +1,4 @@
-var styles = {"container":"search-module_container__8gEJW","disabled":"search-module_disabled__hsaoU","searchField":"search-module_searchField__-tDuP","search-small":"search-module_search-small__-ZBT7","search-large":"search-module_search-large__KhTvs","search-disabled":"search-module_search-disabled__F7Fe0","leadingIcon":"search-module_leadingIcon__qHtrW","clearButton":"search-module_clearButton__CGShe","search___small":"search-module_search-small__-ZBT7","search___large":"search-module_search-large__KhTvs","search___disabled":"search-module_search-disabled__F7Fe0"};
+var styles = {"container":"search-module_container__8gEJW","clearButtonWrapper":"search-module_clearButtonWrapper__QQGqN","clearButton":"search-module_clearButton__CGShe"};
 export { styles as default };
 //# sourceMappingURL=search.module.css.js.map

package/dist/v1/icons/assets/bell-slash.svg.cjs ADDED Viewed

@@ -0,0 +1,45 @@
+'use strict';
+var React = require('react');
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var _g;
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+var SvgBellSlash = function SvgBellSlash(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    fill: "none",
+    viewBox: "0 0 16 16"
+  }, props), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
+    fill: "currentColor"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M2.354 1.646a.5.5 0 1 0-.708.708l12 12a.5.5 0 0 0 .708-.708zM13.714 10.984q-.225.083-.45.158L4.879 2.758A4.5 4.5 0 0 1 12.5 6v.5c0 1.415.535 2.705 1.413 3.68a.5.5 0 0 1-.198.804"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    d: "M3.5 6q0-.184.015-.364l6.922 6.923a2.5 2.5 0 0 1-4.93-.746 16.4 16.4 0 0 1-3.221-.83.5.5 0 0 1-.198-.803A5.48 5.48 0 0 0 3.5 6.5zm3.001 5.933L6.5 12a1.5 1.5 0 1 0 2.999-.067 16.7 16.7 0 0 1-2.998 0",
+    clipRule: "evenodd"
+  }))));
+};
+exports.ReactComponent = SvgBellSlash;
+//# sourceMappingURL=bell-slash.svg.cjs.map