@alfalab/core-components 41.15.0 → 41.16.0

package/underlay/modern/Component.d.ts

@@ -1,400 +1,25 @@
 /// <reference types="react" />
 import React from 'react';
 declare const Underlay: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    dimensions?: {
+        width?: string | number | undefined;
+        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;
-            trimEnd: {
-                (): string;
-                (): string;
-            };
-            trimStart: {
-                (): string;
-                (): string;
-            };
-            trimLeft: {
-                (): string;
-                (): string;
-            };
-            trimRight: {
-                (): string;
-                (): string;
-            };
-            matchAll: (regexp: RegExp) => IterableIterator<RegExpMatchArray>;
-        } | 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;
-            trimEnd: {
-                (): string;
-                (): string;
-            };
-            trimStart: {
-                (): string;
-                (): string;
-            };
-            trimLeft: {
-                (): string;
-                (): string;
-            };
-            trimRight: {
-                (): string;
-                (): string;
-            };
-            matchAll: (regexp: RegExp) => IterableIterator<RegExpMatchArray>;
-        } | 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;
-            trimEnd: {
-                (): string;
-                (): string;
-            };
-            trimStart: {
-                (): string;
-                (): string;
-            };
-            trimLeft: {
-                (): string;
-                (): string;
-            };
-            trimRight: {
-                (): string;
-                (): string;
-            };
-            matchAll: (regexp: RegExp) => IterableIterator<RegExpMatchArray>;
-        } | 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;
-            trimEnd: {
-                (): string;
-                (): string;
-            };
-            trimStart: {
-                (): string;
-                (): string;
-            };
-            trimLeft: {
-                (): string;
-                (): string;
-            };
-            trimRight: {
-                (): string;
-                (): string;
-            };
-            matchAll: (regexp: RegExp) => IterableIterator<RegExpMatchArray>;
-        } | undefined;
+        top?: import("./types").UnderlayPaddingSize | undefined;
+        right?: import("./types").UnderlayPaddingSize | undefined;
+        bottom?: import("./types").UnderlayPaddingSize | undefined;
+        left?: import("./types").UnderlayPaddingSize | undefined;
     } | undefined;
-    borderRadius?: ("m" | "l" | "xl" | "xxl") | undefined;
-    backgroundColor?: import("./types").BackgroundColorType | undefined;
-    borderSize?: 1 | 2 | 4 | undefined;
-    borderColor?: import("./types").BorderColorType | 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;
-    shadow?: import("./types").ShadowType | undefined;
+    shadow?: import("./index-425c8522").ShadowType | undefined;
     className?: string | undefined;
     dataTestId?: string | undefined;
+    contentProps?: import("./types").ContentPropsType | undefined;
     children?: React.ReactNode;
 } & React.RefAttributes<HTMLDivElement>>;
 export { Underlay };

package/underlay/modern/Component.js

@@ -1,10 +1,11 @@
 import React, { forwardRef } from 'react';
 import cn from 'classnames';
+import { getBorderCorners } from './utils/getBorderCorners.js';
+import { isBackgroundToken, getClasses } from './utils/getClasses.js';
+import { s as styles } from './index.module-3b126ac4.js';
+import './constants.js';
 
