@punkbit/cui 0.0.251-rc.16 → 0.2.0

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

@@ -0,0 +1,76 @@
+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 { EmptyButton } from '../EmptyButton/index.js';
+import Popover_Arrow from '../Assets/Icons/Popover-Arrow.js';
+import { Icon as SvgImage } from '../Icon/index.js';
+
+const Popover = ({
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(RadixPopover.Root, { ...props, children });
+};
+const Trigger = styled(RadixPopover.Trigger).withConfig({
+  componentId: "sc-w0mfzk-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 }) }),
+    anchor && /* @__PURE__ */ jsx(RadixPopover.Anchor, { asChild: true, children: anchor })
+  ] });
+};
+PopoverTrigger.displayName = "PopoverTrigger";
+Popover.Trigger = PopoverTrigger;
+const MenuPanel = styled(GenericMenuPanel).withConfig({
+  componentId: "sc-w0mfzk-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 CloseButton = styled(EmptyButton).withConfig({
+  componentId: "sc-w0mfzk-2"
+})(["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,
+  showClose,
+  forceMount,
+  container,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(RadixPopover.Portal, { forceMount, container, children: /* @__PURE__ */ jsxs(MenuPanel, { as: RadixPopover.Content, $type: "popover", $showClose: showClose, $showArrow: 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
+  ] }) });
+};
+PopoverContent.displayName = "PopoverContent";
+Popover.Content = PopoverContent;
+
+export { Popover };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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';\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  return (\n    <RadixPopover.Portal\n      forceMount={forceMount}\n      container={container}\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","Content","Close","Icon","Arrow"],"mappings":";;;;;;;;AAQO,MAAMA,UAAUA,CAAC;AAAA,EAAEC,QAAAA;AAAAA,EAAU,GAAGC;AAAiC,CAAA,KAAM;AAC5E,EAAA,2BAAQ,YAAA,CAAa,IAAA,EAAb,KAAsBA,OAAQD,QAAAA,EAAS,CAAA;AACjD;AAEA,MAAME,OAAAA,GAAUC,MAAAA,CAAOC,YAAAA,CAAaF,OAAO,EAACG,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,6FAAA,CAAA,CAAA;AAY5C,MAAMC,iBAAiBA,CAAC;AAAA,EAAEC,MAAAA;AAAAA,EAAQR,QAAAA;AAAAA,EAAU,GAAGC;AAAoB,CAAA,KAAM;AACvE,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,OAAA,EAAA,EACC,SAAO,IAAA,EACP,GAAIA,OAEJ,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAKD,UAAS,CAAA,EACjB,CAAA;AAAA,IACCQ,0BAAU,GAAA,CAAC,YAAA,CAAa,QAAb,EAAoB,OAAA,EAAO,MAAEA,QAAAA,EAAAA,MAAAA,EAAO;AAAA,GAAA,EAClD,CAAA;AAEJ,CAAA;AACAD,cAAAA,CAAeE,WAAAA,GAAc,gBAAA;AAC7BV,OAAAA,CAAQG,OAAAA,GAAUK,cAAAA;AAalB,MAAMG,SAAAA,GAAYP,MAAAA,CAAOQ,gBAAgB,CAAA,CAACN,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,wBAAA,EAAA,GAAA,EAAA,oBAAA,EAAA,oBAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,GAAA,EAAA,GAAA,CAAA,EAE7B,CAAC;AAAA,EAAEM;AAAM,CAAA,KAAMA,KAAAA,CAAMC,KAAAA,CAAMC,OAAAA,CAAQC,KAAAA,CAAMC,GAChD,CAAC;AAAA,EAAEJ;AAAM,CAAA,KAAMA,KAAAA,CAAMC,KAAAA,CAAMC,OAAAA,CAAQC,KAAAA,CAAME,GACzB,CAAC;AAAA,EAAEL;AAAM,CAAA,KAAMA,MAAMC,KAAAA,CAAMC,OAAAA,CAAQI,MAAMC,KAAAA,CAAMC,UAAAA,CAAWC,SAC1D,CAAC;AAAA,EAAET;AAAM,CAAA,KAAMA,MAAMC,KAAAA,CAAMC,OAAAA,CAAQI,MAAMC,KAAAA,CAAMG,MAAAA,CAAOD,SACzD,CAAC;AAAA,EAAET;AAAM,CAAA,KAAMA,KAAAA,CAAMC,KAAAA,CAAMC,OAAAA,CAAQS,KAAAA,CAAMC,KAC5C,CAAC;AAAA,EAAEZ;AAAM,CAAA,KAAMA,KAAAA,CAAMC,KAAAA,CAAMC,OAAAA,CAAQW,MAAAA,CAAOJ,SAEtD,CAAC;AAAA,EAAEK;AAAW,CAAA,KAAOA,UAAAA,GAAa,uBAAuB,EAAG,CAAA;AAGhE,MAAMC,WAAAA,GAAcxB,MAAAA,CAAOyB,WAAW,CAAA,CAACvB,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,wBAAA,EAAA,SAAA,EAAA,WAAA,UAAA,EAAA,GAAA,GAE9B,CAAC;AAAA,EAAEM;AAAM,CAAA,KAAMA,KAAAA,CAAMC,KAAAA,CAAMC,OAAAA,CAAQC,KAAAA,CAAMC,GACvC,CAAC;AAAA,EAAEJ;AAAM,CAAA,KAAMA,KAAAA,CAAMC,KAAAA,CAAMC,OAAAA,CAAQC,KAAAA,CAAME,GACzC,CAAC;AAAA,EAAEL;AAAM,CAAA,KAAMA,MAAMC,KAAAA,CAAMC,OAAAA,CAAQe,IAAAA,CAAKC,IAAAA,CAAKC,OAC5C,CAAC;AAAA,EAAEnB;AAAM,CAAA,KAAMA,KAAAA,CAAMC,KAAAA,CAAMC,OAAAA,CAAQe,IAAAA,CAAKC,KAAKE,MAAM,CAAA;AAG/D,MAAMC,iBAAiBA,CAAC;AAAA,EACtBjC,QAAAA;AAAAA,EACAkC,SAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGpC;AACgB,CAAA,KAAM;AACzB,EAAA,uBACE,GAAA,CAAC,aAAa,MAAA,EAAb,EACC,YACA,SAAA,EAEA,QAAA,kBAAA,IAAA,CAAC,aACC,EAAA,EAAIG,YAAAA,CAAakC,SACjB,KAAA,EAAM,SAAA,EACN,YAAYH,SAAAA,EACZ,UAAA,EAAYD,WACZ,UAAA,EAAY,CAAA,EACZ,GAAIjC,KAAAA,EAEHkC,QAAAA,EAAAA;AAAAA,IAAAA,SAAAA,oBACC,GAAA,CAAC,WAAA,EAAA,EACC,EAAA,EAAI/B,YAAAA,CAAamC,KAAAA,EACjB,OAAA,EAAO,IAAA,EAEP,QAAA,kBAAA,GAAA,CAACC,QAAA,EAAA,EAAK,IAAA,EAAK,OAAA,EAAO,CAAA,EACpB,CAAA;AAAA,IAEDN,SAAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EACC,OAAA,EAAO,MACP,EAAA,EAAI9B,YAAAA,CAAaqC,KAAAA,EACjB,KAAA,EAAO,EAAA,EACP,MAAA,EAAQ,EAAA,EAER,QAAA,kBAAA,GAAA,CAAC,iBAAa,CAAA,EAChB,CAAA;AAAA,IAEDzC;AAAAA,GAAAA,EACH,CAAA,EACF,CAAA;AAEJ,CAAA;AACAiC,cAAAA,CAAexB,WAAAA,GAAc,gBAAA;AAC7BV,OAAAA,CAAQuC,OAAAA,GAAUL,cAAAA;;;;"}

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

