@salutejs/plasma-new-hope 0.78.0-dev.0 → 0.79.0-canary.1195.9053577477.0

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

@@ -0,0 +1,41 @@
+import { buttonRoot } from '../Button';
+import { base as viewCSS } from '../Button/variations/_view/base';
+import { base as sizeCSS } from '../Button/variations/_size/base';
+import { base as disabledCSS } from '../Button/variations/_disabled/base';
+import { base as focusedCSS } from '../Button/variations/_focused/base';
+import { base as blurredCSS } from '../Button/variations/_blurred/base';
+import { base as stretchingCSS } from '../Button/variations/_stretching/base';
+import { base } from './IconButton.styles';
+export var iconButtonRoot = buttonRoot;
+export var iconButtonConfig = {
+  name: 'IconButton',
+  tag: 'button',
+  layout: iconButtonRoot,
+  base: base,
+  variations: {
+    view: {
+      css: viewCSS
+    },
+    size: {
+      css: sizeCSS
+    },
+    disabled: {
+      css: disabledCSS,
+      attrs: true
+    },
+    focused: {
+      css: focusedCSS
+    },
+    blurred: {
+      css: blurredCSS
+    },
+    stretching: {
+      css: stretchingCSS
+    }
+  },
+  defaults: {
+    view: 'secondary',
+    size: 'm',
+    stretching: 'fixed'
+  }
+};

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

@@ -0,0 +1,8 @@
+import { css } from 'styled-components';
+import { buttonTokens } from '../Button';
+import { baseContent as buttonBase } from '../Button/Button.styles';
+import { tokens } from './IconButton.tokens';
+
+// Переопределние токенов из Button
+export var mappingOverride = /*#__PURE__*/"\n    ".concat(buttonTokens.buttonPadding, ": 0;\n\n    ").concat(buttonTokens.buttonColor, ": var(").concat(tokens.iconButtonColor, ");\n    ").concat(buttonTokens.buttonBackgroundColor, ": var(").concat(tokens.iconButtonBackgroundColor, ");\n\n    ").concat(buttonTokens.buttonColorHover, ": var(").concat(tokens.iconButtonColorHover, ");\n    ").concat(buttonTokens.buttonBackgroundColorHover, ": var(").concat(tokens.iconButtonBackgroundColorHover, ");\n\n    ").concat(buttonTokens.buttonColorActive, ": var(").concat(tokens.iconButtonColorActive, ");\n    ").concat(buttonTokens.buttonBackgroundColorActive, ": var(").concat(tokens.iconButtonBackgroundColorActive, ");\n\n\n    ").concat(buttonTokens.buttonFontFamily, ": var(").concat(tokens.iconButtonFontFamily, ");\n    ").concat(buttonTokens.buttonFontSize, ": var(").concat(tokens.iconButtonFontSize, ");\n    ").concat(buttonTokens.buttonFontStyle, ": var(").concat(tokens.iconButtonFontStyle, ");\n    ").concat(buttonTokens.buttonFontWeight, ":var(").concat(tokens.iconButtonFontWeight, ");\n    ").concat(buttonTokens.buttonLetterSpacing, ": var(").concat(tokens.iconButtonLetterSpacing, ");\n    ").concat(buttonTokens.buttonLineHeight, ": var(").concat(tokens.iconButtonLineHeight, ");\n\n    ").concat(buttonTokens.buttonWidth, ": var(").concat(tokens.iconButtonWidth, ");\n    ").concat(buttonTokens.buttonHeight, ": var(").concat(tokens.iconButtonHeight, ");\n    ").concat(buttonTokens.buttonRadius, ": var(").concat(tokens.iconButtonRadius, ");\n\n    ").concat(buttonTokens.buttonDisabledOpacity, ": var(").concat(tokens.iconButtonDisabledOpacity, ");\n    ").concat(buttonTokens.buttonFocusColor, ": var(").concat(tokens.iconButtonFocusColor, ");\n\n    ").concat(buttonTokens.buttonSpinnerSize, ": var(").concat(tokens.iconButtonSpinnerSize, ");\n    ").concat(buttonTokens.buttonSpinnerColor, ": var(").concat(tokens.iconButtonSpinnerColor, ");\n");
+export var base = /*#__PURE__*/css(["", ";", ";"], buttonBase, mappingOverride);

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

