@orioncactuscorp/ui 1.2.0 → 1.4.0

package/dist/components/ActionArea/ActionArea.js

@@ -1,111 +1,141 @@
 'use client';
-import { jsx as e, jsxs as v } from "react/jsx-runtime";
-import { useContext as P, createContext as V, Children as E, isValidElement as j, Fragment as O } from "react";
-import z from "../Button/Button.js";
-import h from "../TextButton/TextButton.js";
-import B from "./ActionArea.module.scss.js";
-const C = V(null);
-function b(...t) {
+import { jsx as e, jsxs as B } from "react/jsx-runtime";
+import { useContext as V, createContext as _, Children as y, isValidElement as A, Fragment as g } from "react";
+import j from "../Button/Button.js";
+import C from "../TextButton/TextButton.js";
+import b from "./ActionArea.module.scss.js";
+const N = _(null), q = {
+  strong: ["main", "equal", "alternative", "sub"],
+  neutral: ["sub", "alternative", "equal", "main"],
+  compact: ["sub", "alternative", "equal", "main"]
+};
+function x(...t) {
   return t.filter(Boolean).join(" ");
 }
 function m(t) {
   return t != null && t !== !1 && t !== "";
 }
-function R() {
-  return P(C)?.variant ?? "strong";
+function z() {
+  return V(N)?.variant ?? "strong";
 }
-function x(t) {
-  return E.toArray(t).flatMap((o) => {
-    if (!j(o)) return [];
-    if (o.type === O) {
+function P(t) {
+  return y.toArray(t).flatMap((o) => {
+    if (!A(o)) return [];
+    if (o.type === g) {
       const n = o.props;
-      return x(n.children);
+      return P(n.children);
     }
-    return o.type !== N ? [] : [o];
+    return o.type !== v ? [] : [o];
+  });
+}
+function D(t) {
+  return A(t) && t.type === v;
+}
+function E(t) {
+  return y.toArray(t).flatMap((o) => {
+    if (!A(o) || o.type !== g) return [o];
+    const n = o.props;
+    return E(n.children);
   });
 }
-function T({
+function O(t) {
+  return t.props.priority ?? "main";
+}
+function I({
+  children: t,
+  variant: o
+}) {
+  const n = q[o ?? "strong"];
+  if (!n) return t;
+  const r = E(t);
+  return r.every(D) ? n.flatMap(
+    (i) => r.filter(
+      (a) => O(a) === i
+    )
+  ) : t;
+}
+function M({
   variant: t,
   children: o,
   compactContent: n
 }) {
   if (process.env.NODE_ENV === "production") return;
-  const r = x(o);
+  const r = P(o);
   r.filter(
-    (a) => a.props.variant === void 0 || a.props.variant === "main"
+    (a) => O(a) === "main"
   ).length > 1 && console.warn(
     "[@orioncactuscorp/ui] ActionArea should generally contain one main ActionAreaButton."
   ), t === "cancel" && r.length > 1 && console.warn(
     '[@orioncactuscorp/ui] ActionArea variant="cancel" is intended for a single main action.'
   ), t === "cancel" && r.some(
-    (a) => a.props.variant !== void 0 && a.props.variant !== "main"
+    (a) => a.props.priority !== void 0 && a.props.priority !== "main"
   ) && console.warn(
-    '[@orioncactuscorp/ui] ActionArea variant="cancel" should use ActionAreaButton variant="main".'
+    '[@orioncactuscorp/ui] ActionArea variant="cancel" should use ActionAreaButton priority="main".'
   ), t !== "compact" && m(n) && console.warn(
     '[@orioncactuscorp/ui] ActionArea compactContent is only rendered with variant="compact".'
   );
 }
-function D({
+function F({
   children: t,
   className: o = "",
   variant: n = "strong",
   caption: r,
-  extraContent: s,
+  extraContent: i,
   compactContent: a,
   background: u = !1,
-  ref: l,
-  ...i
+  ref: p,
+  ...s
 }) {
-  const c = m(s), d = m(r), p = n === "compact" && m(a);
-  return T({ variant: n, children: t, compactContent: a }), /* @__PURE__ */ e(C.Provider, { value: { variant: n }, children: /* @__PURE__ */ v(
+  const c = m(i), f = m(r), d = n === "compact" && m(a), l = I({ children: t, variant: n });
+  return M({ variant: n, children: t, compactContent: a }), /* @__PURE__ */ e(N.Provider, { value: { variant: n }, children: /* @__PURE__ */ B(
     "div",
     {
-      ...i,
-      ref: l,
-      className: b(B.actionArea, o),
+      ...s,
+      ref: p,
+      className: x(b.actionArea, o),
       "data-oc-component": "action-area",
       "data-oc-variant": n,
       "data-oc-background": u ? "true" : void 0,
       "data-oc-has-extra": c ? "true" : void 0,
-      "data-oc-has-caption": d ? "true" : void 0,
+      "data-oc-has-caption": f ? "true" : void 0,
       children: [
-        c ? /* @__PURE__ */ e("div", { "data-oc-part": "extra-slot", children: s }) : null,
-        d ? /* @__PURE__ */ e("p", { "data-oc-part": "caption", children: r }) : null,
-        p ? /* @__PURE__ */ v("div", { "data-oc-part": "compact-row", children: [
+        c ? /* @__PURE__ */ e("div", { "data-oc-part": "extra-slot", children: i }) : null,
+        f ? /* @__PURE__ */ e("p", { "data-oc-part": "caption", children: r }) : null,
+        d ? /* @__PURE__ */ B("div", { "data-oc-part": "compact-row", children: [
           /* @__PURE__ */ e("div", { "data-oc-part": "compact-slot", children: a }),
-          /* @__PURE__ */ e("div", { "data-oc-part": "actions", children: t })
-        ] }) : /* @__PURE__ */ e("div", { "data-oc-part": "actions", children: t })
+          /* @__PURE__ */ e("div", { "data-oc-part": "actions", children: l })
+        ] }) : /* @__PURE__ */ e("div", { "data-oc-part": "actions", children: l })
       ]
     }
   ) });
 }
-function N({
+function v({
   children: t,
   className: o = "",
-  variant: n = "main",
+  priority: n = "main",
   disabled: r = !1,
-  loading: s = !1,
+  loading: i = !1,
   leadingIcon: a,
   trailingIcon: u,
-  icon: l,
-  ...i
+  icon: p,
+  ...s
 }) {
-  const c = R();
+  const c = z();
   process.env.NODE_ENV !== "production" && c === "cancel" && n !== "main" && console.warn(
-    '[@orioncactuscorp/ui] ActionAreaButton inside ActionArea variant="cancel" should use variant="main".'
+    '[@orioncactuscorp/ui] ActionAreaButton inside ActionArea variant="cancel" should use priority="main".'
   );
-  const d = !!(l && t == null && !a && !u), p = {
+  const f = !!(p && t == null && !a && !u), d = {
     "data-oc-action-area-button": "true",
-    "data-oc-action-area-button-variant": n
-  }, f = b(B.actionButton, o), A = c === "cancel";
-  if (n === "sub" && c === "strong" && !l && !s && !r) {
-    if ("href" in i && i.href !== void 0)
+    "data-oc-action-area-button-priority": n
+  }, l = x(b.actionButton, o), h = c === "cancel";
+  if (n === "sub" && c === "strong" && !p && !i && !r) {
+    if ("href" in s && s.href !== void 0)
       return /* @__PURE__ */ e(
-        h,
+        C,
         {
-          ...i,
-          ...p,
-          className: f,
+          ...s,
+          ...d,
+          className: l,
           leftIcon: a,
           rightIcon: u,
           variant: "assistive",
@@ -113,15 +143,15 @@ function N({
           children: t
         }
       );
-    const g = i, { type: y = "button", ...w } = g;
+    const R = s, { type: w = "button", ...T } = R;
     return /* @__PURE__ */ e(
-      h,
+      C,
       {
-        ...w,
-        ...p,
+        ...T,
+        ...d,
         as: "button",
-        type: y,
-        className: f,
+        type: w,
+        className: l,
         leftIcon: a,
         rightIcon: u,
         variant: "assistive",
@@ -131,29 +161,29 @@ function N({
     );
   }
   return /* @__PURE__ */ e(
-    z,
+    j,
     {
-      ...i,
-      ...p,
-      className: f,
-      appearance: n === "main" && !A ? "solid" : "outlined",
-      variant: n === "main" && !A || n === "alternative" ? "primary" : "assistive",
+      ...s,
+      ...d,
+      className: l,
+      appearance: n === "main" && !h ? "solid" : "outlined",
+      variant: n === "main" && !h ? "primary" : n === "alternative" ? "secondary" : n === "equal" ? "primary" : "assistive",
       size: "large",
       fullWidth: c === "strong" || c === "cancel",
       disabled: r,
-      loading: s,
+      loading: i,
       leadingIcon: a,
       trailingIcon: u,
-      icon: l,
-      children: d ? void 0 : t
+      icon: p,
+      children: f ? void 0 : t
     }
   );
 }
-const L = Object.assign(D, {
-  Button: N
+const S = Object.assign(F, {
+  Button: v
 });
 export {
-  D as ActionArea,
-  N as ActionAreaButton,
-  L as default
+  F as ActionArea,
+  v as ActionAreaButton,
+  S as default
 };

package/dist/components/ActionArea/ActionAreaLayout.css

@@ -0,0 +1 @@
+.oc-ActionAreaLayout-module__layout__UBL8D{--oc-action-area-layout-block-size: 100dvh;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{position:relative;z-index:1;min-block-size:0}

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/Alert/Alert.css

@@ -1 +1 @@
-.oc-Alert-module__content__9Fty2{--oc-alert-width: 23em;--oc-modal-width: min(calc(100vw - var(--oc-space-section-padding-viewport-x) * 2), var(--oc-alert-width));--oc-modal-max-height: calc(100dvh - (var(--oc-space-section-padding-viewport-y) * 2));--oc-modal-radius: .75em;--_-modal-focus-ring-shadow: 0 0 0 0 transparent;font-size:calc(var(--oc-typo-size-body2) * var(--oc-typo-scale, 1));line-height:calc(var(--oc-typo-height-body2) * var(--oc-typo-scale, 1));letter-spacing:var(--oc-typo-spacing-body2);font-weight:var(--oc-typo-weight-body2-normal)}[data-oc-component=modal-backdrop]:has(+[data-oc-component=modal-viewport] [data-oc-alert=true]){--oc-modal-backdrop-opacity: var(--oc-color-global-opacity-88)}.oc-Alert-module__panel__oJM9V{display:flex;flex-direction:column;max-block-size:var(--oc-modal-max-height);overflow:auto;padding:1.125em}.oc-Alert-module__container__uQbiG{display:flex;flex-direction:column;gap:1em;padding-inline:.25em}.oc-Alert-module__message__Wd9FZ{display:flex;flex-direction:column;gap:.375em;word-break:keep-all;overflow-wrap:break-word}.oc-Alert-module__heading__xJ-uS{font-size:calc(var(--oc-typo-size-body1) * var(--oc-typo-scale, 1));line-height:calc(var(--oc-typo-height-body1) * var(--oc-typo-scale, 1));letter-spacing:var(--oc-typo-spacing-body1);font-weight:var(--oc-typo-weight-body1-bold);margin:0;color:var(--oc-color-theme-label-strong);text-align:start;padding-block:.0625em}.oc-Alert-module__description__ysmJi{margin:0;color:var(--oc-color-theme-label-alternative);text-align:start;white-space:pre-wrap}.oc-Alert-module__actionArea__AD5Vn{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:1.25em}.oc-Alert-module__action__a5XCP{min-inline-size:0}.oc-Alert-module__action__a5XCP[data-oc-alert-action-variant=negative]{--oc-text-button-color: var(--oc-color-theme-status-negative)}
+.oc-Alert-module__content__9Fty2{--oc-alert-width: 23em;--oc-modal-width: min(calc(100vw - var(--oc-space-section-padding-viewport-x) * 2), var(--oc-alert-width));--oc-modal-max-height: calc(100dvh - (var(--oc-space-section-padding-viewport-y) * 2));--oc-modal-radius: max(0px, .75em * var(--oc-atomic-radius-factor));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-normal)}[data-oc-component=modal-backdrop]:has(+[data-oc-component=modal-viewport] [data-oc-alert=true]){--oc-modal-backdrop-opacity: var(--oc-color-global-opacity-88)}.oc-Alert-module__panel__oJM9V{display:flex;flex-direction:column;max-block-size:var(--oc-modal-max-height);overflow:auto;padding:1.125em}.oc-Alert-module__container__uQbiG{display:flex;flex-direction:column;gap:1em;padding-inline:.25em}.oc-Alert-module__message__Wd9FZ{display:flex;flex-direction:column;gap:.375em;word-break:keep-all;overflow-wrap:break-word}.oc-Alert-module__heading__xJ-uS{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);margin:0;color:var(--oc-color-theme-label-strong);text-align:start;padding-block:.0625em}.oc-Alert-module__description__ysmJi{margin:0;color:var(--oc-color-theme-label-alternative);text-align:start;white-space:pre-wrap}.oc-Alert-module__actionArea__AD5Vn{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:1.25em}.oc-Alert-module__action__a5XCP{min-inline-size:0}.oc-Alert-module__action__a5XCP[data-oc-alert-action-variant=negative]{--oc-text-button-color: var(--oc-color-theme-status-negative)}

package/dist/components/BackgroundIconButton/BackgroundIconButton.css

@@ -1 +1 @@
-.oc-BackgroundIconButton-module__backgroundIconButton__up7D1{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-scale) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback)}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1{-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;--oc-interaction-inset-x: -.25rem;--oc-interaction-inset-y: -.25rem;--oc-interaction-scale: 1;--oc-interaction-time: .15s;--oc-interaction-z-index: 3;--oc-background-icon-button-blend-opacity: var(--oc-color-global-opacity-8);--oc-background-icon-button-size: 1.5rem;--oc-background-icon-button-webkit-blend-opacity: .2;width:var(--oc-background-icon-button-size);height:var(--oc-background-icon-button-size);transition:transform calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-scale) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback)}@media(prefers-reduced-motion:reduce){.oc-BackgroundIconButton-module__backgroundIconButton__up7D1{transition:none;transform:none}}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1>[data-oc-component=interaction]{clip-path:inset(0 round 1000px)}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:active{transform:scale(max(0,1 + (.95 - 1) * var(--oc-motion-scale-feedback)))}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:focus-visible>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-focus);transform:scale(1)}@media(hover:hover){.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:hover>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-hover);transform:scale(1)}}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:active>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-active);transform:scale(1)}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__normal__pYVrG) [data-oc-part=icon]{color:var(--oc-color-theme-static-black);opacity:var(--oc-color-global-opacity-43)}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__normal__pYVrG) [data-oc-part=background]{background-color:transparent}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__normal__pYVrG) [data-oc-part=background]:after{background-color:var(--oc-color-theme-static-white);mix-blend-mode:plus-lighter;opacity:var(--oc-color-global-opacity-35)}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__normal__pYVrG) [data-oc-part=background]:before{background-color:rgb(0,0,0,var(--oc-background-icon-button-blend-opacity));mix-blend-mode:multiply}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__primary__n6x6u) [data-oc-part=icon]{color:var(--oc-color-theme-static-white)}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__primary__n6x6u) [data-oc-part=background]{background-color:var(--oc-color-theme-primary-normal)}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1 [data-oc-part=background]{position:absolute;top:-.25rem;left:-.25rem;z-index:0;width:100%;height:100%;padding:.25rem;box-sizing:content-box;-webkit-backdrop-filter:blur(var(--oc-atomic-blur-normal)) saturate(150%) brightness(150%);backdrop-filter:blur(var(--oc-atomic-blur-normal)) saturate(150%) brightness(150%);border-radius:var(--oc-atomic-radius-max);overflow:hidden}@supports (-webkit-backdrop-filter: none){.oc-BackgroundIconButton-module__backgroundIconButton__up7D1 [data-oc-part=background]{clip-path:inset(0 round var(--oc-atomic-radius-max));overflow:auto;border-radius:0}}@supports (-moz-appearance: none){.oc-BackgroundIconButton-module__backgroundIconButton__up7D1 [data-oc-part=background]{clip-path:inset(0 round var(--oc-atomic-radius-max));overflow:auto;border-radius:0}}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1 [data-oc-part=background]:before{content:"";position:absolute;top:0;left:0;z-index:1;width:100%;height:100%}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1 [data-oc-part=background]:after{content:"";position:absolute;top:0;left:0;z-index:0;width:100%;height:100%}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1 [data-oc-part=icon]{display:inline-flex;align-items:center;justify-content:center;width:var(--oc-background-icon-button-size);height:var(--oc-background-icon-button-size);z-index:1}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1 [data-oc-part=icon]>svg{padding:.125rem}@supports (-webkit-backdrop-filter: none){.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__normal__pYVrG) [data-oc-part=icon]{color:var(--oc-color-global-coolNeutral-50);opacity:var(--oc-color-global-opacity-61);mix-blend-mode:plus-darker}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__normal__pYVrG) [data-oc-part=background]{-webkit-backdrop-filter:blur(var(--oc-atomic-blur-normal)) saturate(150%) brightness(200%);backdrop-filter:blur(var(--oc-atomic-blur-normal)) saturate(150%) brightness(200%)}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__normal__pYVrG) [data-oc-part=background]:before{background-color:#000;opacity:calc(var(--oc-background-icon-button-webkit-blend-opacity) + var(--oc-background-icon-button-webkit-blend-opacity-add, 0))}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__normal__pYVrG) [data-oc-part=background]:after{mix-blend-mode:normal}}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__alternative__YA8Jv) [data-oc-part=icon]{color:var(--oc-color-theme-static-white);opacity:var(--oc-color-global-opacity-88);mix-blend-mode:normal}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__alternative__YA8Jv) [data-oc-part=background]{background-color:color-mix(in srgb,var(--oc-color-global-coolNeutral-30),transparent calc(100% - (100% * var(--oc-color-global-opacity-61))));-webkit-backdrop-filter:none;backdrop-filter:none}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__alternative__YA8Jv) [data-oc-part=background]:before,.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__alternative__YA8Jv) [data-oc-part=background]:after{background-color:transparent;mix-blend-mode:normal;opacity:1}@media(prefers-reduced-motion:reduce){.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:active{transform:none}}
+.oc-BackgroundIconButton-module__backgroundIconButton__up7D1{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)}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1{-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;--oc-interaction-inset-x: -.25rem;--oc-interaction-inset-y: -.25rem;--oc-interaction-scale: 1;--oc-interaction-time: .15s;--oc-interaction-z-index: 3;--oc-background-icon-button-blend-opacity: var(--oc-color-global-opacity-8);--oc-background-icon-button-size: 1.5rem;--oc-background-icon-button-webkit-blend-opacity: .2;width:var(--oc-background-icon-button-size);height:var(--oc-background-icon-button-size);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-BackgroundIconButton-module__backgroundIconButton__up7D1{transition:none;transform:none}}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1>[data-oc-component=interaction]{clip-path:inset(0 round var(--oc-atomic-radius-max))}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:active{transform:scale(max(0,1 + (.95 - 1) * var(--oc-motion-scale-factor-feedback)))}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:focus-visible>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-focus);transform:scale(1)}@media(hover:hover){.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:hover>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-hover);transform:scale(1)}}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:active>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-active);transform:scale(1)}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__normal__pYVrG) [data-oc-part=icon]{color:var(--oc-color-theme-static-black);opacity:var(--oc-color-global-opacity-43)}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__normal__pYVrG) [data-oc-part=background]{background-color:transparent}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__normal__pYVrG) [data-oc-part=background]:after{background-color:var(--oc-color-theme-static-white);mix-blend-mode:plus-lighter;opacity:var(--oc-color-global-opacity-35)}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__normal__pYVrG) [data-oc-part=background]:before{background-color:rgb(0,0,0,var(--oc-background-icon-button-blend-opacity));mix-blend-mode:multiply}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__primary__n6x6u) [data-oc-part=icon]{color:var(--oc-color-theme-static-white)}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__primary__n6x6u) [data-oc-part=background]{background-color:var(--oc-color-theme-primary-normal)}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1 [data-oc-part=background]{position:absolute;top:-.25rem;left:-.25rem;z-index:0;width:100%;height:100%;padding:.25rem;box-sizing:content-box;-webkit-backdrop-filter:blur(var(--oc-atomic-blur-normal)) saturate(150%) brightness(150%);backdrop-filter:blur(var(--oc-atomic-blur-normal)) saturate(150%) brightness(150%);border-radius:var(--oc-atomic-radius-max);overflow:hidden}@supports (-webkit-backdrop-filter: none){.oc-BackgroundIconButton-module__backgroundIconButton__up7D1 [data-oc-part=background]{clip-path:inset(0 round var(--oc-atomic-radius-max));overflow:auto;border-radius:0}}@supports (-moz-appearance: none){.oc-BackgroundIconButton-module__backgroundIconButton__up7D1 [data-oc-part=background]{clip-path:inset(0 round var(--oc-atomic-radius-max));overflow:auto;border-radius:0}}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1 [data-oc-part=background]:before{content:"";position:absolute;top:0;left:0;z-index:1;width:100%;height:100%}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1 [data-oc-part=background]:after{content:"";position:absolute;top:0;left:0;z-index:0;width:100%;height:100%}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1 [data-oc-part=icon]{display:inline-flex;align-items:center;justify-content:center;width:var(--oc-background-icon-button-size);height:var(--oc-background-icon-button-size);z-index:1}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1 [data-oc-part=icon]>svg{padding:.125rem}@supports (-webkit-backdrop-filter: none){.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__normal__pYVrG) [data-oc-part=icon]{color:var(--oc-color-global-coolNeutral-50);opacity:var(--oc-color-global-opacity-61);mix-blend-mode:plus-darker}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__normal__pYVrG) [data-oc-part=background]{-webkit-backdrop-filter:blur(var(--oc-atomic-blur-normal)) saturate(150%) brightness(200%);backdrop-filter:blur(var(--oc-atomic-blur-normal)) saturate(150%) brightness(200%)}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__normal__pYVrG) [data-oc-part=background]:before{background-color:#000;opacity:calc(var(--oc-background-icon-button-webkit-blend-opacity) + var(--oc-background-icon-button-webkit-blend-opacity-add, 0))}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__normal__pYVrG) [data-oc-part=background]:after{mix-blend-mode:normal}}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__alternative__YA8Jv) [data-oc-part=icon]{color:var(--oc-color-theme-static-white);opacity:var(--oc-color-global-opacity-88);mix-blend-mode:normal}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__alternative__YA8Jv) [data-oc-part=background]{background-color:color-mix(in srgb,var(--oc-color-global-coolNeutral-30),transparent calc(100% - (100% * var(--oc-color-global-opacity-61))));-webkit-backdrop-filter:none;backdrop-filter:none}.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__alternative__YA8Jv) [data-oc-part=background]:before,.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:where(.oc-BackgroundIconButton-module__alternative__YA8Jv) [data-oc-part=background]:after{background-color:transparent;mix-blend-mode:normal;opacity:1}@media(prefers-reduced-motion:reduce){.oc-BackgroundIconButton-module__backgroundIconButton__up7D1:active{transform:none}}

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/Badge/Badge.css

@@ -1 +1 @@
-.oc-Badge-module__badge__ZbEBU{font-size:calc(var(--oc-typo-size-label1) * var(--oc-typo-scale, 1));line-height:calc(var(--oc-typo-height-label1) * var(--oc-typo-scale, 1));letter-spacing:var(--oc-typo-spacing-label1);font-weight:var(--oc-typo-weight-label1-medium);display:inline-flex;position:relative;isolation:isolate;align-items:center;justify-content:center;gap:var(--oc-space-item-gap-atom);color:var(--oc-badge-color);text-align:center;white-space:nowrap}.oc-Badge-module__badge__ZbEBU:before{position:absolute;inset-block-start:calc(-1 * var(--oc-badge-padding-y));inset-inline-start:calc(-1 * var(--oc-badge-padding-x));z-index:1;box-sizing:content-box;border-radius:var(--oc-badge-radius);background-color:var(--oc-badge-background-color);padding:var(--oc-badge-padding-y) var(--oc-badge-padding-x);inline-size:100%;block-size:100%;content:"";opacity:var(--oc-badge-background-opacity)}.oc-Badge-module__badge__ZbEBU:where(.oc-Badge-module__padding__kNk-D){overflow:hidden;border-radius:var(--oc-badge-radius);padding:var(--oc-badge-padding-y) var(--oc-badge-padding-x)}.oc-Badge-module__badge__ZbEBU:where(.oc-Badge-module__padding__kNk-D):before{inset:0;padding:0}.oc-Badge-module__badge__ZbEBU [data-oc-part=content]{position:relative;z-index:2}.oc-Badge-module__badge__ZbEBU{--oc-badge-padding-x: .4em;--oc-badge-padding-y: .25em;--oc-badge-radius: .4em;--oc-badge-color: var(--oc-color-theme-label-alternative);--oc-badge-background-color: transparent;--oc-badge-background-opacity: var(--oc-color-global-opacity-100)}.oc-Badge-module__normal__tNcew{--oc-badge-color: var(--oc-color-theme-label-alternative);--oc-badge-background-color: var(--oc-color-theme-fill-normal)}.oc-Badge-module__accent__nIDKx{--oc-badge-color: var(--oc-badge-accent-color, var(--oc-color-theme-primary-normal));--oc-badge-background-color: var(--oc-badge-accent-color, var(--oc-color-theme-primary-normal));--oc-badge-background-opacity: var(--oc-color-global-opacity-8)}.oc-Badge-module__overlay__4KVqG{-webkit-backdrop-filter:blur(var(--oc-atomic-blur-normal));backdrop-filter:blur(var(--oc-atomic-blur-normal));--oc-badge-color: var(--oc-color-theme-label-normal);--oc-badge-background-color: var(--oc-color-theme-background-normal-normal);--oc-badge-background-opacity: var(--oc-color-global-opacity-74)}.oc-Badge-module__tiny__2VWq-{font-size:calc(var(--oc-typo-size-caption1) * var(--oc-typo-scale, 1));line-height:calc(var(--oc-typo-height-caption1) * var(--oc-typo-scale, 1));letter-spacing:var(--oc-typo-spacing-caption1);font-weight:var(--oc-typo-weight-caption1-bold);--oc-badge-padding-x: .375em;--oc-badge-padding-y: .1em;--oc-badge-radius: .3125em}
+.oc-Badge-module__badge__ZbEBU{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);display:inline-flex;position:relative;isolation:isolate;align-items:center;justify-content:center;gap:var(--oc-space-item-gap-atom);appearance:none;margin:0;border:none;background:transparent;padding:0;color:var(--oc-badge-color);text-align:center;text-decoration:none;white-space:nowrap}.oc-Badge-module__badge__ZbEBU:before{position:absolute;inset-block-start:calc(-1 * var(--oc-badge-padding-y));inset-inline-start:calc(-1 * var(--oc-badge-padding-x));z-index:1;box-sizing:content-box;border-radius:var(--oc-badge-radius);background-color:var(--oc-badge-background-color);padding:var(--oc-badge-padding-y) var(--oc-badge-padding-x);inline-size:100%;block-size:100%;content:"";opacity:var(--oc-badge-background-opacity)}.oc-Badge-module__badge__ZbEBU:where(.oc-Badge-module__padding__kNk-D){overflow:hidden;border-radius:var(--oc-badge-radius);padding:var(--oc-badge-padding-y) var(--oc-badge-padding-x);--oc-interaction-inset-x: 0;--oc-interaction-inset-y: 0}.oc-Badge-module__badge__ZbEBU:where(.oc-Badge-module__padding__kNk-D):before{inset:0;padding:0}.oc-Badge-module__badge__ZbEBU:focus-visible>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-focus);transform:scale(1)}.oc-Badge-module__badge__ZbEBU[data-oc-interactive=true]{-webkit-user-select:none;user-select:none;cursor:pointer;-webkit-tap-highlight-color:transparent}.oc-Badge-module__badge__ZbEBU[data-oc-interactive=true] [data-oc-part=content]{pointer-events:none}.oc-Badge-module__badge__ZbEBU [data-oc-part=content]{position:relative;z-index:3}.oc-Badge-module__badge__ZbEBU>[data-oc-component=interaction]{z-index:2;border-radius:var(--oc-badge-radius)}.oc-Badge-module__badge__ZbEBU{--oc-badge-padding-x: .4em;--oc-badge-padding-y: .25em;--oc-badge-radius: max(0px, .4em * var(--oc-atomic-radius-factor));--oc-badge-color: var(--oc-color-theme-label-alternative);--oc-badge-background-color: transparent;--oc-badge-background-opacity: var(--oc-color-global-opacity-100);--oc-interaction-color: currentcolor;--oc-interaction-inset-x: calc(-1 * var(--oc-badge-padding-x));--oc-interaction-inset-y: calc(-1 * var(--oc-badge-padding-y));--oc-interaction-radius: var(--oc-badge-radius)}.oc-Badge-module__normal__tNcew{--oc-badge-color: var(--oc-color-theme-label-alternative);--oc-badge-background-color: var(--oc-color-theme-fill-normal)}.oc-Badge-module__accent__nIDKx{--oc-badge-color: var(--oc-badge-accent-color, var(--oc-color-theme-primary-normal));--oc-badge-background-color: var(--oc-badge-accent-color, var(--oc-color-theme-primary-normal));--oc-badge-background-opacity: var(--oc-color-global-opacity-8)}.oc-Badge-module__overlay__4KVqG{-webkit-backdrop-filter:blur(var(--oc-atomic-blur-normal));backdrop-filter:blur(var(--oc-atomic-blur-normal));--oc-badge-color: var(--oc-color-theme-label-normal);--oc-badge-background-color: var(--oc-color-theme-background-normal-normal);--oc-badge-background-opacity: var(--oc-color-global-opacity-74)}.oc-Badge-module__tiny__2VWq-{font-size:calc(var(--oc-typo-size-caption1) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-caption1) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-caption1);font-weight:var(--oc-typo-weight-caption1-bold);--oc-badge-padding-x: .375em;--oc-badge-padding-y: .1em;--oc-badge-radius: max(0px, .3125em * var(--oc-atomic-radius-factor))}