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

package/dist/InputFields/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/RadioButton.tsx"],"names":["React","styled","RadioButtonOff","RadioButtonOn","COLORS","ComponentTextStyle","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","StyledRadioButton","div","props","margin","black","selected","primary_500","showWarning","warning_400","neutral_600","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","RadioButton","forwardRef","ref","id","label","additionalLabel","select","disabled","iconPointerEventsTransparent","size","tabIndexVal","onKeyPress","e","keyCode","Medium","preventDefault","toString","toLowerCase","concat","undefined"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, {css} from 'styled-components';\nimport {RadioButtonOff, RadioButtonOn} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport { Size } from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles/typography';\n\nconst StyledRadioButton = styled.div<{ margin?: string, disabled?: boolean, showWarning?: boolean, selected?: boolean }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n \n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .radio-button-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .radio-button-label {\n    user-select: none;\n    display: flex;\n    flex-direction: column;\n\n    label{\n      cursor: inherit;\n    }\n\n    span {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    outline: none;\n\n    .radio-button-icon {\n      background-color: ${COLORS.white};\n      box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ${COLORS.neutral_600};\n      }\n    }\n  }\n\n  &:not(.disabled):hover {\n    .radio-button-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .radio-button-icon {\n      background: ${COLORS.primary_100};\n      box-shadow: none;\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.disabled {\n    box-shadow: none;\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .radio-button-icon,\n    .radio-button-label {\n      pointer-events: none;\n    }\n\n    .radio-button-icon{\n      background-color: ${COLORS.white};\n    }\n    \n    .radio-button-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n`;\n\ninterface Props {\n  id: string;\n  selected: boolean;\n  select: (selected: boolean) => void;\n  label?: string;\n  additionalLabel?: string;\n  showWarning?: boolean;\n  disabled?: boolean;\n  iconPointerEventsTransparent?: boolean;\n  margin?: string;\n  size?: Size;\n  tabIndexVal?: number;\n}\n\nconst RadioButton = React.forwardRef<HTMLDivElement, Props>(({\n  id,\n  selected,\n  label,\n  additionalLabel,\n  showWarning,\n  select,\n  disabled,\n  margin,\n  iconPointerEventsTransparent,\n  size,\n  tabIndexVal\n}: Props, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled) {\n      select(!selected);\n    }\n  };\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledRadioButton key={id} margin={margin}\n                       ref={ref}\n                       onClick={() => !disabled && select(!selected)}\n                       onMouseDown={e => e.preventDefault()}\n                       onKeyDown={onKeyPress}\n                       disabled={disabled}\n                       className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '')}\n                       tabIndex={disabled ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n                       showWarning={showWarning}\n                       selected={selected}>\n      <div className={'radio-button-icon'} id={id}>\n        { selected && <RadioButtonOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>}\n        { !selected && <RadioButtonOff className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>}\n      </div>\n      <div className={'radio-button-label'}>\n        {label && <label htmlFor={id}>{label}</label>}\n        {additionalLabel !== undefined && <span>{additionalLabel}</span>}\n      </div>\n    </StyledRadioButton>\n  );\n});\n\nexport default RadioButton;\n"],"file":"RadioButton.js"}
+{"version":3,"sources":["../../src/InputFields/RadioButton.tsx"],"names":["React","styled","RadioButtonOff","RadioButtonOn","COLORS","ComponentTextStyle","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","defaultOnMouseDownHandler","StyledRadioButton","div","props","margin","black","selected","primary_500","showWarning","warning_400","neutral_600","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","RadioButton","forwardRef","ref","id","label","additionalLabel","select","disabled","iconPointerEventsTransparent","size","tabIndexVal","onKeyPress","e","keyCode","Medium","toString","toLowerCase","concat","undefined"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, {css} from 'styled-components';\nimport {RadioButtonOff, RadioButtonOn} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport { Size } from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles/typography';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst StyledRadioButton = styled.div<{ margin?: string, disabled?: boolean, showWarning?: boolean, selected?: boolean }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n \n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .radio-button-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .radio-button-label {\n    user-select: none;\n    display: flex;\n    flex-direction: column;\n\n    label{\n      cursor: inherit;\n    }\n\n    span {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    outline: none;\n\n    .radio-button-icon {\n      background-color: ${COLORS.white};\n      box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ${COLORS.neutral_600};\n      }\n    }\n  }\n\n  &:not(.disabled):hover {\n    .radio-button-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .radio-button-icon {\n      background: ${COLORS.primary_100};\n      box-shadow: none;\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.disabled {\n    box-shadow: none;\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .radio-button-icon,\n    .radio-button-label {\n      pointer-events: none;\n    }\n\n    .radio-button-icon{\n      background-color: ${COLORS.white};\n    }\n    \n    .radio-button-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n`;\n\ninterface Props {\n  id: string;\n  selected: boolean;\n  select: (selected: boolean) => void;\n  label?: string;\n  additionalLabel?: string;\n  showWarning?: boolean;\n  disabled?: boolean;\n  iconPointerEventsTransparent?: boolean;\n  margin?: string;\n  size?: Size;\n  tabIndexVal?: number;\n}\n\nconst RadioButton = React.forwardRef<HTMLDivElement, Props>(({\n  id,\n  selected,\n  label,\n  additionalLabel,\n  showWarning,\n  select,\n  disabled,\n  margin,\n  iconPointerEventsTransparent,\n  size,\n  tabIndexVal\n}: Props, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled) {\n      select(!selected);\n    }\n  };\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledRadioButton key={id} margin={margin}\n                       ref={ref}\n                       onClick={() => !disabled && select(!selected)}\n                       onMouseDown={defaultOnMouseDownHandler}\n                       onKeyDown={onKeyPress}\n                       disabled={disabled}\n                       className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '')}\n                       tabIndex={disabled ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n                       showWarning={showWarning}\n                       selected={selected}>\n      <div className={'radio-button-icon'} id={id}>\n        { selected && <RadioButtonOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>}\n        { !selected && <RadioButtonOff className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>}\n      </div>\n      <div className={'radio-button-label'}>\n        {label && <label htmlFor={id}>{label}</label>}\n        {additionalLabel !== undefined && <span>{additionalLabel}</span>}\n      </div>\n    </StyledRadioButton>\n  );\n});\n\nexport default RadioButton;\n"],"file":"RadioButton.js"}

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/MenuItem/MenuItem.cjs

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.ItemLabel = exports.ItemIconOld = exports.ItemIcon = exports.ItemContent = exports.DropdownButtonCSS = exports.DropdownButton = void 0;
+exports.default = exports.LockedIconContainer = exports.ItemLabel = exports.ItemIcon = exports.ItemContent = exports.DropdownButtonCSS = exports.DropdownButton = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -19,6 +19,8 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _styles = require("../styles");
 
+var _SystemIcons = require("../icons/systemicons/SystemIcons");
+
 var _types = require("../types");
 
 var _typography = require("../styles/typography");
@@ -47,16 +49,16 @@ var ItemIcon = _styledComponents.default.div(_templateObject3 || (_templateObjec
 
 exports.ItemIcon = ItemIcon;
 
-var ItemIconOld = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)([""])));
+var LockedIconContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\n"])));
 
-exports.ItemIconOld = ItemIconOld;
+exports.LockedIconContainer = LockedIconContainer;
 
-var ItemContent = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    margin: auto 0 auto 16px;\n    display: flex;\n    align-items: center;\n\n    ", " {\n      flex: 1 0 calc(100% - 40px);    \n    }\n\n    ", " {\n      margin-right: 6px;\n      svg {\n        display: block;\n        margin: auto;\n      }\n    }\n    ", " {\n      flex: 1 0 40px;\n      display: flex;\n      justify-content: flex-end;\n    }\n"])), ItemLabel, ItemIcon, ItemIconOld);
+var ItemContent = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    margin: auto 0 auto 16px;\n    display: flex;\n    align-items: center;\n    flex-grow: 2;\n\n    ", " {\n      flex: 1 0 calc(100% - 40px);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n    }\n\n    ", " {\n      margin-right: 6px;\n      svg {\n        display: block;\n        margin: auto;\n      }\n    }\n\n    ", " {\n      flex-grow: 2;\n\n      .extraMargin {\n        margin-left: calc(100% - 24px);\n      }\n    }\n"])), ItemLabel, ItemIcon, LockedIconContainer);
 
 exports.ItemContent = ItemContent;
 
 var DropdownButtonCSS = function DropdownButtonCSS(size) {
-  return (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    ", "\n    ", "\n\n    position: relative;\n    text-decoration: none;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    min-height: ", ";\n    background-color: ", ";\n    border: none;\n    cursor: pointer;\n    background: transparent;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ", ";\n\n    &.active {\n      background: ", ";\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 0;\n        bottom: 0;\n        left: 2px;\n        background-color: ", ";\n\n        border-radius: 2px;\n      }\n    }\n\n    &:disabled {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ", ";\n    }\n\n    &.active:hover {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.active:active {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n  "])), size == _types.Size.Small && (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Medium && (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Large && (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Large ? '64px' : size == _types.Size.Medium ? '56px' : '48px', _styles.COLORS.white, _common.CommonInteractionStyling, _styles.COLORS.neutral_20, _styles.COLORS.primary_500, _styles.COLORS.neutral_200, _styles.COLORS.primary_20, _styles.COLORS.primary_600, _styles.COLORS.primary_500, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.primary_500);
+  return (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    ", "\n    ", "\n\n    position: relative;\n    text-decoration: none;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    min-height: ", ";\n    background-color: ", ";\n    border: none;\n    cursor: pointer;\n    background: transparent;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ", ";\n\n    &.active {\n      background: ", ";\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 6px;\n        bottom: 6px;\n        left: 4px;\n        background-color: ", ";\n\n        border-radius: 4px;\n      }\n    }\n\n    &:disabled, &.disabled-state {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ", ";\n    }\n\n    &.locked {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ", ";\n    }\n\n    &.active:hover, &.active-hover-state {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.active:active, &.active-active-state {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n  "])), size == _types.Size.Small && (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Medium && (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Large && (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Large ? '64px' : size == _types.Size.Medium ? '56px' : '48px', _styles.COLORS.white, _common.CommonInteractionStyling, _styles.COLORS.neutral_20, _styles.COLORS.primary_500, _styles.COLORS.neutral_200, _styles.COLORS.neutral_500, _styles.COLORS.primary_20, _styles.COLORS.primary_600, _styles.COLORS.primary_500, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.primary_500);
 };
 
 exports.DropdownButtonCSS = DropdownButtonCSS;
@@ -68,14 +70,15 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       onClickHandler = _ref.onClickHandler,
       key = _ref.key,
       size = _ref.size,
+      className = _ref.className,
       id = _ref.id;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(DropdownButton, {
     type: "button",
     size: size,
-    disabled: item.disabled,
+    disabled: item.disabled || item.locked,
     ref: ref,
     onClick: onClickHandler,
-    className: (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (active ? 'active' : ''),
+    className: className + ' ' + (item.locked ? 'locked' : '') + ' ' + (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (active ? 'active' : ''),
     id: id,
     children: [item.showDividerAbove && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "divider"
@@ -83,11 +86,22 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       children: [item.icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemIcon, {
         children: item.icon
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ItemLabel, {
-        children: [(_item$displayLabel = item.displayLabel) !== null && _item$displayLabel !== void 0 ? _item$displayLabel : item.value, item.noteLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          style: {
-            fontSize: '12px'
-          },
-          children: item.noteLabel
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: (_item$displayLabel = item.displayLabel) !== null && _item$displayLabel !== void 0 ? _item$displayLabel : item.value
+          }), item.noteLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            style: {
+              fontSize: '12px',
+              lineHeight: '16px'
+            },
+            children: item.noteLabel
+          })]
+        }), item.locked && /*#__PURE__*/(0, _jsxRuntime.jsx)(LockedIconContainer, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.LockedOn, {
+            color: _styles.COLORS.neutral_400,
+            className: "extraMargin",
+            size: "24px"
+          })
         })]
       })]
     })]
