@vkzstudio/muza-ui 1.5.2 → 1.6.0

package/dist/components/Select/Select.js

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

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;AAU3D,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,SAAS,EAAE,KA2BvB,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"}
+{"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;AAU3D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAsI7B,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,SAAS,EAAE,KA2BvB,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/SelectTrigger.d.ts

@@ -0,0 +1,54 @@
+import * as React from 'react';
+/**
+ * Props for the SelectTrigger component.
+ *
+ * Extends the native `<button>` attributes — every unrecognised prop is spread onto
+ * the root element, so overlay primitives such as `DropdownMenuTrigger asChild` can
+ * inject their handlers, `aria-*` attributes and `data-state`.
+ */
+export interface ISelectTriggerProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'prefix'> {
+    /**
+     * Label content. A `string` or `number` is rendered in the standard truncated
+     * trigger label style; pass your own node to control the layout (as `Select`
+     * does for its two-line options).
+     */
+    children?: React.ReactNode;
+    /** Controls height and horizontal padding. Matches the `Select` size scale. @default 'base' */
+    size?: 'xs' | 'sm' | 'base' | 'lg';
+    /** Applies the error border color. @default false */
+    error?: boolean;
+    /** Icon or element rendered before the label. */
+    prefix?: React.ReactNode;
+    /** Adds vertical padding for two-line label content. @default false */
+    hasDescription?: boolean;
+}
+/**
+ * The presentational trigger used by {@link Select} — a pill-shaped button with an
+ * optional prefix, a truncated label and a chevron that flips when the surrounding
+ * overlay opens.
+ *
+ * It is fully stateless: the expanded styling is derived from the `data-state="open"`
+ * attribute that Radix sets on a trigger, so the same component works inside
+ * `Select`, `DropdownMenu`, `Popover` or any other overlay without an extra prop.
+ * Use it directly when a menu needs to *look* like a select but is not a combobox —
+ * an account menu, a filter menu, a navigation dropdown.
+ *
+ * @example Standalone
+ * ```tsx
+ * <SelectTrigger size="sm">Jan Novák</SelectTrigger>
+ * ```
+ *
+ * @example As a DropdownMenu trigger
+ * ```tsx
+ * <DropdownMenu>
+ *   <DropdownMenuTrigger asChild>
+ *     <SelectTrigger size="sm" className="max-w-comp-market-nav-select-max-w">
+ *       {userName}
+ *     </SelectTrigger>
+ *   </DropdownMenuTrigger>
+ *   <DropdownMenuContent align="end">…</DropdownMenuContent>
+ * </DropdownMenu>
+ * ```
+ */
+export declare const SelectTrigger: React.ForwardRefExoticComponent<ISelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=SelectTrigger.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectTrigger.d.ts","sourceRoot":"","sources":["../../../src/components/Select/SelectTrigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B;;;;;;GAMG;AACH,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,QAAQ,CAAC;IACrE;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,+FAA+F;IAC/F,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAAA;IAClC,qDAAqD;IACrD,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,iDAAiD;IACjD,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,uEAAuE;IACvE,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,aAAa,+FAuDzB,CAAA"}

package/dist/components/Select/SelectTrigger.js

@@ -0,0 +1,57 @@
+import { jsx as t, jsxs as l } from "react/jsx-runtime";
+import * as g from "react";
+import { cn as o } from "../../utils/cn.js";
+import { AltArrowUpOutline as d } from "@solar-icons/react-perf";
+import { Typography as f } from "../Typography/Typography.js";
+import { triggerWrapperVariants as x } from "./utils.js";
+const u = g.forwardRef(
+  ({
+    children: e,
+    className: s,
+    size: a,
+    error: i,
+    prefix: r,
+    hasDescription: m,
+    type: c = "button",
+    ...p
+  }, n) => /* @__PURE__ */ t(
+    "button",
+    {
+      ref: n,
+      type: c,
+      className: o(
+        x({ size: a, error: i, hasDescription: m }),
+        "group/select-trigger",
+        s
+      ),
+      ...p,
+      children: /* @__PURE__ */ l("div", { className: "flex min-w-0 flex-1 items-center gap-sm", children: [
+        r && /* @__PURE__ */ t("span", { className: "text-comp-select-icon-brand-def group-disabled/select-trigger:text-comp-select-icon-disabled", children: r }),
+        typeof e == "string" || typeof e == "number" ? /* @__PURE__ */ t(
+          f,
+          {
+            size: "input",
+            className: "grow-1 fix-y-text truncate text-left text-comp-select-text-primary",
+            weight: "medium",
+            component: "span",
+            children: e
+          }
+        ) : e,
+        /* @__PURE__ */ t(
+          d,
+          {
+            className: o(
+              "shrink-0 rotate-180 transition-transform duration-200",
+              "group-data-[state=open]/select-trigger:rotate-0",
+              "text-comp-select-icon-brand-def group-disabled/select-trigger:text-comp-select-icon-disabled"
+            )
+          }
+        )
+      ] })
+    }
+  )
+);
+u.displayName = "SelectTrigger";
+export {
+  u as SelectTrigger
+};

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

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { SelectTrigger } from './SelectTrigger';
+declare const meta: Meta<typeof SelectTrigger>;
+export default meta;
+type Story = StoryObj<typeof SelectTrigger>;
+export declare const Default: Story;
+export declare const AsDropdownMenuTrigger: Story;
+export declare const OpenState: Story;
+export declare const AllSizes: Story;
+export declare const AllStates: Story;
+//# sourceMappingURL=SelectTrigger.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectTrigger.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Select/SelectTrigger.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAiB3D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,aAAa,CA8DpC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,aAAa,CAAC,CAAA;AAE3C,eAAO,MAAM,OAAO,EAAE,KAkBrB,CAAA;AAED,eAAO,MAAM,qBAAqB,EAAE,KA8BnC,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KA6BvB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAkBtB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAwBvB,CAAA"}

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

@@ -1,2 +1,4 @@
 export { Select, type ISelectOption, type ISelectProps } from './Select';
+export { SelectTrigger, type ISelectTriggerProps } from './SelectTrigger';
+export { triggerWrapperVariants } from './utils';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,aAAa,EAAE,KAAK,YAAY,EAAE,MAAM,UAAU,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,aAAa,EAAE,KAAK,YAAY,EAAE,MAAM,UAAU,CAAA;AACxE,OAAO,EAAE,aAAa,EAAE,KAAK,mBAAmB,EAAE,MAAM,iBAAiB,CAAA;AACzE,OAAO,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA"}

package/dist/components/Select/index.js

@@ -1,4 +1,8 @@
-import { Select as r } from "./Select.js";
+import { Select as t } from "./Select.js";
+import { SelectTrigger as p } from "./SelectTrigger.js";
+import { triggerWrapperVariants as a } from "./utils.js";
 export {
-  r as Select
+  t as Select,
+  p as SelectTrigger,
+  a as triggerWrapperVariants
 };

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

@@ -1,7 +1,16 @@
+/**
+ * Styling for the `Select` trigger button.
+ *
+ * Exported as an escape hatch for cases that cannot use the `SelectTrigger`
+ * component itself. Prefer `SelectTrigger` — it also owns the label truncation
+ * and the chevron.
+ *
+ * The expanded border is driven by `data-state="open"`, which Radix sets on any
+ * trigger (Select, DropdownMenu, Popover…), so no `expanded` flag is needed.
+ */
 export declare const triggerWrapperVariants: (props?: ({
     size?: "xs" | "sm" | "lg" | "base" | null | undefined;
     error?: boolean | null | undefined;
-    expanded?: boolean | null | undefined;
     hasIcon?: boolean | null | undefined;
     hasDescription?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

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;;;;;;8EAkClC,CAAA"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Select/utils.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AACH,eAAO,MAAM,sBAAsB;;;;;8EAgClC,CAAA"}

package/dist/components/Select/utils.js

@@ -1,10 +1,11 @@
 import { cva as e } from "class-variance-authority";
-const r = e(
+const o = 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",
     "hover:border-comp-select-stroke-hover",
     "focus-visible:border-comp-select-stroke-focused",
+    "data-[state=open]:border-comp-select-stroke-focused",
     "disabled:cursor-not-allowed disabled:border-comp-select-stroke-disabled disabled:bg-comp-select-fill-disabled"
   ],
   {
@@ -18,9 +19,6 @@ const r = e(
       error: {
         true: "border-comp-select-stroke-error-def"
       },
-      expanded: {
-        true: "border-comp-select-stroke-focused"
-      },
       hasIcon: {
         false: "pl-comp-select-p-large"
       },
@@ -35,5 +33,5 @@ const r = e(
   }
 );
 export {
-  r as triggerWrapperVariants
+  o as triggerWrapperVariants
 };

package/dist/components/UniversalFooter/UniversalFooter.js

@@ -166,7 +166,7 @@ const j = ({
     "data-slot": "universal-footer-sections",
     className: l(
       "flex w-full flex-col gap-4xl",
-      "md:grid md:grid-cols-2 md:grid-rows-[auto_1fr] md:items-start md:gap-x-4xl md:gap-y-2xl md:[&>:first-child]:row-span-2",
+      "md:grid md:grid-cols-2 md:grid-rows-[auto_1fr] md:items-start md:gap-x-4xl md:gap-y-4xl md:[&>:first-child]:row-span-2",
       "lg:flex lg:flex-row lg:items-start lg:justify-between lg:gap-x-2xl lg:gap-y-0",
       t
     ),

package/dist/components/WebCheckoutNav/WebCheckoutNav.examples.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WebCheckoutNav.examples.d.ts","sourceRoot":"","sources":["../../../src/components/WebCheckoutNav/WebCheckoutNav.examples.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAA;AA8BhD,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;CACpB;AAED,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,SAAS,CAAA;CAChB;AAED,MAAM,WAAW,mBAAmB;IAClC,cAAc,EAAE,aAAa,EAAE,CAAA;IAC/B,SAAS,EAAE,QAAQ,EAAE,CAAA;CACtB;AAID,eAAO,MAAM,cAAc,EAAE,aAAa,EAgBzC,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,QAAQ,EAI/B,CAAA;AAID,eAAO,MAAM,cAAc,GAAI,gCAG5B,mBAAmB,4CA6MrB,CAAA"}
+{"version":3,"file":"WebCheckoutNav.examples.d.ts","sourceRoot":"","sources":["../../../src/components/WebCheckoutNav/WebCheckoutNav.examples.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAA;AA8BhD,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;CACpB;AAED,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,SAAS,CAAA;CAChB;AAED,MAAM,WAAW,mBAAmB;IAClC,cAAc,EAAE,aAAa,EAAE,CAAA;IAC/B,SAAS,EAAE,QAAQ,EAAE,CAAA;CACtB;AAID,eAAO,MAAM,cAAc,EAAE,aAAa,EAgBzC,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,QAAQ,EAI/B,CAAA;AAID,eAAO,MAAM,cAAc,GAAI,gCAG5B,mBAAmB,4CAwMrB,CAAA"}