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

package/underlay/Component.js

@@ -2,9 +2,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 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');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -50,25 +47,22 @@ function __rest(s, e) {
     return t;
 }
 
+var 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');
+
 var Underlay = React.forwardRef(function (_a, ref) {
-    var _b, _c, _d;
-    var children = _a.children, borderRadius = _a.borderRadius, shadow = _a.shadow, dimensions = _a.dimensions, borderSize = _a.borderSize, backgroundColor = _a.backgroundColor, borderColor = _a.borderColor, className = _a.className, padding = _a.padding, dataTestId = _a.dataTestId, _e = _a.overflow, overflow = _e === void 0 ? true : _e, contentProps = _a.contentProps, restProps = __rest(_a, ["children", "borderRadius", "shadow", "dimensions", "borderSize", "backgroundColor", "borderColor", "className", "padding", "dataTestId", "overflow", "contentProps"]);
+    var _b, _c;
+    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, _d = _a.overflow, overflow = _d === void 0 ? true : _d, restProps = __rest(_a, ["children", "borderRadius", "shadow", "borderSize", "backgroundColor", "borderColor", "className", "padding", "dataTestId", "overflow"]);
     var paddingSize = typeof padding === 'string'
         ? { top: padding, left: padding, right: padding, bottom: padding }
         : padding;
     var paddingStyles = paddingSize && (_b = {},
-        _b[index_module.styles["padding-top-".concat(paddingSize.top)]] = paddingSize.top,
-        _b[index_module.styles["padding-right-".concat(paddingSize.right)]] = paddingSize.right,
-        _b[index_module.styles["padding-bottom-".concat(paddingSize.bottom)]] = paddingSize.bottom,
-        _b[index_module.styles["padding-left-".concat(paddingSize.left)]] = paddingSize.left,
+        _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);
-    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)));
+    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], (_c = {}, _c[styles.overflowHide] = !overflow, _c), className), "data-test-id": dataTestId }, restProps), children));
 });
 
 exports.Underlay = Underlay;

package/underlay/cssm/Component.d.ts

@@ -1,10 +1,6 @@
 /// <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;
@@ -339,15 +335,14 @@ declare const Underlay: React.ForwardRefExoticComponent<React.HTMLAttributes<HTM
             trimEnd: () => string;
         } | undefined;
     } | undefined;
-    borderRadius?: import("./types").BorderRadiusType | import("./types").CornersRadiusType | undefined;
-    backgroundColor?: import("./index-425c8522").BackgroundColorType | undefined;
-    borderSize?: import("./types").BorderSizeType | undefined;
-    borderColor?: import("./index-425c8522").BorderColorType | undefined;
+    borderRadius?: ("m" | "l" | "xl" | "xxl") | undefined;
+    backgroundColor?: import("./types").BackgroundColorType | undefined;
+    borderSize?: 1 | 2 | 4 | undefined;
+    borderColor?: import("./types").BorderColorType | undefined;
     overflow?: boolean | undefined;
-    shadow?: import("./index-425c8522").ShadowType | undefined;
+    shadow?: import("./types").ShadowType | undefined;
     className?: string | undefined;
     dataTestId?: string | undefined;
-    contentProps?: import("./types").ContentPropsType | undefined;
     children?: React.ReactNode;
 } & React.RefAttributes<HTMLDivElement>>;
 export { Underlay };

package/underlay/cssm/Component.js

