@orioncactuscorp/ui 1.0.0

package/dist/components/ActionArea/ActionArea.js

@@ -0,0 +1,158 @@
+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) {
+  return t.filter(Boolean).join(" ");
+}
+function m(t) {
+  return t != null && t !== !1 && t !== "";
+}
+function R() {
+  return P(C)?.variant ?? "strong";
+}
+function x(t) {
+  return E.toArray(t).flatMap((o) => {
+    if (!j(o)) return [];
+    if (o.type === O) {
+      const n = o.props;
+      return x(n.children);
+    }
+    return o.type !== N ? [] : [o];
+  });
+}
+function T({
+  variant: t,
+  children: o,
+  compactContent: n
+}) {
+  if (process.env.NODE_ENV === "production") return;
+  const r = x(o);
+  r.filter(
+    (a) => a.props.variant === void 0 || a.props.variant === "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"
+  ) && console.warn(
+    '[@orioncactuscorp/ui] ActionArea variant="cancel" should use ActionAreaButton variant="main".'
+  ), t !== "compact" && m(n) && console.warn(
+    '[@orioncactuscorp/ui] ActionArea compactContent is only rendered with variant="compact".'
+  );
+}
+function D({
+  children: t,
+  className: o = "",
+  variant: n = "strong",
+  caption: r,
+  extraContent: s,
+  compactContent: a,
+  background: u = !1,
+  ref: l,
+  ...i
+}) {
+  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(
+    "div",
+    {
+      ...i,
+      ref: l,
+      className: b(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,
+      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: [
+          /* @__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 })
+      ]
+    }
+  ) });
+}
+function N({
+  children: t,
+  className: o = "",
+  variant: n = "main",
+  disabled: r = !1,
+  loading: s = !1,
+  leadingIcon: a,
+  trailingIcon: u,
+  icon: l,
+  ...i
+}) {
+  const c = R();
+  process.env.NODE_ENV !== "production" && c === "cancel" && n !== "main" && console.warn(
+    '[@orioncactuscorp/ui] ActionAreaButton inside ActionArea variant="cancel" should use variant="main".'
+  );
+  const d = !!(l && t == null && !a && !u), p = {
+    "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)
+      return /* @__PURE__ */ e(
+        h,
+        {
+          ...i,
+          ...p,
+          className: f,
+          leftIcon: a,
+          rightIcon: u,
+          variant: "assistive",
+          size: "small",
+          children: t
+        }
+      );
+    const g = i, { type: y = "button", ...w } = g;
+    return /* @__PURE__ */ e(
+      h,
+      {
+        ...w,
+        ...p,
+        as: "button",
+        type: y,
+        className: f,
+        leftIcon: a,
+        rightIcon: u,
+        variant: "assistive",
+        size: "small",
+        children: t
+      }
+    );
+  }
+  return /* @__PURE__ */ e(
+    z,
+    {
+      ...i,
+      ...p,
+      className: f,
+      appearance: n === "main" && !A ? "solid" : "outlined",
+      variant: n === "main" && !A || n === "alternative" ? "primary" : "assistive",
+      size: "large",
+      fullWidth: c === "strong" || c === "cancel",
+      disabled: r,
+      loading: s,
+      leadingIcon: a,
+      trailingIcon: u,
+      icon: l,
+      children: d ? void 0 : t
+    }
+  );
+}
+const L = Object.assign(D, {
+  Button: N
+});
+export {
+  D as ActionArea,
+  N as ActionAreaButton,
+  L as default
+};

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

@@ -0,0 +1,9 @@
+import './ActionArea.css';const t = "oc-ActionArea-module__actionArea__jnxep", o = "oc-ActionArea-module__actionButton__fKHJQ", n = {
+  actionArea: t,
+  actionButton: o
+};
+export {
+  t as actionArea,
+  o as actionButton,
+  n as default
+};

package/dist/components/ActionArea.d.ts

@@ -0,0 +1,6 @@
+export * from '../ui/src/components/ActionArea/index'
+export {}
+import _default from '../ui/src/components/ActionArea/index'
+export default _default
+export * from '../ui/src/components/ActionArea/index'
+export {}

package/dist/components/ActionArea.js

@@ -0,0 +1,6 @@
+import { ActionArea as e, ActionAreaButton as r, default as A } from "./ActionArea/ActionArea.js";
+export {
+  e as ActionArea,
+  r as ActionAreaButton,
+  A as default
+};

package/dist/components/Alert/Alert.css

@@ -0,0 +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)}

package/dist/components/Alert/Alert.js

@@ -0,0 +1,293 @@
+'use client';
+import { jsx as l, jsxs as G } from "react/jsx-runtime";
+import { useId as J, isValidElement as c, cloneElement as K, Children as Q, Fragment as S, createContext as U, useContext as W } from "react";
+import { ModalContent as X, ModalRoot as Y } from "../Modal/Modal.js";
+import { useModalContext as Z } from "../Modal/contexts.js";
+import B from "../TextButton/TextButton.js";
+import p from "./Alert.module.scss.js";
+const j = U(null);
+function v(...t) {
+  return t.filter(Boolean).join(" ");
+}
+function P(t) {
+  const e = W(j);
+  if (!e)
+    throw new Error(
+      `[@orioncactuscorp/ui] ${t} must be used inside AlertContent.`
+    );
+  return e;
+}
+function N(t) {
+  return Q.toArray(t).flatMap((e) => {
+    if (!c(e) || e.type !== S) return [e];
+    const r = e.props;
+    return N(r.children);
+  });
+}
+function H(t, e) {
+  return t.find(
+    (i) => c(i) && i.type === e
+  )?.props.id;
+}
+function E(t) {
+  return N(t).flatMap((e) => !c(e) || e.type !== V ? [] : [e]);
+}
+function L(t, e) {
+  if (e === "none" || t.length === 0 || t.findIndex(
+    (s) => s.props.autoFocus === !0
+  ) >= 0) return -1;
+  if (e === "first" || !t.some(
+    (s) => s.props.variant === "negative"
+  )) return 0;
+  const n = t.findIndex(
+    (s) => s.props.variant === "assistive"
+  );
+  if (n >= 0) return n;
+  const a = t.findIndex(
+    (s) => s.props.variant !== "negative"
+  );
+  return a >= 0 ? a : 0;
+}
+function tt(t, e) {
+  const r = N(t), i = E(r), n = i[L(i, e)];
+  return n ? r.map((a) => a !== n || !c(a) ? a : K(a, { autoFocus: !0 })) : r;
+}
+function et({
+  hasHeading: t,
+  hasDescription: e,
+  hasActionArea: r,
+  ariaLabel: i,
+  ariaLabelledBy: n,
+  ariaDescribedBy: a
+}) {
+  process.env.NODE_ENV !== "production" && (!t && !i && !n && console.warn(
+    "[@orioncactuscorp/ui] AlertContent without AlertHeading requires `aria-label` or `aria-labelledby`."
+  ), !e && a === void 0 && console.warn(
+    "[@orioncactuscorp/ui] AlertContent should include AlertDescription or an explicit `aria-describedby`."
+  ), r || console.warn(
+    "[@orioncactuscorp/ui] AlertContent should include AlertActionArea with at least one AlertAction."
+  ));
+}
+function nt(t) {
+  process.env.NODE_ENV !== "production" && E(t).length === 0 && console.warn(
+    "[@orioncactuscorp/ui] AlertActionArea should contain at least one AlertAction."
+  );
+}
+function M({
+  children: t,
+  outsideDismissible: e = !1,
+  canCloseAttempt: r,
+  ...i
+}) {
+  return /* @__PURE__ */ l(
+    Y,
+    {
+      ...i,
+      disablePointerDismissal: !e,
+      canCloseAttempt: (n) => !e && (n.reason === "backdrop-press" || n.reason === "outside-press" || n.reason === "focus-out") ? !1 : r?.(n),
+      children: t
+    }
+  );
+}
+function ot({
+  children: t,
+  className: e = "",
+  role: r = "alertdialog",
+  initialFocus: i,
+  "aria-label": n,
+  "aria-labelledby": a,
+  "aria-describedby": s,
+  ...F
+}) {
+  const m = J(), g = N(t), d = g.filter(
+    (o) => !(c(o) && o.type === w)
+  ), f = g.filter(
+    (o) => c(o) && o.type === w
+  ), b = d.filter(
+    (o) => c(o) && (o.type === x || o.type === C)
+  ), D = d.filter(
+    (o) => !c(o) || o.type !== x && o.type !== C
+  ), u = `${m}-heading`, k = `${m}-description`, y = H(d, x) ?? u, h = H(d, C) ?? k, I = d.some(
+    (o) => c(o) && o.type === x
+  ), A = d.some(
+    (o) => c(o) && o.type === C
+  ), O = f.length > 0, R = f.some(
+    (o) => c(o) && E(o.props.children).some(
+      (T) => T.props.autoFocus === !0
+    )
+  ), $ = f.some(
+    (o) => c(o) && o.props.initialFocus !== void 0 && o.props.initialFocus !== "none"
+  ), q = a ?? (I ? y : void 0), z = s ?? (A ? h : void 0), _ = i ?? ($ || R ? void 0 : "content");
+  return et({
+    hasHeading: I,
+    hasDescription: A,
+    hasActionArea: O,
+    ariaLabel: n,
+    ariaLabelledBy: a,
+    ariaDescribedBy: s
+  }), /* @__PURE__ */ l(j.Provider, { value: { headingId: y, descriptionId: h }, children: /* @__PURE__ */ l(
+    X,
+    {
+      ...F,
+      className: v(p.content, e),
+      variant: "popup",
+      resize: "hug",
+      drag: !1,
+      role: r,
+      "aria-label": n,
+      "aria-labelledby": q,
+      "aria-describedby": z,
+      initialFocus: _,
+      "data-oc-alert": "true",
+      children: /* @__PURE__ */ l("div", { className: p.panel, "data-oc-component": "alert-panel", children: /* @__PURE__ */ G("div", { className: p.container, "data-oc-part": "container", children: [
+        b.length > 0 ? /* @__PURE__ */ l("div", { className: p.message, "data-oc-part": "message", children: b }) : null,
+        D,
+        f
+      ] }) })
+    }
+  ) });
+}
+function x({
+  className: t = "",
+  children: e,
+  id: r,
+  ref: i,
+  ...n
+}) {
+  const a = P("AlertHeading");
+  return /* @__PURE__ */ l(
+    "h2",
+    {
+      ...n,
+      ref: i,
+      id: r ?? a.headingId,
+      className: v(p.heading, t),
+      "data-oc-part": "heading",
+      "data-oc-component": "alert-heading",
+      children: e
+    }
+  );
+}
+function C({
+  className: t = "",
+  children: e,
+  id: r,
+  ref: i,
+  ...n
+}) {
+  const a = P("AlertDescription");
+  return /* @__PURE__ */ l(
+    "p",
+    {
+      ...n,
+      ref: i,
+      id: r ?? a.descriptionId,
+      className: v(p.description, t),
+      "data-oc-part": "description",
+      "data-oc-component": "alert-description",
+      children: e
+    }
+  );
+}
+function w({
+  children: t,
+  className: e = "",
+  initialFocus: r = "none",
+  ref: i,
+  ...n
+}) {
+  return nt(t), /* @__PURE__ */ l(
+    "div",
+    {
+      ...n,
+      ref: i,
+      className: v(p.actionArea, e),
+      "data-oc-alert-action-area": "true",
+      "data-oc-part": "actions",
+      children: tt(t, r)
+    }
+  );
+}
+function V({
+  children: t,
+  className: e = "",
+  variant: r = "normal",
+  closeOnClick: i = !0,
+  disabled: n = !1,
+  ...a
+}) {
+  const s = Z("AlertAction"), F = r === "normal" ? "primary" : r === "assistive" ? "assistive" : "inherit", m = {
+    className: v(p.action, e),
+    variant: F,
+    size: "medium",
+    padding: !1,
+    "data-oc-alert-action-variant": r
+  }, g = (u) => {
+    i && !u.defaultPrevented && !n && s.requestClose({
+      reason: "programmatic",
+      eventDetails: u
+    });
+  };
+  if ("href" in a && a.href !== void 0) {
+    const u = a, {
+      onClick: k,
+      tabIndex: y,
+      "aria-disabled": h,
+      ...I
+    } = u;
+    return /* @__PURE__ */ l(
+      B,
+      {
+        ...I,
+        ...m,
+        as: "a",
+        "aria-disabled": n ? !0 : h,
+        tabIndex: n ? -1 : y,
+        onClick: (A) => {
+          if (n) {
+            A.preventDefault();
+            return;
+          }
+          k?.(A), g(A);
+        },
+        children: t
+      }
+    );
+  }
+  const d = a, {
+    type: f = "button",
+    onClick: b,
+    ...D
+  } = d;
+  return /* @__PURE__ */ l(
+    B,
+    {
+      ...D,
+      ...m,
+      as: "button",
+      type: f,
+      disabled: n,
+      onClick: (u) => {
+        b?.(u), g(u);
+      },
+      children: t
+    }
+  );
+}
+const ut = Object.assign(M, {
+  Root: M,
+  Content: ot,
+  Heading: x,
+  Description: C,
+  ActionArea: w,
+  Action: V
+});
+export {
+  V as AlertAction,
+  w as AlertActionArea,
+  ot as AlertContent,
+  C as AlertDescription,
+  x as AlertHeading,
+  M as AlertRoot,
+  ut as default
+};

package/dist/components/Alert/Alert.module.scss.js

@@ -0,0 +1,21 @@
+import './Alert.css';const e = "oc-Alert-module__content__9Fty2", o = "oc-Alert-module__panel__oJM9V", t = "oc-Alert-module__container__uQbiG", n = "oc-Alert-module__message__Wd9FZ", c = "oc-Alert-module__heading__xJ-uS", _ = "oc-Alert-module__description__ysmJi", a = "oc-Alert-module__actionArea__AD5Vn", s = "oc-Alert-module__action__a5XCP", l = {
+  content: e,
+  panel: o,
+  container: t,
+  message: n,
+  heading: c,
+  description: _,
+  actionArea: a,
+  action: s
+};
+export {
+  s as action,
+  a as actionArea,
+  t as container,
+  e as content,
+  l as default,
+  _ as description,
+  c as heading,
+  n as message,
+  o as panel
+};

package/dist/components/Alert.d.ts

@@ -0,0 +1,6 @@
+export * from '../ui/src/components/Alert/index'
+export {}
+import _default from '../ui/src/components/Alert/index'
+export default _default
+export * from '../ui/src/components/Alert/index'
+export {}

package/dist/components/Alert.js

@@ -0,0 +1,10 @@
+import { AlertAction as r, AlertActionArea as A, AlertContent as o, AlertDescription as l, AlertHeading as n, AlertRoot as i, default as a } from "./Alert/Alert.js";
+export {
+  r as AlertAction,
+  A as AlertActionArea,
+  o as AlertContent,
+  l as AlertDescription,
+  n as AlertHeading,
+  i as AlertRoot,
+  a as default
+};

package/dist/components/Background/Background.css

@@ -0,0 +1 @@
+.oc-Background-module__background__5VBzJ{position:relative;z-index:0;isolation:isolate;overflow:hidden;border-radius:var(--oc-background-radius);background-color:transparent;color:var(--oc-color-theme-label-normal);-webkit-backdrop-filter:var(--oc-background-backdrop-filter);backdrop-filter:var(--oc-background-backdrop-filter)}.oc-Background-module__background__5VBzJ:before,.oc-Background-module__background__5VBzJ:after{position:absolute;inset:0;border-radius:inherit;content:"";pointer-events:none}.oc-Background-module__background__5VBzJ:before{z-index:-2;background-color:var(--oc-background-back-color);opacity:var(--oc-background-back-opacity)}.oc-Background-module__background__5VBzJ:after{z-index:-1;background-color:var(--oc-background-front-color);opacity:var(--oc-background-front-opacity)}.oc-Background-module__background__5VBzJ{--oc-background-radius: 0;--oc-background-front-color: var(--oc-color-theme-fill-normal);--oc-background-back-color: var(--oc-color-theme-background-normal-normal);--oc-background-front-opacity: var(--oc-color-global-opacity-100);--oc-background-back-opacity: var(--oc-color-global-opacity-74);--oc-background-blur: var(--oc-atomic-blur-normal);--oc-background-backdrop-filter: blur(var(--oc-background-blur));--oc-background-icon-button-webkit-blend-opacity-add: .04}.oc-Background-module__light__QchgU{--oc-background-back-opacity: var(--oc-color-global-opacity-61)}.oc-Background-module__normal__47C3-{--oc-background-back-opacity: var(--oc-color-global-opacity-74)}.oc-Background-module__strong__MKLg0{--oc-background-back-opacity: var(--oc-color-global-opacity-88)}.oc-Background-module__backdropNormal__dngAN{--oc-background-blur: var(--oc-atomic-blur-normal)}.oc-Background-module__backdropCompact__wzXJ4{--oc-background-blur: var(--oc-atomic-blur-compact)}.oc-Background-module__saturationNormal__pQzgD{--oc-background-backdrop-filter: blur(var(--oc-background-blur))}.oc-Background-module__saturationVibrant__pZO4W{--oc-background-backdrop-filter: blur(var(--oc-background-blur)) saturate(150%) brightness(150%)}

package/dist/components/Background/Background.js

@@ -0,0 +1,45 @@
+import { jsx as k } from "react/jsx-runtime";
+import o from "./Background.module.scss.js";
+function h({
+  as: n,
+  children: t,
+  className: e = "",
+  variant: r = "normal",
+  frontColor: l = "var(--oc-color-theme-fill-normal)",
+  backColor: s = "var(--oc-color-theme-background-normal-normal)",
+  backdrop: a = "normal",
+  saturation: c = "normal",
+  ref: m,
+  style: d,
+  "data-oc-component": i = "background",
+  ...p
+}) {
+  const u = n ?? "div", b = {
+    ...d,
+    "--oc-background-front-color": l,
+    "--oc-background-back-color": s
+  }, f = [
+    o.background,
+    o[r],
+    o[`backdrop${a[0].toUpperCase()}${a.slice(1)}`],
+    o[`saturation${c[0].toUpperCase()}${c.slice(1)}`],
+    e
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ k(
+    u,
+    {
+      ref: m,
+      className: f,
+      style: b,
+      ...p,
+      "data-oc-component": i,
+      "data-oc-variant": r,
+      "data-oc-backdrop": a,
+      "data-oc-saturation": c,
+      children: t
+    }
+  );
+}
+export {
+  h as default
+};

package/dist/components/Background/Background.module.scss.js

@@ -0,0 +1,21 @@
+import './Background.css';const o = "oc-Background-module__background__5VBzJ", a = "oc-Background-module__light__QchgU", r = "oc-Background-module__normal__47C3-", c = "oc-Background-module__strong__MKLg0", n = "oc-Background-module__backdropNormal__dngAN", t = "oc-Background-module__backdropCompact__wzXJ4", _ = "oc-Background-module__saturationNormal__pQzgD", d = "oc-Background-module__saturationVibrant__pZO4W", u = {
+  background: o,
+  light: a,
+  normal: r,
+  strong: c,
+  backdropNormal: n,
+  backdropCompact: t,
+  saturationNormal: _,
+  saturationVibrant: d
+};
+export {
+  t as backdropCompact,
+  n as backdropNormal,
+  o as background,
+  u as default,
+  a as light,
+  r as normal,
+  _ as saturationNormal,
+  d as saturationVibrant,
+  c as strong
+};

package/dist/components/Background.d.ts

@@ -0,0 +1,6 @@
+export * from '../ui/src/components/Background/index'
+export {}
+import _default from '../ui/src/components/Background/index'
+export default _default
+export * from '../ui/src/components/Background/index'
+export {}

package/dist/components/Background.js

@@ -0,0 +1,4 @@
+import { default as o } from "./Background/Background.js";
+export {
+  o as default
+};

package/dist/components/BackgroundIconButton/BackgroundIconButton.css

@@ -0,0 +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}}