@clickhouse/click-ui 0.7.0 → 0.9.0

package/dist/esm/components/Panel/index.js

@@ -1,6 +1,64 @@
+import "./Panel.css";
 import { jsx } from 'react/jsx-runtime';
-import { styled } from 'styled-components';
+import { useMemo } from 'react';
+import { cn } from '../../lib/cva.js';
+import styles from './Panel.module.css.js';
+import { cva } from 'class-variance-authority';
 
+const panelVariants = cva(styles.panel, {
+  variants: {
+    orientation: {
+      horizontal: styles.panel_orientation_horizontal,
+      vertical: styles.panel_orientation_vertical
+    },
+    alignItems: {
+      start: styles["panel_align-items_start"],
+      center: styles["panel_align-items_center"],
+      end: styles["panel_align-items_end"]
+    },
+    color: {
+      default: styles.panel_color_default,
+      muted: styles.panel_color_muted,
+      transparent: styles.panel_color_transparent
+    },
+    radii: {
+      none: styles.panel_radii_none,
+      sm: styles.panel_radii_sm,
+      md: styles.panel_radii_md,
+      lg: styles.panel_radii_lg
+    },
+    padding: {
+      none: styles.panel_padding_none,
+      xs: styles.panel_padding_xs,
+      sm: styles.panel_padding_sm,
+      md: styles.panel_padding_md,
+      lg: styles.panel_padding_lg,
+      xl: styles.panel_padding_xl
+    },
+    gap: {
+      none: styles.panel_gap_none,
+      xs: styles.panel_gap_xs,
+      sm: styles.panel_gap_sm,
+      md: styles.panel_gap_md,
+      lg: styles.panel_gap_lg,
+      xl: styles.panel_gap_xl
+    },
+    hasBorder: {
+      true: styles.panel_border
+    },
+    hasShadow: {
+      true: styles.panel_shadow
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+    alignItems: "center",
+    color: "default",
+    radii: "sm",
+    padding: "md",
+    gap: "sm"
+  }
+});
 const Panel = ({
   alignItems = "center",
   children,
@@ -16,41 +74,33 @@ const Panel = ({
   padding,
   radii = "sm",
   width,
+  className,
+  style,
   ...props
-}) => /* @__PURE__ */ jsx(Wrapper, { $alignItems: alignItems, $color: color, $cursor: cursor, $fillHeight: fillHeight, $fillWidth: fillWidth, $gap: gap, $hasBorder: hasBorder, $hasShadow: hasShadow, $height: height, $orientation: orientation, $padding: padding, $radii: radii, $width: width, ...props, children });
-const Wrapper = styled.div.withConfig({
-  componentId: "sc-1q78udp-0"
-})(["display:flex;flex-flow:", ";align-items:", ";width:", ";height:", ";background-color:", ";border-radius:", ";padding:", ";border:", ";box-shadow:", ";gap:", ";", ";"], ({
-  $orientation = "horizontal"
-}) => $orientation === "horizontal" ? "row wrap" : "column", ({
-  $alignItems = "center"
-}) => $alignItems === "center" ? "center" : `flex-${$alignItems}`, ({
-  $width,
-  $fillWidth
-}) => $fillWidth ? "100%" : $width, ({
-  $height,
-  $fillHeight
-}) => $fillHeight ? "100%" : $height, ({
-  $color = "default",
-  theme
-}) => theme.click.panel.color.background[$color], ({
-  $radii = "sm",
-  theme
-}) => theme.click.panel.radii[$radii], ({
-  $padding = "md",
-  theme
-}) => theme.click.panel.space.y[$padding], ({
-  $hasBorder,
-  theme
-}) => $hasBorder ? `1px solid ${theme.click.global.color.stroke.default}` : "none", ({
-  $hasShadow,
-  theme
-}) => $hasShadow ? theme.shadow[1] : "none", ({
-  $gap = "sm",
-  theme
-}) => theme.click.panel.space.gap[$gap], ({
-  $cursor
-}) => $cursor && `cursor: ${$cursor}`);
+}) => {
+  const mergedStyle = useMemo(() => ({
+    ...cursor && {
+      "--panel-cursor": cursor
+    },
+    ...(fillWidth || width) && {
+      "--panel-width": fillWidth ? "100%" : width
+    },
+    ...(fillHeight || height) && {
+      "--panel-height": fillHeight ? "100%" : height
+    },
+    ...style
+  }), [cursor, fillWidth, width, fillHeight, height, style]);
+  return /* @__PURE__ */ jsx("div", { ...props, style: mergedStyle, className: cn(panelVariants({
+    orientation,
+    alignItems,
+    color,
+    radii,
+    padding,
+    gap,
+    hasBorder,
+    hasShadow
+  }), cursor && styles.panel_cursor, className), children });
+};
 
 export { Panel };
 //# sourceMappingURL=index.js.map

package/dist/esm/components/Panel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","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","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.js","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","cn","panel_cursor"],"mappings":"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"}

package/dist/esm/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/esm/components/Popover/Popover.module.css.js

@@ -1,7 +1,10 @@
+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"
 };
 
