@vkzstudio/muza-ui 1.0.44 → 1.0.45

package/dist/components/ResponsiveLayoutTable/ResponsiveLayoutTable.js

@@ -0,0 +1,134 @@
+import { jsx as r, jsxs as T } from "react/jsx-runtime";
+import "react";
+import { useBreakpoints as E } from "../../hooks/use-is-breakpoint.js";
+import { Skeleton as H } from "../Skeleton/Skeleton.js";
+import { cn as l } from "../../utils/cn.js";
+import { typographyVariants as S, Typography as V } from "../Typography/Typography.js";
+const J = ({
+  data: y,
+  layouts: n,
+  onRowClick: f,
+  disabled: o = !1,
+  isRowNew: h,
+  isRowLoading: d,
+  overflowingRowBackground: i = !1,
+  classNames: c,
+  tableLayout: x,
+  ...k
+}) => {
+  const K = E(), g = (() => {
+    for (const e of n) {
+      if (e.responsive === void 0) return e;
+      if (typeof e.responsive == "boolean") {
+        if (e.responsive) return e;
+      } else if (K[e.responsive])
+        return e;
+    }
+    return n[n.length - 1];
+  })(), {
+    columns: u,
+    showHeader: m = !0,
+    classNames: p
+  } = g, j = !!f && !o;
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: l(
+        "w-full",
+        i ? "overflow-visible" : "overflow-x-auto overflow-y-hidden",
+        c == null ? void 0 : c.root
+      ),
+      ...k,
+      children: /* @__PURE__ */ T(
+        "table",
+        {
+          className: l("w-full border-collapse", {
+            "table-fixed": x === "fixed"
+          }),
+          children: [
+            m && /* @__PURE__ */ r("thead", { children: /* @__PURE__ */ r("tr", { className: l(p == null ? void 0 : p.header), children: u.map((e, s) => /* @__PURE__ */ r(
+              "th",
+              {
+                className: l(
+                  S({
+                    size: "sm",
+                    uppercase: !0,
+                    variant: "body",
+                    weight: "medium"
+                  }),
+                  "h-comp-webcheckout-table-cells-h-first-row",
+                  "px-comp-webcheckout-table-cells-p-hor py-comp-webcheckout-table-cells-p-ver text-left",
+                  "text-text-dark-secondary",
+                  { "text-text-dark-disabled": o },
+                  e.className
+                ),
+                children: e.title
+              },
+              s
+            )) }) }),
+            /* @__PURE__ */ r("tbody", { children: y.map((e, s) => {
+              const a = (d == null ? void 0 : d(e, s)) ?? !1, v = !a && ((h == null ? void 0 : h(e, s)) ?? !1), b = j && !a;
+              return /* @__PURE__ */ r(
+                "tr",
+                {
+                  className: l(
+                    "border-t border-stroke-base-secondary",
+                    !m && "first:border-t-0",
+                    {
+                      "relative before:absolute before:inset-0 before:content-['']": i,
+                      "bg-comp-responsive-layout-table-bg-success": !i && v,
+                      "before:bg-comp-responsive-layout-table-bg-success": i && v,
+                      "cursor-pointer": b,
+                      "outline-0 hover:bg-surface-state-bg-info focus-visible:bg-surface-state-bg-info": b && !i,
+                      "outline-0 hover:before:bg-surface-state-bg-info focus-visible:before:bg-surface-state-bg-info": b && i
+                    },
+                    i && (c == null ? void 0 : c.rowBackgroundInset),
+                    p == null ? void 0 : p.row
+                  ),
+                  onClick: b ? () => f(e, s) : void 0,
+                  onKeyDown: b ? (t) => {
+                    (t.key === "Enter" || t.key === " ") && (t.preventDefault(), f(e, s));
+                  } : void 0,
+                  tabIndex: b ? 0 : void 0,
+                  "aria-busy": a || void 0,
+                  children: u.map((t, z) => /* @__PURE__ */ r(
+                    "td",
+                    {
+                      className: l(
+                        "h-comp-webcheckout-table-cells-h w-full",
+                        "px-comp-webcheckout-table-cells-p-hor py-comp-webcheckout-table-cells-p-ver",
+                        i && "relative",
+                        t.className
+                      ),
+                      children: a ? t.skeleton ?? /* @__PURE__ */ r(H, { color: "light", className: "h-4 w-full" }) : t.render ? t.render(e, s, o) : /* @__PURE__ */ r(
+                        V,
+                        {
+                          variant: "body",
+                          size: "base",
+                          weight: "medium",
+                          component: "span",
+                          fixY: !0,
+                          className: l({
+                            "line-clamp-1": t.lineClamp === !0 || t.lineClamp === 1,
+                            "line-clamp-2": t.lineClamp === 2,
+                            "text-text-dark-disabled": o
+                          }),
+                          children: t.dataKey ? e[t.dataKey] : null
+                        }
+                      )
+                    },
+                    z
+                  ))
+                },
+                e.id
+              );
+            }) })
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  J as ResponsiveLayoutTable
+};

package/dist/components/ResponsiveLayoutTable/ResponsiveLayoutTable.stories.d.ts

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const WithRowClick: Story;
+export declare const WithNewRow: Story;
+export declare const NewRowWithRowClick: Story;
+export declare const OverflowingRowBackground: Story;
+export declare const Disabled: Story;
+export declare const Loading: Story;
+export declare const LoadingMore: Story;
+export declare const CustomBreakpoint: Story;
+//# sourceMappingURL=ResponsiveLayoutTable.stories.d.ts.map

package/dist/components/ResponsiveLayoutTable/ResponsiveLayoutTable.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveLayoutTable.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ResponsiveLayoutTable/ResponsiveLayoutTable.stories.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAiB3D,QAAA,MAAM,IAAI,EAAE,IAoDX,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAA;AAErB,eAAO,MAAM,OAAO,EAAE,KAmBrB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAuB1B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAoBxB,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAwBhC,CAAA;AAED,eAAO,MAAM,wBAAwB,EAAE,KA8BtC,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAsBtB,CAAA;AAUD,eAAO,MAAM,OAAO,EAAE,KAoBrB,CAAA;AAeD,eAAO,MAAM,WAAW,EAAE,KAwBzB,CAAA;AAID,eAAO,MAAM,gBAAgB,EAAE,KA6B9B,CAAA"}

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

@@ -0,0 +1,2 @@
+export { ResponsiveLayoutTable, type ResponsiveLayoutTableProps, type ResponsiveLayoutTableLayout, type ResponsiveLayoutTableColumn, type ResponsiveLayoutTableClassNames, type ResponsiveLayoutTableLayoutClassNames, } from './ResponsiveLayoutTable';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ResponsiveLayoutTable/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ResponsiveLayoutTable/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EACrB,KAAK,0BAA0B,EAC/B,KAAK,2BAA2B,EAChC,KAAK,2BAA2B,EAChC,KAAK,+BAA+B,EACpC,KAAK,qCAAqC,GAC3C,MAAM,yBAAyB,CAAA"}

package/dist/components/Select/Select.d.ts

@@ -6,6 +6,7 @@ import { default as React, ReactNode } from 'react';
  * const options: ISelectOption[] = [
  *   { value: 'a', label: 'Option A' },
  *   { value: 'b', label: 'Option B', disabled: true, icon: <Icon /> },
+ *   { value: 'c', label: 'Location C', description: 'Address line' },
  * ]
  */
 export interface ISelectOption {
@@ -13,6 +14,8 @@ export interface ISelectOption {
     value: string;
     /** Visible label rendered inside the dropdown item and in the trigger when selected. */
     label: ReactNode;
+    /** Secondary text rendered below the label, producing a two-line layout. */
+    description?: ReactNode;
     /** Prevents the option from being selected and applies disabled styling. @default false */
     disabled?: boolean;
     /** Icon rendered before the option label inside the dropdown. */
@@ -20,23 +23,25 @@ export interface ISelectOption {
 }
 /**
  * Props for the Select component.
+ *
+ * @see ISelectOption
  */
 export interface ISelectProps {
-    /** Label text displayed above the select trigger. */
+    /** Label text rendered above the trigger by `FormField`. */
     label?: string;
-    /** Helper text displayed below the select. Renders in error color when `error` is true. */
+    /** Helper text rendered below the trigger. Switches to the error color when `error` is `true`. */
     hint?: string;
-    /** Applies error styling to the trigger border and hint text. @default false */
+    /** Applies error styling to the trigger border and `hint` text. @default false */
     error?: boolean;
     /** Marks the field as required and shows an asterisk next to the label. @default false */
     required?: boolean;
-    /** Hides the required asterisk even when `required` is true. @default false */
+    /** Hides the required asterisk even when `required` is `true`. @default false */
     disableRequiredAsterisk?: boolean;
     /** Element rendered after the selected value inside the trigger. */
     suffix?: ReactNode;
     /** Icon or element rendered before the selected value inside the trigger. */
     prefix?: ReactNode;
-    /** Text shown when no option is selected. @default translations.select.placeholder */
+    /** Placeholder text shown when no option is selected. @default translations.select.placeholder */
     placeholder?: string;
     /** Text shown inside the dropdown when `options` is empty. @default translations.select.noOptions */
     emptyMessage?: string;
@@ -51,6 +56,7 @@ export interface ISelectProps {
      *   options={[
      *     { value: 'a', label: 'Option A' },
      *     { value: 'b', label: 'Option B', disabled: true, icon: <Icon /> },
+     *     { value: 'c', label: 'Location C', description: 'Address line' },
      *   ]}
      * />
      */
@@ -59,9 +65,16 @@ export interface ISelectProps {
     disabled?: boolean;
     /** Controlled selected value. Must match a `value` field in `options`. */
     value?: string;
-    /** Fires when the selected value changes. Receives the new value string. */
+    /**
+     * Fires when the user picks an option. Receives the newly selected `value` string.
+     *
+     * @example
+     * ```tsx
+     * <Select onChange={(value) => setSelected(value)} />
+     * ```
+     */
     onChange?: (value: string) => void;
-    /** Scrolls the dropdown to the selected option when opened. @default false */
+    /** Scrolls the dropdown to the selected option when it opens. @default false */
     shouldScrollToSelectedOption?: boolean;
     /** Distance in pixels from the viewport edge before the dropdown repositions. Passed to Radix collision padding. */
     collisionPadding?: number;

package/dist/components/Select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,KAAK,SAAS,EAMf,MAAM,OAAO,CAAA;AAed;;;;;;;;GAQG;AACH,MAAM,WAAW,aAAa;IAC5B,+EAA+E;IAC/E,KAAK,EAAE,MAAM,CAAA;IACb,wFAAwF;IACxF,KAAK,EAAE,SAAS,CAAA;IAChB,2FAA2F;IAC3F,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iEAAiE;IACjE,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,2FAA2F;IAC3F,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,gFAAgF;IAChF,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+EAA+E;IAC/E,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,oEAAoE;IACpE,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,sFAAsF;IACtF,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,qGAAqG;IACrG,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAAA;IAClC;;;;;;;;;;;OAWG;IACH,OAAO,EAAE,aAAa,EAAE,CAAA;IACxB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,8EAA8E;IAC9E,4BAA4B,CAAC,EAAE,OAAO,CAAA;IACtC,oHAAoH;IACpH,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,6HAA6H;IAC7H,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,sGAAsG;IACtG,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,eAAO,MAAM,MAAM,wFAyMlB,CAAA"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,KAAK,SAAS,EAMf,MAAM,OAAO,CAAA;AAgBd;;;;;;;;;GASG;AACH,MAAM,WAAW,aAAa;IAC5B,+EAA+E;IAC/E,KAAK,EAAE,MAAM,CAAA;IACb,wFAAwF;IACxF,KAAK,EAAE,SAAS,CAAA;IAChB,4EAA4E;IAC5E,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,2FAA2F;IAC3F,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iEAAiE;IACjE,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB;AAED;;;;GAIG;AACH,MAAM,WAAW,YAAY;IAC3B,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,kGAAkG;IAClG,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,kFAAkF;IAClF,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iFAAiF;IACjF,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,oEAAoE;IACpE,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,kGAAkG;IAClG,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,qGAAqG;IACrG,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAAA;IAClC;;;;;;;;;;;;OAYG;IACH,OAAO,EAAE,aAAa,EAAE,CAAA;IACxB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,gFAAgF;IAChF,4BAA4B,CAAC,EAAE,OAAO,CAAA;IACtC,oHAAoH;IACpH,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,6HAA6H;IAC7H,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,sGAAsG;IACtG,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,eAAO,MAAM,MAAM,wFA+OlB,CAAA"}

package/dist/components/Select/Select.js

@@ -1,111 +1,140 @@
-import { jsx as t, jsxs as M } from "react/jsx-runtime";
-import u, { forwardRef as _, useId as B, useMemo as G, useRef as S, useEffect as T } from "react";
-import { triggerWrapperVariants as L } from "./utils.js";
-import { useMuzaTranslations as U } from "../../translations/TranslationContext.js";
-import { FormField as H } from "../FormField/FormField.js";
-import { Typography as p } from "../Typography/Typography.js";
-import { DropdownMenu as J, DropdownMenuTrigger as K, DropdownMenuContent as Q, DropdownMenuRadioGroup as X, DropdownMenuRadioItem as Y } from "../DropdownMenu/DropdownMenu.js";
-import { AltArrowUpOutline as Z } from "@solar-icons/react-perf";
-import { cn as ee } from "../../utils/cn.js";
-const te = _(
-  (z, m) => {
-    const f = U(), {
-      label: h,
-      hint: g,
-      error: x,
-      options: l,
-      onChange: i,
-      value: r,
-      disabled: a,
-      prefix: b,
-      size: I,
-      placeholder: O,
-      emptyMessage: D,
-      shouldScrollToSelectedOption: w,
-      collisionPadding: W,
-      required: y,
-      disableRequiredAsterisk: A,
-      labelExtra: C,
-      infoTooltip: V
-    } = z, v = O ?? f.select.placeholder, q = D ?? f.select.noOptions, R = B(), E = h ? `${R}-label` : void 0, F = g ? `${R}-hint` : void 0, P = G(() => {
-      const e = r && l.find((o) => o.value === r);
-      return e ? typeof e.label != "function" ? /* @__PURE__ */ t(
-        p,
+import { jsx as t, jsxs as u } from "react/jsx-runtime";
+import f, { forwardRef as G, useId as L, useMemo as U, useRef as S, useEffect as T } from "react";
+import { triggerWrapperVariants as H } from "./utils.js";
+import { useMuzaTranslations as J } from "../../translations/TranslationContext.js";
+import { FormField as K } from "../FormField/FormField.js";
+import { Typography as o } from "../Typography/Typography.js";
+import { Flex as Q } from "../Flex/Flex.js";
+import { DropdownMenu as X, DropdownMenuTrigger as Y, DropdownMenuContent as Z, DropdownMenuRadioGroup as ee, DropdownMenuRadioItem as te } from "../DropdownMenu/DropdownMenu.js";
+import { cn as D } from "../../utils/cn.js";
+import { AltArrowUpOutline as re } from "@solar-icons/react-perf";
+const ne = G(
+  (I, h) => {
+    const g = J(), {
+      label: x,
+      hint: b,
+      error: w,
+      options: a,
+      onChange: d,
+      value: n,
+      disabled: s,
+      prefix: y,
+      size: O,
+      placeholder: W,
+      emptyMessage: A,
+      shouldScrollToSelectedOption: v,
+      collisionPadding: C,
+      required: N,
+      disableRequiredAsterisk: F,
+      labelExtra: V,
+      infoTooltip: q
+    } = I, R = W ?? g.select.placeholder, E = A ?? g.select.noOptions, M = L(), P = x ? `${M}-label` : void 0, $ = b ? `${M}-hint` : void 0, r = n ? a.find((e) => e.value === n) : void 0, j = U(() => r ? r.description ? /* @__PURE__ */ u(Q, { flex: 1, direction: "column", className: "min-w-0 text-left", children: [
+      /* @__PURE__ */ t(
+        o,
         {
-          size: "input",
-          className: "grow-1 fix-y-text truncate text-left text-comp-select-text-primary",
+          size: "sm",
+          variant: "title",
           weight: "medium",
           component: "span",
-          children: e.label
+          className: "truncate text-comp-select-text-primary",
+          children: r.label
         }
-      ) : e.label : /* @__PURE__ */ t(
-        p,
+      ),
+      /* @__PURE__ */ t(
+        o,
         {
-          size: "input",
-          className: "grow-1 fix-y-text truncate text-left text-comp-select-text-placeholder",
+          size: "sm",
+          variant: "body",
           weight: "regular",
           component: "span",
-          children: v
+          className: "truncate text-comp-select-text-primary",
+          children: r.description
         }
-      );
-    }, [l, r, v]), [s, $] = u.useState(!1), [N, j] = u.useState(0), c = u.useRef(!1), k = S(null), d = S({}), n = (typeof m == "function" ? null : m) ?? k;
+      )
+    ] }) : typeof r.label != "function" ? /* @__PURE__ */ t(
+      o,
+      {
+        size: "input",
+        className: "grow-1 fix-y-text truncate text-left text-comp-select-text-primary",
+        weight: "medium",
+        component: "span",
+        children: r.label
+      }
+    ) : r.label : /* @__PURE__ */ t(
+      o,
+      {
+        size: "input",
+        className: "grow-1 fix-y-text truncate text-left text-comp-select-text-placeholder",
+        weight: "regular",
+        component: "span",
+        children: R
+      }
+    ), [r, R]), [l, k] = f.useState(!1), [z, _] = f.useState(0), p = f.useRef(!1), B = S(null), m = S({}), i = (typeof h == "function" ? null : h) ?? B;
     return T(() => {
       const e = () => {
-        n.current && j(n.current.offsetWidth);
+        i.current && _(i.current.offsetWidth);
       };
       e();
-      const o = new ResizeObserver(e);
-      return n.current && o.observe(n.current), () => {
-        o.disconnect();
+      const c = new ResizeObserver(e);
+      return i.current && c.observe(i.current), () => {
+        c.disconnect();
       };
-    }, [n]), T(() => {
+    }, [i]), T(() => {
       var e;
-      s && r && d.current[r] && w && ((e = d.current[r]) == null || e.scrollIntoView({ block: "nearest" }));
-    }, [s, w, r]), /* @__PURE__ */ t(
-      H,
+      l && n && m.current[n] && v && ((e = m.current[n]) == null || e.scrollIntoView({ block: "nearest" }));
+    }, [l, v, n]), /* @__PURE__ */ t(
+      K,
       {
-        label: h,
-        hint: g,
-        error: x,
-        required: y,
-        disableRequiredAsterisk: A,
-        labelId: E,
-        hintId: F,
-        labelExtra: C,
-        infoTooltip: V,
+        label: x,
+        hint: b,
+        error: w,
+        required: N,
+        disableRequiredAsterisk: F,
+        labelId: P,
+        hintId: $,
+        labelExtra: V,
+        infoTooltip: q,
         className: "flex-1",
-        children: /* @__PURE__ */ M(
-          J,
+        children: /* @__PURE__ */ u(
+          X,
           {
             onOpenChange: (e) => {
-              $(e);
+              k(e);
             },
             children: [
-              /* @__PURE__ */ t(K, { disabled: a, asChild: !0, children: /* @__PURE__ */ t(
+              /* @__PURE__ */ t(Y, { disabled: s, asChild: !0, children: /* @__PURE__ */ t(
                 "button",
                 {
-                  ref: n,
+                  ref: i,
                   type: "button",
                   role: "input",
                   tabIndex: 0,
-                  disabled: a,
-                  "aria-required": y,
-                  className: L({ size: I, error: x, expanded: s }),
-                  children: /* @__PURE__ */ M("div", { className: "flex min-w-0 flex-1 items-center gap-sm", children: [
-                    b && /* @__PURE__ */ t(
+                  disabled: s,
+                  "aria-required": N,
+                  className: D(
+                    H({
+                      size: O,
+                      error: w,
+                      expanded: l,
+                      hasDescription: !!(r != null && r.description)
+                    })
+                  ),
+                  children: /* @__PURE__ */ u("div", { className: "flex min-w-0 flex-1 items-center gap-sm", children: [
+                    y && /* @__PURE__ */ t(
                       "span",
                       {
-                        className: a ? "text-comp-select-icon-disabled" : "text-comp-select-icon-brand-def",
-                        children: b
+                        className: s ? "text-comp-select-icon-disabled" : "text-comp-select-icon-brand-def",
+                        children: y
                       }
                     ),
-                    P,
+                    j,
                     /* @__PURE__ */ t(
-                      Z,
+                      re,
                       {
-                        className: ee(
+                        className: D(
                           "transition-transform duration-200",
-                          s ? "rotate-0" : "rotate-180"
+                          l ? "rotate-0" : "rotate-180",
+                          s ? "text-comp-select-icon-disabled" : "text-comp-select-icon-brand-def"
                         )
                       }
                     )
@@ -113,40 +142,42 @@ const te = _(
                 }
               ) }),
               /* @__PURE__ */ t(
-                Q,
+                Z,
                 {
                   className: "mt-1",
                   style: {
-                    width: N > 0 ? `${N}px` : void 0
+                    width: z > 0 ? `${z}px` : void 0
                   },
+                  align: "center",
                   onCloseAutoFocus: (e) => {
-                    c.current || e.preventDefault(), c.current = !1;
+                    p.current || e.preventDefault(), p.current = !1;
                   },
-                  collisionPadding: W,
-                  children: l.length === 0 ? /* @__PURE__ */ t("div", { className: "px-lg py-md", role: "presentation", children: /* @__PURE__ */ t(
-                    p,
+                  collisionPadding: C,
+                  children: a.length === 0 ? /* @__PURE__ */ t("div", { className: "px-lg py-md", role: "presentation", children: /* @__PURE__ */ t(
+                    o,
                     {
                       component: "span",
                       size: "input",
                       weight: "regular",
                       className: "text-comp-select-text-secondary",
-                      children: q
+                      children: E
                     }
                   ) }) : /* @__PURE__ */ t(
-                    X,
+                    ee,
                     {
-                      value: r,
+                      value: n,
                       onValueChange: (e) => {
-                        c.current = !0, i == null || i(e);
+                        p.current = !0, d == null || d(e);
                       },
-                      children: l.map((e) => /* @__PURE__ */ t(
-                        Y,
+                      children: a.map((e) => /* @__PURE__ */ t(
+                        te,
                         {
                           value: e.value.toString(),
                           disabled: e.disabled,
                           icon: e.icon,
-                          ref: (o) => {
-                            d.current[e.value] = o;
+                          description: e.description,
+                          ref: (c) => {
+                            m.current[e.value] = c;
                           },
                           children: e.label
                         },
@@ -163,7 +194,7 @@ const te = _(
     );
   }
 );
-te.displayName = "Select";
+ne.displayName = "Select";
 export {
-  te as Select
+  ne as Select
 };

package/dist/components/Select/Select.stories.d.ts

@@ -15,5 +15,6 @@ export declare const Interactive: Story;
 export declare const WithPrefix: Story;
 export declare const WithIconsInOptions: Story;
 export declare const WithDisabledOptions: Story;
+export declare const TwoLine: Story;
 export declare const NoOptions: Story;
 //# sourceMappingURL=Select.stories.d.ts.map

package/dist/components/Select/Select.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAS3D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAsH7B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAA;AA6BpC,eAAO,MAAM,OAAO,EAAE,KAwBrB,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KA0B9B,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KA0BvB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAwB/B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KA0BtB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KA0BtB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KA6DtB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KA0C7B,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAgCzB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAyBxB,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAqDhC,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAkCjC,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAqBvB,CAAA"}
+{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAS3D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAoI7B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAA;AA6BpC,eAAO,MAAM,OAAO,EAAE,KAwBrB,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KA0B9B,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KA0BvB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAwB/B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KA0BtB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KA0BtB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KA6DtB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KA0C7B,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAgCzB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAyBxB,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAqDhC,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAkCjC,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAoDrB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAqBvB,CAAA"}

package/dist/components/Select/utils.d.ts

@@ -3,5 +3,6 @@ export declare const triggerWrapperVariants: (props?: ({
     error?: boolean | null | undefined;
     expanded?: boolean | null | undefined;
     hasIcon?: boolean | null | undefined;
+    hasDescription?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 //# sourceMappingURL=utils.d.ts.map

package/dist/components/Select/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Select/utils.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,sBAAsB;;;;;8EA+BlC,CAAA"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Select/utils.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,sBAAsB;;;;;;8EAkClC,CAAA"}

package/dist/components/Select/utils.js

@@ -1,5 +1,5 @@
 import { cva as e } from "class-variance-authority";
-const o = e(
+const r = e(
   [
     "flex w-full cursor-pointer items-center gap-sm rounded-full border border-comp-select-stroke-def",
     "overflow-hidden bg-comp-select-fill-def whitespace-nowrap focus-visible-default transition-colors",
@@ -23,6 +23,9 @@ const o = e(
       },
       hasIcon: {
         false: "pl-comp-select-p-large"
+      },
+      hasDescription: {
+        true: "py-sm"
       }
     },
     defaultVariants: {
@@ -32,5 +35,5 @@ const o = e(
   }
 );
 export {
-  o as triggerWrapperVariants
+  r as triggerWrapperVariants
 };

package/dist/components/Toggle/Toggle.js

@@ -19,7 +19,7 @@ const b = u(
     // Active/pressed state (on)
     "data-[state=on]:bg-comp-button-primary-bg-def data-[state=on]:text-comp-button-primary-text-def",
     // Disabled state
-    "disabled:pointer-events-none disabled:bg-surface-brand-primary-disabled disabled:text-text-dark-disabled"
+    "disabled:pointer-events-none disabled:bg-surface-brand-primary-disabled2 disabled:text-text-dark-disabled"
   ],
   {
     variants: {