@salutejs/plasma-new-hope 0.78.0-canary.1194.8928682263.0 → 0.78.0-canary.1195.8924860991.0

package/es/index.css

@@ -14,6 +14,8 @@
 .Button_styles_uqvh6u_l4dfhbg__b7cda4d5{position:absolute;}
 .Button_styles_uqvh6u_srdlazt__b7cda4d5{--plasma-spinner-size:var(--plasma-button-spinner-size);--plasma-spinner-color:var(--plasma-button-spinner-color);}
 
+.IconButton_styles_1hknr37_b1ua728l__f14249fc{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);--plasma_private-btn-br:var(--plasma_computed-btn-br);border-radius:var(--plasma_private-btn-br);color:var(--plasma-button-color);background-color:var(--plasma-button-background-color);height:var(--plasma-button-height);width:var(--plasma-button-width);padding:0 var(--plasma-button-padding,calc(var(--plasma-button-height) * 1.618 / 4));font-family:var(--plasma-button-font-family);font-size:var(--plasma-button-font-size);font-style:var(--plasma-button-font-style);font-weight:var(--plasma-button-font-weight);-webkit-letter-spacing:var(--plasma-button-letter-spacing);-moz-letter-spacing:var(--plasma-button-letter-spacing);-ms-letter-spacing:var(--plasma-button-letter-spacing);letter-spacing:var(--plasma-button-letter-spacing);line-height:var(--plasma-button-line-height);--plasma_private-btn-outline-size:var(--plasma-button-outline-size,0.0625rem);position:relative;--plasma-button-padding:0;--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);}a.IconButton_styles_1hknr37_b1ua728l__f14249fc{-webkit-text-decoration:none;text-decoration:none;}.IconButton_styles_1hknr37_b1ua728l__f14249fc.IconButton_styles_1hknr37_b1ua728l__f14249fc.IconButton_styles_1hknr37_buttonSquare__f14249fc{width:var(--plasma-button-height);padding:0;}.IconButton_styles_1hknr37_b1ua728l__f14249fc:hover{color:var(--plasma-button-color-hover,var(--plasma-button-color));background-color:var(--plasma-button-background-color-hover,var(--plasma-button-background-color));scale:var(--plasma-button-scale-hover);}.IconButton_styles_1hknr37_b1ua728l__f14249fc:active{color:var(--plasma-button-color-active,var(--plasma-button-color));background-color:var(--plasma-button-background-color-active,var(--plasma-button-background-color));scale:var(---plasma-button-scale-active);}.IconButton_styles_1hknr37_b1ua728l__f14249fc:focus{outline:none;}.IconButton_styles_1hknr37_b1ua728l__f14249fc::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:var(--plasma_private-btn-outline-size) solid transparent;border-radius:calc(0.125rem + var(--plasma_private-btn-br));-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.IconButton_styles_1hknr37_b1ua728l__f14249fc.IconButton_styles_1hknr37_focusVisible__f14249fc:focus::before,.IconButton_styles_1hknr37_b1ua728l__f14249fc[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 var(--plasma_private-btn-outline-size) var(--plasma-button-focus-color);}.IconButton_styles_1hknr37_b1ua728l__f14249fc[disabled]{opacity:var(--plasma-button-disabled-opacity);cursor:not-allowed;}.IconButton_styles_1hknr37_b1ua728l__f14249fc[disabled]:hover,.IconButton_styles_1hknr37_b1ua728l__f14249fc[disabled]:active{scale:none;color:var(--plasma-button-color);background-color:var(--plasma-button-background-color);}.IconButton_styles_1hknr37_b1ua728l__f14249fc.IconButton_styles_1hknr37_buttonStretchingFixed__f14249fc{width:var(--plasma-button-width);}.IconButton_styles_1hknr37_b1ua728l__f14249fc.IconButton_styles_1hknr37_buttonStretchingFilled__f14249fc{width:100%;}.IconButton_styles_1hknr37_b1ua728l__f14249fc.IconButton_styles_1hknr37_buttonStretchingAuto__f14249fc{width:auto;}
+
 .base_6k3uip_b7jdqtc__e6616a37.base_6k3uip_buttonGroupOverrideStyles__e6616a37 .base_6k3uip_buttonItem__e6616a37{--plasma-button-color:var(--plasma-button-group-item-color);--plasma-button-background-color:var(--plasma-button-group-item-background-color);--plasma-button-color-hover:var(--plasma-button-group-item-color-hover);--plasma-button-background-color-hover:var(--plasma-button-group-item-background-color-hover);--plasma-button-color-active:var(--plasma-button-group-item-color-active);--plasma-button-background-color-active:var(--plasma-button-group-item-background-color-active);}
 
 .base_xxxewc_bc0nfse__e70323a1.base_xxxewc_buttonGroupOverrideStyles__e70323a1 .base_xxxewc_buttonItem__e70323a1{--plasma-button-height:var(--plasma-button-group-item-height);--plasma-button-padding:var(--plasma-button-group-item-padding);---plasma-button-scale-active:var(--plasma-button-group-item-scale-active);--plasma-button-scale-hover:var(--plasma-button-group-item-scale-hover);--plasma-button-font-family:var(--plasma-button-group-item-font-family);--plasma-button-font-size:var(--plasma-button-group-item-font-size);--plasma-button-font-style:var(--plasma-button-group-item-font-style);--plasma-button-font-weight:var(--plasma-button-group-item-font-weight);--plasma-button-letter-spacing:var(--plasma-button-group-item-letter-spacing);--plasma-button-line-height:var(--plasma-button-group-item-line-height);}
