welcome-ui 10.0.0-alpha.2 → 10.0.0-alpha.4

package/dist/Alert.css

@@ -1 +1 @@
-@layer components{._root_1kb4k_2{position:relative;display:flex;align-items:flex-start;width:100%;border-radius:var(--border-radius-md);border:var(--border-width-xs) solid;padding:var(--padding);max-width:var(--maxWidth, max-content);background-color:var(--backgroundColor, var(--color-background-neutral-inverse-fixed));border-color:var(--borderColor, var(--color-background-neutral-subtlest));color:var(--color, var(--color-background-neutral-secondary))}._size-sm_1kb4k_16{--padding: var(--border-radius-xl)}._size-md_1kb4k_19{--padding: var(--border-radius-2xl)}._variant-ai_1kb4k_22{--backgroundColor: var(--color-violet-10);--borderColor: var(--color-violet-10);--color: var(--color-violet-90)}._variant-beige_1kb4k_27{--backgroundColor: var(--color-background-warm-primary);--borderColor: var(--color-background-warm-primary);--color: var(--color-border-warm-stronger)}._variant-danger_1kb4k_32{--backgroundColor: var(--color-background-danger-minimal);--borderColor: var(--color-background-danger-minimal);--color: var(--color-icon-danger-primary)}._variant-info_1kb4k_37{--backgroundColor: var(--color-background-accent-blue-minimal);--borderColor: var(--color-background-accent-blue-minimal);--color: var(--color-icon-accent-blue-primary)}._variant-success_1kb4k_42{--backgroundColor: var(--color-green-10);--borderColor: var(--color-green-10);--color: var(--color-icon-accent-green-primary)}._variant-warning_1kb4k_47{--backgroundColor: var(--color-background-warning-minimal);--borderColor: var(--color-background-warning-minimal);--color: var(--color-icon-warning-primary)}._full-width_1kb4k_52{--maxWidth: 100%}._icon_1kb4k_55._size-sm_1kb4k_16 svg{margin-top:1px}._icon_1kb4k_55._size-sm_1kb4k_16 ._content_1kb4k_58{margin-left:var(--border-radius-lg)}._icon_1kb4k_55._size-md_1kb4k_19 svg{margin-top:-3px}._icon_1kb4k_55._size-md_1kb4k_19 ._content_1kb4k_58{margin-left:var(--border-radius-xl)}._content_1kb4k_58{display:flex;gap:var(--border-radius-lg);flex-direction:column;justify-content:space-between;align-items:flex-start;flex:1}._content-text_1kb4k_76{flex:1}._content-actions_1kb4k_79{display:flex;align-items:center;gap:var(--border-radius-md)}._variant-icon_1kb4k_84{align-self:start}._title_1kb4k_88{font-weight:var(--font-weight-medium);margin-bottom:var(--titleMarginBottom)}._title-size-sm_1kb4k_93{--titleMarginBottom: var(--border-radius-sm)}._title-size-md_1kb4k_96{--titleMarginBottom: var(--border-radius-md)}._title-close-button_1kb4k_99{margin-right:var(--border-radius-2xl)}._close-button_1kb4k_103{position:absolute;right:var(--border-radius-md);top:var(--border-radius-md)}}
+@layer components{._root_hm7mj_2{position:relative;display:flex;align-items:flex-start;width:100%;gap:var(--gap, var(--components-dimensions-alert-gap-content-md));border-radius:var(--components-dimensions-alert-border-radius);border-width:var(--border-width-sm);border-style:solid;padding:var(--padding);max-width:var(--maxWidth, max-content);background-color:var(--backgroundColor, var(--components-colors-alert-color-background-brand));border-color:var(--borderColor, var(--components-colors-alert-color-background-brand));color:var(--color, var(--components-colors-alert-color-text-brand-body))}._size-md_hm7mj_18{--padding: var(--components-dimensions-alert-padding-inline-md)}._size-md_hm7mj_18 ._content-actions_hm7mj_21{--gap: var(--components-dimensions-alert-gap-actions-md)}._size-md_hm7mj_18 ._without-title_hm7mj_24 ._icon-wrapper_hm7mj_24{margin-top:-2px}._size-lg_hm7mj_27{--padding: var(--components-dimensions-alert-padding-inline-lg);--gap: var(--components-dimensions-alert-gap-content-lg)}._size-lg_hm7mj_27 ._content-actions_hm7mj_21{--gap: var(--components-dimensions-alert-gap-actions-lg)}._variant-ai_hm7mj_34{--backgroundColor: var(--components-colors-alert-color-background-ai);--borderColor: transparent;background:linear-gradient(var(--components-colors-alert-color-background-ai) 0 0) padding-box,linear-gradient(90deg,var(--color-green-30) 0%,var(--color-teal-40) 20%,var(--color-blue-40) 40%,var(--color-violet-40) 60%,var(--color-pink-40) 80%,var(--color-red-orange-40) 100%) border-box}._variant-danger_hm7mj_39{--backgroundColor: var(--components-colors-alert-color-background-danger);--borderColor: var(--components-colors-alert-color-background-danger);--color: var(--color-icon-danger-primary)}._variant-info_hm7mj_44{--backgroundColor: var(--components-colors-alert-color-background-information);--borderColor: var(--components-colors-alert-color-background-information);--color: var(--color-icon-accent-blue-primary)}._variant-success_hm7mj_49{--backgroundColor: var(--components-colors-alert-color-background-success);--borderColor: var(--components-colors-alert-color-background-success);--color: var(--color-icon-accent-green-primary)}._variant-warning_hm7mj_54{--backgroundColor: var(--components-colors-alert-color-background-warning);--borderColor: var(--components-colors-alert-color-background-warning);--color: var(--color-icon-warning-primary)}._full-width_hm7mj_59{--maxWidth: 100%}._content_hm7mj_21{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:var(--gap, var(--components-dimensions-alert-gap-content-md))}._content-text_hm7mj_70{display:flex;flex-direction:column;gap:var(--gap, var(--components-dimensions-alert-gap-content-md))}._content-text_hm7mj_70._without-title_hm7mj_24{flex-direction:row}._content-text_hm7mj_70._without-title_hm7mj_24 ._icon-wrapper_hm7mj_24{align-self:flex-start}._content-actions_hm7mj_21{display:flex;align-items:center;gap:var(--gap)}._title-close-button_hm7mj_87{margin-right:var(--spacing-xl)}._title-with-icon_hm7mj_90{display:flex;align-items:center;gap:var(--spacing-sm)}._close-button_hm7mj_96{position:absolute;right:var(--spacing-sm);top:var(--spacing-sm)}._icon-wrapper_hm7mj_24{flex-shrink:0;padding:var(--components-dimensions-alert-icon-padding-block);border-radius:var(--components-dimensions-alert-icon-border-radius);background-color:var(--iconWrapperBackgroundColor, var(--components-colors-alert-icon-color-background-brand));color:var(--iconWrapperColor, var(--components-colors-alert-icon-color-icon-brand))}._icon-wrapper-success_hm7mj_109{--iconWrapperBackgroundColor: var(--components-colors-alert-icon-color-background-success);--iconWrapperColor: var(--components-colors-alert-icon-color-icon-success)}._icon-wrapper-danger_hm7mj_113{--iconWrapperBackgroundColor: var(--components-colors-alert-icon-color-background-danger);--iconWrapperColor: var(--components-colors-alert-icon-color-icon-danger)}._icon-wrapper-info_hm7mj_117{--iconWrapperBackgroundColor: var( --components-colors-alert-icon-color-background-information );--iconWrapperColor: var(--components-colors-alert-icon-color-icon-information)}._icon-wrapper-warning_hm7mj_123{--iconWrapperBackgroundColor: var(--components-colors-alert-icon-color-background-warning);--iconWrapperColor: var(--components-colors-alert-icon-color-icon-warning)}._icon-wrapper-ai_hm7mj_127{background:conic-gradient(from 30deg at 50% 50%,var(--color-green-30) 0deg,var(--color-blue-40) 25.96deg,var(--color-violet-40) 51.92deg,var(--color-pink-40) 76.15deg,var(--color-red-orange-40) 110.77deg,var(--color-pink-40) 162.69deg,var(--color-violet-40) 209.42deg,var(--color-blue-40) 254.42deg,var(--color-teal-40) 306.35deg,var(--color-green-30) 360deg);--iconWrapperColor: var(--components-colors-alert-icon-color-icon-ai)}}