@@ -0,0 +1,25 @@
+export var tokens = {
+  iconButtonColor: '--plasma-icon-button-color',
+  iconButtonBackgroundColor: '--plasma-icon-button-background-color',
+  iconButtonColorHover: '--plasma-icon-button-color-hover',
+  iconButtonBackgroundColorHover: '--plasma-icon-button-background-color-hover',
+  iconButtonColorActive: '--plasma-icon-button-color-active',
+  iconButtonBackgroundColorActive: '--plasma-icon-button-background-color-active',
+  iconButtonScaleHover: '--plasma-icon-button-scale-hover',
+  iconButtonScaleActive: '---plasma-icon-button-scale-active',
+  iconButtonHeight: '--plasma-icon-button-height',
+  iconButtonWidth: '--plasma-icon-button-width',
+  iconButtonPadding: '--plasma-icon-button-padding',
+  iconButtonRadius: '--plasma-icon-button-radius',
+  iconButtonRadiusCircle: '--plasma-icon-button-radius-circle',
+  iconButtonFontFamily: '--plasma-icon-button-font-family',
+  iconButtonFontSize: '--plasma-icon-button-font-size',
+  iconButtonFontStyle: '--plasma-icon-button-font-style',
+  iconButtonFontWeight: '--plasma-icon-button-font-weight',
+  iconButtonLetterSpacing: '--plasma-icon-button-letter-spacing',
+  iconButtonLineHeight: '--plasma-icon-button-line-height',
+  iconButtonDisabledOpacity: '--plasma-icon-button-disabled-opacity',
+  iconButtonFocusColor: '--plasma-icon-button-focus-color',
+  iconButtonSpinnerColor: '--plasma-icon-button-spinner-color',
+  iconButtonSpinnerSize: '--plasma-icon-button-spinner-size'
+};

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

@@ -0,0 +1,2 @@
+export { iconButtonRoot, iconButtonConfig } from './IconButton';
+export { tokens as iconButtonTokens } from './IconButton.tokens';

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

