@orioncactuscorp/ui 1.2.0 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (120) hide show
  1. package/README.md +56 -27
  2. package/dist/components/Accordion/Accordion.css +1 -1
  3. package/dist/components/Accordion/Accordion.js +39 -38
  4. package/dist/components/Accordion/Accordion.module.scss.js +5 -5
  5. package/dist/components/ActionArea/ActionArea.css +1 -1
  6. package/dist/components/ActionArea/ActionArea.js +101 -71
  7. package/dist/components/ActionArea/ActionAreaLayout.css +1 -0
  8. package/dist/components/ActionArea/ActionAreaLayout.js +145 -0
  9. package/dist/components/ActionArea/ActionAreaLayout.module.scss.js +11 -0
  10. package/dist/components/ActionArea.js +10 -4
  11. package/dist/components/Alert/Alert.css +1 -1
  12. package/dist/components/BackgroundIconButton/BackgroundIconButton.css +1 -1
  13. package/dist/components/BackgroundIconButton/BackgroundIconButton.js +72 -52
  14. package/dist/components/Badge/Badge.css +1 -1
  15. package/dist/components/Badge/Badge.js +69 -25
  16. package/dist/components/Button/Button.css +1 -1
  17. package/dist/components/Button/Button.js +79 -139
  18. package/dist/components/Cell/Cell.css +1 -1
  19. package/dist/components/Cell/Cell.js +98 -88
  20. package/dist/components/CheckMark/CheckMark.css +1 -1
  21. package/dist/components/CheckMark/CheckMark.js +20 -18
  22. package/dist/components/CheckMark/CheckMark.module.scss.js +7 -3
  23. package/dist/components/Checkbox/Checkbox.css +1 -1
  24. package/dist/components/Checkbox/Checkbox.module.scss.js +10 -8
  25. package/dist/components/Field/Field.css +1 -1
  26. package/dist/components/Fieldset/Fieldset.css +1 -1
  27. package/dist/components/IconButton/IconButton.css +1 -1
  28. package/dist/components/IconButton/IconButton.js +48 -29
  29. package/dist/components/Interaction/Interaction.css +1 -1
  30. package/dist/components/Loading/Loading.css +1 -1
  31. package/dist/components/Loading/Loading.js +10 -10
  32. package/dist/components/Menu/Menu.css +1 -1
  33. package/dist/components/Modal/Modal.css +1 -1
  34. package/dist/components/Modal/Modal.js +377 -346
  35. package/dist/components/Modal/useModalDrag.js +654 -614
  36. package/dist/components/Radio/Radio.css +1 -1
  37. package/dist/components/Radio/Radio.module.scss.js +9 -7
  38. package/dist/components/ScrollArea/ScrollArea.css +1 -1
  39. package/dist/components/SectionHeader/SectionHeader.css +1 -1
  40. package/dist/components/Select/Select.css +1 -1
  41. package/dist/components/Select/Select.js +15 -15
  42. package/dist/components/Select/SelectContent.css +1 -1
  43. package/dist/components/Switch/Switch.css +1 -1
  44. package/dist/components/Switch/Switch.module.scss.js +6 -4
  45. package/dist/components/TextArea/TextArea.css +1 -1
  46. package/dist/components/TextArea/TextAreaContent.css +1 -1
  47. package/dist/components/TextButton/TextButton.css +1 -1
  48. package/dist/components/TextInput/TextInput.css +1 -1
  49. package/dist/components/TextInput/TextInputContent.css +1 -1
  50. package/dist/components/Tooltip/Tooltip.css +1 -1
  51. package/dist/components/internal/Pressable.js +90 -0
  52. package/dist/foundations/atomic.css +1 -1
  53. package/dist/foundations/motion.css +1 -1
  54. package/dist/foundations/typo.css +1 -1
  55. package/dist/foundations.css +3 -3
  56. package/dist/index.js +102 -96
  57. package/dist/react/motion.js +109 -106
  58. package/dist/styles.css +32 -31
  59. package/dist/ui/src/components/Accordion/Accordion.d.ts.map +1 -1
  60. package/dist/ui/src/components/ActionArea/ActionArea.d.ts +1 -1
  61. package/dist/ui/src/components/ActionArea/ActionArea.d.ts.map +1 -1
  62. package/dist/ui/src/components/ActionArea/ActionAreaLayout.d.ts +12 -0
  63. package/dist/ui/src/components/ActionArea/ActionAreaLayout.d.ts.map +1 -0
  64. package/dist/ui/src/components/ActionArea/index.d.ts +2 -1
  65. package/dist/ui/src/components/ActionArea/index.d.ts.map +1 -1
  66. package/dist/ui/src/components/ActionArea/types.d.ts +13 -2
  67. package/dist/ui/src/components/ActionArea/types.d.ts.map +1 -1
  68. package/dist/ui/src/components/BackgroundIconButton/BackgroundIconButton.d.ts +1 -1
  69. package/dist/ui/src/components/BackgroundIconButton/BackgroundIconButton.d.ts.map +1 -1
  70. package/dist/ui/src/components/BackgroundIconButton/index.d.ts +1 -1
  71. package/dist/ui/src/components/BackgroundIconButton/index.d.ts.map +1 -1
  72. package/dist/ui/src/components/BackgroundIconButton/types.d.ts +6 -5
  73. package/dist/ui/src/components/BackgroundIconButton/types.d.ts.map +1 -1
  74. package/dist/ui/src/components/Badge/Badge.d.ts +1 -1
  75. package/dist/ui/src/components/Badge/Badge.d.ts.map +1 -1
  76. package/dist/ui/src/components/Badge/types.d.ts +19 -2
  77. package/dist/ui/src/components/Badge/types.d.ts.map +1 -1
  78. package/dist/ui/src/components/Button/Button.d.ts.map +1 -1
  79. package/dist/ui/src/components/Button/types.d.ts +3 -7
  80. package/dist/ui/src/components/Button/types.d.ts.map +1 -1
  81. package/dist/ui/src/components/Cell/Cell.d.ts.map +1 -1
  82. package/dist/ui/src/components/CheckMark/CheckMark.d.ts +1 -1
  83. package/dist/ui/src/components/CheckMark/CheckMark.d.ts.map +1 -1
  84. package/dist/ui/src/components/CheckMark/index.d.ts +1 -1
  85. package/dist/ui/src/components/CheckMark/index.d.ts.map +1 -1
  86. package/dist/ui/src/components/CheckMark/types.d.ts +2 -0
  87. package/dist/ui/src/components/CheckMark/types.d.ts.map +1 -1
  88. package/dist/ui/src/components/IconButton/IconButton.d.ts +1 -1
  89. package/dist/ui/src/components/IconButton/IconButton.d.ts.map +1 -1
  90. package/dist/ui/src/components/IconButton/index.d.ts +1 -1
  91. package/dist/ui/src/components/IconButton/index.d.ts.map +1 -1
  92. package/dist/ui/src/components/IconButton/types.d.ts +6 -5
  93. package/dist/ui/src/components/IconButton/types.d.ts.map +1 -1
  94. package/dist/ui/src/components/Modal/Modal.d.ts.map +1 -1
  95. package/dist/ui/src/components/Modal/contexts.d.ts +1 -0
  96. package/dist/ui/src/components/Modal/contexts.d.ts.map +1 -1
  97. package/dist/ui/src/components/Modal/types.d.ts +7 -6
  98. package/dist/ui/src/components/Modal/types.d.ts.map +1 -1
  99. package/dist/ui/src/components/Modal/useModalDrag.d.ts.map +1 -1
  100. package/dist/ui/src/components/internal/Pressable.d.ts +19 -0
  101. package/dist/ui/src/components/internal/Pressable.d.ts.map +1 -0
  102. package/dist/ui/src/index.d.ts +5 -5
  103. package/dist/ui/src/index.d.ts.map +1 -1
  104. package/dist/ui/src/react/motion/index.d.ts +9 -8
  105. package/dist/ui/src/react/motion/index.d.ts.map +1 -1
  106. package/dist/ui/src/utils/motion.d.ts +15 -14
  107. package/dist/ui/src/utils/motion.d.ts.map +1 -1
  108. package/dist/utils/motion.js +282 -183
  109. package/dist/vscode/oc-ui-vars.css +31 -16
  110. package/package.json +2 -2
  111. package/src/scss/foundations/atomic.scss +12 -10
  112. package/src/scss/foundations/atomic.test.ts +34 -0
  113. package/src/scss/foundations/motion.scss +30 -16
  114. package/src/scss/foundations/typo.scss +1 -1
  115. package/src/scss/index.scss +1 -0
  116. package/src/scss/mixins/_motion.scss +168 -77
  117. package/src/scss/mixins/_motion.test.ts +137 -54
  118. package/src/scss/mixins/_radius.scss +3 -0
  119. package/src/scss/mixins/_radius.test.ts +52 -0
  120. package/src/scss/mixins/_typo.scss +2 -2
