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

package/styled-components/es/examples/sds_engineer/components/Checkbox/Checkbox.config.js

@@ -1,35 +1,35 @@
 import { css } from 'styled-components';
+import { checkboxTokens } from '../../../../components/Checkbox';
 export var config = {
   defaults: {
-    view: 'accent',
-    focused: 'true'
+    view: 'accent'
   },
   variations: {
     /**
      * Размер контрола.
      */
     size: {
-      s: /*#__PURE__*/css(["--plasma-checkbox-margin:0 0 0.188rem 0.188rem;--plasma-checkbox-trigger-margin:0.188rem 0;--plasma-checkbox-trigger-size:0.875rem;--plasma-checkbox-trigger-border-radius:0.25rem;--plasma-checkbox-content-top-offset:0.0625rem;--plasma-checkbox-content-left-offset:0.5625rem;--plasma-checkbox-label-font-family:var(--plasma-typo-body-s-font-family);--plasma-checkbox-label-font-size:var(--plasma-typo-body-s-font-size);--plasma-checkbox-label-font-style:var(--plasma-typo-body-s-font-style);--plasma-checkbox-label-font-weight:var(--plasma-typo-body-s-font-weight);--plasma-checkbox-label-letter-spacing:var(--plasma-typo-body-s-letter-spacing);--plasma-checkbox-label-line-height:var(--plasma-typo-body-s-line-height);--plasma-checkbox-description-font-family:var(--plasma-typo-body-xs-font-family);--plasma-checkbox-description-font-size:var(--plasma-typo-body-xs-font-size);--plasma-checkbox-description-font-style:var(--plasma-typo-body-xs-font-style);--plasma-checkbox-description-font-weight:var(--plasma-typo-body-xs-font-weight);--plasma-checkbox-description-letter-spacing:var(--plasma-typo-body-xs-letter-spacing);--plasma-checkbox-description-line-height:var(--plasma-typo-body-xs-line-height);"]),
-      m: /*#__PURE__*/css(["--plasma-checkbox-margin:0 0 0.188rem 0.188rem;--plasma-checkbox-trigger-margin:0.188rem 0;--plasma-checkbox-trigger-size:1.25rem;--plasma-checkbox-trigger-border-radius:0.375rem;--plasma-checkbox-content-top-offset:0.1875rem;--plasma-checkbox-content-left-offset:0.75rem;--plasma-checkbox-label-font-family:var(--plasma-typo-body-m-font-family);--plasma-checkbox-label-font-size:var(--plasma-typo-body-m-font-size);--plasma-checkbox-label-font-style:var(--plasma-typo-body-m-font-style);--plasma-checkbox-label-font-weight:var(--plasma-typo-body-m-font-weight);--plasma-checkbox-label-letter-spacing:var(--plasma-typo-body-m-letter-spacing);--plasma-checkbox-label-line-height:var(--plasma-typo-body-m-line-height);--plasma-checkbox-description-font-family:var(--plasma-typo-body-s-font-family);--plasma-checkbox-description-font-size:var(--plasma-typo-body-s-font-size);--plasma-checkbox-description-font-style:var(--plasma-typo-body-s-font-style);--plasma-checkbox-description-font-weight:var(--plasma-typo-body-s-font-weight);--plasma-checkbox-description-letter-spacing:var(--plasma-typo-body-s-letter-spacing);--plasma-checkbox-description-line-height:var(--plasma-typo-body-s-line-height);"])
+      s: /*#__PURE__*/css(["", ":0;", ":0.188rem 0;", ":0.875rem;", ":0.25rem;", ":0.0625rem;", ":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);"], checkboxTokens.margin, checkboxTokens.triggerMargin, checkboxTokens.triggerSize, checkboxTokens.triggerBorderRadius, checkboxTokens.contentTopOffset, checkboxTokens.contentLeftOffset, checkboxTokens.labelFontFamily, checkboxTokens.labelFontSize, checkboxTokens.labelFontStyle, checkboxTokens.labelFontWeight, checkboxTokens.labelLetterSpacing, checkboxTokens.labelLineHeight, checkboxTokens.descriptionFontFamily, checkboxTokens.descriptionFontSize, checkboxTokens.descriptionFontStyle, checkboxTokens.descriptionFontWeight, checkboxTokens.descriptionLetterSpacing, checkboxTokens.descriptionLineHeight),
+      m: /*#__PURE__*/css(["", ":0;", ":0.188rem 0;", ":1.25rem;", ":0.375rem;", ":0.1875rem;", ":0.75rem;", ":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);"], checkboxTokens.margin, checkboxTokens.triggerMargin, checkboxTokens.triggerSize, checkboxTokens.triggerBorderRadius, checkboxTokens.contentTopOffset, checkboxTokens.contentLeftOffset, checkboxTokens.labelFontFamily, checkboxTokens.labelFontSize, checkboxTokens.labelFontStyle, checkboxTokens.labelFontWeight, checkboxTokens.labelLetterSpacing, checkboxTokens.labelLineHeight, checkboxTokens.descriptionFontFamily, checkboxTokens.descriptionFontSize, checkboxTokens.descriptionFontStyle, checkboxTokens.descriptionFontWeight, checkboxTokens.descriptionLetterSpacing, checkboxTokens.descriptionLineHeight)
     },
     /**
      * Вид контрола.
      */
     view: {
-      "default": /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-primary);--plasma-checkbox-icon-color:var(--inverse-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
-      secondary: /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-secondary);--plasma-checkbox-icon-color:var(--inverse-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
-      tertiary: /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-tertiary);--plasma-checkbox-icon-color:var(--inverse-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
-      paragraph: /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-paragraph);--plasma-checkbox-icon-color:var(--inverse-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
-      accent: /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-accent);--plasma-checkbox-icon-color:var(--on-dark-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
-      positive: /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-positive);--plasma-checkbox-icon-color:var(--on-dark-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
-      warning: /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-warning);--plasma-checkbox-icon-color:var(--on-dark-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
-      negative: /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-negative);--plasma-checkbox-icon-color:var(--on-dark-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"])
+      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBorderColor),
+      secondary: /*#__PURE__*/css(["", ":var(--text-secondary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBorderColor),
+      tertiary: /*#__PURE__*/css(["", ":var(--text-tertiary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBorderColor),
+      paragraph: /*#__PURE__*/css(["", ":var(--text-paragraph);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBorderColor),
+      accent: /*#__PURE__*/css(["", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBorderColor),
+      positive: /*#__PURE__*/css(["", ":var(--text-positive);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBorderColor),
+      warning: /*#__PURE__*/css(["", ":var(--text-warning);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBorderColor),
+      negative: /*#__PURE__*/css(["", ":var(--text-negative);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBorderColor)
     },
     disabled: {
-      "true": /*#__PURE__*/css(["--plasma-checkbox-disabled-opacity:0.4;"])
+      "true": /*#__PURE__*/css(["", ":0.4;"], checkboxTokens.disabledOpacity)
     },
     focused: {
-      "true": /*#__PURE__*/css(["--plasma-checkbox-focus-color:var(--text-accent);"])
+      "true": /*#__PURE__*/css(["", ":var(--text-accent);"], checkboxTokens.focusColor)
     }
   }
 };

package/styled-components/es/examples/sds_engineer/components/Dropdown/Dropdown.config.js

@@ -0,0 +1,16 @@
+import { css } from 'styled-components';
+import { dropdownTokens } from '../../../../components/Dropdown';
+export var config = {
+  defaults: {
+    view: 'primary',
+    size: 'm'
+  },
+  variations: {
+    size: {
+      m: /*#__PURE__*/css(["", ":15rem;", ":auto;", ":0;", ":0.5rem;", ":0;", ":0.5rem;", ":0;", ":auto;", ":1.25rem;", ":0.5rem;", ":0.75rem;", ":0.25rem;", ":0.75rem;", ":0;", ":0;", ":0;", ":0;", ":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);", ":auto;", ":auto;", ":0.3125rem;", ":0.75rem;", ":0.4375rem;", ":0.75rem;", ":0;", ":0;", ":0;", ":0;", ":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);", ":auto;", ":0.063rem;", ":0;", ":0;", ":0;", ":0;", ":auto;", ":0;", ":0;", ":0;", ":0;", ":0;", ":0;", ":0.25rem;", ":0;", ":0.25rem;", ":0.75rem;", ":0.5rem;", ":0.75rem;", ":0.25rem;", ":0;", ":0;", ":0;", ":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-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":auto;", ":1.25rem;", ":0.25rem;", ":0.75rem;", ":0.5rem;", ":0.75rem;", ":0;", ":0;", ":0;", ":0;", ":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);"], dropdownTokens.width, dropdownTokens.height, dropdownTokens.borderRadius, dropdownTokens.paddingTop, dropdownTokens.paddingRight, dropdownTokens.paddingBottom, dropdownTokens.paddingLeft, dropdownTokens.headerWidth, dropdownTokens.headerHeight, dropdownTokens.headerPaddingTop, dropdownTokens.headerPaddingRight, dropdownTokens.headerPaddingBottom, dropdownTokens.headerPaddingLeft, dropdownTokens.headerMarginTop, dropdownTokens.headerMarginRight, dropdownTokens.headerMarginBottom, dropdownTokens.headerMarginLeft, dropdownTokens.headerFontFamily, dropdownTokens.headerFontSize, dropdownTokens.headerFontStyle, dropdownTokens.headerFontWeightBold, dropdownTokens.headerFontLetterSpacing, dropdownTokens.headerFontLineHeight, dropdownTokens.itemWidth, dropdownTokens.itemHeight, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemMarginTop, dropdownTokens.itemMarginRight, dropdownTokens.itemMarginBottom, dropdownTokens.itemMarginLeft, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight, dropdownTokens.dividerWidth, dropdownTokens.dividerHeight, dropdownTokens.dividerMarginTop, dropdownTokens.dividerMarginRight, dropdownTokens.dividerMarginBottom, dropdownTokens.dividerMarginLeft, dropdownTokens.groupWidth, dropdownTokens.groupPaddingTop, dropdownTokens.groupPaddingRight, dropdownTokens.groupPaddingBottom, dropdownTokens.groupPaddingLeft, dropdownTokens.groupMarginTop, dropdownTokens.groupMarginRight, dropdownTokens.groupMarginBottom, dropdownTokens.groupMarginLeft, dropdownTokens.groupLabelPaddingTop, dropdownTokens.groupLabelPaddingRight, dropdownTokens.groupLabelPaddingBottom, dropdownTokens.groupLabelPaddingLeft, dropdownTokens.groupLabelMarginTop, dropdownTokens.groupLabelMarginRight, dropdownTokens.groupLabelMarginBottom, dropdownTokens.groupLabelMarginLeft, dropdownTokens.groupLabelFontFamily, dropdownTokens.groupLabelFontSize, dropdownTokens.groupLabelFontStyle, dropdownTokens.groupLabelFontWeight, dropdownTokens.groupLabelLetterSpacing, dropdownTokens.groupLabelLineHeight, dropdownTokens.footerWidth, dropdownTokens.footerHeight, dropdownTokens.footerPaddingTop, dropdownTokens.footerPaddingRight, dropdownTokens.footerPaddingBottom, dropdownTokens.footerPaddingLeft, dropdownTokens.footerMarginTop, dropdownTokens.footerMarginRight, dropdownTokens.footerMarginBottom, dropdownTokens.footerMarginLeft, dropdownTokens.footerFontFamily, dropdownTokens.footerFontSize, dropdownTokens.footerFontStyle, dropdownTokens.footerFontWeightBold, dropdownTokens.footerFontLetterSpacing, dropdownTokens.footerFontLineHeight)
+    },
+    view: {
+      primary: /*#__PURE__*/css(["", ":0.4;", ":var(--plasma-colors-white);", ":var(--shadow-down-soft-s);", ":var(--plasma-colors-transparent);", ":var(--plasma-colors-transparent);", ":var(--on-light-text-primary);", ":rgba(12,143,230,0.12);", ":var(--on-light-surface-transparent-secondary);", ":inherit;", ":var(--on-light-surface-transparent-secondary);", ":inherit;", ":var(--plasma-colors-overlay-blur);", ":var(--plasma-colors-transparent);", ":var(--plasma-colors-transparent);", ":var(--on-light-text-primary);"], dropdownTokens.disabledOpacity, dropdownTokens.background, dropdownTokens.boxShadow, dropdownTokens.headerBackground, dropdownTokens.itemBackground, dropdownTokens.itemColor, dropdownTokens.itemBackgroundHover, dropdownTokens.itemBackgroundSelected, dropdownTokens.itemColorSelected, dropdownTokens.itemBackgroundSelectedHover, dropdownTokens.itemColorSelectedHover, dropdownTokens.dividerColor, dropdownTokens.footerBackground, dropdownTokens.groupBackground, dropdownTokens.groupLabelColor)
+    }
+  }
+};

package/styled-components/es/examples/sds_engineer/components/Dropdown/Dropdown.js

@@ -0,0 +1,15 @@
+import { dropdownConfig, dropdownDividerConfig, dropdownFooterConfig, dropdownGroupConfig, dropdownHeaderConfig, dropdownItemConfig } from '../../../../components/Dropdown';
+import { component, mergeConfig } from '../../../../engines';
+import { config } from './Dropdown.config';
+var mergedConfig = /*#__PURE__*/mergeConfig(dropdownConfig, config);
+export var Dropdown = /*#__PURE__*/component(mergedConfig);
+var mergedDividerConfig = /*#__PURE__*/mergeConfig(dropdownDividerConfig);
+export var DropdownDivider = /*#__PURE__*/component(mergedDividerConfig);
+var mergedFooterConfig = /*#__PURE__*/mergeConfig(dropdownFooterConfig);
+export var DropdownFooter = /*#__PURE__*/component(mergedFooterConfig);
+var mergedGroupConfig = /*#__PURE__*/mergeConfig(dropdownGroupConfig);
+export var DropdownGroup = /*#__PURE__*/component(mergedGroupConfig);
+var mergedHeaderConfig = /*#__PURE__*/mergeConfig(dropdownHeaderConfig);
+export var DropdownHeader = /*#__PURE__*/component(mergedHeaderConfig);
+var mergedItemConfig = /*#__PURE__*/mergeConfig(dropdownItemConfig);
+export var DropdownItem = /*#__PURE__*/component(mergedItemConfig);

package/styled-components/es/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/es/examples/sds_engineer/components/Radiobox/Radiobox.config.js

@@ -1,4 +1,5 @@
 import { css } from 'styled-components';
+import { radioboxTokens } from '../../../../components/Radiobox';
 export var config = {
   defaults: {
     view: 'accent',
@@ -9,27 +10,27 @@ export var config = {
      * Размер контрола.
      */
     size: {
-      s: /*#__PURE__*/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__*/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__*/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);"], radioboxTokens.margin, radioboxTokens.triggerMargin, radioboxTokens.triggerSize, radioboxTokens.triggerBorderRadius, radioboxTokens.ellipseSize, radioboxTokens.contentTopOffset, radioboxTokens.contentLeftOffset, radioboxTokens.labelFontFamily, radioboxTokens.labelFontSize, radioboxTokens.labelFontStyle, radioboxTokens.labelFontWeight, radioboxTokens.labelLetterSpacing, radioboxTokens.labelLineHeight, radioboxTokens.descriptionFontFamily, radioboxTokens.descriptionFontSize, radioboxTokens.descriptionFontStyle, radioboxTokens.descriptionFontWeight, radioboxTokens.descriptionLetterSpacing, radioboxTokens.descriptionLineHeight),
+      m: /*#__PURE__*/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);"], radioboxTokens.margin, radioboxTokens.triggerMargin, radioboxTokens.triggerSize, radioboxTokens.triggerBorderRadius, radioboxTokens.ellipseSize, radioboxTokens.contentTopOffset, radioboxTokens.contentLeftOffset, radioboxTokens.labelFontFamily, radioboxTokens.labelFontSize, radioboxTokens.labelFontStyle, radioboxTokens.labelFontWeight, radioboxTokens.labelLetterSpacing, radioboxTokens.labelLineHeight, radioboxTokens.descriptionFontFamily, radioboxTokens.descriptionFontSize, radioboxTokens.descriptionFontStyle, radioboxTokens.descriptionFontWeight, radioboxTokens.descriptionLetterSpacing, radioboxTokens.descriptionLineHeight)
     },
     /**
      * Вид контрола.
      */
     view: {
-      "default": /*#__PURE__*/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__*/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__*/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__*/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__*/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__*/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__*/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__*/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__*/css(["", ":var(--text-primary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBorderColor),
+      secondary: /*#__PURE__*/css(["", ":var(--text-secondary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBorderColor),
+      tertiary: /*#__PURE__*/css(["", ":var(--text-tertiary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBorderColor),
+      paragraph: /*#__PURE__*/css(["", ":var(--text-paragraph);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBorderColor),
+      accent: /*#__PURE__*/css(["", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBorderColor),
+      positive: /*#__PURE__*/css(["", ":var(--text-positive);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBorderColor),
+      warning: /*#__PURE__*/css(["", ":var(--text-warning);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBorderColor),
+      negative: /*#__PURE__*/css(["", ":var(--text-negative);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBorderColor)
     },
     disabled: {
-      "true": /*#__PURE__*/css(["--plasma-radiobox-disabled-opacity:0.4;"])
+      "true": /*#__PURE__*/css(["", ":0.4;"], radioboxTokens.disabledOpacity)
     },
     focused: {
-      "true": /*#__PURE__*/css(["--plasma-radiobox-focus-color:var(--text-accent);"])
+      "true": /*#__PURE__*/css(["", ":var(--text-accent);"], radioboxTokens.focusColor)
     }
   }
 };

package/types/components/Checkbox/Checkbox.d.ts

@@ -1,43 +1,11 @@
 import React from 'react';
-import type { InputHTMLAttributes } from '@salutejs/plasma-core';
-import type { Filter, RootProps } from '../../engines/types';
-export declare const StyledInput: import("@linaria/react").StyledComponent<React.ClassAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLInputElement> & Record<never, unknown>>;
-export declare const StyledTrigger: import("@linaria/react").StyledComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const StyledContentWrapper: import("@linaria/react").StyledComponent<React.ClassAttributes<HTMLLabelElement> & React.LabelHTMLAttributes<HTMLLabelElement> & Record<never, unknown>>;
-export declare const StyledContent: import("@linaria/react").StyledComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const StyledLabel: import("@linaria/react").StyledComponent<React.ClassAttributes<HTMLSpanElement> & React.HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
-export declare const StyledDescription: import("@linaria/react").StyledComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export interface BaseboxProps {
-    /**
-     * Уникальный идентификатор контрола
-     */
-    id?: string;
-    /**
-     * Метка-подпись к элементу
-     */
-    label?: React.ReactNode;
-    /**
-     * Описание элемента
-     */
-    description?: React.ReactNode;
-    /**
-     * Title и description в одну строку или с переносом строк
-     */
-    singleLine?: boolean;
-    /**
-     * Неопределенное состояние компонента - когда часть потомков не выбрана.
-     */
-    indeterminate?: boolean;
-    size?: string;
-    view?: string;
-    focused?: boolean;
-}
-declare type CheckboxProps = Filter<InputHTMLAttributes<HTMLInputElement>, 'size'> & BaseboxProps;
-export declare const checkboxRoot: (Root: RootProps<HTMLInputElement, CheckboxProps>) => React.ForwardRefExoticComponent<Filter<InputHTMLAttributes<HTMLInputElement>, "size"> & BaseboxProps & React.RefAttributes<HTMLInputElement>>;
+import type { RootProps } from '../../engines/types';
+import type { CheckboxProps } from './Checkbox.types';
+export declare const checkboxRoot: (Root: RootProps<HTMLInputElement, CheckboxProps>) => React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
 export declare const checkboxConfig: {
     name: string;
     tag: string;
-    layout: (Root: RootProps<HTMLInputElement, CheckboxProps>) => React.ForwardRefExoticComponent<Filter<InputHTMLAttributes<HTMLInputElement>, "size"> & BaseboxProps & React.RefAttributes<HTMLInputElement>>;
+    layout: (Root: RootProps<HTMLInputElement, CheckboxProps>) => React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
     base: import("@linaria/core").LinariaClassName;
     variations: {
         size: {
@@ -58,5 +26,4 @@ export declare const checkboxConfig: {
         view: string;
     };
 };
-export {};
 //# sourceMappingURL=Checkbox.d.ts.map

package/types/components/Checkbox/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAItE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAGjE,OAAO,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAS7D,eAAO,MAAM,WAAW,0JAYvB,CAAC;AAEF,eAAO,MAAM,aAAa,iJA2BzB,CAAC;AAEF,eAAO,MAAM,oBAAoB,0JAMhC,CAAC;AAEF,eAAO,MAAM,aAAa,iJAMzB,CAAC;AAEF,eAAO,MAAM,WAAW,mJAOvB,CAAC;AAEF,eAAO,MAAM,iBAAiB,iJAU7B,CAAC;AAqBF,MAAM,WAAW,YAAY;IACzB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,aAAK,aAAa,GAAG,MAAM,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,GAAG,YAAY,CAAC;AAE1F,eAAO,MAAM,YAAY,SAAU,UAAU,gBAAgB,EAAE,aAAa,CAAC,kJAoFvE,CAAC;AAEP,eAAO,MAAM,cAAc;;;mBAtFQ,UAAU,gBAAgB,EAAE,aAAa,CAAC;;;;;;;;;;;;;;;;;;;;CA6G5E,CAAC"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAGtE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAgBrD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGtD,eAAO,MAAM,YAAY,SAAU,UAAU,gBAAgB,EAAE,aAAa,CAAC,2FAmFvE,CAAC;AAEP,eAAO,MAAM,cAAc;;;mBArFQ,UAAU,gBAAgB,EAAE,aAAa,CAAC;;;;;;;;;;;;;;;;;;;;CA4G5E,CAAC"}

package/types/components/Checkbox/Checkbox.styles.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const base: import("@linaria/core").LinariaClassName;
+export declare const StyledInput: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Record<never, unknown>>;
+export declare const StyledTrigger: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const StyledContentWrapper: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLLabelElement> & import("react").LabelHTMLAttributes<HTMLLabelElement> & Record<never, unknown>>;
+export declare const StyledContent: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const StyledLabel: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
+export declare const StyledDescription: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+//# sourceMappingURL=Checkbox.styles.d.ts.map

package/types/components/Checkbox/Checkbox.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.styles.ts"],"names":[],"mappings":";AAOA,eAAO,MAAM,IAAI,0CAahB,CAAC;AAEF,eAAO,MAAM,WAAW,8KAYvB,CAAC;AAEF,eAAO,MAAM,aAAa,qKA2BzB,CAAC;AAEF,eAAO,MAAM,oBAAoB,8KAMhC,CAAC;AAEF,eAAO,MAAM,aAAa,qKAMzB,CAAC;AAEF,eAAO,MAAM,WAAW,uKAOvB,CAAC;AAEF,eAAO,MAAM,iBAAiB,qKAU7B,CAAC"}

package/types/components/Checkbox/Checkbox.tokens.d.ts

@@ -0,0 +1,31 @@
+export declare const classes: {
+    singleLine: string;
+    checkboxTrigger: string;
+};
+export declare const tokens: {
+    margin: string;
+    triggerMargin: string;
+    triggerSize: string;
+    triggerBorderRadius: string;
+    contentTopOffset: string;
+    contentLeftOffset: string;
+    labelFontFamily: string;
+    labelFontSize: string;
+    labelFontStyle: string;
+    labelFontWeight: string;
+    labelLetterSpacing: string;
+    labelLineHeight: string;
+    descriptionFontFamily: string;
+    descriptionFontSize: string;
+    descriptionFontStyle: string;
+    descriptionFontWeight: string;
+    descriptionLetterSpacing: string;
+    descriptionLineHeight: string;
+    fillColor: string;
+    iconColor: string;
+    descriptionColor: string;
+    triggerBorderColor: string;
+    focusColor: string;
+    disabledOpacity: string;
+};
+//# sourceMappingURL=Checkbox.tokens.d.ts.map

package/types/components/Checkbox/Checkbox.tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;CAGnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;CA2BlB,CAAC"}

package/types/components/Checkbox/Checkbox.types.d.ts

@@ -0,0 +1,29 @@
+import type { InputHTMLAttributes } from 'react';
+export interface BaseboxProps {
+    /**
+     * Уникальный идентификатор контрола
+     */
+    id?: string;
+    /**
+     * Метка-подпись к элементу
+     */
+    label?: React.ReactNode;
+    /**
+     * Описание элемента
+     */
+    description?: React.ReactNode;
+    /**
+     * Title и description в одну строку или с переносом строк
+     */
+    singleLine?: boolean;
+    /**
+     * Неопределенное состояние компонента - когда часть потомков не выбрана.
+     */
+    indeterminate?: boolean;
+    size?: string;
+    view?: string;
+    focused?: boolean;
+}
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>, BaseboxProps {
+}
+//# sourceMappingURL=Checkbox.types.d.ts.map

package/types/components/Checkbox/Checkbox.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.types.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAEjD,MAAM,WAAW,YAAY;IACzB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,EAAE,YAAY;CAAG"}

package/types/components/Checkbox/IconsSvg.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconsSvg.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/IconsSvg.tsx"],"names":[],"mappings":";AAEA,eAAO,MAAM,IAAI,mBAShB,CAAC;AAEF,eAAO,MAAM,aAAa,mBAWzB,CAAC"}
+{"version":3,"file":"IconsSvg.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/IconsSvg.tsx"],"names":[],"mappings":";AAIA,eAAO,MAAM,IAAI,mBAShB,CAAC;AAEF,eAAO,MAAM,aAAa,mBAMzB,CAAC"}

package/types/components/Checkbox/index.d.ts

@@ -1,3 +1,4 @@
 export { checkboxRoot, checkboxConfig } from './Checkbox';
-export type { BaseboxProps } from './Checkbox';
+export type { BaseboxProps } from './Checkbox.types';
+export { tokens as checkboxTokens } from './Checkbox.tokens';
 //# sourceMappingURL=index.d.ts.map

package/types/components/Checkbox/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC1D,YAAY,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC1D,YAAY,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAErD,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,mBAAmB,CAAC"}

package/types/components/Checkbox/variations/_disabled/base.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../../../../src/components/Checkbox/variations/_disabled/base.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,IAAI,0CAQhB,CAAC"}

package/types/components/Checkbox/variations/_focused/base.d.ts

@@ -0,0 +1,6 @@
+/**
+ * INFO: на 36 строке нет возможности использвать .${classes.checkboxTrigger},
+ * потому что линтер правит селектор и он применяется некорректно
+ */
+export declare const base: import("@linaria/core").LinariaClassName;
+//# sourceMappingURL=base.d.ts.map

package/types/components/Checkbox/variations/_focused/base.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../../../../src/components/Checkbox/variations/_focused/base.ts"],"names":[],"mappings":"AAKA;;;GAGG;AAEH,eAAO,MAAM,IAAI,0CAuChB,CAAC"}