@laerdal/life-react-components 1.5.1-dev.10 → 1.5.1-dev.11

package/dist/LinearProgression/LinearProgression.cjs

@@ -0,0 +1,132 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.LinearProgressionVariant = exports.LinearProgressionType = exports.LineFill = exports.Line = exports.Dot = exports.Bar = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _types = require("../types");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _styles = require("../styles");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+var Bar = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _styles.COLORS.neutral_100, _styles.COLORS.accent1_400, _styles.COLORS.accent1_800, _styles.COLORS.neutral_600, _styles.COLORS.accent1_400, _styles.COLORS.white);
+
+exports.Bar = Bar;
+
+var Dot = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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"])), _styles.COLORS.neutral_400, _styles.COLORS.accent1_600, _styles.COLORS.accent1_800, _styles.COLORS.neutral_400, _styles.COLORS.accent1_400, _styles.COLORS.white);
+
+exports.Dot = Dot;
+
+var LineFill = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  max-width: 100%;\n  position: absolute;\n  z-index: 1;\n"])));
+
+exports.LineFill = LineFill;
+
+var Line = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\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"])), _styles.COLORS.neutral_500, _styles.COLORS.neutral_500, LineFill, LineFill, LineFill, _styles.COLORS.neutral_100, LineFill, _styles.COLORS.accent1_500, _styles.COLORS.neutral_700, _styles.COLORS.neutral_400, LineFill, _styles.COLORS.accent1_400);
+
+exports.Line = Line;
+
+var Wrapper = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  gap: 4px;\n  height: 16px;\n\n  &.small {\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    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  &.large {\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"])), Bar, Bar, Bar, Bar, Bar, Bar);
+
+var LinearProgressionType;
+exports.LinearProgressionType = LinearProgressionType;
+
+(function (LinearProgressionType) {
+  LinearProgressionType["Dots"] = "dots";
+  LinearProgressionType["Line"] = "line";
+  LinearProgressionType["Bars"] = "bars";
+})(LinearProgressionType || (exports.LinearProgressionType = LinearProgressionType = {}));
+
+var LinearProgressionVariant;
+exports.LinearProgressionVariant = LinearProgressionVariant;
+
+(function (LinearProgressionVariant) {
+  LinearProgressionVariant["Normal"] = "normal";
+  LinearProgressionVariant["Inverted"] = "inverted";
+})(LinearProgressionVariant || (exports.LinearProgressionVariant = LinearProgressionVariant = {}));
+
+var LinearProgression = function LinearProgression(_ref) {
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? _types.Size.Medium : _ref$size,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? LinearProgressionType.Line : _ref$type,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? LinearProgressionVariant.Normal : _ref$variant,
+      value = _ref.value,
+      max = _ref.max;
+
+  var renderBars = function renderBars() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: Array.from(Array(max).keys()).map(function (i) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(Bar, {
+          className: "".concat(Math.ceil(value) >= i + 1 ? 'active' : '', " ").concat(Math.ceil(value) === i + 1 ? 'current' : '', " ").concat(variant, " ").concat(size)
+        }, i);
+      })
+    });
+  };
+
+  var renderDots = function renderDots() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: Array.from(Array(max).keys()).map(function (i) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(Dot, {
+          className: "".concat(Math.ceil(value) >= i + 1 ? 'active' : '', " ").concat(Math.ceil(value) === i + 1 ? 'current' : '', " ").concat(variant, " ").concat(size)
+        }, i);
+      })
+    });
+  };
+
+  var renderLine = function renderLine() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+        className: "".concat(variant, " ").concat(size),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(LineFill, {
+          style: {
+            width: "".concat(value / max * 100, "%")
+          }
+        })
+      })
+    });
+  };
+
+  var render = function render() {
+    switch (type) {
+      case LinearProgressionType.Bars:
+        return renderBars();
+
+      case LinearProgressionType.Dots:
+        return renderDots();
+
+      case LinearProgressionType.Line:
+      default:
+        return renderLine();
+    }
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
+    className: "".concat(size, " ").concat(type, " ").concat(variant),
+    children: render()
+  });
+};
+
+LinearProgression.propTypes = {
+  type: _propTypes.default.oneOf(["dots", "line", "bars"]),
+  variant: _propTypes.default.oneOf(["normal", "inverted"]),
+  value: _propTypes.default.number.isRequired,
+  max: _propTypes.default.number.isRequired
+};
+var _default = LinearProgression;
+exports.default = _default;
+//# sourceMappingURL=LinearProgression.cjs.map

