@salutejs/plasma-new-hope 0.84.0-canary.1208.9187471531.0 → 0.84.0-canary.1213.9187563305.0

package/styled-components/es/components/Range/Range.template-doc.mdx

@@ -1,323 +0,0 @@
----
-id: range
-title: Range
----
-
-import { PropsTable, Description } from '@site/src/components';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-# Range
-<Description name="Range" />
-<PropsTable name="Range" exclude={['css']} />
-
-## Использование
-Компонент `Range` представляет собой два поля ввода какого-либо диапазона. К примеру диапазон цен или дат.
-
-```tsx live
-import React, {useState} from 'react';
-import { Range, Button } from '@salutejs/{{ package }}';
-import { IconSearch } from '@salutejs/plasma-icons';
-
-export function App() {
-    const [firstValue, setFirstValue] = useState('');
-    const [secondValue, setSecondValue] = useState('');
-
-    const ActionButton = () => {
-        return (
-            <Button view="clear" size="l">
-                <IconSearch size="s" />
-            </Button>
-        );
-    };
-
-    return (
-        <div>
-            <Range
-                firstValue={firstValue}
-                secondValue={secondValue}
-                label="Лейбл"
-                leftHelper="Подсказка к полю"
-                firstPlaceholder="Заполните поле 1"
-                secondPlaceholder="Заполните поле 2"
-                contentRight={<ActionButton />}
-                dividerVariant="dash"
-                onChangeFirstValue={(e) => {
-                    setFirstValue(e.target.value);
-                }}
-                onChangeSecondValue={(e) => {
-                    setSecondValue(e.target.value);
-                }}
-            />
-        </div>
-    );
-}
-```
-
-### Размер Range
-Размер Range задаётся с помощью свойства `size`:
-
-```tsx live
-import React from 'react';
-import { Range } from '@salutejs/{{ package }}';
-
-export function App() {
-    return (
-        <div style=\{{ display: "flex", flexDirection: "column", gap: "2rem" }}>
-            <Range
-                view="default"
-                size="l"
-                label="Лейбл"
-                leftHelper="Подсказка к полю"
-                firstPlaceholder="Заполните поле 1"
-                secondPlaceholder="Заполните поле 2"
-                dividerVariant="dash"
-            />
-            
-            <Range
-                view="default"
-                size="m"
-                label="Лейбл"
-                leftHelper="Подсказка к полю"
-                firstPlaceholder="Заполните поле 1"
-                secondPlaceholder="Заполните поле 2"
-                dividerVariant="dash"
-            />
-
-            <Range
-                view="default"
-                size="s"
-                label="Лейбл"
-                leftHelper="Подсказка к полю"
-                firstPlaceholder="Заполните поле 1"
-                secondPlaceholder="Заполните поле 2"
-                dividerVariant="dash"
-            />
-
-            <Range
-                view="default"
-                size="xs"
-                label="Лейбл"
-                leftHelper="Подсказка к полю"
-                firstPlaceholder="Заполните поле 1"
-                secondPlaceholder="Заполните поле 2"
-                dividerVariant="dash"
-            />
-        </div>
-    );
-}
-```
-
-### Вид разделителя
-Вид разделителя задается с помощью свойства `dividerVariant`:
-
-<Tabs>
-    <TabItem value="dash" label="Dash" default>
-        ```tsx live
-            import React from 'react';
-            import { Range } from '@salutejs/{{ package }}';
-
-            export function App() {
-                return (
-                    <div>
-                        <Range
-                            view="default"
-                            size="l"
-                            label="Лейбл"
-                            leftHelper="Подсказка к полю"
-                            firstPlaceholder="Заполните поле 1"
-                            secondPlaceholder="Заполните поле 2"
-                            dividerVariant="dash"
-                        />
-                    </div>
-                );
-            }
-        ```
-    </TabItem>
-
-    <TabItem value="none" label="None">
-        При таком варианте свойства `firstTextfieldTextBefore` и `secondTextfieldTextBefore` становятся обязательными:
-
-        ```tsx live
-            import React from 'react';
-            import { Range } from '@salutejs/{{ package }}';
-
-            export function App() {
-                return (
-                    <div>
-                        <Range
-                            view="default"
-                            size="l"
-                            label="Лейбл"
-                            firstValue="10:00"
-                            secondValue="15:45"
-                            leftHelper="Подсказка к полю"
-                            firstTextfieldTextBefore="С"
-                            secondTextfieldTextBefore="ДО"
-                            dividerVariant="none"
-                        />
-                    </div>
-                );
-            }
-        ```
-    </TabItem>
-
-    <TabItem value="icon" label="Icon">
-        При таком варианте свойства `dividerIcon` становится обязательным:
-
-        ```tsx live
-            import React from 'react';
-            import { Range } from '@salutejs/{{ package }}';
-            import { IconSber } from '@salutejs/plasma-icons';
-
-            export function App() {
-                return (
-                    <div>
-                        <Range
-                            view="default"
-                            size="l"
-                            label="Лейбл"
-                            firstValue="10:00"
-                            secondValue="15:45"
-                            leftHelper="Подсказка к полю"
-                            firstTextfieldTextBefore="С"
-                            secondTextfieldTextBefore="ДО"
-                            dividerVariant="icon"
-                            dividerIcon={<IconSber size="s" />}
-                        />
-                    </div>
-                );
-            }
-        ```
-    </TabItem>
-</Tabs>
-
-### Валидация и индикация успешного ввода
-За индикацию ошибки или успешного ввода отвечают `firstValueError`, `secondValueError`, `firstValueSuccess`, `secondValueSuccess`.
-В данном примере валидация происходит при нажатии клавиши `Enter` после ввода значений:
-
-```tsx live
-import React, {useState, ChangeEvent, Dispatch, SetStateAction} from 'react';
-import { Range, Button } from '@salutejs/{{ package }}';
-import { IconSearch } from '@salutejs/plasma-icons';
-
-export function App() {
-    const [firstValue, setFirstValue] = useState('');
-    const [secondValue, setSecondValue] = useState('');
-
-    const [firstValueError, setFirstValueError] = useState(false);
-    const [secondValueError, setSecondValueError] = useState(false);
-
-    const [firstValueSuccess, setFirstValueSuccess] = useState(false);
-    const [secondValueSuccess, setSecondValueSuccess] = useState(false);
-
-    const checkValue = (value: string) => /^([1-9][0-9]*|)$/.test(value);
-
-    const handleChangeValue = (
-        e: ChangeEvent<HTMLInputElement>,
-        setter: Dispatch<SetStateAction<string>>,
-        error: boolean,
-        errorSetter: Dispatch<SetStateAction<boolean>>,
-        success: boolean,
-        successSetter: Dispatch<SetStateAction<boolean>>,
-    ) => {
-        const { value } = e.target;
-        if (!checkValue(value)) {
-            return;
-        }
-
-        if (error) {
-            errorSetter(false);
-        }
-
-        if (success) {
-            successSetter(false);
-        }
-
-        setter(value);
-    };
-
-    const firstValueConstraint = (value: number) =>
-        value <= 0 || value >= 9 || (secondValue && value >= Number(secondValue) && !secondValueError);
-    const secondValueConstraint = (value: number) =>
-        value <= 0 || value > 10 || (firstValue && value <= Number(firstValue) && !firstValueError);
-
-    const handleCommitValue = (
-        value: string,
-        constraint: (currentValue: number) => boolean,
-        errorSetter: Dispatch<SetStateAction<boolean>>,
-        successSetter: Dispatch<SetStateAction<boolean>>,
-    ) => {
-        if (!value) {
-            return;
-        }
-
-        if (!checkValue(value)) {
-            return errorSetter(true);
-        }
-
-        if (constraint(Number(value))) {
-            return errorSetter(true);
-        }
-
-        successSetter(true);
-    };
-
-    const ActionButton = () => {
-        return (
-            <Button view="clear" size="l">
-                <IconSearch size="s" />
-            </Button>
-        );
-    };
-
-    return (
-        <div>
-            <Range
-                size="l"
-                view="default"
-                firstValue={firstValue}
-                secondValue={secondValue}
-                label="Введите кол-во товара"
-                leftHelper="Кол-во товара не может быть меньше 1 и превышать 10"
-                firstPlaceholder="1"
-                secondPlaceholder="5"
-                contentRight={<ActionButton />}
-                dividerVariant="dash"
-                firstValueError={firstValueError}
-                secondValueError={secondValueError}
-                firstValueSuccess={firstValueSuccess}
-                secondValueSuccess={secondValueSuccess}
-                onChangeFirstValue={(e) => {
-                    handleChangeValue(
-                        e,
-                        setFirstValue,
-                        firstValueError,
-                        setFirstValueError,
-                        firstValueSuccess,
-                        setFirstValueSuccess,
-                    );
-                }}
-                onChangeSecondValue={(e) => {
-                    handleChangeValue(
-                        e,
-                        setSecondValue,
-                        secondValueError,
-                        setSecondValueError,
-                        secondValueSuccess,
-                        setSecondValueSuccess,
-                    );
-                }}
-                onSearchFirstValue={(e) => {
-                    const { value } = e.target as HTMLInputElement;
-                    handleCommitValue(value, firstValueConstraint, setFirstValueError, setFirstValueSuccess);
-                }}
-                onSearchSecondValue={(e) => {
-                    const { value } = e.target as HTMLInputElement;
-                    handleCommitValue(value, secondValueConstraint, setSecondValueError, setSecondValueSuccess);
-                }}
-            />
-        </div>
-    );
-}
-```

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