@@ -517,28 +519,3 @@
 .Toolbar_styles_iomsh3_bd5aerk__291bdbec{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;box-sizing:border-box;border-radius:var(--plasma-toolbar-border-radius);background:var(--plasma-toolbar-background);padding:var(--plasma-toolbar-padding);}.Toolbar_styles_iomsh3_bd5aerk__291bdbec.Toolbar_styles_iomsh3_toolbarShadow__291bdbec{box-shadow:var(--plasma-toolbar-box-shadow);}.Toolbar_styles_iomsh3_bd5aerk__291bdbec.Toolbar_styles_iomsh3_toolbarVertical__291bdbec{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:var(--plasma-toolbar-size);}.Toolbar_styles_iomsh3_bd5aerk__291bdbec.Toolbar_styles_iomsh3_toolbarHorizontal__291bdbec{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;height:var(--plasma-toolbar-size);}.Toolbar_styles_iomsh3_bd5aerk__291bdbec.Toolbar_styles_iomsh3_toolbarVertical__291bdbec .Toolbar_styles_iomsh3_plasmaDivider__291bdbec{width:var(--plasma-toolbar-divider-size);height:0.063rem;margin:var(--plasma-toolbar-divider-offset) 0;}.Toolbar_styles_iomsh3_bd5aerk__291bdbec.Toolbar_styles_iomsh3_toolbarHorizontal__291bdbec .Toolbar_styles_iomsh3_plasmaDivider__291bdbec{width:0.063rem;height:var(--plasma-toolbar-divider-size);margin:0 var(--plasma-toolbar-divider-offset);}
 
 .ToolbarDivider_styles_1ypqhb1_mcdkovg__81732880{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;--plasma-divider-background:var(--plasma-toolbar-divider-color);--plasma-divider-border-radius:var(--plasma-toolbar-divider-border-radius);}
