@salutejs/plasma-web 1.620.1-next-sbcom.0 → 1.621.0-dev.0

package/dist/styled-components/cjs/components/TimePicker/TimePicker.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "TimePicker", {
         return TimePicker;
     }
 });
-var _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");
-var _TimePickerconfig = require("./TimePicker.config");
-var mergedConfig = (0, _styledcomponents.mergeConfig)(_styledcomponents.timePickerConfig, _TimePickerconfig.config);
-var TimePicker = (0, _styledcomponents.component)(mergedConfig);
+const _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");
+const _TimePickerconfig = require("./TimePicker.config");
+const mergedConfig = (0, _styledcomponents.mergeConfig)(_styledcomponents.timePickerConfig, _TimePickerconfig.config);
+const TimePicker = (0, _styledcomponents.component)(mergedConfig);

package/dist/styled-components/cjs/components/TimePicker/index.js

@@ -19,5 +19,5 @@ _export(exports, {
         return _styledcomponents.timePickerTokens;
     }
 });
-var _TimePicker = require("./TimePicker");
-var _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");
+const _TimePicker = require("./TimePicker");
+const _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");

package/dist/styled-components/cjs/components/Toast/Toast.config.js

@@ -8,141 +8,8 @@ Object.defineProperty(exports, "config", {
         return config;
     }
 });
