welcome-ui 9.0.10 → 10.0.0-alpha.10

package/dist/Slider.css

@@ -1 +1 @@
-@layer components{._slider-root_4d202_2{display:flex;flex-direction:column;position:relative;width:100%}._range-root_4d202_8{width:100%;display:flex;flex-direction:column;position:relative}._input-wrapper_4d202_14{align-items:center;display:flex;gap:var(--spacing-sm);--inputTextWrapperWidth: 72px}._hint_4d202_20{margin-top:0}._slider-wrapper_4d202_23{display:flex;flex-direction:column;flex-grow:1;height:1.25rem;position:relative}._range-wrapper_4d202_30{position:relative;flex-grow:1}._tick-markers_4d202_34{height:24px;margin-left:10px;margin-right:10px;margin-top:5px;position:relative}._input-range-wrapper_4d202_41{height:1.25rem;padding-bottom:var(--spacing-sm);position:relative;padding-top:var(--spacing-sm);width:100%;--inputTextWrapperWidth: 72px}._input-range_4d202_41{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:var(--spacing-xs);margin:auto 0}._input-range_4d202_41::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--color-neutral-90);border:var(--border-width-md) solid var(--color-neutral-10);border-radius:50%;cursor:pointer;height:1.25rem;width:1.25rem;transform:scale(1);border:var(--border-width-md) solid var(--borderColor, var(--color-neutral-10));transition:background-color var(--duration-medium),border-color var(--duration-medium),transform .1s ease-in-out}._input-range_4d202_41::-moz-range-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--color-neutral-90);border:var(--border-width-md) solid var(--color-neutral-10);border-radius:50%;cursor:pointer;height:1.25rem;width:1.25rem;transform:scale(1);border:var(--border-width-md) solid var(--borderColor, var(--color-neutral-10));transition:background-color var(--duration-medium),border-color var(--duration-medium),transform .1s ease-in-out}._input-range_4d202_41:active,._input-range_4d202_41:focus-visible{outline:none}._input-range_4d202_41:active::-webkit-slider-thumb,._input-range_4d202_41:focus-visible::-webkit-slider-thumb{transform:scale(1.2);outline:var(--border-width-md) solid var(--color-yellow-40)}._input-range_4d202_41:active::-moz-range-thumb,._input-range_4d202_41:focus-visible::-moz-range-thumb{transform:scale(1.2);outline:var(--border-width-md) solid var(--color-yellow-40)}._input-range_4d202_41:disabled{background-image:linear-gradient(var(--color-beige-60),var(--color-beige-60));cursor:not-allowed}._input-range_4d202_41:disabled::-webkit-slider-thumb{background-color:var(--color-beige-60);cursor:not-allowed}._input-range_4d202_41:disabled::-moz-range-thumb{background-color:var(--color-beige-60);cursor:not-allowed}._input-range_4d202_41:disabled:active::-webkit-slider-thumb{transform:none;outline:none}._input-range_4d202_41:disabled:active::-moz-range-thumb{transform:none;outline:none}._border-selector-secondary-blue_4d202_110{--borderColor: var(--color-secondary-blue)}._border-selector-secondary-green_4d202_113{--borderColor: var(--color-secondary-green)}._border-selector-secondary-orange_4d202_116{--borderColor: var(--color-secondary-orange)}._border-selector-secondary-pink_4d202_119{--borderColor: var(--color-secondary-pink)}._border-selector-secondary-teal_4d202_122{--borderColor: var(--color-secondary-teal)}._border-selector-secondary-violet_4d202_125{--borderColor: var(--color-secondary-violet)}._slider-input-range_4d202_128{background-color:var(--color-beige-40);background-image:linear-gradient(var(--color-yellow-40),var(--color-yellow-40));cursor:pointer;background-repeat:no-repeat;border-radius:0}._range-input-range_4d202_135{pointer-events:none;position:absolute;outline:none;z-index:1}._range-input-range_4d202_135::-webkit-slider-thumb{pointer-events:all;position:relative}._range-input-range_4d202_135::-moz-range-thumb{pointer-events:all;position:relative}._output_4d202_149{opacity:0;visibility:hidden;transition:opacity .15s ease-in-out,visibility .15s ease-in-out,transform .15s ease-in-out;position:absolute;text-align:center;transform:translate(-50%,calc(-100% + -var(--spacing-xs)))}._output-visible_4d202_157{opacity:100;visibility:visible;transform:translate(-50%,calc(-100% + -var(--spacing-sm)))}._tooltip_4d202_162{background-color:var(--color-neutral-90);border:var(--border-width-sm) solid var(--color-neutral-70);color:var(--color-neutral-10);flex:1 1 auto;margin:auto;min-width:var(--spacing-xxs);padding:var(--spacing-xs) var(--spacing-sm)}._thick_4d202_171{position:absolute;flex-direction:column}._thick_4d202_171:before{content:"";position:absolute;background-color:var(--color-neutral-30);height:6px;width:1px}._thick-label_4d202_182{position:absolute;top:0;transform:translate(-50%,50%);white-space:nowrap}._range-track_4d202_188{position:absolute;width:100%;height:var(--spacing-xs);background-color:var(--color-beige-40)}._range_4d202_8{position:absolute;width:100%;height:var(--spacing-xs);background-color:var(--color-yellow-40)}._range-disabled_4d202_200{background-image:linear-gradient(var(--color-beige-60),var(--color-beige-60));cursor:not-allowed}}
+@layer components{._slider-root_6xzwz_2{display:flex;flex-direction:column;position:relative;width:100%}._range-root_6xzwz_8{width:100%;display:flex;flex-direction:column;position:relative}._input-wrapper_6xzwz_14{align-items:center;display:flex;gap:var(--border-radius-md);--inputTextWrapperWidth: 72px}._hint_6xzwz_20{margin-top:0}._slider-wrapper_6xzwz_23{display:flex;flex-direction:column;flex-grow:1;height:1.25rem;position:relative}._range-wrapper_6xzwz_30{position:relative;flex-grow:1}._tick-markers_6xzwz_34{height:24px;margin-left:10px;margin-right:10px;margin-top:5px;position:relative}._input-range-wrapper_6xzwz_41{height:1.25rem;padding-bottom:var(--border-radius-md);position:relative;padding-top:var(--border-radius-md);width:100%;--inputTextWrapperWidth: 72px}._input-range_6xzwz_41{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:var(--border-radius-sm);margin:auto 0}._input-range_6xzwz_41::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--color-background-neutral-primary-fixed);border:var(--border-width-sm) solid var(--color-background-neutral-inverse-fixed);border-radius:50%;cursor:pointer;height:1.25rem;width:1.25rem;transform:scale(1);border:var(--border-width-sm) solid var(--borderColor, var(--color-background-neutral-inverse-fixed));transition:background-color var(--duration-medium),border-color var(--duration-medium),transform .1s ease-in-out}._input-range_6xzwz_41::-moz-range-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--color-background-neutral-primary-fixed);border:var(--border-width-sm) solid var(--color-background-neutral-inverse-fixed);border-radius:50%;cursor:pointer;height:1.25rem;width:1.25rem;transform:scale(1);border:var(--border-width-sm) solid var(--borderColor, var(--color-background-neutral-inverse-fixed));transition:background-color var(--duration-medium),border-color var(--duration-medium),transform .1s ease-in-out}._input-range_6xzwz_41:active,._input-range_6xzwz_41:focus-visible{outline:none}._input-range_6xzwz_41:active::-webkit-slider-thumb,._input-range_6xzwz_41:focus-visible::-webkit-slider-thumb{transform:scale(1.2);outline:var(--border-width-sm) solid var(--color-background-brand-primary)}._input-range_6xzwz_41:active::-moz-range-thumb,._input-range_6xzwz_41:focus-visible::-moz-range-thumb{transform:scale(1.2);outline:var(--border-width-sm) solid var(--color-background-brand-primary)}._input-range_6xzwz_41:disabled{background-image:linear-gradient(var(--color-border-warm-primary),var(--color-border-warm-primary));cursor:not-allowed}._input-range_6xzwz_41:disabled::-webkit-slider-thumb{background-color:var(--color-border-warm-primary);cursor:not-allowed}._input-range_6xzwz_41:disabled::-moz-range-thumb{background-color:var(--color-border-warm-primary);cursor:not-allowed}._input-range_6xzwz_41:disabled:active::-webkit-slider-thumb{transform:none;outline:none}._input-range_6xzwz_41:disabled:active::-moz-range-thumb{transform:none;outline:none}._border-selector-secondary-blue_6xzwz_110{--borderColor: var(--color-background-accent-blue-primary)}._border-selector-secondary-green_6xzwz_113{--borderColor: var(--color-background-accent-green-primary)}._border-selector-secondary-orange_6xzwz_116{--borderColor: var(--color-background-accent-orange-primary)}._border-selector-secondary-pink_6xzwz_119{--borderColor: var(--color-background-accent-pink-primary)}._border-selector-secondary-teal_6xzwz_122{--borderColor: var(--color-background-accent-teal-primary)}._border-selector-secondary-violet_6xzwz_125{--borderColor: var(--color-background-accent-violet-primary)}._slider-input-range_6xzwz_128{background-color:var(--color-background-warm-stronger);background-image:linear-gradient(var(--color-background-brand-primary),var(--color-background-brand-primary));cursor:pointer;background-repeat:no-repeat;border-radius:0}._range-input-range_6xzwz_135{pointer-events:none;position:absolute;outline:none;z-index:1}._range-input-range_6xzwz_135::-webkit-slider-thumb{pointer-events:all;position:relative}._range-input-range_6xzwz_135::-moz-range-thumb{pointer-events:all;position:relative}._output_6xzwz_149{opacity:0;visibility:hidden;transition:opacity .15s ease-in-out,visibility .15s ease-in-out,transform .15s ease-in-out;position:absolute;text-align:center;transform:translate(-50%,calc(-100% + -var(--border-radius-sm)))}._output-visible_6xzwz_157{opacity:100;visibility:visible;transform:translate(-50%,calc(-100% + -var(--border-radius-md)))}._tooltip_6xzwz_162{background-color:var(--color-background-neutral-primary-fixed);border:var(--border-width-xs) solid var(--color-background-neutral-tertiary);color:var(--color-background-neutral-inverse-fixed);flex:1 1 auto;margin:auto;min-width:var(--border-radius-xs);padding:var(--border-radius-sm) var(--border-radius-md)}._thick_6xzwz_171{position:absolute;flex-direction:column}._thick_6xzwz_171:before{content:"";position:absolute;background-color:var(--color-background-neutral-subtlest);height:6px;width:1px}._thick-label_6xzwz_182{position:absolute;top:0;transform:translate(-50%,50%);white-space:nowrap}._range-track_6xzwz_188{position:absolute;width:100%;height:var(--border-radius-sm);background-color:var(--color-background-warm-stronger)}._range_6xzwz_8{position:absolute;width:100%;height:var(--border-radius-sm);background-color:var(--color-background-brand-primary)}._range-disabled_6xzwz_200{background-image:linear-gradient(var(--color-border-warm-primary),var(--color-border-warm-primary));cursor:not-allowed}}

