@alfalab/core-components 41.14.1-beta.5 → 41.14.1-beta.7

package/underlay/constants.js

@@ -0,0 +1,74 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var BACKGROUND = [
+    'accent',
+    'info',
+    'attention-muted',
+    'positive-muted',
+    'negative-muted',
+    'primary',
+    'primary-inverted',
+    'secondary',
+    'secondary-inverted',
+    'tertiary',
+    'tertiary-inverted',
+    'quaternary',
+    'quaternary-inverted',
+    'specialbg-component',
+    'specialbg-component-inverted',
+    'specialbg-primary-grouped',
+    'specialbg-secondary-grouped',
+    'specialbg-tertiary-grouped',
+    'specialbg-secondary-transparent',
+    'specialbg-secondary-transparent-inverted',
+    'specialbg-tertiary-transparent',
+    'specialbg-tertiary-transparent-inverted',
+];
+var BORDER_COLOR = [
+    'accent',
+    'key',
+    'key-inverted',
+    'link',
+    'primary',
+    'primary-inverted',
+    'secondary',
+    'secondary-inverted',
+    'tertiary',
+    'tertiary-inverted',
+    'underline',
+    'underline-inverted',
+    'graphic-attention',
+    'graphic-link',
+    'graphic-negative',
+    'graphic-positive',
+    'specialbg-secondary-transparent',
+    'specialbg-secondary-transparent-inverted',
+    'specialbg-tertiary-transparent',
+    'specialbg-tertiary-transparent-inverted',
+];
+var SHADOW = [
+    'shadow-xs',
+    'shadow-s',
+    'shadow-m',
+    'shadow-l',
+    'shadow-xl',
+    'shadow-xs-hard',
+    'shadow-s-hard',
+    'shadow-m-hard',
+    'shadow-l-hard',
+    'shadow-xl-hard',
+    'shadow-xs-up',
+    'shadow-s-up',
+    'shadow-m-up',
+    'shadow-l-up',
+    'shadow-xl-up',
+    'shadow-xs-hard-up',
+    'shadow-s-hard-up',
+    'shadow-m-hard-up',
+    'shadow-l-hard-up',
+    'shadow-xl-hard-up',
+];
+
+exports.BACKGROUND = BACKGROUND;
+exports.BORDER_COLOR = BORDER_COLOR;
+exports.SHADOW = SHADOW;

package/underlay/cssm/Component.d.ts

