From 6af5826f5a3d35f21194c176d7e89e7eb19edbf0 Mon Sep 17 00:00:00 2001
From: Milad Faghihi <miladfm@gmail.com>
Date: Thu, 19 Jun 2025 20:07:05 +0200
Subject: [PATCH 1/8] chore: rename react-tabs to create a new library

---
 .../home/ui-components/ui-components.tsx      |  2 +-
 .../core/src/lib/class-names/class-names.ts   | 12 ++---
 .../class-names/layout-class-names-config.ts  | 12 ++---
 ...-class-names.ts => tab-class-names-old.ts} | 20 ++++----
 ...-names.ts => tab-label-class-names-old.ts} | 12 ++---
 ...class-names.ts => tabs-class-names-old.ts} | 16 +++----
 .../src/lib/model/ui-base-components-name.ts  |  4 +-
 .../features/mdx-page/mdx-page-tab-code.tsx   | 10 ++--
 .../story-control/story-control-icon.tsx      | 16 +++----
 .../story-doc-page/story-doc-page.tsx         | 22 ++++-----
 .../token-dictionary/token-dictionary.tsx     | 12 ++---
 .../src/theme/theme-config.ts                 |  6 +--
 packages/react/components/CHANGELOG.md        |  2 +-
 packages/react/components/package.json        |  2 +-
 packages/react/components/src/index.ts        |  2 +-
 .../react/{tabs => tabs-old}/.eslintrc.json   |  0
 .../react/{tabs => tabs-old}/CHANGELOG.md     |  2 +-
 packages/react/{tabs => tabs-old}/LICENSE     |  0
 packages/react/{tabs => tabs-old}/README.md   |  0
 .../react/{tabs => tabs-old}/package.json     |  2 +-
 .../react/{tabs => tabs-old}/project.json     |  2 +-
 .../react/{tabs => tabs-old}/src/index.ts     |  0
 .../{tabs => tabs-old}/src/lib/tab-label.tsx  |  4 +-
 packages/react/tabs-old/src/lib/tab.model.ts  |  8 ++++
 .../react/{tabs => tabs-old}/src/lib/tab.tsx  | 16 +++----
 .../{tabs => tabs-old}/src/lib/tabs.store.ts  | 48 +++++++++----------
 .../react/{tabs => tabs-old}/src/lib/tabs.tsx | 20 ++++----
 .../react/{tabs => tabs-old}/tsconfig.json    |  0
 .../{tabs => tabs-old}/tsconfig.lib.json      |  0
 .../react/{tabs => tabs-old}/vite.config.ts   |  0
 packages/react/tabs/src/lib/tab.model.ts      |  8 ----
 pnpm-lock.yaml                                |  2 +-
 tsconfig.base.json                            |  2 +-
 tsconfig.storybook-manager-paths.json         | 10 ++--
 34 files changed, 137 insertions(+), 137 deletions(-)
 rename packages/common/core/src/lib/class-names/{tab-class-names.ts => tab-class-names-old.ts} (77%)
 rename packages/common/core/src/lib/class-names/{tab-label-class-names.ts => tab-label-class-names-old.ts} (64%)
 rename packages/common/core/src/lib/class-names/{tabs-class-names.ts => tabs-class-names-old.ts} (73%)
 rename packages/react/{tabs => tabs-old}/.eslintrc.json (100%)
 rename packages/react/{tabs => tabs-old}/CHANGELOG.md (89%)
 rename packages/react/{tabs => tabs-old}/LICENSE (100%)
 rename packages/react/{tabs => tabs-old}/README.md (100%)
 rename packages/react/{tabs => tabs-old}/package.json (94%)
 rename packages/react/{tabs => tabs-old}/project.json (90%)
 rename packages/react/{tabs => tabs-old}/src/index.ts (100%)
 rename packages/react/{tabs => tabs-old}/src/lib/tab-label.tsx (81%)
 create mode 100644 packages/react/tabs-old/src/lib/tab.model.ts
 rename packages/react/{tabs => tabs-old}/src/lib/tab.tsx (81%)
 rename packages/react/{tabs => tabs-old}/src/lib/tabs.store.ts (73%)
 rename packages/react/{tabs => tabs-old}/src/lib/tabs.tsx (79%)
 rename packages/react/{tabs => tabs-old}/tsconfig.json (100%)
 rename packages/react/{tabs => tabs-old}/tsconfig.lib.json (100%)
 rename packages/react/{tabs => tabs-old}/vite.config.ts (100%)
 delete mode 100644 packages/react/tabs/src/lib/tab.model.ts

diff --git a/apps/website/src/components/home/ui-components/ui-components.tsx b/apps/website/src/components/home/ui-components/ui-components.tsx
index cb6fefcb..29eb0435 100644
--- a/apps/website/src/components/home/ui-components/ui-components.tsx
+++ b/apps/website/src/components/home/ui-components/ui-components.tsx
@@ -22,7 +22,7 @@ import {
   Toggle,
 } from '@cocokits/react-components';
 import { FormField, Input, Option, Select, Textarea } from '@cocokits/react-form-field';
-import { Tab, TabLabel, Tabs } from '@cocokits/react-tabs';
+import { Tab, TabLabel, Tabs } from '@cocokits/react-tabs-old';
 
 import { Brand } from '../../brands/brand';
 import { CckComponent } from '../../cck-component/cck-component';
diff --git a/packages/common/core/src/lib/class-names/class-names.ts b/packages/common/core/src/lib/class-names/class-names.ts
index 63e7fb42..8d3ea873 100644
--- a/packages/common/core/src/lib/class-names/class-names.ts
+++ b/packages/common/core/src/lib/class-names/class-names.ts
@@ -31,9 +31,9 @@ import { getRadioGroupClassNames } from './radio-group-class-names';
 import { getSelectClassNames } from './select-class-names';
 import { getSelectPreviewClassNames } from './select-preview-class-names';
 import { getSuffixClassNames } from './suffix-class-names';
-import { getTabClassNames } from './tab-class-names';
-import { getTabLabelClassNames } from './tab-label-class-names';
-import { getTabsClassNames } from './tabs-class-names';
+import { getTabClassNamesOld } from './tab-class-names-old';
+import { getTabLabelClassNamesOld } from './tab-label-class-names-old';
+import { getTabsClassNamesOld } from './tabs-class-names-old';
 import { getTextareaClassNames } from './textarea-class-names';
 import { getToggleClassNames } from './toggle-class-names';
 import { getTrailingClassNames } from './trailing-class-names';
@@ -68,9 +68,9 @@ export const CLASS_NAMES_FN_MAP = {
   button: getButtonClassNames,
   iconButton: getIconButtonClassNames,
   svgIcon: getSvgIconClassNames,
-  tabs: getTabsClassNames,
-  tab: getTabClassNames,
-  tabLabel: getTabLabelClassNames,
+  tabsOld: getTabsClassNamesOld,
+  tabOld: getTabClassNamesOld,
+  tabLabelOld: getTabLabelClassNamesOld,
   overlay: getOverlayClassNames,
   avatar: getAvatarClassNames,
   avatarGroup: getAvatarGroupClassNames,
diff --git a/packages/common/core/src/lib/class-names/layout-class-names-config.ts b/packages/common/core/src/lib/class-names/layout-class-names-config.ts
index 47dbe29b..fbf90695 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
@@ -28,9 +28,9 @@ import { radioGroupLayoutClassNamesConfig } from './radio-group-class-names';
 import { selectLayoutClassNamesConfig } from './select-class-names';
 import { selectPreviewLayoutClassNamesConfig } from './select-preview-class-names';
 import { suffixLayoutClassNamesConfig } from './suffix-class-names';
-import { tabLayoutClassNamesConfig } from './tab-class-names';
-import { tabLabelLayoutClassNamesConfig } from './tab-label-class-names';
-import { tabsLayoutClassNamesConfig } from './tabs-class-names';
+import { tabLayoutClassNamesConfigOld } from './tab-class-names-old';
+import { tabLabelLayoutClassNamesConfigOld } from './tab-label-class-names-old';
+import { tabsLayoutClassNamesConfigOld } from './tabs-class-names-old';
 import { textareaClassNamesConfig } from './textarea-class-names';
 import { toggleLayoutClassNamesConfig } from './toggle-class-names';
 import { trailingLayoutClassNamesConfig } from './trailing-class-names';
@@ -69,9 +69,9 @@ export const layoutClassNamesConfigRecord = {
   menuItem: menuItemLayoutClassNamesConfig,
   divider: dividerLayoutClassNamesConfig,
   toggle: toggleLayoutClassNamesConfig,
-  tabs: tabsLayoutClassNamesConfig,
-  tab: tabLayoutClassNamesConfig,
-  tabLabel: tabLabelLayoutClassNamesConfig,
+  tabs: tabsLayoutClassNamesConfigOld,
+  tab: tabLayoutClassNamesConfigOld,
+  tabLabel: tabLabelLayoutClassNamesConfigOld,
   overlay: overlayLayoutClassNamesConfig,
   avatar: avatarLayoutClassNamesConfig,
   avatarGroup: avatarGroupLayoutClassNamesConfig,
diff --git a/packages/common/core/src/lib/class-names/tab-class-names.ts b/packages/common/core/src/lib/class-names/tab-class-names-old.ts
similarity index 77%
rename from packages/common/core/src/lib/class-names/tab-class-names.ts
rename to packages/common/core/src/lib/class-names/tab-class-names-old.ts
index 281d74b0..4dd85b26 100644
--- a/packages/common/core/src/lib/class-names/tab-class-names.ts
+++ b/packages/common/core/src/lib/class-names/tab-class-names-old.ts
@@ -2,8 +2,8 @@ import { generateLayoutClassNameFromElement } from './class-names';
 import { LayoutClassNamesConfig, ThemeConfig, UIBaseComponentProps } from '../model/theme-config.model';
 import { validateUiBaseComponentProps } from '../ui-component-props/ui-component-props';
 
-export const tabLayoutClassNamesConfig = {
-  componentName: 'tab',
+export const tabLayoutClassNamesConfigOld = {
+  componentName: 'tabOld',
   baseSelectorStructure: {
     block: 'tab',
   },
@@ -36,17 +36,17 @@ export const tabLayoutClassNamesConfig = {
   },
 } satisfies LayoutClassNamesConfig;
 
-export function getTabClassNames(
+export function getTabClassNamesOld(
   componentProps: UIBaseComponentProps,
   themeConfig: ThemeConfig
-): Record<keyof typeof tabLayoutClassNamesConfig.elements, string> {
-  validateUiBaseComponentProps(tabLayoutClassNamesConfig.componentName, componentProps, themeConfig);
+): Record<keyof typeof tabLayoutClassNamesConfigOld.elements, string> {
+  validateUiBaseComponentProps(tabLayoutClassNamesConfigOld.componentName, componentProps, themeConfig);
 
   return {
-    host: generateLayoutClassNameFromElement(tabLayoutClassNamesConfig, 'host', themeConfig, componentProps),
-    indicator: generateLayoutClassNameFromElement(tabLayoutClassNamesConfig, 'indicator', themeConfig),
-    content: generateLayoutClassNameFromElement(tabLayoutClassNamesConfig, 'content', themeConfig),
-    selected: generateLayoutClassNameFromElement(tabLayoutClassNamesConfig, 'selected', themeConfig),
-    unselected: generateLayoutClassNameFromElement(tabLayoutClassNamesConfig, 'unselected', themeConfig),
+    host: generateLayoutClassNameFromElement(tabLayoutClassNamesConfigOld, 'host', themeConfig, componentProps),
+    indicator: generateLayoutClassNameFromElement(tabLayoutClassNamesConfigOld, 'indicator', themeConfig),
+    content: generateLayoutClassNameFromElement(tabLayoutClassNamesConfigOld, 'content', themeConfig),
+    selected: generateLayoutClassNameFromElement(tabLayoutClassNamesConfigOld, 'selected', themeConfig),
+    unselected: generateLayoutClassNameFromElement(tabLayoutClassNamesConfigOld, 'unselected', themeConfig),
   };
 }
diff --git a/packages/common/core/src/lib/class-names/tab-label-class-names.ts b/packages/common/core/src/lib/class-names/tab-label-class-names-old.ts
similarity index 64%
rename from packages/common/core/src/lib/class-names/tab-label-class-names.ts
rename to packages/common/core/src/lib/class-names/tab-label-class-names-old.ts
index 5b42b5a9..8ff79876 100644
--- a/packages/common/core/src/lib/class-names/tab-label-class-names.ts
+++ b/packages/common/core/src/lib/class-names/tab-label-class-names-old.ts
@@ -2,8 +2,8 @@ import { generateLayoutClassNameFromElement } from './class-names';
 import { LayoutClassNamesConfig, ThemeConfig, UIBaseComponentProps } from '../model/theme-config.model';
 import { validateUiBaseComponentProps } from '../ui-component-props/ui-component-props';
 
-export const tabLabelLayoutClassNamesConfig = {
-  componentName: 'tabLabel',
+export const tabLabelLayoutClassNamesConfigOld = {
+  componentName: 'tabLabelOld',
   baseSelectorStructure: {
     block: 'tab-label',
   },
@@ -16,13 +16,13 @@ export const tabLabelLayoutClassNamesConfig = {
   },
 } satisfies LayoutClassNamesConfig;
 
-export function getTabLabelClassNames(
+export function getTabLabelClassNamesOld(
   componentProps: UIBaseComponentProps,
   themeConfig: ThemeConfig
-): Record<keyof typeof tabLabelLayoutClassNamesConfig.elements, string> {
-  validateUiBaseComponentProps(tabLabelLayoutClassNamesConfig.componentName, componentProps, themeConfig);
+): Record<keyof typeof tabLabelLayoutClassNamesConfigOld.elements, string> {
+  validateUiBaseComponentProps(tabLabelLayoutClassNamesConfigOld.componentName, componentProps, themeConfig);
 
   return {
-    host: generateLayoutClassNameFromElement(tabLabelLayoutClassNamesConfig, 'host', themeConfig, componentProps),
+    host: generateLayoutClassNameFromElement(tabLabelLayoutClassNamesConfigOld, 'host', themeConfig, componentProps),
   };
 }
diff --git a/packages/common/core/src/lib/class-names/tabs-class-names.ts b/packages/common/core/src/lib/class-names/tabs-class-names-old.ts
similarity index 73%
rename from packages/common/core/src/lib/class-names/tabs-class-names.ts
rename to packages/common/core/src/lib/class-names/tabs-class-names-old.ts
index 5b1f8271..6dd7b7aa 100644
--- a/packages/common/core/src/lib/class-names/tabs-class-names.ts
+++ b/packages/common/core/src/lib/class-names/tabs-class-names-old.ts
@@ -2,8 +2,8 @@ import { generateLayoutClassNameFromElement } from './class-names';
 import { LayoutClassNamesConfig, ThemeConfig, UIBaseComponentProps } from '../model/theme-config.model';
 import { validateUiBaseComponentProps } from '../ui-component-props/ui-component-props';
 
-export const tabsLayoutClassNamesConfig = {
-  componentName: 'tabs',
+export const tabsLayoutClassNamesConfigOld = {
+  componentName: 'tabsOld',
   baseSelectorStructure: {
     block: 'tabs',
   },
@@ -26,15 +26,15 @@ export const tabsLayoutClassNamesConfig = {
   },
 } satisfies LayoutClassNamesConfig;
 
-export function getTabsClassNames(
+export function getTabsClassNamesOld(
   componentProps: UIBaseComponentProps,
   themeConfig: ThemeConfig
-): Record<keyof typeof tabsLayoutClassNamesConfig.elements, string> {
-  validateUiBaseComponentProps(tabsLayoutClassNamesConfig.componentName, componentProps, themeConfig);
+): Record<keyof typeof tabsLayoutClassNamesConfigOld.elements, string> {
+  validateUiBaseComponentProps(tabsLayoutClassNamesConfigOld.componentName, componentProps, themeConfig);
 
   return {
-    host: generateLayoutClassNameFromElement(tabsLayoutClassNamesConfig, 'host', themeConfig, componentProps),
-    labelsWrapper: generateLayoutClassNameFromElement(tabsLayoutClassNamesConfig, 'labelsWrapper', themeConfig),
-    contentWrapper: generateLayoutClassNameFromElement(tabsLayoutClassNamesConfig, 'contentWrapper', themeConfig),
+    host: generateLayoutClassNameFromElement(tabsLayoutClassNamesConfigOld, 'host', themeConfig, componentProps),
+    labelsWrapper: generateLayoutClassNameFromElement(tabsLayoutClassNamesConfigOld, 'labelsWrapper', themeConfig),
+    contentWrapper: generateLayoutClassNameFromElement(tabsLayoutClassNamesConfigOld, 'contentWrapper', themeConfig),
   };
 }
diff --git a/packages/common/core/src/lib/model/ui-base-components-name.ts b/packages/common/core/src/lib/model/ui-base-components-name.ts
index 28734a68..aefe2d97 100644
--- a/packages/common/core/src/lib/model/ui-base-components-name.ts
+++ b/packages/common/core/src/lib/model/ui-base-components-name.ts
@@ -7,7 +7,7 @@ export type UIBaseComponentsName =
   | CheckboxComponentName
   | ButtonComponentName
   | IconComponentName
-  | TabsComponentName
+  | _Tabs_ComponentNameOld
   | OverlayComponentName
   | AvatarComponentName
   | AccordionComponentName;
@@ -37,7 +37,7 @@ type RadioComponentName = 'radioButton' | 'radioGroup';
 type CheckboxComponentName = 'checkbox';
 type ButtonComponentName = 'button' | 'iconButton';
 type IconComponentName = 'svgIcon';
-type TabsComponentName = 'tabs' | 'tab' | 'tabLabel';
+type _Tabs_ComponentNameOld = 'tabsOld' | 'tabOld' | 'tabLabelOld';
 type OverlayComponentName = 'overlay';
 type AvatarComponentName = 'avatar' | 'avatarGroup' | 'avatarLabel';
 type AccordionComponentName = 'accordion' | 'accordionHeader' | 'accordionPanel';
diff --git a/packages/internal/storybook-addon-theme/src/lib/features/mdx-page/mdx-page-tab-code.tsx b/packages/internal/storybook-addon-theme/src/lib/features/mdx-page/mdx-page-tab-code.tsx
index 44bc9c19..c8c62cdc 100644
--- a/packages/internal/storybook-addon-theme/src/lib/features/mdx-page/mdx-page-tab-code.tsx
+++ b/packages/internal/storybook-addon-theme/src/lib/features/mdx-page/mdx-page-tab-code.tsx
@@ -1,7 +1,7 @@
 import { Markdown } from '@storybook/addon-docs';
 import { SupportedLanguage } from '@storybook/components';
 
-import { Tab, Tabs } from '@cocokits/react-tabs';
+import { TabOld, TabsOld } from '@cocokits/react-tabs-old';
 
 interface MdxPageTabCodeProps {
   codeTabs: { [key: string]: string };
@@ -10,12 +10,12 @@ interface MdxPageTabCodeProps {
 
 export const MdxPageTabCode = ({ codeTabs, language = 'typescript' }: MdxPageTabCodeProps) => {
   return (
-    <Tabs>
+    <TabsOld>
       {Object.keys(codeTabs).map((tab) => (
-        <Tab key={tab} label={tab} value={tab}>
+        <TabOld key={tab} label={tab} value={tab}>
           <Markdown>{`\`\`\`${language}\n${codeTabs[tab]}\n\`\`\``}</Markdown>
-        </Tab>
+        </TabOld>
       ))}
-    </Tabs>
+    </TabsOld>
   );
 };
diff --git a/packages/internal/storybook-addon-theme/src/lib/features/story-control/story-control-icon.tsx b/packages/internal/storybook-addon-theme/src/lib/features/story-control/story-control-icon.tsx
index ace75a04..9cecd323 100644
--- a/packages/internal/storybook-addon-theme/src/lib/features/story-control/story-control-icon.tsx
+++ b/packages/internal/storybook-addon-theme/src/lib/features/story-control/story-control-icon.tsx
@@ -1,6 +1,6 @@
 import { Icons } from '@cocokits/common-icons';
 import { SvgIcon } from '@cocokits/react-icon';
-import { Tab, TabLabel, Tabs, TabSelectionChangeEvent } from '@cocokits/react-tabs';
+import { TabLabelOld, TabOld, TabSelectionChangeEventOld, TabsOld } from '@cocokits/react-tabs-old';
 
 import { StoryControlChangeEvent } from './story-control.model';
 import { StyledControlLabel } from './story-control.style';
@@ -13,25 +13,25 @@ interface StoryControlIconProps {
 }
 
 export function StoryControlIcon({ control, selected, onChange }: StoryControlIconProps) {
-  const onIconChange = (e: TabSelectionChangeEvent) => {
+  const onIconChange = (e: TabSelectionChangeEventOld) => {
     onChange({ [control.storyArgKey]: e.value });
   };
 
   return (
     <>
       <StyledControlLabel>{control.displayName}</StyledControlLabel>
-      <Tabs color="h-contrast" size="fit" selectedValue={selected} onSelectionChange={onIconChange} hideContent={true}>
+      <TabsOld color="h-contrast" size="fit" selectedValue={selected} onSelectionChange={onIconChange} hideContent={true}>
         {control.icons.map((icon) => (
-          <Tab
+          <TabOld
             key={icon}
             value={icon}
             label={() => (
-              <TabLabel>
+              <TabLabelOld>
                 <SvgIcon icon={Icons[icon]} />
-              </TabLabel>
-            )}></Tab>
+              </TabLabelOld>
+            )}></TabOld>
         ))}
-      </Tabs>
+      </TabsOld>
     </>
   );
 }
diff --git a/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page.tsx b/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page.tsx
index 253c67a3..0ed6666c 100644
--- a/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page.tsx
+++ b/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page.tsx
@@ -3,7 +3,7 @@ import { useContext, useMemo, useState } from 'react';
 import styled from 'styled-components';
 
 import { getInstance } from '@cocokits/common-utils';
-import { Tab, Tabs, TabSelectionChangeEvent } from '@cocokits/react-tabs';
+import { TabOld, TabSelectionChangeEventOld,TabsOld } from '@cocokits/react-tabs-old';
 import { usePromise } from '@cocokits/react-utils';
 
 import { getApiProps, getOverviewProps, getStylingProps } from './story-doc-page.utils';
@@ -72,7 +72,7 @@ export function StoryDocPage() {
     return null;
   }
 
-  const onTabChange = (event: TabSelectionChangeEvent) => {
+  const onTabChange = (event: TabSelectionChangeEventOld) => {
     const tabName = event.value as StoryTab;
     getInstance(GlobalEvent).dispatch.docTabChange({ tabName });
     setSelectedTab(tabName);
@@ -81,27 +81,27 @@ export function StoryDocPage() {
   return (
     <DocPage breadcrumb={breadcrumb} title={title} tocItems={tocItemsMap[selectedTab]}>
       <StyledTabs selectedValue={selectedTab} onSelectionChange={onTabChange}>
-        <Tab label="Overview" value="Overview">
+        <TabOld label="Overview" value="Overview">
           <StoryDocPageOverview {...overviewProps} />
-        </Tab>
+        </TabOld>
 
-        <Tab label="API" value="API">
+        <TabOld label="API" value="API">
           <StoryDocPageAPI {...apiProps} />
-        </Tab>
+        </TabOld>
 
-        <Tab label="Styling" value="Styling">
+        <TabOld label="Styling" value="Styling">
           <StoryDocPageStyling {...stylingProps} />
-        </Tab>
+        </TabOld>
 
-        <Tab label="Examples" value="Examples">
+        <TabOld label="Examples" value="Examples">
           <StoryDocPageExamples />
-        </Tab>
+        </TabOld>
       </StyledTabs>
     </DocPage>
   );
 }
 
-const StyledTabs = styled(Tabs)`
+const StyledTabs = styled(TabsOld)`
   & .doc-cck-tabs__content-wrapper {
     margin-top: 28px;
   }
diff --git a/packages/internal/storybook-addon-theme/src/lib/features/token-dictionary/token-dictionary.tsx b/packages/internal/storybook-addon-theme/src/lib/features/token-dictionary/token-dictionary.tsx
index 18fa347a..7e63b59d 100644
--- a/packages/internal/storybook-addon-theme/src/lib/features/token-dictionary/token-dictionary.tsx
+++ b/packages/internal/storybook-addon-theme/src/lib/features/token-dictionary/token-dictionary.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import { getInstance, recordReduceMerge } from '@cocokits/common-utils';
 import { TokenId } from '@cocokits/core';
-import { Tab, Tabs, TabSelectionChangeEvent } from '@cocokits/react-tabs';
+import { TabOld, TabSelectionChangeEventOld,TabsOld } from '@cocokits/react-tabs-old';
 
 import { getTokenList } from './token-dictionary.utils';
 import { TokenDictionaryValue } from './token-dictionary-value';
@@ -36,7 +36,7 @@ export function TokenDictionary() {
     });
   }, [theme.id]);
 
-  const onCollectionTabClick = (event: TabSelectionChangeEvent) => {
+  const onCollectionTabClick = (event: TabSelectionChangeEventOld) => {
     setSelectedCollection(event.value);
   };
 
@@ -46,9 +46,9 @@ export function TokenDictionary() {
   };
 
   return (
-    <Tabs selectedValue={selectedCollection} onSelectionChange={onCollectionTabClick}>
+    <TabsOld selectedValue={selectedCollection} onSelectionChange={onCollectionTabClick}>
       {tokenDictionary.collectionNames.map((collection) => (
-        <Tab key={collection.rawName} label={collection.name} value={collection.name}>
+        <TabOld key={collection.rawName} label={collection.name} value={collection.name}>
           <StyledTable>
             <thead>
               <tr className="header">
@@ -109,9 +109,9 @@ export function TokenDictionary() {
               })}
             </tbody>
           </StyledTable>
-        </Tab>
+        </TabOld>
       ))}
-    </Tabs>
+    </TabsOld>
   );
 }
 
diff --git a/packages/internal/storybook-addon-theme/src/theme/theme-config.ts b/packages/internal/storybook-addon-theme/src/theme/theme-config.ts
index 4d23db88..1bd12361 100644
--- a/packages/internal/storybook-addon-theme/src/theme/theme-config.ts
+++ b/packages/internal/storybook-addon-theme/src/theme/theme-config.ts
@@ -76,7 +76,7 @@ const components: ThemeComponentConfigRecord = {
   // trailing: {},
   // menu: {},
   // menuItem: {},
-  tabs: {
+  tabsOld: {
     color: {
       name: 'color',
       values: ['default', 'h-contrast'],
@@ -90,8 +90,8 @@ const components: ThemeComponentConfigRecord = {
       description: '',
     },
   },
-  tab: {},
-  tabLabel: {},
+  tabOld: {},
+  tabLabelOld: {},
   overlay: {},
 };
 
diff --git a/packages/react/components/CHANGELOG.md b/packages/react/components/CHANGELOG.md
index 64926f43..43b26deb 100644
--- a/packages/react/components/CHANGELOG.md
+++ b/packages/react/components/CHANGELOG.md
@@ -19,6 +19,6 @@
   - @cocokits/react-icon@1.0.1
   - @cocokits/react-menu@1.0.1
   - @cocokits/react-radio@1.0.1
-  - @cocokits/react-tabs@1.0.1
+  - @cocokits/react-tabs-old@1.0.1
   - @cocokits/react-toggle@1.0.1
   - @cocokits/react-utils@1.0.1
diff --git a/packages/react/components/package.json b/packages/react/components/package.json
index af742907..62f17fb6 100644
--- a/packages/react/components/package.json
+++ b/packages/react/components/package.json
@@ -17,7 +17,7 @@
     "@cocokits/react-menu": "workspace:*",
     "@cocokits/react-toggle": "workspace:*",
     "@cocokits/react-cdk": "workspace:*",
-    "@cocokits/react-tabs": "workspace:*",
+    "@cocokits/react-tabs-old": "workspace:*",
     "@cocokits/react-avatar": "workspace:*",
     "@cocokits/react-accordion": "workspace:*"
   },
diff --git a/packages/react/components/src/index.ts b/packages/react/components/src/index.ts
index 560cacd5..fe90cbfe 100644
--- a/packages/react/components/src/index.ts
+++ b/packages/react/components/src/index.ts
@@ -11,4 +11,4 @@ export * from '@cocokits/react-divider';
 export * from '@cocokits/react-menu';
 export * from '@cocokits/react-toggle';
 export * from '@cocokits/react-cdk';
-// export * from '@cocokits/react-tabs';
+// export * from '@cocokits/react-tabs-old';
diff --git a/packages/react/tabs/.eslintrc.json b/packages/react/tabs-old/.eslintrc.json
similarity index 100%
rename from packages/react/tabs/.eslintrc.json
rename to packages/react/tabs-old/.eslintrc.json
diff --git a/packages/react/tabs/CHANGELOG.md b/packages/react/tabs-old/CHANGELOG.md
similarity index 89%
rename from packages/react/tabs/CHANGELOG.md
rename to packages/react/tabs-old/CHANGELOG.md
index d6b6ce69..22ab06ab 100644
--- a/packages/react/tabs/CHANGELOG.md
+++ b/packages/react/tabs-old/CHANGELOG.md
@@ -1,4 +1,4 @@
-# @cocokits/react-tabs
+# @cocokits/react-tabs-old
 
 ## 1.0.1
 
diff --git a/packages/react/tabs/LICENSE b/packages/react/tabs-old/LICENSE
similarity index 100%
rename from packages/react/tabs/LICENSE
rename to packages/react/tabs-old/LICENSE
diff --git a/packages/react/tabs/README.md b/packages/react/tabs-old/README.md
similarity index 100%
rename from packages/react/tabs/README.md
rename to packages/react/tabs-old/README.md
diff --git a/packages/react/tabs/package.json b/packages/react/tabs-old/package.json
similarity index 94%
rename from packages/react/tabs/package.json
rename to packages/react/tabs-old/package.json
index 20c5675a..f8e78a06 100644
--- a/packages/react/tabs/package.json
+++ b/packages/react/tabs-old/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@cocokits/react-tabs",
+  "name": "@cocokits/react-tabs-old",
   "version": "1.0.1",
   "main": "./index.js",
   "types": "./index.d.ts",
diff --git a/packages/react/tabs/project.json b/packages/react/tabs-old/project.json
similarity index 90%
rename from packages/react/tabs/project.json
rename to packages/react/tabs-old/project.json
index df01f7a5..0aed0177 100644
--- a/packages/react/tabs/project.json
+++ b/packages/react/tabs-old/project.json
@@ -1,5 +1,5 @@
 {
-  "name": "@cocokits/react-tabs",
+  "name": "@cocokits/react-tabs-old",
   "$schema": "../../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "packages/react/tabs/src",
   "projectType": "library",
diff --git a/packages/react/tabs/src/index.ts b/packages/react/tabs-old/src/index.ts
similarity index 100%
rename from packages/react/tabs/src/index.ts
rename to packages/react/tabs-old/src/index.ts
diff --git a/packages/react/tabs/src/lib/tab-label.tsx b/packages/react/tabs-old/src/lib/tab-label.tsx
similarity index 81%
rename from packages/react/tabs/src/lib/tab-label.tsx
rename to packages/react/tabs-old/src/lib/tab-label.tsx
index ca5f82e7..08a76fc2 100644
--- a/packages/react/tabs/src/lib/tab-label.tsx
+++ b/packages/react/tabs-old/src/lib/tab-label.tsx
@@ -5,9 +5,9 @@ export interface TabLabelProps extends UIBaseComponentProps {
   children: React.ReactNode | React.ReactNode[];
 }
 
-export const TabLabel = (props: TabLabelProps) => {
+export const TabLabelOld = (props: TabLabelProps) => {
   const { classNames, hostClassNames } = useUiBaseComponentConfig({
-    componentName: 'tabLabel',
+    componentName: 'tabLabelOld',
     props,
   });
 
diff --git a/packages/react/tabs-old/src/lib/tab.model.ts b/packages/react/tabs-old/src/lib/tab.model.ts
new file mode 100644
index 00000000..a75b1c5c
--- /dev/null
+++ b/packages/react/tabs-old/src/lib/tab.model.ts
@@ -0,0 +1,8 @@
+export type TabValueOld = string;
+
+export interface TabSelectionChangeEventOld {
+  previousIndex: number;
+  previousValue: TabValueOld;
+  index: number;
+  value: TabValueOld;
+}
diff --git a/packages/react/tabs/src/lib/tab.tsx b/packages/react/tabs-old/src/lib/tab.tsx
similarity index 81%
rename from packages/react/tabs/src/lib/tab.tsx
rename to packages/react/tabs-old/src/lib/tab.tsx
index 95030979..6e413938 100644
--- a/packages/react/tabs/src/lib/tab.tsx
+++ b/packages/react/tabs-old/src/lib/tab.tsx
@@ -2,18 +2,18 @@ import { ReactNode, useContext, useEffect, useRef } from 'react';
 
 import { useUiBaseComponentConfig } from '@cocokits/react-core';
 
-import { TabLabel } from './tab-label';
-import { TabIndexContext, useTabsStore } from './tabs.store';
+import { TabLabelOld } from './tab-label';
+import { TabIndexContextOld, useTabsStoreOld } from './tabs.store';
 
-export interface TabProps {
+export interface TabPropsOld {
   label: string | ((selected: boolean) => ReactNode);
   value: string;
   children?: React.ReactNode | React.ReactNode[];
 }
 
-export const Tab = (props: TabProps) => {
-  const tabsStore = useTabsStore();
-  const index = useContext(TabIndexContext);
+export const TabOld = (props: TabPropsOld) => {
+  const tabsStore = useTabsStoreOld();
+  const index = useContext(TabIndexContextOld);
   const selectedTab = tabsStore?.useSelectedTab();
 
   const hostElemRef = useRef<HTMLButtonElement>(null);
@@ -22,7 +22,7 @@ export const Tab = (props: TabProps) => {
   const isSelected = selectedTab?.value === props.value;
 
   const { classNames, hostClassNames } = useUiBaseComponentConfig({
-    componentName: 'tab',
+    componentName: 'tabOld',
     props: {},
     extraHostElementClassConditions: [
       { if: isSelected, classes: (cn) => [cn.selected] },
@@ -32,7 +32,7 @@ export const Tab = (props: TabProps) => {
 
   // Register and update the tab on mount and changes
   useEffect(() => {
-    const label = typeof props.label === 'string' ? <TabLabel>{props.label}</TabLabel> : props.label(isSelected);
+    const label = typeof props.label === 'string' ? <TabLabelOld>{props.label}</TabLabelOld> : props.label(isSelected);
 
     const tabTmp = (
       <button
diff --git a/packages/react/tabs/src/lib/tabs.store.ts b/packages/react/tabs-old/src/lib/tabs.store.ts
similarity index 73%
rename from packages/react/tabs/src/lib/tabs.store.ts
rename to packages/react/tabs-old/src/lib/tabs.store.ts
index 0e07cbe1..95ff46ce 100644
--- a/packages/react/tabs/src/lib/tabs.store.ts
+++ b/packages/react/tabs-old/src/lib/tabs.store.ts
@@ -2,52 +2,52 @@ import React, { createContext, RefObject, useContext, useRef } from 'react';
 
 import { createComponentStore } from '@cocokits/react-utils';
 
-import { TabSelectionChangeEvent, TabValue } from './tab.model';
+import { TabSelectionChangeEventOld, TabValueOld } from './tab.model';
 
-export interface TabComponent {
+export interface TabComponentOld {
   index: number;
   tabTmp: React.ReactNode;
   contentTmp: React.ReactNode;
   hostElemRef: RefObject<HTMLButtonElement>;
   indicatorElemRef: RefObject<HTMLDivElement>;
-  value: TabValue;
+  value: TabValueOld;
 }
 
-export interface TabsState {
-  selectedValue: TabValue;
-  tabs: Record<TabValue, TabComponent>;
+export interface TabsStateOld {
+  selectedValue: TabValueOld;
+  tabs: Record<TabValueOld, TabComponentOld>;
 }
 
-interface TabsStoreConfig {
+interface TabsStoreConfigOld {
   disableAnimation: boolean;
-  onSelectionChange: (event: TabSelectionChangeEvent) => void;
+  onSelectionChange: (event: TabSelectionChangeEventOld) => void;
 }
 
-export const TabsContext = createContext<TabsStore | null>(null);
-export const TabIndexContext = createContext<number>(0);
+export const TabsContextOld = createContext<TabsStoreOld | null>(null);
+export const TabIndexContextOld = createContext<number>(0);
 
-export function useCreateTabsStore(config: TabsStoreConfig) {
+export function useCreateTabsStoreOld(config: TabsStoreConfigOld) {
   const storeRef = useRef<{
-    TabsStoreProvider: typeof TabsContext.Provider;
-    tabsStore: TabsStore;
+    TabsStoreProvider: typeof TabsContextOld.Provider;
+    tabsStore: TabsStoreOld;
   }>();
 
   if (!storeRef.current) {
     storeRef.current = {
-      TabsStoreProvider: TabsContext.Provider,
-      tabsStore: new TabsStore(config),
+      TabsStoreProvider: TabsContextOld.Provider,
+      tabsStore: new TabsStoreOld(config),
     };
   }
 
   return storeRef.current;
 }
 
-export function useTabsStore() {
-  return useContext(TabsContext);
+export function useTabsStoreOld() {
+  return useContext(TabsContextOld);
 }
 
-class TabsStore {
-  private state = createComponentStore<TabsState>({ selectedValue: '', tabs: {} });
+class TabsStoreOld {
+  private state = createComponentStore<TabsStateOld>({ selectedValue: '', tabs: {} });
 
   public useSelectedTab = this.state.createSelector(
     (state) => state.tabs[state.selectedValue] ?? Object.values(state.tabs)[0]
@@ -58,13 +58,13 @@ class TabsStore {
     return tabs.sort((a, b) => a.index - b.index);
   });
 
-  constructor(private config: TabsStoreConfig) {}
+  constructor(private config: TabsStoreConfigOld) {}
 
-  public updateConfig(config: Partial<TabsStoreConfig>) {
+  public updateConfig(config: Partial<TabsStoreConfigOld>) {
     this.config = { ...this.config, ...config };
   }
 
-  public registerTab(tab: TabComponent) {
+  public registerTab(tab: TabComponentOld) {
     this.state.updateState((state) => {
       const tabs = { ...state.tabs, [tab.value]: tab };
       const selectedValue = state.selectedValue ?? tab.value; // Select the first tab if no tab is selected (when no tab is selected, selectedValue is an empty string)
@@ -72,7 +72,7 @@ class TabsStore {
     });
   }
 
-  public unregisterTab(tabValue: TabValue) {
+  public unregisterTab(tabValue: TabValueOld) {
     this.state.updateState((state) => {
       const tabs = { ...state.tabs };
       delete tabs[tabValue];
@@ -81,7 +81,7 @@ class TabsStore {
     });
   }
 
-  public selectTabByValue(newTabValue: TabValue, emitEvent = true) {
+  public selectTabByValue(newTabValue: TabValueOld, emitEvent = true) {
     const state = this.state.getState();
     const currentSelected = state.tabs[state.selectedValue];
     const newSelected = state.tabs[newTabValue];
diff --git a/packages/react/tabs/src/lib/tabs.tsx b/packages/react/tabs-old/src/lib/tabs.tsx
similarity index 79%
rename from packages/react/tabs/src/lib/tabs.tsx
rename to packages/react/tabs-old/src/lib/tabs.tsx
index 74225aba..15ced8b8 100644
--- a/packages/react/tabs/src/lib/tabs.tsx
+++ b/packages/react/tabs-old/src/lib/tabs.tsx
@@ -4,35 +4,35 @@ import { UIBaseComponentProps } from '@cocokits/core';
 import { useUiBaseComponentConfig } from '@cocokits/react-core';
 import { useEffectAfterMount } from '@cocokits/react-utils';
 
-import { TabSelectionChangeEvent, TabValue } from './tab.model';
-import { TabIndexContext, useCreateTabsStore } from './tabs.store';
+import { TabSelectionChangeEventOld, TabValueOld } from './tab.model';
+import { TabIndexContextOld, useCreateTabsStoreOld } from './tabs.store';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const EMPTY_CALLBACK = () => {};
 
-export interface TabsProps extends UIBaseComponentProps {
+export interface TabsPropsOld extends UIBaseComponentProps {
   selectedIndex?: number;
-  selectedValue?: TabValue;
+  selectedValue?: TabValueOld;
 
   hideContent?: boolean;
   disableAnimation?: boolean;
 
-  onSelectionChange?: (event: TabSelectionChangeEvent) => void;
+  onSelectionChange?: (event: TabSelectionChangeEventOld) => void;
   children: React.ReactNode | React.ReactNode[];
   className?: string;
 }
 
-export const Tabs = (props: TabsProps) => {
+export const TabsOld = (props: TabsPropsOld) => {
   const hideContent = props.hideContent ?? false;
   const disableAnimation = props.disableAnimation ?? false;
 
-  const { tabsStore, TabsStoreProvider } = useCreateTabsStore({
+  const { tabsStore, TabsStoreProvider } = useCreateTabsStoreOld({
     disableAnimation,
     onSelectionChange: props.onSelectionChange ?? EMPTY_CALLBACK,
   });
 
   const { classNames: tabsClassNames, hostClassNames: tabsHostClassNames } = useUiBaseComponentConfig({
-    componentName: 'tabs',
+    componentName: 'tabsOld',
     props,
   });
 
@@ -61,9 +61,9 @@ export const Tabs = (props: TabsProps) => {
     <TabsStoreProvider value={tabsStore}>
       {/* Just render the children to register them into the store, The Children has no template */}
       {React.Children.map(props.children, (child, index) => (
-        <TabIndexContext.Provider key={index} value={index}>
+        <TabIndexContextOld.Provider key={index} value={index}>
           {child}
-        </TabIndexContext.Provider>
+        </TabIndexContextOld.Provider>
       ))}
 
       <div className={`${tabsHostClassNames} ${props.className ?? ''}`}>
diff --git a/packages/react/tabs/tsconfig.json b/packages/react/tabs-old/tsconfig.json
similarity index 100%
rename from packages/react/tabs/tsconfig.json
rename to packages/react/tabs-old/tsconfig.json
diff --git a/packages/react/tabs/tsconfig.lib.json b/packages/react/tabs-old/tsconfig.lib.json
similarity index 100%
rename from packages/react/tabs/tsconfig.lib.json
rename to packages/react/tabs-old/tsconfig.lib.json
diff --git a/packages/react/tabs/vite.config.ts b/packages/react/tabs-old/vite.config.ts
similarity index 100%
rename from packages/react/tabs/vite.config.ts
rename to packages/react/tabs-old/vite.config.ts
diff --git a/packages/react/tabs/src/lib/tab.model.ts b/packages/react/tabs/src/lib/tab.model.ts
deleted file mode 100644
index d2659672..00000000
--- a/packages/react/tabs/src/lib/tab.model.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export type TabValue = string;
-
-export interface TabSelectionChangeEvent {
-  previousIndex: number;
-  previousValue: TabValue;
-  index: number;
-  value: TabValue;
-}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d1d2a508..6e119e6a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1324,7 +1324,7 @@ importers:
       '@cocokits/react-radio':
         specifier: workspace:*
         version: link:../../../dist/packages/react/radio
-      '@cocokits/react-tabs':
+      '@cocokits/react-tabs-old':
         specifier: workspace:*
         version: link:../../../dist/packages/react/tabs
       '@cocokits/react-toggle':
diff --git a/tsconfig.base.json b/tsconfig.base.json
index f9037527..98a45720 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -52,7 +52,7 @@
       "@cocokits/react-menu": ["packages/react/menu/src/index.ts"],
       "@cocokits/react-overlay": ["packages/react/overlay/src/index.ts"],
       "@cocokits/react-radio": ["packages/react/radio/src/index.ts"],
-      "@cocokits/react-tabs": ["packages/react/tabs/src/index.ts"],
+      "@cocokits/react-tabs-old": ["packages/react/tabs-old/src/index.ts"],
       "@cocokits/react-toggle": ["packages/react/toggle/src/index.ts"],
       "@cocokits/react-utils": ["packages/react/utils/src/index.ts"],
       "@cocokits/storybook-addon-theme": ["packages/internal/storybook-addon-theme/src/index.ts"],
diff --git a/tsconfig.storybook-manager-paths.json b/tsconfig.storybook-manager-paths.json
index 11cf23bf..ce98e9df 100644
--- a/tsconfig.storybook-manager-paths.json
+++ b/tsconfig.storybook-manager-paths.json
@@ -218,11 +218,11 @@
         "../../packages/react/toggle/src/",
         "../../../packages/react/toggle/src/"
       ],
-      "@cocokits/react-tabs": [
-        "packages/react/tabs/src/",
-        "../packages/react/tabs/src/",
-        "../../packages/react/tabs/src/",
-        "../../../packages/react/tabs/src/"
+      "@cocokits/react-tabs-old": [
+        "packages/react/tabs-old/src/",
+        "../packages/react/tabs-old/src/",
+        "../../packages/react/tabs-old/src/",
+        "../../../packages/react/tabs-old/src/"
       ],
       "@cocokits/angular-avatar": [
         "packages/angular/avatar/src/",

From 60fdc73c06f2dcd9021fdcff22d21fd6443bcdfa Mon Sep 17 00:00:00 2001
From: Milad Faghihi <miladfm@gmail.com>
Date: Thu, 19 Jun 2025 22:54:02 +0200
Subject: [PATCH 2/8] fix(workspace-plugin): fix React component props and
 angular library import path

---
 .../react-component/__fileName__.tsx.template | 28 ++++++++++++++-----
 .../utils/generate-library.ts                 |  8 +++---
 2 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/tools/workspace-plugin/src/generators/component/files/react-component/__fileName__.tsx.template b/tools/workspace-plugin/src/generators/component/files/react-component/__fileName__.tsx.template
index 8d709a92..e018f44e 100644
--- a/tools/workspace-plugin/src/generators/component/files/react-component/__fileName__.tsx.template
+++ b/tools/workspace-plugin/src/generators/component/files/react-component/__fileName__.tsx.template
@@ -1,21 +1,35 @@
-import React, { forwardRef } from "react";
+import { CSSProperties, ReactNode } from "react";
 
 import { UIBaseComponentProps } from "@cocokits/core";
 import { useUiBaseComponentConfig } from "@cocokits/react-core";
 
-export interface <%= className %>Props extends Omit<React.HTMLAttributes<HTMLElement>, 'color' | 'type'>, UIBaseComponentProps {
-  children?: React.ReactNode;
+export interface <%= className %>Props extends UIBaseComponentProps {
+  /**
+   * *************** TODO *************
+   * The content inside the component.
+   * This can be a string, a number, an element, or an array of elements.
+   * It allows rendering nested components within this component.
+   */
+  children?: ReactNode | ReactNode[];
+  /**
+   * A custom class name that can be used to apply additional styles to the component.
+   */
+  className?: string;
+  /**
+   * An object containing inline styles that can be used to customize the appearance of the component.
+   */
+  style?: CSSProperties;
 }
 
-export const <%= className %> = forwardRef<HTMLDivElement, <%= className %>Props>(
-  ({ type, size, color, additional, children, ...restProps }, ref) => {
+export const <%= className %> = (props: <%= className %>Props) => {
     const { classNames, hostClassNames } = useUiBaseComponentConfig({
       componentName: "<%= propertyName %>",
-      props: { type, size, color, additional },
+      props,
+      extraHostElementClassConditions: [{ if: !!props.className, classes: () => [className] }],
     });
 
     return (
-      <div ref={ref} className={hostClassNames} {...restProps}>
+      <div className={hostClassNames} style={props.style}>
         {children}
       </div>
     );
diff --git a/tools/workspace-plugin/src/generators/ui-core-component/utils/generate-library.ts b/tools/workspace-plugin/src/generators/ui-core-component/utils/generate-library.ts
index adb0ca45..8eb071ad 100644
--- a/tools/workspace-plugin/src/generators/ui-core-component/utils/generate-library.ts
+++ b/tools/workspace-plugin/src/generators/ui-core-component/utils/generate-library.ts
@@ -11,8 +11,8 @@ export async function generateLibrary(options: UiCoreComponentGeneratorOptions)
     type: LibraryType.UI,
     framework: LibraryFramework.Angular,
     storybook: false,
-    directory: `/packages/angular`,
-    directoryFormat: GeneratorDirectoryFormat.Root,
+    directory: `packages/angular`,
+    directoryFormat: GeneratorDirectoryFormat.AsProvided,
     publishable: true,
     importPath: `@cocokits/angular-${options.libraryName.fileName}`,
     formatFiles: false,
@@ -27,8 +27,8 @@ export async function generateLibrary(options: UiCoreComponentGeneratorOptions)
     type: LibraryType.UI,
     framework: LibraryFramework.React,
     storybook: false,
-    directory: `/packages/react`,
-    directoryFormat: GeneratorDirectoryFormat.Root,
+    directory: `packages/react`,
+    directoryFormat: GeneratorDirectoryFormat.AsProvided,
     publishable: true,
     importPath: `@cocokits/react-${options.libraryName.fileName}`,
     formatFiles: false,

From adee6d226998ee9d1fed4b2a43ecee6c8d3d5562 Mon Sep 17 00:00:00 2001
From: Milad Faghihi <miladfm@gmail.com>
Date: Thu, 19 Jun 2025 23:56:58 +0200
Subject: [PATCH 3/8] feat(tabs): add empty tabs library

---
 .../utils/advanced-configuration.utils.tsx    |  2 +
 .../ui-components/tabs/tabs/description.md    |  1 +
 .../ui-components/tabs/tabs/index.stories.ts  | 36 +++++++++++
 .../tabs/tabs/overview/color.stories.ts       | 43 +++++++++++++
 .../tabs/tabs/overview/default.stories.ts     | 48 +++++++++++++++
 .../tabs/tabs/overview/size.stories.ts        | 44 ++++++++++++++
 .../tabs/tabs/overview/type.stories.ts        | 41 +++++++++++++
 .../utils/advanced-configuration.utils.tsx    |  2 +
 .../ui-components/tabs/tabs/description.md    |  1 +
 .../ui-components/tabs/tabs/index.stories.tsx | 28 +++++++++
 .../tabs/tabs/overview/color.stories.tsx      | 48 +++++++++++++++
 .../tabs/tabs/overview/default.stories.tsx    | 43 +++++++++++++
 .../tabs/tabs/overview/size.stories.tsx       | 50 ++++++++++++++++
 .../tabs/tabs/overview/type.stories.tsx       | 42 +++++++++++++
 packages/angular/components/package.json      |  3 +-
 packages/angular/tabs/.eslintrc.json          | 19 ++++++
 packages/angular/tabs/LICENSE                 |  9 +++
 packages/angular/tabs/README.md               |  3 +
 packages/angular/tabs/ng-package.json         |  8 +++
 packages/angular/tabs/package.json            | 20 +++++++
 packages/angular/tabs/project.json            | 29 +++++++++
 packages/angular/tabs/src/index.ts            |  3 +
 .../tabs/src/lib/tab/tab.component.html       |  1 +
 .../tabs/src/lib/tab/tab.component.scss       |  0
 .../angular/tabs/src/lib/tab/tab.component.ts | 20 +++++++
 .../tabs/src/lib/tabs/tabs.component.html     |  1 +
 .../tabs/src/lib/tabs/tabs.component.scss     |  0
 .../tabs/src/lib/tabs/tabs.component.ts       | 20 +++++++
 packages/angular/tabs/tsconfig.json           | 26 ++++++++
 packages/angular/tabs/tsconfig.lib.json       | 12 ++++
 packages/angular/tabs/tsconfig.lib.prod.json  |  9 +++
 .../core/src/lib/class-names/class-names.ts   |  4 ++
 .../class-names/layout-class-names-config.ts  | 10 +++-
 .../src/lib/class-names/tab-class-names.ts    | 32 ++++++++++
 .../src/lib/class-names/tabs-class-names.ts   | 32 ++++++++++
 .../src/lib/model/ui-base-components-name.ts  |  4 +-
 .../assets/styles/cck-themes-components.css   |  6 ++
 .../styles/cck-themes-components.min.css      |  2 +-
 packages/react/components/package.json        |  3 +-
 packages/react/tabs/.eslintrc.json            | 11 ++++
 packages/react/tabs/LICENSE                   |  9 +++
 packages/react/tabs/README.md                 |  3 +
 packages/react/tabs/package.json              | 29 +++++++++
 packages/react/tabs/project.json              | 16 +++++
 packages/react/tabs/src/index.ts              |  3 +
 packages/react/tabs/src/lib/tab/tab.tsx       | 39 ++++++++++++
 packages/react/tabs/src/lib/tabs/tabs.tsx     | 39 ++++++++++++
 packages/react/tabs/tsconfig.json             | 17 ++++++
 packages/react/tabs/tsconfig.lib.json         | 22 +++++++
 packages/react/tabs/vite.config.ts            | 60 +++++++++++++++++++
 .../themes/cocokits/src/lib/theme-config.ts   |  2 +
 .../themes/cocokits/src/styles/scss/_all.scss |  4 ++
 .../cocokits/src/styles/scss/_index.scss      |  2 +
 .../themes/cocokits/src/styles/scss/_tab.scss |  7 +++
 .../cocokits/src/styles/scss/_tabs.scss       |  7 +++
 .../themes/frames-x/src/lib/theme-config.ts   |  2 +
 .../themes/frames-x/src/styles/scss/_all.scss |  4 ++
 .../frames-x/src/styles/scss/_index.scss      |  2 +
 .../themes/frames-x/src/styles/scss/_tab.scss |  7 +++
 .../frames-x/src/styles/scss/_tabs.scss       |  7 +++
 .../generators/ui-core-component/schema.json  |  3 +-
 tsconfig.base.json                            |  2 +
 tsconfig.storybook-manager-paths.json         | 12 ++++
 63 files changed, 1006 insertions(+), 8 deletions(-)
 create mode 100644 apps/angular-kits-doc/stories/ui-components/tabs/tabs/description.md
 create mode 100644 apps/angular-kits-doc/stories/ui-components/tabs/tabs/index.stories.ts
 create mode 100644 apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/color.stories.ts
 create mode 100644 apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/default.stories.ts
 create mode 100644 apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/size.stories.ts
 create mode 100644 apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/type.stories.ts
 create mode 100644 apps/react-kits-doc/stories/ui-components/tabs/tabs/description.md
 create mode 100644 apps/react-kits-doc/stories/ui-components/tabs/tabs/index.stories.tsx
 create mode 100644 apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/color.stories.tsx
 create mode 100644 apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/default.stories.tsx
 create mode 100644 apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/size.stories.tsx
 create mode 100644 apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/type.stories.tsx
 create mode 100644 packages/angular/tabs/.eslintrc.json
 create mode 100644 packages/angular/tabs/LICENSE
 create mode 100644 packages/angular/tabs/README.md
 create mode 100644 packages/angular/tabs/ng-package.json
 create mode 100644 packages/angular/tabs/package.json
 create mode 100644 packages/angular/tabs/project.json
 create mode 100644 packages/angular/tabs/src/index.ts
 create mode 100644 packages/angular/tabs/src/lib/tab/tab.component.html
 create mode 100644 packages/angular/tabs/src/lib/tab/tab.component.scss
 create mode 100644 packages/angular/tabs/src/lib/tab/tab.component.ts
 create mode 100644 packages/angular/tabs/src/lib/tabs/tabs.component.html
 create mode 100644 packages/angular/tabs/src/lib/tabs/tabs.component.scss
 create mode 100644 packages/angular/tabs/src/lib/tabs/tabs.component.ts
 create mode 100644 packages/angular/tabs/tsconfig.json
 create mode 100644 packages/angular/tabs/tsconfig.lib.json
 create mode 100644 packages/angular/tabs/tsconfig.lib.prod.json
 create mode 100644 packages/common/core/src/lib/class-names/tab-class-names.ts
 create mode 100644 packages/common/core/src/lib/class-names/tabs-class-names.ts
 create mode 100644 packages/react/tabs/.eslintrc.json
 create mode 100644 packages/react/tabs/LICENSE
 create mode 100644 packages/react/tabs/README.md
 create mode 100644 packages/react/tabs/package.json
 create mode 100644 packages/react/tabs/project.json
 create mode 100644 packages/react/tabs/src/index.ts
 create mode 100644 packages/react/tabs/src/lib/tab/tab.tsx
 create mode 100644 packages/react/tabs/src/lib/tabs/tabs.tsx
 create mode 100644 packages/react/tabs/tsconfig.json
 create mode 100644 packages/react/tabs/tsconfig.lib.json
 create mode 100644 packages/react/tabs/vite.config.ts
 create mode 100644 packages/themes/cocokits/src/styles/scss/_tab.scss
 create mode 100644 packages/themes/cocokits/src/styles/scss/_tabs.scss
 create mode 100644 packages/themes/frames-x/src/styles/scss/_tab.scss
 create mode 100644 packages/themes/frames-x/src/styles/scss/_tabs.scss

diff --git a/apps/angular-kits-doc/stories/getting-started/utils/advanced-configuration.utils.tsx b/apps/angular-kits-doc/stories/getting-started/utils/advanced-configuration.utils.tsx
index d340da5d..7810b230 100644
--- a/apps/angular-kits-doc/stories/getting-started/utils/advanced-configuration.utils.tsx
+++ b/apps/angular-kits-doc/stories/getting-started/utils/advanced-configuration.utils.tsx
@@ -167,6 +167,8 @@ export function getMergeThemesStep3Scss() {
 @include Cocokits.components_accordion;
 @include Cocokits.components_accordion_header;
 @include Cocokits.components_accordion_panel;
+@include Cocokits.components_tabs;
+@include Cocokits.components_tab;
   
   `);
 }
diff --git a/apps/angular-kits-doc/stories/ui-components/tabs/tabs/description.md b/apps/angular-kits-doc/stories/ui-components/tabs/tabs/description.md
new file mode 100644
index 00000000..216ee58b
--- /dev/null
+++ b/apps/angular-kits-doc/stories/ui-components/tabs/tabs/description.md
@@ -0,0 +1 @@
+TODO: ...
diff --git a/apps/angular-kits-doc/stories/ui-components/tabs/tabs/index.stories.ts b/apps/angular-kits-doc/stories/ui-components/tabs/tabs/index.stories.ts
new file mode 100644
index 00000000..b0dc8aaa
--- /dev/null
+++ b/apps/angular-kits-doc/stories/ui-components/tabs/tabs/index.stories.ts
@@ -0,0 +1,36 @@
+import { applicationConfig, moduleMetadata } from '@storybook/angular';
+
+import { TabsComponent } from '@cocokits/angular-tabs';
+import { 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';
+
+const meta: StoriesMeta = {
+  component: TabsComponent,
+  title: 'UI Components/Tabs',
+  tags: ['status:new'],
+  decorators: [
+    applicationConfig({
+      providers: [withThemeConfigProvider()],
+    }),
+    moduleMetadata({
+      imports: [],
+    }),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component: [descriptionMd].join('\n'),
+      },
+    },
+    cckAddon: {
+      componentName: 'tabs',
+    },
+  },
+};
+export default meta;
diff --git a/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/color.stories.ts b/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/color.stories.ts
new file mode 100644
index 00000000..dd803a91
--- /dev/null
+++ b/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/color.stories.ts
@@ -0,0 +1,43 @@
+import { TabsComponent } from '@cocokits/angular-tabs';
+import { CCK_CONTROL, renderWithPageTab, renderWithThemeProp } from '@cocokits/storybook-addon-theme';
+import { StoryObj } from '@cocokits/storybook-addon-theme-angular';
+
+export const Color: StoryObj<TabsComponent> = {
+  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 => { %>
+            <cck-tabs
+              <% if (typeof type !== 'undefined') { %> 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) {
+        <cck-tabs [type]="cckControl.type" [color]="color"/>
+      }
+    `,
+  }),
+};
diff --git a/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/default.stories.ts b/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/default.stories.ts
new file mode 100644
index 00000000..be6a93b4
--- /dev/null
+++ b/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/default.stories.ts
@@ -0,0 +1,48 @@
+import { TabsComponent } from '@cocokits/angular-tabs';
+import { CCK_CONTROL, renderWithPageTab } from '@cocokits/storybook-addon-theme';
+import { ngThemeArgsToTemplate, StoryObj } from '@cocokits/storybook-addon-theme-angular';
+
+export const Default: StoryObj<TabsComponent> = {
+  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: `
+          <cck-tabs
+            <% if (typeof type !== 'undefined') { %> type='<%= type %>' <% } %>
+            <% if (typeof size !== 'undefined') { %> size='<%= size %>' <% } %>
+            <% if (typeof color !== 'undefined') { %> color='<%= color %>' <% } %>
+          >
+          </cck-tabs>
+          `,
+        },
+      ],
+      hasControl: true,
+      controls: [CCK_CONTROL.type(), CCK_CONTROL.size(), CCK_CONTROL.color(), CCK_CONTROL.additional()],
+    },
+  },
+  render: (args) => {
+    return {
+      props: {
+        ...args,
+      },
+      // [text]="cckControl.text"
+      template: `
+        <cck-tabs
+          ${ngThemeArgsToTemplate(args)}
+        >
+        </cck-tabs>
+      `,
+    };
+  },
+};
diff --git a/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/size.stories.ts b/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/size.stories.ts
new file mode 100644
index 00000000..b0f07d40
--- /dev/null
+++ b/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/size.stories.ts
@@ -0,0 +1,44 @@
+import { TabsComponent } from '@cocokits/angular-tabs';
+import { CCK_CONTROL, renderWithPageTab, renderWithThemeProp } from '@cocokits/storybook-addon-theme';
+import { StoryObj } from '@cocokits/storybook-addon-theme-angular';
+
+export const Size: StoryObj<TabsComponent> = {
+  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 => { %>
+            <cck-tabs
+             <% if (typeof type !== 'undefined') { %> 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) {
+        <cck-tabs [type]="cckControl.type" [size]="size"/>
+      }
+    `,
+  }),
+};
diff --git a/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/type.stories.ts b/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/type.stories.ts
new file mode 100644
index 00000000..4a5eb1f4
--- /dev/null
+++ b/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/type.stories.ts
@@ -0,0 +1,41 @@
+import { TabsComponent } from '@cocokits/angular-tabs';
+import { renderWithPageTab, renderWithThemeProp } from '@cocokits/storybook-addon-theme';
+import { StoryObj } from '@cocokits/storybook-addon-theme-angular';
+
+export const Type: StoryObj<TabsComponent> = {
+  name: 'Type',
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Displays variations in appearance and functionality, demonstrating how different types can be used to create unique Tabs styles.',
+      },
+    },
+    cckAddon: {
+      renderConditions: [renderWithThemeProp('type'), renderWithPageTab('Overview')],
+      source: [
+        {
+          filename: 'example.component.html',
+          language: 'angular-html',
+          code: `
+          <% themeComponentConfig.type.values.map(type => { %>
+            <cck-tabs
+              type='<%= type %>'
+            />
+          <% }) %>
+          `,
+        },
+      ],
+    },
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      @for (type of cckControl.themeComponentConfig?.type?.values; let col = $index; track type) {
+        <cck-tabs [type]="type"/>
+      }
+    `,
+  }),
+};
diff --git a/apps/react-kits-doc/stories/getting-started/utils/advanced-configuration.utils.tsx b/apps/react-kits-doc/stories/getting-started/utils/advanced-configuration.utils.tsx
index 5ff56faa..cdfd4d86 100644
--- a/apps/react-kits-doc/stories/getting-started/utils/advanced-configuration.utils.tsx
+++ b/apps/react-kits-doc/stories/getting-started/utils/advanced-configuration.utils.tsx
@@ -181,6 +181,8 @@ export function getMergeThemesStep3Scss() {
 @include Cocokits.components_accordion;
 @include Cocokits.components_accordion_header;
 @include Cocokits.components_accordion_panel;
+@include Cocokits.components_tabs;
+@include Cocokits.components_tab;
 
   
   `);
diff --git a/apps/react-kits-doc/stories/ui-components/tabs/tabs/description.md b/apps/react-kits-doc/stories/ui-components/tabs/tabs/description.md
new file mode 100644
index 00000000..216ee58b
--- /dev/null
+++ b/apps/react-kits-doc/stories/ui-components/tabs/tabs/description.md
@@ -0,0 +1 @@
+TODO: ...
diff --git a/apps/react-kits-doc/stories/ui-components/tabs/tabs/index.stories.tsx b/apps/react-kits-doc/stories/ui-components/tabs/tabs/index.stories.tsx
new file mode 100644
index 00000000..bff13c05
--- /dev/null
+++ b/apps/react-kits-doc/stories/ui-components/tabs/tabs/index.stories.tsx
@@ -0,0 +1,28 @@
+import { Tabs } from '@cocokits/react-tabs';
+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';
+
+const meta: StoriesMeta<typeof Tabs> = {
+  component: Tabs,
+  title: 'UI Components/Tabs',
+  tags: ['status:new'],
+  decorators: [],
+  parameters: {
+    docs: {
+      description: {
+        component: [descriptionMd].join('\n'),
+      },
+    },
+    cckAddon: {
+      componentName: 'tabs',
+    },
+  },
+  argTypes: {},
+};
+export default meta;
diff --git a/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/color.stories.tsx b/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/color.stories.tsx
new file mode 100644
index 00000000..4a027e1d
--- /dev/null
+++ b/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/color.stories.tsx
@@ -0,0 +1,48 @@
+import { Tabs } from '@cocokits/react-tabs';
+import { CCK_CONTROL, renderWithPageTab, renderWithThemeProp } from '@cocokits/storybook-addon-theme';
+import { StoryObj } from '@cocokits/storybook-addon-theme-react';
+
+export const Color: StoryObj<typeof Tabs> = {
+  name: 'Color',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Color options enable seamless integration with various themes or to highlight specific actions.',
+      },
+    },
+    cckAddon: {
+      renderConditions: [renderWithThemeProp('color'), renderWithPageTab('Overview')],
+      singleControls: ['type'],
+      source: [
+        {
+          filename: 'Source Code',
+          language: 'tsx',
+          code: `
+          import { Tabs } from "@cocokits/react-components";
+
+          export const MyComponent = () => {
+            return (
+              <>
+                <% themeComponentConfig.color.values.map(color => { %>
+                  <Tabs
+                    <% if (typeof type !== 'undefined') { %> type='<%= type %>' <% } %>
+                    color='<%= color %>'
+                  />
+                <% }) %>
+              </>
+            );
+          }
+          `,
+        },
+      ],
+      controls: [CCK_CONTROL.type()],
+    },
+  },
+  render: (args) => (
+    <>
+      {args.cckControl.themeComponentConfig.color?.values.map((color, index) => (
+        <Tabs key={index} type={args.cckControl.type} color={color} />
+      ))}
+    </>
+  ),
+};
diff --git a/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/default.stories.tsx b/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/default.stories.tsx
new file mode 100644
index 00000000..13462373
--- /dev/null
+++ b/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/default.stories.tsx
@@ -0,0 +1,43 @@
+import { Tabs } from '@cocokits/react-tabs';
+import { CCK_CONTROL, renderWithPageTab } from '@cocokits/storybook-addon-theme';
+import { reactThemeArgsToTemplate, StoryObj } from '@cocokits/storybook-addon-theme-react';
+
+export const Default: StoryObj<typeof Tabs> = {
+  name: 'Default',
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Shows the default example with no additional configurations, providing an interactive example in its most basic form.',
+      },
+    },
+    cckAddon: {
+      source: [
+        {
+          filename: 'Source Code',
+          language: 'tsx',
+          code: `
+          import { Tabs, SvgIcon} from '@cocokits/react-components';
+
+          export const MyComponent = () => {
+            return (
+              <Tabs
+                <% if (typeof type !== 'undefined') { %> type='<%= type %>' <% } %>
+                <% if (typeof size !== 'undefined') { %> size='<%= size %>' <% } %>
+                <% if (typeof color !== 'undefined') { %> color='<%= color %>' <% } %>
+              >
+              </Tabs>
+            )
+          }
+          `,
+        },
+      ],
+      renderConditions: [renderWithPageTab('Overview')],
+      hasControl: true,
+      controls: [CCK_CONTROL.type(), CCK_CONTROL.size(), CCK_CONTROL.color(), CCK_CONTROL.additional()],
+    },
+  },
+  args: {},
+  // text={args.cckControl.text}
+  render: (args) => <Tabs {...reactThemeArgsToTemplate(args)}></Tabs>,
+};
diff --git a/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/size.stories.tsx b/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/size.stories.tsx
new file mode 100644
index 00000000..a4ecfbb1
--- /dev/null
+++ b/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/size.stories.tsx
@@ -0,0 +1,50 @@
+import { Tabs } from '@cocokits/react-tabs';
+import { CCK_CONTROL, renderWithPageTab, renderWithThemeProp } from '@cocokits/storybook-addon-theme';
+import { StoryObj } from '@cocokits/storybook-addon-theme-react';
+
+export const Size: StoryObj<typeof Tabs> = {
+  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 => { %>
+                  <Tabs
+                    <% if (typeof type !== 'undefined') { %> type='<%= type %>' <% } %>
+                    size='<%= size %>'
+                  />
+                <% }) %>
+              </>
+
+            );
+          }
+          `,
+        },
+      ],
+      controls: [CCK_CONTROL.type()],
+    },
+  },
+  render: (args) => (
+    <>
+      {args.cckControl.themeComponentConfig.size?.values.map((size, index) => (
+        <Tabs key={index} type={args.cckControl.type} size={size} />
+      ))}
+    </>
+  ),
+};
diff --git a/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/type.stories.tsx b/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/type.stories.tsx
new file mode 100644
index 00000000..5ba4752e
--- /dev/null
+++ b/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/type.stories.tsx
@@ -0,0 +1,42 @@
+import { Tabs } from '@cocokits/react-tabs';
+import { renderWithPageTab, renderWithThemeProp } from '@cocokits/storybook-addon-theme';
+import { StoryObj } from '@cocokits/storybook-addon-theme-react';
+
+export const Type: StoryObj<typeof Tabs> = {
+  name: 'Type',
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Displays variations in appearance and functionality, demonstrating how different types can be used to create unique Tabs styles.',
+      },
+    },
+    cckAddon: {
+      renderConditions: [renderWithThemeProp('type'), renderWithPageTab('Overview')],
+      source: [
+        {
+          filename: 'Source Code',
+          language: 'tsx',
+          code: `
+          import { Tabs } from "@cocokits/react-components";
+
+          export const MyComponent = () => {
+            return (
+              <>
+                <% themeComponentConfig.type.values.map(type => { %>
+                  <Tabs
+                    <% if (typeof type !== 'undefined') { %> type='<%= type %>' <% } %>
+                  />
+                <% }) %>
+              </>
+            );
+          }
+          `,
+        },
+      ],
+    },
+  },
+  render: (args) => (
+    <>{args.cckControl.themeComponentConfig.type?.values.map((type, index) => <Tabs key={index} type={type} />)}</>
+  ),
+};
diff --git a/packages/angular/components/package.json b/packages/angular/components/package.json
index 362fc2f9..54b48b93 100644
--- a/packages/angular/components/package.json
+++ b/packages/angular/components/package.json
@@ -17,7 +17,8 @@
     "@cocokits/common-utils": "workspace:*",
     "@cocokits/core": "workspace:*",
     "tslib": "^2.3.0",
-    "@cocokits/angular-accordion": "workspace:*"
+    "@cocokits/angular-accordion": "workspace:*",
+    "@cocokits/angular-tabs": "workspace:*"
   },
   "devDependencies": {},
   "peerDependencies": {},
diff --git a/packages/angular/tabs/.eslintrc.json b/packages/angular/tabs/.eslintrc.json
new file mode 100644
index 00000000..f6fdaca9
--- /dev/null
+++ b/packages/angular/tabs/.eslintrc.json
@@ -0,0 +1,19 @@
+{
+  "extends": ["../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "plugin:@nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates",
+        "../../../tools/eslint/eslint.angular.json"
+      ]
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}
diff --git a/packages/angular/tabs/LICENSE b/packages/angular/tabs/LICENSE
new file mode 100644
index 00000000..637feac8
--- /dev/null
+++ b/packages/angular/tabs/LICENSE
@@ -0,0 +1,9 @@
+Copyright 2025 Milad Faghihi, Cocokits
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and limitations under the License.
diff --git a/packages/angular/tabs/README.md b/packages/angular/tabs/README.md
new file mode 100644
index 00000000..1631dcbd
--- /dev/null
+++ b/packages/angular/tabs/README.md
@@ -0,0 +1,3 @@
+# tabs
+
+## TODO: Write a good description
diff --git a/packages/angular/tabs/ng-package.json b/packages/angular/tabs/ng-package.json
new file mode 100644
index 00000000..a9e5330e
--- /dev/null
+++ b/packages/angular/tabs/ng-package.json
@@ -0,0 +1,8 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../../dist/packages/angular/tabs",
+  "lib": {
+    "entryFile": "src/index.ts"
+  },
+  "allowedNonPeerDependencies": ["@cocokits/"]
+}
diff --git a/packages/angular/tabs/package.json b/packages/angular/tabs/package.json
new file mode 100644
index 00000000..bd03afe4
--- /dev/null
+++ b/packages/angular/tabs/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "@cocokits/angular-tabs",
+  "version": "0.0.0",
+  "private": false,
+  "sideEffects": false,
+  "dependencies": {
+    "tslib": "^2.3.0",
+    "@cocokits/angular-core": "workspace:*",
+    "@cocokits/core": "workspace:*"
+  },
+  "devDependencies": {},
+  "peerDependencies": {
+    "@angular/common": "^18.2.0",
+    "@angular/core": "^18.2.0"
+  },
+  "publishConfig": {
+    "directory": "../../../dist/packages/angular/tabs",
+    "access": "public"
+  }
+}
diff --git a/packages/angular/tabs/project.json b/packages/angular/tabs/project.json
new file mode 100644
index 00000000..94e87e34
--- /dev/null
+++ b/packages/angular/tabs/project.json
@@ -0,0 +1,29 @@
+{
+  "name": "@cocokits/angular-tabs",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/angular/tabs/src",
+  "prefix": "lib",
+  "projectType": "library",
+  "tags": ["type:ui", "framework:angular"],
+  "targets": {
+    "build": {
+      "executor": "@nx/angular:package",
+      "outputs": ["{workspaceRoot}/dist/{projectRoot}"],
+      "options": {
+        "project": "packages/angular/tabs/ng-package.json"
+      },
+      "configurations": {
+        "production": {
+          "tsConfig": "packages/angular/tabs/tsconfig.lib.prod.json"
+        },
+        "development": {
+          "tsConfig": "packages/angular/tabs/tsconfig.lib.json"
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "quick-fix-eslint": {
+      "executor": "@nx/eslint:lint"
+    }
+  }
+}
diff --git a/packages/angular/tabs/src/index.ts b/packages/angular/tabs/src/index.ts
new file mode 100644
index 00000000..45f58922
--- /dev/null
+++ b/packages/angular/tabs/src/index.ts
@@ -0,0 +1,3 @@
+export * from './lib/tabs/tabs.component';
+
+export * from './lib/tab/tab.component';
diff --git a/packages/angular/tabs/src/lib/tab/tab.component.html b/packages/angular/tabs/src/lib/tab/tab.component.html
new file mode 100644
index 00000000..3aea565a
--- /dev/null
+++ b/packages/angular/tabs/src/lib/tab/tab.component.html
@@ -0,0 +1 @@
+<p>cck-tab works !!</p>
diff --git a/packages/angular/tabs/src/lib/tab/tab.component.scss b/packages/angular/tabs/src/lib/tab/tab.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/angular/tabs/src/lib/tab/tab.component.ts b/packages/angular/tabs/src/lib/tab/tab.component.ts
new file mode 100644
index 00000000..aacd5d89
--- /dev/null
+++ b/packages/angular/tabs/src/lib/tab/tab.component.ts
@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component, computed, ViewEncapsulation } from '@angular/core';
+
+import { _UiBaseComponent } from '@cocokits/angular-core';
+
+@Component({
+  standalone: true,
+  imports: [],
+  selector: 'cck-tab',
+  templateUrl: './tab.component.html',
+  styleUrls: ['./tab.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    '[class]': 'hostClassNames()',
+  },
+})
+export class TabComponent extends _UiBaseComponent<'tab'> {
+  protected readonly componentName = 'tab';
+  protected extraHostElementClassConditions = computed(() => []);
+}
diff --git a/packages/angular/tabs/src/lib/tabs/tabs.component.html b/packages/angular/tabs/src/lib/tabs/tabs.component.html
new file mode 100644
index 00000000..78193652
--- /dev/null
+++ b/packages/angular/tabs/src/lib/tabs/tabs.component.html
@@ -0,0 +1 @@
+<p>cck-tabs works !!</p>
diff --git a/packages/angular/tabs/src/lib/tabs/tabs.component.scss b/packages/angular/tabs/src/lib/tabs/tabs.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/angular/tabs/src/lib/tabs/tabs.component.ts b/packages/angular/tabs/src/lib/tabs/tabs.component.ts
new file mode 100644
index 00000000..9336f5e9
--- /dev/null
+++ b/packages/angular/tabs/src/lib/tabs/tabs.component.ts
@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component, computed, ViewEncapsulation } from '@angular/core';
+
+import { _UiBaseComponent } from '@cocokits/angular-core';
+
+@Component({
+  standalone: true,
+  imports: [],
+  selector: 'cck-tabs',
+  templateUrl: './tabs.component.html',
+  styleUrls: ['./tabs.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    '[class]': 'hostClassNames()',
+  },
+})
+export class TabsComponent extends _UiBaseComponent<'tabs'> {
+  protected readonly componentName = 'tabs';
+  protected extraHostElementClassConditions = computed(() => []);
+}
diff --git a/packages/angular/tabs/tsconfig.json b/packages/angular/tabs/tsconfig.json
new file mode 100644
index 00000000..8e62d6db
--- /dev/null
+++ b/packages/angular/tabs/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "useDefineForClassFields": false,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ],
+  "extends": "../../../tsconfig.base.json",
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
diff --git a/packages/angular/tabs/tsconfig.lib.json b/packages/angular/tabs/tsconfig.lib.json
new file mode 100644
index 00000000..f68063a5
--- /dev/null
+++ b/packages/angular/tabs/tsconfig.lib.json
@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": ["src/**/*.spec.ts", "jest.config.ts", "src/**/*.test.ts"],
+  "include": ["src/**/*.ts"]
+}
diff --git a/packages/angular/tabs/tsconfig.lib.prod.json b/packages/angular/tabs/tsconfig.lib.prod.json
new file mode 100644
index 00000000..2a2faa88
--- /dev/null
+++ b/packages/angular/tabs/tsconfig.lib.prod.json
@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}
diff --git a/packages/common/core/src/lib/class-names/class-names.ts b/packages/common/core/src/lib/class-names/class-names.ts
index 8d3ea873..03969683 100644
--- a/packages/common/core/src/lib/class-names/class-names.ts
+++ b/packages/common/core/src/lib/class-names/class-names.ts
@@ -31,8 +31,10 @@ import { getRadioGroupClassNames } from './radio-group-class-names';
 import { getSelectClassNames } from './select-class-names';
 import { getSelectPreviewClassNames } from './select-preview-class-names';
 import { getSuffixClassNames } from './suffix-class-names';
+import { getTabClassNames } from './tab-class-names';
 import { getTabClassNamesOld } from './tab-class-names-old';
 import { getTabLabelClassNamesOld } from './tab-label-class-names-old';
+import { getTabsClassNames } from './tabs-class-names';
 import { getTabsClassNamesOld } from './tabs-class-names-old';
 import { getTextareaClassNames } from './textarea-class-names';
 import { getToggleClassNames } from './toggle-class-names';
@@ -78,6 +80,8 @@ export const CLASS_NAMES_FN_MAP = {
   accordion: getAccordionClassNames,
   accordionHeader: getAccordionHeaderClassNames,
   accordionPanel: getAccordionPanelClassNames,
+  tabs: getTabsClassNames,
+  tab: getTabClassNames,
 };
 
 export function getClassNames<T extends UIBaseComponentsName>(
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 fbf90695..551bc249 100644
--- a/packages/common/core/src/lib/class-names/layout-class-names-config.ts
+++ b/packages/common/core/src/lib/class-names/layout-class-names-config.ts
@@ -28,8 +28,10 @@ import { radioGroupLayoutClassNamesConfig } from './radio-group-class-names';
 import { selectLayoutClassNamesConfig } from './select-class-names';
 import { selectPreviewLayoutClassNamesConfig } from './select-preview-class-names';
 import { suffixLayoutClassNamesConfig } from './suffix-class-names';
+import { tabLayoutClassNamesConfig } from './tab-class-names';
 import { tabLayoutClassNamesConfigOld } from './tab-class-names-old';
 import { tabLabelLayoutClassNamesConfigOld } from './tab-label-class-names-old';
+import { tabsLayoutClassNamesConfig } from './tabs-class-names';
 import { tabsLayoutClassNamesConfigOld } from './tabs-class-names-old';
 import { textareaClassNamesConfig } from './textarea-class-names';
 import { toggleLayoutClassNamesConfig } from './toggle-class-names';
@@ -69,9 +71,9 @@ export const layoutClassNamesConfigRecord = {
   menuItem: menuItemLayoutClassNamesConfig,
   divider: dividerLayoutClassNamesConfig,
   toggle: toggleLayoutClassNamesConfig,
-  tabs: tabsLayoutClassNamesConfigOld,
-  tab: tabLayoutClassNamesConfigOld,
-  tabLabel: tabLabelLayoutClassNamesConfigOld,
+  tabsOld: tabsLayoutClassNamesConfigOld,
+  tabOld: tabLayoutClassNamesConfigOld,
+  tabLabelOld: tabLabelLayoutClassNamesConfigOld,
   overlay: overlayLayoutClassNamesConfig,
   avatar: avatarLayoutClassNamesConfig,
   avatarGroup: avatarGroupLayoutClassNamesConfig,
@@ -79,4 +81,6 @@ export const layoutClassNamesConfigRecord = {
   accordion: accordionLayoutClassNamesConfig,
   accordionHeader: accordionHeaderLayoutClassNamesConfig,
   accordionPanel: accordionPanelLayoutClassNamesConfig,
+  tabs: tabsLayoutClassNamesConfig,
+  tab: tabLayoutClassNamesConfig,
 };
diff --git a/packages/common/core/src/lib/class-names/tab-class-names.ts b/packages/common/core/src/lib/class-names/tab-class-names.ts
new file mode 100644
index 00000000..f39c92ce
--- /dev/null
+++ b/packages/common/core/src/lib/class-names/tab-class-names.ts
@@ -0,0 +1,32 @@
+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 tabLayoutClassNamesConfig = {
+  componentName: 'tab',
+  baseSelectorStructure: { block: 'tab' },
+  elements: {
+    host: {
+      name: 'Host Element',
+      selectorStructure: [],
+      description: 'It will add to the host element of `Tab` component.',
+    },
+    // example: {
+    //   name: '...',
+    //   selectorStructure: [{ element: '...', modifier: '...' }],
+    //   description: `...`,
+    // },
+  },
+} satisfies LayoutClassNamesConfig;
+
+export function getTabClassNames(
+  componentProps: UIBaseComponentProps,
+  themeConfig: ThemeConfig
+): Record<keyof typeof tabLayoutClassNamesConfig.elements, string> {
+  validateUiBaseComponentProps(tabLayoutClassNamesConfig.componentName, componentProps, themeConfig);
+
+  return {
+    host: generateLayoutClassNameFromElement(tabLayoutClassNamesConfig, 'host', themeConfig, componentProps),
+    // example: generateLayoutClassNameFromElement(tabLayoutClassNamesConfig, 'example', themeConfig),
+  };
+}
diff --git a/packages/common/core/src/lib/class-names/tabs-class-names.ts b/packages/common/core/src/lib/class-names/tabs-class-names.ts
new file mode 100644
index 00000000..8bc7c429
--- /dev/null
+++ b/packages/common/core/src/lib/class-names/tabs-class-names.ts
@@ -0,0 +1,32 @@
+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 tabsLayoutClassNamesConfig = {
+  componentName: 'tabs',
+  baseSelectorStructure: { block: 'tabs' },
+  elements: {
+    host: {
+      name: 'Host Element',
+      selectorStructure: [],
+      description: 'It will add to the host element of `Tabs` component.',
+    },
+    // example: {
+    //   name: '...',
+    //   selectorStructure: [{ element: '...', modifier: '...' }],
+    //   description: `...`,
+    // },
+  },
+} satisfies LayoutClassNamesConfig;
+
+export function getTabsClassNames(
+  componentProps: UIBaseComponentProps,
+  themeConfig: ThemeConfig
+): Record<keyof typeof tabsLayoutClassNamesConfig.elements, string> {
+  validateUiBaseComponentProps(tabsLayoutClassNamesConfig.componentName, componentProps, themeConfig);
+
+  return {
+    host: generateLayoutClassNameFromElement(tabsLayoutClassNamesConfig, 'host', themeConfig, componentProps),
+    // example: generateLayoutClassNameFromElement(tabsLayoutClassNamesConfig, 'example', themeConfig),
+  };
+}
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 aefe2d97..9e18ad61 100644
--- a/packages/common/core/src/lib/model/ui-base-components-name.ts
+++ b/packages/common/core/src/lib/model/ui-base-components-name.ts
@@ -10,7 +10,8 @@ export type UIBaseComponentsName =
   | _Tabs_ComponentNameOld
   | OverlayComponentName
   | AvatarComponentName
-  | AccordionComponentName;
+  | AccordionComponentName
+  | TabsComponentName;
 
 type FormFieldComponentName =
   | 'formField'
@@ -41,3 +42,4 @@ type _Tabs_ComponentNameOld = 'tabsOld' | 'tabOld' | 'tabLabelOld';
 type OverlayComponentName = 'overlay';
 type AvatarComponentName = 'avatar' | 'avatarGroup' | 'avatarLabel';
 type AccordionComponentName = 'accordion' | 'accordionHeader' | 'accordionPanel';
+type TabsComponentName = 'tabs' | 'tab';
diff --git a/packages/internal/storybook-addon-theme/src/assets/styles/cck-themes-components.css b/packages/internal/storybook-addon-theme/src/assets/styles/cck-themes-components.css
index b2d4921d..4873ae59 100644
--- a/packages/internal/storybook-addon-theme/src/assets/styles/cck-themes-components.css
+++ b/packages/internal/storybook-addon-theme/src/assets/styles/cck-themes-components.css
@@ -1829,6 +1829,9 @@
 [data-cck-theme-name=cocokits] .cck-accordion__basic > .cck-accordion-panel):not(:last-of-type){
   border-bottom:1px solid var(--color-border-default);
 }
+:where([data-cck-theme-name=cocokits] .cck-tabs){
+  opacity:1;
+}
 
 :where([data-cck-theme-name=frames-x] .cck-button){
   display:inline-flex;
@@ -3891,4 +3894,7 @@
 }
 :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){
+  opacity:1;
 }
\ No newline at end of file
diff --git a/packages/internal/storybook-addon-theme/src/assets/styles/cck-themes-components.min.css b/packages/internal/storybook-addon-theme/src/assets/styles/cck-themes-components.min.css
index f1b1605b..08f486c8 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,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="%238897AE"><path d="M2.4,12.6c-0.3-0.3-0.3-0.7-0.1-0.9l9.4-9.4c0.2-0.2,0.6-0.1,0.9,0.1s0.3,0.7,0.1,0.9l-9.4,9.4C3.1,12.9,2.7,12.8,2.4,12.6z M7.1,12.8c-0.3-0.3-0.3-0.6-0.2-0.8L12,6.9c0.2-0.2,0.5-0.1,0.8,0.2c0.3,0.3,0.3,0.6,0.2,0.8L7.8,13C7.7,13.1,7.3,13,7.1,12.8z"/></svg>');height:16px;width:16px}:where([data-cck-theme-name=cocokits] .cck-textarea):disabled{cursor:default;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-toggle){-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-toggle):not(.cck-toggle--disabled){cursor:pointer}:where([data-cck-theme-name=cocokits] .cck-toggle__label){align-items:center;color:var(--color-font-default);display:flex;font:var(--text-sm-regular);gap:var(--toggle-spacing-gap)}:where([data-cck-theme-name=cocokits] .cck-toggle__label):not(.cck-toggle--disabled){cursor:pointer}:where([data-cck-theme-name=cocokits] .cck-toggle--label-before .cck-toggle__label){flex-direction:row-reverse}:where([data-cck-theme-name=cocokits] .cck-toggle__slider-wrapper){border-radius:100px;position:relative;width:var(--toggle-size-width-sm)}:where([data-cck-theme-name=cocokits] .cck-toggle__input){cursor:pointer;height:100%;margin:0;opacity:0;padding:0;position:relative;width:100%;z-index:3}:where([data-cck-theme-name=cocokits] .cck-toggle__thumb){background-color:var(--toggle-color-thumb);border:2px solid var(--toggle-color-thumb-border);border-radius:100px;left:0;position:absolute;top:50%;transform:translateY(-50%);transition:all .3s ease,left .3s cubic-bezier(.18,.89,.35,1.15);z-index:2}:where([data-cck-theme-name=cocokits] .cck-toggle__backdrop){background-color:var(--toggle-color-backdrop-unselected);border-radius:100px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:all .3s ease;z-index:1}:where([data-cck-theme-name=cocokits] .cck-toggle--disabled){color:var(--color-disabled-font);cursor:default;pointer-events:none}:where([data-cck-theme-name=cocokits] .cck-toggle--disabled .cck-toggle__thumb){background-color:var(--toggle-color-thumb-disabled)}:where([data-cck-theme-name=cocokits] .cck-toggle--disabled .cck-toggle__backdrop){background-color:var(--toggle-color-backdrop-disabled)}:where([data-cck-theme-name=cocokits] .cck-toggle--checked .cck-toggle__thumb){left:100%;transform:translate(-100%,-50%)}:where([data-cck-theme-name=cocokits] .cck-toggle--checked:active .cck-toggle__thumb){margin-left:calc(var(--toggle-size-bounce)/2*-1)}:where([data-cck-theme-name=cocokits] .cck-toggle--unchecked:active .cck-toggle__thumb){margin-left:calc(var(--toggle-size-bounce)/2)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--brand:not(.cck-toggle--disabled).cck-toggle--checked .cck-toggle__backdrop){background-color:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--brand:not(.cck-toggle--disabled):hover .cck-toggle__thumb){border-color:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--info:not(.cck-toggle--disabled).cck-toggle--checked .cck-toggle__backdrop){background-color:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--info:not(.cck-toggle--disabled):hover .cck-toggle__thumb){border-color:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--warning:not(.cck-toggle--disabled).cck-toggle--checked .cck-toggle__backdrop){background-color:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--warning:not(.cck-toggle--disabled):hover .cck-toggle__thumb){border-color:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--error:not(.cck-toggle--disabled).cck-toggle--checked .cck-toggle__backdrop){background-color:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--error:not(.cck-toggle--disabled):hover .cck-toggle__thumb){border-color:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--h-contrast:not(.cck-toggle--disabled).cck-toggle--checked .cck-toggle__backdrop){background-color:var(--color-h-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--h-contrast:not(.cck-toggle--disabled):hover .cck-toggle__thumb){border-color:var(--color-h-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__size--sm .cck-toggle__slider-wrapper){width:var(--toggle-size-width-sm)}:where([data-cck-theme-name=cocokits] .cck-toggle__size--sm .cck-toggle__thumb){height:var(--toggle-size-thumb-sm);width:var(--toggle-size-thumb-sm)}:where([data-cck-theme-name=cocokits] .cck-toggle__size--sm .cck-toggle__backdrop){height:var(--toggle-size-backdrop-sm);width:calc(var(--toggle-size-width-sm) - var(--toggle-size-thumb-sm))}:where([data-cck-theme-name=cocokits] .cck-toggle__size--sm:active .cck-toggle__thumb){width:calc(var(--toggle-size-thumb-sm) + var(--toggle-size-bounce))}:where([data-cck-theme-name=cocokits] .cck-toggle__size--md .cck-toggle__slider-wrapper){width:var(--toggle-size-width-md)}:where([data-cck-theme-name=cocokits] .cck-toggle__size--md .cck-toggle__backdrop){height:var(--toggle-size-backdrop-md);width:calc(var(--toggle-size-width-md) - var(--toggle-size-thumb-md))}:where([data-cck-theme-name=cocokits] .cck-toggle__size--md .cck-toggle__thumb){height:var(--toggle-size-thumb-md);width:var(--toggle-size-thumb-md)}:where([data-cck-theme-name=cocokits] .cck-toggle__size--md:active .cck-toggle__thumb){width:calc(var(--toggle-size-thumb-md) + var(--toggle-size-bounce))}:where([data-cck-theme-name=cocokits] .cck-toggle__size--lg .cck-toggle__slider-wrapper){width:var(--toggle-size-width-lg)}:where([data-cck-theme-name=cocokits] .cck-toggle__size--lg .cck-toggle__backdrop){height:var(--toggle-size-backdrop-lg);width:calc(var(--toggle-size-width-lg) - var(--toggle-size-thumb-lg))}:where([data-cck-theme-name=cocokits] .cck-toggle__size--lg .cck-toggle__thumb){height:var(--toggle-size-thumb-lg);width:var(--toggle-size-thumb-lg)}:where([data-cck-theme-name=cocokits] .cck-toggle__size--lg:active .cck-toggle__thumb){width:calc(var(--toggle-size-thumb-lg) + var(--toggle-size-bounce))}:where([data-cck-theme-name=cocokits] .cck-trailing){align-items:center;border:1px solid var(--form_field-color-border);border-left:none;color:var(--color-font-alpha-7);display:flex;flex-grow:0;gap:var(--form_field-spacing-trailing-gap);justify-content:center;padding:0 var(--form_field-spacing-input-wrapper-h-padding);-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-trailing .cck-select){color:currentcolor;font:inherit}:where([data-cck-theme-name=cocokits] .cck-trailing__regular){font:var(--text-sm-regular)}:where([data-cck-theme-name=cocokits] .cck-trailing__medium){font:var(--text-sm-medium)}:where([data-cck-theme-name=cocokits] .cck-trailing--clickable){cursor:pointer;transition:background-color .1s}:where([data-cck-theme-name=cocokits] .cck-trailing .cck-svg-icon.cck-svg-icon--default-size){height:var(--icon-size-xs);width:var(--icon-size-xs)}:where([data-cck-theme-name=cocokits] .cck-trailing__color--transparent){background-color:transparent}:where([data-cck-theme-name=cocokits] .cck-trailing__color--transparent.cck-trailing--clickable):active{background-color:var(--color-surface-inverse-alpha-4)}:where([data-cck-theme-name=cocokits] .cck-trailing__color--transparent.cck-trailing--clickable):hover:not(:active){background-color:var(--color-surface-inverse-alpha-1)}:where([data-cck-theme-name=cocokits] .cck-trailing__color--grey){background-color:var(--color-surface-inverse-alpha-1)}:where([data-cck-theme-name=cocokits] .cck-trailing__color--grey.cck-trailing--clickable):active{background-color:var(--color-surface-inverse-alpha-4)}:where([data-cck-theme-name=cocokits] .cck-trailing__color--grey.cck-trailing--clickable):hover:not(:active){background-color:var(--color-surface-inverse-alpha-3)}:where([data-cck-theme-name=cocokits] .cck-trailing .cck-svg-icon.cck-svg-icon--default-color .cck-svg-icon__svg){fill:var(--form_field-color-icon)}:where([data-cck-theme-name=cocokits] .cck-avatar){align-items:center;border-radius:50%;display:flex;justify-content:center;overflow:hidden}:where([data-cck-theme-name=cocokits] .cck-avatar__fallback-image),:where([data-cck-theme-name=cocokits] .cck-avatar__image),:where([data-cck-theme-name=cocokits] .cck-avatar__placeholder-image){border-radius:inherit;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}:where([data-cck-theme-name=cocokits] .cck-avatar--with-label){background-color:var(--color-brand-light);color:var(--color-font-default)}:where([data-cck-theme-name=cocokits] .cck-avatar--clickable){cursor:pointer}:where([data-cck-theme-name=cocokits] .cck-avatar__size--xs){height:var(--size-28);width:var(--size-28)}:where([data-cck-theme-name=cocokits] .cck-avatar__size--xs.cck-avatar--with-label){font:var(--text-xs-semibold)}:where([data-cck-theme-name=cocokits] .cck-avatar__size--sm){height:var(--size-32);width:var(--size-32)}:where([data-cck-theme-name=cocokits] .cck-avatar__size--sm.cck-avatar--with-label){font:var(--text-sm-semibold)}:where([data-cck-theme-name=cocokits] .cck-avatar__size--md){height:var(--size-40);width:var(--size-40)}:where([data-cck-theme-name=cocokits] .cck-avatar__size--md.cck-avatar--with-label){font:var(--text-md-semibold)}:where([data-cck-theme-name=cocokits] .cck-avatar__size--lg){height:var(--size-48);width:var(--size-48)}:where([data-cck-theme-name=cocokits] .cck-avatar__size--lg.cck-avatar--with-label){font:var(--text-lg-semibold)}:where([data-cck-theme-name=cocokits] .cck-avatar-group){display:flex}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-left){direction:rtl}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-left.cck-avatar-group__size--xs .cck-avatar):not(:last-of-type){margin-left:-10px}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-left.cck-avatar-group__size--sm .cck-avatar):not(:last-of-type){margin-left:-10px}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-left.cck-avatar-group__size--md .cck-avatar):not(:last-of-type){margin-left:-14px}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-left.cck-avatar-group__size--lg .cck-avatar):not(:last-of-type){margin-left:-16px}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-right.cck-avatar-group__size--xs .cck-avatar):not(:first-of-type){margin-left:-10px}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-right.cck-avatar-group__size--sm .cck-avatar):not(:first-of-type){margin-left:-10px}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-right.cck-avatar-group__size--md .cck-avatar):not(:first-of-type){margin-left:-14px}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-right.cck-avatar-group__size--lg .cck-avatar):not(:first-of-type){margin-left:-16px}:where([data-cck-theme-name=cocokits] .cck-avatar-group .cck-avatar){border:2px solid var(--color-border-light)}:where([data-cck-theme-name=cocokits] .cck-avatar-label){align-items:center;display:flex}:where([data-cck-theme-name=cocokits] .cck-avatar-label__title){color:var(--color-font-default)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__description){color:var(--color-font-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__label-wrapper){display:flex}:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-right){flex-direction:row-reverse}:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-right .cck-avatar-label__label-wrapper){text-align:right}:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-left){flex-direction:row}:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-top){flex-direction:column}:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-bottom){flex-direction:column-reverse}:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-bottom.cck-avatar-label--label-vertical .cck-avatar-label__label-wrapper),:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-top.cck-avatar-label--label-vertical .cck-avatar-label__label-wrapper){align-items:center}:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-left.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper),:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-right.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){align-items:center}:where([data-cck-theme-name=cocokits] .cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){align-items:center;flex-direction:row}:where([data-cck-theme-name=cocokits] .cck-avatar-label--label-vertical .cck-avatar-label__label-wrapper){flex-direction:column;justify-content:center}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--xs){gap:var(--size-12)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--xs .cck-avatar-label__label-wrapper){font:var(--text-xs-medium)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--xs.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){gap:var(--size-12)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--sm){gap:var(--size-12)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--sm .cck-avatar-label__label-wrapper){font:var(--text-sm-medium)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--sm.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){gap:var(--size-12)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--md){gap:var(--size-12)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--md .cck-avatar-label__label-wrapper){font:var(--text-md-medium)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--md.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){gap:var(--size-12)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--lg){gap:var(--size-20)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--lg .cck-avatar-label__label-wrapper){font:var(--text-md-medium)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--lg.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){gap:var(--size-20)}:where([data-cck-theme-name=cocokits] .cck-accordion){display:flex;flex-direction:column}:where([data-cck-theme-name=cocokits] .cck-accordion__default.cck-accordion__size--sm){gap:var(--size-12)}:where([data-cck-theme-name=cocokits] .cck-accordion__default.cck-accordion__size--md){gap:var(--size-20)}:where([data-cck-theme-name=cocokits] .cck-accordion__group){border:1px solid var(--color-border-default);border-radius:6px}:where([data-cck-theme-name=cocokits] .cck-accordion-header--trigger-icon>.cck-accordion-header__icon-btn):hover{background-color:var(--color-h-contrast-alpha-1)}:where([data-cck-theme-name=cocokits] .cck-accordion-header--trigger-header){cursor:pointer}:where([data-cck-theme-name=cocokits] .cck-accordion-header--trigger-header>.cck-accordion-header__icon-btn):hover{background-color:transparent}:where([data-cck-theme-name=cocokits] .cck-accordion-header){align-items:center;color:var(--color-font-default);display:flex}:where([data-cck-theme-name=cocokits] .cck-accordion-header .cck-svg-icon.cck-svg-icon--default-color){fill:var(--color-font-default)}:where([data-cck-theme-name=cocokits] .cck-accordion-header>.cck-accordion-header__icon-btn){background-color:transparent;fill:var(--color-font-default);align-items:center;border:none;border-radius:4px;cursor:pointer;display:flex;justify-self:center;outline:none}:where([data-cck-theme-name=cocokits] .cck-accordion-header--icon-right>.cck-accordion-header__icon-btn){margin-left:auto}:where([data-cck-theme-name=cocokits] .cck-accordion-header--icon-left){flex-direction:row-reverse;justify-content:flex-end}:where([data-cck-theme-name=cocokits] .cck-accordion__size--sm>.cck-accordion-panel>.cck-accordion-header){height:var(--size-48)}:where([data-cck-theme-name=cocokits] .cck-accordion__size--sm>.cck-accordion-panel>.cck-accordion-header>.cck-accordion-header__icon-btn){height:36px;width:36px}:where([data-cck-theme-name=cocokits] .cck-accordion__size--md>.cck-accordion-panel .cck-accordion-header){height:var(--size-56)}:where([data-cck-theme-name=cocokits] .cck-accordion__size--md>.cck-accordion-panel .cck-accordion-header>.cck-accordion-header__icon-btn){height:36px;width:36px}:where([data-cck-theme-name=cocokits] .cck-accordion-panel>.cck-accordion-header){font:var(--text-md-medium)}:where([data-cck-theme-name=cocokits] .cck-accordion-panel>.cck-accordion-header.cck-accordion-header--icon-right){padding-left:var(--size-20);padding-right:calc(var(--size-20) - 10px)}:where([data-cck-theme-name=cocokits] .cck-accordion-panel>.cck-accordion-header.cck-accordion-header--icon-left){padding-left:calc(var(--size-20) - 10px);padding-right:var(--size-20)}:where([data-cck-theme-name=cocokits] .cck-accordion__default>.cck-accordion-panel--collapsed>.cck-accordion-header),:where([data-cck-theme-name=cocokits] .cck-accordion__group>.cck-accordion-panel--collapsed>.cck-accordion-header){background-color:var(--color-h-contrast-alpha-2)}:where([data-cck-theme-name=cocokits] .cck-accordion__basic>.cck-accordion-panel>.cck-accordion-header--trigger-header):hover{background-color:var(--color-h-contrast-alpha-2)}:where([data-cck-theme-name=cocokits] .cck-accordion-panel--disabled){color:var(--color-disabled-font);opacity:.5}:where([data-cck-theme-name=cocokits] .cck-accordion-panel--disabled>.cck-accordion-header){color:currentcolor}:where([data-cck-theme-name=cocokits] .cck-accordion-panel--disabled>.cck-accordion-header.cck-accordion-header--trigger-header){cursor:not-allowed}:where([data-cck-theme-name=cocokits] .cck-accordion-panel--disabled>.cck-accordion-header>.cck-accordion-header__icon-btn){display:none}:where([data-cck-theme-name=cocokits] .cck-accordion-panel){color:var(--color-font-default);font:var(--text-md-regular);overflow:hidden;transition:padding-bottom .3s}:where([data-cck-theme-name=cocokits] .cck-accordion--instant-animation>.cck-accordion-panel){transition:none}:where([data-cck-theme-name=cocokits] .cck-accordion-panel--collapsed){padding-bottom:0}:where([data-cck-theme-name=cocokits] .cck-accordion__size--sm>.cck-accordion-panel.cck-accordion-panel--expanded){padding-bottom:var(--size-20)}:where([data-cck-theme-name=cocokits] .cck-accordion__size--sm>.cck-accordion-panel>.cck-accordion-panel__content-wrapper){padding-left:var(--size-20);padding-right:var(--size-20)}:where([data-cck-theme-name=cocokits] .cck-accordion__size--md>.cck-accordion-panel.cck-accordion-panel--expanded){padding-bottom:var(--size-20)}:where([data-cck-theme-name=cocokits] .cck-accordion__size--md>.cck-accordion-panel>.cck-accordion-panel__content-wrapper){padding-left:var(--size-20);padding-right:var(--size-20)}:where([data-cck-theme-name=cocokits] .cck-accordion__default>.cck-accordion-panel){border:1px solid var(--color-border-default);border-radius:6px}:where([data-cck-theme-name=cocokits] .cck-accordion__basic>.cck-accordion-panel):not(:last-of-type),:where([data-cck-theme-name=cocokits] .cck-accordion__group>.cck-accordion-panel):not(:last-of-type){border-bottom:1px solid var(--color-border-default)}:where([data-cck-theme-name=frames-x] .cck-button){align-items:center;border:none;border-radius:var(--radi-6);box-sizing:border-box;cursor:pointer;display:inline-flex;justify-content:center;margin:0;outline:transparent;transition:all .1s}:where([data-cck-theme-name=frames-x] .cck-button):focus-visible{box-shadow:0 0 0 3px var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-button .cck-svg-icon--default-color .cck-svg-icon__svg){fill:currentcolor}:where([data-cck-theme-name=frames-x] .cck-button__backdrop){display:none}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--brand){background-color:var(--state-brand-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--brand):hover{background-color:var(--state-brand-hover)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--brand):active{background-color:var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--brand):disabled{background-color:var(--base-fill-1);color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--highlight){background-color:var(--state-highlight-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--highlight):hover{background-color:var(--state-highlight-hover)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--highlight):active{background-color:var(--state-highlight-selected)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--highlight):disabled{background-color:var(--base-fill-1);color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--success){background-color:var(--state-success-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--success):hover{background-color:var(--state-success-hover)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--success):active{background-color:var(--state-success-selected)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--success):disabled{background-color:var(--base-fill-1);color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--danger){background-color:var(--state-danger-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--danger):hover{background-color:var(--state-danger-hover)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--danger):active{background-color:var(--state-danger-selected)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--danger):disabled{background-color:var(--base-fill-1);color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__secondary){background-color:var(--base-surface-2);border:1px solid var(--base-border);color:var(--text-dark-primary);outline:1px solid transparent}:where([data-cck-theme-name=frames-x] .cck-button__secondary):hover{background-color:var(--base-fill-2);border:1px solid var(--base-fill-2)}:where([data-cck-theme-name=frames-x] .cck-button__secondary):active{background-color:var(--base-fill-1);border:1px solid var(--base-border)}:where([data-cck-theme-name=frames-x] .cck-button__secondary):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__ghost){background-color:var(--base-surface-1);outline:1px solid transparent}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--brand){border:1px solid var(--state-brand-active);color:var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--brand):hover{border:1px solid var(--state-brand-hover);outline:1px solid var(--state-brand-hover)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--brand):active{border:1px solid var(--state-brand-selected);outline:1px solid var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--brand):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--highlight){border:1px solid var(--state-highlight-active);color:var(--state-highlight-active)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--highlight):hover{border:1px solid var(--state-highlight-hover);outline:1px solid var(--state-highlight-hover)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--highlight):active{border:1px solid var(--state-highlight-selected);outline:1px solid var(--state-highlight-selected)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--highlight):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--success){border:1px solid var(--state-success-active);color:var(--state-success-active)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--success):hover{border:1px solid var(--state-success-hover);outline:1px solid var(--state-success-hover)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--success):active{border:1px solid var(--state-success-selected);outline:1px solid var(--state-success-selected)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--success):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--danger){border:1px solid var(--state-danger-active);color:var(--state-danger-active)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--danger):hover{border:1px solid var(--state-danger-hover);outline:1px solid var(--state-danger-hover)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--danger):active{border:1px solid var(--state-danger-selected);outline:1px solid var(--state-danger-selected)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--danger):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__size--sm){font:var(--text-sm-font-semibold);gap:var(--spacing-3);height:36px;padding:var(--spacing-0) var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-button__size--md){font:var(--text-base-font-semibold);gap:var(--spacing-5);height:44px;padding:var(--spacing-0) var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-button__size--lg){font:var(--text-lg-font-semibold);gap:var(--spacing-7);height:44px;padding:var(--spacing-0) var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-button__size--xl){font:var(--text-xl-font-semibold);gap:var(--spacing-7);height:56px;padding:var(--spacing-0) var(--spacing-10)}:where([data-cck-theme-name=frames-x] .cck-checkbox){display:flex;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-checkbox__wrapper){align-items:center;display:inline-flex;vertical-align:middle}:where([data-cck-theme-name=frames-x] .cck-checkbox__input-wrapper){box-sizing:content-box;cursor:pointer;display:inline-block;flex-shrink:0;line-height:0;position:relative;white-space:nowrap}:where([data-cck-theme-name=frames-x] .cck-checkbox__input){cursor:inherit;height:100%;left:0;margin:0;opacity:0;padding:0;position:absolute;right:0;top:0;width:100%}:where([data-cck-theme-name=frames-x] .cck-checkbox__input:focus-visible~.cck-checkbox__background){border:2px solid var(--state-brand-selected);box-shadow:0 0 0 1px var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-checkbox__background){align-items:center;background-color:var(--base-fill-1);border:2px solid var(--base-border);border-radius:var(--radi-4);box-sizing:border-box;display:flex;height:100%;justify-content:center;pointer-events:none;position:absolute;transition:background-color 90ms cubic-bezier(.4,0,.6,1),border-color 90ms cubic-bezier(.4,0,.6,1);width:100%;will-change:background-color,outline-color}:where([data-cck-theme-name=frames-x] .cck-checkbox.cck-checkbox--disabled .cck-checkbox__background){background-color:var(--base-disabled);border:2px solid transparent}:where([data-cck-theme-name=frames-x] .cck-checkbox.cck-checkbox--disabled .cck-checkbox__label){color:var(--base-disabled)}:where([data-cck-theme-name=frames-x] .cck-checkbox.cck-checkbox--disabled *){cursor:default}:where([data-cck-theme-name=frames-x] .cck-checkbox--checked .cck-checkbox__background){background-color:var(--state-brand-active);border:2px solid var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-checkbox--checked .cck-checkbox__checkmark){opacity:1}:where([data-cck-theme-name=frames-x] .cck-checkbox--indeterminate .cck-checkbox__background){background-color:var(--state-brand-active);border:2px solid var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-checkbox--indeterminate .cck-checkbox__checkmark){opacity:0;transform:rotate(45deg);transition:opacity 90ms cubic-bezier(.4,0,.6,1),transform 90ms cubic-bezier(.4,0,.6,1)}:where([data-cck-theme-name=frames-x] .cck-checkbox--indeterminate .cck-checkbox__mixedmark){opacity:1;transform:scaleX(1) rotate(0deg)}:where([data-cck-theme-name=frames-x] .cck-checkbox__mixedmark){border:2px solid #fff;border-radius:100px;height:0;margin:2px;opacity:0;transform:scaleX(0) rotate(0deg);transition:opacity 90ms cubic-bezier(.4,0,.6,1),transform 90ms cubic-bezier(.4,0,.6,1);width:100%}:where([data-cck-theme-name=frames-x] .cck-checkbox__checkmark){color:#fff;inset:0;opacity:0;padding:2px;position:absolute;transition:opacity .18s cubic-bezier(.4,0,.6,1);width:100%}:where([data-cck-theme-name=frames-x] .cck-checkbox__checkmark-path){fill:currentcolor}:where([data-cck-theme-name=frames-x] .cck-checkbox__label){color:var(--text-dark-primary);cursor:pointer;margin-left:0;margin-right:auto;order:0;padding-left:0;padding-right:0;text-align:left;white-space:nowrap}:where([data-cck-theme-name=frames-x] .cck-checkbox__label):empty{display:none}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--sm .cck-checkbox__wrapper){gap:var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--sm .cck-checkbox__input-wrapper){height:22px;width:22px}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--sm .cck-checkbox__label){font:var(--text-sm-font-medium)}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--md .cck-checkbox__wrapper){gap:var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--md .cck-checkbox__input-wrapper){height:24px;width:24px}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--md .cck-checkbox__label){font:var(--text-base-font-medium)}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--lg .cck-checkbox__wrapper){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--lg .cck-checkbox__input-wrapper){height:32px;width:32px}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--lg .cck-checkbox__label){font:var(--text-lg-font-medium)}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--xl .cck-checkbox__wrapper){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--xl .cck-checkbox__input-wrapper){height:32px;width:32px}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--xl .cck-checkbox__label){font:var(--text-xl-font-medium)}:where([data-cck-theme-name=frames-x] .cck-chip){align-items:center;background-color:var(--base-surface-2);border:1px solid var(--base-border);border-radius:var(--radi-5);color:var(--text-dark-primary);cursor:default;display:flex;transition:all .1s}:where([data-cck-theme-name=frames-x] .cck-chip--disabled){background-color:var(--base-fill-1);border:1px solid transparent;color:var(--base-disabled);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-chip__content-wrapper){align-items:center;display:flex;justify-content:center}:where([data-cck-theme-name=frames-x] .cck-chip__remove-icon-wrapper){align-items:center;display:flex;flex-shrink:0;justify-content:center}:where([data-cck-theme-name=frames-x] .cck-chip__remove-icon-wrapper .cck-icon-button){background-color:transparent;border-radius:50%;color:var(--base-fill-4);height:24px;padding:0;width:24px}:where([data-cck-theme-name=frames-x] .cck-chip__remove-icon-wrapper .cck-icon-button):hover{background-color:var(--base-fill-1)}:where([data-cck-theme-name=frames-x] .cck-chip__remove-icon-wrapper .cck-icon-button .cck-svg-icon){height:100%;width:100%}:where([data-cck-theme-name=frames-x] .cck-chip__size--sm){font:var(--text-xs-font-medium);gap:var(--spacing-4);height:26px;padding:0 var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-chip__size--sm.cck-chip--removable){padding:0 var(--spacing-6) 0 var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-chip__size--md){font:var(--text-base-font-medium);gap:var(--spacing-4);height:34px;padding:0 var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-chip__size--md.cck-chip--removable){padding:0 var(--spacing-7) 0 var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-chip__size--lg){font:var(--text-lg-font-medium);gap:var(--spacing-6);height:44px;padding:0 var(--spacing-9)}:where([data-cck-theme-name=frames-x] .cck-chip__size--lg.cck-chip--removable){padding:0 var(--spacing-8) 0 var(--spacing-9)}:where([data-cck-theme-name=frames-x] .cck-chip-list){align-items:stretch;display:flex;flex-wrap:wrap;justify-content:flex-start}:where([data-cck-theme-name=frames-x] .cck-chip-list__input){background:transparent;border:none;color:var(--text-dark-primary);flex:1;font:var(--text-base-font-medium);outline:none}:where([data-cck-theme-name=frames-x] .cck-chip-list__input::-moz-placeholder){color:var(--text-dark-tertiary);-moz-transition:color .1s ease-in;transition:color .1s ease-in}:where([data-cck-theme-name=frames-x] .cck-chip-list__input::placeholder){color:var(--text-dark-tertiary);transition:color .1s ease-in}:where([data-cck-theme-name=frames-x] .cck-chip-list__input::-moz-placeholder):not(:focus){color:transparent}:where([data-cck-theme-name=frames-x] .cck-chip-list__input::placeholder):not(:focus){color:transparent}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--sm){gap:6px}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--sm .cck-chip-list__input){font:var(--text-xs-font-medium);height:26px;margin-left:var(--spacing-5)}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--sm .cck-chip-list__input):first-child{margin-left:calc(var(--spacing-6) - 4px)}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--md){gap:6px}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--md .cck-chip-list__input){font:var(--text-base-font-medium);height:34px;margin-left:var(--spacing-6)}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--md .cck-chip-list__input):first-child{margin-left:calc(var(--spacing-7) - 4px)}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--lg){gap:6px}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--lg .cck-chip-list__input){font:var(--text-lg-font-medium);height:44px;margin-left:var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--lg .cck-chip-list__input):first-child{margin-left:calc(var(--spacing-7) - 6px)}:where([data-cck-theme-name=frames-x] *){box-sizing:border-box}:where([data-cck-theme-name=frames-x] .cck-divider){background-color:var(--base-border);display:block;flex-shrink:0}:where([data-cck-theme-name=frames-x] .cck-divider__horizontal){margin:4px 0;width:100%}:where([data-cck-theme-name=frames-x] .cck-divider__horizontal.cck-divider__size--sm){height:1px}:where([data-cck-theme-name=frames-x] .cck-divider__horizontal.cck-divider__size--md){height:2px;width:100%}:where([data-cck-theme-name=frames-x] .cck-divider__vertical){height:100%;margin:0 4px}:where([data-cck-theme-name=frames-x] .cck-divider__vertical.cck-divider__size--sm){width:1px}:where([data-cck-theme-name=frames-x] .cck-divider__vertical.cck-divider__size--md){width:2px}:where([data-cck-theme-name=frames-x] .cck-error){color:var(--state-danger-active);display:flex;font:var(--text-sm-font-medium);gap:6px}:where([data-cck-theme-name=frames-x] .cck-error .cck-svg-icon--default-color .cck-svg-icon__svg){fill:currentcolor}:where([data-cck-theme-name=frames-x] .cck-form-field){align-items:flex-start;display:flex;flex-direction:column;gap:10px;min-width:100px}:where([data-cck-theme-name=frames-x] .cck-form-field .cck-select){flex:1;height:100%;width:100%}:where([data-cck-theme-name=frames-x] .cck-form-field .cck-input){flex:1;width:100%}:where([data-cck-theme-name=frames-x] .cck-form-field--error .cck-form-field__wrapper){border:1px solid var(--state-danger-active);outline:1px solid var(--state-danger-active)}:where([data-cck-theme-name=frames-x] .cck-form-field--focused .cck-form-field__wrapper){background-color:var(--base-surface-2);border:1px solid var(--state-brand-active);outline:1px solid var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-form-field--disabled .cck-form-field__wrapper){background-color:var(--base-fill-1);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-form-field__wrapper){align-items:stretch;background-color:var(--base-surface-1);border:1px solid var(--base-border);border-radius:var(--radi-6);display:flex;flex-direction:row;outline:1px solid transparent;overflow:hidden;width:100%}:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm.cck-form-field--with-input .cck-form-field__wrapper),:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm.cck-form-field--with-select .cck-form-field__wrapper){height:36px}:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm.cck-form-field--with-input .cck-form-field__input-wrapper),:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm.cck-form-field--with-select .cck-form-field__input-wrapper){padding:0 var(--spacing-6) 0 var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm .cck-form-field--with-textarea .cck-form-field__input-wrapper){padding:var(--spacing-6) var(--spacing-6) var(--spacing-6) var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm.cck-form-field--with-chip-list .cck-form-field__input-wrapper){padding:4px}:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm .cck-input),:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm .cck-leading),:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm .cck-select),:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm .cck-textarea),:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm .cck-trailing){font:var(--text-sm-font-medium)}:where([data-cck-theme-name=frames-x] .cck-form-field__size--md.cck-form-field--with-input .cck-form-field__wrapper),:where([data-cck-theme-name=frames-x] .cck-form-field__size--md.cck-form-field--with-select .cck-form-field__wrapper){height:44px}:where([data-cck-theme-name=frames-x] .cck-form-field__size--md.cck-form-field--with-input .cck-form-field__input-wrapper),:where([data-cck-theme-name=frames-x] .cck-form-field__size--md.cck-form-field--with-select .cck-form-field__input-wrapper){padding:0 var(--spacing-7) 0 var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-form-field__size--md .cck-form-field--with-textarea .cck-form-field__input-wrapper){padding:var(--spacing-7) var(--spacing-7) var(--spacing-7) var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-form-field__size--md.cck-form-field--with-chip-list .cck-form-field__input-wrapper){padding:4px}:where([data-cck-theme-name=frames-x] .cck-form-field__size--md .cck-input),:where([data-cck-theme-name=frames-x] .cck-form-field__size--md .cck-leading),:where([data-cck-theme-name=frames-x] .cck-form-field__size--md .cck-select),:where([data-cck-theme-name=frames-x] .cck-form-field__size--md .cck-textarea),:where([data-cck-theme-name=frames-x] .cck-form-field__size--md .cck-trailing){font:var(--text-base-font-medium)}:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg.cck-form-field--with-input .cck-form-field__wrapper),:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg.cck-form-field--with-select .cck-form-field__wrapper){height:56px}:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg.cck-form-field--with-input .cck-form-field__input-wrapper),:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg.cck-form-field--with-select .cck-form-field__input-wrapper){padding:0 var(--spacing-7) 0 var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg .cck-form-field--with-textarea .cck-form-field__input-wrapper){padding:var(--spacing-7) var(--spacing-7) var(--spacing-7) var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg.cck-form-field--with-chip-list .cck-form-field__input-wrapper){padding:6px}:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg .cck-input),:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg .cck-leading),:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg .cck-select),:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg .cck-textarea),:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg .cck-trailing){font:var(--text-lg-font-medium)}:where([data-cck-theme-name=frames-x] .cck-form-field__feedback-wrapper){display:flex;flex-direction:column;overflow:hidden}:where([data-cck-theme-name=frames-x] .cck-form-field__feedback-wrapper):empty{display:none}:where([data-cck-theme-name=frames-x] .cck-form-field__input-wrapper){align-items:center;display:flex;flex:1;flex-direction:row;gap:8px;min-width:0}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list .cck-chip-list){flex:1}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list .cck-form-field__wrapper){cursor:text}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list .cck-prefix),:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list .cck-suffix){align-self:flex-start}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list.cck-form-field__size--sm .cck-suffix){margin-right:4px;margin-top:6px}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list.cck-form-field__size--md .cck-suffix){margin-right:4px;margin-top:8px}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list.cck-form-field__size--lg .cck-suffix){margin-left:4px;margin-right:8px;margin-top:12px}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list.cck-form-field__size--sm .cck-prefix){margin-left:4px;margin-top:6px}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list.cck-form-field__size--md .cck-prefix){margin-left:4px;margin-top:8px}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list.cck-form-field__size--lg .cck-prefix){margin-left:8px;margin-right:4px;margin-top:12px}:where([data-cck-theme-name=frames-x] .cck-form-field--with-textarea .cck-form-field__input-wrapper){padding:10px 10px 10px 16px}:where([data-cck-theme-name=frames-x] .cck-form-field--with-textarea .cck-form-field__input-wrapper):hover:not(:has(textarea:focus-visible)){background-color:var(--base-fill-1)}:where([data-cck-theme-name=frames-x] .cck-form-field--with-input .cck-form-field__input-wrapper):hover:not(:has(input:focus-visible)),:where([data-cck-theme-name=frames-x] .cck-form-field--with-select .cck-form-field__input-wrapper):hover:not(:has(input:focus-visible)){background-color:var(--base-fill-1)}:where([data-cck-theme-name=frames-x] .cck-hint){color:var(--text-dark-secondary);display:flex;font:var(--text-sm-font-medium);gap:6px}:where([data-cck-theme-name=frames-x] .cck-hint .cck-svg-icon--default-color .cck-svg-icon__svg){fill:currentcolor}:where([data-cck-theme-name=frames-x] .cck-hint__color--default){color:var(--text-dark-secondary)}:where([data-cck-theme-name=frames-x] .cck-hint__color--success){color:var(--state-success-active)}:where([data-cck-theme-name=frames-x] .cck-svg-icon){align-items:center;display:flex;flex-shrink:0;justify-content:center}:where([data-cck-theme-name=frames-x] .cck-svg-icon__svg){height:100%;width:100%}:where([data-cck-theme-name=frames-x] .cck-svg-icon__size--xs){height:var(--icon-xs);width:var(--icon-xs)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__size--sm){height:var(--icon-sm);width:var(--icon-sm)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__size--md){height:var(--icon-md);width:var(--icon-md)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__size--lg){height:var(--icon-lg);width:var(--icon-lg)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__size--xl){height:var(--icon-xl);width:var(--icon-xl)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__size--2xl){height:var(--icon-2xl);width:var(--icon-2xl)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__size--3xl){height:var(--icon-3xl);width:var(--icon-3xl)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__size--4xl){height:var(--icon-4xl);width:var(--icon-4xl)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__color--grey){fill:var(--base-fill-4)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__color--brand){fill:var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__color--highlight){fill:var(--state-highlight-active)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__color--success){fill:var(--state-success-active)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__color--danger){fill:var(--state-danger-active)}:where([data-cck-theme-name=frames-x] .cck-icon-button){align-items:center;border:none;border-radius:var(--radi-6);box-sizing:border-box;cursor:pointer;display:inline-flex;justify-content:center;margin:0;outline:transparent;transition:all .1s}:where([data-cck-theme-name=frames-x] .cck-icon-button .cck-svg-icon--default-color){fill:currentcolor}:where([data-cck-theme-name=frames-x] .cck-icon-button):focus-visible{box-shadow:0 0 0 3px var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--brand){background-color:var(--state-brand-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--brand):hover{background-color:var(--state-brand-hover)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--brand):active{background-color:var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--brand):disabled{background-color:var(--base-fill-1);color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--highlight){background-color:var(--state-highlight-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--highlight):hover{background-color:var(--state-highlight-hover)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--highlight):active{background-color:var(--state-highlight-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--highlight):disabled{background-color:var(--base-fill-1);color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--success){background-color:var(--state-success-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--success):hover{background-color:var(--state-success-hover)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--success):active{background-color:var(--state-success-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--success):disabled{background-color:var(--base-fill-1);color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--danger){background-color:var(--state-danger-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--danger):hover{background-color:var(--state-danger-hover)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--danger):active{background-color:var(--state-danger-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--danger):disabled{background-color:var(--base-fill-1);color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__secondary){background-color:var(--base-surface-2);border:1px solid var(--base-border);color:var(--text-dark-primary);outline:1px solid transparent}:where([data-cck-theme-name=frames-x] .cck-icon-button__secondary):hover{background-color:var(--base-fill-2);border:1px solid var(--base-fill-2)}:where([data-cck-theme-name=frames-x] .cck-icon-button__secondary):active{background-color:var(--base-fill-1);border:1px solid var(--base-border)}:where([data-cck-theme-name=frames-x] .cck-icon-button__secondary):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost){background-color:var(--base-surface-1);outline:1px solid transparent}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--brand){border:1px solid var(--state-brand-active);color:var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--brand):hover{border:1px solid var(--state-brand-hover);outline:1px solid var(--state-brand-hover)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--brand):active{border:1px solid var(--state-brand-selected);outline:1px solid var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--brand):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--highlight){border:1px solid var(--state-highlight-active);color:var(--state-highlight-active)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--highlight):hover{border:1px solid var(--state-highlight-hover);outline:1px solid var(--state-highlight-hover)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--highlight):active{border:1px solid var(--state-highlight-selected);outline:1px solid var(--state-highlight-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--highlight):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--success){border:1px solid var(--state-success-active);color:var(--state-success-active)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--success):hover{border:1px solid var(--state-success-hover);outline:1px solid var(--state-success-hover)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--success):active{border:1px solid var(--state-success-selected);outline:1px solid var(--state-success-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--success):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--danger){border:1px solid var(--state-danger-active);color:var(--state-danger-active)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--danger):hover{border:1px solid var(--state-danger-hover);outline:1px solid var(--state-danger-hover)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--danger):active{border:1px solid var(--state-danger-selected);outline:1px solid var(--state-danger-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--danger):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__size--sm){height:36px;width:36px}:where([data-cck-theme-name=frames-x] .cck-icon-button__size--sm .cck-svg-icon--default-size){height:var(--icon-md);width:var(--icon-md)}:where([data-cck-theme-name=frames-x] .cck-icon-button__size--md){height:44px;width:44px}:where([data-cck-theme-name=frames-x] .cck-icon-button__size--md .cck-svg-icon--default-size){height:var(--icon-lg);width:var(--icon-lg)}:where([data-cck-theme-name=frames-x] .cck-icon-button__size--lg){height:44px;width:44px}:where([data-cck-theme-name=frames-x] .cck-icon-button__size--lg .cck-svg-icon--default-size){height:var(--icon-xl);width:var(--icon-xl)}:where([data-cck-theme-name=frames-x] .cck-icon-button__size--xl){height:56px;width:56px}:where([data-cck-theme-name=frames-x] .cck-icon-button__size--xl .cck-svg-icon--default-size){height:var(--icon-2xl);width:var(--icon-2xl)}:where([data-cck-theme-name=frames-x] .cck-input){background-color:transparent;border:none;color:var(--text-dark-primary);font:var(--text-base-font-medium);outline:none;text-overflow:ellipsis}:where([data-cck-theme-name=frames-x] .cck-input::-moz-placeholder){color:var(--text-dark-tertiary)}:where([data-cck-theme-name=frames-x] .cck-input::placeholder){color:var(--text-dark-tertiary)}:where([data-cck-theme-name=frames-x] .cck-input):disabled{color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-label){color:var(--text-dark-secondary);display:flex;font:var(--text-base-font-regular)}:where([data-cck-theme-name=frames-x] .cck-label__required-marker){margin-left:4px}:where([data-cck-theme-name=frames-x] .cck-leading){align-items:center;background-color:var(--base-surface-2);color:var(--text-dark-tertiary);cursor:default;display:flex;font:var(--text-base-font-medium);gap:var(--spacing-4);justify-content:center;padding:0 var(--spacing-7);-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-leading--clickable){cursor:pointer;transition:background-color .1s}:where([data-cck-theme-name=frames-x] .cck-leading--clickable):active{background-color:var(--base-fill-1)}:where([data-cck-theme-name=frames-x] .cck-leading--clickable):hover{background-color:var(--base-fill-2)}:where([data-cck-theme-name=frames-x] .cck-menu){background-color:var(--base-surface-1);border:1px solid var(--base-border);border-radius:var(--radi-6);box-shadow:0 8px 10px -6px rgba(13,16,23,.039),0 18px 22px -4px rgba(13,16,23,.078);display:flex;flex-direction:column;margin:4px 0;overflow:hidden;padding:0}:where([data-cck-theme-name=frames-x] .cck-menu__overlay .cck-overlay__backdrop){background-color:transparent}:where([data-cck-theme-name=frames-x] .cck-menu-item){align-items:center;color:var(--text-dark-secondary);display:flex;font:var(--text-base-font-medium);gap:var(--spacing-6);justify-content:flex-start;padding:var(--spacing-6) var(--spacing-5)}:where([data-cck-theme-name=frames-x] .cck-menu-item):not(.cck-menu-item--disabled){cursor:pointer}:where([data-cck-theme-name=frames-x] .cck-menu-item--disabled .cck-svg-icon.cck-svg-icon--default-color),:where([data-cck-theme-name=frames-x] .cck-menu-item--disabled){color:var(--base-disabled)}:where([data-cck-theme-name=frames-x] .cck-menu-item):not(.cck-menu-item--disabled):hover{background-color:var(--base-fill-1)}:where([data-cck-theme-name=frames-x] .cck-menu-item .cck-svg-icon.cck-svg-icon--default-size){height:var(--icon-lg);width:var(--icon-lg)}:where([data-cck-theme-name=frames-x] .cck-menu-item .cck-svg-icon.cck-svg-icon--default-color .cck-svg-icon__svg){fill:currentcolor}:where([data-cck-theme-name=frames-x] .cck-select__options-wrapper){background-color:var(--base-surface-1);border:1px solid var(--base-border);border-radius:var(--radi-6);height:inherit;margin-top:6px;max-height:inherit;overflow:auto}:where([data-cck-theme-name=frames-x] .cck-option__content-wrapper){flex:1}:where([data-cck-theme-name=frames-x] .cck-option){align-items:center;color:var(--text-dark-secondary);display:flex;font:var(--text-base-font-medium);gap:8px;padding:0 12px}:where([data-cck-theme-name=frames-x] .cck-option):not(.cck-option--disabled){cursor:pointer}:where([data-cck-theme-name=frames-x] .cck-option--disabled){color:var(--base-disabled);-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-option):not(.cck-option--disabled):hover{background-color:var(--base-fill-1)}:where([data-cck-theme-name=frames-x] .cck-option .cck-checkbox__input-wrapper){height:22px;width:22px}:where([data-cck-theme-name=frames-x] .cck-option--single.cck-option--selected){color:var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-option__size--sm){height:40px}:where([data-cck-theme-name=frames-x] .cck-option__size--md){height:48px}:where([data-cck-theme-name=frames-x] .cck-option__size--lg){height:56px}:where([data-cck-theme-name=frames-x] .cck-option__selected-checkmark .cck-svg-icon){height:var(--icon-md);width:var(--icon-md);fill:currentcolor}:where([data-cck-theme-name=frames-x] .cck-option-group){display:flex;flex-direction:column}:where([data-cck-theme-name=frames-x] .cck-option-group--label){align-items:center;color:var(--text-dark-primary);display:flex;font:var(--text-base-font-bold);padding:0 12px}:where([data-cck-theme-name=frames-x] .cck-option-group--disabled .cck-option-group--label){color:var(--base-disabled);-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-option-group .cck-option){padding:0 24px}:where([data-cck-theme-name=frames-x] .cck-option-group__size--sm .cck-option-group--label){height:40px}:where([data-cck-theme-name=frames-x] .cck-option-group__size--md .cck-option-group--label){height:48px}:where([data-cck-theme-name=frames-x] .cck-option-group__size--lg .cck-option-group--label){height:56px}:where([data-cck-theme-name=frames-x] .cck-prefix){flex-grow:0}:where([data-cck-theme-name=frames-x] .cck-prefix .cck-svg-icon.cck-svg-icon--default-size){height:var(--icon-md);width:var(--icon-md)}:where([data-cck-theme-name=frames-x] .cck-radio-button){color:var(--text-dark-primary);cursor:pointer}:where([data-cck-theme-name=frames-x] .cck-radio-button.cck-radio-button--disabled){color:var(--base-disabled);cursor:default;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-radio-button.cck-radio-button--disabled .cck-radio-button__input-wrapper){background-color:var(--base-disabled);border-color:transparent;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-radio-button.cck-radio-button--disabled .cck-radio-button__label){-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-radio-button:hover .cck-radio-button__input-wrapper){box-shadow:0 0 0 3px var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-radio-button__wrapper){align-items:center;display:inline-flex;vertical-align:middle}:where([data-cck-theme-name=frames-x] .cck-radio-button__input-wrapper){align-items:center;background-color:var(--base-fill-1);border:2px solid var(--base-border);border-radius:50%;display:flex;flex-shrink:0;justify-content:center;position:relative}:where([data-cck-theme-name=frames-x] .cck-radio-button__input){cursor:inherit;height:100%;left:0;margin:0;opacity:0;padding:0;position:absolute;right:0;top:0;width:100%;z-index:1}:where([data-cck-theme-name=frames-x] .cck-radio-button__background){background-color:var(--base-surface-1);border-radius:50%;opacity:0}:where([data-cck-theme-name=frames-x] .cck-radio-button__label){white-space:nowrap}:where([data-cck-theme-name=frames-x] .cck-radio-button--checked .cck-radio-button__input-wrapper){background-color:var(--state-brand-active);border-color:var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-radio-button--checked .cck-radio-button__background){opacity:1}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--sm){font:var(--text-sm-font-medium)}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--sm .cck-radio-button__wrapper){gap:var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--sm .cck-radio-button__input-wrapper){height:22px;width:22px}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--sm .cck-radio-button__background){height:12px;width:12px}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--md){font:var(--text-base-font-medium)}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--md .cck-radio-button__wrapper){gap:var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--md .cck-radio-button__input-wrapper){height:24px;width:24px}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--md .cck-radio-button__background){height:12px;width:12px}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--lg){font:var(--text-lg-font-medium)}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--lg .cck-radio-button__wrapper){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--lg .cck-radio-button__input-wrapper){height:32px;width:32px}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--lg .cck-radio-button__background){height:16px;width:16px}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--xl){font:var(--text-xl-font-medium)}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--xl .cck-radio-button__wrapper){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--xl .cck-radio-button__input-wrapper){height:32px;width:32px}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--xl .cck-radio-button__background){height:16px;width:16px}:where([data-cck-theme-name=frames-x] .cck-radio-group){align-items:flex-start;display:flex}:where([data-cck-theme-name=frames-x] .cck-radio-group__row){flex-direction:row;gap:24px}:where([data-cck-theme-name=frames-x] .cck-radio-group__column){flex-direction:column;gap:12px}:where([data-cck-theme-name=frames-x] .cck-select){align-items:center;border-radius:var(--radi-6);color:var(--text-dark-primary);cursor:pointer;display:flex;font:var(--text-base-font-medium)}:where([data-cck-theme-name=frames-x] .cck-select:hover .cck-svg-icon){fill:var(--base-fill-5)}:where([data-cck-theme-name=frames-x] .cck-select--disabled){color:var(--base-disabled);cursor:auto;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-select__placeholder){color:var(--text-dark-tertiary)}:where([data-cck-theme-name=frames-x] .cck-select__trigger-wrapper){color:currentcolor;flex:1;overflow:hidden;padding-right:8px;text-align:start}:where([data-cck-theme-name=frames-x] .cck-select__trigger-value){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:where([data-cck-theme-name=frames-x] .cck-select__overlay .cck-overlay__backdrop){background-color:transparent}:where([data-cck-theme-name=frames-x] .cck-select__dropdown-icon-wrapper){transition:transform .3s}:where([data-cck-theme-name=frames-x] .cck-select__dropdown-icon-wrapper .cck-svg-icon){height:var(--icon-lg);width:var(--icon-lg)}:where([data-cck-theme-name=frames-x] .cck-select--opened .cck-select__dropdown-icon-wrapper){transform:rotate(180deg)}:where([data-cck-theme-name=frames-x] .cck-suffix){flex-grow:0}:where([data-cck-theme-name=frames-x] .cck-suffix .cck-svg-icon.cck-svg-icon--default-size){height:var(--icon-md);width:var(--icon-md)}:where([data-cck-theme-name=frames-x] .cck-textarea){background-color:transparent;border:none;color:var(--text-dark-primary);font:var(--text-base-font-medium);min-height:24px;min-width:100%;outline:none;padding:0;scrollbar-color:var(--base-border) transparent}:where([data-cck-theme-name=frames-x] .cck-textarea::-moz-placeholder){color:var(--text-dark-tertiary)}:where([data-cck-theme-name=frames-x] .cck-textarea::placeholder){color:var(--text-dark-tertiary)}:where([data-cck-theme-name=frames-x] .cck-textarea::-webkit-resizer){background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" viewBox="0 0 9 9" fill="none"><path d="M4 4L7.2929 0.707105C7.92286 0.0771402 9 0.523309 9 1.41421V6C9 7.65685 7.65685 9 6 9H1.41421C0.523309 9 0.077142 7.92286 0.707107 7.29289L4 4Z" fill="%23A1A1AA"/></svg>');background-position:100% 100%;background-repeat:no-repeat;height:9px;width:9px}:where([data-cck-theme-name=frames-x] .cck-textarea):disabled{color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-toggle){cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-toggle__label){align-items:center;color:var(--text-dark-primary);cursor:pointer;display:flex;white-space:nowrap}:where([data-cck-theme-name=frames-x] .cck-toggle--label-before .cck-toggle__label){flex-direction:row-reverse}:where([data-cck-theme-name=frames-x] .cck-toggle__input){cursor:pointer;height:100%;margin:0;opacity:0;padding:0;position:relative;width:100%;z-index:3}:where([data-cck-theme-name=frames-x] .cck-toggle .cck-toggle__slider-wrapper){position:relative}:where([data-cck-theme-name=frames-x] .cck-toggle .cck-toggle__slider-wrapper):has(input:focus-visible){outline:2px solid var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-toggle__size--sm .cck-toggle__label){font:var(--text-sm-font-medium);gap:var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-toggle__size--md .cck-toggle__label){font:var(--text-base-font-medium);gap:var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-toggle__size--lg .cck-toggle__label){font:var(--text-lg-font-medium);gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-toggle__size--xl .cck-toggle__label){font:var(--text-xl-font-medium);gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob .cck-toggle__thumb){background-color:var(--base-surface-1);position:absolute;transition:all .3s ease;z-index:2}:where([data-cck-theme-name=frames-x] .cck-toggle__knob .cck-toggle__backdrop){height:100%;left:0;position:absolute;top:0;transition:background-color .3s ease;width:100%;z-index:1}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle--checked .cck-toggle__thumb){left:100%;top:50%;transform:translate(calc(-100% - var(--frames-x--toggle-margin)),-50%)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle--checked .cck-toggle__backdrop){background-color:var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle--unchecked .cck-toggle__thumb){left:0;top:50%;transform:translate(var(--frames-x--toggle-margin),-50%)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle--unchecked .cck-toggle__backdrop){background-color:var(--base-fill-2)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--sm){--frames-x--toggle-margin:2px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--sm .cck-toggle__slider-wrapper){height:19px;width:40px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--sm .cck-toggle__thumb){border-radius:var(--radi-2);height:15px;width:18px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--sm .cck-toggle__slider-wrapper){border-radius:var(--radi-3)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--sm .cck-toggle__backdrop){border-radius:var(--radi-3)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--md){--frames-x--toggle-margin:2px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--md .cck-toggle__slider-wrapper){height:24px;width:48px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--md .cck-toggle__thumb){border-radius:var(--radi-4);height:20px;width:22px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--md .cck-toggle__slider-wrapper){border-radius:var(--radi-5)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--md .cck-toggle__backdrop){border-radius:var(--radi-5)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--lg){--frames-x--toggle-margin:4px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--lg .cck-toggle__slider-wrapper){height:32px;width:56px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--lg .cck-toggle__thumb){border-radius:var(--radi-5);height:24px;width:26px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--lg .cck-toggle__slider-wrapper){border-radius:var(--radi-6)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--lg .cck-toggle__backdrop){border-radius:var(--radi-6)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--xl){--frames-x--toggle-margin:4px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--xl .cck-toggle__slider-wrapper){height:44px;width:80px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--xl .cck-toggle__thumb){border-radius:var(--radi-5);height:36px;width:36px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--xl .cck-toggle__slider-wrapper){border-radius:var(--radi-6)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--xl .cck-toggle__backdrop){border-radius:var(--radi-6)}:where([data-cck-theme-name=frames-x] .cck-toggle__switch .cck-toggle__thumb){background-color:var(--base-surface-1);box-shadow:0 1px 2px var(--colors-alpha-dark-50);position:absolute;transition:all .3s ease;z-index:2}:where([data-cck-theme-name=frames-x] .cck-toggle__switch .cck-toggle__backdrop){height:100%;left:0;position:absolute;top:50%;transform:translateY(-50%);transition:background-color .3s ease;width:100%;z-index:1}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle--checked .cck-toggle__thumb){left:100%;top:50%;transform:translate(-100%,-50%)}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle--checked .cck-toggle__backdrop){background-color:var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle--unchecked .cck-toggle__thumb){left:0;top:50%;transform:translateY(-50%)}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle--unchecked .cck-toggle__backdrop){background-color:var(--base-fill-2)}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--sm .cck-toggle__slider-wrapper){width:40px}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--sm .cck-toggle__thumb){border-radius:var(--radi-4);height:20px;width:20px}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--sm .cck-toggle__backdrop){border-radius:var(--radi-6);height:12px}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--md .cck-toggle__slider-wrapper){width:44px}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--md .cck-toggle__thumb){border-radius:var(--radi-5);height:24px;width:24px}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--md .cck-toggle__slider-wrapper){border-radius:var(--radi-5)}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--md .cck-toggle__backdrop){border-radius:var(--radi-6);height:16px}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--lg .cck-toggle__slider-wrapper){width:56px}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--lg .cck-toggle__thumb){border-radius:var(--radi-6);height:32px;width:32px}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--lg .cck-toggle__slider-wrapper){border-radius:var(--radi-6)}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--lg .cck-toggle__backdrop){border-radius:var(--radi-6);height:20px}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--xl .cck-toggle__slider-wrapper){width:80px}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--xl .cck-toggle__thumb){border-radius:var(--radi-6);height:40px;width:40px}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--xl .cck-toggle__slider-wrapper){border-radius:var(--radi-6)}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--xl .cck-toggle__backdrop){border-radius:var(--radi-6);height:32px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle--disabled),:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle--disabled){cursor:default;pointer-events:none}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle--disabled .cck-toggle__thumb),:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle--disabled .cck-toggle__thumb){background-color:var(--base-fill-3)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle--disabled .cck-toggle__backdrop),:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle--disabled .cck-toggle__backdrop){background-color:var(--base-fill-2)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle--disabled .cck-toggle__label),:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle--disabled .cck-toggle__label){color:var(--base-disabled)}:where([data-cck-theme-name=frames-x] .cck-trailing){align-items:center;background-color:var(--base-surface-2);color:var(--text-dark-tertiary);cursor:default;display:flex;font:var(--text-base-font-medium);gap:var(--spacing-4);justify-content:center;padding:0 var(--spacing-7);-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-trailing--clickable){cursor:pointer;transition:background-color .1s}:where([data-cck-theme-name=frames-x] .cck-trailing--clickable):active{background-color:var(--base-fill-1)}:where([data-cck-theme-name=frames-x] .cck-trailing--clickable):hover:not(:active){background-color:var(--base-fill-2)}:where([data-cck-theme-name=frames-x] .cck-avatar){align-items:center;border-radius:50%;display:flex;justify-content:center;overflow:hidden}:where([data-cck-theme-name=frames-x] .cck-avatar__fallback-image),:where([data-cck-theme-name=frames-x] .cck-avatar__image),:where([data-cck-theme-name=frames-x] .cck-avatar__placeholder-image){border-radius:inherit;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}:where([data-cck-theme-name=frames-x] .cck-avatar--with-label){background-color:var(--state-brand-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-avatar--clickable){cursor:pointer}:where([data-cck-theme-name=frames-x] .cck-avatar__size--xs){height:28px;width:28px}:where([data-cck-theme-name=frames-x] .cck-avatar__size--xs.cck-avatar--with-label){font:var(--text-xs-font-semibold)}:where([data-cck-theme-name=frames-x] .cck-avatar__size--sm){height:32px;width:32px}:where([data-cck-theme-name=frames-x] .cck-avatar__size--sm.cck-avatar--with-label){font:var(--text-xs-font-semibold)}:where([data-cck-theme-name=frames-x] .cck-avatar__size--md){height:40px;width:40px}:where([data-cck-theme-name=frames-x] .cck-avatar__size--md.cck-avatar--with-label){font:var(--text-sm-font-semibold)}:where([data-cck-theme-name=frames-x] .cck-avatar__size--lg){height:44px;width:44px}:where([data-cck-theme-name=frames-x] .cck-avatar__size--lg.cck-avatar--with-label){font:var(--text-lg-font-semibold)}:where([data-cck-theme-name=frames-x] .cck-avatar__size--xl){height:56px;width:56px}:where([data-cck-theme-name=frames-x] .cck-avatar__size--xl.cck-avatar--with-label){font:var(--text-xl-font-semibold)}:where([data-cck-theme-name=frames-x] .cck-avatar__size--2xl){height:72px;width:72px}:where([data-cck-theme-name=frames-x] .cck-avatar__size--2xl.cck-avatar--with-label){font:var(--text-2xl-font-semibold)}:where([data-cck-theme-name=frames-x] .cck-avatar-group){display:flex}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-left){direction:rtl}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-left.cck-avatar-group__size--xs .cck-avatar):not(:last-of-type){margin-left:-10px}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-left.cck-avatar-group__size--sm .cck-avatar):not(:last-of-type){margin-left:-10px}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-left.cck-avatar-group__size--md .cck-avatar):not(:last-of-type){margin-left:-14px}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-left.cck-avatar-group__size--lg .cck-avatar):not(:last-of-type){margin-left:-16px}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-left.cck-avatar-group__size--xl .cck-avatar):not(:last-of-type){margin-left:-16px}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-left.cck-avatar-group__size--2xl .cck-avatar):not(:last-of-type){margin-left:-18px}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-right.cck-avatar-group__size--xs .cck-avatar):not(:first-of-type){margin-left:-10px}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-right.cck-avatar-group__size--sm .cck-avatar):not(:first-of-type){margin-left:-10px}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-right.cck-avatar-group__size--md .cck-avatar):not(:first-of-type){margin-left:-14px}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-right.cck-avatar-group__size--lg .cck-avatar):not(:first-of-type){margin-left:-16px}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-right.cck-avatar-group__size--xl .cck-avatar):not(:first-of-type){margin-left:-16px}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-right.cck-avatar-group__size--2xl .cck-avatar):not(:first-of-type){margin-left:-18px}:where([data-cck-theme-name=frames-x] .cck-avatar-group .cck-avatar){border:2px solid var(--base-surface-1)}:where([data-cck-theme-name=frames-x] .cck-avatar-label){align-items:center;display:flex}:where([data-cck-theme-name=frames-x] .cck-avatar-label__title){color:var(--text-dark-primary)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__description){color:var(--text-dark-tertiary)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__label-wrapper){display:flex}:where([data-cck-theme-name=frames-x] .cck-avatar-label--avatar-right){flex-direction:row-reverse}:where([data-cck-theme-name=frames-x] .cck-avatar-label--avatar-right .cck-avatar-label__label-wrapper){text-align:right}:where([data-cck-theme-name=frames-x] .cck-avatar-label--avatar-left){flex-direction:row}:where([data-cck-theme-name=frames-x] .cck-avatar-label--avatar-top){flex-direction:column}:where([data-cck-theme-name=frames-x] .cck-avatar-label--avatar-bottom){flex-direction:column-reverse}:where([data-cck-theme-name=frames-x] .cck-avatar-label--avatar-bottom.cck-avatar-label--label-vertical .cck-avatar-label__label-wrapper),:where([data-cck-theme-name=frames-x] .cck-avatar-label--avatar-top.cck-avatar-label--label-vertical .cck-avatar-label__label-wrapper){align-items:center}:where([data-cck-theme-name=frames-x] .cck-avatar-label--avatar-left.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper),:where([data-cck-theme-name=frames-x] .cck-avatar-label--avatar-right.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){align-items:center}:where([data-cck-theme-name=frames-x] .cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){align-items:center;flex-direction:row}:where([data-cck-theme-name=frames-x] .cck-avatar-label--label-vertical .cck-avatar-label__label-wrapper){flex-direction:column;justify-content:center}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--xs){gap:var(--spacing-5)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--xs .cck-avatar-label__label-wrapper){font:var(--text-xs-font-medium);gap:2px}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--xs.cck-avatar-label--avatar-left.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper),:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--xs.cck-avatar-label--avatar-right.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){gap:var(--spacing-5)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--sm){gap:var(--spacing-5)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--sm .cck-avatar-label__label-wrapper){font:var(--text-xs-font-medium)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--sm.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){gap:var(--spacing-5)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--sm.cck-avatar-label--label-vertical .cck-avatar-label__label-wrapper){gap:4px}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--md){gap:var(--spacing-5)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--md .cck-avatar-label__label-wrapper){font:var(--text-sm-font-medium)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--md.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){gap:var(--spacing-5)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--md.cck-avatar-label--label-vertical .cck-avatar-label__label-wrapper){gap:2px}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--lg){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--lg .cck-avatar-label__label-wrapper){font:var(--text-base-font-medium)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--lg.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--lg.cck-avatar-label--label-vertical .cck-avatar-label__label-wrapper){gap:2px}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--xl){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--xl .cck-avatar-label__label-wrapper){font:var(--text-lg-font-medium)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--xl.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--xl.cck-avatar-label--label-vertical .cck-avatar-label__label-wrapper){gap:4px}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--2xl){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--2xl .cck-avatar-label__label-wrapper){font:var(--text-xl-font-medium)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--2xl.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--2xl.cck-avatar-label--label-vertical .cck-avatar-label__label-wrapper){gap:4px}:where([data-cck-theme-name=frames-x] .cck-accordion){display:flex;flex-direction:column}:where([data-cck-theme-name=frames-x] .cck-accordion__default.cck-accordion__size--sm){gap:var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-accordion__default.cck-accordion__size--md){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-accordion__underline.cck-accordion__size--sm){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-accordion__underline.cck-accordion__size--md){gap:var(--spacing-10)}:where([data-cck-theme-name=frames-x] .cck-accordion-header){align-items:center;color:var(--text-dark-primary);display:flex}:where([data-cck-theme-name=frames-x] .cck-accordion-header .cck-svg-icon.cck-svg-icon--default-color){fill:var(--text-dark-primary)}:where([data-cck-theme-name=frames-x] .cck-accordion-header--icon-left){flex-direction:row-reverse;justify-content:flex-end}:where([data-cck-theme-name=frames-x] .cck-accordion-header--icon-left>.cck-accordion-header__icon-btn){margin-right:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-accordion-header--icon-right>.cck-accordion-header__icon-btn){margin-left:auto}:where([data-cck-theme-name=frames-x] .cck-accordion-header .cck-accordion-header__icon-btn){background-color:transparent;border:none;border-radius:var(--radi-6);color:var(--base-fill-4);cursor:pointer;outline:none}:where([data-cck-theme-name=frames-x] .cck-accordion-header .cck-accordion-header__icon-btn):hover{border:none}:where([data-cck-theme-name=frames-x] .cck-accordion-header--trigger-icon .cck-accordion-header__icon-btn):hover{background-color:var(--base-fill-1)}:where([data-cck-theme-name=frames-x] .cck-accordion-header--trigger-header){cursor:pointer}:where([data-cck-theme-name=frames-x] .cck-accordion-header--trigger-header>.cck-accordion-header__icon-btn):hover{background-color:transparent}:where([data-cck-theme-name=frames-x] .cck-accordion-panel--disabled>.cck-accordion-header){color:var(--base-disabled)}:where([data-cck-theme-name=frames-x] .cck-accordion-panel--disabled>.cck-accordion-header--trigger-header){cursor:not-allowed}:where([data-cck-theme-name=frames-x] .cck-accordion-panel--disabled>.cck-accordion-header>.cck-accordion-header__icon-btn){display:none}:where([data-cck-theme-name=frames-x] .cck-accordion__size--sm .cck-accordion-header){font:var(--text-base-font-medium)}:where([data-cck-theme-name=frames-x] .cck-accordion__size--sm .cck-accordion-header>.cck-accordion-header__icon-btn){height:36px;width:36px}:where([data-cck-theme-name=frames-x] .cck-accordion__size--md .cck-accordion-header){font:var(--text-lg-font-medium)}:where([data-cck-theme-name=frames-x] .cck-accordion__size--md .cck-accordion-header>.cck-accordion-header__icon-btn){height:44px;width:44px}:where([data-cck-theme-name=frames-x] .cck-accordion__default>.cck-accordion-panel--collapsed>.cck-accordion-header){background-color:var(--base-surface-2)}:where([data-cck-theme-name=frames-x] .cck-accordion__default.cck-accordion__size--sm>.cck-accordion-panel>.cck-accordion-header){height:56px;padding:0 var(--spacing-7) 0 var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-accordion__default.cck-accordion__size--md>.cck-accordion-panel>.cck-accordion-header){height:72px;padding:0 var(--spacing-8) 0 var(--spacing-10)}:where([data-cck-theme-name=frames-x] .cck-accordion__underline.cck-accordion__size--sm>.cck-accordion-panel>.cck-accordion-header){height:40px}:where([data-cck-theme-name=frames-x] .cck-accordion__underline.cck-accordion__size--md>.cck-accordion-panel>.cck-accordion-header){height:52px}:where([data-cck-theme-name=frames-x] .cck-accordion-panel){overflow:hidden}:where([data-cck-theme-name=frames-x] .cck-accordion-panel__content-wrapper){color:var(--text-dark-secondary);font:var(--text-base-font-regular)}:where([data-cck-theme-name=frames-x] .cck-accordion-panel--collapsed){padding-bottom:0}:where([data-cck-theme-name=frames-x] .cck-accordion-panel){transition:padding-bottom .3s}:where([data-cck-theme-name=frames-x] .cck-accordion--instant-animation>.cck-accordion-panel){transition:none}:where([data-cck-theme-name=frames-x] .cck-accordion__size--sm .cck-accordion-panel--expanded){padding-bottom:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-accordion__size.md .cck-accordion-panel--expanded){padding-bottom:var(--spacing-10)}:where([data-cck-theme-name=frames-x] .cck-accordion__default>.cck-accordion-panel){background-color:var(--base-surface-1);border:1px solid var(--base-border);border-radius:var(--radi-6)}:where([data-cck-theme-name=frames-x] .cck-accordion__default.cck-accordion__size--sm>.cck-accordion-panel>.cck-accordion-panel__content-wrapper){padding-left:var(--spacing-8);padding-right:var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-accordion__default.cck-accordion__size--md>.cck-accordion-panel>.cck-accordion-panel__content-wrapper){padding-left:var(--spacing-10);padding-right:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-accordion__underline){padding-bottom:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-accordion__underline>.cck-accordion-panel){border-bottom:1px solid var(--base-border)}
\ No newline at end of file
+:where([data-cck-theme-name=cocokits] .cck-button){align-items:center;border:none;box-sizing:border-box;cursor:pointer;display:inline-flex;justify-content:center;margin:0;outline:transparent}:where([data-cck-theme-name=cocokits] .cck-button):disabled{background-color:var(--color-disabled-surface);fill:var(--color-disabled-font);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-button .cck-svg-icon--default-color .cck-svg-icon__svg){fill:currentcolor}:where([data-cck-theme-name=cocokits] .cck-button__backdrop){display:none}:where([data-cck-theme-name=cocokits] .cck-button__size--sm){gap:8px;height:var(--button-primary-height-sm);padding:0 16px}:where([data-cck-theme-name=cocokits] .cck-button__size--md){gap:8px;height:32px;padding:0 20px}:where([data-cck-theme-name=cocokits] .cck-button__size--lg){gap:10px;height:40px;padding:0 24px}:where([data-cck-theme-name=cocokits] .cck-button__basic){border-radius:4px}:where([data-cck-theme-name=cocokits] .cck-button__basic.cck-button__color--brand):not(:disabled){background-color:transparent;color:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-button__basic.cck-button__color--brand):focus-visible{box-shadow:0 0 0 3px var(--color-brand-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-button__basic.cck-button__color--info):not(:disabled){background-color:transparent;color:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-button__basic.cck-button__color--info):focus-visible{box-shadow:0 0 0 3px var(--color-info-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-button__basic.cck-button__color--warning):not(:disabled){background-color:transparent;color:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-button__basic.cck-button__color--warning):focus-visible{box-shadow:0 0 0 3px var(--color-warning-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-button__basic.cck-button__color--error):not(:disabled){background-color:transparent;color:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-button__basic.cck-button__color--error):focus-visible{box-shadow:0 0 0 3px var(--color-error-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-button__basic.cck-button__color--h-contrast):not(:disabled){background-color:transparent;color:var(--color-h-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-button__basic.cck-button__color--h-contrast):focus-visible{box-shadow:0 0 0 3px var(--color-h-contrast-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-button__light){border-radius:4px}:where([data-cck-theme-name=cocokits] .cck-button__light.cck-button__color--brand):not(:disabled){background-color:var(--color-brand-alpha-5);color:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-button__light.cck-button__color--brand):focus-visible{box-shadow:0 0 0 3px var(--color-brand-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-button__light.cck-button__color--info):not(:disabled){background-color:var(--color-info-alpha-5);color:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-button__light.cck-button__color--info):focus-visible{box-shadow:0 0 0 3px var(--color-info-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-button__light.cck-button__color--warning):not(:disabled){background-color:var(--color-warning-alpha-5);color:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-button__light.cck-button__color--warning):focus-visible{box-shadow:0 0 0 3px var(--color-warning-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-button__light.cck-button__color--error):not(:disabled){background-color:var(--color-error-alpha-5);color:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-button__light.cck-button__color--error):focus-visible{box-shadow:0 0 0 3px var(--color-error-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-button__light.cck-button__color--h-contrast):not(:disabled){background-color:var(--color-h-contrast-alpha-5);color:var(--color-h-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-button__light.cck-button__color--h-contrast):focus-visible{box-shadow:0 0 0 3px var(--color-h-contrast-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-button__outline){background-color:transparent;border-radius:4px}:where([data-cck-theme-name=cocokits] .cck-button__outline.cck-button__color--brand):not(:disabled){border:1px solid var(--color-brand-default);color:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-button__outline.cck-button__color--brand):focus-visible{box-shadow:0 0 0 3px var(--color-brand-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-button__outline.cck-button__color--info):not(:disabled){border:1px solid var(--color-info-default);color:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-button__outline.cck-button__color--info):focus-visible{box-shadow:0 0 0 3px var(--color-info-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-button__outline.cck-button__color--warning):not(:disabled){border:1px solid var(--color-warning-default);color:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-button__outline.cck-button__color--warning):focus-visible{box-shadow:0 0 0 3px var(--color-warning-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-button__outline.cck-button__color--error):not(:disabled){border:1px solid var(--color-error-default);color:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-button__outline.cck-button__color--error):focus-visible{box-shadow:0 0 0 3px var(--color-error-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-button__outline.cck-button__color--h-contrast):not(:disabled){border:1px solid var(--color-h-contrast-default);color:var(--color-h-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-button__outline.cck-button__color--h-contrast):focus-visible{box-shadow:0 0 0 3px var(--color-h-contrast-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-button__primary){border-radius:4px}:where([data-cck-theme-name=cocokits] .cck-button__primary.cck-button__color--brand):not(:disabled){background-color:var(--color-brand-default);color:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-button__primary.cck-button__color--brand):focus-visible{box-shadow:0 0 0 3px var(--color-brand-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-button__primary.cck-button__color--info):not(:disabled){background-color:var(--color-info-default);color:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-button__primary.cck-button__color--info):focus-visible{box-shadow:0 0 0 3px var(--color-info-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-button__primary.cck-button__color--warning):not(:disabled){background-color:var(--color-warning-default);color:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-button__primary.cck-button__color--warning):focus-visible{box-shadow:0 0 0 3px var(--color-warning-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-button__primary.cck-button__color--error):not(:disabled){background-color:var(--color-error-default);color:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-button__primary.cck-button__color--error):focus-visible{box-shadow:0 0 0 3px var(--color-error-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-button__primary.cck-button__color--h-contrast):not(:disabled){background-color:var(--color-h-contrast-default);color:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-button__primary.cck-button__color--h-contrast):focus-visible{box-shadow:0 0 0 3px var(--color-h-contrast-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-checkbox){display:flex}:where([data-cck-theme-name=cocokits] .cck-checkbox__wrapper){align-items:center;display:inline-flex;gap:12px;vertical-align:middle}:where([data-cck-theme-name=cocokits] .cck-checkbox__input-wrapper){box-sizing:content-box;cursor:pointer;display:inline-block;flex-shrink:0;line-height:0;position:relative;white-space:nowrap}:where([data-cck-theme-name=cocokits] .cck-checkbox__size--sm .cck-checkbox__input-wrapper){height:var(--checkbox-size-sm);width:var(--checkbox-size-sm)}:where([data-cck-theme-name=cocokits] .cck-checkbox__size--md .cck-checkbox__input-wrapper){height:var(--checkbox-size-md);width:var(--checkbox-size-md)}:where([data-cck-theme-name=cocokits] .cck-checkbox__size--lg .cck-checkbox__input-wrapper){height:var(--checkbox-size-lg);width:var(--checkbox-size-lg)}:where([data-cck-theme-name=cocokits] .cck-checkbox__input){cursor:inherit;height:100%;left:0;margin:0;opacity:0;padding:0;position:absolute;right:0;top:0;width:100%}:where([data-cck-theme-name=cocokits] .cck-checkbox__background){align-items:center;border:1px solid var(--color-m-contrast-default);border-radius:2px;box-sizing:border-box;display:flex;height:100%;justify-content:center;pointer-events:none;position:absolute;transition:background-color 90ms cubic-bezier(.4,0,.6,1),border-color 90ms cubic-bezier(.4,0,.6,1);width:100%;will-change:background-color,border-color}:where([data-cck-theme-name=cocokits] .cck-checkbox--checked.cck-checkbox--disabled .cck-checkbox__background),:where([data-cck-theme-name=cocokits] .cck-checkbox--disabled .cck-checkbox__background),:where([data-cck-theme-name=cocokits] .cck-checkbox--indeterminate.cck-checkbox--disabled .cck-checkbox__background),:where([data-cck-theme-name=cocokits] .cck-checkbox--unchecked.cck-checkbox--disabled .cck-checkbox__background){background-color:var(--color-disabled-surface);border-color:var(--color-disabled-border)}:where([data-cck-theme-name=cocokits] .cck-checkbox--checked.cck-checkbox__color--brand:not(.cck-checkbox--disabled) .cck-checkbox__background),:where([data-cck-theme-name=cocokits] .cck-checkbox--indeterminate.cck-checkbox__color--brand:not(.cck-checkbox--disabled) .cck-checkbox__background){background-color:var(--color-brand-default);border-color:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-checkbox--checked.cck-checkbox__color--info:not(.cck-checkbox--disabled) .cck-checkbox__background),:where([data-cck-theme-name=cocokits] .cck-checkbox--indeterminate.cck-checkbox__color--info:not(.cck-checkbox--disabled) .cck-checkbox__background){background-color:var(--color-info-default);border-color:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-checkbox--checked.cck-checkbox__color--warning:not(.cck-checkbox--disabled) .cck-checkbox__background),:where([data-cck-theme-name=cocokits] .cck-checkbox--indeterminate.cck-checkbox__color--warning:not(.cck-checkbox--disabled) .cck-checkbox__background){background-color:var(--color-warning-default);border-color:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-checkbox--checked.cck-checkbox__color--error:not(.cck-checkbox--disabled) .cck-checkbox__background),:where([data-cck-theme-name=cocokits] .cck-checkbox--indeterminate.cck-checkbox__color--error:not(.cck-checkbox--disabled) .cck-checkbox__background){background-color:var(--color-error-default);border-color:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-checkbox__color--brand .cck-checkbox__input:focus-visible~.cck-checkbox__background){box-shadow:0 0 0 3px var(--color-brand-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-checkbox__color--info .cck-checkbox__input:focus-visible~.cck-checkbox__background){box-shadow:0 0 0 3px var(--color-info-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-checkbox__color--warning .cck-checkbox__input:focus-visible~.cck-checkbox__background){box-shadow:0 0 0 3px var(--color-warning-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-checkbox__color--error .cck-checkbox__input:focus-visible~.cck-checkbox__background){box-shadow:0 0 0 3px var(--color-error-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-checkbox__checkmark-path){transition:stroke-dashoffset .18s cubic-bezier(.4,0,.6,1);stroke:currentcolor;stroke-width:3.12px;stroke-dashoffset:29.7833;stroke-dasharray:29.7833}:where([data-cck-theme-name=cocokits] .cck-checkbox--checked .cck-checkbox__checkmark-path){stroke-dashoffset:0}:where([data-cck-theme-name=cocokits] .cck-checkbox__checkmark){color:var(--checkbox-color-checkmark);inset:0;opacity:0;padding:2px;position:absolute;transition:opacity .18s cubic-bezier(.4,0,.6,1);width:100%}:where([data-cck-theme-name=cocokits] .cck-checkbox--checked .cck-checkbox__checkmark){opacity:1}:where([data-cck-theme-name=cocokits] .cck-checkbox--indeterminate .cck-checkbox__checkmark){opacity:0;transform:rotate(45deg);transition:opacity 90ms cubic-bezier(.4,0,.6,1),transform 90ms cubic-bezier(.4,0,.6,1)}:where([data-cck-theme-name=cocokits] .cck-checkbox--disabled .cck-checkbox__checkmark){color:var(--color-disabled-border)}:where([data-cck-theme-name=cocokits] .cck-checkbox__mixedmark){border-color:var(--checkbox-color-checkmark);border-style:solid;border-width:1px;height:0;margin:2px;opacity:0;transform:scaleX(0) rotate(0deg);transition:opacity 90ms cubic-bezier(.4,0,.6,1),transform 90ms cubic-bezier(.4,0,.6,1);width:100%}:where([data-cck-theme-name=cocokits] .cck-checkbox--indeterminate .cck-checkbox__mixedmark){opacity:1;transform:scaleX(1) rotate(0deg)}:where([data-cck-theme-name=cocokits] .cck-checkbox__label){color:var(--color-font-default);cursor:pointer;font:var(--text-sm-medium);margin-left:0;margin-right:auto;order:0;padding-left:0;padding-right:0;text-align:left;white-space:nowrap}:where([data-cck-theme-name=cocokits] .cck-checkbox__label):empty{display:none}:where([data-cck-theme-name=cocokits] .cck-checkbox--disabled .cck-checkbox__label){color:var(--color-disabled-font)}:where([data-cck-theme-name=cocokits] .cck-checkbox--disabled .cck-checkbox__input-wrapper),:where([data-cck-theme-name=cocokits] .cck-checkbox--disabled .cck-checkbox__label){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-chip){align-items:center;border:1px solid var(--chip-color-border);border-radius:6px;color:var(--color-font-default);cursor:default;display:flex;font:var(--text-sm-medium);gap:4px;padding:0 var(--chip-spacing-overlay-h-padding)}:where([data-cck-theme-name=cocokits] .cck-chip.cck-chip--disabled){border:1px solid var(--chip-color-border-disabled);color:var(--color-disabled-font);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-chip.cck-chip--removable){padding:0 2px 0 var(--chip-spacing-overlay-h-padding)}:where([data-cck-theme-name=cocokits] .cck-chip__size--sm){height:var(--chip-size-height-sm)}:where([data-cck-theme-name=cocokits] .cck-chip__size--md){height:var(--chip-size-height-md)}:where([data-cck-theme-name=cocokits] .cck-chip__size--lg){height:var(--chip-size-height-lg)}:where([data-cck-theme-name=cocokits] .cck-chip__content-wrapper){align-items:center;display:flex;justify-content:center}:where([data-cck-theme-name=cocokits] .cck-chip__remove-icon-wrapper .cck-icon-button){background-color:transparent;border-radius:50%;color:var(--color-font-alpha-7);height:24px;padding:4px;width:24px}:where([data-cck-theme-name=cocokits] .cck-chip__remove-icon-wrapper){align-items:center;display:flex;justify-content:center}:where([data-cck-theme-name=cocokits] .cck-chip__remove-icon-wrapper .cck-icon-button):hover{background-color:var(--color-h-contrast-alpha-2)}:where([data-cck-theme-name=cocokits] .cck-chip-list){align-items:stretch;display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-start}:where([data-cck-theme-name=cocokits] .cck-chip-list__input){background:transparent;border:none;flex:1;font:var(--text-sm-regular);outline:none}:where([data-cck-theme-name=cocokits] .cck-chip-list__input::-moz-placeholder){color:var(--color-font-alpha-6);-moz-transition:color .1s ease-in;transition:color .1s ease-in}:where([data-cck-theme-name=cocokits] .cck-chip-list__input::placeholder){color:var(--color-font-alpha-6);transition:color .1s ease-in}:where([data-cck-theme-name=cocokits] .cck-chip-list__input::-moz-placeholder):not(:focus){color:transparent}:where([data-cck-theme-name=cocokits] .cck-chip-list__input::placeholder):not(:focus){color:transparent}:where([data-cck-theme-name=cocokits] .cck-chip-list__size--sm .cck-chip-list__input){height:var(--chip-size-height-sm)}:where([data-cck-theme-name=cocokits] .cck-chip-list__size--md .cck-chip-list__input){height:var(--chip-size-height-md)}:where([data-cck-theme-name=cocokits] .cck-chip-list__size--lg .cck-chip-list__input){height:var(--chip-size-height-lg)}:where([data-cck-theme-name=cocokits] *){box-sizing:border-box}:where([data-cck-theme-name=cocokits] .cck-divider){display:block;flex-shrink:0}:where([data-cck-theme-name=cocokits] .cck-divider__horizontal){margin:var(--divider-spacing-margin) 0;width:100%}:where([data-cck-theme-name=cocokits] .cck-divider__horizontal.cck-divider__size--md){height:1px}:where([data-cck-theme-name=cocokits] .cck-divider__horizontal.cck-divider__size--lg){height:2px;width:100%}:where([data-cck-theme-name=cocokits] .cck-divider__vertical){height:100%;margin:0 var(--divider-spacing-margin)}:where([data-cck-theme-name=cocokits] .cck-divider__vertical.cck-divider__size--md){width:1px}:where([data-cck-theme-name=cocokits] .cck-divider__vertical.cck-divider__size--lg){width:2px}:where([data-cck-theme-name=cocokits] .cck-divider__color--light){background-color:var(--divider-color-light)}:where([data-cck-theme-name=cocokits] .cck-divider__color--default){background-color:var(--divider-color-default)}:where([data-cck-theme-name=cocokits] .cck-divider__color--dark){background-color:var(--divider-color-dark)}:where([data-cck-theme-name=cocokits] .cck-error){color:var(--color-error-default);display:flex;font:var(--text-sm-regular);gap:6px}:where([data-cck-theme-name=cocokits] .cck-error .cck-svg-icon--default-color .cck-svg-icon__svg){fill:currentcolor}:where([data-cck-theme-name=cocokits] .cck-form-field){align-items:flex-start;display:flex;flex-direction:column;gap:var(--form_field-spacing-host-gap);min-width:100px}:where([data-cck-theme-name=cocokits] .cck-form-field:not(:disabled) .cck-form-field__input-wrapper):hover{background-color:var(--color-surface-inverse-alpha-1)}:where([data-cck-theme-name=cocokits] .cck-form-field .cck-select){flex:1;height:100%;width:100%}:where([data-cck-theme-name=cocokits] .cck-form-field .cck-input){flex:1;width:100%}:where([data-cck-theme-name=cocokits] .cck-form-field--disabled){opacity:.5}:where([data-cck-theme-name=cocokits] .cck-form-field__wrapper){align-items:stretch;border-radius:var(--form_field-size-radius);display:flex;flex-direction:row;width:100%}:where([data-cck-theme-name=cocokits] .cck-form-field__wrapper):has(input:disabled){background-color:var(--color-surface-inverse-alpha-3)}:where([data-cck-theme-name=cocokits] .cck-form-field--with-input.cck-form-field__size--sm .cck-form-field__wrapper),:where([data-cck-theme-name=cocokits] .cck-form-field--with-select.cck-form-field__size--sm .cck-form-field__wrapper){height:var(--form_field-size-height-sm)}:where([data-cck-theme-name=cocokits] .cck-form-field--with-input.cck-form-field__size--md .cck-form-field__wrapper),:where([data-cck-theme-name=cocokits] .cck-form-field--with-select.cck-form-field__size--md .cck-form-field__wrapper){height:var(--form_field-size-height-md)}:where([data-cck-theme-name=cocokits] .cck-form-field--with-input.cck-form-field__size--lg .cck-form-field__wrapper),:where([data-cck-theme-name=cocokits] .cck-form-field--with-select.cck-form-field__size--lg .cck-form-field__wrapper){height:var(--form_field-size-height-lg)}:where([data-cck-theme-name=cocokits] .cck-form-field .cck-label){margin-left:var(--form_field-spacing-balance-alignment-margin)}:where([data-cck-theme-name=cocokits] .cck-form-field__feedback-wrapper){display:flex;flex-direction:column;margin-left:var(--form_field-spacing-balance-alignment-margin);overflow:hidden}:where([data-cck-theme-name=cocokits] .cck-form-field__feedback-wrapper):empty{display:none}:where([data-cck-theme-name=cocokits] .cck-form-field__wrapper>*):first-child{border-bottom-left-radius:var(--form_field-size-radius);border-top-left-radius:var(--form_field-size-radius)}:where([data-cck-theme-name=cocokits] .cck-form-field__wrapper>*):last-child{border-bottom-right-radius:var(--form_field-size-radius);border-top-right-radius:var(--form_field-size-radius)}:where([data-cck-theme-name=cocokits] .cck-form-field__input-wrapper){align-items:center;border:1px solid var(--form_field-color-border);display:flex;flex:1;flex-direction:row;gap:var(--form_field-spacing-input-wrapper-gap);min-width:0}:where([data-cck-theme-name=cocokits] .cck-form-field--with-input .cck-form-field__input-wrapper),:where([data-cck-theme-name=cocokits] .cck-form-field--with-select .cck-form-field__input-wrapper){padding:0 var(--form_field-spacing-input-wrapper-h-padding)}:where([data-cck-theme-name=cocokits] .cck-form-field--with-chip-list .cck-prefix),:where([data-cck-theme-name=cocokits] .cck-form-field--with-chip-list .cck-suffix){align-self:flex-start}:where([data-cck-theme-name=cocokits] .cck-form-field--with-chip-list .cck-chip-list){flex:1}:where([data-cck-theme-name=cocokits] .cck-form-field__size--sm.cck-form-field--with-chip-list .cck-suffix){margin-right:4px;margin-top:6px}:where([data-cck-theme-name=cocokits] .cck-form-field__size--md.cck-form-field--with-chip-list .cck-suffix){margin-right:4px;margin-top:8px}:where([data-cck-theme-name=cocokits] .cck-form-field__size--lg.cck-form-field--with-chip-list .cck-suffix){margin-left:4px;margin-right:8px;margin-top:12px}:where([data-cck-theme-name=cocokits] .cck-form-field__size--sm.cck-form-field--with-chip-list .cck-prefix){margin-left:4px;margin-top:6px}:where([data-cck-theme-name=cocokits] .cck-form-field__size--md.cck-form-field--with-chip-list .cck-prefix){margin-left:4px;margin-top:8px}:where([data-cck-theme-name=cocokits] .cck-form-field__size--lg.cck-form-field--with-chip-list .cck-prefix){margin-left:8px;margin-right:4px;margin-top:12px}:where([data-cck-theme-name=cocokits] .cck-form-field--with-chip-list .cck-form-field__input-wrapper){cursor:text;padding:4px}:where([data-cck-theme-name=cocokits] .cck-form-field--with-textarea .cck-form-field__input-wrapper){padding:8px}:where([data-cck-theme-name=cocokits] .cck-form-field--focused .cck-form-field__input-wrapper){border:1px solid var(--color-brand-default);box-shadow:inset 0 0 0 1px var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-form-field--error .cck-form-field__input-wrapper){border:1px solid var(--form_field-color-error)}:where([data-cck-theme-name=cocokits] .cck-form-field--focused.cck-form-field--error .cck-form-field__input-wrapper){box-shadow:inset 0 0 0 1px var(--form_field-color-error)}:where([data-cck-theme-name=cocokits] .cck-hint){color:var(--color-font-alpha-7);display:flex;font:var(--text-sm-regular);gap:6px}:where([data-cck-theme-name=cocokits] .cck-hint .cck-svg-icon--default-color .cck-svg-icon__svg){fill:currentcolor}:where([data-cck-theme-name=cocokits] .cck-svg-icon){align-items:center;display:flex;flex-shrink:0;justify-content:center}:where([data-cck-theme-name=cocokits] .cck-svg-icon__svg){height:100%;width:100%}:where([data-cck-theme-name=cocokits] .cck-svg-icon__size--xs){height:var(--icon-size-xs);width:var(--icon-size-xs)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__size--sm){height:var(--icon-size-sm);width:var(--icon-size-sm)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__size--md){height:var(--icon-size-md);width:var(--icon-size-md)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__size--lg){height:var(--icon-size-lg);width:var(--icon-size-lg)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__size--xl){height:var(--icon-size-xl);width:var(--icon-size-xl)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__size--2xl){height:var(--icon-size-2xl);width:var(--icon-size-2xl)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__color--brand){fill:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__color--info){fill:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__color--warning){fill:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__color--error){fill:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__color--h-contrast){fill:var(--color-h-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__color--m-contrast){fill:var(--color-m-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button){align-items:center;border:none;box-sizing:border-box;cursor:pointer;display:inline-flex;flex-shrink:0;justify-content:center;margin:0;outline:transparent}:where([data-cck-theme-name=cocokits] .cck-icon-button):disabled{background-color:var(--color-disabled-surface);fill:var(--color-disabled-font);cursor:default}:where([data-cck-theme-name=cocokits] .cck-icon-button .cck-svg-icon){height:100%;width:100%}:where([data-cck-theme-name=cocokits] .cck-icon-button .cck-svg-icon__svg){fill:inherit}:where([data-cck-theme-name=cocokits] .cck-icon-button__rounded--false){border-radius:4px}:where([data-cck-theme-name=cocokits] .cck-icon-button__rounded--true){border-radius:50%}:where([data-cck-theme-name=cocokits] .cck-icon-button__size--sm){height:28px;padding:6px;width:28px}:where([data-cck-theme-name=cocokits] .cck-icon-button__size--md){height:32px;padding:6px;width:32px}:where([data-cck-theme-name=cocokits] .cck-icon-button__size--lg){height:40px;padding:8px;width:40px}:where([data-cck-theme-name=cocokits] .cck-icon-button__basic.cck-icon-button__color--brand):not(:disabled){background-color:transparent;fill:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__basic.cck-icon-button__color--brand):focus-visible{box-shadow:0 0 0 3px var(--color-brand-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-icon-button__basic.cck-icon-button__color--info):not(:disabled){background-color:transparent;fill:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__basic.cck-icon-button__color--info):focus-visible{box-shadow:0 0 0 3px var(--color-info-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-icon-button__basic.cck-icon-button__color--warning):not(:disabled){background-color:transparent;fill:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__basic.cck-icon-button__color--warning):focus-visible{box-shadow:0 0 0 3px var(--color-warning-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-icon-button__basic.cck-icon-button__color--error):not(:disabled){background-color:transparent;fill:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__basic.cck-icon-button__color--error):focus-visible{box-shadow:0 0 0 3px var(--color-error-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-icon-button__basic.cck-icon-button__color--h-contrast):not(:disabled){background-color:transparent;fill:var(--color-h-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__basic.cck-icon-button__color--h-contrast):focus-visible{box-shadow:0 0 0 3px var(--color-h-contrast-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-icon-button__light.cck-icon-button__color--brand):not(:disabled){background-color:var(--color-brand-alpha-5);fill:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__light.cck-icon-button__color--brand):focus-visible{box-shadow:0 0 0 3px var(--color-brand-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-icon-button__light.cck-icon-button__color--info):not(:disabled){background-color:var(--color-info-alpha-5);fill:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__light.cck-icon-button__color--info):focus-visible{box-shadow:0 0 0 3px var(--color-info-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-icon-button__light.cck-icon-button__color--warning):not(:disabled){background-color:var(--color-warning-alpha-5);fill:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__light.cck-icon-button__color--warning):focus-visible{box-shadow:0 0 0 3px var(--color-warning-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-icon-button__light.cck-icon-button__color--error):not(:disabled){background-color:var(--color-error-alpha-5);fill:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__light.cck-icon-button__color--error):focus-visible{box-shadow:0 0 0 3px var(--color-error-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-icon-button__light.cck-icon-button__color--h-contrast):not(:disabled){background-color:var(--color-h-contrast-alpha-5);fill:var(--color-h-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__light.cck-icon-button__color--h-contrast):focus-visible{box-shadow:0 0 0 3px var(--color-h-contrast-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline){background-color:transparent}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline.cck-icon-button__color--brand):not(:disabled){border:1px solid var(--color-brand-default);fill:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline.cck-icon-button__color--brand):focus-visible{box-shadow:0 0 0 3px var(--color-brand-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline.cck-icon-button__color--info):not(:disabled){border:1px solid var(--color-info-default);fill:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline.cck-icon-button__color--info):focus-visible{box-shadow:0 0 0 3px var(--color-info-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline.cck-icon-button__color--warning):not(:disabled){border:1px solid var(--color-warning-default);fill:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline.cck-icon-button__color--warning):focus-visible{box-shadow:0 0 0 3px var(--color-warning-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline.cck-icon-button__color--error):not(:disabled){border:1px solid var(--color-error-default);fill:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline.cck-icon-button__color--error):focus-visible{box-shadow:0 0 0 3px var(--color-error-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline.cck-icon-button__color--h-contrast):not(:disabled){border:1px solid var(--color-h-contrast-default);fill:var(--color-h-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline.cck-icon-button__color--h-contrast):focus-visible{box-shadow:0 0 0 3px var(--color-h-contrast-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-icon-button__primary.cck-icon-button__color--brand):not(:disabled){background-color:var(--color-brand-default);fill:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__primary.cck-icon-button__color--brand):focus-visible{box-shadow:0 0 0 3px var(--color-brand-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-icon-button__primary.cck-icon-button__color--info):not(:disabled){background-color:var(--color-info-default);fill:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__primary.cck-icon-button__color--info):focus-visible{box-shadow:0 0 0 3px var(--color-info-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-icon-button__primary.cck-icon-button__color--warning):not(:disabled){background-color:var(--color-warning-default);fill:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__primary.cck-icon-button__color--warning):focus-visible{box-shadow:0 0 0 3px var(--color-warning-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-icon-button__primary.cck-icon-button__color--error):not(:disabled){background-color:var(--color-error-default);fill:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__primary.cck-icon-button__color--error):focus-visible{box-shadow:0 0 0 3px var(--color-error-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-icon-button__primary.cck-icon-button__color--h-contrast):not(:disabled){background-color:var(--color-h-contrast-default);fill:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__primary.cck-icon-button__color--h-contrast):focus-visible{box-shadow:0 0 0 3px var(--color-h-contrast-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-input){background-color:transparent;border:none;color:var(--color-font-default);font:var(--text-md-regular);outline:none;text-overflow:ellipsis}:where([data-cck-theme-name=cocokits] .cck-input::-moz-placeholder){color:var(--color-font-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-input::placeholder){color:var(--color-font-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-input::-moz-placeholder):disabled{color:var(--color-font-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-input::placeholder):disabled{color:var(--color-font-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-input):disabled{color:var(--color-font-alpha-6);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-label){display:flex}:where([data-cck-theme-name=cocokits] .cck-label__label-tag){color:var(--color-font-default);font:var(--text-sm-medium)}:where([data-cck-theme-name=cocokits] .cck-label__required-marker){color:var(--color-brand-default);font:var(--text-sm-medium);margin-left:var(--label-spacing-required-marker-padding-left)}:where([data-cck-theme-name=cocokits] .cck-leading){align-items:center;border:1px solid var(--form_field-color-border);border-right:none;color:var(--color-font-alpha-7);display:flex;flex-grow:0;justify-content:center;padding:0 var(--form_field-spacing-input-wrapper-h-padding);-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-leading .cck-select){color:currentcolor;font:inherit}:where([data-cck-theme-name=cocokits] .cck-leading__regular){font:var(--text-sm-regular)}:where([data-cck-theme-name=cocokits] .cck-leading__medium){font:var(--text-sm-medium)}:where([data-cck-theme-name=cocokits] .cck-leading--clickable){cursor:pointer;transition:background-color .1s}:where([data-cck-theme-name=cocokits] .cck-leading .cck-svg-icon.cck-svg-icon--default-size){height:var(--icon-size-xs);width:var(--icon-size-xs)}:where([data-cck-theme-name=cocokits] .cck-leading__color--transparent){background-color:transparent}:where([data-cck-theme-name=cocokits] .cck-leading__color--transparent.cck-leading--clickable):active{background-color:var(--color-surface-inverse-alpha-4)}:where([data-cck-theme-name=cocokits] .cck-leading__color--transparent.cck-leading--clickable):hover:not(:active){background-color:var(--color-surface-inverse-alpha-1)}:where([data-cck-theme-name=cocokits] .cck-leading__color--grey){background-color:var(--color-surface-inverse-alpha-1)}:where([data-cck-theme-name=cocokits] .cck-leading__color--grey.cck-leading--clickable):active{background-color:var(--color-surface-inverse-alpha-4)}:where([data-cck-theme-name=cocokits] .cck-leading__color--grey.cck-leading--clickable):hover:not(:active){background-color:var(--color-surface-inverse-alpha-3)}:where([data-cck-theme-name=cocokits] .cck-leading .cck-svg-icon.cck-svg-icon--default-color .cck-svg-icon__svg){fill:var(--form_field-color-icon)}:where([data-cck-theme-name=cocokits] .cck-menu){background-color:var(--color-surface-default);border:1px solid var(--menu-color-border);border-radius:var(--menu-size-radius);box-shadow:0 8px 10px -6px rgba(13,16,23,.039),0 18px 22px -4px rgba(13,16,23,.078);display:flex;flex-direction:column;margin:4px 0;padding:var(--menu-spacing-v-padding) var(--menu-spacing-h-padding)}:where([data-cck-theme-name=cocokits] .cck-menu__overlay .cck-overlay__backdrop){background-color:transparent}:where([data-cck-theme-name=cocokits] .cck-menu-item){align-items:center;border-radius:6px;display:flex;font:var(--text-sm-regular);gap:var(--menu_item-spacing-gap);justify-content:flex-start;margin:0 4px;padding:var(--menu_item-spacing-v-padding) var(--menu_item-spacing-h-padding)}:where([data-cck-theme-name=cocokits] .cck-menu-item):not(.cck-menu-item--disabled){cursor:pointer}:where([data-cck-theme-name=cocokits] .cck-menu-item--disabled){opacity:.6}:where([data-cck-theme-name=cocokits] .cck-menu-item--disabled .cck-svg-icon.cck-svg-icon--default-color),:where([data-cck-theme-name=cocokits] .cck-menu-item--disabled){color:var(--color-disabled-font)}:where([data-cck-theme-name=cocokits] .cck-menu-item):not(.cck-menu-item--disabled):hover{background-color:var(--color-surface-inverse-alpha-1)}:where([data-cck-theme-name=cocokits] .cck-menu-item__color--default):not(.cck-menu-item--disabled),:where([data-cck-theme-name=cocokits] .cck-menu-item__color--default:not(.cck-menu-item--disabled) .cck-svg-icon.cck-svg-icon--default-color){color:var(--color-font-default)}:where([data-cck-theme-name=cocokits] .cck-menu-item__color--error):not(.cck-menu-item--disabled),:where([data-cck-theme-name=cocokits] .cck-menu-item__color--error:not(.cck-menu-item--disabled) .cck-svg-icon.cck-svg-icon--default-color){color:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-menu-item__size--sm){height:var(--menu_item-size-height-sm)}:where([data-cck-theme-name=cocokits] .cck-menu-item__size--md){height:var(--menu_item-size-height-md)}:where([data-cck-theme-name=cocokits] .cck-menu-item__size--lg){height:var(--menu_item-size-height-lg)}:where([data-cck-theme-name=cocokits] .cck-menu-item .cck-svg-icon.cck-svg-icon--default-size){height:var(--icon-size-xs);width:var(--icon-size-xs)}:where([data-cck-theme-name=cocokits] .cck-menu-item .cck-svg-icon.cck-svg-icon--default-color .cck-svg-icon__svg){fill:currentcolor}:where([data-cck-theme-name=cocokits] .cck-option){align-items:center;border-radius:6px;color:var(--color-font-default);display:flex;font:var(--text-sm-regular);gap:var(--option-spacing-item-gap);margin:0 4px;padding:0 var(--option-spacing-item-h-padding)}:where([data-cck-theme-name=cocokits] .cck-option):not(.cck-option--disabled){cursor:pointer}:where([data-cck-theme-name=cocokits] .cck-option--disabled){color:var(--color-disabled-font);opacity:.7;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-option):not(.cck-option--disabled):hover{background-color:var(--option-color-item-hover)}:where([data-cck-theme-name=cocokits] .cck-option .cck-checkbox__input-wrapper){height:var(--checkbox-size-sm);width:var(--checkbox-size-sm)}:where([data-cck-theme-name=cocokits] .cck-option--single.cck-option--selected){font:var(--text-sm-medium)}:where([data-cck-theme-name=cocokits] .cck-option__size--sm){height:var(--option-size-height-sm)}:where([data-cck-theme-name=cocokits] .cck-option__size--md){height:var(--option-size-height-md)}:where([data-cck-theme-name=cocokits] .cck-option__size--lg){height:var(--option-size-height-lg)}:where([data-cck-theme-name=cocokits] .cck-select__options-wrapper){background-color:var(--option-color-overlay-bg);border:1px solid var(--option-color-overlay-border);border-radius:var(--option-size-overlay-radius);height:inherit;margin-top:var(--option-spacing-overlay-margin-top);max-height:inherit;overflow:auto;padding:var(--option-spacing-overlay-h-padding) var(--option-spacing-overlay-v-padding)}:where([data-cck-theme-name=cocokits] .cck-option__content-wrapper){flex:1}:where([data-cck-theme-name=cocokits] .cck-option__selected-checkmark .cck-svg-icon){height:var(--icon-size-sm);width:var(--icon-size-sm)}:where([data-cck-theme-name=cocokits] .cck-option-group){display:flex;flex-direction:column}:where([data-cck-theme-name=cocokits] .cck-option-group--label){align-items:center;color:var(--color-font-default);display:flex;font:var(--text-sm-medium);padding:0 var(--option-spacing-item-h-padding)}:where([data-cck-theme-name=cocokits] .cck-option-group--disabled .cck-option-group--label){color:var(--color-disabled-font);-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-option-group .cck-option){padding:0 calc(var(--option-spacing-item-h-padding)*2)}:where([data-cck-theme-name=cocokits] .cck-option-group__size--sm .cck-option-group--label){height:var(--option-size-height-sm)}:where([data-cck-theme-name=cocokits] .cck-option-group__size--md .cck-option-group--label){height:var(--option-size-height-md)}:where([data-cck-theme-name=cocokits] .cck-option-group__size--lg .cck-option-group--label){height:var(--option-size-height-lg)}:where([data-cck-theme-name=cocokits] .cck-prefix){flex-grow:0}:where([data-cck-theme-name=cocokits] .cck-prefix .cck-svg-icon.cck-svg-icon--default-size){height:var(--icon-size-xs);width:var(--icon-size-xs)}:where([data-cck-theme-name=cocokits] .cck-prefix .cck-svg-icon.cck-svg-icon--default-color .cck-svg-icon__svg){fill:var(--form_field-color-icon)}:where([data-cck-theme-name=cocokits] .cck-radio-button__wrapper){align-items:center;display:inline-flex;vertical-align:middle}:where([data-cck-theme-name=cocokits] .cck-radio-button__input-wrapper){box-sizing:content-box;cursor:pointer;display:inline-block;flex:0 0 auto;position:relative;will-change:opacity,transform,border-color,color}:where([data-cck-theme-name=cocokits] .cck-radio-button__size--sm .cck-radio-button__input-wrapper){height:var(--radio-size-sm);padding:var(--radio-spacing-padding-input-sm);width:var(--radio-size-sm)}:where([data-cck-theme-name=cocokits] .cck-radio-button__size--md .cck-radio-button__input-wrapper){height:var(--radio-size-md);padding:var(--radio-spacing-padding-input-md);width:var(--radio-size-md)}:where([data-cck-theme-name=cocokits] .cck-radio-button__size--lg .cck-radio-button__input-wrapper){height:var(--radio-size-lg);padding:var(--radio-spacing-padding-input-lg);width:var(--radio-size-lg)}:where([data-cck-theme-name=cocokits] .cck-radio-button__input){cursor:inherit;height:100%;left:0;margin:0;opacity:0;padding:0;position:absolute;right:0;top:0;width:100%;z-index:1}:where([data-cck-theme-name=cocokits] .cck-radio-button__background){box-sizing:border-box;display:inline-block;height:100%;position:relative;width:100%}:where([data-cck-theme-name=cocokits] .cck-radio-button__background--outer-circle){border-color:var(--color-m-contrast-default);border-radius:50%;border-style:solid;border-width:1px;box-sizing:border-box;height:100%;left:0;position:absolute;top:0;transition:border-color 90ms cubic-bezier(0,0,.2,1);width:100%}:where([data-cck-theme-name=cocokits] .cck-radio-button--checked .cck-radio-button__background--outer-circle){border-width:2px}:where([data-cck-theme-name=cocokits] .cck-radio-button--disabled.cck-radio-button--unchecked .cck-radio-button__background--outer-circle){background-color:var(--color-disabled-surface);border-color:var(--color-disabled-border)}:where([data-cck-theme-name=cocokits] .cck-radio-button--disabled.cck-radio-button--checked .cck-radio-button__background--outer-circle){border-color:var(--color-disabled-border)}:where([data-cck-theme-name=cocokits] .cck-radio-button__color--brand.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--outer-circle){border-color:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-radio-button__color--info.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--outer-circle){border-color:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-radio-button__color--warning.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--outer-circle){border-color:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-radio-button__color--error.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--outer-circle){border-color:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-radio-button__background--inner-circle){border-radius:50%;box-sizing:border-box;height:100%;left:0;position:absolute;top:0;transform:scale(0);transition:transform 90ms cubic-bezier(.4,0,.6,1),background-color 90ms cubic-bezier(.4,0,.6,1);width:100%}:where([data-cck-theme-name=cocokits] .cck-radio-button--checked .cck-radio-button__background--inner-circle){transform:scale(.5);transition:transform 90ms cubic-bezier(0,0,.2,1),border-color 90ms cubic-bezier(0,0,.2,1)}:where([data-cck-theme-name=cocokits] .cck-radio-button--disabled.cck-radio-button--checked .cck-radio-button__background--inner-circle){background-color:var(--color-disabled-border)}:where([data-cck-theme-name=cocokits] .cck-radio-button__color--brand.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--inner-circle){background-color:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-radio-button__color--info.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--inner-circle){background-color:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-radio-button__color--warning.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--inner-circle){background-color:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-radio-button__color--error.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--inner-circle){background-color:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-radio-button__label){color:var(--color-font-default);cursor:pointer;font:var(--text-sm-regular);margin-left:0;margin-right:auto;order:0;padding-left:4px;padding-right:0;white-space:nowrap}:where([data-cck-theme-name=cocokits] .cck-radio-button--disabled .cck-radio-button__label){color:var(--color-disabled-font)}:where([data-cck-theme-name=cocokits] .cck-radio-button--disabled .cck-radio-button__input-wrapper),:where([data-cck-theme-name=cocokits] .cck-radio-button--disabled .cck-radio-button__label){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-radio-group){align-items:flex-start;display:flex}:where([data-cck-theme-name=cocokits] .cck-radio-group__row){flex-direction:row;gap:24px}:where([data-cck-theme-name=cocokits] .cck-radio-group__column){flex-direction:column}:where([data-cck-theme-name=cocokits] .cck-select){align-items:center;border-radius:6px;color:var(--color-font-default);cursor:pointer;display:flex;font:var(--text-sm-regular)}:where([data-cck-theme-name=cocokits] .cck-select.cck-select--disabled){cursor:auto;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-select__placeholder){color:var(--color-font-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-select__trigger-wrapper){color:currentcolor;flex:1;overflow:hidden;padding-right:8px;text-align:start}:where([data-cck-theme-name=cocokits] .cck-select__trigger-value){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:where([data-cck-theme-name=cocokits] .cck-select__overlay .cck-overlay__backdrop){background-color:transparent}:where([data-cck-theme-name=cocokits] .cck-select__dropdown-icon-wrapper .cck-svg-icon){height:var(--icon-size-sm);width:var(--icon-size-sm)}:where([data-cck-theme-name=cocokits] .cck-suffix){flex-grow:0}:where([data-cck-theme-name=cocokits] .cck-suffix .cck-svg-icon.cck-svg-icon--default-size){height:var(--icon-size-xs);width:var(--icon-size-xs)}:where([data-cck-theme-name=cocokits] .cck-suffix .cck-svg-icon.cck-svg-icon--default-color .cck-svg-icon__svg){fill:var(--form_field-color-icon-light)}:where([data-cck-theme-name=cocokits] .cck-textarea){background-color:transparent;border:none;color:var(--color-font-default);font:var(--text-md-regular);min-height:24px;min-width:100%;outline:none;padding:0;scrollbar-color:var(--form_field-color-border) transparent}:where([data-cck-theme-name=cocokits] .cck-textarea::-moz-placeholder){color:var(--color-font-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-textarea::placeholder){color:var(--color-font-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-textarea::-webkit-resizer){background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="%238897AE"><path d="M2.4,12.6c-0.3-0.3-0.3-0.7-0.1-0.9l9.4-9.4c0.2-0.2,0.6-0.1,0.9,0.1s0.3,0.7,0.1,0.9l-9.4,9.4C3.1,12.9,2.7,12.8,2.4,12.6z M7.1,12.8c-0.3-0.3-0.3-0.6-0.2-0.8L12,6.9c0.2-0.2,0.5-0.1,0.8,0.2c0.3,0.3,0.3,0.6,0.2,0.8L7.8,13C7.7,13.1,7.3,13,7.1,12.8z"/></svg>');height:16px;width:16px}:where([data-cck-theme-name=cocokits] .cck-textarea):disabled{cursor:default;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-toggle){-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-toggle):not(.cck-toggle--disabled){cursor:pointer}:where([data-cck-theme-name=cocokits] .cck-toggle__label){align-items:center;color:var(--color-font-default);display:flex;font:var(--text-sm-regular);gap:var(--toggle-spacing-gap)}:where([data-cck-theme-name=cocokits] .cck-toggle__label):not(.cck-toggle--disabled){cursor:pointer}:where([data-cck-theme-name=cocokits] .cck-toggle--label-before .cck-toggle__label){flex-direction:row-reverse}:where([data-cck-theme-name=cocokits] .cck-toggle__slider-wrapper){border-radius:100px;position:relative;width:var(--toggle-size-width-sm)}:where([data-cck-theme-name=cocokits] .cck-toggle__input){cursor:pointer;height:100%;margin:0;opacity:0;padding:0;position:relative;width:100%;z-index:3}:where([data-cck-theme-name=cocokits] .cck-toggle__thumb){background-color:var(--toggle-color-thumb);border:2px solid var(--toggle-color-thumb-border);border-radius:100px;left:0;position:absolute;top:50%;transform:translateY(-50%);transition:all .3s ease,left .3s cubic-bezier(.18,.89,.35,1.15);z-index:2}:where([data-cck-theme-name=cocokits] .cck-toggle__backdrop){background-color:var(--toggle-color-backdrop-unselected);border-radius:100px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:all .3s ease;z-index:1}:where([data-cck-theme-name=cocokits] .cck-toggle--disabled){color:var(--color-disabled-font);cursor:default;pointer-events:none}:where([data-cck-theme-name=cocokits] .cck-toggle--disabled .cck-toggle__thumb){background-color:var(--toggle-color-thumb-disabled)}:where([data-cck-theme-name=cocokits] .cck-toggle--disabled .cck-toggle__backdrop){background-color:var(--toggle-color-backdrop-disabled)}:where([data-cck-theme-name=cocokits] .cck-toggle--checked .cck-toggle__thumb){left:100%;transform:translate(-100%,-50%)}:where([data-cck-theme-name=cocokits] .cck-toggle--checked:active .cck-toggle__thumb){margin-left:calc(var(--toggle-size-bounce)/2*-1)}:where([data-cck-theme-name=cocokits] .cck-toggle--unchecked:active .cck-toggle__thumb){margin-left:calc(var(--toggle-size-bounce)/2)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--brand:not(.cck-toggle--disabled).cck-toggle--checked .cck-toggle__backdrop){background-color:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--brand:not(.cck-toggle--disabled):hover .cck-toggle__thumb){border-color:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--info:not(.cck-toggle--disabled).cck-toggle--checked .cck-toggle__backdrop){background-color:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--info:not(.cck-toggle--disabled):hover .cck-toggle__thumb){border-color:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--warning:not(.cck-toggle--disabled).cck-toggle--checked .cck-toggle__backdrop){background-color:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--warning:not(.cck-toggle--disabled):hover .cck-toggle__thumb){border-color:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--error:not(.cck-toggle--disabled).cck-toggle--checked .cck-toggle__backdrop){background-color:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--error:not(.cck-toggle--disabled):hover .cck-toggle__thumb){border-color:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--h-contrast:not(.cck-toggle--disabled).cck-toggle--checked .cck-toggle__backdrop){background-color:var(--color-h-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--h-contrast:not(.cck-toggle--disabled):hover .cck-toggle__thumb){border-color:var(--color-h-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__size--sm .cck-toggle__slider-wrapper){width:var(--toggle-size-width-sm)}:where([data-cck-theme-name=cocokits] .cck-toggle__size--sm .cck-toggle__thumb){height:var(--toggle-size-thumb-sm);width:var(--toggle-size-thumb-sm)}:where([data-cck-theme-name=cocokits] .cck-toggle__size--sm .cck-toggle__backdrop){height:var(--toggle-size-backdrop-sm);width:calc(var(--toggle-size-width-sm) - var(--toggle-size-thumb-sm))}:where([data-cck-theme-name=cocokits] .cck-toggle__size--sm:active .cck-toggle__thumb){width:calc(var(--toggle-size-thumb-sm) + var(--toggle-size-bounce))}:where([data-cck-theme-name=cocokits] .cck-toggle__size--md .cck-toggle__slider-wrapper){width:var(--toggle-size-width-md)}:where([data-cck-theme-name=cocokits] .cck-toggle__size--md .cck-toggle__backdrop){height:var(--toggle-size-backdrop-md);width:calc(var(--toggle-size-width-md) - var(--toggle-size-thumb-md))}:where([data-cck-theme-name=cocokits] .cck-toggle__size--md .cck-toggle__thumb){height:var(--toggle-size-thumb-md);width:var(--toggle-size-thumb-md)}:where([data-cck-theme-name=cocokits] .cck-toggle__size--md:active .cck-toggle__thumb){width:calc(var(--toggle-size-thumb-md) + var(--toggle-size-bounce))}:where([data-cck-theme-name=cocokits] .cck-toggle__size--lg .cck-toggle__slider-wrapper){width:var(--toggle-size-width-lg)}:where([data-cck-theme-name=cocokits] .cck-toggle__size--lg .cck-toggle__backdrop){height:var(--toggle-size-backdrop-lg);width:calc(var(--toggle-size-width-lg) - var(--toggle-size-thumb-lg))}:where([data-cck-theme-name=cocokits] .cck-toggle__size--lg .cck-toggle__thumb){height:var(--toggle-size-thumb-lg);width:var(--toggle-size-thumb-lg)}:where([data-cck-theme-name=cocokits] .cck-toggle__size--lg:active .cck-toggle__thumb){width:calc(var(--toggle-size-thumb-lg) + var(--toggle-size-bounce))}:where([data-cck-theme-name=cocokits] .cck-trailing){align-items:center;border:1px solid var(--form_field-color-border);border-left:none;color:var(--color-font-alpha-7);display:flex;flex-grow:0;gap:var(--form_field-spacing-trailing-gap);justify-content:center;padding:0 var(--form_field-spacing-input-wrapper-h-padding);-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-trailing .cck-select){color:currentcolor;font:inherit}:where([data-cck-theme-name=cocokits] .cck-trailing__regular){font:var(--text-sm-regular)}:where([data-cck-theme-name=cocokits] .cck-trailing__medium){font:var(--text-sm-medium)}:where([data-cck-theme-name=cocokits] .cck-trailing--clickable){cursor:pointer;transition:background-color .1s}:where([data-cck-theme-name=cocokits] .cck-trailing .cck-svg-icon.cck-svg-icon--default-size){height:var(--icon-size-xs);width:var(--icon-size-xs)}:where([data-cck-theme-name=cocokits] .cck-trailing__color--transparent){background-color:transparent}:where([data-cck-theme-name=cocokits] .cck-trailing__color--transparent.cck-trailing--clickable):active{background-color:var(--color-surface-inverse-alpha-4)}:where([data-cck-theme-name=cocokits] .cck-trailing__color--transparent.cck-trailing--clickable):hover:not(:active){background-color:var(--color-surface-inverse-alpha-1)}:where([data-cck-theme-name=cocokits] .cck-trailing__color--grey){background-color:var(--color-surface-inverse-alpha-1)}:where([data-cck-theme-name=cocokits] .cck-trailing__color--grey.cck-trailing--clickable):active{background-color:var(--color-surface-inverse-alpha-4)}:where([data-cck-theme-name=cocokits] .cck-trailing__color--grey.cck-trailing--clickable):hover:not(:active){background-color:var(--color-surface-inverse-alpha-3)}:where([data-cck-theme-name=cocokits] .cck-trailing .cck-svg-icon.cck-svg-icon--default-color .cck-svg-icon__svg){fill:var(--form_field-color-icon)}:where([data-cck-theme-name=cocokits] .cck-avatar){align-items:center;border-radius:50%;display:flex;justify-content:center;overflow:hidden}:where([data-cck-theme-name=cocokits] .cck-avatar__fallback-image),:where([data-cck-theme-name=cocokits] .cck-avatar__image),:where([data-cck-theme-name=cocokits] .cck-avatar__placeholder-image){border-radius:inherit;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}:where([data-cck-theme-name=cocokits] .cck-avatar--with-label){background-color:var(--color-brand-light);color:var(--color-font-default)}:where([data-cck-theme-name=cocokits] .cck-avatar--clickable){cursor:pointer}:where([data-cck-theme-name=cocokits] .cck-avatar__size--xs){height:var(--size-28);width:var(--size-28)}:where([data-cck-theme-name=cocokits] .cck-avatar__size--xs.cck-avatar--with-label){font:var(--text-xs-semibold)}:where([data-cck-theme-name=cocokits] .cck-avatar__size--sm){height:var(--size-32);width:var(--size-32)}:where([data-cck-theme-name=cocokits] .cck-avatar__size--sm.cck-avatar--with-label){font:var(--text-sm-semibold)}:where([data-cck-theme-name=cocokits] .cck-avatar__size--md){height:var(--size-40);width:var(--size-40)}:where([data-cck-theme-name=cocokits] .cck-avatar__size--md.cck-avatar--with-label){font:var(--text-md-semibold)}:where([data-cck-theme-name=cocokits] .cck-avatar__size--lg){height:var(--size-48);width:var(--size-48)}:where([data-cck-theme-name=cocokits] .cck-avatar__size--lg.cck-avatar--with-label){font:var(--text-lg-semibold)}:where([data-cck-theme-name=cocokits] .cck-avatar-group){display:flex}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-left){direction:rtl}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-left.cck-avatar-group__size--xs .cck-avatar):not(:last-of-type){margin-left:-10px}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-left.cck-avatar-group__size--sm .cck-avatar):not(:last-of-type){margin-left:-10px}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-left.cck-avatar-group__size--md .cck-avatar):not(:last-of-type){margin-left:-14px}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-left.cck-avatar-group__size--lg .cck-avatar):not(:last-of-type){margin-left:-16px}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-right.cck-avatar-group__size--xs .cck-avatar):not(:first-of-type){margin-left:-10px}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-right.cck-avatar-group__size--sm .cck-avatar):not(:first-of-type){margin-left:-10px}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-right.cck-avatar-group__size--md .cck-avatar):not(:first-of-type){margin-left:-14px}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-right.cck-avatar-group__size--lg .cck-avatar):not(:first-of-type){margin-left:-16px}:where([data-cck-theme-name=cocokits] .cck-avatar-group .cck-avatar){border:2px solid var(--color-border-light)}:where([data-cck-theme-name=cocokits] .cck-avatar-label){align-items:center;display:flex}:where([data-cck-theme-name=cocokits] .cck-avatar-label__title){color:var(--color-font-default)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__description){color:var(--color-font-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__label-wrapper){display:flex}:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-right){flex-direction:row-reverse}:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-right .cck-avatar-label__label-wrapper){text-align:right}:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-left){flex-direction:row}:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-top){flex-direction:column}:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-bottom){flex-direction:column-reverse}:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-bottom.cck-avatar-label--label-vertical .cck-avatar-label__label-wrapper),:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-top.cck-avatar-label--label-vertical .cck-avatar-label__label-wrapper){align-items:center}:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-left.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper),:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-right.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){align-items:center}:where([data-cck-theme-name=cocokits] .cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){align-items:center;flex-direction:row}:where([data-cck-theme-name=cocokits] .cck-avatar-label--label-vertical .cck-avatar-label__label-wrapper){flex-direction:column;justify-content:center}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--xs){gap:var(--size-12)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--xs .cck-avatar-label__label-wrapper){font:var(--text-xs-medium)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--xs.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){gap:var(--size-12)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--sm){gap:var(--size-12)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--sm .cck-avatar-label__label-wrapper){font:var(--text-sm-medium)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--sm.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){gap:var(--size-12)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--md){gap:var(--size-12)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--md .cck-avatar-label__label-wrapper){font:var(--text-md-medium)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--md.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){gap:var(--size-12)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--lg){gap:var(--size-20)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--lg .cck-avatar-label__label-wrapper){font:var(--text-md-medium)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--lg.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){gap:var(--size-20)}:where([data-cck-theme-name=cocokits] .cck-accordion){display:flex;flex-direction:column}:where([data-cck-theme-name=cocokits] .cck-accordion__default.cck-accordion__size--sm){gap:var(--size-12)}:where([data-cck-theme-name=cocokits] .cck-accordion__default.cck-accordion__size--md){gap:var(--size-20)}:where([data-cck-theme-name=cocokits] .cck-accordion__group){border:1px solid var(--color-border-default);border-radius:6px}:where([data-cck-theme-name=cocokits] .cck-accordion-header--trigger-icon>.cck-accordion-header__icon-btn):hover{background-color:var(--color-h-contrast-alpha-1)}:where([data-cck-theme-name=cocokits] .cck-accordion-header--trigger-header){cursor:pointer}:where([data-cck-theme-name=cocokits] .cck-accordion-header--trigger-header>.cck-accordion-header__icon-btn):hover{background-color:transparent}:where([data-cck-theme-name=cocokits] .cck-accordion-header){align-items:center;color:var(--color-font-default);display:flex}:where([data-cck-theme-name=cocokits] .cck-accordion-header .cck-svg-icon.cck-svg-icon--default-color){fill:var(--color-font-default)}:where([data-cck-theme-name=cocokits] .cck-accordion-header>.cck-accordion-header__icon-btn){background-color:transparent;fill:var(--color-font-default);align-items:center;border:none;border-radius:4px;cursor:pointer;display:flex;justify-self:center;outline:none}:where([data-cck-theme-name=cocokits] .cck-accordion-header--icon-right>.cck-accordion-header__icon-btn){margin-left:auto}:where([data-cck-theme-name=cocokits] .cck-accordion-header--icon-left){flex-direction:row-reverse;justify-content:flex-end}:where([data-cck-theme-name=cocokits] .cck-accordion__size--sm>.cck-accordion-panel>.cck-accordion-header){height:var(--size-48)}:where([data-cck-theme-name=cocokits] .cck-accordion__size--sm>.cck-accordion-panel>.cck-accordion-header>.cck-accordion-header__icon-btn){height:36px;width:36px}:where([data-cck-theme-name=cocokits] .cck-accordion__size--md>.cck-accordion-panel .cck-accordion-header){height:var(--size-56)}:where([data-cck-theme-name=cocokits] .cck-accordion__size--md>.cck-accordion-panel .cck-accordion-header>.cck-accordion-header__icon-btn){height:36px;width:36px}:where([data-cck-theme-name=cocokits] .cck-accordion-panel>.cck-accordion-header){font:var(--text-md-medium)}:where([data-cck-theme-name=cocokits] .cck-accordion-panel>.cck-accordion-header.cck-accordion-header--icon-right){padding-left:var(--size-20);padding-right:calc(var(--size-20) - 10px)}:where([data-cck-theme-name=cocokits] .cck-accordion-panel>.cck-accordion-header.cck-accordion-header--icon-left){padding-left:calc(var(--size-20) - 10px);padding-right:var(--size-20)}:where([data-cck-theme-name=cocokits] .cck-accordion__default>.cck-accordion-panel--collapsed>.cck-accordion-header),:where([data-cck-theme-name=cocokits] .cck-accordion__group>.cck-accordion-panel--collapsed>.cck-accordion-header){background-color:var(--color-h-contrast-alpha-2)}:where([data-cck-theme-name=cocokits] .cck-accordion__basic>.cck-accordion-panel>.cck-accordion-header--trigger-header):hover{background-color:var(--color-h-contrast-alpha-2)}:where([data-cck-theme-name=cocokits] .cck-accordion-panel--disabled){color:var(--color-disabled-font);opacity:.5}:where([data-cck-theme-name=cocokits] .cck-accordion-panel--disabled>.cck-accordion-header){color:currentcolor}:where([data-cck-theme-name=cocokits] .cck-accordion-panel--disabled>.cck-accordion-header.cck-accordion-header--trigger-header){cursor:not-allowed}:where([data-cck-theme-name=cocokits] .cck-accordion-panel--disabled>.cck-accordion-header>.cck-accordion-header__icon-btn){display:none}:where([data-cck-theme-name=cocokits] .cck-accordion-panel){color:var(--color-font-default);font:var(--text-md-regular);overflow:hidden;transition:padding-bottom .3s}:where([data-cck-theme-name=cocokits] .cck-accordion--instant-animation>.cck-accordion-panel){transition:none}:where([data-cck-theme-name=cocokits] .cck-accordion-panel--collapsed){padding-bottom:0}:where([data-cck-theme-name=cocokits] .cck-accordion__size--sm>.cck-accordion-panel.cck-accordion-panel--expanded){padding-bottom:var(--size-20)}:where([data-cck-theme-name=cocokits] .cck-accordion__size--sm>.cck-accordion-panel>.cck-accordion-panel__content-wrapper){padding-left:var(--size-20);padding-right:var(--size-20)}:where([data-cck-theme-name=cocokits] .cck-accordion__size--md>.cck-accordion-panel.cck-accordion-panel--expanded){padding-bottom:var(--size-20)}:where([data-cck-theme-name=cocokits] .cck-accordion__size--md>.cck-accordion-panel>.cck-accordion-panel__content-wrapper){padding-left:var(--size-20);padding-right:var(--size-20)}:where([data-cck-theme-name=cocokits] .cck-accordion__default>.cck-accordion-panel){border:1px solid var(--color-border-default);border-radius:6px}:where([data-cck-theme-name=cocokits] .cck-accordion__basic>.cck-accordion-panel):not(:last-of-type),:where([data-cck-theme-name=cocokits] .cck-accordion__group>.cck-accordion-panel):not(:last-of-type){border-bottom:1px solid var(--color-border-default)}:where([data-cck-theme-name=cocokits] .cck-tabs){opacity:1}:where([data-cck-theme-name=frames-x] .cck-button){align-items:center;border:none;border-radius:var(--radi-6);box-sizing:border-box;cursor:pointer;display:inline-flex;justify-content:center;margin:0;outline:transparent;transition:all .1s}:where([data-cck-theme-name=frames-x] .cck-button):focus-visible{box-shadow:0 0 0 3px var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-button .cck-svg-icon--default-color .cck-svg-icon__svg){fill:currentcolor}:where([data-cck-theme-name=frames-x] .cck-button__backdrop){display:none}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--brand){background-color:var(--state-brand-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--brand):hover{background-color:var(--state-brand-hover)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--brand):active{background-color:var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--brand):disabled{background-color:var(--base-fill-1);color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--highlight){background-color:var(--state-highlight-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--highlight):hover{background-color:var(--state-highlight-hover)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--highlight):active{background-color:var(--state-highlight-selected)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--highlight):disabled{background-color:var(--base-fill-1);color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--success){background-color:var(--state-success-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--success):hover{background-color:var(--state-success-hover)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--success):active{background-color:var(--state-success-selected)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--success):disabled{background-color:var(--base-fill-1);color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--danger){background-color:var(--state-danger-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--danger):hover{background-color:var(--state-danger-hover)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--danger):active{background-color:var(--state-danger-selected)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--danger):disabled{background-color:var(--base-fill-1);color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__secondary){background-color:var(--base-surface-2);border:1px solid var(--base-border);color:var(--text-dark-primary);outline:1px solid transparent}:where([data-cck-theme-name=frames-x] .cck-button__secondary):hover{background-color:var(--base-fill-2);border:1px solid var(--base-fill-2)}:where([data-cck-theme-name=frames-x] .cck-button__secondary):active{background-color:var(--base-fill-1);border:1px solid var(--base-border)}:where([data-cck-theme-name=frames-x] .cck-button__secondary):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__ghost){background-color:var(--base-surface-1);outline:1px solid transparent}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--brand){border:1px solid var(--state-brand-active);color:var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--brand):hover{border:1px solid var(--state-brand-hover);outline:1px solid var(--state-brand-hover)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--brand):active{border:1px solid var(--state-brand-selected);outline:1px solid var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--brand):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--highlight){border:1px solid var(--state-highlight-active);color:var(--state-highlight-active)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--highlight):hover{border:1px solid var(--state-highlight-hover);outline:1px solid var(--state-highlight-hover)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--highlight):active{border:1px solid var(--state-highlight-selected);outline:1px solid var(--state-highlight-selected)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--highlight):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--success){border:1px solid var(--state-success-active);color:var(--state-success-active)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--success):hover{border:1px solid var(--state-success-hover);outline:1px solid var(--state-success-hover)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--success):active{border:1px solid var(--state-success-selected);outline:1px solid var(--state-success-selected)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--success):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--danger){border:1px solid var(--state-danger-active);color:var(--state-danger-active)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--danger):hover{border:1px solid var(--state-danger-hover);outline:1px solid var(--state-danger-hover)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--danger):active{border:1px solid var(--state-danger-selected);outline:1px solid var(--state-danger-selected)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--danger):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__size--sm){font:var(--text-sm-font-semibold);gap:var(--spacing-3);height:36px;padding:var(--spacing-0) var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-button__size--md){font:var(--text-base-font-semibold);gap:var(--spacing-5);height:44px;padding:var(--spacing-0) var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-button__size--lg){font:var(--text-lg-font-semibold);gap:var(--spacing-7);height:44px;padding:var(--spacing-0) var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-button__size--xl){font:var(--text-xl-font-semibold);gap:var(--spacing-7);height:56px;padding:var(--spacing-0) var(--spacing-10)}:where([data-cck-theme-name=frames-x] .cck-checkbox){display:flex;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-checkbox__wrapper){align-items:center;display:inline-flex;vertical-align:middle}:where([data-cck-theme-name=frames-x] .cck-checkbox__input-wrapper){box-sizing:content-box;cursor:pointer;display:inline-block;flex-shrink:0;line-height:0;position:relative;white-space:nowrap}:where([data-cck-theme-name=frames-x] .cck-checkbox__input){cursor:inherit;height:100%;left:0;margin:0;opacity:0;padding:0;position:absolute;right:0;top:0;width:100%}:where([data-cck-theme-name=frames-x] .cck-checkbox__input:focus-visible~.cck-checkbox__background){border:2px solid var(--state-brand-selected);box-shadow:0 0 0 1px var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-checkbox__background){align-items:center;background-color:var(--base-fill-1);border:2px solid var(--base-border);border-radius:var(--radi-4);box-sizing:border-box;display:flex;height:100%;justify-content:center;pointer-events:none;position:absolute;transition:background-color 90ms cubic-bezier(.4,0,.6,1),border-color 90ms cubic-bezier(.4,0,.6,1);width:100%;will-change:background-color,outline-color}:where([data-cck-theme-name=frames-x] .cck-checkbox.cck-checkbox--disabled .cck-checkbox__background){background-color:var(--base-disabled);border:2px solid transparent}:where([data-cck-theme-name=frames-x] .cck-checkbox.cck-checkbox--disabled .cck-checkbox__label){color:var(--base-disabled)}:where([data-cck-theme-name=frames-x] .cck-checkbox.cck-checkbox--disabled *){cursor:default}:where([data-cck-theme-name=frames-x] .cck-checkbox--checked .cck-checkbox__background){background-color:var(--state-brand-active);border:2px solid var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-checkbox--checked .cck-checkbox__checkmark){opacity:1}:where([data-cck-theme-name=frames-x] .cck-checkbox--indeterminate .cck-checkbox__background){background-color:var(--state-brand-active);border:2px solid var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-checkbox--indeterminate .cck-checkbox__checkmark){opacity:0;transform:rotate(45deg);transition:opacity 90ms cubic-bezier(.4,0,.6,1),transform 90ms cubic-bezier(.4,0,.6,1)}:where([data-cck-theme-name=frames-x] .cck-checkbox--indeterminate .cck-checkbox__mixedmark){opacity:1;transform:scaleX(1) rotate(0deg)}:where([data-cck-theme-name=frames-x] .cck-checkbox__mixedmark){border:2px solid #fff;border-radius:100px;height:0;margin:2px;opacity:0;transform:scaleX(0) rotate(0deg);transition:opacity 90ms cubic-bezier(.4,0,.6,1),transform 90ms cubic-bezier(.4,0,.6,1);width:100%}:where([data-cck-theme-name=frames-x] .cck-checkbox__checkmark){color:#fff;inset:0;opacity:0;padding:2px;position:absolute;transition:opacity .18s cubic-bezier(.4,0,.6,1);width:100%}:where([data-cck-theme-name=frames-x] .cck-checkbox__checkmark-path){fill:currentcolor}:where([data-cck-theme-name=frames-x] .cck-checkbox__label){color:var(--text-dark-primary);cursor:pointer;margin-left:0;margin-right:auto;order:0;padding-left:0;padding-right:0;text-align:left;white-space:nowrap}:where([data-cck-theme-name=frames-x] .cck-checkbox__label):empty{display:none}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--sm .cck-checkbox__wrapper){gap:var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--sm .cck-checkbox__input-wrapper){height:22px;width:22px}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--sm .cck-checkbox__label){font:var(--text-sm-font-medium)}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--md .cck-checkbox__wrapper){gap:var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--md .cck-checkbox__input-wrapper){height:24px;width:24px}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--md .cck-checkbox__label){font:var(--text-base-font-medium)}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--lg .cck-checkbox__wrapper){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--lg .cck-checkbox__input-wrapper){height:32px;width:32px}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--lg .cck-checkbox__label){font:var(--text-lg-font-medium)}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--xl .cck-checkbox__wrapper){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--xl .cck-checkbox__input-wrapper){height:32px;width:32px}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--xl .cck-checkbox__label){font:var(--text-xl-font-medium)}:where([data-cck-theme-name=frames-x] .cck-chip){align-items:center;background-color:var(--base-surface-2);border:1px solid var(--base-border);border-radius:var(--radi-5);color:var(--text-dark-primary);cursor:default;display:flex;transition:all .1s}:where([data-cck-theme-name=frames-x] .cck-chip--disabled){background-color:var(--base-fill-1);border:1px solid transparent;color:var(--base-disabled);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-chip__content-wrapper){align-items:center;display:flex;justify-content:center}:where([data-cck-theme-name=frames-x] .cck-chip__remove-icon-wrapper){align-items:center;display:flex;flex-shrink:0;justify-content:center}:where([data-cck-theme-name=frames-x] .cck-chip__remove-icon-wrapper .cck-icon-button){background-color:transparent;border-radius:50%;color:var(--base-fill-4);height:24px;padding:0;width:24px}:where([data-cck-theme-name=frames-x] .cck-chip__remove-icon-wrapper .cck-icon-button):hover{background-color:var(--base-fill-1)}:where([data-cck-theme-name=frames-x] .cck-chip__remove-icon-wrapper .cck-icon-button .cck-svg-icon){height:100%;width:100%}:where([data-cck-theme-name=frames-x] .cck-chip__size--sm){font:var(--text-xs-font-medium);gap:var(--spacing-4);height:26px;padding:0 var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-chip__size--sm.cck-chip--removable){padding:0 var(--spacing-6) 0 var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-chip__size--md){font:var(--text-base-font-medium);gap:var(--spacing-4);height:34px;padding:0 var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-chip__size--md.cck-chip--removable){padding:0 var(--spacing-7) 0 var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-chip__size--lg){font:var(--text-lg-font-medium);gap:var(--spacing-6);height:44px;padding:0 var(--spacing-9)}:where([data-cck-theme-name=frames-x] .cck-chip__size--lg.cck-chip--removable){padding:0 var(--spacing-8) 0 var(--spacing-9)}:where([data-cck-theme-name=frames-x] .cck-chip-list){align-items:stretch;display:flex;flex-wrap:wrap;justify-content:flex-start}:where([data-cck-theme-name=frames-x] .cck-chip-list__input){background:transparent;border:none;color:var(--text-dark-primary);flex:1;font:var(--text-base-font-medium);outline:none}:where([data-cck-theme-name=frames-x] .cck-chip-list__input::-moz-placeholder){color:var(--text-dark-tertiary);-moz-transition:color .1s ease-in;transition:color .1s ease-in}:where([data-cck-theme-name=frames-x] .cck-chip-list__input::placeholder){color:var(--text-dark-tertiary);transition:color .1s ease-in}:where([data-cck-theme-name=frames-x] .cck-chip-list__input::-moz-placeholder):not(:focus){color:transparent}:where([data-cck-theme-name=frames-x] .cck-chip-list__input::placeholder):not(:focus){color:transparent}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--sm){gap:6px}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--sm .cck-chip-list__input){font:var(--text-xs-font-medium);height:26px;margin-left:var(--spacing-5)}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--sm .cck-chip-list__input):first-child{margin-left:calc(var(--spacing-6) - 4px)}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--md){gap:6px}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--md .cck-chip-list__input){font:var(--text-base-font-medium);height:34px;margin-left:var(--spacing-6)}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--md .cck-chip-list__input):first-child{margin-left:calc(var(--spacing-7) - 4px)}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--lg){gap:6px}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--lg .cck-chip-list__input){font:var(--text-lg-font-medium);height:44px;margin-left:var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--lg .cck-chip-list__input):first-child{margin-left:calc(var(--spacing-7) - 6px)}:where([data-cck-theme-name=frames-x] *){box-sizing:border-box}:where([data-cck-theme-name=frames-x] .cck-divider){background-color:var(--base-border);display:block;flex-shrink:0}:where([data-cck-theme-name=frames-x] .cck-divider__horizontal){margin:4px 0;width:100%}:where([data-cck-theme-name=frames-x] .cck-divider__horizontal.cck-divider__size--sm){height:1px}:where([data-cck-theme-name=frames-x] .cck-divider__horizontal.cck-divider__size--md){height:2px;width:100%}:where([data-cck-theme-name=frames-x] .cck-divider__vertical){height:100%;margin:0 4px}:where([data-cck-theme-name=frames-x] .cck-divider__vertical.cck-divider__size--sm){width:1px}:where([data-cck-theme-name=frames-x] .cck-divider__vertical.cck-divider__size--md){width:2px}:where([data-cck-theme-name=frames-x] .cck-error){color:var(--state-danger-active);display:flex;font:var(--text-sm-font-medium);gap:6px}:where([data-cck-theme-name=frames-x] .cck-error .cck-svg-icon--default-color .cck-svg-icon__svg){fill:currentcolor}:where([data-cck-theme-name=frames-x] .cck-form-field){align-items:flex-start;display:flex;flex-direction:column;gap:10px;min-width:100px}:where([data-cck-theme-name=frames-x] .cck-form-field .cck-select){flex:1;height:100%;width:100%}:where([data-cck-theme-name=frames-x] .cck-form-field .cck-input){flex:1;width:100%}:where([data-cck-theme-name=frames-x] .cck-form-field--error .cck-form-field__wrapper){border:1px solid var(--state-danger-active);outline:1px solid var(--state-danger-active)}:where([data-cck-theme-name=frames-x] .cck-form-field--focused .cck-form-field__wrapper){background-color:var(--base-surface-2);border:1px solid var(--state-brand-active);outline:1px solid var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-form-field--disabled .cck-form-field__wrapper){background-color:var(--base-fill-1);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-form-field__wrapper){align-items:stretch;background-color:var(--base-surface-1);border:1px solid var(--base-border);border-radius:var(--radi-6);display:flex;flex-direction:row;outline:1px solid transparent;overflow:hidden;width:100%}:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm.cck-form-field--with-input .cck-form-field__wrapper),:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm.cck-form-field--with-select .cck-form-field__wrapper){height:36px}:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm.cck-form-field--with-input .cck-form-field__input-wrapper),:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm.cck-form-field--with-select .cck-form-field__input-wrapper){padding:0 var(--spacing-6) 0 var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm .cck-form-field--with-textarea .cck-form-field__input-wrapper){padding:var(--spacing-6) var(--spacing-6) var(--spacing-6) var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm.cck-form-field--with-chip-list .cck-form-field__input-wrapper){padding:4px}:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm .cck-input),:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm .cck-leading),:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm .cck-select),:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm .cck-textarea),:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm .cck-trailing){font:var(--text-sm-font-medium)}:where([data-cck-theme-name=frames-x] .cck-form-field__size--md.cck-form-field--with-input .cck-form-field__wrapper),:where([data-cck-theme-name=frames-x] .cck-form-field__size--md.cck-form-field--with-select .cck-form-field__wrapper){height:44px}:where([data-cck-theme-name=frames-x] .cck-form-field__size--md.cck-form-field--with-input .cck-form-field__input-wrapper),:where([data-cck-theme-name=frames-x] .cck-form-field__size--md.cck-form-field--with-select .cck-form-field__input-wrapper){padding:0 var(--spacing-7) 0 var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-form-field__size--md .cck-form-field--with-textarea .cck-form-field__input-wrapper){padding:var(--spacing-7) var(--spacing-7) var(--spacing-7) var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-form-field__size--md.cck-form-field--with-chip-list .cck-form-field__input-wrapper){padding:4px}:where([data-cck-theme-name=frames-x] .cck-form-field__size--md .cck-input),:where([data-cck-theme-name=frames-x] .cck-form-field__size--md .cck-leading),:where([data-cck-theme-name=frames-x] .cck-form-field__size--md .cck-select),:where([data-cck-theme-name=frames-x] .cck-form-field__size--md .cck-textarea),:where([data-cck-theme-name=frames-x] .cck-form-field__size--md .cck-trailing){font:var(--text-base-font-medium)}:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg.cck-form-field--with-input .cck-form-field__wrapper),:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg.cck-form-field--with-select .cck-form-field__wrapper){height:56px}:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg.cck-form-field--with-input .cck-form-field__input-wrapper),:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg.cck-form-field--with-select .cck-form-field__input-wrapper){padding:0 var(--spacing-7) 0 var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg .cck-form-field--with-textarea .cck-form-field__input-wrapper){padding:var(--spacing-7) var(--spacing-7) var(--spacing-7) var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg.cck-form-field--with-chip-list .cck-form-field__input-wrapper){padding:6px}:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg .cck-input),:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg .cck-leading),:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg .cck-select),:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg .cck-textarea),:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg .cck-trailing){font:var(--text-lg-font-medium)}:where([data-cck-theme-name=frames-x] .cck-form-field__feedback-wrapper){display:flex;flex-direction:column;overflow:hidden}:where([data-cck-theme-name=frames-x] .cck-form-field__feedback-wrapper):empty{display:none}:where([data-cck-theme-name=frames-x] .cck-form-field__input-wrapper){align-items:center;display:flex;flex:1;flex-direction:row;gap:8px;min-width:0}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list .cck-chip-list){flex:1}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list .cck-form-field__wrapper){cursor:text}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list .cck-prefix),:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list .cck-suffix){align-self:flex-start}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list.cck-form-field__size--sm .cck-suffix){margin-right:4px;margin-top:6px}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list.cck-form-field__size--md .cck-suffix){margin-right:4px;margin-top:8px}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list.cck-form-field__size--lg .cck-suffix){margin-left:4px;margin-right:8px;margin-top:12px}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list.cck-form-field__size--sm .cck-prefix){margin-left:4px;margin-top:6px}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list.cck-form-field__size--md .cck-prefix){margin-left:4px;margin-top:8px}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list.cck-form-field__size--lg .cck-prefix){margin-left:8px;margin-right:4px;margin-top:12px}:where([data-cck-theme-name=frames-x] .cck-form-field--with-textarea .cck-form-field__input-wrapper){padding:10px 10px 10px 16px}:where([data-cck-theme-name=frames-x] .cck-form-field--with-textarea .cck-form-field__input-wrapper):hover:not(:has(textarea:focus-visible)){background-color:var(--base-fill-1)}:where([data-cck-theme-name=frames-x] .cck-form-field--with-input .cck-form-field__input-wrapper):hover:not(:has(input:focus-visible)),:where([data-cck-theme-name=frames-x] .cck-form-field--with-select .cck-form-field__input-wrapper):hover:not(:has(input:focus-visible)){background-color:var(--base-fill-1)}:where([data-cck-theme-name=frames-x] .cck-hint){color:var(--text-dark-secondary);display:flex;font:var(--text-sm-font-medium);gap:6px}:where([data-cck-theme-name=frames-x] .cck-hint .cck-svg-icon--default-color .cck-svg-icon__svg){fill:currentcolor}:where([data-cck-theme-name=frames-x] .cck-hint__color--default){color:var(--text-dark-secondary)}:where([data-cck-theme-name=frames-x] .cck-hint__color--success){color:var(--state-success-active)}:where([data-cck-theme-name=frames-x] .cck-svg-icon){align-items:center;display:flex;flex-shrink:0;justify-content:center}:where([data-cck-theme-name=frames-x] .cck-svg-icon__svg){height:100%;width:100%}:where([data-cck-theme-name=frames-x] .cck-svg-icon__size--xs){height:var(--icon-xs);width:var(--icon-xs)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__size--sm){height:var(--icon-sm);width:var(--icon-sm)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__size--md){height:var(--icon-md);width:var(--icon-md)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__size--lg){height:var(--icon-lg);width:var(--icon-lg)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__size--xl){height:var(--icon-xl);width:var(--icon-xl)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__size--2xl){height:var(--icon-2xl);width:var(--icon-2xl)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__size--3xl){height:var(--icon-3xl);width:var(--icon-3xl)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__size--4xl){height:var(--icon-4xl);width:var(--icon-4xl)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__color--grey){fill:var(--base-fill-4)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__color--brand){fill:var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__color--highlight){fill:var(--state-highlight-active)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__color--success){fill:var(--state-success-active)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__color--danger){fill:var(--state-danger-active)}:where([data-cck-theme-name=frames-x] .cck-icon-button){align-items:center;border:none;border-radius:var(--radi-6);box-sizing:border-box;cursor:pointer;display:inline-flex;justify-content:center;margin:0;outline:transparent;transition:all .1s}:where([data-cck-theme-name=frames-x] .cck-icon-button .cck-svg-icon--default-color){fill:currentcolor}:where([data-cck-theme-name=frames-x] .cck-icon-button):focus-visible{box-shadow:0 0 0 3px var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--brand){background-color:var(--state-brand-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--brand):hover{background-color:var(--state-brand-hover)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--brand):active{background-color:var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--brand):disabled{background-color:var(--base-fill-1);color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--highlight){background-color:var(--state-highlight-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--highlight):hover{background-color:var(--state-highlight-hover)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--highlight):active{background-color:var(--state-highlight-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--highlight):disabled{background-color:var(--base-fill-1);color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--success){background-color:var(--state-success-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--success):hover{background-color:var(--state-success-hover)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--success):active{background-color:var(--state-success-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--success):disabled{background-color:var(--base-fill-1);color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--danger){background-color:var(--state-danger-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--danger):hover{background-color:var(--state-danger-hover)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--danger):active{background-color:var(--state-danger-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--danger):disabled{background-color:var(--base-fill-1);color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__secondary){background-color:var(--base-surface-2);border:1px solid var(--base-border);color:var(--text-dark-primary);outline:1px solid transparent}:where([data-cck-theme-name=frames-x] .cck-icon-button__secondary):hover{background-color:var(--base-fill-2);border:1px solid var(--base-fill-2)}:where([data-cck-theme-name=frames-x] .cck-icon-button__secondary):active{background-color:var(--base-fill-1);border:1px solid var(--base-border)}:where([data-cck-theme-name=frames-x] .cck-icon-button__secondary):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost){background-color:var(--base-surface-1);outline:1px solid transparent}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--brand){border:1px solid var(--state-brand-active);color:var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--brand):hover{border:1px solid var(--state-brand-hover);outline:1px solid var(--state-brand-hover)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--brand):active{border:1px solid var(--state-brand-selected);outline:1px solid var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--brand):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--highlight){border:1px solid var(--state-highlight-active);color:var(--state-highlight-active)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--highlight):hover{border:1px solid var(--state-highlight-hover);outline:1px solid var(--state-highlight-hover)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--highlight):active{border:1px solid var(--state-highlight-selected);outline:1px solid var(--state-highlight-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--highlight):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--success){border:1px solid var(--state-success-active);color:var(--state-success-active)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--success):hover{border:1px solid var(--state-success-hover);outline:1px solid var(--state-success-hover)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--success):active{border:1px solid var(--state-success-selected);outline:1px solid var(--state-success-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--success):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--danger){border:1px solid var(--state-danger-active);color:var(--state-danger-active)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--danger):hover{border:1px solid var(--state-danger-hover);outline:1px solid var(--state-danger-hover)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--danger):active{border:1px solid var(--state-danger-selected);outline:1px solid var(--state-danger-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--danger):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__size--sm){height:36px;width:36px}:where([data-cck-theme-name=frames-x] .cck-icon-button__size--sm .cck-svg-icon--default-size){height:var(--icon-md);width:var(--icon-md)}:where([data-cck-theme-name=frames-x] .cck-icon-button__size--md){height:44px;width:44px}:where([data-cck-theme-name=frames-x] .cck-icon-button__size--md .cck-svg-icon--default-size){height:var(--icon-lg);width:var(--icon-lg)}:where([data-cck-theme-name=frames-x] .cck-icon-button__size--lg){height:44px;width:44px}:where([data-cck-theme-name=frames-x] .cck-icon-button__size--lg .cck-svg-icon--default-size){height:var(--icon-xl);width:var(--icon-xl)}:where([data-cck-theme-name=frames-x] .cck-icon-button__size--xl){height:56px;width:56px}:where([data-cck-theme-name=frames-x] .cck-icon-button__size--xl .cck-svg-icon--default-size){height:var(--icon-2xl);width:var(--icon-2xl)}:where([data-cck-theme-name=frames-x] .cck-input){background-color:transparent;border:none;color:var(--text-dark-primary);font:var(--text-base-font-medium);outline:none;text-overflow:ellipsis}:where([data-cck-theme-name=frames-x] .cck-input::-moz-placeholder){color:var(--text-dark-tertiary)}:where([data-cck-theme-name=frames-x] .cck-input::placeholder){color:var(--text-dark-tertiary)}:where([data-cck-theme-name=frames-x] .cck-input):disabled{color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-label){color:var(--text-dark-secondary);display:flex;font:var(--text-base-font-regular)}:where([data-cck-theme-name=frames-x] .cck-label__required-marker){margin-left:4px}:where([data-cck-theme-name=frames-x] .cck-leading){align-items:center;background-color:var(--base-surface-2);color:var(--text-dark-tertiary);cursor:default;display:flex;font:var(--text-base-font-medium);gap:var(--spacing-4);justify-content:center;padding:0 var(--spacing-7);-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-leading--clickable){cursor:pointer;transition:background-color .1s}:where([data-cck-theme-name=frames-x] .cck-leading--clickable):active{background-color:var(--base-fill-1)}:where([data-cck-theme-name=frames-x] .cck-leading--clickable):hover{background-color:var(--base-fill-2)}:where([data-cck-theme-name=frames-x] .cck-menu){background-color:var(--base-surface-1);border:1px solid var(--base-border);border-radius:var(--radi-6);box-shadow:0 8px 10px -6px rgba(13,16,23,.039),0 18px 22px -4px rgba(13,16,23,.078);display:flex;flex-direction:column;margin:4px 0;overflow:hidden;padding:0}:where([data-cck-theme-name=frames-x] .cck-menu__overlay .cck-overlay__backdrop){background-color:transparent}:where([data-cck-theme-name=frames-x] .cck-menu-item){align-items:center;color:var(--text-dark-secondary);display:flex;font:var(--text-base-font-medium);gap:var(--spacing-6);justify-content:flex-start;padding:var(--spacing-6) var(--spacing-5)}:where([data-cck-theme-name=frames-x] .cck-menu-item):not(.cck-menu-item--disabled){cursor:pointer}:where([data-cck-theme-name=frames-x] .cck-menu-item--disabled .cck-svg-icon.cck-svg-icon--default-color),:where([data-cck-theme-name=frames-x] .cck-menu-item--disabled){color:var(--base-disabled)}:where([data-cck-theme-name=frames-x] .cck-menu-item):not(.cck-menu-item--disabled):hover{background-color:var(--base-fill-1)}:where([data-cck-theme-name=frames-x] .cck-menu-item .cck-svg-icon.cck-svg-icon--default-size){height:var(--icon-lg);width:var(--icon-lg)}:where([data-cck-theme-name=frames-x] .cck-menu-item .cck-svg-icon.cck-svg-icon--default-color .cck-svg-icon__svg){fill:currentcolor}:where([data-cck-theme-name=frames-x] .cck-select__options-wrapper){background-color:var(--base-surface-1);border:1px solid var(--base-border);border-radius:var(--radi-6);height:inherit;margin-top:6px;max-height:inherit;overflow:auto}:where([data-cck-theme-name=frames-x] .cck-option__content-wrapper){flex:1}:where([data-cck-theme-name=frames-x] .cck-option){align-items:center;color:var(--text-dark-secondary);display:flex;font:var(--text-base-font-medium);gap:8px;padding:0 12px}:where([data-cck-theme-name=frames-x] .cck-option):not(.cck-option--disabled){cursor:pointer}:where([data-cck-theme-name=frames-x] .cck-option--disabled){color:var(--base-disabled);-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-option):not(.cck-option--disabled):hover{background-color:var(--base-fill-1)}:where([data-cck-theme-name=frames-x] .cck-option .cck-checkbox__input-wrapper){height:22px;width:22px}:where([data-cck-theme-name=frames-x] .cck-option--single.cck-option--selected){color:var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-option__size--sm){height:40px}:where([data-cck-theme-name=frames-x] .cck-option__size--md){height:48px}:where([data-cck-theme-name=frames-x] .cck-option__size--lg){height:56px}:where([data-cck-theme-name=frames-x] .cck-option__selected-checkmark .cck-svg-icon){height:var(--icon-md);width:var(--icon-md);fill:currentcolor}:where([data-cck-theme-name=frames-x] .cck-option-group){display:flex;flex-direction:column}:where([data-cck-theme-name=frames-x] .cck-option-group--label){align-items:center;color:var(--text-dark-primary);display:flex;font:var(--text-base-font-bold);padding:0 12px}:where([data-cck-theme-name=frames-x] .cck-option-group--disabled .cck-option-group--label){color:var(--base-disabled);-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-option-group .cck-option){padding:0 24px}:where([data-cck-theme-name=frames-x] .cck-option-group__size--sm .cck-option-group--label){height:40px}:where([data-cck-theme-name=frames-x] .cck-option-group__size--md .cck-option-group--label){height:48px}:where([data-cck-theme-name=frames-x] .cck-option-group__size--lg .cck-option-group--label){height:56px}:where([data-cck-theme-name=frames-x] .cck-prefix){flex-grow:0}:where([data-cck-theme-name=frames-x] .cck-prefix .cck-svg-icon.cck-svg-icon--default-size){height:var(--icon-md);width:var(--icon-md)}:where([data-cck-theme-name=frames-x] .cck-radio-button){color:var(--text-dark-primary);cursor:pointer}:where([data-cck-theme-name=frames-x] .cck-radio-button.cck-radio-button--disabled){color:var(--base-disabled);cursor:default;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-radio-button.cck-radio-button--disabled .cck-radio-button__input-wrapper){background-color:var(--base-disabled);border-color:transparent;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-radio-button.cck-radio-button--disabled .cck-radio-button__label){-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-radio-button:hover .cck-radio-button__input-wrapper){box-shadow:0 0 0 3px var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-radio-button__wrapper){align-items:center;display:inline-flex;vertical-align:middle}:where([data-cck-theme-name=frames-x] .cck-radio-button__input-wrapper){align-items:center;background-color:var(--base-fill-1);border:2px solid var(--base-border);border-radius:50%;display:flex;flex-shrink:0;justify-content:center;position:relative}:where([data-cck-theme-name=frames-x] .cck-radio-button__input){cursor:inherit;height:100%;left:0;margin:0;opacity:0;padding:0;position:absolute;right:0;top:0;width:100%;z-index:1}:where([data-cck-theme-name=frames-x] .cck-radio-button__background){background-color:var(--base-surface-1);border-radius:50%;opacity:0}:where([data-cck-theme-name=frames-x] .cck-radio-button__label){white-space:nowrap}:where([data-cck-theme-name=frames-x] .cck-radio-button--checked .cck-radio-button__input-wrapper){background-color:var(--state-brand-active);border-color:var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-radio-button--checked .cck-radio-button__background){opacity:1}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--sm){font:var(--text-sm-font-medium)}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--sm .cck-radio-button__wrapper){gap:var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--sm .cck-radio-button__input-wrapper){height:22px;width:22px}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--sm .cck-radio-button__background){height:12px;width:12px}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--md){font:var(--text-base-font-medium)}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--md .cck-radio-button__wrapper){gap:var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--md .cck-radio-button__input-wrapper){height:24px;width:24px}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--md .cck-radio-button__background){height:12px;width:12px}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--lg){font:var(--text-lg-font-medium)}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--lg .cck-radio-button__wrapper){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--lg .cck-radio-button__input-wrapper){height:32px;width:32px}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--lg .cck-radio-button__background){height:16px;width:16px}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--xl){font:var(--text-xl-font-medium)}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--xl .cck-radio-button__wrapper){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--xl .cck-radio-button__input-wrapper){height:32px;width:32px}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--xl .cck-radio-button__background){height:16px;width:16px}:where([data-cck-theme-name=frames-x] .cck-radio-group){align-items:flex-start;display:flex}:where([data-cck-theme-name=frames-x] .cck-radio-group__row){flex-direction:row;gap:24px}:where([data-cck-theme-name=frames-x] .cck-radio-group__column){flex-direction:column;gap:12px}:where([data-cck-theme-name=frames-x] .cck-select){align-items:center;border-radius:var(--radi-6);color:var(--text-dark-primary);cursor:pointer;display:flex;font:var(--text-base-font-medium)}:where([data-cck-theme-name=frames-x] .cck-select:hover .cck-svg-icon){fill:var(--base-fill-5)}:where([data-cck-theme-name=frames-x] .cck-select--disabled){color:var(--base-disabled);cursor:auto;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-select__placeholder){color:var(--text-dark-tertiary)}:where([data-cck-theme-name=frames-x] .cck-select__trigger-wrapper){color:currentcolor;flex:1;overflow:hidden;padding-right:8px;text-align:start}:where([data-cck-theme-name=frames-x] .cck-select__trigger-value){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:where([data-cck-theme-name=frames-x] .cck-select__overlay .cck-overlay__backdrop){background-color:transparent}:where([data-cck-theme-name=frames-x] .cck-select__dropdown-icon-wrapper){transition:transform .3s}:where([data-cck-theme-name=frames-x] .cck-select__dropdown-icon-wrapper .cck-svg-icon){height:var(--icon-lg);width:var(--icon-lg)}:where([data-cck-theme-name=frames-x] .cck-select--opened .cck-select__dropdown-icon-wrapper){transform:rotate(180deg)}:where([data-cck-theme-name=frames-x] .cck-suffix){flex-grow:0}:where([data-cck-theme-name=frames-x] .cck-suffix .cck-svg-icon.cck-svg-icon--default-size){height:var(--icon-md);width:var(--icon-md)}:where([data-cck-theme-name=frames-x] .cck-textarea){background-color:transparent;border:none;color:var(--text-dark-primary);font:var(--text-base-font-medium);min-height:24px;min-width:100%;outline:none;padding:0;scrollbar-color:var(--base-border) transparent}:where([data-cck-theme-name=frames-x] .cck-textarea::-moz-placeholder){color:var(--text-dark-tertiary)}:where([data-cck-theme-name=frames-x] .cck-textarea::placeholder){color:var(--text-dark-tertiary)}:where([data-cck-theme-name=frames-x] .cck-textarea::-webkit-resizer){background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" viewBox="0 0 9 9" fill="none"><path d="M4 4L7.2929 0.707105C7.92286 0.0771402 9 0.523309 9 1.41421V6C9 7.65685 7.65685 9 6 9H1.41421C0.523309 9 0.077142 7.92286 0.707107 7.29289L4 4Z" fill="%23A1A1AA"/></svg>');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){opacity:1}
\ No newline at end of file
diff --git a/packages/react/components/package.json b/packages/react/components/package.json
index 62f17fb6..5d8146fc 100644
--- a/packages/react/components/package.json
+++ b/packages/react/components/package.json
@@ -19,7 +19,8 @@
     "@cocokits/react-cdk": "workspace:*",
     "@cocokits/react-tabs-old": "workspace:*",
     "@cocokits/react-avatar": "workspace:*",
-    "@cocokits/react-accordion": "workspace:*"
+    "@cocokits/react-accordion": "workspace:*",
+    "@cocokits/react-tabs": "workspace:*"
   },
   "exports": {
     ".": {
diff --git a/packages/react/tabs/.eslintrc.json b/packages/react/tabs/.eslintrc.json
new file mode 100644
index 00000000..25dad472
--- /dev/null
+++ b/packages/react/tabs/.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/tabs/LICENSE b/packages/react/tabs/LICENSE
new file mode 100644
index 00000000..637feac8
--- /dev/null
+++ b/packages/react/tabs/LICENSE
@@ -0,0 +1,9 @@
+Copyright 2025 Milad Faghihi, Cocokits
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and limitations under the License.
diff --git a/packages/react/tabs/README.md b/packages/react/tabs/README.md
new file mode 100644
index 00000000..1631dcbd
--- /dev/null
+++ b/packages/react/tabs/README.md
@@ -0,0 +1,3 @@
+# tabs
+
+## TODO: Write a good description
diff --git a/packages/react/tabs/package.json b/packages/react/tabs/package.json
new file mode 100644
index 00000000..c1e9e7a3
--- /dev/null
+++ b/packages/react/tabs/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "@cocokits/react-tabs",
+  "version": "0.0.0",
+  "private": false,
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "dependencies": {
+    "@cocokits/react-core": "workspace:*",
+    "@cocokits/core": "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/tabs",
+    "access": "public"
+  }
+}
diff --git a/packages/react/tabs/project.json b/packages/react/tabs/project.json
new file mode 100644
index 00000000..6bbe8555
--- /dev/null
+++ b/packages/react/tabs/project.json
@@ -0,0 +1,16 @@
+{
+  "name": "@cocokits/react-tabs",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/react/tabs/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/tabs"]
+    },
+    "quick-fix-eslint": {
+      "executor": "@nx/eslint:lint"
+    }
+  }
+}
diff --git a/packages/react/tabs/src/index.ts b/packages/react/tabs/src/index.ts
new file mode 100644
index 00000000..749556b2
--- /dev/null
+++ b/packages/react/tabs/src/index.ts
@@ -0,0 +1,3 @@
+export * from './lib/tabs/tabs';
+
+export * from './lib/tab/tab';
diff --git a/packages/react/tabs/src/lib/tab/tab.tsx b/packages/react/tabs/src/lib/tab/tab.tsx
new file mode 100644
index 00000000..f9650857
--- /dev/null
+++ b/packages/react/tabs/src/lib/tab/tab.tsx
@@ -0,0 +1,39 @@
+import { CSSProperties, ReactNode } from 'react';
+
+import { UIBaseComponentProps } from '@cocokits/core';
+import { useUiBaseComponentConfig } from '@cocokits/react-core';
+
+export interface TabProps extends UIBaseComponentProps {
+  /**
+   * *************** TODO *************
+   * The content inside the component.
+   * This can be a string, a number, an element, or an array of elements.
+   * It allows rendering nested components within this component.
+   */
+  children?: ReactNode | ReactNode[];
+  /**
+   * A custom class name that can be used to apply additional styles to the component.
+   */
+  className?: string;
+  /**
+   * An object containing inline styles that can be used to customize the appearance of the component.
+   */
+  style?: CSSProperties;
+}
+
+export const Tab = (props: TabProps) => {
+  const { classNames, hostClassNames } = useUiBaseComponentConfig({
+    componentName: 'tab',
+    props,
+    extraHostElementClassConditions: [{ if: !!props.className, classes: () => [props.className] }],
+  });
+
+  return (
+    <div className={hostClassNames} style={props.style}>
+      {props.children}
+    </div>
+  );
+};
+
+Tab.displayName = 'Tab';
+export default Tab;
diff --git a/packages/react/tabs/src/lib/tabs/tabs.tsx b/packages/react/tabs/src/lib/tabs/tabs.tsx
new file mode 100644
index 00000000..53c50dda
--- /dev/null
+++ b/packages/react/tabs/src/lib/tabs/tabs.tsx
@@ -0,0 +1,39 @@
+import { CSSProperties, ReactNode } from 'react';
+
+import { UIBaseComponentProps } from '@cocokits/core';
+import { useUiBaseComponentConfig } from '@cocokits/react-core';
+
+export interface TabsProps extends UIBaseComponentProps {
+  /**
+   * *************** TODO *************
+   * The content inside the component.
+   * This can be a string, a number, an element, or an array of elements.
+   * It allows rendering nested components within this component.
+   */
+  children?: ReactNode | ReactNode[];
+  /**
+   * A custom class name that can be used to apply additional styles to the component.
+   */
+  className?: string;
+  /**
+   * An object containing inline styles that can be used to customize the appearance of the component.
+   */
+  style?: CSSProperties;
+}
+
+export const Tabs = (props: TabsProps) => {
+  const { classNames, hostClassNames } = useUiBaseComponentConfig({
+    componentName: 'tabs',
+    props,
+    extraHostElementClassConditions: [{ if: !!props.className, classes: () => [props.className] }],
+  });
+
+  return (
+    <div className={hostClassNames} style={props.style}>
+      {props.children}
+    </div>
+  );
+};
+
+Tabs.displayName = 'Tabs';
+export default Tabs;
diff --git a/packages/react/tabs/tsconfig.json b/packages/react/tabs/tsconfig.json
new file mode 100644
index 00000000..89f8ac08
--- /dev/null
+++ b/packages/react/tabs/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/tabs/tsconfig.lib.json b/packages/react/tabs/tsconfig.lib.json
new file mode 100644
index 00000000..02faf5d1
--- /dev/null
+++ b/packages/react/tabs/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/tabs/vite.config.ts b/packages/react/tabs/vite.config.ts
new file mode 100644
index 00000000..0cf27993
--- /dev/null
+++ b/packages/react/tabs/vite.config.ts
@@ -0,0 +1,60 @@
+/// <reference types='vitest' />
+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/tabs',
+  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/tabs' }],
+      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/tabs',
+    emptyOutDir: true,
+    reportCompressedSize: true,
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+    lib: {
+      // Could also be a dictionary or array of multiple entry points.
+      entry: 'src/index.ts',
+      name: 'tabs',
+      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/themes/cocokits/src/lib/theme-config.ts b/packages/themes/cocokits/src/lib/theme-config.ts
index 081944b4..de63300a 100644
--- a/packages/themes/cocokits/src/lib/theme-config.ts
+++ b/packages/themes/cocokits/src/lib/theme-config.ts
@@ -343,6 +343,8 @@ const components: ThemeComponentConfigRecord = {
   },
   accordionHeader: {},
   accordionPanel: {},
+  tabs: {},
+  tab: {},
 };
 
 export const cocokitsThemeConfig: ThemeConfig = {
diff --git a/packages/themes/cocokits/src/styles/scss/_all.scss b/packages/themes/cocokits/src/styles/scss/_all.scss
index 9d657d99..63ab9784 100644
--- a/packages/themes/cocokits/src/styles/scss/_all.scss
+++ b/packages/themes/cocokits/src/styles/scss/_all.scss
@@ -31,6 +31,8 @@
 @use './accordion' as *;
 @use './accordion-header' as *;
 @use './accordion-panel' as *;
+@use './tabs' as *;
+@use './tab' as *;
 
 @mixin all {
   @include button;
@@ -66,4 +68,6 @@
   @include accordion;
   @include accordion-header;
   @include accordion-panel;
+  @include tabs;
+  @include tab;
 }
diff --git a/packages/themes/cocokits/src/styles/scss/_index.scss b/packages/themes/cocokits/src/styles/scss/_index.scss
index 3ce996d9..eda86477 100644
--- a/packages/themes/cocokits/src/styles/scss/_index.scss
+++ b/packages/themes/cocokits/src/styles/scss/_index.scss
@@ -32,3 +32,5 @@
 @forward './accordion' as components_*;
 @forward './accordion-header' as components_*;
 @forward './accordion-panel' as components_*;
+@forward './tabs' as components_*;
+@forward './tab' as components_*;
diff --git a/packages/themes/cocokits/src/styles/scss/_tab.scss b/packages/themes/cocokits/src/styles/scss/_tab.scss
new file mode 100644
index 00000000..f9ce1a24
--- /dev/null
+++ b/packages/themes/cocokits/src/styles/scss/_tab.scss
@@ -0,0 +1,7 @@
+@use '../../token/scss' as *;
+
+@mixin tab {
+  .cck-tab {
+    opacity: 1;
+  }
+}
diff --git a/packages/themes/cocokits/src/styles/scss/_tabs.scss b/packages/themes/cocokits/src/styles/scss/_tabs.scss
new file mode 100644
index 00000000..723aba8c
--- /dev/null
+++ b/packages/themes/cocokits/src/styles/scss/_tabs.scss
@@ -0,0 +1,7 @@
+@use '../../token/scss' as *;
+
+@mixin tabs {
+  .cck-tabs {
+    opacity: 1;
+  }
+}
diff --git a/packages/themes/frames-x/src/lib/theme-config.ts b/packages/themes/frames-x/src/lib/theme-config.ts
index 31890883..7fe16647 100644
--- a/packages/themes/frames-x/src/lib/theme-config.ts
+++ b/packages/themes/frames-x/src/lib/theme-config.ts
@@ -259,6 +259,8 @@ const components: ThemeComponentConfigRecord = {
   },
   accordionHeader: {},
   accordionPanel: {},
+  tabs: {},
+  tab: {},
 };
 
 export const framesXThemeConfig: ThemeConfig = {
diff --git a/packages/themes/frames-x/src/styles/scss/_all.scss b/packages/themes/frames-x/src/styles/scss/_all.scss
index 9d657d99..63ab9784 100644
--- a/packages/themes/frames-x/src/styles/scss/_all.scss
+++ b/packages/themes/frames-x/src/styles/scss/_all.scss
@@ -31,6 +31,8 @@
 @use './accordion' as *;
 @use './accordion-header' as *;
 @use './accordion-panel' as *;
+@use './tabs' as *;
+@use './tab' as *;
 
 @mixin all {
   @include button;
@@ -66,4 +68,6 @@
   @include accordion;
   @include accordion-header;
   @include accordion-panel;
+  @include tabs;
+  @include tab;
 }
diff --git a/packages/themes/frames-x/src/styles/scss/_index.scss b/packages/themes/frames-x/src/styles/scss/_index.scss
index 3ce996d9..eda86477 100644
--- a/packages/themes/frames-x/src/styles/scss/_index.scss
+++ b/packages/themes/frames-x/src/styles/scss/_index.scss
@@ -32,3 +32,5 @@
 @forward './accordion' as components_*;
 @forward './accordion-header' as components_*;
 @forward './accordion-panel' as components_*;
+@forward './tabs' as components_*;
+@forward './tab' as components_*;
diff --git a/packages/themes/frames-x/src/styles/scss/_tab.scss b/packages/themes/frames-x/src/styles/scss/_tab.scss
new file mode 100644
index 00000000..f9ce1a24
--- /dev/null
+++ b/packages/themes/frames-x/src/styles/scss/_tab.scss
@@ -0,0 +1,7 @@
+@use '../../token/scss' as *;
+
+@mixin tab {
+  .cck-tab {
+    opacity: 1;
+  }
+}
diff --git a/packages/themes/frames-x/src/styles/scss/_tabs.scss b/packages/themes/frames-x/src/styles/scss/_tabs.scss
new file mode 100644
index 00000000..723aba8c
--- /dev/null
+++ b/packages/themes/frames-x/src/styles/scss/_tabs.scss
@@ -0,0 +1,7 @@
+@use '../../token/scss' as *;
+
+@mixin tabs {
+  .cck-tabs {
+    opacity: 1;
+  }
+}
diff --git a/tools/workspace-plugin/src/generators/ui-core-component/schema.json b/tools/workspace-plugin/src/generators/ui-core-component/schema.json
index 7be5fcee..baccf3f0 100644
--- a/tools/workspace-plugin/src/generators/ui-core-component/schema.json
+++ b/tools/workspace-plugin/src/generators/ui-core-component/schema.json
@@ -22,7 +22,8 @@
         "Overlay",
         "Radio",
         "Toggle",
-        "Accordion"
+        "Accordion",
+        "Tabs"
       ]
     },
     "newLibraryName": {
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 98a45720..5a155090 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -33,6 +33,7 @@
       "@cocokits/angular-menu": ["packages/angular/menu/src/index.ts"],
       "@cocokits/angular-overlay": ["packages/angular/overlay/src/index.ts"],
       "@cocokits/angular-radio": ["packages/angular/radio/src/index.ts"],
+      "@cocokits/angular-tabs": ["packages/angular/tabs/src/index.ts"],
       "@cocokits/angular-toggle": ["packages/angular/toggle/src/index.ts"],
       "@cocokits/angular-utils": ["packages/angular/utils/src/index.ts"],
       "@cocokits/common-icons": ["packages/common/icons/src/index.ts"],
@@ -52,6 +53,7 @@
       "@cocokits/react-menu": ["packages/react/menu/src/index.ts"],
       "@cocokits/react-overlay": ["packages/react/overlay/src/index.ts"],
       "@cocokits/react-radio": ["packages/react/radio/src/index.ts"],
+      "@cocokits/react-tabs": ["packages/react/tabs/src/index.ts"],
       "@cocokits/react-tabs-old": ["packages/react/tabs-old/src/index.ts"],
       "@cocokits/react-toggle": ["packages/react/toggle/src/index.ts"],
       "@cocokits/react-utils": ["packages/react/utils/src/index.ts"],
diff --git a/tsconfig.storybook-manager-paths.json b/tsconfig.storybook-manager-paths.json
index ce98e9df..e7e02b00 100644
--- a/tsconfig.storybook-manager-paths.json
+++ b/tsconfig.storybook-manager-paths.json
@@ -247,6 +247,18 @@
         "../packages/react/accordion/src/",
         "../../packages/react/accordion/src/",
         "../../../packages/react/accordion/src/"
+      ],
+      "@cocokits/angular-tabs": [
+        "packages/angular/tabs/src/",
+        "../packages/angular/tabs/src/",
+        "../../packages/angular/tabs/src/",
+        "../../../packages/angular/tabs/src/"
+      ],
+      "@cocokits/react-tabs": [
+        "packages/react/tabs/src/",
+        "../packages/react/tabs/src/",
+        "../../packages/react/tabs/src/",
+        "../../../packages/react/tabs/src/"
       ]
     }
   }

From 1cd9b178aca96f0e821f5cbe2d33cbd79f731670 Mon Sep 17 00:00:00 2001
From: Milad Faghihi <miladfm@gmail.com>
Date: Thu, 19 Jun 2025 23:59:28 +0200
Subject: [PATCH 4/8] fix(workspace-plugin): fix syntax of new react component

---
 .../react-component/__fileName__.tsx.template | 23 +++++++++----------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/tools/workspace-plugin/src/generators/component/files/react-component/__fileName__.tsx.template b/tools/workspace-plugin/src/generators/component/files/react-component/__fileName__.tsx.template
index e018f44e..93ca7770 100644
--- a/tools/workspace-plugin/src/generators/component/files/react-component/__fileName__.tsx.template
+++ b/tools/workspace-plugin/src/generators/component/files/react-component/__fileName__.tsx.template
@@ -22,19 +22,18 @@ export interface <%= className %>Props extends UIBaseComponentProps {
 }
 
 export const <%= className %> = (props: <%= className %>Props) => {
-    const { classNames, hostClassNames } = useUiBaseComponentConfig({
-      componentName: "<%= propertyName %>",
-      props,
-      extraHostElementClassConditions: [{ if: !!props.className, classes: () => [className] }],
-    });
+  const { classNames, hostClassNames } = useUiBaseComponentConfig({
+    componentName: "<%= propertyName %>",
+    props,
+    extraHostElementClassConditions: [{ if: !!props.className, classes: () => [props.className] }],
+  });
 
-    return (
-      <div className={hostClassNames} style={props.style}>
-        {children}
-      </div>
-    );
-  }
-);
+  return (
+    <div className={hostClassNames} style={props.style}>
+      {props.children}
+    </div>
+  );
+}
 
 <%= className %>.displayName = '<%= className %>';
 export default <%= className %>;

From 248f3f0e869c6fbb3c4f33978de4e7a6430084c5 Mon Sep 17 00:00:00 2001
From: Milad Faghihi <miladfm@gmail.com>
Date: Mon, 7 Jul 2025 21:31:48 +0200
Subject: [PATCH 5/8] feat(tabs): add tabs component with stories and remove
 the old tab library

---
 .../ui-components/tabs/tabs/description.md    |  22 +-
 .../ui-components/tabs/tabs/index.stories.ts  |  36 +++-
 .../tabs/tabs/overview/color.stories.ts       |  15 +-
 .../tabs/tabs/overview/control.stories.ts     | 198 ++++++++++++++++++
 .../tabs/overview/custom-header.stories.ts    | 107 ++++++++++
 .../tabs/tabs/overview/default.stories.ts     |  32 ++-
 .../tabs/tabs/overview/disabled.stories.ts    |  48 +++++
 .../tabs/tabs/overview/size.stories.ts        |  15 +-
 .../tabs/tabs/overview/type.stories.ts        |  17 +-
 .../ui-components/tabs/tabs/description.md    |  22 +-
 .../ui-components/tabs/tabs/index.stories.tsx |  18 +-
 .../tabs/tabs/overview/color.stories.tsx      |  23 +-
 .../tabs/tabs/overview/control.stories.tsx    | 154 ++++++++++++++
 .../tabs/overview/custom-header.stories.tsx   |  97 +++++++++
 .../tabs/tabs/overview/default.stories.tsx    |  41 +++-
 .../tabs/tabs/overview/disabled.stories.tsx   |  51 +++++
 .../tabs/tabs/overview/size.stories.tsx       |  24 ++-
 .../tabs/tabs/overview/type.stories.tsx       |  23 +-
 .../stories/utils/feature-store.mdx           | 127 +++++++++++
 .../home/ui-components/ui-components.tsx      |  18 +-
 packages/angular/accordion/README.md          |   2 +-
 .../form-field/src/lib/form-field.store.ts    |   3 +-
 packages/angular/tabs/README.md               |  67 +++++-
 packages/angular/tabs/src/index.ts            |   3 +-
 .../src/lib/tab/tab-header.tmpl-directive.ts  |  15 ++
 .../tabs/src/lib/tab/tab.component.html       |  23 +-
 .../angular/tabs/src/lib/tab/tab.component.ts |  77 ++++++-
 .../tabs/src/lib/tabs.feature-store.ts        |  14 ++
 packages/angular/tabs/src/lib/tabs.model.ts   |   6 +
 .../tabs/src/lib/tabs/tabs.component.html     |  14 +-
 .../tabs/src/lib/tabs/tabs.component.ts       | 168 ++++++++++++++-
 packages/common/core/src/index.ts             |   1 -
 .../src/lib/class-names/tab-class-names.ts    |  42 +++-
 .../src/lib/class-names/tabs-class-names.ts   |  42 +++-
 .../core/src/lib/model/theme-config.model.ts  |   3 +-
 packages/common/utils/src/index.ts            |   2 +
 .../src/lib/animation/animation-store.ts      |   6 +-
 .../src/lib/model/common.model.ts             |   2 +-
 .../common-kits-doc/stories/utils/_hidden.mdx |  32 +--
 .../stories/utils/model.common.model.mdx      | 150 +++++++++++++
 .../src/arg-type.ts                           |  33 +++
 .../src/index.ts                              |   1 +
 .../assets/styles/cck-themes-components.css   | 134 +++++++++++-
 .../styles/cck-themes-components.min.css      |   2 +-
 .../src/assets/styles/manager-styles.css      |  10 +-
 .../src/assets/styles/manager-styles.min.css  |   2 +-
 .../src/assets/styles/preview-styles.css      |  10 +-
 .../src/assets/styles/preview-styles.min.css  |   2 +-
 .../features/mdx-page/mdx-page-tab-code.tsx   |  10 +-
 .../story-control/story-control-icon.tsx      |  17 +-
 .../story-doc-page-api.model.ts               |   1 +
 .../story-doc-page/story-doc-page-api.tsx     |   8 +-
 .../story-doc-page-api.utils.ts               |   4 +-
 .../story-doc-page/story-doc-page.tsx         |  29 ++-
 .../token-dictionary/token-dictionary.tsx     |  14 +-
 .../src/lib/model/addon.model.ts              |   4 +-
 .../src/lib/utils/common.utils.ts             |   2 +-
 .../src/theme/scss/_tab-label.scss            |   5 -
 .../src/theme/scss/_tab.scss                  |   6 +
 .../src/theme/scss/_tabs.scss                 |   8 +-
 .../src/theme/theme-config.ts                 |   5 +-
 .../accordion/src/lib/accordion/accordion.tsx |   2 +-
 packages/react/components/CHANGELOG.md        |   1 -
 packages/react/components/package.json        |   1 -
 packages/react/components/src/index.ts        |   1 -
 packages/react/tabs-old/.eslintrc.json        |  11 -
 packages/react/tabs-old/CHANGELOG.md          |  13 --
 packages/react/tabs-old/LICENSE               |   9 -
 packages/react/tabs-old/README.md             |   3 -
 packages/react/tabs-old/package.json          |  29 ---
 packages/react/tabs-old/project.json          |  13 --
 packages/react/tabs-old/src/index.ts          |   4 -
 packages/react/tabs-old/src/lib/tab-label.tsx |  15 --
 packages/react/tabs-old/src/lib/tab.model.ts  |   8 -
 packages/react/tabs-old/src/lib/tab.tsx       |  77 -------
 packages/react/tabs-old/src/lib/tabs.store.ts | 137 ------------
 packages/react/tabs-old/src/lib/tabs.tsx      |  83 --------
 packages/react/tabs-old/tsconfig.json         |  17 --
 packages/react/tabs-old/tsconfig.lib.json     |  22 --
 packages/react/tabs-old/vite.config.ts        |  57 -----
 packages/react/tabs/README.md                 |  67 +++++-
 packages/react/tabs/src/index.ts              |   2 +-
 packages/react/tabs/src/lib/tab/tab.tsx       | 120 +++++++++--
 .../react/tabs/src/lib/tabs.feature-store.ts  | 134 ++++++++++++
 packages/react/tabs/src/lib/tabs.model.ts     |   6 +
 packages/react/tabs/src/lib/tabs/tabs.tsx     | 134 ++++++++++--
 packages/react/utils/src/index.ts             |   1 +
 .../react/utils/src/lib/component-store.ts    |   6 +-
 packages/react/utils/src/lib/feature-store.ts |  25 +++
 .../themes/frames-x/src/lib/theme-config.ts   |  15 +-
 .../themes/frames-x/src/styles/scss/_tab.scss | 123 ++++++++++-
 .../frames-x/src/styles/scss/_tabs.scss       |  69 +++++-
 .../selector-names/_tabs-selector-names.scss  |  21 ++
 pnpm-lock.yaml                                |   3 -
 tsconfig.base.json                            |   1 -
 tsconfig.storybook-manager-paths.json         |   6 -
 96 files changed, 2567 insertions(+), 736 deletions(-)
 create mode 100644 apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/control.stories.ts
 create mode 100644 apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/custom-header.stories.ts
 create mode 100644 apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/disabled.stories.ts
 create mode 100644 apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/control.stories.tsx
 create mode 100644 apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/custom-header.stories.tsx
 create mode 100644 apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/disabled.stories.tsx
 create mode 100644 apps/react-kits-doc/stories/utils/feature-store.mdx
 create mode 100644 packages/angular/tabs/src/lib/tab/tab-header.tmpl-directive.ts
 create mode 100644 packages/angular/tabs/src/lib/tabs.feature-store.ts
 create mode 100644 packages/angular/tabs/src/lib/tabs.model.ts
 rename packages/common/{core => utils}/src/lib/model/common.model.ts (82%)
 create mode 100644 packages/internal/common-kits-doc/stories/utils/model.common.model.mdx
 create mode 100644 packages/internal/storybook-addon-theme-angular/src/arg-type.ts
 delete mode 100644 packages/react/tabs-old/.eslintrc.json
 delete mode 100644 packages/react/tabs-old/CHANGELOG.md
 delete mode 100644 packages/react/tabs-old/LICENSE
 delete mode 100644 packages/react/tabs-old/README.md
 delete mode 100644 packages/react/tabs-old/package.json
 delete mode 100644 packages/react/tabs-old/project.json
 delete mode 100644 packages/react/tabs-old/src/index.ts
 delete mode 100644 packages/react/tabs-old/src/lib/tab-label.tsx
 delete mode 100644 packages/react/tabs-old/src/lib/tab.model.ts
 delete mode 100644 packages/react/tabs-old/src/lib/tab.tsx
 delete mode 100644 packages/react/tabs-old/src/lib/tabs.store.ts
 delete mode 100644 packages/react/tabs-old/src/lib/tabs.tsx
 delete mode 100644 packages/react/tabs-old/tsconfig.json
 delete mode 100644 packages/react/tabs-old/tsconfig.lib.json
 delete mode 100644 packages/react/tabs-old/vite.config.ts
 create mode 100644 packages/react/tabs/src/lib/tabs.feature-store.ts
 create mode 100644 packages/react/tabs/src/lib/tabs.model.ts
 create mode 100644 packages/react/utils/src/lib/feature-store.ts
 create mode 100644 packages/themes/frames-x/src/styles/scss/selector-names/_tabs-selector-names.scss

diff --git a/apps/angular-kits-doc/stories/ui-components/tabs/tabs/description.md b/apps/angular-kits-doc/stories/ui-components/tabs/tabs/description.md
index 216ee58b..b2ff6393 100644
--- a/apps/angular-kits-doc/stories/ui-components/tabs/tabs/description.md
+++ b/apps/angular-kits-doc/stories/ui-components/tabs/tabs/description.md
@@ -1 +1,21 @@
-TODO: ...
+The `tabs` component form `@cocokits` provides a flexible tabs component for Angular applications. Designed for performance, it supports custom templates, programmatic control, and adaptive behaviors for complex UI scenarios.
+
+## features
+
+- **Custom Header Templates:**
+Fully customize tab headers using Angular templates
+
+- **Animation Control:**
+Toggle transition animations
+
+- **Disabled Tabs:**
+Disable individual tabs using [disabled] property
+
+- **Imperative Control:**
+Programmatically activate tabs
+
+- **Tab Align:**
+Configure tab headers alignment (left/right/center/stretch)
+
+- **Content Persistence:**
+Option to preserve DOM state when switching tabs
\ No newline at end of file
diff --git a/apps/angular-kits-doc/stories/ui-components/tabs/tabs/index.stories.ts b/apps/angular-kits-doc/stories/ui-components/tabs/tabs/index.stories.ts
index b0dc8aaa..14ede0c8 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
@@ -1,7 +1,12 @@
 import { applicationConfig, moduleMetadata } from '@storybook/angular';
 
-import { TabsComponent } from '@cocokits/angular-tabs';
-import { StoriesMeta, withThemeConfigProvider } from '@cocokits/storybook-addon-theme-angular';
+import { TabComponent, TabsComponent } from '@cocokits/angular-tabs';
+import {
+  ngArgType,
+  StoriesMeta,
+  withThemeConfigProvider,
+  withWrapperDecorator,
+} from '@cocokits/storybook-addon-theme-angular';
 
 import descriptionMd from './description.md';
 
@@ -9,17 +14,22 @@ export { Default } from './overview/default.stories';
 export { Type } from './overview/type.stories';
 export { Size } from './overview/size.stories';
 export { Color } from './overview/color.stories';
+export { Disabled } from './overview/disabled.stories';
+export { CustomHeader } from './overview/custom-header.stories';
+export { Control } from './overview/control.stories';
 
 const meta: StoriesMeta = {
   component: TabsComponent,
   title: 'UI Components/Tabs',
   tags: ['status:new'],
+  subcomponents: [TabComponent],
   decorators: [
+    withWrapperDecorator({ insideBox: true }, { width: '500px' }),
     applicationConfig({
       providers: [withThemeConfigProvider()],
     }),
     moduleMetadata({
-      imports: [],
+      imports: [TabComponent],
     }),
   ],
   parameters: {
@@ -30,7 +40,27 @@ const meta: StoriesMeta = {
     },
     cckAddon: {
       componentName: 'tabs',
+      subcomponents: {
+        TabComponent: {
+          name: 'tab',
+          description: 'The Tab component represents a single tab within the Tabs component.',
+          argsTypes: {
+            ...ngArgType({ name: 'disabled', type: 'boolean', defaultValue: 'false' }),
+            ...ngArgType({ name: 'header', type: 'string', defaultValue: '' }),
+            ...ngArgType({ name: 'value', type: 'TValue', defaultValue: '' }),
+          },
+        },
+      },
     },
   },
+  argTypes: {
+    ...ngArgType({ name: 'change', category: 'outputs', type: 'TabSelectionChangeEvent' }),
+    ...ngArgType({ name: 'selectedChange', type: 'TValue' }),
+    ...ngArgType({ name: 'selectedIndexChange', type: 'number' }),
+    ...ngArgType({ name: 'headerAlign', type: `left | center | right | stretch`, defaultValue: 'left' }),
+    ...ngArgType({ name: 'hideContent', type: `boolean`, defaultValue: 'false' }),
+    ...ngArgType({ name: 'instantAnimation', type: `boolean`, defaultValue: 'false' }),
+    ...ngArgType({ name: 'selectedIndex', defaultValue: '0' }),
+  },
 };
 export default meta;
diff --git a/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/color.stories.ts b/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/color.stories.ts
index dd803a91..2261c2e5 100644
--- a/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/color.stories.ts
+++ b/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/color.stories.ts
@@ -19,10 +19,17 @@ export const Color: StoryObj<TabsComponent> = {
           language: 'angular-html',
           code: `
           <% themeComponentConfig.color.values.map(color => { %>
+
+            <!------------ <%= color %> ------------>
             <cck-tabs
               <% if (typeof type !== 'undefined') { %> type='<%= type %>' <% } %>
               color='<%= color %>'
-            />
+              [hideContent]="true"
+            >
+              <cck-tab header="Header 1"/>
+              <cck-tab header="Header 2"/>
+              <cck-tab header="Header 3"/>
+            </cck-tabs>
           <% }) %>
           `,
         },
@@ -36,7 +43,11 @@ export const Color: StoryObj<TabsComponent> = {
     },
     template: `
       @for (color of cckControl.themeComponentConfig.color.values; let col = $index; track color) {
-        <cck-tabs [type]="cckControl.type" [color]="color"/>
+        <cck-tabs [type]="cckControl.type" [color]="color" [hideContent]="true">
+          <cck-tab header="Header 1"/>
+            <cck-tab header="Header 2"/>
+            <cck-tab header="Header 3"/>
+        </cck-tabs>
       }
     `,
   }),
diff --git a/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/control.stories.ts b/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/control.stories.ts
new file mode 100644
index 00000000..cdfaf318
--- /dev/null
+++ b/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/control.stories.ts
@@ -0,0 +1,198 @@
+import { Component, input, model } from '@angular/core';
+
+import { moduleMetadata } from '@storybook/angular';
+
+import { TabComponent, TabsComponent } from '@cocokits/angular-tabs';
+import { CCK_CONTROL, renderWithPageTab } from '@cocokits/storybook-addon-theme';
+import { StoryObj } from '@cocokits/storybook-addon-theme-angular';
+
+@Component({
+  selector: 'cck-tabs-control',
+  standalone: true,
+  imports: [TabsComponent, TabComponent],
+  styles: [
+    `
+      hr {
+        width: 100%;
+        margin: 12px 0;
+      }
+    `,
+  ],
+  template: `
+    <div class="cck-doc-story__radio-selection-group">
+      <div
+        class="cck-doc-story__radio-selection"
+        [class.cck-doc-story__radio-selection--selected]="selected() === 1"
+        (click)="selected.set(1)">
+        1
+      </div>
+      <div
+        class="cck-doc-story__radio-selection"
+        [class.cck-doc-story__radio-selection--selected]="selected() === 2"
+        (click)="selected.set(2)">
+        2
+      </div>
+      <div
+        class="cck-doc-story__radio-selection"
+        [class.cck-doc-story__radio-selection--selected]="selected() === 3"
+        (click)="selected.set(3)">
+        3
+      </div>
+    </div>
+
+    <hr />
+
+    <cck-tabs [type]="type()" [(selected)]="selected" [hideContent]="true">
+      <cck-tab header="Header 1" [value]="1" />
+      <cck-tab header="Header 2" [value]="2" />
+      <cck-tab header="Header 3" [value]="3" />
+    </cck-tabs>
+  `,
+})
+export class StoryTabsControlComponent {
+  type = input.required<string>();
+  selected = model(1);
+}
+
+export const Control: StoryObj<TabsComponent> = {
+  name: 'Control',
+  decorators: [
+    moduleMetadata({
+      imports: [StoryTabsControlComponent],
+    }),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        story: 'Tabs can be controlled programmatically.',
+      },
+    },
+    cckAddon: {
+      renderConditions: [renderWithPageTab('Overview')],
+      source: [
+        {
+          filename: 'example.component.html',
+          language: 'angular-html',
+          code: `
+            <div class="cck-doc-story__radio-selection-group">
+            <div
+              class="cck-doc-story__radio-selection"
+              [class.cck-doc-story__radio-selection--selected]="selected() === 1"
+              (click)="selected.set(1)">
+              1
+            </div>
+            <div
+              class="cck-doc-story__radio-selection"
+              [class.cck-doc-story__radio-selection--selected]="selected() === 2"
+              (click)="selected.set(2)">
+              2
+            </div>
+            <div
+              class="cck-doc-story__radio-selection"
+              [class.cck-doc-story__radio-selection--selected]="selected() === 3"
+              (click)="selected.set(3)">
+              3
+            </div>
+          </div>
+
+          <hr />
+
+          <cck-tabs type="<%= type %>" [(selected)]="selected" [hideContent]="true">
+            <cck-tab header="Header 1" [value]="1"/>
+            <cck-tab header="Header 2" [value]="2"/>
+            <cck-tab header="Header 3" [value]="3"/>
+          </cck-tabs>
+          `,
+        },
+        {
+          filename: 'example.component.ts',
+          language: 'angular-ts',
+          code: `
+            @Component({
+              selector: 'cck-tabs-control',
+              standalone: true,
+              imports: [TabsComponent, TabComponent],
+              stylesUrls: ['./example.component.scss'],
+              templateUrl: './example.component.html',
+            })
+            export class StoryTabsControlComponent {
+              selected = signal(1);
+            }
+          `,
+        },
+        {
+          filename: 'example.component.scss',
+          language: 'scss',
+          code: `
+            // Warning: The styles below are optimized for dark mode.
+
+            .cck-doc-story__radio-selection-group {
+              display: flex;
+              justify-content: center;
+              gap: 8px;
+            }
+
+            .cck-doc-story__radio-selection {
+              width: 32px;
+              height: 32px;
+              border: 1px solid var(--cck-doc-color-border-3, #ffffff33);
+              border-radius: 50%;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              color: var(--cck-doc-color-font-1, #fff);
+              font: var(--cck-doc-text-sm-light, 300 14px/24px Inter);
+              cursor: pointer;
+              user-select: none;
+            }
+
+            .cck-doc-story__radio-selection--selected {
+              background-color: var(--cck-doc-color-bg-selected-2, #14513c);
+            }
+
+            .cck-doc-story__button--basic {
+              padding: 0 16px 0 16px;
+              background-color: transparent;
+              color: var(--cck-doc-color-font-1, #fff);
+              gap: 8px;
+              height: 40px;
+              align-items: center;
+              border: none;
+              border-radius: var(--cck-doc-radius-sm, 4px);
+              box-sizing: border-box;
+              cursor: pointer;
+              display: flex;
+              font: var(--cck-doc-text-sm-medium, 500 14px/24px Inter);
+              justify-content: center;
+              margin: 0;
+              min-width: 80px;
+              outline: transparent;
+
+              &:hover {
+                background-color: var(--cck-doc-color-bg-hover-2, #15171e);
+              }
+
+              hr {
+                width: 100%;
+                margin: 12px 0;
+              }
+          }
+          `,
+        },
+      ],
+      singleControls: ['type'],
+      hasControl: false,
+      controls: [CCK_CONTROL.type()],
+    },
+  },
+  render: (args) => {
+    return {
+      props: {
+        ...args,
+      },
+      template: `
+        <cck-tabs-control [type]="cckControl.type"/>
+      `,
+    };
+  },
+};
diff --git a/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/custom-header.stories.ts b/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/custom-header.stories.ts
new file mode 100644
index 00000000..32f8d42b
--- /dev/null
+++ b/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/custom-header.stories.ts
@@ -0,0 +1,107 @@
+import { moduleMetadata } from '@storybook/angular';
+
+import { SvgIconComponent } from '@cocokits/angular-icon';
+import { TabHeaderTemplateDirective, TabsComponent } from '@cocokits/angular-tabs';
+import { CCK_CONTROL, renderWithPageTab } from '@cocokits/storybook-addon-theme';
+import { StoryObj } from '@cocokits/storybook-addon-theme-angular';
+
+export const CustomHeader: StoryObj<TabsComponent> = {
+  name: 'CustomHeader',
+  decorators: [
+    moduleMetadata({
+      imports: [TabHeaderTemplateDirective, SvgIconComponent],
+    }),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        story: 'Custom headers allow for personalized tab headers, enhancing user experience and branding.',
+      },
+    },
+    cckAddon: {
+      renderConditions: [renderWithPageTab('Overview')],
+      singleControls: ['type'],
+      source: [
+        {
+          filename: 'example.component.html',
+          language: 'angular-html',
+          code: `
+            <cck-tabs
+             <% if (typeof type !== 'undefined') { %> type='<%= type %>'<% } %>
+            >
+              <cck-tab [hideContent]="true">
+                <ng-template cckTabHeader>
+                  <div class="header">
+                    <cck-svg-icon [icon]="Icons.diamonds"/>
+                    <span>Dashboard</span>
+                  </div>
+                </ng-template>
+              </cck-tab>
+              <cck-tab>
+                <ng-template cckTabHeader>
+                  <div class="header">
+                    <cck-svg-icon [icon]="Icons.tools"/>
+                    <span>Tools</span>
+                  </div>
+                </ng-template>
+              </cck-tab>
+              <cck-tab>
+                <ng-template cckTabHeader>
+                  <div class="header">
+                    <cck-svg-icon [icon]="Icons.setting"/>
+                    <span>Setting</span>
+                  </div>
+                </ng-template>
+              </cck-tab>
+            </cck-tabs>
+          `,
+        },
+        {
+          filename: 'example.component.scss',
+          language: 'scss',
+          code: `
+            .header {
+              display: flex;
+              gap: 4px;
+              align-items: center;
+            }
+          `,
+        },
+      ],
+      controls: [CCK_CONTROL.type()],
+    },
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <cck-tabs [type]="cckControl.type" [size]="size" [hideContent]="true">
+        <cck-tab>
+          <ng-template cckTabHeader>
+            <div style="display: flex; gap: 4px;">
+              <cck-svg-icon [icon]="cckIcons.diamonds"/>
+              <span>Dashboard</span>
+            </div>
+          </ng-template>
+        </cck-tab>
+        <cck-tab>
+          <ng-template cckTabHeader>
+            <div style="display: flex; gap: 4px;">
+              <cck-svg-icon [icon]="cckIcons.tools"/>
+              <span>Tools</span>
+            </div>
+          </ng-template>
+        </cck-tab>
+        <cck-tab>
+          <ng-template cckTabHeader>
+            <div style="display: flex; gap: 4px;">
+              <cck-svg-icon [icon]="cckIcons.setting"/>
+              <span>Setting</span>
+            </div>
+          </ng-template>
+        </cck-tab>
+      </cck-tabs>
+    `,
+  }),
+};
diff --git a/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/default.stories.ts b/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/default.stories.ts
index be6a93b4..663e4457 100644
--- a/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/default.stories.ts
+++ b/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/default.stories.ts
@@ -22,13 +22,31 @@ export const Default: StoryObj<TabsComponent> = {
             <% if (typeof type !== 'undefined') { %> type='<%= type %>' <% } %>
             <% if (typeof size !== 'undefined') { %> size='<%= size %>' <% } %>
             <% if (typeof color !== 'undefined') { %> color='<%= color %>' <% } %>
+            headerAlign='<%= align %>'
+            <% if (instantAnimation) { %> [instantAnimation]="<%= instantAnimation %>" <% } %>
+            <% if (hideContent) { %> [hideContent]="<%= hideContent %>" <% } %>
           >
+            <% for (let i = 0; i < length; i++) { %>
+              <cck-tab header="Header <%= i + 1 %>" <% if (i === 2) { %> disabled <% } %>>
+                <h3>Header <%= i + 1 %></h3>
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+              </cck-tab>
+            <% } %>
           </cck-tabs>
           `,
         },
       ],
       hasControl: true,
-      controls: [CCK_CONTROL.type(), CCK_CONTROL.size(), CCK_CONTROL.color(), CCK_CONTROL.additional()],
+      controls: [
+        CCK_CONTROL.type(),
+        CCK_CONTROL.size(),
+        CCK_CONTROL.color(),
+        CCK_CONTROL.additional(),
+        CCK_CONTROL.customNumber('Length', 4),
+        CCK_CONTROL.customSelect('Align', ['left', 'center', 'right', 'stretch']),
+        CCK_CONTROL.customBoolean('Instant Animation'),
+        CCK_CONTROL.customBoolean('Hide Content'),
+      ],
     },
   },
   render: (args) => {
@@ -36,11 +54,21 @@ export const Default: StoryObj<TabsComponent> = {
       props: {
         ...args,
       },
-      // [text]="cckControl.text"
       template: `
         <cck-tabs
           ${ngThemeArgsToTemplate(args)}
+          [headerAlign]="cckControl.align"
+          [hideContent]="cckControl.hideContent"
+          [instantAnimation]="cckControl.instantAnimation"
         >
+            <cck-tab
+              *ngFor="let i of [].constructor(cckControl.length); let index = index"
+              [header]="'Header ' + (index + 1)"
+              [disabled]="index === 2"
+            >
+              <h3>Header {{ index + 1 }}</h3>
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+            </cck-tab>
         </cck-tabs>
       `,
     };
diff --git a/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/disabled.stories.ts b/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/disabled.stories.ts
new file mode 100644
index 00000000..e91aef8f
--- /dev/null
+++ b/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/disabled.stories.ts
@@ -0,0 +1,48 @@
+import { TabsComponent } from '@cocokits/angular-tabs';
+import { CCK_CONTROL, renderWithPageTab } from '@cocokits/storybook-addon-theme';
+import { StoryObj } from '@cocokits/storybook-addon-theme-angular';
+
+export const Disabled: StoryObj<TabsComponent> = {
+  name: 'Disabled',
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Disabled tabs prevent user interaction, ensuring that users cannot select or activate them, which is useful for indicating unavailable options.',
+      },
+    },
+    cckAddon: {
+      renderConditions: [renderWithPageTab('Overview')],
+      singleControls: ['type'],
+      source: [
+        {
+          filename: 'example.component.html',
+          language: 'angular-html',
+          code: `
+            <cck-tabs
+             <% if (typeof type !== 'undefined') { %> type='<%= type %>'<% } %>
+             [hideContent]="true"
+            >
+              <cck-tab header="Header 1"/>
+              <cck-tab header="Header 2" disabled/>
+              <cck-tab header="Header 3"/>
+            </cck-tabs>
+          `,
+        },
+      ],
+      controls: [CCK_CONTROL.type()],
+    },
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <cck-tabs [type]="cckControl.type" [hideContent]="true">
+        <cck-tab header="Header 1"/>
+        <cck-tab header="Header 2" disabled/>
+        <cck-tab header="Header 3"/>
+      </cck-tabs>
+    `,
+  }),
+};
diff --git a/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/size.stories.ts b/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/size.stories.ts
index b0f07d40..0fff5620 100644
--- a/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/size.stories.ts
+++ b/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/size.stories.ts
@@ -20,10 +20,17 @@ export const Size: StoryObj<TabsComponent> = {
           language: 'angular-html',
           code: `
          <% themeComponentConfig.size.values.map(size => { %>
+
+            <!------------ <%= size %> ------------>
             <cck-tabs
              <% if (typeof type !== 'undefined') { %> type='<%= type %>'<% } %>
               size='<%= size %>'
-            />
+              [hideContent]="true"
+            >
+              <cck-tab header="Header 1"/>
+              <cck-tab header="Header 2"/>
+              <cck-tab header="Header 3"/>
+            </cck-tabs>
          <% }) %>
           `,
         },
@@ -37,7 +44,11 @@ export const Size: StoryObj<TabsComponent> = {
     },
     template: `
       @for (size of cckControl.themeComponentConfig?.size?.values; let col = $index; track size) {
-        <cck-tabs [type]="cckControl.type" [size]="size"/>
+        <cck-tabs [type]="cckControl.type" [size]="size" [hideContent]="true">
+          <cck-tab header="Header 1"/>
+            <cck-tab header="Header 2"/>
+            <cck-tab header="Header 3"/>
+        </cck-tabs>
       }
     `,
   }),
diff --git a/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/type.stories.ts b/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/type.stories.ts
index 4a5eb1f4..7520ed79 100644
--- a/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/type.stories.ts
+++ b/apps/angular-kits-doc/stories/ui-components/tabs/tabs/overview/type.stories.ts
@@ -19,9 +19,14 @@ export const Type: StoryObj<TabsComponent> = {
           language: 'angular-html',
           code: `
           <% themeComponentConfig.type.values.map(type => { %>
-            <cck-tabs
-              type='<%= type %>'
-            />
+
+
+            <!------------ <%= type %> ------------>
+            <cck-tabs type='<%= type %>' [hideContent]="true">
+              <cck-tab header="Header 1"/>
+              <cck-tab header="Header 2"/>
+              <cck-tab header="Header 3"/>
+            </cck-tabs>
           <% }) %>
           `,
         },
@@ -34,7 +39,11 @@ export const Type: StoryObj<TabsComponent> = {
     },
     template: `
       @for (type of cckControl.themeComponentConfig?.type?.values; let col = $index; track type) {
-        <cck-tabs [type]="type"/>
+        <cck-tabs [type]="type" [hideContent]="true">
+          <cck-tab header="Header 1"/>
+          <cck-tab header="Header 2"/>
+          <cck-tab header="Header 3"/>
+        </cck-tabs>
       }
     `,
   }),
diff --git a/apps/react-kits-doc/stories/ui-components/tabs/tabs/description.md b/apps/react-kits-doc/stories/ui-components/tabs/tabs/description.md
index 216ee58b..7bee46d3 100644
--- a/apps/react-kits-doc/stories/ui-components/tabs/tabs/description.md
+++ b/apps/react-kits-doc/stories/ui-components/tabs/tabs/description.md
@@ -1 +1,21 @@
-TODO: ...
+The `tabs` component from `@cocokits` offers a headless tabs system for React applications with complete customization capabilities.
+
+## features
+
+- **Custom Header Templates:**
+Fully customize tab headers using Angular templates
+
+- **Animation Control:**
+Toggle transition animations
+
+- **Disabled Tabs:**
+Disable individual tabs using [disabled] property
+
+- **Imperative Control:**
+Programmatically activate tabs
+
+- **Tab Align:**
+Configure tab headers alignment (left/right/center/stretch)
+
+- **Content Persistence:**
+Option to preserve DOM state when switching tabs
\ No newline at end of file
diff --git a/apps/react-kits-doc/stories/ui-components/tabs/tabs/index.stories.tsx b/apps/react-kits-doc/stories/ui-components/tabs/tabs/index.stories.tsx
index bff13c05..6ff3ed95 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
@@ -1,5 +1,5 @@
-import { Tabs } from '@cocokits/react-tabs';
-import { StoriesMeta } from '@cocokits/storybook-addon-theme-react';
+import { Tab, Tabs } from '@cocokits/react-tabs';
+import { StoriesMeta, withWrapperDecorator } from '@cocokits/storybook-addon-theme-react';
 
 import descriptionMd from './description.md?raw';
 
@@ -7,12 +7,18 @@ export { Default } from './overview/default.stories';
 export { Type } from './overview/type.stories';
 export { Size } from './overview/size.stories';
 export { Color } from './overview/color.stories';
+export { Disabled } from './overview/disabled.stories';
+export { CustomHeader } from './overview/custom-header.stories';
+export { Control } from './overview/control.stories';
 
 const meta: StoriesMeta<typeof Tabs> = {
   component: Tabs,
   title: 'UI Components/Tabs',
+  subcomponents: {Tab},
   tags: ['status:new'],
-  decorators: [],
+  decorators: [
+    withWrapperDecorator({insideBox: true}, {width: '500px'}),
+  ],
   parameters: {
     docs: {
       description: {
@@ -21,6 +27,12 @@ const meta: StoriesMeta<typeof Tabs> = {
     },
     cckAddon: {
       componentName: 'tabs',
+      subcomponents: {
+        Tab: {
+          name: 'tab',
+          description: 'The Tab component represents a single tab within the Tabs component. It can be used to define the content and header of each tab.',
+        },
+      }
     },
   },
   argTypes: {},
diff --git a/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/color.stories.tsx b/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/color.stories.tsx
index 4a027e1d..00ceaf8a 100644
--- a/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/color.stories.tsx
+++ b/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/color.stories.tsx
@@ -1,4 +1,4 @@
-import { Tabs } from '@cocokits/react-tabs';
+import { Tab, Tabs } from '@cocokits/react-tabs';
 import { CCK_CONTROL, renderWithPageTab, renderWithThemeProp } from '@cocokits/storybook-addon-theme';
 import { StoryObj } from '@cocokits/storybook-addon-theme-react';
 
@@ -18,16 +18,23 @@ export const Color: StoryObj<typeof Tabs> = {
           filename: 'Source Code',
           language: 'tsx',
           code: `
-          import { Tabs } from "@cocokits/react-components";
+          import { Tabs, Tab } from "@cocokits/react-components";
 
           export const MyComponent = () => {
             return (
               <>
                 <% themeComponentConfig.color.values.map(color => { %>
+
+                  {/* ------------ <%= color %> ------------ */}
                   <Tabs
-                    <% if (typeof type !== 'undefined') { %> type='<%= type %>' <% } %>
-                    color='<%= color %>'
-                  />
+                    <% if (typeof color !== 'undefined') { %> color='<%= color %>' <% } %>
+                    type=<%= type %>
+                    hideContent={true}
+                  >
+                    <Tab header="Header 1"/>
+                    <Tab header="Header 2"/>
+                    <Tab header="Header 3"/>
+                  </Tabs>
                 <% }) %>
               </>
             );
@@ -41,7 +48,11 @@ export const Color: StoryObj<typeof Tabs> = {
   render: (args) => (
     <>
       {args.cckControl.themeComponentConfig.color?.values.map((color, index) => (
-        <Tabs key={index} type={args.cckControl.type} color={color} />
+        <Tabs key={index} color={color} type={args.cckControl.type} hideContent={true}>
+          <Tab header="Header 1" />
+          <Tab header="Header 2" />
+          <Tab header="Header 3" />
+        </Tabs>
       ))}
     </>
   ),
diff --git a/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/control.stories.tsx b/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/control.stories.tsx
new file mode 100644
index 00000000..29773e3a
--- /dev/null
+++ b/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/control.stories.tsx
@@ -0,0 +1,154 @@
+import { useState } from 'react';
+
+import { Tab, Tabs } from '@cocokits/react-tabs';
+import { CCK_CONTROL, renderWithPageTab } from '@cocokits/storybook-addon-theme';
+import { StoryObj } from '@cocokits/storybook-addon-theme-react';
+
+function TabsControl({ type }: { type: string }) {
+  const [selected, setSelected] = useState(1);
+  return (
+    <>
+      <div className="cck-doc-story__radio-selection-group">
+        <div
+          className={`cck-doc-story__radio-selection ${selected === 1 ? 'cck-doc-story__radio-selection--selected' : ''}`}
+          onClick={() => setSelected(1)}>
+          1
+        </div>
+        <div
+          className={`cck-doc-story__radio-selection ${selected === 2 ? 'cck-doc-story__radio-selection--selected' : ''}`}
+          onClick={() => setSelected(2)}>
+          2
+        </div>
+        <div
+          className={`cck-doc-story__radio-selection ${selected === 3 ? 'cck-doc-story__radio-selection--selected' : ''}`}
+          onClick={() => setSelected(3)}>
+          3
+        </div>
+      </div>
+      <hr style={{ width: '100%', margin: '0' }} />
+
+      <Tabs type={type} selected={selected} onSelectionChange={(e) => setSelected(e.value)} hideContent={true}>
+        <Tab header="Header 1" value={1} />
+        <Tab header="Header 2" value={2} />
+        <Tab header="Header 3" value={3} />
+      </Tabs>
+    </>
+  );
+}
+
+export const Control: StoryObj<typeof Tabs> = {
+  name: 'Control',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Tabs can be controlled programmatically.',
+      },
+    },
+    cckAddon: {
+      renderConditions: [renderWithPageTab('Overview')],
+      singleControls: ['type'],
+      controls: [CCK_CONTROL.type()],
+      source: [
+        {
+          filename: 'example.tsx',
+          language: 'tsx',
+          code: `
+          import { Tabs, Tab } from "@cocokits/react-components";
+
+          export const MyComponent = () => {
+            const [selected, setSelected] = useState(1);
+            return (
+              <>
+                <div className="cck-doc-story__radio-selection-group">
+                  <div
+                    className={\`cck-doc-story__radio-selection \${selected === 1 ? 'cck-doc-story__radio-selection--selected' : ''}\`}
+                    onClick={() => setSelected(1)}>
+                    1
+                  </div>
+                  <div
+                    className={\`cck-doc-story__radio-selection \${selected === 2 ? 'cck-doc-story__radio-selection--selected' : ''}\`}
+                    onClick={() => setSelected(2)}>
+                    2
+                  </div>
+                  <div
+                    className={\`cck-doc-story__radio-selection \${selected === 3 ? 'cck-doc-story__radio-selection--selected' : ''}\`}
+                    onClick={() => setSelected(3)}>
+                    3
+                  </div>
+                </div>
+                <hr />
+
+                <Tabs type="<%= type %>" selected={selected} onSelectionChange={(e) => setSelected(e.value)} hideContent={true}>
+                  <Tab header="Header 1" value={1} />
+                  <Tab header="Header 2" value={2} />
+                  <Tab header="Header 3" value={3} />
+                </Tabs>
+              </>
+            );
+          }
+          `,
+        },
+        {
+          filename: 'styles.scss',
+          language: 'scss',
+          code: `
+            // Warning: The styles below are optimized for dark mode.
+
+            .cck-doc-story__radio-selection-group {
+              display: flex;
+              justify-content: center;
+              gap: 8px;
+            }
+
+            .cck-doc-story__radio-selection {
+              width: 32px;
+              height: 32px;
+              border: 1px solid var(--cck-doc-color-border-3, #ffffff33);
+              border-radius: 50%;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              color: var(--cck-doc-color-font-1, #fff);
+              font: var(--cck-doc-text-sm-light, 300 14px/24px Inter);
+              cursor: pointer;
+              user-select: none;
+            }
+
+            .cck-doc-story__radio-selection--selected {
+              background-color: var(--cck-doc-color-bg-selected-2, #14513c);
+            }
+
+            .cck-doc-story__button--basic {
+              padding: 0 16px 0 16px;
+              background-color: transparent;
+              color: var(--cck-doc-color-font-1, #fff);
+              gap: 8px;
+              height: 40px;
+              align-items: center;
+              border: none;
+              border-radius: var(--cck-doc-radius-sm, 4px);
+              box-sizing: border-box;
+              cursor: pointer;
+              display: flex;
+              font: var(--cck-doc-text-sm-medium, 500 14px/24px Inter);
+              justify-content: center;
+              margin: 0;
+              min-width: 80px;
+              outline: transparent;
+
+              &:hover {
+                background-color: var(--cck-doc-color-bg-hover-2, #15171e);
+              }
+            }
+
+            hr {
+              width: 100%;
+              margin: 0;
+            }
+          `,
+        },
+      ],
+    },
+  },
+  render: (args) => <TabsControl type={args.cckControl.type} />,
+};
diff --git a/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/custom-header.stories.tsx b/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/custom-header.stories.tsx
new file mode 100644
index 00000000..8024b75d
--- /dev/null
+++ b/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/custom-header.stories.tsx
@@ -0,0 +1,97 @@
+import { SvgIcon } from '@cocokits/react-icon';
+import { Tab, Tabs } from '@cocokits/react-tabs';
+import { CCK_CONTROL, renderWithPageTab } from '@cocokits/storybook-addon-theme';
+import { StoryObj } from '@cocokits/storybook-addon-theme-react';
+
+export const CustomHeader: StoryObj<typeof Tabs> = {
+  name: 'CustomHeader',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Custom headers allow for personalized tab headers, enhancing user experience and branding.',
+      },
+    },
+    cckAddon: {
+      renderConditions: [renderWithPageTab('Overview')],
+      singleControls: ['type'],
+      controls: [CCK_CONTROL.type()],
+      source: [
+        {
+          filename: 'Source Code',
+          language: 'tsx',
+          code: `
+          import { Tabs, Tab } from "@cocokits/react-components";
+          import { Icons } from "@cocokits/common-icons";
+          import styled from "styled-components";
+
+          const StyledHeader = styled.div\`
+            display: flex;
+            gap: 4px;
+          \`
+
+          export const MyComponent = () => {
+            return (
+              <Tabs type="<%= type %>" hideContent={true}>
+                <Tab
+                  header={() => (
+                    <StyledHeader>
+                      <SvgIcon icon={Icons.diamonds} />
+                      <span>Dashboard</span>
+                    </StyledHeader>
+                  )}
+                />
+                <Tab
+                  header={() => (
+                    <StyledHeader>
+                      <SvgIcon icon={Icons.tools} />
+                      <span>Tools</span>
+                    </StyledHeader>
+                  )}
+                />
+                <Tab
+                  header={() => (
+                    <StyledHeader>
+                      <SvgIcon icon={Icons.setting} />
+                      <span>Setting</span>
+                    </StyledHeader>
+                  )}
+                />
+              </Tabs>
+            );
+          }
+          `,
+        },
+      ],
+    },
+  },
+  render: (args) => (
+    <>
+      <Tabs type={args.cckControl.type} hideContent={true}>
+        <Tab
+          header={() => (
+            <div style={{ display: 'flex', gap: '4px' }}>
+              <SvgIcon icon={args.cckIcons.diamonds} />
+              <span>Dashboard</span>
+            </div>
+          )}
+        />
+        <Tab
+          header={() => (
+            <div style={{ display: 'flex', gap: '4px' }}>
+              <SvgIcon icon={args.cckIcons.tools} />
+              <span>Tools</span>
+            </div>
+          )}
+        />
+        <Tab
+          header={() => (
+            <div style={{ display: 'flex', gap: '4px' }}>
+              <SvgIcon icon={args.cckIcons.setting} />
+              <span>Setting</span>
+            </div>
+          )}
+        />
+      </Tabs>
+    </>
+  ),
+};
diff --git a/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/default.stories.tsx b/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/default.stories.tsx
index 13462373..f142e59f 100644
--- a/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/default.stories.tsx
+++ b/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/default.stories.tsx
@@ -1,4 +1,4 @@
-import { Tabs } from '@cocokits/react-tabs';
+import { Tab, Tabs } from '@cocokits/react-tabs';
 import { CCK_CONTROL, renderWithPageTab } from '@cocokits/storybook-addon-theme';
 import { reactThemeArgsToTemplate, StoryObj } from '@cocokits/storybook-addon-theme-react';
 
@@ -17,7 +17,7 @@ export const Default: StoryObj<typeof Tabs> = {
           filename: 'Source Code',
           language: 'tsx',
           code: `
-          import { Tabs, SvgIcon} from '@cocokits/react-components';
+          import { Tabs, Tab } from '@cocokits/react-components';
 
           export const MyComponent = () => {
             return (
@@ -25,7 +25,16 @@ export const Default: StoryObj<typeof Tabs> = {
                 <% if (typeof type !== 'undefined') { %> type='<%= type %>' <% } %>
                 <% if (typeof size !== 'undefined') { %> size='<%= size %>' <% } %>
                 <% if (typeof color !== 'undefined') { %> color='<%= color %>' <% } %>
+                headerAlign='<%= align %>'
+                <% if (instantAnimation) { %> instantAnimation={<%= instantAnimation %>} <% } %>
+                <% if (hideContent) { %> hideContent={<%= hideContent %>} <% } %>
               >
+                <% for (let i = 0; i < length; i++) { %>
+                  <Tab header="Header <%= i + 1 %>" <% if (i === 2) { %> disabled <% } %>>
+                    <h3>Header <%= i + 1 %></h3>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                  </Tab>
+                <% } %>
               </Tabs>
             )
           }
@@ -34,10 +43,32 @@ export const Default: StoryObj<typeof Tabs> = {
       ],
       renderConditions: [renderWithPageTab('Overview')],
       hasControl: true,
-      controls: [CCK_CONTROL.type(), CCK_CONTROL.size(), CCK_CONTROL.color(), CCK_CONTROL.additional()],
+      controls: [
+        CCK_CONTROL.type(),
+        CCK_CONTROL.size(),
+        CCK_CONTROL.color(),
+        CCK_CONTROL.additional(),
+        CCK_CONTROL.customNumber('Length', 4),
+        CCK_CONTROL.customSelect('Align', ['left', 'center', 'right', 'stretch']),
+        CCK_CONTROL.customBoolean('Instant Animation'),
+        CCK_CONTROL.customBoolean('Hide Content'),
+      ],
     },
   },
   args: {},
-  // text={args.cckControl.text}
-  render: (args) => <Tabs {...reactThemeArgsToTemplate(args)}></Tabs>,
+  render: (args) => (
+    <Tabs
+      style={{width: '100%'}}
+      {...reactThemeArgsToTemplate(args)}
+      headerAlign={args.cckControl.align}
+      instantAnimation={args.cckControl.instantAnimation}
+      hideContent={args.cckControl.hideContent}>
+      {new Array(args.cckControl.length).fill(1).map((_, index) => (
+        <Tab header={'Header ' + (index + 1)} key={index} disabled={index === 2}>
+          <h3>Header {index + 1}</h3>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        </Tab>
+      ))}
+    </Tabs>
+  ),
 };
diff --git a/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/disabled.stories.tsx b/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/disabled.stories.tsx
new file mode 100644
index 00000000..a2162c00
--- /dev/null
+++ b/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/disabled.stories.tsx
@@ -0,0 +1,51 @@
+import { Tab, Tabs } from '@cocokits/react-tabs';
+import { CCK_CONTROL, renderWithPageTab } from '@cocokits/storybook-addon-theme';
+import { StoryObj } from '@cocokits/storybook-addon-theme-react';
+
+export const Disabled: StoryObj<typeof Tabs> = {
+  name: 'Disabled',
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Disabled tabs prevent user interaction, ensuring that users cannot select or activate them, which is useful for indicating unavailable options.',
+      },
+    },
+    cckAddon: {
+      renderConditions: [renderWithPageTab('Overview')],
+      singleControls: ['type'],
+      controls: [CCK_CONTROL.type()],
+      source: [
+        {
+          filename: 'Source Code',
+          language: 'tsx',
+          code: `
+          import { Tabs, Tab } from "@cocokits/react-components";
+
+          export const MyComponent = () => {
+            return (
+              <Tabs
+                <% if (typeof type !== 'undefined') { %> type='<%= type %>' <% } %>
+                hideContent={true}
+              >
+                <Tab header="Header 1"/>
+                <Tab header="Header 2"/>
+                <Tab header="Header 3"/>
+              </Tabs>
+            );
+          }
+          `,
+        },
+      ],
+    },
+  },
+  render: (args) => (
+    <>
+      <Tabs type={args.cckControl.type} hideContent={true}>
+        <Tab header="Header 1" />
+        <Tab header="Header 2" disabled/>
+        <Tab header="Header 3" />
+      </Tabs>
+    </>
+  ),
+};
diff --git a/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/size.stories.tsx b/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/size.stories.tsx
index a4ecfbb1..c6ab6b5b 100644
--- a/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/size.stories.tsx
+++ b/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/size.stories.tsx
@@ -1,4 +1,4 @@
-import { Tabs } from '@cocokits/react-tabs';
+import { Tab, Tabs } from '@cocokits/react-tabs';
 import { CCK_CONTROL, renderWithPageTab, renderWithThemeProp } from '@cocokits/storybook-addon-theme';
 import { StoryObj } from '@cocokits/storybook-addon-theme-react';
 
@@ -19,19 +19,25 @@ export const Size: StoryObj<typeof Tabs> = {
           filename: 'Source Code',
           language: 'tsx',
           code: `
-          import { <%= componentName.className %> } from "@cocokits/react-components";
+          import { Tabs, Tab } from "@cocokits/react-components";
 
           export const MyComponent = () => {
             return (
               <>
                 <% themeComponentConfig.size.values.map(size => { %>
+
+                  {/* ------------ <%= size %> ------------ */}
                   <Tabs
-                    <% if (typeof type !== 'undefined') { %> type='<%= type %>' <% } %>
-                    size='<%= size %>'
-                  />
+                    <% if (typeof size !== 'undefined') { %> size='<%= size %>' <% } %>
+                    type="<%= type %>"
+                    hideContent={true}
+                  >
+                    <Tab header="Header 1"/>
+                    <Tab header="Header 2"/>
+                    <Tab header="Header 3"/>
+                  </Tabs>
                 <% }) %>
               </>
-
             );
           }
           `,
@@ -43,7 +49,11 @@ export const Size: StoryObj<typeof Tabs> = {
   render: (args) => (
     <>
       {args.cckControl.themeComponentConfig.size?.values.map((size, index) => (
-        <Tabs key={index} type={args.cckControl.type} size={size} />
+        <Tabs key={index} size={size} type={args.cckControl.type} hideContent={true}>
+          <Tab header="Header 1" />
+          <Tab header="Header 2" />
+          <Tab header="Header 3" />
+        </Tabs>
       ))}
     </>
   ),
diff --git a/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/type.stories.tsx b/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/type.stories.tsx
index 5ba4752e..eec500c4 100644
--- a/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/type.stories.tsx
+++ b/apps/react-kits-doc/stories/ui-components/tabs/tabs/overview/type.stories.tsx
@@ -1,4 +1,4 @@
-import { Tabs } from '@cocokits/react-tabs';
+import { Tab, Tabs } from '@cocokits/react-tabs';
 import { renderWithPageTab, renderWithThemeProp } from '@cocokits/storybook-addon-theme';
 import { StoryObj } from '@cocokits/storybook-addon-theme-react';
 
@@ -18,15 +18,22 @@ export const Type: StoryObj<typeof Tabs> = {
           filename: 'Source Code',
           language: 'tsx',
           code: `
-          import { Tabs } from "@cocokits/react-components";
+          import { Tabs, Tab } from "@cocokits/react-components";
 
           export const MyComponent = () => {
             return (
               <>
                 <% themeComponentConfig.type.values.map(type => { %>
+
+                  {/* ------------ <%= type %> ------------ */}
                   <Tabs
                     <% if (typeof type !== 'undefined') { %> type='<%= type %>' <% } %>
-                  />
+                    hideContent={true}
+                  >
+                    <Tab header="Header 1"/>
+                    <Tab header="Header 2"/>
+                    <Tab header="Header 3"/>
+                  </Tabs>
                 <% }) %>
               </>
             );
@@ -37,6 +44,14 @@ export const Type: StoryObj<typeof Tabs> = {
     },
   },
   render: (args) => (
-    <>{args.cckControl.themeComponentConfig.type?.values.map((type, index) => <Tabs key={index} type={type} />)}</>
+    <>
+      {args.cckControl.themeComponentConfig.type?.values.map((type, index) => (
+        <Tabs key={index} type={type} hideContent={true}>
+          <Tab header="Header 1" />
+          <Tab header="Header 2" />
+          <Tab header="Header 3" />
+        </Tabs>
+      ))}
+    </>
   ),
 };
diff --git a/apps/react-kits-doc/stories/utils/feature-store.mdx b/apps/react-kits-doc/stories/utils/feature-store.mdx
new file mode 100644
index 00000000..b8cffc34
--- /dev/null
+++ b/apps/react-kits-doc/stories/utils/feature-store.mdx
@@ -0,0 +1,127 @@
+
+[//]: # (Do not edit directly)
+[//]: # (Generated by the Cocokits TypeDoc custom theme)
+
+import { Meta } from '@storybook/addon-docs';
+import { MdxPage } from '@cocokits/storybook-addon-theme';
+
+export const tocItems = [{"id":"selection_createfeaturestore","name":"createFeatureStore()"}];
+
+<Meta title='Utils/Feature Store'/>
+<MdxPage breadcrumb='Utils' title='Feature Store' tocItems={tocItems} hideThemeSwitcher={true}>
+<div>
+</div><div id="selection_createfeaturestore">
+## createFeatureStore()
+
+```ts
+function createFeatureStore<T>(featureStoreRef: T): {
+  useCreateFeatureStore: (...config: ConstructorParameters<T>) => {
+     store: InstanceType<T>;
+     StoreProvider: Provider<null | InstanceType<T>>;
+ };
+  useFeatureStore: () => null | InstanceType<T>;
+ }
+```
+
+### Type Parameters
+
+<div class="arg-type-table-wrapper">
+<table class="arg-type-table arg-type-table--full-width">
+<thead>
+<tr>
+<th>Type Parameter</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>
+
+`T` *extends* `ClassRef`
+
+</td>
+</tr>
+</tbody>
+</table>
+</div>
+
+### Parameters
+
+<div class="arg-type-table-wrapper">
+<table class="arg-type-table arg-type-table--full-width">
+<thead>
+<tr>
+<th>Parameter</th>
+<th>Type</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>
+
+`featureStoreRef`
+
+</td>
+<td>
+
+`T`
+
+</td>
+</tr>
+</tbody>
+</table>
+</div>
+
+### Returns
+
+```ts
+{
+  useCreateFeatureStore: (...config: ConstructorParameters<T>) => {
+     store: InstanceType<T>;
+     StoreProvider: Provider<null | InstanceType<T>>;
+ };
+  useFeatureStore: () => null | InstanceType<T>;
+ }
+```
+
+<div class="arg-type-table-wrapper">
+<table class="arg-type-table arg-type-table--full-width">
+<thead>
+<tr>
+<th>Name</th>
+<th>Type</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>
+
+`useCreateFeatureStore`
+
+</td>
+<td>
+
+`(...config: ConstructorParameters<T>) => {
+  store: InstanceType<T>;
+  StoreProvider: Provider<null | InstanceType<T>>;
+ }`
+
+</td>
+</tr>
+<tr>
+<td>
+
+`useFeatureStore`
+
+</td>
+<td>
+
+`() => null | InstanceType<T>`
+
+</td>
+</tr>
+</tbody>
+</table>
+</div>
+
+</div>
+</MdxPage>
diff --git a/apps/website/src/components/home/ui-components/ui-components.tsx b/apps/website/src/components/home/ui-components/ui-components.tsx
index 29eb0435..74cf202d 100644
--- a/apps/website/src/components/home/ui-components/ui-components.tsx
+++ b/apps/website/src/components/home/ui-components/ui-components.tsx
@@ -11,18 +11,18 @@ import {
   Checkbox,
   Chip,
   ChipList,
+  Divider,
   IconButton,
   Label,
-  SvgIcon,
   Menu,
   MenuItem,
-  Divider,
-  RadioGroup,
   RadioButton,
+  RadioGroup,
+  SvgIcon,
   Toggle,
 } from '@cocokits/react-components';
 import { FormField, Input, Option, Select, Textarea } from '@cocokits/react-form-field';
-import { Tab, TabLabel, Tabs } from '@cocokits/react-tabs-old';
+import { Tab, Tabs } from '@cocokits/react-tabs';
 
 import { Brand } from '../../brands/brand';
 import { CckComponent } from '../../cck-component/cck-component';
@@ -45,10 +45,10 @@ export function UiComponents() {
 
       <Tabs
         hideContent={true}
-        selectedValue={selectedTheme}
+        selected={selectedTheme}
         onSelectionChange={(theme) => setSelectedTheme(theme.value as typeof selectedTheme)}>
-        <Tab label={TabBrandLabel('cocokits')} value="cocokits" />
-        <Tab label={TabBrandLabel('frames-x')} value="frames-x" />
+        <Tab header={TabBrandLabel('cocokits')} value="cocokits" />
+        <Tab header={TabBrandLabel('frames-x')} value="frames-x" />
       </Tabs>
 
       <div className="examples-container">
@@ -143,8 +143,6 @@ export function UiComponents() {
 // eslint-disable-next-line react/display-name
 const TabBrandLabel = (themeName: 'cocokits' | 'frames-x') => (selected: boolean) => {
   return (
-    <TabLabel>
-      <Brand name={themeName} highlight={selected} />
-    </TabLabel>
+    <Brand name={themeName} highlight={selected} />
   );
 };
diff --git a/packages/angular/accordion/README.md b/packages/angular/accordion/README.md
index e29f0ce8..cc354a2c 100644
--- a/packages/angular/accordion/README.md
+++ b/packages/angular/accordion/README.md
@@ -12,7 +12,7 @@ The `@cocokits/angular-accordion` package provides a powerful and flexible accor
 ## Key Components Overview: 
 
 ### AccordionComponent
-The core wrapper component that manages the accordion structure. It handles state control, panel registration, keyboard accessibility, and global behaviors such as animation and expand/collapse all.
+The core wrapper component that manages the accordion structure. It handles state control, panel registration, and global behaviors such as animation and expand/collapse all.
 
 **Features:**
 - **Custom Icon Template:**
diff --git a/packages/angular/form-field/src/lib/form-field.store.ts b/packages/angular/form-field/src/lib/form-field.store.ts
index 46e80c4e..e9b715e3 100644
--- a/packages/angular/form-field/src/lib/form-field.store.ts
+++ b/packages/angular/form-field/src/lib/form-field.store.ts
@@ -5,8 +5,7 @@ import { AbstractControl, FormControlStatus, ValidationErrors, Validators } from
 import { map, Observable, startWith, Subject, switchMap } from 'rxjs';
 
 import { toDeepSignal } from '@cocokits/angular-utils';
-import { recordReduceMerge } from '@cocokits/common-utils';
-import { DeepNullable } from '@cocokits/core';
+import { DeepNullable, recordReduceMerge } from '@cocokits/common-utils';
 
 import { ChipListComponent } from './chip-list/chip-list.component';
 import { ErrorComponent } from './error/error.component';
diff --git a/packages/angular/tabs/README.md b/packages/angular/tabs/README.md
index 1631dcbd..7d7052d1 100644
--- a/packages/angular/tabs/README.md
+++ b/packages/angular/tabs/README.md
@@ -1,3 +1,66 @@
-# tabs
+# @cocokits/angular-tabs
+
+The `@cocokits/angular-tabs` package provides a flexible tabs component for Angular applications. Designed for performance, it supports custom templates, programmatic control, and adaptive behaviors for complex UI scenarios.
+
+## Included Components:
+
+- `TabsComponent`
+- `TabComponent`
+
+## Key Components Overview:
+
+### TabsComponent
+The container component that manages tab state and synchronization. Handles coordination between tabs and their content panels.
+
+**Features:**
+
+- **Custom Header Templates:**
+Fully customize tab headers using Angular templates
+
+- **Animation Control:**
+Toggle transition animations
+
+- **Disabled Tabs:**
+Disable individual tabs using [disabled] property
+
+- **Imperative Control:**
+Programmatically activate tabs
+
+- **Tab Align:**
+Configure tab headers alignment (left/right/center/stretch)
+
+- **Content Persistence:**
+Option to preserve DOM state when switching tabs
+
+### TabComponent
+Defines individual tab sections with associated header and content.
+
+**Features:**
+
+- **Header Customization:**
+Use simple text labels or custom templates via `<ng-template cckTabHeader>`
+
+- **State Control:**
+Support for disabled states
+
+---
+
+## Styling and Theming
+As with other CocoKits components, these accordion related components do not come with built-in styles but apply CSS classes based on configuration. This allows you to style them or use CocoKits' theming options for a consistent look across your application.
+
+## Documentation and Examples
+For more information on configuring and using these components, visit the documentation:
+
+- [TabsComponent](https://angular.cocokits.com/?path=/docs/ui-components-tabs--docs)
+
+
+---
+
+### Contributing
+We welcome contributions! If you'd like to contribute to this project, please read our [Contributing Guidelines](https://github.com/coco-base/cocokits/blob/main/CONTRIBUTING.md)
+
+---
+
+### License
+This project is licensed under the Apache License. See the [LICENSE](https://github.com/coco-base/cocokits/blob/main/LICENSE) file for details.
 
-## TODO: Write a good description
diff --git a/packages/angular/tabs/src/index.ts b/packages/angular/tabs/src/index.ts
index 45f58922..d28fd0f6 100644
--- a/packages/angular/tabs/src/index.ts
+++ b/packages/angular/tabs/src/index.ts
@@ -1,3 +1,4 @@
 export * from './lib/tabs/tabs.component';
-
 export * from './lib/tab/tab.component';
+export * from './lib/tab/tab-header.tmpl-directive';
+export * from './lib/tabs.model';
diff --git a/packages/angular/tabs/src/lib/tab/tab-header.tmpl-directive.ts b/packages/angular/tabs/src/lib/tab/tab-header.tmpl-directive.ts
new file mode 100644
index 00000000..28629af3
--- /dev/null
+++ b/packages/angular/tabs/src/lib/tab/tab-header.tmpl-directive.ts
@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+
+export interface AccordionHeaderIconContext {
+  selected: boolean;
+}
+
+@Directive({
+  standalone: true,
+  selector: 'ng-template[cckTabHeader]',
+})
+export class TabHeaderTemplateDirective {
+  static ngTemplateContextGuard(_dir: TabHeaderTemplateDirective, ctx: unknown): ctx is AccordionHeaderIconContext {
+    return true;
+  }
+}
diff --git a/packages/angular/tabs/src/lib/tab/tab.component.html b/packages/angular/tabs/src/lib/tab/tab.component.html
index 3aea565a..915cfce1 100644
--- a/packages/angular/tabs/src/lib/tab/tab.component.html
+++ b/packages/angular/tabs/src/lib/tab/tab.component.html
@@ -1 +1,22 @@
-<p>cck-tab works !!</p>
+<!-- Header Tab -->
+<ng-template #headerTemp>
+  
+  <button [class]="hostClassNames()" (click)="toggle()">
+    <div #indicatorElemRef [style.visibility]="_isSelected() ? 'visible' : 'hidden'" [class]="classNames().indicator"></div>
+
+    <div [class]="classNames().headerWrapper">
+      <ng-container *ngTemplateOutlet="headerTemplateContent(); context: { selected: _isSelected() }"></ng-container>
+    </div>
+  </button>
+</ng-template>
+
+<!-- Default Header Content -->
+<ng-template #defaultHeaderTemp let-selected="selected">
+  {{ header() }}
+</ng-template>
+
+
+<!-- Tab Content -->
+<ng-template #contentTemp>
+  <ng-content></ng-content>
+</ng-template>
diff --git a/packages/angular/tabs/src/lib/tab/tab.component.ts b/packages/angular/tabs/src/lib/tab/tab.component.ts
index aacd5d89..c42a8b81 100644
--- a/packages/angular/tabs/src/lib/tab/tab.component.ts
+++ b/packages/angular/tabs/src/lib/tab/tab.component.ts
@@ -1,20 +1,87 @@
-import { ChangeDetectionStrategy, Component, computed, ViewEncapsulation } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  contentChild,
+  ElementRef,
+  inject,
+  input,
+  TemplateRef,
+  viewChild,
+  ViewEncapsulation,
+} from '@angular/core';
 
 import { _UiBaseComponent } from '@cocokits/angular-core';
 
+import { TabHeaderTemplateDirective } from './tab-header.tmpl-directive';
+import { TabsFeatureStore } from '../tabs.feature-store';
+
+let NEXT_ID = 1;
+
 @Component({
   standalone: true,
-  imports: [],
+  imports: [NgTemplateOutlet],
   selector: 'cck-tab',
   templateUrl: './tab.component.html',
   styleUrls: ['./tab.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   host: {
-    '[class]': 'hostClassNames()',
+    '[class]': 'classNames().content',
   },
 })
-export class TabComponent extends _UiBaseComponent<'tab'> {
+export class TabComponent<TValue = unknown> extends _UiBaseComponent<'tab'> {
+  private featStore = inject(TabsFeatureStore);
+
   protected readonly componentName = 'tab';
-  protected extraHostElementClassConditions = computed(() => []);
+  protected extraHostElementClassConditions = computed(() => [
+    { if: this.disabled(), classes: this.classNames().disabled },
+    { if: this._isSelected(), classes: this.classNames().selected },
+    { if: !this._isSelected(), classes: this.classNames().unselected },
+  ]);
+
+  public _id = `TAB_ID_${NEXT_ID++}`;
+
+  /**
+   * The label of the tab.
+   */
+  public header = input<string>();
+
+  /**
+   * The value of the tab, which is used to identify the tab when selected.
+   * If not provided, a unique ID will be used.
+   */
+  public value = input<TValue>(undefined as TValue);
+
+  public _value = computed(() => this.value() ?? this._id);
+
+  /**
+   * Whether the tab is disabled. If true, the tab will not be selectable by user.
+   * @default false
+   */
+  public disabled = input(false, { transform: booleanAttribute });
+
+  protected defaultHeaderTemplateContent = viewChild.required('defaultHeaderTemp', { read: TemplateRef });
+  protected customHeaderTemplateContent = contentChild(TabHeaderTemplateDirective, { read: TemplateRef });
+  protected headerTemplateContent = computed(
+    () => this.customHeaderTemplateContent() ?? this.defaultHeaderTemplateContent()
+  );
+  public _headerTemplate = viewChild.required('headerTemp', { read: TemplateRef });
+
+  public _contentTemplate = viewChild.required('contentTemp', { read: TemplateRef });
+
+  public _isSelected = computed(() => this.featStore.selectedId() === this._id);
+
+  public _indicatorElemRef = viewChild.required<unknown, ElementRef<HTMLElement>>('indicatorElemRef', {
+    read: ElementRef<HTMLElement>,
+  });
+
+  protected toggle() {
+    if (this.disabled()) {
+      return;
+    }
+    this.featStore.selectTabById(this._id);
+  }
 }
diff --git a/packages/angular/tabs/src/lib/tabs.feature-store.ts b/packages/angular/tabs/src/lib/tabs.feature-store.ts
new file mode 100644
index 00000000..41f3439e
--- /dev/null
+++ b/packages/angular/tabs/src/lib/tabs.feature-store.ts
@@ -0,0 +1,14 @@
+import { signal } from '@angular/core';
+
+export class TabsFeatureStore {
+  private _prevuesSelectedId = signal<string>('');
+  private _selectedId = signal<string>('');
+
+  public selectedId = this._selectedId.asReadonly();
+  public prevuesSelectedId = this._prevuesSelectedId.asReadonly();
+
+  public selectTabById(id: string) {
+    this._prevuesSelectedId.set(this._selectedId());
+    this._selectedId.set(id);
+  }
+}
diff --git a/packages/angular/tabs/src/lib/tabs.model.ts b/packages/angular/tabs/src/lib/tabs.model.ts
new file mode 100644
index 00000000..053278fe
--- /dev/null
+++ b/packages/angular/tabs/src/lib/tabs.model.ts
@@ -0,0 +1,6 @@
+export interface TabSelectionChangeEvent<TValue> {
+  previousIndex: number;
+  previousValue: TValue;
+  index: number;
+  value: TValue;
+}
diff --git a/packages/angular/tabs/src/lib/tabs/tabs.component.html b/packages/angular/tabs/src/lib/tabs/tabs.component.html
index 78193652..c38d766d 100644
--- a/packages/angular/tabs/src/lib/tabs/tabs.component.html
+++ b/packages/angular/tabs/src/lib/tabs/tabs.component.html
@@ -1 +1,13 @@
-<p>cck-tabs works !!</p>
+<div [class]="classNames().headersWrapper">
+  @for (headerTemp of tabComponents(); track $index) {
+    <ng-container *ngTemplateOutlet="headerTemp._headerTemplate()"></ng-container>
+  }
+</div>
+
+@let _selectedTabComponent = selectedTabComponent();
+
+@if(!hideContent() && _selectedTabComponent) {
+  <div [class]="classNames().contentWrapper">
+    <ng-container *ngTemplateOutlet="_selectedTabComponent._contentTemplate()"></ng-container>
+  </div>
+}
\ No newline at end of file
diff --git a/packages/angular/tabs/src/lib/tabs/tabs.component.ts b/packages/angular/tabs/src/lib/tabs/tabs.component.ts
index 9336f5e9..c564761e 100644
--- a/packages/angular/tabs/src/lib/tabs/tabs.component.ts
+++ b/packages/angular/tabs/src/lib/tabs/tabs.component.ts
@@ -1,10 +1,29 @@
-import { ChangeDetectionStrategy, Component, computed, ViewEncapsulation } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import {
+  AfterContentInit,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  contentChildren,
+  effect,
+  inject,
+  Input,
+  input,
+  output,
+  untracked,
+  ViewEncapsulation,
+} from '@angular/core';
 
 import { _UiBaseComponent } from '@cocokits/angular-core';
+import { Animation, hasValue } from '@cocokits/common-utils';
+
+import { TabComponent } from '../tab/tab.component';
+import { TabsFeatureStore } from '../tabs.feature-store';
+import { TabSelectionChangeEvent } from '../tabs.model';
 
 @Component({
   standalone: true,
-  imports: [],
+  imports: [NgTemplateOutlet],
   selector: 'cck-tabs',
   templateUrl: './tabs.component.html',
   styleUrls: ['./tabs.component.scss'],
@@ -13,8 +32,149 @@ import { _UiBaseComponent } from '@cocokits/angular-core';
   host: {
     '[class]': 'hostClassNames()',
   },
+  providers: [TabsFeatureStore],
 })
-export class TabsComponent extends _UiBaseComponent<'tabs'> {
+export class TabsComponent<TValue = unknown> extends _UiBaseComponent<'tabs'> implements AfterContentInit {
+  private featStore = inject(TabsFeatureStore);
+
   protected readonly componentName = 'tabs';
-  protected extraHostElementClassConditions = computed(() => []);
+  protected extraHostElementClassConditions = computed(() => [
+    { if: this.headerAlign() === 'left', classes: this.classNames().alignLeft },
+    { if: this.headerAlign() === 'right', classes: this.classNames().alignRight },
+    { if: this.headerAlign() === 'center', classes: this.classNames().alignCenter },
+    { if: this.headerAlign() === 'stretch', classes: this.classNames().alignStretch },
+  ]);
+
+  private _selectedIndex: number | undefined;
+  /**
+   * The index of the currently selected tab.
+   * If `selected` is provided, the value of `selectedIndex` will be ignored.
+   * @default 0
+   */
+  @Input() public set selectedIndex(index: number) {
+    this._selectedIndex = index;
+    this._updateSelected();
+  }
+
+  private _selectedValue: TValue | undefined;
+  /**
+   * The value of the currently selected tab.
+   * If not provided, the `selectedIndex` will be used, and if `selectedIndex` is not provided, the first tab will be selected by default.
+   */
+  @Input() public set selected(value: TValue) {
+    this._selectedValue = value;
+    this._updateSelected();
+  }
+
+  /**
+   * Whether to hide the content of the tabs when they are not selected.
+   * @default false
+   */
+  public hideContent = input<boolean>(false);
+
+  /**
+   * Whether to disable the animation when switching between tabs.
+   * @default false
+   */
+  public instantAnimation = input<boolean>(false);
+
+  /**
+   * The alignment of the tab headers.
+   * @default 'left'
+   */
+  public headerAlign = input<'left' | 'center' | 'right' | 'stretch'>('left');
+
+  /**
+   * Emitter for the selected tab change event.
+   * IIt will return only the value of the selected tab and you can combine it with `selected` to activate 2way data binding.
+   */
+  public selectedChange = output<TValue>();
+
+  /**
+   * Emitter for the selected index change event.
+   * It will return only the index of the selected tab and you can combine it with `selectedIndex` to activate 2way data binding.
+   */
+  public selectedIndexChange = output<number>();
+
+  /**
+   * Emitter for the selection change event.
+   * event is an object with the new and previous selected index and value.
+   */
+  public change = output<TabSelectionChangeEvent<TValue>>();
+
+  protected tabComponents = contentChildren(TabComponent);
+
+  protected selectedTabComponent = computed(() => {
+    return this.tabComponents().find((tab) => this.featStore.selectedId() === tab._id);
+  });
+
+  private __dispatchChanges = effect(() => {
+    const selectedId = this.featStore.selectedId();
+    untracked(async () => {
+      const prevuesSelectedId = this.featStore.prevuesSelectedId();
+      const prevuesTabComponent = this.tabComponents().find((tab) => tab._id === prevuesSelectedId);
+      const prevuesSelectedIndex = this.tabComponents().findIndex((tab) => tab._id === prevuesSelectedId);
+      const prevuesSelectedValue = prevuesTabComponent?._value();
+
+      const selectedTabComponent = this.selectedTabComponent();
+      const selectedIndex = this.tabComponents().findIndex((tab) => tab._id === selectedId);
+      const selectedValue = selectedTabComponent?._value();
+
+      if (!selectedTabComponent) {
+        return;
+      }
+
+      this.selectedChange.emit(selectedValue);
+      this.selectedIndexChange.emit(selectedIndex);
+      this.change.emit({
+        previousIndex: prevuesSelectedIndex,
+        previousValue: prevuesSelectedValue,
+        index: selectedIndex,
+        value: selectedValue,
+      });
+
+      if (!this.instantAnimation() && prevuesTabComponent) {
+        const animationRef = Animation.getOrCreateInstance(selectedTabComponent._indicatorElemRef().nativeElement);
+
+        selectedTabComponent._indicatorElemRef().nativeElement.style.removeProperty('display');
+        const prevuesTabReact = prevuesTabComponent._indicatorElemRef().nativeElement.getBoundingClientRect();
+        const newTabReact = selectedTabComponent._indicatorElemRef().nativeElement.getBoundingClientRect();
+
+        animationRef
+          .setDimension({ width: prevuesTabReact.width, height: prevuesTabReact.height })
+          .setTranslate({ x: prevuesTabReact.left - newTabReact.left, y: prevuesTabReact.top - newTabReact.top })
+          .applyImmediately();
+
+        await animationRef
+          .setDimension({ width: newTabReact.width, height: newTabReact.height })
+          .setTranslate({ x: 0, y: 0 })
+          .animate({ duration: 300 });
+
+        selectedTabComponent._indicatorElemRef().nativeElement.style.removeProperty('width');
+        selectedTabComponent._indicatorElemRef().nativeElement.style.removeProperty('height');
+        selectedTabComponent._indicatorElemRef().nativeElement.style.removeProperty('transform');
+      }
+    });
+  });
+
+  ngAfterContentInit() {
+    this._updateSelected();
+  }
+
+  public _updateSelected() {
+    if (this.tabComponents().length === 0) {
+      return;
+    }
+
+    if (hasValue(this._selectedValue)) {
+      const selectedTab =
+        this.tabComponents().find((tab) => tab.value() === this._selectedValue) ?? this.tabComponents()[0];
+      this.featStore.selectTabById(selectedTab._id);
+      return;
+    }
+
+    const selectedTabByIndex =
+      this.tabComponents().find((_, index) => index === this._selectedIndex) ?? this.tabComponents()[0];
+    this.featStore.selectTabById(selectedTabByIndex._id);
+  }
 }
diff --git a/packages/common/core/src/index.ts b/packages/common/core/src/index.ts
index e64610cd..e65bc29e 100644
--- a/packages/common/core/src/index.ts
+++ b/packages/common/core/src/index.ts
@@ -28,7 +28,6 @@ export * from './lib/class-names/textarea-class-names';
 export * from './lib/class-names/toggle-class-names';
 export * from './lib/class-names/trailing-class-names';
 
-export * from './lib/model/common.model';
 export * from './lib/model/design-token.model';
 export * from './lib/model/theme-svg-icon.model';
 export * from './lib/model/theme-config.model';
diff --git a/packages/common/core/src/lib/class-names/tab-class-names.ts b/packages/common/core/src/lib/class-names/tab-class-names.ts
index f39c92ce..34907911 100644
--- a/packages/common/core/src/lib/class-names/tab-class-names.ts
+++ b/packages/common/core/src/lib/class-names/tab-class-names.ts
@@ -11,11 +11,36 @@ export const tabLayoutClassNamesConfig = {
       selectorStructure: [],
       description: 'It will add to the host element of `Tab` component.',
     },
-    // example: {
-    //   name: '...',
-    //   selectorStructure: [{ element: '...', modifier: '...' }],
-    //   description: `...`,
-    // },
+    headerWrapper: {
+      name: 'Header Wrapper Element',
+      selectorStructure: [{ element: 'label' }],
+      description: 'Applied to the header wrapper element Tab component.',
+    },
+    indicator: {
+      name: 'Indicator Element',
+      selectorStructure: [{ element: 'indicator' }],
+      description: 'Applied to the indicator element inside the Tab component, visible only for the selected tab.',
+    },
+    content: {
+      name: 'Content Element',
+      selectorStructure: [{ element: 'content' }],
+      description: 'Applied to the element that contains the content of the Tab component.',
+    },
+    selected: {
+      name: 'Host Element',
+      selectorStructure: [{ modifier: 'selected' }],
+      description: 'Applied to the host element of the Tab button component, when the the tab is selected.',
+    },
+    unselected: {
+      name: 'Host Element',
+      selectorStructure: [{ modifier: 'unselected' }],
+      description: 'Applied to the host element of the Tab button component, when the the tab is NOT selected.',
+    },
+    disabled: {
+      name: 'Host Element',
+      selectorStructure: [{ modifier: 'disabled' }],
+      description: 'Applied to the host element of the Tab button component, when the the tab is disabled.',
+    },
   },
 } satisfies LayoutClassNamesConfig;
 
@@ -27,6 +52,11 @@ export function getTabClassNames(
 
   return {
     host: generateLayoutClassNameFromElement(tabLayoutClassNamesConfig, 'host', themeConfig, componentProps),
-    // example: generateLayoutClassNameFromElement(tabLayoutClassNamesConfig, 'example', themeConfig),
+    headerWrapper: generateLayoutClassNameFromElement(tabLayoutClassNamesConfig, 'headerWrapper', themeConfig),
+    indicator: generateLayoutClassNameFromElement(tabLayoutClassNamesConfig, 'indicator', themeConfig),
+    content: generateLayoutClassNameFromElement(tabLayoutClassNamesConfig, 'content', themeConfig),
+    selected: generateLayoutClassNameFromElement(tabLayoutClassNamesConfig, 'selected', themeConfig),
+    unselected: generateLayoutClassNameFromElement(tabLayoutClassNamesConfig, 'unselected', themeConfig),
+    disabled: generateLayoutClassNameFromElement(tabLayoutClassNamesConfig, 'disabled', themeConfig),
   };
 }
diff --git a/packages/common/core/src/lib/class-names/tabs-class-names.ts b/packages/common/core/src/lib/class-names/tabs-class-names.ts
index 8bc7c429..fc719bdd 100644
--- a/packages/common/core/src/lib/class-names/tabs-class-names.ts
+++ b/packages/common/core/src/lib/class-names/tabs-class-names.ts
@@ -11,11 +11,36 @@ export const tabsLayoutClassNamesConfig = {
       selectorStructure: [],
       description: 'It will add to the host element of `Tabs` component.',
     },
-    // example: {
-    //   name: '...',
-    //   selectorStructure: [{ element: '...', modifier: '...' }],
-    //   description: `...`,
-    // },
+    headersWrapper: {
+      name: 'Headers Wrapper Element',
+      selectorStructure: [{ element: 'headers-wrapper' }],
+      description: 'This selector is applied to the wrapper element that contains all the tab headers.',
+    },
+    contentWrapper: {
+      name: 'Content Wrapper Element',
+      selectorStructure: [{ element: 'content-wrapper' }],
+      description: 'This selector is applied to the wrapper element that contains the tab contents.',
+    },
+    alignLeft: {
+      name: 'Host Element',
+      selectorStructure: [{ modifier: 'align-left' }],
+      description: 'This selector is applied to the host element, when the header align is left.',
+    },
+    alignCenter: {
+      name: 'Host Element',
+      selectorStructure: [{ modifier: 'align-center' }],
+      description: 'This selector is applied to the host element, when the header align is center.',
+    },
+    alignRight: {
+      name: 'Host Element',
+      selectorStructure: [{ modifier: 'align-right' }],
+      description: 'This selector is applied to the host element, when the header align is right.',
+    },
+    alignStretch: {
+      name: 'Host Element',
+      selectorStructure: [{ modifier: 'align-stretch' }],
+      description: 'This selector is applied to the host element, when the header align is stretch.',
+    },
   },
 } satisfies LayoutClassNamesConfig;
 
@@ -27,6 +52,11 @@ export function getTabsClassNames(
 
   return {
     host: generateLayoutClassNameFromElement(tabsLayoutClassNamesConfig, 'host', themeConfig, componentProps),
-    // example: generateLayoutClassNameFromElement(tabsLayoutClassNamesConfig, 'example', themeConfig),
+    headersWrapper: generateLayoutClassNameFromElement(tabsLayoutClassNamesConfig, 'headersWrapper', themeConfig),
+    contentWrapper: generateLayoutClassNameFromElement(tabsLayoutClassNamesConfig, 'contentWrapper', themeConfig),
+    alignLeft: generateLayoutClassNameFromElement(tabsLayoutClassNamesConfig, 'alignLeft', themeConfig),
+    alignCenter: generateLayoutClassNameFromElement(tabsLayoutClassNamesConfig, 'alignCenter', themeConfig),
+    alignRight: generateLayoutClassNameFromElement(tabsLayoutClassNamesConfig, 'alignRight', themeConfig),
+    alignStretch: generateLayoutClassNameFromElement(tabsLayoutClassNamesConfig, 'alignStretch', themeConfig),
   };
 }
diff --git a/packages/common/core/src/lib/model/theme-config.model.ts b/packages/common/core/src/lib/model/theme-config.model.ts
index e86e9378..aac53815 100644
--- a/packages/common/core/src/lib/model/theme-config.model.ts
+++ b/packages/common/core/src/lib/model/theme-config.model.ts
@@ -1,4 +1,5 @@
-import { RequireAtLeastOne } from './common.model';
+import { RequireAtLeastOne } from '@cocokits/common-utils';
+
 import { ThemeSvgIcon } from './theme-svg-icon.model';
 import { UIBaseComponentsName } from './ui-base-components-name';
 
diff --git a/packages/common/utils/src/index.ts b/packages/common/utils/src/index.ts
index 922c71ce..a505c78d 100644
--- a/packages/common/utils/src/index.ts
+++ b/packages/common/utils/src/index.ts
@@ -51,3 +51,5 @@ export * from './lib/uncategorized/instance-store';
 export * from './lib/selection/selection';
 
 export * from './lib/string/case';
+
+export * from './lib/model/common.model';
diff --git a/packages/common/utils/src/lib/animation/animation-store.ts b/packages/common/utils/src/lib/animation/animation-store.ts
index 84680429..1eee1089 100644
--- a/packages/common/utils/src/lib/animation/animation-store.ts
+++ b/packages/common/utils/src/lib/animation/animation-store.ts
@@ -1,13 +1,9 @@
 /** @module _hidden */
 
+import { DeepPartial } from '../model/common.model';
 import { deepClone } from '../uncategorized/deep-clone';
 import { deepMerge } from '../uncategorized/deep-merge';
 
-// TODO: It's duplicate between core and utils, but we can not use core in utils, so we need to keep it here.
-export type DeepPartial<T> = {
-  [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
-};
-
 export class AnimationStore<T> {
   private _value: T;
 
diff --git a/packages/common/core/src/lib/model/common.model.ts b/packages/common/utils/src/lib/model/common.model.ts
similarity index 82%
rename from packages/common/core/src/lib/model/common.model.ts
rename to packages/common/utils/src/lib/model/common.model.ts
index bfab0b0d..621e35ca 100644
--- a/packages/common/core/src/lib/model/common.model.ts
+++ b/packages/common/utils/src/lib/model/common.model.ts
@@ -6,7 +6,7 @@ export type DeepNullable<T> = {
   [P in keyof T]: T[P] extends object ? DeepNullable<T[P]> : T[P] | null;
 };
 
-export type ClassRef = new (...args: any[]) => any;
+export type ClassRef<T = any, U = any> = new (...args: U[]) => T;
 
 export type RequireAtLeastOne<T> = {
   [K in keyof T]-?: Required<Pick<T, K>> & Omit<T, K>;
diff --git a/packages/internal/common-kits-doc/stories/utils/_hidden.mdx b/packages/internal/common-kits-doc/stories/utils/_hidden.mdx
index 271077a0..fc7c29ca 100644
--- a/packages/internal/common-kits-doc/stories/utils/_hidden.mdx
+++ b/packages/internal/common-kits-doc/stories/utils/_hidden.mdx
@@ -5,7 +5,7 @@
 import { Meta } from '@storybook/addon-docs';
 import { MdxPage } from '@cocokits/storybook-addon-theme';
 
-export const tocItems = [{"id":"selection_animationframemanager","name":"AnimationFrameManager"},{"id":"selection_animationstoret","name":"AnimationStore<T>"},{"id":"selection_deeppartialt","name":"DeepPartial<T>"},{"id":"selection_getanimationvalueonprogress","name":"getAnimationValueOnProgress()"},{"id":"selection_gettransform2dvalue","name":"getTransform2dValue()"}];
+export const tocItems = [{"id":"selection_animationframemanager","name":"AnimationFrameManager"},{"id":"selection_animationstoret","name":"AnimationStore<T>"},{"id":"selection_getanimationvalueonprogress","name":"getAnimationValueOnProgress()"},{"id":"selection_gettransform2dvalue","name":"getTransform2dValue()"}];
 
 <Meta title='Utils/_hidden'/>
 <MdxPage breadcrumb='Utils' title='_hidden' tocItems={tocItems} hideThemeSwitcher={true}>
@@ -220,36 +220,6 @@ set(value: T): void
 
 ***
 
-</div><div id="selection_deeppartialt">
-## DeepPartial\<T\>
-
-```ts
-type DeepPartial<T>: { [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P] };
-```
-
-### Type Parameters
-
-<div class="arg-type-table-wrapper">
-<table class="arg-type-table arg-type-table--full-width">
-<thead>
-<tr>
-<th>Type Parameter</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>
-
-`T`
-
-</td>
-</tr>
-</tbody>
-</table>
-</div>
-
-***
-
 </div><div id="selection_getanimationvalueonprogress">
 ## getAnimationValueOnProgress()
 
diff --git a/packages/internal/common-kits-doc/stories/utils/model.common.model.mdx b/packages/internal/common-kits-doc/stories/utils/model.common.model.mdx
new file mode 100644
index 00000000..14e27607
--- /dev/null
+++ b/packages/internal/common-kits-doc/stories/utils/model.common.model.mdx
@@ -0,0 +1,150 @@
+
+[//]: # (Do not edit directly)
+[//]: # (Generated by the Cocokits TypeDoc custom theme)
+
+import { Meta } from '@storybook/addon-docs';
+import { MdxPage } from '@cocokits/storybook-addon-theme';
+
+export const tocItems = [{"id":"selection_classreft-u","name":"ClassRef<T, U>"},{"id":"selection_deepnullablet","name":"DeepNullable<T>"},{"id":"selection_deeppartialt","name":"DeepPartial<T>"},{"id":"selection_requireatleastonet","name":"RequireAtLeastOne<T>"}];
+
+<Meta title='Utils/Model'/>
+<MdxPage breadcrumb='Utils' title='Model' tocItems={tocItems} hideThemeSwitcher={true}>
+<div>
+</div><div id="selection_classreft-u">
+## ClassRef\<T, U\>
+
+```ts
+type ClassRef<T, U>: Object;
+```
+
+### Type Parameters
+
+<div class="arg-type-table-wrapper">
+<table class="arg-type-table arg-type-table--full-width">
+<thead>
+<tr>
+<th>Type Parameter</th>
+<th>Default type</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>
+
+`T`
+
+</td>
+<td>
+
+`any`
+
+</td>
+</tr>
+<tr>
+<td>
+
+`U`
+
+</td>
+<td>
+
+`any`
+
+</td>
+</tr>
+</tbody>
+</table>
+</div>
+
+***
+
+</div><div id="selection_deepnullablet">
+## DeepNullable\<T\>
+
+```ts
+type DeepNullable<T>: { [P in keyof T]: T[P] extends object ? DeepNullable<T[P]> : T[P] | null };
+```
+
+### Type Parameters
+
+<div class="arg-type-table-wrapper">
+<table class="arg-type-table arg-type-table--full-width">
+<thead>
+<tr>
+<th>Type Parameter</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>
+
+`T`
+
+</td>
+</tr>
+</tbody>
+</table>
+</div>
+
+***
+
+</div><div id="selection_deeppartialt">
+## DeepPartial\<T\>
+
+```ts
+type DeepPartial<T>: { [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P] };
+```
+
+### Type Parameters
+
+<div class="arg-type-table-wrapper">
+<table class="arg-type-table arg-type-table--full-width">
+<thead>
+<tr>
+<th>Type Parameter</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>
+
+`T`
+
+</td>
+</tr>
+</tbody>
+</table>
+</div>
+
+***
+
+</div><div id="selection_requireatleastonet">
+## RequireAtLeastOne\<T\>
+
+```ts
+type RequireAtLeastOne<T>: { [K in keyof T]-?: Required<Pick<T, K>> & Omit<T, K> }[keyof T];
+```
+
+### Type Parameters
+
+<div class="arg-type-table-wrapper">
+<table class="arg-type-table arg-type-table--full-width">
+<thead>
+<tr>
+<th>Type Parameter</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>
+
+`T`
+
+</td>
+</tr>
+</tbody>
+</table>
+</div>
+
+</div>
+</MdxPage>
diff --git a/packages/internal/storybook-addon-theme-angular/src/arg-type.ts b/packages/internal/storybook-addon-theme-angular/src/arg-type.ts
new file mode 100644
index 00000000..a319c6a8
--- /dev/null
+++ b/packages/internal/storybook-addon-theme-angular/src/arg-type.ts
@@ -0,0 +1,33 @@
+import { InputType, StrictInputType } from '@storybook/types';
+
+import { DeepPartial } from '@cocokits/common-utils';
+
+interface NgArgType {
+  name: string;
+  category?: 'outputs' | 'input';
+  type?: string;
+  defaultValue?: string | number | boolean | null;
+}
+export function ngArgType({ name, category, type, defaultValue }: NgArgType): DeepPartial<StrictInputType> {
+  const argType: InputType & { table: NonNullable<InputType['table']> } = { name, table: {} };
+
+  if (category) {
+    argType.table.category = category;
+  }
+
+  if (type !== undefined) {
+    if (!argType.table.type) {
+      argType.table.type = {};
+    }
+    argType.table.type.summary = type;
+  }
+
+  if (defaultValue !== undefined) {
+    if (!argType.table.defaultValue) {
+      argType.table.defaultValue = {};
+    }
+    argType.table.defaultValue.summary = `${defaultValue}`;
+  }
+
+  return { [name]: argType };
+}
diff --git a/packages/internal/storybook-addon-theme-angular/src/index.ts b/packages/internal/storybook-addon-theme-angular/src/index.ts
index eced9c5a..2c61e09d 100644
--- a/packages/internal/storybook-addon-theme-angular/src/index.ts
+++ b/packages/internal/storybook-addon-theme-angular/src/index.ts
@@ -2,3 +2,4 @@ export * from './preview.base';
 export * from './args-to-template';
 export * from './decorators';
 export * from './storybook-meta.model';
+export * from './arg-type';
diff --git a/packages/internal/storybook-addon-theme/src/assets/styles/cck-themes-components.css b/packages/internal/storybook-addon-theme/src/assets/styles/cck-themes-components.css
index 4873ae59..1524924a 100644
--- a/packages/internal/storybook-addon-theme/src/assets/styles/cck-themes-components.css
+++ b/packages/internal/storybook-addon-theme/src/assets/styles/cck-themes-components.css
@@ -1832,6 +1832,9 @@
 :where([data-cck-theme-name=cocokits] .cck-tabs){
   opacity:1;
 }
+:where([data-cck-theme-name=cocokits] .cck-tab){
+  opacity:1;
+}
 
 :where([data-cck-theme-name=frames-x] .cck-button){
   display:inline-flex;
@@ -3896,5 +3899,134 @@
   border-bottom:1px solid var(--base-border);
 }
 :where([data-cck-theme-name=frames-x] .cck-tabs){
-  opacity:1;
+  display:flex;
+  flex-direction:column;
+  gap:12px;
+}
+:where([data-cck-theme-name=frames-x] .cck-tabs__headers-wrapper){
+  display:flex;
+  justify-content:center;
+  gap:var(--spacing-2);
+  flex-wrap:wrap;
+}
+:where([data-cck-theme-name=frames-x] .cck-tabs--align-left .cck-tabs__headers-wrapper){
+  align-self:flex-start;
+  align-items:flex-start;
+  justify-content:flex-start;
+}
+:where([data-cck-theme-name=frames-x] .cck-tabs--align-center .cck-tabs__headers-wrapper){
+  align-self:center;
+  align-items:center;
+  justify-content:center;
+}
+:where([data-cck-theme-name=frames-x] .cck-tabs--align-right .cck-tabs__headers-wrapper){
+  align-self:flex-end;
+  align-items:flex-end;
+  justify-content:flex-end;
+}
+:where([data-cck-theme-name=frames-x] .cck-tabs--align-stretch .cck-tabs__headers-wrapper){
+  align-self:stretch;
+  align-items:stretch;
+  justify-content:stretch;
+}
+:where([data-cck-theme-name=frames-x] .cck-tabs__toggle .cck-tabs__headers-wrapper){
+  padding:var(--spacing-2);
+  border-radius:var(--radi-6);
+  background-color:var(--base-fill-1);
+}
+:where([data-cck-theme-name=frames-x] .cck-tabs__size--sm .cck-tabs__headers-wrapper){
+  min-height:36px;
+}
+:where([data-cck-theme-name=frames-x] .cck-tabs__size--md .cck-tabs__headers-wrapper){
+  min-height:44px;
+}
+:where([data-cck-theme-name=frames-x] .cck-tabs__size--lg .cck-tabs__headers-wrapper){
+  min-height:56px;
+}
+:where([data-cck-theme-name=frames-x] .cck-tab){
+  display:flex;
+  background:transparent;
+  border:none;
+  outline:none;
+  color:var(--text-dark-tertiary);
+  align-items:center;
+  justify-content:center;
+  white-space:nowrap;
+  cursor:pointer;
+  position:relative;
+}
+:where([data-cck-theme-name=frames-x] .cck-tab .cck-svg-icon.cck-svg-icon--default-color){
+  color:currentColor;
+  fill:currentColor;
+}
+:where([data-cck-theme-name=frames-x] .cck-tab__label){
+  position:relative;
+  z-index:1;
+}
+:where([data-cck-theme-name=frames-x] .cck-tab--unselected):not(.cck-tab--disabled):focus-visible{
+  outline:2px solid var(--state-brand-selected);
+}
+:where([data-cck-theme-name=frames-x] .cck-tab--selected){
+  color:var(--text-dark-primary);
+}
+:where([data-cck-theme-name=frames-x] .cck-tab--disabled){
+  color:var(--base-disabled);
+  cursor:not-allowed;
+}
+:where([data-cck-theme-name=frames-x] .cck-tab__indicator){
+  position:absolute;
+  top:0;
+  left:0;
+  width:100%;
+  height:100%;
+  z-index:0;
+}
+:where([data-cck-theme-name=frames-x] .cck-tabs--align-stretch .cck-tab){
+  flex:1;
+}
+:where([data-cck-theme-name=frames-x] .cck-tabs__toggle .cck-tab){
+  border-radius:var(--radi-5);
+}
+:where([data-cck-theme-name=frames-x] .cck-tabs__toggle .cck-tab--unselected):not(.cck-tab--disabled):hover{
+  background-color:var(--base-fill-2);
+}
+:where([data-cck-theme-name=frames-x] .cck-tabs__toggle .cck-tab__indicator){
+  border-radius:var(--radi-5);
+  background-color:var(--base-surface-1);
+  border:1px solid var(--base-border);
+}
+:where([data-cck-theme-name=frames-x] .cck-tabs__fill .cck-tab){
+  border-radius:var(--radi-6);
+}
+:where([data-cck-theme-name=frames-x] .cck-tabs__fill .cck-tab__indicator){
+  border-radius:var(--radi-5);
+  background-color:var(--base-surface-2);
+  border:2px solid var(--state-brand-selected);
+}
+:where([data-cck-theme-name=frames-x] .cck-tabs__line .cck-tab__indicator){
+  border-bottom:var(--stroke-lg) solid var(--state-brand-selected);
+}
+:where([data-cck-theme-name=frames-x] .cck-tabs__size--sm .cck-tab){
+  font:var(--text-sm-font-medium);
+  padding:0px var(--spacing-7);
+  height:36px;
+}
+:where([data-cck-theme-name=frames-x] .cck-tabs__size--sm .cck-tab.cck-tab--selected){
+  font:var(--text-sm-font-semibold);
+}
+:where([data-cck-theme-name=frames-x] .cck-tabs__size--md .cck-tab){
+  font:var(--text-base-font-medium);
+  padding:0px var(--spacing-8);
+  height:44px;
+}
+:where([data-cck-theme-name=frames-x] .cck-tabs__size--md .cck-tab.cck-tab--selected){
+  font:var(--text-base-font-semibold);
+}
+:where([data-cck-theme-name=frames-x] .cck-tabs__size--lg .cck-tab){
+  font:var(--text-lg-font-medium);
+  padding:0px var(--spacing-9);
+  height:56px;
+}
+:where([data-cck-theme-name=frames-x] .cck-tabs__size--lg .cck-tab.cck-tab--selected){
+  font:var(--text-lg-font-semibold);
 }
\ No newline at end of file
diff --git a/packages/internal/storybook-addon-theme/src/assets/styles/cck-themes-components.min.css b/packages/internal/storybook-addon-theme/src/assets/styles/cck-themes-components.min.css
index 08f486c8..85d599e7 100644
--- a/packages/internal/storybook-addon-theme/src/assets/styles/cck-themes-components.min.css
+++ b/packages/internal/storybook-addon-theme/src/assets/styles/cck-themes-components.min.css
@@ -4,4 +4,4 @@
  * Generated by cocokits 'scss-builder'
  */
  
-:where([data-cck-theme-name=cocokits] .cck-button){align-items:center;border:none;box-sizing:border-box;cursor:pointer;display:inline-flex;justify-content:center;margin:0;outline:transparent}:where([data-cck-theme-name=cocokits] .cck-button):disabled{background-color:var(--color-disabled-surface);fill:var(--color-disabled-font);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-button .cck-svg-icon--default-color .cck-svg-icon__svg){fill:currentcolor}:where([data-cck-theme-name=cocokits] .cck-button__backdrop){display:none}:where([data-cck-theme-name=cocokits] .cck-button__size--sm){gap:8px;height:var(--button-primary-height-sm);padding:0 16px}:where([data-cck-theme-name=cocokits] .cck-button__size--md){gap:8px;height:32px;padding:0 20px}:where([data-cck-theme-name=cocokits] .cck-button__size--lg){gap:10px;height:40px;padding:0 24px}:where([data-cck-theme-name=cocokits] .cck-button__basic){border-radius:4px}:where([data-cck-theme-name=cocokits] .cck-button__basic.cck-button__color--brand):not(:disabled){background-color:transparent;color:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-button__basic.cck-button__color--brand):focus-visible{box-shadow:0 0 0 3px var(--color-brand-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-button__basic.cck-button__color--info):not(:disabled){background-color:transparent;color:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-button__basic.cck-button__color--info):focus-visible{box-shadow:0 0 0 3px var(--color-info-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-button__basic.cck-button__color--warning):not(:disabled){background-color:transparent;color:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-button__basic.cck-button__color--warning):focus-visible{box-shadow:0 0 0 3px var(--color-warning-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-button__basic.cck-button__color--error):not(:disabled){background-color:transparent;color:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-button__basic.cck-button__color--error):focus-visible{box-shadow:0 0 0 3px var(--color-error-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-button__basic.cck-button__color--h-contrast):not(:disabled){background-color:transparent;color:var(--color-h-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-button__basic.cck-button__color--h-contrast):focus-visible{box-shadow:0 0 0 3px var(--color-h-contrast-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-button__light){border-radius:4px}:where([data-cck-theme-name=cocokits] .cck-button__light.cck-button__color--brand):not(:disabled){background-color:var(--color-brand-alpha-5);color:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-button__light.cck-button__color--brand):focus-visible{box-shadow:0 0 0 3px var(--color-brand-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-button__light.cck-button__color--info):not(:disabled){background-color:var(--color-info-alpha-5);color:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-button__light.cck-button__color--info):focus-visible{box-shadow:0 0 0 3px var(--color-info-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-button__light.cck-button__color--warning):not(:disabled){background-color:var(--color-warning-alpha-5);color:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-button__light.cck-button__color--warning):focus-visible{box-shadow:0 0 0 3px var(--color-warning-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-button__light.cck-button__color--error):not(:disabled){background-color:var(--color-error-alpha-5);color:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-button__light.cck-button__color--error):focus-visible{box-shadow:0 0 0 3px var(--color-error-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-button__light.cck-button__color--h-contrast):not(:disabled){background-color:var(--color-h-contrast-alpha-5);color:var(--color-h-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-button__light.cck-button__color--h-contrast):focus-visible{box-shadow:0 0 0 3px var(--color-h-contrast-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-button__outline){background-color:transparent;border-radius:4px}:where([data-cck-theme-name=cocokits] .cck-button__outline.cck-button__color--brand):not(:disabled){border:1px solid var(--color-brand-default);color:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-button__outline.cck-button__color--brand):focus-visible{box-shadow:0 0 0 3px var(--color-brand-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-button__outline.cck-button__color--info):not(:disabled){border:1px solid var(--color-info-default);color:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-button__outline.cck-button__color--info):focus-visible{box-shadow:0 0 0 3px var(--color-info-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-button__outline.cck-button__color--warning):not(:disabled){border:1px solid var(--color-warning-default);color:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-button__outline.cck-button__color--warning):focus-visible{box-shadow:0 0 0 3px var(--color-warning-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-button__outline.cck-button__color--error):not(:disabled){border:1px solid var(--color-error-default);color:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-button__outline.cck-button__color--error):focus-visible{box-shadow:0 0 0 3px var(--color-error-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-button__outline.cck-button__color--h-contrast):not(:disabled){border:1px solid var(--color-h-contrast-default);color:var(--color-h-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-button__outline.cck-button__color--h-contrast):focus-visible{box-shadow:0 0 0 3px var(--color-h-contrast-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-button__primary){border-radius:4px}:where([data-cck-theme-name=cocokits] .cck-button__primary.cck-button__color--brand):not(:disabled){background-color:var(--color-brand-default);color:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-button__primary.cck-button__color--brand):focus-visible{box-shadow:0 0 0 3px var(--color-brand-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-button__primary.cck-button__color--info):not(:disabled){background-color:var(--color-info-default);color:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-button__primary.cck-button__color--info):focus-visible{box-shadow:0 0 0 3px var(--color-info-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-button__primary.cck-button__color--warning):not(:disabled){background-color:var(--color-warning-default);color:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-button__primary.cck-button__color--warning):focus-visible{box-shadow:0 0 0 3px var(--color-warning-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-button__primary.cck-button__color--error):not(:disabled){background-color:var(--color-error-default);color:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-button__primary.cck-button__color--error):focus-visible{box-shadow:0 0 0 3px var(--color-error-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-button__primary.cck-button__color--h-contrast):not(:disabled){background-color:var(--color-h-contrast-default);color:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-button__primary.cck-button__color--h-contrast):focus-visible{box-shadow:0 0 0 3px var(--color-h-contrast-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-checkbox){display:flex}:where([data-cck-theme-name=cocokits] .cck-checkbox__wrapper){align-items:center;display:inline-flex;gap:12px;vertical-align:middle}:where([data-cck-theme-name=cocokits] .cck-checkbox__input-wrapper){box-sizing:content-box;cursor:pointer;display:inline-block;flex-shrink:0;line-height:0;position:relative;white-space:nowrap}:where([data-cck-theme-name=cocokits] .cck-checkbox__size--sm .cck-checkbox__input-wrapper){height:var(--checkbox-size-sm);width:var(--checkbox-size-sm)}:where([data-cck-theme-name=cocokits] .cck-checkbox__size--md .cck-checkbox__input-wrapper){height:var(--checkbox-size-md);width:var(--checkbox-size-md)}:where([data-cck-theme-name=cocokits] .cck-checkbox__size--lg .cck-checkbox__input-wrapper){height:var(--checkbox-size-lg);width:var(--checkbox-size-lg)}:where([data-cck-theme-name=cocokits] .cck-checkbox__input){cursor:inherit;height:100%;left:0;margin:0;opacity:0;padding:0;position:absolute;right:0;top:0;width:100%}:where([data-cck-theme-name=cocokits] .cck-checkbox__background){align-items:center;border:1px solid var(--color-m-contrast-default);border-radius:2px;box-sizing:border-box;display:flex;height:100%;justify-content:center;pointer-events:none;position:absolute;transition:background-color 90ms cubic-bezier(.4,0,.6,1),border-color 90ms cubic-bezier(.4,0,.6,1);width:100%;will-change:background-color,border-color}:where([data-cck-theme-name=cocokits] .cck-checkbox--checked.cck-checkbox--disabled .cck-checkbox__background),:where([data-cck-theme-name=cocokits] .cck-checkbox--disabled .cck-checkbox__background),:where([data-cck-theme-name=cocokits] .cck-checkbox--indeterminate.cck-checkbox--disabled .cck-checkbox__background),:where([data-cck-theme-name=cocokits] .cck-checkbox--unchecked.cck-checkbox--disabled .cck-checkbox__background){background-color:var(--color-disabled-surface);border-color:var(--color-disabled-border)}:where([data-cck-theme-name=cocokits] .cck-checkbox--checked.cck-checkbox__color--brand:not(.cck-checkbox--disabled) .cck-checkbox__background),:where([data-cck-theme-name=cocokits] .cck-checkbox--indeterminate.cck-checkbox__color--brand:not(.cck-checkbox--disabled) .cck-checkbox__background){background-color:var(--color-brand-default);border-color:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-checkbox--checked.cck-checkbox__color--info:not(.cck-checkbox--disabled) .cck-checkbox__background),:where([data-cck-theme-name=cocokits] .cck-checkbox--indeterminate.cck-checkbox__color--info:not(.cck-checkbox--disabled) .cck-checkbox__background){background-color:var(--color-info-default);border-color:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-checkbox--checked.cck-checkbox__color--warning:not(.cck-checkbox--disabled) .cck-checkbox__background),:where([data-cck-theme-name=cocokits] .cck-checkbox--indeterminate.cck-checkbox__color--warning:not(.cck-checkbox--disabled) .cck-checkbox__background){background-color:var(--color-warning-default);border-color:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-checkbox--checked.cck-checkbox__color--error:not(.cck-checkbox--disabled) .cck-checkbox__background),:where([data-cck-theme-name=cocokits] .cck-checkbox--indeterminate.cck-checkbox__color--error:not(.cck-checkbox--disabled) .cck-checkbox__background){background-color:var(--color-error-default);border-color:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-checkbox__color--brand .cck-checkbox__input:focus-visible~.cck-checkbox__background){box-shadow:0 0 0 3px var(--color-brand-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-checkbox__color--info .cck-checkbox__input:focus-visible~.cck-checkbox__background){box-shadow:0 0 0 3px var(--color-info-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-checkbox__color--warning .cck-checkbox__input:focus-visible~.cck-checkbox__background){box-shadow:0 0 0 3px var(--color-warning-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-checkbox__color--error .cck-checkbox__input:focus-visible~.cck-checkbox__background){box-shadow:0 0 0 3px var(--color-error-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-checkbox__checkmark-path){transition:stroke-dashoffset .18s cubic-bezier(.4,0,.6,1);stroke:currentcolor;stroke-width:3.12px;stroke-dashoffset:29.7833;stroke-dasharray:29.7833}:where([data-cck-theme-name=cocokits] .cck-checkbox--checked .cck-checkbox__checkmark-path){stroke-dashoffset:0}:where([data-cck-theme-name=cocokits] .cck-checkbox__checkmark){color:var(--checkbox-color-checkmark);inset:0;opacity:0;padding:2px;position:absolute;transition:opacity .18s cubic-bezier(.4,0,.6,1);width:100%}:where([data-cck-theme-name=cocokits] .cck-checkbox--checked .cck-checkbox__checkmark){opacity:1}:where([data-cck-theme-name=cocokits] .cck-checkbox--indeterminate .cck-checkbox__checkmark){opacity:0;transform:rotate(45deg);transition:opacity 90ms cubic-bezier(.4,0,.6,1),transform 90ms cubic-bezier(.4,0,.6,1)}:where([data-cck-theme-name=cocokits] .cck-checkbox--disabled .cck-checkbox__checkmark){color:var(--color-disabled-border)}:where([data-cck-theme-name=cocokits] .cck-checkbox__mixedmark){border-color:var(--checkbox-color-checkmark);border-style:solid;border-width:1px;height:0;margin:2px;opacity:0;transform:scaleX(0) rotate(0deg);transition:opacity 90ms cubic-bezier(.4,0,.6,1),transform 90ms cubic-bezier(.4,0,.6,1);width:100%}:where([data-cck-theme-name=cocokits] .cck-checkbox--indeterminate .cck-checkbox__mixedmark){opacity:1;transform:scaleX(1) rotate(0deg)}:where([data-cck-theme-name=cocokits] .cck-checkbox__label){color:var(--color-font-default);cursor:pointer;font:var(--text-sm-medium);margin-left:0;margin-right:auto;order:0;padding-left:0;padding-right:0;text-align:left;white-space:nowrap}:where([data-cck-theme-name=cocokits] .cck-checkbox__label):empty{display:none}:where([data-cck-theme-name=cocokits] .cck-checkbox--disabled .cck-checkbox__label){color:var(--color-disabled-font)}:where([data-cck-theme-name=cocokits] .cck-checkbox--disabled .cck-checkbox__input-wrapper),:where([data-cck-theme-name=cocokits] .cck-checkbox--disabled .cck-checkbox__label){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-chip){align-items:center;border:1px solid var(--chip-color-border);border-radius:6px;color:var(--color-font-default);cursor:default;display:flex;font:var(--text-sm-medium);gap:4px;padding:0 var(--chip-spacing-overlay-h-padding)}:where([data-cck-theme-name=cocokits] .cck-chip.cck-chip--disabled){border:1px solid var(--chip-color-border-disabled);color:var(--color-disabled-font);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-chip.cck-chip--removable){padding:0 2px 0 var(--chip-spacing-overlay-h-padding)}:where([data-cck-theme-name=cocokits] .cck-chip__size--sm){height:var(--chip-size-height-sm)}:where([data-cck-theme-name=cocokits] .cck-chip__size--md){height:var(--chip-size-height-md)}:where([data-cck-theme-name=cocokits] .cck-chip__size--lg){height:var(--chip-size-height-lg)}:where([data-cck-theme-name=cocokits] .cck-chip__content-wrapper){align-items:center;display:flex;justify-content:center}:where([data-cck-theme-name=cocokits] .cck-chip__remove-icon-wrapper .cck-icon-button){background-color:transparent;border-radius:50%;color:var(--color-font-alpha-7);height:24px;padding:4px;width:24px}:where([data-cck-theme-name=cocokits] .cck-chip__remove-icon-wrapper){align-items:center;display:flex;justify-content:center}:where([data-cck-theme-name=cocokits] .cck-chip__remove-icon-wrapper .cck-icon-button):hover{background-color:var(--color-h-contrast-alpha-2)}:where([data-cck-theme-name=cocokits] .cck-chip-list){align-items:stretch;display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-start}:where([data-cck-theme-name=cocokits] .cck-chip-list__input){background:transparent;border:none;flex:1;font:var(--text-sm-regular);outline:none}:where([data-cck-theme-name=cocokits] .cck-chip-list__input::-moz-placeholder){color:var(--color-font-alpha-6);-moz-transition:color .1s ease-in;transition:color .1s ease-in}:where([data-cck-theme-name=cocokits] .cck-chip-list__input::placeholder){color:var(--color-font-alpha-6);transition:color .1s ease-in}:where([data-cck-theme-name=cocokits] .cck-chip-list__input::-moz-placeholder):not(:focus){color:transparent}:where([data-cck-theme-name=cocokits] .cck-chip-list__input::placeholder):not(:focus){color:transparent}:where([data-cck-theme-name=cocokits] .cck-chip-list__size--sm .cck-chip-list__input){height:var(--chip-size-height-sm)}:where([data-cck-theme-name=cocokits] .cck-chip-list__size--md .cck-chip-list__input){height:var(--chip-size-height-md)}:where([data-cck-theme-name=cocokits] .cck-chip-list__size--lg .cck-chip-list__input){height:var(--chip-size-height-lg)}:where([data-cck-theme-name=cocokits] *){box-sizing:border-box}:where([data-cck-theme-name=cocokits] .cck-divider){display:block;flex-shrink:0}:where([data-cck-theme-name=cocokits] .cck-divider__horizontal){margin:var(--divider-spacing-margin) 0;width:100%}:where([data-cck-theme-name=cocokits] .cck-divider__horizontal.cck-divider__size--md){height:1px}:where([data-cck-theme-name=cocokits] .cck-divider__horizontal.cck-divider__size--lg){height:2px;width:100%}:where([data-cck-theme-name=cocokits] .cck-divider__vertical){height:100%;margin:0 var(--divider-spacing-margin)}:where([data-cck-theme-name=cocokits] .cck-divider__vertical.cck-divider__size--md){width:1px}:where([data-cck-theme-name=cocokits] .cck-divider__vertical.cck-divider__size--lg){width:2px}:where([data-cck-theme-name=cocokits] .cck-divider__color--light){background-color:var(--divider-color-light)}:where([data-cck-theme-name=cocokits] .cck-divider__color--default){background-color:var(--divider-color-default)}:where([data-cck-theme-name=cocokits] .cck-divider__color--dark){background-color:var(--divider-color-dark)}:where([data-cck-theme-name=cocokits] .cck-error){color:var(--color-error-default);display:flex;font:var(--text-sm-regular);gap:6px}:where([data-cck-theme-name=cocokits] .cck-error .cck-svg-icon--default-color .cck-svg-icon__svg){fill:currentcolor}:where([data-cck-theme-name=cocokits] .cck-form-field){align-items:flex-start;display:flex;flex-direction:column;gap:var(--form_field-spacing-host-gap);min-width:100px}:where([data-cck-theme-name=cocokits] .cck-form-field:not(:disabled) .cck-form-field__input-wrapper):hover{background-color:var(--color-surface-inverse-alpha-1)}:where([data-cck-theme-name=cocokits] .cck-form-field .cck-select){flex:1;height:100%;width:100%}:where([data-cck-theme-name=cocokits] .cck-form-field .cck-input){flex:1;width:100%}:where([data-cck-theme-name=cocokits] .cck-form-field--disabled){opacity:.5}:where([data-cck-theme-name=cocokits] .cck-form-field__wrapper){align-items:stretch;border-radius:var(--form_field-size-radius);display:flex;flex-direction:row;width:100%}:where([data-cck-theme-name=cocokits] .cck-form-field__wrapper):has(input:disabled){background-color:var(--color-surface-inverse-alpha-3)}:where([data-cck-theme-name=cocokits] .cck-form-field--with-input.cck-form-field__size--sm .cck-form-field__wrapper),:where([data-cck-theme-name=cocokits] .cck-form-field--with-select.cck-form-field__size--sm .cck-form-field__wrapper){height:var(--form_field-size-height-sm)}:where([data-cck-theme-name=cocokits] .cck-form-field--with-input.cck-form-field__size--md .cck-form-field__wrapper),:where([data-cck-theme-name=cocokits] .cck-form-field--with-select.cck-form-field__size--md .cck-form-field__wrapper){height:var(--form_field-size-height-md)}:where([data-cck-theme-name=cocokits] .cck-form-field--with-input.cck-form-field__size--lg .cck-form-field__wrapper),:where([data-cck-theme-name=cocokits] .cck-form-field--with-select.cck-form-field__size--lg .cck-form-field__wrapper){height:var(--form_field-size-height-lg)}:where([data-cck-theme-name=cocokits] .cck-form-field .cck-label){margin-left:var(--form_field-spacing-balance-alignment-margin)}:where([data-cck-theme-name=cocokits] .cck-form-field__feedback-wrapper){display:flex;flex-direction:column;margin-left:var(--form_field-spacing-balance-alignment-margin);overflow:hidden}:where([data-cck-theme-name=cocokits] .cck-form-field__feedback-wrapper):empty{display:none}:where([data-cck-theme-name=cocokits] .cck-form-field__wrapper>*):first-child{border-bottom-left-radius:var(--form_field-size-radius);border-top-left-radius:var(--form_field-size-radius)}:where([data-cck-theme-name=cocokits] .cck-form-field__wrapper>*):last-child{border-bottom-right-radius:var(--form_field-size-radius);border-top-right-radius:var(--form_field-size-radius)}:where([data-cck-theme-name=cocokits] .cck-form-field__input-wrapper){align-items:center;border:1px solid var(--form_field-color-border);display:flex;flex:1;flex-direction:row;gap:var(--form_field-spacing-input-wrapper-gap);min-width:0}:where([data-cck-theme-name=cocokits] .cck-form-field--with-input .cck-form-field__input-wrapper),:where([data-cck-theme-name=cocokits] .cck-form-field--with-select .cck-form-field__input-wrapper){padding:0 var(--form_field-spacing-input-wrapper-h-padding)}:where([data-cck-theme-name=cocokits] .cck-form-field--with-chip-list .cck-prefix),:where([data-cck-theme-name=cocokits] .cck-form-field--with-chip-list .cck-suffix){align-self:flex-start}:where([data-cck-theme-name=cocokits] .cck-form-field--with-chip-list .cck-chip-list){flex:1}:where([data-cck-theme-name=cocokits] .cck-form-field__size--sm.cck-form-field--with-chip-list .cck-suffix){margin-right:4px;margin-top:6px}:where([data-cck-theme-name=cocokits] .cck-form-field__size--md.cck-form-field--with-chip-list .cck-suffix){margin-right:4px;margin-top:8px}:where([data-cck-theme-name=cocokits] .cck-form-field__size--lg.cck-form-field--with-chip-list .cck-suffix){margin-left:4px;margin-right:8px;margin-top:12px}:where([data-cck-theme-name=cocokits] .cck-form-field__size--sm.cck-form-field--with-chip-list .cck-prefix){margin-left:4px;margin-top:6px}:where([data-cck-theme-name=cocokits] .cck-form-field__size--md.cck-form-field--with-chip-list .cck-prefix){margin-left:4px;margin-top:8px}:where([data-cck-theme-name=cocokits] .cck-form-field__size--lg.cck-form-field--with-chip-list .cck-prefix){margin-left:8px;margin-right:4px;margin-top:12px}:where([data-cck-theme-name=cocokits] .cck-form-field--with-chip-list .cck-form-field__input-wrapper){cursor:text;padding:4px}:where([data-cck-theme-name=cocokits] .cck-form-field--with-textarea .cck-form-field__input-wrapper){padding:8px}:where([data-cck-theme-name=cocokits] .cck-form-field--focused .cck-form-field__input-wrapper){border:1px solid var(--color-brand-default);box-shadow:inset 0 0 0 1px var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-form-field--error .cck-form-field__input-wrapper){border:1px solid var(--form_field-color-error)}:where([data-cck-theme-name=cocokits] .cck-form-field--focused.cck-form-field--error .cck-form-field__input-wrapper){box-shadow:inset 0 0 0 1px var(--form_field-color-error)}:where([data-cck-theme-name=cocokits] .cck-hint){color:var(--color-font-alpha-7);display:flex;font:var(--text-sm-regular);gap:6px}:where([data-cck-theme-name=cocokits] .cck-hint .cck-svg-icon--default-color .cck-svg-icon__svg){fill:currentcolor}:where([data-cck-theme-name=cocokits] .cck-svg-icon){align-items:center;display:flex;flex-shrink:0;justify-content:center}:where([data-cck-theme-name=cocokits] .cck-svg-icon__svg){height:100%;width:100%}:where([data-cck-theme-name=cocokits] .cck-svg-icon__size--xs){height:var(--icon-size-xs);width:var(--icon-size-xs)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__size--sm){height:var(--icon-size-sm);width:var(--icon-size-sm)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__size--md){height:var(--icon-size-md);width:var(--icon-size-md)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__size--lg){height:var(--icon-size-lg);width:var(--icon-size-lg)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__size--xl){height:var(--icon-size-xl);width:var(--icon-size-xl)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__size--2xl){height:var(--icon-size-2xl);width:var(--icon-size-2xl)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__color--brand){fill:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__color--info){fill:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__color--warning){fill:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__color--error){fill:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__color--h-contrast){fill:var(--color-h-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__color--m-contrast){fill:var(--color-m-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button){align-items:center;border:none;box-sizing:border-box;cursor:pointer;display:inline-flex;flex-shrink:0;justify-content:center;margin:0;outline:transparent}:where([data-cck-theme-name=cocokits] .cck-icon-button):disabled{background-color:var(--color-disabled-surface);fill:var(--color-disabled-font);cursor:default}:where([data-cck-theme-name=cocokits] .cck-icon-button .cck-svg-icon){height:100%;width:100%}:where([data-cck-theme-name=cocokits] .cck-icon-button .cck-svg-icon__svg){fill:inherit}:where([data-cck-theme-name=cocokits] .cck-icon-button__rounded--false){border-radius:4px}:where([data-cck-theme-name=cocokits] .cck-icon-button__rounded--true){border-radius:50%}:where([data-cck-theme-name=cocokits] .cck-icon-button__size--sm){height:28px;padding:6px;width:28px}:where([data-cck-theme-name=cocokits] .cck-icon-button__size--md){height:32px;padding:6px;width:32px}:where([data-cck-theme-name=cocokits] .cck-icon-button__size--lg){height:40px;padding:8px;width:40px}:where([data-cck-theme-name=cocokits] .cck-icon-button__basic.cck-icon-button__color--brand):not(:disabled){background-color:transparent;fill:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__basic.cck-icon-button__color--brand):focus-visible{box-shadow:0 0 0 3px var(--color-brand-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-icon-button__basic.cck-icon-button__color--info):not(:disabled){background-color:transparent;fill:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__basic.cck-icon-button__color--info):focus-visible{box-shadow:0 0 0 3px var(--color-info-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-icon-button__basic.cck-icon-button__color--warning):not(:disabled){background-color:transparent;fill:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__basic.cck-icon-button__color--warning):focus-visible{box-shadow:0 0 0 3px var(--color-warning-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-icon-button__basic.cck-icon-button__color--error):not(:disabled){background-color:transparent;fill:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__basic.cck-icon-button__color--error):focus-visible{box-shadow:0 0 0 3px var(--color-error-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-icon-button__basic.cck-icon-button__color--h-contrast):not(:disabled){background-color:transparent;fill:var(--color-h-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__basic.cck-icon-button__color--h-contrast):focus-visible{box-shadow:0 0 0 3px var(--color-h-contrast-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-icon-button__light.cck-icon-button__color--brand):not(:disabled){background-color:var(--color-brand-alpha-5);fill:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__light.cck-icon-button__color--brand):focus-visible{box-shadow:0 0 0 3px var(--color-brand-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-icon-button__light.cck-icon-button__color--info):not(:disabled){background-color:var(--color-info-alpha-5);fill:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__light.cck-icon-button__color--info):focus-visible{box-shadow:0 0 0 3px var(--color-info-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-icon-button__light.cck-icon-button__color--warning):not(:disabled){background-color:var(--color-warning-alpha-5);fill:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__light.cck-icon-button__color--warning):focus-visible{box-shadow:0 0 0 3px var(--color-warning-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-icon-button__light.cck-icon-button__color--error):not(:disabled){background-color:var(--color-error-alpha-5);fill:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__light.cck-icon-button__color--error):focus-visible{box-shadow:0 0 0 3px var(--color-error-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-icon-button__light.cck-icon-button__color--h-contrast):not(:disabled){background-color:var(--color-h-contrast-alpha-5);fill:var(--color-h-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__light.cck-icon-button__color--h-contrast):focus-visible{box-shadow:0 0 0 3px var(--color-h-contrast-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline){background-color:transparent}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline.cck-icon-button__color--brand):not(:disabled){border:1px solid var(--color-brand-default);fill:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline.cck-icon-button__color--brand):focus-visible{box-shadow:0 0 0 3px var(--color-brand-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline.cck-icon-button__color--info):not(:disabled){border:1px solid var(--color-info-default);fill:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline.cck-icon-button__color--info):focus-visible{box-shadow:0 0 0 3px var(--color-info-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline.cck-icon-button__color--warning):not(:disabled){border:1px solid var(--color-warning-default);fill:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline.cck-icon-button__color--warning):focus-visible{box-shadow:0 0 0 3px var(--color-warning-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline.cck-icon-button__color--error):not(:disabled){border:1px solid var(--color-error-default);fill:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline.cck-icon-button__color--error):focus-visible{box-shadow:0 0 0 3px var(--color-error-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline.cck-icon-button__color--h-contrast):not(:disabled){border:1px solid var(--color-h-contrast-default);fill:var(--color-h-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline.cck-icon-button__color--h-contrast):focus-visible{box-shadow:0 0 0 3px var(--color-h-contrast-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-icon-button__primary.cck-icon-button__color--brand):not(:disabled){background-color:var(--color-brand-default);fill:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__primary.cck-icon-button__color--brand):focus-visible{box-shadow:0 0 0 3px var(--color-brand-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-icon-button__primary.cck-icon-button__color--info):not(:disabled){background-color:var(--color-info-default);fill:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__primary.cck-icon-button__color--info):focus-visible{box-shadow:0 0 0 3px var(--color-info-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-icon-button__primary.cck-icon-button__color--warning):not(:disabled){background-color:var(--color-warning-default);fill:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__primary.cck-icon-button__color--warning):focus-visible{box-shadow:0 0 0 3px var(--color-warning-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-icon-button__primary.cck-icon-button__color--error):not(:disabled){background-color:var(--color-error-default);fill:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__primary.cck-icon-button__color--error):focus-visible{box-shadow:0 0 0 3px var(--color-error-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-icon-button__primary.cck-icon-button__color--h-contrast):not(:disabled){background-color:var(--color-h-contrast-default);fill:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__primary.cck-icon-button__color--h-contrast):focus-visible{box-shadow:0 0 0 3px var(--color-h-contrast-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-input){background-color:transparent;border:none;color:var(--color-font-default);font:var(--text-md-regular);outline:none;text-overflow:ellipsis}:where([data-cck-theme-name=cocokits] .cck-input::-moz-placeholder){color:var(--color-font-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-input::placeholder){color:var(--color-font-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-input::-moz-placeholder):disabled{color:var(--color-font-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-input::placeholder):disabled{color:var(--color-font-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-input):disabled{color:var(--color-font-alpha-6);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-label){display:flex}:where([data-cck-theme-name=cocokits] .cck-label__label-tag){color:var(--color-font-default);font:var(--text-sm-medium)}:where([data-cck-theme-name=cocokits] .cck-label__required-marker){color:var(--color-brand-default);font:var(--text-sm-medium);margin-left:var(--label-spacing-required-marker-padding-left)}:where([data-cck-theme-name=cocokits] .cck-leading){align-items:center;border:1px solid var(--form_field-color-border);border-right:none;color:var(--color-font-alpha-7);display:flex;flex-grow:0;justify-content:center;padding:0 var(--form_field-spacing-input-wrapper-h-padding);-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-leading .cck-select){color:currentcolor;font:inherit}:where([data-cck-theme-name=cocokits] .cck-leading__regular){font:var(--text-sm-regular)}:where([data-cck-theme-name=cocokits] .cck-leading__medium){font:var(--text-sm-medium)}:where([data-cck-theme-name=cocokits] .cck-leading--clickable){cursor:pointer;transition:background-color .1s}:where([data-cck-theme-name=cocokits] .cck-leading .cck-svg-icon.cck-svg-icon--default-size){height:var(--icon-size-xs);width:var(--icon-size-xs)}:where([data-cck-theme-name=cocokits] .cck-leading__color--transparent){background-color:transparent}:where([data-cck-theme-name=cocokits] .cck-leading__color--transparent.cck-leading--clickable):active{background-color:var(--color-surface-inverse-alpha-4)}:where([data-cck-theme-name=cocokits] .cck-leading__color--transparent.cck-leading--clickable):hover:not(:active){background-color:var(--color-surface-inverse-alpha-1)}:where([data-cck-theme-name=cocokits] .cck-leading__color--grey){background-color:var(--color-surface-inverse-alpha-1)}:where([data-cck-theme-name=cocokits] .cck-leading__color--grey.cck-leading--clickable):active{background-color:var(--color-surface-inverse-alpha-4)}:where([data-cck-theme-name=cocokits] .cck-leading__color--grey.cck-leading--clickable):hover:not(:active){background-color:var(--color-surface-inverse-alpha-3)}:where([data-cck-theme-name=cocokits] .cck-leading .cck-svg-icon.cck-svg-icon--default-color .cck-svg-icon__svg){fill:var(--form_field-color-icon)}:where([data-cck-theme-name=cocokits] .cck-menu){background-color:var(--color-surface-default);border:1px solid var(--menu-color-border);border-radius:var(--menu-size-radius);box-shadow:0 8px 10px -6px rgba(13,16,23,.039),0 18px 22px -4px rgba(13,16,23,.078);display:flex;flex-direction:column;margin:4px 0;padding:var(--menu-spacing-v-padding) var(--menu-spacing-h-padding)}:where([data-cck-theme-name=cocokits] .cck-menu__overlay .cck-overlay__backdrop){background-color:transparent}:where([data-cck-theme-name=cocokits] .cck-menu-item){align-items:center;border-radius:6px;display:flex;font:var(--text-sm-regular);gap:var(--menu_item-spacing-gap);justify-content:flex-start;margin:0 4px;padding:var(--menu_item-spacing-v-padding) var(--menu_item-spacing-h-padding)}:where([data-cck-theme-name=cocokits] .cck-menu-item):not(.cck-menu-item--disabled){cursor:pointer}:where([data-cck-theme-name=cocokits] .cck-menu-item--disabled){opacity:.6}:where([data-cck-theme-name=cocokits] .cck-menu-item--disabled .cck-svg-icon.cck-svg-icon--default-color),:where([data-cck-theme-name=cocokits] .cck-menu-item--disabled){color:var(--color-disabled-font)}:where([data-cck-theme-name=cocokits] .cck-menu-item):not(.cck-menu-item--disabled):hover{background-color:var(--color-surface-inverse-alpha-1)}:where([data-cck-theme-name=cocokits] .cck-menu-item__color--default):not(.cck-menu-item--disabled),:where([data-cck-theme-name=cocokits] .cck-menu-item__color--default:not(.cck-menu-item--disabled) .cck-svg-icon.cck-svg-icon--default-color){color:var(--color-font-default)}:where([data-cck-theme-name=cocokits] .cck-menu-item__color--error):not(.cck-menu-item--disabled),:where([data-cck-theme-name=cocokits] .cck-menu-item__color--error:not(.cck-menu-item--disabled) .cck-svg-icon.cck-svg-icon--default-color){color:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-menu-item__size--sm){height:var(--menu_item-size-height-sm)}:where([data-cck-theme-name=cocokits] .cck-menu-item__size--md){height:var(--menu_item-size-height-md)}:where([data-cck-theme-name=cocokits] .cck-menu-item__size--lg){height:var(--menu_item-size-height-lg)}:where([data-cck-theme-name=cocokits] .cck-menu-item .cck-svg-icon.cck-svg-icon--default-size){height:var(--icon-size-xs);width:var(--icon-size-xs)}:where([data-cck-theme-name=cocokits] .cck-menu-item .cck-svg-icon.cck-svg-icon--default-color .cck-svg-icon__svg){fill:currentcolor}:where([data-cck-theme-name=cocokits] .cck-option){align-items:center;border-radius:6px;color:var(--color-font-default);display:flex;font:var(--text-sm-regular);gap:var(--option-spacing-item-gap);margin:0 4px;padding:0 var(--option-spacing-item-h-padding)}:where([data-cck-theme-name=cocokits] .cck-option):not(.cck-option--disabled){cursor:pointer}:where([data-cck-theme-name=cocokits] .cck-option--disabled){color:var(--color-disabled-font);opacity:.7;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-option):not(.cck-option--disabled):hover{background-color:var(--option-color-item-hover)}:where([data-cck-theme-name=cocokits] .cck-option .cck-checkbox__input-wrapper){height:var(--checkbox-size-sm);width:var(--checkbox-size-sm)}:where([data-cck-theme-name=cocokits] .cck-option--single.cck-option--selected){font:var(--text-sm-medium)}:where([data-cck-theme-name=cocokits] .cck-option__size--sm){height:var(--option-size-height-sm)}:where([data-cck-theme-name=cocokits] .cck-option__size--md){height:var(--option-size-height-md)}:where([data-cck-theme-name=cocokits] .cck-option__size--lg){height:var(--option-size-height-lg)}:where([data-cck-theme-name=cocokits] .cck-select__options-wrapper){background-color:var(--option-color-overlay-bg);border:1px solid var(--option-color-overlay-border);border-radius:var(--option-size-overlay-radius);height:inherit;margin-top:var(--option-spacing-overlay-margin-top);max-height:inherit;overflow:auto;padding:var(--option-spacing-overlay-h-padding) var(--option-spacing-overlay-v-padding)}:where([data-cck-theme-name=cocokits] .cck-option__content-wrapper){flex:1}:where([data-cck-theme-name=cocokits] .cck-option__selected-checkmark .cck-svg-icon){height:var(--icon-size-sm);width:var(--icon-size-sm)}:where([data-cck-theme-name=cocokits] .cck-option-group){display:flex;flex-direction:column}:where([data-cck-theme-name=cocokits] .cck-option-group--label){align-items:center;color:var(--color-font-default);display:flex;font:var(--text-sm-medium);padding:0 var(--option-spacing-item-h-padding)}:where([data-cck-theme-name=cocokits] .cck-option-group--disabled .cck-option-group--label){color:var(--color-disabled-font);-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-option-group .cck-option){padding:0 calc(var(--option-spacing-item-h-padding)*2)}:where([data-cck-theme-name=cocokits] .cck-option-group__size--sm .cck-option-group--label){height:var(--option-size-height-sm)}:where([data-cck-theme-name=cocokits] .cck-option-group__size--md .cck-option-group--label){height:var(--option-size-height-md)}:where([data-cck-theme-name=cocokits] .cck-option-group__size--lg .cck-option-group--label){height:var(--option-size-height-lg)}:where([data-cck-theme-name=cocokits] .cck-prefix){flex-grow:0}:where([data-cck-theme-name=cocokits] .cck-prefix .cck-svg-icon.cck-svg-icon--default-size){height:var(--icon-size-xs);width:var(--icon-size-xs)}:where([data-cck-theme-name=cocokits] .cck-prefix .cck-svg-icon.cck-svg-icon--default-color .cck-svg-icon__svg){fill:var(--form_field-color-icon)}:where([data-cck-theme-name=cocokits] .cck-radio-button__wrapper){align-items:center;display:inline-flex;vertical-align:middle}:where([data-cck-theme-name=cocokits] .cck-radio-button__input-wrapper){box-sizing:content-box;cursor:pointer;display:inline-block;flex:0 0 auto;position:relative;will-change:opacity,transform,border-color,color}:where([data-cck-theme-name=cocokits] .cck-radio-button__size--sm .cck-radio-button__input-wrapper){height:var(--radio-size-sm);padding:var(--radio-spacing-padding-input-sm);width:var(--radio-size-sm)}:where([data-cck-theme-name=cocokits] .cck-radio-button__size--md .cck-radio-button__input-wrapper){height:var(--radio-size-md);padding:var(--radio-spacing-padding-input-md);width:var(--radio-size-md)}:where([data-cck-theme-name=cocokits] .cck-radio-button__size--lg .cck-radio-button__input-wrapper){height:var(--radio-size-lg);padding:var(--radio-spacing-padding-input-lg);width:var(--radio-size-lg)}:where([data-cck-theme-name=cocokits] .cck-radio-button__input){cursor:inherit;height:100%;left:0;margin:0;opacity:0;padding:0;position:absolute;right:0;top:0;width:100%;z-index:1}:where([data-cck-theme-name=cocokits] .cck-radio-button__background){box-sizing:border-box;display:inline-block;height:100%;position:relative;width:100%}:where([data-cck-theme-name=cocokits] .cck-radio-button__background--outer-circle){border-color:var(--color-m-contrast-default);border-radius:50%;border-style:solid;border-width:1px;box-sizing:border-box;height:100%;left:0;position:absolute;top:0;transition:border-color 90ms cubic-bezier(0,0,.2,1);width:100%}:where([data-cck-theme-name=cocokits] .cck-radio-button--checked .cck-radio-button__background--outer-circle){border-width:2px}:where([data-cck-theme-name=cocokits] .cck-radio-button--disabled.cck-radio-button--unchecked .cck-radio-button__background--outer-circle){background-color:var(--color-disabled-surface);border-color:var(--color-disabled-border)}:where([data-cck-theme-name=cocokits] .cck-radio-button--disabled.cck-radio-button--checked .cck-radio-button__background--outer-circle){border-color:var(--color-disabled-border)}:where([data-cck-theme-name=cocokits] .cck-radio-button__color--brand.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--outer-circle){border-color:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-radio-button__color--info.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--outer-circle){border-color:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-radio-button__color--warning.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--outer-circle){border-color:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-radio-button__color--error.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--outer-circle){border-color:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-radio-button__background--inner-circle){border-radius:50%;box-sizing:border-box;height:100%;left:0;position:absolute;top:0;transform:scale(0);transition:transform 90ms cubic-bezier(.4,0,.6,1),background-color 90ms cubic-bezier(.4,0,.6,1);width:100%}:where([data-cck-theme-name=cocokits] .cck-radio-button--checked .cck-radio-button__background--inner-circle){transform:scale(.5);transition:transform 90ms cubic-bezier(0,0,.2,1),border-color 90ms cubic-bezier(0,0,.2,1)}:where([data-cck-theme-name=cocokits] .cck-radio-button--disabled.cck-radio-button--checked .cck-radio-button__background--inner-circle){background-color:var(--color-disabled-border)}:where([data-cck-theme-name=cocokits] .cck-radio-button__color--brand.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--inner-circle){background-color:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-radio-button__color--info.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--inner-circle){background-color:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-radio-button__color--warning.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--inner-circle){background-color:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-radio-button__color--error.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--inner-circle){background-color:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-radio-button__label){color:var(--color-font-default);cursor:pointer;font:var(--text-sm-regular);margin-left:0;margin-right:auto;order:0;padding-left:4px;padding-right:0;white-space:nowrap}:where([data-cck-theme-name=cocokits] .cck-radio-button--disabled .cck-radio-button__label){color:var(--color-disabled-font)}:where([data-cck-theme-name=cocokits] .cck-radio-button--disabled .cck-radio-button__input-wrapper),:where([data-cck-theme-name=cocokits] .cck-radio-button--disabled .cck-radio-button__label){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-radio-group){align-items:flex-start;display:flex}:where([data-cck-theme-name=cocokits] .cck-radio-group__row){flex-direction:row;gap:24px}:where([data-cck-theme-name=cocokits] .cck-radio-group__column){flex-direction:column}:where([data-cck-theme-name=cocokits] .cck-select){align-items:center;border-radius:6px;color:var(--color-font-default);cursor:pointer;display:flex;font:var(--text-sm-regular)}:where([data-cck-theme-name=cocokits] .cck-select.cck-select--disabled){cursor:auto;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-select__placeholder){color:var(--color-font-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-select__trigger-wrapper){color:currentcolor;flex:1;overflow:hidden;padding-right:8px;text-align:start}:where([data-cck-theme-name=cocokits] .cck-select__trigger-value){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:where([data-cck-theme-name=cocokits] .cck-select__overlay .cck-overlay__backdrop){background-color:transparent}:where([data-cck-theme-name=cocokits] .cck-select__dropdown-icon-wrapper .cck-svg-icon){height:var(--icon-size-sm);width:var(--icon-size-sm)}:where([data-cck-theme-name=cocokits] .cck-suffix){flex-grow:0}:where([data-cck-theme-name=cocokits] .cck-suffix .cck-svg-icon.cck-svg-icon--default-size){height:var(--icon-size-xs);width:var(--icon-size-xs)}:where([data-cck-theme-name=cocokits] .cck-suffix .cck-svg-icon.cck-svg-icon--default-color .cck-svg-icon__svg){fill:var(--form_field-color-icon-light)}:where([data-cck-theme-name=cocokits] .cck-textarea){background-color:transparent;border:none;color:var(--color-font-default);font:var(--text-md-regular);min-height:24px;min-width:100%;outline:none;padding:0;scrollbar-color:var(--form_field-color-border) transparent}:where([data-cck-theme-name=cocokits] .cck-textarea::-moz-placeholder){color:var(--color-font-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-textarea::placeholder){color:var(--color-font-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-textarea::-webkit-resizer){background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="%238897AE"><path d="M2.4,12.6c-0.3-0.3-0.3-0.7-0.1-0.9l9.4-9.4c0.2-0.2,0.6-0.1,0.9,0.1s0.3,0.7,0.1,0.9l-9.4,9.4C3.1,12.9,2.7,12.8,2.4,12.6z M7.1,12.8c-0.3-0.3-0.3-0.6-0.2-0.8L12,6.9c0.2-0.2,0.5-0.1,0.8,0.2c0.3,0.3,0.3,0.6,0.2,0.8L7.8,13C7.7,13.1,7.3,13,7.1,12.8z"/></svg>');height:16px;width:16px}:where([data-cck-theme-name=cocokits] .cck-textarea):disabled{cursor:default;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-toggle){-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-toggle):not(.cck-toggle--disabled){cursor:pointer}:where([data-cck-theme-name=cocokits] .cck-toggle__label){align-items:center;color:var(--color-font-default);display:flex;font:var(--text-sm-regular);gap:var(--toggle-spacing-gap)}:where([data-cck-theme-name=cocokits] .cck-toggle__label):not(.cck-toggle--disabled){cursor:pointer}:where([data-cck-theme-name=cocokits] .cck-toggle--label-before .cck-toggle__label){flex-direction:row-reverse}:where([data-cck-theme-name=cocokits] .cck-toggle__slider-wrapper){border-radius:100px;position:relative;width:var(--toggle-size-width-sm)}:where([data-cck-theme-name=cocokits] .cck-toggle__input){cursor:pointer;height:100%;margin:0;opacity:0;padding:0;position:relative;width:100%;z-index:3}:where([data-cck-theme-name=cocokits] .cck-toggle__thumb){background-color:var(--toggle-color-thumb);border:2px solid var(--toggle-color-thumb-border);border-radius:100px;left:0;position:absolute;top:50%;transform:translateY(-50%);transition:all .3s ease,left .3s cubic-bezier(.18,.89,.35,1.15);z-index:2}:where([data-cck-theme-name=cocokits] .cck-toggle__backdrop){background-color:var(--toggle-color-backdrop-unselected);border-radius:100px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:all .3s ease;z-index:1}:where([data-cck-theme-name=cocokits] .cck-toggle--disabled){color:var(--color-disabled-font);cursor:default;pointer-events:none}:where([data-cck-theme-name=cocokits] .cck-toggle--disabled .cck-toggle__thumb){background-color:var(--toggle-color-thumb-disabled)}:where([data-cck-theme-name=cocokits] .cck-toggle--disabled .cck-toggle__backdrop){background-color:var(--toggle-color-backdrop-disabled)}:where([data-cck-theme-name=cocokits] .cck-toggle--checked .cck-toggle__thumb){left:100%;transform:translate(-100%,-50%)}:where([data-cck-theme-name=cocokits] .cck-toggle--checked:active .cck-toggle__thumb){margin-left:calc(var(--toggle-size-bounce)/2*-1)}:where([data-cck-theme-name=cocokits] .cck-toggle--unchecked:active .cck-toggle__thumb){margin-left:calc(var(--toggle-size-bounce)/2)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--brand:not(.cck-toggle--disabled).cck-toggle--checked .cck-toggle__backdrop){background-color:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--brand:not(.cck-toggle--disabled):hover .cck-toggle__thumb){border-color:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--info:not(.cck-toggle--disabled).cck-toggle--checked .cck-toggle__backdrop){background-color:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--info:not(.cck-toggle--disabled):hover .cck-toggle__thumb){border-color:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--warning:not(.cck-toggle--disabled).cck-toggle--checked .cck-toggle__backdrop){background-color:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--warning:not(.cck-toggle--disabled):hover .cck-toggle__thumb){border-color:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--error:not(.cck-toggle--disabled).cck-toggle--checked .cck-toggle__backdrop){background-color:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--error:not(.cck-toggle--disabled):hover .cck-toggle__thumb){border-color:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--h-contrast:not(.cck-toggle--disabled).cck-toggle--checked .cck-toggle__backdrop){background-color:var(--color-h-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--h-contrast:not(.cck-toggle--disabled):hover .cck-toggle__thumb){border-color:var(--color-h-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__size--sm .cck-toggle__slider-wrapper){width:var(--toggle-size-width-sm)}:where([data-cck-theme-name=cocokits] .cck-toggle__size--sm .cck-toggle__thumb){height:var(--toggle-size-thumb-sm);width:var(--toggle-size-thumb-sm)}:where([data-cck-theme-name=cocokits] .cck-toggle__size--sm .cck-toggle__backdrop){height:var(--toggle-size-backdrop-sm);width:calc(var(--toggle-size-width-sm) - var(--toggle-size-thumb-sm))}:where([data-cck-theme-name=cocokits] .cck-toggle__size--sm:active .cck-toggle__thumb){width:calc(var(--toggle-size-thumb-sm) + var(--toggle-size-bounce))}:where([data-cck-theme-name=cocokits] .cck-toggle__size--md .cck-toggle__slider-wrapper){width:var(--toggle-size-width-md)}:where([data-cck-theme-name=cocokits] .cck-toggle__size--md .cck-toggle__backdrop){height:var(--toggle-size-backdrop-md);width:calc(var(--toggle-size-width-md) - var(--toggle-size-thumb-md))}:where([data-cck-theme-name=cocokits] .cck-toggle__size--md .cck-toggle__thumb){height:var(--toggle-size-thumb-md);width:var(--toggle-size-thumb-md)}:where([data-cck-theme-name=cocokits] .cck-toggle__size--md:active .cck-toggle__thumb){width:calc(var(--toggle-size-thumb-md) + var(--toggle-size-bounce))}:where([data-cck-theme-name=cocokits] .cck-toggle__size--lg .cck-toggle__slider-wrapper){width:var(--toggle-size-width-lg)}:where([data-cck-theme-name=cocokits] .cck-toggle__size--lg .cck-toggle__backdrop){height:var(--toggle-size-backdrop-lg);width:calc(var(--toggle-size-width-lg) - var(--toggle-size-thumb-lg))}:where([data-cck-theme-name=cocokits] .cck-toggle__size--lg .cck-toggle__thumb){height:var(--toggle-size-thumb-lg);width:var(--toggle-size-thumb-lg)}:where([data-cck-theme-name=cocokits] .cck-toggle__size--lg:active .cck-toggle__thumb){width:calc(var(--toggle-size-thumb-lg) + var(--toggle-size-bounce))}:where([data-cck-theme-name=cocokits] .cck-trailing){align-items:center;border:1px solid var(--form_field-color-border);border-left:none;color:var(--color-font-alpha-7);display:flex;flex-grow:0;gap:var(--form_field-spacing-trailing-gap);justify-content:center;padding:0 var(--form_field-spacing-input-wrapper-h-padding);-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-trailing .cck-select){color:currentcolor;font:inherit}:where([data-cck-theme-name=cocokits] .cck-trailing__regular){font:var(--text-sm-regular)}:where([data-cck-theme-name=cocokits] .cck-trailing__medium){font:var(--text-sm-medium)}:where([data-cck-theme-name=cocokits] .cck-trailing--clickable){cursor:pointer;transition:background-color .1s}:where([data-cck-theme-name=cocokits] .cck-trailing .cck-svg-icon.cck-svg-icon--default-size){height:var(--icon-size-xs);width:var(--icon-size-xs)}:where([data-cck-theme-name=cocokits] .cck-trailing__color--transparent){background-color:transparent}:where([data-cck-theme-name=cocokits] .cck-trailing__color--transparent.cck-trailing--clickable):active{background-color:var(--color-surface-inverse-alpha-4)}:where([data-cck-theme-name=cocokits] .cck-trailing__color--transparent.cck-trailing--clickable):hover:not(:active){background-color:var(--color-surface-inverse-alpha-1)}:where([data-cck-theme-name=cocokits] .cck-trailing__color--grey){background-color:var(--color-surface-inverse-alpha-1)}:where([data-cck-theme-name=cocokits] .cck-trailing__color--grey.cck-trailing--clickable):active{background-color:var(--color-surface-inverse-alpha-4)}:where([data-cck-theme-name=cocokits] .cck-trailing__color--grey.cck-trailing--clickable):hover:not(:active){background-color:var(--color-surface-inverse-alpha-3)}:where([data-cck-theme-name=cocokits] .cck-trailing .cck-svg-icon.cck-svg-icon--default-color .cck-svg-icon__svg){fill:var(--form_field-color-icon)}:where([data-cck-theme-name=cocokits] .cck-avatar){align-items:center;border-radius:50%;display:flex;justify-content:center;overflow:hidden}:where([data-cck-theme-name=cocokits] .cck-avatar__fallback-image),:where([data-cck-theme-name=cocokits] .cck-avatar__image),:where([data-cck-theme-name=cocokits] .cck-avatar__placeholder-image){border-radius:inherit;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}:where([data-cck-theme-name=cocokits] .cck-avatar--with-label){background-color:var(--color-brand-light);color:var(--color-font-default)}:where([data-cck-theme-name=cocokits] .cck-avatar--clickable){cursor:pointer}:where([data-cck-theme-name=cocokits] .cck-avatar__size--xs){height:var(--size-28);width:var(--size-28)}:where([data-cck-theme-name=cocokits] .cck-avatar__size--xs.cck-avatar--with-label){font:var(--text-xs-semibold)}:where([data-cck-theme-name=cocokits] .cck-avatar__size--sm){height:var(--size-32);width:var(--size-32)}:where([data-cck-theme-name=cocokits] .cck-avatar__size--sm.cck-avatar--with-label){font:var(--text-sm-semibold)}:where([data-cck-theme-name=cocokits] .cck-avatar__size--md){height:var(--size-40);width:var(--size-40)}:where([data-cck-theme-name=cocokits] .cck-avatar__size--md.cck-avatar--with-label){font:var(--text-md-semibold)}:where([data-cck-theme-name=cocokits] .cck-avatar__size--lg){height:var(--size-48);width:var(--size-48)}:where([data-cck-theme-name=cocokits] .cck-avatar__size--lg.cck-avatar--with-label){font:var(--text-lg-semibold)}:where([data-cck-theme-name=cocokits] .cck-avatar-group){display:flex}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-left){direction:rtl}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-left.cck-avatar-group__size--xs .cck-avatar):not(:last-of-type){margin-left:-10px}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-left.cck-avatar-group__size--sm .cck-avatar):not(:last-of-type){margin-left:-10px}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-left.cck-avatar-group__size--md .cck-avatar):not(:last-of-type){margin-left:-14px}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-left.cck-avatar-group__size--lg .cck-avatar):not(:last-of-type){margin-left:-16px}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-right.cck-avatar-group__size--xs .cck-avatar):not(:first-of-type){margin-left:-10px}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-right.cck-avatar-group__size--sm .cck-avatar):not(:first-of-type){margin-left:-10px}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-right.cck-avatar-group__size--md .cck-avatar):not(:first-of-type){margin-left:-14px}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-right.cck-avatar-group__size--lg .cck-avatar):not(:first-of-type){margin-left:-16px}:where([data-cck-theme-name=cocokits] .cck-avatar-group .cck-avatar){border:2px solid var(--color-border-light)}:where([data-cck-theme-name=cocokits] .cck-avatar-label){align-items:center;display:flex}:where([data-cck-theme-name=cocokits] .cck-avatar-label__title){color:var(--color-font-default)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__description){color:var(--color-font-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__label-wrapper){display:flex}:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-right){flex-direction:row-reverse}:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-right .cck-avatar-label__label-wrapper){text-align:right}:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-left){flex-direction:row}:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-top){flex-direction:column}:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-bottom){flex-direction:column-reverse}:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-bottom.cck-avatar-label--label-vertical .cck-avatar-label__label-wrapper),:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-top.cck-avatar-label--label-vertical .cck-avatar-label__label-wrapper){align-items:center}:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-left.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper),:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-right.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){align-items:center}:where([data-cck-theme-name=cocokits] .cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){align-items:center;flex-direction:row}:where([data-cck-theme-name=cocokits] .cck-avatar-label--label-vertical .cck-avatar-label__label-wrapper){flex-direction:column;justify-content:center}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--xs){gap:var(--size-12)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--xs .cck-avatar-label__label-wrapper){font:var(--text-xs-medium)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--xs.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){gap:var(--size-12)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--sm){gap:var(--size-12)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--sm .cck-avatar-label__label-wrapper){font:var(--text-sm-medium)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--sm.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){gap:var(--size-12)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--md){gap:var(--size-12)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--md .cck-avatar-label__label-wrapper){font:var(--text-md-medium)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--md.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){gap:var(--size-12)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--lg){gap:var(--size-20)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--lg .cck-avatar-label__label-wrapper){font:var(--text-md-medium)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--lg.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){gap:var(--size-20)}:where([data-cck-theme-name=cocokits] .cck-accordion){display:flex;flex-direction:column}:where([data-cck-theme-name=cocokits] .cck-accordion__default.cck-accordion__size--sm){gap:var(--size-12)}:where([data-cck-theme-name=cocokits] .cck-accordion__default.cck-accordion__size--md){gap:var(--size-20)}:where([data-cck-theme-name=cocokits] .cck-accordion__group){border:1px solid var(--color-border-default);border-radius:6px}:where([data-cck-theme-name=cocokits] .cck-accordion-header--trigger-icon>.cck-accordion-header__icon-btn):hover{background-color:var(--color-h-contrast-alpha-1)}:where([data-cck-theme-name=cocokits] .cck-accordion-header--trigger-header){cursor:pointer}:where([data-cck-theme-name=cocokits] .cck-accordion-header--trigger-header>.cck-accordion-header__icon-btn):hover{background-color:transparent}:where([data-cck-theme-name=cocokits] .cck-accordion-header){align-items:center;color:var(--color-font-default);display:flex}:where([data-cck-theme-name=cocokits] .cck-accordion-header .cck-svg-icon.cck-svg-icon--default-color){fill:var(--color-font-default)}:where([data-cck-theme-name=cocokits] .cck-accordion-header>.cck-accordion-header__icon-btn){background-color:transparent;fill:var(--color-font-default);align-items:center;border:none;border-radius:4px;cursor:pointer;display:flex;justify-self:center;outline:none}:where([data-cck-theme-name=cocokits] .cck-accordion-header--icon-right>.cck-accordion-header__icon-btn){margin-left:auto}:where([data-cck-theme-name=cocokits] .cck-accordion-header--icon-left){flex-direction:row-reverse;justify-content:flex-end}:where([data-cck-theme-name=cocokits] .cck-accordion__size--sm>.cck-accordion-panel>.cck-accordion-header){height:var(--size-48)}:where([data-cck-theme-name=cocokits] .cck-accordion__size--sm>.cck-accordion-panel>.cck-accordion-header>.cck-accordion-header__icon-btn){height:36px;width:36px}:where([data-cck-theme-name=cocokits] .cck-accordion__size--md>.cck-accordion-panel .cck-accordion-header){height:var(--size-56)}:where([data-cck-theme-name=cocokits] .cck-accordion__size--md>.cck-accordion-panel .cck-accordion-header>.cck-accordion-header__icon-btn){height:36px;width:36px}:where([data-cck-theme-name=cocokits] .cck-accordion-panel>.cck-accordion-header){font:var(--text-md-medium)}:where([data-cck-theme-name=cocokits] .cck-accordion-panel>.cck-accordion-header.cck-accordion-header--icon-right){padding-left:var(--size-20);padding-right:calc(var(--size-20) - 10px)}:where([data-cck-theme-name=cocokits] .cck-accordion-panel>.cck-accordion-header.cck-accordion-header--icon-left){padding-left:calc(var(--size-20) - 10px);padding-right:var(--size-20)}:where([data-cck-theme-name=cocokits] .cck-accordion__default>.cck-accordion-panel--collapsed>.cck-accordion-header),:where([data-cck-theme-name=cocokits] .cck-accordion__group>.cck-accordion-panel--collapsed>.cck-accordion-header){background-color:var(--color-h-contrast-alpha-2)}:where([data-cck-theme-name=cocokits] .cck-accordion__basic>.cck-accordion-panel>.cck-accordion-header--trigger-header):hover{background-color:var(--color-h-contrast-alpha-2)}:where([data-cck-theme-name=cocokits] .cck-accordion-panel--disabled){color:var(--color-disabled-font);opacity:.5}:where([data-cck-theme-name=cocokits] .cck-accordion-panel--disabled>.cck-accordion-header){color:currentcolor}:where([data-cck-theme-name=cocokits] .cck-accordion-panel--disabled>.cck-accordion-header.cck-accordion-header--trigger-header){cursor:not-allowed}:where([data-cck-theme-name=cocokits] .cck-accordion-panel--disabled>.cck-accordion-header>.cck-accordion-header__icon-btn){display:none}:where([data-cck-theme-name=cocokits] .cck-accordion-panel){color:var(--color-font-default);font:var(--text-md-regular);overflow:hidden;transition:padding-bottom .3s}:where([data-cck-theme-name=cocokits] .cck-accordion--instant-animation>.cck-accordion-panel){transition:none}:where([data-cck-theme-name=cocokits] .cck-accordion-panel--collapsed){padding-bottom:0}:where([data-cck-theme-name=cocokits] .cck-accordion__size--sm>.cck-accordion-panel.cck-accordion-panel--expanded){padding-bottom:var(--size-20)}:where([data-cck-theme-name=cocokits] .cck-accordion__size--sm>.cck-accordion-panel>.cck-accordion-panel__content-wrapper){padding-left:var(--size-20);padding-right:var(--size-20)}:where([data-cck-theme-name=cocokits] .cck-accordion__size--md>.cck-accordion-panel.cck-accordion-panel--expanded){padding-bottom:var(--size-20)}:where([data-cck-theme-name=cocokits] .cck-accordion__size--md>.cck-accordion-panel>.cck-accordion-panel__content-wrapper){padding-left:var(--size-20);padding-right:var(--size-20)}:where([data-cck-theme-name=cocokits] .cck-accordion__default>.cck-accordion-panel){border:1px solid var(--color-border-default);border-radius:6px}:where([data-cck-theme-name=cocokits] .cck-accordion__basic>.cck-accordion-panel):not(:last-of-type),:where([data-cck-theme-name=cocokits] .cck-accordion__group>.cck-accordion-panel):not(:last-of-type){border-bottom:1px solid var(--color-border-default)}:where([data-cck-theme-name=cocokits] .cck-tabs){opacity:1}:where([data-cck-theme-name=frames-x] .cck-button){align-items:center;border:none;border-radius:var(--radi-6);box-sizing:border-box;cursor:pointer;display:inline-flex;justify-content:center;margin:0;outline:transparent;transition:all .1s}:where([data-cck-theme-name=frames-x] .cck-button):focus-visible{box-shadow:0 0 0 3px var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-button .cck-svg-icon--default-color .cck-svg-icon__svg){fill:currentcolor}:where([data-cck-theme-name=frames-x] .cck-button__backdrop){display:none}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--brand){background-color:var(--state-brand-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--brand):hover{background-color:var(--state-brand-hover)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--brand):active{background-color:var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--brand):disabled{background-color:var(--base-fill-1);color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--highlight){background-color:var(--state-highlight-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--highlight):hover{background-color:var(--state-highlight-hover)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--highlight):active{background-color:var(--state-highlight-selected)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--highlight):disabled{background-color:var(--base-fill-1);color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--success){background-color:var(--state-success-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--success):hover{background-color:var(--state-success-hover)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--success):active{background-color:var(--state-success-selected)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--success):disabled{background-color:var(--base-fill-1);color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--danger){background-color:var(--state-danger-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--danger):hover{background-color:var(--state-danger-hover)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--danger):active{background-color:var(--state-danger-selected)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--danger):disabled{background-color:var(--base-fill-1);color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__secondary){background-color:var(--base-surface-2);border:1px solid var(--base-border);color:var(--text-dark-primary);outline:1px solid transparent}:where([data-cck-theme-name=frames-x] .cck-button__secondary):hover{background-color:var(--base-fill-2);border:1px solid var(--base-fill-2)}:where([data-cck-theme-name=frames-x] .cck-button__secondary):active{background-color:var(--base-fill-1);border:1px solid var(--base-border)}:where([data-cck-theme-name=frames-x] .cck-button__secondary):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__ghost){background-color:var(--base-surface-1);outline:1px solid transparent}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--brand){border:1px solid var(--state-brand-active);color:var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--brand):hover{border:1px solid var(--state-brand-hover);outline:1px solid var(--state-brand-hover)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--brand):active{border:1px solid var(--state-brand-selected);outline:1px solid var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--brand):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--highlight){border:1px solid var(--state-highlight-active);color:var(--state-highlight-active)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--highlight):hover{border:1px solid var(--state-highlight-hover);outline:1px solid var(--state-highlight-hover)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--highlight):active{border:1px solid var(--state-highlight-selected);outline:1px solid var(--state-highlight-selected)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--highlight):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--success){border:1px solid var(--state-success-active);color:var(--state-success-active)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--success):hover{border:1px solid var(--state-success-hover);outline:1px solid var(--state-success-hover)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--success):active{border:1px solid var(--state-success-selected);outline:1px solid var(--state-success-selected)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--success):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--danger){border:1px solid var(--state-danger-active);color:var(--state-danger-active)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--danger):hover{border:1px solid var(--state-danger-hover);outline:1px solid var(--state-danger-hover)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--danger):active{border:1px solid var(--state-danger-selected);outline:1px solid var(--state-danger-selected)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--danger):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__size--sm){font:var(--text-sm-font-semibold);gap:var(--spacing-3);height:36px;padding:var(--spacing-0) var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-button__size--md){font:var(--text-base-font-semibold);gap:var(--spacing-5);height:44px;padding:var(--spacing-0) var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-button__size--lg){font:var(--text-lg-font-semibold);gap:var(--spacing-7);height:44px;padding:var(--spacing-0) var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-button__size--xl){font:var(--text-xl-font-semibold);gap:var(--spacing-7);height:56px;padding:var(--spacing-0) var(--spacing-10)}:where([data-cck-theme-name=frames-x] .cck-checkbox){display:flex;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-checkbox__wrapper){align-items:center;display:inline-flex;vertical-align:middle}:where([data-cck-theme-name=frames-x] .cck-checkbox__input-wrapper){box-sizing:content-box;cursor:pointer;display:inline-block;flex-shrink:0;line-height:0;position:relative;white-space:nowrap}:where([data-cck-theme-name=frames-x] .cck-checkbox__input){cursor:inherit;height:100%;left:0;margin:0;opacity:0;padding:0;position:absolute;right:0;top:0;width:100%}:where([data-cck-theme-name=frames-x] .cck-checkbox__input:focus-visible~.cck-checkbox__background){border:2px solid var(--state-brand-selected);box-shadow:0 0 0 1px var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-checkbox__background){align-items:center;background-color:var(--base-fill-1);border:2px solid var(--base-border);border-radius:var(--radi-4);box-sizing:border-box;display:flex;height:100%;justify-content:center;pointer-events:none;position:absolute;transition:background-color 90ms cubic-bezier(.4,0,.6,1),border-color 90ms cubic-bezier(.4,0,.6,1);width:100%;will-change:background-color,outline-color}:where([data-cck-theme-name=frames-x] .cck-checkbox.cck-checkbox--disabled .cck-checkbox__background){background-color:var(--base-disabled);border:2px solid transparent}:where([data-cck-theme-name=frames-x] .cck-checkbox.cck-checkbox--disabled .cck-checkbox__label){color:var(--base-disabled)}:where([data-cck-theme-name=frames-x] .cck-checkbox.cck-checkbox--disabled *){cursor:default}:where([data-cck-theme-name=frames-x] .cck-checkbox--checked .cck-checkbox__background){background-color:var(--state-brand-active);border:2px solid var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-checkbox--checked .cck-checkbox__checkmark){opacity:1}:where([data-cck-theme-name=frames-x] .cck-checkbox--indeterminate .cck-checkbox__background){background-color:var(--state-brand-active);border:2px solid var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-checkbox--indeterminate .cck-checkbox__checkmark){opacity:0;transform:rotate(45deg);transition:opacity 90ms cubic-bezier(.4,0,.6,1),transform 90ms cubic-bezier(.4,0,.6,1)}:where([data-cck-theme-name=frames-x] .cck-checkbox--indeterminate .cck-checkbox__mixedmark){opacity:1;transform:scaleX(1) rotate(0deg)}:where([data-cck-theme-name=frames-x] .cck-checkbox__mixedmark){border:2px solid #fff;border-radius:100px;height:0;margin:2px;opacity:0;transform:scaleX(0) rotate(0deg);transition:opacity 90ms cubic-bezier(.4,0,.6,1),transform 90ms cubic-bezier(.4,0,.6,1);width:100%}:where([data-cck-theme-name=frames-x] .cck-checkbox__checkmark){color:#fff;inset:0;opacity:0;padding:2px;position:absolute;transition:opacity .18s cubic-bezier(.4,0,.6,1);width:100%}:where([data-cck-theme-name=frames-x] .cck-checkbox__checkmark-path){fill:currentcolor}:where([data-cck-theme-name=frames-x] .cck-checkbox__label){color:var(--text-dark-primary);cursor:pointer;margin-left:0;margin-right:auto;order:0;padding-left:0;padding-right:0;text-align:left;white-space:nowrap}:where([data-cck-theme-name=frames-x] .cck-checkbox__label):empty{display:none}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--sm .cck-checkbox__wrapper){gap:var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--sm .cck-checkbox__input-wrapper){height:22px;width:22px}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--sm .cck-checkbox__label){font:var(--text-sm-font-medium)}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--md .cck-checkbox__wrapper){gap:var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--md .cck-checkbox__input-wrapper){height:24px;width:24px}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--md .cck-checkbox__label){font:var(--text-base-font-medium)}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--lg .cck-checkbox__wrapper){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--lg .cck-checkbox__input-wrapper){height:32px;width:32px}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--lg .cck-checkbox__label){font:var(--text-lg-font-medium)}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--xl .cck-checkbox__wrapper){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--xl .cck-checkbox__input-wrapper){height:32px;width:32px}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--xl .cck-checkbox__label){font:var(--text-xl-font-medium)}:where([data-cck-theme-name=frames-x] .cck-chip){align-items:center;background-color:var(--base-surface-2);border:1px solid var(--base-border);border-radius:var(--radi-5);color:var(--text-dark-primary);cursor:default;display:flex;transition:all .1s}:where([data-cck-theme-name=frames-x] .cck-chip--disabled){background-color:var(--base-fill-1);border:1px solid transparent;color:var(--base-disabled);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-chip__content-wrapper){align-items:center;display:flex;justify-content:center}:where([data-cck-theme-name=frames-x] .cck-chip__remove-icon-wrapper){align-items:center;display:flex;flex-shrink:0;justify-content:center}:where([data-cck-theme-name=frames-x] .cck-chip__remove-icon-wrapper .cck-icon-button){background-color:transparent;border-radius:50%;color:var(--base-fill-4);height:24px;padding:0;width:24px}:where([data-cck-theme-name=frames-x] .cck-chip__remove-icon-wrapper .cck-icon-button):hover{background-color:var(--base-fill-1)}:where([data-cck-theme-name=frames-x] .cck-chip__remove-icon-wrapper .cck-icon-button .cck-svg-icon){height:100%;width:100%}:where([data-cck-theme-name=frames-x] .cck-chip__size--sm){font:var(--text-xs-font-medium);gap:var(--spacing-4);height:26px;padding:0 var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-chip__size--sm.cck-chip--removable){padding:0 var(--spacing-6) 0 var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-chip__size--md){font:var(--text-base-font-medium);gap:var(--spacing-4);height:34px;padding:0 var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-chip__size--md.cck-chip--removable){padding:0 var(--spacing-7) 0 var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-chip__size--lg){font:var(--text-lg-font-medium);gap:var(--spacing-6);height:44px;padding:0 var(--spacing-9)}:where([data-cck-theme-name=frames-x] .cck-chip__size--lg.cck-chip--removable){padding:0 var(--spacing-8) 0 var(--spacing-9)}:where([data-cck-theme-name=frames-x] .cck-chip-list){align-items:stretch;display:flex;flex-wrap:wrap;justify-content:flex-start}:where([data-cck-theme-name=frames-x] .cck-chip-list__input){background:transparent;border:none;color:var(--text-dark-primary);flex:1;font:var(--text-base-font-medium);outline:none}:where([data-cck-theme-name=frames-x] .cck-chip-list__input::-moz-placeholder){color:var(--text-dark-tertiary);-moz-transition:color .1s ease-in;transition:color .1s ease-in}:where([data-cck-theme-name=frames-x] .cck-chip-list__input::placeholder){color:var(--text-dark-tertiary);transition:color .1s ease-in}:where([data-cck-theme-name=frames-x] .cck-chip-list__input::-moz-placeholder):not(:focus){color:transparent}:where([data-cck-theme-name=frames-x] .cck-chip-list__input::placeholder):not(:focus){color:transparent}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--sm){gap:6px}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--sm .cck-chip-list__input){font:var(--text-xs-font-medium);height:26px;margin-left:var(--spacing-5)}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--sm .cck-chip-list__input):first-child{margin-left:calc(var(--spacing-6) - 4px)}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--md){gap:6px}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--md .cck-chip-list__input){font:var(--text-base-font-medium);height:34px;margin-left:var(--spacing-6)}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--md .cck-chip-list__input):first-child{margin-left:calc(var(--spacing-7) - 4px)}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--lg){gap:6px}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--lg .cck-chip-list__input){font:var(--text-lg-font-medium);height:44px;margin-left:var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--lg .cck-chip-list__input):first-child{margin-left:calc(var(--spacing-7) - 6px)}:where([data-cck-theme-name=frames-x] *){box-sizing:border-box}:where([data-cck-theme-name=frames-x] .cck-divider){background-color:var(--base-border);display:block;flex-shrink:0}:where([data-cck-theme-name=frames-x] .cck-divider__horizontal){margin:4px 0;width:100%}:where([data-cck-theme-name=frames-x] .cck-divider__horizontal.cck-divider__size--sm){height:1px}:where([data-cck-theme-name=frames-x] .cck-divider__horizontal.cck-divider__size--md){height:2px;width:100%}:where([data-cck-theme-name=frames-x] .cck-divider__vertical){height:100%;margin:0 4px}:where([data-cck-theme-name=frames-x] .cck-divider__vertical.cck-divider__size--sm){width:1px}:where([data-cck-theme-name=frames-x] .cck-divider__vertical.cck-divider__size--md){width:2px}:where([data-cck-theme-name=frames-x] .cck-error){color:var(--state-danger-active);display:flex;font:var(--text-sm-font-medium);gap:6px}:where([data-cck-theme-name=frames-x] .cck-error .cck-svg-icon--default-color .cck-svg-icon__svg){fill:currentcolor}:where([data-cck-theme-name=frames-x] .cck-form-field){align-items:flex-start;display:flex;flex-direction:column;gap:10px;min-width:100px}:where([data-cck-theme-name=frames-x] .cck-form-field .cck-select){flex:1;height:100%;width:100%}:where([data-cck-theme-name=frames-x] .cck-form-field .cck-input){flex:1;width:100%}:where([data-cck-theme-name=frames-x] .cck-form-field--error .cck-form-field__wrapper){border:1px solid var(--state-danger-active);outline:1px solid var(--state-danger-active)}:where([data-cck-theme-name=frames-x] .cck-form-field--focused .cck-form-field__wrapper){background-color:var(--base-surface-2);border:1px solid var(--state-brand-active);outline:1px solid var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-form-field--disabled .cck-form-field__wrapper){background-color:var(--base-fill-1);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-form-field__wrapper){align-items:stretch;background-color:var(--base-surface-1);border:1px solid var(--base-border);border-radius:var(--radi-6);display:flex;flex-direction:row;outline:1px solid transparent;overflow:hidden;width:100%}:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm.cck-form-field--with-input .cck-form-field__wrapper),:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm.cck-form-field--with-select .cck-form-field__wrapper){height:36px}:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm.cck-form-field--with-input .cck-form-field__input-wrapper),:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm.cck-form-field--with-select .cck-form-field__input-wrapper){padding:0 var(--spacing-6) 0 var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm .cck-form-field--with-textarea .cck-form-field__input-wrapper){padding:var(--spacing-6) var(--spacing-6) var(--spacing-6) var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm.cck-form-field--with-chip-list .cck-form-field__input-wrapper){padding:4px}:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm .cck-input),:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm .cck-leading),:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm .cck-select),:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm .cck-textarea),:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm .cck-trailing){font:var(--text-sm-font-medium)}:where([data-cck-theme-name=frames-x] .cck-form-field__size--md.cck-form-field--with-input .cck-form-field__wrapper),:where([data-cck-theme-name=frames-x] .cck-form-field__size--md.cck-form-field--with-select .cck-form-field__wrapper){height:44px}:where([data-cck-theme-name=frames-x] .cck-form-field__size--md.cck-form-field--with-input .cck-form-field__input-wrapper),:where([data-cck-theme-name=frames-x] .cck-form-field__size--md.cck-form-field--with-select .cck-form-field__input-wrapper){padding:0 var(--spacing-7) 0 var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-form-field__size--md .cck-form-field--with-textarea .cck-form-field__input-wrapper){padding:var(--spacing-7) var(--spacing-7) var(--spacing-7) var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-form-field__size--md.cck-form-field--with-chip-list .cck-form-field__input-wrapper){padding:4px}:where([data-cck-theme-name=frames-x] .cck-form-field__size--md .cck-input),:where([data-cck-theme-name=frames-x] .cck-form-field__size--md .cck-leading),:where([data-cck-theme-name=frames-x] .cck-form-field__size--md .cck-select),:where([data-cck-theme-name=frames-x] .cck-form-field__size--md .cck-textarea),:where([data-cck-theme-name=frames-x] .cck-form-field__size--md .cck-trailing){font:var(--text-base-font-medium)}:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg.cck-form-field--with-input .cck-form-field__wrapper),:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg.cck-form-field--with-select .cck-form-field__wrapper){height:56px}:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg.cck-form-field--with-input .cck-form-field__input-wrapper),:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg.cck-form-field--with-select .cck-form-field__input-wrapper){padding:0 var(--spacing-7) 0 var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg .cck-form-field--with-textarea .cck-form-field__input-wrapper){padding:var(--spacing-7) var(--spacing-7) var(--spacing-7) var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg.cck-form-field--with-chip-list .cck-form-field__input-wrapper){padding:6px}:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg .cck-input),:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg .cck-leading),:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg .cck-select),:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg .cck-textarea),:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg .cck-trailing){font:var(--text-lg-font-medium)}:where([data-cck-theme-name=frames-x] .cck-form-field__feedback-wrapper){display:flex;flex-direction:column;overflow:hidden}:where([data-cck-theme-name=frames-x] .cck-form-field__feedback-wrapper):empty{display:none}:where([data-cck-theme-name=frames-x] .cck-form-field__input-wrapper){align-items:center;display:flex;flex:1;flex-direction:row;gap:8px;min-width:0}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list .cck-chip-list){flex:1}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list .cck-form-field__wrapper){cursor:text}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list .cck-prefix),:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list .cck-suffix){align-self:flex-start}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list.cck-form-field__size--sm .cck-suffix){margin-right:4px;margin-top:6px}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list.cck-form-field__size--md .cck-suffix){margin-right:4px;margin-top:8px}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list.cck-form-field__size--lg .cck-suffix){margin-left:4px;margin-right:8px;margin-top:12px}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list.cck-form-field__size--sm .cck-prefix){margin-left:4px;margin-top:6px}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list.cck-form-field__size--md .cck-prefix){margin-left:4px;margin-top:8px}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list.cck-form-field__size--lg .cck-prefix){margin-left:8px;margin-right:4px;margin-top:12px}:where([data-cck-theme-name=frames-x] .cck-form-field--with-textarea .cck-form-field__input-wrapper){padding:10px 10px 10px 16px}:where([data-cck-theme-name=frames-x] .cck-form-field--with-textarea .cck-form-field__input-wrapper):hover:not(:has(textarea:focus-visible)){background-color:var(--base-fill-1)}:where([data-cck-theme-name=frames-x] .cck-form-field--with-input .cck-form-field__input-wrapper):hover:not(:has(input:focus-visible)),:where([data-cck-theme-name=frames-x] .cck-form-field--with-select .cck-form-field__input-wrapper):hover:not(:has(input:focus-visible)){background-color:var(--base-fill-1)}:where([data-cck-theme-name=frames-x] .cck-hint){color:var(--text-dark-secondary);display:flex;font:var(--text-sm-font-medium);gap:6px}:where([data-cck-theme-name=frames-x] .cck-hint .cck-svg-icon--default-color .cck-svg-icon__svg){fill:currentcolor}:where([data-cck-theme-name=frames-x] .cck-hint__color--default){color:var(--text-dark-secondary)}:where([data-cck-theme-name=frames-x] .cck-hint__color--success){color:var(--state-success-active)}:where([data-cck-theme-name=frames-x] .cck-svg-icon){align-items:center;display:flex;flex-shrink:0;justify-content:center}:where([data-cck-theme-name=frames-x] .cck-svg-icon__svg){height:100%;width:100%}:where([data-cck-theme-name=frames-x] .cck-svg-icon__size--xs){height:var(--icon-xs);width:var(--icon-xs)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__size--sm){height:var(--icon-sm);width:var(--icon-sm)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__size--md){height:var(--icon-md);width:var(--icon-md)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__size--lg){height:var(--icon-lg);width:var(--icon-lg)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__size--xl){height:var(--icon-xl);width:var(--icon-xl)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__size--2xl){height:var(--icon-2xl);width:var(--icon-2xl)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__size--3xl){height:var(--icon-3xl);width:var(--icon-3xl)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__size--4xl){height:var(--icon-4xl);width:var(--icon-4xl)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__color--grey){fill:var(--base-fill-4)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__color--brand){fill:var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__color--highlight){fill:var(--state-highlight-active)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__color--success){fill:var(--state-success-active)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__color--danger){fill:var(--state-danger-active)}:where([data-cck-theme-name=frames-x] .cck-icon-button){align-items:center;border:none;border-radius:var(--radi-6);box-sizing:border-box;cursor:pointer;display:inline-flex;justify-content:center;margin:0;outline:transparent;transition:all .1s}:where([data-cck-theme-name=frames-x] .cck-icon-button .cck-svg-icon--default-color){fill:currentcolor}:where([data-cck-theme-name=frames-x] .cck-icon-button):focus-visible{box-shadow:0 0 0 3px var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--brand){background-color:var(--state-brand-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--brand):hover{background-color:var(--state-brand-hover)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--brand):active{background-color:var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--brand):disabled{background-color:var(--base-fill-1);color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--highlight){background-color:var(--state-highlight-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--highlight):hover{background-color:var(--state-highlight-hover)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--highlight):active{background-color:var(--state-highlight-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--highlight):disabled{background-color:var(--base-fill-1);color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--success){background-color:var(--state-success-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--success):hover{background-color:var(--state-success-hover)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--success):active{background-color:var(--state-success-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--success):disabled{background-color:var(--base-fill-1);color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--danger){background-color:var(--state-danger-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--danger):hover{background-color:var(--state-danger-hover)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--danger):active{background-color:var(--state-danger-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--danger):disabled{background-color:var(--base-fill-1);color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__secondary){background-color:var(--base-surface-2);border:1px solid var(--base-border);color:var(--text-dark-primary);outline:1px solid transparent}:where([data-cck-theme-name=frames-x] .cck-icon-button__secondary):hover{background-color:var(--base-fill-2);border:1px solid var(--base-fill-2)}:where([data-cck-theme-name=frames-x] .cck-icon-button__secondary):active{background-color:var(--base-fill-1);border:1px solid var(--base-border)}:where([data-cck-theme-name=frames-x] .cck-icon-button__secondary):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost){background-color:var(--base-surface-1);outline:1px solid transparent}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--brand){border:1px solid var(--state-brand-active);color:var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--brand):hover{border:1px solid var(--state-brand-hover);outline:1px solid var(--state-brand-hover)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--brand):active{border:1px solid var(--state-brand-selected);outline:1px solid var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--brand):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--highlight){border:1px solid var(--state-highlight-active);color:var(--state-highlight-active)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--highlight):hover{border:1px solid var(--state-highlight-hover);outline:1px solid var(--state-highlight-hover)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--highlight):active{border:1px solid var(--state-highlight-selected);outline:1px solid var(--state-highlight-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--highlight):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--success){border:1px solid var(--state-success-active);color:var(--state-success-active)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--success):hover{border:1px solid var(--state-success-hover);outline:1px solid var(--state-success-hover)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--success):active{border:1px solid var(--state-success-selected);outline:1px solid var(--state-success-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--success):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--danger){border:1px solid var(--state-danger-active);color:var(--state-danger-active)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--danger):hover{border:1px solid var(--state-danger-hover);outline:1px solid var(--state-danger-hover)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--danger):active{border:1px solid var(--state-danger-selected);outline:1px solid var(--state-danger-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--danger):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__size--sm){height:36px;width:36px}:where([data-cck-theme-name=frames-x] .cck-icon-button__size--sm .cck-svg-icon--default-size){height:var(--icon-md);width:var(--icon-md)}:where([data-cck-theme-name=frames-x] .cck-icon-button__size--md){height:44px;width:44px}:where([data-cck-theme-name=frames-x] .cck-icon-button__size--md .cck-svg-icon--default-size){height:var(--icon-lg);width:var(--icon-lg)}:where([data-cck-theme-name=frames-x] .cck-icon-button__size--lg){height:44px;width:44px}:where([data-cck-theme-name=frames-x] .cck-icon-button__size--lg .cck-svg-icon--default-size){height:var(--icon-xl);width:var(--icon-xl)}:where([data-cck-theme-name=frames-x] .cck-icon-button__size--xl){height:56px;width:56px}:where([data-cck-theme-name=frames-x] .cck-icon-button__size--xl .cck-svg-icon--default-size){height:var(--icon-2xl);width:var(--icon-2xl)}:where([data-cck-theme-name=frames-x] .cck-input){background-color:transparent;border:none;color:var(--text-dark-primary);font:var(--text-base-font-medium);outline:none;text-overflow:ellipsis}:where([data-cck-theme-name=frames-x] .cck-input::-moz-placeholder){color:var(--text-dark-tertiary)}:where([data-cck-theme-name=frames-x] .cck-input::placeholder){color:var(--text-dark-tertiary)}:where([data-cck-theme-name=frames-x] .cck-input):disabled{color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-label){color:var(--text-dark-secondary);display:flex;font:var(--text-base-font-regular)}:where([data-cck-theme-name=frames-x] .cck-label__required-marker){margin-left:4px}:where([data-cck-theme-name=frames-x] .cck-leading){align-items:center;background-color:var(--base-surface-2);color:var(--text-dark-tertiary);cursor:default;display:flex;font:var(--text-base-font-medium);gap:var(--spacing-4);justify-content:center;padding:0 var(--spacing-7);-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-leading--clickable){cursor:pointer;transition:background-color .1s}:where([data-cck-theme-name=frames-x] .cck-leading--clickable):active{background-color:var(--base-fill-1)}:where([data-cck-theme-name=frames-x] .cck-leading--clickable):hover{background-color:var(--base-fill-2)}:where([data-cck-theme-name=frames-x] .cck-menu){background-color:var(--base-surface-1);border:1px solid var(--base-border);border-radius:var(--radi-6);box-shadow:0 8px 10px -6px rgba(13,16,23,.039),0 18px 22px -4px rgba(13,16,23,.078);display:flex;flex-direction:column;margin:4px 0;overflow:hidden;padding:0}:where([data-cck-theme-name=frames-x] .cck-menu__overlay .cck-overlay__backdrop){background-color:transparent}:where([data-cck-theme-name=frames-x] .cck-menu-item){align-items:center;color:var(--text-dark-secondary);display:flex;font:var(--text-base-font-medium);gap:var(--spacing-6);justify-content:flex-start;padding:var(--spacing-6) var(--spacing-5)}:where([data-cck-theme-name=frames-x] .cck-menu-item):not(.cck-menu-item--disabled){cursor:pointer}:where([data-cck-theme-name=frames-x] .cck-menu-item--disabled .cck-svg-icon.cck-svg-icon--default-color),:where([data-cck-theme-name=frames-x] .cck-menu-item--disabled){color:var(--base-disabled)}:where([data-cck-theme-name=frames-x] .cck-menu-item):not(.cck-menu-item--disabled):hover{background-color:var(--base-fill-1)}:where([data-cck-theme-name=frames-x] .cck-menu-item .cck-svg-icon.cck-svg-icon--default-size){height:var(--icon-lg);width:var(--icon-lg)}:where([data-cck-theme-name=frames-x] .cck-menu-item .cck-svg-icon.cck-svg-icon--default-color .cck-svg-icon__svg){fill:currentcolor}:where([data-cck-theme-name=frames-x] .cck-select__options-wrapper){background-color:var(--base-surface-1);border:1px solid var(--base-border);border-radius:var(--radi-6);height:inherit;margin-top:6px;max-height:inherit;overflow:auto}:where([data-cck-theme-name=frames-x] .cck-option__content-wrapper){flex:1}:where([data-cck-theme-name=frames-x] .cck-option){align-items:center;color:var(--text-dark-secondary);display:flex;font:var(--text-base-font-medium);gap:8px;padding:0 12px}:where([data-cck-theme-name=frames-x] .cck-option):not(.cck-option--disabled){cursor:pointer}:where([data-cck-theme-name=frames-x] .cck-option--disabled){color:var(--base-disabled);-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-option):not(.cck-option--disabled):hover{background-color:var(--base-fill-1)}:where([data-cck-theme-name=frames-x] .cck-option .cck-checkbox__input-wrapper){height:22px;width:22px}:where([data-cck-theme-name=frames-x] .cck-option--single.cck-option--selected){color:var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-option__size--sm){height:40px}:where([data-cck-theme-name=frames-x] .cck-option__size--md){height:48px}:where([data-cck-theme-name=frames-x] .cck-option__size--lg){height:56px}:where([data-cck-theme-name=frames-x] .cck-option__selected-checkmark .cck-svg-icon){height:var(--icon-md);width:var(--icon-md);fill:currentcolor}:where([data-cck-theme-name=frames-x] .cck-option-group){display:flex;flex-direction:column}:where([data-cck-theme-name=frames-x] .cck-option-group--label){align-items:center;color:var(--text-dark-primary);display:flex;font:var(--text-base-font-bold);padding:0 12px}:where([data-cck-theme-name=frames-x] .cck-option-group--disabled .cck-option-group--label){color:var(--base-disabled);-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-option-group .cck-option){padding:0 24px}:where([data-cck-theme-name=frames-x] .cck-option-group__size--sm .cck-option-group--label){height:40px}:where([data-cck-theme-name=frames-x] .cck-option-group__size--md .cck-option-group--label){height:48px}:where([data-cck-theme-name=frames-x] .cck-option-group__size--lg .cck-option-group--label){height:56px}:where([data-cck-theme-name=frames-x] .cck-prefix){flex-grow:0}:where([data-cck-theme-name=frames-x] .cck-prefix .cck-svg-icon.cck-svg-icon--default-size){height:var(--icon-md);width:var(--icon-md)}:where([data-cck-theme-name=frames-x] .cck-radio-button){color:var(--text-dark-primary);cursor:pointer}:where([data-cck-theme-name=frames-x] .cck-radio-button.cck-radio-button--disabled){color:var(--base-disabled);cursor:default;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-radio-button.cck-radio-button--disabled .cck-radio-button__input-wrapper){background-color:var(--base-disabled);border-color:transparent;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-radio-button.cck-radio-button--disabled .cck-radio-button__label){-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-radio-button:hover .cck-radio-button__input-wrapper){box-shadow:0 0 0 3px var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-radio-button__wrapper){align-items:center;display:inline-flex;vertical-align:middle}:where([data-cck-theme-name=frames-x] .cck-radio-button__input-wrapper){align-items:center;background-color:var(--base-fill-1);border:2px solid var(--base-border);border-radius:50%;display:flex;flex-shrink:0;justify-content:center;position:relative}:where([data-cck-theme-name=frames-x] .cck-radio-button__input){cursor:inherit;height:100%;left:0;margin:0;opacity:0;padding:0;position:absolute;right:0;top:0;width:100%;z-index:1}:where([data-cck-theme-name=frames-x] .cck-radio-button__background){background-color:var(--base-surface-1);border-radius:50%;opacity:0}:where([data-cck-theme-name=frames-x] .cck-radio-button__label){white-space:nowrap}:where([data-cck-theme-name=frames-x] .cck-radio-button--checked .cck-radio-button__input-wrapper){background-color:var(--state-brand-active);border-color:var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-radio-button--checked .cck-radio-button__background){opacity:1}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--sm){font:var(--text-sm-font-medium)}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--sm .cck-radio-button__wrapper){gap:var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--sm .cck-radio-button__input-wrapper){height:22px;width:22px}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--sm .cck-radio-button__background){height:12px;width:12px}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--md){font:var(--text-base-font-medium)}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--md .cck-radio-button__wrapper){gap:var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--md .cck-radio-button__input-wrapper){height:24px;width:24px}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--md .cck-radio-button__background){height:12px;width:12px}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--lg){font:var(--text-lg-font-medium)}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--lg .cck-radio-button__wrapper){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--lg .cck-radio-button__input-wrapper){height:32px;width:32px}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--lg .cck-radio-button__background){height:16px;width:16px}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--xl){font:var(--text-xl-font-medium)}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--xl .cck-radio-button__wrapper){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--xl .cck-radio-button__input-wrapper){height:32px;width:32px}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--xl .cck-radio-button__background){height:16px;width:16px}:where([data-cck-theme-name=frames-x] .cck-radio-group){align-items:flex-start;display:flex}:where([data-cck-theme-name=frames-x] .cck-radio-group__row){flex-direction:row;gap:24px}:where([data-cck-theme-name=frames-x] .cck-radio-group__column){flex-direction:column;gap:12px}:where([data-cck-theme-name=frames-x] .cck-select){align-items:center;border-radius:var(--radi-6);color:var(--text-dark-primary);cursor:pointer;display:flex;font:var(--text-base-font-medium)}:where([data-cck-theme-name=frames-x] .cck-select:hover .cck-svg-icon){fill:var(--base-fill-5)}:where([data-cck-theme-name=frames-x] .cck-select--disabled){color:var(--base-disabled);cursor:auto;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-select__placeholder){color:var(--text-dark-tertiary)}:where([data-cck-theme-name=frames-x] .cck-select__trigger-wrapper){color:currentcolor;flex:1;overflow:hidden;padding-right:8px;text-align:start}:where([data-cck-theme-name=frames-x] .cck-select__trigger-value){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:where([data-cck-theme-name=frames-x] .cck-select__overlay .cck-overlay__backdrop){background-color:transparent}:where([data-cck-theme-name=frames-x] .cck-select__dropdown-icon-wrapper){transition:transform .3s}:where([data-cck-theme-name=frames-x] .cck-select__dropdown-icon-wrapper .cck-svg-icon){height:var(--icon-lg);width:var(--icon-lg)}:where([data-cck-theme-name=frames-x] .cck-select--opened .cck-select__dropdown-icon-wrapper){transform:rotate(180deg)}:where([data-cck-theme-name=frames-x] .cck-suffix){flex-grow:0}:where([data-cck-theme-name=frames-x] .cck-suffix .cck-svg-icon.cck-svg-icon--default-size){height:var(--icon-md);width:var(--icon-md)}:where([data-cck-theme-name=frames-x] .cck-textarea){background-color:transparent;border:none;color:var(--text-dark-primary);font:var(--text-base-font-medium);min-height:24px;min-width:100%;outline:none;padding:0;scrollbar-color:var(--base-border) transparent}:where([data-cck-theme-name=frames-x] .cck-textarea::-moz-placeholder){color:var(--text-dark-tertiary)}:where([data-cck-theme-name=frames-x] .cck-textarea::placeholder){color:var(--text-dark-tertiary)}:where([data-cck-theme-name=frames-x] .cck-textarea::-webkit-resizer){background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" viewBox="0 0 9 9" fill="none"><path d="M4 4L7.2929 0.707105C7.92286 0.0771402 9 0.523309 9 1.41421V6C9 7.65685 7.65685 9 6 9H1.41421C0.523309 9 0.077142 7.92286 0.707107 7.29289L4 4Z" fill="%23A1A1AA"/></svg>');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){opacity:1}
\ No newline at end of file
+:where([data-cck-theme-name=cocokits] .cck-button){align-items:center;border:none;box-sizing:border-box;cursor:pointer;display:inline-flex;justify-content:center;margin:0;outline:transparent}:where([data-cck-theme-name=cocokits] .cck-button):disabled{background-color:var(--color-disabled-surface);fill:var(--color-disabled-font);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-button .cck-svg-icon--default-color .cck-svg-icon__svg){fill:currentcolor}:where([data-cck-theme-name=cocokits] .cck-button__backdrop){display:none}:where([data-cck-theme-name=cocokits] .cck-button__size--sm){gap:8px;height:var(--button-primary-height-sm);padding:0 16px}:where([data-cck-theme-name=cocokits] .cck-button__size--md){gap:8px;height:32px;padding:0 20px}:where([data-cck-theme-name=cocokits] .cck-button__size--lg){gap:10px;height:40px;padding:0 24px}:where([data-cck-theme-name=cocokits] .cck-button__basic){border-radius:4px}:where([data-cck-theme-name=cocokits] .cck-button__basic.cck-button__color--brand):not(:disabled){background-color:transparent;color:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-button__basic.cck-button__color--brand):focus-visible{box-shadow:0 0 0 3px var(--color-brand-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-button__basic.cck-button__color--info):not(:disabled){background-color:transparent;color:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-button__basic.cck-button__color--info):focus-visible{box-shadow:0 0 0 3px var(--color-info-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-button__basic.cck-button__color--warning):not(:disabled){background-color:transparent;color:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-button__basic.cck-button__color--warning):focus-visible{box-shadow:0 0 0 3px var(--color-warning-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-button__basic.cck-button__color--error):not(:disabled){background-color:transparent;color:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-button__basic.cck-button__color--error):focus-visible{box-shadow:0 0 0 3px var(--color-error-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-button__basic.cck-button__color--h-contrast):not(:disabled){background-color:transparent;color:var(--color-h-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-button__basic.cck-button__color--h-contrast):focus-visible{box-shadow:0 0 0 3px var(--color-h-contrast-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-button__light){border-radius:4px}:where([data-cck-theme-name=cocokits] .cck-button__light.cck-button__color--brand):not(:disabled){background-color:var(--color-brand-alpha-5);color:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-button__light.cck-button__color--brand):focus-visible{box-shadow:0 0 0 3px var(--color-brand-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-button__light.cck-button__color--info):not(:disabled){background-color:var(--color-info-alpha-5);color:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-button__light.cck-button__color--info):focus-visible{box-shadow:0 0 0 3px var(--color-info-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-button__light.cck-button__color--warning):not(:disabled){background-color:var(--color-warning-alpha-5);color:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-button__light.cck-button__color--warning):focus-visible{box-shadow:0 0 0 3px var(--color-warning-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-button__light.cck-button__color--error):not(:disabled){background-color:var(--color-error-alpha-5);color:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-button__light.cck-button__color--error):focus-visible{box-shadow:0 0 0 3px var(--color-error-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-button__light.cck-button__color--h-contrast):not(:disabled){background-color:var(--color-h-contrast-alpha-5);color:var(--color-h-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-button__light.cck-button__color--h-contrast):focus-visible{box-shadow:0 0 0 3px var(--color-h-contrast-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-button__outline){background-color:transparent;border-radius:4px}:where([data-cck-theme-name=cocokits] .cck-button__outline.cck-button__color--brand):not(:disabled){border:1px solid var(--color-brand-default);color:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-button__outline.cck-button__color--brand):focus-visible{box-shadow:0 0 0 3px var(--color-brand-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-button__outline.cck-button__color--info):not(:disabled){border:1px solid var(--color-info-default);color:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-button__outline.cck-button__color--info):focus-visible{box-shadow:0 0 0 3px var(--color-info-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-button__outline.cck-button__color--warning):not(:disabled){border:1px solid var(--color-warning-default);color:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-button__outline.cck-button__color--warning):focus-visible{box-shadow:0 0 0 3px var(--color-warning-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-button__outline.cck-button__color--error):not(:disabled){border:1px solid var(--color-error-default);color:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-button__outline.cck-button__color--error):focus-visible{box-shadow:0 0 0 3px var(--color-error-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-button__outline.cck-button__color--h-contrast):not(:disabled){border:1px solid var(--color-h-contrast-default);color:var(--color-h-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-button__outline.cck-button__color--h-contrast):focus-visible{box-shadow:0 0 0 3px var(--color-h-contrast-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-button__primary){border-radius:4px}:where([data-cck-theme-name=cocokits] .cck-button__primary.cck-button__color--brand):not(:disabled){background-color:var(--color-brand-default);color:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-button__primary.cck-button__color--brand):focus-visible{box-shadow:0 0 0 3px var(--color-brand-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-button__primary.cck-button__color--info):not(:disabled){background-color:var(--color-info-default);color:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-button__primary.cck-button__color--info):focus-visible{box-shadow:0 0 0 3px var(--color-info-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-button__primary.cck-button__color--warning):not(:disabled){background-color:var(--color-warning-default);color:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-button__primary.cck-button__color--warning):focus-visible{box-shadow:0 0 0 3px var(--color-warning-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-button__primary.cck-button__color--error):not(:disabled){background-color:var(--color-error-default);color:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-button__primary.cck-button__color--error):focus-visible{box-shadow:0 0 0 3px var(--color-error-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-button__primary.cck-button__color--h-contrast):not(:disabled){background-color:var(--color-h-contrast-default);color:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-button__primary.cck-button__color--h-contrast):focus-visible{box-shadow:0 0 0 3px var(--color-h-contrast-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-checkbox){display:flex}:where([data-cck-theme-name=cocokits] .cck-checkbox__wrapper){align-items:center;display:inline-flex;gap:12px;vertical-align:middle}:where([data-cck-theme-name=cocokits] .cck-checkbox__input-wrapper){box-sizing:content-box;cursor:pointer;display:inline-block;flex-shrink:0;line-height:0;position:relative;white-space:nowrap}:where([data-cck-theme-name=cocokits] .cck-checkbox__size--sm .cck-checkbox__input-wrapper){height:var(--checkbox-size-sm);width:var(--checkbox-size-sm)}:where([data-cck-theme-name=cocokits] .cck-checkbox__size--md .cck-checkbox__input-wrapper){height:var(--checkbox-size-md);width:var(--checkbox-size-md)}:where([data-cck-theme-name=cocokits] .cck-checkbox__size--lg .cck-checkbox__input-wrapper){height:var(--checkbox-size-lg);width:var(--checkbox-size-lg)}:where([data-cck-theme-name=cocokits] .cck-checkbox__input){cursor:inherit;height:100%;left:0;margin:0;opacity:0;padding:0;position:absolute;right:0;top:0;width:100%}:where([data-cck-theme-name=cocokits] .cck-checkbox__background){align-items:center;border:1px solid var(--color-m-contrast-default);border-radius:2px;box-sizing:border-box;display:flex;height:100%;justify-content:center;pointer-events:none;position:absolute;transition:background-color 90ms cubic-bezier(.4,0,.6,1),border-color 90ms cubic-bezier(.4,0,.6,1);width:100%;will-change:background-color,border-color}:where([data-cck-theme-name=cocokits] .cck-checkbox--checked.cck-checkbox--disabled .cck-checkbox__background),:where([data-cck-theme-name=cocokits] .cck-checkbox--disabled .cck-checkbox__background),:where([data-cck-theme-name=cocokits] .cck-checkbox--indeterminate.cck-checkbox--disabled .cck-checkbox__background),:where([data-cck-theme-name=cocokits] .cck-checkbox--unchecked.cck-checkbox--disabled .cck-checkbox__background){background-color:var(--color-disabled-surface);border-color:var(--color-disabled-border)}:where([data-cck-theme-name=cocokits] .cck-checkbox--checked.cck-checkbox__color--brand:not(.cck-checkbox--disabled) .cck-checkbox__background),:where([data-cck-theme-name=cocokits] .cck-checkbox--indeterminate.cck-checkbox__color--brand:not(.cck-checkbox--disabled) .cck-checkbox__background){background-color:var(--color-brand-default);border-color:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-checkbox--checked.cck-checkbox__color--info:not(.cck-checkbox--disabled) .cck-checkbox__background),:where([data-cck-theme-name=cocokits] .cck-checkbox--indeterminate.cck-checkbox__color--info:not(.cck-checkbox--disabled) .cck-checkbox__background){background-color:var(--color-info-default);border-color:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-checkbox--checked.cck-checkbox__color--warning:not(.cck-checkbox--disabled) .cck-checkbox__background),:where([data-cck-theme-name=cocokits] .cck-checkbox--indeterminate.cck-checkbox__color--warning:not(.cck-checkbox--disabled) .cck-checkbox__background){background-color:var(--color-warning-default);border-color:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-checkbox--checked.cck-checkbox__color--error:not(.cck-checkbox--disabled) .cck-checkbox__background),:where([data-cck-theme-name=cocokits] .cck-checkbox--indeterminate.cck-checkbox__color--error:not(.cck-checkbox--disabled) .cck-checkbox__background){background-color:var(--color-error-default);border-color:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-checkbox__color--brand .cck-checkbox__input:focus-visible~.cck-checkbox__background){box-shadow:0 0 0 3px var(--color-brand-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-checkbox__color--info .cck-checkbox__input:focus-visible~.cck-checkbox__background){box-shadow:0 0 0 3px var(--color-info-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-checkbox__color--warning .cck-checkbox__input:focus-visible~.cck-checkbox__background){box-shadow:0 0 0 3px var(--color-warning-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-checkbox__color--error .cck-checkbox__input:focus-visible~.cck-checkbox__background){box-shadow:0 0 0 3px var(--color-error-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-checkbox__checkmark-path){transition:stroke-dashoffset .18s cubic-bezier(.4,0,.6,1);stroke:currentcolor;stroke-width:3.12px;stroke-dashoffset:29.7833;stroke-dasharray:29.7833}:where([data-cck-theme-name=cocokits] .cck-checkbox--checked .cck-checkbox__checkmark-path){stroke-dashoffset:0}:where([data-cck-theme-name=cocokits] .cck-checkbox__checkmark){color:var(--checkbox-color-checkmark);inset:0;opacity:0;padding:2px;position:absolute;transition:opacity .18s cubic-bezier(.4,0,.6,1);width:100%}:where([data-cck-theme-name=cocokits] .cck-checkbox--checked .cck-checkbox__checkmark){opacity:1}:where([data-cck-theme-name=cocokits] .cck-checkbox--indeterminate .cck-checkbox__checkmark){opacity:0;transform:rotate(45deg);transition:opacity 90ms cubic-bezier(.4,0,.6,1),transform 90ms cubic-bezier(.4,0,.6,1)}:where([data-cck-theme-name=cocokits] .cck-checkbox--disabled .cck-checkbox__checkmark){color:var(--color-disabled-border)}:where([data-cck-theme-name=cocokits] .cck-checkbox__mixedmark){border-color:var(--checkbox-color-checkmark);border-style:solid;border-width:1px;height:0;margin:2px;opacity:0;transform:scaleX(0) rotate(0deg);transition:opacity 90ms cubic-bezier(.4,0,.6,1),transform 90ms cubic-bezier(.4,0,.6,1);width:100%}:where([data-cck-theme-name=cocokits] .cck-checkbox--indeterminate .cck-checkbox__mixedmark){opacity:1;transform:scaleX(1) rotate(0deg)}:where([data-cck-theme-name=cocokits] .cck-checkbox__label){color:var(--color-font-default);cursor:pointer;font:var(--text-sm-medium);margin-left:0;margin-right:auto;order:0;padding-left:0;padding-right:0;text-align:left;white-space:nowrap}:where([data-cck-theme-name=cocokits] .cck-checkbox__label):empty{display:none}:where([data-cck-theme-name=cocokits] .cck-checkbox--disabled .cck-checkbox__label){color:var(--color-disabled-font)}:where([data-cck-theme-name=cocokits] .cck-checkbox--disabled .cck-checkbox__input-wrapper),:where([data-cck-theme-name=cocokits] .cck-checkbox--disabled .cck-checkbox__label){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-chip){align-items:center;border:1px solid var(--chip-color-border);border-radius:6px;color:var(--color-font-default);cursor:default;display:flex;font:var(--text-sm-medium);gap:4px;padding:0 var(--chip-spacing-overlay-h-padding)}:where([data-cck-theme-name=cocokits] .cck-chip.cck-chip--disabled){border:1px solid var(--chip-color-border-disabled);color:var(--color-disabled-font);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-chip.cck-chip--removable){padding:0 2px 0 var(--chip-spacing-overlay-h-padding)}:where([data-cck-theme-name=cocokits] .cck-chip__size--sm){height:var(--chip-size-height-sm)}:where([data-cck-theme-name=cocokits] .cck-chip__size--md){height:var(--chip-size-height-md)}:where([data-cck-theme-name=cocokits] .cck-chip__size--lg){height:var(--chip-size-height-lg)}:where([data-cck-theme-name=cocokits] .cck-chip__content-wrapper){align-items:center;display:flex;justify-content:center}:where([data-cck-theme-name=cocokits] .cck-chip__remove-icon-wrapper .cck-icon-button){background-color:transparent;border-radius:50%;color:var(--color-font-alpha-7);height:24px;padding:4px;width:24px}:where([data-cck-theme-name=cocokits] .cck-chip__remove-icon-wrapper){align-items:center;display:flex;justify-content:center}:where([data-cck-theme-name=cocokits] .cck-chip__remove-icon-wrapper .cck-icon-button):hover{background-color:var(--color-h-contrast-alpha-2)}:where([data-cck-theme-name=cocokits] .cck-chip-list){align-items:stretch;display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-start}:where([data-cck-theme-name=cocokits] .cck-chip-list__input){background:transparent;border:none;flex:1;font:var(--text-sm-regular);outline:none}:where([data-cck-theme-name=cocokits] .cck-chip-list__input::-moz-placeholder){color:var(--color-font-alpha-6);-moz-transition:color .1s ease-in;transition:color .1s ease-in}:where([data-cck-theme-name=cocokits] .cck-chip-list__input::placeholder){color:var(--color-font-alpha-6);transition:color .1s ease-in}:where([data-cck-theme-name=cocokits] .cck-chip-list__input::-moz-placeholder):not(:focus){color:transparent}:where([data-cck-theme-name=cocokits] .cck-chip-list__input::placeholder):not(:focus){color:transparent}:where([data-cck-theme-name=cocokits] .cck-chip-list__size--sm .cck-chip-list__input){height:var(--chip-size-height-sm)}:where([data-cck-theme-name=cocokits] .cck-chip-list__size--md .cck-chip-list__input){height:var(--chip-size-height-md)}:where([data-cck-theme-name=cocokits] .cck-chip-list__size--lg .cck-chip-list__input){height:var(--chip-size-height-lg)}:where([data-cck-theme-name=cocokits] *){box-sizing:border-box}:where([data-cck-theme-name=cocokits] .cck-divider){display:block;flex-shrink:0}:where([data-cck-theme-name=cocokits] .cck-divider__horizontal){margin:var(--divider-spacing-margin) 0;width:100%}:where([data-cck-theme-name=cocokits] .cck-divider__horizontal.cck-divider__size--md){height:1px}:where([data-cck-theme-name=cocokits] .cck-divider__horizontal.cck-divider__size--lg){height:2px;width:100%}:where([data-cck-theme-name=cocokits] .cck-divider__vertical){height:100%;margin:0 var(--divider-spacing-margin)}:where([data-cck-theme-name=cocokits] .cck-divider__vertical.cck-divider__size--md){width:1px}:where([data-cck-theme-name=cocokits] .cck-divider__vertical.cck-divider__size--lg){width:2px}:where([data-cck-theme-name=cocokits] .cck-divider__color--light){background-color:var(--divider-color-light)}:where([data-cck-theme-name=cocokits] .cck-divider__color--default){background-color:var(--divider-color-default)}:where([data-cck-theme-name=cocokits] .cck-divider__color--dark){background-color:var(--divider-color-dark)}:where([data-cck-theme-name=cocokits] .cck-error){color:var(--color-error-default);display:flex;font:var(--text-sm-regular);gap:6px}:where([data-cck-theme-name=cocokits] .cck-error .cck-svg-icon--default-color .cck-svg-icon__svg){fill:currentcolor}:where([data-cck-theme-name=cocokits] .cck-form-field){align-items:flex-start;display:flex;flex-direction:column;gap:var(--form_field-spacing-host-gap);min-width:100px}:where([data-cck-theme-name=cocokits] .cck-form-field:not(:disabled) .cck-form-field__input-wrapper):hover{background-color:var(--color-surface-inverse-alpha-1)}:where([data-cck-theme-name=cocokits] .cck-form-field .cck-select){flex:1;height:100%;width:100%}:where([data-cck-theme-name=cocokits] .cck-form-field .cck-input){flex:1;width:100%}:where([data-cck-theme-name=cocokits] .cck-form-field--disabled){opacity:.5}:where([data-cck-theme-name=cocokits] .cck-form-field__wrapper){align-items:stretch;border-radius:var(--form_field-size-radius);display:flex;flex-direction:row;width:100%}:where([data-cck-theme-name=cocokits] .cck-form-field__wrapper):has(input:disabled){background-color:var(--color-surface-inverse-alpha-3)}:where([data-cck-theme-name=cocokits] .cck-form-field--with-input.cck-form-field__size--sm .cck-form-field__wrapper),:where([data-cck-theme-name=cocokits] .cck-form-field--with-select.cck-form-field__size--sm .cck-form-field__wrapper){height:var(--form_field-size-height-sm)}:where([data-cck-theme-name=cocokits] .cck-form-field--with-input.cck-form-field__size--md .cck-form-field__wrapper),:where([data-cck-theme-name=cocokits] .cck-form-field--with-select.cck-form-field__size--md .cck-form-field__wrapper){height:var(--form_field-size-height-md)}:where([data-cck-theme-name=cocokits] .cck-form-field--with-input.cck-form-field__size--lg .cck-form-field__wrapper),:where([data-cck-theme-name=cocokits] .cck-form-field--with-select.cck-form-field__size--lg .cck-form-field__wrapper){height:var(--form_field-size-height-lg)}:where([data-cck-theme-name=cocokits] .cck-form-field .cck-label){margin-left:var(--form_field-spacing-balance-alignment-margin)}:where([data-cck-theme-name=cocokits] .cck-form-field__feedback-wrapper){display:flex;flex-direction:column;margin-left:var(--form_field-spacing-balance-alignment-margin);overflow:hidden}:where([data-cck-theme-name=cocokits] .cck-form-field__feedback-wrapper):empty{display:none}:where([data-cck-theme-name=cocokits] .cck-form-field__wrapper>*):first-child{border-bottom-left-radius:var(--form_field-size-radius);border-top-left-radius:var(--form_field-size-radius)}:where([data-cck-theme-name=cocokits] .cck-form-field__wrapper>*):last-child{border-bottom-right-radius:var(--form_field-size-radius);border-top-right-radius:var(--form_field-size-radius)}:where([data-cck-theme-name=cocokits] .cck-form-field__input-wrapper){align-items:center;border:1px solid var(--form_field-color-border);display:flex;flex:1;flex-direction:row;gap:var(--form_field-spacing-input-wrapper-gap);min-width:0}:where([data-cck-theme-name=cocokits] .cck-form-field--with-input .cck-form-field__input-wrapper),:where([data-cck-theme-name=cocokits] .cck-form-field--with-select .cck-form-field__input-wrapper){padding:0 var(--form_field-spacing-input-wrapper-h-padding)}:where([data-cck-theme-name=cocokits] .cck-form-field--with-chip-list .cck-prefix),:where([data-cck-theme-name=cocokits] .cck-form-field--with-chip-list .cck-suffix){align-self:flex-start}:where([data-cck-theme-name=cocokits] .cck-form-field--with-chip-list .cck-chip-list){flex:1}:where([data-cck-theme-name=cocokits] .cck-form-field__size--sm.cck-form-field--with-chip-list .cck-suffix){margin-right:4px;margin-top:6px}:where([data-cck-theme-name=cocokits] .cck-form-field__size--md.cck-form-field--with-chip-list .cck-suffix){margin-right:4px;margin-top:8px}:where([data-cck-theme-name=cocokits] .cck-form-field__size--lg.cck-form-field--with-chip-list .cck-suffix){margin-left:4px;margin-right:8px;margin-top:12px}:where([data-cck-theme-name=cocokits] .cck-form-field__size--sm.cck-form-field--with-chip-list .cck-prefix){margin-left:4px;margin-top:6px}:where([data-cck-theme-name=cocokits] .cck-form-field__size--md.cck-form-field--with-chip-list .cck-prefix){margin-left:4px;margin-top:8px}:where([data-cck-theme-name=cocokits] .cck-form-field__size--lg.cck-form-field--with-chip-list .cck-prefix){margin-left:8px;margin-right:4px;margin-top:12px}:where([data-cck-theme-name=cocokits] .cck-form-field--with-chip-list .cck-form-field__input-wrapper){cursor:text;padding:4px}:where([data-cck-theme-name=cocokits] .cck-form-field--with-textarea .cck-form-field__input-wrapper){padding:8px}:where([data-cck-theme-name=cocokits] .cck-form-field--focused .cck-form-field__input-wrapper){border:1px solid var(--color-brand-default);box-shadow:inset 0 0 0 1px var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-form-field--error .cck-form-field__input-wrapper){border:1px solid var(--form_field-color-error)}:where([data-cck-theme-name=cocokits] .cck-form-field--focused.cck-form-field--error .cck-form-field__input-wrapper){box-shadow:inset 0 0 0 1px var(--form_field-color-error)}:where([data-cck-theme-name=cocokits] .cck-hint){color:var(--color-font-alpha-7);display:flex;font:var(--text-sm-regular);gap:6px}:where([data-cck-theme-name=cocokits] .cck-hint .cck-svg-icon--default-color .cck-svg-icon__svg){fill:currentcolor}:where([data-cck-theme-name=cocokits] .cck-svg-icon){align-items:center;display:flex;flex-shrink:0;justify-content:center}:where([data-cck-theme-name=cocokits] .cck-svg-icon__svg){height:100%;width:100%}:where([data-cck-theme-name=cocokits] .cck-svg-icon__size--xs){height:var(--icon-size-xs);width:var(--icon-size-xs)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__size--sm){height:var(--icon-size-sm);width:var(--icon-size-sm)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__size--md){height:var(--icon-size-md);width:var(--icon-size-md)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__size--lg){height:var(--icon-size-lg);width:var(--icon-size-lg)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__size--xl){height:var(--icon-size-xl);width:var(--icon-size-xl)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__size--2xl){height:var(--icon-size-2xl);width:var(--icon-size-2xl)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__color--brand){fill:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__color--info){fill:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__color--warning){fill:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__color--error){fill:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__color--h-contrast){fill:var(--color-h-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-svg-icon__color--m-contrast){fill:var(--color-m-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button){align-items:center;border:none;box-sizing:border-box;cursor:pointer;display:inline-flex;flex-shrink:0;justify-content:center;margin:0;outline:transparent}:where([data-cck-theme-name=cocokits] .cck-icon-button):disabled{background-color:var(--color-disabled-surface);fill:var(--color-disabled-font);cursor:default}:where([data-cck-theme-name=cocokits] .cck-icon-button .cck-svg-icon){height:100%;width:100%}:where([data-cck-theme-name=cocokits] .cck-icon-button .cck-svg-icon__svg){fill:inherit}:where([data-cck-theme-name=cocokits] .cck-icon-button__rounded--false){border-radius:4px}:where([data-cck-theme-name=cocokits] .cck-icon-button__rounded--true){border-radius:50%}:where([data-cck-theme-name=cocokits] .cck-icon-button__size--sm){height:28px;padding:6px;width:28px}:where([data-cck-theme-name=cocokits] .cck-icon-button__size--md){height:32px;padding:6px;width:32px}:where([data-cck-theme-name=cocokits] .cck-icon-button__size--lg){height:40px;padding:8px;width:40px}:where([data-cck-theme-name=cocokits] .cck-icon-button__basic.cck-icon-button__color--brand):not(:disabled){background-color:transparent;fill:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__basic.cck-icon-button__color--brand):focus-visible{box-shadow:0 0 0 3px var(--color-brand-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-icon-button__basic.cck-icon-button__color--info):not(:disabled){background-color:transparent;fill:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__basic.cck-icon-button__color--info):focus-visible{box-shadow:0 0 0 3px var(--color-info-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-icon-button__basic.cck-icon-button__color--warning):not(:disabled){background-color:transparent;fill:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__basic.cck-icon-button__color--warning):focus-visible{box-shadow:0 0 0 3px var(--color-warning-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-icon-button__basic.cck-icon-button__color--error):not(:disabled){background-color:transparent;fill:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__basic.cck-icon-button__color--error):focus-visible{box-shadow:0 0 0 3px var(--color-error-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-icon-button__basic.cck-icon-button__color--h-contrast):not(:disabled){background-color:transparent;fill:var(--color-h-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__basic.cck-icon-button__color--h-contrast):focus-visible{box-shadow:0 0 0 3px var(--color-h-contrast-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-icon-button__light.cck-icon-button__color--brand):not(:disabled){background-color:var(--color-brand-alpha-5);fill:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__light.cck-icon-button__color--brand):focus-visible{box-shadow:0 0 0 3px var(--color-brand-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-icon-button__light.cck-icon-button__color--info):not(:disabled){background-color:var(--color-info-alpha-5);fill:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__light.cck-icon-button__color--info):focus-visible{box-shadow:0 0 0 3px var(--color-info-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-icon-button__light.cck-icon-button__color--warning):not(:disabled){background-color:var(--color-warning-alpha-5);fill:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__light.cck-icon-button__color--warning):focus-visible{box-shadow:0 0 0 3px var(--color-warning-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-icon-button__light.cck-icon-button__color--error):not(:disabled){background-color:var(--color-error-alpha-5);fill:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__light.cck-icon-button__color--error):focus-visible{box-shadow:0 0 0 3px var(--color-error-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-icon-button__light.cck-icon-button__color--h-contrast):not(:disabled){background-color:var(--color-h-contrast-alpha-5);fill:var(--color-h-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__light.cck-icon-button__color--h-contrast):focus-visible{box-shadow:0 0 0 3px var(--color-h-contrast-alpha-7)}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline){background-color:transparent}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline.cck-icon-button__color--brand):not(:disabled){border:1px solid var(--color-brand-default);fill:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline.cck-icon-button__color--brand):focus-visible{box-shadow:0 0 0 3px var(--color-brand-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline.cck-icon-button__color--info):not(:disabled){border:1px solid var(--color-info-default);fill:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline.cck-icon-button__color--info):focus-visible{box-shadow:0 0 0 3px var(--color-info-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline.cck-icon-button__color--warning):not(:disabled){border:1px solid var(--color-warning-default);fill:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline.cck-icon-button__color--warning):focus-visible{box-shadow:0 0 0 3px var(--color-warning-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline.cck-icon-button__color--error):not(:disabled){border:1px solid var(--color-error-default);fill:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline.cck-icon-button__color--error):focus-visible{box-shadow:0 0 0 3px var(--color-error-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline.cck-icon-button__color--h-contrast):not(:disabled){border:1px solid var(--color-h-contrast-default);fill:var(--color-h-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__outline.cck-icon-button__color--h-contrast):focus-visible{box-shadow:0 0 0 3px var(--color-h-contrast-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-icon-button__primary.cck-icon-button__color--brand):not(:disabled){background-color:var(--color-brand-default);fill:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__primary.cck-icon-button__color--brand):focus-visible{box-shadow:0 0 0 3px var(--color-brand-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-icon-button__primary.cck-icon-button__color--info):not(:disabled){background-color:var(--color-info-default);fill:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__primary.cck-icon-button__color--info):focus-visible{box-shadow:0 0 0 3px var(--color-info-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-icon-button__primary.cck-icon-button__color--warning):not(:disabled){background-color:var(--color-warning-default);fill:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__primary.cck-icon-button__color--warning):focus-visible{box-shadow:0 0 0 3px var(--color-warning-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-icon-button__primary.cck-icon-button__color--error):not(:disabled){background-color:var(--color-error-default);fill:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__primary.cck-icon-button__color--error):focus-visible{box-shadow:0 0 0 3px var(--color-error-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-icon-button__primary.cck-icon-button__color--h-contrast):not(:disabled){background-color:var(--color-h-contrast-default);fill:var(--color-font-inverse-default)}:where([data-cck-theme-name=cocokits] .cck-icon-button__primary.cck-icon-button__color--h-contrast):focus-visible{box-shadow:0 0 0 3px var(--color-h-contrast-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-input){background-color:transparent;border:none;color:var(--color-font-default);font:var(--text-md-regular);outline:none;text-overflow:ellipsis}:where([data-cck-theme-name=cocokits] .cck-input::-moz-placeholder){color:var(--color-font-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-input::placeholder){color:var(--color-font-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-input::-moz-placeholder):disabled{color:var(--color-font-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-input::placeholder):disabled{color:var(--color-font-alpha-5)}:where([data-cck-theme-name=cocokits] .cck-input):disabled{color:var(--color-font-alpha-6);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-label){display:flex}:where([data-cck-theme-name=cocokits] .cck-label__label-tag){color:var(--color-font-default);font:var(--text-sm-medium)}:where([data-cck-theme-name=cocokits] .cck-label__required-marker){color:var(--color-brand-default);font:var(--text-sm-medium);margin-left:var(--label-spacing-required-marker-padding-left)}:where([data-cck-theme-name=cocokits] .cck-leading){align-items:center;border:1px solid var(--form_field-color-border);border-right:none;color:var(--color-font-alpha-7);display:flex;flex-grow:0;justify-content:center;padding:0 var(--form_field-spacing-input-wrapper-h-padding);-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-leading .cck-select){color:currentcolor;font:inherit}:where([data-cck-theme-name=cocokits] .cck-leading__regular){font:var(--text-sm-regular)}:where([data-cck-theme-name=cocokits] .cck-leading__medium){font:var(--text-sm-medium)}:where([data-cck-theme-name=cocokits] .cck-leading--clickable){cursor:pointer;transition:background-color .1s}:where([data-cck-theme-name=cocokits] .cck-leading .cck-svg-icon.cck-svg-icon--default-size){height:var(--icon-size-xs);width:var(--icon-size-xs)}:where([data-cck-theme-name=cocokits] .cck-leading__color--transparent){background-color:transparent}:where([data-cck-theme-name=cocokits] .cck-leading__color--transparent.cck-leading--clickable):active{background-color:var(--color-surface-inverse-alpha-4)}:where([data-cck-theme-name=cocokits] .cck-leading__color--transparent.cck-leading--clickable):hover:not(:active){background-color:var(--color-surface-inverse-alpha-1)}:where([data-cck-theme-name=cocokits] .cck-leading__color--grey){background-color:var(--color-surface-inverse-alpha-1)}:where([data-cck-theme-name=cocokits] .cck-leading__color--grey.cck-leading--clickable):active{background-color:var(--color-surface-inverse-alpha-4)}:where([data-cck-theme-name=cocokits] .cck-leading__color--grey.cck-leading--clickable):hover:not(:active){background-color:var(--color-surface-inverse-alpha-3)}:where([data-cck-theme-name=cocokits] .cck-leading .cck-svg-icon.cck-svg-icon--default-color .cck-svg-icon__svg){fill:var(--form_field-color-icon)}:where([data-cck-theme-name=cocokits] .cck-menu){background-color:var(--color-surface-default);border:1px solid var(--menu-color-border);border-radius:var(--menu-size-radius);box-shadow:0 8px 10px -6px rgba(13,16,23,.039),0 18px 22px -4px rgba(13,16,23,.078);display:flex;flex-direction:column;margin:4px 0;padding:var(--menu-spacing-v-padding) var(--menu-spacing-h-padding)}:where([data-cck-theme-name=cocokits] .cck-menu__overlay .cck-overlay__backdrop){background-color:transparent}:where([data-cck-theme-name=cocokits] .cck-menu-item){align-items:center;border-radius:6px;display:flex;font:var(--text-sm-regular);gap:var(--menu_item-spacing-gap);justify-content:flex-start;margin:0 4px;padding:var(--menu_item-spacing-v-padding) var(--menu_item-spacing-h-padding)}:where([data-cck-theme-name=cocokits] .cck-menu-item):not(.cck-menu-item--disabled){cursor:pointer}:where([data-cck-theme-name=cocokits] .cck-menu-item--disabled){opacity:.6}:where([data-cck-theme-name=cocokits] .cck-menu-item--disabled .cck-svg-icon.cck-svg-icon--default-color),:where([data-cck-theme-name=cocokits] .cck-menu-item--disabled){color:var(--color-disabled-font)}:where([data-cck-theme-name=cocokits] .cck-menu-item):not(.cck-menu-item--disabled):hover{background-color:var(--color-surface-inverse-alpha-1)}:where([data-cck-theme-name=cocokits] .cck-menu-item__color--default):not(.cck-menu-item--disabled),:where([data-cck-theme-name=cocokits] .cck-menu-item__color--default:not(.cck-menu-item--disabled) .cck-svg-icon.cck-svg-icon--default-color){color:var(--color-font-default)}:where([data-cck-theme-name=cocokits] .cck-menu-item__color--error):not(.cck-menu-item--disabled),:where([data-cck-theme-name=cocokits] .cck-menu-item__color--error:not(.cck-menu-item--disabled) .cck-svg-icon.cck-svg-icon--default-color){color:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-menu-item__size--sm){height:var(--menu_item-size-height-sm)}:where([data-cck-theme-name=cocokits] .cck-menu-item__size--md){height:var(--menu_item-size-height-md)}:where([data-cck-theme-name=cocokits] .cck-menu-item__size--lg){height:var(--menu_item-size-height-lg)}:where([data-cck-theme-name=cocokits] .cck-menu-item .cck-svg-icon.cck-svg-icon--default-size){height:var(--icon-size-xs);width:var(--icon-size-xs)}:where([data-cck-theme-name=cocokits] .cck-menu-item .cck-svg-icon.cck-svg-icon--default-color .cck-svg-icon__svg){fill:currentcolor}:where([data-cck-theme-name=cocokits] .cck-option){align-items:center;border-radius:6px;color:var(--color-font-default);display:flex;font:var(--text-sm-regular);gap:var(--option-spacing-item-gap);margin:0 4px;padding:0 var(--option-spacing-item-h-padding)}:where([data-cck-theme-name=cocokits] .cck-option):not(.cck-option--disabled){cursor:pointer}:where([data-cck-theme-name=cocokits] .cck-option--disabled){color:var(--color-disabled-font);opacity:.7;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-option):not(.cck-option--disabled):hover{background-color:var(--option-color-item-hover)}:where([data-cck-theme-name=cocokits] .cck-option .cck-checkbox__input-wrapper){height:var(--checkbox-size-sm);width:var(--checkbox-size-sm)}:where([data-cck-theme-name=cocokits] .cck-option--single.cck-option--selected){font:var(--text-sm-medium)}:where([data-cck-theme-name=cocokits] .cck-option__size--sm){height:var(--option-size-height-sm)}:where([data-cck-theme-name=cocokits] .cck-option__size--md){height:var(--option-size-height-md)}:where([data-cck-theme-name=cocokits] .cck-option__size--lg){height:var(--option-size-height-lg)}:where([data-cck-theme-name=cocokits] .cck-select__options-wrapper){background-color:var(--option-color-overlay-bg);border:1px solid var(--option-color-overlay-border);border-radius:var(--option-size-overlay-radius);height:inherit;margin-top:var(--option-spacing-overlay-margin-top);max-height:inherit;overflow:auto;padding:var(--option-spacing-overlay-h-padding) var(--option-spacing-overlay-v-padding)}:where([data-cck-theme-name=cocokits] .cck-option__content-wrapper){flex:1}:where([data-cck-theme-name=cocokits] .cck-option__selected-checkmark .cck-svg-icon){height:var(--icon-size-sm);width:var(--icon-size-sm)}:where([data-cck-theme-name=cocokits] .cck-option-group){display:flex;flex-direction:column}:where([data-cck-theme-name=cocokits] .cck-option-group--label){align-items:center;color:var(--color-font-default);display:flex;font:var(--text-sm-medium);padding:0 var(--option-spacing-item-h-padding)}:where([data-cck-theme-name=cocokits] .cck-option-group--disabled .cck-option-group--label){color:var(--color-disabled-font);-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-option-group .cck-option){padding:0 calc(var(--option-spacing-item-h-padding)*2)}:where([data-cck-theme-name=cocokits] .cck-option-group__size--sm .cck-option-group--label){height:var(--option-size-height-sm)}:where([data-cck-theme-name=cocokits] .cck-option-group__size--md .cck-option-group--label){height:var(--option-size-height-md)}:where([data-cck-theme-name=cocokits] .cck-option-group__size--lg .cck-option-group--label){height:var(--option-size-height-lg)}:where([data-cck-theme-name=cocokits] .cck-prefix){flex-grow:0}:where([data-cck-theme-name=cocokits] .cck-prefix .cck-svg-icon.cck-svg-icon--default-size){height:var(--icon-size-xs);width:var(--icon-size-xs)}:where([data-cck-theme-name=cocokits] .cck-prefix .cck-svg-icon.cck-svg-icon--default-color .cck-svg-icon__svg){fill:var(--form_field-color-icon)}:where([data-cck-theme-name=cocokits] .cck-radio-button__wrapper){align-items:center;display:inline-flex;vertical-align:middle}:where([data-cck-theme-name=cocokits] .cck-radio-button__input-wrapper){box-sizing:content-box;cursor:pointer;display:inline-block;flex:0 0 auto;position:relative;will-change:opacity,transform,border-color,color}:where([data-cck-theme-name=cocokits] .cck-radio-button__size--sm .cck-radio-button__input-wrapper){height:var(--radio-size-sm);padding:var(--radio-spacing-padding-input-sm);width:var(--radio-size-sm)}:where([data-cck-theme-name=cocokits] .cck-radio-button__size--md .cck-radio-button__input-wrapper){height:var(--radio-size-md);padding:var(--radio-spacing-padding-input-md);width:var(--radio-size-md)}:where([data-cck-theme-name=cocokits] .cck-radio-button__size--lg .cck-radio-button__input-wrapper){height:var(--radio-size-lg);padding:var(--radio-spacing-padding-input-lg);width:var(--radio-size-lg)}:where([data-cck-theme-name=cocokits] .cck-radio-button__input){cursor:inherit;height:100%;left:0;margin:0;opacity:0;padding:0;position:absolute;right:0;top:0;width:100%;z-index:1}:where([data-cck-theme-name=cocokits] .cck-radio-button__background){box-sizing:border-box;display:inline-block;height:100%;position:relative;width:100%}:where([data-cck-theme-name=cocokits] .cck-radio-button__background--outer-circle){border-color:var(--color-m-contrast-default);border-radius:50%;border-style:solid;border-width:1px;box-sizing:border-box;height:100%;left:0;position:absolute;top:0;transition:border-color 90ms cubic-bezier(0,0,.2,1);width:100%}:where([data-cck-theme-name=cocokits] .cck-radio-button--checked .cck-radio-button__background--outer-circle){border-width:2px}:where([data-cck-theme-name=cocokits] .cck-radio-button--disabled.cck-radio-button--unchecked .cck-radio-button__background--outer-circle){background-color:var(--color-disabled-surface);border-color:var(--color-disabled-border)}:where([data-cck-theme-name=cocokits] .cck-radio-button--disabled.cck-radio-button--checked .cck-radio-button__background--outer-circle){border-color:var(--color-disabled-border)}:where([data-cck-theme-name=cocokits] .cck-radio-button__color--brand.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--outer-circle){border-color:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-radio-button__color--info.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--outer-circle){border-color:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-radio-button__color--warning.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--outer-circle){border-color:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-radio-button__color--error.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--outer-circle){border-color:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-radio-button__background--inner-circle){border-radius:50%;box-sizing:border-box;height:100%;left:0;position:absolute;top:0;transform:scale(0);transition:transform 90ms cubic-bezier(.4,0,.6,1),background-color 90ms cubic-bezier(.4,0,.6,1);width:100%}:where([data-cck-theme-name=cocokits] .cck-radio-button--checked .cck-radio-button__background--inner-circle){transform:scale(.5);transition:transform 90ms cubic-bezier(0,0,.2,1),border-color 90ms cubic-bezier(0,0,.2,1)}:where([data-cck-theme-name=cocokits] .cck-radio-button--disabled.cck-radio-button--checked .cck-radio-button__background--inner-circle){background-color:var(--color-disabled-border)}:where([data-cck-theme-name=cocokits] .cck-radio-button__color--brand.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--inner-circle){background-color:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-radio-button__color--info.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--inner-circle){background-color:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-radio-button__color--warning.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--inner-circle){background-color:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-radio-button__color--error.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--inner-circle){background-color:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-radio-button__label){color:var(--color-font-default);cursor:pointer;font:var(--text-sm-regular);margin-left:0;margin-right:auto;order:0;padding-left:4px;padding-right:0;white-space:nowrap}:where([data-cck-theme-name=cocokits] .cck-radio-button--disabled .cck-radio-button__label){color:var(--color-disabled-font)}:where([data-cck-theme-name=cocokits] .cck-radio-button--disabled .cck-radio-button__input-wrapper),:where([data-cck-theme-name=cocokits] .cck-radio-button--disabled .cck-radio-button__label){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-radio-group){align-items:flex-start;display:flex}:where([data-cck-theme-name=cocokits] .cck-radio-group__row){flex-direction:row;gap:24px}:where([data-cck-theme-name=cocokits] .cck-radio-group__column){flex-direction:column}:where([data-cck-theme-name=cocokits] .cck-select){align-items:center;border-radius:6px;color:var(--color-font-default);cursor:pointer;display:flex;font:var(--text-sm-regular)}:where([data-cck-theme-name=cocokits] .cck-select.cck-select--disabled){cursor:auto;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-select__placeholder){color:var(--color-font-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-select__trigger-wrapper){color:currentcolor;flex:1;overflow:hidden;padding-right:8px;text-align:start}:where([data-cck-theme-name=cocokits] .cck-select__trigger-value){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:where([data-cck-theme-name=cocokits] .cck-select__overlay .cck-overlay__backdrop){background-color:transparent}:where([data-cck-theme-name=cocokits] .cck-select__dropdown-icon-wrapper .cck-svg-icon){height:var(--icon-size-sm);width:var(--icon-size-sm)}:where([data-cck-theme-name=cocokits] .cck-suffix){flex-grow:0}:where([data-cck-theme-name=cocokits] .cck-suffix .cck-svg-icon.cck-svg-icon--default-size){height:var(--icon-size-xs);width:var(--icon-size-xs)}:where([data-cck-theme-name=cocokits] .cck-suffix .cck-svg-icon.cck-svg-icon--default-color .cck-svg-icon__svg){fill:var(--form_field-color-icon-light)}:where([data-cck-theme-name=cocokits] .cck-textarea){background-color:transparent;border:none;color:var(--color-font-default);font:var(--text-md-regular);min-height:24px;min-width:100%;outline:none;padding:0;scrollbar-color:var(--form_field-color-border) transparent}:where([data-cck-theme-name=cocokits] .cck-textarea::-moz-placeholder){color:var(--color-font-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-textarea::placeholder){color:var(--color-font-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-textarea::-webkit-resizer){background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="%238897AE"><path d="M2.4,12.6c-0.3-0.3-0.3-0.7-0.1-0.9l9.4-9.4c0.2-0.2,0.6-0.1,0.9,0.1s0.3,0.7,0.1,0.9l-9.4,9.4C3.1,12.9,2.7,12.8,2.4,12.6z M7.1,12.8c-0.3-0.3-0.3-0.6-0.2-0.8L12,6.9c0.2-0.2,0.5-0.1,0.8,0.2c0.3,0.3,0.3,0.6,0.2,0.8L7.8,13C7.7,13.1,7.3,13,7.1,12.8z"/></svg>');height:16px;width:16px}:where([data-cck-theme-name=cocokits] .cck-textarea):disabled{cursor:default;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-toggle){-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-toggle):not(.cck-toggle--disabled){cursor:pointer}:where([data-cck-theme-name=cocokits] .cck-toggle__label){align-items:center;color:var(--color-font-default);display:flex;font:var(--text-sm-regular);gap:var(--toggle-spacing-gap)}:where([data-cck-theme-name=cocokits] .cck-toggle__label):not(.cck-toggle--disabled){cursor:pointer}:where([data-cck-theme-name=cocokits] .cck-toggle--label-before .cck-toggle__label){flex-direction:row-reverse}:where([data-cck-theme-name=cocokits] .cck-toggle__slider-wrapper){border-radius:100px;position:relative;width:var(--toggle-size-width-sm)}:where([data-cck-theme-name=cocokits] .cck-toggle__input){cursor:pointer;height:100%;margin:0;opacity:0;padding:0;position:relative;width:100%;z-index:3}:where([data-cck-theme-name=cocokits] .cck-toggle__thumb){background-color:var(--toggle-color-thumb);border:2px solid var(--toggle-color-thumb-border);border-radius:100px;left:0;position:absolute;top:50%;transform:translateY(-50%);transition:all .3s ease,left .3s cubic-bezier(.18,.89,.35,1.15);z-index:2}:where([data-cck-theme-name=cocokits] .cck-toggle__backdrop){background-color:var(--toggle-color-backdrop-unselected);border-radius:100px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:all .3s ease;z-index:1}:where([data-cck-theme-name=cocokits] .cck-toggle--disabled){color:var(--color-disabled-font);cursor:default;pointer-events:none}:where([data-cck-theme-name=cocokits] .cck-toggle--disabled .cck-toggle__thumb){background-color:var(--toggle-color-thumb-disabled)}:where([data-cck-theme-name=cocokits] .cck-toggle--disabled .cck-toggle__backdrop){background-color:var(--toggle-color-backdrop-disabled)}:where([data-cck-theme-name=cocokits] .cck-toggle--checked .cck-toggle__thumb){left:100%;transform:translate(-100%,-50%)}:where([data-cck-theme-name=cocokits] .cck-toggle--checked:active .cck-toggle__thumb){margin-left:calc(var(--toggle-size-bounce)/2*-1)}:where([data-cck-theme-name=cocokits] .cck-toggle--unchecked:active .cck-toggle__thumb){margin-left:calc(var(--toggle-size-bounce)/2)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--brand:not(.cck-toggle--disabled).cck-toggle--checked .cck-toggle__backdrop){background-color:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--brand:not(.cck-toggle--disabled):hover .cck-toggle__thumb){border-color:var(--color-brand-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--info:not(.cck-toggle--disabled).cck-toggle--checked .cck-toggle__backdrop){background-color:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--info:not(.cck-toggle--disabled):hover .cck-toggle__thumb){border-color:var(--color-info-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--warning:not(.cck-toggle--disabled).cck-toggle--checked .cck-toggle__backdrop){background-color:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--warning:not(.cck-toggle--disabled):hover .cck-toggle__thumb){border-color:var(--color-warning-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--error:not(.cck-toggle--disabled).cck-toggle--checked .cck-toggle__backdrop){background-color:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--error:not(.cck-toggle--disabled):hover .cck-toggle__thumb){border-color:var(--color-error-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--h-contrast:not(.cck-toggle--disabled).cck-toggle--checked .cck-toggle__backdrop){background-color:var(--color-h-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__color--h-contrast:not(.cck-toggle--disabled):hover .cck-toggle__thumb){border-color:var(--color-h-contrast-default)}:where([data-cck-theme-name=cocokits] .cck-toggle__size--sm .cck-toggle__slider-wrapper){width:var(--toggle-size-width-sm)}:where([data-cck-theme-name=cocokits] .cck-toggle__size--sm .cck-toggle__thumb){height:var(--toggle-size-thumb-sm);width:var(--toggle-size-thumb-sm)}:where([data-cck-theme-name=cocokits] .cck-toggle__size--sm .cck-toggle__backdrop){height:var(--toggle-size-backdrop-sm);width:calc(var(--toggle-size-width-sm) - var(--toggle-size-thumb-sm))}:where([data-cck-theme-name=cocokits] .cck-toggle__size--sm:active .cck-toggle__thumb){width:calc(var(--toggle-size-thumb-sm) + var(--toggle-size-bounce))}:where([data-cck-theme-name=cocokits] .cck-toggle__size--md .cck-toggle__slider-wrapper){width:var(--toggle-size-width-md)}:where([data-cck-theme-name=cocokits] .cck-toggle__size--md .cck-toggle__backdrop){height:var(--toggle-size-backdrop-md);width:calc(var(--toggle-size-width-md) - var(--toggle-size-thumb-md))}:where([data-cck-theme-name=cocokits] .cck-toggle__size--md .cck-toggle__thumb){height:var(--toggle-size-thumb-md);width:var(--toggle-size-thumb-md)}:where([data-cck-theme-name=cocokits] .cck-toggle__size--md:active .cck-toggle__thumb){width:calc(var(--toggle-size-thumb-md) + var(--toggle-size-bounce))}:where([data-cck-theme-name=cocokits] .cck-toggle__size--lg .cck-toggle__slider-wrapper){width:var(--toggle-size-width-lg)}:where([data-cck-theme-name=cocokits] .cck-toggle__size--lg .cck-toggle__backdrop){height:var(--toggle-size-backdrop-lg);width:calc(var(--toggle-size-width-lg) - var(--toggle-size-thumb-lg))}:where([data-cck-theme-name=cocokits] .cck-toggle__size--lg .cck-toggle__thumb){height:var(--toggle-size-thumb-lg);width:var(--toggle-size-thumb-lg)}:where([data-cck-theme-name=cocokits] .cck-toggle__size--lg:active .cck-toggle__thumb){width:calc(var(--toggle-size-thumb-lg) + var(--toggle-size-bounce))}:where([data-cck-theme-name=cocokits] .cck-trailing){align-items:center;border:1px solid var(--form_field-color-border);border-left:none;color:var(--color-font-alpha-7);display:flex;flex-grow:0;gap:var(--form_field-spacing-trailing-gap);justify-content:center;padding:0 var(--form_field-spacing-input-wrapper-h-padding);-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=cocokits] .cck-trailing .cck-select){color:currentcolor;font:inherit}:where([data-cck-theme-name=cocokits] .cck-trailing__regular){font:var(--text-sm-regular)}:where([data-cck-theme-name=cocokits] .cck-trailing__medium){font:var(--text-sm-medium)}:where([data-cck-theme-name=cocokits] .cck-trailing--clickable){cursor:pointer;transition:background-color .1s}:where([data-cck-theme-name=cocokits] .cck-trailing .cck-svg-icon.cck-svg-icon--default-size){height:var(--icon-size-xs);width:var(--icon-size-xs)}:where([data-cck-theme-name=cocokits] .cck-trailing__color--transparent){background-color:transparent}:where([data-cck-theme-name=cocokits] .cck-trailing__color--transparent.cck-trailing--clickable):active{background-color:var(--color-surface-inverse-alpha-4)}:where([data-cck-theme-name=cocokits] .cck-trailing__color--transparent.cck-trailing--clickable):hover:not(:active){background-color:var(--color-surface-inverse-alpha-1)}:where([data-cck-theme-name=cocokits] .cck-trailing__color--grey){background-color:var(--color-surface-inverse-alpha-1)}:where([data-cck-theme-name=cocokits] .cck-trailing__color--grey.cck-trailing--clickable):active{background-color:var(--color-surface-inverse-alpha-4)}:where([data-cck-theme-name=cocokits] .cck-trailing__color--grey.cck-trailing--clickable):hover:not(:active){background-color:var(--color-surface-inverse-alpha-3)}:where([data-cck-theme-name=cocokits] .cck-trailing .cck-svg-icon.cck-svg-icon--default-color .cck-svg-icon__svg){fill:var(--form_field-color-icon)}:where([data-cck-theme-name=cocokits] .cck-avatar){align-items:center;border-radius:50%;display:flex;justify-content:center;overflow:hidden}:where([data-cck-theme-name=cocokits] .cck-avatar__fallback-image),:where([data-cck-theme-name=cocokits] .cck-avatar__image),:where([data-cck-theme-name=cocokits] .cck-avatar__placeholder-image){border-radius:inherit;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}:where([data-cck-theme-name=cocokits] .cck-avatar--with-label){background-color:var(--color-brand-light);color:var(--color-font-default)}:where([data-cck-theme-name=cocokits] .cck-avatar--clickable){cursor:pointer}:where([data-cck-theme-name=cocokits] .cck-avatar__size--xs){height:var(--size-28);width:var(--size-28)}:where([data-cck-theme-name=cocokits] .cck-avatar__size--xs.cck-avatar--with-label){font:var(--text-xs-semibold)}:where([data-cck-theme-name=cocokits] .cck-avatar__size--sm){height:var(--size-32);width:var(--size-32)}:where([data-cck-theme-name=cocokits] .cck-avatar__size--sm.cck-avatar--with-label){font:var(--text-sm-semibold)}:where([data-cck-theme-name=cocokits] .cck-avatar__size--md){height:var(--size-40);width:var(--size-40)}:where([data-cck-theme-name=cocokits] .cck-avatar__size--md.cck-avatar--with-label){font:var(--text-md-semibold)}:where([data-cck-theme-name=cocokits] .cck-avatar__size--lg){height:var(--size-48);width:var(--size-48)}:where([data-cck-theme-name=cocokits] .cck-avatar__size--lg.cck-avatar--with-label){font:var(--text-lg-semibold)}:where([data-cck-theme-name=cocokits] .cck-avatar-group){display:flex}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-left){direction:rtl}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-left.cck-avatar-group__size--xs .cck-avatar):not(:last-of-type){margin-left:-10px}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-left.cck-avatar-group__size--sm .cck-avatar):not(:last-of-type){margin-left:-10px}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-left.cck-avatar-group__size--md .cck-avatar):not(:last-of-type){margin-left:-14px}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-left.cck-avatar-group__size--lg .cck-avatar):not(:last-of-type){margin-left:-16px}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-right.cck-avatar-group__size--xs .cck-avatar):not(:first-of-type){margin-left:-10px}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-right.cck-avatar-group__size--sm .cck-avatar):not(:first-of-type){margin-left:-10px}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-right.cck-avatar-group__size--md .cck-avatar):not(:first-of-type){margin-left:-14px}:where([data-cck-theme-name=cocokits] .cck-avatar-group--direction-right.cck-avatar-group__size--lg .cck-avatar):not(:first-of-type){margin-left:-16px}:where([data-cck-theme-name=cocokits] .cck-avatar-group .cck-avatar){border:2px solid var(--color-border-light)}:where([data-cck-theme-name=cocokits] .cck-avatar-label){align-items:center;display:flex}:where([data-cck-theme-name=cocokits] .cck-avatar-label__title){color:var(--color-font-default)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__description){color:var(--color-font-alpha-6)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__label-wrapper){display:flex}:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-right){flex-direction:row-reverse}:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-right .cck-avatar-label__label-wrapper){text-align:right}:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-left){flex-direction:row}:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-top){flex-direction:column}:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-bottom){flex-direction:column-reverse}:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-bottom.cck-avatar-label--label-vertical .cck-avatar-label__label-wrapper),:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-top.cck-avatar-label--label-vertical .cck-avatar-label__label-wrapper){align-items:center}:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-left.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper),:where([data-cck-theme-name=cocokits] .cck-avatar-label--avatar-right.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){align-items:center}:where([data-cck-theme-name=cocokits] .cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){align-items:center;flex-direction:row}:where([data-cck-theme-name=cocokits] .cck-avatar-label--label-vertical .cck-avatar-label__label-wrapper){flex-direction:column;justify-content:center}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--xs){gap:var(--size-12)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--xs .cck-avatar-label__label-wrapper){font:var(--text-xs-medium)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--xs.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){gap:var(--size-12)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--sm){gap:var(--size-12)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--sm .cck-avatar-label__label-wrapper){font:var(--text-sm-medium)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--sm.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){gap:var(--size-12)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--md){gap:var(--size-12)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--md .cck-avatar-label__label-wrapper){font:var(--text-md-medium)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--md.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){gap:var(--size-12)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--lg){gap:var(--size-20)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--lg .cck-avatar-label__label-wrapper){font:var(--text-md-medium)}:where([data-cck-theme-name=cocokits] .cck-avatar-label__size--lg.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){gap:var(--size-20)}:where([data-cck-theme-name=cocokits] .cck-accordion){display:flex;flex-direction:column}:where([data-cck-theme-name=cocokits] .cck-accordion__default.cck-accordion__size--sm){gap:var(--size-12)}:where([data-cck-theme-name=cocokits] .cck-accordion__default.cck-accordion__size--md){gap:var(--size-20)}:where([data-cck-theme-name=cocokits] .cck-accordion__group){border:1px solid var(--color-border-default);border-radius:6px}:where([data-cck-theme-name=cocokits] .cck-accordion-header--trigger-icon>.cck-accordion-header__icon-btn):hover{background-color:var(--color-h-contrast-alpha-1)}:where([data-cck-theme-name=cocokits] .cck-accordion-header--trigger-header){cursor:pointer}:where([data-cck-theme-name=cocokits] .cck-accordion-header--trigger-header>.cck-accordion-header__icon-btn):hover{background-color:transparent}:where([data-cck-theme-name=cocokits] .cck-accordion-header){align-items:center;color:var(--color-font-default);display:flex}:where([data-cck-theme-name=cocokits] .cck-accordion-header .cck-svg-icon.cck-svg-icon--default-color){fill:var(--color-font-default)}:where([data-cck-theme-name=cocokits] .cck-accordion-header>.cck-accordion-header__icon-btn){background-color:transparent;fill:var(--color-font-default);align-items:center;border:none;border-radius:4px;cursor:pointer;display:flex;justify-self:center;outline:none}:where([data-cck-theme-name=cocokits] .cck-accordion-header--icon-right>.cck-accordion-header__icon-btn){margin-left:auto}:where([data-cck-theme-name=cocokits] .cck-accordion-header--icon-left){flex-direction:row-reverse;justify-content:flex-end}:where([data-cck-theme-name=cocokits] .cck-accordion__size--sm>.cck-accordion-panel>.cck-accordion-header){height:var(--size-48)}:where([data-cck-theme-name=cocokits] .cck-accordion__size--sm>.cck-accordion-panel>.cck-accordion-header>.cck-accordion-header__icon-btn){height:36px;width:36px}:where([data-cck-theme-name=cocokits] .cck-accordion__size--md>.cck-accordion-panel .cck-accordion-header){height:var(--size-56)}:where([data-cck-theme-name=cocokits] .cck-accordion__size--md>.cck-accordion-panel .cck-accordion-header>.cck-accordion-header__icon-btn){height:36px;width:36px}:where([data-cck-theme-name=cocokits] .cck-accordion-panel>.cck-accordion-header){font:var(--text-md-medium)}:where([data-cck-theme-name=cocokits] .cck-accordion-panel>.cck-accordion-header.cck-accordion-header--icon-right){padding-left:var(--size-20);padding-right:calc(var(--size-20) - 10px)}:where([data-cck-theme-name=cocokits] .cck-accordion-panel>.cck-accordion-header.cck-accordion-header--icon-left){padding-left:calc(var(--size-20) - 10px);padding-right:var(--size-20)}:where([data-cck-theme-name=cocokits] .cck-accordion__default>.cck-accordion-panel--collapsed>.cck-accordion-header),:where([data-cck-theme-name=cocokits] .cck-accordion__group>.cck-accordion-panel--collapsed>.cck-accordion-header){background-color:var(--color-h-contrast-alpha-2)}:where([data-cck-theme-name=cocokits] .cck-accordion__basic>.cck-accordion-panel>.cck-accordion-header--trigger-header):hover{background-color:var(--color-h-contrast-alpha-2)}:where([data-cck-theme-name=cocokits] .cck-accordion-panel--disabled){color:var(--color-disabled-font);opacity:.5}:where([data-cck-theme-name=cocokits] .cck-accordion-panel--disabled>.cck-accordion-header){color:currentcolor}:where([data-cck-theme-name=cocokits] .cck-accordion-panel--disabled>.cck-accordion-header.cck-accordion-header--trigger-header){cursor:not-allowed}:where([data-cck-theme-name=cocokits] .cck-accordion-panel--disabled>.cck-accordion-header>.cck-accordion-header__icon-btn){display:none}:where([data-cck-theme-name=cocokits] .cck-accordion-panel){color:var(--color-font-default);font:var(--text-md-regular);overflow:hidden;transition:padding-bottom .3s}:where([data-cck-theme-name=cocokits] .cck-accordion--instant-animation>.cck-accordion-panel){transition:none}:where([data-cck-theme-name=cocokits] .cck-accordion-panel--collapsed){padding-bottom:0}:where([data-cck-theme-name=cocokits] .cck-accordion__size--sm>.cck-accordion-panel.cck-accordion-panel--expanded){padding-bottom:var(--size-20)}:where([data-cck-theme-name=cocokits] .cck-accordion__size--sm>.cck-accordion-panel>.cck-accordion-panel__content-wrapper){padding-left:var(--size-20);padding-right:var(--size-20)}:where([data-cck-theme-name=cocokits] .cck-accordion__size--md>.cck-accordion-panel.cck-accordion-panel--expanded){padding-bottom:var(--size-20)}:where([data-cck-theme-name=cocokits] .cck-accordion__size--md>.cck-accordion-panel>.cck-accordion-panel__content-wrapper){padding-left:var(--size-20);padding-right:var(--size-20)}:where([data-cck-theme-name=cocokits] .cck-accordion__default>.cck-accordion-panel){border:1px solid var(--color-border-default);border-radius:6px}:where([data-cck-theme-name=cocokits] .cck-accordion__basic>.cck-accordion-panel):not(:last-of-type),:where([data-cck-theme-name=cocokits] .cck-accordion__group>.cck-accordion-panel):not(:last-of-type){border-bottom:1px solid var(--color-border-default)}:where([data-cck-theme-name=cocokits] .cck-tabs){opacity:1}:where([data-cck-theme-name=cocokits] .cck-tab){opacity:1}:where([data-cck-theme-name=frames-x] .cck-button){align-items:center;border:none;border-radius:var(--radi-6);box-sizing:border-box;cursor:pointer;display:inline-flex;justify-content:center;margin:0;outline:transparent;transition:all .1s}:where([data-cck-theme-name=frames-x] .cck-button):focus-visible{box-shadow:0 0 0 3px var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-button .cck-svg-icon--default-color .cck-svg-icon__svg){fill:currentcolor}:where([data-cck-theme-name=frames-x] .cck-button__backdrop){display:none}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--brand){background-color:var(--state-brand-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--brand):hover{background-color:var(--state-brand-hover)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--brand):active{background-color:var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--brand):disabled{background-color:var(--base-fill-1);color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--highlight){background-color:var(--state-highlight-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--highlight):hover{background-color:var(--state-highlight-hover)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--highlight):active{background-color:var(--state-highlight-selected)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--highlight):disabled{background-color:var(--base-fill-1);color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--success){background-color:var(--state-success-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--success):hover{background-color:var(--state-success-hover)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--success):active{background-color:var(--state-success-selected)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--success):disabled{background-color:var(--base-fill-1);color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--danger){background-color:var(--state-danger-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--danger):hover{background-color:var(--state-danger-hover)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--danger):active{background-color:var(--state-danger-selected)}:where([data-cck-theme-name=frames-x] .cck-button__default.cck-button__color--danger):disabled{background-color:var(--base-fill-1);color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__secondary){background-color:var(--base-surface-2);border:1px solid var(--base-border);color:var(--text-dark-primary);outline:1px solid transparent}:where([data-cck-theme-name=frames-x] .cck-button__secondary):hover{background-color:var(--base-fill-2);border:1px solid var(--base-fill-2)}:where([data-cck-theme-name=frames-x] .cck-button__secondary):active{background-color:var(--base-fill-1);border:1px solid var(--base-border)}:where([data-cck-theme-name=frames-x] .cck-button__secondary):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__ghost){background-color:var(--base-surface-1);outline:1px solid transparent}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--brand){border:1px solid var(--state-brand-active);color:var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--brand):hover{border:1px solid var(--state-brand-hover);outline:1px solid var(--state-brand-hover)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--brand):active{border:1px solid var(--state-brand-selected);outline:1px solid var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--brand):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--highlight){border:1px solid var(--state-highlight-active);color:var(--state-highlight-active)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--highlight):hover{border:1px solid var(--state-highlight-hover);outline:1px solid var(--state-highlight-hover)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--highlight):active{border:1px solid var(--state-highlight-selected);outline:1px solid var(--state-highlight-selected)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--highlight):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--success){border:1px solid var(--state-success-active);color:var(--state-success-active)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--success):hover{border:1px solid var(--state-success-hover);outline:1px solid var(--state-success-hover)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--success):active{border:1px solid var(--state-success-selected);outline:1px solid var(--state-success-selected)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--success):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--danger){border:1px solid var(--state-danger-active);color:var(--state-danger-active)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--danger):hover{border:1px solid var(--state-danger-hover);outline:1px solid var(--state-danger-hover)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--danger):active{border:1px solid var(--state-danger-selected);outline:1px solid var(--state-danger-selected)}:where([data-cck-theme-name=frames-x] .cck-button__ghost.cck-button__color--danger):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-button__size--sm){font:var(--text-sm-font-semibold);gap:var(--spacing-3);height:36px;padding:var(--spacing-0) var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-button__size--md){font:var(--text-base-font-semibold);gap:var(--spacing-5);height:44px;padding:var(--spacing-0) var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-button__size--lg){font:var(--text-lg-font-semibold);gap:var(--spacing-7);height:44px;padding:var(--spacing-0) var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-button__size--xl){font:var(--text-xl-font-semibold);gap:var(--spacing-7);height:56px;padding:var(--spacing-0) var(--spacing-10)}:where([data-cck-theme-name=frames-x] .cck-checkbox){display:flex;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-checkbox__wrapper){align-items:center;display:inline-flex;vertical-align:middle}:where([data-cck-theme-name=frames-x] .cck-checkbox__input-wrapper){box-sizing:content-box;cursor:pointer;display:inline-block;flex-shrink:0;line-height:0;position:relative;white-space:nowrap}:where([data-cck-theme-name=frames-x] .cck-checkbox__input){cursor:inherit;height:100%;left:0;margin:0;opacity:0;padding:0;position:absolute;right:0;top:0;width:100%}:where([data-cck-theme-name=frames-x] .cck-checkbox__input:focus-visible~.cck-checkbox__background){border:2px solid var(--state-brand-selected);box-shadow:0 0 0 1px var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-checkbox__background){align-items:center;background-color:var(--base-fill-1);border:2px solid var(--base-border);border-radius:var(--radi-4);box-sizing:border-box;display:flex;height:100%;justify-content:center;pointer-events:none;position:absolute;transition:background-color 90ms cubic-bezier(.4,0,.6,1),border-color 90ms cubic-bezier(.4,0,.6,1);width:100%;will-change:background-color,outline-color}:where([data-cck-theme-name=frames-x] .cck-checkbox.cck-checkbox--disabled .cck-checkbox__background){background-color:var(--base-disabled);border:2px solid transparent}:where([data-cck-theme-name=frames-x] .cck-checkbox.cck-checkbox--disabled .cck-checkbox__label){color:var(--base-disabled)}:where([data-cck-theme-name=frames-x] .cck-checkbox.cck-checkbox--disabled *){cursor:default}:where([data-cck-theme-name=frames-x] .cck-checkbox--checked .cck-checkbox__background){background-color:var(--state-brand-active);border:2px solid var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-checkbox--checked .cck-checkbox__checkmark){opacity:1}:where([data-cck-theme-name=frames-x] .cck-checkbox--indeterminate .cck-checkbox__background){background-color:var(--state-brand-active);border:2px solid var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-checkbox--indeterminate .cck-checkbox__checkmark){opacity:0;transform:rotate(45deg);transition:opacity 90ms cubic-bezier(.4,0,.6,1),transform 90ms cubic-bezier(.4,0,.6,1)}:where([data-cck-theme-name=frames-x] .cck-checkbox--indeterminate .cck-checkbox__mixedmark){opacity:1;transform:scaleX(1) rotate(0deg)}:where([data-cck-theme-name=frames-x] .cck-checkbox__mixedmark){border:2px solid #fff;border-radius:100px;height:0;margin:2px;opacity:0;transform:scaleX(0) rotate(0deg);transition:opacity 90ms cubic-bezier(.4,0,.6,1),transform 90ms cubic-bezier(.4,0,.6,1);width:100%}:where([data-cck-theme-name=frames-x] .cck-checkbox__checkmark){color:#fff;inset:0;opacity:0;padding:2px;position:absolute;transition:opacity .18s cubic-bezier(.4,0,.6,1);width:100%}:where([data-cck-theme-name=frames-x] .cck-checkbox__checkmark-path){fill:currentcolor}:where([data-cck-theme-name=frames-x] .cck-checkbox__label){color:var(--text-dark-primary);cursor:pointer;margin-left:0;margin-right:auto;order:0;padding-left:0;padding-right:0;text-align:left;white-space:nowrap}:where([data-cck-theme-name=frames-x] .cck-checkbox__label):empty{display:none}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--sm .cck-checkbox__wrapper){gap:var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--sm .cck-checkbox__input-wrapper){height:22px;width:22px}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--sm .cck-checkbox__label){font:var(--text-sm-font-medium)}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--md .cck-checkbox__wrapper){gap:var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--md .cck-checkbox__input-wrapper){height:24px;width:24px}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--md .cck-checkbox__label){font:var(--text-base-font-medium)}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--lg .cck-checkbox__wrapper){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--lg .cck-checkbox__input-wrapper){height:32px;width:32px}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--lg .cck-checkbox__label){font:var(--text-lg-font-medium)}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--xl .cck-checkbox__wrapper){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--xl .cck-checkbox__input-wrapper){height:32px;width:32px}:where([data-cck-theme-name=frames-x] .cck-checkbox__size--xl .cck-checkbox__label){font:var(--text-xl-font-medium)}:where([data-cck-theme-name=frames-x] .cck-chip){align-items:center;background-color:var(--base-surface-2);border:1px solid var(--base-border);border-radius:var(--radi-5);color:var(--text-dark-primary);cursor:default;display:flex;transition:all .1s}:where([data-cck-theme-name=frames-x] .cck-chip--disabled){background-color:var(--base-fill-1);border:1px solid transparent;color:var(--base-disabled);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-chip__content-wrapper){align-items:center;display:flex;justify-content:center}:where([data-cck-theme-name=frames-x] .cck-chip__remove-icon-wrapper){align-items:center;display:flex;flex-shrink:0;justify-content:center}:where([data-cck-theme-name=frames-x] .cck-chip__remove-icon-wrapper .cck-icon-button){background-color:transparent;border-radius:50%;color:var(--base-fill-4);height:24px;padding:0;width:24px}:where([data-cck-theme-name=frames-x] .cck-chip__remove-icon-wrapper .cck-icon-button):hover{background-color:var(--base-fill-1)}:where([data-cck-theme-name=frames-x] .cck-chip__remove-icon-wrapper .cck-icon-button .cck-svg-icon){height:100%;width:100%}:where([data-cck-theme-name=frames-x] .cck-chip__size--sm){font:var(--text-xs-font-medium);gap:var(--spacing-4);height:26px;padding:0 var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-chip__size--sm.cck-chip--removable){padding:0 var(--spacing-6) 0 var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-chip__size--md){font:var(--text-base-font-medium);gap:var(--spacing-4);height:34px;padding:0 var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-chip__size--md.cck-chip--removable){padding:0 var(--spacing-7) 0 var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-chip__size--lg){font:var(--text-lg-font-medium);gap:var(--spacing-6);height:44px;padding:0 var(--spacing-9)}:where([data-cck-theme-name=frames-x] .cck-chip__size--lg.cck-chip--removable){padding:0 var(--spacing-8) 0 var(--spacing-9)}:where([data-cck-theme-name=frames-x] .cck-chip-list){align-items:stretch;display:flex;flex-wrap:wrap;justify-content:flex-start}:where([data-cck-theme-name=frames-x] .cck-chip-list__input){background:transparent;border:none;color:var(--text-dark-primary);flex:1;font:var(--text-base-font-medium);outline:none}:where([data-cck-theme-name=frames-x] .cck-chip-list__input::-moz-placeholder){color:var(--text-dark-tertiary);-moz-transition:color .1s ease-in;transition:color .1s ease-in}:where([data-cck-theme-name=frames-x] .cck-chip-list__input::placeholder){color:var(--text-dark-tertiary);transition:color .1s ease-in}:where([data-cck-theme-name=frames-x] .cck-chip-list__input::-moz-placeholder):not(:focus){color:transparent}:where([data-cck-theme-name=frames-x] .cck-chip-list__input::placeholder):not(:focus){color:transparent}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--sm){gap:6px}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--sm .cck-chip-list__input){font:var(--text-xs-font-medium);height:26px;margin-left:var(--spacing-5)}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--sm .cck-chip-list__input):first-child{margin-left:calc(var(--spacing-6) - 4px)}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--md){gap:6px}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--md .cck-chip-list__input){font:var(--text-base-font-medium);height:34px;margin-left:var(--spacing-6)}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--md .cck-chip-list__input):first-child{margin-left:calc(var(--spacing-7) - 4px)}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--lg){gap:6px}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--lg .cck-chip-list__input){font:var(--text-lg-font-medium);height:44px;margin-left:var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-chip-list__size--lg .cck-chip-list__input):first-child{margin-left:calc(var(--spacing-7) - 6px)}:where([data-cck-theme-name=frames-x] *){box-sizing:border-box}:where([data-cck-theme-name=frames-x] .cck-divider){background-color:var(--base-border);display:block;flex-shrink:0}:where([data-cck-theme-name=frames-x] .cck-divider__horizontal){margin:4px 0;width:100%}:where([data-cck-theme-name=frames-x] .cck-divider__horizontal.cck-divider__size--sm){height:1px}:where([data-cck-theme-name=frames-x] .cck-divider__horizontal.cck-divider__size--md){height:2px;width:100%}:where([data-cck-theme-name=frames-x] .cck-divider__vertical){height:100%;margin:0 4px}:where([data-cck-theme-name=frames-x] .cck-divider__vertical.cck-divider__size--sm){width:1px}:where([data-cck-theme-name=frames-x] .cck-divider__vertical.cck-divider__size--md){width:2px}:where([data-cck-theme-name=frames-x] .cck-error){color:var(--state-danger-active);display:flex;font:var(--text-sm-font-medium);gap:6px}:where([data-cck-theme-name=frames-x] .cck-error .cck-svg-icon--default-color .cck-svg-icon__svg){fill:currentcolor}:where([data-cck-theme-name=frames-x] .cck-form-field){align-items:flex-start;display:flex;flex-direction:column;gap:10px;min-width:100px}:where([data-cck-theme-name=frames-x] .cck-form-field .cck-select){flex:1;height:100%;width:100%}:where([data-cck-theme-name=frames-x] .cck-form-field .cck-input){flex:1;width:100%}:where([data-cck-theme-name=frames-x] .cck-form-field--error .cck-form-field__wrapper){border:1px solid var(--state-danger-active);outline:1px solid var(--state-danger-active)}:where([data-cck-theme-name=frames-x] .cck-form-field--focused .cck-form-field__wrapper){background-color:var(--base-surface-2);border:1px solid var(--state-brand-active);outline:1px solid var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-form-field--disabled .cck-form-field__wrapper){background-color:var(--base-fill-1);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-form-field__wrapper){align-items:stretch;background-color:var(--base-surface-1);border:1px solid var(--base-border);border-radius:var(--radi-6);display:flex;flex-direction:row;outline:1px solid transparent;overflow:hidden;width:100%}:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm.cck-form-field--with-input .cck-form-field__wrapper),:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm.cck-form-field--with-select .cck-form-field__wrapper){height:36px}:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm.cck-form-field--with-input .cck-form-field__input-wrapper),:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm.cck-form-field--with-select .cck-form-field__input-wrapper){padding:0 var(--spacing-6) 0 var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm .cck-form-field--with-textarea .cck-form-field__input-wrapper){padding:var(--spacing-6) var(--spacing-6) var(--spacing-6) var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm.cck-form-field--with-chip-list .cck-form-field__input-wrapper){padding:4px}:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm .cck-input),:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm .cck-leading),:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm .cck-select),:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm .cck-textarea),:where([data-cck-theme-name=frames-x] .cck-form-field__size--sm .cck-trailing){font:var(--text-sm-font-medium)}:where([data-cck-theme-name=frames-x] .cck-form-field__size--md.cck-form-field--with-input .cck-form-field__wrapper),:where([data-cck-theme-name=frames-x] .cck-form-field__size--md.cck-form-field--with-select .cck-form-field__wrapper){height:44px}:where([data-cck-theme-name=frames-x] .cck-form-field__size--md.cck-form-field--with-input .cck-form-field__input-wrapper),:where([data-cck-theme-name=frames-x] .cck-form-field__size--md.cck-form-field--with-select .cck-form-field__input-wrapper){padding:0 var(--spacing-7) 0 var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-form-field__size--md .cck-form-field--with-textarea .cck-form-field__input-wrapper){padding:var(--spacing-7) var(--spacing-7) var(--spacing-7) var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-form-field__size--md.cck-form-field--with-chip-list .cck-form-field__input-wrapper){padding:4px}:where([data-cck-theme-name=frames-x] .cck-form-field__size--md .cck-input),:where([data-cck-theme-name=frames-x] .cck-form-field__size--md .cck-leading),:where([data-cck-theme-name=frames-x] .cck-form-field__size--md .cck-select),:where([data-cck-theme-name=frames-x] .cck-form-field__size--md .cck-textarea),:where([data-cck-theme-name=frames-x] .cck-form-field__size--md .cck-trailing){font:var(--text-base-font-medium)}:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg.cck-form-field--with-input .cck-form-field__wrapper),:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg.cck-form-field--with-select .cck-form-field__wrapper){height:56px}:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg.cck-form-field--with-input .cck-form-field__input-wrapper),:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg.cck-form-field--with-select .cck-form-field__input-wrapper){padding:0 var(--spacing-7) 0 var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg .cck-form-field--with-textarea .cck-form-field__input-wrapper){padding:var(--spacing-7) var(--spacing-7) var(--spacing-7) var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg.cck-form-field--with-chip-list .cck-form-field__input-wrapper){padding:6px}:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg .cck-input),:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg .cck-leading),:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg .cck-select),:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg .cck-textarea),:where([data-cck-theme-name=frames-x] .cck-form-field__size--lg .cck-trailing){font:var(--text-lg-font-medium)}:where([data-cck-theme-name=frames-x] .cck-form-field__feedback-wrapper){display:flex;flex-direction:column;overflow:hidden}:where([data-cck-theme-name=frames-x] .cck-form-field__feedback-wrapper):empty{display:none}:where([data-cck-theme-name=frames-x] .cck-form-field__input-wrapper){align-items:center;display:flex;flex:1;flex-direction:row;gap:8px;min-width:0}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list .cck-chip-list){flex:1}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list .cck-form-field__wrapper){cursor:text}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list .cck-prefix),:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list .cck-suffix){align-self:flex-start}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list.cck-form-field__size--sm .cck-suffix){margin-right:4px;margin-top:6px}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list.cck-form-field__size--md .cck-suffix){margin-right:4px;margin-top:8px}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list.cck-form-field__size--lg .cck-suffix){margin-left:4px;margin-right:8px;margin-top:12px}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list.cck-form-field__size--sm .cck-prefix){margin-left:4px;margin-top:6px}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list.cck-form-field__size--md .cck-prefix){margin-left:4px;margin-top:8px}:where([data-cck-theme-name=frames-x] .cck-form-field--with-chip-list.cck-form-field__size--lg .cck-prefix){margin-left:8px;margin-right:4px;margin-top:12px}:where([data-cck-theme-name=frames-x] .cck-form-field--with-textarea .cck-form-field__input-wrapper){padding:10px 10px 10px 16px}:where([data-cck-theme-name=frames-x] .cck-form-field--with-textarea .cck-form-field__input-wrapper):hover:not(:has(textarea:focus-visible)){background-color:var(--base-fill-1)}:where([data-cck-theme-name=frames-x] .cck-form-field--with-input .cck-form-field__input-wrapper):hover:not(:has(input:focus-visible)),:where([data-cck-theme-name=frames-x] .cck-form-field--with-select .cck-form-field__input-wrapper):hover:not(:has(input:focus-visible)){background-color:var(--base-fill-1)}:where([data-cck-theme-name=frames-x] .cck-hint){color:var(--text-dark-secondary);display:flex;font:var(--text-sm-font-medium);gap:6px}:where([data-cck-theme-name=frames-x] .cck-hint .cck-svg-icon--default-color .cck-svg-icon__svg){fill:currentcolor}:where([data-cck-theme-name=frames-x] .cck-hint__color--default){color:var(--text-dark-secondary)}:where([data-cck-theme-name=frames-x] .cck-hint__color--success){color:var(--state-success-active)}:where([data-cck-theme-name=frames-x] .cck-svg-icon){align-items:center;display:flex;flex-shrink:0;justify-content:center}:where([data-cck-theme-name=frames-x] .cck-svg-icon__svg){height:100%;width:100%}:where([data-cck-theme-name=frames-x] .cck-svg-icon__size--xs){height:var(--icon-xs);width:var(--icon-xs)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__size--sm){height:var(--icon-sm);width:var(--icon-sm)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__size--md){height:var(--icon-md);width:var(--icon-md)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__size--lg){height:var(--icon-lg);width:var(--icon-lg)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__size--xl){height:var(--icon-xl);width:var(--icon-xl)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__size--2xl){height:var(--icon-2xl);width:var(--icon-2xl)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__size--3xl){height:var(--icon-3xl);width:var(--icon-3xl)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__size--4xl){height:var(--icon-4xl);width:var(--icon-4xl)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__color--grey){fill:var(--base-fill-4)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__color--brand){fill:var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__color--highlight){fill:var(--state-highlight-active)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__color--success){fill:var(--state-success-active)}:where([data-cck-theme-name=frames-x] .cck-svg-icon__color--danger){fill:var(--state-danger-active)}:where([data-cck-theme-name=frames-x] .cck-icon-button){align-items:center;border:none;border-radius:var(--radi-6);box-sizing:border-box;cursor:pointer;display:inline-flex;justify-content:center;margin:0;outline:transparent;transition:all .1s}:where([data-cck-theme-name=frames-x] .cck-icon-button .cck-svg-icon--default-color){fill:currentcolor}:where([data-cck-theme-name=frames-x] .cck-icon-button):focus-visible{box-shadow:0 0 0 3px var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--brand){background-color:var(--state-brand-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--brand):hover{background-color:var(--state-brand-hover)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--brand):active{background-color:var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--brand):disabled{background-color:var(--base-fill-1);color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--highlight){background-color:var(--state-highlight-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--highlight):hover{background-color:var(--state-highlight-hover)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--highlight):active{background-color:var(--state-highlight-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--highlight):disabled{background-color:var(--base-fill-1);color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--success){background-color:var(--state-success-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--success):hover{background-color:var(--state-success-hover)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--success):active{background-color:var(--state-success-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--success):disabled{background-color:var(--base-fill-1);color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--danger){background-color:var(--state-danger-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--danger):hover{background-color:var(--state-danger-hover)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--danger):active{background-color:var(--state-danger-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__default.cck-icon-button__color--danger):disabled{background-color:var(--base-fill-1);color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__secondary){background-color:var(--base-surface-2);border:1px solid var(--base-border);color:var(--text-dark-primary);outline:1px solid transparent}:where([data-cck-theme-name=frames-x] .cck-icon-button__secondary):hover{background-color:var(--base-fill-2);border:1px solid var(--base-fill-2)}:where([data-cck-theme-name=frames-x] .cck-icon-button__secondary):active{background-color:var(--base-fill-1);border:1px solid var(--base-border)}:where([data-cck-theme-name=frames-x] .cck-icon-button__secondary):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost){background-color:var(--base-surface-1);outline:1px solid transparent}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--brand){border:1px solid var(--state-brand-active);color:var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--brand):hover{border:1px solid var(--state-brand-hover);outline:1px solid var(--state-brand-hover)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--brand):active{border:1px solid var(--state-brand-selected);outline:1px solid var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--brand):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--highlight){border:1px solid var(--state-highlight-active);color:var(--state-highlight-active)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--highlight):hover{border:1px solid var(--state-highlight-hover);outline:1px solid var(--state-highlight-hover)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--highlight):active{border:1px solid var(--state-highlight-selected);outline:1px solid var(--state-highlight-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--highlight):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--success){border:1px solid var(--state-success-active);color:var(--state-success-active)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--success):hover{border:1px solid var(--state-success-hover);outline:1px solid var(--state-success-hover)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--success):active{border:1px solid var(--state-success-selected);outline:1px solid var(--state-success-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--success):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--danger){border:1px solid var(--state-danger-active);color:var(--state-danger-active)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--danger):hover{border:1px solid var(--state-danger-hover);outline:1px solid var(--state-danger-hover)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--danger):active{border:1px solid var(--state-danger-selected);outline:1px solid var(--state-danger-selected)}:where([data-cck-theme-name=frames-x] .cck-icon-button__ghost.cck-icon-button__color--danger):disabled{background-color:var(--base-fill-1);border:none;color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-icon-button__size--sm){height:36px;width:36px}:where([data-cck-theme-name=frames-x] .cck-icon-button__size--sm .cck-svg-icon--default-size){height:var(--icon-md);width:var(--icon-md)}:where([data-cck-theme-name=frames-x] .cck-icon-button__size--md){height:44px;width:44px}:where([data-cck-theme-name=frames-x] .cck-icon-button__size--md .cck-svg-icon--default-size){height:var(--icon-lg);width:var(--icon-lg)}:where([data-cck-theme-name=frames-x] .cck-icon-button__size--lg){height:44px;width:44px}:where([data-cck-theme-name=frames-x] .cck-icon-button__size--lg .cck-svg-icon--default-size){height:var(--icon-xl);width:var(--icon-xl)}:where([data-cck-theme-name=frames-x] .cck-icon-button__size--xl){height:56px;width:56px}:where([data-cck-theme-name=frames-x] .cck-icon-button__size--xl .cck-svg-icon--default-size){height:var(--icon-2xl);width:var(--icon-2xl)}:where([data-cck-theme-name=frames-x] .cck-input){background-color:transparent;border:none;color:var(--text-dark-primary);font:var(--text-base-font-medium);outline:none;text-overflow:ellipsis}:where([data-cck-theme-name=frames-x] .cck-input::-moz-placeholder){color:var(--text-dark-tertiary)}:where([data-cck-theme-name=frames-x] .cck-input::placeholder){color:var(--text-dark-tertiary)}:where([data-cck-theme-name=frames-x] .cck-input):disabled{color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-label){color:var(--text-dark-secondary);display:flex;font:var(--text-base-font-regular)}:where([data-cck-theme-name=frames-x] .cck-label__required-marker){margin-left:4px}:where([data-cck-theme-name=frames-x] .cck-leading){align-items:center;background-color:var(--base-surface-2);color:var(--text-dark-tertiary);cursor:default;display:flex;font:var(--text-base-font-medium);gap:var(--spacing-4);justify-content:center;padding:0 var(--spacing-7);-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-leading--clickable){cursor:pointer;transition:background-color .1s}:where([data-cck-theme-name=frames-x] .cck-leading--clickable):active{background-color:var(--base-fill-1)}:where([data-cck-theme-name=frames-x] .cck-leading--clickable):hover{background-color:var(--base-fill-2)}:where([data-cck-theme-name=frames-x] .cck-menu){background-color:var(--base-surface-1);border:1px solid var(--base-border);border-radius:var(--radi-6);box-shadow:0 8px 10px -6px rgba(13,16,23,.039),0 18px 22px -4px rgba(13,16,23,.078);display:flex;flex-direction:column;margin:4px 0;overflow:hidden;padding:0}:where([data-cck-theme-name=frames-x] .cck-menu__overlay .cck-overlay__backdrop){background-color:transparent}:where([data-cck-theme-name=frames-x] .cck-menu-item){align-items:center;color:var(--text-dark-secondary);display:flex;font:var(--text-base-font-medium);gap:var(--spacing-6);justify-content:flex-start;padding:var(--spacing-6) var(--spacing-5)}:where([data-cck-theme-name=frames-x] .cck-menu-item):not(.cck-menu-item--disabled){cursor:pointer}:where([data-cck-theme-name=frames-x] .cck-menu-item--disabled .cck-svg-icon.cck-svg-icon--default-color),:where([data-cck-theme-name=frames-x] .cck-menu-item--disabled){color:var(--base-disabled)}:where([data-cck-theme-name=frames-x] .cck-menu-item):not(.cck-menu-item--disabled):hover{background-color:var(--base-fill-1)}:where([data-cck-theme-name=frames-x] .cck-menu-item .cck-svg-icon.cck-svg-icon--default-size){height:var(--icon-lg);width:var(--icon-lg)}:where([data-cck-theme-name=frames-x] .cck-menu-item .cck-svg-icon.cck-svg-icon--default-color .cck-svg-icon__svg){fill:currentcolor}:where([data-cck-theme-name=frames-x] .cck-select__options-wrapper){background-color:var(--base-surface-1);border:1px solid var(--base-border);border-radius:var(--radi-6);height:inherit;margin-top:6px;max-height:inherit;overflow:auto}:where([data-cck-theme-name=frames-x] .cck-option__content-wrapper){flex:1}:where([data-cck-theme-name=frames-x] .cck-option){align-items:center;color:var(--text-dark-secondary);display:flex;font:var(--text-base-font-medium);gap:8px;padding:0 12px}:where([data-cck-theme-name=frames-x] .cck-option):not(.cck-option--disabled){cursor:pointer}:where([data-cck-theme-name=frames-x] .cck-option--disabled){color:var(--base-disabled);-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-option):not(.cck-option--disabled):hover{background-color:var(--base-fill-1)}:where([data-cck-theme-name=frames-x] .cck-option .cck-checkbox__input-wrapper){height:22px;width:22px}:where([data-cck-theme-name=frames-x] .cck-option--single.cck-option--selected){color:var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-option__size--sm){height:40px}:where([data-cck-theme-name=frames-x] .cck-option__size--md){height:48px}:where([data-cck-theme-name=frames-x] .cck-option__size--lg){height:56px}:where([data-cck-theme-name=frames-x] .cck-option__selected-checkmark .cck-svg-icon){height:var(--icon-md);width:var(--icon-md);fill:currentcolor}:where([data-cck-theme-name=frames-x] .cck-option-group){display:flex;flex-direction:column}:where([data-cck-theme-name=frames-x] .cck-option-group--label){align-items:center;color:var(--text-dark-primary);display:flex;font:var(--text-base-font-bold);padding:0 12px}:where([data-cck-theme-name=frames-x] .cck-option-group--disabled .cck-option-group--label){color:var(--base-disabled);-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-option-group .cck-option){padding:0 24px}:where([data-cck-theme-name=frames-x] .cck-option-group__size--sm .cck-option-group--label){height:40px}:where([data-cck-theme-name=frames-x] .cck-option-group__size--md .cck-option-group--label){height:48px}:where([data-cck-theme-name=frames-x] .cck-option-group__size--lg .cck-option-group--label){height:56px}:where([data-cck-theme-name=frames-x] .cck-prefix){flex-grow:0}:where([data-cck-theme-name=frames-x] .cck-prefix .cck-svg-icon.cck-svg-icon--default-size){height:var(--icon-md);width:var(--icon-md)}:where([data-cck-theme-name=frames-x] .cck-radio-button){color:var(--text-dark-primary);cursor:pointer}:where([data-cck-theme-name=frames-x] .cck-radio-button.cck-radio-button--disabled){color:var(--base-disabled);cursor:default;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-radio-button.cck-radio-button--disabled .cck-radio-button__input-wrapper){background-color:var(--base-disabled);border-color:transparent;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-radio-button.cck-radio-button--disabled .cck-radio-button__label){-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-radio-button:hover .cck-radio-button__input-wrapper){box-shadow:0 0 0 3px var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-radio-button__wrapper){align-items:center;display:inline-flex;vertical-align:middle}:where([data-cck-theme-name=frames-x] .cck-radio-button__input-wrapper){align-items:center;background-color:var(--base-fill-1);border:2px solid var(--base-border);border-radius:50%;display:flex;flex-shrink:0;justify-content:center;position:relative}:where([data-cck-theme-name=frames-x] .cck-radio-button__input){cursor:inherit;height:100%;left:0;margin:0;opacity:0;padding:0;position:absolute;right:0;top:0;width:100%;z-index:1}:where([data-cck-theme-name=frames-x] .cck-radio-button__background){background-color:var(--base-surface-1);border-radius:50%;opacity:0}:where([data-cck-theme-name=frames-x] .cck-radio-button__label){white-space:nowrap}:where([data-cck-theme-name=frames-x] .cck-radio-button--checked .cck-radio-button__input-wrapper){background-color:var(--state-brand-active);border-color:var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-radio-button--checked .cck-radio-button__background){opacity:1}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--sm){font:var(--text-sm-font-medium)}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--sm .cck-radio-button__wrapper){gap:var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--sm .cck-radio-button__input-wrapper){height:22px;width:22px}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--sm .cck-radio-button__background){height:12px;width:12px}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--md){font:var(--text-base-font-medium)}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--md .cck-radio-button__wrapper){gap:var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--md .cck-radio-button__input-wrapper){height:24px;width:24px}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--md .cck-radio-button__background){height:12px;width:12px}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--lg){font:var(--text-lg-font-medium)}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--lg .cck-radio-button__wrapper){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--lg .cck-radio-button__input-wrapper){height:32px;width:32px}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--lg .cck-radio-button__background){height:16px;width:16px}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--xl){font:var(--text-xl-font-medium)}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--xl .cck-radio-button__wrapper){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--xl .cck-radio-button__input-wrapper){height:32px;width:32px}:where([data-cck-theme-name=frames-x] .cck-radio-button__size--xl .cck-radio-button__background){height:16px;width:16px}:where([data-cck-theme-name=frames-x] .cck-radio-group){align-items:flex-start;display:flex}:where([data-cck-theme-name=frames-x] .cck-radio-group__row){flex-direction:row;gap:24px}:where([data-cck-theme-name=frames-x] .cck-radio-group__column){flex-direction:column;gap:12px}:where([data-cck-theme-name=frames-x] .cck-select){align-items:center;border-radius:var(--radi-6);color:var(--text-dark-primary);cursor:pointer;display:flex;font:var(--text-base-font-medium)}:where([data-cck-theme-name=frames-x] .cck-select:hover .cck-svg-icon){fill:var(--base-fill-5)}:where([data-cck-theme-name=frames-x] .cck-select--disabled){color:var(--base-disabled);cursor:auto;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-select__placeholder){color:var(--text-dark-tertiary)}:where([data-cck-theme-name=frames-x] .cck-select__trigger-wrapper){color:currentcolor;flex:1;overflow:hidden;padding-right:8px;text-align:start}:where([data-cck-theme-name=frames-x] .cck-select__trigger-value){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:where([data-cck-theme-name=frames-x] .cck-select__overlay .cck-overlay__backdrop){background-color:transparent}:where([data-cck-theme-name=frames-x] .cck-select__dropdown-icon-wrapper){transition:transform .3s}:where([data-cck-theme-name=frames-x] .cck-select__dropdown-icon-wrapper .cck-svg-icon){height:var(--icon-lg);width:var(--icon-lg)}:where([data-cck-theme-name=frames-x] .cck-select--opened .cck-select__dropdown-icon-wrapper){transform:rotate(180deg)}:where([data-cck-theme-name=frames-x] .cck-suffix){flex-grow:0}:where([data-cck-theme-name=frames-x] .cck-suffix .cck-svg-icon.cck-svg-icon--default-size){height:var(--icon-md);width:var(--icon-md)}:where([data-cck-theme-name=frames-x] .cck-textarea){background-color:transparent;border:none;color:var(--text-dark-primary);font:var(--text-base-font-medium);min-height:24px;min-width:100%;outline:none;padding:0;scrollbar-color:var(--base-border) transparent}:where([data-cck-theme-name=frames-x] .cck-textarea::-moz-placeholder){color:var(--text-dark-tertiary)}:where([data-cck-theme-name=frames-x] .cck-textarea::placeholder){color:var(--text-dark-tertiary)}:where([data-cck-theme-name=frames-x] .cck-textarea::-webkit-resizer){background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" viewBox="0 0 9 9" fill="none"><path d="M4 4L7.2929 0.707105C7.92286 0.0771402 9 0.523309 9 1.41421V6C9 7.65685 7.65685 9 6 9H1.41421C0.523309 9 0.077142 7.92286 0.707107 7.29289L4 4Z" fill="%23A1A1AA"/></svg>');background-position:100% 100%;background-repeat:no-repeat;height:9px;width:9px}:where([data-cck-theme-name=frames-x] .cck-textarea):disabled{color:var(--base-disabled);cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-toggle){cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-toggle__label){align-items:center;color:var(--text-dark-primary);cursor:pointer;display:flex;white-space:nowrap}:where([data-cck-theme-name=frames-x] .cck-toggle--label-before .cck-toggle__label){flex-direction:row-reverse}:where([data-cck-theme-name=frames-x] .cck-toggle__input){cursor:pointer;height:100%;margin:0;opacity:0;padding:0;position:relative;width:100%;z-index:3}:where([data-cck-theme-name=frames-x] .cck-toggle .cck-toggle__slider-wrapper){position:relative}:where([data-cck-theme-name=frames-x] .cck-toggle .cck-toggle__slider-wrapper):has(input:focus-visible){outline:2px solid var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-toggle__size--sm .cck-toggle__label){font:var(--text-sm-font-medium);gap:var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-toggle__size--md .cck-toggle__label){font:var(--text-base-font-medium);gap:var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-toggle__size--lg .cck-toggle__label){font:var(--text-lg-font-medium);gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-toggle__size--xl .cck-toggle__label){font:var(--text-xl-font-medium);gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob .cck-toggle__thumb){background-color:var(--base-surface-1);position:absolute;transition:all .3s ease;z-index:2}:where([data-cck-theme-name=frames-x] .cck-toggle__knob .cck-toggle__backdrop){height:100%;left:0;position:absolute;top:0;transition:background-color .3s ease;width:100%;z-index:1}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle--checked .cck-toggle__thumb){left:100%;top:50%;transform:translate(calc(-100% - var(--frames-x--toggle-margin)),-50%)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle--checked .cck-toggle__backdrop){background-color:var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle--unchecked .cck-toggle__thumb){left:0;top:50%;transform:translate(var(--frames-x--toggle-margin),-50%)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle--unchecked .cck-toggle__backdrop){background-color:var(--base-fill-2)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--sm){--frames-x--toggle-margin:2px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--sm .cck-toggle__slider-wrapper){height:19px;width:40px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--sm .cck-toggle__thumb){border-radius:var(--radi-2);height:15px;width:18px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--sm .cck-toggle__slider-wrapper){border-radius:var(--radi-3)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--sm .cck-toggle__backdrop){border-radius:var(--radi-3)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--md){--frames-x--toggle-margin:2px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--md .cck-toggle__slider-wrapper){height:24px;width:48px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--md .cck-toggle__thumb){border-radius:var(--radi-4);height:20px;width:22px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--md .cck-toggle__slider-wrapper){border-radius:var(--radi-5)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--md .cck-toggle__backdrop){border-radius:var(--radi-5)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--lg){--frames-x--toggle-margin:4px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--lg .cck-toggle__slider-wrapper){height:32px;width:56px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--lg .cck-toggle__thumb){border-radius:var(--radi-5);height:24px;width:26px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--lg .cck-toggle__slider-wrapper){border-radius:var(--radi-6)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--lg .cck-toggle__backdrop){border-radius:var(--radi-6)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--xl){--frames-x--toggle-margin:4px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--xl .cck-toggle__slider-wrapper){height:44px;width:80px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--xl .cck-toggle__thumb){border-radius:var(--radi-5);height:36px;width:36px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--xl .cck-toggle__slider-wrapper){border-radius:var(--radi-6)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle__size--xl .cck-toggle__backdrop){border-radius:var(--radi-6)}:where([data-cck-theme-name=frames-x] .cck-toggle__switch .cck-toggle__thumb){background-color:var(--base-surface-1);box-shadow:0 1px 2px var(--colors-alpha-dark-50);position:absolute;transition:all .3s ease;z-index:2}:where([data-cck-theme-name=frames-x] .cck-toggle__switch .cck-toggle__backdrop){height:100%;left:0;position:absolute;top:50%;transform:translateY(-50%);transition:background-color .3s ease;width:100%;z-index:1}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle--checked .cck-toggle__thumb){left:100%;top:50%;transform:translate(-100%,-50%)}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle--checked .cck-toggle__backdrop){background-color:var(--state-brand-active)}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle--unchecked .cck-toggle__thumb){left:0;top:50%;transform:translateY(-50%)}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle--unchecked .cck-toggle__backdrop){background-color:var(--base-fill-2)}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--sm .cck-toggle__slider-wrapper){width:40px}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--sm .cck-toggle__thumb){border-radius:var(--radi-4);height:20px;width:20px}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--sm .cck-toggle__backdrop){border-radius:var(--radi-6);height:12px}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--md .cck-toggle__slider-wrapper){width:44px}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--md .cck-toggle__thumb){border-radius:var(--radi-5);height:24px;width:24px}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--md .cck-toggle__slider-wrapper){border-radius:var(--radi-5)}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--md .cck-toggle__backdrop){border-radius:var(--radi-6);height:16px}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--lg .cck-toggle__slider-wrapper){width:56px}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--lg .cck-toggle__thumb){border-radius:var(--radi-6);height:32px;width:32px}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--lg .cck-toggle__slider-wrapper){border-radius:var(--radi-6)}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--lg .cck-toggle__backdrop){border-radius:var(--radi-6);height:20px}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--xl .cck-toggle__slider-wrapper){width:80px}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--xl .cck-toggle__thumb){border-radius:var(--radi-6);height:40px;width:40px}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--xl .cck-toggle__slider-wrapper){border-radius:var(--radi-6)}:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle__size--xl .cck-toggle__backdrop){border-radius:var(--radi-6);height:32px}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle--disabled),:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle--disabled){cursor:default;pointer-events:none}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle--disabled .cck-toggle__thumb),:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle--disabled .cck-toggle__thumb){background-color:var(--base-fill-3)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle--disabled .cck-toggle__backdrop),:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle--disabled .cck-toggle__backdrop){background-color:var(--base-fill-2)}:where([data-cck-theme-name=frames-x] .cck-toggle__knob.cck-toggle--disabled .cck-toggle__label),:where([data-cck-theme-name=frames-x] .cck-toggle__switch.cck-toggle--disabled .cck-toggle__label){color:var(--base-disabled)}:where([data-cck-theme-name=frames-x] .cck-trailing){align-items:center;background-color:var(--base-surface-2);color:var(--text-dark-tertiary);cursor:default;display:flex;font:var(--text-base-font-medium);gap:var(--spacing-4);justify-content:center;padding:0 var(--spacing-7);-webkit-user-select:none;-moz-user-select:none;user-select:none}:where([data-cck-theme-name=frames-x] .cck-trailing--clickable){cursor:pointer;transition:background-color .1s}:where([data-cck-theme-name=frames-x] .cck-trailing--clickable):active{background-color:var(--base-fill-1)}:where([data-cck-theme-name=frames-x] .cck-trailing--clickable):hover:not(:active){background-color:var(--base-fill-2)}:where([data-cck-theme-name=frames-x] .cck-avatar){align-items:center;border-radius:50%;display:flex;justify-content:center;overflow:hidden}:where([data-cck-theme-name=frames-x] .cck-avatar__fallback-image),:where([data-cck-theme-name=frames-x] .cck-avatar__image),:where([data-cck-theme-name=frames-x] .cck-avatar__placeholder-image){border-radius:inherit;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}:where([data-cck-theme-name=frames-x] .cck-avatar--with-label){background-color:var(--state-brand-active);color:var(--text-light-primary)}:where([data-cck-theme-name=frames-x] .cck-avatar--clickable){cursor:pointer}:where([data-cck-theme-name=frames-x] .cck-avatar__size--xs){height:28px;width:28px}:where([data-cck-theme-name=frames-x] .cck-avatar__size--xs.cck-avatar--with-label){font:var(--text-xs-font-semibold)}:where([data-cck-theme-name=frames-x] .cck-avatar__size--sm){height:32px;width:32px}:where([data-cck-theme-name=frames-x] .cck-avatar__size--sm.cck-avatar--with-label){font:var(--text-xs-font-semibold)}:where([data-cck-theme-name=frames-x] .cck-avatar__size--md){height:40px;width:40px}:where([data-cck-theme-name=frames-x] .cck-avatar__size--md.cck-avatar--with-label){font:var(--text-sm-font-semibold)}:where([data-cck-theme-name=frames-x] .cck-avatar__size--lg){height:44px;width:44px}:where([data-cck-theme-name=frames-x] .cck-avatar__size--lg.cck-avatar--with-label){font:var(--text-lg-font-semibold)}:where([data-cck-theme-name=frames-x] .cck-avatar__size--xl){height:56px;width:56px}:where([data-cck-theme-name=frames-x] .cck-avatar__size--xl.cck-avatar--with-label){font:var(--text-xl-font-semibold)}:where([data-cck-theme-name=frames-x] .cck-avatar__size--2xl){height:72px;width:72px}:where([data-cck-theme-name=frames-x] .cck-avatar__size--2xl.cck-avatar--with-label){font:var(--text-2xl-font-semibold)}:where([data-cck-theme-name=frames-x] .cck-avatar-group){display:flex}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-left){direction:rtl}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-left.cck-avatar-group__size--xs .cck-avatar):not(:last-of-type){margin-left:-10px}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-left.cck-avatar-group__size--sm .cck-avatar):not(:last-of-type){margin-left:-10px}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-left.cck-avatar-group__size--md .cck-avatar):not(:last-of-type){margin-left:-14px}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-left.cck-avatar-group__size--lg .cck-avatar):not(:last-of-type){margin-left:-16px}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-left.cck-avatar-group__size--xl .cck-avatar):not(:last-of-type){margin-left:-16px}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-left.cck-avatar-group__size--2xl .cck-avatar):not(:last-of-type){margin-left:-18px}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-right.cck-avatar-group__size--xs .cck-avatar):not(:first-of-type){margin-left:-10px}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-right.cck-avatar-group__size--sm .cck-avatar):not(:first-of-type){margin-left:-10px}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-right.cck-avatar-group__size--md .cck-avatar):not(:first-of-type){margin-left:-14px}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-right.cck-avatar-group__size--lg .cck-avatar):not(:first-of-type){margin-left:-16px}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-right.cck-avatar-group__size--xl .cck-avatar):not(:first-of-type){margin-left:-16px}:where([data-cck-theme-name=frames-x] .cck-avatar-group--direction-right.cck-avatar-group__size--2xl .cck-avatar):not(:first-of-type){margin-left:-18px}:where([data-cck-theme-name=frames-x] .cck-avatar-group .cck-avatar){border:2px solid var(--base-surface-1)}:where([data-cck-theme-name=frames-x] .cck-avatar-label){align-items:center;display:flex}:where([data-cck-theme-name=frames-x] .cck-avatar-label__title){color:var(--text-dark-primary)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__description){color:var(--text-dark-tertiary)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__label-wrapper){display:flex}:where([data-cck-theme-name=frames-x] .cck-avatar-label--avatar-right){flex-direction:row-reverse}:where([data-cck-theme-name=frames-x] .cck-avatar-label--avatar-right .cck-avatar-label__label-wrapper){text-align:right}:where([data-cck-theme-name=frames-x] .cck-avatar-label--avatar-left){flex-direction:row}:where([data-cck-theme-name=frames-x] .cck-avatar-label--avatar-top){flex-direction:column}:where([data-cck-theme-name=frames-x] .cck-avatar-label--avatar-bottom){flex-direction:column-reverse}:where([data-cck-theme-name=frames-x] .cck-avatar-label--avatar-bottom.cck-avatar-label--label-vertical .cck-avatar-label__label-wrapper),:where([data-cck-theme-name=frames-x] .cck-avatar-label--avatar-top.cck-avatar-label--label-vertical .cck-avatar-label__label-wrapper){align-items:center}:where([data-cck-theme-name=frames-x] .cck-avatar-label--avatar-left.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper),:where([data-cck-theme-name=frames-x] .cck-avatar-label--avatar-right.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){align-items:center}:where([data-cck-theme-name=frames-x] .cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){align-items:center;flex-direction:row}:where([data-cck-theme-name=frames-x] .cck-avatar-label--label-vertical .cck-avatar-label__label-wrapper){flex-direction:column;justify-content:center}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--xs){gap:var(--spacing-5)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--xs .cck-avatar-label__label-wrapper){font:var(--text-xs-font-medium);gap:2px}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--xs.cck-avatar-label--avatar-left.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper),:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--xs.cck-avatar-label--avatar-right.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){gap:var(--spacing-5)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--sm){gap:var(--spacing-5)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--sm .cck-avatar-label__label-wrapper){font:var(--text-xs-font-medium)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--sm.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){gap:var(--spacing-5)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--sm.cck-avatar-label--label-vertical .cck-avatar-label__label-wrapper){gap:4px}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--md){gap:var(--spacing-5)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--md .cck-avatar-label__label-wrapper){font:var(--text-sm-font-medium)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--md.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){gap:var(--spacing-5)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--md.cck-avatar-label--label-vertical .cck-avatar-label__label-wrapper){gap:2px}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--lg){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--lg .cck-avatar-label__label-wrapper){font:var(--text-base-font-medium)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--lg.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--lg.cck-avatar-label--label-vertical .cck-avatar-label__label-wrapper){gap:2px}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--xl){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--xl .cck-avatar-label__label-wrapper){font:var(--text-lg-font-medium)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--xl.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--xl.cck-avatar-label--label-vertical .cck-avatar-label__label-wrapper){gap:4px}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--2xl){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--2xl .cck-avatar-label__label-wrapper){font:var(--text-xl-font-medium)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--2xl.cck-avatar-label--label-horizontal .cck-avatar-label__label-wrapper){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-avatar-label__size--2xl.cck-avatar-label--label-vertical .cck-avatar-label__label-wrapper){gap:4px}:where([data-cck-theme-name=frames-x] .cck-accordion){display:flex;flex-direction:column}:where([data-cck-theme-name=frames-x] .cck-accordion__default.cck-accordion__size--sm){gap:var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-accordion__default.cck-accordion__size--md){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-accordion__underline.cck-accordion__size--sm){gap:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-accordion__underline.cck-accordion__size--md){gap:var(--spacing-10)}:where([data-cck-theme-name=frames-x] .cck-accordion-header){align-items:center;color:var(--text-dark-primary);display:flex}:where([data-cck-theme-name=frames-x] .cck-accordion-header .cck-svg-icon.cck-svg-icon--default-color){fill:var(--text-dark-primary)}:where([data-cck-theme-name=frames-x] .cck-accordion-header--icon-left){flex-direction:row-reverse;justify-content:flex-end}:where([data-cck-theme-name=frames-x] .cck-accordion-header--icon-left>.cck-accordion-header__icon-btn){margin-right:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-accordion-header--icon-right>.cck-accordion-header__icon-btn){margin-left:auto}:where([data-cck-theme-name=frames-x] .cck-accordion-header .cck-accordion-header__icon-btn){background-color:transparent;border:none;border-radius:var(--radi-6);color:var(--base-fill-4);cursor:pointer;outline:none}:where([data-cck-theme-name=frames-x] .cck-accordion-header .cck-accordion-header__icon-btn):hover{border:none}:where([data-cck-theme-name=frames-x] .cck-accordion-header--trigger-icon .cck-accordion-header__icon-btn):hover{background-color:var(--base-fill-1)}:where([data-cck-theme-name=frames-x] .cck-accordion-header--trigger-header){cursor:pointer}:where([data-cck-theme-name=frames-x] .cck-accordion-header--trigger-header>.cck-accordion-header__icon-btn):hover{background-color:transparent}:where([data-cck-theme-name=frames-x] .cck-accordion-panel--disabled>.cck-accordion-header){color:var(--base-disabled)}:where([data-cck-theme-name=frames-x] .cck-accordion-panel--disabled>.cck-accordion-header--trigger-header){cursor:not-allowed}:where([data-cck-theme-name=frames-x] .cck-accordion-panel--disabled>.cck-accordion-header>.cck-accordion-header__icon-btn){display:none}:where([data-cck-theme-name=frames-x] .cck-accordion__size--sm .cck-accordion-header){font:var(--text-base-font-medium)}:where([data-cck-theme-name=frames-x] .cck-accordion__size--sm .cck-accordion-header>.cck-accordion-header__icon-btn){height:36px;width:36px}:where([data-cck-theme-name=frames-x] .cck-accordion__size--md .cck-accordion-header){font:var(--text-lg-font-medium)}:where([data-cck-theme-name=frames-x] .cck-accordion__size--md .cck-accordion-header>.cck-accordion-header__icon-btn){height:44px;width:44px}:where([data-cck-theme-name=frames-x] .cck-accordion__default>.cck-accordion-panel--collapsed>.cck-accordion-header){background-color:var(--base-surface-2)}:where([data-cck-theme-name=frames-x] .cck-accordion__default.cck-accordion__size--sm>.cck-accordion-panel>.cck-accordion-header){height:56px;padding:0 var(--spacing-7) 0 var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-accordion__default.cck-accordion__size--md>.cck-accordion-panel>.cck-accordion-header){height:72px;padding:0 var(--spacing-8) 0 var(--spacing-10)}:where([data-cck-theme-name=frames-x] .cck-accordion__underline.cck-accordion__size--sm>.cck-accordion-panel>.cck-accordion-header){height:40px}:where([data-cck-theme-name=frames-x] .cck-accordion__underline.cck-accordion__size--md>.cck-accordion-panel>.cck-accordion-header){height:52px}:where([data-cck-theme-name=frames-x] .cck-accordion-panel){overflow:hidden}:where([data-cck-theme-name=frames-x] .cck-accordion-panel__content-wrapper){color:var(--text-dark-secondary);font:var(--text-base-font-regular)}:where([data-cck-theme-name=frames-x] .cck-accordion-panel--collapsed){padding-bottom:0}:where([data-cck-theme-name=frames-x] .cck-accordion-panel){transition:padding-bottom .3s}:where([data-cck-theme-name=frames-x] .cck-accordion--instant-animation>.cck-accordion-panel){transition:none}:where([data-cck-theme-name=frames-x] .cck-accordion__size--sm .cck-accordion-panel--expanded){padding-bottom:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-accordion__size.md .cck-accordion-panel--expanded){padding-bottom:var(--spacing-10)}:where([data-cck-theme-name=frames-x] .cck-accordion__default>.cck-accordion-panel){background-color:var(--base-surface-1);border:1px solid var(--base-border);border-radius:var(--radi-6)}:where([data-cck-theme-name=frames-x] .cck-accordion__default.cck-accordion__size--sm>.cck-accordion-panel>.cck-accordion-panel__content-wrapper){padding-left:var(--spacing-8);padding-right:var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-accordion__default.cck-accordion__size--md>.cck-accordion-panel>.cck-accordion-panel__content-wrapper){padding-left:var(--spacing-10);padding-right:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-accordion__underline){padding-bottom:var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-accordion__underline>.cck-accordion-panel){border-bottom:1px solid var(--base-border)}:where([data-cck-theme-name=frames-x] .cck-tabs){display:flex;flex-direction:column;gap:12px}:where([data-cck-theme-name=frames-x] .cck-tabs__headers-wrapper){display:flex;flex-wrap:wrap;gap:var(--spacing-2);justify-content:center}:where([data-cck-theme-name=frames-x] .cck-tabs--align-left .cck-tabs__headers-wrapper){align-items:flex-start;align-self:flex-start;justify-content:flex-start}:where([data-cck-theme-name=frames-x] .cck-tabs--align-center .cck-tabs__headers-wrapper){align-items:center;align-self:center;justify-content:center}:where([data-cck-theme-name=frames-x] .cck-tabs--align-right .cck-tabs__headers-wrapper){align-items:flex-end;align-self:flex-end;justify-content:flex-end}:where([data-cck-theme-name=frames-x] .cck-tabs--align-stretch .cck-tabs__headers-wrapper){align-items:stretch;align-self:stretch;justify-content:stretch}:where([data-cck-theme-name=frames-x] .cck-tabs__toggle .cck-tabs__headers-wrapper){background-color:var(--base-fill-1);border-radius:var(--radi-6);padding:var(--spacing-2)}:where([data-cck-theme-name=frames-x] .cck-tabs__size--sm .cck-tabs__headers-wrapper){min-height:36px}:where([data-cck-theme-name=frames-x] .cck-tabs__size--md .cck-tabs__headers-wrapper){min-height:44px}:where([data-cck-theme-name=frames-x] .cck-tabs__size--lg .cck-tabs__headers-wrapper){min-height:56px}:where([data-cck-theme-name=frames-x] .cck-tab){align-items:center;background:transparent;border:none;color:var(--text-dark-tertiary);cursor:pointer;display:flex;justify-content:center;outline:none;position:relative;white-space:nowrap}:where([data-cck-theme-name=frames-x] .cck-tab .cck-svg-icon.cck-svg-icon--default-color){color:currentColor;fill:currentColor}:where([data-cck-theme-name=frames-x] .cck-tab__label){position:relative;z-index:1}:where([data-cck-theme-name=frames-x] .cck-tab--unselected):not(.cck-tab--disabled):focus-visible{outline:2px solid var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-tab--selected){color:var(--text-dark-primary)}:where([data-cck-theme-name=frames-x] .cck-tab--disabled){color:var(--base-disabled);cursor:not-allowed}:where([data-cck-theme-name=frames-x] .cck-tab__indicator){height:100%;left:0;position:absolute;top:0;width:100%;z-index:0}:where([data-cck-theme-name=frames-x] .cck-tabs--align-stretch .cck-tab){flex:1}:where([data-cck-theme-name=frames-x] .cck-tabs__toggle .cck-tab){border-radius:var(--radi-5)}:where([data-cck-theme-name=frames-x] .cck-tabs__toggle .cck-tab--unselected):not(.cck-tab--disabled):hover{background-color:var(--base-fill-2)}:where([data-cck-theme-name=frames-x] .cck-tabs__toggle .cck-tab__indicator){background-color:var(--base-surface-1);border:1px solid var(--base-border);border-radius:var(--radi-5)}:where([data-cck-theme-name=frames-x] .cck-tabs__fill .cck-tab){border-radius:var(--radi-6)}:where([data-cck-theme-name=frames-x] .cck-tabs__fill .cck-tab__indicator){background-color:var(--base-surface-2);border:2px solid var(--state-brand-selected);border-radius:var(--radi-5)}:where([data-cck-theme-name=frames-x] .cck-tabs__line .cck-tab__indicator){border-bottom:var(--stroke-lg) solid var(--state-brand-selected)}:where([data-cck-theme-name=frames-x] .cck-tabs__size--sm .cck-tab){font:var(--text-sm-font-medium);height:36px;padding:0 var(--spacing-7)}:where([data-cck-theme-name=frames-x] .cck-tabs__size--sm .cck-tab.cck-tab--selected){font:var(--text-sm-font-semibold)}:where([data-cck-theme-name=frames-x] .cck-tabs__size--md .cck-tab){font:var(--text-base-font-medium);height:44px;padding:0 var(--spacing-8)}:where([data-cck-theme-name=frames-x] .cck-tabs__size--md .cck-tab.cck-tab--selected){font:var(--text-base-font-semibold)}:where([data-cck-theme-name=frames-x] .cck-tabs__size--lg .cck-tab){font:var(--text-lg-font-medium);height:56px;padding:0 var(--spacing-9)}:where([data-cck-theme-name=frames-x] .cck-tabs__size--lg .cck-tab.cck-tab--selected){font:var(--text-lg-font-semibold)}
\ No newline at end of file
diff --git a/packages/internal/storybook-addon-theme/src/assets/styles/manager-styles.css b/packages/internal/storybook-addon-theme/src/assets/styles/manager-styles.css
index 94a8a6ee..4232cdaf 100644
--- a/packages/internal/storybook-addon-theme/src/assets/styles/manager-styles.css
+++ b/packages/internal/storybook-addon-theme/src/assets/styles/manager-styles.css
@@ -862,7 +862,7 @@ body{
   flex-direction:column;
   gap:12px;
 }
-.doc-cck-tabs__labels-wrapper{
+.doc-cck-tabs__headers-wrapper{
   display:flex;
   flex-wrap:wrap;
   align-items:center;
@@ -872,13 +872,13 @@ body{
   align-self:flex-start;
   border-radius:var(--cck-doc-radius-sm);
 }
-.doc-cck-tabs__size--fit .doc-cck-tabs__labels-wrapper{
+.doc-cck-tabs__size--fit .doc-cck-tabs__headers-wrapper{
   width:100%;
 }
-.doc-cck-tabs__color--default .doc-cck-tabs__labels-wrapper{
+.doc-cck-tabs__color--default .doc-cck-tabs__headers-wrapper{
   background-color:var(--cck-doc-color-bg-3);
 }
-.doc-cck-tabs__color--h-contrast .doc-cck-tabs__labels-wrapper{
+.doc-cck-tabs__color--h-contrast .doc-cck-tabs__headers-wrapper{
   background-color:var(--cck-doc-color-bg-4);
 }
 
@@ -926,7 +926,7 @@ body{
   background-color:var(--cck-doc-color-bg-2);
 }
 
-.doc-cck-tab-label{
+.doc-cck-tab__label{
   position:relative;
   z-index:1;
 }
\ No newline at end of file
diff --git a/packages/internal/storybook-addon-theme/src/assets/styles/manager-styles.min.css b/packages/internal/storybook-addon-theme/src/assets/styles/manager-styles.min.css
index 4e1eb2a5..1aa2176e 100644
--- a/packages/internal/storybook-addon-theme/src/assets/styles/manager-styles.min.css
+++ b/packages/internal/storybook-addon-theme/src/assets/styles/manager-styles.min.css
@@ -4,4 +4,4 @@
  * Generated by cocokits 'scss-builder'
  */
  
-:where(.cck-theme-storybook-addon__local-style--default),:where([data-cck-theme*=storybook-addon__local-style--default]){--cck-doc-display-2xl-regular:400 72px/90px Inter;--cck-doc-display-2xl-light:300 72px/90px Inter;--cck-doc-display-2xl-medium:500 72px/90px Inter;--cck-doc-display-2xl-semibold:600 72px/90px Inter;--cck-doc-display-2xl-bold:700 72px/90px Inter;--cck-doc-display-xl-light:300 60px/72px Inter;--cck-doc-display-xl-regular:400 60px/72px Inter;--cck-doc-display-xl-medium:500 60px/72px Inter;--cck-doc-display-xl-semibold:600 60px/72px Inter;--cck-doc-display-xl-bold:700 60px/72px Inter;--cck-doc-display-lg-light:300 48px/64px Inter;--cck-doc-display-lg-regular:400 48px/64px Inter;--cck-doc-display-lg-medium:500 48px/64px Inter;--cck-doc-display-lg-semibold:600 48px/64px Inter;--cck-doc-display-lg-bold:700 48px/64px Inter;--cck-doc-display-md-light:300 36px/60px Inter;--cck-doc-display-md-regular:400 36px/60px Inter;--cck-doc-display-md-medium:500 36px/60px Inter;--cck-doc-display-md-semibold:600 36px/60px Inter;--cck-doc-display-md-bold:700 36px/60px Inter;--cck-doc-display-sm-light:300 30px/44px Inter;--cck-doc-display-sm-regular:400 30px/44px Inter;--cck-doc-display-sm-medium:500 30px/44px Inter;--cck-doc-display-sm-semibold:600 30px/44px Inter;--cck-doc-display-sm-bold:700 30px/44px Inter;--cck-doc-display-xs-light:300 24px/38px Inter;--cck-doc-display-xs-regular:400 24px/38px Inter;--cck-doc-display-xs-medium:500 24px/38px Inter;--cck-doc-display-xs-semibold:600 24px/38px Inter;--cck-doc-display-xs-bold:700 24px/38px Inter;--cck-doc-text-xl-light:300 20px/32px Inter;--cck-doc-text-xl-regular:400 20px/32px Inter;--cck-doc-text-xl-medium:500 20px/32px Inter;--cck-doc-text-xl-semibold:600 20px/32px Inter;--cck-doc-text-xl-bold:700 20px/32px Inter;--cck-doc-text-lg-light:300 18px/30px Inter;--cck-doc-text-lg-regular:400 18px/30px Inter;--cck-doc-text-lg-medium:500 18px/30px Inter;--cck-doc-text-lg-semibold:600 18px/30px Inter;--cck-doc-text-lg-bold:700 18px/30px Inter;--cck-doc-text-md-light:300 16px/28px Inter;--cck-doc-text-md-regular:400 16px/28px Inter;--cck-doc-text-md-medium:500 16px/28px Inter;--cck-doc-text-md-semibold:600 16px/28px Inter;--cck-doc-text-md-bold:700 16px/28px Inter;--cck-doc-text-sm-light:300 14px/24px Inter;--cck-doc-text-sm-regular:400 14px/24px Inter;--cck-doc-text-sm-medium:500 14px/24px Inter;--cck-doc-text-sm-semibold:600 14px/24px Inter;--cck-doc-text-sm-bold:700 14px/24px Inter;--cck-doc-text-xs-light:300 12px/20px Inter;--cck-doc-text-xs-regular:400 12px/20px Inter;--cck-doc-text-xs-medium:500 12px/20px Inter;--cck-doc-text-xs-semibold:600 12px/20px Inter;--cck-doc-text-xs-bold:700 12px/20px Inter}:where(.cck-theme-storybook-addon__color--dark),:where([data-cck-theme*=storybook-addon__color--dark]){--cck-doc-color-brand-default:var(--cck-doc-ocean-green-500);--cck-doc-color-bg-0:var(--cck-doc-black-50);--cck-doc-color-bg-1:var(--cck-doc-black-100);--cck-doc-color-bg-2:var(--cck-doc-black-200);--cck-doc-color-bg-3:var(--cck-doc-black-300);--cck-doc-color-bg-4:var(--cck-doc-black-400);--cck-doc-color-bg-5:var(--cck-doc-black-500);--cck-doc-color-bg-alpha-1:var(--cck-doc-black-alpha-1);--cck-doc-color-bg-alpha-2:var(--cck-doc-black-alpha-3);--cck-doc-color-bg-alpha-3:var(--cck-doc-black-alpha-4);--cck-doc-color-bg-alpha-4:var(--cck-doc-black-alpha-5);--cck-doc-color-bg-alpha-5:var(--cck-doc-black-alpha-6);--cck-doc-color-bg-hover-1:var(--cck-doc-color-bg-3);--cck-doc-color-bg-hover-2:var(--cck-doc-color-bg-2);--cck-doc-color-bg-hover-3:var(--cck-doc-ocean-green-900);--cck-doc-color-bg-selected-1:var(--cck-doc-ocean-green-950);--cck-doc-color-bg-selected-2:var(--cck-doc-ocean-green-900);--cck-doc-color-border-1:var(--cck-doc-white-alpha-2);--cck-doc-color-border-2:var(--cck-doc-white-alpha-4);--cck-doc-color-border-3:var(--cck-doc-white-alpha-5);--cck-doc-color-font-1:var(--cck-doc-white-50);--cck-doc-color-font-2:#ccc;--cck-doc-color-font-3:#999;--cck-doc-color-font-4:#666;--cck-doc-color-font-5:#333;--cck-doc-color-font-alpha-1:var(--cck-doc-white-50);--cck-doc-color-font-alpha-2:var(--cck-doc-white-alpha-8);--cck-doc-color-font-alpha-3:var(--cck-doc-white-alpha-7);--cck-doc-color-font-alpha-4:var(--cck-doc-white-alpha-6);--cck-doc-color-font-alpha-5:var(--cck-doc-white-alpha-5);--cck-doc-color-main-effect-primary-start:#1bbf82cc;--cck-doc-color-main-effect-primary-end:#1bbf8299;--cck-doc-color-main-effect-surface-start:#0f111600;--cck-doc-color-main-effect-surface-end:#0f1116;--cck-doc-color-main-effect-box-start:#ffffff14;--cck-doc-color-main-effect-box-end:#ffffff00}:where(.cck-theme-storybook-addon__color--light),:where([data-cck-theme*=storybook-addon__color--light]){--cck-doc-color-brand-default:var(--cck-doc-see-green-500);--cck-doc-color-bg-0:var(--cck-doc-white-50);--cck-doc-color-bg-1:var(--cck-doc-white-50);--cck-doc-color-bg-2:var(--cck-doc-white-50);--cck-doc-color-bg-3:var(--cck-doc-white-100);--cck-doc-color-bg-4:var(--cck-doc-white-300);--cck-doc-color-bg-5:var(--cck-doc-white-400);--cck-doc-color-bg-alpha-1:var(--cck-doc-white-alpha-1);--cck-doc-color-bg-alpha-2:var(--cck-doc-white-alpha-3);--cck-doc-color-bg-alpha-3:var(--cck-doc-white-alpha-4);--cck-doc-color-bg-alpha-4:var(--cck-doc-white-alpha-5);--cck-doc-color-bg-alpha-5:var(--cck-doc-white-alpha-6);--cck-doc-color-bg-hover-1:var(--cck-doc-color-bg-3);--cck-doc-color-bg-hover-2:var(--cck-doc-color-bg-3);--cck-doc-color-bg-hover-3:var(--cck-doc-ocean-green-200);--cck-doc-color-bg-selected-1:var(--cck-doc-ocean-green-100);--cck-doc-color-bg-selected-2:var(--cck-doc-ocean-green-200);--cck-doc-color-border-1:var(--cck-doc-black-alpha-2);--cck-doc-color-border-2:var(--cck-doc-black-alpha-4);--cck-doc-color-border-3:var(--cck-doc-black-alpha-5);--cck-doc-color-font-1:var(--cck-doc-black-50);--cck-doc-color-font-2:#333d4a;--cck-doc-color-font-3:#666d77;--cck-doc-color-font-4:#999ea5;--cck-doc-color-font-5:#ccced2;--cck-doc-color-font-alpha-1:var(--cck-doc-black-50);--cck-doc-color-font-alpha-2:var(--cck-doc-black-alpha-8);--cck-doc-color-font-alpha-3:var(--cck-doc-black-alpha-7);--cck-doc-color-font-alpha-4:var(--cck-doc-black-alpha-6);--cck-doc-color-font-alpha-5:var(--cck-doc-black-alpha-5);--cck-doc-color-main-effect-primary-start:#008d5ecc;--cck-doc-color-main-effect-primary-end:#008d5e99;--cck-doc-color-main-effect-surface-start:#ffffff00;--cck-doc-color-main-effect-surface-end:#fff;--cck-doc-color-main-effect-box-start:#0f111614;--cck-doc-color-main-effect-box-end:#0f111600}:where(.cck-theme-storybook-addon__size--default),:where([data-cck-theme*=storybook-addon__size--default]){--cck-doc-radius-xs:2px;--cck-doc-radius-sm:4px;--cck-doc-radius-md:8px;--cck-doc-radius-lg:12px;--cck-doc-radius-xl:16px}:where(.cck-theme-storybook-addon__color-palette--default),:where([data-cck-theme*=storybook-addon__color-palette--default]){--cck-doc-ocean-green-50:#f0fdf7;--cck-doc-ocean-green-100:#d4fcec;--cck-doc-ocean-green-200:#aaf7da;--cck-doc-ocean-green-300:#72edc0;--cck-doc-ocean-green-400:#3cd9a0;--cck-doc-ocean-green-500:#1bbf82;--cck-doc-ocean-green-600:#129c69;--cck-doc-ocean-green-700:#127b56;--cck-doc-ocean-green-800:#146247;--cck-doc-ocean-green-900:#14513c;--cck-doc-ocean-green-950:#012c1e;--cck-doc-see-green-50:#effffa;--cck-doc-see-green-100:#a1ffe0;--cck-doc-see-green-200:#52ffc5;--cck-doc-see-green-300:#00ef9f;--cck-doc-see-green-400:#00b478;--cck-doc-see-green-500:#008d5e;--cck-doc-see-green-600:#007951;--cck-doc-see-green-700:#064;--cck-doc-see-green-800:#005237;--cck-doc-see-green-900:#003f2a;--cck-doc-see-green-950:#002b1d;--cck-doc-black-50:#00060f;--cck-doc-black-100:#0f1116;--cck-doc-black-200:#15171e;--cck-doc-black-300:#191b23;--cck-doc-black-400:#222835;--cck-doc-black-500:#494f60;--cck-doc-white-50:#fff;--cck-doc-white-100:#f5f5f5;--cck-doc-white-200:#ececef;--cck-doc-white-300:#e3e3e8;--cck-doc-white-400:#d1d5e1;--cck-doc-white-500:#c1c7d7;--cck-doc-white-alpha-0:#ffffff05;--cck-doc-white-alpha-1:#ffffff0a;--cck-doc-white-alpha-2:#ffffff0f;--cck-doc-white-alpha-3:#ffffff14;--cck-doc-white-alpha-4:#ffffff1a;--cck-doc-white-alpha-5:#ffffff33;--cck-doc-white-alpha-6:#ffffff66;--cck-doc-white-alpha-7:#ffffff99;--cck-doc-white-alpha-8:#ffffffcc;--cck-doc-white-alpha-9:#ffffffe5;--cck-doc-white-alpha-10:#fff;--cck-doc-black-alpha-0:#000c1d05;--cck-doc-black-alpha-1:#000c1d0a;--cck-doc-black-alpha-2:#000c1d0f;--cck-doc-black-alpha-3:#000c1d14;--cck-doc-black-alpha-4:#000c1d1a;--cck-doc-black-alpha-5:#000c1d33;--cck-doc-black-alpha-6:#000c1d66;--cck-doc-black-alpha-7:#000c1d99;--cck-doc-black-alpha-8:#000c1dcc;--cck-doc-black-alpha-9:#000c1de5;--cck-doc-black-alpha-10:#000c1d}.cck-theme-storybook-addon--remove-toolbar main .sb-bar{display:none}#root>div:first-child>div:nth-child(2){border:1px solid var(--cck-doc-color-border-2)}#root>div:first-child>div:nth-child(2)>div:first-child,#root>div:first-child>div:nth-child(3)>.sb-bar{display:none}.sidebar-container>div:first-child>div:first-of-type>div:first-child>div:first-child{padding:12px 24px}.sidebar-header>div:first-of-type>a:first-child>img{max-width:180px!important;width:180px}.sidebar-header>div:first-of-type{margin-right:0}.sidebar-header>div:nth-child(3){display:none}.search-field{background-color:var(--cck-doc-color-bg-2);border:1px solid var(--cck-doc-color-border-1);gap:8px;height:36px!important;padding:4px!important}.search-field+div{display:none}.search-field>div:first-child{color:var(--cck-doc-color-font-2);flex:none;margin-left:4px}.search-field>input:nth-child(2)::-moz-placeholder{color:var(--cck-doc-color-font-4)}.search-field>input:nth-child(2)::placeholder{color:var(--cck-doc-color-font-4)}.search-field>code:nth-child(3){display:none}.sidebar-subheading{margin-top:0!important}.sidebar-item+.sidebar-subheading{margin-top:24px!important}.sidebar-subheading>button:first-of-type{height:auto;padding:0;width:100%}.sidebar-subheading>button:first-of-type:hover{background-color:unset}.sidebar-subheading>button:first-of-type>div:first-child{display:none}.sidebar-subheading>button:nth-of-type(2){display:none!important}.sidebar-item:hover,.sidebar-item[data-selected=true]{background-color:unset!important}.sidebar-item>button:first-of-type{padding:0}.sidebar-item>button:first-of-type>div:first-of-type{display:none}.sidebar-item>a:first-of-type{padding:0}.sidebar-item>a:first-of-type>div:first-of-type,.sidebar-item>a:nth-of-type(2){display:none}.sbdocs.sbdocs-wrapper{background:transparent;padding:0}.sbdocs.sbdocs-content{max-width:unset}h1{font:var(--cck-doc-display-sm-semibold);margin:0 0 28px}h1,h2{color:var(--cck-doc-color-font-1)}h2{font:var(--cck-doc-text-xl-medium);margin:36px 0 24px}h3{font:var(--cck-doc-text-lg-medium)}h3,h4{color:var(--cck-doc-color-font-1);margin:12px 0}h4{font:var(--cck-doc-text-md-medium)}h5{font:var(--cck-doc-text-sm-medium)}h5,h6{color:var(--cck-doc-color-font-1);margin:12px 0}h6{font:var(--cck-doc-text-xs-medium)}p{margin:0 0 16px}ol,p,ul{color:var(--cck-doc-color-font-2);font:var(--cck-doc-text-sm-regular)}ol,ul{margin-top:12px}li{margin:0 0 16px}pre{margin:28px 0}strong{font-weight:600}hr{background-color:var(--cck-doc-color-border-1);border:none;height:1px;margin:48px 0}.cck-theme-storybook-addon code,code{background-color:var(--cck-doc-color-bg-3);border:1px solid var(--cck-doc-color-border-1);border-radius:4px;color:inherit;display:inline-block;font:inherit;margin:0 2px;padding:0 6px}.cck-theme-storybook-addon a,a{color:var(--cck-doc-color-brand-default);font:inherit}.doc-cck-button{align-items:center;border:none;border-radius:var(--cck-doc-radius-sm);box-sizing:border-box;cursor:pointer;display:flex;font:var(--cck-doc-text-sm-medium);justify-content:center;margin:0;min-width:80px;outline:transparent}.doc-cck-button__backdrop{display:none}.doc-cck-button__size--sm{gap:8px;height:32px;padding:0 12px 0 8px}.doc-cck-button__size--sm:has(.doc-cck-svg-icon:first-child){padding:0 12px 0 4px}.doc-cck-button__size--md{gap:8px;height:40px;padding:0 12px}.doc-cck-button__size--md:has(.doc-cck-svg-icon:first-child){padding:0 16px 0 8px}.doc-cck-button__basic{background-color:transparent;color:var(--cck-doc-color-font-1)}.doc-cck-button__basic .doc-cck-svg-icon{fill:var(--cck-doc-color-font-1)}.doc-cck-button__basic:hover{background-color:var(--cck-doc-color-bg-hover-2)}.doc-cck-button__light{background-color:var(--cck-doc-color-bg-selected-1);color:var(--cck-doc-color-font-1)}.doc-cck-button__light:hover{background-color:var(--cck-doc-color-bg-hover-3)}.doc-cck-button__light .doc-cck-svg-icon{fill:var(--cck-doc-color-font-1)}.doc-cck-button__outline{background-color:var(--cck-doc-color-bg-1);border:1px solid var(--cck-doc-ocean-green-600);color:var(--cck-doc-ocean-green-600)}.doc-cck-button__outline:hover{background-color:var(--cck-doc-color-bg-hover-2)}.doc-cck-button__outline .doc-cck-svg-icon{fill:var(--cck-doc-ocean-green-600)}body,html{margin:0;padding:0}*{box-sizing:border-box}.doc-cck-form-field{align-items:flex-start;display:flex;flex-direction:column;gap:4px}.doc-cck-form-field .doc-cck-select{flex:1;height:100%;width:100%}.doc-cck-form-field .doc-cck-input{flex:1;width:100%}.doc-cck-form-field--disabled{opacity:.5}.doc-cck-form-field__wrapper{align-items:stretch;display:flex;flex-direction:row;height:40px;width:100%}.doc-cck-form-field__feedback-wrapper{display:flex;flex-direction:column;overflow:hidden}.doc-cck-form-field__feedback-wrapper:empty{display:none}.doc-cck-form-field__input-wrapper{align-items:center;background-color:var(--cck-doc-color-bg-1);border:1px solid var(--cck-doc-color-border-2);border-radius:var(--cck-doc-radius-sm);display:flex;flex:1;flex-direction:row;min-width:0;padding:8px 12px}.doc-cck-form-field__input-wrapper:hover{background-color:var(--cck-doc-color-bg-hover-2)}.doc-cck-form-field--focused .doc-cck-form-field__input-wrapper{background-color:var(--cck-doc-color-bg-1);border:1px solid var(--cck-doc-color-brand-default);box-shadow:inset 0 0 0 1px var(--cck-doc-color-brand-default)}.doc-cck-svg-icon{align-items:center;display:flex;flex-shrink:0;height:24px;justify-content:center;width:24px;fill:var(--cck-doc-color-font-4)}.doc-cck-svg-icon__svg{height:100%;width:100%}.doc-cck-icon-button{align-items:center;background-color:transparent;border:none;border-radius:50%;box-sizing:border-box;color:var(--cck-doc-color-font-3);cursor:pointer;display:flex;font:var(--cck-doc-text-sm-medium);justify-content:center;margin:0;outline:transparent;transition:background-color .15s}.doc-cck-icon-button .doc-cck-svg-icon{fill:currentcolor;transition:color .15s}.doc-cck-icon-button:hover{background-color:var(--cck-doc-color-bg-hover-1);color:var(--cck-doc-color-font-2)}.doc-cck-icon-button__backdrop{display:none}.doc-cck-icon-button__size--sm{height:32px;width:32px}.doc-cck-icon-button__size--md{height:40px;width:40px}.doc-cck-icon-button__outline{border:1px solid var(--cck-doc-color-border-2)}.doc-cck-input{background-color:transparent;border:none;color:var(--cck-doc-color-font-1);font:var(--cck-doc-text-sm-regular);outline:none;text-overflow:ellipsis}.doc-cck-input::-moz-placeholder{color:var(--cck-doc-color-font-4)}.doc-cck-input::placeholder{color:var(--cck-doc-color-font-4)}.doc-cck-option{align-items:center;border-radius:6px;color:var(--cck-doc-color-font-1);cursor:pointer;display:flex;font:var(--cck-doc-text-sm-regular);gap:8px;height:40px;padding:0 12px}.doc-cck-option:hover{background-color:var(--cck-doc-color-bg-hover-1)}.doc-cck-option .doc-cck-checkbox__input-wrapper{height:16px;width:16px}.doc-cck-option .doc-cck-option --single.doc-cck-option --selected{font:var(--cck-doc-text-sm-medium)}.doc-cck-option__content-wrapper{align-items:center;display:flex;flex:1}.doc-cck-option__selected-checkmark .doc-cck-svg-icon{height:20px;width:20px}.doc-cck-radio-button__wrapper{align-items:center;cursor:pointer;display:inline-flex;vertical-align:middle}.doc-cck-radio-button__input-wrapper{align-items:center;box-sizing:content-box;cursor:pointer;display:inline-block;flex:0 0 auto;height:16px;justify-content:center;position:relative;width:16px;will-change:opacity,transform,border-color,color}.doc-cck-radio-button__input{cursor:inherit;height:100%;left:0;margin:0;opacity:0;padding:0;position:absolute;right:0;top:0;width:100%;z-index:1}.doc-cck-radio-button__backdrop{display:none}.doc-cck-radio-button__background{box-sizing:border-box;height:100%;position:relative;width:100%}.doc-cck-radio-button__background--outer-circle{border-color:var(--cck-doc-color-font-1);border-radius:50%;border-style:solid;border-width:1px;box-sizing:border-box;height:100%;left:0;position:absolute;top:0;transition:border-color 90ms cubic-bezier(0,0,.2,1);width:100%}.doc-cck-radio-button__background--inner-circle{border-radius:50%;box-sizing:border-box;height:100%;left:0;position:absolute;top:0;transform:scale(0);transition:transform 90ms cubic-bezier(.4,0,.6,1),background-color 90ms cubic-bezier(.4,0,.6,1);width:100%}.doc-cck-radio-button--checked .doc-cck-radio-button__background--outer-circle{border-color:var(--cck-doc-color-brand-default);border-width:2px}.doc-cck-radio-button--checked .doc-cck-radio-button__background--inner-circle{background-color:var(--cck-doc-color-brand-default);transform:scale(.5);transition:transform 90ms cubic-bezier(0,0,.2,1),border-color 90ms cubic-bezier(0,0,.2,1)}.doc-cck-radio-button--checked .doc-cck-radio-button__label{color:var(--cck-doc-color-brand-default)}.doc-cck-radio-button__label{color:var(--cck-doc-color-font-1);cursor:pointer;font:var(--cck-doc-text-md-regular);margin-left:0;margin-right:auto;order:0;padding-left:8px;padding-right:0;white-space:nowrap}.doc-cck-radio-group{align-items:flex-start;display:flex}.doc-cck-radio-group__row{flex-direction:row;gap:12px}.doc-cck-radio-group__column{flex-direction:column}.doc-cck-select{align-items:center;border-radius:6px;color:var(--cck-doc-color-font-1);cursor:pointer;display:flex;font:var(--cck-doc-text-sm-regular)}.doc-cck-select__placeholder{color:var(--cck-doc-color-font-4)}.doc-cck-select__trigger-wrapper{color:currentcolor;flex:1;overflow:hidden;padding-right:8px;text-align:start}.doc-cck-select__trigger-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.doc-cck-select__overlay .doc-cck-overlay__backdrop{background-color:transparent}.doc-cck-select__dropdown-icon-wrapper .doc-cck-svg-icon{height:24px;width:24px}.doc-cck-select__options-wrapper{background-color:var(--cck-doc-color-bg-1);border:1px solid var(--cck-doc-color-border-2);border-radius:var(--cck-doc-radius-sm);height:inherit;margin-top:6px;max-height:inherit;overflow:auto;padding:4px}.doc-cck-toggle{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.doc-cck-toggle__label{align-items:center;color:var(--cck-doc-color-font-1);cursor:pointer;display:flex;font:var(--cck-doc-text-md-regular);gap:8px;white-space:nowrap}.doc-cck-toggle--label-before .doc-cck-toggle__label{flex-direction:row-reverse}.doc-cck-toggle__input{cursor:pointer;height:100%;margin:0;opacity:0;padding:0;position:relative;width:100%;z-index:3}.doc-cck-toggle__slider-wrapper{height:20px;position:relative;width:32px}.doc-cck-toggle__thumb{background-color:var(--cck-doc-color-bg-1);border-radius:50%;height:16px;position:absolute;transition:all .3s ease;width:16px;z-index:2}.doc-cck-toggle__backdrop{border-radius:500px;height:100%;left:0;position:absolute;top:0;transition:background-color .3s ease;width:100%;z-index:1}.doc-cck-toggle--checked .doc-cck-toggle__thumb{left:100%;top:50%;transform:translate(calc(-100% - 2px),-50%)}.doc-cck-toggle--checked .doc-cck-toggle__backdrop{background-color:var(--cck-doc-color-brand-default)}.doc-cck-toggle--unchecked .doc-cck-toggle__thumb{left:0;top:50%;transform:translate(2px,-50%)}.doc-cck-toggle--unchecked .doc-cck-toggle__backdrop{background-color:var(--cck-doc-color-bg-4)}.doc-cck-overlay__backdrop{background-color:rgba(0,0,0,.5)}.doc-cck-tabs{display:flex;flex-direction:column;gap:12px}.doc-cck-tabs__labels-wrapper{align-items:center;align-self:flex-start;border-radius:var(--cck-doc-radius-sm);display:flex;flex-wrap:wrap;gap:8px;min-height:40px;padding:4px}.doc-cck-tabs__size--fit .doc-cck-tabs__labels-wrapper{width:100%}.doc-cck-tabs__color--default .doc-cck-tabs__labels-wrapper{background-color:var(--cck-doc-color-bg-3)}.doc-cck-tabs__color--h-contrast .doc-cck-tabs__labels-wrapper{background-color:var(--cck-doc-color-bg-4)}.doc-cck-tab{align-items:center;background:transparent;border:none;border-radius:var(--cck-doc-radius-sm);cursor:pointer;display:flex;font:var(--cck-doc-text-sm-medium);height:32px;justify-content:center;outline:none;padding:4px 12px;position:relative}.doc-cck-tabs__size--fit .doc-cck-tab{flex:1;padding:4px 0}.doc-cck-tab__indicator{border-radius:var(--cck-doc-radius-sm);height:100%;left:0;position:absolute;top:0;width:100%}.doc-cck-tab--selected{color:var(--cck-doc-color-font-1)}.doc-cck-tab--unselected{color:var(--cck-doc-color-font-2)}.doc-cck-tab .doc-cck-svg-icon{fill:currentcolor}.doc-cck-tabs__color--default .doc-cck-tab__indicator{background-color:var(--cck-doc-color-bg-1)}.doc-cck-tabs__color--h-contrast .doc-cck-tab__indicator{background-color:var(--cck-doc-color-bg-2)}.doc-cck-tab-label{position:relative;z-index:1}
\ No newline at end of file
+:where(.cck-theme-storybook-addon__local-style--default),:where([data-cck-theme*=storybook-addon__local-style--default]){--cck-doc-display-2xl-regular:400 72px/90px Inter;--cck-doc-display-2xl-light:300 72px/90px Inter;--cck-doc-display-2xl-medium:500 72px/90px Inter;--cck-doc-display-2xl-semibold:600 72px/90px Inter;--cck-doc-display-2xl-bold:700 72px/90px Inter;--cck-doc-display-xl-light:300 60px/72px Inter;--cck-doc-display-xl-regular:400 60px/72px Inter;--cck-doc-display-xl-medium:500 60px/72px Inter;--cck-doc-display-xl-semibold:600 60px/72px Inter;--cck-doc-display-xl-bold:700 60px/72px Inter;--cck-doc-display-lg-light:300 48px/64px Inter;--cck-doc-display-lg-regular:400 48px/64px Inter;--cck-doc-display-lg-medium:500 48px/64px Inter;--cck-doc-display-lg-semibold:600 48px/64px Inter;--cck-doc-display-lg-bold:700 48px/64px Inter;--cck-doc-display-md-light:300 36px/60px Inter;--cck-doc-display-md-regular:400 36px/60px Inter;--cck-doc-display-md-medium:500 36px/60px Inter;--cck-doc-display-md-semibold:600 36px/60px Inter;--cck-doc-display-md-bold:700 36px/60px Inter;--cck-doc-display-sm-light:300 30px/44px Inter;--cck-doc-display-sm-regular:400 30px/44px Inter;--cck-doc-display-sm-medium:500 30px/44px Inter;--cck-doc-display-sm-semibold:600 30px/44px Inter;--cck-doc-display-sm-bold:700 30px/44px Inter;--cck-doc-display-xs-light:300 24px/38px Inter;--cck-doc-display-xs-regular:400 24px/38px Inter;--cck-doc-display-xs-medium:500 24px/38px Inter;--cck-doc-display-xs-semibold:600 24px/38px Inter;--cck-doc-display-xs-bold:700 24px/38px Inter;--cck-doc-text-xl-light:300 20px/32px Inter;--cck-doc-text-xl-regular:400 20px/32px Inter;--cck-doc-text-xl-medium:500 20px/32px Inter;--cck-doc-text-xl-semibold:600 20px/32px Inter;--cck-doc-text-xl-bold:700 20px/32px Inter;--cck-doc-text-lg-light:300 18px/30px Inter;--cck-doc-text-lg-regular:400 18px/30px Inter;--cck-doc-text-lg-medium:500 18px/30px Inter;--cck-doc-text-lg-semibold:600 18px/30px Inter;--cck-doc-text-lg-bold:700 18px/30px Inter;--cck-doc-text-md-light:300 16px/28px Inter;--cck-doc-text-md-regular:400 16px/28px Inter;--cck-doc-text-md-medium:500 16px/28px Inter;--cck-doc-text-md-semibold:600 16px/28px Inter;--cck-doc-text-md-bold:700 16px/28px Inter;--cck-doc-text-sm-light:300 14px/24px Inter;--cck-doc-text-sm-regular:400 14px/24px Inter;--cck-doc-text-sm-medium:500 14px/24px Inter;--cck-doc-text-sm-semibold:600 14px/24px Inter;--cck-doc-text-sm-bold:700 14px/24px Inter;--cck-doc-text-xs-light:300 12px/20px Inter;--cck-doc-text-xs-regular:400 12px/20px Inter;--cck-doc-text-xs-medium:500 12px/20px Inter;--cck-doc-text-xs-semibold:600 12px/20px Inter;--cck-doc-text-xs-bold:700 12px/20px Inter}:where(.cck-theme-storybook-addon__color--dark),:where([data-cck-theme*=storybook-addon__color--dark]){--cck-doc-color-brand-default:var(--cck-doc-ocean-green-500);--cck-doc-color-bg-0:var(--cck-doc-black-50);--cck-doc-color-bg-1:var(--cck-doc-black-100);--cck-doc-color-bg-2:var(--cck-doc-black-200);--cck-doc-color-bg-3:var(--cck-doc-black-300);--cck-doc-color-bg-4:var(--cck-doc-black-400);--cck-doc-color-bg-5:var(--cck-doc-black-500);--cck-doc-color-bg-alpha-1:var(--cck-doc-black-alpha-1);--cck-doc-color-bg-alpha-2:var(--cck-doc-black-alpha-3);--cck-doc-color-bg-alpha-3:var(--cck-doc-black-alpha-4);--cck-doc-color-bg-alpha-4:var(--cck-doc-black-alpha-5);--cck-doc-color-bg-alpha-5:var(--cck-doc-black-alpha-6);--cck-doc-color-bg-hover-1:var(--cck-doc-color-bg-3);--cck-doc-color-bg-hover-2:var(--cck-doc-color-bg-2);--cck-doc-color-bg-hover-3:var(--cck-doc-ocean-green-900);--cck-doc-color-bg-selected-1:var(--cck-doc-ocean-green-950);--cck-doc-color-bg-selected-2:var(--cck-doc-ocean-green-900);--cck-doc-color-border-1:var(--cck-doc-white-alpha-2);--cck-doc-color-border-2:var(--cck-doc-white-alpha-4);--cck-doc-color-border-3:var(--cck-doc-white-alpha-5);--cck-doc-color-font-1:var(--cck-doc-white-50);--cck-doc-color-font-2:#ccc;--cck-doc-color-font-3:#999;--cck-doc-color-font-4:#666;--cck-doc-color-font-5:#333;--cck-doc-color-font-alpha-1:var(--cck-doc-white-50);--cck-doc-color-font-alpha-2:var(--cck-doc-white-alpha-8);--cck-doc-color-font-alpha-3:var(--cck-doc-white-alpha-7);--cck-doc-color-font-alpha-4:var(--cck-doc-white-alpha-6);--cck-doc-color-font-alpha-5:var(--cck-doc-white-alpha-5);--cck-doc-color-main-effect-primary-start:#1bbf82cc;--cck-doc-color-main-effect-primary-end:#1bbf8299;--cck-doc-color-main-effect-surface-start:#0f111600;--cck-doc-color-main-effect-surface-end:#0f1116;--cck-doc-color-main-effect-box-start:#ffffff14;--cck-doc-color-main-effect-box-end:#ffffff00}:where(.cck-theme-storybook-addon__color--light),:where([data-cck-theme*=storybook-addon__color--light]){--cck-doc-color-brand-default:var(--cck-doc-see-green-500);--cck-doc-color-bg-0:var(--cck-doc-white-50);--cck-doc-color-bg-1:var(--cck-doc-white-50);--cck-doc-color-bg-2:var(--cck-doc-white-50);--cck-doc-color-bg-3:var(--cck-doc-white-100);--cck-doc-color-bg-4:var(--cck-doc-white-300);--cck-doc-color-bg-5:var(--cck-doc-white-400);--cck-doc-color-bg-alpha-1:var(--cck-doc-white-alpha-1);--cck-doc-color-bg-alpha-2:var(--cck-doc-white-alpha-3);--cck-doc-color-bg-alpha-3:var(--cck-doc-white-alpha-4);--cck-doc-color-bg-alpha-4:var(--cck-doc-white-alpha-5);--cck-doc-color-bg-alpha-5:var(--cck-doc-white-alpha-6);--cck-doc-color-bg-hover-1:var(--cck-doc-color-bg-3);--cck-doc-color-bg-hover-2:var(--cck-doc-color-bg-3);--cck-doc-color-bg-hover-3:var(--cck-doc-ocean-green-200);--cck-doc-color-bg-selected-1:var(--cck-doc-ocean-green-100);--cck-doc-color-bg-selected-2:var(--cck-doc-ocean-green-200);--cck-doc-color-border-1:var(--cck-doc-black-alpha-2);--cck-doc-color-border-2:var(--cck-doc-black-alpha-4);--cck-doc-color-border-3:var(--cck-doc-black-alpha-5);--cck-doc-color-font-1:var(--cck-doc-black-50);--cck-doc-color-font-2:#333d4a;--cck-doc-color-font-3:#666d77;--cck-doc-color-font-4:#999ea5;--cck-doc-color-font-5:#ccced2;--cck-doc-color-font-alpha-1:var(--cck-doc-black-50);--cck-doc-color-font-alpha-2:var(--cck-doc-black-alpha-8);--cck-doc-color-font-alpha-3:var(--cck-doc-black-alpha-7);--cck-doc-color-font-alpha-4:var(--cck-doc-black-alpha-6);--cck-doc-color-font-alpha-5:var(--cck-doc-black-alpha-5);--cck-doc-color-main-effect-primary-start:#008d5ecc;--cck-doc-color-main-effect-primary-end:#008d5e99;--cck-doc-color-main-effect-surface-start:#ffffff00;--cck-doc-color-main-effect-surface-end:#fff;--cck-doc-color-main-effect-box-start:#0f111614;--cck-doc-color-main-effect-box-end:#0f111600}:where(.cck-theme-storybook-addon__size--default),:where([data-cck-theme*=storybook-addon__size--default]){--cck-doc-radius-xs:2px;--cck-doc-radius-sm:4px;--cck-doc-radius-md:8px;--cck-doc-radius-lg:12px;--cck-doc-radius-xl:16px}:where(.cck-theme-storybook-addon__color-palette--default),:where([data-cck-theme*=storybook-addon__color-palette--default]){--cck-doc-ocean-green-50:#f0fdf7;--cck-doc-ocean-green-100:#d4fcec;--cck-doc-ocean-green-200:#aaf7da;--cck-doc-ocean-green-300:#72edc0;--cck-doc-ocean-green-400:#3cd9a0;--cck-doc-ocean-green-500:#1bbf82;--cck-doc-ocean-green-600:#129c69;--cck-doc-ocean-green-700:#127b56;--cck-doc-ocean-green-800:#146247;--cck-doc-ocean-green-900:#14513c;--cck-doc-ocean-green-950:#012c1e;--cck-doc-see-green-50:#effffa;--cck-doc-see-green-100:#a1ffe0;--cck-doc-see-green-200:#52ffc5;--cck-doc-see-green-300:#00ef9f;--cck-doc-see-green-400:#00b478;--cck-doc-see-green-500:#008d5e;--cck-doc-see-green-600:#007951;--cck-doc-see-green-700:#064;--cck-doc-see-green-800:#005237;--cck-doc-see-green-900:#003f2a;--cck-doc-see-green-950:#002b1d;--cck-doc-black-50:#00060f;--cck-doc-black-100:#0f1116;--cck-doc-black-200:#15171e;--cck-doc-black-300:#191b23;--cck-doc-black-400:#222835;--cck-doc-black-500:#494f60;--cck-doc-white-50:#fff;--cck-doc-white-100:#f5f5f5;--cck-doc-white-200:#ececef;--cck-doc-white-300:#e3e3e8;--cck-doc-white-400:#d1d5e1;--cck-doc-white-500:#c1c7d7;--cck-doc-white-alpha-0:#ffffff05;--cck-doc-white-alpha-1:#ffffff0a;--cck-doc-white-alpha-2:#ffffff0f;--cck-doc-white-alpha-3:#ffffff14;--cck-doc-white-alpha-4:#ffffff1a;--cck-doc-white-alpha-5:#ffffff33;--cck-doc-white-alpha-6:#ffffff66;--cck-doc-white-alpha-7:#ffffff99;--cck-doc-white-alpha-8:#ffffffcc;--cck-doc-white-alpha-9:#ffffffe5;--cck-doc-white-alpha-10:#fff;--cck-doc-black-alpha-0:#000c1d05;--cck-doc-black-alpha-1:#000c1d0a;--cck-doc-black-alpha-2:#000c1d0f;--cck-doc-black-alpha-3:#000c1d14;--cck-doc-black-alpha-4:#000c1d1a;--cck-doc-black-alpha-5:#000c1d33;--cck-doc-black-alpha-6:#000c1d66;--cck-doc-black-alpha-7:#000c1d99;--cck-doc-black-alpha-8:#000c1dcc;--cck-doc-black-alpha-9:#000c1de5;--cck-doc-black-alpha-10:#000c1d}.cck-theme-storybook-addon--remove-toolbar main .sb-bar{display:none}#root>div:first-child>div:nth-child(2){border:1px solid var(--cck-doc-color-border-2)}#root>div:first-child>div:nth-child(2)>div:first-child,#root>div:first-child>div:nth-child(3)>.sb-bar{display:none}.sidebar-container>div:first-child>div:first-of-type>div:first-child>div:first-child{padding:12px 24px}.sidebar-header>div:first-of-type>a:first-child>img{max-width:180px!important;width:180px}.sidebar-header>div:first-of-type{margin-right:0}.sidebar-header>div:nth-child(3){display:none}.search-field{background-color:var(--cck-doc-color-bg-2);border:1px solid var(--cck-doc-color-border-1);gap:8px;height:36px!important;padding:4px!important}.search-field+div{display:none}.search-field>div:first-child{color:var(--cck-doc-color-font-2);flex:none;margin-left:4px}.search-field>input:nth-child(2)::-moz-placeholder{color:var(--cck-doc-color-font-4)}.search-field>input:nth-child(2)::placeholder{color:var(--cck-doc-color-font-4)}.search-field>code:nth-child(3){display:none}.sidebar-subheading{margin-top:0!important}.sidebar-item+.sidebar-subheading{margin-top:24px!important}.sidebar-subheading>button:first-of-type{height:auto;padding:0;width:100%}.sidebar-subheading>button:first-of-type:hover{background-color:unset}.sidebar-subheading>button:first-of-type>div:first-child{display:none}.sidebar-subheading>button:nth-of-type(2){display:none!important}.sidebar-item:hover,.sidebar-item[data-selected=true]{background-color:unset!important}.sidebar-item>button:first-of-type{padding:0}.sidebar-item>button:first-of-type>div:first-of-type{display:none}.sidebar-item>a:first-of-type{padding:0}.sidebar-item>a:first-of-type>div:first-of-type,.sidebar-item>a:nth-of-type(2){display:none}.sbdocs.sbdocs-wrapper{background:transparent;padding:0}.sbdocs.sbdocs-content{max-width:unset}h1{font:var(--cck-doc-display-sm-semibold);margin:0 0 28px}h1,h2{color:var(--cck-doc-color-font-1)}h2{font:var(--cck-doc-text-xl-medium);margin:36px 0 24px}h3{font:var(--cck-doc-text-lg-medium)}h3,h4{color:var(--cck-doc-color-font-1);margin:12px 0}h4{font:var(--cck-doc-text-md-medium)}h5{font:var(--cck-doc-text-sm-medium)}h5,h6{color:var(--cck-doc-color-font-1);margin:12px 0}h6{font:var(--cck-doc-text-xs-medium)}p{margin:0 0 16px}ol,p,ul{color:var(--cck-doc-color-font-2);font:var(--cck-doc-text-sm-regular)}ol,ul{margin-top:12px}li{margin:0 0 16px}pre{margin:28px 0}strong{font-weight:600}hr{background-color:var(--cck-doc-color-border-1);border:none;height:1px;margin:48px 0}.cck-theme-storybook-addon code,code{background-color:var(--cck-doc-color-bg-3);border:1px solid var(--cck-doc-color-border-1);border-radius:4px;color:inherit;display:inline-block;font:inherit;margin:0 2px;padding:0 6px}.cck-theme-storybook-addon a,a{color:var(--cck-doc-color-brand-default);font:inherit}.doc-cck-button{align-items:center;border:none;border-radius:var(--cck-doc-radius-sm);box-sizing:border-box;cursor:pointer;display:flex;font:var(--cck-doc-text-sm-medium);justify-content:center;margin:0;min-width:80px;outline:transparent}.doc-cck-button__backdrop{display:none}.doc-cck-button__size--sm{gap:8px;height:32px;padding:0 12px 0 8px}.doc-cck-button__size--sm:has(.doc-cck-svg-icon:first-child){padding:0 12px 0 4px}.doc-cck-button__size--md{gap:8px;height:40px;padding:0 12px}.doc-cck-button__size--md:has(.doc-cck-svg-icon:first-child){padding:0 16px 0 8px}.doc-cck-button__basic{background-color:transparent;color:var(--cck-doc-color-font-1)}.doc-cck-button__basic .doc-cck-svg-icon{fill:var(--cck-doc-color-font-1)}.doc-cck-button__basic:hover{background-color:var(--cck-doc-color-bg-hover-2)}.doc-cck-button__light{background-color:var(--cck-doc-color-bg-selected-1);color:var(--cck-doc-color-font-1)}.doc-cck-button__light:hover{background-color:var(--cck-doc-color-bg-hover-3)}.doc-cck-button__light .doc-cck-svg-icon{fill:var(--cck-doc-color-font-1)}.doc-cck-button__outline{background-color:var(--cck-doc-color-bg-1);border:1px solid var(--cck-doc-ocean-green-600);color:var(--cck-doc-ocean-green-600)}.doc-cck-button__outline:hover{background-color:var(--cck-doc-color-bg-hover-2)}.doc-cck-button__outline .doc-cck-svg-icon{fill:var(--cck-doc-ocean-green-600)}body,html{margin:0;padding:0}*{box-sizing:border-box}.doc-cck-form-field{align-items:flex-start;display:flex;flex-direction:column;gap:4px}.doc-cck-form-field .doc-cck-select{flex:1;height:100%;width:100%}.doc-cck-form-field .doc-cck-input{flex:1;width:100%}.doc-cck-form-field--disabled{opacity:.5}.doc-cck-form-field__wrapper{align-items:stretch;display:flex;flex-direction:row;height:40px;width:100%}.doc-cck-form-field__feedback-wrapper{display:flex;flex-direction:column;overflow:hidden}.doc-cck-form-field__feedback-wrapper:empty{display:none}.doc-cck-form-field__input-wrapper{align-items:center;background-color:var(--cck-doc-color-bg-1);border:1px solid var(--cck-doc-color-border-2);border-radius:var(--cck-doc-radius-sm);display:flex;flex:1;flex-direction:row;min-width:0;padding:8px 12px}.doc-cck-form-field__input-wrapper:hover{background-color:var(--cck-doc-color-bg-hover-2)}.doc-cck-form-field--focused .doc-cck-form-field__input-wrapper{background-color:var(--cck-doc-color-bg-1);border:1px solid var(--cck-doc-color-brand-default);box-shadow:inset 0 0 0 1px var(--cck-doc-color-brand-default)}.doc-cck-svg-icon{align-items:center;display:flex;flex-shrink:0;height:24px;justify-content:center;width:24px;fill:var(--cck-doc-color-font-4)}.doc-cck-svg-icon__svg{height:100%;width:100%}.doc-cck-icon-button{align-items:center;background-color:transparent;border:none;border-radius:50%;box-sizing:border-box;color:var(--cck-doc-color-font-3);cursor:pointer;display:flex;font:var(--cck-doc-text-sm-medium);justify-content:center;margin:0;outline:transparent;transition:background-color .15s}.doc-cck-icon-button .doc-cck-svg-icon{fill:currentcolor;transition:color .15s}.doc-cck-icon-button:hover{background-color:var(--cck-doc-color-bg-hover-1);color:var(--cck-doc-color-font-2)}.doc-cck-icon-button__backdrop{display:none}.doc-cck-icon-button__size--sm{height:32px;width:32px}.doc-cck-icon-button__size--md{height:40px;width:40px}.doc-cck-icon-button__outline{border:1px solid var(--cck-doc-color-border-2)}.doc-cck-input{background-color:transparent;border:none;color:var(--cck-doc-color-font-1);font:var(--cck-doc-text-sm-regular);outline:none;text-overflow:ellipsis}.doc-cck-input::-moz-placeholder{color:var(--cck-doc-color-font-4)}.doc-cck-input::placeholder{color:var(--cck-doc-color-font-4)}.doc-cck-option{align-items:center;border-radius:6px;color:var(--cck-doc-color-font-1);cursor:pointer;display:flex;font:var(--cck-doc-text-sm-regular);gap:8px;height:40px;padding:0 12px}.doc-cck-option:hover{background-color:var(--cck-doc-color-bg-hover-1)}.doc-cck-option .doc-cck-checkbox__input-wrapper{height:16px;width:16px}.doc-cck-option .doc-cck-option --single.doc-cck-option --selected{font:var(--cck-doc-text-sm-medium)}.doc-cck-option__content-wrapper{align-items:center;display:flex;flex:1}.doc-cck-option__selected-checkmark .doc-cck-svg-icon{height:20px;width:20px}.doc-cck-radio-button__wrapper{align-items:center;cursor:pointer;display:inline-flex;vertical-align:middle}.doc-cck-radio-button__input-wrapper{align-items:center;box-sizing:content-box;cursor:pointer;display:inline-block;flex:0 0 auto;height:16px;justify-content:center;position:relative;width:16px;will-change:opacity,transform,border-color,color}.doc-cck-radio-button__input{cursor:inherit;height:100%;left:0;margin:0;opacity:0;padding:0;position:absolute;right:0;top:0;width:100%;z-index:1}.doc-cck-radio-button__backdrop{display:none}.doc-cck-radio-button__background{box-sizing:border-box;height:100%;position:relative;width:100%}.doc-cck-radio-button__background--outer-circle{border-color:var(--cck-doc-color-font-1);border-radius:50%;border-style:solid;border-width:1px;box-sizing:border-box;height:100%;left:0;position:absolute;top:0;transition:border-color 90ms cubic-bezier(0,0,.2,1);width:100%}.doc-cck-radio-button__background--inner-circle{border-radius:50%;box-sizing:border-box;height:100%;left:0;position:absolute;top:0;transform:scale(0);transition:transform 90ms cubic-bezier(.4,0,.6,1),background-color 90ms cubic-bezier(.4,0,.6,1);width:100%}.doc-cck-radio-button--checked .doc-cck-radio-button__background--outer-circle{border-color:var(--cck-doc-color-brand-default);border-width:2px}.doc-cck-radio-button--checked .doc-cck-radio-button__background--inner-circle{background-color:var(--cck-doc-color-brand-default);transform:scale(.5);transition:transform 90ms cubic-bezier(0,0,.2,1),border-color 90ms cubic-bezier(0,0,.2,1)}.doc-cck-radio-button--checked .doc-cck-radio-button__label{color:var(--cck-doc-color-brand-default)}.doc-cck-radio-button__label{color:var(--cck-doc-color-font-1);cursor:pointer;font:var(--cck-doc-text-md-regular);margin-left:0;margin-right:auto;order:0;padding-left:8px;padding-right:0;white-space:nowrap}.doc-cck-radio-group{align-items:flex-start;display:flex}.doc-cck-radio-group__row{flex-direction:row;gap:12px}.doc-cck-radio-group__column{flex-direction:column}.doc-cck-select{align-items:center;border-radius:6px;color:var(--cck-doc-color-font-1);cursor:pointer;display:flex;font:var(--cck-doc-text-sm-regular)}.doc-cck-select__placeholder{color:var(--cck-doc-color-font-4)}.doc-cck-select__trigger-wrapper{color:currentcolor;flex:1;overflow:hidden;padding-right:8px;text-align:start}.doc-cck-select__trigger-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.doc-cck-select__overlay .doc-cck-overlay__backdrop{background-color:transparent}.doc-cck-select__dropdown-icon-wrapper .doc-cck-svg-icon{height:24px;width:24px}.doc-cck-select__options-wrapper{background-color:var(--cck-doc-color-bg-1);border:1px solid var(--cck-doc-color-border-2);border-radius:var(--cck-doc-radius-sm);height:inherit;margin-top:6px;max-height:inherit;overflow:auto;padding:4px}.doc-cck-toggle{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.doc-cck-toggle__label{align-items:center;color:var(--cck-doc-color-font-1);cursor:pointer;display:flex;font:var(--cck-doc-text-md-regular);gap:8px;white-space:nowrap}.doc-cck-toggle--label-before .doc-cck-toggle__label{flex-direction:row-reverse}.doc-cck-toggle__input{cursor:pointer;height:100%;margin:0;opacity:0;padding:0;position:relative;width:100%;z-index:3}.doc-cck-toggle__slider-wrapper{height:20px;position:relative;width:32px}.doc-cck-toggle__thumb{background-color:var(--cck-doc-color-bg-1);border-radius:50%;height:16px;position:absolute;transition:all .3s ease;width:16px;z-index:2}.doc-cck-toggle__backdrop{border-radius:500px;height:100%;left:0;position:absolute;top:0;transition:background-color .3s ease;width:100%;z-index:1}.doc-cck-toggle--checked .doc-cck-toggle__thumb{left:100%;top:50%;transform:translate(calc(-100% - 2px),-50%)}.doc-cck-toggle--checked .doc-cck-toggle__backdrop{background-color:var(--cck-doc-color-brand-default)}.doc-cck-toggle--unchecked .doc-cck-toggle__thumb{left:0;top:50%;transform:translate(2px,-50%)}.doc-cck-toggle--unchecked .doc-cck-toggle__backdrop{background-color:var(--cck-doc-color-bg-4)}.doc-cck-overlay__backdrop{background-color:rgba(0,0,0,.5)}.doc-cck-tabs{display:flex;flex-direction:column;gap:12px}.doc-cck-tabs__headers-wrapper{align-items:center;align-self:flex-start;border-radius:var(--cck-doc-radius-sm);display:flex;flex-wrap:wrap;gap:8px;min-height:40px;padding:4px}.doc-cck-tabs__size--fit .doc-cck-tabs__headers-wrapper{width:100%}.doc-cck-tabs__color--default .doc-cck-tabs__headers-wrapper{background-color:var(--cck-doc-color-bg-3)}.doc-cck-tabs__color--h-contrast .doc-cck-tabs__headers-wrapper{background-color:var(--cck-doc-color-bg-4)}.doc-cck-tab{align-items:center;background:transparent;border:none;border-radius:var(--cck-doc-radius-sm);cursor:pointer;display:flex;font:var(--cck-doc-text-sm-medium);height:32px;justify-content:center;outline:none;padding:4px 12px;position:relative}.doc-cck-tabs__size--fit .doc-cck-tab{flex:1;padding:4px 0}.doc-cck-tab__indicator{border-radius:var(--cck-doc-radius-sm);height:100%;left:0;position:absolute;top:0;width:100%}.doc-cck-tab--selected{color:var(--cck-doc-color-font-1)}.doc-cck-tab--unselected{color:var(--cck-doc-color-font-2)}.doc-cck-tab .doc-cck-svg-icon{fill:currentcolor}.doc-cck-tabs__color--default .doc-cck-tab__indicator{background-color:var(--cck-doc-color-bg-1)}.doc-cck-tabs__color--h-contrast .doc-cck-tab__indicator{background-color:var(--cck-doc-color-bg-2)}.doc-cck-tab__label{position:relative;z-index:1}
\ No newline at end of file
diff --git a/packages/internal/storybook-addon-theme/src/assets/styles/preview-styles.css b/packages/internal/storybook-addon-theme/src/assets/styles/preview-styles.css
index f560612f..ce35a765 100644
--- a/packages/internal/storybook-addon-theme/src/assets/styles/preview-styles.css
+++ b/packages/internal/storybook-addon-theme/src/assets/styles/preview-styles.css
@@ -1156,7 +1156,7 @@ body{
   flex-direction:column;
   gap:12px;
 }
-.doc-cck-tabs__labels-wrapper{
+.doc-cck-tabs__headers-wrapper{
   display:flex;
   flex-wrap:wrap;
   align-items:center;
@@ -1166,13 +1166,13 @@ body{
   align-self:flex-start;
   border-radius:var(--cck-doc-radius-sm);
 }
-.doc-cck-tabs__size--fit .doc-cck-tabs__labels-wrapper{
+.doc-cck-tabs__size--fit .doc-cck-tabs__headers-wrapper{
   width:100%;
 }
-.doc-cck-tabs__color--default .doc-cck-tabs__labels-wrapper{
+.doc-cck-tabs__color--default .doc-cck-tabs__headers-wrapper{
   background-color:var(--cck-doc-color-bg-3);
 }
-.doc-cck-tabs__color--h-contrast .doc-cck-tabs__labels-wrapper{
+.doc-cck-tabs__color--h-contrast .doc-cck-tabs__headers-wrapper{
   background-color:var(--cck-doc-color-bg-4);
 }
 
@@ -1220,7 +1220,7 @@ body{
   background-color:var(--cck-doc-color-bg-2);
 }
 
-.doc-cck-tab-label{
+.doc-cck-tab__label{
   position:relative;
   z-index:1;
 }
\ No newline at end of file
diff --git a/packages/internal/storybook-addon-theme/src/assets/styles/preview-styles.min.css b/packages/internal/storybook-addon-theme/src/assets/styles/preview-styles.min.css
index 27f241c3..b961bb6b 100644
--- a/packages/internal/storybook-addon-theme/src/assets/styles/preview-styles.min.css
+++ b/packages/internal/storybook-addon-theme/src/assets/styles/preview-styles.min.css
@@ -4,4 +4,4 @@
  * Generated by cocokits 'scss-builder'
  */
  
-:where(.cck-theme-storybook-addon__local-style--default),:where([data-cck-theme*=storybook-addon__local-style--default]){--cck-doc-display-2xl-regular:400 72px/90px Inter;--cck-doc-display-2xl-light:300 72px/90px Inter;--cck-doc-display-2xl-medium:500 72px/90px Inter;--cck-doc-display-2xl-semibold:600 72px/90px Inter;--cck-doc-display-2xl-bold:700 72px/90px Inter;--cck-doc-display-xl-light:300 60px/72px Inter;--cck-doc-display-xl-regular:400 60px/72px Inter;--cck-doc-display-xl-medium:500 60px/72px Inter;--cck-doc-display-xl-semibold:600 60px/72px Inter;--cck-doc-display-xl-bold:700 60px/72px Inter;--cck-doc-display-lg-light:300 48px/64px Inter;--cck-doc-display-lg-regular:400 48px/64px Inter;--cck-doc-display-lg-medium:500 48px/64px Inter;--cck-doc-display-lg-semibold:600 48px/64px Inter;--cck-doc-display-lg-bold:700 48px/64px Inter;--cck-doc-display-md-light:300 36px/60px Inter;--cck-doc-display-md-regular:400 36px/60px Inter;--cck-doc-display-md-medium:500 36px/60px Inter;--cck-doc-display-md-semibold:600 36px/60px Inter;--cck-doc-display-md-bold:700 36px/60px Inter;--cck-doc-display-sm-light:300 30px/44px Inter;--cck-doc-display-sm-regular:400 30px/44px Inter;--cck-doc-display-sm-medium:500 30px/44px Inter;--cck-doc-display-sm-semibold:600 30px/44px Inter;--cck-doc-display-sm-bold:700 30px/44px Inter;--cck-doc-display-xs-light:300 24px/38px Inter;--cck-doc-display-xs-regular:400 24px/38px Inter;--cck-doc-display-xs-medium:500 24px/38px Inter;--cck-doc-display-xs-semibold:600 24px/38px Inter;--cck-doc-display-xs-bold:700 24px/38px Inter;--cck-doc-text-xl-light:300 20px/32px Inter;--cck-doc-text-xl-regular:400 20px/32px Inter;--cck-doc-text-xl-medium:500 20px/32px Inter;--cck-doc-text-xl-semibold:600 20px/32px Inter;--cck-doc-text-xl-bold:700 20px/32px Inter;--cck-doc-text-lg-light:300 18px/30px Inter;--cck-doc-text-lg-regular:400 18px/30px Inter;--cck-doc-text-lg-medium:500 18px/30px Inter;--cck-doc-text-lg-semibold:600 18px/30px Inter;--cck-doc-text-lg-bold:700 18px/30px Inter;--cck-doc-text-md-light:300 16px/28px Inter;--cck-doc-text-md-regular:400 16px/28px Inter;--cck-doc-text-md-medium:500 16px/28px Inter;--cck-doc-text-md-semibold:600 16px/28px Inter;--cck-doc-text-md-bold:700 16px/28px Inter;--cck-doc-text-sm-light:300 14px/24px Inter;--cck-doc-text-sm-regular:400 14px/24px Inter;--cck-doc-text-sm-medium:500 14px/24px Inter;--cck-doc-text-sm-semibold:600 14px/24px Inter;--cck-doc-text-sm-bold:700 14px/24px Inter;--cck-doc-text-xs-light:300 12px/20px Inter;--cck-doc-text-xs-regular:400 12px/20px Inter;--cck-doc-text-xs-medium:500 12px/20px Inter;--cck-doc-text-xs-semibold:600 12px/20px Inter;--cck-doc-text-xs-bold:700 12px/20px Inter}:where(.cck-theme-storybook-addon__color--dark),:where([data-cck-theme*=storybook-addon__color--dark]){--cck-doc-color-brand-default:var(--cck-doc-ocean-green-500);--cck-doc-color-bg-0:var(--cck-doc-black-50);--cck-doc-color-bg-1:var(--cck-doc-black-100);--cck-doc-color-bg-2:var(--cck-doc-black-200);--cck-doc-color-bg-3:var(--cck-doc-black-300);--cck-doc-color-bg-4:var(--cck-doc-black-400);--cck-doc-color-bg-5:var(--cck-doc-black-500);--cck-doc-color-bg-alpha-1:var(--cck-doc-black-alpha-1);--cck-doc-color-bg-alpha-2:var(--cck-doc-black-alpha-3);--cck-doc-color-bg-alpha-3:var(--cck-doc-black-alpha-4);--cck-doc-color-bg-alpha-4:var(--cck-doc-black-alpha-5);--cck-doc-color-bg-alpha-5:var(--cck-doc-black-alpha-6);--cck-doc-color-bg-hover-1:var(--cck-doc-color-bg-3);--cck-doc-color-bg-hover-2:var(--cck-doc-color-bg-2);--cck-doc-color-bg-hover-3:var(--cck-doc-ocean-green-900);--cck-doc-color-bg-selected-1:var(--cck-doc-ocean-green-950);--cck-doc-color-bg-selected-2:var(--cck-doc-ocean-green-900);--cck-doc-color-border-1:var(--cck-doc-white-alpha-2);--cck-doc-color-border-2:var(--cck-doc-white-alpha-4);--cck-doc-color-border-3:var(--cck-doc-white-alpha-5);--cck-doc-color-font-1:var(--cck-doc-white-50);--cck-doc-color-font-2:#ccc;--cck-doc-color-font-3:#999;--cck-doc-color-font-4:#666;--cck-doc-color-font-5:#333;--cck-doc-color-font-alpha-1:var(--cck-doc-white-50);--cck-doc-color-font-alpha-2:var(--cck-doc-white-alpha-8);--cck-doc-color-font-alpha-3:var(--cck-doc-white-alpha-7);--cck-doc-color-font-alpha-4:var(--cck-doc-white-alpha-6);--cck-doc-color-font-alpha-5:var(--cck-doc-white-alpha-5);--cck-doc-color-main-effect-primary-start:#1bbf82cc;--cck-doc-color-main-effect-primary-end:#1bbf8299;--cck-doc-color-main-effect-surface-start:#0f111600;--cck-doc-color-main-effect-surface-end:#0f1116;--cck-doc-color-main-effect-box-start:#ffffff14;--cck-doc-color-main-effect-box-end:#ffffff00}:where(.cck-theme-storybook-addon__color--light),:where([data-cck-theme*=storybook-addon__color--light]){--cck-doc-color-brand-default:var(--cck-doc-see-green-500);--cck-doc-color-bg-0:var(--cck-doc-white-50);--cck-doc-color-bg-1:var(--cck-doc-white-50);--cck-doc-color-bg-2:var(--cck-doc-white-50);--cck-doc-color-bg-3:var(--cck-doc-white-100);--cck-doc-color-bg-4:var(--cck-doc-white-300);--cck-doc-color-bg-5:var(--cck-doc-white-400);--cck-doc-color-bg-alpha-1:var(--cck-doc-white-alpha-1);--cck-doc-color-bg-alpha-2:var(--cck-doc-white-alpha-3);--cck-doc-color-bg-alpha-3:var(--cck-doc-white-alpha-4);--cck-doc-color-bg-alpha-4:var(--cck-doc-white-alpha-5);--cck-doc-color-bg-alpha-5:var(--cck-doc-white-alpha-6);--cck-doc-color-bg-hover-1:var(--cck-doc-color-bg-3);--cck-doc-color-bg-hover-2:var(--cck-doc-color-bg-3);--cck-doc-color-bg-hover-3:var(--cck-doc-ocean-green-200);--cck-doc-color-bg-selected-1:var(--cck-doc-ocean-green-100);--cck-doc-color-bg-selected-2:var(--cck-doc-ocean-green-200);--cck-doc-color-border-1:var(--cck-doc-black-alpha-2);--cck-doc-color-border-2:var(--cck-doc-black-alpha-4);--cck-doc-color-border-3:var(--cck-doc-black-alpha-5);--cck-doc-color-font-1:var(--cck-doc-black-50);--cck-doc-color-font-2:#333d4a;--cck-doc-color-font-3:#666d77;--cck-doc-color-font-4:#999ea5;--cck-doc-color-font-5:#ccced2;--cck-doc-color-font-alpha-1:var(--cck-doc-black-50);--cck-doc-color-font-alpha-2:var(--cck-doc-black-alpha-8);--cck-doc-color-font-alpha-3:var(--cck-doc-black-alpha-7);--cck-doc-color-font-alpha-4:var(--cck-doc-black-alpha-6);--cck-doc-color-font-alpha-5:var(--cck-doc-black-alpha-5);--cck-doc-color-main-effect-primary-start:#008d5ecc;--cck-doc-color-main-effect-primary-end:#008d5e99;--cck-doc-color-main-effect-surface-start:#ffffff00;--cck-doc-color-main-effect-surface-end:#fff;--cck-doc-color-main-effect-box-start:#0f111614;--cck-doc-color-main-effect-box-end:#0f111600}:where(.cck-theme-storybook-addon__size--default),:where([data-cck-theme*=storybook-addon__size--default]){--cck-doc-radius-xs:2px;--cck-doc-radius-sm:4px;--cck-doc-radius-md:8px;--cck-doc-radius-lg:12px;--cck-doc-radius-xl:16px}:where(.cck-theme-storybook-addon__color-palette--default),:where([data-cck-theme*=storybook-addon__color-palette--default]){--cck-doc-ocean-green-50:#f0fdf7;--cck-doc-ocean-green-100:#d4fcec;--cck-doc-ocean-green-200:#aaf7da;--cck-doc-ocean-green-300:#72edc0;--cck-doc-ocean-green-400:#3cd9a0;--cck-doc-ocean-green-500:#1bbf82;--cck-doc-ocean-green-600:#129c69;--cck-doc-ocean-green-700:#127b56;--cck-doc-ocean-green-800:#146247;--cck-doc-ocean-green-900:#14513c;--cck-doc-ocean-green-950:#012c1e;--cck-doc-see-green-50:#effffa;--cck-doc-see-green-100:#a1ffe0;--cck-doc-see-green-200:#52ffc5;--cck-doc-see-green-300:#00ef9f;--cck-doc-see-green-400:#00b478;--cck-doc-see-green-500:#008d5e;--cck-doc-see-green-600:#007951;--cck-doc-see-green-700:#064;--cck-doc-see-green-800:#005237;--cck-doc-see-green-900:#003f2a;--cck-doc-see-green-950:#002b1d;--cck-doc-black-50:#00060f;--cck-doc-black-100:#0f1116;--cck-doc-black-200:#15171e;--cck-doc-black-300:#191b23;--cck-doc-black-400:#222835;--cck-doc-black-500:#494f60;--cck-doc-white-50:#fff;--cck-doc-white-100:#f5f5f5;--cck-doc-white-200:#ececef;--cck-doc-white-300:#e3e3e8;--cck-doc-white-400:#d1d5e1;--cck-doc-white-500:#c1c7d7;--cck-doc-white-alpha-0:#ffffff05;--cck-doc-white-alpha-1:#ffffff0a;--cck-doc-white-alpha-2:#ffffff0f;--cck-doc-white-alpha-3:#ffffff14;--cck-doc-white-alpha-4:#ffffff1a;--cck-doc-white-alpha-5:#ffffff33;--cck-doc-white-alpha-6:#ffffff66;--cck-doc-white-alpha-7:#ffffff99;--cck-doc-white-alpha-8:#ffffffcc;--cck-doc-white-alpha-9:#ffffffe5;--cck-doc-white-alpha-10:#fff;--cck-doc-black-alpha-0:#000c1d05;--cck-doc-black-alpha-1:#000c1d0a;--cck-doc-black-alpha-2:#000c1d0f;--cck-doc-black-alpha-3:#000c1d14;--cck-doc-black-alpha-4:#000c1d1a;--cck-doc-black-alpha-5:#000c1d33;--cck-doc-black-alpha-6:#000c1d66;--cck-doc-black-alpha-7:#000c1d99;--cck-doc-black-alpha-8:#000c1dcc;--cck-doc-black-alpha-9:#000c1de5;--cck-doc-black-alpha-10:#000c1d}.cck-theme-storybook-addon--remove-toolbar main .sb-bar{display:none}#root>div:first-child>div:nth-child(2){border:1px solid var(--cck-doc-color-border-2)}#root>div:first-child>div:nth-child(2)>div:first-child,#root>div:first-child>div:nth-child(3)>.sb-bar{display:none}.sidebar-container>div:first-child>div:first-of-type>div:first-child>div:first-child{padding:12px 24px}.sidebar-header>div:first-of-type>a:first-child>img{max-width:180px!important;width:180px}.sidebar-header>div:first-of-type{margin-right:0}.sidebar-header>div:nth-child(3){display:none}.search-field{background-color:var(--cck-doc-color-bg-2);border:1px solid var(--cck-doc-color-border-1);gap:8px;height:36px!important;padding:4px!important}.search-field+div{display:none}.search-field>div:first-child{color:var(--cck-doc-color-font-2);flex:none;margin-left:4px}.search-field>input:nth-child(2)::-moz-placeholder{color:var(--cck-doc-color-font-4)}.search-field>input:nth-child(2)::placeholder{color:var(--cck-doc-color-font-4)}.search-field>code:nth-child(3){display:none}.sidebar-subheading{margin-top:0!important}.sidebar-item+.sidebar-subheading{margin-top:24px!important}.sidebar-subheading>button:first-of-type{height:auto;padding:0;width:100%}.sidebar-subheading>button:first-of-type:hover{background-color:unset}.sidebar-subheading>button:first-of-type>div:first-child{display:none}.sidebar-subheading>button:nth-of-type(2){display:none!important}.sidebar-item:hover,.sidebar-item[data-selected=true]{background-color:unset!important}.sidebar-item>button:first-of-type{padding:0}.sidebar-item>button:first-of-type>div:first-of-type{display:none}.sidebar-item>a:first-of-type{padding:0}.sidebar-item>a:first-of-type>div:first-of-type,.sidebar-item>a:nth-of-type(2){display:none}.sbdocs.sbdocs-wrapper{background:transparent;padding:0}.sbdocs.sbdocs-content{max-width:unset}h1{font:var(--cck-doc-display-sm-semibold);margin:0 0 28px}h1,h2{color:var(--cck-doc-color-font-1)}h2{font:var(--cck-doc-text-xl-medium);margin:36px 0 24px}h3{font:var(--cck-doc-text-lg-medium)}h3,h4{color:var(--cck-doc-color-font-1);margin:12px 0}h4{font:var(--cck-doc-text-md-medium)}h5{font:var(--cck-doc-text-sm-medium)}h5,h6{color:var(--cck-doc-color-font-1);margin:12px 0}h6{font:var(--cck-doc-text-xs-medium)}p{margin:0 0 16px}ol,p,ul{color:var(--cck-doc-color-font-2);font:var(--cck-doc-text-sm-regular)}ol,ul{margin-top:12px}li{margin:0 0 16px}pre{margin:28px 0}strong{font-weight:600}hr{background-color:var(--cck-doc-color-border-1);border:none;height:1px;margin:48px 0}.cck-theme-storybook-addon code,code{background-color:var(--cck-doc-color-bg-3);border:1px solid var(--cck-doc-color-border-1);border-radius:4px;color:inherit;display:inline-block;font:inherit;margin:0 2px;padding:0 6px}.cck-theme-storybook-addon a,a{color:var(--cck-doc-color-brand-default);font:inherit}.arg-type-table-wrapper{overflow-x:auto;width:100%}.arg-type-table{align-self:flex-start;border:1px solid var(--cck-doc-color-border-1);border-radius:var(--cck-doc-radius-sm);border-spacing:0;margin-bottom:48px}.arg-type-table--gap-8{display:flex;flex-wrap:wrap;gap:8px}.arg-type-table--no-wrap{white-space:nowrap}.arg-type-table.arg-type-table--full-width{min-width:100%}.arg-type-table .description-column{min-width:300px}.arg-type-table p{color:inherit;font:inherit;margin-bottom:0}.arg-type-table tr{color:var(--cck-doc-color-font-1);font:var(--cck-doc-text-sm-medium);padding:12px 24px}.arg-type-table tr:hover{background-color:var(--cck-doc-color-bg-3)}.arg-type-table td{border-top:1px solid var(--cck-doc-color-border-1);color:var(--cck-doc-color-font-3);font:var(--cck-doc-text-sm-regular);padding:12px 24px}.arg-type-table td:first-child{color:var(--cck-doc-color-font-1);font:var(--cck-doc-text-sm-medium);white-space:nowrap}.arg-type-table td code{color:var(--cck-doc-color-font-2);font:var(--cck-doc-text-sm-regular);padding:0 6px;white-space:nowrap}.arg-type-table td code.wrap{white-space:normal}.arg-type-table th{color:var(--cck-doc-color-font-1);font:var(--cck-doc-text-sm-medium);padding:12px 24px;text-align:left}.collection-modes-selector-table{align-self:flex-start;border:1px solid var(--cck-doc-color-border-2);border-radius:6px;border-spacing:0;min-width:100%}.collection-modes-selector-table p{color:inherit;font:inherit;margin-bottom:0}.collection-modes-selector-table tr{color:var(--cck-doc-color-font-1);font:var(--cck-doc-text-sm-medium);padding:12px 24px}.collection-modes-selector-table td{border-top:1px solid var(--cck-doc-color-border-2);color:var(--cck-doc-color-font-3);font:var(--cck-doc-text-sm-regular);padding:8px 24px}.collection-modes-selector-table td.collection-modes-selector-table__header-cell{border-right:1px solid var(--cck-doc-color-border-2);color:var(--cck-doc-color-font-1);font:var(--cck-doc-text-sm-medium);white-space:nowrap}.collection-modes-selector-table td code{font:var(--cck-doc-text-xs-regular);padding:0 6px;white-space:break-spaces}.collection-modes-selector-table td ul{padding:0 16px}.collection-modes-selector-table td li+li{margin-bottom:0}.collection-modes-selector-table th{color:var(--cck-doc-color-font-1);font:var(--cck-doc-text-sm-medium);padding:12px 24px;text-align:left;white-space:nowrap}.story-decorator-wrapper{align-items:center;display:flex;flex-wrap:wrap;gap:24px;justify-content:center}.story-decorator-wrapper__row{flex-direction:row}.story-decorator-wrapper__column{flex-direction:column}.story-decorator-wrapper__inside-box{background-color:var(--cck-doc-color-bg-1);border:1px solid var(--cck-doc-color-border-2);border-radius:var(--cck-doc-radius-md);padding:12px 24px}.theme-addon-mdx-page table{margin-bottom:24px}.cck-theme-storybook-addon__color--light .theme-addon-mdx-page{--cck-doc-theme-addon-prismjs-green-1:green;--cck-doc-theme-addon-prismjs-red-1:#a31515;--cck-doc-theme-addon-prismjs-red-2:#9a050f;--cck-doc-theme-addon-prismjs-red-3:maroon;--cck-doc-theme-addon-prismjs-red-4:red;--cck-doc-theme-addon-prismjs-gray-1:#393a34;--cck-doc-theme-addon-prismjs-cyan-1:#36acaa;--cck-doc-theme-addon-prismjs-cyan-2:#2b91af;--cck-doc-theme-addon-prismjs-blue-1:#00f;--cck-doc-theme-addon-prismjs-blue-2:#00009f;--cck-doc-theme-addon-prismjs-unset:#2e3438}.cck-theme-storybook-addon__color--dark .theme-addon-mdx-page{--cck-doc-theme-addon-prismjs-green-1:#7c7c7c;--cck-doc-theme-addon-prismjs-red-1:#92c379;--cck-doc-theme-addon-prismjs-red-2:#9a050f;--cck-doc-theme-addon-prismjs-red-3:#a8ff60;--cck-doc-theme-addon-prismjs-red-4:#96cbfe;--cck-doc-theme-addon-prismjs-gray-1:#ededed;--cck-doc-theme-addon-prismjs-cyan-1:#c6c5fe;--cck-doc-theme-addon-prismjs-cyan-2:#ffffb6;--cck-doc-theme-addon-prismjs-blue-1:#b474dd;--cck-doc-theme-addon-prismjs-blue-2:#00009f;--cck-doc-theme-addon-prismjs-unset:#babed8}.theme-addon-mdx-page pre{margin:0}.theme-addon-mdx-page pre .docblock-source{background-color:var(--cck-doc-color-bg-3);border:1px solid var(--cck-doc-color-border-1);border-radius:var(--cck-doc-radius-md);box-shadow:none;color:var(--color-storybook-source-unset);margin:0 0 24px}.theme-addon-mdx-page pre .docblock-source>div:nth-child(2){display:none}.theme-addon-mdx-page pre.prismjs{color:var(--cck-doc-color-font-1);padding:12px}.theme-addon-mdx-page pre .token.string{color:var(--cck-doc-theme-addon-prismjs-red-1)}.theme-addon-mdx-page pre .token.deleted{color:var(--cck-doc-theme-addon-prismjs-red-2)}.theme-addon-mdx-page pre .token.selector,.theme-addon-mdx-page pre .token.tag{color:var(--cck-doc-theme-addon-prismjs-red-3)}.theme-addon-mdx-page pre .token.attr-name,.theme-addon-mdx-page pre .token.entity,.theme-addon-mdx-page pre .token.property,.theme-addon-mdx-page pre .token.regex{color:var(--cck-doc-theme-addon-prismjs-red-4)}.theme-addon-mdx-page pre .token.cdata,.theme-addon-mdx-page pre .token.comment,.theme-addon-mdx-page pre .token.doctype,.theme-addon-mdx-page pre .token.prolog{color:var(--cck-doc-theme-addon-prismjs-green-1)}.theme-addon-mdx-page pre .token.boolean,.theme-addon-mdx-page pre .token.constant,.theme-addon-mdx-page pre .token.inserted,.theme-addon-mdx-page pre .token.number,.theme-addon-mdx-page pre .token.symbol,.theme-addon-mdx-page pre .token.url,.theme-addon-mdx-page pre .token.variable{color:var(--cck-doc-theme-addon-prismjs-cyan-1)}.theme-addon-mdx-page pre .token.class-name{color:var(--cck-doc-theme-addon-prismjs-cyan-2)}.theme-addon-mdx-page pre .token.atrule,.theme-addon-mdx-page pre .token.attr-value,.theme-addon-mdx-page pre .token.keyword{color:var(--cck-doc-theme-addon-prismjs-blue-1)}.theme-addon-mdx-page pre .token.function,.theme-addon-mdx-page pre .token.operator,.theme-addon-mdx-page pre .token.punctuation{color:var(--cck-doc-theme-addon-prismjs-gray-1)}.theme-addon-mdx-page pre .token.cdata,.theme-addon-mdx-page pre .token.comment,.theme-addon-mdx-page pre .token.doctype,.theme-addon-mdx-page pre .token.italic,.theme-addon-mdx-page pre .token.prolog{font-style:italic}.theme-addon-mdx-page pre .token.bold,.theme-addon-mdx-page pre .token.important{font-weight:700}.cck-doc-story__radio-selection-group{display:flex;gap:8px;justify-content:center}.cck-doc-story__radio-selection{align-items:center;border:1px solid var(--cck-doc-color-border-3);border-radius:50%;color:var(--cck-doc-color-font-1);cursor:pointer;display:flex;font:var(--cck-doc-text-sm-light);height:32px;justify-content:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:32px}.cck-doc-story__radio-selection--selected{background-color:var(--cck-doc-color-bg-selected-2)}.cck-doc-story__button--basic{align-items:center;background-color:transparent;border:none;border-radius:var(--cck-doc-radius-sm);box-sizing:border-box;color:var(--cck-doc-color-font-1);cursor:pointer;display:flex;font:var(--cck-doc-text-sm-medium);gap:8px;height:40px;justify-content:center;margin:0;min-width:80px;outline:transparent;padding:0 16px}.cck-doc-story__button--basic:hover{background-color:var(--cck-doc-color-bg-hover-2)}.cck-doc-story__header{width:100%}.doc-cck-button{align-items:center;border:none;border-radius:var(--cck-doc-radius-sm);box-sizing:border-box;cursor:pointer;display:flex;font:var(--cck-doc-text-sm-medium);justify-content:center;margin:0;min-width:80px;outline:transparent}.doc-cck-button__backdrop{display:none}.doc-cck-button__size--sm{gap:8px;height:32px;padding:0 12px 0 8px}.doc-cck-button__size--sm:has(.doc-cck-svg-icon:first-child){padding:0 12px 0 4px}.doc-cck-button__size--md{gap:8px;height:40px;padding:0 12px}.doc-cck-button__size--md:has(.doc-cck-svg-icon:first-child){padding:0 16px 0 8px}.doc-cck-button__basic{background-color:transparent;color:var(--cck-doc-color-font-1)}.doc-cck-button__basic .doc-cck-svg-icon{fill:var(--cck-doc-color-font-1)}.doc-cck-button__basic:hover{background-color:var(--cck-doc-color-bg-hover-2)}.doc-cck-button__light{background-color:var(--cck-doc-color-bg-selected-1);color:var(--cck-doc-color-font-1)}.doc-cck-button__light:hover{background-color:var(--cck-doc-color-bg-hover-3)}.doc-cck-button__light .doc-cck-svg-icon{fill:var(--cck-doc-color-font-1)}.doc-cck-button__outline{background-color:var(--cck-doc-color-bg-1);border:1px solid var(--cck-doc-ocean-green-600);color:var(--cck-doc-ocean-green-600)}.doc-cck-button__outline:hover{background-color:var(--cck-doc-color-bg-hover-2)}.doc-cck-button__outline .doc-cck-svg-icon{fill:var(--cck-doc-ocean-green-600)}body,html{margin:0;padding:0}*{box-sizing:border-box}.doc-cck-form-field{align-items:flex-start;display:flex;flex-direction:column;gap:4px}.doc-cck-form-field .doc-cck-select{flex:1;height:100%;width:100%}.doc-cck-form-field .doc-cck-input{flex:1;width:100%}.doc-cck-form-field--disabled{opacity:.5}.doc-cck-form-field__wrapper{align-items:stretch;display:flex;flex-direction:row;height:40px;width:100%}.doc-cck-form-field__feedback-wrapper{display:flex;flex-direction:column;overflow:hidden}.doc-cck-form-field__feedback-wrapper:empty{display:none}.doc-cck-form-field__input-wrapper{align-items:center;background-color:var(--cck-doc-color-bg-1);border:1px solid var(--cck-doc-color-border-2);border-radius:var(--cck-doc-radius-sm);display:flex;flex:1;flex-direction:row;min-width:0;padding:8px 12px}.doc-cck-form-field__input-wrapper:hover{background-color:var(--cck-doc-color-bg-hover-2)}.doc-cck-form-field--focused .doc-cck-form-field__input-wrapper{background-color:var(--cck-doc-color-bg-1);border:1px solid var(--cck-doc-color-brand-default);box-shadow:inset 0 0 0 1px var(--cck-doc-color-brand-default)}.doc-cck-svg-icon{align-items:center;display:flex;flex-shrink:0;height:24px;justify-content:center;width:24px;fill:var(--cck-doc-color-font-4)}.doc-cck-svg-icon__svg{height:100%;width:100%}.doc-cck-icon-button{align-items:center;background-color:transparent;border:none;border-radius:50%;box-sizing:border-box;color:var(--cck-doc-color-font-3);cursor:pointer;display:flex;font:var(--cck-doc-text-sm-medium);justify-content:center;margin:0;outline:transparent;transition:background-color .15s}.doc-cck-icon-button .doc-cck-svg-icon{fill:currentcolor;transition:color .15s}.doc-cck-icon-button:hover{background-color:var(--cck-doc-color-bg-hover-1);color:var(--cck-doc-color-font-2)}.doc-cck-icon-button__backdrop{display:none}.doc-cck-icon-button__size--sm{height:32px;width:32px}.doc-cck-icon-button__size--md{height:40px;width:40px}.doc-cck-icon-button__outline{border:1px solid var(--cck-doc-color-border-2)}.doc-cck-input{background-color:transparent;border:none;color:var(--cck-doc-color-font-1);font:var(--cck-doc-text-sm-regular);outline:none;text-overflow:ellipsis}.doc-cck-input::-moz-placeholder{color:var(--cck-doc-color-font-4)}.doc-cck-input::placeholder{color:var(--cck-doc-color-font-4)}.doc-cck-option{align-items:center;border-radius:6px;color:var(--cck-doc-color-font-1);cursor:pointer;display:flex;font:var(--cck-doc-text-sm-regular);gap:8px;height:40px;padding:0 12px}.doc-cck-option:hover{background-color:var(--cck-doc-color-bg-hover-1)}.doc-cck-option .doc-cck-checkbox__input-wrapper{height:16px;width:16px}.doc-cck-option .doc-cck-option --single.doc-cck-option --selected{font:var(--cck-doc-text-sm-medium)}.doc-cck-option__content-wrapper{align-items:center;display:flex;flex:1}.doc-cck-option__selected-checkmark .doc-cck-svg-icon{height:20px;width:20px}.doc-cck-radio-button__wrapper{align-items:center;cursor:pointer;display:inline-flex;vertical-align:middle}.doc-cck-radio-button__input-wrapper{align-items:center;box-sizing:content-box;cursor:pointer;display:inline-block;flex:0 0 auto;height:16px;justify-content:center;position:relative;width:16px;will-change:opacity,transform,border-color,color}.doc-cck-radio-button__input{cursor:inherit;height:100%;left:0;margin:0;opacity:0;padding:0;position:absolute;right:0;top:0;width:100%;z-index:1}.doc-cck-radio-button__backdrop{display:none}.doc-cck-radio-button__background{box-sizing:border-box;height:100%;position:relative;width:100%}.doc-cck-radio-button__background--outer-circle{border-color:var(--cck-doc-color-font-1);border-radius:50%;border-style:solid;border-width:1px;box-sizing:border-box;height:100%;left:0;position:absolute;top:0;transition:border-color 90ms cubic-bezier(0,0,.2,1);width:100%}.doc-cck-radio-button__background--inner-circle{border-radius:50%;box-sizing:border-box;height:100%;left:0;position:absolute;top:0;transform:scale(0);transition:transform 90ms cubic-bezier(.4,0,.6,1),background-color 90ms cubic-bezier(.4,0,.6,1);width:100%}.doc-cck-radio-button--checked .doc-cck-radio-button__background--outer-circle{border-color:var(--cck-doc-color-brand-default);border-width:2px}.doc-cck-radio-button--checked .doc-cck-radio-button__background--inner-circle{background-color:var(--cck-doc-color-brand-default);transform:scale(.5);transition:transform 90ms cubic-bezier(0,0,.2,1),border-color 90ms cubic-bezier(0,0,.2,1)}.doc-cck-radio-button--checked .doc-cck-radio-button__label{color:var(--cck-doc-color-brand-default)}.doc-cck-radio-button__label{color:var(--cck-doc-color-font-1);cursor:pointer;font:var(--cck-doc-text-md-regular);margin-left:0;margin-right:auto;order:0;padding-left:8px;padding-right:0;white-space:nowrap}.doc-cck-radio-group{align-items:flex-start;display:flex}.doc-cck-radio-group__row{flex-direction:row;gap:12px}.doc-cck-radio-group__column{flex-direction:column}.doc-cck-select{align-items:center;border-radius:6px;color:var(--cck-doc-color-font-1);cursor:pointer;display:flex;font:var(--cck-doc-text-sm-regular)}.doc-cck-select__placeholder{color:var(--cck-doc-color-font-4)}.doc-cck-select__trigger-wrapper{color:currentcolor;flex:1;overflow:hidden;padding-right:8px;text-align:start}.doc-cck-select__trigger-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.doc-cck-select__overlay .doc-cck-overlay__backdrop{background-color:transparent}.doc-cck-select__dropdown-icon-wrapper .doc-cck-svg-icon{height:24px;width:24px}.doc-cck-select__options-wrapper{background-color:var(--cck-doc-color-bg-1);border:1px solid var(--cck-doc-color-border-2);border-radius:var(--cck-doc-radius-sm);height:inherit;margin-top:6px;max-height:inherit;overflow:auto;padding:4px}.doc-cck-toggle{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.doc-cck-toggle__label{align-items:center;color:var(--cck-doc-color-font-1);cursor:pointer;display:flex;font:var(--cck-doc-text-md-regular);gap:8px;white-space:nowrap}.doc-cck-toggle--label-before .doc-cck-toggle__label{flex-direction:row-reverse}.doc-cck-toggle__input{cursor:pointer;height:100%;margin:0;opacity:0;padding:0;position:relative;width:100%;z-index:3}.doc-cck-toggle__slider-wrapper{height:20px;position:relative;width:32px}.doc-cck-toggle__thumb{background-color:var(--cck-doc-color-bg-1);border-radius:50%;height:16px;position:absolute;transition:all .3s ease;width:16px;z-index:2}.doc-cck-toggle__backdrop{border-radius:500px;height:100%;left:0;position:absolute;top:0;transition:background-color .3s ease;width:100%;z-index:1}.doc-cck-toggle--checked .doc-cck-toggle__thumb{left:100%;top:50%;transform:translate(calc(-100% - 2px),-50%)}.doc-cck-toggle--checked .doc-cck-toggle__backdrop{background-color:var(--cck-doc-color-brand-default)}.doc-cck-toggle--unchecked .doc-cck-toggle__thumb{left:0;top:50%;transform:translate(2px,-50%)}.doc-cck-toggle--unchecked .doc-cck-toggle__backdrop{background-color:var(--cck-doc-color-bg-4)}.doc-cck-overlay__backdrop{background-color:rgba(0,0,0,.5)}.doc-cck-tabs{display:flex;flex-direction:column;gap:12px}.doc-cck-tabs__labels-wrapper{align-items:center;align-self:flex-start;border-radius:var(--cck-doc-radius-sm);display:flex;flex-wrap:wrap;gap:8px;min-height:40px;padding:4px}.doc-cck-tabs__size--fit .doc-cck-tabs__labels-wrapper{width:100%}.doc-cck-tabs__color--default .doc-cck-tabs__labels-wrapper{background-color:var(--cck-doc-color-bg-3)}.doc-cck-tabs__color--h-contrast .doc-cck-tabs__labels-wrapper{background-color:var(--cck-doc-color-bg-4)}.doc-cck-tab{align-items:center;background:transparent;border:none;border-radius:var(--cck-doc-radius-sm);cursor:pointer;display:flex;font:var(--cck-doc-text-sm-medium);height:32px;justify-content:center;outline:none;padding:4px 12px;position:relative}.doc-cck-tabs__size--fit .doc-cck-tab{flex:1;padding:4px 0}.doc-cck-tab__indicator{border-radius:var(--cck-doc-radius-sm);height:100%;left:0;position:absolute;top:0;width:100%}.doc-cck-tab--selected{color:var(--cck-doc-color-font-1)}.doc-cck-tab--unselected{color:var(--cck-doc-color-font-2)}.doc-cck-tab .doc-cck-svg-icon{fill:currentcolor}.doc-cck-tabs__color--default .doc-cck-tab__indicator{background-color:var(--cck-doc-color-bg-1)}.doc-cck-tabs__color--h-contrast .doc-cck-tab__indicator{background-color:var(--cck-doc-color-bg-2)}.doc-cck-tab-label{position:relative;z-index:1}
\ No newline at end of file
+:where(.cck-theme-storybook-addon__local-style--default),:where([data-cck-theme*=storybook-addon__local-style--default]){--cck-doc-display-2xl-regular:400 72px/90px Inter;--cck-doc-display-2xl-light:300 72px/90px Inter;--cck-doc-display-2xl-medium:500 72px/90px Inter;--cck-doc-display-2xl-semibold:600 72px/90px Inter;--cck-doc-display-2xl-bold:700 72px/90px Inter;--cck-doc-display-xl-light:300 60px/72px Inter;--cck-doc-display-xl-regular:400 60px/72px Inter;--cck-doc-display-xl-medium:500 60px/72px Inter;--cck-doc-display-xl-semibold:600 60px/72px Inter;--cck-doc-display-xl-bold:700 60px/72px Inter;--cck-doc-display-lg-light:300 48px/64px Inter;--cck-doc-display-lg-regular:400 48px/64px Inter;--cck-doc-display-lg-medium:500 48px/64px Inter;--cck-doc-display-lg-semibold:600 48px/64px Inter;--cck-doc-display-lg-bold:700 48px/64px Inter;--cck-doc-display-md-light:300 36px/60px Inter;--cck-doc-display-md-regular:400 36px/60px Inter;--cck-doc-display-md-medium:500 36px/60px Inter;--cck-doc-display-md-semibold:600 36px/60px Inter;--cck-doc-display-md-bold:700 36px/60px Inter;--cck-doc-display-sm-light:300 30px/44px Inter;--cck-doc-display-sm-regular:400 30px/44px Inter;--cck-doc-display-sm-medium:500 30px/44px Inter;--cck-doc-display-sm-semibold:600 30px/44px Inter;--cck-doc-display-sm-bold:700 30px/44px Inter;--cck-doc-display-xs-light:300 24px/38px Inter;--cck-doc-display-xs-regular:400 24px/38px Inter;--cck-doc-display-xs-medium:500 24px/38px Inter;--cck-doc-display-xs-semibold:600 24px/38px Inter;--cck-doc-display-xs-bold:700 24px/38px Inter;--cck-doc-text-xl-light:300 20px/32px Inter;--cck-doc-text-xl-regular:400 20px/32px Inter;--cck-doc-text-xl-medium:500 20px/32px Inter;--cck-doc-text-xl-semibold:600 20px/32px Inter;--cck-doc-text-xl-bold:700 20px/32px Inter;--cck-doc-text-lg-light:300 18px/30px Inter;--cck-doc-text-lg-regular:400 18px/30px Inter;--cck-doc-text-lg-medium:500 18px/30px Inter;--cck-doc-text-lg-semibold:600 18px/30px Inter;--cck-doc-text-lg-bold:700 18px/30px Inter;--cck-doc-text-md-light:300 16px/28px Inter;--cck-doc-text-md-regular:400 16px/28px Inter;--cck-doc-text-md-medium:500 16px/28px Inter;--cck-doc-text-md-semibold:600 16px/28px Inter;--cck-doc-text-md-bold:700 16px/28px Inter;--cck-doc-text-sm-light:300 14px/24px Inter;--cck-doc-text-sm-regular:400 14px/24px Inter;--cck-doc-text-sm-medium:500 14px/24px Inter;--cck-doc-text-sm-semibold:600 14px/24px Inter;--cck-doc-text-sm-bold:700 14px/24px Inter;--cck-doc-text-xs-light:300 12px/20px Inter;--cck-doc-text-xs-regular:400 12px/20px Inter;--cck-doc-text-xs-medium:500 12px/20px Inter;--cck-doc-text-xs-semibold:600 12px/20px Inter;--cck-doc-text-xs-bold:700 12px/20px Inter}:where(.cck-theme-storybook-addon__color--dark),:where([data-cck-theme*=storybook-addon__color--dark]){--cck-doc-color-brand-default:var(--cck-doc-ocean-green-500);--cck-doc-color-bg-0:var(--cck-doc-black-50);--cck-doc-color-bg-1:var(--cck-doc-black-100);--cck-doc-color-bg-2:var(--cck-doc-black-200);--cck-doc-color-bg-3:var(--cck-doc-black-300);--cck-doc-color-bg-4:var(--cck-doc-black-400);--cck-doc-color-bg-5:var(--cck-doc-black-500);--cck-doc-color-bg-alpha-1:var(--cck-doc-black-alpha-1);--cck-doc-color-bg-alpha-2:var(--cck-doc-black-alpha-3);--cck-doc-color-bg-alpha-3:var(--cck-doc-black-alpha-4);--cck-doc-color-bg-alpha-4:var(--cck-doc-black-alpha-5);--cck-doc-color-bg-alpha-5:var(--cck-doc-black-alpha-6);--cck-doc-color-bg-hover-1:var(--cck-doc-color-bg-3);--cck-doc-color-bg-hover-2:var(--cck-doc-color-bg-2);--cck-doc-color-bg-hover-3:var(--cck-doc-ocean-green-900);--cck-doc-color-bg-selected-1:var(--cck-doc-ocean-green-950);--cck-doc-color-bg-selected-2:var(--cck-doc-ocean-green-900);--cck-doc-color-border-1:var(--cck-doc-white-alpha-2);--cck-doc-color-border-2:var(--cck-doc-white-alpha-4);--cck-doc-color-border-3:var(--cck-doc-white-alpha-5);--cck-doc-color-font-1:var(--cck-doc-white-50);--cck-doc-color-font-2:#ccc;--cck-doc-color-font-3:#999;--cck-doc-color-font-4:#666;--cck-doc-color-font-5:#333;--cck-doc-color-font-alpha-1:var(--cck-doc-white-50);--cck-doc-color-font-alpha-2:var(--cck-doc-white-alpha-8);--cck-doc-color-font-alpha-3:var(--cck-doc-white-alpha-7);--cck-doc-color-font-alpha-4:var(--cck-doc-white-alpha-6);--cck-doc-color-font-alpha-5:var(--cck-doc-white-alpha-5);--cck-doc-color-main-effect-primary-start:#1bbf82cc;--cck-doc-color-main-effect-primary-end:#1bbf8299;--cck-doc-color-main-effect-surface-start:#0f111600;--cck-doc-color-main-effect-surface-end:#0f1116;--cck-doc-color-main-effect-box-start:#ffffff14;--cck-doc-color-main-effect-box-end:#ffffff00}:where(.cck-theme-storybook-addon__color--light),:where([data-cck-theme*=storybook-addon__color--light]){--cck-doc-color-brand-default:var(--cck-doc-see-green-500);--cck-doc-color-bg-0:var(--cck-doc-white-50);--cck-doc-color-bg-1:var(--cck-doc-white-50);--cck-doc-color-bg-2:var(--cck-doc-white-50);--cck-doc-color-bg-3:var(--cck-doc-white-100);--cck-doc-color-bg-4:var(--cck-doc-white-300);--cck-doc-color-bg-5:var(--cck-doc-white-400);--cck-doc-color-bg-alpha-1:var(--cck-doc-white-alpha-1);--cck-doc-color-bg-alpha-2:var(--cck-doc-white-alpha-3);--cck-doc-color-bg-alpha-3:var(--cck-doc-white-alpha-4);--cck-doc-color-bg-alpha-4:var(--cck-doc-white-alpha-5);--cck-doc-color-bg-alpha-5:var(--cck-doc-white-alpha-6);--cck-doc-color-bg-hover-1:var(--cck-doc-color-bg-3);--cck-doc-color-bg-hover-2:var(--cck-doc-color-bg-3);--cck-doc-color-bg-hover-3:var(--cck-doc-ocean-green-200);--cck-doc-color-bg-selected-1:var(--cck-doc-ocean-green-100);--cck-doc-color-bg-selected-2:var(--cck-doc-ocean-green-200);--cck-doc-color-border-1:var(--cck-doc-black-alpha-2);--cck-doc-color-border-2:var(--cck-doc-black-alpha-4);--cck-doc-color-border-3:var(--cck-doc-black-alpha-5);--cck-doc-color-font-1:var(--cck-doc-black-50);--cck-doc-color-font-2:#333d4a;--cck-doc-color-font-3:#666d77;--cck-doc-color-font-4:#999ea5;--cck-doc-color-font-5:#ccced2;--cck-doc-color-font-alpha-1:var(--cck-doc-black-50);--cck-doc-color-font-alpha-2:var(--cck-doc-black-alpha-8);--cck-doc-color-font-alpha-3:var(--cck-doc-black-alpha-7);--cck-doc-color-font-alpha-4:var(--cck-doc-black-alpha-6);--cck-doc-color-font-alpha-5:var(--cck-doc-black-alpha-5);--cck-doc-color-main-effect-primary-start:#008d5ecc;--cck-doc-color-main-effect-primary-end:#008d5e99;--cck-doc-color-main-effect-surface-start:#ffffff00;--cck-doc-color-main-effect-surface-end:#fff;--cck-doc-color-main-effect-box-start:#0f111614;--cck-doc-color-main-effect-box-end:#0f111600}:where(.cck-theme-storybook-addon__size--default),:where([data-cck-theme*=storybook-addon__size--default]){--cck-doc-radius-xs:2px;--cck-doc-radius-sm:4px;--cck-doc-radius-md:8px;--cck-doc-radius-lg:12px;--cck-doc-radius-xl:16px}:where(.cck-theme-storybook-addon__color-palette--default),:where([data-cck-theme*=storybook-addon__color-palette--default]){--cck-doc-ocean-green-50:#f0fdf7;--cck-doc-ocean-green-100:#d4fcec;--cck-doc-ocean-green-200:#aaf7da;--cck-doc-ocean-green-300:#72edc0;--cck-doc-ocean-green-400:#3cd9a0;--cck-doc-ocean-green-500:#1bbf82;--cck-doc-ocean-green-600:#129c69;--cck-doc-ocean-green-700:#127b56;--cck-doc-ocean-green-800:#146247;--cck-doc-ocean-green-900:#14513c;--cck-doc-ocean-green-950:#012c1e;--cck-doc-see-green-50:#effffa;--cck-doc-see-green-100:#a1ffe0;--cck-doc-see-green-200:#52ffc5;--cck-doc-see-green-300:#00ef9f;--cck-doc-see-green-400:#00b478;--cck-doc-see-green-500:#008d5e;--cck-doc-see-green-600:#007951;--cck-doc-see-green-700:#064;--cck-doc-see-green-800:#005237;--cck-doc-see-green-900:#003f2a;--cck-doc-see-green-950:#002b1d;--cck-doc-black-50:#00060f;--cck-doc-black-100:#0f1116;--cck-doc-black-200:#15171e;--cck-doc-black-300:#191b23;--cck-doc-black-400:#222835;--cck-doc-black-500:#494f60;--cck-doc-white-50:#fff;--cck-doc-white-100:#f5f5f5;--cck-doc-white-200:#ececef;--cck-doc-white-300:#e3e3e8;--cck-doc-white-400:#d1d5e1;--cck-doc-white-500:#c1c7d7;--cck-doc-white-alpha-0:#ffffff05;--cck-doc-white-alpha-1:#ffffff0a;--cck-doc-white-alpha-2:#ffffff0f;--cck-doc-white-alpha-3:#ffffff14;--cck-doc-white-alpha-4:#ffffff1a;--cck-doc-white-alpha-5:#ffffff33;--cck-doc-white-alpha-6:#ffffff66;--cck-doc-white-alpha-7:#ffffff99;--cck-doc-white-alpha-8:#ffffffcc;--cck-doc-white-alpha-9:#ffffffe5;--cck-doc-white-alpha-10:#fff;--cck-doc-black-alpha-0:#000c1d05;--cck-doc-black-alpha-1:#000c1d0a;--cck-doc-black-alpha-2:#000c1d0f;--cck-doc-black-alpha-3:#000c1d14;--cck-doc-black-alpha-4:#000c1d1a;--cck-doc-black-alpha-5:#000c1d33;--cck-doc-black-alpha-6:#000c1d66;--cck-doc-black-alpha-7:#000c1d99;--cck-doc-black-alpha-8:#000c1dcc;--cck-doc-black-alpha-9:#000c1de5;--cck-doc-black-alpha-10:#000c1d}.cck-theme-storybook-addon--remove-toolbar main .sb-bar{display:none}#root>div:first-child>div:nth-child(2){border:1px solid var(--cck-doc-color-border-2)}#root>div:first-child>div:nth-child(2)>div:first-child,#root>div:first-child>div:nth-child(3)>.sb-bar{display:none}.sidebar-container>div:first-child>div:first-of-type>div:first-child>div:first-child{padding:12px 24px}.sidebar-header>div:first-of-type>a:first-child>img{max-width:180px!important;width:180px}.sidebar-header>div:first-of-type{margin-right:0}.sidebar-header>div:nth-child(3){display:none}.search-field{background-color:var(--cck-doc-color-bg-2);border:1px solid var(--cck-doc-color-border-1);gap:8px;height:36px!important;padding:4px!important}.search-field+div{display:none}.search-field>div:first-child{color:var(--cck-doc-color-font-2);flex:none;margin-left:4px}.search-field>input:nth-child(2)::-moz-placeholder{color:var(--cck-doc-color-font-4)}.search-field>input:nth-child(2)::placeholder{color:var(--cck-doc-color-font-4)}.search-field>code:nth-child(3){display:none}.sidebar-subheading{margin-top:0!important}.sidebar-item+.sidebar-subheading{margin-top:24px!important}.sidebar-subheading>button:first-of-type{height:auto;padding:0;width:100%}.sidebar-subheading>button:first-of-type:hover{background-color:unset}.sidebar-subheading>button:first-of-type>div:first-child{display:none}.sidebar-subheading>button:nth-of-type(2){display:none!important}.sidebar-item:hover,.sidebar-item[data-selected=true]{background-color:unset!important}.sidebar-item>button:first-of-type{padding:0}.sidebar-item>button:first-of-type>div:first-of-type{display:none}.sidebar-item>a:first-of-type{padding:0}.sidebar-item>a:first-of-type>div:first-of-type,.sidebar-item>a:nth-of-type(2){display:none}.sbdocs.sbdocs-wrapper{background:transparent;padding:0}.sbdocs.sbdocs-content{max-width:unset}h1{font:var(--cck-doc-display-sm-semibold);margin:0 0 28px}h1,h2{color:var(--cck-doc-color-font-1)}h2{font:var(--cck-doc-text-xl-medium);margin:36px 0 24px}h3{font:var(--cck-doc-text-lg-medium)}h3,h4{color:var(--cck-doc-color-font-1);margin:12px 0}h4{font:var(--cck-doc-text-md-medium)}h5{font:var(--cck-doc-text-sm-medium)}h5,h6{color:var(--cck-doc-color-font-1);margin:12px 0}h6{font:var(--cck-doc-text-xs-medium)}p{margin:0 0 16px}ol,p,ul{color:var(--cck-doc-color-font-2);font:var(--cck-doc-text-sm-regular)}ol,ul{margin-top:12px}li{margin:0 0 16px}pre{margin:28px 0}strong{font-weight:600}hr{background-color:var(--cck-doc-color-border-1);border:none;height:1px;margin:48px 0}.cck-theme-storybook-addon code,code{background-color:var(--cck-doc-color-bg-3);border:1px solid var(--cck-doc-color-border-1);border-radius:4px;color:inherit;display:inline-block;font:inherit;margin:0 2px;padding:0 6px}.cck-theme-storybook-addon a,a{color:var(--cck-doc-color-brand-default);font:inherit}.arg-type-table-wrapper{overflow-x:auto;width:100%}.arg-type-table{align-self:flex-start;border:1px solid var(--cck-doc-color-border-1);border-radius:var(--cck-doc-radius-sm);border-spacing:0;margin-bottom:48px}.arg-type-table--gap-8{display:flex;flex-wrap:wrap;gap:8px}.arg-type-table--no-wrap{white-space:nowrap}.arg-type-table.arg-type-table--full-width{min-width:100%}.arg-type-table .description-column{min-width:300px}.arg-type-table p{color:inherit;font:inherit;margin-bottom:0}.arg-type-table tr{color:var(--cck-doc-color-font-1);font:var(--cck-doc-text-sm-medium);padding:12px 24px}.arg-type-table tr:hover{background-color:var(--cck-doc-color-bg-3)}.arg-type-table td{border-top:1px solid var(--cck-doc-color-border-1);color:var(--cck-doc-color-font-3);font:var(--cck-doc-text-sm-regular);padding:12px 24px}.arg-type-table td:first-child{color:var(--cck-doc-color-font-1);font:var(--cck-doc-text-sm-medium);white-space:nowrap}.arg-type-table td code{color:var(--cck-doc-color-font-2);font:var(--cck-doc-text-sm-regular);padding:0 6px;white-space:nowrap}.arg-type-table td code.wrap{white-space:normal}.arg-type-table th{color:var(--cck-doc-color-font-1);font:var(--cck-doc-text-sm-medium);padding:12px 24px;text-align:left}.collection-modes-selector-table{align-self:flex-start;border:1px solid var(--cck-doc-color-border-2);border-radius:6px;border-spacing:0;min-width:100%}.collection-modes-selector-table p{color:inherit;font:inherit;margin-bottom:0}.collection-modes-selector-table tr{color:var(--cck-doc-color-font-1);font:var(--cck-doc-text-sm-medium);padding:12px 24px}.collection-modes-selector-table td{border-top:1px solid var(--cck-doc-color-border-2);color:var(--cck-doc-color-font-3);font:var(--cck-doc-text-sm-regular);padding:8px 24px}.collection-modes-selector-table td.collection-modes-selector-table__header-cell{border-right:1px solid var(--cck-doc-color-border-2);color:var(--cck-doc-color-font-1);font:var(--cck-doc-text-sm-medium);white-space:nowrap}.collection-modes-selector-table td code{font:var(--cck-doc-text-xs-regular);padding:0 6px;white-space:break-spaces}.collection-modes-selector-table td ul{padding:0 16px}.collection-modes-selector-table td li+li{margin-bottom:0}.collection-modes-selector-table th{color:var(--cck-doc-color-font-1);font:var(--cck-doc-text-sm-medium);padding:12px 24px;text-align:left;white-space:nowrap}.story-decorator-wrapper{align-items:center;display:flex;flex-wrap:wrap;gap:24px;justify-content:center}.story-decorator-wrapper__row{flex-direction:row}.story-decorator-wrapper__column{flex-direction:column}.story-decorator-wrapper__inside-box{background-color:var(--cck-doc-color-bg-1);border:1px solid var(--cck-doc-color-border-2);border-radius:var(--cck-doc-radius-md);padding:12px 24px}.theme-addon-mdx-page table{margin-bottom:24px}.cck-theme-storybook-addon__color--light .theme-addon-mdx-page{--cck-doc-theme-addon-prismjs-green-1:green;--cck-doc-theme-addon-prismjs-red-1:#a31515;--cck-doc-theme-addon-prismjs-red-2:#9a050f;--cck-doc-theme-addon-prismjs-red-3:maroon;--cck-doc-theme-addon-prismjs-red-4:red;--cck-doc-theme-addon-prismjs-gray-1:#393a34;--cck-doc-theme-addon-prismjs-cyan-1:#36acaa;--cck-doc-theme-addon-prismjs-cyan-2:#2b91af;--cck-doc-theme-addon-prismjs-blue-1:#00f;--cck-doc-theme-addon-prismjs-blue-2:#00009f;--cck-doc-theme-addon-prismjs-unset:#2e3438}.cck-theme-storybook-addon__color--dark .theme-addon-mdx-page{--cck-doc-theme-addon-prismjs-green-1:#7c7c7c;--cck-doc-theme-addon-prismjs-red-1:#92c379;--cck-doc-theme-addon-prismjs-red-2:#9a050f;--cck-doc-theme-addon-prismjs-red-3:#a8ff60;--cck-doc-theme-addon-prismjs-red-4:#96cbfe;--cck-doc-theme-addon-prismjs-gray-1:#ededed;--cck-doc-theme-addon-prismjs-cyan-1:#c6c5fe;--cck-doc-theme-addon-prismjs-cyan-2:#ffffb6;--cck-doc-theme-addon-prismjs-blue-1:#b474dd;--cck-doc-theme-addon-prismjs-blue-2:#00009f;--cck-doc-theme-addon-prismjs-unset:#babed8}.theme-addon-mdx-page pre{margin:0}.theme-addon-mdx-page pre .docblock-source{background-color:var(--cck-doc-color-bg-3);border:1px solid var(--cck-doc-color-border-1);border-radius:var(--cck-doc-radius-md);box-shadow:none;color:var(--color-storybook-source-unset);margin:0 0 24px}.theme-addon-mdx-page pre .docblock-source>div:nth-child(2){display:none}.theme-addon-mdx-page pre.prismjs{color:var(--cck-doc-color-font-1);padding:12px}.theme-addon-mdx-page pre .token.string{color:var(--cck-doc-theme-addon-prismjs-red-1)}.theme-addon-mdx-page pre .token.deleted{color:var(--cck-doc-theme-addon-prismjs-red-2)}.theme-addon-mdx-page pre .token.selector,.theme-addon-mdx-page pre .token.tag{color:var(--cck-doc-theme-addon-prismjs-red-3)}.theme-addon-mdx-page pre .token.attr-name,.theme-addon-mdx-page pre .token.entity,.theme-addon-mdx-page pre .token.property,.theme-addon-mdx-page pre .token.regex{color:var(--cck-doc-theme-addon-prismjs-red-4)}.theme-addon-mdx-page pre .token.cdata,.theme-addon-mdx-page pre .token.comment,.theme-addon-mdx-page pre .token.doctype,.theme-addon-mdx-page pre .token.prolog{color:var(--cck-doc-theme-addon-prismjs-green-1)}.theme-addon-mdx-page pre .token.boolean,.theme-addon-mdx-page pre .token.constant,.theme-addon-mdx-page pre .token.inserted,.theme-addon-mdx-page pre .token.number,.theme-addon-mdx-page pre .token.symbol,.theme-addon-mdx-page pre .token.url,.theme-addon-mdx-page pre .token.variable{color:var(--cck-doc-theme-addon-prismjs-cyan-1)}.theme-addon-mdx-page pre .token.class-name{color:var(--cck-doc-theme-addon-prismjs-cyan-2)}.theme-addon-mdx-page pre .token.atrule,.theme-addon-mdx-page pre .token.attr-value,.theme-addon-mdx-page pre .token.keyword{color:var(--cck-doc-theme-addon-prismjs-blue-1)}.theme-addon-mdx-page pre .token.function,.theme-addon-mdx-page pre .token.operator,.theme-addon-mdx-page pre .token.punctuation{color:var(--cck-doc-theme-addon-prismjs-gray-1)}.theme-addon-mdx-page pre .token.cdata,.theme-addon-mdx-page pre .token.comment,.theme-addon-mdx-page pre .token.doctype,.theme-addon-mdx-page pre .token.italic,.theme-addon-mdx-page pre .token.prolog{font-style:italic}.theme-addon-mdx-page pre .token.bold,.theme-addon-mdx-page pre .token.important{font-weight:700}.cck-doc-story__radio-selection-group{display:flex;gap:8px;justify-content:center}.cck-doc-story__radio-selection{align-items:center;border:1px solid var(--cck-doc-color-border-3);border-radius:50%;color:var(--cck-doc-color-font-1);cursor:pointer;display:flex;font:var(--cck-doc-text-sm-light);height:32px;justify-content:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:32px}.cck-doc-story__radio-selection--selected{background-color:var(--cck-doc-color-bg-selected-2)}.cck-doc-story__button--basic{align-items:center;background-color:transparent;border:none;border-radius:var(--cck-doc-radius-sm);box-sizing:border-box;color:var(--cck-doc-color-font-1);cursor:pointer;display:flex;font:var(--cck-doc-text-sm-medium);gap:8px;height:40px;justify-content:center;margin:0;min-width:80px;outline:transparent;padding:0 16px}.cck-doc-story__button--basic:hover{background-color:var(--cck-doc-color-bg-hover-2)}.cck-doc-story__header{width:100%}.doc-cck-button{align-items:center;border:none;border-radius:var(--cck-doc-radius-sm);box-sizing:border-box;cursor:pointer;display:flex;font:var(--cck-doc-text-sm-medium);justify-content:center;margin:0;min-width:80px;outline:transparent}.doc-cck-button__backdrop{display:none}.doc-cck-button__size--sm{gap:8px;height:32px;padding:0 12px 0 8px}.doc-cck-button__size--sm:has(.doc-cck-svg-icon:first-child){padding:0 12px 0 4px}.doc-cck-button__size--md{gap:8px;height:40px;padding:0 12px}.doc-cck-button__size--md:has(.doc-cck-svg-icon:first-child){padding:0 16px 0 8px}.doc-cck-button__basic{background-color:transparent;color:var(--cck-doc-color-font-1)}.doc-cck-button__basic .doc-cck-svg-icon{fill:var(--cck-doc-color-font-1)}.doc-cck-button__basic:hover{background-color:var(--cck-doc-color-bg-hover-2)}.doc-cck-button__light{background-color:var(--cck-doc-color-bg-selected-1);color:var(--cck-doc-color-font-1)}.doc-cck-button__light:hover{background-color:var(--cck-doc-color-bg-hover-3)}.doc-cck-button__light .doc-cck-svg-icon{fill:var(--cck-doc-color-font-1)}.doc-cck-button__outline{background-color:var(--cck-doc-color-bg-1);border:1px solid var(--cck-doc-ocean-green-600);color:var(--cck-doc-ocean-green-600)}.doc-cck-button__outline:hover{background-color:var(--cck-doc-color-bg-hover-2)}.doc-cck-button__outline .doc-cck-svg-icon{fill:var(--cck-doc-ocean-green-600)}body,html{margin:0;padding:0}*{box-sizing:border-box}.doc-cck-form-field{align-items:flex-start;display:flex;flex-direction:column;gap:4px}.doc-cck-form-field .doc-cck-select{flex:1;height:100%;width:100%}.doc-cck-form-field .doc-cck-input{flex:1;width:100%}.doc-cck-form-field--disabled{opacity:.5}.doc-cck-form-field__wrapper{align-items:stretch;display:flex;flex-direction:row;height:40px;width:100%}.doc-cck-form-field__feedback-wrapper{display:flex;flex-direction:column;overflow:hidden}.doc-cck-form-field__feedback-wrapper:empty{display:none}.doc-cck-form-field__input-wrapper{align-items:center;background-color:var(--cck-doc-color-bg-1);border:1px solid var(--cck-doc-color-border-2);border-radius:var(--cck-doc-radius-sm);display:flex;flex:1;flex-direction:row;min-width:0;padding:8px 12px}.doc-cck-form-field__input-wrapper:hover{background-color:var(--cck-doc-color-bg-hover-2)}.doc-cck-form-field--focused .doc-cck-form-field__input-wrapper{background-color:var(--cck-doc-color-bg-1);border:1px solid var(--cck-doc-color-brand-default);box-shadow:inset 0 0 0 1px var(--cck-doc-color-brand-default)}.doc-cck-svg-icon{align-items:center;display:flex;flex-shrink:0;height:24px;justify-content:center;width:24px;fill:var(--cck-doc-color-font-4)}.doc-cck-svg-icon__svg{height:100%;width:100%}.doc-cck-icon-button{align-items:center;background-color:transparent;border:none;border-radius:50%;box-sizing:border-box;color:var(--cck-doc-color-font-3);cursor:pointer;display:flex;font:var(--cck-doc-text-sm-medium);justify-content:center;margin:0;outline:transparent;transition:background-color .15s}.doc-cck-icon-button .doc-cck-svg-icon{fill:currentcolor;transition:color .15s}.doc-cck-icon-button:hover{background-color:var(--cck-doc-color-bg-hover-1);color:var(--cck-doc-color-font-2)}.doc-cck-icon-button__backdrop{display:none}.doc-cck-icon-button__size--sm{height:32px;width:32px}.doc-cck-icon-button__size--md{height:40px;width:40px}.doc-cck-icon-button__outline{border:1px solid var(--cck-doc-color-border-2)}.doc-cck-input{background-color:transparent;border:none;color:var(--cck-doc-color-font-1);font:var(--cck-doc-text-sm-regular);outline:none;text-overflow:ellipsis}.doc-cck-input::-moz-placeholder{color:var(--cck-doc-color-font-4)}.doc-cck-input::placeholder{color:var(--cck-doc-color-font-4)}.doc-cck-option{align-items:center;border-radius:6px;color:var(--cck-doc-color-font-1);cursor:pointer;display:flex;font:var(--cck-doc-text-sm-regular);gap:8px;height:40px;padding:0 12px}.doc-cck-option:hover{background-color:var(--cck-doc-color-bg-hover-1)}.doc-cck-option .doc-cck-checkbox__input-wrapper{height:16px;width:16px}.doc-cck-option .doc-cck-option --single.doc-cck-option --selected{font:var(--cck-doc-text-sm-medium)}.doc-cck-option__content-wrapper{align-items:center;display:flex;flex:1}.doc-cck-option__selected-checkmark .doc-cck-svg-icon{height:20px;width:20px}.doc-cck-radio-button__wrapper{align-items:center;cursor:pointer;display:inline-flex;vertical-align:middle}.doc-cck-radio-button__input-wrapper{align-items:center;box-sizing:content-box;cursor:pointer;display:inline-block;flex:0 0 auto;height:16px;justify-content:center;position:relative;width:16px;will-change:opacity,transform,border-color,color}.doc-cck-radio-button__input{cursor:inherit;height:100%;left:0;margin:0;opacity:0;padding:0;position:absolute;right:0;top:0;width:100%;z-index:1}.doc-cck-radio-button__backdrop{display:none}.doc-cck-radio-button__background{box-sizing:border-box;height:100%;position:relative;width:100%}.doc-cck-radio-button__background--outer-circle{border-color:var(--cck-doc-color-font-1);border-radius:50%;border-style:solid;border-width:1px;box-sizing:border-box;height:100%;left:0;position:absolute;top:0;transition:border-color 90ms cubic-bezier(0,0,.2,1);width:100%}.doc-cck-radio-button__background--inner-circle{border-radius:50%;box-sizing:border-box;height:100%;left:0;position:absolute;top:0;transform:scale(0);transition:transform 90ms cubic-bezier(.4,0,.6,1),background-color 90ms cubic-bezier(.4,0,.6,1);width:100%}.doc-cck-radio-button--checked .doc-cck-radio-button__background--outer-circle{border-color:var(--cck-doc-color-brand-default);border-width:2px}.doc-cck-radio-button--checked .doc-cck-radio-button__background--inner-circle{background-color:var(--cck-doc-color-brand-default);transform:scale(.5);transition:transform 90ms cubic-bezier(0,0,.2,1),border-color 90ms cubic-bezier(0,0,.2,1)}.doc-cck-radio-button--checked .doc-cck-radio-button__label{color:var(--cck-doc-color-brand-default)}.doc-cck-radio-button__label{color:var(--cck-doc-color-font-1);cursor:pointer;font:var(--cck-doc-text-md-regular);margin-left:0;margin-right:auto;order:0;padding-left:8px;padding-right:0;white-space:nowrap}.doc-cck-radio-group{align-items:flex-start;display:flex}.doc-cck-radio-group__row{flex-direction:row;gap:12px}.doc-cck-radio-group__column{flex-direction:column}.doc-cck-select{align-items:center;border-radius:6px;color:var(--cck-doc-color-font-1);cursor:pointer;display:flex;font:var(--cck-doc-text-sm-regular)}.doc-cck-select__placeholder{color:var(--cck-doc-color-font-4)}.doc-cck-select__trigger-wrapper{color:currentcolor;flex:1;overflow:hidden;padding-right:8px;text-align:start}.doc-cck-select__trigger-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.doc-cck-select__overlay .doc-cck-overlay__backdrop{background-color:transparent}.doc-cck-select__dropdown-icon-wrapper .doc-cck-svg-icon{height:24px;width:24px}.doc-cck-select__options-wrapper{background-color:var(--cck-doc-color-bg-1);border:1px solid var(--cck-doc-color-border-2);border-radius:var(--cck-doc-radius-sm);height:inherit;margin-top:6px;max-height:inherit;overflow:auto;padding:4px}.doc-cck-toggle{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.doc-cck-toggle__label{align-items:center;color:var(--cck-doc-color-font-1);cursor:pointer;display:flex;font:var(--cck-doc-text-md-regular);gap:8px;white-space:nowrap}.doc-cck-toggle--label-before .doc-cck-toggle__label{flex-direction:row-reverse}.doc-cck-toggle__input{cursor:pointer;height:100%;margin:0;opacity:0;padding:0;position:relative;width:100%;z-index:3}.doc-cck-toggle__slider-wrapper{height:20px;position:relative;width:32px}.doc-cck-toggle__thumb{background-color:var(--cck-doc-color-bg-1);border-radius:50%;height:16px;position:absolute;transition:all .3s ease;width:16px;z-index:2}.doc-cck-toggle__backdrop{border-radius:500px;height:100%;left:0;position:absolute;top:0;transition:background-color .3s ease;width:100%;z-index:1}.doc-cck-toggle--checked .doc-cck-toggle__thumb{left:100%;top:50%;transform:translate(calc(-100% - 2px),-50%)}.doc-cck-toggle--checked .doc-cck-toggle__backdrop{background-color:var(--cck-doc-color-brand-default)}.doc-cck-toggle--unchecked .doc-cck-toggle__thumb{left:0;top:50%;transform:translate(2px,-50%)}.doc-cck-toggle--unchecked .doc-cck-toggle__backdrop{background-color:var(--cck-doc-color-bg-4)}.doc-cck-overlay__backdrop{background-color:rgba(0,0,0,.5)}.doc-cck-tabs{display:flex;flex-direction:column;gap:12px}.doc-cck-tabs__headers-wrapper{align-items:center;align-self:flex-start;border-radius:var(--cck-doc-radius-sm);display:flex;flex-wrap:wrap;gap:8px;min-height:40px;padding:4px}.doc-cck-tabs__size--fit .doc-cck-tabs__headers-wrapper{width:100%}.doc-cck-tabs__color--default .doc-cck-tabs__headers-wrapper{background-color:var(--cck-doc-color-bg-3)}.doc-cck-tabs__color--h-contrast .doc-cck-tabs__headers-wrapper{background-color:var(--cck-doc-color-bg-4)}.doc-cck-tab{align-items:center;background:transparent;border:none;border-radius:var(--cck-doc-radius-sm);cursor:pointer;display:flex;font:var(--cck-doc-text-sm-medium);height:32px;justify-content:center;outline:none;padding:4px 12px;position:relative}.doc-cck-tabs__size--fit .doc-cck-tab{flex:1;padding:4px 0}.doc-cck-tab__indicator{border-radius:var(--cck-doc-radius-sm);height:100%;left:0;position:absolute;top:0;width:100%}.doc-cck-tab--selected{color:var(--cck-doc-color-font-1)}.doc-cck-tab--unselected{color:var(--cck-doc-color-font-2)}.doc-cck-tab .doc-cck-svg-icon{fill:currentcolor}.doc-cck-tabs__color--default .doc-cck-tab__indicator{background-color:var(--cck-doc-color-bg-1)}.doc-cck-tabs__color--h-contrast .doc-cck-tab__indicator{background-color:var(--cck-doc-color-bg-2)}.doc-cck-tab__label{position:relative;z-index:1}
\ No newline at end of file
diff --git a/packages/internal/storybook-addon-theme/src/lib/features/mdx-page/mdx-page-tab-code.tsx b/packages/internal/storybook-addon-theme/src/lib/features/mdx-page/mdx-page-tab-code.tsx
index c8c62cdc..64b1a2b6 100644
--- a/packages/internal/storybook-addon-theme/src/lib/features/mdx-page/mdx-page-tab-code.tsx
+++ b/packages/internal/storybook-addon-theme/src/lib/features/mdx-page/mdx-page-tab-code.tsx
@@ -1,7 +1,7 @@
 import { Markdown } from '@storybook/addon-docs';
 import { SupportedLanguage } from '@storybook/components';
 
-import { TabOld, TabsOld } from '@cocokits/react-tabs-old';
+import { Tab, Tabs } from '@cocokits/react-tabs';
 
 interface MdxPageTabCodeProps {
   codeTabs: { [key: string]: string };
@@ -10,12 +10,12 @@ interface MdxPageTabCodeProps {
 
 export const MdxPageTabCode = ({ codeTabs, language = 'typescript' }: MdxPageTabCodeProps) => {
   return (
-    <TabsOld>
+    <Tabs>
       {Object.keys(codeTabs).map((tab) => (
-        <TabOld key={tab} label={tab} value={tab}>
+        <Tab key={tab} header={tab} value={tab}>
           <Markdown>{`\`\`\`${language}\n${codeTabs[tab]}\n\`\`\``}</Markdown>
-        </TabOld>
+        </Tab>
       ))}
-    </TabsOld>
+    </Tabs>
   );
 };
diff --git a/packages/internal/storybook-addon-theme/src/lib/features/story-control/story-control-icon.tsx b/packages/internal/storybook-addon-theme/src/lib/features/story-control/story-control-icon.tsx
index 9cecd323..e2eff506 100644
--- a/packages/internal/storybook-addon-theme/src/lib/features/story-control/story-control-icon.tsx
+++ b/packages/internal/storybook-addon-theme/src/lib/features/story-control/story-control-icon.tsx
@@ -1,6 +1,6 @@
 import { Icons } from '@cocokits/common-icons';
 import { SvgIcon } from '@cocokits/react-icon';
-import { TabLabelOld, TabOld, TabSelectionChangeEventOld, TabsOld } from '@cocokits/react-tabs-old';
+import { Tab, Tabs, TabSelectionChangeEvent } from '@cocokits/react-tabs';
 
 import { StoryControlChangeEvent } from './story-control.model';
 import { StyledControlLabel } from './story-control.style';
@@ -13,25 +13,18 @@ interface StoryControlIconProps {
 }
 
 export function StoryControlIcon({ control, selected, onChange }: StoryControlIconProps) {
-  const onIconChange = (e: TabSelectionChangeEventOld) => {
+  const onIconChange = (e: TabSelectionChangeEvent<string>) => {
     onChange({ [control.storyArgKey]: e.value });
   };
 
   return (
     <>
       <StyledControlLabel>{control.displayName}</StyledControlLabel>
-      <TabsOld color="h-contrast" size="fit" selectedValue={selected} onSelectionChange={onIconChange} hideContent={true}>
+      <Tabs color="h-contrast" size="fit" selected={selected} onSelectionChange={onIconChange} hideContent={true}>
         {control.icons.map((icon) => (
-          <TabOld
-            key={icon}
-            value={icon}
-            label={() => (
-              <TabLabelOld>
-                <SvgIcon icon={Icons[icon]} />
-              </TabLabelOld>
-            )}></TabOld>
+          <Tab key={icon} value={icon} header={() => <SvgIcon icon={Icons[icon]} />}></Tab>
         ))}
-      </TabsOld>
+      </Tabs>
     </>
   );
 }
diff --git a/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page-api.model.ts b/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page-api.model.ts
index cb24f08c..426593d7 100644
--- a/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page-api.model.ts
+++ b/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page-api.model.ts
@@ -2,6 +2,7 @@ import { UIBaseComponentsPropValue } from '@cocokits/core';
 
 export interface StoryDocPageArgTypes {
   componentName: string;
+  deception: string | undefined;
   argTypeGroup: StoryDocPageComponentArgTypeGroup | null;
 }
 
diff --git a/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page-api.tsx b/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page-api.tsx
index 7d3ee4e2..55c4b77e 100644
--- a/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page-api.tsx
+++ b/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page-api.tsx
@@ -15,6 +15,8 @@ export function StoryDocPageAPI({ argTypes, themeName, ngTemplateMD }: StoryDocP
   Mismatches between the theme of this document and your project can result in discrepancies in \`type\` definitions and \`default\` values,
   as themes may vary in their specifications.`;
 
+  console.log('StoryDocPageAPI argTypes:', argTypes);
+  
   return (
     <>
       <DocPageMarkdown>{description}</DocPageMarkdown>
@@ -27,7 +29,11 @@ export function StoryDocPageAPI({ argTypes, themeName, ngTemplateMD }: StoryDocP
             argType.argTypeGroup.methods?.length === 0);
 
         return (
-          <DocPageSection id={argType.componentName} title={argType.componentName} key={argType.componentName}>
+          <DocPageSection
+            id={argType.componentName}
+            title={argType.componentName}
+            description={argType.deception}
+            key={argType.componentName}>
             {isEmpty && <p>This components has no API configuration</p>}
 
             {argType.argTypeGroup?.props && argType.argTypeGroup?.props.length > 0 && (
diff --git a/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page-api.utils.ts b/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page-api.utils.ts
index 248e032f..444ad130 100644
--- a/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page-api.utils.ts
+++ b/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page-api.utils.ts
@@ -48,6 +48,7 @@ export function getArgTypesApiList(
 
   argTypeGroup.push({
     componentName: getStoryComponentName(mainComponent, preparedMeta.id),
+    deception: parameters.cckAddon.deception,
     argTypeGroup: getComponentArgTypes({
       componentRef: mainComponent,
       originalArgTypes: preparedMeta.argTypes,
@@ -78,6 +79,7 @@ export function getArgTypesApiList(
 
       argTypeGroup.push({
         componentName: name,
+        deception: parameters.cckAddon.subcomponents?.[name]?.description,
         argTypeGroup: getComponentArgTypes({
           componentRef: subcomponent,
           originalArgTypes: argTypes,
@@ -388,7 +390,7 @@ export function parseTypeDefinition(typeStrRaw: string): string[] {
     result.push(removeUnnecessaryParentheses(current.trim()));
   }
 
-  return result;
+  return result.map((type) => (type.startsWith("'") && type.endsWith("'") ? type.slice(1, -1) : type));
 }
 
 /**
diff --git a/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page.tsx b/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page.tsx
index 0ed6666c..71d8b9eb 100644
--- a/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page.tsx
+++ b/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page.tsx
@@ -3,7 +3,7 @@ import { useContext, useMemo, useState } from 'react';
 import styled from 'styled-components';
 
 import { getInstance } from '@cocokits/common-utils';
-import { TabOld, TabSelectionChangeEventOld,TabsOld } from '@cocokits/react-tabs-old';
+import { Tab, Tabs,TabSelectionChangeEvent } from '@cocokits/react-tabs';
 import { usePromise } from '@cocokits/react-utils';
 
 import { getApiProps, getOverviewProps, getStylingProps } from './story-doc-page.utils';
@@ -72,36 +72,35 @@ export function StoryDocPage() {
     return null;
   }
 
-  const onTabChange = (event: TabSelectionChangeEventOld) => {
-    const tabName = event.value as StoryTab;
-    getInstance(GlobalEvent).dispatch.docTabChange({ tabName });
-    setSelectedTab(tabName);
+  const onTabChange = (event: TabSelectionChangeEvent<StoryTab>) => {
+    getInstance(GlobalEvent).dispatch.docTabChange({ tabName: event.value });
+    setSelectedTab(event.value);
   };
 
   return (
     <DocPage breadcrumb={breadcrumb} title={title} tocItems={tocItemsMap[selectedTab]}>
-      <StyledTabs selectedValue={selectedTab} onSelectionChange={onTabChange}>
-        <TabOld label="Overview" value="Overview">
+      <StyledTabs selected={selectedTab} onSelectionChange={onTabChange}>
+        <Tab header="Overview" value="Overview">
           <StoryDocPageOverview {...overviewProps} />
-        </TabOld>
+        </Tab>
 
-        <TabOld label="API" value="API">
+        <Tab header="API" value="API">
           <StoryDocPageAPI {...apiProps} />
-        </TabOld>
+        </Tab>
 
-        <TabOld label="Styling" value="Styling">
+        <Tab header="Styling" value="Styling">
           <StoryDocPageStyling {...stylingProps} />
-        </TabOld>
+        </Tab>
 
-        <TabOld label="Examples" value="Examples">
+        <Tab header="Examples" value="Examples">
           <StoryDocPageExamples />
-        </TabOld>
+        </Tab>
       </StyledTabs>
     </DocPage>
   );
 }
 
-const StyledTabs = styled(TabsOld)`
+const StyledTabs = styled(Tabs<StoryTab>)`
   & .doc-cck-tabs__content-wrapper {
     margin-top: 28px;
   }
diff --git a/packages/internal/storybook-addon-theme/src/lib/features/token-dictionary/token-dictionary.tsx b/packages/internal/storybook-addon-theme/src/lib/features/token-dictionary/token-dictionary.tsx
index 7e63b59d..5dc17509 100644
--- a/packages/internal/storybook-addon-theme/src/lib/features/token-dictionary/token-dictionary.tsx
+++ b/packages/internal/storybook-addon-theme/src/lib/features/token-dictionary/token-dictionary.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import { getInstance, recordReduceMerge } from '@cocokits/common-utils';
 import { TokenId } from '@cocokits/core';
-import { TabOld, TabSelectionChangeEventOld,TabsOld } from '@cocokits/react-tabs-old';
+import { Tab, Tabs,TabSelectionChangeEvent } from '@cocokits/react-tabs';
 
 import { getTokenList } from './token-dictionary.utils';
 import { TokenDictionaryValue } from './token-dictionary-value';
@@ -36,7 +36,7 @@ export function TokenDictionary() {
     });
   }, [theme.id]);
 
-  const onCollectionTabClick = (event: TabSelectionChangeEventOld) => {
+  const onCollectionTabClick = (event: TabSelectionChangeEvent<string>) => {
     setSelectedCollection(event.value);
   };
 
@@ -46,9 +46,9 @@ export function TokenDictionary() {
   };
 
   return (
-    <TabsOld selectedValue={selectedCollection} onSelectionChange={onCollectionTabClick}>
+    <Tabs selected={selectedCollection} onSelectionChange={onCollectionTabClick}>
       {tokenDictionary.collectionNames.map((collection) => (
-        <TabOld key={collection.rawName} label={collection.name} value={collection.name}>
+        <Tab key={collection.rawName} header={collection.name} value={collection.name}>
           <StyledTable>
             <thead>
               <tr className="header">
@@ -109,9 +109,9 @@ export function TokenDictionary() {
               })}
             </tbody>
           </StyledTable>
-        </TabOld>
+        </Tab>
       ))}
-    </TabsOld>
+    </Tabs>
   );
 }
 
@@ -148,7 +148,7 @@ const StyledTable = styled.table`
   }
 
   & tr.group td {
-    font: var(--cck-doc-text-sm-semibold);
+    font: var(--cck-doc-text-sm-semib);
     color: var(--cck-doc-color-font-3);
     min-height: 40px;
     padding-top: 32px;
diff --git a/packages/internal/storybook-addon-theme/src/lib/model/addon.model.ts b/packages/internal/storybook-addon-theme/src/lib/model/addon.model.ts
index 6e395aaf..39ab6710 100644
--- a/packages/internal/storybook-addon-theme/src/lib/model/addon.model.ts
+++ b/packages/internal/storybook-addon-theme/src/lib/model/addon.model.ts
@@ -2,7 +2,8 @@ import { Args, PreparedStory } from '@storybook/types';
 import { ComponentType } from 'react';
 
 import { IconsName } from '@cocokits/common-icons';
-import { ClassRef, DeepPartial, ThemeComponentConfig, UIBaseComponentsName } from '@cocokits/core';
+import { ClassRef, DeepPartial } from '@cocokits/common-utils';
+import { ThemeComponentConfig, UIBaseComponentsName } from '@cocokits/core';
 
 import { ThemeChangeEvent } from './event.model';
 import { ExampleStoryCssVariables, ExampleStoryTemplateArgs } from './theme.model';
@@ -58,6 +59,7 @@ export interface AddonParametersMeta {
 
 export interface CckAddonStoriesMeta {
   componentName: UIBaseComponentsName;
+  deception?: string;
 
   subcomponents?: Record<
     string,
diff --git a/packages/internal/storybook-addon-theme/src/lib/utils/common.utils.ts b/packages/internal/storybook-addon-theme/src/lib/utils/common.utils.ts
index 77440f67..75c0c11f 100644
--- a/packages/internal/storybook-addon-theme/src/lib/utils/common.utils.ts
+++ b/packages/internal/storybook-addon-theme/src/lib/utils/common.utils.ts
@@ -1,6 +1,6 @@
 import { ComponentRef } from 'react';
 
-import { ClassRef } from '@cocokits/core';
+import { ClassRef } from '@cocokits/common-utils';
 
 export function isClassRef(ref: any): ref is ClassRef {
   return typeof ref === 'function' && !!ref.prototype && ref.prototype.constructor === ref;
diff --git a/packages/internal/storybook-addon-theme/src/theme/scss/_tab-label.scss b/packages/internal/storybook-addon-theme/src/theme/scss/_tab-label.scss
index da8fee61..8ee93e6d 100644
--- a/packages/internal/storybook-addon-theme/src/theme/scss/_tab-label.scss
+++ b/packages/internal/storybook-addon-theme/src/theme/scss/_tab-label.scss
@@ -1,9 +1,4 @@
 @use '../../token/scss' as *;
 
 @mixin tab-label {
-  .doc-cck-tab-label {
-    // Without relative and zIndex 1, the indicator will be at top of the prevues element
-    position: relative;
-    z-index: 1;
-  }
 }
diff --git a/packages/internal/storybook-addon-theme/src/theme/scss/_tab.scss b/packages/internal/storybook-addon-theme/src/theme/scss/_tab.scss
index b5faeb0a..5256c51d 100644
--- a/packages/internal/storybook-addon-theme/src/theme/scss/_tab.scss
+++ b/packages/internal/storybook-addon-theme/src/theme/scss/_tab.scss
@@ -49,4 +49,10 @@
   .doc-cck-tabs__color--h-contrast .doc-cck-tab__indicator {
     background-color: var(--cck-doc-color-bg-2);
   }
+
+  .doc-cck-tab__label {
+    // Without relative and zIndex 1, the indicator will be at top of the prevues element
+    position: relative;
+    z-index: 1;
+  }
 }
diff --git a/packages/internal/storybook-addon-theme/src/theme/scss/_tabs.scss b/packages/internal/storybook-addon-theme/src/theme/scss/_tabs.scss
index aeb4da16..9264ed25 100644
--- a/packages/internal/storybook-addon-theme/src/theme/scss/_tabs.scss
+++ b/packages/internal/storybook-addon-theme/src/theme/scss/_tabs.scss
@@ -6,7 +6,7 @@
     flex-direction: column;
     gap: 12px;
 
-    &__labels-wrapper {
+    &__headers-wrapper {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
@@ -30,7 +30,7 @@
 
       // }
       &--fit {
-        .doc-cck-tabs__labels-wrapper {
+        .doc-cck-tabs__headers-wrapper {
           width: 100%;
         }
       }
@@ -38,13 +38,13 @@
 
     &__color {
       &--default {
-        .doc-cck-tabs__labels-wrapper {
+        .doc-cck-tabs__headers-wrapper {
           background-color: var(--cck-doc-color-bg-3);
         }
       }
 
       &--h-contrast {
-        .doc-cck-tabs__labels-wrapper {
+        .doc-cck-tabs__headers-wrapper {
           background-color: var(--cck-doc-color-bg-4);
         }
       }
diff --git a/packages/internal/storybook-addon-theme/src/theme/theme-config.ts b/packages/internal/storybook-addon-theme/src/theme/theme-config.ts
index 1bd12361..c011a804 100644
--- a/packages/internal/storybook-addon-theme/src/theme/theme-config.ts
+++ b/packages/internal/storybook-addon-theme/src/theme/theme-config.ts
@@ -76,7 +76,7 @@ const components: ThemeComponentConfigRecord = {
   // trailing: {},
   // menu: {},
   // menuItem: {},
-  tabsOld: {
+  tabs: {
     color: {
       name: 'color',
       values: ['default', 'h-contrast'],
@@ -90,8 +90,7 @@ const components: ThemeComponentConfigRecord = {
       description: '',
     },
   },
-  tabOld: {},
-  tabLabelOld: {},
+  tab: {},
   overlay: {},
 };
 
diff --git a/packages/react/accordion/src/lib/accordion/accordion.tsx b/packages/react/accordion/src/lib/accordion/accordion.tsx
index 6fee49e2..3b185060 100644
--- a/packages/react/accordion/src/lib/accordion/accordion.tsx
+++ b/packages/react/accordion/src/lib/accordion/accordion.tsx
@@ -60,7 +60,7 @@ export interface AccordionProps<TValue extends string | number> extends UIBaseCo
       | ((props: { isExpanded: boolean; disabled: boolean }) => React.ReactNode);
 
   /**
-   * he children of the Accordion component. Must only be `AccordionPanel` components.
+   * the children of the Accordion component. Must only be `AccordionPanel` components.
    */
   children: React.ReactNode;
 }
diff --git a/packages/react/components/CHANGELOG.md b/packages/react/components/CHANGELOG.md
index 43b26deb..bb60edfa 100644
--- a/packages/react/components/CHANGELOG.md
+++ b/packages/react/components/CHANGELOG.md
@@ -19,6 +19,5 @@
   - @cocokits/react-icon@1.0.1
   - @cocokits/react-menu@1.0.1
   - @cocokits/react-radio@1.0.1
-  - @cocokits/react-tabs-old@1.0.1
   - @cocokits/react-toggle@1.0.1
   - @cocokits/react-utils@1.0.1
diff --git a/packages/react/components/package.json b/packages/react/components/package.json
index 5d8146fc..c8e6ef25 100644
--- a/packages/react/components/package.json
+++ b/packages/react/components/package.json
@@ -17,7 +17,6 @@
     "@cocokits/react-menu": "workspace:*",
     "@cocokits/react-toggle": "workspace:*",
     "@cocokits/react-cdk": "workspace:*",
-    "@cocokits/react-tabs-old": "workspace:*",
     "@cocokits/react-avatar": "workspace:*",
     "@cocokits/react-accordion": "workspace:*",
     "@cocokits/react-tabs": "workspace:*"
diff --git a/packages/react/components/src/index.ts b/packages/react/components/src/index.ts
index fe90cbfe..9b01130b 100644
--- a/packages/react/components/src/index.ts
+++ b/packages/react/components/src/index.ts
@@ -11,4 +11,3 @@ export * from '@cocokits/react-divider';
 export * from '@cocokits/react-menu';
 export * from '@cocokits/react-toggle';
 export * from '@cocokits/react-cdk';
-// export * from '@cocokits/react-tabs-old';
diff --git a/packages/react/tabs-old/.eslintrc.json b/packages/react/tabs-old/.eslintrc.json
deleted file mode 100644
index 25dad472..00000000
--- a/packages/react/tabs-old/.eslintrc.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "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/tabs-old/CHANGELOG.md b/packages/react/tabs-old/CHANGELOG.md
deleted file mode 100644
index 22ab06ab..00000000
--- a/packages/react/tabs-old/CHANGELOG.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# @cocokits/react-tabs-old
-
-## 1.0.1
-
-### Patch Changes
-
-- c9f1995: First Release 🔥
-- Add README file for npm
-- Updated dependencies [c9f1995]
-- Updated dependencies
-  - @cocokits/core@1.1.1
-  - @cocokits/react-core@1.0.1
-  - @cocokits/react-utils@1.0.1
diff --git a/packages/react/tabs-old/LICENSE b/packages/react/tabs-old/LICENSE
deleted file mode 100644
index 637feac8..00000000
--- a/packages/react/tabs-old/LICENSE
+++ /dev/null
@@ -1,9 +0,0 @@
-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/tabs-old/README.md b/packages/react/tabs-old/README.md
deleted file mode 100644
index 1631dcbd..00000000
--- a/packages/react/tabs-old/README.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# tabs
-
-## TODO: Write a good description
diff --git a/packages/react/tabs-old/package.json b/packages/react/tabs-old/package.json
deleted file mode 100644
index f8e78a06..00000000
--- a/packages/react/tabs-old/package.json
+++ /dev/null
@@ -1,29 +0,0 @@
-{
-  "name": "@cocokits/react-tabs-old",
-  "version": "1.0.1",
-  "main": "./index.js",
-  "types": "./index.d.ts",
-  "dependencies": {
-    "@cocokits/core": "workspace:*",
-    "@cocokits/react-core": "workspace:*",
-    "@cocokits/react-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/tabs",
-    "access": "public"
-  }
-}
diff --git a/packages/react/tabs-old/project.json b/packages/react/tabs-old/project.json
deleted file mode 100644
index 0aed0177..00000000
--- a/packages/react/tabs-old/project.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "name": "@cocokits/react-tabs-old",
-  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "packages/react/tabs/src",
-  "projectType": "library",
-  "tags": ["type:ui", "framework:react"],
-  "// targets": "to see all targets run: nx show project button --web",
-  "targets": {
-    "quick-fix-eslint": {
-      "executor": "@nx/eslint:lint"
-    }
-  }
-}
diff --git a/packages/react/tabs-old/src/index.ts b/packages/react/tabs-old/src/index.ts
deleted file mode 100644
index aca13ec9..00000000
--- a/packages/react/tabs-old/src/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './lib/tabs';
-export * from './lib/tab';
-export * from './lib/tab-label';
-export * from './lib/tab.model';
diff --git a/packages/react/tabs-old/src/lib/tab-label.tsx b/packages/react/tabs-old/src/lib/tab-label.tsx
deleted file mode 100644
index 08a76fc2..00000000
--- a/packages/react/tabs-old/src/lib/tab-label.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { UIBaseComponentProps } from '@cocokits/core';
-import { useUiBaseComponentConfig } from '@cocokits/react-core';
-
-export interface TabLabelProps extends UIBaseComponentProps {
-  children: React.ReactNode | React.ReactNode[];
-}
-
-export const TabLabelOld = (props: TabLabelProps) => {
-  const { classNames, hostClassNames } = useUiBaseComponentConfig({
-    componentName: 'tabLabelOld',
-    props,
-  });
-
-  return <div className={hostClassNames}>{props.children}</div>;
-};
diff --git a/packages/react/tabs-old/src/lib/tab.model.ts b/packages/react/tabs-old/src/lib/tab.model.ts
deleted file mode 100644
index a75b1c5c..00000000
--- a/packages/react/tabs-old/src/lib/tab.model.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export type TabValueOld = string;
-
-export interface TabSelectionChangeEventOld {
-  previousIndex: number;
-  previousValue: TabValueOld;
-  index: number;
-  value: TabValueOld;
-}
diff --git a/packages/react/tabs-old/src/lib/tab.tsx b/packages/react/tabs-old/src/lib/tab.tsx
deleted file mode 100644
index 6e413938..00000000
--- a/packages/react/tabs-old/src/lib/tab.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import { ReactNode, useContext, useEffect, useRef } from 'react';
-
-import { useUiBaseComponentConfig } from '@cocokits/react-core';
-
-import { TabLabelOld } from './tab-label';
-import { TabIndexContextOld, useTabsStoreOld } from './tabs.store';
-
-export interface TabPropsOld {
-  label: string | ((selected: boolean) => ReactNode);
-  value: string;
-  children?: React.ReactNode | React.ReactNode[];
-}
-
-export const TabOld = (props: TabPropsOld) => {
-  const tabsStore = useTabsStoreOld();
-  const index = useContext(TabIndexContextOld);
-  const selectedTab = tabsStore?.useSelectedTab();
-
-  const hostElemRef = useRef<HTMLButtonElement>(null);
-  const indicatorElemRef = useRef<HTMLDivElement>(null);
-
-  const isSelected = selectedTab?.value === props.value;
-
-  const { classNames, hostClassNames } = useUiBaseComponentConfig({
-    componentName: 'tabOld',
-    props: {},
-    extraHostElementClassConditions: [
-      { if: isSelected, classes: (cn) => [cn.selected] },
-      { if: !isSelected, classes: (cn) => [cn.unselected] },
-    ],
-  });
-
-  // Register and update the tab on mount and changes
-  useEffect(() => {
-    const label = typeof props.label === 'string' ? <TabLabelOld>{props.label}</TabLabelOld> : props.label(isSelected);
-
-    const tabTmp = (
-      <button
-        ref={hostElemRef}
-        key={props.value}
-        className={hostClassNames}
-        onClick={() => tabsStore?.selectTabByValue(props.value)}>
-        <div style={{ display: 'none' }} ref={indicatorElemRef} className={classNames.indicator} />
-        {label}
-      </button>
-    );
-
-    const contentTmp = <div className={classNames.content}>{props.children}</div>;
-
-    tabsStore?.registerTab({
-      index,
-      tabTmp,
-      contentTmp,
-      hostElemRef,
-      indicatorElemRef,
-      value: props.value,
-    });
-  }, [props.children, props.label, props.value, isSelected]);
-
-  // Unregister tab on unmount
-  useEffect(() => {
-    return () => {
-      tabsStore?.unregisterTab(props.value);
-    };
-  }, []);
-
-  // Change indicator display on selected tab change
-  useEffect(() => {
-    if (selectedTab?.value === props.value) {
-      indicatorElemRef.current?.style.removeProperty('display');
-    } else {
-      indicatorElemRef.current?.style.setProperty('display', 'none');
-    }
-  }, [selectedTab, indicatorElemRef.current]);
-
-  return null;
-};
diff --git a/packages/react/tabs-old/src/lib/tabs.store.ts b/packages/react/tabs-old/src/lib/tabs.store.ts
deleted file mode 100644
index 95ff46ce..00000000
--- a/packages/react/tabs-old/src/lib/tabs.store.ts
+++ /dev/null
@@ -1,137 +0,0 @@
-import React, { createContext, RefObject, useContext, useRef } from 'react';
-
-import { createComponentStore } from '@cocokits/react-utils';
-
-import { TabSelectionChangeEventOld, TabValueOld } from './tab.model';
-
-export interface TabComponentOld {
-  index: number;
-  tabTmp: React.ReactNode;
-  contentTmp: React.ReactNode;
-  hostElemRef: RefObject<HTMLButtonElement>;
-  indicatorElemRef: RefObject<HTMLDivElement>;
-  value: TabValueOld;
-}
-
-export interface TabsStateOld {
-  selectedValue: TabValueOld;
-  tabs: Record<TabValueOld, TabComponentOld>;
-}
-
-interface TabsStoreConfigOld {
-  disableAnimation: boolean;
-  onSelectionChange: (event: TabSelectionChangeEventOld) => void;
-}
-
-export const TabsContextOld = createContext<TabsStoreOld | null>(null);
-export const TabIndexContextOld = createContext<number>(0);
-
-export function useCreateTabsStoreOld(config: TabsStoreConfigOld) {
-  const storeRef = useRef<{
-    TabsStoreProvider: typeof TabsContextOld.Provider;
-    tabsStore: TabsStoreOld;
-  }>();
-
-  if (!storeRef.current) {
-    storeRef.current = {
-      TabsStoreProvider: TabsContextOld.Provider,
-      tabsStore: new TabsStoreOld(config),
-    };
-  }
-
-  return storeRef.current;
-}
-
-export function useTabsStoreOld() {
-  return useContext(TabsContextOld);
-}
-
-class TabsStoreOld {
-  private state = createComponentStore<TabsStateOld>({ selectedValue: '', tabs: {} });
-
-  public useSelectedTab = this.state.createSelector(
-    (state) => state.tabs[state.selectedValue] ?? Object.values(state.tabs)[0]
-  );
-
-  public useTabComponents = this.state.createSelector((state) => {
-    const tabs = Object.values(state.tabs) ?? [];
-    return tabs.sort((a, b) => a.index - b.index);
-  });
-
-  constructor(private config: TabsStoreConfigOld) {}
-
-  public updateConfig(config: Partial<TabsStoreConfigOld>) {
-    this.config = { ...this.config, ...config };
-  }
-
-  public registerTab(tab: TabComponentOld) {
-    this.state.updateState((state) => {
-      const tabs = { ...state.tabs, [tab.value]: tab };
-      const selectedValue = state.selectedValue ?? tab.value; // Select the first tab if no tab is selected (when no tab is selected, selectedValue is an empty string)
-      return { tabs, selectedValue };
-    });
-  }
-
-  public unregisterTab(tabValue: TabValueOld) {
-    this.state.updateState((state) => {
-      const tabs = { ...state.tabs };
-      delete tabs[tabValue];
-      const selectedValue = tabs[state.selectedValue]?.value ?? Object.keys(tabs)[0];
-      return { tabs, selectedValue };
-    });
-  }
-
-  public selectTabByValue(newTabValue: TabValueOld, emitEvent = true) {
-    const state = this.state.getState();
-    const currentSelected = state.tabs[state.selectedValue];
-    const newSelected = state.tabs[newTabValue];
-
-    if (!newSelected || newTabValue === state.selectedValue) {
-      return;
-    }
-
-    this.state.updateState((currentState) => {
-      return { ...currentState, selectedValue: newTabValue };
-    });
-
-    if (emitEvent) {
-      const currentIndex = Object.values(state.tabs).findIndex((tab) => tab.value === state.selectedValue);
-      const currentValue = state.selectedValue;
-      const newIndex = Object.values(state.tabs).findIndex((tab) => tab.value === newTabValue);
-
-      this.config.onSelectionChange({
-        previousIndex: currentIndex,
-        previousValue: currentValue,
-        index: newIndex,
-        value: newTabValue,
-      });
-    }
-
-    if (!this.config.disableAnimation && newSelected.hostElemRef.current && currentSelected.hostElemRef.current) {
-      const currentTabReact = currentSelected.hostElemRef.current.getBoundingClientRect();
-      const newTabReact = newSelected.hostElemRef.current.getBoundingClientRect();
-
-      const translate = {
-        x: currentTabReact.left - newTabReact.left,
-        y: currentTabReact.top - newTabReact.top,
-      };
-
-      newSelected.indicatorElemRef.current?.animate(
-        {
-          transform: [`translate(${translate.x}px, ${translate.y}px)`, '*'],
-          width: [`${newTabReact.width}px`, `*`],
-          height: [`${newTabReact.height}px`, `*`],
-        },
-        { duration: 150, easing: 'ease-in-out' }
-      );
-    }
-  }
-
-  public selectTabByIndex(tabIndex: number, emitEvent = true) {
-    const state = this.state.getState();
-    const newValue = Object.values(state.tabs).find((tab) => tab.index === tabIndex)?.value;
-    if (newValue) {
-      this.selectTabByValue(newValue, emitEvent);
-    }
-  }
-}
diff --git a/packages/react/tabs-old/src/lib/tabs.tsx b/packages/react/tabs-old/src/lib/tabs.tsx
deleted file mode 100644
index 15ced8b8..00000000
--- a/packages/react/tabs-old/src/lib/tabs.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import React, { useEffect } from 'react';
-
-import { UIBaseComponentProps } from '@cocokits/core';
-import { useUiBaseComponentConfig } from '@cocokits/react-core';
-import { useEffectAfterMount } from '@cocokits/react-utils';
-
-import { TabSelectionChangeEventOld, TabValueOld } from './tab.model';
-import { TabIndexContextOld, useCreateTabsStoreOld } from './tabs.store';
-
-// eslint-disable-next-line @typescript-eslint/no-empty-function
-const EMPTY_CALLBACK = () => {};
-
-export interface TabsPropsOld extends UIBaseComponentProps {
-  selectedIndex?: number;
-  selectedValue?: TabValueOld;
-
-  hideContent?: boolean;
-  disableAnimation?: boolean;
-
-  onSelectionChange?: (event: TabSelectionChangeEventOld) => void;
-  children: React.ReactNode | React.ReactNode[];
-  className?: string;
-}
-
-export const TabsOld = (props: TabsPropsOld) => {
-  const hideContent = props.hideContent ?? false;
-  const disableAnimation = props.disableAnimation ?? false;
-
-  const { tabsStore, TabsStoreProvider } = useCreateTabsStoreOld({
-    disableAnimation,
-    onSelectionChange: props.onSelectionChange ?? EMPTY_CALLBACK,
-  });
-
-  const { classNames: tabsClassNames, hostClassNames: tabsHostClassNames } = useUiBaseComponentConfig({
-    componentName: 'tabsOld',
-    props,
-  });
-
-  const tabComponents = tabsStore.useTabComponents();
-  const selectedTab = tabsStore.useSelectedTab();
-
-  useEffectAfterMount(() => {
-    tabsStore.updateConfig({ disableAnimation });
-  }, [props.disableAnimation]);
-
-  // Update selected tab by index
-  useEffect(() => {
-    if (props.selectedIndex !== undefined) {
-      tabsStore.selectTabByIndex(props.selectedIndex, false);
-    }
-  }, [props.selectedIndex]);
-
-  // Update selected tab by value
-  useEffect(() => {
-    if (props.selectedValue !== undefined) {
-      tabsStore.selectTabByValue(props.selectedValue, false);
-    }
-  }, [props.selectedValue]);
-
-  return (
-    <TabsStoreProvider value={tabsStore}>
-      {/* Just render the children to register them into the store, The Children has no template */}
-      {React.Children.map(props.children, (child, index) => (
-        <TabIndexContextOld.Provider key={index} value={index}>
-          {child}
-        </TabIndexContextOld.Provider>
-      ))}
-
-      <div className={`${tabsHostClassNames} ${props.className ?? ''}`}>
-        {/* Labels */}
-        <div className={tabsClassNames.labelsWrapper}>{tabComponents.map((tab) => tab.tabTmp)}</div>
-
-        {/* Content */}
-        {!hideContent && (
-          <div className={tabsClassNames.contentWrapper}>
-            {/* selectedTab Can be undefined for firs render */}
-            {selectedTab?.contentTmp}
-          </div>
-        )}
-      </div>
-    </TabsStoreProvider>
-  );
-};
diff --git a/packages/react/tabs-old/tsconfig.json b/packages/react/tabs-old/tsconfig.json
deleted file mode 100644
index 89f8ac08..00000000
--- a/packages/react/tabs-old/tsconfig.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-  "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/tabs-old/tsconfig.lib.json b/packages/react/tabs-old/tsconfig.lib.json
deleted file mode 100644
index 02faf5d1..00000000
--- a/packages/react/tabs-old/tsconfig.lib.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "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/tabs-old/vite.config.ts b/packages/react/tabs-old/vite.config.ts
deleted file mode 100644
index 3a50e1ed..00000000
--- a/packages/react/tabs-old/vite.config.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-/// <reference types='vitest' />
-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 { 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/tabs',
-
-  plugins: [
-    react(),
-    nxViteTsPaths(),
-    dts({
-      entryRoot: 'src',
-      tsconfigPath: path.join(__dirname, 'tsconfig.lib.json'),
-      aliasesExclude: [/^@cocokits\//],
-    }),
-    copy({
-      targets: [{ src: 'README.md', dest: '../../../dist/packages/react/tabs' }],
-      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/tabs',
-    emptyOutDir: true,
-    reportCompressedSize: true,
-    commonjsOptions: {
-      transformMixedEsModules: true,
-    },
-    lib: {
-      // Could also be a dictionary or array of multiple entry points.
-      entry: 'src/index.ts',
-      name: 'tabs',
-      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/tabs/README.md b/packages/react/tabs/README.md
index 1631dcbd..f97f5517 100644
--- a/packages/react/tabs/README.md
+++ b/packages/react/tabs/README.md
@@ -1,3 +1,66 @@
-# tabs
+# @cocokits/react-tabs
+
+The `@cocokits/react-tabs` package offers a headless tabs system for React applications with complete customization capabilities.
+
+## Included Components:
+- `Tabs`
+- `Tab`
+
+
+## Key Components Overview:
+
+### TabsComponent
+The container component that manages tab state and synchronization. Handles coordination between tabs and their content panels.
+
+**Features:**
+
+- **Custom Header Templates:**
+Fully customize tab headers using Angular templates
+
+- **Animation Control:**
+Toggle transition animations
+
+- **Disabled Tabs:**
+Disable individual tabs using [disabled] property
+
+- **Imperative Control:**
+Programmatically activate tabs
+
+- **Tab Align:**
+Configure tab headers alignment (left/right/center/stretch)
+
+- **Content Persistence:**
+Option to preserve DOM state when switching tabs
+
+### Tab
+Defines individual tab sections with associated header and content.
+
+**Features:**
+
+- **Header Customization:**
+Render custom header elements via `header` prop or slot
+
+- **State Control:**
+Support for disabled states
+
+---
+
+## Styling and Theming
+As with other CocoKits components, these accordion related components do not come with built-in styles but apply CSS classes based on configuration. This allows you to style them or use CocoKits' theming options for a consistent look across your application.
+
+## Documentation and Examples
+For more information on configuring and using these components, visit the documentation:
+
+- [TabsComponent](https://rect.cocokits.com/?path=/docs/ui-components-tabs--docs)
+
+
+---
+
+### Contributing
+We welcome contributions! If you'd like to contribute to this project, please read our [Contributing Guidelines](https://github.com/coco-base/cocokits/blob/main/CONTRIBUTING.md)
+
+---
+
+### License
+This project is licensed under the Apache License. See the [LICENSE](https://github.com/coco-base/cocokits/blob/main/LICENSE) file for details.
 
-## TODO: Write a good description
diff --git a/packages/react/tabs/src/index.ts b/packages/react/tabs/src/index.ts
index 749556b2..067595ee 100644
--- a/packages/react/tabs/src/index.ts
+++ b/packages/react/tabs/src/index.ts
@@ -1,3 +1,3 @@
 export * from './lib/tabs/tabs';
-
 export * from './lib/tab/tab';
+export * from './lib/tabs.model';
diff --git a/packages/react/tabs/src/lib/tab/tab.tsx b/packages/react/tabs/src/lib/tab/tab.tsx
index f9650857..c05c39c6 100644
--- a/packages/react/tabs/src/lib/tab/tab.tsx
+++ b/packages/react/tabs/src/lib/tab/tab.tsx
@@ -1,38 +1,130 @@
-import { CSSProperties, ReactNode } from 'react';
+/* eslint-disable max-lines-per-function */
+import { CSSProperties, ReactNode, useContext, useEffect, useLayoutEffect, useRef } from 'react';
 
 import { UIBaseComponentProps } from '@cocokits/core';
 import { useUiBaseComponentConfig } from '@cocokits/react-core';
+import { useOnDestroy, useStaticText } from '@cocokits/react-utils';
+
+import { TabIndexContext, useFeatureStore } from '../tabs.feature-store';
+
+export interface TabProps<TValue = unknown> extends UIBaseComponentProps {
+
+  /**
+   * The label of the tab, which can be a string or a function that receives a boolean indicating if the tab is selected.
+   * If a function is provided, it should return a ReactNode to be rendered as the label.
+   */
+  header: string | ((selected: boolean) => ReactNode);
+
+  /**
+   * The value of the tab, which is used to identify the tab when selected.
+   * If not provided, a unique ID will be used.
+   */
+  value?: TValue;
+
+  /**
+   * Whether the tab is disabled. If true, the tab will not be selectable by user.
+   * @default false
+   */
+  disabled?: boolean;
 
-export interface TabProps extends UIBaseComponentProps {
   /**
-   * *************** TODO *************
-   * The content inside the component.
-   * This can be a string, a number, an element, or an array of elements.
-   * It allows rendering nested components within this component.
+   * The content of tab component.
    */
   children?: ReactNode | ReactNode[];
+
   /**
    * A custom class name that can be used to apply additional styles to the component.
    */
   className?: string;
+
   /**
    * An object containing inline styles that can be used to customize the appearance of the component.
    */
   style?: CSSProperties;
 }
 
-export const Tab = (props: TabProps) => {
+export const Tab = <TValue,>({
+  type,
+  size,
+  color,
+  additional,
+  header,
+  value,
+  disabled = false,
+  children,
+  className,
+  style,
+}: TabProps<TValue>) => {
+  const id = useStaticText();
+  const valueOrId = value ?? id;
+  const store = useFeatureStore();
+  const index = useContext(TabIndexContext);
+  const selectedTab = store?.useSelectedTab();
+  
+  const hostElemRef = useRef<HTMLButtonElement>(null);
+  const indicatorElemRef = useRef<HTMLDivElement>(null);
+
+  const isSelected = selectedTab?.id === id;
+
   const { classNames, hostClassNames } = useUiBaseComponentConfig({
     componentName: 'tab',
-    props,
-    extraHostElementClassConditions: [{ if: !!props.className, classes: () => [props.className] }],
+    props: { type, size, color, additional },
+    extraHostElementClassConditions: [
+      { if: !!className, classes: () => [className] },
+      { if: isSelected, classes: (cn) => [cn.selected] },
+      { if: !isSelected, classes: (cn) => [cn.unselected] },
+      { if: disabled, classes: (cn) => [cn.disabled] },
+    ],
   });
 
-  return (
-    <div className={hostClassNames} style={props.style}>
-      {props.children}
-    </div>
-  );
+  useLayoutEffect(() => {
+    const headerTemp = typeof header === 'string' ? header : header(isSelected);
+    const onClick = () => {
+      if (!disabled) {
+        store?.selectTabById(id);
+      }
+    };
+
+    const tabTmp = (
+      <button
+        ref={hostElemRef}
+        key={id}
+        className={hostClassNames}
+        onClick={onClick}>
+        <div style={{ display: 'none' }} ref={indicatorElemRef} className={classNames.indicator} />
+        <div className={classNames.headerWrapper}>
+          {headerTemp}
+        </div>
+      </button>
+    );
+
+    const contentTmp = <div className={classNames.content} style={style}>{children}</div>;
+
+    store?.registerTab({
+      id,
+      index,
+      disabled,
+      tabTmp,
+      contentTmp,
+      hostElemRef,
+      indicatorElemRef,
+      value: valueOrId,
+    });
+  }, [children, header, valueOrId, index, isSelected]);
+
+  // Change indicator display on selected tab change
+  useEffect(() => {
+    if (isSelected) {
+      indicatorElemRef.current?.style.removeProperty('display');
+    } else {
+      indicatorElemRef.current?.style.setProperty('display', 'none');
+    }
+  }, [isSelected, indicatorElemRef.current]);
+
+  useOnDestroy(() => store?.unregisterTab(id));
+
+  // This component does not render anything directly, it only registers itself in the store and the tabs component will render the tabTmp and contentTmp.
+  return <></>;
 };
 
 Tab.displayName = 'Tab';
diff --git a/packages/react/tabs/src/lib/tabs.feature-store.ts b/packages/react/tabs/src/lib/tabs.feature-store.ts
new file mode 100644
index 00000000..197f3967
--- /dev/null
+++ b/packages/react/tabs/src/lib/tabs.feature-store.ts
@@ -0,0 +1,134 @@
+import { createContext, ReactNode, RefObject } from 'react';
+
+import { createComponentStore, createFeatureStore } from '@cocokits/react-utils';
+
+import { TabSelectionChangeEvent } from './tabs.model';
+
+export interface TabComponent<TValue> {
+  index: number;
+  value: TValue;
+  id: string;
+  disabled: boolean;
+  tabTmp: ReactNode;
+  contentTmp: ReactNode;
+  hostElemRef: RefObject<HTMLButtonElement>;
+  indicatorElemRef: RefObject<HTMLDivElement>;
+}
+
+export type TabsFeatureStoreOptions<TValue> = Pick<
+  TabsFeatureStoreState<TValue>,
+  'instantAnimation' | 'onSelectionChange'
+>;
+
+export interface TabsFeatureStoreState<TValue> {
+  tabs: Record<string, TabComponent<TValue>>;
+  selectedId: string;
+
+  instantAnimation: boolean;
+  onSelectionChange: ((event: TabSelectionChangeEvent<TValue>) => void) | undefined;
+}
+
+const INITIALIZE_STATE: TabsFeatureStoreState<any> = {
+  tabs: {},
+  selectedId: '',
+  instantAnimation: false,
+  onSelectionChange: undefined,
+};
+
+class TabsFeatureStore<TValue> {
+  private store = createComponentStore<TabsFeatureStoreState<TValue>>(INITIALIZE_STATE);
+  private get state() {
+    return this.store.getState();
+  }
+
+  public useSelectedTab = this.store.createSelector<TabComponent<TValue> | undefined>(
+    (state) => state.tabs[state.selectedId] ?? Object.values(state.tabs)[0]
+  );
+
+  public useTabComponents = this.store.createSelector((state) => {
+    const tabs = Object.values(state.tabs) ?? [];
+    return tabs.sort((a, b) => a.index - b.index);
+  });
+
+  constructor(options: TabsFeatureStoreOptions<TValue>) {
+    this.updateState(options);
+  }
+
+  public updateState(options: TabsFeatureStoreOptions<TValue>) {
+    this.store.updateState({ ...options });
+  }
+
+  public registerTab(tab: TabComponent<TValue>) {
+    this.store.updateState((state) => ({
+      tabs: { ...state.tabs, [tab.id]: tab },
+      selectedId: state.selectedId || tab.id, // Select the first tab if no tab is selected
+    }));
+  }
+
+  public unregisterTab(tabId: string) {
+    this.store.updateState((state) => {
+      const tabs = { ...state.tabs };
+      delete tabs[tabId];
+      const selectedId = tabs[state.selectedId]?.id ?? Object.keys(tabs)[0];
+      return { tabs, selectedId };
+    });
+  }
+
+  public selectTabById(newTabId: string, emitEvent = true) {
+    const currentSelected = this.state.tabs[this.state.selectedId];
+    const newSelected = this.state.tabs[newTabId];
+
+    if (!newSelected || newTabId === this.state.selectedId) {
+      return;
+    }
+
+    this.store.updateState((currentState) => {
+      return { ...currentState, selectedId: newSelected.id };
+    });
+
+    if (emitEvent) {
+      this.state.onSelectionChange?.({
+        previousIndex: currentSelected.index,
+        previousValue: currentSelected.value,
+        index: newSelected.index,
+        value: newSelected.value,
+      });
+    }
+
+    if (!this.state.instantAnimation && newSelected.hostElemRef.current && currentSelected.hostElemRef.current) {
+      const currentTabReact = currentSelected.hostElemRef.current.getBoundingClientRect();
+      const newTabReact = newSelected.hostElemRef.current.getBoundingClientRect();
+
+      const translate = {
+        x: currentTabReact.left - newTabReact.left,
+        y: currentTabReact.top - newTabReact.top,
+      };
+
+      newSelected.indicatorElemRef.current?.animate(
+        {
+          transform: [`translate(${translate.x}px, ${translate.y}px)`, '*'],
+          width: [`${currentTabReact.width}px`, `${newTabReact.width}px`],
+          height: [`${currentTabReact.height}px`, `${newTabReact.height}px`],
+        },
+        { duration: 300, easing: 'ease-in-out' }
+      );
+    }
+  }
+
+  public selectTabByIndex(tabIndex: number, emitEvent = true) {
+    const selectedTab = Object.values(this.state.tabs).find((tab) => tab.index === tabIndex);
+    if (selectedTab) {
+      this.selectTabById(selectedTab.id, emitEvent);
+    }
+  }
+
+  public selectTabByValue(tabValue: TValue, emitEvent = true) {
+    const selectedTab = Object.values(this.state.tabs).find((tab) => tab.value === tabValue);
+    if (selectedTab) {
+      this.selectTabById(selectedTab.id, emitEvent);
+    }
+  }
+}
+
+export const { useCreateFeatureStore, useFeatureStore } = createFeatureStore(TabsFeatureStore<any>);
+export const TabIndexContext = createContext<number>(0);
diff --git a/packages/react/tabs/src/lib/tabs.model.ts b/packages/react/tabs/src/lib/tabs.model.ts
new file mode 100644
index 00000000..053278fe
--- /dev/null
+++ b/packages/react/tabs/src/lib/tabs.model.ts
@@ -0,0 +1,6 @@
+export interface TabSelectionChangeEvent<TValue> {
+  previousIndex: number;
+  previousValue: TValue;
+  index: number;
+  value: TValue;
+}
diff --git a/packages/react/tabs/src/lib/tabs/tabs.tsx b/packages/react/tabs/src/lib/tabs/tabs.tsx
index 53c50dda..3554d327 100644
--- a/packages/react/tabs/src/lib/tabs/tabs.tsx
+++ b/packages/react/tabs/src/lib/tabs/tabs.tsx
@@ -1,16 +1,54 @@
-import { CSSProperties, ReactNode } from 'react';
+import { Children, CSSProperties, ReactNode, useEffect } from 'react';
 
+import { isNullish } from '@cocokits/common-utils';
 import { UIBaseComponentProps } from '@cocokits/core';
 import { useUiBaseComponentConfig } from '@cocokits/react-core';
+import { useEffectAfterMount } from '@cocokits/react-utils';
+
+import { TabIndexContext, useCreateFeatureStore } from '../tabs.feature-store';
+import { TabSelectionChangeEvent } from '../tabs.model';
+
+export interface TabsProps<TValue = unknown> extends UIBaseComponentProps {
+  /**
+   * The index of the currently selected tab.
+   * If `selected` is provided, the value of `selectedIndex` will be ignored.
+   * @default 0
+   */
+  selectedIndex?: number;
+
+  /**
+   * The value of the currently selected tab.
+   * If not provided, the `selectedIndex` will be used, and if `selectedIndex` is not provided, the first tab will be selected by default.
+   */
+  selected?: TValue;
+
+  /**
+   * Whether to hide the content of the tabs when they are not selected.
+   * @default false
+   */
+  hideContent?: boolean;
+
+  /**
+   * Whether to disable the animation when switching between tabs.
+   * @default false
+   */
+  instantAnimation?: boolean;
 
-export interface TabsProps extends UIBaseComponentProps {
   /**
-   * *************** TODO *************
-   * The content inside the component.
-   * This can be a string, a number, an element, or an array of elements.
-   * It allows rendering nested components within this component.
+   * The alignment of the tab headers.
+   * @default 'left'
    */
-  children?: ReactNode | ReactNode[];
+  headerAlign?: 'left' | 'center' | 'right' | 'stretch';
+
+  /**
+   * Callback function that is called when the selected tab changes.
+   * The callback receives an object with the new and previous selected index and value.
+   */
+  onSelectionChange?: (event: TabSelectionChangeEvent<TValue>) => void;
+  /**
+   * the children of the Tabs component. Must only be `Tab` components.
+   */
+  children: ReactNode[];
   /**
    * A custom class name that can be used to apply additional styles to the component.
    */
@@ -21,17 +59,87 @@ export interface TabsProps extends UIBaseComponentProps {
   style?: CSSProperties;
 }
 
-export const Tabs = (props: TabsProps) => {
+export const Tabs = <TValue,>({
+  type,
+  size,
+  color,
+  additional,
+  selectedIndex = 0,
+  selected,
+  hideContent = false,
+  instantAnimation = false,
+  headerAlign = 'left',
+  onSelectionChange,
+  children,
+  className,
+  style,
+}: TabsProps<TValue>) => {
+
+  const { store, StoreProvider } = useCreateFeatureStore({
+    instantAnimation,
+    onSelectionChange: onSelectionChange,
+  });
   const { classNames, hostClassNames } = useUiBaseComponentConfig({
     componentName: 'tabs',
-    props,
-    extraHostElementClassConditions: [{ if: !!props.className, classes: () => [props.className] }],
+    props: { type, size, color, additional },
+    extraHostElementClassConditions: [
+      { if: !!className, classes: () => [className] },
+      { if: headerAlign === 'left', classes: (cn) => [cn.alignLeft] },
+      { if: headerAlign === 'right', classes: (cn) => [cn.alignRight] },
+      { if: headerAlign === 'center', classes: (cn) => [cn.alignCenter] },
+      { if: headerAlign === 'stretch', classes: (cn) => [cn.alignStretch] },
+    ],
   });
 
+  const selectedTab = store.useSelectedTab();
+  const tabComponents = store.useTabComponents();
+
+  // Update config
+  useEffectAfterMount(() => {
+    store.updateState({
+      instantAnimation,
+      onSelectionChange,
+    });
+  }, [instantAnimation, onSelectionChange]);
+
+  // Update selected tab by Index
+  useEffect(() => {
+    if(!isNullish(selected) || isNullish(selectedIndex)) {
+      return;
+    }
+    store.selectTabByIndex(selectedIndex, false);
+  }, [selectedIndex]);
+
+  // Update selected tab by Value
+  useEffect(() => {
+    if(isNullish(selected)) {
+      return;
+    }
+    store.selectTabByValue(selected, false);
+  }, [selected]);
+
   return (
-    <div className={hostClassNames} style={props.style}>
-      {props.children}
-    </div>
+    <StoreProvider value={store}>
+      {/* Just render the children to register them into the store, The Children (Tab Component) will not return any template */}
+      {Children.map(children, (child, index) => (
+        <TabIndexContext.Provider key={index} value={index}>
+          {child}
+        </TabIndexContext.Provider>
+      ))}
+
+      <div className={hostClassNames} style={style}>
+        {/* Labels */}
+        <div className={classNames.headersWrapper}>{tabComponents.map((tab) => tab.tabTmp)}</div>
+
+        {/* Content */}
+        {/* selectedTab Can be undefined for first render */}
+        {!hideContent && selectedTab && (
+          <div className={classNames.contentWrapper}>
+            {selectedTab.contentTmp}
+          </div>
+        )}
+      </div>
+    </StoreProvider>
   );
 };
 
diff --git a/packages/react/utils/src/index.ts b/packages/react/utils/src/index.ts
index 9ee15c02..7a6cf131 100644
--- a/packages/react/utils/src/index.ts
+++ b/packages/react/utils/src/index.ts
@@ -1,3 +1,4 @@
+export * from './lib/feature-store';
 export * from './lib/component-store';
 export * from './lib/use-effect-after-mount';
 export * from './lib/use-static-text';
diff --git a/packages/react/utils/src/lib/component-store.ts b/packages/react/utils/src/lib/component-store.ts
index 9cb63375..c297ae33 100644
--- a/packages/react/utils/src/lib/component-store.ts
+++ b/packages/react/utils/src/lib/component-store.ts
@@ -1,5 +1,7 @@
 /** @module _hidden */
-import { useLayoutEffect, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
+
+import { useImmediatelyEffect } from './use-immediately-effect';
 
 export type ComponentStoreSelector<T, U> = (state: T) => U;
 
@@ -30,7 +32,7 @@ export function createComponentStore<T extends object>(initialState: T) {
     const [selectedState, setSelectedState] = useState(() => selector(state));
     const selectedStateRef = useRef(selectedState);
 
-    useLayoutEffect(() => {
+    useImmediatelyEffect(() => {
       const listener = (newState: T) => {
         const newSelectedState = selector(newState);
 
diff --git a/packages/react/utils/src/lib/feature-store.ts b/packages/react/utils/src/lib/feature-store.ts
new file mode 100644
index 00000000..0e9f1079
--- /dev/null
+++ b/packages/react/utils/src/lib/feature-store.ts
@@ -0,0 +1,25 @@
+import { createContext, useContext, useRef } from 'react';
+
+import { ClassRef } from '@cocokits/common-utils';
+
+export function createFeatureStore<T extends ClassRef>(featureStoreRef: T) {
+  const Context = createContext<InstanceType<T> | null>(null);
+  const useFeatureStore = () => useContext(Context);
+  const useCreateFeatureStore = (...config: ConstructorParameters<T>) => {
+    const storeRef = useRef<{
+      StoreProvider: typeof Context.Provider;
+      store: InstanceType<T>;
+    }>();
+
+    if (!storeRef.current) {
+      storeRef.current = {
+        StoreProvider: Context.Provider,
+        store: new featureStoreRef(...config),
+      };
+    }
+
+    return storeRef.current;
+  };
+
+  return { useFeatureStore, useCreateFeatureStore };
+}
diff --git a/packages/themes/frames-x/src/lib/theme-config.ts b/packages/themes/frames-x/src/lib/theme-config.ts
index 7fe16647..953ed496 100644
--- a/packages/themes/frames-x/src/lib/theme-config.ts
+++ b/packages/themes/frames-x/src/lib/theme-config.ts
@@ -259,7 +259,20 @@ const components: ThemeComponentConfigRecord = {
   },
   accordionHeader: {},
   accordionPanel: {},
-  tabs: {},
+  tabs: {
+    type: {
+      name: 'type',
+      values: ['fill', 'line', 'toggle'],
+      default: 'fill',
+      description: '',
+    },
+    size: {
+      name: 'size',
+      values: ['sm', 'md', 'lg'],
+      default: 'md',
+      description: '',
+    },
+  },
   tab: {},
 };
 
diff --git a/packages/themes/frames-x/src/styles/scss/_tab.scss b/packages/themes/frames-x/src/styles/scss/_tab.scss
index f9ce1a24..7366cf87 100644
--- a/packages/themes/frames-x/src/styles/scss/_tab.scss
+++ b/packages/themes/frames-x/src/styles/scss/_tab.scss
@@ -1,7 +1,126 @@
 @use '../../token/scss' as *;
+@use './selector-names/_tabs-selector-names' as S;
 
 @mixin tab {
-  .cck-tab {
-    opacity: 1;
+  #{S.$tab} {
+    display: flex;
+    background: transparent;
+    border: none;
+    outline: none;
+    color: $text-dark-tertiary;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+    cursor: pointer;
+    position: relative;
+
+    & #{S.$svgIcon} {
+      color: currentcolor;
+      fill: currentcolor;
+    }
+  }
+
+  #{S.$label} {
+    // Without relative and zIndex 1, the indicator will be at top of the prevues element
+    position: relative;
+    z-index: 1;
+  }
+
+  #{S.$unselected}:not(#{S.$disabled}):focus-visible {
+    outline: 2px solid $state-brand-selected;
+  }
+
+  #{S.$selected} {
+    color: $text-dark-primary;
+  }
+
+  #{S.$disabled} {
+    color: $base-disabled;
+    cursor: not-allowed;
+  }
+
+  #{S.$indicator} {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+  }
+
+  #{S.$alignStretch} {
+    #{S.$tab} {
+      flex: 1;
+    }
+  }
+
+  #{S.$toggle} {
+    #{S.$tab} {
+      border-radius: $radi-5;
+    }
+
+    #{S.$unselected}:not(#{S.$disabled}):hover {
+      background-color: $base-fill-2;
+    }
+
+    #{S.$indicator} {
+      border-radius: $radi-5;
+      background-color: $base-surface-1;
+      border: 1px solid $base-border;
+    }
+  }
+
+  #{S.$fill} {
+    #{S.$tab} {
+      border-radius: $radi-6;
+    }
+
+    #{S.$indicator} {
+      border-radius: $radi-5;
+      background-color: $base-surface-2;
+      border: 2px solid $state-brand-selected;
+    }
+  }
+
+  #{S.$line} {
+    #{S.$indicator} {
+      border-bottom: $stroke-lg solid $state-brand-selected;
+    }
+  }
+
+  #{S.$sm} {
+    #{S.$tab} {
+      font: $text-sm-font-medium;
+      padding: 0 $spacing-7;
+      height: 36px;
+
+      &#{S.$selected} {
+        font: $text-sm-font-semibold;
+      }
+    }
+  }
+
+  #{S.$md} {
+    #{S.$tab} {
+      font: $text-base-font-medium;
+      padding: 0 $spacing-8;
+      height: 44px;
+
+      &#{S.$selected} {
+        font: $text-base-font-semibold;
+      }
+    }
+  }
+
+  #{S.$lg} {
+    #{S.$tab} {
+      font: $text-lg-font-medium;
+      padding: 0 $spacing-9;
+      height: 56px;
+
+      &#{S.$selected} {
+        font: $text-lg-font-semibold;
+      }
+    }
   }
 }
diff --git a/packages/themes/frames-x/src/styles/scss/_tabs.scss b/packages/themes/frames-x/src/styles/scss/_tabs.scss
index 723aba8c..d5928951 100644
--- a/packages/themes/frames-x/src/styles/scss/_tabs.scss
+++ b/packages/themes/frames-x/src/styles/scss/_tabs.scss
@@ -1,7 +1,72 @@
 @use '../../token/scss' as *;
+@use './selector-names/_tabs-selector-names' as S;
 
 @mixin tabs {
-  .cck-tabs {
-    opacity: 1;
+  #{S.$tabs} {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  #{S.$headerWrapper} {
+    display: flex;
+    justify-content: center;
+    gap: $spacing-2;
+    flex-wrap: wrap;
+  }
+
+  #{S.$alignLeft} {
+    #{S.$headerWrapper} {
+      align-self: flex-start;
+      align-items: flex-start;
+      justify-content: flex-start;
+    }
+  }
+  #{S.$alignCenter} {
+    #{S.$headerWrapper} {
+      align-self: center;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+  #{S.$alignRight} {
+    #{S.$headerWrapper} {
+      align-self: flex-end;
+      align-items: flex-end;
+      justify-content: flex-end;
+    }
+  }
+  #{S.$alignStretch} {
+    #{S.$headerWrapper} {
+      align-self: stretch;
+      align-items: stretch;
+      justify-content: stretch;
+    }
+  }
+
+  #{S.$toggle} {
+    #{S.$headerWrapper} {
+      padding: $spacing-2;
+      border-radius: $radi-6;
+      background-color: $base-fill-1;
+    }
+  }
+
+  #{S.$sm} {
+    #{S.$headerWrapper} {
+      min-height: 36px;
+    }
+  }
+
+  #{S.$md} {
+    #{S.$headerWrapper} {
+      min-height: 44px;
+    }
+  }
+
+  #{S.$lg} {
+    #{S.$headerWrapper} {
+      min-height: 56px;
+    }
   }
 }
diff --git a/packages/themes/frames-x/src/styles/scss/selector-names/_tabs-selector-names.scss b/packages/themes/frames-x/src/styles/scss/selector-names/_tabs-selector-names.scss
new file mode 100644
index 00000000..c2cd6bca
--- /dev/null
+++ b/packages/themes/frames-x/src/styles/scss/selector-names/_tabs-selector-names.scss
@@ -0,0 +1,21 @@
+$fill: '.cck-tabs__fill';
+$line: '.cck-tabs__line';
+$toggle: '.cck-tabs__toggle';
+$sm: '.cck-tabs__size--sm';
+$md: '.cck-tabs__size--md';
+$lg: '.cck-tabs__size--lg';
+$tabs: '.cck-tabs';
+$headerWrapper: '.cck-tabs__headers-wrapper';
+$contentWrapper: '.cck-tabs__content-wrapper';
+$tab: '.cck-tab';
+$label: '.cck-tab__label';
+$indicator: '.cck-tab__indicator';
+$content: '.cck-tab__content';
+$selected: '.cck-tab--selected';
+$unselected: '.cck-tab--unselected';
+$disabled: '.cck-tab--disabled';
+$alignLeft: '.cck-tabs--align-left';
+$alignCenter: '.cck-tabs--align-center';
+$alignRight: '.cck-tabs--align-right';
+$alignStretch: '.cck-tabs--align-stretch';
+$svgIcon: '.cck-svg-icon.cck-svg-icon--default-color';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6e119e6a..a7b38d12 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1324,9 +1324,6 @@ importers:
       '@cocokits/react-radio':
         specifier: workspace:*
         version: link:../../../dist/packages/react/radio
-      '@cocokits/react-tabs-old':
-        specifier: workspace:*
-        version: link:../../../dist/packages/react/tabs
       '@cocokits/react-toggle':
         specifier: workspace:*
         version: link:../../../dist/packages/react/toggle
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 5a155090..09779d1e 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -54,7 +54,6 @@
       "@cocokits/react-overlay": ["packages/react/overlay/src/index.ts"],
       "@cocokits/react-radio": ["packages/react/radio/src/index.ts"],
       "@cocokits/react-tabs": ["packages/react/tabs/src/index.ts"],
-      "@cocokits/react-tabs-old": ["packages/react/tabs-old/src/index.ts"],
       "@cocokits/react-toggle": ["packages/react/toggle/src/index.ts"],
       "@cocokits/react-utils": ["packages/react/utils/src/index.ts"],
       "@cocokits/storybook-addon-theme": ["packages/internal/storybook-addon-theme/src/index.ts"],
diff --git a/tsconfig.storybook-manager-paths.json b/tsconfig.storybook-manager-paths.json
index e7e02b00..6626e7aa 100644
--- a/tsconfig.storybook-manager-paths.json
+++ b/tsconfig.storybook-manager-paths.json
@@ -218,12 +218,6 @@
         "../../packages/react/toggle/src/",
         "../../../packages/react/toggle/src/"
       ],
-      "@cocokits/react-tabs-old": [
-        "packages/react/tabs-old/src/",
-        "../packages/react/tabs-old/src/",
-        "../../packages/react/tabs-old/src/",
-        "../../../packages/react/tabs-old/src/"
-      ],
       "@cocokits/angular-avatar": [
         "packages/angular/avatar/src/",
         "../packages/angular/avatar/src/",

From c5fadc6c234c34624ddf0d83589107963f546e0e Mon Sep 17 00:00:00 2001
From: Milad Faghihi <miladfm@gmail.com>
Date: Mon, 7 Jul 2025 21:43:03 +0200
Subject: [PATCH 6/8] feat(tabs): add common-utils and react-utils as
 dependencies for angular and react tabs

---
 packages/angular/tabs/package.json | 3 ++-
 packages/react/tabs/package.json   | 4 +++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/angular/tabs/package.json b/packages/angular/tabs/package.json
index bd03afe4..d016ef4d 100644
--- a/packages/angular/tabs/package.json
+++ b/packages/angular/tabs/package.json
@@ -6,7 +6,8 @@
   "dependencies": {
     "tslib": "^2.3.0",
     "@cocokits/angular-core": "workspace:*",
-    "@cocokits/core": "workspace:*"
+    "@cocokits/core": "workspace:*",
+    "@cocokits/common-utils": "workspace:*"
   },
   "devDependencies": {},
   "peerDependencies": {
diff --git a/packages/react/tabs/package.json b/packages/react/tabs/package.json
index c1e9e7a3..01a681d4 100644
--- a/packages/react/tabs/package.json
+++ b/packages/react/tabs/package.json
@@ -6,7 +6,9 @@
   "types": "./index.d.ts",
   "dependencies": {
     "@cocokits/react-core": "workspace:*",
-    "@cocokits/core": "workspace:*"
+    "@cocokits/core": "workspace:*",
+    "@cocokits/react-utils": "workspace:*",
+    "@cocokits/common-utils": "workspace:*"
   },
   "peerDependencies": {
     "react": "^18.3.0",

From ba59a0c09ce19c53b08e4f27f4e8d9235deee510 Mon Sep 17 00:00:00 2001
From: Milad Faghihi <miladfm@gmail.com>
Date: Mon, 7 Jul 2025 21:59:10 +0200
Subject: [PATCH 7/8] chore: add changes log

---
 .changeset/afraid-camels-itch.md   | 7 +++++++
 .changeset/cuddly-tigers-cheer.md  | 7 +++++++
 .changeset/funny-gifts-share.md    | 6 ++++++
 .changeset/gentle-tables-happen.md | 6 ++++++
 .changeset/giant-pets-judge.md     | 7 +++++++
 .changeset/olive-rules-visit.md    | 7 +++++++
 .changeset/six-kids-call.md        | 6 ++++++
 .changeset/ten-pots-think.md       | 8 ++++++++
 .changeset/wise-lions-watch.md     | 6 ++++++
 9 files changed, 60 insertions(+)
 create mode 100644 .changeset/afraid-camels-itch.md
 create mode 100644 .changeset/cuddly-tigers-cheer.md
 create mode 100644 .changeset/funny-gifts-share.md
 create mode 100644 .changeset/gentle-tables-happen.md
 create mode 100644 .changeset/giant-pets-judge.md
 create mode 100644 .changeset/olive-rules-visit.md
 create mode 100644 .changeset/six-kids-call.md
 create mode 100644 .changeset/ten-pots-think.md
 create mode 100644 .changeset/wise-lions-watch.md

diff --git a/.changeset/afraid-camels-itch.md b/.changeset/afraid-camels-itch.md
new file mode 100644
index 00000000..1b1745aa
--- /dev/null
+++ b/.changeset/afraid-camels-itch.md
@@ -0,0 +1,7 @@
+---
+'@cocokits/angular-components': minor
+---
+
+- Add Avatar component
+- Add Accordion component
+- Add Tabs component
diff --git a/.changeset/cuddly-tigers-cheer.md b/.changeset/cuddly-tigers-cheer.md
new file mode 100644
index 00000000..a0309bb8
--- /dev/null
+++ b/.changeset/cuddly-tigers-cheer.md
@@ -0,0 +1,7 @@
+---
+'@cocokits/core': minor
+---
+
+- Add Avatar component
+- Add Accordion component
+- Add Tabs component
diff --git a/.changeset/funny-gifts-share.md b/.changeset/funny-gifts-share.md
new file mode 100644
index 00000000..d31a1c56
--- /dev/null
+++ b/.changeset/funny-gifts-share.md
@@ -0,0 +1,6 @@
+---
+'@cocokits/angular-tabs': minor
+'@cocokits/react-tabs': minor
+---
+
+- Add Tabs component
diff --git a/.changeset/gentle-tables-happen.md b/.changeset/gentle-tables-happen.md
new file mode 100644
index 00000000..f67c49e0
--- /dev/null
+++ b/.changeset/gentle-tables-happen.md
@@ -0,0 +1,6 @@
+---
+'@cocokits/angular-avatar': minor
+'@cocokits/react-avatar': minor
+---
+
+- Add Avatar component
diff --git a/.changeset/giant-pets-judge.md b/.changeset/giant-pets-judge.md
new file mode 100644
index 00000000..ef8ff82a
--- /dev/null
+++ b/.changeset/giant-pets-judge.md
@@ -0,0 +1,7 @@
+---
+'@cocokits/react-components': minor
+---
+
+- Add Avatar component
+- Add Accordion component
+- Add Tabs component
diff --git a/.changeset/olive-rules-visit.md b/.changeset/olive-rules-visit.md
new file mode 100644
index 00000000..055aedd0
--- /dev/null
+++ b/.changeset/olive-rules-visit.md
@@ -0,0 +1,7 @@
+---
+'@cocokits/common-utils': minor
+---
+
+- Add Animation
+- Add Math
+- Add common model
diff --git a/.changeset/six-kids-call.md b/.changeset/six-kids-call.md
new file mode 100644
index 00000000..633c38cb
--- /dev/null
+++ b/.changeset/six-kids-call.md
@@ -0,0 +1,6 @@
+---
+'@cocokits/react-utils': minor
+---
+
+- Add Feature Store
+- Add Animation, onInit, onDestroy, selection, slotChildren hooks
diff --git a/.changeset/ten-pots-think.md b/.changeset/ten-pots-think.md
new file mode 100644
index 00000000..850f8e6f
--- /dev/null
+++ b/.changeset/ten-pots-think.md
@@ -0,0 +1,8 @@
+---
+'@cocokits/theme-cocokits': minor
+'@cocokits/theme-frames-x': minor
+---
+
+- Add Avatar styles
+- Add Accordion styles
+- Add Tabs styles
diff --git a/.changeset/wise-lions-watch.md b/.changeset/wise-lions-watch.md
new file mode 100644
index 00000000..3843baf1
--- /dev/null
+++ b/.changeset/wise-lions-watch.md
@@ -0,0 +1,6 @@
+---
+'@cocokits/angular-accordion': minor
+'@cocokits/react-accordion': minor
+---
+
+- Add Accordion component

From f73d70d2a3bd4601a1a3a4f9795da2f0efdbe79f Mon Sep 17 00:00:00 2001
From: Milad Faghihi <miladfm@gmail.com>
Date: Mon, 7 Jul 2025 22:02:36 +0200
Subject: [PATCH 8/8] chore: exclude website from build and test commands in CI
 configuration

---
 .github/workflows/main-branch-pull-request.yml | 4 ++--
 project.json                                   | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/.github/workflows/main-branch-pull-request.yml b/.github/workflows/main-branch-pull-request.yml
index 6ac133e9..acb98943 100644
--- a/.github/workflows/main-branch-pull-request.yml
+++ b/.github/workflows/main-branch-pull-request.yml
@@ -29,7 +29,7 @@ jobs:
         run: pnpm exec nx run cocokits:depcheck
 
       - name: Build All
-        run: pnpm nx affected:build --base=main --head=HEAD --parallel=4
+        run: pnpm nx affected:build --base=main --head=HEAD --exclude=website --parallel=4
 
       - name: Test
-        run: pnpm nx affected:test --base=main --head=HEAD --exclude=cocokits --parallel=1
\ No newline at end of file
+        run: pnpm nx affected:test --base=main --head=HEAD --exclude=cocokits,website --parallel=1
\ No newline at end of file
diff --git a/project.json b/project.json
index 719ccfa4..298d94fd 100644
--- a/project.json
+++ b/project.json
@@ -34,14 +34,14 @@
     "build-all": {
       "executor": "nx:run-commands",
       "options": {
-        "commands": ["nx run-many --target=build --parallel --maxParallel=4"],
+        "commands": ["nx run-many --target=build --parallel --maxParallel=4 --exclude=website"],
         "parallel": false
       }
     },
     "test-all": {
       "executor": "nx:run-commands",
       "options": {
-        "command": "nx run-many --all --target=test --parallel --maxParallel=4 -- --passWithNoTests"
+        "command": "nx run-many --all --target=test --parallel --maxParallel=4 --exclude=website -- --passWithNoTests"
       }
     },
     "local-registry": {