@cck-ui/core 0.11.0 → 0.12.0

package/esm/index.mjs

@@ -50,8 +50,10 @@ import { resolveClassNames } from "./core/styles-api/use-styles/get-class-name/r
 import { resolveStyles } from "./core/styles-api/use-styles/get-style/resolve-styles/resolve-styles.mjs";
 import { FOCUS_CLASS_NAMES } from "./core/styles-api/use-styles/get-class-name/get-global-class-names/get-global-class-names.mjs";
 import { useStyles } from "./core/styles-api/use-styles/use-styles.mjs";
-import { CAspectRatio } from "./components/aspect-ratio/index.mjs";
 import { UnstyledButton } from "./components/unstyled-button/index.mjs";
+import { CCloseButton } from "./components/close-button/index.mjs";
+import { CAlert } from "./components/alert/index.mjs";
+import { CAspectRatio } from "./components/aspect-ratio/index.mjs";
 import { CDefaultLoaders, CLoader } from "./components/loader/index.mjs";
 import { transitions } from "./components/transition/transitions.mjs";
 import { getTransitionProps } from "./components/transition/get-transition-props/get-transition-props.mjs";
@@ -71,11 +73,13 @@ const INSTALLED_KEY = Symbol("INSTALLED_KEY");
 const components = [
 	CckConfigProvider,
 	CBox,
+	CAlert,
 	CAspectRatio,
 	CButton,
 	CButtonGroup,
 	CButtonGroupSection,
 	CCenter,
+	CCloseButton,
 	CCol,
 	CContainer,
 	CGrid,
@@ -84,6 +88,7 @@ const components = [
 	CSimpleGrid,
 	CSpace,
 	CSplitter,
+	CSplitterPane,
 	CStack,
 	CText,
 	CTransition,
@@ -97,6 +102,6 @@ const CckUI = { install(app) {
 	});
 } };
 //#endregion
-export { CAspectRatio, CBox, CButton, CButtonGroup, CButtonGroupSection, transitions as CCK_TRANSITIONS, CCenter, CCol, CContainer, CDefaultLoaders, CGrid, CGroup, CLoader, CONFIG_KEY, CSimpleGrid, CSpace, CSplitter, CSplitterPane, CStack, CText, CTransition, CckConfigProvider, CckUI, CckUI as default, DEFAULT_THEME, FOCUS_CLASS_NAMES, STYLE_PROPS_DATA, THEME_KEY, UnstyledButton, alpha, camelToKebabCase, colorsTuple, createTheme, createVarsResolver, darken, deepMerge, defaultCssVariablesResolver, defaultVariantColorsResolver, em, extractStyleProps, filterProps, getBaseValue, getBreakpointValue, getCSSColorVariables, getComponentName, getFontSize, getGradient, getLineHeight, getPrimaryShade, getRadius, getShadow, getSize, getSortedBreakpoints, getSpacing, getThemeColor, getTransitionProps, hashStyleProps, isLightColor, isNumber, isNumberLike, isString, isStringNumber, isUndefined, isVirtualColor, keys, luminance, mergeThemeOverrides, normalizeNumberLikeStringProp, numberLikeStringToNumber, parseStyleProps, parseThemeColor, px, rem, resolveClassNames, resolveStyles, responsiveStyleManager, rgb, rgba, stylesToString, toRgba, useCckClassNamesPrefix, useCckColorScheme, useCckCssVariablesResolver, useCckEnv, useCckIsHeadless, useCckStyleNonce, useCckStylesTransform, useCckSxTransform, useCckTheme, useCckWithStaticClasses, useComponentProps, useConfigContext, useProviderColorScheme, useRandomClassName, useStyles, virtualColor, withClasses, withExtend, withInstall, withPropsDefaultSetter, withPropsFactory, withVarsResolver };
+export { CAlert, CAspectRatio, CBox, CButton, CButtonGroup, CButtonGroupSection, transitions as CCK_TRANSITIONS, CCenter, CCloseButton, CCol, CContainer, CDefaultLoaders, CGrid, CGroup, CLoader, CONFIG_KEY, CSimpleGrid, CSpace, CSplitter, CSplitterPane, CStack, CText, CTransition, CckConfigProvider, CckUI, CckUI as default, DEFAULT_THEME, FOCUS_CLASS_NAMES, STYLE_PROPS_DATA, THEME_KEY, UnstyledButton, alpha, camelToKebabCase, colorsTuple, createTheme, createVarsResolver, darken, deepMerge, defaultCssVariablesResolver, defaultVariantColorsResolver, em, extractStyleProps, filterProps, getBaseValue, getBreakpointValue, getCSSColorVariables, getComponentName, getFontSize, getGradient, getLineHeight, getPrimaryShade, getRadius, getShadow, getSize, getSortedBreakpoints, getSpacing, getThemeColor, getTransitionProps, hashStyleProps, isLightColor, isNumber, isNumberLike, isString, isStringNumber, isUndefined, isVirtualColor, keys, luminance, mergeThemeOverrides, normalizeNumberLikeStringProp, numberLikeStringToNumber, parseStyleProps, parseThemeColor, px, rem, resolveClassNames, resolveStyles, responsiveStyleManager, rgb, rgba, stylesToString, toRgba, useCckClassNamesPrefix, useCckColorScheme, useCckCssVariablesResolver, useCckEnv, useCckIsHeadless, useCckStyleNonce, useCckStylesTransform, useCckSxTransform, useCckTheme, useCckWithStaticClasses, useComponentProps, useConfigContext, useProviderColorScheme, useRandomClassName, useStyles, virtualColor, withClasses, withExtend, withInstall, withPropsDefaultSetter, withPropsFactory, withVarsResolver };
 
 //# sourceMappingURL=index.mjs.map

