diff --git a/.changeset/badge-storybook-addon.md b/.changeset/badge-storybook-addon.md new file mode 100644 index 00000000..e69de29b diff --git a/.changeset/fine-seals-care.md b/.changeset/fine-seals-care.md new file mode 100644 index 00000000..36504911 --- /dev/null +++ b/.changeset/fine-seals-care.md @@ -0,0 +1,7 @@ +--- +'@cocokits/react-components': minor +'@cocokits/core': minor +'@cocokits/react-badge': minor +--- + +Add Badge Library with badge and badge-container components diff --git a/.changeset/funny-jobs-dream.md b/.changeset/funny-jobs-dream.md new file mode 100644 index 00000000..97677355 --- /dev/null +++ b/.changeset/funny-jobs-dream.md @@ -0,0 +1,5 @@ +--- +'@cocokits/theme-cocokits': major +--- + +Fix icon button colors diff --git a/.changeset/ripe-badgers-give.md b/.changeset/ripe-badgers-give.md new file mode 100644 index 00000000..b45ce51f --- /dev/null +++ b/.changeset/ripe-badgers-give.md @@ -0,0 +1,6 @@ +--- +'@cocokits/angular-avatar': major +'@cocokits/react-avatar': major +--- + +Fix avatar label position and default values diff --git a/.changeset/twenty-turkeys-start.md b/.changeset/twenty-turkeys-start.md new file mode 100644 index 00000000..1e658209 --- /dev/null +++ b/.changeset/twenty-turkeys-start.md @@ -0,0 +1,6 @@ +--- +'@cocokits/theme-cocokits': minor +'@cocokits/theme-frames-x': minor +--- + +Add styles for badge library diff --git a/.changeset/yummy-emus-refuse.md b/.changeset/yummy-emus-refuse.md new file mode 100644 index 00000000..2bc3bd85 --- /dev/null +++ b/.changeset/yummy-emus-refuse.md @@ -0,0 +1,7 @@ +--- +'@cocokits/angular-components': minor +'@cocokits/angular-badge': minor +'@cocokits/core': minor +--- + +Add Badge Library with badge and badge-container components 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 7810b230..26d2bcbe 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 @@ -169,6 +169,8 @@ export function getMergeThemesStep3Scss() { @include Cocokits.components_accordion_panel; @include Cocokits.components_tabs; @include Cocokits.components_tab; +@include Cocokits.components_badge; +@include Cocokits.components_badge_container; `); } diff --git a/apps/angular-kits-doc/stories/ui-components/accordion/accordion/index.stories.ts b/apps/angular-kits-doc/stories/ui-components/accordion/accordion/index.stories.ts index 7db071fd..4717f774 100644 --- a/apps/angular-kits-doc/stories/ui-components/accordion/accordion/index.stories.ts +++ b/apps/angular-kits-doc/stories/ui-components/accordion/accordion/index.stories.ts @@ -25,7 +25,6 @@ export { Control } from './overview/control.stories'; const meta: StoriesMeta = { component: AccordionComponent, title: 'UI Components/Accordion', - tags: ['status:new'], subcomponents: [AccordionPanelComponent, AccordionHeaderComponent], decorators: [ withWrapperDecorator({ insideBox: true }, { width: '400px' }), diff --git a/apps/angular-kits-doc/stories/ui-components/avatar/avatar-group/index.stories.ts b/apps/angular-kits-doc/stories/ui-components/avatar/avatar-group/index.stories.ts index 40a7e310..b931f22d 100644 --- a/apps/angular-kits-doc/stories/ui-components/avatar/avatar-group/index.stories.ts +++ b/apps/angular-kits-doc/stories/ui-components/avatar/avatar-group/index.stories.ts @@ -13,7 +13,6 @@ export { Color } from './overview/color.stories'; const meta: StoriesMeta = { component: AvatarGroupComponent, title: 'UI Components/AvatarGroup', - tags: ['status:new'], decorators: [ applicationConfig({ providers: [withThemeConfigProvider()], diff --git a/apps/angular-kits-doc/stories/ui-components/avatar/avatar-label/index.stories.ts b/apps/angular-kits-doc/stories/ui-components/avatar/avatar-label/index.stories.ts index 55426416..72f7c4a6 100644 --- a/apps/angular-kits-doc/stories/ui-components/avatar/avatar-label/index.stories.ts +++ b/apps/angular-kits-doc/stories/ui-components/avatar/avatar-label/index.stories.ts @@ -13,7 +13,6 @@ export { Color } from './overview/color.stories'; const meta: StoriesMeta = { component: AvatarLabelComponent, title: 'UI Components/AvatarLabel', - tags: ['status:new'], decorators: [ withWrapperDecorator({ insideBox: true }), applicationConfig({ diff --git a/apps/angular-kits-doc/stories/ui-components/avatar/avatar/index.stories.ts b/apps/angular-kits-doc/stories/ui-components/avatar/avatar/index.stories.ts index a8559872..690d3212 100644 --- a/apps/angular-kits-doc/stories/ui-components/avatar/avatar/index.stories.ts +++ b/apps/angular-kits-doc/stories/ui-components/avatar/avatar/index.stories.ts @@ -12,7 +12,6 @@ export { CustomTemplate } from './overview/custom-content.stories'; const meta: StoriesMeta = { component: AvatarComponent, title: 'UI Components/Avatar', - tags: ['status:new'], decorators: [ applicationConfig({ providers: [withThemeConfigProvider()], diff --git a/apps/angular-kits-doc/stories/ui-components/badge/badge-container/description.md b/apps/angular-kits-doc/stories/ui-components/badge/badge-container/description.md new file mode 100644 index 00000000..8bffbabc --- /dev/null +++ b/apps/angular-kits-doc/stories/ui-components/badge/badge-container/description.md @@ -0,0 +1,5 @@ +Manages badge placement relative to target elements. Provides precise offset control without affecting layout. This component is perfect for positioning badges on buttons, icons, or other UI elements. + +#### Features: +- **Position Presets:** Positions badge at corners: top-left, top-right, bottom-left, bottom-right +- **Flexible Integration:** Works with any content element that needs badge indicators \ No newline at end of file diff --git a/apps/angular-kits-doc/stories/ui-components/badge/badge-container/index.stories.ts b/apps/angular-kits-doc/stories/ui-components/badge/badge-container/index.stories.ts new file mode 100644 index 00000000..7d975786 --- /dev/null +++ b/apps/angular-kits-doc/stories/ui-components/badge/badge-container/index.stories.ts @@ -0,0 +1,46 @@ +import { applicationConfig, moduleMetadata } from '@storybook/angular'; + +import { BadgeComponent, BadgeContainerComponent } from '@cocokits/angular-badge'; +import { ngArgType, StoriesMeta, withThemeConfigProvider } 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 { Position } from './overview/position.stories'; +export { Integration } from './overview/integration.stories'; + +const meta: StoriesMeta = { + component: BadgeContainerComponent, + title: 'UI Components/BadgeContainer', + decorators: [ + applicationConfig({ + providers: [withThemeConfigProvider()], + }), + moduleMetadata({ + imports: [BadgeComponent], + }), + ], + parameters: { + docs: { + description: { + component: [descriptionMd].join('\n'), + }, + }, + cckAddon: { + componentName: 'badgeContainer', + }, + }, + argTypes: { + ...ngArgType({ + name: 'position', + type: "'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'", + defaultValue: 'top-right', + }), + ...ngArgType({ name: 'offset', type: '[string, string]', defaultValue: '' }), + ...ngArgType({ name: 'radius', type: 'string', defaultValue: '0px' }), + }, +}; +export default meta; diff --git a/apps/angular-kits-doc/stories/ui-components/badge/badge-container/overview/color.stories.ts b/apps/angular-kits-doc/stories/ui-components/badge/badge-container/overview/color.stories.ts new file mode 100644 index 00000000..7583bec5 --- /dev/null +++ b/apps/angular-kits-doc/stories/ui-components/badge/badge-container/overview/color.stories.ts @@ -0,0 +1,61 @@ +import { BadgeContainerComponent } from '@cocokits/angular-badge'; +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 %>' + > +
+ + + <% }) %> + `, + }, + ], + 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/badge/badge-container/overview/default.stories.ts b/apps/angular-kits-doc/stories/ui-components/badge/badge-container/overview/default.stories.ts new file mode 100644 index 00000000..a00ca970 --- /dev/null +++ b/apps/angular-kits-doc/stories/ui-components/badge/badge-container/overview/default.stories.ts @@ -0,0 +1,101 @@ +import { BadgeContainerComponent } from '@cocokits/angular-badge'; +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 %>' <% } %> + position="<%= position %>" + <% if (offsetX && offsetX !== '' && offsetY && offsetY !== '') { %> [offset]="['<%= offsetX %>', '<%= offsetY %>']" <% } %> + <% if (radius !== '') { %> radius="<%= radius %>" <% } %> + > + + +
[style.border-radius]="'<%= radius %>'" <% } %> + >
+ + type='<%= badgeType %>' <% } %> + <% if (typeof badgeSize !== 'undefined') { %> size='<%= badgeSize %>' <% } %> + <% if (typeof badgeColor !== 'undefined') { %> color='<%= badgeColor %>' <% } %> + <% if (max > 0) { %> [max]="<%= max %>" <% } %> + <% if (content !== '') { %> [content]="'<%= content %>'" <% } %> + <% if (hide) { %> [hide]="<%= hide %>" <% } %> + /> + + `, + }, + ], + hasControl: true, + controls: [ + CCK_CONTROL.type(), + CCK_CONTROL.size(), + CCK_CONTROL.color(), + CCK_CONTROL.additional(), + CCK_CONTROL.type('badge'), + CCK_CONTROL.size('badge'), + CCK_CONTROL.color('badge'), + CCK_CONTROL.customSelect('position', ['top-left', 'top-right', 'bottom-left', 'bottom-right'], 'top-right'), + CCK_CONTROL.customText('Content', '2'), + CCK_CONTROL.customNumber('Max', 10), + CCK_CONTROL.customText('Radius', '12px'), + CCK_CONTROL.customText('OffsetX', undefined), + CCK_CONTROL.customText('OffsetY', undefined), + CCK_CONTROL.customBoolean('Hide', false), + ], + }, + }, + render: (args) => { + return { + props: { + ...args, + }, + template: ` + +
+ + + `, + }; + }, +}; diff --git a/apps/angular-kits-doc/stories/ui-components/badge/badge-container/overview/integration.stories.ts b/apps/angular-kits-doc/stories/ui-components/badge/badge-container/overview/integration.stories.ts new file mode 100644 index 00000000..574cbd50 --- /dev/null +++ b/apps/angular-kits-doc/stories/ui-components/badge/badge-container/overview/integration.stories.ts @@ -0,0 +1,91 @@ +import { moduleMetadata } from '@storybook/angular'; + +import { AvatarComponent, AvatarLabelComponent } from '@cocokits/angular-avatar'; +import { BadgeContainerComponent } from '@cocokits/angular-badge'; +import { IconButtonComponent } from '@cocokits/angular-button'; +import { SvgIconComponent } from '@cocokits/angular-icon'; +import { CCK_CONTROL, renderWithPageTab } from '@cocokits/storybook-addon-theme'; +import { StoryObj, withWrapperDecorator } from '@cocokits/storybook-addon-theme-angular'; + +export const Integration: StoryObj = { + name: 'Integration', + decorators: [ + withWrapperDecorator({ insideBox: true }), + moduleMetadata({ + imports: [IconButtonComponent, SvgIconComponent, AvatarComponent, AvatarLabelComponent], + }), + ], + parameters: { + docs: { + description: { + story: 'Badges attached to interactive components.', + }, + }, + cckAddon: { + renderConditions: [renderWithPageTab('Overview')], + singleControls: ['type'], + source: [ + { + filename: 'example.component.html', + language: 'angular-html', + code: ` + + + type='<%= type %>'<% } %> content="2"/> + + + + + type='<%= type %>'<% } %> content="2"/> + + + + + type='<%= type %>'<% } %>/> + + + + + + type='<%= type %>'<% } %>/> + + + `, + }, + ], + controls: [CCK_CONTROL.type()], + }, + }, + render: (args) => ({ + props: { + ...args, + }, + template: ` + + + + + + + + + + + + + + + + + + + + + + `, + }), +}; diff --git a/apps/angular-kits-doc/stories/ui-components/badge/badge-container/overview/position.stories.ts b/apps/angular-kits-doc/stories/ui-components/badge/badge-container/overview/position.stories.ts new file mode 100644 index 00000000..d274f3cd --- /dev/null +++ b/apps/angular-kits-doc/stories/ui-components/badge/badge-container/overview/position.stories.ts @@ -0,0 +1,64 @@ +import { BadgeContainerComponent } from '@cocokits/angular-badge'; +import { CCK_CONTROL, renderWithPageTab } from '@cocokits/storybook-addon-theme'; +import { StoryObj } from '@cocokits/storybook-addon-theme-angular'; + +export const Position: StoryObj = { + name: 'Position', + parameters: { + docs: { + description: { + story: + 'The position of the badge can be adjusted to suit different design needs and screen dimensions, improving both aesthetics and usability.', + }, + }, + cckAddon: { + renderConditions: [renderWithPageTab('Overview')], + singleControls: ['type'], + source: [ + { + filename: 'example.component.html', + language: 'angular-html', + code: ` + <% ['top-left', 'top-right', 'bottom-left', 'bottom-right'].map(position => { %> + + + type='<%= type %>'<% } %> + position='<%= position %>' + > +
+ + + <% }) %> + `, + }, + ], + controls: [CCK_CONTROL.type()], + }, + }, + render: (args) => ({ + props: { + ...args, + }, + template: ` + @for (position of ['top-left', 'top-right', 'bottom-left', 'bottom-right']; let col = $index; track position) { + +
+ + + } + `, + }), +}; diff --git a/apps/angular-kits-doc/stories/ui-components/badge/badge-container/overview/size.stories.ts b/apps/angular-kits-doc/stories/ui-components/badge/badge-container/overview/size.stories.ts new file mode 100644 index 00000000..95eea2e3 --- /dev/null +++ b/apps/angular-kits-doc/stories/ui-components/badge/badge-container/overview/size.stories.ts @@ -0,0 +1,62 @@ +import { BadgeContainerComponent } from '@cocokits/angular-badge'; +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 %>' + > +
+ + + <% }) %> + `, + }, + ], + 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/badge/badge-container/overview/type.stories.ts b/apps/angular-kits-doc/stories/ui-components/badge/badge-container/overview/type.stories.ts new file mode 100644 index 00000000..15e698b2 --- /dev/null +++ b/apps/angular-kits-doc/stories/ui-components/badge/badge-container/overview/type.stories.ts @@ -0,0 +1,59 @@ +import { BadgeContainerComponent } from '@cocokits/angular-badge'; +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 Badge 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/angular-kits-doc/stories/ui-components/badge/badge/description.md b/apps/angular-kits-doc/stories/ui-components/badge/badge/description.md new file mode 100644 index 00000000..e71d08b4 --- /dev/null +++ b/apps/angular-kits-doc/stories/ui-components/badge/badge/description.md @@ -0,0 +1,8 @@ +Displays numeric/text notifications or status dots. Handles content truncation, zero-state behavior, and conditional visibility. This component is ideal for notification counters, status indicators, and other visual cues. + +#### Features: +- **Content Truncation:** Converts numbers above limit to {max}+ (e.g., 100 → 99+) +- **Zero-State Handling:** Automatically renders dot when value is 0, null, or undefined +- **Conditional Visibility:** Completely hides badge when true (overrides content) +- **Layout Independence:** Badge positioning doesn't affect the layout of other elements +- **Design System Ready:** Adapts to theme-specific sizing and colors \ No newline at end of file diff --git a/apps/angular-kits-doc/stories/ui-components/badge/badge/index.stories.ts b/apps/angular-kits-doc/stories/ui-components/badge/badge/index.stories.ts new file mode 100644 index 00000000..4d9a93b6 --- /dev/null +++ b/apps/angular-kits-doc/stories/ui-components/badge/badge/index.stories.ts @@ -0,0 +1,49 @@ +import { applicationConfig, moduleMetadata } from '@storybook/angular'; + +import { BadgeComponent } from '@cocokits/angular-badge'; +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 { MaxIndicator } from './overview/max-indicator.stories'; +export { DynamicContent } from './overview/dynamic-content.stories'; +export { Integration } from './overview/integration.stories'; + +const meta: StoriesMeta = { + component: BadgeComponent, + title: 'UI Components/Badge', + decorators: [ + withWrapperDecorator({ insideBox: true }), + applicationConfig({ + providers: [withThemeConfigProvider()], + }), + moduleMetadata({ + imports: [], + }), + ], + parameters: { + docs: { + description: { + component: [descriptionMd].join('\n'), + }, + }, + cckAddon: { + componentName: 'badge', + }, + }, + argTypes: { + ...ngArgType({ name: 'content', type: 'number | string | undefined | null', defaultValue: '' }), + ...ngArgType({ name: 'max', type: 'number' }), + ...ngArgType({ name: 'hide', type: 'boolean', defaultValue: 'false' }), + }, +}; +export default meta; diff --git a/apps/angular-kits-doc/stories/ui-components/badge/badge/overview/color.stories.ts b/apps/angular-kits-doc/stories/ui-components/badge/badge/overview/color.stories.ts new file mode 100644 index 00000000..43129b3f --- /dev/null +++ b/apps/angular-kits-doc/stories/ui-components/badge/badge/overview/color.stories.ts @@ -0,0 +1,44 @@ +import { BadgeComponent } from '@cocokits/angular-badge'; +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 %>' + content="5" + /> + <% }) %> + `, + }, + ], + 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/badge/badge/overview/default.stories.ts b/apps/angular-kits-doc/stories/ui-components/badge/badge/overview/default.stories.ts new file mode 100644 index 00000000..d9a5f8ce --- /dev/null +++ b/apps/angular-kits-doc/stories/ui-components/badge/badge/overview/default.stories.ts @@ -0,0 +1,60 @@ +import { BadgeComponent } from '@cocokits/angular-badge'; +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 %>' <% } %> + <% if (max > 0) { %> [max]="<%= max %>" <% } %> + <% if (content !== '') { %> [content]="'<%= content %>'" <% } %> + <% if (hide) { %> [hide]="<%= hide %>" <% } %> + > + + `, + }, + ], + hasControl: true, + controls: [ + CCK_CONTROL.type(), + CCK_CONTROL.size(), + CCK_CONTROL.color(), + CCK_CONTROL.additional(), + CCK_CONTROL.customText('Content', '2'), + CCK_CONTROL.customNumber('Max', 10), + CCK_CONTROL.customBoolean('Hide', false), + ], + }, + }, + render: (args) => { + return { + props: { + ...args, + }, + template: ` + + `, + }; + }, +}; diff --git a/apps/angular-kits-doc/stories/ui-components/badge/badge/overview/dynamic-content.stories.ts b/apps/angular-kits-doc/stories/ui-components/badge/badge/overview/dynamic-content.stories.ts new file mode 100644 index 00000000..3a9a7b09 --- /dev/null +++ b/apps/angular-kits-doc/stories/ui-components/badge/badge/overview/dynamic-content.stories.ts @@ -0,0 +1,42 @@ +import { BadgeComponent } from '@cocokits/angular-badge'; +import { CCK_CONTROL, renderWithPageTab } from '@cocokits/storybook-addon-theme'; +import { StoryObj } from '@cocokits/storybook-addon-theme-angular'; + +export const DynamicContent: StoryObj = { + name: 'Dynamic Content', + parameters: { + docs: { + description: { + story: 'Demonstrates text, numeric, and dot states in a single view.', + }, + }, + cckAddon: { + renderConditions: [renderWithPageTab('Overview')], + singleControls: ['type'], + source: [ + { + filename: 'example.component.html', + language: 'angular-html', + code: ` + + + + + `, + }, + ], + controls: [CCK_CONTROL.type()], + }, + }, + render: (args) => ({ + props: { + ...args, + }, + template: ` + + + + + `, + }), +}; diff --git a/apps/angular-kits-doc/stories/ui-components/badge/badge/overview/integration.stories.ts b/apps/angular-kits-doc/stories/ui-components/badge/badge/overview/integration.stories.ts new file mode 100644 index 00000000..c055aa6a --- /dev/null +++ b/apps/angular-kits-doc/stories/ui-components/badge/badge/overview/integration.stories.ts @@ -0,0 +1,107 @@ +import { moduleMetadata } from '@storybook/angular'; + +import { BadgeComponent } from '@cocokits/angular-badge'; +import { ButtonComponent } from '@cocokits/angular-button'; +import { DividerComponent } from '@cocokits/angular-divider'; +import { MenuComponent, MenuItemComponent } from '@cocokits/angular-menu'; +import { TabComponent, 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 Integration: StoryObj = { + name: 'Integration', + decorators: [ + moduleMetadata({ + imports: [ + ButtonComponent, + TabsComponent, + TabComponent, + TabHeaderTemplateDirective, + MenuComponent, + MenuItemComponent, + DividerComponent, + ], + }), + ], + parameters: { + docs: { + description: { + story: 'Badges attached to interactive components.', + }, + }, + cckAddon: { + renderConditions: [renderWithPageTab('Overview')], + singleControls: ['type'], + source: [ + { + filename: 'example.component.html', + language: 'angular-html', + code: ` + + + + + +
+ Header 1 + +
+ + + + + + + + Edit + Duplicate + + + Share + + + + `, + }, + ], + controls: [CCK_CONTROL.type()], + }, + }, + render: (args) => ({ + props: { + ...args, + }, + template: ` + + + + + +
+ Header 1 + +
+ + + + + + + + Edit + Duplicate + + + Share + + + + `, + }), +}; diff --git a/apps/angular-kits-doc/stories/ui-components/badge/badge/overview/max-indicator.stories.ts b/apps/angular-kits-doc/stories/ui-components/badge/badge/overview/max-indicator.stories.ts new file mode 100644 index 00000000..e56112e2 --- /dev/null +++ b/apps/angular-kits-doc/stories/ui-components/badge/badge/overview/max-indicator.stories.ts @@ -0,0 +1,42 @@ +import { BadgeComponent } from '@cocokits/angular-badge'; +import { CCK_CONTROL, renderWithPageTab } from '@cocokits/storybook-addon-theme'; +import { StoryObj } from '@cocokits/storybook-addon-theme-angular'; + +export const MaxIndicator: StoryObj = { + name: 'Max Indicator', + parameters: { + docs: { + description: { + story: 'Shows how numbers automatically convert to {max}+ format when exceeding the limit.', + }, + }, + cckAddon: { + renderConditions: [renderWithPageTab('Overview')], + singleControls: ['type'], + source: [ + { + filename: 'example.component.html', + language: 'angular-html', + code: ` + + + + + `, + }, + ], + controls: [CCK_CONTROL.type()], + }, + }, + render: (args) => ({ + props: { + ...args, + }, + template: ` + + + + + `, + }), +}; diff --git a/apps/angular-kits-doc/stories/ui-components/badge/badge/overview/size.stories.ts b/apps/angular-kits-doc/stories/ui-components/badge/badge/overview/size.stories.ts new file mode 100644 index 00000000..8a55db58 --- /dev/null +++ b/apps/angular-kits-doc/stories/ui-components/badge/badge/overview/size.stories.ts @@ -0,0 +1,45 @@ +import { BadgeComponent } from '@cocokits/angular-badge'; +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 %>' + content="5" + /> + <% }) %> + `, + }, + ], + 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/badge/badge/overview/type.stories.ts b/apps/angular-kits-doc/stories/ui-components/badge/badge/overview/type.stories.ts new file mode 100644 index 00000000..c85e33f0 --- /dev/null +++ b/apps/angular-kits-doc/stories/ui-components/badge/badge/overview/type.stories.ts @@ -0,0 +1,42 @@ +import { BadgeComponent } from '@cocokits/angular-badge'; +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 Badge 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/angular-kits-doc/stories/ui-components/tabs/tabs/index.stories.ts b/apps/angular-kits-doc/stories/ui-components/tabs/tabs/index.stories.ts index 14ede0c8..ca83170e 100644 --- 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 @@ -9,6 +9,7 @@ import { } from '@cocokits/storybook-addon-theme-angular'; import descriptionMd from './description.md'; +import ngTemplateMd from './ng-templates.md'; export { Default } from './overview/default.stories'; export { Type } from './overview/type.stories'; @@ -21,7 +22,6 @@ 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' }), @@ -40,6 +40,7 @@ const meta: StoriesMeta = { }, cckAddon: { componentName: 'tabs', + ngTemplateMarkdown: ngTemplateMd, subcomponents: { TabComponent: { name: 'tab', diff --git a/apps/angular-kits-doc/stories/ui-components/tabs/tabs/ng-templates.md b/apps/angular-kits-doc/stories/ui-components/tabs/tabs/ng-templates.md new file mode 100644 index 00000000..f1290620 --- /dev/null +++ b/apps/angular-kits-doc/stories/ui-components/tabs/tabs/ng-templates.md @@ -0,0 +1,52 @@ +### Custom Tab Header +Use this template to display a custom header inside the tab. This is helpful when you want full control over how the tab header looks or behaves, such as adding icons, custom styling, or conditional content based on the tab's state. + +**Selector:** `ng-template[cckTabHeader]` + +**Reference:** `TabHeaderTemplateDirective` + + +It can be defined at: + +- Under each `cck-tab`: applies only to that specific tab + + +**Context Properties:** + +| Name | Type | Description | +|------------|-----------|------------------------------------| +| `selected` | `boolean` | Whether the tab is currently selected. | + +**Usage Example:** + +```html + + + +
+ + + Dashboard + +
+ + + + + + +
+ + + Settings + +
+ + + + +``` + +For advanced examples check the overview tab + +**Important:** When this template is used, the default tab header (just the text from the `header` input) will be replaced with your custom template. The tab's click functionality and selection behavior remain unchanged. \ No newline at end of file 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 cdfd4d86..78bd26be 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 @@ -183,6 +183,8 @@ export function getMergeThemesStep3Scss() { @include Cocokits.components_accordion_panel; @include Cocokits.components_tabs; @include Cocokits.components_tab; +@include Cocokits.components_badge; +@include Cocokits.components_badge_container; `); diff --git a/apps/react-kits-doc/stories/ui-components/accordion/accordion/index.stories.tsx b/apps/react-kits-doc/stories/ui-components/accordion/accordion/index.stories.tsx index 57c416ff..ac0580b2 100644 --- a/apps/react-kits-doc/stories/ui-components/accordion/accordion/index.stories.tsx +++ b/apps/react-kits-doc/stories/ui-components/accordion/accordion/index.stories.tsx @@ -15,7 +15,6 @@ export { Control } from './overview/control.stories'; const meta: StoriesMeta = { component: Accordion, title: 'UI Components/Accordion', - tags: ['status:new'], subcomponents: { AccordionPanel, AccordionHeader diff --git a/apps/react-kits-doc/stories/ui-components/avatar/avatar-group/index.stories.tsx b/apps/react-kits-doc/stories/ui-components/avatar/avatar-group/index.stories.tsx index 4ab93603..7b354de0 100644 --- a/apps/react-kits-doc/stories/ui-components/avatar/avatar-group/index.stories.tsx +++ b/apps/react-kits-doc/stories/ui-components/avatar/avatar-group/index.stories.tsx @@ -11,7 +11,6 @@ export { Color } from './overview/color.stories'; const meta: StoriesMeta = { component: AvatarGroup, title: 'UI Components/AvatarGroup', - tags: ['status:new'], decorators: [], parameters: { docs: { diff --git a/apps/react-kits-doc/stories/ui-components/avatar/avatar-label/index.stories.tsx b/apps/react-kits-doc/stories/ui-components/avatar/avatar-label/index.stories.tsx index 2bceee0e..cd07b9e0 100644 --- a/apps/react-kits-doc/stories/ui-components/avatar/avatar-label/index.stories.tsx +++ b/apps/react-kits-doc/stories/ui-components/avatar/avatar-label/index.stories.tsx @@ -11,7 +11,6 @@ export { Color } from './overview/color.stories'; const meta: StoriesMeta = { component: AvatarLabel, title: 'UI Components/AvatarLabel', - tags: ['status:new'], decorators: [ withWrapperDecorator({ insideBox: true }), ], diff --git a/apps/react-kits-doc/stories/ui-components/avatar/avatar/index.stories.ts b/apps/react-kits-doc/stories/ui-components/avatar/avatar/index.stories.ts index 20e34328..17546b12 100644 --- a/apps/react-kits-doc/stories/ui-components/avatar/avatar/index.stories.ts +++ b/apps/react-kits-doc/stories/ui-components/avatar/avatar/index.stories.ts @@ -9,7 +9,6 @@ export { CustomTemplate } from './overview/custom-content.stories'; const meta: StoriesMeta = { component: Avatar, title: 'UI Components/Avatar', - tags: ['status:new'], decorators: [], parameters: { docs: { diff --git a/apps/react-kits-doc/stories/ui-components/badge/badge-container/description.md b/apps/react-kits-doc/stories/ui-components/badge/badge-container/description.md new file mode 100644 index 00000000..8bffbabc --- /dev/null +++ b/apps/react-kits-doc/stories/ui-components/badge/badge-container/description.md @@ -0,0 +1,5 @@ +Manages badge placement relative to target elements. Provides precise offset control without affecting layout. This component is perfect for positioning badges on buttons, icons, or other UI elements. + +#### Features: +- **Position Presets:** Positions badge at corners: top-left, top-right, bottom-left, bottom-right +- **Flexible Integration:** Works with any content element that needs badge indicators \ No newline at end of file diff --git a/apps/react-kits-doc/stories/ui-components/badge/badge-container/index.stories.tsx b/apps/react-kits-doc/stories/ui-components/badge/badge-container/index.stories.tsx new file mode 100644 index 00000000..d726a9f2 --- /dev/null +++ b/apps/react-kits-doc/stories/ui-components/badge/badge-container/index.stories.tsx @@ -0,0 +1,29 @@ +import { BadgeContainer } from '@cocokits/react-badge'; +import { StoriesMeta } 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 { Position } from './overview/position.stories'; +export { Integration } from './overview/integration.stories'; + +const meta: StoriesMeta = { + component: BadgeContainer, + title: 'UI Components/BadgeContainer', + decorators: [], + parameters: { + docs: { + description: { + component: [descriptionMd].join('\n'), + }, + }, + cckAddon: { + componentName: 'badgeContainer', + }, + }, + argTypes: {}, +}; +export default meta; diff --git a/apps/react-kits-doc/stories/ui-components/badge/badge-container/overview/color.stories.tsx b/apps/react-kits-doc/stories/ui-components/badge/badge-container/overview/color.stories.tsx new file mode 100644 index 00000000..ff862a93 --- /dev/null +++ b/apps/react-kits-doc/stories/ui-components/badge/badge-container/overview/color.stories.tsx @@ -0,0 +1,69 @@ +import { Badge, BadgeContainer } from '@cocokits/react-badge'; +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 { BadgeContainer } from "@cocokits/react-components"; + + export const MyComponent = () => { + return ( + <> + <% themeComponentConfig.color.values.map(color => { %> + type='<%= type %>' <% } %> + color='<%= color %>' + > +
', + }} + >
+ + <% }) %> + + ); + } + `, + }, + ], + controls: [CCK_CONTROL.type()], + }, + }, + render: (args) => ( + <> + {args.cckControl.themeComponentConfig.color?.values.map((color, index) => ( + +
+ + + ))} + + ), +}; diff --git a/apps/react-kits-doc/stories/ui-components/badge/badge-container/overview/default.stories.tsx b/apps/react-kits-doc/stories/ui-components/badge/badge-container/overview/default.stories.tsx new file mode 100644 index 00000000..0ebc0cca --- /dev/null +++ b/apps/react-kits-doc/stories/ui-components/badge/badge-container/overview/default.stories.tsx @@ -0,0 +1,99 @@ +import { Badge, BadgeContainer } from '@cocokits/react-badge'; +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 { BadgeContainer, SvgIcon} from '@cocokits/react-components'; + + export const MyComponent = () => { + return ( + type='<%= type %>' <% } %> + <% if (typeof size !== 'undefined') { %> size='<%= size %>' <% } %> + <% if (typeof color !== 'undefined') { %> color='<%= color %>' <% } %> + position='<%= position %>' + <% if (offsetX && offsetY) { %> offset={['<%= offsetX %>', '<%= offsetY %>']}" <% } %> + <% if (radius) { %> radius='<%= radius %>' <% } %> + > +
+ type='<%= badgeType %>' <% } %> + <% if (typeof badgeSize !== 'undefined') { %> size='<%= badgeSize %>' <% } %> + <% if (typeof badgeColor !== 'undefined') { %> color='<%= badgeColor %>' <% } %> + <% if (max > 0) { %> max={<%= max %>} <% } %> + <% if (content !== '') { %> content='<%= content %>' <% } %> + <% if (hide) { %> hide={<%= hide %>} <% } %> + /> + + ) + } + `, + }, + ], + renderConditions: [renderWithPageTab('Overview')], + hasControl: true, + controls: [ + CCK_CONTROL.type(), + CCK_CONTROL.size(), + CCK_CONTROL.color(), + CCK_CONTROL.additional(), + CCK_CONTROL.type('badge'), + CCK_CONTROL.size('badge'), + CCK_CONTROL.color('badge'), + CCK_CONTROL.customSelect('position', ['top-left', 'top-right', 'bottom-left', 'bottom-right'], 'top-right'), + CCK_CONTROL.customText('Content', '2'), + CCK_CONTROL.customNumber('Max', 10), + CCK_CONTROL.customText('Radius', '12px'), + CCK_CONTROL.customText('OffsetX', undefined), + CCK_CONTROL.customText('OffsetY', undefined), + CCK_CONTROL.customBoolean('Hide', false), + ], + }, + }, + args: {}, + render: (args) => ( + +
+ + + ), +}; diff --git a/apps/react-kits-doc/stories/ui-components/badge/badge-container/overview/integration.stories.tsx b/apps/react-kits-doc/stories/ui-components/badge/badge-container/overview/integration.stories.tsx new file mode 100644 index 00000000..0dd59ceb --- /dev/null +++ b/apps/react-kits-doc/stories/ui-components/badge/badge-container/overview/integration.stories.tsx @@ -0,0 +1,83 @@ +import { Icons } from '@cocokits/common-icons'; +import { Avatar, AvatarLabel } from '@cocokits/react-avatar'; +import { Badge, BadgeContainer } from '@cocokits/react-badge'; +import { IconButton } from '@cocokits/react-button'; +import { SvgIcon } from '@cocokits/react-icon'; +import { renderWithPageTab } from '@cocokits/storybook-addon-theme'; +import { StoryObj, withWrapperDecorator } from '@cocokits/storybook-addon-theme-react'; + +export const Integration: StoryObj = { + name: 'Integration', + decorators: [withWrapperDecorator({ insideBox: true })], + parameters: { + docs: { + description: { + story: 'Badges attached to interactive components.', + }, + }, + cckAddon: { + renderConditions: [renderWithPageTab('Overview')], + source: [ + { + filename: 'Source Code', + language: 'tsx', + code: ` + import { BadgeContainer } from "@cocokits/react-components"; + + export const MyComponent = () => { + return ( + <> + <% ['top-left', 'top-right', 'bottom-left', 'bottom-right'].map(position => { %> + type='<%= type %>' <% } %> + position='<%= position %>' + radius="12px" + > +
+ + + <% }) %> + + ); + } + `, + }, + ], + }, + }, + render: (args) => ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + ), +}; diff --git a/apps/react-kits-doc/stories/ui-components/badge/badge-container/overview/position.stories.tsx b/apps/react-kits-doc/stories/ui-components/badge/badge-container/overview/position.stories.tsx new file mode 100644 index 00000000..32a6ec6b --- /dev/null +++ b/apps/react-kits-doc/stories/ui-components/badge/badge-container/overview/position.stories.tsx @@ -0,0 +1,69 @@ +import { Badge, BadgeContainer } from '@cocokits/react-badge'; +import { renderWithPageTab } from '@cocokits/storybook-addon-theme'; +import { StoryObj } from '@cocokits/storybook-addon-theme-react'; + +export const Position: StoryObj = { + name: 'Position', + parameters: { + docs: { + description: { + story: + 'The position of the badge can be adjusted to suit different design needs and screen dimensions, improving both aesthetics and usability.', + }, + }, + cckAddon: { + renderConditions: [renderWithPageTab('Overview')], + source: [ + { + filename: 'Source Code', + language: 'tsx', + code: ` + import { BadgeContainer } from "@cocokits/react-components"; + + export const MyComponent = () => { + return ( + <> + <% ['top-left', 'top-right', 'bottom-left', 'bottom-right'].map(position => { %> + type='<%= type %>' <% } %> + position='<%= position %>' + radius="12px" + > +
+ + + <% }) %> + + ); + } + `, + }, + ], + }, + }, + render: (args) => ( + <> + {(['top-left', 'top-right', 'bottom-left', 'bottom-right'] as const).map((position, index) => ( + +
+ + + ))} + + ), +}; diff --git a/apps/react-kits-doc/stories/ui-components/badge/badge-container/overview/size.stories.tsx b/apps/react-kits-doc/stories/ui-components/badge/badge-container/overview/size.stories.tsx new file mode 100644 index 00000000..b7be196b --- /dev/null +++ b/apps/react-kits-doc/stories/ui-components/badge/badge-container/overview/size.stories.tsx @@ -0,0 +1,71 @@ +import { Badge, BadgeContainer } from '@cocokits/react-badge'; +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 { <%= componentName.className %> } from "@cocokits/react-components"; + + export const MyComponent = () => { + return ( + <> + <% themeComponentConfig.size.values.map(size => { %> + type='<%= type %>' <% } %> + size='<%= size %>' + > +
', + }} + >
+ + <% }) %> + + + ); + } + `, + }, + ], + controls: [CCK_CONTROL.type()], + }, + }, + render: (args) => ( + <> + {args.cckControl.themeComponentConfig.size?.values.map((size, index) => ( + +
+ + + ))} + + ), +}; diff --git a/apps/react-kits-doc/stories/ui-components/badge/badge-container/overview/type.stories.tsx b/apps/react-kits-doc/stories/ui-components/badge/badge-container/overview/type.stories.tsx new file mode 100644 index 00000000..d76ffcc0 --- /dev/null +++ b/apps/react-kits-doc/stories/ui-components/badge/badge-container/overview/type.stories.tsx @@ -0,0 +1,67 @@ +import { Badge, BadgeContainer } from '@cocokits/react-badge'; +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 BadgeContainer styles.', + }, + }, + cckAddon: { + renderConditions: [renderWithThemeProp('type'), renderWithPageTab('Overview')], + source: [ + { + filename: 'Source Code', + language: 'tsx', + code: ` + import { BadgeContainer } from "@cocokits/react-components"; + + export const MyComponent = () => { + return ( + <> + <% themeComponentConfig.type.values.map(type => { %> + type='<%= type %>' <% } %> + > +
', + }} + >
+ + <% }) %> + + ); + } + `, + }, + ], + }, + }, + render: (args) => ( + <> + {args.cckControl.themeComponentConfig.type?.values.map((type, index) => ( + +
+ + + ))} + + ), +}; diff --git a/apps/react-kits-doc/stories/ui-components/badge/badge/description.md b/apps/react-kits-doc/stories/ui-components/badge/badge/description.md new file mode 100644 index 00000000..e71d08b4 --- /dev/null +++ b/apps/react-kits-doc/stories/ui-components/badge/badge/description.md @@ -0,0 +1,8 @@ +Displays numeric/text notifications or status dots. Handles content truncation, zero-state behavior, and conditional visibility. This component is ideal for notification counters, status indicators, and other visual cues. + +#### Features: +- **Content Truncation:** Converts numbers above limit to {max}+ (e.g., 100 → 99+) +- **Zero-State Handling:** Automatically renders dot when value is 0, null, or undefined +- **Conditional Visibility:** Completely hides badge when true (overrides content) +- **Layout Independence:** Badge positioning doesn't affect the layout of other elements +- **Design System Ready:** Adapts to theme-specific sizing and colors \ No newline at end of file diff --git a/apps/react-kits-doc/stories/ui-components/badge/badge/index.stories.tsx b/apps/react-kits-doc/stories/ui-components/badge/badge/index.stories.tsx new file mode 100644 index 00000000..0298d7bd --- /dev/null +++ b/apps/react-kits-doc/stories/ui-components/badge/badge/index.stories.tsx @@ -0,0 +1,33 @@ +import { Badge } from '@cocokits/react-badge'; +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 { MaxIndicator } from './overview/max-indicator.stories'; +export { DynamicContent } from './overview/dynamic-content.stories'; +export { Integration } from './overview/integration.stories'; + + +const meta: StoriesMeta = { + component: Badge, + title: 'UI Components/Badge', + decorators: [ + withWrapperDecorator({ insideBox: true }), + ], + parameters: { + docs: { + description: { + component: [descriptionMd].join('\n'), + }, + }, + cckAddon: { + componentName: 'badge', + }, + }, + argTypes: {}, +}; +export default meta; diff --git a/apps/react-kits-doc/stories/ui-components/badge/badge/overview/color.stories.tsx b/apps/react-kits-doc/stories/ui-components/badge/badge/overview/color.stories.tsx new file mode 100644 index 00000000..422243e2 --- /dev/null +++ b/apps/react-kits-doc/stories/ui-components/badge/badge/overview/color.stories.tsx @@ -0,0 +1,49 @@ +import { Badge } from '@cocokits/react-badge'; +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 { Badge } from "@cocokits/react-components"; + + export const MyComponent = () => { + return ( + <> + <% themeComponentConfig.color.values.map(color => { %> + type='<%= type %>' <% } %> + color='<%= color %>' + content="5" + /> + <% }) %> + + ); + } + `, + }, + ], + controls: [CCK_CONTROL.type()], + }, + }, + render: (args) => ( + <> + {args.cckControl.themeComponentConfig.color?.values.map((color, index) => ( + + ))} + + ), +}; diff --git a/apps/react-kits-doc/stories/ui-components/badge/badge/overview/default.stories.tsx b/apps/react-kits-doc/stories/ui-components/badge/badge/overview/default.stories.tsx new file mode 100644 index 00000000..f693bc8e --- /dev/null +++ b/apps/react-kits-doc/stories/ui-components/badge/badge/overview/default.stories.tsx @@ -0,0 +1,59 @@ +import { Badge } from '@cocokits/react-badge'; +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 { Badge, SvgIcon} from '@cocokits/react-components'; + + export const MyComponent = () => { + return ( + type='<%= type %>' <% } %> + <% if (typeof size !== 'undefined') { %> size='<%= size %>' <% } %> + <% if (typeof color !== 'undefined') { %> color='<%= color %>' <% } %> + <% if (max > 0) { %> max={<%= max %>} <% } %> + <% if (content !== '') { %> content='<%= content %>' <% } %> + <% if (hide) { %> hide={<%= hide %>} <% } %> + /> + ) + } + `, + }, + ], + renderConditions: [renderWithPageTab('Overview')], + hasControl: true, + controls: [ + CCK_CONTROL.type(), + CCK_CONTROL.size(), + CCK_CONTROL.color(), + CCK_CONTROL.additional(), + CCK_CONTROL.customText('Content', '2'), + CCK_CONTROL.customNumber('Max', 10), + CCK_CONTROL.customBoolean('Hide', false), + ], + }, + }, + args: {}, + render: (args) => ( + + ), +}; diff --git a/apps/react-kits-doc/stories/ui-components/badge/badge/overview/dynamic-content.stories.tsx b/apps/react-kits-doc/stories/ui-components/badge/badge/overview/dynamic-content.stories.tsx new file mode 100644 index 00000000..7a91930f --- /dev/null +++ b/apps/react-kits-doc/stories/ui-components/badge/badge/overview/dynamic-content.stories.tsx @@ -0,0 +1,49 @@ +import { Badge } from '@cocokits/react-badge'; +import { CCK_CONTROL, renderWithPageTab } from '@cocokits/storybook-addon-theme'; +import { StoryObj } from '@cocokits/storybook-addon-theme-react'; + +export const DynamicContent: StoryObj = { + name: 'DynamicContent', + parameters: { + docs: { + description: { + story: + 'Demonstrates text, numeric, and dot states in a single view.', + }, + }, + cckAddon: { + renderConditions: [renderWithPageTab('Overview')], + singleControls: ['type'], + source: [ + { + filename: 'Source Code', + language: 'tsx', + code: ` + import { Badge } from "@cocokits/react-components"; + + export const MyComponent = () => { + return ( + <> + + + + + + + ); + } + `, + }, + ], + controls: [CCK_CONTROL.type()], + }, + }, + render: (args) => ( + <> + + + + + + ), +}; diff --git a/apps/react-kits-doc/stories/ui-components/badge/badge/overview/integration.stories.tsx b/apps/react-kits-doc/stories/ui-components/badge/badge/overview/integration.stories.tsx new file mode 100644 index 00000000..fd4a7cbb --- /dev/null +++ b/apps/react-kits-doc/stories/ui-components/badge/badge/overview/integration.stories.tsx @@ -0,0 +1,95 @@ +import { Badge } from '@cocokits/react-badge'; +import { Button } from '@cocokits/react-button'; +import { Divider } from '@cocokits/react-divider'; +import { Menu, MenuItem } from '@cocokits/react-menu'; +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 Integration: StoryObj = { + name: 'Integration', + parameters: { + docs: { + description: { + story: + 'Badges attached to interactive components.', + }, + }, + cckAddon: { + renderConditions: [renderWithPageTab('Overview')], + singleControls: ['type'], + source: [ + { + filename: 'Source Code', + language: 'tsx', + code: ` + import { Badge } from "@cocokits/react-components"; + + export const MyComponent = () => { + return ( + <> + + + + ( +
+ Header 1 + +
+ )}/> + + + + + + Edit + Duplicate + + + Share + + + + + + ); + } + `, + }, + ], + controls: [CCK_CONTROL.type()], + }, + }, + render: (args) => ( + <> + + + + ( +
+ Header 1 + +
+ )}/> + + + + + + Edit + Duplicate + + + Share + + + + + ), +}; diff --git a/apps/react-kits-doc/stories/ui-components/badge/badge/overview/max-indicator.stories.tsx b/apps/react-kits-doc/stories/ui-components/badge/badge/overview/max-indicator.stories.tsx new file mode 100644 index 00000000..e38064fe --- /dev/null +++ b/apps/react-kits-doc/stories/ui-components/badge/badge/overview/max-indicator.stories.tsx @@ -0,0 +1,49 @@ +import { Badge } from '@cocokits/react-badge'; +import { CCK_CONTROL, renderWithPageTab } from '@cocokits/storybook-addon-theme'; +import { StoryObj } from '@cocokits/storybook-addon-theme-react'; + +export const MaxIndicator: StoryObj = { + name: 'MaxIndicator', + parameters: { + docs: { + description: { + story: + 'Shows how numbers automatically convert to {max}+ format when exceeding the limit.', + }, + }, + cckAddon: { + renderConditions: [renderWithPageTab('Overview')], + singleControls: ['type'], + source: [ + { + filename: 'Source Code', + language: 'tsx', + code: ` + import { Badge } from "@cocokits/react-components"; + + export const MyComponent = () => { + return ( + <> + + + + + + + ); + } + `, + }, + ], + controls: [CCK_CONTROL.type()], + }, + }, + render: (args) => ( + <> + + + + + + ), +}; diff --git a/apps/react-kits-doc/stories/ui-components/badge/badge/overview/size.stories.tsx b/apps/react-kits-doc/stories/ui-components/badge/badge/overview/size.stories.tsx new file mode 100644 index 00000000..b69e9d00 --- /dev/null +++ b/apps/react-kits-doc/stories/ui-components/badge/badge/overview/size.stories.tsx @@ -0,0 +1,51 @@ +import { Badge } from '@cocokits/react-badge'; +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 { Badge } from "@cocokits/react-components"; + + export const MyComponent = () => { + return ( + <> + <% themeComponentConfig.size.values.map(size => { %> + type='<%= type %>' <% } %> + size='<%= size %>' + content="5" + /> + <% }) %> + + + ); + } + `, + }, + ], + controls: [CCK_CONTROL.type()], + }, + }, + render: (args) => ( + <> + {args.cckControl.themeComponentConfig.size?.values.map((size, index) => ( + + ))} + + ), +}; diff --git a/apps/react-kits-doc/stories/ui-components/badge/badge/overview/type.stories.tsx b/apps/react-kits-doc/stories/ui-components/badge/badge/overview/type.stories.tsx new file mode 100644 index 00000000..c60ab956 --- /dev/null +++ b/apps/react-kits-doc/stories/ui-components/badge/badge/overview/type.stories.tsx @@ -0,0 +1,47 @@ +import { Badge } from '@cocokits/react-badge'; +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 Badge styles.', + }, + }, + cckAddon: { + renderConditions: [renderWithThemeProp('type'), renderWithPageTab('Overview')], + source: [ + { + filename: 'Source Code', + language: 'tsx', + code: ` + import { Badge } from "@cocokits/react-components"; + + export const MyComponent = () => { + return ( + <> + <% themeComponentConfig.type.values.map(type => { %> + type='<%= type %>' <% } %> + content="5" + /> + <% }) %> + + ); + } + `, + }, + ], + }, + }, + render: (args) => ( + <> + {args.cckControl.themeComponentConfig.type?.values.map((type, index) => ( + + ))} + + ), +}; 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 index 6ff3ed95..fb6bf9fd 100644 --- 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 @@ -15,7 +15,6 @@ const meta: StoriesMeta = { component: Tabs, title: 'UI Components/Tabs', subcomponents: {Tab}, - tags: ['status:new'], decorators: [ withWrapperDecorator({insideBox: true}, {width: '500px'}), ], diff --git a/packages/angular/avatar/src/lib/avatar/avatar.component.ts b/packages/angular/avatar/src/lib/avatar/avatar.component.ts index 6de26444..7d1db925 100644 --- a/packages/angular/avatar/src/lib/avatar/avatar.component.ts +++ b/packages/angular/avatar/src/lib/avatar/avatar.component.ts @@ -96,7 +96,7 @@ export class AvatarComponent extends _UiBaseComponent<'avatar'> { * Whether the avatar should be clickable. * @storybook argType will be overridden by storybook */ - public clickable = input(true); + public clickable = input(false); private contentTemp = contentChild(AvatarTemplateDirective, { read: TemplateRef }); private defaultTemp = viewChild.required>('defaultTemp'); diff --git a/packages/angular/badge/.eslintrc.json b/packages/angular/badge/.eslintrc.json new file mode 100644 index 00000000..f6fdaca9 --- /dev/null +++ b/packages/angular/badge/.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/badge/LICENSE b/packages/angular/badge/LICENSE new file mode 100644 index 00000000..637feac8 --- /dev/null +++ b/packages/angular/badge/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/badge/README.md b/packages/angular/badge/README.md new file mode 100644 index 00000000..bef97498 --- /dev/null +++ b/packages/angular/badge/README.md @@ -0,0 +1,48 @@ +# @cocokits/angular-badge +The `@cocokits/angular-badge` package provides essential UI components for displaying notifications, counts, and status indicators in Angular applications. The components included in this package are designed to be flexible, customizable, and easy to integrate into various design systems. + +This package includes the following components: +- `BadgeComponent` +- `BadgeContainerComponent` + +--- + +### BadgeComponent +Displays numeric/text notifications or status dots. Handles content truncation, zero-state behavior, and conditional visibility. This component is ideal for notification counters, status indicators, and other visual cues. + +#### Features: +- **Content Truncation:** Converts numbers above limit to {max}+ (e.g., 100 → 99+) +- **Zero-State Handling:** Automatically renders dot when value is 0, null, or undefined +- **Conditional Visibility:** Completely hides badge when true (overrides content) +- **Layout Independence:** Badge positioning doesn't affect the layout of other elements +- **Design System Ready:** Adapts to theme-specific sizing and colors + +--- + +### BadgeContainerComponent +Manages badge placement relative to target elements. Provides precise offset control without affecting layout. This component is perfect for positioning badges on buttons, icons, or other UI elements. + +#### Features: +- **Position Presets:** Positions badge at corners: top-left, top-right, bottom-left, bottom-right +- **Flexible Integration:** Works with any content element that needs badge indicators + +--- + +### Styling and Theming +The components in this package do not include any built-in styles. However, `@cocokits/angular-badge` adds CSS classes to the elements based on the provided configuration. You can style the components yourself or apply a theme from `CocoKits`. + +`CocoKits` provides ready-made theming options, or you can create a custom design using your CSS or SCSS styles. + +--- + +### Documentation and Example +For detailed usage examples, configuration options, and additional documentation, visit the following links +- [BadgeComponent](https://angular.cocokits.com/?path=/docs/ui-components-badge--docs) +- [BadgeContainerComponent](https://angular.cocokits.com/?path=/docs/ui-components-badge-container--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) + +--- diff --git a/packages/angular/badge/ng-package.json b/packages/angular/badge/ng-package.json new file mode 100644 index 00000000..52f030f0 --- /dev/null +++ b/packages/angular/badge/ng-package.json @@ -0,0 +1,8 @@ +{ + "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../../dist/packages/angular/badge", + "lib": { + "entryFile": "src/index.ts" + }, + "allowedNonPeerDependencies": ["@cocokits/"] +} diff --git a/packages/angular/badge/package.json b/packages/angular/badge/package.json new file mode 100644 index 00000000..81a532dc --- /dev/null +++ b/packages/angular/badge/package.json @@ -0,0 +1,21 @@ +{ + "name": "@cocokits/angular-badge", + "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": ">=20.0.0", + "@angular/core": ">=20.0.0" + }, + "publishConfig": { + "directory": "../../../dist/packages/angular/badge", + "access": "public" + } +} diff --git a/packages/angular/badge/project.json b/packages/angular/badge/project.json new file mode 100644 index 00000000..7f7378dd --- /dev/null +++ b/packages/angular/badge/project.json @@ -0,0 +1,29 @@ +{ + "name": "@cocokits/angular-badge", + "$schema": "../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "packages/angular/badge/src", + "prefix": "lib", + "projectType": "library", + "tags": ["type:ui", "framework:angular"], + "targets": { + "build": { + "executor": "@nx/angular:package", + "outputs": ["{workspaceRoot}/dist/{projectRoot}"], + "options": { + "project": "packages/angular/badge/ng-package.json" + }, + "configurations": { + "production": { + "tsConfig": "packages/angular/badge/tsconfig.lib.prod.json" + }, + "development": { + "tsConfig": "packages/angular/badge/tsconfig.lib.json" + } + }, + "defaultConfiguration": "production" + }, + "quick-fix-eslint": { + "executor": "@nx/eslint:lint" + } + } +} diff --git a/packages/angular/badge/src/index.ts b/packages/angular/badge/src/index.ts new file mode 100644 index 00000000..28942716 --- /dev/null +++ b/packages/angular/badge/src/index.ts @@ -0,0 +1,3 @@ +export * from './lib/badge/badge.component'; + +export * from './lib/badge-container/badge-container.component'; diff --git a/packages/angular/badge/src/lib/badge-container/badge-container.component.html b/packages/angular/badge/src/lib/badge-container/badge-container.component.html new file mode 100644 index 00000000..62c02cb8 --- /dev/null +++ b/packages/angular/badge/src/lib/badge-container/badge-container.component.html @@ -0,0 +1,8 @@ + + +
+ +
\ No newline at end of file diff --git a/packages/angular/badge/src/lib/badge-container/badge-container.component.scss b/packages/angular/badge/src/lib/badge-container/badge-container.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/packages/angular/badge/src/lib/badge-container/badge-container.component.ts b/packages/angular/badge/src/lib/badge-container/badge-container.component.ts new file mode 100644 index 00000000..e4df4c7d --- /dev/null +++ b/packages/angular/badge/src/lib/badge-container/badge-container.component.ts @@ -0,0 +1,52 @@ +import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core'; + +import { _UiBaseComponent } from '@cocokits/angular-core'; + +@Component({ + imports: [], + selector: 'cck-badge-container', + templateUrl: './badge-container.component.html', + styleUrls: ['./badge-container.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.None, + host: { + '[class]': 'hostClassNames()', + '[style.--cck-badge-radius]': 'radius()', + }, +}) +export class BadgeContainerComponent extends _UiBaseComponent<'badgeContainer'> { + protected readonly componentName = 'badgeContainer'; + protected extraHostElementClassConditions = computed(() => [ + { if: this.position() === 'top-left', classes: this.classNames().topLeft }, + { if: this.position() === 'top-right', classes: this.classNames().topRight }, + { if: this.position() === 'bottom-left', classes: this.classNames().bottomLeft }, + { if: this.position() === 'bottom-right', classes: this.classNames().bottomRight }, + { if: this.offset() && this.offset()?.[0] && this.offset()?.[1], classes: this.classNames().customOffset }, + ]); + + /** Position of the badge. */ + position = input<'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'>('top-right'); + + /** + * [horizontal, vertical] pixel adjustment for badge position. + * it's allow you to take control of badge positioning. + * @example ['10px', '20px'] + */ + offset = input<[string, string]>(); + + /** + * Controls the corner rounding of the component. Accepts any valid CSS border-radius value + * including pixels (e.g. "12px"), percentages (e.g. "50%"). + * Percentage values are relative to the component's dimensions. + * useful for when the content is curved such as avatars. + */ + radius = input('0px'); + + protected transformBadgeWrapper = computed(() => { + const offset = this.offset(); + if (!offset || !offset[0] || !offset[1]) { + return null; + } + return `translate(${offset[0]}, ${offset[1]})`; + }); +} diff --git a/packages/angular/badge/src/lib/badge/badge.component.html b/packages/angular/badge/src/lib/badge/badge.component.html new file mode 100644 index 00000000..952615ba --- /dev/null +++ b/packages/angular/badge/src/lib/badge/badge.component.html @@ -0,0 +1,7 @@ +@if(!hide()) { + {{truncationContent()}} + + @if(withMaxIndicator()) { + + + } +} \ No newline at end of file diff --git a/packages/angular/badge/src/lib/badge/badge.component.scss b/packages/angular/badge/src/lib/badge/badge.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/packages/angular/badge/src/lib/badge/badge.component.ts b/packages/angular/badge/src/lib/badge/badge.component.ts new file mode 100644 index 00000000..25839e60 --- /dev/null +++ b/packages/angular/badge/src/lib/badge/badge.component.ts @@ -0,0 +1,66 @@ +import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core'; + +import { _UiBaseComponent } from '@cocokits/angular-core'; +import { isNotNullish, isNullish } from '@cocokits/common-utils'; + +@Component({ + imports: [], + selector: 'cck-badge', + templateUrl: './badge.component.html', + styleUrls: ['./badge.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.None, + host: { + '[class]': 'hostClassNames()', + }, +}) +export class BadgeComponent extends _UiBaseComponent<'badge'> { + protected readonly componentName = 'badge'; + protected extraHostElementClassConditions = computed(() => [ + { if: this.withMaxIndicator(), classes: this.classNames().maxIndicator }, + { if: this.truncationContent(), classes: this.classNames().withContent }, + { if: !this.truncationContent(), classes: this.classNames().withoutContent }, + { if: this.hide(), classes: this.classNames().hidden }, + ]); + + /** Max value before truncation. */ + max = input(); + + /** Content to display in the badge. When "", null, or undefined, shows a dot. */ + content = input(); + + /** Whether to hide the badge completely. Default is false. */ + hide = input(false); + + protected withMaxIndicator = computed(() => { + const max = this.max(); + const content = this.content(); + + if (isNullish(max) || isNullish(content)) { + return false; + } + const numberContent = typeof content === 'number' ? content : parseInt(content); + + if (isNaN(numberContent) || max <= 0) { + return false; + } + return max < numberContent; + }); + + protected truncationContent = computed(() => { + const withMaxIndicator = this.withMaxIndicator(); + const content = this.content(); + const max = this.max(); + + if (isNullish(content)) { + return ''; + } + + const contentAsNumber = parseInt(content as string); + if (withMaxIndicator && !isNaN(contentAsNumber) && isNotNullish(max)) { + return Math.min(contentAsNumber, max); + } + + return content; + }); +} diff --git a/packages/angular/badge/tsconfig.json b/packages/angular/badge/tsconfig.json new file mode 100644 index 00000000..8e62d6db --- /dev/null +++ b/packages/angular/badge/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/badge/tsconfig.lib.json b/packages/angular/badge/tsconfig.lib.json new file mode 100644 index 00000000..f68063a5 --- /dev/null +++ b/packages/angular/badge/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/badge/tsconfig.lib.prod.json b/packages/angular/badge/tsconfig.lib.prod.json new file mode 100644 index 00000000..2a2faa88 --- /dev/null +++ b/packages/angular/badge/tsconfig.lib.prod.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.lib.json", + "compilerOptions": { + "declarationMap": false + }, + "angularCompilerOptions": { + "compilationMode": "partial" + } +} diff --git a/packages/angular/components/package.json b/packages/angular/components/package.json index 46deb7a4..4948b000 100644 --- a/packages/angular/components/package.json +++ b/packages/angular/components/package.json @@ -18,7 +18,8 @@ "@cocokits/core": "workspace:*", "tslib": "^2.3.0", "@cocokits/angular-accordion": "workspace:*", - "@cocokits/angular-tabs": "workspace:*" + "@cocokits/angular-tabs": "workspace:*", + "@cocokits/angular-badge": "workspace:*" }, "devDependencies": {}, "peerDependencies": { diff --git a/packages/common/core/src/lib/class-names/badge-class-names.ts b/packages/common/core/src/lib/class-names/badge-class-names.ts new file mode 100644 index 00000000..b8a85cf2 --- /dev/null +++ b/packages/common/core/src/lib/class-names/badge-class-names.ts @@ -0,0 +1,56 @@ +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 badgeLayoutClassNamesConfig = { + componentName: 'badge', + baseSelectorStructure: { block: 'badge' }, + elements: { + host: { + name: 'Host Element', + selectorStructure: [], + description: 'It will add to the host element of `Badge` component.', + }, + content: { + name: 'Content Element', + selectorStructure: [{ element: 'content' }], + description: `It will add to the content element of \`Badge\` component.`, + }, + maxIndicator: { + name: 'Max Indicator Element', + selectorStructure: [{ element: 'max-indicator' }], + description: `The element that displays a \`+\` symbol when the content exceeds the maximum number`, + }, + withContent: { + name: 'Host Element', + selectorStructure: [{ modifier: 'with-content' }], + description: `Will be add to the host element, when the badge has content`, + }, + withoutContent: { + name: 'Host Element', + selectorStructure: [{ modifier: 'without-content' }], + description: `Will be add to the host element, when the badge has not content, and show as dot`, + }, + hidden: { + name: 'Host Element', + selectorStructure: [{ modifier: 'hidden' }], + description: `Will be add to the host element, when the badge is hidden`, + }, + }, +} satisfies LayoutClassNamesConfig; + +export function getBadgeClassNames( + componentProps: UIBaseComponentProps, + themeConfig: ThemeConfig +): Record { + validateUiBaseComponentProps(badgeLayoutClassNamesConfig.componentName, componentProps, themeConfig); + + return { + host: generateLayoutClassNameFromElement(badgeLayoutClassNamesConfig, 'host', themeConfig, componentProps), + withContent: generateLayoutClassNameFromElement(badgeLayoutClassNamesConfig, 'withContent', themeConfig), + withoutContent: generateLayoutClassNameFromElement(badgeLayoutClassNamesConfig, 'withoutContent', themeConfig), + content: generateLayoutClassNameFromElement(badgeLayoutClassNamesConfig, 'content', themeConfig), + maxIndicator: generateLayoutClassNameFromElement(badgeLayoutClassNamesConfig, 'maxIndicator', themeConfig), + hidden: generateLayoutClassNameFromElement(badgeLayoutClassNamesConfig, 'hidden', themeConfig), + }; +} diff --git a/packages/common/core/src/lib/class-names/badge-container-class-names.ts b/packages/common/core/src/lib/class-names/badge-container-class-names.ts new file mode 100644 index 00000000..718656f2 --- /dev/null +++ b/packages/common/core/src/lib/class-names/badge-container-class-names.ts @@ -0,0 +1,62 @@ +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 badgeContainerLayoutClassNamesConfig = { + componentName: 'badgeContainer', + baseSelectorStructure: { block: 'badge-container' }, + elements: { + host: { + name: 'Host Element', + selectorStructure: [], + description: 'It will add to the host element of `BadgeContainer` component.', + }, + badgeWrapper: { + name: 'Badge Wrapper', + selectorStructure: [{ element: 'badge-wrapper' }], + description: `It will add to the wrapper element of \`Badge\` component inside \`BadgeContainer\`. This is useful for styling the badge container as a whole.`, + }, + topLeft: { + name: 'Host Element', + selectorStructure: [{ modifier: 'top-left' }], + description: `Will be add to the host element, when the position is top-left`, + }, + topRight: { + name: 'Host Element', + selectorStructure: [{ modifier: 'top-right' }], + description: `Will be add to the host element, when the position is top-right`, + }, + bottomLeft: { + name: 'Host Element', + selectorStructure: [{ modifier: 'bottom-left' }], + description: `Will be add to the host element, when the position is bottom-left`, + }, + bottomRight: { + name: 'Host Element', + selectorStructure: [{ modifier: 'bottom-right' }], + description: `Will be add to the host element, when the position is bottom-right`, + }, + customOffset: { + name: 'Host Wrapper', + selectorStructure: [{ modifier: 'custom-offset' }], + description: `Will be add to the host element, when the custom offset exists`, + }, + }, +} satisfies LayoutClassNamesConfig; + +export function getBadgeContainerClassNames( + componentProps: UIBaseComponentProps, + themeConfig: ThemeConfig +): Record { + validateUiBaseComponentProps(badgeContainerLayoutClassNamesConfig.componentName, componentProps, themeConfig); + + return { + host: generateLayoutClassNameFromElement(badgeContainerLayoutClassNamesConfig, 'host', themeConfig, componentProps), + badgeWrapper: generateLayoutClassNameFromElement(badgeContainerLayoutClassNamesConfig, 'badgeWrapper', themeConfig), + topLeft: generateLayoutClassNameFromElement(badgeContainerLayoutClassNamesConfig, 'topLeft', themeConfig), + topRight: generateLayoutClassNameFromElement(badgeContainerLayoutClassNamesConfig, 'topRight', themeConfig), + bottomLeft: generateLayoutClassNameFromElement(badgeContainerLayoutClassNamesConfig, 'bottomLeft', themeConfig), + bottomRight: generateLayoutClassNameFromElement(badgeContainerLayoutClassNamesConfig, 'bottomRight', themeConfig), + customOffset: generateLayoutClassNameFromElement(badgeContainerLayoutClassNamesConfig, 'customOffset', themeConfig), + }; +} 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 03969683..9504a64e 100644 --- a/packages/common/core/src/lib/class-names/class-names.ts +++ b/packages/common/core/src/lib/class-names/class-names.ts @@ -6,6 +6,8 @@ import { getAccordionPanelClassNames } from './accordion-panel-class-names'; import { getAvatarClassNames } from './avatar-class-names'; import { getAvatarGroupClassNames } from './avatar-group-class-names'; import { getAvatarLabelClassNames } from './avatar-label-class-names'; +import { getBadgeClassNames } from './badge-class-names'; +import { getBadgeContainerClassNames } from './badge-container-class-names'; import { getButtonClassNames } from './button-class-names'; import { getCheckboxClassNames } from './checkbox-class-names'; import { getChipClassNames } from './chip-class-names'; @@ -82,6 +84,8 @@ export const CLASS_NAMES_FN_MAP = { accordionPanel: getAccordionPanelClassNames, tabs: getTabsClassNames, tab: getTabClassNames, + badge: getBadgeClassNames, + badgeContainer: getBadgeContainerClassNames, }; 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 551bc249..6aadd0a0 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 @@ -4,6 +4,8 @@ import { accordionPanelLayoutClassNamesConfig } from './accordion-panel-class-na import { avatarLayoutClassNamesConfig } from './avatar-class-names'; import { avatarGroupLayoutClassNamesConfig } from './avatar-group-class-names'; import { avatarLabelLayoutClassNamesConfig } from './avatar-label-class-names'; +import { badgeLayoutClassNamesConfig } from './badge-class-names'; +import { badgeContainerLayoutClassNamesConfig } from './badge-container-class-names'; import { buttonLayoutClassNamesConfig } from './button-class-names'; import { checkboxLayoutClassNamesConfig } from './checkbox-class-names'; import { chipLayoutClassNamesConfig } from './chip-class-names'; @@ -83,4 +85,6 @@ export const layoutClassNamesConfigRecord = { accordionPanel: accordionPanelLayoutClassNamesConfig, tabs: tabsLayoutClassNamesConfig, tab: tabLayoutClassNamesConfig, + badge: badgeLayoutClassNamesConfig, + badgeContainer: badgeContainerLayoutClassNamesConfig, }; 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 9e18ad61..76770d08 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 @@ -11,7 +11,8 @@ export type UIBaseComponentsName = | OverlayComponentName | AvatarComponentName | AccordionComponentName - | TabsComponentName; + | TabsComponentName + | BadgeComponentName; type FormFieldComponentName = | 'formField' @@ -43,3 +44,4 @@ type OverlayComponentName = 'overlay'; type AvatarComponentName = 'avatar' | 'avatarGroup' | 'avatarLabel'; type AccordionComponentName = 'accordion' | 'accordionHeader' | 'accordionPanel'; type TabsComponentName = 'tabs' | 'tab'; +type BadgeComponentName = 'badge' | 'badgeContainer'; 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 0a53f4a2..9cea5540 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 @@ -4,6 +4,7 @@ * Generated by cocokits 'scss-builder' */ +@charset "UTF-8"; :where([data-cck-theme-name=cocokits] .cck-button){ display:inline-flex; justify-content:center; @@ -701,13 +702,13 @@ fill:var(--color-disabled-font); cursor:default; } +:where([data-cck-theme-name=cocokits] .cck-icon-button .cck-svg-icon--default-color){ + fill:inherit; +} :where([data-cck-theme-name=cocokits] .cck-icon-button .cck-svg-icon){ width:100%; height: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; } @@ -2039,6 +2040,112 @@ :where([data-cck-theme-name=cocokits] .cck-tabs__size--lg .cck-tab.cck-tab--selected){ font:var(--text-md-medium); } +:where([data-cck-theme-name=cocokits] .cck-badge){ + display:inline-flex; + align-items:center; + justify-content:center; +} +:where([data-cck-theme-name=cocokits] .cck-badge--hidden){ + display:none; +} +:where([data-cck-theme-name=cocokits] .cck-badge__rounded){ + border-radius:500px; +} +:where([data-cck-theme-name=cocokits] .cck-badge__rectangle){ + border-radius:4px; +} +:where([data-cck-theme-name=cocokits] .cck-badge__color--brand){ + background-color:var(--color-brand-default); + color:var(--color-font-inverse-default); +} +:where([data-cck-theme-name=cocokits] .cck-badge__color--info){ + background-color:var(--color-info-default); + color:var(--color-font-inverse-default); +} +:where([data-cck-theme-name=cocokits] .cck-badge__color--warning){ + background-color:var(--color-warning-default); + color:var(--color-font-inverse-default); +} +:where([data-cck-theme-name=cocokits] .cck-badge__color--error){ + background-color:var(--color-error-default); + color:var(--color-font-inverse-default); +} +:where([data-cck-theme-name=cocokits] .cck-badge__color--h-contrast){ + background-color:var(--color-h-contrast-default); + color:var(--color-font-inverse-default); +} +:where([data-cck-theme-name=cocokits] .cck-badge--with-content.cck-badge__size--sm){ + min-width:18px; + height:18px; + padding:0 4px; + font:var(--text-xs-regular); +} +:where([data-cck-theme-name=cocokits] .cck-badge--with-content.cck-badge__size--md){ + min-width:22px; + height:22px; + padding:0 4px; + font:var(--text-xs-medium); +} +:where([data-cck-theme-name=cocokits] .cck-badge--with-content.cck-badge__size--lg){ + min-width:24px; + height:24px; + padding:0 8px; + font:var(--text-sm-medium); +} +:where([data-cck-theme-name=cocokits] .cck-badge--with-content.cck-badge__size--xl){ + min-width:28px; + height:28px; + padding:0 8px; + font:var(--text-md-medium); +} +:where([data-cck-theme-name=cocokits] .cck-badge--without-content.cck-badge__size--sm){ + width:6px; + height:6px; +} +:where([data-cck-theme-name=cocokits] .cck-badge--without-content.cck-badge__size--md){ + width:8px; + height:8px; +} +:where([data-cck-theme-name=cocokits] .cck-badge--without-content.cck-badge__size--lg){ + width:12px; + height:12px; +} +:where([data-cck-theme-name=cocokits] .cck-badge--without-content.cck-badge__size--xl){ + width:16px; + height:16px; +} +:where([data-cck-theme-name=cocokits] .cck-badge-container){ + display:flex; + align-items:center; + justify-content:center; + position:relative; +} +:where([data-cck-theme-name=cocokits] .cck-badge-container__badge-wrapper){ + position:absolute; + display:flex; + align-items:center; + justify-content:center; +} +:where([data-cck-theme-name=cocokits] :not(.cck-badge-container--custom-offset).cck-badge-container--top-left .cck-badge-container__badge-wrapper){ + top:calc(0.2929 * var(--cck-badge-radius, 0px)); + left:calc(0.2929 * var(--cck-badge-radius, 0px)); + transform:translate(-50%, -50%); +} +:where([data-cck-theme-name=cocokits] :not(.cck-badge-container--custom-offset).cck-badge-container--top-right .cck-badge-container__badge-wrapper){ + top:calc(0.2929 * var(--cck-badge-radius, 0px)); + right:calc(0.2929 * var(--cck-badge-radius, 0px)); + transform:translate(50%, -50%); +} +:where([data-cck-theme-name=cocokits] :not(.cck-badge-container--custom-offset).cck-badge-container--bottom-left .cck-badge-container__badge-wrapper){ + bottom:calc(0.2929 * var(--cck-badge-radius, 0px)); + left:calc(0.2929 * var(--cck-badge-radius, 0px)); + transform:translate(-50%, 50%); +} +:where([data-cck-theme-name=cocokits] :not(.cck-badge-container--custom-offset).cck-badge-container--bottom-right .cck-badge-container__badge-wrapper){ + bottom:calc(0.2929 * var(--cck-badge-radius, 0px)); + right:calc(0.2929 * var(--cck-badge-radius, 0px)); + transform:translate(50%, 50%); +} :where([data-cck-theme-name=frames-x] .cck-button){ display:inline-flex; @@ -4233,4 +4340,125 @@ } :where([data-cck-theme-name=frames-x] .cck-tabs__size--lg .cck-tab.cck-tab--selected){ font:var(--text-lg-font-semibold); +} +:where([data-cck-theme-name=frames-x] .cck-badge){ + display:inline-flex; + align-items:center; + justify-content:center; + border-radius:var(--radi-6); +} +:where([data-cck-theme-name=frames-x] .cck-badge--hidden){ + display:none; +} +:where([data-cck-theme-name=frames-x] .cck-badge__default.cck-badge__color--brand){ + background-color:var(--state-brand-active); + border:1px solid var(--state-brand-active); + color:var(--text-light-primary); +} +:where([data-cck-theme-name=frames-x] .cck-badge__default.cck-badge__color--highlight){ + background-color:var(--state-highlight-active); + border:1px solid var(--state-highlight-active); + color:var(--text-light-primary); +} +:where([data-cck-theme-name=frames-x] .cck-badge__default.cck-badge__color--success){ + background-color:var(--state-success-active); + border:1px solid var(--state-success-active); + color:var(--text-light-primary); +} +:where([data-cck-theme-name=frames-x] .cck-badge__default.cck-badge__color--danger){ + background-color:var(--state-danger-active); + border:1px solid var(--state-danger-active); + color:var(--text-light-primary); +} +:where([data-cck-theme-name=frames-x] .cck-badge__ghost.cck-badge__color--brand){ + background-color:var(--base-surface-2); + border:1px solid var(--state-brand-active); + color:var(--state-brand-active); +} +:where([data-cck-theme-name=frames-x] .cck-badge__ghost.cck-badge__color--highlight){ + background-color:var(--base-surface-2); + border:1px solid var(--state-highlight-active); + color:var(--state-highlight-active); +} +:where([data-cck-theme-name=frames-x] .cck-badge__ghost.cck-badge__color--success){ + background-color:var(--base-surface-2); + border:1px solid var(--state-success-active); + color:var(--state-success-active); +} +:where([data-cck-theme-name=frames-x] .cck-badge__ghost.cck-badge__color--danger){ + background-color:var(--base-surface-2); + border:1px solid var(--state-danger-active); + color:var(--state-danger-active); +} +:where([data-cck-theme-name=frames-x] .cck-badge--with-content.cck-badge__size--xs){ + min-width:24px; + height:24px; + padding:0 4px; + font:var(--text-xs-font-medium); +} +:where([data-cck-theme-name=frames-x] .cck-badge--with-content.cck-badge__size--sm){ + min-width:28px; + height:28px; + padding:0 4px; + font:var(--text-base-font-semibold); +} +:where([data-cck-theme-name=frames-x] .cck-badge--with-content.cck-badge__size--md){ + min-width:40px; + height:40px; + padding:0 8px; + font:var(--text-lg-font-semibold); +} +:where([data-cck-theme-name=frames-x] .cck-badge--with-content.cck-badge__size--lg){ + min-width:52px; + height:52px; + padding:0 8px; + font:var(--text-xl-font-semibold); +} +:where([data-cck-theme-name=frames-x] .cck-badge--without-content.cck-badge__size--xs){ + width:8px; + height:8px; +} +:where([data-cck-theme-name=frames-x] .cck-badge--without-content.cck-badge__size--sm){ + width:12px; + height:12px; +} +:where([data-cck-theme-name=frames-x] .cck-badge--without-content.cck-badge__size--md){ + width:16px; + height:16px; +} +:where([data-cck-theme-name=frames-x] .cck-badge--without-content.cck-badge__size--lg){ + width:24px; + height:24px; +} +:where([data-cck-theme-name=frames-x] .cck-badge-container){ + display:flex; + align-items:center; + justify-content:center; + position:relative; +} +:where([data-cck-theme-name=frames-x] .cck-badge-container__badge-wrapper){ + position:absolute; + display:flex; + align-items:center; + justify-content:center; +} +:where([data-cck-theme-name=frames-x] :not(.cck-badge-container--custom-offset).cck-badge-container--top-left .cck-badge-container__badge-wrapper){ + top:calc(0.2929 * var(--cck-badge-radius, 0px)); + left:calc(0.2929 * var(--cck-badge-radius, 0px)); + transform:translate(-50%, -50%); +} +:where([data-cck-theme-name=frames-x] :not(.cck-badge-container--custom-offset).cck-badge-container--top-right .cck-badge-container__badge-wrapper){ + top:calc(0.2929 * var(--cck-badge-radius, 0px)); + right:calc(0.2929 * var(--cck-badge-radius, 0px)); + transform:translate(50%, -50%); +} +:where([data-cck-theme-name=frames-x] :not(.cck-badge-container--custom-offset).cck-badge-container--bottom-left .cck-badge-container__badge-wrapper){ + bottom:calc(0.2929 * var(--cck-badge-radius, 0px)); + left:calc(0.2929 * var(--cck-badge-radius, 0px)); + transform:translate(-50%, 50%); +} +:where([data-cck-theme-name=frames-x] :not(.cck-badge-container--custom-offset).cck-badge-container--bottom-right .cck-badge-container__badge-wrapper){ + bottom:calc(0.2929 * var(--cck-badge-radius, 0px)); + right:calc(0.2929 * var(--cck-badge-radius, 0px)); + transform:translate(50%, 50%); } \ 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 3a08cfaa..716e32d6 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=cocokits] .cck-tabs){display:flex;flex-direction:column;gap:var(--size-12)}:where([data-cck-theme-name=cocokits] .cck-tabs__headers-wrapper){display:flex;flex-wrap:wrap;gap:var(--size-4);justify-content:center}:where([data-cck-theme-name=cocokits] .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=cocokits] .cck-tabs--align-center .cck-tabs__headers-wrapper){align-items:center;align-self:center;justify-content:center}:where([data-cck-theme-name=cocokits] .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=cocokits] .cck-tabs--align-stretch .cck-tabs__headers-wrapper){align-items:stretch;align-self:stretch;justify-content:stretch}:where([data-cck-theme-name=cocokits] .cck-tabs__fill .cck-tabs__headers-wrapper){background-color:var(--color-surface-inverse-alpha-3);border-radius:12px;padding:4px}:where([data-cck-theme-name=cocokits] .cck-tabs__border .cck-tabs__headers-wrapper){border:2px solid var(--color-surface-inverse-alpha-5);border-radius:16px;padding:4px}:where([data-cck-theme-name=cocokits] .cck-tabs__size--sm .cck-tabs__headers-wrapper){min-height:36px}:where([data-cck-theme-name=cocokits] .cck-tabs__size--md .cck-tabs__headers-wrapper){min-height:40px}:where([data-cck-theme-name=cocokits] .cck-tabs__size--lg .cck-tabs__headers-wrapper){min-height:44px}:where([data-cck-theme-name=cocokits] .cck-tab){align-items:center;background:transparent;border:none;color:var(--color-font-alpha-7);cursor:pointer;display:flex;justify-content:center;outline:none;position:relative;white-space:nowrap}:where([data-cck-theme-name=cocokits] .cck-tab .cck-svg-icon.cck-svg-icon--default-color){color:currentcolor;fill:currentcolor}:where([data-cck-theme-name=cocokits] :not(.cck-tabs--instant-animation) .cck-tab){transition:color .1s}:where([data-cck-theme-name=cocokits] :not(.cck-tabs--instant-animation) .cck-tab.cck-tab--selected){transition:color .15s}:where([data-cck-theme-name=cocokits] .cck-tab__label){position:relative;z-index:1}:where([data-cck-theme-name=cocokits] .cck-tab--unselected):not(.cck-tab--disabled):focus-visible{outline:2px solid var(--color-brand-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-tab--selected){color:var(--color-font-default)}:where([data-cck-theme-name=cocokits] .cck-tab--disabled){color:var(--color-font-alpha-5);cursor:not-allowed}:where([data-cck-theme-name=cocokits] .cck-tab__indicator){height:100%;left:0;position:absolute;top:0;width:100%;z-index:0}:where([data-cck-theme-name=cocokits] .cck-tabs--align-stretch .cck-tab){flex:1}:where([data-cck-theme-name=cocokits] .cck-tabs__basic .cck-tab),:where([data-cck-theme-name=cocokits] .cck-tabs__border .cck-tab),:where([data-cck-theme-name=cocokits] .cck-tabs__fill .cck-tab){border-radius:12px}:where([data-cck-theme-name=cocokits] .cck-tabs__basic .cck-tab--unselected):not(.cck-tab--disabled):hover,:where([data-cck-theme-name=cocokits] .cck-tabs__border .cck-tab--unselected):not(.cck-tab--disabled):hover,:where([data-cck-theme-name=cocokits] .cck-tabs__fill .cck-tab--unselected):not(.cck-tab--disabled):hover{background-color:var(--color-surface-inverse-alpha-2)}:where([data-cck-theme-name=cocokits] .cck-tabs__basic .cck-tab__indicator),:where([data-cck-theme-name=cocokits] .cck-tabs__border .cck-tab__indicator),:where([data-cck-theme-name=cocokits] .cck-tabs__fill .cck-tab__indicator){background-color:var(--color-surface-inverse-alpha-4);border-radius:12px}:where([data-cck-theme-name=cocokits] .cck-tabs__basic.cck-tabs__color--default .cck-tab__indicator),:where([data-cck-theme-name=cocokits] .cck-tabs__border.cck-tabs__color--default .cck-tab__indicator),:where([data-cck-theme-name=cocokits] .cck-tabs__fill.cck-tabs__color--default .cck-tab__indicator){background-color:var(--color-surface-inverse-alpha-4)}:where([data-cck-theme-name=cocokits] .cck-tabs__basic.cck-tabs__color--brand .cck-tab__indicator),:where([data-cck-theme-name=cocokits] .cck-tabs__border.cck-tabs__color--brand .cck-tab__indicator),:where([data-cck-theme-name=cocokits] .cck-tabs__fill.cck-tabs__color--brand .cck-tab__indicator){background-color:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-tabs__basic.cck-tabs__color--brand .cck-tab.cck-tab--selected),:where([data-cck-theme-name=cocokits] .cck-tabs__border.cck-tabs__color--brand .cck-tab.cck-tab--selected),:where([data-cck-theme-name=cocokits] .cck-tabs__fill.cck-tabs__color--brand .cck-tab.cck-tab--selected){color:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-tabs__basic.cck-tabs__color--info .cck-tab__indicator),:where([data-cck-theme-name=cocokits] .cck-tabs__border.cck-tabs__color--info .cck-tab__indicator),:where([data-cck-theme-name=cocokits] .cck-tabs__fill.cck-tabs__color--info .cck-tab__indicator){background-color:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-tabs__basic.cck-tabs__color--info .cck-tab.cck-tab--selected),:where([data-cck-theme-name=cocokits] .cck-tabs__border.cck-tabs__color--info .cck-tab.cck-tab--selected),:where([data-cck-theme-name=cocokits] .cck-tabs__fill.cck-tabs__color--info .cck-tab.cck-tab--selected){color:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-tabs__basic.cck-tabs__color--warning .cck-tab__indicator),:where([data-cck-theme-name=cocokits] .cck-tabs__border.cck-tabs__color--warning .cck-tab__indicator),:where([data-cck-theme-name=cocokits] .cck-tabs__fill.cck-tabs__color--warning .cck-tab__indicator){background-color:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-tabs__basic.cck-tabs__color--warning .cck-tab.cck-tab--selected),:where([data-cck-theme-name=cocokits] .cck-tabs__border.cck-tabs__color--warning .cck-tab.cck-tab--selected),:where([data-cck-theme-name=cocokits] .cck-tabs__fill.cck-tabs__color--warning .cck-tab.cck-tab--selected){color:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-tabs__basic.cck-tabs__color--error .cck-tab__indicator),:where([data-cck-theme-name=cocokits] .cck-tabs__border.cck-tabs__color--error .cck-tab__indicator),:where([data-cck-theme-name=cocokits] .cck-tabs__fill.cck-tabs__color--error .cck-tab__indicator){background-color:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-tabs__basic.cck-tabs__color--error .cck-tab.cck-tab--selected),:where([data-cck-theme-name=cocokits] .cck-tabs__border.cck-tabs__color--error .cck-tab.cck-tab--selected),:where([data-cck-theme-name=cocokits] .cck-tabs__fill.cck-tabs__color--error .cck-tab.cck-tab--selected){color:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-tabs__basic.cck-tabs__color--h-contrast .cck-tab__indicator),:where([data-cck-theme-name=cocokits] .cck-tabs__border.cck-tabs__color--h-contrast .cck-tab__indicator),:where([data-cck-theme-name=cocokits] .cck-tabs__fill.cck-tabs__color--h-contrast .cck-tab__indicator){background-color:var(--color-h-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-tabs__basic.cck-tabs__color--h-contrast .cck-tab.cck-tab--selected),:where([data-cck-theme-name=cocokits] .cck-tabs__border.cck-tabs__color--h-contrast .cck-tab.cck-tab--selected),:where([data-cck-theme-name=cocokits] .cck-tabs__fill.cck-tabs__color--h-contrast .cck-tab.cck-tab--selected){color:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-tabs__line.cck-tabs__color--default .cck-tab__indicator){border-bottom:2px solid var(--color-surface-inverse-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-tabs__line.cck-tabs__color--brand .cck-tab__indicator){border-bottom:2px solid var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-tabs__line.cck-tabs__color--info .cck-tab__indicator){border-bottom:2px solid var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-tabs__line.cck-tabs__color--warning .cck-tab__indicator){border-bottom:2px solid var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-tabs__line.cck-tabs__color--error .cck-tab__indicator){border-bottom:2px solid var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-tabs__line.cck-tabs__color--h-contrast .cck-tab__indicator){border-bottom:2px solid var(--color-h-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-tabs__size--sm .cck-tab){font:var(--text-sm-regular);height:32px;padding:0 12px}:where([data-cck-theme-name=cocokits] .cck-tabs__size--sm .cck-tab.cck-tab--selected){font:var(--text-sm-medium)}:where([data-cck-theme-name=cocokits] .cck-tabs__size--md .cck-tab){font:var(--text-md-regular);height:36px;padding:0 12px}:where([data-cck-theme-name=cocokits] .cck-tabs__size--md .cck-tab.cck-tab--selected){font:var(--text-md-regular)}:where([data-cck-theme-name=cocokits] .cck-tabs__size--lg .cck-tab){font:var(--text-md-regular);height:40px;padding:0 20px}:where([data-cck-theme-name=cocokits] .cck-tabs__size--lg .cck-tab.cck-tab--selected){font:var(--text-md-medium)}: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--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--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__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 +: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--default-color){fill:inherit}: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__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){display:flex;flex-direction:column;gap:var(--size-12)}:where([data-cck-theme-name=cocokits] .cck-tabs__headers-wrapper){display:flex;flex-wrap:wrap;gap:var(--size-4);justify-content:center}:where([data-cck-theme-name=cocokits] .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=cocokits] .cck-tabs--align-center .cck-tabs__headers-wrapper){align-items:center;align-self:center;justify-content:center}:where([data-cck-theme-name=cocokits] .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=cocokits] .cck-tabs--align-stretch .cck-tabs__headers-wrapper){align-items:stretch;align-self:stretch;justify-content:stretch}:where([data-cck-theme-name=cocokits] .cck-tabs__fill .cck-tabs__headers-wrapper){background-color:var(--color-surface-inverse-alpha-3);border-radius:12px;padding:4px}:where([data-cck-theme-name=cocokits] .cck-tabs__border .cck-tabs__headers-wrapper){border:2px solid var(--color-surface-inverse-alpha-5);border-radius:16px;padding:4px}:where([data-cck-theme-name=cocokits] .cck-tabs__size--sm .cck-tabs__headers-wrapper){min-height:36px}:where([data-cck-theme-name=cocokits] .cck-tabs__size--md .cck-tabs__headers-wrapper){min-height:40px}:where([data-cck-theme-name=cocokits] .cck-tabs__size--lg .cck-tabs__headers-wrapper){min-height:44px}:where([data-cck-theme-name=cocokits] .cck-tab){align-items:center;background:transparent;border:none;color:var(--color-font-alpha-7);cursor:pointer;display:flex;justify-content:center;outline:none;position:relative;white-space:nowrap}:where([data-cck-theme-name=cocokits] .cck-tab .cck-svg-icon.cck-svg-icon--default-color){color:currentcolor;fill:currentcolor}:where([data-cck-theme-name=cocokits] :not(.cck-tabs--instant-animation) .cck-tab){transition:color .1s}:where([data-cck-theme-name=cocokits] :not(.cck-tabs--instant-animation) .cck-tab.cck-tab--selected){transition:color .15s}:where([data-cck-theme-name=cocokits] .cck-tab__label){position:relative;z-index:1}:where([data-cck-theme-name=cocokits] .cck-tab--unselected):not(.cck-tab--disabled):focus-visible{outline:2px solid var(--color-brand-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-tab--selected){color:var(--color-font-default)}:where([data-cck-theme-name=cocokits] .cck-tab--disabled){color:var(--color-font-alpha-5);cursor:not-allowed}:where([data-cck-theme-name=cocokits] .cck-tab__indicator){height:100%;left:0;position:absolute;top:0;width:100%;z-index:0}:where([data-cck-theme-name=cocokits] .cck-tabs--align-stretch .cck-tab){flex:1}:where([data-cck-theme-name=cocokits] .cck-tabs__basic .cck-tab),:where([data-cck-theme-name=cocokits] .cck-tabs__border .cck-tab),:where([data-cck-theme-name=cocokits] .cck-tabs__fill .cck-tab){border-radius:12px}:where([data-cck-theme-name=cocokits] .cck-tabs__basic .cck-tab--unselected):not(.cck-tab--disabled):hover,:where([data-cck-theme-name=cocokits] .cck-tabs__border .cck-tab--unselected):not(.cck-tab--disabled):hover,:where([data-cck-theme-name=cocokits] .cck-tabs__fill .cck-tab--unselected):not(.cck-tab--disabled):hover{background-color:var(--color-surface-inverse-alpha-2)}:where([data-cck-theme-name=cocokits] .cck-tabs__basic .cck-tab__indicator),:where([data-cck-theme-name=cocokits] .cck-tabs__border .cck-tab__indicator),:where([data-cck-theme-name=cocokits] .cck-tabs__fill .cck-tab__indicator){background-color:var(--color-surface-inverse-alpha-4);border-radius:12px}:where([data-cck-theme-name=cocokits] .cck-tabs__basic.cck-tabs__color--default .cck-tab__indicator),:where([data-cck-theme-name=cocokits] .cck-tabs__border.cck-tabs__color--default .cck-tab__indicator),:where([data-cck-theme-name=cocokits] .cck-tabs__fill.cck-tabs__color--default .cck-tab__indicator){background-color:var(--color-surface-inverse-alpha-4)}:where([data-cck-theme-name=cocokits] .cck-tabs__basic.cck-tabs__color--brand .cck-tab__indicator),:where([data-cck-theme-name=cocokits] .cck-tabs__border.cck-tabs__color--brand .cck-tab__indicator),:where([data-cck-theme-name=cocokits] .cck-tabs__fill.cck-tabs__color--brand .cck-tab__indicator){background-color:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-tabs__basic.cck-tabs__color--brand .cck-tab.cck-tab--selected),:where([data-cck-theme-name=cocokits] .cck-tabs__border.cck-tabs__color--brand .cck-tab.cck-tab--selected),:where([data-cck-theme-name=cocokits] .cck-tabs__fill.cck-tabs__color--brand .cck-tab.cck-tab--selected){color:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-tabs__basic.cck-tabs__color--info .cck-tab__indicator),:where([data-cck-theme-name=cocokits] .cck-tabs__border.cck-tabs__color--info .cck-tab__indicator),:where([data-cck-theme-name=cocokits] .cck-tabs__fill.cck-tabs__color--info .cck-tab__indicator){background-color:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-tabs__basic.cck-tabs__color--info .cck-tab.cck-tab--selected),:where([data-cck-theme-name=cocokits] .cck-tabs__border.cck-tabs__color--info .cck-tab.cck-tab--selected),:where([data-cck-theme-name=cocokits] .cck-tabs__fill.cck-tabs__color--info .cck-tab.cck-tab--selected){color:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-tabs__basic.cck-tabs__color--warning .cck-tab__indicator),:where([data-cck-theme-name=cocokits] .cck-tabs__border.cck-tabs__color--warning .cck-tab__indicator),:where([data-cck-theme-name=cocokits] .cck-tabs__fill.cck-tabs__color--warning .cck-tab__indicator){background-color:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-tabs__basic.cck-tabs__color--warning .cck-tab.cck-tab--selected),:where([data-cck-theme-name=cocokits] .cck-tabs__border.cck-tabs__color--warning .cck-tab.cck-tab--selected),:where([data-cck-theme-name=cocokits] .cck-tabs__fill.cck-tabs__color--warning .cck-tab.cck-tab--selected){color:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-tabs__basic.cck-tabs__color--error .cck-tab__indicator),:where([data-cck-theme-name=cocokits] .cck-tabs__border.cck-tabs__color--error .cck-tab__indicator),:where([data-cck-theme-name=cocokits] .cck-tabs__fill.cck-tabs__color--error .cck-tab__indicator){background-color:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-tabs__basic.cck-tabs__color--error .cck-tab.cck-tab--selected),:where([data-cck-theme-name=cocokits] .cck-tabs__border.cck-tabs__color--error .cck-tab.cck-tab--selected),:where([data-cck-theme-name=cocokits] .cck-tabs__fill.cck-tabs__color--error .cck-tab.cck-tab--selected){color:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-tabs__basic.cck-tabs__color--h-contrast .cck-tab__indicator),:where([data-cck-theme-name=cocokits] .cck-tabs__border.cck-tabs__color--h-contrast .cck-tab__indicator),:where([data-cck-theme-name=cocokits] .cck-tabs__fill.cck-tabs__color--h-contrast .cck-tab__indicator){background-color:var(--color-h-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-tabs__basic.cck-tabs__color--h-contrast .cck-tab.cck-tab--selected),:where([data-cck-theme-name=cocokits] .cck-tabs__border.cck-tabs__color--h-contrast .cck-tab.cck-tab--selected),:where([data-cck-theme-name=cocokits] .cck-tabs__fill.cck-tabs__color--h-contrast .cck-tab.cck-tab--selected){color:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-tabs__line.cck-tabs__color--default .cck-tab__indicator){border-bottom:2px solid var(--color-surface-inverse-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-tabs__line.cck-tabs__color--brand .cck-tab__indicator){border-bottom:2px solid var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-tabs__line.cck-tabs__color--info .cck-tab__indicator){border-bottom:2px solid var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-tabs__line.cck-tabs__color--warning .cck-tab__indicator){border-bottom:2px solid var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-tabs__line.cck-tabs__color--error .cck-tab__indicator){border-bottom:2px solid var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-tabs__line.cck-tabs__color--h-contrast .cck-tab__indicator){border-bottom:2px solid var(--color-h-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-tabs__size--sm .cck-tab){font:var(--text-sm-regular);height:32px;padding:0 12px}:where([data-cck-theme-name=cocokits] .cck-tabs__size--sm .cck-tab.cck-tab--selected){font:var(--text-sm-medium)}:where([data-cck-theme-name=cocokits] .cck-tabs__size--md .cck-tab){font:var(--text-md-regular);height:36px;padding:0 12px}:where([data-cck-theme-name=cocokits] .cck-tabs__size--md .cck-tab.cck-tab--selected){font:var(--text-md-regular)}:where([data-cck-theme-name=cocokits] .cck-tabs__size--lg .cck-tab){font:var(--text-md-regular);height:40px;padding:0 20px}:where([data-cck-theme-name=cocokits] .cck-tabs__size--lg .cck-tab.cck-tab--selected){font:var(--text-md-medium)}:where([data-cck-theme-name=cocokits] .cck-badge){align-items:center;display:inline-flex;justify-content:center}:where([data-cck-theme-name=cocokits] .cck-badge--hidden){display:none}:where([data-cck-theme-name=cocokits] .cck-badge__rounded){border-radius:500px}:where([data-cck-theme-name=cocokits] .cck-badge__rectangle){border-radius:4px}:where([data-cck-theme-name=cocokits] .cck-badge__color--brand){background-color:var(--color-brand-default);color:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-badge__color--info){background-color:var(--color-info-default);color:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-badge__color--warning){background-color:var(--color-warning-default);color:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-badge__color--error){background-color:var(--color-error-default);color:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-badge__color--h-contrast){background-color:var(--color-h-contrast-default);color:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-badge--with-content.cck-badge__size--sm){font:var(--text-xs-regular);height:18px;min-width:18px;padding:0 4px}:where([data-cck-theme-name=cocokits] .cck-badge--with-content.cck-badge__size--md){font:var(--text-xs-medium);height:22px;min-width:22px;padding:0 4px}:where([data-cck-theme-name=cocokits] .cck-badge--with-content.cck-badge__size--lg){font:var(--text-sm-medium);height:24px;min-width:24px;padding:0 8px}:where([data-cck-theme-name=cocokits] .cck-badge--with-content.cck-badge__size--xl){font:var(--text-md-medium);height:28px;min-width:28px;padding:0 8px}:where([data-cck-theme-name=cocokits] .cck-badge--without-content.cck-badge__size--sm){height:6px;width:6px}:where([data-cck-theme-name=cocokits] .cck-badge--without-content.cck-badge__size--md){height:8px;width:8px}:where([data-cck-theme-name=cocokits] .cck-badge--without-content.cck-badge__size--lg){height:12px;width:12px}:where([data-cck-theme-name=cocokits] .cck-badge--without-content.cck-badge__size--xl){height:16px;width:16px}:where([data-cck-theme-name=cocokits] .cck-badge-container){align-items:center;display:flex;justify-content:center;position:relative}:where([data-cck-theme-name=cocokits] .cck-badge-container__badge-wrapper){align-items:center;display:flex;justify-content:center;position:absolute}:where([data-cck-theme-name=cocokits] :not(.cck-badge-container--custom-offset).cck-badge-container--top-left .cck-badge-container__badge-wrapper){left:calc(var(--cck-badge-radius, 0px)*.2929);top:calc(var(--cck-badge-radius, 0px)*.2929);transform:translate(-50%,-50%)}:where([data-cck-theme-name=cocokits] :not(.cck-badge-container--custom-offset).cck-badge-container--top-right .cck-badge-container__badge-wrapper){right:calc(var(--cck-badge-radius, 0px)*.2929);top:calc(var(--cck-badge-radius, 0px)*.2929);transform:translate(50%,-50%)}:where([data-cck-theme-name=cocokits] :not(.cck-badge-container--custom-offset).cck-badge-container--bottom-left .cck-badge-container__badge-wrapper){bottom:calc(var(--cck-badge-radius, 0px)*.2929);left:calc(var(--cck-badge-radius, 0px)*.2929);transform:translate(-50%,50%)}:where([data-cck-theme-name=cocokits] :not(.cck-badge-container--custom-offset).cck-badge-container--bottom-right .cck-badge-container__badge-wrapper){bottom:calc(var(--cck-badge-radius, 0px)*.2929);right:calc(var(--cck-badge-radius, 0px)*.2929);transform:translate(50%,50%)}: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--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--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__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)}:where([data-cck-theme-name=frames-x] .cck-badge){align-items:center;border-radius:var(--radi-6);display:inline-flex;justify-content:center}:where([data-cck-theme-name=frames-x] .cck-badge--hidden){display:none}:where([data-cck-theme-name=frames-x] .cck-badge__default.cck-badge__color--brand){background-color:var(--state-brand-active);border:1px solid var(--state-brand-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-badge__default.cck-badge__color--highlight){background-color:var(--state-highlight-active);border:1px solid var(--state-highlight-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-badge__default.cck-badge__color--success){background-color:var(--state-success-active);border:1px solid var(--state-success-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-badge__default.cck-badge__color--danger){background-color:var(--state-danger-active);border:1px solid var(--state-danger-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-badge__ghost.cck-badge__color--brand){background-color:var(--base-surface-2);border:1px solid var(--state-brand-active);color:var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-badge__ghost.cck-badge__color--highlight){background-color:var(--base-surface-2);border:1px solid var(--state-highlight-active);color:var(--state-highlight-active)}:where([data-cck-theme-name=frames-x] .cck-badge__ghost.cck-badge__color--success){background-color:var(--base-surface-2);border:1px solid var(--state-success-active);color:var(--state-success-active)}:where([data-cck-theme-name=frames-x] .cck-badge__ghost.cck-badge__color--danger){background-color:var(--base-surface-2);border:1px solid var(--state-danger-active);color:var(--state-danger-active)}:where([data-cck-theme-name=frames-x] .cck-badge--with-content.cck-badge__size--xs){font:var(--text-xs-font-medium);height:24px;min-width:24px;padding:0 4px}:where([data-cck-theme-name=frames-x] .cck-badge--with-content.cck-badge__size--sm){font:var(--text-base-font-semibold);height:28px;min-width:28px;padding:0 4px}:where([data-cck-theme-name=frames-x] .cck-badge--with-content.cck-badge__size--md){font:var(--text-lg-font-semibold);height:40px;min-width:40px;padding:0 8px}:where([data-cck-theme-name=frames-x] .cck-badge--with-content.cck-badge__size--lg){font:var(--text-xl-font-semibold);height:52px;min-width:52px;padding:0 8px}:where([data-cck-theme-name=frames-x] .cck-badge--without-content.cck-badge__size--xs){height:8px;width:8px}:where([data-cck-theme-name=frames-x] .cck-badge--without-content.cck-badge__size--sm){height:12px;width:12px}:where([data-cck-theme-name=frames-x] .cck-badge--without-content.cck-badge__size--md){height:16px;width:16px}:where([data-cck-theme-name=frames-x] .cck-badge--without-content.cck-badge__size--lg){height:24px;width:24px}:where([data-cck-theme-name=frames-x] .cck-badge-container){align-items:center;display:flex;justify-content:center;position:relative}:where([data-cck-theme-name=frames-x] .cck-badge-container__badge-wrapper){align-items:center;display:flex;justify-content:center;position:absolute}:where([data-cck-theme-name=frames-x] :not(.cck-badge-container--custom-offset).cck-badge-container--top-left .cck-badge-container__badge-wrapper){left:calc(var(--cck-badge-radius, 0px)*.2929);top:calc(var(--cck-badge-radius, 0px)*.2929);transform:translate(-50%,-50%)}:where([data-cck-theme-name=frames-x] :not(.cck-badge-container--custom-offset).cck-badge-container--top-right .cck-badge-container__badge-wrapper){right:calc(var(--cck-badge-radius, 0px)*.2929);top:calc(var(--cck-badge-radius, 0px)*.2929);transform:translate(50%,-50%)}:where([data-cck-theme-name=frames-x] :not(.cck-badge-container--custom-offset).cck-badge-container--bottom-left .cck-badge-container__badge-wrapper){bottom:calc(var(--cck-badge-radius, 0px)*.2929);left:calc(var(--cck-badge-radius, 0px)*.2929);transform:translate(-50%,50%)}:where([data-cck-theme-name=frames-x] :not(.cck-badge-container--custom-offset).cck-badge-container--bottom-right .cck-badge-container__badge-wrapper){bottom:calc(var(--cck-badge-radius, 0px)*.2929);right:calc(var(--cck-badge-radius, 0px)*.2929);transform:translate(50%,50%)} \ 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 ce35a765..2b40f8dc 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 @@ -546,7 +546,7 @@ a{ .story-decorator-wrapper__inside-box{ background-color:var(--cck-doc-color-bg-1); - padding:12px 24px; + padding:24px; border:1px solid var(--cck-doc-color-border-2); border-radius:var(--cck-doc-radius-md); } 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 b961bb6b..c5ff837a 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__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 +: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: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/story-control/story-control.util.ts b/packages/internal/storybook-addon-theme/src/lib/features/story-control/story-control.util.ts index 914345b7..a15b5eb2 100644 --- a/packages/internal/storybook-addon-theme/src/lib/features/story-control/story-control.util.ts +++ b/packages/internal/storybook-addon-theme/src/lib/features/story-control/story-control.util.ts @@ -1,6 +1,7 @@ +/* eslint-disable complexity */ import { PreparedStory } from '@storybook/types'; -import { toTitleCase } from '@cocokits/common-utils'; +import { toCamelCase, toTitleCase } from '@cocokits/common-utils'; import { AddonParameters, @@ -29,56 +30,60 @@ export function getStoryControls(story: PreparedStory, theme: ThemeChangeEvent) const args: Exclude[] = controls.flatMap((control) => { const isThemeConfig = control.type === AddonParametersControlType.SelectThemeConfig; + const targetThemeComponentConfig = + isThemeConfig && control.subComponentName + ? theme.themeConfig.components[control.subComponentName] + : themeComponentConfig; - if (isThemeConfig && control.prop === 'type' && themeComponentConfig.type) { + if (isThemeConfig && control.prop === 'type' && targetThemeComponentConfig?.type) { return [ { type: AddonParametersControlType.Select, - displayName: toTitleCase(themeComponentConfig.type.name), - storyArgKey: themeComponentConfig.type.name, - default: themeComponentConfig.type.default.toString(), - options: themeComponentConfig.type.values.map((value) => value.toString()), + displayName: toTitleCase(`${control.subComponentName ?? ''} ${targetThemeComponentConfig.type.name}`), + storyArgKey: toCamelCase(`${control.subComponentName ?? ''} ${targetThemeComponentConfig.type.name}`), + default: targetThemeComponentConfig.type.default.toString(), + options: targetThemeComponentConfig.type.values.map((value) => value.toString()), }, ] satisfies AddonParametersControlSelect[]; } - if (isThemeConfig && control.prop === 'color' && themeComponentConfig.color) { + if (isThemeConfig && control.prop === 'color' && targetThemeComponentConfig?.color) { return [ { type: AddonParametersControlType.Select, - displayName: toTitleCase(themeComponentConfig.color.name), - storyArgKey: themeComponentConfig.color.name, - default: themeComponentConfig.color.default.toString(), - options: themeComponentConfig.color.values.map((value) => value.toString()), + displayName: toTitleCase(`${control.subComponentName ?? ''} ${targetThemeComponentConfig.color.name}`), + storyArgKey: toCamelCase(`${control.subComponentName ?? ''} ${targetThemeComponentConfig.color.name}`), + default: targetThemeComponentConfig.color.default.toString(), + options: targetThemeComponentConfig.color.values.map((value) => value.toString()), }, ] satisfies AddonParametersControlSelect[]; } - if (isThemeConfig && control.prop === 'size' && themeComponentConfig.size) { + if (isThemeConfig && control.prop === 'size' && targetThemeComponentConfig?.size) { return [ { type: AddonParametersControlType.Select, - displayName: toTitleCase(themeComponentConfig.size.name), - storyArgKey: themeComponentConfig.size.name, - default: themeComponentConfig.size.default.toString(), - options: themeComponentConfig.size.values.map((value) => value.toString()), + displayName: toTitleCase(`${control.subComponentName ?? ''} ${targetThemeComponentConfig.size.name}`), + storyArgKey: toCamelCase(`${control.subComponentName ?? ''} ${targetThemeComponentConfig.size.name}`), + default: targetThemeComponentConfig.size.default.toString(), + options: targetThemeComponentConfig.size.values.map((value) => value.toString()), }, ] satisfies AddonParametersControlSelect[]; } - if (isThemeConfig && control.prop === 'additional' && themeComponentConfig.additional) { - return Object.values(themeComponentConfig.additional).map((prop) => { + if (isThemeConfig && control.prop === 'additional' && targetThemeComponentConfig?.additional) { + return Object.values(targetThemeComponentConfig.additional).map((prop) => { return typeof prop.default === 'boolean' ? ({ type: AddonParametersControlType.Boolean, - displayName: toTitleCase(prop.name), - storyArgKey: prop.name, + displayName: toTitleCase(`${control.subComponentName ?? ''} ${prop.name}`), + storyArgKey: toCamelCase(`${control.subComponentName ?? ''} ${prop.name}`), default: prop.default, } satisfies AddonParametersControlBoolean) : ({ type: AddonParametersControlType.Select, - displayName: toTitleCase(prop.name), - storyArgKey: prop.name, + displayName: toTitleCase(`${control.subComponentName ?? ''} ${prop.name}`), + storyArgKey: toCamelCase(`${control.subComponentName ?? ''} ${prop.name}`), default: prop.default.toString(), options: prop.values.map((value) => value.toString()), } satisfies AddonParametersControlSelect); 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 444ad130..1ed1aa6e 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 @@ -147,7 +147,7 @@ export function getComponentArgTypes({ (argType) => { const category = transformArgTypeCategory(argType); const defaultValue = - category === 'props' ? getValueWithoutCompodocIssue(argType.table?.defaultValue?.summary) : undefined; + category === 'props' ? serializeDefaultValue(argType.table?.defaultValue?.summary) : undefined; const type = getValueWithoutCompodocIssue( argType.table?.type?.summary === 'union' ? argType.type?.raw : argType.table?.type?.summary ); @@ -276,6 +276,20 @@ function transformArgTypeCategory(argType: StrictInputType): 'methods' | 'events return 'props'; } +function serializeDefaultValue(value: string | undefined): string { + if (!value) { + return ''; + } + // React wrap the default value with quotes, so we have to remove them. + const valueWithoutQuotes = + (value.startsWith('"') && value.endsWith('"')) || (value.startsWith("'") && value.endsWith("'")) + ? value.slice(1, -1) + : value; + + const valueWithoutCompodocIssue = getValueWithoutCompodocIssue(valueWithoutQuotes); + return valueWithoutCompodocIssue; +} + /** * Sometimes compodoc doc can not parse the correct values, that's why we have to fix it. */ 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 39ab6710..d92b0197 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 @@ -212,7 +212,7 @@ export interface AddonParametersControlImage extends AddonParametersControlBase export interface AddonParametersControlText extends AddonParametersControlBase { type: AddonParametersControlType.Text; - default: string; + default: string | undefined; } export interface AddonParametersControlNumber extends AddonParametersControlBase { @@ -228,6 +228,11 @@ export interface AddonParametersControlBoolean extends AddonParametersControlBas export interface AddonParametersControlTheme { type: AddonParametersControlType.SelectThemeConfig; prop: 'type' | 'color' | 'size' | 'additional'; + /** + * If the control is for a sub-component, this will be the name of that sub-component. + * For example `badgeContainer` has his own theme config and `badge` components sub-component that we use as content of badgeContainer. + * */ + subComponentName?: UIBaseComponentsName; } export interface StoryArgs extends Args { diff --git a/packages/internal/storybook-addon-theme/src/lib/utils/control.config.ts b/packages/internal/storybook-addon-theme/src/lib/utils/control.config.ts index 499f0172..8893d07d 100644 --- a/packages/internal/storybook-addon-theme/src/lib/utils/control.config.ts +++ b/packages/internal/storybook-addon-theme/src/lib/utils/control.config.ts @@ -2,13 +2,14 @@ import { camelCase } from 'lodash'; import { ElementAnchorPoint } from '@cocokits/common-utils'; +import { UIBaseComponentsName } from '@cocokits/core'; import { OverlayAnimationType } from '@cocokits/react-overlay'; import { AddonParametersControl, AddonParametersControlType } from '../model/addon.model'; export const customText = ( displayName: string, - defaultValue: string, + defaultValue: string | undefined, storyArgKey?: string ): AddonParametersControl => ({ displayName, @@ -19,7 +20,7 @@ export const customText = ( export const customNumber = ( displayName: string, - defaultValue: number, + defaultValue: number | undefined, storyArgKey?: string ): AddonParametersControl => ({ displayName, @@ -101,24 +102,28 @@ export const trailing = (defaultValue = ''): AddonParametersControl => ({ type: AddonParametersControlType.Text, }); -export const type = (): AddonParametersControl => ({ +export const type = (subComponentName?: UIBaseComponentsName): AddonParametersControl => ({ prop: 'type', type: AddonParametersControlType.SelectThemeConfig, + subComponentName, }); -export const color = (): AddonParametersControl => ({ +export const color = (subComponentName?: UIBaseComponentsName): AddonParametersControl => ({ prop: 'color', type: AddonParametersControlType.SelectThemeConfig, + subComponentName, }); -export const size = (): AddonParametersControl => ({ +export const size = (subComponentName?: UIBaseComponentsName): AddonParametersControl => ({ prop: 'size', type: AddonParametersControlType.SelectThemeConfig, + subComponentName, }); -export const additional = (): AddonParametersControl => ({ +export const additional = (subComponentName?: UIBaseComponentsName): AddonParametersControl => ({ prop: 'additional', type: AddonParametersControlType.SelectThemeConfig, + subComponentName, }); export const anchorPoint = (defaultValue: ElementAnchorPoint): AddonParametersControl => ({ @@ -374,7 +379,7 @@ export const alt = (defaultValue = ''): AddonParametersControl => ({ type: AddonParametersControlType.Text, }); -export const clickable = (defaultValue = true): AddonParametersControl => ({ +export const clickable = (defaultValue = false): AddonParametersControl => ({ displayName: 'Clickable', default: defaultValue, storyArgKey: 'clickable', diff --git a/packages/internal/storybook-addon-theme/src/styles/story-decorator-wrapper.scss b/packages/internal/storybook-addon-theme/src/styles/story-decorator-wrapper.scss index 8f95b203..ac9f0c3e 100644 --- a/packages/internal/storybook-addon-theme/src/styles/story-decorator-wrapper.scss +++ b/packages/internal/storybook-addon-theme/src/styles/story-decorator-wrapper.scss @@ -16,7 +16,7 @@ .story-decorator-wrapper__inside-box { background-color: var(--cck-doc-color-bg-1); - padding: 12px 24px; + padding: 24px; border: 1px solid var(--cck-doc-color-border-2); border-radius: var(--cck-doc-radius-md); } diff --git a/packages/react/avatar/src/lib/avatar-label/avatar-label.tsx b/packages/react/avatar/src/lib/avatar-label/avatar-label.tsx index a3df1004..ab92eb88 100644 --- a/packages/react/avatar/src/lib/avatar-label/avatar-label.tsx +++ b/packages/react/avatar/src/lib/avatar-label/avatar-label.tsx @@ -35,17 +35,17 @@ export interface AvatarLabelProps extends UIBaseComponentProps { children?: React.ReactNode; } -export const AvatarLabel = ({ type, size, color, additional, children, ...restProps }: AvatarLabelProps) => { +export const AvatarLabel = ({ type, size, color, additional, children, avatarPosition = 'left', labelAlignment = 'vertical', ...restProps }: AvatarLabelProps) => { const { classNames, hostClassNames } = useUiBaseComponentConfig({ componentName: 'avatarLabel', props: { type, size, color, additional }, extraHostElementClassConditions: [ - { if: restProps.avatarPosition === 'left', classes: (cn) => [cn.avatarPositionLeft] }, - { if: restProps.avatarPosition === 'right', classes: (cn) => [cn.avatarPositionRight] }, - { if: restProps.avatarPosition === 'top', classes: (cn) => [cn.avatarPositionTop] }, - { if: restProps.avatarPosition === 'bottom', classes: (cn) => [cn.avatarPositionBottom] }, - { if: restProps.labelAlignment === 'horizontal', classes: (cn) => [cn.labelAlignmentHorizontal] }, - { if: restProps.labelAlignment === 'vertical', classes: (cn) => [cn.labelAlignmentVertical] } + { if: avatarPosition === 'left', classes: (cn) => [cn.avatarPositionLeft] }, + { if: avatarPosition === 'right', classes: (cn) => [cn.avatarPositionRight] }, + { if: avatarPosition === 'top', classes: (cn) => [cn.avatarPositionTop] }, + { if: avatarPosition === 'bottom', classes: (cn) => [cn.avatarPositionBottom] }, + { if: labelAlignment === 'horizontal', classes: (cn) => [cn.labelAlignmentHorizontal] }, + { if: labelAlignment === 'vertical', classes: (cn) => [cn.labelAlignmentVertical] } ] }); diff --git a/packages/react/avatar/src/lib/avatar/avatar.tsx b/packages/react/avatar/src/lib/avatar/avatar.tsx index b45564cb..ae14d1e7 100644 --- a/packages/react/avatar/src/lib/avatar/avatar.tsx +++ b/packages/react/avatar/src/lib/avatar/avatar.tsx @@ -35,7 +35,7 @@ export interface AvatarProps extends UIBaseComponentProps { /** * Whether the avatar should be clickable. - * @defaultValue true + * @defaultValue false */ clickable?: boolean; @@ -53,7 +53,7 @@ export interface AvatarProps extends UIBaseComponentProps { contentTemp?: React.ReactNode; } -export function Avatar({ clickable = true, ...restProps }: AvatarProps) { +export function Avatar({ clickable = false, ...restProps }: AvatarProps) { const avatarGroupContext = React.useContext(AvatarGroupContext); const avatarLabelContext = React.useContext(AvatarLabelContext); diff --git a/packages/react/badge/.eslintrc.json b/packages/react/badge/.eslintrc.json new file mode 100644 index 00000000..25dad472 --- /dev/null +++ b/packages/react/badge/.eslintrc.json @@ -0,0 +1,11 @@ +{ + "extends": ["plugin:@nx/react", "../../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], + "extends": ["../../../tools/eslint/eslint.react.json"], + "rules": {} + } + ] +} diff --git a/packages/react/badge/LICENSE b/packages/react/badge/LICENSE new file mode 100644 index 00000000..637feac8 --- /dev/null +++ b/packages/react/badge/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/react/badge/README.md b/packages/react/badge/README.md new file mode 100644 index 00000000..3d6e63de --- /dev/null +++ b/packages/react/badge/README.md @@ -0,0 +1,56 @@ +# @cocokits/react-badge + +The `@cocokits/react-badge` package provides essential UI components for displaying notifications, counts, and status indicators in React applications. The components included in this package are designed to be flexible, customizable, and easy to integrate into various design systems. + +This package includes the following components: + +- `Badge` +- `BadgeContainer` + +--- + +## Badge + +Displays numeric/text notifications or status dots. Handles content truncation, zero-state behavior, and conditional visibility. This component is ideal for notification counters, status indicators, and other visual cues. + +### Features: + +- **Content Truncation:** Converts numbers above limit to {max}+ (e.g., 100 → 99+) +- **Zero-State Handling:** Automatically renders dot when value is 0, null, or undefined +- **Conditional Visibility:** Completely hides badge when true (overrides content) +- **Layout Independence:** Badge positioning doesn't affect the layout of other elements +- **Design System Ready:** Adapts to theme-specific sizing and colors + +--- + +## BadgeContainer + +Manages badge placement relative to target elements. Provides precise offset control without affecting layout. This component is perfect for positioning badges on buttons, icons, or other UI elements. + +### Features: + +- **Position Presets:** Positions badge at corners: top-left, top-right, bottom-left, bottom-right +- **Pixel-Perfect Placement:** Adjusts position with [x,y] pixel values (supports negative offsets) +- **Flexible Integration:** Works with any content element that needs badge indicators + +--- + +## Styling and Theming + +The components in this package do not include any built-in styles. However, `@cocokits/react-badge` adds CSS classes to the elements based on the provided configuration. You can style the components yourself or apply a theme from `CocoKits`. + +`CocoKits` provides ready-made theming options, or you can create a custom design using your CSS or SCSS styles. + +--- + +### Documentation and Examples +For detailed usage examples, configuration options, and additional documentation, visit the following links: +- [Badge](https://react.cocokits.com/?path=/docs/ui-components-badge--docs) +- [BadgeContainer](https://react.cocokits.com/?path=/docs/ui-components-badge-container--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) + +--- diff --git a/packages/react/badge/package.json b/packages/react/badge/package.json new file mode 100644 index 00000000..223a0a47 --- /dev/null +++ b/packages/react/badge/package.json @@ -0,0 +1,31 @@ +{ + "name": "@cocokits/react-badge", + "version": "0.0.0", + "private": false, + "main": "./index.js", + "types": "./index.d.ts", + "dependencies": { + "@cocokits/react-core": "workspace:*", + "@cocokits/core": "workspace:*", + "@cocokits/react-utils": "workspace:*", + "@cocokits/common-utils": "workspace:*" + }, + "peerDependencies": { + "react": "^18.3.0", + "react-dom": "^18.3.0" + }, + "devDependencies": { + "@types/react": "^18.3.0", + "@types/react-dom": "^18.3.0" + }, + "exports": { + ".": { + "import": "./index.mjs", + "require": "./index.js" + } + }, + "publishConfig": { + "directory": "../../../dist/packages/react/badge", + "access": "public" + } +} diff --git a/packages/react/badge/project.json b/packages/react/badge/project.json new file mode 100644 index 00000000..bf289dc3 --- /dev/null +++ b/packages/react/badge/project.json @@ -0,0 +1,16 @@ +{ + "name": "@cocokits/react-badge", + "$schema": "../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "packages/react/badge/src", + "projectType": "library", + "tags": ["type:ui", "framework:react"], + "// targets": "to see all targets run: nx show project button --web", + "targets": { + "build": { + "outputs": ["{workspaceRoot}/dist/packages/react/badge"] + }, + "quick-fix-eslint": { + "executor": "@nx/eslint:lint" + } + } +} diff --git a/packages/react/badge/src/index.ts b/packages/react/badge/src/index.ts new file mode 100644 index 00000000..dbd22131 --- /dev/null +++ b/packages/react/badge/src/index.ts @@ -0,0 +1,3 @@ +export * from './lib/badge/badge'; + +export * from './lib/badge-container/badge-container'; diff --git a/packages/react/badge/src/lib/badge-container/badge-container.tsx b/packages/react/badge/src/lib/badge-container/badge-container.tsx new file mode 100644 index 00000000..b96445e3 --- /dev/null +++ b/packages/react/badge/src/lib/badge-container/badge-container.tsx @@ -0,0 +1,86 @@ +import { CSSProperties, ReactNode } from 'react'; + +import { UIBaseComponentProps } from '@cocokits/core'; +import { useUiBaseComponentConfig } from '@cocokits/react-core'; +import { useSlotChildren } from '@cocokits/react-utils'; + +export interface BadgeContainerProps extends UIBaseComponentProps { + + /** Position of the badge. */ + position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'; + + /** + * [horizontal, vertical] pixel adjustment for badge position. + * Allows control over badge positioning. + * @example ['10px', '20px'] + */ + offset?: [string, string]; + + /** + * Controls the corner rounding of the component. Accepts any valid CSS border-radius value + * including pixels (e.g. "12px"), percentages (e.g. "50%"). + * Percentage values are relative to the component's dimensions. + * Useful for when the content is curved such as avatars. + */ + radius?: string; + + /** + * Content to display inside the badge container with the badge component + * This can be any valid ReactNode, such as text, images, or other 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 BadgeContainer = ({ + position = 'top-left', + offset, + radius = '0px', + children, + className, + style, + type, + size, + color, + additional +}: BadgeContainerProps) => { + const { classNames, hostClassNames } = useUiBaseComponentConfig({ + componentName: 'badgeContainer', + props: { type, size, color, additional }, + extraHostElementClassConditions: [ + { if: !!className, classes: () => [className] }, + { if: position === 'top-left', classes: (cn) => [cn.topLeft] }, + { if: position === 'top-right', classes: (cn) => [cn.topRight] }, + { if: position === 'bottom-left', classes: (cn) => [cn.bottomLeft] }, + { if: position === 'bottom-right', classes: (cn) => [cn.bottomRight] }, + { if: offset && !!offset[0] && !!offset[1], classes: (cn) => [cn.customOffset] }, + ], + }); + + const transformBadgeWrapper = (offset && offset[0] && offset[1]) ? `translate(${offset[0]}, ${offset[1]})` : undefined; + const [badgeChild, restChildren] = useSlotChildren(children, 'Badge'); + + return ( +
+ {restChildren} + +
+ {badgeChild} +
+
+ ); +}; + +BadgeContainer.displayName = 'BadgeContainer'; +export default BadgeContainer; diff --git a/packages/react/badge/src/lib/badge/badge.tsx b/packages/react/badge/src/lib/badge/badge.tsx new file mode 100644 index 00000000..d2e903ad --- /dev/null +++ b/packages/react/badge/src/lib/badge/badge.tsx @@ -0,0 +1,79 @@ +import { CSSProperties, useMemo } from 'react'; + +import { isNullish } from '@cocokits/common-utils'; +import { UIBaseComponentProps } from '@cocokits/core'; +import { useUiBaseComponentConfig } from '@cocokits/react-core'; + +export interface BadgeProps extends UIBaseComponentProps { + /** Max value before truncation. */ + max?: number; + + /** Content to display in the badge. When "", null, or undefined, shows a dot. */ + content?: number | string | undefined | null; + + /** Whether to hide the badge completely. Default is false. */ + hide?: boolean; + + /** + * 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 Badge = ({ hide = false, max, content, className, style, type, size, color, additional }: BadgeProps) => { + const withMaxIndicator = useMemo(() => { + if (isNullish(max) || isNullish(content)) { + return false; + } + + const numberContent = typeof content === 'number' ? content : parseInt(content); + + if (isNaN(numberContent) || max <= 0) { + return false; + } + return max < numberContent; + }, [max, content]); + + const truncationContent = useMemo(() => { + if (isNullish(content)) { + return ''; + } + + const contentAsNumber = parseInt(content as string); + if (withMaxIndicator && !isNaN(contentAsNumber) && !isNullish(max)) { + return Math.min(contentAsNumber, max); + } + + return content; + }, [content, withMaxIndicator, max]); + + const { classNames, hostClassNames } = useUiBaseComponentConfig({ + componentName: 'badge', + props: { type, size, color, additional }, + extraHostElementClassConditions: [ + { if: !!className, classes: () => [className] }, + { if: withMaxIndicator, classes: (cn) => [cn.maxIndicator] }, + { if: !!truncationContent, classes: (cn) => [cn.withContent] }, + { if: !truncationContent, classes: (cn) => [cn.withoutContent] }, + { if: hide, classes: (cn) => [cn.hidden] }, + ], + }); + + return ( +
+ {!hide && ( + <> + {truncationContent} + {withMaxIndicator && +} + + )} +
+ ); +}; + +Badge.displayName = 'Badge'; +export default Badge; diff --git a/packages/react/badge/tsconfig.json b/packages/react/badge/tsconfig.json new file mode 100644 index 00000000..89f8ac08 --- /dev/null +++ b/packages/react/badge/tsconfig.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "jsx": "react-jsx", + "allowJs": false, + "esModuleInterop": false, + "allowSyntheticDefaultImports": true, + "strict": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + } + ], + "extends": "../../../tsconfig.base.json" +} diff --git a/packages/react/badge/tsconfig.lib.json b/packages/react/badge/tsconfig.lib.json new file mode 100644 index 00000000..02faf5d1 --- /dev/null +++ b/packages/react/badge/tsconfig.lib.json @@ -0,0 +1,22 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "%= offsetPathToRoot /dist/out-tsc", + "types": ["node", "@nx/react/typings/cssmodule.d.ts", "@nx/react/typings/image.d.ts", "vite/client"] + }, + "exclude": [ + "**/*.spec.ts", + "**/*.test.ts", + "**/*.spec.tsx", + "**/*.test.tsx", + "**/*.spec.js", + "**/*.test.js", + "**/*.spec.jsx", + "**/*.test.jsx", + "**/*.stories.ts", + "**/*.stories.js", + "**/*.stories.jsx", + "**/*.stories.tsx" + ], + "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"] +} diff --git a/packages/react/badge/vite.config.ts b/packages/react/badge/vite.config.ts new file mode 100644 index 00000000..2fba32a5 --- /dev/null +++ b/packages/react/badge/vite.config.ts @@ -0,0 +1,60 @@ +/// +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'; + +import { getExternalPackages } from '../../../tools/scripts/get-external-packages'; + +export default defineConfig({ + root: __dirname, + cacheDir: '../../../node_modules/.vite/packages/react/badge', + assetsInclude: path.join(__dirname, 'README.md'), + + plugins: [ + react(), + nxViteTsPaths(), + peerDepsExternal(), + dts({ + entryRoot: 'src', + tsconfigPath: path.join(__dirname, 'tsconfig.lib.json'), + aliasesExclude: [/^@cocokits\//], + }), + copy({ + targets: [{ src: 'README.md', dest: '../../../dist/packages/react/badge' }], + hook: 'writeBundle', + }), + ], + + // Uncomment this if you are using workers. + // worker: { + // plugins: [ nxViteTsPaths() ], + // }, + + // Configuration for building your library. + // See: https://vitejs.dev/guide/build.html#library-mode + build: { + outDir: '../../../dist/packages/react/badge', + emptyOutDir: true, + reportCompressedSize: true, + commonjsOptions: { + transformMixedEsModules: true, + }, + lib: { + // Could also be a dictionary or array of multiple entry points. + entry: 'src/index.ts', + name: 'badge', + fileName: 'index', + // Change this to the formats you want to support. + // Don't forget to update your package.json as well. + formats: ['es', 'cjs'], + }, + rollupOptions: { + // External packages that should not be bundled into your library. + external: getExternalPackages(__dirname), + }, + }, +}); diff --git a/packages/react/components/package.json b/packages/react/components/package.json index ab3ba452..e97e4620 100644 --- a/packages/react/components/package.json +++ b/packages/react/components/package.json @@ -19,7 +19,8 @@ "@cocokits/react-cdk": "workspace:*", "@cocokits/react-avatar": "workspace:*", "@cocokits/react-accordion": "workspace:*", - "@cocokits/react-tabs": "workspace:*" + "@cocokits/react-tabs": "workspace:*", + "@cocokits/react-badge": "workspace:*" }, "exports": { ".": { diff --git a/packages/themes/cocokits/src/lib/theme-config.ts b/packages/themes/cocokits/src/lib/theme-config.ts index 9961df75..96218f4c 100644 --- a/packages/themes/cocokits/src/lib/theme-config.ts +++ b/packages/themes/cocokits/src/lib/theme-config.ts @@ -364,6 +364,27 @@ const components: ThemeComponentConfigRecord = { }, }, tab: {}, + badge: { + type: { + name: 'type', + values: ['rounded', 'rectangle'], + default: 'rounded', + description: '', + }, + size: { + name: 'size', + values: ['sm', 'md', 'lg', 'xl'], + default: 'md', + description: '', + }, + color: { + name: 'color', + values: ['brand', 'info', 'warning', 'error', 'h-contrast'], + default: 'h-contrast', + description: '', + }, + }, + badgeContainer: {}, }; 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 63ab9784..45307f9e 100644 --- a/packages/themes/cocokits/src/styles/scss/_all.scss +++ b/packages/themes/cocokits/src/styles/scss/_all.scss @@ -33,6 +33,8 @@ @use './accordion-panel' as *; @use './tabs' as *; @use './tab' as *; +@use './badge' as *; +@use './badge-container' as *; @mixin all { @include button; @@ -70,4 +72,6 @@ @include accordion-panel; @include tabs; @include tab; + @include badge; + @include badge-container; } diff --git a/packages/themes/cocokits/src/styles/scss/_badge-container.scss b/packages/themes/cocokits/src/styles/scss/_badge-container.scss new file mode 100644 index 00000000..743a6c97 --- /dev/null +++ b/packages/themes/cocokits/src/styles/scss/_badge-container.scss @@ -0,0 +1,69 @@ +@use '../../token/scss' as *; +@use './selector-names/badge-container-selector-names' as S; + +/** + * Calculates the optimal badge positioning offset to account for border-radius curvature. + * + * The magic number 0.2929 (1 - cos(45°)) compensates for the visible corner position + * in rounded containers. When a container has border-radius, the actual visible corner + * begins at approximately 29.29% of the radius value inward from the mathematical corner. + * + * Usage Example: + * .badge { + * right: badge-offset(); + * top: badge-offset(); + * } + * + * Mathematical Proof: + * - On a rounded corner, the point where the curve becomes visible forms a 45° angle + * - The offset distance from the mathematical corner is radius(1 - cosθ) + * - At θ=45°, cos(45°) ≈ 0.7071 → offset = radius(1 - 0.7071) ≈ 0.2929radius + * + * This ensures badges appear visually aligned with the visible corner edge + * regardless of the container's border-radius value. + */ +@function badge-offset() { + @return calc(0.2929 * var(--cck-badge-radius, 0px)); +} + +@mixin badge-container { + #{S.$badgeContainer} { + display: flex; + align-items: center; + justify-content: center; + position: relative; + } + + #{S.$badgeWrapper} { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + } + + :not(#{S.$customOffset}) { + &#{S.$topLeft} #{S.$badgeWrapper} { + top: badge-offset(); + left: badge-offset(); + transform: translate(-50%, -50%); + } + + &#{S.$topRight} #{S.$badgeWrapper} { + top: badge-offset(); + right: badge-offset(); + transform: translate(50%, -50%); + } + + &#{S.$bottomLeft} #{S.$badgeWrapper} { + bottom: badge-offset(); + left: badge-offset(); + transform: translate(-50%, 50%); + } + + &#{S.$bottomRight} #{S.$badgeWrapper} { + bottom: badge-offset(); + right: badge-offset(); + transform: translate(50%, 50%); + } + } +} diff --git a/packages/themes/cocokits/src/styles/scss/_badge.scss b/packages/themes/cocokits/src/styles/scss/_badge.scss new file mode 100644 index 00000000..aa432b77 --- /dev/null +++ b/packages/themes/cocokits/src/styles/scss/_badge.scss @@ -0,0 +1,98 @@ +@use '../../token/scss' as *; +@use './selector-names/badge-selector-names' as S; + +@mixin badge { + #{S.$badge} { + display: inline-flex; + align-items: center; + justify-content: center; + } + + #{S.$hidden} { + display: none; + } + + // Type + #{S.$T_rounded} { + border-radius: 500px; + } + + #{S.$T_rectangle} { + border-radius: 4px; + } + + // Color + #{S.$C_brand} { + background-color: $color-brand-default; + color: $color-font-inverse-default; + } + #{S.$C_info} { + background-color: $color-info-default; + color: $color-font-inverse-default; + } + #{S.$C_warning} { + background-color: $color-warning-default; + color: $color-font-inverse-default; + } + #{S.$C_error} { + background-color: $color-error-default; + color: $color-font-inverse-default; + } + #{S.$C_hContrast} { + background-color: $color-h-contrast-default; + color: $color-font-inverse-default; + } + + // Size + #{S.$withContent} { + &#{S.$S_sm} { + min-width: 18px; + height: 18px; + padding: 0 4px; + font: $text-xs-regular; + } + + &#{S.$S_md} { + min-width: 22px; + height: 22px; + padding: 0 4px; + font: $text-xs-medium; + } + + &#{S.$S_lg} { + min-width: 24px; + height: 24px; + padding: 0 8px; + font: $text-sm-medium; + } + + &#{S.$S_xl} { + min-width: 28px; + height: 28px; + padding: 0 8px; + font: $text-md-medium; + } + } + + #{S.$withoutContent} { + &#{S.$S_sm} { + width: 6px; + height: 6px; + } + + &#{S.$S_md} { + width: 8px; + height: 8px; + } + + &#{S.$S_lg} { + width: 12px; + height: 12px; + } + + &#{S.$S_xl} { + width: 16px; + height: 16px; + } + } +} diff --git a/packages/themes/cocokits/src/styles/scss/_index.scss b/packages/themes/cocokits/src/styles/scss/_index.scss index eda86477..fb4ba386 100644 --- a/packages/themes/cocokits/src/styles/scss/_index.scss +++ b/packages/themes/cocokits/src/styles/scss/_index.scss @@ -34,3 +34,5 @@ @forward './accordion-panel' as components_*; @forward './tabs' as components_*; @forward './tab' as components_*; +@forward './badge' as components_*; +@forward './badge-container' as components_*; diff --git a/packages/themes/cocokits/src/styles/scss/selector-names/_badge-container-selector-names.scss b/packages/themes/cocokits/src/styles/scss/selector-names/_badge-container-selector-names.scss new file mode 100644 index 00000000..0d094d70 --- /dev/null +++ b/packages/themes/cocokits/src/styles/scss/selector-names/_badge-container-selector-names.scss @@ -0,0 +1,8 @@ +// Elements +$badgeContainer: '.cck-badge-container'; +$badgeWrapper: '.cck-badge-container__badge-wrapper'; +$topLeft: '.cck-badge-container--top-left'; +$topRight: '.cck-badge-container--top-right'; +$bottomLeft: '.cck-badge-container--bottom-left'; +$bottomRight: '.cck-badge-container--bottom-right'; +$customOffset: '.cck-badge-container--custom-offset'; diff --git a/packages/themes/cocokits/src/styles/scss/selector-names/_badge-selector-names.scss b/packages/themes/cocokits/src/styles/scss/selector-names/_badge-selector-names.scss new file mode 100644 index 00000000..26fbeb8b --- /dev/null +++ b/packages/themes/cocokits/src/styles/scss/selector-names/_badge-selector-names.scss @@ -0,0 +1,24 @@ +// Type +$T_rounded: '.cck-badge__rounded'; +$T_rectangle: '.cck-badge__rectangle'; + +// Size +$S_sm: '.cck-badge__size--sm'; +$S_md: '.cck-badge__size--md'; +$S_lg: '.cck-badge__size--lg'; +$S_xl: '.cck-badge__size--xl'; + +// Color +$C_brand: '.cck-badge__color--brand'; +$C_info: '.cck-badge__color--info'; +$C_warning: '.cck-badge__color--warning'; +$C_error: '.cck-badge__color--error'; +$C_hContrast: '.cck-badge__color--h-contrast'; + +// Elements +$badge: '.cck-badge'; +$content: '.cck-badge__content'; +$maxIndicator: '.cck-badge__max-indicator'; +$withContent: '.cck-badge--with-content'; +$withoutContent: '.cck-badge--without-content'; +$hidden: '.cck-badge--hidden'; diff --git a/packages/themes/cocokits/src/styles/scss/variants/_icon-button-shared.scss b/packages/themes/cocokits/src/styles/scss/variants/_icon-button-shared.scss index cdf818a5..a516ca84 100644 --- a/packages/themes/cocokits/src/styles/scss/variants/_icon-button-shared.scss +++ b/packages/themes/cocokits/src/styles/scss/variants/_icon-button-shared.scss @@ -17,6 +17,10 @@ fill: $color-disabled-font; cursor: default; } + + .cck-svg-icon--default-color { + fill: inherit; + } } .cck-icon-button .cck-svg-icon { @@ -24,10 +28,6 @@ height: 100%; } - .cck-icon-button .cck-svg-icon__svg { - fill: inherit; - } - .cck-icon-button__rounded--false { border-radius: 4px; } diff --git a/packages/themes/frames-x/src/lib/theme-config.ts b/packages/themes/frames-x/src/lib/theme-config.ts index 953ed496..b3a17bab 100644 --- a/packages/themes/frames-x/src/lib/theme-config.ts +++ b/packages/themes/frames-x/src/lib/theme-config.ts @@ -274,6 +274,27 @@ const components: ThemeComponentConfigRecord = { }, }, tab: {}, + badge: { + type: { + name: 'type', + values: ['default', 'ghost'], + default: 'default', + description: '', + }, + size: { + name: 'size', + values: ['xs', 'sm', 'md', 'lg'], + default: 'xs', + description: '', + }, + color: { + name: 'color', + values: ['brand', 'highlight', 'success', 'danger'], + default: 'highlight', + description: '', + }, + }, + badgeContainer: {}, }; 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 63ab9784..45307f9e 100644 --- a/packages/themes/frames-x/src/styles/scss/_all.scss +++ b/packages/themes/frames-x/src/styles/scss/_all.scss @@ -33,6 +33,8 @@ @use './accordion-panel' as *; @use './tabs' as *; @use './tab' as *; +@use './badge' as *; +@use './badge-container' as *; @mixin all { @include button; @@ -70,4 +72,6 @@ @include accordion-panel; @include tabs; @include tab; + @include badge; + @include badge-container; } diff --git a/packages/themes/frames-x/src/styles/scss/_badge-container.scss b/packages/themes/frames-x/src/styles/scss/_badge-container.scss new file mode 100644 index 00000000..743a6c97 --- /dev/null +++ b/packages/themes/frames-x/src/styles/scss/_badge-container.scss @@ -0,0 +1,69 @@ +@use '../../token/scss' as *; +@use './selector-names/badge-container-selector-names' as S; + +/** + * Calculates the optimal badge positioning offset to account for border-radius curvature. + * + * The magic number 0.2929 (1 - cos(45°)) compensates for the visible corner position + * in rounded containers. When a container has border-radius, the actual visible corner + * begins at approximately 29.29% of the radius value inward from the mathematical corner. + * + * Usage Example: + * .badge { + * right: badge-offset(); + * top: badge-offset(); + * } + * + * Mathematical Proof: + * - On a rounded corner, the point where the curve becomes visible forms a 45° angle + * - The offset distance from the mathematical corner is radius(1 - cosθ) + * - At θ=45°, cos(45°) ≈ 0.7071 → offset = radius(1 - 0.7071) ≈ 0.2929radius + * + * This ensures badges appear visually aligned with the visible corner edge + * regardless of the container's border-radius value. + */ +@function badge-offset() { + @return calc(0.2929 * var(--cck-badge-radius, 0px)); +} + +@mixin badge-container { + #{S.$badgeContainer} { + display: flex; + align-items: center; + justify-content: center; + position: relative; + } + + #{S.$badgeWrapper} { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + } + + :not(#{S.$customOffset}) { + &#{S.$topLeft} #{S.$badgeWrapper} { + top: badge-offset(); + left: badge-offset(); + transform: translate(-50%, -50%); + } + + &#{S.$topRight} #{S.$badgeWrapper} { + top: badge-offset(); + right: badge-offset(); + transform: translate(50%, -50%); + } + + &#{S.$bottomLeft} #{S.$badgeWrapper} { + bottom: badge-offset(); + left: badge-offset(); + transform: translate(-50%, 50%); + } + + &#{S.$bottomRight} #{S.$badgeWrapper} { + bottom: badge-offset(); + right: badge-offset(); + transform: translate(50%, 50%); + } + } +} diff --git a/packages/themes/frames-x/src/styles/scss/_badge.scss b/packages/themes/frames-x/src/styles/scss/_badge.scss new file mode 100644 index 00000000..43f89fee --- /dev/null +++ b/packages/themes/frames-x/src/styles/scss/_badge.scss @@ -0,0 +1,117 @@ +@use '../../token/scss' as *; +@use './selector-names/badge-selector-names' as S; + +@mixin badge { + #{S.$badge} { + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: $radi-6; + } + + #{S.$hidden} { + display: none; + } + + // Type + #{S.$T_default} { + // Color + &#{S.$C_brand} { + background-color: $state-brand-active; + border: 1px solid $state-brand-active; + color: $text-light-primary; + } + &#{S.$C_highlight} { + background-color: $state-highlight-active; + border: 1px solid $state-highlight-active; + color: $text-light-primary; + } + &#{S.$C_success} { + background-color: $state-success-active; + border: 1px solid $state-success-active; + color: $text-light-primary; + } + &#{S.$C_danger} { + background-color: $state-danger-active; + border: 1px solid $state-danger-active; + color: $text-light-primary; + } + } + + #{S.$T_ghost} { + // Color + &#{S.$C_brand} { + background-color: $base-surface-2; + border: 1px solid $state-brand-active; + color: $state-brand-active; + } + &#{S.$C_highlight} { + background-color: $base-surface-2; + border: 1px solid $state-highlight-active; + color: $state-highlight-active; + } + &#{S.$C_success} { + background-color: $base-surface-2; + border: 1px solid $state-success-active; + color: $state-success-active; + } + &#{S.$C_danger} { + background-color: $base-surface-2; + border: 1px solid $state-danger-active; + color: $state-danger-active; + } + } + + // Size + #{S.$withContent} { + &#{S.$S_xs} { + min-width: 24px; + height: 24px; + padding: 0 4px; + font: $text-xs-font-medium; + } + + &#{S.$S_sm} { + min-width: 28px; + height: 28px; + padding: 0 4px; + font: $text-base-font-semibold; + } + + &#{S.$S_md} { + min-width: 40px; + height: 40px; + padding: 0 8px; + font: $text-lg-font-semibold; + } + + &#{S.$S_lg} { + min-width: 52px; + height: 52px; + padding: 0 8px; + font: $text-xl-font-semibold; + } + } + + #{S.$withoutContent} { + &#{S.$S_xs} { + width: 8px; + height: 8px; + } + + &#{S.$S_sm} { + width: 12px; + height: 12px; + } + + &#{S.$S_md} { + width: 16px; + height: 16px; + } + + &#{S.$S_lg} { + width: 24px; + height: 24px; + } + } +} diff --git a/packages/themes/frames-x/src/styles/scss/_index.scss b/packages/themes/frames-x/src/styles/scss/_index.scss index eda86477..fb4ba386 100644 --- a/packages/themes/frames-x/src/styles/scss/_index.scss +++ b/packages/themes/frames-x/src/styles/scss/_index.scss @@ -34,3 +34,5 @@ @forward './accordion-panel' as components_*; @forward './tabs' as components_*; @forward './tab' as components_*; +@forward './badge' as components_*; +@forward './badge-container' as components_*; diff --git a/packages/themes/frames-x/src/styles/scss/selector-names/_badge-container-selector-names.scss b/packages/themes/frames-x/src/styles/scss/selector-names/_badge-container-selector-names.scss new file mode 100644 index 00000000..0d094d70 --- /dev/null +++ b/packages/themes/frames-x/src/styles/scss/selector-names/_badge-container-selector-names.scss @@ -0,0 +1,8 @@ +// Elements +$badgeContainer: '.cck-badge-container'; +$badgeWrapper: '.cck-badge-container__badge-wrapper'; +$topLeft: '.cck-badge-container--top-left'; +$topRight: '.cck-badge-container--top-right'; +$bottomLeft: '.cck-badge-container--bottom-left'; +$bottomRight: '.cck-badge-container--bottom-right'; +$customOffset: '.cck-badge-container--custom-offset'; diff --git a/packages/themes/frames-x/src/styles/scss/selector-names/_badge-selector-names.scss b/packages/themes/frames-x/src/styles/scss/selector-names/_badge-selector-names.scss new file mode 100644 index 00000000..2aa11e79 --- /dev/null +++ b/packages/themes/frames-x/src/styles/scss/selector-names/_badge-selector-names.scss @@ -0,0 +1,23 @@ +// Type +$T_default: '.cck-badge__default'; +$T_ghost: '.cck-badge__ghost'; + +// Size +$S_xs: '.cck-badge__size--xs'; +$S_sm: '.cck-badge__size--sm'; +$S_md: '.cck-badge__size--md'; +$S_lg: '.cck-badge__size--lg'; + +// Color +$C_brand: '.cck-badge__color--brand'; +$C_highlight: '.cck-badge__color--highlight'; +$C_success: '.cck-badge__color--success'; +$C_danger: '.cck-badge__color--danger'; + +// Elements +$badge: '.cck-badge'; +$content: '.cck-badge__content'; +$maxIndicator: '.cck-badge__max-indicator'; +$withContent: '.cck-badge--with-content'; +$withoutContent: '.cck-badge--without-content'; +$hidden: '.cck-badge--hidden'; diff --git a/tools/workspace-plugin/src/generators/ui-core-component/files/angular-storybook/__libraryFileName__/__componentFileName__/index.stories.ts.template b/tools/workspace-plugin/src/generators/ui-core-component/files/angular-storybook/__libraryFileName__/__componentFileName__/index.stories.ts.template index daf7bd7f..f690c95d 100644 --- a/tools/workspace-plugin/src/generators/ui-core-component/files/angular-storybook/__libraryFileName__/__componentFileName__/index.stories.ts.template +++ b/tools/workspace-plugin/src/generators/ui-core-component/files/angular-storybook/__libraryFileName__/__componentFileName__/index.stories.ts.template @@ -13,7 +13,6 @@ export { Color } from './overview/color.stories'; const meta: StoriesMeta = { component: <%= componentName.className %>Component, title: 'UI Components/<%= componentName.className %>', - tags: ['status:new'], decorators: [ applicationConfig({ providers: [withThemeConfigProvider()], diff --git a/tools/workspace-plugin/src/generators/ui-core-component/files/react-storybook/__libraryFileName__/__componentFileName__/index.stories.tsx.template b/tools/workspace-plugin/src/generators/ui-core-component/files/react-storybook/__libraryFileName__/__componentFileName__/index.stories.tsx.template index 7f017121..294065d7 100644 --- a/tools/workspace-plugin/src/generators/ui-core-component/files/react-storybook/__libraryFileName__/__componentFileName__/index.stories.tsx.template +++ b/tools/workspace-plugin/src/generators/ui-core-component/files/react-storybook/__libraryFileName__/__componentFileName__/index.stories.tsx.template @@ -12,7 +12,6 @@ export { Color } from './overview/color.stories'; const meta: StoriesMeta> = { component: <%= componentName.className %>, title: 'UI Components/<%= componentName.className %>', - tags: ['status:new'], decorators: [], parameters: { docs: { diff --git a/tools/workspace-plugin/src/generators/ui-core-component/files/react-storybook/__libraryFileName__/__componentFileName__/overview/size.stories.tsx.template b/tools/workspace-plugin/src/generators/ui-core-component/files/react-storybook/__libraryFileName__/__componentFileName__/overview/size.stories.tsx.template index df4cd07a..4c9726c2 100644 --- a/tools/workspace-plugin/src/generators/ui-core-component/files/react-storybook/__libraryFileName__/__componentFileName__/overview/size.stories.tsx.template +++ b/tools/workspace-plugin/src/generators/ui-core-component/files/react-storybook/__libraryFileName__/__componentFileName__/overview/size.stories.tsx.template @@ -19,7 +19,7 @@ export const Size: StoryObj> = { filename: 'Source Code', language: 'tsx', code: ` - import { <%%= componentName.className %> } from "@cocokits/react-components"; + import { <%= componentName.className %> } from "@cocokits/react-components"; export const MyComponent = () => { return ( 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 baccf3f0..58ff0400 100644 --- a/tools/workspace-plugin/src/generators/ui-core-component/schema.json +++ b/tools/workspace-plugin/src/generators/ui-core-component/schema.json @@ -23,7 +23,8 @@ "Radio", "Toggle", "Accordion", - "Tabs" + "Tabs", + "Badge" ] }, "newLibraryName": { diff --git a/tsconfig.base.json b/tsconfig.base.json index 09779d1e..b2196a96 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -22,6 +22,7 @@ "paths": { "@cocokits/angular-accordion": ["packages/angular/accordion/src/index.ts"], "@cocokits/angular-avatar": ["packages/angular/avatar/src/index.ts"], + "@cocokits/angular-badge": ["packages/angular/badge/src/index.ts"], "@cocokits/angular-button": ["packages/angular/button/src/index.ts"], "@cocokits/angular-cdk": ["packages/angular/cdk/src/index.ts"], "@cocokits/angular-checkbox": ["packages/angular/checkbox/src/index.ts"], @@ -42,6 +43,7 @@ "@cocokits/core": ["packages/common/core/src/index.ts"], "@cocokits/react-accordion": ["packages/react/accordion/src/index.ts"], "@cocokits/react-avatar": ["packages/react/avatar/src/index.ts"], + "@cocokits/react-badge": ["packages/react/badge/src/index.ts"], "@cocokits/react-button": ["packages/react/button/src/index.ts"], "@cocokits/react-cdk": ["packages/react/cdk/src/index.ts"], "@cocokits/react-checkbox": ["packages/react/checkbox/src/index.ts"], diff --git a/tsconfig.storybook-manager-paths.json b/tsconfig.storybook-manager-paths.json index 6626e7aa..d42e3fc6 100644 --- a/tsconfig.storybook-manager-paths.json +++ b/tsconfig.storybook-manager-paths.json @@ -253,6 +253,18 @@ "../packages/react/tabs/src/", "../../packages/react/tabs/src/", "../../../packages/react/tabs/src/" + ], + "@cocokits/angular-badge": [ + "packages/angular/badge/src/", + "../packages/angular/badge/src/", + "../../packages/angular/badge/src/", + "../../../packages/angular/badge/src/" + ], + "@cocokits/react-badge": [ + "packages/react/badge/src/", + "../packages/react/badge/src/", + "../../packages/react/badge/src/", + "../../../packages/react/badge/src/" ] } }