-
-.SliderBase_styles_7is2ll_s33crq1__0c0959e2{-webkit-flex:1;-ms-flex:1;flex:1;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;height:var(--plasma-slider-height);}
-.SliderBase_styles_7is2ll_rnaoqfb__0c0959e2{height:100%;}
-.SliderBase_styles_7is2ll_r1bro5xo__0c0959e2{position:relative;top:50%;height:var(--plasma-slider-rail-height);border-radius:var(--plasma-slider-rail-border-radius);background-color:var(--plasma-slider-rail-background-color);overflow:hidden;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);}
-.SliderBase_styles_7is2ll_fdg7yhg__0c0959e2{position:absolute;height:100%;top:0;left:0;background:var(--plasma-slider-fill-color);width:0;}
-
-.Single_styles_1r9f1e0_l1p4kc08__4db690dd{color:var(--plasma-slider-label-color);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--plasma-slider-label-wrapper-gap);}
-
-.Single_styles_1r9f1e0_lozb535__4db690dd{font-family:var(--plasma-slider-label-font-family);font-size:var(--plasma-slider-label-font-size);font-style:var(--plasma-slider-label-font-style);font-weight:var(--plasma-slider-label-font-weight);-webkit-letter-spacing:var(--plasma-slider-label-letter-spacing);-moz-letter-spacing:var(--plasma-slider-label-letter-spacing);-ms-letter-spacing:var(--plasma-slider-label-letter-spacing);letter-spacing:var(--plasma-slider-label-letter-spacing);line-height:var(--plasma-slider-label-line-height);}
-.Single_styles_1r9f1e0_s1w9icbd__4db690dd{color:var(--plasma-slider-range-value-color);font-family:var(--plasma-slider-range-value-font-family);font-size:var(--plasma-slider-range-value-font-size);font-style:var(--plasma-slider-range-value-font-style);font-weight:var(--plasma-slider-range-value-font-weight);-webkit-letter-spacing:var(--plasma-slider-range-value-letter-spacing);-moz-letter-spacing:var(--plasma-slider-range-value-letter-spacing);-ms-letter-spacing:var(--plasma-slider-range-value-letter-spacing);letter-spacing:var(--plasma-slider-range-value-letter-spacing);line-height:var(--plasma-slider-range-value-line-height);-webkit-transition:opacity 0.1s ease-in-out;transition:opacity 0.1s ease-in-out;}.Single_styles_1r9f1e0_s1w9icbd__4db690dd.Single_styles_1r9f1e0_sliderHideMinValue__4db690dd,.Single_styles_1r9f1e0_s1w9icbd__4db690dd.Single_styles_1r9f1e0_sliderHideMaxValue__4db690dd{opacity:0;}.Single_styles_1r9f1e0_s1w9icbd__4db690dd.Single_styles_1r9f1e0_sliderActiveRangeValue__4db690dd{color:var(--plasma-slider-label-color);}
-.Single_styles_1r9f1e0_s1d2sfgl__4db690dd{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;}.Single_styles_1r9f1e0_s1d2sfgl__4db690dd.Single_styles_1r9f1e0_sliderRangeValuesPlacementOuter__4db690dd .Single_styles_1r9f1e0_s1w9icbd__4db690dd{position:absolute;bottom:var(--plasma-slider-range-value-bottom-offset);left:0;}.Single_styles_1r9f1e0_s1d2sfgl__4db690dd.Single_styles_1r9f1e0_sliderRangeValuesPlacementOuter__4db690dd .Single_styles_1r9f1e0_s1w9icbd__4db690dd.Single_styles_1r9f1e0_sliderMaxRangeValue__4db690dd{left:unset;right:0;}.Single_styles_1r9f1e0_s1d2sfgl__4db690dd.Single_styles_1r9f1e0_sliderRangeValuesPlacementInner__4db690dd{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.Single_styles_1r9f1e0_s1d2sfgl__4db690dd.Single_styles_1r9f1e0_sliderRangeValuesPlacementInner__4db690dd .Single_styles_1r9f1e0_s1w9icbd__4db690dd{margin-right:var(--plasma-slider-range-min-value-margin);}.Single_styles_1r9f1e0_s1d2sfgl__4db690dd.Single_styles_1r9f1e0_sliderRangeValuesPlacementInner__4db690dd .Single_styles_1r9f1e0_s1w9icbd__4db690dd.Single_styles_1r9f1e0_sliderMaxRangeValue__4db690dd{margin-right:0;margin-left:var(--plasma-slider-range-max-value-margin);}
-.Single_styles_1r9f1e0_ss3ujqx__4db690dd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;opacity:var(--plasma-slider-disabled-opacity);}.Single_styles_1r9f1e0_ss3ujqx__4db690dd.Single_styles_1r9f1e0_sliderLabelPlacementOuter__4db690dd{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.Single_styles_1r9f1e0_ss3ujqx__4db690dd.Single_styles_1r9f1e0_sliderLabelPlacementOuter__4db690dd .Single_styles_1r9f1e0_l1p4kc08__4db690dd{margin-bottom:var(--plasma-slider-label-wrapper-margin-bottom);}.Single_styles_1r9f1e0_ss3ujqx__4db690dd.Single_styles_1r9f1e0_sliderLabelPlacementInner__4db690dd .Single_styles_1r9f1e0_l1p4kc08__4db690dd{margin-right:var(--plasma-slider-label-wrapper-margin-right);}
-
-.Double_styles_1jhda4u_lcs82cd__5dc981f4{color:var(--plasma-slider-label-color);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--plasma-slider-label-wrapper-gap);margin-bottom:var(--plasma-slider-label-wrapper-margin-bottom);}
-
-.Double_styles_1jhda4u_l1at2q9b__5dc981f4{font-family:var(--plasma-slider-label-font-family);font-size:var(--plasma-slider-label-font-size);font-style:var(--plasma-slider-label-font-style);font-weight:var(--plasma-slider-label-font-weight);-webkit-letter-spacing:var(--plasma-slider-label-letter-spacing);-moz-letter-spacing:var(--plasma-slider-label-letter-spacing);-ms-letter-spacing:var(--plasma-slider-label-letter-spacing);letter-spacing:var(--plasma-slider-label-letter-spacing);line-height:var(--plasma-slider-label-line-height);}
-.Double_styles_1jhda4u_i11dc2og__5dc981f4{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--plasma-slider-text-field-wrapper-gap);margin-top:var(--plasma-slider-double-wrapper-gap);}
-.Double_styles_1jhda4u_s4zvp7i__5dc981f4{-webkit-flex:1;-ms-flex:1;flex:1;--plasma-textfield-color:var(--plasma-slider-text-field-color);--plasma-textfield-bg-color:var(--plasma-slider-text-field-background-color);--plasma-textfield__caret-color:var(--plasma-slider-text-field-caret-color);--plasma-textfield__placeholder-color:var(--plasma-slider-text-field-placeholder-color);--plasma-textfield-disabled-opacity:var(--plasma-slider-disabled-opacity);--plasma-textfield-height:var(--plasma-slider-text-field-height);--plasma-textfield-padding:var(--plasma-slider-text-field-padding);--plasma-textfield-border-radius:var(--plasma-slider-text-field-border-radius);--plasma-textfield-font-family:var(--plasma-slider-text-field-font-family);--plasma-textfield-font-size:var(--plasma-slider-text-field-font-size);--plasma-textfield-font-style:var(--plasma-slider-text-field-font-style);--plasma-textfield-font-weight:var(--plasma-slider-text-field-font-weight);--plasma-textfield-letter-spacing:var(--plasma-slider-text-field-letter-spacing);--plasma-textfield-line-height:var(--plasma-slider-text-field-line-height);}.Double_styles_1jhda4u_s4zvp7i__5dc981f4.Double_styles_1jhda4u_sliderFirstTextField__5dc981f4 > div{border-top-right-radius:0;border-bottom-right-radius:0;}.Double_styles_1jhda4u_s4zvp7i__5dc981f4.Double_styles_1jhda4u_sliderSecondTextField__5dc981f4 > div{border-top-left-radius:0;border-bottom-left-radius:0;}.Double_styles_1jhda4u_s4zvp7i__5dc981f4 input:focus,.Double_styles_1jhda4u_s4zvp7i__5dc981f4.Double_styles_1jhda4u_sliderTextFieldActive__5dc981f4{--plasma-textfield-color:var(--plasma-slider-text-field-focus-color);}
-.Double_styles_1jhda4u_d3kvcjo__5dc981f4{opacity:var(--plasma-slider-disabled-opacity);}
-
-
-.Handle_styles_16a5sl_hhwq33d__69fb82a5{cursor:pointer;position:absolute;z-index:1;top:0;left:0;}
-.Handle_styles_16a5sl_shurctf__69fb82a5{position:absolute;z-index:1;top:var(--plasma-slider-current-value-top-offset);text-align:center;width:100%;margin-left:-2px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;font-family:var(--plasma-slider-current-value-font-family);font-size:var(--plasma-slider-current-value-font-size);font-style:var(--plasma-slider-current-value-font-style);font-weight:var(--plasma-slider-current-value-font-weight);-webkit-letter-spacing:var(--plasma-slider-current-value-letter-spacing);-moz-letter-spacing:var(--plasma-slider-current-value-letter-spacing);-ms-letter-spacing:var(--plasma-slider-current-value-letter-spacing);letter-spacing:var(--plasma-slider-current-value-letter-spacing);line-height:var(--plasma-slider-current-value-line-height);}
-
-.Thumb_styles_zwgsh8_tqbdf8b__6eb13971{width:var(--plasma-slider-thumb-size);height:var(--plasma-slider-thumb-size);position:relative;left:-2px;top:-2px;border-radius:50%;box-sizing:border-box;background:var(--plasma-slider-thumb-background-color);margin:2px;-webkit-transition:border-color 0.1s ease-in-out;transition:border-color 0.1s ease-in-out;}.Thumb_styles_zwgsh8_tqbdf8b__6eb13971:after{background:var(--plasma-slider-thumb-border-color);margin:-2px;content:'';position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;border-radius:inherit;}.Thumb_styles_zwgsh8_tqbdf8b__6eb13971:not([disabled]):hover:after,.Thumb_styles_zwgsh8_tqbdf8b__6eb13971:not([disabled]):active:after{background:var(--plasma-slider-thumb-focus-border-color);}.Thumb_styles_zwgsh8_tqbdf8b__6eb13971:focus{outline:none;}.Thumb_styles_zwgsh8_tqbdf8b__6eb13971:not([disabled]).Thumb_styles_zwgsh8_focusVisible__6eb13971,.Thumb_styles_zwgsh8_tqbdf8b__6eb13971:not([disabled])[data-focus-visible-added]{border-color:var(--plasma-slider-thumb-focus-border-color);}

