@laerdal/life-react-components 2.0.1-dev.9 → 2.1.0

package/dist/LinearProgress/LinearProgress.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinearProgress.js","names":["React","Size","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","Bar","div","neutral_100","accent1_400","accent1_800","neutral_600","white","Dot","neutral_400","accent1_600","LineFill","Line","neutral_500","accent1_500","neutral_700","Label","black","Content","Wrapper","Regular","LinearProgressType","LinearProgressVariant","LinearProgress","size","Medium","type","variant","Normal","label","value","max","className","rest","renderBars","Array","from","keys","map","i","Math","ceil","renderDots","renderLine","width","render","Bars","Dots"],"sources":["../../src/LinearProgress/LinearProgress.tsx"],"sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle} 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 Label = styled.div`\n  color: ${COLORS.black};\n`;\n\nconst Content = styled.div`\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  height: 16px;\n`;\n\nconst Wrapper = styled.div`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  &.inverted {\n    ${Label} {\n      color: ${COLORS.white};\n    }\n  }\n\n  &.small {\n    gap: 4px;\n\n    ${Label} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${Content} {\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    ${Label} {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${Content} {\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\n  &.large {\n    ${Label} {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${Content} {\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\n  &.dots.small,\n  &.dots.medium {\n    ${Content} {\n      padding: 0 2px;\n    }\n  }\n\n  &.dots.large {\n    ${Content} {\n      padding: 0 3px;\n    }\n  }\n`;\n\nexport enum LinearProgressType {\n  Dots = 'dots',\n  Line = 'line',\n  Bars = 'bars',\n}\n\nexport enum LinearProgressVariant {\n  Normal = 'normal',\n  Inverted = 'inverted',\n}\n\nexport interface LinearProgressProps extends React.HTMLAttributes<HTMLDivElement> {\n  size?: Size.Small | Size.Medium | Size.Large;\n  type?: LinearProgressType;\n  variant?: LinearProgressVariant;\n\n  label?: string;\n\n  value: number;\n  max: number;\n}\n\nconst LinearProgress: React.FunctionComponent<LinearProgressProps> = ({\n                                                                        size = Size.Medium,\n                                                                        type = LinearProgressType.Line,\n                                                                        variant = LinearProgressVariant.Normal,\n                                                                        label,\n                                                                        value,\n                                                                        max,\n                                                                        className,\n                                                                        ...rest\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  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 LinearProgressType.Bars:\n        return renderBars();\n      case LinearProgressType.Dots:\n        return renderDots();\n      case LinearProgressType.Line:\n      default:\n        return renderLine();\n    }\n  }\n\n  return (\n    <Wrapper className={`${size} ${type} ${variant} ${className || ''}`} {...rest}>\n      {label && <Label>{label}</Label>}\n      <Content>\n        {render()}\n      </Content>\n    </Wrapper>\n  )\n};\n\nexport default LinearProgress;\n"],"mappings":"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"}
+{"version":3,"file":"LinearProgress.js","names":["React","Size","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","Bar","div","neutral_100","accent1_400","accent1_800","neutral_600","white","Dot","neutral_400","accent1_600","LineFill","Line","neutral_500","accent1_500","neutral_700","Label","black","Content","Wrapper","Regular","LinearProgressType","LinearProgressVariant","LinearProgress","size","Medium","type","variant","Normal","label","value","max","className","rest","renderBars","Array","from","keys","map","i","Math","ceil","renderDots","renderLine","width","render","Bars","Dots"],"sources":["../../src/LinearProgress/LinearProgress.tsx"],"sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle} 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 Label = styled.div`\n  color: ${COLORS.black};\n`;\n\nconst Content = styled.div`\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  height: 16px;\n`;\n\nconst Wrapper = styled.div`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  &.inverted {\n    ${Label} {\n      color: ${COLORS.white};\n    }\n  }\n\n  &.small {\n    gap: 4px;\n\n    ${Label} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${Content} {\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    ${Label} {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${Content} {\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\n  &.large {\n    ${Label} {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${Content} {\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\n  &.dots.small,\n  &.dots.medium {\n    ${Content} {\n      padding: 0 2px;\n    }\n  }\n\n  &.dots.large {\n    ${Content} {\n      padding: 0 3px;\n    }\n  }\n`;\n\nexport enum LinearProgressType {\n  Dots = 'dots',\n  Line = 'line',\n  Bars = 'bars',\n}\n\nexport enum LinearProgressVariant {\n  Normal = 'normal',\n  Inverted = 'inverted',\n}\n\nexport interface LinearProgressProps extends React.HTMLAttributes<HTMLDivElement> {\n  size?: Size.Small | Size.Medium | Size.Large;\n  type?: LinearProgressType;\n  variant?: LinearProgressVariant;\n\n  label?: string;\n\n  value: number;\n  max: number;\n}\n\nconst LinearProgress: React.FunctionComponent<LinearProgressProps> = ({\n                                                                        size = Size.Medium,\n                                                                        type = LinearProgressType.Line,\n                                                                        variant = LinearProgressVariant.Normal,\n                                                                        label,\n                                                                        value,\n                                                                        max,\n                                                                        className,\n                                                                        ...rest\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  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 LinearProgressType.Bars:\n        return renderBars();\n      case LinearProgressType.Dots:\n        return renderDots();\n      case LinearProgressType.Line:\n      default:\n        return renderLine();\n    }\n  }\n\n  return (\n    <Wrapper className={`${size} ${type} ${variant} ${className || ''}`} {...rest}>\n      {label && <Label>{label}</Label>}\n      <Content>\n        {render()}\n      </Content>\n    </Wrapper>\n  )\n};\n\nexport default LinearProgress;\n"],"mappings":"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"}