package/esm/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../src/index.ts"],"sourcesContent":["import type { App, Plugin } from 'vue'\nimport {\n  CAspectRatio,\n  CButton,\n  CButtonGroup,\n  CButtonGroupSection,\n  CCenter,\n  CCol,\n  CContainer,\n  CGrid,\n  CGroup,\n  CLoader,\n  CSimpleGrid,\n  CSpace,\n  CSplitter,\n  CStack,\n  CText,\n  CTransition,\n  UnstyledButton,\n} from './components'\nimport { CckConfigProvider, CBox } from './core'\n\nconst INSTALLED_KEY = Symbol('INSTALLED_KEY')\n\nconst components = [\n  CckConfigProvider,\n  CBox,\n  CAspectRatio,\n  CButton,\n  CButtonGroup,\n  CButtonGroupSection,\n  CCenter,\n  CCol,\n  CContainer,\n  CGrid,\n  CGroup,\n  CLoader,\n  CSimpleGrid,\n  CSpace,\n  CSplitter,\n  CStack,\n  CText,\n  CTransition,\n  UnstyledButton,\n]\n\nconst CckUI: Plugin = {\n  install(app: App) {\n    if ((app as any)[INSTALLED_KEY]) {\n      return\n    }\n    ;(app as any)[INSTALLED_KEY] = true\n    components.forEach((c) => {\n      if (c.name) {\n        app.component(c.name, c)\n      }\n    })\n  },\n}\n\nexport default CckUI\nexport { CckUI }\n\nexport * from './components'\nexport * from './core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA,MAAM,gBAAgB,OAAO,eAAe;AAE5C,MAAM,aAAa;CACjB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,QAAgB,EACpB,QAAQ,KAAU;CAChB,IAAK,IAAY,gBACf;CAED,IAAa,iBAAiB;CAC/B,WAAW,SAAS,MAAM;EACxB,IAAI,EAAE,MACJ,IAAI,UAAU,EAAE,MAAM,CAAC;CAE3B,CAAC;AACH,EACF"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/index.ts"],"sourcesContent":["import type { App, Plugin } from 'vue'\nimport {\n  CAlert,\n  CAspectRatio,\n  CButton,\n  CButtonGroup,\n  CButtonGroupSection,\n  CCenter,\n  CCloseButton,\n  CCol,\n  CContainer,\n  CGrid,\n  CGroup,\n  CLoader,\n  CSimpleGrid,\n  CSpace,\n  CSplitter,\n  CSplitterPane,\n  CStack,\n  CText,\n  CTransition,\n  UnstyledButton,\n} from './components'\nimport { CckConfigProvider, CBox } from './core'\n\nconst INSTALLED_KEY = Symbol('INSTALLED_KEY')\n\nconst components = [\n  CckConfigProvider,\n  CBox,\n  CAlert,\n  CAspectRatio,\n  CButton,\n  CButtonGroup,\n  CButtonGroupSection,\n  CCenter,\n  CCloseButton,\n  CCol,\n  CContainer,\n  CGrid,\n  CGroup,\n  CLoader,\n  CSimpleGrid,\n  CSpace,\n  CSplitter,\n  CSplitterPane,\n  CStack,\n  CText,\n  CTransition,\n  UnstyledButton,\n]\n\nconst CckUI: Plugin = {\n  install(app: App) {\n    if ((app as any)[INSTALLED_KEY]) {\n      return\n    }\n    ;(app as any)[INSTALLED_KEY] = true\n    components.forEach((c) => {\n      if (c.name) {\n        app.component(c.name, c)\n      }\n    })\n  },\n}\n\nexport default CckUI\nexport { CckUI }\n\nexport * from './components'\nexport * from './core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,MAAM,gBAAgB,OAAO,eAAe;AAE5C,MAAM,aAAa;CACjB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,QAAgB,EACpB,QAAQ,KAAU;CAChB,IAAK,IAAY,gBACf;CAED,IAAa,iBAAiB;CAC/B,WAAW,SAAS,MAAM;EACxB,IAAI,EAAE,MACJ,IAAI,UAAU,EAAE,MAAM,CAAC;CAE3B,CAAC;AACH,EACF"}

