diff --git a/.changeset/afraid-camels-itch.md b/.changeset/afraid-camels-itch.md new file mode 100644 index 00000000..1b1745aa --- /dev/null +++ b/.changeset/afraid-camels-itch.md @@ -0,0 +1,7 @@ +--- +'@cocokits/angular-components': minor +--- + +- Add Avatar component +- Add Accordion component +- Add Tabs component diff --git a/.changeset/cuddly-tigers-cheer.md b/.changeset/cuddly-tigers-cheer.md new file mode 100644 index 00000000..a0309bb8 --- /dev/null +++ b/.changeset/cuddly-tigers-cheer.md @@ -0,0 +1,7 @@ +--- +'@cocokits/core': minor +--- + +- Add Avatar component +- Add Accordion component +- Add Tabs component diff --git a/.changeset/funny-gifts-share.md b/.changeset/funny-gifts-share.md new file mode 100644 index 00000000..d31a1c56 --- /dev/null +++ b/.changeset/funny-gifts-share.md @@ -0,0 +1,6 @@ +--- +'@cocokits/angular-tabs': minor +'@cocokits/react-tabs': minor +--- + +- Add Tabs component diff --git a/.changeset/gentle-tables-happen.md b/.changeset/gentle-tables-happen.md new file mode 100644 index 00000000..f67c49e0 --- /dev/null +++ b/.changeset/gentle-tables-happen.md @@ -0,0 +1,6 @@ +--- +'@cocokits/angular-avatar': minor +'@cocokits/react-avatar': minor +--- + +- Add Avatar component diff --git a/.changeset/giant-pets-judge.md b/.changeset/giant-pets-judge.md new file mode 100644 index 00000000..ef8ff82a --- /dev/null +++ b/.changeset/giant-pets-judge.md @@ -0,0 +1,7 @@ +--- +'@cocokits/react-components': minor +--- + +- Add Avatar component +- Add Accordion component +- Add Tabs component diff --git a/.changeset/olive-rules-visit.md b/.changeset/olive-rules-visit.md new file mode 100644 index 00000000..055aedd0 --- /dev/null +++ b/.changeset/olive-rules-visit.md @@ -0,0 +1,7 @@ +--- +'@cocokits/common-utils': minor +--- + +- Add Animation +- Add Math +- Add common model diff --git a/.changeset/six-kids-call.md b/.changeset/six-kids-call.md new file mode 100644 index 00000000..633c38cb --- /dev/null +++ b/.changeset/six-kids-call.md @@ -0,0 +1,6 @@ +--- +'@cocokits/react-utils': minor +--- + +- Add Feature Store +- Add Animation, onInit, onDestroy, selection, slotChildren hooks diff --git a/.changeset/ten-pots-think.md b/.changeset/ten-pots-think.md new file mode 100644 index 00000000..850f8e6f --- /dev/null +++ b/.changeset/ten-pots-think.md @@ -0,0 +1,8 @@ +--- +'@cocokits/theme-cocokits': minor +'@cocokits/theme-frames-x': minor +--- + +- Add Avatar styles +- Add Accordion styles +- Add Tabs styles diff --git a/.changeset/wise-lions-watch.md b/.changeset/wise-lions-watch.md new file mode 100644 index 00000000..3843baf1 --- /dev/null +++ b/.changeset/wise-lions-watch.md @@ -0,0 +1,6 @@ +--- +'@cocokits/angular-accordion': minor +'@cocokits/react-accordion': minor +--- + +- Add Accordion component diff --git a/.github/workflows/main-branch-pull-request.yml b/.github/workflows/main-branch-pull-request.yml index 6ac133e9..acb98943 100644 --- a/.github/workflows/main-branch-pull-request.yml +++ b/.github/workflows/main-branch-pull-request.yml @@ -29,7 +29,7 @@ jobs: run: pnpm exec nx run cocokits:depcheck - name: Build All - run: pnpm nx affected:build --base=main --head=HEAD --parallel=4 + run: pnpm nx affected:build --base=main --head=HEAD --exclude=website --parallel=4 - name: Test - run: pnpm nx affected:test --base=main --head=HEAD --exclude=cocokits --parallel=1 \ No newline at end of file + run: pnpm nx affected:test --base=main --head=HEAD --exclude=cocokits,website --parallel=1 \ No newline at end of file diff --git a/apps/angular-kits-doc/stories/getting-started/utils/advanced-configuration.utils.tsx b/apps/angular-kits-doc/stories/getting-started/utils/advanced-configuration.utils.tsx index d340da5d..7810b230 100644 --- a/apps/angular-kits-doc/stories/getting-started/utils/advanced-configuration.utils.tsx +++ b/apps/angular-kits-doc/stories/getting-started/utils/advanced-configuration.utils.tsx @@ -167,6 +167,8 @@ export function getMergeThemesStep3Scss() { @include Cocokits.components_accordion; @include Cocokits.components_accordion_header; @include Cocokits.components_accordion_panel; +@include Cocokits.components_tabs; +@include Cocokits.components_tab; `); } diff --git a/apps/angular-kits-doc/stories/ui-components/tabs/tabs/description.md b/apps/angular-kits-doc/stories/ui-components/tabs/tabs/description.md new file mode 100644 index 00000000..b2ff6393 --- /dev/null +++ b/apps/angular-kits-doc/stories/ui-components/tabs/tabs/description.md @@ -0,0 +1,21 @@ +The `tabs` component form `@cocokits` provides a flexible tabs component for Angular applications. Designed for performance, it supports custom templates, programmatic control, and adaptive behaviors for complex UI scenarios. + +## features + +- **Custom Header Templates:** +Fully customize tab headers using Angular templates + +- **Animation Control:** +Toggle transition animations + +- **Disabled Tabs:** +Disable individual tabs using [disabled] property + +- **Imperative Control:** +Programmatically activate tabs + +- **Tab Align:** +Configure tab headers alignment (left/right/center/stretch) + +- **Content Persistence:** +Option to preserve DOM state when switching tabs \ No newline at end of file diff --git a/apps/angular-kits-doc/stories/ui-components/tabs/tabs/index.stories.ts b/apps/angular-kits-doc/stories/ui-components/tabs/tabs/index.stories.ts new file mode 100644 index 00000000..14ede0c8 --- /dev/null +++ b/apps/angular-kits-doc/stories/ui-components/tabs/tabs/index.stories.ts @@ -0,0 +1,66 @@ +import { applicationConfig, moduleMetadata } from '@storybook/angular'; + +import { TabComponent, TabsComponent } from '@cocokits/angular-tabs'; +import { + ngArgType, + StoriesMeta, + withThemeConfigProvider, + withWrapperDecorator, +} from '@cocokits/storybook-addon-theme-angular'; + +import descriptionMd from './description.md'; + +export { Default } from './overview/default.stories'; +export { Type } from './overview/type.stories'; +export { Size } from './overview/size.stories'; +export { Color } from './overview/color.stories'; +export { Disabled } from './overview/disabled.stories'; +export { CustomHeader } from './overview/custom-header.stories'; +export { Control } from './overview/control.stories'; + +const meta: StoriesMeta = { + component: TabsComponent, + title: 'UI Components/Tabs', + tags: ['status:new'], + subcomponents: [TabComponent], + decorators: [ + withWrapperDecorator({ insideBox: true }, { width: '500px' }), + applicationConfig({ + providers: [withThemeConfigProvider()], + }), + moduleMetadata({ + imports: [TabComponent], + }), + ], + parameters: { + docs: { + description: { + component: [descriptionMd].join('\n'), + }, + }, + cckAddon: { + componentName: 'tabs', + subcomponents: { + TabComponent: { + name: 'tab', + description: 'The Tab component represents a single tab within the Tabs component.', + argsTypes: { + ...ngArgType({ name: 'disabled', type: 'boolean', defaultValue: 'false' }), + ...ngArgType({ name: 'header', type: 'string', defaultValue: '' }), + ...ngArgType({ name: 'value', type: 'TValue', defaultValue: '' }), + }, + }, + }, + }, + }, + argTypes: { + ...ngArgType({ name: 'change', category: 'outputs', type: 'TabSelectionChangeEvent' }), + ...ngArgType({ name: 'selectedChange', type: 'TValue' }), + ...ngArgType({ name: 'selectedIndexChange', type: 'number' }), + ...ngArgType({ name: 'headerAlign', type: `left | center | right | stretch`, defaultValue: 'left' }), + ...ngArgType({ name: 'hideContent', type: `boolean`, defaultValue: 'false' }), + ...ngArgType({ name: 'instantAnimation', type: `boolean`, defaultValue: 'false' }), + ...ngArgType({ name: 'selectedIndex', defaultValue: '0' }), + }, +}; +export default meta; diff --git a/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/color.stories.ts b/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/color.stories.ts new file mode 100644 index 00000000..2261c2e5 --- /dev/null +++ b/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/color.stories.ts @@ -0,0 +1,54 @@ +import { TabsComponent } from '@cocokits/angular-tabs'; +import { CCK_CONTROL, renderWithPageTab, renderWithThemeProp } from '@cocokits/storybook-addon-theme'; +import { StoryObj } from '@cocokits/storybook-addon-theme-angular'; + +export const Color: StoryObj = { + name: 'Color', + parameters: { + docs: { + description: { + story: 'Color options enable seamless integration with various themes or to highlight specific actions.', + }, + }, + cckAddon: { + renderConditions: [renderWithThemeProp('color'), renderWithPageTab('Overview')], + singleControls: ['type'], + source: [ + { + filename: 'example.component.html', + language: 'angular-html', + code: ` + <% themeComponentConfig.color.values.map(color => { %> + + + type='<%= type %>' <% } %> + color='<%= color %>' + [hideContent]="true" + > + + + + + <% }) %> + `, + }, + ], + controls: [CCK_CONTROL.type()], + }, + }, + render: (args) => ({ + props: { + ...args, + }, + template: ` + @for (color of cckControl.themeComponentConfig.color.values; let col = $index; track color) { + + + + + + } + `, + }), +}; diff --git a/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/control.stories.ts b/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/control.stories.ts new file mode 100644 index 00000000..cdfaf318 --- /dev/null +++ b/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/control.stories.ts @@ -0,0 +1,198 @@ +import { Component, input, model } from '@angular/core'; + +import { moduleMetadata } from '@storybook/angular'; + +import { TabComponent, TabsComponent } from '@cocokits/angular-tabs'; +import { CCK_CONTROL, renderWithPageTab } from '@cocokits/storybook-addon-theme'; +import { StoryObj } from '@cocokits/storybook-addon-theme-angular'; + +@Component({ + selector: 'cck-tabs-control', + standalone: true, + imports: [TabsComponent, TabComponent], + styles: [ + ` + hr { + width: 100%; + margin: 12px 0; + } + `, + ], + template: ` +
+
+ 1 +
+
+ 2 +
+
+ 3 +
+
+ +
+ + + + + + + `, +}) +export class StoryTabsControlComponent { + type = input.required(); + selected = model(1); +} + +export const Control: StoryObj = { + name: 'Control', + decorators: [ + moduleMetadata({ + imports: [StoryTabsControlComponent], + }), + ], + parameters: { + docs: { + description: { + story: 'Tabs can be controlled programmatically.', + }, + }, + cckAddon: { + renderConditions: [renderWithPageTab('Overview')], + source: [ + { + filename: 'example.component.html', + language: 'angular-html', + code: ` +
+
+ 1 +
+
+ 2 +
+
+ 3 +
+
+ +
+ + + + + + + `, + }, + { + filename: 'example.component.ts', + language: 'angular-ts', + code: ` + @Component({ + selector: 'cck-tabs-control', + standalone: true, + imports: [TabsComponent, TabComponent], + stylesUrls: ['./example.component.scss'], + templateUrl: './example.component.html', + }) + export class StoryTabsControlComponent { + selected = signal(1); + } + `, + }, + { + filename: 'example.component.scss', + language: 'scss', + code: ` + // Warning: The styles below are optimized for dark mode. + + .cck-doc-story__radio-selection-group { + display: flex; + justify-content: center; + gap: 8px; + } + + .cck-doc-story__radio-selection { + width: 32px; + height: 32px; + border: 1px solid var(--cck-doc-color-border-3, #ffffff33); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + color: var(--cck-doc-color-font-1, #fff); + font: var(--cck-doc-text-sm-light, 300 14px/24px Inter); + cursor: pointer; + user-select: none; + } + + .cck-doc-story__radio-selection--selected { + background-color: var(--cck-doc-color-bg-selected-2, #14513c); + } + + .cck-doc-story__button--basic { + padding: 0 16px 0 16px; + background-color: transparent; + color: var(--cck-doc-color-font-1, #fff); + gap: 8px; + height: 40px; + align-items: center; + border: none; + border-radius: var(--cck-doc-radius-sm, 4px); + box-sizing: border-box; + cursor: pointer; + display: flex; + font: var(--cck-doc-text-sm-medium, 500 14px/24px Inter); + justify-content: center; + margin: 0; + min-width: 80px; + outline: transparent; + + &:hover { + background-color: var(--cck-doc-color-bg-hover-2, #15171e); + } + + hr { + width: 100%; + margin: 12px 0; + } + } + `, + }, + ], + singleControls: ['type'], + hasControl: false, + controls: [CCK_CONTROL.type()], + }, + }, + render: (args) => { + return { + props: { + ...args, + }, + template: ` + + `, + }; + }, +}; diff --git a/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/custom-header.stories.ts b/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/custom-header.stories.ts new file mode 100644 index 00000000..32f8d42b --- /dev/null +++ b/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/custom-header.stories.ts @@ -0,0 +1,107 @@ +import { moduleMetadata } from '@storybook/angular'; + +import { SvgIconComponent } from '@cocokits/angular-icon'; +import { TabHeaderTemplateDirective, TabsComponent } from '@cocokits/angular-tabs'; +import { CCK_CONTROL, renderWithPageTab } from '@cocokits/storybook-addon-theme'; +import { StoryObj } from '@cocokits/storybook-addon-theme-angular'; + +export const CustomHeader: StoryObj = { + name: 'CustomHeader', + decorators: [ + moduleMetadata({ + imports: [TabHeaderTemplateDirective, SvgIconComponent], + }), + ], + parameters: { + docs: { + description: { + story: 'Custom headers allow for personalized tab headers, enhancing user experience and branding.', + }, + }, + cckAddon: { + renderConditions: [renderWithPageTab('Overview')], + singleControls: ['type'], + source: [ + { + filename: 'example.component.html', + language: 'angular-html', + code: ` + type='<%= type %>'<% } %> + > + + +
+ + Dashboard +
+ + + + +
+ + Tools +
+ + + + +
+ + Setting +
+ + + + `, + }, + { + filename: 'example.component.scss', + language: 'scss', + code: ` + .header { + display: flex; + gap: 4px; + align-items: center; + } + `, + }, + ], + controls: [CCK_CONTROL.type()], + }, + }, + render: (args) => ({ + props: { + ...args, + }, + template: ` + + + +
+ + Dashboard +
+ + + + +
+ + Tools +
+ + + + +
+ + Setting +
+ + + + `, + }), +}; diff --git a/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/default.stories.ts b/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/default.stories.ts new file mode 100644 index 00000000..663e4457 --- /dev/null +++ b/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/default.stories.ts @@ -0,0 +1,76 @@ +import { TabsComponent } from '@cocokits/angular-tabs'; +import { CCK_CONTROL, renderWithPageTab } from '@cocokits/storybook-addon-theme'; +import { ngThemeArgsToTemplate, StoryObj } from '@cocokits/storybook-addon-theme-angular'; + +export const Default: StoryObj = { + name: 'Default', + parameters: { + docs: { + description: { + story: + 'Shows the default example with no additional configurations, providing an interactive example in its most basic form.', + }, + }, + cckAddon: { + renderConditions: [renderWithPageTab('Overview')], + source: [ + { + filename: 'example.component.html', + language: 'angular-html', + code: ` + type='<%= type %>' <% } %> + <% if (typeof size !== 'undefined') { %> size='<%= size %>' <% } %> + <% if (typeof color !== 'undefined') { %> color='<%= color %>' <% } %> + headerAlign='<%= align %>' + <% if (instantAnimation) { %> [instantAnimation]="<%= instantAnimation %>" <% } %> + <% if (hideContent) { %> [hideContent]="<%= hideContent %>" <% } %> + > + <% for (let i = 0; i < length; i++) { %> + disabled <% } %>> +

Header <%= i + 1 %>

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ + <% } %> + + `, + }, + ], + hasControl: true, + controls: [ + CCK_CONTROL.type(), + CCK_CONTROL.size(), + CCK_CONTROL.color(), + CCK_CONTROL.additional(), + CCK_CONTROL.customNumber('Length', 4), + CCK_CONTROL.customSelect('Align', ['left', 'center', 'right', 'stretch']), + CCK_CONTROL.customBoolean('Instant Animation'), + CCK_CONTROL.customBoolean('Hide Content'), + ], + }, + }, + render: (args) => { + return { + props: { + ...args, + }, + template: ` + + +

Header {{ index + 1 }}

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ + + `, + }; + }, +}; diff --git a/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/disabled.stories.ts b/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/disabled.stories.ts new file mode 100644 index 00000000..e91aef8f --- /dev/null +++ b/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/disabled.stories.ts @@ -0,0 +1,48 @@ +import { TabsComponent } from '@cocokits/angular-tabs'; +import { CCK_CONTROL, renderWithPageTab } from '@cocokits/storybook-addon-theme'; +import { StoryObj } from '@cocokits/storybook-addon-theme-angular'; + +export const Disabled: StoryObj = { + name: 'Disabled', + parameters: { + docs: { + description: { + story: + 'Disabled tabs prevent user interaction, ensuring that users cannot select or activate them, which is useful for indicating unavailable options.', + }, + }, + cckAddon: { + renderConditions: [renderWithPageTab('Overview')], + singleControls: ['type'], + source: [ + { + filename: 'example.component.html', + language: 'angular-html', + code: ` + type='<%= type %>'<% } %> + [hideContent]="true" + > + + + + + `, + }, + ], + controls: [CCK_CONTROL.type()], + }, + }, + render: (args) => ({ + props: { + ...args, + }, + template: ` + + + + + + `, + }), +}; diff --git a/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/size.stories.ts b/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/size.stories.ts new file mode 100644 index 00000000..0fff5620 --- /dev/null +++ b/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/size.stories.ts @@ -0,0 +1,55 @@ +import { TabsComponent } from '@cocokits/angular-tabs'; +import { CCK_CONTROL, renderWithPageTab, renderWithThemeProp } from '@cocokits/storybook-addon-theme'; +import { StoryObj } from '@cocokits/storybook-addon-theme-angular'; + +export const Size: StoryObj = { + name: 'Size', + parameters: { + docs: { + description: { + story: + 'The size is adjustable to suit different design needs and screen dimensions, improving both aesthetics and usability.', + }, + }, + cckAddon: { + renderConditions: [renderWithThemeProp('size'), renderWithPageTab('Overview')], + singleControls: ['type'], + source: [ + { + filename: 'example.component.html', + language: 'angular-html', + code: ` + <% themeComponentConfig.size.values.map(size => { %> + + + type='<%= type %>'<% } %> + size='<%= size %>' + [hideContent]="true" + > + + + + + <% }) %> + `, + }, + ], + controls: [CCK_CONTROL.type()], + }, + }, + render: (args) => ({ + props: { + ...args, + }, + template: ` + @for (size of cckControl.themeComponentConfig?.size?.values; let col = $index; track size) { + + + + + + } + `, + }), +}; diff --git a/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/type.stories.ts b/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/type.stories.ts new file mode 100644 index 00000000..7520ed79 --- /dev/null +++ b/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/type.stories.ts @@ -0,0 +1,50 @@ +import { TabsComponent } from '@cocokits/angular-tabs'; +import { renderWithPageTab, renderWithThemeProp } from '@cocokits/storybook-addon-theme'; +import { StoryObj } from '@cocokits/storybook-addon-theme-angular'; + +export const Type: StoryObj = { + name: 'Type', + parameters: { + docs: { + description: { + story: + 'Displays variations in appearance and functionality, demonstrating how different types can be used to create unique Tabs styles.', + }, + }, + cckAddon: { + renderConditions: [renderWithThemeProp('type'), renderWithPageTab('Overview')], + source: [ + { + filename: 'example.component.html', + language: 'angular-html', + code: ` + <% themeComponentConfig.type.values.map(type => { %> + + + + + + + + + <% }) %> + `, + }, + ], + }, + }, + render: (args) => ({ + props: { + ...args, + }, + template: ` + @for (type of cckControl.themeComponentConfig?.type?.values; let col = $index; track type) { + + + + + + } + `, + }), +}; diff --git a/apps/react-kits-doc/stories/getting-started/utils/advanced-configuration.utils.tsx b/apps/react-kits-doc/stories/getting-started/utils/advanced-configuration.utils.tsx index 5ff56faa..cdfd4d86 100644 --- a/apps/react-kits-doc/stories/getting-started/utils/advanced-configuration.utils.tsx +++ b/apps/react-kits-doc/stories/getting-started/utils/advanced-configuration.utils.tsx @@ -181,6 +181,8 @@ export function getMergeThemesStep3Scss() { @include Cocokits.components_accordion; @include Cocokits.components_accordion_header; @include Cocokits.components_accordion_panel; +@include Cocokits.components_tabs; +@include Cocokits.components_tab; `); diff --git a/apps/react-kits-doc/stories/ui-components/tabs/tabs/description.md b/apps/react-kits-doc/stories/ui-components/tabs/tabs/description.md new file mode 100644 index 00000000..7bee46d3 --- /dev/null +++ b/apps/react-kits-doc/stories/ui-components/tabs/tabs/description.md @@ -0,0 +1,21 @@ +The `tabs` component from `@cocokits` offers a headless tabs system for React applications with complete customization capabilities. + +## features + +- **Custom Header Templates:** +Fully customize tab headers using Angular templates + +- **Animation Control:** +Toggle transition animations + +- **Disabled Tabs:** +Disable individual tabs using [disabled] property + +- **Imperative Control:** +Programmatically activate tabs + +- **Tab Align:** +Configure tab headers alignment (left/right/center/stretch) + +- **Content Persistence:** +Option to preserve DOM state when switching tabs \ No newline at end of file diff --git a/apps/react-kits-doc/stories/ui-components/tabs/tabs/index.stories.tsx b/apps/react-kits-doc/stories/ui-components/tabs/tabs/index.stories.tsx new file mode 100644 index 00000000..6ff3ed95 --- /dev/null +++ b/apps/react-kits-doc/stories/ui-components/tabs/tabs/index.stories.tsx @@ -0,0 +1,40 @@ +import { Tab, Tabs } from '@cocokits/react-tabs'; +import { StoriesMeta, withWrapperDecorator } from '@cocokits/storybook-addon-theme-react'; + +import descriptionMd from './description.md?raw'; + +export { Default } from './overview/default.stories'; +export { Type } from './overview/type.stories'; +export { Size } from './overview/size.stories'; +export { Color } from './overview/color.stories'; +export { Disabled } from './overview/disabled.stories'; +export { CustomHeader } from './overview/custom-header.stories'; +export { Control } from './overview/control.stories'; + +const meta: StoriesMeta = { + component: Tabs, + title: 'UI Components/Tabs', + subcomponents: {Tab}, + tags: ['status:new'], + decorators: [ + withWrapperDecorator({insideBox: true}, {width: '500px'}), + ], + parameters: { + docs: { + description: { + component: [descriptionMd].join('\n'), + }, + }, + cckAddon: { + componentName: 'tabs', + subcomponents: { + Tab: { + name: 'tab', + description: 'The Tab component represents a single tab within the Tabs component. It can be used to define the content and header of each tab.', + }, + } + }, + }, + argTypes: {}, +}; +export default meta; diff --git a/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/color.stories.tsx b/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/color.stories.tsx new file mode 100644 index 00000000..00ceaf8a --- /dev/null +++ b/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/color.stories.tsx @@ -0,0 +1,59 @@ +import { Tab, Tabs } from '@cocokits/react-tabs'; +import { CCK_CONTROL, renderWithPageTab, renderWithThemeProp } from '@cocokits/storybook-addon-theme'; +import { StoryObj } from '@cocokits/storybook-addon-theme-react'; + +export const Color: StoryObj = { + name: 'Color', + parameters: { + docs: { + description: { + story: 'Color options enable seamless integration with various themes or to highlight specific actions.', + }, + }, + cckAddon: { + renderConditions: [renderWithThemeProp('color'), renderWithPageTab('Overview')], + singleControls: ['type'], + source: [ + { + filename: 'Source Code', + language: 'tsx', + code: ` + import { Tabs, Tab } from "@cocokits/react-components"; + + export const MyComponent = () => { + return ( + <> + <% themeComponentConfig.color.values.map(color => { %> + + {/* ------------ <%= color %> ------------ */} + color='<%= color %>' <% } %> + type=<%= type %> + hideContent={true} + > + + + + + <% }) %> + + ); + } + `, + }, + ], + controls: [CCK_CONTROL.type()], + }, + }, + render: (args) => ( + <> + {args.cckControl.themeComponentConfig.color?.values.map((color, index) => ( + + + + + + ))} + + ), +}; diff --git a/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/control.stories.tsx b/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/control.stories.tsx new file mode 100644 index 00000000..29773e3a --- /dev/null +++ b/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/control.stories.tsx @@ -0,0 +1,154 @@ +import { useState } from 'react'; + +import { Tab, Tabs } from '@cocokits/react-tabs'; +import { CCK_CONTROL, renderWithPageTab } from '@cocokits/storybook-addon-theme'; +import { StoryObj } from '@cocokits/storybook-addon-theme-react'; + +function TabsControl({ type }: { type: string }) { + const [selected, setSelected] = useState(1); + return ( + <> +
+
setSelected(1)}> + 1 +
+
setSelected(2)}> + 2 +
+
setSelected(3)}> + 3 +
+
+
+ + setSelected(e.value)} hideContent={true}> + + + + + + ); +} + +export const Control: StoryObj = { + name: 'Control', + parameters: { + docs: { + description: { + story: 'Tabs can be controlled programmatically.', + }, + }, + cckAddon: { + renderConditions: [renderWithPageTab('Overview')], + singleControls: ['type'], + controls: [CCK_CONTROL.type()], + source: [ + { + filename: 'example.tsx', + language: 'tsx', + code: ` + import { Tabs, Tab } from "@cocokits/react-components"; + + export const MyComponent = () => { + const [selected, setSelected] = useState(1); + return ( + <> +
+
setSelected(1)}> + 1 +
+
setSelected(2)}> + 2 +
+
setSelected(3)}> + 3 +
+
+
+ + setSelected(e.value)} hideContent={true}> + + + + + + ); + } + `, + }, + { + filename: 'styles.scss', + language: 'scss', + code: ` + // Warning: The styles below are optimized for dark mode. + + .cck-doc-story__radio-selection-group { + display: flex; + justify-content: center; + gap: 8px; + } + + .cck-doc-story__radio-selection { + width: 32px; + height: 32px; + border: 1px solid var(--cck-doc-color-border-3, #ffffff33); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + color: var(--cck-doc-color-font-1, #fff); + font: var(--cck-doc-text-sm-light, 300 14px/24px Inter); + cursor: pointer; + user-select: none; + } + + .cck-doc-story__radio-selection--selected { + background-color: var(--cck-doc-color-bg-selected-2, #14513c); + } + + .cck-doc-story__button--basic { + padding: 0 16px 0 16px; + background-color: transparent; + color: var(--cck-doc-color-font-1, #fff); + gap: 8px; + height: 40px; + align-items: center; + border: none; + border-radius: var(--cck-doc-radius-sm, 4px); + box-sizing: border-box; + cursor: pointer; + display: flex; + font: var(--cck-doc-text-sm-medium, 500 14px/24px Inter); + justify-content: center; + margin: 0; + min-width: 80px; + outline: transparent; + + &:hover { + background-color: var(--cck-doc-color-bg-hover-2, #15171e); + } + } + + hr { + width: 100%; + margin: 0; + } + `, + }, + ], + }, + }, + render: (args) => , +}; diff --git a/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/custom-header.stories.tsx b/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/custom-header.stories.tsx new file mode 100644 index 00000000..8024b75d --- /dev/null +++ b/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/custom-header.stories.tsx @@ -0,0 +1,97 @@ +import { SvgIcon } from '@cocokits/react-icon'; +import { Tab, Tabs } from '@cocokits/react-tabs'; +import { CCK_CONTROL, renderWithPageTab } from '@cocokits/storybook-addon-theme'; +import { StoryObj } from '@cocokits/storybook-addon-theme-react'; + +export const CustomHeader: StoryObj = { + name: 'CustomHeader', + parameters: { + docs: { + description: { + story: 'Custom headers allow for personalized tab headers, enhancing user experience and branding.', + }, + }, + cckAddon: { + renderConditions: [renderWithPageTab('Overview')], + singleControls: ['type'], + controls: [CCK_CONTROL.type()], + source: [ + { + filename: 'Source Code', + language: 'tsx', + code: ` + import { Tabs, Tab } from "@cocokits/react-components"; + import { Icons } from "@cocokits/common-icons"; + import styled from "styled-components"; + + const StyledHeader = styled.div\` + display: flex; + gap: 4px; + \` + + export const MyComponent = () => { + return ( + + ( + + + Dashboard + + )} + /> + ( + + + Tools + + )} + /> + ( + + + Setting + + )} + /> + + ); + } + `, + }, + ], + }, + }, + render: (args) => ( + <> + + ( +
+ + Dashboard +
+ )} + /> + ( +
+ + Tools +
+ )} + /> + ( +
+ + Setting +
+ )} + /> + + + ), +}; diff --git a/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/default.stories.tsx b/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/default.stories.tsx new file mode 100644 index 00000000..f142e59f --- /dev/null +++ b/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/default.stories.tsx @@ -0,0 +1,74 @@ +import { Tab, Tabs } from '@cocokits/react-tabs'; +import { CCK_CONTROL, renderWithPageTab } from '@cocokits/storybook-addon-theme'; +import { reactThemeArgsToTemplate, StoryObj } from '@cocokits/storybook-addon-theme-react'; + +export const Default: StoryObj = { + name: 'Default', + parameters: { + docs: { + description: { + story: + 'Shows the default example with no additional configurations, providing an interactive example in its most basic form.', + }, + }, + cckAddon: { + source: [ + { + filename: 'Source Code', + language: 'tsx', + code: ` + import { Tabs, Tab } from '@cocokits/react-components'; + + export const MyComponent = () => { + return ( + type='<%= type %>' <% } %> + <% if (typeof size !== 'undefined') { %> size='<%= size %>' <% } %> + <% if (typeof color !== 'undefined') { %> color='<%= color %>' <% } %> + headerAlign='<%= align %>' + <% if (instantAnimation) { %> instantAnimation={<%= instantAnimation %>} <% } %> + <% if (hideContent) { %> hideContent={<%= hideContent %>} <% } %> + > + <% for (let i = 0; i < length; i++) { %> + disabled <% } %>> +

Header <%= i + 1 %>

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ + <% } %> + + ) + } + `, + }, + ], + renderConditions: [renderWithPageTab('Overview')], + hasControl: true, + controls: [ + CCK_CONTROL.type(), + CCK_CONTROL.size(), + CCK_CONTROL.color(), + CCK_CONTROL.additional(), + CCK_CONTROL.customNumber('Length', 4), + CCK_CONTROL.customSelect('Align', ['left', 'center', 'right', 'stretch']), + CCK_CONTROL.customBoolean('Instant Animation'), + CCK_CONTROL.customBoolean('Hide Content'), + ], + }, + }, + args: {}, + render: (args) => ( + + {new Array(args.cckControl.length).fill(1).map((_, index) => ( + +

Header {index + 1}

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ + ))} + + ), +}; diff --git a/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/disabled.stories.tsx b/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/disabled.stories.tsx new file mode 100644 index 00000000..a2162c00 --- /dev/null +++ b/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/disabled.stories.tsx @@ -0,0 +1,51 @@ +import { Tab, Tabs } from '@cocokits/react-tabs'; +import { CCK_CONTROL, renderWithPageTab } from '@cocokits/storybook-addon-theme'; +import { StoryObj } from '@cocokits/storybook-addon-theme-react'; + +export const Disabled: StoryObj = { + name: 'Disabled', + parameters: { + docs: { + description: { + story: + 'Disabled tabs prevent user interaction, ensuring that users cannot select or activate them, which is useful for indicating unavailable options.', + }, + }, + cckAddon: { + renderConditions: [renderWithPageTab('Overview')], + singleControls: ['type'], + controls: [CCK_CONTROL.type()], + source: [ + { + filename: 'Source Code', + language: 'tsx', + code: ` + import { Tabs, Tab } from "@cocokits/react-components"; + + export const MyComponent = () => { + return ( + type='<%= type %>' <% } %> + hideContent={true} + > + + + + + ); + } + `, + }, + ], + }, + }, + render: (args) => ( + <> + + + + + + + ), +}; diff --git a/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/size.stories.tsx b/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/size.stories.tsx new file mode 100644 index 00000000..c6ab6b5b --- /dev/null +++ b/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/size.stories.tsx @@ -0,0 +1,60 @@ +import { Tab, Tabs } from '@cocokits/react-tabs'; +import { CCK_CONTROL, renderWithPageTab, renderWithThemeProp } from '@cocokits/storybook-addon-theme'; +import { StoryObj } from '@cocokits/storybook-addon-theme-react'; + +export const Size: StoryObj = { + name: 'Size', + parameters: { + docs: { + description: { + story: + 'The size is adjustable to suit different design needs and screen dimensions, improving both aesthetics and usability.', + }, + }, + cckAddon: { + renderConditions: [renderWithThemeProp('size'), renderWithPageTab('Overview')], + singleControls: ['type'], + source: [ + { + filename: 'Source Code', + language: 'tsx', + code: ` + import { Tabs, Tab } from "@cocokits/react-components"; + + export const MyComponent = () => { + return ( + <> + <% themeComponentConfig.size.values.map(size => { %> + + {/* ------------ <%= size %> ------------ */} + size='<%= size %>' <% } %> + type="<%= type %>" + hideContent={true} + > + + + + + <% }) %> + + ); + } + `, + }, + ], + controls: [CCK_CONTROL.type()], + }, + }, + render: (args) => ( + <> + {args.cckControl.themeComponentConfig.size?.values.map((size, index) => ( + + + + + + ))} + + ), +}; diff --git a/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/type.stories.tsx b/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/type.stories.tsx new file mode 100644 index 00000000..eec500c4 --- /dev/null +++ b/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/type.stories.tsx @@ -0,0 +1,57 @@ +import { Tab, Tabs } from '@cocokits/react-tabs'; +import { renderWithPageTab, renderWithThemeProp } from '@cocokits/storybook-addon-theme'; +import { StoryObj } from '@cocokits/storybook-addon-theme-react'; + +export const Type: StoryObj = { + name: 'Type', + parameters: { + docs: { + description: { + story: + 'Displays variations in appearance and functionality, demonstrating how different types can be used to create unique Tabs styles.', + }, + }, + cckAddon: { + renderConditions: [renderWithThemeProp('type'), renderWithPageTab('Overview')], + source: [ + { + filename: 'Source Code', + language: 'tsx', + code: ` + import { Tabs, Tab } from "@cocokits/react-components"; + + export const MyComponent = () => { + return ( + <> + <% themeComponentConfig.type.values.map(type => { %> + + {/* ------------ <%= type %> ------------ */} + type='<%= type %>' <% } %> + hideContent={true} + > + + + + + <% }) %> + + ); + } + `, + }, + ], + }, + }, + render: (args) => ( + <> + {args.cckControl.themeComponentConfig.type?.values.map((type, index) => ( + + + + + + ))} + + ), +}; diff --git a/apps/react-kits-doc/stories/utils/feature-store.mdx b/apps/react-kits-doc/stories/utils/feature-store.mdx new file mode 100644 index 00000000..b8cffc34 --- /dev/null +++ b/apps/react-kits-doc/stories/utils/feature-store.mdx @@ -0,0 +1,127 @@ + +[//]: # (Do not edit directly) +[//]: # (Generated by the Cocokits TypeDoc custom theme) + +import { Meta } from '@storybook/addon-docs'; +import { MdxPage } from '@cocokits/storybook-addon-theme'; + +export const tocItems = [{"id":"selection_createfeaturestore","name":"createFeatureStore()"}]; + + + +
+
+## createFeatureStore() + +```ts +function createFeatureStore(featureStoreRef: T): { + useCreateFeatureStore: (...config: ConstructorParameters) => { + store: InstanceType; + StoreProvider: Provider>; + }; + useFeatureStore: () => null | InstanceType; + } +``` + +### Type Parameters + +
+ + + + + + + + + + + +
Type Parameter
+ +`T` *extends* `ClassRef` + +
+
+ +### Parameters + +
+ + + + + + + + + + + + + +
ParameterType
+ +`featureStoreRef` + + + +`T` + +
+
+ +### Returns + +```ts +{ + useCreateFeatureStore: (...config: ConstructorParameters) => { + store: InstanceType; + StoreProvider: Provider>; + }; + useFeatureStore: () => null | InstanceType; + } +``` + +
+ + + + + + + + + + + + + + + + + +
NameType
+ +`useCreateFeatureStore` + + + +`(...config: ConstructorParameters) => { + store: InstanceType; + StoreProvider: Provider>; + }` + +
+ +`useFeatureStore` + + + +`() => null | InstanceType` + +
+
+ +
+ diff --git a/apps/website/src/components/home/ui-components/ui-components.tsx b/apps/website/src/components/home/ui-components/ui-components.tsx index cb6fefcb..74cf202d 100644 --- a/apps/website/src/components/home/ui-components/ui-components.tsx +++ b/apps/website/src/components/home/ui-components/ui-components.tsx @@ -11,18 +11,18 @@ import { Checkbox, Chip, ChipList, + Divider, IconButton, Label, - SvgIcon, Menu, MenuItem, - Divider, - RadioGroup, RadioButton, + RadioGroup, + SvgIcon, Toggle, } from '@cocokits/react-components'; import { FormField, Input, Option, Select, Textarea } from '@cocokits/react-form-field'; -import { Tab, TabLabel, Tabs } from '@cocokits/react-tabs'; +import { Tab, Tabs } from '@cocokits/react-tabs'; import { Brand } from '../../brands/brand'; import { CckComponent } from '../../cck-component/cck-component'; @@ -45,10 +45,10 @@ export function UiComponents() { setSelectedTheme(theme.value as typeof selectedTheme)}> - - + +
@@ -143,8 +143,6 @@ export function UiComponents() { // eslint-disable-next-line react/display-name const TabBrandLabel = (themeName: 'cocokits' | 'frames-x') => (selected: boolean) => { return ( - - - + ); }; diff --git a/packages/angular/accordion/README.md b/packages/angular/accordion/README.md index e29f0ce8..cc354a2c 100644 --- a/packages/angular/accordion/README.md +++ b/packages/angular/accordion/README.md @@ -12,7 +12,7 @@ The `@cocokits/angular-accordion` package provides a powerful and flexible accor ## Key Components Overview: ### AccordionComponent -The core wrapper component that manages the accordion structure. It handles state control, panel registration, keyboard accessibility, and global behaviors such as animation and expand/collapse all. +The core wrapper component that manages the accordion structure. It handles state control, panel registration, and global behaviors such as animation and expand/collapse all. **Features:** - **Custom Icon Template:** diff --git a/packages/angular/components/package.json b/packages/angular/components/package.json index 362fc2f9..54b48b93 100644 --- a/packages/angular/components/package.json +++ b/packages/angular/components/package.json @@ -17,7 +17,8 @@ "@cocokits/common-utils": "workspace:*", "@cocokits/core": "workspace:*", "tslib": "^2.3.0", - "@cocokits/angular-accordion": "workspace:*" + "@cocokits/angular-accordion": "workspace:*", + "@cocokits/angular-tabs": "workspace:*" }, "devDependencies": {}, "peerDependencies": {}, diff --git a/packages/angular/form-field/src/lib/form-field.store.ts b/packages/angular/form-field/src/lib/form-field.store.ts index 46e80c4e..e9b715e3 100644 --- a/packages/angular/form-field/src/lib/form-field.store.ts +++ b/packages/angular/form-field/src/lib/form-field.store.ts @@ -5,8 +5,7 @@ import { AbstractControl, FormControlStatus, ValidationErrors, Validators } from import { map, Observable, startWith, Subject, switchMap } from 'rxjs'; import { toDeepSignal } from '@cocokits/angular-utils'; -import { recordReduceMerge } from '@cocokits/common-utils'; -import { DeepNullable } from '@cocokits/core'; +import { DeepNullable, recordReduceMerge } from '@cocokits/common-utils'; import { ChipListComponent } from './chip-list/chip-list.component'; import { ErrorComponent } from './error/error.component'; diff --git a/packages/angular/tabs/.eslintrc.json b/packages/angular/tabs/.eslintrc.json new file mode 100644 index 00000000..f6fdaca9 --- /dev/null +++ b/packages/angular/tabs/.eslintrc.json @@ -0,0 +1,19 @@ +{ + "extends": ["../../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts"], + "extends": [ + "plugin:@nx/angular", + "plugin:@angular-eslint/template/process-inline-templates", + "../../../tools/eslint/eslint.angular.json" + ] + }, + { + "files": ["*.html"], + "extends": ["plugin:@nx/angular-template"], + "rules": {} + } + ] +} diff --git a/packages/angular/tabs/LICENSE b/packages/angular/tabs/LICENSE new file mode 100644 index 00000000..637feac8 --- /dev/null +++ b/packages/angular/tabs/LICENSE @@ -0,0 +1,9 @@ +Copyright 2025 Milad Faghihi, Cocokits + +Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and limitations under the License. diff --git a/packages/angular/tabs/README.md b/packages/angular/tabs/README.md new file mode 100644 index 00000000..7d7052d1 --- /dev/null +++ b/packages/angular/tabs/README.md @@ -0,0 +1,66 @@ +# @cocokits/angular-tabs + +The `@cocokits/angular-tabs` package provides a flexible tabs component for Angular applications. Designed for performance, it supports custom templates, programmatic control, and adaptive behaviors for complex UI scenarios. + +## Included Components: + +- `TabsComponent` +- `TabComponent` + +## Key Components Overview: + +### TabsComponent +The container component that manages tab state and synchronization. Handles coordination between tabs and their content panels. + +**Features:** + +- **Custom Header Templates:** +Fully customize tab headers using Angular templates + +- **Animation Control:** +Toggle transition animations + +- **Disabled Tabs:** +Disable individual tabs using [disabled] property + +- **Imperative Control:** +Programmatically activate tabs + +- **Tab Align:** +Configure tab headers alignment (left/right/center/stretch) + +- **Content Persistence:** +Option to preserve DOM state when switching tabs + +### TabComponent +Defines individual tab sections with associated header and content. + +**Features:** + +- **Header Customization:** +Use simple text labels or custom templates via `` + +- **State Control:** +Support for disabled states + +--- + +## Styling and Theming +As with other CocoKits components, these accordion related components do not come with built-in styles but apply CSS classes based on configuration. This allows you to style them or use CocoKits' theming options for a consistent look across your application. + +## Documentation and Examples +For more information on configuring and using these components, visit the documentation: + +- [TabsComponent](https://angular.cocokits.com/?path=/docs/ui-components-tabs--docs) + + +--- + +### Contributing +We welcome contributions! If you'd like to contribute to this project, please read our [Contributing Guidelines](https://github.com/coco-base/cocokits/blob/main/CONTRIBUTING.md) + +--- + +### License +This project is licensed under the Apache License. See the [LICENSE](https://github.com/coco-base/cocokits/blob/main/LICENSE) file for details. + diff --git a/packages/angular/tabs/ng-package.json b/packages/angular/tabs/ng-package.json new file mode 100644 index 00000000..a9e5330e --- /dev/null +++ b/packages/angular/tabs/ng-package.json @@ -0,0 +1,8 @@ +{ + "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../../dist/packages/angular/tabs", + "lib": { + "entryFile": "src/index.ts" + }, + "allowedNonPeerDependencies": ["@cocokits/"] +} diff --git a/packages/angular/tabs/package.json b/packages/angular/tabs/package.json new file mode 100644 index 00000000..d016ef4d --- /dev/null +++ b/packages/angular/tabs/package.json @@ -0,0 +1,21 @@ +{ + "name": "@cocokits/angular-tabs", + "version": "0.0.0", + "private": false, + "sideEffects": false, + "dependencies": { + "tslib": "^2.3.0", + "@cocokits/angular-core": "workspace:*", + "@cocokits/core": "workspace:*", + "@cocokits/common-utils": "workspace:*" + }, + "devDependencies": {}, + "peerDependencies": { + "@angular/common": "^18.2.0", + "@angular/core": "^18.2.0" + }, + "publishConfig": { + "directory": "../../../dist/packages/angular/tabs", + "access": "public" + } +} diff --git a/packages/angular/tabs/project.json b/packages/angular/tabs/project.json new file mode 100644 index 00000000..94e87e34 --- /dev/null +++ b/packages/angular/tabs/project.json @@ -0,0 +1,29 @@ +{ + "name": "@cocokits/angular-tabs", + "$schema": "../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "packages/angular/tabs/src", + "prefix": "lib", + "projectType": "library", + "tags": ["type:ui", "framework:angular"], + "targets": { + "build": { + "executor": "@nx/angular:package", + "outputs": ["{workspaceRoot}/dist/{projectRoot}"], + "options": { + "project": "packages/angular/tabs/ng-package.json" + }, + "configurations": { + "production": { + "tsConfig": "packages/angular/tabs/tsconfig.lib.prod.json" + }, + "development": { + "tsConfig": "packages/angular/tabs/tsconfig.lib.json" + } + }, + "defaultConfiguration": "production" + }, + "quick-fix-eslint": { + "executor": "@nx/eslint:lint" + } + } +} diff --git a/packages/angular/tabs/src/index.ts b/packages/angular/tabs/src/index.ts new file mode 100644 index 00000000..d28fd0f6 --- /dev/null +++ b/packages/angular/tabs/src/index.ts @@ -0,0 +1,4 @@ +export * from './lib/tabs/tabs.component'; +export * from './lib/tab/tab.component'; +export * from './lib/tab/tab-header.tmpl-directive'; +export * from './lib/tabs.model'; diff --git a/packages/angular/tabs/src/lib/tab/tab-header.tmpl-directive.ts b/packages/angular/tabs/src/lib/tab/tab-header.tmpl-directive.ts new file mode 100644 index 00000000..28629af3 --- /dev/null +++ b/packages/angular/tabs/src/lib/tab/tab-header.tmpl-directive.ts @@ -0,0 +1,15 @@ +import { Directive } from '@angular/core'; + +export interface AccordionHeaderIconContext { + selected: boolean; +} + +@Directive({ + standalone: true, + selector: 'ng-template[cckTabHeader]', +}) +export class TabHeaderTemplateDirective { + static ngTemplateContextGuard(_dir: TabHeaderTemplateDirective, ctx: unknown): ctx is AccordionHeaderIconContext { + return true; + } +} diff --git a/packages/angular/tabs/src/lib/tab/tab.component.html b/packages/angular/tabs/src/lib/tab/tab.component.html new file mode 100644 index 00000000..915cfce1 --- /dev/null +++ b/packages/angular/tabs/src/lib/tab/tab.component.html @@ -0,0 +1,22 @@ + + + + + + + + + {{ header() }} + + + + + + + diff --git a/packages/angular/tabs/src/lib/tab/tab.component.scss b/packages/angular/tabs/src/lib/tab/tab.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/packages/angular/tabs/src/lib/tab/tab.component.ts b/packages/angular/tabs/src/lib/tab/tab.component.ts new file mode 100644 index 00000000..c42a8b81 --- /dev/null +++ b/packages/angular/tabs/src/lib/tab/tab.component.ts @@ -0,0 +1,87 @@ +import { NgTemplateOutlet } from '@angular/common'; +import { + booleanAttribute, + ChangeDetectionStrategy, + Component, + computed, + contentChild, + ElementRef, + inject, + input, + TemplateRef, + viewChild, + ViewEncapsulation, +} from '@angular/core'; + +import { _UiBaseComponent } from '@cocokits/angular-core'; + +import { TabHeaderTemplateDirective } from './tab-header.tmpl-directive'; +import { TabsFeatureStore } from '../tabs.feature-store'; + +let NEXT_ID = 1; + +@Component({ + standalone: true, + imports: [NgTemplateOutlet], + selector: 'cck-tab', + templateUrl: './tab.component.html', + styleUrls: ['./tab.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.None, + host: { + '[class]': 'classNames().content', + }, +}) +export class TabComponent extends _UiBaseComponent<'tab'> { + private featStore = inject(TabsFeatureStore); + + protected readonly componentName = 'tab'; + protected extraHostElementClassConditions = computed(() => [ + { if: this.disabled(), classes: this.classNames().disabled }, + { if: this._isSelected(), classes: this.classNames().selected }, + { if: !this._isSelected(), classes: this.classNames().unselected }, + ]); + + public _id = `TAB_ID_${NEXT_ID++}`; + + /** + * The label of the tab. + */ + public header = input(); + + /** + * The value of the tab, which is used to identify the tab when selected. + * If not provided, a unique ID will be used. + */ + public value = input(undefined as TValue); + + public _value = computed(() => this.value() ?? this._id); + + /** + * Whether the tab is disabled. If true, the tab will not be selectable by user. + * @default false + */ + public disabled = input(false, { transform: booleanAttribute }); + + protected defaultHeaderTemplateContent = viewChild.required('defaultHeaderTemp', { read: TemplateRef }); + protected customHeaderTemplateContent = contentChild(TabHeaderTemplateDirective, { read: TemplateRef }); + protected headerTemplateContent = computed( + () => this.customHeaderTemplateContent() ?? this.defaultHeaderTemplateContent() + ); + public _headerTemplate = viewChild.required('headerTemp', { read: TemplateRef }); + + public _contentTemplate = viewChild.required('contentTemp', { read: TemplateRef }); + + public _isSelected = computed(() => this.featStore.selectedId() === this._id); + + public _indicatorElemRef = viewChild.required>('indicatorElemRef', { + read: ElementRef, + }); + + protected toggle() { + if (this.disabled()) { + return; + } + this.featStore.selectTabById(this._id); + } +} diff --git a/packages/angular/tabs/src/lib/tabs.feature-store.ts b/packages/angular/tabs/src/lib/tabs.feature-store.ts new file mode 100644 index 00000000..41f3439e --- /dev/null +++ b/packages/angular/tabs/src/lib/tabs.feature-store.ts @@ -0,0 +1,14 @@ +import { signal } from '@angular/core'; + +export class TabsFeatureStore { + private _prevuesSelectedId = signal(''); + private _selectedId = signal(''); + + public selectedId = this._selectedId.asReadonly(); + public prevuesSelectedId = this._prevuesSelectedId.asReadonly(); + + public selectTabById(id: string) { + this._prevuesSelectedId.set(this._selectedId()); + this._selectedId.set(id); + } +} diff --git a/packages/angular/tabs/src/lib/tabs.model.ts b/packages/angular/tabs/src/lib/tabs.model.ts new file mode 100644 index 00000000..053278fe --- /dev/null +++ b/packages/angular/tabs/src/lib/tabs.model.ts @@ -0,0 +1,6 @@ +export interface TabSelectionChangeEvent { + previousIndex: number; + previousValue: TValue; + index: number; + value: TValue; +} diff --git a/packages/angular/tabs/src/lib/tabs/tabs.component.html b/packages/angular/tabs/src/lib/tabs/tabs.component.html new file mode 100644 index 00000000..c38d766d --- /dev/null +++ b/packages/angular/tabs/src/lib/tabs/tabs.component.html @@ -0,0 +1,13 @@ +
+ @for (headerTemp of tabComponents(); track $index) { + + } +
+ +@let _selectedTabComponent = selectedTabComponent(); + +@if(!hideContent() && _selectedTabComponent) { +
+ +
+} \ No newline at end of file diff --git a/packages/angular/tabs/src/lib/tabs/tabs.component.scss b/packages/angular/tabs/src/lib/tabs/tabs.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/packages/angular/tabs/src/lib/tabs/tabs.component.ts b/packages/angular/tabs/src/lib/tabs/tabs.component.ts new file mode 100644 index 00000000..c564761e --- /dev/null +++ b/packages/angular/tabs/src/lib/tabs/tabs.component.ts @@ -0,0 +1,180 @@ +import { NgTemplateOutlet } from '@angular/common'; +import { + AfterContentInit, + ChangeDetectionStrategy, + Component, + computed, + contentChildren, + effect, + inject, + Input, + input, + output, + untracked, + ViewEncapsulation, +} from '@angular/core'; + +import { _UiBaseComponent } from '@cocokits/angular-core'; +import { Animation, hasValue } from '@cocokits/common-utils'; + +import { TabComponent } from '../tab/tab.component'; +import { TabsFeatureStore } from '../tabs.feature-store'; +import { TabSelectionChangeEvent } from '../tabs.model'; + +@Component({ + standalone: true, + imports: [NgTemplateOutlet], + selector: 'cck-tabs', + templateUrl: './tabs.component.html', + styleUrls: ['./tabs.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.None, + host: { + '[class]': 'hostClassNames()', + }, + providers: [TabsFeatureStore], +}) +export class TabsComponent extends _UiBaseComponent<'tabs'> implements AfterContentInit { + private featStore = inject(TabsFeatureStore); + + protected readonly componentName = 'tabs'; + protected extraHostElementClassConditions = computed(() => [ + { if: this.headerAlign() === 'left', classes: this.classNames().alignLeft }, + { if: this.headerAlign() === 'right', classes: this.classNames().alignRight }, + { if: this.headerAlign() === 'center', classes: this.classNames().alignCenter }, + { if: this.headerAlign() === 'stretch', classes: this.classNames().alignStretch }, + ]); + + private _selectedIndex: number | undefined; + /** + * The index of the currently selected tab. + * If `selected` is provided, the value of `selectedIndex` will be ignored. + * @default 0 + */ + @Input() public set selectedIndex(index: number) { + this._selectedIndex = index; + this._updateSelected(); + } + + private _selectedValue: TValue | undefined; + /** + * The value of the currently selected tab. + * If not provided, the `selectedIndex` will be used, and if `selectedIndex` is not provided, the first tab will be selected by default. + */ + @Input() public set selected(value: TValue) { + this._selectedValue = value; + this._updateSelected(); + } + + /** + * Whether to hide the content of the tabs when they are not selected. + * @default false + */ + public hideContent = input(false); + + /** + * Whether to disable the animation when switching between tabs. + * @default false + */ + public instantAnimation = input(false); + + /** + * The alignment of the tab headers. + * @default 'left' + */ + public headerAlign = input<'left' | 'center' | 'right' | 'stretch'>('left'); + + /** + * Emitter for the selected tab change event. + * IIt will return only the value of the selected tab and you can combine it with `selected` to activate 2way data binding. + */ + public selectedChange = output(); + + /** + * Emitter for the selected index change event. + * It will return only the index of the selected tab and you can combine it with `selectedIndex` to activate 2way data binding. + */ + public selectedIndexChange = output(); + + /** + * Emitter for the selection change event. + * event is an object with the new and previous selected index and value. + */ + public change = output>(); + + protected tabComponents = contentChildren(TabComponent); + + protected selectedTabComponent = computed(() => { + return this.tabComponents().find((tab) => this.featStore.selectedId() === tab._id); + }); + + private __dispatchChanges = effect(() => { + const selectedId = this.featStore.selectedId(); + untracked(async () => { + const prevuesSelectedId = this.featStore.prevuesSelectedId(); + const prevuesTabComponent = this.tabComponents().find((tab) => tab._id === prevuesSelectedId); + const prevuesSelectedIndex = this.tabComponents().findIndex((tab) => tab._id === prevuesSelectedId); + const prevuesSelectedValue = prevuesTabComponent?._value(); + + const selectedTabComponent = this.selectedTabComponent(); + const selectedIndex = this.tabComponents().findIndex((tab) => tab._id === selectedId); + const selectedValue = selectedTabComponent?._value(); + + if (!selectedTabComponent) { + return; + } + + this.selectedChange.emit(selectedValue); + this.selectedIndexChange.emit(selectedIndex); + this.change.emit({ + previousIndex: prevuesSelectedIndex, + previousValue: prevuesSelectedValue, + index: selectedIndex, + value: selectedValue, + }); + + if (!this.instantAnimation() && prevuesTabComponent) { + const animationRef = Animation.getOrCreateInstance(selectedTabComponent._indicatorElemRef().nativeElement); + + selectedTabComponent._indicatorElemRef().nativeElement.style.removeProperty('display'); + const prevuesTabReact = prevuesTabComponent._indicatorElemRef().nativeElement.getBoundingClientRect(); + const newTabReact = selectedTabComponent._indicatorElemRef().nativeElement.getBoundingClientRect(); + + animationRef + .setDimension({ width: prevuesTabReact.width, height: prevuesTabReact.height }) + .setTranslate({ x: prevuesTabReact.left - newTabReact.left, y: prevuesTabReact.top - newTabReact.top }) + .applyImmediately(); + + await animationRef + .setDimension({ width: newTabReact.width, height: newTabReact.height }) + .setTranslate({ x: 0, y: 0 }) + .animate({ duration: 300 }); + + selectedTabComponent._indicatorElemRef().nativeElement.style.removeProperty('width'); + selectedTabComponent._indicatorElemRef().nativeElement.style.removeProperty('height'); + selectedTabComponent._indicatorElemRef().nativeElement.style.removeProperty('transform'); + } + }); + }); + + ngAfterContentInit() { + this._updateSelected(); + } + + public _updateSelected() { + if (this.tabComponents().length === 0) { + return; + } + + if (hasValue(this._selectedValue)) { + const selectedTab = + this.tabComponents().find((tab) => tab.value() === this._selectedValue) ?? this.tabComponents()[0]; + this.featStore.selectTabById(selectedTab._id); + return; + } + + const selectedTabByIndex = + this.tabComponents().find((_, index) => index === this._selectedIndex) ?? this.tabComponents()[0]; + this.featStore.selectTabById(selectedTabByIndex._id); + } +} diff --git a/packages/angular/tabs/tsconfig.json b/packages/angular/tabs/tsconfig.json new file mode 100644 index 00000000..8e62d6db --- /dev/null +++ b/packages/angular/tabs/tsconfig.json @@ -0,0 +1,26 @@ +{ + "compilerOptions": { + "target": "es2022", + "useDefineForClassFields": false, + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + } + ], + "extends": "../../../tsconfig.base.json", + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } +} diff --git a/packages/angular/tabs/tsconfig.lib.json b/packages/angular/tabs/tsconfig.lib.json new file mode 100644 index 00000000..f68063a5 --- /dev/null +++ b/packages/angular/tabs/tsconfig.lib.json @@ -0,0 +1,12 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../dist/out-tsc", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [] + }, + "exclude": ["src/**/*.spec.ts", "jest.config.ts", "src/**/*.test.ts"], + "include": ["src/**/*.ts"] +} diff --git a/packages/angular/tabs/tsconfig.lib.prod.json b/packages/angular/tabs/tsconfig.lib.prod.json new file mode 100644 index 00000000..2a2faa88 --- /dev/null +++ b/packages/angular/tabs/tsconfig.lib.prod.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.lib.json", + "compilerOptions": { + "declarationMap": false + }, + "angularCompilerOptions": { + "compilationMode": "partial" + } +} diff --git a/packages/common/core/src/index.ts b/packages/common/core/src/index.ts index e64610cd..e65bc29e 100644 --- a/packages/common/core/src/index.ts +++ b/packages/common/core/src/index.ts @@ -28,7 +28,6 @@ export * from './lib/class-names/textarea-class-names'; export * from './lib/class-names/toggle-class-names'; export * from './lib/class-names/trailing-class-names'; -export * from './lib/model/common.model'; export * from './lib/model/design-token.model'; export * from './lib/model/theme-svg-icon.model'; export * from './lib/model/theme-config.model'; diff --git a/packages/common/core/src/lib/class-names/class-names.ts b/packages/common/core/src/lib/class-names/class-names.ts index 63e7fb42..03969683 100644 --- a/packages/common/core/src/lib/class-names/class-names.ts +++ b/packages/common/core/src/lib/class-names/class-names.ts @@ -32,8 +32,10 @@ import { getSelectClassNames } from './select-class-names'; import { getSelectPreviewClassNames } from './select-preview-class-names'; import { getSuffixClassNames } from './suffix-class-names'; import { getTabClassNames } from './tab-class-names'; -import { getTabLabelClassNames } from './tab-label-class-names'; +import { getTabClassNamesOld } from './tab-class-names-old'; +import { getTabLabelClassNamesOld } from './tab-label-class-names-old'; import { getTabsClassNames } from './tabs-class-names'; +import { getTabsClassNamesOld } from './tabs-class-names-old'; import { getTextareaClassNames } from './textarea-class-names'; import { getToggleClassNames } from './toggle-class-names'; import { getTrailingClassNames } from './trailing-class-names'; @@ -68,9 +70,9 @@ export const CLASS_NAMES_FN_MAP = { button: getButtonClassNames, iconButton: getIconButtonClassNames, svgIcon: getSvgIconClassNames, - tabs: getTabsClassNames, - tab: getTabClassNames, - tabLabel: getTabLabelClassNames, + tabsOld: getTabsClassNamesOld, + tabOld: getTabClassNamesOld, + tabLabelOld: getTabLabelClassNamesOld, overlay: getOverlayClassNames, avatar: getAvatarClassNames, avatarGroup: getAvatarGroupClassNames, @@ -78,6 +80,8 @@ export const CLASS_NAMES_FN_MAP = { accordion: getAccordionClassNames, accordionHeader: getAccordionHeaderClassNames, accordionPanel: getAccordionPanelClassNames, + tabs: getTabsClassNames, + tab: getTabClassNames, }; export function getClassNames( diff --git a/packages/common/core/src/lib/class-names/layout-class-names-config.ts b/packages/common/core/src/lib/class-names/layout-class-names-config.ts index 47dbe29b..551bc249 100644 --- a/packages/common/core/src/lib/class-names/layout-class-names-config.ts +++ b/packages/common/core/src/lib/class-names/layout-class-names-config.ts @@ -29,8 +29,10 @@ import { selectLayoutClassNamesConfig } from './select-class-names'; import { selectPreviewLayoutClassNamesConfig } from './select-preview-class-names'; import { suffixLayoutClassNamesConfig } from './suffix-class-names'; import { tabLayoutClassNamesConfig } from './tab-class-names'; -import { tabLabelLayoutClassNamesConfig } from './tab-label-class-names'; +import { tabLayoutClassNamesConfigOld } from './tab-class-names-old'; +import { tabLabelLayoutClassNamesConfigOld } from './tab-label-class-names-old'; import { tabsLayoutClassNamesConfig } from './tabs-class-names'; +import { tabsLayoutClassNamesConfigOld } from './tabs-class-names-old'; import { textareaClassNamesConfig } from './textarea-class-names'; import { toggleLayoutClassNamesConfig } from './toggle-class-names'; import { trailingLayoutClassNamesConfig } from './trailing-class-names'; @@ -69,9 +71,9 @@ export const layoutClassNamesConfigRecord = { menuItem: menuItemLayoutClassNamesConfig, divider: dividerLayoutClassNamesConfig, toggle: toggleLayoutClassNamesConfig, - tabs: tabsLayoutClassNamesConfig, - tab: tabLayoutClassNamesConfig, - tabLabel: tabLabelLayoutClassNamesConfig, + tabsOld: tabsLayoutClassNamesConfigOld, + tabOld: tabLayoutClassNamesConfigOld, + tabLabelOld: tabLabelLayoutClassNamesConfigOld, overlay: overlayLayoutClassNamesConfig, avatar: avatarLayoutClassNamesConfig, avatarGroup: avatarGroupLayoutClassNamesConfig, @@ -79,4 +81,6 @@ export const layoutClassNamesConfigRecord = { accordion: accordionLayoutClassNamesConfig, accordionHeader: accordionHeaderLayoutClassNamesConfig, accordionPanel: accordionPanelLayoutClassNamesConfig, + tabs: tabsLayoutClassNamesConfig, + tab: tabLayoutClassNamesConfig, }; diff --git a/packages/common/core/src/lib/class-names/tab-class-names-old.ts b/packages/common/core/src/lib/class-names/tab-class-names-old.ts new file mode 100644 index 00000000..4dd85b26 --- /dev/null +++ b/packages/common/core/src/lib/class-names/tab-class-names-old.ts @@ -0,0 +1,52 @@ +import { generateLayoutClassNameFromElement } from './class-names'; +import { LayoutClassNamesConfig, ThemeConfig, UIBaseComponentProps } from '../model/theme-config.model'; +import { validateUiBaseComponentProps } from '../ui-component-props/ui-component-props'; + +export const tabLayoutClassNamesConfigOld = { + componentName: 'tabOld', + baseSelectorStructure: { + block: 'tab', + }, + elements: { + host: { + name: 'Host Element', + selectorStructure: [], + description: 'Applied to the host element of the Tab component.', + }, + indicator: { + name: 'Indicator Element', + selectorStructure: [{ element: 'indicator' }], + description: 'Applied to the indicator element inside the Tab component, visible only for the selected tab.', + }, + content: { + name: 'Content Element', + selectorStructure: [{ element: 'content' }], + description: 'Applied to the element that contains the content of the Tab component.', + }, + selected: { + name: 'Selected Tab', + selectorStructure: [{ modifier: 'selected' }], + description: 'Applied to the host element of the Tab button component, when the the tab is selected.', + }, + unselected: { + name: 'Unselected Tab', + selectorStructure: [{ modifier: 'unselected' }], + description: 'Applied to the host element of the Tab button component, when the the tab is NOT selected.', + }, + }, +} satisfies LayoutClassNamesConfig; + +export function getTabClassNamesOld( + componentProps: UIBaseComponentProps, + themeConfig: ThemeConfig +): Record { + validateUiBaseComponentProps(tabLayoutClassNamesConfigOld.componentName, componentProps, themeConfig); + + return { + host: generateLayoutClassNameFromElement(tabLayoutClassNamesConfigOld, 'host', themeConfig, componentProps), + indicator: generateLayoutClassNameFromElement(tabLayoutClassNamesConfigOld, 'indicator', themeConfig), + content: generateLayoutClassNameFromElement(tabLayoutClassNamesConfigOld, 'content', themeConfig), + selected: generateLayoutClassNameFromElement(tabLayoutClassNamesConfigOld, 'selected', themeConfig), + unselected: generateLayoutClassNameFromElement(tabLayoutClassNamesConfigOld, 'unselected', themeConfig), + }; +} diff --git a/packages/common/core/src/lib/class-names/tab-class-names.ts b/packages/common/core/src/lib/class-names/tab-class-names.ts index 281d74b0..34907911 100644 --- a/packages/common/core/src/lib/class-names/tab-class-names.ts +++ b/packages/common/core/src/lib/class-names/tab-class-names.ts @@ -4,14 +4,17 @@ import { validateUiBaseComponentProps } from '../ui-component-props/ui-component export const tabLayoutClassNamesConfig = { componentName: 'tab', - baseSelectorStructure: { - block: 'tab', - }, + baseSelectorStructure: { block: 'tab' }, elements: { host: { name: 'Host Element', selectorStructure: [], - description: 'Applied to the host element of the Tab component.', + description: 'It will add to the host element of `Tab` component.', + }, + headerWrapper: { + name: 'Header Wrapper Element', + selectorStructure: [{ element: 'label' }], + description: 'Applied to the header wrapper element Tab component.', }, indicator: { name: 'Indicator Element', @@ -24,15 +27,20 @@ export const tabLayoutClassNamesConfig = { description: 'Applied to the element that contains the content of the Tab component.', }, selected: { - name: 'Selected Tab', + name: 'Host Element', selectorStructure: [{ modifier: 'selected' }], description: 'Applied to the host element of the Tab button component, when the the tab is selected.', }, unselected: { - name: 'Unselected Tab', + name: 'Host Element', selectorStructure: [{ modifier: 'unselected' }], description: 'Applied to the host element of the Tab button component, when the the tab is NOT selected.', }, + disabled: { + name: 'Host Element', + selectorStructure: [{ modifier: 'disabled' }], + description: 'Applied to the host element of the Tab button component, when the the tab is disabled.', + }, }, } satisfies LayoutClassNamesConfig; @@ -44,9 +52,11 @@ export function getTabClassNames( return { host: generateLayoutClassNameFromElement(tabLayoutClassNamesConfig, 'host', themeConfig, componentProps), + headerWrapper: generateLayoutClassNameFromElement(tabLayoutClassNamesConfig, 'headerWrapper', themeConfig), indicator: generateLayoutClassNameFromElement(tabLayoutClassNamesConfig, 'indicator', themeConfig), content: generateLayoutClassNameFromElement(tabLayoutClassNamesConfig, 'content', themeConfig), selected: generateLayoutClassNameFromElement(tabLayoutClassNamesConfig, 'selected', themeConfig), unselected: generateLayoutClassNameFromElement(tabLayoutClassNamesConfig, 'unselected', themeConfig), + disabled: generateLayoutClassNameFromElement(tabLayoutClassNamesConfig, 'disabled', themeConfig), }; } diff --git a/packages/common/core/src/lib/class-names/tab-label-class-names.ts b/packages/common/core/src/lib/class-names/tab-label-class-names-old.ts similarity index 64% rename from packages/common/core/src/lib/class-names/tab-label-class-names.ts rename to packages/common/core/src/lib/class-names/tab-label-class-names-old.ts index 5b42b5a9..8ff79876 100644 --- a/packages/common/core/src/lib/class-names/tab-label-class-names.ts +++ b/packages/common/core/src/lib/class-names/tab-label-class-names-old.ts @@ -2,8 +2,8 @@ import { generateLayoutClassNameFromElement } from './class-names'; import { LayoutClassNamesConfig, ThemeConfig, UIBaseComponentProps } from '../model/theme-config.model'; import { validateUiBaseComponentProps } from '../ui-component-props/ui-component-props'; -export const tabLabelLayoutClassNamesConfig = { - componentName: 'tabLabel', +export const tabLabelLayoutClassNamesConfigOld = { + componentName: 'tabLabelOld', baseSelectorStructure: { block: 'tab-label', }, @@ -16,13 +16,13 @@ export const tabLabelLayoutClassNamesConfig = { }, } satisfies LayoutClassNamesConfig; -export function getTabLabelClassNames( +export function getTabLabelClassNamesOld( componentProps: UIBaseComponentProps, themeConfig: ThemeConfig -): Record { - validateUiBaseComponentProps(tabLabelLayoutClassNamesConfig.componentName, componentProps, themeConfig); +): Record { + validateUiBaseComponentProps(tabLabelLayoutClassNamesConfigOld.componentName, componentProps, themeConfig); return { - host: generateLayoutClassNameFromElement(tabLabelLayoutClassNamesConfig, 'host', themeConfig, componentProps), + host: generateLayoutClassNameFromElement(tabLabelLayoutClassNamesConfigOld, 'host', themeConfig, componentProps), }; } diff --git a/packages/common/core/src/lib/class-names/tabs-class-names-old.ts b/packages/common/core/src/lib/class-names/tabs-class-names-old.ts new file mode 100644 index 00000000..6dd7b7aa --- /dev/null +++ b/packages/common/core/src/lib/class-names/tabs-class-names-old.ts @@ -0,0 +1,40 @@ +import { generateLayoutClassNameFromElement } from './class-names'; +import { LayoutClassNamesConfig, ThemeConfig, UIBaseComponentProps } from '../model/theme-config.model'; +import { validateUiBaseComponentProps } from '../ui-component-props/ui-component-props'; + +export const tabsLayoutClassNamesConfigOld = { + componentName: 'tabsOld', + baseSelectorStructure: { + block: 'tabs', + }, + elements: { + host: { + name: 'Host Element', + selectorStructure: [], + description: 'This will be added to the host element of the Tabs component.', + }, + labelsWrapper: { + name: 'Labels Wrapper Element', + selectorStructure: [{ element: 'labels-wrapper' }], + description: 'This selector is applied to the wrapper element that contains all the tab labels.', + }, + contentWrapper: { + name: 'Content Wrapper Element', + selectorStructure: [{ element: 'content-wrapper' }], + description: 'This selector is applied to the wrapper element that contains the tab contents.', + }, + }, +} satisfies LayoutClassNamesConfig; + +export function getTabsClassNamesOld( + componentProps: UIBaseComponentProps, + themeConfig: ThemeConfig +): Record { + validateUiBaseComponentProps(tabsLayoutClassNamesConfigOld.componentName, componentProps, themeConfig); + + return { + host: generateLayoutClassNameFromElement(tabsLayoutClassNamesConfigOld, 'host', themeConfig, componentProps), + labelsWrapper: generateLayoutClassNameFromElement(tabsLayoutClassNamesConfigOld, 'labelsWrapper', themeConfig), + contentWrapper: generateLayoutClassNameFromElement(tabsLayoutClassNamesConfigOld, 'contentWrapper', themeConfig), + }; +} diff --git a/packages/common/core/src/lib/class-names/tabs-class-names.ts b/packages/common/core/src/lib/class-names/tabs-class-names.ts index 5b1f8271..fc719bdd 100644 --- a/packages/common/core/src/lib/class-names/tabs-class-names.ts +++ b/packages/common/core/src/lib/class-names/tabs-class-names.ts @@ -4,25 +4,43 @@ import { validateUiBaseComponentProps } from '../ui-component-props/ui-component export const tabsLayoutClassNamesConfig = { componentName: 'tabs', - baseSelectorStructure: { - block: 'tabs', - }, + baseSelectorStructure: { block: 'tabs' }, elements: { host: { name: 'Host Element', selectorStructure: [], - description: 'This will be added to the host element of the Tabs component.', + description: 'It will add to the host element of `Tabs` component.', }, - labelsWrapper: { - name: 'Labels Wrapper Element', - selectorStructure: [{ element: 'labels-wrapper' }], - description: 'This selector is applied to the wrapper element that contains all the tab labels.', + headersWrapper: { + name: 'Headers Wrapper Element', + selectorStructure: [{ element: 'headers-wrapper' }], + description: 'This selector is applied to the wrapper element that contains all the tab headers.', }, contentWrapper: { name: 'Content Wrapper Element', selectorStructure: [{ element: 'content-wrapper' }], description: 'This selector is applied to the wrapper element that contains the tab contents.', }, + alignLeft: { + name: 'Host Element', + selectorStructure: [{ modifier: 'align-left' }], + description: 'This selector is applied to the host element, when the header align is left.', + }, + alignCenter: { + name: 'Host Element', + selectorStructure: [{ modifier: 'align-center' }], + description: 'This selector is applied to the host element, when the header align is center.', + }, + alignRight: { + name: 'Host Element', + selectorStructure: [{ modifier: 'align-right' }], + description: 'This selector is applied to the host element, when the header align is right.', + }, + alignStretch: { + name: 'Host Element', + selectorStructure: [{ modifier: 'align-stretch' }], + description: 'This selector is applied to the host element, when the header align is stretch.', + }, }, } satisfies LayoutClassNamesConfig; @@ -34,7 +52,11 @@ export function getTabsClassNames( return { host: generateLayoutClassNameFromElement(tabsLayoutClassNamesConfig, 'host', themeConfig, componentProps), - labelsWrapper: generateLayoutClassNameFromElement(tabsLayoutClassNamesConfig, 'labelsWrapper', themeConfig), + headersWrapper: generateLayoutClassNameFromElement(tabsLayoutClassNamesConfig, 'headersWrapper', themeConfig), contentWrapper: generateLayoutClassNameFromElement(tabsLayoutClassNamesConfig, 'contentWrapper', themeConfig), + alignLeft: generateLayoutClassNameFromElement(tabsLayoutClassNamesConfig, 'alignLeft', themeConfig), + alignCenter: generateLayoutClassNameFromElement(tabsLayoutClassNamesConfig, 'alignCenter', themeConfig), + alignRight: generateLayoutClassNameFromElement(tabsLayoutClassNamesConfig, 'alignRight', themeConfig), + alignStretch: generateLayoutClassNameFromElement(tabsLayoutClassNamesConfig, 'alignStretch', themeConfig), }; } diff --git a/packages/common/core/src/lib/model/theme-config.model.ts b/packages/common/core/src/lib/model/theme-config.model.ts index e86e9378..aac53815 100644 --- a/packages/common/core/src/lib/model/theme-config.model.ts +++ b/packages/common/core/src/lib/model/theme-config.model.ts @@ -1,4 +1,5 @@ -import { RequireAtLeastOne } from './common.model'; +import { RequireAtLeastOne } from '@cocokits/common-utils'; + import { ThemeSvgIcon } from './theme-svg-icon.model'; import { UIBaseComponentsName } from './ui-base-components-name'; diff --git a/packages/common/core/src/lib/model/ui-base-components-name.ts b/packages/common/core/src/lib/model/ui-base-components-name.ts index 28734a68..9e18ad61 100644 --- a/packages/common/core/src/lib/model/ui-base-components-name.ts +++ b/packages/common/core/src/lib/model/ui-base-components-name.ts @@ -7,10 +7,11 @@ export type UIBaseComponentsName = | CheckboxComponentName | ButtonComponentName | IconComponentName - | TabsComponentName + | _Tabs_ComponentNameOld | OverlayComponentName | AvatarComponentName - | AccordionComponentName; + | AccordionComponentName + | TabsComponentName; type FormFieldComponentName = | 'formField' @@ -37,7 +38,8 @@ type RadioComponentName = 'radioButton' | 'radioGroup'; type CheckboxComponentName = 'checkbox'; type ButtonComponentName = 'button' | 'iconButton'; type IconComponentName = 'svgIcon'; -type TabsComponentName = 'tabs' | 'tab' | 'tabLabel'; +type _Tabs_ComponentNameOld = 'tabsOld' | 'tabOld' | 'tabLabelOld'; type OverlayComponentName = 'overlay'; type AvatarComponentName = 'avatar' | 'avatarGroup' | 'avatarLabel'; type AccordionComponentName = 'accordion' | 'accordionHeader' | 'accordionPanel'; +type TabsComponentName = 'tabs' | 'tab'; diff --git a/packages/common/utils/src/index.ts b/packages/common/utils/src/index.ts index 922c71ce..a505c78d 100644 --- a/packages/common/utils/src/index.ts +++ b/packages/common/utils/src/index.ts @@ -51,3 +51,5 @@ export * from './lib/uncategorized/instance-store'; export * from './lib/selection/selection'; export * from './lib/string/case'; + +export * from './lib/model/common.model'; diff --git a/packages/common/utils/src/lib/animation/animation-store.ts b/packages/common/utils/src/lib/animation/animation-store.ts index 84680429..1eee1089 100644 --- a/packages/common/utils/src/lib/animation/animation-store.ts +++ b/packages/common/utils/src/lib/animation/animation-store.ts @@ -1,13 +1,9 @@ /** @module _hidden */ +import { DeepPartial } from '../model/common.model'; import { deepClone } from '../uncategorized/deep-clone'; import { deepMerge } from '../uncategorized/deep-merge'; -// TODO: It's duplicate between core and utils, but we can not use core in utils, so we need to keep it here. -export type DeepPartial = { - [P in keyof T]?: T[P] extends object ? DeepPartial : T[P]; -}; - export class AnimationStore { private _value: T; diff --git a/packages/common/core/src/lib/model/common.model.ts b/packages/common/utils/src/lib/model/common.model.ts similarity index 82% rename from packages/common/core/src/lib/model/common.model.ts rename to packages/common/utils/src/lib/model/common.model.ts index bfab0b0d..621e35ca 100644 --- a/packages/common/core/src/lib/model/common.model.ts +++ b/packages/common/utils/src/lib/model/common.model.ts @@ -6,7 +6,7 @@ export type DeepNullable = { [P in keyof T]: T[P] extends object ? DeepNullable : T[P] | null; }; -export type ClassRef = new (...args: any[]) => any; +export type ClassRef = new (...args: U[]) => T; export type RequireAtLeastOne = { [K in keyof T]-?: Required> & Omit; diff --git a/packages/internal/common-kits-doc/stories/utils/_hidden.mdx b/packages/internal/common-kits-doc/stories/utils/_hidden.mdx index 271077a0..fc7c29ca 100644 --- a/packages/internal/common-kits-doc/stories/utils/_hidden.mdx +++ b/packages/internal/common-kits-doc/stories/utils/_hidden.mdx @@ -5,7 +5,7 @@ import { Meta } from '@storybook/addon-docs'; import { MdxPage } from '@cocokits/storybook-addon-theme'; -export const tocItems = [{"id":"selection_animationframemanager","name":"AnimationFrameManager"},{"id":"selection_animationstoret","name":"AnimationStore"},{"id":"selection_deeppartialt","name":"DeepPartial"},{"id":"selection_getanimationvalueonprogress","name":"getAnimationValueOnProgress()"},{"id":"selection_gettransform2dvalue","name":"getTransform2dValue()"}]; +export const tocItems = [{"id":"selection_animationframemanager","name":"AnimationFrameManager"},{"id":"selection_animationstoret","name":"AnimationStore"},{"id":"selection_getanimationvalueonprogress","name":"getAnimationValueOnProgress()"},{"id":"selection_gettransform2dvalue","name":"getTransform2dValue()"}]; @@ -220,36 +220,6 @@ set(value: T): void *** -
-## DeepPartial\ - -```ts -type DeepPartial: { [P in keyof T]?: T[P] extends object ? DeepPartial : T[P] }; -``` - -### Type Parameters - -
- - - - - - - - - - - -
Type Parameter
- -`T` - -
-
- -*** -
## getAnimationValueOnProgress() diff --git a/packages/internal/common-kits-doc/stories/utils/model.common.model.mdx b/packages/internal/common-kits-doc/stories/utils/model.common.model.mdx new file mode 100644 index 00000000..14e27607 --- /dev/null +++ b/packages/internal/common-kits-doc/stories/utils/model.common.model.mdx @@ -0,0 +1,150 @@ + +[//]: # (Do not edit directly) +[//]: # (Generated by the Cocokits TypeDoc custom theme) + +import { Meta } from '@storybook/addon-docs'; +import { MdxPage } from '@cocokits/storybook-addon-theme'; + +export const tocItems = [{"id":"selection_classreft-u","name":"ClassRef"},{"id":"selection_deepnullablet","name":"DeepNullable"},{"id":"selection_deeppartialt","name":"DeepPartial"},{"id":"selection_requireatleastonet","name":"RequireAtLeastOne"}]; + + + +
+
+## ClassRef\ + +```ts +type ClassRef: Object; +``` + +### Type Parameters + +
+ + + + + + + + + + + + + + + + + +
Type ParameterDefault type
+ +`T` + + + +`any` + +
+ +`U` + + + +`any` + +
+
+ +*** + +
+## DeepNullable\ + +```ts +type DeepNullable: { [P in keyof T]: T[P] extends object ? DeepNullable : T[P] | null }; +``` + +### Type Parameters + +
+ + + + + + + + + + + +
Type Parameter
+ +`T` + +
+
+ +*** + +
+## DeepPartial\ + +```ts +type DeepPartial: { [P in keyof T]?: T[P] extends object ? DeepPartial : T[P] }; +``` + +### Type Parameters + +
+ + + + + + + + + + + +
Type Parameter
+ +`T` + +
+
+ +*** + +
+## RequireAtLeastOne\ + +```ts +type RequireAtLeastOne: { [K in keyof T]-?: Required> & Omit }[keyof T]; +``` + +### Type Parameters + +
+ + + + + + + + + + + +
Type Parameter
+ +`T` + +
+
+ +
+ diff --git a/packages/internal/storybook-addon-theme-angular/src/arg-type.ts b/packages/internal/storybook-addon-theme-angular/src/arg-type.ts new file mode 100644 index 00000000..a319c6a8 --- /dev/null +++ b/packages/internal/storybook-addon-theme-angular/src/arg-type.ts @@ -0,0 +1,33 @@ +import { InputType, StrictInputType } from '@storybook/types'; + +import { DeepPartial } from '@cocokits/common-utils'; + +interface NgArgType { + name: string; + category?: 'outputs' | 'input'; + type?: string; + defaultValue?: string | number | boolean | null; +} +export function ngArgType({ name, category, type, defaultValue }: NgArgType): DeepPartial { + const argType: InputType & { table: NonNullable } = { name, table: {} }; + + if (category) { + argType.table.category = category; + } + + if (type !== undefined) { + if (!argType.table.type) { + argType.table.type = {}; + } + argType.table.type.summary = type; + } + + if (defaultValue !== undefined) { + if (!argType.table.defaultValue) { + argType.table.defaultValue = {}; + } + argType.table.defaultValue.summary = `${defaultValue}`; + } + + return { [name]: argType }; +} diff --git a/packages/internal/storybook-addon-theme-angular/src/index.ts b/packages/internal/storybook-addon-theme-angular/src/index.ts index eced9c5a..2c61e09d 100644 --- a/packages/internal/storybook-addon-theme-angular/src/index.ts +++ b/packages/internal/storybook-addon-theme-angular/src/index.ts @@ -2,3 +2,4 @@ export * from './preview.base'; export * from './args-to-template'; export * from './decorators'; export * from './storybook-meta.model'; +export * from './arg-type'; diff --git a/packages/internal/storybook-addon-theme/src/assets/styles/cck-themes-components.css b/packages/internal/storybook-addon-theme/src/assets/styles/cck-themes-components.css index b2d4921d..1524924a 100644 --- a/packages/internal/storybook-addon-theme/src/assets/styles/cck-themes-components.css +++ b/packages/internal/storybook-addon-theme/src/assets/styles/cck-themes-components.css @@ -1829,6 +1829,12 @@ [data-cck-theme-name=cocokits] .cck-accordion__basic > .cck-accordion-panel):not(:last-of-type){ border-bottom:1px solid var(--color-border-default); } +:where([data-cck-theme-name=cocokits] .cck-tabs){ + opacity:1; +} +:where([data-cck-theme-name=cocokits] .cck-tab){ + opacity:1; +} :where([data-cck-theme-name=frames-x] .cck-button){ display:inline-flex; @@ -3891,4 +3897,136 @@ } :where([data-cck-theme-name=frames-x] .cck-accordion__underline > .cck-accordion-panel){ border-bottom:1px solid var(--base-border); +} +:where([data-cck-theme-name=frames-x] .cck-tabs){ + display:flex; + flex-direction:column; + gap:12px; +} +:where([data-cck-theme-name=frames-x] .cck-tabs__headers-wrapper){ + display:flex; + justify-content:center; + gap:var(--spacing-2); + flex-wrap:wrap; +} +:where([data-cck-theme-name=frames-x] .cck-tabs--align-left .cck-tabs__headers-wrapper){ + align-self:flex-start; + align-items:flex-start; + justify-content:flex-start; +} +:where([data-cck-theme-name=frames-x] .cck-tabs--align-center .cck-tabs__headers-wrapper){ + align-self:center; + align-items:center; + justify-content:center; +} +:where([data-cck-theme-name=frames-x] .cck-tabs--align-right .cck-tabs__headers-wrapper){ + align-self:flex-end; + align-items:flex-end; + justify-content:flex-end; +} +:where([data-cck-theme-name=frames-x] .cck-tabs--align-stretch .cck-tabs__headers-wrapper){ + align-self:stretch; + align-items:stretch; + justify-content:stretch; +} +:where([data-cck-theme-name=frames-x] .cck-tabs__toggle .cck-tabs__headers-wrapper){ + padding:var(--spacing-2); + border-radius:var(--radi-6); + background-color:var(--base-fill-1); +} +:where([data-cck-theme-name=frames-x] .cck-tabs__size--sm .cck-tabs__headers-wrapper){ + min-height:36px; +} +:where([data-cck-theme-name=frames-x] .cck-tabs__size--md .cck-tabs__headers-wrapper){ + min-height:44px; +} +:where([data-cck-theme-name=frames-x] .cck-tabs__size--lg .cck-tabs__headers-wrapper){ + min-height:56px; +} +:where([data-cck-theme-name=frames-x] .cck-tab){ + display:flex; + background:transparent; + border:none; + outline:none; + color:var(--text-dark-tertiary); + align-items:center; + justify-content:center; + white-space:nowrap; + cursor:pointer; + position:relative; +} +:where([data-cck-theme-name=frames-x] .cck-tab .cck-svg-icon.cck-svg-icon--default-color){ + color:currentColor; + fill:currentColor; +} +:where([data-cck-theme-name=frames-x] .cck-tab__label){ + position:relative; + z-index:1; +} +:where([data-cck-theme-name=frames-x] .cck-tab--unselected):not(.cck-tab--disabled):focus-visible{ + outline:2px solid var(--state-brand-selected); +} +:where([data-cck-theme-name=frames-x] .cck-tab--selected){ + color:var(--text-dark-primary); +} +:where([data-cck-theme-name=frames-x] .cck-tab--disabled){ + color:var(--base-disabled); + cursor:not-allowed; +} +:where([data-cck-theme-name=frames-x] .cck-tab__indicator){ + position:absolute; + top:0; + left:0; + width:100%; + height:100%; + z-index:0; +} +:where([data-cck-theme-name=frames-x] .cck-tabs--align-stretch .cck-tab){ + flex:1; +} +:where([data-cck-theme-name=frames-x] .cck-tabs__toggle .cck-tab){ + border-radius:var(--radi-5); +} +:where([data-cck-theme-name=frames-x] .cck-tabs__toggle .cck-tab--unselected):not(.cck-tab--disabled):hover{ + background-color:var(--base-fill-2); +} +:where([data-cck-theme-name=frames-x] .cck-tabs__toggle .cck-tab__indicator){ + border-radius:var(--radi-5); + background-color:var(--base-surface-1); + border:1px solid var(--base-border); +} +:where([data-cck-theme-name=frames-x] .cck-tabs__fill .cck-tab){ + border-radius:var(--radi-6); +} +:where([data-cck-theme-name=frames-x] .cck-tabs__fill .cck-tab__indicator){ + border-radius:var(--radi-5); + background-color:var(--base-surface-2); + border:2px solid var(--state-brand-selected); +} +:where([data-cck-theme-name=frames-x] .cck-tabs__line .cck-tab__indicator){ + border-bottom:var(--stroke-lg) solid var(--state-brand-selected); +} +:where([data-cck-theme-name=frames-x] .cck-tabs__size--sm .cck-tab){ + font:var(--text-sm-font-medium); + padding:0px var(--spacing-7); + height:36px; +} +:where([data-cck-theme-name=frames-x] .cck-tabs__size--sm .cck-tab.cck-tab--selected){ + font:var(--text-sm-font-semibold); +} +:where([data-cck-theme-name=frames-x] .cck-tabs__size--md .cck-tab){ + font:var(--text-base-font-medium); + padding:0px var(--spacing-8); + height:44px; +} +:where([data-cck-theme-name=frames-x] .cck-tabs__size--md .cck-tab.cck-tab--selected){ + font:var(--text-base-font-semibold); +} +:where([data-cck-theme-name=frames-x] .cck-tabs__size--lg .cck-tab){ + font:var(--text-lg-font-medium); + padding:0px var(--spacing-9); + height:56px; +} +:where([data-cck-theme-name=frames-x] .cck-tabs__size--lg .cck-tab.cck-tab--selected){ + font:var(--text-lg-font-semibold); } \ No newline at end of file diff --git a/packages/internal/storybook-addon-theme/src/assets/styles/cck-themes-components.min.css b/packages/internal/storybook-addon-theme/src/assets/styles/cck-themes-components.min.css index f1b1605b..85d599e7 100644 --- a/packages/internal/storybook-addon-theme/src/assets/styles/cck-themes-components.min.css +++ b/packages/internal/storybook-addon-theme/src/assets/styles/cck-themes-components.min.css @@ -4,4 +4,4 @@ * Generated by cocokits 'scss-builder' */ -:where([data-cck-theme-name=cocokits] .cck-button){align-items:center;border:none;box-sizing:border-box;cursor:pointer;display:inline-flex;justify-content:center;margin:0;outline:transparent}:where([data-cck-theme-name=cocokits] .cck-button):disabled{background-color:var(--color-disabled-surface);fill:var(--color-disabled-font);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-button .cck-svg-icon--default-color .cck-svg-icon__svg){fill:currentcolor}:where([data-cck-theme-name=cocokits] .cck-button__backdrop){display:none}:where([data-cck-theme-name=cocokits] .cck-button__size--sm){gap:8px;height:var(--button-primary-height-sm);padding:0 16px}:where([data-cck-theme-name=cocokits] .cck-button__size--md){gap:8px;height:32px;padding:0 20px}:where([data-cck-theme-name=cocokits] .cck-button__size--lg){gap:10px;height:40px;padding:0 24px}:where([data-cck-theme-name=cocokits] .cck-button__basic){border-radius:4px}:where([data-cck-theme-name=cocokits] .cck-button__basic.cck-button__color--brand):not(:disabled){background-color:transparent;color:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-button__basic.cck-button__color--brand):focus-visible{box-shadow:0 0 0 3px var(--color-brand-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-button__basic.cck-button__color--info):not(:disabled){background-color:transparent;color:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-button__basic.cck-button__color--info):focus-visible{box-shadow:0 0 0 3px var(--color-info-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-button__basic.cck-button__color--warning):not(:disabled){background-color:transparent;color:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-button__basic.cck-button__color--warning):focus-visible{box-shadow:0 0 0 3px var(--color-warning-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-button__basic.cck-button__color--error):not(:disabled){background-color:transparent;color:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-button__basic.cck-button__color--error):focus-visible{box-shadow:0 0 0 3px var(--color-error-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-button__basic.cck-button__color--h-contrast):not(:disabled){background-color:transparent;color:var(--color-h-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-button__basic.cck-button__color--h-contrast):focus-visible{box-shadow:0 0 0 3px var(--color-h-contrast-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-button__light){border-radius:4px}:where([data-cck-theme-name=cocokits] .cck-button__light.cck-button__color--brand):not(:disabled){background-color:var(--color-brand-alpha-5);color:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-button__light.cck-button__color--brand):focus-visible{box-shadow:0 0 0 3px var(--color-brand-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-button__light.cck-button__color--info):not(:disabled){background-color:var(--color-info-alpha-5);color:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-button__light.cck-button__color--info):focus-visible{box-shadow:0 0 0 3px var(--color-info-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-button__light.cck-button__color--warning):not(:disabled){background-color:var(--color-warning-alpha-5);color:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-button__light.cck-button__color--warning):focus-visible{box-shadow:0 0 0 3px var(--color-warning-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-button__light.cck-button__color--error):not(:disabled){background-color:var(--color-error-alpha-5);color:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-button__light.cck-button__color--error):focus-visible{box-shadow:0 0 0 3px var(--color-error-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-button__light.cck-button__color--h-contrast):not(:disabled){background-color:var(--color-h-contrast-alpha-5);color:var(--color-h-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-button__light.cck-button__color--h-contrast):focus-visible{box-shadow:0 0 0 3px var(--color-h-contrast-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-button__outline){background-color:transparent;border-radius:4px}:where([data-cck-theme-name=cocokits] .cck-button__outline.cck-button__color--brand):not(:disabled){border:1px solid var(--color-brand-default);color:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-button__outline.cck-button__color--brand):focus-visible{box-shadow:0 0 0 3px var(--color-brand-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-button__outline.cck-button__color--info):not(:disabled){border:1px solid var(--color-info-default);color:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-button__outline.cck-button__color--info):focus-visible{box-shadow:0 0 0 3px var(--color-info-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-button__outline.cck-button__color--warning):not(:disabled){border:1px solid var(--color-warning-default);color:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-button__outline.cck-button__color--warning):focus-visible{box-shadow:0 0 0 3px var(--color-warning-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-button__outline.cck-button__color--error):not(:disabled){border:1px solid var(--color-error-default);color:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-button__outline.cck-button__color--error):focus-visible{box-shadow:0 0 0 3px var(--color-error-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-button__outline.cck-button__color--h-contrast):not(:disabled){border:1px solid var(--color-h-contrast-default);color:var(--color-h-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-button__outline.cck-button__color--h-contrast):focus-visible{box-shadow:0 0 0 3px var(--color-h-contrast-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-button__primary){border-radius:4px}:where([data-cck-theme-name=cocokits] .cck-button__primary.cck-button__color--brand):not(:disabled){background-color:var(--color-brand-default);color:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-button__primary.cck-button__color--brand):focus-visible{box-shadow:0 0 0 3px var(--color-brand-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-button__primary.cck-button__color--info):not(:disabled){background-color:var(--color-info-default);color:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-button__primary.cck-button__color--info):focus-visible{box-shadow:0 0 0 3px var(--color-info-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-button__primary.cck-button__color--warning):not(:disabled){background-color:var(--color-warning-default);color:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-button__primary.cck-button__color--warning):focus-visible{box-shadow:0 0 0 3px var(--color-warning-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-button__primary.cck-button__color--error):not(:disabled){background-color:var(--color-error-default);color:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-button__primary.cck-button__color--error):focus-visible{box-shadow:0 0 0 3px var(--color-error-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-button__primary.cck-button__color--h-contrast):not(:disabled){background-color:var(--color-h-contrast-default);color:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-button__primary.cck-button__color--h-contrast):focus-visible{box-shadow:0 0 0 3px var(--color-h-contrast-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-checkbox){display:flex}:where([data-cck-theme-name=cocokits] .cck-checkbox__wrapper){align-items:center;display:inline-flex;gap:12px;vertical-align:middle}:where([data-cck-theme-name=cocokits] .cck-checkbox__input-wrapper){box-sizing:content-box;cursor:pointer;display:inline-block;flex-shrink:0;line-height:0;position:relative;white-space:nowrap}:where([data-cck-theme-name=cocokits] .cck-checkbox__size--sm .cck-checkbox__input-wrapper){height:var(--checkbox-size-sm);width:var(--checkbox-size-sm)}:where([data-cck-theme-name=cocokits] .cck-checkbox__size--md .cck-checkbox__input-wrapper){height:var(--checkbox-size-md);width:var(--checkbox-size-md)}:where([data-cck-theme-name=cocokits] .cck-checkbox__size--lg .cck-checkbox__input-wrapper){height:var(--checkbox-size-lg);width:var(--checkbox-size-lg)}:where([data-cck-theme-name=cocokits] .cck-checkbox__input){cursor:inherit;height:100%;left:0;margin:0;opacity:0;padding:0;position:absolute;right:0;top:0;width:100%}:where([data-cck-theme-name=cocokits] .cck-checkbox__background){align-items:center;border:1px solid var(--color-m-contrast-default);border-radius:2px;box-sizing:border-box;display:flex;height:100%;justify-content:center;pointer-events:none;position:absolute;transition:background-color 90ms cubic-bezier(.4,0,.6,1),border-color 90ms cubic-bezier(.4,0,.6,1);width:100%;will-change:background-color,border-color}:where([data-cck-theme-name=cocokits] .cck-checkbox--checked.cck-checkbox--disabled .cck-checkbox__background),:where([data-cck-theme-name=cocokits] .cck-checkbox--disabled .cck-checkbox__background),:where([data-cck-theme-name=cocokits] .cck-checkbox--indeterminate.cck-checkbox--disabled .cck-checkbox__background),:where([data-cck-theme-name=cocokits] .cck-checkbox--unchecked.cck-checkbox--disabled .cck-checkbox__background){background-color:var(--color-disabled-surface);border-color:var(--color-disabled-border)}:where([data-cck-theme-name=cocokits] .cck-checkbox--checked.cck-checkbox__color--brand:not(.cck-checkbox--disabled) .cck-checkbox__background),:where([data-cck-theme-name=cocokits] .cck-checkbox--indeterminate.cck-checkbox__color--brand:not(.cck-checkbox--disabled) .cck-checkbox__background){background-color:var(--color-brand-default);border-color:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-checkbox--checked.cck-checkbox__color--info:not(.cck-checkbox--disabled) .cck-checkbox__background),:where([data-cck-theme-name=cocokits] .cck-checkbox--indeterminate.cck-checkbox__color--info:not(.cck-checkbox--disabled) .cck-checkbox__background){background-color:var(--color-info-default);border-color:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-checkbox--checked.cck-checkbox__color--warning:not(.cck-checkbox--disabled) .cck-checkbox__background),:where([data-cck-theme-name=cocokits] .cck-checkbox--indeterminate.cck-checkbox__color--warning:not(.cck-checkbox--disabled) .cck-checkbox__background){background-color:var(--color-warning-default);border-color:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-checkbox--checked.cck-checkbox__color--error:not(.cck-checkbox--disabled) .cck-checkbox__background),:where([data-cck-theme-name=cocokits] .cck-checkbox--indeterminate.cck-checkbox__color--error:not(.cck-checkbox--disabled) .cck-checkbox__background){background-color:var(--color-error-default);border-color:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-checkbox__color--brand .cck-checkbox__input:focus-visible~.cck-checkbox__background){box-shadow:0 0 0 3px var(--color-brand-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-checkbox__color--info .cck-checkbox__input:focus-visible~.cck-checkbox__background){box-shadow:0 0 0 3px var(--color-info-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-checkbox__color--warning .cck-checkbox__input:focus-visible~.cck-checkbox__background){box-shadow:0 0 0 3px var(--color-warning-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-checkbox__color--error .cck-checkbox__input:focus-visible~.cck-checkbox__background){box-shadow:0 0 0 3px var(--color-error-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-checkbox__checkmark-path){transition:stroke-dashoffset .18s cubic-bezier(.4,0,.6,1);stroke:currentcolor;stroke-width:3.12px;stroke-dashoffset:29.7833;stroke-dasharray:29.7833}:where([data-cck-theme-name=cocokits] .cck-checkbox--checked .cck-checkbox__checkmark-path){stroke-dashoffset:0}:where([data-cck-theme-name=cocokits] .cck-checkbox__checkmark){color:var(--checkbox-color-checkmark);inset:0;opacity:0;padding:2px;position:absolute;transition:opacity .18s cubic-bezier(.4,0,.6,1);width:100%}:where([data-cck-theme-name=cocokits] .cck-checkbox--checked .cck-checkbox__checkmark){opacity:1}:where([data-cck-theme-name=cocokits] .cck-checkbox--indeterminate .cck-checkbox__checkmark){opacity:0;transform:rotate(45deg);transition:opacity 90ms cubic-bezier(.4,0,.6,1),transform 90ms cubic-bezier(.4,0,.6,1)}:where([data-cck-theme-name=cocokits] .cck-checkbox--disabled .cck-checkbox__checkmark){color:var(--color-disabled-border)}:where([data-cck-theme-name=cocokits] .cck-checkbox__mixedmark){border-color:var(--checkbox-color-checkmark);border-style:solid;border-width:1px;height:0;margin:2px;opacity:0;transform:scaleX(0) rotate(0deg);transition:opacity 90ms cubic-bezier(.4,0,.6,1),transform 90ms cubic-bezier(.4,0,.6,1);width:100%}:where([data-cck-theme-name=cocokits] .cck-checkbox--indeterminate .cck-checkbox__mixedmark){opacity:1;transform:scaleX(1) rotate(0deg)}:where([data-cck-theme-name=cocokits] .cck-checkbox__label){color:var(--color-font-default);cursor:pointer;font:var(--text-sm-medium);margin-left:0;margin-right:auto;order:0;padding-left:0;padding-right:0;text-align:left;white-space:nowrap}:where([data-cck-theme-name=cocokits] .cck-checkbox__label):empty{display:none}:where([data-cck-theme-name=cocokits] .cck-checkbox--disabled .cck-checkbox__label){color:var(--color-disabled-font)}:where([data-cck-theme-name=cocokits] .cck-checkbox--disabled .cck-checkbox__input-wrapper),:where([data-cck-theme-name=cocokits] .cck-checkbox--disabled .cck-checkbox__label){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-chip){align-items:center;border:1px solid var(--chip-color-border);border-radius:6px;color:var(--color-font-default);cursor:default;display:flex;font:var(--text-sm-medium);gap:4px;padding:0 var(--chip-spacing-overlay-h-padding)}:where([data-cck-theme-name=cocokits] .cck-chip.cck-chip--disabled){border:1px solid var(--chip-color-border-disabled);color:var(--color-disabled-font);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-chip.cck-chip--removable){padding:0 2px 0 var(--chip-spacing-overlay-h-padding)}:where([data-cck-theme-name=cocokits] .cck-chip__size--sm){height:var(--chip-size-height-sm)}:where([data-cck-theme-name=cocokits] .cck-chip__size--md){height:var(--chip-size-height-md)}:where([data-cck-theme-name=cocokits] .cck-chip__size--lg){height:var(--chip-size-height-lg)}:where([data-cck-theme-name=cocokits] .cck-chip__content-wrapper){align-items:center;display:flex;justify-content:center}:where([data-cck-theme-name=cocokits] .cck-chip__remove-icon-wrapper .cck-icon-button){background-color:transparent;border-radius:50%;color:var(--color-font-alpha-7);height:24px;padding:4px;width:24px}:where([data-cck-theme-name=cocokits] .cck-chip__remove-icon-wrapper){align-items:center;display:flex;justify-content:center}:where([data-cck-theme-name=cocokits] .cck-chip__remove-icon-wrapper .cck-icon-button):hover{background-color:var(--color-h-contrast-alpha-2)}:where([data-cck-theme-name=cocokits] .cck-chip-list){align-items:stretch;display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-start}:where([data-cck-theme-name=cocokits] .cck-chip-list__input){background:transparent;border:none;flex:1;font:var(--text-sm-regular);outline:none}:where([data-cck-theme-name=cocokits] .cck-chip-list__input::-moz-placeholder){color:var(--color-font-alpha-6);-moz-transition:color .1s ease-in;transition:color .1s ease-in}:where([data-cck-theme-name=cocokits] .cck-chip-list__input::placeholder){color:var(--color-font-alpha-6);transition:color .1s ease-in}:where([data-cck-theme-name=cocokits] .cck-chip-list__input::-moz-placeholder):not(:focus){color:transparent}:where([data-cck-theme-name=cocokits] .cck-chip-list__input::placeholder):not(:focus){color:transparent}:where([data-cck-theme-name=cocokits] .cck-chip-list__size--sm .cck-chip-list__input){height:var(--chip-size-height-sm)}:where([data-cck-theme-name=cocokits] .cck-chip-list__size--md .cck-chip-list__input){height:var(--chip-size-height-md)}:where([data-cck-theme-name=cocokits] .cck-chip-list__size--lg .cck-chip-list__input){height:var(--chip-size-height-lg)}:where([data-cck-theme-name=cocokits] *){box-sizing:border-box}:where([data-cck-theme-name=cocokits] .cck-divider){display:block;flex-shrink:0}:where([data-cck-theme-name=cocokits] .cck-divider__horizontal){margin:var(--divider-spacing-margin) 0;width:100%}:where([data-cck-theme-name=cocokits] .cck-divider__horizontal.cck-divider__size--md){height:1px}:where([data-cck-theme-name=cocokits] .cck-divider__horizontal.cck-divider__size--lg){height:2px;width:100%}:where([data-cck-theme-name=cocokits] .cck-divider__vertical){height:100%;margin:0 var(--divider-spacing-margin)}:where([data-cck-theme-name=cocokits] .cck-divider__vertical.cck-divider__size--md){width:1px}:where([data-cck-theme-name=cocokits] .cck-divider__vertical.cck-divider__size--lg){width:2px}:where([data-cck-theme-name=cocokits] .cck-divider__color--light){background-color:var(--divider-color-light)}:where([data-cck-theme-name=cocokits] .cck-divider__color--default){background-color:var(--divider-color-default)}:where([data-cck-theme-name=cocokits] .cck-divider__color--dark){background-color:var(--divider-color-dark)}:where([data-cck-theme-name=cocokits] .cck-error){color:var(--color-error-default);display:flex;font:var(--text-sm-regular);gap:6px}:where([data-cck-theme-name=cocokits] .cck-error .cck-svg-icon--default-color .cck-svg-icon__svg){fill:currentcolor}:where([data-cck-theme-name=cocokits] .cck-form-field){align-items:flex-start;display:flex;flex-direction:column;gap:var(--form_field-spacing-host-gap);min-width:100px}:where([data-cck-theme-name=cocokits] .cck-form-field:not(:disabled) .cck-form-field__input-wrapper):hover{background-color:var(--color-surface-inverse-alpha-1)}:where([data-cck-theme-name=cocokits] .cck-form-field .cck-select){flex:1;height:100%;width:100%}:where([data-cck-theme-name=cocokits] .cck-form-field .cck-input){flex:1;width:100%}:where([data-cck-theme-name=cocokits] .cck-form-field--disabled){opacity:.5}:where([data-cck-theme-name=cocokits] .cck-form-field__wrapper){align-items:stretch;border-radius:var(--form_field-size-radius);display:flex;flex-direction:row;width:100%}:where([data-cck-theme-name=cocokits] .cck-form-field__wrapper):has(input:disabled){background-color:var(--color-surface-inverse-alpha-3)}:where([data-cck-theme-name=cocokits] .cck-form-field--with-input.cck-form-field__size--sm .cck-form-field__wrapper),:where([data-cck-theme-name=cocokits] .cck-form-field--with-select.cck-form-field__size--sm .cck-form-field__wrapper){height:var(--form_field-size-height-sm)}:where([data-cck-theme-name=cocokits] .cck-form-field--with-input.cck-form-field__size--md .cck-form-field__wrapper),:where([data-cck-theme-name=cocokits] .cck-form-field--with-select.cck-form-field__size--md .cck-form-field__wrapper){height:var(--form_field-size-height-md)}:where([data-cck-theme-name=cocokits] .cck-form-field--with-input.cck-form-field__size--lg .cck-form-field__wrapper),:where([data-cck-theme-name=cocokits] .cck-form-field--with-select.cck-form-field__size--lg .cck-form-field__wrapper){height:var(--form_field-size-height-lg)}:where([data-cck-theme-name=cocokits] .cck-form-field .cck-label){margin-left:var(--form_field-spacing-balance-alignment-margin)}:where([data-cck-theme-name=cocokits] .cck-form-field__feedback-wrapper){display:flex;flex-direction:column;margin-left:var(--form_field-spacing-balance-alignment-margin);overflow:hidden}:where([data-cck-theme-name=cocokits] .cck-form-field__feedback-wrapper):empty{display:none}:where([data-cck-theme-name=cocokits] .cck-form-field__wrapper>*):first-child{border-bottom-left-radius:var(--form_field-size-radius);border-top-left-radius:var(--form_field-size-radius)}:where([data-cck-theme-name=cocokits] .cck-form-field__wrapper>*):last-child{border-bottom-right-radius:var(--form_field-size-radius);border-top-right-radius:var(--form_field-size-radius)}:where([data-cck-theme-name=cocokits] .cck-form-field__input-wrapper){align-items:center;border:1px solid var(--form_field-color-border);display:flex;flex:1;flex-direction:row;gap:var(--form_field-spacing-input-wrapper-gap);min-width:0}:where([data-cck-theme-name=cocokits] .cck-form-field--with-input .cck-form-field__input-wrapper),:where([data-cck-theme-name=cocokits] .cck-form-field--with-select .cck-form-field__input-wrapper){padding:0 var(--form_field-spacing-input-wrapper-h-padding)}:where([data-cck-theme-name=cocokits] .cck-form-field--with-chip-list .cck-prefix),:where([data-cck-theme-name=cocokits] .cck-form-field--with-chip-list .cck-suffix){align-self:flex-start}:where([data-cck-theme-name=cocokits] .cck-form-field--with-chip-list .cck-chip-list){flex:1}:where([data-cck-theme-name=cocokits] .cck-form-field__size--sm.cck-form-field--with-chip-list .cck-suffix){margin-right:4px;margin-top:6px}:where([data-cck-theme-name=cocokits] .cck-form-field__size--md.cck-form-field--with-chip-list .cck-suffix){margin-right:4px;margin-top:8px}:where([data-cck-theme-name=cocokits] .cck-form-field__size--lg.cck-form-field--with-chip-list .cck-suffix){margin-left:4px;margin-right:8px;margin-top:12px}:where([data-cck-theme-name=cocokits] .cck-form-field__size--sm.cck-form-field--with-chip-list .cck-prefix){margin-left:4px;margin-top:6px}:where([data-cck-theme-name=cocokits] .cck-form-field__size--md.cck-form-field--with-chip-list .cck-prefix){margin-left:4px;margin-top:8px}:where([data-cck-theme-name=cocokits] .cck-form-field__size--lg.cck-form-field--with-chip-list .cck-prefix){margin-left:8px;margin-right:4px;margin-top:12px}:where([data-cck-theme-name=cocokits] .cck-form-field--with-chip-list .cck-form-field__input-wrapper){cursor:text;padding:4px}:where([data-cck-theme-name=cocokits] .cck-form-field--with-textarea .cck-form-field__input-wrapper){padding:8px}:where([data-cck-theme-name=cocokits] .cck-form-field--focused .cck-form-field__input-wrapper){border:1px solid var(--color-brand-default);box-shadow:inset 0 0 0 1px var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-form-field--error .cck-form-field__input-wrapper){border:1px solid var(--form_field-color-error)}:where([data-cck-theme-name=cocokits] .cck-form-field--focused.cck-form-field--error .cck-form-field__input-wrapper){box-shadow:inset 0 0 0 1px var(--form_field-color-error)}:where([data-cck-theme-name=cocokits] .cck-hint){color:var(--color-font-alpha-7);display:flex;font:var(--text-sm-regular);gap:6px}:where([data-cck-theme-name=cocokits] .cck-hint .cck-svg-icon--default-color .cck-svg-icon__svg){fill:currentcolor}:where([data-cck-theme-name=cocokits] .cck-svg-icon){align-items:center;display:flex;flex-shrink:0;justify-content:center}:where([data-cck-theme-name=cocokits] .cck-svg-icon__svg){height:100%;width:100%}:where([data-cck-theme-name=cocokits] .cck-svg-icon__size--xs){height:var(--icon-size-xs);width:var(--icon-size-xs)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__size--sm){height:var(--icon-size-sm);width:var(--icon-size-sm)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__size--md){height:var(--icon-size-md);width:var(--icon-size-md)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__size--lg){height:var(--icon-size-lg);width:var(--icon-size-lg)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__size--xl){height:var(--icon-size-xl);width:var(--icon-size-xl)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__size--2xl){height:var(--icon-size-2xl);width:var(--icon-size-2xl)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__color--brand){fill:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__color--info){fill:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__color--warning){fill:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__color--error){fill:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__color--h-contrast){fill:var(--color-h-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__color--m-contrast){fill:var(--color-m-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button){align-items:center;border:none;box-sizing:border-box;cursor:pointer;display:inline-flex;flex-shrink:0;justify-content:center;margin:0;outline:transparent}:where([data-cck-theme-name=cocokits] .cck-icon-button):disabled{background-color:var(--color-disabled-surface);fill:var(--color-disabled-font);cursor:default}:where([data-cck-theme-name=cocokits] .cck-icon-button .cck-svg-icon){height:100%;width:100%}:where([data-cck-theme-name=cocokits] .cck-icon-button .cck-svg-icon__svg){fill:inherit}:where([data-cck-theme-name=cocokits] .cck-icon-button__rounded--false){border-radius:4px}:where([data-cck-theme-name=cocokits] .cck-icon-button__rounded--true){border-radius:50%}:where([data-cck-theme-name=cocokits] .cck-icon-button__size--sm){height:28px;padding:6px;width:28px}:where([data-cck-theme-name=cocokits] .cck-icon-button__size--md){height:32px;padding:6px;width:32px}:where([data-cck-theme-name=cocokits] .cck-icon-button__size--lg){height:40px;padding:8px;width:40px}:where([data-cck-theme-name=cocokits] .cck-icon-button__basic.cck-icon-button__color--brand):not(:disabled){background-color:transparent;fill:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__basic.cck-icon-button__color--brand):focus-visible{box-shadow:0 0 0 3px var(--color-brand-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-icon-button__basic.cck-icon-button__color--info):not(:disabled){background-color:transparent;fill:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__basic.cck-icon-button__color--info):focus-visible{box-shadow:0 0 0 3px var(--color-info-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-icon-button__basic.cck-icon-button__color--warning):not(:disabled){background-color:transparent;fill:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__basic.cck-icon-button__color--warning):focus-visible{box-shadow:0 0 0 3px var(--color-warning-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-icon-button__basic.cck-icon-button__color--error):not(:disabled){background-color:transparent;fill:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__basic.cck-icon-button__color--error):focus-visible{box-shadow:0 0 0 3px var(--color-error-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-icon-button__basic.cck-icon-button__color--h-contrast):not(:disabled){background-color:transparent;fill:var(--color-h-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__basic.cck-icon-button__color--h-contrast):focus-visible{box-shadow:0 0 0 3px var(--color-h-contrast-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-icon-button__light.cck-icon-button__color--brand):not(:disabled){background-color:var(--color-brand-alpha-5);fill:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__light.cck-icon-button__color--brand):focus-visible{box-shadow:0 0 0 3px var(--color-brand-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-icon-button__light.cck-icon-button__color--info):not(:disabled){background-color:var(--color-info-alpha-5);fill:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__light.cck-icon-button__color--info):focus-visible{box-shadow:0 0 0 3px var(--color-info-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-icon-button__light.cck-icon-button__color--warning):not(:disabled){background-color:var(--color-warning-alpha-5);fill:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__light.cck-icon-button__color--warning):focus-visible{box-shadow:0 0 0 3px var(--color-warning-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-icon-button__light.cck-icon-button__color--error):not(:disabled){background-color:var(--color-error-alpha-5);fill:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__light.cck-icon-button__color--error):focus-visible{box-shadow:0 0 0 3px var(--color-error-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-icon-button__light.cck-icon-button__color--h-contrast):not(:disabled){background-color:var(--color-h-contrast-alpha-5);fill:var(--color-h-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__light.cck-icon-button__color--h-contrast):focus-visible{box-shadow:0 0 0 3px var(--color-h-contrast-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline){background-color:transparent}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline.cck-icon-button__color--brand):not(:disabled){border:1px solid var(--color-brand-default);fill:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline.cck-icon-button__color--brand):focus-visible{box-shadow:0 0 0 3px var(--color-brand-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline.cck-icon-button__color--info):not(:disabled){border:1px solid var(--color-info-default);fill:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline.cck-icon-button__color--info):focus-visible{box-shadow:0 0 0 3px var(--color-info-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline.cck-icon-button__color--warning):not(:disabled){border:1px solid var(--color-warning-default);fill:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline.cck-icon-button__color--warning):focus-visible{box-shadow:0 0 0 3px var(--color-warning-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline.cck-icon-button__color--error):not(:disabled){border:1px solid var(--color-error-default);fill:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline.cck-icon-button__color--error):focus-visible{box-shadow:0 0 0 3px var(--color-error-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline.cck-icon-button__color--h-contrast):not(:disabled){border:1px solid var(--color-h-contrast-default);fill:var(--color-h-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline.cck-icon-button__color--h-contrast):focus-visible{box-shadow:0 0 0 3px var(--color-h-contrast-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-icon-button__primary.cck-icon-button__color--brand):not(:disabled){background-color:var(--color-brand-default);fill:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__primary.cck-icon-button__color--brand):focus-visible{box-shadow:0 0 0 3px var(--color-brand-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-icon-button__primary.cck-icon-button__color--info):not(:disabled){background-color:var(--color-info-default);fill:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__primary.cck-icon-button__color--info):focus-visible{box-shadow:0 0 0 3px var(--color-info-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-icon-button__primary.cck-icon-button__color--warning):not(:disabled){background-color:var(--color-warning-default);fill:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__primary.cck-icon-button__color--warning):focus-visible{box-shadow:0 0 0 3px var(--color-warning-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-icon-button__primary.cck-icon-button__color--error):not(:disabled){background-color:var(--color-error-default);fill:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__primary.cck-icon-button__color--error):focus-visible{box-shadow:0 0 0 3px var(--color-error-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-icon-button__primary.cck-icon-button__color--h-contrast):not(:disabled){background-color:var(--color-h-contrast-default);fill:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__primary.cck-icon-button__color--h-contrast):focus-visible{box-shadow:0 0 0 3px var(--color-h-contrast-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-input){background-color:transparent;border:none;color:var(--color-font-default);font:var(--text-md-regular);outline:none;text-overflow:ellipsis}:where([data-cck-theme-name=cocokits] .cck-input::-moz-placeholder){color:var(--color-font-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-input::placeholder){color:var(--color-font-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-input::-moz-placeholder):disabled{color:var(--color-font-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-input::placeholder):disabled{color:var(--color-font-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-input):disabled{color:var(--color-font-alpha-6);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-label){display:flex}:where([data-cck-theme-name=cocokits] .cck-label__label-tag){color:var(--color-font-default);font:var(--text-sm-medium)}:where([data-cck-theme-name=cocokits] .cck-label__required-marker){color:var(--color-brand-default);font:var(--text-sm-medium);margin-left:var(--label-spacing-required-marker-padding-left)}:where([data-cck-theme-name=cocokits] .cck-leading){align-items:center;border:1px solid var(--form_field-color-border);border-right:none;color:var(--color-font-alpha-7);display:flex;flex-grow:0;justify-content:center;padding:0 var(--form_field-spacing-input-wrapper-h-padding);-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-leading .cck-select){color:currentcolor;font:inherit}:where([data-cck-theme-name=cocokits] .cck-leading__regular){font:var(--text-sm-regular)}:where([data-cck-theme-name=cocokits] .cck-leading__medium){font:var(--text-sm-medium)}:where([data-cck-theme-name=cocokits] .cck-leading--clickable){cursor:pointer;transition:background-color .1s}:where([data-cck-theme-name=cocokits] .cck-leading .cck-svg-icon.cck-svg-icon--default-size){height:var(--icon-size-xs);width:var(--icon-size-xs)}:where([data-cck-theme-name=cocokits] .cck-leading__color--transparent){background-color:transparent}:where([data-cck-theme-name=cocokits] .cck-leading__color--transparent.cck-leading--clickable):active{background-color:var(--color-surface-inverse-alpha-4)}:where([data-cck-theme-name=cocokits] .cck-leading__color--transparent.cck-leading--clickable):hover:not(:active){background-color:var(--color-surface-inverse-alpha-1)}:where([data-cck-theme-name=cocokits] .cck-leading__color--grey){background-color:var(--color-surface-inverse-alpha-1)}:where([data-cck-theme-name=cocokits] .cck-leading__color--grey.cck-leading--clickable):active{background-color:var(--color-surface-inverse-alpha-4)}:where([data-cck-theme-name=cocokits] .cck-leading__color--grey.cck-leading--clickable):hover:not(:active){background-color:var(--color-surface-inverse-alpha-3)}:where([data-cck-theme-name=cocokits] .cck-leading .cck-svg-icon.cck-svg-icon--default-color .cck-svg-icon__svg){fill:var(--form_field-color-icon)}:where([data-cck-theme-name=cocokits] .cck-menu){background-color:var(--color-surface-default);border:1px solid var(--menu-color-border);border-radius:var(--menu-size-radius);box-shadow:0 8px 10px -6px rgba(13,16,23,.039),0 18px 22px -4px rgba(13,16,23,.078);display:flex;flex-direction:column;margin:4px 0;padding:var(--menu-spacing-v-padding) var(--menu-spacing-h-padding)}:where([data-cck-theme-name=cocokits] .cck-menu__overlay .cck-overlay__backdrop){background-color:transparent}:where([data-cck-theme-name=cocokits] .cck-menu-item){align-items:center;border-radius:6px;display:flex;font:var(--text-sm-regular);gap:var(--menu_item-spacing-gap);justify-content:flex-start;margin:0 4px;padding:var(--menu_item-spacing-v-padding) var(--menu_item-spacing-h-padding)}:where([data-cck-theme-name=cocokits] .cck-menu-item):not(.cck-menu-item--disabled){cursor:pointer}:where([data-cck-theme-name=cocokits] .cck-menu-item--disabled){opacity:.6}:where([data-cck-theme-name=cocokits] .cck-menu-item--disabled .cck-svg-icon.cck-svg-icon--default-color),:where([data-cck-theme-name=cocokits] .cck-menu-item--disabled){color:var(--color-disabled-font)}:where([data-cck-theme-name=cocokits] .cck-menu-item):not(.cck-menu-item--disabled):hover{background-color:var(--color-surface-inverse-alpha-1)}:where([data-cck-theme-name=cocokits] .cck-menu-item__color--default):not(.cck-menu-item--disabled),:where([data-cck-theme-name=cocokits] .cck-menu-item__color--default:not(.cck-menu-item--disabled) .cck-svg-icon.cck-svg-icon--default-color){color:var(--color-font-default)}:where([data-cck-theme-name=cocokits] .cck-menu-item__color--error):not(.cck-menu-item--disabled),:where([data-cck-theme-name=cocokits] .cck-menu-item__color--error:not(.cck-menu-item--disabled) .cck-svg-icon.cck-svg-icon--default-color){color:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-menu-item__size--sm){height:var(--menu_item-size-height-sm)}:where([data-cck-theme-name=cocokits] .cck-menu-item__size--md){height:var(--menu_item-size-height-md)}:where([data-cck-theme-name=cocokits] .cck-menu-item__size--lg){height:var(--menu_item-size-height-lg)}:where([data-cck-theme-name=cocokits] .cck-menu-item .cck-svg-icon.cck-svg-icon--default-size){height:var(--icon-size-xs);width:var(--icon-size-xs)}:where([data-cck-theme-name=cocokits] .cck-menu-item .cck-svg-icon.cck-svg-icon--default-color .cck-svg-icon__svg){fill:currentcolor}:where([data-cck-theme-name=cocokits] .cck-option){align-items:center;border-radius:6px;color:var(--color-font-default);display:flex;font:var(--text-sm-regular);gap:var(--option-spacing-item-gap);margin:0 4px;padding:0 var(--option-spacing-item-h-padding)}:where([data-cck-theme-name=cocokits] .cck-option):not(.cck-option--disabled){cursor:pointer}:where([data-cck-theme-name=cocokits] .cck-option--disabled){color:var(--color-disabled-font);opacity:.7;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-option):not(.cck-option--disabled):hover{background-color:var(--option-color-item-hover)}:where([data-cck-theme-name=cocokits] .cck-option .cck-checkbox__input-wrapper){height:var(--checkbox-size-sm);width:var(--checkbox-size-sm)}:where([data-cck-theme-name=cocokits] .cck-option--single.cck-option--selected){font:var(--text-sm-medium)}:where([data-cck-theme-name=cocokits] .cck-option__size--sm){height:var(--option-size-height-sm)}:where([data-cck-theme-name=cocokits] .cck-option__size--md){height:var(--option-size-height-md)}:where([data-cck-theme-name=cocokits] .cck-option__size--lg){height:var(--option-size-height-lg)}:where([data-cck-theme-name=cocokits] .cck-select__options-wrapper){background-color:var(--option-color-overlay-bg);border:1px solid var(--option-color-overlay-border);border-radius:var(--option-size-overlay-radius);height:inherit;margin-top:var(--option-spacing-overlay-margin-top);max-height:inherit;overflow:auto;padding:var(--option-spacing-overlay-h-padding) var(--option-spacing-overlay-v-padding)}:where([data-cck-theme-name=cocokits] .cck-option__content-wrapper){flex:1}:where([data-cck-theme-name=cocokits] .cck-option__selected-checkmark .cck-svg-icon){height:var(--icon-size-sm);width:var(--icon-size-sm)}:where([data-cck-theme-name=cocokits] .cck-option-group){display:flex;flex-direction:column}:where([data-cck-theme-name=cocokits] .cck-option-group--label){align-items:center;color:var(--color-font-default);display:flex;font:var(--text-sm-medium);padding:0 var(--option-spacing-item-h-padding)}:where([data-cck-theme-name=cocokits] .cck-option-group--disabled .cck-option-group--label){color:var(--color-disabled-font);-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-option-group .cck-option){padding:0 calc(var(--option-spacing-item-h-padding)*2)}:where([data-cck-theme-name=cocokits] .cck-option-group__size--sm .cck-option-group--label){height:var(--option-size-height-sm)}:where([data-cck-theme-name=cocokits] .cck-option-group__size--md .cck-option-group--label){height:var(--option-size-height-md)}:where([data-cck-theme-name=cocokits] .cck-option-group__size--lg .cck-option-group--label){height:var(--option-size-height-lg)}:where([data-cck-theme-name=cocokits] .cck-prefix){flex-grow:0}:where([data-cck-theme-name=cocokits] .cck-prefix .cck-svg-icon.cck-svg-icon--default-size){height:var(--icon-size-xs);width:var(--icon-size-xs)}:where([data-cck-theme-name=cocokits] .cck-prefix .cck-svg-icon.cck-svg-icon--default-color .cck-svg-icon__svg){fill:var(--form_field-color-icon)}:where([data-cck-theme-name=cocokits] .cck-radio-button__wrapper){align-items:center;display:inline-flex;vertical-align:middle}:where([data-cck-theme-name=cocokits] .cck-radio-button__input-wrapper){box-sizing:content-box;cursor:pointer;display:inline-block;flex:0 0 auto;position:relative;will-change:opacity,transform,border-color,color}:where([data-cck-theme-name=cocokits] .cck-radio-button__size--sm .cck-radio-button__input-wrapper){height:var(--radio-size-sm);padding:var(--radio-spacing-padding-input-sm);width:var(--radio-size-sm)}:where([data-cck-theme-name=cocokits] .cck-radio-button__size--md .cck-radio-button__input-wrapper){height:var(--radio-size-md);padding:var(--radio-spacing-padding-input-md);width:var(--radio-size-md)}:where([data-cck-theme-name=cocokits] .cck-radio-button__size--lg .cck-radio-button__input-wrapper){height:var(--radio-size-lg);padding:var(--radio-spacing-padding-input-lg);width:var(--radio-size-lg)}:where([data-cck-theme-name=cocokits] .cck-radio-button__input){cursor:inherit;height:100%;left:0;margin:0;opacity:0;padding:0;position:absolute;right:0;top:0;width:100%;z-index:1}:where([data-cck-theme-name=cocokits] .cck-radio-button__background){box-sizing:border-box;display:inline-block;height:100%;position:relative;width:100%}:where([data-cck-theme-name=cocokits] .cck-radio-button__background--outer-circle){border-color:var(--color-m-contrast-default);border-radius:50%;border-style:solid;border-width:1px;box-sizing:border-box;height:100%;left:0;position:absolute;top:0;transition:border-color 90ms cubic-bezier(0,0,.2,1);width:100%}:where([data-cck-theme-name=cocokits] .cck-radio-button--checked .cck-radio-button__background--outer-circle){border-width:2px}:where([data-cck-theme-name=cocokits] .cck-radio-button--disabled.cck-radio-button--unchecked .cck-radio-button__background--outer-circle){background-color:var(--color-disabled-surface);border-color:var(--color-disabled-border)}:where([data-cck-theme-name=cocokits] .cck-radio-button--disabled.cck-radio-button--checked .cck-radio-button__background--outer-circle){border-color:var(--color-disabled-border)}:where([data-cck-theme-name=cocokits] .cck-radio-button__color--brand.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--outer-circle){border-color:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-radio-button__color--info.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--outer-circle){border-color:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-radio-button__color--warning.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--outer-circle){border-color:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-radio-button__color--error.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--outer-circle){border-color:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-radio-button__background--inner-circle){border-radius:50%;box-sizing:border-box;height:100%;left:0;position:absolute;top:0;transform:scale(0);transition:transform 90ms cubic-bezier(.4,0,.6,1),background-color 90ms cubic-bezier(.4,0,.6,1);width:100%}:where([data-cck-theme-name=cocokits] .cck-radio-button--checked .cck-radio-button__background--inner-circle){transform:scale(.5);transition:transform 90ms cubic-bezier(0,0,.2,1),border-color 90ms cubic-bezier(0,0,.2,1)}:where([data-cck-theme-name=cocokits] .cck-radio-button--disabled.cck-radio-button--checked .cck-radio-button__background--inner-circle){background-color:var(--color-disabled-border)}:where([data-cck-theme-name=cocokits] .cck-radio-button__color--brand.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--inner-circle){background-color:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-radio-button__color--info.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--inner-circle){background-color:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-radio-button__color--warning.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--inner-circle){background-color:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-radio-button__color--error.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--inner-circle){background-color:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-radio-button__label){color:var(--color-font-default);cursor:pointer;font:var(--text-sm-regular);margin-left:0;margin-right:auto;order:0;padding-left:4px;padding-right:0;white-space:nowrap}:where([data-cck-theme-name=cocokits] .cck-radio-button--disabled .cck-radio-button__label){color:var(--color-disabled-font)}:where([data-cck-theme-name=cocokits] .cck-radio-button--disabled .cck-radio-button__input-wrapper),:where([data-cck-theme-name=cocokits] .cck-radio-button--disabled .cck-radio-button__label){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-radio-group){align-items:flex-start;display:flex}:where([data-cck-theme-name=cocokits] .cck-radio-group__row){flex-direction:row;gap:24px}:where([data-cck-theme-name=cocokits] .cck-radio-group__column){flex-direction:column}:where([data-cck-theme-name=cocokits] .cck-select){align-items:center;border-radius:6px;color:var(--color-font-default);cursor:pointer;display:flex;font:var(--text-sm-regular)}:where([data-cck-theme-name=cocokits] .cck-select.cck-select--disabled){cursor:auto;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-select__placeholder){color:var(--color-font-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-select__trigger-wrapper){color:currentcolor;flex:1;overflow:hidden;padding-right:8px;text-align:start}:where([data-cck-theme-name=cocokits] .cck-select__trigger-value){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:where([data-cck-theme-name=cocokits] .cck-select__overlay .cck-overlay__backdrop){background-color:transparent}:where([data-cck-theme-name=cocokits] .cck-select__dropdown-icon-wrapper .cck-svg-icon){height:var(--icon-size-sm);width:var(--icon-size-sm)}:where([data-cck-theme-name=cocokits] .cck-suffix){flex-grow:0}:where([data-cck-theme-name=cocokits] .cck-suffix .cck-svg-icon.cck-svg-icon--default-size){height:var(--icon-size-xs);width:var(--icon-size-xs)}:where([data-cck-theme-name=cocokits] .cck-suffix .cck-svg-icon.cck-svg-icon--default-color .cck-svg-icon__svg){fill:var(--form_field-color-icon-light)}:where([data-cck-theme-name=cocokits] .cck-textarea){background-color:transparent;border:none;color:var(--color-font-default);font:var(--text-md-regular);min-height:24px;min-width:100%;outline:none;padding:0;scrollbar-color:var(--form_field-color-border) transparent}:where([data-cck-theme-name=cocokits] .cck-textarea::-moz-placeholder){color:var(--color-font-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-textarea::placeholder){color:var(--color-font-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-textarea::-webkit-resizer){background-image:url('data:image/svg+xml;utf8,');height:16px;width:16px}:where([data-cck-theme-name=cocokits] .cck-textarea):disabled{cursor:default;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-toggle){-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-toggle):not(.cck-toggle--disabled){cursor:pointer}:where([data-cck-theme-name=cocokits] .cck-toggle__label){align-items:center;color:var(--color-font-default);display:flex;font:var(--text-sm-regular);gap:var(--toggle-spacing-gap)}:where([data-cck-theme-name=cocokits] .cck-toggle__label):not(.cck-toggle--disabled){cursor:pointer}:where([data-cck-theme-name=cocokits] .cck-toggle--label-before .cck-toggle__label){flex-direction:row-reverse}:where([data-cck-theme-name=cocokits] .cck-toggle__slider-wrapper){border-radius:100px;position:relative;width:var(--toggle-size-width-sm)}:where([data-cck-theme-name=cocokits] .cck-toggle__input){cursor:pointer;height:100%;margin:0;opacity:0;padding:0;position:relative;width:100%;z-index:3}:where([data-cck-theme-name=cocokits] .cck-toggle__thumb){background-color:var(--toggle-color-thumb);border:2px solid var(--toggle-color-thumb-border);border-radius:100px;left:0;position:absolute;top:50%;transform:translateY(-50%);transition:all .3s ease,left .3s cubic-bezier(.18,.89,.35,1.15);z-index:2}:where([data-cck-theme-name=cocokits] .cck-toggle__backdrop){background-color:var(--toggle-color-backdrop-unselected);border-radius:100px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:all .3s ease;z-index:1}:where([data-cck-theme-name=cocokits] .cck-toggle--disabled){color:var(--color-disabled-font);cursor:default;pointer-events:none}:where([data-cck-theme-name=cocokits] .cck-toggle--disabled .cck-toggle__thumb){background-color:var(--toggle-color-thumb-disabled)}:where([data-cck-theme-name=cocokits] .cck-toggle--disabled .cck-toggle__backdrop){background-color:var(--toggle-color-backdrop-disabled)}:where([data-cck-theme-name=cocokits] .cck-toggle--checked .cck-toggle__thumb){left:100%;transform:translate(-100%,-50%)}:where([data-cck-theme-name=cocokits] .cck-toggle--checked:active .cck-toggle__thumb){margin-left:calc(var(--toggle-size-bounce)/2*-1)}:where([data-cck-theme-name=cocokits] .cck-toggle--unchecked:active .cck-toggle__thumb){margin-left:calc(var(--toggle-size-bounce)/2)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--brand:not(.cck-toggle--disabled).cck-toggle--checked .cck-toggle__backdrop){background-color:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--brand:not(.cck-toggle--disabled):hover .cck-toggle__thumb){border-color:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--info:not(.cck-toggle--disabled).cck-toggle--checked .cck-toggle__backdrop){background-color:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--info:not(.cck-toggle--disabled):hover .cck-toggle__thumb){border-color:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--warning:not(.cck-toggle--disabled).cck-toggle--checked .cck-toggle__backdrop){background-color:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--warning:not(.cck-toggle--disabled):hover .cck-toggle__thumb){border-color:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--error:not(.cck-toggle--disabled).cck-toggle--checked .cck-toggle__backdrop){background-color:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--error:not(.cck-toggle--disabled):hover .cck-toggle__thumb){border-color:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--h-contrast:not(.cck-toggle--disabled).cck-toggle--checked .cck-toggle__backdrop){background-color:var(--color-h-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--h-contrast:not(.cck-toggle--disabled):hover .cck-toggle__thumb){border-color:var(--color-h-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__size--sm .cck-toggle__slider-wrapper){width:var(--toggle-size-width-sm)}:where([data-cck-theme-name=cocokits] .cck-toggle__size--sm .cck-toggle__thumb){height:var(--toggle-size-thumb-sm);width:var(--toggle-size-thumb-sm)}:where([data-cck-theme-name=cocokits] .cck-toggle__size--sm .cck-toggle__backdrop){height:var(--toggle-size-backdrop-sm);width:calc(var(--toggle-size-width-sm) - var(--toggle-size-thumb-sm))}:where([data-cck-theme-name=cocokits] .cck-toggle__size--sm:active .cck-toggle__thumb){width:calc(var(--toggle-size-thumb-sm) + var(--toggle-size-bounce))}:where([data-cck-theme-name=cocokits] .cck-toggle__size--md .cck-toggle__slider-wrapper){width:var(--toggle-size-width-md)}:where([data-cck-theme-name=cocokits] .cck-toggle__size--md .cck-toggle__backdrop){height:var(--toggle-size-backdrop-md);width:calc(var(--toggle-size-width-md) - var(--toggle-size-thumb-md))}:where([data-cck-theme-name=cocokits] .cck-toggle__size--md .cck-toggle__thumb){height:var(--toggle-size-thumb-md);width:var(--toggle-size-thumb-md)}:where([data-cck-theme-name=cocokits] .cck-toggle__size--md:active .cck-toggle__thumb){width:calc(var(--toggle-size-thumb-md) + var(--toggle-size-bounce))}:where([data-cck-theme-name=cocokits] .cck-toggle__size--lg .cck-toggle__slider-wrapper){width:var(--toggle-size-width-lg)}:where([data-cck-theme-name=cocokits] .cck-toggle__size--lg .cck-toggle__backdrop){height:var(--toggle-size-backdrop-lg);width:calc(var(--toggle-size-width-lg) - var(--toggle-size-thumb-lg))}:where([data-cck-theme-name=cocokits] .cck-toggle__size--lg .cck-toggle__thumb){height:var(--toggle-size-thumb-lg);width:var(--toggle-size-thumb-lg)}:where([data-cck-theme-name=cocokits] .cck-toggle__size--lg:active .cck-toggle__thumb){width:calc(var(--toggle-size-thumb-lg) + var(--toggle-size-bounce))}:where([data-cck-theme-name=cocokits] .cck-trailing){align-items:center;border:1px solid var(--form_field-color-border);border-left:none;color:var(--color-font-alpha-7);display:flex;flex-grow:0;gap:var(--form_field-spacing-trailing-gap);justify-content:center;padding:0 var(--form_field-spacing-input-wrapper-h-padding);-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-trailing .cck-select){color:currentcolor;font:inherit}:where([data-cck-theme-name=cocokits] .cck-trailing__regular){font:var(--text-sm-regular)}:where([data-cck-theme-name=cocokits] .cck-trailing__medium){font:var(--text-sm-medium)}:where([data-cck-theme-name=cocokits] .cck-trailing--clickable){cursor:pointer;transition:background-color .1s}:where([data-cck-theme-name=cocokits] .cck-trailing .cck-svg-icon.cck-svg-icon--default-size){height:var(--icon-size-xs);width:var(--icon-size-xs)}:where([data-cck-theme-name=cocokits] .cck-trailing__color--transparent){background-color:transparent}:where([data-cck-theme-name=cocokits] .cck-trailing__color--transparent.cck-trailing--clickable):active{background-color:var(--color-surface-inverse-alpha-4)}:where([data-cck-theme-name=cocokits] .cck-trailing__color--transparent.cck-trailing--clickable):hover:not(:active){background-color:var(--color-surface-inverse-alpha-1)}:where([data-cck-theme-name=cocokits] .cck-trailing__color--grey){background-color:var(--color-surface-inverse-alpha-1)}:where([data-cck-theme-name=cocokits] .cck-trailing__color--grey.cck-trailing--clickable):active{background-color:var(--color-surface-inverse-alpha-4)}:where([data-cck-theme-name=cocokits] .cck-trailing__color--grey.cck-trailing--clickable):hover:not(:active){background-color:var(--color-surface-inverse-alpha-3)}:where([data-cck-theme-name=cocokits] .cck-trailing .cck-svg-icon.cck-svg-icon--default-color .cck-svg-icon__svg){fill:var(--form_field-color-icon)}:where([data-cck-theme-name=cocokits] .cck-avatar){align-items:center;border-radius:50%;display:flex;justify-content:center;overflow:hidden}:where([data-cck-theme-name=cocokits] .cck-avatar__fallback-image),:where([data-cck-theme-name=cocokits] .cck-avatar__image),:where([data-cck-theme-name=cocokits] .cck-avatar__placeholder-image){border-radius:inherit;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}:where([data-cck-theme-name=cocokits] .cck-avatar--with-label){background-color:var(--color-brand-light);color:var(--color-font-default)}:where([data-cck-theme-name=cocokits] .cck-avatar--clickable){cursor:pointer}:where([data-cck-theme-name=cocokits] .cck-avatar__size--xs){height:var(--size-28);width:var(--size-28)}:where([data-cck-theme-name=cocokits] .cck-avatar__size--xs.cck-avatar--with-label){font:var(--text-xs-semibold)}:where([data-cck-theme-name=cocokits] .cck-avatar__size--sm){height:var(--size-32);width:var(--size-32)}:where([data-cck-theme-name=cocokits] .cck-avatar__size--sm.cck-avatar--with-label){font:var(--text-sm-semibold)}:where([data-cck-theme-name=cocokits] .cck-avatar__size--md){height:var(--size-40);width:var(--size-40)}:where([data-cck-theme-name=cocokits] .cck-avatar__size--md.cck-avatar--with-label){font:var(--text-md-semibold)}:where([data-cck-theme-name=cocokits] .cck-avatar__size--lg){height:var(--size-48);width:var(--size-48)}:where([data-cck-theme-name=cocokits] .cck-avatar__size--lg.cck-avatar--with-label){font:var(--text-lg-semibold)}:where([data-cck-theme-name=cocokits] .cck-avatar-group){display:flex}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-left){direction:rtl}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-left.cck-avatar-group__size--xs .cck-avatar):not(:last-of-type){margin-left:-10px}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-left.cck-avatar-group__size--sm .cck-avatar):not(:last-of-type){margin-left:-10px}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-left.cck-avatar-group__size--md .cck-avatar):not(:last-of-type){margin-left:-14px}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-left.cck-avatar-group__size--lg .cck-avatar):not(:last-of-type){margin-left:-16px}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-right.cck-avatar-group__size--xs .cck-avatar):not(:first-of-type){margin-left:-10px}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-right.cck-avatar-group__size--sm .cck-avatar):not(:first-of-type){margin-left:-10px}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-right.cck-avatar-group__size--md .cck-avatar):not(:first-of-type){margin-left:-14px}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-right.cck-avatar-group__size--lg .cck-avatar):not(:first-of-type){margin-left:-16px}:where([data-cck-theme-name=cocokits] .cck-avatar-group .cck-avatar){border:2px solid var(--color-border-light)}:where([data-cck-theme-name=cocokits] .cck-avatar-label){align-items:center;display:flex}:where([data-cck-theme-name=cocokits] .cck-avatar-label__title){color:var(--color-font-default)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__description){color:var(--color-font-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__label-wrapper){display:flex}:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-right){flex-direction:row-reverse}:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-right .cck-avatar-label__label-wrapper){text-align:right}:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-left){flex-direction:row}:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-top){flex-direction:column}:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-bottom){flex-direction:column-reverse}:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-bottom.cck-avatar-label--label-vertical .cck-avatar-label__label-wrapper),:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-top.cck-avatar-label--label-vertical .cck-avatar-label__label-wrapper){align-items:center}:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-left.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper),:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-right.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){align-items:center}:where([data-cck-theme-name=cocokits] .cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){align-items:center;flex-direction:row}:where([data-cck-theme-name=cocokits] .cck-avatar-label--label-vertical .cck-avatar-label__label-wrapper){flex-direction:column;justify-content:center}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--xs){gap:var(--size-12)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--xs .cck-avatar-label__label-wrapper){font:var(--text-xs-medium)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--xs.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){gap:var(--size-12)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--sm){gap:var(--size-12)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--sm .cck-avatar-label__label-wrapper){font:var(--text-sm-medium)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--sm.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){gap:var(--size-12)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--md){gap:var(--size-12)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--md .cck-avatar-label__label-wrapper){font:var(--text-md-medium)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--md.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){gap:var(--size-12)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--lg){gap:var(--size-20)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--lg .cck-avatar-label__label-wrapper){font:var(--text-md-medium)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--lg.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){gap:var(--size-20)}:where([data-cck-theme-name=cocokits] .cck-accordion){display:flex;flex-direction:column}:where([data-cck-theme-name=cocokits] .cck-accordion__default.cck-accordion__size--sm){gap:var(--size-12)}:where([data-cck-theme-name=cocokits] .cck-accordion__default.cck-accordion__size--md){gap:var(--size-20)}:where([data-cck-theme-name=cocokits] .cck-accordion__group){border:1px solid var(--color-border-default);border-radius:6px}:where([data-cck-theme-name=cocokits] .cck-accordion-header--trigger-icon>.cck-accordion-header__icon-btn):hover{background-color:var(--color-h-contrast-alpha-1)}:where([data-cck-theme-name=cocokits] .cck-accordion-header--trigger-header){cursor:pointer}:where([data-cck-theme-name=cocokits] .cck-accordion-header--trigger-header>.cck-accordion-header__icon-btn):hover{background-color:transparent}:where([data-cck-theme-name=cocokits] .cck-accordion-header){align-items:center;color:var(--color-font-default);display:flex}:where([data-cck-theme-name=cocokits] .cck-accordion-header .cck-svg-icon.cck-svg-icon--default-color){fill:var(--color-font-default)}:where([data-cck-theme-name=cocokits] .cck-accordion-header>.cck-accordion-header__icon-btn){background-color:transparent;fill:var(--color-font-default);align-items:center;border:none;border-radius:4px;cursor:pointer;display:flex;justify-self:center;outline:none}:where([data-cck-theme-name=cocokits] .cck-accordion-header--icon-right>.cck-accordion-header__icon-btn){margin-left:auto}:where([data-cck-theme-name=cocokits] .cck-accordion-header--icon-left){flex-direction:row-reverse;justify-content:flex-end}:where([data-cck-theme-name=cocokits] .cck-accordion__size--sm>.cck-accordion-panel>.cck-accordion-header){height:var(--size-48)}:where([data-cck-theme-name=cocokits] .cck-accordion__size--sm>.cck-accordion-panel>.cck-accordion-header>.cck-accordion-header__icon-btn){height:36px;width:36px}:where([data-cck-theme-name=cocokits] .cck-accordion__size--md>.cck-accordion-panel .cck-accordion-header){height:var(--size-56)}:where([data-cck-theme-name=cocokits] .cck-accordion__size--md>.cck-accordion-panel .cck-accordion-header>.cck-accordion-header__icon-btn){height:36px;width:36px}:where([data-cck-theme-name=cocokits] .cck-accordion-panel>.cck-accordion-header){font:var(--text-md-medium)}:where([data-cck-theme-name=cocokits] .cck-accordion-panel>.cck-accordion-header.cck-accordion-header--icon-right){padding-left:var(--size-20);padding-right:calc(var(--size-20) - 10px)}:where([data-cck-theme-name=cocokits] .cck-accordion-panel>.cck-accordion-header.cck-accordion-header--icon-left){padding-left:calc(var(--size-20) - 10px);padding-right:var(--size-20)}:where([data-cck-theme-name=cocokits] .cck-accordion__default>.cck-accordion-panel--collapsed>.cck-accordion-header),:where([data-cck-theme-name=cocokits] .cck-accordion__group>.cck-accordion-panel--collapsed>.cck-accordion-header){background-color:var(--color-h-contrast-alpha-2)}:where([data-cck-theme-name=cocokits] .cck-accordion__basic>.cck-accordion-panel>.cck-accordion-header--trigger-header):hover{background-color:var(--color-h-contrast-alpha-2)}:where([data-cck-theme-name=cocokits] .cck-accordion-panel--disabled){color:var(--color-disabled-font);opacity:.5}:where([data-cck-theme-name=cocokits] .cck-accordion-panel--disabled>.cck-accordion-header){color:currentcolor}:where([data-cck-theme-name=cocokits] .cck-accordion-panel--disabled>.cck-accordion-header.cck-accordion-header--trigger-header){cursor:not-allowed}:where([data-cck-theme-name=cocokits] .cck-accordion-panel--disabled>.cck-accordion-header>.cck-accordion-header__icon-btn){display:none}:where([data-cck-theme-name=cocokits] .cck-accordion-panel){color:var(--color-font-default);font:var(--text-md-regular);overflow:hidden;transition:padding-bottom .3s}:where([data-cck-theme-name=cocokits] .cck-accordion--instant-animation>.cck-accordion-panel){transition:none}:where([data-cck-theme-name=cocokits] .cck-accordion-panel--collapsed){padding-bottom:0}:where([data-cck-theme-name=cocokits] .cck-accordion__size--sm>.cck-accordion-panel.cck-accordion-panel--expanded){padding-bottom:var(--size-20)}:where([data-cck-theme-name=cocokits] .cck-accordion__size--sm>.cck-accordion-panel>.cck-accordion-panel__content-wrapper){padding-left:var(--size-20);padding-right:var(--size-20)}:where([data-cck-theme-name=cocokits] .cck-accordion__size--md>.cck-accordion-panel.cck-accordion-panel--expanded){padding-bottom:var(--size-20)}:where([data-cck-theme-name=cocokits] .cck-accordion__size--md>.cck-accordion-panel>.cck-accordion-panel__content-wrapper){padding-left:var(--size-20);padding-right:var(--size-20)}:where([data-cck-theme-name=cocokits] .cck-accordion__default>.cck-accordion-panel){border:1px solid var(--color-border-default);border-radius:6px}:where([data-cck-theme-name=cocokits] .cck-accordion__basic>.cck-accordion-panel):not(:last-of-type),:where([data-cck-theme-name=cocokits] .cck-accordion__group>.cck-accordion-panel):not(:last-of-type){border-bottom:1px solid var(--color-border-default)}:where([data-cck-theme-name=frames-x] .cck-button){align-items:center;border:none;border-radius:var(--radi-6);box-sizing:border-box;cursor:pointer;display:inline-flex;justify-content:center;margin:0;outline:transparent;transition:all .1s}:where([data-cck-theme-name=frames-x] .cck-button):focus-visible{box-shadow:0 0 0 3px var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-button .cck-svg-icon--default-color .cck-svg-icon__svg){fill:currentcolor}:where([data-cck-theme-name=frames-x] .cck-button__backdrop){display:none}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--brand){background-color:var(--state-brand-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--brand):hover{background-color:var(--state-brand-hover)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--brand):active{background-color:var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--brand):disabled{background-color:var(--base-fill-1);color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--highlight){background-color:var(--state-highlight-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--highlight):hover{background-color:var(--state-highlight-hover)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--highlight):active{background-color:var(--state-highlight-selected)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--highlight):disabled{background-color:var(--base-fill-1);color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--success){background-color:var(--state-success-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--success):hover{background-color:var(--state-success-hover)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--success):active{background-color:var(--state-success-selected)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--success):disabled{background-color:var(--base-fill-1);color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--danger){background-color:var(--state-danger-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--danger):hover{background-color:var(--state-danger-hover)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--danger):active{background-color:var(--state-danger-selected)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--danger):disabled{background-color:var(--base-fill-1);color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__secondary){background-color:var(--base-surface-2);border:1px solid var(--base-border);color:var(--text-dark-primary);outline:1px solid transparent}:where([data-cck-theme-name=frames-x] .cck-button__secondary):hover{background-color:var(--base-fill-2);border:1px solid var(--base-fill-2)}:where([data-cck-theme-name=frames-x] .cck-button__secondary):active{background-color:var(--base-fill-1);border:1px solid var(--base-border)}:where([data-cck-theme-name=frames-x] .cck-button__secondary):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__ghost){background-color:var(--base-surface-1);outline:1px solid transparent}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--brand){border:1px solid var(--state-brand-active);color:var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--brand):hover{border:1px solid var(--state-brand-hover);outline:1px solid var(--state-brand-hover)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--brand):active{border:1px solid var(--state-brand-selected);outline:1px solid var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--brand):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--highlight){border:1px solid var(--state-highlight-active);color:var(--state-highlight-active)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--highlight):hover{border:1px solid var(--state-highlight-hover);outline:1px solid var(--state-highlight-hover)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--highlight):active{border:1px solid var(--state-highlight-selected);outline:1px solid var(--state-highlight-selected)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--highlight):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--success){border:1px solid var(--state-success-active);color:var(--state-success-active)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--success):hover{border:1px solid var(--state-success-hover);outline:1px solid var(--state-success-hover)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--success):active{border:1px solid var(--state-success-selected);outline:1px solid var(--state-success-selected)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--success):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--danger){border:1px solid var(--state-danger-active);color:var(--state-danger-active)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--danger):hover{border:1px solid var(--state-danger-hover);outline:1px solid var(--state-danger-hover)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--danger):active{border:1px solid var(--state-danger-selected);outline:1px solid var(--state-danger-selected)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--danger):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__size--sm){font:var(--text-sm-font-semibold);gap:var(--spacing-3);height:36px;padding:var(--spacing-0) var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-button__size--md){font:var(--text-base-font-semibold);gap:var(--spacing-5);height:44px;padding:var(--spacing-0) var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-button__size--lg){font:var(--text-lg-font-semibold);gap:var(--spacing-7);height:44px;padding:var(--spacing-0) var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-button__size--xl){font:var(--text-xl-font-semibold);gap:var(--spacing-7);height:56px;padding:var(--spacing-0) var(--spacing-10)}:where([data-cck-theme-name=frames-x] .cck-checkbox){display:flex;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-checkbox__wrapper){align-items:center;display:inline-flex;vertical-align:middle}:where([data-cck-theme-name=frames-x] .cck-checkbox__input-wrapper){box-sizing:content-box;cursor:pointer;display:inline-block;flex-shrink:0;line-height:0;position:relative;white-space:nowrap}:where([data-cck-theme-name=frames-x] .cck-checkbox__input){cursor:inherit;height:100%;left:0;margin:0;opacity:0;padding:0;position:absolute;right:0;top:0;width:100%}:where([data-cck-theme-name=frames-x] .cck-checkbox__input:focus-visible~.cck-checkbox__background){border:2px solid var(--state-brand-selected);box-shadow:0 0 0 1px var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-checkbox__background){align-items:center;background-color:var(--base-fill-1);border:2px solid var(--base-border);border-radius:var(--radi-4);box-sizing:border-box;display:flex;height:100%;justify-content:center;pointer-events:none;position:absolute;transition:background-color 90ms cubic-bezier(.4,0,.6,1),border-color 90ms cubic-bezier(.4,0,.6,1);width:100%;will-change:background-color,outline-color}:where([data-cck-theme-name=frames-x] .cck-checkbox.cck-checkbox--disabled .cck-checkbox__background){background-color:var(--base-disabled);border:2px solid transparent}:where([data-cck-theme-name=frames-x] .cck-checkbox.cck-checkbox--disabled .cck-checkbox__label){color:var(--base-disabled)}:where([data-cck-theme-name=frames-x] .cck-checkbox.cck-checkbox--disabled *){cursor:default}:where([data-cck-theme-name=frames-x] .cck-checkbox--checked .cck-checkbox__background){background-color:var(--state-brand-active);border:2px solid var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-checkbox--checked .cck-checkbox__checkmark){opacity:1}:where([data-cck-theme-name=frames-x] .cck-checkbox--indeterminate .cck-checkbox__background){background-color:var(--state-brand-active);border:2px solid var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-checkbox--indeterminate .cck-checkbox__checkmark){opacity:0;transform:rotate(45deg);transition:opacity 90ms cubic-bezier(.4,0,.6,1),transform 90ms cubic-bezier(.4,0,.6,1)}:where([data-cck-theme-name=frames-x] .cck-checkbox--indeterminate .cck-checkbox__mixedmark){opacity:1;transform:scaleX(1) rotate(0deg)}:where([data-cck-theme-name=frames-x] .cck-checkbox__mixedmark){border:2px solid #fff;border-radius:100px;height:0;margin:2px;opacity:0;transform:scaleX(0) rotate(0deg);transition:opacity 90ms cubic-bezier(.4,0,.6,1),transform 90ms cubic-bezier(.4,0,.6,1);width:100%}:where([data-cck-theme-name=frames-x] .cck-checkbox__checkmark){color:#fff;inset:0;opacity:0;padding:2px;position:absolute;transition:opacity .18s cubic-bezier(.4,0,.6,1);width:100%}:where([data-cck-theme-name=frames-x] .cck-checkbox__checkmark-path){fill:currentcolor}:where([data-cck-theme-name=frames-x] .cck-checkbox__label){color:var(--text-dark-primary);cursor:pointer;margin-left:0;margin-right:auto;order:0;padding-left:0;padding-right:0;text-align:left;white-space:nowrap}:where([data-cck-theme-name=frames-x] .cck-checkbox__label):empty{display:none}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--sm .cck-checkbox__wrapper){gap:var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--sm .cck-checkbox__input-wrapper){height:22px;width:22px}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--sm .cck-checkbox__label){font:var(--text-sm-font-medium)}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--md .cck-checkbox__wrapper){gap:var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--md .cck-checkbox__input-wrapper){height:24px;width:24px}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--md .cck-checkbox__label){font:var(--text-base-font-medium)}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--lg .cck-checkbox__wrapper){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--lg .cck-checkbox__input-wrapper){height:32px;width:32px}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--lg .cck-checkbox__label){font:var(--text-lg-font-medium)}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--xl .cck-checkbox__wrapper){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--xl .cck-checkbox__input-wrapper){height:32px;width:32px}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--xl .cck-checkbox__label){font:var(--text-xl-font-medium)}:where([data-cck-theme-name=frames-x] .cck-chip){align-items:center;background-color:var(--base-surface-2);border:1px solid var(--base-border);border-radius:var(--radi-5);color:var(--text-dark-primary);cursor:default;display:flex;transition:all .1s}:where([data-cck-theme-name=frames-x] .cck-chip--disabled){background-color:var(--base-fill-1);border:1px solid transparent;color:var(--base-disabled);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-chip__content-wrapper){align-items:center;display:flex;justify-content:center}:where([data-cck-theme-name=frames-x] .cck-chip__remove-icon-wrapper){align-items:center;display:flex;flex-shrink:0;justify-content:center}:where([data-cck-theme-name=frames-x] .cck-chip__remove-icon-wrapper .cck-icon-button){background-color:transparent;border-radius:50%;color:var(--base-fill-4);height:24px;padding:0;width:24px}:where([data-cck-theme-name=frames-x] .cck-chip__remove-icon-wrapper .cck-icon-button):hover{background-color:var(--base-fill-1)}:where([data-cck-theme-name=frames-x] .cck-chip__remove-icon-wrapper .cck-icon-button .cck-svg-icon){height:100%;width:100%}:where([data-cck-theme-name=frames-x] .cck-chip__size--sm){font:var(--text-xs-font-medium);gap:var(--spacing-4);height:26px;padding:0 var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-chip__size--sm.cck-chip--removable){padding:0 var(--spacing-6) 0 var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-chip__size--md){font:var(--text-base-font-medium);gap:var(--spacing-4);height:34px;padding:0 var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-chip__size--md.cck-chip--removable){padding:0 var(--spacing-7) 0 var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-chip__size--lg){font:var(--text-lg-font-medium);gap:var(--spacing-6);height:44px;padding:0 var(--spacing-9)}:where([data-cck-theme-name=frames-x] .cck-chip__size--lg.cck-chip--removable){padding:0 var(--spacing-8) 0 var(--spacing-9)}:where([data-cck-theme-name=frames-x] .cck-chip-list){align-items:stretch;display:flex;flex-wrap:wrap;justify-content:flex-start}:where([data-cck-theme-name=frames-x] .cck-chip-list__input){background:transparent;border:none;color:var(--text-dark-primary);flex:1;font:var(--text-base-font-medium);outline:none}:where([data-cck-theme-name=frames-x] .cck-chip-list__input::-moz-placeholder){color:var(--text-dark-tertiary);-moz-transition:color .1s ease-in;transition:color .1s ease-in}:where([data-cck-theme-name=frames-x] .cck-chip-list__input::placeholder){color:var(--text-dark-tertiary);transition:color .1s ease-in}:where([data-cck-theme-name=frames-x] .cck-chip-list__input::-moz-placeholder):not(:focus){color:transparent}:where([data-cck-theme-name=frames-x] .cck-chip-list__input::placeholder):not(:focus){color:transparent}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--sm){gap:6px}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--sm .cck-chip-list__input){font:var(--text-xs-font-medium);height:26px;margin-left:var(--spacing-5)}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--sm .cck-chip-list__input):first-child{margin-left:calc(var(--spacing-6) - 4px)}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--md){gap:6px}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--md .cck-chip-list__input){font:var(--text-base-font-medium);height:34px;margin-left:var(--spacing-6)}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--md .cck-chip-list__input):first-child{margin-left:calc(var(--spacing-7) - 4px)}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--lg){gap:6px}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--lg .cck-chip-list__input){font:var(--text-lg-font-medium);height:44px;margin-left:var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--lg .cck-chip-list__input):first-child{margin-left:calc(var(--spacing-7) - 6px)}:where([data-cck-theme-name=frames-x] *){box-sizing:border-box}:where([data-cck-theme-name=frames-x] .cck-divider){background-color:var(--base-border);display:block;flex-shrink:0}:where([data-cck-theme-name=frames-x] .cck-divider__horizontal){margin:4px 0;width:100%}:where([data-cck-theme-name=frames-x] .cck-divider__horizontal.cck-divider__size--sm){height:1px}:where([data-cck-theme-name=frames-x] .cck-divider__horizontal.cck-divider__size--md){height:2px;width:100%}:where([data-cck-theme-name=frames-x] .cck-divider__vertical){height:100%;margin:0 4px}:where([data-cck-theme-name=frames-x] .cck-divider__vertical.cck-divider__size--sm){width:1px}:where([data-cck-theme-name=frames-x] .cck-divider__vertical.cck-divider__size--md){width:2px}:where([data-cck-theme-name=frames-x] .cck-error){color:var(--state-danger-active);display:flex;font:var(--text-sm-font-medium);gap:6px}:where([data-cck-theme-name=frames-x] .cck-error .cck-svg-icon--default-color .cck-svg-icon__svg){fill:currentcolor}:where([data-cck-theme-name=frames-x] .cck-form-field){align-items:flex-start;display:flex;flex-direction:column;gap:10px;min-width:100px}:where([data-cck-theme-name=frames-x] .cck-form-field .cck-select){flex:1;height:100%;width:100%}:where([data-cck-theme-name=frames-x] .cck-form-field .cck-input){flex:1;width:100%}:where([data-cck-theme-name=frames-x] .cck-form-field--error .cck-form-field__wrapper){border:1px solid var(--state-danger-active);outline:1px solid var(--state-danger-active)}:where([data-cck-theme-name=frames-x] .cck-form-field--focused .cck-form-field__wrapper){background-color:var(--base-surface-2);border:1px solid var(--state-brand-active);outline:1px solid var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-form-field--disabled .cck-form-field__wrapper){background-color:var(--base-fill-1);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-form-field__wrapper){align-items:stretch;background-color:var(--base-surface-1);border:1px solid var(--base-border);border-radius:var(--radi-6);display:flex;flex-direction:row;outline:1px solid transparent;overflow:hidden;width:100%}:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm.cck-form-field--with-input .cck-form-field__wrapper),:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm.cck-form-field--with-select .cck-form-field__wrapper){height:36px}:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm.cck-form-field--with-input .cck-form-field__input-wrapper),:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm.cck-form-field--with-select .cck-form-field__input-wrapper){padding:0 var(--spacing-6) 0 var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm .cck-form-field--with-textarea .cck-form-field__input-wrapper){padding:var(--spacing-6) var(--spacing-6) var(--spacing-6) var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm.cck-form-field--with-chip-list .cck-form-field__input-wrapper){padding:4px}:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm .cck-input),:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm .cck-leading),:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm .cck-select),:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm .cck-textarea),:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm .cck-trailing){font:var(--text-sm-font-medium)}:where([data-cck-theme-name=frames-x] .cck-form-field__size--md.cck-form-field--with-input .cck-form-field__wrapper),:where([data-cck-theme-name=frames-x] .cck-form-field__size--md.cck-form-field--with-select .cck-form-field__wrapper){height:44px}:where([data-cck-theme-name=frames-x] .cck-form-field__size--md.cck-form-field--with-input .cck-form-field__input-wrapper),:where([data-cck-theme-name=frames-x] .cck-form-field__size--md.cck-form-field--with-select .cck-form-field__input-wrapper){padding:0 var(--spacing-7) 0 var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-form-field__size--md .cck-form-field--with-textarea .cck-form-field__input-wrapper){padding:var(--spacing-7) var(--spacing-7) var(--spacing-7) var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-form-field__size--md.cck-form-field--with-chip-list .cck-form-field__input-wrapper){padding:4px}:where([data-cck-theme-name=frames-x] .cck-form-field__size--md .cck-input),:where([data-cck-theme-name=frames-x] .cck-form-field__size--md .cck-leading),:where([data-cck-theme-name=frames-x] .cck-form-field__size--md .cck-select),:where([data-cck-theme-name=frames-x] .cck-form-field__size--md .cck-textarea),:where([data-cck-theme-name=frames-x] .cck-form-field__size--md .cck-trailing){font:var(--text-base-font-medium)}:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg.cck-form-field--with-input .cck-form-field__wrapper),:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg.cck-form-field--with-select .cck-form-field__wrapper){height:56px}:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg.cck-form-field--with-input .cck-form-field__input-wrapper),:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg.cck-form-field--with-select .cck-form-field__input-wrapper){padding:0 var(--spacing-7) 0 var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg .cck-form-field--with-textarea .cck-form-field__input-wrapper){padding:var(--spacing-7) var(--spacing-7) var(--spacing-7) var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg.cck-form-field--with-chip-list .cck-form-field__input-wrapper){padding:6px}:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg .cck-input),:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg .cck-leading),:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg .cck-select),:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg .cck-textarea),:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg .cck-trailing){font:var(--text-lg-font-medium)}:where([data-cck-theme-name=frames-x] .cck-form-field__feedback-wrapper){display:flex;flex-direction:column;overflow:hidden}:where([data-cck-theme-name=frames-x] .cck-form-field__feedback-wrapper):empty{display:none}:where([data-cck-theme-name=frames-x] .cck-form-field__input-wrapper){align-items:center;display:flex;flex:1;flex-direction:row;gap:8px;min-width:0}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list .cck-chip-list){flex:1}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list .cck-form-field__wrapper){cursor:text}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list .cck-prefix),:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list .cck-suffix){align-self:flex-start}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list.cck-form-field__size--sm .cck-suffix){margin-right:4px;margin-top:6px}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list.cck-form-field__size--md .cck-suffix){margin-right:4px;margin-top:8px}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list.cck-form-field__size--lg .cck-suffix){margin-left:4px;margin-right:8px;margin-top:12px}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list.cck-form-field__size--sm .cck-prefix){margin-left:4px;margin-top:6px}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list.cck-form-field__size--md .cck-prefix){margin-left:4px;margin-top:8px}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list.cck-form-field__size--lg .cck-prefix){margin-left:8px;margin-right:4px;margin-top:12px}:where([data-cck-theme-name=frames-x] .cck-form-field--with-textarea .cck-form-field__input-wrapper){padding:10px 10px 10px 16px}:where([data-cck-theme-name=frames-x] .cck-form-field--with-textarea .cck-form-field__input-wrapper):hover:not(:has(textarea:focus-visible)){background-color:var(--base-fill-1)}:where([data-cck-theme-name=frames-x] .cck-form-field--with-input .cck-form-field__input-wrapper):hover:not(:has(input:focus-visible)),:where([data-cck-theme-name=frames-x] .cck-form-field--with-select .cck-form-field__input-wrapper):hover:not(:has(input:focus-visible)){background-color:var(--base-fill-1)}:where([data-cck-theme-name=frames-x] .cck-hint){color:var(--text-dark-secondary);display:flex;font:var(--text-sm-font-medium);gap:6px}:where([data-cck-theme-name=frames-x] .cck-hint .cck-svg-icon--default-color .cck-svg-icon__svg){fill:currentcolor}:where([data-cck-theme-name=frames-x] .cck-hint__color--default){color:var(--text-dark-secondary)}:where([data-cck-theme-name=frames-x] .cck-hint__color--success){color:var(--state-success-active)}:where([data-cck-theme-name=frames-x] .cck-svg-icon){align-items:center;display:flex;flex-shrink:0;justify-content:center}:where([data-cck-theme-name=frames-x] .cck-svg-icon__svg){height:100%;width:100%}:where([data-cck-theme-name=frames-x] .cck-svg-icon__size--xs){height:var(--icon-xs);width:var(--icon-xs)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__size--sm){height:var(--icon-sm);width:var(--icon-sm)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__size--md){height:var(--icon-md);width:var(--icon-md)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__size--lg){height:var(--icon-lg);width:var(--icon-lg)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__size--xl){height:var(--icon-xl);width:var(--icon-xl)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__size--2xl){height:var(--icon-2xl);width:var(--icon-2xl)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__size--3xl){height:var(--icon-3xl);width:var(--icon-3xl)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__size--4xl){height:var(--icon-4xl);width:var(--icon-4xl)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__color--grey){fill:var(--base-fill-4)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__color--brand){fill:var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__color--highlight){fill:var(--state-highlight-active)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__color--success){fill:var(--state-success-active)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__color--danger){fill:var(--state-danger-active)}:where([data-cck-theme-name=frames-x] .cck-icon-button){align-items:center;border:none;border-radius:var(--radi-6);box-sizing:border-box;cursor:pointer;display:inline-flex;justify-content:center;margin:0;outline:transparent;transition:all .1s}:where([data-cck-theme-name=frames-x] .cck-icon-button .cck-svg-icon--default-color){fill:currentcolor}:where([data-cck-theme-name=frames-x] .cck-icon-button):focus-visible{box-shadow:0 0 0 3px var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--brand){background-color:var(--state-brand-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--brand):hover{background-color:var(--state-brand-hover)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--brand):active{background-color:var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--brand):disabled{background-color:var(--base-fill-1);color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--highlight){background-color:var(--state-highlight-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--highlight):hover{background-color:var(--state-highlight-hover)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--highlight):active{background-color:var(--state-highlight-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--highlight):disabled{background-color:var(--base-fill-1);color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--success){background-color:var(--state-success-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--success):hover{background-color:var(--state-success-hover)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--success):active{background-color:var(--state-success-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--success):disabled{background-color:var(--base-fill-1);color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--danger){background-color:var(--state-danger-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--danger):hover{background-color:var(--state-danger-hover)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--danger):active{background-color:var(--state-danger-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--danger):disabled{background-color:var(--base-fill-1);color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__secondary){background-color:var(--base-surface-2);border:1px solid var(--base-border);color:var(--text-dark-primary);outline:1px solid transparent}:where([data-cck-theme-name=frames-x] .cck-icon-button__secondary):hover{background-color:var(--base-fill-2);border:1px solid var(--base-fill-2)}:where([data-cck-theme-name=frames-x] .cck-icon-button__secondary):active{background-color:var(--base-fill-1);border:1px solid var(--base-border)}:where([data-cck-theme-name=frames-x] .cck-icon-button__secondary):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost){background-color:var(--base-surface-1);outline:1px solid transparent}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--brand){border:1px solid var(--state-brand-active);color:var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--brand):hover{border:1px solid var(--state-brand-hover);outline:1px solid var(--state-brand-hover)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--brand):active{border:1px solid var(--state-brand-selected);outline:1px solid var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--brand):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--highlight){border:1px solid var(--state-highlight-active);color:var(--state-highlight-active)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--highlight):hover{border:1px solid var(--state-highlight-hover);outline:1px solid var(--state-highlight-hover)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--highlight):active{border:1px solid var(--state-highlight-selected);outline:1px solid var(--state-highlight-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--highlight):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--success){border:1px solid var(--state-success-active);color:var(--state-success-active)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--success):hover{border:1px solid var(--state-success-hover);outline:1px solid var(--state-success-hover)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--success):active{border:1px solid var(--state-success-selected);outline:1px solid var(--state-success-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--success):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--danger){border:1px solid var(--state-danger-active);color:var(--state-danger-active)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--danger):hover{border:1px solid var(--state-danger-hover);outline:1px solid var(--state-danger-hover)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--danger):active{border:1px solid var(--state-danger-selected);outline:1px solid var(--state-danger-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--danger):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__size--sm){height:36px;width:36px}:where([data-cck-theme-name=frames-x] .cck-icon-button__size--sm .cck-svg-icon--default-size){height:var(--icon-md);width:var(--icon-md)}:where([data-cck-theme-name=frames-x] .cck-icon-button__size--md){height:44px;width:44px}:where([data-cck-theme-name=frames-x] .cck-icon-button__size--md .cck-svg-icon--default-size){height:var(--icon-lg);width:var(--icon-lg)}:where([data-cck-theme-name=frames-x] .cck-icon-button__size--lg){height:44px;width:44px}:where([data-cck-theme-name=frames-x] .cck-icon-button__size--lg .cck-svg-icon--default-size){height:var(--icon-xl);width:var(--icon-xl)}:where([data-cck-theme-name=frames-x] .cck-icon-button__size--xl){height:56px;width:56px}:where([data-cck-theme-name=frames-x] .cck-icon-button__size--xl .cck-svg-icon--default-size){height:var(--icon-2xl);width:var(--icon-2xl)}:where([data-cck-theme-name=frames-x] .cck-input){background-color:transparent;border:none;color:var(--text-dark-primary);font:var(--text-base-font-medium);outline:none;text-overflow:ellipsis}:where([data-cck-theme-name=frames-x] .cck-input::-moz-placeholder){color:var(--text-dark-tertiary)}:where([data-cck-theme-name=frames-x] .cck-input::placeholder){color:var(--text-dark-tertiary)}:where([data-cck-theme-name=frames-x] .cck-input):disabled{color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-label){color:var(--text-dark-secondary);display:flex;font:var(--text-base-font-regular)}:where([data-cck-theme-name=frames-x] .cck-label__required-marker){margin-left:4px}:where([data-cck-theme-name=frames-x] .cck-leading){align-items:center;background-color:var(--base-surface-2);color:var(--text-dark-tertiary);cursor:default;display:flex;font:var(--text-base-font-medium);gap:var(--spacing-4);justify-content:center;padding:0 var(--spacing-7);-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-leading--clickable){cursor:pointer;transition:background-color .1s}:where([data-cck-theme-name=frames-x] .cck-leading--clickable):active{background-color:var(--base-fill-1)}:where([data-cck-theme-name=frames-x] .cck-leading--clickable):hover{background-color:var(--base-fill-2)}:where([data-cck-theme-name=frames-x] .cck-menu){background-color:var(--base-surface-1);border:1px solid var(--base-border);border-radius:var(--radi-6);box-shadow:0 8px 10px -6px rgba(13,16,23,.039),0 18px 22px -4px rgba(13,16,23,.078);display:flex;flex-direction:column;margin:4px 0;overflow:hidden;padding:0}:where([data-cck-theme-name=frames-x] .cck-menu__overlay .cck-overlay__backdrop){background-color:transparent}:where([data-cck-theme-name=frames-x] .cck-menu-item){align-items:center;color:var(--text-dark-secondary);display:flex;font:var(--text-base-font-medium);gap:var(--spacing-6);justify-content:flex-start;padding:var(--spacing-6) var(--spacing-5)}:where([data-cck-theme-name=frames-x] .cck-menu-item):not(.cck-menu-item--disabled){cursor:pointer}:where([data-cck-theme-name=frames-x] .cck-menu-item--disabled .cck-svg-icon.cck-svg-icon--default-color),:where([data-cck-theme-name=frames-x] .cck-menu-item--disabled){color:var(--base-disabled)}:where([data-cck-theme-name=frames-x] .cck-menu-item):not(.cck-menu-item--disabled):hover{background-color:var(--base-fill-1)}:where([data-cck-theme-name=frames-x] .cck-menu-item .cck-svg-icon.cck-svg-icon--default-size){height:var(--icon-lg);width:var(--icon-lg)}:where([data-cck-theme-name=frames-x] .cck-menu-item .cck-svg-icon.cck-svg-icon--default-color .cck-svg-icon__svg){fill:currentcolor}:where([data-cck-theme-name=frames-x] .cck-select__options-wrapper){background-color:var(--base-surface-1);border:1px solid var(--base-border);border-radius:var(--radi-6);height:inherit;margin-top:6px;max-height:inherit;overflow:auto}:where([data-cck-theme-name=frames-x] .cck-option__content-wrapper){flex:1}:where([data-cck-theme-name=frames-x] .cck-option){align-items:center;color:var(--text-dark-secondary);display:flex;font:var(--text-base-font-medium);gap:8px;padding:0 12px}:where([data-cck-theme-name=frames-x] .cck-option):not(.cck-option--disabled){cursor:pointer}:where([data-cck-theme-name=frames-x] .cck-option--disabled){color:var(--base-disabled);-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-option):not(.cck-option--disabled):hover{background-color:var(--base-fill-1)}:where([data-cck-theme-name=frames-x] .cck-option .cck-checkbox__input-wrapper){height:22px;width:22px}:where([data-cck-theme-name=frames-x] .cck-option--single.cck-option--selected){color:var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-option__size--sm){height:40px}:where([data-cck-theme-name=frames-x] .cck-option__size--md){height:48px}:where([data-cck-theme-name=frames-x] .cck-option__size--lg){height:56px}:where([data-cck-theme-name=frames-x] .cck-option__selected-checkmark .cck-svg-icon){height:var(--icon-md);width:var(--icon-md);fill:currentcolor}:where([data-cck-theme-name=frames-x] .cck-option-group){display:flex;flex-direction:column}:where([data-cck-theme-name=frames-x] .cck-option-group--label){align-items:center;color:var(--text-dark-primary);display:flex;font:var(--text-base-font-bold);padding:0 12px}:where([data-cck-theme-name=frames-x] .cck-option-group--disabled .cck-option-group--label){color:var(--base-disabled);-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-option-group .cck-option){padding:0 24px}:where([data-cck-theme-name=frames-x] .cck-option-group__size--sm .cck-option-group--label){height:40px}:where([data-cck-theme-name=frames-x] .cck-option-group__size--md .cck-option-group--label){height:48px}:where([data-cck-theme-name=frames-x] .cck-option-group__size--lg .cck-option-group--label){height:56px}:where([data-cck-theme-name=frames-x] .cck-prefix){flex-grow:0}:where([data-cck-theme-name=frames-x] .cck-prefix .cck-svg-icon.cck-svg-icon--default-size){height:var(--icon-md);width:var(--icon-md)}:where([data-cck-theme-name=frames-x] .cck-radio-button){color:var(--text-dark-primary);cursor:pointer}:where([data-cck-theme-name=frames-x] .cck-radio-button.cck-radio-button--disabled){color:var(--base-disabled);cursor:default;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-radio-button.cck-radio-button--disabled .cck-radio-button__input-wrapper){background-color:var(--base-disabled);border-color:transparent;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-radio-button.cck-radio-button--disabled .cck-radio-button__label){-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-radio-button:hover .cck-radio-button__input-wrapper){box-shadow:0 0 0 3px var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-radio-button__wrapper){align-items:center;display:inline-flex;vertical-align:middle}:where([data-cck-theme-name=frames-x] .cck-radio-button__input-wrapper){align-items:center;background-color:var(--base-fill-1);border:2px solid var(--base-border);border-radius:50%;display:flex;flex-shrink:0;justify-content:center;position:relative}:where([data-cck-theme-name=frames-x] .cck-radio-button__input){cursor:inherit;height:100%;left:0;margin:0;opacity:0;padding:0;position:absolute;right:0;top:0;width:100%;z-index:1}:where([data-cck-theme-name=frames-x] .cck-radio-button__background){background-color:var(--base-surface-1);border-radius:50%;opacity:0}:where([data-cck-theme-name=frames-x] .cck-radio-button__label){white-space:nowrap}:where([data-cck-theme-name=frames-x] .cck-radio-button--checked .cck-radio-button__input-wrapper){background-color:var(--state-brand-active);border-color:var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-radio-button--checked .cck-radio-button__background){opacity:1}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--sm){font:var(--text-sm-font-medium)}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--sm .cck-radio-button__wrapper){gap:var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--sm .cck-radio-button__input-wrapper){height:22px;width:22px}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--sm .cck-radio-button__background){height:12px;width:12px}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--md){font:var(--text-base-font-medium)}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--md .cck-radio-button__wrapper){gap:var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--md .cck-radio-button__input-wrapper){height:24px;width:24px}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--md .cck-radio-button__background){height:12px;width:12px}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--lg){font:var(--text-lg-font-medium)}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--lg .cck-radio-button__wrapper){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--lg .cck-radio-button__input-wrapper){height:32px;width:32px}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--lg .cck-radio-button__background){height:16px;width:16px}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--xl){font:var(--text-xl-font-medium)}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--xl .cck-radio-button__wrapper){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--xl .cck-radio-button__input-wrapper){height:32px;width:32px}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--xl .cck-radio-button__background){height:16px;width:16px}:where([data-cck-theme-name=frames-x] .cck-radio-group){align-items:flex-start;display:flex}:where([data-cck-theme-name=frames-x] .cck-radio-group__row){flex-direction:row;gap:24px}:where([data-cck-theme-name=frames-x] .cck-radio-group__column){flex-direction:column;gap:12px}:where([data-cck-theme-name=frames-x] .cck-select){align-items:center;border-radius:var(--radi-6);color:var(--text-dark-primary);cursor:pointer;display:flex;font:var(--text-base-font-medium)}:where([data-cck-theme-name=frames-x] .cck-select:hover .cck-svg-icon){fill:var(--base-fill-5)}:where([data-cck-theme-name=frames-x] .cck-select--disabled){color:var(--base-disabled);cursor:auto;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-select__placeholder){color:var(--text-dark-tertiary)}:where([data-cck-theme-name=frames-x] .cck-select__trigger-wrapper){color:currentcolor;flex:1;overflow:hidden;padding-right:8px;text-align:start}:where([data-cck-theme-name=frames-x] .cck-select__trigger-value){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:where([data-cck-theme-name=frames-x] .cck-select__overlay .cck-overlay__backdrop){background-color:transparent}:where([data-cck-theme-name=frames-x] .cck-select__dropdown-icon-wrapper){transition:transform .3s}:where([data-cck-theme-name=frames-x] .cck-select__dropdown-icon-wrapper .cck-svg-icon){height:var(--icon-lg);width:var(--icon-lg)}:where([data-cck-theme-name=frames-x] .cck-select--opened .cck-select__dropdown-icon-wrapper){transform:rotate(180deg)}:where([data-cck-theme-name=frames-x] .cck-suffix){flex-grow:0}:where([data-cck-theme-name=frames-x] .cck-suffix .cck-svg-icon.cck-svg-icon--default-size){height:var(--icon-md);width:var(--icon-md)}:where([data-cck-theme-name=frames-x] .cck-textarea){background-color:transparent;border:none;color:var(--text-dark-primary);font:var(--text-base-font-medium);min-height:24px;min-width:100%;outline:none;padding:0;scrollbar-color:var(--base-border) transparent}:where([data-cck-theme-name=frames-x] .cck-textarea::-moz-placeholder){color:var(--text-dark-tertiary)}:where([data-cck-theme-name=frames-x] .cck-textarea::placeholder){color:var(--text-dark-tertiary)}:where([data-cck-theme-name=frames-x] .cck-textarea::-webkit-resizer){background-image:url('data:image/svg+xml;utf8,');background-position:100% 100%;background-repeat:no-repeat;height:9px;width:9px}:where([data-cck-theme-name=frames-x] .cck-textarea):disabled{color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-toggle){cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-toggle__label){align-items:center;color:var(--text-dark-primary);cursor:pointer;display:flex;white-space:nowrap}:where([data-cck-theme-name=frames-x] .cck-toggle--label-before .cck-toggle__label){flex-direction:row-reverse}:where([data-cck-theme-name=frames-x] .cck-toggle__input){cursor:pointer;height:100%;margin:0;opacity:0;padding:0;position:relative;width:100%;z-index:3}:where([data-cck-theme-name=frames-x] .cck-toggle .cck-toggle__slider-wrapper){position:relative}:where([data-cck-theme-name=frames-x] .cck-toggle .cck-toggle__slider-wrapper):has(input:focus-visible){outline:2px solid var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-toggle__size--sm .cck-toggle__label){font:var(--text-sm-font-medium);gap:var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-toggle__size--md .cck-toggle__label){font:var(--text-base-font-medium);gap:var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-toggle__size--lg .cck-toggle__label){font:var(--text-lg-font-medium);gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-toggle__size--xl .cck-toggle__label){font:var(--text-xl-font-medium);gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob .cck-toggle__thumb){background-color:var(--base-surface-1);position:absolute;transition:all .3s ease;z-index:2}:where([data-cck-theme-name=frames-x] .cck-toggle__knob .cck-toggle__backdrop){height:100%;left:0;position:absolute;top:0;transition:background-color .3s ease;width:100%;z-index:1}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle--checked .cck-toggle__thumb){left:100%;top:50%;transform:translate(calc(-100% - var(--frames-x--toggle-margin)),-50%)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle--checked .cck-toggle__backdrop){background-color:var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle--unchecked .cck-toggle__thumb){left:0;top:50%;transform:translate(var(--frames-x--toggle-margin),-50%)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle--unchecked .cck-toggle__backdrop){background-color:var(--base-fill-2)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--sm){--frames-x--toggle-margin:2px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--sm .cck-toggle__slider-wrapper){height:19px;width:40px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--sm .cck-toggle__thumb){border-radius:var(--radi-2);height:15px;width:18px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--sm .cck-toggle__slider-wrapper){border-radius:var(--radi-3)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--sm .cck-toggle__backdrop){border-radius:var(--radi-3)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--md){--frames-x--toggle-margin:2px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--md .cck-toggle__slider-wrapper){height:24px;width:48px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--md .cck-toggle__thumb){border-radius:var(--radi-4);height:20px;width:22px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--md .cck-toggle__slider-wrapper){border-radius:var(--radi-5)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--md .cck-toggle__backdrop){border-radius:var(--radi-5)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--lg){--frames-x--toggle-margin:4px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--lg .cck-toggle__slider-wrapper){height:32px;width:56px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--lg .cck-toggle__thumb){border-radius:var(--radi-5);height:24px;width:26px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--lg .cck-toggle__slider-wrapper){border-radius:var(--radi-6)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--lg .cck-toggle__backdrop){border-radius:var(--radi-6)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--xl){--frames-x--toggle-margin:4px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--xl .cck-toggle__slider-wrapper){height:44px;width:80px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--xl .cck-toggle__thumb){border-radius:var(--radi-5);height:36px;width:36px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--xl .cck-toggle__slider-wrapper){border-radius:var(--radi-6)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--xl .cck-toggle__backdrop){border-radius:var(--radi-6)}:where([data-cck-theme-name=frames-x] .cck-toggle__switch .cck-toggle__thumb){background-color:var(--base-surface-1);box-shadow:0 1px 2px var(--colors-alpha-dark-50);position:absolute;transition:all .3s ease;z-index:2}:where([data-cck-theme-name=frames-x] .cck-toggle__switch .cck-toggle__backdrop){height:100%;left:0;position:absolute;top:50%;transform:translateY(-50%);transition:background-color .3s ease;width:100%;z-index:1}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle--checked .cck-toggle__thumb){left:100%;top:50%;transform:translate(-100%,-50%)}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle--checked .cck-toggle__backdrop){background-color:var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle--unchecked .cck-toggle__thumb){left:0;top:50%;transform:translateY(-50%)}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle--unchecked .cck-toggle__backdrop){background-color:var(--base-fill-2)}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--sm .cck-toggle__slider-wrapper){width:40px}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--sm .cck-toggle__thumb){border-radius:var(--radi-4);height:20px;width:20px}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--sm .cck-toggle__backdrop){border-radius:var(--radi-6);height:12px}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--md .cck-toggle__slider-wrapper){width:44px}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--md .cck-toggle__thumb){border-radius:var(--radi-5);height:24px;width:24px}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--md .cck-toggle__slider-wrapper){border-radius:var(--radi-5)}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--md .cck-toggle__backdrop){border-radius:var(--radi-6);height:16px}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--lg .cck-toggle__slider-wrapper){width:56px}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--lg .cck-toggle__thumb){border-radius:var(--radi-6);height:32px;width:32px}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--lg .cck-toggle__slider-wrapper){border-radius:var(--radi-6)}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--lg .cck-toggle__backdrop){border-radius:var(--radi-6);height:20px}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--xl .cck-toggle__slider-wrapper){width:80px}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--xl .cck-toggle__thumb){border-radius:var(--radi-6);height:40px;width:40px}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--xl .cck-toggle__slider-wrapper){border-radius:var(--radi-6)}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--xl .cck-toggle__backdrop){border-radius:var(--radi-6);height:32px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle--disabled),:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle--disabled){cursor:default;pointer-events:none}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle--disabled .cck-toggle__thumb),:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle--disabled .cck-toggle__thumb){background-color:var(--base-fill-3)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle--disabled .cck-toggle__backdrop),:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle--disabled .cck-toggle__backdrop){background-color:var(--base-fill-2)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle--disabled .cck-toggle__label),:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle--disabled .cck-toggle__label){color:var(--base-disabled)}:where([data-cck-theme-name=frames-x] .cck-trailing){align-items:center;background-color:var(--base-surface-2);color:var(--text-dark-tertiary);cursor:default;display:flex;font:var(--text-base-font-medium);gap:var(--spacing-4);justify-content:center;padding:0 var(--spacing-7);-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-trailing--clickable){cursor:pointer;transition:background-color .1s}:where([data-cck-theme-name=frames-x] .cck-trailing--clickable):active{background-color:var(--base-fill-1)}:where([data-cck-theme-name=frames-x] .cck-trailing--clickable):hover:not(:active){background-color:var(--base-fill-2)}:where([data-cck-theme-name=frames-x] .cck-avatar){align-items:center;border-radius:50%;display:flex;justify-content:center;overflow:hidden}:where([data-cck-theme-name=frames-x] .cck-avatar__fallback-image),:where([data-cck-theme-name=frames-x] .cck-avatar__image),:where([data-cck-theme-name=frames-x] .cck-avatar__placeholder-image){border-radius:inherit;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}:where([data-cck-theme-name=frames-x] .cck-avatar--with-label){background-color:var(--state-brand-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-avatar--clickable){cursor:pointer}:where([data-cck-theme-name=frames-x] .cck-avatar__size--xs){height:28px;width:28px}:where([data-cck-theme-name=frames-x] .cck-avatar__size--xs.cck-avatar--with-label){font:var(--text-xs-font-semibold)}:where([data-cck-theme-name=frames-x] .cck-avatar__size--sm){height:32px;width:32px}:where([data-cck-theme-name=frames-x] .cck-avatar__size--sm.cck-avatar--with-label){font:var(--text-xs-font-semibold)}:where([data-cck-theme-name=frames-x] .cck-avatar__size--md){height:40px;width:40px}:where([data-cck-theme-name=frames-x] .cck-avatar__size--md.cck-avatar--with-label){font:var(--text-sm-font-semibold)}:where([data-cck-theme-name=frames-x] .cck-avatar__size--lg){height:44px;width:44px}:where([data-cck-theme-name=frames-x] .cck-avatar__size--lg.cck-avatar--with-label){font:var(--text-lg-font-semibold)}:where([data-cck-theme-name=frames-x] .cck-avatar__size--xl){height:56px;width:56px}:where([data-cck-theme-name=frames-x] .cck-avatar__size--xl.cck-avatar--with-label){font:var(--text-xl-font-semibold)}:where([data-cck-theme-name=frames-x] .cck-avatar__size--2xl){height:72px;width:72px}:where([data-cck-theme-name=frames-x] .cck-avatar__size--2xl.cck-avatar--with-label){font:var(--text-2xl-font-semibold)}:where([data-cck-theme-name=frames-x] .cck-avatar-group){display:flex}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-left){direction:rtl}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-left.cck-avatar-group__size--xs .cck-avatar):not(:last-of-type){margin-left:-10px}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-left.cck-avatar-group__size--sm .cck-avatar):not(:last-of-type){margin-left:-10px}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-left.cck-avatar-group__size--md .cck-avatar):not(:last-of-type){margin-left:-14px}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-left.cck-avatar-group__size--lg .cck-avatar):not(:last-of-type){margin-left:-16px}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-left.cck-avatar-group__size--xl .cck-avatar):not(:last-of-type){margin-left:-16px}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-left.cck-avatar-group__size--2xl .cck-avatar):not(:last-of-type){margin-left:-18px}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-right.cck-avatar-group__size--xs .cck-avatar):not(:first-of-type){margin-left:-10px}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-right.cck-avatar-group__size--sm .cck-avatar):not(:first-of-type){margin-left:-10px}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-right.cck-avatar-group__size--md .cck-avatar):not(:first-of-type){margin-left:-14px}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-right.cck-avatar-group__size--lg .cck-avatar):not(:first-of-type){margin-left:-16px}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-right.cck-avatar-group__size--xl .cck-avatar):not(:first-of-type){margin-left:-16px}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-right.cck-avatar-group__size--2xl .cck-avatar):not(:first-of-type){margin-left:-18px}:where([data-cck-theme-name=frames-x] .cck-avatar-group .cck-avatar){border:2px solid var(--base-surface-1)}:where([data-cck-theme-name=frames-x] .cck-avatar-label){align-items:center;display:flex}:where([data-cck-theme-name=frames-x] .cck-avatar-label__title){color:var(--text-dark-primary)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__description){color:var(--text-dark-tertiary)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__label-wrapper){display:flex}:where([data-cck-theme-name=frames-x] .cck-avatar-label--avatar-right){flex-direction:row-reverse}:where([data-cck-theme-name=frames-x] .cck-avatar-label--avatar-right .cck-avatar-label__label-wrapper){text-align:right}:where([data-cck-theme-name=frames-x] .cck-avatar-label--avatar-left){flex-direction:row}:where([data-cck-theme-name=frames-x] .cck-avatar-label--avatar-top){flex-direction:column}:where([data-cck-theme-name=frames-x] .cck-avatar-label--avatar-bottom){flex-direction:column-reverse}:where([data-cck-theme-name=frames-x] .cck-avatar-label--avatar-bottom.cck-avatar-label--label-vertical .cck-avatar-label__label-wrapper),:where([data-cck-theme-name=frames-x] .cck-avatar-label--avatar-top.cck-avatar-label--label-vertical .cck-avatar-label__label-wrapper){align-items:center}:where([data-cck-theme-name=frames-x] .cck-avatar-label--avatar-left.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper),:where([data-cck-theme-name=frames-x] .cck-avatar-label--avatar-right.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){align-items:center}:where([data-cck-theme-name=frames-x] .cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){align-items:center;flex-direction:row}:where([data-cck-theme-name=frames-x] .cck-avatar-label--label-vertical .cck-avatar-label__label-wrapper){flex-direction:column;justify-content:center}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--xs){gap:var(--spacing-5)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--xs .cck-avatar-label__label-wrapper){font:var(--text-xs-font-medium);gap:2px}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--xs.cck-avatar-label--avatar-left.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper),:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--xs.cck-avatar-label--avatar-right.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){gap:var(--spacing-5)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--sm){gap:var(--spacing-5)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--sm .cck-avatar-label__label-wrapper){font:var(--text-xs-font-medium)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--sm.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){gap:var(--spacing-5)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--sm.cck-avatar-label--label-vertical .cck-avatar-label__label-wrapper){gap:4px}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--md){gap:var(--spacing-5)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--md .cck-avatar-label__label-wrapper){font:var(--text-sm-font-medium)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--md.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){gap:var(--spacing-5)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--md.cck-avatar-label--label-vertical .cck-avatar-label__label-wrapper){gap:2px}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--lg){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--lg .cck-avatar-label__label-wrapper){font:var(--text-base-font-medium)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--lg.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--lg.cck-avatar-label--label-vertical .cck-avatar-label__label-wrapper){gap:2px}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--xl){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--xl .cck-avatar-label__label-wrapper){font:var(--text-lg-font-medium)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--xl.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--xl.cck-avatar-label--label-vertical .cck-avatar-label__label-wrapper){gap:4px}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--2xl){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--2xl .cck-avatar-label__label-wrapper){font:var(--text-xl-font-medium)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--2xl.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--2xl.cck-avatar-label--label-vertical .cck-avatar-label__label-wrapper){gap:4px}:where([data-cck-theme-name=frames-x] .cck-accordion){display:flex;flex-direction:column}:where([data-cck-theme-name=frames-x] .cck-accordion__default.cck-accordion__size--sm){gap:var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-accordion__default.cck-accordion__size--md){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-accordion__underline.cck-accordion__size--sm){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-accordion__underline.cck-accordion__size--md){gap:var(--spacing-10)}:where([data-cck-theme-name=frames-x] .cck-accordion-header){align-items:center;color:var(--text-dark-primary);display:flex}:where([data-cck-theme-name=frames-x] .cck-accordion-header .cck-svg-icon.cck-svg-icon--default-color){fill:var(--text-dark-primary)}:where([data-cck-theme-name=frames-x] .cck-accordion-header--icon-left){flex-direction:row-reverse;justify-content:flex-end}:where([data-cck-theme-name=frames-x] .cck-accordion-header--icon-left>.cck-accordion-header__icon-btn){margin-right:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-accordion-header--icon-right>.cck-accordion-header__icon-btn){margin-left:auto}:where([data-cck-theme-name=frames-x] .cck-accordion-header .cck-accordion-header__icon-btn){background-color:transparent;border:none;border-radius:var(--radi-6);color:var(--base-fill-4);cursor:pointer;outline:none}:where([data-cck-theme-name=frames-x] .cck-accordion-header .cck-accordion-header__icon-btn):hover{border:none}:where([data-cck-theme-name=frames-x] .cck-accordion-header--trigger-icon .cck-accordion-header__icon-btn):hover{background-color:var(--base-fill-1)}:where([data-cck-theme-name=frames-x] .cck-accordion-header--trigger-header){cursor:pointer}:where([data-cck-theme-name=frames-x] .cck-accordion-header--trigger-header>.cck-accordion-header__icon-btn):hover{background-color:transparent}:where([data-cck-theme-name=frames-x] .cck-accordion-panel--disabled>.cck-accordion-header){color:var(--base-disabled)}:where([data-cck-theme-name=frames-x] .cck-accordion-panel--disabled>.cck-accordion-header--trigger-header){cursor:not-allowed}:where([data-cck-theme-name=frames-x] .cck-accordion-panel--disabled>.cck-accordion-header>.cck-accordion-header__icon-btn){display:none}:where([data-cck-theme-name=frames-x] .cck-accordion__size--sm .cck-accordion-header){font:var(--text-base-font-medium)}:where([data-cck-theme-name=frames-x] .cck-accordion__size--sm .cck-accordion-header>.cck-accordion-header__icon-btn){height:36px;width:36px}:where([data-cck-theme-name=frames-x] .cck-accordion__size--md .cck-accordion-header){font:var(--text-lg-font-medium)}:where([data-cck-theme-name=frames-x] .cck-accordion__size--md .cck-accordion-header>.cck-accordion-header__icon-btn){height:44px;width:44px}:where([data-cck-theme-name=frames-x] .cck-accordion__default>.cck-accordion-panel--collapsed>.cck-accordion-header){background-color:var(--base-surface-2)}:where([data-cck-theme-name=frames-x] .cck-accordion__default.cck-accordion__size--sm>.cck-accordion-panel>.cck-accordion-header){height:56px;padding:0 var(--spacing-7) 0 var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-accordion__default.cck-accordion__size--md>.cck-accordion-panel>.cck-accordion-header){height:72px;padding:0 var(--spacing-8) 0 var(--spacing-10)}:where([data-cck-theme-name=frames-x] .cck-accordion__underline.cck-accordion__size--sm>.cck-accordion-panel>.cck-accordion-header){height:40px}:where([data-cck-theme-name=frames-x] .cck-accordion__underline.cck-accordion__size--md>.cck-accordion-panel>.cck-accordion-header){height:52px}:where([data-cck-theme-name=frames-x] .cck-accordion-panel){overflow:hidden}:where([data-cck-theme-name=frames-x] .cck-accordion-panel__content-wrapper){color:var(--text-dark-secondary);font:var(--text-base-font-regular)}:where([data-cck-theme-name=frames-x] .cck-accordion-panel--collapsed){padding-bottom:0}:where([data-cck-theme-name=frames-x] .cck-accordion-panel){transition:padding-bottom .3s}:where([data-cck-theme-name=frames-x] .cck-accordion--instant-animation>.cck-accordion-panel){transition:none}:where([data-cck-theme-name=frames-x] .cck-accordion__size--sm .cck-accordion-panel--expanded){padding-bottom:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-accordion__size.md .cck-accordion-panel--expanded){padding-bottom:var(--spacing-10)}:where([data-cck-theme-name=frames-x] .cck-accordion__default>.cck-accordion-panel){background-color:var(--base-surface-1);border:1px solid var(--base-border);border-radius:var(--radi-6)}:where([data-cck-theme-name=frames-x] .cck-accordion__default.cck-accordion__size--sm>.cck-accordion-panel>.cck-accordion-panel__content-wrapper){padding-left:var(--spacing-8);padding-right:var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-accordion__default.cck-accordion__size--md>.cck-accordion-panel>.cck-accordion-panel__content-wrapper){padding-left:var(--spacing-10);padding-right:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-accordion__underline){padding-bottom:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-accordion__underline>.cck-accordion-panel){border-bottom:1px solid var(--base-border)} \ No newline at end of file +:where([data-cck-theme-name=cocokits] .cck-button){align-items:center;border:none;box-sizing:border-box;cursor:pointer;display:inline-flex;justify-content:center;margin:0;outline:transparent}:where([data-cck-theme-name=cocokits] .cck-button):disabled{background-color:var(--color-disabled-surface);fill:var(--color-disabled-font);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-button .cck-svg-icon--default-color .cck-svg-icon__svg){fill:currentcolor}:where([data-cck-theme-name=cocokits] .cck-button__backdrop){display:none}:where([data-cck-theme-name=cocokits] .cck-button__size--sm){gap:8px;height:var(--button-primary-height-sm);padding:0 16px}:where([data-cck-theme-name=cocokits] .cck-button__size--md){gap:8px;height:32px;padding:0 20px}:where([data-cck-theme-name=cocokits] .cck-button__size--lg){gap:10px;height:40px;padding:0 24px}:where([data-cck-theme-name=cocokits] .cck-button__basic){border-radius:4px}:where([data-cck-theme-name=cocokits] .cck-button__basic.cck-button__color--brand):not(:disabled){background-color:transparent;color:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-button__basic.cck-button__color--brand):focus-visible{box-shadow:0 0 0 3px var(--color-brand-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-button__basic.cck-button__color--info):not(:disabled){background-color:transparent;color:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-button__basic.cck-button__color--info):focus-visible{box-shadow:0 0 0 3px var(--color-info-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-button__basic.cck-button__color--warning):not(:disabled){background-color:transparent;color:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-button__basic.cck-button__color--warning):focus-visible{box-shadow:0 0 0 3px var(--color-warning-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-button__basic.cck-button__color--error):not(:disabled){background-color:transparent;color:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-button__basic.cck-button__color--error):focus-visible{box-shadow:0 0 0 3px var(--color-error-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-button__basic.cck-button__color--h-contrast):not(:disabled){background-color:transparent;color:var(--color-h-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-button__basic.cck-button__color--h-contrast):focus-visible{box-shadow:0 0 0 3px var(--color-h-contrast-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-button__light){border-radius:4px}:where([data-cck-theme-name=cocokits] .cck-button__light.cck-button__color--brand):not(:disabled){background-color:var(--color-brand-alpha-5);color:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-button__light.cck-button__color--brand):focus-visible{box-shadow:0 0 0 3px var(--color-brand-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-button__light.cck-button__color--info):not(:disabled){background-color:var(--color-info-alpha-5);color:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-button__light.cck-button__color--info):focus-visible{box-shadow:0 0 0 3px var(--color-info-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-button__light.cck-button__color--warning):not(:disabled){background-color:var(--color-warning-alpha-5);color:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-button__light.cck-button__color--warning):focus-visible{box-shadow:0 0 0 3px var(--color-warning-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-button__light.cck-button__color--error):not(:disabled){background-color:var(--color-error-alpha-5);color:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-button__light.cck-button__color--error):focus-visible{box-shadow:0 0 0 3px var(--color-error-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-button__light.cck-button__color--h-contrast):not(:disabled){background-color:var(--color-h-contrast-alpha-5);color:var(--color-h-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-button__light.cck-button__color--h-contrast):focus-visible{box-shadow:0 0 0 3px var(--color-h-contrast-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-button__outline){background-color:transparent;border-radius:4px}:where([data-cck-theme-name=cocokits] .cck-button__outline.cck-button__color--brand):not(:disabled){border:1px solid var(--color-brand-default);color:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-button__outline.cck-button__color--brand):focus-visible{box-shadow:0 0 0 3px var(--color-brand-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-button__outline.cck-button__color--info):not(:disabled){border:1px solid var(--color-info-default);color:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-button__outline.cck-button__color--info):focus-visible{box-shadow:0 0 0 3px var(--color-info-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-button__outline.cck-button__color--warning):not(:disabled){border:1px solid var(--color-warning-default);color:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-button__outline.cck-button__color--warning):focus-visible{box-shadow:0 0 0 3px var(--color-warning-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-button__outline.cck-button__color--error):not(:disabled){border:1px solid var(--color-error-default);color:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-button__outline.cck-button__color--error):focus-visible{box-shadow:0 0 0 3px var(--color-error-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-button__outline.cck-button__color--h-contrast):not(:disabled){border:1px solid var(--color-h-contrast-default);color:var(--color-h-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-button__outline.cck-button__color--h-contrast):focus-visible{box-shadow:0 0 0 3px var(--color-h-contrast-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-button__primary){border-radius:4px}:where([data-cck-theme-name=cocokits] .cck-button__primary.cck-button__color--brand):not(:disabled){background-color:var(--color-brand-default);color:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-button__primary.cck-button__color--brand):focus-visible{box-shadow:0 0 0 3px var(--color-brand-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-button__primary.cck-button__color--info):not(:disabled){background-color:var(--color-info-default);color:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-button__primary.cck-button__color--info):focus-visible{box-shadow:0 0 0 3px var(--color-info-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-button__primary.cck-button__color--warning):not(:disabled){background-color:var(--color-warning-default);color:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-button__primary.cck-button__color--warning):focus-visible{box-shadow:0 0 0 3px var(--color-warning-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-button__primary.cck-button__color--error):not(:disabled){background-color:var(--color-error-default);color:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-button__primary.cck-button__color--error):focus-visible{box-shadow:0 0 0 3px var(--color-error-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-button__primary.cck-button__color--h-contrast):not(:disabled){background-color:var(--color-h-contrast-default);color:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-button__primary.cck-button__color--h-contrast):focus-visible{box-shadow:0 0 0 3px var(--color-h-contrast-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-checkbox){display:flex}:where([data-cck-theme-name=cocokits] .cck-checkbox__wrapper){align-items:center;display:inline-flex;gap:12px;vertical-align:middle}:where([data-cck-theme-name=cocokits] .cck-checkbox__input-wrapper){box-sizing:content-box;cursor:pointer;display:inline-block;flex-shrink:0;line-height:0;position:relative;white-space:nowrap}:where([data-cck-theme-name=cocokits] .cck-checkbox__size--sm .cck-checkbox__input-wrapper){height:var(--checkbox-size-sm);width:var(--checkbox-size-sm)}:where([data-cck-theme-name=cocokits] .cck-checkbox__size--md .cck-checkbox__input-wrapper){height:var(--checkbox-size-md);width:var(--checkbox-size-md)}:where([data-cck-theme-name=cocokits] .cck-checkbox__size--lg .cck-checkbox__input-wrapper){height:var(--checkbox-size-lg);width:var(--checkbox-size-lg)}:where([data-cck-theme-name=cocokits] .cck-checkbox__input){cursor:inherit;height:100%;left:0;margin:0;opacity:0;padding:0;position:absolute;right:0;top:0;width:100%}:where([data-cck-theme-name=cocokits] .cck-checkbox__background){align-items:center;border:1px solid var(--color-m-contrast-default);border-radius:2px;box-sizing:border-box;display:flex;height:100%;justify-content:center;pointer-events:none;position:absolute;transition:background-color 90ms cubic-bezier(.4,0,.6,1),border-color 90ms cubic-bezier(.4,0,.6,1);width:100%;will-change:background-color,border-color}:where([data-cck-theme-name=cocokits] .cck-checkbox--checked.cck-checkbox--disabled .cck-checkbox__background),:where([data-cck-theme-name=cocokits] .cck-checkbox--disabled .cck-checkbox__background),:where([data-cck-theme-name=cocokits] .cck-checkbox--indeterminate.cck-checkbox--disabled .cck-checkbox__background),:where([data-cck-theme-name=cocokits] .cck-checkbox--unchecked.cck-checkbox--disabled .cck-checkbox__background){background-color:var(--color-disabled-surface);border-color:var(--color-disabled-border)}:where([data-cck-theme-name=cocokits] .cck-checkbox--checked.cck-checkbox__color--brand:not(.cck-checkbox--disabled) .cck-checkbox__background),:where([data-cck-theme-name=cocokits] .cck-checkbox--indeterminate.cck-checkbox__color--brand:not(.cck-checkbox--disabled) .cck-checkbox__background){background-color:var(--color-brand-default);border-color:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-checkbox--checked.cck-checkbox__color--info:not(.cck-checkbox--disabled) .cck-checkbox__background),:where([data-cck-theme-name=cocokits] .cck-checkbox--indeterminate.cck-checkbox__color--info:not(.cck-checkbox--disabled) .cck-checkbox__background){background-color:var(--color-info-default);border-color:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-checkbox--checked.cck-checkbox__color--warning:not(.cck-checkbox--disabled) .cck-checkbox__background),:where([data-cck-theme-name=cocokits] .cck-checkbox--indeterminate.cck-checkbox__color--warning:not(.cck-checkbox--disabled) .cck-checkbox__background){background-color:var(--color-warning-default);border-color:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-checkbox--checked.cck-checkbox__color--error:not(.cck-checkbox--disabled) .cck-checkbox__background),:where([data-cck-theme-name=cocokits] .cck-checkbox--indeterminate.cck-checkbox__color--error:not(.cck-checkbox--disabled) .cck-checkbox__background){background-color:var(--color-error-default);border-color:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-checkbox__color--brand .cck-checkbox__input:focus-visible~.cck-checkbox__background){box-shadow:0 0 0 3px var(--color-brand-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-checkbox__color--info .cck-checkbox__input:focus-visible~.cck-checkbox__background){box-shadow:0 0 0 3px var(--color-info-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-checkbox__color--warning .cck-checkbox__input:focus-visible~.cck-checkbox__background){box-shadow:0 0 0 3px var(--color-warning-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-checkbox__color--error .cck-checkbox__input:focus-visible~.cck-checkbox__background){box-shadow:0 0 0 3px var(--color-error-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-checkbox__checkmark-path){transition:stroke-dashoffset .18s cubic-bezier(.4,0,.6,1);stroke:currentcolor;stroke-width:3.12px;stroke-dashoffset:29.7833;stroke-dasharray:29.7833}:where([data-cck-theme-name=cocokits] .cck-checkbox--checked .cck-checkbox__checkmark-path){stroke-dashoffset:0}:where([data-cck-theme-name=cocokits] .cck-checkbox__checkmark){color:var(--checkbox-color-checkmark);inset:0;opacity:0;padding:2px;position:absolute;transition:opacity .18s cubic-bezier(.4,0,.6,1);width:100%}:where([data-cck-theme-name=cocokits] .cck-checkbox--checked .cck-checkbox__checkmark){opacity:1}:where([data-cck-theme-name=cocokits] .cck-checkbox--indeterminate .cck-checkbox__checkmark){opacity:0;transform:rotate(45deg);transition:opacity 90ms cubic-bezier(.4,0,.6,1),transform 90ms cubic-bezier(.4,0,.6,1)}:where([data-cck-theme-name=cocokits] .cck-checkbox--disabled .cck-checkbox__checkmark){color:var(--color-disabled-border)}:where([data-cck-theme-name=cocokits] .cck-checkbox__mixedmark){border-color:var(--checkbox-color-checkmark);border-style:solid;border-width:1px;height:0;margin:2px;opacity:0;transform:scaleX(0) rotate(0deg);transition:opacity 90ms cubic-bezier(.4,0,.6,1),transform 90ms cubic-bezier(.4,0,.6,1);width:100%}:where([data-cck-theme-name=cocokits] .cck-checkbox--indeterminate .cck-checkbox__mixedmark){opacity:1;transform:scaleX(1) rotate(0deg)}:where([data-cck-theme-name=cocokits] .cck-checkbox__label){color:var(--color-font-default);cursor:pointer;font:var(--text-sm-medium);margin-left:0;margin-right:auto;order:0;padding-left:0;padding-right:0;text-align:left;white-space:nowrap}:where([data-cck-theme-name=cocokits] .cck-checkbox__label):empty{display:none}:where([data-cck-theme-name=cocokits] .cck-checkbox--disabled .cck-checkbox__label){color:var(--color-disabled-font)}:where([data-cck-theme-name=cocokits] .cck-checkbox--disabled .cck-checkbox__input-wrapper),:where([data-cck-theme-name=cocokits] .cck-checkbox--disabled .cck-checkbox__label){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-chip){align-items:center;border:1px solid var(--chip-color-border);border-radius:6px;color:var(--color-font-default);cursor:default;display:flex;font:var(--text-sm-medium);gap:4px;padding:0 var(--chip-spacing-overlay-h-padding)}:where([data-cck-theme-name=cocokits] .cck-chip.cck-chip--disabled){border:1px solid var(--chip-color-border-disabled);color:var(--color-disabled-font);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-chip.cck-chip--removable){padding:0 2px 0 var(--chip-spacing-overlay-h-padding)}:where([data-cck-theme-name=cocokits] .cck-chip__size--sm){height:var(--chip-size-height-sm)}:where([data-cck-theme-name=cocokits] .cck-chip__size--md){height:var(--chip-size-height-md)}:where([data-cck-theme-name=cocokits] .cck-chip__size--lg){height:var(--chip-size-height-lg)}:where([data-cck-theme-name=cocokits] .cck-chip__content-wrapper){align-items:center;display:flex;justify-content:center}:where([data-cck-theme-name=cocokits] .cck-chip__remove-icon-wrapper .cck-icon-button){background-color:transparent;border-radius:50%;color:var(--color-font-alpha-7);height:24px;padding:4px;width:24px}:where([data-cck-theme-name=cocokits] .cck-chip__remove-icon-wrapper){align-items:center;display:flex;justify-content:center}:where([data-cck-theme-name=cocokits] .cck-chip__remove-icon-wrapper .cck-icon-button):hover{background-color:var(--color-h-contrast-alpha-2)}:where([data-cck-theme-name=cocokits] .cck-chip-list){align-items:stretch;display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-start}:where([data-cck-theme-name=cocokits] .cck-chip-list__input){background:transparent;border:none;flex:1;font:var(--text-sm-regular);outline:none}:where([data-cck-theme-name=cocokits] .cck-chip-list__input::-moz-placeholder){color:var(--color-font-alpha-6);-moz-transition:color .1s ease-in;transition:color .1s ease-in}:where([data-cck-theme-name=cocokits] .cck-chip-list__input::placeholder){color:var(--color-font-alpha-6);transition:color .1s ease-in}:where([data-cck-theme-name=cocokits] .cck-chip-list__input::-moz-placeholder):not(:focus){color:transparent}:where([data-cck-theme-name=cocokits] .cck-chip-list__input::placeholder):not(:focus){color:transparent}:where([data-cck-theme-name=cocokits] .cck-chip-list__size--sm .cck-chip-list__input){height:var(--chip-size-height-sm)}:where([data-cck-theme-name=cocokits] .cck-chip-list__size--md .cck-chip-list__input){height:var(--chip-size-height-md)}:where([data-cck-theme-name=cocokits] .cck-chip-list__size--lg .cck-chip-list__input){height:var(--chip-size-height-lg)}:where([data-cck-theme-name=cocokits] *){box-sizing:border-box}:where([data-cck-theme-name=cocokits] .cck-divider){display:block;flex-shrink:0}:where([data-cck-theme-name=cocokits] .cck-divider__horizontal){margin:var(--divider-spacing-margin) 0;width:100%}:where([data-cck-theme-name=cocokits] .cck-divider__horizontal.cck-divider__size--md){height:1px}:where([data-cck-theme-name=cocokits] .cck-divider__horizontal.cck-divider__size--lg){height:2px;width:100%}:where([data-cck-theme-name=cocokits] .cck-divider__vertical){height:100%;margin:0 var(--divider-spacing-margin)}:where([data-cck-theme-name=cocokits] .cck-divider__vertical.cck-divider__size--md){width:1px}:where([data-cck-theme-name=cocokits] .cck-divider__vertical.cck-divider__size--lg){width:2px}:where([data-cck-theme-name=cocokits] .cck-divider__color--light){background-color:var(--divider-color-light)}:where([data-cck-theme-name=cocokits] .cck-divider__color--default){background-color:var(--divider-color-default)}:where([data-cck-theme-name=cocokits] .cck-divider__color--dark){background-color:var(--divider-color-dark)}:where([data-cck-theme-name=cocokits] .cck-error){color:var(--color-error-default);display:flex;font:var(--text-sm-regular);gap:6px}:where([data-cck-theme-name=cocokits] .cck-error .cck-svg-icon--default-color .cck-svg-icon__svg){fill:currentcolor}:where([data-cck-theme-name=cocokits] .cck-form-field){align-items:flex-start;display:flex;flex-direction:column;gap:var(--form_field-spacing-host-gap);min-width:100px}:where([data-cck-theme-name=cocokits] .cck-form-field:not(:disabled) .cck-form-field__input-wrapper):hover{background-color:var(--color-surface-inverse-alpha-1)}:where([data-cck-theme-name=cocokits] .cck-form-field .cck-select){flex:1;height:100%;width:100%}:where([data-cck-theme-name=cocokits] .cck-form-field .cck-input){flex:1;width:100%}:where([data-cck-theme-name=cocokits] .cck-form-field--disabled){opacity:.5}:where([data-cck-theme-name=cocokits] .cck-form-field__wrapper){align-items:stretch;border-radius:var(--form_field-size-radius);display:flex;flex-direction:row;width:100%}:where([data-cck-theme-name=cocokits] .cck-form-field__wrapper):has(input:disabled){background-color:var(--color-surface-inverse-alpha-3)}:where([data-cck-theme-name=cocokits] .cck-form-field--with-input.cck-form-field__size--sm .cck-form-field__wrapper),:where([data-cck-theme-name=cocokits] .cck-form-field--with-select.cck-form-field__size--sm .cck-form-field__wrapper){height:var(--form_field-size-height-sm)}:where([data-cck-theme-name=cocokits] .cck-form-field--with-input.cck-form-field__size--md .cck-form-field__wrapper),:where([data-cck-theme-name=cocokits] .cck-form-field--with-select.cck-form-field__size--md .cck-form-field__wrapper){height:var(--form_field-size-height-md)}:where([data-cck-theme-name=cocokits] .cck-form-field--with-input.cck-form-field__size--lg .cck-form-field__wrapper),:where([data-cck-theme-name=cocokits] .cck-form-field--with-select.cck-form-field__size--lg .cck-form-field__wrapper){height:var(--form_field-size-height-lg)}:where([data-cck-theme-name=cocokits] .cck-form-field .cck-label){margin-left:var(--form_field-spacing-balance-alignment-margin)}:where([data-cck-theme-name=cocokits] .cck-form-field__feedback-wrapper){display:flex;flex-direction:column;margin-left:var(--form_field-spacing-balance-alignment-margin);overflow:hidden}:where([data-cck-theme-name=cocokits] .cck-form-field__feedback-wrapper):empty{display:none}:where([data-cck-theme-name=cocokits] .cck-form-field__wrapper>*):first-child{border-bottom-left-radius:var(--form_field-size-radius);border-top-left-radius:var(--form_field-size-radius)}:where([data-cck-theme-name=cocokits] .cck-form-field__wrapper>*):last-child{border-bottom-right-radius:var(--form_field-size-radius);border-top-right-radius:var(--form_field-size-radius)}:where([data-cck-theme-name=cocokits] .cck-form-field__input-wrapper){align-items:center;border:1px solid var(--form_field-color-border);display:flex;flex:1;flex-direction:row;gap:var(--form_field-spacing-input-wrapper-gap);min-width:0}:where([data-cck-theme-name=cocokits] .cck-form-field--with-input .cck-form-field__input-wrapper),:where([data-cck-theme-name=cocokits] .cck-form-field--with-select .cck-form-field__input-wrapper){padding:0 var(--form_field-spacing-input-wrapper-h-padding)}:where([data-cck-theme-name=cocokits] .cck-form-field--with-chip-list .cck-prefix),:where([data-cck-theme-name=cocokits] .cck-form-field--with-chip-list .cck-suffix){align-self:flex-start}:where([data-cck-theme-name=cocokits] .cck-form-field--with-chip-list .cck-chip-list){flex:1}:where([data-cck-theme-name=cocokits] .cck-form-field__size--sm.cck-form-field--with-chip-list .cck-suffix){margin-right:4px;margin-top:6px}:where([data-cck-theme-name=cocokits] .cck-form-field__size--md.cck-form-field--with-chip-list .cck-suffix){margin-right:4px;margin-top:8px}:where([data-cck-theme-name=cocokits] .cck-form-field__size--lg.cck-form-field--with-chip-list .cck-suffix){margin-left:4px;margin-right:8px;margin-top:12px}:where([data-cck-theme-name=cocokits] .cck-form-field__size--sm.cck-form-field--with-chip-list .cck-prefix){margin-left:4px;margin-top:6px}:where([data-cck-theme-name=cocokits] .cck-form-field__size--md.cck-form-field--with-chip-list .cck-prefix){margin-left:4px;margin-top:8px}:where([data-cck-theme-name=cocokits] .cck-form-field__size--lg.cck-form-field--with-chip-list .cck-prefix){margin-left:8px;margin-right:4px;margin-top:12px}:where([data-cck-theme-name=cocokits] .cck-form-field--with-chip-list .cck-form-field__input-wrapper){cursor:text;padding:4px}:where([data-cck-theme-name=cocokits] .cck-form-field--with-textarea .cck-form-field__input-wrapper){padding:8px}:where([data-cck-theme-name=cocokits] .cck-form-field--focused .cck-form-field__input-wrapper){border:1px solid var(--color-brand-default);box-shadow:inset 0 0 0 1px var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-form-field--error .cck-form-field__input-wrapper){border:1px solid var(--form_field-color-error)}:where([data-cck-theme-name=cocokits] .cck-form-field--focused.cck-form-field--error .cck-form-field__input-wrapper){box-shadow:inset 0 0 0 1px var(--form_field-color-error)}:where([data-cck-theme-name=cocokits] .cck-hint){color:var(--color-font-alpha-7);display:flex;font:var(--text-sm-regular);gap:6px}:where([data-cck-theme-name=cocokits] .cck-hint .cck-svg-icon--default-color .cck-svg-icon__svg){fill:currentcolor}:where([data-cck-theme-name=cocokits] .cck-svg-icon){align-items:center;display:flex;flex-shrink:0;justify-content:center}:where([data-cck-theme-name=cocokits] .cck-svg-icon__svg){height:100%;width:100%}:where([data-cck-theme-name=cocokits] .cck-svg-icon__size--xs){height:var(--icon-size-xs);width:var(--icon-size-xs)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__size--sm){height:var(--icon-size-sm);width:var(--icon-size-sm)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__size--md){height:var(--icon-size-md);width:var(--icon-size-md)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__size--lg){height:var(--icon-size-lg);width:var(--icon-size-lg)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__size--xl){height:var(--icon-size-xl);width:var(--icon-size-xl)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__size--2xl){height:var(--icon-size-2xl);width:var(--icon-size-2xl)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__color--brand){fill:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__color--info){fill:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__color--warning){fill:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__color--error){fill:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__color--h-contrast){fill:var(--color-h-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__color--m-contrast){fill:var(--color-m-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button){align-items:center;border:none;box-sizing:border-box;cursor:pointer;display:inline-flex;flex-shrink:0;justify-content:center;margin:0;outline:transparent}:where([data-cck-theme-name=cocokits] .cck-icon-button):disabled{background-color:var(--color-disabled-surface);fill:var(--color-disabled-font);cursor:default}:where([data-cck-theme-name=cocokits] .cck-icon-button .cck-svg-icon){height:100%;width:100%}:where([data-cck-theme-name=cocokits] .cck-icon-button .cck-svg-icon__svg){fill:inherit}:where([data-cck-theme-name=cocokits] .cck-icon-button__rounded--false){border-radius:4px}:where([data-cck-theme-name=cocokits] .cck-icon-button__rounded--true){border-radius:50%}:where([data-cck-theme-name=cocokits] .cck-icon-button__size--sm){height:28px;padding:6px;width:28px}:where([data-cck-theme-name=cocokits] .cck-icon-button__size--md){height:32px;padding:6px;width:32px}:where([data-cck-theme-name=cocokits] .cck-icon-button__size--lg){height:40px;padding:8px;width:40px}:where([data-cck-theme-name=cocokits] .cck-icon-button__basic.cck-icon-button__color--brand):not(:disabled){background-color:transparent;fill:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__basic.cck-icon-button__color--brand):focus-visible{box-shadow:0 0 0 3px var(--color-brand-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-icon-button__basic.cck-icon-button__color--info):not(:disabled){background-color:transparent;fill:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__basic.cck-icon-button__color--info):focus-visible{box-shadow:0 0 0 3px var(--color-info-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-icon-button__basic.cck-icon-button__color--warning):not(:disabled){background-color:transparent;fill:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__basic.cck-icon-button__color--warning):focus-visible{box-shadow:0 0 0 3px var(--color-warning-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-icon-button__basic.cck-icon-button__color--error):not(:disabled){background-color:transparent;fill:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__basic.cck-icon-button__color--error):focus-visible{box-shadow:0 0 0 3px var(--color-error-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-icon-button__basic.cck-icon-button__color--h-contrast):not(:disabled){background-color:transparent;fill:var(--color-h-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__basic.cck-icon-button__color--h-contrast):focus-visible{box-shadow:0 0 0 3px var(--color-h-contrast-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-icon-button__light.cck-icon-button__color--brand):not(:disabled){background-color:var(--color-brand-alpha-5);fill:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__light.cck-icon-button__color--brand):focus-visible{box-shadow:0 0 0 3px var(--color-brand-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-icon-button__light.cck-icon-button__color--info):not(:disabled){background-color:var(--color-info-alpha-5);fill:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__light.cck-icon-button__color--info):focus-visible{box-shadow:0 0 0 3px var(--color-info-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-icon-button__light.cck-icon-button__color--warning):not(:disabled){background-color:var(--color-warning-alpha-5);fill:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__light.cck-icon-button__color--warning):focus-visible{box-shadow:0 0 0 3px var(--color-warning-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-icon-button__light.cck-icon-button__color--error):not(:disabled){background-color:var(--color-error-alpha-5);fill:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__light.cck-icon-button__color--error):focus-visible{box-shadow:0 0 0 3px var(--color-error-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-icon-button__light.cck-icon-button__color--h-contrast):not(:disabled){background-color:var(--color-h-contrast-alpha-5);fill:var(--color-h-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__light.cck-icon-button__color--h-contrast):focus-visible{box-shadow:0 0 0 3px var(--color-h-contrast-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline){background-color:transparent}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline.cck-icon-button__color--brand):not(:disabled){border:1px solid var(--color-brand-default);fill:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline.cck-icon-button__color--brand):focus-visible{box-shadow:0 0 0 3px var(--color-brand-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline.cck-icon-button__color--info):not(:disabled){border:1px solid var(--color-info-default);fill:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline.cck-icon-button__color--info):focus-visible{box-shadow:0 0 0 3px var(--color-info-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline.cck-icon-button__color--warning):not(:disabled){border:1px solid var(--color-warning-default);fill:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline.cck-icon-button__color--warning):focus-visible{box-shadow:0 0 0 3px var(--color-warning-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline.cck-icon-button__color--error):not(:disabled){border:1px solid var(--color-error-default);fill:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline.cck-icon-button__color--error):focus-visible{box-shadow:0 0 0 3px var(--color-error-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline.cck-icon-button__color--h-contrast):not(:disabled){border:1px solid var(--color-h-contrast-default);fill:var(--color-h-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline.cck-icon-button__color--h-contrast):focus-visible{box-shadow:0 0 0 3px var(--color-h-contrast-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-icon-button__primary.cck-icon-button__color--brand):not(:disabled){background-color:var(--color-brand-default);fill:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__primary.cck-icon-button__color--brand):focus-visible{box-shadow:0 0 0 3px var(--color-brand-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-icon-button__primary.cck-icon-button__color--info):not(:disabled){background-color:var(--color-info-default);fill:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__primary.cck-icon-button__color--info):focus-visible{box-shadow:0 0 0 3px var(--color-info-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-icon-button__primary.cck-icon-button__color--warning):not(:disabled){background-color:var(--color-warning-default);fill:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__primary.cck-icon-button__color--warning):focus-visible{box-shadow:0 0 0 3px var(--color-warning-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-icon-button__primary.cck-icon-button__color--error):not(:disabled){background-color:var(--color-error-default);fill:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__primary.cck-icon-button__color--error):focus-visible{box-shadow:0 0 0 3px var(--color-error-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-icon-button__primary.cck-icon-button__color--h-contrast):not(:disabled){background-color:var(--color-h-contrast-default);fill:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__primary.cck-icon-button__color--h-contrast):focus-visible{box-shadow:0 0 0 3px var(--color-h-contrast-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-input){background-color:transparent;border:none;color:var(--color-font-default);font:var(--text-md-regular);outline:none;text-overflow:ellipsis}:where([data-cck-theme-name=cocokits] .cck-input::-moz-placeholder){color:var(--color-font-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-input::placeholder){color:var(--color-font-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-input::-moz-placeholder):disabled{color:var(--color-font-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-input::placeholder):disabled{color:var(--color-font-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-input):disabled{color:var(--color-font-alpha-6);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-label){display:flex}:where([data-cck-theme-name=cocokits] .cck-label__label-tag){color:var(--color-font-default);font:var(--text-sm-medium)}:where([data-cck-theme-name=cocokits] .cck-label__required-marker){color:var(--color-brand-default);font:var(--text-sm-medium);margin-left:var(--label-spacing-required-marker-padding-left)}:where([data-cck-theme-name=cocokits] .cck-leading){align-items:center;border:1px solid var(--form_field-color-border);border-right:none;color:var(--color-font-alpha-7);display:flex;flex-grow:0;justify-content:center;padding:0 var(--form_field-spacing-input-wrapper-h-padding);-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-leading .cck-select){color:currentcolor;font:inherit}:where([data-cck-theme-name=cocokits] .cck-leading__regular){font:var(--text-sm-regular)}:where([data-cck-theme-name=cocokits] .cck-leading__medium){font:var(--text-sm-medium)}:where([data-cck-theme-name=cocokits] .cck-leading--clickable){cursor:pointer;transition:background-color .1s}:where([data-cck-theme-name=cocokits] .cck-leading .cck-svg-icon.cck-svg-icon--default-size){height:var(--icon-size-xs);width:var(--icon-size-xs)}:where([data-cck-theme-name=cocokits] .cck-leading__color--transparent){background-color:transparent}:where([data-cck-theme-name=cocokits] .cck-leading__color--transparent.cck-leading--clickable):active{background-color:var(--color-surface-inverse-alpha-4)}:where([data-cck-theme-name=cocokits] .cck-leading__color--transparent.cck-leading--clickable):hover:not(:active){background-color:var(--color-surface-inverse-alpha-1)}:where([data-cck-theme-name=cocokits] .cck-leading__color--grey){background-color:var(--color-surface-inverse-alpha-1)}:where([data-cck-theme-name=cocokits] .cck-leading__color--grey.cck-leading--clickable):active{background-color:var(--color-surface-inverse-alpha-4)}:where([data-cck-theme-name=cocokits] .cck-leading__color--grey.cck-leading--clickable):hover:not(:active){background-color:var(--color-surface-inverse-alpha-3)}:where([data-cck-theme-name=cocokits] .cck-leading .cck-svg-icon.cck-svg-icon--default-color .cck-svg-icon__svg){fill:var(--form_field-color-icon)}:where([data-cck-theme-name=cocokits] .cck-menu){background-color:var(--color-surface-default);border:1px solid var(--menu-color-border);border-radius:var(--menu-size-radius);box-shadow:0 8px 10px -6px rgba(13,16,23,.039),0 18px 22px -4px rgba(13,16,23,.078);display:flex;flex-direction:column;margin:4px 0;padding:var(--menu-spacing-v-padding) var(--menu-spacing-h-padding)}:where([data-cck-theme-name=cocokits] .cck-menu__overlay .cck-overlay__backdrop){background-color:transparent}:where([data-cck-theme-name=cocokits] .cck-menu-item){align-items:center;border-radius:6px;display:flex;font:var(--text-sm-regular);gap:var(--menu_item-spacing-gap);justify-content:flex-start;margin:0 4px;padding:var(--menu_item-spacing-v-padding) var(--menu_item-spacing-h-padding)}:where([data-cck-theme-name=cocokits] .cck-menu-item):not(.cck-menu-item--disabled){cursor:pointer}:where([data-cck-theme-name=cocokits] .cck-menu-item--disabled){opacity:.6}:where([data-cck-theme-name=cocokits] .cck-menu-item--disabled .cck-svg-icon.cck-svg-icon--default-color),:where([data-cck-theme-name=cocokits] .cck-menu-item--disabled){color:var(--color-disabled-font)}:where([data-cck-theme-name=cocokits] .cck-menu-item):not(.cck-menu-item--disabled):hover{background-color:var(--color-surface-inverse-alpha-1)}:where([data-cck-theme-name=cocokits] .cck-menu-item__color--default):not(.cck-menu-item--disabled),:where([data-cck-theme-name=cocokits] .cck-menu-item__color--default:not(.cck-menu-item--disabled) .cck-svg-icon.cck-svg-icon--default-color){color:var(--color-font-default)}:where([data-cck-theme-name=cocokits] .cck-menu-item__color--error):not(.cck-menu-item--disabled),:where([data-cck-theme-name=cocokits] .cck-menu-item__color--error:not(.cck-menu-item--disabled) .cck-svg-icon.cck-svg-icon--default-color){color:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-menu-item__size--sm){height:var(--menu_item-size-height-sm)}:where([data-cck-theme-name=cocokits] .cck-menu-item__size--md){height:var(--menu_item-size-height-md)}:where([data-cck-theme-name=cocokits] .cck-menu-item__size--lg){height:var(--menu_item-size-height-lg)}:where([data-cck-theme-name=cocokits] .cck-menu-item .cck-svg-icon.cck-svg-icon--default-size){height:var(--icon-size-xs);width:var(--icon-size-xs)}:where([data-cck-theme-name=cocokits] .cck-menu-item .cck-svg-icon.cck-svg-icon--default-color .cck-svg-icon__svg){fill:currentcolor}:where([data-cck-theme-name=cocokits] .cck-option){align-items:center;border-radius:6px;color:var(--color-font-default);display:flex;font:var(--text-sm-regular);gap:var(--option-spacing-item-gap);margin:0 4px;padding:0 var(--option-spacing-item-h-padding)}:where([data-cck-theme-name=cocokits] .cck-option):not(.cck-option--disabled){cursor:pointer}:where([data-cck-theme-name=cocokits] .cck-option--disabled){color:var(--color-disabled-font);opacity:.7;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-option):not(.cck-option--disabled):hover{background-color:var(--option-color-item-hover)}:where([data-cck-theme-name=cocokits] .cck-option .cck-checkbox__input-wrapper){height:var(--checkbox-size-sm);width:var(--checkbox-size-sm)}:where([data-cck-theme-name=cocokits] .cck-option--single.cck-option--selected){font:var(--text-sm-medium)}:where([data-cck-theme-name=cocokits] .cck-option__size--sm){height:var(--option-size-height-sm)}:where([data-cck-theme-name=cocokits] .cck-option__size--md){height:var(--option-size-height-md)}:where([data-cck-theme-name=cocokits] .cck-option__size--lg){height:var(--option-size-height-lg)}:where([data-cck-theme-name=cocokits] .cck-select__options-wrapper){background-color:var(--option-color-overlay-bg);border:1px solid var(--option-color-overlay-border);border-radius:var(--option-size-overlay-radius);height:inherit;margin-top:var(--option-spacing-overlay-margin-top);max-height:inherit;overflow:auto;padding:var(--option-spacing-overlay-h-padding) var(--option-spacing-overlay-v-padding)}:where([data-cck-theme-name=cocokits] .cck-option__content-wrapper){flex:1}:where([data-cck-theme-name=cocokits] .cck-option__selected-checkmark .cck-svg-icon){height:var(--icon-size-sm);width:var(--icon-size-sm)}:where([data-cck-theme-name=cocokits] .cck-option-group){display:flex;flex-direction:column}:where([data-cck-theme-name=cocokits] .cck-option-group--label){align-items:center;color:var(--color-font-default);display:flex;font:var(--text-sm-medium);padding:0 var(--option-spacing-item-h-padding)}:where([data-cck-theme-name=cocokits] .cck-option-group--disabled .cck-option-group--label){color:var(--color-disabled-font);-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-option-group .cck-option){padding:0 calc(var(--option-spacing-item-h-padding)*2)}:where([data-cck-theme-name=cocokits] .cck-option-group__size--sm .cck-option-group--label){height:var(--option-size-height-sm)}:where([data-cck-theme-name=cocokits] .cck-option-group__size--md .cck-option-group--label){height:var(--option-size-height-md)}:where([data-cck-theme-name=cocokits] .cck-option-group__size--lg .cck-option-group--label){height:var(--option-size-height-lg)}:where([data-cck-theme-name=cocokits] .cck-prefix){flex-grow:0}:where([data-cck-theme-name=cocokits] .cck-prefix .cck-svg-icon.cck-svg-icon--default-size){height:var(--icon-size-xs);width:var(--icon-size-xs)}:where([data-cck-theme-name=cocokits] .cck-prefix .cck-svg-icon.cck-svg-icon--default-color .cck-svg-icon__svg){fill:var(--form_field-color-icon)}:where([data-cck-theme-name=cocokits] .cck-radio-button__wrapper){align-items:center;display:inline-flex;vertical-align:middle}:where([data-cck-theme-name=cocokits] .cck-radio-button__input-wrapper){box-sizing:content-box;cursor:pointer;display:inline-block;flex:0 0 auto;position:relative;will-change:opacity,transform,border-color,color}:where([data-cck-theme-name=cocokits] .cck-radio-button__size--sm .cck-radio-button__input-wrapper){height:var(--radio-size-sm);padding:var(--radio-spacing-padding-input-sm);width:var(--radio-size-sm)}:where([data-cck-theme-name=cocokits] .cck-radio-button__size--md .cck-radio-button__input-wrapper){height:var(--radio-size-md);padding:var(--radio-spacing-padding-input-md);width:var(--radio-size-md)}:where([data-cck-theme-name=cocokits] .cck-radio-button__size--lg .cck-radio-button__input-wrapper){height:var(--radio-size-lg);padding:var(--radio-spacing-padding-input-lg);width:var(--radio-size-lg)}:where([data-cck-theme-name=cocokits] .cck-radio-button__input){cursor:inherit;height:100%;left:0;margin:0;opacity:0;padding:0;position:absolute;right:0;top:0;width:100%;z-index:1}:where([data-cck-theme-name=cocokits] .cck-radio-button__background){box-sizing:border-box;display:inline-block;height:100%;position:relative;width:100%}:where([data-cck-theme-name=cocokits] .cck-radio-button__background--outer-circle){border-color:var(--color-m-contrast-default);border-radius:50%;border-style:solid;border-width:1px;box-sizing:border-box;height:100%;left:0;position:absolute;top:0;transition:border-color 90ms cubic-bezier(0,0,.2,1);width:100%}:where([data-cck-theme-name=cocokits] .cck-radio-button--checked .cck-radio-button__background--outer-circle){border-width:2px}:where([data-cck-theme-name=cocokits] .cck-radio-button--disabled.cck-radio-button--unchecked .cck-radio-button__background--outer-circle){background-color:var(--color-disabled-surface);border-color:var(--color-disabled-border)}:where([data-cck-theme-name=cocokits] .cck-radio-button--disabled.cck-radio-button--checked .cck-radio-button__background--outer-circle){border-color:var(--color-disabled-border)}:where([data-cck-theme-name=cocokits] .cck-radio-button__color--brand.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--outer-circle){border-color:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-radio-button__color--info.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--outer-circle){border-color:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-radio-button__color--warning.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--outer-circle){border-color:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-radio-button__color--error.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--outer-circle){border-color:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-radio-button__background--inner-circle){border-radius:50%;box-sizing:border-box;height:100%;left:0;position:absolute;top:0;transform:scale(0);transition:transform 90ms cubic-bezier(.4,0,.6,1),background-color 90ms cubic-bezier(.4,0,.6,1);width:100%}:where([data-cck-theme-name=cocokits] .cck-radio-button--checked .cck-radio-button__background--inner-circle){transform:scale(.5);transition:transform 90ms cubic-bezier(0,0,.2,1),border-color 90ms cubic-bezier(0,0,.2,1)}:where([data-cck-theme-name=cocokits] .cck-radio-button--disabled.cck-radio-button--checked .cck-radio-button__background--inner-circle){background-color:var(--color-disabled-border)}:where([data-cck-theme-name=cocokits] .cck-radio-button__color--brand.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--inner-circle){background-color:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-radio-button__color--info.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--inner-circle){background-color:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-radio-button__color--warning.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--inner-circle){background-color:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-radio-button__color--error.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--inner-circle){background-color:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-radio-button__label){color:var(--color-font-default);cursor:pointer;font:var(--text-sm-regular);margin-left:0;margin-right:auto;order:0;padding-left:4px;padding-right:0;white-space:nowrap}:where([data-cck-theme-name=cocokits] .cck-radio-button--disabled .cck-radio-button__label){color:var(--color-disabled-font)}:where([data-cck-theme-name=cocokits] .cck-radio-button--disabled .cck-radio-button__input-wrapper),:where([data-cck-theme-name=cocokits] .cck-radio-button--disabled .cck-radio-button__label){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-radio-group){align-items:flex-start;display:flex}:where([data-cck-theme-name=cocokits] .cck-radio-group__row){flex-direction:row;gap:24px}:where([data-cck-theme-name=cocokits] .cck-radio-group__column){flex-direction:column}:where([data-cck-theme-name=cocokits] .cck-select){align-items:center;border-radius:6px;color:var(--color-font-default);cursor:pointer;display:flex;font:var(--text-sm-regular)}:where([data-cck-theme-name=cocokits] .cck-select.cck-select--disabled){cursor:auto;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-select__placeholder){color:var(--color-font-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-select__trigger-wrapper){color:currentcolor;flex:1;overflow:hidden;padding-right:8px;text-align:start}:where([data-cck-theme-name=cocokits] .cck-select__trigger-value){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:where([data-cck-theme-name=cocokits] .cck-select__overlay .cck-overlay__backdrop){background-color:transparent}:where([data-cck-theme-name=cocokits] .cck-select__dropdown-icon-wrapper .cck-svg-icon){height:var(--icon-size-sm);width:var(--icon-size-sm)}:where([data-cck-theme-name=cocokits] .cck-suffix){flex-grow:0}:where([data-cck-theme-name=cocokits] .cck-suffix .cck-svg-icon.cck-svg-icon--default-size){height:var(--icon-size-xs);width:var(--icon-size-xs)}:where([data-cck-theme-name=cocokits] .cck-suffix .cck-svg-icon.cck-svg-icon--default-color .cck-svg-icon__svg){fill:var(--form_field-color-icon-light)}:where([data-cck-theme-name=cocokits] .cck-textarea){background-color:transparent;border:none;color:var(--color-font-default);font:var(--text-md-regular);min-height:24px;min-width:100%;outline:none;padding:0;scrollbar-color:var(--form_field-color-border) transparent}:where([data-cck-theme-name=cocokits] .cck-textarea::-moz-placeholder){color:var(--color-font-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-textarea::placeholder){color:var(--color-font-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-textarea::-webkit-resizer){background-image:url('data:image/svg+xml;utf8,');height:16px;width:16px}:where([data-cck-theme-name=cocokits] .cck-textarea):disabled{cursor:default;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-toggle){-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-toggle):not(.cck-toggle--disabled){cursor:pointer}:where([data-cck-theme-name=cocokits] .cck-toggle__label){align-items:center;color:var(--color-font-default);display:flex;font:var(--text-sm-regular);gap:var(--toggle-spacing-gap)}:where([data-cck-theme-name=cocokits] .cck-toggle__label):not(.cck-toggle--disabled){cursor:pointer}:where([data-cck-theme-name=cocokits] .cck-toggle--label-before .cck-toggle__label){flex-direction:row-reverse}:where([data-cck-theme-name=cocokits] .cck-toggle__slider-wrapper){border-radius:100px;position:relative;width:var(--toggle-size-width-sm)}:where([data-cck-theme-name=cocokits] .cck-toggle__input){cursor:pointer;height:100%;margin:0;opacity:0;padding:0;position:relative;width:100%;z-index:3}:where([data-cck-theme-name=cocokits] .cck-toggle__thumb){background-color:var(--toggle-color-thumb);border:2px solid var(--toggle-color-thumb-border);border-radius:100px;left:0;position:absolute;top:50%;transform:translateY(-50%);transition:all .3s ease,left .3s cubic-bezier(.18,.89,.35,1.15);z-index:2}:where([data-cck-theme-name=cocokits] .cck-toggle__backdrop){background-color:var(--toggle-color-backdrop-unselected);border-radius:100px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:all .3s ease;z-index:1}:where([data-cck-theme-name=cocokits] .cck-toggle--disabled){color:var(--color-disabled-font);cursor:default;pointer-events:none}:where([data-cck-theme-name=cocokits] .cck-toggle--disabled .cck-toggle__thumb){background-color:var(--toggle-color-thumb-disabled)}:where([data-cck-theme-name=cocokits] .cck-toggle--disabled .cck-toggle__backdrop){background-color:var(--toggle-color-backdrop-disabled)}:where([data-cck-theme-name=cocokits] .cck-toggle--checked .cck-toggle__thumb){left:100%;transform:translate(-100%,-50%)}:where([data-cck-theme-name=cocokits] .cck-toggle--checked:active .cck-toggle__thumb){margin-left:calc(var(--toggle-size-bounce)/2*-1)}:where([data-cck-theme-name=cocokits] .cck-toggle--unchecked:active .cck-toggle__thumb){margin-left:calc(var(--toggle-size-bounce)/2)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--brand:not(.cck-toggle--disabled).cck-toggle--checked .cck-toggle__backdrop){background-color:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--brand:not(.cck-toggle--disabled):hover .cck-toggle__thumb){border-color:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--info:not(.cck-toggle--disabled).cck-toggle--checked .cck-toggle__backdrop){background-color:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--info:not(.cck-toggle--disabled):hover .cck-toggle__thumb){border-color:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--warning:not(.cck-toggle--disabled).cck-toggle--checked .cck-toggle__backdrop){background-color:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--warning:not(.cck-toggle--disabled):hover .cck-toggle__thumb){border-color:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--error:not(.cck-toggle--disabled).cck-toggle--checked .cck-toggle__backdrop){background-color:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--error:not(.cck-toggle--disabled):hover .cck-toggle__thumb){border-color:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--h-contrast:not(.cck-toggle--disabled).cck-toggle--checked .cck-toggle__backdrop){background-color:var(--color-h-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--h-contrast:not(.cck-toggle--disabled):hover .cck-toggle__thumb){border-color:var(--color-h-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__size--sm .cck-toggle__slider-wrapper){width:var(--toggle-size-width-sm)}:where([data-cck-theme-name=cocokits] .cck-toggle__size--sm .cck-toggle__thumb){height:var(--toggle-size-thumb-sm);width:var(--toggle-size-thumb-sm)}:where([data-cck-theme-name=cocokits] .cck-toggle__size--sm .cck-toggle__backdrop){height:var(--toggle-size-backdrop-sm);width:calc(var(--toggle-size-width-sm) - var(--toggle-size-thumb-sm))}:where([data-cck-theme-name=cocokits] .cck-toggle__size--sm:active .cck-toggle__thumb){width:calc(var(--toggle-size-thumb-sm) + var(--toggle-size-bounce))}:where([data-cck-theme-name=cocokits] .cck-toggle__size--md .cck-toggle__slider-wrapper){width:var(--toggle-size-width-md)}:where([data-cck-theme-name=cocokits] .cck-toggle__size--md .cck-toggle__backdrop){height:var(--toggle-size-backdrop-md);width:calc(var(--toggle-size-width-md) - var(--toggle-size-thumb-md))}:where([data-cck-theme-name=cocokits] .cck-toggle__size--md .cck-toggle__thumb){height:var(--toggle-size-thumb-md);width:var(--toggle-size-thumb-md)}:where([data-cck-theme-name=cocokits] .cck-toggle__size--md:active .cck-toggle__thumb){width:calc(var(--toggle-size-thumb-md) + var(--toggle-size-bounce))}:where([data-cck-theme-name=cocokits] .cck-toggle__size--lg .cck-toggle__slider-wrapper){width:var(--toggle-size-width-lg)}:where([data-cck-theme-name=cocokits] .cck-toggle__size--lg .cck-toggle__backdrop){height:var(--toggle-size-backdrop-lg);width:calc(var(--toggle-size-width-lg) - var(--toggle-size-thumb-lg))}:where([data-cck-theme-name=cocokits] .cck-toggle__size--lg .cck-toggle__thumb){height:var(--toggle-size-thumb-lg);width:var(--toggle-size-thumb-lg)}:where([data-cck-theme-name=cocokits] .cck-toggle__size--lg:active .cck-toggle__thumb){width:calc(var(--toggle-size-thumb-lg) + var(--toggle-size-bounce))}:where([data-cck-theme-name=cocokits] .cck-trailing){align-items:center;border:1px solid var(--form_field-color-border);border-left:none;color:var(--color-font-alpha-7);display:flex;flex-grow:0;gap:var(--form_field-spacing-trailing-gap);justify-content:center;padding:0 var(--form_field-spacing-input-wrapper-h-padding);-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-trailing .cck-select){color:currentcolor;font:inherit}:where([data-cck-theme-name=cocokits] .cck-trailing__regular){font:var(--text-sm-regular)}:where([data-cck-theme-name=cocokits] .cck-trailing__medium){font:var(--text-sm-medium)}:where([data-cck-theme-name=cocokits] .cck-trailing--clickable){cursor:pointer;transition:background-color .1s}:where([data-cck-theme-name=cocokits] .cck-trailing .cck-svg-icon.cck-svg-icon--default-size){height:var(--icon-size-xs);width:var(--icon-size-xs)}:where([data-cck-theme-name=cocokits] .cck-trailing__color--transparent){background-color:transparent}:where([data-cck-theme-name=cocokits] .cck-trailing__color--transparent.cck-trailing--clickable):active{background-color:var(--color-surface-inverse-alpha-4)}:where([data-cck-theme-name=cocokits] .cck-trailing__color--transparent.cck-trailing--clickable):hover:not(:active){background-color:var(--color-surface-inverse-alpha-1)}:where([data-cck-theme-name=cocokits] .cck-trailing__color--grey){background-color:var(--color-surface-inverse-alpha-1)}:where([data-cck-theme-name=cocokits] .cck-trailing__color--grey.cck-trailing--clickable):active{background-color:var(--color-surface-inverse-alpha-4)}:where([data-cck-theme-name=cocokits] .cck-trailing__color--grey.cck-trailing--clickable):hover:not(:active){background-color:var(--color-surface-inverse-alpha-3)}:where([data-cck-theme-name=cocokits] .cck-trailing .cck-svg-icon.cck-svg-icon--default-color .cck-svg-icon__svg){fill:var(--form_field-color-icon)}:where([data-cck-theme-name=cocokits] .cck-avatar){align-items:center;border-radius:50%;display:flex;justify-content:center;overflow:hidden}:where([data-cck-theme-name=cocokits] .cck-avatar__fallback-image),:where([data-cck-theme-name=cocokits] .cck-avatar__image),:where([data-cck-theme-name=cocokits] .cck-avatar__placeholder-image){border-radius:inherit;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}:where([data-cck-theme-name=cocokits] .cck-avatar--with-label){background-color:var(--color-brand-light);color:var(--color-font-default)}:where([data-cck-theme-name=cocokits] .cck-avatar--clickable){cursor:pointer}:where([data-cck-theme-name=cocokits] .cck-avatar__size--xs){height:var(--size-28);width:var(--size-28)}:where([data-cck-theme-name=cocokits] .cck-avatar__size--xs.cck-avatar--with-label){font:var(--text-xs-semibold)}:where([data-cck-theme-name=cocokits] .cck-avatar__size--sm){height:var(--size-32);width:var(--size-32)}:where([data-cck-theme-name=cocokits] .cck-avatar__size--sm.cck-avatar--with-label){font:var(--text-sm-semibold)}:where([data-cck-theme-name=cocokits] .cck-avatar__size--md){height:var(--size-40);width:var(--size-40)}:where([data-cck-theme-name=cocokits] .cck-avatar__size--md.cck-avatar--with-label){font:var(--text-md-semibold)}:where([data-cck-theme-name=cocokits] .cck-avatar__size--lg){height:var(--size-48);width:var(--size-48)}:where([data-cck-theme-name=cocokits] .cck-avatar__size--lg.cck-avatar--with-label){font:var(--text-lg-semibold)}:where([data-cck-theme-name=cocokits] .cck-avatar-group){display:flex}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-left){direction:rtl}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-left.cck-avatar-group__size--xs .cck-avatar):not(:last-of-type){margin-left:-10px}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-left.cck-avatar-group__size--sm .cck-avatar):not(:last-of-type){margin-left:-10px}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-left.cck-avatar-group__size--md .cck-avatar):not(:last-of-type){margin-left:-14px}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-left.cck-avatar-group__size--lg .cck-avatar):not(:last-of-type){margin-left:-16px}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-right.cck-avatar-group__size--xs .cck-avatar):not(:first-of-type){margin-left:-10px}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-right.cck-avatar-group__size--sm .cck-avatar):not(:first-of-type){margin-left:-10px}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-right.cck-avatar-group__size--md .cck-avatar):not(:first-of-type){margin-left:-14px}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-right.cck-avatar-group__size--lg .cck-avatar):not(:first-of-type){margin-left:-16px}:where([data-cck-theme-name=cocokits] .cck-avatar-group .cck-avatar){border:2px solid var(--color-border-light)}:where([data-cck-theme-name=cocokits] .cck-avatar-label){align-items:center;display:flex}:where([data-cck-theme-name=cocokits] .cck-avatar-label__title){color:var(--color-font-default)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__description){color:var(--color-font-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__label-wrapper){display:flex}:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-right){flex-direction:row-reverse}:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-right .cck-avatar-label__label-wrapper){text-align:right}:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-left){flex-direction:row}:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-top){flex-direction:column}:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-bottom){flex-direction:column-reverse}:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-bottom.cck-avatar-label--label-vertical .cck-avatar-label__label-wrapper),:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-top.cck-avatar-label--label-vertical .cck-avatar-label__label-wrapper){align-items:center}:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-left.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper),:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-right.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){align-items:center}:where([data-cck-theme-name=cocokits] .cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){align-items:center;flex-direction:row}:where([data-cck-theme-name=cocokits] .cck-avatar-label--label-vertical .cck-avatar-label__label-wrapper){flex-direction:column;justify-content:center}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--xs){gap:var(--size-12)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--xs .cck-avatar-label__label-wrapper){font:var(--text-xs-medium)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--xs.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){gap:var(--size-12)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--sm){gap:var(--size-12)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--sm .cck-avatar-label__label-wrapper){font:var(--text-sm-medium)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--sm.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){gap:var(--size-12)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--md){gap:var(--size-12)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--md .cck-avatar-label__label-wrapper){font:var(--text-md-medium)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--md.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){gap:var(--size-12)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--lg){gap:var(--size-20)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--lg .cck-avatar-label__label-wrapper){font:var(--text-md-medium)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--lg.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){gap:var(--size-20)}:where([data-cck-theme-name=cocokits] .cck-accordion){display:flex;flex-direction:column}:where([data-cck-theme-name=cocokits] .cck-accordion__default.cck-accordion__size--sm){gap:var(--size-12)}:where([data-cck-theme-name=cocokits] .cck-accordion__default.cck-accordion__size--md){gap:var(--size-20)}:where([data-cck-theme-name=cocokits] .cck-accordion__group){border:1px solid var(--color-border-default);border-radius:6px}:where([data-cck-theme-name=cocokits] .cck-accordion-header--trigger-icon>.cck-accordion-header__icon-btn):hover{background-color:var(--color-h-contrast-alpha-1)}:where([data-cck-theme-name=cocokits] .cck-accordion-header--trigger-header){cursor:pointer}:where([data-cck-theme-name=cocokits] .cck-accordion-header--trigger-header>.cck-accordion-header__icon-btn):hover{background-color:transparent}:where([data-cck-theme-name=cocokits] .cck-accordion-header){align-items:center;color:var(--color-font-default);display:flex}:where([data-cck-theme-name=cocokits] .cck-accordion-header .cck-svg-icon.cck-svg-icon--default-color){fill:var(--color-font-default)}:where([data-cck-theme-name=cocokits] .cck-accordion-header>.cck-accordion-header__icon-btn){background-color:transparent;fill:var(--color-font-default);align-items:center;border:none;border-radius:4px;cursor:pointer;display:flex;justify-self:center;outline:none}:where([data-cck-theme-name=cocokits] .cck-accordion-header--icon-right>.cck-accordion-header__icon-btn){margin-left:auto}:where([data-cck-theme-name=cocokits] .cck-accordion-header--icon-left){flex-direction:row-reverse;justify-content:flex-end}:where([data-cck-theme-name=cocokits] .cck-accordion__size--sm>.cck-accordion-panel>.cck-accordion-header){height:var(--size-48)}:where([data-cck-theme-name=cocokits] .cck-accordion__size--sm>.cck-accordion-panel>.cck-accordion-header>.cck-accordion-header__icon-btn){height:36px;width:36px}:where([data-cck-theme-name=cocokits] .cck-accordion__size--md>.cck-accordion-panel .cck-accordion-header){height:var(--size-56)}:where([data-cck-theme-name=cocokits] .cck-accordion__size--md>.cck-accordion-panel .cck-accordion-header>.cck-accordion-header__icon-btn){height:36px;width:36px}:where([data-cck-theme-name=cocokits] .cck-accordion-panel>.cck-accordion-header){font:var(--text-md-medium)}:where([data-cck-theme-name=cocokits] .cck-accordion-panel>.cck-accordion-header.cck-accordion-header--icon-right){padding-left:var(--size-20);padding-right:calc(var(--size-20) - 10px)}:where([data-cck-theme-name=cocokits] .cck-accordion-panel>.cck-accordion-header.cck-accordion-header--icon-left){padding-left:calc(var(--size-20) - 10px);padding-right:var(--size-20)}:where([data-cck-theme-name=cocokits] .cck-accordion__default>.cck-accordion-panel--collapsed>.cck-accordion-header),:where([data-cck-theme-name=cocokits] .cck-accordion__group>.cck-accordion-panel--collapsed>.cck-accordion-header){background-color:var(--color-h-contrast-alpha-2)}:where([data-cck-theme-name=cocokits] .cck-accordion__basic>.cck-accordion-panel>.cck-accordion-header--trigger-header):hover{background-color:var(--color-h-contrast-alpha-2)}:where([data-cck-theme-name=cocokits] .cck-accordion-panel--disabled){color:var(--color-disabled-font);opacity:.5}:where([data-cck-theme-name=cocokits] .cck-accordion-panel--disabled>.cck-accordion-header){color:currentcolor}:where([data-cck-theme-name=cocokits] .cck-accordion-panel--disabled>.cck-accordion-header.cck-accordion-header--trigger-header){cursor:not-allowed}:where([data-cck-theme-name=cocokits] .cck-accordion-panel--disabled>.cck-accordion-header>.cck-accordion-header__icon-btn){display:none}:where([data-cck-theme-name=cocokits] .cck-accordion-panel){color:var(--color-font-default);font:var(--text-md-regular);overflow:hidden;transition:padding-bottom .3s}:where([data-cck-theme-name=cocokits] .cck-accordion--instant-animation>.cck-accordion-panel){transition:none}:where([data-cck-theme-name=cocokits] .cck-accordion-panel--collapsed){padding-bottom:0}:where([data-cck-theme-name=cocokits] .cck-accordion__size--sm>.cck-accordion-panel.cck-accordion-panel--expanded){padding-bottom:var(--size-20)}:where([data-cck-theme-name=cocokits] .cck-accordion__size--sm>.cck-accordion-panel>.cck-accordion-panel__content-wrapper){padding-left:var(--size-20);padding-right:var(--size-20)}:where([data-cck-theme-name=cocokits] .cck-accordion__size--md>.cck-accordion-panel.cck-accordion-panel--expanded){padding-bottom:var(--size-20)}:where([data-cck-theme-name=cocokits] .cck-accordion__size--md>.cck-accordion-panel>.cck-accordion-panel__content-wrapper){padding-left:var(--size-20);padding-right:var(--size-20)}:where([data-cck-theme-name=cocokits] .cck-accordion__default>.cck-accordion-panel){border:1px solid var(--color-border-default);border-radius:6px}:where([data-cck-theme-name=cocokits] .cck-accordion__basic>.cck-accordion-panel):not(:last-of-type),:where([data-cck-theme-name=cocokits] .cck-accordion__group>.cck-accordion-panel):not(:last-of-type){border-bottom:1px solid var(--color-border-default)}:where([data-cck-theme-name=cocokits] .cck-tabs){opacity:1}:where([data-cck-theme-name=cocokits] .cck-tab){opacity:1}:where([data-cck-theme-name=frames-x] .cck-button){align-items:center;border:none;border-radius:var(--radi-6);box-sizing:border-box;cursor:pointer;display:inline-flex;justify-content:center;margin:0;outline:transparent;transition:all .1s}:where([data-cck-theme-name=frames-x] .cck-button):focus-visible{box-shadow:0 0 0 3px var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-button .cck-svg-icon--default-color .cck-svg-icon__svg){fill:currentcolor}:where([data-cck-theme-name=frames-x] .cck-button__backdrop){display:none}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--brand){background-color:var(--state-brand-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--brand):hover{background-color:var(--state-brand-hover)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--brand):active{background-color:var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--brand):disabled{background-color:var(--base-fill-1);color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--highlight){background-color:var(--state-highlight-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--highlight):hover{background-color:var(--state-highlight-hover)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--highlight):active{background-color:var(--state-highlight-selected)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--highlight):disabled{background-color:var(--base-fill-1);color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--success){background-color:var(--state-success-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--success):hover{background-color:var(--state-success-hover)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--success):active{background-color:var(--state-success-selected)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--success):disabled{background-color:var(--base-fill-1);color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--danger){background-color:var(--state-danger-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--danger):hover{background-color:var(--state-danger-hover)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--danger):active{background-color:var(--state-danger-selected)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--danger):disabled{background-color:var(--base-fill-1);color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__secondary){background-color:var(--base-surface-2);border:1px solid var(--base-border);color:var(--text-dark-primary);outline:1px solid transparent}:where([data-cck-theme-name=frames-x] .cck-button__secondary):hover{background-color:var(--base-fill-2);border:1px solid var(--base-fill-2)}:where([data-cck-theme-name=frames-x] .cck-button__secondary):active{background-color:var(--base-fill-1);border:1px solid var(--base-border)}:where([data-cck-theme-name=frames-x] .cck-button__secondary):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__ghost){background-color:var(--base-surface-1);outline:1px solid transparent}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--brand){border:1px solid var(--state-brand-active);color:var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--brand):hover{border:1px solid var(--state-brand-hover);outline:1px solid var(--state-brand-hover)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--brand):active{border:1px solid var(--state-brand-selected);outline:1px solid var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--brand):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--highlight){border:1px solid var(--state-highlight-active);color:var(--state-highlight-active)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--highlight):hover{border:1px solid var(--state-highlight-hover);outline:1px solid var(--state-highlight-hover)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--highlight):active{border:1px solid var(--state-highlight-selected);outline:1px solid var(--state-highlight-selected)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--highlight):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--success){border:1px solid var(--state-success-active);color:var(--state-success-active)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--success):hover{border:1px solid var(--state-success-hover);outline:1px solid var(--state-success-hover)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--success):active{border:1px solid var(--state-success-selected);outline:1px solid var(--state-success-selected)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--success):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--danger){border:1px solid var(--state-danger-active);color:var(--state-danger-active)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--danger):hover{border:1px solid var(--state-danger-hover);outline:1px solid var(--state-danger-hover)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--danger):active{border:1px solid var(--state-danger-selected);outline:1px solid var(--state-danger-selected)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--danger):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__size--sm){font:var(--text-sm-font-semibold);gap:var(--spacing-3);height:36px;padding:var(--spacing-0) var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-button__size--md){font:var(--text-base-font-semibold);gap:var(--spacing-5);height:44px;padding:var(--spacing-0) var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-button__size--lg){font:var(--text-lg-font-semibold);gap:var(--spacing-7);height:44px;padding:var(--spacing-0) var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-button__size--xl){font:var(--text-xl-font-semibold);gap:var(--spacing-7);height:56px;padding:var(--spacing-0) var(--spacing-10)}:where([data-cck-theme-name=frames-x] .cck-checkbox){display:flex;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-checkbox__wrapper){align-items:center;display:inline-flex;vertical-align:middle}:where([data-cck-theme-name=frames-x] .cck-checkbox__input-wrapper){box-sizing:content-box;cursor:pointer;display:inline-block;flex-shrink:0;line-height:0;position:relative;white-space:nowrap}:where([data-cck-theme-name=frames-x] .cck-checkbox__input){cursor:inherit;height:100%;left:0;margin:0;opacity:0;padding:0;position:absolute;right:0;top:0;width:100%}:where([data-cck-theme-name=frames-x] .cck-checkbox__input:focus-visible~.cck-checkbox__background){border:2px solid var(--state-brand-selected);box-shadow:0 0 0 1px var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-checkbox__background){align-items:center;background-color:var(--base-fill-1);border:2px solid var(--base-border);border-radius:var(--radi-4);box-sizing:border-box;display:flex;height:100%;justify-content:center;pointer-events:none;position:absolute;transition:background-color 90ms cubic-bezier(.4,0,.6,1),border-color 90ms cubic-bezier(.4,0,.6,1);width:100%;will-change:background-color,outline-color}:where([data-cck-theme-name=frames-x] .cck-checkbox.cck-checkbox--disabled .cck-checkbox__background){background-color:var(--base-disabled);border:2px solid transparent}:where([data-cck-theme-name=frames-x] .cck-checkbox.cck-checkbox--disabled .cck-checkbox__label){color:var(--base-disabled)}:where([data-cck-theme-name=frames-x] .cck-checkbox.cck-checkbox--disabled *){cursor:default}:where([data-cck-theme-name=frames-x] .cck-checkbox--checked .cck-checkbox__background){background-color:var(--state-brand-active);border:2px solid var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-checkbox--checked .cck-checkbox__checkmark){opacity:1}:where([data-cck-theme-name=frames-x] .cck-checkbox--indeterminate .cck-checkbox__background){background-color:var(--state-brand-active);border:2px solid var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-checkbox--indeterminate .cck-checkbox__checkmark){opacity:0;transform:rotate(45deg);transition:opacity 90ms cubic-bezier(.4,0,.6,1),transform 90ms cubic-bezier(.4,0,.6,1)}:where([data-cck-theme-name=frames-x] .cck-checkbox--indeterminate .cck-checkbox__mixedmark){opacity:1;transform:scaleX(1) rotate(0deg)}:where([data-cck-theme-name=frames-x] .cck-checkbox__mixedmark){border:2px solid #fff;border-radius:100px;height:0;margin:2px;opacity:0;transform:scaleX(0) rotate(0deg);transition:opacity 90ms cubic-bezier(.4,0,.6,1),transform 90ms cubic-bezier(.4,0,.6,1);width:100%}:where([data-cck-theme-name=frames-x] .cck-checkbox__checkmark){color:#fff;inset:0;opacity:0;padding:2px;position:absolute;transition:opacity .18s cubic-bezier(.4,0,.6,1);width:100%}:where([data-cck-theme-name=frames-x] .cck-checkbox__checkmark-path){fill:currentcolor}:where([data-cck-theme-name=frames-x] .cck-checkbox__label){color:var(--text-dark-primary);cursor:pointer;margin-left:0;margin-right:auto;order:0;padding-left:0;padding-right:0;text-align:left;white-space:nowrap}:where([data-cck-theme-name=frames-x] .cck-checkbox__label):empty{display:none}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--sm .cck-checkbox__wrapper){gap:var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--sm .cck-checkbox__input-wrapper){height:22px;width:22px}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--sm .cck-checkbox__label){font:var(--text-sm-font-medium)}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--md .cck-checkbox__wrapper){gap:var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--md .cck-checkbox__input-wrapper){height:24px;width:24px}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--md .cck-checkbox__label){font:var(--text-base-font-medium)}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--lg .cck-checkbox__wrapper){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--lg .cck-checkbox__input-wrapper){height:32px;width:32px}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--lg .cck-checkbox__label){font:var(--text-lg-font-medium)}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--xl .cck-checkbox__wrapper){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--xl .cck-checkbox__input-wrapper){height:32px;width:32px}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--xl .cck-checkbox__label){font:var(--text-xl-font-medium)}:where([data-cck-theme-name=frames-x] .cck-chip){align-items:center;background-color:var(--base-surface-2);border:1px solid var(--base-border);border-radius:var(--radi-5);color:var(--text-dark-primary);cursor:default;display:flex;transition:all .1s}:where([data-cck-theme-name=frames-x] .cck-chip--disabled){background-color:var(--base-fill-1);border:1px solid transparent;color:var(--base-disabled);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-chip__content-wrapper){align-items:center;display:flex;justify-content:center}:where([data-cck-theme-name=frames-x] .cck-chip__remove-icon-wrapper){align-items:center;display:flex;flex-shrink:0;justify-content:center}:where([data-cck-theme-name=frames-x] .cck-chip__remove-icon-wrapper .cck-icon-button){background-color:transparent;border-radius:50%;color:var(--base-fill-4);height:24px;padding:0;width:24px}:where([data-cck-theme-name=frames-x] .cck-chip__remove-icon-wrapper .cck-icon-button):hover{background-color:var(--base-fill-1)}:where([data-cck-theme-name=frames-x] .cck-chip__remove-icon-wrapper .cck-icon-button .cck-svg-icon){height:100%;width:100%}:where([data-cck-theme-name=frames-x] .cck-chip__size--sm){font:var(--text-xs-font-medium);gap:var(--spacing-4);height:26px;padding:0 var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-chip__size--sm.cck-chip--removable){padding:0 var(--spacing-6) 0 var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-chip__size--md){font:var(--text-base-font-medium);gap:var(--spacing-4);height:34px;padding:0 var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-chip__size--md.cck-chip--removable){padding:0 var(--spacing-7) 0 var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-chip__size--lg){font:var(--text-lg-font-medium);gap:var(--spacing-6);height:44px;padding:0 var(--spacing-9)}:where([data-cck-theme-name=frames-x] .cck-chip__size--lg.cck-chip--removable){padding:0 var(--spacing-8) 0 var(--spacing-9)}:where([data-cck-theme-name=frames-x] .cck-chip-list){align-items:stretch;display:flex;flex-wrap:wrap;justify-content:flex-start}:where([data-cck-theme-name=frames-x] .cck-chip-list__input){background:transparent;border:none;color:var(--text-dark-primary);flex:1;font:var(--text-base-font-medium);outline:none}:where([data-cck-theme-name=frames-x] .cck-chip-list__input::-moz-placeholder){color:var(--text-dark-tertiary);-moz-transition:color .1s ease-in;transition:color .1s ease-in}:where([data-cck-theme-name=frames-x] .cck-chip-list__input::placeholder){color:var(--text-dark-tertiary);transition:color .1s ease-in}:where([data-cck-theme-name=frames-x] .cck-chip-list__input::-moz-placeholder):not(:focus){color:transparent}:where([data-cck-theme-name=frames-x] .cck-chip-list__input::placeholder):not(:focus){color:transparent}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--sm){gap:6px}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--sm .cck-chip-list__input){font:var(--text-xs-font-medium);height:26px;margin-left:var(--spacing-5)}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--sm .cck-chip-list__input):first-child{margin-left:calc(var(--spacing-6) - 4px)}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--md){gap:6px}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--md .cck-chip-list__input){font:var(--text-base-font-medium);height:34px;margin-left:var(--spacing-6)}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--md .cck-chip-list__input):first-child{margin-left:calc(var(--spacing-7) - 4px)}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--lg){gap:6px}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--lg .cck-chip-list__input){font:var(--text-lg-font-medium);height:44px;margin-left:var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--lg .cck-chip-list__input):first-child{margin-left:calc(var(--spacing-7) - 6px)}:where([data-cck-theme-name=frames-x] *){box-sizing:border-box}:where([data-cck-theme-name=frames-x] .cck-divider){background-color:var(--base-border);display:block;flex-shrink:0}:where([data-cck-theme-name=frames-x] .cck-divider__horizontal){margin:4px 0;width:100%}:where([data-cck-theme-name=frames-x] .cck-divider__horizontal.cck-divider__size--sm){height:1px}:where([data-cck-theme-name=frames-x] .cck-divider__horizontal.cck-divider__size--md){height:2px;width:100%}:where([data-cck-theme-name=frames-x] .cck-divider__vertical){height:100%;margin:0 4px}:where([data-cck-theme-name=frames-x] .cck-divider__vertical.cck-divider__size--sm){width:1px}:where([data-cck-theme-name=frames-x] .cck-divider__vertical.cck-divider__size--md){width:2px}:where([data-cck-theme-name=frames-x] .cck-error){color:var(--state-danger-active);display:flex;font:var(--text-sm-font-medium);gap:6px}:where([data-cck-theme-name=frames-x] .cck-error .cck-svg-icon--default-color .cck-svg-icon__svg){fill:currentcolor}:where([data-cck-theme-name=frames-x] .cck-form-field){align-items:flex-start;display:flex;flex-direction:column;gap:10px;min-width:100px}:where([data-cck-theme-name=frames-x] .cck-form-field .cck-select){flex:1;height:100%;width:100%}:where([data-cck-theme-name=frames-x] .cck-form-field .cck-input){flex:1;width:100%}:where([data-cck-theme-name=frames-x] .cck-form-field--error .cck-form-field__wrapper){border:1px solid var(--state-danger-active);outline:1px solid var(--state-danger-active)}:where([data-cck-theme-name=frames-x] .cck-form-field--focused .cck-form-field__wrapper){background-color:var(--base-surface-2);border:1px solid var(--state-brand-active);outline:1px solid var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-form-field--disabled .cck-form-field__wrapper){background-color:var(--base-fill-1);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-form-field__wrapper){align-items:stretch;background-color:var(--base-surface-1);border:1px solid var(--base-border);border-radius:var(--radi-6);display:flex;flex-direction:row;outline:1px solid transparent;overflow:hidden;width:100%}:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm.cck-form-field--with-input .cck-form-field__wrapper),:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm.cck-form-field--with-select .cck-form-field__wrapper){height:36px}:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm.cck-form-field--with-input .cck-form-field__input-wrapper),:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm.cck-form-field--with-select .cck-form-field__input-wrapper){padding:0 var(--spacing-6) 0 var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm .cck-form-field--with-textarea .cck-form-field__input-wrapper){padding:var(--spacing-6) var(--spacing-6) var(--spacing-6) var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm.cck-form-field--with-chip-list .cck-form-field__input-wrapper){padding:4px}:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm .cck-input),:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm .cck-leading),:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm .cck-select),:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm .cck-textarea),:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm .cck-trailing){font:var(--text-sm-font-medium)}:where([data-cck-theme-name=frames-x] .cck-form-field__size--md.cck-form-field--with-input .cck-form-field__wrapper),:where([data-cck-theme-name=frames-x] .cck-form-field__size--md.cck-form-field--with-select .cck-form-field__wrapper){height:44px}:where([data-cck-theme-name=frames-x] .cck-form-field__size--md.cck-form-field--with-input .cck-form-field__input-wrapper),:where([data-cck-theme-name=frames-x] .cck-form-field__size--md.cck-form-field--with-select .cck-form-field__input-wrapper){padding:0 var(--spacing-7) 0 var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-form-field__size--md .cck-form-field--with-textarea .cck-form-field__input-wrapper){padding:var(--spacing-7) var(--spacing-7) var(--spacing-7) var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-form-field__size--md.cck-form-field--with-chip-list .cck-form-field__input-wrapper){padding:4px}:where([data-cck-theme-name=frames-x] .cck-form-field__size--md .cck-input),:where([data-cck-theme-name=frames-x] .cck-form-field__size--md .cck-leading),:where([data-cck-theme-name=frames-x] .cck-form-field__size--md .cck-select),:where([data-cck-theme-name=frames-x] .cck-form-field__size--md .cck-textarea),:where([data-cck-theme-name=frames-x] .cck-form-field__size--md .cck-trailing){font:var(--text-base-font-medium)}:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg.cck-form-field--with-input .cck-form-field__wrapper),:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg.cck-form-field--with-select .cck-form-field__wrapper){height:56px}:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg.cck-form-field--with-input .cck-form-field__input-wrapper),:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg.cck-form-field--with-select .cck-form-field__input-wrapper){padding:0 var(--spacing-7) 0 var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg .cck-form-field--with-textarea .cck-form-field__input-wrapper){padding:var(--spacing-7) var(--spacing-7) var(--spacing-7) var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg.cck-form-field--with-chip-list .cck-form-field__input-wrapper){padding:6px}:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg .cck-input),:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg .cck-leading),:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg .cck-select),:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg .cck-textarea),:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg .cck-trailing){font:var(--text-lg-font-medium)}:where([data-cck-theme-name=frames-x] .cck-form-field__feedback-wrapper){display:flex;flex-direction:column;overflow:hidden}:where([data-cck-theme-name=frames-x] .cck-form-field__feedback-wrapper):empty{display:none}:where([data-cck-theme-name=frames-x] .cck-form-field__input-wrapper){align-items:center;display:flex;flex:1;flex-direction:row;gap:8px;min-width:0}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list .cck-chip-list){flex:1}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list .cck-form-field__wrapper){cursor:text}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list .cck-prefix),:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list .cck-suffix){align-self:flex-start}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list.cck-form-field__size--sm .cck-suffix){margin-right:4px;margin-top:6px}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list.cck-form-field__size--md .cck-suffix){margin-right:4px;margin-top:8px}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list.cck-form-field__size--lg .cck-suffix){margin-left:4px;margin-right:8px;margin-top:12px}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list.cck-form-field__size--sm .cck-prefix){margin-left:4px;margin-top:6px}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list.cck-form-field__size--md .cck-prefix){margin-left:4px;margin-top:8px}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list.cck-form-field__size--lg .cck-prefix){margin-left:8px;margin-right:4px;margin-top:12px}:where([data-cck-theme-name=frames-x] .cck-form-field--with-textarea .cck-form-field__input-wrapper){padding:10px 10px 10px 16px}:where([data-cck-theme-name=frames-x] .cck-form-field--with-textarea .cck-form-field__input-wrapper):hover:not(:has(textarea:focus-visible)){background-color:var(--base-fill-1)}:where([data-cck-theme-name=frames-x] .cck-form-field--with-input .cck-form-field__input-wrapper):hover:not(:has(input:focus-visible)),:where([data-cck-theme-name=frames-x] .cck-form-field--with-select .cck-form-field__input-wrapper):hover:not(:has(input:focus-visible)){background-color:var(--base-fill-1)}:where([data-cck-theme-name=frames-x] .cck-hint){color:var(--text-dark-secondary);display:flex;font:var(--text-sm-font-medium);gap:6px}:where([data-cck-theme-name=frames-x] .cck-hint .cck-svg-icon--default-color .cck-svg-icon__svg){fill:currentcolor}:where([data-cck-theme-name=frames-x] .cck-hint__color--default){color:var(--text-dark-secondary)}:where([data-cck-theme-name=frames-x] .cck-hint__color--success){color:var(--state-success-active)}:where([data-cck-theme-name=frames-x] .cck-svg-icon){align-items:center;display:flex;flex-shrink:0;justify-content:center}:where([data-cck-theme-name=frames-x] .cck-svg-icon__svg){height:100%;width:100%}:where([data-cck-theme-name=frames-x] .cck-svg-icon__size--xs){height:var(--icon-xs);width:var(--icon-xs)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__size--sm){height:var(--icon-sm);width:var(--icon-sm)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__size--md){height:var(--icon-md);width:var(--icon-md)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__size--lg){height:var(--icon-lg);width:var(--icon-lg)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__size--xl){height:var(--icon-xl);width:var(--icon-xl)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__size--2xl){height:var(--icon-2xl);width:var(--icon-2xl)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__size--3xl){height:var(--icon-3xl);width:var(--icon-3xl)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__size--4xl){height:var(--icon-4xl);width:var(--icon-4xl)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__color--grey){fill:var(--base-fill-4)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__color--brand){fill:var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__color--highlight){fill:var(--state-highlight-active)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__color--success){fill:var(--state-success-active)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__color--danger){fill:var(--state-danger-active)}:where([data-cck-theme-name=frames-x] .cck-icon-button){align-items:center;border:none;border-radius:var(--radi-6);box-sizing:border-box;cursor:pointer;display:inline-flex;justify-content:center;margin:0;outline:transparent;transition:all .1s}:where([data-cck-theme-name=frames-x] .cck-icon-button .cck-svg-icon--default-color){fill:currentcolor}:where([data-cck-theme-name=frames-x] .cck-icon-button):focus-visible{box-shadow:0 0 0 3px var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--brand){background-color:var(--state-brand-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--brand):hover{background-color:var(--state-brand-hover)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--brand):active{background-color:var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--brand):disabled{background-color:var(--base-fill-1);color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--highlight){background-color:var(--state-highlight-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--highlight):hover{background-color:var(--state-highlight-hover)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--highlight):active{background-color:var(--state-highlight-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--highlight):disabled{background-color:var(--base-fill-1);color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--success){background-color:var(--state-success-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--success):hover{background-color:var(--state-success-hover)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--success):active{background-color:var(--state-success-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--success):disabled{background-color:var(--base-fill-1);color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--danger){background-color:var(--state-danger-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--danger):hover{background-color:var(--state-danger-hover)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--danger):active{background-color:var(--state-danger-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--danger):disabled{background-color:var(--base-fill-1);color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__secondary){background-color:var(--base-surface-2);border:1px solid var(--base-border);color:var(--text-dark-primary);outline:1px solid transparent}:where([data-cck-theme-name=frames-x] .cck-icon-button__secondary):hover{background-color:var(--base-fill-2);border:1px solid var(--base-fill-2)}:where([data-cck-theme-name=frames-x] .cck-icon-button__secondary):active{background-color:var(--base-fill-1);border:1px solid var(--base-border)}:where([data-cck-theme-name=frames-x] .cck-icon-button__secondary):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost){background-color:var(--base-surface-1);outline:1px solid transparent}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--brand){border:1px solid var(--state-brand-active);color:var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--brand):hover{border:1px solid var(--state-brand-hover);outline:1px solid var(--state-brand-hover)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--brand):active{border:1px solid var(--state-brand-selected);outline:1px solid var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--brand):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--highlight){border:1px solid var(--state-highlight-active);color:var(--state-highlight-active)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--highlight):hover{border:1px solid var(--state-highlight-hover);outline:1px solid var(--state-highlight-hover)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--highlight):active{border:1px solid var(--state-highlight-selected);outline:1px solid var(--state-highlight-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--highlight):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--success){border:1px solid var(--state-success-active);color:var(--state-success-active)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--success):hover{border:1px solid var(--state-success-hover);outline:1px solid var(--state-success-hover)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--success):active{border:1px solid var(--state-success-selected);outline:1px solid var(--state-success-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--success):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--danger){border:1px solid var(--state-danger-active);color:var(--state-danger-active)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--danger):hover{border:1px solid var(--state-danger-hover);outline:1px solid var(--state-danger-hover)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--danger):active{border:1px solid var(--state-danger-selected);outline:1px solid var(--state-danger-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--danger):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__size--sm){height:36px;width:36px}:where([data-cck-theme-name=frames-x] .cck-icon-button__size--sm .cck-svg-icon--default-size){height:var(--icon-md);width:var(--icon-md)}:where([data-cck-theme-name=frames-x] .cck-icon-button__size--md){height:44px;width:44px}:where([data-cck-theme-name=frames-x] .cck-icon-button__size--md .cck-svg-icon--default-size){height:var(--icon-lg);width:var(--icon-lg)}:where([data-cck-theme-name=frames-x] .cck-icon-button__size--lg){height:44px;width:44px}:where([data-cck-theme-name=frames-x] .cck-icon-button__size--lg .cck-svg-icon--default-size){height:var(--icon-xl);width:var(--icon-xl)}:where([data-cck-theme-name=frames-x] .cck-icon-button__size--xl){height:56px;width:56px}:where([data-cck-theme-name=frames-x] .cck-icon-button__size--xl .cck-svg-icon--default-size){height:var(--icon-2xl);width:var(--icon-2xl)}:where([data-cck-theme-name=frames-x] .cck-input){background-color:transparent;border:none;color:var(--text-dark-primary);font:var(--text-base-font-medium);outline:none;text-overflow:ellipsis}:where([data-cck-theme-name=frames-x] .cck-input::-moz-placeholder){color:var(--text-dark-tertiary)}:where([data-cck-theme-name=frames-x] .cck-input::placeholder){color:var(--text-dark-tertiary)}:where([data-cck-theme-name=frames-x] .cck-input):disabled{color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-label){color:var(--text-dark-secondary);display:flex;font:var(--text-base-font-regular)}:where([data-cck-theme-name=frames-x] .cck-label__required-marker){margin-left:4px}:where([data-cck-theme-name=frames-x] .cck-leading){align-items:center;background-color:var(--base-surface-2);color:var(--text-dark-tertiary);cursor:default;display:flex;font:var(--text-base-font-medium);gap:var(--spacing-4);justify-content:center;padding:0 var(--spacing-7);-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-leading--clickable){cursor:pointer;transition:background-color .1s}:where([data-cck-theme-name=frames-x] .cck-leading--clickable):active{background-color:var(--base-fill-1)}:where([data-cck-theme-name=frames-x] .cck-leading--clickable):hover{background-color:var(--base-fill-2)}:where([data-cck-theme-name=frames-x] .cck-menu){background-color:var(--base-surface-1);border:1px solid var(--base-border);border-radius:var(--radi-6);box-shadow:0 8px 10px -6px rgba(13,16,23,.039),0 18px 22px -4px rgba(13,16,23,.078);display:flex;flex-direction:column;margin:4px 0;overflow:hidden;padding:0}:where([data-cck-theme-name=frames-x] .cck-menu__overlay .cck-overlay__backdrop){background-color:transparent}:where([data-cck-theme-name=frames-x] .cck-menu-item){align-items:center;color:var(--text-dark-secondary);display:flex;font:var(--text-base-font-medium);gap:var(--spacing-6);justify-content:flex-start;padding:var(--spacing-6) var(--spacing-5)}:where([data-cck-theme-name=frames-x] .cck-menu-item):not(.cck-menu-item--disabled){cursor:pointer}:where([data-cck-theme-name=frames-x] .cck-menu-item--disabled .cck-svg-icon.cck-svg-icon--default-color),:where([data-cck-theme-name=frames-x] .cck-menu-item--disabled){color:var(--base-disabled)}:where([data-cck-theme-name=frames-x] .cck-menu-item):not(.cck-menu-item--disabled):hover{background-color:var(--base-fill-1)}:where([data-cck-theme-name=frames-x] .cck-menu-item .cck-svg-icon.cck-svg-icon--default-size){height:var(--icon-lg);width:var(--icon-lg)}:where([data-cck-theme-name=frames-x] .cck-menu-item .cck-svg-icon.cck-svg-icon--default-color .cck-svg-icon__svg){fill:currentcolor}:where([data-cck-theme-name=frames-x] .cck-select__options-wrapper){background-color:var(--base-surface-1);border:1px solid var(--base-border);border-radius:var(--radi-6);height:inherit;margin-top:6px;max-height:inherit;overflow:auto}:where([data-cck-theme-name=frames-x] .cck-option__content-wrapper){flex:1}:where([data-cck-theme-name=frames-x] .cck-option){align-items:center;color:var(--text-dark-secondary);display:flex;font:var(--text-base-font-medium);gap:8px;padding:0 12px}:where([data-cck-theme-name=frames-x] .cck-option):not(.cck-option--disabled){cursor:pointer}:where([data-cck-theme-name=frames-x] .cck-option--disabled){color:var(--base-disabled);-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-option):not(.cck-option--disabled):hover{background-color:var(--base-fill-1)}:where([data-cck-theme-name=frames-x] .cck-option .cck-checkbox__input-wrapper){height:22px;width:22px}:where([data-cck-theme-name=frames-x] .cck-option--single.cck-option--selected){color:var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-option__size--sm){height:40px}:where([data-cck-theme-name=frames-x] .cck-option__size--md){height:48px}:where([data-cck-theme-name=frames-x] .cck-option__size--lg){height:56px}:where([data-cck-theme-name=frames-x] .cck-option__selected-checkmark .cck-svg-icon){height:var(--icon-md);width:var(--icon-md);fill:currentcolor}:where([data-cck-theme-name=frames-x] .cck-option-group){display:flex;flex-direction:column}:where([data-cck-theme-name=frames-x] .cck-option-group--label){align-items:center;color:var(--text-dark-primary);display:flex;font:var(--text-base-font-bold);padding:0 12px}:where([data-cck-theme-name=frames-x] .cck-option-group--disabled .cck-option-group--label){color:var(--base-disabled);-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-option-group .cck-option){padding:0 24px}:where([data-cck-theme-name=frames-x] .cck-option-group__size--sm .cck-option-group--label){height:40px}:where([data-cck-theme-name=frames-x] .cck-option-group__size--md .cck-option-group--label){height:48px}:where([data-cck-theme-name=frames-x] .cck-option-group__size--lg .cck-option-group--label){height:56px}:where([data-cck-theme-name=frames-x] .cck-prefix){flex-grow:0}:where([data-cck-theme-name=frames-x] .cck-prefix .cck-svg-icon.cck-svg-icon--default-size){height:var(--icon-md);width:var(--icon-md)}:where([data-cck-theme-name=frames-x] .cck-radio-button){color:var(--text-dark-primary);cursor:pointer}:where([data-cck-theme-name=frames-x] .cck-radio-button.cck-radio-button--disabled){color:var(--base-disabled);cursor:default;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-radio-button.cck-radio-button--disabled .cck-radio-button__input-wrapper){background-color:var(--base-disabled);border-color:transparent;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-radio-button.cck-radio-button--disabled .cck-radio-button__label){-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-radio-button:hover .cck-radio-button__input-wrapper){box-shadow:0 0 0 3px var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-radio-button__wrapper){align-items:center;display:inline-flex;vertical-align:middle}:where([data-cck-theme-name=frames-x] .cck-radio-button__input-wrapper){align-items:center;background-color:var(--base-fill-1);border:2px solid var(--base-border);border-radius:50%;display:flex;flex-shrink:0;justify-content:center;position:relative}:where([data-cck-theme-name=frames-x] .cck-radio-button__input){cursor:inherit;height:100%;left:0;margin:0;opacity:0;padding:0;position:absolute;right:0;top:0;width:100%;z-index:1}:where([data-cck-theme-name=frames-x] .cck-radio-button__background){background-color:var(--base-surface-1);border-radius:50%;opacity:0}:where([data-cck-theme-name=frames-x] .cck-radio-button__label){white-space:nowrap}:where([data-cck-theme-name=frames-x] .cck-radio-button--checked .cck-radio-button__input-wrapper){background-color:var(--state-brand-active);border-color:var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-radio-button--checked .cck-radio-button__background){opacity:1}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--sm){font:var(--text-sm-font-medium)}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--sm .cck-radio-button__wrapper){gap:var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--sm .cck-radio-button__input-wrapper){height:22px;width:22px}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--sm .cck-radio-button__background){height:12px;width:12px}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--md){font:var(--text-base-font-medium)}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--md .cck-radio-button__wrapper){gap:var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--md .cck-radio-button__input-wrapper){height:24px;width:24px}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--md .cck-radio-button__background){height:12px;width:12px}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--lg){font:var(--text-lg-font-medium)}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--lg .cck-radio-button__wrapper){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--lg .cck-radio-button__input-wrapper){height:32px;width:32px}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--lg .cck-radio-button__background){height:16px;width:16px}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--xl){font:var(--text-xl-font-medium)}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--xl .cck-radio-button__wrapper){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--xl .cck-radio-button__input-wrapper){height:32px;width:32px}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--xl .cck-radio-button__background){height:16px;width:16px}:where([data-cck-theme-name=frames-x] .cck-radio-group){align-items:flex-start;display:flex}:where([data-cck-theme-name=frames-x] .cck-radio-group__row){flex-direction:row;gap:24px}:where([data-cck-theme-name=frames-x] .cck-radio-group__column){flex-direction:column;gap:12px}:where([data-cck-theme-name=frames-x] .cck-select){align-items:center;border-radius:var(--radi-6);color:var(--text-dark-primary);cursor:pointer;display:flex;font:var(--text-base-font-medium)}:where([data-cck-theme-name=frames-x] .cck-select:hover .cck-svg-icon){fill:var(--base-fill-5)}:where([data-cck-theme-name=frames-x] .cck-select--disabled){color:var(--base-disabled);cursor:auto;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-select__placeholder){color:var(--text-dark-tertiary)}:where([data-cck-theme-name=frames-x] .cck-select__trigger-wrapper){color:currentcolor;flex:1;overflow:hidden;padding-right:8px;text-align:start}:where([data-cck-theme-name=frames-x] .cck-select__trigger-value){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:where([data-cck-theme-name=frames-x] .cck-select__overlay .cck-overlay__backdrop){background-color:transparent}:where([data-cck-theme-name=frames-x] .cck-select__dropdown-icon-wrapper){transition:transform .3s}:where([data-cck-theme-name=frames-x] .cck-select__dropdown-icon-wrapper .cck-svg-icon){height:var(--icon-lg);width:var(--icon-lg)}:where([data-cck-theme-name=frames-x] .cck-select--opened .cck-select__dropdown-icon-wrapper){transform:rotate(180deg)}:where([data-cck-theme-name=frames-x] .cck-suffix){flex-grow:0}:where([data-cck-theme-name=frames-x] .cck-suffix .cck-svg-icon.cck-svg-icon--default-size){height:var(--icon-md);width:var(--icon-md)}:where([data-cck-theme-name=frames-x] .cck-textarea){background-color:transparent;border:none;color:var(--text-dark-primary);font:var(--text-base-font-medium);min-height:24px;min-width:100%;outline:none;padding:0;scrollbar-color:var(--base-border) transparent}:where([data-cck-theme-name=frames-x] .cck-textarea::-moz-placeholder){color:var(--text-dark-tertiary)}:where([data-cck-theme-name=frames-x] .cck-textarea::placeholder){color:var(--text-dark-tertiary)}:where([data-cck-theme-name=frames-x] .cck-textarea::-webkit-resizer){background-image:url('data:image/svg+xml;utf8,');background-position:100% 100%;background-repeat:no-repeat;height:9px;width:9px}:where([data-cck-theme-name=frames-x] .cck-textarea):disabled{color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-toggle){cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-toggle__label){align-items:center;color:var(--text-dark-primary);cursor:pointer;display:flex;white-space:nowrap}:where([data-cck-theme-name=frames-x] .cck-toggle--label-before .cck-toggle__label){flex-direction:row-reverse}:where([data-cck-theme-name=frames-x] .cck-toggle__input){cursor:pointer;height:100%;margin:0;opacity:0;padding:0;position:relative;width:100%;z-index:3}:where([data-cck-theme-name=frames-x] .cck-toggle .cck-toggle__slider-wrapper){position:relative}:where([data-cck-theme-name=frames-x] .cck-toggle .cck-toggle__slider-wrapper):has(input:focus-visible){outline:2px solid var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-toggle__size--sm .cck-toggle__label){font:var(--text-sm-font-medium);gap:var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-toggle__size--md .cck-toggle__label){font:var(--text-base-font-medium);gap:var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-toggle__size--lg .cck-toggle__label){font:var(--text-lg-font-medium);gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-toggle__size--xl .cck-toggle__label){font:var(--text-xl-font-medium);gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob .cck-toggle__thumb){background-color:var(--base-surface-1);position:absolute;transition:all .3s ease;z-index:2}:where([data-cck-theme-name=frames-x] .cck-toggle__knob .cck-toggle__backdrop){height:100%;left:0;position:absolute;top:0;transition:background-color .3s ease;width:100%;z-index:1}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle--checked .cck-toggle__thumb){left:100%;top:50%;transform:translate(calc(-100% - var(--frames-x--toggle-margin)),-50%)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle--checked .cck-toggle__backdrop){background-color:var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle--unchecked .cck-toggle__thumb){left:0;top:50%;transform:translate(var(--frames-x--toggle-margin),-50%)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle--unchecked .cck-toggle__backdrop){background-color:var(--base-fill-2)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--sm){--frames-x--toggle-margin:2px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--sm .cck-toggle__slider-wrapper){height:19px;width:40px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--sm .cck-toggle__thumb){border-radius:var(--radi-2);height:15px;width:18px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--sm .cck-toggle__slider-wrapper){border-radius:var(--radi-3)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--sm .cck-toggle__backdrop){border-radius:var(--radi-3)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--md){--frames-x--toggle-margin:2px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--md .cck-toggle__slider-wrapper){height:24px;width:48px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--md .cck-toggle__thumb){border-radius:var(--radi-4);height:20px;width:22px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--md .cck-toggle__slider-wrapper){border-radius:var(--radi-5)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--md .cck-toggle__backdrop){border-radius:var(--radi-5)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--lg){--frames-x--toggle-margin:4px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--lg .cck-toggle__slider-wrapper){height:32px;width:56px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--lg .cck-toggle__thumb){border-radius:var(--radi-5);height:24px;width:26px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--lg .cck-toggle__slider-wrapper){border-radius:var(--radi-6)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--lg .cck-toggle__backdrop){border-radius:var(--radi-6)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--xl){--frames-x--toggle-margin:4px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--xl .cck-toggle__slider-wrapper){height:44px;width:80px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--xl .cck-toggle__thumb){border-radius:var(--radi-5);height:36px;width:36px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--xl .cck-toggle__slider-wrapper){border-radius:var(--radi-6)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--xl .cck-toggle__backdrop){border-radius:var(--radi-6)}:where([data-cck-theme-name=frames-x] .cck-toggle__switch .cck-toggle__thumb){background-color:var(--base-surface-1);box-shadow:0 1px 2px var(--colors-alpha-dark-50);position:absolute;transition:all .3s ease;z-index:2}:where([data-cck-theme-name=frames-x] .cck-toggle__switch .cck-toggle__backdrop){height:100%;left:0;position:absolute;top:50%;transform:translateY(-50%);transition:background-color .3s ease;width:100%;z-index:1}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle--checked .cck-toggle__thumb){left:100%;top:50%;transform:translate(-100%,-50%)}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle--checked .cck-toggle__backdrop){background-color:var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle--unchecked .cck-toggle__thumb){left:0;top:50%;transform:translateY(-50%)}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle--unchecked .cck-toggle__backdrop){background-color:var(--base-fill-2)}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--sm .cck-toggle__slider-wrapper){width:40px}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--sm .cck-toggle__thumb){border-radius:var(--radi-4);height:20px;width:20px}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--sm .cck-toggle__backdrop){border-radius:var(--radi-6);height:12px}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--md .cck-toggle__slider-wrapper){width:44px}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--md .cck-toggle__thumb){border-radius:var(--radi-5);height:24px;width:24px}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--md .cck-toggle__slider-wrapper){border-radius:var(--radi-5)}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--md .cck-toggle__backdrop){border-radius:var(--radi-6);height:16px}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--lg .cck-toggle__slider-wrapper){width:56px}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--lg .cck-toggle__thumb){border-radius:var(--radi-6);height:32px;width:32px}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--lg .cck-toggle__slider-wrapper){border-radius:var(--radi-6)}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--lg .cck-toggle__backdrop){border-radius:var(--radi-6);height:20px}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--xl .cck-toggle__slider-wrapper){width:80px}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--xl .cck-toggle__thumb){border-radius:var(--radi-6);height:40px;width:40px}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--xl .cck-toggle__slider-wrapper){border-radius:var(--radi-6)}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--xl .cck-toggle__backdrop){border-radius:var(--radi-6);height:32px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle--disabled),:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle--disabled){cursor:default;pointer-events:none}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle--disabled .cck-toggle__thumb),:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle--disabled .cck-toggle__thumb){background-color:var(--base-fill-3)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle--disabled .cck-toggle__backdrop),:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle--disabled .cck-toggle__backdrop){background-color:var(--base-fill-2)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle--disabled .cck-toggle__label),:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle--disabled .cck-toggle__label){color:var(--base-disabled)}:where([data-cck-theme-name=frames-x] .cck-trailing){align-items:center;background-color:var(--base-surface-2);color:var(--text-dark-tertiary);cursor:default;display:flex;font:var(--text-base-font-medium);gap:var(--spacing-4);justify-content:center;padding:0 var(--spacing-7);-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-trailing--clickable){cursor:pointer;transition:background-color .1s}:where([data-cck-theme-name=frames-x] .cck-trailing--clickable):active{background-color:var(--base-fill-1)}:where([data-cck-theme-name=frames-x] .cck-trailing--clickable):hover:not(:active){background-color:var(--base-fill-2)}:where([data-cck-theme-name=frames-x] .cck-avatar){align-items:center;border-radius:50%;display:flex;justify-content:center;overflow:hidden}:where([data-cck-theme-name=frames-x] .cck-avatar__fallback-image),:where([data-cck-theme-name=frames-x] .cck-avatar__image),:where([data-cck-theme-name=frames-x] .cck-avatar__placeholder-image){border-radius:inherit;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}:where([data-cck-theme-name=frames-x] .cck-avatar--with-label){background-color:var(--state-brand-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-avatar--clickable){cursor:pointer}:where([data-cck-theme-name=frames-x] .cck-avatar__size--xs){height:28px;width:28px}:where([data-cck-theme-name=frames-x] .cck-avatar__size--xs.cck-avatar--with-label){font:var(--text-xs-font-semibold)}:where([data-cck-theme-name=frames-x] .cck-avatar__size--sm){height:32px;width:32px}:where([data-cck-theme-name=frames-x] .cck-avatar__size--sm.cck-avatar--with-label){font:var(--text-xs-font-semibold)}:where([data-cck-theme-name=frames-x] .cck-avatar__size--md){height:40px;width:40px}:where([data-cck-theme-name=frames-x] .cck-avatar__size--md.cck-avatar--with-label){font:var(--text-sm-font-semibold)}:where([data-cck-theme-name=frames-x] .cck-avatar__size--lg){height:44px;width:44px}:where([data-cck-theme-name=frames-x] .cck-avatar__size--lg.cck-avatar--with-label){font:var(--text-lg-font-semibold)}:where([data-cck-theme-name=frames-x] .cck-avatar__size--xl){height:56px;width:56px}:where([data-cck-theme-name=frames-x] .cck-avatar__size--xl.cck-avatar--with-label){font:var(--text-xl-font-semibold)}:where([data-cck-theme-name=frames-x] .cck-avatar__size--2xl){height:72px;width:72px}:where([data-cck-theme-name=frames-x] .cck-avatar__size--2xl.cck-avatar--with-label){font:var(--text-2xl-font-semibold)}:where([data-cck-theme-name=frames-x] .cck-avatar-group){display:flex}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-left){direction:rtl}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-left.cck-avatar-group__size--xs .cck-avatar):not(:last-of-type){margin-left:-10px}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-left.cck-avatar-group__size--sm .cck-avatar):not(:last-of-type){margin-left:-10px}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-left.cck-avatar-group__size--md .cck-avatar):not(:last-of-type){margin-left:-14px}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-left.cck-avatar-group__size--lg .cck-avatar):not(:last-of-type){margin-left:-16px}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-left.cck-avatar-group__size--xl .cck-avatar):not(:last-of-type){margin-left:-16px}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-left.cck-avatar-group__size--2xl .cck-avatar):not(:last-of-type){margin-left:-18px}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-right.cck-avatar-group__size--xs .cck-avatar):not(:first-of-type){margin-left:-10px}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-right.cck-avatar-group__size--sm .cck-avatar):not(:first-of-type){margin-left:-10px}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-right.cck-avatar-group__size--md .cck-avatar):not(:first-of-type){margin-left:-14px}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-right.cck-avatar-group__size--lg .cck-avatar):not(:first-of-type){margin-left:-16px}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-right.cck-avatar-group__size--xl .cck-avatar):not(:first-of-type){margin-left:-16px}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-right.cck-avatar-group__size--2xl .cck-avatar):not(:first-of-type){margin-left:-18px}:where([data-cck-theme-name=frames-x] .cck-avatar-group .cck-avatar){border:2px solid var(--base-surface-1)}:where([data-cck-theme-name=frames-x] .cck-avatar-label){align-items:center;display:flex}:where([data-cck-theme-name=frames-x] .cck-avatar-label__title){color:var(--text-dark-primary)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__description){color:var(--text-dark-tertiary)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__label-wrapper){display:flex}:where([data-cck-theme-name=frames-x] .cck-avatar-label--avatar-right){flex-direction:row-reverse}:where([data-cck-theme-name=frames-x] .cck-avatar-label--avatar-right .cck-avatar-label__label-wrapper){text-align:right}:where([data-cck-theme-name=frames-x] .cck-avatar-label--avatar-left){flex-direction:row}:where([data-cck-theme-name=frames-x] .cck-avatar-label--avatar-top){flex-direction:column}:where([data-cck-theme-name=frames-x] .cck-avatar-label--avatar-bottom){flex-direction:column-reverse}:where([data-cck-theme-name=frames-x] .cck-avatar-label--avatar-bottom.cck-avatar-label--label-vertical .cck-avatar-label__label-wrapper),:where([data-cck-theme-name=frames-x] .cck-avatar-label--avatar-top.cck-avatar-label--label-vertical .cck-avatar-label__label-wrapper){align-items:center}:where([data-cck-theme-name=frames-x] .cck-avatar-label--avatar-left.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper),:where([data-cck-theme-name=frames-x] .cck-avatar-label--avatar-right.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){align-items:center}:where([data-cck-theme-name=frames-x] .cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){align-items:center;flex-direction:row}:where([data-cck-theme-name=frames-x] .cck-avatar-label--label-vertical .cck-avatar-label__label-wrapper){flex-direction:column;justify-content:center}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--xs){gap:var(--spacing-5)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--xs .cck-avatar-label__label-wrapper){font:var(--text-xs-font-medium);gap:2px}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--xs.cck-avatar-label--avatar-left.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper),:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--xs.cck-avatar-label--avatar-right.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){gap:var(--spacing-5)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--sm){gap:var(--spacing-5)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--sm .cck-avatar-label__label-wrapper){font:var(--text-xs-font-medium)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--sm.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){gap:var(--spacing-5)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--sm.cck-avatar-label--label-vertical .cck-avatar-label__label-wrapper){gap:4px}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--md){gap:var(--spacing-5)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--md .cck-avatar-label__label-wrapper){font:var(--text-sm-font-medium)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--md.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){gap:var(--spacing-5)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--md.cck-avatar-label--label-vertical .cck-avatar-label__label-wrapper){gap:2px}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--lg){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--lg .cck-avatar-label__label-wrapper){font:var(--text-base-font-medium)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--lg.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--lg.cck-avatar-label--label-vertical .cck-avatar-label__label-wrapper){gap:2px}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--xl){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--xl .cck-avatar-label__label-wrapper){font:var(--text-lg-font-medium)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--xl.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--xl.cck-avatar-label--label-vertical .cck-avatar-label__label-wrapper){gap:4px}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--2xl){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--2xl .cck-avatar-label__label-wrapper){font:var(--text-xl-font-medium)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--2xl.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--2xl.cck-avatar-label--label-vertical .cck-avatar-label__label-wrapper){gap:4px}:where([data-cck-theme-name=frames-x] .cck-accordion){display:flex;flex-direction:column}:where([data-cck-theme-name=frames-x] .cck-accordion__default.cck-accordion__size--sm){gap:var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-accordion__default.cck-accordion__size--md){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-accordion__underline.cck-accordion__size--sm){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-accordion__underline.cck-accordion__size--md){gap:var(--spacing-10)}:where([data-cck-theme-name=frames-x] .cck-accordion-header){align-items:center;color:var(--text-dark-primary);display:flex}:where([data-cck-theme-name=frames-x] .cck-accordion-header .cck-svg-icon.cck-svg-icon--default-color){fill:var(--text-dark-primary)}:where([data-cck-theme-name=frames-x] .cck-accordion-header--icon-left){flex-direction:row-reverse;justify-content:flex-end}:where([data-cck-theme-name=frames-x] .cck-accordion-header--icon-left>.cck-accordion-header__icon-btn){margin-right:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-accordion-header--icon-right>.cck-accordion-header__icon-btn){margin-left:auto}:where([data-cck-theme-name=frames-x] .cck-accordion-header .cck-accordion-header__icon-btn){background-color:transparent;border:none;border-radius:var(--radi-6);color:var(--base-fill-4);cursor:pointer;outline:none}:where([data-cck-theme-name=frames-x] .cck-accordion-header .cck-accordion-header__icon-btn):hover{border:none}:where([data-cck-theme-name=frames-x] .cck-accordion-header--trigger-icon .cck-accordion-header__icon-btn):hover{background-color:var(--base-fill-1)}:where([data-cck-theme-name=frames-x] .cck-accordion-header--trigger-header){cursor:pointer}:where([data-cck-theme-name=frames-x] .cck-accordion-header--trigger-header>.cck-accordion-header__icon-btn):hover{background-color:transparent}:where([data-cck-theme-name=frames-x] .cck-accordion-panel--disabled>.cck-accordion-header){color:var(--base-disabled)}:where([data-cck-theme-name=frames-x] .cck-accordion-panel--disabled>.cck-accordion-header--trigger-header){cursor:not-allowed}:where([data-cck-theme-name=frames-x] .cck-accordion-panel--disabled>.cck-accordion-header>.cck-accordion-header__icon-btn){display:none}:where([data-cck-theme-name=frames-x] .cck-accordion__size--sm .cck-accordion-header){font:var(--text-base-font-medium)}:where([data-cck-theme-name=frames-x] .cck-accordion__size--sm .cck-accordion-header>.cck-accordion-header__icon-btn){height:36px;width:36px}:where([data-cck-theme-name=frames-x] .cck-accordion__size--md .cck-accordion-header){font:var(--text-lg-font-medium)}:where([data-cck-theme-name=frames-x] .cck-accordion__size--md .cck-accordion-header>.cck-accordion-header__icon-btn){height:44px;width:44px}:where([data-cck-theme-name=frames-x] .cck-accordion__default>.cck-accordion-panel--collapsed>.cck-accordion-header){background-color:var(--base-surface-2)}:where([data-cck-theme-name=frames-x] .cck-accordion__default.cck-accordion__size--sm>.cck-accordion-panel>.cck-accordion-header){height:56px;padding:0 var(--spacing-7) 0 var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-accordion__default.cck-accordion__size--md>.cck-accordion-panel>.cck-accordion-header){height:72px;padding:0 var(--spacing-8) 0 var(--spacing-10)}:where([data-cck-theme-name=frames-x] .cck-accordion__underline.cck-accordion__size--sm>.cck-accordion-panel>.cck-accordion-header){height:40px}:where([data-cck-theme-name=frames-x] .cck-accordion__underline.cck-accordion__size--md>.cck-accordion-panel>.cck-accordion-header){height:52px}:where([data-cck-theme-name=frames-x] .cck-accordion-panel){overflow:hidden}:where([data-cck-theme-name=frames-x] .cck-accordion-panel__content-wrapper){color:var(--text-dark-secondary);font:var(--text-base-font-regular)}:where([data-cck-theme-name=frames-x] .cck-accordion-panel--collapsed){padding-bottom:0}:where([data-cck-theme-name=frames-x] .cck-accordion-panel){transition:padding-bottom .3s}:where([data-cck-theme-name=frames-x] .cck-accordion--instant-animation>.cck-accordion-panel){transition:none}:where([data-cck-theme-name=frames-x] .cck-accordion__size--sm .cck-accordion-panel--expanded){padding-bottom:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-accordion__size.md .cck-accordion-panel--expanded){padding-bottom:var(--spacing-10)}:where([data-cck-theme-name=frames-x] .cck-accordion__default>.cck-accordion-panel){background-color:var(--base-surface-1);border:1px solid var(--base-border);border-radius:var(--radi-6)}:where([data-cck-theme-name=frames-x] .cck-accordion__default.cck-accordion__size--sm>.cck-accordion-panel>.cck-accordion-panel__content-wrapper){padding-left:var(--spacing-8);padding-right:var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-accordion__default.cck-accordion__size--md>.cck-accordion-panel>.cck-accordion-panel__content-wrapper){padding-left:var(--spacing-10);padding-right:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-accordion__underline){padding-bottom:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-accordion__underline>.cck-accordion-panel){border-bottom:1px solid var(--base-border)}:where([data-cck-theme-name=frames-x] .cck-tabs){display:flex;flex-direction:column;gap:12px}:where([data-cck-theme-name=frames-x] .cck-tabs__headers-wrapper){display:flex;flex-wrap:wrap;gap:var(--spacing-2);justify-content:center}:where([data-cck-theme-name=frames-x] .cck-tabs--align-left .cck-tabs__headers-wrapper){align-items:flex-start;align-self:flex-start;justify-content:flex-start}:where([data-cck-theme-name=frames-x] .cck-tabs--align-center .cck-tabs__headers-wrapper){align-items:center;align-self:center;justify-content:center}:where([data-cck-theme-name=frames-x] .cck-tabs--align-right .cck-tabs__headers-wrapper){align-items:flex-end;align-self:flex-end;justify-content:flex-end}:where([data-cck-theme-name=frames-x] .cck-tabs--align-stretch .cck-tabs__headers-wrapper){align-items:stretch;align-self:stretch;justify-content:stretch}:where([data-cck-theme-name=frames-x] .cck-tabs__toggle .cck-tabs__headers-wrapper){background-color:var(--base-fill-1);border-radius:var(--radi-6);padding:var(--spacing-2)}:where([data-cck-theme-name=frames-x] .cck-tabs__size--sm .cck-tabs__headers-wrapper){min-height:36px}:where([data-cck-theme-name=frames-x] .cck-tabs__size--md .cck-tabs__headers-wrapper){min-height:44px}:where([data-cck-theme-name=frames-x] .cck-tabs__size--lg .cck-tabs__headers-wrapper){min-height:56px}:where([data-cck-theme-name=frames-x] .cck-tab){align-items:center;background:transparent;border:none;color:var(--text-dark-tertiary);cursor:pointer;display:flex;justify-content:center;outline:none;position:relative;white-space:nowrap}:where([data-cck-theme-name=frames-x] .cck-tab .cck-svg-icon.cck-svg-icon--default-color){color:currentColor;fill:currentColor}:where([data-cck-theme-name=frames-x] .cck-tab__label){position:relative;z-index:1}:where([data-cck-theme-name=frames-x] .cck-tab--unselected):not(.cck-tab--disabled):focus-visible{outline:2px solid var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-tab--selected){color:var(--text-dark-primary)}:where([data-cck-theme-name=frames-x] .cck-tab--disabled){color:var(--base-disabled);cursor:not-allowed}:where([data-cck-theme-name=frames-x] .cck-tab__indicator){height:100%;left:0;position:absolute;top:0;width:100%;z-index:0}:where([data-cck-theme-name=frames-x] .cck-tabs--align-stretch .cck-tab){flex:1}:where([data-cck-theme-name=frames-x] .cck-tabs__toggle .cck-tab){border-radius:var(--radi-5)}:where([data-cck-theme-name=frames-x] .cck-tabs__toggle .cck-tab--unselected):not(.cck-tab--disabled):hover{background-color:var(--base-fill-2)}:where([data-cck-theme-name=frames-x] .cck-tabs__toggle .cck-tab__indicator){background-color:var(--base-surface-1);border:1px solid var(--base-border);border-radius:var(--radi-5)}:where([data-cck-theme-name=frames-x] .cck-tabs__fill .cck-tab){border-radius:var(--radi-6)}:where([data-cck-theme-name=frames-x] .cck-tabs__fill .cck-tab__indicator){background-color:var(--base-surface-2);border:2px solid var(--state-brand-selected);border-radius:var(--radi-5)}:where([data-cck-theme-name=frames-x] .cck-tabs__line .cck-tab__indicator){border-bottom:var(--stroke-lg) solid var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-tabs__size--sm .cck-tab){font:var(--text-sm-font-medium);height:36px;padding:0 var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-tabs__size--sm .cck-tab.cck-tab--selected){font:var(--text-sm-font-semibold)}:where([data-cck-theme-name=frames-x] .cck-tabs__size--md .cck-tab){font:var(--text-base-font-medium);height:44px;padding:0 var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-tabs__size--md .cck-tab.cck-tab--selected){font:var(--text-base-font-semibold)}:where([data-cck-theme-name=frames-x] .cck-tabs__size--lg .cck-tab){font:var(--text-lg-font-medium);height:56px;padding:0 var(--spacing-9)}:where([data-cck-theme-name=frames-x] .cck-tabs__size--lg .cck-tab.cck-tab--selected){font:var(--text-lg-font-semibold)} \ No newline at end of file diff --git a/packages/internal/storybook-addon-theme/src/assets/styles/manager-styles.css b/packages/internal/storybook-addon-theme/src/assets/styles/manager-styles.css index 94a8a6ee..4232cdaf 100644 --- a/packages/internal/storybook-addon-theme/src/assets/styles/manager-styles.css +++ b/packages/internal/storybook-addon-theme/src/assets/styles/manager-styles.css @@ -862,7 +862,7 @@ body{ flex-direction:column; gap:12px; } -.doc-cck-tabs__labels-wrapper{ +.doc-cck-tabs__headers-wrapper{ display:flex; flex-wrap:wrap; align-items:center; @@ -872,13 +872,13 @@ body{ align-self:flex-start; border-radius:var(--cck-doc-radius-sm); } -.doc-cck-tabs__size--fit .doc-cck-tabs__labels-wrapper{ +.doc-cck-tabs__size--fit .doc-cck-tabs__headers-wrapper{ width:100%; } -.doc-cck-tabs__color--default .doc-cck-tabs__labels-wrapper{ +.doc-cck-tabs__color--default .doc-cck-tabs__headers-wrapper{ background-color:var(--cck-doc-color-bg-3); } -.doc-cck-tabs__color--h-contrast .doc-cck-tabs__labels-wrapper{ +.doc-cck-tabs__color--h-contrast .doc-cck-tabs__headers-wrapper{ background-color:var(--cck-doc-color-bg-4); } @@ -926,7 +926,7 @@ body{ background-color:var(--cck-doc-color-bg-2); } -.doc-cck-tab-label{ +.doc-cck-tab__label{ position:relative; z-index:1; } \ No newline at end of file diff --git a/packages/internal/storybook-addon-theme/src/assets/styles/manager-styles.min.css b/packages/internal/storybook-addon-theme/src/assets/styles/manager-styles.min.css index 4e1eb2a5..1aa2176e 100644 --- a/packages/internal/storybook-addon-theme/src/assets/styles/manager-styles.min.css +++ b/packages/internal/storybook-addon-theme/src/assets/styles/manager-styles.min.css @@ -4,4 +4,4 @@ * Generated by cocokits 'scss-builder' */ -:where(.cck-theme-storybook-addon__local-style--default),:where([data-cck-theme*=storybook-addon__local-style--default]){--cck-doc-display-2xl-regular:400 72px/90px Inter;--cck-doc-display-2xl-light:300 72px/90px Inter;--cck-doc-display-2xl-medium:500 72px/90px Inter;--cck-doc-display-2xl-semibold:600 72px/90px Inter;--cck-doc-display-2xl-bold:700 72px/90px Inter;--cck-doc-display-xl-light:300 60px/72px Inter;--cck-doc-display-xl-regular:400 60px/72px Inter;--cck-doc-display-xl-medium:500 60px/72px Inter;--cck-doc-display-xl-semibold:600 60px/72px Inter;--cck-doc-display-xl-bold:700 60px/72px Inter;--cck-doc-display-lg-light:300 48px/64px Inter;--cck-doc-display-lg-regular:400 48px/64px Inter;--cck-doc-display-lg-medium:500 48px/64px Inter;--cck-doc-display-lg-semibold:600 48px/64px Inter;--cck-doc-display-lg-bold:700 48px/64px Inter;--cck-doc-display-md-light:300 36px/60px Inter;--cck-doc-display-md-regular:400 36px/60px Inter;--cck-doc-display-md-medium:500 36px/60px Inter;--cck-doc-display-md-semibold:600 36px/60px Inter;--cck-doc-display-md-bold:700 36px/60px Inter;--cck-doc-display-sm-light:300 30px/44px Inter;--cck-doc-display-sm-regular:400 30px/44px Inter;--cck-doc-display-sm-medium:500 30px/44px Inter;--cck-doc-display-sm-semibold:600 30px/44px Inter;--cck-doc-display-sm-bold:700 30px/44px Inter;--cck-doc-display-xs-light:300 24px/38px Inter;--cck-doc-display-xs-regular:400 24px/38px Inter;--cck-doc-display-xs-medium:500 24px/38px Inter;--cck-doc-display-xs-semibold:600 24px/38px Inter;--cck-doc-display-xs-bold:700 24px/38px Inter;--cck-doc-text-xl-light:300 20px/32px Inter;--cck-doc-text-xl-regular:400 20px/32px Inter;--cck-doc-text-xl-medium:500 20px/32px Inter;--cck-doc-text-xl-semibold:600 20px/32px Inter;--cck-doc-text-xl-bold:700 20px/32px Inter;--cck-doc-text-lg-light:300 18px/30px Inter;--cck-doc-text-lg-regular:400 18px/30px Inter;--cck-doc-text-lg-medium:500 18px/30px Inter;--cck-doc-text-lg-semibold:600 18px/30px Inter;--cck-doc-text-lg-bold:700 18px/30px Inter;--cck-doc-text-md-light:300 16px/28px Inter;--cck-doc-text-md-regular:400 16px/28px Inter;--cck-doc-text-md-medium:500 16px/28px Inter;--cck-doc-text-md-semibold:600 16px/28px Inter;--cck-doc-text-md-bold:700 16px/28px Inter;--cck-doc-text-sm-light:300 14px/24px Inter;--cck-doc-text-sm-regular:400 14px/24px Inter;--cck-doc-text-sm-medium:500 14px/24px Inter;--cck-doc-text-sm-semibold:600 14px/24px Inter;--cck-doc-text-sm-bold:700 14px/24px Inter;--cck-doc-text-xs-light:300 12px/20px Inter;--cck-doc-text-xs-regular:400 12px/20px Inter;--cck-doc-text-xs-medium:500 12px/20px Inter;--cck-doc-text-xs-semibold:600 12px/20px Inter;--cck-doc-text-xs-bold:700 12px/20px Inter}:where(.cck-theme-storybook-addon__color--dark),:where([data-cck-theme*=storybook-addon__color--dark]){--cck-doc-color-brand-default:var(--cck-doc-ocean-green-500);--cck-doc-color-bg-0:var(--cck-doc-black-50);--cck-doc-color-bg-1:var(--cck-doc-black-100);--cck-doc-color-bg-2:var(--cck-doc-black-200);--cck-doc-color-bg-3:var(--cck-doc-black-300);--cck-doc-color-bg-4:var(--cck-doc-black-400);--cck-doc-color-bg-5:var(--cck-doc-black-500);--cck-doc-color-bg-alpha-1:var(--cck-doc-black-alpha-1);--cck-doc-color-bg-alpha-2:var(--cck-doc-black-alpha-3);--cck-doc-color-bg-alpha-3:var(--cck-doc-black-alpha-4);--cck-doc-color-bg-alpha-4:var(--cck-doc-black-alpha-5);--cck-doc-color-bg-alpha-5:var(--cck-doc-black-alpha-6);--cck-doc-color-bg-hover-1:var(--cck-doc-color-bg-3);--cck-doc-color-bg-hover-2:var(--cck-doc-color-bg-2);--cck-doc-color-bg-hover-3:var(--cck-doc-ocean-green-900);--cck-doc-color-bg-selected-1:var(--cck-doc-ocean-green-950);--cck-doc-color-bg-selected-2:var(--cck-doc-ocean-green-900);--cck-doc-color-border-1:var(--cck-doc-white-alpha-2);--cck-doc-color-border-2:var(--cck-doc-white-alpha-4);--cck-doc-color-border-3:var(--cck-doc-white-alpha-5);--cck-doc-color-font-1:var(--cck-doc-white-50);--cck-doc-color-font-2:#ccc;--cck-doc-color-font-3:#999;--cck-doc-color-font-4:#666;--cck-doc-color-font-5:#333;--cck-doc-color-font-alpha-1:var(--cck-doc-white-50);--cck-doc-color-font-alpha-2:var(--cck-doc-white-alpha-8);--cck-doc-color-font-alpha-3:var(--cck-doc-white-alpha-7);--cck-doc-color-font-alpha-4:var(--cck-doc-white-alpha-6);--cck-doc-color-font-alpha-5:var(--cck-doc-white-alpha-5);--cck-doc-color-main-effect-primary-start:#1bbf82cc;--cck-doc-color-main-effect-primary-end:#1bbf8299;--cck-doc-color-main-effect-surface-start:#0f111600;--cck-doc-color-main-effect-surface-end:#0f1116;--cck-doc-color-main-effect-box-start:#ffffff14;--cck-doc-color-main-effect-box-end:#ffffff00}:where(.cck-theme-storybook-addon__color--light),:where([data-cck-theme*=storybook-addon__color--light]){--cck-doc-color-brand-default:var(--cck-doc-see-green-500);--cck-doc-color-bg-0:var(--cck-doc-white-50);--cck-doc-color-bg-1:var(--cck-doc-white-50);--cck-doc-color-bg-2:var(--cck-doc-white-50);--cck-doc-color-bg-3:var(--cck-doc-white-100);--cck-doc-color-bg-4:var(--cck-doc-white-300);--cck-doc-color-bg-5:var(--cck-doc-white-400);--cck-doc-color-bg-alpha-1:var(--cck-doc-white-alpha-1);--cck-doc-color-bg-alpha-2:var(--cck-doc-white-alpha-3);--cck-doc-color-bg-alpha-3:var(--cck-doc-white-alpha-4);--cck-doc-color-bg-alpha-4:var(--cck-doc-white-alpha-5);--cck-doc-color-bg-alpha-5:var(--cck-doc-white-alpha-6);--cck-doc-color-bg-hover-1:var(--cck-doc-color-bg-3);--cck-doc-color-bg-hover-2:var(--cck-doc-color-bg-3);--cck-doc-color-bg-hover-3:var(--cck-doc-ocean-green-200);--cck-doc-color-bg-selected-1:var(--cck-doc-ocean-green-100);--cck-doc-color-bg-selected-2:var(--cck-doc-ocean-green-200);--cck-doc-color-border-1:var(--cck-doc-black-alpha-2);--cck-doc-color-border-2:var(--cck-doc-black-alpha-4);--cck-doc-color-border-3:var(--cck-doc-black-alpha-5);--cck-doc-color-font-1:var(--cck-doc-black-50);--cck-doc-color-font-2:#333d4a;--cck-doc-color-font-3:#666d77;--cck-doc-color-font-4:#999ea5;--cck-doc-color-font-5:#ccced2;--cck-doc-color-font-alpha-1:var(--cck-doc-black-50);--cck-doc-color-font-alpha-2:var(--cck-doc-black-alpha-8);--cck-doc-color-font-alpha-3:var(--cck-doc-black-alpha-7);--cck-doc-color-font-alpha-4:var(--cck-doc-black-alpha-6);--cck-doc-color-font-alpha-5:var(--cck-doc-black-alpha-5);--cck-doc-color-main-effect-primary-start:#008d5ecc;--cck-doc-color-main-effect-primary-end:#008d5e99;--cck-doc-color-main-effect-surface-start:#ffffff00;--cck-doc-color-main-effect-surface-end:#fff;--cck-doc-color-main-effect-box-start:#0f111614;--cck-doc-color-main-effect-box-end:#0f111600}:where(.cck-theme-storybook-addon__size--default),:where([data-cck-theme*=storybook-addon__size--default]){--cck-doc-radius-xs:2px;--cck-doc-radius-sm:4px;--cck-doc-radius-md:8px;--cck-doc-radius-lg:12px;--cck-doc-radius-xl:16px}:where(.cck-theme-storybook-addon__color-palette--default),:where([data-cck-theme*=storybook-addon__color-palette--default]){--cck-doc-ocean-green-50:#f0fdf7;--cck-doc-ocean-green-100:#d4fcec;--cck-doc-ocean-green-200:#aaf7da;--cck-doc-ocean-green-300:#72edc0;--cck-doc-ocean-green-400:#3cd9a0;--cck-doc-ocean-green-500:#1bbf82;--cck-doc-ocean-green-600:#129c69;--cck-doc-ocean-green-700:#127b56;--cck-doc-ocean-green-800:#146247;--cck-doc-ocean-green-900:#14513c;--cck-doc-ocean-green-950:#012c1e;--cck-doc-see-green-50:#effffa;--cck-doc-see-green-100:#a1ffe0;--cck-doc-see-green-200:#52ffc5;--cck-doc-see-green-300:#00ef9f;--cck-doc-see-green-400:#00b478;--cck-doc-see-green-500:#008d5e;--cck-doc-see-green-600:#007951;--cck-doc-see-green-700:#064;--cck-doc-see-green-800:#005237;--cck-doc-see-green-900:#003f2a;--cck-doc-see-green-950:#002b1d;--cck-doc-black-50:#00060f;--cck-doc-black-100:#0f1116;--cck-doc-black-200:#15171e;--cck-doc-black-300:#191b23;--cck-doc-black-400:#222835;--cck-doc-black-500:#494f60;--cck-doc-white-50:#fff;--cck-doc-white-100:#f5f5f5;--cck-doc-white-200:#ececef;--cck-doc-white-300:#e3e3e8;--cck-doc-white-400:#d1d5e1;--cck-doc-white-500:#c1c7d7;--cck-doc-white-alpha-0:#ffffff05;--cck-doc-white-alpha-1:#ffffff0a;--cck-doc-white-alpha-2:#ffffff0f;--cck-doc-white-alpha-3:#ffffff14;--cck-doc-white-alpha-4:#ffffff1a;--cck-doc-white-alpha-5:#ffffff33;--cck-doc-white-alpha-6:#ffffff66;--cck-doc-white-alpha-7:#ffffff99;--cck-doc-white-alpha-8:#ffffffcc;--cck-doc-white-alpha-9:#ffffffe5;--cck-doc-white-alpha-10:#fff;--cck-doc-black-alpha-0:#000c1d05;--cck-doc-black-alpha-1:#000c1d0a;--cck-doc-black-alpha-2:#000c1d0f;--cck-doc-black-alpha-3:#000c1d14;--cck-doc-black-alpha-4:#000c1d1a;--cck-doc-black-alpha-5:#000c1d33;--cck-doc-black-alpha-6:#000c1d66;--cck-doc-black-alpha-7:#000c1d99;--cck-doc-black-alpha-8:#000c1dcc;--cck-doc-black-alpha-9:#000c1de5;--cck-doc-black-alpha-10:#000c1d}.cck-theme-storybook-addon--remove-toolbar main .sb-bar{display:none}#root>div:first-child>div:nth-child(2){border:1px solid var(--cck-doc-color-border-2)}#root>div:first-child>div:nth-child(2)>div:first-child,#root>div:first-child>div:nth-child(3)>.sb-bar{display:none}.sidebar-container>div:first-child>div:first-of-type>div:first-child>div:first-child{padding:12px 24px}.sidebar-header>div:first-of-type>a:first-child>img{max-width:180px!important;width:180px}.sidebar-header>div:first-of-type{margin-right:0}.sidebar-header>div:nth-child(3){display:none}.search-field{background-color:var(--cck-doc-color-bg-2);border:1px solid var(--cck-doc-color-border-1);gap:8px;height:36px!important;padding:4px!important}.search-field+div{display:none}.search-field>div:first-child{color:var(--cck-doc-color-font-2);flex:none;margin-left:4px}.search-field>input:nth-child(2)::-moz-placeholder{color:var(--cck-doc-color-font-4)}.search-field>input:nth-child(2)::placeholder{color:var(--cck-doc-color-font-4)}.search-field>code:nth-child(3){display:none}.sidebar-subheading{margin-top:0!important}.sidebar-item+.sidebar-subheading{margin-top:24px!important}.sidebar-subheading>button:first-of-type{height:auto;padding:0;width:100%}.sidebar-subheading>button:first-of-type:hover{background-color:unset}.sidebar-subheading>button:first-of-type>div:first-child{display:none}.sidebar-subheading>button:nth-of-type(2){display:none!important}.sidebar-item:hover,.sidebar-item[data-selected=true]{background-color:unset!important}.sidebar-item>button:first-of-type{padding:0}.sidebar-item>button:first-of-type>div:first-of-type{display:none}.sidebar-item>a:first-of-type{padding:0}.sidebar-item>a:first-of-type>div:first-of-type,.sidebar-item>a:nth-of-type(2){display:none}.sbdocs.sbdocs-wrapper{background:transparent;padding:0}.sbdocs.sbdocs-content{max-width:unset}h1{font:var(--cck-doc-display-sm-semibold);margin:0 0 28px}h1,h2{color:var(--cck-doc-color-font-1)}h2{font:var(--cck-doc-text-xl-medium);margin:36px 0 24px}h3{font:var(--cck-doc-text-lg-medium)}h3,h4{color:var(--cck-doc-color-font-1);margin:12px 0}h4{font:var(--cck-doc-text-md-medium)}h5{font:var(--cck-doc-text-sm-medium)}h5,h6{color:var(--cck-doc-color-font-1);margin:12px 0}h6{font:var(--cck-doc-text-xs-medium)}p{margin:0 0 16px}ol,p,ul{color:var(--cck-doc-color-font-2);font:var(--cck-doc-text-sm-regular)}ol,ul{margin-top:12px}li{margin:0 0 16px}pre{margin:28px 0}strong{font-weight:600}hr{background-color:var(--cck-doc-color-border-1);border:none;height:1px;margin:48px 0}.cck-theme-storybook-addon code,code{background-color:var(--cck-doc-color-bg-3);border:1px solid var(--cck-doc-color-border-1);border-radius:4px;color:inherit;display:inline-block;font:inherit;margin:0 2px;padding:0 6px}.cck-theme-storybook-addon a,a{color:var(--cck-doc-color-brand-default);font:inherit}.doc-cck-button{align-items:center;border:none;border-radius:var(--cck-doc-radius-sm);box-sizing:border-box;cursor:pointer;display:flex;font:var(--cck-doc-text-sm-medium);justify-content:center;margin:0;min-width:80px;outline:transparent}.doc-cck-button__backdrop{display:none}.doc-cck-button__size--sm{gap:8px;height:32px;padding:0 12px 0 8px}.doc-cck-button__size--sm:has(.doc-cck-svg-icon:first-child){padding:0 12px 0 4px}.doc-cck-button__size--md{gap:8px;height:40px;padding:0 12px}.doc-cck-button__size--md:has(.doc-cck-svg-icon:first-child){padding:0 16px 0 8px}.doc-cck-button__basic{background-color:transparent;color:var(--cck-doc-color-font-1)}.doc-cck-button__basic .doc-cck-svg-icon{fill:var(--cck-doc-color-font-1)}.doc-cck-button__basic:hover{background-color:var(--cck-doc-color-bg-hover-2)}.doc-cck-button__light{background-color:var(--cck-doc-color-bg-selected-1);color:var(--cck-doc-color-font-1)}.doc-cck-button__light:hover{background-color:var(--cck-doc-color-bg-hover-3)}.doc-cck-button__light .doc-cck-svg-icon{fill:var(--cck-doc-color-font-1)}.doc-cck-button__outline{background-color:var(--cck-doc-color-bg-1);border:1px solid var(--cck-doc-ocean-green-600);color:var(--cck-doc-ocean-green-600)}.doc-cck-button__outline:hover{background-color:var(--cck-doc-color-bg-hover-2)}.doc-cck-button__outline .doc-cck-svg-icon{fill:var(--cck-doc-ocean-green-600)}body,html{margin:0;padding:0}*{box-sizing:border-box}.doc-cck-form-field{align-items:flex-start;display:flex;flex-direction:column;gap:4px}.doc-cck-form-field .doc-cck-select{flex:1;height:100%;width:100%}.doc-cck-form-field .doc-cck-input{flex:1;width:100%}.doc-cck-form-field--disabled{opacity:.5}.doc-cck-form-field__wrapper{align-items:stretch;display:flex;flex-direction:row;height:40px;width:100%}.doc-cck-form-field__feedback-wrapper{display:flex;flex-direction:column;overflow:hidden}.doc-cck-form-field__feedback-wrapper:empty{display:none}.doc-cck-form-field__input-wrapper{align-items:center;background-color:var(--cck-doc-color-bg-1);border:1px solid var(--cck-doc-color-border-2);border-radius:var(--cck-doc-radius-sm);display:flex;flex:1;flex-direction:row;min-width:0;padding:8px 12px}.doc-cck-form-field__input-wrapper:hover{background-color:var(--cck-doc-color-bg-hover-2)}.doc-cck-form-field--focused .doc-cck-form-field__input-wrapper{background-color:var(--cck-doc-color-bg-1);border:1px solid var(--cck-doc-color-brand-default);box-shadow:inset 0 0 0 1px var(--cck-doc-color-brand-default)}.doc-cck-svg-icon{align-items:center;display:flex;flex-shrink:0;height:24px;justify-content:center;width:24px;fill:var(--cck-doc-color-font-4)}.doc-cck-svg-icon__svg{height:100%;width:100%}.doc-cck-icon-button{align-items:center;background-color:transparent;border:none;border-radius:50%;box-sizing:border-box;color:var(--cck-doc-color-font-3);cursor:pointer;display:flex;font:var(--cck-doc-text-sm-medium);justify-content:center;margin:0;outline:transparent;transition:background-color .15s}.doc-cck-icon-button .doc-cck-svg-icon{fill:currentcolor;transition:color .15s}.doc-cck-icon-button:hover{background-color:var(--cck-doc-color-bg-hover-1);color:var(--cck-doc-color-font-2)}.doc-cck-icon-button__backdrop{display:none}.doc-cck-icon-button__size--sm{height:32px;width:32px}.doc-cck-icon-button__size--md{height:40px;width:40px}.doc-cck-icon-button__outline{border:1px solid var(--cck-doc-color-border-2)}.doc-cck-input{background-color:transparent;border:none;color:var(--cck-doc-color-font-1);font:var(--cck-doc-text-sm-regular);outline:none;text-overflow:ellipsis}.doc-cck-input::-moz-placeholder{color:var(--cck-doc-color-font-4)}.doc-cck-input::placeholder{color:var(--cck-doc-color-font-4)}.doc-cck-option{align-items:center;border-radius:6px;color:var(--cck-doc-color-font-1);cursor:pointer;display:flex;font:var(--cck-doc-text-sm-regular);gap:8px;height:40px;padding:0 12px}.doc-cck-option:hover{background-color:var(--cck-doc-color-bg-hover-1)}.doc-cck-option .doc-cck-checkbox__input-wrapper{height:16px;width:16px}.doc-cck-option .doc-cck-option --single.doc-cck-option --selected{font:var(--cck-doc-text-sm-medium)}.doc-cck-option__content-wrapper{align-items:center;display:flex;flex:1}.doc-cck-option__selected-checkmark .doc-cck-svg-icon{height:20px;width:20px}.doc-cck-radio-button__wrapper{align-items:center;cursor:pointer;display:inline-flex;vertical-align:middle}.doc-cck-radio-button__input-wrapper{align-items:center;box-sizing:content-box;cursor:pointer;display:inline-block;flex:0 0 auto;height:16px;justify-content:center;position:relative;width:16px;will-change:opacity,transform,border-color,color}.doc-cck-radio-button__input{cursor:inherit;height:100%;left:0;margin:0;opacity:0;padding:0;position:absolute;right:0;top:0;width:100%;z-index:1}.doc-cck-radio-button__backdrop{display:none}.doc-cck-radio-button__background{box-sizing:border-box;height:100%;position:relative;width:100%}.doc-cck-radio-button__background--outer-circle{border-color:var(--cck-doc-color-font-1);border-radius:50%;border-style:solid;border-width:1px;box-sizing:border-box;height:100%;left:0;position:absolute;top:0;transition:border-color 90ms cubic-bezier(0,0,.2,1);width:100%}.doc-cck-radio-button__background--inner-circle{border-radius:50%;box-sizing:border-box;height:100%;left:0;position:absolute;top:0;transform:scale(0);transition:transform 90ms cubic-bezier(.4,0,.6,1),background-color 90ms cubic-bezier(.4,0,.6,1);width:100%}.doc-cck-radio-button--checked .doc-cck-radio-button__background--outer-circle{border-color:var(--cck-doc-color-brand-default);border-width:2px}.doc-cck-radio-button--checked .doc-cck-radio-button__background--inner-circle{background-color:var(--cck-doc-color-brand-default);transform:scale(.5);transition:transform 90ms cubic-bezier(0,0,.2,1),border-color 90ms cubic-bezier(0,0,.2,1)}.doc-cck-radio-button--checked .doc-cck-radio-button__label{color:var(--cck-doc-color-brand-default)}.doc-cck-radio-button__label{color:var(--cck-doc-color-font-1);cursor:pointer;font:var(--cck-doc-text-md-regular);margin-left:0;margin-right:auto;order:0;padding-left:8px;padding-right:0;white-space:nowrap}.doc-cck-radio-group{align-items:flex-start;display:flex}.doc-cck-radio-group__row{flex-direction:row;gap:12px}.doc-cck-radio-group__column{flex-direction:column}.doc-cck-select{align-items:center;border-radius:6px;color:var(--cck-doc-color-font-1);cursor:pointer;display:flex;font:var(--cck-doc-text-sm-regular)}.doc-cck-select__placeholder{color:var(--cck-doc-color-font-4)}.doc-cck-select__trigger-wrapper{color:currentcolor;flex:1;overflow:hidden;padding-right:8px;text-align:start}.doc-cck-select__trigger-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.doc-cck-select__overlay .doc-cck-overlay__backdrop{background-color:transparent}.doc-cck-select__dropdown-icon-wrapper .doc-cck-svg-icon{height:24px;width:24px}.doc-cck-select__options-wrapper{background-color:var(--cck-doc-color-bg-1);border:1px solid var(--cck-doc-color-border-2);border-radius:var(--cck-doc-radius-sm);height:inherit;margin-top:6px;max-height:inherit;overflow:auto;padding:4px}.doc-cck-toggle{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.doc-cck-toggle__label{align-items:center;color:var(--cck-doc-color-font-1);cursor:pointer;display:flex;font:var(--cck-doc-text-md-regular);gap:8px;white-space:nowrap}.doc-cck-toggle--label-before .doc-cck-toggle__label{flex-direction:row-reverse}.doc-cck-toggle__input{cursor:pointer;height:100%;margin:0;opacity:0;padding:0;position:relative;width:100%;z-index:3}.doc-cck-toggle__slider-wrapper{height:20px;position:relative;width:32px}.doc-cck-toggle__thumb{background-color:var(--cck-doc-color-bg-1);border-radius:50%;height:16px;position:absolute;transition:all .3s ease;width:16px;z-index:2}.doc-cck-toggle__backdrop{border-radius:500px;height:100%;left:0;position:absolute;top:0;transition:background-color .3s ease;width:100%;z-index:1}.doc-cck-toggle--checked .doc-cck-toggle__thumb{left:100%;top:50%;transform:translate(calc(-100% - 2px),-50%)}.doc-cck-toggle--checked .doc-cck-toggle__backdrop{background-color:var(--cck-doc-color-brand-default)}.doc-cck-toggle--unchecked .doc-cck-toggle__thumb{left:0;top:50%;transform:translate(2px,-50%)}.doc-cck-toggle--unchecked .doc-cck-toggle__backdrop{background-color:var(--cck-doc-color-bg-4)}.doc-cck-overlay__backdrop{background-color:rgba(0,0,0,.5)}.doc-cck-tabs{display:flex;flex-direction:column;gap:12px}.doc-cck-tabs__labels-wrapper{align-items:center;align-self:flex-start;border-radius:var(--cck-doc-radius-sm);display:flex;flex-wrap:wrap;gap:8px;min-height:40px;padding:4px}.doc-cck-tabs__size--fit .doc-cck-tabs__labels-wrapper{width:100%}.doc-cck-tabs__color--default .doc-cck-tabs__labels-wrapper{background-color:var(--cck-doc-color-bg-3)}.doc-cck-tabs__color--h-contrast .doc-cck-tabs__labels-wrapper{background-color:var(--cck-doc-color-bg-4)}.doc-cck-tab{align-items:center;background:transparent;border:none;border-radius:var(--cck-doc-radius-sm);cursor:pointer;display:flex;font:var(--cck-doc-text-sm-medium);height:32px;justify-content:center;outline:none;padding:4px 12px;position:relative}.doc-cck-tabs__size--fit .doc-cck-tab{flex:1;padding:4px 0}.doc-cck-tab__indicator{border-radius:var(--cck-doc-radius-sm);height:100%;left:0;position:absolute;top:0;width:100%}.doc-cck-tab--selected{color:var(--cck-doc-color-font-1)}.doc-cck-tab--unselected{color:var(--cck-doc-color-font-2)}.doc-cck-tab .doc-cck-svg-icon{fill:currentcolor}.doc-cck-tabs__color--default .doc-cck-tab__indicator{background-color:var(--cck-doc-color-bg-1)}.doc-cck-tabs__color--h-contrast .doc-cck-tab__indicator{background-color:var(--cck-doc-color-bg-2)}.doc-cck-tab-label{position:relative;z-index:1} \ No newline at end of file +:where(.cck-theme-storybook-addon__local-style--default),:where([data-cck-theme*=storybook-addon__local-style--default]){--cck-doc-display-2xl-regular:400 72px/90px Inter;--cck-doc-display-2xl-light:300 72px/90px Inter;--cck-doc-display-2xl-medium:500 72px/90px Inter;--cck-doc-display-2xl-semibold:600 72px/90px Inter;--cck-doc-display-2xl-bold:700 72px/90px Inter;--cck-doc-display-xl-light:300 60px/72px Inter;--cck-doc-display-xl-regular:400 60px/72px Inter;--cck-doc-display-xl-medium:500 60px/72px Inter;--cck-doc-display-xl-semibold:600 60px/72px Inter;--cck-doc-display-xl-bold:700 60px/72px Inter;--cck-doc-display-lg-light:300 48px/64px Inter;--cck-doc-display-lg-regular:400 48px/64px Inter;--cck-doc-display-lg-medium:500 48px/64px Inter;--cck-doc-display-lg-semibold:600 48px/64px Inter;--cck-doc-display-lg-bold:700 48px/64px Inter;--cck-doc-display-md-light:300 36px/60px Inter;--cck-doc-display-md-regular:400 36px/60px Inter;--cck-doc-display-md-medium:500 36px/60px Inter;--cck-doc-display-md-semibold:600 36px/60px Inter;--cck-doc-display-md-bold:700 36px/60px Inter;--cck-doc-display-sm-light:300 30px/44px Inter;--cck-doc-display-sm-regular:400 30px/44px Inter;--cck-doc-display-sm-medium:500 30px/44px Inter;--cck-doc-display-sm-semibold:600 30px/44px Inter;--cck-doc-display-sm-bold:700 30px/44px Inter;--cck-doc-display-xs-light:300 24px/38px Inter;--cck-doc-display-xs-regular:400 24px/38px Inter;--cck-doc-display-xs-medium:500 24px/38px Inter;--cck-doc-display-xs-semibold:600 24px/38px Inter;--cck-doc-display-xs-bold:700 24px/38px Inter;--cck-doc-text-xl-light:300 20px/32px Inter;--cck-doc-text-xl-regular:400 20px/32px Inter;--cck-doc-text-xl-medium:500 20px/32px Inter;--cck-doc-text-xl-semibold:600 20px/32px Inter;--cck-doc-text-xl-bold:700 20px/32px Inter;--cck-doc-text-lg-light:300 18px/30px Inter;--cck-doc-text-lg-regular:400 18px/30px Inter;--cck-doc-text-lg-medium:500 18px/30px Inter;--cck-doc-text-lg-semibold:600 18px/30px Inter;--cck-doc-text-lg-bold:700 18px/30px Inter;--cck-doc-text-md-light:300 16px/28px Inter;--cck-doc-text-md-regular:400 16px/28px Inter;--cck-doc-text-md-medium:500 16px/28px Inter;--cck-doc-text-md-semibold:600 16px/28px Inter;--cck-doc-text-md-bold:700 16px/28px Inter;--cck-doc-text-sm-light:300 14px/24px Inter;--cck-doc-text-sm-regular:400 14px/24px Inter;--cck-doc-text-sm-medium:500 14px/24px Inter;--cck-doc-text-sm-semibold:600 14px/24px Inter;--cck-doc-text-sm-bold:700 14px/24px Inter;--cck-doc-text-xs-light:300 12px/20px Inter;--cck-doc-text-xs-regular:400 12px/20px Inter;--cck-doc-text-xs-medium:500 12px/20px Inter;--cck-doc-text-xs-semibold:600 12px/20px Inter;--cck-doc-text-xs-bold:700 12px/20px Inter}:where(.cck-theme-storybook-addon__color--dark),:where([data-cck-theme*=storybook-addon__color--dark]){--cck-doc-color-brand-default:var(--cck-doc-ocean-green-500);--cck-doc-color-bg-0:var(--cck-doc-black-50);--cck-doc-color-bg-1:var(--cck-doc-black-100);--cck-doc-color-bg-2:var(--cck-doc-black-200);--cck-doc-color-bg-3:var(--cck-doc-black-300);--cck-doc-color-bg-4:var(--cck-doc-black-400);--cck-doc-color-bg-5:var(--cck-doc-black-500);--cck-doc-color-bg-alpha-1:var(--cck-doc-black-alpha-1);--cck-doc-color-bg-alpha-2:var(--cck-doc-black-alpha-3);--cck-doc-color-bg-alpha-3:var(--cck-doc-black-alpha-4);--cck-doc-color-bg-alpha-4:var(--cck-doc-black-alpha-5);--cck-doc-color-bg-alpha-5:var(--cck-doc-black-alpha-6);--cck-doc-color-bg-hover-1:var(--cck-doc-color-bg-3);--cck-doc-color-bg-hover-2:var(--cck-doc-color-bg-2);--cck-doc-color-bg-hover-3:var(--cck-doc-ocean-green-900);--cck-doc-color-bg-selected-1:var(--cck-doc-ocean-green-950);--cck-doc-color-bg-selected-2:var(--cck-doc-ocean-green-900);--cck-doc-color-border-1:var(--cck-doc-white-alpha-2);--cck-doc-color-border-2:var(--cck-doc-white-alpha-4);--cck-doc-color-border-3:var(--cck-doc-white-alpha-5);--cck-doc-color-font-1:var(--cck-doc-white-50);--cck-doc-color-font-2:#ccc;--cck-doc-color-font-3:#999;--cck-doc-color-font-4:#666;--cck-doc-color-font-5:#333;--cck-doc-color-font-alpha-1:var(--cck-doc-white-50);--cck-doc-color-font-alpha-2:var(--cck-doc-white-alpha-8);--cck-doc-color-font-alpha-3:var(--cck-doc-white-alpha-7);--cck-doc-color-font-alpha-4:var(--cck-doc-white-alpha-6);--cck-doc-color-font-alpha-5:var(--cck-doc-white-alpha-5);--cck-doc-color-main-effect-primary-start:#1bbf82cc;--cck-doc-color-main-effect-primary-end:#1bbf8299;--cck-doc-color-main-effect-surface-start:#0f111600;--cck-doc-color-main-effect-surface-end:#0f1116;--cck-doc-color-main-effect-box-start:#ffffff14;--cck-doc-color-main-effect-box-end:#ffffff00}:where(.cck-theme-storybook-addon__color--light),:where([data-cck-theme*=storybook-addon__color--light]){--cck-doc-color-brand-default:var(--cck-doc-see-green-500);--cck-doc-color-bg-0:var(--cck-doc-white-50);--cck-doc-color-bg-1:var(--cck-doc-white-50);--cck-doc-color-bg-2:var(--cck-doc-white-50);--cck-doc-color-bg-3:var(--cck-doc-white-100);--cck-doc-color-bg-4:var(--cck-doc-white-300);--cck-doc-color-bg-5:var(--cck-doc-white-400);--cck-doc-color-bg-alpha-1:var(--cck-doc-white-alpha-1);--cck-doc-color-bg-alpha-2:var(--cck-doc-white-alpha-3);--cck-doc-color-bg-alpha-3:var(--cck-doc-white-alpha-4);--cck-doc-color-bg-alpha-4:var(--cck-doc-white-alpha-5);--cck-doc-color-bg-alpha-5:var(--cck-doc-white-alpha-6);--cck-doc-color-bg-hover-1:var(--cck-doc-color-bg-3);--cck-doc-color-bg-hover-2:var(--cck-doc-color-bg-3);--cck-doc-color-bg-hover-3:var(--cck-doc-ocean-green-200);--cck-doc-color-bg-selected-1:var(--cck-doc-ocean-green-100);--cck-doc-color-bg-selected-2:var(--cck-doc-ocean-green-200);--cck-doc-color-border-1:var(--cck-doc-black-alpha-2);--cck-doc-color-border-2:var(--cck-doc-black-alpha-4);--cck-doc-color-border-3:var(--cck-doc-black-alpha-5);--cck-doc-color-font-1:var(--cck-doc-black-50);--cck-doc-color-font-2:#333d4a;--cck-doc-color-font-3:#666d77;--cck-doc-color-font-4:#999ea5;--cck-doc-color-font-5:#ccced2;--cck-doc-color-font-alpha-1:var(--cck-doc-black-50);--cck-doc-color-font-alpha-2:var(--cck-doc-black-alpha-8);--cck-doc-color-font-alpha-3:var(--cck-doc-black-alpha-7);--cck-doc-color-font-alpha-4:var(--cck-doc-black-alpha-6);--cck-doc-color-font-alpha-5:var(--cck-doc-black-alpha-5);--cck-doc-color-main-effect-primary-start:#008d5ecc;--cck-doc-color-main-effect-primary-end:#008d5e99;--cck-doc-color-main-effect-surface-start:#ffffff00;--cck-doc-color-main-effect-surface-end:#fff;--cck-doc-color-main-effect-box-start:#0f111614;--cck-doc-color-main-effect-box-end:#0f111600}:where(.cck-theme-storybook-addon__size--default),:where([data-cck-theme*=storybook-addon__size--default]){--cck-doc-radius-xs:2px;--cck-doc-radius-sm:4px;--cck-doc-radius-md:8px;--cck-doc-radius-lg:12px;--cck-doc-radius-xl:16px}:where(.cck-theme-storybook-addon__color-palette--default),:where([data-cck-theme*=storybook-addon__color-palette--default]){--cck-doc-ocean-green-50:#f0fdf7;--cck-doc-ocean-green-100:#d4fcec;--cck-doc-ocean-green-200:#aaf7da;--cck-doc-ocean-green-300:#72edc0;--cck-doc-ocean-green-400:#3cd9a0;--cck-doc-ocean-green-500:#1bbf82;--cck-doc-ocean-green-600:#129c69;--cck-doc-ocean-green-700:#127b56;--cck-doc-ocean-green-800:#146247;--cck-doc-ocean-green-900:#14513c;--cck-doc-ocean-green-950:#012c1e;--cck-doc-see-green-50:#effffa;--cck-doc-see-green-100:#a1ffe0;--cck-doc-see-green-200:#52ffc5;--cck-doc-see-green-300:#00ef9f;--cck-doc-see-green-400:#00b478;--cck-doc-see-green-500:#008d5e;--cck-doc-see-green-600:#007951;--cck-doc-see-green-700:#064;--cck-doc-see-green-800:#005237;--cck-doc-see-green-900:#003f2a;--cck-doc-see-green-950:#002b1d;--cck-doc-black-50:#00060f;--cck-doc-black-100:#0f1116;--cck-doc-black-200:#15171e;--cck-doc-black-300:#191b23;--cck-doc-black-400:#222835;--cck-doc-black-500:#494f60;--cck-doc-white-50:#fff;--cck-doc-white-100:#f5f5f5;--cck-doc-white-200:#ececef;--cck-doc-white-300:#e3e3e8;--cck-doc-white-400:#d1d5e1;--cck-doc-white-500:#c1c7d7;--cck-doc-white-alpha-0:#ffffff05;--cck-doc-white-alpha-1:#ffffff0a;--cck-doc-white-alpha-2:#ffffff0f;--cck-doc-white-alpha-3:#ffffff14;--cck-doc-white-alpha-4:#ffffff1a;--cck-doc-white-alpha-5:#ffffff33;--cck-doc-white-alpha-6:#ffffff66;--cck-doc-white-alpha-7:#ffffff99;--cck-doc-white-alpha-8:#ffffffcc;--cck-doc-white-alpha-9:#ffffffe5;--cck-doc-white-alpha-10:#fff;--cck-doc-black-alpha-0:#000c1d05;--cck-doc-black-alpha-1:#000c1d0a;--cck-doc-black-alpha-2:#000c1d0f;--cck-doc-black-alpha-3:#000c1d14;--cck-doc-black-alpha-4:#000c1d1a;--cck-doc-black-alpha-5:#000c1d33;--cck-doc-black-alpha-6:#000c1d66;--cck-doc-black-alpha-7:#000c1d99;--cck-doc-black-alpha-8:#000c1dcc;--cck-doc-black-alpha-9:#000c1de5;--cck-doc-black-alpha-10:#000c1d}.cck-theme-storybook-addon--remove-toolbar main .sb-bar{display:none}#root>div:first-child>div:nth-child(2){border:1px solid var(--cck-doc-color-border-2)}#root>div:first-child>div:nth-child(2)>div:first-child,#root>div:first-child>div:nth-child(3)>.sb-bar{display:none}.sidebar-container>div:first-child>div:first-of-type>div:first-child>div:first-child{padding:12px 24px}.sidebar-header>div:first-of-type>a:first-child>img{max-width:180px!important;width:180px}.sidebar-header>div:first-of-type{margin-right:0}.sidebar-header>div:nth-child(3){display:none}.search-field{background-color:var(--cck-doc-color-bg-2);border:1px solid var(--cck-doc-color-border-1);gap:8px;height:36px!important;padding:4px!important}.search-field+div{display:none}.search-field>div:first-child{color:var(--cck-doc-color-font-2);flex:none;margin-left:4px}.search-field>input:nth-child(2)::-moz-placeholder{color:var(--cck-doc-color-font-4)}.search-field>input:nth-child(2)::placeholder{color:var(--cck-doc-color-font-4)}.search-field>code:nth-child(3){display:none}.sidebar-subheading{margin-top:0!important}.sidebar-item+.sidebar-subheading{margin-top:24px!important}.sidebar-subheading>button:first-of-type{height:auto;padding:0;width:100%}.sidebar-subheading>button:first-of-type:hover{background-color:unset}.sidebar-subheading>button:first-of-type>div:first-child{display:none}.sidebar-subheading>button:nth-of-type(2){display:none!important}.sidebar-item:hover,.sidebar-item[data-selected=true]{background-color:unset!important}.sidebar-item>button:first-of-type{padding:0}.sidebar-item>button:first-of-type>div:first-of-type{display:none}.sidebar-item>a:first-of-type{padding:0}.sidebar-item>a:first-of-type>div:first-of-type,.sidebar-item>a:nth-of-type(2){display:none}.sbdocs.sbdocs-wrapper{background:transparent;padding:0}.sbdocs.sbdocs-content{max-width:unset}h1{font:var(--cck-doc-display-sm-semibold);margin:0 0 28px}h1,h2{color:var(--cck-doc-color-font-1)}h2{font:var(--cck-doc-text-xl-medium);margin:36px 0 24px}h3{font:var(--cck-doc-text-lg-medium)}h3,h4{color:var(--cck-doc-color-font-1);margin:12px 0}h4{font:var(--cck-doc-text-md-medium)}h5{font:var(--cck-doc-text-sm-medium)}h5,h6{color:var(--cck-doc-color-font-1);margin:12px 0}h6{font:var(--cck-doc-text-xs-medium)}p{margin:0 0 16px}ol,p,ul{color:var(--cck-doc-color-font-2);font:var(--cck-doc-text-sm-regular)}ol,ul{margin-top:12px}li{margin:0 0 16px}pre{margin:28px 0}strong{font-weight:600}hr{background-color:var(--cck-doc-color-border-1);border:none;height:1px;margin:48px 0}.cck-theme-storybook-addon code,code{background-color:var(--cck-doc-color-bg-3);border:1px solid var(--cck-doc-color-border-1);border-radius:4px;color:inherit;display:inline-block;font:inherit;margin:0 2px;padding:0 6px}.cck-theme-storybook-addon a,a{color:var(--cck-doc-color-brand-default);font:inherit}.doc-cck-button{align-items:center;border:none;border-radius:var(--cck-doc-radius-sm);box-sizing:border-box;cursor:pointer;display:flex;font:var(--cck-doc-text-sm-medium);justify-content:center;margin:0;min-width:80px;outline:transparent}.doc-cck-button__backdrop{display:none}.doc-cck-button__size--sm{gap:8px;height:32px;padding:0 12px 0 8px}.doc-cck-button__size--sm:has(.doc-cck-svg-icon:first-child){padding:0 12px 0 4px}.doc-cck-button__size--md{gap:8px;height:40px;padding:0 12px}.doc-cck-button__size--md:has(.doc-cck-svg-icon:first-child){padding:0 16px 0 8px}.doc-cck-button__basic{background-color:transparent;color:var(--cck-doc-color-font-1)}.doc-cck-button__basic .doc-cck-svg-icon{fill:var(--cck-doc-color-font-1)}.doc-cck-button__basic:hover{background-color:var(--cck-doc-color-bg-hover-2)}.doc-cck-button__light{background-color:var(--cck-doc-color-bg-selected-1);color:var(--cck-doc-color-font-1)}.doc-cck-button__light:hover{background-color:var(--cck-doc-color-bg-hover-3)}.doc-cck-button__light .doc-cck-svg-icon{fill:var(--cck-doc-color-font-1)}.doc-cck-button__outline{background-color:var(--cck-doc-color-bg-1);border:1px solid var(--cck-doc-ocean-green-600);color:var(--cck-doc-ocean-green-600)}.doc-cck-button__outline:hover{background-color:var(--cck-doc-color-bg-hover-2)}.doc-cck-button__outline .doc-cck-svg-icon{fill:var(--cck-doc-ocean-green-600)}body,html{margin:0;padding:0}*{box-sizing:border-box}.doc-cck-form-field{align-items:flex-start;display:flex;flex-direction:column;gap:4px}.doc-cck-form-field .doc-cck-select{flex:1;height:100%;width:100%}.doc-cck-form-field .doc-cck-input{flex:1;width:100%}.doc-cck-form-field--disabled{opacity:.5}.doc-cck-form-field__wrapper{align-items:stretch;display:flex;flex-direction:row;height:40px;width:100%}.doc-cck-form-field__feedback-wrapper{display:flex;flex-direction:column;overflow:hidden}.doc-cck-form-field__feedback-wrapper:empty{display:none}.doc-cck-form-field__input-wrapper{align-items:center;background-color:var(--cck-doc-color-bg-1);border:1px solid var(--cck-doc-color-border-2);border-radius:var(--cck-doc-radius-sm);display:flex;flex:1;flex-direction:row;min-width:0;padding:8px 12px}.doc-cck-form-field__input-wrapper:hover{background-color:var(--cck-doc-color-bg-hover-2)}.doc-cck-form-field--focused .doc-cck-form-field__input-wrapper{background-color:var(--cck-doc-color-bg-1);border:1px solid var(--cck-doc-color-brand-default);box-shadow:inset 0 0 0 1px var(--cck-doc-color-brand-default)}.doc-cck-svg-icon{align-items:center;display:flex;flex-shrink:0;height:24px;justify-content:center;width:24px;fill:var(--cck-doc-color-font-4)}.doc-cck-svg-icon__svg{height:100%;width:100%}.doc-cck-icon-button{align-items:center;background-color:transparent;border:none;border-radius:50%;box-sizing:border-box;color:var(--cck-doc-color-font-3);cursor:pointer;display:flex;font:var(--cck-doc-text-sm-medium);justify-content:center;margin:0;outline:transparent;transition:background-color .15s}.doc-cck-icon-button .doc-cck-svg-icon{fill:currentcolor;transition:color .15s}.doc-cck-icon-button:hover{background-color:var(--cck-doc-color-bg-hover-1);color:var(--cck-doc-color-font-2)}.doc-cck-icon-button__backdrop{display:none}.doc-cck-icon-button__size--sm{height:32px;width:32px}.doc-cck-icon-button__size--md{height:40px;width:40px}.doc-cck-icon-button__outline{border:1px solid var(--cck-doc-color-border-2)}.doc-cck-input{background-color:transparent;border:none;color:var(--cck-doc-color-font-1);font:var(--cck-doc-text-sm-regular);outline:none;text-overflow:ellipsis}.doc-cck-input::-moz-placeholder{color:var(--cck-doc-color-font-4)}.doc-cck-input::placeholder{color:var(--cck-doc-color-font-4)}.doc-cck-option{align-items:center;border-radius:6px;color:var(--cck-doc-color-font-1);cursor:pointer;display:flex;font:var(--cck-doc-text-sm-regular);gap:8px;height:40px;padding:0 12px}.doc-cck-option:hover{background-color:var(--cck-doc-color-bg-hover-1)}.doc-cck-option .doc-cck-checkbox__input-wrapper{height:16px;width:16px}.doc-cck-option .doc-cck-option --single.doc-cck-option --selected{font:var(--cck-doc-text-sm-medium)}.doc-cck-option__content-wrapper{align-items:center;display:flex;flex:1}.doc-cck-option__selected-checkmark .doc-cck-svg-icon{height:20px;width:20px}.doc-cck-radio-button__wrapper{align-items:center;cursor:pointer;display:inline-flex;vertical-align:middle}.doc-cck-radio-button__input-wrapper{align-items:center;box-sizing:content-box;cursor:pointer;display:inline-block;flex:0 0 auto;height:16px;justify-content:center;position:relative;width:16px;will-change:opacity,transform,border-color,color}.doc-cck-radio-button__input{cursor:inherit;height:100%;left:0;margin:0;opacity:0;padding:0;position:absolute;right:0;top:0;width:100%;z-index:1}.doc-cck-radio-button__backdrop{display:none}.doc-cck-radio-button__background{box-sizing:border-box;height:100%;position:relative;width:100%}.doc-cck-radio-button__background--outer-circle{border-color:var(--cck-doc-color-font-1);border-radius:50%;border-style:solid;border-width:1px;box-sizing:border-box;height:100%;left:0;position:absolute;top:0;transition:border-color 90ms cubic-bezier(0,0,.2,1);width:100%}.doc-cck-radio-button__background--inner-circle{border-radius:50%;box-sizing:border-box;height:100%;left:0;position:absolute;top:0;transform:scale(0);transition:transform 90ms cubic-bezier(.4,0,.6,1),background-color 90ms cubic-bezier(.4,0,.6,1);width:100%}.doc-cck-radio-button--checked .doc-cck-radio-button__background--outer-circle{border-color:var(--cck-doc-color-brand-default);border-width:2px}.doc-cck-radio-button--checked .doc-cck-radio-button__background--inner-circle{background-color:var(--cck-doc-color-brand-default);transform:scale(.5);transition:transform 90ms cubic-bezier(0,0,.2,1),border-color 90ms cubic-bezier(0,0,.2,1)}.doc-cck-radio-button--checked .doc-cck-radio-button__label{color:var(--cck-doc-color-brand-default)}.doc-cck-radio-button__label{color:var(--cck-doc-color-font-1);cursor:pointer;font:var(--cck-doc-text-md-regular);margin-left:0;margin-right:auto;order:0;padding-left:8px;padding-right:0;white-space:nowrap}.doc-cck-radio-group{align-items:flex-start;display:flex}.doc-cck-radio-group__row{flex-direction:row;gap:12px}.doc-cck-radio-group__column{flex-direction:column}.doc-cck-select{align-items:center;border-radius:6px;color:var(--cck-doc-color-font-1);cursor:pointer;display:flex;font:var(--cck-doc-text-sm-regular)}.doc-cck-select__placeholder{color:var(--cck-doc-color-font-4)}.doc-cck-select__trigger-wrapper{color:currentcolor;flex:1;overflow:hidden;padding-right:8px;text-align:start}.doc-cck-select__trigger-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.doc-cck-select__overlay .doc-cck-overlay__backdrop{background-color:transparent}.doc-cck-select__dropdown-icon-wrapper .doc-cck-svg-icon{height:24px;width:24px}.doc-cck-select__options-wrapper{background-color:var(--cck-doc-color-bg-1);border:1px solid var(--cck-doc-color-border-2);border-radius:var(--cck-doc-radius-sm);height:inherit;margin-top:6px;max-height:inherit;overflow:auto;padding:4px}.doc-cck-toggle{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.doc-cck-toggle__label{align-items:center;color:var(--cck-doc-color-font-1);cursor:pointer;display:flex;font:var(--cck-doc-text-md-regular);gap:8px;white-space:nowrap}.doc-cck-toggle--label-before .doc-cck-toggle__label{flex-direction:row-reverse}.doc-cck-toggle__input{cursor:pointer;height:100%;margin:0;opacity:0;padding:0;position:relative;width:100%;z-index:3}.doc-cck-toggle__slider-wrapper{height:20px;position:relative;width:32px}.doc-cck-toggle__thumb{background-color:var(--cck-doc-color-bg-1);border-radius:50%;height:16px;position:absolute;transition:all .3s ease;width:16px;z-index:2}.doc-cck-toggle__backdrop{border-radius:500px;height:100%;left:0;position:absolute;top:0;transition:background-color .3s ease;width:100%;z-index:1}.doc-cck-toggle--checked .doc-cck-toggle__thumb{left:100%;top:50%;transform:translate(calc(-100% - 2px),-50%)}.doc-cck-toggle--checked .doc-cck-toggle__backdrop{background-color:var(--cck-doc-color-brand-default)}.doc-cck-toggle--unchecked .doc-cck-toggle__thumb{left:0;top:50%;transform:translate(2px,-50%)}.doc-cck-toggle--unchecked .doc-cck-toggle__backdrop{background-color:var(--cck-doc-color-bg-4)}.doc-cck-overlay__backdrop{background-color:rgba(0,0,0,.5)}.doc-cck-tabs{display:flex;flex-direction:column;gap:12px}.doc-cck-tabs__headers-wrapper{align-items:center;align-self:flex-start;border-radius:var(--cck-doc-radius-sm);display:flex;flex-wrap:wrap;gap:8px;min-height:40px;padding:4px}.doc-cck-tabs__size--fit .doc-cck-tabs__headers-wrapper{width:100%}.doc-cck-tabs__color--default .doc-cck-tabs__headers-wrapper{background-color:var(--cck-doc-color-bg-3)}.doc-cck-tabs__color--h-contrast .doc-cck-tabs__headers-wrapper{background-color:var(--cck-doc-color-bg-4)}.doc-cck-tab{align-items:center;background:transparent;border:none;border-radius:var(--cck-doc-radius-sm);cursor:pointer;display:flex;font:var(--cck-doc-text-sm-medium);height:32px;justify-content:center;outline:none;padding:4px 12px;position:relative}.doc-cck-tabs__size--fit .doc-cck-tab{flex:1;padding:4px 0}.doc-cck-tab__indicator{border-radius:var(--cck-doc-radius-sm);height:100%;left:0;position:absolute;top:0;width:100%}.doc-cck-tab--selected{color:var(--cck-doc-color-font-1)}.doc-cck-tab--unselected{color:var(--cck-doc-color-font-2)}.doc-cck-tab .doc-cck-svg-icon{fill:currentcolor}.doc-cck-tabs__color--default .doc-cck-tab__indicator{background-color:var(--cck-doc-color-bg-1)}.doc-cck-tabs__color--h-contrast .doc-cck-tab__indicator{background-color:var(--cck-doc-color-bg-2)}.doc-cck-tab__label{position:relative;z-index:1} \ No newline at end of file diff --git a/packages/internal/storybook-addon-theme/src/assets/styles/preview-styles.css b/packages/internal/storybook-addon-theme/src/assets/styles/preview-styles.css index f560612f..ce35a765 100644 --- a/packages/internal/storybook-addon-theme/src/assets/styles/preview-styles.css +++ b/packages/internal/storybook-addon-theme/src/assets/styles/preview-styles.css @@ -1156,7 +1156,7 @@ body{ flex-direction:column; gap:12px; } -.doc-cck-tabs__labels-wrapper{ +.doc-cck-tabs__headers-wrapper{ display:flex; flex-wrap:wrap; align-items:center; @@ -1166,13 +1166,13 @@ body{ align-self:flex-start; border-radius:var(--cck-doc-radius-sm); } -.doc-cck-tabs__size--fit .doc-cck-tabs__labels-wrapper{ +.doc-cck-tabs__size--fit .doc-cck-tabs__headers-wrapper{ width:100%; } -.doc-cck-tabs__color--default .doc-cck-tabs__labels-wrapper{ +.doc-cck-tabs__color--default .doc-cck-tabs__headers-wrapper{ background-color:var(--cck-doc-color-bg-3); } -.doc-cck-tabs__color--h-contrast .doc-cck-tabs__labels-wrapper{ +.doc-cck-tabs__color--h-contrast .doc-cck-tabs__headers-wrapper{ background-color:var(--cck-doc-color-bg-4); } @@ -1220,7 +1220,7 @@ body{ background-color:var(--cck-doc-color-bg-2); } -.doc-cck-tab-label{ +.doc-cck-tab__label{ position:relative; z-index:1; } \ No newline at end of file diff --git a/packages/internal/storybook-addon-theme/src/assets/styles/preview-styles.min.css b/packages/internal/storybook-addon-theme/src/assets/styles/preview-styles.min.css index 27f241c3..b961bb6b 100644 --- a/packages/internal/storybook-addon-theme/src/assets/styles/preview-styles.min.css +++ b/packages/internal/storybook-addon-theme/src/assets/styles/preview-styles.min.css @@ -4,4 +4,4 @@ * Generated by cocokits 'scss-builder' */ -:where(.cck-theme-storybook-addon__local-style--default),:where([data-cck-theme*=storybook-addon__local-style--default]){--cck-doc-display-2xl-regular:400 72px/90px Inter;--cck-doc-display-2xl-light:300 72px/90px Inter;--cck-doc-display-2xl-medium:500 72px/90px Inter;--cck-doc-display-2xl-semibold:600 72px/90px Inter;--cck-doc-display-2xl-bold:700 72px/90px Inter;--cck-doc-display-xl-light:300 60px/72px Inter;--cck-doc-display-xl-regular:400 60px/72px Inter;--cck-doc-display-xl-medium:500 60px/72px Inter;--cck-doc-display-xl-semibold:600 60px/72px Inter;--cck-doc-display-xl-bold:700 60px/72px Inter;--cck-doc-display-lg-light:300 48px/64px Inter;--cck-doc-display-lg-regular:400 48px/64px Inter;--cck-doc-display-lg-medium:500 48px/64px Inter;--cck-doc-display-lg-semibold:600 48px/64px Inter;--cck-doc-display-lg-bold:700 48px/64px Inter;--cck-doc-display-md-light:300 36px/60px Inter;--cck-doc-display-md-regular:400 36px/60px Inter;--cck-doc-display-md-medium:500 36px/60px Inter;--cck-doc-display-md-semibold:600 36px/60px Inter;--cck-doc-display-md-bold:700 36px/60px Inter;--cck-doc-display-sm-light:300 30px/44px Inter;--cck-doc-display-sm-regular:400 30px/44px Inter;--cck-doc-display-sm-medium:500 30px/44px Inter;--cck-doc-display-sm-semibold:600 30px/44px Inter;--cck-doc-display-sm-bold:700 30px/44px Inter;--cck-doc-display-xs-light:300 24px/38px Inter;--cck-doc-display-xs-regular:400 24px/38px Inter;--cck-doc-display-xs-medium:500 24px/38px Inter;--cck-doc-display-xs-semibold:600 24px/38px Inter;--cck-doc-display-xs-bold:700 24px/38px Inter;--cck-doc-text-xl-light:300 20px/32px Inter;--cck-doc-text-xl-regular:400 20px/32px Inter;--cck-doc-text-xl-medium:500 20px/32px Inter;--cck-doc-text-xl-semibold:600 20px/32px Inter;--cck-doc-text-xl-bold:700 20px/32px Inter;--cck-doc-text-lg-light:300 18px/30px Inter;--cck-doc-text-lg-regular:400 18px/30px Inter;--cck-doc-text-lg-medium:500 18px/30px Inter;--cck-doc-text-lg-semibold:600 18px/30px Inter;--cck-doc-text-lg-bold:700 18px/30px Inter;--cck-doc-text-md-light:300 16px/28px Inter;--cck-doc-text-md-regular:400 16px/28px Inter;--cck-doc-text-md-medium:500 16px/28px Inter;--cck-doc-text-md-semibold:600 16px/28px Inter;--cck-doc-text-md-bold:700 16px/28px Inter;--cck-doc-text-sm-light:300 14px/24px Inter;--cck-doc-text-sm-regular:400 14px/24px Inter;--cck-doc-text-sm-medium:500 14px/24px Inter;--cck-doc-text-sm-semibold:600 14px/24px Inter;--cck-doc-text-sm-bold:700 14px/24px Inter;--cck-doc-text-xs-light:300 12px/20px Inter;--cck-doc-text-xs-regular:400 12px/20px Inter;--cck-doc-text-xs-medium:500 12px/20px Inter;--cck-doc-text-xs-semibold:600 12px/20px Inter;--cck-doc-text-xs-bold:700 12px/20px Inter}:where(.cck-theme-storybook-addon__color--dark),:where([data-cck-theme*=storybook-addon__color--dark]){--cck-doc-color-brand-default:var(--cck-doc-ocean-green-500);--cck-doc-color-bg-0:var(--cck-doc-black-50);--cck-doc-color-bg-1:var(--cck-doc-black-100);--cck-doc-color-bg-2:var(--cck-doc-black-200);--cck-doc-color-bg-3:var(--cck-doc-black-300);--cck-doc-color-bg-4:var(--cck-doc-black-400);--cck-doc-color-bg-5:var(--cck-doc-black-500);--cck-doc-color-bg-alpha-1:var(--cck-doc-black-alpha-1);--cck-doc-color-bg-alpha-2:var(--cck-doc-black-alpha-3);--cck-doc-color-bg-alpha-3:var(--cck-doc-black-alpha-4);--cck-doc-color-bg-alpha-4:var(--cck-doc-black-alpha-5);--cck-doc-color-bg-alpha-5:var(--cck-doc-black-alpha-6);--cck-doc-color-bg-hover-1:var(--cck-doc-color-bg-3);--cck-doc-color-bg-hover-2:var(--cck-doc-color-bg-2);--cck-doc-color-bg-hover-3:var(--cck-doc-ocean-green-900);--cck-doc-color-bg-selected-1:var(--cck-doc-ocean-green-950);--cck-doc-color-bg-selected-2:var(--cck-doc-ocean-green-900);--cck-doc-color-border-1:var(--cck-doc-white-alpha-2);--cck-doc-color-border-2:var(--cck-doc-white-alpha-4);--cck-doc-color-border-3:var(--cck-doc-white-alpha-5);--cck-doc-color-font-1:var(--cck-doc-white-50);--cck-doc-color-font-2:#ccc;--cck-doc-color-font-3:#999;--cck-doc-color-font-4:#666;--cck-doc-color-font-5:#333;--cck-doc-color-font-alpha-1:var(--cck-doc-white-50);--cck-doc-color-font-alpha-2:var(--cck-doc-white-alpha-8);--cck-doc-color-font-alpha-3:var(--cck-doc-white-alpha-7);--cck-doc-color-font-alpha-4:var(--cck-doc-white-alpha-6);--cck-doc-color-font-alpha-5:var(--cck-doc-white-alpha-5);--cck-doc-color-main-effect-primary-start:#1bbf82cc;--cck-doc-color-main-effect-primary-end:#1bbf8299;--cck-doc-color-main-effect-surface-start:#0f111600;--cck-doc-color-main-effect-surface-end:#0f1116;--cck-doc-color-main-effect-box-start:#ffffff14;--cck-doc-color-main-effect-box-end:#ffffff00}:where(.cck-theme-storybook-addon__color--light),:where([data-cck-theme*=storybook-addon__color--light]){--cck-doc-color-brand-default:var(--cck-doc-see-green-500);--cck-doc-color-bg-0:var(--cck-doc-white-50);--cck-doc-color-bg-1:var(--cck-doc-white-50);--cck-doc-color-bg-2:var(--cck-doc-white-50);--cck-doc-color-bg-3:var(--cck-doc-white-100);--cck-doc-color-bg-4:var(--cck-doc-white-300);--cck-doc-color-bg-5:var(--cck-doc-white-400);--cck-doc-color-bg-alpha-1:var(--cck-doc-white-alpha-1);--cck-doc-color-bg-alpha-2:var(--cck-doc-white-alpha-3);--cck-doc-color-bg-alpha-3:var(--cck-doc-white-alpha-4);--cck-doc-color-bg-alpha-4:var(--cck-doc-white-alpha-5);--cck-doc-color-bg-alpha-5:var(--cck-doc-white-alpha-6);--cck-doc-color-bg-hover-1:var(--cck-doc-color-bg-3);--cck-doc-color-bg-hover-2:var(--cck-doc-color-bg-3);--cck-doc-color-bg-hover-3:var(--cck-doc-ocean-green-200);--cck-doc-color-bg-selected-1:var(--cck-doc-ocean-green-100);--cck-doc-color-bg-selected-2:var(--cck-doc-ocean-green-200);--cck-doc-color-border-1:var(--cck-doc-black-alpha-2);--cck-doc-color-border-2:var(--cck-doc-black-alpha-4);--cck-doc-color-border-3:var(--cck-doc-black-alpha-5);--cck-doc-color-font-1:var(--cck-doc-black-50);--cck-doc-color-font-2:#333d4a;--cck-doc-color-font-3:#666d77;--cck-doc-color-font-4:#999ea5;--cck-doc-color-font-5:#ccced2;--cck-doc-color-font-alpha-1:var(--cck-doc-black-50);--cck-doc-color-font-alpha-2:var(--cck-doc-black-alpha-8);--cck-doc-color-font-alpha-3:var(--cck-doc-black-alpha-7);--cck-doc-color-font-alpha-4:var(--cck-doc-black-alpha-6);--cck-doc-color-font-alpha-5:var(--cck-doc-black-alpha-5);--cck-doc-color-main-effect-primary-start:#008d5ecc;--cck-doc-color-main-effect-primary-end:#008d5e99;--cck-doc-color-main-effect-surface-start:#ffffff00;--cck-doc-color-main-effect-surface-end:#fff;--cck-doc-color-main-effect-box-start:#0f111614;--cck-doc-color-main-effect-box-end:#0f111600}:where(.cck-theme-storybook-addon__size--default),:where([data-cck-theme*=storybook-addon__size--default]){--cck-doc-radius-xs:2px;--cck-doc-radius-sm:4px;--cck-doc-radius-md:8px;--cck-doc-radius-lg:12px;--cck-doc-radius-xl:16px}:where(.cck-theme-storybook-addon__color-palette--default),:where([data-cck-theme*=storybook-addon__color-palette--default]){--cck-doc-ocean-green-50:#f0fdf7;--cck-doc-ocean-green-100:#d4fcec;--cck-doc-ocean-green-200:#aaf7da;--cck-doc-ocean-green-300:#72edc0;--cck-doc-ocean-green-400:#3cd9a0;--cck-doc-ocean-green-500:#1bbf82;--cck-doc-ocean-green-600:#129c69;--cck-doc-ocean-green-700:#127b56;--cck-doc-ocean-green-800:#146247;--cck-doc-ocean-green-900:#14513c;--cck-doc-ocean-green-950:#012c1e;--cck-doc-see-green-50:#effffa;--cck-doc-see-green-100:#a1ffe0;--cck-doc-see-green-200:#52ffc5;--cck-doc-see-green-300:#00ef9f;--cck-doc-see-green-400:#00b478;--cck-doc-see-green-500:#008d5e;--cck-doc-see-green-600:#007951;--cck-doc-see-green-700:#064;--cck-doc-see-green-800:#005237;--cck-doc-see-green-900:#003f2a;--cck-doc-see-green-950:#002b1d;--cck-doc-black-50:#00060f;--cck-doc-black-100:#0f1116;--cck-doc-black-200:#15171e;--cck-doc-black-300:#191b23;--cck-doc-black-400:#222835;--cck-doc-black-500:#494f60;--cck-doc-white-50:#fff;--cck-doc-white-100:#f5f5f5;--cck-doc-white-200:#ececef;--cck-doc-white-300:#e3e3e8;--cck-doc-white-400:#d1d5e1;--cck-doc-white-500:#c1c7d7;--cck-doc-white-alpha-0:#ffffff05;--cck-doc-white-alpha-1:#ffffff0a;--cck-doc-white-alpha-2:#ffffff0f;--cck-doc-white-alpha-3:#ffffff14;--cck-doc-white-alpha-4:#ffffff1a;--cck-doc-white-alpha-5:#ffffff33;--cck-doc-white-alpha-6:#ffffff66;--cck-doc-white-alpha-7:#ffffff99;--cck-doc-white-alpha-8:#ffffffcc;--cck-doc-white-alpha-9:#ffffffe5;--cck-doc-white-alpha-10:#fff;--cck-doc-black-alpha-0:#000c1d05;--cck-doc-black-alpha-1:#000c1d0a;--cck-doc-black-alpha-2:#000c1d0f;--cck-doc-black-alpha-3:#000c1d14;--cck-doc-black-alpha-4:#000c1d1a;--cck-doc-black-alpha-5:#000c1d33;--cck-doc-black-alpha-6:#000c1d66;--cck-doc-black-alpha-7:#000c1d99;--cck-doc-black-alpha-8:#000c1dcc;--cck-doc-black-alpha-9:#000c1de5;--cck-doc-black-alpha-10:#000c1d}.cck-theme-storybook-addon--remove-toolbar main .sb-bar{display:none}#root>div:first-child>div:nth-child(2){border:1px solid var(--cck-doc-color-border-2)}#root>div:first-child>div:nth-child(2)>div:first-child,#root>div:first-child>div:nth-child(3)>.sb-bar{display:none}.sidebar-container>div:first-child>div:first-of-type>div:first-child>div:first-child{padding:12px 24px}.sidebar-header>div:first-of-type>a:first-child>img{max-width:180px!important;width:180px}.sidebar-header>div:first-of-type{margin-right:0}.sidebar-header>div:nth-child(3){display:none}.search-field{background-color:var(--cck-doc-color-bg-2);border:1px solid var(--cck-doc-color-border-1);gap:8px;height:36px!important;padding:4px!important}.search-field+div{display:none}.search-field>div:first-child{color:var(--cck-doc-color-font-2);flex:none;margin-left:4px}.search-field>input:nth-child(2)::-moz-placeholder{color:var(--cck-doc-color-font-4)}.search-field>input:nth-child(2)::placeholder{color:var(--cck-doc-color-font-4)}.search-field>code:nth-child(3){display:none}.sidebar-subheading{margin-top:0!important}.sidebar-item+.sidebar-subheading{margin-top:24px!important}.sidebar-subheading>button:first-of-type{height:auto;padding:0;width:100%}.sidebar-subheading>button:first-of-type:hover{background-color:unset}.sidebar-subheading>button:first-of-type>div:first-child{display:none}.sidebar-subheading>button:nth-of-type(2){display:none!important}.sidebar-item:hover,.sidebar-item[data-selected=true]{background-color:unset!important}.sidebar-item>button:first-of-type{padding:0}.sidebar-item>button:first-of-type>div:first-of-type{display:none}.sidebar-item>a:first-of-type{padding:0}.sidebar-item>a:first-of-type>div:first-of-type,.sidebar-item>a:nth-of-type(2){display:none}.sbdocs.sbdocs-wrapper{background:transparent;padding:0}.sbdocs.sbdocs-content{max-width:unset}h1{font:var(--cck-doc-display-sm-semibold);margin:0 0 28px}h1,h2{color:var(--cck-doc-color-font-1)}h2{font:var(--cck-doc-text-xl-medium);margin:36px 0 24px}h3{font:var(--cck-doc-text-lg-medium)}h3,h4{color:var(--cck-doc-color-font-1);margin:12px 0}h4{font:var(--cck-doc-text-md-medium)}h5{font:var(--cck-doc-text-sm-medium)}h5,h6{color:var(--cck-doc-color-font-1);margin:12px 0}h6{font:var(--cck-doc-text-xs-medium)}p{margin:0 0 16px}ol,p,ul{color:var(--cck-doc-color-font-2);font:var(--cck-doc-text-sm-regular)}ol,ul{margin-top:12px}li{margin:0 0 16px}pre{margin:28px 0}strong{font-weight:600}hr{background-color:var(--cck-doc-color-border-1);border:none;height:1px;margin:48px 0}.cck-theme-storybook-addon code,code{background-color:var(--cck-doc-color-bg-3);border:1px solid var(--cck-doc-color-border-1);border-radius:4px;color:inherit;display:inline-block;font:inherit;margin:0 2px;padding:0 6px}.cck-theme-storybook-addon a,a{color:var(--cck-doc-color-brand-default);font:inherit}.arg-type-table-wrapper{overflow-x:auto;width:100%}.arg-type-table{align-self:flex-start;border:1px solid var(--cck-doc-color-border-1);border-radius:var(--cck-doc-radius-sm);border-spacing:0;margin-bottom:48px}.arg-type-table--gap-8{display:flex;flex-wrap:wrap;gap:8px}.arg-type-table--no-wrap{white-space:nowrap}.arg-type-table.arg-type-table--full-width{min-width:100%}.arg-type-table .description-column{min-width:300px}.arg-type-table p{color:inherit;font:inherit;margin-bottom:0}.arg-type-table tr{color:var(--cck-doc-color-font-1);font:var(--cck-doc-text-sm-medium);padding:12px 24px}.arg-type-table tr:hover{background-color:var(--cck-doc-color-bg-3)}.arg-type-table td{border-top:1px solid var(--cck-doc-color-border-1);color:var(--cck-doc-color-font-3);font:var(--cck-doc-text-sm-regular);padding:12px 24px}.arg-type-table td:first-child{color:var(--cck-doc-color-font-1);font:var(--cck-doc-text-sm-medium);white-space:nowrap}.arg-type-table td code{color:var(--cck-doc-color-font-2);font:var(--cck-doc-text-sm-regular);padding:0 6px;white-space:nowrap}.arg-type-table td code.wrap{white-space:normal}.arg-type-table th{color:var(--cck-doc-color-font-1);font:var(--cck-doc-text-sm-medium);padding:12px 24px;text-align:left}.collection-modes-selector-table{align-self:flex-start;border:1px solid var(--cck-doc-color-border-2);border-radius:6px;border-spacing:0;min-width:100%}.collection-modes-selector-table p{color:inherit;font:inherit;margin-bottom:0}.collection-modes-selector-table tr{color:var(--cck-doc-color-font-1);font:var(--cck-doc-text-sm-medium);padding:12px 24px}.collection-modes-selector-table td{border-top:1px solid var(--cck-doc-color-border-2);color:var(--cck-doc-color-font-3);font:var(--cck-doc-text-sm-regular);padding:8px 24px}.collection-modes-selector-table td.collection-modes-selector-table__header-cell{border-right:1px solid var(--cck-doc-color-border-2);color:var(--cck-doc-color-font-1);font:var(--cck-doc-text-sm-medium);white-space:nowrap}.collection-modes-selector-table td code{font:var(--cck-doc-text-xs-regular);padding:0 6px;white-space:break-spaces}.collection-modes-selector-table td ul{padding:0 16px}.collection-modes-selector-table td li+li{margin-bottom:0}.collection-modes-selector-table th{color:var(--cck-doc-color-font-1);font:var(--cck-doc-text-sm-medium);padding:12px 24px;text-align:left;white-space:nowrap}.story-decorator-wrapper{align-items:center;display:flex;flex-wrap:wrap;gap:24px;justify-content:center}.story-decorator-wrapper__row{flex-direction:row}.story-decorator-wrapper__column{flex-direction:column}.story-decorator-wrapper__inside-box{background-color:var(--cck-doc-color-bg-1);border:1px solid var(--cck-doc-color-border-2);border-radius:var(--cck-doc-radius-md);padding:12px 24px}.theme-addon-mdx-page table{margin-bottom:24px}.cck-theme-storybook-addon__color--light .theme-addon-mdx-page{--cck-doc-theme-addon-prismjs-green-1:green;--cck-doc-theme-addon-prismjs-red-1:#a31515;--cck-doc-theme-addon-prismjs-red-2:#9a050f;--cck-doc-theme-addon-prismjs-red-3:maroon;--cck-doc-theme-addon-prismjs-red-4:red;--cck-doc-theme-addon-prismjs-gray-1:#393a34;--cck-doc-theme-addon-prismjs-cyan-1:#36acaa;--cck-doc-theme-addon-prismjs-cyan-2:#2b91af;--cck-doc-theme-addon-prismjs-blue-1:#00f;--cck-doc-theme-addon-prismjs-blue-2:#00009f;--cck-doc-theme-addon-prismjs-unset:#2e3438}.cck-theme-storybook-addon__color--dark .theme-addon-mdx-page{--cck-doc-theme-addon-prismjs-green-1:#7c7c7c;--cck-doc-theme-addon-prismjs-red-1:#92c379;--cck-doc-theme-addon-prismjs-red-2:#9a050f;--cck-doc-theme-addon-prismjs-red-3:#a8ff60;--cck-doc-theme-addon-prismjs-red-4:#96cbfe;--cck-doc-theme-addon-prismjs-gray-1:#ededed;--cck-doc-theme-addon-prismjs-cyan-1:#c6c5fe;--cck-doc-theme-addon-prismjs-cyan-2:#ffffb6;--cck-doc-theme-addon-prismjs-blue-1:#b474dd;--cck-doc-theme-addon-prismjs-blue-2:#00009f;--cck-doc-theme-addon-prismjs-unset:#babed8}.theme-addon-mdx-page pre{margin:0}.theme-addon-mdx-page pre .docblock-source{background-color:var(--cck-doc-color-bg-3);border:1px solid var(--cck-doc-color-border-1);border-radius:var(--cck-doc-radius-md);box-shadow:none;color:var(--color-storybook-source-unset);margin:0 0 24px}.theme-addon-mdx-page pre .docblock-source>div:nth-child(2){display:none}.theme-addon-mdx-page pre.prismjs{color:var(--cck-doc-color-font-1);padding:12px}.theme-addon-mdx-page pre .token.string{color:var(--cck-doc-theme-addon-prismjs-red-1)}.theme-addon-mdx-page pre .token.deleted{color:var(--cck-doc-theme-addon-prismjs-red-2)}.theme-addon-mdx-page pre .token.selector,.theme-addon-mdx-page pre .token.tag{color:var(--cck-doc-theme-addon-prismjs-red-3)}.theme-addon-mdx-page pre .token.attr-name,.theme-addon-mdx-page pre .token.entity,.theme-addon-mdx-page pre .token.property,.theme-addon-mdx-page pre .token.regex{color:var(--cck-doc-theme-addon-prismjs-red-4)}.theme-addon-mdx-page pre .token.cdata,.theme-addon-mdx-page pre .token.comment,.theme-addon-mdx-page pre .token.doctype,.theme-addon-mdx-page pre .token.prolog{color:var(--cck-doc-theme-addon-prismjs-green-1)}.theme-addon-mdx-page pre .token.boolean,.theme-addon-mdx-page pre .token.constant,.theme-addon-mdx-page pre .token.inserted,.theme-addon-mdx-page pre .token.number,.theme-addon-mdx-page pre .token.symbol,.theme-addon-mdx-page pre .token.url,.theme-addon-mdx-page pre .token.variable{color:var(--cck-doc-theme-addon-prismjs-cyan-1)}.theme-addon-mdx-page pre .token.class-name{color:var(--cck-doc-theme-addon-prismjs-cyan-2)}.theme-addon-mdx-page pre .token.atrule,.theme-addon-mdx-page pre .token.attr-value,.theme-addon-mdx-page pre .token.keyword{color:var(--cck-doc-theme-addon-prismjs-blue-1)}.theme-addon-mdx-page pre .token.function,.theme-addon-mdx-page pre .token.operator,.theme-addon-mdx-page pre .token.punctuation{color:var(--cck-doc-theme-addon-prismjs-gray-1)}.theme-addon-mdx-page pre .token.cdata,.theme-addon-mdx-page pre .token.comment,.theme-addon-mdx-page pre .token.doctype,.theme-addon-mdx-page pre .token.italic,.theme-addon-mdx-page pre .token.prolog{font-style:italic}.theme-addon-mdx-page pre .token.bold,.theme-addon-mdx-page pre .token.important{font-weight:700}.cck-doc-story__radio-selection-group{display:flex;gap:8px;justify-content:center}.cck-doc-story__radio-selection{align-items:center;border:1px solid var(--cck-doc-color-border-3);border-radius:50%;color:var(--cck-doc-color-font-1);cursor:pointer;display:flex;font:var(--cck-doc-text-sm-light);height:32px;justify-content:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:32px}.cck-doc-story__radio-selection--selected{background-color:var(--cck-doc-color-bg-selected-2)}.cck-doc-story__button--basic{align-items:center;background-color:transparent;border:none;border-radius:var(--cck-doc-radius-sm);box-sizing:border-box;color:var(--cck-doc-color-font-1);cursor:pointer;display:flex;font:var(--cck-doc-text-sm-medium);gap:8px;height:40px;justify-content:center;margin:0;min-width:80px;outline:transparent;padding:0 16px}.cck-doc-story__button--basic:hover{background-color:var(--cck-doc-color-bg-hover-2)}.cck-doc-story__header{width:100%}.doc-cck-button{align-items:center;border:none;border-radius:var(--cck-doc-radius-sm);box-sizing:border-box;cursor:pointer;display:flex;font:var(--cck-doc-text-sm-medium);justify-content:center;margin:0;min-width:80px;outline:transparent}.doc-cck-button__backdrop{display:none}.doc-cck-button__size--sm{gap:8px;height:32px;padding:0 12px 0 8px}.doc-cck-button__size--sm:has(.doc-cck-svg-icon:first-child){padding:0 12px 0 4px}.doc-cck-button__size--md{gap:8px;height:40px;padding:0 12px}.doc-cck-button__size--md:has(.doc-cck-svg-icon:first-child){padding:0 16px 0 8px}.doc-cck-button__basic{background-color:transparent;color:var(--cck-doc-color-font-1)}.doc-cck-button__basic .doc-cck-svg-icon{fill:var(--cck-doc-color-font-1)}.doc-cck-button__basic:hover{background-color:var(--cck-doc-color-bg-hover-2)}.doc-cck-button__light{background-color:var(--cck-doc-color-bg-selected-1);color:var(--cck-doc-color-font-1)}.doc-cck-button__light:hover{background-color:var(--cck-doc-color-bg-hover-3)}.doc-cck-button__light .doc-cck-svg-icon{fill:var(--cck-doc-color-font-1)}.doc-cck-button__outline{background-color:var(--cck-doc-color-bg-1);border:1px solid var(--cck-doc-ocean-green-600);color:var(--cck-doc-ocean-green-600)}.doc-cck-button__outline:hover{background-color:var(--cck-doc-color-bg-hover-2)}.doc-cck-button__outline .doc-cck-svg-icon{fill:var(--cck-doc-ocean-green-600)}body,html{margin:0;padding:0}*{box-sizing:border-box}.doc-cck-form-field{align-items:flex-start;display:flex;flex-direction:column;gap:4px}.doc-cck-form-field .doc-cck-select{flex:1;height:100%;width:100%}.doc-cck-form-field .doc-cck-input{flex:1;width:100%}.doc-cck-form-field--disabled{opacity:.5}.doc-cck-form-field__wrapper{align-items:stretch;display:flex;flex-direction:row;height:40px;width:100%}.doc-cck-form-field__feedback-wrapper{display:flex;flex-direction:column;overflow:hidden}.doc-cck-form-field__feedback-wrapper:empty{display:none}.doc-cck-form-field__input-wrapper{align-items:center;background-color:var(--cck-doc-color-bg-1);border:1px solid var(--cck-doc-color-border-2);border-radius:var(--cck-doc-radius-sm);display:flex;flex:1;flex-direction:row;min-width:0;padding:8px 12px}.doc-cck-form-field__input-wrapper:hover{background-color:var(--cck-doc-color-bg-hover-2)}.doc-cck-form-field--focused .doc-cck-form-field__input-wrapper{background-color:var(--cck-doc-color-bg-1);border:1px solid var(--cck-doc-color-brand-default);box-shadow:inset 0 0 0 1px var(--cck-doc-color-brand-default)}.doc-cck-svg-icon{align-items:center;display:flex;flex-shrink:0;height:24px;justify-content:center;width:24px;fill:var(--cck-doc-color-font-4)}.doc-cck-svg-icon__svg{height:100%;width:100%}.doc-cck-icon-button{align-items:center;background-color:transparent;border:none;border-radius:50%;box-sizing:border-box;color:var(--cck-doc-color-font-3);cursor:pointer;display:flex;font:var(--cck-doc-text-sm-medium);justify-content:center;margin:0;outline:transparent;transition:background-color .15s}.doc-cck-icon-button .doc-cck-svg-icon{fill:currentcolor;transition:color .15s}.doc-cck-icon-button:hover{background-color:var(--cck-doc-color-bg-hover-1);color:var(--cck-doc-color-font-2)}.doc-cck-icon-button__backdrop{display:none}.doc-cck-icon-button__size--sm{height:32px;width:32px}.doc-cck-icon-button__size--md{height:40px;width:40px}.doc-cck-icon-button__outline{border:1px solid var(--cck-doc-color-border-2)}.doc-cck-input{background-color:transparent;border:none;color:var(--cck-doc-color-font-1);font:var(--cck-doc-text-sm-regular);outline:none;text-overflow:ellipsis}.doc-cck-input::-moz-placeholder{color:var(--cck-doc-color-font-4)}.doc-cck-input::placeholder{color:var(--cck-doc-color-font-4)}.doc-cck-option{align-items:center;border-radius:6px;color:var(--cck-doc-color-font-1);cursor:pointer;display:flex;font:var(--cck-doc-text-sm-regular);gap:8px;height:40px;padding:0 12px}.doc-cck-option:hover{background-color:var(--cck-doc-color-bg-hover-1)}.doc-cck-option .doc-cck-checkbox__input-wrapper{height:16px;width:16px}.doc-cck-option .doc-cck-option --single.doc-cck-option --selected{font:var(--cck-doc-text-sm-medium)}.doc-cck-option__content-wrapper{align-items:center;display:flex;flex:1}.doc-cck-option__selected-checkmark .doc-cck-svg-icon{height:20px;width:20px}.doc-cck-radio-button__wrapper{align-items:center;cursor:pointer;display:inline-flex;vertical-align:middle}.doc-cck-radio-button__input-wrapper{align-items:center;box-sizing:content-box;cursor:pointer;display:inline-block;flex:0 0 auto;height:16px;justify-content:center;position:relative;width:16px;will-change:opacity,transform,border-color,color}.doc-cck-radio-button__input{cursor:inherit;height:100%;left:0;margin:0;opacity:0;padding:0;position:absolute;right:0;top:0;width:100%;z-index:1}.doc-cck-radio-button__backdrop{display:none}.doc-cck-radio-button__background{box-sizing:border-box;height:100%;position:relative;width:100%}.doc-cck-radio-button__background--outer-circle{border-color:var(--cck-doc-color-font-1);border-radius:50%;border-style:solid;border-width:1px;box-sizing:border-box;height:100%;left:0;position:absolute;top:0;transition:border-color 90ms cubic-bezier(0,0,.2,1);width:100%}.doc-cck-radio-button__background--inner-circle{border-radius:50%;box-sizing:border-box;height:100%;left:0;position:absolute;top:0;transform:scale(0);transition:transform 90ms cubic-bezier(.4,0,.6,1),background-color 90ms cubic-bezier(.4,0,.6,1);width:100%}.doc-cck-radio-button--checked .doc-cck-radio-button__background--outer-circle{border-color:var(--cck-doc-color-brand-default);border-width:2px}.doc-cck-radio-button--checked .doc-cck-radio-button__background--inner-circle{background-color:var(--cck-doc-color-brand-default);transform:scale(.5);transition:transform 90ms cubic-bezier(0,0,.2,1),border-color 90ms cubic-bezier(0,0,.2,1)}.doc-cck-radio-button--checked .doc-cck-radio-button__label{color:var(--cck-doc-color-brand-default)}.doc-cck-radio-button__label{color:var(--cck-doc-color-font-1);cursor:pointer;font:var(--cck-doc-text-md-regular);margin-left:0;margin-right:auto;order:0;padding-left:8px;padding-right:0;white-space:nowrap}.doc-cck-radio-group{align-items:flex-start;display:flex}.doc-cck-radio-group__row{flex-direction:row;gap:12px}.doc-cck-radio-group__column{flex-direction:column}.doc-cck-select{align-items:center;border-radius:6px;color:var(--cck-doc-color-font-1);cursor:pointer;display:flex;font:var(--cck-doc-text-sm-regular)}.doc-cck-select__placeholder{color:var(--cck-doc-color-font-4)}.doc-cck-select__trigger-wrapper{color:currentcolor;flex:1;overflow:hidden;padding-right:8px;text-align:start}.doc-cck-select__trigger-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.doc-cck-select__overlay .doc-cck-overlay__backdrop{background-color:transparent}.doc-cck-select__dropdown-icon-wrapper .doc-cck-svg-icon{height:24px;width:24px}.doc-cck-select__options-wrapper{background-color:var(--cck-doc-color-bg-1);border:1px solid var(--cck-doc-color-border-2);border-radius:var(--cck-doc-radius-sm);height:inherit;margin-top:6px;max-height:inherit;overflow:auto;padding:4px}.doc-cck-toggle{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.doc-cck-toggle__label{align-items:center;color:var(--cck-doc-color-font-1);cursor:pointer;display:flex;font:var(--cck-doc-text-md-regular);gap:8px;white-space:nowrap}.doc-cck-toggle--label-before .doc-cck-toggle__label{flex-direction:row-reverse}.doc-cck-toggle__input{cursor:pointer;height:100%;margin:0;opacity:0;padding:0;position:relative;width:100%;z-index:3}.doc-cck-toggle__slider-wrapper{height:20px;position:relative;width:32px}.doc-cck-toggle__thumb{background-color:var(--cck-doc-color-bg-1);border-radius:50%;height:16px;position:absolute;transition:all .3s ease;width:16px;z-index:2}.doc-cck-toggle__backdrop{border-radius:500px;height:100%;left:0;position:absolute;top:0;transition:background-color .3s ease;width:100%;z-index:1}.doc-cck-toggle--checked .doc-cck-toggle__thumb{left:100%;top:50%;transform:translate(calc(-100% - 2px),-50%)}.doc-cck-toggle--checked .doc-cck-toggle__backdrop{background-color:var(--cck-doc-color-brand-default)}.doc-cck-toggle--unchecked .doc-cck-toggle__thumb{left:0;top:50%;transform:translate(2px,-50%)}.doc-cck-toggle--unchecked .doc-cck-toggle__backdrop{background-color:var(--cck-doc-color-bg-4)}.doc-cck-overlay__backdrop{background-color:rgba(0,0,0,.5)}.doc-cck-tabs{display:flex;flex-direction:column;gap:12px}.doc-cck-tabs__labels-wrapper{align-items:center;align-self:flex-start;border-radius:var(--cck-doc-radius-sm);display:flex;flex-wrap:wrap;gap:8px;min-height:40px;padding:4px}.doc-cck-tabs__size--fit .doc-cck-tabs__labels-wrapper{width:100%}.doc-cck-tabs__color--default .doc-cck-tabs__labels-wrapper{background-color:var(--cck-doc-color-bg-3)}.doc-cck-tabs__color--h-contrast .doc-cck-tabs__labels-wrapper{background-color:var(--cck-doc-color-bg-4)}.doc-cck-tab{align-items:center;background:transparent;border:none;border-radius:var(--cck-doc-radius-sm);cursor:pointer;display:flex;font:var(--cck-doc-text-sm-medium);height:32px;justify-content:center;outline:none;padding:4px 12px;position:relative}.doc-cck-tabs__size--fit .doc-cck-tab{flex:1;padding:4px 0}.doc-cck-tab__indicator{border-radius:var(--cck-doc-radius-sm);height:100%;left:0;position:absolute;top:0;width:100%}.doc-cck-tab--selected{color:var(--cck-doc-color-font-1)}.doc-cck-tab--unselected{color:var(--cck-doc-color-font-2)}.doc-cck-tab .doc-cck-svg-icon{fill:currentcolor}.doc-cck-tabs__color--default .doc-cck-tab__indicator{background-color:var(--cck-doc-color-bg-1)}.doc-cck-tabs__color--h-contrast .doc-cck-tab__indicator{background-color:var(--cck-doc-color-bg-2)}.doc-cck-tab-label{position:relative;z-index:1} \ No newline at end of file +:where(.cck-theme-storybook-addon__local-style--default),:where([data-cck-theme*=storybook-addon__local-style--default]){--cck-doc-display-2xl-regular:400 72px/90px Inter;--cck-doc-display-2xl-light:300 72px/90px Inter;--cck-doc-display-2xl-medium:500 72px/90px Inter;--cck-doc-display-2xl-semibold:600 72px/90px Inter;--cck-doc-display-2xl-bold:700 72px/90px Inter;--cck-doc-display-xl-light:300 60px/72px Inter;--cck-doc-display-xl-regular:400 60px/72px Inter;--cck-doc-display-xl-medium:500 60px/72px Inter;--cck-doc-display-xl-semibold:600 60px/72px Inter;--cck-doc-display-xl-bold:700 60px/72px Inter;--cck-doc-display-lg-light:300 48px/64px Inter;--cck-doc-display-lg-regular:400 48px/64px Inter;--cck-doc-display-lg-medium:500 48px/64px Inter;--cck-doc-display-lg-semibold:600 48px/64px Inter;--cck-doc-display-lg-bold:700 48px/64px Inter;--cck-doc-display-md-light:300 36px/60px Inter;--cck-doc-display-md-regular:400 36px/60px Inter;--cck-doc-display-md-medium:500 36px/60px Inter;--cck-doc-display-md-semibold:600 36px/60px Inter;--cck-doc-display-md-bold:700 36px/60px Inter;--cck-doc-display-sm-light:300 30px/44px Inter;--cck-doc-display-sm-regular:400 30px/44px Inter;--cck-doc-display-sm-medium:500 30px/44px Inter;--cck-doc-display-sm-semibold:600 30px/44px Inter;--cck-doc-display-sm-bold:700 30px/44px Inter;--cck-doc-display-xs-light:300 24px/38px Inter;--cck-doc-display-xs-regular:400 24px/38px Inter;--cck-doc-display-xs-medium:500 24px/38px Inter;--cck-doc-display-xs-semibold:600 24px/38px Inter;--cck-doc-display-xs-bold:700 24px/38px Inter;--cck-doc-text-xl-light:300 20px/32px Inter;--cck-doc-text-xl-regular:400 20px/32px Inter;--cck-doc-text-xl-medium:500 20px/32px Inter;--cck-doc-text-xl-semibold:600 20px/32px Inter;--cck-doc-text-xl-bold:700 20px/32px Inter;--cck-doc-text-lg-light:300 18px/30px Inter;--cck-doc-text-lg-regular:400 18px/30px Inter;--cck-doc-text-lg-medium:500 18px/30px Inter;--cck-doc-text-lg-semibold:600 18px/30px Inter;--cck-doc-text-lg-bold:700 18px/30px Inter;--cck-doc-text-md-light:300 16px/28px Inter;--cck-doc-text-md-regular:400 16px/28px Inter;--cck-doc-text-md-medium:500 16px/28px Inter;--cck-doc-text-md-semibold:600 16px/28px Inter;--cck-doc-text-md-bold:700 16px/28px Inter;--cck-doc-text-sm-light:300 14px/24px Inter;--cck-doc-text-sm-regular:400 14px/24px Inter;--cck-doc-text-sm-medium:500 14px/24px Inter;--cck-doc-text-sm-semibold:600 14px/24px Inter;--cck-doc-text-sm-bold:700 14px/24px Inter;--cck-doc-text-xs-light:300 12px/20px Inter;--cck-doc-text-xs-regular:400 12px/20px Inter;--cck-doc-text-xs-medium:500 12px/20px Inter;--cck-doc-text-xs-semibold:600 12px/20px Inter;--cck-doc-text-xs-bold:700 12px/20px Inter}:where(.cck-theme-storybook-addon__color--dark),:where([data-cck-theme*=storybook-addon__color--dark]){--cck-doc-color-brand-default:var(--cck-doc-ocean-green-500);--cck-doc-color-bg-0:var(--cck-doc-black-50);--cck-doc-color-bg-1:var(--cck-doc-black-100);--cck-doc-color-bg-2:var(--cck-doc-black-200);--cck-doc-color-bg-3:var(--cck-doc-black-300);--cck-doc-color-bg-4:var(--cck-doc-black-400);--cck-doc-color-bg-5:var(--cck-doc-black-500);--cck-doc-color-bg-alpha-1:var(--cck-doc-black-alpha-1);--cck-doc-color-bg-alpha-2:var(--cck-doc-black-alpha-3);--cck-doc-color-bg-alpha-3:var(--cck-doc-black-alpha-4);--cck-doc-color-bg-alpha-4:var(--cck-doc-black-alpha-5);--cck-doc-color-bg-alpha-5:var(--cck-doc-black-alpha-6);--cck-doc-color-bg-hover-1:var(--cck-doc-color-bg-3);--cck-doc-color-bg-hover-2:var(--cck-doc-color-bg-2);--cck-doc-color-bg-hover-3:var(--cck-doc-ocean-green-900);--cck-doc-color-bg-selected-1:var(--cck-doc-ocean-green-950);--cck-doc-color-bg-selected-2:var(--cck-doc-ocean-green-900);--cck-doc-color-border-1:var(--cck-doc-white-alpha-2);--cck-doc-color-border-2:var(--cck-doc-white-alpha-4);--cck-doc-color-border-3:var(--cck-doc-white-alpha-5);--cck-doc-color-font-1:var(--cck-doc-white-50);--cck-doc-color-font-2:#ccc;--cck-doc-color-font-3:#999;--cck-doc-color-font-4:#666;--cck-doc-color-font-5:#333;--cck-doc-color-font-alpha-1:var(--cck-doc-white-50);--cck-doc-color-font-alpha-2:var(--cck-doc-white-alpha-8);--cck-doc-color-font-alpha-3:var(--cck-doc-white-alpha-7);--cck-doc-color-font-alpha-4:var(--cck-doc-white-alpha-6);--cck-doc-color-font-alpha-5:var(--cck-doc-white-alpha-5);--cck-doc-color-main-effect-primary-start:#1bbf82cc;--cck-doc-color-main-effect-primary-end:#1bbf8299;--cck-doc-color-main-effect-surface-start:#0f111600;--cck-doc-color-main-effect-surface-end:#0f1116;--cck-doc-color-main-effect-box-start:#ffffff14;--cck-doc-color-main-effect-box-end:#ffffff00}:where(.cck-theme-storybook-addon__color--light),:where([data-cck-theme*=storybook-addon__color--light]){--cck-doc-color-brand-default:var(--cck-doc-see-green-500);--cck-doc-color-bg-0:var(--cck-doc-white-50);--cck-doc-color-bg-1:var(--cck-doc-white-50);--cck-doc-color-bg-2:var(--cck-doc-white-50);--cck-doc-color-bg-3:var(--cck-doc-white-100);--cck-doc-color-bg-4:var(--cck-doc-white-300);--cck-doc-color-bg-5:var(--cck-doc-white-400);--cck-doc-color-bg-alpha-1:var(--cck-doc-white-alpha-1);--cck-doc-color-bg-alpha-2:var(--cck-doc-white-alpha-3);--cck-doc-color-bg-alpha-3:var(--cck-doc-white-alpha-4);--cck-doc-color-bg-alpha-4:var(--cck-doc-white-alpha-5);--cck-doc-color-bg-alpha-5:var(--cck-doc-white-alpha-6);--cck-doc-color-bg-hover-1:var(--cck-doc-color-bg-3);--cck-doc-color-bg-hover-2:var(--cck-doc-color-bg-3);--cck-doc-color-bg-hover-3:var(--cck-doc-ocean-green-200);--cck-doc-color-bg-selected-1:var(--cck-doc-ocean-green-100);--cck-doc-color-bg-selected-2:var(--cck-doc-ocean-green-200);--cck-doc-color-border-1:var(--cck-doc-black-alpha-2);--cck-doc-color-border-2:var(--cck-doc-black-alpha-4);--cck-doc-color-border-3:var(--cck-doc-black-alpha-5);--cck-doc-color-font-1:var(--cck-doc-black-50);--cck-doc-color-font-2:#333d4a;--cck-doc-color-font-3:#666d77;--cck-doc-color-font-4:#999ea5;--cck-doc-color-font-5:#ccced2;--cck-doc-color-font-alpha-1:var(--cck-doc-black-50);--cck-doc-color-font-alpha-2:var(--cck-doc-black-alpha-8);--cck-doc-color-font-alpha-3:var(--cck-doc-black-alpha-7);--cck-doc-color-font-alpha-4:var(--cck-doc-black-alpha-6);--cck-doc-color-font-alpha-5:var(--cck-doc-black-alpha-5);--cck-doc-color-main-effect-primary-start:#008d5ecc;--cck-doc-color-main-effect-primary-end:#008d5e99;--cck-doc-color-main-effect-surface-start:#ffffff00;--cck-doc-color-main-effect-surface-end:#fff;--cck-doc-color-main-effect-box-start:#0f111614;--cck-doc-color-main-effect-box-end:#0f111600}:where(.cck-theme-storybook-addon__size--default),:where([data-cck-theme*=storybook-addon__size--default]){--cck-doc-radius-xs:2px;--cck-doc-radius-sm:4px;--cck-doc-radius-md:8px;--cck-doc-radius-lg:12px;--cck-doc-radius-xl:16px}:where(.cck-theme-storybook-addon__color-palette--default),:where([data-cck-theme*=storybook-addon__color-palette--default]){--cck-doc-ocean-green-50:#f0fdf7;--cck-doc-ocean-green-100:#d4fcec;--cck-doc-ocean-green-200:#aaf7da;--cck-doc-ocean-green-300:#72edc0;--cck-doc-ocean-green-400:#3cd9a0;--cck-doc-ocean-green-500:#1bbf82;--cck-doc-ocean-green-600:#129c69;--cck-doc-ocean-green-700:#127b56;--cck-doc-ocean-green-800:#146247;--cck-doc-ocean-green-900:#14513c;--cck-doc-ocean-green-950:#012c1e;--cck-doc-see-green-50:#effffa;--cck-doc-see-green-100:#a1ffe0;--cck-doc-see-green-200:#52ffc5;--cck-doc-see-green-300:#00ef9f;--cck-doc-see-green-400:#00b478;--cck-doc-see-green-500:#008d5e;--cck-doc-see-green-600:#007951;--cck-doc-see-green-700:#064;--cck-doc-see-green-800:#005237;--cck-doc-see-green-900:#003f2a;--cck-doc-see-green-950:#002b1d;--cck-doc-black-50:#00060f;--cck-doc-black-100:#0f1116;--cck-doc-black-200:#15171e;--cck-doc-black-300:#191b23;--cck-doc-black-400:#222835;--cck-doc-black-500:#494f60;--cck-doc-white-50:#fff;--cck-doc-white-100:#f5f5f5;--cck-doc-white-200:#ececef;--cck-doc-white-300:#e3e3e8;--cck-doc-white-400:#d1d5e1;--cck-doc-white-500:#c1c7d7;--cck-doc-white-alpha-0:#ffffff05;--cck-doc-white-alpha-1:#ffffff0a;--cck-doc-white-alpha-2:#ffffff0f;--cck-doc-white-alpha-3:#ffffff14;--cck-doc-white-alpha-4:#ffffff1a;--cck-doc-white-alpha-5:#ffffff33;--cck-doc-white-alpha-6:#ffffff66;--cck-doc-white-alpha-7:#ffffff99;--cck-doc-white-alpha-8:#ffffffcc;--cck-doc-white-alpha-9:#ffffffe5;--cck-doc-white-alpha-10:#fff;--cck-doc-black-alpha-0:#000c1d05;--cck-doc-black-alpha-1:#000c1d0a;--cck-doc-black-alpha-2:#000c1d0f;--cck-doc-black-alpha-3:#000c1d14;--cck-doc-black-alpha-4:#000c1d1a;--cck-doc-black-alpha-5:#000c1d33;--cck-doc-black-alpha-6:#000c1d66;--cck-doc-black-alpha-7:#000c1d99;--cck-doc-black-alpha-8:#000c1dcc;--cck-doc-black-alpha-9:#000c1de5;--cck-doc-black-alpha-10:#000c1d}.cck-theme-storybook-addon--remove-toolbar main .sb-bar{display:none}#root>div:first-child>div:nth-child(2){border:1px solid var(--cck-doc-color-border-2)}#root>div:first-child>div:nth-child(2)>div:first-child,#root>div:first-child>div:nth-child(3)>.sb-bar{display:none}.sidebar-container>div:first-child>div:first-of-type>div:first-child>div:first-child{padding:12px 24px}.sidebar-header>div:first-of-type>a:first-child>img{max-width:180px!important;width:180px}.sidebar-header>div:first-of-type{margin-right:0}.sidebar-header>div:nth-child(3){display:none}.search-field{background-color:var(--cck-doc-color-bg-2);border:1px solid var(--cck-doc-color-border-1);gap:8px;height:36px!important;padding:4px!important}.search-field+div{display:none}.search-field>div:first-child{color:var(--cck-doc-color-font-2);flex:none;margin-left:4px}.search-field>input:nth-child(2)::-moz-placeholder{color:var(--cck-doc-color-font-4)}.search-field>input:nth-child(2)::placeholder{color:var(--cck-doc-color-font-4)}.search-field>code:nth-child(3){display:none}.sidebar-subheading{margin-top:0!important}.sidebar-item+.sidebar-subheading{margin-top:24px!important}.sidebar-subheading>button:first-of-type{height:auto;padding:0;width:100%}.sidebar-subheading>button:first-of-type:hover{background-color:unset}.sidebar-subheading>button:first-of-type>div:first-child{display:none}.sidebar-subheading>button:nth-of-type(2){display:none!important}.sidebar-item:hover,.sidebar-item[data-selected=true]{background-color:unset!important}.sidebar-item>button:first-of-type{padding:0}.sidebar-item>button:first-of-type>div:first-of-type{display:none}.sidebar-item>a:first-of-type{padding:0}.sidebar-item>a:first-of-type>div:first-of-type,.sidebar-item>a:nth-of-type(2){display:none}.sbdocs.sbdocs-wrapper{background:transparent;padding:0}.sbdocs.sbdocs-content{max-width:unset}h1{font:var(--cck-doc-display-sm-semibold);margin:0 0 28px}h1,h2{color:var(--cck-doc-color-font-1)}h2{font:var(--cck-doc-text-xl-medium);margin:36px 0 24px}h3{font:var(--cck-doc-text-lg-medium)}h3,h4{color:var(--cck-doc-color-font-1);margin:12px 0}h4{font:var(--cck-doc-text-md-medium)}h5{font:var(--cck-doc-text-sm-medium)}h5,h6{color:var(--cck-doc-color-font-1);margin:12px 0}h6{font:var(--cck-doc-text-xs-medium)}p{margin:0 0 16px}ol,p,ul{color:var(--cck-doc-color-font-2);font:var(--cck-doc-text-sm-regular)}ol,ul{margin-top:12px}li{margin:0 0 16px}pre{margin:28px 0}strong{font-weight:600}hr{background-color:var(--cck-doc-color-border-1);border:none;height:1px;margin:48px 0}.cck-theme-storybook-addon code,code{background-color:var(--cck-doc-color-bg-3);border:1px solid var(--cck-doc-color-border-1);border-radius:4px;color:inherit;display:inline-block;font:inherit;margin:0 2px;padding:0 6px}.cck-theme-storybook-addon a,a{color:var(--cck-doc-color-brand-default);font:inherit}.arg-type-table-wrapper{overflow-x:auto;width:100%}.arg-type-table{align-self:flex-start;border:1px solid var(--cck-doc-color-border-1);border-radius:var(--cck-doc-radius-sm);border-spacing:0;margin-bottom:48px}.arg-type-table--gap-8{display:flex;flex-wrap:wrap;gap:8px}.arg-type-table--no-wrap{white-space:nowrap}.arg-type-table.arg-type-table--full-width{min-width:100%}.arg-type-table .description-column{min-width:300px}.arg-type-table p{color:inherit;font:inherit;margin-bottom:0}.arg-type-table tr{color:var(--cck-doc-color-font-1);font:var(--cck-doc-text-sm-medium);padding:12px 24px}.arg-type-table tr:hover{background-color:var(--cck-doc-color-bg-3)}.arg-type-table td{border-top:1px solid var(--cck-doc-color-border-1);color:var(--cck-doc-color-font-3);font:var(--cck-doc-text-sm-regular);padding:12px 24px}.arg-type-table td:first-child{color:var(--cck-doc-color-font-1);font:var(--cck-doc-text-sm-medium);white-space:nowrap}.arg-type-table td code{color:var(--cck-doc-color-font-2);font:var(--cck-doc-text-sm-regular);padding:0 6px;white-space:nowrap}.arg-type-table td code.wrap{white-space:normal}.arg-type-table th{color:var(--cck-doc-color-font-1);font:var(--cck-doc-text-sm-medium);padding:12px 24px;text-align:left}.collection-modes-selector-table{align-self:flex-start;border:1px solid var(--cck-doc-color-border-2);border-radius:6px;border-spacing:0;min-width:100%}.collection-modes-selector-table p{color:inherit;font:inherit;margin-bottom:0}.collection-modes-selector-table tr{color:var(--cck-doc-color-font-1);font:var(--cck-doc-text-sm-medium);padding:12px 24px}.collection-modes-selector-table td{border-top:1px solid var(--cck-doc-color-border-2);color:var(--cck-doc-color-font-3);font:var(--cck-doc-text-sm-regular);padding:8px 24px}.collection-modes-selector-table td.collection-modes-selector-table__header-cell{border-right:1px solid var(--cck-doc-color-border-2);color:var(--cck-doc-color-font-1);font:var(--cck-doc-text-sm-medium);white-space:nowrap}.collection-modes-selector-table td code{font:var(--cck-doc-text-xs-regular);padding:0 6px;white-space:break-spaces}.collection-modes-selector-table td ul{padding:0 16px}.collection-modes-selector-table td li+li{margin-bottom:0}.collection-modes-selector-table th{color:var(--cck-doc-color-font-1);font:var(--cck-doc-text-sm-medium);padding:12px 24px;text-align:left;white-space:nowrap}.story-decorator-wrapper{align-items:center;display:flex;flex-wrap:wrap;gap:24px;justify-content:center}.story-decorator-wrapper__row{flex-direction:row}.story-decorator-wrapper__column{flex-direction:column}.story-decorator-wrapper__inside-box{background-color:var(--cck-doc-color-bg-1);border:1px solid var(--cck-doc-color-border-2);border-radius:var(--cck-doc-radius-md);padding:12px 24px}.theme-addon-mdx-page table{margin-bottom:24px}.cck-theme-storybook-addon__color--light .theme-addon-mdx-page{--cck-doc-theme-addon-prismjs-green-1:green;--cck-doc-theme-addon-prismjs-red-1:#a31515;--cck-doc-theme-addon-prismjs-red-2:#9a050f;--cck-doc-theme-addon-prismjs-red-3:maroon;--cck-doc-theme-addon-prismjs-red-4:red;--cck-doc-theme-addon-prismjs-gray-1:#393a34;--cck-doc-theme-addon-prismjs-cyan-1:#36acaa;--cck-doc-theme-addon-prismjs-cyan-2:#2b91af;--cck-doc-theme-addon-prismjs-blue-1:#00f;--cck-doc-theme-addon-prismjs-blue-2:#00009f;--cck-doc-theme-addon-prismjs-unset:#2e3438}.cck-theme-storybook-addon__color--dark .theme-addon-mdx-page{--cck-doc-theme-addon-prismjs-green-1:#7c7c7c;--cck-doc-theme-addon-prismjs-red-1:#92c379;--cck-doc-theme-addon-prismjs-red-2:#9a050f;--cck-doc-theme-addon-prismjs-red-3:#a8ff60;--cck-doc-theme-addon-prismjs-red-4:#96cbfe;--cck-doc-theme-addon-prismjs-gray-1:#ededed;--cck-doc-theme-addon-prismjs-cyan-1:#c6c5fe;--cck-doc-theme-addon-prismjs-cyan-2:#ffffb6;--cck-doc-theme-addon-prismjs-blue-1:#b474dd;--cck-doc-theme-addon-prismjs-blue-2:#00009f;--cck-doc-theme-addon-prismjs-unset:#babed8}.theme-addon-mdx-page pre{margin:0}.theme-addon-mdx-page pre .docblock-source{background-color:var(--cck-doc-color-bg-3);border:1px solid var(--cck-doc-color-border-1);border-radius:var(--cck-doc-radius-md);box-shadow:none;color:var(--color-storybook-source-unset);margin:0 0 24px}.theme-addon-mdx-page pre .docblock-source>div:nth-child(2){display:none}.theme-addon-mdx-page pre.prismjs{color:var(--cck-doc-color-font-1);padding:12px}.theme-addon-mdx-page pre .token.string{color:var(--cck-doc-theme-addon-prismjs-red-1)}.theme-addon-mdx-page pre .token.deleted{color:var(--cck-doc-theme-addon-prismjs-red-2)}.theme-addon-mdx-page pre .token.selector,.theme-addon-mdx-page pre .token.tag{color:var(--cck-doc-theme-addon-prismjs-red-3)}.theme-addon-mdx-page pre .token.attr-name,.theme-addon-mdx-page pre .token.entity,.theme-addon-mdx-page pre .token.property,.theme-addon-mdx-page pre .token.regex{color:var(--cck-doc-theme-addon-prismjs-red-4)}.theme-addon-mdx-page pre .token.cdata,.theme-addon-mdx-page pre .token.comment,.theme-addon-mdx-page pre .token.doctype,.theme-addon-mdx-page pre .token.prolog{color:var(--cck-doc-theme-addon-prismjs-green-1)}.theme-addon-mdx-page pre .token.boolean,.theme-addon-mdx-page pre .token.constant,.theme-addon-mdx-page pre .token.inserted,.theme-addon-mdx-page pre .token.number,.theme-addon-mdx-page pre .token.symbol,.theme-addon-mdx-page pre .token.url,.theme-addon-mdx-page pre .token.variable{color:var(--cck-doc-theme-addon-prismjs-cyan-1)}.theme-addon-mdx-page pre .token.class-name{color:var(--cck-doc-theme-addon-prismjs-cyan-2)}.theme-addon-mdx-page pre .token.atrule,.theme-addon-mdx-page pre .token.attr-value,.theme-addon-mdx-page pre .token.keyword{color:var(--cck-doc-theme-addon-prismjs-blue-1)}.theme-addon-mdx-page pre .token.function,.theme-addon-mdx-page pre .token.operator,.theme-addon-mdx-page pre .token.punctuation{color:var(--cck-doc-theme-addon-prismjs-gray-1)}.theme-addon-mdx-page pre .token.cdata,.theme-addon-mdx-page pre .token.comment,.theme-addon-mdx-page pre .token.doctype,.theme-addon-mdx-page pre .token.italic,.theme-addon-mdx-page pre .token.prolog{font-style:italic}.theme-addon-mdx-page pre .token.bold,.theme-addon-mdx-page pre .token.important{font-weight:700}.cck-doc-story__radio-selection-group{display:flex;gap:8px;justify-content:center}.cck-doc-story__radio-selection{align-items:center;border:1px solid var(--cck-doc-color-border-3);border-radius:50%;color:var(--cck-doc-color-font-1);cursor:pointer;display:flex;font:var(--cck-doc-text-sm-light);height:32px;justify-content:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:32px}.cck-doc-story__radio-selection--selected{background-color:var(--cck-doc-color-bg-selected-2)}.cck-doc-story__button--basic{align-items:center;background-color:transparent;border:none;border-radius:var(--cck-doc-radius-sm);box-sizing:border-box;color:var(--cck-doc-color-font-1);cursor:pointer;display:flex;font:var(--cck-doc-text-sm-medium);gap:8px;height:40px;justify-content:center;margin:0;min-width:80px;outline:transparent;padding:0 16px}.cck-doc-story__button--basic:hover{background-color:var(--cck-doc-color-bg-hover-2)}.cck-doc-story__header{width:100%}.doc-cck-button{align-items:center;border:none;border-radius:var(--cck-doc-radius-sm);box-sizing:border-box;cursor:pointer;display:flex;font:var(--cck-doc-text-sm-medium);justify-content:center;margin:0;min-width:80px;outline:transparent}.doc-cck-button__backdrop{display:none}.doc-cck-button__size--sm{gap:8px;height:32px;padding:0 12px 0 8px}.doc-cck-button__size--sm:has(.doc-cck-svg-icon:first-child){padding:0 12px 0 4px}.doc-cck-button__size--md{gap:8px;height:40px;padding:0 12px}.doc-cck-button__size--md:has(.doc-cck-svg-icon:first-child){padding:0 16px 0 8px}.doc-cck-button__basic{background-color:transparent;color:var(--cck-doc-color-font-1)}.doc-cck-button__basic .doc-cck-svg-icon{fill:var(--cck-doc-color-font-1)}.doc-cck-button__basic:hover{background-color:var(--cck-doc-color-bg-hover-2)}.doc-cck-button__light{background-color:var(--cck-doc-color-bg-selected-1);color:var(--cck-doc-color-font-1)}.doc-cck-button__light:hover{background-color:var(--cck-doc-color-bg-hover-3)}.doc-cck-button__light .doc-cck-svg-icon{fill:var(--cck-doc-color-font-1)}.doc-cck-button__outline{background-color:var(--cck-doc-color-bg-1);border:1px solid var(--cck-doc-ocean-green-600);color:var(--cck-doc-ocean-green-600)}.doc-cck-button__outline:hover{background-color:var(--cck-doc-color-bg-hover-2)}.doc-cck-button__outline .doc-cck-svg-icon{fill:var(--cck-doc-ocean-green-600)}body,html{margin:0;padding:0}*{box-sizing:border-box}.doc-cck-form-field{align-items:flex-start;display:flex;flex-direction:column;gap:4px}.doc-cck-form-field .doc-cck-select{flex:1;height:100%;width:100%}.doc-cck-form-field .doc-cck-input{flex:1;width:100%}.doc-cck-form-field--disabled{opacity:.5}.doc-cck-form-field__wrapper{align-items:stretch;display:flex;flex-direction:row;height:40px;width:100%}.doc-cck-form-field__feedback-wrapper{display:flex;flex-direction:column;overflow:hidden}.doc-cck-form-field__feedback-wrapper:empty{display:none}.doc-cck-form-field__input-wrapper{align-items:center;background-color:var(--cck-doc-color-bg-1);border:1px solid var(--cck-doc-color-border-2);border-radius:var(--cck-doc-radius-sm);display:flex;flex:1;flex-direction:row;min-width:0;padding:8px 12px}.doc-cck-form-field__input-wrapper:hover{background-color:var(--cck-doc-color-bg-hover-2)}.doc-cck-form-field--focused .doc-cck-form-field__input-wrapper{background-color:var(--cck-doc-color-bg-1);border:1px solid var(--cck-doc-color-brand-default);box-shadow:inset 0 0 0 1px var(--cck-doc-color-brand-default)}.doc-cck-svg-icon{align-items:center;display:flex;flex-shrink:0;height:24px;justify-content:center;width:24px;fill:var(--cck-doc-color-font-4)}.doc-cck-svg-icon__svg{height:100%;width:100%}.doc-cck-icon-button{align-items:center;background-color:transparent;border:none;border-radius:50%;box-sizing:border-box;color:var(--cck-doc-color-font-3);cursor:pointer;display:flex;font:var(--cck-doc-text-sm-medium);justify-content:center;margin:0;outline:transparent;transition:background-color .15s}.doc-cck-icon-button .doc-cck-svg-icon{fill:currentcolor;transition:color .15s}.doc-cck-icon-button:hover{background-color:var(--cck-doc-color-bg-hover-1);color:var(--cck-doc-color-font-2)}.doc-cck-icon-button__backdrop{display:none}.doc-cck-icon-button__size--sm{height:32px;width:32px}.doc-cck-icon-button__size--md{height:40px;width:40px}.doc-cck-icon-button__outline{border:1px solid var(--cck-doc-color-border-2)}.doc-cck-input{background-color:transparent;border:none;color:var(--cck-doc-color-font-1);font:var(--cck-doc-text-sm-regular);outline:none;text-overflow:ellipsis}.doc-cck-input::-moz-placeholder{color:var(--cck-doc-color-font-4)}.doc-cck-input::placeholder{color:var(--cck-doc-color-font-4)}.doc-cck-option{align-items:center;border-radius:6px;color:var(--cck-doc-color-font-1);cursor:pointer;display:flex;font:var(--cck-doc-text-sm-regular);gap:8px;height:40px;padding:0 12px}.doc-cck-option:hover{background-color:var(--cck-doc-color-bg-hover-1)}.doc-cck-option .doc-cck-checkbox__input-wrapper{height:16px;width:16px}.doc-cck-option .doc-cck-option --single.doc-cck-option --selected{font:var(--cck-doc-text-sm-medium)}.doc-cck-option__content-wrapper{align-items:center;display:flex;flex:1}.doc-cck-option__selected-checkmark .doc-cck-svg-icon{height:20px;width:20px}.doc-cck-radio-button__wrapper{align-items:center;cursor:pointer;display:inline-flex;vertical-align:middle}.doc-cck-radio-button__input-wrapper{align-items:center;box-sizing:content-box;cursor:pointer;display:inline-block;flex:0 0 auto;height:16px;justify-content:center;position:relative;width:16px;will-change:opacity,transform,border-color,color}.doc-cck-radio-button__input{cursor:inherit;height:100%;left:0;margin:0;opacity:0;padding:0;position:absolute;right:0;top:0;width:100%;z-index:1}.doc-cck-radio-button__backdrop{display:none}.doc-cck-radio-button__background{box-sizing:border-box;height:100%;position:relative;width:100%}.doc-cck-radio-button__background--outer-circle{border-color:var(--cck-doc-color-font-1);border-radius:50%;border-style:solid;border-width:1px;box-sizing:border-box;height:100%;left:0;position:absolute;top:0;transition:border-color 90ms cubic-bezier(0,0,.2,1);width:100%}.doc-cck-radio-button__background--inner-circle{border-radius:50%;box-sizing:border-box;height:100%;left:0;position:absolute;top:0;transform:scale(0);transition:transform 90ms cubic-bezier(.4,0,.6,1),background-color 90ms cubic-bezier(.4,0,.6,1);width:100%}.doc-cck-radio-button--checked .doc-cck-radio-button__background--outer-circle{border-color:var(--cck-doc-color-brand-default);border-width:2px}.doc-cck-radio-button--checked .doc-cck-radio-button__background--inner-circle{background-color:var(--cck-doc-color-brand-default);transform:scale(.5);transition:transform 90ms cubic-bezier(0,0,.2,1),border-color 90ms cubic-bezier(0,0,.2,1)}.doc-cck-radio-button--checked .doc-cck-radio-button__label{color:var(--cck-doc-color-brand-default)}.doc-cck-radio-button__label{color:var(--cck-doc-color-font-1);cursor:pointer;font:var(--cck-doc-text-md-regular);margin-left:0;margin-right:auto;order:0;padding-left:8px;padding-right:0;white-space:nowrap}.doc-cck-radio-group{align-items:flex-start;display:flex}.doc-cck-radio-group__row{flex-direction:row;gap:12px}.doc-cck-radio-group__column{flex-direction:column}.doc-cck-select{align-items:center;border-radius:6px;color:var(--cck-doc-color-font-1);cursor:pointer;display:flex;font:var(--cck-doc-text-sm-regular)}.doc-cck-select__placeholder{color:var(--cck-doc-color-font-4)}.doc-cck-select__trigger-wrapper{color:currentcolor;flex:1;overflow:hidden;padding-right:8px;text-align:start}.doc-cck-select__trigger-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.doc-cck-select__overlay .doc-cck-overlay__backdrop{background-color:transparent}.doc-cck-select__dropdown-icon-wrapper .doc-cck-svg-icon{height:24px;width:24px}.doc-cck-select__options-wrapper{background-color:var(--cck-doc-color-bg-1);border:1px solid var(--cck-doc-color-border-2);border-radius:var(--cck-doc-radius-sm);height:inherit;margin-top:6px;max-height:inherit;overflow:auto;padding:4px}.doc-cck-toggle{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.doc-cck-toggle__label{align-items:center;color:var(--cck-doc-color-font-1);cursor:pointer;display:flex;font:var(--cck-doc-text-md-regular);gap:8px;white-space:nowrap}.doc-cck-toggle--label-before .doc-cck-toggle__label{flex-direction:row-reverse}.doc-cck-toggle__input{cursor:pointer;height:100%;margin:0;opacity:0;padding:0;position:relative;width:100%;z-index:3}.doc-cck-toggle__slider-wrapper{height:20px;position:relative;width:32px}.doc-cck-toggle__thumb{background-color:var(--cck-doc-color-bg-1);border-radius:50%;height:16px;position:absolute;transition:all .3s ease;width:16px;z-index:2}.doc-cck-toggle__backdrop{border-radius:500px;height:100%;left:0;position:absolute;top:0;transition:background-color .3s ease;width:100%;z-index:1}.doc-cck-toggle--checked .doc-cck-toggle__thumb{left:100%;top:50%;transform:translate(calc(-100% - 2px),-50%)}.doc-cck-toggle--checked .doc-cck-toggle__backdrop{background-color:var(--cck-doc-color-brand-default)}.doc-cck-toggle--unchecked .doc-cck-toggle__thumb{left:0;top:50%;transform:translate(2px,-50%)}.doc-cck-toggle--unchecked .doc-cck-toggle__backdrop{background-color:var(--cck-doc-color-bg-4)}.doc-cck-overlay__backdrop{background-color:rgba(0,0,0,.5)}.doc-cck-tabs{display:flex;flex-direction:column;gap:12px}.doc-cck-tabs__headers-wrapper{align-items:center;align-self:flex-start;border-radius:var(--cck-doc-radius-sm);display:flex;flex-wrap:wrap;gap:8px;min-height:40px;padding:4px}.doc-cck-tabs__size--fit .doc-cck-tabs__headers-wrapper{width:100%}.doc-cck-tabs__color--default .doc-cck-tabs__headers-wrapper{background-color:var(--cck-doc-color-bg-3)}.doc-cck-tabs__color--h-contrast .doc-cck-tabs__headers-wrapper{background-color:var(--cck-doc-color-bg-4)}.doc-cck-tab{align-items:center;background:transparent;border:none;border-radius:var(--cck-doc-radius-sm);cursor:pointer;display:flex;font:var(--cck-doc-text-sm-medium);height:32px;justify-content:center;outline:none;padding:4px 12px;position:relative}.doc-cck-tabs__size--fit .doc-cck-tab{flex:1;padding:4px 0}.doc-cck-tab__indicator{border-radius:var(--cck-doc-radius-sm);height:100%;left:0;position:absolute;top:0;width:100%}.doc-cck-tab--selected{color:var(--cck-doc-color-font-1)}.doc-cck-tab--unselected{color:var(--cck-doc-color-font-2)}.doc-cck-tab .doc-cck-svg-icon{fill:currentcolor}.doc-cck-tabs__color--default .doc-cck-tab__indicator{background-color:var(--cck-doc-color-bg-1)}.doc-cck-tabs__color--h-contrast .doc-cck-tab__indicator{background-color:var(--cck-doc-color-bg-2)}.doc-cck-tab__label{position:relative;z-index:1} \ No newline at end of file diff --git a/packages/internal/storybook-addon-theme/src/lib/features/mdx-page/mdx-page-tab-code.tsx b/packages/internal/storybook-addon-theme/src/lib/features/mdx-page/mdx-page-tab-code.tsx index 44bc9c19..64b1a2b6 100644 --- a/packages/internal/storybook-addon-theme/src/lib/features/mdx-page/mdx-page-tab-code.tsx +++ b/packages/internal/storybook-addon-theme/src/lib/features/mdx-page/mdx-page-tab-code.tsx @@ -12,7 +12,7 @@ export const MdxPageTabCode = ({ codeTabs, language = 'typescript' }: MdxPageTab return ( {Object.keys(codeTabs).map((tab) => ( - + {`\`\`\`${language}\n${codeTabs[tab]}\n\`\`\``} ))} diff --git a/packages/internal/storybook-addon-theme/src/lib/features/story-control/story-control-icon.tsx b/packages/internal/storybook-addon-theme/src/lib/features/story-control/story-control-icon.tsx index ace75a04..e2eff506 100644 --- a/packages/internal/storybook-addon-theme/src/lib/features/story-control/story-control-icon.tsx +++ b/packages/internal/storybook-addon-theme/src/lib/features/story-control/story-control-icon.tsx @@ -1,6 +1,6 @@ import { Icons } from '@cocokits/common-icons'; import { SvgIcon } from '@cocokits/react-icon'; -import { Tab, TabLabel, Tabs, TabSelectionChangeEvent } from '@cocokits/react-tabs'; +import { Tab, Tabs, TabSelectionChangeEvent } from '@cocokits/react-tabs'; import { StoryControlChangeEvent } from './story-control.model'; import { StyledControlLabel } from './story-control.style'; @@ -13,23 +13,16 @@ interface StoryControlIconProps { } export function StoryControlIcon({ control, selected, onChange }: StoryControlIconProps) { - const onIconChange = (e: TabSelectionChangeEvent) => { + const onIconChange = (e: TabSelectionChangeEvent) => { onChange({ [control.storyArgKey]: e.value }); }; return ( <> {control.displayName} - + {control.icons.map((icon) => ( - ( - - - - )}> + }> ))} diff --git a/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page-api.model.ts b/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page-api.model.ts index cb24f08c..426593d7 100644 --- a/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page-api.model.ts +++ b/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page-api.model.ts @@ -2,6 +2,7 @@ import { UIBaseComponentsPropValue } from '@cocokits/core'; export interface StoryDocPageArgTypes { componentName: string; + deception: string | undefined; argTypeGroup: StoryDocPageComponentArgTypeGroup | null; } diff --git a/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page-api.tsx b/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page-api.tsx index 7d3ee4e2..55c4b77e 100644 --- a/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page-api.tsx +++ b/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page-api.tsx @@ -15,6 +15,8 @@ export function StoryDocPageAPI({ argTypes, themeName, ngTemplateMD }: StoryDocP Mismatches between the theme of this document and your project can result in discrepancies in \`type\` definitions and \`default\` values, as themes may vary in their specifications.`; + console.log('StoryDocPageAPI argTypes:', argTypes); + return ( <> {description} @@ -27,7 +29,11 @@ export function StoryDocPageAPI({ argTypes, themeName, ngTemplateMD }: StoryDocP argType.argTypeGroup.methods?.length === 0); return ( - + {isEmpty &&

This components has no API configuration

} {argType.argTypeGroup?.props && argType.argTypeGroup?.props.length > 0 && ( diff --git a/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page-api.utils.ts b/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page-api.utils.ts index 248e032f..444ad130 100644 --- a/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page-api.utils.ts +++ b/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page-api.utils.ts @@ -48,6 +48,7 @@ export function getArgTypesApiList( argTypeGroup.push({ componentName: getStoryComponentName(mainComponent, preparedMeta.id), + deception: parameters.cckAddon.deception, argTypeGroup: getComponentArgTypes({ componentRef: mainComponent, originalArgTypes: preparedMeta.argTypes, @@ -78,6 +79,7 @@ export function getArgTypesApiList( argTypeGroup.push({ componentName: name, + deception: parameters.cckAddon.subcomponents?.[name]?.description, argTypeGroup: getComponentArgTypes({ componentRef: subcomponent, originalArgTypes: argTypes, @@ -388,7 +390,7 @@ export function parseTypeDefinition(typeStrRaw: string): string[] { result.push(removeUnnecessaryParentheses(current.trim())); } - return result; + return result.map((type) => (type.startsWith("'") && type.endsWith("'") ? type.slice(1, -1) : type)); } /** diff --git a/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page.tsx b/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page.tsx index 253c67a3..71d8b9eb 100644 --- a/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page.tsx +++ b/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page.tsx @@ -3,7 +3,7 @@ import { useContext, useMemo, useState } from 'react'; import styled from 'styled-components'; import { getInstance } from '@cocokits/common-utils'; -import { Tab, Tabs, TabSelectionChangeEvent } from '@cocokits/react-tabs'; +import { Tab, Tabs,TabSelectionChangeEvent } from '@cocokits/react-tabs'; import { usePromise } from '@cocokits/react-utils'; import { getApiProps, getOverviewProps, getStylingProps } from './story-doc-page.utils'; @@ -72,28 +72,27 @@ export function StoryDocPage() { return null; } - const onTabChange = (event: TabSelectionChangeEvent) => { - const tabName = event.value as StoryTab; - getInstance(GlobalEvent).dispatch.docTabChange({ tabName }); - setSelectedTab(tabName); + const onTabChange = (event: TabSelectionChangeEvent) => { + getInstance(GlobalEvent).dispatch.docTabChange({ tabName: event.value }); + setSelectedTab(event.value); }; return ( - - + + - + - + - + @@ -101,7 +100,7 @@ export function StoryDocPage() { ); } -const StyledTabs = styled(Tabs)` +const StyledTabs = styled(Tabs)` & .doc-cck-tabs__content-wrapper { margin-top: 28px; } diff --git a/packages/internal/storybook-addon-theme/src/lib/features/token-dictionary/token-dictionary.tsx b/packages/internal/storybook-addon-theme/src/lib/features/token-dictionary/token-dictionary.tsx index 18fa347a..5dc17509 100644 --- a/packages/internal/storybook-addon-theme/src/lib/features/token-dictionary/token-dictionary.tsx +++ b/packages/internal/storybook-addon-theme/src/lib/features/token-dictionary/token-dictionary.tsx @@ -3,7 +3,7 @@ import styled from 'styled-components'; import { getInstance, recordReduceMerge } from '@cocokits/common-utils'; import { TokenId } from '@cocokits/core'; -import { Tab, Tabs, TabSelectionChangeEvent } from '@cocokits/react-tabs'; +import { Tab, Tabs,TabSelectionChangeEvent } from '@cocokits/react-tabs'; import { getTokenList } from './token-dictionary.utils'; import { TokenDictionaryValue } from './token-dictionary-value'; @@ -36,7 +36,7 @@ export function TokenDictionary() { }); }, [theme.id]); - const onCollectionTabClick = (event: TabSelectionChangeEvent) => { + const onCollectionTabClick = (event: TabSelectionChangeEvent) => { setSelectedCollection(event.value); }; @@ -46,9 +46,9 @@ export function TokenDictionary() { }; return ( - + {tokenDictionary.collectionNames.map((collection) => ( - + @@ -148,7 +148,7 @@ const StyledTable = styled.table` } & tr.group td { - font: var(--cck-doc-text-sm-semibold); + font: var(--cck-doc-text-sm-semib); color: var(--cck-doc-color-font-3); min-height: 40px; padding-top: 32px; diff --git a/packages/internal/storybook-addon-theme/src/lib/model/addon.model.ts b/packages/internal/storybook-addon-theme/src/lib/model/addon.model.ts index 6e395aaf..39ab6710 100644 --- a/packages/internal/storybook-addon-theme/src/lib/model/addon.model.ts +++ b/packages/internal/storybook-addon-theme/src/lib/model/addon.model.ts @@ -2,7 +2,8 @@ import { Args, PreparedStory } from '@storybook/types'; import { ComponentType } from 'react'; import { IconsName } from '@cocokits/common-icons'; -import { ClassRef, DeepPartial, ThemeComponentConfig, UIBaseComponentsName } from '@cocokits/core'; +import { ClassRef, DeepPartial } from '@cocokits/common-utils'; +import { ThemeComponentConfig, UIBaseComponentsName } from '@cocokits/core'; import { ThemeChangeEvent } from './event.model'; import { ExampleStoryCssVariables, ExampleStoryTemplateArgs } from './theme.model'; @@ -58,6 +59,7 @@ export interface AddonParametersMeta { export interface CckAddonStoriesMeta { componentName: UIBaseComponentsName; + deception?: string; subcomponents?: Record< string, diff --git a/packages/internal/storybook-addon-theme/src/lib/utils/common.utils.ts b/packages/internal/storybook-addon-theme/src/lib/utils/common.utils.ts index 77440f67..75c0c11f 100644 --- a/packages/internal/storybook-addon-theme/src/lib/utils/common.utils.ts +++ b/packages/internal/storybook-addon-theme/src/lib/utils/common.utils.ts @@ -1,6 +1,6 @@ import { ComponentRef } from 'react'; -import { ClassRef } from '@cocokits/core'; +import { ClassRef } from '@cocokits/common-utils'; export function isClassRef(ref: any): ref is ClassRef { return typeof ref === 'function' && !!ref.prototype && ref.prototype.constructor === ref; diff --git a/packages/internal/storybook-addon-theme/src/theme/scss/_tab-label.scss b/packages/internal/storybook-addon-theme/src/theme/scss/_tab-label.scss index da8fee61..8ee93e6d 100644 --- a/packages/internal/storybook-addon-theme/src/theme/scss/_tab-label.scss +++ b/packages/internal/storybook-addon-theme/src/theme/scss/_tab-label.scss @@ -1,9 +1,4 @@ @use '../../token/scss' as *; @mixin tab-label { - .doc-cck-tab-label { - // Without relative and zIndex 1, the indicator will be at top of the prevues element - position: relative; - z-index: 1; - } } diff --git a/packages/internal/storybook-addon-theme/src/theme/scss/_tab.scss b/packages/internal/storybook-addon-theme/src/theme/scss/_tab.scss index b5faeb0a..5256c51d 100644 --- a/packages/internal/storybook-addon-theme/src/theme/scss/_tab.scss +++ b/packages/internal/storybook-addon-theme/src/theme/scss/_tab.scss @@ -49,4 +49,10 @@ .doc-cck-tabs__color--h-contrast .doc-cck-tab__indicator { background-color: var(--cck-doc-color-bg-2); } + + .doc-cck-tab__label { + // Without relative and zIndex 1, the indicator will be at top of the prevues element + position: relative; + z-index: 1; + } } diff --git a/packages/internal/storybook-addon-theme/src/theme/scss/_tabs.scss b/packages/internal/storybook-addon-theme/src/theme/scss/_tabs.scss index aeb4da16..9264ed25 100644 --- a/packages/internal/storybook-addon-theme/src/theme/scss/_tabs.scss +++ b/packages/internal/storybook-addon-theme/src/theme/scss/_tabs.scss @@ -6,7 +6,7 @@ flex-direction: column; gap: 12px; - &__labels-wrapper { + &__headers-wrapper { display: flex; flex-wrap: wrap; align-items: center; @@ -30,7 +30,7 @@ // } &--fit { - .doc-cck-tabs__labels-wrapper { + .doc-cck-tabs__headers-wrapper { width: 100%; } } @@ -38,13 +38,13 @@ &__color { &--default { - .doc-cck-tabs__labels-wrapper { + .doc-cck-tabs__headers-wrapper { background-color: var(--cck-doc-color-bg-3); } } &--h-contrast { - .doc-cck-tabs__labels-wrapper { + .doc-cck-tabs__headers-wrapper { background-color: var(--cck-doc-color-bg-4); } } diff --git a/packages/internal/storybook-addon-theme/src/theme/theme-config.ts b/packages/internal/storybook-addon-theme/src/theme/theme-config.ts index 4d23db88..c011a804 100644 --- a/packages/internal/storybook-addon-theme/src/theme/theme-config.ts +++ b/packages/internal/storybook-addon-theme/src/theme/theme-config.ts @@ -91,7 +91,6 @@ const components: ThemeComponentConfigRecord = { }, }, tab: {}, - tabLabel: {}, overlay: {}, }; diff --git a/packages/react/accordion/src/lib/accordion/accordion.tsx b/packages/react/accordion/src/lib/accordion/accordion.tsx index 6fee49e2..3b185060 100644 --- a/packages/react/accordion/src/lib/accordion/accordion.tsx +++ b/packages/react/accordion/src/lib/accordion/accordion.tsx @@ -60,7 +60,7 @@ export interface AccordionProps extends UIBaseCo | ((props: { isExpanded: boolean; disabled: boolean }) => React.ReactNode); /** - * he children of the Accordion component. Must only be `AccordionPanel` components. + * the children of the Accordion component. Must only be `AccordionPanel` components. */ children: React.ReactNode; } diff --git a/packages/react/components/CHANGELOG.md b/packages/react/components/CHANGELOG.md index 64926f43..bb60edfa 100644 --- a/packages/react/components/CHANGELOG.md +++ b/packages/react/components/CHANGELOG.md @@ -19,6 +19,5 @@ - @cocokits/react-icon@1.0.1 - @cocokits/react-menu@1.0.1 - @cocokits/react-radio@1.0.1 - - @cocokits/react-tabs@1.0.1 - @cocokits/react-toggle@1.0.1 - @cocokits/react-utils@1.0.1 diff --git a/packages/react/components/package.json b/packages/react/components/package.json index af742907..c8e6ef25 100644 --- a/packages/react/components/package.json +++ b/packages/react/components/package.json @@ -17,9 +17,9 @@ "@cocokits/react-menu": "workspace:*", "@cocokits/react-toggle": "workspace:*", "@cocokits/react-cdk": "workspace:*", - "@cocokits/react-tabs": "workspace:*", "@cocokits/react-avatar": "workspace:*", - "@cocokits/react-accordion": "workspace:*" + "@cocokits/react-accordion": "workspace:*", + "@cocokits/react-tabs": "workspace:*" }, "exports": { ".": { diff --git a/packages/react/components/src/index.ts b/packages/react/components/src/index.ts index 560cacd5..9b01130b 100644 --- a/packages/react/components/src/index.ts +++ b/packages/react/components/src/index.ts @@ -11,4 +11,3 @@ export * from '@cocokits/react-divider'; export * from '@cocokits/react-menu'; export * from '@cocokits/react-toggle'; export * from '@cocokits/react-cdk'; -// export * from '@cocokits/react-tabs'; diff --git a/packages/react/tabs/CHANGELOG.md b/packages/react/tabs/CHANGELOG.md deleted file mode 100644 index d6b6ce69..00000000 --- a/packages/react/tabs/CHANGELOG.md +++ /dev/null @@ -1,13 +0,0 @@ -# @cocokits/react-tabs - -## 1.0.1 - -### Patch Changes - -- c9f1995: First Release 🔥 -- Add README file for npm -- Updated dependencies [c9f1995] -- Updated dependencies - - @cocokits/core@1.1.1 - - @cocokits/react-core@1.0.1 - - @cocokits/react-utils@1.0.1 diff --git a/packages/react/tabs/README.md b/packages/react/tabs/README.md index 1631dcbd..f97f5517 100644 --- a/packages/react/tabs/README.md +++ b/packages/react/tabs/README.md @@ -1,3 +1,66 @@ -# tabs +# @cocokits/react-tabs + +The `@cocokits/react-tabs` package offers a headless tabs system for React applications with complete customization capabilities. + +## Included Components: +- `Tabs` +- `Tab` + + +## Key Components Overview: + +### TabsComponent +The container component that manages tab state and synchronization. Handles coordination between tabs and their content panels. + +**Features:** + +- **Custom Header Templates:** +Fully customize tab headers using Angular templates + +- **Animation Control:** +Toggle transition animations + +- **Disabled Tabs:** +Disable individual tabs using [disabled] property + +- **Imperative Control:** +Programmatically activate tabs + +- **Tab Align:** +Configure tab headers alignment (left/right/center/stretch) + +- **Content Persistence:** +Option to preserve DOM state when switching tabs + +### Tab +Defines individual tab sections with associated header and content. + +**Features:** + +- **Header Customization:** +Render custom header elements via `header` prop or slot + +- **State Control:** +Support for disabled states + +--- + +## Styling and Theming +As with other CocoKits components, these accordion related components do not come with built-in styles but apply CSS classes based on configuration. This allows you to style them or use CocoKits' theming options for a consistent look across your application. + +## Documentation and Examples +For more information on configuring and using these components, visit the documentation: + +- [TabsComponent](https://rect.cocokits.com/?path=/docs/ui-components-tabs--docs) + + +--- + +### Contributing +We welcome contributions! If you'd like to contribute to this project, please read our [Contributing Guidelines](https://github.com/coco-base/cocokits/blob/main/CONTRIBUTING.md) + +--- + +### License +This project is licensed under the Apache License. See the [LICENSE](https://github.com/coco-base/cocokits/blob/main/LICENSE) file for details. -## TODO: Write a good description diff --git a/packages/react/tabs/package.json b/packages/react/tabs/package.json index 20c5675a..01a681d4 100644 --- a/packages/react/tabs/package.json +++ b/packages/react/tabs/package.json @@ -1,12 +1,14 @@ { "name": "@cocokits/react-tabs", - "version": "1.0.1", + "version": "0.0.0", + "private": false, "main": "./index.js", "types": "./index.d.ts", "dependencies": { - "@cocokits/core": "workspace:*", "@cocokits/react-core": "workspace:*", - "@cocokits/react-utils": "workspace:*" + "@cocokits/core": "workspace:*", + "@cocokits/react-utils": "workspace:*", + "@cocokits/common-utils": "workspace:*" }, "peerDependencies": { "react": "^18.3.0", diff --git a/packages/react/tabs/project.json b/packages/react/tabs/project.json index df01f7a5..6bbe8555 100644 --- a/packages/react/tabs/project.json +++ b/packages/react/tabs/project.json @@ -6,6 +6,9 @@ "tags": ["type:ui", "framework:react"], "// targets": "to see all targets run: nx show project button --web", "targets": { + "build": { + "outputs": ["{workspaceRoot}/dist/packages/react/tabs"] + }, "quick-fix-eslint": { "executor": "@nx/eslint:lint" } diff --git a/packages/react/tabs/src/index.ts b/packages/react/tabs/src/index.ts index aca13ec9..067595ee 100644 --- a/packages/react/tabs/src/index.ts +++ b/packages/react/tabs/src/index.ts @@ -1,4 +1,3 @@ -export * from './lib/tabs'; -export * from './lib/tab'; -export * from './lib/tab-label'; -export * from './lib/tab.model'; +export * from './lib/tabs/tabs'; +export * from './lib/tab/tab'; +export * from './lib/tabs.model'; diff --git a/packages/react/tabs/src/lib/tab-label.tsx b/packages/react/tabs/src/lib/tab-label.tsx deleted file mode 100644 index ca5f82e7..00000000 --- a/packages/react/tabs/src/lib/tab-label.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { UIBaseComponentProps } from '@cocokits/core'; -import { useUiBaseComponentConfig } from '@cocokits/react-core'; - -export interface TabLabelProps extends UIBaseComponentProps { - children: React.ReactNode | React.ReactNode[]; -} - -export const TabLabel = (props: TabLabelProps) => { - const { classNames, hostClassNames } = useUiBaseComponentConfig({ - componentName: 'tabLabel', - props, - }); - - return
{props.children}
; -}; diff --git a/packages/react/tabs/src/lib/tab.model.ts b/packages/react/tabs/src/lib/tab.model.ts deleted file mode 100644 index d2659672..00000000 --- a/packages/react/tabs/src/lib/tab.model.ts +++ /dev/null @@ -1,8 +0,0 @@ -export type TabValue = string; - -export interface TabSelectionChangeEvent { - previousIndex: number; - previousValue: TabValue; - index: number; - value: TabValue; -} diff --git a/packages/react/tabs/src/lib/tab.tsx b/packages/react/tabs/src/lib/tab.tsx deleted file mode 100644 index 95030979..00000000 --- a/packages/react/tabs/src/lib/tab.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import { ReactNode, useContext, useEffect, useRef } from 'react'; - -import { useUiBaseComponentConfig } from '@cocokits/react-core'; - -import { TabLabel } from './tab-label'; -import { TabIndexContext, useTabsStore } from './tabs.store'; - -export interface TabProps { - label: string | ((selected: boolean) => ReactNode); - value: string; - children?: React.ReactNode | React.ReactNode[]; -} - -export const Tab = (props: TabProps) => { - const tabsStore = useTabsStore(); - const index = useContext(TabIndexContext); - const selectedTab = tabsStore?.useSelectedTab(); - - const hostElemRef = useRef(null); - const indicatorElemRef = useRef(null); - - const isSelected = selectedTab?.value === props.value; - - const { classNames, hostClassNames } = useUiBaseComponentConfig({ - componentName: 'tab', - props: {}, - extraHostElementClassConditions: [ - { if: isSelected, classes: (cn) => [cn.selected] }, - { if: !isSelected, classes: (cn) => [cn.unselected] }, - ], - }); - - // Register and update the tab on mount and changes - useEffect(() => { - const label = typeof props.label === 'string' ? {props.label} : props.label(isSelected); - - const tabTmp = ( - - ); - - const contentTmp =
{props.children}
; - - tabsStore?.registerTab({ - index, - tabTmp, - contentTmp, - hostElemRef, - indicatorElemRef, - value: props.value, - }); - }, [props.children, props.label, props.value, isSelected]); - - // Unregister tab on unmount - useEffect(() => { - return () => { - tabsStore?.unregisterTab(props.value); - }; - }, []); - - // Change indicator display on selected tab change - useEffect(() => { - if (selectedTab?.value === props.value) { - indicatorElemRef.current?.style.removeProperty('display'); - } else { - indicatorElemRef.current?.style.setProperty('display', 'none'); - } - }, [selectedTab, indicatorElemRef.current]); - - return null; -}; diff --git a/packages/react/tabs/src/lib/tab/tab.tsx b/packages/react/tabs/src/lib/tab/tab.tsx new file mode 100644 index 00000000..c05c39c6 --- /dev/null +++ b/packages/react/tabs/src/lib/tab/tab.tsx @@ -0,0 +1,131 @@ +/* eslint-disable max-lines-per-function */ +import { CSSProperties, ReactNode, useContext, useEffect, useLayoutEffect, useRef } from 'react'; + +import { UIBaseComponentProps } from '@cocokits/core'; +import { useUiBaseComponentConfig } from '@cocokits/react-core'; +import { useOnDestroy, useStaticText } from '@cocokits/react-utils'; + +import { TabIndexContext, useFeatureStore } from '../tabs.feature-store'; + +export interface TabProps extends UIBaseComponentProps { + + /** + * The label of the tab, which can be a string or a function that receives a boolean indicating if the tab is selected. + * If a function is provided, it should return a ReactNode to be rendered as the label. + */ + header: string | ((selected: boolean) => ReactNode); + + /** + * The value of the tab, which is used to identify the tab when selected. + * If not provided, a unique ID will be used. + */ + value?: TValue; + + /** + * Whether the tab is disabled. If true, the tab will not be selectable by user. + * @default false + */ + disabled?: boolean; + + /** + * The content of tab component. + */ + children?: ReactNode | ReactNode[]; + + /** + * A custom class name that can be used to apply additional styles to the component. + */ + className?: string; + + /** + * An object containing inline styles that can be used to customize the appearance of the component. + */ + style?: CSSProperties; +} + +export const Tab = ({ + type, + size, + color, + additional, + header, + value, + disabled = false, + children, + className, + style, +}: TabProps) => { + const id = useStaticText(); + const valueOrId = value ?? id; + const store = useFeatureStore(); + const index = useContext(TabIndexContext); + const selectedTab = store?.useSelectedTab(); + + const hostElemRef = useRef(null); + const indicatorElemRef = useRef(null); + + const isSelected = selectedTab?.id === id; + + const { classNames, hostClassNames } = useUiBaseComponentConfig({ + componentName: 'tab', + props: { type, size, color, additional }, + extraHostElementClassConditions: [ + { if: !!className, classes: () => [className] }, + { if: isSelected, classes: (cn) => [cn.selected] }, + { if: !isSelected, classes: (cn) => [cn.unselected] }, + { if: disabled, classes: (cn) => [cn.disabled] }, + ], + }); + + useLayoutEffect(() => { + const headerTemp = typeof header === 'string' ? header : header(isSelected); + const onClick = () => { + if (!disabled) { + store?.selectTabById(id); + } + }; + + const tabTmp = ( + + ); + + const contentTmp =
{children}
; + + store?.registerTab({ + id, + index, + disabled, + tabTmp, + contentTmp, + hostElemRef, + indicatorElemRef, + value: valueOrId, + }); + }, [children, header, valueOrId, index, isSelected]); + + // Change indicator display on selected tab change + useEffect(() => { + if (isSelected) { + indicatorElemRef.current?.style.removeProperty('display'); + } else { + indicatorElemRef.current?.style.setProperty('display', 'none'); + } + }, [isSelected, indicatorElemRef.current]); + + useOnDestroy(() => store?.unregisterTab(id)); + + // This component does not render anything directly, it only registers itself in the store and the tabs component will render the tabTmp and contentTmp. + return <>; +}; + +Tab.displayName = 'Tab'; +export default Tab; diff --git a/packages/react/tabs/src/lib/tabs.feature-store.ts b/packages/react/tabs/src/lib/tabs.feature-store.ts new file mode 100644 index 00000000..197f3967 --- /dev/null +++ b/packages/react/tabs/src/lib/tabs.feature-store.ts @@ -0,0 +1,134 @@ +import { createContext, ReactNode, RefObject } from 'react'; + +import { createComponentStore, createFeatureStore } from '@cocokits/react-utils'; + +import { TabSelectionChangeEvent } from './tabs.model'; + +export interface TabComponent { + index: number; + value: TValue; + id: string; + disabled: boolean; + tabTmp: ReactNode; + contentTmp: ReactNode; + hostElemRef: RefObject; + indicatorElemRef: RefObject; +} + +export type TabsFeatureStoreOptions = Pick< + TabsFeatureStoreState, + 'instantAnimation' | 'onSelectionChange' +>; + +export interface TabsFeatureStoreState { + tabs: Record>; + selectedId: string; + + instantAnimation: boolean; + onSelectionChange: ((event: TabSelectionChangeEvent) => void) | undefined; +} + +const INITIALIZE_STATE: TabsFeatureStoreState = { + tabs: {}, + selectedId: '', + instantAnimation: false, + onSelectionChange: undefined, +}; + +class TabsFeatureStore { + private store = createComponentStore>(INITIALIZE_STATE); + private get state() { + return this.store.getState(); + } + + public useSelectedTab = this.store.createSelector | undefined>( + (state) => state.tabs[state.selectedId] ?? Object.values(state.tabs)[0] + ); + + public useTabComponents = this.store.createSelector((state) => { + const tabs = Object.values(state.tabs) ?? []; + return tabs.sort((a, b) => a.index - b.index); + }); + + constructor(options: TabsFeatureStoreOptions) { + this.updateState(options); + } + + public updateState(options: TabsFeatureStoreOptions) { + this.store.updateState({ ...options }); + } + + public registerTab(tab: TabComponent) { + this.store.updateState((state) => ({ + tabs: { ...state.tabs, [tab.id]: tab }, + selectedId: state.selectedId || tab.id, // Select the first tab if no tab is selected + })); + } + + public unregisterTab(tabId: string) { + this.store.updateState((state) => { + const tabs = { ...state.tabs }; + delete tabs[tabId]; + const selectedId = tabs[state.selectedId]?.id ?? Object.keys(tabs)[0]; + return { tabs, selectedId }; + }); + } + + public selectTabById(newTabId: string, emitEvent = true) { + const currentSelected = this.state.tabs[this.state.selectedId]; + const newSelected = this.state.tabs[newTabId]; + + if (!newSelected || newTabId === this.state.selectedId) { + return; + } + + this.store.updateState((currentState) => { + return { ...currentState, selectedId: newSelected.id }; + }); + + if (emitEvent) { + this.state.onSelectionChange?.({ + previousIndex: currentSelected.index, + previousValue: currentSelected.value, + index: newSelected.index, + value: newSelected.value, + }); + } + + if (!this.state.instantAnimation && newSelected.hostElemRef.current && currentSelected.hostElemRef.current) { + const currentTabReact = currentSelected.hostElemRef.current.getBoundingClientRect(); + const newTabReact = newSelected.hostElemRef.current.getBoundingClientRect(); + + const translate = { + x: currentTabReact.left - newTabReact.left, + y: currentTabReact.top - newTabReact.top, + }; + + newSelected.indicatorElemRef.current?.animate( + { + transform: [`translate(${translate.x}px, ${translate.y}px)`, '*'], + width: [`${currentTabReact.width}px`, `${newTabReact.width}px`], + height: [`${currentTabReact.height}px`, `${newTabReact.height}px`], + }, + { duration: 300, easing: 'ease-in-out' } + ); + } + } + + public selectTabByIndex(tabIndex: number, emitEvent = true) { + const selectedTab = Object.values(this.state.tabs).find((tab) => tab.index === tabIndex); + if (selectedTab) { + this.selectTabById(selectedTab.id, emitEvent); + } + } + + public selectTabByValue(tabValue: TValue, emitEvent = true) { + const selectedTab = Object.values(this.state.tabs).find((tab) => tab.value === tabValue); + if (selectedTab) { + this.selectTabById(selectedTab.id, emitEvent); + } + } +} + +export const { useCreateFeatureStore, useFeatureStore } = createFeatureStore(TabsFeatureStore); +export const TabIndexContext = createContext(0); diff --git a/packages/react/tabs/src/lib/tabs.model.ts b/packages/react/tabs/src/lib/tabs.model.ts new file mode 100644 index 00000000..053278fe --- /dev/null +++ b/packages/react/tabs/src/lib/tabs.model.ts @@ -0,0 +1,6 @@ +export interface TabSelectionChangeEvent { + previousIndex: number; + previousValue: TValue; + index: number; + value: TValue; +} diff --git a/packages/react/tabs/src/lib/tabs.store.ts b/packages/react/tabs/src/lib/tabs.store.ts deleted file mode 100644 index 0e07cbe1..00000000 --- a/packages/react/tabs/src/lib/tabs.store.ts +++ /dev/null @@ -1,137 +0,0 @@ -import React, { createContext, RefObject, useContext, useRef } from 'react'; - -import { createComponentStore } from '@cocokits/react-utils'; - -import { TabSelectionChangeEvent, TabValue } from './tab.model'; - -export interface TabComponent { - index: number; - tabTmp: React.ReactNode; - contentTmp: React.ReactNode; - hostElemRef: RefObject; - indicatorElemRef: RefObject; - value: TabValue; -} - -export interface TabsState { - selectedValue: TabValue; - tabs: Record; -} - -interface TabsStoreConfig { - disableAnimation: boolean; - onSelectionChange: (event: TabSelectionChangeEvent) => void; -} - -export const TabsContext = createContext(null); -export const TabIndexContext = createContext(0); - -export function useCreateTabsStore(config: TabsStoreConfig) { - const storeRef = useRef<{ - TabsStoreProvider: typeof TabsContext.Provider; - tabsStore: TabsStore; - }>(); - - if (!storeRef.current) { - storeRef.current = { - TabsStoreProvider: TabsContext.Provider, - tabsStore: new TabsStore(config), - }; - } - - return storeRef.current; -} - -export function useTabsStore() { - return useContext(TabsContext); -} - -class TabsStore { - private state = createComponentStore({ selectedValue: '', tabs: {} }); - - public useSelectedTab = this.state.createSelector( - (state) => state.tabs[state.selectedValue] ?? Object.values(state.tabs)[0] - ); - - public useTabComponents = this.state.createSelector((state) => { - const tabs = Object.values(state.tabs) ?? []; - return tabs.sort((a, b) => a.index - b.index); - }); - - constructor(private config: TabsStoreConfig) {} - - public updateConfig(config: Partial) { - this.config = { ...this.config, ...config }; - } - - public registerTab(tab: TabComponent) { - this.state.updateState((state) => { - const tabs = { ...state.tabs, [tab.value]: tab }; - const selectedValue = state.selectedValue ?? tab.value; // Select the first tab if no tab is selected (when no tab is selected, selectedValue is an empty string) - return { tabs, selectedValue }; - }); - } - - public unregisterTab(tabValue: TabValue) { - this.state.updateState((state) => { - const tabs = { ...state.tabs }; - delete tabs[tabValue]; - const selectedValue = tabs[state.selectedValue]?.value ?? Object.keys(tabs)[0]; - return { tabs, selectedValue }; - }); - } - - public selectTabByValue(newTabValue: TabValue, emitEvent = true) { - const state = this.state.getState(); - const currentSelected = state.tabs[state.selectedValue]; - const newSelected = state.tabs[newTabValue]; - - if (!newSelected || newTabValue === state.selectedValue) { - return; - } - - this.state.updateState((currentState) => { - return { ...currentState, selectedValue: newTabValue }; - }); - - if (emitEvent) { - const currentIndex = Object.values(state.tabs).findIndex((tab) => tab.value === state.selectedValue); - const currentValue = state.selectedValue; - const newIndex = Object.values(state.tabs).findIndex((tab) => tab.value === newTabValue); - - this.config.onSelectionChange({ - previousIndex: currentIndex, - previousValue: currentValue, - index: newIndex, - value: newTabValue, - }); - } - - if (!this.config.disableAnimation && newSelected.hostElemRef.current && currentSelected.hostElemRef.current) { - const currentTabReact = currentSelected.hostElemRef.current.getBoundingClientRect(); - const newTabReact = newSelected.hostElemRef.current.getBoundingClientRect(); - - const translate = { - x: currentTabReact.left - newTabReact.left, - y: currentTabReact.top - newTabReact.top, - }; - - newSelected.indicatorElemRef.current?.animate( - { - transform: [`translate(${translate.x}px, ${translate.y}px)`, '*'], - width: [`${newTabReact.width}px`, `*`], - height: [`${newTabReact.height}px`, `*`], - }, - { duration: 150, easing: 'ease-in-out' } - ); - } - } - - public selectTabByIndex(tabIndex: number, emitEvent = true) { - const state = this.state.getState(); - const newValue = Object.values(state.tabs).find((tab) => tab.index === tabIndex)?.value; - if (newValue) { - this.selectTabByValue(newValue, emitEvent); - } - } -} diff --git a/packages/react/tabs/src/lib/tabs.tsx b/packages/react/tabs/src/lib/tabs.tsx deleted file mode 100644 index 74225aba..00000000 --- a/packages/react/tabs/src/lib/tabs.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import React, { useEffect } from 'react'; - -import { UIBaseComponentProps } from '@cocokits/core'; -import { useUiBaseComponentConfig } from '@cocokits/react-core'; -import { useEffectAfterMount } from '@cocokits/react-utils'; - -import { TabSelectionChangeEvent, TabValue } from './tab.model'; -import { TabIndexContext, useCreateTabsStore } from './tabs.store'; - -// eslint-disable-next-line @typescript-eslint/no-empty-function -const EMPTY_CALLBACK = () => {}; - -export interface TabsProps extends UIBaseComponentProps { - selectedIndex?: number; - selectedValue?: TabValue; - - hideContent?: boolean; - disableAnimation?: boolean; - - onSelectionChange?: (event: TabSelectionChangeEvent) => void; - children: React.ReactNode | React.ReactNode[]; - className?: string; -} - -export const Tabs = (props: TabsProps) => { - const hideContent = props.hideContent ?? false; - const disableAnimation = props.disableAnimation ?? false; - - const { tabsStore, TabsStoreProvider } = useCreateTabsStore({ - disableAnimation, - onSelectionChange: props.onSelectionChange ?? EMPTY_CALLBACK, - }); - - const { classNames: tabsClassNames, hostClassNames: tabsHostClassNames } = useUiBaseComponentConfig({ - componentName: 'tabs', - props, - }); - - const tabComponents = tabsStore.useTabComponents(); - const selectedTab = tabsStore.useSelectedTab(); - - useEffectAfterMount(() => { - tabsStore.updateConfig({ disableAnimation }); - }, [props.disableAnimation]); - - // Update selected tab by index - useEffect(() => { - if (props.selectedIndex !== undefined) { - tabsStore.selectTabByIndex(props.selectedIndex, false); - } - }, [props.selectedIndex]); - - // Update selected tab by value - useEffect(() => { - if (props.selectedValue !== undefined) { - tabsStore.selectTabByValue(props.selectedValue, false); - } - }, [props.selectedValue]); - - return ( - - {/* Just render the children to register them into the store, The Children has no template */} - {React.Children.map(props.children, (child, index) => ( - - {child} - - ))} - -
- {/* Labels */} -
{tabComponents.map((tab) => tab.tabTmp)}
- - {/* Content */} - {!hideContent && ( -
- {/* selectedTab Can be undefined for firs render */} - {selectedTab?.contentTmp} -
- )} -
- - ); -}; diff --git a/packages/react/tabs/src/lib/tabs/tabs.tsx b/packages/react/tabs/src/lib/tabs/tabs.tsx new file mode 100644 index 00000000..3554d327 --- /dev/null +++ b/packages/react/tabs/src/lib/tabs/tabs.tsx @@ -0,0 +1,147 @@ +import { Children, CSSProperties, ReactNode, useEffect } from 'react'; + +import { isNullish } from '@cocokits/common-utils'; +import { UIBaseComponentProps } from '@cocokits/core'; +import { useUiBaseComponentConfig } from '@cocokits/react-core'; +import { useEffectAfterMount } from '@cocokits/react-utils'; + +import { TabIndexContext, useCreateFeatureStore } from '../tabs.feature-store'; +import { TabSelectionChangeEvent } from '../tabs.model'; + +export interface TabsProps extends UIBaseComponentProps { + /** + * The index of the currently selected tab. + * If `selected` is provided, the value of `selectedIndex` will be ignored. + * @default 0 + */ + selectedIndex?: number; + + /** + * The value of the currently selected tab. + * If not provided, the `selectedIndex` will be used, and if `selectedIndex` is not provided, the first tab will be selected by default. + */ + selected?: TValue; + + /** + * Whether to hide the content of the tabs when they are not selected. + * @default false + */ + hideContent?: boolean; + + /** + * Whether to disable the animation when switching between tabs. + * @default false + */ + instantAnimation?: boolean; + + /** + * The alignment of the tab headers. + * @default 'left' + */ + headerAlign?: 'left' | 'center' | 'right' | 'stretch'; + + /** + * Callback function that is called when the selected tab changes. + * The callback receives an object with the new and previous selected index and value. + */ + onSelectionChange?: (event: TabSelectionChangeEvent) => void; + /** + * the children of the Tabs component. Must only be `Tab` components. + */ + children: ReactNode[]; + /** + * A custom class name that can be used to apply additional styles to the component. + */ + className?: string; + /** + * An object containing inline styles that can be used to customize the appearance of the component. + */ + style?: CSSProperties; +} + +export const Tabs = ({ + type, + size, + color, + additional, + selectedIndex = 0, + selected, + hideContent = false, + instantAnimation = false, + headerAlign = 'left', + onSelectionChange, + children, + className, + style, +}: TabsProps) => { + + const { store, StoreProvider } = useCreateFeatureStore({ + instantAnimation, + onSelectionChange: onSelectionChange, + }); + const { classNames, hostClassNames } = useUiBaseComponentConfig({ + componentName: 'tabs', + props: { type, size, color, additional }, + extraHostElementClassConditions: [ + { if: !!className, classes: () => [className] }, + { if: headerAlign === 'left', classes: (cn) => [cn.alignLeft] }, + { if: headerAlign === 'right', classes: (cn) => [cn.alignRight] }, + { if: headerAlign === 'center', classes: (cn) => [cn.alignCenter] }, + { if: headerAlign === 'stretch', classes: (cn) => [cn.alignStretch] }, + ], + }); + + const selectedTab = store.useSelectedTab(); + const tabComponents = store.useTabComponents(); + + // Update config + useEffectAfterMount(() => { + store.updateState({ + instantAnimation, + onSelectionChange, + }); + }, [instantAnimation, onSelectionChange]); + + // Update selected tab by Index + useEffect(() => { + if(!isNullish(selected) || isNullish(selectedIndex)) { + return; + } + store.selectTabByIndex(selectedIndex, false); + }, [selectedIndex]); + + // Update selected tab by Value + useEffect(() => { + if(isNullish(selected)) { + return; + } + store.selectTabByValue(selected, false); + }, [selected]); + + return ( + + {/* Just render the children to register them into the store, The Children (Tab Component) will not return any template */} + {Children.map(children, (child, index) => ( + + {child} + + ))} + +
+ {/* Labels */} +
{tabComponents.map((tab) => tab.tabTmp)}
+ + {/* Content */} + {/* selectedTab Can be undefined for first render */} + {!hideContent && selectedTab && ( +
+ {selectedTab.contentTmp} +
+ )} +
+ + ); +}; + +Tabs.displayName = 'Tabs'; +export default Tabs; diff --git a/packages/react/tabs/vite.config.ts b/packages/react/tabs/vite.config.ts index 3a50e1ed..0cf27993 100644 --- a/packages/react/tabs/vite.config.ts +++ b/packages/react/tabs/vite.config.ts @@ -3,6 +3,7 @@ import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; import react from '@vitejs/plugin-react-swc'; import * as path from 'path'; import copy from 'rollup-plugin-copy'; +import peerDepsExternal from 'rollup-plugin-peer-deps-external'; import { defineConfig } from 'vite'; import dts from 'vite-plugin-dts'; @@ -11,10 +12,12 @@ import { getExternalPackages } from '../../../tools/scripts/get-external-package export default defineConfig({ root: __dirname, cacheDir: '../../../node_modules/.vite/packages/react/tabs', + assetsInclude: path.join(__dirname, 'README.md'), plugins: [ react(), nxViteTsPaths(), + peerDepsExternal(), dts({ entryRoot: 'src', tsconfigPath: path.join(__dirname, 'tsconfig.lib.json'), diff --git a/packages/react/utils/src/index.ts b/packages/react/utils/src/index.ts index 9ee15c02..7a6cf131 100644 --- a/packages/react/utils/src/index.ts +++ b/packages/react/utils/src/index.ts @@ -1,3 +1,4 @@ +export * from './lib/feature-store'; export * from './lib/component-store'; export * from './lib/use-effect-after-mount'; export * from './lib/use-static-text'; diff --git a/packages/react/utils/src/lib/component-store.ts b/packages/react/utils/src/lib/component-store.ts index 9cb63375..c297ae33 100644 --- a/packages/react/utils/src/lib/component-store.ts +++ b/packages/react/utils/src/lib/component-store.ts @@ -1,5 +1,7 @@ /** @module _hidden */ -import { useLayoutEffect, useRef, useState } from 'react'; +import { useRef, useState } from 'react'; + +import { useImmediatelyEffect } from './use-immediately-effect'; export type ComponentStoreSelector = (state: T) => U; @@ -30,7 +32,7 @@ export function createComponentStore(initialState: T) { const [selectedState, setSelectedState] = useState(() => selector(state)); const selectedStateRef = useRef(selectedState); - useLayoutEffect(() => { + useImmediatelyEffect(() => { const listener = (newState: T) => { const newSelectedState = selector(newState); diff --git a/packages/react/utils/src/lib/feature-store.ts b/packages/react/utils/src/lib/feature-store.ts new file mode 100644 index 00000000..0e9f1079 --- /dev/null +++ b/packages/react/utils/src/lib/feature-store.ts @@ -0,0 +1,25 @@ +import { createContext, useContext, useRef } from 'react'; + +import { ClassRef } from '@cocokits/common-utils'; + +export function createFeatureStore(featureStoreRef: T) { + const Context = createContext | null>(null); + const useFeatureStore = () => useContext(Context); + const useCreateFeatureStore = (...config: ConstructorParameters) => { + const storeRef = useRef<{ + StoreProvider: typeof Context.Provider; + store: InstanceType; + }>(); + + if (!storeRef.current) { + storeRef.current = { + StoreProvider: Context.Provider, + store: new featureStoreRef(...config), + }; + } + + return storeRef.current; + }; + + return { useFeatureStore, useCreateFeatureStore }; +} diff --git a/packages/themes/cocokits/src/lib/theme-config.ts b/packages/themes/cocokits/src/lib/theme-config.ts index 081944b4..de63300a 100644 --- a/packages/themes/cocokits/src/lib/theme-config.ts +++ b/packages/themes/cocokits/src/lib/theme-config.ts @@ -343,6 +343,8 @@ const components: ThemeComponentConfigRecord = { }, accordionHeader: {}, accordionPanel: {}, + tabs: {}, + tab: {}, }; export const cocokitsThemeConfig: ThemeConfig = { diff --git a/packages/themes/cocokits/src/styles/scss/_all.scss b/packages/themes/cocokits/src/styles/scss/_all.scss index 9d657d99..63ab9784 100644 --- a/packages/themes/cocokits/src/styles/scss/_all.scss +++ b/packages/themes/cocokits/src/styles/scss/_all.scss @@ -31,6 +31,8 @@ @use './accordion' as *; @use './accordion-header' as *; @use './accordion-panel' as *; +@use './tabs' as *; +@use './tab' as *; @mixin all { @include button; @@ -66,4 +68,6 @@ @include accordion; @include accordion-header; @include accordion-panel; + @include tabs; + @include tab; } diff --git a/packages/themes/cocokits/src/styles/scss/_index.scss b/packages/themes/cocokits/src/styles/scss/_index.scss index 3ce996d9..eda86477 100644 --- a/packages/themes/cocokits/src/styles/scss/_index.scss +++ b/packages/themes/cocokits/src/styles/scss/_index.scss @@ -32,3 +32,5 @@ @forward './accordion' as components_*; @forward './accordion-header' as components_*; @forward './accordion-panel' as components_*; +@forward './tabs' as components_*; +@forward './tab' as components_*; diff --git a/packages/themes/cocokits/src/styles/scss/_tab.scss b/packages/themes/cocokits/src/styles/scss/_tab.scss new file mode 100644 index 00000000..f9ce1a24 --- /dev/null +++ b/packages/themes/cocokits/src/styles/scss/_tab.scss @@ -0,0 +1,7 @@ +@use '../../token/scss' as *; + +@mixin tab { + .cck-tab { + opacity: 1; + } +} diff --git a/packages/themes/cocokits/src/styles/scss/_tabs.scss b/packages/themes/cocokits/src/styles/scss/_tabs.scss new file mode 100644 index 00000000..723aba8c --- /dev/null +++ b/packages/themes/cocokits/src/styles/scss/_tabs.scss @@ -0,0 +1,7 @@ +@use '../../token/scss' as *; + +@mixin tabs { + .cck-tabs { + opacity: 1; + } +} diff --git a/packages/themes/frames-x/src/lib/theme-config.ts b/packages/themes/frames-x/src/lib/theme-config.ts index 31890883..953ed496 100644 --- a/packages/themes/frames-x/src/lib/theme-config.ts +++ b/packages/themes/frames-x/src/lib/theme-config.ts @@ -259,6 +259,21 @@ const components: ThemeComponentConfigRecord = { }, accordionHeader: {}, accordionPanel: {}, + tabs: { + type: { + name: 'type', + values: ['fill', 'line', 'toggle'], + default: 'fill', + description: '', + }, + size: { + name: 'size', + values: ['sm', 'md', 'lg'], + default: 'md', + description: '', + }, + }, + tab: {}, }; export const framesXThemeConfig: ThemeConfig = { diff --git a/packages/themes/frames-x/src/styles/scss/_all.scss b/packages/themes/frames-x/src/styles/scss/_all.scss index 9d657d99..63ab9784 100644 --- a/packages/themes/frames-x/src/styles/scss/_all.scss +++ b/packages/themes/frames-x/src/styles/scss/_all.scss @@ -31,6 +31,8 @@ @use './accordion' as *; @use './accordion-header' as *; @use './accordion-panel' as *; +@use './tabs' as *; +@use './tab' as *; @mixin all { @include button; @@ -66,4 +68,6 @@ @include accordion; @include accordion-header; @include accordion-panel; + @include tabs; + @include tab; } diff --git a/packages/themes/frames-x/src/styles/scss/_index.scss b/packages/themes/frames-x/src/styles/scss/_index.scss index 3ce996d9..eda86477 100644 --- a/packages/themes/frames-x/src/styles/scss/_index.scss +++ b/packages/themes/frames-x/src/styles/scss/_index.scss @@ -32,3 +32,5 @@ @forward './accordion' as components_*; @forward './accordion-header' as components_*; @forward './accordion-panel' as components_*; +@forward './tabs' as components_*; +@forward './tab' as components_*; diff --git a/packages/themes/frames-x/src/styles/scss/_tab.scss b/packages/themes/frames-x/src/styles/scss/_tab.scss new file mode 100644 index 00000000..7366cf87 --- /dev/null +++ b/packages/themes/frames-x/src/styles/scss/_tab.scss @@ -0,0 +1,126 @@ +@use '../../token/scss' as *; +@use './selector-names/_tabs-selector-names' as S; + +@mixin tab { + #{S.$tab} { + display: flex; + background: transparent; + border: none; + outline: none; + color: $text-dark-tertiary; + align-items: center; + justify-content: center; + white-space: nowrap; + cursor: pointer; + position: relative; + + & #{S.$svgIcon} { + color: currentcolor; + fill: currentcolor; + } + } + + #{S.$label} { + // Without relative and zIndex 1, the indicator will be at top of the prevues element + position: relative; + z-index: 1; + } + + #{S.$unselected}:not(#{S.$disabled}):focus-visible { + outline: 2px solid $state-brand-selected; + } + + #{S.$selected} { + color: $text-dark-primary; + } + + #{S.$disabled} { + color: $base-disabled; + cursor: not-allowed; + } + + #{S.$indicator} { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 0; + } + + #{S.$alignStretch} { + #{S.$tab} { + flex: 1; + } + } + + #{S.$toggle} { + #{S.$tab} { + border-radius: $radi-5; + } + + #{S.$unselected}:not(#{S.$disabled}):hover { + background-color: $base-fill-2; + } + + #{S.$indicator} { + border-radius: $radi-5; + background-color: $base-surface-1; + border: 1px solid $base-border; + } + } + + #{S.$fill} { + #{S.$tab} { + border-radius: $radi-6; + } + + #{S.$indicator} { + border-radius: $radi-5; + background-color: $base-surface-2; + border: 2px solid $state-brand-selected; + } + } + + #{S.$line} { + #{S.$indicator} { + border-bottom: $stroke-lg solid $state-brand-selected; + } + } + + #{S.$sm} { + #{S.$tab} { + font: $text-sm-font-medium; + padding: 0 $spacing-7; + height: 36px; + + &#{S.$selected} { + font: $text-sm-font-semibold; + } + } + } + + #{S.$md} { + #{S.$tab} { + font: $text-base-font-medium; + padding: 0 $spacing-8; + height: 44px; + + &#{S.$selected} { + font: $text-base-font-semibold; + } + } + } + + #{S.$lg} { + #{S.$tab} { + font: $text-lg-font-medium; + padding: 0 $spacing-9; + height: 56px; + + &#{S.$selected} { + font: $text-lg-font-semibold; + } + } + } +} diff --git a/packages/themes/frames-x/src/styles/scss/_tabs.scss b/packages/themes/frames-x/src/styles/scss/_tabs.scss new file mode 100644 index 00000000..d5928951 --- /dev/null +++ b/packages/themes/frames-x/src/styles/scss/_tabs.scss @@ -0,0 +1,72 @@ +@use '../../token/scss' as *; +@use './selector-names/_tabs-selector-names' as S; + +@mixin tabs { + #{S.$tabs} { + display: flex; + flex-direction: column; + gap: 12px; + } + + #{S.$headerWrapper} { + display: flex; + justify-content: center; + gap: $spacing-2; + flex-wrap: wrap; + } + + #{S.$alignLeft} { + #{S.$headerWrapper} { + align-self: flex-start; + align-items: flex-start; + justify-content: flex-start; + } + } + #{S.$alignCenter} { + #{S.$headerWrapper} { + align-self: center; + align-items: center; + justify-content: center; + } + } + #{S.$alignRight} { + #{S.$headerWrapper} { + align-self: flex-end; + align-items: flex-end; + justify-content: flex-end; + } + } + #{S.$alignStretch} { + #{S.$headerWrapper} { + align-self: stretch; + align-items: stretch; + justify-content: stretch; + } + } + + #{S.$toggle} { + #{S.$headerWrapper} { + padding: $spacing-2; + border-radius: $radi-6; + background-color: $base-fill-1; + } + } + + #{S.$sm} { + #{S.$headerWrapper} { + min-height: 36px; + } + } + + #{S.$md} { + #{S.$headerWrapper} { + min-height: 44px; + } + } + + #{S.$lg} { + #{S.$headerWrapper} { + min-height: 56px; + } + } +} diff --git a/packages/themes/frames-x/src/styles/scss/selector-names/_tabs-selector-names.scss b/packages/themes/frames-x/src/styles/scss/selector-names/_tabs-selector-names.scss new file mode 100644 index 00000000..c2cd6bca --- /dev/null +++ b/packages/themes/frames-x/src/styles/scss/selector-names/_tabs-selector-names.scss @@ -0,0 +1,21 @@ +$fill: '.cck-tabs__fill'; +$line: '.cck-tabs__line'; +$toggle: '.cck-tabs__toggle'; +$sm: '.cck-tabs__size--sm'; +$md: '.cck-tabs__size--md'; +$lg: '.cck-tabs__size--lg'; +$tabs: '.cck-tabs'; +$headerWrapper: '.cck-tabs__headers-wrapper'; +$contentWrapper: '.cck-tabs__content-wrapper'; +$tab: '.cck-tab'; +$label: '.cck-tab__label'; +$indicator: '.cck-tab__indicator'; +$content: '.cck-tab__content'; +$selected: '.cck-tab--selected'; +$unselected: '.cck-tab--unselected'; +$disabled: '.cck-tab--disabled'; +$alignLeft: '.cck-tabs--align-left'; +$alignCenter: '.cck-tabs--align-center'; +$alignRight: '.cck-tabs--align-right'; +$alignStretch: '.cck-tabs--align-stretch'; +$svgIcon: '.cck-svg-icon.cck-svg-icon--default-color'; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d1d2a508..a7b38d12 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1324,9 +1324,6 @@ importers: '@cocokits/react-radio': specifier: workspace:* version: link:../../../dist/packages/react/radio - '@cocokits/react-tabs': - specifier: workspace:* - version: link:../../../dist/packages/react/tabs '@cocokits/react-toggle': specifier: workspace:* version: link:../../../dist/packages/react/toggle diff --git a/project.json b/project.json index 719ccfa4..298d94fd 100644 --- a/project.json +++ b/project.json @@ -34,14 +34,14 @@ "build-all": { "executor": "nx:run-commands", "options": { - "commands": ["nx run-many --target=build --parallel --maxParallel=4"], + "commands": ["nx run-many --target=build --parallel --maxParallel=4 --exclude=website"], "parallel": false } }, "test-all": { "executor": "nx:run-commands", "options": { - "command": "nx run-many --all --target=test --parallel --maxParallel=4 -- --passWithNoTests" + "command": "nx run-many --all --target=test --parallel --maxParallel=4 --exclude=website -- --passWithNoTests" } }, "local-registry": { diff --git a/tools/workspace-plugin/src/generators/component/files/react-component/__fileName__.tsx.template b/tools/workspace-plugin/src/generators/component/files/react-component/__fileName__.tsx.template index 8d709a92..93ca7770 100644 --- a/tools/workspace-plugin/src/generators/component/files/react-component/__fileName__.tsx.template +++ b/tools/workspace-plugin/src/generators/component/files/react-component/__fileName__.tsx.template @@ -1,26 +1,39 @@ -import React, { forwardRef } from "react"; +import { CSSProperties, ReactNode } from "react"; import { UIBaseComponentProps } from "@cocokits/core"; import { useUiBaseComponentConfig } from "@cocokits/react-core"; -export interface <%= className %>Props extends Omit, 'color' | 'type'>, UIBaseComponentProps { - children?: React.ReactNode; +export interface <%= className %>Props extends UIBaseComponentProps { + /** + * *************** TODO ************* + * The content inside the component. + * This can be a string, a number, an element, or an array of elements. + * It allows rendering nested components within this component. + */ + children?: ReactNode | ReactNode[]; + /** + * A custom class name that can be used to apply additional styles to the component. + */ + className?: string; + /** + * An object containing inline styles that can be used to customize the appearance of the component. + */ + style?: CSSProperties; } -export const <%= className %> = forwardRefProps>( - ({ type, size, color, additional, children, ...restProps }, ref) => { - const { classNames, hostClassNames } = useUiBaseComponentConfig({ - componentName: "<%= propertyName %>", - props: { type, size, color, additional }, - }); +export const <%= className %> = (props: <%= className %>Props) => { + const { classNames, hostClassNames } = useUiBaseComponentConfig({ + componentName: "<%= propertyName %>", + props, + extraHostElementClassConditions: [{ if: !!props.className, classes: () => [props.className] }], + }); - return ( -
- {children} -
- ); - } -); + return ( +
+ {props.children} +
+ ); +} <%= className %>.displayName = '<%= className %>'; export default <%= className %>; diff --git a/tools/workspace-plugin/src/generators/ui-core-component/schema.json b/tools/workspace-plugin/src/generators/ui-core-component/schema.json index 7be5fcee..baccf3f0 100644 --- a/tools/workspace-plugin/src/generators/ui-core-component/schema.json +++ b/tools/workspace-plugin/src/generators/ui-core-component/schema.json @@ -22,7 +22,8 @@ "Overlay", "Radio", "Toggle", - "Accordion" + "Accordion", + "Tabs" ] }, "newLibraryName": { diff --git a/tools/workspace-plugin/src/generators/ui-core-component/utils/generate-library.ts b/tools/workspace-plugin/src/generators/ui-core-component/utils/generate-library.ts index adb0ca45..8eb071ad 100644 --- a/tools/workspace-plugin/src/generators/ui-core-component/utils/generate-library.ts +++ b/tools/workspace-plugin/src/generators/ui-core-component/utils/generate-library.ts @@ -11,8 +11,8 @@ export async function generateLibrary(options: UiCoreComponentGeneratorOptions) type: LibraryType.UI, framework: LibraryFramework.Angular, storybook: false, - directory: `/packages/angular`, - directoryFormat: GeneratorDirectoryFormat.Root, + directory: `packages/angular`, + directoryFormat: GeneratorDirectoryFormat.AsProvided, publishable: true, importPath: `@cocokits/angular-${options.libraryName.fileName}`, formatFiles: false, @@ -27,8 +27,8 @@ export async function generateLibrary(options: UiCoreComponentGeneratorOptions) type: LibraryType.UI, framework: LibraryFramework.React, storybook: false, - directory: `/packages/react`, - directoryFormat: GeneratorDirectoryFormat.Root, + directory: `packages/react`, + directoryFormat: GeneratorDirectoryFormat.AsProvided, publishable: true, importPath: `@cocokits/react-${options.libraryName.fileName}`, formatFiles: false, diff --git a/tsconfig.base.json b/tsconfig.base.json index f9037527..09779d1e 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -33,6 +33,7 @@ "@cocokits/angular-menu": ["packages/angular/menu/src/index.ts"], "@cocokits/angular-overlay": ["packages/angular/overlay/src/index.ts"], "@cocokits/angular-radio": ["packages/angular/radio/src/index.ts"], + "@cocokits/angular-tabs": ["packages/angular/tabs/src/index.ts"], "@cocokits/angular-toggle": ["packages/angular/toggle/src/index.ts"], "@cocokits/angular-utils": ["packages/angular/utils/src/index.ts"], "@cocokits/common-icons": ["packages/common/icons/src/index.ts"], diff --git a/tsconfig.storybook-manager-paths.json b/tsconfig.storybook-manager-paths.json index 11cf23bf..6626e7aa 100644 --- a/tsconfig.storybook-manager-paths.json +++ b/tsconfig.storybook-manager-paths.json @@ -218,12 +218,6 @@ "../../packages/react/toggle/src/", "../../../packages/react/toggle/src/" ], - "@cocokits/react-tabs": [ - "packages/react/tabs/src/", - "../packages/react/tabs/src/", - "../../packages/react/tabs/src/", - "../../../packages/react/tabs/src/" - ], "@cocokits/angular-avatar": [ "packages/angular/avatar/src/", "../packages/angular/avatar/src/", @@ -247,6 +241,18 @@ "../packages/react/accordion/src/", "../../packages/react/accordion/src/", "../../../packages/react/accordion/src/" + ], + "@cocokits/angular-tabs": [ + "packages/angular/tabs/src/", + "../packages/angular/tabs/src/", + "../../packages/angular/tabs/src/", + "../../../packages/angular/tabs/src/" + ], + "@cocokits/react-tabs": [ + "packages/react/tabs/src/", + "../packages/react/tabs/src/", + "../../packages/react/tabs/src/", + "../../../packages/react/tabs/src/" ] } }