package/dist/LinearProgression/LinearProgression.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/LinearProgression/LinearProgression.tsx"],"names":["Bar","styled","div","COLORS","neutral_100","accent1_400","accent1_800","neutral_600","white","Dot","neutral_400","accent1_600","LineFill","Line","neutral_500","accent1_500","neutral_700","Wrapper","LinearProgressionType","LinearProgressionVariant","LinearProgression","size","Size","Medium","type","variant","Normal","value","max","renderBars","Array","from","keys","map","i","Math","ceil","renderDots","renderLine","width","render","Bars","Dots"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {COLORS} from '../styles';\n\nexport const Bar = styled.div`\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: ${COLORS.neutral_100};\n\n  &.active {\n    background-color: ${COLORS.accent1_400};\n  }\n\n  &.current {\n    background-color: ${COLORS.accent1_800};\n  }\n\n  &.inverted {\n    background-color: ${COLORS.neutral_600};\n  }\n\n  &.inverted.active {\n    background-color: ${COLORS.accent1_400};\n  }\n\n  &.inverted.current {\n    background-color: ${COLORS.white};\n  }\n\n`;\n\nexport const Dot = styled.div`\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: ${COLORS.neutral_400};\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: ${COLORS.accent1_600};\n  }\n\n  &.current:after {\n    background-color: ${COLORS.accent1_800};\n  }\n\n  &.inverted:after {\n    background-color: ${COLORS.neutral_400};\n  }\n\n  &.inverted.active:after {\n    background-color: ${COLORS.accent1_400};\n  }\n\n  &.inverted.current:after {\n    background-color: ${COLORS.white};\n  }\n`;\n\nexport const LineFill = styled.div`\n  height: 100%;\n  max-width: 100%;\n  position: absolute;\n  z-index: 1;\n`;\n\nexport const Line = styled.div`\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: ${COLORS.neutral_500};\n    position: absolute;\n    right: 0;\n  }\n\n  &:before {\n    content: '';\n    display: block;\n    height: 100%;\n    background-color: ${COLORS.neutral_500};\n    position: absolute;\n    left: 0;\n  }\n\n  &.small {\n    height: 6px;\n    border-radius: 4px;\n\n    ${LineFill} {\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    ${LineFill} {\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    ${LineFill} {\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: ${COLORS.neutral_100};\n\n  ${LineFill} {\n    background-color: ${COLORS.accent1_500};\n  }\n\n  &.inverted {\n    background-color: ${COLORS.neutral_700};\n\n    &:after,\n    &:before {\n      background-color: ${COLORS.neutral_400};\n    }\n\n    ${LineFill} {\n      background-color: ${COLORS.accent1_400};\n    }\n  }\n`;\n\nconst Wrapper = styled.div`\n  width: 100%;\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  gap: 4px;\n  height: 16px;\n\n  &.small {\n    gap: 4px;\n\n    ${Bar}:first-of-type {\n      border-top-left-radius: 6px;\n      border-bottom-left-radius: 6px;\n    }\n\n    ${Bar}:last-of-type {\n      border-top-right-radius: 6px;\n      border-bottom-right-radius: 6px;\n    }\n\n  }\n\n  &.medium {\n    gap: 6px;\n\n    ${Bar}:first-of-type {\n      border-top-left-radius: 8px;\n      border-bottom-left-radius: 8px;\n    }\n\n    ${Bar}:last-of-type {\n      border-top-right-radius: 8px;\n      border-bottom-right-radius: 8px;\n    }\n  }\n\n  &.large {\n    gap: 8px;\n\n    ${Bar}:first-of-type {\n      border-top-left-radius: 12px;\n      border-bottom-left-radius: 12px;\n    }\n\n    ${Bar}:last-of-type {\n      border-top-right-radius: 12px;\n      border-bottom-right-radius: 12px;\n    }\n  }\n`;\n\nexport enum LinearProgressionType {\n  Dots = 'dots',\n  Line = 'line',\n  Bars = 'bars',\n}\n\nexport enum LinearProgressionVariant {\n  Normal = 'normal',\n  Inverted = 'inverted',\n}\n\nexport interface LinearProgressionProps {\n  size?: Size.Small | Size.Medium | Size.Large;\n  type?: LinearProgressionType;\n  variant?: LinearProgressionVariant;\n\n  value: number;\n  max: number;\n}\n\nconst LinearProgression: React.FunctionComponent<LinearProgressionProps> = ({\n                                                                              size = Size.Medium,\n                                                                              type = LinearProgressionType.Line,\n                                                                              variant = LinearProgressionVariant.Normal,\n                                                                              value,\n                                                                              max\n                                                                            }) => {\n\n  const renderBars = () => (\n    <>\n      {Array.from(Array(max).keys()).map(i => (\n        <Bar key={i}\n             className={`${Math.ceil(value) >= i + 1 ? 'active' : ''} ${Math.ceil(value) === i + 1 ? 'current' : ''} ${variant} ${size}`}/>\n      ))}\n    </>\n  )\n\n\n  const renderDots = () =>\n    <>\n      {Array.from(Array(max).keys()).map(i => (\n        <Dot key={i}\n             className={`${Math.ceil(value) >= i + 1 ? 'active' : ''} ${Math.ceil(value) === i + 1 ? 'current' : ''} ${variant} ${size}`}/>\n      ))}\n    </>\n\n  const renderLine = () =>\n    <>\n      <Line className={`${variant} ${size}`}>\n        <LineFill style={{width: `${value / max * 100}%`}}/>\n      </Line>\n    </>\n\n\n  const render = () => {\n    switch (type) {\n      case LinearProgressionType.Bars:\n        return renderBars();\n      case LinearProgressionType.Dots:\n        return renderDots();\n      case LinearProgressionType.Line:\n      default:\n        return renderLine();\n    }\n  }\n\n  return (\n    <Wrapper className={`${size} ${type} ${variant}`}>\n      {render()}\n    </Wrapper>\n  )\n};\n\nexport default LinearProgression;\n"],"file":"LinearProgression.cjs"}

package/dist/LinearProgression/LinearProgression.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Size } from '../types';
+export declare const Bar: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Dot: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LineFill: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Line: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare enum LinearProgressionType {
+    Dots = "dots",
+    Line = "line",
+    Bars = "bars"
+}
+export declare enum LinearProgressionVariant {
+    Normal = "normal",
+    Inverted = "inverted"
+}
+export interface LinearProgressionProps {
+    size?: Size.Small | Size.Medium | Size.Large;
+    type?: LinearProgressionType;
+    variant?: LinearProgressionVariant;
+    value: number;
+    max: number;
+}
+declare const LinearProgression: React.FunctionComponent<LinearProgressionProps>;
+export default LinearProgression;

package/dist/LinearProgression/LinearProgression.js

