@orioncactuscorp/ui 1.15.1 → 1.16.0

package/dist/components/CheckMark/CheckMark.js

@@ -1,9 +1,9 @@
 'use client';
 import { jsxs as c, jsx as a } from "react/jsx-runtime";
-import k from "@orioncactuscorp/icons/orioncactus/CheckThick";
-import u from "../Interaction/Interaction.js";
+import u from "@orioncactuscorp/icons/orioncactus/CheckThick";
+import k from "../Interaction/Interaction.js";
 import e from "./CheckMark.module.scss.js";
-function g({
+function b({
   children: t,
   className: r = "",
   size: n = "medium",
@@ -35,8 +35,8 @@ function g({
           }
         ),
         /* @__PURE__ */ c("span", { "data-oc-part": "container", children: [
-          /* @__PURE__ */ a(u, { self: !0 }),
-          /* @__PURE__ */ a("span", { "data-oc-part": "icon", children: /* @__PURE__ */ a(k, { size: "custom" }) })
+          /* @__PURE__ */ a(k, { self: !0, touchTarget: !0 }),
+          /* @__PURE__ */ a("span", { "data-oc-part": "icon", children: /* @__PURE__ */ a(u, { size: "custom" }) })
         ] }),
         m ? /* @__PURE__ */ a("span", { "data-oc-part": "content", children: /* @__PURE__ */ a("span", { "data-oc-part": "label", children: t }) }) : null
       ]
@@ -44,5 +44,5 @@ function g({
   );
 }
 export {
-  g as default
+  b as default
 };

package/dist/components/Checkbox/Checkbox.css

@@ -1 +1 @@
-.oc-Checkbox-module__checkbox__D0D4S{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);display:inline-flex;position:relative;align-items:flex-start;gap:.5em;opacity:1;color:var(--oc-color-theme-label-normal);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)}@media(prefers-reduced-motion:reduce){.oc-Checkbox-module__checkbox__D0D4S{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)}}.oc-Checkbox-module__checkbox__D0D4S{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.oc-Checkbox-module__checkbox__D0D4S:has([data-oc-part=input]:disabled){opacity:var(--oc-color-global-opacity-43);cursor:not-allowed}.oc-Checkbox-module__checkbox__D0D4S{--oc-checkbox-background-color: var(--oc-color-theme-primary-normal);--oc-checkbox-color: var(--oc-color-theme-static-white)}.oc-Checkbox-module__fill__p-vFK{display:flex;inline-size:100%}.oc-Checkbox-module__small__UzHgE{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);--oc-checkbox-control-size: var(--oc-typo-height-body2);--oc-checkbox-content-height: var(--oc-typo-height-body2)}.oc-Checkbox-module__medium__HvVCs{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);--oc-checkbox-control-size: var(--oc-typo-height-body1);--oc-checkbox-content-height: var(--oc-typo-height-body1)}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=input]{position:absolute;opacity:0;pointer-events:none;inline-size:0;block-size:0}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=container]{position:relative;isolation:isolate;flex-shrink:0;padding:.125em;inline-size:var(--oc-checkbox-control-size);block-size:var(--oc-checkbox-control-size);--oc-interaction-inset-x: -.25em;--oc-interaction-inset-y: -.25em;--oc-interaction-z-index: 2;--oc-interaction-radius: var(--oc-atomic-radius-max)}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=wrapper]{display:flex;box-shadow:inset 0 0 0 1.5px currentcolor}@supports (-webkit-backdrop-filter: none){.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=wrapper]{box-shadow:inset 0 0 0 1px currentcolor}@media only screen and (resolution:2dppx){.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=wrapper]{box-shadow:inset 0 0 0 1.5px currentcolor}}@media only screen and (resolution:3dppx){.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=wrapper]{box-shadow:inset 0 0 0 1.6666px currentcolor}}}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=wrapper]{border-radius:.3125em;inline-size:100%;block-size:100%;color:var(--oc-color-theme-line-normal-normal);transition:color calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback),background-color 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-Checkbox-module__checkbox__D0D4S [data-oc-part=wrapper]{transition-property:color,background-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)}}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=icon-wrapper]{display:flex;position:relative;align-items:center;justify-content:center;inline-size:100%;block-size:100%;color:transparent}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=check],.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=indeterminate]{position:absolute;inset:0;transform:scale(max(0,1 + (.9 - 1) * var(--oc-motion-scale-factor-feedback)));color:transparent;transition:transform 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)}@media(prefers-reduced-motion:reduce){.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=check],.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=indeterminate]{transition-property: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-Checkbox-module__checkbox__D0D4S [data-oc-part=check],.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=indeterminate]{will-change:transform}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=check]>svg,.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=indeterminate]>svg{inline-size:100%;block-size:100%;padding:.0625rem}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=content]{display:flex;flex:1;align-items:flex-start;gap:var(--oc-space-item-gap-tiny);min-inline-size:0;padding-block:calc((var(--oc-checkbox-control-size) - var(--oc-checkbox-content-height)) / 2)}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=label]{-webkit-user-select:none;user-select:none}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=trailing-compound]{display:flex;flex-shrink:0;margin-inline-start:auto}.oc-Checkbox-module__fill__p-vFK [data-oc-part=label]{flex:1}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=input]:disabled+[data-oc-part=container] [data-oc-part=wrapper]{color:var(--oc-color-theme-line-normal-alternative)}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=input]:checked+[data-oc-part=container] [data-oc-part=wrapper],.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=input]:indeterminate+[data-oc-part=container] [data-oc-part=wrapper],.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=input][data-oc-indeterminate=true]+[data-oc-part=container] [data-oc-part=wrapper]{color:transparent;background-color:var(--oc-checkbox-background-color)}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=input]:checked:not([data-oc-indeterminate=true])+[data-oc-part=container] [data-oc-part=check],.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=input]:indeterminate+[data-oc-part=container] [data-oc-part=indeterminate],.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=input][data-oc-indeterminate=true]+[data-oc-part=container] [data-oc-part=indeterminate]{transform:scale(1);color:var(--oc-checkbox-color)}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=input]:focus-visible+[data-oc-part=container] [data-oc-part=wrapper]{outline:var(--oc-focus-ring-width) solid var(--oc-color-theme-focus-ring);outline-offset:var(--oc-focus-ring-offset)}@media(prefers-reduced-motion:reduce){.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=input]:checked:not([data-oc-indeterminate=true])+[data-oc-part=container] [data-oc-part=check],.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=input]:indeterminate+[data-oc-part=container] [data-oc-part=indeterminate],.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=input][data-oc-indeterminate=true]+[data-oc-part=container] [data-oc-part=indeterminate]{transform:none}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=check],.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=indeterminate]{will-change:auto}}
+.oc-Checkbox-module__checkbox__D0D4S{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);display:inline-flex;position:relative;align-items:flex-start;gap:.5em;opacity:1;color:var(--oc-color-theme-label-normal);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)}@media(prefers-reduced-motion:reduce){.oc-Checkbox-module__checkbox__D0D4S{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)}}.oc-Checkbox-module__checkbox__D0D4S{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.oc-Checkbox-module__checkbox__D0D4S:has([data-oc-part=input]:disabled){opacity:var(--oc-color-global-opacity-43);cursor:not-allowed}.oc-Checkbox-module__checkbox__D0D4S:has([data-oc-part=input]:disabled) [data-oc-component=interaction],.oc-Checkbox-module__checkbox__D0D4S:has([data-oc-part=input]:disabled) [data-oc-component=interaction]:after{pointer-events:none}.oc-Checkbox-module__fill__p-vFK{display:flex;inline-size:100%}.oc-Checkbox-module__small__UzHgE{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);--oc-checkbox-control-size: var(--oc-typo-height-body2);--oc-checkbox-content-height: var(--oc-typo-height-body2)}.oc-Checkbox-module__medium__HvVCs{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);--oc-checkbox-control-size: var(--oc-typo-height-body1);--oc-checkbox-content-height: var(--oc-typo-height-body1)}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=input]{position:absolute;opacity:0;pointer-events:none;inline-size:0;block-size:0}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=container]{position:relative;isolation:isolate;flex-shrink:0;padding:.125em;inline-size:var(--oc-checkbox-control-size);block-size:var(--oc-checkbox-control-size);--oc-interaction-inset-x: -.25em;--oc-interaction-inset-y: -.25em;--oc-interaction-z-index: 2;--oc-interaction-radius: var(--oc-atomic-radius-max);--_-interaction-default-touch-target-min: var(--oc-touch-target-min, 44px)}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=wrapper]{display:flex;box-shadow:inset 0 0 0 1.5px currentcolor}@supports (-webkit-backdrop-filter: none){.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=wrapper]{box-shadow:inset 0 0 0 1px currentcolor}@media only screen and (resolution:2dppx){.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=wrapper]{box-shadow:inset 0 0 0 1.5px currentcolor}}@media only screen and (resolution:3dppx){.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=wrapper]{box-shadow:inset 0 0 0 1.6666px currentcolor}}}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=wrapper]{border-radius:.3125em;inline-size:100%;block-size:100%;color:var(--oc-color-theme-line-normal-normal);transition:color calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback),background-color 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-Checkbox-module__checkbox__D0D4S [data-oc-part=wrapper]{transition-property:color,background-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)}}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=icon-wrapper]{display:flex;position:relative;align-items:center;justify-content:center;inline-size:100%;block-size:100%;color:transparent}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=check],.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=indeterminate]{position:absolute;inset:0;transform:scale(max(0,1 + (.9 - 1) * var(--oc-motion-scale-factor-feedback)));color:transparent;transition:transform 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)}@media(prefers-reduced-motion:reduce){.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=check],.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=indeterminate]{transition-property: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-Checkbox-module__checkbox__D0D4S [data-oc-part=check],.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=indeterminate]{will-change:transform}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=check]>svg,.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=indeterminate]>svg{inline-size:100%;block-size:100%;padding:.0625rem}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=content]{display:flex;flex:1;align-items:flex-start;gap:var(--oc-space-item-gap-tiny);min-inline-size:0;padding-block:calc((var(--oc-checkbox-control-size) - var(--oc-checkbox-content-height)) / 2)}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=label]{-webkit-user-select:none;user-select:none}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=trailing-compound]{display:flex;flex-shrink:0;margin-inline-start:auto}.oc-Checkbox-module__fill__p-vFK [data-oc-part=label]{flex:1}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=input]:disabled+[data-oc-part=container] [data-oc-part=wrapper]{color:var(--oc-color-theme-line-normal-alternative)}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=input]:checked+[data-oc-part=container] [data-oc-part=wrapper],.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=input]:indeterminate+[data-oc-part=container] [data-oc-part=wrapper],.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=input][data-oc-indeterminate=true]+[data-oc-part=container] [data-oc-part=wrapper]{color:transparent;background-color:var(--oc-checkbox-background-color, var(--oc-color-theme-primary-normal))}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=input]:checked:not([data-oc-indeterminate=true])+[data-oc-part=container] [data-oc-part=check],.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=input]:indeterminate+[data-oc-part=container] [data-oc-part=indeterminate],.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=input][data-oc-indeterminate=true]+[data-oc-part=container] [data-oc-part=indeterminate]{transform:scale(1);color:var(--oc-checkbox-color, var(--oc-color-theme-static-white))}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=input]:focus-visible+[data-oc-part=container] [data-oc-part=wrapper]{outline:var(--oc-focus-ring-width) solid var(--oc-color-theme-focus-ring);outline-offset:var(--oc-focus-ring-offset)}@media(prefers-reduced-motion:reduce){.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=input]:checked:not([data-oc-indeterminate=true])+[data-oc-part=container] [data-oc-part=check],.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=input]:indeterminate+[data-oc-part=container] [data-oc-part=indeterminate],.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=input][data-oc-indeterminate=true]+[data-oc-part=container] [data-oc-part=indeterminate]{transform:none}.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=check],.oc-Checkbox-module__checkbox__D0D4S [data-oc-part=indeterminate]{will-change:auto}}

