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

package/typography/modern/component.js

@@ -4,9 +4,9 @@ import { TitleMobile } from './title-mobile/component.js';
 import { TitleResponsive } from './title-responsive/component.js';
 import 'react';
 import 'classnames';
-import './colors.module-f64b3c7e.js';
+import './colors.module-354bcf8c.js';
 import './title/component.js';
-import './common.module-6bdfb86a.js';
+import './common.module-beba3656.js';
 
 const Typography = {
     Title,

package/typography/modern/index.js

@@ -3,9 +3,9 @@ export { typographyPresets } from './presets.js';
 import './text/component.js';
 import 'react';
 import 'classnames';
-import './colors.module-f64b3c7e.js';
+import './colors.module-354bcf8c.js';
 import './title/index.js';
 import './title/component.js';
-import './common.module-6bdfb86a.js';
+import './common.module-beba3656.js';
 import './title-mobile/component.js';
 import './title-responsive/component.js';

package/typography/modern/text/component.js

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 import cn from 'classnames';
-import { c as colors } from '../colors.module-f64b3c7e.js';
+import { c as colors } from '../colors.module-354bcf8c.js';
 
 const styles = {"paragraph":"typography__paragraph_1jy4n","paragraphWithMargins":"typography__paragraphWithMargins_1jy4n","primary-large":"typography__primary-large_1jy4n","primary-medium":"typography__primary-medium_1jy4n","primary-small":"typography__primary-small_1jy4n","secondary-large":"typography__secondary-large_1jy4n","secondary-medium":"typography__secondary-medium_1jy4n","secondary-small":"typography__secondary-small_1jy4n","component":"typography__component_1jy4n","caps":"typography__caps_1jy4n","bold":"typography__bold_1jy4n","medium":"typography__medium_1jy4n","regular":"typography__regular_1jy4n","monospace":"typography__monospace_1jy4n","rowLimit1":"typography__rowLimit1_1jy4n","rowLimit2":"typography__rowLimit2_1jy4n","rowLimit3":"typography__rowLimit3_1jy4n"};
 require('./index.css');

package/typography/modern/text/index.js

@@ -1,4 +1,4 @@
 export { Text } from './component.js';
 import 'react';
 import 'classnames';
-import '../colors.module-f64b3c7e.js';
+import '../colors.module-354bcf8c.js';

package/typography/modern/title/component.js

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 import cn from 'classnames';
-import { c as colors } from '../colors.module-f64b3c7e.js';
+import { c as colors } from '../colors.module-354bcf8c.js';
 
 const Title = forwardRef(({ tag: Component = 'div', view = 'medium', font = 'styrene', weight = font === 'styrene' ? 'medium' : 'bold', defaultMargins = false, color, className, dataTestId, children, rowLimit, styles, ...restProps }, ref) => (React.createElement(Component, { className: cn(styles.component, className, styles[`${font}-${view}`], defaultMargins && styles[`margins-${view}`], styles[weight], color && colors[color], { [styles[`rowLimit${rowLimit}`]]: rowLimit }), "data-test-id": dataTestId, ref: ref, ...restProps }, children)));
 

package/typography/modern/title/index.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Title as Title$1 } from './component.js';
-import { c as commonStyles } from '../common.module-6bdfb86a.js';
+import { c as commonStyles } from '../common.module-beba3656.js';
 import 'classnames';
-import '../colors.module-f64b3c7e.js';
+import '../colors.module-354bcf8c.js';
 
 const styles = {"styrene-xlarge":"typography__styrene-xlarge_tgic8","styrene-large":"typography__styrene-large_tgic8","styrene-medium":"typography__styrene-medium_tgic8","styrene-small":"typography__styrene-small_tgic8","styrene-xsmall":"typography__styrene-xsmall_tgic8","system-xlarge":"typography__system-xlarge_tgic8","system-large":"typography__system-large_tgic8","system-medium":"typography__system-medium_tgic8","system-small":"typography__system-small_tgic8","system-xsmall":"typography__system-xsmall_tgic8","margins-xlarge":"typography__margins-xlarge_tgic8","margins-large":"typography__margins-large_tgic8","margins-medium":"typography__margins-medium_tgic8","margins-small":"typography__margins-small_tgic8","margins-xsmall":"typography__margins-xsmall_tgic8","rowLimit1":"typography__rowLimit1_tgic8","rowLimit2":"typography__rowLimit2_tgic8","rowLimit3":"typography__rowLimit3_tgic8"};
 require('./index.css');

package/typography/modern/title-mobile/component.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Title } from '../title/component.js';
-import { c as commonStyles } from '../common.module-6bdfb86a.js';
+import { c as commonStyles } from '../common.module-beba3656.js';
 import 'classnames';
-import '../colors.module-f64b3c7e.js';
+import '../colors.module-354bcf8c.js';
 
 const styles = {"styrene-xlarge":"typography__styrene-xlarge_1esws","styrene-large":"typography__styrene-large_1esws","styrene-medium":"typography__styrene-medium_1esws","styrene-small":"typography__styrene-small_1esws","styrene-xsmall":"typography__styrene-xsmall_1esws","system-xlarge":"typography__system-xlarge_1esws","system-large":"typography__system-large_1esws","system-medium":"typography__system-medium_1esws","system-small":"typography__system-small_1esws","system-xsmall":"typography__system-xsmall_1esws"};
 require('./index.css');

package/typography/modern/title-mobile/index.js

@@ -2,5 +2,5 @@ export { TitleMobile } from './component.js';
 import 'react';
 import '../title/component.js';
 import 'classnames';
-import '../colors.module-f64b3c7e.js';
-import '../common.module-6bdfb86a.js';
+import '../colors.module-354bcf8c.js';
+import '../common.module-beba3656.js';