package/lib/components/alert/alert.types.d.ts

@@ -0,0 +1,42 @@
+import { BoxProps, CColor, CRadius, ElementProps, Factory, StylesApiProps } from '../../core';
+export type AlertStylesNames = 'root' | 'body' | 'label' | 'title' | 'icon' | 'wrapper' | 'message' | 'close-button';
+export type AlertVariant = 'default' | 'filled' | 'light' | 'outline' | 'dashed' | 'transparent' | 'white';
+export type AlertCssVariables = {
+    root: '--alert-radius' | '--alert-bg' | '--alert-color' | '--alert-bd';
+};
+export interface AlertProps extends BoxProps, StylesApiProps<AlertFactory>, /* @vue-ignore */ ElementProps<'div', 'title'> {
+    /**
+     * @description Key of `theme.radius` or any valid CSS value to set border-radius
+     * @default theme.defaultRadius
+     */
+    radius?: CRadius;
+    /**
+     * @description Key of `theme.colors` or any valid CSS color
+     * @default theme.primaryColor
+     */
+    color?: CColor;
+    /**
+     * @description Determines whether close button should be displayed
+     * @default false
+     */
+    withCloseButton?: boolean;
+    /**
+     * @description Called when the close button is clicked
+     */
+    onClose?: () => void;
+    /**
+     * @description Close button `aria-label`
+     */
+    closeButtonLabel?: string;
+    /**
+     * @description If set, adjusts text color based on background color for `filled` variant
+     */
+    autoContrast?: boolean;
+}
+export type AlertFactory = Factory<{
+    props: AlertProps;
+    ref: HTMLDivElement;
+    stylesNames: AlertStylesNames;
+    vars: AlertCssVariables;
+    variant: AlertVariant;
+}>;

package/lib/components/alert/alert.utils.d.ts

@@ -0,0 +1,7 @@
+export declare const varsResolver: import("../..").VarsResolver<{
+    props: import("./alert.types").AlertProps;
+    ref: HTMLDivElement;
+    stylesNames: import("./alert.types").AlertStylesNames;
+    vars: import("./alert.types").AlertCssVariables;
+    variant: import("./alert.types").AlertVariant;
+}>;