@@ -6,341 +6,13 @@ declare const Underlay: React.ForwardRefExoticComponent<React.HTMLAttributes<HTM
         height?: string | number | undefined;
     } | undefined;
     padding?: string | {
-        top?: {
-            [x: number]: string;
-            link: (url: string) => string;
-            [Symbol.iterator]: () => IterableIterator<string>;
-            toString: () => string;
-            charAt: (pos: number) => string;
-            charCodeAt: (index: number) => number;
-            concat: (...strings: string[]) => string;
-            indexOf: (searchString: string, position?: number | undefined) => number;
-            lastIndexOf: (searchString: string, position?: number | undefined) => number;
-            localeCompare: {
-                (that: string): number;
-                (that: string, locales?: string | string[] | undefined, options?: Intl.CollatorOptions | undefined): number;
-            };
-            match: {
-                (regexp: string | RegExp): RegExpMatchArray | null;
-                (matcher: {
-                    [Symbol.match](string: string): RegExpMatchArray | null;
-                }): RegExpMatchArray | null;
-            };
-            replace: {
-                (searchValue: string | RegExp, replaceValue: string): string;
-                (searchValue: string | RegExp, replacer: (substring: string, ...args: any[]) => string): string;
-                (searchValue: {
-                    [Symbol.replace](string: string, replaceValue: string): string;
-                }, replaceValue: string): string;
-                (searchValue: {
-                    [Symbol.replace](string: string, replacer: (substring: string, ...args: any[]) => string): string;
-                }, replacer: (substring: string, ...args: any[]) => string): string;
-            };
-            search: {
-                (regexp: string | RegExp): number;
-                (searcher: {
-                    [Symbol.search](string: string): number;
-                }): number;
-            };
-            slice: (start?: number | undefined, end?: number | undefined) => string;
-            split: {
-                (separator: string | RegExp, limit?: number | undefined): string[];
-                (splitter: {
-                    [Symbol.split](string: string, limit?: number | undefined): string[];
-                }, limit?: number | undefined): string[];
-            };
-            substring: (start: number, end?: number | undefined) => string;
-            toLowerCase: () => string;
-            toLocaleLowerCase: (locales?: string | string[] | undefined) => string;
-            toUpperCase: () => string;
-            toLocaleUpperCase: (locales?: string | string[] | undefined) => string;
-            trim: () => string;
-            readonly length: number;
-            substr: (from: number, length?: number | undefined) => string;
-            valueOf: () => string;
-            codePointAt: (pos: number) => number | undefined;
-            includes: (searchString: string, position?: number | undefined) => boolean;
-            endsWith: (searchString: string, endPosition?: number | undefined) => boolean;
-            normalize: {
-                (form: "NFC" | "NFD" | "NFKC" | "NFKD"): string;
-                (form?: string | undefined): string;
-            };
-            repeat: (count: number) => string;
-            startsWith: (searchString: string, position?: number | undefined) => boolean;
-            anchor: (name: string) => string;
-            big: () => string;
-            blink: () => string;
-            bold: () => string;
-            fixed: () => string;
-            fontcolor: (color: string) => string;
-            fontsize: {
-                (size: number): string;
-                (size: string): string;
-            };
-            italics: () => string;
-            small: () => string;
-            strike: () => string;
-            sub: () => string;
-            sup: () => string;
-            padStart: (maxLength: number, fillString?: string | undefined) => string;
-            padEnd: (maxLength: number, fillString?: string | undefined) => string;
-            trimLeft: () => string;
-            trimRight: () => string;
-            trimStart: () => string;
-            trimEnd: () => string;
-        } | undefined;
-        right?: {
-            [x: number]: string;
-            link: (url: string) => string;
-            [Symbol.iterator]: () => IterableIterator<string>;
-            toString: () => string;
-            charAt: (pos: number) => string;
-            charCodeAt: (index: number) => number;
-            concat: (...strings: string[]) => string;
-            indexOf: (searchString: string, position?: number | undefined) => number;
-            lastIndexOf: (searchString: string, position?: number | undefined) => number;
-            localeCompare: {
-                (that: string): number;
-                (that: string, locales?: string | string[] | undefined, options?: Intl.CollatorOptions | undefined): number;
-            };
-            match: {
-                (regexp: string | RegExp): RegExpMatchArray | null;
-                (matcher: {
-                    [Symbol.match](string: string): RegExpMatchArray | null;
-                }): RegExpMatchArray | null;
-            };
-            replace: {
-                (searchValue: string | RegExp, replaceValue: string): string;
-                (searchValue: string | RegExp, replacer: (substring: string, ...args: any[]) => string): string;
-                (searchValue: {
-                    [Symbol.replace](string: string, replaceValue: string): string;
-                }, replaceValue: string): string;
-                (searchValue: {
-                    [Symbol.replace](string: string, replacer: (substring: string, ...args: any[]) => string): string;
-                }, replacer: (substring: string, ...args: any[]) => string): string;
-            };
-            search: {
-                (regexp: string | RegExp): number;
-                (searcher: {
-                    [Symbol.search](string: string): number;
-                }): number;
-            };
-            slice: (start?: number | undefined, end?: number | undefined) => string;
-            split: {
-                (separator: string | RegExp, limit?: number | undefined): string[];
-                (splitter: {
-                    [Symbol.split](string: string, limit?: number | undefined): string[];
-                }, limit?: number | undefined): string[];
-            };
-            substring: (start: number, end?: number | undefined) => string;
-            toLowerCase: () => string;
-            toLocaleLowerCase: (locales?: string | string[] | undefined) => string;
-            toUpperCase: () => string;
-            toLocaleUpperCase: (locales?: string | string[] | undefined) => string;
-            trim: () => string;
-            readonly length: number;
-            substr: (from: number, length?: number | undefined) => string;
-            valueOf: () => string;
-            codePointAt: (pos: number) => number | undefined;
-            includes: (searchString: string, position?: number | undefined) => boolean;
-            endsWith: (searchString: string, endPosition?: number | undefined) => boolean;
-            normalize: {
-                (form: "NFC" | "NFD" | "NFKC" | "NFKD"): string;
-                (form?: string | undefined): string;
-            };
-            repeat: (count: number) => string;
-            startsWith: (searchString: string, position?: number | undefined) => boolean;
-            anchor: (name: string) => string;
-            big: () => string;
-            blink: () => string;
-            bold: () => string;
-            fixed: () => string;
-            fontcolor: (color: string) => string;
-            fontsize: {
-                (size: number): string;
-                (size: string): string;
-            };
-            italics: () => string;
-            small: () => string;
-            strike: () => string;
-            sub: () => string;
-            sup: () => string;
-            padStart: (maxLength: number, fillString?: string | undefined) => string;
-            padEnd: (maxLength: number, fillString?: string | undefined) => string;
-            trimLeft: () => string;
-            trimRight: () => string;
-            trimStart: () => string;
-            trimEnd: () => string;
-        } | undefined;
-        bottom?: {
-            [x: number]: string;
-            link: (url: string) => string;
-            [Symbol.iterator]: () => IterableIterator<string>;
-            toString: () => string;
-            charAt: (pos: number) => string;
-            charCodeAt: (index: number) => number;
-            concat: (...strings: string[]) => string;
-            indexOf: (searchString: string, position?: number | undefined) => number;
-            lastIndexOf: (searchString: string, position?: number | undefined) => number;
-            localeCompare: {
-                (that: string): number;
-                (that: string, locales?: string | string[] | undefined, options?: Intl.CollatorOptions | undefined): number;
-            };
-            match: {
-                (regexp: string | RegExp): RegExpMatchArray | null;
-                (matcher: {
-                    [Symbol.match](string: string): RegExpMatchArray | null;
-                }): RegExpMatchArray | null;
-            };
-            replace: {
-                (searchValue: string | RegExp, replaceValue: string): string;
-                (searchValue: string | RegExp, replacer: (substring: string, ...args: any[]) => string): string;
-                (searchValue: {
-                    [Symbol.replace](string: string, replaceValue: string): string;
-                }, replaceValue: string): string;
-                (searchValue: {
-                    [Symbol.replace](string: string, replacer: (substring: string, ...args: any[]) => string): string;
-                }, replacer: (substring: string, ...args: any[]) => string): string;
-            };
-            search: {
-                (regexp: string | RegExp): number;
-                (searcher: {
-                    [Symbol.search](string: string): number;
-                }): number;
-            };
-            slice: (start?: number | undefined, end?: number | undefined) => string;
-            split: {
-                (separator: string | RegExp, limit?: number | undefined): string[];
-                (splitter: {
-                    [Symbol.split](string: string, limit?: number | undefined): string[];
-                }, limit?: number | undefined): string[];
-            };
-            substring: (start: number, end?: number | undefined) => string;
-            toLowerCase: () => string;
-            toLocaleLowerCase: (locales?: string | string[] | undefined) => string;
-            toUpperCase: () => string;
-            toLocaleUpperCase: (locales?: string | string[] | undefined) => string;
-            trim: () => string;
-            readonly length: number;
-            substr: (from: number, length?: number | undefined) => string;
-            valueOf: () => string;
-            codePointAt: (pos: number) => number | undefined;
-            includes: (searchString: string, position?: number | undefined) => boolean;
-            endsWith: (searchString: string, endPosition?: number | undefined) => boolean;
-            normalize: {
-                (form: "NFC" | "NFD" | "NFKC" | "NFKD"): string;
-                (form?: string | undefined): string;
-            };
-            repeat: (count: number) => string;
-            startsWith: (searchString: string, position?: number | undefined) => boolean;
-            anchor: (name: string) => string;
-            big: () => string;
-            blink: () => string;
-            bold: () => string;
-            fixed: () => string;
-            fontcolor: (color: string) => string;
-            fontsize: {
-                (size: number): string;
-                (size: string): string;
-            };
-            italics: () => string;
-            small: () => string;
-            strike: () => string;
-            sub: () => string;
-            sup: () => string;
-            padStart: (maxLength: number, fillString?: string | undefined) => string;
-            padEnd: (maxLength: number, fillString?: string | undefined) => string;
-            trimLeft: () => string;
-            trimRight: () => string;
-            trimStart: () => string;
-            trimEnd: () => string;
-        } | undefined;
-        left?: {
-            [x: number]: string;
-            link: (url: string) => string;
-            [Symbol.iterator]: () => IterableIterator<string>;
-            toString: () => string;
-            charAt: (pos: number) => string;
-            charCodeAt: (index: number) => number;
-            concat: (...strings: string[]) => string;
-            indexOf: (searchString: string, position?: number | undefined) => number;
-            lastIndexOf: (searchString: string, position?: number | undefined) => number;
-            localeCompare: {
-                (that: string): number;
-                (that: string, locales?: string | string[] | undefined, options?: Intl.CollatorOptions | undefined): number;
-            };
-            match: {
-                (regexp: string | RegExp): RegExpMatchArray | null;
-                (matcher: {
-                    [Symbol.match](string: string): RegExpMatchArray | null;
-                }): RegExpMatchArray | null;
-            };
-            replace: {
-                (searchValue: string | RegExp, replaceValue: string): string;
-                (searchValue: string | RegExp, replacer: (substring: string, ...args: any[]) => string): string;
-                (searchValue: {
-                    [Symbol.replace](string: string, replaceValue: string): string;
-                }, replaceValue: string): string;
-                (searchValue: {
-                    [Symbol.replace](string: string, replacer: (substring: string, ...args: any[]) => string): string;
-                }, replacer: (substring: string, ...args: any[]) => string): string;
-            };
-            search: {
-                (regexp: string | RegExp): number;
-                (searcher: {
-                    [Symbol.search](string: string): number;
-                }): number;
-            };
-            slice: (start?: number | undefined, end?: number | undefined) => string;
-            split: {
-                (separator: string | RegExp, limit?: number | undefined): string[];
-                (splitter: {
-                    [Symbol.split](string: string, limit?: number | undefined): string[];
-                }, limit?: number | undefined): string[];
-            };
-            substring: (start: number, end?: number | undefined) => string;
-            toLowerCase: () => string;
-            toLocaleLowerCase: (locales?: string | string[] | undefined) => string;
-            toUpperCase: () => string;
-            toLocaleUpperCase: (locales?: string | string[] | undefined) => string;
-            trim: () => string;
-            readonly length: number;
-            substr: (from: number, length?: number | undefined) => string;
-            valueOf: () => string;
-            codePointAt: (pos: number) => number | undefined;
-            includes: (searchString: string, position?: number | undefined) => boolean;
-            endsWith: (searchString: string, endPosition?: number | undefined) => boolean;
-            normalize: {
-                (form: "NFC" | "NFD" | "NFKC" | "NFKD"): string;
-                (form?: string | undefined): string;
-            };
-            repeat: (count: number) => string;
-            startsWith: (searchString: string, position?: number | undefined) => boolean;
-            anchor: (name: string) => string;
-            big: () => string;
-            blink: () => string;
-            bold: () => string;
-            fixed: () => string;
-            fontcolor: (color: string) => string;
-            fontsize: {
-                (size: number): string;
-                (size: string): string;
-            };
-            italics: () => string;
-            small: () => string;
-            strike: () => string;
-            sub: () => string;
-            sup: () => string;
-            padStart: (maxLength: number, fillString?: string | undefined) => string;
-            padEnd: (maxLength: number, fillString?: string | undefined) => string;
-            trimLeft: () => string;
-            trimRight: () => string;
-            trimStart: () => string;
-            trimEnd: () => string;
-        } | undefined;
+        top?: import("./types").UnderlayPaddingSize | undefined;
+        right?: import("./types").UnderlayPaddingSize | undefined;
+        bottom?: import("./types").UnderlayPaddingSize | undefined;
+        left?: import("./types").UnderlayPaddingSize | undefined;
     } | undefined;