package/typography/modern/title-responsive/component.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Title } from '../title/component.js';
-import { c as commonStyles } from '../common.module-6bdfb86a.js';
+import { c as commonStyles } from '../common.module-beba3656.js';
 import 'classnames';
-import '../colors.module-f64b3c7e.js';
+import '../colors.module-354bcf8c.js';
 
 const styles = {"styrene-xlarge":"typography__styrene-xlarge_1th3c","styrene-large":"typography__styrene-large_1th3c","styrene-medium":"typography__styrene-medium_1th3c","styrene-small":"typography__styrene-small_1th3c","styrene-xsmall":"typography__styrene-xsmall_1th3c","system-xlarge":"typography__system-xlarge_1th3c","system-large":"typography__system-large_1th3c","system-medium":"typography__system-medium_1th3c","system-small":"typography__system-small_1th3c","system-xsmall":"typography__system-xsmall_1th3c","margins-xlarge":"typography__margins-xlarge_1th3c","margins-large":"typography__margins-large_1th3c","margins-medium":"typography__margins-medium_1th3c","margins-small":"typography__margins-small_1th3c","margins-xsmall":"typography__margins-xsmall_1th3c"};
 require('./index.css');

package/typography/modern/title-responsive/index.js

@@ -2,5 +2,5 @@ export { TitleResponsive } from './component.js';
 import 'react';
 import '../title/component.js';
 import 'classnames';
-import '../colors.module-f64b3c7e.js';
-import '../common.module-6bdfb86a.js';
+import '../colors.module-354bcf8c.js';
+import '../common.module-beba3656.js';

package/typography/text/component.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
-var colors_module = require('../colors.module-eb482bb6.js');
+var colors_module = require('../colors.module-806ca161.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/typography/text/index.js

@@ -4,7 +4,7 @@ var text_component = require('./component.js');
 require('tslib');
 require('react');
 require('classnames');
-require('../colors.module-eb482bb6.js');
+require('../colors.module-806ca161.js');
 
 
 

package/typography/title/component.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
-var colors_module = require('../colors.module-eb482bb6.js');
+var colors_module = require('../colors.module-806ca161.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/typography/title/index.js

@@ -3,9 +3,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var title_component = require('./component.js');
-var common_module = require('../common.module-a2f1ba21.js');
+var common_module = require('../common.module-97b12db3.js');
 require('classnames');
-require('../colors.module-eb482bb6.js');
+require('../colors.module-806ca161.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/typography/title-mobile/component.js

@@ -3,9 +3,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var title_component = require('../title/component.js');
-var common_module = require('../common.module-a2f1ba21.js');
+var common_module = require('../common.module-97b12db3.js');
 require('classnames');
-require('../colors.module-eb482bb6.js');
+require('../colors.module-806ca161.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/typography/title-mobile/index.js

@@ -5,8 +5,8 @@ require('tslib');
 require('react');
 require('../title/component.js');
 require('classnames');
-require('../colors.module-eb482bb6.js');
-require('../common.module-a2f1ba21.js');
+require('../colors.module-806ca161.js');
+require('../common.module-97b12db3.js');
 
 
 

package/typography/title-responsive/component.js

@@ -3,9 +3,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var title_component = require('../title/component.js');
-var common_module = require('../common.module-a2f1ba21.js');
+var common_module = require('../common.module-97b12db3.js');
 require('classnames');
-require('../colors.module-eb482bb6.js');
+require('../colors.module-806ca161.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/typography/title-responsive/index.js

@@ -5,8 +5,8 @@ require('tslib');
 require('react');
 require('../title/component.js');
 require('classnames');
-require('../colors.module-eb482bb6.js');
-require('../common.module-a2f1ba21.js');
+require('../colors.module-806ca161.js');
+require('../common.module-97b12db3.js');
 
 
 

package/underlay/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/Component.js

@@ -4,7 +4,8 @@ var React = require('react');
 var cn = require('classnames');
 var utils_getBorderCorners = require('./utils/getBorderCorners.js');
 var utils_getClasses = require('./utils/getClasses.js');
-var index_module = require('./index.module-d408d4aa.js');
+var index_module = require('./index.module-3c227e8a.js');
+require('./constants.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -64,11 +65,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(index_module.styles.component, paddingStyles, bordersStyles, utils_getClasses.getClasses(backgroundColor, borderColor, borderSize, shadow), (_c = {}, _c[index_module.styles.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(index_module.styles.content, (_d = {}, _d[index_module.styles.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) && index_module.styles["direction-".concat(contentProps.axis)], (contentProps === null || contentProps === void 0 ? void 0 : contentProps.alignment) && index_module.styles["align-".concat(contentProps.alignment)], (contentProps === null || contentProps === void 0 ? void 0 : contentProps.justifyContent) &&
-                index_module.styles["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(index_module.styles.component, paddingStyles, bordersStyles, utils_getClasses.getClasses(backgroundColor, borderColor, borderSize, shadow), (_c = {}, _c[index_module.styles.overflowHide] = !overflow, _c), className), "data-test-id": dataTestId }, restProps),
+        React__default.default.createElement("div", { style: contentStyles, className: cn__default.default(index_module.styles.content, (_d = {}, _d[index_module.styles.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) && index_module.styles["direction-".concat(contentProps.axis)], (contentProps === null || contentProps === void 0 ? void 0 : contentProps.alignment) && index_module.styles["align-".concat(contentProps.alignment)], (contentProps === null || contentProps === void 0 ? void 0 : contentProps.justifyContent) &&
+                index_module.styles["justify-".concat(contentProps.justifyContent)], contentProps === null || contentProps === void 0 ? void 0 : contentProps.className) }, children)));
 });
 
 exports.Underlay = Underlay;

package/underlay/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 };