@salutejs/plasma-new-hope 0.78.0-canary.1195.8913931601.0 → 0.78.0-canary.1195.8939186735.0

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

@@ -37,18 +37,18 @@ const meta: Meta<typeof IconButton> = {
 export default meta;
 
 const getSizeForIcon = (size) => {
-    if (size === 'mr') {
-        return 'm';
-    }
-    if (size === 'lr') {
-        return 'l';
-    }
-    if (size === 'sr') {
-        return 's';
-    }
-    if (size === 'xsr') {
-        return 'xs';
+    const map = {
+        mr: 's',
+        lr: 's',
+        m: 's',
+        l: 's',
+        sr: 's',
+        xsr: 'xs',
+    };
+    if (map[size]) {
+        return map[size];
     }
+
     return size;
 };
 
@@ -61,5 +61,9 @@ export const Default: StoryObj<ComponentProps<typeof IconButton>> = {
         focused: true,
         isLoading: false,
     },
-    render: (args) => <IconButton {...args} icon={<IconChevronLeft size={getSizeForIcon(args.size)} />} />,
+    render: (args) => (
+        <IconButton {...args}>
+            <IconChevronLeft size={getSizeForIcon(args.size)} />
+        </IconButton>
+    ),
 };

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

@@ -2,7 +2,7 @@ var _templateObject;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { css } from 'styled-components';
 import styled from 'styled-components';
-import { applyEllipsis } from '../../mixins';
+import { applyEllipsis, addFocus } from '../../mixins';
 import { component, mergeConfig } from '../../engines';
 import { spinnerConfig, spinnerTokens } from '../Spinner';
 import { classes, tokens } from './Button.tokens';
@@ -31,4 +31,12 @@ export var Loader = /*#__PURE__*/styled.div.withConfig({
 })(["position:absolute;"]);
 export var StyledSpinner = /*#__PURE__*/styled(Spinner).withConfig({
   componentId: "plasma-new-hope__sc-9d9bqj-3"
-})(["", ":var(", ");", ":var(", ");"], spinnerTokens.size, tokens.buttonSpinnerSize, spinnerTokens.color, tokens.buttonSpinnerColor);
+})(["", ":var(", ");", ":var(", ");"], spinnerTokens.size, tokens.buttonSpinnerSize, spinnerTokens.color, tokens.buttonSpinnerColor);
+
+// INFO: Для возможности переиспользования стилей в других компонентах
+export var baseContent = /*#__PURE__*/"\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    box-sizing: border-box;\n    justify-content: center;\n\n    appearance: none;\n    border: none;\n    cursor: pointer;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n    a& {\n        text-decoration: none;\n    }\n\n    /* NOTE: \n        --plasma_computed-btn-br-radius is defined in Button.tsx\n    */\n    --plasma_private-btn-br: var(--plasma_computed-btn-br);\n    border-radius: var(--plasma_private-btn-br);\n\n    &&.".concat(String(classes.buttonSquare), " {\n        width: var(").concat(tokens.buttonHeight, ");\n        padding: 0;\n    }\n\n    color: var(").concat(tokens.buttonColor, ");\n    background-color: var(").concat(tokens.buttonBackgroundColor, ");\n\n    :hover {\n        color: var(").concat(tokens.buttonColorHover, ", var(").concat(tokens.buttonColor, "));\n        background-color: var(").concat(tokens.buttonBackgroundColorHover, ", var(").concat(tokens.buttonBackgroundColor, "));\n\n        scale: var(").concat(tokens.buttonScaleHover, ");\n    }\n\n    :active {\n        color: var(").concat(tokens.buttonColorActive, ", var(").concat(tokens.buttonColor, "));\n        background-color: var(").concat(tokens.buttonBackgroundColorActive, ", var(").concat(tokens.buttonBackgroundColor, "));\n\n        scale: var(").concat(tokens.buttonScaleActive, ");\n    }\n\n    height: var(").concat(tokens.buttonHeight, ");\n    width: var(").concat(tokens.buttonWidth, ");\n\n    /* TODO: #714 move these calc's to plasma-mapping | ds-generator and add Math.round() */\n    padding: 0 var(").concat(tokens.buttonPadding, ", calc(var(").concat(tokens.buttonHeight, ") * 1.618 / 4));\n\n    font-family: var(").concat(tokens.buttonFontFamily, ");\n    font-size: var(").concat(tokens.buttonFontSize, ");\n    font-style: var(").concat(tokens.buttonFontStyle, ");\n    font-weight: var(").concat(tokens.buttonFontWeight, ");\n    letter-spacing: var(").concat(tokens.buttonLetterSpacing, ");\n    line-height: var(").concat(tokens.buttonLineHeight, ");\n\n    /* TODO: #710 make it token API ? */\n    --plasma_private-btn-outline-size: var(--plasma-button-outline-size, 0.0625rem);\n\n    :focus {\n        outline: none;\n    }\n\n    ").concat(addFocus({
+  outlineOffset: '-0.125rem',
+  outlineSize: 'var(--plasma_private-btn-outline-size)',
+  outlineRadius: 'calc(0.125rem + var(--plasma_private-btn-br))',
+  outlineColor: "var(".concat(tokens.buttonFocusColor, ")")
+}), "\n\n    &[disabled] {\n        opacity: var(").concat(tokens.buttonDisabledOpacity, ");\n        cursor: not-allowed;\n\n        :hover,\n        :active {\n            scale: none;\n\n            color: var(").concat(tokens.buttonColor, ");\n            background-color: var(").concat(tokens.buttonBackgroundColor, ");\n        }\n    }\n\n    &.").concat(classes.fixedStretching, " {\n        width: var(").concat(tokens.buttonWidth, ");\n    }\n    &.").concat(classes.filledStretching, " {\n        width: 100%;\n    }\n    &.").concat(classes.autoStretching, " {\n        width: auto;\n    }\n");

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