@@ -0,0 +1,102 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+import React from 'react';
+import { Size } from '../types';
+import styled from 'styled-components';
+import { COLORS } from '../styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export var 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"])), COLORS.neutral_100, COLORS.accent1_400, COLORS.accent1_800, COLORS.neutral_600, COLORS.accent1_400, COLORS.white);
+export var 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"])), COLORS.neutral_400, COLORS.accent1_600, COLORS.accent1_800, COLORS.neutral_400, COLORS.accent1_400, COLORS.white);
+export var LineFill = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: 100%;\n  max-width: 100%;\n  position: absolute;\n  z-index: 1;\n"])));
+export var 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"])), COLORS.neutral_500, COLORS.neutral_500, LineFill, LineFill, LineFill, COLORS.neutral_100, LineFill, COLORS.accent1_500, COLORS.neutral_700, COLORS.neutral_400, LineFill, COLORS.accent1_400);
+var Wrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  gap: 4px;\n  height: 16px;\n\n  &.small {\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    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  &.large {\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"])), Bar, Bar, Bar, Bar, Bar, Bar);
+export var LinearProgressionType;
+
+(function (LinearProgressionType) {
+  LinearProgressionType["Dots"] = "dots";
+  LinearProgressionType["Line"] = "line";
+  LinearProgressionType["Bars"] = "bars";
+})(LinearProgressionType || (LinearProgressionType = {}));
+
+export var LinearProgressionVariant;
+
+(function (LinearProgressionVariant) {
+  LinearProgressionVariant["Normal"] = "normal";
+  LinearProgressionVariant["Inverted"] = "inverted";
+})(LinearProgressionVariant || (LinearProgressionVariant = {}));
+
+var LinearProgression = function LinearProgression(_ref) {
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? Size.Medium : _ref$size,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? LinearProgressionType.Line : _ref$type,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? LinearProgressionVariant.Normal : _ref$variant,
+      value = _ref.value,
+      max = _ref.max;
+
+  var renderBars = function renderBars() {
+    return /*#__PURE__*/_jsx(_Fragment, {
+      children: Array.from(Array(max).keys()).map(function (i) {
+        return /*#__PURE__*/_jsx(Bar, {
+          className: "".concat(Math.ceil(value) >= i + 1 ? 'active' : '', " ").concat(Math.ceil(value) === i + 1 ? 'current' : '', " ").concat(variant, " ").concat(size)
+        }, i);
+      })
+    });
+  };
+
+  var renderDots = function renderDots() {
+    return /*#__PURE__*/_jsx(_Fragment, {
+      children: Array.from(Array(max).keys()).map(function (i) {
+        return /*#__PURE__*/_jsx(Dot, {
+          className: "".concat(Math.ceil(value) >= i + 1 ? 'active' : '', " ").concat(Math.ceil(value) === i + 1 ? 'current' : '', " ").concat(variant, " ").concat(size)
+        }, i);
+      })
+    });
+  };
+
+  var renderLine = function renderLine() {
+    return /*#__PURE__*/_jsx(_Fragment, {
+      children: /*#__PURE__*/_jsx(Line, {
+        className: "".concat(variant, " ").concat(size),
+        children: /*#__PURE__*/_jsx(LineFill, {
+          style: {
+            width: "".concat(value / max * 100, "%")
+          }
+        })
+      })
+    });
+  };
+
+  var render = function render() {
+    switch (type) {
+      case LinearProgressionType.Bars:
+        return renderBars();
+
+      case LinearProgressionType.Dots:
+        return renderDots();
+
+      case LinearProgressionType.Line:
+      default:
+        return renderLine();
+    }
+  };
+
+  return /*#__PURE__*/_jsx(Wrapper, {
+    className: "".concat(size, " ").concat(type, " ").concat(variant),
+    children: render()
+  });
+};
+
+LinearProgression.propTypes = {
+  type: _pt.oneOf(["dots", "line", "bars"]),
+  variant: _pt.oneOf(["normal", "inverted"]),
+  value: _pt.number.isRequired,
+  max: _pt.number.isRequired
+};
+export default LinearProgression;
+//# sourceMappingURL=LinearProgression.js.map

package/dist/LinearProgression/LinearProgression.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/LinearProgression/LinearProgression.tsx"],"names":["React","Size","styled","COLORS","Bar","div","neutral_100","accent1_400","accent1_800","neutral_600","white","Dot","neutral_400","accent1_600","LineFill","Line","neutral_500","accent1_500","neutral_700","Wrapper","LinearProgressionType","LinearProgressionVariant","LinearProgression","size","Medium","type","variant","Normal","value","max","renderBars","Array","from","keys","map","i","Math","ceil","renderDots","renderLine","width","render","Bars","Dots"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {COLORS} from '../styles';\n\nexport const Bar = styled.div`\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: ${COLORS.neutral_100};\n\n  &.active {\n    background-color: ${COLORS.accent1_400};\n  }\n\n  &.current {\n    background-color: ${COLORS.accent1_800};\n  }\n\n  &.inverted {\n    background-color: ${COLORS.neutral_600};\n  }\n\n  &.inverted.active {\n    background-color: ${COLORS.accent1_400};\n  }\n\n  &.inverted.current {\n    background-color: ${COLORS.white};\n  }\n\n`;\n\nexport const Dot = styled.div`\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: ${COLORS.neutral_400};\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: ${COLORS.accent1_600};\n  }\n\n  &.current:after {\n    background-color: ${COLORS.accent1_800};\n  }\n\n  &.inverted:after {\n    background-color: ${COLORS.neutral_400};\n  }\n\n  &.inverted.active:after {\n    background-color: ${COLORS.accent1_400};\n  }\n\n  &.inverted.current:after {\n    background-color: ${COLORS.white};\n  }\n`;\n\nexport const LineFill = styled.div`\n  height: 100%;\n  max-width: 100%;\n  position: absolute;\n  z-index: 1;\n`;\n\nexport const Line = styled.div`\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: ${COLORS.neutral_500};\n    position: absolute;\n    right: 0;\n  }\n\n  &:before {\n    content: '';\n    display: block;\n    height: 100%;\n    background-color: ${COLORS.neutral_500};\n    position: absolute;\n    left: 0;\n  }\n\n  &.small {\n    height: 6px;\n    border-radius: 4px;\n\n    ${LineFill} {\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    ${LineFill} {\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    ${LineFill} {\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: ${COLORS.neutral_100};\n\n  ${LineFill} {\n    background-color: ${COLORS.accent1_500};\n  }\n\n  &.inverted {\n    background-color: ${COLORS.neutral_700};\n\n    &:after,\n    &:before {\n      background-color: ${COLORS.neutral_400};\n    }\n\n    ${LineFill} {\n      background-color: ${COLORS.accent1_400};\n    }\n  }\n`;\n\nconst Wrapper = styled.div`\n  width: 100%;\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  gap: 4px;\n  height: 16px;\n\n  &.small {\n    gap: 4px;\n\n    ${Bar}:first-of-type {\n      border-top-left-radius: 6px;\n      border-bottom-left-radius: 6px;\n    }\n\n    ${Bar}:last-of-type {\n      border-top-right-radius: 6px;\n      border-bottom-right-radius: 6px;\n    }\n\n  }\n\n  &.medium {\n    gap: 6px;\n\n    ${Bar}:first-of-type {\n      border-top-left-radius: 8px;\n      border-bottom-left-radius: 8px;\n    }\n\n    ${Bar}:last-of-type {\n      border-top-right-radius: 8px;\n      border-bottom-right-radius: 8px;\n    }\n  }\n\n  &.large {\n    gap: 8px;\n\n    ${Bar}:first-of-type {\n      border-top-left-radius: 12px;\n      border-bottom-left-radius: 12px;\n    }\n\n    ${Bar}:last-of-type {\n      border-top-right-radius: 12px;\n      border-bottom-right-radius: 12px;\n    }\n  }\n`;\n\nexport enum LinearProgressionType {\n  Dots = 'dots',\n  Line = 'line',\n  Bars = 'bars',\n}\n\nexport enum LinearProgressionVariant {\n  Normal = 'normal',\n  Inverted = 'inverted',\n}\n\nexport interface LinearProgressionProps {\n  size?: Size.Small | Size.Medium | Size.Large;\n  type?: LinearProgressionType;\n  variant?: LinearProgressionVariant;\n\n  value: number;\n  max: number;\n}\n\nconst LinearProgression: React.FunctionComponent<LinearProgressionProps> = ({\n                                                                              size = Size.Medium,\n                                                                              type = LinearProgressionType.Line,\n                                                                              variant = LinearProgressionVariant.Normal,\n                                                                              value,\n                                                                              max\n                                                                            }) => {\n\n  const renderBars = () => (\n    <>\n      {Array.from(Array(max).keys()).map(i => (\n        <Bar key={i}\n             className={`${Math.ceil(value) >= i + 1 ? 'active' : ''} ${Math.ceil(value) === i + 1 ? 'current' : ''} ${variant} ${size}`}/>\n      ))}\n    </>\n  )\n\n\n  const renderDots = () =>\n    <>\n      {Array.from(Array(max).keys()).map(i => (\n        <Dot key={i}\n             className={`${Math.ceil(value) >= i + 1 ? 'active' : ''} ${Math.ceil(value) === i + 1 ? 'current' : ''} ${variant} ${size}`}/>\n      ))}\n    </>\n\n  const renderLine = () =>\n    <>\n      <Line className={`${variant} ${size}`}>\n        <LineFill style={{width: `${value / max * 100}%`}}/>\n      </Line>\n    </>\n\n\n  const render = () => {\n    switch (type) {\n      case LinearProgressionType.Bars:\n        return renderBars();\n      case LinearProgressionType.Dots:\n        return renderDots();\n      case LinearProgressionType.Line:\n      default:\n        return renderLine();\n    }\n  }\n\n  return (\n    <Wrapper className={`${size} ${type} ${variant}`}>\n      {render()}\n    </Wrapper>\n  )\n};\n\nexport default LinearProgression;\n"],"file":"LinearProgression.js"}

