@orioncactuscorp/ui 1.3.0 → 1.4.1

package/README.md

@@ -61,7 +61,7 @@ export default function Example() {
 
 - `SectionHeader`
 - `Button`, `TextButton`, `IconButton`, `BackgroundIconButton`
-- `ActionArea`, `ActionAreaButton`
+- `ActionArea`, `ActionAreaButton`, `ActionAreaLayout`
 - `Badge`, `Background`, `Divider`, `Loading`, `Cell`, `CellItem`
 - `CheckMark`
 - `Field`, `FieldLabel`, `FieldControl`, `FieldMessage`, `FieldErrorMessage` (`vertical`/`horizontal` orientation)

package/dist/components/ActionArea/ActionArea.css

@@ -1 +1 @@
-.oc-ActionArea-module__actionArea__jnxep{position:relative;isolation:isolate;display:flex;flex-direction:column;inline-size:100%;padding:var(--oc-action-area-padding-y) var(--oc-action-area-padding-x) var(--oc-action-area-padding-bottom);--oc-action-area-padding-x: var(--oc-space-section-padding-viewport-x);--oc-action-area-padding-y: var(--oc-space-section-padding-viewport-y);--oc-action-area-padding-bottom: var(--oc-action-area-padding-y);--oc-action-area-gap: var(--oc-space-item-gap-small);--oc-action-area-actions-gap: var(--oc-space-item-gap-small);--oc-action-area-background-color: var(--oc-color-theme-background-elevated-normal)}.oc-ActionArea-module__actionArea__jnxep:before{position:absolute;inset:0;z-index:0;background:linear-gradient(to bottom,transparent,var(--oc-action-area-background-color) 45%);opacity:0;content:"";pointer-events:none}.oc-ActionArea-module__actionArea__jnxep>*{position:relative;z-index:1}.oc-ActionArea-module__actionArea__jnxep[data-oc-background=true]:before{opacity:1}.oc-ActionArea-module__actionArea__jnxep[data-oc-has-extra=true]{border-block-start:1px solid var(--oc-color-theme-line-normal-neutral);background-color:var(--oc-action-area-background-color)}.oc-ActionArea-module__actionArea__jnxep [data-oc-part=extra-slot]{display:flex;flex-direction:column;align-items:center;margin-block-end:calc(var(--oc-action-area-gap) + var(--oc-action-area-padding-y))}.oc-ActionArea-module__actionArea__jnxep [data-oc-part=caption]{font-size:calc(var(--oc-typo-size-label2) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-label2) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-label2);font-weight:var(--oc-typo-weight-label2-normal);margin:0 0 var(--oc-space-item-gap-medium);color:var(--oc-color-theme-label-alternative);text-align:center}.oc-ActionArea-module__actionArea__jnxep [data-oc-part=actions]{display:flex;gap:var(--oc-action-area-actions-gap);min-width:0}.oc-ActionArea-module__actionArea__jnxep[data-oc-variant=strong] [data-oc-part=actions],.oc-ActionArea-module__actionArea__jnxep[data-oc-variant=cancel] [data-oc-part=actions]{flex-direction:column}.oc-ActionArea-module__actionArea__jnxep[data-oc-variant=neutral] [data-oc-part=actions]{flex-direction:row}.oc-ActionArea-module__actionArea__jnxep[data-oc-variant=neutral] [data-oc-part=actions]>[data-oc-action-area-button=true]{flex:1 1 0}.oc-ActionArea-module__actionArea__jnxep[data-oc-variant=neutral] [data-oc-part=actions]>[data-oc-action-area-button-priority=sub]{flex:0 0 auto}.oc-ActionArea-module__actionArea__jnxep[data-oc-variant=compact] [data-oc-part=actions]{flex-direction:row;justify-content:flex-end}.oc-ActionArea-module__actionArea__jnxep[data-oc-variant=compact] [data-oc-part=actions]:has(>[data-oc-action-area-button-priority=sub][data-oc-icon-only=true]){justify-content:space-between;inline-size:100%}.oc-ActionArea-module__actionArea__jnxep[data-oc-variant=compact] [data-oc-part=actions]>[data-oc-action-area-button-priority=sub]{flex:0 0 auto}.oc-ActionArea-module__actionArea__jnxep[data-oc-variant=compact] [data-oc-part=compact-row]{display:flex;align-items:center;justify-content:space-between;gap:var(--oc-space-item-gap-medium);min-width:0}.oc-ActionArea-module__actionArea__jnxep[data-oc-variant=compact] [data-oc-part=compact-slot]{display:flex;align-items:center;flex:1 1 auto;min-width:0}.oc-ActionArea-module__actionButton__fKHJQ{min-width:0}.oc-ActionArea-module__actionButton__fKHJQ[data-oc-component=text-button]{flex:0 0 auto;inline-size:fit-content;align-self:center}
+.oc-ActionArea-module__actionArea__jnxep{position:relative;isolation:isolate;display:flex;flex-direction:column;inline-size:100%;padding:var(--oc-action-area-padding-y) var(--oc-action-area-padding-x) var(--oc-action-area-padding-bottom);--oc-action-area-padding-x: var(--oc-space-section-padding-viewport-x);--oc-action-area-padding-y: var(--oc-space-section-padding-viewport-y);--oc-action-area-padding-bottom: var(--oc-action-area-padding-y);--oc-action-area-gap: var(--oc-space-item-gap-small);--oc-action-area-actions-gap: var(--oc-space-item-gap-small);--oc-action-area-container-max-width: var(--oc-atomic-width-content);--oc-action-area-background-color: var(--oc-color-theme-background-elevated-normal)}.oc-ActionArea-module__actionArea__jnxep:before{position:absolute;inset:0;z-index:0;background:linear-gradient(to bottom,transparent,var(--oc-action-area-background-color) 45%);opacity:0;content:"";pointer-events:none}.oc-ActionArea-module__actionArea__jnxep>*{position:relative;z-index:1}.oc-ActionArea-module__actionArea__jnxep[data-oc-background=true]:before{opacity:1}.oc-ActionArea-module__actionArea__jnxep[data-oc-has-extra=true]{border-block-start:1px solid var(--oc-color-theme-line-normal-neutral);background-color:var(--oc-action-area-background-color)}.oc-ActionArea-module__actionArea__jnxep [data-oc-part=extra-slot]{display:flex;flex-direction:column;align-items:center;margin-block-end:calc(var(--oc-action-area-gap) + var(--oc-action-area-padding-y))}.oc-ActionArea-module__actionArea__jnxep [data-oc-part=caption]{font-size:calc(var(--oc-typo-size-label2) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-label2) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-label2);font-weight:var(--oc-typo-weight-label2-normal);margin:0 0 var(--oc-space-item-gap-medium);color:var(--oc-color-theme-label-alternative);text-align:center}.oc-ActionArea-module__actionArea__jnxep [data-oc-part=actions]{display:flex;gap:var(--oc-action-area-actions-gap);min-width:0}@media screen and (min-width:769px){.oc-ActionArea-module__actionArea__jnxep [data-oc-part=actions]{max-inline-size:var(--oc-action-area-container-max-width)}.oc-ActionArea-module__actionArea__jnxep:not([data-oc-variant=compact]) [data-oc-part=actions]{inline-size:100%;margin-inline:auto}}.oc-ActionArea-module__actionArea__jnxep[data-oc-variant=strong] [data-oc-part=actions],.oc-ActionArea-module__actionArea__jnxep[data-oc-variant=cancel] [data-oc-part=actions]{flex-direction:column}.oc-ActionArea-module__actionArea__jnxep[data-oc-variant=neutral] [data-oc-part=actions]{flex-direction:row}.oc-ActionArea-module__actionArea__jnxep[data-oc-variant=neutral] [data-oc-part=actions]>[data-oc-action-area-button=true]{flex:1 1 0}.oc-ActionArea-module__actionArea__jnxep[data-oc-variant=neutral] [data-oc-part=actions]>[data-oc-action-area-button-priority=sub]{flex:0 0 auto}.oc-ActionArea-module__actionArea__jnxep[data-oc-variant=compact] [data-oc-part=actions]{flex-direction:row;justify-content:flex-end}.oc-ActionArea-module__actionArea__jnxep[data-oc-variant=compact] [data-oc-part=actions]:has(>[data-oc-action-area-button-priority=sub][data-oc-icon-only=true]){justify-content:space-between;inline-size:100%}.oc-ActionArea-module__actionArea__jnxep[data-oc-variant=compact] [data-oc-part=actions]>[data-oc-action-area-button-priority=sub]{flex:0 0 auto}.oc-ActionArea-module__actionArea__jnxep[data-oc-variant=compact] [data-oc-part=compact-row]{display:flex;align-items:center;justify-content:space-between;gap:var(--oc-space-item-gap-medium);min-width:0}.oc-ActionArea-module__actionArea__jnxep[data-oc-variant=compact] [data-oc-part=compact-slot]{display:flex;align-items:center;flex:1 1 auto;min-width:0}.oc-ActionArea-module__actionButton__fKHJQ{min-width:0}.oc-ActionArea-module__actionButton__fKHJQ[data-oc-component=text-button]{flex:0 0 auto;inline-size:fit-content;align-self:center}