@@ -1,58 +1,15 @@
-var _excluded = ["children", "view", "size", "icon", "isLoading", "loader", "pin", "disabled", "focused", "outlined", "className", "style"];
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import React, { forwardRef } from 'react';
-import { cx } from '../../utils';
-import { base, IconButtonStyled } from './IconButton.styles';
-import { classes } from './IconButton.tokens';
-import { base as viewCSS } from './variations/_view/base';
-import { base as sizeCSS } from './variations/_size/base';
-import { base as disabledCSS } from './variations/_disabled/base';
-import { base as focusedCSS } from './variations/_focused/base';
-export var iconButtonRoot = function iconButtonRoot(Root) {
-  return /*#__PURE__*/forwardRef(function (props, ref) {
-    var children = props.children,
-      view = props.view,
-      size = props.size,
-      icon = props.icon,
-      isLoading = props.isLoading,
-      loader = props.loader,
-      pin = props.pin,
-      disabled = props.disabled,
-      focused = props.focused,
-      outlined = props.outlined,
-      className = props.className,
-      style = props.style,
-      rest = _objectWithoutProperties(props, _excluded);
-    return /*#__PURE__*/React.createElement(Root, {
-      view: view,
-      size: size,
-      focused: focused,
-      disabled: disabled,
-      className: classes.iconButtonItem
-    }, /*#__PURE__*/React.createElement(IconButtonStyled, _extends({
-      view: view,
-      size: size,
-      loader: loader,
-      isLoading: isLoading,
-      pin: pin,
-      disabled: disabled,
-      focused: focused,
-      outlined: outlined,
-      ref: ref,
-      square: true // Временное решение
-      ,
-      stretching: "fixed" // Не работает не понятное почему
-      ,
-      className: cx(className),
-      style: style
-    }, rest), icon || children));
-  });
-};
+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: 'Button',
-  tag: 'div',
+  name: 'IconButton',
+  tag: 'button',
   layout: iconButtonRoot,
   base: base,
   variations: {
@@ -68,10 +25,17 @@ export var iconButtonConfig = {
     },
     focused: {
       css: focusedCSS
+    },
+    blurred: {
+      css: blurredCSS
+    },
+    stretching: {
+      css: stretchingCSS
     }
   },
   defaults: {
     view: 'secondary',
-    size: 'm'
+    size: 'm',
+    stretching: 'fixed'
   }
 };

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