@@ -2,8 +2,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var cn = require('classnames');
-var utils_getBorderCorners = require('./utils/getBorderCorners.js');
-var utils_getClasses = require('./utils/getClasses.js');
 var styles = require('./index.module.css');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -52,8 +50,8 @@ function __rest(s, e) {
 }
 
 var Underlay = React.forwardRef(function (_a, ref) {
-    var _b, _c, _d;
-    var children = _a.children, borderRadius = _a.borderRadius, shadow = _a.shadow, dimensions = _a.dimensions, borderSize = _a.borderSize, backgroundColor = _a.backgroundColor, borderColor = _a.borderColor, className = _a.className, padding = _a.padding, dataTestId = _a.dataTestId, _e = _a.overflow, overflow = _e === void 0 ? true : _e, contentProps = _a.contentProps, restProps = __rest(_a, ["children", "borderRadius", "shadow", "dimensions", "borderSize", "backgroundColor", "borderColor", "className", "padding", "dataTestId", "overflow", "contentProps"]);
+    var _b, _c;
+    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, _d = _a.overflow, overflow = _d === void 0 ? true : _d, restProps = __rest(_a, ["children", "borderRadius", "shadow", "borderSize", "backgroundColor", "borderColor", "className", "padding", "dataTestId", "overflow"]);
     var paddingSize = typeof padding === 'string'
         ? { top: padding, left: padding, right: padding, bottom: padding }
         : padding;
@@ -63,13 +61,7 @@ var Underlay = React.forwardRef(function (_a, ref) {
         _b[styles__default.default["padding-bottom-".concat(paddingSize.bottom)]] = paddingSize.bottom,
         _b[styles__default.default["padding-left-".concat(paddingSize.left)]] = paddingSize.left,
         _b);
-    var bordersStyles = utils_getBorderCorners.getBorderCorners(borderRadius);
-    var contentBordersStyles = utils_getBorderCorners.getBorderCorners(contentProps === null || contentProps === void 0 ? void 0 : contentProps.borderRadius);
-    return (React__default.default.createElement("div", __assign({ ref: ref, style: __assign({}, dimensions), className: cn__default.default(styles__default.default.component, paddingStyles, bordersStyles, utils_getClasses.getClasses(backgroundColor, borderColor, borderSize, shadow), (_c = {}, _c[styles__default.default.overflowHide] = !overflow, _c), className), "data-test-id": dataTestId }, restProps),
-        React__default.default.createElement("div", { style: (contentProps === null || contentProps === void 0 ? void 0 : contentProps.backgroundImageURL)
-                ? { backgroundImage: "url(".concat(contentProps.backgroundImageURL, ")") }
-                : undefined, className: cn__default.default(styles__default.default.content, (_d = {}, _d[styles__default.default.backgroundImage] = contentProps === null || contentProps === void 0 ? void 0 : contentProps.backgroundImageURL, _d), contentBordersStyles, utils_getClasses.getClasses(contentProps === null || contentProps === void 0 ? void 0 : contentProps.backgroundColor, contentProps === null || contentProps === void 0 ? void 0 : contentProps.borderColor, contentProps === null || contentProps === void 0 ? void 0 : contentProps.borderSize, contentProps === null || contentProps === void 0 ? void 0 : contentProps.shadow), (contentProps === null || contentProps === void 0 ? void 0 : contentProps.axis) && styles__default.default["direction-".concat(contentProps.axis)], (contentProps === null || contentProps === void 0 ? void 0 : contentProps.alignment) && styles__default.default["align-".concat(contentProps.alignment)], (contentProps === null || contentProps === void 0 ? void 0 : contentProps.justifyContent) &&
-                styles__default.default["justify-".concat(contentProps.justifyContent)]) }, children)));
+    return (React__default.default.createElement("div", __assign({ ref: ref, className: cn__default.default(styles__default.default.component, paddingStyles, backgroundColor && styles__default.default["background-".concat(backgroundColor)], borderRadius && styles__default.default["border-radius-".concat(borderRadius)], borderColor && styles__default.default["border-color-".concat(borderColor)], borderSize && styles__default.default["border-width-".concat(borderSize)], shadow && styles__default.default[shadow], (_c = {}, _c[styles__default.default.overflowHide] = !overflow, _c), className), "data-test-id": dataTestId }, restProps), children));
 });
 
 exports.Underlay = Underlay;

package/underlay/cssm/index.js

@@ -3,9 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var Component = require('./Component.js');
 require('react');
 require('classnames');
-require('./utils/getBorderCorners.js');
 require('./index.module.css');
-require('./utils/getClasses.js');
 
 
 

package/underlay/cssm/index.module.css

@@ -83,13 +83,10 @@
     --shadow-xl-hard-up: 0 0 32px rgba(0, 0, 0, 0.16), 0 -16px 32px rgba(0, 0, 0, 0.32),
         0 -16px 32px rgba(0, 0, 0, 0.16);
 } :root {
-    --border-radius-xs: 2px;
-    --border-radius-s: 4px;
     --border-radius-m: 8px;
     --border-radius-l: 12px;
     --border-radius-xl: 16px;
     --border-radius-xxl: 20px;
-    --border-radius-3xl: 24px;
 } :root {
     --gap-3xs: 2px;
     --gap-2xs: 4px;
@@ -106,11 +103,6 @@
 } .component {
     display: flex;
     box-sizing: border-box;
-} .content {
-    display: flex;
-    box-sizing: border-box;
-    width: 100%;
-    height: 100%;
 } .overflowHide {
     overflow: hidden;
 } .background-accent {
@@ -159,140 +151,84 @@
             background-color: var(--color-light-specialbg-tertiary-transparent-inverted);
         } .padding-top-3xs {
         padding-top: var(--gap-3xs);
-    } .padding-right-3xs {
-        padding-right: var(--gap-3xs);
-    } .padding-bottom-3xs {
-        padding-bottom: var(--gap-3xs);
-    } .padding-left-3xs {
-        padding-left: var(--gap-3xs);
     } .padding-top-2xs {
         padding-top: var(--gap-2xs);
-    } .padding-right-2xs {
-        padding-right: var(--gap-2xs);
-    } .padding-bottom-2xs {
-        padding-bottom: var(--gap-2xs);
-    } .padding-left-2xs {
-        padding-left: var(--gap-2xs);
     } .padding-top-xs {
         padding-top: var(--gap-xs);
-    } .padding-right-xs {
-        padding-right: var(--gap-xs);
-    } .padding-bottom-xs {
-        padding-bottom: var(--gap-xs);
-    } .padding-left-xs {
-        padding-left: var(--gap-xs);
     } .padding-top-s {
         padding-top: var(--gap-s);
-    } .padding-right-s {
-        padding-right: var(--gap-s);
-    } .padding-bottom-s {
-        padding-bottom: var(--gap-s);
-    } .padding-left-s {
-        padding-left: var(--gap-s);
     } .padding-top-m {
         padding-top: var(--gap-m);
-    } .padding-right-m {
-        padding-right: var(--gap-m);
-    } .padding-bottom-m {
-        padding-bottom: var(--gap-m);
-    } .padding-left-m {
-        padding-left: var(--gap-m);
     } .padding-top-l {
         padding-top: var(--gap-l);
-    } .padding-right-l {
-        padding-right: var(--gap-l);
-    } .padding-bottom-l {
-        padding-bottom: var(--gap-l);
-    } .padding-left-l {
-        padding-left: var(--gap-l);
     } .padding-top-xl {
         padding-top: var(--gap-xl);
-    } .padding-right-xl {
-        padding-right: var(--gap-xl);
-    } .padding-bottom-xl {
-        padding-bottom: var(--gap-xl);
-    } .padding-left-xl {
-        padding-left: var(--gap-xl);
     } .padding-top-2xl {
         padding-top: var(--gap-2xl);
-    } .padding-right-2xl {
-        padding-right: var(--gap-2xl);
-    } .padding-bottom-2xl {
-        padding-bottom: var(--gap-2xl);
-    } .padding-left-2xl {
-        padding-left: var(--gap-2xl);
     } .padding-top-3xl {
         padding-top: var(--gap-3xl);
-    } .padding-right-3xl {
-        padding-right: var(--gap-3xl);
-    } .padding-bottom-3xl {
-        padding-bottom: var(--gap-3xl);
-    } .padding-left-3xl {
-        padding-left: var(--gap-3xl);
     } .padding-top-4xl {
         padding-top: var(--gap-4xl);
+    } .padding-right-3xs {
+        padding-right: var(--gap-3xs);
+    } .padding-right-2xs {
+        padding-right: var(--gap-2xs);
+    } .padding-right-xs {
+        padding-right: var(--gap-xs);
+    } .padding-right-s {
+        padding-right: var(--gap-s);
+    } .padding-right-m {
+        padding-right: var(--gap-m);
+    } .padding-right-l {
+        padding-right: var(--gap-l);
+    } .padding-right-xl {
+        padding-right: var(--gap-xl);
+    } .padding-right-2xl {
+        padding-right: var(--gap-2xl);
+    } .padding-right-3xl {
+        padding-right: var(--gap-3xl);
     } .padding-right-4xl {
         padding-right: var(--gap-4xl);
+    } .padding-bottom-3xs {
+        padding-bottom: var(--gap-3xs);
+    } .padding-bottom-2xs {
+        padding-bottom: var(--gap-2xs);
+    } .padding-bottom-xs {
+        padding-bottom: var(--gap-xs);
+    } .padding-bottom-s {
+        padding-bottom: var(--gap-s);
+    } .padding-bottom-m {
+        padding-bottom: var(--gap-m);
+    } .padding-bottom-l {
+        padding-bottom: var(--gap-l);
+    } .padding-bottom-xl {
+        padding-bottom: var(--gap-xl);
+    } .padding-bottom-2xl {
+        padding-bottom: var(--gap-2xl);
+    } .padding-bottom-3xl {
+        padding-bottom: var(--gap-3xl);
     } .padding-bottom-4xl {
         padding-bottom: var(--gap-4xl);
+    } .padding-left-3xs {
+        padding-left: var(--gap-3xs);
+    } .padding-left-2xs {
+        padding-left: var(--gap-2xs);
+    } .padding-left-xs {
+        padding-left: var(--gap-xs);
+    } .padding-left-s {
+        padding-left: var(--gap-s);
+    } .padding-left-m {
+        padding-left: var(--gap-m);
+    } .padding-left-l {
+        padding-left: var(--gap-l);
+    } .padding-left-xl {
+        padding-left: var(--gap-xl);
+    } .padding-left-2xl {
+        padding-left: var(--gap-2xl);
+    } .padding-left-3xl {
+        padding-left: var(--gap-3xl);
     } .padding-left-4xl {
         padding-left: var(--gap-4xl);
-    } .border-bottom-left-xs {
-        border-bottom-left-radius: var(--border-radius-xs);
-    } .border-bottom-right-xs {
-        border-bottom-right-radius: var(--border-radius-xs);
-    } .border-top-left-xs {
-        border-top-left-radius: var(--border-radius-xs);
-    } .border-top-right-xs {
-        border-top-right-radius: var(--border-radius-xs);
-    } .border-bottom-left-s {
-        border-bottom-left-radius: var(--border-radius-s);
-    } .border-bottom-right-s {
-        border-bottom-right-radius: var(--border-radius-s);
-    } .border-top-left-s {
-        border-top-left-radius: var(--border-radius-s);
-    } .border-top-right-s {
-        border-top-right-radius: var(--border-radius-s);
-    } .border-bottom-left-m {
-        border-bottom-left-radius: var(--border-radius-m);
-    } .border-bottom-right-m {
-        border-bottom-right-radius: var(--border-radius-m);
-    } .border-top-left-m {
-        border-top-left-radius: var(--border-radius-m);
-    } .border-top-right-m {
-        border-top-right-radius: var(--border-radius-m);
-    } .border-bottom-left-l {
-        border-bottom-left-radius: var(--border-radius-l);
-    } .border-bottom-right-l {
-        border-bottom-right-radius: var(--border-radius-l);
-    } .border-top-left-l {
-        border-top-left-radius: var(--border-radius-l);
-    } .border-top-right-l {
-        border-top-right-radius: var(--border-radius-l);
-    } .border-bottom-left-xl {
-        border-bottom-left-radius: var(--border-radius-xl);
-    } .border-bottom-right-xl {
-        border-bottom-right-radius: var(--border-radius-xl);
-    } .border-top-left-xl {
-        border-top-left-radius: var(--border-radius-xl);
-    } .border-top-right-xl {
-        border-top-right-radius: var(--border-radius-xl);
-    } .border-bottom-left-xxl {
-        border-bottom-left-radius: var(--border-radius-xxl);
-    } .border-bottom-right-xxl {
-        border-bottom-right-radius: var(--border-radius-xxl);
-    } .border-top-left-xxl {
-        border-top-left-radius: var(--border-radius-xxl);
-    } .border-top-right-xxl {
-        border-top-right-radius: var(--border-radius-xxl);
-    } .border-bottom-left-3xl {
-        border-bottom-left-radius: var(--border-radius-3xl);
-    } .border-bottom-right-3xl {
-        border-bottom-right-radius: var(--border-radius-3xl);
-    } .border-top-left-3xl {
-        border-top-left-radius: var(--border-radius-3xl);
-    } .border-top-right-3xl {
-        border-top-right-radius: var(--border-radius-3xl);
     } .shadow-xs {
         box-shadow: var(--shadow-xs);
     } .shadow-s {
@@ -373,10 +309,6 @@
         border-color: var(--color-light-specialbg-tertiary-transparent);
     } .border-color-specialbg-tertiary-transparent-inverted {
         border-color: var(--color-light-specialbg-tertiary-transparent-inverted);
-    } .border-radius-xs {
-        border-radius: var(--border-radius-xs);
-    } .border-radius-s {
-        border-radius: var(--border-radius-s);
     } .border-radius-m {
         border-radius: var(--border-radius-m);
     } .border-radius-l {
@@ -385,8 +317,6 @@
         border-radius: var(--border-radius-xl);
     } .border-radius-xxl {
         border-radius: var(--border-radius-xxl);
-    } .border-radius-3xl {
-        border-radius: var(--border-radius-3xl);
     } /* prettier-ignore */ .border-width-1 {
         border-width: 1px;
         border-style: solid;
@@ -396,25 +326,4 @@
     } .border-width-4 {
         border-width: 4px;
         border-style: solid;
-    } .direction-vertical {
-    flex-direction: column;
-} .direction-horizontal {
-    flex-direction: row;
-} .align-start {
-    align-items: flex-start;
-} .align-center {
-    align-items: center;
-} .align-end {
-    align-items: flex-end;
-} .align-fill {
-    align-items: stretch;
-} .justify-start {
-    justify-content: flex-start;
-} .justify-center {
-    justify-content: center;
-} .justify-end {
-    justify-content: flex-end;
-} .backgroundImage {
-    background-size: cover;
-    background-repeat: no-repeat;
-}
+    }