package/lib/components/alert/index.d.ts

@@ -0,0 +1,6 @@
+import { SFCWithInstallAndClasses } from '../../core';
+import Alert from './alert.vue';
+import classes from './alert.module.css';
+export declare const CAlert: SFCWithInstallAndClasses<typeof Alert, typeof classes>;
+export default CAlert;
+export * from './alert.types';

package/lib/components/close-button/close-button.types.d.ts

@@ -0,0 +1,39 @@
+import { BoxProps, CRadius, CSize, PolymorphicFactory, StylesApiProps } from '../../core';
+export type CloseButtonVariant = 'subtle' | 'transparent';
+export type CloseButtonStylesNames = 'root';
+export type CloseButtonCssVariables = {
+    root: '--cb-icon-size' | '--cb-size' | '--cb-radius';
+};
+export interface __CloseButtonProps {
+    dataDisabled?: boolean;
+    /**
+     * @description Controls width and height of the button. Numbers are converted to rem.
+     * @default 'md'
+     */
+    size?: CSize | (string & {}) | number;
+    /**
+     * @description Key of `theme.radius` or any valid CSS value to set border-radius. Numbers are converted to rem.
+     * @default theme.defaultRadius
+     */
+    radius?: CRadius;
+    /**
+     * @description Sets `disabled` attribute, assigns disabled styles
+     */
+    disabled?: boolean;
+    /**
+     * @description `X` icon `width` and `height`
+     * @default 70%
+     */
+    iconSize?: number | string;
+}
+export interface CloseButtonProps extends __CloseButtonProps, BoxProps, StylesApiProps<CloseButtonFactory> {
+    __staticSelector?: string;
+}
+export type CloseButtonFactory = PolymorphicFactory<{
+    props: CloseButtonProps;
+    defaultComponent: 'button';
+    defaultRef: HTMLButtonElement;
+    stylesNames: CloseButtonStylesNames;
+    variant: CloseButtonVariant;
+    vars: CloseButtonCssVariables;
+}>;

package/lib/components/close-button/close-button.utils.d.ts

@@ -0,0 +1,8 @@
+export declare const varsResolver: import("../..").VarsResolver<{
+    props: import("./close-button.types").CloseButtonProps;
+    defaultComponent: "button";
+    defaultRef: HTMLButtonElement;
+    stylesNames: import("./close-button.types").CloseButtonStylesNames;
+    variant: import("./close-button.types").CloseButtonVariant;
+    vars: import("./close-button.types").CloseButtonCssVariables;
+}>;

package/lib/components/close-button/index.d.ts

@@ -0,0 +1,6 @@
+import { SFCWithInstallAndClasses } from '../../core';
+import CloseButton from './close-button.vue';
+import classes from './close-button.module.css';
+export declare const CCloseButton: SFCWithInstallAndClasses<typeof CloseButton, typeof classes>;
+export default CCloseButton;
+export * from './close-button.types';

package/lib/components/index.d.ts

@@ -1,6 +1,8 @@
+export * from './alert';
 export * from './aspect-ratio';
 export * from './button';
 export * from './center';
+export * from './close-button';
 export * from './container';
 export * from './grid';
 export * from './group';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cck-ui/core",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "Vue component library focused on usability, accessibility and developer experience",
   "homepage": "https://cck-ui.jackatlas.xyz",
   "license": "ISC",

package/styles/alert.css