@@ -0,0 +1,97 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { styled } from 'styled-components';
+import { IconButton } from '../IconButton/index.js';
+
+const getGradientDirection = (orientation, dir) => {
+  if (orientation === "vertical") {
+    return dir === "start" ? "to bottom" : "to top";
+  }
+  return dir === "start" ? "to right" : "to left";
+};
+const createGradient = (gradientDir, accentColor, bgColor) => `linear-gradient(${gradientDir}, ${accentColor} 0%, ${accentColor} var(--progress), ${bgColor} var(--progress), ${bgColor} 100%)`;
+const ProgressContainer = styled.div.withConfig({
+  componentId: "sc-v0q9ju-0"
+})(["display:flex;justify-content:space-between;align-items:center;overflow:hidden;transition:all 100ms ease-in-out;min-height:2px;", " ", ";"], ({
+  $orientation
+}) => $orientation === "vertical" ? `
+    flex-direction: column;
+    width: auto;
+    height: 100%;
+  ` : `
+    width: 100%;
+    width: -webkit-fill-available;
+    width: fill-available;
+    width: stretch;
+  `, ({
+  theme,
+  $completed,
+  $type,
+  $orientation,
+  $dir
+}) => {
+  const gradientDir = getGradientDirection($orientation, $dir);
+  return `
+    background: ${$completed && $type === "default" ? theme.click.field.color.background.default : createGradient(gradientDir, theme.global.color.accent.default, theme.click.field.color.background.default)};
+    background-size: calc(100% + 2px);
+    background-position: center;
+    gap: ${theme.click.field.space.gap};
+    border-radius: ${theme.click.field.radii.all};
+    font: ${theme.typography.styles.product.text.normal.sm};
+    padding: ${$type === "default" ? "0.25rem" : 0} ${theme.click.field.space.x};
+    padding-right: 0;
+    color: ${theme.global.color.accent.default};
+    border: 1px solid ${theme.click.field.color.stroke.default};
+    &:hover {
+      border: 1px solid ${theme.click.field.color.stroke.hover};
+      background: ${$completed ? theme.click.field.color.background.hover : createGradient(gradientDir, theme.global.color.accent.default, theme.click.field.color.background.hover)};
+      background-size: calc(100% + 2px);
+      background-position: center;
+    }
+    &:focus-within, &:focus {
+      border: 1px solid ${theme.click.field.color.stroke.active};
+      background: ${$completed ? theme.click.field.color.background.active : createGradient(gradientDir, theme.global.color.accent.default, theme.click.field.color.background.active)};
+      background-size: calc(100% + 2px);
+      background-position: center;
+    }
+  `;
+});
+const ProgressText = styled.span.withConfig({
+  componentId: "sc-v0q9ju-1"
+})(["width:100%;font:inherit;mix-blend-mode:difference;"]);
+const ProgressCloseButton = styled.button.withConfig({
+  componentId: "sc-v0q9ju-2"
+})(["mix-blend-mode:difference;border:0;visibility:", ";"], ({
+  $dismissable
+}) => $dismissable ? "visible" : "hidden");
+const ProgressBar = ({
+  progress,
+  type = "default",
+  dismissable = false,
+  onCancel,
+  successMessage,
+  orientation = "horizontal",
+  dir = "start",
+  ...props
+}) => {
+  const completed = progress === 100;
+  return /* @__PURE__ */ jsx(
+    ProgressContainer,
+    {
+      $completed: completed,
+      $type: type,
+      $orientation: orientation,
+      $dir: dir,
+      style: {
+        "--progress": `${progress}%`
+      },
+      ...props,
+      children: type === "default" && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(ProgressText, { $completed: completed, children: successMessage && completed ? successMessage : `${progress}%` }),
+        /* @__PURE__ */ jsx(ProgressCloseButton, { as: IconButton, size: "sm", type: "ghost", icon: "cross", $dismissable: dismissable, onClick: onCancel, "data-testid": "progressbar-close" })
+      ] })
+    }
+  );
+};
+
+export { ProgressBar };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import { HTMLAttributes, ReactNode } from 'react';\nimport { styled } from 'styled-components';\nimport { IconButton } from '@/components/IconButton';\n\ninterface CommonProgressBarProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'children'\n> {\n  /** The current progress value (0-100) */\n  progress: number;\n  /** Optional label to display */\n  label?: ReactNode;\n  /** Optional error message to display */\n  error?: ReactNode;\n  /** The orientation of the progress bar - horizontal fills width, vertical fills height */\n  orientation?: 'vertical' | 'horizontal';\n  /** The direction of progress fill - start fills from left/top, end fills from right/bottom */\n  dir?: 'start' | 'end';\n}\n\ninterface DefaultProgressBar extends CommonProgressBarProps {\n  /** The type of progress bar - \"default\" shows text and close button */\n  type?: 'default';\n  /** Message to display when progress reaches 100% */\n  successMessage?: ReactNode;\n}\n\ninterface SmallProgressBar extends CommonProgressBarProps {\n  /** The type of progress bar - \"small\" shows only the progress indicator */\n  type: 'small';\n  successMessage?: never;\n  dismissable?: never;\n  onCancel?: never;\n}\n\ninterface DismissableProgressBar {\n  /** When true, shows a close button to cancel the progress */\n  dismissable: true;\n  /** Callback function when the close button is clicked */\n  onCancel: () => void;\n}\n\ninterface NonDismissableProgressBar {\n  /** When false or undefined, the close button is hidden */\n  dismissable?: false;\n  onCancel?: never;\n}\n\nexport type ProgressBarProps =\n  | (DefaultProgressBar & (DismissableProgressBar | NonDismissableProgressBar))\n  | SmallProgressBar;\n\ntype Orientation = 'horizontal' | 'vertical';\ntype Direction = 'start' | 'end';\n\nconst getGradientDirection = (orientation: Orientation, dir: Direction): string => {\n  if (orientation === 'vertical') {\n    return dir === 'start' ? 'to bottom' : 'to top';\n  }\n  return dir === 'start' ? 'to right' : 'to left';\n};\n\nconst createGradient = (gradientDir: string, accentColor: string, bgColor: string) =>\n  `linear-gradient(${gradientDir}, ${accentColor} 0%, ${accentColor} var(--progress), ${bgColor} var(--progress), ${bgColor} 100%)`;\n\n// The tokens are copied from dataloading page and may need to change on the new component creation in figma\nconst ProgressContainer = styled.div<{\n  $completed: boolean;\n  $type: 'small' | 'default';\n  $orientation: Orientation;\n  $dir: Direction;\n}>`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  overflow: hidden;\n  transition: all 100ms ease-in-out;\n  min-height: 2px;\n  ${({ $orientation }) =>\n    $orientation === 'vertical'\n      ? `\n    flex-direction: column;\n    width: auto;\n    height: 100%;\n  `\n      : `\n    width: 100%;\n    width: -webkit-fill-available;\n    width: fill-available;\n    width: stretch;\n  `}\n  ${({ theme, $completed, $type, $orientation, $dir }) => {\n    const gradientDir = getGradientDirection($orientation, $dir);\n    return `\n    background: ${\n      $completed && $type === 'default'\n        ? theme.click.field.color.background.default\n        : createGradient(\n            gradientDir,\n            theme.global.color.accent.default,\n            theme.click.field.color.background.default\n          )\n    };\n    background-size: calc(100% + 2px);\n    background-position: center;\n    gap: ${theme.click.field.space.gap};\n    border-radius: ${theme.click.field.radii.all};\n    font: ${theme.typography.styles.product.text.normal.sm};\n    padding: ${$type === 'default' ? '0.25rem' : 0} ${theme.click.field.space.x};\n    padding-right: 0;\n    color: ${theme.global.color.accent.default};\n    border: 1px solid ${theme.click.field.color.stroke.default};\n    &:hover {\n      border: 1px solid ${theme.click.field.color.stroke.hover};\n      background: ${\n        $completed\n          ? theme.click.field.color.background.hover\n          : createGradient(\n              gradientDir,\n              theme.global.color.accent.default,\n              theme.click.field.color.background.hover\n            )\n      };\n      background-size: calc(100% + 2px);\n      background-position: center;\n    }\n    &:focus-within, &:focus {\n      border: 1px solid ${theme.click.field.color.stroke.active};\n      background: ${\n        $completed\n          ? theme.click.field.color.background.active\n          : createGradient(\n              gradientDir,\n              theme.global.color.accent.default,\n              theme.click.field.color.background.active\n            )\n      };\n      background-size: calc(100% + 2px);\n      background-position: center;\n    }\n  `;\n  }};\n`;\n\nconst ProgressText = styled.span<{ $completed: boolean }>`\n  width: 100%;\n  font: inherit;\n  mix-blend-mode: difference;\n`;\n\nconst ProgressCloseButton = styled.button<{ $dismissable?: boolean }>`\n  mix-blend-mode: difference;\n  border: 0;\n  visibility: ${({ $dismissable }) => ($dismissable ? 'visible' : 'hidden')};\n`;\n\nexport const ProgressBar = ({\n  progress,\n  type = 'default',\n  dismissable = false,\n  onCancel,\n  successMessage,\n  orientation = 'horizontal',\n  dir = 'start',\n  ...props\n}: ProgressBarProps) => {\n  const completed = progress === 100;\n\n  return (\n    <ProgressContainer\n      $completed={completed}\n      $type={type}\n      $orientation={orientation}\n      $dir={dir}\n      // Using a CSS variable avoids generating a new styled-components class per progress value.\n      style={\n        {\n          '--progress': `${progress}%`,\n        } as React.CSSProperties\n      }\n      {...props}\n    >\n      {type === 'default' && (\n        <>\n          <ProgressText $completed={completed}>\n            {successMessage && completed ? successMessage : `${progress}%`}\n          </ProgressText>\n          <ProgressCloseButton\n            as={IconButton}\n            size=\"sm\"\n            type=\"ghost\"\n            icon=\"cross\"\n            $dismissable={dismissable}\n            onClick={onCancel}\n            data-testid=\"progressbar-close\"\n          />\n        </>\n      )}\n    </ProgressContainer>\n  );\n};\n"],"names":["getGradientDirection","orientation","dir","createGradient","gradientDir","accentColor","bgColor","ProgressContainer","styled","div","withConfig","componentId","$orientation","theme","$completed","$type","$dir","click","field","color","background","default","global","accent","space","gap","radii","all","typography","styles","product","text","normal","sm","x","stroke","hover","active","ProgressText","span","ProgressCloseButton","button","$dismissable","ProgressBar","progress","type","dismissable","onCancel","successMessage","props","completed","IconButton"],"mappings":"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"}

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