package/dist/components/ActionArea/ActionAreaLayout.css

@@ -0,0 +1 @@
+.oc-ActionAreaLayout-module__layout__UBL8D{--oc-action-area-layout-block-size: 100dvh;--oc-action-area-layout-gradient-overlap: 100%;--oc-action-area-layout-gradient-size: 50%;display:grid;grid-template-rows:minmax(0,1fr) auto;min-block-size:0;block-size:var(--oc-action-area-layout-block-size)}.oc-ActionAreaLayout-module__body__Q3-3E{min-block-size:0;overflow-y:auto;overscroll-behavior-y:contain}.oc-ActionAreaLayout-module__footer__-ewkN{--_-action-area-layout-footer-background-opacity: 0;--_-action-area-layout-footer-background-scale-y: 0;--oc-action-area-layout-background-color: var(--oc-color-theme-background-elevated-normal);position:relative;z-index:1;min-block-size:0}.oc-ActionAreaLayout-module__footer__-ewkN:before{position:absolute;inset-block:calc(-1 * var(--oc-action-area-layout-gradient-overlap)) 0;inset-inline:0;z-index:0;background-color:var(--oc-action-area-layout-background-color);-webkit-mask-image:linear-gradient(to bottom,transparent 0,black var(--oc-action-area-layout-gradient-size));mask-image:linear-gradient(to bottom,transparent 0,black var(--oc-action-area-layout-gradient-size));opacity:var(--_-action-area-layout-footer-background-opacity);content:"";pointer-events:none;transform:scaleY(var(--_-action-area-layout-footer-background-scale-y));transform-origin:bottom center;transition:opacity calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1.5) var(--oc-motion-timing-feedback),transform calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1.5) var(--oc-motion-timing-feedback)}@media(prefers-reduced-motion:reduce){.oc-ActionAreaLayout-module__footer__-ewkN:before{transition-property:opacity;transition-duration:calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor-reduced) * var(--oc-motion-pace-normal) * 1.5);transition-timing-function:var(--oc-motion-timing-feedback);transform:none}}.oc-ActionAreaLayout-module__footer__-ewkN:has(>[data-oc-component=action-area][data-oc-background=true]):before{--_-action-area-layout-footer-background-opacity: 1;--_-action-area-layout-footer-background-scale-y: 1}.oc-ActionAreaLayout-module__footer__-ewkN>*{position:relative;z-index:1}.oc-ActionAreaLayout-module__footer__-ewkN>[data-oc-component=action-area]:before{content:none}

package/dist/components/ActionArea/ActionAreaLayout.js