package/dist/LinearProgress/index.cjs

@@ -1,7 +1,6 @@
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -23,10 +22,7 @@ Object.defineProperty(exports, "LinearProgressVariant", {
     return _LinearProgress.LinearProgressVariant;
   }
 });
-
 var _LinearProgress = _interopRequireWildcard(require("./LinearProgress"));
-
 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/LinearProgress/index.cjs.map

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

package/dist/LinearProgress/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["LinearProgress","LinearProgressType","LinearProgressVariant"],"sources":["../../src/LinearProgress/index.ts"],"sourcesContent":["import LinearProgress, {LinearProgressType, LinearProgressVariant} from './LinearProgress';\n\nexport {LinearProgressType, LinearProgressVariant};\nexport {LinearProgress}\n"],"mappings":"AAAA,OAAOA,cAAP,IAAwBC,kBAAxB,EAA4CC,qBAA5C,QAAwE,kBAAxE;AAEA,SAAQD,kBAAR,EAA4BC,qBAA5B;AACA,SAAQF,cAAR"}
+{"version":3,"file":"index.js","names":["LinearProgress","LinearProgressType","LinearProgressVariant"],"sources":["../../src/LinearProgress/index.ts"],"sourcesContent":["import LinearProgress, {LinearProgressType, LinearProgressVariant} from './LinearProgress';\n\nexport {LinearProgressType, LinearProgressVariant};\nexport {LinearProgress}\n"],"mappings":"AAAA,OAAOA,cAAc,IAAGC,kBAAkB,EAAEC,qBAAqB,QAAO,kBAAkB;AAE1F,SAAQD,kBAAkB,EAAEC,qBAAqB;AACjD,SAAQF,cAAc"}

package/dist/List/ListRow.cjs

@@ -1,91 +1,62 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _styles = require("../styles");
-
 var _Tooltips = require("../Tooltips");
-
 var _Dropdown = require("../Dropdown");
-
 var _icons = require("../icons");
-
 var _types = require("../types");
-
 var _common = require("../common");
-
 var _Button = require("../Button");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 var _excluded = ["size", "variant", "icon", "mainText", "secondaryText", "dropdown", "note", "noteTooltip", "disabled", "action", "rightSideIcon", "rightSideAction", "rightSideIconDisabled", "className"];
-
 var _templateObject, _templateObject2;