@@ -1,11 +1,6 @@
-import styled from 'styled-components';
 import { css } from 'styled-components';
-import { component, mergeConfig } from '../../engines';
-import { buttonConfig, buttonTokens } from '../Button';
-import { tokens, classes } from './IconButton.tokens';
-var mergedConfig = /*#__PURE__*/mergeConfig(buttonConfig);
-var Button = /*#__PURE__*/component(mergedConfig);
-export var base = /*#__PURE__*/css(["&&.", "{display:inline-flex;}"], classes.iconButtonItem);
-export var IconButtonStyled = /*#__PURE__*/styled(Button).withConfig({
-  componentId: "plasma-new-hope__sc-bil9m7-0"
-})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");"], buttonTokens.buttonColor, tokens.iconButtonColor, buttonTokens.buttonBackgroundColor, tokens.iconButtonBackgroundColor, buttonTokens.buttonColorHover, tokens.iconButtonColorHover, buttonTokens.buttonBackgroundColorHover, tokens.iconButtonBackgroundColorHover, buttonTokens.buttonColorActive, tokens.iconButtonColorActive, buttonTokens.buttonBackgroundColorActive, tokens.iconButtonBackgroundColorActive, buttonTokens.buttonFontFamily, tokens.iconButtonFontFamily, buttonTokens.buttonFontSize, tokens.iconButtonFontSize, buttonTokens.buttonFontStyle, tokens.iconButtonFontStyle, buttonTokens.buttonFontWeight, tokens.iconButtonFontWeight, buttonTokens.buttonLetterSpacing, tokens.iconButtonLetterSpacing, buttonTokens.buttonLineHeight, tokens.iconButtonLineHeight, buttonTokens.buttonWidth, tokens.iconButtonWidth, buttonTokens.buttonHeight, tokens.iconButtonHeight, buttonTokens.buttonRadius, tokens.iconButtonRadius, buttonTokens.buttonDisabledOpacity, tokens.iconButtonDisabledOpacity, buttonTokens.buttonFocusColor, tokens.iconButtonFocusColor, buttonTokens.buttonSpinnerSize, tokens.iconButtonSpinnerSize, buttonTokens.buttonSpinnerColor, tokens.iconButtonSpinnerColor);
+import { buttonTokens } from '../Button';
+import { baseContent as buttonBase } from '../Button/Button.styles';
+import { tokens } from './IconButton.tokens';
+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

