@clickhouse/click-ui 0.6.2-rc3 → 0.7.0

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

@@ -1,11 +1,16 @@
+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';
 import { Icon as SvgImage } from '../Icon/index.js';
+import { cva } from 'class-variance-authority';
 
 const Popover = ({
   children,
@@ -28,25 +33,27 @@ const PopoverTrigger = ({
 };
 PopoverTrigger.displayName = "PopoverTrigger";
 Popover.Trigger = PopoverTrigger;
-const MenuPanel = styled(GenericMenuPanel).withConfig({
-  componentId: "sc-1dii14g-1"
-})(["display:block;padding:", " ", ";background-color:", ";border:1px solid ", ";border-radius:", ";box-shadow:", ";", ";"], ({
-  theme
-}) => theme.click.popover.space.y, ({
-  theme
-}) => theme.click.popover.space.x, ({
-  theme
-}) => theme.click.popover.color.panel.background.default, ({
-  theme
-}) => theme.click.popover.color.panel.stroke.default, ({
-  theme
-}) => theme.click.popover.radii.all, ({
-  theme
-}) => theme.click.popover.shadow.default, ({
-  $showClose
-}) => $showClose ? "padding-top: 1rem;" : "");
+const menuPanelVariants = cva(styles["menu-panel"], {
+  variants: {
+    showClose: {
+      true: styles["menu-panel_show-close"],
+      false: ""
+    }
+  },
+  defaultVariants: {
+    showClose: false
+  }
+});
+const _MenuPanel = ({
+  showClose,
+  className,
+  ...props
+}, ref) => /* @__PURE__ */ jsx(GenericMenuPanel, { ref, ...props, className: cn(menuPanelVariants({
+  showClose
+}), className) });
+const MenuPanel = forwardRef(_MenuPanel);
 const CloseButton = styled(EmptyButton).withConfig({
-  componentId: "sc-1dii14g-2"
+  componentId: "sc-1dii14g-1"
 })(["position:absolute;top:", ";right:", ";width:", ";height:", ";"], ({
   theme
 }) => theme.click.popover.space.y, ({
@@ -65,7 +72,7 @@ const PopoverContent = ({
   ...props
 }) => {
   const portalContainer = useResolvedPortalContainer(container);
-  return /* @__PURE__ */ jsx(RadixPopover.Portal, { forceMount, container: portalContainer, children: /* @__PURE__ */ jsxs(MenuPanel, { as: RadixPopover.Content, $type: "popover", $showClose: showClose, $showArrow: showArrow, sideOffset: 4, ...props, children: [
+  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" }) }),
     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 { ReactNode } from 'react';\nimport { Icon } from '@/components/Icon';\nimport { EmptyButton } from '@/components/EmptyButton';\nimport Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';\nimport { useResolvedPortalContainer } from '@/providers/PortalContext';\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 MenuPanel = styled(GenericMenuPanel)<{ $showClose?: boolean }>`\n  display: block;\n  padding: ${({ theme }) => theme.click.popover.space.y}\n    ${({ theme }) => theme.click.popover.space.x};\n  background-color: ${({ theme }) => theme.click.popover.color.panel.background.default};\n  border: 1px solid ${({ theme }) => theme.click.popover.color.panel.stroke.default};\n  border-radius: ${({ theme }) => theme.click.popover.radii.all};\n  box-shadow: ${({ theme }) => theme.click.popover.shadow.default};\n\n  ${({ $showClose }) => ($showClose ? 'padding-top: 1rem;' : '')};\n`;\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","MenuPanel","GenericMenuPanel","theme","click","popover","space","y","x","color","panel","background","default","stroke","radii","all","shadow","$showClose","CloseButton","EmptyButton","icon","size","width","height","PopoverContent","showArrow","showClose","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 { 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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"}

package/dist/esm/components/RadioGroup/RadioGroup.css

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

package/dist/esm/components/RadioGroup/RadioGroup.module.css.js

@@ -0,0 +1,13 @@
+const item = "item__W9-K2";
+const styles = {
+	"radio-group": "radio-group__RXgmX",
+	"radio-group_inline": "radio-group_inline__Bn4-S",
+	"radio-group_inline_false": "radio-group_inline_false__OXI3T",
+	"radio-group_error": "radio-group_error__cijEQ",
+	item: item,
+	"radio-input": "radio-input__KMmKv",
+	"radio-indicator": "radio-indicator__rrk6W"
+};
+
+export { styles as default, item };
+//# sourceMappingURL=RadioGroup.module.css.js.map

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

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

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

@@ -1,23 +1,32 @@
+import "./RadioGroup.css";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import * as RadixRadioGroup from '@radix-ui/react-radio-group';
 import { useId } from 'react';
-import { styled } from 'styled-components';
+import { cn } from '../../lib/cva.js';
+import styles from './RadioGroup.module.css.js';
 import { FormRoot } from '../FormContainer/FormRoot.js';
 import { FormElementContainer } from '../FormContainer/FormElementContainer.js';
 import { Error } from '../FormContainer/Error.js';
 import { Label } from '../Label/index.js';
 import { GenericLabel } from '../GenericLabel/index.js';
+import { cva } from 'class-variance-authority';
 
-const RadioGroupRoot = styled(RadixRadioGroup.Root).withConfig({
-  componentId: "sc-p6cydr-0"
-})(["display:flex;flex-wrap:wrap;gap:", ";flex-direction:", ";label{", "}"], ({
-  theme
-}) => theme.click.checkbox.space.gap, ({
-  $inline = true
-}) => $inline === true ? "row" : "column", ({
-  $error,
-  theme
-}) => $error ? `color: ${theme.click.field.color.label.error};` : "");
+const radioGroupVariants = cva(styles["radio-group"], {
+  variants: {
+    inline: {
+      true: styles["radio-group_inline"],
+      false: styles["radio-group_inline_false"]
+    },
+    error: {
+      true: styles["radio-group_error"],
+      false: ""
+    }
+  },
+  defaultVariants: {
+    inline: true,
+    error: false
+  }
+});
 const RadioGroup = ({
   children,
   inline,
@@ -28,11 +37,15 @@ const RadioGroup = ({
   label,
   disabled,
   id,
+  className,
   ...props
 }) => {
   return /* @__PURE__ */ jsxs(FormRoot, { $orientation: orientation, $dir: dir, $addLabelPadding: true, children: [
     /* @__PURE__ */ jsxs(FormElementContainer, { children: [
-      /* @__PURE__ */ jsx(RadioGroupRoot, { orientation: inline ? "horizontal" : "vertical", disabled, id, $error: !!error, dir: itemDir, $inline: inline, ...props, children }),
+      /* @__PURE__ */ jsx(RadixRadioGroup.Root, { orientation: inline ? "horizontal" : "vertical", disabled, id, dir: itemDir, ...props, className: cn(radioGroupVariants({
+        inline: inline === false ? false : true,
+        error: !!error
+      }), className), children }),
       !!error && error !== true && /* @__PURE__ */ jsx(Error, { children: error })
     ] }),
     label && /* @__PURE__ */ jsx(Label, { htmlFor: id, disabled, error: !!error, children: label })
@@ -44,79 +57,17 @@ const RadioGroupItem = ({
   value,
   disabled,
   required,
+  className,
   ...props
 }) => {
   const defaultId = useId();
-  return /* @__PURE__ */ jsxs(Wrapper, { $orientation: "horizontal", $dir: "end", $addLabelPadding: false, ...props, children: [
-    /* @__PURE__ */ jsx(RadioInput, { value, id: id ?? defaultId, disabled, required, "aria-label": `${label}`, children: /* @__PURE__ */ jsx(RadioGroupIndicator, {}) }),
+  return /* @__PURE__ */ jsxs(FormRoot, { $orientation: "horizontal", $dir: "end", $addLabelPadding: false, ...props, className: cn(styles.item, className), children: [
+    /* @__PURE__ */ jsx(RadixRadioGroup.Item, { value, id: id ?? defaultId, disabled, required, "aria-label": `${label}`, className: styles["radio-input"], children: /* @__PURE__ */ jsx(RadixRadioGroup.Indicator, { className: styles["radio-indicator"] }) }),
     label && /* @__PURE__ */ jsx(GenericLabel, { htmlFor: id ?? defaultId, disabled, children: label })
   ] });
 };
 RadioGroupItem.displayName = "RadioGroupItem";
 RadioGroup.Item = RadioGroupItem;
-const Wrapper = styled(FormRoot).withConfig({
-  componentId: "sc-p6cydr-1"
-})(["padding:", ";display:flex;align-items:center;gap:", ";width:auto;"], ({
-  theme
-}) => theme.click.checkbox.space.all, ({
-  theme
-}) => theme.click.checkbox.space.gap);
-const RadioInput = styled(RadixRadioGroup.Item).withConfig({
-  componentId: "sc-p6cydr-2"
-})(["display:flex;align-items:center;justify-content:center;outline:none;cursor:pointer;", ";"], ({
-  theme
-}) => `
-    border-radius: ${theme.click.radio.radii.all};
-    width: 1rem;
-    height: 1rem;
-    background: ${theme.click.radio.color.background.default};
-    border: 1px solid ${theme.click.radio.color.stroke.default};
-
-    &:hover {
-      background: ${theme.click.radio.color.background.hover};
-    }
-    &[data-state="checked"] {
-      border-color: ${theme.click.radio.color.stroke.active};
-      background: ${theme.click.radio.color.background.active};
-    }
-    &[data-disabled] {
-      background: ${theme.click.radio.color.background.disabled};
-      border-color: ${theme.click.radio.color.stroke.disabled};
-    }
-  `);
-const RadioGroupIndicator = styled(RadixRadioGroup.Indicator).withConfig({
-  componentId: "sc-p6cydr-3"
-})(["", ""], ({
-  theme
-}) => `
-    background: ${theme.click.radio.color.background.default};
-    &::after {
-      content: '';
-      display: block;
-      width: 6px;
-      height: 6px;
-      border-radius: 50%;
-      background-color: ${theme.click.radio.color.indicator.default};
-      &:hover {
-        background: ${theme.click.radio.color.indicator.hover};
-      }
-    }
-    &[data-state="checked"] {
-      background: ${theme.click.radio.color.background.active};
-      &::after {
-        background: ${theme.click.radio.color.indicator.active};
-      }
-    }
-    &:hover {
-      background: ${theme.click.radio.color.background.hover};
-    }
-    &[data-disabled] {
-      background: ${theme.click.radio.color.background.disabled};
-      &::after {
-        background: ${theme.click.radio.color.indicator.disabled};
-      }
-    }
-  `);
 
 export { RadioGroup };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import * as RadixRadioGroup from '@radix-ui/react-radio-group';\nimport { HTMLAttributes, ReactNode, useId } from 'react';\nimport { styled } from 'styled-components';\nimport { GenericLabel } from '@/components/GenericLabel';\nimport { Label } from '@/components/Label';\nimport { Error, FormElementContainer, FormRoot } from '@/components/FormContainer';\n\nexport interface RadioGroupProps extends Omit<RadixRadioGroup.RadioGroupProps, 'dir'> {\n  /** Whether to display radio items inline (horizontally) */\n  inline?: boolean;\n  /** The orientation of the label relative to the radio group */\n  orientation?: 'vertical' | 'horizontal';\n  /** The direction/position of the label - start places label before, end places label after */\n  dir?: 'start' | 'end';\n  /** Text direction for radio items - ltr or rtl */\n  itemDir?: 'rtl' | 'ltr';\n  /** The label text displayed next to the radio group */\n  label?: ReactNode;\n  /** Error message to display below the radio group */\n  error?: ReactNode;\n}\n\nconst RadioGroupRoot = styled(RadixRadioGroup.Root)<{\n  $error: boolean;\n  $inline?: boolean;\n}>`\n  display: flex;\n  flex-wrap: wrap;\n  gap: ${({ theme }) => theme.click.checkbox.space.gap};\n  flex-direction: ${({ $inline = true }) => ($inline === true ? 'row' : 'column')};\n  label {\n    ${({ $error, theme }) =>\n      $error ? `color: ${theme.click.field.color.label.error};` : ''}\n  }\n`;\n\nexport const RadioGroup = ({\n  children,\n  inline,\n  orientation,\n  dir,\n  error,\n  itemDir,\n  label,\n  disabled,\n  id,\n  ...props\n}: RadioGroupProps) => {\n  return (\n    <FormRoot\n      $orientation={orientation}\n      $dir={dir}\n      $addLabelPadding\n    >\n      <FormElementContainer>\n        <RadioGroupRoot\n          orientation={inline ? 'horizontal' : 'vertical'}\n          disabled={disabled}\n          id={id}\n          $error={!!error}\n          dir={itemDir}\n          $inline={inline}\n          {...props}\n        >\n          {children}\n        </RadioGroupRoot>\n        {!!error && error !== true && <Error>{error}</Error>}\n      </FormElementContainer>\n      {label && (\n        <Label\n          htmlFor={id}\n          disabled={disabled}\n          error={!!error}\n        >\n          {label}\n        </Label>\n      )}\n    </FormRoot>\n  );\n};\n\ninterface RadioGroupInputProps extends RadixRadioGroup.RadioGroupItemProps {\n  /** The label text displayed next to the radio item */\n  label?: ReactNode;\n}\n\nexport type RadioGroupItemProps = RadioGroupInputProps & HTMLAttributes<HTMLDivElement>;\n\nconst RadioGroupItem = ({\n  id,\n  label,\n  value,\n  disabled,\n  required,\n  ...props\n}: RadioGroupItemProps) => {\n  const defaultId = useId();\n  return (\n    <Wrapper\n      $orientation=\"horizontal\"\n      $dir=\"end\"\n      $addLabelPadding={false}\n      {...props}\n    >\n      <RadioInput\n        value={value}\n        id={id ?? defaultId}\n        disabled={disabled}\n        required={required}\n        aria-label={`${label}`}\n      >\n        <RadioGroupIndicator />\n      </RadioInput>\n      {label && (\n        <GenericLabel\n          htmlFor={id ?? defaultId}\n          disabled={disabled}\n        >\n          {label}\n        </GenericLabel>\n      )}\n    </Wrapper>\n  );\n};\n\nRadioGroupItem.displayName = 'RadioGroupItem';\nRadioGroup.Item = RadioGroupItem;\n\nconst Wrapper = styled(FormRoot)`\n  padding: ${({ theme }) => theme.click.checkbox.space.all};\n\n  display: flex;\n  align-items: center;\n  gap: ${({ theme }) => theme.click.checkbox.space.gap};\n  width: auto;\n`;\n\nconst RadioInput = styled(RadixRadioGroup.Item)`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  outline: none;\n  cursor: pointer;\n  ${({ theme }) => `\n    border-radius: ${theme.click.radio.radii.all};\n    width: 1rem;\n    height: 1rem;\n    background: ${theme.click.radio.color.background.default};\n    border: 1px solid ${theme.click.radio.color.stroke.default};\n\n    &:hover {\n      background: ${theme.click.radio.color.background.hover};\n    }\n    &[data-state=\"checked\"] {\n      border-color: ${theme.click.radio.color.stroke.active};\n      background: ${theme.click.radio.color.background.active};\n    }\n    &[data-disabled] {\n      background: ${theme.click.radio.color.background.disabled};\n      border-color: ${theme.click.radio.color.stroke.disabled};\n    }\n  `};\n`;\n\nconst RadioGroupIndicator = styled(RadixRadioGroup.Indicator)`\n  ${({ theme }) => `\n    background: ${theme.click.radio.color.background.default};\n    &::after {\n      content: '';\n      display: block;\n      width: 6px;\n      height: 6px;\n      border-radius: 50%;\n      background-color: ${theme.click.radio.color.indicator.default};\n      &:hover {\n        background: ${theme.click.radio.color.indicator.hover};\n      }\n    }\n    &[data-state=\"checked\"] {\n      background: ${theme.click.radio.color.background.active};\n      &::after {\n        background: ${theme.click.radio.color.indicator.active};\n      }\n    }\n    &:hover {\n      background: ${theme.click.radio.color.background.hover};\n    }\n    &[data-disabled] {\n      background: ${theme.click.radio.color.background.disabled};\n      &::after {\n        background: ${theme.click.radio.color.indicator.disabled};\n      }\n    }\n  `}\n`;\n"],"names":["RadioGroupRoot","styled","RadixRadioGroup","Root","withConfig","componentId","theme","click","checkbox","space","gap","$inline","$error","field","color","label","error","RadioGroup","children","inline","orientation","dir","itemDir","disabled","id","props","RadioGroupItem","value","required","defaultId","useId","displayName","Item","Wrapper","FormRoot","all","RadioInput","radio","radii","background","default","stroke","hover","active","RadioGroupIndicator","Indicator","indicator"],"mappings":";;;;;;;;;;AAsBA,MAAMA,cAAAA,GAAiBC,MAAAA,CAAOC,eAAAA,CAAgBC,IAAI,EAACC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,EAAA,CAAA,kCAAA,EAAA,oBAAA,SAAA,EAAA,GAAA,GAM1C,CAAC;AAAA,EAAEC;AAAM,CAAA,KAAMA,KAAAA,CAAMC,KAAAA,CAAMC,QAAAA,CAASC,KAAAA,CAAMC,KAC/B,CAAC;AAAA,EAAEC,OAAAA,GAAU;AAAK,CAAA,KAAOA,OAAAA,KAAY,IAAA,GAAO,KAAA,GAAQ,QAAA,EAElE,CAAC;AAAA,EAAEC,MAAAA;AAAAA,EAAQN;AAAM,CAAA,KACjBM,MAAAA,GAAS,UAAUN,KAAAA,CAAMC,KAAAA,CAAMM,MAAMC,KAAAA,CAAMC,KAAAA,CAAMC,KAAK,CAAA,CAAA,CAAA,GAAM,EAAE,CAAA;AAI7D,MAAMC,aAAaA,CAAC;AAAA,EACzBC,QAAAA;AAAAA,EACAC,MAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,GAAAA;AAAAA,EACAL,KAAAA;AAAAA,EACAM,OAAAA;AAAAA,EACAP,KAAAA;AAAAA,EACAQ,QAAAA;AAAAA,EACAC,EAAAA;AAAAA,EACA,GAAGC;AACY,CAAA,KAAM;AACrB,EAAA,4BACG,QAAA,EAAA,EACC,YAAA,EAAcL,aACd,IAAA,EAAMC,GAAAA,EACN,kBAAgB,IAAA,EAEhB,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,oBAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,kBACC,WAAA,EAAaF,MAAAA,GAAS,YAAA,GAAe,UAAA,EACrC,UACA,EAAA,EACA,MAAA,EAAQ,CAAC,CAACH,OACV,GAAA,EAAKM,OAAAA,EACL,SAASH,MAAAA,EACT,GAAIM,OAEHP,QAAAA,EACH,CAAA;AAAA,MACC,CAAC,CAACF,KAAAA,IAASA,UAAU,IAAA,oBAAQ,GAAA,CAAC,SAAOA,QAAAA,EAAAA,KAAAA,EAAM;AAAA,KAAA,EAC9C,CAAA;AAAA,IACCD,KAAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EACC,OAAA,EAASS,EAAAA,EACT,UACA,KAAA,EAAO,CAAC,CAACR,KAAAA,EAERD,QAAAA,EAAAA,KAAAA,EACH;AAAA,GAAA,EAEJ,CAAA;AAEJ;AASA,MAAMW,iBAAiBA,CAAC;AAAA,EACtBF,EAAAA;AAAAA,EACAT,KAAAA;AAAAA,EACAY,KAAAA;AAAAA,EACAJ,QAAAA;AAAAA,EACAK,QAAAA;AAAAA,EACA,GAAGH;AACgB,CAAA,KAAM;AACzB,EAAA,MAAMI,YAAYC,KAAAA,EAAM;AACxB,EAAA,uBACE,IAAA,CAAC,WACC,YAAA,EAAa,YAAA,EACb,MAAK,KAAA,EACL,gBAAA,EAAkB,KAAA,EAClB,GAAIL,KAAAA,EAEJ,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,UAAA,EAAA,EACC,KAAA,EACA,EAAA,EAAID,EAAAA,IAAMK,SAAAA,EACV,QAAA,EACA,QAAA,EACA,YAAA,EAAY,CAAA,EAAGd,KAAK,CAAA,CAAA,EAEpB,QAAA,kBAAA,GAAA,CAAC,uBAAmB,CAAA,EACtB,CAAA;AAAA,IACCA,yBACC,GAAA,CAAC,YAAA,EAAA,EACC,SAASS,EAAAA,IAAMK,SAAAA,EACf,UAECd,QAAAA,EAAAA,KAAAA,EACH;AAAA,GAAA,EAEJ,CAAA;AAEJ,CAAA;AAEAW,cAAAA,CAAeK,WAAAA,GAAc,gBAAA;AAC7Bd,UAAAA,CAAWe,IAAAA,GAAON,cAAAA;AAElB,MAAMO,OAAAA,GAAUhC,MAAAA,CAAOiC,QAAQ,CAAA,CAAC9B,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,EAAA,CAAA,UAAA,EAAA,uCAAA,EAAA,cAAA,GACnB,CAAC;AAAA,EAAEC;AAAM,CAAA,KAAMA,KAAAA,CAAMC,KAAAA,CAAMC,QAAAA,CAASC,KAAAA,CAAM0B,KAI9C,CAAC;AAAA,EAAE7B;AAAM,CAAA,KAAMA,KAAAA,CAAMC,KAAAA,CAAMC,QAAAA,CAASC,KAAAA,CAAMC,GAAG,CAAA;AAItD,MAAM0B,UAAAA,GAAanC,MAAAA,CAAOC,eAAAA,CAAgB8B,IAAI,EAAC5B,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,qFAAA,EAAA,GAAA,GAM3C,CAAC;AAAA,EAAEC;AAAM,CAAA,KAAM;AAAA,mBAAA,EACEA,KAAAA,CAAMC,KAAAA,CAAM8B,KAAAA,CAAMC,KAAAA,CAAMH,GAAG,CAAA;AAAA;AAAA;AAAA,gBAAA,EAG9B7B,KAAAA,CAAMC,KAAAA,CAAM8B,KAAAA,CAAMvB,KAAAA,CAAMyB,WAAWC,OAAO,CAAA;AAAA,sBAAA,EACpClC,KAAAA,CAAMC,KAAAA,CAAM8B,KAAAA,CAAMvB,KAAAA,CAAM2B,OAAOD,OAAO,CAAA;;AAAA;AAAA,kBAAA,EAG1ClC,KAAAA,CAAMC,KAAAA,CAAM8B,KAAAA,CAAMvB,KAAAA,CAAMyB,WAAWG,KAAK,CAAA;AAAA;AAAA;AAAA,oBAAA,EAGtCpC,KAAAA,CAAMC,KAAAA,CAAM8B,KAAAA,CAAMvB,KAAAA,CAAM2B,OAAOE,MAAM,CAAA;AAAA,kBAAA,EACvCrC,KAAAA,CAAMC,KAAAA,CAAM8B,KAAAA,CAAMvB,KAAAA,CAAMyB,WAAWI,MAAM,CAAA;AAAA;AAAA;AAAA,kBAAA,EAGzCrC,KAAAA,CAAMC,KAAAA,CAAM8B,KAAAA,CAAMvB,KAAAA,CAAMyB,WAAWhB,QAAQ,CAAA;AAAA,oBAAA,EACzCjB,KAAAA,CAAMC,KAAAA,CAAM8B,KAAAA,CAAMvB,KAAAA,CAAM2B,OAAOlB,QAAQ,CAAA;AAAA;AAAA,EAAA,CAE1D,CAAA;AAGH,MAAMqB,mBAAAA,GAAsB3C,MAAAA,CAAOC,eAAAA,CAAgB2C,SAAS,EAACzC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,EAAA,GACzD,CAAC;AAAA,EAAEC;AAAM,CAAA,KAAM;AAAA,gBAAA,EACDA,KAAAA,CAAMC,KAAAA,CAAM8B,KAAAA,CAAMvB,KAAAA,CAAMyB,WAAWC,OAAO,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAA,EAOlClC,KAAAA,CAAMC,KAAAA,CAAM8B,KAAAA,CAAMvB,KAAAA,CAAMgC,UAAUN,OAAO,CAAA;AAAA;AAAA,oBAAA,EAE7ClC,KAAAA,CAAMC,KAAAA,CAAM8B,KAAAA,CAAMvB,KAAAA,CAAMgC,UAAUJ,KAAK,CAAA;AAAA;AAAA;AAAA;AAAA,kBAAA,EAIzCpC,KAAAA,CAAMC,KAAAA,CAAM8B,KAAAA,CAAMvB,KAAAA,CAAMyB,WAAWI,MAAM,CAAA;AAAA;AAAA,oBAAA,EAEvCrC,KAAAA,CAAMC,KAAAA,CAAM8B,KAAAA,CAAMvB,KAAAA,CAAMgC,UAAUH,MAAM,CAAA;AAAA;AAAA;AAAA;AAAA,kBAAA,EAI1CrC,KAAAA,CAAMC,KAAAA,CAAM8B,KAAAA,CAAMvB,KAAAA,CAAMyB,WAAWG,KAAK,CAAA;AAAA;AAAA;AAAA,kBAAA,EAGxCpC,KAAAA,CAAMC,KAAAA,CAAM8B,KAAAA,CAAMvB,KAAAA,CAAMyB,WAAWhB,QAAQ,CAAA;AAAA;AAAA,oBAAA,EAEzCjB,KAAAA,CAAMC,KAAAA,CAAM8B,KAAAA,CAAMvB,KAAAA,CAAMgC,UAAUvB,QAAQ,CAAA;AAAA;AAAA;AAAA,EAAA,CAG7D,CAAA;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import * as RadixRadioGroup from '@radix-ui/react-radio-group';\nimport { HTMLAttributes, ReactNode, useId } from 'react';\nimport { GenericLabel } from '@/components/GenericLabel';\nimport { Label } from '@/components/Label';\nimport { Error, FormElementContainer, FormRoot } from '@/components/FormContainer';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './RadioGroup.module.css';\n\nexport interface RadioGroupProps extends Omit<RadixRadioGroup.RadioGroupProps, 'dir'> {\n  /** Whether to display radio items inline (horizontally) */\n  inline?: boolean;\n  /** The orientation of the label relative to the radio group */\n  orientation?: 'vertical' | 'horizontal';\n  /** The direction/position of the label - start places label before, end places label after */\n  dir?: 'start' | 'end';\n  /** Text direction for radio items - ltr or rtl */\n  itemDir?: 'rtl' | 'ltr';\n  /** The label text displayed next to the radio group */\n  label?: ReactNode;\n  /** Error message to display below the radio group */\n  error?: ReactNode;\n}\n\nconst radioGroupVariants = cva(styles['radio-group'], {\n  variants: {\n    inline: {\n      true: styles['radio-group_inline'],\n      false: styles['radio-group_inline_false'],\n    },\n    error: {\n      true: styles['radio-group_error'],\n      false: '',\n    },\n  },\n  defaultVariants: {\n    inline: true,\n    error: false,\n  },\n});\n\nexport const RadioGroup = ({\n  children,\n  inline,\n  orientation,\n  dir,\n  error,\n  itemDir,\n  label,\n  disabled,\n  id,\n  className,\n  ...props\n}: RadioGroupProps) => {\n  return (\n    <FormRoot\n      $orientation={orientation}\n      $dir={dir}\n      $addLabelPadding\n    >\n      <FormElementContainer>\n        <RadixRadioGroup.Root\n          orientation={inline ? 'horizontal' : 'vertical'}\n          disabled={disabled}\n          id={id}\n          dir={itemDir}\n          {...props}\n          className={cn(\n            radioGroupVariants({\n              inline: inline === false ? false : true,\n              error: !!error,\n            }),\n            className\n          )}\n        >\n          {children}\n        </RadixRadioGroup.Root>\n        {!!error && error !== true && <Error>{error}</Error>}\n      </FormElementContainer>\n      {label && (\n        <Label\n          htmlFor={id}\n          disabled={disabled}\n          error={!!error}\n        >\n          {label}\n        </Label>\n      )}\n    </FormRoot>\n  );\n};\n\ninterface RadioGroupInputProps extends RadixRadioGroup.RadioGroupItemProps {\n  /** The label text displayed next to the radio item */\n  label?: ReactNode;\n}\n\nexport type RadioGroupItemProps = RadioGroupInputProps & HTMLAttributes<HTMLDivElement>;\n\nconst RadioGroupItem = ({\n  id,\n  label,\n  value,\n  disabled,\n  required,\n  className,\n  ...props\n}: RadioGroupItemProps) => {\n  const defaultId = useId();\n  return (\n    <FormRoot\n      $orientation=\"horizontal\"\n      $dir=\"end\"\n      $addLabelPadding={false}\n      {...props}\n      className={cn(styles.item, className)}\n    >\n      <RadixRadioGroup.Item\n        value={value}\n        id={id ?? defaultId}\n        disabled={disabled}\n        required={required}\n        aria-label={`${label}`}\n        className={styles['radio-input']}\n      >\n        <RadixRadioGroup.Indicator className={styles['radio-indicator']} />\n      </RadixRadioGroup.Item>\n      {label && (\n        <GenericLabel\n          htmlFor={id ?? defaultId}\n          disabled={disabled}\n        >\n          {label}\n        </GenericLabel>\n      )}\n    </FormRoot>\n  );\n};\n\nRadioGroupItem.displayName = 'RadioGroupItem';\nRadioGroup.Item = RadioGroupItem;\n"],"names":["radioGroupVariants","cva","styles","variants","inline","true","false","error","defaultVariants","RadioGroup","children","orientation","dir","itemDir","label","disabled","id","className","props","cn","RadioGroupItem","value","required","defaultId","useId","item","displayName","Item"],"mappings":";;;;;;;;;;;;AAuBA,MAAMA,kBAAAA,GAAqBC,GAAAA,CAAIC,MAAAA,CAAO,aAAa,CAAA,EAAG;AAAA,EACpDC,QAAAA,EAAU;AAAA,IACRC,MAAAA,EAAQ;AAAA,MACNC,IAAAA,EAAMH,OAAO,oBAAoB,CAAA;AAAA,MACjCI,KAAAA,EAAOJ,OAAO,0BAA0B;AAAA,KAC1C;AAAA,IACAK,KAAAA,EAAO;AAAA,MACLF,IAAAA,EAAMH,OAAO,mBAAmB,CAAA;AAAA,MAChCI,KAAAA,EAAO;AAAA;AACT,GACF;AAAA,EACAE,eAAAA,EAAiB;AAAA,IACfJ,MAAAA,EAAQ,IAAA;AAAA,IACRG,KAAAA,EAAO;AAAA;AAEX,CAAC,CAAA;AAEM,MAAME,aAAaA,CAAC;AAAA,EACzBC,QAAAA;AAAAA,EACAN,MAAAA;AAAAA,EACAO,WAAAA;AAAAA,EACAC,GAAAA;AAAAA,EACAL,KAAAA;AAAAA,EACAM,OAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,EAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGC;AACY,CAAA,KAAM;AACrB,EAAA,4BACG,QAAA,EAAA,EACC,YAAA,EAAcP,aACd,IAAA,EAAMC,GAAAA,EACN,kBAAgB,IAAA,EAEhB,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,oBAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,eAAA,CAAgB,IAAA,EAAhB,EACC,WAAA,EAAaR,SAAS,YAAA,GAAe,UAAA,EACrC,QAAA,EACA,EAAA,EACA,KAAKS,OAAAA,KACDK,KAAAA,EACJ,SAAA,EAAWC,GACTnB,kBAAAA,CAAmB;AAAA,QACjBI,MAAAA,EAAQA,MAAAA,KAAW,KAAA,GAAQ,KAAA,GAAQ,IAAA;AAAA,QACnCG,KAAAA,EAAO,CAAC,CAACA;AAAAA,OACV,CAAA,EACDU,SACF,CAAA,EAECP,QAAAA,EACH,CAAA;AAAA,MACC,CAAC,CAACH,KAAAA,IAASA,UAAU,IAAA,oBAAQ,GAAA,CAAC,SAAOA,QAAAA,EAAAA,KAAAA,EAAM;AAAA,KAAA,EAC9C,CAAA;AAAA,IACCO,KAAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EACC,OAAA,EAASE,EAAAA,EACT,UACA,KAAA,EAAO,CAAC,CAACT,KAAAA,EAERO,QAAAA,EAAAA,KAAAA,EACH;AAAA,GAAA,EAEJ,CAAA;AAEJ;AASA,MAAMM,iBAAiBA,CAAC;AAAA,EACtBJ,EAAAA;AAAAA,EACAF,KAAAA;AAAAA,EACAO,KAAAA;AAAAA,EACAN,QAAAA;AAAAA,EACAO,QAAAA;AAAAA,EACAL,SAAAA;AAAAA,EACA,GAAGC;AACgB,CAAA,KAAM;AACzB,EAAA,MAAMK,YAAYC,KAAAA,EAAM;AACxB,EAAA,uBACE,IAAA,CAAC,QAAA,EAAA,EACC,YAAA,EAAa,YAAA,EACb,MAAK,KAAA,EACL,gBAAA,EAAkB,KAAA,EAClB,GAAIN,OACJ,SAAA,EAAWC,EAAAA,CAAGjB,MAAAA,CAAOuB,IAAAA,EAAMR,SAAS,CAAA,EAEpC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,eAAA,CAAgB,IAAA,EAAhB,EACC,KAAA,EACA,EAAA,EAAID,MAAMO,SAAAA,EACV,QAAA,EACA,QAAA,EACA,YAAA,EAAY,CAAA,EAAGT,KAAK,IACpB,SAAA,EAAWZ,MAAAA,CAAO,aAAa,CAAA,EAE/B,QAAA,kBAAA,GAAA,CAAC,eAAA,CAAgB,SAAA,EAAhB,EAA0B,SAAA,EAAWA,MAAAA,CAAO,iBAAiB,CAAA,EAAE,CAAA,EAClE,CAAA;AAAA,IACCY,yBACC,GAAA,CAAC,YAAA,EAAA,EACC,SAASE,EAAAA,IAAMO,SAAAA,EACf,UAECT,QAAAA,EAAAA,KAAAA,EACH;AAAA,GAAA,EAEJ,CAAA;AAEJ,CAAA;AAEAM,cAAAA,CAAeM,WAAAA,GAAc,gBAAA;AAC7BjB,UAAAA,CAAWkB,IAAAA,GAAOP,cAAAA;;;;"}

package/dist/esm/components/Select/common/InternalSelect.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, icon: "cross", onClick: clearSearch, "data-testid": "select-search-close", $showClose: search.length > 0, size: "xs" })
+            /* @__PURE__ */ jsx(SearchClose, { as: IconButton, htmlType: "button", icon: "cross", onClick: clearSearch, "data-testid": "select-search-close", $showClose: search.length > 0, 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) {