package/dist/components/Checkbox/Checkbox.js

@@ -2,21 +2,21 @@
 import { jsxs as o, jsx as a } from "react/jsx-runtime";
 import { useRef as x, useEffect as b } from "react";
 import y from "@orioncactuscorp/icons/orioncactus/CheckThick";
-import C from "@orioncactuscorp/icons/orioncactus/LineHorizontalThick";
-import g from "../Interaction/Interaction.js";
-import { mergeRefs as j } from "../../utils/mergeRefs.js";
+import g from "@orioncactuscorp/icons/orioncactus/LineHorizontalThick";
+import C from "../Interaction/Interaction.js";
+import { mergeRefs as T } from "../../utils/mergeRefs.js";
 import i from "./Checkbox.module.scss.js";
 function B({
-  children: n,
+  children: r,
   className: d = "",
   size: p = "medium",
   fill: l = !1,
   indeterminate: e = !1,
-  trailingCompound: r,
+  trailingCompound: n,
   onChange: s,
   onCheckedChange: f,
-  ref: m,
-  "data-oc-interaction-variant": u,
+  ref: u,
+  "data-oc-interaction-variant": m,
   ...h
 }) {
   const c = x(null);
@@ -25,7 +25,7 @@ function B({
   }, [e]);
   const k = (t) => {
     s?.(t), f?.(t.currentTarget.checked);
-  }, v = n !== void 0 || r !== void 0;
+  }, v = r !== void 0 || n !== void 0;
   return /* @__PURE__ */ o(
     "label",
     {
@@ -38,13 +38,13 @@ function B({
       "data-oc-component": "checkbox",
       "data-oc-size": p,
       "data-oc-fill": l ? "true" : void 0,
-      "data-oc-interaction-variant": u,
+      "data-oc-interaction-variant": m,
       children: [
         /* @__PURE__ */ a(
           "input",
           {
             ...h,
-            ref: j(c, m),
+            ref: T(c, u),
             type: "checkbox",
             onChange: k,
             "data-indeterminate": e ? "" : void 0,
@@ -53,15 +53,15 @@ function B({
           }
         ),
         /* @__PURE__ */ o("span", { "data-oc-part": "container", children: [
-          /* @__PURE__ */ a(g, { self: !0 }),
+          /* @__PURE__ */ a(C, { self: !0, touchTarget: !0 }),
           /* @__PURE__ */ a("span", { "data-oc-part": "wrapper", children: /* @__PURE__ */ o("span", { "data-oc-part": "icon-wrapper", children: [
             /* @__PURE__ */ a("span", { "data-oc-part": "check", children: /* @__PURE__ */ a(y, { size: "custom" }) }),
-            /* @__PURE__ */ a("span", { "data-oc-part": "indeterminate", children: /* @__PURE__ */ a(C, { size: "custom" }) })
+            /* @__PURE__ */ a("span", { "data-oc-part": "indeterminate", children: /* @__PURE__ */ a(g, { size: "custom" }) })
           ] }) })
         ] }),
         v ? /* @__PURE__ */ o("span", { "data-oc-part": "content", children: [
-          n !== void 0 ? /* @__PURE__ */ a("span", { "data-oc-part": "label", children: n }) : null,
-          r ? /* @__PURE__ */ a(
+          r !== void 0 ? /* @__PURE__ */ a("span", { "data-oc-part": "label", children: r }) : null,
+          n ? /* @__PURE__ */ a(
             "span",
             {
               "data-oc-part": "trailing-compound",
@@ -70,7 +70,7 @@ function B({
               onKeyDown: (t) => {
                 (t.key === "Enter" || t.key === " ") && t.preventDefault();
               },
-              children: r
+              children: n
             }
           ) : null
         ] }) : null

package/dist/components/Field/Field.css

@@ -1 +1 @@
-.oc-Field-module__field__dnDYN{--oc-field-label-max-inline-size: 35%;--oc-field-label-row-block-size: calc(var(--oc-typo-height-body1) + var(--oc-space-item-padding-xsmall) + var(--oc-space-item-padding-xsmall));display:flex;flex-direction:column;gap:var(--oc-space-item-gap-xsmall);min-inline-size:0}.oc-Field-module__field__dnDYN[data-oc-orientation=horizontal]{display:grid;grid-template-columns:minmax(0,min(var(--oc-field-label-inline-size, var(--oc-field-label-max-inline-size)),var(--oc-field-label-max-inline-size))) minmax(0,1fr);align-items:start;gap:var(--oc-space-item-gap-xsmall) var(--oc-space-item-gap-medium)}.oc-Field-module__field__dnDYN[data-oc-orientation=horizontal]>[data-oc-component=field-label]{grid-column:1;inline-size:100%;min-block-size:var(--oc-field-label-row-block-size);align-items:center}.oc-Field-module__field__dnDYN[data-oc-orientation=horizontal]>[data-oc-component=field-control],.oc-Field-module__field__dnDYN[data-oc-orientation=horizontal]>[data-oc-component=field-message],.oc-Field-module__field__dnDYN[data-oc-orientation=horizontal]>[data-oc-component=field-error-message]{grid-column:2}.oc-Field-module__label__wdqdl{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);display:flex;gap:var(--oc-space-item-gap-atom);min-inline-size:0;color:var(--oc-color-theme-label-alternative)}.oc-Field-module__label__wdqdl>[data-oc-part=required-mark]{color:var(--oc-color-theme-primary-normal)}.oc-Field-module__control__93bs3{min-inline-size:0}.oc-Field-module__message__uO8Fl{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);margin:0}.oc-Field-module__neutral__e0QpV{color:var(--oc-color-theme-label-alternative)}.oc-Field-module__danger__nP12-{color:var(--oc-color-theme-status-negative)}
+.oc-Field-module__field__dnDYN{--oc-field-label-row-block-size: calc(var(--oc-typo-height-body1) + var(--oc-space-item-padding-xsmall) + var(--oc-space-item-padding-xsmall));display:flex;flex-direction:column;gap:var(--oc-space-item-gap-xsmall);min-inline-size:0}.oc-Field-module__field__dnDYN[data-oc-orientation=horizontal]{display:grid;grid-template-columns:minmax(0,min(var(--oc-field-label-inline-size, var(--oc-field-label-max-inline-size, 35%)),var(--oc-field-label-max-inline-size, 35%))) minmax(0,1fr);align-items:start;gap:var(--oc-space-item-gap-xsmall) var(--oc-space-item-gap-medium)}.oc-Field-module__field__dnDYN[data-oc-orientation=horizontal]>[data-oc-component=field-label]{grid-column:1;inline-size:100%;min-block-size:var(--oc-field-label-row-block-size);align-items:center}.oc-Field-module__field__dnDYN[data-oc-orientation=horizontal]>[data-oc-component=field-control],.oc-Field-module__field__dnDYN[data-oc-orientation=horizontal]>[data-oc-component=field-message],.oc-Field-module__field__dnDYN[data-oc-orientation=horizontal]>[data-oc-component=field-error-message]{grid-column:2}.oc-Field-module__label__wdqdl{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);display:flex;gap:var(--oc-space-item-gap-atom);min-inline-size:0;color:var(--oc-color-theme-label-alternative)}.oc-Field-module__label__wdqdl>[data-oc-part=required-mark]{color:var(--oc-color-theme-primary-normal)}.oc-Field-module__control__93bs3{min-inline-size:0}.oc-Field-module__message__uO8Fl{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);margin:0}.oc-Field-module__neutral__e0QpV{color:var(--oc-color-theme-label-alternative)}.oc-Field-module__danger__nP12-{color:var(--oc-color-theme-status-negative)}

package/dist/components/IconButton/IconButton.css

@@ -1 +1 @@
-.oc-IconButton-module__iconButton__PmpB8{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:color,transform;transition: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-IconButton-module__iconButton__PmpB8{transition-property: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-IconButton-module__iconButton__PmpB8{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;--oc-interaction-inset-x: -.5em;--oc-interaction-inset-y: -.5em;--oc-interaction-radius: var(--oc-atomic-radius-max);--oc-interaction-scale: .95;--oc-interaction-time: .225s}.oc-IconButton-module__iconButton__PmpB8:focus-visible:not(:disabled,[aria-disabled=true])>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-focus)}@media(hover:hover){.oc-IconButton-module__iconButton__PmpB8:hover:not(:disabled,[aria-disabled=true])>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-hover);transform:scale(1)}}.oc-IconButton-module__iconButton__PmpB8:active:not(:disabled,[aria-disabled=true]){transform:scale(max(0,1 + (.95 - 1) * var(--oc-motion-scale-factor-feedback)))}.oc-IconButton-module__iconButton__PmpB8:active:not(:disabled,[aria-disabled=true])>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-active);transform:scale(1)}.oc-IconButton-module__iconButton__PmpB8:where(.oc-IconButton-module__primary__qjfR5){--oc-interaction-color: var(--oc-color-theme-primary-normal);color:var(--oc-color-theme-primary-normal)}.oc-IconButton-module__iconButton__PmpB8:where(.oc-IconButton-module__normal__0kcFm){color:var(--oc-color-theme-label-normal)}.oc-IconButton-module__iconButton__PmpB8:disabled,.oc-IconButton-module__iconButton__PmpB8[aria-disabled=true]{color:var(--oc-color-theme-label-disable);cursor:not-allowed}@media(prefers-reduced-motion:reduce){.oc-IconButton-module__iconButton__PmpB8:active:not(:disabled,[aria-disabled=true]){transform:none}}
+.oc-IconButton-module__iconButton__PmpB8{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:color,transform;transition: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-IconButton-module__iconButton__PmpB8{transition-property: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-IconButton-module__iconButton__PmpB8{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;--oc-interaction-inset-x: -.5em;--oc-interaction-inset-y: -.5em;--oc-interaction-radius: var(--oc-atomic-radius-max);--oc-interaction-scale: .95;--oc-interaction-time: .225s;--_-interaction-default-touch-target-min: var(--oc-touch-target-min, 44px)}.oc-IconButton-module__iconButton__PmpB8:focus-visible:not(:disabled,[aria-disabled=true])>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-focus)}@media(hover:hover){.oc-IconButton-module__iconButton__PmpB8:hover:not(:disabled,[aria-disabled=true])>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-hover);--_-interaction-state-scale: 1}}.oc-IconButton-module__iconButton__PmpB8:active:not(:disabled,[aria-disabled=true]){transform:scale(max(0,1 + (.95 - 1) * var(--oc-motion-scale-factor-feedback)))}.oc-IconButton-module__iconButton__PmpB8:active:not(:disabled,[aria-disabled=true])>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-active);--_-interaction-state-scale: 1}.oc-IconButton-module__iconButton__PmpB8:where(.oc-IconButton-module__primary__qjfR5){--oc-interaction-color: var(--oc-color-theme-primary-normal);color:var(--oc-color-theme-primary-normal)}.oc-IconButton-module__iconButton__PmpB8:where(.oc-IconButton-module__normal__0kcFm){color:var(--oc-color-theme-label-normal)}.oc-IconButton-module__iconButton__PmpB8:disabled,.oc-IconButton-module__iconButton__PmpB8[aria-disabled=true]{color:var(--oc-color-theme-label-disable);cursor:not-allowed}.oc-IconButton-module__iconButton__PmpB8:disabled>[data-oc-component=interaction],.oc-IconButton-module__iconButton__PmpB8:disabled>[data-oc-component=interaction]:after,.oc-IconButton-module__iconButton__PmpB8[aria-disabled=true]>[data-oc-component=interaction],.oc-IconButton-module__iconButton__PmpB8[aria-disabled=true]>[data-oc-component=interaction]:after{pointer-events:none}@media(prefers-reduced-motion:reduce){.oc-IconButton-module__iconButton__PmpB8:active:not(:disabled,[aria-disabled=true]){transform:none}}