@@ -0,0 +1,145 @@
+'use client';
+import { jsx as l } from "react/jsx-runtime";
+import { useState as b, useCallback as S, useEffect as h, useMemo as N, useContext as O, createContext as C } from "react";
+import { ActionArea as x } from "./ActionArea.js";
+import d from "./ActionAreaLayout.module.scss.js";
+const p = {
+  canScroll: !1,
+  scrolledToBottom: !0
+}, L = 1, v = C(null);
+function f(...o) {
+  return o.filter(Boolean).join(" ");
+}
+function R(o, t) {
+  typeof o == "function" ? o(t) : o && (o.current = t);
+}
+function E(o) {
+  if (!o) return p;
+  const t = o.scrollHeight - o.scrollTop - o.clientHeight, r = o.scrollHeight - o.clientHeight > L;
+  return {
+    canScroll: r,
+    scrolledToBottom: !r || t <= L
+  };
+}
+function A(o) {
+  const t = O(v);
+  if (!t)
+    throw new Error(`${o} must be used within ActionAreaLayout.`);
+  return t;
+}
+function H(o, t) {
+  return o.canScroll === t.canScroll && o.scrolledToBottom === t.scrolledToBottom ? o : t;
+}
+function w({
+  children: o,
+  className: t = "",
+  ref: r,
+  ...n
+}) {
+  const [s, i] = b(p), u = N(
+    () => ({
+      ...s,
+      setScrollState: i
+    }),
+    [s]
+  );
+  return /* @__PURE__ */ l(v.Provider, { value: u, children: /* @__PURE__ */ l(
+    "div",
+    {
+      ...n,
+      ref: r,
+      className: f(d.layout, t),
+      "data-oc-component": "action-area-layout",
+      children: o
+    }
+  ) });
+}
+function _({
+  children: o,
+  className: t = "",
+  onScroll: r,
+  ref: n,
+  ...s
+}) {
+  const { setScrollState: i } = A(
+    "ActionAreaLayout.Body"
+  ), [u, g] = b(null), c = S(
+    (e) => {
+      i(
+        (a) => H(a, E(e))
+      );
+    },
+    [i]
+  ), B = S(
+    (e) => {
+      g(e), R(n, e), c(e);
+    },
+    [n, c]
+  );
+  return h(() => {
+    const e = u;
+    if (c(e), !e || typeof ResizeObserver > "u")
+      return;
+    const a = new ResizeObserver(() => c(e)), y = () => {
+      a.disconnect(), a.observe(e);
+      for (const T of Array.from(e.children))
+        a.observe(T);
+      c(e);
+    }, m = typeof MutationObserver > "u" ? void 0 : new MutationObserver(y);
+    return y(), m?.observe(e, { childList: !0 }), () => {
+      a.disconnect(), m?.disconnect();
+    };
+  }, [u, c]), /* @__PURE__ */ l(
+    "div",
+    {
+      ...s,
+      ref: B,
+      className: f(d.body, t),
+      "data-oc-part": "body",
+      "data-oc-component": "action-area-layout-body",
+      onScroll: (e) => {
+        c(e.currentTarget), r?.(e);
+      },
+      children: o
+    }
+  );
+}
+function F({
+  children: o,
+  className: t = "",
+  ref: r,
+  ...n
+}) {
+  return A("ActionAreaLayout.Footer"), /* @__PURE__ */ l(
+    "footer",
+    {
+      ...n,
+      ref: r,
+      className: f(d.footer, t),
+      "data-oc-part": "footer",
+      "data-oc-component": "action-area-layout-footer",
+      children: o
+    }
+  );
+}
+function j({
+  background: o = "auto",
+  ...t
+}) {
+  const { canScroll: r, scrolledToBottom: n } = A(
+    "ActionAreaLayout.ActionArea"
+  );
+  return /* @__PURE__ */ l(x, { ...t, background: o === "auto" ? r && !n : o });
+}
+const P = Object.assign(w, {
+  Body: _,
+  Footer: F,
+  ActionArea: j
+});
+export {
+  w as ActionAreaLayout,
+  j as ActionAreaLayoutActionArea,
+  _ as ActionAreaLayoutBody,
+  F as ActionAreaLayoutFooter,
+  P as default
+};

package/dist/components/ActionArea/ActionAreaLayout.module.scss.js

@@ -0,0 +1,11 @@
+import './ActionAreaLayout.css';const o = "oc-ActionAreaLayout-module__layout__UBL8D", t = "oc-ActionAreaLayout-module__body__Q3-3E", e = "oc-ActionAreaLayout-module__footer__-ewkN", _ = {
+  layout: o,
+  body: t,
+  footer: e
+};
+export {
+  t as body,
+  _ as default,
+  e as footer,
+  o as layout
+};

package/dist/components/ActionArea.js

@@ -1,6 +1,12 @@
-import { ActionArea as e, ActionAreaButton as r, default as A } from "./ActionArea/ActionArea.js";
+import { ActionArea as a, ActionAreaButton as A, default as e } from "./ActionArea/ActionArea.js";
+import { default as n, ActionAreaLayoutActionArea as c, ActionAreaLayoutBody as i, ActionAreaLayoutFooter as u, ActionAreaLayout as y } from "./ActionArea/ActionAreaLayout.js";
 export {
-  e as ActionArea,
-  r as ActionAreaButton,
-  A as default
+  a as ActionArea,
+  A as ActionAreaButton,
+  n as ActionAreaLayout,
+  c as ActionAreaLayoutActionArea,
+  i as ActionAreaLayoutBody,
+  u as ActionAreaLayoutFooter,
+  y as ActionAreaLayoutRoot,
+  e as default
 };

package/dist/components/BackgroundIconButton/BackgroundIconButton.js