package/es/index.js

@@ -13,10 +13,11 @@ export { useUniqId } from './hooks/useUniqId.js';
 export { usePreviousValue } from './hooks/usePreviousValue.js';
 export { useForceUpdate } from './hooks/useForceUpdate.js';
 export { useDidMountEffect } from './hooks/useDidMountEffect.js';
-export { useIsomorphicLayoutEffect } from './hooks/useIsomorphicLayoutEffect.js';
 export { composableStyle, cx } from './utils/index.js';
 export { buttonConfig, buttonRoot } from './components/Button/Button.js';
 export { classes as buttonClasses, tokens as buttonTokens } from './components/Button/Button.tokens.js';
+export { iconButtonConfig, iconButtonRoot } from './components/IconButton/IconButton.js';
+export { tokens as iconButtonTokens } from './components/IconButton/IconButton.tokens.js';
 export { buttonGroupConfig, buttonGroupRoot } from './components/ButtonGroup/ButtonGroup.js';
 export { classes as buttonGroupClasses, tokens as buttonGroupTokens } from './components/ButtonGroup/ButtonGroup.tokens.js';
 export { chipConfig, chipRoot } from './components/Chip/Chip.js';
@@ -157,14 +158,7 @@ export { classes as dividerClasses, tokens as dividerTokens } from './components
 export { toolbarConfig, toolbarRoot } from './components/Toolbar/Toolbar.js';
 export { tokens as toolbarTokens } from './components/Toolbar/Toolbar.tokens.js';
 export { toolbarDividerConfig, toolbarDividerRoot } from './components/Toolbar/ui/ToolbarDivider/ToolbarDivider.js';
-export { sliderConfig, sliderRoot } from './components/Slider/Slider.js';
-export { tokens as sliderTokens } from './components/Slider/Slider.tokens.js';
-import 'react';
-import 'react-draggable';
-export { ThumbBase } from './components/Slider/ui/Thumb/Thumb.styles.js';
-import '@linaria/react';
 export { component, mergeConfig } from './engines/common.js';
-export { canUseDOM } from './utils/canUseDOM.js';
 export { extractTextFrom } from './utils/extractTextFrom.js';
 export { getSizeValueFromProp } from './utils/getSizeValueFromProp.js';
 export { IS_REACT_18, safeUseId } from './utils/react.js';