-
 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; }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 var Row = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n\n  color: ", ";\n  background-color: ", ";\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: ", ";\n    color: ", ";\n    z-index: ", ";\n  }\n\n  &.interactive:active:not(.in-action):not(.disabled) {\n    background-color: ", ";\n    color: ", ";\n    z-index: ", ";\n  }\n\n  &.interactive:focus {\n    ", "\n  }\n\n  &.disabled {\n    .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n      color: ", ";\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      ", "\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      ", "\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      ", "\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    ", "\n  }\n\n  .list-item-note {\n    color: ", ";\n    word-break: initial;\n    ", "\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"])), _styles.COLORS.neutral_100, _styles.COLORS.neutral_600, _styles.COLORS.white, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.Z_INDEXES.hover, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.Z_INDEXES.active, _styles.focusStyles, _styles.COLORS.neutral_300, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null), (0, _styles.ComponentXXSStyling)(_styles.ComponentTextStyle.Regular, null), _styles.COLORS.neutral_600, (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null));
-
 var RightIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 48px;\n  min-width: 48px;\n"])));
-
 var ListRow = function ListRow(_ref) {
   var _ref$size = _ref.size,
-      size = _ref$size === void 0 ? _types.Size.Medium : _ref$size,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'normal' : _ref$variant,
-      icon = _ref.icon,
-      mainText = _ref.mainText,
-      secondaryText = _ref.secondaryText,
-      dropdown = _ref.dropdown,
-      note = _ref.note,
-      noteTooltip = _ref.noteTooltip,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      action = _ref.action,
-      rightSideIcon = _ref.rightSideIcon,
-      rightSideAction = _ref.rightSideAction,
-      rightSideIconDisabled = _ref.rightSideIconDisabled,
-      className = _ref.className,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-
+    size = _ref$size === void 0 ? _types.Size.Medium : _ref$size,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'normal' : _ref$variant,
+    icon = _ref.icon,
+    mainText = _ref.mainText,
+    secondaryText = _ref.secondaryText,
+    dropdown = _ref.dropdown,
+    note = _ref.note,
+    noteTooltip = _ref.noteTooltip,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    action = _ref.action,
+    rightSideIcon = _ref.rightSideIcon,
+    rightSideAction = _ref.rightSideAction,
+    rightSideIconDisabled = _ref.rightSideIconDisabled,
+    className = _ref.className,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _React$useState = React.useState(false),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      inAction = _React$useState2[0],
-      setInAction = _React$useState2[1];
-
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    inAction = _React$useState2[0],
+    setInAction = _React$useState2[1];
   var handleKeyDown = function handleKeyDown(e) {
     if (e.key === 'Enter') {
       action && action();
     }
   };
-
   var rowClassName = (inAction ? 'in-action ' : '').concat(disabled ? 'disabled ' : '').concat(!!action ? 'interactive ' : '').concat('list-item-row ').concat("".concat(variant, " ")).concat("".concat(size)).concat(className ? " ".concat(className) : '');
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Row, _objectSpread(_objectSpread({
     tabIndex: !action || disabled ? -1 : 0,
@@ -157,7 +128,6 @@ var ListRow = function ListRow(_ref) {
     })]
   }));
 };