@@ -1,61 +1,81 @@
-import { jsxs as k, jsx as t } from "react/jsx-runtime";
-import { isValidElement as y, cloneElement as B } from "react";
-import E from "../Interaction/Interaction.js";
-import n from "./BackgroundIconButton.module.scss.js";
-function h({
-  className: s = "",
-  type: d = "button",
-  children: o,
-  size: a = 24,
-  variant: r = "normal",
-  alternative: e = !1,
-  viewBox: c,
-  color: u,
-  style: b,
-  ref: m,
-  "aria-label": i,
-  "aria-labelledby": l,
-  "data-oc-component": p = "background-icon-button",
-  ...f
+'use client';
+import { jsx as o, jsxs as N, Fragment as E } from "react/jsx-runtime";
+import { isValidElement as I, cloneElement as P } from "react";
+import j from "../Interaction/Interaction.js";
+import y from "../internal/Pressable.js";
+import i from "./BackgroundIconButton.module.scss.js";
+function $({
+  className: k = "",
+  children: a,
+  href: l,
+  disabled: s = !1,
+  size: t = 24,
+  variant: n = "normal",
+  alternative: r = !1,
+  viewBox: d,
+  color: v,
+  style: h,
+  ref: u,
+  "aria-label": c,
+  "aria-labelledby": e,
+  "data-oc-component": m = "background-icon-button",
+  ...p
 }) {
-  process.env.NODE_ENV !== "production" && !i && !l && console.warn(
+  process.env.NODE_ENV !== "production" && !c && !e && console.warn(
     "[@orioncactuscorp/ui] BackgroundIconButton requires `aria-label` or `aria-labelledby` for screen reader accessibility."
   );
-  const g = y(o) ? B(o, {
-    size: a,
-    color: u,
-    ...c ? { viewBox: c } : {}
-  }) : o;
-  return /* @__PURE__ */ k(
-    "button",
+  const B = I(a) ? P(a, {
+    size: t,
+    color: v,
+    ...d ? { viewBox: d } : {}
+  }) : a, b = [
+    i.backgroundIconButton,
+    i[n],
+    r ? i.alternative : "",
+    k
+  ].filter(Boolean).join(" "), f = {
+    ...h,
+    "--oc-background-icon-button-size": `${t / 16}rem`
+  }, g = /* @__PURE__ */ N(E, { children: [
+    /* @__PURE__ */ o("span", { "data-oc-part": "icon", children: B }),
+    /* @__PURE__ */ o("span", { "data-oc-part": "background", "aria-hidden": "true", role: "presentation" }),
+    /* @__PURE__ */ o(j, { variant: "light" })
+  ] });
+  return l !== void 0 ? /* @__PURE__ */ o(
+    y,
     {
-      ...f,
-      ref: m,
-      type: d,
-      className: [
-        n.backgroundIconButton,
-        n[r],
-        e ? n.alternative : "",
-        s
-      ].filter(Boolean).join(" "),
-      "aria-label": i,
-      "aria-labelledby": l,
-      "data-oc-component": p,
-      "data-oc-variant": r,
-      "data-oc-size": String(a),
-      "data-oc-alternative": e ? "true" : void 0,
-      style: {
-        ...b,
-        "--oc-background-icon-button-size": `${a / 16}rem`
-      },
-      children: [
-        /* @__PURE__ */ t("span", { "data-oc-part": "icon", children: g }),
-        /* @__PURE__ */ t("span", { "data-oc-part": "background", "aria-hidden": "true", role: "presentation" }),
-        /* @__PURE__ */ t(E, { variant: "light" })
-      ]
+      ...p,
+      ref: u,
+      href: l,
+      disabled: s,
+      className: b,
+      "aria-label": c,
+      "aria-labelledby": e,
+      "data-oc-component": m,
+      "data-oc-variant": n,
+      "data-oc-size": String(t),
+      "data-oc-alternative": r ? "true" : void 0,
+      style: f,
+      children: g
+    }
+  ) : /* @__PURE__ */ o(
+    y,
+    {
+      ...p,
+      ref: u,
+      disabled: s,
+      className: b,
+      "aria-label": c,
+      "aria-labelledby": e,
+      "data-oc-component": m,
+      "data-oc-variant": n,
+      "data-oc-size": String(t),
+      "data-oc-alternative": r ? "true" : void 0,
+      style: f,
+      children: g
     }
   );
 }
 export {
-  h as default
+  $ as default
 };

package/dist/components/Button/Button.css

@@ -1 +1 @@
-.oc-Button-module__button__18Bed{position:relative;display:inline-flex;align-items:center;justify-content:center;appearance:none;border:none;background-color:transparent;padding:0;cursor:pointer;text-decoration:none;color:inherit;will-change:transform;transition:transform calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback)}@media(prefers-reduced-motion:reduce){.oc-Button-module__button__18Bed{transition:none;transform:none}}.oc-Button-module__button__18Bed{-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;font-size:calc(var(--oc-typo-size-body1) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-body1) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-body1);font-weight:var(--oc-typo-weight-body1-bold);display:inline-flex;position:relative;overflow:hidden;flex-direction:column;gap:0;box-shadow:inset 0 0 0 1px var(--oc-button-border-color, transparent);border-radius:var(--oc-button-radius);background-color:var(--oc-button-background-color);padding:var(--oc-button-padding-y) var(--oc-button-padding-x);min-block-size:calc(var(--oc-button-content-height) + var(--oc-button-padding-y) * 2);color:var(--oc-button-color);white-space:nowrap;transition:background-color calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback),box-shadow calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback),color calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback),transform calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback)}@media(prefers-reduced-motion:reduce){.oc-Button-module__button__18Bed{transition-property:background-color,box-shadow,color;transition-duration:calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor-reduced) * var(--oc-motion-pace-normal) * 1);transition-timing-function:var(--oc-motion-timing-feedback);transform:none}}.oc-Button-module__button__18Bed{--oc-button-padding-x: var(--oc-space-item-padding-medium);--oc-button-padding-y: var(--oc-space-item-padding-xsmall);--oc-button-content-height: var(--oc-typo-height-body1);--oc-button-control-size: calc(var(--oc-button-content-height) + (var(--oc-button-padding-y) * 2));--oc-button-icon-size: var(--oc-typo-height-label1);--oc-button-gap: var(--oc-space-item-gap-tiny);--oc-button-label-padding-x: 0;--oc-button-radius: var(--oc-atomic-radius-small);--oc-button-background-color: var(--oc-color-theme-label-strong);--oc-button-color: var(--oc-color-theme-background-normal-normal);--oc-interaction-color: var(--oc-color-theme-background-normal-normal);--oc-button-border-color: var(--oc-color-theme-static-transparent);--oc-button-loading-color: var(--oc-color-theme-label-alternative);--oc-interaction-z-index: 1}.oc-Button-module__button__18Bed>[data-oc-component=interaction]{border-radius:var(--oc-button-radius)}.oc-Button-module__button__18Bed>[data-oc-part=content]{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;gap:var(--oc-button-gap);block-size:var(--oc-button-content-height)}.oc-Button-module__button__18Bed>[data-oc-part=loading]{position:absolute;z-index:3;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;justify-content:center;inline-size:var(--oc-button-content-height);block-size:var(--oc-button-content-height);color:currentcolor;line-height:0;pointer-events:none}.oc-Button-module__button__18Bed>[data-oc-part=loading]>[data-oc-component=loading]{--oc-loading-size: 100%;--oc-loading-color: var(--oc-button-loading-color)}.oc-Button-module__button__18Bed [data-oc-part=label]{display:inline-flex;align-items:center;justify-content:center;padding-inline:var(--oc-button-label-padding-x, 0)}.oc-Button-module__button__18Bed [data-oc-part=leading-icon],.oc-Button-module__button__18Bed [data-oc-part=trailing-icon],.oc-Button-module__button__18Bed [data-oc-part=icon]{display:inline-flex;align-items:center;justify-content:center;inline-size:var(--oc-button-icon-size);block-size:var(--oc-button-icon-size);color:currentcolor}.oc-Button-module__button__18Bed [data-oc-part=leading-icon]>svg,.oc-Button-module__button__18Bed [data-oc-part=trailing-icon]>svg,.oc-Button-module__button__18Bed [data-oc-part=icon]>svg{inline-size:100%;block-size:100%}.oc-Button-module__button__18Bed:focus-visible>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-focus);transform:scale(1)}@media(hover:hover){.oc-Button-module__button__18Bed:hover:not(:disabled,[aria-disabled=true])>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-hover);transform:scale(1)}}.oc-Button-module__button__18Bed:active:not(:disabled,[aria-disabled=true]){transform:scale(max(0,1 + (.9875 - 1) * var(--oc-motion-scale-factor-feedback)))}.oc-Button-module__button__18Bed:active:not(:disabled,[aria-disabled=true])>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-active);transform:scale(1)}.oc-Button-module__button__18Bed:disabled,.oc-Button-module__button__18Bed[aria-disabled=true]{--oc-button-background-color: var(--oc-color-theme-interaction-disable);--oc-button-border-color: var(--oc-color-theme-static-transparent);--oc-button-color: var(--oc-color-theme-label-disable);--oc-button-loading-color: var(--oc-color-theme-label-disable);cursor:not-allowed}.oc-Button-module__button__18Bed:where(.oc-Button-module__medium__HYxwi){font-size:calc(var(--oc-typo-size-body2) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-body2) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-body2);font-weight:var(--oc-typo-weight-body2-bold);--oc-button-padding-x: var(--oc-space-item-padding-small);--oc-button-padding-y: var(--oc-space-item-padding-mini)}.oc-Button-module__button__18Bed:where(.oc-Button-module__small__zfmcP){font-size:calc(var(--oc-typo-size-label1) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-label1) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-label1);font-weight:var(--oc-typo-weight-label1-bold);--oc-button-padding-x: var(--oc-space-item-padding-xsmall);--oc-button-padding-y: var(--oc-space-item-padding-tiny);--oc-button-gap: var(--oc-space-item-gap-nano);--oc-button-label-padding-x: var(--oc-space-item-padding-atom);--oc-button-radius: var(--oc-atomic-radius-xsmall);--oc-button-icon-size: var(--oc-typo-height-label2)}.oc-Button-module__button__18Bed:where(.oc-Button-module__xsmall__QS3d-){font-size:calc(var(--oc-typo-size-label1) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-label1) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-label1);font-weight:var(--oc-typo-weight-label1-bold);--oc-button-padding-x: var(--oc-space-item-padding-mini);--oc-button-padding-y: var(--oc-space-item-padding-tiny);--oc-button-content-height: var(--oc-typo-height-label1);--oc-button-gap: var(--oc-space-item-gap-atom);--oc-button-label-padding-x: var(--oc-space-item-padding-atom);--oc-button-radius: var(--oc-atomic-radius-mini);--oc-button-icon-size: var(--oc-typo-height-caption1)}.oc-Button-module__button__18Bed:where(.oc-Button-module__solid__yi-oB):where(.oc-Button-module__primary__st6yY){--oc-button-background-color: var(--oc-color-theme-primary-normal);--oc-button-color: var(--oc-color-theme-static-white);--oc-button-loading-color: var(--oc-color-theme-static-white);--oc-interaction-color: var(--oc-color-theme-label-normal)}.oc-Button-module__button__18Bed:where(.oc-Button-module__solid__yi-oB):where(.oc-Button-module__assistive__6KrCl){--oc-button-background-color: var(--oc-color-theme-fill-normal);--oc-button-color: var(--oc-color-theme-label-neutral);--oc-interaction-color: var(--oc-color-theme-label-neutral)}.oc-Button-module__button__18Bed:where(.oc-Button-module__solid__yi-oB):disabled,.oc-Button-module__button__18Bed:where(.oc-Button-module__solid__yi-oB)[aria-disabled=true]{--oc-button-background-color: var(--oc-color-theme-interaction-disable);--oc-button-border-color: var(--oc-color-theme-static-transparent);--oc-button-color: var(--oc-color-theme-label-disable);--oc-button-loading-color: var(--oc-color-theme-label-disable)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH){--oc-button-background-color: transparent;--oc-button-border-color: var(--oc-color-theme-label-normal);--oc-button-color: var(--oc-color-theme-label-normal);--oc-interaction-color: var(--oc-color-theme-label-normal)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):where(.oc-Button-module__primary__st6yY){--oc-button-border-color: var(--oc-color-theme-primary-normal);--oc-button-color: var(--oc-color-theme-primary-normal);--oc-interaction-color: var(--oc-color-theme-primary-normal)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):where(.oc-Button-module__secondary__j-3rj){--oc-button-border-color: var(--oc-color-theme-line-normal-normal);--oc-button-color: var(--oc-color-theme-primary-normal);--oc-interaction-color: var(--oc-color-theme-label-normal)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):where(.oc-Button-module__assistive__6KrCl){--oc-button-border-color: var(--oc-color-theme-line-normal-normal);--oc-button-color: var(--oc-color-theme-label-neutral);--oc-interaction-color: var(--oc-color-theme-label-neutral);font-size:calc(var(--oc-typo-size-body1) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-body1) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-body1);font-weight:var(--oc-typo-weight-body1-medium)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):where(.oc-Button-module__assistive__6KrCl):where(.oc-Button-module__medium__HYxwi){font-size:calc(var(--oc-typo-size-body2) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-body2) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-body2);font-weight:var(--oc-typo-weight-body2-medium)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):where(.oc-Button-module__assistive__6KrCl):where(.oc-Button-module__small__zfmcP),.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):where(.oc-Button-module__assistive__6KrCl):where(.oc-Button-module__xsmall__QS3d-){font-size:calc(var(--oc-typo-size-label1) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-label1) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-label1);font-weight:var(--oc-typo-weight-label1-medium)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):disabled,.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH)[aria-disabled=true]{--oc-button-background-color: var(--oc-color-theme-static-transparent);--oc-button-border-color: var(--oc-color-theme-line-normal-neutral);--oc-button-color: var(--oc-color-theme-label-disable);--oc-button-loading-color: var(--oc-color-theme-label-disable)}.oc-Button-module__button__18Bed:where(.oc-Button-module__loading__QfItr){cursor:progress}.oc-Button-module__button__18Bed:where(.oc-Button-module__loading__QfItr)>[data-oc-part=content]{visibility:hidden}.oc-Button-module__button__18Bed:where(.oc-Button-module__iconOnly__FNrSu){aspect-ratio:1;inline-size:var(--oc-button-control-size);padding-inline:var(--oc-button-padding-y)}.oc-Button-module__button__18Bed:where(.oc-Button-module__fullWidth__AHpSl){inline-size:100%}.oc-Button-module__button__18Bed:where(.oc-Button-module__iconOnly__FNrSu):where(.oc-Button-module__fullWidth__AHpSl){aspect-ratio:auto}@media(prefers-reduced-motion:reduce){.oc-Button-module__button__18Bed:active:not(:disabled,[aria-disabled=true]){transform:none}}
+.oc-Button-module__button__18Bed{position:relative;display:inline-flex;align-items:center;justify-content:center;appearance:none;border:none;background-color:transparent;padding:0;cursor:pointer;text-decoration:none;color:inherit;will-change:transform;transition:transform calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback)}@media(prefers-reduced-motion:reduce){.oc-Button-module__button__18Bed{transition:none;transform:none}}.oc-Button-module__button__18Bed{-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;font-size:calc(var(--oc-typo-size-body1) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-body1) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-body1);font-weight:var(--oc-typo-weight-body1-bold);display:inline-flex;position:relative;overflow:hidden;flex-direction:column;gap:0;box-shadow:inset 0 0 0 1px var(--oc-button-border-color, transparent);border-radius:var(--oc-button-radius);background-color:var(--oc-button-background-color);padding:var(--oc-button-padding-y) var(--oc-button-padding-x);min-block-size:calc(var(--oc-button-content-height) + var(--oc-button-padding-y) * 2);color:var(--oc-button-color);white-space:nowrap;transition:background-color calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback),box-shadow calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback),color calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback),transform calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback)}@media(prefers-reduced-motion:reduce){.oc-Button-module__button__18Bed{transition-property:background-color,box-shadow,color;transition-duration:calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor-reduced) * var(--oc-motion-pace-normal) * 1);transition-timing-function:var(--oc-motion-timing-feedback);transform:none}}.oc-Button-module__button__18Bed{--oc-button-padding-x: var(--oc-space-item-padding-medium);--oc-button-padding-y: var(--oc-space-item-padding-xsmall);--oc-button-content-height: var(--oc-typo-height-body1);--oc-button-control-size: calc(var(--oc-button-content-height) + (var(--oc-button-padding-y) * 2));--oc-button-icon-size: var(--oc-typo-height-label1);--oc-button-gap: var(--oc-space-item-gap-tiny);--oc-button-label-padding-x: 0;--oc-button-radius: var(--oc-atomic-radius-small);--oc-button-background-color: var(--oc-color-theme-label-strong);--oc-button-color: var(--oc-color-theme-background-normal-normal);--oc-interaction-color: var(--oc-color-theme-background-normal-normal);--oc-button-border-color: var(--oc-color-theme-static-transparent);--oc-button-loading-color: var(--oc-color-theme-label-alternative);--oc-interaction-z-index: 1}.oc-Button-module__button__18Bed>[data-oc-component=interaction]{border-radius:var(--oc-button-radius)}.oc-Button-module__button__18Bed>[data-oc-part=content]{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;gap:var(--oc-button-gap);block-size:var(--oc-button-content-height)}.oc-Button-module__button__18Bed>[data-oc-part=loading]{position:absolute;z-index:3;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;justify-content:center;inline-size:var(--oc-button-content-height);block-size:var(--oc-button-content-height);color:currentcolor;line-height:0;padding:.0625rem;pointer-events:none}.oc-Button-module__button__18Bed>[data-oc-part=loading]>[data-oc-component=loading]{--oc-loading-size: 100%;--oc-loading-color: var(--oc-button-loading-color)}.oc-Button-module__button__18Bed [data-oc-part=label]{display:inline-flex;align-items:center;justify-content:center;padding-inline:var(--oc-button-label-padding-x, 0)}.oc-Button-module__button__18Bed [data-oc-part=leading-icon],.oc-Button-module__button__18Bed [data-oc-part=trailing-icon],.oc-Button-module__button__18Bed [data-oc-part=icon]{display:inline-flex;align-items:center;justify-content:center;inline-size:var(--oc-button-icon-size);block-size:var(--oc-button-icon-size);color:currentcolor}.oc-Button-module__button__18Bed [data-oc-part=leading-icon]>svg,.oc-Button-module__button__18Bed [data-oc-part=trailing-icon]>svg,.oc-Button-module__button__18Bed [data-oc-part=icon]>svg{inline-size:100%;block-size:100%}.oc-Button-module__button__18Bed:focus-visible>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-focus);transform:scale(1)}@media(hover:hover){.oc-Button-module__button__18Bed:hover:not(:disabled,[aria-disabled=true])>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-hover);transform:scale(1)}}.oc-Button-module__button__18Bed:active:not(:disabled,[aria-disabled=true]){transform:scale(max(0,1 + (.9875 - 1) * var(--oc-motion-scale-factor-feedback)))}.oc-Button-module__button__18Bed:active:not(:disabled,[aria-disabled=true])>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-active);transform:scale(1)}.oc-Button-module__button__18Bed:disabled,.oc-Button-module__button__18Bed[aria-disabled=true]{--oc-button-background-color: var(--oc-color-theme-interaction-disable);--oc-button-border-color: var(--oc-color-theme-static-transparent);--oc-button-color: var(--oc-color-theme-label-disable);--oc-button-loading-color: var(--oc-color-theme-label-disable);cursor:not-allowed}.oc-Button-module__button__18Bed:where(.oc-Button-module__medium__HYxwi){font-size:calc(var(--oc-typo-size-body2) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-body2) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-body2);font-weight:var(--oc-typo-weight-body2-bold);--oc-button-padding-x: var(--oc-space-item-padding-small);--oc-button-padding-y: var(--oc-space-item-padding-mini)}.oc-Button-module__button__18Bed:where(.oc-Button-module__small__zfmcP){font-size:calc(var(--oc-typo-size-label1) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-label1) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-label1);font-weight:var(--oc-typo-weight-label1-bold);--oc-button-padding-x: var(--oc-space-item-padding-xsmall);--oc-button-padding-y: var(--oc-space-item-padding-tiny);--oc-button-gap: var(--oc-space-item-gap-nano);--oc-button-label-padding-x: var(--oc-space-item-padding-atom);--oc-button-radius: var(--oc-atomic-radius-xsmall);--oc-button-icon-size: var(--oc-typo-height-label2)}.oc-Button-module__button__18Bed:where(.oc-Button-module__xsmall__QS3d-){font-size:calc(var(--oc-typo-size-label1) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-label1) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-label1);font-weight:var(--oc-typo-weight-label1-bold);--oc-button-padding-x: var(--oc-space-item-padding-mini);--oc-button-padding-y: var(--oc-space-item-padding-tiny);--oc-button-content-height: var(--oc-typo-height-label1);--oc-button-gap: var(--oc-space-item-gap-atom);--oc-button-label-padding-x: var(--oc-space-item-padding-atom);--oc-button-radius: var(--oc-atomic-radius-mini);--oc-button-icon-size: var(--oc-typo-height-caption1)}.oc-Button-module__button__18Bed:where(.oc-Button-module__solid__yi-oB):where(.oc-Button-module__primary__st6yY){--oc-button-background-color: var(--oc-color-theme-primary-normal);--oc-button-color: var(--oc-color-theme-static-white);--oc-button-loading-color: var(--oc-color-theme-static-white);--oc-interaction-color: var(--oc-color-theme-label-normal)}.oc-Button-module__button__18Bed:where(.oc-Button-module__solid__yi-oB):where(.oc-Button-module__assistive__6KrCl){--oc-button-background-color: var(--oc-color-theme-fill-normal);--oc-button-color: var(--oc-color-theme-label-neutral);--oc-interaction-color: var(--oc-color-theme-label-neutral)}.oc-Button-module__button__18Bed:where(.oc-Button-module__solid__yi-oB):disabled,.oc-Button-module__button__18Bed:where(.oc-Button-module__solid__yi-oB)[aria-disabled=true]{--oc-button-background-color: var(--oc-color-theme-interaction-disable);--oc-button-border-color: var(--oc-color-theme-static-transparent);--oc-button-color: var(--oc-color-theme-label-disable);--oc-button-loading-color: var(--oc-color-theme-label-disable)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH){--oc-button-background-color: transparent;--oc-button-border-color: var(--oc-color-theme-label-normal);--oc-button-color: var(--oc-color-theme-label-normal);--oc-interaction-color: var(--oc-color-theme-label-normal)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):where(.oc-Button-module__primary__st6yY){--oc-button-border-color: var(--oc-color-theme-primary-normal);--oc-button-color: var(--oc-color-theme-primary-normal);--oc-interaction-color: var(--oc-color-theme-primary-normal)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):where(.oc-Button-module__secondary__j-3rj){--oc-button-border-color: var(--oc-color-theme-line-normal-normal);--oc-button-color: var(--oc-color-theme-primary-normal);--oc-interaction-color: var(--oc-color-theme-label-normal)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):where(.oc-Button-module__assistive__6KrCl){--oc-button-border-color: var(--oc-color-theme-line-normal-normal);--oc-button-color: var(--oc-color-theme-label-neutral);--oc-interaction-color: var(--oc-color-theme-label-neutral);font-size:calc(var(--oc-typo-size-body1) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-body1) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-body1);font-weight:var(--oc-typo-weight-body1-medium)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):where(.oc-Button-module__assistive__6KrCl):where(.oc-Button-module__medium__HYxwi){font-size:calc(var(--oc-typo-size-body2) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-body2) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-body2);font-weight:var(--oc-typo-weight-body2-medium)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):where(.oc-Button-module__assistive__6KrCl):where(.oc-Button-module__small__zfmcP),.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):where(.oc-Button-module__assistive__6KrCl):where(.oc-Button-module__xsmall__QS3d-){font-size:calc(var(--oc-typo-size-label1) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-label1) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-label1);font-weight:var(--oc-typo-weight-label1-medium)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):disabled,.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH)[aria-disabled=true]{--oc-button-background-color: var(--oc-color-theme-static-transparent);--oc-button-border-color: var(--oc-color-theme-line-normal-neutral);--oc-button-color: var(--oc-color-theme-label-disable);--oc-button-loading-color: var(--oc-color-theme-label-disable)}.oc-Button-module__button__18Bed:where(.oc-Button-module__loading__QfItr){cursor:progress}.oc-Button-module__button__18Bed:where(.oc-Button-module__loading__QfItr)>[data-oc-part=content]{visibility:hidden}.oc-Button-module__button__18Bed:where(.oc-Button-module__iconOnly__FNrSu){aspect-ratio:1;inline-size:var(--oc-button-control-size);padding-inline:var(--oc-button-padding-y)}.oc-Button-module__button__18Bed:where(.oc-Button-module__fullWidth__AHpSl){inline-size:100%}.oc-Button-module__button__18Bed:where(.oc-Button-module__iconOnly__FNrSu):where(.oc-Button-module__fullWidth__AHpSl){aspect-ratio:auto}@media(prefers-reduced-motion:reduce){.oc-Button-module__button__18Bed:active:not(:disabled,[aria-disabled=true]){transform:none}}