@@ -0,0 +1,122 @@
+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 { 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';
+
+const RadioGroupRoot = styled(RadixRadioGroup.Root).withConfig({
+  componentId: "sc-x08f0d-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 RadioGroup = ({
+  children,
+  inline,
+  orientation,
+  dir,
+  error,
+  itemDir,
+  label,
+  disabled,
+  id,
+  ...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 }),
+      !!error && error !== true && /* @__PURE__ */ jsx(Error, { children: error })
+    ] }),
+    label && /* @__PURE__ */ jsx(Label, { htmlFor: id, disabled, error: !!error, children: label })
+  ] });
+};
+const RadioGroupItem = ({
+  id,
+  label,
+  value,
+  disabled,
+  required,
+  ...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, {}) }),
+    label && /* @__PURE__ */ jsx(GenericLabel, { htmlFor: id ?? defaultId, disabled, children: label })
+  ] });
+};
+RadioGroupItem.displayName = "RadioGroupItem";
+RadioGroup.Item = RadioGroupItem;
+const Wrapper = styled(FormRoot).withConfig({
+  componentId: "sc-x08f0d-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-x08f0d-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-x08f0d-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

@@ -0,0 +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":"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"}

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

@@ -0,0 +1,15 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { TextField } from '../TextField/index.js';
+import { Icon as SvgImage } from '../Icon/index.js';
+
+const SearchField = forwardRef(({
+  isFilter = false,
+  clear = true,
+  ...props
+}, ref) => {
+  return /* @__PURE__ */ jsx(TextField, { startContent: /* @__PURE__ */ jsx(SvgImage, { name: isFilter ? "filter" : "search", size: "sm" }), clear, ref, ...props });
+});
+
+export { SearchField };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/SearchField/SearchField.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport { TextField, type TextFieldProps } from '@/components/TextField';\nimport { Icon } from '@/components/Icon';\n\nexport interface SearchFieldProps extends Omit<\n  TextFieldProps,\n  'type' | 'startContent' | 'endContent'\n> {\n  isFilter?: boolean;\n}\n\nexport const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(\n  ({ isFilter = false, clear = true, ...props }, ref) => {\n    return (\n      <TextField\n        startContent={\n          <Icon\n            name={isFilter ? 'filter' : 'search'}\n            size=\"sm\"\n          />\n        }\n        clear={clear}\n        ref={ref}\n        {...props}\n      />\n    );\n  }\n);\n"],"names":["SearchField","forwardRef","isFilter","clear","props","ref","Icon"],"mappings":";;;;;AAYO,MAAMA,WAAAA,GAAcC,WACzB,CAAC;AAAA,EAAEC,QAAAA,GAAW,KAAA;AAAA,EAAOC,KAAAA,GAAQ,IAAA;AAAA,EAAM,GAAGC;AAAM,CAAA,EAAGC,GAAAA,KAAQ;AACrD,EAAA,uBACE,GAAA,CAAC,SAAA,EAAA,EACC,YAAA,kBACE,GAAA,CAACC,YACC,IAAA,EAAMJ,QAAAA,GAAW,QAAA,GAAW,QAAA,EAC5B,MAAK,IAAA,KAGT,KAAA,EACA,GAAA,EACA,GAAIE,KAAAA,EAAM,CAAA;AAGhB,CACF;;;;"}

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

@@ -0,0 +1,75 @@
+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 { Badge } from '../Badge/index.js';
+
+const {
+  ReactSortable
+} = ReactSortableModule;
+const BadgeList = styled.div.withConfig({
+  componentId: "sc-ko23jd-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-ko23jd-1"
+})(["width:100%;width:-webkit-fill-available;width:fill-available;width:stretch;max-width:fit-content;"]);
+const MultiSelectValue = ({
+  selectedValues,
+  valueNode,
+  onChange,
+  sortable,
+  onSelect,
+  disabled
+}) => {
+  const id = useId();
+  const [values, setValues] = useState(selectedValues.map((value) => ({
+    id: `multi-select-${id}-${value}`,
+    value
+  })));
+  useEffect(() => {
+    setValues(selectedValues.map((value) => ({
+      id: `multi-select-${id}-${value}`,
+      value
+    })));
+  }, [id, selectedValues]);
+  if (selectedValues.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(BadgeList, { as: ReactSortable, disabled: !sortable, list: values, setList: setValues, onEnd: (e) => {
+    const {
+      newDraggableIndex,
+      oldDraggableIndex
+    } = e;
+    if (typeof newDraggableIndex === "number" && typeof oldDraggableIndex === "number" && oldDraggableIndex !== newDraggableIndex) {
+      const temp = selectedValues[oldDraggableIndex];
+      selectedValues[oldDraggableIndex] = selectedValues[newDraggableIndex];
+      selectedValues[newDraggableIndex] = temp;
+      onChange(selectedValues);
+    }
+  }, revertOnSpill: true, children: selectedValues.map((value) => {
+    const nodeProps = valueNode.get(value) ?? {
+      children: value,
+      value
+    };
+    let otherProps = {
+      text: nodeProps.label ?? nodeProps.children,
+      icon: nodeProps?.icon,
+      iconDir: nodeProps?.iconDir
+    };
+    if (!disabled && !nodeProps.disabled) {
+      otherProps = {
+        ...otherProps,
+        dismissible: true,
+        onClose: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          onSelect(nodeProps.value);
+        }
+      };
+    }
+    return /* @__PURE__ */ jsx(MultiSelectBadge, { size: "sm", state: disabled ? "disabled" : "default", ...otherProps }, `multi-select-${id}-${value}`);
+  }) });
+};
+
+export { MultiSelectValue };
+//# sourceMappingURL=MultiSelectValue.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,25 @@
+import { jsx } from 'react/jsx-runtime';
+import { styled } from 'styled-components';
+import { IconWrapper } from '../IconWrapper/index.js';
+
+const SelectValueContainer = styled.div.withConfig({
+  componentId: "sc-1qh3wrr-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
+}) => {
+  if (value === void 0 || value === null) {
+    return null;
+  }
+  const {
+    icon,
+    iconDir,
+    children,
+    label
+  } = valueNode ?? {};
+  return /* @__PURE__ */ jsx(SelectValueContainer, { children: /* @__PURE__ */ jsx(IconWrapper, { icon, iconDir, gap: "xxs", isResponsive: false, children: label ?? children ?? value }) });
+};
+
+export { SingleSelectValue as default };
+//# sourceMappingURL=SingleSelectValue.js.map

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

@@ -0,0 +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;;;;"}