-export { styles as default };
+export { styles as default, trigger };
 //# sourceMappingURL=Popover.module.css.js.map

package/dist/esm/components/Popover/Popover.module.css.js.map

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

package/dist/esm/components/Popover/index.js

@@ -2,10 +2,8 @@ import "./Popover.css";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as RadixPopover from '@radix-ui/react-popover';
 import { GenericMenuPanel, Arrow } from '../GenericMenu/index.js';
-import { styled } from 'styled-components';
 import { forwardRef } from 'react';
 import { cn } from '../../lib/cva.js';
-import { EmptyButton } from '../EmptyButton/index.js';
 import Popover_Arrow from '../Assets/Icons/Popover-Arrow.js';
 import { useResolvedPortalContainer } from '../../providers/PortalContext.js';
 import styles from './Popover.module.css.js';
@@ -18,16 +16,13 @@ const Popover = ({
 }) => {
   return /* @__PURE__ */ jsx(RadixPopover.Root, { ...props, children });
 };
-const Trigger = styled(RadixPopover.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__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Trigger, { asChild: true, ...props, children: /* @__PURE__ */ jsx("div", { children }) }),
+    /* @__PURE__ */ jsx(RadixPopover.Trigger, { asChild: true, ...props, children: /* @__PURE__ */ jsx("div", { className: styles.trigger, children }) }),
     anchor && /* @__PURE__ */ jsx(RadixPopover.Anchor, { asChild: true, children: anchor })
   ] });
 };
@@ -52,17 +47,6 @@ const _MenuPanel = ({
   showClose
 }), className) });
 const MenuPanel = forwardRef(_MenuPanel);
