welcome-ui 10.0.0-alpha.3 → 10.0.0-alpha.5

package/dist/Slider.js

@@ -1,15 +1,16 @@
 "use client";
-import { jsxs as D, jsx as l, Fragment as ie } from "react/jsx-runtime";
-import { forwardRef as Y, useState as $, useRef as S, 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_6xzwz_20", se = "_output_6xzwz_149", ce = "_tooltip_6xzwz_162", ue = "_thick_6xzwz_171", de = "_range_6xzwz_8", te = {
+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: oe,
+  hint: ce,
   "slider-wrapper": "_slider-wrapper_6xzwz_23",
   "range-wrapper": "_range-wrapper_6xzwz_30",
   "tick-markers": "_tick-markers_6xzwz_34",
@@ -23,36 +24,36 @@ const oe = "_hint_6xzwz_20", se = "_output_6xzwz_149", ce = "_tooltip_6xzwz_162"
   "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: se,
+  output: ue,
   "output-visible": "_output-visible_6xzwz_157",
-  tooltip: ce,
-  thick: ue,
+  tooltip: de,
+  thick: fe,
   "thick-label": "_thick-label_6xzwz_182",
   "range-track": "_range-track_6xzwz_188",
-  range: de,
+  range: pe,
   "range-disabled": "_range-disabled_6xzwz_200"
 }, X = 20, g = ne(te), P = ({
   min: d,
   step: _,
   toCompare: p,
-  value: x
+  value: y
 }) => {
-  let h = Math.min(x, p - 1 * _);
+  let h = Math.min(y, p - 1 * _);
   return h = Math.max(h, d), q(h, _);
 }, T = ({
   max: d,
   step: _,
   toCompare: p,
-  value: x
+  value: y
 }) => {
-  let h = Math.max(x, 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: x,
+    hint: y,
     label: h,
     max: a,
     min: t,
@@ -64,7 +65,7 @@ const oe = "_hint_6xzwz_20", se = "_output_6xzwz_149", ce = "_tooltip_6xzwz_162"
     values: B,
     ...W
   }, G) => {
-    const [o, k] = $(t), [s, I] = $(a), [R, z] = $(t), [v, N] = $(a), A = S(null), E = S(null), M = S(null), K = S(null), L = S(null), [C, j] = $(!1), [n, c] = $(!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,
@@ -72,14 +73,14 @@ const oe = "_hint_6xzwz_20", se = "_output_6xzwz_149", ce = "_tooltip_6xzwz_162"
         value: parseInt(e.target.value, 10)
       });
       z(r), k(r), e.target.value = r.toString();
