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

package/cjs/components/ProgressBarCircular/ProgressBarCircular.css

@@ -0,0 +1,5 @@
+.ProgressBarCircular_styles_m8m7d7_b18reh89__dca58878{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;box-sizing:border-box;width:var(--plasma-progressbar-circular-width);height:var(--plasma-progressbar-circular-height);}
+.ProgressBarCircular_styles_m8m7d7_s2tt3b5__dca58878{width:100%;height:100%;}
+.ProgressBarCircular_styles_m8m7d7_slvt37h__dca58878{fill:none;stroke:var(--plasma-progressbar-circular-background-stroke);stroke-width:var(--slvt37h-0);}
+.ProgressBarCircular_styles_m8m7d7_s1d8ncmi__dca58878{fill:none;stroke:var(--plasma-progressbar-circular-progress-stroke);stroke-width:var(--s1d8ncmi-0);stroke-linecap:round;-webkit-transition:stroke-dashoffset 0.3s ease-in-out;transition:stroke-dashoffset 0.3s ease-in-out;}
+.ProgressBarCircular_styles_m8m7d7_sg9aoc4__dca58878{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);color:var(--plasma-progressbar-circular-content-color);font-family:var(--plasma-progressbar-circular-content-font-family);font-size:var(--plasma-progressbar-circular-content-font-size);font-style:var(--plasma-progressbar-circular-content-font-style);font-weight:var(--plasma-progressbar-circular-content-font-weight);-webkit-letter-spacing:var(--plasma-progressbar-circular-content-letter-spacing);-moz-letter-spacing:var(--plasma-progressbar-circular-content-letter-spacing);-ms-letter-spacing:var(--plasma-progressbar-circular-content-letter-spacing);letter-spacing:var(--plasma-progressbar-circular-content-letter-spacing);line-height:var(--plasma-progressbar-circular-content-line-height);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}

package/cjs/components/ProgressBarCircular/ProgressBarCircular.js

