@orioncactuscorp/ui 1.14.0 → 1.15.0

package/CHANGELOG.md

@@ -1,5 +1,97 @@
 # Changelog
 
+## 1.15.0
+
+### Changes
+
+<!-- generated:start -->
+
+_Commit range: `@orioncactuscorp/ui@1.14.0..HEAD`_
+
+#### Documentation
+
+- `c368e6e` docs(storybook): add scrollable anchor window example
+
+#### Maintenance
+
+- `4153d0c` chore(deps): bump actions/checkout from 7.0.0 to 7.0.1 (#233)
+
+#### Other
+
+- `908a248` 채워진 컨트롤 색상 계약 추가 (#250)
+- `58ee8ed` Interaction 강도 커스터마이즈 개선 (#249)
+- `b27a713` 중첩 오버레이 스태킹 개선 (#251)
+- `5ffc130` Changesets v3 릴리스 파이프라인 마이그레이션 (#247)
+- `479ef83` iOS Safari Modal 키보드 viewport 보정 (#248)
+- `38834bb` Interaction 상태 레이어 색 계약 정리 (#253)
+- `227bb35` Modal 키보드 회피 내부 구조 정리 (#252)
+- `f5087ae` Progress Indicator 컴포넌트 추가 (#254)
+- `ac7c17a` Easing gradient·mask 공용 유틸 추가 (#255)
+- `5afca2d` oc-fluid SCSS helper 추가 (#257)
+- `f4395d5` PositionSnap 공용 스냅 프리미티브 추가 (#256)
+- `5e2ad3e` Safari BackgroundIconButton 원형 렌더링 보정 (#260)
+- `f65d9c2` Alert 반복 거부 피드백 재생 보완 (#261)
+<!-- generated:end -->
+
+### Minor Changes
+
+- f5087ae: 알려진 범위의 작업 및 단계 진행률을 표시하는 `ProgressIndicator`를 추가합니다. `value`/`max`, 세 가지 선 두께, 접근 가능한 이름, semantic color와 oc-motion 기반 길이 전환을 지원합니다. `ModalHeader bottomContent`로 진행률이나 navigation chrome을 배치하면 Modal이 측정된 header 높이와 size별 body 시작 간격을 자동으로 예약하며, 직계 `ProgressIndicator`는 header edge에 맞춰 radius를 제거합니다.
+
+  Migration Notes: 없음
+
+- f4395d5: Button 같은 임의의 콘텐츠를 viewport 또는 element 경계의 논리 방향 위치로 드래그하고 안착시킬 수 있는 `PositionSnap` compound component를 추가합니다. controlled/uncontrolled position, content/handle drag, spring release, RTL 방향을 지원하며 Modal popup은 같은 geometry와 release 정책을 재사용합니다.
+
+  Migration Notes:
+  - 기존 Modal `snapPositions`, `snapPosition`, `defaultSnapPosition`, `onSnapPositionChange` API와 물리 방향 position 이름은 변경되지 않습니다.
+  - Modal이 아닌 콘텐츠에는 `PositionSnap.Root`, `PositionSnap.Positioner`, 선택적인 `PositionSnap.Handle`을 조합하고 논리 방향 position 이름을 사용하세요.
+
+- ac7c17a: 색 변화율에 smoothstep easing을 적용하는 `oc-easing-gradient` 함수와 시작·끝 fade 길이 및 전체 content 길이를 CSS 변수로 조정할 수 있는 `oc-gradient-mask` mixin을 추가합니다. 2D scroll content는 `oc-gradient-mask-edges`로 상하좌우 fade를 독립적으로 조정하고 block·inline mask를 교차 합성할 수 있습니다. Tabs overflow mask는 동일한 scroll·RTL·`oc-motion` 동작을 유지하면서 새 easing gradient를 사용합니다.
+
+  Migration Notes: 기존 Tabs 사용 코드는 변경할 필요가 없습니다. 새 helper는 `@orioncactuscorp/ui/scss/mixins/gradient`에서 import합니다.
+
+- 58ee8ed: Interaction 강도를 host 범위에서 선택할 수 있는 `data-oc-interaction-variant="light|normal|strong"` selector와 `--oc-interaction-opacity-factor` CSS 변수 계약을 추가합니다. 커스텀 host 타입에는 공개된 `InteractionHostProps`를 재사용할 수 있고, Button, ActionArea, Alert, form control, Menu portal을 포함한 합성 경로에서도 같은 계약이 적용되며 기존 `Interaction variant`와 `--oc-interaction-opacity-*` 출력값은 유지됩니다.
+
+  Migration Notes:
+  - 기존 사용 변경 없음
+  - 색을 커스텀한 컴포넌트 또는 합성 영역의 Interaction 강도를 함께 바꾸려면 host에 `data-oc-interaction-variant`를 설정하세요.
+
+- 5afca2d: `oc-fluid()` SCSS helper를 추가해 최소값, 최대값, 기준 viewport, anchor를 조합한 fluid length 값을 생성할 수 있도록 합니다.
+  - `anchor` 기본값은 `to`이며 `$breakpoint-md` 같은 Sass breakpoint 변수와 `375px` 같은 직접 viewport 값을 지원합니다.
+  - 기존 `fluidClamp()` 호출은 호환성을 위해 유지합니다.
+  - Migration Notes: 신규 커스텀 fluid 값은 `scss/mixins/fluid`의 `oc-fluid()`를 사용합니다.
+
+### Patch Changes
+
+- 908a248: Checkbox, Radio, Switch, BackgroundIconButton의 채워진 배경색과 전경색을 component contract CSS 변수로 노출합니다. 기본 색상은 유지하면서 consumer가 내부 상태 selector를 복제하지 않고 두 색을 함께 재정의할 수 있습니다.
+- b27a713: Modal과 FloatingWindow 안의 Menu·Tooltip이 가장 가까운 surface를 portal boundary로 사용하도록 overlay stacking을 개선합니다. MenuContent와 TooltipContent에 명시적 container override를 추가하고 z-index 의미 단계와 중첩 규칙을 문서화합니다.
+
+  Migration Notes:
+  - Modal 또는 FloatingWindow 안의 Menu·Tooltip portal DOM이 document body가 아니라 owner surface 아래에 배치됩니다. body 직계 자식 selector에 의존한 consumer CSS는 `data-oc-*` selector 또는 명시적 `container` prop으로 전환해야 합니다.
+
+- 227bb35: Modal 키보드 회피 세션 해제를 고정 지연 대신 실행 중인 transform transition 감지 기반으로 전환합니다. `--oc-motion-*` 토큰으로 chase 모션이 느려져도 키보드 정리 시점에 스냅이 생기지 않으며, `getAnimations` 미지원 환경은 기존 fallback 지연으로 동작합니다. 내부적으로 키보드 세션 상태 전이가 순수 reducer 모듈로 정리되었고 공개 API 변경은 없습니다.
+
+  Migration Notes:
+  - 없음 — Modal 공개 API와 selector 계약 변경 없이 키보드 세션 해제 타이밍을 개선합니다.
+
+- 38834bb: `--oc-interaction-color`를 host와 하위 Interaction의 공개 상태 레이어 색 계약으로 문서화합니다. 전역 theme token이 아닌 host-scoped override 경계를 명시하고, Button의 기본 fallback을 `label-normal`로 정리하면서 solid/outlined와 variant별 기존 렌더링 결과는 유지합니다.
+- f65d9c2: Alert의 바깥 배경 닫기 거부 피드백이 반복 입력에서도 다시 재생되도록 보완합니다.
+- 479ef83: 모바일(iOS Safari/Chrome, Android Chrome)에서 소프트 키보드가 열리고 닫힐 때 Modal bottom sheet의 키보드 대응을 개선합니다. 키보드 geometry를 sheet motion으로 추격해 footer와 컨테이너가 끊김 없이 이동하고, footer 배경이 키보드 위 브라우저 chrome 영역까지 채워지며, 직전 실측 키보드 높이로 포커스 필드를 선제 노출해 배경 페이지 스크롤/pan과 흔들림을 방지합니다. blur 없이 키보드만 닫는 경우(Android back 제스처 등)에도 하단 예약 공간이 해제됩니다. viewport 레이어에 내부 지향 상태 attribute `data-oc-modal-keyboard-avoiding="true"`가 추가됩니다.
+
+  Migration Notes:
+  - 없음 — 기존 Modal API 변경 없이 키보드가 표시된 모바일 viewport 배치와 전환 품질을 개선합니다.
+
+- 5e2ad3e: Safari에서 `BackgroundIconButton` 배경 레이어가 네모로 렌더링될 수 있는 경우에도 원형 반지름 fallback을 유지합니다.
+
+  Migration Notes:
+  - 없음
+
+### Migration Notes
+
+- Modal 또는 FloatingWindow 안의 Menu·Tooltip portal DOM이 document body가 아니라 owner surface 아래에 배치됩니다. body 직계 자식 selector에 의존한 consumer CSS는 `data-oc-*` selector 또는 명시적 `container` prop으로 전환해야 합니다.
+- Modal이 아닌 콘텐츠에는 `PositionSnap.Root`, `PositionSnap.Positioner`, 선택적인 `PositionSnap.Handle`을 조합하고 논리 방향 position 이름을 사용하세요. 기존 Modal snap API와 물리 방향 position 이름은 변경되지 않습니다.
+- 새 fluid/gradient helper를 사용하는 consumer는 `@orioncactuscorp/ui/scss/mixins/fluid`의 `oc-fluid()`와 `@orioncactuscorp/ui/scss/mixins/gradient`를 import하세요. 기존 `fluidClamp()`와 Tabs 사용 코드는 변경할 필요가 없습니다.
+- 색을 커스텀한 컴포넌트 또는 합성 영역의 Interaction 강도를 함께 바꾸려면 host에 `data-oc-interaction-variant`를 설정하세요. 기존 사용에는 변경이 없습니다.
+
 ## 1.14.0
 
 ### Changes

package/README.md

@@ -72,28 +72,30 @@ export default function Example() {
 
 ## Documentation
 
-이 패키지는 상세 가이드를 `docs/`로 함께 배포합니다. 설치 후 `node_modules/@orioncactuscorp/ui/docs/`에서 설치 버전과 일치하는 문서를 바로 읽을 수 있고, 웹에서는 `https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.14.0/docs/<파일명>`으로 볼 수 있습니다.
-
-| 문서                                                           | 내용                                                                     |
-| -------------------------------------------------------------- | ------------------------------------------------------------------------ |
-| [API Naming Conventions][api-conventions]                      | `variant`, `appearance`, `size` prop의 역할과 명명 규칙                  |
-| [Selector Contract][selector-contract]                         | `data-oc-*` 기반 커스터마이즈 계약 — 컴포넌트별 selector/slot/state 표   |
-| [Semantic Colors][colors]                                      | 57개 semantic color의 역할, light/dark 기본값, pairing 규칙              |
-| [Typography][typography]                                       | 19개 variant의 용도, responsive stop, line-height, weight                |
-| [SCSS Helpers][scss-helpers]                                   | `oc-border`, `oc-radius`, `oc-alpha`, `typo`, `respond-to`, `fluidClamp` |
-| [Semantic Motion][motion]                                      | intent/phase/pace 기반 motion 계약과 reduced-motion 정책                 |
-| [Spring Motion][spring]                                        | iOS perceptual duration 기반 spring transition                           |
-| [Responsive Foundation Profile][responsive-foundation-profile] | typo/space responsive 출력 mode 컴파일 설정                              |
-| [Token Reference][tokens]                                      | `--oc-*` foundation 토큰 전체 목록                                       |
-| [Stability Policy][stability]                                  | 공개 계약 범위, SemVer 기준, deprecation 절차                            |
-| [Editor Setup][editor-setup]                                   | VS Code CSS 변수 자동완성 설정                                           |
+이 패키지는 상세 가이드를 `docs/`로 함께 배포합니다. 설치 후 `node_modules/@orioncactuscorp/ui/docs/`에서 설치 버전과 일치하는 문서를 바로 읽을 수 있고, 웹에서는 `https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.15.0/docs/<파일명>`으로 볼 수 있습니다.
+
+| 문서                                                           | 내용                                                                   |
+| -------------------------------------------------------------- | ---------------------------------------------------------------------- |
+| [API Naming Conventions][api-conventions]                      | `variant`, `appearance`, `size` prop의 역할과 명명 규칙                |
+| [Selector Contract][selector-contract]                         | `data-oc-*` 기반 커스터마이즈 계약 — 컴포넌트별 selector/slot/state 표 |
+| [Semantic Colors][colors]                                      | 57개 semantic color의 역할, light/dark 기본값, pairing 규칙            |
+| [Typography][typography]                                       | 19개 variant의 용도, responsive stop, line-height, weight              |
+| [SCSS Helpers][scss-helpers]                                   | `oc-border`, `oc-radius`, `oc-alpha`, `oc-fluid`, `typo`, `respond-to` |
+| [Semantic Motion][motion]                                      | intent/phase/pace 기반 motion 계약과 reduced-motion 정책               |
+| [Spring Motion][spring]                                        | iOS perceptual duration 기반 spring transition                         |
+| [Responsive Foundation Profile][responsive-foundation-profile] | typo/space responsive 출력 mode 컴파일 설정                            |
+| [Overlay Stacking][overlay-stacking]                           | z-index 의미 단계와 중첩 portal boundary 규칙                          |
+| [Token Reference][tokens]                                      | `--oc-*` foundation 토큰 전체 목록                                     |
+| [Stability Policy][stability]                                  | 공개 계약 범위, SemVer 기준, deprecation 절차                          |
+| [Editor Setup][editor-setup]                                   | VS Code CSS 변수 자동완성 설정                                         |
 
 ## Components
 
 - `SectionHeader`
 - `Button`, `TextButton`, `IconButton`, `BackgroundIconButton`
+- `PositionSnap`, `PositionSnapRoot`, `PositionSnapPositioner`, `PositionSnapHandle`
 - `ActionArea`, `ActionAreaButton`, `ActionAreaLayout`
-- `Badge`, `Background`, `Divider`, `Loading`, `Skeleton`, `Cell`, `CellItem`
+- `Badge`, `Background`, `Divider`, `Loading`, `ProgressIndicator`, `Skeleton`, `Cell`, `CellItem`
 - `CheckMark`
 - `Field`, `FieldLabel`, `FieldControl`, `FieldMessage`, `FieldErrorMessage` (`vertical`/`horizontal` orientation)
 - `Fieldset`, `FieldLegend`, `FieldsetContent`, `FieldGroup`
@@ -112,6 +114,28 @@ export default function Example() {
 - `ScrollArea`, `ScrollAreaContainer`
 - `SvgIcon`, `Interaction`
 
+### PositionSnap
+
+`PositionSnap`은 Button 같은 독립 control을 viewport 또는 지정한 element의 named position 사이에서 드래그해 안착시키는 compound component입니다. `Positioner`가 위치 transform을 소유하므로 내부 Button의 transform과 interaction 표현은 유지됩니다. `drag="content"`는 Positioner 전체에서, `drag="handle"`은 명시한 `PositionSnapHandle`에서만 drag를 시작합니다.
+
+```tsx
+import { Button, PositionSnap } from '@orioncactuscorp/ui';
+
+<PositionSnap.Root
+  positions={['block-end-inline-start', 'block-end-inline-end']}
+  defaultPosition='block-end-inline-end'
+>
+  <PositionSnap.Positioner>
+    <Button>도움말</Button>
+  </PositionSnap.Positioner>
+</PositionSnap.Root>;
+```
+
+- `position`, `defaultPosition`, `onPositionChange`로 controlled/uncontrolled 상태를 구성합니다.
+- 기본 boundary는 visual viewport이며 `boundary`에 element를 전달하면 해당 영역 안에서 안착합니다.
+- `boundaryPadding`은 boundary와 control 사이의 최소 여백입니다.
+- Modal의 popup `snapPositions`는 같은 position geometry와 release 정책을 사용하지만 backdrop, dismissal, scroll arbitration은 Modal이 계속 소유합니다.
+
 ### Modal initial focus
 
 Modal은 DOM 순서의 첫 control을 기계적으로 선택하지 않습니다. 기본 `initialFocus="auto"`는 `ModalHeader`의 title을 `tabIndex={-1}`인 정적 문맥 시작점으로 포커스하고, title이 없을 때만 첫 tabbable 요소로 fallback합니다. modeless surface는 현재 작업 포커스를 유지합니다.
@@ -376,14 +400,18 @@ SCSS foundation profile은 compile-time 설정입니다. Prebuilt `foundations.c
 
 SCSS mixin/function 전체 시그니처와 예시는 [SCSS Helpers 가이드][scss-helpers]를 참조하세요. 아래는 대표 helper 요약입니다.
 
-| Helper                             | 모듈                     | 용도                                                                    |
-| ---------------------------------- | ------------------------ | ----------------------------------------------------------------------- |
-| `oc-border(...)`                   | `scss/mixins/element`    | layout에 영향 없는 box-shadow surface stroke (side/placement 지정 가능) |
-| `oc-radius($radius)`               | `scss/mixins/radius`     | 컴포넌트 로컬 radius를 전역 radius factor에 연결                        |
-| `oc-alpha($color, $opacity)`       | `scss/mixins/color`      | CSS 변수 색상에도 동작하는 `color-mix` 기반 알파                        |
-| `@include typo($variant, $weight)` | `scss/mixins/typo`       | typo 토큰 조합 출력 (`--oc-typo-size-factor` 반영)                      |
-| `@include respond-to(...)`         | `scss/mixins/breakpoint` | breakpoint media query (named/직접 값/구간)                             |
-| `fluidClamp(...)`, `toRem($px)`    | `scss/mixins/utils`      | 커스텀 fluid 값 생성                                                    |
+| Helper                                 | 모듈                     | 용도                                                                    |
+| -------------------------------------- | ------------------------ | ----------------------------------------------------------------------- |
+| `oc-border(...)`                       | `scss/mixins/element`    | layout에 영향 없는 box-shadow surface stroke (side/placement 지정 가능) |
+| `oc-radius($radius)`                   | `scss/mixins/radius`     | 컴포넌트 로컬 radius를 전역 radius factor에 연결                        |
+| `oc-alpha($color, $opacity)`           | `scss/mixins/color`      | CSS 변수 색상에도 동작하는 `color-mix` 기반 알파                        |
+| `oc-easing-gradient(...)`              | `scss/mixins/gradient`   | smoothstep 색 변화율을 적용한 4방향 linear gradient                     |
+| `@include oc-gradient-mask(...)`       | `scss/mixins/gradient`   | fade 길이와 content 길이를 조정하는 양끝 gradient mask                  |
+| `@include oc-gradient-mask-edges(...)` | `scss/mixins/gradient`   | 2D scroll content의 네 edge를 교차 합성하는 gradient mask               |
+| `@include typo($variant, $weight)`     | `scss/mixins/typo`       | typo 토큰 조합 출력 (`--oc-typo-size-factor` 반영)                      |
+| `@include respond-to(...)`             | `scss/mixins/breakpoint` | breakpoint media query (named/직접 값/구간)                             |
+| `oc-fluid(...)`                        | `scss/mixins/fluid`      | 커스텀 fluid 값 생성                                                    |
+| `fluidClamp(...)`, `toRem($px)`        | `scss/mixins/utils`      | 기존 fluid 호출 호환 및 px→rem 변환                                     |
 
 `@orioncactuscorp/ui/scss/mixins/element`는 요소 표면을 구성할 때 쓰는 SCSS helper를 제공합니다.
 
@@ -620,15 +648,16 @@ GitHub 리포지터리 공개를 준비하고 있습니다. 그동안 의견이
 <!-- 버전은 `bun run agent:sync-version`이 릴리스마다 stamp합니다. 직접 수정하지 마세요. -->
 
 [storybook]: https://oc-ui-storybook.pages.dev
-[changelog]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.14.0/CHANGELOG.md
-[api-conventions]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.14.0/docs/api-conventions.md
-[selector-contract]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.14.0/docs/selector-contract.md
-[colors]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.14.0/docs/colors.md
-[typography]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.14.0/docs/typography.md
-[scss-helpers]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.14.0/docs/scss-helpers.md
-[motion]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.14.0/docs/motion.md
-[spring]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.14.0/docs/spring.md
-[responsive-foundation-profile]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.14.0/docs/responsive-foundation-profile.md
-[tokens]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.14.0/docs/tokens.md
-[stability]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.14.0/docs/stability.md
-[editor-setup]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.14.0/docs/editor-setup.md
+[changelog]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.15.0/CHANGELOG.md
+[api-conventions]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.15.0/docs/api-conventions.md
+[selector-contract]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.15.0/docs/selector-contract.md
+[colors]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.15.0/docs/colors.md
+[typography]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.15.0/docs/typography.md
+[scss-helpers]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.15.0/docs/scss-helpers.md
+[motion]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.15.0/docs/motion.md
+[spring]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.15.0/docs/spring.md
+[responsive-foundation-profile]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.15.0/docs/responsive-foundation-profile.md
+[overlay-stacking]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.15.0/docs/overlay-stacking.md
+[tokens]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.15.0/docs/tokens.md
+[stability]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.15.0/docs/stability.md
+[editor-setup]: https://cdn.jsdelivr.net/npm/@orioncactuscorp/ui@1.15.0/docs/editor-setup.md

package/dist/components/BackgroundIconButton/BackgroundIconButton.css

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

package/dist/components/Button/Button.css

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

package/dist/components/CheckMark/CheckMark.js

@@ -1,26 +1,28 @@
 'use client';
-import { jsxs as n, jsx as a } from "react/jsx-runtime";
-import m from "@orioncactuscorp/icons/orioncactus/CheckThick";
-import k from "../Interaction/Interaction.js";
+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 e from "./CheckMark.module.scss.js";
-function b({
+function g({
   children: t,
   className: r = "",
-  size: o = "medium",
+  size: n = "medium",
   onChange: i,
   onCheckedChange: p,
   ref: s,
+  "data-oc-interaction-variant": d,
   ...l
 }) {
-  const d = (c) => {
-    i?.(c), p?.(c.currentTarget.checked);
-  }, h = t !== void 0;
-  return /* @__PURE__ */ n(
+  const h = (o) => {
+    i?.(o), p?.(o.currentTarget.checked);
+  }, m = t !== void 0;
+  return /* @__PURE__ */ c(
     "label",
     {
-      className: [e.checkMark, e[o], r].filter(Boolean).join(" "),
+      className: [e.checkMark, e[n], r].filter(Boolean).join(" "),
       "data-oc-component": "check-mark",
-      "data-oc-size": o,
+      "data-oc-size": n,
+      "data-oc-interaction-variant": d,
       children: [
         /* @__PURE__ */ a(
           "input",
@@ -28,19 +30,19 @@ function b({
             ...l,
             ref: s,
             type: "checkbox",
-            onChange: d,
+            onChange: h,
             "data-oc-part": "input"
           }
         ),
-        /* @__PURE__ */ n("span", { "data-oc-part": "container", children: [
-          /* @__PURE__ */ a(k, { self: !0 }),
-          /* @__PURE__ */ a("span", { "data-oc-part": "icon", children: /* @__PURE__ */ a(m, { size: "custom" }) })
+        /* @__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" }) })
         ] }),
-        h ? /* @__PURE__ */ a("span", { "data-oc-part": "content", children: /* @__PURE__ */ a("span", { "data-oc-part": "label", children: t }) }) : null
+        m ? /* @__PURE__ */ a("span", { "data-oc-part": "content", children: /* @__PURE__ */ a("span", { "data-oc-part": "label", children: t }) }) : null
       ]
     }
   );
 }
 export {
-  b as default
+  g 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__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-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-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}}
+.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}}

package/dist/components/Checkbox/Checkbox.js

@@ -1,30 +1,31 @@
 'use client';
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { jsxs as o, jsx as a } from "react/jsx-runtime";
 import { useRef as x, useEffect as b } from "react";
-import v from "@orioncactuscorp/icons/orioncactus/CheckThick";
-import y from "@orioncactuscorp/icons/orioncactus/LineHorizontalThick";
-import C from "../Interaction/Interaction.js";
-import { mergeRefs as g } from "../../utils/mergeRefs.js";
+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 i from "./Checkbox.module.scss.js";
-function E({
-  children: r,
-  className: s = "",
+function B({
+  children: n,
+  className: d = "",
   size: p = "medium",
   fill: l = !1,
-  indeterminate: t = !1,
-  trailingCompound: n,
-  onChange: d,
+  indeterminate: e = !1,
+  trailingCompound: r,
+  onChange: s,
   onCheckedChange: f,
   ref: m,
-  ...u
+  "data-oc-interaction-variant": u,
+  ...h
 }) {
   const c = x(null);
   b(() => {
-    c.current && (c.current.indeterminate = t);
-  }, [t]);
-  const h = (a) => {
-    d?.(a), f?.(a.currentTarget.checked);
-  }, k = r !== void 0 || n !== void 0;
+    c.current && (c.current.indeterminate = e);
+  }, [e]);
+  const k = (t) => {
+    s?.(t), f?.(t.currentTarget.checked);
+  }, v = n !== void 0 || r !== void 0;
   return /* @__PURE__ */ o(
     "label",
     {
@@ -32,43 +33,44 @@ function E({
         i.checkbox,
         i[p],
         l ? i.fill : "",
-        s
+        d
       ].filter(Boolean).join(" "),
       "data-oc-component": "checkbox",
       "data-oc-size": p,
       "data-oc-fill": l ? "true" : void 0,
+      "data-oc-interaction-variant": u,
       children: [
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ a(
           "input",
           {
-            ...u,
-            ref: g(c, m),
+            ...h,
+            ref: j(c, m),
             type: "checkbox",
-            onChange: h,
-            "data-indeterminate": t ? "" : void 0,
-            "data-oc-indeterminate": t ? "true" : void 0,
+            onChange: k,
+            "data-indeterminate": e ? "" : void 0,
+            "data-oc-indeterminate": e ? "true" : void 0,
             "data-oc-part": "input"
           }
         ),
         /* @__PURE__ */ o("span", { "data-oc-part": "container", children: [
-          /* @__PURE__ */ e(C, { self: !0 }),
-          /* @__PURE__ */ e("span", { "data-oc-part": "wrapper", children: /* @__PURE__ */ o("span", { "data-oc-part": "icon-wrapper", children: [
-            /* @__PURE__ */ e("span", { "data-oc-part": "check", children: /* @__PURE__ */ e(v, { size: "custom" }) }),
-            /* @__PURE__ */ e("span", { "data-oc-part": "indeterminate", children: /* @__PURE__ */ e(y, { size: "custom" }) })
+          /* @__PURE__ */ a(g, { self: !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" }) })
           ] }) })
         ] }),
-        k ? /* @__PURE__ */ o("span", { "data-oc-part": "content", children: [
-          r !== void 0 ? /* @__PURE__ */ e("span", { "data-oc-part": "label", children: r }) : null,
-          n ? /* @__PURE__ */ e(
+        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(
             "span",
             {
               "data-oc-part": "trailing-compound",
               role: "presentation",
-              onClick: (a) => a.preventDefault(),
-              onKeyDown: (a) => {
-                (a.key === "Enter" || a.key === " ") && a.preventDefault();
+              onClick: (t) => t.preventDefault(),
+              onKeyDown: (t) => {
+                (t.key === "Enter" || t.key === " ") && t.preventDefault();
               },
-              children: n
+              children: r
             }
           ) : null
         ] }) : null
@@ -77,5 +79,5 @@ function E({
   );
 }
 export {
-  E as default
+  B as default
 };