-    borderRadius?: import("./types").BorderRadiusType | import("./types").CornersRadiusType | undefined;
-    backgroundColor?: import("./index-425c8522").BackgroundColorType | undefined;
+    borderRadius?: import("./types").UnderlayBorderRadius | import("./types").CornersRadiusType | undefined;
+    backgroundColor?: string | undefined;
     borderSize?: import("./types").BorderSizeType | undefined;
     borderColor?: import("./index-425c8522").BorderColorType | undefined;
     overflow?: boolean | undefined;

package/underlay/cssm/Component.js

@@ -5,6 +5,7 @@ var cn = require('classnames');
 var utils_getBorderCorners = require('./utils/getBorderCorners.js');
 var utils_getClasses = require('./utils/getClasses.js');
 var styles = require('./index.module.css');
+require('./constants.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -65,11 +66,15 @@ var Underlay = React.forwardRef(function (_a, ref) {
         _b);
     var bordersStyles = utils_getBorderCorners.getBorderCorners(borderRadius);
     var contentBordersStyles = utils_getBorderCorners.getBorderCorners(contentProps === null || contentProps === void 0 ? void 0 : contentProps.borderRadius);
-    return (React__default.default.createElement("div", __assign({ ref: ref, style: __assign({}, dimensions), className: cn__default.default(styles__default.default.component, paddingStyles, bordersStyles, utils_getClasses.getClasses(backgroundColor, borderColor, borderSize, shadow), (_c = {}, _c[styles__default.default.overflowHide] = !overflow, _c), className), "data-test-id": dataTestId }, restProps),
-        React__default.default.createElement("div", { style: (contentProps === null || contentProps === void 0 ? void 0 : contentProps.backgroundImageURL)
-                ? { backgroundImage: "url(".concat(contentProps.backgroundImageURL, ")") }
-                : undefined, className: cn__default.default(styles__default.default.content, (_d = {}, _d[styles__default.default.backgroundImage] = contentProps === null || contentProps === void 0 ? void 0 : contentProps.backgroundImageURL, _d), contentBordersStyles, utils_getClasses.getClasses(contentProps === null || contentProps === void 0 ? void 0 : contentProps.backgroundColor, contentProps === null || contentProps === void 0 ? void 0 : contentProps.borderColor, contentProps === null || contentProps === void 0 ? void 0 : contentProps.borderSize, contentProps === null || contentProps === void 0 ? void 0 : contentProps.shadow), (contentProps === null || contentProps === void 0 ? void 0 : contentProps.axis) && styles__default.default["direction-".concat(contentProps.axis)], (contentProps === null || contentProps === void 0 ? void 0 : contentProps.alignment) && styles__default.default["align-".concat(contentProps.alignment)], (contentProps === null || contentProps === void 0 ? void 0 : contentProps.justifyContent) &&
-                styles__default.default["justify-".concat(contentProps.justifyContent)]) }, children)));
+    var underlayStyles = __assign(__assign({}, dimensions), (utils_getClasses.isBackgroundToken(backgroundColor) ? {} : { backgroundColor: backgroundColor }));
+    var contentStyles = __assign(__assign({}, (utils_getClasses.isBackgroundToken(contentProps === null || contentProps === void 0 ? void 0 : contentProps.backgroundColor)
+        ? {}
+        : { backgroundColor: contentProps === null || contentProps === void 0 ? void 0 : contentProps.backgroundColor })), ((contentProps === null || contentProps === void 0 ? void 0 : contentProps.backgroundImageURL)
+        ? { backgroundImage: "url(".concat(contentProps.backgroundImageURL, ")") }
+        : {}));
+    return (React__default.default.createElement("div", __assign({ ref: ref, style: underlayStyles, className: cn__default.default(styles__default.default.component, paddingStyles, bordersStyles, utils_getClasses.getClasses(backgroundColor, borderColor, borderSize, shadow), (_c = {}, _c[styles__default.default.overflowHide] = !overflow, _c), className), "data-test-id": dataTestId }, restProps),
+        React__default.default.createElement("div", { style: contentStyles, className: cn__default.default(styles__default.default.content, (_d = {}, _d[styles__default.default.backgroundImage] = contentProps === null || contentProps === void 0 ? void 0 : contentProps.backgroundImageURL, _d), contentBordersStyles, utils_getClasses.getClasses(contentProps === null || contentProps === void 0 ? void 0 : contentProps.backgroundColor, contentProps === null || contentProps === void 0 ? void 0 : contentProps.borderColor, contentProps === null || contentProps === void 0 ? void 0 : contentProps.borderSize, contentProps === null || contentProps === void 0 ? void 0 : contentProps.shadow), (contentProps === null || contentProps === void 0 ? void 0 : contentProps.axis) && styles__default.default["direction-".concat(contentProps.axis)], (contentProps === null || contentProps === void 0 ? void 0 : contentProps.alignment) && styles__default.default["align-".concat(contentProps.alignment)], (contentProps === null || contentProps === void 0 ? void 0 : contentProps.justifyContent) &&
+                styles__default.default["justify-".concat(contentProps.justifyContent)], contentProps === null || contentProps === void 0 ? void 0 : contentProps.className) }, children)));
 });
 
 exports.Underlay = Underlay;