package/dist/Slider.js

@@ -1,95 +1,96 @@
 "use client";
-import { jsxs as R, jsx as l, Fragment as ie } from "react/jsx-runtime";
-import { forwardRef as Y, useState as D, useRef as A, useCallback as Z, useEffect as U, useId as ee } from "react";
+import './Slider.css';
+import { jsxs as D, jsx as l, Fragment as se } from "react/jsx-runtime";
+import { forwardRef as Y, useState as $, useRef as C, useCallback as Z, useEffect as U, useId as ee } from "react";
 import { Hint as H } from "./Hint.js";
 import { InputText as O } from "./InputText.js";
 import { Text as re } from "./Text.js";
 import { c as ne } from "./index-PAaZGbyz.js";
-const oe = "_hint_4d202_20", se = "_output_4d202_149", ce = "_tooltip_4d202_162", ue = "_thick_4d202_171", de = "_range_4d202_8", te = {
-  "slider-root": "_slider-root_4d202_2",
-  "range-root": "_range-root_4d202_8",
-  "input-wrapper": "_input-wrapper_4d202_14",
-  hint: oe,
-  "slider-wrapper": "_slider-wrapper_4d202_23",
-  "range-wrapper": "_range-wrapper_4d202_30",
-  "tick-markers": "_tick-markers_4d202_34",
-  "input-range-wrapper": "_input-range-wrapper_4d202_41",
-  "input-range": "_input-range_4d202_41",
-  "border-selector-secondary-blue": "_border-selector-secondary-blue_4d202_110",
-  "border-selector-secondary-green": "_border-selector-secondary-green_4d202_113",
-  "border-selector-secondary-orange": "_border-selector-secondary-orange_4d202_116",
-  "border-selector-secondary-pink": "_border-selector-secondary-pink_4d202_119",
-  "border-selector-secondary-teal": "_border-selector-secondary-teal_4d202_122",
-  "border-selector-secondary-violet": "_border-selector-secondary-violet_4d202_125",
-  "slider-input-range": "_slider-input-range_4d202_128",
-  "range-input-range": "_range-input-range_4d202_135",
-  output: se,
-  "output-visible": "_output-visible_4d202_157",
-  tooltip: ce,
-  thick: ue,
-  "thick-label": "_thick-label_4d202_182",
-  "range-track": "_range-track_4d202_188",
-  range: de,
-  "range-disabled": "_range-disabled_4d202_200"
+const ce = "_hint_6xzwz_20", ue = "_output_6xzwz_149", de = "_tooltip_6xzwz_162", fe = "_thick_6xzwz_171", pe = "_range_6xzwz_8", te = {
+  "slider-root": "_slider-root_6xzwz_2",
+  "range-root": "_range-root_6xzwz_8",
+  "input-wrapper": "_input-wrapper_6xzwz_14",
+  hint: ce,
+  "slider-wrapper": "_slider-wrapper_6xzwz_23",
+  "range-wrapper": "_range-wrapper_6xzwz_30",
+  "tick-markers": "_tick-markers_6xzwz_34",
+  "input-range-wrapper": "_input-range-wrapper_6xzwz_41",
+  "input-range": "_input-range_6xzwz_41",
+  "border-selector-secondary-blue": "_border-selector-secondary-blue_6xzwz_110",
+  "border-selector-secondary-green": "_border-selector-secondary-green_6xzwz_113",
+  "border-selector-secondary-orange": "_border-selector-secondary-orange_6xzwz_116",
+  "border-selector-secondary-pink": "_border-selector-secondary-pink_6xzwz_119",
+  "border-selector-secondary-teal": "_border-selector-secondary-teal_6xzwz_122",
+  "border-selector-secondary-violet": "_border-selector-secondary-violet_6xzwz_125",
+  "slider-input-range": "_slider-input-range_6xzwz_128",
+  "range-input-range": "_range-input-range_6xzwz_135",
+  output: ue,
+  "output-visible": "_output-visible_6xzwz_157",
+  tooltip: de,
+  thick: fe,
+  "thick-label": "_thick-label_6xzwz_182",
+  "range-track": "_range-track_6xzwz_188",
+  range: pe,
+  "range-disabled": "_range-disabled_6xzwz_200"
 }, X = 20, g = ne(te), P = ({
   min: d,
   step: _,
   toCompare: p,
-  value: k
+  value: y
 }) => {
-  let h = Math.min(k, p - 1 * _);
+  let h = Math.min(y, p - 1 * _);
   return h = Math.max(h, d), q(h, _);
 }, T = ({
   max: d,
   step: _,
   toCompare: p,
-  value: k
+  value: y
 }) => {
-  let h = Math.max(k, p + 1 * _);
+  let h = Math.max(y, p + 1 * _);
   return h = Math.min(h, d), q(h, _);
-}, fe = Y(
+}, ae = Y(
   ({
     borderSelectorColor: d,
     className: _,
     disabled: p,
-    hint: k,
+    hint: y,
     label: h,
     max: a,
     min: t,
-    onChange: v,
+    onChange: w,
     step: i = 1,
-    tooltip: M,
+    tooltip: b,
     type: m,
     value: f,
     values: B,
     ...W
   }, G) => {
-    const [o, V] = D(t), [s, x] = D(a), [K, N] = D(t), [y, b] = D(a), z = A(null), E = A(null), $ = A(null), C = A(null), L = A(null), [S, j] = D(!1), [n, c] = D(!1), ae = (e) => {
+    const [o, k] = $(t), [s, I] = $(a), [R, z] = $(t), [v, x] = $(a), A = C(null), E = C(null), M = C(null), S = C(null), L = C(null), [K, j] = $(!1), [n, c] = $(!1), ie = (e) => {
       const r = P({
         min: t,
         step: i,
         toCompare: s,
         value: parseInt(e.target.value, 10)
       });
-      N(r), V(r), e.target.value = r.toString();
-    }, le = (e) => {
+      z(r), k(r), e.target.value = r.toString();
+    }, oe = (e) => {
       const r = T({
         max: a,
         step: i,
         toCompare: o,
         value: parseInt(e.target.value, 10)
       });
-      b(r), x(r), e.target.value = r.toString();
+      x(r), I(r), e.target.value = r.toString();
     }, Q = (e, r) => {
       if (e.preventDefault(), r === "min") {
         let u = o;
-        e.key === "ArrowRight" && (u = P({ min: t, step: i, toCompare: s, value: u + i })), e.key === "ArrowLeft" && (u = P({ min: t, step: i, toCompare: s, value: u - i })), N(u), V(u), v({ max: s, min: u });
+        e.key === "ArrowRight" && (u = P({ min: t, step: i, toCompare: s, value: u + i })), e.key === "ArrowLeft" && (u = P({ min: t, step: i, toCompare: s, value: u - i })), z(u), k(u), w({ max: s, min: u });
       }
       if (r === "max") {
         let u = s;
-        e.key === "ArrowRight" && (u = T({ max: a, step: i, toCompare: o, value: u + i })), e.key === "ArrowLeft" && (u = T({ max: a, step: i, toCompare: o, value: u - i })), b(u), x(u), v({ max: u, min: o });
+        e.key === "ArrowRight" && (u = T({ max: a, step: i, toCompare: o, value: u + i })), e.key === "ArrowLeft" && (u = T({ max: a, step: i, toCompare: o, value: u - i })), x(u), I(u), w({ max: u, min: o });
       }
-    }, I = Z(
+    }, V = Z(
       (e) => {
         const r = Math.round((e - t) / (a - t) * 100);
         return r < 0 ? 0 : r > 100 ? 100 : r;
@@ -98,37 +99,37 @@ const oe = "_hint_4d202_20", se = "_output_4d202_149", ce = "_tooltip_4d202_162"
     );
     U(() => {
       if (E.current) {
-        const e = I(o), r = I(parseInt(E.current.value, 10));
-        $.current && ($.current.style.left = `${e}%`, $.current.style.width = `${r - e}%`);
+        const e = V(o), r = V(parseInt(E.current.value, 10));
+        M.current && (M.current.style.left = `${e}%`, M.current.style.width = `${r - e}%`);
       }
-    }, [o, I]), U(() => {
-      if (z.current) {
-        const e = I(parseInt(z.current.value, 10)), r = I(s);
-        if ($.current && ($.current.style.width = `${r - e}%`), C.current) {
-          const u = I(o) / 100;
-          C.current.style.left = `calc(${u * 100}% + ${(0.5 - u) * X}px)`;
+    }, [o, V]), U(() => {
+      if (A.current) {
+        const e = V(parseInt(A.current.value, 10)), r = V(s);
+        if (M.current && (M.current.style.width = `${r - e}%`), S.current) {
+          const u = V(o) / 100;
+          S.current.style.left = `calc(${u * 100}% + ${(0.5 - u) * X}px)`;
         }
         if (L.current) {
-          const u = I(s) / 100;
+          const u = V(s) / 100;
           L.current.style.left = `calc(${u * 100}% + ${(0.5 - u) * X}px)`;
         }
       }
-    }, [o, s, I]), U(() => {
+    }, [o, s, V]), U(() => {
       if (f) {
         if (!isNaN(f.min) && f.min !== o) {
           const e = P({ min: t, step: i, toCompare: s, value: f.min || t });
-          V(e), N(e);
+          k(e), z(e);
         }
         if (!isNaN(f.max) && f.max !== s) {
           const e = T({ max: a, step: i, toCompare: o, value: f.max || a });
-          x(e), b(e);
+          I(e), x(e);
         }
       }
     }, [f]);
     const J = ee();
-    return /* @__PURE__ */ R("div", { className: g("range-root", _), ref: G, children: [
-      h ? /* @__PURE__ */ l(re, { as: "label", htmlFor: `${J}-min`, variant: "sm", children: h }) : null,
-      /* @__PURE__ */ R("div", { className: g("input-wrapper"), children: [
+    return /* @__PURE__ */ D("div", { className: g("range-root", _), ref: G, children: [
+      h ? /* @__PURE__ */ l(re, { as: "label", htmlFor: `${J}-min`, variant: "body-md", children: h }) : null,
+      /* @__PURE__ */ D("div", { className: g("input-wrapper"), children: [
         (m === "inline" || m === "fields") && (m === "fields" ? /* @__PURE__ */ l(
           O,
           {
@@ -140,13 +141,13 @@ const oe = "_hint_4d202_20", se = "_output_4d202_149", ce = "_tooltip_4d202_162"
                 min: t,
                 step: i,
                 toCompare: s,
-                value: K
+                value: R
               });
-              N(e), V(e), v({ max: s, min: e });
+              z(e), k(e), w({ max: s, min: e });
             },
             onChange: (e) => {
               let r = parseInt(e.target.value, 10);
-              isNaN(r) && (r = 0), N(r);
+              isNaN(r) && (r = 0), z(r);
             },
             onKeyDown: (e) => {
               if (e.key === "Enter") {
@@ -154,23 +155,23 @@ const oe = "_hint_4d202_20", se = "_output_4d202_149", ce = "_tooltip_4d202_162"
                   min: t,
                   step: i,
                   toCompare: s,
-                  value: K
+                  value: R
                 });
-                N(r), V(r), v({ max: s, min: r });
+                z(r), k(r), w({ max: s, min: r });
               }
             },
-            size: "sm",
+            size: "md",
             type: "number",
-            value: K.toString()
+            value: R.toString()
           }
         ) : /* @__PURE__ */ l("div", { children: t })),
-        /* @__PURE__ */ R("div", { className: g("range-wrapper"), children: [
-          M ? /* @__PURE__ */ R(ie, { children: [
+        /* @__PURE__ */ D("div", { className: g("range-wrapper"), children: [
+          b ? /* @__PURE__ */ D(se, { children: [
             /* @__PURE__ */ l(
               "output",
               {
-                className: g("output", S && "output-visible"),
-                ref: C,
+                className: g("output", K && "output-visible"),
+                ref: S,
                 children: /* @__PURE__ */ l("div", { children: o })
               }
             ),
@@ -183,7 +184,7 @@ const oe = "_hint_4d202_20", se = "_output_4d202_149", ce = "_tooltip_4d202_162"
               }
             )
           ] }) : null,
-          /* @__PURE__ */ R("div", { className: g("input-range-wrapper"), children: [
+          /* @__PURE__ */ D("div", { className: g("input-range-wrapper"), children: [
             /* @__PURE__ */ l(
               "input",
               {
@@ -197,15 +198,15 @@ const oe = "_hint_4d202_20", se = "_output_4d202_149", ce = "_tooltip_4d202_162"
                 id: `${J}-min`,
                 max: a,
                 min: t,
-                onChange: ae,
+                onChange: ie,
                 onKeyDown: (e) => Q(e, "min"),
                 onMouseDown: () => {
-                  M && S === !1 && j(!0);
+                  b && K === !1 && j(!0);
                 },
                 onMouseUp: () => {
-                  v({ max: s, min: o }), M && j(!1);
+                  w({ max: s, min: o }), b && j(!1);
                 },
-                ref: z,
+                ref: A,
                 step: i,
                 type: "range",
                 value: o
@@ -224,13 +225,13 @@ const oe = "_hint_4d202_20", se = "_output_4d202_149", ce = "_tooltip_4d202_162"
                 id: `${J}-max`,
                 max: a,
                 min: t,
-                onChange: le,
+                onChange: oe,
                 onKeyDown: (e) => Q(e, "max"),
                 onMouseDown: () => {
-                  M && n === !1 && c(!0);
+                  b && n === !1 && c(!0);
                 },
                 onMouseUp: () => {
-                  v({ max: s, min: o }), M && c(!1);
+                  w({ max: s, min: o }), b && c(!1);
                 },
                 ref: E,
                 step: i,
@@ -239,13 +240,13 @@ const oe = "_hint_4d202_20", se = "_output_4d202_149", ce = "_tooltip_4d202_162"
               }
             ),
             /* @__PURE__ */ l("div", { className: g("range-track") }),
-            /* @__PURE__ */ l("div", { className: g("range", p && "range-disabled"), ref: $ })
+            /* @__PURE__ */ l("div", { className: g("range", p && "range-disabled"), ref: M })
           ] }),
           B ? /* @__PURE__ */ l("div", { className: g("thicks-markers"), children: B.reduce((e, r) => e.includes(r) ? e : [...e, r], []).filter((e) => e >= t && e <= a).map((e, r) => /* @__PURE__ */ l(
             "div",
             {
               className: g("thick"),
-              style: { left: `${I(e)}%` },
+              style: { left: `${V(e)}%` },
               children: /* @__PURE__ */ l(H, { className: g("thick-label"), children: e })
             },
             `${e}-${r}`
@@ -262,13 +263,13 @@ const oe = "_hint_4d202_20", se = "_output_4d202_149", ce = "_tooltip_4d202_162"
                 max: a,
                 step: i,
                 toCompare: o,
-                value: y
+                value: v
               });
-              b(e), x(e), v({ max: e, min: o });
+              x(e), I(e), w({ max: e, min: o });
             },
             onChange: (e) => {
               let r = parseInt(e.target.value, 10);
-              isNaN(r) && (r = 0), b(r);
+              isNaN(r) && (r = 0), x(r);
             },
             onKeyDown: (e) => {
               if (e.key === "Enter") {
@@ -276,86 +277,88 @@ const oe = "_hint_4d202_20", se = "_output_4d202_149", ce = "_tooltip_4d202_162"
                   max: a,
                   step: i,
                   toCompare: o,
-                  value: y
+                  value: v
                 });
-                b(r), x(r), v({ max: r, min: o });
+                x(r), I(r), w({ max: r, min: o });
               }
             },
-            size: "sm",
+            size: "md",
             type: "number",
-            value: y.toString()
+            value: v.toString()
           }
         ) : /* @__PURE__ */ l("div", { children: a }))
       ] }),
-      k ? /* @__PURE__ */ l(H, { className: g("hint"), children: k }) : null
+      y ? /* @__PURE__ */ l(H, { className: g("hint"), children: y }) : null
     ] });
   }
-), pe = 20, q = (d, _) => Math.round(d / _) * _, F = (d, _, p, k) => (d = q(d, k), d < _ ? _ : d > p ? p : d), w = ne(te), _e = Y(
+);
+ae.displayName = "Slider.Range";
+const _e = 20, q = (d, _) => Math.round(d / _) * _, F = (d, _, p, y) => (d = q(d, y), d < _ ? _ : d > p ? p : d), N = ne(te), le = Y(
   ({
     borderSelectorColor: d,
     className: _,
     disabled: p,
-    hint: k,
+    hint: y,
     label: h,
     max: a,
     min: t,
-    onChange: v,
+    onChange: w,
     step: i = 1,
-    tooltip: M,
+    tooltip: b,
     type: m,
     value: f,
     values: B,
     ...W
   }, G) => {
-    const o = A(null), V = A(null), [s, x] = D(!1), [K, N] = D(F(f, t, a, i)), [y, b] = D(F(f, t, a, i)), z = (n) => {
-      n = q(n, i), b(n);
+    const o = C(null), k = C(null), [s, I] = $(!1), [R, z] = $(F(f, t, a, i)), [v, x] = $(F(f, t, a, i)), A = (n) => {
+      n = q(n, i), x(n);
     }, E = (n) => {
       n.preventDefault();
-      let c = y;
-      n.key === "ArrowRight" && (c = F(c + i, t, a, i)), n.key === "ArrowLeft" && (c = F(c - i, t, a, i)), b(c), N(c), v(c);
-    }, $ = (n) => {
+      let c = v;
+      n.key === "ArrowRight" && (c = F(c + i, t, a, i)), n.key === "ArrowLeft" && (c = F(c - i, t, a, i)), x(c), z(c), w(c);
+    }, M = (n) => {
       let c = parseInt(n.target.value, 10);
-      isNaN(c) && (c = 0), N(c);
-    }, C = () => {
-      const n = F(K, t, a, i);
-      N(n), b(n), v(n);
+      isNaN(c) && (c = 0), z(c);
+    }, S = () => {
+      const n = F(R, t, a, i);
+      z(n), x(n), w(n);
     }, L = (n) => {
-      n.key === "Enter" && C();
-    }, S = Z(
+      n.key === "Enter" && S();
+    }, K = Z(
       (n) => Math.round((n - t) / (a - t) * 100),
       [t, a]
     );
     U(() => {
-      if (o.current && (o.current.style.backgroundSize = `${S(y)}% 100%`), V.current) {
-        const n = S(y) / 100;
-        V.current.style.left = `calc(${n * 100}% + ${(0.5 - n) * pe}px)`;
+      if (o.current && (o.current.style.backgroundSize = `${K(v)}% 100%`), k.current) {
+        const n = K(v) / 100;
+        k.current.style.left = `calc(${n * 100}% + ${(0.5 - n) * _e}px)`;
       }
-    }, [y, S]), U(() => {
-      !isNaN(f) && f !== y && f && (z(f), N(f));
+    }, [v, K]), U(() => {
+      !isNaN(f) && f !== v && f && (A(f), z(f));
     }, [f]);
     const j = ee();
-    return /* @__PURE__ */ R("div", { className: w("slider-root", _), ref: G, children: [
-      h ? /* @__PURE__ */ l(re, { as: "label", htmlFor: j, variant: "sm", children: h }) : null,
-      /* @__PURE__ */ R("div", { className: w("input-wrapper"), children: [
+    return /* @__PURE__ */ D("div", { className: N("slider-root", _), ref: G, children: [
+      h ? /* @__PURE__ */ l(re, { as: "label", htmlFor: j, variant: "body-md", children: h }) : null,
+      /* @__PURE__ */ D("div", { className: N("input-wrapper"), children: [
         (m === "inline" || m === "left-field") && (m === "left-field" ? /* @__PURE__ */ l(
           O,
           {
             disabled: p,
             max: a,
             min: t,
-            onBlur: C,
-            onChange: $,
+            onBlur: S,
+            onChange: M,
             onKeyDown: L,
-            size: "sm",
+            size: "md",
             type: "number",
-            value: K.toString()
+            value: R.toString()
           }
         ) : /* @__PURE__ */ l("div", { children: t })),
-        /* @__PURE__ */ R("div", { className: w("slider-wrapper"), children: [
+        /* @__PURE__ */ D("div", { className: N("slider-wrapper"), children: [
           /* @__PURE__ */ l(
             "input",
             {
-              className: w(
+              className: N(
                 "input-range",
                 "slider-input-range",
                 d && `border-selector-${d}`
@@ -367,29 +370,29 @@ const oe = "_hint_4d202_20", se = "_output_4d202_149", ce = "_tooltip_4d202_162"
               min: t,
               onChange: (n) => {
                 const c = parseInt(n.target.value, 10);
-                z(c), N(c);
+                A(c), z(c);
               },
               onKeyDown: E,
               onMouseDown: () => {
-                M && s === !1 && x(!0);
+                b && s === !1 && I(!0);
               },
               onMouseUp: () => {
-                v(y), M && x(!1);
+                w(v), b && I(!1);
               },
               ref: o,
               step: i,
               type: "range",
-              value: y,
+              value: v,
               ...W
             }
           ),
-          M ? /* @__PURE__ */ l("output", { className: w("output", s && "output-visible"), ref: V, children: /* @__PURE__ */ l("div", { className: w("tooltip"), children: y }) }) : null,
-          B ? /* @__PURE__ */ l("div", { className: w("thick-markers"), children: B.reduce((n, c) => n.includes(c) ? n : [...n, c], []).filter((n) => n >= t && n <= a).map((n, c) => /* @__PURE__ */ l(
+          b ? /* @__PURE__ */ l("output", { className: N("output", s && "output-visible"), ref: k, children: /* @__PURE__ */ l("div", { className: N("tooltip"), children: v }) }) : null,
+          B ? /* @__PURE__ */ l("div", { className: N("thick-markers"), children: B.reduce((n, c) => n.includes(c) ? n : [...n, c], []).filter((n) => n >= t && n <= a).map((n, c) => /* @__PURE__ */ l(
             "div",
             {
-              className: w("thick"),
-              style: { left: `${S(n)}%` },
-              children: /* @__PURE__ */ l(H, { className: w("thick-label"), children: n })
+              className: N("thick"),
+              style: { left: `${K(n)}%` },
+              children: /* @__PURE__ */ l(H, { className: N("thick-label"), children: n })
             },
             `${n}-${c}`
           )) }) : null
@@ -397,27 +400,29 @@ const oe = "_hint_4d202_20", se = "_output_4d202_149", ce = "_tooltip_4d202_162"
         (m === "inline" || m === "right-field") && (m === "right-field" ? /* @__PURE__ */ l(
           O,
           {
-            className: w("input-text"),
+            className: N("input-text"),
             disabled: p,
             max: a,
             min: t,
-            onBlur: C,
-            onChange: $,
+            onBlur: S,
+            onChange: M,
             onKeyDown: L,
-            size: "sm",
+            size: "md",
             type: "number",
-            value: K.toString()
+            value: R.toString()
           }
         ) : /* @__PURE__ */ l("div", { children: a }))
       ] }),
-      k ? /* @__PURE__ */ l(H, { className: w("hint"), children: k }) : null
+      y ? /* @__PURE__ */ l(H, { className: N("hint"), children: y }) : null
     ] });
   }
-), ke = Object.assign(_e, { Range: fe });
+);
+le.displayName = "Slider";
+const ye = Object.assign(le, { Range: ae });
 export {
-  ke as Slider,
-  _e as SliderComponent,
+  ye as Slider,
+  le as SliderComponent,
   F as ensureMinMax,
   q as round,
-  pe as thumbWidth
+  _e as thumbWidth
 };

package/dist/Stepper.css

@@ -0,0 +1 @@
+@layer components{._root_1wnun_2{display:flex;align-items:center;overflow-x:auto;border-style:solid;transition-property:border-color,box-shadow;transition-timing-function:ease-in-out;gap:var(--components-dimensions-stepper-gap-content);padding-block:var(--components-dimensions-stepper-padding-block);padding-inline:var(--components-dimensions-stepper-padding-inline);border-width:var(--components-dimensions-stepper-border-width-default);border-radius:var(--components-dimensions-stepper-border-radius);border-color:var(--stepperBorderColor, var(--components-colors-stepper-color-border-default));background-color:var(--components-colors-stepper-color-background);transition-duration:var(--duration-fast);box-shadow:var(--stepperBoxShadow, var(--elevation-10))}._root_1wnun_2 svg{width:var(--components-dimensions-stepper-size-icon);height:var(--components-dimensions-stepper-size-icon)}._root_1wnun_2:hover{--stepperBorderColor: var(--components-colors-stepper-color-border-hover);--stepperBoxShadow: var(--elevation-20)}._separator_1wnun_28{color:var(--components-colors-stepper-color-icon-default)}._item_1wnun_31{display:flex;align-items:center;transition-property:background-color,border-color,color;transition-timing-function:ease-in-out;gap:var(--components-dimensions-stepper-step-gap-content);padding-block:var(--components-dimensions-stepper-step-padding-block);padding-inline:var(--components-dimensions-stepper-step-padding-inline);border-width:var(--components-dimensions-stepper-step-border-width-active);border-radius:var(--components-dimensions-stepper-step-border-radius);transition-duration:var(--duration-medium);background-color:var(--stepperItemBackgroundColor, var(--components-colors-stepper-step-color-background-unchecked-default));border-color:var(--stepperItemBorderColor, transparent);color:var(--stepperItemColor, var(--components-colors-stepper-step-color-text-unchecked-default))}._item_1wnun_31 svg{width:var(--components-dimensions-stepper-step-size-icon);height:var(--components-dimensions-stepper-step-size-icon);color:var(--stepperItemIconColor, var(--components-colors-stepper-step-color-icon-unchecked-default))}._item_1wnun_31[aria-current=true]{--stepperItemColor: var(--components-colors-stepper-step-color-text-checked-default);--stepperItemBorderColor: var(--components-colors-stepper-step-color-border-checked-default);--stepperItemBackgroundColor: var( --components-colors-stepper-step-color-background-checked-default )}._item_1wnun_31[aria-current=true] svg{--stepperItemIconColor: var(--components-colors-stepper-step-color-icon-checked-default)}._item_1wnun_31._clickable_1wnun_64{cursor:pointer}._item_1wnun_31._clickable_1wnun_64:hover{--stepperItemColor: var(--components-colors-stepper-step-color-text-unchecked-hover);--stepperItemBackgroundColor: var( --components-colors-stepper-step-color-background-checked-hover )}._item_1wnun_31._clickable_1wnun_64:hover:not(._completed_1wnun_73) svg{--stepperItemIconColor: var( --components-colors-stepper-step-color-icon-unchecked-hover )}._item_1wnun_31._clickable_1wnun_64[aria-current=true]{--stepperItemColor: var(--components-colors-stepper-step-color-text-checked-default);--stepperItemBackgroundColor: var( --components-colors-stepper-step-color-background-checked-default );--stepperItemBorderColor: var( --components-colors-stepper-step-color-border-checked-default )}._item_1wnun_31._clickable_1wnun_64[aria-current=true]:hover{--stepperItemBackgroundColor: var( --components-colors-stepper-step-color-background-checked-hover );--stepperItemBorderColor: var( --components-colors-stepper-step-color-border-checked-hover )}._item_1wnun_31._clickable_1wnun_64[aria-current=true]:not(._completed_1wnun_73) svg{--stepperItemIconColor: var(--components-colors-stepper-step-color-icon-checked-hover)}._item_1wnun_31._completed_1wnun_73 svg{--stepperItemIconColor: var(--components-colors-stepper-step-color-icon-success)}}

package/dist/Stepper.js

@@ -0,0 +1,50 @@
+"use client";
+import './Stepper.css';
+import { jsx as e, jsxs as _ } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+import { Icon as a } from "./Icon.js";
+import { c as u } from "./index-PAaZGbyz.js";
+import { Text as f } from "./Text.js";
+const b = "_root_1wnun_2", N = "_separator_1wnun_28", S = "_item_1wnun_31", k = "_clickable_1wnun_64", w = "_completed_1wnun_73", g = {
+  root: b,
+  separator: N,
+  item: S,
+  clickable: k,
+  completed: w
+};
+function x({
+  icon: t,
+  isCompleted: o,
+  isOpen: r
+}) {
+  return t || (o ? /* @__PURE__ */ e(a, { name: "check-circle" }) : r ? /* @__PURE__ */ e(a, { name: "folder-open" }) : /* @__PURE__ */ e(a, { name: "folder" }));
+}
+const n = u(g), l = d(
+  ({ children: t, className: o }, r) => /* @__PURE__ */ e("ol", { className: n("root", o), ref: r, children: t })
+);
+l.displayName = "Stepper";
+const m = () => /* @__PURE__ */ e("div", { className: n("separator"), children: /* @__PURE__ */ e(a, { name: "angle-right-b", size: "lg" }) });
+m.displayName = "Stepper.Separator";
+const i = ({ children: t, icon: o, isCompleted: r, isOpen: c, onClick: s }) => {
+  const p = x({ icon: o, isCompleted: r, isOpen: c });
+  return /* @__PURE__ */ _(
+    "li",
+    {
+      "aria-current": c,
+      className: n("item", !!s && "clickable", r && "completed"),
+      onClick: s,
+      children: [
+        p,
+        /* @__PURE__ */ e(f, { variant: "label-md", children: t })
+      ]
+    }
+  );
+};
+i.displayName = "Stepper.Item";
+const B = Object.assign(l, {
+  Item: i,
+  Separator: m
+});
+export {
+  B as Stepper
+};

package/dist/StickyNote.css

@@ -0,0 +1 @@
+@layer components{._root_1m1jb_2{transform:rotate3d(0,0,1,.3deg);border-color:var(--components-colors-sticky-note-color-border-default);border-style:solid;border-width:var(--border-width-xs);border-radius:var(--components-dimensions-sticky-note-border-radius);padding:var(--spacing-3xl) var(--spacing-xl) var(--spacing-xl) var(--spacing-xl);box-shadow:var(--elevation-30);width:var(--StickyNoteWidth);height:var(--StickyNoteHeight);background-color:var(--StickyNoteBackgroundColor);color:var(--StickyNoteColor)}._root_1m1jb_2:before{content:"";position:absolute;top:0;left:0;width:100%;height:var(--spacing-xxl);background-color:#00000005}._shape-rectangle_1m1jb_26{--StickyNoteWidth: var(--components-dimensions-sticky-note-size-width-rectangle);--StickyNoteHeight: var(--components-dimensions-sticky-note-size-height-rectangle)}._shape-square_1m1jb_30{--StickyNoteWidth: var(--components-dimensions-sticky-note-size-width-square);--StickyNoteHeight: var(--components-dimensions-sticky-note-size-height-square)}._variant-brand_1m1jb_34{--StickyNoteBackgroundColor: var(--components-colors-sticky-note-color-background-brand);--StickyNoteColor: var(--components-colors-sticky-note-color-text-body-brand)}._variant-brand_1m1jb_34 ._title-icon_1m1jb_38{--StickyNoteTitleIconColor: var(--components-colors-sticky-note-icon-color-icon-brand);--StickyNoteTitleIconBackgroundColor: var( --components-colors-sticky-note-icon-color-background-brand )}._variant-blue_1m1jb_44{--StickyNoteBackgroundColor: var(--components-colors-sticky-note-color-background-blue);--StickyNoteColor: var(--components-colors-sticky-note-color-text-body-blue)}._variant-blue_1m1jb_44 ._title-icon_1m1jb_38{--StickyNoteTitleIconColor: var(--components-colors-sticky-note-icon-color-icon-blue);--StickyNoteTitleIconBackgroundColor: var( --components-colors-sticky-note-icon-color-background-blue )}._variant-green_1m1jb_54{--StickyNoteBackgroundColor: var(--components-colors-sticky-note-color-background-green);--StickyNoteColor: var(--components-colors-sticky-note-color-text-body-green)}._variant-green_1m1jb_54 ._title-icon_1m1jb_38{--StickyNoteTitleIconColor: var(--components-colors-sticky-note-icon-color-icon-green);--StickyNoteTitleIconBackgroundColor: var( --components-colors-sticky-note-icon-color-background-green )}._variant-violet_1m1jb_64{--StickyNoteBackgroundColor: var(--components-colors-sticky-note-color-background-violet);--StickyNoteColor: var(--components-colors-sticky-note-color-text-body-violet)}._variant-violet_1m1jb_64 ._title-icon_1m1jb_38{--StickyNoteTitleIconColor: var(--components-colors-sticky-note-icon-color-icon-violet);--StickyNoteTitleIconBackgroundColor: var( --components-colors-sticky-note-icon-color-background-violet )}._variant-pink_1m1jb_74{--StickyNoteBackgroundColor: var(--components-colors-sticky-note-color-background-pink);--StickyNoteColor: var(--components-colors-sticky-note-color-text-body-pink)}._variant-pink_1m1jb_74 ._title-icon_1m1jb_38{--StickyNoteTitleIconColor: var(--components-colors-sticky-note-icon-color-icon-pink);--StickyNoteTitleIconBackgroundColor: var( --components-colors-sticky-note-icon-color-background-pink )}._variant-orange_1m1jb_84{--StickyNoteBackgroundColor: var(--components-colors-sticky-note-color-background-orange);--StickyNoteColor: var(--components-colors-sticky-note-color-text-body-orange)}._variant-orange_1m1jb_84 ._title-icon_1m1jb_38{--StickyNoteTitleIconColor: var(--components-colors-sticky-note-icon-color-icon-orange);--StickyNoteTitleIconBackgroundColor: var( --components-colors-sticky-note-icon-color-background-orange )}._variant-teal_1m1jb_94{--StickyNoteBackgroundColor: var(--components-colors-sticky-note-color-background-teal);--StickyNoteColor: var(--components-colors-sticky-note-color-text-body-teal)}._variant-teal_1m1jb_94 ._title-icon_1m1jb_38{--StickyNoteTitleIconColor: var(--components-colors-sticky-note-icon-color-icon-teal);--StickyNoteTitleIconBackgroundColor: var( --components-colors-sticky-note-icon-color-background-teal )}._close-button_1m1jb_104{position:absolute;transform:rotate3d(0,0,1,-.3deg);right:var(--spacing-xs);top:var(--spacing-xs)}._content_1m1jb_110{position:relative;display:flex;flex-direction:column;height:100%;gap:var(--components-dimensions-sticky-note-gap-content);transform:rotate3d(0,0,1,-.3deg);font-size:var(--font-size-md);line-height:var(--font-line-height-md)}._title_1m1jb_38{display:flex;gap:var(--spacing-sm);align-items:center}._title-icon_1m1jb_38{flex-shrink:0;padding:var(--components-dimensions-sticky-note-icon-padding-block);border-radius:var(--components-dimensions-sticky-note-icon-border-radius);color:var(--StickyNoteTitleIconColor);background-color:var(--StickyNoteTitleIconBackgroundColor)}._action_1m1jb_132{margin-top:auto;width:fit-content}}