@@ -97,7 +111,8 @@ MenuItem.propTypes = {
   onClickHandler: _propTypes.default.func.isRequired,
   active: _propTypes.default.bool.isRequired,
   id: _propTypes.default.string.isRequired,
-  key: _propTypes.default.string.isRequired
+  key: _propTypes.default.string.isRequired,
+  className: _propTypes.default.string
 };
 var _default = MenuItem;
 exports.default = _default;

package/dist/MenuItem/MenuItem.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/MenuItem/MenuItem.tsx"],"names":["DropdownButton","styled","button","props","DropdownButtonCSS","size","ItemLabel","div","ItemIcon","ItemIconOld","ItemContent","css","Size","Small","ComponentTextStyle","Regular","COLORS","neutral_600","Medium","Large","white","CommonInteractionStyling","neutral_20","primary_500","neutral_200","primary_20","primary_600","primary_100","primary_800","MenuItem","React","forwardRef","ref","active","item","onClickHandler","key","id","disabled","showDividerAbove","icon","displayLabel","value","noteLabel","fontSize"],"mappings":";;;;;;;;;;;;;;;AAAA;;AAEA;;AACA;;AAEA;;AACA;;AAEA;;;;;;;;;;AAWO,IAAMA,cAAc,GAAGC,0BAAOC,MAAV,8FACvB,UAACC,KAAD;AAAA,SAAWC,iBAAiB,CAACD,KAAK,CAACE,IAAP,CAA5B;AAAA,CADuB,CAApB;;;;AAIA,IAAMC,SAAS,GAAGL,0BAAOM,GAAV,qFAAf;;;;AACA,IAAMC,QAAQ,GAAGP,0BAAOM,GAAV,qFAAd;;;;AACA,IAAME,WAAW,GAAGR,0BAAOM,GAAV,qFAAjB;;;;AAEA,IAAMG,WAAW,GAAGT,0BAAOM,GAAV,ybAKlBD,SALkB,EASlBE,QATkB,EAgBlBC,WAhBkB,CAAjB;;;;AAuBA,IAAML,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,IAAD,EAAiB;AAChD,aAAOM,qBAAP,gtCACIN,IAAI,IAAIO,YAAKC,KAAb,IAAsB,mCAAkBC,2BAAmBC,OAArC,EAA8CC,eAAOC,WAArD,CAD1B,EAEIZ,IAAI,IAAIO,YAAKM,MAAb,IAAuB,mCAAkBJ,2BAAmBC,OAArC,EAA8CC,eAAOC,WAArD,CAF3B,EAGIZ,IAAI,IAAIO,YAAKO,KAAb,IAAsB,mCAAkBL,2BAAmBC,OAArC,EAA8CC,eAAOC,WAArD,CAH1B,EAUgBZ,IAAI,IAAIO,YAAKO,KAAb,GAAqB,MAArB,GAA8Bd,IAAI,IAAIO,YAAKM,MAAb,GAAsB,MAAtB,GAA+B,MAV7E,EAWsBF,eAAOI,KAX7B,EAuBIC,gCAvBJ,EA0BkBL,eAAOM,UA1BzB,EAmC0BN,eAAOO,WAnCjC,EA4CaP,eAAOQ,WA5CpB,EAgDwBR,eAAOS,UAhD/B,EAmDeT,eAAOU,WAnDtB,EAuD0BV,eAAOO,WAvDjC,EA4DwBP,eAAOW,WA5D/B,EA+DeX,eAAOY,WA/DtB,EAmE0BZ,eAAOO,WAnEjC;AAuED,CAxEM;;;AA0EP,IAAMM,QAAQ,gBAAGC,KAAK,CAACC,UAAN,CAAmD,gBAM3CC,GAN2C,EAMnC;AAAA;;AAAA,MAL7BC,MAK6B,QAL7BA,MAK6B;AAAA,MAJ7BC,IAI6B,QAJ7BA,IAI6B;AAAA,MAH7BC,cAG6B,QAH7BA,cAG6B;AAAA,MAF7BC,GAE6B,QAF7BA,GAE6B;AAAA,MAD7B/B,IAC6B,QAD7BA,IAC6B;AAAA,MAA7BgC,EAA6B,QAA7BA,EAA6B;AAC/B,sBACE,sBAAC,cAAD;AACI,IAAA,IAAI,EAAC,QADT;AAEI,IAAA,IAAI,EAAEhC,IAFV;AAGI,IAAA,QAAQ,EAAE6B,IAAI,CAACI,QAHnB;AAII,IAAA,GAAG,EAAEN,GAJT;AAKI,IAAA,OAAO,EAAEG,cALb;AAMI,IAAA,SAAS,EAAG,CAACD,IAAI,CAACK,gBAAL,GAAwB,oBAAxB,GAA+C,EAAhD,IAAsD,GAAtD,IAA6DN,MAAM,GAAG,QAAH,GAAc,EAAjF,CANhB;AAQI,IAAA,EAAE,EAAEI,EARR;AAAA,eASKH,IAAI,CAACK,gBAAL,iBAAyB;AAAK,MAAA,SAAS,EAAC;AAAf,MAT9B,eAUI,sBAAC,WAAD;AAAA,iBACGL,IAAI,CAACM,IAAL,iBAAa,qBAAC,QAAD;AAAA,kBAAWN,IAAI,CAACM;AAAhB,QADhB,eAEE,sBAAC,SAAD;AAAA,yCACKN,IAAI,CAACO,YADV,mEAC0BP,IAAI,CAACQ,KAD/B,EAEKR,IAAI,CAACS,SAAL,iBAAkB;AAAK,UAAA,KAAK,EAAE;AAAEC,YAAAA,QAAQ,EAAE;AAAZ,WAAZ;AAAA,oBAAmCV,IAAI,CAACS;AAAxC,UAFvB;AAAA,QAFF;AAAA,MAVJ;AAAA,KAOSP,GAPT,CADF;AAoBD,CA3BgB,CAAjB;;AAhHGD,EAAAA,c;AACAF,EAAAA,M;AACAI,EAAAA,E;AACAD,EAAAA,G;;eA0IYP,Q","sourcesContent":["import * as React from 'react';\nimport {Link} from 'react-router-dom';\nimport styled, { css } from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ChevronRight} from '../icons/systemicons/SystemIcons';\nimport {Product, Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\nimport { CommonInteractionStyling } from '../common';\n\nexport interface MenuItemProps {\n   item: DropdownItem;\n   onClickHandler: (e: any) => void;\n   active: boolean;\n   id: string;\n   key: string;\n   size?: Size;\n}\n\nexport const DropdownButton = styled.button<{ size?: Size }>`\n  ${(props) => DropdownButtonCSS(props.size)}\n`;\n\nexport const ItemLabel = styled.div``;\nexport const ItemIcon = styled.div``;\nexport const ItemIconOld = styled.div``;\n\nexport const ItemContent = styled.div`\n    margin: auto 0 auto 16px;\n    display: flex;\n    align-items: center;\n\n    ${ItemLabel} {\n      flex: 1 0 calc(100% - 40px);    \n    }\n\n    ${ItemIcon} {\n      margin-right: 6px;\n      svg {\n        display: block;\n        margin: auto;\n      }\n    }\n    ${ItemIconOld} {\n      flex: 1 0 40px;\n      display: flex;\n      justify-content: flex-end;\n    }\n`;\n\nexport const DropdownButtonCSS = (size?: Size) => {\n  return css`\n    ${size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n    position: relative;\n    text-decoration: none;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    min-height: ${size == Size.Large ? '64px' : size == Size.Medium ? '56px' : '48px'};\n    background-color: ${COLORS.white};\n    border: none;\n    cursor: pointer;\n    background: transparent;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ${CommonInteractionStyling};\n\n    &.active {\n      background: ${COLORS.neutral_20};\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 0;\n        bottom: 0;\n        left: 2px;\n        background-color: ${COLORS.primary_500};\n\n        border-radius: 2px;\n      }\n    }\n\n    &:disabled {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ${COLORS.neutral_200};\n    }\n\n    &.active:hover {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_600};\n      }\n\n      &::after {\n        background-color: ${COLORS.primary_500};\n      }\n    }\n\n    &.active:active {\n      background-color: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n\n      &::after {\n        background-color: ${COLORS.primary_500};\n      }\n    }\n  `;\n};\n\nconst MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(({\n    active,\n    item,\n    onClickHandler,\n    key,\n    size,\n    id }: MenuItemProps, ref) => {\n  return (\n    <DropdownButton\n        type=\"button\"\n        size={size}\n        disabled={item.disabled}\n        ref={ref}\n        onClick={onClickHandler}\n        className={ (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (active ? 'active' : '')}\n        key={key}\n        id={id}>\n        {item.showDividerAbove && <div className=\"divider\" />}\n        <ItemContent>\n          {item.icon && <ItemIcon>{item.icon}</ItemIcon>}\n          <ItemLabel>\n              {item.displayLabel ?? item.value}\n              {item.noteLabel && <div style={{ fontSize: '12px' }}>{item.noteLabel}</div>}\n          </ItemLabel>\n        </ItemContent>\n  </DropdownButton>\n  );\n});\n\nexport default MenuItem;\n"],"file":"MenuItem.cjs"}
+{"version":3,"sources":["../../src/MenuItem/MenuItem.tsx"],"names":["DropdownButton","styled","button","props","DropdownButtonCSS","size","ItemLabel","div","ItemIcon","LockedIconContainer","ItemContent","css","Size","Small","ComponentTextStyle","Regular","COLORS","neutral_600","Medium","Large","white","CommonInteractionStyling","neutral_20","primary_500","neutral_200","neutral_500","primary_20","primary_600","primary_100","primary_800","MenuItem","React","forwardRef","ref","active","item","onClickHandler","key","className","id","disabled","locked","showDividerAbove","icon","displayLabel","value","noteLabel","fontSize","lineHeight","neutral_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {Link} from 'react-router-dom';\nimport styled, { css } from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ChevronRight, LockedOn} from '../icons/systemicons/SystemIcons';\nimport {Product, Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\nimport { CommonInteractionStyling } from '../common';\n\nexport interface MenuItemProps {\n   item: DropdownItem;\n   onClickHandler: (e: any) => void;\n   active: boolean;\n   id: string;\n   key: string;\n   size?: Size;\n   className?: string;\n}\n\nexport const DropdownButton = styled.button<{ size?: Size }>`\n  ${(props) => DropdownButtonCSS(props.size)}\n`;\n\nexport const ItemLabel = styled.div``;\nexport const ItemIcon = styled.div``;\n\nexport const LockedIconContainer = styled.div`\n\n`;\n\nexport const ItemContent = styled.div`\n    margin: auto 0 auto 16px;\n    display: flex;\n    align-items: center;\n    flex-grow: 2;\n\n    ${ItemLabel} {\n      flex: 1 0 calc(100% - 40px);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n    }\n\n    ${ItemIcon} {\n      margin-right: 6px;\n      svg {\n        display: block;\n        margin: auto;\n      }\n    }\n\n    ${LockedIconContainer} {\n      flex-grow: 2;\n\n      .extraMargin {\n        margin-left: calc(100% - 24px);\n      }\n    }\n`;\n\n\nexport const DropdownButtonCSS = (size?: Size) => {\n  return css`\n    ${size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n    position: relative;\n    text-decoration: none;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    min-height: ${size == Size.Large ? '64px' : size == Size.Medium ? '56px' : '48px'};\n    background-color: ${COLORS.white};\n    border: none;\n    cursor: pointer;\n    background: transparent;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ${CommonInteractionStyling};\n\n    &.active {\n      background: ${COLORS.neutral_20};\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 6px;\n        bottom: 6px;\n        left: 4px;\n        background-color: ${COLORS.primary_500};\n\n        border-radius: 4px;\n      }\n    }\n\n    &:disabled, &.disabled-state {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ${COLORS.neutral_200};\n    }\n\n    &.locked {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ${COLORS.neutral_500};\n    }\n\n    &.active:hover, &.active-hover-state {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_600};\n      }\n\n      &::after {\n        background-color: ${COLORS.primary_500};\n      }\n    }\n\n    &.active:active, &.active-active-state {\n      background-color: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n\n      &::after {\n        background-color: ${COLORS.primary_500};\n      }\n    }\n  `;\n};\n\nconst MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(({\n    active,\n    item,\n    onClickHandler,\n    key,\n    size,\n    className,\n    id }: MenuItemProps, ref) => {\n  return (\n    <DropdownButton\n        type=\"button\"\n        size={size}\n        disabled={item.disabled || item.locked}\n        ref={ref}\n        onClick={onClickHandler}\n        className={ className + ' ' + (item.locked ? 'locked' : '') + ' ' + (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (active ? 'active' : '')}\n        key={key}\n        id={id}>\n        {item.showDividerAbove && <div className=\"divider\" />}\n        <ItemContent>\n          {item.icon && <ItemIcon>{item.icon}</ItemIcon>}\n          <ItemLabel>\n              <div>\n                <div>{item.displayLabel ?? item.value}</div>\n                {item.noteLabel && <div style={{ fontSize: '12px', lineHeight: '16px' }}>{item.noteLabel}</div>}\n              </div>\n              {item.locked && <LockedIconContainer>\n                <LockedOn color={COLORS.neutral_400} className=\"extraMargin\" size=\"24px\" />\n              </LockedIconContainer>}\n          </ItemLabel>\n        </ItemContent>\n  </DropdownButton>\n  );\n});\n\nexport default MenuItem;\n"],"file":"MenuItem.cjs"}

package/dist/MenuItem/MenuItem.d.ts

@@ -8,13 +8,14 @@ export interface MenuItemProps {
     id: string;
     key: string;
     size?: Size;
+    className?: string;
 }
 export declare const DropdownButton: import("styled-components").StyledComponent<"button", any, {
     size?: Size | undefined;
 }, never>;
 export declare const ItemLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ItemIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ItemIconOld: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LockedIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ItemContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const DropdownButtonCSS: (size?: Size | undefined) => import("styled-components").FlattenSimpleInterpolation;
 declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLButtonElement>>;