package/underlay/cssm/types.d.ts

@@ -1,6 +1,9 @@
 /// <reference types="react" />
 import React from 'react';
-import { BackgroundColorType, BorderColorType, GapType, ShadowType } from "./index-425c8522";
+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 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";
 type PaddingSize = Omit<GapType, '5xl' | '6xl' | '7xl' | '8xl'>;
 type PaddingType = {
     top?: PaddingSize;
@@ -8,69 +11,16 @@ type PaddingType = {
     bottom?: PaddingSize;
     left?: PaddingSize;
 };
-type BorderRadiusType = 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | '3xl';
-type CornersRadiusType = {
-    bottomRight?: BorderRadiusType;
-    bottomLeft?: BorderRadiusType;
-    topRight?: BorderRadiusType;
-    topLeft?: BorderRadiusType;
-};
-type DimensionsType = {
-    width?: number | string;
-    height?: number | string;
-};
-type BorderSizeType = 1 | 2 | 4;
-type ContentPropsType = {
-    /**
-     * Ширина бордера у контента
-     */
-    borderSize?: BorderSizeType;
-    /**
-     * Цвет бордера у контента
-     */
-    borderColor?: BorderColorType;
-    /**
-     * Радиус бордера у контента
-     */
-    borderRadius?: BorderRadiusType | CornersRadiusType;
-    /**
-     * Цвет фона у контента
-     */
-    backgroundColor?: BackgroundColorType;
-    /**
-     * Ссылка на изображение для фона
-     */
-    backgroundImageURL?: string;
-    /**
-     * Тень у контента
-     */
-    shadow?: ShadowType;
-    /**
-     * Выравнивание контента внутри основного слота.
-     */
-    axis?: 'vertical' | 'horizontal';
-    /**
-     * Выравнивание объектов относительно друг-друга
-     */
-    alignment?: 'start' | 'end' | 'fill' | 'center';
-    /**
-     * Выравнивание контента
-     */
-    justifyContent?: 'start' | 'end' | 'center';
-};
+type BorderRadiusType = 'm' | 'l' | 'xl' | 'xxl';
 type UnderlayProps = React.HTMLAttributes<HTMLDivElement> & {
-    /**
-     * Размеры подложки
-     */
-    dimensions?: DimensionsType;
     /**
      * Внутренние отступы
      */
     padding?: PaddingType | string;
     /**
-     * Радиус бордера
+     * Радиус
      */
-    borderRadius?: BorderRadiusType | CornersRadiusType;
+    borderRadius?: BorderRadiusType;
     /**
      * Цвет фона
      */
@@ -78,7 +28,7 @@ type UnderlayProps = React.HTMLAttributes<HTMLDivElement> & {
     /**
      * Ширина бордера
      */
-    borderSize?: BorderSizeType;
+    borderSize?: 1 | 2 | 4;
     /**
      * Цвет бордера
      */
@@ -100,13 +50,9 @@ type UnderlayProps = React.HTMLAttributes<HTMLDivElement> & {
      * Идентификатор для систем автоматизированного тестирования
      */
     dataTestId?: string;
-    /**
-     * Пропсы для стилизации контента подложки
-     */
-    contentProps?: ContentPropsType;
     /**
      *  Содержимое подложки
      */
     children?: React.ReactNode;
 };
-export { BorderRadiusType, CornersRadiusType, BorderSizeType, ContentPropsType, UnderlayProps };
+export { UnderlayProps };

package/underlay/esm/Component.d.ts

@@ -1,10 +1,6 @@
 /// <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;
@@ -339,15 +335,14 @@ declare const Underlay: React.ForwardRefExoticComponent<React.HTMLAttributes<HTM
             trimEnd: () => string;
         } | undefined;
     } | undefined;
-    borderRadius?: import("./types").BorderRadiusType | import("./types").CornersRadiusType | undefined;
-    backgroundColor?: import("./index-425c8522").BackgroundColorType | undefined;
-    borderSize?: import("./types").BorderSizeType | undefined;
-    borderColor?: import("./index-425c8522").BorderColorType | undefined;
+    borderRadius?: ("m" | "l" | "xl" | "xxl") | undefined;
+    backgroundColor?: import("./types").BackgroundColorType | undefined;
+    borderSize?: 1 | 2 | 4 | undefined;
+    borderColor?: import("./types").BorderColorType | undefined;
     overflow?: boolean | undefined;
-    shadow?: import("./index-425c8522").ShadowType | undefined;
+    shadow?: import("./types").ShadowType | undefined;
     className?: string | undefined;
     dataTestId?: string | undefined;
-    contentProps?: import("./types").ContentPropsType | undefined;
     children?: React.ReactNode;
 } & React.RefAttributes<HTMLDivElement>>;
 export { Underlay };

