@alfalab/core-components 46.0.0-beta.7 → 46.1.0-beta.0

package/toast-plate/getDataTestId-1de39d74.d.ts

@@ -0,0 +1,3 @@
+declare function getDataTestId(dataTestId: string, element: string): string;
+declare function getDataTestId(dataTestId?: string, element?: string): string | undefined;
+export { getDataTestId };

package/toast-plate/getDataTestId-1de39d74.js

@@ -0,0 +1,6 @@
+function getDataTestId(dataTestId, element) {
+    var elementPart = element ? "-".concat(element.toLowerCase()) : '';
+    return dataTestId ? "".concat(dataTestId).concat(elementPart) : undefined;
+}
+
+exports.getDataTestId = getDataTestId;

package/toast-plate/index-307da6d7.d.ts

@@ -0,0 +1,71 @@
+/// <reference types="react" />
+import React from "react";
+/* eslint-disable no-plusplus, no-param-reassign */
+import { MaskitoPlugin, MaskitoPostprocessor, MaskitoPreprocessor } from "@maskito/core";
+import { useCustomWebkitScrollbar } from "./useCustomWebkitScrollbar-a216f694";
+declare const isClient: () => boolean;
+declare function isApplePlatform(): boolean;
+declare function isIOS(): boolean;
+declare const os: {
+    isIOS: typeof isIOS;
+    isApplePlatform: typeof isApplePlatform;
+};
+type PaddingType = number | string | {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+};
+declare function createPaddingStyle(padding?: PaddingType): undefined | React.CSSProperties;
+declare function easeInOutQuad(x: number): number;
+declare const easingFns: {
+    easeInOutQuad: typeof easeInOutQuad;
+};
+/**
+ * Возвращает true, если значение равно null или undefined
+ */
+declare function isNil(value: unknown): boolean;
+/**
+ * Выбор значения между min max границами
+ */
+declare function clamp<T extends Date | number>(value: T, min: T, max: T): T;
+declare function noop(): void;
+declare const fnUtils: {
+    clamp: typeof clamp;
+    noop: typeof noop;
+    isNil: typeof isNil;
+};
+/**
+ *  Запрещает каретке становиться за указанные границы
+ */
+declare function caretGuard(guard: (value: string, selection: readonly [
+    from: number,
+    to: number
+]) => [
+    from: number,
+    to: number
+]): MaskitoPlugin;
+/**
+ *  Запрещает удалять указанный префикс
+ */
+declare function prefixPostprocessor(prefix: string): MaskitoPostprocessor;
+/**
+ * Препроцессор необходим для правильной вставки/автокомплита телефонного номера
+ */
+declare function insertionPhonePreprocessor(mask: Array<string | RegExp>, countryCode?: string, clearableCountryCode?: boolean): MaskitoPreprocessor;
+declare const maskUtils: {
+    insertionPhonePreprocessor: typeof insertionPhonePreprocessor;
+    prefixPostprocessor: typeof prefixPostprocessor;
+    caretGuard: typeof caretGuard;
+};
+declare const hooks: {
+    useCustomWebkitScrollbar: typeof useCustomWebkitScrollbar;
+};
+declare function preventDefault(e: React.UIEvent): void;
+declare const dom: {
+    preventDefault: typeof preventDefault;
+};
+export { isClient, os, createPaddingStyle, easingFns, fnUtils, maskUtils, hooks, dom };
+export * from "./getDataTestId-1de39d74";
+export * from "./browser-a216f694";
+export * from "./components/base-toast-plate/hooks/useDeprecatedBadge";

package/toast-plate/modern/Component.responsive.js

@@ -1,18 +1,19 @@
 import React, { forwardRef } from 'react';
 import { useMatchMedia } from '../../mq/modern';
