@alfalab/core-components 38.4.0 → 39.0.0

package/underlay/Component.d.ts

@@ -0,0 +1,347 @@
+/// <reference types="react" />
+import React from 'react';
+declare const Underlay: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    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;
+    } | undefined;
+    borderRadius?: ("m" | "l" | "xxl") | undefined;
+    backgroundColor?: import("./types").BackgroundColorType | undefined;
+    borderSize?: 1 | 2 | 4 | undefined;
+    borderColor?: import("./types").BorderColorType | undefined;
+    shadow?: import("./types").ShadowType | undefined;
+    className?: string | undefined;
+    dataTestId?: string | undefined;
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+export { Underlay };

package/underlay/Component.js

@@ -0,0 +1,66 @@
+var React = require('react');
+var cn = require('classnames');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+var __assign = function () {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s)
+                if (Object.prototype.hasOwnProperty.call(s, p))
+                    t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+function __rest(s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+var styles = {"component":"underlay__component_ncxrg","background-accent":"underlay__background-accent_ncxrg","background-info":"underlay__background-info_ncxrg","background-attention-muted":"underlay__background-attention-muted_ncxrg","background-positive-muted":"underlay__background-positive-muted_ncxrg","background-negative-muted":"underlay__background-negative-muted_ncxrg","background-primary":"underlay__background-primary_ncxrg","background-primary-inverted":"underlay__background-primary-inverted_ncxrg","background-secondary":"underlay__background-secondary_ncxrg","background-secondary-inverted":"underlay__background-secondary-inverted_ncxrg","background-tertiary":"underlay__background-tertiary_ncxrg","background-tertiary-inverted":"underlay__background-tertiary-inverted_ncxrg","background-quaternary":"underlay__background-quaternary_ncxrg","background-quaternary-inverted":"underlay__background-quaternary-inverted_ncxrg","background-specialbg-component":"underlay__background-specialbg-component_ncxrg","background-specialbg-component-inverted":"underlay__background-specialbg-component-inverted_ncxrg","background-specialbg-primary-grouped":"underlay__background-specialbg-primary-grouped_ncxrg","background-specialbg-secondary-grouped":"underlay__background-specialbg-secondary-grouped_ncxrg","background-specialbg-tertiary-grouped":"underlay__background-specialbg-tertiary-grouped_ncxrg","background-specialbg-secondary-transparent":"underlay__background-specialbg-secondary-transparent_ncxrg","background-specialbg-secondary-transparent-inverted":"underlay__background-specialbg-secondary-transparent-inverted_ncxrg","background-specialbg-tertiary-transparent":"underlay__background-specialbg-tertiary-transparent_ncxrg","background-specialbg-tertiary-transparent-inverted":"underlay__background-specialbg-tertiary-transparent-inverted_ncxrg","padding-top-3xs":"underlay__padding-top-3xs_ncxrg","padding-top-2xs":"underlay__padding-top-2xs_ncxrg","padding-top-xs":"underlay__padding-top-xs_ncxrg","padding-top-s":"underlay__padding-top-s_ncxrg","padding-top-m":"underlay__padding-top-m_ncxrg","padding-top-l":"underlay__padding-top-l_ncxrg","padding-top-xl":"underlay__padding-top-xl_ncxrg","padding-top-2xl":"underlay__padding-top-2xl_ncxrg","padding-top-3xl":"underlay__padding-top-3xl_ncxrg","padding-top-4xl":"underlay__padding-top-4xl_ncxrg","padding-right-3xs":"underlay__padding-right-3xs_ncxrg","padding-right-2xs":"underlay__padding-right-2xs_ncxrg","padding-right-xs":"underlay__padding-right-xs_ncxrg","padding-right-s":"underlay__padding-right-s_ncxrg","padding-right-m":"underlay__padding-right-m_ncxrg","padding-right-l":"underlay__padding-right-l_ncxrg","padding-right-xl":"underlay__padding-right-xl_ncxrg","padding-right-2xl":"underlay__padding-right-2xl_ncxrg","padding-right-3xl":"underlay__padding-right-3xl_ncxrg","padding-right-4xl":"underlay__padding-right-4xl_ncxrg","padding-bottom-3xs":"underlay__padding-bottom-3xs_ncxrg","padding-bottom-2xs":"underlay__padding-bottom-2xs_ncxrg","padding-bottom-xs":"underlay__padding-bottom-xs_ncxrg","padding-bottom-s":"underlay__padding-bottom-s_ncxrg","padding-bottom-m":"underlay__padding-bottom-m_ncxrg","padding-bottom-l":"underlay__padding-bottom-l_ncxrg","padding-bottom-xl":"underlay__padding-bottom-xl_ncxrg","padding-bottom-2xl":"underlay__padding-bottom-2xl_ncxrg","padding-bottom-3xl":"underlay__padding-bottom-3xl_ncxrg","padding-bottom-4xl":"underlay__padding-bottom-4xl_ncxrg","padding-left-3xs":"underlay__padding-left-3xs_ncxrg","padding-left-2xs":"underlay__padding-left-2xs_ncxrg","padding-left-xs":"underlay__padding-left-xs_ncxrg","padding-left-s":"underlay__padding-left-s_ncxrg","padding-left-m":"underlay__padding-left-m_ncxrg","padding-left-l":"underlay__padding-left-l_ncxrg","padding-left-xl":"underlay__padding-left-xl_ncxrg","padding-left-2xl":"underlay__padding-left-2xl_ncxrg","padding-left-3xl":"underlay__padding-left-3xl_ncxrg","padding-left-4xl":"underlay__padding-left-4xl_ncxrg","shadow-xs":"underlay__shadow-xs_ncxrg","shadow-s":"underlay__shadow-s_ncxrg","shadow-m":"underlay__shadow-m_ncxrg","shadow-l":"underlay__shadow-l_ncxrg","shadow-xl":"underlay__shadow-xl_ncxrg","shadow-xs-hard":"underlay__shadow-xs-hard_ncxrg","shadow-s-hard":"underlay__shadow-s-hard_ncxrg","shadow-m-hard":"underlay__shadow-m-hard_ncxrg","shadow-l-hard":"underlay__shadow-l-hard_ncxrg","shadow-xl-hard":"underlay__shadow-xl-hard_ncxrg","shadow-xs-up":"underlay__shadow-xs-up_ncxrg","shadow-s-up":"underlay__shadow-s-up_ncxrg","shadow-m-up":"underlay__shadow-m-up_ncxrg","shadow-l-up":"underlay__shadow-l-up_ncxrg","shadow-xl-up":"underlay__shadow-xl-up_ncxrg","shadow-xs-hard-up":"underlay__shadow-xs-hard-up_ncxrg","shadow-s-hard-up":"underlay__shadow-s-hard-up_ncxrg","shadow-m-hard-up":"underlay__shadow-m-hard-up_ncxrg","shadow-l-hard-up":"underlay__shadow-l-hard-up_ncxrg","shadow-xl-hard-up":"underlay__shadow-xl-hard-up_ncxrg","border-color-accent":"underlay__border-color-accent_ncxrg","border-color-key":"underlay__border-color-key_ncxrg","border-color-key-inverted":"underlay__border-color-key-inverted_ncxrg","border-color-link":"underlay__border-color-link_ncxrg","border-color-primary":"underlay__border-color-primary_ncxrg","border-color-primary-inverted":"underlay__border-color-primary-inverted_ncxrg","border-color-secondary":"underlay__border-color-secondary_ncxrg","border-color-secondary-inverted":"underlay__border-color-secondary-inverted_ncxrg","border-color-tertiary":"underlay__border-color-tertiary_ncxrg","border-color-tertiary-inverted":"underlay__border-color-tertiary-inverted_ncxrg","border-color-underline":"underlay__border-color-underline_ncxrg","border-color-underline-inverted":"underlay__border-color-underline-inverted_ncxrg","border-color-graphic-attention":"underlay__border-color-graphic-attention_ncxrg","border-color-graphic-link":"underlay__border-color-graphic-link_ncxrg","border-color-graphic-negative":"underlay__border-color-graphic-negative_ncxrg","border-color-graphic-positive":"underlay__border-color-graphic-positive_ncxrg","border-color-specialbg-secondary-transparent":"underlay__border-color-specialbg-secondary-transparent_ncxrg","border-color-specialbg-secondary-transparent-inverted":"underlay__border-color-specialbg-secondary-transparent-inverted_ncxrg","border-color-specialbg-tertiary-transparent":"underlay__border-color-specialbg-tertiary-transparent_ncxrg","border-color-specialbg-tertiary-transparent-inverted":"underlay__border-color-specialbg-tertiary-transparent-inverted_ncxrg","border-radius-m":"underlay__border-radius-m_ncxrg","border-radius-xl":"underlay__border-radius-xl_ncxrg","border-radius-xxl":"underlay__border-radius-xxl_ncxrg","border-width-1":"underlay__border-width-1_ncxrg","border-width-2":"underlay__border-width-2_ncxrg","border-width-4":"underlay__border-width-4_ncxrg"};
+require('./index.css');
+
+var Underlay = React.forwardRef(function (_a, ref) {
+    var _b;
+    var children = _a.children, borderRadius = _a.borderRadius, shadow = _a.shadow, borderSize = _a.borderSize, backgroundColor = _a.backgroundColor, borderColor = _a.borderColor, className = _a.className, padding = _a.padding, dataTestId = _a.dataTestId, restProps = __rest(_a, ["children", "borderRadius", "shadow", "borderSize", "backgroundColor", "borderColor", "className", "padding", "dataTestId"]);
+    var paddingSize = typeof padding === 'string'
+        ? { top: padding, left: padding, right: padding, bottom: padding }
+        : padding;
+    var paddingStyles = paddingSize && (_b = {},
+        _b[styles["padding-top-".concat(paddingSize.top)]] = paddingSize.top,
+        _b[styles["padding-right-".concat(paddingSize.right)]] = paddingSize.right,
+        _b[styles["padding-bottom-".concat(paddingSize.bottom)]] = paddingSize.bottom,
+        _b[styles["padding-left-".concat(paddingSize.left)]] = paddingSize.left,
+        _b);
+    return (React__default.default.createElement("div", __assign({ ref: ref, className: cn__default.default(styles.component, paddingStyles, backgroundColor && styles["background-".concat(backgroundColor)], borderRadius && styles["border-radius-".concat(borderRadius)], borderColor && styles["border-color-".concat(borderColor)], borderSize && styles["border-width-".concat(borderSize)], shadow && styles[shadow], className), "data-test-id": dataTestId }, restProps), children));
+});
+
+exports.Underlay = Underlay;