@salutejs/plasma-new-hope 0.116.0-canary.1344.10266908694.0 → 0.116.1-canary.1345.10268848667.0

package/styled-components/cjs/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentProps, useRef, useState } from 'react';
+import React, { ComponentProps, useEffect, useRef, useState } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
@@ -263,3 +263,82 @@ export const Range: StoryObj<StoryPropsRange> = {
     },
     render: (args) => <StoryRange {...args} />,
 };
+
+const StoryDeferred = ({
+    enableContentLeft,
+    enableContentRight,
+    valueError,
+    valueSuccess,
+    size,
+    ...rest
+}: StoryPropsDefault) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const [defVal, setDefVal] = useState<Date | undefined>(undefined);
+
+    const iconSize = size === 'xs' ? 'xs' : 's';
+
+    useEffect(() => {
+        setTimeout(() => {
+            setDefVal(new Date(2024, 5, 14));
+        }, 5000);
+    }, []);
+
+    return (
+        <>
+            <h3>Асинхронная установка даты по умолчанию</h3>
+            <DatePicker
+                defaultDate={defVal}
+                isOpen={isOpen}
+                size={size}
+                valueError={valueError}
+                valueSuccess={valueSuccess}
+                contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
+                contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
+                onBlur={onBlur}
+                onFocus={onFocus}
+                onToggle={(is) => setIsOpen(is)}
+                onChangeValue={(e, currentValue) => {
+                    onChangeValue(e, currentValue);
+                }}
+                onCommitDate={() => setIsOpen(false)}
+                {...rest}
+            />
+        </>
+    );
+};
+
+export const Deferred: StoryObj<StoryPropsDefault> = {
+    argTypes: {
+        defaultDate: {
+            control: {
+                type: 'date',
+            },
+        },
+        labelPlacement: {
+            options: labelPlacements,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+    },
+    args: {
+        label: 'Лейбл',
+        leftHelper: 'Подсказка к полю',
+        placeholder: '30.05.2024',
+        size: 'l',
+        view: 'default',
+        labelPlacement: 'outer',
+        min: new Date(2024, 1, 1),
+        max: new Date(2024, 12, 29),
+        maskWithFormat: false,
+        disabled: false,
+        readOnly: false,
+        textBefore: '',
+        enableContentLeft: true,
+        enableContentRight: true,
+        valueError: false,
+        valueSuccess: false,
+    },
+    render: (args) => <StoryDeferred {...args} />,
+};

package/styled-components/cjs/examples/plasma_b2c/components/Modal/Modal.stories.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import styled from 'styled-components';
 import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
@@ -6,6 +6,7 @@ import { SSRProvider } from '@salutejs/plasma-core';
 
 import { PopupProvider, popupClasses } from '../Popup/Popup';
 import { Button } from '../Button/Button';
+import { TextField } from '../TextField/TextField';
 import { WithTheme } from '../../../_helpers';
 
 import { Modal, modalClasses } from './Modal';
@@ -206,3 +207,116 @@ export const ModalDemo: StoryObj<StoryModalProps> = {
     },
     render: (args) => <StoryModalDemo {...args} />,
 };
+
+const StyledModalAnimation = styled(Modal)`
+    /* stylelint-disable */
+    && .${popupClasses.root} {
+        animation: fadeIn 1s forwards;
+    }
+
+    &&.${popupClasses.endAnimation} .${popupClasses.root} {
+        animation: fadeOut 1s forwards;
+    }
+
+    && .${modalClasses.overlay} {
+        animation: overlayFadeIn 1s forwards;
+    }
+
+    &&.${popupClasses.endAnimation} .${modalClasses.overlay} {
+        animation: overlayFadeOut 1s forwards;
+    }
+    /* stylelint-enable */
+
+    @keyframes overlayFadeIn {
+        from {
+            opacity: 0;
+        }
+
+        to {
+            opacity: 1;
+        }
+    }
+
+    @keyframes overlayFadeOut {
+        from {
+            opacity: 1;
+        }
+
+        to {
+            opacity: 0;
+        }
+    }
+
+    @keyframes fadeIn {
+        from {
+            opacity: 0;
+            transform: translate(-50%, 100%);
+        }
+
+        to {
+            opacity: 1;
+            transform: translate(-50%, -50%);
+        }
+    }
+
+    @keyframes fadeOut {
+        from {
+            opacity: 1;
+            transform: translate(-50%, -50%);
+        }
+
+        to {
+            opacity: 0;
+            transform: translate(-50%, 100%);
+        }
+    }
+`;
+
+const StoryModalAnimationDemo = ({ placement, offsetX, offsetY, ...rest }: StoryModalProps) => {
+    const ref = useRef(null);
+    const [isOpen, setIsOpen] = useState(false);
+
+    const close = useCallback(() => {
+        setIsOpen(false);
+    }, []);
+
+    return (
+        <SSRProvider>
+            {/* <StyledWrapper> */}
+            <PopupProvider>
+                <Button view="default" text="Открыть новое модальное окно" onClick={() => setIsOpen(!isOpen)} />
+                <StyledModalAnimation
+                    id="modal"
+                    frame="theme-root"
+                    withAnimation
+                    onClose={() => setIsOpen(false)}
+                    isOpen={isOpen}
+                    placement={placement}
+                    offset={[offsetX, offsetY]}
+                    initialFocusRef={ref}
+                    {...rest}
+                >
+                    <Content>
+                        <TextField value="Text" onChange={() => {}} />
+                        <TextField ref={ref} value="Text2" onChange={() => {}} />
+                        <Button text="Закрыть" onClick={close} />
+                    </Content>
+                </StyledModalAnimation>
+            </PopupProvider>
+            {/* </StyledWrapper> */}
+        </SSRProvider>
+    );
+};
+
+export const ModalBottomAnimation: StoryObj<StoryModalProps> = {
+    args: {
+        placement: 'bottom',
+        withAnimation: true,
+        withBlur: false,
+        closeOnEsc: true,
+        closeOnOverlayClick: true,
+        offsetX: 0,
+        offsetY: 0,
+    },
+    render: (args) => <StoryModalAnimationDemo {...args} />,
+};