@@ -1,34 +1,78 @@
1
- import { jsx as e } from "react/jsx-runtime";
2
- import a from "./Badge.module.scss.js";
3
- function i({
4
- children: n,
5
- className: s = "",
6
- variant: o = "normal",
7
- size: t = "small",
8
- padding: c = !1,
9
- ref: d,
10
- ...l
1
+ import { jsx as t, jsxs as j, Fragment as x } from "react/jsx-runtime";
2
+ import B from "../Interaction/Interaction.js";
3
+ import n from "./Badge.module.scss.js";
4
+ function S({
5
+ children: u,
6
+ className: m = "",
7
+ style: r,
8
+ variant: a = "normal",
9
+ size: o = "small",
10
+ padding: b = !1,
11
+ interactive: f,
12
+ href: e,
13
+ ...c
11
14
  }) {
12
- const r = [
13
- a.badge,
14
- a[o],
15
- a[t],
16
- c ? a.padding : "",
17
- s
18
- ].filter(Boolean).join(" ");
19
- return /* @__PURE__ */ e(
15
+ const g = e !== void 0 || f === !0, s = [
16
+ n.badge,
17
+ n[a],
18
+ n[o],
19
+ b ? n.padding : "",
20
+ m
21
+ ].filter(Boolean).join(" "), d = /* @__PURE__ */ j(x, { children: [
22
+ /* @__PURE__ */ t("span", { "data-oc-part": "content", children: u }),
23
+ g ? /* @__PURE__ */ t(B, { self: !0 }) : null
24
+ ] });
25
+ if (e !== void 0) {
26
+ const i = c, { ref: p, ...l } = i;
27
+ return /* @__PURE__ */ t(
28
+ "a",
29
+ {
30
+ ...l,
31
+ ref: p,
32
+ className: s,
33
+ style: r,
34
+ href: e,
35
+ "data-oc-component": "badge",
36
+ "data-oc-variant": a,
37
+ "data-oc-size": o,
38
+ "data-oc-interactive": "true",
39
+ children: d
40
+ }
41
+ );
42
+ }
43
+ if (f === !0) {
44
+ const i = c, { type: p = "button", ref: l, ...P } = i;
45
+ return /* @__PURE__ */ t(
46
+ "button",
47
+ {
48
+ ...P,
49
+ ref: l,
50
+ className: s,
51
+ style: r,
52
+ type: p,
53
+ "data-oc-component": "badge",
54
+ "data-oc-variant": a,
55
+ "data-oc-size": o,
56
+ "data-oc-interactive": "true",
57
+ children: d
58
+ }
59
+ );
60
+ }
61
+ const v = c, { ref: h, ...N } = v;
62
+ return /* @__PURE__ */ t(
20
63
  "span",
21
64
  {
22
- ref: d,
23
- className: r,
24
- ...l,
65
+ ...N,
66
+ ref: h,
67
+ className: s,
68
+ style: r,
25
69
  "data-oc-component": "badge",
26
- "data-oc-variant": o,
27
- "data-oc-size": t,
28
- children: /* @__PURE__ */ e("span", { "data-oc-part": "content", children: n })
70
+ "data-oc-variant": a,
71
+ "data-oc-size": o,
72
+ children: d
29
73
  }
30
74
  );
31
75
  }
32
76
  export {
33
- i as default
77
+ S as default
34
78
  };
@@ -1 +1 @@
1
- .oc-Button-module__button__18Bed{position:relative;display:inline-flex;align-items:center;justify-content:center;appearance:none;border:none;background-color:transparent;padding:0;cursor:pointer;text-decoration:none;color:inherit;will-change:transform;transition:transform calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-scale) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback)}@media(prefers-reduced-motion:reduce){.oc-Button-module__button__18Bed{transition:none;transform:none}}.oc-Button-module__button__18Bed{-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;font-size:calc(var(--oc-typo-size-body1) * var(--oc-typo-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);display:inline-flex;position:relative;overflow:hidden;flex-direction:column;gap:0;box-shadow:inset 0 0 0 1px var(--oc-button-border-color, transparent);border-radius:var(--oc-button-radius);background-color:var(--oc-button-background-color);padding:var(--oc-button-padding-y) var(--oc-button-padding-x);min-block-size:calc(var(--oc-button-content-height) + var(--oc-button-padding-y) * 2);color:var(--oc-button-color);white-space:nowrap;transition:background-color calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-scale) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback),box-shadow calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-scale) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback),color calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-scale) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback),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-Button-module__button__18Bed{transition-property:background-color,box-shadow,color;transition-duration:calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-scale-reduced) * var(--oc-motion-pace-normal) * 1);transition-timing-function:var(--oc-motion-timing-feedback);transform:none}}.oc-Button-module__button__18Bed{--oc-button-padding-x: var(--oc-space-item-padding-medium);--oc-button-padding-y: var(--oc-space-item-padding-xsmall);--oc-button-content-height: var(--oc-typo-height-body1);--oc-button-control-size: calc(var(--oc-button-content-height) + (var(--oc-button-padding-y) * 2));--oc-button-icon-size: var(--oc-typo-height-label1);--oc-button-gap: var(--oc-space-item-gap-tiny);--oc-button-label-padding-x: 0;--oc-button-radius: var(--oc-atomic-radius-small);--oc-button-background-color: var(--oc-color-theme-label-strong);--oc-button-color: var(--oc-color-theme-background-normal-normal);--oc-interaction-color: var(--oc-color-theme-background-normal-normal);--oc-button-border-color: var(--oc-color-theme-static-transparent);--oc-button-loading-color: var(--oc-color-theme-label-alternative);--oc-interaction-z-index: 1}.oc-Button-module__button__18Bed>[data-oc-component=interaction]{border-radius:var(--oc-button-radius)}.oc-Button-module__button__18Bed>[data-oc-part=content]{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;gap:var(--oc-button-gap);block-size:var(--oc-button-content-height)}.oc-Button-module__button__18Bed>[data-oc-part=loading]{position:absolute;z-index:3;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;justify-content:center;inline-size:var(--oc-button-content-height);block-size:var(--oc-button-content-height);color:currentcolor;line-height:0;pointer-events:none}.oc-Button-module__button__18Bed>[data-oc-part=loading]>[data-oc-component=loading]{--oc-loading-size: 100%;--oc-loading-color: var(--oc-button-loading-color)}.oc-Button-module__button__18Bed [data-oc-part=label]{display:inline-flex;align-items:center;justify-content:center;padding-inline:var(--oc-button-label-padding-x, 0)}.oc-Button-module__button__18Bed [data-oc-part=leading-icon],.oc-Button-module__button__18Bed [data-oc-part=trailing-icon],.oc-Button-module__button__18Bed [data-oc-part=icon]{display:inline-flex;align-items:center;justify-content:center;inline-size:var(--oc-button-icon-size);block-size:var(--oc-button-icon-size);color:currentcolor}.oc-Button-module__button__18Bed [data-oc-part=leading-icon]>svg,.oc-Button-module__button__18Bed [data-oc-part=trailing-icon]>svg,.oc-Button-module__button__18Bed [data-oc-part=icon]>svg{inline-size:100%;block-size:100%}.oc-Button-module__button__18Bed:focus-visible>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-focus);transform:scale(1)}@media(hover:hover){.oc-Button-module__button__18Bed:hover:not(:disabled,[aria-disabled=true])>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-hover);transform:scale(1)}}.oc-Button-module__button__18Bed:active:not(:disabled,[aria-disabled=true]){transform:scale(max(0,1 + (.9875 - 1) * var(--oc-motion-scale-feedback)))}.oc-Button-module__button__18Bed:active:not(:disabled,[aria-disabled=true])>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-active);transform:scale(1)}.oc-Button-module__button__18Bed:disabled,.oc-Button-module__button__18Bed[aria-disabled=true]{--oc-button-background-color: var(--oc-color-theme-interaction-disable);--oc-button-border-color: var(--oc-color-theme-static-transparent);--oc-button-color: var(--oc-color-theme-label-disable);--oc-button-loading-color: var(--oc-color-theme-label-disable);cursor:not-allowed}.oc-Button-module__button__18Bed:where(.oc-Button-module__medium__HYxwi){font-size:calc(var(--oc-typo-size-body2) * var(--oc-typo-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-bold);--oc-button-padding-x: var(--oc-space-item-padding-small);--oc-button-padding-y: var(--oc-space-item-padding-mini)}.oc-Button-module__button__18Bed:where(.oc-Button-module__small__zfmcP){font-size:calc(var(--oc-typo-size-label1) * var(--oc-typo-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-bold);--oc-button-padding-x: var(--oc-space-item-padding-xsmall);--oc-button-padding-y: var(--oc-space-item-padding-tiny);--oc-button-gap: var(--oc-space-item-gap-nano);--oc-button-label-padding-x: var(--oc-space-item-padding-atom);--oc-button-radius: var(--oc-atomic-radius-xsmall);--oc-button-icon-size: var(--oc-typo-height-label2)}.oc-Button-module__button__18Bed:where(.oc-Button-module__xsmall__QS3d-){font-size:calc(var(--oc-typo-size-label1) * var(--oc-typo-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-bold);--oc-button-padding-x: var(--oc-space-item-padding-mini);--oc-button-padding-y: var(--oc-space-item-padding-tiny);--oc-button-content-height: var(--oc-typo-height-label1);--oc-button-gap: var(--oc-space-item-gap-atom);--oc-button-label-padding-x: var(--oc-space-item-padding-atom);--oc-button-radius: var(--oc-atomic-radius-mini);--oc-button-icon-size: var(--oc-typo-height-caption1)}.oc-Button-module__button__18Bed:where(.oc-Button-module__solid__yi-oB):where(.oc-Button-module__primary__st6yY){--oc-button-background-color: var(--oc-color-theme-primary-normal);--oc-button-color: var(--oc-color-theme-static-white);--oc-button-loading-color: var(--oc-color-theme-static-white);--oc-interaction-color: var(--oc-color-theme-label-normal)}.oc-Button-module__button__18Bed:where(.oc-Button-module__solid__yi-oB):where(.oc-Button-module__assistive__6KrCl){--oc-button-background-color: var(--oc-color-theme-fill-normal);--oc-button-color: var(--oc-color-theme-label-neutral);--oc-interaction-color: var(--oc-color-theme-label-neutral)}.oc-Button-module__button__18Bed:where(.oc-Button-module__solid__yi-oB):disabled,.oc-Button-module__button__18Bed:where(.oc-Button-module__solid__yi-oB)[aria-disabled=true]{--oc-button-background-color: var(--oc-color-theme-interaction-disable);--oc-button-border-color: var(--oc-color-theme-static-transparent);--oc-button-color: var(--oc-color-theme-label-disable);--oc-button-loading-color: var(--oc-color-theme-label-disable)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH){--oc-button-background-color: transparent;--oc-button-border-color: var(--oc-color-theme-label-normal);--oc-button-color: var(--oc-color-theme-label-normal);--oc-interaction-color: var(--oc-color-theme-label-normal)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):where(.oc-Button-module__primary__st6yY){--oc-button-border-color: var(--oc-color-theme-primary-normal);--oc-button-color: var(--oc-color-theme-primary-normal);--oc-interaction-color: var(--oc-color-theme-primary-normal)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):where(.oc-Button-module__secondary__j-3rj){--oc-button-border-color: var(--oc-color-theme-line-normal-normal);--oc-button-color: var(--oc-color-theme-primary-normal);--oc-interaction-color: var(--oc-color-theme-primary-normal)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):where(.oc-Button-module__assistive__6KrCl){--oc-button-border-color: var(--oc-color-theme-line-normal-normal);--oc-button-color: var(--oc-color-theme-label-neutral);--oc-interaction-color: var(--oc-color-theme-label-neutral);font-size:calc(var(--oc-typo-size-body1) * var(--oc-typo-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-medium)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):where(.oc-Button-module__assistive__6KrCl):where(.oc-Button-module__medium__HYxwi){font-size:calc(var(--oc-typo-size-body2) * var(--oc-typo-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-medium)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):where(.oc-Button-module__assistive__6KrCl):where(.oc-Button-module__small__zfmcP),.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):where(.oc-Button-module__assistive__6KrCl):where(.oc-Button-module__xsmall__QS3d-){font-size:calc(var(--oc-typo-size-label1) * var(--oc-typo-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)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):disabled,.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH)[aria-disabled=true]{--oc-button-background-color: var(--oc-color-theme-static-transparent);--oc-button-border-color: var(--oc-color-theme-line-normal-neutral);--oc-button-color: var(--oc-color-theme-label-disable);--oc-button-loading-color: var(--oc-color-theme-label-disable)}.oc-Button-module__button__18Bed:where(.oc-Button-module__loading__QfItr){cursor:progress}.oc-Button-module__button__18Bed:where(.oc-Button-module__loading__QfItr)>[data-oc-part=content]{visibility:hidden}.oc-Button-module__button__18Bed:where(.oc-Button-module__iconOnly__FNrSu){aspect-ratio:1;inline-size:var(--oc-button-control-size);padding-inline:var(--oc-button-padding-y)}.oc-Button-module__button__18Bed:where(.oc-Button-module__fullWidth__AHpSl){inline-size:100%}.oc-Button-module__button__18Bed:where(.oc-Button-module__iconOnly__FNrSu):where(.oc-Button-module__fullWidth__AHpSl){aspect-ratio:auto}@media(prefers-reduced-motion:reduce){.oc-Button-module__button__18Bed:active:not(:disabled,[aria-disabled=true]){transform:none}}
1
+ .oc-Button-module__button__18Bed{position:relative;display:inline-flex;align-items:center;justify-content:center;appearance:none;border:none;background-color:transparent;padding:0;cursor:pointer;text-decoration:none;color:inherit;will-change:transform;transition:transform calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback)}@media(prefers-reduced-motion:reduce){.oc-Button-module__button__18Bed{transition:none;transform:none}}.oc-Button-module__button__18Bed{-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;font-size:calc(var(--oc-typo-size-body1) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-body1) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-body1);font-weight:var(--oc-typo-weight-body1-bold);display:inline-flex;position:relative;overflow:hidden;flex-direction:column;gap:0;box-shadow:inset 0 0 0 1px var(--oc-button-border-color, transparent);border-radius:var(--oc-button-radius);background-color:var(--oc-button-background-color);padding:var(--oc-button-padding-y) var(--oc-button-padding-x);min-block-size:calc(var(--oc-button-content-height) + var(--oc-button-padding-y) * 2);color:var(--oc-button-color);white-space:nowrap;transition:background-color calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback),box-shadow calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback),color calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback),transform calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback)}@media(prefers-reduced-motion:reduce){.oc-Button-module__button__18Bed{transition-property:background-color,box-shadow,color;transition-duration:calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor-reduced) * var(--oc-motion-pace-normal) * 1);transition-timing-function:var(--oc-motion-timing-feedback);transform:none}}.oc-Button-module__button__18Bed{--oc-button-padding-x: var(--oc-space-item-padding-medium);--oc-button-padding-y: var(--oc-space-item-padding-xsmall);--oc-button-content-height: var(--oc-typo-height-body1);--oc-button-control-size: calc(var(--oc-button-content-height) + (var(--oc-button-padding-y) * 2));--oc-button-icon-size: var(--oc-typo-height-label1);--oc-button-gap: var(--oc-space-item-gap-tiny);--oc-button-label-padding-x: 0;--oc-button-radius: var(--oc-atomic-radius-small);--oc-button-background-color: var(--oc-color-theme-label-strong);--oc-button-color: var(--oc-color-theme-background-normal-normal);--oc-interaction-color: var(--oc-color-theme-background-normal-normal);--oc-button-border-color: var(--oc-color-theme-static-transparent);--oc-button-loading-color: var(--oc-color-theme-label-alternative);--oc-interaction-z-index: 1}.oc-Button-module__button__18Bed>[data-oc-component=interaction]{border-radius:var(--oc-button-radius)}.oc-Button-module__button__18Bed>[data-oc-part=content]{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;gap:var(--oc-button-gap);block-size:var(--oc-button-content-height)}.oc-Button-module__button__18Bed>[data-oc-part=loading]{position:absolute;z-index:3;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;justify-content:center;inline-size:var(--oc-button-content-height);block-size:var(--oc-button-content-height);color:currentcolor;line-height:0;padding:.0625rem;pointer-events:none}.oc-Button-module__button__18Bed>[data-oc-part=loading]>[data-oc-component=loading]{--oc-loading-size: 100%;--oc-loading-color: var(--oc-button-loading-color)}.oc-Button-module__button__18Bed [data-oc-part=label]{display:inline-flex;align-items:center;justify-content:center;padding-inline:var(--oc-button-label-padding-x, 0)}.oc-Button-module__button__18Bed [data-oc-part=leading-icon],.oc-Button-module__button__18Bed [data-oc-part=trailing-icon],.oc-Button-module__button__18Bed [data-oc-part=icon]{display:inline-flex;align-items:center;justify-content:center;inline-size:var(--oc-button-icon-size);block-size:var(--oc-button-icon-size);color:currentcolor}.oc-Button-module__button__18Bed [data-oc-part=leading-icon]>svg,.oc-Button-module__button__18Bed [data-oc-part=trailing-icon]>svg,.oc-Button-module__button__18Bed [data-oc-part=icon]>svg{inline-size:100%;block-size:100%}.oc-Button-module__button__18Bed:focus-visible>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-focus);transform:scale(1)}@media(hover:hover){.oc-Button-module__button__18Bed:hover:not(:disabled,[aria-disabled=true])>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-hover);transform:scale(1)}}.oc-Button-module__button__18Bed:active:not(:disabled,[aria-disabled=true]){transform:scale(max(0,1 + (.9875 - 1) * var(--oc-motion-scale-factor-feedback)))}.oc-Button-module__button__18Bed:active:not(:disabled,[aria-disabled=true])>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-active);transform:scale(1)}.oc-Button-module__button__18Bed:disabled,.oc-Button-module__button__18Bed[aria-disabled=true]{--oc-button-background-color: var(--oc-color-theme-interaction-disable);--oc-button-border-color: var(--oc-color-theme-static-transparent);--oc-button-color: var(--oc-color-theme-label-disable);--oc-button-loading-color: var(--oc-color-theme-label-disable);cursor:not-allowed}.oc-Button-module__button__18Bed:where(.oc-Button-module__medium__HYxwi){font-size:calc(var(--oc-typo-size-body2) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-body2) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-body2);font-weight:var(--oc-typo-weight-body2-bold);--oc-button-padding-x: var(--oc-space-item-padding-small);--oc-button-padding-y: var(--oc-space-item-padding-mini)}.oc-Button-module__button__18Bed:where(.oc-Button-module__small__zfmcP){font-size:calc(var(--oc-typo-size-label1) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-label1) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-label1);font-weight:var(--oc-typo-weight-label1-bold);--oc-button-padding-x: var(--oc-space-item-padding-xsmall);--oc-button-padding-y: var(--oc-space-item-padding-tiny);--oc-button-gap: var(--oc-space-item-gap-nano);--oc-button-label-padding-x: var(--oc-space-item-padding-atom);--oc-button-radius: var(--oc-atomic-radius-xsmall);--oc-button-icon-size: var(--oc-typo-height-label2)}.oc-Button-module__button__18Bed:where(.oc-Button-module__xsmall__QS3d-){font-size:calc(var(--oc-typo-size-label1) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-label1) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-label1);font-weight:var(--oc-typo-weight-label1-bold);--oc-button-padding-x: var(--oc-space-item-padding-mini);--oc-button-padding-y: var(--oc-space-item-padding-tiny);--oc-button-content-height: var(--oc-typo-height-label1);--oc-button-gap: var(--oc-space-item-gap-atom);--oc-button-label-padding-x: var(--oc-space-item-padding-atom);--oc-button-radius: var(--oc-atomic-radius-mini);--oc-button-icon-size: var(--oc-typo-height-caption1)}.oc-Button-module__button__18Bed:where(.oc-Button-module__solid__yi-oB):where(.oc-Button-module__primary__st6yY){--oc-button-background-color: var(--oc-color-theme-primary-normal);--oc-button-color: var(--oc-color-theme-static-white);--oc-button-loading-color: var(--oc-color-theme-static-white);--oc-interaction-color: var(--oc-color-theme-label-normal)}.oc-Button-module__button__18Bed:where(.oc-Button-module__solid__yi-oB):where(.oc-Button-module__assistive__6KrCl){--oc-button-background-color: var(--oc-color-theme-fill-normal);--oc-button-color: var(--oc-color-theme-label-neutral);--oc-interaction-color: var(--oc-color-theme-label-neutral)}.oc-Button-module__button__18Bed:where(.oc-Button-module__solid__yi-oB):disabled,.oc-Button-module__button__18Bed:where(.oc-Button-module__solid__yi-oB)[aria-disabled=true]{--oc-button-background-color: var(--oc-color-theme-interaction-disable);--oc-button-border-color: var(--oc-color-theme-static-transparent);--oc-button-color: var(--oc-color-theme-label-disable);--oc-button-loading-color: var(--oc-color-theme-label-disable)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH){--oc-button-background-color: transparent;--oc-button-border-color: var(--oc-color-theme-label-normal);--oc-button-color: var(--oc-color-theme-label-normal);--oc-interaction-color: var(--oc-color-theme-label-normal)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):where(.oc-Button-module__primary__st6yY){--oc-button-border-color: var(--oc-color-theme-primary-normal);--oc-button-color: var(--oc-color-theme-primary-normal);--oc-interaction-color: var(--oc-color-theme-primary-normal)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):where(.oc-Button-module__secondary__j-3rj){--oc-button-border-color: var(--oc-color-theme-line-normal-normal);--oc-button-color: var(--oc-color-theme-primary-normal);--oc-interaction-color: var(--oc-color-theme-label-normal)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):where(.oc-Button-module__assistive__6KrCl){--oc-button-border-color: var(--oc-color-theme-line-normal-normal);--oc-button-color: var(--oc-color-theme-label-neutral);--oc-interaction-color: var(--oc-color-theme-label-neutral);font-size:calc(var(--oc-typo-size-body1) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-body1) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-body1);font-weight:var(--oc-typo-weight-body1-medium)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):where(.oc-Button-module__assistive__6KrCl):where(.oc-Button-module__medium__HYxwi){font-size:calc(var(--oc-typo-size-body2) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-body2) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-body2);font-weight:var(--oc-typo-weight-body2-medium)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):where(.oc-Button-module__assistive__6KrCl):where(.oc-Button-module__small__zfmcP),.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):where(.oc-Button-module__assistive__6KrCl):where(.oc-Button-module__xsmall__QS3d-){font-size:calc(var(--oc-typo-size-label1) * var(--oc-typo-size-factor, 1));line-height:calc(var(--oc-typo-height-label1) * var(--oc-typo-size-factor, 1));letter-spacing:var(--oc-typo-spacing-label1);font-weight:var(--oc-typo-weight-label1-medium)}.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH):disabled,.oc-Button-module__button__18Bed:where(.oc-Button-module__outlined__f4ewH)[aria-disabled=true]{--oc-button-background-color: var(--oc-color-theme-static-transparent);--oc-button-border-color: var(--oc-color-theme-line-normal-neutral);--oc-button-color: var(--oc-color-theme-label-disable);--oc-button-loading-color: var(--oc-color-theme-label-disable)}.oc-Button-module__button__18Bed:where(.oc-Button-module__loading__QfItr){cursor:progress}.oc-Button-module__button__18Bed:where(.oc-Button-module__loading__QfItr)>[data-oc-part=content]{visibility:hidden}.oc-Button-module__button__18Bed:where(.oc-Button-module__iconOnly__FNrSu){aspect-ratio:1;inline-size:var(--oc-button-control-size);padding-inline:var(--oc-button-padding-y)}.oc-Button-module__button__18Bed:where(.oc-Button-module__fullWidth__AHpSl){inline-size:100%}.oc-Button-module__button__18Bed:where(.oc-Button-module__iconOnly__FNrSu):where(.oc-Button-module__fullWidth__AHpSl){aspect-ratio:auto}@media(prefers-reduced-motion:reduce){.oc-Button-module__button__18Bed:active:not(:disabled,[aria-disabled=true]){transform:none}}
@@ -1,152 +1,92 @@
1
1
  'use client';