-    }, le = (e) => {
+    }, oe = (e) => {
       const r = T({
         max: a,
         step: i,
         toCompare: o,
         value: parseInt(e.target.value, 10)
       });
-      N(r), I(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;
@@ -87,7 +88,7 @@ const oe = "_hint_6xzwz_20", se = "_output_6xzwz_149", ce = "_tooltip_6xzwz_162"
       }
       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 })), N(u), I(u), w({ 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 });
       }
     }, V = Z(
       (e) => {
@@ -104,9 +105,9 @@ const oe = "_hint_6xzwz_20", se = "_output_6xzwz_149", ce = "_tooltip_6xzwz_162"
     }, [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}%`), K.current) {
+        if (M.current && (M.current.style.width = `${r - e}%`), S.current) {
           const u = V(o) / 100;
-          K.current.style.left = `calc(${u * 100}% + ${(0.5 - u) * X}px)`;
+          S.current.style.left = `calc(${u * 100}% + ${(0.5 - u) * X}px)`;
         }
         if (L.current) {
           const u = V(s) / 100;
@@ -121,7 +122,7 @@ const oe = "_hint_6xzwz_20", se = "_output_6xzwz_149", ce = "_tooltip_6xzwz_162"
         }
         if (!isNaN(f.max) && f.max !== s) {
           const e = T({ max: a, step: i, toCompare: o, value: f.max || a });
-          I(e), N(e);
+          I(e), x(e);
         }
       }
     }, [f]);
@@ -165,12 +166,12 @@ const oe = "_hint_6xzwz_20", se = "_output_6xzwz_149", ce = "_tooltip_6xzwz_162"
           }
         ) : /* @__PURE__ */ l("div", { children: t })),
         /* @__PURE__ */ D("div", { className: g("range-wrapper"), children: [
-          b ? /* @__PURE__ */ D(ie, { children: [
+          b ? /* @__PURE__ */ D(se, { children: [
             /* @__PURE__ */ l(
               "output",
               {
-                className: g("output", C && "output-visible"),
-                ref: K,
+                className: g("output", K && "output-visible"),
+                ref: S,
                 children: /* @__PURE__ */ l("div", { children: o })
               }
             ),
@@ -197,10 +198,10 @@ const oe = "_hint_6xzwz_20", se = "_output_6xzwz_149", ce = "_tooltip_6xzwz_162"
                 id: `${J}-min`,
                 max: a,
                 min: t,
-                onChange: ae,
+                onChange: ie,
                 onKeyDown: (e) => Q(e, "min"),
                 onMouseDown: () => {
-                  b && C === !1 && j(!0);
+                  b && K === !1 && j(!0);
                 },
                 onMouseUp: () => {
                   w({ max: s, min: o }), b && j(!1);
@@ -224,7 +225,7 @@ const oe = "_hint_6xzwz_20", se = "_output_6xzwz_149", ce = "_tooltip_6xzwz_162"
                 id: `${J}-max`,
                 max: a,
                 min: t,
-                onChange: le,
+                onChange: oe,
                 onKeyDown: (e) => Q(e, "max"),
                 onMouseDown: () => {
                   b && n === !1 && c(!0);
@@ -264,11 +265,11 @@ const oe = "_hint_6xzwz_20", se = "_output_6xzwz_149", ce = "_tooltip_6xzwz_162"
                 toCompare: o,
                 value: v
               });
-              N(e), I(e), w({ 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), N(r);
+              isNaN(r) && (r = 0), x(r);
             },
             onKeyDown: (e) => {
               if (e.key === "Enter") {
@@ -278,7 +279,7 @@ const oe = "_hint_6xzwz_20", se = "_output_6xzwz_149", ce = "_tooltip_6xzwz_162"
                   toCompare: o,
                   value: v
                 });
-                N(r), I(r), w({ max: r, min: o });
+                x(r), I(r), w({ max: r, min: o });
               }
             },
             size: "md",
@@ -287,15 +288,17 @@ const oe = "_hint_6xzwz_20", se = "_output_6xzwz_149", ce = "_tooltip_6xzwz_162"
           }
         ) : /* @__PURE__ */ l("div", { children: a }))
       ] }),
-      x ? /* @__PURE__ */ l(H, { className: g("hint"), children: x }) : null
+      y ? /* @__PURE__ */ l(H, { className: g("hint"), children: y }) : null
     ] });
   }
-), pe = 20, q = (d, _) => Math.round(d / _) * _, F = (d, _, p, x) => (d = q(d, x), d < _ ? _ : d > p ? p : d), y = 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: x,
+    hint: y,
     label: h,
     max: a,
     min: t,
@@ -307,43 +310,43 @@ const oe = "_hint_6xzwz_20", se = "_output_6xzwz_149", ce = "_tooltip_6xzwz_162"
     values: B,
     ...W
   }, G) => {
-    const o = S(null), k = S(null), [s, I] = $(!1), [R, z] = $(F(f, t, a, i)), [v, N] = $(F(f, t, a, i)), A = (n) => {
-      n = q(n, i), N(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 = v;
-      n.key === "ArrowRight" && (c = F(c + i, t, a, i)), n.key === "ArrowLeft" && (c = F(c - i, t, a, i)), N(c), z(c), w(c);
+      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), z(c);
-    }, K = () => {
+    }, S = () => {
       const n = F(R, t, a, i);
-      z(n), N(n), w(n);
+      z(n), x(n), w(n);
     }, L = (n) => {
-      n.key === "Enter" && K();
-    }, C = 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 = `${C(v)}% 100%`), k.current) {
-        const n = C(v) / 100;
-        k.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)`;
       }
-    }, [v, C]), U(() => {
+    }, [v, K]), U(() => {
       !isNaN(f) && f !== v && f && (A(f), z(f));
     }, [f]);
     const j = ee();