package/styled-components/cjs/examples/plasma_web/components/Accordion/Accordion.config.js

@@ -13,8 +13,8 @@ var config = exports.config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.125rem;", ":20rem;", ":var(", ") var(", ");", ":var(--surface-solid-card);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":var(--surface-clear);", ":none;", ":0;", ":var(", ");"], _Accordion.accordionTokens.accordionGap, _Accordion.accordionTokens.accordionWidth, _Accordion.accordionTokens.accordionItemPadding, _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemPaddingHorizontal, _Accordion.accordionTokens.accordionItemBackground, _Accordion.accordionTokens.accordionItemTitleColor, _Accordion.accordionTokens.accordionItemTextColor, _Accordion.accordionTokens.accordionItemIconColor, _Accordion.accordionTokens.accordionItemFocus, _Accordion.accordionTokens.accordionBackground, _Accordion.accordionTokens.accordionItemBorder, _Accordion.accordionTokens.accordionItemBorderBottom, _Accordion.accordionTokens.accordionItemPaddingHorizontalLeft, _Accordion.accordionTokens.accordionItemPaddingHorizontal),
-      clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.125rem;", ":20rem;", ":var(", ") 0rem;", ":var(--surface-clear);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":0rem !important;", ":var(--surface-clear);", ":none;", ":0.125rem solid var(--surface-solid-tertiary);", ":0;"], _Accordion.accordionTokens.accordionGap, _Accordion.accordionTokens.accordionWidth, _Accordion.accordionTokens.accordionItemPadding, _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemBackground, _Accordion.accordionTokens.accordionItemTitleColor, _Accordion.accordionTokens.accordionItemTextColor, _Accordion.accordionTokens.accordionItemIconColor, _Accordion.accordionTokens.accordionItemFocus, _Accordion.accordionTokens.accordionItemBorderRadius, _Accordion.accordionTokens.accordionBackground, _Accordion.accordionTokens.accordionItemBorder, _Accordion.accordionTokens.accordionItemBorderBottom, _Accordion.accordionTokens.accordionItemPaddingHorizontalLeft)
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.125rem;", ":20rem;", ":var(", ") var(", ");", ":var(--surface-solid-card);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":var(--surface-clear);", ":none;", ":0;", ":var(", ");"], _Accordion.accordionTokens.accordionGap, _Accordion.accordionTokens.accordionWidth, _Accordion.accordionTokens.accordionItemPadding, _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemPaddingHorizontal, _Accordion.accordionTokens.accordionItemBackground, _Accordion.accordionTokens.accordionItemTitleColor, _Accordion.accordionTokens.accordionItemTextColor, _Accordion.accordionTokens.accordionItemFocus, _Accordion.accordionTokens.accordionBackground, _Accordion.accordionTokens.accordionItemBorder, _Accordion.accordionTokens.accordionItemBorderBottom, _Accordion.accordionTokens.accordionItemPaddingHorizontalLeft, _Accordion.accordionTokens.accordionItemPaddingHorizontal),
+      clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.125rem;", ":20rem;", ":var(", ") 0rem;", ":var(--surface-clear);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":0rem !important;", ":var(--surface-clear);", ":none;", ":0.125rem solid var(--surface-solid-tertiary);", ":0;"], _Accordion.accordionTokens.accordionGap, _Accordion.accordionTokens.accordionWidth, _Accordion.accordionTokens.accordionItemPadding, _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemBackground, _Accordion.accordionTokens.accordionItemTitleColor, _Accordion.accordionTokens.accordionItemTextColor, _Accordion.accordionTokens.accordionItemFocus, _Accordion.accordionTokens.accordionItemBorderRadius, _Accordion.accordionTokens.accordionBackground, _Accordion.accordionTokens.accordionItemBorder, _Accordion.accordionTokens.accordionItemBorderBottom, _Accordion.accordionTokens.accordionItemPaddingHorizontalLeft)
     },
     size: {
       l: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.0625rem;", ":1.25rem;", ":0.5rem;", ":0.875rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemPaddingHorizontal, _Accordion.accordionTokens.accordionItemGap, _Accordion.accordionTokens.accordionItemBorderRadius, _Accordion.accordionTokens.accordionItemTitleFontFamily, _Accordion.accordionTokens.accordionItemTitleFontSize, _Accordion.accordionTokens.accordionItemTitleFontStyle, _Accordion.accordionTokens.accordionItemTitleFontWeight, _Accordion.accordionTokens.accordionItemTitleLetterSpacing, _Accordion.accordionTokens.accordionItemTitleLineHeight, _Accordion.accordionTokens.accordionItemTextFontFamily, _Accordion.accordionTokens.accordionItemTextFontSize, _Accordion.accordionTokens.accordionItemTextFontStyle, _Accordion.accordionTokens.accordionItemTextFontWeight, _Accordion.accordionTokens.accordionItemTextLetterSpacing, _Accordion.accordionTokens.accordionItemTextLineHeight),

package/styled-components/cjs/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentProps, useRef, useState } from 'react';
+import React, { ComponentProps, useEffect, useRef, useState } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
@@ -262,3 +262,82 @@ export const Range: StoryObj<StoryPropsRange> = {
     },
     render: (args) => <StoryRange {...args} />,
 };