package/dist/LinearProgression/index.cjs

@@ -0,0 +1,32 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "LinearProgression", {
+  enumerable: true,
+  get: function get() {
+    return _LinearProgression.default;
+  }
+});
+Object.defineProperty(exports, "LinearProgressionType", {
+  enumerable: true,
+  get: function get() {
+    return _LinearProgression.LinearProgressionType;
+  }
+});
+Object.defineProperty(exports, "LinearProgressionVariant", {
+  enumerable: true,
+  get: function get() {
+    return _LinearProgression.LinearProgressionVariant;
+  }
+});
+
+var _LinearProgression = _interopRequireWildcard(require("./LinearProgression"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+//# sourceMappingURL=index.cjs.map

package/dist/LinearProgression/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/LinearProgression/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA","sourcesContent":["import LinearProgression, {LinearProgressionType, LinearProgressionVariant} from './LinearProgression';\n\nexport {LinearProgressionType, LinearProgressionVariant};\nexport {LinearProgression}\n"],"file":"index.cjs"}

package/dist/LinearProgression/index.d.ts

@@ -0,0 +1,3 @@
+import LinearProgression, { LinearProgressionType, LinearProgressionVariant } from './LinearProgression';
+export { LinearProgressionType, LinearProgressionVariant };
+export { LinearProgression };

package/dist/LinearProgression/index.js

@@ -0,0 +1,4 @@
+import LinearProgression, { LinearProgressionType, LinearProgressionVariant } from './LinearProgression';
+export { LinearProgressionType, LinearProgressionVariant };
+export { LinearProgression };
+//# sourceMappingURL=index.js.map

package/dist/LinearProgression/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/LinearProgression/index.ts"],"names":["LinearProgression","LinearProgressionType","LinearProgressionVariant"],"mappings":"AAAA,OAAOA,iBAAP,IAA2BC,qBAA3B,EAAkDC,wBAAlD,QAAiF,qBAAjF;AAEA,SAAQD,qBAAR,EAA+BC,wBAA/B;AACA,SAAQF,iBAAR","sourcesContent":["import LinearProgression, {LinearProgressionType, LinearProgressionVariant} from './LinearProgression';\n\nexport {LinearProgressionType, LinearProgressionVariant};\nexport {LinearProgression}\n"],"file":"index.js"}

package/dist/index.cjs

@@ -420,15 +420,15 @@ Object.keys(_QuizButton).forEach(function (key) {
   });
 });
 
-var _SegmentControl = require("./SegmentControl");
+var _LinearProgression = require("./LinearProgression");
 
-Object.keys(_SegmentControl).forEach(function (key) {
+Object.keys(_LinearProgression).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _SegmentControl[key]) return;
+  if (key in exports && exports[key] === _LinearProgression[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _SegmentControl[key];
+      return _LinearProgression[key];
     }
   });
 });

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\nexport * from './AuthPage';\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot';\nexport * from './Accordion';\nexport * from './Tooltips';\nexport * from './common';\nexport * from './QuizButton';\nexport * from './SegmentControl';\n"],"file":"index.cjs"}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\nexport * from './AuthPage';\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot';\nexport * from './Accordion';\nexport * from './Tooltips';\nexport * from './common';\nexport * from './QuizButton';\nexport * from './LinearProgression';\n"],"file":"index.cjs"}

package/dist/index.d.ts