package/underlay/cssm/constants.d.ts

@@ -0,0 +1,4 @@
+declare const BACKGROUND: string[];
+declare const BORDER_COLOR: string[];
+declare const SHADOW: string[];
+export { BACKGROUND, BORDER_COLOR, SHADOW };

package/underlay/cssm/constants.js

@@ -0,0 +1,74 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var BACKGROUND = [
+    'accent',
+    'info',
+    'attention-muted',
+    'positive-muted',
+    'negative-muted',
+    'primary',
+    'primary-inverted',
+    'secondary',
+    'secondary-inverted',
+    'tertiary',
+    'tertiary-inverted',
+    'quaternary',
+    'quaternary-inverted',
+    'specialbg-component',
+    'specialbg-component-inverted',
+    'specialbg-primary-grouped',
+    'specialbg-secondary-grouped',
+    'specialbg-tertiary-grouped',
+    'specialbg-secondary-transparent',
+    'specialbg-secondary-transparent-inverted',
+    'specialbg-tertiary-transparent',
+    'specialbg-tertiary-transparent-inverted',
+];
+var BORDER_COLOR = [
+    'accent',
+    'key',
+    'key-inverted',
+    'link',
+    'primary',
+    'primary-inverted',
+    'secondary',
+    'secondary-inverted',
+    'tertiary',
+    'tertiary-inverted',
+    'underline',
+    'underline-inverted',
+    'graphic-attention',
+    'graphic-link',
+    'graphic-negative',
+    'graphic-positive',
+    'specialbg-secondary-transparent',
+    'specialbg-secondary-transparent-inverted',
+    'specialbg-tertiary-transparent',
+    'specialbg-tertiary-transparent-inverted',
+];
+var SHADOW = [
+    'shadow-xs',
+    'shadow-s',
+    'shadow-m',
+    'shadow-l',
+    'shadow-xl',
+    'shadow-xs-hard',
+    'shadow-s-hard',
+    'shadow-m-hard',
+    'shadow-l-hard',
+    'shadow-xl-hard',
+    'shadow-xs-up',
+    'shadow-s-up',
+    'shadow-m-up',
+    'shadow-l-up',
+    'shadow-xl-up',
+    'shadow-xs-hard-up',
+    'shadow-s-hard-up',
+    'shadow-m-hard-up',
+    'shadow-l-hard-up',
+    'shadow-xl-hard-up',
+];
+
+exports.BACKGROUND = BACKGROUND;
+exports.BORDER_COLOR = BORDER_COLOR;
+exports.SHADOW = SHADOW;