-var _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
-    }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--text-primary);\n                ",
-        ": var(--surface-solid-card-brightness);\n\n                ",
-        ": var(--text-secondary);\n                ",
-        ": var(--text-secondary);\n            "
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--text-primary);\n                ",
-        ": var(--surface-solid-card-brightness);\n                ",
-        ": var(--text-positive);\n\n                ",
-        ": var(--text-secondary);\n                ",
-        ": var(--text-secondary);\n            "
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--text-primary);\n                ",
-        ": var(--surface-solid-card-brightness);\n                ",
-        ": var(--text-negative);\n\n                ",
-        ": var(--text-secondary);\n                ",
-        ": var(--text-secondary);\n            "
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject3() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--text-primary);\n                ",
-        ": var(--surface-solid-card-brightness);\n\n                ",
-        ": var(--text-secondary);\n                ",
-        ": var(--text-secondary);\n            "
-    ]);
-    _templateObject3 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject4() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--on-dark-text-primary);\n                ",
-        ": var(--on-dark-surface-solid-primary-brightness);\n\n                ",
-        ": var(--on-dark-text-secondary);\n                ",
-        ": var(--on-dark-text-secondary);\n            "
-    ]);
-    _templateObject4 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject5() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--on-light-text-primary);\n                ",
-        ": var(--on-light-surface-solid-primary-brightness);\n\n                ",
-        ": var(--on-light-text-secondary);\n                ",
-        ": var(--on-light-text-secondary);\n            "
-    ]);
-    _templateObject5 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject6() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 0.75rem;\n                ",
-        ": calc(100vw - 5rem);\n                ",
-        ": 0.5625rem 0.75rem;\n                ",
-        ": var(--plasma-typo-body-xs-font-family);\n                ",
-        ": var(--plasma-typo-body-xs-font-size);\n                ",
-        ": var(--plasma-typo-body-xs-font-style);\n                ",
-        ": var(--plasma-typo-body-xs-font-weight);\n                ",
-        ": var(--plasma-typo-body-xs-letter-spacing);\n                ",
-        ": var(--plasma-typo-body-xs-line-height);\n\n                ",
-        ": -0.0625rem 0.375rem -0.0625rem -0.125rem;\n                ",
-        ": -0.0625rem -0.25rem -0.0625rem 0.5rem;\n            "
-    ]);
-    _templateObject6 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject7() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 1rem;\n                ",
-        ": 1.5rem;\n            "
-    ]);
-    _templateObject7 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject8() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 1.5rem;\n\n                ",
-        ": -0.0625rem 0.375rem -0.0625rem -0.25rem;\n                ",
-        ": -0.0625rem -0.25rem -0.0625rem 0.375rem;\n            "
-    ]);
-    _templateObject8 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-var config = {
+const _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");
+const config = {
     defaults: {
         view: 'default',
         size: 'm',
@@ -150,30 +17,89 @@ var config = {
     },
     variations: {
         view: {
-            default: (0, _styledcomponents.css)(_templateObject(), _styledcomponents.toastTokens.color, _styledcomponents.toastTokens.background, _styledcomponents.toastTokens.closeIconColor, _styledcomponents.toastTokens.closeIconColorOnHover),
-            positive: (0, _styledcomponents.css)(_templateObject1(), _styledcomponents.toastTokens.color, _styledcomponents.toastTokens.background, _styledcomponents.toastTokens.contentLeftColor, _styledcomponents.toastTokens.closeIconColor, _styledcomponents.toastTokens.closeIconColorOnHover),
-            negative: (0, _styledcomponents.css)(_templateObject2(), _styledcomponents.toastTokens.color, _styledcomponents.toastTokens.background, _styledcomponents.toastTokens.contentLeftColor, _styledcomponents.toastTokens.closeIconColor, _styledcomponents.toastTokens.closeIconColorOnHover),
+            default: (0, _styledcomponents.css)`
+                ${_styledcomponents.toastTokens.color}: var(--text-primary);
+                ${_styledcomponents.toastTokens.background}: var(--surface-solid-card-brightness);
+
+                ${_styledcomponents.toastTokens.closeIconColor}: var(--text-secondary);
+                ${_styledcomponents.toastTokens.closeIconColorOnHover}: var(--text-secondary);
+            `,
+            positive: (0, _styledcomponents.css)`
+                ${_styledcomponents.toastTokens.color}: var(--text-primary);
+                ${_styledcomponents.toastTokens.background}: var(--surface-solid-card-brightness);
+                ${_styledcomponents.toastTokens.contentLeftColor}: var(--text-positive);
+
+                ${_styledcomponents.toastTokens.closeIconColor}: var(--text-secondary);
+                ${_styledcomponents.toastTokens.closeIconColorOnHover}: var(--text-secondary);
+            `,
+            negative: (0, _styledcomponents.css)`
+                ${_styledcomponents.toastTokens.color}: var(--text-primary);
+                ${_styledcomponents.toastTokens.background}: var(--surface-solid-card-brightness);
+                ${_styledcomponents.toastTokens.contentLeftColor}: var(--text-negative);
+
+                ${_styledcomponents.toastTokens.closeIconColor}: var(--text-secondary);
+                ${_styledcomponents.toastTokens.closeIconColorOnHover}: var(--text-secondary);
+            `,
             /**
              * @deprecated
              * использовать `default`
-             */ primary: (0, _styledcomponents.css)(_templateObject3(), _styledcomponents.toastTokens.color, _styledcomponents.toastTokens.background, _styledcomponents.toastTokens.closeIconColor, _styledcomponents.toastTokens.closeIconColorOnHover),
+             */ primary: (0, _styledcomponents.css)`
+                ${_styledcomponents.toastTokens.color}: var(--text-primary);
+                ${_styledcomponents.toastTokens.background}: var(--surface-solid-card-brightness);
+
+                ${_styledcomponents.toastTokens.closeIconColor}: var(--text-secondary);
+                ${_styledcomponents.toastTokens.closeIconColorOnHover}: var(--text-secondary);
+            `,
             /**
              * @deprecated
              * светлый и темный фон регулировать через `view` компонента `ViewContainer`
-             */ dark: (0, _styledcomponents.css)(_templateObject4(), _styledcomponents.toastTokens.color, _styledcomponents.toastTokens.background, _styledcomponents.toastTokens.closeIconColor, _styledcomponents.toastTokens.closeIconColorOnHover),
+             */ dark: (0, _styledcomponents.css)`
+                ${_styledcomponents.toastTokens.color}: var(--on-dark-text-primary);
+                ${_styledcomponents.toastTokens.background}: var(--on-dark-surface-solid-primary-brightness);
+
+                ${_styledcomponents.toastTokens.closeIconColor}: var(--on-dark-text-secondary);
+                ${_styledcomponents.toastTokens.closeIconColorOnHover}: var(--on-dark-text-secondary);
+            `,
             /**
              * @deprecated
              * светлый и темный фон регулировать через `view` компонента `ViewContainer`
-             */ light: (0, _styledcomponents.css)(_templateObject5(), _styledcomponents.toastTokens.color, _styledcomponents.toastTokens.background, _styledcomponents.toastTokens.closeIconColor, _styledcomponents.toastTokens.closeIconColorOnHover)
+             */ light: (0, _styledcomponents.css)`
+                ${_styledcomponents.toastTokens.color}: var(--on-light-text-primary);
+                ${_styledcomponents.toastTokens.background}: var(--on-light-surface-solid-primary-brightness);
+
+                ${_styledcomponents.toastTokens.closeIconColor}: var(--on-light-text-secondary);
+                ${_styledcomponents.toastTokens.closeIconColorOnHover}: var(--on-light-text-secondary);
+            `
         },
         size: {
-            m: (0, _styledcomponents.css)(_templateObject6(), _styledcomponents.toastTokens.borderRadius, _styledcomponents.toastTokens.maxWidth, _styledcomponents.toastTokens.padding, _styledcomponents.toastTokens.fontFamily, _styledcomponents.toastTokens.fontSize, _styledcomponents.toastTokens.fontStyle, _styledcomponents.toastTokens.fontWeight, _styledcomponents.toastTokens.letterSpacing, _styledcomponents.toastTokens.lineHeight, _styledcomponents.toastTokens.contentLeftMargin, _styledcomponents.toastTokens.closeIconMargin)
+            m: (0, _styledcomponents.css)`
+                ${_styledcomponents.toastTokens.borderRadius}: 0.75rem;
+                ${_styledcomponents.toastTokens.maxWidth}: calc(100vw - 5rem);
+                ${_styledcomponents.toastTokens.padding}: 0.5625rem 0.75rem;
+                ${_styledcomponents.toastTokens.fontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${_styledcomponents.toastTokens.fontSize}: var(--plasma-typo-body-xs-font-size);
+                ${_styledcomponents.toastTokens.fontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${_styledcomponents.toastTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${_styledcomponents.toastTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${_styledcomponents.toastTokens.lineHeight}: var(--plasma-typo-body-xs-line-height);
+
+                ${_styledcomponents.toastTokens.contentLeftMargin}: -0.0625rem 0.375rem -0.0625rem -0.125rem;
+                ${_styledcomponents.toastTokens.closeIconMargin}: -0.0625rem -0.25rem -0.0625rem 0.5rem;
+            `
         },
         closeIconType: {
-            default: (0, _styledcomponents.css)(_templateObject7(), _styledcomponents.toastTokens.closeIconButtonSize, _styledcomponents.toastTokens.closeIconSize)
+            default: (0, _styledcomponents.css)`
+                ${_styledcomponents.toastTokens.closeIconButtonSize}: 1rem;
+                ${_styledcomponents.toastTokens.closeIconSize}: 1.5rem;
+            `
         },
         pilled: {
-            true: (0, _styledcomponents.css)(_templateObject8(), _styledcomponents.toastTokens.pilledBorderRadius, _styledcomponents.toastTokens.contentLeftMargin, _styledcomponents.toastTokens.closeIconMargin)
+            true: (0, _styledcomponents.css)`
+                ${_styledcomponents.toastTokens.pilledBorderRadius}: 1.5rem;
+
+                ${_styledcomponents.toastTokens.contentLeftMargin}: -0.0625rem 0.375rem -0.0625rem -0.25rem;
+                ${_styledcomponents.toastTokens.closeIconMargin}: -0.0625rem -0.25rem -0.0625rem 0.375rem;
+            `
         }
     }
 };

package/dist/styled-components/cjs/components/Toast/Toast.js

@@ -22,9 +22,9 @@ _export(exports, {
         return _styledcomponents.useToast;
     }
 });
-var _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");
-var _Toastconfig = require("./Toast.config");
-var mergedConfig = (0, _styledcomponents.mergeConfig)(_styledcomponents.toastConfig, _Toastconfig.config);
-var Toast = (0, _styledcomponents.component)(mergedConfig);
-var ToastController = (0, _styledcomponents.ToastControllerHoc)(Toast);
-var ToastProvider = (0, _styledcomponents.ToastProviderHoc)(ToastController);
+const _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");
+const _Toastconfig = require("./Toast.config");
+const mergedConfig = (0, _styledcomponents.mergeConfig)(_styledcomponents.toastConfig, _Toastconfig.config);
+const Toast = (0, _styledcomponents.component)(mergedConfig);
+const ToastController = (0, _styledcomponents.ToastControllerHoc)(Toast);
+const ToastProvider = (0, _styledcomponents.ToastProviderHoc)(ToastController);

package/dist/styled-components/cjs/components/Toast/index.js

@@ -19,4 +19,4 @@ _export(exports, {
         return _Toast.useToast;
     }
 });