@@ -30,4 +30,4 @@ export * from './Accordion';
 export * from './Tooltips';
 export * from './common';
 export * from './QuizButton';
-export * from './SegmentControl';
+export * from './LinearProgression';

package/dist/index.js

@@ -30,5 +30,5 @@ export * from './Accordion';
 export * from './Tooltips';
 export * from './common';
 export * from './QuizButton';
-export * from './SegmentControl';
+export * from './LinearProgression';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAd;AACA,cAAc,SAAd;AACA,cAAc,SAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,SAAd;AACA,cAAc,iBAAd;AACA,cAAc,UAAd;AACA,cAAc,oBAAd;AACA,cAAc,mBAAd;AACA,cAAc,WAAd;AACA,cAAc,WAAd;AACA,cAAc,uBAAd;AACA,cAAc,QAAd;AACA,cAAc,WAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,YAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,QAAd;AACA,cAAc,UAAd;AACA,cAAc,aAAd;AACA,cAAc,SAAd;AACA,cAAc,WAAd;AACA,cAAc,aAAd;AACA,cAAc,mBAAd;AACA,cAAc,aAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,kBAAd","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\nexport * from './AuthPage';\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot';\nexport * from './Accordion';\nexport * from './Tooltips';\nexport * from './common';\nexport * from './QuizButton';\nexport * from './SegmentControl';\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAd;AACA,cAAc,SAAd;AACA,cAAc,SAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,SAAd;AACA,cAAc,iBAAd;AACA,cAAc,UAAd;AACA,cAAc,oBAAd;AACA,cAAc,mBAAd;AACA,cAAc,WAAd;AACA,cAAc,WAAd;AACA,cAAc,uBAAd;AACA,cAAc,QAAd;AACA,cAAc,WAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,YAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,QAAd;AACA,cAAc,UAAd;AACA,cAAc,aAAd;AACA,cAAc,SAAd;AACA,cAAc,WAAd;AACA,cAAc,aAAd;AACA,cAAc,mBAAd;AACA,cAAc,aAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,qBAAd","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\nexport * from './AuthPage';\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot';\nexport * from './Accordion';\nexport * from './Tooltips';\nexport * from './common';\nexport * from './QuizButton';\nexport * from './LinearProgression';\n"],"file":"index.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laerdal/life-react-components",
-  "version": "1.5.1-dev.10",
+  "version": "1.5.1-dev.11",
   "private": false,
   "author": "Thomas Kalve <thomas.kalve@laerdal.com>",
   "contributors": [

package/dist/SegmentControl/SegmentControl.cjs

@@ -1,99 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.SegmentControlWrapper = exports.SegmentControlItemWrapper = exports.SegmentControlItemContent = exports.SegmentControlItemBackground = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _types = require("../types");
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _styles = require("../styles");
-
-var _common = require("../common");
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-
-var SegmentControlItemContent = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  border-radius: 8px;\n  padding: 0 16px;\n\n  background-color: transparent;\n  color: ", ";\n"])), _styles.COLORS.neutral_600);
-
-exports.SegmentControlItemContent = SegmentControlItemContent;
-
-var SegmentControlItemBackground = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  background-color: ", ";\n  padding: 4px 0px;\n"])), _styles.COLORS.neutral_20);
-
-exports.SegmentControlItemBackground = SegmentControlItemBackground;
-
-var SegmentControlItemWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  cursor: pointer;\n  min-height: 48px;\n\n  &:focus {\n    z-index: ", ";\n    outline: none;\n\n    ", " {\n      background-color: ", ";\n      color: ", ";\n      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n    }\n  }\n\n  &:hover {\n    z-index: ", ";\n\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &:active {\n    z-index: ", ";\n\n    ", " {\n      background-color: ", ";\n      color: ", ";\n      box-shadow: none;\n    }\n  }\n\n  &.disabled {\n    pointer-events: none;\n    cursor: not-allowed;\n\n    ", " {\n      background-color: transparent;\n      color: ", ";\n    }\n  }\n\n  &.selected {\n    cursor: default;\n    pointer-events: none;\n\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.selected.disabled {\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), _styles.Z_INDEXES.focus, SegmentControlItemContent, _styles.COLORS.primary_100, _styles.COLORS.primary_700, _styles.Z_INDEXES.hover, SegmentControlItemContent, _styles.COLORS.primary_100, _styles.COLORS.primary_700, _styles.Z_INDEXES.active, SegmentControlItemContent, _styles.COLORS.primary_200, _styles.COLORS.primary_800, SegmentControlItemContent, _styles.COLORS.neutral_300, SegmentControlItemContent, _styles.COLORS.primary_500, _styles.COLORS.white, SegmentControlItemContent, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300);
-
-exports.SegmentControlItemWrapper = SegmentControlItemWrapper;
-
-var SegmentControlWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  ", ":first-of-type {\n    ", " {\n      border-bottom-left-radius: 12px;\n      border-top-left-radius: 12px;\n      padding-left: 4px;\n    }\n  }\n\n  ", ":last-of-type {\n    ", " {\n      border-bottom-right-radius: 12px;\n      border-top-right-radius: 12px;\n      padding-right: 4px;\n    }\n  }\n\n\n  &.small {\n    ", " {\n      ", "\n      min-height: 32px;\n    }\n  }\n\n  &.medium {\n    ", " {\n      ", "\n      min-height: 40px;\n    }\n  }\n"])), SegmentControlItemWrapper, SegmentControlItemBackground, SegmentControlItemWrapper, SegmentControlItemBackground, SegmentControlItemContent, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, null), SegmentControlItemContent, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, null));
-
-exports.SegmentControlWrapper = SegmentControlWrapper;
-
-var SegmentControl = function SegmentControl(_ref) {
-  var items = _ref.items,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? _types.Size.Medium : _ref$size,
-      onChange = _ref.onChange,
-      selected = _ref.selected;
-
-  var onKeyPress = function onKeyPress(e, item) {
-    if (e.key === 'Enter' || e.key === ' ') {
-      var _document, _document$activeEleme;
-
-      //@ts-ignore
-      (_document = document) === null || _document === void 0 ? void 0 : (_document$activeEleme = _document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.blur();
-      !item.disabled && onChange(item.key);
-    }
-  };
-
-  var onClick = function onClick(e, item) {
-    !item.disabled && onChange(item.key);
-  };
-
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(SegmentControlWrapper, {
-    className: size,
-    children: items.map(function (a, i) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(SegmentControlItemWrapper, {
-        className: (a.disabled ? 'disabled' : '') + (a.key === selected ? ' selected' : ''),
-        tabIndex: a.disabled || a.key === selected ? -1 : 0,
-        onClick: a.disabled ? undefined : function (e) {
-          return onClick(e, a);
-        },
-        onMouseDown: _common.defaultOnMouseDownHandler,
-        onKeyPress: a.disabled ? undefined : function (e) {
-          return onKeyPress(e, a);
-        },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SegmentControlItemBackground, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SegmentControlItemContent, {
-            children: a.content
-          })
-        })
-      }, a.key || i);
-    })
-  });
-};
-
-SegmentControl.propTypes = {
-  items: _propTypes.default.arrayOf(_propTypes.default.shape({
-    key: _propTypes.default.string.isRequired,
-    disabled: _propTypes.default.bool,
-    content: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.string]).isRequired
-  })).isRequired,
-  selected: _propTypes.default.string.isRequired,
-  onChange: _propTypes.default.func.isRequired
-};
-var _default = SegmentControl;
-exports.default = _default;
-//# sourceMappingURL=SegmentControl.cjs.map