package/underlay/cssm/index.d.ts

@@ -1 +1,2 @@
 export * from "./Component";
+export type { UnderlayBorderRadius, UnderlayPaddingSize } from "./types";

package/underlay/cssm/index.js

@@ -6,6 +6,7 @@ require('classnames');
 require('./utils/getBorderCorners.js');
 require('./index.module.css');
 require('./utils/getClasses.js');
+require('./constants.js');
 
 
 

package/underlay/cssm/index.module.css

@@ -101,6 +101,8 @@
     --gap-2xl: 32px;
     --gap-3xl: 40px;
     --gap-4xl: 48px;
+    --gap-5xl: 64px;
+    --gap-6xl: 72px;
 } :root {
 } :root {
 } .component {
@@ -237,6 +239,22 @@
         padding-bottom: var(--gap-4xl);
     } .padding-left-4xl {
         padding-left: var(--gap-4xl);
+    } .padding-top-5xl {
+        padding-top: var(--gap-5xl);
+    } .padding-right-5xl {
+        padding-right: var(--gap-5xl);
+    } .padding-bottom-5xl {
+        padding-bottom: var(--gap-5xl);
+    } .padding-left-5xl {
+        padding-left: var(--gap-5xl);
+    } .padding-top-6xl {
+        padding-top: var(--gap-6xl);
+    } .padding-right-6xl {
+        padding-right: var(--gap-6xl);
+    } .padding-bottom-6xl {
+        padding-bottom: var(--gap-6xl);
+    } .padding-left-6xl {
+        padding-left: var(--gap-6xl);
     } .border-bottom-left-xs {
         border-bottom-left-radius: var(--border-radius-xs);
     } .border-bottom-right-xs {

package/underlay/cssm/types.d.ts

@@ -1,25 +1,25 @@
 /// <reference types="react" />
 import React from 'react';
-import { BackgroundColorType, BorderColorType, GapType, ShadowType } from "./index-425c8522";
-type PaddingSize = Omit<GapType, '5xl' | '6xl' | '7xl' | '8xl'>;
+import { BorderColorType, GapType, ShadowType } from "./index-425c8522";
+type UnderlayPaddingSize = Exclude<GapType, '7xl' | '8xl'>;
+type UnderlayBorderRadius = 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | '3xl';
+type BorderSizeType = 1 | 2 | 4;
 type PaddingType = {
-    top?: PaddingSize;
-    right?: PaddingSize;
-    bottom?: PaddingSize;
-    left?: PaddingSize;
+    top?: UnderlayPaddingSize;
+    right?: UnderlayPaddingSize;
+    bottom?: UnderlayPaddingSize;
+    left?: UnderlayPaddingSize;
 };
-type BorderRadiusType = 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | '3xl';
 type CornersRadiusType = {
-    bottomRight?: BorderRadiusType;
-    bottomLeft?: BorderRadiusType;
-    topRight?: BorderRadiusType;
-    topLeft?: BorderRadiusType;
+    bottomRight?: UnderlayBorderRadius;
+    bottomLeft?: UnderlayBorderRadius;
+    topRight?: UnderlayBorderRadius;
+    topLeft?: UnderlayBorderRadius;
 };
 type DimensionsType = {
     width?: number | string;
     height?: number | string;
 };
-type BorderSizeType = 1 | 2 | 4;
 type ContentPropsType = {
     /**
      * Ширина бордера у контента
@@ -32,11 +32,11 @@ type ContentPropsType = {
     /**
      * Радиус бордера у контента
      */
-    borderRadius?: BorderRadiusType | CornersRadiusType;
+    borderRadius?: UnderlayBorderRadius | CornersRadiusType;
     /**
      * Цвет фона у контента
      */
-    backgroundColor?: BackgroundColorType;
+    backgroundColor?: string;
     /**
      * Ссылка на изображение для фона
      */
@@ -57,6 +57,10 @@ type ContentPropsType = {
      * Выравнивание контента
      */
     justifyContent?: 'start' | 'end' | 'center';
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
 };
 type UnderlayProps = React.HTMLAttributes<HTMLDivElement> & {
     /**
@@ -70,11 +74,11 @@ type UnderlayProps = React.HTMLAttributes<HTMLDivElement> & {
     /**
      * Радиус бордера
      */
-    borderRadius?: BorderRadiusType | CornersRadiusType;
+    borderRadius?: UnderlayBorderRadius | CornersRadiusType;
     /**
      * Цвет фона
      */
-    backgroundColor?: BackgroundColorType;
+    backgroundColor?: string;
     /**
      * Ширина бордера
      */
@@ -109,4 +113,4 @@ type UnderlayProps = React.HTMLAttributes<HTMLDivElement> & {
      */
     children?: React.ReactNode;
 };
-export { BorderRadiusType, CornersRadiusType, BorderSizeType, ContentPropsType, UnderlayProps };
+export { UnderlayPaddingSize, UnderlayBorderRadius, BorderSizeType, CornersRadiusType, ContentPropsType, UnderlayProps };

package/underlay/cssm/utils/getBorderCorners.d.ts

@@ -1,5 +1,5 @@
-import { BorderRadiusType, CornersRadiusType } from "../types";
-declare const getBorderCorners: (borderRadius: BorderRadiusType | CornersRadiusType | undefined) => {
-    [x: string]: BorderRadiusType | undefined;
+import { CornersRadiusType, UnderlayBorderRadius } from "../types";
+declare const getBorderCorners: (borderRadius: UnderlayBorderRadius | CornersRadiusType | undefined) => {
+    [x: string]: UnderlayBorderRadius | undefined;
 } | undefined;
 export { getBorderCorners };