@@ -1,98 +0,0 @@
-export var classes = {
-  rangeError: 'range-error',
-  rangeValueError: 'range-value-error',
-  rangeSuccess: 'range-success',
-  rangeValueSuccess: 'range-value-success'
-};
-export var tokens = {
-  background: '--plasma-range-background',
-  backgroundError: '--plasma-range-background-error',
-  backgroundSuccess: '--plasma-range-background-success',
-  backgroundReadOnly: '--plasma-range-background-readonly',
-  borderRadius: '--plasma-range-border-radius',
-  borderWidth: '--plasma-range-border-width',
-  borderColor: '--plasma-range-border-color',
-  borderColorError: '--plasma-range-border-color-error',
-  borderColorSuccess: '--plasma-range-border-color-success',
-  borderColorReadOnly: '--plasma-range-border-color-readonly',
-  /** Токены разделителя */
-  dividerColor: '--plasma-range__divider-color',
-  dividerColorReadOnly: '--plasma-range__divider-color-readonly',
-  dividerPadding: '--plasma-range__divider-padding',
-  dividerFontFamily: '--plasma-range__divider-font-family',
-  dividerFontStyle: '--plasma-range__divider-font-style',
-  dividerFontSize: '--plasma-range__divider-font-size',
-  dividerFontWeight: '--plasma-range__divider-font-weight',
-  dividerLetterSpacing: '--plasma-range__divider-letter-spacing',
-  dividerLineHeight: '--plasma-range__divider-line-height',
-  /** Токены слотов для контента */
-  leftContentMargin: '--plasma-range__left-content-margin',
-  rightContentMargin: '--plasma-range__right-content-margin',
-  /** Токены лейбла */
-  labelColor: '--plasma-range__label-color',
-  labelColorReadOnly: '--plasma-range__label-color-readonly',
-  labelOffset: '--plasma-range__label-offset',
-  labelFontFamily: '--plasma-range__label-font-family',
-  labelFontStyle: '--plasma-range__label-font-style',
-  labelFontSize: '--plasma-range__label-font-size',
-  labelFontWeight: '--plasma-range__label-font-weight',
-  labelLetterSpacing: '--plasma-range__label-letter-spacing',
-  labelLineHeight: '--plasma-range__label-line-height',
-  /** Токены вспомогательного текста */
-  leftHelperColor: '--plasma-range__left-helper-color',
-  leftHelperColorReadOnly: '--plasma-range__left-helper-color-readonly',
-  leftHelperOffset: '--plasma-range__left-helper-offset',
-  leftHelperFontFamily: '--plasma-range__left-helper-font-family',
-  leftHelperFontStyle: '--plasma-range__left-helper-font-style',
-  leftHelperFontSize: '--plasma-range__left-helper-font-size',
-  leftHelperFontWeight: '--plasma-range__left-helper-font-weight',
-  leftHelperLetterSpacing: '--plasma-range__left-helper-letter-spacing',
-  leftHelperLineHeight: '--plasma-range__left-helper-line-height',
-  /** Прозрачность для всего компонента в состоянии disabled */
-  disabledOpacity: '--plasma-range-disabled-opacity',
-  /** Цвет обводки поля ввода при фокусе */
-  focusColor: '--plasma-range-focus-color',
-  /** Токены полей ввода */
-  textFieldColor: '--plasma-range-textfield-color',
-  textFieldFocusColor: '--plasma-range-textfield-focus-color',
-  textFieldPlaceholderColor: '--plasma-range-textfield-placeholder-color',
-  textFieldCaretColor: '--plasma-range-textfield-caret-color',
-  textFieldBackgroundColor: '--plasma-range-textfield-background-color',
-  textFieldBackgroundColorHover: '--plasma-range-textfield-background-color-hover',
-  textFieldBackgroundColorFocus: '--plasma-range-textfield-background-color-focus',
-  textFieldBackgroundErrorColor: '--plasma-range-textfield-background-color-error',
-  textFieldBackgroundErrorColorHover: '--plasma-range-textfield-background-color-error-hover',
-  textFieldBackgroundErrorColorFocus: '--plasma-range-textfield-background-color-error-focus',
-  textFieldBackgroundSuccessColor: '--plasma-range-textfield-background-color-success',
-  textFieldBackgroundSuccessColorHover: '--plasma-range-textfield-background-color-success-hover',
-  textFieldBackgroundSuccessColorFocus: '--plasma-range-textfield-background-color-success-focus',
-  textFieldBorderColor: '--plasma-range-textfield-border-color',
-  textFieldBorderColorHover: '--plasma-range-textfield-border-color-hover',
-  textFieldBorderColorFocus: '--plasma-range-textfield-border-color-focus',
-  textFieldBorderColorError: '--plasma-range-textfield-border-color-error',
-  textFieldBorderColorErrorHover: '--plasma-range-textfield-border-color-error-hover',
-  textFieldBorderColorErrorFocus: '--plasma-range-textfield-border-color-error-focus',
-  textFieldBorderColorSuccess: '--plasma-range-textfield-border-color-success',
-  textFieldBorderColorSuccessHover: '--plasma-range-textfield-border-color-success-hover',
-  textFieldBorderColorSuccessFocus: '--plasma-range-textfield-border-color-success-focus',
-  textFieldColorReadOnly: '--plasma-range-textfield-color-readonly',
-  textFieldBackgroundColorReadOnly: '--plasma-range-textfield-background-color-readonly',
-  textFieldBorderColorReadOnly: '--plasma-range-textfield-border-color-readonly',
-  textFieldPlaceholderColorReadOnly: '--plasma-range-textfield-placeholder-color-readonly',
-  textFieldHeight: '--plasma-range-textfield-height',
-  textFieldBorderWidth: '--plasma-range-textfield-border-width',
-  textFieldBorderRadius: '--plasma-range-textfield-border-radius',
-  textFieldPadding: '--plasma-range-textfield-padding',
-  textFieldLeftContentMargin: '--plasma-range-textfield__left-content-margin',
-  textFieldRightContentMargin: '--plasma-range-textfield__right-content-margin',
-  textFieldFontFamily: '--plasma-range-textfield-font-family',
-  textFieldFontStyle: '--plasma-range-textfield-font-style',
-  textFieldFontSize: '--plasma-range-textfield-font-size',
-  textFieldFontWeight: '--plasma-range-textfield-font-weight',
-  textFieldLetterSpacing: '--plasma-range-textfield-letter-spacing',
-  textFieldLineHeight: '--plasma-range-textfield-line-height',
-  textFieldTextBeforeColor: '--plasma-range-textfield__before-text-color',
-  textFieldTextAfterColor: '--plasma-range-textfield__after-text-color',
-  textFieldTextBeforeMargin: '--plasma-range-textfield__before-text-margin',
-  textFieldTextAfterMargin: '--plasma-range-textfield__after-text-margin'
-};