-
 ListRow.propTypes = {
   variant: _propTypes.default.oneOf(['normal', 'overlay']),
   icon: _propTypes.default.node,

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';\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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"}

package/dist/List/ListRow.js

@@ -4,13 +4,9 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
 var _excluded = ["size", "variant", "icon", "mainText", "secondaryText", "dropdown", "note", "noteTooltip", "disabled", "action", "rightSideIcon", "rightSideAction", "rightSideIconDisabled", "className"];
-
 var _templateObject, _templateObject2;
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import * as React from 'react';
 import styled from 'styled-components';
 import { COLORS, ComponentTextStyle, focusStyles } from '../styles';
@@ -27,38 +23,34 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 var Row = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n\n  color: ", ";\n  background-color: ", ";\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: ", ";\n    color: ", ";\n    z-index: ", ";\n  }\n\n  &.interactive:active:not(.in-action):not(.disabled) {\n    background-color: ", ";\n    color: ", ";\n    z-index: ", ";\n  }\n\n  &.interactive:focus {\n    ", "\n  }\n\n  &.disabled {\n    .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n      color: ", ";\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      ", "\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      ", "\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      ", "\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    ", "\n  }\n\n  .list-item-note {\n    color: ", ";\n    word-break: initial;\n    ", "\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"])), COLORS.neutral_100, COLORS.neutral_600, COLORS.white, COLORS.primary_20, COLORS.primary_700, Z_INDEXES.hover, COLORS.primary_100, COLORS.primary_800, Z_INDEXES.active, focusStyles, COLORS.neutral_300, ComponentSStyling(ComponentTextStyle.Regular, null), ComponentMStyling(ComponentTextStyle.Regular, null), ComponentLStyling(ComponentTextStyle.Regular, null), ComponentXXSStyling(ComponentTextStyle.Regular, null), COLORS.neutral_600, ComponentXSStyling(ComponentTextStyle.Regular, null));
 var RightIcon = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 48px;\n  min-width: 48px;\n"])));
-
 var ListRow = function ListRow(_ref) {
   var _ref$size = _ref.size,
-      size = _ref$size === void 0 ? Size.Medium : _ref$size,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'normal' : _ref$variant,
-      icon = _ref.icon,
-      mainText = _ref.mainText,
-      secondaryText = _ref.secondaryText,
-      dropdown = _ref.dropdown,
-      note = _ref.note,
-      noteTooltip = _ref.noteTooltip,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      action = _ref.action,
-      rightSideIcon = _ref.rightSideIcon,
-      rightSideAction = _ref.rightSideAction,
-      rightSideIconDisabled = _ref.rightSideIconDisabled,
-      className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    size = _ref$size === void 0 ? Size.Medium : _ref$size,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'normal' : _ref$variant,
+    icon = _ref.icon,
+    mainText = _ref.mainText,
+    secondaryText = _ref.secondaryText,
+    dropdown = _ref.dropdown,
+    note = _ref.note,
+    noteTooltip = _ref.noteTooltip,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    action = _ref.action,
+    rightSideIcon = _ref.rightSideIcon,
+    rightSideAction = _ref.rightSideAction,
+    rightSideIconDisabled = _ref.rightSideIconDisabled,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      inAction = _React$useState2[0],
-      setInAction = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    inAction = _React$useState2[0],
+    setInAction = _React$useState2[1];
   var handleKeyDown = function handleKeyDown(e) {
     if (e.key === 'Enter') {
       action && action();
     }
   };
-
   var rowClassName = (inAction ? 'in-action ' : '').concat(disabled ? 'disabled ' : '').concat(!!action ? 'interactive ' : '').concat('list-item-row ').concat("".concat(variant, " ")).concat("".concat(size)).concat(className ? " ".concat(className) : '');
   return /*#__PURE__*/_jsxs(Row, _objectSpread(_objectSpread({
     tabIndex: !action || disabled ? -1 : 0,
@@ -130,7 +122,6 @@ var ListRow = function ListRow(_ref) {
     })]
   }));
 };
-
 ListRow.propTypes = {
   variant: _pt.oneOf(['normal', 'overlay']),
   icon: _pt.node,

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';\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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"}

package/dist/List/index.cjs

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,6 +10,5 @@ Object.defineProperty(exports, "ListRow", {
     return _ListRow.default;
   }
 });
-
 var _ListRow = _interopRequireDefault(require("./ListRow"));
 //# sourceMappingURL=index.cjs.map

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';\n\nexport {ListRow};\n"],"mappings":";;;;;;;;;;;;AAAA"}

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,OAAP,MAAoB,WAApB;AAEA,SAAQA,OAAR"}
+{"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"}

package/dist/LoadingIndicator/LoadingIndicator.cjs

@@ -1,45 +1,29 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _styles = require("../styles");
-
 var _types = require("../types");
-
 var _SystemIcons = require("../icons/systemicons/SystemIcons");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 var _templateObject;
-
 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; }
-
 var LoadingWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])));
-
 var LoadingIndicator = function LoadingIndicator(_ref) {
   var _ref$size = _ref.size,
-      size = _ref$size === void 0 ? _types.Size.Medium : _ref$size,
-      _ref$color = _ref.color,
-      color = _ref$color === void 0 ? _styles.COLORS.primary : _ref$color,
-      id = _ref.id;
-
+    size = _ref$size === void 0 ? _types.Size.Medium : _ref$size,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? _styles.COLORS.primary : _ref$color,
+    id = _ref.id;
   switch (size) {
     case _types.Size.Medium:
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(LoadingWrapper, {
@@ -48,7 +32,6 @@ var LoadingIndicator = function LoadingIndicator(_ref) {
           color: color
         })
       });
-
     case _types.Size.Small:
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(LoadingWrapper, {
         id: id,
@@ -56,7 +39,6 @@ var LoadingIndicator = function LoadingIndicator(_ref) {
           color: color
         })
       });