@@ -0,0 +1,82 @@
+.m_efb192b3 {
+  --alert-radius: var(--c-radius-default);
+  --alert-bg: var(--c-primary-color-light);
+  --alert-bd: calc(0.0625rem * var(--c-scale)) solid transparent;
+  --alert-color: var(--c-primary-color-light-color);
+
+  padding: var(--c-spacing-md) var(--c-spacing-md);
+  border-radius: var(--alert-radius);
+  position: relative;
+  overflow: hidden;
+  background-color: var(--alert-bg);
+  border: var(--alert-bd);
+  color: var(--alert-color);
+}
+
+.m_7636d522 {
+  display: flex;
+}
+
+.m_efaa4b73 {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--c-spacing-xs);
+}
+
+.m_69a4aa7 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: var(--c-font-size-sm);
+  font-weight: var(--c-font-weight-bold);
+}
+
+.m_69a4aa7:where([data-with-close-button]) {
+    padding-inline-end: var(--c-spacing-md);
+  }
+
+.m_625a743 {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.m_efad4e4a {
+  line-height: 1;
+  width: calc(1.25rem * var(--c-scale));
+  height: calc(1.25rem * var(--c-scale));
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin-inline-end: var(--c-spacing-md);
+  margin-top: calc(0.0625rem * var(--c-scale));
+}
+
+.m_50085096 {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  font-size: var(--c-font-size-sm);
+}
+
+:where([data-c-color-scheme='light']) .m_50085096 {
+    color: var(--c-color-black);
+}
+
+:where([data-c-color-scheme='dark']) .m_50085096 {
+    color: var(--c-color-white);
+}
+
+.m_50085096:where([data-variant='filled']) {
+    color: var(--alert-color);
+  }
+
+.m_50085096:where([data-variant='white']) {
+    color: var(--c-color-black);
+  }
+
+.m_91af3d78 {
+  width: calc(1.25rem * var(--c-scale));
+  height: calc(1.25rem * var(--c-scale));
+  color: var(--alert-color);
+}

package/styles/alert.layer.css

@@ -0,0 +1,83 @@
+@layer cck {.m_efb192b3 {
+  --alert-radius: var(--c-radius-default);
+  --alert-bg: var(--c-primary-color-light);
+  --alert-bd: calc(0.0625rem * var(--c-scale)) solid transparent;
+  --alert-color: var(--c-primary-color-light-color);
+
+  padding: var(--c-spacing-md) var(--c-spacing-md);
+  border-radius: var(--alert-radius);
+  position: relative;
+  overflow: hidden;
+  background-color: var(--alert-bg);
+  border: var(--alert-bd);
+  color: var(--alert-color);
+}
+
+.m_7636d522 {
+  display: flex;
+}
+
+.m_efaa4b73 {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--c-spacing-xs);
+}
+
+.m_69a4aa7 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: var(--c-font-size-sm);
+  font-weight: var(--c-font-weight-bold);
+}
+
+.m_69a4aa7:where([data-with-close-button]) {
+    padding-inline-end: var(--c-spacing-md);
+  }
+
+.m_625a743 {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.m_efad4e4a {
+  line-height: 1;
+  width: calc(1.25rem * var(--c-scale));
+  height: calc(1.25rem * var(--c-scale));
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin-inline-end: var(--c-spacing-md);
+  margin-top: calc(0.0625rem * var(--c-scale));
+}
+
+.m_50085096 {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  font-size: var(--c-font-size-sm);
+}
+
+:where([data-c-color-scheme='light']) .m_50085096 {
+    color: var(--c-color-black);
+}
+
+:where([data-c-color-scheme='dark']) .m_50085096 {
+    color: var(--c-color-white);
+}
+
+.m_50085096:where([data-variant='filled']) {
+    color: var(--alert-color);
+  }
+
+.m_50085096:where([data-variant='white']) {
+    color: var(--c-color-black);
+  }
+
+.m_91af3d78 {
+  width: calc(1.25rem * var(--c-scale));
+  height: calc(1.25rem * var(--c-scale));
+  color: var(--alert-color);
+}
+}

package/styles/close-button.css