-const styles = {"component":"underlay__component_1xur3","overflowHide":"underlay__overflowHide_1xur3","background-accent":"underlay__background-accent_1xur3","background-info":"underlay__background-info_1xur3","background-attention-muted":"underlay__background-attention-muted_1xur3","background-positive-muted":"underlay__background-positive-muted_1xur3","background-negative-muted":"underlay__background-negative-muted_1xur3","background-primary":"underlay__background-primary_1xur3","background-primary-inverted":"underlay__background-primary-inverted_1xur3","background-secondary":"underlay__background-secondary_1xur3","background-secondary-inverted":"underlay__background-secondary-inverted_1xur3","background-tertiary":"underlay__background-tertiary_1xur3","background-tertiary-inverted":"underlay__background-tertiary-inverted_1xur3","background-quaternary":"underlay__background-quaternary_1xur3","background-quaternary-inverted":"underlay__background-quaternary-inverted_1xur3","background-specialbg-component":"underlay__background-specialbg-component_1xur3","background-specialbg-component-inverted":"underlay__background-specialbg-component-inverted_1xur3","background-specialbg-primary-grouped":"underlay__background-specialbg-primary-grouped_1xur3","background-specialbg-secondary-grouped":"underlay__background-specialbg-secondary-grouped_1xur3","background-specialbg-tertiary-grouped":"underlay__background-specialbg-tertiary-grouped_1xur3","background-specialbg-secondary-transparent":"underlay__background-specialbg-secondary-transparent_1xur3","background-specialbg-secondary-transparent-inverted":"underlay__background-specialbg-secondary-transparent-inverted_1xur3","background-specialbg-tertiary-transparent":"underlay__background-specialbg-tertiary-transparent_1xur3","background-specialbg-tertiary-transparent-inverted":"underlay__background-specialbg-tertiary-transparent-inverted_1xur3","padding-top-3xs":"underlay__padding-top-3xs_1xur3","padding-top-2xs":"underlay__padding-top-2xs_1xur3","padding-top-xs":"underlay__padding-top-xs_1xur3","padding-top-s":"underlay__padding-top-s_1xur3","padding-top-m":"underlay__padding-top-m_1xur3","padding-top-l":"underlay__padding-top-l_1xur3","padding-top-xl":"underlay__padding-top-xl_1xur3","padding-top-2xl":"underlay__padding-top-2xl_1xur3","padding-top-3xl":"underlay__padding-top-3xl_1xur3","padding-top-4xl":"underlay__padding-top-4xl_1xur3","padding-right-3xs":"underlay__padding-right-3xs_1xur3","padding-right-2xs":"underlay__padding-right-2xs_1xur3","padding-right-xs":"underlay__padding-right-xs_1xur3","padding-right-s":"underlay__padding-right-s_1xur3","padding-right-m":"underlay__padding-right-m_1xur3","padding-right-l":"underlay__padding-right-l_1xur3","padding-right-xl":"underlay__padding-right-xl_1xur3","padding-right-2xl":"underlay__padding-right-2xl_1xur3","padding-right-3xl":"underlay__padding-right-3xl_1xur3","padding-right-4xl":"underlay__padding-right-4xl_1xur3","padding-bottom-3xs":"underlay__padding-bottom-3xs_1xur3","padding-bottom-2xs":"underlay__padding-bottom-2xs_1xur3","padding-bottom-xs":"underlay__padding-bottom-xs_1xur3","padding-bottom-s":"underlay__padding-bottom-s_1xur3","padding-bottom-m":"underlay__padding-bottom-m_1xur3","padding-bottom-l":"underlay__padding-bottom-l_1xur3","padding-bottom-xl":"underlay__padding-bottom-xl_1xur3","padding-bottom-2xl":"underlay__padding-bottom-2xl_1xur3","padding-bottom-3xl":"underlay__padding-bottom-3xl_1xur3","padding-bottom-4xl":"underlay__padding-bottom-4xl_1xur3","padding-left-3xs":"underlay__padding-left-3xs_1xur3","padding-left-2xs":"underlay__padding-left-2xs_1xur3","padding-left-xs":"underlay__padding-left-xs_1xur3","padding-left-s":"underlay__padding-left-s_1xur3","padding-left-m":"underlay__padding-left-m_1xur3","padding-left-l":"underlay__padding-left-l_1xur3","padding-left-xl":"underlay__padding-left-xl_1xur3","padding-left-2xl":"underlay__padding-left-2xl_1xur3","padding-left-3xl":"underlay__padding-left-3xl_1xur3","padding-left-4xl":"underlay__padding-left-4xl_1xur3","shadow-xs":"underlay__shadow-xs_1xur3","shadow-s":"underlay__shadow-s_1xur3","shadow-m":"underlay__shadow-m_1xur3","shadow-l":"underlay__shadow-l_1xur3","shadow-xl":"underlay__shadow-xl_1xur3","shadow-xs-hard":"underlay__shadow-xs-hard_1xur3","shadow-s-hard":"underlay__shadow-s-hard_1xur3","shadow-m-hard":"underlay__shadow-m-hard_1xur3","shadow-l-hard":"underlay__shadow-l-hard_1xur3","shadow-xl-hard":"underlay__shadow-xl-hard_1xur3","shadow-xs-up":"underlay__shadow-xs-up_1xur3","shadow-s-up":"underlay__shadow-s-up_1xur3","shadow-m-up":"underlay__shadow-m-up_1xur3","shadow-l-up":"underlay__shadow-l-up_1xur3","shadow-xl-up":"underlay__shadow-xl-up_1xur3","shadow-xs-hard-up":"underlay__shadow-xs-hard-up_1xur3","shadow-s-hard-up":"underlay__shadow-s-hard-up_1xur3","shadow-m-hard-up":"underlay__shadow-m-hard-up_1xur3","shadow-l-hard-up":"underlay__shadow-l-hard-up_1xur3","shadow-xl-hard-up":"underlay__shadow-xl-hard-up_1xur3","border-color-accent":"underlay__border-color-accent_1xur3","border-color-key":"underlay__border-color-key_1xur3","border-color-key-inverted":"underlay__border-color-key-inverted_1xur3","border-color-link":"underlay__border-color-link_1xur3","border-color-primary":"underlay__border-color-primary_1xur3","border-color-primary-inverted":"underlay__border-color-primary-inverted_1xur3","border-color-secondary":"underlay__border-color-secondary_1xur3","border-color-secondary-inverted":"underlay__border-color-secondary-inverted_1xur3","border-color-tertiary":"underlay__border-color-tertiary_1xur3","border-color-tertiary-inverted":"underlay__border-color-tertiary-inverted_1xur3","border-color-underline":"underlay__border-color-underline_1xur3","border-color-underline-inverted":"underlay__border-color-underline-inverted_1xur3","border-color-graphic-attention":"underlay__border-color-graphic-attention_1xur3","border-color-graphic-link":"underlay__border-color-graphic-link_1xur3","border-color-graphic-negative":"underlay__border-color-graphic-negative_1xur3","border-color-graphic-positive":"underlay__border-color-graphic-positive_1xur3","border-color-specialbg-secondary-transparent":"underlay__border-color-specialbg-secondary-transparent_1xur3","border-color-specialbg-secondary-transparent-inverted":"underlay__border-color-specialbg-secondary-transparent-inverted_1xur3","border-color-specialbg-tertiary-transparent":"underlay__border-color-specialbg-tertiary-transparent_1xur3","border-color-specialbg-tertiary-transparent-inverted":"underlay__border-color-specialbg-tertiary-transparent-inverted_1xur3","border-radius-m":"underlay__border-radius-m_1xur3","border-radius-l":"underlay__border-radius-l_1xur3","border-radius-xl":"underlay__border-radius-xl_1xur3","border-radius-xxl":"underlay__border-radius-xxl_1xur3","border-width-1":"underlay__border-width-1_1xur3","border-width-2":"underlay__border-width-2_1xur3","border-width-4":"underlay__border-width-4_1xur3"};
-require('./index.css');
-
-const Underlay = forwardRef(({ children, borderRadius, shadow, borderSize, backgroundColor, borderColor, className, padding, dataTestId, overflow = true, ...restProps }, ref) => {
+const Underlay = forwardRef(({ children, borderRadius, shadow, dimensions, borderSize, backgroundColor, borderColor, className, padding, dataTestId, overflow = true, contentProps, ...restProps }, ref) => {
     const paddingSize = typeof padding === 'string'
         ? { top: padding, left: padding, right: padding, bottom: padding }
         : padding;
@@ -14,7 +15,23 @@ const Underlay = forwardRef(({ children, borderRadius, shadow, borderSize, backg
         [styles[`padding-bottom-${paddingSize.bottom}`]]: paddingSize.bottom,
         [styles[`padding-left-${paddingSize.left}`]]: paddingSize.left,
     };
-    return (React.createElement("div", { ref: ref, className: cn(styles.component, paddingStyles, backgroundColor && styles[`background-${backgroundColor}`], borderRadius && styles[`border-radius-${borderRadius}`], borderColor && styles[`border-color-${borderColor}`], borderSize && styles[`border-width-${borderSize}`], shadow && styles[shadow], { [styles.overflowHide]: !overflow }, className), "data-test-id": dataTestId, ...restProps }, children));
+    const bordersStyles = getBorderCorners(borderRadius);
+    const contentBordersStyles = getBorderCorners(contentProps?.borderRadius);
+    const underlayStyles = {
+        ...dimensions,
+        ...(isBackgroundToken(backgroundColor) ? {} : { backgroundColor }),
+    };
+    const contentStyles = {
+        ...(isBackgroundToken(contentProps?.backgroundColor)
+            ? {}
+            : { backgroundColor: contentProps?.backgroundColor }),
+        ...(contentProps?.backgroundImageURL
+            ? { backgroundImage: `url(${contentProps.backgroundImageURL})` }
+            : {}),
+    };
+    return (React.createElement("div", { ref: ref, style: underlayStyles, className: cn(styles.component, paddingStyles, bordersStyles, getClasses(backgroundColor, borderColor, borderSize, shadow), { [styles.overflowHide]: !overflow }, className), "data-test-id": dataTestId, ...restProps },
+        React.createElement("div", { style: contentStyles, className: cn(styles.content, { [styles.backgroundImage]: contentProps?.backgroundImageURL }, contentBordersStyles, getClasses(contentProps?.backgroundColor, contentProps?.borderColor, contentProps?.borderSize, contentProps?.shadow), contentProps?.axis && styles[`direction-${contentProps.axis}`], contentProps?.alignment && styles[`align-${contentProps.alignment}`], contentProps?.justifyContent &&
+                styles[`justify-${contentProps.justifyContent}`], contentProps?.className) }, children)));
 });
 
 export { Underlay };

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

@@ -0,0 +1,70 @@
+const 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',
+];
+const 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',
+];
+const 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',
+];
+
+export { BACKGROUND, BORDER_COLOR, SHADOW };

package/underlay/modern/index-425c8522.d.ts

@@ -0,0 +1,6 @@
+type BackgroundColorType = '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';
+type BorderColorType = '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';
+type GraphicColorType = 'accent' | 'link' | 'attention' | 'positive' | 'negative' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'quaternary' | 'quaternary-inverted' | 'static-light' | 'static-accent' | 'static-dark';
+type ShadowType = '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';
+type GapType = '3xs' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl';
+export { BackgroundColorType, BorderColorType, GraphicColorType, ShadowType, GapType };