package/es/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/es/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/utils/index.ts"],"sourcesContent":["import { CSSProperties } from '@linaria/core';\n\nexport { canUseDOM } from './canUseDOM';\nexport { extractTextFrom } from './extractTextFrom';\nexport { getSizeValueFromProp } from './getSizeValueFromProp';\nexport { IS_REACT_18, safeUseId } from './react';\nexport { isNumber } from './isNumber';\n\nexport const cx = (...classes: (string | undefined)[]) => classes.filter((classItem) => classItem).join(' ');\n\nexport const composableStyle = (s: TemplateStringsArray, ...expr: Array<string | number | CSSProperties>): string => {\n    let res = '';\n    for (let i = 0; i < Math.max(s.length, expr.length); ++i) {\n        res += s[i] ?? '';\n        res += expr[i] ?? '';\n    }\n\n    return res;\n};\n"],"names":["cx","_len","arguments","length","classes","Array","_key","filter","classItem","join","composableStyle","s","res","i","Math","max","_s$i","_ref","undefined"],"mappings":";;;AAQaA,IAAAA,EAAE,GAAG,SAALA,EAAEA,GAAA;AAAA,EAAA,KAAA,IAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAOC,OAAO,GAAAC,IAAAA,KAAA,CAAAJ,IAAA,GAAAK,IAAA,GAAA,CAAA,EAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA,EAAA,EAAA;AAAPF,IAAAA,OAAO,CAAAE,IAAA,CAAAJ,GAAAA,SAAA,CAAAI,IAAA,CAAA,CAAA;AAAA,GAAA;AAAA,EAAA,OAA6BF,OAAO,CAACG,MAAM,CAAC,UAACC,SAAS,EAAA;AAAA,IAAA,OAAKA,SAAS,CAAA;AAAA,GAAA,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC,CAAA;AAAA,EAAA;IAE/FC,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,CAAuB,EAA8D;EACjH,IAAIC,GAAG,GAAG,EAAE,CAAA;EACZ,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGC,IAAI,CAACC,GAAG,CAACJ,CAAC,CAACR,MAAM,EAAAD,SAAA,CAAAC,MAAA,IAAA,CAAA,GAAA,CAAA,GAAAD,SAAA,CAAAC,MAAA,GAAA,CAAa,CAAC,EAAE,EAAEU,CAAC,EAAE;IAAA,IAAAG,IAAA,EAAAC,IAAA,CAAA;AACtDL,IAAAA,GAAG,IAAAI,CAAAA,IAAA,GAAIL,CAAC,CAACE,CAAC,CAAC,MAAA,IAAA,IAAAG,IAAA,KAAA,KAAA,CAAA,GAAAA,IAAA,GAAI,EAAE,CAAA;IACjBJ,GAAG,IAAA,CAAAK,IAAA,GAASJ,CAAC,YAAAX,SAAA,CAAAC,MAAA,IAADU,CAAC,OAAAK,SAAA,GAAAhB,SAAA,CAADW,CAAC,mBAAAI,IAAA,KAAA,KAAA,CAAA,GAAAA,IAAA,GAAK,EAAE,CAAA;AACxB,GAAA;AAEA,EAAA,OAAOL,GAAG,CAAA;AACd;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/utils/index.ts"],"sourcesContent":["import { CSSProperties } from '@linaria/core';\n\nexport { extractTextFrom } from './extractTextFrom';\nexport { getSizeValueFromProp } from './getSizeValueFromProp';\nexport { IS_REACT_18, safeUseId } from './react';\nexport { isNumber } from './isNumber';\n\nexport const cx = (...classes: (string | undefined)[]) => classes.filter((classItem) => classItem).join(' ');\n\nexport const composableStyle = (s: TemplateStringsArray, ...expr: Array<string | number | CSSProperties>): string => {\n    let res = '';\n    for (let i = 0; i < Math.max(s.length, expr.length); ++i) {\n        res += s[i] ?? '';\n        res += expr[i] ?? '';\n    }\n\n    return res;\n};\n"],"names":["cx","_len","arguments","length","classes","Array","_key","filter","classItem","join","composableStyle","s","res","i","Math","max","_s$i","_ref","undefined"],"mappings":";;;AAOaA,IAAAA,EAAE,GAAG,SAALA,EAAEA,GAAA;AAAA,EAAA,KAAA,IAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAOC,OAAO,GAAAC,IAAAA,KAAA,CAAAJ,IAAA,GAAAK,IAAA,GAAA,CAAA,EAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA,EAAA,EAAA;AAAPF,IAAAA,OAAO,CAAAE,IAAA,CAAAJ,GAAAA,SAAA,CAAAI,IAAA,CAAA,CAAA;AAAA,GAAA;AAAA,EAAA,OAA6BF,OAAO,CAACG,MAAM,CAAC,UAACC,SAAS,EAAA;AAAA,IAAA,OAAKA,SAAS,CAAA;AAAA,GAAA,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC,CAAA;AAAA,EAAA;IAE/FC,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,CAAuB,EAA8D;EACjH,IAAIC,GAAG,GAAG,EAAE,CAAA;EACZ,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGC,IAAI,CAACC,GAAG,CAACJ,CAAC,CAACR,MAAM,EAAAD,SAAA,CAAAC,MAAA,IAAA,CAAA,GAAA,CAAA,GAAAD,SAAA,CAAAC,MAAA,GAAA,CAAa,CAAC,EAAE,EAAEU,CAAC,EAAE;IAAA,IAAAG,IAAA,EAAAC,IAAA,CAAA;AACtDL,IAAAA,GAAG,IAAAI,CAAAA,IAAA,GAAIL,CAAC,CAACE,CAAC,CAAC,MAAA,IAAA,IAAAG,IAAA,KAAA,KAAA,CAAA,GAAAA,IAAA,GAAI,EAAE,CAAA;IACjBJ,GAAG,IAAA,CAAAK,IAAA,GAASJ,CAAC,YAAAX,SAAA,CAAAC,MAAA,IAADU,CAAC,OAAAK,SAAA,GAAAhB,SAAA,CAADW,CAAC,mBAAAI,IAAA,KAAA,KAAA,CAAA,GAAAA,IAAA,GAAK,EAAE,CAAA;AACxB,GAAA;AAEA,EAAA,OAAOL,GAAG,CAAA;AACd;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/plasma-new-hope",
-  "version": "0.78.0-canary.1194.8928682263.0",
+  "version": "0.78.0-canary.1195.8924860991.0",
   "description": "Salute Design System blueprint",
   "main": "cjs/index.js",
   "module": "es/index.js",
@@ -87,7 +87,6 @@
     "default-browser-id": "2.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-draggable": "4.4.3",
     "rollup": "^3.28.0",
     "storybook": "7.6.17",
     "styled-components": "5.3.1",
@@ -100,9 +99,8 @@
     "@popperjs/core": "2.11.8",
     "@salutejs/plasma-core": "1.159.0",
     "focus-visible": "5.2.0",
-    "react-draggable": "4.4.3",
     "react-popper": "2.3.0",
     "storeon": "3.1.5"
   },
-  "gitHead": "616a76b0b6ec5b6d8698b135fb7a46759ec99d80"
+  "gitHead": "ed82cea053cbdda95006aeda1bbac67fb1cba80f"
 }

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

@@ -4,7 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.base = exports.StyledSpinner = exports.Loader = exports.LoadWrap = exports.ButtonText = void 0;
+exports.baseContent = exports.base = exports.StyledSpinner = exports.Loader = exports.LoadWrap = exports.ButtonText = void 0;
 var _styledComponents = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("styled-components"));
 var _mixins = /*#__PURE__*/require("../../mixins");
 var _engines = /*#__PURE__*/require("../../engines");
