@clickhouse/click-ui 0.7.0 → 0.9.0

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/Panel/Panel.tsx"],"sourcesContent":["import type { Orientation } from '@/types';\nimport type { CursorOptions } from './Panel.types';\nimport { HTMLAttributes } from 'react';\nimport { styled } from 'styled-components';\n\nexport type PanelPadding = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\nexport type PanelColor = 'default' | 'muted' | 'transparent';\nexport type PanelRadii = 'none' | 'sm' | 'md' | 'lg';\ntype AlignItemsOption = 'start' | 'center' | 'end';\n\nexport interface PanelProps extends HTMLAttributes<HTMLDivElement> {\n  /** Alignment of items along the cross axis */\n  alignItems?: AlignItemsOption;\n  /** The content to display inside the panel */\n  children?: React.ReactNode;\n  /** The background color variant of the panel */\n  color?: PanelColor;\n  /** The cursor style when hovering over the panel */\n  cursor?: CursorOptions;\n  /** Whether the panel should fill the full height of its container */\n  fillHeight?: boolean;\n  /** Whether the panel should fill the full width of its container */\n  fillWidth?: boolean;\n  /** The gap between child elements */\n  gap?: PanelPadding;\n  /** Whether to show a border around the panel */\n  hasBorder?: boolean;\n  /** Whether to show a shadow on the panel */\n  hasShadow?: boolean;\n  /** Fixed height of the panel */\n  height?: string;\n  /** The orientation of content flow - horizontal or vertical */\n  orientation?: Orientation;\n  /** The padding inside the panel */\n  padding?: PanelPadding;\n  /** The border radius of the panel corners */\n  radii?: PanelRadii;\n  /** Fixed width of the panel */\n  width?: string;\n}\n\nexport const Panel = ({\n  alignItems = 'center',\n  children,\n  color,\n  cursor,\n  fillHeight,\n  fillWidth,\n  gap,\n  hasBorder,\n  hasShadow,\n  height,\n  orientation = 'horizontal',\n  padding,\n  radii = 'sm',\n  width,\n  ...props\n}: PanelProps) => (\n  <Wrapper\n    $alignItems={alignItems}\n    $color={color}\n    $cursor={cursor}\n    $fillHeight={fillHeight}\n    $fillWidth={fillWidth}\n    $gap={gap}\n    $hasBorder={hasBorder}\n    $hasShadow={hasShadow}\n    $height={height}\n    $orientation={orientation}\n    $padding={padding}\n    $radii={radii}\n    $width={width}\n    {...props}\n  >\n    {children}\n  </Wrapper>\n);\n\nconst Wrapper = styled.div<{\n  $alignItems?: AlignItemsOption;\n  $color?: PanelColor;\n  $cursor?: CursorOptions;\n  $fillHeight?: boolean;\n  $fillWidth?: boolean;\n  $gap?: PanelPadding;\n  $hasBorder?: boolean;\n  $hasShadow?: boolean;\n  $height?: string;\n  $orientation?: Orientation;\n  $padding?: PanelPadding;\n  $radii?: PanelRadii;\n  $width?: string;\n}>`\n  display: flex;\n  flex-flow: ${({ $orientation = 'horizontal' }) =>\n    $orientation === 'horizontal' ? 'row wrap' : 'column'};\n  align-items: ${({ $alignItems = 'center' }) =>\n    $alignItems === 'center' ? 'center' : `flex-${$alignItems}`};\n  width: ${({ $width, $fillWidth }) => ($fillWidth ? '100%' : $width)};\n  height: ${({ $height, $fillHeight }) => ($fillHeight ? '100%' : $height)};\n  background-color: ${({ $color = 'default', theme }) =>\n    theme.click.panel.color.background[$color]};\n  border-radius: ${({ $radii = 'sm', theme }) => theme.click.panel.radii[$radii]};\n  padding: ${({ $padding = 'md', theme }) => theme.click.panel.space.y[$padding]};\n  border: ${({ $hasBorder, theme }) =>\n    $hasBorder ? `1px solid ${theme.click.global.color.stroke.default}` : 'none'};\n  box-shadow: ${({ $hasShadow, theme }) => ($hasShadow ? theme.shadow[1] : 'none')};\n  gap: ${({ $gap = 'sm', theme }) => theme.click.panel.space.gap[$gap]};\n  ${({ $cursor }) => $cursor && `cursor: ${$cursor}`};\n`;\n"],"names":["Panel","alignItems","children","color","cursor","fillHeight","fillWidth","gap","hasBorder","hasShadow","height","orientation","padding","radii","width","props","jsx","Wrapper","styled","div","withConfig","componentId","$orientation","$alignItems","$width","$fillWidth","$height","$fillHeight","$color","theme","click","panel","background","$radii","$padding","space","y","$hasBorder","global","stroke","default","$hasShadow","shadow","$gap","$cursor"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Panel/Panel.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport { useMemo } from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport type { PanelProps } from './Panel.types';\nimport styles from './Panel.module.css';\n\nconst panelVariants = cva(styles.panel, {\n  variants: {\n    orientation: {\n      horizontal: styles.panel_orientation_horizontal,\n      vertical: styles.panel_orientation_vertical,\n    },\n    alignItems: {\n      start: styles['panel_align-items_start'],\n      center: styles['panel_align-items_center'],\n      end: styles['panel_align-items_end'],\n    },\n    color: {\n      default: styles.panel_color_default,\n      muted: styles.panel_color_muted,\n      transparent: styles.panel_color_transparent,\n    },\n    radii: {\n      none: styles.panel_radii_none,\n      sm: styles.panel_radii_sm,\n      md: styles.panel_radii_md,\n      lg: styles.panel_radii_lg,\n    },\n    padding: {\n      none: styles.panel_padding_none,\n      xs: styles.panel_padding_xs,\n      sm: styles.panel_padding_sm,\n      md: styles.panel_padding_md,\n      lg: styles.panel_padding_lg,\n      xl: styles.panel_padding_xl,\n    },\n    gap: {\n      none: styles.panel_gap_none,\n      xs: styles.panel_gap_xs,\n      sm: styles.panel_gap_sm,\n      md: styles.panel_gap_md,\n      lg: styles.panel_gap_lg,\n      xl: styles.panel_gap_xl,\n    },\n    hasBorder: {\n      true: styles.panel_border,\n    },\n    hasShadow: {\n      true: styles.panel_shadow,\n    },\n  },\n  defaultVariants: {\n    orientation: 'horizontal',\n    alignItems: 'center',\n    color: 'default',\n    radii: 'sm',\n    padding: 'md',\n    gap: 'sm',\n  },\n});\n\nexport const Panel = ({\n  alignItems = 'center',\n  children,\n  color,\n  cursor,\n  fillHeight,\n  fillWidth,\n  gap,\n  hasBorder,\n  hasShadow,\n  height,\n  orientation = 'horizontal',\n  padding,\n  radii = 'sm',\n  width,\n  className,\n  style,\n  ...props\n}: PanelProps) => {\n  const mergedStyle = useMemo(\n    () =>\n      ({\n        ...(cursor && { '--panel-cursor': cursor }),\n        ...((fillWidth || width) && { '--panel-width': fillWidth ? '100%' : width }),\n        ...((fillHeight || height) && {\n          '--panel-height': fillHeight ? '100%' : height,\n        }),\n        ...style,\n      }) as CSSProperties,\n    [cursor, fillWidth, width, fillHeight, height, style]\n  );\n\n  return (\n    <div\n      {...props}\n      style={mergedStyle}\n      className={cn(\n        panelVariants({\n          orientation,\n          alignItems,\n          color,\n          radii,\n          padding,\n          gap,\n          hasBorder,\n          hasShadow,\n        }),\n        cursor && styles.panel_cursor,\n        className\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["panelVariants","cva","styles","panel","variants","orientation","horizontal","panel_orientation_horizontal","vertical","panel_orientation_vertical","alignItems","start","center","end","color","default","panel_color_default","muted","panel_color_muted","transparent","panel_color_transparent","radii","none","panel_radii_none","sm","panel_radii_sm","md","panel_radii_md","lg","panel_radii_lg","padding","panel_padding_none","xs","panel_padding_xs","panel_padding_sm","panel_padding_md","panel_padding_lg","xl","panel_padding_xl","gap","panel_gap_none","panel_gap_xs","panel_gap_sm","panel_gap_md","panel_gap_lg","panel_gap_xl","hasBorder","true","panel_border","hasShadow","panel_shadow","defaultVariants","Panel","children","cursor","fillHeight","fillWidth","height","width","className","style","props","mergedStyle","useMemo","jsx","cn","panel_cursor"],"mappings":"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"}