package/dist/SegmentControl/SegmentControl.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/SegmentControl/SegmentControl.tsx"],"names":["SegmentControlItemContent","styled","div","COLORS","neutral_600","SegmentControlItemBackground","neutral_20","SegmentControlItemWrapper","Z_INDEXES","focus","primary_100","primary_700","hover","active","primary_200","primary_800","neutral_300","primary_500","white","neutral_100","SegmentControlWrapper","ComponentTextStyle","Bold","SegmentControl","items","size","Size","Medium","onChange","selected","onKeyPress","e","item","key","document","activeElement","blur","disabled","onClick","map","a","i","undefined","defaultOnMouseDownHandler","content"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, Z_INDEXES} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\n\nexport const SegmentControlItemContent = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  border-radius: 8px;\n  padding: 0 16px;\n\n  background-color: transparent;\n  color: ${COLORS.neutral_600};\n`\n\nexport const SegmentControlItemBackground = styled.div`\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  background-color: ${COLORS.neutral_20};\n  padding: 4px 0px;\n`;\n\nexport const SegmentControlItemWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  cursor: pointer;\n  min-height: 48px;\n\n  &:focus {\n    z-index: ${Z_INDEXES.focus};\n    outline: none;\n\n    ${SegmentControlItemContent} {\n      background-color: ${COLORS.primary_100};\n      color: ${COLORS.primary_700};\n      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n    }\n  }\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n\n    ${SegmentControlItemContent} {\n      background-color: ${COLORS.primary_100};\n      color: ${COLORS.primary_700};\n    }\n  }\n\n  &:active {\n    z-index: ${Z_INDEXES.active};\n\n    ${SegmentControlItemContent} {\n      background-color: ${COLORS.primary_200};\n      color: ${COLORS.primary_800};\n      box-shadow: none;\n    }\n  }\n\n  &.disabled {\n    pointer-events: none;\n    cursor: not-allowed;\n\n    ${SegmentControlItemContent} {\n      background-color: transparent;\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &.selected {\n    cursor: default;\n    pointer-events: none;\n\n    ${SegmentControlItemContent} {\n      background-color: ${COLORS.primary_500};\n      color: ${COLORS.white};\n    }\n  }\n\n  &.selected.disabled {\n    ${SegmentControlItemContent} {\n      background-color: ${COLORS.neutral_100};\n      color: ${COLORS.neutral_300};\n    }\n  }\n`;\n\nexport const SegmentControlWrapper = styled.div`\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  ${SegmentControlItemWrapper}:first-of-type {\n    ${SegmentControlItemBackground} {\n      border-bottom-left-radius: 12px;\n      border-top-left-radius: 12px;\n      padding-left: 4px;\n    }\n  }\n\n  ${SegmentControlItemWrapper}:last-of-type {\n    ${SegmentControlItemBackground} {\n      border-bottom-right-radius: 12px;\n      border-top-right-radius: 12px;\n      padding-right: 4px;\n    }\n  }\n\n\n  &.small {\n    ${SegmentControlItemContent} {\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n      min-height: 32px;\n    }\n  }\n\n  &.medium {\n    ${SegmentControlItemContent} {\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n      min-height: 40px;\n    }\n  }\n`;\n\n\nexport interface SegmentControlItem {\n  key: string\n  disabled?: boolean;\n  content: React.ReactNode | string;\n}\n\ninterface SegmentControlProps {\n  items: SegmentControlItem[];\n  selected: string;\n  onChange: (value: string) => void;\n  size?: Size.Small | Size.Medium;\n}\n\nconst SegmentControl: React.FunctionComponent<SegmentControlProps> = ({\n                                                                        items,\n                                                                        size = Size.Medium,\n                                                                        onChange,\n                                                                        selected\n                                                                      }) => {\n  const onKeyPress = (e: React.KeyboardEvent<HTMLDivElement>, item: SegmentControlItem) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      //@ts-ignore\n      document?.activeElement?.blur();\n      !item.disabled && onChange(item.key);\n    }\n  };\n\n  const onClick = (e: React.MouseEvent, item: SegmentControlItem) => {\n    !item.disabled && onChange(item.key);\n  }\n\n  return (\n    <SegmentControlWrapper className={size}>\n      {items.map((a, i) =>\n        <SegmentControlItemWrapper key={a.key || i}\n                                   className={(a.disabled ? 'disabled' : '') + (a.key === selected ? ' selected' : '')}\n                                   tabIndex={a.disabled || a.key === selected ? -1 : 0}\n                                   onClick={a.disabled ? undefined : (e) => onClick(e, a)}\n                                   onMouseDown={defaultOnMouseDownHandler}\n                                   onKeyPress={a.disabled ? undefined : (e) => onKeyPress(e, a)}>\n          <SegmentControlItemBackground>\n            <SegmentControlItemContent>\n              {a.content}\n            </SegmentControlItemContent>\n          </SegmentControlItemBackground>\n        </SegmentControlItemWrapper>)\n      }\n    </SegmentControlWrapper>\n  );\n};\n\nexport default SegmentControl;\n"],"file":"SegmentControl.cjs"}