@@ -38,4 +38,12 @@ var Loader = exports.Loader = /*#__PURE__*/_styledComponents["default"].div.with
 })(["position:absolute;"]);
 var StyledSpinner = exports.StyledSpinner = /*#__PURE__*/(0, _styledComponents["default"])(Spinner).withConfig({
   componentId: "plasma-new-hope__sc-9d9bqj-3"
-})(["", ":var(", ");", ":var(", ");"], _Spinner.spinnerTokens.size, _Button.tokens.buttonSpinnerSize, _Spinner.spinnerTokens.color, _Button.tokens.buttonSpinnerColor);
+})(["", ":var(", ");", ":var(", ");"], _Spinner.spinnerTokens.size, _Button.tokens.buttonSpinnerSize, _Spinner.spinnerTokens.color, _Button.tokens.buttonSpinnerColor);
+
+// INFO: Для возможности переиспользования стилей в других компонентах
+var baseContent = exports.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(_Button.classes.buttonSquare), " {\n        width: var(").concat(_Button.tokens.buttonHeight, ");\n        padding: 0;\n    }\n\n    color: var(").concat(_Button.tokens.buttonColor, ");\n    background-color: var(").concat(_Button.tokens.buttonBackgroundColor, ");\n\n    :hover {\n        color: var(").concat(_Button.tokens.buttonColorHover, ", var(").concat(_Button.tokens.buttonColor, "));\n        background-color: var(").concat(_Button.tokens.buttonBackgroundColorHover, ", var(").concat(_Button.tokens.buttonBackgroundColor, "));\n\n        scale: var(").concat(_Button.tokens.buttonScaleHover, ");\n    }\n\n    :active {\n        color: var(").concat(_Button.tokens.buttonColorActive, ", var(").concat(_Button.tokens.buttonColor, "));\n        background-color: var(").concat(_Button.tokens.buttonBackgroundColorActive, ", var(").concat(_Button.tokens.buttonBackgroundColor, "));\n\n        scale: var(").concat(_Button.tokens.buttonScaleActive, ");\n    }\n\n    height: var(").concat(_Button.tokens.buttonHeight, ");\n    width: var(").concat(_Button.tokens.buttonWidth, ");\n\n    /* TODO: #714 move these calc's to plasma-mapping | ds-generator and add Math.round() */\n    padding: 0 var(").concat(_Button.tokens.buttonPadding, ", calc(var(").concat(_Button.tokens.buttonHeight, ") * 1.618 / 4));\n\n    font-family: var(").concat(_Button.tokens.buttonFontFamily, ");\n    font-size: var(").concat(_Button.tokens.buttonFontSize, ");\n    font-style: var(").concat(_Button.tokens.buttonFontStyle, ");\n    font-weight: var(").concat(_Button.tokens.buttonFontWeight, ");\n    letter-spacing: var(").concat(_Button.tokens.buttonLetterSpacing, ");\n    line-height: var(").concat(_Button.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((0, _mixins.addFocus)({
+  outlineOffset: '-0.125rem',
+  outlineSize: 'var(--plasma_private-btn-outline-size)',
+  outlineRadius: 'calc(0.125rem + var(--plasma_private-btn-br))',
+  outlineColor: "var(".concat(_Button.tokens.buttonFocusColor, ")")
+}), "\n\n    &[disabled] {\n        opacity: var(").concat(_Button.tokens.buttonDisabledOpacity, ");\n        cursor: not-allowed;\n\n        :hover,\n        :active {\n            scale: none;\n\n            color: var(").concat(_Button.tokens.buttonColor, ");\n            background-color: var(").concat(_Button.tokens.buttonBackgroundColor, ");\n        }\n    }\n\n    &.").concat(_Button.classes.fixedStretching, " {\n        width: var(").concat(_Button.tokens.buttonWidth, ");\n    }\n    &.").concat(_Button.classes.filledStretching, " {\n        width: 100%;\n    }\n    &.").concat(_Button.classes.autoStretching, " {\n        width: auto;\n    }\n");

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

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.iconButtonRoot = exports.iconButtonConfig = void 0;
+var _Button = /*#__PURE__*/require("../Button");
+var _base = /*#__PURE__*/require("../Button/variations/_view/base");
+var _base2 = /*#__PURE__*/require("../Button/variations/_size/base");
+var _base3 = /*#__PURE__*/require("../Button/variations/_disabled/base");
+var _base4 = /*#__PURE__*/require("../Button/variations/_focused/base");
+var _base5 = /*#__PURE__*/require("../Button/variations/_blurred/base");
+var _base6 = /*#__PURE__*/require("../Button/variations/_stretching/base");
+var _IconButton = /*#__PURE__*/require("./IconButton.styles");
+var iconButtonRoot = exports.iconButtonRoot = _Button.buttonRoot;
+var iconButtonConfig = exports.iconButtonConfig = {
+  name: 'IconButton',
+  tag: 'button',
+  layout: iconButtonRoot,
+  base: _IconButton.base,
+  variations: {
+    view: {
+      css: _base.base
+    },
+    size: {
+      css: _base2.base
+    },
+    disabled: {
+      css: _base3.base,
+      attrs: true
+    },
+    focused: {
+      css: _base4.base
+    },
+    blurred: {
+      css: _base5.base
+    },
+    stretching: {
+      css: _base6.base
+    }
+  },
+  defaults: {
+    view: 'secondary',
+    size: 'm',
+    stretching: 'fixed'
+  }
+};

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mappingOverride = exports.base = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _Button = /*#__PURE__*/require("../Button");
+var _Button2 = /*#__PURE__*/require("../Button/Button.styles");
+var _IconButton = /*#__PURE__*/require("./IconButton.tokens");
+var mappingOverride = exports.mappingOverride = /*#__PURE__*/"\n    ".concat(_Button.buttonTokens.buttonPadding, ": 0;\n\n    ").concat(_Button.buttonTokens.buttonColor, ": var(").concat(_IconButton.tokens.iconButtonColor, ");\n    ").concat(_Button.buttonTokens.buttonBackgroundColor, ": var(").concat(_IconButton.tokens.iconButtonBackgroundColor, ");\n\n    ").concat(_Button.buttonTokens.buttonColorHover, ": var(").concat(_IconButton.tokens.iconButtonColorHover, ");\n    ").concat(_Button.buttonTokens.buttonBackgroundColorHover, ": var(").concat(_IconButton.tokens.iconButtonBackgroundColorHover, ");\n\n    ").concat(_Button.buttonTokens.buttonColorActive, ": var(").concat(_IconButton.tokens.iconButtonColorActive, ");\n    ").concat(_Button.buttonTokens.buttonBackgroundColorActive, ": var(").concat(_IconButton.tokens.iconButtonBackgroundColorActive, ");\n\n\n    ").concat(_Button.buttonTokens.buttonFontFamily, ": var(").concat(_IconButton.tokens.iconButtonFontFamily, ");\n    ").concat(_Button.buttonTokens.buttonFontSize, ": var(").concat(_IconButton.tokens.iconButtonFontSize, ");\n    ").concat(_Button.buttonTokens.buttonFontStyle, ": var(").concat(_IconButton.tokens.iconButtonFontStyle, ");\n    ").concat(_Button.buttonTokens.buttonFontWeight, ":var(").concat(_IconButton.tokens.iconButtonFontWeight, ");\n    ").concat(_Button.buttonTokens.buttonLetterSpacing, ": var(").concat(_IconButton.tokens.iconButtonLetterSpacing, ");\n    ").concat(_Button.buttonTokens.buttonLineHeight, ": var(").concat(_IconButton.tokens.iconButtonLineHeight, ");\n\n    ").concat(_Button.buttonTokens.buttonWidth, ": var(").concat(_IconButton.tokens.iconButtonWidth, ");\n    ").concat(_Button.buttonTokens.buttonHeight, ": var(").concat(_IconButton.tokens.iconButtonHeight, ");\n    ").concat(_Button.buttonTokens.buttonRadius, ": var(").concat(_IconButton.tokens.iconButtonRadius, ");\n\n    ").concat(_Button.buttonTokens.buttonDisabledOpacity, ": var(").concat(_IconButton.tokens.iconButtonDisabledOpacity, ");\n    ").concat(_Button.buttonTokens.buttonFocusColor, ": var(").concat(_IconButton.tokens.iconButtonFocusColor, ");\n\n    ").concat(_Button.buttonTokens.buttonSpinnerSize, ": var(").concat(_IconButton.tokens.iconButtonSpinnerSize, ");\n    ").concat(_Button.buttonTokens.buttonSpinnerColor, ": var(").concat(_IconButton.tokens.iconButtonSpinnerColor, ");\n");
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["", ";", ";"], _Button2.baseContent, mappingOverride);

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

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tokens = void 0;
+var tokens = exports.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/cjs/components/IconButton/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "iconButtonConfig", {
+  enumerable: true,
+  get: function get() {
+    return _IconButton.iconButtonConfig;
+  }
+});
+Object.defineProperty(exports, "iconButtonRoot", {
+  enumerable: true,
+  get: function get() {
+    return _IconButton.iconButtonRoot;
+  }
+});
+Object.defineProperty(exports, "iconButtonTokens", {
+  enumerable: true,
+  get: function get() {
+    return _IconButton2.tokens;
+  }
+});
+var _IconButton = /*#__PURE__*/require("./IconButton");
+var _IconButton2 = /*#__PURE__*/require("./IconButton.tokens");