+
+const StoryDeferred = ({
+    enableContentLeft,
+    enableContentRight,
+    valueError,
+    valueSuccess,
+    size,
+    ...rest
+}: StoryPropsDefault) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const [defVal, setDefVal] = useState<Date | undefined>(undefined);
+
+    const iconSize = size === 'xs' ? 'xs' : 's';
+
+    useEffect(() => {
+        setTimeout(() => {
+            setDefVal(new Date(2024, 5, 14));
+        }, 5000);
+    }, []);
+
+    return (
+        <>
+            <h3>Асинхронная установка даты по умолчанию</h3>
+            <DatePicker
+                defaultDate={defVal}
+                isOpen={isOpen}
+                size={size}
+                valueError={valueError}
+                valueSuccess={valueSuccess}
+                contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
+                contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
+                onBlur={onBlur}
+                onFocus={onFocus}
+                onToggle={(is) => setIsOpen(is)}
+                onChangeValue={(e, currentValue) => {
+                    onChangeValue(e, currentValue);
+                }}
+                onCommitDate={() => setIsOpen(false)}
+                {...rest}
+            />
+        </>
+    );
+};
+
+export const Deferred: StoryObj<StoryPropsDefault> = {
+    argTypes: {
+        defaultDate: {
+            control: {
+                type: 'date',
+            },
+        },
+        labelPlacement: {
+            options: labelPlacements,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+    },
+    args: {
+        label: 'Лейбл',
+        leftHelper: 'Подсказка к полю',
+        placeholder: '30.05.2024',
+        size: 'l',
+        view: 'default',
+        labelPlacement: 'outer',
+        min: new Date(2024, 1, 1),
+        max: new Date(2024, 12, 29),
+        maskWithFormat: false,
+        disabled: false,
+        readOnly: false,
+        textBefore: '',
+        enableContentLeft: true,
+        enableContentRight: true,
+        valueError: false,
+        valueSuccess: false,
+    },
+    render: (args) => <StoryDeferred {...args} />,
+};

package/styled-components/cjs/examples/plasma_web/components/Modal/Modal.stories.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import styled from 'styled-components';
 import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
@@ -6,6 +6,7 @@ import { SSRProvider } from '@salutejs/plasma-core';
 
 import { PopupProvider, popupClasses } from '../Popup/Popup';
 import { Button } from '../Button/Button';
+import { TextField } from '../TextField/TextField';
 import { WithTheme } from '../../../_helpers';
 
 import { Modal, modalClasses } from './Modal';
@@ -206,3 +207,116 @@ export const ModalDemo: StoryObj<StoryModalProps> = {
     },
     render: (args) => <StoryModalDemo {...args} />,
 };
+
+const StyledModalAnimation = styled(Modal)`
+    /* stylelint-disable */
+    && .${popupClasses.root} {
+        animation: fadeIn 1s forwards;
+    }
+
+    &&.${popupClasses.endAnimation} .${popupClasses.root} {
+        animation: fadeOut 1s forwards;
+    }
+
+    && .${modalClasses.overlay} {
+        animation: overlayFadeIn 1s forwards;
+    }
+
+    &&.${popupClasses.endAnimation} .${modalClasses.overlay} {
+        animation: overlayFadeOut 1s forwards;
+    }
+    /* stylelint-enable */
+
+    @keyframes overlayFadeIn {
+        from {
+            opacity: 0;
+        }
+
+        to {
+            opacity: 1;
+        }
+    }
+
+    @keyframes overlayFadeOut {
+        from {
+            opacity: 1;
+        }
+
+        to {
+            opacity: 0;
+        }
+    }
+
+    @keyframes fadeIn {
+        from {
+            opacity: 0;
+            transform: translate(-50%, 100%);
+        }
+
+        to {
+            opacity: 1;
+            transform: translate(-50%, -50%);
+        }
+    }
+
+    @keyframes fadeOut {
+        from {
+            opacity: 1;
+            transform: translate(-50%, -50%);
+        }
+
+        to {
+            opacity: 0;
+            transform: translate(-50%, 100%);
+        }
+    }
+`;
+
+const StoryModalAnimationDemo = ({ placement, offsetX, offsetY, ...rest }: StoryModalProps) => {
+    const ref = useRef(null);
+    const [isOpen, setIsOpen] = useState(false);
+
+    const close = useCallback(() => {
+        setIsOpen(false);
+    }, []);
+
+    return (
+        <SSRProvider>
+            {/* <StyledWrapper> */}
+            <PopupProvider>
+                <Button view="default" text="Открыть новое модальное окно" onClick={() => setIsOpen(!isOpen)} />
+                <StyledModalAnimation
+                    id="modal"
+                    frame="theme-root"
+                    withAnimation
+                    onClose={() => setIsOpen(false)}
+                    isOpen={isOpen}
+                    placement={placement}
+                    offset={[offsetX, offsetY]}
+                    initialFocusRef={ref}
+                    {...rest}
+                >
+                    <Content>
+                        <TextField value="Text" onChange={() => {}} />
+                        <TextField ref={ref} value="Text2" onChange={() => {}} />
+                        <Button text="Закрыть" onClick={close} />
+                    </Content>
+                </StyledModalAnimation>
+            </PopupProvider>
+            {/* </StyledWrapper> */}
+        </SSRProvider>
+    );
+};
+
+export const ModalBottomAnimation: StoryObj<StoryModalProps> = {
+    args: {
+        placement: 'bottom',
+        withAnimation: true,
+        withBlur: false,
+        closeOnEsc: true,
+        closeOnOverlayClick: true,
+        offsetX: 0,
+        offsetY: 0,
+    },
+    render: (args) => <StoryModalAnimationDemo {...args} />,
+};

package/styled-components/es/components/Accordion/Accordion.tokens.js