@@ -0,0 +1,108 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var plasmaCore = require('@salutejs/plasma-core');
+var index = require('../../utils/index.js');
+var base = require('./variations/_view/base.js');
+var base$1 = require('./variations/_size/base.js');
+var ProgressBarCircular_styles = require('./ProgressBarCircular.styles.js');
+var ProgressBarCircular_tokens = require('./ProgressBarCircular.tokens.js');
+var getTokenValueInPixels = require('../../utils/getTokenValueInPixels.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var _excluded = ["value", "maxValue", "size", "view", "children", "className", "strokeWidth"];
+var progressBarCircularRoot = function progressBarCircularRoot(Root) {
+  return /*#__PURE__*/React.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,
+      strokeWidthProp = props.strokeWidth,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
+    var _useState = React.useState(0),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      strokeWidthCSS = _useState2[0],
+      setStrokeWidthCSS = _useState2[1];
+    var _useState3 = React.useState(0),
+      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+      widthCSS = _useState4[0],
+      setWidthCSS = _useState4[1];
+    var rootRef = React.useRef(null);
+    var rootForkRef = plasmaCore.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 = center - 50 / widthCSS * (strokeWidth / 2);
+    var circumference = 2 * Math.PI * radius;
+    var strokeDashoffset = circumference - percentage / 100 * circumference;
+    React.useLayoutEffect(function () {
+      if (rootRef.current) {
+        var strokeWidthFromCSS = getTokenValueInPixels.getTokenValueInPixels(ProgressBarCircular_tokens.tokens.progressStrokeWidth, rootRef.current);
+        var widthFromCSS = getTokenValueInPixels.getTokenValueInPixels(ProgressBarCircular_tokens.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__default.default.createElement(Root, _rollupPluginBabelHelpers.extends({
+      ref: rootForkRef,
+      view: view,
+      size: size,
+      className: index.cx(className)
+    }, rest), /*#__PURE__*/React__default.default.createElement(ProgressBarCircular_styles.StyledSVG, {
+      width: "100%",
+      height: "100%",
+      viewBox: "0 0 100 100",
+      className: ProgressBarCircular_tokens.classes.svg
+    }, /*#__PURE__*/React__default.default.createElement(ProgressBarCircular_styles.StyledBackgroundCircle, {
+      customStrokeWidth: 50 / widthCSS * strokeWidth,
+      cx: center,
+      cy: center,
+      r: radius,
+      className: ProgressBarCircular_tokens.classes.backgroundCircle
+    }), /*#__PURE__*/React__default.default.createElement(ProgressBarCircular_styles.StyledProgressCircle, {
+      cx: center,
+      cy: center,
+      r: radius,
+      customStrokeWidth: 50 / widthCSS * strokeWidth,
+      className: ProgressBarCircular_tokens.classes.progressCircle,
+      strokeDasharray: circumference,
+      strokeDashoffset: strokeDashoffset,
+      transform: "rotate(-90 50 50)"
+    })), children && /*#__PURE__*/React__default.default.createElement(ProgressBarCircular_styles.StyledContent, {
+      className: ProgressBarCircular_tokens.classes.content
+    }, children));
+  });
+};
+var progressBarCircularConfig = {
+  name: 'ProgressBarCircular',
+  tag: 'div',
+  layout: progressBarCircularRoot,
+  base: ProgressBarCircular_styles.base,
+  variations: {
+    view: {
+      css: base.base
+    },
+    size: {
+      css: base$1.base
+    }
+  },
+  defaults: {
+    view: 'primary',
+    size: 'm'
+  }
+};
+
+exports.progressBarCircularConfig = progressBarCircularConfig;
+exports.progressBarCircularRoot = progressBarCircularRoot;
+//# sourceMappingURL=ProgressBarCircular.js.map

package/cjs/components/ProgressBarCircular/ProgressBarCircular.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBarCircular.js","sources":["../../../src/components/ProgressBarCircular/ProgressBarCircular.tsx"],"sourcesContent":["import React, { forwardRef, useState, useRef, useLayoutEffect } from 'react';\nimport { useForkRef } from '@salutejs/plasma-core';\n\nimport type { RootProps } from '../../engines';\nimport { cx, getTokenValueInPixels } from '../../utils';\n\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport type { ProgressBarCircularProps } from './ProgressBarCircular.types';\nimport {\n    base,\n    StyledSVG,\n    StyledBackgroundCircle,\n    StyledProgressCircle,\n    StyledContent,\n} from './ProgressBarCircular.styles';\nimport { classes, tokens } from './ProgressBarCircular.tokens';\n\nexport const progressBarCircularRoot = (Root: RootProps<HTMLDivElement, ProgressBarCircularProps>) =>\n    forwardRef<HTMLDivElement, ProgressBarCircularProps>((props, ref) => {\n        const {\n            value = 0,\n            maxValue = 100,\n            size,\n            view,\n            children,\n            className,\n            strokeWidth: strokeWidthProp,\n            ...rest\n        } = props;\n\n        const [strokeWidthCSS, setStrokeWidthCSS] = useState<number>(0);\n        const [widthCSS, setWidthCSS] = useState<number>(0);\n        const rootRef = useRef<HTMLDivElement>(null);\n\n        const rootForkRef = useForkRef(rootRef, ref);\n\n        const clampedValue = Math.min(Math.max(value, 0), maxValue);\n        const percentage = (clampedValue / maxValue) * 100;\n\n        const strokeWidth = (strokeWidthProp ?? strokeWidthCSS) * 2;\n\n        const center = 50;\n        const radius = center - (50 / widthCSS) * (strokeWidth / 2);\n        const circumference = 2 * Math.PI * radius;\n        const strokeDashoffset = circumference - (percentage / 100) * circumference;\n\n        useLayoutEffect(() => {\n            if (rootRef.current) {\n                const strokeWidthFromCSS = getTokenValueInPixels(tokens.progressStrokeWidth, rootRef.current);\n                const widthFromCSS = getTokenValueInPixels(tokens.width, rootRef.current);\n                setStrokeWidthCSS(strokeWidthFromCSS ?? 0);\n                setWidthCSS(widthFromCSS ?? 0);\n            }\n        }, [rootRef, size]);\n\n        return (\n            <Root ref={rootForkRef} view={view} size={size} className={cx(className)} {...rest}>\n                <StyledSVG width=\"100%\" height=\"100%\" viewBox=\"0 0 100 100\" className={classes.svg}>\n                    <StyledBackgroundCircle\n                        customStrokeWidth={(50 / widthCSS) * strokeWidth}\n                        cx={center}\n                        cy={center}\n                        r={radius}\n                        className={classes.backgroundCircle}\n                    />\n                    <StyledProgressCircle\n                        cx={center}\n                        cy={center}\n                        r={radius}\n                        customStrokeWidth={(50 / widthCSS) * strokeWidth}\n                        className={classes.progressCircle}\n                        strokeDasharray={circumference}\n                        strokeDashoffset={strokeDashoffset}\n                        transform=\"rotate(-90 50 50)\"\n                    />\n                </StyledSVG>\n\n                {children && <StyledContent className={classes.content}>{children}</StyledContent>}\n            </Root>\n        );\n    });\n\nexport const progressBarCircularConfig = {\n    name: 'ProgressBarCircular',\n    tag: 'div',\n    layout: progressBarCircularRoot,\n    base,\n    variations: {\n        view: {\n            css: viewCSS,\n        },\n        size: {\n            css: sizeCSS,\n        },\n    },\n    defaults: {\n        view: 'primary',\n        size: 'm',\n    },\n};\n"],"names":["progressBarCircularRoot","Root","forwardRef","props","ref","_props$value","value","_props$maxValue","maxValue","size","view","children","className","strokeWidthProp","strokeWidth","rest","_objectWithoutProperties","_excluded","_useState","useState","_useState2","_slicedToArray","strokeWidthCSS","setStrokeWidthCSS","_useState3","_useState4","widthCSS","setWidthCSS","rootRef","useRef","rootForkRef","useForkRef","clampedValue","Math","min","max","percentage","center","radius","circumference","PI","strokeDashoffset","useLayoutEffect","current","strokeWidthFromCSS","getTokenValueInPixels","tokens","progressStrokeWidth","widthFromCSS","width","React","createElement","_extends","cx","StyledSVG","height","viewBox","classes","svg","StyledBackgroundCircle","customStrokeWidth","cy","r","backgroundCircle","StyledProgressCircle","progressCircle","strokeDasharray","transform","StyledContent","content","progressBarCircularConfig","name","tag","layout","base","variations","css","viewCSS","sizeCSS","defaults"],"mappings":"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"}

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

@@ -0,0 +1,54 @@
+require('./ProgressBarCircular.styles_m8m7d7.css');
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('@linaria/react');
+var ProgressBarCircular_tokens = require('./ProgressBarCircular.tokens.js');
+
+var base = "b18reh89";
+var StyledSVG = /*#__PURE__*/react.styled('svg')({
+  name: "StyledSVG",
+  "class": "s2tt3b5",
+  propsAsIs: false
+});
+var _exp4 = function _exp4() {
+  return function (_ref) {
+    var customStrokeWidth = _ref.customStrokeWidth;
+    return customStrokeWidth ? "".concat(customStrokeWidth, "px") : "var(".concat(ProgressBarCircular_tokens.tokens.backgroundStrokeWidth, ")");
+  };
+};
+var StyledBackgroundCircle = /*#__PURE__*/react.styled('circle')({
+  name: "StyledBackgroundCircle",
+  "class": "slvt37h",
+  propsAsIs: true,
+  vars: {
+    "slvt37h-0": [/*#__PURE__*/_exp4()]
+  }
+});
+var _exp6 = function _exp6() {
+  return function (_ref2) {
+    var customStrokeWidth = _ref2.customStrokeWidth;
+    return customStrokeWidth ? "".concat(customStrokeWidth, "px") : "var(".concat(ProgressBarCircular_tokens.tokens.progressStrokeWidth, ")");
+  };
+};
+var StyledProgressCircle = /*#__PURE__*/react.styled('circle')({
+  name: "StyledProgressCircle",
+  "class": "s1d8ncmi",
+  propsAsIs: true,
+  vars: {
+    "s1d8ncmi-0": [/*#__PURE__*/_exp6()]
+  }
+});
+var StyledContent = /*#__PURE__*/react.styled('div')({
+  name: "StyledContent",
+  "class": "sg9aoc4",
+  propsAsIs: false
+});
+
+exports.StyledBackgroundCircle = StyledBackgroundCircle;
+exports.StyledContent = StyledContent;
+exports.StyledProgressCircle = StyledProgressCircle;
+exports.StyledSVG = StyledSVG;
+exports.base = base;
+//# sourceMappingURL=ProgressBarCircular.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBarCircular.styles.js","sources":["../../../src/components/ProgressBarCircular/ProgressBarCircular.styles.ts"],"sourcesContent":["import { css } from '@linaria/core';\nimport { styled } from '@linaria/react';\n\nimport { tokens } from './ProgressBarCircular.tokens';\n\nexport const base = css`\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n\n    width: var(${tokens.width});\n    height: var(${tokens.height});\n`;\n\nexport const StyledSVG = styled.svg`\n    width: 100%;\n    height: 100%;\n`;\n\nexport const StyledBackgroundCircle = styled.circle<{ customStrokeWidth?: number }>`\n    fill: none;\n    stroke: var(${tokens.backgroundStroke});\n    stroke-width: ${({ customStrokeWidth }) =>\n        customStrokeWidth ? `${customStrokeWidth}px` : `var(${tokens.backgroundStrokeWidth})`};\n`;\n\nexport const StyledProgressCircle = styled.circle<{ customStrokeWidth?: number }>`\n    fill: none;\n    stroke: var(${tokens.progressStroke});\n    stroke-width: ${({ customStrokeWidth }) =>\n        customStrokeWidth ? `${customStrokeWidth}px` : `var(${tokens.progressStrokeWidth})`};\n    stroke-linecap: round;\n    transition: stroke-dashoffset 0.3s ease-in-out;\n`;\n\nexport const StyledContent = styled.div`\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n\n    color: var(${tokens.contentColor});\n    font-family: var(${tokens.contentFontFamily});\n    font-size: var(${tokens.contentFontSize});\n    font-style: var(${tokens.contentFontStyle});\n    font-weight: var(${tokens.contentFontWeight});\n    letter-spacing: var(${tokens.contentLetterSpacing});\n    line-height: var(${tokens.contentLineHeight});\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n`;\n"],"names":["base","StyledSVG","styled","name","class","propsAsIs","_exp4","_ref","customStrokeWidth","concat","tokens","backgroundStrokeWidth","StyledBackgroundCircle","vars","_exp6","_ref2","progressStrokeWidth","StyledProgressCircle","StyledContent"],"mappings":";;;;;;;AAKO,IAAMA,IAAI,GAShB,WAAA;AAEM,IAAMC,SAAS,gBAAGC,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,WAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAG9B,EAAA;AAAC,IAAAC,KAAA,GAlBgBA,SAkBhBA,KAAAA,GAAA;AAAA,EAAA,OAKkB,UAAAC,IAAA,EAAA;AAAA,IAAA,IAAGC,iBAAAA,GAAAA,IAAAA,CAAAA,iBAAAA,CAAAA;IAAAA,OACfA,iBAAiB,GAAAC,EAAAA,CAAAA,MAAA,CAAMD,iBAAiB,EAAAC,IAAAA,CAAAA,GAAAA,MAAAA,CAAAA,MAAA,CAAcC,iCAAM,CAACC,qBAAqB,EAAG,GAAA,CAAA,CAAA;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;AAJtF,IAAMC,sBAAsB,gBAAGV,YAAM,CAAA,QAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,wBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,IAAA;AAAAQ,EAAAA,IAAA,EAAA;AAAA,IAAA,WAAA,EAAA,cAGxBP,KACyE,EAAA,CAAA;AAAA,GAAA;AAAA,CAC5F,EAAA;AAAC,IAAAQ,KAAA,GAzBgBA,SAyBhBA,KAAAA,GAAA;AAAA,EAAA,OAKkB,UAAAC,KAAA,EAAA;AAAA,IAAA,IAAGP,iBAAAA,GAAAA,KAAAA,CAAAA,iBAAAA,CAAAA;IAAAA,OACfA,iBAAiB,GAAAC,EAAAA,CAAAA,MAAA,CAAMD,iBAAiB,EAAAC,IAAAA,CAAAA,GAAAA,MAAAA,CAAAA,MAAA,CAAcC,iCAAM,CAACM,mBAAmB,EAAG,GAAA,CAAA,CAAA;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;AAJpF,IAAMC,oBAAoB,gBAAGf,YAAM,CAAA,QAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,sBAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,IAAA;AAAAQ,EAAAA,IAAA,EAAA;AAAA,IAAA,YAAA,EAAA,cAGtBC,KACuE,EAAA,CAAA;AAAA,GAAA;AAAA,CAG1F,EAAA;AAEM,IAAMI,aAAa,gBAAGhB,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,eAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAiBlC;;;;;;;;"}

package/cjs/components/ProgressBarCircular/ProgressBarCircular.styles_m8m7d7.css

@@ -0,0 +1,5 @@
+.b18reh89{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;box-sizing:border-box;width:var(--plasma-progressbar-circular-width);height:var(--plasma-progressbar-circular-height);}
+.s2tt3b5{width:100%;height:100%;}
+.slvt37h{fill:none;stroke:var(--plasma-progressbar-circular-background-stroke);stroke-width:var(--slvt37h-0);}
+.s1d8ncmi{fill:none;stroke:var(--plasma-progressbar-circular-progress-stroke);stroke-width:var(--s1d8ncmi-0);stroke-linecap:round;-webkit-transition:stroke-dashoffset 0.3s ease-in-out;transition:stroke-dashoffset 0.3s ease-in-out;}
+.sg9aoc4{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);color:var(--plasma-progressbar-circular-content-color);font-family:var(--plasma-progressbar-circular-content-font-family);font-size:var(--plasma-progressbar-circular-content-font-size);font-style:var(--plasma-progressbar-circular-content-font-style);font-weight:var(--plasma-progressbar-circular-content-font-weight);-webkit-letter-spacing:var(--plasma-progressbar-circular-content-letter-spacing);-moz-letter-spacing:var(--plasma-progressbar-circular-content-letter-spacing);-ms-letter-spacing:var(--plasma-progressbar-circular-content-letter-spacing);letter-spacing:var(--plasma-progressbar-circular-content-letter-spacing);line-height:var(--plasma-progressbar-circular-content-line-height);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}

package/cjs/components/ProgressBarCircular/ProgressBarCircular.tokens.js

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var classes = {
+  svg: '--plasma-progressbar-circular-svg',
+  backgroundCircle: '--plasma-progressbar-circular-background-circle',
+  progressCircle: '--plasma-progressbar-circular-progress-circle',
+  content: '--plasma-progressbar-circular-content'
+};
+var tokens = {
+  width: '--plasma-progressbar-circular-width',
+  height: '--plasma-progressbar-circular-height',
+  backgroundStroke: '--plasma-progressbar-circular-background-stroke',
+  backgroundStrokeWidth: '--plasma-progressbar-circular-background-stroke-width',
+  progressStroke: '--plasma-progressbar-circular-progress-stroke',
+  progressStrokeWidth: '--plasma-progressbar-circular-progress-stroke-width',
+  contentColor: '--plasma-progressbar-circular-content-color',
+  contentFontFamily: '--plasma-progressbar-circular-content-font-family',
+  contentFontSize: '--plasma-progressbar-circular-content-font-size',
+  contentFontStyle: '--plasma-progressbar-circular-content-font-style',
+  contentFontWeight: '--plasma-progressbar-circular-content-font-weight',
+  contentLetterSpacing: '--plasma-progressbar-circular-content-letter-spacing',
+  contentLineHeight: '--plasma-progressbar-circular-content-line-height'
+};
+
+exports.classes = classes;
+exports.tokens = tokens;
+//# sourceMappingURL=ProgressBarCircular.tokens.js.map

package/cjs/components/ProgressBarCircular/ProgressBarCircular.tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBarCircular.tokens.js","sources":["../../../src/components/ProgressBarCircular/ProgressBarCircular.tokens.ts"],"sourcesContent":["export const classes = {\n    svg: '--plasma-progressbar-circular-svg',\n    backgroundCircle: '--plasma-progressbar-circular-background-circle',\n    progressCircle: '--plasma-progressbar-circular-progress-circle',\n    content: '--plasma-progressbar-circular-content',\n};\n\nexport const tokens = {\n    width: '--plasma-progressbar-circular-width',\n    height: '--plasma-progressbar-circular-height',\n\n    backgroundStroke: '--plasma-progressbar-circular-background-stroke',\n    backgroundStrokeWidth: '--plasma-progressbar-circular-background-stroke-width',\n\n    progressStroke: '--plasma-progressbar-circular-progress-stroke',\n    progressStrokeWidth: '--plasma-progressbar-circular-progress-stroke-width',\n\n    contentColor: '--plasma-progressbar-circular-content-color',\n    contentFontFamily: '--plasma-progressbar-circular-content-font-family',\n    contentFontSize: '--plasma-progressbar-circular-content-font-size',\n    contentFontStyle: '--plasma-progressbar-circular-content-font-style',\n    contentFontWeight: '--plasma-progressbar-circular-content-font-weight',\n    contentLetterSpacing: '--plasma-progressbar-circular-content-letter-spacing',\n    contentLineHeight: '--plasma-progressbar-circular-content-line-height',\n};\n"],"names":["classes","svg","backgroundCircle","progressCircle","content","tokens","width","height","backgroundStroke","backgroundStrokeWidth","progressStroke","progressStrokeWidth","contentColor","contentFontFamily","contentFontSize","contentFontStyle","contentFontWeight","contentLetterSpacing","contentLineHeight"],"mappings":";;;;AAAO,IAAMA,OAAO,GAAG;AACnBC,EAAAA,GAAG,EAAE,mCAAmC;AACxCC,EAAAA,gBAAgB,EAAE,iDAAiD;AACnEC,EAAAA,cAAc,EAAE,+CAA+C;AAC/DC,EAAAA,OAAO,EAAE,uCAAA;AACb,EAAC;AAEM,IAAMC,MAAM,GAAG;AAClBC,EAAAA,KAAK,EAAE,qCAAqC;AAC5CC,EAAAA,MAAM,EAAE,sCAAsC;AAE9CC,EAAAA,gBAAgB,EAAE,iDAAiD;AACnEC,EAAAA,qBAAqB,EAAE,uDAAuD;AAE9EC,EAAAA,cAAc,EAAE,+CAA+C;AAC/DC,EAAAA,mBAAmB,EAAE,qDAAqD;AAE1EC,EAAAA,YAAY,EAAE,6CAA6C;AAC3DC,EAAAA,iBAAiB,EAAE,mDAAmD;AACtEC,EAAAA,eAAe,EAAE,iDAAiD;AAClEC,EAAAA,gBAAgB,EAAE,kDAAkD;AACpEC,EAAAA,iBAAiB,EAAE,mDAAmD;AACtEC,EAAAA,oBAAoB,EAAE,sDAAsD;AAC5EC,EAAAA,iBAAiB,EAAE,mDAAA;AACvB;;;;;"}

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

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

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

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

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

@@ -0,0 +1 @@
+

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

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

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

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

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

@@ -0,0 +1 @@
+

package/cjs/index.css

@@ -1148,6 +1148,12 @@
 .Section_styles_147bzzp_a6i3xtj__60e0567c{margin:auto;}
 .Section_styles_147bzzp_lnmmdxt__60e0567c{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 
+.ProgressBarCircular_styles_m8m7d7_b18reh89__dca58878{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;box-sizing:border-box;width:var(--plasma-progressbar-circular-width);height:var(--plasma-progressbar-circular-height);}
+.ProgressBarCircular_styles_m8m7d7_s2tt3b5__dca58878{width:100%;height:100%;}
+.ProgressBarCircular_styles_m8m7d7_slvt37h__dca58878{fill:none;stroke:var(--plasma-progressbar-circular-background-stroke);stroke-width:var(--slvt37h-0);}
+.ProgressBarCircular_styles_m8m7d7_s1d8ncmi__dca58878{fill:none;stroke:var(--plasma-progressbar-circular-progress-stroke);stroke-width:var(--s1d8ncmi-0);stroke-linecap:round;-webkit-transition:stroke-dashoffset 0.3s ease-in-out;transition:stroke-dashoffset 0.3s ease-in-out;}
+.ProgressBarCircular_styles_m8m7d7_sg9aoc4__dca58878{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);color:var(--plasma-progressbar-circular-content-color);font-family:var(--plasma-progressbar-circular-content-font-family);font-size:var(--plasma-progressbar-circular-content-font-size);font-style:var(--plasma-progressbar-circular-content-font-style);font-weight:var(--plasma-progressbar-circular-content-font-weight);-webkit-letter-spacing:var(--plasma-progressbar-circular-content-letter-spacing);-moz-letter-spacing:var(--plasma-progressbar-circular-content-letter-spacing);-ms-letter-spacing:var(--plasma-progressbar-circular-content-letter-spacing);letter-spacing:var(--plasma-progressbar-circular-content-letter-spacing);line-height:var(--plasma-progressbar-circular-content-line-height);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
+
 
 .TimePicker_styles_ar3obv_s1ghbm1p__3866631e{width:100%;--plasma-textfield-color:var(--plasma-time-picker-textfield-color);--plasma-textfield__placeholder-color:var(--plasma-time-picker-textfield-placeholder-color);--plasma-textfield__placeholder-color-focus:var(--plasma-timepicker-textfield__placeholder-color-focus);--plasma-textfield__caret-color:var(--plasma-time-picker-textfield-caret-color);--plasma-textfield-focus-color:var(--plasma-time-picker-textfield-focus-color);--plasma-textfield-bg-color:var(--plasma-time-picker-textfield-background-color);--plasma-textfield-bg-color-hover:var(--plasma-time-picker-textfield-background-color-hover);--plasma-textfield-bg-color-focus:var(--plasma-time-picker-textfield-background-color-focus);--plasma-textfield-border-color:var(--plasma-time-picker_range-border-color);--plasma-textfield-border-color-hover:var(--plasma-time-picker_range-border-color-hover);--plasma-textfield-border-color-focus:var(--plasma-time-picker_range-border-color-focus);--plasma-textfield-box-shadow:var(--plasma-time-picker-textfield-box-shadow);--plasma-textfield-color-readonly:var(--plasma-time-picker-textfield-color-readonly);--plasma-textfield-bg-color-readonly:var(--plasma-time-picker-textfield-background-color-readonly);--plasma-textfield-border-color-readonly:var(--plasma-time-picker-textfield-border-color-readonly);--plasma-textfield__placeholder-color-readonly:var(--plasma-time-picker-textfield-placeholder-color-readonly);--plasma-textfield-height:var(--plasma-time-picker-textfield-height);--plasma-textfield-border-width:var(--plasma-time-picker-textfield-border-width);--plasma-textfield-border-radius:var(--plasma-time-picker-textfield-border-radius);--plasma-textfield-padding:var(--plasma-time-picker-textfield-padding);--plasma-textfield-placement_inner__label-padding:var(--plasma-time-picker-placement_inner__label-padding);--plasma-textfield-placement_inner__content-padding:var(--plasma-time-picker-placement_inner__content-padding);--plasma-textfield__label-offset:var(--plasma-time-picker__label-offset);--plasma-textfield__label-font-family:var(--plasma-time-picker__label-font-family);--plasma-textfield__label-font-style:var(--plasma-time-picker__label-font-style);--plasma-textfield__label-font-size:var(--plasma-time-picker__label-font-size);--plasma-textfield__label-font-weight:var(--plasma-time-picker__label-font-weight);--plasma-textfield__label-letter-spacing:var(--plasma-time-picker__label-letter-spacing);--plasma-textfield__label-line-height:var(--plasma-time-picker__label-line-height);--plasma-textfield-placement_inner__label-font-family:var(--plasma-time-picker-placement_inner__label-font-family);--plasma-textfield-placement_inner__label-font-size:var(--plasma-time-picker-placement_inner__label-font-size);--plasma-textfield-placement_inner__label-font-style:var(--plasma-time-picker-placement_inner__label-font-style);--plasma-textfield-placement_inner__label-font-weight:var(--plasma-time-picker-placement_inner__label-font-weight);--plasma-textfield-placement_inner__label-letter-spacing:var(--plasma-time-picker-placement_inner__label-letter-spacing);--plasma-textfield-placement_inner__label-line-height:var(--plasma-time-picker-placement_inner__label-line-height);--plasma-textfield__label-color-readonly:var(--plasma-time-picker__label-color-readonly);--plasma-textfield__indicator-color:var(--plasma-time-picker__indicator-color);--plasma-textfield__indicator-size-inner:var(--plasma-time-picker__indicator-size);--plasma-textfield__indicator-size-outer:var(--plasma-time-picker__indicator-size-outer);--plasma-textfield__indicator-placement-inner:var(--plasma-time-picker__indicator-placement);--plasma-textfield__indicator-placement-outer:var(--plasma-time-picker__indicator-placement-outer);--plasma-textfield__indicator-placement-inner-right:var(--plasma-time-picker__indicator-placement-right);--plasma-textfield__indicator-placement-outer-right:var(--plasma-time-picker__indicator-placement-outer-right);--plasma-textfield__left-content-margin:var(--plasma-time-picker-textfield__left-content-margin);--plasma-textfield__right-content-margin:var(--plasma-time-picker-textfield__right-content-margin);--plasma-textfield-font-family:var(--plasma-time-picker-textfield-font-family);--plasma-textfield-font-size:var(--plasma-time-picker-textfield-font-size);--plasma-textfield-font-style:var(--plasma-time-picker-textfield-font-style);--plasma-textfield-font-weight:var(--plasma-time-picker-textfield-font-weight);--plasma-textfield-letter-spacing:var(--plasma-time-picker-textfield-letter-spacing);--plasma-textfield-line-height:var(--plasma-time-picker-textfield-line-height);--plasma-textfield-disabled-opacity:var(--plasma-time-picker-disabled-opacity);--plasma-textfield__before-text-color:var(--plasma-time-picker-textfield__before-text-color);--plasma-textfield__after-text-color:var(--plasma-time-picker-textfield__after-text-color);--plasma-textfield__before-text-margin:var(--plasma-time-picker-textfield__before-text-margin);--plasma-textfield__after-text-margin:var(--plasma-time-picker-textfield__after-text-margin);--plasma-textfield-content-slot-color:var(--plasma-time-picker-textfield__content-color,var(--plasma-time-picker-textfield-color));--plasma-textfield-content-right-slot-color:var(--plasma-time-picker-textfield__content-right-color,var(--plasma-textfield-content-slot-color));--plasma-textfield-content-right-slot-color-hover:var(--plasma-time-picker-textfield__content-right-color-hover,var(--plasma-textfield-content-right-slot-color));}.TimePicker_styles_ar3obv_s1ghbm1p__3866631e.TimePicker_styles_ar3obv_plasmaTimePickerError__3866631e{--plasma-textfield-bg-color:var(--plasma-time-picker-textfield-background-color-error);--plasma-textfield-bg-color-hover:var(--plasma-time-picker-textfield-background-color-error-hover);--plasma-textfield-bg-color-focus:var(--plasma-time-picker-textfield-background-color-error-focus);--plasma-textfield-border-color:var(--plasma-time-picker-textfield-border-color-error);--plasma-textfield-border-color-hover:var(--plasma-time-picker-textfield-border-color-error-hover);--plasma-textfield-border-color-focus:var(--plasma-time-picker-textfield-border-color-error-focus);}.TimePicker_styles_ar3obv_s1ghbm1p__3866631e.TimePicker_styles_ar3obv_plasmaTimePickerSuccess__3866631e{--plasma-textfield-bg-color:var(--plasma-time-picker-textfield-background-color-success);--plasma-textfield-bg-color-hover:var(--plasma-time-picker-textfield-background-color-success-hover);--plasma-textfield-bg-color-focus:var(--plasma-time-picker-textfield-background-color-success-focus);--plasma-textfield-border-color:var(--plasma-time-picker-textfield-border-color-success);--plasma-textfield-border-color-hover:var(--plasma-time-picker-textfield-border-color-success-hover);--plasma-textfield-border-color-focus:var(--plasma-time-picker-textfield-border-color-success-focus);}
 .TimePicker_styles_ar3obv_b19h9m1x__3866631e{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:var(--plasma-time-picker-width);margin-top:var(--plasma-time-picker-dropdown-margin-top);}.TimePicker_styles_ar3obv_b19h9m1x__3866631e .TimePicker_styles_ar3obv_popoverWrapper__3866631e,.TimePicker_styles_ar3obv_b19h9m1x__3866631e .TimePicker_styles_ar3obv_popoverTarget__3866631e{width:inherit;}.TimePicker_styles_ar3obv_b19h9m1x__3866631e.TimePicker_styles_ar3obv_plasmaTimePickerStretched__3866631e{width:100%;}.TimePicker_styles_ar3obv_b19h9m1x__3866631e.TimePicker_styles_ar3obv_plasmaTimePickerStretched__3866631e .TimePicker_styles_ar3obv_popoverRoot__3866631e{width:100%;}.TimePicker_styles_ar3obv_b19h9m1x__3866631e.TimePicker_styles_ar3obv_plasmaTimePickerFullWidth__3866631e{width:100%;}.TimePicker_styles_ar3obv_b19h9m1x__3866631e.TimePicker_styles_ar3obv_plasmaTimePickerPlacementRight__3866631e{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;}

package/cjs/index.js

@@ -39,6 +39,7 @@ var createEvent = require('./utils/createEvent.js');
 var noop = require('./utils/noop.js');
 var getHeightAsNumber = require('./utils/getHeightAsNumber.js');
 var createConditionalComponent = require('./utils/createConditionalComponent.js');
+var getTokenValueInPixels = require('./utils/getTokenValueInPixels.js');
 var fixedForwardRef = require('./utils/fixedForwardRef.js');
 var getPopoverPlacement = require('./utils/getPopoverPlacement.js');
 var initialValuesHelper = require('./utils/initialValuesHelper.js');
@@ -263,6 +264,8 @@ var InformationWrapper = require('./components/InformationWrapper/InformationWra
 var InformationWrapper_tokens = require('./components/InformationWrapper/InformationWrapper.tokens.js');
 var NavigationDrawer = require('./components/NavigationDrawer/NavigationDrawer.js');
 var NavigationDrawer_tokens = require('./components/NavigationDrawer/NavigationDrawer.tokens.js');
+var ProgressBarCircular = require('./components/ProgressBarCircular/ProgressBarCircular.js');
+var ProgressBarCircular_tokens = require('./components/ProgressBarCircular/ProgressBarCircular.tokens.js');
 var TimePicker = require('./components/TimePicker/TimePicker.js');
 var TimePicker_tokens = require('./components/TimePicker/TimePicker.tokens.js');
 
@@ -372,6 +375,7 @@ exports.createEvent = createEvent.createEvent;
 exports.noop = noop.noop;
 exports.getHeightAsNumber = getHeightAsNumber.getHeightAsNumber;
 exports.createConditionalComponent = createConditionalComponent.createConditionalComponent;
+exports.getTokenValueInPixels = getTokenValueInPixels.getTokenValueInPixels;
 exports.fixedForwardRef = fixedForwardRef.fixedForwardRef;
 exports.getPlacement = getPopoverPlacement.getPlacement;
 exports.getPlacements = getPopoverPlacement.getPlacements;
@@ -754,6 +758,9 @@ exports.informationWrapperTokens = InformationWrapper_tokens.tokens;
 exports.navigationDrawerConfig = NavigationDrawer.navigationDrawerConfig;
 exports.navigationDrawerRoot = NavigationDrawer.navigationDrawerRoot;
 exports.navigationDrawerTokens = NavigationDrawer_tokens.tokens;
+exports.progressBarCircularConfig = ProgressBarCircular.progressBarCircularConfig;
+exports.progressBarCircularRoot = ProgressBarCircular.progressBarCircularRoot;
+exports.progressBarCircularTokens = ProgressBarCircular_tokens.tokens;
 exports.timePickerConfig = TimePicker.timePickerConfig;
 exports.timePickerRoot = TimePicker.timePickerRoot;
 exports.timePickerClasses = TimePicker_tokens.classes;

package/cjs/index.js.map

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

package/cjs/utils/getTokenValueInPixels.js

@@ -0,0 +1,31 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
+
+var getTokenValueInPixels = function getTokenValueInPixels(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 = _rollupPluginBabelHelpers.slicedToArray(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;
+};
+
+exports.getTokenValueInPixels = getTokenValueInPixels;
+//# sourceMappingURL=getTokenValueInPixels.js.map

package/cjs/utils/getTokenValueInPixels.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getTokenValueInPixels.js","sources":["../../src/utils/getTokenValueInPixels.ts"],"sourcesContent":["export const getTokenValueInPixels = (tokenName: string, element: HTMLElement): number | undefined => {\n    const tokenValue = getComputedStyle(element).getPropertyValue(tokenName).trim();\n\n    if (!tokenValue) {\n        return undefined;\n    }\n\n    const valueMatch = tokenValue.match(/^([\\d.]+)(rem|px)$/);\n\n    if (!valueMatch) {\n        return undefined;\n    }\n\n    const [, number, unit] = valueMatch;\n    const numericValue = parseFloat(number);\n\n    if (unit === 'px') {\n        return numericValue;\n    }\n    if (unit === 'rem') {\n        const rootFontSize = parseFloat(getComputedStyle(element).fontSize);\n        return numericValue * rootFontSize;\n    }\n\n    return undefined;\n};\n"],"names":["getTokenValueInPixels","tokenName","element","tokenValue","getComputedStyle","getPropertyValue","trim","undefined","valueMatch","match","_valueMatch","_slicedToArray","number","unit","numericValue","parseFloat","rootFontSize","fontSize"],"mappings":";;;;;;AAAO,IAAMA,qBAAqB,GAAG,SAAxBA,qBAAqBA,CAAIC,SAAiB,EAAEC,OAAoB,EAAyB;AAClG,EAAA,IAAMC,UAAU,GAAGC,gBAAgB,CAACF,OAAO,CAAC,CAACG,gBAAgB,CAACJ,SAAS,CAAC,CAACK,IAAI,EAAE,CAAA;EAE/E,IAAI,CAACH,UAAU,EAAE;AACb,IAAA,OAAOI,SAAS,CAAA;AACpB,GAAA;AAEA,EAAA,IAAMC,UAAU,GAAGL,UAAU,CAACM,KAAK,CAAC,oBAAoB,CAAC,CAAA;EAEzD,IAAI,CAACD,UAAU,EAAE;AACb,IAAA,OAAOD,SAAS,CAAA;AACpB,GAAA;AAEA,EAAA,IAAAG,WAAA,GAAAC,uCAAA,CAAyBH,UAAU,EAAA,CAAA,CAAA;AAA1BI,IAAAA,MAAM,GAAAF,WAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,IAAI,GAAAH,WAAA,CAAA,CAAA,CAAA,CAAA;AACrB,EAAA,IAAMI,YAAY,GAAGC,UAAU,CAACH,MAAM,CAAC,CAAA;EAEvC,IAAIC,IAAI,KAAK,IAAI,EAAE;AACf,IAAA,OAAOC,YAAY,CAAA;AACvB,GAAA;EACA,IAAID,IAAI,KAAK,KAAK,EAAE;IAChB,IAAMG,YAAY,GAAGD,UAAU,CAACX,gBAAgB,CAACF,OAAO,CAAC,CAACe,QAAQ,CAAC,CAAA;IACnE,OAAOH,YAAY,GAAGE,YAAY,CAAA;AACtC,GAAA;AAEA,EAAA,OAAOT,SAAS,CAAA;AACpB;;;;"}

package/cjs/utils/index.js.map

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

package/emotion/cjs/components/ProgressBarCircular/ProgressBarCircular.js

@@ -17,11 +17,20 @@ _export(exports, {
     }
 });
 var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+var _plasmacore = require("@salutejs/plasma-core");
 var _utils = require("../../utils");
 var _base = require("./variations/_view/base");
 var _base1 = require("./variations/_size/base");
 var _ProgressBarCircularstyles = require("./ProgressBarCircular.styles");
 var _ProgressBarCirculartokens = require("./ProgressBarCircular.tokens");
+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, {
@@ -76,6 +85,33 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
+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] : {};
@@ -118,46 +154,76 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
+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 progressBarCircularRoot = function(Root) {
     return /*#__PURE__*/ (0, _react.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((0, _react.useState)(0), 2), strokeWidthCSS = _useState[0], setStrokeWidthCSS = _useState[1];
+        var _useState1 = _sliced_to_array((0, _react.useState)(0), 2), widthCSS = _useState1[0], setWidthCSS = _useState1[1];
+        var rootRef = (0, _react.useRef)(null);
+        var rootForkRef = (0, _plasmacore.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;
+        (0, _react.useLayoutEffect)(function() {
+            if (rootRef.current) {
+                var strokeWidthFromCSS = (0, _utils.getTokenValueInPixels)(_ProgressBarCirculartokens.tokens.progressStrokeWidth, rootRef.current);
+                var widthFromCSS = (0, _utils.getTokenValueInPixels)(_ProgressBarCirculartokens.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.default.createElement(Root, _object_spread({
-            ref: ref,
+            ref: rootForkRef,
             view: view,
             size: size,
             className: (0, _utils.cx)(className)
-        }, rest), /*#__PURE__*/ _react.default.createElement("svg", {
+        }, rest), /*#__PURE__*/ _react.default.createElement(_ProgressBarCircularstyles.StyledSVG, {
             width: "100%",
             height: "100%",
             viewBox: "0 0 100 100",
             className: _ProgressBarCirculartokens.classes.svg
-        }, /*#__PURE__*/ _react.default.createElement("circle", {
+        }, /*#__PURE__*/ _react.default.createElement(_ProgressBarCircularstyles.StyledBackgroundCircle, {
+            customStrokeWidth: 50 / widthCSS * strokeWidth,
             cx: center,
             cy: center,
             r: radius,
             className: _ProgressBarCirculartokens.classes.backgroundCircle
-        }), /*#__PURE__*/ _react.default.createElement("circle", {
+        }), /*#__PURE__*/ _react.default.createElement(_ProgressBarCircularstyles.StyledProgressCircle, {
             cx: center,
             cy: center,
             r: radius,
+            customStrokeWidth: 50 / widthCSS * strokeWidth,
             className: _ProgressBarCirculartokens.classes.progressCircle,
             strokeDasharray: circumference,
             strokeDashoffset: strokeDashoffset,
             transform: "rotate(-90 50 50)"
-        })), children && /*#__PURE__*/ _react.default.createElement("div", {
+        })), children && /*#__PURE__*/ _react.default.createElement(_ProgressBarCircularstyles.StyledContent, {
             className: _ProgressBarCirculartokens.classes.content
         }, children));
     });