@salutejs/plasma-new-hope 0.77.1-canary.1201.8930079977.0 → 0.78.0-canary.1176.8921778834.0

package/styled-components/cjs/examples/sds_engineer/components/Dropdown/Dropdown.stories.tsx

@@ -0,0 +1,277 @@
+import React, { useRef, useState } from 'react';
+import type { ComponentProps } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import styled from 'styled-components';
+import { css } from 'styled-components';
+import { action } from '@storybook/addon-actions';
+
+import { WithTheme, argTypesFromConfig } from '../../../_helpers';
+import { mergeConfig } from '../../../../engines';
+import { dropdownConfig } from '../../../../components/Dropdown';
+import { Checkbox } from '../Checkbox/Checkbox';
+import { Radiobox } from '../Radiobox/Radiobox';
+import { Button } from '../Button/Button';
+
+import { Dropdown, DropdownDivider, DropdownFooter, DropdownGroup, DropdownHeader, DropdownItem } from './Dropdown';
+import { config } from './Dropdown.config';
+
+type StoryDropdownPropsCustom = {
+    skidding?: number;
+    distance?: number;
+};
+
+type StoryDropdownProps = ComponentProps<typeof Dropdown> & StoryDropdownPropsCustom;
+
+const placements: Array<string> = ['top', 'bottom', 'right', 'left', 'auto'];
+const triggers: Array<string> = ['click', 'hover'];
+
+const meta: Meta<StoryDropdownProps> = {
+    title: 'sds_engineer/Dropdown',
+    decorators: [WithTheme],
+    component: Dropdown,
+    argTypes: {
+        placement: {
+            options: placements,
+            control: {
+                type: 'select',
+            },
+        },
+        trigger: {
+            options: triggers,
+            control: {
+                type: 'select',
+            },
+        },
+        ...argTypesFromConfig(mergeConfig(dropdownConfig, config)),
+    },
+    args: {
+        placement: 'bottom',
+        trigger: 'click',
+        closeOnOverlayClick: true,
+        closeOnEsc: true,
+        isFocusTrapped: true,
+        skidding: 0,
+        distance: 6,
+    },
+};
+
+export default meta;
+
+const StyledCheckbox = styled(Checkbox)`
+    margin-left: 0rem;
+    margin-bottom: 0rem;
+`;
+
+const StyledRadiobox = styled(Radiobox)`
+    margin-left: 0rem;
+    margin-bottom: 0rem;
+`;
+
+const headerClass = css`
+    text-transform: uppercase;
+    color: rgba(23, 23, 23, 0.56);
+`;
+
+const TrashIcon = (props) => (
+    <svg width="100%" viewBox="0 0 24 24" fill="none" {...props}>
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M8 5.5A2.5 2.5 0 0110.5 3h3A2.5 2.5 0 0116 5.5V6h-2v-.5a.5.5 0 00-.5-.5h-3a.5.5 0 00-.5.5V6H8v-.5zM4 8a1 1 0 011-1h14a1 1 0 110 2h-1v9.5a2.5 2.5 0 01-2.5 2.5h-7A2.5 2.5 0 016 18.5V9H5a1 1 0 01-1-1z"
+            fill="currentColor"
+        />
+    </svg>
+);
+
+const StyledTrashIcon = styled(TrashIcon)`
+    width: 1.25rem;
+    height: 1.25rem;
+`;
+
+const onChange = action('onChange');
+const onSelect = action('onSelect');
+const onClick = action('onClick');
+
+const dropdownItems = [...Array(4).keys()].map((num) => ({
+    value: `item_${num}`,
+    child: `Item ${num}`,
+}));
+
+const StoryDefault = (args: StoryDropdownProps) => {
+    const [selected, setSelected] = useState('');
+    const [isOpen, setIsOpen] = useState(false);
+    const [isOpenDropdown2, setIsOpenDropdown2] = useState(false);
+
+    const onMainClose = () => {
+        setIsOpen(false);
+        setIsOpenDropdown2(false);
+    };
+
+    const onMainToggle = (openValue: boolean) => {
+        setIsOpen(openValue);
+
+        if (!openValue) {
+            onMainClose();
+        }
+    };
+
+    const handleSelect = (value: string, text: string) => {
+        setSelected(value);
+        onSelect(value, text);
+    };
+
+    return (
+        <div>
+            <h3>This is header</h3>
+            <Dropdown target={<Button>Target</Button>} isOpen={isOpen} onToggle={onMainToggle} {...args}>
+                <DropdownHeader className={headerClass}>Header</DropdownHeader>
+                <DropdownDivider />
+                {dropdownItems.map((item) => (
+                    <DropdownItem
+                        key={item.value}
+                        isSelected={item.value === selected}
+                        onSelect={() => handleSelect(item.value, item.child)}
+                        onClick={onClick}
+                        value={item.value}
+                    >
+                        {item.child}
+                    </DropdownItem>
+                ))}
+                <Dropdown
+                    target={<DropdownItem>Nested dropdown ➞</DropdownItem>}
+                    onToggle={(is) => setIsOpenDropdown2(is)}
+                    isOpen={isOpenDropdown2}
+                    offset={[0, 0]}
+                >
+                    <DropdownGroup label="This is radiogroup">
+                        <DropdownItem
+                            contentLeft={StyledRadiobox}
+                            name="test"
+                            value="1"
+                            onChange={onChange}
+                            text="Nested 1"
+                        />
+
+                        <DropdownItem
+                            contentLeft={StyledRadiobox}
+                            name="test"
+                            value="2"
+                            onChange={onChange}
+                            text="Nested 2"
+                        />
+                        <DropdownItem
+                            contentLeft={StyledRadiobox}
+                            name="test"
+                            value="3"
+                            onChange={onChange}
+                            text="Nested 3"
+                        />
+                    </DropdownGroup>
+                    <DropdownItem contentLeft={StyledCheckbox} text="Nested 4" />
+                    <DropdownItem contentRight={StyledCheckbox} text="Nested 5" />
+
+                    <DropdownItem contentLeft={StyledTrashIcon} text="Nested 6" />
+                    <Button onClick={() => setIsOpenDropdown2(false)}>Close nested</Button>
+                </Dropdown>
+
+                <DropdownItem onClick={onClick} value="disabled" disabled>
+                    disabled
+                </DropdownItem>
+
+                <DropdownGroup label="Group">
+                    <DropdownItem
+                        contentLeft={StyledRadiobox}
+                        name="test"
+                        value="1"
+                        disabled
+                        onChange={onChange}
+                        text="Disabled 1"
+                    />
+
+                    <DropdownItem name="test" value="2" disabled text="Disabled group 2" />
+                </DropdownGroup>
+
+                <DropdownDivider />
+                <DropdownFooter className={headerClass}>Footer</DropdownFooter>
+            </Dropdown>
+        </div>
+    );
+};
+
+export const Default: StoryObj<StoryDropdownProps> = {
+    render: (args) => <StoryDefault {...args} />,
+};
+
+const StoryContextMenu = (args: StoryDropdownProps) => {
+    const [contextPosition, setContextPosition] = useState([0, 0]);
+    const dropdownRef = useRef<HTMLDivElement | null>(null);
+    const [selected, setSelected] = useState('');
+    const [isOpen, setIsOpen] = useState(false);
+
+    const onMainToggle = (openValue: boolean) => {
+        setIsOpen(openValue);
+    };
+
+    const handleSelect = (value: string, text: string) => {
+        setSelected(value);
+        onSelect(value, text);
+        setIsOpen(false);
+    };
+
+    const onClickAway = (event: React.MouseEvent<HTMLDivElement>) => {
+        event.preventDefault();
+        if (dropdownRef?.current && !dropdownRef.current?.contains(event.target as Element)) {
+            setIsOpen(false);
+        }
+    };
+
+    const onContextMenu = (event: React.MouseEvent<HTMLDivElement>) => {
+        event.preventDefault();
+
+        const { clientX, clientY } = event;
+
+        setContextPosition([clientX, clientY]);
+        setIsOpen(true);
+    };
+
+    return (
+        <div
+            style={{
+                width: '100%',
+                height: '100%',
+                background: 'gainsboro',
+            }}
+            onClick={onClickAway}
+            onContextMenu={onContextMenu}
+        >
+            <div>Right-click the mouse button - to open</div>
+            <div>Left-click the mouse button - to close</div>
+            <div
+                ref={dropdownRef}
+                style={{ position: 'absolute', top: `${contextPosition[1]}px`, left: `${contextPosition[0]}px` }}
+            >
+                <Dropdown isOpen={isOpen} onToggle={onMainToggle} {...args}>
+                    <DropdownHeader className={headerClass}>Header</DropdownHeader>
+                    <DropdownDivider />
+                    {dropdownItems.map((item) => (
+                        <DropdownItem
+                            key={item.value}
+                            isSelected={item.value === selected}
+                            onSelect={() => handleSelect(item.value, item.child)}
+                            onClick={onClick}
+                            value={item.value}
+                        >
+                            {item.child}
+                        </DropdownItem>
+                    ))}
+                    <DropdownDivider />
+                    <DropdownFooter className={headerClass}>Footer</DropdownFooter>
+                </Dropdown>
+            </div>
+        </div>
+    );
+};
+
+export const ContextMenu: StoryObj<StoryDropdownProps> = {
+    render: (args) => <StoryContextMenu {...args} />,
+};

