@salutejs/plasma-new-hope 0.326.1-canary.2043.15849605311.0 → 0.327.0-canary.1741.15743877104.0

package/cjs/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.styles.js

@@ -5,19 +5,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var react = require('@linaria/react');
 
-var StyledRoot = /*#__PURE__*/react.styled('div')({
+const StyledRoot = /*#__PURE__*/react.styled('div')({
   name: "StyledRoot",
-  "class": "s17gk8pr",
+  class: "s17gk8pr",
   propsAsIs: false
 });
-var StyledShorter = /*#__PURE__*/react.styled('div')({
+const StyledShorter = /*#__PURE__*/react.styled('div')({
   name: "StyledShorter",
-  "class": "s19f9x1v",
+  class: "s19f9x1v",
   propsAsIs: false
 });
-var StyledHidden = /*#__PURE__*/react.styled('div')({
+const StyledHidden = /*#__PURE__*/react.styled('div')({
   name: "StyledHidden",
-  "class": "s1ald2fi",
+  class: "s1ald2fi",
   propsAsIs: false
 });
 

package/cjs/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbShorter.styles.js","sources":["../../../../../src/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.styles.ts"],"sourcesContent":["import { styled } from '@linaria/react';\n\nimport { addFocus } from '../../../../mixins';\nimport { tokens } from '../../Breadcrumbs.tokens';\n\nexport const StyledRoot = styled.div``;\nexport const StyledShorter = styled.div`\n    cursor: pointer;\n    ${addFocus({\n        outlineOffset: '0.125rem',\n        outlineSize: '0.125rem',\n        outlineRadius: '0',\n        outlineColor: `var(${tokens.breadcrumbsFocusOutlineColor})`,\n    })}\n`;\nexport const StyledHidden = styled.div`\n    display: flex;\n    align-items: center;\n    gap: var(${tokens.breadcrumbsGap});\n`;\n"],"names":["StyledRoot","styled","name","class","propsAsIs","StyledShorter","StyledHidden"],"mappings":";;;;;;AAKO,IAAMA,UAAU,gBAAGC,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,YAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAAM,EAAA;AAC/B,IAAMC,aAAa,gBAAGJ,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,eAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAQlC,EAAA;AACM,IAAME,YAAY,gBAAGL,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,cAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAIjC;;;;;;"}
+{"version":3,"file":"BreadcrumbShorter.styles.js","sources":["../../../../../src/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.styles.ts"],"sourcesContent":["import { styled } from '@linaria/react';\n\nimport { addFocus } from '../../../../mixins';\nimport { tokens } from '../../Breadcrumbs.tokens';\n\nexport const StyledRoot = styled.div``;\nexport const StyledShorter = styled.div`\n    cursor: pointer;\n    ${addFocus({\n        outlineOffset: '0.125rem',\n        outlineSize: '0.125rem',\n        outlineRadius: '0',\n        outlineColor: `var(${tokens.breadcrumbsFocusOutlineColor})`,\n    })}\n`;\nexport const StyledHidden = styled.div`\n    display: flex;\n    align-items: center;\n    gap: var(${tokens.breadcrumbsGap});\n`;\n"],"names":["StyledRoot","styled","name","class","propsAsIs","StyledShorter","StyledHidden"],"mappings":";;;;;;AAKO,MAAMA,UAAU,gBAAGC,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,YAAA;AAAAC,EAAAA,KAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAAM,EAAA;AAC/B,MAAMC,aAAa,gBAAGJ,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,eAAA;AAAAC,EAAAA,KAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAQlC,EAAA;AACM,MAAME,YAAY,gBAAGL,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,cAAA;AAAAC,EAAAA,KAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAIjC;;;;;;"}

package/cjs/components/Breadcrumbs/utils/getShortItems.js

@@ -10,28 +10,30 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
-var shortItems = function shortItems(items, renderSeparator, showItems) {
+const shortItems = (items, renderSeparator, showItems) => {
   if (!showItems || showItems < 2 || items.length <= showItems) {
     return items;
   }
-  var leftSlice = Math.floor(showItems / 2);
-  var rightSlice = items.length - leftSlice - showItems % 2;
-  var renderItems = items.slice(leftSlice, rightSlice);
-  var shorter = /*#__PURE__*/React__default.default.createElement(BreadcrumbShorter.BreadcrumbShorter, {
+  const leftSlice = Math.floor(showItems / 2);
+  const rightSlice = items.length - leftSlice - showItems % 2;
+  const renderItems = items.slice(leftSlice, rightSlice);
+  const shorter = /*#__PURE__*/React__default.default.createElement(BreadcrumbShorter.BreadcrumbShorter, {
     separator: renderSeparator
   }, renderItems);
   items.splice(leftSlice, rightSlice - leftSlice, shorter);
   return items;
 };
-var getRenderItems = function getRenderItems(items, renderSeparator, showItems) {
-  var renderItems = shortItems(items.map(function (item) {
+const getRenderItems = (items, renderSeparator, showItems) => {
+  const renderItems = shortItems(items.map(item => {
     if (item.renderItem) {
       return item.renderItem();
     }
-    var title = item.title,
-      disabled = item.disabled,
-      href = item.href,
-      onClick = item.onClick;
+    const {
+      title,
+      disabled,
+      href,
+      onClick
+    } = item;
     return /*#__PURE__*/React__default.default.createElement(Breadcrumbs_styles.StyledLink, {
       tabIndex: 0,
       href: href,

package/cjs/components/Breadcrumbs/utils/getShortItems.js.map

@@ -1 +1 @@
-{"version":3,"file":"getShortItems.js","sources":["../../../../src/components/Breadcrumbs/utils/getShortItems.tsx"],"sourcesContent":["import React from 'react';\nimport type { ReactNode } from 'react';\n\nimport { BreadcrumbShorter } from '../ui/BreadcrumbShorter/BreadcrumbShorter';\nimport { StyledLink } from '../Breadcrumbs.styles';\nimport { BreadcrumbsItem } from '../Breadcrumbs.types';\n\nexport const shortItems = (items: ReactNode[], renderSeparator: ReactNode, showItems?: number) => {\n    if (!showItems || showItems < 2 || items.length <= showItems) {\n        return items;\n    }\n\n    const leftSlice = Math.floor(showItems / 2);\n    const rightSlice = items.length - leftSlice - (showItems % 2);\n\n    const renderItems: ReactNode[] = items.slice(leftSlice, rightSlice);\n    const shorter = <BreadcrumbShorter separator={renderSeparator}>{renderItems}</BreadcrumbShorter>;\n    items.splice(leftSlice, rightSlice - leftSlice, shorter);\n    return items;\n};\n\nexport const getRenderItems = (items: BreadcrumbsItem[], renderSeparator: ReactNode, showItems?: number) => {\n    const renderItems = shortItems(\n        items.map((item: BreadcrumbsItem) => {\n            if (item.renderItem) {\n                return item.renderItem();\n            }\n\n            const { title, disabled, href, onClick } = item;\n\n            return (\n                <StyledLink\n                    tabIndex={0}\n                    href={href}\n                    disabled={disabled}\n                    onClick={onClick}\n                    isHref={Boolean(href || onClick)}\n                >\n                    {title}\n                </StyledLink>\n            );\n        }),\n        renderSeparator,\n        showItems,\n    );\n\n    return renderItems;\n};\n"],"names":["shortItems","items","renderSeparator","showItems","length","leftSlice","Math","floor","rightSlice","renderItems","slice","shorter","React","createElement","BreadcrumbShorter","separator","splice","getRenderItems","map","item","renderItem","title","disabled","href","onClick","StyledLink","tabIndex","isHref","Boolean"],"mappings":";;;;;;;;;;;;AAOO,IAAMA,UAAU,GAAG,SAAbA,UAAUA,CAAIC,KAAkB,EAAEC,eAA0B,EAAEC,SAAkB,EAAK;AAC9F,EAAA,IAAI,CAACA,SAAS,IAAIA,SAAS,GAAG,CAAC,IAAIF,KAAK,CAACG,MAAM,IAAID,SAAS,EAAE;AAC1D,IAAA,OAAOF,KAAK,CAAA;AAChB,GAAA;EAEA,IAAMI,SAAS,GAAGC,IAAI,CAACC,KAAK,CAACJ,SAAS,GAAG,CAAC,CAAC,CAAA;EAC3C,IAAMK,UAAU,GAAGP,KAAK,CAACG,MAAM,GAAGC,SAAS,GAAIF,SAAS,GAAG,CAAE,CAAA;EAE7D,IAAMM,WAAwB,GAAGR,KAAK,CAACS,KAAK,CAACL,SAAS,EAAEG,UAAU,CAAC,CAAA;AACnE,EAAA,IAAMG,OAAO,gBAAGC,sBAAA,CAAAC,aAAA,CAACC,mCAAiB,EAAA;AAACC,IAAAA,SAAS,EAAEb,eAAAA;AAAgB,GAAA,EAAEO,WAA+B,CAAC,CAAA;EAChGR,KAAK,CAACe,MAAM,CAACX,SAAS,EAAEG,UAAU,GAAGH,SAAS,EAAEM,OAAO,CAAC,CAAA;AACxD,EAAA,OAAOV,KAAK,CAAA;AAChB,EAAC;AAEM,IAAMgB,cAAc,GAAG,SAAjBA,cAAcA,CAAIhB,KAAwB,EAAEC,eAA0B,EAAEC,SAAkB,EAAK;EACxG,IAAMM,WAAW,GAAGT,UAAU,CAC1BC,KAAK,CAACiB,GAAG,CAAC,UAACC,IAAqB,EAAK;IACjC,IAAIA,IAAI,CAACC,UAAU,EAAE;AACjB,MAAA,OAAOD,IAAI,CAACC,UAAU,EAAE,CAAA;AAC5B,KAAA;AAEA,IAAA,IAAQC,KAAK,GAA8BF,IAAI,CAAvCE,KAAK;MAAEC,QAAQ,GAAoBH,IAAI,CAAhCG,QAAQ;MAAEC,IAAI,GAAcJ,IAAI,CAAtBI,IAAI;MAAEC,OAAO,GAAKL,IAAI,CAAhBK,OAAO,CAAA;AAEtC,IAAA,oBACIZ,sBAAA,CAAAC,aAAA,CAACY,6BAAU,EAAA;AACPC,MAAAA,QAAQ,EAAE,CAAE;AACZH,MAAAA,IAAI,EAAEA,IAAK;AACXD,MAAAA,QAAQ,EAAEA,QAAS;AACnBE,MAAAA,OAAO,EAAEA,OAAQ;AACjBG,MAAAA,MAAM,EAAEC,OAAO,CAACL,IAAI,IAAIC,OAAO,CAAA;AAAE,KAAA,EAEhCH,KACO,CAAC,CAAA;AAErB,GAAC,CAAC,EACFnB,eAAe,EACfC,SACJ,CAAC,CAAA;AAED,EAAA,OAAOM,WAAW,CAAA;AACtB;;;;;"}
+{"version":3,"file":"getShortItems.js","sources":["../../../../src/components/Breadcrumbs/utils/getShortItems.tsx"],"sourcesContent":["import React from 'react';\nimport type { ReactNode } from 'react';\n\nimport { BreadcrumbShorter } from '../ui/BreadcrumbShorter/BreadcrumbShorter';\nimport { StyledLink } from '../Breadcrumbs.styles';\nimport { BreadcrumbsItem } from '../Breadcrumbs.types';\n\nexport const shortItems = (items: ReactNode[], renderSeparator: ReactNode, showItems?: number) => {\n    if (!showItems || showItems < 2 || items.length <= showItems) {\n        return items;\n    }\n\n    const leftSlice = Math.floor(showItems / 2);\n    const rightSlice = items.length - leftSlice - (showItems % 2);\n\n    const renderItems: ReactNode[] = items.slice(leftSlice, rightSlice);\n    const shorter = <BreadcrumbShorter separator={renderSeparator}>{renderItems}</BreadcrumbShorter>;\n    items.splice(leftSlice, rightSlice - leftSlice, shorter);\n    return items;\n};\n\nexport const getRenderItems = (items: BreadcrumbsItem[], renderSeparator: ReactNode, showItems?: number) => {\n    const renderItems = shortItems(\n        items.map((item: BreadcrumbsItem) => {\n            if (item.renderItem) {\n                return item.renderItem();\n            }\n\n            const { title, disabled, href, onClick } = item;\n\n            return (\n                <StyledLink\n                    tabIndex={0}\n                    href={href}\n                    disabled={disabled}\n                    onClick={onClick}\n                    isHref={Boolean(href || onClick)}\n                >\n                    {title}\n                </StyledLink>\n            );\n        }),\n        renderSeparator,\n        showItems,\n    );\n\n    return renderItems;\n};\n"],"names":["shortItems","items","renderSeparator","showItems","length","leftSlice","Math","floor","rightSlice","renderItems","slice","shorter","React","createElement","BreadcrumbShorter","separator","splice","getRenderItems","map","item","renderItem","title","disabled","href","onClick","StyledLink","tabIndex","isHref","Boolean"],"mappings":";;;;;;;;;;;;AAOO,MAAMA,UAAU,GAAGA,CAACC,KAAkB,EAAEC,eAA0B,EAAEC,SAAkB,KAAK;AAC9F,EAAA,IAAI,CAACA,SAAS,IAAIA,SAAS,GAAG,CAAC,IAAIF,KAAK,CAACG,MAAM,IAAID,SAAS,EAAE;AAC1D,IAAA,OAAOF,KAAK,CAAA;AAChB,GAAA;EAEA,MAAMI,SAAS,GAAGC,IAAI,CAACC,KAAK,CAACJ,SAAS,GAAG,CAAC,CAAC,CAAA;EAC3C,MAAMK,UAAU,GAAGP,KAAK,CAACG,MAAM,GAAGC,SAAS,GAAIF,SAAS,GAAG,CAAE,CAAA;EAE7D,MAAMM,WAAwB,GAAGR,KAAK,CAACS,KAAK,CAACL,SAAS,EAAEG,UAAU,CAAC,CAAA;AACnE,EAAA,MAAMG,OAAO,gBAAGC,sBAAA,CAAAC,aAAA,CAACC,mCAAiB,EAAA;AAACC,IAAAA,SAAS,EAAEb,eAAAA;AAAgB,GAAA,EAAEO,WAA+B,CAAC,CAAA;EAChGR,KAAK,CAACe,MAAM,CAACX,SAAS,EAAEG,UAAU,GAAGH,SAAS,EAAEM,OAAO,CAAC,CAAA;AACxD,EAAA,OAAOV,KAAK,CAAA;AAChB,EAAC;AAEM,MAAMgB,cAAc,GAAGA,CAAChB,KAAwB,EAAEC,eAA0B,EAAEC,SAAkB,KAAK;EACxG,MAAMM,WAAW,GAAGT,UAAU,CAC1BC,KAAK,CAACiB,GAAG,CAAEC,IAAqB,IAAK;IACjC,IAAIA,IAAI,CAACC,UAAU,EAAE;AACjB,MAAA,OAAOD,IAAI,CAACC,UAAU,EAAE,CAAA;AAC5B,KAAA;IAEA,MAAM;MAAEC,KAAK;MAAEC,QAAQ;MAAEC,IAAI;AAAEC,MAAAA,OAAAA;AAAQ,KAAC,GAAGL,IAAI,CAAA;AAE/C,IAAA,oBACIP,sBAAA,CAAAC,aAAA,CAACY,6BAAU,EAAA;AACPC,MAAAA,QAAQ,EAAE,CAAE;AACZH,MAAAA,IAAI,EAAEA,IAAK;AACXD,MAAAA,QAAQ,EAAEA,QAAS;AACnBE,MAAAA,OAAO,EAAEA,OAAQ;AACjBG,MAAAA,MAAM,EAAEC,OAAO,CAACL,IAAI,IAAIC,OAAO,CAAA;AAAE,KAAA,EAEhCH,KACO,CAAC,CAAA;AAErB,GAAC,CAAC,EACFnB,eAAe,EACfC,SACJ,CAAC,CAAA;AAED,EAAA,OAAOM,WAAW,CAAA;AACtB;;;;;"}

package/cjs/components/Breadcrumbs/utils/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var convertIconSize = function convertIconSize(size) {
+const convertIconSize = size => {
   switch (size) {
     case 's':
     case 'xs':
@@ -11,10 +11,8 @@ var convertIconSize = function convertIconSize(size) {
       return 's';
   }
 };
-var addSeparator = function addSeparator(items, renderSeparator) {
-  return items.flatMap(function (item, idx) {
-    return idx < items.length - 1 ? [item, renderSeparator] : [item];
-  });
+const addSeparator = (items, renderSeparator) => {
+  return items.flatMap((item, idx) => idx < items.length - 1 ? [item, renderSeparator] : [item]);
 };
 
 exports.addSeparator = addSeparator;

package/cjs/components/Breadcrumbs/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Breadcrumbs/utils/index.ts"],"sourcesContent":["import { ReactNode } from 'react';\n\nexport const convertIconSize = (size?: string) => {\n    switch (size) {\n        case 's':\n        case 'xs':\n            return 'xs';\n        default:\n            return 's';\n    }\n};\n\nexport const addSeparator = (items: ReactNode[], renderSeparator: ReactNode) => {\n    return items.flatMap((item, idx) => (idx < items.length - 1 ? [item, renderSeparator] : [item]));\n};\n"],"names":["convertIconSize","size","addSeparator","items","renderSeparator","flatMap","item","idx","length"],"mappings":";;;;IAEaA,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,IAAa,EAAK;AAC9C,EAAA,QAAQA,IAAI;AACR,IAAA,KAAK,GAAG,CAAA;AACR,IAAA,KAAK,IAAI;AACL,MAAA,OAAO,IAAI,CAAA;AACf,IAAA;AACI,MAAA,OAAO,GAAG,CAAA;AAClB,GAAA;AACJ,EAAC;AAEM,IAAMC,YAAY,GAAG,SAAfA,YAAYA,CAAIC,KAAkB,EAAEC,eAA0B,EAAK;AAC5E,EAAA,OAAOD,KAAK,CAACE,OAAO,CAAC,UAACC,IAAI,EAAEC,GAAG,EAAA;AAAA,IAAA,OAAMA,GAAG,GAAGJ,KAAK,CAACK,MAAM,GAAG,CAAC,GAAG,CAACF,IAAI,EAAEF,eAAe,CAAC,GAAG,CAACE,IAAI,CAAC,CAAA;AAAA,GAAC,CAAC,CAAA;AACpG;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Breadcrumbs/utils/index.ts"],"sourcesContent":["import { ReactNode } from 'react';\n\nexport const convertIconSize = (size?: string) => {\n    switch (size) {\n        case 's':\n        case 'xs':\n            return 'xs';\n        default:\n            return 's';\n    }\n};\n\nexport const addSeparator = (items: ReactNode[], renderSeparator: ReactNode) => {\n    return items.flatMap((item, idx) => (idx < items.length - 1 ? [item, renderSeparator] : [item]));\n};\n"],"names":["convertIconSize","size","addSeparator","items","renderSeparator","flatMap","item","idx","length"],"mappings":";;;;AAEaA,MAAAA,eAAe,GAAIC,IAAa,IAAK;AAC9C,EAAA,QAAQA,IAAI;AACR,IAAA,KAAK,GAAG,CAAA;AACR,IAAA,KAAK,IAAI;AACL,MAAA,OAAO,IAAI,CAAA;AACf,IAAA;AACI,MAAA,OAAO,GAAG,CAAA;AAClB,GAAA;AACJ,EAAC;MAEYC,YAAY,GAAGA,CAACC,KAAkB,EAAEC,eAA0B,KAAK;EAC5E,OAAOD,KAAK,CAACE,OAAO,CAAC,CAACC,IAAI,EAAEC,GAAG,KAAMA,GAAG,GAAGJ,KAAK,CAACK,MAAM,GAAG,CAAC,GAAG,CAACF,IAAI,EAAEF,eAAe,CAAC,GAAG,CAACE,IAAI,CAAE,CAAC,CAAA;AACpG;;;;;"}

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

@@ -3,7 +3,7 @@ require('./base_x642ct.css');
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var base = "b1js38v0";
+const base = "b1js38v0";
 
 exports.base = base;
 //# sourceMappingURL=base.js.map

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

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

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

@@ -3,7 +3,7 @@ require('./base_x642ct.css');
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var base = "b1m0s7h0";
+const base = "b1m0s7h0";
 
 exports.base = base;
 //# sourceMappingURL=base.js.map

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

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

package/cjs/components/Button/Button.js

@@ -19,72 +19,69 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
-var _StyledSpinner;
-var _excluded = ["children", "view", "size", "text", "value", "contentLeft", "contentRight", "contentPlacing", "isLoading", "loader", "stretch", "square", "pin", "disabled", "focused", "outlined", "className", "blur", "style", "stretching"];
-var buttonRoot = function buttonRoot(Root) {
-  return /*#__PURE__*/React.forwardRef(function (props, ref) {
-    var children = props.children,
-      view = props.view,
-      size = props.size,
-      text = props.text,
-      value = props.value,
-      contentLeft = props.contentLeft,
-      contentRight = props.contentRight,
-      _props$contentPlacing = props.contentPlacing,
-      contentPlacing = _props$contentPlacing === void 0 ? 'default' : _props$contentPlacing,
-      isLoading = props.isLoading,
-      loader = props.loader,
-      stretch = props.stretch,
-      square = props.square,
-      pin = props.pin,
-      disabled = props.disabled,
-      focused = props.focused,
-      outlined = props.outlined,
-      className = props.className,
-      blur = props.blur,
-      style = props.style,
-      _props$stretching = props.stretching,
-      stretching = _props$stretching === void 0 ? 'auto' : _props$stretching,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
-    var txt = typeof children === 'string' ? children : text;
-    var hasRightContentMargin = Boolean(children || txt || value || contentRight);
-    var hasLeftContentMargin = Boolean(contentLeft ? contentLeft && (txt || value) : txt || value);
-    var stretchingClass = stretch ? Button_tokens.classes.filledStretching : Button_tokens.classes["".concat(stretching, "Stretching")];
-    var contentRelaxedClass = contentPlacing === 'relaxed' ? Button_tokens.classes.contentRelaxed : undefined;
-    var squareClass = square ? Button_tokens.classes.buttonSquare : undefined;
-    var isLoadingClass = isLoading ? Button_tokens.classes.buttonLoading : undefined;
-    var buttonBorderRadius = pin ? roundness.convertRoundnessMatrix(pin, "var(".concat(Button_tokens.tokens.buttonRadius, ")"), "var(".concat(Button_tokens.tokens.buttonHeight, ")")) : "var(".concat(Button_tokens.tokens.buttonRadius, ", calc(var(").concat(Button_tokens.tokens.buttonHeight, ") / 4))");
-    var contentPlacingMapper = {
-      "default": 'center',
-      relaxed: 'space-between'
-    };
-    var contentPlacementValue = contentPlacing ? contentPlacingMapper[contentPlacing] : 'center';
-    return /*#__PURE__*/React__default.default.createElement(Root, _rollupPluginBabelHelpers.extends({
-      type: "button",
-      ref: ref,
-      view: view,
-      size: size,
-      value: value,
-      disabled: disabled,
-      focused: focused || outlined,
-      className: index.cx(squareClass, stretchingClass, Button_tokens.classes.buttonItem, isLoadingClass, className),
-      style: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, style), {}, {
-        '--plasma_computed-btn-br': buttonBorderRadius,
-        '--plasma_private-blur': blur
-      })
-    }, rest), /*#__PURE__*/React__default.default.createElement(Button_styles.LoadWrap, {
-      contentPlacing: contentPlacementValue,
-      isLoading: isLoading
-    }, contentLeft && /*#__PURE__*/React__default.default.createElement(Button_styles.StyledContentLeft, {
-      hasContentMargin: hasRightContentMargin
-    }, contentLeft), txt ? /*#__PURE__*/React__default.default.createElement(Button_styles.ButtonText, {
-      className: contentRelaxedClass
-    }, txt) : children, value && /*#__PURE__*/React__default.default.createElement(Button_styles.ButtonValue, null, value), contentRight && /*#__PURE__*/React__default.default.createElement(Button_styles.StyledContentRight, {
-      hasContentMargin: hasLeftContentMargin
-    }, contentRight)), isLoading && /*#__PURE__*/React__default.default.createElement(Button_styles.Loader, null, loader || _StyledSpinner || (_StyledSpinner = /*#__PURE__*/React__default.default.createElement(Button_styles.StyledSpinner, null))));
-  });
-};
-var buttonConfig = {
+const buttonRoot = Root => /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    children,
+    view,
+    size,
+    text,
+    value,
+    contentLeft,
+    contentRight,
+    contentPlacing = 'default',
+    isLoading,
+    loader,
+    stretch,
+    square,
+    pin,
+    disabled,
+    focused,
+    outlined,
+    className,
+    blur,
+    style,
+    stretching = 'auto',
+    ...rest
+  } = props;
+  const txt = typeof children === 'string' ? children : text;
+  const hasRightContentMargin = Boolean(children || txt || value || contentRight);
+  const hasLeftContentMargin = Boolean(contentLeft ? contentLeft && (txt || value) : txt || value);
+  const stretchingClass = stretch ? Button_tokens.classes.filledStretching : Button_tokens.classes[`${stretching}Stretching`];
+  const contentRelaxedClass = contentPlacing === 'relaxed' ? Button_tokens.classes.contentRelaxed : undefined;
+  const squareClass = square ? Button_tokens.classes.buttonSquare : undefined;
+  const isLoadingClass = isLoading ? Button_tokens.classes.buttonLoading : undefined;
+  const buttonBorderRadius = pin ? roundness.convertRoundnessMatrix(pin, `var(${Button_tokens.tokens.buttonRadius})`, `var(${Button_tokens.tokens.buttonHeight})`) : `var(${Button_tokens.tokens.buttonRadius}, calc(var(${Button_tokens.tokens.buttonHeight}) / 4))`;
+  const contentPlacingMapper = {
+    default: 'center',
+    relaxed: 'space-between'
+  };
+  const contentPlacementValue = contentPlacing ? contentPlacingMapper[contentPlacing] : 'center';
+  return /*#__PURE__*/React__default.default.createElement(Root, _rollupPluginBabelHelpers.extends({
+    type: "button",
+    ref: ref,
+    view: view,
+    size: size,
+    value: value,
+    disabled: disabled,
+    focused: focused || outlined,
+    className: index.cx(squareClass, stretchingClass, Button_tokens.classes.buttonItem, isLoadingClass, className),
+    style: {
+      ...style,
+      '--plasma_computed-btn-br': buttonBorderRadius,
+      '--plasma_private-blur': blur
+    }
+  }, rest), /*#__PURE__*/React__default.default.createElement(Button_styles.LoadWrap, {
+    contentPlacing: contentPlacementValue,
+    isLoading: isLoading
+  }, contentLeft && /*#__PURE__*/React__default.default.createElement(Button_styles.StyledContentLeft, {
+    hasContentMargin: hasRightContentMargin
+  }, contentLeft), txt ? /*#__PURE__*/React__default.default.createElement(Button_styles.ButtonText, {
+    className: contentRelaxedClass
+  }, txt) : children, value && /*#__PURE__*/React__default.default.createElement(Button_styles.ButtonValue, null, value), contentRight && /*#__PURE__*/React__default.default.createElement(Button_styles.StyledContentRight, {
+    hasContentMargin: hasLeftContentMargin
+  }, contentRight)), isLoading && /*#__PURE__*/React__default.default.createElement(Button_styles.Loader, null, loader || /*#__PURE__*/React__default.default.createElement(Button_styles.StyledSpinner, null)));
+});
+const buttonConfig = {
   name: 'Button',
   tag: 'button',
   layout: buttonRoot,

package/cjs/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport type { CSSProperties } from 'react';\n\nimport type { RootProps } from '../../engines';\nimport { convertRoundnessMatrix } from '../../utils/roundness';\nimport { cx } from '../../utils';\n\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\nimport { base as focusedCSS } from './variations/_focused/base';\nimport { base as stretchingCSS } from './variations/_stretching/base';\nimport { base as blurredCSS } from './variations/_blurred/base';\nimport type { ButtonProps, ContentPlacementMapper } from './Button.types';\nimport {\n    base,\n    ButtonText,\n    ButtonValue,\n    Loader,\n    LoadWrap,\n    StyledContentLeft,\n    StyledContentRight,\n    StyledSpinner,\n} from './Button.styles';\nimport { classes, tokens } from './Button.tokens';\n\nexport const buttonRoot = (Root: RootProps<HTMLButtonElement, ButtonProps>) =>\n    forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {\n        const {\n            children,\n            view,\n            size,\n            text,\n            value,\n            contentLeft,\n            contentRight,\n            contentPlacing = 'default',\n            isLoading,\n            loader,\n            stretch,\n            square,\n            pin,\n            disabled,\n            focused,\n            outlined,\n            className,\n            blur,\n            style,\n            stretching = 'auto',\n            ...rest\n        } = props;\n\n        const txt = typeof children === 'string' ? children : text;\n        const hasRightContentMargin = Boolean(children || txt || value || contentRight);\n        const hasLeftContentMargin = Boolean(contentLeft ? contentLeft && (txt || value) : txt || value);\n\n        const stretchingClass = stretch\n            ? classes.filledStretching\n            : classes[`${stretching}Stretching` as keyof typeof classes];\n        const contentRelaxedClass = contentPlacing === 'relaxed' ? classes.contentRelaxed : undefined;\n        const squareClass = square ? classes.buttonSquare : undefined;\n        const isLoadingClass = isLoading ? classes.buttonLoading : undefined;\n        const buttonBorderRadius = pin\n            ? convertRoundnessMatrix(pin, `var(${tokens.buttonRadius})`, `var(${tokens.buttonHeight})`)\n            : `var(${tokens.buttonRadius}, calc(var(${tokens.buttonHeight}) / 4))`;\n\n        const contentPlacingMapper: ContentPlacementMapper = {\n            default: 'center',\n            relaxed: 'space-between',\n        };\n\n        const contentPlacementValue = contentPlacing ? contentPlacingMapper[contentPlacing] : 'center';\n\n        return (\n            <Root\n                type=\"button\"\n                ref={ref}\n                view={view}\n                size={size}\n                value={value}\n                disabled={disabled}\n                focused={focused || outlined}\n                className={cx(squareClass, stretchingClass, classes.buttonItem, isLoadingClass, className)}\n                style={\n                    {\n                        ...style,\n                        '--plasma_computed-btn-br': buttonBorderRadius,\n                        '--plasma_private-blur': blur,\n                    } as CSSProperties\n                }\n                {...rest}\n            >\n                <LoadWrap contentPlacing={contentPlacementValue} isLoading={isLoading}>\n                    {contentLeft && (\n                        <StyledContentLeft hasContentMargin={hasRightContentMargin}>{contentLeft}</StyledContentLeft>\n                    )}\n                    {txt ? <ButtonText className={contentRelaxedClass}>{txt}</ButtonText> : children}\n                    {value && <ButtonValue>{value}</ButtonValue>}\n                    {contentRight && (\n                        <StyledContentRight hasContentMargin={hasLeftContentMargin}>{contentRight}</StyledContentRight>\n                    )}\n                </LoadWrap>\n                {isLoading && <Loader>{loader || <StyledSpinner />}</Loader>}\n            </Root>\n        );\n    });\n\nexport const buttonConfig = {\n    name: 'Button',\n    tag: 'button',\n    layout: buttonRoot,\n    base,\n    variations: {\n        view: {\n            css: viewCSS,\n        },\n        size: {\n            css: sizeCSS,\n        },\n        disabled: {\n            css: disabledCSS,\n            attrs: true,\n        },\n        focused: {\n            css: focusedCSS,\n            // TODO: isLoading => disabled\n        },\n        blurred: {\n            css: blurredCSS,\n        },\n        stretching: {\n            css: stretchingCSS,\n        },\n    },\n    defaults: {\n        view: 'secondary',\n        size: 'm',\n        stretching: 'auto',\n    },\n};\n"],"names":["buttonRoot","Root","forwardRef","props","ref","children","view","size","text","value","contentLeft","contentRight","_props$contentPlacing","contentPlacing","isLoading","loader","stretch","square","pin","disabled","focused","outlined","className","blur","style","_props$stretching","stretching","rest","_objectWithoutProperties","_excluded","txt","hasRightContentMargin","Boolean","hasLeftContentMargin","stretchingClass","classes","filledStretching","concat","contentRelaxedClass","contentRelaxed","undefined","squareClass","buttonSquare","isLoadingClass","buttonLoading","buttonBorderRadius","convertRoundnessMatrix","tokens","buttonRadius","buttonHeight","contentPlacingMapper","relaxed","contentPlacementValue","React","createElement","_extends","type","cx","buttonItem","_objectSpread","LoadWrap","StyledContentLeft","hasContentMargin","ButtonText","ButtonValue","StyledContentRight","Loader","_StyledSpinner","StyledSpinner","buttonConfig","name","tag","layout","base","variations","css","viewCSS","sizeCSS","disabledCSS","attrs","focusedCSS","blurred","blurredCSS","stretchingCSS","defaults"],"mappings":"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"}
+{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport type { CSSProperties } from 'react';\n\nimport type { RootProps } from '../../engines';\nimport { convertRoundnessMatrix } from '../../utils/roundness';\nimport { cx } from '../../utils';\n\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\nimport { base as focusedCSS } from './variations/_focused/base';\nimport { base as stretchingCSS } from './variations/_stretching/base';\nimport { base as blurredCSS } from './variations/_blurred/base';\nimport type { ButtonProps, ContentPlacementMapper } from './Button.types';\nimport {\n    base,\n    ButtonText,\n    ButtonValue,\n    Loader,\n    LoadWrap,\n    StyledContentLeft,\n    StyledContentRight,\n    StyledSpinner,\n} from './Button.styles';\nimport { classes, tokens } from './Button.tokens';\n\nexport const buttonRoot = (Root: RootProps<HTMLButtonElement, ButtonProps>) =>\n    forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {\n        const {\n            children,\n            view,\n            size,\n            text,\n            value,\n            contentLeft,\n            contentRight,\n            contentPlacing = 'default',\n            isLoading,\n            loader,\n            stretch,\n            square,\n            pin,\n            disabled,\n            focused,\n            outlined,\n            className,\n            blur,\n            style,\n            stretching = 'auto',\n            ...rest\n        } = props;\n\n        const txt = typeof children === 'string' ? children : text;\n        const hasRightContentMargin = Boolean(children || txt || value || contentRight);\n        const hasLeftContentMargin = Boolean(contentLeft ? contentLeft && (txt || value) : txt || value);\n\n        const stretchingClass = stretch\n            ? classes.filledStretching\n            : classes[`${stretching}Stretching` as keyof typeof classes];\n        const contentRelaxedClass = contentPlacing === 'relaxed' ? classes.contentRelaxed : undefined;\n        const squareClass = square ? classes.buttonSquare : undefined;\n        const isLoadingClass = isLoading ? classes.buttonLoading : undefined;\n        const buttonBorderRadius = pin\n            ? convertRoundnessMatrix(pin, `var(${tokens.buttonRadius})`, `var(${tokens.buttonHeight})`)\n            : `var(${tokens.buttonRadius}, calc(var(${tokens.buttonHeight}) / 4))`;\n\n        const contentPlacingMapper: ContentPlacementMapper = {\n            default: 'center',\n            relaxed: 'space-between',\n        };\n\n        const contentPlacementValue = contentPlacing ? contentPlacingMapper[contentPlacing] : 'center';\n\n        return (\n            <Root\n                type=\"button\"\n                ref={ref}\n                view={view}\n                size={size}\n                value={value}\n                disabled={disabled}\n                focused={focused || outlined}\n                className={cx(squareClass, stretchingClass, classes.buttonItem, isLoadingClass, className)}\n                style={\n                    {\n                        ...style,\n                        '--plasma_computed-btn-br': buttonBorderRadius,\n                        '--plasma_private-blur': blur,\n                    } as CSSProperties\n                }\n                {...rest}\n            >\n                <LoadWrap contentPlacing={contentPlacementValue} isLoading={isLoading}>\n                    {contentLeft && (\n                        <StyledContentLeft hasContentMargin={hasRightContentMargin}>{contentLeft}</StyledContentLeft>\n                    )}\n                    {txt ? <ButtonText className={contentRelaxedClass}>{txt}</ButtonText> : children}\n                    {value && <ButtonValue>{value}</ButtonValue>}\n                    {contentRight && (\n                        <StyledContentRight hasContentMargin={hasLeftContentMargin}>{contentRight}</StyledContentRight>\n                    )}\n                </LoadWrap>\n                {isLoading && <Loader>{loader || <StyledSpinner />}</Loader>}\n            </Root>\n        );\n    });\n\nexport const buttonConfig = {\n    name: 'Button',\n    tag: 'button',\n    layout: buttonRoot,\n    base,\n    variations: {\n        view: {\n            css: viewCSS,\n        },\n        size: {\n            css: sizeCSS,\n        },\n        disabled: {\n            css: disabledCSS,\n            attrs: true,\n        },\n        focused: {\n            css: focusedCSS,\n            // TODO: isLoading => disabled\n        },\n        blurred: {\n            css: blurredCSS,\n        },\n        stretching: {\n            css: stretchingCSS,\n        },\n    },\n    defaults: {\n        view: 'secondary',\n        size: 'm',\n        stretching: 'auto',\n    },\n};\n"],"names":["buttonRoot","Root","forwardRef","props","ref","children","view","size","text","value","contentLeft","contentRight","contentPlacing","isLoading","loader","stretch","square","pin","disabled","focused","outlined","className","blur","style","stretching","rest","txt","hasRightContentMargin","Boolean","hasLeftContentMargin","stretchingClass","classes","filledStretching","contentRelaxedClass","contentRelaxed","undefined","squareClass","buttonSquare","isLoadingClass","buttonLoading","buttonBorderRadius","convertRoundnessMatrix","tokens","buttonRadius","buttonHeight","contentPlacingMapper","default","relaxed","contentPlacementValue","React","createElement","_extends","type","cx","buttonItem","LoadWrap","StyledContentLeft","hasContentMargin","ButtonText","ButtonValue","StyledContentRight","Loader","StyledSpinner","buttonConfig","name","tag","layout","base","variations","css","viewCSS","sizeCSS","disabledCSS","attrs","focusedCSS","blurred","blurredCSS","stretchingCSS","defaults"],"mappings":"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"}

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

@@ -7,85 +7,168 @@ var react = require('@linaria/react');
 var Button_tokens = require('./Button.tokens.js');
 var common = require('../../engines/common.js');
 var Spinner$1 = require('../Spinner/Spinner.js');
+var addFocus = require('../../mixins/addFocus.js');
 
 // issue #823
-var mergedConfig = /*#__PURE__*/common.mergeConfig(Spinner$1.spinnerConfig);
-var Spinner = /*#__PURE__*/common.component(mergedConfig);
-var ButtonText = /*#__PURE__*/react.styled('span')({
+const mergedConfig = common.mergeConfig(Spinner$1.spinnerConfig);
+const Spinner = common.component(mergedConfig);
+const ButtonText = /*#__PURE__*/react.styled('span')({
   name: "ButtonText",
-  "class": "bzw1898",
+  class: "bzw1898",
   propsAsIs: false
 });
-var ButtonValue = /*#__PURE__*/react.styled('span')({
+const ButtonValue = /*#__PURE__*/react.styled('span')({
   name: "ButtonValue",
-  "class": "bdfuqwe",
+  class: "bdfuqwe",
   propsAsIs: false
 });
 
 // TODO: #720
-var _exp6 = function _exp6() {
-  return function (_ref) {
-    var isLoading = _ref.isLoading;
-    return isLoading ? '0' : '1';
-  };
-};
-var _exp7 = function _exp7() {
-  return function (_ref2) {
-    var contentPlacing = _ref2.contentPlacing;
-    return contentPlacing;
-  };
-};
-var LoadWrap = /*#__PURE__*/react.styled('div')({
+const _exp6 = /*#__PURE__*/() => ({
+  isLoading
+}) => isLoading ? '0' : '1';
+const _exp7 = /*#__PURE__*/() => ({
+  contentPlacing
+}) => contentPlacing;
+const LoadWrap = /*#__PURE__*/react.styled('div')({
   name: "LoadWrap",
-  "class": "l9ypozh",
+  class: "l9ypozh",
   propsAsIs: false,
   vars: {
-    "l9ypozh-0": [/*#__PURE__*/_exp6()],
-    "l9ypozh-1": [/*#__PURE__*/_exp7()]
+    "l9ypozh-0": [_exp6()],
+    "l9ypozh-1": [_exp7()]
   }
 });
-var Loader = /*#__PURE__*/react.styled('div')({
+const Loader = /*#__PURE__*/react.styled('div')({
   name: "Loader",
-  "class": "l4dfhbg",
+  class: "l4dfhbg",
   propsAsIs: false
 });
-var _exp8 = function _exp8() {
-  return Spinner;
-};
-var StyledSpinner = /*#__PURE__*/react.styled(_exp8())({
+const _exp8 = /*#__PURE__*/() => Spinner;
+const StyledSpinner = /*#__PURE__*/react.styled(_exp8())({
   name: "StyledSpinner",
-  "class": "srdlazt",
+  class: "srdlazt",
   propsAsIs: true
 });
-var _exp14 = function _exp14() {
-  return function (_ref3) {
-    var hasContentMargin = _ref3.hasContentMargin;
-    return hasContentMargin ? "var(".concat(Button_tokens.tokens.buttonLeftContentMargin, ")") : 0;
-  };
-};
-var StyledContentLeft = /*#__PURE__*/react.styled('div')({
+const _exp14 = /*#__PURE__*/() => ({
+  hasContentMargin
+}) => hasContentMargin ? `var(${Button_tokens.tokens.buttonLeftContentMargin})` : 0;
+const StyledContentLeft = /*#__PURE__*/react.styled('div')({
   name: "StyledContentLeft",
-  "class": "s7rggv0",
+  class: "s7rggv0",
   propsAsIs: false,
   vars: {
-    "s7rggv0-0": [/*#__PURE__*/_exp14()]
+    "s7rggv0-0": [_exp14()]
   }
 });
-var _exp16 = function _exp16() {
-  return function (_ref4) {
-    var hasContentMargin = _ref4.hasContentMargin;
-    return hasContentMargin ? "var(".concat(Button_tokens.tokens.buttonRightContentMargin, ")") : 0;
-  };
-};
-var StyledContentRight = /*#__PURE__*/react.styled('div')({
+const _exp16 = /*#__PURE__*/() => ({
+  hasContentMargin
+}) => hasContentMargin ? `var(${Button_tokens.tokens.buttonRightContentMargin})` : 0;
+const StyledContentRight = /*#__PURE__*/react.styled('div')({
   name: "StyledContentRight",
-  "class": "s1rjh7ra",
+  class: "s1rjh7ra",
   propsAsIs: false,
   vars: {
-    "s1rjh7ra-0": [/*#__PURE__*/_exp16()]
+    "s1rjh7ra-0": [_exp16()]
   }
 });
-var base = "b9ga1dj";
+const base = "b9ga1dj";
+
+// INFO: Для возможности переиспользования стилей в других компонентах
+`
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    justify-content: center;
+
+    appearance: none;
+    border: none;
+    cursor: pointer;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+    a& {
+        text-decoration: none;
+    }
+
+    /* NOTE:
+        --plasma_computed-btn-br-radius is defined in Button.tsx
+    */
+    --plasma_private-btn-br: var(--plasma_computed-btn-br);
+    border-radius: var(--plasma_private-btn-br);
+
+    &&.${String(Button_tokens.classes.buttonSquare)} {
+        width: var(${Button_tokens.tokens.buttonHeight});
+        padding: 0;
+    }
+
+    color: var(${Button_tokens.tokens.buttonColor});
+    background: var(${Button_tokens.tokens.buttonBackgroundColor});
+
+    :hover {
+        color: var(${Button_tokens.tokens.buttonColorHover}, var(${Button_tokens.tokens.buttonColor}));
+        background: var(${Button_tokens.tokens.buttonBackgroundColorHover}, var(${Button_tokens.tokens.buttonBackgroundColor}));
+
+        scale: var(${Button_tokens.tokens.buttonScaleHover});
+    }
+
+    :active {
+        color: var(${Button_tokens.tokens.buttonColorActive}, var(${Button_tokens.tokens.buttonColor}));
+        background: var(${Button_tokens.tokens.buttonBackgroundColorActive}, var(${Button_tokens.tokens.buttonBackgroundColor}));
+
+        scale: var(${Button_tokens.tokens.buttonScaleActive});
+    }
+
+    height: var(${Button_tokens.tokens.buttonHeight});
+    width: var(${Button_tokens.tokens.buttonWidth});
+
+    /* TODO: #714 move these calc's to plasma-mapping | ds-generator and add Math.round() */
+    padding: 0 var(${Button_tokens.tokens.buttonPadding}, calc(var(${Button_tokens.tokens.buttonHeight}) * 1.618 / 4));
+
+    font-family: var(${Button_tokens.tokens.buttonFontFamily});
+    font-size: var(${Button_tokens.tokens.buttonFontSize});
+    font-style: var(${Button_tokens.tokens.buttonFontStyle});
+    font-weight: var(${Button_tokens.tokens.buttonFontWeight});
+    letter-spacing: var(${Button_tokens.tokens.buttonLetterSpacing});
+    line-height: var(${Button_tokens.tokens.buttonLineHeight});
+
+    /* TODO: #710 make it token API ? */
+    --plasma_private-btn-outline-size: var(--plasma-button-outline-size, 0.0625rem);
+
+    :focus {
+        outline: none;
+    }
+
+    ${addFocus.addFocus({
+  outlineOffset: '-0.125rem',
+  outlineSize: 'var(--plasma_private-btn-outline-size)',
+  outlineRadius: 'calc(0.125rem + var(--plasma_private-btn-br))',
+  outlineColor: `var(${Button_tokens.tokens.buttonFocusColor})`
+})}
+
+    &[disabled] {
+        opacity: var(${Button_tokens.tokens.buttonDisabledOpacity});
+        cursor: not-allowed;
+
+        :hover,
+        :active {
+            scale: none;
+
+            color: var(${Button_tokens.tokens.buttonColor});
+            background: var(${Button_tokens.tokens.buttonBackgroundColor});
+        }
+    }
+
+    &.${Button_tokens.classes.fixedStretching} {
+        width: var(${Button_tokens.tokens.buttonWidth});
+    }
+    &.${Button_tokens.classes.filledStretching} {
+        width: 100%;
+    }
+    &.${Button_tokens.classes.autoStretching} {
+        width: fit-content;
+    }
+`;
 
 exports.ButtonText = ButtonText;
 exports.ButtonValue = ButtonValue;

package/cjs/components/Button/Button.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.styles.js","sources":["../../../src/components/Button/Button.styles.ts"],"sourcesContent":["import { css } from '@linaria/core';\nimport { styled } from '@linaria/react';\n\nimport { applyEllipsis, addFocus } from '../../mixins';\nimport { component, mergeConfig } from '../../engines';\nimport { spinnerConfig, spinnerTokens } from '../Spinner';\n\nimport { classes, tokens } from './Button.tokens';\n\n// issue #823\nconst mergedConfig = mergeConfig(spinnerConfig);\nconst Spinner = component(mergedConfig);\n\nexport const ButtonText = styled.span`\n    min-width: 4ch;\n    flex-shrink: 2;\n\n    ${applyEllipsis()}\n\n\n    &.${String(classes.contentRelaxed)} {\n        text-align: start;\n        flex-grow: 2;\n    }\n`;\n\nexport const ButtonValue = styled.span`\n    color: var(${tokens.buttonValueColor});\n\n    margin: var(${tokens.buttonValueMargin});\n\n    min-width: 4ch;\n\n    ${applyEllipsis()}\n`;\n\n// TODO: #720\nexport const LoadWrap = styled.div<{ contentPlacing: string; isLoading?: boolean }>`\n    opacity: ${({ isLoading }) => (isLoading ? '0' : '1')};\n    display: flex;\n    align-items: inherit;\n    justify-content: ${({ contentPlacing }) => contentPlacing};\n    height: 100%;\n    width: 100%;\n`;\n\nexport const Loader = styled.div`\n    position: absolute;\n`;\n\nexport const StyledSpinner = styled(Spinner)`\n    ${spinnerTokens.size}: var(${tokens.buttonSpinnerSize});\n    ${spinnerTokens.color}: var(${tokens.buttonSpinnerColor});\n`;\n\nexport const StyledContentLeft = styled.div<{ hasContentMargin?: boolean }>`\n    display: flex;\n    align-self: var(${tokens.buttonLeftContentAlignSelf});\n\n    margin: ${({ hasContentMargin }) => (hasContentMargin ? `var(${tokens.buttonLeftContentMargin})` : 0)};\n`;\n\nexport const StyledContentRight = styled.div<{ hasContentMargin?: boolean }>`\n    display: flex;\n    align-self: var(${tokens.buttonRightContentAlignSelf});\n\n    margin: ${({ hasContentMargin }) => (hasContentMargin ? `var(${tokens.buttonRightContentMargin})` : 0)};\n`;\n\nexport const base = css`\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    &&.${String(classes.buttonSquare)} {\n        width: var(${tokens.buttonHeight});\n        padding: 0;\n    }\n`;\n\n// INFO: Для возможности переиспользования стилей в других компонентах\nexport const baseContent = `\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    &&.${String(classes.buttonSquare)} {\n        width: var(${tokens.buttonHeight});\n        padding: 0;\n    }\n\n    color: var(${tokens.buttonColor});\n    background: var(${tokens.buttonBackgroundColor});\n\n    :hover {\n        color: var(${tokens.buttonColorHover}, var(${tokens.buttonColor}));\n        background: var(${tokens.buttonBackgroundColorHover}, var(${tokens.buttonBackgroundColor}));\n\n        scale: var(${tokens.buttonScaleHover});\n    }\n\n    :active {\n        color: var(${tokens.buttonColorActive}, var(${tokens.buttonColor}));\n        background: var(${tokens.buttonBackgroundColorActive}, var(${tokens.buttonBackgroundColor}));\n\n        scale: var(${tokens.buttonScaleActive});\n    }\n\n    height: var(${tokens.buttonHeight});\n    width: var(${tokens.buttonWidth});\n\n    /* TODO: #714 move these calc's to plasma-mapping | ds-generator and add Math.round() */\n    padding: 0 var(${tokens.buttonPadding}, calc(var(${tokens.buttonHeight}) * 1.618 / 4));\n\n    font-family: var(${tokens.buttonFontFamily});\n    font-size: var(${tokens.buttonFontSize});\n    font-style: var(${tokens.buttonFontStyle});\n    font-weight: var(${tokens.buttonFontWeight});\n    letter-spacing: var(${tokens.buttonLetterSpacing});\n    line-height: var(${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    ${addFocus({\n        outlineOffset: '-0.125rem',\n        outlineSize: 'var(--plasma_private-btn-outline-size)',\n        outlineRadius: 'calc(0.125rem + var(--plasma_private-btn-br))',\n        outlineColor: `var(${tokens.buttonFocusColor})`,\n    })}\n\n    &[disabled] {\n        opacity: var(${tokens.buttonDisabledOpacity});\n        cursor: not-allowed;\n\n        :hover,\n        :active {\n            scale: none;\n\n            color: var(${tokens.buttonColor});\n            background: var(${tokens.buttonBackgroundColor});\n        }\n    }\n\n    &.${classes.fixedStretching} {\n        width: var(${tokens.buttonWidth});\n    }\n    &.${classes.filledStretching} {\n        width: 100%;\n    }\n    &.${classes.autoStretching} {\n        width: fit-content;\n    }\n`;\n"],"names":["mergedConfig","mergeConfig","spinnerConfig","Spinner","component","ButtonText","styled","name","class","propsAsIs","ButtonValue","_exp6","_ref","isLoading","_exp7","_ref2","contentPlacing","LoadWrap","vars","Loader","_exp8","StyledSpinner","_exp14","_ref3","hasContentMargin","concat","tokens","buttonLeftContentMargin","StyledContentLeft","_exp16","_ref4","buttonRightContentMargin","StyledContentRight","base"],"mappings":"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"}
+{"version":3,"file":"Button.styles.js","sources":["../../../src/components/Button/Button.styles.ts"],"sourcesContent":["import { css } from '@linaria/core';\nimport { styled } from '@linaria/react';\n\nimport { applyEllipsis, addFocus } from '../../mixins';\nimport { component, mergeConfig } from '../../engines';\nimport { spinnerConfig, spinnerTokens } from '../Spinner';\n\nimport { classes, tokens } from './Button.tokens';\n\n// issue #823\nconst mergedConfig = mergeConfig(spinnerConfig);\nconst Spinner = component(mergedConfig);\n\nexport const ButtonText = styled.span`\n    min-width: 4ch;\n    flex-shrink: 2;\n\n    ${applyEllipsis()}\n\n\n    &.${String(classes.contentRelaxed)} {\n        text-align: start;\n        flex-grow: 2;\n    }\n`;\n\nexport const ButtonValue = styled.span`\n    color: var(${tokens.buttonValueColor});\n\n    margin: var(${tokens.buttonValueMargin});\n\n    min-width: 4ch;\n\n    ${applyEllipsis()}\n`;\n\n// TODO: #720\nexport const LoadWrap = styled.div<{ contentPlacing: string; isLoading?: boolean }>`\n    opacity: ${({ isLoading }) => (isLoading ? '0' : '1')};\n    display: flex;\n    align-items: inherit;\n    justify-content: ${({ contentPlacing }) => contentPlacing};\n    height: 100%;\n    width: 100%;\n`;\n\nexport const Loader = styled.div`\n    position: absolute;\n`;\n\nexport const StyledSpinner = styled(Spinner)`\n    ${spinnerTokens.size}: var(${tokens.buttonSpinnerSize});\n    ${spinnerTokens.color}: var(${tokens.buttonSpinnerColor});\n`;\n\nexport const StyledContentLeft = styled.div<{ hasContentMargin?: boolean }>`\n    display: flex;\n    align-self: var(${tokens.buttonLeftContentAlignSelf});\n\n    margin: ${({ hasContentMargin }) => (hasContentMargin ? `var(${tokens.buttonLeftContentMargin})` : 0)};\n`;\n\nexport const StyledContentRight = styled.div<{ hasContentMargin?: boolean }>`\n    display: flex;\n    align-self: var(${tokens.buttonRightContentAlignSelf});\n\n    margin: ${({ hasContentMargin }) => (hasContentMargin ? `var(${tokens.buttonRightContentMargin})` : 0)};\n`;\n\nexport const base = css`\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    &&.${String(classes.buttonSquare)} {\n        width: var(${tokens.buttonHeight});\n        padding: 0;\n    }\n`;\n\n// INFO: Для возможности переиспользования стилей в других компонентах\nexport const baseContent = `\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    &&.${String(classes.buttonSquare)} {\n        width: var(${tokens.buttonHeight});\n        padding: 0;\n    }\n\n    color: var(${tokens.buttonColor});\n    background: var(${tokens.buttonBackgroundColor});\n\n    :hover {\n        color: var(${tokens.buttonColorHover}, var(${tokens.buttonColor}));\n        background: var(${tokens.buttonBackgroundColorHover}, var(${tokens.buttonBackgroundColor}));\n\n        scale: var(${tokens.buttonScaleHover});\n    }\n\n    :active {\n        color: var(${tokens.buttonColorActive}, var(${tokens.buttonColor}));\n        background: var(${tokens.buttonBackgroundColorActive}, var(${tokens.buttonBackgroundColor}));\n\n        scale: var(${tokens.buttonScaleActive});\n    }\n\n    height: var(${tokens.buttonHeight});\n    width: var(${tokens.buttonWidth});\n\n    /* TODO: #714 move these calc's to plasma-mapping | ds-generator and add Math.round() */\n    padding: 0 var(${tokens.buttonPadding}, calc(var(${tokens.buttonHeight}) * 1.618 / 4));\n\n    font-family: var(${tokens.buttonFontFamily});\n    font-size: var(${tokens.buttonFontSize});\n    font-style: var(${tokens.buttonFontStyle});\n    font-weight: var(${tokens.buttonFontWeight});\n    letter-spacing: var(${tokens.buttonLetterSpacing});\n    line-height: var(${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    ${addFocus({\n        outlineOffset: '-0.125rem',\n        outlineSize: 'var(--plasma_private-btn-outline-size)',\n        outlineRadius: 'calc(0.125rem + var(--plasma_private-btn-br))',\n        outlineColor: `var(${tokens.buttonFocusColor})`,\n    })}\n\n    &[disabled] {\n        opacity: var(${tokens.buttonDisabledOpacity});\n        cursor: not-allowed;\n\n        :hover,\n        :active {\n            scale: none;\n\n            color: var(${tokens.buttonColor});\n            background: var(${tokens.buttonBackgroundColor});\n        }\n    }\n\n    &.${classes.fixedStretching} {\n        width: var(${tokens.buttonWidth});\n    }\n    &.${classes.filledStretching} {\n        width: 100%;\n    }\n    &.${classes.autoStretching} {\n        width: fit-content;\n    }\n`;\n"],"names":["mergedConfig","mergeConfig","spinnerConfig","Spinner","component","ButtonText","styled","name","class","propsAsIs","ButtonValue","_exp6","isLoading","_exp7","contentPlacing","LoadWrap","vars","Loader","_exp8","StyledSpinner","_exp14","hasContentMargin","tokens","buttonLeftContentMargin","StyledContentLeft","_exp16","buttonRightContentMargin","StyledContentRight","base","String","classes","buttonSquare","buttonHeight","buttonColor","buttonBackgroundColor","buttonColorHover","buttonBackgroundColorHover","buttonScaleHover","buttonColorActive","buttonBackgroundColorActive","buttonScaleActive","buttonWidth","buttonPadding","buttonFontFamily","buttonFontSize","buttonFontStyle","buttonFontWeight","buttonLetterSpacing","buttonLineHeight","addFocus","outlineOffset","outlineSize","outlineRadius","outlineColor","buttonFocusColor","buttonDisabledOpacity","fixedStretching","filledStretching","autoStretching"],"mappings":"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"}