@clickhouse/click-ui 0.6.2-rc3 → 0.8.0

package/dist/cjs/components/RadioGroup/RadioGroup.css

@@ -0,0 +1,99 @@
+.radio-group__RXgmX {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--click-checkbox-space-gap);
+}
+
+.radio-group_inline__Bn4-S {
+  flex-direction: row;
+}
+
+.radio-group_inline_false__OXI3T {
+  flex-direction: column;
+}
+
+.radio-group_error__cijEQ label {
+  color: var(--click-field-color-label-error);
+}
+
+/* The item class is applied alongside FormRoot's styled-components class.
+   The .item.item double-class boost matches the specificity behavior of the
+   original `styled(FormRoot)` chain so these overrides reliably beat FormRoot's
+   own declarations regardless of stylesheet insertion order between CSS Modules
+   and the runtime-injected styled-components. */
+.item__W9-K2.item__W9-K2 {
+  display: flex;
+  width: auto;
+  padding: var(--click-checkbox-space-all);
+  align-items: center;
+  gap: var(--click-checkbox-space-gap);
+}
+
+.radio-input__KMmKv {
+  display: flex;
+  width: 1rem;
+  height: 1rem;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid var(--click-radio-color-stroke-default);
+  border-radius: var(--click-radio-radii-all);
+  background: var(--click-radio-color-background-default);
+  outline: none;
+  cursor: pointer;
+}
+
+.radio-input__KMmKv:hover {
+  background: var(--click-radio-color-background-hover);
+}
+
+.radio-input__KMmKv[data-state='checked'] {
+  border-color: var(--click-radio-color-stroke-active);
+  background: var(--click-radio-color-background-active);
+}
+
+/* stylelint-disable no-descending-specificity -- disabled state intentionally
+   defined after the checked state to mirror the source cascade order; matches
+   the styled-components rule which used a nested `&[data-disabled]` block placed
+   after `&[data-state="checked"]`. */
+.radio-input__KMmKv[data-disabled] {
+  border-color: var(--click-radio-color-stroke-disabled);
+  background: var(--click-radio-color-background-disabled);
+}
+
+.radio-indicator__rrk6W {
+  background: var(--click-radio-color-background-default);
+}
+
+.radio-indicator__rrk6W::after {
+  content: '';
+  display: block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: var(--click-radio-color-indicator-default);
+}
+
+.radio-indicator__rrk6W::after:hover {
+  background: var(--click-radio-color-indicator-hover);
+}
+
+.radio-indicator__rrk6W[data-state='checked'] {
+  background: var(--click-radio-color-background-active);
+}
+
+.radio-indicator__rrk6W[data-state='checked']::after {
+  background: var(--click-radio-color-indicator-active);
+}
+
+.radio-indicator__rrk6W:hover {
+  background: var(--click-radio-color-background-hover);
+}
+
+.radio-indicator__rrk6W[data-disabled] {
+  background: var(--click-radio-color-background-disabled);
+}
+
+.radio-indicator__rrk6W[data-disabled]::after {
+  background: var(--click-radio-color-indicator-disabled);
+}
+/* stylelint-enable no-descending-specificity */

package/dist/cjs/components/RadioGroup/RadioGroup.module.css.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const item = "item__W9-K2";
+const styles = {
+	"radio-group": "radio-group__RXgmX",
+	"radio-group_inline": "radio-group_inline__Bn4-S",
+	"radio-group_inline_false": "radio-group_inline_false__OXI3T",
+	"radio-group_error": "radio-group_error__cijEQ",
+	item: item,
+	"radio-input": "radio-input__KMmKv",
+	"radio-indicator": "radio-indicator__rrk6W"
+};
+
+exports.default = styles;
+exports.item = item;
+//# sourceMappingURL=RadioGroup.module.css.cjs.map

package/dist/cjs/components/RadioGroup/RadioGroup.module.css.cjs.map

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

package/dist/cjs/components/RadioGroup/index.cjs