package/styled-components/cjs/examples/sds_engineer/components/Radiobox/Radiobox.config.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.config = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
+var _Radiobox = /*#__PURE__*/require("../../../../components/Radiobox");
 var config = exports.config = {
   defaults: {
     view: 'accent',
@@ -15,27 +16,27 @@ var config = exports.config = {
      * Размер контрола.
      */
     size: {
-      s: /*#__PURE__*/(0, _styledComponents.css)(["--plasma-radiobox-margin:0 0 0.188rem 0.188rem;--plasma-radiobox-trigger-margin:0.188rem 0;--plasma-radiobox-trigger-size:1rem;--plasma-radiobox-trigger-border-radius 1.125rem;--plasma-radiobox-ellipse-size 0.5rem;--plasma-radiobox-content-top-offset:0.1rem;--plasma-radiobox-content-left-offset 0.5rem;--plasma-radiobox-label-font-family:var(--plasma-typo-body-s-font-family);--plasma-radiobox-label-font-size:var(--plasma-typo-body-s-font-size);--plasma-radiobox-label-font-style:var(--plasma-typo-body-s-font-style);--plasma-radiobox-label-font-weight:var(--plasma-typo-body-s-font-weight);--plasma-radiobox-label-letter-spacing:var(--plasma-typo-body-s-letter-spacing);--plasma-radiobox-label-line-height:var(--plasma-typo-body-s-line-height);--plasma-radiobox-description-font-family:var(--plasma-typo-body-xs-font-family);--plasma-radiobox-description-font-size:var(--plasma-typo-body-xs-font-size);--plasma-radiobox-description-font-style:var(--plasma-typo-body-xs-font-style);--plasma-radiobox-description-font-weight:var(--plasma-typo-body-xs-font-weight);--plasma-radiobox-description-letter-spacing:var(--plasma-typo-body-xs-letter-spacing);--plasma-radiobox-description-line-height:var(--plasma-typo-body-xs-line-height);"]),
-      m: /*#__PURE__*/(0, _styledComponents.css)(["--plasma-radiobox-margin:0 0 0.188rem 0.188rem;--plasma-radiobox-trigger-margin:0.188rem 0;--plasma-radiobox-trigger-size:1.375rem;--plasma-radiobox-trigger-border-radius 1.125rem;--plasma-radiobox-ellipse-size 0.625rem;--plasma-radiobox-content-top-offset:0.25rem;--plasma-radiobox-content-left-offset 0.6875rem;--plasma-radiobox-label-font-family:var(--plasma-typo-body-m-font-family);--plasma-radiobox-label-font-size:var(--plasma-typo-body-m-font-size);--plasma-radiobox-label-font-style:var(--plasma-typo-body-m-font-style);--plasma-radiobox-label-font-weight:var(--plasma-typo-body-m-font-weight);--plasma-radiobox-label-letter-spacing:var(--plasma-typo-body-m-letter-spacing);--plasma-radiobox-label-line-height:var(--plasma-typo-body-m-line-height);--plasma-radiobox-description-font-family:var(--plasma-typo-body-s-font-family);--plasma-radiobox-description-font-size:var(--plasma-typo-body-s-font-size);--plasma-radiobox-description-font-style:var(--plasma-typo-body-s-font-style);--plasma-radiobox-description-font-weight:var(--plasma-typo-body-s-font-weight);--plasma-radiobox-description-letter-spacing:var(--plasma-typo-body-s-letter-spacing);--plasma-radiobox-description-line-height:var(--plasma-typo-body-s-line-height);"])
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0;", ":0.188rem 0;", ":1rem;", ":1.125rem;", ":0.5rem;", ":0.1rem;", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], _Radiobox.radioboxTokens.margin, _Radiobox.radioboxTokens.triggerMargin, _Radiobox.radioboxTokens.triggerSize, _Radiobox.radioboxTokens.triggerBorderRadius, _Radiobox.radioboxTokens.ellipseSize, _Radiobox.radioboxTokens.contentTopOffset, _Radiobox.radioboxTokens.contentLeftOffset, _Radiobox.radioboxTokens.labelFontFamily, _Radiobox.radioboxTokens.labelFontSize, _Radiobox.radioboxTokens.labelFontStyle, _Radiobox.radioboxTokens.labelFontWeight, _Radiobox.radioboxTokens.labelLetterSpacing, _Radiobox.radioboxTokens.labelLineHeight, _Radiobox.radioboxTokens.descriptionFontFamily, _Radiobox.radioboxTokens.descriptionFontSize, _Radiobox.radioboxTokens.descriptionFontStyle, _Radiobox.radioboxTokens.descriptionFontWeight, _Radiobox.radioboxTokens.descriptionLetterSpacing, _Radiobox.radioboxTokens.descriptionLineHeight),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0;", ":0.188rem 0;", ":1.375rem;", ":1.125rem;", ":0.625rem;", ":0.25rem;", ":0.625rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], _Radiobox.radioboxTokens.margin, _Radiobox.radioboxTokens.triggerMargin, _Radiobox.radioboxTokens.triggerSize, _Radiobox.radioboxTokens.triggerBorderRadius, _Radiobox.radioboxTokens.ellipseSize, _Radiobox.radioboxTokens.contentTopOffset, _Radiobox.radioboxTokens.contentLeftOffset, _Radiobox.radioboxTokens.labelFontFamily, _Radiobox.radioboxTokens.labelFontSize, _Radiobox.radioboxTokens.labelFontStyle, _Radiobox.radioboxTokens.labelFontWeight, _Radiobox.radioboxTokens.labelLetterSpacing, _Radiobox.radioboxTokens.labelLineHeight, _Radiobox.radioboxTokens.descriptionFontFamily, _Radiobox.radioboxTokens.descriptionFontSize, _Radiobox.radioboxTokens.descriptionFontStyle, _Radiobox.radioboxTokens.descriptionFontWeight, _Radiobox.radioboxTokens.descriptionLetterSpacing, _Radiobox.radioboxTokens.descriptionLineHeight)
     },
     /**
      * Вид контрола.
      */
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["--plasma-radiobox-fill-color:var(--text-primary);--plasma-radiobox-ellipse-color:var(--inverse-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),
-      secondary: /*#__PURE__*/(0, _styledComponents.css)(["--plasma-radiobox-fill-color:var(--text-secondary);--plasma-radiobox-ellipse-color:var(--inverse-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),
-      tertiary: /*#__PURE__*/(0, _styledComponents.css)(["--plasma-radiobox-fill-color:var(--text-tertiary);--plasma-radiobox-ellipse-color:var(--inverse-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),
-      paragraph: /*#__PURE__*/(0, _styledComponents.css)(["--plasma-radiobox-fill-color:var(--text-paragraph);--plasma-radiobox-ellipse-color:var(--inverse-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),
-      accent: /*#__PURE__*/(0, _styledComponents.css)(["--plasma-radiobox-fill-color:var(--text-accent);--plasma-radiobox-ellipse-color:var(--on-dark-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),
-      positive: /*#__PURE__*/(0, _styledComponents.css)(["--plasma-radiobox-fill-color:var(--text-positive);--plasma-radiobox-ellipse-color:var(--on-dark-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),
-      warning: /*#__PURE__*/(0, _styledComponents.css)(["--plasma-radiobox-fill-color:var(--text-warning);--plasma-radiobox-ellipse-color:var(--on-dark-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),
-      negative: /*#__PURE__*/(0, _styledComponents.css)(["--plasma-radiobox-fill-color:var(--text-negative);--plasma-radiobox-ellipse-color:var(--on-dark-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"])
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], _Radiobox.radioboxTokens.fillColor, _Radiobox.radioboxTokens.ellipseColor, _Radiobox.radioboxTokens.descriptionColor, _Radiobox.radioboxTokens.triggerBorderColor),
+      secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], _Radiobox.radioboxTokens.fillColor, _Radiobox.radioboxTokens.ellipseColor, _Radiobox.radioboxTokens.descriptionColor, _Radiobox.radioboxTokens.triggerBorderColor),
+      tertiary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-tertiary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], _Radiobox.radioboxTokens.fillColor, _Radiobox.radioboxTokens.ellipseColor, _Radiobox.radioboxTokens.descriptionColor, _Radiobox.radioboxTokens.triggerBorderColor),
+      paragraph: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-paragraph);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], _Radiobox.radioboxTokens.fillColor, _Radiobox.radioboxTokens.ellipseColor, _Radiobox.radioboxTokens.descriptionColor, _Radiobox.radioboxTokens.triggerBorderColor),
+      accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], _Radiobox.radioboxTokens.fillColor, _Radiobox.radioboxTokens.ellipseColor, _Radiobox.radioboxTokens.descriptionColor, _Radiobox.radioboxTokens.triggerBorderColor),
+      positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-positive);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], _Radiobox.radioboxTokens.fillColor, _Radiobox.radioboxTokens.ellipseColor, _Radiobox.radioboxTokens.descriptionColor, _Radiobox.radioboxTokens.triggerBorderColor),
+      warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-warning);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], _Radiobox.radioboxTokens.fillColor, _Radiobox.radioboxTokens.ellipseColor, _Radiobox.radioboxTokens.descriptionColor, _Radiobox.radioboxTokens.triggerBorderColor),
+      negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-negative);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], _Radiobox.radioboxTokens.fillColor, _Radiobox.radioboxTokens.ellipseColor, _Radiobox.radioboxTokens.descriptionColor, _Radiobox.radioboxTokens.triggerBorderColor)
     },
     disabled: {
-      "true": /*#__PURE__*/(0, _styledComponents.css)(["--plasma-radiobox-disabled-opacity:0.4;"])
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Radiobox.radioboxTokens.disabledOpacity)
     },
     focused: {
-      "true": /*#__PURE__*/(0, _styledComponents.css)(["--plasma-radiobox-focus-color:var(--text-accent);"])
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-accent);"], _Radiobox.radioboxTokens.focusColor)
     }
   }
 };

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