@@ -23,7 +23,6 @@ export var tokens = {
   accordionItemFocus: '--plasma-accordion-item-focus',
   accordionItemBorder: '--plasma-accordion-item-border',
   accordionItemBorderBottom: '--plasma-accordion-item-border-bottom',
-  accordionItemIconColor: '--plasma-accordion-item-color-icon',
   accordionItemTitleColor: '--plasma-accordion-item-title-color',
   accordionItemTitleFontFamily: '--plasma-accordion-item-title-font-family',
   accordionItemTitleFontSize: '--plasma-accordion-item-title-font-size',

package/styled-components/es/components/Accordion/ui/AccordionItem/AccordionItem.styles.js

@@ -33,10 +33,10 @@ export var StyledAccordionBody = /*#__PURE__*/styled.div.withConfig({
 })(["color:var(", ");font-family:var(", ");font-size:var(", ");font-weight:var(", ");font-style:var(", ");letter-spacing:var(", ");line-height:var(", ");overflow:hidden;padding-right:var(", ");padding-left:var(", ");text-align:left;"], tokens.accordionItemTextColor, tokens.accordionItemTextFontFamily, tokens.accordionItemTextFontSize, tokens.accordionItemTextFontWeight, tokens.accordionItemTextFontStyle, tokens.accordionItemTextLetterSpacing, tokens.accordionItemTextLineHeight, tokens.accordionItemPaddingHorizontal, tokens.accordionItemPaddingHorizontalLeft);
 export var StyledArrow = /*#__PURE__*/styled(IconChevronDownFill).withConfig({
   componentId: "plasma-new-hope__sc-20ij9z-8"
-})(["pointer-events:none;user-select:none;color:var(", ");"], tokens.accordionItemIconColor);
+})(["pointer-events:none;user-select:none;color:var(", ");"], tokens.accordionItemTextColor);
 export var StyledMinus = /*#__PURE__*/styled(IconMinus).withConfig({
   componentId: "plasma-new-hope__sc-20ij9z-9"
-})(["pointer-events:none;user-select:none;color:var(", ");display:flex;align-items:center;position:absolute;top:0;left:0;&.", "{transition:0.2s;transform:rotate(90deg);}&.", "{transition:0.2s;transform:rotate(0deg);}"], tokens.accordionItemIconColor, classes.accordionPlusAnimationElement, classes.accordionItemShowBody);
+})(["pointer-events:none;user-select:none;color:var(", ");display:flex;align-items:center;position:absolute;top:0;left:0;&.", "{transition:0.2s;transform:rotate(90deg);}&.", "{transition:0.2s;transform:rotate(0deg);}"], tokens.accordionItemTextColor, classes.accordionPlusAnimationElement, classes.accordionItemShowBody);
 export var StyledPlus = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-20ij9z-10"
 })(["position:relative;height:1rem;display:flex;align-items:center;justify-content:center;width:1rem;"]);

package/styled-components/es/components/DatePicker/DatePickerBase.styles.js

@@ -9,4 +9,4 @@ export var baseCalendarTokens = /*#__PURE__*/"\n    padding-top: var(".concat(to
 // NOTE: переопределение токенов Calendar
 export var StyledCalendar = /*#__PURE__*/styled(Calendar).withConfig({
   componentId: "plasma-new-hope__sc-1i6o09y-0"
-})(["", ""], baseCalendarTokens);
+})(["width:var(", ");", ""], tokens.width, baseCalendarTokens);

package/styled-components/es/components/DatePicker/RangeDate/RangeDate.js

@@ -234,6 +234,14 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
         return prevOpen !== isOpen && isOpen;
       });
     }, [isOpen]);
+    useEffect(function () {
+      setCalendarFirstValue(formatCalendarValue(defaultFirstDate, format));
+      setInputFirstValue(formatInputValue(defaultFirstDate, format));
+    }, [defaultFirstDate]);
+    useEffect(function () {
+      setCalendarSecondValue(formatCalendarValue(defaultSecondDate, format));
+      setInputSecondValue(formatInputValue(defaultSecondDate, format));
+    }, [defaultSecondDate]);
     return /*#__PURE__*/React.createElement(Root, _extends({
       ref: rootRef,
       view: view,

package/styled-components/es/components/DatePicker/SingleDate/SingleDate.js

@@ -144,6 +144,10 @@ export var datePickerRoot = function datePickerRoot(Root) {
         return prevOpen !== isOpen && isOpen;
       });
     }, [isOpen]);