-
     default:
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(LoadingWrapper, {
         id: id,
@@ -66,7 +48,6 @@ var LoadingIndicator = function LoadingIndicator(_ref) {
       });
   }
 };
-
 LoadingIndicator.propTypes = {
   id: _propTypes.default.string,
   color: _propTypes.default.string

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 { LoadingMedium, LoadingSmall } from '../icons/systemicons/SystemIcons';\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          <LoadingMedium color={color} />\n        </LoadingWrapper>\n      );\n    case Size.Small:\n      return (\n        <LoadingWrapper id={id}>\n          <LoadingSmall color={color} />\n        </LoadingWrapper>\n      );\n    default:\n      return (\n        <LoadingWrapper id={id}>\n          <LoadingMedium color={color} />\n        </LoadingWrapper>\n      );\n  }\n};\n\nexport default LoadingIndicator;\n"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,cAAc,GAAGC,yBAAA,CAAOC,GAAV,gdAApB;;AA6BA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,OAA+E;EAAA,qBAA5EC,IAA4E;EAAA,IAA5EA,IAA4E,0BAArEC,WAAA,CAAKC,MAAgE;EAAA,sBAAxDC,KAAwD;EAAA,IAAxDA,KAAwD,2BAAhDC,cAAA,CAAOC,OAAyC;EAAA,IAAhCC,EAAgC,QAAhCA,EAAgC;;EACtG,QAAQN,IAAR;IACE,KAAKC,WAAA,CAAKC,MAAV;MACE,oBACE,qBAAC,cAAD;QAAgB,EAAE,EAAEI,EAApB;QAAA,uBACE,qBAAC,0BAAD;UAAe,KAAK,EAAEH;QAAtB;MADF,EADF;;IAKF,KAAKF,WAAA,CAAKM,KAAV;MACE,oBACE,qBAAC,cAAD;QAAgB,EAAE,EAAED,EAApB;QAAA,uBACE,qBAAC,yBAAD;UAAc,KAAK,EAAEH;QAArB;MADF,EADF;;IAKF;MACE,oBACE,qBAAC,cAAD;QAAgB,EAAE,EAAEG,EAApB;QAAA,uBACE,qBAAC,0BAAD;UAAe,KAAK,EAAEH;QAAtB;MADF,EADF;EAdJ;AAoBD,CArBD;;;EALEG,E;EAEAH,K;;eA0BaJ,gB"}
+{"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 { LoadingMedium, LoadingSmall } from '../icons/systemicons/SystemIcons';\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          <LoadingMedium color={color} />\n        </LoadingWrapper>\n      );\n    case Size.Small:\n      return (\n        <LoadingWrapper id={id}>\n          <LoadingSmall color={color} />\n        </LoadingWrapper>\n      );\n    default:\n      return (\n        <LoadingWrapper id={id}>\n          <LoadingMedium color={color} />\n        </LoadingWrapper>\n      );\n  }\n};\n\nexport default LoadingIndicator;\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAA+E;AAAA;AAAA;AAAA;AAE/E,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,0BAAa;UAAC,KAAK,EAAEH;QAAM;MAAG,EAChB;IAErB,KAAKF,WAAI,CAACM,KAAK;MACb,oBACE,qBAAC,cAAc;QAAC,EAAE,EAAED,EAAG;QAAA,uBACrB,qBAAC,yBAAY;UAAC,KAAK,EAAEH;QAAM;MAAG,EACf;IAErB;MACE,oBACE,qBAAC,cAAc;QAAC,EAAE,EAAEG,EAAG;QAAA,uBACrB,qBAAC,0BAAa;UAAC,KAAK,EAAEH;QAAM;MAAG,EAChB;EACjB;AAER,CAAC;AAAC;EA1BAG,EAAE;EAEFH,KAAK;AAAA;AAAA,eA0BQJ,gBAAgB;AAAA"}