package/dist/SegmentControl/SegmentControl.d.ts

@@ -1,19 +0,0 @@
-import React from 'react';
-import { Size } from '../types';
-export declare const SegmentControlItemContent: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SegmentControlItemBackground: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SegmentControlItemWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SegmentControlWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export interface SegmentControlItem {
-    key: string;
-    disabled?: boolean;
-    content: React.ReactNode | string;
-}
-interface SegmentControlProps {
-    items: SegmentControlItem[];
-    selected: string;
-    onChange: (value: string) => void;
-    size?: Size.Small | Size.Medium;
-}
-declare const SegmentControl: React.FunctionComponent<SegmentControlProps>;
-export default SegmentControl;

package/dist/SegmentControl/SegmentControl.js

@@ -1,71 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-import _pt from "prop-types";
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-
-import React from 'react';
-import { Size } from '../types';
-import styled from 'styled-components';
-import { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, Z_INDEXES } from '../styles';
-import { defaultOnMouseDownHandler } from '../common';
-import { jsx as _jsx } from "react/jsx-runtime";
-export var SegmentControlItemContent = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  border-radius: 8px;\n  padding: 0 16px;\n\n  background-color: transparent;\n  color: ", ";\n"])), COLORS.neutral_600);
-export var SegmentControlItemBackground = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  background-color: ", ";\n  padding: 4px 0px;\n"])), COLORS.neutral_20);
-export var SegmentControlItemWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  cursor: pointer;\n  min-height: 48px;\n\n  &:focus {\n    z-index: ", ";\n    outline: none;\n\n    ", " {\n      background-color: ", ";\n      color: ", ";\n      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n    }\n  }\n\n  &:hover {\n    z-index: ", ";\n\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &:active {\n    z-index: ", ";\n\n    ", " {\n      background-color: ", ";\n      color: ", ";\n      box-shadow: none;\n    }\n  }\n\n  &.disabled {\n    pointer-events: none;\n    cursor: not-allowed;\n\n    ", " {\n      background-color: transparent;\n      color: ", ";\n    }\n  }\n\n  &.selected {\n    cursor: default;\n    pointer-events: none;\n\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.selected.disabled {\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), Z_INDEXES.focus, SegmentControlItemContent, COLORS.primary_100, COLORS.primary_700, Z_INDEXES.hover, SegmentControlItemContent, COLORS.primary_100, COLORS.primary_700, Z_INDEXES.active, SegmentControlItemContent, COLORS.primary_200, COLORS.primary_800, SegmentControlItemContent, COLORS.neutral_300, SegmentControlItemContent, COLORS.primary_500, COLORS.white, SegmentControlItemContent, COLORS.neutral_100, COLORS.neutral_300);
-export var SegmentControlWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  ", ":first-of-type {\n    ", " {\n      border-bottom-left-radius: 12px;\n      border-top-left-radius: 12px;\n      padding-left: 4px;\n    }\n  }\n\n  ", ":last-of-type {\n    ", " {\n      border-bottom-right-radius: 12px;\n      border-top-right-radius: 12px;\n      padding-right: 4px;\n    }\n  }\n\n\n  &.small {\n    ", " {\n      ", "\n      min-height: 32px;\n    }\n  }\n\n  &.medium {\n    ", " {\n      ", "\n      min-height: 40px;\n    }\n  }\n"])), SegmentControlItemWrapper, SegmentControlItemBackground, SegmentControlItemWrapper, SegmentControlItemBackground, SegmentControlItemContent, ComponentSStyling(ComponentTextStyle.Bold, null), SegmentControlItemContent, ComponentMStyling(ComponentTextStyle.Bold, null));
-
-var SegmentControl = function SegmentControl(_ref) {
-  var items = _ref.items,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? Size.Medium : _ref$size,
-      onChange = _ref.onChange,
-      selected = _ref.selected;
-
-  var onKeyPress = function onKeyPress(e, item) {
-    if (e.key === 'Enter' || e.key === ' ') {
-      var _document, _document$activeEleme;
-
-      //@ts-ignore
-      (_document = document) === null || _document === void 0 ? void 0 : (_document$activeEleme = _document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.blur();
-      !item.disabled && onChange(item.key);
-    }
-  };
-
-  var onClick = function onClick(e, item) {
-    !item.disabled && onChange(item.key);
-  };
-
-  return /*#__PURE__*/_jsx(SegmentControlWrapper, {
-    className: size,
-    children: items.map(function (a, i) {
-      return /*#__PURE__*/_jsx(SegmentControlItemWrapper, {
-        className: (a.disabled ? 'disabled' : '') + (a.key === selected ? ' selected' : ''),
-        tabIndex: a.disabled || a.key === selected ? -1 : 0,
-        onClick: a.disabled ? undefined : function (e) {
-          return onClick(e, a);
-        },
-        onMouseDown: defaultOnMouseDownHandler,
-        onKeyPress: a.disabled ? undefined : function (e) {
-          return onKeyPress(e, a);
-        },
-        children: /*#__PURE__*/_jsx(SegmentControlItemBackground, {
-          children: /*#__PURE__*/_jsx(SegmentControlItemContent, {
-            children: a.content
-          })
-        })
-      }, a.key || i);
-    })
-  });
-};
-
-SegmentControl.propTypes = {
-  items: _pt.arrayOf(_pt.shape({
-    key: _pt.string.isRequired,
-    disabled: _pt.bool,
-    content: _pt.oneOfType([_pt.node, _pt.string]).isRequired
-  })).isRequired,
-  selected: _pt.string.isRequired,
-  onChange: _pt.func.isRequired
-};
-export default SegmentControl;
-//# sourceMappingURL=SegmentControl.js.map

package/dist/SegmentControl/SegmentControl.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/SegmentControl/SegmentControl.tsx"],"names":["React","Size","styled","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","Z_INDEXES","defaultOnMouseDownHandler","SegmentControlItemContent","div","neutral_600","SegmentControlItemBackground","neutral_20","SegmentControlItemWrapper","focus","primary_100","primary_700","hover","active","primary_200","primary_800","neutral_300","primary_500","white","neutral_100","SegmentControlWrapper","Bold","SegmentControl","items","size","Medium","onChange","selected","onKeyPress","e","item","key","document","activeElement","blur","disabled","onClick","map","a","i","undefined","content"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, Z_INDEXES} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\n\nexport const SegmentControlItemContent = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  border-radius: 8px;\n  padding: 0 16px;\n\n  background-color: transparent;\n  color: ${COLORS.neutral_600};\n`\n\nexport const SegmentControlItemBackground = styled.div`\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  background-color: ${COLORS.neutral_20};\n  padding: 4px 0px;\n`;\n\nexport const SegmentControlItemWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  cursor: pointer;\n  min-height: 48px;\n\n  &:focus {\n    z-index: ${Z_INDEXES.focus};\n    outline: none;\n\n    ${SegmentControlItemContent} {\n      background-color: ${COLORS.primary_100};\n      color: ${COLORS.primary_700};\n      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n    }\n  }\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n\n    ${SegmentControlItemContent} {\n      background-color: ${COLORS.primary_100};\n      color: ${COLORS.primary_700};\n    }\n  }\n\n  &:active {\n    z-index: ${Z_INDEXES.active};\n\n    ${SegmentControlItemContent} {\n      background-color: ${COLORS.primary_200};\n      color: ${COLORS.primary_800};\n      box-shadow: none;\n    }\n  }\n\n  &.disabled {\n    pointer-events: none;\n    cursor: not-allowed;\n\n    ${SegmentControlItemContent} {\n      background-color: transparent;\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &.selected {\n    cursor: default;\n    pointer-events: none;\n\n    ${SegmentControlItemContent} {\n      background-color: ${COLORS.primary_500};\n      color: ${COLORS.white};\n    }\n  }\n\n  &.selected.disabled {\n    ${SegmentControlItemContent} {\n      background-color: ${COLORS.neutral_100};\n      color: ${COLORS.neutral_300};\n    }\n  }\n`;\n\nexport const SegmentControlWrapper = styled.div`\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  ${SegmentControlItemWrapper}:first-of-type {\n    ${SegmentControlItemBackground} {\n      border-bottom-left-radius: 12px;\n      border-top-left-radius: 12px;\n      padding-left: 4px;\n    }\n  }\n\n  ${SegmentControlItemWrapper}:last-of-type {\n    ${SegmentControlItemBackground} {\n      border-bottom-right-radius: 12px;\n      border-top-right-radius: 12px;\n      padding-right: 4px;\n    }\n  }\n\n\n  &.small {\n    ${SegmentControlItemContent} {\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n      min-height: 32px;\n    }\n  }\n\n  &.medium {\n    ${SegmentControlItemContent} {\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n      min-height: 40px;\n    }\n  }\n`;\n\n\nexport interface SegmentControlItem {\n  key: string\n  disabled?: boolean;\n  content: React.ReactNode | string;\n}\n\ninterface SegmentControlProps {\n  items: SegmentControlItem[];\n  selected: string;\n  onChange: (value: string) => void;\n  size?: Size.Small | Size.Medium;\n}\n\nconst SegmentControl: React.FunctionComponent<SegmentControlProps> = ({\n                                                                        items,\n                                                                        size = Size.Medium,\n                                                                        onChange,\n                                                                        selected\n                                                                      }) => {\n  const onKeyPress = (e: React.KeyboardEvent<HTMLDivElement>, item: SegmentControlItem) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      //@ts-ignore\n      document?.activeElement?.blur();\n      !item.disabled && onChange(item.key);\n    }\n  };\n\n  const onClick = (e: React.MouseEvent, item: SegmentControlItem) => {\n    !item.disabled && onChange(item.key);\n  }\n\n  return (\n    <SegmentControlWrapper className={size}>\n      {items.map((a, i) =>\n        <SegmentControlItemWrapper key={a.key || i}\n                                   className={(a.disabled ? 'disabled' : '') + (a.key === selected ? ' selected' : '')}\n                                   tabIndex={a.disabled || a.key === selected ? -1 : 0}\n                                   onClick={a.disabled ? undefined : (e) => onClick(e, a)}\n                                   onMouseDown={defaultOnMouseDownHandler}\n                                   onKeyPress={a.disabled ? undefined : (e) => onKeyPress(e, a)}>\n          <SegmentControlItemBackground>\n            <SegmentControlItemContent>\n              {a.content}\n            </SegmentControlItemContent>\n          </SegmentControlItemBackground>\n        </SegmentControlItemWrapper>)\n      }\n    </SegmentControlWrapper>\n  );\n};\n\nexport default SegmentControl;\n"],"file":"SegmentControl.js"}