+    useEffect(function () {
+      setCalendarValue(formatCalendarValue(defaultDate, format));
+      setInputValue(formatInputValue(defaultDate, format));
+    }, [defaultDate]);
     return /*#__PURE__*/React.createElement(Root, _extends({
       view: view,
       size: size,

package/styled-components/es/components/DatePicker/SingleDate/SingleDate.styles.js

@@ -3,7 +3,7 @@ import { css } from 'styled-components';
 import { component, mergeConfig } from '../../../engines';
 import { textFieldConfig, textFieldTokens } from '../../TextField';
 import { classes, tokens } from '../DatePicker.tokens';
-import { popoverConfig } from '../../Popover';
+import { popoverClasses, popoverConfig } from '../../Popover';
 var mergedTextFieldConfig = /*#__PURE__*/mergeConfig(textFieldConfig);
 var TextField = /*#__PURE__*/component(mergedTextFieldConfig);
 var mergedPopoverConfig = /*#__PURE__*/mergeConfig(popoverConfig);
@@ -15,8 +15,8 @@ export var StyledPopover = /*#__PURE__*/styled(Popover).withConfig({
 // NOTE: переопределение токенов TextField
 export var StyledInput = /*#__PURE__*/styled(TextField).withConfig({
   componentId: "plasma-new-hope__sc-1ye0xbz-1"
-})(["         ", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");&.", "{", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");}&.", "{", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");}"], textFieldTokens.color, tokens.textFieldColor, textFieldTokens.placeholderColor, tokens.textFieldPlaceholderColor, textFieldTokens.caretColor, tokens.textFieldCaretColor, textFieldTokens.focusColor, tokens.textFieldFocusColor, textFieldTokens.backgroundColor, tokens.textFieldBackgroundColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundColorFocus, textFieldTokens.borderColor, tokens.borderColor, textFieldTokens.borderColorHover, tokens.borderColorHover, textFieldTokens.borderColorFocus, tokens.borderColorFocus, textFieldTokens.colorReadOnly, tokens.textFieldColorReadOnly, textFieldTokens.backgroundColorReadOnly, tokens.textFieldBackgroundColorReadOnly, textFieldTokens.borderColorReadOnly, tokens.textFieldBorderColorReadOnly, textFieldTokens.placeholderColorReadOnly, tokens.textFieldPlaceholderColorReadOnly, textFieldTokens.height, tokens.textFieldHeight, textFieldTokens.borderWidth, tokens.textFieldBorderWidth, textFieldTokens.borderRadius, tokens.textFieldBorderRadius, textFieldTokens.padding, tokens.textFieldPadding, textFieldTokens.labelInnerPadding, tokens.labelInnerPadding, textFieldTokens.contentLabelInnerPadding, tokens.contentLabelInnerPadding, textFieldTokens.labelInnerFontFamily, tokens.labelInnerFontFamily, textFieldTokens.labelInnerFontSize, tokens.labelInnerFontSize, textFieldTokens.labelInnerFontStyle, tokens.labelInnerFontStyle, textFieldTokens.labelInnerFontWeight, tokens.labelInnerFontWeight, textFieldTokens.labelInnerLetterSpacing, tokens.labelInnerLetterSpacing, textFieldTokens.labelInnerLineHeight, tokens.labelInnerLineHeight, textFieldTokens.leftContentMargin, tokens.textFieldLeftContentMargin, textFieldTokens.rightContentMargin, tokens.textFieldRightContentMargin, textFieldTokens.fontFamily, tokens.textFieldFontFamily, textFieldTokens.fontSize, tokens.textFieldFontSize, textFieldTokens.fontStyle, tokens.textFieldFontStyle, textFieldTokens.fontWeight, tokens.textFieldFontWeight, textFieldTokens.letterSpacing, tokens.textFieldLetterSpacing, textFieldTokens.lineHeight, tokens.textFieldLineHeight, textFieldTokens.disabledOpacity, tokens.disabledOpacity, textFieldTokens.textBeforeColor, tokens.textFieldTextBeforeColor, textFieldTokens.textAfterColor, tokens.textFieldTextAfterColor, textFieldTokens.textBeforeMargin, tokens.textFieldTextBeforeMargin, textFieldTokens.textAfterMargin, tokens.textFieldTextAfterMargin, classes.datePickerError, textFieldTokens.backgroundColor, tokens.textFieldBackgroundErrorColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundErrorColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundErrorColorFocus, textFieldTokens.borderColor, tokens.textFieldBorderColorError, textFieldTokens.borderColorHover, tokens.textFieldBorderColorErrorHover, textFieldTokens.borderColorFocus, tokens.textFieldBorderColorErrorFocus, classes.datePickerSuccess, textFieldTokens.backgroundColor, tokens.textFieldBackgroundSuccessColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundSuccessColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundSuccessColorFocus, textFieldTokens.borderColor, tokens.textFieldBorderColorSuccess, textFieldTokens.borderColorHover, tokens.textFieldBorderColorSuccessHover, textFieldTokens.borderColorFocus, tokens.textFieldBorderColorSuccessFocus);
-export var base = /*#__PURE__*/css(["display:inline-block;"]);
+})(["width:100%;", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");&.", "{", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");}&.", "{", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");}"], textFieldTokens.color, tokens.textFieldColor, textFieldTokens.placeholderColor, tokens.textFieldPlaceholderColor, textFieldTokens.caretColor, tokens.textFieldCaretColor, textFieldTokens.focusColor, tokens.textFieldFocusColor, textFieldTokens.backgroundColor, tokens.textFieldBackgroundColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundColorFocus, textFieldTokens.borderColor, tokens.borderColor, textFieldTokens.borderColorHover, tokens.borderColorHover, textFieldTokens.borderColorFocus, tokens.borderColorFocus, textFieldTokens.colorReadOnly, tokens.textFieldColorReadOnly, textFieldTokens.backgroundColorReadOnly, tokens.textFieldBackgroundColorReadOnly, textFieldTokens.borderColorReadOnly, tokens.textFieldBorderColorReadOnly, textFieldTokens.placeholderColorReadOnly, tokens.textFieldPlaceholderColorReadOnly, textFieldTokens.height, tokens.textFieldHeight, textFieldTokens.borderWidth, tokens.textFieldBorderWidth, textFieldTokens.borderRadius, tokens.textFieldBorderRadius, textFieldTokens.padding, tokens.textFieldPadding, textFieldTokens.labelInnerPadding, tokens.labelInnerPadding, textFieldTokens.contentLabelInnerPadding, tokens.contentLabelInnerPadding, textFieldTokens.labelInnerFontFamily, tokens.labelInnerFontFamily, textFieldTokens.labelInnerFontSize, tokens.labelInnerFontSize, textFieldTokens.labelInnerFontStyle, tokens.labelInnerFontStyle, textFieldTokens.labelInnerFontWeight, tokens.labelInnerFontWeight, textFieldTokens.labelInnerLetterSpacing, tokens.labelInnerLetterSpacing, textFieldTokens.labelInnerLineHeight, tokens.labelInnerLineHeight, textFieldTokens.leftContentMargin, tokens.textFieldLeftContentMargin, textFieldTokens.rightContentMargin, tokens.textFieldRightContentMargin, textFieldTokens.fontFamily, tokens.textFieldFontFamily, textFieldTokens.fontSize, tokens.textFieldFontSize, textFieldTokens.fontStyle, tokens.textFieldFontStyle, textFieldTokens.fontWeight, tokens.textFieldFontWeight, textFieldTokens.letterSpacing, tokens.textFieldLetterSpacing, textFieldTokens.lineHeight, tokens.textFieldLineHeight, textFieldTokens.disabledOpacity, tokens.disabledOpacity, textFieldTokens.textBeforeColor, tokens.textFieldTextBeforeColor, textFieldTokens.textAfterColor, tokens.textFieldTextAfterColor, textFieldTokens.textBeforeMargin, tokens.textFieldTextBeforeMargin, textFieldTokens.textAfterMargin, tokens.textFieldTextAfterMargin, classes.datePickerError, textFieldTokens.backgroundColor, tokens.textFieldBackgroundErrorColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundErrorColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundErrorColorFocus, textFieldTokens.borderColor, tokens.textFieldBorderColorError, textFieldTokens.borderColorHover, tokens.textFieldBorderColorErrorHover, textFieldTokens.borderColorFocus, tokens.textFieldBorderColorErrorFocus, classes.datePickerSuccess, textFieldTokens.backgroundColor, tokens.textFieldBackgroundSuccessColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundSuccessColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundSuccessColorFocus, textFieldTokens.borderColor, tokens.textFieldBorderColorSuccess, textFieldTokens.borderColorHover, tokens.textFieldBorderColorSuccessHover, textFieldTokens.borderColorFocus, tokens.textFieldBorderColorSuccessFocus);
+export var base = /*#__PURE__*/css(["display:inline-block;.", ",.", "{width:inherit;}"], /*#__PURE__*/String(popoverClasses.wrapper), /*#__PURE__*/String(popoverClasses.target));
 export var StyledLabel = /*#__PURE__*/styled.label.withConfig({
   componentId: "plasma-new-hope__sc-1ye0xbz-2"
 })([""]);

package/styled-components/es/components/DatePicker/SingleDate/variations/_size/base.js

@@ -1,4 +1,4 @@
 import { css } from 'styled-components';
 import { tokens } from '../../../DatePicker.tokens';
 import { StyledLabel, LeftHelper } from '../../SingleDate.styles';
-export var base = /*#__PURE__*/css(["width:var(", ");", "{margin:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{margin:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}"], tokens.width, StyledLabel, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, LeftHelper, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight);
+export var base = /*#__PURE__*/css(["", "{margin:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{margin:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}"], StyledLabel, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, LeftHelper, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight);

package/styled-components/es/components/Modal/Modal.js

@@ -40,7 +40,7 @@ export var modalRoot = function modalRoot(Root) {
       view = _ref.view,
       isOpen = _ref.isOpen,
       rest = _objectWithoutProperties(_ref, _excluded);
-    var trapRef = useFocusTrap(true, initialFocusRef, focusAfterRef);
+    var trapRef = useFocusTrap(true, initialFocusRef, focusAfterRef, true);
     var popupController = usePopupContext();
     var innerRef = useForkRef(trapRef, outerRootRef);
     var uniqId = safeUseId();

package/styled-components/es/examples/plasma_b2c/components/Accordion/Accordion.config.js

@@ -7,8 +7,8 @@ export var config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/css(["", ":0.125rem;", ":20rem;", ":var(", ") var(", ");", ":var(--surface-solid-card);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":var(--surface-clear);", ":none;", ":0;", ":var(", ");"], accordionTokens.accordionGap, accordionTokens.accordionWidth, accordionTokens.accordionItemPadding, accordionTokens.accordionItemPaddingVertical, accordionTokens.accordionItemPaddingHorizontal, accordionTokens.accordionItemBackground, accordionTokens.accordionItemTitleColor, accordionTokens.accordionItemTextColor, accordionTokens.accordionItemIconColor, accordionTokens.accordionItemFocus, accordionTokens.accordionBackground, accordionTokens.accordionItemBorder, accordionTokens.accordionItemBorderBottom, accordionTokens.accordionItemPaddingHorizontalLeft, accordionTokens.accordionItemPaddingHorizontal),
-      clear: /*#__PURE__*/css(["", ":0;", ":20rem;", ":var(", ") 0rem;", ":var(--surface-clear);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":0rem !important;", ":var(--surface-clear);", ":none;", ":0.125rem solid var(--surface-solid-tertiary);", ":0;"], accordionTokens.accordionGap, accordionTokens.accordionWidth, accordionTokens.accordionItemPadding, accordionTokens.accordionItemPaddingVertical, accordionTokens.accordionItemBackground, accordionTokens.accordionItemTitleColor, accordionTokens.accordionItemTextColor, accordionTokens.accordionItemIconColor, accordionTokens.accordionItemFocus, accordionTokens.accordionItemBorderRadius, accordionTokens.accordionBackground, accordionTokens.accordionItemBorder, accordionTokens.accordionItemBorderBottom, accordionTokens.accordionItemPaddingHorizontalLeft)
+      "default": /*#__PURE__*/css(["", ":0.125rem;", ":20rem;", ":var(", ") var(", ");", ":var(--surface-solid-card);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":var(--surface-clear);", ":none;", ":0;", ":var(", ");"], accordionTokens.accordionGap, accordionTokens.accordionWidth, accordionTokens.accordionItemPadding, accordionTokens.accordionItemPaddingVertical, accordionTokens.accordionItemPaddingHorizontal, accordionTokens.accordionItemBackground, accordionTokens.accordionItemTitleColor, accordionTokens.accordionItemTextColor, accordionTokens.accordionItemFocus, accordionTokens.accordionBackground, accordionTokens.accordionItemBorder, accordionTokens.accordionItemBorderBottom, accordionTokens.accordionItemPaddingHorizontalLeft, accordionTokens.accordionItemPaddingHorizontal),
+      clear: /*#__PURE__*/css(["", ":0;", ":20rem;", ":var(", ") 0rem;", ":var(--surface-clear);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":0rem !important;", ":var(--surface-clear);", ":none;", ":0.125rem solid var(--surface-solid-tertiary);", ":0;"], accordionTokens.accordionGap, accordionTokens.accordionWidth, accordionTokens.accordionItemPadding, accordionTokens.accordionItemPaddingVertical, accordionTokens.accordionItemBackground, accordionTokens.accordionItemTitleColor, accordionTokens.accordionItemTextColor, accordionTokens.accordionItemFocus, accordionTokens.accordionItemBorderRadius, accordionTokens.accordionBackground, accordionTokens.accordionItemBorder, accordionTokens.accordionItemBorderBottom, accordionTokens.accordionItemPaddingHorizontalLeft)
     },
     size: {
       l: /*#__PURE__*/css(["", ":1.0625rem;", ":1.25rem;", ":0.5rem;", ":0.875rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], accordionTokens.accordionItemPaddingVertical, accordionTokens.accordionItemPaddingHorizontal, accordionTokens.accordionItemGap, accordionTokens.accordionItemBorderRadius, accordionTokens.accordionItemTitleFontFamily, accordionTokens.accordionItemTitleFontSize, accordionTokens.accordionItemTitleFontStyle, accordionTokens.accordionItemTitleFontWeight, accordionTokens.accordionItemTitleLetterSpacing, accordionTokens.accordionItemTitleLineHeight, accordionTokens.accordionItemTextFontFamily, accordionTokens.accordionItemTextFontSize, accordionTokens.accordionItemTextFontStyle, accordionTokens.accordionItemTextFontWeight, accordionTokens.accordionItemTextLetterSpacing, accordionTokens.accordionItemTextLineHeight),

package/styled-components/es/examples/plasma_b2c/components/DatePicker/DatePicker.config.js

@@ -7,7 +7,7 @@ export var config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/css(["", ":var(--surface-transparent-primary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-positive);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-accent);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-active);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-active);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-accent);", ":var(--shadow-down-soft-s);", ":var(--surface-transparent-secondary);", ":var(--surface-solid-card);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-transparent-secondary);", ":var(--surface-solid-default);", ":transparent;", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-accent);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--surface-accent);", ":var(--surface-solid-default);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--surface-accent);"], tokens.background, tokens.backgroundError, tokens.backgroundSuccess, tokens.dividerColor, tokens.labelColor, tokens.leftHelperColor, tokens.textFieldColor, tokens.textFieldPlaceholderColor, tokens.textFieldCaretColor, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight, tokens.textFieldBackgroundColor, tokens.textFieldBackgroundColorFocus, tokens.textFieldBackgroundErrorColor, tokens.textFieldBackgroundErrorColorFocus, tokens.textFieldBackgroundSuccessColor, tokens.textFieldBackgroundSuccessColorFocus, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.focusColor, tokens.calendarShadow, tokens.calendarSeparatorBackground, tokens.calendarBackgroundColor, tokens.calendarSelectedItemBackground, tokens.calendarSelectedItemColor, tokens.calendarSelectableItemBackgroundHover, tokens.calendarCurrentItemBorderColor, tokens.calendarCurrentItemBackgroundHover, tokens.calendarCurrentItemColorHover, tokens.calendarCurrentItemChildBackgroundHover, tokens.calendarActiveItemBackground, tokens.calendarActiveItemColor, tokens.calendarHoveredItemBackground, tokens.calendarHoveredItemColor, tokens.calendarRangeBackground, tokens.calendarOutlineFocusColor, tokens.calendarContentPrimaryColor, tokens.calendarContentSecondaryColor, tokens.iconButtonColor, tokens.iconButtonBackgroundColor, tokens.iconButtonColorHover, tokens.iconButtonBackgroundColorHover, tokens.iconButtonColorActive, tokens.iconButtonBackgroundColorActive, tokens.iconButtonFocusColor)
+      "default": /*#__PURE__*/css(["", ":var(--surface-transparent-primary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-positive);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-accent);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-active);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-active);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-accent);", ":var(--shadow-down-soft-s);", ":var(--surface-transparent-secondary);", ":var(--surface-solid-card);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-transparent-secondary);", ":var(--surface-solid-default);", ":transparent;", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-accent);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--surface-accent);", ":var(--surface-solid-default);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--surface-accent);"], tokens.background, tokens.backgroundError, tokens.backgroundSuccess, tokens.dividerColor, tokens.labelColor, tokens.leftHelperColor, tokens.textFieldColor, tokens.textFieldPlaceholderColor, tokens.textFieldCaretColor, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight, tokens.textFieldBackgroundColor, tokens.textFieldBackgroundColorFocus, tokens.textFieldBackgroundErrorColor, tokens.textFieldBackgroundErrorColorFocus, tokens.textFieldBackgroundSuccessColor, tokens.textFieldBackgroundSuccessColorFocus, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.focusColor, tokens.calendarShadow, tokens.calendarSeparatorBackground, tokens.calendarBackgroundColor, tokens.calendarSelectedItemBackground, tokens.calendarSelectedItemColor, tokens.calendarSelectableItemBackgroundHover, tokens.calendarCurrentItemBorderColor, tokens.calendarCurrentItemBackgroundHover, tokens.calendarCurrentItemColorHover, tokens.calendarCurrentItemChildBackgroundHover, tokens.calendarActiveItemBackground, tokens.calendarActiveItemColor, tokens.calendarHoveredItemBackground, tokens.calendarHoveredItemColor, tokens.calendarRangeBackground, tokens.calendarOutlineFocusColor, tokens.calendarContentPrimaryColor, tokens.calendarContentSecondaryColor, tokens.iconButtonColor, tokens.iconButtonBackgroundColor, tokens.iconButtonColorHover, tokens.iconButtonBackgroundColorHover, tokens.iconButtonColorActive, tokens.iconButtonBackgroundColorActive, tokens.iconButtonFocusColor)
     },
     size: {
       l: /*#__PURE__*/css(["", ":26.5rem;", ":0.875rem;", ":0 0.375rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0 0 0 1rem;", ":0;", ":0 0 0.75rem 0;", ":0.5625rem 0 0.125rem 0;", ":1.5625rem 0 0.5625rem 0;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":3.5rem;", ":0.875rem;", ":1.0625rem 1.125rem 1.0625rem 1.125rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.25rem 0 0 0;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.0625rem 0.5rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;", ":0.875rem;", ":26.5rem;", ":0.5rem 1rem 1.125rem 1rem;", ":0.75rem;", ":7.8125rem;", ":5.25rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-bold-font-weight);", ":0.5rem 1rem 1.125rem 1rem;", ":0.75rem;", ":7.8125rem;", ":5.25rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-bold-font-weight);", ":0.5rem 0.5rem 0 0.5rem;", ":0.75rem;", ":11.75rem;", ":10.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-bold-font-weight);", ":0.5rem 1rem 1.125rem 1rem;", ":0.75rem;", ":3.5rem;", ":3rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-bold-font-weight);", ":0.875rem 1rem 0 1rem;", ":0.5rem;", ":0 0 0 1rem;", ":0.5rem;", ":var(--plasma-typo-h3-font-family);", ":var(--plasma-typo-h3-font-size);", ":var(--plasma-typo-h3-font-style);", ":var(--plasma-typo-h3-letter-spacing);", ":var(--plasma-typo-h3-line-height);", ":var(--plasma-typo-h3-font-weight);", ":var(--plasma-typo-h3-bold-font-weight);", ":3.5rem;", ":3.5rem;", ":1.5rem;", ":0.875rem;"], tokens.width, tokens.borderRadius, tokens.dividerPadding, tokens.dividerFontFamily, tokens.dividerFontStyle, tokens.dividerFontSize, tokens.dividerFontWeight, tokens.dividerLetterSpacing, tokens.dividerLineHeight, tokens.leftContentMargin, tokens.rightContentMargin, tokens.labelOffset, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.labelFontFamily, tokens.labelFontStyle, tokens.labelFontSize, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.textFieldHeight, tokens.textFieldBorderRadius, tokens.textFieldPadding, tokens.textFieldFontFamily, tokens.textFieldFontStyle, tokens.textFieldFontSize, tokens.textFieldFontWeight, tokens.textFieldLetterSpacing, tokens.textFieldLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontStyle, tokens.leftHelperFontSize, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.textFieldLeftContentMargin, tokens.textFieldRightContentMargin, tokens.textFieldTextBeforeMargin, tokens.textFieldTextAfterMargin, tokens.calendarBorderRadius, tokens.calendarWidth, tokens.calendarYearsPadding, tokens.calendarYearItemBorderRadius, tokens.calendarYearItemWidth, tokens.calendarYearItemHeight, tokens.calendarYearFontFamily, tokens.calendarYearFontSize, tokens.calendarYearFontStyle, tokens.calendarYearFontLetterSpacing, tokens.calendarYearFontLineHeight, tokens.calendarYearFontWeight, tokens.calendarYearSelectedFontWeight, tokens.calendarMonthsPadding, tokens.calendarMonthItemBorderRadius, tokens.calendarMonthItemWidth, tokens.calendarMonthItemHeight, tokens.calendarMonthFontFamily, tokens.calendarMonthFontSize, tokens.calendarMonthFontStyle, tokens.calendarMonthFontLetterSpacing, tokens.calendarMonthFontLineHeight, tokens.calendarMonthFontWeight, tokens.calendarMonthSelectedFontWeight, tokens.calendarQuartersPadding, tokens.calendarQuarterItemBorderRadius, tokens.calendarQuarterItemWidth, tokens.calendarQuarterItemHeight, tokens.calendarQuarterFontFamily, tokens.calendarQuarterFontSize, tokens.calendarQuarterFontStyle, tokens.calendarQuarterFontLetterSpacing, tokens.calendarQuarterFontLineHeight, tokens.calendarQuarterFontWeight, tokens.calendarQuarterSelectedFontWeight, tokens.calendarDaysPadding, tokens.calendarDayItemBorderRadius, tokens.calendarDayItemWidth, tokens.calendarDayItemHeight, tokens.calendarDayFontFamily, tokens.calendarDayFontSize, tokens.calendarDayFontStyle, tokens.calendarDayFontLetterSpacing, tokens.calendarDayFontLineHeight, tokens.calendarDayFontWeight, tokens.calendarDaySelectedFontWeight, tokens.calendarHeaderWrapperPadding, tokens.calendarHeaderArrowGap, tokens.calendarHeaderPadding, tokens.calendarHeaderDateGap, tokens.calendarHeaderFontFamily, tokens.calendarHeaderFontSize, tokens.calendarHeaderFontStyle, tokens.calendarHeaderFontLetterSpacing, tokens.calendarHeaderFontLineHeight, tokens.calendarHeaderFontWeight, tokens.calendarHeaderFontWeightBold, tokens.iconButtonHeight, tokens.iconButtonWidth, tokens.iconButtonPadding, tokens.iconButtonRadius),