@@ -1,6 +1,3 @@
-export var classes = {
-  iconButtonItem: 'icon-button-item'
-};
 export var tokens = {
   iconButtonColor: '--plasma-icon-button-color',
   iconButtonBackgroundColor: '--plasma-icon-button-background-color',

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

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

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

@@ -9,7 +9,6 @@ export var config = {
   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),
-      primary: /*#__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),
@@ -25,7 +24,7 @@ export var config = {
       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.5remm;", ":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),
+      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)

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

@@ -37,18 +37,18 @@ const meta: Meta<typeof IconButton> = {
 export default meta;
 
 const getSizeForIcon = (size) => {
-    if (size === 'mr') {
-        return 'm';
-    }
-    if (size === 'lr') {
-        return 'l';
-    }
-    if (size === 'sr') {
-        return 's';
-    }
-    if (size === 'xsr') {
-        return 'xs';
+    const map = {
+        mr: 's',
+        lr: 's',
+        m: 's',
+        l: 's',
+        sr: 's',
+        xsr: 'xs',
+    };
+    if (map[size]) {
+        return map[size];
     }
+
     return size;
 };
 
@@ -61,5 +61,9 @@ export const Default: StoryObj<ComponentProps<typeof IconButton>> = {
         focused: true,
         isLoading: false,
     },
-    render: (args) => <IconButton {...args} icon={<IconChevronLeft size={getSizeForIcon(args.size)} />} />,
+    render: (args) => (
+        <IconButton {...args}>
+            <IconChevronLeft size={getSizeForIcon(args.size)} />
+        </IconButton>
+    ),
 };

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

@@ -9,7 +9,6 @@ export var config = {
   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),
-      primary: /*#__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),
@@ -25,7 +24,7 @@ export var config = {
       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.5remm;", ":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),
+      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)

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

@@ -37,18 +37,18 @@ const meta: Meta<typeof IconButton> = {
 export default meta;
 
 const getSizeForIcon = (size) => {
-    if (size === 'mr') {
-        return 'm';
-    }
-    if (size === 'lr') {
-        return 'l';
-    }
-    if (size === 'sr') {
-        return 's';
-    }
-    if (size === 'xsr') {
-        return 'xs';
+    const map = {
+        mr: 's',
+        lr: 's',
+        m: 's',
+        l: 's',
+        sr: 's',
+        xsr: 'xs',
+    };
+    if (map[size]) {
+        return map[size];
     }
+
     return size;
 };
 
@@ -61,5 +61,9 @@ export const Default: StoryObj<ComponentProps<typeof IconButton>> = {
         focused: true,
         isLoading: false,
     },
-    render: (args) => <IconButton {...args} icon={<IconChevronLeft size={getSizeForIcon(args.size)} />} />,
+    render: (args) => (
+        <IconButton {...args}>
+            <IconChevronLeft size={getSizeForIcon(args.size)} />
+        </IconButton>
+    ),
 };

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

@@ -1,11 +1,9 @@
-import React from 'react';
-import type { RootProps } from '../../engines';
-import type { IconButtonProps } from './IconButton.types';
-export declare const iconButtonRoot: (Root: RootProps<HTMLButtonElement, IconButtonProps>) => React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+/// <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: RootProps<HTMLButtonElement, IconButtonProps>) => React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+    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: {
@@ -21,10 +19,17 @@ export declare const iconButtonConfig: {
         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

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAI/C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAO1D,eAAO,MAAM,cAAc,SAAU,UAAU,iBAAiB,EAAE,eAAe,CAAC,8FAwC5E,CAAC;AAEP,eAAO,MAAM,gBAAgB;;;mBA1CQ,UAAU,iBAAiB,EAAE,eAAe,CAAC;;;;;;;;;;;;;;;;;;;;;CAkEjF,CAAC"}
+{"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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
+export declare const mappingOverride: string;
 export declare const base: import("@linaria/core").LinariaClassName;
-export declare const IconButtonStyled: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("../../engines/types").PropsType<import("../../engines/types").Variants> & import("../Button").ButtonProps<HTMLElement> & import("react").RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=IconButton.styles.d.ts.map

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

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

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

@@ -1,6 +1,3 @@
-export declare const classes: {
-    iconButtonItem: string;
-};
 export declare const tokens: {
     iconButtonColor: string;
     iconButtonBackgroundColor: string;

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

@@ -1 +1 @@
-{"version":3,"file":"IconButton.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/IconButton.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;CAEnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;CA4BlB,CAAC"}
+{"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

@@ -1,4 +1,3 @@
 export { iconButtonRoot, iconButtonConfig } from './IconButton';
-export type { IconButtonProps } from './IconButton.types';
-export { tokens as iconButtonTokens, classes as iconButtonClasses } from './IconButton.tokens';
+export { tokens as iconButtonTokens } from './IconButton.tokens';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +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,YAAY,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,MAAM,IAAI,gBAAgB,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}
+{"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

@@ -7,7 +7,6 @@ export declare const config: {
     variations: {
         view: {
             default: import("@linaria/core").LinariaClassName;
-            primary: import("@linaria/core").LinariaClassName;
             accent: import("@linaria/core").LinariaClassName;
             secondary: import("@linaria/core").LinariaClassName;
             clear: import("@linaria/core").LinariaClassName;

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

@@ -1 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8NlB,CAAC"}
+{"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

@@ -2,7 +2,6 @@
 export declare const IconButton: import("react").FunctionComponent<import("../../../../engines/types").PropsType<{
     view: {
         default: import("@linaria/core").LinariaClassName;
-        primary: import("@linaria/core").LinariaClassName;
         accent: import("@linaria/core").LinariaClassName;
         secondary: import("@linaria/core").LinariaClassName;
         clear: import("@linaria/core").LinariaClassName;
@@ -29,5 +28,5 @@ export declare const IconButton: import("react").FunctionComponent<import("../..
     focused: {
         true: import("@linaria/core").LinariaClassName;
     };
-}> & import("../../../../components/IconButton").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+}> & import("../../../..").ButtonProps<HTMLElement> & import("react").RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=IconButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/IconButton/IconButton.ts"],"names":[],"mappings":";AAOA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oHAA0B,CAAC"}
+{"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

@@ -7,7 +7,6 @@ export declare const config: {
     variations: {
         view: {
             default: import("@linaria/core").LinariaClassName;
-            primary: import("@linaria/core").LinariaClassName;
             accent: import("@linaria/core").LinariaClassName;
             secondary: import("@linaria/core").LinariaClassName;
             clear: import("@linaria/core").LinariaClassName;

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

@@ -1 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8NlB,CAAC"}
+{"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

@@ -2,7 +2,6 @@
 export declare const IconButton: import("react").FunctionComponent<import("../../../../engines/types").PropsType<{
     view: {
         default: import("@linaria/core").LinariaClassName;
-        primary: import("@linaria/core").LinariaClassName;
         accent: import("@linaria/core").LinariaClassName;
         secondary: import("@linaria/core").LinariaClassName;
         clear: import("@linaria/core").LinariaClassName;
@@ -29,5 +28,5 @@ export declare const IconButton: import("react").FunctionComponent<import("../..
     focused: {
         true: import("@linaria/core").LinariaClassName;
     };
-}> & import("../../../../components/IconButton").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+}> & import("../../../..").ButtonProps<HTMLElement> & import("react").RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=IconButton.d.ts.map

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

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

package/cjs/components/IconButton/IconButton.styles_12iyaye.css

@@ -1,2 +0,0 @@
-.b1ua728l.b1ua728l.icon-button-item{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}
-.i5roq7j{--plasma-button-color:var(--plasma-icon-button-color);--plasma-button-background-color:var(--plasma-icon-button-background-color);--plasma-button-color-hover:var(--plasma-icon-button-color-hover);--plasma-button-background-color-hover:var(--plasma-icon-button-background-color-hover);--plasma-button-color-active:var(--plasma-icon-button-color-active);--plasma-button-background-color-active:var(--plasma-icon-button-background-color-active);--plasma-button-font-family:var(--plasma-icon-button-font-family);--plasma-button-font-size:var(--plasma-icon-button-font-size);--plasma-button-font-style:var(--plasma-icon-button-font-style);--plasma-button-font-weight:var(--plasma-icon-button-font-weight);--plasma-button-letter-spacing:var(--plasma-icon-button-letter-spacing);--plasma-button-line-height:var(--plasma-icon-button-line-height);--plasma-button-width:var(--plasma-icon-button-width);--plasma-button-height:var(--plasma-icon-button-height);--plasma-button-radius:var(--plasma-icon-button-radius);--plasma-button-disabled-opacity:var(--plasma-icon-button-disabled-opacity);--plasma-button-focus-color:var(--plasma-icon-button-focus-color);--plasma-button-spinner-size:var(--plasma-icon-button-spinner-size);--plasma-button-spinner-color:var(--plasma-icon-button-spinner-color);}

package/cjs/components/IconButton/variations/_disabled/base.js

@@ -1,9 +0,0 @@
-import './base_x642ct.css';
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var base = "b15ha9z4";
-
-exports.base = base;
-//# sourceMappingURL=base.js.map

package/cjs/components/IconButton/variations/_disabled/base.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"base.js","sources":["../../../../../src/components/IconButton/variations/_disabled/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nexport const base = css``;\n"],"names":["base"],"mappings":";;;;AAEO,IAAMA,IAAI,GAAQ;;;;"}

package/cjs/components/IconButton/variations/_disabled/base_x642ct.css

@@ -1 +0,0 @@
-

package/cjs/components/IconButton/variations/_focused/base.js

@@ -1,9 +0,0 @@
-import './base_x642ct.css';
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var base = "b1pj3n57";
-
-exports.base = base;
-//# sourceMappingURL=base.js.map

package/cjs/components/IconButton/variations/_focused/base.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"base.js","sources":["../../../../../src/components/IconButton/variations/_focused/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nexport const base = css``;\n"],"names":["base"],"mappings":";;;;AAEO,IAAMA,IAAI,GAAQ;;;;"}

package/cjs/components/IconButton/variations/_focused/base_x642ct.css

@@ -1 +0,0 @@
-

package/cjs/components/IconButton/variations/_size/base.js

@@ -1,9 +0,0 @@
-import './base_x642ct.css';
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var base = "b4yj8r9";
-
-exports.base = base;
-//# sourceMappingURL=base.js.map

package/cjs/components/IconButton/variations/_size/base.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"base.js","sources":["../../../../../src/components/IconButton/variations/_size/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nexport const base = css``;\n"],"names":["base"],"mappings":";;;;AAEO,IAAMA,IAAI,GAAQ;;;;"}

package/cjs/components/IconButton/variations/_size/base_x642ct.css

@@ -1 +0,0 @@
-

package/cjs/components/IconButton/variations/_view/base.js

@@ -1,9 +0,0 @@
-import './base_x642ct.css';
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var base = "brdyrmj";
-
-exports.base = base;
-//# sourceMappingURL=base.js.map

package/cjs/components/IconButton/variations/_view/base.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"base.js","sources":["../../../../../src/components/IconButton/variations/_view/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nexport const base = css``;\n"],"names":["base"],"mappings":";;;;AAEO,IAAMA,IAAI,GAAQ;;;;"}

package/cjs/components/IconButton/variations/_view/base_x642ct.css

@@ -1 +0,0 @@
-

package/es/components/IconButton/IconButton.styles_12iyaye.css

@@ -1,2 +0,0 @@
-.b1ua728l.b1ua728l.icon-button-item{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}
-.i5roq7j{--plasma-button-color:var(--plasma-icon-button-color);--plasma-button-background-color:var(--plasma-icon-button-background-color);--plasma-button-color-hover:var(--plasma-icon-button-color-hover);--plasma-button-background-color-hover:var(--plasma-icon-button-background-color-hover);--plasma-button-color-active:var(--plasma-icon-button-color-active);--plasma-button-background-color-active:var(--plasma-icon-button-background-color-active);--plasma-button-font-family:var(--plasma-icon-button-font-family);--plasma-button-font-size:var(--plasma-icon-button-font-size);--plasma-button-font-style:var(--plasma-icon-button-font-style);--plasma-button-font-weight:var(--plasma-icon-button-font-weight);--plasma-button-letter-spacing:var(--plasma-icon-button-letter-spacing);--plasma-button-line-height:var(--plasma-icon-button-line-height);--plasma-button-width:var(--plasma-icon-button-width);--plasma-button-height:var(--plasma-icon-button-height);--plasma-button-radius:var(--plasma-icon-button-radius);--plasma-button-disabled-opacity:var(--plasma-icon-button-disabled-opacity);--plasma-button-focus-color:var(--plasma-icon-button-focus-color);--plasma-button-spinner-size:var(--plasma-icon-button-spinner-size);--plasma-button-spinner-color:var(--plasma-icon-button-spinner-color);}