@laerdal/life-react-components 5.1.0 → 6.0.0-dev.1

package/dist/LinearProgress/LinearProgress.js

@@ -1,9 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
 const _excluded = ["size", "type", "variant", "label", "value", "max", "className"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
@@ -11,13 +9,328 @@ import { Size } from '../types';
 import styled from 'styled-components';
 import { COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-export const Bar = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex: 1;\n  height: 6px;\n\n  &.small {\n    height: 6px;\n  }\n\n  &.medium {\n    height: 8px;\n  }\n\n  &.large {\n    height: 12px;\n  }\n\n  background-color: ", ";\n\n  &.active {\n    background-color: ", ";\n  }\n\n  &.current {\n    background-color: ", ";\n  }\n\n  &.inverted {\n    background-color: ", ";\n  }\n\n  &.inverted.active {\n    background-color: ", ";\n  }\n\n  &.inverted.current {\n    background-color: ", ";\n  }\n\n"])), props => COLORS.getColor('neutral_100', props.theme), props => COLORS.getColor('accent1_400', props.theme), props => COLORS.getColor('accent1_800', props.theme), props => COLORS.getColor('neutral_600', props.theme), props => COLORS.getColor('accent1_400', props.theme), props => COLORS.getColor('white', props.theme));
-export const Dot = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n\n\n  &:after {\n    content: '';\n    display: block;\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n    background-color: ", ";\n  }\n\n  &.small {\n    &:after {\n      width: 6px;\n      height: 6px;\n    }\n\n    &.current:after {\n      width: 10px;\n      height: 10px;\n    }\n  }\n\n  &.medium {\n    &:after {\n      width: 8px;\n      height: 8px;\n    }\n\n    &.current:after {\n      width: 12px;\n      height: 12px;\n    }\n  }\n\n  &.large {\n    &:after {\n      width: 12px;\n      height: 12px;\n    }\n\n    &.current:after {\n      width: 16px;\n      height: 16px;\n    }\n  }\n\n\n  &.active:after {\n    background-color: ", ";\n  }\n\n  &.current:after {\n    background-color: ", ";\n  }\n\n  &.inverted:after {\n    background-color: ", ";\n  }\n\n  &.inverted.active:after {\n    background-color: ", ";\n  }\n\n  &.inverted.current:after {\n    background-color: ", ";\n  }\n"])), props => COLORS.getColor('neutral_400', props.theme), props => COLORS.getColor('accent1_600', props.theme), props => COLORS.getColor('accent1_800', props.theme), props => COLORS.getColor('neutral_400', props.theme), props => COLORS.getColor('accent1_400', props.theme), props => COLORS.getColor('white', props.theme));
-export const LineFill = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: 100%;\n  max-width: 100%;\n  position: absolute;\n  z-index: 1;\n"])));
-export const Line = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  position: relative;\n\n  &:after {\n    content: '';\n    display: block;\n    height: 100%;\n    background-color: ", ";\n    position: absolute;\n    right: 0;\n  }\n\n  &:before {\n    content: '';\n    display: block;\n    height: 100%;\n    background-color: ", ";\n    position: absolute;\n    left: 0;\n  }\n\n  &.small {\n    height: 6px;\n    border-radius: 4px;\n\n    ", " {\n      border-radius: 4px;\n    }\n\n    &:after {\n      width: 3px;\n      border-top-right-radius: 6px;\n      border-bottom-right-radius: 6px;\n    }\n\n    &:before {\n      width: 3px;\n      border-top-left-radius: 6px;\n      border-bottom-left-radius: 6px;\n    }\n  }\n\n  &.medium {\n    height: 8px;\n    border-radius: 4px;\n\n    ", " {\n      border-radius: 4px;\n    }\n\n    &:after {\n      width: 4px;\n      border-top-right-radius: 8px;\n      border-bottom-right-radius: 8px;\n    }\n\n    &:before {\n      width: 4px;\n      border-top-left-radius: 8px;\n      border-bottom-left-radius: 8px;\n    }\n  }\n\n  &.large {\n    height: 12px;\n    border-radius: 6px;\n\n    ", " {\n      border-radius: 6px;\n    }\n\n    &:after {\n      width: 6px;\n      border-top-right-radius: 12px;\n      border-bottom-right-radius: 12px;\n    }\n\n    &:before {\n      width: 6px;\n      border-top-left-radius: 12px;\n      border-bottom-left-radius: 12px;\n    }\n  }\n\n  background-color: ", ";\n\n  ", " {\n    background-color: ", ";\n  }\n\n  &.inverted {\n    background-color: ", ";\n\n    &:after,\n    &:before {\n      background-color: ", ";\n    }\n\n    ", " {\n      background-color: ", ";\n    }\n  }\n"])), props => COLORS.getColor('neutral_500', props.theme), props => COLORS.getColor('neutral_500', props.theme), LineFill, LineFill, LineFill, props => COLORS.getColor('neutral_100', props.theme), LineFill, props => COLORS.getColor('accent1_500', props.theme), props => COLORS.getColor('neutral_700', props.theme), props => COLORS.getColor('neutral_400', props.theme), LineFill, props => COLORS.getColor('accent1_400', props.theme));
-const Label = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), props => COLORS.getColor('black', props.theme));
-const Content = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  height: 16px;\n"])));
-const Wrapper = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  &.inverted {\n    ", " {\n      color: ", ";\n    }\n  }\n\n  &.small {\n    gap: 4px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      gap: 4px;\n\n      ", ":first-of-type {\n        border-top-left-radius: 6px;\n        border-bottom-left-radius: 6px;\n      }\n\n      ", ":last-of-type {\n        border-top-right-radius: 6px;\n        border-bottom-right-radius: 6px;\n      }\n    }\n  }\n\n  &.medium {\n    ", " {\n      ", "\n    }\n\n    ", " {\n      gap: 6px;\n\n      ", ":first-of-type {\n        border-top-left-radius: 8px;\n        border-bottom-left-radius: 8px;\n      }\n\n      ", ":last-of-type {\n        border-top-right-radius: 8px;\n        border-bottom-right-radius: 8px;\n      }\n    }\n  }\n\n  &.large {\n    ", " {\n      ", "\n    }\n\n    ", " {\n      gap: 8px;\n\n      ", ":first-of-type {\n        border-top-left-radius: 12px;\n        border-bottom-left-radius: 12px;\n      }\n\n      ", ":last-of-type {\n        border-top-right-radius: 12px;\n        border-bottom-right-radius: 12px;\n      }\n    }\n  }\n\n  &.dots.small,\n  &.dots.medium {\n    ", " {\n      padding: 0 2px;\n    }\n  }\n\n  &.dots.large {\n    ", " {\n      padding: 0 3px;\n    }\n  }\n"])), Label, props => COLORS.getColor('white', props.theme), Label, ComponentSStyling(ComponentTextStyle.Regular, null), Content, Bar, Bar, Label, ComponentMStyling(ComponentTextStyle.Regular, null), Content, Bar, Bar, Label, ComponentLStyling(ComponentTextStyle.Regular, null), Content, Bar, Bar, Content, Content);
+export const Bar = styled.div`
+  flex: 1;
+  height: 6px;
+
+  &.small {
+    height: 6px;
+  }
+
+  &.medium {
+    height: 8px;
+  }
+
+  &.large {
+    height: 12px;
+  }
+
+  background-color: ${props => COLORS.getColor('neutral_100', props.theme)};
+
+  &.active {
+    background-color: ${props => COLORS.getColor('accent1_400', props.theme)};
+  }
+
+  &.current {
+    background-color: ${props => COLORS.getColor('accent1_800', props.theme)};
+  }
+
+  &.inverted {
+    background-color: ${props => COLORS.getColor('neutral_600', props.theme)};
+  }
+
+  &.inverted.active {
+    background-color: ${props => COLORS.getColor('accent1_400', props.theme)};
+  }
+
+  &.inverted.current {
+    background-color: ${props => COLORS.getColor('white', props.theme)};
+  }
+
+`;
+export const Dot = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+
+
+  &:after {
+    content: '';
+    display: block;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: ${props => COLORS.getColor('neutral_400', props.theme)};
+  }
+
+  &.small {
+    &:after {
+      width: 6px;
+      height: 6px;
+    }
+
+    &.current:after {
+      width: 10px;
+      height: 10px;
+    }
+  }
+
+  &.medium {
+    &:after {
+      width: 8px;
+      height: 8px;
+    }
+
+    &.current:after {
+      width: 12px;
+      height: 12px;
+    }
+  }
+
+  &.large {
+    &:after {
+      width: 12px;
+      height: 12px;
+    }
+
+    &.current:after {
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+
+  &.active:after {
+    background-color: ${props => COLORS.getColor('accent1_600', props.theme)};
+  }
+
+  &.current:after {
+    background-color: ${props => COLORS.getColor('accent1_800', props.theme)};
+  }
+
+  &.inverted:after {
+    background-color: ${props => COLORS.getColor('neutral_400', props.theme)};
+  }
+
+  &.inverted.active:after {
+    background-color: ${props => COLORS.getColor('accent1_400', props.theme)};
+  }
+
+  &.inverted.current:after {
+    background-color: ${props => COLORS.getColor('white', props.theme)};
+  }
+`;
+export const LineFill = styled.div`
+  height: 100%;
+  max-width: 100%;
+  position: absolute;
+  z-index: 1;
+`;
+export const Line = styled.div`
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+
+  &:after {
+    content: '';
+    display: block;
+    height: 100%;
+    background-color: ${props => COLORS.getColor('neutral_500', props.theme)};
+    position: absolute;
+    right: 0;
+  }
+
+  &:before {
+    content: '';
+    display: block;
+    height: 100%;
+    background-color: ${props => COLORS.getColor('neutral_500', props.theme)};
+    position: absolute;
+    left: 0;
+  }
+
+  &.small {
+    height: 6px;
+    border-radius: 4px;
+
+    ${LineFill} {
+      border-radius: 4px;
+    }
+
+    &:after {
+      width: 3px;
+      border-top-right-radius: 6px;
+      border-bottom-right-radius: 6px;
+    }
+
+    &:before {
+      width: 3px;
+      border-top-left-radius: 6px;
+      border-bottom-left-radius: 6px;
+    }
+  }
+
+  &.medium {
+    height: 8px;
+    border-radius: 4px;
+
+    ${LineFill} {
+      border-radius: 4px;
+    }
+
+    &:after {
+      width: 4px;
+      border-top-right-radius: 8px;
+      border-bottom-right-radius: 8px;
+    }
+
+    &:before {
+      width: 4px;
+      border-top-left-radius: 8px;
+      border-bottom-left-radius: 8px;
+    }
+  }
+
+  &.large {
+    height: 12px;
+    border-radius: 6px;
+
+    ${LineFill} {
+      border-radius: 6px;
+    }
+
+    &:after {
+      width: 6px;
+      border-top-right-radius: 12px;
+      border-bottom-right-radius: 12px;
+    }
+
+    &:before {
+      width: 6px;
+      border-top-left-radius: 12px;
+      border-bottom-left-radius: 12px;
+    }
+  }
+
+  background-color: ${props => COLORS.getColor('neutral_100', props.theme)};
+
+  ${LineFill} {
+    background-color: ${props => COLORS.getColor('accent1_500', props.theme)};
+  }
+
+  &.inverted {
+    background-color: ${props => COLORS.getColor('neutral_700', props.theme)};
+
+    &:after,
+    &:before {
+      background-color: ${props => COLORS.getColor('neutral_400', props.theme)};
+    }
+
+    ${LineFill} {
+      background-color: ${props => COLORS.getColor('accent1_400', props.theme)};
+    }
+  }
+`;
+const Label = styled.div`
+  color: ${props => COLORS.getColor('black', props.theme)};
+`;
+const Content = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  height: 16px;
+`;
+const Wrapper = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  &.inverted {
+    ${Label} {
+      color: ${props => COLORS.getColor('white', props.theme)};
+    }
+  }
+
+  &.small {
+    gap: 4px;
+
+    ${Label} {
+      ${ComponentSStyling(ComponentTextStyle.Regular, null)}
+    }
+
+    ${Content} {
+      gap: 4px;
+
+      ${Bar}:first-of-type {
+        border-top-left-radius: 6px;
+        border-bottom-left-radius: 6px;
+      }
+
+      ${Bar}:last-of-type {
+        border-top-right-radius: 6px;
+        border-bottom-right-radius: 6px;
+      }
+    }
+  }
+
+  &.medium {
+    ${Label} {
+      ${ComponentMStyling(ComponentTextStyle.Regular, null)}
+    }
+
+    ${Content} {
+      gap: 6px;
+
+      ${Bar}:first-of-type {
+        border-top-left-radius: 8px;
+        border-bottom-left-radius: 8px;
+      }
+
+      ${Bar}:last-of-type {
+        border-top-right-radius: 8px;
+        border-bottom-right-radius: 8px;
+      }
+    }
+  }
+
+  &.large {
+    ${Label} {
+      ${ComponentLStyling(ComponentTextStyle.Regular, null)}
+    }
+
+    ${Content} {
+      gap: 8px;
+
+      ${Bar}:first-of-type {
+        border-top-left-radius: 12px;
+        border-bottom-left-radius: 12px;
+      }
+
+      ${Bar}:last-of-type {
+        border-top-right-radius: 12px;
+        border-bottom-right-radius: 12px;
+      }
+    }
+  }
+
+  &.dots.small,
+  &.dots.medium {
+    ${Content} {
+      padding: 0 2px;
+    }
+  }
+
+  &.dots.large {
+    ${Content} {
+      padding: 0 3px;
+    }
+  }
+`;
 export let LinearProgressType = /*#__PURE__*/function (LinearProgressType) {
   LinearProgressType["Dots"] = "dots";
   LinearProgressType["Line"] = "line";
@@ -42,20 +355,20 @@ const LinearProgress = _ref => {
     rest = _objectWithoutProperties(_ref, _excluded);
   const renderBars = () => /*#__PURE__*/_jsx(_Fragment, {
     children: Array.from(Array(max).keys()).map(i => /*#__PURE__*/_jsx(Bar, {
-      className: "".concat(Math.ceil(value) >= i + 1 ? 'active' : '', " ").concat(Math.ceil(value) === i + 1 ? 'current' : '', " ").concat(variant, " ").concat(size)
+      className: `${Math.ceil(value) >= i + 1 ? 'active' : ''} ${Math.ceil(value) === i + 1 ? 'current' : ''} ${variant} ${size}`
     }, i))
   });
   const renderDots = () => /*#__PURE__*/_jsx(_Fragment, {
     children: Array.from(Array(max).keys()).map(i => /*#__PURE__*/_jsx(Dot, {
-      className: "".concat(Math.ceil(value) >= i + 1 ? 'active' : '', " ").concat(Math.ceil(value) === i + 1 ? 'current' : '', " ").concat(variant, " ").concat(size)
+      className: `${Math.ceil(value) >= i + 1 ? 'active' : ''} ${Math.ceil(value) === i + 1 ? 'current' : ''} ${variant} ${size}`
     }, i))
   });
   const renderLine = () => /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx(Line, {
-      className: "".concat(variant, " ").concat(size),
+      className: `${variant} ${size}`,
       children: /*#__PURE__*/_jsx(LineFill, {
         style: {
-          width: "".concat(value / max * 100, "%")
+          width: `${value / max * 100}%`
         }
       })
     })
@@ -72,7 +385,7 @@ const LinearProgress = _ref => {
     }
   };
   return /*#__PURE__*/_jsxs(Wrapper, _objectSpread(_objectSpread({
-    className: "".concat(size, " ").concat(type, " ").concat(variant, " ").concat(className || '')
+    className: `${size} ${type} ${variant} ${className || ''}`
   }, rest), {}, {
     children: [label && /*#__PURE__*/_jsx(Label, {
       children: label

package/dist/LinearProgress/LinearProgress.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinearProgress.js","names":["React","Size","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","Bar","div","_templateObject","_taggedTemplateLiteral","props","getColor","theme","Dot","_templateObject2","LineFill","_templateObject3","Line","_templateObject4","Label","_templateObject5","Content","_templateObject6","Wrapper","_templateObject7","Regular","LinearProgressType","LinearProgressVariant","LinearProgress","_ref","size","Medium","type","variant","Normal","label","value","max","className","rest","_objectWithoutProperties","_excluded","renderBars","children","Array","from","keys","map","i","concat","Math","ceil","renderDots","renderLine","style","width","render","Bars","Dots","_objectSpread","propTypes","_pt","oneOf","string","number","isRequired"],"sources":["../../src/LinearProgress/LinearProgress.tsx"],"sourcesContent":["import React from 'react';\r\nimport {Size} from '../types';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle} from '../styles';\r\n\r\nexport const Bar = styled.div`\r\n  flex: 1;\r\n  height: 6px;\r\n\r\n  &.small {\r\n    height: 6px;\r\n  }\r\n\r\n  &.medium {\r\n    height: 8px;\r\n  }\r\n\r\n  &.large {\r\n    height: 12px;\r\n  }\r\n\r\n  background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n\r\n  &.active {\r\n    background-color: ${props => COLORS.getColor('accent1_400', props.theme)};\r\n  }\r\n\r\n  &.current {\r\n    background-color: ${props => COLORS.getColor('accent1_800', props.theme)};\r\n  }\r\n\r\n  &.inverted {\r\n    background-color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n  }\r\n\r\n  &.inverted.active {\r\n    background-color: ${props => COLORS.getColor('accent1_400', props.theme)};\r\n  }\r\n\r\n  &.inverted.current {\r\n    background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  }\r\n\r\n`;\r\n\r\nexport const Dot = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 16px;\r\n  height: 16px;\r\n\r\n\r\n  &:after {\r\n    content: '';\r\n    display: block;\r\n    width: 6px;\r\n    height: 6px;\r\n    border-radius: 50%;\r\n    background-color: ${props => COLORS.getColor('neutral_400', props.theme)};\r\n  }\r\n\r\n  &.small {\r\n    &:after {\r\n      width: 6px;\r\n      height: 6px;\r\n    }\r\n\r\n    &.current:after {\r\n      width: 10px;\r\n      height: 10px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    &:after {\r\n      width: 8px;\r\n      height: 8px;\r\n    }\r\n\r\n    &.current:after {\r\n      width: 12px;\r\n      height: 12px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    &:after {\r\n      width: 12px;\r\n      height: 12px;\r\n    }\r\n\r\n    &.current:after {\r\n      width: 16px;\r\n      height: 16px;\r\n    }\r\n  }\r\n\r\n\r\n  &.active:after {\r\n    background-color: ${props => COLORS.getColor('accent1_600', props.theme)};\r\n  }\r\n\r\n  &.current:after {\r\n    background-color: ${props => COLORS.getColor('accent1_800', props.theme)};\r\n  }\r\n\r\n  &.inverted:after {\r\n    background-color: ${props => COLORS.getColor('neutral_400', props.theme)};\r\n  }\r\n\r\n  &.inverted.active:after {\r\n    background-color: ${props => COLORS.getColor('accent1_400', props.theme)};\r\n  }\r\n\r\n  &.inverted.current:after {\r\n    background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  }\r\n`;\r\n\r\nexport const LineFill = styled.div`\r\n  height: 100%;\r\n  max-width: 100%;\r\n  position: absolute;\r\n  z-index: 1;\r\n`;\r\n\r\nexport const Line = styled.div`\r\n  flex: 1;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: flex-start;\r\n  position: relative;\r\n\r\n  &:after {\r\n    content: '';\r\n    display: block;\r\n    height: 100%;\r\n    background-color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n    position: absolute;\r\n    right: 0;\r\n  }\r\n\r\n  &:before {\r\n    content: '';\r\n    display: block;\r\n    height: 100%;\r\n    background-color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n    position: absolute;\r\n    left: 0;\r\n  }\r\n\r\n  &.small {\r\n    height: 6px;\r\n    border-radius: 4px;\r\n\r\n    ${LineFill} {\r\n      border-radius: 4px;\r\n    }\r\n\r\n    &:after {\r\n      width: 3px;\r\n      border-top-right-radius: 6px;\r\n      border-bottom-right-radius: 6px;\r\n    }\r\n\r\n    &:before {\r\n      width: 3px;\r\n      border-top-left-radius: 6px;\r\n      border-bottom-left-radius: 6px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    height: 8px;\r\n    border-radius: 4px;\r\n\r\n    ${LineFill} {\r\n      border-radius: 4px;\r\n    }\r\n\r\n    &:after {\r\n      width: 4px;\r\n      border-top-right-radius: 8px;\r\n      border-bottom-right-radius: 8px;\r\n    }\r\n\r\n    &:before {\r\n      width: 4px;\r\n      border-top-left-radius: 8px;\r\n      border-bottom-left-radius: 8px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    height: 12px;\r\n    border-radius: 6px;\r\n\r\n    ${LineFill} {\r\n      border-radius: 6px;\r\n    }\r\n\r\n    &:after {\r\n      width: 6px;\r\n      border-top-right-radius: 12px;\r\n      border-bottom-right-radius: 12px;\r\n    }\r\n\r\n    &:before {\r\n      width: 6px;\r\n      border-top-left-radius: 12px;\r\n      border-bottom-left-radius: 12px;\r\n    }\r\n  }\r\n\r\n  background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n\r\n  ${LineFill} {\r\n    background-color: ${props => COLORS.getColor('accent1_500', props.theme)};\r\n  }\r\n\r\n  &.inverted {\r\n    background-color: ${props => COLORS.getColor('neutral_700', props.theme)};\r\n\r\n    &:after,\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('neutral_400', props.theme)};\r\n    }\r\n\r\n    ${LineFill} {\r\n      background-color: ${props => COLORS.getColor('accent1_400', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nconst Label = styled.div`\r\n  color: ${props => COLORS.getColor('black', props.theme)};\r\n`;\r\n\r\nconst Content = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  flex-direction: row;\r\n  height: 16px;\r\n`;\r\n\r\nconst Wrapper = styled.div`\r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 8px;\r\n\r\n  &.inverted {\r\n    ${Label} {\r\n      color: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    gap: 4px;\r\n\r\n    ${Label} {\r\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    ${Content} {\r\n      gap: 4px;\r\n\r\n      ${Bar}:first-of-type {\r\n        border-top-left-radius: 6px;\r\n        border-bottom-left-radius: 6px;\r\n      }\r\n\r\n      ${Bar}:last-of-type {\r\n        border-top-right-radius: 6px;\r\n        border-bottom-right-radius: 6px;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${Label} {\r\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    ${Content} {\r\n      gap: 6px;\r\n\r\n      ${Bar}:first-of-type {\r\n        border-top-left-radius: 8px;\r\n        border-bottom-left-radius: 8px;\r\n      }\r\n\r\n      ${Bar}:last-of-type {\r\n        border-top-right-radius: 8px;\r\n        border-bottom-right-radius: 8px;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${Label} {\r\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    ${Content} {\r\n      gap: 8px;\r\n\r\n      ${Bar}:first-of-type {\r\n        border-top-left-radius: 12px;\r\n        border-bottom-left-radius: 12px;\r\n      }\r\n\r\n      ${Bar}:last-of-type {\r\n        border-top-right-radius: 12px;\r\n        border-bottom-right-radius: 12px;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.dots.small,\r\n  &.dots.medium {\r\n    ${Content} {\r\n      padding: 0 2px;\r\n    }\r\n  }\r\n\r\n  &.dots.large {\r\n    ${Content} {\r\n      padding: 0 3px;\r\n    }\r\n  }\r\n`;\r\n\r\nexport enum LinearProgressType {\r\n  Dots = 'dots',\r\n  Line = 'line',\r\n  Bars = 'bars',\r\n}\r\n\r\nexport enum LinearProgressVariant {\r\n  Normal = 'normal',\r\n  Inverted = 'inverted',\r\n}\r\n\r\nexport interface LinearProgressProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  /** Size of the component. Defaults to 'medium' */\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  /** Progress type. Defaults to 'line' */\r\n  type?: LinearProgressType;\r\n  /** Progress variant. Defaults to 'normal' */\r\n  variant?: LinearProgressVariant;\r\n  /** Label of the component */\r\n  label?: string;\r\n /** Current value on the progress. */\r\n  value: number;\r\n  /** Maximum value of the progress bar. */\r\n  max: number;\r\n}\r\n\r\nconst LinearProgress: React.FunctionComponent<LinearProgressProps> = ({\r\n                                                                        size = Size.Medium,\r\n                                                                        type = LinearProgressType.Line,\r\n                                                                        variant = LinearProgressVariant.Normal,\r\n                                                                        label,\r\n                                                                        value,\r\n                                                                        max,\r\n                                                                        className,\r\n                                                                        ...rest\r\n                                                                      }) => {\r\n\r\n  const renderBars = () =>\r\n    <>\r\n      {Array.from(Array(max).keys()).map(i => (\r\n        <Bar key={i}\r\n             className={`${Math.ceil(value) >= i + 1 ? 'active' : ''} ${Math.ceil(value) === i + 1 ? 'current' : ''} ${variant} ${size}`}/>\r\n      ))}\r\n    </>\r\n\r\n  const renderDots = () =>\r\n    <>\r\n      {Array.from(Array(max).keys()).map(i => (\r\n        <Dot key={i}\r\n             className={`${Math.ceil(value) >= i + 1 ? 'active' : ''} ${Math.ceil(value) === i + 1 ? 'current' : ''} ${variant} ${size}`}/>\r\n      ))}\r\n    </>\r\n\r\n  const renderLine = () =>\r\n    <>\r\n      <Line className={`${variant} ${size}`}>\r\n        <LineFill style={{width: `${value / max * 100}%`}}/>\r\n      </Line>\r\n    </>\r\n\r\n\r\n  const render = () => {\r\n    switch (type) {\r\n      case LinearProgressType.Bars:\r\n        return renderBars();\r\n      case LinearProgressType.Dots:\r\n        return renderDots();\r\n      case LinearProgressType.Line:\r\n      default:\r\n        return renderLine();\r\n    }\r\n  }\r\n\r\n  return (\r\n    <Wrapper className={`${size} ${type} ${variant} ${className || ''}`} {...rest}>\r\n      {label && <Label>{label}</Label>}\r\n      <Content>\r\n        {render()}\r\n      </Content>\r\n    </Wrapper>\r\n  )\r\n};\r\n\r\nexport default LinearProgress;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"LinearProgress.js","names":["React","Size","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","Bar","div","props","getColor","theme","Dot","LineFill","Line","Label","Content","Wrapper","Regular","LinearProgressType","LinearProgressVariant","LinearProgress","_ref","size","Medium","type","variant","Normal","label","value","max","className","rest","_objectWithoutProperties","_excluded","renderBars","children","Array","from","keys","map","i","Math","ceil","renderDots","renderLine","style","width","render","Bars","Dots","_objectSpread","propTypes","_pt","oneOf","string","number","isRequired"],"sources":["../../src/LinearProgress/LinearProgress.tsx"],"sourcesContent":["import React from 'react';\r\nimport {Size} from '../types';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle} from '../styles';\r\n\r\nexport const Bar = styled.div`\r\n  flex: 1;\r\n  height: 6px;\r\n\r\n  &.small {\r\n    height: 6px;\r\n  }\r\n\r\n  &.medium {\r\n    height: 8px;\r\n  }\r\n\r\n  &.large {\r\n    height: 12px;\r\n  }\r\n\r\n  background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n\r\n  &.active {\r\n    background-color: ${props => COLORS.getColor('accent1_400', props.theme)};\r\n  }\r\n\r\n  &.current {\r\n    background-color: ${props => COLORS.getColor('accent1_800', props.theme)};\r\n  }\r\n\r\n  &.inverted {\r\n    background-color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n  }\r\n\r\n  &.inverted.active {\r\n    background-color: ${props => COLORS.getColor('accent1_400', props.theme)};\r\n  }\r\n\r\n  &.inverted.current {\r\n    background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  }\r\n\r\n`;\r\n\r\nexport const Dot = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 16px;\r\n  height: 16px;\r\n\r\n\r\n  &:after {\r\n    content: '';\r\n    display: block;\r\n    width: 6px;\r\n    height: 6px;\r\n    border-radius: 50%;\r\n    background-color: ${props => COLORS.getColor('neutral_400', props.theme)};\r\n  }\r\n\r\n  &.small {\r\n    &:after {\r\n      width: 6px;\r\n      height: 6px;\r\n    }\r\n\r\n    &.current:after {\r\n      width: 10px;\r\n      height: 10px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    &:after {\r\n      width: 8px;\r\n      height: 8px;\r\n    }\r\n\r\n    &.current:after {\r\n      width: 12px;\r\n      height: 12px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    &:after {\r\n      width: 12px;\r\n      height: 12px;\r\n    }\r\n\r\n    &.current:after {\r\n      width: 16px;\r\n      height: 16px;\r\n    }\r\n  }\r\n\r\n\r\n  &.active:after {\r\n    background-color: ${props => COLORS.getColor('accent1_600', props.theme)};\r\n  }\r\n\r\n  &.current:after {\r\n    background-color: ${props => COLORS.getColor('accent1_800', props.theme)};\r\n  }\r\n\r\n  &.inverted:after {\r\n    background-color: ${props => COLORS.getColor('neutral_400', props.theme)};\r\n  }\r\n\r\n  &.inverted.active:after {\r\n    background-color: ${props => COLORS.getColor('accent1_400', props.theme)};\r\n  }\r\n\r\n  &.inverted.current:after {\r\n    background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  }\r\n`;\r\n\r\nexport const LineFill = styled.div`\r\n  height: 100%;\r\n  max-width: 100%;\r\n  position: absolute;\r\n  z-index: 1;\r\n`;\r\n\r\nexport const Line = styled.div`\r\n  flex: 1;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: flex-start;\r\n  position: relative;\r\n\r\n  &:after {\r\n    content: '';\r\n    display: block;\r\n    height: 100%;\r\n    background-color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n    position: absolute;\r\n    right: 0;\r\n  }\r\n\r\n  &:before {\r\n    content: '';\r\n    display: block;\r\n    height: 100%;\r\n    background-color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n    position: absolute;\r\n    left: 0;\r\n  }\r\n\r\n  &.small {\r\n    height: 6px;\r\n    border-radius: 4px;\r\n\r\n    ${LineFill} {\r\n      border-radius: 4px;\r\n    }\r\n\r\n    &:after {\r\n      width: 3px;\r\n      border-top-right-radius: 6px;\r\n      border-bottom-right-radius: 6px;\r\n    }\r\n\r\n    &:before {\r\n      width: 3px;\r\n      border-top-left-radius: 6px;\r\n      border-bottom-left-radius: 6px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    height: 8px;\r\n    border-radius: 4px;\r\n\r\n    ${LineFill} {\r\n      border-radius: 4px;\r\n    }\r\n\r\n    &:after {\r\n      width: 4px;\r\n      border-top-right-radius: 8px;\r\n      border-bottom-right-radius: 8px;\r\n    }\r\n\r\n    &:before {\r\n      width: 4px;\r\n      border-top-left-radius: 8px;\r\n      border-bottom-left-radius: 8px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    height: 12px;\r\n    border-radius: 6px;\r\n\r\n    ${LineFill} {\r\n      border-radius: 6px;\r\n    }\r\n\r\n    &:after {\r\n      width: 6px;\r\n      border-top-right-radius: 12px;\r\n      border-bottom-right-radius: 12px;\r\n    }\r\n\r\n    &:before {\r\n      width: 6px;\r\n      border-top-left-radius: 12px;\r\n      border-bottom-left-radius: 12px;\r\n    }\r\n  }\r\n\r\n  background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n\r\n  ${LineFill} {\r\n    background-color: ${props => COLORS.getColor('accent1_500', props.theme)};\r\n  }\r\n\r\n  &.inverted {\r\n    background-color: ${props => COLORS.getColor('neutral_700', props.theme)};\r\n\r\n    &:after,\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('neutral_400', props.theme)};\r\n    }\r\n\r\n    ${LineFill} {\r\n      background-color: ${props => COLORS.getColor('accent1_400', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nconst Label = styled.div`\r\n  color: ${props => COLORS.getColor('black', props.theme)};\r\n`;\r\n\r\nconst Content = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  flex-direction: row;\r\n  height: 16px;\r\n`;\r\n\r\nconst Wrapper = styled.div`\r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 8px;\r\n\r\n  &.inverted {\r\n    ${Label} {\r\n      color: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    gap: 4px;\r\n\r\n    ${Label} {\r\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    ${Content} {\r\n      gap: 4px;\r\n\r\n      ${Bar}:first-of-type {\r\n        border-top-left-radius: 6px;\r\n        border-bottom-left-radius: 6px;\r\n      }\r\n\r\n      ${Bar}:last-of-type {\r\n        border-top-right-radius: 6px;\r\n        border-bottom-right-radius: 6px;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${Label} {\r\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    ${Content} {\r\n      gap: 6px;\r\n\r\n      ${Bar}:first-of-type {\r\n        border-top-left-radius: 8px;\r\n        border-bottom-left-radius: 8px;\r\n      }\r\n\r\n      ${Bar}:last-of-type {\r\n        border-top-right-radius: 8px;\r\n        border-bottom-right-radius: 8px;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${Label} {\r\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    ${Content} {\r\n      gap: 8px;\r\n\r\n      ${Bar}:first-of-type {\r\n        border-top-left-radius: 12px;\r\n        border-bottom-left-radius: 12px;\r\n      }\r\n\r\n      ${Bar}:last-of-type {\r\n        border-top-right-radius: 12px;\r\n        border-bottom-right-radius: 12px;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.dots.small,\r\n  &.dots.medium {\r\n    ${Content} {\r\n      padding: 0 2px;\r\n    }\r\n  }\r\n\r\n  &.dots.large {\r\n    ${Content} {\r\n      padding: 0 3px;\r\n    }\r\n  }\r\n`;\r\n\r\nexport enum LinearProgressType {\r\n  Dots = 'dots',\r\n  Line = 'line',\r\n  Bars = 'bars',\r\n}\r\n\r\nexport enum LinearProgressVariant {\r\n  Normal = 'normal',\r\n  Inverted = 'inverted',\r\n}\r\n\r\nexport interface LinearProgressProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  /** Size of the component. Defaults to 'medium' */\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  /** Progress type. Defaults to 'line' */\r\n  type?: LinearProgressType;\r\n  /** Progress variant. Defaults to 'normal' */\r\n  variant?: LinearProgressVariant;\r\n  /** Label of the component */\r\n  label?: string;\r\n /** Current value on the progress. */\r\n  value: number;\r\n  /** Maximum value of the progress bar. */\r\n  max: number;\r\n}\r\n\r\nconst LinearProgress: React.FunctionComponent<LinearProgressProps> = ({\r\n                                                                        size = Size.Medium,\r\n                                                                        type = LinearProgressType.Line,\r\n                                                                        variant = LinearProgressVariant.Normal,\r\n                                                                        label,\r\n                                                                        value,\r\n                                                                        max,\r\n                                                                        className,\r\n                                                                        ...rest\r\n                                                                      }) => {\r\n\r\n  const renderBars = () =>\r\n    <>\r\n      {Array.from(Array(max).keys()).map(i => (\r\n        <Bar key={i}\r\n             className={`${Math.ceil(value) >= i + 1 ? 'active' : ''} ${Math.ceil(value) === i + 1 ? 'current' : ''} ${variant} ${size}`}/>\r\n      ))}\r\n    </>\r\n\r\n  const renderDots = () =>\r\n    <>\r\n      {Array.from(Array(max).keys()).map(i => (\r\n        <Dot key={i}\r\n             className={`${Math.ceil(value) >= i + 1 ? 'active' : ''} ${Math.ceil(value) === i + 1 ? 'current' : ''} ${variant} ${size}`}/>\r\n      ))}\r\n    </>\r\n\r\n  const renderLine = () =>\r\n    <>\r\n      <Line className={`${variant} ${size}`}>\r\n        <LineFill style={{width: `${value / max * 100}%`}}/>\r\n      </Line>\r\n    </>\r\n\r\n\r\n  const render = () => {\r\n    switch (type) {\r\n      case LinearProgressType.Bars:\r\n        return renderBars();\r\n      case LinearProgressType.Dots:\r\n        return renderDots();\r\n      case LinearProgressType.Line:\r\n      default:\r\n        return renderLine();\r\n    }\r\n  }\r\n\r\n  return (\r\n    <Wrapper className={`${size} ${type} ${variant} ${className || ''}`} {...rest}>\r\n      {label && <Label>{label}</Label>}\r\n      <Content>\r\n        {render()}\r\n      </Content>\r\n    </Wrapper>\r\n  )\r\n};\r\n\r\nexport default LinearProgress;\r\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAAQC,IAAI,QAAO,UAAU;AAC7B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,MAAM,EAAEC,iBAAiB,EAAEC,iBAAiB,EAAEC,iBAAiB,EAAEC,kBAAkB,QAAO,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA,EAAAC,IAAA,IAAAC,KAAA;AAE9G,OAAO,MAAMC,GAAG,GAAGZ,MAAM,CAACa,GAAG;AAC7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsBC,KAAK,IAAIb,MAAM,CAACc,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAC1E;AACA;AACA,wBAAwBF,KAAK,IAAIb,MAAM,CAACc,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAC5E;AACA;AACA;AACA,wBAAwBF,KAAK,IAAIb,MAAM,CAACc,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAC5E;AACA;AACA;AACA,wBAAwBF,KAAK,IAAIb,MAAM,CAACc,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAC5E;AACA;AACA;AACA,wBAAwBF,KAAK,IAAIb,MAAM,CAACc,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAC5E;AACA;AACA;AACA,wBAAwBF,KAAK,IAAIb,MAAM,CAACc,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC;AACtE;AACA;AACA,CAAC;AAED,OAAO,MAAMC,GAAG,GAAGjB,MAAM,CAACa,GAAG;AAC7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBC,KAAK,IAAIb,MAAM,CAACc,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAC5E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBF,KAAK,IAAIb,MAAM,CAACc,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAC5E;AACA;AACA;AACA,wBAAwBF,KAAK,IAAIb,MAAM,CAACc,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAC5E;AACA;AACA;AACA,wBAAwBF,KAAK,IAAIb,MAAM,CAACc,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAC5E;AACA;AACA;AACA,wBAAwBF,KAAK,IAAIb,MAAM,CAACc,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAC5E;AACA;AACA;AACA,wBAAwBF,KAAK,IAAIb,MAAM,CAACc,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC;AACtE;AACA,CAAC;AAED,OAAO,MAAME,QAAQ,GAAGlB,MAAM,CAACa,GAAG;AAClC;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMM,IAAI,GAAGnB,MAAM,CAACa,GAAG;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBC,KAAK,IAAIb,MAAM,CAACc,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAC5E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBF,KAAK,IAAIb,MAAM,CAACc,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAC5E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAME,QAAQ;AACd;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMA,QAAQ;AACd;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMA,QAAQ;AACd;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsBJ,KAAK,IAAIb,MAAM,CAACc,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAC1E;AACA,IAAIE,QAAQ;AACZ,wBAAwBJ,KAAK,IAAIb,MAAM,CAACc,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAC5E;AACA;AACA;AACA,wBAAwBF,KAAK,IAAIb,MAAM,CAACc,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAC5E;AACA;AACA;AACA,0BAA0BF,KAAK,IAAIb,MAAM,CAACc,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAC9E;AACA;AACA,MAAME,QAAQ;AACd,0BAA0BJ,KAAK,IAAIb,MAAM,CAACc,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAC9E;AACA;AACA,CAAC;AAED,MAAMI,KAAK,GAAGpB,MAAM,CAACa,GAAG;AACxB,WAAWC,KAAK,IAAIb,MAAM,CAACc,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC;AACzD,CAAC;AAED,MAAMK,OAAO,GAAGrB,MAAM,CAACa,GAAG;AAC1B;AACA;AACA;AACA;AACA,CAAC;AAED,MAAMS,OAAO,GAAGtB,MAAM,CAACa,GAAG;AAC1B;AACA;AACA;AACA;AACA;AACA;AACA,MAAMO,KAAK;AACX,eAAeN,KAAK,IAAIb,MAAM,CAACc,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC;AAC7D;AACA;AACA;AACA;AACA;AACA;AACA,MAAMI,KAAK;AACX,QAAQhB,iBAAiB,CAACC,kBAAkB,CAACkB,OAAO,EAAE,IAAI,CAAC;AAC3D;AACA;AACA,MAAMF,OAAO;AACb;AACA;AACA,QAAQT,GAAG;AACX;AACA;AACA;AACA;AACA,QAAQA,GAAG;AACX;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMQ,KAAK;AACX,QAAQjB,iBAAiB,CAACE,kBAAkB,CAACkB,OAAO,EAAE,IAAI,CAAC;AAC3D;AACA;AACA,MAAMF,OAAO;AACb;AACA;AACA,QAAQT,GAAG;AACX;AACA;AACA;AACA;AACA,QAAQA,GAAG;AACX;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMQ,KAAK;AACX,QAAQlB,iBAAiB,CAACG,kBAAkB,CAACkB,OAAO,EAAE,IAAI,CAAC;AAC3D;AACA;AACA,MAAMF,OAAO;AACb;AACA;AACA,QAAQT,GAAG;AACX;AACA;AACA;AACA;AACA,QAAQA,GAAG;AACX;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMS,OAAO;AACb;AACA;AACA;AACA;AACA;AACA,MAAMA,OAAO;AACb;AACA;AACA;AACA,CAAC;AAED,WAAYG,kBAAkB,0BAAlBA,kBAAkB;EAAlBA,kBAAkB;EAAlBA,kBAAkB;EAAlBA,kBAAkB;EAAA,OAAlBA,kBAAkB;AAAA;AAM9B,WAAYC,qBAAqB,0BAArBA,qBAAqB;EAArBA,qBAAqB;EAArBA,qBAAqB;EAAA,OAArBA,qBAAqB;AAAA;AAoBjC,MAAMC,cAA4D,GAAGC,IAAA,IASO;EAAA,IATN;MACEC,IAAI,GAAG7B,IAAI,CAAC8B,MAAM;MAClBC,IAAI,GAAGN,kBAAkB,CAACL,IAAI;MAC9BY,OAAO,GAAGN,qBAAqB,CAACO,MAAM;MACtCC,KAAK;MACLC,KAAK;MACLC,GAAG;MACHC;IAEF,CAAC,GAAAT,IAAA;IADIU,IAAI,GAAAC,wBAAA,CAAAX,IAAA,EAAAY,SAAA;EAG7E,MAAMC,UAAU,GAAGA,CAAA,kBACjBjC,IAAA,CAAAE,SAAA;IAAAgC,QAAA,EACGC,KAAK,CAACC,IAAI,CAACD,KAAK,CAACP,GAAG,CAAC,CAACS,IAAI,CAAC,CAAC,CAAC,CAACC,GAAG,CAACC,CAAC,iBAClCvC,IAAA,CAACK,GAAG;MACCwB,SAAS,EAAE,GAAGW,IAAI,CAACC,IAAI,CAACd,KAAK,CAAC,IAAIY,CAAC,GAAG,CAAC,GAAG,QAAQ,GAAG,EAAE,IAAIC,IAAI,CAACC,IAAI,CAACd,KAAK,CAAC,KAAKY,CAAC,GAAG,CAAC,GAAG,SAAS,GAAG,EAAE,IAAIf,OAAO,IAAIH,IAAI;IAAG,GADvHkB,CACwH,CACnI;EAAC,CACF,CAAC;EAEL,MAAMG,UAAU,GAAGA,CAAA,kBACjB1C,IAAA,CAAAE,SAAA;IAAAgC,QAAA,EACGC,KAAK,CAACC,IAAI,CAACD,KAAK,CAACP,GAAG,CAAC,CAACS,IAAI,CAAC,CAAC,CAAC,CAACC,GAAG,CAACC,CAAC,iBAClCvC,IAAA,CAACU,GAAG;MACCmB,SAAS,EAAE,GAAGW,IAAI,CAACC,IAAI,CAACd,KAAK,CAAC,IAAIY,CAAC,GAAG,CAAC,GAAG,QAAQ,GAAG,EAAE,IAAIC,IAAI,CAACC,IAAI,CAACd,KAAK,CAAC,KAAKY,CAAC,GAAG,CAAC,GAAG,SAAS,GAAG,EAAE,IAAIf,OAAO,IAAIH,IAAI;IAAG,GADvHkB,CACwH,CACnI;EAAC,CACF,CAAC;EAEL,MAAMI,UAAU,GAAGA,CAAA,kBACjB3C,IAAA,CAAAE,SAAA;IAAAgC,QAAA,eACElC,IAAA,CAACY,IAAI;MAACiB,SAAS,EAAE,GAAGL,OAAO,IAAIH,IAAI,EAAG;MAAAa,QAAA,eACpClC,IAAA,CAACW,QAAQ;QAACiC,KAAK,EAAE;UAACC,KAAK,EAAE,GAAGlB,KAAK,GAAGC,GAAG,GAAG,GAAG;QAAG;MAAE,CAAC;IAAC,CAChD;EAAC,CACP,CAAC;EAGL,MAAMkB,MAAM,GAAGA,CAAA,KAAM;IACnB,QAAQvB,IAAI;MACV,KAAKN,kBAAkB,CAAC8B,IAAI;QAC1B,OAAOd,UAAU,CAAC,CAAC;MACrB,KAAKhB,kBAAkB,CAAC+B,IAAI;QAC1B,OAAON,UAAU,CAAC,CAAC;MACrB,KAAKzB,kBAAkB,CAACL,IAAI;MAC5B;QACE,OAAO+B,UAAU,CAAC,CAAC;IACvB;EACF,CAAC;EAED,oBACEvC,KAAA,CAACW,OAAO,EAAAkC,aAAA,CAAAA,aAAA;IAACpB,SAAS,EAAE,GAAGR,IAAI,IAAIE,IAAI,IAAIC,OAAO,IAAIK,SAAS,IAAI,EAAE;EAAG,GAAKC,IAAI;IAAAI,QAAA,GAC1ER,KAAK,iBAAI1B,IAAA,CAACa,KAAK;MAAAqB,QAAA,EAAER;IAAK,CAAQ,CAAC,eAChC1B,IAAA,CAACc,OAAO;MAAAoB,QAAA,EACLY,MAAM,CAAC;IAAC,CACF,CAAC;EAAA,EACH,CAAC;AAEd,CAAC;AAAC3B,cAAA,CAAA+B,SAAA;EAlEA3B,IAAI,EAAA4B,GAAA,CAAAC,KAAA;EAEJ5B,OAAO,EAAA2B,GAAA,CAAAC,KAAA;EAEP1B,KAAK,EAAAyB,GAAA,CAAAE,MAAA;EAEL1B,KAAK,EAAAwB,GAAA,CAAAG,MAAA,CAAAC,UAAA;EAEL3B,GAAG,EAAAuB,GAAA,CAAAG,MAAA,CAAAC;AAAA;AA4DL,eAAepC,cAAc","ignoreList":[]}

package/dist/LinearProgress/index.d.ts

@@ -1,3 +1,3 @@
-import LinearProgress, { LinearProgressType, LinearProgressVariant } from './LinearProgress';
-export { LinearProgressType, LinearProgressVariant };
-export { LinearProgress };
+import LinearProgress, { LinearProgressType, LinearProgressVariant } from './LinearProgress';
+export { LinearProgressType, LinearProgressVariant };
+export { LinearProgress };