package/styled-components/es/components/Range/Range.types.js

@@ -1 +0,0 @@
-export {};

package/styled-components/es/components/Range/index.js

@@ -1,2 +0,0 @@
-export { rangeRoot, rangeConfig } from './Range';
-export { tokens as rangeTokens } from './Range.tokens';

package/styled-components/es/components/Range/utils/index.js

@@ -1,16 +0,0 @@
-export var getChangeHandler = function getChangeHandler(changeHandler, disabled, readOnly) {
-  return function (event) {
-    if (disabled || readOnly) {
-      return;
-    }
-    changeHandler === null || changeHandler === void 0 || changeHandler(event, event.target.value);
-  };
-};
-export var getSearchHandler = function getSearchHandler(searchHandler, disabled, readOnly) {
-  return function (value, event) {
-    if (disabled || readOnly) {
-      return;
-    }
-    searchHandler === null || searchHandler === void 0 || searchHandler(event, value);
-  };
-};

package/styled-components/es/components/Range/variations/_disabled/base.js

@@ -1,3 +0,0 @@
-import { css } from 'styled-components';
-import { tokens } from '../../Range.tokens';
-export var base = /*#__PURE__*/css(["&[disabled]{opacity:var(", ");cursor:not-allowed;}"], tokens.disabledOpacity);