package/styled-components/cjs/components/TextField/TextField.js

@@ -18,7 +18,7 @@ var _TextField = /*#__PURE__*/require("./TextField.styles");
 var _TextField2 = /*#__PURE__*/require("./TextField.tokens");
 var _ui = /*#__PURE__*/require("./ui");
 var _useKeyNavigation2 = /*#__PURE__*/require("./hooks/useKeyNavigation");
-var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "placeholder", "leftHelper", "enumerationType", "view", "size", "readOnly", "disabled", "chips", "onChange", "onChangeChips", "onSearch"];
+var _excluded = ["id", "contentLeft", "contentRight", "label", "labelPlacement", "placeholder", "leftHelper", "enumerationType", "view", "size", "readOnly", "disabled", "chips", "onChange", "onChangeChips", "onSearch"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 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); }
@@ -34,8 +34,6 @@ var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["display:bloc
 var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
   return /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     var id = _ref.id,
-      className = _ref.className,
-      style = _ref.style,
       contentLeft = _ref.contentLeft,
       contentRight = _ref.contentRight,
       label = _ref.label,
@@ -151,9 +149,7 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
       disabled: disabled,
       readOnly: !disabled && readOnly,
       labelPlacement: innerLabelPlacementValue,
-      onClick: handleInputFocus,
-      className: className,
-      style: style
+      onClick: handleInputFocus
     }, labelInside || innerLabelValue && /*#__PURE__*/_react["default"].createElement(_TextField.Label, {
       id: labelId,
       htmlFor: id

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

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _IconButton = /*#__PURE__*/require("../../../../components/IconButton");
+var config = exports.config = {
+  defaults: {
+    view: 'default',
+    focused: 'true',
+    size: 'm'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/(0, _styledComponents.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);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
+      primary: /*#__PURE__*/(0, _styledComponents.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);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
+      accent: /*#__PURE__*/(0, _styledComponents.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);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
+      secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
+      clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
+      success: /*#__PURE__*/(0, _styledComponents.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);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
+      warning: /*#__PURE__*/(0, _styledComponents.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);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
+      critical: /*#__PURE__*/(0, _styledComponents.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);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
+      dark: /*#__PURE__*/(0, _styledComponents.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);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
+      black: /*#__PURE__*/(0, _styledComponents.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);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
+      white: /*#__PURE__*/(0, _styledComponents.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);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive)
+    },
+    size: {
+      l: /*#__PURE__*/(0, _styledComponents.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;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonPadding, _IconButton.iconButtonTokens.iconButtonRadius, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor),
+      lr: /*#__PURE__*/(0, _styledComponents.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;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor),
+      m: /*#__PURE__*/(0, _styledComponents.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;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonPadding, _IconButton.iconButtonTokens.iconButtonRadius, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor),
+      mr: /*#__PURE__*/(0, _styledComponents.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;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor),
+      s: /*#__PURE__*/(0, _styledComponents.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;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonPadding, _IconButton.iconButtonTokens.iconButtonRadius, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor),
+      sr: /*#__PURE__*/(0, _styledComponents.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;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor),
+      xs: /*#__PURE__*/(0, _styledComponents.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;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonPadding, _IconButton.iconButtonTokens.iconButtonRadius, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor),
+      xsr: /*#__PURE__*/(0, _styledComponents.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;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor)
+    },
+    disabled: {
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _IconButton.iconButtonTokens.iconButtonDisabledOpacity)
+    },
+    focused: {
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-accent);"], _IconButton.iconButtonTokens.iconButtonFocusColor)
+    }
+  }
+};

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

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconButton = void 0;
+var _IconButton = /*#__PURE__*/require("../../../../components/IconButton");
+var _engines = /*#__PURE__*/require("../../../../engines");
+var _IconButton2 = /*#__PURE__*/require("./IconButton.config");
+var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_IconButton.iconButtonConfig, _IconButton2.config);
+var IconButton = exports.IconButton = /*#__PURE__*/(0, _engines.component)(mergedConfig);

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

