@salutejs/plasma-new-hope 0.245.1-canary.1668.12889767790.0 → 0.246.0-canary.1709.12889448199.0

package/emotion/cjs/components/Select/Select.template-doc.mdx

@@ -0,0 +1,441 @@
+---
+id: select
+title: Select
+---
+
+import { PropsTable, Description, StorybookLink } from '@site/src/components';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# Select
+
+<Description name="Select" />
+<PropsTable name="Select" />
+
+## Использование
+Обязательным параметром являются: `items`, `value` и `onChange`. Внутри items может быть такой же вложенный массив items. Формат следующий:
+
+```tsx
+type Items = Array<{
+        /**
+         *  Значение у item
+         */
+        value: string;
+        /**
+         * Метка-подпись к item
+         */
+        label: string;
+        /**
+        * Сторона открытия вложенного дропдауна относительно текущего элемента;
+        */
+        placement: SelectPlacement | Array<SelectPlacementBasic>;
+        /**
+         * Список дочерних items.
+         */
+        items?: Array<ItemOption>;
+        /**
+         * Item не активен
+         */
+        disabled?: boolean;
+        /**
+         * Слот для контента слева
+         */
+        contentLeft?: ReactNode;
+        /**
+         * Слот для контента справа
+         */
+        contentRight?: ReactNode;
+        /**
+         * Выбранный item.
+         * @deprecated
+         */
+        isActive?: boolean;
+        /**
+         * Кастомный цвет текста
+         * @deprecated
+         */
+        color?: string;
+        /**
+         * Айтем не активен
+         * @deprecated использовать disabled
+         */
+        isDisabled?: boolean;
+    }>;
+```
+
+Тип выбора селекта - одиночный или множественный зависит от типа `value` и `onChange`. В одиночном value - `string`, в множественном - `Array<string>`.
+Select может выглядеть как Button и как Textfield. За это отвечает пропс - `target`.\
+Есть возможность прокидывать компонент `EmptyState` в пропс `renderList` для изменения содержимого выпадающего окна.\
+Это нужно в случаях, когда произошла ошибка при загрузке `items`, либо когда `items` пустой. Более подробно в примерах.
+
+## Примеры
+
+<Tabs>
+    <TabItem value="textfield" label="Textfield" default>
+        В режиме `textfield` доступны только следующие варианты `view`: `default`, `warning`, `positive` и `negative`.
+
+        ```tsx live
+        import React from 'react';
+        import { Select } from '@salutejs/{{ package }}';
+
+        export function App() {
+            const [singleValue, setSingleValue] = useState('');
+            const [multipleValue, setMultipleValue] = useState([]);
+
+            const items = [
+                {
+                    value: 'north_america',
+                    label: 'Северная Америка',
+                },
+                {
+                    value: 'south_america',
+                    label: 'Южная Америка',
+                    items: [
+                        {
+                            value: 'brazil',
+                            label: 'Бразилия',
+                        },
+                        {
+                            value: 'argentina',
+                            label: 'Аргентина',
+                        },
+                    ],
+                },
+            ];
+
+            return (
+                <div style=\{{ display: 'flex', gap: '30px', height: '300px' }}>
+                    <div style=\{{width: '300px'}}>
+                        <Select items={items} value={singleValue} onChange={setSingleValue} label="Label" placeholder="Placeholder" helperText="Helper text" />
+                    </div>
+
+                    <div style=\{{width: '300px'}}>
+                        <Select multiselect items={items} value={multipleValue} onChange={setMultipleValue} label="Label" placeholder="Placeholder" helperText="Helper text" />
+                    </div>
+                </div>
+            );
+        }
+        ```
+    </TabItem>
+    <TabItem value="button" label="Button">
+        В режиме `button` недоступны следующие пропсы: `contentLeft`, `label`, `labelPlacement`, `placeholder` и `helperText`.
+
+        ```tsx live
+        import React from 'react';
+        import { Select } from '@salutejs/{{ package }}';
+
+        export function App() {
+            const [singleValue, setSingleValue] = useState('');
+            const [multipleValue, setMultipleValue] = useState([]);
+
+            const items = [
+                {
+                    value: 'north_america',
+                    label: 'Северная Америка',
+                },
+                {
+                    value: 'south_america',
+                    label: 'Южная Америка',
+                    items: [
+                        {
+                            value: 'brazil',
+                            label: 'Бразилия',
+                        },
+                        {
+                            value: 'argentina',
+                            label: 'Аргентина',
+                        },
+                    ],
+                },
+            ];
+
+            return (
+                <div style=\{{ display: 'flex', gap: '30px', height: '300px' }}>
+                    <div style=\{{width: '300px'}}>
+                        <Select items={items} label="Single" target="button-like" value={singleValue} onChange={setSingleValue} />
+                    </div>
+
+                    <div style=\{{width: '300px'}}>
+                        <Select multiselect items={items} label="Multiple" target="button-like" value={multipleValue} onChange={setMultipleValue} />
+                    </div>
+                </div>
+            );
+        }
+        ```
+    </TabItem>
+    <TabItem value="predefined" label="Predefined">
+        Есть возможность задать значения по дефолту (главное, чтобы они находились в `items`). Также можно управлять состоянием снаружи селекта.
+
+        ```tsx live
+        import React from 'react';
+        import { Select, Button } from '@salutejs/{{ package }}';
+
+        export function App() {
+            const [multipleValue, setMultipleValue] = useState(['brazil', 'north_america']);
+
+            const items = [
+                {
+                    value: 'north_america',
+                    label: 'Северная Америка',
+                },
+                {
+                    value: 'south_america',
+                    label: 'Южная Америка',
+                    items: [
+                        {
+                            value: 'brazil',
+                            label: 'Бразилия',
+                        },
+                        {
+                            value: 'argentina',
+                            label: 'Аргентина',
+                        },
+                    ],
+                },
+            ];
+
+            return (
+                <div style=\{{ display: 'flex', gap: '30px', height: '300px' }}>
+                    <div style=\{{width: '300px'}}>
+                        <Select multiselect items={items} label="Label" placeholder="Placeholder" value={multipleValue} onChange={setMultipleValue} />
+                    </div>
+
+                    <Button onClick={() => setMultipleValue([])}>Очистить</Button>
+                </div>
+            );
+        }
+        ```
+    </TabItem>
+    <TabItem value="renderValue" label="Render value">
+        Пропс `renderValue` для кастомной настройки `value` внутри таргета. Принимает коллбэк с двумя параметрами: `value` и `label`.
+
+        ```tsx live
+        import React from 'react';
+        import { Select } from '@salutejs/{{ package }}';
+
+        export function App() {
+            const [singleValue, setSingleValue] = useState('');
+
+            const items = [
+                {
+                    value: 'north_america',
+                    label: 'Северная Америка',
+                },
+                {
+                    value: 'south_america',
+                    label: 'Южная Америка',
+                    items: [
+                        {
+                            value: 'brazil',
+                            label: 'Бразилия',
+                        },
+                        {
+                            value: 'argentina',
+                            label: 'Аргентина',
+                        },
+                    ],
+                },
+            ];
+
+            const renderValue = (itemData): string => {
+                if (!Array.isArray(itemData)) {
+                    return `${itemData.value} - ${itemData.label}`;
+                }
+
+                return '';
+            };
+
+            return (
+                <div style=\{{ height: '300px' }}>
+                    <div style=\{{ width: '300px' }}>
+                        <Select
+                            items={items}
+                            label="Label"
+                            placeholder="Placeholder"
+                            value={singleValue}
+                            onChange={setSingleValue}
+                            renderValue={renderValue}
+                        />
+                    </div>
+                </div>
+            );
+        }
+        ```
+    </TabItem>
+    <TabItem value="renderItem" label="Render item">
+        `renderTarget` - для кастомной настройки таргета в Select. Принимает коллбэк с один параметром: `value`.
+        Пропс `renderItem` для кастомной настройки айтема в выпадающем списке. Принимает коллбэк с двумя параметрами: `value` и `label`.
+        В примере использован другой наш компонент - Cell.
+
+        ```tsx live
+        import React from 'react';
+        import { Select, Cell } from '@salutejs/{{ package }}';
+
+        export function App() {
+            const [multipleValue, setMultipleValue] = useState([]);
+
+            const items = [
+                {
+                    value: 'north_america',
+                    label: 'Северная Америка',
+                },
+                {
+                    value: 'south_america',
+                    label: 'Южная Америка',
+                },
+            ];
+
+            const renderTarget = (itemData) => {
+                if (Array.isArray(itemData)) {
+                    if (itemData.length === 0) {
+                        return (
+                            <div style=\{{ padding: '0.5rem 0' }}>
+                                <Cell
+                                    view="default"
+                                    title="Выберите страну"
+                                    subtitle="Subtitle"
+                                    label="Label"
+                                />
+                            </div>
+                        );
+                    }
+
+                    const title = itemData.map((item) => item.label).join(', ');
+
+                    return (
+                        <div style=\{{ padding: '0.5rem 0.75rem' }}>
+                            <Cell view="default" title={title} subtitle="Subtitle" label="Label" />
+                        </div>
+                    );
+                }
+            }
+
+            const renderItem = ({ value, label }) => (
+                <Cell
+                    view="default"
+                    title={label}
+                    label="Top left"
+                    contentRight={<Cell view="default" title="Bottom right" label="Top right" />}
+                />
+            )
+
+            return (
+                <div style=\{{ height: '300px' }}>
+                   <div style=\{{ width: '400px' }}>
+                        <Select
+                            items={items}
+                            value={multipleValue}
+                            onChange={setMultipleValue}
+                            multiselect
+                            renderTarget={renderTarget}
+                            renderItem={renderItem}
+                        />
+                    </div>
+                </div>
+            );
+        }
+        ```
+    </TabItem>
+    <TabItem value="portal" label="Portal">
+        Иногда возникает необходимость вынесения выпадающего списка на уровни выше в DOM. К примеру, когда у родительского блока имеется скролл, и список будет обрезаться, чего хотелось бы избежать.\
+        Для такой реализации имеется пропс `portal`, который принимает либо `ref` либо `id` html-тега.\
+        Также нужно прокинуть проп `listWidth`, чтобы явно задать ширину списку. Если этого не сделать, то будет взята ширина 100% от блока, на который ведет ссылка портала.
+
+        ```tsx live
+        import React, { useRef } from 'react';
+        import { Select } from '@salutejs/{{ package }}';
+
+        export function App() {
+            const [value, setValue] = useState('');
+
+            const items = [
+                {
+                    value: 'north_america',
+                    label: 'Северная Америка',
+                },
+                {
+                    value: 'south_america',
+                    label: 'Южная Америка',
+                    items: [
+                        {
+                            value: 'brazil',
+                            label: 'Бразилия',
+                        },
+                        {
+                            value: 'argentina',
+                            label: 'Аргентина',
+                        },
+                    ],
+                },
+            ];
+
+            const ref = useRef(null)
+
+            return (
+                <div style=\{{ position: "relative", height: "300px" }} ref={ref}>
+                    <div style=\{{width: '300px'}}>
+                        <Select items={items} label="Label" placeholder="Placeholder" value={value} onChange={setValue} portal={ref} listWidth="300px" />
+                    </div>
+                </div>
+            );
+        }
+        ```
+    </TabItem>
+    <TabItem value="uncontrolled" label="Uncontrolled">
+        `value` и `onChange` - опциональные параметры. Если вы хотите `uncontrolled` вариант компонента - их пробрасывать необязательно.
+
+       ```tsx live
+        import React from 'react';
+        import { Select } from '@salutejs/{{ package }}';
+
+        export function App() {
+            const items = [
+                {
+                    value: 'north_america',
+                    label: 'Северная Америка',
+                },
+                {
+                    value: 'south_america',
+                    label: 'Южная Америка',
+                    items: [
+                        {
+                            value: 'brazil',
+                            label: 'Бразилия',
+                        },
+                        {
+                            value: 'argentina',
+                            label: 'Аргентина',
+                        },
+                    ],
+                },
+            ];
+
+            return (
+                <div style=\{{ height: '300px' }}>
+                    <div style=\{{width: '300px'}}>
+                        <Select items={items} label="Label" placeholder="Placeholder" />
+                    </div>
+                </div>
+            );
+        }
+        ```
+    </TabItem>
+</Tabs>
+
+## Клавиатурная навигация
+
+Данный компонент соответствует требования W3C: [Combobox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) и частично [TreeView](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/).
+
+- `Tab` - закрывает дропдаун. Перемещает фокус на следующий элемент на странице;
+- `Enter` - открывает/закрывает дропдаун. Если на элементе - выбирает его. Если у элемента есть дочерний дропдаун - открывает его, выбор элемента не происходит;
+- `Space` - открывает/закрывает дропдаун. Если на элементе - выбирает его и все дочерние элементы.
+- `Home` - открывает дропдаун и перемещает фокус на первый элемент;
+- `End` - открывает дропдаун и перемещает фокус на последний элемент;
+- `PageUp` - перемещает фокус на 10 элементов выше либо в начало списка;
+- `PageDown` - перемещает фокус на 10 элементов ниже либо в конце списка;
+- `ArrowUp` - открывает дропдаун и перемещает фокус на первый элемент. Перемещает фокус на один элемент выше;
+- `ArrowDown` - открывает дропдаун и перемещает фокус на первый элемент. Перемещает фокус на один элемент ниже;
+- `ArrowRight` - если фокус на элементе вложенного списка - открывает его и перемещает фокус на первый элемент; Если фокус на таргете - переходит в режим выбора чипа.
+- `ArrowLeft` - закрывает текущий список и перемещает фокус на предыдущий; Если фокус на таргете - переходит в режим выбора чипа.
+- `Backspace` - только если фокус на чипе - снимает выбор с текущего значения;
+