package/dist/components/Button/Button.js

@@ -1,152 +1,92 @@
 'use client';
-import { jsx as a, jsxs as v, Fragment as A } from "react/jsx-runtime";
-import U from "../Interaction/Interaction.js";
-import X from "../Loading/Loading.js";
-import e from "./Button.module.scss.js";
-function lo({
-  children: d,
-  className: E = "",
-  style: C,
-  disabled: l = !1,
-  href: P,
-  appearance: i = "solid",
-  variant: u = "default",
-  size: f = "large",
-  fullWidth: h = !1,
-  loading: t = !1,
-  leadingIcon: w,
-  trailingIcon: D,
-  icon: y,
-  "aria-label": p,
-  "aria-labelledby": k,
-  ...B
+import { jsx as o, jsxs as x, Fragment as O } from "react/jsx-runtime";
+import q from "../Interaction/Interaction.js";
+import C from "../Loading/Loading.js";
+import V from "../internal/Pressable.js";
+import t from "./Button.module.scss.js";
+function H({
+  children: c,
+  className: z = "",
+  style: v,
+  disabled: h = !1,
+  href: y,
+  appearance: r = "solid",
+  variant: e = "default",
+  size: l = "large",
+  fullWidth: d = !1,
+  loading: a = !1,
+  leadingIcon: s,
+  trailingIcon: u,
+  icon: m,
+  "aria-label": b,
+  "aria-labelledby": f,
+  ...N
 }) {
-  const c = i === "solid" && u === "secondary" ? "primary" : u, x = d != null, s = !!(y && !x && !w && !D), K = [
-    e.button,
-    e[i],
-    e[c],
-    e[f],
-    s ? e.iconOnly : "",
-    h ? e.fullWidth : "",
-    t ? e.loading : "",
-    E
-  ].filter(Boolean).join(" "), N = i === "solid" && c === "default" || i === "outlined" && c === "secondary" ? "light" : "normal";
-  process.env.NODE_ENV !== "production" && s && !p && !k && console.warn(
+  const n = r === "solid" && e === "secondary" ? "primary" : e, w = c != null, i = !!(m && !w && !s && !u), B = [
+    t.button,
+    t[r],
+    t[n],
+    t[l],
+    i ? t.iconOnly : "",
+    d ? t.fullWidth : "",
+    a ? t.loading : "",
+    z
+  ].filter(Boolean).join(" "), E = r === "solid" && n === "default" || r === "outlined" && n === "secondary" ? "light" : "normal";
+  process.env.NODE_ENV !== "production" && i && !b && !f && console.warn(
     "[@orioncactuscorp/ui] Button with `icon` requires `aria-label` or `aria-labelledby` for screen reader accessibility."
   );
-  const m = (o, b) => /* @__PURE__ */ a("span", { "data-oc-part": b, "aria-hidden": "true", children: /* @__PURE__ */ a(o, { size: "custom" }) }), r = (o) => t ? (o.preventDefault(), o.stopPropagation(), !0) : !1, M = /* @__PURE__ */ v(A, { children: [
-    /* @__PURE__ */ a("span", { "data-oc-part": "content", children: s && y ? m(y, "icon") : /* @__PURE__ */ v(A, { children: [
-      w ? m(w, "leading-icon") : null,
-      x ? /* @__PURE__ */ a("span", { "data-oc-part": "label", children: d }) : null,
-      D ? m(D, "trailing-icon") : null
+  const p = (j, g) => /* @__PURE__ */ o("span", { "data-oc-part": g, "aria-hidden": "true", children: /* @__PURE__ */ o(j, { size: "custom" }) }), P = /* @__PURE__ */ x(O, { children: [
+    /* @__PURE__ */ o("span", { "data-oc-part": "content", children: i && m ? p(m, "icon") : /* @__PURE__ */ x(O, { children: [
+      s ? p(s, "leading-icon") : null,
+      w ? /* @__PURE__ */ o("span", { "data-oc-part": "label", children: c }) : null,
+      u ? p(u, "trailing-icon") : null
     ] }) }),
-    t ? /* @__PURE__ */ a("span", { "data-oc-part": "loading", "aria-hidden": "true", children: /* @__PURE__ */ a(X, { size: "custom" }) }) : null,
-    /* @__PURE__ */ a(U, { variant: N })
+    a ? /* @__PURE__ */ o("span", { "data-oc-part": "loading", "aria-hidden": "true", children: /* @__PURE__ */ o(C, { size: "custom" }) }) : null,
+    /* @__PURE__ */ o(q, { variant: E })
   ] });
-  if (P !== void 0) {
-    const o = B, {
-      onAuxClick: b,
-      onClick: G,
-      onKeyDown: H,
-      onMouseDown: I,
-      onPointerDown: J,
-      ref: Q,
-      tabIndex: R,
-      ...S
-    } = o;
-    return /* @__PURE__ */ a(
-      "a",
-      {
-        ...S,
-        ref: Q,
-        className: K,
-        style: C,
-        href: P,
-        onAuxClick: (n) => {
-          if (l || t) {
-            n.preventDefault(), n.stopPropagation();
-            return;
-          }
-          b?.(n);
-        },
-        onClick: (n) => {
-          if (l || t) {
-            n.preventDefault();
-            return;
-          }
-          G?.(n);
-        },
-        onKeyDown: (n) => {
-          (n.key === "Enter" || n.key === " ") && r(n) || H?.(n);
-        },
-        onMouseDown: (n) => {
-          r(n) || I?.(n);
-        },
-        onPointerDown: (n) => {
-          r(n) || J?.(n);
-        },
-        "aria-label": p,
-        "aria-labelledby": k,
-        "aria-busy": t ? "true" : void 0,
-        "aria-disabled": l || t ? "true" : void 0,
-        tabIndex: l || t ? -1 : R,
-        "data-oc-component": "button",
-        "data-oc-appearance": i,
-        "data-oc-variant": u,
-        "data-oc-resolved-variant": c,
-        "data-oc-size": f,
-        "data-oc-full-width": h ? "true" : void 0,
-        "data-oc-loading": t ? "true" : void 0,
-        "data-oc-icon-only": s ? "true" : void 0,
-        children: M
-      }
-    );
-  }
-  const j = B, {
-    type: O = "button",
-    onClick: V,
-    onKeyDown: z,
-    onMouseDown: q,
-    onPointerDown: F,
-    ref: _,
-    ...g
-  } = j;
-  return /* @__PURE__ */ a(
-    "button",
+  return y !== void 0 ? /* @__PURE__ */ o(
+    V,
     {
-      ...g,
-      ref: _,
-      className: K,
-      style: C,
-      type: O,
-      disabled: l || t,
-      "aria-busy": t ? "true" : void 0,
-      "aria-label": p,
-      "aria-labelledby": k,
-      onClick: (o) => {
-        r(o) || V?.(o);
-      },
-      onKeyDown: (o) => {
-        (o.key === "Enter" || o.key === " ") && r(o) || z?.(o);
-      },
-      onMouseDown: (o) => {
-        r(o) || q?.(o);
-      },
-      onPointerDown: (o) => {
-        r(o) || F?.(o);
-      },
+      ...N,
+      className: B,
+      style: v,
+      href: y,
+      disabled: h || a,
+      "aria-busy": a ? "true" : void 0,
+      "aria-label": b,
+      "aria-labelledby": f,
       "data-oc-component": "button",
-      "data-oc-appearance": i,
-      "data-oc-variant": u,
-      "data-oc-resolved-variant": c,
-      "data-oc-size": f,
-      "data-oc-full-width": h ? "true" : void 0,
-      "data-oc-loading": t ? "true" : void 0,
-      "data-oc-icon-only": s ? "true" : void 0,
-      children: M
+      "data-oc-appearance": r,
+      "data-oc-variant": e,
+      "data-oc-resolved-variant": n,
+      "data-oc-size": l,
+      "data-oc-full-width": d ? "true" : void 0,
+      "data-oc-loading": a ? "true" : void 0,
+      "data-oc-icon-only": i ? "true" : void 0,
+      children: P
+    }
+  ) : /* @__PURE__ */ o(
+    V,
+    {
+      ...N,
+      className: B,
+      style: v,
+      disabled: h || a,
+      "aria-busy": a ? "true" : void 0,
+      "aria-label": b,
+      "aria-labelledby": f,
+      "data-oc-component": "button",
+      "data-oc-appearance": r,
+      "data-oc-variant": e,
+      "data-oc-resolved-variant": n,
+      "data-oc-size": l,
+      "data-oc-full-width": d ? "true" : void 0,
+      "data-oc-loading": a ? "true" : void 0,
+      "data-oc-icon-only": i ? "true" : void 0,
+      children: P
     }
   );
 }
 export {
-  lo as default
+  H as default
 };