package/dist/components/IconButton/IconButton.js

@@ -1,7 +1,7 @@
 'use client';
-import { jsx as c, jsxs as g, Fragment as j } from "react/jsx-runtime";
-import { isValidElement as y, cloneElement as B } from "react";
-import I from "../Interaction/Interaction.js";
+import { jsx as c, jsxs as P, Fragment as h } from "react/jsx-runtime";
+import { isValidElement as j, cloneElement as y } from "react";
+import B from "../Interaction/Interaction.js";
 import f from "../internal/Pressable.js";
 import b from "./IconButton.module.scss.js";
 function F({
@@ -13,7 +13,7 @@ function F({
   size: t = 24,
   variant: n = "normal",
   viewBox: l,
-  color: E,
+  color: g,
   ref: m,
   "aria-label": a,
   "aria-labelledby": r,
@@ -22,13 +22,13 @@ function F({
   process.env.NODE_ENV !== "production" && !a && !r && console.warn(
     "[@orioncactuscorp/ui] IconButton requires `aria-label` or `aria-labelledby` for screen reader accessibility."
   );
-  const P = y(o) ? B(o, {
+  const E = j(o) ? y(o, {
     size: t,
-    color: E,
+    color: g,
     ...l ? { viewBox: l } : {}
-  }) : o, p = /* @__PURE__ */ g(j, { children: [
-    P,
-    /* @__PURE__ */ c(I, {})
+  }) : o, p = /* @__PURE__ */ P(h, { children: [
+    E,
+    /* @__PURE__ */ c(B, { touchTarget: !0 })
   ] }), d = [b.iconButton, b[n], N].filter(Boolean).join(" ");
   return i !== void 0 ? /* @__PURE__ */ c(
     f,

package/dist/components/Interaction/Interaction.css

@@ -1 +1 @@
-:where([data-oc-interaction-variant=light]){--oc-interaction-opacity-factor: .75}:where([data-oc-interaction-variant=normal]){--oc-interaction-opacity-factor: 1}:where([data-oc-interaction-variant=strong]){--oc-interaction-opacity-factor: 1.5}.oc-Interaction-module__interaction__zv4OT{position:absolute;inset:var(--oc-interaction-inset-y, 0) var(--oc-interaction-inset-x, 0);z-index:var(--oc-interaction-z-index, 1);width:calc(100% - var(--oc-interaction-inset-x, 0) * 2);height:calc(100% - var(--oc-interaction-inset-y, 0) * 2);will-change:opacity;opacity:0;transform:scale(max(0,1 + (var(--oc-interaction-scale, 1) - 1) * var(--oc-motion-scale-factor-feedback)));transition:opacity calc(var(--oc-interaction-time, 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-interaction-time, 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-Interaction-module__interaction__zv4OT{transition-property:opacity;transition-duration:calc(var(--oc-interaction-time, 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-Interaction-module__interaction__zv4OT{background-color:var(--oc-interaction-color, var(--oc-color-theme-label-normal));box-sizing:content-box;border-radius:var(--oc-interaction-radius, 0);pointer-events:none;--oc-interaction-default-opacity-factor: 1;--oc-interaction-opacity-hover: calc(var(--oc-color-global-opacity-5) * var(--oc-interaction-opacity-factor, var(--oc-interaction-default-opacity-factor)));--oc-interaction-opacity-focus: calc(var(--oc-color-global-opacity-8) * var(--oc-interaction-opacity-factor, var(--oc-interaction-default-opacity-factor)));--oc-interaction-opacity-active: calc(var(--oc-color-global-opacity-12) * var(--oc-interaction-opacity-factor, var(--oc-interaction-default-opacity-factor)))}.oc-Interaction-module__interaction__zv4OT:where(.oc-Interaction-module__light__4mALh){--oc-interaction-default-opacity-factor: .75}.oc-Interaction-module__interaction__zv4OT:where(.oc-Interaction-module__strong__7GNht){--oc-interaction-default-opacity-factor: 1.5}.oc-Interaction-module__interaction__zv4OT[data-oc-self=true]{pointer-events:auto}@media(hover:hover){.oc-Interaction-module__interaction__zv4OT[data-oc-self=true]:hover{opacity:var(--oc-interaction-opacity-hover);transform:scale(1)}}.oc-Interaction-module__interaction__zv4OT[data-oc-self=true]:active{opacity:var(--oc-interaction-opacity-active);transform:scale(1)}@media(prefers-reduced-motion:reduce)and (hover:hover){.oc-Interaction-module__interaction__zv4OT[data-oc-self=true]:hover{transform:none}}@media(prefers-reduced-motion:reduce){.oc-Interaction-module__interaction__zv4OT[data-oc-self=true]:active{transform:none}}
+:where([data-oc-interaction-variant=light]){--oc-interaction-opacity-factor: .75}:where([data-oc-interaction-variant=normal]){--oc-interaction-opacity-factor: 1}:where([data-oc-interaction-variant=strong]){--oc-interaction-opacity-factor: 1.5}:where(button,a,label,summary,[role=button],[role=link],[role=checkbox],[role=radio],[role=switch],[role=tab]):where(:has(>.oc-Interaction-module__interaction__zv4OT[data-oc-touch-target=true])){-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.oc-Interaction-module__interaction__zv4OT{position:absolute;inset:var(--oc-interaction-inset-y, 0) var(--oc-interaction-inset-x, 0);z-index:var(--oc-interaction-z-index, 1);width:calc(100% - var(--oc-interaction-inset-x, 0) * 2);height:calc(100% - var(--oc-interaction-inset-y, 0) * 2);will-change:opacity;opacity:0;transition:opacity calc(var(--oc-interaction-time, 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-Interaction-module__interaction__zv4OT{transition-property:opacity;transition-duration:calc(var(--oc-interaction-time, 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)}}.oc-Interaction-module__interaction__zv4OT{box-sizing:content-box;border-radius:var(--oc-interaction-radius, 0);pointer-events:none;--oc-interaction-default-opacity-factor: 1;--oc-interaction-opacity-hover: calc(var(--oc-color-global-opacity-5) * var(--oc-interaction-opacity-factor, var(--oc-interaction-default-opacity-factor)));--oc-interaction-opacity-focus: calc(var(--oc-color-global-opacity-8) * var(--oc-interaction-opacity-factor, var(--oc-interaction-default-opacity-factor)));--oc-interaction-opacity-active: calc(var(--oc-color-global-opacity-12) * var(--oc-interaction-opacity-factor, var(--oc-interaction-default-opacity-factor)))}.oc-Interaction-module__interaction__zv4OT:before,.oc-Interaction-module__interaction__zv4OT:after{position:absolute;content:""}.oc-Interaction-module__interaction__zv4OT:before{inset:0;transform:scale(max(0,1 + (var(--_-interaction-state-scale, var(--oc-interaction-scale, 1)) - 1) * var(--oc-motion-scale-factor-feedback)));border-radius:inherit;background-color:var(--oc-interaction-color, var(--oc-color-theme-label-normal));transition:transform calc(var(--oc-interaction-time, 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-Interaction-module__interaction__zv4OT:before{transition:none;transform:none}}.oc-Interaction-module__interaction__zv4OT:after{inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%);inline-size:max(100%,var(--oc-interaction-touch-target-min, var(--_-interaction-default-touch-target-min, 0px)));block-size:max(100%,var(--oc-interaction-touch-target-min, var(--_-interaction-default-touch-target-min, 0px)));pointer-events:none}.oc-Interaction-module__interaction__zv4OT[data-oc-touch-target=true]:after{pointer-events:auto}.oc-Interaction-module__interaction__zv4OT:dir(rtl):after{transform:translate(50%,-50%)}.oc-Interaction-module__interaction__zv4OT:where(.oc-Interaction-module__light__4mALh){--oc-interaction-default-opacity-factor: .75}.oc-Interaction-module__interaction__zv4OT:where(.oc-Interaction-module__strong__7GNht){--oc-interaction-default-opacity-factor: 1.5}.oc-Interaction-module__interaction__zv4OT[data-oc-self=true]{pointer-events:auto}@media(hover:hover){.oc-Interaction-module__interaction__zv4OT[data-oc-self=true]:hover{opacity:var(--oc-interaction-opacity-hover);--_-interaction-state-scale: 1}}.oc-Interaction-module__interaction__zv4OT[data-oc-self=true]:active{opacity:var(--oc-interaction-opacity-active);--_-interaction-state-scale: 1}@media(prefers-reduced-motion:reduce){.oc-Interaction-module__interaction__zv4OT:before{transform:none}}

package/dist/components/Interaction/Interaction.js

@@ -1,23 +1,30 @@
-import { jsx as s } from "react/jsx-runtime";
-import { forwardRef as c } from "react";
-import t from "./Interaction.module.scss.js";
-const p = c(
-  function({ variant: o = "normal", self: n = !1, className: r = "", ...a }, e) {
-    const i = o !== "normal" ? t[o] : "";
-    return /* @__PURE__ */ s(
+import { jsx as c } from "react/jsx-runtime";
+import { forwardRef as l } from "react";
+import o from "./Interaction.module.scss.js";
+const u = l(
+  function({
+    variant: t = "normal",
+    self: a = !1,
+    touchTarget: r = !1,
+    className: e = "",
+    ...n
+  }, i) {
+    const s = t !== "normal" ? o[t] : "";
+    return /* @__PURE__ */ c(
       "span",
       {
-        ref: e,
-        className: [t.interaction, i, r].filter(Boolean).join(" "),
-        ...a,
+        ref: i,
+        className: [o.interaction, s, e].filter(Boolean).join(" "),
+        ...n,
         "aria-hidden": "true",
         role: "presentation",
         "data-oc-component": "interaction",
-        "data-oc-self": n ? "true" : void 0
+        "data-oc-self": a ? "true" : void 0,
+        "data-oc-touch-target": r ? "true" : void 0
       }
     );
   }
 );
 export {
-  p as default
+  u as default
 };