package/emotion/cjs/components/Select/ui/Inner/Inner.js

@@ -39,7 +39,7 @@ var Inner = exports.Inner = function Inner(_ref) {
   if (!(0, _utils.isEmpty)(item === null || item === void 0 ? void 0 : item.items)) {
     var _item$items;
     return /*#__PURE__*/_react["default"].createElement(_FloatingPopover.FloatingPopover, {
-      placement: "right",
+      placement: (item === null || item === void 0 ? void 0 : item.placement) || 'right',
       opened: isCurrentListOpen,
       onToggle: handleToggle,
       offset: 2,

package/emotion/cjs/examples/plasma_b2c/components/Button/Button.stories.tsx

@@ -1,16 +1,15 @@
 import * as React from 'react';
 import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
-import { disableProps, getConfigVariations } from '@salutejs/plasma-sb-utils';
+import { disableProps } from '@salutejs/plasma-sb-utils';
 
 import { IconMic } from '../../../../components/_Icon';
 import { WithTheme } from '../../../_helpers';
 
 import { Button } from './Button';
-import { config } from './Button.config';
-
-const { views, sizes } = getConfigVariations(config);
 
+const views = ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'];
+const sizes = ['xl', 'l', 'm', 's', 'xs', 'xxs'];
 const stretchingValues = ['auto', 'filled', 'fixed'];
 const pinValues = [
     '',
@@ -80,7 +79,7 @@ const meta: Meta<typeof Button> = {
             },
             table: { defaultValue: { summary: 'bottom' } },
         },
-        ...disableProps(['value', 'focused', 'pin']),
+        ...disableProps(['value']),
     },
 };
 

package/emotion/cjs/examples/plasma_b2c/components/IconButton/IconButton.stories.tsx

@@ -16,7 +16,6 @@ const meta: Meta<typeof IconButton> = {
     component: IconButton,
     argTypes: {
         ...argTypesFromConfig(mergeConfig(iconButtonConfig, config)),
-        ...disableProps(['focused']),
         pin: {
             options: [
                 'square-square',

package/emotion/cjs/examples/plasma_web/components/Button/Button.stories.tsx

@@ -79,7 +79,7 @@ const meta: Meta<typeof Button> = {
             },
             table: { defaultValue: { summary: 'bottom' } },
         },
-        ...disableProps(['value', 'pin', 'focused']),
+        ...disableProps(['value']),
     },
 };
 

package/emotion/cjs/examples/plasma_web/components/IconButton/IconButton.stories.tsx

@@ -16,7 +16,6 @@ const meta: Meta<typeof IconButton> = {
     component: IconButton,
     argTypes: {
         ...argTypesFromConfig(mergeConfig(iconButtonConfig, config)),
-        ...disableProps(['focused']),
         pin: {
             options: [
                 'square-square',

package/emotion/es/components/Attach/ui/IconButton/IconButton.styles.js

@@ -5,10 +5,10 @@ import { tokens as attachTokens } from '../../Attach.tokens';
 var mergedConfig = /*#__PURE__*/mergeConfig(iconButtonConfig);
 var IconButton = /*#__PURE__*/component(mergedConfig);
 export var StyledIconButton = /*#__PURE__*/_styled(IconButton, {
-  target: "etgwvbj1",
+  target: "e2homon1",
   label: "plasma-new-hope__StyledIconButton"
-})(iconButtonTokens.iconButtonColor, ":var(", attachTokens.iconButtonColor, ");", iconButtonTokens.iconButtonBackgroundColor, ":var(", attachTokens.iconButtonBackgroundColor, ");", iconButtonTokens.iconButtonLoadingBackgroundColor, ":var(", attachTokens.iconButtonLoadingBackgroundColor, ");", iconButtonTokens.iconButtonColorHover, ":var(", attachTokens.iconButtonColorHover, ");", iconButtonTokens.iconButtonBackgroundColorHover, ":var(", attachTokens.iconButtonBackgroundColorHover, ");", iconButtonTokens.iconButtonColorActive, ":var(", attachTokens.iconButtonColorActive, ");", iconButtonTokens.iconButtonBackgroundColorActive, ":var(", attachTokens.iconButtonBackgroundColorActive, ");", iconButtonTokens.iconButtonScaleHover, ":var(", attachTokens.iconButtonScaleHover, ");", iconButtonTokens.iconButtonScaleActive, ":var(", attachTokens.iconButtonScaleActive, ");", iconButtonTokens.iconButtonHeight, ":var(", attachTokens.iconButtonHeight, ");", iconButtonTokens.iconButtonWidth, ":var(", attachTokens.iconButtonWidth, ");", iconButtonTokens.iconButtonPadding, ":var(", attachTokens.iconButtonPadding, ");", iconButtonTokens.iconButtonRadius, ":var(", attachTokens.iconButtonRadius, ");", iconButtonTokens.iconButtonRadiusCircle, ":var(", attachTokens.iconButtonRadiusCircle, ");", iconButtonTokens.iconButtonFontFamily, ":var(", attachTokens.iconButtonFontFamily, ");", iconButtonTokens.iconButtonFontSize, ":var(", attachTokens.iconButtonFontSize, ");", iconButtonTokens.iconButtonFontStyle, ":var(", attachTokens.iconButtonFontStyle, ");", iconButtonTokens.iconButtonFontWeight, ":var(", attachTokens.iconButtonFontWeight, ");", iconButtonTokens.iconButtonLetterSpacing, ":var(", attachTokens.iconButtonLetterSpacing, ");", iconButtonTokens.iconButtonLineHeight, ":var(", attachTokens.iconButtonLineHeight, ");", iconButtonTokens.iconButtonDisabledOpacity, ":var(", attachTokens.iconButtonDisabledOpacity, ");", iconButtonTokens.iconButtonFocusColor, ":var(", attachTokens.iconButtonFocusColor, ");", iconButtonTokens.iconButtonSpinnerColor, ":var(", attachTokens.iconButtonSpinnerColor, ");", iconButtonTokens.iconButtonSpinnerSize, ":var(", attachTokens.iconButtonSpinnerSize, ");flex-shrink:0;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvQXR0YWNoL3VpL0ljb25CdXR0b24vSWNvbkJ1dHRvbi5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBU2tEIiwiZmlsZSI6Ii4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvQXR0YWNoL3VpL0ljb25CdXR0b24vSWNvbkJ1dHRvbi5zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmltcG9ydCB7IGNvbXBvbmVudCwgbWVyZ2VDb25maWcgfSBmcm9tICcuLi8uLi8uLi8uLi9lbmdpbmVzJztcbmltcG9ydCB7IGljb25CdXR0b25Db25maWcsIGljb25CdXR0b25Ub2tlbnMgfSBmcm9tICcuLi8uLi8uLi9JY29uQnV0dG9uJztcbmltcG9ydCB7IHRva2VucyBhcyBhdHRhY2hUb2tlbnMgfSBmcm9tICcuLi8uLi9BdHRhY2gudG9rZW5zJztcblxuY29uc3QgbWVyZ2VkQ29uZmlnID0gbWVyZ2VDb25maWcoaWNvbkJ1dHRvbkNvbmZpZyk7XG5jb25zdCBJY29uQnV0dG9uID0gY29tcG9uZW50KG1lcmdlZENvbmZpZyk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJY29uQnV0dG9uID0gc3R5bGVkKEljb25CdXR0b24pYFxuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uQ29sb3J9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkNvbG9yfSk7XG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25CYWNrZ3JvdW5kQ29sb3J9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkJhY2tncm91bmRDb2xvcn0pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uTG9hZGluZ0JhY2tncm91bmRDb2xvcn06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uTG9hZGluZ0JhY2tncm91bmRDb2xvcn0pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uQ29sb3JIb3Zlcn06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uQ29sb3JIb3Zlcn0pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uQmFja2dyb3VuZENvbG9ySG92ZXJ9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkJhY2tncm91bmRDb2xvckhvdmVyfSk7XG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25Db2xvckFjdGl2ZX06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uQ29sb3JBY3RpdmV9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvbkJhY2tncm91bmRDb2xvckFjdGl2ZX06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uQmFja2dyb3VuZENvbG9yQWN0aXZlfSk7XG5cbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvblNjYWxlSG92ZXJ9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvblNjYWxlSG92ZXJ9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvblNjYWxlQWN0aXZlfTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25TY2FsZUFjdGl2ZX0pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uSGVpZ2h0fTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25IZWlnaHR9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvbldpZHRofTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25XaWR0aH0pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uUGFkZGluZ306IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uUGFkZGluZ30pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uUmFkaXVzfTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25SYWRpdXN9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvblJhZGl1c0NpcmNsZX06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uUmFkaXVzQ2lyY2xlfSk7XG5cbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvbkZvbnRGYW1pbHl9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkZvbnRGYW1pbHl9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvbkZvbnRTaXplfTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25Gb250U2l6ZX0pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uRm9udFN0eWxlfTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25Gb250U3R5bGV9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvbkZvbnRXZWlnaHR9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkZvbnRXZWlnaHR9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvbkxldHRlclNwYWNpbmd9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkxldHRlclNwYWNpbmd9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvbkxpbmVIZWlnaHR9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkxpbmVIZWlnaHR9KTtcblxuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uRGlzYWJsZWRPcGFjaXR5fTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25EaXNhYmxlZE9wYWNpdHl9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvbkZvY3VzQ29sb3J9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkZvY3VzQ29sb3J9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvblNwaW5uZXJDb2xvcn06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uU3Bpbm5lckNvbG9yfSk7XG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25TcGlubmVyU2l6ZX06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uU3Bpbm5lclNpemV9KTtcblxuICAgIGZsZXgtc2hyaW5rOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEljb25CdXR0b25DYW5jZWwgPSBzdHlsZWQoSWNvbkJ1dHRvbilgXG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25Db2xvcn06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uQ2FuY2VsQ29sb3J9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvbkJhY2tncm91bmRDb2xvcn06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uQ2FuY2VsQmFja2dyb3VuZENvbG9yfSk7XG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25Mb2FkaW5nQmFja2dyb3VuZENvbG9yfTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25DYW5jZWxMb2FkaW5nQmFja2dyb3VuZENvbG9yfSk7XG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25Db2xvckhvdmVyfTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25DYW5jZWxDb2xvckhvdmVyfSk7XG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25CYWNrZ3JvdW5kQ29sb3JIb3Zlcn06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uQ2FuY2VsQmFja2dyb3VuZENvbG9ySG92ZXJ9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvbkNvbG9yQWN0aXZlfTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25DYW5jZWxDb2xvckFjdGl2ZX0pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uQmFja2dyb3VuZENvbG9yQWN0aXZlfTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25DYW5jZWxCYWNrZ3JvdW5kQ29sb3JBY3RpdmV9KTtcblxuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uU2NhbGVIb3Zlcn06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uQ2FuY2VsU2NhbGVIb3Zlcn0pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uU2NhbGVBY3RpdmV9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkNhbmNlbFNjYWxlQWN0aXZlfSk7XG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25IZWlnaHR9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkNhbmNlbEhlaWdodH0pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uV2lkdGh9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkNhbmNlbFdpZHRofSk7XG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25QYWRkaW5nfTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25DYW5jZWxQYWRkaW5nfSk7XG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25SYWRpdXN9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkNhbmNlbFJhZGl1c30pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uUmFkaXVzQ2lyY2xlfTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25DYW5jZWxSYWRpdXNDaXJjbGV9KTtcblxuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uRm9udEZhbWlseX06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uQ2FuY2VsRm9udEZhbWlseX0pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uRm9udFNpemV9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkNhbmNlbEZvbnRTaXplfSk7XG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25Gb250U3R5bGV9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkNhbmNlbEZvbnRTdHlsZX0pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uRm9udFdlaWdodH06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uQ2FuY2VsRm9udFdlaWdodH0pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uTGV0dGVyU3BhY2luZ306IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uQ2FuY2VsTGV0dGVyU3BhY2luZ30pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uTGluZUhlaWdodH06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uQ2FuY2VsTGluZUhlaWdodH0pO1xuXG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25EaXNhYmxlZE9wYWNpdHl9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkNhbmNlbERpc2FibGVkT3BhY2l0eX0pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uRm9jdXNDb2xvcn06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uQ2FuY2VsRm9jdXNDb2xvcn0pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uU3Bpbm5lckNvbG9yfTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25DYW5jZWxTcGlubmVyQ29sb3J9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvblNwaW5uZXJTaXplfTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25DYW5jZWxTcGlubmVyU2l6ZX0pO1xuYDtcbiJdfQ== */"));
+})(iconButtonTokens.iconButtonColor, ":var(", attachTokens.iconButtonColor, ");", iconButtonTokens.iconButtonBackgroundColor, ":var(", attachTokens.iconButtonBackgroundColor, ");", iconButtonTokens.iconButtonLoadingBackgroundColor, ":var(", attachTokens.iconButtonLoadingBackgroundColor, ");", iconButtonTokens.iconButtonColorHover, ":var(", attachTokens.iconButtonColorHover, ");", iconButtonTokens.iconButtonBackgroundColorHover, ":var(", attachTokens.iconButtonBackgroundColorHover, ");", iconButtonTokens.iconButtonColorActive, ":var(", attachTokens.iconButtonColorActive, ");", iconButtonTokens.iconButtonBackgroundColorActive, ":var(", attachTokens.iconButtonBackgroundColorActive, ");", iconButtonTokens.iconButtonScaleHover, ":var(", attachTokens.iconButtonScaleHover, ");", iconButtonTokens.iconButtonScaleActive, ":var(", attachTokens.iconButtonScaleActive, ");", iconButtonTokens.iconButtonHeight, ":var(", attachTokens.iconButtonHeight, ");", iconButtonTokens.iconButtonWidth, ":var(", attachTokens.iconButtonWidth, ");", iconButtonTokens.iconButtonPadding, ":var(", attachTokens.iconButtonPadding, ");", iconButtonTokens.iconButtonRadius, ":var(", attachTokens.iconButtonRadius, ");", iconButtonTokens.iconButtonRadiusCircle, ":var(", attachTokens.iconButtonRadiusCircle, ");", iconButtonTokens.iconButtonFontFamily, ":var(", attachTokens.iconButtonFontFamily, ");", iconButtonTokens.iconButtonFontSize, ":var(", attachTokens.iconButtonFontSize, ");", iconButtonTokens.iconButtonFontStyle, ":var(", attachTokens.iconButtonFontStyle, ");", iconButtonTokens.iconButtonFontWeight, ":var(", attachTokens.iconButtonFontWeight, ");", iconButtonTokens.iconButtonLetterSpacing, ":var(", attachTokens.iconButtonLetterSpacing, ");", iconButtonTokens.iconButtonLineHeight, ":var(", attachTokens.iconButtonLineHeight, ");", iconButtonTokens.iconButtonDisabledOpacity, ":var(", attachTokens.iconButtonDisabledOpacity, ");", iconButtonTokens.iconButtonFocusColor, ":var(", attachTokens.iconButtonFocusColor, ");", iconButtonTokens.iconButtonSpinnerColor, ":var(", attachTokens.iconButtonSpinnerColor, ");", iconButtonTokens.iconButtonSpinnerSize, ":var(", attachTokens.iconButtonSpinnerSize, ");flex-shrink:0;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvQXR0YWNoL3VpL0ljb25CdXR0b24vSWNvbkJ1dHRvbi5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVNrRCIsImZpbGUiOiIuLi8uLi8uLi8uLi8uLi8uLi9zcmMtZW1vdGlvbi9jb21wb25lbnRzL0F0dGFjaC91aS9JY29uQnV0dG9uL0ljb25CdXR0b24uc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuaW1wb3J0IHsgY29tcG9uZW50LCBtZXJnZUNvbmZpZyB9IGZyb20gJy4uLy4uLy4uLy4uL2VuZ2luZXMnO1xuaW1wb3J0IHsgaWNvbkJ1dHRvbkNvbmZpZywgaWNvbkJ1dHRvblRva2VucyB9IGZyb20gJy4uLy4uLy4uL0ljb25CdXR0b24nO1xuaW1wb3J0IHsgdG9rZW5zIGFzIGF0dGFjaFRva2VucyB9IGZyb20gJy4uLy4uL0F0dGFjaC50b2tlbnMnO1xuXG5jb25zdCBtZXJnZWRDb25maWcgPSBtZXJnZUNvbmZpZyhpY29uQnV0dG9uQ29uZmlnKTtcbmNvbnN0IEljb25CdXR0b24gPSBjb21wb25lbnQobWVyZ2VkQ29uZmlnKTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEljb25CdXR0b24gPSBzdHlsZWQoSWNvbkJ1dHRvbilgXG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25Db2xvcn06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uQ29sb3J9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvbkJhY2tncm91bmRDb2xvcn06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uQmFja2dyb3VuZENvbG9yfSk7XG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25Mb2FkaW5nQmFja2dyb3VuZENvbG9yfTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25Mb2FkaW5nQmFja2dyb3VuZENvbG9yfSk7XG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25Db2xvckhvdmVyfTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25Db2xvckhvdmVyfSk7XG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25CYWNrZ3JvdW5kQ29sb3JIb3Zlcn06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uQmFja2dyb3VuZENvbG9ySG92ZXJ9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvbkNvbG9yQWN0aXZlfTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25Db2xvckFjdGl2ZX0pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uQmFja2dyb3VuZENvbG9yQWN0aXZlfTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25CYWNrZ3JvdW5kQ29sb3JBY3RpdmV9KTtcblxuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uU2NhbGVIb3Zlcn06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uU2NhbGVIb3Zlcn0pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uU2NhbGVBY3RpdmV9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvblNjYWxlQWN0aXZlfSk7XG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25IZWlnaHR9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkhlaWdodH0pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uV2lkdGh9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbldpZHRofSk7XG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25QYWRkaW5nfTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25QYWRkaW5nfSk7XG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25SYWRpdXN9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvblJhZGl1c30pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uUmFkaXVzQ2lyY2xlfTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25SYWRpdXNDaXJjbGV9KTtcblxuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uRm9udEZhbWlseX06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uRm9udEZhbWlseX0pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uRm9udFNpemV9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkZvbnRTaXplfSk7XG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25Gb250U3R5bGV9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkZvbnRTdHlsZX0pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uRm9udFdlaWdodH06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uRm9udFdlaWdodH0pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uTGV0dGVyU3BhY2luZ306IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uTGV0dGVyU3BhY2luZ30pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uTGluZUhlaWdodH06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uTGluZUhlaWdodH0pO1xuXG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25EaXNhYmxlZE9wYWNpdHl9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkRpc2FibGVkT3BhY2l0eX0pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uRm9jdXNDb2xvcn06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uRm9jdXNDb2xvcn0pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uU3Bpbm5lckNvbG9yfTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25TcGlubmVyQ29sb3J9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvblNwaW5uZXJTaXplfTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25TcGlubmVyU2l6ZX0pO1xuXG4gICAgZmxleC1zaHJpbms6IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkSWNvbkJ1dHRvbkNhbmNlbCA9IHN0eWxlZChJY29uQnV0dG9uKWBcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvbkNvbG9yfTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25DYW5jZWxDb2xvcn0pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uQmFja2dyb3VuZENvbG9yfTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25DYW5jZWxCYWNrZ3JvdW5kQ29sb3J9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvbkxvYWRpbmdCYWNrZ3JvdW5kQ29sb3J9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkNhbmNlbExvYWRpbmdCYWNrZ3JvdW5kQ29sb3J9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvbkNvbG9ySG92ZXJ9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkNhbmNlbENvbG9ySG92ZXJ9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvbkJhY2tncm91bmRDb2xvckhvdmVyfTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25DYW5jZWxCYWNrZ3JvdW5kQ29sb3JIb3Zlcn0pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uQ29sb3JBY3RpdmV9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkNhbmNlbENvbG9yQWN0aXZlfSk7XG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25CYWNrZ3JvdW5kQ29sb3JBY3RpdmV9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkNhbmNlbEJhY2tncm91bmRDb2xvckFjdGl2ZX0pO1xuXG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25TY2FsZUhvdmVyfTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25DYW5jZWxTY2FsZUhvdmVyfSk7XG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25TY2FsZUFjdGl2ZX06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uQ2FuY2VsU2NhbGVBY3RpdmV9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvbkhlaWdodH06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uQ2FuY2VsSGVpZ2h0fSk7XG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25XaWR0aH06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uQ2FuY2VsV2lkdGh9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvblBhZGRpbmd9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkNhbmNlbFBhZGRpbmd9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvblJhZGl1c306IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uQ2FuY2VsUmFkaXVzfSk7XG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25SYWRpdXNDaXJjbGV9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkNhbmNlbFJhZGl1c0NpcmNsZX0pO1xuXG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25Gb250RmFtaWx5fTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25DYW5jZWxGb250RmFtaWx5fSk7XG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25Gb250U2l6ZX06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uQ2FuY2VsRm9udFNpemV9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvbkZvbnRTdHlsZX06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uQ2FuY2VsRm9udFN0eWxlfSk7XG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25Gb250V2VpZ2h0fTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25DYW5jZWxGb250V2VpZ2h0fSk7XG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25MZXR0ZXJTcGFjaW5nfTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25DYW5jZWxMZXR0ZXJTcGFjaW5nfSk7XG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25MaW5lSGVpZ2h0fTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25DYW5jZWxMaW5lSGVpZ2h0fSk7XG5cbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvbkRpc2FibGVkT3BhY2l0eX06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uQ2FuY2VsRGlzYWJsZWRPcGFjaXR5fSk7XG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25Gb2N1c0NvbG9yfTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25DYW5jZWxGb2N1c0NvbG9yfSk7XG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25TcGlubmVyQ29sb3J9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkNhbmNlbFNwaW5uZXJDb2xvcn0pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uU3Bpbm5lclNpemV9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkNhbmNlbFNwaW5uZXJTaXplfSk7XG5gO1xuIl19 */"));
 export var StyledIconButtonCancel = /*#__PURE__*/_styled(IconButton, {
-  target: "etgwvbj0",
+  target: "e2homon0",
   label: "plasma-new-hope__StyledIconButtonCancel"
-})(iconButtonTokens.iconButtonColor, ":var(", attachTokens.iconButtonCancelColor, ");", iconButtonTokens.iconButtonBackgroundColor, ":var(", attachTokens.iconButtonCancelBackgroundColor, ");", iconButtonTokens.iconButtonLoadingBackgroundColor, ":var(", attachTokens.iconButtonCancelLoadingBackgroundColor, ");", iconButtonTokens.iconButtonColorHover, ":var(", attachTokens.iconButtonCancelColorHover, ");", iconButtonTokens.iconButtonBackgroundColorHover, ":var(", attachTokens.iconButtonCancelBackgroundColorHover, ");", iconButtonTokens.iconButtonColorActive, ":var(", attachTokens.iconButtonCancelColorActive, ");", iconButtonTokens.iconButtonBackgroundColorActive, ":var(", attachTokens.iconButtonCancelBackgroundColorActive, ");", iconButtonTokens.iconButtonScaleHover, ":var(", attachTokens.iconButtonCancelScaleHover, ");", iconButtonTokens.iconButtonScaleActive, ":var(", attachTokens.iconButtonCancelScaleActive, ");", iconButtonTokens.iconButtonHeight, ":var(", attachTokens.iconButtonCancelHeight, ");", iconButtonTokens.iconButtonWidth, ":var(", attachTokens.iconButtonCancelWidth, ");", iconButtonTokens.iconButtonPadding, ":var(", attachTokens.iconButtonCancelPadding, ");", iconButtonTokens.iconButtonRadius, ":var(", attachTokens.iconButtonCancelRadius, ");", iconButtonTokens.iconButtonRadiusCircle, ":var(", attachTokens.iconButtonCancelRadiusCircle, ");", iconButtonTokens.iconButtonFontFamily, ":var(", attachTokens.iconButtonCancelFontFamily, ");", iconButtonTokens.iconButtonFontSize, ":var(", attachTokens.iconButtonCancelFontSize, ");", iconButtonTokens.iconButtonFontStyle, ":var(", attachTokens.iconButtonCancelFontStyle, ");", iconButtonTokens.iconButtonFontWeight, ":var(", attachTokens.iconButtonCancelFontWeight, ");", iconButtonTokens.iconButtonLetterSpacing, ":var(", attachTokens.iconButtonCancelLetterSpacing, ");", iconButtonTokens.iconButtonLineHeight, ":var(", attachTokens.iconButtonCancelLineHeight, ");", iconButtonTokens.iconButtonDisabledOpacity, ":var(", attachTokens.iconButtonCancelDisabledOpacity, ");", iconButtonTokens.iconButtonFocusColor, ":var(", attachTokens.iconButtonCancelFocusColor, ");", iconButtonTokens.iconButtonSpinnerColor, ":var(", attachTokens.iconButtonCancelSpinnerColor, ");", iconButtonTokens.iconButtonSpinnerSize, ":var(", attachTokens.iconButtonCancelSpinnerSize, ");" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvQXR0YWNoL3VpL0ljb25CdXR0b24vSWNvbkJ1dHRvbi5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBeUN3RCIsImZpbGUiOiIuLi8uLi8uLi8uLi8uLi8uLi9zcmMtZW1vdGlvbi9jb21wb25lbnRzL0F0dGFjaC91aS9JY29uQnV0dG9uL0ljb25CdXR0b24uc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG5pbXBvcnQgeyBjb21wb25lbnQsIG1lcmdlQ29uZmlnIH0gZnJvbSAnLi4vLi4vLi4vLi4vZW5naW5lcyc7XG5pbXBvcnQgeyBpY29uQnV0dG9uQ29uZmlnLCBpY29uQnV0dG9uVG9rZW5zIH0gZnJvbSAnLi4vLi4vLi4vSWNvbkJ1dHRvbic7XG5pbXBvcnQgeyB0b2tlbnMgYXMgYXR0YWNoVG9rZW5zIH0gZnJvbSAnLi4vLi4vQXR0YWNoLnRva2Vucyc7XG5cbmNvbnN0IG1lcmdlZENvbmZpZyA9IG1lcmdlQ29uZmlnKGljb25CdXR0b25Db25maWcpO1xuY29uc3QgSWNvbkJ1dHRvbiA9IGNvbXBvbmVudChtZXJnZWRDb25maWcpO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkSWNvbkJ1dHRvbiA9IHN0eWxlZChJY29uQnV0dG9uKWBcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvbkNvbG9yfTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25Db2xvcn0pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uQmFja2dyb3VuZENvbG9yfTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25CYWNrZ3JvdW5kQ29sb3J9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvbkxvYWRpbmdCYWNrZ3JvdW5kQ29sb3J9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkxvYWRpbmdCYWNrZ3JvdW5kQ29sb3J9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvbkNvbG9ySG92ZXJ9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkNvbG9ySG92ZXJ9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvbkJhY2tncm91bmRDb2xvckhvdmVyfTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25CYWNrZ3JvdW5kQ29sb3JIb3Zlcn0pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uQ29sb3JBY3RpdmV9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkNvbG9yQWN0aXZlfSk7XG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25CYWNrZ3JvdW5kQ29sb3JBY3RpdmV9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkJhY2tncm91bmRDb2xvckFjdGl2ZX0pO1xuXG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25TY2FsZUhvdmVyfTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25TY2FsZUhvdmVyfSk7XG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25TY2FsZUFjdGl2ZX06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uU2NhbGVBY3RpdmV9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvbkhlaWdodH06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uSGVpZ2h0fSk7XG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25XaWR0aH06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uV2lkdGh9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvblBhZGRpbmd9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvblBhZGRpbmd9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvblJhZGl1c306IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uUmFkaXVzfSk7XG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25SYWRpdXNDaXJjbGV9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvblJhZGl1c0NpcmNsZX0pO1xuXG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25Gb250RmFtaWx5fTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25Gb250RmFtaWx5fSk7XG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25Gb250U2l6ZX06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uRm9udFNpemV9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvbkZvbnRTdHlsZX06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uRm9udFN0eWxlfSk7XG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25Gb250V2VpZ2h0fTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25Gb250V2VpZ2h0fSk7XG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25MZXR0ZXJTcGFjaW5nfTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25MZXR0ZXJTcGFjaW5nfSk7XG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25MaW5lSGVpZ2h0fTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25MaW5lSGVpZ2h0fSk7XG5cbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvbkRpc2FibGVkT3BhY2l0eX06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uRGlzYWJsZWRPcGFjaXR5fSk7XG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25Gb2N1c0NvbG9yfTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25Gb2N1c0NvbG9yfSk7XG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25TcGlubmVyQ29sb3J9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvblNwaW5uZXJDb2xvcn0pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uU3Bpbm5lclNpemV9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvblNwaW5uZXJTaXplfSk7XG5cbiAgICBmbGV4LXNocmluazogMDtcbmA7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJY29uQnV0dG9uQ2FuY2VsID0gc3R5bGVkKEljb25CdXR0b24pYFxuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uQ29sb3J9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkNhbmNlbENvbG9yfSk7XG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25CYWNrZ3JvdW5kQ29sb3J9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkNhbmNlbEJhY2tncm91bmRDb2xvcn0pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uTG9hZGluZ0JhY2tncm91bmRDb2xvcn06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uQ2FuY2VsTG9hZGluZ0JhY2tncm91bmRDb2xvcn0pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uQ29sb3JIb3Zlcn06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uQ2FuY2VsQ29sb3JIb3Zlcn0pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uQmFja2dyb3VuZENvbG9ySG92ZXJ9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkNhbmNlbEJhY2tncm91bmRDb2xvckhvdmVyfSk7XG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25Db2xvckFjdGl2ZX06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uQ2FuY2VsQ29sb3JBY3RpdmV9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvbkJhY2tncm91bmRDb2xvckFjdGl2ZX06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uQ2FuY2VsQmFja2dyb3VuZENvbG9yQWN0aXZlfSk7XG5cbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvblNjYWxlSG92ZXJ9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkNhbmNlbFNjYWxlSG92ZXJ9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvblNjYWxlQWN0aXZlfTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25DYW5jZWxTY2FsZUFjdGl2ZX0pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uSGVpZ2h0fTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25DYW5jZWxIZWlnaHR9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvbldpZHRofTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25DYW5jZWxXaWR0aH0pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uUGFkZGluZ306IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uQ2FuY2VsUGFkZGluZ30pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uUmFkaXVzfTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25DYW5jZWxSYWRpdXN9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvblJhZGl1c0NpcmNsZX06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uQ2FuY2VsUmFkaXVzQ2lyY2xlfSk7XG5cbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvbkZvbnRGYW1pbHl9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkNhbmNlbEZvbnRGYW1pbHl9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvbkZvbnRTaXplfTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25DYW5jZWxGb250U2l6ZX0pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uRm9udFN0eWxlfTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25DYW5jZWxGb250U3R5bGV9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvbkZvbnRXZWlnaHR9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkNhbmNlbEZvbnRXZWlnaHR9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvbkxldHRlclNwYWNpbmd9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkNhbmNlbExldHRlclNwYWNpbmd9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvbkxpbmVIZWlnaHR9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkNhbmNlbExpbmVIZWlnaHR9KTtcblxuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uRGlzYWJsZWRPcGFjaXR5fTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25DYW5jZWxEaXNhYmxlZE9wYWNpdHl9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvbkZvY3VzQ29sb3J9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkNhbmNlbEZvY3VzQ29sb3J9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvblNwaW5uZXJDb2xvcn06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uQ2FuY2VsU3Bpbm5lckNvbG9yfSk7XG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25TcGlubmVyU2l6ZX06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uQ2FuY2VsU3Bpbm5lclNpemV9KTtcbmA7XG4iXX0= */"));
+})(iconButtonTokens.iconButtonColor, ":var(", attachTokens.iconButtonCancelColor, ");", iconButtonTokens.iconButtonBackgroundColor, ":var(", attachTokens.iconButtonCancelBackgroundColor, ");", iconButtonTokens.iconButtonLoadingBackgroundColor, ":var(", attachTokens.iconButtonCancelLoadingBackgroundColor, ");", iconButtonTokens.iconButtonColorHover, ":var(", attachTokens.iconButtonCancelColorHover, ");", iconButtonTokens.iconButtonBackgroundColorHover, ":var(", attachTokens.iconButtonCancelBackgroundColorHover, ");", iconButtonTokens.iconButtonColorActive, ":var(", attachTokens.iconButtonCancelColorActive, ");", iconButtonTokens.iconButtonBackgroundColorActive, ":var(", attachTokens.iconButtonCancelBackgroundColorActive, ");", iconButtonTokens.iconButtonScaleHover, ":var(", attachTokens.iconButtonCancelScaleHover, ");", iconButtonTokens.iconButtonScaleActive, ":var(", attachTokens.iconButtonCancelScaleActive, ");", iconButtonTokens.iconButtonHeight, ":var(", attachTokens.iconButtonCancelHeight, ");", iconButtonTokens.iconButtonWidth, ":var(", attachTokens.iconButtonCancelWidth, ");", iconButtonTokens.iconButtonPadding, ":var(", attachTokens.iconButtonCancelPadding, ");", iconButtonTokens.iconButtonRadius, ":var(", attachTokens.iconButtonCancelRadius, ");", iconButtonTokens.iconButtonRadiusCircle, ":var(", attachTokens.iconButtonCancelRadiusCircle, ");", iconButtonTokens.iconButtonFontFamily, ":var(", attachTokens.iconButtonCancelFontFamily, ");", iconButtonTokens.iconButtonFontSize, ":var(", attachTokens.iconButtonCancelFontSize, ");", iconButtonTokens.iconButtonFontStyle, ":var(", attachTokens.iconButtonCancelFontStyle, ");", iconButtonTokens.iconButtonFontWeight, ":var(", attachTokens.iconButtonCancelFontWeight, ");", iconButtonTokens.iconButtonLetterSpacing, ":var(", attachTokens.iconButtonCancelLetterSpacing, ");", iconButtonTokens.iconButtonLineHeight, ":var(", attachTokens.iconButtonCancelLineHeight, ");", iconButtonTokens.iconButtonDisabledOpacity, ":var(", attachTokens.iconButtonCancelDisabledOpacity, ");", iconButtonTokens.iconButtonFocusColor, ":var(", attachTokens.iconButtonCancelFocusColor, ");", iconButtonTokens.iconButtonSpinnerColor, ":var(", attachTokens.iconButtonCancelSpinnerColor, ");", iconButtonTokens.iconButtonSpinnerSize, ":var(", attachTokens.iconButtonCancelSpinnerSize, ");" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvQXR0YWNoL3VpL0ljb25CdXR0b24vSWNvbkJ1dHRvbi5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlDd0QiLCJmaWxlIjoiLi4vLi4vLi4vLi4vLi4vLi4vc3JjLWVtb3Rpb24vY29tcG9uZW50cy9BdHRhY2gvdWkvSWNvbkJ1dHRvbi9JY29uQnV0dG9uLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmltcG9ydCB7IGNvbXBvbmVudCwgbWVyZ2VDb25maWcgfSBmcm9tICcuLi8uLi8uLi8uLi9lbmdpbmVzJztcbmltcG9ydCB7IGljb25CdXR0b25Db25maWcsIGljb25CdXR0b25Ub2tlbnMgfSBmcm9tICcuLi8uLi8uLi9JY29uQnV0dG9uJztcbmltcG9ydCB7IHRva2VucyBhcyBhdHRhY2hUb2tlbnMgfSBmcm9tICcuLi8uLi9BdHRhY2gudG9rZW5zJztcblxuY29uc3QgbWVyZ2VkQ29uZmlnID0gbWVyZ2VDb25maWcoaWNvbkJ1dHRvbkNvbmZpZyk7XG5jb25zdCBJY29uQnV0dG9uID0gY29tcG9uZW50KG1lcmdlZENvbmZpZyk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJY29uQnV0dG9uID0gc3R5bGVkKEljb25CdXR0b24pYFxuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uQ29sb3J9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkNvbG9yfSk7XG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25CYWNrZ3JvdW5kQ29sb3J9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkJhY2tncm91bmRDb2xvcn0pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uTG9hZGluZ0JhY2tncm91bmRDb2xvcn06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uTG9hZGluZ0JhY2tncm91bmRDb2xvcn0pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uQ29sb3JIb3Zlcn06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uQ29sb3JIb3Zlcn0pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uQmFja2dyb3VuZENvbG9ySG92ZXJ9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkJhY2tncm91bmRDb2xvckhvdmVyfSk7XG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25Db2xvckFjdGl2ZX06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uQ29sb3JBY3RpdmV9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvbkJhY2tncm91bmRDb2xvckFjdGl2ZX06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uQmFja2dyb3VuZENvbG9yQWN0aXZlfSk7XG5cbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvblNjYWxlSG92ZXJ9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvblNjYWxlSG92ZXJ9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvblNjYWxlQWN0aXZlfTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25TY2FsZUFjdGl2ZX0pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uSGVpZ2h0fTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25IZWlnaHR9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvbldpZHRofTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25XaWR0aH0pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uUGFkZGluZ306IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uUGFkZGluZ30pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uUmFkaXVzfTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25SYWRpdXN9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvblJhZGl1c0NpcmNsZX06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uUmFkaXVzQ2lyY2xlfSk7XG5cbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvbkZvbnRGYW1pbHl9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkZvbnRGYW1pbHl9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvbkZvbnRTaXplfTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25Gb250U2l6ZX0pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uRm9udFN0eWxlfTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25Gb250U3R5bGV9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvbkZvbnRXZWlnaHR9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkZvbnRXZWlnaHR9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvbkxldHRlclNwYWNpbmd9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkxldHRlclNwYWNpbmd9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvbkxpbmVIZWlnaHR9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkxpbmVIZWlnaHR9KTtcblxuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uRGlzYWJsZWRPcGFjaXR5fTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25EaXNhYmxlZE9wYWNpdHl9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvbkZvY3VzQ29sb3J9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkZvY3VzQ29sb3J9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvblNwaW5uZXJDb2xvcn06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uU3Bpbm5lckNvbG9yfSk7XG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25TcGlubmVyU2l6ZX06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uU3Bpbm5lclNpemV9KTtcblxuICAgIGZsZXgtc2hyaW5rOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEljb25CdXR0b25DYW5jZWwgPSBzdHlsZWQoSWNvbkJ1dHRvbilgXG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25Db2xvcn06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uQ2FuY2VsQ29sb3J9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvbkJhY2tncm91bmRDb2xvcn06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uQ2FuY2VsQmFja2dyb3VuZENvbG9yfSk7XG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25Mb2FkaW5nQmFja2dyb3VuZENvbG9yfTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25DYW5jZWxMb2FkaW5nQmFja2dyb3VuZENvbG9yfSk7XG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25Db2xvckhvdmVyfTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25DYW5jZWxDb2xvckhvdmVyfSk7XG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25CYWNrZ3JvdW5kQ29sb3JIb3Zlcn06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uQ2FuY2VsQmFja2dyb3VuZENvbG9ySG92ZXJ9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvbkNvbG9yQWN0aXZlfTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25DYW5jZWxDb2xvckFjdGl2ZX0pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uQmFja2dyb3VuZENvbG9yQWN0aXZlfTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25DYW5jZWxCYWNrZ3JvdW5kQ29sb3JBY3RpdmV9KTtcblxuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uU2NhbGVIb3Zlcn06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uQ2FuY2VsU2NhbGVIb3Zlcn0pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uU2NhbGVBY3RpdmV9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkNhbmNlbFNjYWxlQWN0aXZlfSk7XG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25IZWlnaHR9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkNhbmNlbEhlaWdodH0pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uV2lkdGh9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkNhbmNlbFdpZHRofSk7XG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25QYWRkaW5nfTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25DYW5jZWxQYWRkaW5nfSk7XG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25SYWRpdXN9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkNhbmNlbFJhZGl1c30pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uUmFkaXVzQ2lyY2xlfTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25DYW5jZWxSYWRpdXNDaXJjbGV9KTtcblxuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uRm9udEZhbWlseX06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uQ2FuY2VsRm9udEZhbWlseX0pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uRm9udFNpemV9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkNhbmNlbEZvbnRTaXplfSk7XG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25Gb250U3R5bGV9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkNhbmNlbEZvbnRTdHlsZX0pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uRm9udFdlaWdodH06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uQ2FuY2VsRm9udFdlaWdodH0pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uTGV0dGVyU3BhY2luZ306IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uQ2FuY2VsTGV0dGVyU3BhY2luZ30pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uTGluZUhlaWdodH06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uQ2FuY2VsTGluZUhlaWdodH0pO1xuXG4gICAgJHtpY29uQnV0dG9uVG9rZW5zLmljb25CdXR0b25EaXNhYmxlZE9wYWNpdHl9OiB2YXIoJHthdHRhY2hUb2tlbnMuaWNvbkJ1dHRvbkNhbmNlbERpc2FibGVkT3BhY2l0eX0pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uRm9jdXNDb2xvcn06IHZhcigke2F0dGFjaFRva2Vucy5pY29uQnV0dG9uQ2FuY2VsRm9jdXNDb2xvcn0pO1xuICAgICR7aWNvbkJ1dHRvblRva2Vucy5pY29uQnV0dG9uU3Bpbm5lckNvbG9yfTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25DYW5jZWxTcGlubmVyQ29sb3J9KTtcbiAgICAke2ljb25CdXR0b25Ub2tlbnMuaWNvbkJ1dHRvblNwaW5uZXJTaXplfTogdmFyKCR7YXR0YWNoVG9rZW5zLmljb25CdXR0b25DYW5jZWxTcGlubmVyU2l6ZX0pO1xuYDtcbiJdfQ== */"));

package/emotion/es/components/Button/Button.js

@@ -46,8 +46,6 @@ export var buttonRoot = function buttonRoot(Root) {
       stretching = _props$stretching === void 0 ? 'auto' : _props$stretching,
       rest = _objectWithoutProperties(props, _excluded);
     var txt = typeof children === 'string' ? children : text;
-    var hasRightContentMargin = Boolean(txt || value || contentRight);
-    var hasLeftContentMargin = Boolean(contentLeft ? contentLeft && (txt || value) : txt || value);
     var stretchingClass = stretch ? classes.filledStretching : classes["".concat(stretching, "Stretching")];
     var contentRelaxedClass = contentPlacing === 'relaxed' ? classes.contentRelaxed : undefined;
     var squareClass = square ? classes.buttonSquare : undefined;
@@ -75,13 +73,9 @@ export var buttonRoot = function buttonRoot(Root) {
     }, rest), /*#__PURE__*/React.createElement(LoadWrap, {
       contentPlacing: contentPlacementValue,
       isLoading: isLoading
-    }, contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, {
-      hasContentMargin: hasRightContentMargin
-    }, contentLeft), txt ? /*#__PURE__*/React.createElement(ButtonText, {
+    }, contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), txt ? /*#__PURE__*/React.createElement(ButtonText, {
       className: contentRelaxedClass
-    }, txt) : children, value && /*#__PURE__*/React.createElement(ButtonValue, null, value), contentRight && /*#__PURE__*/React.createElement(StyledContentRight, {
-      hasContentMargin: hasLeftContentMargin
-    }, contentRight)), isLoading && /*#__PURE__*/React.createElement(Loader, null, loader || _StyledSpinner || (_StyledSpinner = /*#__PURE__*/React.createElement(StyledSpinner, null))));
+    }, txt) : children, value && /*#__PURE__*/React.createElement(ButtonValue, null, value), contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight)), isLoading && /*#__PURE__*/React.createElement(Loader, null, loader || _StyledSpinner || (_StyledSpinner = /*#__PURE__*/React.createElement(StyledSpinner, null))));
   });
 };
 export var buttonConfig = {