package/styled-components/es/components/Range/variations/_disabled/tokens.json

@@ -1,4 +0,0 @@
-{
-    "type": "boolean",
-    "tokens": ["--plasma-range-disabled-opacity"]
-}

package/styled-components/es/components/Range/variations/_readonly/base.js

@@ -1,4 +0,0 @@
-import { css } from 'styled-components';
-import { tokens } from '../../Range.tokens';
-import { ContentWrapper, LeftHelper, StyledContentLeft, StyledContentRight, StyledDivider, StyledLabel } from '../../Range.styles';
-export var base = /*#__PURE__*/css(["&[readonly]{cursor:default;", "{background:var(", ");}", "{display:block;color:var(", ");}", "{color:var(", ");}", "{color:var(", ");}", ",", "{color:var(", ");}}"], ContentWrapper, tokens.backgroundReadOnly, StyledLabel, tokens.labelColorReadOnly, LeftHelper, tokens.leftHelperColorReadOnly, StyledDivider, tokens.dividerColorReadOnly, StyledContentLeft, StyledContentRight, tokens.textFieldColorReadOnly);

package/styled-components/es/components/Range/variations/_readonly/tokens.json

@@ -1,4 +0,0 @@
-{
-    "type": "boolean",
-    "tokens": ["--plasma-range-background-read-only"]
-}