-var _Toast = require("./Toast");
+const _Toast = require("./Toast");

package/dist/styled-components/cjs/components/Tokens/Colors/Colors.styles.js

@@ -49,102 +49,98 @@ _export(exports, {
         return TokenInfoWrapper;
     }
 });
-var _styledcomponents = /*#__PURE__*/ _interop_require_default(require("styled-components"));
-var _styledcomponents1 = require("@salutejs/plasma-new-hope/styled-components");
-var _Accordion = require("../../Accordion");
-var _Segment = require("../../Segment/Segment");
+const _styledcomponents = /*#__PURE__*/ _interop_require_default(require("styled-components"));
+const _styledcomponents1 = require("@salutejs/plasma-new-hope/styled-components");
+const _Accordion = require("../../Accordion");
+const _Segment = require("../../Segment/Segment");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-var ColorTokensWrapper = _styledcomponents.default.div.withConfig({
+const ColorTokensWrapper = _styledcomponents.default.div.withConfig({
     displayName: "Colors.styles__ColorTokensWrapper",
     componentId: "sc-e9243388-0"
 })([
-    "padding-top:1.5rem;width:100%;"
+    `padding-top:1.5rem;width:100%;`
 ]);
-var SubthemeSwitcher = _styledcomponents.default.div.withConfig({
+const SubthemeSwitcher = _styledcomponents.default.div.withConfig({
     displayName: "Colors.styles__SubthemeSwitcher",
     componentId: "sc-e9243388-1"
 })([
-    "margin:-0.5rem auto 2.5rem auto;width:fit-content;position:relative;&:before{content:'Подтема';position:absolute;top:50%;transform:translate(-100%,-50%);left:-0.75rem;color:var(--text-tertiary);font-family:var(--plasma-typo-body-xs-font-family);font-size:var(--plasma-typo-body-xs-font-size);font-style:var(--plasma-typo-body-xs-font-style);font-weight:var(--plasma-typo-body-xs-font-weight);bold-font-weight:var(--plasma-typo-body-xs-bold-font-weight);letter-spacing:var(--plasma-typo-body-xs-letter-spacing);line-height:var(--plasma-typo-body-xs-line-height);}"
+    `margin:-0.5rem auto 2.5rem auto;width:fit-content;position:relative;&:before{content:'Подтема';position:absolute;top:50%;transform:translate(-100%,-50%);left:-0.75rem;color:var(--text-tertiary);font-family:var(--plasma-typo-body-xs-font-family);font-size:var(--plasma-typo-body-xs-font-size);font-style:var(--plasma-typo-body-xs-font-style);font-weight:var(--plasma-typo-body-xs-font-weight);bold-font-weight:var(--plasma-typo-body-xs-bold-font-weight);letter-spacing:var(--plasma-typo-body-xs-letter-spacing);line-height:var(--plasma-typo-body-xs-line-height);}`
 ]);
-var StyledSegmentItem = (0, _styledcomponents.default)(_Segment.SegmentItem).withConfig({
+const StyledSegmentItem = (0, _styledcomponents.default)(_Segment.SegmentItem).withConfig({
     displayName: "Colors.styles__StyledSegmentItem",
     componentId: "sc-e9243388-2"
 })([
-    "",
-    ":1.75rem;",
-    ":0.375rem 0.5rem;"
+    ``,
+    `:1.75rem;`,
+    `:0.375rem 0.5rem;`
 ], _styledcomponents1.segmentTokens.itemHeight, _styledcomponents1.segmentTokens.itemPilledPadding);
-var AccordionInfo = _styledcomponents.default.div.withConfig({
+const AccordionInfo = _styledcomponents.default.div.withConfig({
     displayName: "Colors.styles__AccordionInfo",
     componentId: "sc-e9243388-3"
 })([
-    "display:grid;grid-template-columns:16.75rem 9.938rem 2.375rem 3.813rem 9.313rem;grid-column-gap:1.5rem;font-family:var(--plasma-typo-body-m-font-family);font-size:var(--plasma-typo-body-m-font-size);font-style:var(--plasma-typo-body-m-font-style);font-weight:var(--plasma-typo-body-m-font-weight);letter-spacing:var(--plasma-typo-body-m-letter-spacing);line-height:var(--plasma-typo-body-m-line-height);"
+    `display:grid;grid-template-columns:16.75rem 9.938rem 2.375rem 3.813rem 9.313rem;grid-column-gap:1.5rem;font-family:var(--plasma-typo-body-m-font-family);font-size:var(--plasma-typo-body-m-font-size);font-style:var(--plasma-typo-body-m-font-style);font-weight:var(--plasma-typo-body-m-font-weight);letter-spacing:var(--plasma-typo-body-m-letter-spacing);line-height:var(--plasma-typo-body-m-line-height);`
 ]);
-var Subcategory = _styledcomponents.default.div.withConfig({
+const Subcategory = _styledcomponents.default.div.withConfig({
     displayName: "Colors.styles__Subcategory",
     componentId: "sc-e9243388-4"
 })([
-    "color:var(--text-secondary);"
+    `color:var(--text-secondary);`
 ]);
-var ColumnTitle = _styledcomponents.default.div.withConfig({
+const ColumnTitle = _styledcomponents.default.div.withConfig({
     displayName: "Colors.styles__ColumnTitle",
     componentId: "sc-e9243388-5"
 })([
-    "color:var(--text-tertiary);transition:opacity 0.2s;&.color{display:flex;align-items:center;gap:2.5rem;}&.hex{padding-left:3.75rem;}"
+    `color:var(--text-tertiary);transition:opacity 0.2s;&.color{display:flex;align-items:center;gap:2.5rem;}&.hex{padding-left:3.75rem;}`
 ]);
-var StyledAccordionItem = (0, _styledcomponents.default)(_Accordion.AccordionItem).withConfig({
+const StyledAccordionItem = (0, _styledcomponents.default)(_Accordion.AccordionItem).withConfig({
     displayName: "Colors.styles__StyledAccordionItem",
     componentId: "sc-e9243388-6"
 })([
-    "--plasma-accordion-item-padding:0;--plasma-accordion-item-padding-vertical:0;border-bottom:unset;width:50.375rem;div > div > div > svg{color:var(--text-secondary);}.accordion-item-body{margin-bottom:2.375rem;padding-top:0.125rem;transition:margin-bottom 0.2s,padding-top 0.2s;}[aria-expanded]{margin-bottom:1rem;}[aria-expanded='false']{margin-bottom:1.125rem;",
-    " ",
-    "{opacity:0;}}[aria-expanded='false'] + div > .accordion-item-body{margin:0;padding:0;}"
+    `--plasma-accordion-item-padding:0;--plasma-accordion-item-padding-vertical:0;border-bottom:unset;width:50.375rem;div > div > div > svg{color:var(--text-secondary);}.accordion-item-body{margin-bottom:2.375rem;padding-top:0.125rem;transition:margin-bottom 0.2s,padding-top 0.2s;}[aria-expanded]{margin-bottom:1rem;}[aria-expanded='false']{margin-bottom:1.125rem;`,
+    ` `,
+    `{opacity:0;}}[aria-expanded='false'] + div > .accordion-item-body{margin:0;padding:0;}`
 ], AccordionInfo, ColumnTitle);
-var TokenInfoWrapper = _styledcomponents.default.div.withConfig({
+const TokenInfoWrapper = _styledcomponents.default.div.withConfig({
     displayName: "Colors.styles__TokenInfoWrapper",
     componentId: "sc-e9243388-7"
 })([
-    "display:flex;flex-direction:column;gap:0.75rem;margin-top:-0.125rem;"
+    `display:flex;flex-direction:column;gap:0.75rem;margin-top:-0.125rem;`
 ]);
-var ColorTokenDataWrapper = _styledcomponents.default.div.withConfig({
+const ColorTokenDataWrapper = _styledcomponents.default.div.withConfig({
     displayName: "Colors.styles__ColorTokenDataWrapper",
     componentId: "sc-e9243388-8"
 })([
-    "display:flex;flex-direction:column;gap:0.5rem;"
+    `display:flex;flex-direction:column;gap:0.5rem;`
 ]);
-var StateDataWrapper = _styledcomponents.default.div.withConfig({
+const StateDataWrapper = _styledcomponents.default.div.withConfig({
     displayName: "Colors.styles__StateDataWrapper",
     componentId: "sc-e9243388-9"
 })([
-    "display:flex;flex-direction:column;gap:0.5rem;margin-bottom:0.75rem;"
+    `display:flex;flex-direction:column;gap:0.5rem;margin-bottom:0.75rem;`
 ]);
-var OpacityPart = _styledcomponents.default.span.withConfig({
+const OpacityPart = _styledcomponents.default.span.withConfig({
     displayName: "Colors.styles__OpacityPart",
     componentId: "sc-e9243388-10"
 })([
-    "color:var(--text-secondary);padding-left:0.125rem;"
+    `color:var(--text-secondary);padding-left:0.125rem;`
 ]);
-var TokenInfo = _styledcomponents.default.div.withConfig({
+const TokenInfo = _styledcomponents.default.div.withConfig({
     displayName: "Colors.styles__TokenInfo",
     componentId: "sc-e9243388-11"
 })([
-    "color:var(--text-paragraph);cursor:default;&.copy{cursor:copy;}&.color{display:flex;align-items:center;gap:2.5rem;}&.no-interaction{text-align:right;}&.hex{padding-left:3.75rem;}&:not(.no-interaction):hover{color:var(--text-paragraph-hover);",
-    "{color:var(--text-paragraph-hover);}}&:not(.no-interaction):active{color:var(--text-paragraph-active);",
-    "{color:var(--text-secondary-active);}}&.state{padding-left:1.5rem;color:var(--text-secondary);&:hover{color:var(--text-secondary);}&:active{color:var(--text-secondary-active);}}"
+    `color:var(--text-paragraph);cursor:default;&.copy{cursor:copy;}&.color{display:flex;align-items:center;gap:2.5rem;}&.no-interaction{text-align:right;}&.hex{padding-left:3.75rem;}&:not(.no-interaction):hover{color:var(--text-paragraph-hover);`,
+    `{color:var(--text-paragraph-hover);}}&:not(.no-interaction):active{color:var(--text-paragraph-active);`,
+    `{color:var(--text-secondary-active);}}&.state{padding-left:1.5rem;color:var(--text-secondary);&:hover{color:var(--text-secondary);}&:active{color:var(--text-secondary-active);}}`
 ], OpacityPart, OpacityPart);
-var ColorCircle = _styledcomponents.default.div.withConfig({
+const ColorCircle = _styledcomponents.default.div.withConfig({
     displayName: "Colors.styles__ColorCircle",
     componentId: "sc-e9243388-12"
 })([
-    "width:1.25rem;height:1.25rem;border-radius:50%;background:",
-    ";box-shadow:",
-    ";"
-], function(props) {
-    return props.background || 'transparent';
-}, function(props) {
-    return props.disableShadow ? 'none' : 'inset 0px 0px 0px 1px rgba(8, 8, 8, 0.12)';
-});
+    `width:1.25rem;height:1.25rem;border-radius:50%;background:`,
+    `;box-shadow:`,
+    `;`
+], (props)=>props.background || 'transparent', (props)=>props.disableShadow ? 'none' : 'inset 0px 0px 0px 1px rgba(8, 8, 8, 0.12)');

package/dist/styled-components/cjs/components/Tokens/NumberTokens/NumberTokens.styles.js

@@ -28,46 +28,46 @@ _export(exports, {
         return TokensWrapper;
     }
 });
-var _styledcomponents = /*#__PURE__*/ _interop_require_default(require("styled-components"));
+const _styledcomponents = /*#__PURE__*/ _interop_require_default(require("styled-components"));
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-var TokensWrapper = _styledcomponents.default.div.withConfig({
+const TokensWrapper = _styledcomponents.default.div.withConfig({
     displayName: "NumberTokens.styles__TokensWrapper",
     componentId: "sc-5cff0c2a-0"
 })([
-    "margin-top:1.5rem;margin-left:3rem;display:flex;flex-direction:column;gap:2rem;"
+    `margin-top:1.5rem;margin-left:3rem;display:flex;flex-direction:column;gap:2rem;`
 ]);
-var TokensTitle = _styledcomponents.default.h2.withConfig({
+const TokensTitle = _styledcomponents.default.h2.withConfig({
     displayName: "NumberTokens.styles__TokensTitle",
     componentId: "sc-5cff0c2a-1"
 })([
-    "margin:0;font-family:var(--plasma-typo-h2-font-family);font-size:var(--plasma-typo-h2-font-size);font-style:var(--plasma-typo-h2-font-style);font-weight:var(--plasma-typo-h2-font-weight);letter-spacing:var(--plasma-typo-h2-letter-spacing);line-height:var(--plasma-typo-h2-line-height);"
+    `margin:0;font-family:var(--plasma-typo-h2-font-family);font-size:var(--plasma-typo-h2-font-size);font-style:var(--plasma-typo-h2-font-style);font-weight:var(--plasma-typo-h2-font-weight);letter-spacing:var(--plasma-typo-h2-letter-spacing);line-height:var(--plasma-typo-h2-line-height);`
 ]);
-var TokensDataWrapper = _styledcomponents.default.div.withConfig({
+const TokensDataWrapper = _styledcomponents.default.div.withConfig({
     displayName: "NumberTokens.styles__TokensDataWrapper",
     componentId: "sc-5cff0c2a-2"
 })([
-    "display:flex;flex-direction:column;gap:1rem;"
+    `display:flex;flex-direction:column;gap:1rem;`
 ]);
-var TokenInfo = _styledcomponents.default.p.withConfig({
+const TokenInfo = _styledcomponents.default.p.withConfig({
     displayName: "NumberTokens.styles__TokenInfo",
     componentId: "sc-5cff0c2a-3"
 })([
-    "margin:0;font-family:var(--plasma-typo-body-m-font-family);font-size:var(--plasma-typo-body-m-font-size);font-style:var(--plasma-typo-body-m-font-style);font-weight:var(--plasma-typo-body-m-font-weight);letter-spacing:var(--plasma-typo-body-m-letter-spacing);line-height:var(--plasma-typo-body-m-line-height);cursor:copy;color:var(--text-paragraph);&.value{text-align:end;}&:hover{color:var(--text-paragraph-hover);}&:active{color:var(--text-paragraph-active);}"
+    `margin:0;font-family:var(--plasma-typo-body-m-font-family);font-size:var(--plasma-typo-body-m-font-size);font-style:var(--plasma-typo-body-m-font-style);font-weight:var(--plasma-typo-body-m-font-weight);letter-spacing:var(--plasma-typo-body-m-letter-spacing);line-height:var(--plasma-typo-body-m-line-height);cursor:copy;color:var(--text-paragraph);&.value{text-align:end;}&:hover{color:var(--text-paragraph-hover);}&:active{color:var(--text-paragraph-active);}`
 ]);
-var TokenData = _styledcomponents.default.div.withConfig({
+const TokenData = _styledcomponents.default.div.withConfig({
     displayName: "NumberTokens.styles__TokenData",
     componentId: "sc-5cff0c2a-4"
 })([
-    "display:grid;grid-template-columns:16.75rem 3.813rem;column-gap:1.5rem;row-gap:0.75rem;"
+    `display:grid;grid-template-columns:16.75rem 3.813rem;column-gap:1.5rem;row-gap:0.75rem;`
 ]);
-var TokenDataHeader = (0, _styledcomponents.default)(TokenData).withConfig({
+const TokenDataHeader = (0, _styledcomponents.default)(TokenData).withConfig({
     displayName: "NumberTokens.styles__TokenDataHeader",
     componentId: "sc-5cff0c2a-5"
 })([
-    "",
-    "{color:var(--text-secondary);cursor:default;pointer-events:none;&:hover{color:var(--text-secondary);}&:active{color:var(--text-secondary);}}"
+    ``,
+    `{color:var(--text-secondary);cursor:default;pointer-events:none;&:hover{color:var(--text-secondary);}&:active{color:var(--text-secondary);}}`
 ], TokenInfo);