package/dist/cjs/components/Popover/Popover.css

@@ -10,3 +10,23 @@
 .menu-panel_show-close__Qx3Mo {
   padding-top: 1rem;
 }
+
+.trigger__QvCU1 {
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- `fit-content`
+     keyword on `width` is widely supported on evergreen browsers; the original
+     rule used the same value. */
+  width: fit-content;
+  border: none;
+  background: inherit;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+.close-button__fpjhc {
+  position: absolute;
+  top: var(--click-popover-space-y);
+  right: var(--click-popover-space-x);
+  width: var(--click-popover-icon-size-width);
+  height: var(--click-popover-icon-size-height);
+}

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

@@ -2,10 +2,14 @@
 
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
 
+const trigger = "trigger__QvCU1";
 const styles = {
 	"menu-panel": "menu-panel__-IeVm",
-	"menu-panel_show-close": "menu-panel_show-close__Qx3Mo"
+	"menu-panel_show-close": "menu-panel_show-close__Qx3Mo",
+	trigger: trigger,
+	"close-button": "close-button__fpjhc"
 };
 
 exports.default = styles;
+exports.trigger = trigger;
 //# sourceMappingURL=Popover.module.css.cjs.map

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

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

package/dist/cjs/components/Popover/index.cjs

@@ -6,10 +6,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const RadixPopover = require('@radix-ui/react-popover');
 const GenericMenu = require('../GenericMenu/index.cjs');
-const styledComponents = require('styled-components');
 const react = require('react');
 const cva = require('../../lib/cva.cjs');
-const EmptyButton = require('../EmptyButton/index.cjs');
 const PopoverArrow = require('../Assets/Icons/Popover-Arrow.cjs');
 const PortalContext = require('../../providers/PortalContext.cjs');
 const Popover_module = require('./Popover.module.css.cjs');
@@ -42,16 +40,13 @@ const Popover = ({
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Root, { ...props, children });
 };
-const Trigger = styledComponents.styled(RadixPopover__namespace.Trigger).withConfig({
-  componentId: "sc-1dii14g-0"
-})(["background:inherit;border:none;color:inherit;cursor:pointer;font:inherit;width:fit-content;"]);
 const PopoverTrigger = ({
   anchor,
   children,
   ...props
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Trigger, { asChild: true, ...props, children: /* @__PURE__ */ jsxRuntime.jsx("div", { children }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Trigger, { asChild: true, ...props, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: Popover_module.default.trigger, children }) }),
     anchor && /* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Anchor, { asChild: true, children: anchor })
   ] });
 };
@@ -76,17 +71,6 @@ const _MenuPanel = ({
   showClose
 }), className) });
 const MenuPanel = react.forwardRef(_MenuPanel);
-const CloseButton = styledComponents.styled(EmptyButton.EmptyButton).withConfig({
-  componentId: "sc-1dii14g-1"
-})(["position:absolute;top:", ";right:", ";width:", ";height:", ";"], ({
-  theme
-}) => theme.click.popover.space.y, ({
-  theme
-}) => theme.click.popover.space.x, ({
-  theme
-}) => theme.click.popover.icon.size.width, ({
-  theme
-}) => theme.click.popover.icon.size.height);
 const PopoverContent = ({
   children,
   showArrow,
@@ -97,7 +81,7 @@ const PopoverContent = ({
 }) => {
   const portalContainer = PortalContext.useResolvedPortalContainer(container);
   return /* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Portal, { forceMount, container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(MenuPanel, { as: RadixPopover__namespace.Content, type: "popover", showClose, showArrow, sideOffset: 4, ...props, children: [
-    showClose && /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { as: RadixPopover__namespace.Close, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "cross" }) }),
+    showClose && /* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Close, { asChild: true, className: Popover_module.default["close-button"], children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "cross" }) }),
     showArrow && /* @__PURE__ */ jsxRuntime.jsx(GenericMenu.Arrow, { asChild: true, as: RadixPopover__namespace.Arrow, width: 20, height: 10, children: /* @__PURE__ */ jsxRuntime.jsx(PopoverArrow.default, {}) }),
     children
   ] }) });

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as RadixPopover from '@radix-ui/react-popover';\nimport { Arrow, GenericMenuPanel } from '@/components/GenericMenu';\nimport { styled } from 'styled-components';\nimport {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport { Icon } from '@/components/Icon';\nimport { EmptyButton } from '@/components/EmptyButton';\nimport Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';\nimport { useResolvedPortalContainer } from '@/providers/PortalContext';\nimport styles from './Popover.module.css';\n\nexport const Popover = ({ children, ...props }: RadixPopover.PopoverProps) => {\n  return <RadixPopover.Root {...props}>{children}</RadixPopover.Root>;\n};\n\nconst Trigger = styled(RadixPopover.Trigger)`\n  background: inherit;\n  border: none;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  width: fit-content;\n`;\ninterface TriggerProps extends RadixPopover.PopoverTriggerProps {\n  anchor?: ReactNode;\n}\n\nconst PopoverTrigger = ({ anchor, children, ...props }: TriggerProps) => {\n  return (\n    <>\n      <Trigger\n        asChild\n        {...props}\n      >\n        <div>{children}</div>\n      </Trigger>\n      {anchor && <RadixPopover.Anchor asChild>{anchor}</RadixPopover.Anchor>}\n    </>\n  );\n};\nPopoverTrigger.displayName = 'PopoverTrigger';\nPopover.Trigger = PopoverTrigger;\n\ninterface PopoverContentProps extends RadixPopover.PopoverContentProps {\n  /** Whether to show an arrow pointing to the trigger element */\n  showArrow?: boolean;\n  /** Whether to show a close button in the popover */\n  showClose?: boolean;\n  /** Forces the popover to mount in the DOM even when closed */\n  forceMount?: true;\n  /** Custom container element for the popover portal */\n  container?: HTMLElement | null;\n}\n\nconst menuPanelVariants = cva(styles['menu-panel'], {\n  variants: {\n    showClose: {\n      true: styles['menu-panel_show-close'],\n      false: '',\n    },\n  },\n  defaultVariants: {\n    showClose: false,\n  },\n});\n\ntype MenuPanelComponent = <T extends ElementType = 'div'>(\n  props: ComponentProps<typeof GenericMenuPanel<T>> & { showClose?: boolean }\n) => ReactNode;\n\nconst _MenuPanel = <T extends ElementType = 'div'>(\n  {\n    showClose,\n    className,\n    ...props\n  }: ComponentProps<typeof GenericMenuPanel<T>> & { showClose?: boolean },\n  ref: ComponentPropsWithRef<T>['ref']\n) => (\n  <GenericMenuPanel\n    ref={ref}\n    {...(props as ComponentProps<typeof GenericMenuPanel>)}\n    className={cn(menuPanelVariants({ showClose }), className)}\n  />\n);\n\nconst MenuPanel: MenuPanelComponent = forwardRef(_MenuPanel);\n\nconst CloseButton = styled(EmptyButton)`\n  position: absolute;\n  top: ${({ theme }) => theme.click.popover.space.y};\n  right: ${({ theme }) => theme.click.popover.space.x};\n  width: ${({ theme }) => theme.click.popover.icon.size.width};\n  height: ${({ theme }) => theme.click.popover.icon.size.height};\n`;\n\nconst PopoverContent = ({\n  children,\n  showArrow,\n  showClose,\n  forceMount,\n  container,\n  ...props\n}: PopoverContentProps) => {\n  const portalContainer = useResolvedPortalContainer(container);\n\n  return (\n    <RadixPopover.Portal\n      forceMount={forceMount}\n      container={portalContainer}\n    >\n      <MenuPanel\n        as={RadixPopover.Content}\n        type=\"popover\"\n        showClose={showClose}\n        showArrow={showArrow}\n        sideOffset={4}\n        {...props}\n      >\n        {showClose && (\n          <CloseButton\n            as={RadixPopover.Close}\n            asChild\n          >\n            <Icon name=\"cross\" />\n          </CloseButton>\n        )}\n        {showArrow && (\n          <Arrow\n            asChild\n            as={RadixPopover.Arrow}\n            width={20}\n            height={10}\n          >\n            <Popover_Arrow />\n          </Arrow>\n        )}\n        {children}\n      </MenuPanel>\n    </RadixPopover.Portal>\n  );\n};\nPopoverContent.displayName = 'PopoverContent';\nPopover.Content = PopoverContent;\n"],"names":["Popover","children","props","RadixPopover","Trigger","styled","withConfig","componentId","PopoverTrigger","anchor","jsxs","Fragment","jsx","displayName","menuPanelVariants","cva","styles","variants","showClose","true","false","defaultVariants","_MenuPanel","className","ref","GenericMenuPanel","cn","MenuPanel","forwardRef","CloseButton","EmptyButton","theme","click","popover","space","y","x","icon","size","width","height","PopoverContent","showArrow","forceMount","container","portalContainer","useResolvedPortalContainer","Content","Close","Icon","Arrow","Popover_Arrow"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as RadixPopover from '@radix-ui/react-popover';\nimport { Arrow, GenericMenuPanel } from '@/components/GenericMenu';\nimport {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport { Icon } from '@/components/Icon';\nimport Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';\nimport { useResolvedPortalContainer } from '@/providers/PortalContext';\nimport styles from './Popover.module.css';\n\nexport const Popover = ({ children, ...props }: RadixPopover.PopoverProps) => {\n  return <RadixPopover.Root {...props}>{children}</RadixPopover.Root>;\n};\n\ninterface TriggerProps extends RadixPopover.PopoverTriggerProps {\n  anchor?: ReactNode;\n}\n\nconst PopoverTrigger = ({ anchor, children, ...props }: TriggerProps) => {\n  return (\n    <>\n      <RadixPopover.Trigger\n        asChild\n        {...props}\n      >\n        <div className={styles.trigger}>{children}</div>\n      </RadixPopover.Trigger>\n      {anchor && <RadixPopover.Anchor asChild>{anchor}</RadixPopover.Anchor>}\n    </>\n  );\n};\nPopoverTrigger.displayName = 'PopoverTrigger';\nPopover.Trigger = PopoverTrigger;\n\ninterface PopoverContentProps extends RadixPopover.PopoverContentProps {\n  /** Whether to show an arrow pointing to the trigger element */\n  showArrow?: boolean;\n  /** Whether to show a close button in the popover */\n  showClose?: boolean;\n  /** Forces the popover to mount in the DOM even when closed */\n  forceMount?: true;\n  /** Custom container element for the popover portal */\n  container?: HTMLElement | null;\n}\n\nconst menuPanelVariants = cva(styles['menu-panel'], {\n  variants: {\n    showClose: {\n      true: styles['menu-panel_show-close'],\n      false: '',\n    },\n  },\n  defaultVariants: {\n    showClose: false,\n  },\n});\n\ntype MenuPanelComponent = <T extends ElementType = 'div'>(\n  props: ComponentProps<typeof GenericMenuPanel<T>> & { showClose?: boolean }\n) => ReactNode;\n\nconst _MenuPanel = <T extends ElementType = 'div'>(\n  {\n    showClose,\n    className,\n    ...props\n  }: ComponentProps<typeof GenericMenuPanel<T>> & { showClose?: boolean },\n  ref: ComponentPropsWithRef<T>['ref']\n) => (\n  <GenericMenuPanel\n    ref={ref}\n    {...(props as ComponentProps<typeof GenericMenuPanel>)}\n    className={cn(menuPanelVariants({ showClose }), className)}\n  />\n);\n\nconst MenuPanel: MenuPanelComponent = forwardRef(_MenuPanel);\n\nconst PopoverContent = ({\n  children,\n  showArrow,\n  showClose,\n  forceMount,\n  container,\n  ...props\n}: PopoverContentProps) => {\n  const portalContainer = useResolvedPortalContainer(container);\n\n  return (\n    <RadixPopover.Portal\n      forceMount={forceMount}\n      container={portalContainer}\n    >\n      <MenuPanel\n        as={RadixPopover.Content}\n        type=\"popover\"\n        showClose={showClose}\n        showArrow={showArrow}\n        sideOffset={4}\n        {...props}\n      >\n        {showClose && (\n          <RadixPopover.Close\n            asChild\n            className={styles['close-button']}\n          >\n            <Icon name=\"cross\" />\n          </RadixPopover.Close>\n        )}\n        {showArrow && (\n          <Arrow\n            asChild\n            as={RadixPopover.Arrow}\n            width={20}\n            height={10}\n          >\n            <Popover_Arrow />\n          </Arrow>\n        )}\n        {children}\n      </MenuPanel>\n    </RadixPopover.Portal>\n  );\n};\nPopoverContent.displayName = 'PopoverContent';\nPopover.Content = PopoverContent;\n"],"names":["Popover","children","props","RadixPopover","PopoverTrigger","anchor","jsxs","Fragment","jsx","styles","trigger","displayName","Trigger","menuPanelVariants","cva","variants","showClose","true","false","defaultVariants","_MenuPanel","className","ref","GenericMenuPanel","cn","MenuPanel","forwardRef","PopoverContent","showArrow","forceMount","container","portalContainer","useResolvedPortalContainer","Content","Icon","Arrow","Popover_Arrow"],"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, htmlType: "button", 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";