@@ -0,0 +1,39 @@
+import { css } from 'styled-components';
+import { iconButtonTokens } from '../../../../components/IconButton';
+export var config = {
+  defaults: {
+    view: 'default',
+    focused: 'true',
+    size: 'm'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
+      accent: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
+      secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
+      clear: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
+      success: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
+      warning: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
+      critical: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
+      dark: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
+      black: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
+      white: /*#__PURE__*/css(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-hover);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive)
+    },
+    size: {
+      l: /*#__PURE__*/css(["", ":3.5rem;", ":3.5rem;", ":1.5rem;", ":0.875rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.375rem;", ":inherit;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
+      lr: /*#__PURE__*/css(["", ":3.5rem;", ":3.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.375rem;", ":inherit;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
+      m: /*#__PURE__*/css(["", ":3rem;", ":3rem;", ":1.25rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
+      mr: /*#__PURE__*/css(["", ":3rem;", ":3rem;", ":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);", ":1.375rem;", ":inherit;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
+      s: /*#__PURE__*/css(["", ":2.5rem;", ":2.5rem;", ":1rem;", ":0.625rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
+      sr: /*#__PURE__*/css(["", ":2.5rem;", ":2.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-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
+      xs: /*#__PURE__*/css(["", ":2rem;", ":2rem;", ":0.75rem;", ":0.5rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
+      xsr: /*#__PURE__*/css(["", ":2rem;", ":2rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor)
+    },
+    disabled: {
+      "true": /*#__PURE__*/css(["", ":0.4;"], iconButtonTokens.iconButtonDisabledOpacity)
+    },
+    focused: {
+      "true": /*#__PURE__*/css(["", ":var(--surface-accent);"], iconButtonTokens.iconButtonFocusColor)
+    }
+  }
+};

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

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

package/styled-components/es/examples/plasma_b2c/components/IconButton/IconButton.stories.tsx

@@ -0,0 +1,71 @@
+import React, { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { disableProps } from '@salutejs/plasma-sb-utils';
+
+import { iconButtonConfig } from '../../../../components/IconButton';
+import { mergeConfig } from '../../../../engines';
+import { WithTheme, argTypesFromConfig } from '../../../_helpers';
+import { IconChevronLeft } from '../../../../components/_Icon';
+
+import { config } from './IconButton.config';
+import { IconButton } from './IconButton';
+
+const meta: Meta<typeof IconButton> = {
+    title: 'plasma_b2c/IconButton',
+    decorators: [WithTheme],
+    component: IconButton,
+    argTypes: {
+        ...argTypesFromConfig(mergeConfig(iconButtonConfig, config)),
+        pin: {
+            options: [
+                'square-square',
+                'square-clear',
+                'clear-square',
+                'clear-clear',
+                'clear-circle',
+                'circle-clear',
+                'circle-circle',
+                '',
+            ],
+            control: {
+                type: 'select',
+            },
+            table: { defaultValue: { summary: 'bottom' } },
+        },
+    },
+};
+
+export default meta;
+
+const getSizeForIcon = (size) => {
+    const map = {
+        mr: 's',
+        lr: 's',
+        m: 's',
+        l: 's',
+        sr: 's',
+        xsr: 'xs',
+    };
+    if (map[size]) {
+        return map[size];
+    }
+
+    return size;
+};
+
+export const Default: StoryObj<ComponentProps<typeof IconButton>> = {
+    args: {
+        children: <IconChevronLeft />,
+        view: 'default',
+        size: 'm',
+        disabled: false,
+        focused: true,
+        isLoading: false,
+    },
+    argTypes: { ...disableProps(['children']) },
+    render: (args) => (
+        <IconButton {...args}>
+            <IconChevronLeft size={getSizeForIcon(args.size)} />
+        </IconButton>
+    ),
+};

package/styled-components/es/examples/plasma_web/components/IconButton/IconButton.config.js

@@ -0,0 +1,39 @@
+import { css } from 'styled-components';
+import { iconButtonTokens } from '../../../../components/IconButton';
+export var config = {
+  defaults: {
+    view: 'default',
+    focused: 'true',
+    size: 'm'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
+      accent: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
+      secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
+      clear: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
+      success: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
+      warning: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
+      critical: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
+      dark: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
+      black: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
+      white: /*#__PURE__*/css(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-hover);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive)
+    },
+    size: {
+      l: /*#__PURE__*/css(["", ":3.5rem;", ":3.5rem;", ":1.5rem;", ":0.875rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.375rem;", ":inherit;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
+      lr: /*#__PURE__*/css(["", ":3.5rem;", ":3.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.375rem;", ":inherit;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
+      m: /*#__PURE__*/css(["", ":3rem;", ":3rem;", ":1.25rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
+      mr: /*#__PURE__*/css(["", ":3rem;", ":3rem;", ":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);", ":1.375rem;", ":inherit;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
+      s: /*#__PURE__*/css(["", ":2.5rem;", ":2.5rem;", ":1rem;", ":0.625rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
+      sr: /*#__PURE__*/css(["", ":2.5rem;", ":2.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-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
+      xs: /*#__PURE__*/css(["", ":2rem;", ":2rem;", ":0.75rem;", ":0.5rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
+      xsr: /*#__PURE__*/css(["", ":2rem;", ":2rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor)
+    },
+    disabled: {
+      "true": /*#__PURE__*/css(["", ":0.4;"], iconButtonTokens.iconButtonDisabledOpacity)
+    },
+    focused: {
+      "true": /*#__PURE__*/css(["", ":var(--surface-accent);"], iconButtonTokens.iconButtonFocusColor)
+    }
+  }
+};

package/styled-components/es/examples/plasma_web/components/IconButton/IconButton.js

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

package/styled-components/es/examples/plasma_web/components/IconButton/IconButton.stories.tsx

@@ -0,0 +1,71 @@
+import React, { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { disableProps } from '@salutejs/plasma-sb-utils';
+
+import { iconButtonConfig } from '../../../../components/IconButton';
+import { mergeConfig } from '../../../../engines';
+import { WithTheme, argTypesFromConfig } from '../../../_helpers';
+import { IconChevronLeft } from '../../../../components/_Icon';
+
+import { config } from './IconButton.config';
+import { IconButton } from './IconButton';
+
+const meta: Meta<typeof IconButton> = {
+    title: 'plasma_web/IconButton',
+    decorators: [WithTheme],
+    component: IconButton,
+    argTypes: {
+        ...argTypesFromConfig(mergeConfig(iconButtonConfig, config)),
+        pin: {
+            options: [
+                'square-square',
+                'square-clear',
+                'clear-square',
+                'clear-clear',
+                'clear-circle',
+                'circle-clear',
+                'circle-circle',
+                '',
+            ],
+            control: {
+                type: 'select',
+            },
+            table: { defaultValue: { summary: 'bottom' } },
+        },
+    },
+};
+
+export default meta;
+
+const getSizeForIcon = (size) => {
+    const map = {
+        mr: 's',
+        lr: 's',
+        m: 's',
+        l: 's',
+        sr: 's',
+        xsr: 'xs',
+    };
+    if (map[size]) {
+        return map[size];
+    }
+
+    return size;
+};
+
+export const Default: StoryObj<ComponentProps<typeof IconButton>> = {
+    args: {
+        children: <IconChevronLeft />,
+        view: 'default',
+        size: 'm',
+        disabled: false,
+        focused: true,
+        isLoading: false,
+    },
+    argTypes: { ...disableProps(['children']) },
+    render: (args) => (
+        <IconButton {...args}>
+            <IconChevronLeft size={getSizeForIcon(args.size)} />
+        </IconButton>
+    ),
+};

package/styled-components/es/index.js

@@ -5,6 +5,7 @@ export * from './engines';
 export * from './hooks';
 export * from './utils';
 export * from './components/Button';
+export * from './components/IconButton';
 export * from './components/ButtonGroup';
 export * from './components/Chip';
 export * from './components/Cell';

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

@@ -21,4 +21,5 @@ export declare const StyledSpinner: import("@linaria/react").StyledMeta & import
     size?: undefined;
     view?: string | undefined;
 } & import("react").RefAttributes<HTMLDivElement>))>;
+export declare const baseContent: string;
 //# sourceMappingURL=Button.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.styles.ts"],"names":[],"mappings":";AAaA,eAAO,MAAM,IAAI,0CA0BhB,CAAC;AAKF,eAAO,MAAM,UAAU,uKAUtB,CAAC;AAGF,eAAO,MAAM,QAAQ;;EAOpB,CAAC;AAEF,eAAO,MAAM,MAAM,qKAElB,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;oDAGzB,CAAC"}
+{"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.styles.ts"],"names":[],"mappings":";AAaA,eAAO,MAAM,IAAI,0CA0BhB,CAAC;AAKF,eAAO,MAAM,UAAU,uKAUtB,CAAC;AAGF,eAAO,MAAM,QAAQ;;EAOpB,CAAC;AAEF,eAAO,MAAM,MAAM,qKAElB,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;oDAGzB,CAAC;AAGF,eAAO,MAAM,WAAW,QA6FvB,CAAC"}

package/types/components/IconButton/IconButton.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+export declare const iconButtonRoot: (Root: import("../..").RootProps<HTMLButtonElement, import("../Button").ButtonProps<HTMLElement>>) => import("react").ForwardRefExoticComponent<import("../Button").ButtonProps<HTMLElement> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const iconButtonConfig: {
+    name: string;
+    tag: string;
+    layout: (Root: import("../..").RootProps<HTMLButtonElement, import("../Button").ButtonProps<HTMLElement>>) => import("react").ForwardRefExoticComponent<import("../Button").ButtonProps<HTMLElement> & import("react").RefAttributes<HTMLButtonElement>>;
+    base: import("@linaria/core").LinariaClassName;
+    variations: {
+        view: {
+            css: import("@linaria/core").LinariaClassName;
+        };
+        size: {
+            css: import("@linaria/core").LinariaClassName;
+        };
+        disabled: {
+            css: import("@linaria/core").LinariaClassName;
+            attrs: boolean;
+        };
+        focused: {
+            css: import("@linaria/core").LinariaClassName;
+        };
+        blurred: {
+            css: import("@linaria/core").LinariaClassName;
+        };
+        stretching: {
+            css: import("@linaria/core").LinariaClassName;
+        };
+    };
+    defaults: {
+        view: string;
+        size: string;
+        stretching: string;
+    };
+};
+//# sourceMappingURL=IconButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/IconButton.tsx"],"names":[],"mappings":";AAUA,eAAO,MAAM,cAAc,kPAAa,CAAC;AAEzC,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+B5B,CAAC"}

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

@@ -0,0 +1,3 @@
+export declare const mappingOverride: string;
+export declare const base: import("@linaria/core").LinariaClassName;
+//# sourceMappingURL=IconButton.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.styles.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/IconButton.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,eAAe,QA6B3B,CAAC;AAEF,eAAO,MAAM,IAAI,0CAGhB,CAAC"}

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

@@ -0,0 +1,26 @@
+export declare const tokens: {
+    iconButtonColor: string;
+    iconButtonBackgroundColor: string;
+    iconButtonColorHover: string;
+    iconButtonBackgroundColorHover: string;
+    iconButtonColorActive: string;
+    iconButtonBackgroundColorActive: string;
+    iconButtonScaleHover: string;
+    iconButtonScaleActive: string;
+    iconButtonHeight: string;
+    iconButtonWidth: string;
+    iconButtonPadding: string;
+    iconButtonRadius: string;
+    iconButtonRadiusCircle: string;
+    iconButtonFontFamily: string;
+    iconButtonFontSize: string;
+    iconButtonFontStyle: string;
+    iconButtonFontWeight: string;
+    iconButtonLetterSpacing: string;
+    iconButtonLineHeight: string;
+    iconButtonDisabledOpacity: string;
+    iconButtonFocusColor: string;
+    iconButtonSpinnerColor: string;
+    iconButtonSpinnerSize: string;
+};
+//# sourceMappingURL=IconButton.tokens.d.ts.map

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

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

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

@@ -0,0 +1,3 @@
+export { iconButtonRoot, iconButtonConfig } from './IconButton';
+export { tokens as iconButtonTokens } from './IconButton.tokens';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,MAAM,IAAI,gBAAgB,EAAE,MAAM,qBAAqB,CAAC"}

package/types/examples/plasma_b2c/components/IconButton/IconButton.config.d.ts

@@ -0,0 +1,38 @@
+export declare const config: {
+    defaults: {
+        view: string;
+        focused: string;
+        size: string;
+    };
+    variations: {
+        view: {
+            default: import("@linaria/core").LinariaClassName;
+            accent: import("@linaria/core").LinariaClassName;
+            secondary: import("@linaria/core").LinariaClassName;
+            clear: import("@linaria/core").LinariaClassName;
+            success: import("@linaria/core").LinariaClassName;
+            warning: import("@linaria/core").LinariaClassName;
+            critical: import("@linaria/core").LinariaClassName;
+            dark: import("@linaria/core").LinariaClassName;
+            black: import("@linaria/core").LinariaClassName;
+            white: import("@linaria/core").LinariaClassName;
+        };
+        size: {
+            l: import("@linaria/core").LinariaClassName;
+            lr: import("@linaria/core").LinariaClassName;
+            m: import("@linaria/core").LinariaClassName;
+            mr: import("@linaria/core").LinariaClassName;
+            s: import("@linaria/core").LinariaClassName;
+            sr: import("@linaria/core").LinariaClassName;
+            xs: import("@linaria/core").LinariaClassName;
+            xsr: import("@linaria/core").LinariaClassName;
+        };
+        disabled: {
+            true: import("@linaria/core").LinariaClassName;
+        };
+        focused: {
+            true: import("@linaria/core").LinariaClassName;
+        };
+    };
+};
+//# sourceMappingURL=IconButton.config.d.ts.map

package/types/examples/plasma_b2c/components/IconButton/IconButton.config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/IconButton/IconButton.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsNlB,CAAC"}

package/types/examples/plasma_b2c/components/IconButton/IconButton.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+export declare const IconButton: import("react").FunctionComponent<import("../../../../engines/types").PropsType<{
+    view: {
+        default: import("@linaria/core").LinariaClassName;
+        accent: import("@linaria/core").LinariaClassName;
+        secondary: import("@linaria/core").LinariaClassName;
+        clear: import("@linaria/core").LinariaClassName;
+        success: import("@linaria/core").LinariaClassName;
+        warning: import("@linaria/core").LinariaClassName;
+        critical: import("@linaria/core").LinariaClassName;
+        dark: import("@linaria/core").LinariaClassName;
+        black: import("@linaria/core").LinariaClassName;
+        white: import("@linaria/core").LinariaClassName;
+    };
+    size: {
+        l: import("@linaria/core").LinariaClassName;
+        lr: import("@linaria/core").LinariaClassName;
+        m: import("@linaria/core").LinariaClassName;
+        mr: import("@linaria/core").LinariaClassName;
+        s: import("@linaria/core").LinariaClassName;
+        sr: import("@linaria/core").LinariaClassName;
+        xs: import("@linaria/core").LinariaClassName;
+        xsr: import("@linaria/core").LinariaClassName;
+    };
+    disabled: {
+        true: import("@linaria/core").LinariaClassName;
+    };
+    focused: {
+        true: import("@linaria/core").LinariaClassName;
+    };
+}> & import("../../../..").ButtonProps<HTMLElement> & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=IconButton.d.ts.map

package/types/examples/plasma_b2c/components/IconButton/IconButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/IconButton/IconButton.ts"],"names":[],"mappings":";AAOA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uGAA0B,CAAC"}

package/types/examples/plasma_web/components/IconButton/IconButton.config.d.ts

@@ -0,0 +1,38 @@
+export declare const config: {
+    defaults: {
+        view: string;
+        focused: string;
+        size: string;
+    };
+    variations: {
+        view: {
+            default: import("@linaria/core").LinariaClassName;
+            accent: import("@linaria/core").LinariaClassName;
+            secondary: import("@linaria/core").LinariaClassName;
+            clear: import("@linaria/core").LinariaClassName;
+            success: import("@linaria/core").LinariaClassName;
+            warning: import("@linaria/core").LinariaClassName;
+            critical: import("@linaria/core").LinariaClassName;
+            dark: import("@linaria/core").LinariaClassName;
+            black: import("@linaria/core").LinariaClassName;
+            white: import("@linaria/core").LinariaClassName;
+        };
+        size: {
+            l: import("@linaria/core").LinariaClassName;
+            lr: import("@linaria/core").LinariaClassName;
+            m: import("@linaria/core").LinariaClassName;
+            mr: import("@linaria/core").LinariaClassName;
+            s: import("@linaria/core").LinariaClassName;
+            sr: import("@linaria/core").LinariaClassName;
+            xs: import("@linaria/core").LinariaClassName;
+            xsr: import("@linaria/core").LinariaClassName;
+        };
+        disabled: {
+            true: import("@linaria/core").LinariaClassName;
+        };
+        focused: {
+            true: import("@linaria/core").LinariaClassName;
+        };
+    };
+};
+//# sourceMappingURL=IconButton.config.d.ts.map

package/types/examples/plasma_web/components/IconButton/IconButton.config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_web/components/IconButton/IconButton.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsNlB,CAAC"}

package/types/examples/plasma_web/components/IconButton/IconButton.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+export declare const IconButton: import("react").FunctionComponent<import("../../../../engines/types").PropsType<{
+    view: {
+        default: import("@linaria/core").LinariaClassName;
+        accent: import("@linaria/core").LinariaClassName;
+        secondary: import("@linaria/core").LinariaClassName;
+        clear: import("@linaria/core").LinariaClassName;
+        success: import("@linaria/core").LinariaClassName;
+        warning: import("@linaria/core").LinariaClassName;
+        critical: import("@linaria/core").LinariaClassName;
+        dark: import("@linaria/core").LinariaClassName;
+        black: import("@linaria/core").LinariaClassName;
+        white: import("@linaria/core").LinariaClassName;
+    };
+    size: {
+        l: import("@linaria/core").LinariaClassName;
+        lr: import("@linaria/core").LinariaClassName;
+        m: import("@linaria/core").LinariaClassName;
+        mr: import("@linaria/core").LinariaClassName;
+        s: import("@linaria/core").LinariaClassName;
+        sr: import("@linaria/core").LinariaClassName;
+        xs: import("@linaria/core").LinariaClassName;
+        xsr: import("@linaria/core").LinariaClassName;
+    };
+    disabled: {
+        true: import("@linaria/core").LinariaClassName;
+    };
+    focused: {
+        true: import("@linaria/core").LinariaClassName;
+    };
+}> & import("../../../..").ButtonProps<HTMLElement> & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=IconButton.d.ts.map