@cfx-dev/ui-components 4.5.21 → 5.0.1

package/dist/components/Checkbox/CheckboxShowcase.js

@@ -1,33 +1,174 @@
-import { jsx as o } from "react/jsx-runtime";
-import r from "react";
-import i from "../Box/Box.js";
-import "../../utils/ui/ui.js";
-import h from "./Checkbox.js";
-const n = "cfxui__CheckboxShowcase__root__5c0e0", _ = "cfxui__CheckboxShowcase__checked__e49f9", k = "cfxui__CheckboxShowcase__icon__686ec", e = {
-  root: n,
-  checked: _,
-  icon: k
+import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import a from "react";
+import r from "../Flex/Flex.js";
+import "../Icons/cfx-icons/Close.js";
+import "../Icons/cfx-icons/Controller.js";
+import "../Icons/cfx-icons/Copy.js";
+import "../Icons/cfx-icons/DownArrow.js";
+import "../Icons/cfx-icons/DownChevron.js";
+import "../Icons/cfx-icons/Download.js";
+import "../Icons/cfx-icons/Expand.js";
+import "../Icons/cfx-icons/ExternalLink.js";
+import "../Icons/cfx-icons/Filter.js";
+import "../Icons/cfx-icons/Folder.js";
+import "../Icons/cfx-icons/Heart.js";
+import "../Icons/cfx-icons/HeartFilled.js";
+import "../Icons/cfx-icons/Help.js";
+import "../Icons/cfx-icons/LeftArrow.js";
+import "../Icons/cfx-icons/LeftChevron.js";
+import "../Icons/cfx-icons/Map.js";
+import "../Icons/cfx-icons/Menu.js";
+import "../Icons/cfx-icons/Minus.js";
+import "../Icons/cfx-icons/More.js";
+import "../Icons/cfx-icons/MoreInfo.js";
+import "../Icons/cfx-icons/Pencil.js";
+import "../Icons/cfx-icons/Play.js";
+import "../Icons/cfx-icons/Plus.js";
+import "../Icons/cfx-icons/Radio.js";
+import "../Icons/cfx-icons/Refresh.js";
+import "../Icons/cfx-icons/RightArrow.js";
+import "../Icons/cfx-icons/RightChevron.js";
+import "../Icons/cfx-icons/Search.js";
+import "../Icons/cfx-icons/ServerList.js";
+import "../Icons/cfx-icons/ServerReconnect.js";
+import "../Icons/cfx-icons/Sort.js";
+import "../Icons/cfx-icons/Square.js";
+import "../Icons/cfx-icons/SquareFilled.js";
+import "../Icons/cfx-icons/SquareTick.js";
+import "../Icons/cfx-icons/Stop.js";
+import "../Icons/cfx-icons/Success.js";
+import n from "../Icons/cfx-icons/Tick.js";
+import "../Icons/cfx-icons/Transfer.js";
+import "../Icons/cfx-icons/Trash.js";
+import "../Icons/cfx-icons/Undo.js";
+import "../Icons/cfx-icons/UpArrow.js";
+import "../Icons/cfx-icons/UpChevron.js";
+import "../Icons/cfx-icons/Upload.js";
+import "../Icons/cfx-icons/Users.js";
+import "../Icons/cfx-icons/Visibility.js";
+import "../Icons/cfx-icons/VisibilityOff.js";
+import "../Icons/cfx-icons/Warning.js";
+import "../Icons/cfx-icons/Cart.js";
+import "../Icons/cfx-icons/User.js";
+import "../Icons/cfx-icons/Verified.js";
+import "../Icons/cfx-icons/UpvotesBurst.js";
+import "../Icons/cfx-icons/UpvotesRecurring.js";
+import "../Icons/cfx-iconsXLarge/Close.js";
+import "../Icons/cfx-iconsXLarge/Controller.js";
+import "../Icons/cfx-iconsXLarge/Copy.js";
+import "../Icons/cfx-iconsXLarge/DownArrow.js";
+import "../Icons/cfx-iconsXLarge/DownChevron.js";
+import "../Icons/cfx-iconsXLarge/Download.js";
+import "../Icons/cfx-iconsXLarge/Expand.js";
+import "../Icons/cfx-iconsXLarge/ExternalLink.js";
+import "../Icons/cfx-iconsXLarge/Filter.js";
+import "../Icons/cfx-iconsXLarge/Folder.js";
+import "../Icons/cfx-iconsXLarge/Heart.js";
+import "../Icons/cfx-iconsXLarge/HeartFilled.js";
+import "../Icons/cfx-iconsXLarge/Help.js";
+import "../Icons/cfx-iconsXLarge/LeftArrow.js";
+import "../Icons/cfx-iconsXLarge/LeftChevron.js";
+import "../Icons/cfx-iconsXLarge/Map.js";
+import "../Icons/cfx-iconsXLarge/Menu.js";
+import "../Icons/cfx-iconsXLarge/Minus.js";
+import "../Icons/cfx-iconsXLarge/More.js";
+import "../Icons/cfx-iconsXLarge/MoreInfo.js";
+import "../Icons/cfx-iconsXLarge/Pencil.js";
+import "../Icons/cfx-iconsXLarge/Play.js";
+import "../Icons/cfx-iconsXLarge/Plus.js";
+import "../Icons/cfx-iconsXLarge/Radio.js";
+import "../Icons/cfx-iconsXLarge/Refresh.js";
+import "../Icons/cfx-iconsXLarge/RightArrow.js";
+import "../Icons/cfx-iconsXLarge/RightChevron.js";
+import "../Icons/cfx-iconsXLarge/Search.js";
+import "../Icons/cfx-iconsXLarge/ServerList.js";
+import "../Icons/cfx-iconsXLarge/ServerReconnect.js";
+import "../Icons/cfx-iconsXLarge/Sort.js";
+import "../Icons/cfx-iconsXLarge/Square.js";
+import "../Icons/cfx-iconsXLarge/SquareFilled.js";
+import "../Icons/cfx-iconsXLarge/SquareTick.js";
+import "../Icons/cfx-iconsXLarge/Stop.js";
+import "../Icons/cfx-iconsXLarge/Success.js";
+import "../Icons/cfx-iconsXLarge/Tick.js";
+import "../Icons/cfx-iconsXLarge/Transfer.js";
+import "../Icons/cfx-iconsXLarge/Trash.js";
+import "../Icons/cfx-iconsXLarge/Undo.js";
+import "../Icons/cfx-iconsXLarge/UpArrow.js";
+import "../Icons/cfx-iconsXLarge/UpChevron.js";
+import "../Icons/cfx-iconsXLarge/Upload.js";
+import "../Icons/cfx-iconsXLarge/Users.js";
+import "../Icons/cfx-iconsXLarge/Visibility.js";
+import "../Icons/cfx-iconsXLarge/VisibilityOff.js";
+import "../Icons/cfx-iconsXLarge/Warning.js";
+import "../Icons/cfx-iconsXLarge/Cart.js";
+import "../Icons/cfx-iconsXLarge/User.js";
+import "../Icons/cfx-iconsXLarge/Verified.js";
+import "../Icons/cfx-iconsXLarge/UpvotesBurst.js";
+import "../Icons/cfx-iconsXLarge/UpvotesRecurring.js";
+import t from "./Checkbox.js";
+const h = "cfxui__CheckboxShowcase__root__5c0e0", d = "cfxui__CheckboxShowcase__checked__e49f9", s = "cfxui__CheckboxShowcase__icon__686ec", m = {
+  root: h,
+  checked: d,
+  icon: s
 };
-function l(s) {
-  const [a, c] = r.useState(!1);
-  return /* @__PURE__ */ o(i, { p: 2, children: /* @__PURE__ */ o(
-    h,
-    {
-      ...s,
-      id: "checkbox1",
-      name: "checkbox1",
-      checked: a,
-      onCheckedChange: c,
-      onClick: () => c((t) => !t),
-      size: "normal",
-      rootClassName: e.root,
-      indicatorClassName: e.indicator,
-      iconClassName: e.icon,
-      checkedClassName: e.checked,
-      squareClassName: e.square
-    }
-  ) });
+function ki(l) {
+  const [e, p] = a.useState(!1);
+  return /* @__PURE__ */ i(r, { direction: "column", gap: "large", children: [
+    /* @__PURE__ */ i(r, { direction: "column", gap: "small", children: [
+      /* @__PURE__ */ o("h4", { children: "Small" }),
+      /* @__PURE__ */ o(t, { size: "small" })
+    ] }),
+    /* @__PURE__ */ i(r, { direction: "column", gap: "small", children: [
+      /* @__PURE__ */ o("h4", { children: "Medium" }),
+      /* @__PURE__ */ o(t, { size: "medium" })
+    ] }),
+    /* @__PURE__ */ i(r, { direction: "column", gap: "small", children: [
+      /* @__PURE__ */ o("h4", { children: "Large" }),
+      /* @__PURE__ */ o(t, { size: "large" })
+    ] }),
+    /* @__PURE__ */ i(r, { direction: "column", gap: "small", children: [
+      /* @__PURE__ */ o("h4", { children: "Color Accent" }),
+      /* @__PURE__ */ o(t, { color: "accent" })
+    ] }),
+    /* @__PURE__ */ i(r, { direction: "column", gap: "small", children: [
+      /* @__PURE__ */ o("h4", { children: "Tick" }),
+      /* @__PURE__ */ o(t, { iconIndicator: n })
+    ] }),
+    /* @__PURE__ */ i(r, { direction: "column", gap: "small", children: [
+      /* @__PURE__ */ o("h4", { children: "Secondary" }),
+      /* @__PURE__ */ o(
+        t,
+        {
+          iconIndicator: n,
+          theme: "secondary",
+          onCheckedChange: p,
+          onClick: () => p((c) => !c),
+          checked: e
+        }
+      )
+    ] }),
+    /* @__PURE__ */ i(r, { direction: "column", gap: "small", children: [
+      /* @__PURE__ */ o("h4", { children: "Custom" }),
+      /* @__PURE__ */ o(
+        t,
+        {
+          ...l,
+          id: "checkbox1",
+          name: "checkbox1",
+          checked: e,
+          onCheckedChange: p,
+          onClick: () => p((c) => !c),
+          size: "medium",
+          rootClassName: m.root,
+          indicatorClassName: m.indicator,
+          iconClassName: m.icon,
+          checkedClassName: m.checked,
+          squareClassName: m.square
+        }
+      )
+    ] })
+  ] });
 }
 export {
-  l as default
+  ki as default
 };

package/dist/components/ControlBox/ControlBox.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 
-export type ControlBoxSize = 'small' | 'normal' | 'large';
+export type ControlBoxSize = 'small' | 'medium' | 'large';
 export interface ControlBoxProps {
     size?: ControlBoxSize;
     className?: string;

package/dist/components/ControlBox/ControlBox.js

@@ -1,23 +1,23 @@
-import { jsx as s } from "react/jsx-runtime";
-import c from "react";
-import { clsx as m } from "../../utils/clsx.js";
-const e = "cfxui__ControlBox__root__6a08c", x = "cfxui__ControlBox__small__8beb2", f = "cfxui__ControlBox__normal__e3aa5", i = "cfxui__ControlBox__large__1039d", o = {
-  root: e,
-  small: x,
-  normal: f,
-  large: i
+import { jsx as c } from "react/jsx-runtime";
+import e from "react";
+import { clsx as n } from "../../utils/clsx.js";
+const a = "cfxui__ControlBox__root__6a08c", i = "cfxui__ControlBox__small__8beb2", x = "cfxui__ControlBox__medium__628cd", u = "cfxui__ControlBox__large__1039d", o = {
+  root: a,
+  small: i,
+  medium: x,
+  large: u
 };
-function u(r) {
+function f(t) {
   const {
-    size: t = "normal",
-    className: l,
-    children: _,
-    ref: a
-  } = r, n = m(o.root, l, o[t]);
-  return /* @__PURE__ */ s("div", { ref: a, className: n, children: _ });
+    size: _ = "medium",
+    className: r,
+    children: l,
+    ref: m
+  } = t, s = n(o.root, r, o[_]);
+  return /* @__PURE__ */ c("div", { ref: m, className: s, children: l });
 }
-const p = c.memo(u);
+const p = e.memo(f);
 export {
-  u as ControlBox,
+  f as ControlBox,
   p as default
 };

package/dist/components/DataTable/DataTableShowcase.js

@@ -6,7 +6,7 @@ import { Scrollable as c } from "../Scrollable/Scrollable.js";
 import { Text as r } from "../Text/Text.js";
 import "../../utils/ui/ui.js";
 import { DataTable as o } from "./DataTable.js";
-const n = [
+const i = [
   [
     "Cell 1",
     "Cell 2",
@@ -26,7 +26,7 @@ const n = [
   ["Cell 7", "Cell 8", "Cell 9", new Date(2023, 2, 1).toLocaleDateString(), /* @__PURE__ */ e(l, { children: "Badge" }, "3")],
   ["Cell 4", "Cell 5", "Cell 6", new Date(2023, 1, 1).toLocaleDateString(), /* @__PURE__ */ e(l, { children: "Badge" }, "2")],
   ["Cell 7", "Cell 8", "Cell 9", new Date(2023, 2, 1).toLocaleDateString(), /* @__PURE__ */ e(l, { children: "Badge" }, "3")]
-], i = [
+], n = [
   { text: "Header 1" },
   { text: "Header 2" },
   { text: "Header 3" },
@@ -35,9 +35,9 @@ const n = [
 ];
 function C() {
   return /* @__PURE__ */ t(a, { gap: "large", vertical: !0, children: [
-    /* @__PURE__ */ t(a, { gap: "normal", vertical: !0, children: [
+    /* @__PURE__ */ t(a, { gap: "medium", vertical: !0, children: [
       /* @__PURE__ */ e(r, { children: "Table" }),
-      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(o, { headers: i, data: n }) })
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(o, { headers: n, data: i }) })
     ] }),
     /* @__PURE__ */ t(a, { fullWidth: !0, vertical: !0, children: [
       /* @__PURE__ */ e(r, { children: "Table with scroll" }),
@@ -48,7 +48,7 @@ function C() {
             height: "400px",
             overflow: "hidden"
           },
-          children: /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(o, { includeRadio: !0, headers: i, data: n }) })
+          children: /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(o, { includeRadio: !0, headers: n, data: i }) })
         }
       )
     ] })

package/dist/components/Dot/Dot.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 import { GetColorProps } from '../../utils/color';
 
-export type DotSize = 'small' | 'normal' | 'large';
+export type DotSize = 'small' | 'medium' | 'large';
 export interface DotProps extends GetColorProps {
     size?: DotSize;
     className?: string;

package/dist/components/Dot/Dot.js

@@ -1,28 +1,28 @@
-import { jsx as i } from "react/jsx-runtime";
-import { clsx as l } from "../../utils/clsx.js";
-import { getColor as a } from "../../utils/color.js";
-const m = "cfxui__Dot__root__9bed3", r = {
-  root: m,
+import { jsx as t } from "react/jsx-runtime";
+import { clsx as m } from "../../utils/clsx.js";
+import { getColor as c } from "../../utils/color.js";
+const l = "cfxui__Dot__root__9bed3", _ = {
+  root: l,
   "size-small": "cfxui__Dot__size-small__b7d03",
-  "size-normal": "cfxui__Dot__size-normal__e73b3",
+  "size-medium": "cfxui__Dot__size-medium__27fc4",
   "size-large": "cfxui__Dot__size-large__4fe0a"
 };
 function z(o) {
   const {
-    color: _ = "primary",
-    size: e = "normal",
-    className: s,
-    ref: t
+    color: e = "primary",
+    size: i = "medium",
+    className: r,
+    ref: s
   } = o;
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ t(
     "div",
     {
-      ref: t,
-      className: l(r.root, r[`size-${e}`], s),
+      ref: s,
+      className: m(_.root, _[`size-${i}`], r),
       style: {
-        backgroundColor: a({
+        backgroundColor: c({
           ...o,
-          color: _
+          color: e
         })
       }
     }

package/dist/components/DropdownContent/DropdownContent.d.ts

@@ -1,24 +1,20 @@
 import { default as React } from 'react';
-import { InputSize } from '../Input';
-import { ResponsiveValueType } from '../../utils/ui';
 
 export interface DropdownOption<T extends string> {
     value: T;
     label: React.ReactNode;
     disabled?: boolean;
 }
-export type ExtraClassNameTyape = 'content' | 'trigger';
+export type ExtraClassNameType = 'content' | 'trigger';
 export type DropdownContentOption = DropdownOption<string>;
 export interface DropdownContentProps {
     options: DropdownContentOption[];
     className?: string;
     itemClassName?: string;
     triggerWidth?: React.CSSProperties['width'];
-    size?: ResponsiveValueType<InputSize>;
     fullWidth?: boolean;
     onSelect: (value: string) => void;
 }
-export declare function getDropdownContentSizeClassNames(size?: DropdownContentProps['size'], extraClassName?: ExtraClassNameTyape): string;
 declare function DropdownContent(props: DropdownContentProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof DropdownContent>;
 export default _default;

package/dist/components/DropdownContent/DropdownContent.js

@@ -1,9 +1,8 @@
 import "react/jsx-runtime";
-import { D as a, g as i } from "../../DropdownContent-MvHlrWi6.js";
+import { D as a } from "../../DropdownContent-BMfQCuaP.js";
 import "react";
 import "../../utils/clsx.js";
 import "../../utils/ui/ui.js";
 export {
-  a as default,
-  i as getDropdownContentSizeClassNames
+  a as default
 };

package/dist/components/DropdownContent/index.d.ts

@@ -1,2 +1,2 @@
-export { default as DropdownContent, getDropdownContentSizeClassNames, } from './DropdownContent';
+export { default as DropdownContent } from './DropdownContent';
 export type { DropdownContentProps, DropdownContentOption, } from './DropdownContent';

package/dist/components/DropdownContent/index.js

@@ -1,5 +1,4 @@
-import { D as n, g as t } from "../../DropdownContent-MvHlrWi6.js";
+import { D as r } from "../../DropdownContent-BMfQCuaP.js";
 export {
-  n as DropdownContent,
-  t as getDropdownContentSizeClassNames
+  r as DropdownContent
 };

package/dist/components/DropdownMenu/DropdownMenu.d.ts

@@ -1,9 +1,8 @@
 import { default as React } from 'react';
 import { DropdownContentProps } from '../DropdownContent';
 
-export interface DropdownMenuProps extends React.PropsWithChildren, Omit<DropdownContentProps, 'className' | 'size'> {
+export interface DropdownMenuProps extends React.PropsWithChildren, Omit<DropdownContentProps, 'className'> {
     contentClassName?: string;
-    contentSize?: DropdownContentProps['size'];
     dir?: 'ltr' | 'rtl';
 }
 declare function DropdownMenu(props: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -1,33 +1,31 @@
 import { jsxs as d, jsx as o } from "react/jsx-runtime";
-import { R as m, T as p, D as f } from "../../DropdownContent-MvHlrWi6.js";
-import u from "react";
-function h(t) {
+import { R as m, T as c, D as p } from "../../DropdownContent-BMfQCuaP.js";
+import f from "react";
+function u(t) {
   const {
-    options: e,
-    onSelect: r,
+    options: r,
+    onSelect: e,
     contentClassName: n,
-    contentSize: s,
-    fullWidth: a = !1,
-    dir: i = "ltr",
+    fullWidth: s = !1,
+    dir: a = "ltr",
     children: l,
-    ...c
+    ...i
   } = t;
-  return /* @__PURE__ */ d(m, { dir: i, children: [
-    /* @__PURE__ */ o(p, { asChild: !0, children: l }),
+  return /* @__PURE__ */ d(m, { dir: a, children: [
+    /* @__PURE__ */ o(c, { asChild: !0, children: l }),
     /* @__PURE__ */ o(
-      f,
+      p,
       {
-        options: e,
-        size: s,
-        fullWidth: a,
-        onSelect: r,
+        options: r,
+        fullWidth: s,
+        onSelect: e,
         className: n,
-        ...c
+        ...i
       }
     )
   ] });
 }
-const C = u.memo(h);
+const x = f.memo(u);
 export {
-  C as default
+  x as default
 };

package/dist/components/DropdownSelect/DropdownSelect.d.ts

@@ -1,16 +1,11 @@
 import { default as React } from 'react';
 import { DropdownContentOption } from '../DropdownContent';
-import { IconSize } from '../Icon';
-import { InputSize } from '../Input';
-import { ResponsiveValueType } from '../../utils/ui';
 
-export declare const ICON_SIZE_MAP: Record<InputSize, IconSize>;
 export interface DropdownSelectProps<T = string> {
     options: DropdownContentOption[];
     value?: T;
     onChange: (value: T) => void;
     placeholder?: React.ReactNode;
-    size?: ResponsiveValueType<InputSize>;
     disabled?: boolean;
     ref?: React.Ref<HTMLButtonElement>;
     fullWidth?: boolean;

package/dist/components/DropdownSelect/DropdownSelect.js

@@ -1,84 +1,76 @@
-import { jsxs as f, jsx as l } from "react/jsx-runtime";
-import { g as W, R as N, T as R, D as v } from "../../DropdownContent-MvHlrWi6.js";
-import _, { useRef as b, useState as z, useEffect as I } from "react";
-import T from "../Flex/Flex.js";
-import { clsx as j } from "../../utils/clsx.js";
-import { Icon as y } from "../Icon/Icon.js";
-import { mergeRefs as E } from "../../utils/mergeRefs.js";
-const M = "cfxui__DropdownSelect__icon__d05b8", O = "cfxui__DropdownSelect__trigger__c03df", k = "cfxui__DropdownSelect__onlight__f0191", A = "cfxui__DropdownSelect__fullWidth__dce56", B = "cfxui__DropdownSelect__placeholder__e0d89", e = {
-  icon: M,
-  trigger: O,
-  onlight: k,
-  fullWidth: A,
-  placeholder: B
-}, K = {
-  small: "xxsmall",
-  normal: "xsmall",
-  large: "normal"
+import { jsxs as f, jsx as r } from "react/jsx-runtime";
+import { R as D, T as W, D as C } from "../../DropdownContent-BMfQCuaP.js";
+import a, { useRef as R, useState as v, useEffect as b } from "react";
+import N from "../Flex/Flex.js";
+import { clsx as T } from "../../utils/clsx.js";
+import { Icon as j } from "../Icon/Icon.js";
+import { mergeRefs as y } from "../../utils/mergeRefs.js";
+const k = "cfxui__DropdownSelect__icon__d05b8", B = "cfxui__DropdownSelect__trigger__c03df", E = "cfxui__DropdownSelect__onlight__f0191", F = "cfxui__DropdownSelect__fullWidth__dce56", I = "cfxui__DropdownSelect__placeholder__e0d89", e = {
+  icon: k,
+  trigger: B,
+  onlight: E,
+  fullWidth: F,
+  placeholder: I
 };
-function L(g) {
+function J(_) {
   const {
-    options: r,
+    options: l,
     value: t,
-    onChange: c,
-    size: i = "normal",
+    onChange: i,
     fullWidth: o = !1,
-    onlight: m = !1,
-    disabled: p,
-    placeholder: u = "Select...",
+    onlight: u = !1,
+    disabled: g,
+    placeholder: p = "Select...",
     ref: h,
-    name: a
-  } = g, n = b(null), [x, S] = z(void 0), w = W(i, "trigger"), C = j(
-    w,
+    name: s
+  } = _, n = R(null), [m, x] = v(void 0), S = T(
     e.trigger,
     {
       [e.placeholder]: !t,
       [e.fullWidth]: o,
-      [e.onlight]: m
+      [e.onlight]: u
     }
-  ), D = _.useCallback((s) => {
-    c(s);
-  }, [c]), d = _.useMemo(
-    () => r.find((s) => s.value === t),
-    [r, t]
+  ), w = a.useCallback((c) => {
+    i(c);
+  }, [i]), d = a.useMemo(
+    () => l.find((c) => c.value === t),
+    [l, t]
   );
-  return I(() => {
-    o && n.current && S(n.current.offsetWidth);
-  }, [o]), /* @__PURE__ */ f(N, { children: [
-    a && /* @__PURE__ */ l(
+  return b(() => {
+    o && n.current && x(n.current.offsetWidth);
+  }, [o]), /* @__PURE__ */ f(D, { children: [
+    s && /* @__PURE__ */ r(
       "input",
       {
         type: "hidden",
-        name: a,
+        name: s,
         value: t
       }
     ),
-    /* @__PURE__ */ l(
-      R,
+    /* @__PURE__ */ r(
+      W,
       {
-        ref: E(h, n),
-        className: C,
-        disabled: p,
-        children: /* @__PURE__ */ f(T, { gap: "small", centered: !0, spaceBetween: !0, children: [
-          d !== void 0 ? d.label : u,
-          /* @__PURE__ */ l(y, { className: e.icon, name: "DownChevron" })
+        ref: y(h, n),
+        className: S,
+        disabled: g,
+        children: /* @__PURE__ */ f(N, { gap: "small", centered: !0, spaceBetween: !0, children: [
+          d !== void 0 ? d.label : p,
+          /* @__PURE__ */ r(j, { className: e.icon, name: "DownChevron" })
         ] })
       }
     ),
-    /* @__PURE__ */ l(
-      v,
+    /* @__PURE__ */ r(
+      C,
       {
-        triggerWidth: x,
-        options: r,
-        size: i,
+        triggerWidth: m,
+        options: l,
         fullWidth: o,
-        onSelect: D
+        onSelect: w
       }
     )
   ] });
 }
 export {
-  L as DropdownSelect,
-  K as ICON_SIZE_MAP,
-  L as default
+  J as DropdownSelect,
+  J as default
 };