package/dist/SegmentControl/index.cjs

@@ -1,16 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "SegmentControl", {
-  enumerable: true,
-  get: function get() {
-    return _SegmentControl.default;
-  }
-});
-
-var _SegmentControl = _interopRequireDefault(require("./SegmentControl"));
-//# sourceMappingURL=index.cjs.map

package/dist/SegmentControl/index.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/SegmentControl/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["import {SegmentControlItem, default as SegmentControl} from './SegmentControl'\n\nexport type {SegmentControlItem}\nexport {SegmentControl}\n"],"file":"index.cjs"}

package/dist/SegmentControl/index.d.ts

@@ -1,3 +0,0 @@
-import { SegmentControlItem, default as SegmentControl } from './SegmentControl';
-export type { SegmentControlItem };
-export { SegmentControl };

package/dist/SegmentControl/index.js

@@ -1,3 +0,0 @@
-import { default as SegmentControl } from './SegmentControl';
-export { SegmentControl };
-//# sourceMappingURL=index.js.map

package/dist/SegmentControl/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/SegmentControl/index.ts"],"names":["default","SegmentControl"],"mappings":"AAAA,SAA4BA,OAAO,IAAIC,cAAvC,QAA4D,kBAA5D;AAGA,SAAQA,cAAR","sourcesContent":["import {SegmentControlItem, default as SegmentControl} from './SegmentControl'\n\nexport type {SegmentControlItem}\nexport {SegmentControl}\n"],"file":"index.js"}