@@ -1,39 +1,17 @@
+var _Indeterminate, _Done;
 var _excluded = ["size", "view", "focused", "disabled", "id", "label", "description", "indeterminate", "style", "className", "singleLine", "aria-label"];
-var _templateObject, _Indeterminate, _Done;
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
-import { css } from 'styled-components';
-import styled from 'styled-components';
 import { safeUseId, useForkRef, extractTextFrom } from '@salutejs/plasma-core';
-import { applyNoUserSelect, applyEllipsis } from '../../mixins';
-import { cx } from '../../utils';
-import { base as viewCSS } from './_view/base';
-import { base as sizeCSS } from './_size/base';
-import { base as disabledCSS } from './_disabled/base';
-import { base as focusedCSS } from './_focused/base';
+import { base as viewCSS } from './variations/_view/base';
+import { base as sizeCSS } from './variations/_size/base';
+import { base as disabledCSS } from './variations/_disabled/base';
+import { base as focusedCSS } from './variations/_focused/base';
 import { Done, Indeterminate } from './IconsSvg';
-export var StyledInput = /*#__PURE__*/styled.input.withConfig({
-  componentId: "plasma-new-hope__sc-1lv7grl-0"
-})(["position:absolute;&:focus{outline:0 none;}width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);"]);
-export var StyledTrigger = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-1lv7grl-1"
-})(["margin:var(--plasma-checkbox-trigger-margin);width:var(--plasma-checkbox-trigger-size);height:var(--plasma-checkbox-trigger-size);border-radius:var(--plasma-checkbox-trigger-border-radius);position:relative;display:flex;align-items:center;justify-content:center;background:transparent;border:0.125rem solid var(--plasma-checkbox-trigger-border-color);box-sizing:border-box;flex-shrink:0;flex-grow:0;input:not(:indeterminate) + label & div{transform:scale(0);transition:transform 0.15s ease-in-out;}input:checked + label & div{transform:scale(1);}"]);
-export var StyledContentWrapper = /*#__PURE__*/styled.label.withConfig({
-  componentId: "plasma-new-hope__sc-1lv7grl-2"
-})(["position:relative;align-items:flex-start;display:flex;width:100%;cursor:inherit;"]);
-export var StyledContent = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-1lv7grl-3"
-})(["display:flex;flex-direction:column;margin-top:var(--plasma-checkbox-content-top-offset);margin-left:var(--plasma-checkbox-content-left-offset);"]);
-export var StyledLabel = /*#__PURE__*/styled.span.withConfig({
-  componentId: "plasma-new-hope__sc-1lv7grl-4"
-})(["font-family:var(--plasma-checkbox-label-font-family);font-size:var(--plasma-checkbox-label-font-size);font-style:var(--plasma-checkbox-label-font-style);font-weight:var(--plasma-checkbox-label-font-weight);letter-spacing:var(--plasma-checkbox-label-letter-spacing);line-height:var(--plasma-checkbox-label-line-height);"]);
-export var StyledDescription = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-1lv7grl-5"
-})(["margin-top:0.25rem;color:var(--plasma-checkbox-description-color);font-family:var(--plasma-checkbox-description-font-family);font-size:var(--plasma-checkbox-description-font-size);font-style:var(--plasma-checkbox-description-font-style);font-weight:var(--plasma-checkbox-description-font-weight);letter-spacing:var(--plasma-checkbox-description-letter-spacing);line-height:var(--plasma-checkbox-description-line-height);"]);
-var base = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n    .single-line {\n        ", ";\n    }\n\n    margin: var(--plasma-checkbox-margin);\n\n    &.reset-margins {\n        margin: 0;\n    }\n\n    ", ";\n\n    position: relative;\n    align-items: flex-start;\n    display: flex;\n    cursor: pointer;\n"])), /*#__PURE__*/applyEllipsis(), /*#__PURE__*/applyNoUserSelect());
+import { StyledContent, StyledContentWrapper, StyledDescription, StyledInput, StyledLabel, StyledTrigger, base } from './Checkbox.styles';
+import { classes } from './Checkbox.tokens';
 export var checkboxRoot = function checkboxRoot(Root) {
   return /*#__PURE__*/forwardRef(function (props, ref) {
     var size = props.size,
@@ -67,15 +45,14 @@ export var checkboxRoot = function checkboxRoot(Root) {
     var isLabelAriaHidden = typeof label === 'string';
     var canFocused = focused ? 0 : -1;
     var hasContent = label || description;
-    var singleLineClass = singleLine ? 'single-line' : undefined;
-    var resetMargins = !hasContent ? 'reset-margins' : undefined;
+    var singleLineClass = singleLine ? classes.singleLine : undefined;
     return /*#__PURE__*/React.createElement(Root, {
       view: view,
       size: size,
       disabled: disabled,
       focused: focused,
       style: style,
-      className: cx(className, resetMargins),
+      className: className,
       tabIndex: -1
     }, /*#__PURE__*/React.createElement(StyledInput, _extends({}, rest, {
       id: checkboxId,
@@ -88,7 +65,7 @@ export var checkboxRoot = function checkboxRoot(Root) {
     })), /*#__PURE__*/React.createElement(StyledContentWrapper, {
       htmlFor: checkboxId
     }, /*#__PURE__*/React.createElement(StyledTrigger, {
-      className: cx('checkbox-trigger', resetMargins)
+      className: classes.checkboxTrigger
     }, indeterminate ? _Indeterminate || (_Indeterminate = /*#__PURE__*/React.createElement(Indeterminate, null)) : _Done || (_Done = /*#__PURE__*/React.createElement(Done, null))), hasContent && /*#__PURE__*/React.createElement(StyledContent, {
       className: singleLineClass
     }, label && /*#__PURE__*/React.createElement(StyledLabel, {

package/styled-components/es/components/Checkbox/Checkbox.styles.js

@@ -0,0 +1,25 @@
+var _templateObject;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import { css } from 'styled-components';
+import styled from 'styled-components';
+import { applyEllipsis, applyNoUserSelect } from '../../mixins';
+import { classes, tokens } from './Checkbox.tokens';
+export var base = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n    margin: var(", ");\n\n    ", ";\n\n    position: relative;\n    align-items: flex-start;\n    display: flex;\n    cursor: pointer;\n\n    .", " {\n        ", ";\n    }\n"])), tokens.margin, /*#__PURE__*/applyNoUserSelect(), classes.singleLine, /*#__PURE__*/applyEllipsis());
+export var StyledInput = /*#__PURE__*/styled.input.withConfig({
+  componentId: "plasma-new-hope__sc-tydhc1-0"
+})(["position:absolute;&:focus{outline:0 none;}width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);"]);
+export var StyledTrigger = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-tydhc1-1"
+})(["margin:var(", ");width:var(", ");height:var(", ");border-radius:var(", ");position:relative;display:flex;align-items:center;justify-content:center;background:transparent;border:0.125rem solid var(", ");box-sizing:border-box;flex-shrink:0;flex-grow:0;input:not(:indeterminate) + label & div{transform:scale(0);transition:transform 0.15s ease-in-out;}input:checked + label & div{transform:scale(1);}"], tokens.triggerMargin, tokens.triggerSize, tokens.triggerSize, tokens.triggerBorderRadius, tokens.triggerBorderColor);
+export var StyledContentWrapper = /*#__PURE__*/styled.label.withConfig({
+  componentId: "plasma-new-hope__sc-tydhc1-2"
+})(["position:relative;align-items:flex-start;display:flex;width:100%;cursor:inherit;"]);
+export var StyledContent = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-tydhc1-3"
+})(["display:flex;flex-direction:column;margin-top:var(", ");margin-left:var(", ");"], tokens.contentTopOffset, tokens.contentLeftOffset);
+export var StyledLabel = /*#__PURE__*/styled.span.withConfig({
+  componentId: "plasma-new-hope__sc-tydhc1-4"
+})(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight);
+export var StyledDescription = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-tydhc1-5"
+})(["margin-top:0.25rem;color:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], tokens.descriptionColor, tokens.descriptionFontFamily, tokens.descriptionFontSize, tokens.descriptionFontStyle, tokens.descriptionFontWeight, tokens.descriptionLetterSpacing, tokens.descriptionLineHeight);

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

@@ -0,0 +1,30 @@
+export var classes = {
+  singleLine: 'single-line',
+  checkboxTrigger: 'checkbox-trigger'
+};
+export var tokens = {
+  margin: '--plasma-checkbox-margin',
+  triggerMargin: '--plasma-checkbox-trigger-margin',
+  triggerSize: '--plasma-checkbox-trigger-size',
+  triggerBorderRadius: '--plasma-checkbox-trigger-border-radius',
+  contentTopOffset: '--plasma-checkbox-content-top-offset',
+  contentLeftOffset: '--plasma-checkbox-content-left-offset',
+  labelFontFamily: '--plasma-checkbox-label-font-family',
+  labelFontSize: '--plasma-checkbox-label-font-size',
+  labelFontStyle: '--plasma-checkbox-label-font-style',
+  labelFontWeight: '--plasma-checkbox-label-font-weight',
+  labelLetterSpacing: '--plasma-checkbox-label-letter-spacing',
+  labelLineHeight: '--plasma-checkbox-label-line-height',
+  descriptionFontFamily: '--plasma-checkbox-description-font-family',
+  descriptionFontSize: '--plasma-checkbox-description-font-size',
+  descriptionFontStyle: '--plasma-checkbox-description-font-style',
+  descriptionFontWeight: '--plasma-checkbox-description-font-weight',
+  descriptionLetterSpacing: '--plasma-checkbox-description-letter-spacing',
+  descriptionLineHeight: '--plasma-checkbox-description-line-height',
+  fillColor: '--plasma-checkbox-fill-color',
+  iconColor: '--plasma-checkbox-icon-color',
+  descriptionColor: '--plasma-checkbox-description-color',
+  triggerBorderColor: '--plasma-checkbox-trigger-border-color',
+  focusColor: '--plasma-checkbox-focus-color',
+  disabledOpacity: '--plasma-checkbox-disabled-opacity'
+};

package/styled-components/es/components/Checkbox/IconsSvg.js

@@ -1,5 +1,5 @@
-var _path, _path2;
 import React from 'react';
+import { tokens } from './Checkbox.tokens';
 export var Done = function Done() {
   return /*#__PURE__*/React.createElement("div", {
     style: {
@@ -10,12 +10,12 @@ export var Done = function Done() {
     viewBox: "0 0 18 18",
     fill: "none",
     style: {
-      width: 'var(--plasma-checkbox-trigger-size)'
+      width: "var(".concat(tokens.triggerSize, ")")
     }
-  }, _path || (_path = /*#__PURE__*/React.createElement("path", {
-    fill: "var(--plasma-checkbox-icon-color)",
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "var(".concat(tokens.iconColor, ")"),
     d: "m5.70711,8.15582c-0.39053,-0.39052 -1.02369,-0.39052 -1.41422,0c-0.39052,0.39053 -0.39052,1.02369 0,1.41422l3.70666,3.70666l6.71095,-6.70248c0.3908,-0.39027 0.3912,-1.02344 0.0009,-1.41421c-0.3903,-0.39077 -1.02344,-0.39117 -1.41421,-0.00089l-5.29674,5.29004l-2.29334,-2.29334z"
-  }))));
+  })));
 };
 export var Indeterminate = function Indeterminate() {
   return /*#__PURE__*/React.createElement("div", {
@@ -27,12 +27,12 @@ export var Indeterminate = function Indeterminate() {
     viewBox: "0 0 18 18",
     fill: "none",
     style: {
-      width: 'var(--plasma-checkbox-trigger-size)'
+      width: "var(".concat(tokens.triggerSize, ")")
     }
-  }, _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
+  }, /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeWidth: "2",
-    stroke: "var(--plasma-checkbox-icon-color)",
+    stroke: "var(".concat(tokens.iconColor, ")"),
     d: "m5.09449,9.0315l8,0"
-  }))));
+  })));
 };

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