@@ -0,0 +1,69 @@
+import React, { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+
+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) => {
+    if (size === 'mr') {
+        return 'm';
+    }
+    if (size === 'lr') {
+        return 'l';
+    }
+    if (size === 'sr') {
+        return 's';
+    }
+    if (size === 'xsr') {
+        return 'xs';
+    }
+    return size;
+};
+
+export const Default: StoryObj<ComponentProps<typeof IconButton>> = {
+    args: {
+        children: <IconChevronLeft />,
+        view: 'default',
+        size: 'm',
+        disabled: false,
+        focused: true,
+        isLoading: false,
+    },
+    render: (args) => (
+        <IconButton {...args}>
+            <IconChevronLeft size={getSizeForIcon(args.size)} />
+        </IconButton>
+    ),
+};

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

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _IconButton = /*#__PURE__*/require("../../../../components/IconButton");
+var config = exports.config = {
+  defaults: {
+    view: 'default',
+    focused: 'true',
+    size: 'm'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/(0, _styledComponents.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);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
+      primary: /*#__PURE__*/(0, _styledComponents.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);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
+      accent: /*#__PURE__*/(0, _styledComponents.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);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
+      secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
+      clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
+      success: /*#__PURE__*/(0, _styledComponents.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);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
+      warning: /*#__PURE__*/(0, _styledComponents.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);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
+      critical: /*#__PURE__*/(0, _styledComponents.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);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
+      dark: /*#__PURE__*/(0, _styledComponents.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);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
+      black: /*#__PURE__*/(0, _styledComponents.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);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive),
+      white: /*#__PURE__*/(0, _styledComponents.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);"], _IconButton.iconButtonTokens.iconButtonColor, _IconButton.iconButtonTokens.iconButtonBackgroundColor, _IconButton.iconButtonTokens.iconButtonColorHover, _IconButton.iconButtonTokens.iconButtonBackgroundColorHover, _IconButton.iconButtonTokens.iconButtonColorActive, _IconButton.iconButtonTokens.iconButtonBackgroundColorActive)
+    },
+    size: {
+      l: /*#__PURE__*/(0, _styledComponents.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;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonPadding, _IconButton.iconButtonTokens.iconButtonRadius, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor),
+      lr: /*#__PURE__*/(0, _styledComponents.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;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor),
+      m: /*#__PURE__*/(0, _styledComponents.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;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonPadding, _IconButton.iconButtonTokens.iconButtonRadius, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor),
+      mr: /*#__PURE__*/(0, _styledComponents.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;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor),
+      s: /*#__PURE__*/(0, _styledComponents.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;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonPadding, _IconButton.iconButtonTokens.iconButtonRadius, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor),
+      sr: /*#__PURE__*/(0, _styledComponents.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;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor),
+      xs: /*#__PURE__*/(0, _styledComponents.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;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonPadding, _IconButton.iconButtonTokens.iconButtonRadius, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor),
+      xsr: /*#__PURE__*/(0, _styledComponents.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;"], _IconButton.iconButtonTokens.iconButtonHeight, _IconButton.iconButtonTokens.iconButtonWidth, _IconButton.iconButtonTokens.iconButtonFontFamily, _IconButton.iconButtonTokens.iconButtonFontSize, _IconButton.iconButtonTokens.iconButtonFontStyle, _IconButton.iconButtonTokens.iconButtonFontWeight, _IconButton.iconButtonTokens.iconButtonLetterSpacing, _IconButton.iconButtonTokens.iconButtonLineHeight, _IconButton.iconButtonTokens.iconButtonSpinnerSize, _IconButton.iconButtonTokens.iconButtonSpinnerColor)
+    },
+    disabled: {
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _IconButton.iconButtonTokens.iconButtonDisabledOpacity)
+    },
+    focused: {
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-accent);"], _IconButton.iconButtonTokens.iconButtonFocusColor)
+    }
+  }
+};

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

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconButton = void 0;
+var _IconButton = /*#__PURE__*/require("../../../../components/IconButton");
+var _engines = /*#__PURE__*/require("../../../../engines");
+var _IconButton2 = /*#__PURE__*/require("./IconButton.config");
+var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_IconButton.iconButtonConfig, _IconButton2.config);
+var IconButton = exports.IconButton = /*#__PURE__*/(0, _engines.component)(mergedConfig);