@laerdal/life-react-components 3.0.1-dev.4 → 3.0.1-dev.9.full

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

package/dist/List/ListRow.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListRow.cjs","names":["Row","styled","div","COLORS","neutral_100","neutral_600","white","primary_20","primary_700","Z_INDEXES","hover","primary_100","primary_800","active","focusStyles","neutral_300","ComponentSStyling","ComponentTextStyle","Regular","ComponentMStyling","ComponentLStyling","ComponentXXSStyling","ComponentXSStyling","RightIcon","ListRow","size","Size","Medium","variant","icon","mainText","secondaryText","dropdown","note","noteTooltip","disabled","action","rightSideIcon","rightSideAction","rightSideIconDisabled","className","rest","React","useState","inAction","setInAction","handleKeyDown","e","key","rowClassName","concat","defaultOnMouseDownHandler","Large","Small","XSmall"],"sources":["../../src/List/ListRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\n\nimport {\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {TooltipWrapper} from '../Tooltips';\nimport {DropdownButton} from '../Dropdown';\nimport {SystemIcons} from '../icons';\nimport {Size} from '../types';\nimport {Z_INDEXES} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\nimport {IconButton} from '../Button';\n\nconst Row = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  box-sizing: border-box;\n\n  color: ${COLORS.neutral_600};\n  background-color: ${COLORS.white};\n\n\n  cursor: default;\n\n  &.interactive {\n    cursor: pointer;\n  }\n\n  &.interactive.disabled {\n    cursor: not-allowed;\n  }\n\n  &.interactive:hover:not(.in-action):not(.disabled) {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  &.interactive:active:not(.in-action):not(.disabled) {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n    z-index: ${Z_INDEXES.active};\n  }\n\n  &.interactive:focus {\n    ${focusStyles}\n  }\n\n  &.disabled {\n    .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n\n  &.small {\n    min-height: 48px;\n    padding: 0 8px;\n\n    .list-item-icon {\n      margin-right: 8px;\n    }\n\n    .list-item-main-text {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -8px;\n    }\n  }\n\n  &.medium {\n    min-height: 56px;\n    padding: 0 12px;\n\n    .list-item-icon {\n      margin-right: 12px;\n    }\n\n    .list-item-main-text {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -12px;\n    }\n  }\n\n  &.large {\n    min-height: 64px;\n    padding: 0 16px;\n\n    .list-item-icon {\n      margin-right: 16px;\n    }\n\n    .list-item-main-text {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -16px;\n    }\n  }\n\n  &.overlay {\n    padding: 0 4px;\n\n    .list-item-actions {\n      margin-right: -4px;\n    }\n  }\n\n  .list-item-icon {\n    width: 24px;\n    height: 24px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .list-item-content {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .list-item-main-text {\n  }\n\n  .list-item-secondary-text {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n  }\n\n  .list-item-note {\n    color: ${COLORS.neutral_600};\n    word-break: initial;\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n  }\n\n  .list-item-note.with-tooltip {\n    cursor: pointer;\n\n    > div {\n      text-decoration-line: underline;\n      text-decoration-style: dashed;\n      text-underline-offset: 1px;\n      text-decoration-thickness: 1px;\n    }\n  }\n\n  .list-item-actions {\n    display: flex;\n    align-items: center;\n\n    button div {\n      background-color: transparent;\n    }\n  }\n`;\n\nconst RightIcon = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 48px;\n  min-width: 48px;\n`;\n\n\ntype Props = Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown'> & {\n  size?: Size;\n  variant?: 'normal' | 'overlay';\n  icon?: React.ReactNode;\n  mainText: string;\n  secondaryText?: string;\n  dropdown?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width'>;\n  note?: string;\n  noteTooltip?: string;\n  disabled?: boolean;\n  action?: () => void;\n  rightSideIcon?: React.ReactNode;\n  rightSideAction?: () => void;\n  rightSideIconDisabled?: boolean;\n};\n\nconst ListRow: React.FunctionComponent<Props> = ({\n                                                   size = Size.Medium,\n                                                   variant = 'normal',\n                                                   icon,\n                                                   mainText,\n                                                   secondaryText,\n                                                   dropdown,\n                                                   note,\n                                                   noteTooltip,\n                                                   disabled = false,\n                                                   action,\n                                                   rightSideIcon,\n                                                   rightSideAction,\n                                                   rightSideIconDisabled,\n                                                   className,\n                                                   ...rest\n                                                 }: Props) => {\n\n  const [inAction, setInAction] = React.useState<Boolean>(false);\n\n  const handleKeyDown = (e: any) => {\n    if (e.key === 'Enter') {\n      action && action()\n    }\n  }\n\n  const rowClassName = (inAction ? 'in-action ' : '')\n    .concat(disabled ? 'disabled ' : '')\n    .concat(!!action ? 'interactive ' : '')\n    .concat('list-item-row ')\n    .concat(`${variant} `)\n    .concat(`${size}`)\n    .concat(className ? ` ${className}` : '');\n\n  return (\n    <Row tabIndex={!action || disabled ? -1 : 0}\n         className={rowClassName}\n         onMouseDown={defaultOnMouseDownHandler}\n         onKeyDown={(e) => !disabled && handleKeyDown(e)}\n         onClick={e => {\n           !disabled && action && action();\n         }}\n         data-hj-suppress\n         {...rest}>\n      {\n        !!icon &&\n        <div className={'list-item-icon'}>{icon}</div>\n      }\n      <div className={'list-item-content'}>\n        <div className={'list-item-main-text'}>{mainText}</div>\n        {!!secondaryText && <div className={'list-item-secondary-text'}>{secondaryText}</div>}\n      </div>\n      {\n        !!note &&\n        <>\n          {\n            !!noteTooltip &&\n            <div className={'list-item-note with-tooltip'}>\n              <TooltipWrapper label={noteTooltip}\n                              size={size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small}\n                              position={'top'}\n                              tabIndex={disabled ? -1 : 0}\n                              withArrow={true}>\n                {note}\n              </TooltipWrapper>\n            </div>\n          }\n          {\n            !noteTooltip &&\n            <div className={'list-item-note'}>\n              {note}\n            </div>\n          }\n        </>\n      }\n      {\n        !!dropdown &&\n        <div className={'list-item-actions'}\n             onMouseEnter={() => setInAction(!dropdown?.disabled)}\n             onMouseLeave={() => setInAction(false)}>\n          <DropdownButton {...dropdown}\n                          type={'icon'}\n                          disabled={disabled || dropdown.disabled}\n                          icon={variant === 'overlay'\n                            ? <SystemIcons.ArrowDropDown/>\n                            : <SystemIcons.MoreVertical/>}\n          />\n        </div>\n      }\n      {\n        !!rightSideIcon &&\n        <RightIcon className={'list-item-actions'}\n                   onMouseEnter={() => rightSideAction && setInAction(!dropdown?.disabled)}\n                   onMouseLeave={() => rightSideAction && setInAction(false)}>\n          {\n            rightSideAction &&\n            <IconButton action={rightSideAction} variant='secondary' shape='circular'\n                        disabled={disabled || rightSideIconDisabled}>\n              {rightSideIcon}\n            </IconButton>\n          }\n          {\n            !rightSideAction && rightSideIcon\n          }\n        </RightIcon>\n      }\n    </Row>\n  );\n};\n\nexport default ListRow;\n\n"],"mappings":"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"}
+{"version":3,"file":"ListRow.cjs","names":["Row","styled","div","COLORS","neutral_100","neutral_600","white","primary_20","primary_700","Z_INDEXES","hover","primary_100","primary_800","active","focusStyles","neutral_300","ComponentSStyling","ComponentTextStyle","Regular","ComponentMStyling","ComponentLStyling","ComponentXXSStyling","ComponentXSStyling","RightIcon","ListRow","size","Size","Medium","variant","icon","mainText","secondaryText","dropdown","note","noteTooltip","disabled","action","rightSideIcon","rightSideAction","rightSideIconDisabled","className","rest","React","useState","inAction","setInAction","handleKeyDown","e","key","rowClassName","concat","defaultOnMouseDownHandler","Large","Small","XSmall"],"sources":["../../src/List/ListRow.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\n\r\nimport {\r\n  ComponentLStyling,\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentXSStyling,\r\n  ComponentXXSStyling\r\n} from '../styles';\r\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\r\nimport {TooltipWrapper} from '../Tooltips';\r\nimport {DropdownButton} from '../Dropdown';\r\nimport {SystemIcons} from '../icons';\r\nimport {Size} from '../types';\r\nimport {Z_INDEXES} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport {IconButton} from '../Button';\r\n\r\nconst Row = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border-bottom: 1px solid ${COLORS.neutral_100};\r\n  box-sizing: border-box;\r\n\r\n  color: ${COLORS.neutral_600};\r\n  background-color: ${COLORS.white};\r\n\r\n\r\n  cursor: default;\r\n\r\n  &.interactive {\r\n    cursor: pointer;\r\n  }\r\n\r\n  &.interactive.disabled {\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  &.interactive:hover:not(.in-action):not(.disabled) {\r\n    background-color: ${COLORS.primary_20};\r\n    color: ${COLORS.primary_700};\r\n    z-index: ${Z_INDEXES.hover};\r\n  }\r\n\r\n  &.interactive:active:not(.in-action):not(.disabled) {\r\n    background-color: ${COLORS.primary_100};\r\n    color: ${COLORS.primary_800};\r\n    z-index: ${Z_INDEXES.active};\r\n  }\r\n\r\n  &.interactive:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &.disabled {\r\n    .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\r\n      color: ${COLORS.neutral_300};\r\n    }\r\n  }\r\n\r\n\r\n  &.small {\r\n    min-height: 48px;\r\n    padding: 0 8px;\r\n\r\n    .list-item-icon {\r\n      margin-right: 8px;\r\n    }\r\n\r\n    .list-item-main-text {\r\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    .list-item-actions {\r\n      margin-right: -8px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    min-height: 56px;\r\n    padding: 0 12px;\r\n\r\n    .list-item-icon {\r\n      margin-right: 12px;\r\n    }\r\n\r\n    .list-item-main-text {\r\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    .list-item-actions {\r\n      margin-right: -12px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    min-height: 64px;\r\n    padding: 0 16px;\r\n\r\n    .list-item-icon {\r\n      margin-right: 16px;\r\n    }\r\n\r\n    .list-item-main-text {\r\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    .list-item-actions {\r\n      margin-right: -16px;\r\n    }\r\n  }\r\n\r\n  &.overlay {\r\n    padding: 0 4px;\r\n\r\n    .list-item-actions {\r\n      margin-right: -4px;\r\n    }\r\n  }\r\n\r\n  .list-item-icon {\r\n    width: 24px;\r\n    height: 24px;\r\n\r\n    svg {\r\n      width: 24px;\r\n      height: 24px;\r\n    }\r\n  }\r\n\r\n  .list-item-content {\r\n    flex-grow: 1;\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n\r\n  .list-item-main-text {\r\n  }\r\n\r\n  .list-item-secondary-text {\r\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n\r\n  .list-item-note {\r\n    color: ${COLORS.neutral_600};\r\n    word-break: initial;\r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n\r\n  .list-item-note.with-tooltip {\r\n    cursor: pointer;\r\n\r\n    > div {\r\n      text-decoration-line: underline;\r\n      text-decoration-style: dashed;\r\n      text-underline-offset: 1px;\r\n      text-decoration-thickness: 1px;\r\n    }\r\n  }\r\n\r\n  .list-item-actions {\r\n    display: flex;\r\n    align-items: center;\r\n\r\n    button div {\r\n      background-color: transparent;\r\n    }\r\n  }\r\n`;\r\n\r\nconst RightIcon = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-height: 48px;\r\n  min-width: 48px;\r\n`;\r\n\r\n\r\ntype Props = Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown'> & {\r\n  size?: Size;\r\n  variant?: 'normal' | 'overlay';\r\n  icon?: React.ReactNode;\r\n  mainText: string;\r\n  secondaryText?: string;\r\n  dropdown?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width'>;\r\n  note?: string;\r\n  noteTooltip?: string;\r\n  disabled?: boolean;\r\n  action?: () => void;\r\n  rightSideIcon?: React.ReactNode;\r\n  rightSideAction?: () => void;\r\n  rightSideIconDisabled?: boolean;\r\n};\r\n\r\nconst ListRow: React.FunctionComponent<Props> = ({\r\n                                                   size = Size.Medium,\r\n                                                   variant = 'normal',\r\n                                                   icon,\r\n                                                   mainText,\r\n                                                   secondaryText,\r\n                                                   dropdown,\r\n                                                   note,\r\n                                                   noteTooltip,\r\n                                                   disabled = false,\r\n                                                   action,\r\n                                                   rightSideIcon,\r\n                                                   rightSideAction,\r\n                                                   rightSideIconDisabled,\r\n                                                   className,\r\n                                                   ...rest\r\n                                                 }: Props) => {\r\n\r\n  const [inAction, setInAction] = React.useState<Boolean>(false);\r\n\r\n  const handleKeyDown = (e: any) => {\r\n    if (e.key === 'Enter') {\r\n      action && action()\r\n    }\r\n  }\r\n\r\n  const rowClassName = (inAction ? 'in-action ' : '')\r\n    .concat(disabled ? 'disabled ' : '')\r\n    .concat(!!action ? 'interactive ' : '')\r\n    .concat('list-item-row ')\r\n    .concat(`${variant} `)\r\n    .concat(`${size}`)\r\n    .concat(className ? ` ${className}` : '');\r\n\r\n  return (\r\n    <Row tabIndex={!action || disabled ? -1 : 0}\r\n         className={rowClassName}\r\n         onMouseDown={defaultOnMouseDownHandler}\r\n         onKeyDown={(e) => !disabled && handleKeyDown(e)}\r\n         onClick={e => {\r\n           !disabled && action && action();\r\n         }}\r\n         data-hj-suppress\r\n         {...rest}>\r\n      {\r\n        !!icon &&\r\n        <div className={'list-item-icon'}>{icon}</div>\r\n      }\r\n      <div className={'list-item-content'}>\r\n        <div className={'list-item-main-text'}>{mainText}</div>\r\n        {!!secondaryText && <div className={'list-item-secondary-text'}>{secondaryText}</div>}\r\n      </div>\r\n      {\r\n        !!note &&\r\n        <>\r\n          {\r\n            !!noteTooltip &&\r\n            <div className={'list-item-note with-tooltip'}>\r\n              <TooltipWrapper label={noteTooltip}\r\n                              size={size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small}\r\n                              position={'top'}\r\n                              tabIndex={disabled ? -1 : 0}\r\n                              withArrow={true}>\r\n                {note}\r\n              </TooltipWrapper>\r\n            </div>\r\n          }\r\n          {\r\n            !noteTooltip &&\r\n            <div className={'list-item-note'}>\r\n              {note}\r\n            </div>\r\n          }\r\n        </>\r\n      }\r\n      {\r\n        !!dropdown &&\r\n        <div className={'list-item-actions'}\r\n             onMouseEnter={() => setInAction(!dropdown?.disabled)}\r\n             onMouseLeave={() => setInAction(false)}>\r\n          <DropdownButton {...dropdown}\r\n                          type={'icon'}\r\n                          disabled={disabled || dropdown.disabled}\r\n                          icon={variant === 'overlay'\r\n                            ? <SystemIcons.ArrowDropDown/>\r\n                            : <SystemIcons.MoreVertical/>}\r\n          />\r\n        </div>\r\n      }\r\n      {\r\n        !!rightSideIcon &&\r\n        <RightIcon className={'list-item-actions'}\r\n                   onMouseEnter={() => rightSideAction && setInAction(!dropdown?.disabled)}\r\n                   onMouseLeave={() => rightSideAction && setInAction(false)}>\r\n          {\r\n            rightSideAction &&\r\n            <IconButton action={rightSideAction} variant='secondary' shape='circular'\r\n                        disabled={disabled || rightSideIconDisabled}>\r\n              {rightSideIcon}\r\n            </IconButton>\r\n          }\r\n          {\r\n            !rightSideAction && rightSideIcon\r\n          }\r\n        </RightIcon>\r\n      }\r\n    </Row>\r\n  );\r\n};\r\n\r\nexport default ListRow;\r\n\r\n"],"mappings":"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"}

package/dist/List/ListRow.d.ts

@@ -1,20 +1,20 @@
-import * as React from 'react';
-import { DropdownButtonProps } from '../Dropdown/DropdownButtonTypes';
-import { Size } from '../types';
-type Props = Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown'> & {
-    size?: Size;
-    variant?: 'normal' | 'overlay';
-    icon?: React.ReactNode;
-    mainText: string;
-    secondaryText?: string;
-    dropdown?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width'>;
-    note?: string;
-    noteTooltip?: string;
-    disabled?: boolean;
-    action?: () => void;
-    rightSideIcon?: React.ReactNode;
-    rightSideAction?: () => void;
-    rightSideIconDisabled?: boolean;
-};
-declare const ListRow: React.FunctionComponent<Props>;
-export default ListRow;
+import * as React from 'react';
+import { DropdownButtonProps } from '../Dropdown/DropdownButtonTypes';
+import { Size } from '../types';
+type Props = Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown'> & {
+    size?: Size;
+    variant?: 'normal' | 'overlay';
+    icon?: React.ReactNode;
+    mainText: string;
+    secondaryText?: string;
+    dropdown?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width'>;
+    note?: string;
+    noteTooltip?: string;
+    disabled?: boolean;
+    action?: () => void;
+    rightSideIcon?: React.ReactNode;
+    rightSideAction?: () => void;
+    rightSideIconDisabled?: boolean;
+};
+declare const ListRow: React.FunctionComponent<Props>;
+export default ListRow;

package/dist/List/ListRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListRow.js","names":["React","styled","COLORS","ComponentTextStyle","focusStyles","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXSStyling","ComponentXXSStyling","TooltipWrapper","DropdownButton","SystemIcons","Size","Z_INDEXES","defaultOnMouseDownHandler","IconButton","Row","div","neutral_100","neutral_600","white","primary_20","primary_700","hover","primary_100","primary_800","active","neutral_300","Regular","RightIcon","ListRow","size","Medium","variant","icon","mainText","secondaryText","dropdown","note","noteTooltip","disabled","action","rightSideIcon","rightSideAction","rightSideIconDisabled","className","rest","useState","inAction","setInAction","handleKeyDown","e","key","rowClassName","concat","Large","Small","XSmall"],"sources":["../../src/List/ListRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\n\nimport {\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {TooltipWrapper} from '../Tooltips';\nimport {DropdownButton} from '../Dropdown';\nimport {SystemIcons} from '../icons';\nimport {Size} from '../types';\nimport {Z_INDEXES} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\nimport {IconButton} from '../Button';\n\nconst Row = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  box-sizing: border-box;\n\n  color: ${COLORS.neutral_600};\n  background-color: ${COLORS.white};\n\n\n  cursor: default;\n\n  &.interactive {\n    cursor: pointer;\n  }\n\n  &.interactive.disabled {\n    cursor: not-allowed;\n  }\n\n  &.interactive:hover:not(.in-action):not(.disabled) {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  &.interactive:active:not(.in-action):not(.disabled) {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n    z-index: ${Z_INDEXES.active};\n  }\n\n  &.interactive:focus {\n    ${focusStyles}\n  }\n\n  &.disabled {\n    .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n\n  &.small {\n    min-height: 48px;\n    padding: 0 8px;\n\n    .list-item-icon {\n      margin-right: 8px;\n    }\n\n    .list-item-main-text {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -8px;\n    }\n  }\n\n  &.medium {\n    min-height: 56px;\n    padding: 0 12px;\n\n    .list-item-icon {\n      margin-right: 12px;\n    }\n\n    .list-item-main-text {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -12px;\n    }\n  }\n\n  &.large {\n    min-height: 64px;\n    padding: 0 16px;\n\n    .list-item-icon {\n      margin-right: 16px;\n    }\n\n    .list-item-main-text {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -16px;\n    }\n  }\n\n  &.overlay {\n    padding: 0 4px;\n\n    .list-item-actions {\n      margin-right: -4px;\n    }\n  }\n\n  .list-item-icon {\n    width: 24px;\n    height: 24px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .list-item-content {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .list-item-main-text {\n  }\n\n  .list-item-secondary-text {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n  }\n\n  .list-item-note {\n    color: ${COLORS.neutral_600};\n    word-break: initial;\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n  }\n\n  .list-item-note.with-tooltip {\n    cursor: pointer;\n\n    > div {\n      text-decoration-line: underline;\n      text-decoration-style: dashed;\n      text-underline-offset: 1px;\n      text-decoration-thickness: 1px;\n    }\n  }\n\n  .list-item-actions {\n    display: flex;\n    align-items: center;\n\n    button div {\n      background-color: transparent;\n    }\n  }\n`;\n\nconst RightIcon = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 48px;\n  min-width: 48px;\n`;\n\n\ntype Props = Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown'> & {\n  size?: Size;\n  variant?: 'normal' | 'overlay';\n  icon?: React.ReactNode;\n  mainText: string;\n  secondaryText?: string;\n  dropdown?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width'>;\n  note?: string;\n  noteTooltip?: string;\n  disabled?: boolean;\n  action?: () => void;\n  rightSideIcon?: React.ReactNode;\n  rightSideAction?: () => void;\n  rightSideIconDisabled?: boolean;\n};\n\nconst ListRow: React.FunctionComponent<Props> = ({\n                                                   size = Size.Medium,\n                                                   variant = 'normal',\n                                                   icon,\n                                                   mainText,\n                                                   secondaryText,\n                                                   dropdown,\n                                                   note,\n                                                   noteTooltip,\n                                                   disabled = false,\n                                                   action,\n                                                   rightSideIcon,\n                                                   rightSideAction,\n                                                   rightSideIconDisabled,\n                                                   className,\n                                                   ...rest\n                                                 }: Props) => {\n\n  const [inAction, setInAction] = React.useState<Boolean>(false);\n\n  const handleKeyDown = (e: any) => {\n    if (e.key === 'Enter') {\n      action && action()\n    }\n  }\n\n  const rowClassName = (inAction ? 'in-action ' : '')\n    .concat(disabled ? 'disabled ' : '')\n    .concat(!!action ? 'interactive ' : '')\n    .concat('list-item-row ')\n    .concat(`${variant} `)\n    .concat(`${size}`)\n    .concat(className ? ` ${className}` : '');\n\n  return (\n    <Row tabIndex={!action || disabled ? -1 : 0}\n         className={rowClassName}\n         onMouseDown={defaultOnMouseDownHandler}\n         onKeyDown={(e) => !disabled && handleKeyDown(e)}\n         onClick={e => {\n           !disabled && action && action();\n         }}\n         data-hj-suppress\n         {...rest}>\n      {\n        !!icon &&\n        <div className={'list-item-icon'}>{icon}</div>\n      }\n      <div className={'list-item-content'}>\n        <div className={'list-item-main-text'}>{mainText}</div>\n        {!!secondaryText && <div className={'list-item-secondary-text'}>{secondaryText}</div>}\n      </div>\n      {\n        !!note &&\n        <>\n          {\n            !!noteTooltip &&\n            <div className={'list-item-note with-tooltip'}>\n              <TooltipWrapper label={noteTooltip}\n                              size={size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small}\n                              position={'top'}\n                              tabIndex={disabled ? -1 : 0}\n                              withArrow={true}>\n                {note}\n              </TooltipWrapper>\n            </div>\n          }\n          {\n            !noteTooltip &&\n            <div className={'list-item-note'}>\n              {note}\n            </div>\n          }\n        </>\n      }\n      {\n        !!dropdown &&\n        <div className={'list-item-actions'}\n             onMouseEnter={() => setInAction(!dropdown?.disabled)}\n             onMouseLeave={() => setInAction(false)}>\n          <DropdownButton {...dropdown}\n                          type={'icon'}\n                          disabled={disabled || dropdown.disabled}\n                          icon={variant === 'overlay'\n                            ? <SystemIcons.ArrowDropDown/>\n                            : <SystemIcons.MoreVertical/>}\n          />\n        </div>\n      }\n      {\n        !!rightSideIcon &&\n        <RightIcon className={'list-item-actions'}\n                   onMouseEnter={() => rightSideAction && setInAction(!dropdown?.disabled)}\n                   onMouseLeave={() => rightSideAction && setInAction(false)}>\n          {\n            rightSideAction &&\n            <IconButton action={rightSideAction} variant='secondary' shape='circular'\n                        disabled={disabled || rightSideIconDisabled}>\n              {rightSideIcon}\n            </IconButton>\n          }\n          {\n            !rightSideAction && rightSideIcon\n          }\n        </RightIcon>\n      }\n    </Row>\n  );\n};\n\nexport default ListRow;\n\n"],"mappings":"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"}
+{"version":3,"file":"ListRow.js","names":["React","styled","COLORS","ComponentTextStyle","focusStyles","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXSStyling","ComponentXXSStyling","TooltipWrapper","DropdownButton","SystemIcons","Size","Z_INDEXES","defaultOnMouseDownHandler","IconButton","Row","div","neutral_100","neutral_600","white","primary_20","primary_700","hover","primary_100","primary_800","active","neutral_300","Regular","RightIcon","ListRow","size","Medium","variant","icon","mainText","secondaryText","dropdown","note","noteTooltip","disabled","action","rightSideIcon","rightSideAction","rightSideIconDisabled","className","rest","useState","inAction","setInAction","handleKeyDown","e","key","rowClassName","concat","Large","Small","XSmall"],"sources":["../../src/List/ListRow.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\n\r\nimport {\r\n  ComponentLStyling,\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentXSStyling,\r\n  ComponentXXSStyling\r\n} from '../styles';\r\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\r\nimport {TooltipWrapper} from '../Tooltips';\r\nimport {DropdownButton} from '../Dropdown';\r\nimport {SystemIcons} from '../icons';\r\nimport {Size} from '../types';\r\nimport {Z_INDEXES} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport {IconButton} from '../Button';\r\n\r\nconst Row = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border-bottom: 1px solid ${COLORS.neutral_100};\r\n  box-sizing: border-box;\r\n\r\n  color: ${COLORS.neutral_600};\r\n  background-color: ${COLORS.white};\r\n\r\n\r\n  cursor: default;\r\n\r\n  &.interactive {\r\n    cursor: pointer;\r\n  }\r\n\r\n  &.interactive.disabled {\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  &.interactive:hover:not(.in-action):not(.disabled) {\r\n    background-color: ${COLORS.primary_20};\r\n    color: ${COLORS.primary_700};\r\n    z-index: ${Z_INDEXES.hover};\r\n  }\r\n\r\n  &.interactive:active:not(.in-action):not(.disabled) {\r\n    background-color: ${COLORS.primary_100};\r\n    color: ${COLORS.primary_800};\r\n    z-index: ${Z_INDEXES.active};\r\n  }\r\n\r\n  &.interactive:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &.disabled {\r\n    .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\r\n      color: ${COLORS.neutral_300};\r\n    }\r\n  }\r\n\r\n\r\n  &.small {\r\n    min-height: 48px;\r\n    padding: 0 8px;\r\n\r\n    .list-item-icon {\r\n      margin-right: 8px;\r\n    }\r\n\r\n    .list-item-main-text {\r\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    .list-item-actions {\r\n      margin-right: -8px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    min-height: 56px;\r\n    padding: 0 12px;\r\n\r\n    .list-item-icon {\r\n      margin-right: 12px;\r\n    }\r\n\r\n    .list-item-main-text {\r\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    .list-item-actions {\r\n      margin-right: -12px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    min-height: 64px;\r\n    padding: 0 16px;\r\n\r\n    .list-item-icon {\r\n      margin-right: 16px;\r\n    }\r\n\r\n    .list-item-main-text {\r\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    .list-item-actions {\r\n      margin-right: -16px;\r\n    }\r\n  }\r\n\r\n  &.overlay {\r\n    padding: 0 4px;\r\n\r\n    .list-item-actions {\r\n      margin-right: -4px;\r\n    }\r\n  }\r\n\r\n  .list-item-icon {\r\n    width: 24px;\r\n    height: 24px;\r\n\r\n    svg {\r\n      width: 24px;\r\n      height: 24px;\r\n    }\r\n  }\r\n\r\n  .list-item-content {\r\n    flex-grow: 1;\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n\r\n  .list-item-main-text {\r\n  }\r\n\r\n  .list-item-secondary-text {\r\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n\r\n  .list-item-note {\r\n    color: ${COLORS.neutral_600};\r\n    word-break: initial;\r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n\r\n  .list-item-note.with-tooltip {\r\n    cursor: pointer;\r\n\r\n    > div {\r\n      text-decoration-line: underline;\r\n      text-decoration-style: dashed;\r\n      text-underline-offset: 1px;\r\n      text-decoration-thickness: 1px;\r\n    }\r\n  }\r\n\r\n  .list-item-actions {\r\n    display: flex;\r\n    align-items: center;\r\n\r\n    button div {\r\n      background-color: transparent;\r\n    }\r\n  }\r\n`;\r\n\r\nconst RightIcon = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-height: 48px;\r\n  min-width: 48px;\r\n`;\r\n\r\n\r\ntype Props = Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown'> & {\r\n  size?: Size;\r\n  variant?: 'normal' | 'overlay';\r\n  icon?: React.ReactNode;\r\n  mainText: string;\r\n  secondaryText?: string;\r\n  dropdown?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width'>;\r\n  note?: string;\r\n  noteTooltip?: string;\r\n  disabled?: boolean;\r\n  action?: () => void;\r\n  rightSideIcon?: React.ReactNode;\r\n  rightSideAction?: () => void;\r\n  rightSideIconDisabled?: boolean;\r\n};\r\n\r\nconst ListRow: React.FunctionComponent<Props> = ({\r\n                                                   size = Size.Medium,\r\n                                                   variant = 'normal',\r\n                                                   icon,\r\n                                                   mainText,\r\n                                                   secondaryText,\r\n                                                   dropdown,\r\n                                                   note,\r\n                                                   noteTooltip,\r\n                                                   disabled = false,\r\n                                                   action,\r\n                                                   rightSideIcon,\r\n                                                   rightSideAction,\r\n                                                   rightSideIconDisabled,\r\n                                                   className,\r\n                                                   ...rest\r\n                                                 }: Props) => {\r\n\r\n  const [inAction, setInAction] = React.useState<Boolean>(false);\r\n\r\n  const handleKeyDown = (e: any) => {\r\n    if (e.key === 'Enter') {\r\n      action && action()\r\n    }\r\n  }\r\n\r\n  const rowClassName = (inAction ? 'in-action ' : '')\r\n    .concat(disabled ? 'disabled ' : '')\r\n    .concat(!!action ? 'interactive ' : '')\r\n    .concat('list-item-row ')\r\n    .concat(`${variant} `)\r\n    .concat(`${size}`)\r\n    .concat(className ? ` ${className}` : '');\r\n\r\n  return (\r\n    <Row tabIndex={!action || disabled ? -1 : 0}\r\n         className={rowClassName}\r\n         onMouseDown={defaultOnMouseDownHandler}\r\n         onKeyDown={(e) => !disabled && handleKeyDown(e)}\r\n         onClick={e => {\r\n           !disabled && action && action();\r\n         }}\r\n         data-hj-suppress\r\n         {...rest}>\r\n      {\r\n        !!icon &&\r\n        <div className={'list-item-icon'}>{icon}</div>\r\n      }\r\n      <div className={'list-item-content'}>\r\n        <div className={'list-item-main-text'}>{mainText}</div>\r\n        {!!secondaryText && <div className={'list-item-secondary-text'}>{secondaryText}</div>}\r\n      </div>\r\n      {\r\n        !!note &&\r\n        <>\r\n          {\r\n            !!noteTooltip &&\r\n            <div className={'list-item-note with-tooltip'}>\r\n              <TooltipWrapper label={noteTooltip}\r\n                              size={size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small}\r\n                              position={'top'}\r\n                              tabIndex={disabled ? -1 : 0}\r\n                              withArrow={true}>\r\n                {note}\r\n              </TooltipWrapper>\r\n            </div>\r\n          }\r\n          {\r\n            !noteTooltip &&\r\n            <div className={'list-item-note'}>\r\n              {note}\r\n            </div>\r\n          }\r\n        </>\r\n      }\r\n      {\r\n        !!dropdown &&\r\n        <div className={'list-item-actions'}\r\n             onMouseEnter={() => setInAction(!dropdown?.disabled)}\r\n             onMouseLeave={() => setInAction(false)}>\r\n          <DropdownButton {...dropdown}\r\n                          type={'icon'}\r\n                          disabled={disabled || dropdown.disabled}\r\n                          icon={variant === 'overlay'\r\n                            ? <SystemIcons.ArrowDropDown/>\r\n                            : <SystemIcons.MoreVertical/>}\r\n          />\r\n        </div>\r\n      }\r\n      {\r\n        !!rightSideIcon &&\r\n        <RightIcon className={'list-item-actions'}\r\n                   onMouseEnter={() => rightSideAction && setInAction(!dropdown?.disabled)}\r\n                   onMouseLeave={() => rightSideAction && setInAction(false)}>\r\n          {\r\n            rightSideAction &&\r\n            <IconButton action={rightSideAction} variant='secondary' shape='circular'\r\n                        disabled={disabled || rightSideIconDisabled}>\r\n              {rightSideIcon}\r\n            </IconButton>\r\n          }\r\n          {\r\n            !rightSideAction && rightSideIcon\r\n          }\r\n        </RightIcon>\r\n      }\r\n    </Row>\r\n  );\r\n};\r\n\r\nexport default ListRow;\r\n\r\n"],"mappings":"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"}

package/dist/List/__tests__/ListRow.tests.d.ts

@@ -1 +1 @@
-export {};
+export {};

package/dist/List/index.cjs.map

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

package/dist/List/index.d.ts

@@ -1,2 +1,2 @@
-import ListRow from './ListRow';
-export { ListRow };
+import ListRow from './ListRow';
+export { ListRow };

package/dist/List/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ListRow"],"sources":["../../src/List/index.ts"],"sourcesContent":["import ListRow from './ListRow';\n\nexport {ListRow};\n"],"mappings":"AAAA,OAAOA,OAAO,MAAM,WAAW;AAE/B,SAAQA,OAAO"}
+{"version":3,"file":"index.js","names":["ListRow"],"sources":["../../src/List/index.ts"],"sourcesContent":["import ListRow from './ListRow';\r\n\r\nexport {ListRow};\r\n"],"mappings":"AAAA,OAAOA,OAAO,MAAM,WAAW;AAE/B,SAAQA,OAAO"}

package/dist/LoadingIndicator/LoadingIndicator.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingIndicator.cjs","names":["LoadingWrapper","styled","div","LoadingIndicator","size","Size","Medium","color","COLORS","primary","id","Small"],"sources":["../../src/LoadingIndicator/LoadingIndicator.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS } from '../styles';\nimport { Size } from '../types';\nimport { SystemIcons } from '../icons';\n\nconst LoadingWrapper = styled.div`\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  svg {\n    animation-name: spin;\n    animation-duration: 1s;\n    animation-iteration-count: infinite;\n    transform-origin: 50% 50%;\n\n    @keyframes spin {\n      from {\n        transform: rotate(0deg);\n      }\n      to {\n        transform: rotate(360deg);\n      }\n    }\n  }\n`;\n\ntype LoadingIndicatorProps = {\n  id?: string;\n  size?: Size.Small | Size.Medium;\n  color?: string;\n};\n\nconst LoadingIndicator = ({ size = Size.Medium, color = COLORS.primary, id }: LoadingIndicatorProps) => {\n  switch (size) {\n    case Size.Medium:\n      return (\n        <LoadingWrapper id={id}>\n          <SystemIcons.LoadingMedium color={color} />\n        </LoadingWrapper>\n      );\n    case Size.Small:\n      return (\n        <LoadingWrapper id={id}>\n          <SystemIcons.LoadingSmall color={color} />\n        </LoadingWrapper>\n      );\n    default:\n      return (\n        <LoadingWrapper id={id}>\n          <SystemIcons.LoadingMedium color={color} />\n        </LoadingWrapper>\n      );\n  }\n};\n\nexport default LoadingIndicator;\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAAuC;AAAA;AAAA;AAAA;AAEvC,IAAMA,cAAc,GAAGC,yBAAM,CAACC,GAAG,gdAqBhC;AAQD,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,OAAkF;EAAA,qBAA5EC,IAAI;IAAJA,IAAI,0BAAGC,WAAI,CAACC,MAAM;IAAA,kBAAEC,KAAK;IAALA,KAAK,2BAAGC,cAAM,CAACC,OAAO;IAAEC,EAAE,QAAFA,EAAE;EACxE,QAAQN,IAAI;IACV,KAAKC,WAAI,CAACC,MAAM;MACd,oBACE,qBAAC,cAAc;QAAC,EAAE,EAAEI,EAAG;QAAA,uBACrB,qBAAC,kBAAW,CAAC,aAAa;UAAC,KAAK,EAAEH;QAAM;MAAG,EAC5B;IAErB,KAAKF,WAAI,CAACM,KAAK;MACb,oBACE,qBAAC,cAAc;QAAC,EAAE,EAAED,EAAG;QAAA,uBACrB,qBAAC,kBAAW,CAAC,YAAY;UAAC,KAAK,EAAEH;QAAM;MAAG,EAC3B;IAErB;MACE,oBACE,qBAAC,cAAc;QAAC,EAAE,EAAEG,EAAG;QAAA,uBACrB,qBAAC,kBAAW,CAAC,aAAa;UAAC,KAAK,EAAEH;QAAM;MAAG,EAC5B;EACjB;AAER,CAAC;AAAC;EA1BAG,EAAE;EAEFH,KAAK;AAAA;AAAA,eA0BQJ,gBAAgB;AAAA"}
+{"version":3,"file":"LoadingIndicator.cjs","names":["LoadingWrapper","styled","div","LoadingIndicator","size","Size","Medium","color","COLORS","primary","id","Small"],"sources":["../../src/LoadingIndicator/LoadingIndicator.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { COLORS } from '../styles';\r\nimport { Size } from '../types';\r\nimport { SystemIcons } from '../icons';\r\n\r\nconst LoadingWrapper = styled.div`\r\n  height: 100%;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n\r\n  svg {\r\n    animation-name: spin;\r\n    animation-duration: 1s;\r\n    animation-iteration-count: infinite;\r\n    transform-origin: 50% 50%;\r\n\r\n    @keyframes spin {\r\n      from {\r\n        transform: rotate(0deg);\r\n      }\r\n      to {\r\n        transform: rotate(360deg);\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\ntype LoadingIndicatorProps = {\r\n  id?: string;\r\n  size?: Size.Small | Size.Medium;\r\n  color?: string;\r\n};\r\n\r\nconst LoadingIndicator = ({ size = Size.Medium, color = COLORS.primary, id }: LoadingIndicatorProps) => {\r\n  switch (size) {\r\n    case Size.Medium:\r\n      return (\r\n        <LoadingWrapper id={id}>\r\n          <SystemIcons.LoadingMedium color={color} />\r\n        </LoadingWrapper>\r\n      );\r\n    case Size.Small:\r\n      return (\r\n        <LoadingWrapper id={id}>\r\n          <SystemIcons.LoadingSmall color={color} />\r\n        </LoadingWrapper>\r\n      );\r\n    default:\r\n      return (\r\n        <LoadingWrapper id={id}>\r\n          <SystemIcons.LoadingMedium color={color} />\r\n        </LoadingWrapper>\r\n      );\r\n  }\r\n};\r\n\r\nexport default LoadingIndicator;\r\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAAuC;AAAA;AAAA;AAAA;AAEvC,IAAMA,cAAc,GAAGC,yBAAM,CAACC,GAAG,gdAqBhC;AAQD,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,OAAkF;EAAA,qBAA5EC,IAAI;IAAJA,IAAI,0BAAGC,WAAI,CAACC,MAAM;IAAA,kBAAEC,KAAK;IAALA,KAAK,2BAAGC,cAAM,CAACC,OAAO;IAAEC,EAAE,QAAFA,EAAE;EACxE,QAAQN,IAAI;IACV,KAAKC,WAAI,CAACC,MAAM;MACd,oBACE,qBAAC,cAAc;QAAC,EAAE,EAAEI,EAAG;QAAA,uBACrB,qBAAC,kBAAW,CAAC,aAAa;UAAC,KAAK,EAAEH;QAAM;MAAG,EAC5B;IAErB,KAAKF,WAAI,CAACM,KAAK;MACb,oBACE,qBAAC,cAAc;QAAC,EAAE,EAAED,EAAG;QAAA,uBACrB,qBAAC,kBAAW,CAAC,YAAY;UAAC,KAAK,EAAEH;QAAM;MAAG,EAC3B;IAErB;MACE,oBACE,qBAAC,cAAc;QAAC,EAAE,EAAEG,EAAG;QAAA,uBACrB,qBAAC,kBAAW,CAAC,aAAa;UAAC,KAAK,EAAEH;QAAM;MAAG,EAC5B;EACjB;AAER,CAAC;AAAC;EA1BAG,EAAE;EAEFH,KAAK;AAAA;AAAA,eA0BQJ,gBAAgB;AAAA"}