@@ -0,0 +1,58 @@
+.m_504ae648 {
+  --cb-size-xs: calc(1.125rem * var(--c-scale));
+  --cb-size-sm: calc(1.375rem * var(--c-scale));
+  --cb-size-md: calc(1.75rem * var(--c-scale));
+  --cb-size-lg: calc(2.125rem * var(--c-scale));
+  --cb-size-xl: calc(2.75rem * var(--c-scale));
+
+  --cb-size: var(--cb-size-md);
+  --cb-icon-size: 70%;
+  --cb-radius: var(--c-radius-default);
+
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  user-select: none;
+
+  width: var(--cb-size);
+  height: var(--cb-size);
+  min-width: var(--cb-size);
+  min-height: var(--cb-size);
+  border-radius: var(--cb-radius);
+}
+
+  :where([data-c-color-scheme='light']) .m_504ae648 {
+    color: var(--c-color-gray-7);
+}
+
+  :where([data-c-color-scheme='dark']) .m_504ae648 {
+    color: var(--c-color-dark-1);
+}
+
+  .m_504ae648[data-disabled],
+  .m_504ae648:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+@media (hover: hover) {
+    :where([data-c-color-scheme='light']) .m_ef2dc695:where(:not([data-disabled], :disabled)):hover {
+      background-color: var(--c-color-gray-0);
+  }
+
+    :where([data-c-color-scheme='dark']) .m_ef2dc695:where(:not([data-disabled], :disabled)):hover {
+      background-color: var(--c-color-dark-6);
+  }
+}
+
+@media (hover: none) {
+    :where([data-c-color-scheme='light']) .m_ef2dc695:where(:not([data-disabled], :disabled)):active {
+      background-color: var(--c-color-gray-0);
+  }
+
+    :where([data-c-color-scheme='dark']) .m_ef2dc695:where(:not([data-disabled], :disabled)):active {
+      background-color: var(--c-color-dark-6);
+  }
+}

package/styles/close-button.layer.css

@@ -0,0 +1,59 @@
+@layer cck {.m_504ae648 {
+  --cb-size-xs: calc(1.125rem * var(--c-scale));
+  --cb-size-sm: calc(1.375rem * var(--c-scale));
+  --cb-size-md: calc(1.75rem * var(--c-scale));
+  --cb-size-lg: calc(2.125rem * var(--c-scale));
+  --cb-size-xl: calc(2.75rem * var(--c-scale));
+
+  --cb-size: var(--cb-size-md);
+  --cb-icon-size: 70%;
+  --cb-radius: var(--c-radius-default);
+
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  user-select: none;
+
+  width: var(--cb-size);
+  height: var(--cb-size);
+  min-width: var(--cb-size);
+  min-height: var(--cb-size);
+  border-radius: var(--cb-radius);
+}
+
+  :where([data-c-color-scheme='light']) .m_504ae648 {
+    color: var(--c-color-gray-7);
+}
+
+  :where([data-c-color-scheme='dark']) .m_504ae648 {
+    color: var(--c-color-dark-1);
+}
+
+  .m_504ae648[data-disabled],
+  .m_504ae648:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+@media (hover: hover) {
+    :where([data-c-color-scheme='light']) .m_ef2dc695:where(:not([data-disabled], :disabled)):hover {
+      background-color: var(--c-color-gray-0);
+  }
+
+    :where([data-c-color-scheme='dark']) .m_ef2dc695:where(:not([data-disabled], :disabled)):hover {
+      background-color: var(--c-color-dark-6);
+  }
+}
+
+@media (hover: none) {
+    :where([data-c-color-scheme='light']) .m_ef2dc695:where(:not([data-disabled], :disabled)):active {
+      background-color: var(--c-color-gray-0);
+  }
+
+    :where([data-c-color-scheme='dark']) .m_ef2dc695:where(:not([data-disabled], :disabled)):active {
+      background-color: var(--c-color-dark-6);
+  }
+}
+}

package/styles.css

@@ -882,6 +882,89 @@ fieldset:disabled .c-active:active {
   justify-content: center;
 }
 