2
- import { jsx as a, jsxs as v, Fragment as A } from "react/jsx-runtime";
3
- import U from "../Interaction/Interaction.js";
4
- import X from "../Loading/Loading.js";
5
- import e from "./Button.module.scss.js";
6
- function lo({
7
- children: d,
8
- className: E = "",
9
- style: C,
10
- disabled: i = !1,
11
- href: P,
12
- appearance: l = "solid",
13
- variant: s = "default",
14
- size: f = "large",
15
- fullWidth: h = !1,
16
- loading: t = !1,
17
- leadingIcon: w,
18
- trailingIcon: D,
19
- icon: p,
20
- "aria-label": y,
21
- "aria-labelledby": k,
22
- ...B
2
+ import { jsx as o, jsxs as x, Fragment as O } from "react/jsx-runtime";
3
+ import q from "../Interaction/Interaction.js";
4
+ import C from "../Loading/Loading.js";
5
+ import V from "../internal/Pressable.js";
6
+ import t from "./Button.module.scss.js";
7
+ function H({
8
+ children: c,
9
+ className: z = "",
10
+ style: v,
11
+ disabled: h = !1,
12
+ href: y,
13
+ appearance: r = "solid",
14
+ variant: e = "default",
15
+ size: l = "large",
16
+ fullWidth: d = !1,
17
+ loading: a = !1,
18
+ leadingIcon: s,
19
+ trailingIcon: u,
20
+ icon: m,
21
+ "aria-label": b,
22
+ "aria-labelledby": f,
23
+ ...N
23
24
  }) {
24
- const u = l === "solid" && s === "secondary" ? "primary" : s, x = d != null, c = !!(p && !x && !w && !D), K = [
25
- e.button,
26
- e[l],
27
- e[u],
28
- e[f],
29
- c ? e.iconOnly : "",
30
- h ? e.fullWidth : "",
31
- t ? e.loading : "",
32
- E
33
- ].filter(Boolean).join(" "), N = l === "solid" && u === "default" ? "light" : "normal";
34
- process.env.NODE_ENV !== "production" && c && !y && !k && console.warn(
25
+ const n = r === "solid" && e === "secondary" ? "primary" : e, w = c != null, i = !!(m && !w && !s && !u), B = [
26
+ t.button,
27
+ t[r],
28
+ t[n],
29
+ t[l],
30
+ i ? t.iconOnly : "",
31
+ d ? t.fullWidth : "",
32
+ a ? t.loading : "",
33
+ z
34
+ ].filter(Boolean).join(" "), E = r === "solid" && n === "default" || r === "outlined" && n === "secondary" ? "light" : "normal";
35
+ process.env.NODE_ENV !== "production" && i && !b && !f && console.warn(
35
36
  "[@orioncactuscorp/ui] Button with `icon` requires `aria-label` or `aria-labelledby` for screen reader accessibility."
36
37
  );
37
- const m = (o, b) => /* @__PURE__ */ a("span", { "data-oc-part": b, "aria-hidden": "true", children: /* @__PURE__ */ a(o, { size: "custom" }) }), r = (o) => t ? (o.preventDefault(), o.stopPropagation(), !0) : !1, M = /* @__PURE__ */ v(A, { children: [
38
- /* @__PURE__ */ a("span", { "data-oc-part": "content", children: c && p ? m(p, "icon") : /* @__PURE__ */ v(A, { children: [
39
- w ? m(w, "leading-icon") : null,
40
- x ? /* @__PURE__ */ a("span", { "data-oc-part": "label", children: d }) : null,
41
- D ? m(D, "trailing-icon") : null
38
+ const p = (j, g) => /* @__PURE__ */ o("span", { "data-oc-part": g, "aria-hidden": "true", children: /* @__PURE__ */ o(j, { size: "custom" }) }), P = /* @__PURE__ */ x(O, { children: [
39
+ /* @__PURE__ */ o("span", { "data-oc-part": "content", children: i && m ? p(m, "icon") : /* @__PURE__ */ x(O, { children: [
40
+ s ? p(s, "leading-icon") : null,
41
+ w ? /* @__PURE__ */ o("span", { "data-oc-part": "label", children: c }) : null,
42
+ u ? p(u, "trailing-icon") : null
42
43
  ] }) }),
43
- t ? /* @__PURE__ */ a("span", { "data-oc-part": "loading", "aria-hidden": "true", children: /* @__PURE__ */ a(X, { size: "custom" }) }) : null,
44
- /* @__PURE__ */ a(U, { variant: N })
44
+ a ? /* @__PURE__ */ o("span", { "data-oc-part": "loading", "aria-hidden": "true", children: /* @__PURE__ */ o(C, { size: "custom" }) }) : null,
45
+ /* @__PURE__ */ o(q, { variant: E })
45
46
  ] });
46
- if (P !== void 0) {
47
- const o = B, {
48
- onAuxClick: b,
49
- onClick: G,
50
- onKeyDown: H,
51
- onMouseDown: I,
52
- onPointerDown: J,
53
- ref: Q,
54
- tabIndex: R,
55
- ...S
56
- } = o;
57
- return /* @__PURE__ */ a(
58
- "a",
59
- {
60
- ...S,
61
- ref: Q,
62
- className: K,
63
- style: C,
64
- href: P,
65
- onAuxClick: (n) => {
66
- if (i || t) {
67
- n.preventDefault(), n.stopPropagation();
68
- return;
69
- }
70
- b?.(n);
71
- },
72
- onClick: (n) => {
73
- if (i || t) {
74
- n.preventDefault();
75
- return;
76
- }
77
- G?.(n);
78
- },
79
- onKeyDown: (n) => {
80
- (n.key === "Enter" || n.key === " ") && r(n) || H?.(n);
81
- },
82
- onMouseDown: (n) => {
83
- r(n) || I?.(n);
84
- },
85
- onPointerDown: (n) => {
86
- r(n) || J?.(n);
87
- },
88
- "aria-label": y,
89
- "aria-labelledby": k,
90
- "aria-busy": t ? "true" : void 0,
91
- "aria-disabled": i || t ? "true" : void 0,
92
- tabIndex: i || t ? -1 : R,
93
- "data-oc-component": "button",
94
- "data-oc-appearance": l,
95
- "data-oc-variant": s,
96
- "data-oc-resolved-variant": u,
97
- "data-oc-size": f,
98
- "data-oc-full-width": h ? "true" : void 0,
99
- "data-oc-loading": t ? "true" : void 0,
100
- "data-oc-icon-only": c ? "true" : void 0,
101
- children: M
102
- }
103
- );
104
- }
105
- const j = B, {
106
- type: O = "button",
107
- onClick: V,
108
- onKeyDown: z,
109
- onMouseDown: q,
110
- onPointerDown: F,
111
- ref: _,
112
- ...g
113
- } = j;
114
- return /* @__PURE__ */ a(
115
- "button",
47
+ return y !== void 0 ? /* @__PURE__ */ o(
48
+ V,
116
49
  {
117
- ...g,
118
- ref: _,
119
- className: K,
120
- style: C,
121
- type: O,
122
- disabled: i || t,
123
- "aria-busy": t ? "true" : void 0,
124
- "aria-label": y,
125
- "aria-labelledby": k,
126
- onClick: (o) => {
127
- r(o) || V?.(o);
128
- },
129
- onKeyDown: (o) => {
130
- (o.key === "Enter" || o.key === " ") && r(o) || z?.(o);
131
- },
132
- onMouseDown: (o) => {
133
- r(o) || q?.(o);
134
- },
135
- onPointerDown: (o) => {
136
- r(o) || F?.(o);
137
- },
50
+ ...N,
51
+ className: B,
52
+ style: v,
53
+ href: y,
54
+ disabled: h || a,
55
+ "aria-busy": a ? "true" : void 0,
56
+ "aria-label": b,
57
+ "aria-labelledby": f,
138
58
  "data-oc-component": "button",
139
- "data-oc-appearance": l,
140
- "data-oc-variant": s,
141
- "data-oc-resolved-variant": u,
142
- "data-oc-size": f,
143
- "data-oc-full-width": h ? "true" : void 0,
144
- "data-oc-loading": t ? "true" : void 0,
145
- "data-oc-icon-only": c ? "true" : void 0,
146
- children: M
59
+ "data-oc-appearance": r,
60
+ "data-oc-variant": e,
61
+ "data-oc-resolved-variant": n,
62
+ "data-oc-size": l,
63
+ "data-oc-full-width": d ? "true" : void 0,
64
+ "data-oc-loading": a ? "true" : void 0,
65
+ "data-oc-icon-only": i ? "true" : void 0,
66
+ children: P
67
+ }
68
+ ) : /* @__PURE__ */ o(
69
+ V,
70
+ {
71
+ ...N,
72
+ className: B,
73
+ style: v,
74
+ disabled: h || a,
75
+ "aria-busy": a ? "true" : void 0,
76
+ "aria-label": b,
77
+ "aria-labelledby": f,
78
+ "data-oc-component": "button",
79
+ "data-oc-appearance": r,
80
+ "data-oc-variant": e,
81
+ "data-oc-resolved-variant": n,
82
+ "data-oc-size": l,
83
+ "data-oc-full-width": d ? "true" : void 0,
84
+ "data-oc-loading": a ? "true" : void 0,
85
+ "data-oc-icon-only": i ? "true" : void 0,
86
+ children: P
147
87
  }
148
88
  );
149
89
  }
150
90
  export {
151
- lo as default
91
+ H as default
152
92
  };
@@ -1 +1 @@
1
- .oc-Cell-module__cell__BDmja{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);display:flex;flex-direction:column;margin-top:calc(-1 * var(--oc-cell-padding));margin-bottom:calc(-1 * var(--oc-cell-padding));padding:0;color:var(--oc-color-theme-label-normal);list-style:none;--oc-cell-padding: var(--oc-space-item-padding-small);--oc-cell-padding-inline: var(--oc-space-item-padding-medium);--oc-cell-gap: .5em;--oc-cell-icon-size: 1.375rem;--oc-cell-disabled-opacity: .28;--oc-cell-interaction-margin-inline: var(--oc-space-item-padding-xsmall);--oc-cell-interaction-radius: var(--oc-atomic-radius-small);--oc-cell-divider-color: var(--oc-color-theme-line-normal-normal)}.oc-Cell-module__item__r5fW2{position:relative;display:flex;align-items:flex-start;gap:var(--oc-cell-gap);padding-block:var(--oc-cell-padding);min-inline-size:0;color:inherit;transform:scale(var(--oc-cell-press-scale, 1));transition:border-color calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-scale) * var(--oc-motion-pace-normal) * .5) var(--oc-motion-timing-feedback),transform calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-scale) * var(--oc-motion-pace-normal) * .5) var(--oc-motion-timing-feedback)}@media(prefers-reduced-motion:reduce){.oc-Cell-module__item__r5fW2{transition-property:border-color;transition-duration:calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-scale-reduced) * var(--oc-motion-pace-normal) * .5);transition-timing-function:var(--oc-motion-timing-feedback);transform:none}}.oc-Cell-module__item__r5fW2{--oc-cell-content-min-block-size: var(--oc-typo-height-body1)}.oc-Cell-module__item__r5fW2[data-oc-vertical-align=center]{align-items:center}.oc-Cell-module__item__r5fW2[data-oc-fill-width=true]{padding-inline:var(--oc-cell-padding-inline)}.oc-Cell-module__item__r5fW2[data-oc-fill-width=true]>[data-oc-component=interaction]{--oc-interaction-inset-x: 0;--oc-interaction-radius: 0}.oc-Cell-module__item__r5fW2[data-oc-fill-width=false]>[data-oc-component=interaction]{--oc-interaction-inset-x: calc(-1 * var(--oc-cell-interaction-margin-inline));--oc-interaction-radius: var(--oc-cell-interaction-radius)}.oc-Cell-module__item__r5fW2[data-oc-divider=normal]{--oc-cell-current-divider-color: var(--oc-color-theme-line-normal-normal)}.oc-Cell-module__item__r5fW2[data-oc-divider=neutral]{--oc-cell-current-divider-color: var(--oc-color-theme-line-normal-neutral)}.oc-Cell-module__item__r5fW2[data-oc-divider=alternative]{--oc-cell-current-divider-color: var(--oc-color-theme-line-normal-alternative)}.oc-Cell-module__item__r5fW2[data-oc-divider=none]{--oc-cell-current-divider-color: transparent}.oc-Cell-module__item__r5fW2[data-oc-interactive=true]{cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.oc-Cell-module__item__r5fW2[data-oc-interactive=true]:focus-visible{outline:none}.oc-Cell-module__item__r5fW2[data-oc-interactive=true]:focus-visible>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-focus);transform:scale(1)}@media(hover:hover){.oc-Cell-module__item__r5fW2[data-oc-interactive=true]:hover:not([data-oc-disabled=true]){--oc-cell-current-divider-color: transparent}.oc-Cell-module__item__r5fW2[data-oc-interactive=true]:hover:not([data-oc-disabled=true])>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-hover);transform:scale(1)}.oc-Cell-module__item__r5fW2[data-oc-interactive=true]:hover:not([data-oc-disabled=true])+.oc-Cell-module__item__r5fW2{--oc-cell-current-divider-color: transparent}}.oc-Cell-module__item__r5fW2[data-oc-interactive=true]:active:not([data-oc-disabled=true]){--oc-cell-press-scale: max(0, 1 + (.9875 - 1) * var(--oc-motion-scale-feedback))}.oc-Cell-module__item__r5fW2[data-oc-interactive=true]:active:not([data-oc-disabled=true])>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-active);transform:scale(1)}.oc-Cell-module__item__r5fW2[data-oc-interactive=true] :where([data-oc-component=checkbox],[data-oc-component=radio],[data-oc-component=switch]) [data-oc-component=interaction]{display:none}.oc-Cell-module__item__r5fW2[data-oc-disabled=true]{cursor:not-allowed}.oc-Cell-module__item__r5fW2[data-oc-disabled=true]>:where([data-oc-part=leading],[data-oc-part=content],[data-oc-part=trailing]){opacity:var(--oc-cell-disabled-opacity)}.oc-Cell-module__item__r5fW2+.oc-Cell-module__item__r5fW2{border-block-start:1px solid var(--oc-cell-current-divider-color, var(--oc-cell-divider-color))}.oc-Cell-module__item__r5fW2>[data-oc-component=interaction]{border-radius:var(--oc-interaction-radius)}.oc-Cell-module__item__r5fW2>[data-oc-part=leading],.oc-Cell-module__item__r5fW2>[data-oc-part=trailing]{position:relative;z-index:2;display:inline-flex;flex:none;align-items:center;min-block-size:var(--oc-cell-content-min-block-size);color:var(--oc-color-theme-label-alternative)}.oc-Cell-module__item__r5fW2>[data-oc-part=leading]>[data-oc-component=svg-icon],.oc-Cell-module__item__r5fW2>[data-oc-part=trailing]>[data-oc-component=svg-icon]{block-size:var(--oc-cell-icon-size)}.oc-Cell-module__item__r5fW2>[data-oc-part=content]{position:relative;z-index:2;display:flex;align-items:center;flex:1;min-block-size:var(--oc-cell-content-min-block-size);min-inline-size:0}.oc-Cell-module__item__r5fW2 [data-oc-part=text]{display:flex;flex-direction:column;gap:var(--oc-space-item-gap-atom);min-inline-size:0}.oc-Cell-module__item__r5fW2 [data-oc-part=label],.oc-Cell-module__item__r5fW2 [data-oc-part=description]{min-inline-size:0}.oc-Cell-module__item__r5fW2 [data-oc-part=description]{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);color:var(--oc-color-theme-label-alternative)}.oc-Cell-module__item__r5fW2>[data-oc-part=trailing]{justify-content:flex-end}.oc-Cell-module__normal__O7uwW{--oc-cell-divider-color: var(--oc-color-theme-line-normal-normal)}.oc-Cell-module__neutral__Fhigo{--oc-cell-divider-color: var(--oc-color-theme-line-normal-neutral)}.oc-Cell-module__alternative__7dShz{--oc-cell-divider-color: var(--oc-color-theme-line-normal-alternative)}.oc-Cell-module__none__s4kvs{--oc-cell-divider-color: transparent}
1
+ .oc-Cell-module__cell__BDmja{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);display:flex;flex-direction:column;margin-top:calc(-1 * var(--oc-cell-padding));margin-bottom:calc(-1 * var(--oc-cell-padding));padding:0;color:var(--oc-color-theme-label-normal);list-style:none;--oc-cell-padding: var(--oc-space-item-padding-small);--oc-cell-padding-inline: var(--oc-space-item-padding-medium);--oc-cell-gap: .5em;--oc-cell-icon-size: 1.375rem;--oc-cell-disabled-opacity: .28;--oc-cell-interaction-margin-inline: var(--oc-space-item-padding-xsmall);--oc-cell-interaction-radius: var(--oc-atomic-radius-small);--oc-cell-divider-color: var(--oc-color-theme-line-normal-normal)}.oc-Cell-module__item__r5fW2{position:relative;display:flex;align-items:flex-start;gap:var(--oc-cell-gap);padding-block:var(--oc-cell-padding);min-inline-size:0;color:inherit;transform:scale(var(--oc-cell-press-scale, 1));transition:border-color calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * .5) var(--oc-motion-timing-feedback),transform calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * .5) var(--oc-motion-timing-feedback)}@media(prefers-reduced-motion:reduce){.oc-Cell-module__item__r5fW2{transition-property:border-color;transition-duration:calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor-reduced) * var(--oc-motion-pace-normal) * .5);transition-timing-function:var(--oc-motion-timing-feedback);transform:none}}.oc-Cell-module__item__r5fW2{--oc-cell-content-min-block-size: var(--oc-typo-height-body1)}.oc-Cell-module__item__r5fW2[data-oc-vertical-align=center]{align-items:center}.oc-Cell-module__item__r5fW2[data-oc-fill-width=true]{padding-inline:var(--oc-cell-padding-inline)}.oc-Cell-module__item__r5fW2[data-oc-fill-width=true]>[data-oc-component=interaction]{--oc-interaction-inset-x: 0;--oc-interaction-radius: 0}.oc-Cell-module__item__r5fW2[data-oc-fill-width=false]>[data-oc-component=interaction]{--oc-interaction-inset-x: calc(-1 * var(--oc-cell-interaction-margin-inline));--oc-interaction-radius: var(--oc-cell-interaction-radius)}.oc-Cell-module__item__r5fW2[data-oc-divider=normal]{--oc-cell-current-divider-color: var(--oc-color-theme-line-normal-normal)}.oc-Cell-module__item__r5fW2[data-oc-divider=neutral]{--oc-cell-current-divider-color: var(--oc-color-theme-line-normal-neutral)}.oc-Cell-module__item__r5fW2[data-oc-divider=alternative]{--oc-cell-current-divider-color: var(--oc-color-theme-line-normal-alternative)}.oc-Cell-module__item__r5fW2[data-oc-divider=none]{--oc-cell-current-divider-color: transparent}.oc-Cell-module__item__r5fW2[data-oc-interactive=true]{cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.oc-Cell-module__item__r5fW2[data-oc-interactive=true]:focus-visible{outline:none}.oc-Cell-module__item__r5fW2[data-oc-interactive=true]:focus-visible>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-focus);transform:scale(1)}@media(hover:hover){.oc-Cell-module__item__r5fW2[data-oc-interactive=true]:hover:not([data-oc-disabled=true])>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-hover);transform:scale(1)}}.oc-Cell-module__item__r5fW2[data-oc-interactive=true]:active:not([data-oc-disabled=true]){--oc-cell-press-scale: max(0, 1 + (.9875 - 1) * var(--oc-motion-scale-factor-feedback))}.oc-Cell-module__item__r5fW2[data-oc-interactive=true]:active:not([data-oc-disabled=true])>[data-oc-component=interaction]{opacity:var(--oc-interaction-opacity-active);transform:scale(1)}.oc-Cell-module__item__r5fW2[data-oc-disabled=true]{cursor:not-allowed}.oc-Cell-module__item__r5fW2[data-oc-disabled=true]>:where([data-oc-part=leading],[data-oc-part=content],[data-oc-part=trailing]){opacity:var(--oc-cell-disabled-opacity)}.oc-Cell-module__item__r5fW2[data-oc-disabled=true]>[data-oc-component=interaction]{pointer-events:none}.oc-Cell-module__item__r5fW2>[data-oc-component=interaction]{border-radius:var(--oc-interaction-radius)}.oc-Cell-module__item__r5fW2>[data-oc-part=leading],.oc-Cell-module__item__r5fW2>[data-oc-part=trailing]{position:relative;z-index:2;display:inline-flex;flex:none;align-items:center;min-block-size:var(--oc-cell-content-min-block-size);color:var(--oc-color-theme-label-alternative)}.oc-Cell-module__item__r5fW2>[data-oc-part=leading]>[data-oc-component=svg-icon],.oc-Cell-module__item__r5fW2>[data-oc-part=trailing]>[data-oc-component=svg-icon]{block-size:var(--oc-cell-icon-size)}.oc-Cell-module__item__r5fW2>[data-oc-part=content]{position:relative;z-index:2;display:flex;align-items:center;flex:1;min-block-size:var(--oc-cell-content-min-block-size);min-inline-size:0}.oc-Cell-module__item__r5fW2 [data-oc-part=text]{display:flex;flex-direction:column;gap:var(--oc-space-item-gap-atom);min-inline-size:0}.oc-Cell-module__item__r5fW2 [data-oc-part=label],.oc-Cell-module__item__r5fW2 [data-oc-part=description]{min-inline-size:0}.oc-Cell-module__item__r5fW2 [data-oc-part=description]{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);color:var(--oc-color-theme-label-alternative)}.oc-Cell-module__item__r5fW2>[data-oc-part=trailing]{justify-content:flex-end}@media(hover:hover){.oc-Cell-module__item__r5fW2[data-oc-interactive=true]:hover:not([data-oc-disabled=true]){--oc-cell-current-divider-color: transparent}.oc-Cell-module__item__r5fW2[data-oc-interactive=true]:hover:not([data-oc-disabled=true])+.oc-Cell-module__item__r5fW2{--oc-cell-current-divider-color: transparent}}.oc-Cell-module__item__r5fW2[data-oc-interactive=true] :where([data-oc-component=checkbox],[data-oc-component=radio],[data-oc-component=switch]) [data-oc-component=interaction]{display:none}.oc-Cell-module__item__r5fW2+.oc-Cell-module__item__r5fW2{border-block-start:1px solid var(--oc-cell-current-divider-color, var(--oc-cell-divider-color))}.oc-Cell-module__normal__O7uwW{--oc-cell-divider-color: var(--oc-color-theme-line-normal-normal)}.oc-Cell-module__neutral__Fhigo{--oc-cell-divider-color: var(--oc-color-theme-line-normal-neutral)}.oc-Cell-module__alternative__7dShz{--oc-cell-divider-color: var(--oc-color-theme-line-normal-alternative)}.oc-Cell-module__none__s4kvs{--oc-cell-divider-color: transparent}