package/underlay/esm/Component.js

@@ -1,8 +1,5 @@
 import React, { forwardRef } from 'react';
 import cn from 'classnames';
-import { getBorderCorners } from './utils/getBorderCorners.js';
-import { getClasses } from './utils/getClasses.js';
-import { s as styles } from './index.module-a91f95f4.js';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -43,9 +40,12 @@ function __rest(s, e) {
     return t;
 }
 
+var 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');
+
 var Underlay = forwardRef(function (_a, ref) {
-    var _b, _c, _d;
-    var children = _a.children, borderRadius = _a.borderRadius, shadow = _a.shadow, dimensions = _a.dimensions, borderSize = _a.borderSize, backgroundColor = _a.backgroundColor, borderColor = _a.borderColor, className = _a.className, padding = _a.padding, dataTestId = _a.dataTestId, _e = _a.overflow, overflow = _e === void 0 ? true : _e, contentProps = _a.contentProps, restProps = __rest(_a, ["children", "borderRadius", "shadow", "dimensions", "borderSize", "backgroundColor", "borderColor", "className", "padding", "dataTestId", "overflow", "contentProps"]);
+    var _b, _c;
+    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, _d = _a.overflow, overflow = _d === void 0 ? true : _d, restProps = __rest(_a, ["children", "borderRadius", "shadow", "borderSize", "backgroundColor", "borderColor", "className", "padding", "dataTestId", "overflow"]);
     var paddingSize = typeof padding === 'string'
         ? { top: padding, left: padding, right: padding, bottom: padding }
         : padding;
@@ -55,13 +55,7 @@ var Underlay = forwardRef(function (_a, ref) {
         _b[styles["padding-bottom-".concat(paddingSize.bottom)]] = paddingSize.bottom,
         _b[styles["padding-left-".concat(paddingSize.left)]] = paddingSize.left,
         _b);
-    var bordersStyles = getBorderCorners(borderRadius);
-    var contentBordersStyles = getBorderCorners(contentProps === null || contentProps === void 0 ? void 0 : contentProps.borderRadius);
-    return (React.createElement("div", __assign({ ref: ref, style: __assign({}, dimensions), className: cn(styles.component, paddingStyles, bordersStyles, getClasses(backgroundColor, borderColor, borderSize, shadow), (_c = {}, _c[styles.overflowHide] = !overflow, _c), className), "data-test-id": dataTestId }, restProps),
-        React.createElement("div", { style: (contentProps === null || contentProps === void 0 ? void 0 : contentProps.backgroundImageURL)
-                ? { backgroundImage: "url(".concat(contentProps.backgroundImageURL, ")") }
-                : undefined, className: cn(styles.content, (_d = {}, _d[styles.backgroundImage] = contentProps === null || contentProps === void 0 ? void 0 : contentProps.backgroundImageURL, _d), contentBordersStyles, getClasses(contentProps === null || contentProps === void 0 ? void 0 : contentProps.backgroundColor, contentProps === null || contentProps === void 0 ? void 0 : contentProps.borderColor, contentProps === null || contentProps === void 0 ? void 0 : contentProps.borderSize, contentProps === null || contentProps === void 0 ? void 0 : contentProps.shadow), (contentProps === null || contentProps === void 0 ? void 0 : contentProps.axis) && styles["direction-".concat(contentProps.axis)], (contentProps === null || contentProps === void 0 ? void 0 : contentProps.alignment) && styles["align-".concat(contentProps.alignment)], (contentProps === null || contentProps === void 0 ? void 0 : contentProps.justifyContent) &&
-                styles["justify-".concat(contentProps.justifyContent)]) }, children)));
+    return (React.createElement("div", __assign({ ref: ref, className: cn(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], (_c = {}, _c[styles.overflowHide] = !overflow, _c), className), "data-test-id": dataTestId }, restProps), children));
 });
 
 export { Underlay };