@salutejs/plasma-new-hope 0.338.0-canary.2280.18389973911.0 → 0.338.0-canary.2280.18409919038.0

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

@@ -2,31 +2,115 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "base", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get StyledBackgroundCircle () {
+        return StyledBackgroundCircle;
+    },
+    get StyledContent () {
+        return StyledContent;
+    },
+    get StyledProgressCircle () {
+        return StyledProgressCircle;
+    },
+    get StyledSVG () {
+        return StyledSVG;
+    },
+    get base () {
         return base;
     }
 });
-var _styledcomponents = require("styled-components");
+var _styledcomponents = /*#__PURE__*/ _interop_require_wildcard(require("styled-components"));
 var _ProgressBarCirculartokens = require("./ProgressBarCircular.tokens");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
 var base = (0, _styledcomponents.css)([
     "position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(",
     ");height:var(",
-    ");.",
-    "{width:100%;height:100%;}.",
-    "{fill:none;stroke:var(",
-    ");stroke-width:var(",
-    ");}.",
-    "{fill:none;stroke:var(",
-    ");stroke-width:var(",
-    ");stroke-linecap:round;transition:stroke-dashoffset 0.3s ease-in-out;}.",
-    "{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(",
+    ");"
+], _ProgressBarCirculartokens.tokens.width, _ProgressBarCirculartokens.tokens.height);
+var StyledSVG = _styledcomponents.default.svg.withConfig({
+    displayName: "ProgressBarCircular.styles__StyledSVG",
+    componentId: "sc-d5c5c64b-0"
+})([
+    "width:100%;height:100%;"
+]);
+var StyledBackgroundCircle = _styledcomponents.default.circle.withConfig({
+    displayName: "ProgressBarCircular.styles__StyledBackgroundCircle",
+    componentId: "sc-d5c5c64b-1"
+})([
+    "fill:none;stroke:var(",
+    ");stroke-width:",
+    ";"
+], _ProgressBarCirculartokens.tokens.backgroundStroke, function(param) {
+    var customStrokeWidth = param.customStrokeWidth;
+    return customStrokeWidth ? "".concat(customStrokeWidth, "px") : "var(".concat(_ProgressBarCirculartokens.tokens.backgroundStrokeWidth, ")");
+});
+var StyledProgressCircle = _styledcomponents.default.circle.withConfig({
+    displayName: "ProgressBarCircular.styles__StyledProgressCircle",
+    componentId: "sc-d5c5c64b-2"
+})([
+    "fill:none;stroke:var(",
+    ");stroke-width:",
+    ";stroke-linecap:round;transition:stroke-dashoffset 0.3s ease-in-out;"
+], _ProgressBarCirculartokens.tokens.progressStroke, function(param) {
+    var customStrokeWidth = param.customStrokeWidth;
+    return customStrokeWidth ? "".concat(customStrokeWidth, "px") : "var(".concat(_ProgressBarCirculartokens.tokens.progressStrokeWidth, ")");
+});
+var StyledContent = _styledcomponents.default.div.withConfig({
+    displayName: "ProgressBarCircular.styles__StyledContent",
+    componentId: "sc-d5c5c64b-3"
+})([
+    "position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(",
     ");font-family:var(",
     ");font-size:var(",
     ");font-style:var(",
     ");font-weight:var(",
     ");letter-spacing:var(",
     ");line-height:var(",
-    ");display:flex;align-items:center;justify-content:center;}"
-], _ProgressBarCirculartokens.tokens.width, _ProgressBarCirculartokens.tokens.height, _ProgressBarCirculartokens.classes.svg, _ProgressBarCirculartokens.classes.backgroundCircle, _ProgressBarCirculartokens.tokens.backgroundStroke, _ProgressBarCirculartokens.tokens.backgroundStrokeWidth, _ProgressBarCirculartokens.classes.progressCircle, _ProgressBarCirculartokens.tokens.progressStroke, _ProgressBarCirculartokens.tokens.progressStrokeWidth, _ProgressBarCirculartokens.classes.content, _ProgressBarCirculartokens.tokens.contentColor, _ProgressBarCirculartokens.tokens.contentFontFamily, _ProgressBarCirculartokens.tokens.contentFontSize, _ProgressBarCirculartokens.tokens.contentFontStyle, _ProgressBarCirculartokens.tokens.contentFontWeight, _ProgressBarCirculartokens.tokens.contentLetterSpacing, _ProgressBarCirculartokens.tokens.contentLineHeight);
+    ");display:flex;align-items:center;justify-content:center;"
+], _ProgressBarCirculartokens.tokens.contentColor, _ProgressBarCirculartokens.tokens.contentFontFamily, _ProgressBarCirculartokens.tokens.contentFontSize, _ProgressBarCirculartokens.tokens.contentFontStyle, _ProgressBarCirculartokens.tokens.contentFontWeight, _ProgressBarCirculartokens.tokens.contentLetterSpacing, _ProgressBarCirculartokens.tokens.contentLineHeight);