-import { getComponentBreakpoint } from '../../shared/modern';
 import { ToastPlateDesktop } from './desktop/Component.desktop.js';
 import { ToastPlateMobile } from './mobile/Component.mobile.js';
 import './components/base-toast-plate/component.js';
 import 'classnames';
 import '../../icon-button/modern';
+import './getDataTestId-dd00ab19.js';
+import '@alfalab/hooks';
 import '../../status-badge/modern';
 import '@alfalab/icons-glyph/CrossMIcon';
 import './components/base-toast-plate/hooks/useCustomIcons.js';
 import './components/base-toast-plate/hooks/useDeprecatedBadge.js';
 import './components/base-toast-plate/utils/isUnsafeBadge.js';
 
-const ToastPlate = forwardRef(({ children, breakpoint = getComponentBreakpoint(), ...restProps }, ref) => {
+const ToastPlate = forwardRef(({ children, breakpoint = 1024, ...restProps }, ref) => {
     const query = `(min-width: ${breakpoint}px)`;
     const [isDesktop] = useMatchMedia(query);
     const Component = isDesktop ? ToastPlateDesktop : ToastPlateMobile;

package/toast-plate/modern/browser-a216f694.d.ts

@@ -0,0 +1,6 @@
+declare function isWebkitBased(): boolean;
+declare const browser: {
+    getScrollbarSize: () => number;
+    isWebkitBased: typeof isWebkitBased;
+};
+export { browser };

package/toast-plate/modern/components/base-toast-plate/component.js

@@ -1,7 +1,8 @@
 import React, { forwardRef, useCallback } from 'react';
 import cn from 'classnames';
 import { IconButton } from '../../../../icon-button/modern';
-import { getDataTestId } from '../../../../shared/modern';
+import { g as getDataTestId } from '../../getDataTestId-dd00ab19.js';
+import '@alfalab/hooks';
 import { StatusBadge } from '../../../../status-badge/modern';
 import { CrossMIcon } from '@alfalab/icons-glyph/CrossMIcon';
 import { useCustomIcons } from './hooks/useCustomIcons.js';

package/toast-plate/modern/components/base-toast-plate/hooks/useDeprecatedBadge.js

@@ -1,4 +1,7 @@
-import { exhaustiveCheck } from '../../../../../shared/modern';
+import 'react';
+import '@alfalab/hooks';
+
+const exhaustiveCheck = (value) => value;
 
 const useDeprecatedBadge = () => {
     const transformDeprecatedBadge = (unsafeBadge) => {

package/toast-plate/modern/components/base-toast-plate/index.js

@@ -2,7 +2,8 @@ export { BaseToastPlate } from './component.js';
 import 'react';
 import 'classnames';
 import '../../../../icon-button/modern';
-import '../../../../shared/modern';
+import '../../getDataTestId-dd00ab19.js';
+import '@alfalab/hooks';
 import '../../../../status-badge/modern';
 import '@alfalab/icons-glyph/CrossMIcon';
 import './hooks/useCustomIcons.js';

package/toast-plate/modern/components/base-toast-plate/utils/getBaseToastPlateTestIds.js

@@ -1,4 +1,6 @@
-import { getDataTestId } from '../../../../../shared/modern';
+import { g as getDataTestId } from '../../../getDataTestId-dd00ab19.js';
+import 'react';
+import '@alfalab/hooks';
 
 function getBaseToastPlateTestIds(dataTestId) {
     return {

package/toast-plate/modern/desktop/Component.desktop.js

@@ -2,7 +2,8 @@ import React, { forwardRef } from 'react';
 import { BaseToastPlate } from '../components/base-toast-plate/component.js';
 import 'classnames';
 import '../../../icon-button/modern';
-import '../../../shared/modern';
+import '../getDataTestId-dd00ab19.js';
+import '@alfalab/hooks';
 import '../../../status-badge/modern';
 import '@alfalab/icons-glyph/CrossMIcon';
 import '../components/base-toast-plate/hooks/useCustomIcons.js';

package/toast-plate/modern/desktop/index.js

@@ -3,7 +3,8 @@ import 'react';
 import '../components/base-toast-plate/component.js';
 import 'classnames';
 import '../../../icon-button/modern';
-import '../../../shared/modern';
+import '../getDataTestId-dd00ab19.js';
+import '@alfalab/hooks';
 import '../../../status-badge/modern';
 import '@alfalab/icons-glyph/CrossMIcon';
 import '../components/base-toast-plate/hooks/useCustomIcons.js';

package/toast-plate/modern/getDataTestId-dd00ab19.d.ts

@@ -0,0 +1,3 @@
+declare function getDataTestId(dataTestId: string, element: string): string;
+declare function getDataTestId(dataTestId?: string, element?: string): string | undefined;
+export { getDataTestId };

package/toast-plate/modern/getDataTestId-dd00ab19.js

@@ -0,0 +1,6 @@
+function getDataTestId(dataTestId, element) {
+    const elementPart = element ? `-${element.toLowerCase()}` : '';
+    return dataTestId ? `${dataTestId}${elementPart}` : undefined;
+}
+
+export { getDataTestId as g };

package/toast-plate/modern/index-307da6d7.d.ts

@@ -0,0 +1,71 @@
+/// <reference types="react" />
+import React from "react";
+/* eslint-disable no-plusplus, no-param-reassign */
+import { MaskitoPlugin, MaskitoPostprocessor, MaskitoPreprocessor } from "@maskito/core";
+import { useCustomWebkitScrollbar } from "./useCustomWebkitScrollbar-a216f694";
+declare const isClient: () => boolean;
+declare function isApplePlatform(): boolean;
+declare function isIOS(): boolean;
+declare const os: {
+    isIOS: typeof isIOS;
+    isApplePlatform: typeof isApplePlatform;
+};
+type PaddingType = number | string | {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+};
+declare function createPaddingStyle(padding?: PaddingType): undefined | React.CSSProperties;
+declare function easeInOutQuad(x: number): number;
+declare const easingFns: {
+    easeInOutQuad: typeof easeInOutQuad;
+};
+/**
+ * Возвращает true, если значение равно null или undefined
+ */
+declare function isNil(value: unknown): boolean;
+/**
+ * Выбор значения между min max границами
+ */
+declare function clamp<T extends Date | number>(value: T, min: T, max: T): T;
+declare function noop(): void;
+declare const fnUtils: {
+    clamp: typeof clamp;
+    noop: typeof noop;
+    isNil: typeof isNil;
+};
+/**
+ *  Запрещает каретке становиться за указанные границы
+ */
+declare function caretGuard(guard: (value: string, selection: readonly [
+    from: number,
+    to: number
+]) => [
+    from: number,
+    to: number
+]): MaskitoPlugin;
+/**
+ *  Запрещает удалять указанный префикс
+ */
+declare function prefixPostprocessor(prefix: string): MaskitoPostprocessor;
+/**
+ * Препроцессор необходим для правильной вставки/автокомплита телефонного номера
+ */
+declare function insertionPhonePreprocessor(mask: Array<string | RegExp>, countryCode?: string, clearableCountryCode?: boolean): MaskitoPreprocessor;
+declare const maskUtils: {
+    insertionPhonePreprocessor: typeof insertionPhonePreprocessor;
+    prefixPostprocessor: typeof prefixPostprocessor;
+    caretGuard: typeof caretGuard;
+};
+declare const hooks: {
+    useCustomWebkitScrollbar: typeof useCustomWebkitScrollbar;
+};
+declare function preventDefault(e: React.UIEvent): void;
+declare const dom: {
+    preventDefault: typeof preventDefault;
+};
+export { isClient, os, createPaddingStyle, easingFns, fnUtils, maskUtils, hooks, dom };
+export * from "./getDataTestId-dd00ab19";
+export * from "./browser-a216f694";
+export * from "./components/base-toast-plate/hooks/useDeprecatedBadge";

package/toast-plate/modern/index.js

@@ -1,11 +1,12 @@
 export { ToastPlate } from './Component.responsive.js';
 import 'react';
 import '../../mq/modern';
-import '../../shared/modern';
 import './desktop/Component.desktop.js';
 import './components/base-toast-plate/component.js';
 import 'classnames';
 import '../../icon-button/modern';
+import './getDataTestId-dd00ab19.js';
+import '@alfalab/hooks';
 import '../../status-badge/modern';
 import '@alfalab/icons-glyph/CrossMIcon';
 import './components/base-toast-plate/hooks/useCustomIcons.js';

package/toast-plate/modern/mobile/Component.mobile.js

@@ -2,7 +2,8 @@ import React, { forwardRef } from 'react';
 import { BaseToastPlate } from '../components/base-toast-plate/component.js';
 import 'classnames';
 import '../../../icon-button/modern';
-import '../../../shared/modern';
+import '../getDataTestId-dd00ab19.js';
+import '@alfalab/hooks';
 import '../../../status-badge/modern';
 import '@alfalab/icons-glyph/CrossMIcon';
 import '../components/base-toast-plate/hooks/useCustomIcons.js';

package/toast-plate/modern/mobile/index.js

@@ -3,7 +3,8 @@ import 'react';
 import '../components/base-toast-plate/component.js';
 import 'classnames';
 import '../../../icon-button/modern';
-import '../../../shared/modern';
+import '../getDataTestId-dd00ab19.js';
+import '@alfalab/hooks';
 import '../../../status-badge/modern';
 import '@alfalab/icons-glyph/CrossMIcon';
 import '../components/base-toast-plate/hooks/useCustomIcons.js';

package/toast-plate/modern/useCustomWebkitScrollbar-a216f694.d.ts

@@ -0,0 +1,2 @@
+declare function useCustomWebkitScrollbar(): boolean;
+export { useCustomWebkitScrollbar };

package/toast-plate/useCustomWebkitScrollbar-a216f694.d.ts

@@ -0,0 +1,2 @@
+declare function useCustomWebkitScrollbar(): boolean;
+export { useCustomWebkitScrollbar };

package/tooltip/Component.responsive.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var coreComponentsMq = require('../mq');
-var coreComponentsShared = require('../shared');
 var desktop_Component_desktop = require('./desktop/Component.desktop.js');
 var mobile_Component_mobile = require('./mobile/Component.mobile.js');
 
@@ -12,7 +11,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var TooltipResponsive = function (_a) {
-    var defaultMatchMediaValue = _a.defaultMatchMediaValue, children = _a.children, actionButtonTitle = _a.actionButtonTitle, bottomSheetProps = _a.bottomSheetProps, _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, restProps = tslib.__rest(_a, ["defaultMatchMediaValue", "children", "actionButtonTitle", "bottomSheetProps", "breakpoint"]);
+    var defaultMatchMediaValue = _a.defaultMatchMediaValue, children = _a.children, actionButtonTitle = _a.actionButtonTitle, bottomSheetProps = _a.bottomSheetProps, _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = tslib.__rest(_a, ["defaultMatchMediaValue", "children", "actionButtonTitle", "bottomSheetProps", "breakpoint"]);
     var isDesktop = coreComponentsMq.useMatchMedia("(min-width: ".concat(breakpoint, "px)"), defaultMatchMediaValue)[0];
     return isDesktop ? (React__default.default.createElement(desktop_Component_desktop.TooltipDesktop, tslib.__assign({}, restProps), children)) : (React__default.default.createElement(mobile_Component_mobile.TooltipMobile, tslib.__assign({}, restProps, bottomSheetProps, { actionButtonTitle: actionButtonTitle }), children));
 };

package/tooltip/cssm/Component.responsive.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var coreComponentsMq = require('../../mq/cssm');
-var coreComponentsShared = require('../../shared/cssm');
 var desktop_Component_desktop = require('./desktop/Component.desktop.js');
 var mobile_Component_mobile = require('./mobile/Component.mobile.js');
 
@@ -12,7 +11,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var TooltipResponsive = function (_a) {
-    var defaultMatchMediaValue = _a.defaultMatchMediaValue, children = _a.children, actionButtonTitle = _a.actionButtonTitle, bottomSheetProps = _a.bottomSheetProps, _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, restProps = tslib.__rest(_a, ["defaultMatchMediaValue", "children", "actionButtonTitle", "bottomSheetProps", "breakpoint"]);
+    var defaultMatchMediaValue = _a.defaultMatchMediaValue, children = _a.children, actionButtonTitle = _a.actionButtonTitle, bottomSheetProps = _a.bottomSheetProps, _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = tslib.__rest(_a, ["defaultMatchMediaValue", "children", "actionButtonTitle", "bottomSheetProps", "breakpoint"]);
     var isDesktop = coreComponentsMq.useMatchMedia("(min-width: ".concat(breakpoint, "px)"), defaultMatchMediaValue)[0];
     return isDesktop ? (React__default.default.createElement(desktop_Component_desktop.TooltipDesktop, tslib.__assign({}, restProps), children)) : (React__default.default.createElement(mobile_Component_mobile.TooltipMobile, tslib.__assign({}, restProps, bottomSheetProps, { actionButtonTitle: actionButtonTitle }), children));
 };

package/tooltip/esm/Component.responsive.js

@@ -1,7 +1,6 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
 import { useMatchMedia } from '../../mq/esm';
-import { getComponentBreakpoint } from '../../shared/esm';
 import { TooltipDesktop } from './desktop/Component.desktop.js';
 import { TooltipMobile } from './mobile/Component.mobile.js';
 import 'react-merge-refs';
@@ -11,7 +10,7 @@ import '../../bottom-sheet/esm';
 import '../../button/esm/mobile';
 
 var TooltipResponsive = function (_a) {
-    var defaultMatchMediaValue = _a.defaultMatchMediaValue, children = _a.children, actionButtonTitle = _a.actionButtonTitle, bottomSheetProps = _a.bottomSheetProps, _b = _a.breakpoint, breakpoint = _b === void 0 ? getComponentBreakpoint() : _b, restProps = __rest(_a, ["defaultMatchMediaValue", "children", "actionButtonTitle", "bottomSheetProps", "breakpoint"]);
+    var defaultMatchMediaValue = _a.defaultMatchMediaValue, children = _a.children, actionButtonTitle = _a.actionButtonTitle, bottomSheetProps = _a.bottomSheetProps, _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = __rest(_a, ["defaultMatchMediaValue", "children", "actionButtonTitle", "bottomSheetProps", "breakpoint"]);
     var isDesktop = useMatchMedia("(min-width: ".concat(breakpoint, "px)"), defaultMatchMediaValue)[0];
     return isDesktop ? (React.createElement(TooltipDesktop, __assign({}, restProps), children)) : (React.createElement(TooltipMobile, __assign({}, restProps, bottomSheetProps, { actionButtonTitle: actionButtonTitle }), children));
 };

package/tooltip/esm/index.js

@@ -2,7 +2,6 @@ export { TooltipResponsive as Tooltip } from './Component.responsive.js';
 import 'tslib';
 import 'react';
 import '../../mq/esm';
-import '../../shared/esm';
 import './desktop/Component.desktop.js';
 import 'react-merge-refs';
 import 'classnames';

package/tooltip/modern/Component.responsive.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { useMatchMedia } from '../../mq/modern';
-import { getComponentBreakpoint } from '../../shared/modern';
 import { TooltipDesktop } from './desktop/Component.desktop.js';
 import { TooltipMobile } from './mobile/Component.mobile.js';
 import 'react-merge-refs';
@@ -9,7 +8,7 @@ import '../../popover/modern';
 import '../../bottom-sheet/modern';
 import '../../button/modern/mobile';
 
-const TooltipResponsive = ({ defaultMatchMediaValue, children, actionButtonTitle, bottomSheetProps, breakpoint = getComponentBreakpoint(), ...restProps }) => {
+const TooltipResponsive = ({ defaultMatchMediaValue, children, actionButtonTitle, bottomSheetProps, breakpoint = 1024, ...restProps }) => {
     const [isDesktop] = useMatchMedia(`(min-width: ${breakpoint}px)`, defaultMatchMediaValue);
     return isDesktop ? (React.createElement(TooltipDesktop, { ...restProps }, children)) : (React.createElement(TooltipMobile, { ...restProps, ...bottomSheetProps, actionButtonTitle: actionButtonTitle }, children));
 };

package/tooltip/modern/index.js

@@ -1,7 +1,6 @@
 export { TooltipResponsive as Tooltip } from './Component.responsive.js';
 import 'react';
 import '../../mq/modern';
-import '../../shared/modern';
 import './desktop/Component.desktop.js';
 import 'react-merge-refs';
 import 'classnames';

package/underlay/Component.js

@@ -4,7 +4,7 @@ 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-ac30b0c0.js');
+var index_module = require('./index.module-02bea7cd.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/underlay/cssm/index.module.css

@@ -14,8 +14,6 @@
     --color-light-bg-secondary-inverted: #1c1c1e;
     --color-light-bg-tertiary: #e7e8ea;
     --color-light-bg-tertiary-inverted: #27272a;
-    --color-light-neutral-1500: #121213;
-    --color-light-neutral-1500-inverted: #fff;
     --color-light-neutral-200: #edeef0;
     --color-light-neutral-200-inverted: #212124;
     --color-light-neutral-300: #e7e8eb;
@@ -24,6 +22,8 @@
     --color-light-neutral-400-inverted: #353539;
     --color-light-neutral-500: #babbc2;
     --color-light-neutral-500-inverted: #4a4a51;
+    --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
+    --color-light-neutral-translucent-1300-inverted: rgba(255, 255, 255, 0.94);
     --color-light-specialbg-component: rgba(11, 31, 53, 0.07);
     --color-light-specialbg-component-inverted: rgba(255, 255, 255, 0.1);
     --color-light-specialbg-primary-grouped: #f2f3f5;
@@ -106,8 +106,8 @@
 } :root {
 } :root {
     --underline-border-color-accent: var(--color-light-accent-primary);
-    --underline-border-color-key: var(--color-light-neutral-1500);
-    --underline-border-color-key-inverted: var(--color-light-neutral-1500-inverted);
+    --underline-border-color-key: var(--color-light-neutral-translucent-1300);
+    --underline-border-color-key-inverted: var(--color-light-neutral-translucent-1300-inverted);
     --underline-border-color-link: var(--color-light-status-info);
     --underline-border-color-primary: var(--color-light-neutral-400);
     --underline-border-color-primary-inverted: var(--color-light-neutral-400-inverted);

package/underlay/esm/Component.js

@@ -2,7 +2,7 @@ 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-62313110.js';
+import { s as styles } from './index.module-c8170873.js';
 import './constants.js';
 
 /******************************************************************************

package/underlay/esm/index.css

@@ -15,8 +15,6 @@
     --color-light-bg-secondary-inverted: #1c1c1e;
     --color-light-bg-tertiary: #e7e8ea;
     --color-light-bg-tertiary-inverted: #27272a;
-    --color-light-neutral-1500: #121213;
-    --color-light-neutral-1500-inverted: #fff;
     --color-light-neutral-200: #edeef0;
     --color-light-neutral-200-inverted: #212124;
     --color-light-neutral-300: #e7e8eb;
@@ -25,6 +23,8 @@
     --color-light-neutral-400-inverted: #353539;
     --color-light-neutral-500: #babbc2;
     --color-light-neutral-500-inverted: #4a4a51;
+    --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
+    --color-light-neutral-translucent-1300-inverted: rgba(255, 255, 255, 0.94);
     --color-light-specialbg-component: rgba(11, 31, 53, 0.07);
     --color-light-specialbg-component-inverted: rgba(255, 255, 255, 0.1);
     --color-light-specialbg-primary-grouped: #f2f3f5;
@@ -107,8 +107,8 @@
 } :root {
 } :root {
     --underline-border-color-accent: var(--color-light-accent-primary);
-    --underline-border-color-key: var(--color-light-neutral-1500);
-    --underline-border-color-key-inverted: var(--color-light-neutral-1500-inverted);
+    --underline-border-color-key: var(--color-light-neutral-translucent-1300);
+    --underline-border-color-key-inverted: var(--color-light-neutral-translucent-1300-inverted);
     --underline-border-color-link: var(--color-light-status-info);
     --underline-border-color-primary: var(--color-light-neutral-400);
     --underline-border-color-primary-inverted: var(--color-light-neutral-400-inverted);

package/underlay/esm/index.js

@@ -2,6 +2,6 @@ export { Underlay } from './Component.js';
 import 'react';
 import 'classnames';
 import './utils/getBorderCorners.js';
-import './index.module-62313110.js';
+import './index.module-c8170873.js';
 import './utils/getClasses.js';
 import './constants.js';

package/underlay/esm/utils/getBorderCorners.js

@@ -1,4 +1,4 @@
-import { s as styles } from '../index.module-62313110.js';
+import { s as styles } from '../index.module-c8170873.js';
 
 var getBorderCorners = function (borderRadius) {
     var _a;

package/underlay/esm/utils/getClasses.js

@@ -1,5 +1,5 @@
 import { BACKGROUND } from '../constants.js';
-import { s as styles } from '../index.module-62313110.js';
+import { s as styles } from '../index.module-c8170873.js';
 
 var isBackgroundToken = function (token) { return token && BACKGROUND.includes(token); };
 var getClasses = function (backgroundColor, borderColor, borderSize, shadow) {

package/underlay/index.css

@@ -15,8 +15,6 @@
     --color-light-bg-secondary-inverted: #1c1c1e;
     --color-light-bg-tertiary: #e7e8ea;
     --color-light-bg-tertiary-inverted: #27272a;
-    --color-light-neutral-1500: #121213;
-    --color-light-neutral-1500-inverted: #fff;
     --color-light-neutral-200: #edeef0;
     --color-light-neutral-200-inverted: #212124;
     --color-light-neutral-300: #e7e8eb;
@@ -25,6 +23,8 @@
     --color-light-neutral-400-inverted: #353539;
     --color-light-neutral-500: #babbc2;
     --color-light-neutral-500-inverted: #4a4a51;
+    --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
+    --color-light-neutral-translucent-1300-inverted: rgba(255, 255, 255, 0.94);
     --color-light-specialbg-component: rgba(11, 31, 53, 0.07);
     --color-light-specialbg-component-inverted: rgba(255, 255, 255, 0.1);
     --color-light-specialbg-primary-grouped: #f2f3f5;
@@ -107,8 +107,8 @@
 } :root {
 } :root {
     --underline-border-color-accent: var(--color-light-accent-primary);
-    --underline-border-color-key: var(--color-light-neutral-1500);
-    --underline-border-color-key-inverted: var(--color-light-neutral-1500-inverted);
+    --underline-border-color-key: var(--color-light-neutral-translucent-1300);
+    --underline-border-color-key-inverted: var(--color-light-neutral-translucent-1300-inverted);
     --underline-border-color-link: var(--color-light-status-info);
     --underline-border-color-primary: var(--color-light-neutral-400);
     --underline-border-color-primary-inverted: var(--color-light-neutral-400-inverted);

package/underlay/modern/Component.js

@@ -2,7 +2,7 @@ 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-072eac49.js';
+import { s as styles } from './index.module-e5b9499e.js';
 import './constants.js';
 
 const Underlay = forwardRef(({ children, borderRadius, shadow, dimensions, borderSize, backgroundColor, borderColor, className, padding, dataTestId, overflow = true, contentProps, ...restProps }, ref) => {

package/underlay/modern/index.css

@@ -15,8 +15,6 @@
     --color-light-bg-secondary-inverted: #1c1c1e;
     --color-light-bg-tertiary: #e7e8ea;
     --color-light-bg-tertiary-inverted: #27272a;
-    --color-light-neutral-1500: #121213;
-    --color-light-neutral-1500-inverted: #fff;
     --color-light-neutral-200: #edeef0;
     --color-light-neutral-200-inverted: #212124;
     --color-light-neutral-300: #e7e8eb;
@@ -25,6 +23,8 @@
     --color-light-neutral-400-inverted: #353539;
     --color-light-neutral-500: #babbc2;
     --color-light-neutral-500-inverted: #4a4a51;
+    --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
+    --color-light-neutral-translucent-1300-inverted: rgba(255, 255, 255, 0.94);
     --color-light-specialbg-component: rgba(11, 31, 53, 0.07);
     --color-light-specialbg-component-inverted: rgba(255, 255, 255, 0.1);
     --color-light-specialbg-primary-grouped: #f2f3f5;
@@ -107,8 +107,8 @@
 } :root {
 } :root {
     --underline-border-color-accent: var(--color-light-accent-primary);
-    --underline-border-color-key: var(--color-light-neutral-1500);
-    --underline-border-color-key-inverted: var(--color-light-neutral-1500-inverted);
+    --underline-border-color-key: var(--color-light-neutral-translucent-1300);
+    --underline-border-color-key-inverted: var(--color-light-neutral-translucent-1300-inverted);
     --underline-border-color-link: var(--color-light-status-info);
     --underline-border-color-primary: var(--color-light-neutral-400);
     --underline-border-color-primary-inverted: var(--color-light-neutral-400-inverted);

package/underlay/modern/index.js

@@ -2,6 +2,6 @@ export { Underlay } from './Component.js';
 import 'react';
 import 'classnames';
 import './utils/getBorderCorners.js';
-import './index.module-072eac49.js';
+import './index.module-e5b9499e.js';
 import './utils/getClasses.js';
 import './constants.js';

package/underlay/modern/utils/getBorderCorners.js

@@ -1,4 +1,4 @@
-import { s as styles } from '../index.module-072eac49.js';
+import { s as styles } from '../index.module-e5b9499e.js';
 
 const getBorderCorners = (borderRadius) => {
     const bordersSize = typeof borderRadius === 'string'

package/underlay/modern/utils/getClasses.js

@@ -1,5 +1,5 @@
 import { BACKGROUND } from '../constants.js';
-import { s as styles } from '../index.module-072eac49.js';
+import { s as styles } from '../index.module-e5b9499e.js';
 
 const isBackgroundToken = (token) => token && BACKGROUND.includes(token);
 const getClasses = (backgroundColor, borderColor, borderSize, shadow) => ({

package/underlay/utils/getBorderCorners.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index_module = require('../index.module-ac30b0c0.js');
+var index_module = require('../index.module-02bea7cd.js');
 
 var getBorderCorners = function (borderRadius) {
     var _a;

package/underlay/utils/getClasses.js

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var constants = require('../constants.js');
-var index_module = require('../index.module-ac30b0c0.js');
+var index_module = require('../index.module-02bea7cd.js');
 
 var isBackgroundToken = function (token) { return token && constants.BACKGROUND.includes(token); };
 var getClasses = function (backgroundColor, borderColor, borderSize, shadow) {