-const CloseButton = styled(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,
@@ -73,7 +57,7 @@ const PopoverContent = ({
 }) => {
   const portalContainer = useResolvedPortalContainer(container);
   return /* @__PURE__ */ jsx(RadixPopover.Portal, { forceMount, container: portalContainer, children: /* @__PURE__ */ jsxs(MenuPanel, { as: RadixPopover.Content, type: "popover", showClose, showArrow, sideOffset: 4, ...props, children: [
-    showClose && /* @__PURE__ */ jsx(CloseButton, { as: RadixPopover.Close, asChild: true, children: /* @__PURE__ */ jsx(SvgImage, { name: "cross" }) }),
+    showClose && /* @__PURE__ */ jsx(RadixPopover.Close, { asChild: true, className: styles["close-button"], children: /* @__PURE__ */ jsx(SvgImage, { name: "cross" }) }),
     showArrow && /* @__PURE__ */ jsx(Arrow, { asChild: true, as: RadixPopover.Arrow, width: 20, height: 10, children: /* @__PURE__ */ jsx(Popover_Arrow, {}) }),
     children
   ] }) });

package/dist/esm/components/Popover/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","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","Trigger","styled","RadixPopover","withConfig","componentId","PopoverTrigger","anchor","displayName","menuPanelVariants","cva","styles","variants","showClose","true","false","defaultVariants","_MenuPanel","className","ref","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"],"mappings":"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"}
+{"version":3,"file":"index.js","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","PopoverTrigger","anchor","styles","trigger","displayName","Trigger","menuPanelVariants","cva","variants","showClose","true","false","defaultVariants","_MenuPanel","className","ref","cn","MenuPanel","forwardRef","PopoverContent","showArrow","forceMount","container","portalContainer","useResolvedPortalContainer","RadixPopover","Content","Icon","Arrow"],"mappings":"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"}

package/dist/esm/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/esm/components/Select/MultiSelectValue.js

@@ -1,18 +1,13 @@
+import "./MultiSelectValue.css";
 import { jsx } from 'react/jsx-runtime';
 import { useId, useState, useEffect } from 'react';
 import ReactSortableModule from 'react-sortablejs/dist/index.js';
-import { styled } from 'styled-components';
+import styles from './MultiSelectValue.module.css.js';
 import { Badge } from '../Badge/index.js';
 
 const {
   ReactSortable
 } = ReactSortableModule;
-const BadgeList = 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 = styled(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,
@@ -35,7 +30,7 @@ const MultiSelectValue = ({
   if (selectedValues.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx(BadgeList, { as: ReactSortable, disabled: !sortable, list: values, setList: setValues, onEnd: (e) => {
+  return /* @__PURE__ */ jsx(ReactSortable, { className: styles["badge-list"], disabled: !sortable, list: values, setList: setValues, onEnd: (e) => {
     const {
       newDraggableIndex,
       oldDraggableIndex
@@ -67,7 +62,7 @@ const MultiSelectValue = ({
         }
       };
     }
-    return /* @__PURE__ */ jsx(MultiSelectBadge, { size: "sm", state: disabled ? "disabled" : "default", ...otherProps }, `multi-select-${id}-${value}`);
+    return /* @__PURE__ */ jsx(Badge, { className: styles["multi-select-badge"], size: "sm", state: disabled ? "disabled" : "default", ...otherProps }, `multi-select-${id}-${value}`);
   }) });
 };
 

package/dist/esm/components/Select/MultiSelectValue.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectValue.js","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","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.js","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","styles","e","newDraggableIndex","oldDraggableIndex","temp","nodeProps","get","children","otherProps","text","label","icon","iconDir","dismissible","onClose","preventDefault","stopPropagation"],"mappings":"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"}

package/dist/esm/components/Select/MultiSelectValue.module.css.js

@@ -0,0 +1,7 @@
+const styles = {
+	"badge-list": "badge-list__WpJAq",
+	"multi-select-badge": "multi-select-badge__vk7YC"
+};
+
+export { styles as default };
+//# sourceMappingURL=MultiSelectValue.module.css.js.map

package/dist/esm/components/Select/MultiSelectValue.module.css.js.map

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

package/dist/esm/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/esm/components/Select/SingleSelectValue.js

@@ -1,10 +1,8 @@
+import "./SingleSelectValue.css";
 import { jsx } from 'react/jsx-runtime';
-import { styled } from 'styled-components';
 import { IconWrapper } from '../IconWrapper/index.js';
+import styles from './SingleSelectValue.module.css.js';
 
-const SelectValueContainer = 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
@@ -18,7 +16,7 @@ const SingleSelectValue = ({
     children,
     label
   } = valueNode ?? {};
-  return /* @__PURE__ */ jsx(SelectValueContainer, { children: /* @__PURE__ */ jsx(IconWrapper, { icon, iconDir, gap: "xxs", isResponsive: false, children: label ?? children ?? value }) });
+  return /* @__PURE__ */ jsx("div", { className: styles["select-value-container"], children: /* @__PURE__ */ jsx(IconWrapper, { icon, iconDir, gap: "xxs", isResponsive: false, children: label ?? children ?? value }) });
 };
 
 export { SingleSelectValue as default };

package/dist/esm/components/Select/SingleSelectValue.js.map

@@ -1 +1 @@
-{"version":3,"file":"SingleSelectValue.js","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"],"mappings":";;;;AAIA,MAAMA,oBAAAA,GAAuBC,MAAAA,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,uBACE,GAAA,CAAC,oBAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,WAAA,EAAA,EACC,IAAA,EACA,OAAA,EACA,GAAA,EAAI,KAAA,EACJ,YAAA,EAAc,KAAA,EAEbM,QAAAA,EAAAA,KAAAA,IAASD,QAAAA,IAAYJ,OACxB,CAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"SingleSelectValue.js","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"],"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,2BACG,KAAA,EAAA,EAAI,SAAA,EAAWO,MAAAA,CAAO,wBAAwB,GAC7C,QAAA,kBAAA,GAAA,CAAC,WAAA,EAAA,EACC,IAAA,EACA,OAAA,EACA,KAAI,KAAA,EACJ,YAAA,EAAc,OAEbD,QAAAA,EAAAA,KAAAA,IAASD,QAAAA,IAAYJ,OACxB,CAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/esm/components/Select/SingleSelectValue.module.css.js

@@ -0,0 +1,6 @@
+const styles = {
+	"select-value-container": "select-value-container__I2dbz"
+};
+
+export { styles as default };
+//# sourceMappingURL=SingleSelectValue.module.css.js.map

package/dist/esm/components/Select/SingleSelectValue.module.css.js.map

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

package/dist/esm/components/Select/common/InternalSelect.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useId, useState, useRef, useCallback, useEffect, useMemo, forwardRef, Children, isValidElement } from 'react';
 import { Portal } from '@radix-ui/react-popover';
-import { SelectPopoverRoot, StyledSelectTrigger, SelectValue, HiddenSelectElement, SelectPopoverContent, SelectList, SearchBarContainer, SearchBar, SearchClose, SelectListContent, SelectGroupContainer, SelectGroupName, SelectGroupContent, SelectNoDataContainer, SelectItemDescriptionText } from './SelectStyled.js';
+import { SelectPopoverRoot, StyledSelectTrigger, SelectValue, HiddenSelectElement, SelectPopoverContent, SelectList, SearchBarContainer, SearchBar, selectStyles, SelectListContent, SelectGroupContainer, SelectGroupName, SelectGroupContent, SelectNoDataContainer, SelectItemDescriptionText } from './SelectComponents.js';
 import { OptionContext } from './OptionContext.js';
 import { MultiSelectValue } from '../MultiSelectValue.js';
 import SingleSelectValue from '../SingleSelectValue.js';
@@ -10,7 +10,7 @@ import { mergeRefs } from '../../../utils/mergeRefs.js';
 import { GenericMenuItem } from '../../GenericMenu/index.js';
 import { IconWrapper } from '../../IconWrapper/index.js';
 import { useInputModality } from '../../../hooks/internal/useInputModality.js';
-import { styled } from 'styled-components';
+import { cn } from '../../../lib/cva.js';
 import { getTextFromNodes } from '../../../lib/getTextFromNodes.js';
 import { useResolvedPortalContainer } from '../../../providers/PortalContext.js';
 import { FormRoot } from '../../FormContainer/FormRoot.js';
@@ -309,7 +309,7 @@ const InternalSelect = ({
         }, align: "start", $useFullWidthItems: useFullWidthItems, $itemCharacterLimit: itemCharacterLimit, children: /* @__PURE__ */ jsxs(SelectList, { children: [
           /* @__PURE__ */ jsxs(SearchBarContainer, { $showSearch: showSearch, children: [
             /* @__PURE__ */ jsx(SearchBar, { ref: inputRef, value: search, onChange: (e) => onUpdateSearch(e.target.value), "data-testid": "select-search-input", onKeyDown, $showSearch: showSearch }),
-            /* @__PURE__ */ jsx(SearchClose, { as: IconButton, htmlType: "button", icon: "cross", onClick: clearSearch, "data-testid": "select-search-close", $showClose: search.length > 0, size: "xs" })
+            /* @__PURE__ */ jsx(IconButton, { className: cn(selectStyles["search-close"], search.length > 0 && selectStyles["search-close_show-close"]), htmlType: "button", icon: "cross", onClick: clearSearch, "data-testid": "select-search-close", size: "xs" })
           ] }),
           /* @__PURE__ */ jsx(SelectListContent, { $maxHeight: maxHeight, children: /* @__PURE__ */ jsx(OptionContext.Provider, { value: optionContextValue, children: options && options.length > 0 ? options.map((props2, index) => {
             if ("options" in props2) {
@@ -358,11 +358,6 @@ const SelectGroup = forwardRef(({
   ] });
 });
 SelectGroup.displayName = "Select.Group";
-const CheckIcon = styled.svg.withConfig({
-  componentId: "sc-howzwz-0"
-})(["opacity:", ";"], ({
-  $showCheck
-}) => $showCheck ? 1 : 0);
 const SelectItem = forwardRef(({
   disabled = false,
   children,
@@ -409,7 +404,7 @@ const SelectItem = forwardRef(({
         label,
         description && /* @__PURE__ */ jsx(SelectItemDescription, { children: description })
       ] }) : children }),
-      /* @__PURE__ */ jsx(CheckIcon, { as: SvgImage, name: "check", size: "sm", $showCheck: isChecked })
+      /* @__PURE__ */ jsx(SvgImage, { className: cn(selectStyles["check-icon"], isChecked && selectStyles["check-icon_show-check"]), name: "check", size: "sm" })
     ] }),
     separator && /* @__PURE__ */ jsx(Separator, { size: "sm" })
   ] });