package/styled-components/cjs/examples/components/Combobox/Combobox.js

@@ -1 +1,16 @@
 "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Combobox", {
+    enumerable: true,
+    get: function() {
+        return Combobox;
+    }
+});
+var _engines = require("../../../engines");
+var _ = require("../../..");
+var _Comboboxconfig = require("./Combobox.config");
+var mergedConfig = (0, _engines.mergeConfig)(_.comboboxNewConfig, _Comboboxconfig.config);
+var ComboboxComponent = (0, _engines.component)(mergedConfig);
+var Combobox = ComboboxComponent;

package/styled-components/cjs/examples/components/ProgressBarCircular/ProgressBarCircular.config.js

@@ -55,7 +55,7 @@ var config = {
             ], _ProgressBarCircular.progressBarCircularTokens.backgroundStroke, _ProgressBarCircular.progressBarCircularTokens.progressStroke, _ProgressBarCircular.progressBarCircularTokens.contentColor)
         },
         size: {
-            xl: (0, _styledcomponents.css)([
+            xxl: (0, _styledcomponents.css)([
                 "",
                 ":8rem;",
                 ":8rem;",
@@ -68,7 +68,7 @@ var config = {
                 ":var(--plasma-typo-h2-letter-spacing);",
                 ":var(--plasma-typo-h2-line-height);"
             ], _ProgressBarCircular.progressBarCircularTokens.width, _ProgressBarCircular.progressBarCircularTokens.height, _ProgressBarCircular.progressBarCircularTokens.backgroundStrokeWidth, _ProgressBarCircular.progressBarCircularTokens.progressStrokeWidth, _ProgressBarCircular.progressBarCircularTokens.contentFontFamily, _ProgressBarCircular.progressBarCircularTokens.contentFontSize, _ProgressBarCircular.progressBarCircularTokens.contentFontStyle, _ProgressBarCircular.progressBarCircularTokens.contentFontWeight, _ProgressBarCircular.progressBarCircularTokens.contentLetterSpacing, _ProgressBarCircular.progressBarCircularTokens.contentLineHeight),
-            l: (0, _styledcomponents.css)([
+            xl: (0, _styledcomponents.css)([
                 "",
                 ":5.5rem;",
                 ":5.5rem;",
@@ -81,12 +81,25 @@ var config = {
                 ":var(--plasma-typo-h5-letter-spacing);",
                 ":var(--plasma-typo-h5-line-height);"
             ], _ProgressBarCircular.progressBarCircularTokens.width, _ProgressBarCircular.progressBarCircularTokens.height, _ProgressBarCircular.progressBarCircularTokens.backgroundStrokeWidth, _ProgressBarCircular.progressBarCircularTokens.progressStrokeWidth, _ProgressBarCircular.progressBarCircularTokens.contentFontFamily, _ProgressBarCircular.progressBarCircularTokens.contentFontSize, _ProgressBarCircular.progressBarCircularTokens.contentFontStyle, _ProgressBarCircular.progressBarCircularTokens.contentFontWeight, _ProgressBarCircular.progressBarCircularTokens.contentLetterSpacing, _ProgressBarCircular.progressBarCircularTokens.contentLineHeight),
-            m: (0, _styledcomponents.css)([
+            l: (0, _styledcomponents.css)([
                 "",
                 ":3.5rem;",
                 ":3.5rem;",
                 ":0.125rem;",
                 ":0.125rem;",
+                ":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-body-font-weight);",
+                ":var(--plasma-typo-body-l-letter-spacing);",
+                ":var(--plasma-typo-body-l-line-height);"
+            ], _ProgressBarCircular.progressBarCircularTokens.width, _ProgressBarCircular.progressBarCircularTokens.height, _ProgressBarCircular.progressBarCircularTokens.backgroundStrokeWidth, _ProgressBarCircular.progressBarCircularTokens.progressStrokeWidth, _ProgressBarCircular.progressBarCircularTokens.contentFontFamily, _ProgressBarCircular.progressBarCircularTokens.contentFontSize, _ProgressBarCircular.progressBarCircularTokens.contentFontStyle, _ProgressBarCircular.progressBarCircularTokens.contentFontWeight, _ProgressBarCircular.progressBarCircularTokens.contentLetterSpacing, _ProgressBarCircular.progressBarCircularTokens.contentLineHeight),
+            m: (0, _styledcomponents.css)([
+                "",
+                ":3rem;",
+                ":3rem;",
+                ":0.125rem;",
+                ":0.125rem;",
                 ":var(--plasma-typo-body-m-font-family);",
                 ":var(--plasma-typo-body-m-font-size);",
                 ":var(--plasma-typo-body-m-font-style);",

package/styled-components/cjs/index.js

@@ -86,6 +86,7 @@ _export_star(require("./components/Tour"), exports);
 _export_star(require("./components/EmbedIconButton"), exports);
 _export_star(require("./components/InformationWrapper"), exports);
 _export_star(require("./components/NavigationDrawer"), exports);
+_export_star(require("./components/ProgressBarCircular"), exports);
 _export_star(require("./components/TimePicker"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {

package/styled-components/cjs/utils/getTokenValueInPixels.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "getTokenValueInPixels", {
+    enumerable: true,
+    get: function() {
+        return getTokenValueInPixels;
+    }
+});
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+var getTokenValueInPixels = function(tokenName, element) {
+    var tokenValue = getComputedStyle(element).getPropertyValue(tokenName).trim();
+    if (!tokenValue) {
+        return undefined;
+    }
+    var valueMatch = tokenValue.match(/^([\d.]+)(rem|px)$/);
+    if (!valueMatch) {
+        return undefined;
+    }
+    var _valueMatch = _sliced_to_array(valueMatch, 3), number = _valueMatch[1], unit = _valueMatch[2];
+    var numericValue = parseFloat(number);
+    if (unit === 'px') {
+        return numericValue;
+    }
+    if (unit === 'rem') {
+        var rootFontSize = parseFloat(getComputedStyle(element).fontSize);
+        return numericValue * rootFontSize;
+    }
+    return undefined;
+};

package/styled-components/cjs/utils/index.js

@@ -42,6 +42,9 @@ _export(exports, {
     get getSizeValueFromProp () {
         return _getSizeValueFromProp.getSizeValueFromProp;
     },
+    get getTokenValueInPixels () {
+        return _getTokenValueInPixels.getTokenValueInPixels;
+    },
     get isEmpty () {
         return _isEmpty.isEmpty;
     },
@@ -75,6 +78,7 @@ _export_star(require("./initialValuesHelper"), exports);
 var _noop = require("./noop");
 var _getHeightAsNumber = require("./getHeightAsNumber");
 var _createConditionalComponent = require("./createConditionalComponent");
+var _getTokenValueInPixels = require("./getTokenValueInPixels");
 var _fixedForwardRef = require("./fixedForwardRef");
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {

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

@@ -1,3 +1,11 @@
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -11,6 +19,33 @@ function _define_property(obj, key, value) {
     }
     return obj;
 }
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
 function _object_spread(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
@@ -53,52 +88,83 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import React, { forwardRef } from "react";
-import { cx } from "../../utils";
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+import React, { forwardRef, useState, useRef, useLayoutEffect } from "react";
+import { useForkRef } from "@salutejs/plasma-core";
+import { cx, getTokenValueInPixels } from "../../utils";
 import { base as viewCSS } from "./variations/_view/base";
 import { base as sizeCSS } from "./variations/_size/base";
-import { base } from "./ProgressBarCircular.styles";
-import { classes } from "./ProgressBarCircular.tokens";
+import { base, StyledSVG, StyledBackgroundCircle, StyledProgressCircle, StyledContent } from "./ProgressBarCircular.styles";
+import { classes, tokens } from "./ProgressBarCircular.tokens";
 export var progressBarCircularRoot = function(Root) {
     return /*#__PURE__*/ forwardRef(function(props, ref) {
-        var _props_value = props.value, value = _props_value === void 0 ? 0 : _props_value, _props_maxValue = props.maxValue, maxValue = _props_maxValue === void 0 ? 100 : _props_maxValue, size = props.size, view = props.view, children = props.children, className = props.className, rest = _object_without_properties(props, [
+        var _props_value = props.value, value = _props_value === void 0 ? 0 : _props_value, _props_maxValue = props.maxValue, maxValue = _props_maxValue === void 0 ? 100 : _props_maxValue, size = props.size, view = props.view, children = props.children, className = props.className, strokeWidthProp = props.strokeWidth, rest = _object_without_properties(props, [
             "value",
             "maxValue",
             "size",
             "view",
             "children",
-            "className"
+            "className",
+            "strokeWidth"
         ]);
+        var _useState = _sliced_to_array(useState(0), 2), strokeWidthCSS = _useState[0], setStrokeWidthCSS = _useState[1];
+        var _useState1 = _sliced_to_array(useState(0), 2), widthCSS = _useState1[0], setWidthCSS = _useState1[1];
+        var rootRef = useRef(null);
+        var rootForkRef = useForkRef(rootRef, ref);
         var clampedValue = Math.min(Math.max(value, 0), maxValue);
         var percentage = clampedValue / maxValue * 100;
+        var strokeWidth = (strokeWidthProp !== null && strokeWidthProp !== void 0 ? strokeWidthProp : strokeWidthCSS) * 2;
         var center = 50;
-        var radius = 46;
+        var radius = center - 50 / widthCSS * (strokeWidth / 2);
         var circumference = 2 * Math.PI * radius;
         var strokeDashoffset = circumference - percentage / 100 * circumference;
+        useLayoutEffect(function() {
+            if (rootRef.current) {
+                var strokeWidthFromCSS = getTokenValueInPixels(tokens.progressStrokeWidth, rootRef.current);
+                var widthFromCSS = getTokenValueInPixels(tokens.width, rootRef.current);
+                setStrokeWidthCSS(strokeWidthFromCSS !== null && strokeWidthFromCSS !== void 0 ? strokeWidthFromCSS : 0);
+                setWidthCSS(widthFromCSS !== null && widthFromCSS !== void 0 ? widthFromCSS : 0);
+            }
+        }, [
+            rootRef,
+            size
+        ]);
         return /*#__PURE__*/ React.createElement(Root, _object_spread({
-            ref: ref,
+            ref: rootForkRef,
             view: view,
             size: size,
             className: cx(className)
-        }, rest), /*#__PURE__*/ React.createElement("svg", {
+        }, rest), /*#__PURE__*/ React.createElement(StyledSVG, {
             width: "100%",
             height: "100%",
             viewBox: "0 0 100 100",
             className: classes.svg
-        }, /*#__PURE__*/ React.createElement("circle", {
+        }, /*#__PURE__*/ React.createElement(StyledBackgroundCircle, {
+            customStrokeWidth: 50 / widthCSS * strokeWidth,
             cx: center,
             cy: center,
             r: radius,
             className: classes.backgroundCircle
-        }), /*#__PURE__*/ React.createElement("circle", {
+        }), /*#__PURE__*/ React.createElement(StyledProgressCircle, {
             cx: center,
             cy: center,
             r: radius,
+            customStrokeWidth: 50 / widthCSS * strokeWidth,
             className: classes.progressCircle,
             strokeDasharray: circumference,
             strokeDashoffset: strokeDashoffset,
             transform: "rotate(-90 50 50)"
-        })), children && /*#__PURE__*/ React.createElement("div", {
+        })), children && /*#__PURE__*/ React.createElement(StyledContent, {
             className: classes.content
         }, children));
     });

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

@@ -1,22 +1,49 @@
 import { css } from "styled-components";
-import { classes, tokens } from "./ProgressBarCircular.tokens";
+import styled from "styled-components";
+import { tokens } from "./ProgressBarCircular.tokens";
 export var base = css([
     "position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(",
     ");height:var(",
-    ");.",
-    "{width:100%;height:100%;}.",
-    "{fill:none;stroke:var(",
-    ");stroke-width:var(",
-    ");}.",
-    "{fill:none;stroke:var(",
-    ");stroke-width:var(",
-    ");stroke-linecap:round;transition:stroke-dashoffset 0.3s ease-in-out;}.",
-    "{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(",
+    ");"
+], tokens.width, tokens.height);
+export var StyledSVG = styled.svg.withConfig({
+    displayName: "ProgressBarCircular.styles__StyledSVG",
+    componentId: "sc-d5c5c64b-0"
+})([
+    "width:100%;height:100%;"
+]);
+export var StyledBackgroundCircle = styled.circle.withConfig({
+    displayName: "ProgressBarCircular.styles__StyledBackgroundCircle",
+    componentId: "sc-d5c5c64b-1"
+})([
+    "fill:none;stroke:var(",
+    ");stroke-width:",
+    ";"
+], tokens.backgroundStroke, function(param) {
+    var customStrokeWidth = param.customStrokeWidth;
+    return customStrokeWidth ? "".concat(customStrokeWidth, "px") : "var(".concat(tokens.backgroundStrokeWidth, ")");
+});
+export var StyledProgressCircle = styled.circle.withConfig({
+    displayName: "ProgressBarCircular.styles__StyledProgressCircle",
+    componentId: "sc-d5c5c64b-2"
+})([
+    "fill:none;stroke:var(",
+    ");stroke-width:",
+    ";stroke-linecap:round;transition:stroke-dashoffset 0.3s ease-in-out;"
+], tokens.progressStroke, function(param) {
+    var customStrokeWidth = param.customStrokeWidth;
+    return customStrokeWidth ? "".concat(customStrokeWidth, "px") : "var(".concat(tokens.progressStrokeWidth, ")");
+});
+export var StyledContent = styled.div.withConfig({
+    displayName: "ProgressBarCircular.styles__StyledContent",
+    componentId: "sc-d5c5c64b-3"
+})([
+    "position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(",
     ");font-family:var(",
     ");font-size:var(",
     ");font-style:var(",
     ");font-weight:var(",
     ");letter-spacing:var(",
     ");line-height:var(",
-    ");display:flex;align-items:center;justify-content:center;}"
-], tokens.width, tokens.height, classes.svg, classes.backgroundCircle, tokens.backgroundStroke, tokens.backgroundStrokeWidth, classes.progressCircle, tokens.progressStroke, tokens.progressStrokeWidth, classes.content, tokens.contentColor, tokens.contentFontFamily, tokens.contentFontSize, tokens.contentFontStyle, tokens.contentFontWeight, tokens.contentLetterSpacing, tokens.contentLineHeight);
+    ");display:flex;align-items:center;justify-content:center;"
+], tokens.contentColor, tokens.contentFontFamily, tokens.contentFontSize, tokens.contentFontStyle, tokens.contentFontWeight, tokens.contentLetterSpacing, tokens.contentLineHeight);

package/styled-components/es/examples/components/ProgressBarCircular/ProgressBarCircular.config.js

@@ -45,7 +45,7 @@ export var config = {
             ], progressBarCircularTokens.backgroundStroke, progressBarCircularTokens.progressStroke, progressBarCircularTokens.contentColor)
         },
         size: {
-            xl: css([
+            xxl: css([
                 "",
                 ":8rem;",
                 ":8rem;",
@@ -58,7 +58,7 @@ export var config = {
                 ":var(--plasma-typo-h2-letter-spacing);",
                 ":var(--plasma-typo-h2-line-height);"
             ], progressBarCircularTokens.width, progressBarCircularTokens.height, progressBarCircularTokens.backgroundStrokeWidth, progressBarCircularTokens.progressStrokeWidth, progressBarCircularTokens.contentFontFamily, progressBarCircularTokens.contentFontSize, progressBarCircularTokens.contentFontStyle, progressBarCircularTokens.contentFontWeight, progressBarCircularTokens.contentLetterSpacing, progressBarCircularTokens.contentLineHeight),
-            l: css([
+            xl: css([
                 "",
                 ":5.5rem;",
                 ":5.5rem;",
@@ -71,12 +71,25 @@ export var config = {
                 ":var(--plasma-typo-h5-letter-spacing);",
                 ":var(--plasma-typo-h5-line-height);"
             ], progressBarCircularTokens.width, progressBarCircularTokens.height, progressBarCircularTokens.backgroundStrokeWidth, progressBarCircularTokens.progressStrokeWidth, progressBarCircularTokens.contentFontFamily, progressBarCircularTokens.contentFontSize, progressBarCircularTokens.contentFontStyle, progressBarCircularTokens.contentFontWeight, progressBarCircularTokens.contentLetterSpacing, progressBarCircularTokens.contentLineHeight),
-            m: css([
+            l: css([
                 "",
                 ":3.5rem;",
                 ":3.5rem;",
                 ":0.125rem;",
                 ":0.125rem;",
+                ":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-body-font-weight);",
+                ":var(--plasma-typo-body-l-letter-spacing);",
+                ":var(--plasma-typo-body-l-line-height);"
+            ], progressBarCircularTokens.width, progressBarCircularTokens.height, progressBarCircularTokens.backgroundStrokeWidth, progressBarCircularTokens.progressStrokeWidth, progressBarCircularTokens.contentFontFamily, progressBarCircularTokens.contentFontSize, progressBarCircularTokens.contentFontStyle, progressBarCircularTokens.contentFontWeight, progressBarCircularTokens.contentLetterSpacing, progressBarCircularTokens.contentLineHeight),
+            m: css([
+                "",
+                ":3rem;",
+                ":3rem;",
+                ":0.125rem;",
+                ":0.125rem;",
                 ":var(--plasma-typo-body-m-font-family);",
                 ":var(--plasma-typo-body-m-font-size);",
                 ":var(--plasma-typo-body-m-font-style);",

package/styled-components/es/index.js

@@ -84,4 +84,5 @@ export * from "./components/Tour";
 export * from "./components/EmbedIconButton";
 export * from "./components/InformationWrapper";
 export * from "./components/NavigationDrawer";
+export * from "./components/ProgressBarCircular";
 export * from "./components/TimePicker";

package/styled-components/es/utils/getTokenValueInPixels.js

@@ -0,0 +1,66 @@
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+export var getTokenValueInPixels = function(tokenName, element) {
+    var tokenValue = getComputedStyle(element).getPropertyValue(tokenName).trim();
+    if (!tokenValue) {
+        return undefined;
+    }
+    var valueMatch = tokenValue.match(/^([\d.]+)(rem|px)$/);
+    if (!valueMatch) {
+        return undefined;
+    }
+    var _valueMatch = _sliced_to_array(valueMatch, 3), number = _valueMatch[1], unit = _valueMatch[2];
+    var numericValue = parseFloat(number);
+    if (unit === 'px') {
+        return numericValue;
+    }
+    if (unit === 'rem') {
+        var rootFontSize = parseFloat(getComputedStyle(element).fontSize);
+        return numericValue * rootFontSize;
+    }
+    return undefined;
+};

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

@@ -13,6 +13,7 @@ export * from "./initialValuesHelper";
 export { noop } from "./noop";
 export { getHeightAsNumber } from "./getHeightAsNumber";
 export { createConditionalComponent } from "./createConditionalComponent";
+export { getTokenValueInPixels } from "./getTokenValueInPixels";
 export var cx = function() {
     for(var _len = arguments.length, classes = new Array(_len), _key = 0; _key < _len; _key++){
         classes[_key] = arguments[_key];

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

@@ -1 +1 @@
-{"version":3,"file":"ProgressBarCircular.d.ts","sourceRoot":"","sources":["../../../src/components/ProgressBarCircular/ProgressBarCircular.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAK/C,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AAI5E,eAAO,MAAM,uBAAuB,SAAU,SAAS,CAAC,cAAc,EAAE,wBAAwB,CAAC,uLA+B3F,CAAC;AAEP,eAAO,MAAM,yBAAyB;;;mBAjCQ,SAAS,CAAC,cAAc,EAAE,wBAAwB,CAAC;;;;;;;;;;;;;;CAkDhG,CAAC"}
+{"version":3,"file":"ProgressBarCircular.d.ts","sourceRoot":"","sources":["../../../src/components/ProgressBarCircular/ProgressBarCircular.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwD,MAAM,OAAO,CAAC;AAG7E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAK/C,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AAU5E,eAAO,MAAM,uBAAuB,SAAU,SAAS,CAAC,cAAc,EAAE,wBAAwB,CAAC,uLA+D3F,CAAC;AAEP,eAAO,MAAM,yBAAyB;;;mBAjEQ,SAAS,CAAC,cAAc,EAAE,wBAAwB,CAAC;;;;;;;;;;;;;;CAkFhG,CAAC"}

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

@@ -1,2 +1,10 @@
 export declare const base: import("@linaria/core").LinariaClassName;
+export declare const StyledSVG: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGSVGElement> & Record<never, unknown>>;
+export declare const StyledBackgroundCircle: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGCircleElement> & {
+    customStrokeWidth?: number;
+}>;
+export declare const StyledProgressCircle: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGCircleElement> & {
+    customStrokeWidth?: number;
+}>;
+export declare const StyledContent: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 //# sourceMappingURL=ProgressBarCircular.styles.d.ts.map