@@ -1,3 +1,4 @@
+require("./RadioGroup.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
@@ -5,12 +6,14 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const RadixRadioGroup = require('@radix-ui/react-radio-group');
 const react = require('react');
-const styledComponents = require('styled-components');
+const cva = require('../../lib/cva.cjs');
+const RadioGroup_module = require('./RadioGroup.module.css.cjs');
 const FormRoot = require('../FormContainer/FormRoot.cjs');
 const FormElementContainer = require('../FormContainer/FormElementContainer.cjs');
 const Error = require('../FormContainer/Error.cjs');
 const Label = require('../Label/index.cjs');
 const GenericLabel = require('../GenericLabel/index.cjs');
+const classVarianceAuthority = require('class-variance-authority');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -32,16 +35,22 @@ function _interopNamespace(e) {
 
 const RadixRadioGroup__namespace = /*#__PURE__*/_interopNamespace(RadixRadioGroup);
 
-const RadioGroupRoot = styledComponents.styled(RadixRadioGroup__namespace.Root).withConfig({
-  componentId: "sc-p6cydr-0"
-})(["display:flex;flex-wrap:wrap;gap:", ";flex-direction:", ";label{", "}"], ({
-  theme
-}) => theme.click.checkbox.space.gap, ({
-  $inline = true
-}) => $inline === true ? "row" : "column", ({
-  $error,
-  theme
-}) => $error ? `color: ${theme.click.field.color.label.error};` : "");
+const radioGroupVariants = classVarianceAuthority.cva(RadioGroup_module.default["radio-group"], {
+  variants: {
+    inline: {
+      true: RadioGroup_module.default["radio-group_inline"],
+      false: RadioGroup_module.default["radio-group_inline_false"]
+    },
+    error: {
+      true: RadioGroup_module.default["radio-group_error"],
+      false: ""
+    }
+  },
+  defaultVariants: {
+    inline: true,
+    error: false
+  }
+});
 const RadioGroup = ({
   children,
   inline,
@@ -52,11 +61,15 @@ const RadioGroup = ({
   label,
   disabled,
   id,
+  className,
   ...props
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(FormRoot.FormRoot, { $orientation: orientation, $dir: dir, $addLabelPadding: true, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(FormElementContainer.FormElementContainer, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(RadioGroupRoot, { orientation: inline ? "horizontal" : "vertical", disabled, id, $error: !!error, dir: itemDir, $inline: inline, ...props, children }),
+      /* @__PURE__ */ jsxRuntime.jsx(RadixRadioGroup__namespace.Root, { orientation: inline ? "horizontal" : "vertical", disabled, id, dir: itemDir, ...props, className: cva.cn(radioGroupVariants({
+        inline: inline === false ? false : true,
+        error: !!error
+      }), className), children }),
       !!error && error !== true && /* @__PURE__ */ jsxRuntime.jsx(Error.Error, { children: error })
     ] }),
     label && /* @__PURE__ */ jsxRuntime.jsx(Label.Label, { htmlFor: id, disabled, error: !!error, children: label })
@@ -68,79 +81,17 @@ const RadioGroupItem = ({
   value,
   disabled,
   required,
+  className,
   ...props
 }) => {
   const defaultId = react.useId();
-  return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, { $orientation: "horizontal", $dir: "end", $addLabelPadding: false, ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(RadioInput, { value, id: id ?? defaultId, disabled, required, "aria-label": `${label}`, children: /* @__PURE__ */ jsxRuntime.jsx(RadioGroupIndicator, {}) }),
+  return /* @__PURE__ */ jsxRuntime.jsxs(FormRoot.FormRoot, { $orientation: "horizontal", $dir: "end", $addLabelPadding: false, ...props, className: cva.cn(RadioGroup_module.default.item, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(RadixRadioGroup__namespace.Item, { value, id: id ?? defaultId, disabled, required, "aria-label": `${label}`, className: RadioGroup_module.default["radio-input"], children: /* @__PURE__ */ jsxRuntime.jsx(RadixRadioGroup__namespace.Indicator, { className: RadioGroup_module.default["radio-indicator"] }) }),
     label && /* @__PURE__ */ jsxRuntime.jsx(GenericLabel.GenericLabel, { htmlFor: id ?? defaultId, disabled, children: label })
   ] });
 };
 RadioGroupItem.displayName = "RadioGroupItem";
 RadioGroup.Item = RadioGroupItem;
-const Wrapper = styledComponents.styled(FormRoot.FormRoot).withConfig({
-  componentId: "sc-p6cydr-1"
-})(["padding:", ";display:flex;align-items:center;gap:", ";width:auto;"], ({
-  theme
-}) => theme.click.checkbox.space.all, ({
-  theme
-}) => theme.click.checkbox.space.gap);
-const RadioInput = styledComponents.styled(RadixRadioGroup__namespace.Item).withConfig({
-  componentId: "sc-p6cydr-2"
-})(["display:flex;align-items:center;justify-content:center;outline:none;cursor:pointer;", ";"], ({
-  theme
-}) => `
-    border-radius: ${theme.click.radio.radii.all};
-    width: 1rem;
-    height: 1rem;
-    background: ${theme.click.radio.color.background.default};
-    border: 1px solid ${theme.click.radio.color.stroke.default};
-
-    &:hover {
-      background: ${theme.click.radio.color.background.hover};
-    }
-    &[data-state="checked"] {
-      border-color: ${theme.click.radio.color.stroke.active};
-      background: ${theme.click.radio.color.background.active};
-    }
-    &[data-disabled] {
-      background: ${theme.click.radio.color.background.disabled};
-      border-color: ${theme.click.radio.color.stroke.disabled};
-    }
-  `);
-const RadioGroupIndicator = styledComponents.styled(RadixRadioGroup__namespace.Indicator).withConfig({
-  componentId: "sc-p6cydr-3"
-})(["", ""], ({
-  theme
-}) => `
-    background: ${theme.click.radio.color.background.default};
-    &::after {
-      content: '';
-      display: block;
-      width: 6px;
-      height: 6px;
-      border-radius: 50%;
-      background-color: ${theme.click.radio.color.indicator.default};
-      &:hover {
-        background: ${theme.click.radio.color.indicator.hover};
-      }
-    }
-    &[data-state="checked"] {
-      background: ${theme.click.radio.color.background.active};
-      &::after {
-        background: ${theme.click.radio.color.indicator.active};
-      }
-    }
-    &:hover {
-      background: ${theme.click.radio.color.background.hover};
-    }
-    &[data-disabled] {
-      background: ${theme.click.radio.color.background.disabled};
-      &::after {
-        background: ${theme.click.radio.color.indicator.disabled};
-      }
-    }
-  `);
 
 exports.RadioGroup = RadioGroup;
 //# sourceMappingURL=index.cjs.map

package/dist/cjs/components/RadioGroup/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import * as RadixRadioGroup from '@radix-ui/react-radio-group';\nimport { HTMLAttributes, ReactNode, useId } from 'react';\nimport { styled } from 'styled-components';\nimport { GenericLabel } from '@/components/GenericLabel';\nimport { Label } from '@/components/Label';\nimport { Error, FormElementContainer, FormRoot } from '@/components/FormContainer';\n\nexport interface RadioGroupProps extends Omit<RadixRadioGroup.RadioGroupProps, 'dir'> {\n  /** Whether to display radio items inline (horizontally) */\n  inline?: boolean;\n  /** The orientation of the label relative to the radio group */\n  orientation?: 'vertical' | 'horizontal';\n  /** The direction/position of the label - start places label before, end places label after */\n  dir?: 'start' | 'end';\n  /** Text direction for radio items - ltr or rtl */\n  itemDir?: 'rtl' | 'ltr';\n  /** The label text displayed next to the radio group */\n  label?: ReactNode;\n  /** Error message to display below the radio group */\n  error?: ReactNode;\n}\n\nconst RadioGroupRoot = styled(RadixRadioGroup.Root)<{\n  $error: boolean;\n  $inline?: boolean;\n}>`\n  display: flex;\n  flex-wrap: wrap;\n  gap: ${({ theme }) => theme.click.checkbox.space.gap};\n  flex-direction: ${({ $inline = true }) => ($inline === true ? 'row' : 'column')};\n  label {\n    ${({ $error, theme }) =>\n      $error ? `color: ${theme.click.field.color.label.error};` : ''}\n  }\n`;\n\nexport const RadioGroup = ({\n  children,\n  inline,\n  orientation,\n  dir,\n  error,\n  itemDir,\n  label,\n  disabled,\n  id,\n  ...props\n}: RadioGroupProps) => {\n  return (\n    <FormRoot\n      $orientation={orientation}\n      $dir={dir}\n      $addLabelPadding\n    >\n      <FormElementContainer>\n        <RadioGroupRoot\n          orientation={inline ? 'horizontal' : 'vertical'}\n          disabled={disabled}\n          id={id}\n          $error={!!error}\n          dir={itemDir}\n          $inline={inline}\n          {...props}\n        >\n          {children}\n        </RadioGroupRoot>\n        {!!error && error !== true && <Error>{error}</Error>}\n      </FormElementContainer>\n      {label && (\n        <Label\n          htmlFor={id}\n          disabled={disabled}\n          error={!!error}\n        >\n          {label}\n        </Label>\n      )}\n    </FormRoot>\n  );\n};\n\ninterface RadioGroupInputProps extends RadixRadioGroup.RadioGroupItemProps {\n  /** The label text displayed next to the radio item */\n  label?: ReactNode;\n}\n\nexport type RadioGroupItemProps = RadioGroupInputProps & HTMLAttributes<HTMLDivElement>;\n\nconst RadioGroupItem = ({\n  id,\n  label,\n  value,\n  disabled,\n  required,\n  ...props\n}: RadioGroupItemProps) => {\n  const defaultId = useId();\n  return (\n    <Wrapper\n      $orientation=\"horizontal\"\n      $dir=\"end\"\n      $addLabelPadding={false}\n      {...props}\n    >\n      <RadioInput\n        value={value}\n        id={id ?? defaultId}\n        disabled={disabled}\n        required={required}\n        aria-label={`${label}`}\n      >\n        <RadioGroupIndicator />\n      </RadioInput>\n      {label && (\n        <GenericLabel\n          htmlFor={id ?? defaultId}\n          disabled={disabled}\n        >\n          {label}\n        </GenericLabel>\n      )}\n    </Wrapper>\n  );\n};\n\nRadioGroupItem.displayName = 'RadioGroupItem';\nRadioGroup.Item = RadioGroupItem;\n\nconst Wrapper = styled(FormRoot)`\n  padding: ${({ theme }) => theme.click.checkbox.space.all};\n\n  display: flex;\n  align-items: center;\n  gap: ${({ theme }) => theme.click.checkbox.space.gap};\n  width: auto;\n`;\n\nconst RadioInput = styled(RadixRadioGroup.Item)`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  outline: none;\n  cursor: pointer;\n  ${({ theme }) => `\n    border-radius: ${theme.click.radio.radii.all};\n    width: 1rem;\n    height: 1rem;\n    background: ${theme.click.radio.color.background.default};\n    border: 1px solid ${theme.click.radio.color.stroke.default};\n\n    &:hover {\n      background: ${theme.click.radio.color.background.hover};\n    }\n    &[data-state=\"checked\"] {\n      border-color: ${theme.click.radio.color.stroke.active};\n      background: ${theme.click.radio.color.background.active};\n    }\n    &[data-disabled] {\n      background: ${theme.click.radio.color.background.disabled};\n      border-color: ${theme.click.radio.color.stroke.disabled};\n    }\n  `};\n`;\n\nconst RadioGroupIndicator = styled(RadixRadioGroup.Indicator)`\n  ${({ theme }) => `\n    background: ${theme.click.radio.color.background.default};\n    &::after {\n      content: '';\n      display: block;\n      width: 6px;\n      height: 6px;\n      border-radius: 50%;\n      background-color: ${theme.click.radio.color.indicator.default};\n      &:hover {\n        background: ${theme.click.radio.color.indicator.hover};\n      }\n    }\n    &[data-state=\"checked\"] {\n      background: ${theme.click.radio.color.background.active};\n      &::after {\n        background: ${theme.click.radio.color.indicator.active};\n      }\n    }\n    &:hover {\n      background: ${theme.click.radio.color.background.hover};\n    }\n    &[data-disabled] {\n      background: ${theme.click.radio.color.background.disabled};\n      &::after {\n        background: ${theme.click.radio.color.indicator.disabled};\n      }\n    }\n  `}\n`;\n"],"names":["RadioGroupRoot","styled","RadixRadioGroup","Root","withConfig","componentId","theme","click","checkbox","space","gap","$inline","$error","field","color","label","error","RadioGroup","children","inline","orientation","dir","itemDir","disabled","id","props","FormRoot","jsxs","FormElementContainer","jsx","Error","Label","RadioGroupItem","value","required","defaultId","useId","GenericLabel","displayName","Item","Wrapper","all","RadioInput","radio","radii","background","default","stroke","hover","active","RadioGroupIndicator","Indicator","indicator"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import * as RadixRadioGroup from '@radix-ui/react-radio-group';\nimport { HTMLAttributes, ReactNode, useId } from 'react';\nimport { GenericLabel } from '@/components/GenericLabel';\nimport { Label } from '@/components/Label';\nimport { Error, FormElementContainer, FormRoot } from '@/components/FormContainer';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './RadioGroup.module.css';\n\nexport interface RadioGroupProps extends Omit<RadixRadioGroup.RadioGroupProps, 'dir'> {\n  /** Whether to display radio items inline (horizontally) */\n  inline?: boolean;\n  /** The orientation of the label relative to the radio group */\n  orientation?: 'vertical' | 'horizontal';\n  /** The direction/position of the label - start places label before, end places label after */\n  dir?: 'start' | 'end';\n  /** Text direction for radio items - ltr or rtl */\n  itemDir?: 'rtl' | 'ltr';\n  /** The label text displayed next to the radio group */\n  label?: ReactNode;\n  /** Error message to display below the radio group */\n  error?: ReactNode;\n}\n\nconst radioGroupVariants = cva(styles['radio-group'], {\n  variants: {\n    inline: {\n      true: styles['radio-group_inline'],\n      false: styles['radio-group_inline_false'],\n    },\n    error: {\n      true: styles['radio-group_error'],\n      false: '',\n    },\n  },\n  defaultVariants: {\n    inline: true,\n    error: false,\n  },\n});\n\nexport const RadioGroup = ({\n  children,\n  inline,\n  orientation,\n  dir,\n  error,\n  itemDir,\n  label,\n  disabled,\n  id,\n  className,\n  ...props\n}: RadioGroupProps) => {\n  return (\n    <FormRoot\n      $orientation={orientation}\n      $dir={dir}\n      $addLabelPadding\n    >\n      <FormElementContainer>\n        <RadixRadioGroup.Root\n          orientation={inline ? 'horizontal' : 'vertical'}\n          disabled={disabled}\n          id={id}\n          dir={itemDir}\n          {...props}\n          className={cn(\n            radioGroupVariants({\n              inline: inline === false ? false : true,\n              error: !!error,\n            }),\n            className\n          )}\n        >\n          {children}\n        </RadixRadioGroup.Root>\n        {!!error && error !== true && <Error>{error}</Error>}\n      </FormElementContainer>\n      {label && (\n        <Label\n          htmlFor={id}\n          disabled={disabled}\n          error={!!error}\n        >\n          {label}\n        </Label>\n      )}\n    </FormRoot>\n  );\n};\n\ninterface RadioGroupInputProps extends RadixRadioGroup.RadioGroupItemProps {\n  /** The label text displayed next to the radio item */\n  label?: ReactNode;\n}\n\nexport type RadioGroupItemProps = RadioGroupInputProps & HTMLAttributes<HTMLDivElement>;\n\nconst RadioGroupItem = ({\n  id,\n  label,\n  value,\n  disabled,\n  required,\n  className,\n  ...props\n}: RadioGroupItemProps) => {\n  const defaultId = useId();\n  return (\n    <FormRoot\n      $orientation=\"horizontal\"\n      $dir=\"end\"\n      $addLabelPadding={false}\n      {...props}\n      className={cn(styles.item, className)}\n    >\n      <RadixRadioGroup.Item\n        value={value}\n        id={id ?? defaultId}\n        disabled={disabled}\n        required={required}\n        aria-label={`${label}`}\n        className={styles['radio-input']}\n      >\n        <RadixRadioGroup.Indicator className={styles['radio-indicator']} />\n      </RadixRadioGroup.Item>\n      {label && (\n        <GenericLabel\n          htmlFor={id ?? defaultId}\n          disabled={disabled}\n        >\n          {label}\n        </GenericLabel>\n      )}\n    </FormRoot>\n  );\n};\n\nRadioGroupItem.displayName = 'RadioGroupItem';\nRadioGroup.Item = RadioGroupItem;\n"],"names":["radioGroupVariants","cva","styles","variants","inline","true","false","error","defaultVariants","RadioGroup","children","orientation","dir","itemDir","label","disabled","id","className","props","FormRoot","jsxs","FormElementContainer","jsx","RadixRadioGroup","cn","Error","Label","RadioGroupItem","value","required","defaultId","useId","item","GenericLabel","displayName","Item"],"mappings":"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"}

package/dist/cjs/components/Select/MultiSelectValue.cjs

@@ -1,3 +1,4 @@
+require("./MultiSelectValue.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
@@ -5,7 +6,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const react = require('react');
 const ReactSortableModule = require('react-sortablejs/dist/index.js');
-const styledComponents = require('styled-components');
+const MultiSelectValue_module = require('./MultiSelectValue.module.css.cjs');
 const Badge = require('../Badge/index.cjs');
 
 const _interopDefault = e => e && e.__esModule ? e : { default: e };
@@ -15,12 +16,6 @@ const ReactSortableModule__default = /*#__PURE__*/_interopDefault(ReactSortableM
 const {
   ReactSortable
 } = ReactSortableModule__default.default;
-const BadgeList = styledComponents.styled.div.withConfig({
-  componentId: "sc-1ryyiol-0"
-})(["display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:inherit;font:inherit;color:inherit;"]);
-const MultiSelectBadge = styledComponents.styled(Badge.Badge).withConfig({
-  componentId: "sc-1ryyiol-1"
-})(["width:100%;width:-webkit-fill-available;width:fill-available;width:stretch;max-width:fit-content;"]);
 const MultiSelectValue = ({
   selectedValues,
   valueNode,
@@ -43,7 +38,7 @@ const MultiSelectValue = ({
   if (selectedValues.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(BadgeList, { as: ReactSortable, disabled: !sortable, list: values, setList: setValues, onEnd: (e) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(ReactSortable, { className: MultiSelectValue_module.default["badge-list"], disabled: !sortable, list: values, setList: setValues, onEnd: (e) => {
     const {
       newDraggableIndex,
       oldDraggableIndex
@@ -75,7 +70,7 @@ const MultiSelectValue = ({
         }
       };
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(MultiSelectBadge, { size: "sm", state: disabled ? "disabled" : "default", ...otherProps }, `multi-select-${id}-${value}`);
+    return /* @__PURE__ */ jsxRuntime.jsx(Badge.Badge, { className: MultiSelectValue_module.default["multi-select-badge"], size: "sm", state: disabled ? "disabled" : "default", ...otherProps }, `multi-select-${id}-${value}`);
   }) });
 };
 

package/dist/cjs/components/Select/MultiSelectValue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectValue.cjs","sources":["../../../../src/components/Select/MultiSelectValue.tsx"],"sourcesContent":["import {\n  Badge,\n  BadgeProps,\n  DismissibleBadge,\n  NonDismissibleBadge,\n} from '@/components/Badge';\nimport { MouseEvent, useEffect, useId, useState } from 'react';\nimport ReactSortableModule from 'react-sortablejs/dist/index.js';\nimport type { ItemInterface } from 'react-sortablejs';\nconst { ReactSortable } = ReactSortableModule;\n\nimport { styled } from 'styled-components';\nimport { SelectItemProps } from './common/types';\n\nconst BadgeList = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  flex-wrap: wrap;\n  gap: inherit;\n  font: inherit;\n  color: inherit;\n`;\n\nconst MultiSelectBadge = styled(Badge)`\n  width: 100%;\n  width: -webkit-fill-available;\n  width: fill-available;\n  width: stretch;\n  max-width: fit-content;\n`;\n\ninterface MultiSelectValueProps {\n  selectedValues: string[];\n  valueNode: Map<string, SelectItemProps>;\n  onChange: (selectedValues: string[]) => void;\n  onSelect: (selectedValue: string) => void;\n  sortable: boolean;\n  disabled: boolean;\n}\n\nexport const MultiSelectValue = ({\n  selectedValues,\n  valueNode,\n  onChange,\n  sortable,\n  onSelect,\n  disabled,\n}: MultiSelectValueProps) => {\n  const id = useId();\n  const [values, setValues] = useState<ItemInterface[]>(\n    selectedValues.map(value => ({\n      id: `multi-select-${id}-${value}`,\n      value,\n    }))\n  );\n  useEffect(() => {\n    setValues(\n      selectedValues.map(value => ({\n        id: `multi-select-${id}-${value}`,\n        value,\n      }))\n    );\n  }, [id, selectedValues]);\n  if (selectedValues.length === 0) {\n    return null;\n  }\n\n  return (\n    <BadgeList\n      as={ReactSortable}\n      disabled={!sortable}\n      list={values}\n      setList={setValues}\n      onEnd={e => {\n        const { newDraggableIndex, oldDraggableIndex } = e;\n        if (\n          typeof newDraggableIndex === 'number' &&\n          typeof oldDraggableIndex === 'number' &&\n          oldDraggableIndex !== newDraggableIndex\n        ) {\n          const temp = selectedValues[oldDraggableIndex];\n          selectedValues[oldDraggableIndex] = selectedValues[newDraggableIndex];\n          selectedValues[newDraggableIndex] = temp;\n          onChange(selectedValues);\n        }\n      }}\n      revertOnSpill\n    >\n      {selectedValues.map(value => {\n        const nodeProps = valueNode.get(value) ?? { children: value, value: value };\n        let otherProps: BadgeProps = {\n          text: nodeProps.label ?? nodeProps.children,\n          icon: nodeProps?.icon,\n          iconDir: nodeProps?.iconDir,\n        } as NonDismissibleBadge;\n        if (!disabled && !nodeProps.disabled) {\n          otherProps = {\n            ...otherProps,\n            dismissible: true,\n            onClose: (e: MouseEvent<HTMLOrSVGElement>) => {\n              e.preventDefault();\n              e.stopPropagation();\n              onSelect(nodeProps.value);\n            },\n          } as DismissibleBadge;\n        }\n        return (\n          <MultiSelectBadge\n            key={`multi-select-${id}-${value}`}\n            size=\"sm\"\n            state={disabled ? 'disabled' : 'default'}\n            {...otherProps}\n          />\n        );\n      })}\n    </BadgeList>\n  );\n};\n"],"names":["ReactSortable","ReactSortableModule","BadgeList","styled","div","withConfig","componentId","MultiSelectBadge","Badge","MultiSelectValue","selectedValues","valueNode","onChange","sortable","onSelect","disabled","id","useId","values","setValues","useState","map","value","useEffect","length","jsx","e","newDraggableIndex","oldDraggableIndex","temp","nodeProps","get","children","otherProps","text","label","icon","iconDir","dismissible","onClose","preventDefault","stopPropagation"],"mappings":"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"}
+{"version":3,"file":"MultiSelectValue.cjs","sources":["../../../../src/components/Select/MultiSelectValue.tsx"],"sourcesContent":["import {\n  Badge,\n  BadgeProps,\n  DismissibleBadge,\n  NonDismissibleBadge,\n} from '@/components/Badge';\nimport { MouseEvent, useEffect, useId, useState } from 'react';\nimport ReactSortableModule from 'react-sortablejs/dist/index.js';\nimport type { ItemInterface } from 'react-sortablejs';\nconst { ReactSortable } = ReactSortableModule;\n\nimport { SelectItemProps } from './common/types';\nimport styles from './MultiSelectValue.module.css';\n\ninterface MultiSelectValueProps {\n  selectedValues: string[];\n  valueNode: Map<string, SelectItemProps>;\n  onChange: (selectedValues: string[]) => void;\n  onSelect: (selectedValue: string) => void;\n  sortable: boolean;\n  disabled: boolean;\n}\n\nexport const MultiSelectValue = ({\n  selectedValues,\n  valueNode,\n  onChange,\n  sortable,\n  onSelect,\n  disabled,\n}: MultiSelectValueProps) => {\n  const id = useId();\n  const [values, setValues] = useState<ItemInterface[]>(\n    selectedValues.map(value => ({\n      id: `multi-select-${id}-${value}`,\n      value,\n    }))\n  );\n  useEffect(() => {\n    setValues(\n      selectedValues.map(value => ({\n        id: `multi-select-${id}-${value}`,\n        value,\n      }))\n    );\n  }, [id, selectedValues]);\n  if (selectedValues.length === 0) {\n    return null;\n  }\n\n  return (\n    <ReactSortable\n      className={styles['badge-list']}\n      disabled={!sortable}\n      list={values}\n      setList={setValues}\n      onEnd={e => {\n        const { newDraggableIndex, oldDraggableIndex } = e;\n        if (\n          typeof newDraggableIndex === 'number' &&\n          typeof oldDraggableIndex === 'number' &&\n          oldDraggableIndex !== newDraggableIndex\n        ) {\n          const temp = selectedValues[oldDraggableIndex];\n          selectedValues[oldDraggableIndex] = selectedValues[newDraggableIndex];\n          selectedValues[newDraggableIndex] = temp;\n          onChange(selectedValues);\n        }\n      }}\n      revertOnSpill\n    >\n      {selectedValues.map(value => {\n        const nodeProps = valueNode.get(value) ?? { children: value, value: value };\n        let otherProps: BadgeProps = {\n          text: nodeProps.label ?? nodeProps.children,\n          icon: nodeProps?.icon,\n          iconDir: nodeProps?.iconDir,\n        } as NonDismissibleBadge;\n        if (!disabled && !nodeProps.disabled) {\n          otherProps = {\n            ...otherProps,\n            dismissible: true,\n            onClose: (e: MouseEvent<HTMLOrSVGElement>) => {\n              e.preventDefault();\n              e.stopPropagation();\n              onSelect(nodeProps.value);\n            },\n          } as DismissibleBadge;\n        }\n        return (\n          <Badge\n            className={styles['multi-select-badge']}\n            key={`multi-select-${id}-${value}`}\n            size=\"sm\"\n            state={disabled ? 'disabled' : 'default'}\n            {...otherProps}\n          />\n        );\n      })}\n    </ReactSortable>\n  );\n};\n"],"names":["ReactSortable","ReactSortableModule","MultiSelectValue","selectedValues","valueNode","onChange","sortable","onSelect","disabled","id","useId","values","setValues","useState","map","value","useEffect","length","jsx","styles","e","newDraggableIndex","oldDraggableIndex","temp","nodeProps","get","children","otherProps","text","label","icon","iconDir","dismissible","onClose","preventDefault","stopPropagation","Badge"],"mappings":"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"}

package/dist/cjs/components/Select/MultiSelectValue.css

@@ -0,0 +1,19 @@
+.badge-list__WpJAq {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: center;
+  gap: inherit;
+  color: inherit;
+  font: inherit;
+}
+
+.multi-select-badge__vk7YC {
+  /* stylelint-disable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown -- the original rule used this same width fallback chain so the badge fills the available inline space up to its content width. */
+  width: 100%;
+  width: -webkit-fill-available;
+  width: fill-available;
+  width: stretch;
+  max-width: fit-content;
+  /* stylelint-enable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown */
+}

package/dist/cjs/components/Select/MultiSelectValue.module.css.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const styles = {
+	"badge-list": "badge-list__WpJAq",
+	"multi-select-badge": "multi-select-badge__vk7YC"
+};
+
+exports.default = styles;
+//# sourceMappingURL=MultiSelectValue.module.css.cjs.map

package/dist/cjs/components/Select/MultiSelectValue.module.css.cjs.map

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

package/dist/cjs/components/Select/SingleSelectValue.cjs

@@ -1,14 +1,12 @@
+require("./SingleSelectValue.css");
 'use strict';
 
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
 
 const jsxRuntime = require('react/jsx-runtime');
-const styledComponents = require('styled-components');
 const IconWrapper = require('../IconWrapper/index.cjs');
+const SingleSelectValue_module = require('./SingleSelectValue.module.css.cjs');
 
-const SelectValueContainer = styledComponents.styled.div.withConfig({
-  componentId: "sc-1bceuv1-0"
-})(["display:flex;width:100%;align-items:center;cursor:inherit;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:inherit;"]);
 const SingleSelectValue = ({
   valueNode,
   value
@@ -22,7 +20,7 @@ const SingleSelectValue = ({
     children,
     label
   } = valueNode ?? {};
-  return /* @__PURE__ */ jsxRuntime.jsx(SelectValueContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(IconWrapper.IconWrapper, { icon, iconDir, gap: "xxs", isResponsive: false, children: label ?? children ?? value }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: SingleSelectValue_module.default["select-value-container"], children: /* @__PURE__ */ jsxRuntime.jsx(IconWrapper.IconWrapper, { icon, iconDir, gap: "xxs", isResponsive: false, children: label ?? children ?? value }) });
 };
 
 exports.default = SingleSelectValue;

package/dist/cjs/components/Select/SingleSelectValue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SingleSelectValue.cjs","sources":["../../../../src/components/Select/SingleSelectValue.tsx"],"sourcesContent":["import { styled } from 'styled-components';\nimport { SelectItemProps } from './common/types';\nimport { IconWrapper } from '@/components/IconWrapper';\n\nconst SelectValueContainer = styled.div`\n  display: flex;\n  width: 100%;\n  align-items: center;\n  cursor: inherit;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  pointer-events: inherit;\n`;\n\nconst SingleSelectValue = ({\n  valueNode,\n  value,\n}: {\n  valueNode?: SelectItemProps;\n  value: string;\n}) => {\n  if (value === undefined || value === null) {\n    return null;\n  }\n\n  const { icon, iconDir, children, label } = valueNode ?? {};\n\n  return (\n    <SelectValueContainer>\n      <IconWrapper\n        icon={icon}\n        iconDir={iconDir}\n        gap=\"xxs\"\n        isResponsive={false}\n      >\n        {label ?? children ?? value}\n      </IconWrapper>\n    </SelectValueContainer>\n  );\n};\n\nexport default SingleSelectValue;\n"],"names":["SelectValueContainer","styled","div","withConfig","componentId","SingleSelectValue","valueNode","value","undefined","icon","iconDir","children","label","jsx","IconWrapper"],"mappings":";;;;;;;;AAIA,MAAMA,oBAAAA,GAAuBC,uBAAAA,CAAOC,GAAAA,CAAGC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,6IAAA,CAAA,CAAA;AAWvC,MAAMC,oBAAoBA,CAAC;AAAA,EACzBC,SAAAA;AAAAA,EACAC;AAIF,CAAA,KAAM;AACJ,EAAA,IAAIA,KAAAA,KAAUC,MAAAA,IAAaD,KAAAA,KAAU,IAAA,EAAM;AACzC,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,MAAM;AAAA,IAAEE,IAAAA;AAAAA,IAAMC,OAAAA;AAAAA,IAASC,QAAAA;AAAAA,IAAUC;AAAAA,GAAM,GAAIN,aAAa,EAAC;AAEzD,EAAA,uBACEO,cAAA,CAAC,oBAAA,EAAA,EACC,QAAA,kBAAAA,cAAA,CAACC,uBAAA,EAAA,EACC,IAAA,EACA,OAAA,EACA,GAAA,EAAI,KAAA,EACJ,YAAA,EAAc,KAAA,EAEbF,QAAAA,EAAAA,KAAAA,IAASD,QAAAA,IAAYJ,OACxB,CAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"SingleSelectValue.cjs","sources":["../../../../src/components/Select/SingleSelectValue.tsx"],"sourcesContent":["import { SelectItemProps } from './common/types';\nimport { IconWrapper } from '@/components/IconWrapper';\nimport styles from './SingleSelectValue.module.css';\n\nconst SingleSelectValue = ({\n  valueNode,\n  value,\n}: {\n  valueNode?: SelectItemProps;\n  value: string;\n}) => {\n  if (value === undefined || value === null) {\n    return null;\n  }\n\n  const { icon, iconDir, children, label } = valueNode ?? {};\n\n  return (\n    <div className={styles['select-value-container']}>\n      <IconWrapper\n        icon={icon}\n        iconDir={iconDir}\n        gap=\"xxs\"\n        isResponsive={false}\n      >\n        {label ?? children ?? value}\n      </IconWrapper>\n    </div>\n  );\n};\n\nexport default SingleSelectValue;\n"],"names":["SingleSelectValue","valueNode","value","undefined","icon","iconDir","children","label","styles","jsx","IconWrapper"],"mappings":";;;;;;;;AAIA,MAAMA,oBAAoBA,CAAC;AAAA,EACzBC,SAAAA;AAAAA,EACAC;AAIF,CAAA,KAAM;AACJ,EAAA,IAAIA,KAAAA,KAAUC,MAAAA,IAAaD,KAAAA,KAAU,IAAA,EAAM;AACzC,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,MAAM;AAAA,IAAEE,IAAAA;AAAAA,IAAMC,OAAAA;AAAAA,IAASC,QAAAA;AAAAA,IAAUC;AAAAA,GAAM,GAAIN,aAAa,EAAC;AAEzD,EAAA,sCACG,KAAA,EAAA,EAAI,SAAA,EAAWO,gCAAAA,CAAO,wBAAwB,GAC7C,QAAA,kBAAAC,cAAA,CAACC,uBAAA,EAAA,EACC,IAAA,EACA,OAAA,EACA,KAAI,KAAA,EACJ,YAAA,EAAc,OAEbH,QAAAA,EAAAA,KAAAA,IAASD,QAAAA,IAAYJ,OACxB,CAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/cjs/components/Select/SingleSelectValue.css

@@ -0,0 +1,10 @@
+.select-value-container__I2dbz {
+  display: flex;
+  width: 100%;
+  overflow: hidden;
+  align-items: center;
+  white-space: nowrap;
+  cursor: inherit;
+  pointer-events: inherit;
+  text-overflow: ellipsis;
+}

package/dist/cjs/components/Select/SingleSelectValue.module.css.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const styles = {
+	"select-value-container": "select-value-container__I2dbz"
+};
+
+exports.default = styles;
+//# sourceMappingURL=SingleSelectValue.module.css.cjs.map

package/dist/cjs/components/Select/SingleSelectValue.module.css.cjs.map

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

package/dist/cjs/components/Select/common/InternalSelect.cjs

@@ -5,7 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const react = require('react');
 const RadixPopover = require('@radix-ui/react-popover');
-const SelectStyled = require('./SelectStyled.cjs');
+const SelectComponents = require('./SelectComponents.cjs');
 const OptionContext = require('./OptionContext.cjs');
 const MultiSelectValue = require('../MultiSelectValue.cjs');
 const SingleSelectValue = require('../SingleSelectValue.cjs');
@@ -14,7 +14,7 @@ const mergeRefs = require('../../../utils/mergeRefs.cjs');
 const GenericMenu = require('../../GenericMenu/index.cjs');
 const IconWrapper = require('../../IconWrapper/index.cjs');
 const useInputModality = require('../../../hooks/internal/useInputModality.cjs');
-const styledComponents = require('styled-components');
+const cva = require('../../../lib/cva.cjs');
 const getTextFromNodes = require('../../../lib/getTextFromNodes.cjs');
 const PortalContext = require('../../../providers/PortalContext.cjs');
 const FormRoot = require('../../FormContainer/FormRoot.cjs');
@@ -72,7 +72,7 @@ const NoOptionsDisplay = ({
   if (isCustomReactNode) {
     return /* @__PURE__ */ jsxRuntime.jsx(Container.Container, { onClick: handleNoOptionsClick, ...containerProps, children: noOptionsNode });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(SelectStyled.SelectNoDataContainer, { onClick: handleNoOptionsClick, $clickable: allowCreateOption, ...containerProps, children: noOptionsNode });
+  return /* @__PURE__ */ jsxRuntime.jsx(SelectComponents.SelectNoDataContainer, { onClick: handleNoOptionsClick, $clickable: allowCreateOption, ...containerProps, children: noOptionsNode });
 };
 const childrenToComboboxItemArray = (children, callback, heading) => {
   return react.Children.toArray(children).flatMap((child) => {
@@ -297,25 +297,25 @@ const InternalSelect = ({
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(FormRoot.FormRoot, { $orientation: orientation, $dir: dir, $addLabelPadding: true, ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(FormElementContainer.FormElementContainer, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(SelectStyled.SelectPopoverRoot, { open, onOpenChange, modal: true, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(SelectStyled.StyledSelectTrigger, { id: id ?? defaultId, $error: !!error, disabled, "data-testid": "select-trigger", ...triggerProps, children: [
-          isInitialized && /* @__PURE__ */ jsxRuntime.jsx(SelectStyled.SelectValue, { children: selectedValues.length === 0 ? placeholder : multiple ? /* @__PURE__ */ jsxRuntime.jsx(MultiSelectValue.MultiSelectValue, { disabled: disabled ?? false, onSelect, selectedValues, sortable: !disabled && sortable, valueNode: valueNode.current, onChange }) : /* @__PURE__ */ jsxRuntime.jsx(SingleSelectValue.default, { valueNode: checkbox && selectLabel ? {
+      /* @__PURE__ */ jsxRuntime.jsxs(SelectComponents.SelectPopoverRoot, { open, onOpenChange, modal: true, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(SelectComponents.StyledSelectTrigger, { id: id ?? defaultId, $error: !!error, disabled, "data-testid": "select-trigger", ...triggerProps, children: [
+          isInitialized && /* @__PURE__ */ jsxRuntime.jsx(SelectComponents.SelectValue, { children: selectedValues.length === 0 ? placeholder : multiple ? /* @__PURE__ */ jsxRuntime.jsx(MultiSelectValue.MultiSelectValue, { disabled: disabled ?? false, onSelect, selectedValues, sortable: !disabled && sortable, valueNode: valueNode.current, onChange }) : /* @__PURE__ */ jsxRuntime.jsx(SingleSelectValue.default, { valueNode: checkbox && selectLabel ? {
             label: selectLabel,
             value: selectLabel
           } : valueNode.current.get(selectedValues[0]), value: selectedValues[0] }) }),
           /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "sort", size: "sm" })
         ] }),
-        form && /* @__PURE__ */ jsxRuntime.jsx(SelectStyled.HiddenSelectElement, { multiple, name, form, value: selectedValues, onChange: () => null, children: list.map((item) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: item.value, disabled: item.disabled, children: item.value }, item.value)) }),
-        /* @__PURE__ */ jsxRuntime.jsx(RadixPopover.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(SelectStyled.SelectPopoverContent, { ...inputModalityProps, sideOffset: 5, onFocus, onCloseAutoFocus: () => {
+        form && /* @__PURE__ */ jsxRuntime.jsx(SelectComponents.HiddenSelectElement, { multiple, name, form, value: selectedValues, onChange: () => null, children: list.map((item) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: item.value, disabled: item.disabled, children: item.value }, item.value)) }),
+        /* @__PURE__ */ jsxRuntime.jsx(RadixPopover.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(SelectComponents.SelectPopoverContent, { ...inputModalityProps, sideOffset: 5, onFocus, onCloseAutoFocus: () => {
           onUpdateSearch("");
         }, onOpenAutoFocus: () => {
           setHighlighted(visibleList.current[0]);
-        }, align: "start", $useFullWidthItems: useFullWidthItems, $itemCharacterLimit: itemCharacterLimit, children: /* @__PURE__ */ jsxRuntime.jsxs(SelectStyled.SelectList, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(SelectStyled.SearchBarContainer, { $showSearch: showSearch, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(SelectStyled.SearchBar, { ref: inputRef, value: search, onChange: (e) => onUpdateSearch(e.target.value), "data-testid": "select-search-input", onKeyDown, $showSearch: showSearch }),
-            /* @__PURE__ */ jsxRuntime.jsx(SelectStyled.SearchClose, { as: IconButton.IconButton, icon: "cross", onClick: clearSearch, "data-testid": "select-search-close", $showClose: search.length > 0, size: "xs" })
+        }, align: "start", $useFullWidthItems: useFullWidthItems, $itemCharacterLimit: itemCharacterLimit, children: /* @__PURE__ */ jsxRuntime.jsxs(SelectComponents.SelectList, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(SelectComponents.SearchBarContainer, { $showSearch: showSearch, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SelectComponents.SearchBar, { ref: inputRef, value: search, onChange: (e) => onUpdateSearch(e.target.value), "data-testid": "select-search-input", onKeyDown, $showSearch: showSearch }),
+            /* @__PURE__ */ jsxRuntime.jsx(IconButton.IconButton, { className: cva.cn(SelectComponents.selectStyles["search-close"], search.length > 0 && SelectComponents.selectStyles["search-close_show-close"]), htmlType: "button", icon: "cross", onClick: clearSearch, "data-testid": "select-search-close", size: "xs" })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(SelectStyled.SelectListContent, { $maxHeight: maxHeight, children: /* @__PURE__ */ jsxRuntime.jsx(OptionContext.OptionContext.Provider, { value: optionContextValue, children: options && options.length > 0 ? options.map((props2, index) => {
+          /* @__PURE__ */ jsxRuntime.jsx(SelectComponents.SelectListContent, { $maxHeight: maxHeight, children: /* @__PURE__ */ jsxRuntime.jsx(OptionContext.OptionContext.Provider, { value: optionContextValue, children: options && options.length > 0 ? options.map((props2, index) => {
             if ("options" in props2) {
               const {
                 options: itemList = [],
@@ -348,7 +348,7 @@ const SelectGroup = react.forwardRef(({
   ...props
 }, forwardedRef) => {
   useOption.useSearch();
-  return /* @__PURE__ */ jsxRuntime.jsxs(SelectStyled.SelectGroupContainer, { ...props, ref: mergeRefs.mergeRefs([forwardedRef, (node) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(SelectComponents.SelectGroupContainer, { ...props, ref: mergeRefs.mergeRefs([forwardedRef, (node) => {
     const hidden = node?.querySelectorAll("[cui-select-item]").length === 0;
     if (hidden) {
       node?.setAttribute("hidden", "");
@@ -357,16 +357,11 @@ const SelectGroup = react.forwardRef(({
     }
     node?.setAttribute("aria-hidden", hidden.toString());
   }]), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(SelectStyled.SelectGroupName, { children: heading }),
-    /* @__PURE__ */ jsxRuntime.jsx(SelectStyled.SelectGroupContent, { children })
+    /* @__PURE__ */ jsxRuntime.jsx(SelectComponents.SelectGroupName, { children: heading }),
+    /* @__PURE__ */ jsxRuntime.jsx(SelectComponents.SelectGroupContent, { children })
   ] });
 });
 SelectGroup.displayName = "Select.Group";
-const CheckIcon = styledComponents.styled.svg.withConfig({
-  componentId: "sc-howzwz-0"
-})(["opacity:", ";"], ({
-  $showCheck
-}) => $showCheck ? 1 : 0);
 const SelectItem = react.forwardRef(({
   disabled = false,
   children,
@@ -413,7 +408,7 @@ const SelectItem = react.forwardRef(({
         label,
         description && /* @__PURE__ */ jsxRuntime.jsx(SelectItemDescription, { children: description })
       ] }) : children }),
-      /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { as: Icon.Icon, name: "check", size: "sm", $showCheck: isChecked })
+      /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { className: cva.cn(SelectComponents.selectStyles["check-icon"], isChecked && SelectComponents.selectStyles["check-icon_show-check"]), name: "check", size: "sm" })
     ] }),
     separator && /* @__PURE__ */ jsxRuntime.jsx(Separator.Separator, { size: "sm" })
   ] });
@@ -476,7 +471,7 @@ const SelectItemDescription = react.forwardRef(({
   children,
   ...props
 }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { ref, component: SelectStyled.SelectItemDescriptionText, color: "muted", ...props, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { ref, component: SelectComponents.SelectItemDescriptionText, color: "muted", ...props, children });
 });
 SelectItemDescription.displayName = "Select.ItemDescription";