package/dist/Alert.js

@@ -1,101 +1,98 @@
 "use client";
-import { jsxs as p, jsx as i } from "react/jsx-runtime";
-import I, { forwardRef as l, Children as v, cloneElement as _ } from "react";
-import { Button as d } from "./Button.js";
-import { CloseButton as S } from "./CloseButton.js";
-import { Text as y } from "./Text.js";
-import { VariantIcon as T } from "./VariantIcon.js";
-import { c as V } from "./index-PAaZGbyz.js";
-const $ = "_root_1kb4k_2", E = "_icon_1kb4k_55", R = "_content_1kb4k_58", O = "_title_1kb4k_88", q = {
-  root: $,
-  "size-sm": "_size-sm_1kb4k_16",
-  "size-md": "_size-md_1kb4k_19",
-  "variant-ai": "_variant-ai_1kb4k_22",
-  "variant-beige": "_variant-beige_1kb4k_27",
-  "variant-danger": "_variant-danger_1kb4k_32",
-  "variant-info": "_variant-info_1kb4k_37",
-  "variant-success": "_variant-success_1kb4k_42",
-  "variant-warning": "_variant-warning_1kb4k_47",
-  "full-width": "_full-width_1kb4k_52",
-  icon: E,
-  content: R,
-  "content-text": "_content-text_1kb4k_76",
-  "content-actions": "_content-actions_1kb4k_79",
-  "variant-icon": "_variant-icon_1kb4k_84",
-  title: O,
-  "title-size-sm": "_title-size-sm_1kb4k_93",
-  "title-size-md": "_title-size-md_1kb4k_96",
-  "title-close-button": "_title-close-button_1kb4k_99",
-  "close-button": "_close-button_1kb4k_103"
-}, s = V(q), D = l(
-  ({ children: o, className: e, cta: n, handleClose: a, hideIcon: x, isFullWidth: A, size: r = "sm", variant: c, ...B }, z) => {
-    const h = c === "beige" ? void 0 : c, k = c === "ai", m = !x, j = v.toArray(o).map((t) => t.type === g ? _(t, { hasCloseButton: !!a, variant: r }) : t), u = (t) => {
-      var f;
-      if (t) {
-        if (t.type === w)
-          return _(t, {
-            size: r,
-            variant: k ? "primary-ai" : void 0
-          });
-        if (t.type === N)
-          return _(t, {
-            size: r,
-            variant: k ? "primary-ai" : void 0
-          });
-        if ((f = t.props) != null && f.children)
-          return _(t, {
-            ...t.props,
-            children: v.map(
-              t.props.children,
-              (C) => u(C)
-            )
-          });
-      }
-      return t;
-    }, b = I.isValidElement(n) ? u(n) : n;
-    return /* @__PURE__ */ p(
+import { jsx as i, jsxs as m } from "react/jsx-runtime";
+import l, { forwardRef as w, Children as p, cloneElement as u } from "react";
+import { CloseButton as E } from "./CloseButton.js";
+import { Icon as S } from "./Icon.js";
+import { Text as v } from "./Text.js";
+import { c as y } from "./index-PAaZGbyz.js";
+import { Button as b } from "./Button.js";
+const V = "_root_hm7mj_2", I = "_content_hm7mj_21", N = {
+  root: V,
+  "size-md": "_size-md_hm7mj_18",
+  "content-actions": "_content-actions_hm7mj_21",
+  "without-title": "_without-title_hm7mj_24",
+  "icon-wrapper": "_icon-wrapper_hm7mj_24",
+  "size-lg": "_size-lg_hm7mj_27",
+  "variant-ai": "_variant-ai_hm7mj_34",
+  "variant-danger": "_variant-danger_hm7mj_39",
+  "variant-info": "_variant-info_hm7mj_44",
+  "variant-success": "_variant-success_hm7mj_49",
+  "variant-warning": "_variant-warning_hm7mj_54",
+  "full-width": "_full-width_hm7mj_59",
+  content: I,
+  "content-text": "_content-text_hm7mj_70",
+  "title-close-button": "_title-close-button_hm7mj_87",
+  "title-with-icon": "_title-with-icon_hm7mj_90",
+  "close-button": "_close-button_hm7mj_96",
+  "icon-wrapper-success": "_icon-wrapper-success_hm7mj_109",
+  "icon-wrapper-danger": "_icon-wrapper-danger_hm7mj_113",
+  "icon-wrapper-info": "_icon-wrapper-info_hm7mj_117",
+  "icon-wrapper-warning": "_icon-wrapper-warning_hm7mj_123",
+  "icon-wrapper-ai": "_icon-wrapper-ai_hm7mj_127"
+}, x = w(
+  ({ variant: t = "primary", ...o }, n) => /* @__PURE__ */ i(b, { className: "shrink-0 w-fit", ref: n, variant: t, ...o })
+), A = w(
+  ({ variant: t = "secondary", ...o }, n) => /* @__PURE__ */ i(b, { className: "shrink-0 w-fit", ref: n, variant: t, ...o })
+), O = y(N), h = ({ children: t, hasCloseButton: o, ...n }) => /* @__PURE__ */ i(v, { as: "span", className: O(o && "title-close-button"), ...n, children: t }), a = y(N), R = {
+  ai: "sparkles",
+  brand: "lightbulb-alt",
+  danger: "exclamation-octagon",
+  info: "info-circle",
+  success: "check-circle",
+  warning: "exclamation-triangle"
+}, z = w(
+  ({ children: t, className: o, cta: n, handleClose: _, isFullWidth: B, size: c = "md", variant: s = "brand", ...$ }, k) => {
+    const C = s === "ai", f = p.toArray(t).some((r) => l.isValidElement(r) ? r.type === h : !1), j = /* @__PURE__ */ i("div", { className: a("icon-wrapper", `icon-wrapper-${s}`), children: /* @__PURE__ */ i(S, { name: R[s] }) }), T = p.toArray(t).map((r) => r.type === h ? /* @__PURE__ */ m("div", { className: a("title-with-icon"), children: [
+      j,
+      u(r, {
+        hasCloseButton: !!_,
+        variant: `body-${c}-strong`
+      })
+    ] }) : r), d = (r) => p.toArray(r).flatMap((e) => l.isValidElement(e) && e.type === l.Fragment ? d(e.props.children) : e.type === x ? u(e, {
+      size: c,
+      variant: C ? "primary-ai" : void 0
+    }) : e.type === A ? u(e, {
+      size: c
+    }) : e), g = !!n && d(n);
+    return /* @__PURE__ */ m(
       "div",
       {
-        className: s(
+        className: a(
           "root",
-          A && "full-width",
-          r && `size-${r}`,
-          c && `variant-${c}`,
-          m && "icon",
-          e
+          B && "full-width",
+          `size-${c}`,
+          s && `variant-${s}`,
+          o
         ),
-        ref: z,
-        ...B,
+        ref: k,
+        ...$,
         children: [
-          !!a && /* @__PURE__ */ i(S, { className: "close-button", onClick: a, size: "sm" }),
-          m ? /* @__PURE__ */ i(T, { className: s("variant-icon"), size: r, variant: h }) : null,
-          /* @__PURE__ */ p("div", { className: s("content"), children: [
-            /* @__PURE__ */ i(y, { as: "div", className: s("content-text"), children: j }),
-            !!b && /* @__PURE__ */ i("div", { className: s("content-actions"), children: b })
+          !!_ && /* @__PURE__ */ i(E, { className: a("close-button"), onClick: _ }),
+          /* @__PURE__ */ m("div", { className: a("content"), children: [
+            /* @__PURE__ */ m(
+              v,
+              {
+                as: "div",
+                className: a("content-text", !f && "without-title"),
+                variant: `body-${c}`,
+                children: [
+                  !f && j,
+                  T
+                ]
+              }
+            ),
+            !!g && /* @__PURE__ */ i("div", { className: a("content-actions"), children: g })
           ] })
         ]
       }
     );
   }
-), w = l(
-  ({ variant: o = "secondary", ...e }, n) => /* @__PURE__ */ i(d, { className: "shrink-0 w-fit", ref: n, ...e, variant: o })
-), N = l(
-  ({ variant: o = "tertiary", ...e }, n) => /* @__PURE__ */ i(d, { className: "shrink-0 w-fit", ref: n, ...e, variant: o })
-), g = ({ children: o, hasCloseButton: e, variant: n, ...a }) => /* @__PURE__ */ i(
-  y,
-  {
-    as: "span",
-    className: s("title", `title-size-${n}`, e && "title-close-button"),
-    variant: n,
-    ...a,
-    children: o
-  }
-), P = Object.assign(D, {
-  Button: w,
-  SecondaryButton: N,
-  Title: g
+), K = Object.assign(z, {
+  Button: x,
+  SecondaryButton: A,
+  Title: h
 });
 export {
-  P as Alert,
-  g as AlertTitle
+  K as Alert,
+  R as ICON
 };

package/dist/Icon.js

@@ -2,7 +2,7 @@
 import { jsxs as o, jsx as a } from "react/jsx-runtime";
 import { forwardRef as C } from "react";
 import { c as e } from "./index-PAaZGbyz.js";
-const s = "_root_576cf_2", A = {
+const s = "_root_576cf_2", n = {
   root: s,
   "size-xs": "_size-xs_576cf_7",
   "size-sm": "_size-sm_576cf_10",
@@ -212,14 +212,18 @@ const s = "_root_576cf_2", A = {
   /* @__PURE__ */ a("symbol", { id: "thumbs-down", viewBox: "0 0 24 24", children: /* @__PURE__ */ a("path", { fill: "currentColor", d: "M19,2H6.27A3,3,0,0,0,3.32,4.46l-1.27,7A3,3,0,0,0,5,15H9.56L9,16.43A4.13,4.13,0,0,0,12.89,22a1,1,0,0,0,.91-.59L16.65,15H19a3,3,0,0,0,3-3V5A3,3,0,0,0,19,2ZM15,13.79l-2.72,6.12a2.13,2.13,0,0,1-1.38-2.78l.53-1.43A2,2,0,0,0,9.56,13H5a1,1,0,0,1-.77-.36A1,1,0,0,1,4,11.82l1.27-7a1,1,0,0,1,1-.82H15ZM20,12a1,1,0,0,1-1,1H17V4h2a1,1,0,0,1,1,1Z", xmlns: "http://www.w3.org/2000/svg" }) }),
   /* @__PURE__ */ a("symbol", { id: "trees", viewBox: "0 0 24 24", children: /* @__PURE__ */ a("path", { fill: "currentColor", d: "M16.5,5A4.86,4.86,0,0,0,14,5.69,6,6,0,0,0,2.5,8v4a6,6,0,0,0,5,5.91V21a1,1,0,0,0,2,0V17.91a6.08,6.08,0,0,0,2.78-1.26A5,5,0,0,0,15.5,18.9V21a1,1,0,0,0,2,0V18.9a5,5,0,0,0,4-4.9V10A5,5,0,0,0,16.5,5Zm-5,5v4a5.23,5.23,0,0,0,.06.57,4,4,0,0,1-2.06,1.3V13a1,1,0,0,0-2,0v2.86A4,4,0,0,1,4.5,12V8a4,4,0,0,1,6.83-2.84,3.94,3.94,0,0,1,1.06,2A5,5,0,0,0,11.5,10Zm8,4a3,3,0,0,1-2,2.82V13a1,1,0,0,0-2,0v3.82a3,3,0,0,1-2-2.82V10a3,3,0,0,1,6,0Z", xmlns: "http://www.w3.org/2000/svg" }) }),
   /* @__PURE__ */ a("symbol", { id: "exit", viewBox: "0 0 24 24", children: /* @__PURE__ */ a("path", { fill: "currentColor", d: "M4,12a1,1,0,0,0,1,1h7.59l-2.3,2.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0l4-4a1,1,0,0,0,.21-.33,1,1,0,0,0,0-.76,1,1,0,0,0-.21-.33l-4-4a1,1,0,1,0-1.42,1.42L12.59,11H5A1,1,0,0,0,4,12ZM17,2H7A3,3,0,0,0,4,5V8A1,1,0,0,0,6,8V5A1,1,0,0,1,7,4H17a1,1,0,0,1,1,1V19a1,1,0,0,1-1,1H7a1,1,0,0,1-1-1V16a1,1,0,0,0-2,0v3a3,3,0,0,0,3,3H17a3,3,0,0,0,3-3V5A3,3,0,0,0,17,2Z", xmlns: "http://www.w3.org/2000/svg" }) }),
-  /* @__PURE__ */ a("symbol", { id: "ban", viewBox: "0 0 24 24", children: /* @__PURE__ */ a("path", { fill: "currentColor", d: "M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,0,1-8-8A7.92,7.92,0,0,1,5.69,7.1L16.9,18.31A7.92,7.92,0,0,1,12,20Zm6.31-3.1L7.1,5.69A7.92,7.92,0,0,1,12,4a8,8,0,0,1,8,8A7.92,7.92,0,0,1,18.31,16.9Z", xmlns: "http://www.w3.org/2000/svg" }) })
-] }), m = e(A), v = C(
+  /* @__PURE__ */ a("symbol", { id: "ban", viewBox: "0 0 24 24", children: /* @__PURE__ */ a("path", { fill: "currentColor", d: "M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,0,1-8-8A7.92,7.92,0,0,1,5.69,7.1L16.9,18.31A7.92,7.92,0,0,1,12,20Zm6.31-3.1L7.1,5.69A7.92,7.92,0,0,1,12,4a8,8,0,0,1,8,8A7.92,7.92,0,0,1,18.31,16.9Z", xmlns: "http://www.w3.org/2000/svg" }) }),
+  /* @__PURE__ */ a("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", id: "angle-double-left", children: /* @__PURE__ */ a("path", { fill: "currentColor", d: "M11.46,8.29a1,1,0,0,0-1.42,0l-3,3a1,1,0,0,0,0,1.42l3,3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42L9.16,12l2.3-2.29A1,1,0,0,0,11.46,8.29ZM14.66,12,17,9.71a1,1,0,0,0-1.42-1.42l-3,3a1,1,0,0,0,0,1.42l3,3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42Z" }) }),
+  /* @__PURE__ */ a("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", id: "angle-double-right", children: /* @__PURE__ */ a("path", { fill: "currentColor", d: "M8.46,8.29A1,1,0,1,0,7,9.71L9.34,12,7,14.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0l3-3a1,1,0,0,0,0-1.42Zm8.5,3-3-3a1,1,0,0,0-1.42,1.42L14.84,12l-2.3,2.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0l3-3A1,1,0,0,0,17,11.29Z" }) }),
+  /* @__PURE__ */ a("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", id: "angle-right", children: /* @__PURE__ */ a("path", { fill: "currentColor", d: "M14.83,11.29,10.59,7.05a1,1,0,0,0-1.42,0,1,1,0,0,0,0,1.41L12.71,12,9.17,15.54a1,1,0,0,0,0,1.41,1,1,0,0,0,.71.29,1,1,0,0,0,.71-.29l4.24-4.24A1,1,0,0,0,14.83,11.29Z" }) }),
+  /* @__PURE__ */ a("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", id: "angle-left", children: /* @__PURE__ */ a("path", { fill: "currentColor", d: "M11.29,12l3.54-3.54a1,1,0,0,0,0-1.41,1,1,0,0,0-1.42,0L9.17,11.29a1,1,0,0,0,0,1.42L13.41,17a1,1,0,0,0,.71.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41Z" }) })
+] }), A = e(n), v = C(
   ({ "aria-label": l, className: w, name: r, size: h = "md", ...i }, t) => /* @__PURE__ */ a(
     "svg",
     {
       "aria-hidden": l ? "false" : "true",
       "aria-label": l,
-      className: m("root", `size-${h}`, `name-${r}`, w),
+      className: A("root", `size-${h}`, `name-${r}`, w),
       ref: t,
       role: l ? "img" : void 0,
       ...i,

package/dist/Link.js

@@ -1,7 +1,7 @@
 "use client";
-import { jsxs as m, jsx as i } from "react/jsx-runtime";
+import { jsxs as p, jsx as i } from "react/jsx-runtime";
 import o from "react";
-import { Icon as p } from "./Icon.js";
+import { Icon as u } from "./Icon.js";
 import { c as N } from "./index-PAaZGbyz.js";
 import { f as w } from "./forwardRefWithAs-8eP3ZN15.js";
 const E = "_root_gizuv_2", k = "_isExternal_gizuv_14", M = "_isMultiline_gizuv_131", W = {
@@ -16,46 +16,47 @@ const E = "_root_gizuv_2", k = "_isExternal_gizuv_14", M = "_isMultiline_gizuv_1
   "size-lg": "_size-lg_gizuv_115",
   isMultiline: M,
   "icon-disabled": "_icon-disabled_gizuv_134"
-}, r = N(W), l = ({ children: e, isExternal: s }) => /* @__PURE__ */ m("span", { className: r("wui-text"), children: [
+}, r = N(W), _ = ({ children: e, isExternal: s }) => /* @__PURE__ */ p("span", { className: r("wui-text"), children: [
   e,
-  s ? /* @__PURE__ */ i(p, { name: "external-link-alt", size: "sm" }) : null
-] }), _ = (e, s) => typeof e == "string" ? /* @__PURE__ */ i(l, { isExternal: s, children: e }) : o.isValidElement(e) && (e.type === "span" || e.props.as === "span" || // FormattedMessage from react-intl has a span tag by default
-e.props.tagName === "span" || e.props["data-wui-link"] === !0 || typeof e.props.children == "string") ? s ? /* @__PURE__ */ i(l, { isExternal: s, children: e }) : (
+  s ? /* @__PURE__ */ i(u, { name: "external-link-alt", size: "sm" }) : null
+] }), m = (e, s) => typeof e == "string" ? /* @__PURE__ */ i(_, { isExternal: s, children: e }) : o.isValidElement(e) && (e.type === "span" || e.props.as === "span" || // FormattedMessage from react-intl has a span tag by default
+e.props.tagName === "span" || e.props["data-wui-link"] === !0 || typeof e.props.children == "string") ? s ? /* @__PURE__ */ i(_, { isExternal: s, children: e }) : (
   // If it is not external, we just need to add wui-text className to the child as we don't need to wrap it to display the icon
   o.cloneElement(e, {
     className: r("wui-text", e.props.className)
   })
 ) : e, C = w((e, s) => {
   const {
-    as: u,
+    as: c,
     children: t,
-    className: c,
+    className: z,
     disabled: n,
     isExternal: a,
-    multiline: z,
-    size: d = "md",
-    target: g,
+    multiline: d,
+    size: g = "md",
+    target: l,
     variant: v = "primary",
     ...f
-  } = e, x = u || "a", y = typeof t == "string" ? _(t, a) : o.Children.map(t, (b) => _(b, a));
-  return /* @__PURE__ */ m(
+  } = e, x = c || "a", y = typeof t == "string" ? m(t, a) : o.Children.map(t, (b) => m(b, a));
+  return /* @__PURE__ */ p(
     x,
     {
       "aria-disabled": n,
       className: r(
         "root",
         `variant-${v}`,
-        `size-${d}`,
+        `size-${g}`,
         a && "isExternal",
-        z && "isMultiline",
-        c
+        d && "isMultiline",
+        z
       ),
       ref: s,
-      rel: g === "_blank" ? "noopener noreferrer" : void 0,
+      rel: l === "_blank" ? "noopener noreferrer" : void 0,
       tabIndex: n ? -1 : 0,
+      target: l,
       ...f,
       children: [
-        n ? /* @__PURE__ */ i(p, { className: r("icon-disabled"), name: "ban", size: "md" }) : null,
+        n ? /* @__PURE__ */ i(u, { className: r("icon-disabled"), name: "ban", size: "md" }) : null,
         y
       ]
     }

package/dist/Pagination.css

@@ -1 +1 @@
-@layer components{._list_1sith_2{list-style-type:none;padding:0;margin:0;display:flex;gap:var(--components-dimensions-pagination-start-padding-inline-leading-lg);align-items:center;flex-wrap:wrap}._item_1sith_11{color:var(--color, var(--components-colors-pagination-color-icon-unchecked-pressed));background-color:var(--backgroundColor, var(--components-colors-pagination-color-background-unchecked-default));font-size:var(--components-dimensions-pagination-start-padding-inline-trailing-md);font-weight:var(--font-weight-semi-bold);height:var(--components-dimensions-pagination-size-max-height-md);width:var(--components-dimensions-pagination-size-max-height-md);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none}._item_1sith_11:not([disabled]):hover,._item_1sith_11:focus-visible{--backgroundColor: var(--color-background-neutral-subtlest)}._item_1sith_11:focus-visible{--color: var(--components-colors-pagination-color-icon-unchecked-pressed);outline:none!important}._disabled-arrow_1sith_32{cursor:not-allowed;--color: var(--color-icon-warm-tertiary);--backgroundColor: var(--color-background-warm-stronger)}._page_1sith_37[aria-current=true]{--backgroundColor: var(--components-colors-pagination-color-icon-unchecked-pressed);--color: var(--components-colors-pagination-color-background-unchecked-default)}._page_1sith_37[aria-current=true]:hover,._page_1sith_37[aria-current=true]:focus-visible{--backgroundColor: var(--components-colors-pagination-color-icon-unchecked-pressed)}._dots_1sith_44{display:flex;justify-content:center;align-items:center}}
+@layer components{._list_uyk8e_3{list-style-type:none;padding:0;margin:0;display:flex;gap:var(--components-dimensions-pagination-gap-pages);align-items:center;flex-wrap:wrap}._item_uyk8e_13{color:var(--color, var(--components-colors-pagination-color-icon-unchecked-pressed));background-color:var(--backgroundColor, var(--components-colors-pagination-color-background-unchecked-default));font-size:var(--components-dimensions-pagination-start-padding-inline-trailing-md);font-weight:var(--font-weight-semi-bold);border-radius:var(--components-dimensions-pagination-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;border-color:var(--borderColor, var(--components-colors-pagination-color-border-unchecked-default));border-width:var(--borderWidth, var(--components-dimensions-pagination-border-width-unchecked));border-style:solid;box-shadow:var(--elevation-10)}._item_uyk8e_13:not([disabled]):not([aria-current=true]):hover,._item_uyk8e_13:not([disabled]):not([aria-current=true]):focus-visible{background-color:var(--components-colors-pagination-color-background-unchecked-hover);border-color:var(--components-colors-pagination-color-border-unchecked-hover);box-shadow:var(--elevation-20);outline:none!important}._item_uyk8e_13:not([disabled]):not([aria-current=true]):active{background-color:var(--components-colors-pagination-color-background-unchecked-pressed);border-color:var(--components-colors-pagination-color-border-unchecked-pressed)}._item_uyk8e_13._disabled-arrow_uyk8e_43,._item_uyk8e_13[disabled]{cursor:not-allowed;color:var(--components-colors-pagination-color-text-unchecked-disabled);background:repeating-linear-gradient(-45deg,var(--color-neutral-30),var(--color-neutral-30) 1.75px,var(--color-background-warm-stronger) 3.75px,var(--color-background-warm-stronger) 3.25px) padding-box;box-shadow:none;border:0}._page_uyk8e_52[aria-current=true]{background-color:var(--components-colors-pagination-color-background-checked-default);border-color:var(--components-colors-pagination-color-border-checked-default);border-width:var(--components-dimensions-pagination-border-width-checked);color:var(--components-colors-pagination-color-text-checked-default)}._page_uyk8e_52[aria-current=true]:hover,._page_uyk8e_52[aria-current=true]:focus-visible{background-color:var(--components-colors-pagination-color-background-checked-hover);border-color:var(--components-colors-pagination-color-border-checked-hover);color:var(--components-colors-pagination-color-text-checked-hover);outline:none!important}._page_uyk8e_52[aria-current=true]:active{background-color:var(--components-colors-pagination-color-background-checked-pressed);border-color:var(--components-colors-pagination-color-border-checked-pressed);color:var(--components-colors-pagination-color-text-checked-pressed)}._with-text-left_uyk8e_72,._with-text-right_uyk8e_72{gap:var(--components-dimensions-pagination-gap-content)}._size-lg_uyk8e_75{font-size:var(--font-size-md);height:var(--components-dimensions-pagination-size-max-height-lg);width:var(--components-dimensions-pagination-size-min-height-lg)}._size-lg_uyk8e_75._with-text-right_uyk8e_72{padding-left:var(--components-dimensions-pagination-start-padding-inline-leading-lg);padding-right:var(--components-dimensions-pagination-end-padding-inline-leading-lg);width:auto}._size-lg_uyk8e_75._with-text-left_uyk8e_72{padding-left:var(--components-dimensions-pagination-start-padding-inline-trailing-lg);padding-right:var(--components-dimensions-pagination-end-padding-inline-trailing-lg);width:auto}._size-md_uyk8e_90{font-size:var(--font-size-sm);height:var(--components-dimensions-pagination-size-max-height-md);width:var(--components-dimensions-pagination-size-min-height-md)}._size-md_uyk8e_90._with-text-right_uyk8e_72{padding-left:var(--components-dimensions-pagination-start-padding-inline-leading-md);padding-right:var(--components-dimensions-pagination-end-padding-inline-leading-md);width:auto}._size-md_uyk8e_90._with-text-left_uyk8e_72{padding-left:var(--components-dimensions-pagination-start-padding-inline-trailing-md);padding-right:var(--components-dimensions-pagination-end-padding-inline-trailing-md);width:auto}}

package/dist/Pagination.js

@@ -1,105 +1,184 @@
 "use client";
-import { jsx as n, jsxs as y } from "react/jsx-runtime";
-import { useMemo as z, forwardRef as B, useRef as _, useCallback as N } from "react";
-import { Icon as x } from "./Icon.js";
-import { c as D } from "./index-PAaZGbyz.js";
-const G = "_list_1sith_2", q = "_item_1sith_11", F = "_page_1sith_37", J = "_dots_1sith_44", K = {
-  list: G,
-  item: q,
-  "disabled-arrow": "_disabled-arrow_1sith_32",
-  page: F,
-  dots: J
-}, c = 5, L = 3;
-function O({ page: i, pageCount: t, rangeDisplay: a }) {
-  return z(() => {
-    if (t <= a || t <= c + 1)
-      return h(t, (s) => s + 1);
-    const r = Q(i, t), d = r === "before" ? h(c, (s) => s + 1) : [1], l = r === "center" ? h(L, (s) => s + i - 1) : [], o = r === "after" ? h(c, (s) => s + t - c + 1) : [t];
-    return S([d, l, o], "-");
-  }, [i, t, a]);
+import { jsx as s, jsxs as N } from "react/jsx-runtime";
+import { useMemo as Z, forwardRef as p, useRef as M, useCallback as R } from "react";
+import { Icon as A } from "./Icon.js";
+import { c as H } from "./index-PAaZGbyz.js";
+const I = "_list_uyk8e_3", C = "_item_uyk8e_13", n = "_page_uyk8e_52", a = {
+  list: I,
+  item: C,
+  "disabled-arrow": "_disabled-arrow_uyk8e_43",
+  page: n,
+  "with-text-left": "_with-text-left_uyk8e_72",
+  "with-text-right": "_with-text-right_uyk8e_72",
+  "size-lg": "_size-lg_uyk8e_75",
+  "size-md": "_size-md_uyk8e_90"
+}, h = 5, x = 3;
+function v({ page: c, pageCount: e, rangeDisplay: _ }) {
+  return Z(() => {
+    if (e <= _ || e <= h + 1)
+      return B(e, (b) => b + 1);
+    const u = g(c, e), o = u === "before" ? B(h, (b) => b + 1) : [1], r = u === "center" ? B(x, (b) => b + c - 1) : [], w = u === "after" ? B(h, (b) => b + e - h + 1) : [e];
+    return T([o, r, w], "-");
+  }, [c, e, _]);
 }
-function h(i, t) {
-  return Array.from({ length: i }, (a, r) => t(r));
+function B(c, e) {
+  return Array.from({ length: c }, (_, u) => e(u));
 }
-function Q(i, t) {
-  return i < c ? "before" : i >= c && i <= t - c + 1 ? "center" : i > t - c + 1 ? "after" : "center";
+function g(c, e) {
+  return c < h ? "before" : c >= h && c <= e - h + 1 ? "center" : c > e - h + 1 ? "after" : "center";
 }
-function S(i, t) {
-  return i.reduce((a, r, d) => {
-    const l = [];
-    return l.push(...a), l.push(...r), r.length && d < i.length - 1 && l.push(t), l;
+function T(c, e) {
+  return c.reduce((_, u, o) => {
+    const r = [];
+    return r.push(..._), r.push(...u), u.length && o < c.length - 1 && r.push(e), r;
   }, []);
 }
-const f = D(K), Y = B(
+const m = H(a), sl = p(
   ({
-    "aria-label": i,
-    buttonNextProps: t,
-    buttonPrevProps: a,
+    "aria-label": c,
+    buttonFirstProps: e,
+    buttonLastProps: _,
+    buttonNextProps: u,
+    buttonPrevProps: o,
     dataTestId: r,
-    getHref: d,
-    listProps: l,
-    onChange: o,
-    page: s,
-    pageCount: m,
-    rangeDisplay: v = 5,
-    ...w
-  }, P) => {
-    const R = O({ page: s, pageCount: m, rangeDisplay: v }), $ = _(null), k = _(null), u = s === 1, b = s === m, A = N(() => {
-      if (u) return;
-      const e = Math.max(s - 1, 1);
-      o(e);
-    }, [u, s, o]), E = N(() => {
-      if (b) return;
-      const e = Math.min(s + 1, m);
-      o(e);
-    }, [b, s, m, o]);
-    return /* @__PURE__ */ n("nav", { "aria-label": i ?? "Pagination", "data-testid": r, ref: P, ...w, children: /* @__PURE__ */ y("ol", { className: f("list"), ...l, children: [
-      /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
+    getHref: w,
+    listProps: b,
+    navigationTexts: l,
+    onChange: d,
+    page: f,
+    pageCount: P,
+    rangeDisplay: G = 5,
+    showEdgeControls: D = !1,
+    size: i = "lg",
+    ...q
+  }, J) => {
+    const K = v({ page: f, pageCount: P, rangeDisplay: G }), O = M(null), Q = M(null), k = f === 1, y = f === P, $ = f === 1, z = f === P, j = (l == null ? void 0 : l.firstPage) || "First Page", E = (l == null ? void 0 : l.lastPage) || "Last Page", F = (l == null ? void 0 : l.nextPage) || "Next Page", L = (l == null ? void 0 : l.previousPage) || "Previous Page", S = R(() => {
+      $ || d(1);
+    }, [$, d]), U = R(() => {
+      z || d(P);
+    }, [z, P, d]), V = R(() => {
+      if (k) return;
+      const t = Math.max(f - 1, 1);
+      d(t);
+    }, [k, f, d]), W = R(() => {
+      if (y) return;
+      const t = Math.min(f + 1, P);
+      d(t);
+    }, [y, f, P, d]);
+    return /* @__PURE__ */ s("nav", { "aria-label": c ?? "Pagination", "data-testid": r, ref: J, ...q, children: /* @__PURE__ */ N("ol", { className: m("list"), ...b, children: [
+      D ? /* @__PURE__ */ s("li", { children: /* @__PURE__ */ N(
         "button",
         {
-          "aria-label": "Previous Page",
-          className: f("item", u && "disabled-arrow"),
+          "aria-label": j,
+          className: m(
+            "item",
+            `size-${i}`,
+            (l == null ? void 0 : l.firstPage) && "with-text-right",
+            $ && "disabled-arrow"
+          ),
+          "data-testid": r ? `${r}-arrow-first` : void 0,
+          disabled: $,
+          onClick: S,
+          type: "button",
+          ...e,
+          children: [
+            /* @__PURE__ */ s(A, { className: m("icon"), name: "angle-double-left", size: "lg" }),
+            l != null && l.firstPage ? j : null
+          ]
+        }
+      ) }) : null,
+      /* @__PURE__ */ s("li", { children: /* @__PURE__ */ N(
+        "button",
+        {
+          "aria-label": L,
+          className: m(
+            "item",
+            `size-${i}`,
+            (l == null ? void 0 : l.previousPage) && "with-text-right",
+            k && "disabled-arrow"
+          ),
           "data-testid": r ? `${r}-arrow-prev` : void 0,
-          disabled: u,
-          onClick: A,
-          ref: $,
+          disabled: k,
+          onClick: V,
+          ref: O,
           type: "button",
-          ...a,
-          children: /* @__PURE__ */ n(x, { name: "angle-left-b", size: "sm" })
+          ...o,
+          children: [
+            /* @__PURE__ */ s(A, { className: m("icon"), name: "angle-left", size: "lg" }),
+            l != null && l.previousPage ? L : null
+          ]
         }
       ) }),
-      R.map(
-        (e, j) => e === "-" ? /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n("span", { className: f("dots"), children: "..." }) }, `${j}-`) : /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
+      K.map(
+        (t, X) => t === "-" ? /* @__PURE__ */ s("li", { children: /* @__PURE__ */ s(
+          "button",
+          {
+            "aria-label": "Collapsed Pages",
+            className: m("item", `size-${i}`),
+            type: "button",
+            ...u,
+            children: "..."
+          }
+        ) }, `${X}-`) : /* @__PURE__ */ s("li", { children: /* @__PURE__ */ s(
           "a",
           {
-            "aria-current": e === s,
-            className: f("item", "page"),
-            "data-testid": r ? `${r}-${e}` : void 0,
-            href: d == null ? void 0 : d(e),
-            onClick: (M) => {
-              o && (M.preventDefault(), o(e));
+            "aria-current": t === f,
+            className: m("item", "page", `size-${i}`),
+            "data-testid": r ? `${r}-${t}` : void 0,
+            href: w == null ? void 0 : w(t),
+            onClick: (Y) => {
+              d && (Y.preventDefault(), d(t));
             },
-            children: e
+            children: t
           }
-        ) }, e)
+        ) }, t)
       ),
-      /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
+      /* @__PURE__ */ s("li", { children: /* @__PURE__ */ N(
         "button",
         {
-          "aria-label": "Next Page",
-          className: f("item", b && "disabled-arrow"),
+          "aria-label": F,
+          className: m(
+            "item",
+            `size-${i}`,
+            (l == null ? void 0 : l.nextPage) && "with-text-left",
+            y && "disabled-arrow"
+          ),
           "data-testid": r ? `${r}-arrow-next` : void 0,
-          disabled: b,
-          onClick: E,
-          ref: k,
+          disabled: y,
+          onClick: W,
+          ref: Q,
+          type: "button",
+          ...u,
+          children: [
+            l != null && l.nextPage ? F : null,
+            /* @__PURE__ */ s(A, { name: "angle-right", size: "lg" })
+          ]
+        }
+      ) }),
+      D ? /* @__PURE__ */ s("li", { children: /* @__PURE__ */ N(
+        "button",
+        {
+          "aria-label": E,
+          className: m(
+            "item",
+            `size-${i}`,
+            (l == null ? void 0 : l.lastPage) && "with-text-left",
+            z && "disabled-arrow"
+          ),
+          "data-testid": r ? `${r}-arrow-last` : void 0,
+          disabled: z,
+          onClick: U,
           type: "button",
-          ...t,
-          children: /* @__PURE__ */ n(x, { name: "angle-right-b", size: "sm" })
+          ..._,
+          children: [
+            l != null && l.lastPage ? E : null,
+            /* @__PURE__ */ s(A, { className: m("icon"), name: "angle-double-right", size: "lg" })
+          ]
         }
-      ) })
+      ) }) : null
     ] }) });
   }
 );
 export {
-  Y as Pagination
+  sl as Pagination
 };

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}}