package/styled-components/es/components/Range/variations/_size/base.js

@@ -1,4 +0,0 @@
-import { css } from 'styled-components';
-import { tokens } from '../../Range.tokens';
-import { StyledLabel, LeftHelper, StyledContentLeft, StyledContentRight, StyledDivider, ContentWrapper } from '../../Range.styles';
-export var base = /*#__PURE__*/css(["", "{width:inherit;border-radius:var(", ");}", "{padding: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(", ");}", "{margin:var(", ");}", "{margin:var(", ");}", "{margin:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}"], ContentWrapper, tokens.borderRadius, StyledDivider, tokens.dividerPadding, tokens.dividerFontFamily, tokens.dividerFontSize, tokens.dividerFontStyle, tokens.dividerFontWeight, tokens.dividerLetterSpacing, tokens.dividerLineHeight, StyledLabel, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, StyledContentLeft, tokens.leftContentMargin, StyledContentRight, tokens.rightContentMargin, LeftHelper, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight);

package/styled-components/es/components/Range/variations/_size/tokens.json

@@ -1,26 +0,0 @@
-[
-    "--plasma-range-border-radius",
-    "--plasma-range__left-content-margin",
-    "--plasma-range__right-content-margin",
-    "--plasma-range__label-offset",
-    "--plasma-range__label-font-family",
-    "--plasma-range__label-font-style",
-    "--plasma-range__label-font-size",
-    "--plasma-range__label-font-weight",
-    "--plasma-range__label-letter-spacing",
-    "--plasma-range__label-line-height",
-    "--plasma-range__left-helper-offset",
-    "--plasma-range__left-helper-font-family",
-    "--plasma-range__left-helper-font-style",
-    "--plasma-range__left-helper-font-size",
-    "--plasma-range__left-helper-font-weight",
-    "--plasma-range__left-helper-letter-spacing",
-    "--plasma-range__left-helper-line-height",
-    "--plasma-range__divider-padding",
-    "--plasma-range__divider-font-family",
-    "--plasma-range__divider-font-style",
-    "--plasma-range__divider-font-size",
-    "--plasma-range__divider-font-weight",
-    "--plasma-range__divider-letter-spacing",
-    "--plasma-range__divider-line-height"
-]