-    return /* @__PURE__ */ D("div", { className: y("slider-root", _), ref: G, 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: y("input-wrapper"), children: [
+      /* @__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: K,
+            onBlur: S,
             onChange: M,
             onKeyDown: L,
             size: "md",
@@ -351,11 +354,11 @@ const oe = "_hint_6xzwz_20", se = "_output_6xzwz_149", ce = "_tooltip_6xzwz_162"
             value: R.toString()
           }
         ) : /* @__PURE__ */ l("div", { children: t })),
-        /* @__PURE__ */ D("div", { className: y("slider-wrapper"), children: [
+        /* @__PURE__ */ D("div", { className: N("slider-wrapper"), children: [
           /* @__PURE__ */ l(
             "input",
             {
-              className: y(
+              className: N(
                 "input-range",
                 "slider-input-range",
                 d && `border-selector-${d}`
@@ -383,13 +386,13 @@ const oe = "_hint_6xzwz_20", se = "_output_6xzwz_149", ce = "_tooltip_6xzwz_162"
               ...W
             }
           ),
-          b ? /* @__PURE__ */ l("output", { className: y("output", s && "output-visible"), ref: k, children: /* @__PURE__ */ l("div", { className: y("tooltip"), children: v }) }) : null,
-          B ? /* @__PURE__ */ l("div", { className: y("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: y("thick"),
-              style: { left: `${C(n)}%` },
-              children: /* @__PURE__ */ l(H, { className: y("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,11 +400,11 @@ const oe = "_hint_6xzwz_20", se = "_output_6xzwz_149", ce = "_tooltip_6xzwz_162"
         (m === "inline" || m === "right-field") && (m === "right-field" ? /* @__PURE__ */ l(
           O,
           {
-            className: y("input-text"),
+            className: N("input-text"),
             disabled: p,
             max: a,
             min: t,
-            onBlur: K,
+            onBlur: S,
             onChange: M,
             onKeyDown: L,
             size: "md",
@@ -410,14 +413,16 @@ const oe = "_hint_6xzwz_20", se = "_output_6xzwz_149", ce = "_tooltip_6xzwz_162"
           }
         ) : /* @__PURE__ */ l("div", { children: a }))
       ] }),
-      x ? /* @__PURE__ */ l(H, { className: y("hint"), children: x }) : null
+      y ? /* @__PURE__ */ l(H, { className: N("hint"), children: y }) : null
     ] });
   }
-), xe = Object.assign(_e, { Range: fe });
+);
+le.displayName = "Slider";
+const ye = Object.assign(le, { Range: ae });
 export {
-  xe 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.js

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

package/dist/StickyNote.js

@@ -0,0 +1,49 @@
+"use client";
+import './StickyNote.css';
+import { jsx as t, jsxs as c } from "react/jsx-runtime";
+import { forwardRef as j } from "react";
+import { CloseButton as d } from "./CloseButton.js";
+import { c as i } from "./index-PAaZGbyz.js";
+import { Button as N } from "./Button.js";
+import { Icon as y } from "./Icon.js";
+import { Text as f } from "./Text.js";
+const g = "_root_1m1jb_2", h = "_content_1m1jb_110", k = "_title_1m1jb_38", x = "_action_1m1jb_132", r = {
+  root: g,
+  "shape-rectangle": "_shape-rectangle_1m1jb_26",
+  "shape-square": "_shape-square_1m1jb_30",
+  "variant-brand": "_variant-brand_1m1jb_34",
+  "title-icon": "_title-icon_1m1jb_38",
+  "variant-blue": "_variant-blue_1m1jb_44",
+  "variant-green": "_variant-green_1m1jb_54",
+  "variant-violet": "_variant-violet_1m1jb_64",
+  "variant-pink": "_variant-pink_1m1jb_74",
+  "variant-orange": "_variant-orange_1m1jb_84",
+  "variant-teal": "_variant-teal_1m1jb_94",
+  "close-button": "_close-button_1m1jb_104",
+  content: h,
+  title: k,
+  action: x
+}, B = i(r), m = ({ children: a, className: n, ...o }) => /* @__PURE__ */ t(N, { className: B("action", n), ...o, size: "sm", variant: "primary-neutral", children: a });
+m.displayName = "StickyNote.Button";
+const s = i(r), _ = ({ children: a, icon: n = "lightbulb-alt" }) => /* @__PURE__ */ c(f, { as: "div", className: s("title"), variant: "body-md-strong", children: [
+  /* @__PURE__ */ t("div", { className: s("title-icon"), children: /* @__PURE__ */ t(y, { name: n }) }),
+  /* @__PURE__ */ t("span", { children: a })
+] });
+_.displayName = "StickyNote.Title";
+const e = i(r), l = j(
+  ({ children: a, className: n, handleClose: o, shape: b = "square", variant: v = "brand" }, p) => {
+    const u = !!o;
+    return /* @__PURE__ */ c("div", { className: e("root", `variant-${v}`, `shape-${b}`, n), ref: p, children: [
+      u ? /* @__PURE__ */ t(d, { className: e("close-button"), onClick: o, size: "sm" }) : null,
+      /* @__PURE__ */ t("div", { className: e("content"), children: a })
+    ] });
+  }
+);
+l.displayName = "StickyNote";
+const I = Object.assign(l, {
+  Button: m,
+  Title: _
+});
+export {
+  I as StickyNote
+};