@@ -1 +1,2 @@
-export { checkboxRoot, checkboxConfig } from './Checkbox';
+export { checkboxRoot, checkboxConfig } from './Checkbox';
+export { tokens as checkboxTokens } from './Checkbox.tokens';

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

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

package/styled-components/es/components/Checkbox/variations/_focused/base.js

@@ -0,0 +1,27 @@
+import { css } from 'styled-components';
+import { addFocus } from '../../../../mixins';
+import { classes, tokens } from '../../Checkbox.tokens';
+
+/**
+ * INFO: на 36 строке нет возможности использвать .${classes.checkboxTrigger},
+ * потому что линтер правит селектор и он применяется некорректно
+ */
+
+export var base = /*#__PURE__*/css([".", "{", "}input[data-focus-visible-added] + label .", "{border-color:transparent;", "}input[data-focus-visible-added]:checked + label .checkbox-trigger,input[type='checkbox'][data-focus-visible-added]:indeterminate + label .", "{", "}"], classes.checkboxTrigger, /*#__PURE__*/addFocus({
+  outlineOffset: '0',
+  outlineSize: '0.125rem',
+  outlineRadius: /*#__PURE__*/"var(".concat(tokens.triggerBorderRadius, ")"),
+  outlineColor: 'transparent'
+}), classes.checkboxTrigger, /*#__PURE__*/addFocus({
+  outlineOffset: '-0.188rem',
+  outlineSize: '0.125rem',
+  outlineRadius: /*#__PURE__*/"var(".concat(tokens.triggerBorderRadius, ")"),
+  outlineColor: /*#__PURE__*/"var(".concat(tokens.focusColor, ")"),
+  customFocusRules: /*#__PURE__*/"\n                &::before {\n                    box-shadow: 0 0 0 0.125rem var(".concat(tokens.focusColor, ");\n                }\n            ")
+}), classes.checkboxTrigger, /*#__PURE__*/addFocus({
+  outlineOffset: '-0.125rem',
+  outlineSize: '0.063rem',
+  outlineRadius: /*#__PURE__*/"calc(var(".concat(tokens.triggerBorderRadius, ") + 0.125rem)"),
+  outlineColor: /*#__PURE__*/"var(".concat(tokens.focusColor, ")"),
+  customFocusRules: /*#__PURE__*/"\n                &::before {\n                    box-shadow: 0 0 0 0.063rem var(".concat(tokens.focusColor, ");\n                }\n            ")
+}));

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

@@ -0,0 +1,4 @@
+import { css } from 'styled-components';
+import { StyledContentWrapper, StyledTrigger } from '../../Checkbox.styles';
+import { tokens } from '../../Checkbox.tokens';
+export var base = /*#__PURE__*/css(["input[type='checkbox']:indeterminate + ", " ", "{border:none;background:var(", ");border-color:var(", ");}input:checked + ", " ", "{border:none;background:var(", ");border-color:var(", ");}"], StyledContentWrapper, StyledTrigger, tokens.fillColor, tokens.fillColor, StyledContentWrapper, StyledTrigger, tokens.fillColor, tokens.fillColor);

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

@@ -0,0 +1 @@
+["--plasma-checkbox-fill-color"]