package/styled-components/es/components/Range/variations/_view/base.js

@@ -1,4 +0,0 @@
-import { css } from 'styled-components';
-import { classes, tokens } from '../../Range.tokens';
-import { StyledLabel, LeftHelper, StyledDivider, ContentWrapper } from '../../Range.styles';
-export var base = /*#__PURE__*/css(["", "{background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");&.", "{background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}&.", "{background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}}", "{color:var(", ");}", "{display:block;color:var(", ");}", "{color:var(", ");}"], ContentWrapper, tokens.background, tokens.borderWidth, tokens.borderColor, classes.rangeError, tokens.backgroundError, tokens.borderWidth, tokens.borderColorError, classes.rangeSuccess, tokens.backgroundSuccess, tokens.borderWidth, tokens.borderColorSuccess, StyledDivider, tokens.dividerColor, StyledLabel, tokens.labelColor, LeftHelper, tokens.leftHelperColor);

package/styled-components/es/components/Range/variations/_view/tokens.json

@@ -1,6 +0,0 @@
-[
-    "--plasma-range-background",
-    "--plasma-range__label-color",
-    "--plasma-range__left-helper-color",
-    "--plasma-range__divider-color"
-]

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

@@ -1,25 +0,0 @@
-import { css } from 'styled-components';
-import { rangeTokens as tokens } from '../../../../components/Range';
-export var config = {
-  defaults: {
-    view: 'default',
-    size: 'l'
-  },
-  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(--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);"], tokens.background, tokens.backgroundError, tokens.backgroundSuccess, tokens.dividerColor, tokens.labelColor, tokens.leftHelperColor, tokens.textFieldColor, tokens.textFieldPlaceholderColor, tokens.textFieldCaretColor, tokens.textFieldBackgroundColorFocus, tokens.textFieldBackgroundErrorColor, tokens.textFieldBackgroundErrorColorFocus, tokens.textFieldBackgroundSuccessColor, tokens.textFieldBackgroundSuccessColorFocus, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.focusColor)
-    },
-    size: {
-      l: /*#__PURE__*/css(["", ":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.375rem 0 1rem;", ":0;", ":0 0 0.75rem 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;"], tokens.borderRadius, tokens.dividerPadding, tokens.dividerFontFamily, tokens.dividerFontStyle, tokens.dividerFontSize, tokens.dividerFontWeight, tokens.dividerLetterSpacing, tokens.dividerLineHeight, tokens.leftContentMargin, tokens.rightContentMargin, tokens.labelOffset, 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),
-      m: /*#__PURE__*/css(["", ":0.75rem;", ":0 0.375rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0 0.375rem 0 0.875rem;", ":0;", ":0 0 0.625rem 0;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":3rem;", ":0.75rem;", ":0.875rem 1rem 0.875rem 1rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-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.125rem 0.375rem -0.125rem -0.125rem;", ":-0.125rem -0.125rem -0.125rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;"], tokens.borderRadius, tokens.dividerPadding, tokens.dividerFontFamily, tokens.dividerFontStyle, tokens.dividerFontSize, tokens.dividerFontWeight, tokens.dividerLetterSpacing, tokens.dividerLineHeight, tokens.leftContentMargin, tokens.rightContentMargin, tokens.labelOffset, 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),
-      s: /*#__PURE__*/css(["", ":0.625rem;", ":0 0.375rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0 0.375rem 0 0.75rem;", ":0;", ":0 0 0.5rem 0;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":2.5rem;", ":0.625rem;", ":0.6875rem 0.875rem 0.6875rem 0.875rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-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.1875rem 0.25rem -0.1875rem -0.125rem;", ":-0.1875rem -0.125rem -0.1875rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;"], tokens.borderRadius, tokens.dividerPadding, tokens.dividerFontFamily, tokens.dividerFontStyle, tokens.dividerFontSize, tokens.dividerFontWeight, tokens.dividerLetterSpacing, tokens.dividerLineHeight, tokens.leftContentMargin, tokens.rightContentMargin, tokens.labelOffset, 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),
-      xs: /*#__PURE__*/css(["", ":0.5rem;", ":0 0.375rem;", ":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 0.25rem 0 0.5rem;", ":0;", ":0 0 0.375rem 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);", ":2rem;", ":0.5rem;", ":0.5625rem 0.625rem 0.5625rem 0.625rem;", ":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.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.25rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;"], tokens.borderRadius, tokens.dividerPadding, tokens.dividerFontFamily, tokens.dividerFontStyle, tokens.dividerFontSize, tokens.dividerFontWeight, tokens.dividerLetterSpacing, tokens.dividerLineHeight, tokens.leftContentMargin, tokens.rightContentMargin, tokens.labelOffset, 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)
-    },
-    disabled: {
-      "true": /*#__PURE__*/css(["", ":0.4;"], tokens.disabledOpacity)
-    },
-    readOnly: {
-      "true": /*#__PURE__*/css(["", ":var(--surface-transparent-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], tokens.backgroundReadOnly, tokens.labelColorReadOnly, tokens.leftHelperColorReadOnly, tokens.dividerColorReadOnly, tokens.textFieldColorReadOnly, tokens.textFieldBackgroundColorReadOnly, tokens.textFieldPlaceholderColorReadOnly)
-    }
-  }
-};

package/styled-components/es/examples/plasma_b2c/components/Range/Range.js

@@ -1,5 +0,0 @@
-import { component, mergeConfig } from '../../../../engines';
-import { rangeConfig } from '../../../../components/Range';
-import { config } from './Range.config';
-var mergedConfig = /*#__PURE__*/mergeConfig(rangeConfig, config);
-export var Range = /*#__PURE__*/component(mergedConfig);