+.m_efb192b3 {
+  --alert-radius: var(--c-radius-default);
+  --alert-bg: var(--c-primary-color-light);
+  --alert-bd: calc(0.0625rem * var(--c-scale)) solid transparent;
+  --alert-color: var(--c-primary-color-light-color);
+
+  padding: var(--c-spacing-md) var(--c-spacing-md);
+  border-radius: var(--alert-radius);
+  position: relative;
+  overflow: hidden;
+  background-color: var(--alert-bg);
+  border: var(--alert-bd);
+  color: var(--alert-color);
+}
+
+.m_7636d522 {
+  display: flex;
+}
+
+.m_efaa4b73 {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--c-spacing-xs);
+}
+
+.m_69a4aa7 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: var(--c-font-size-sm);
+  font-weight: var(--c-font-weight-bold);
+}
+
+.m_69a4aa7:where([data-with-close-button]) {
+    padding-inline-end: var(--c-spacing-md);
+  }
+
+.m_625a743 {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.m_efad4e4a {
+  line-height: 1;
+  width: calc(1.25rem * var(--c-scale));
+  height: calc(1.25rem * var(--c-scale));
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin-inline-end: var(--c-spacing-md);
+  margin-top: calc(0.0625rem * var(--c-scale));
+}
+
+.m_50085096 {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  font-size: var(--c-font-size-sm);
+}
+
+:where([data-c-color-scheme='light']) .m_50085096 {
+    color: var(--c-color-black);
+}
+
+:where([data-c-color-scheme='dark']) .m_50085096 {
+    color: var(--c-color-white);
+}
+
+.m_50085096:where([data-variant='filled']) {
+    color: var(--alert-color);
+  }
+
+.m_50085096:where([data-variant='white']) {
+    color: var(--c-color-black);
+  }
+
+.m_91af3d78 {
+  width: calc(1.25rem * var(--c-scale));
+  height: calc(1.25rem * var(--c-scale));
+  color: var(--alert-color);
+}
+
 .m_31f351f9 {
   --ar-ratio: 1;
   max-width: 100%;
@@ -906,6 +989,65 @@ fieldset:disabled .c-active:active {
     display: inline-flex;
   }
 
+.m_504ae648 {
+  --cb-size-xs: calc(1.125rem * var(--c-scale));
+  --cb-size-sm: calc(1.375rem * var(--c-scale));
+  --cb-size-md: calc(1.75rem * var(--c-scale));
+  --cb-size-lg: calc(2.125rem * var(--c-scale));
+  --cb-size-xl: calc(2.75rem * var(--c-scale));
+
+  --cb-size: var(--cb-size-md);
+  --cb-icon-size: 70%;
+  --cb-radius: var(--c-radius-default);
+
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  user-select: none;
+
+  width: var(--cb-size);
+  height: var(--cb-size);
+  min-width: var(--cb-size);
+  min-height: var(--cb-size);
+  border-radius: var(--cb-radius);
+}
+
+  :where([data-c-color-scheme='light']) .m_504ae648 {
+    color: var(--c-color-gray-7);
+}
+
+  :where([data-c-color-scheme='dark']) .m_504ae648 {
+    color: var(--c-color-dark-1);
+}
+
+  .m_504ae648[data-disabled],
+  .m_504ae648:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+@media (hover: hover) {
+    :where([data-c-color-scheme='light']) .m_ef2dc695:where(:not([data-disabled], :disabled)):hover {
+      background-color: var(--c-color-gray-0);
+  }
+
+    :where([data-c-color-scheme='dark']) .m_ef2dc695:where(:not([data-disabled], :disabled)):hover {
+      background-color: var(--c-color-dark-6);
+  }
+}
+
+@media (hover: none) {
+    :where([data-c-color-scheme='light']) .m_ef2dc695:where(:not([data-disabled], :disabled)):active {
+      background-color: var(--c-color-gray-0);
+  }
+
+    :where([data-c-color-scheme='dark']) .m_ef2dc695:where(:not([data-disabled], :disabled)):active {
+      background-color: var(--c-color-dark-6);
+  }
+}
+
 .m_b03efeae {
   --container-size-xs: calc(33.75rem * var(--c-scale));
   --container-size-sm: calc(45rem * var(--c-scale));