@laerdal/life-react-components 1.5.1-dev.22 → 1.5.1-dev.24

package/dist/Card/CardBottomSection.cjs

@@ -60,7 +60,7 @@ var CardBottomSection = function CardBottomSection(_ref) {
       progressLevel = _ref.progressLevel,
       progressMax = _ref.progressMax,
       _ref$progressType = _ref.progressType,
-      progressType = _ref$progressType === void 0 ? _.LinearProgressionType.Line : _ref$progressType,
+      progressType = _ref$progressType === void 0 ? _.LinearProgressType.Line : _ref$progressType,
       noteLeft = _ref.noteLeft,
       noteLeftIcon = _ref.noteLeftIcon,
       noteRight = _ref.noteRight,
@@ -73,10 +73,10 @@ var CardBottomSection = function CardBottomSection(_ref) {
     disabled: disabled,
     interactionType: interactionType,
     children: [haveAtLeastSomething && /*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, {}), progressLevel != undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(ProgressContainer, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.LinearProgression, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.LinearProgress, {
         size: _.Size.Small,
         type: progressType,
-        variant: _.LinearProgressionVariant.Normal,
+        variant: _.LinearProgressVariant.Normal,
         value: progressLevel,
         max: progressMax !== null && progressMax !== void 0 ? progressMax : progressLevel
       })

package/dist/Card/CardBottomSection.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Card/CardBottomSection.tsx"],"names":["ProgressContainer","styled","div","NotesContainer","COLORS","neutral_500","AuthorContainer","props","disabled","neutral_300","Divider","neutral_100","NoteLeft","NoteRight","AuthorName","ButtonRowContainer","neutral_600","Container","interactionType","InteractionType","Clickable","CardBottomSection","progressLevel","progressMax","progressType","LinearProgressionType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","actions","haveAtLeastSomething","undefined","Size","Small","LinearProgressionVariant","Normal","ComponentTextStyle","Bold","map","x","e","stopPropagation","onClick","icon","logoSrc"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXXS, InteractionType, LinearProgression, LinearProgressionType, LinearProgressionVariant, Size } from '..';\nimport { LaerdalLogo } from '../assets';\nimport { IconButton } from '../Button';\n\nexport interface ActionItem {\n  icon: React.ReactNode;\n  onClick: () => void;\n}\n\nexport interface CardBottomSectionProps {\n  interactionType: InteractionType;\n  progressLevel?: number;\n  progressMax?: number;\n  progressType?: LinearProgressionType;\n\n  noteLeft?: string;\n  noteLeftIcon?: React.ReactNode;\n  noteRight?: string;\n  noteRightIcon?: React.ReactNode;\n  \n  authorName?: string;\n  actions?: ActionItem[];\n  logoSrc: string;\n  disabled: boolean;\n}\n\n\nconst ProgressContainer = styled.div``;\n\nconst NotesContainer = styled.div`\n  height: 24px;\n  margin-top: 24px;\n  position: relative;\n  color: ${COLORS.neutral_500};\n`;\n\nconst AuthorContainer = styled.div<{disabled: boolean}>`\n  margin-top: 22px;\n  display: flex;\n  flex-direction: row;\n  margin-bottom: 4px;\n  align-items: center;\n  ${props => props.disabled ? `\n    color: ${COLORS.neutral_300};\n\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ` : ''}\n`;\n\nconst Divider = styled.div`\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\n  border-top-style: solid;\n  width: 100%;\n  height: 1px;\n  margin-bottom: 9px;\n`;\n\nconst NoteLeft = styled.div`\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n  }\n`;\nconst NoteRight = styled.div`\n  position: absolute;\n  top: 0px;\n  right: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n  }\n`;\n\nconst AuthorName = styled.div`\n  flex-grow: 2;\n`;\n\nconst ButtonRowContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\n  border-top-style: solid;\n\n  button:last-child{\n    margin: 8px 0px 0px 0px;\n  }\n\n  button:not(:last-child) {\n    margin: 8px 0px 0px 0px;\n  }\n\n  svg {\n    color: ${COLORS.neutral_600};\n  }\n`;\n\nconst Container = styled.div<{interactionType: InteractionType; disabled: boolean}>`\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};\n\n  ${ButtonRowContainer} {\n    ${props => props.interactionType == InteractionType.Clickable ? \n      `cursor: ${props.disabled ? 'not-allowed' : 'auto'};` : ''}\n  }\n`;\n\nconst CardBottomSection: React.FunctionComponent<CardBottomSectionProps> = ({\n  interactionType,\n  progressLevel,\n  progressMax,\n  progressType = LinearProgressionType.Line,\n  noteLeft,\n  noteLeftIcon,\n  noteRight,\n  noteRightIcon,\n  authorName,\n  actions,\n  disabled\n}: CardBottomSectionProps) => {\n\n  const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;\n  return (\n    <Container disabled={disabled} interactionType={interactionType}>\n      {haveAtLeastSomething && <Divider />}\n      {progressLevel != undefined && <ProgressContainer>\n        <LinearProgression   size={Size.Small}\n          type={progressType}\n          variant={LinearProgressionVariant.Normal}\n          value={progressLevel} \n          max={progressMax ?? progressLevel} />\n        </ProgressContainer>}\n\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <NotesContainer>\n        {(noteLeft || noteLeftIcon) && (\n          <NoteLeft>\n            {noteLeftIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\n          </NoteLeft>\n        )}\n        {(noteRight || noteRightIcon) && (\n          <NoteRight>\n            {noteRightIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\n          </NoteRight>\n        )}\n      </NotesContainer>}\n\n      {authorName && <AuthorContainer disabled={disabled}>\n        <AuthorName>{authorName}</AuthorName>\n        <LaerdalLogo width='80px' height='43px'  />\n      </AuthorContainer>}\n\n      {actions && <ButtonRowContainer>\n        {actions.map(x => (\n          <IconButton disabled={disabled} variant=\"secondary\" shape=\"circular\" action={(e) => {e?.stopPropagation(); x.onClick();}}>\n            {x.icon}\n          </IconButton>\n        ))}\n      </ButtonRowContainer>}\n    </Container>\n  );\n};\n\nexport default CardBottomSection;\n"],"file":"CardBottomSection.cjs"}
+{"version":3,"sources":["../../src/Card/CardBottomSection.tsx"],"names":["ProgressContainer","styled","div","NotesContainer","COLORS","neutral_500","AuthorContainer","props","disabled","neutral_300","Divider","neutral_100","NoteLeft","NoteRight","AuthorName","ButtonRowContainer","neutral_600","Container","interactionType","InteractionType","Clickable","CardBottomSection","progressLevel","progressMax","progressType","LinearProgressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","actions","haveAtLeastSomething","undefined","Size","Small","LinearProgressVariant","Normal","ComponentTextStyle","Bold","map","x","e","stopPropagation","onClick","icon","logoSrc"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXXS, InteractionType, LinearProgress, LinearProgressType, LinearProgressVariant, Size } from '..';\nimport { LaerdalLogo } from '../assets';\nimport { IconButton } from '../Button';\n\nexport interface ActionItem {\n  icon: React.ReactNode;\n  onClick: () => void;\n}\n\nexport interface CardBottomSectionProps {\n  interactionType: InteractionType;\n  progressLevel?: number;\n  progressMax?: number;\n  progressType?: LinearProgressType;\n\n  noteLeft?: string;\n  noteLeftIcon?: React.ReactNode;\n  noteRight?: string;\n  noteRightIcon?: React.ReactNode;\n  \n  authorName?: string;\n  actions?: ActionItem[];\n  logoSrc: string;\n  disabled: boolean;\n}\n\n\nconst ProgressContainer = styled.div``;\n\nconst NotesContainer = styled.div`\n  height: 24px;\n  margin-top: 24px;\n  position: relative;\n  color: ${COLORS.neutral_500};\n`;\n\nconst AuthorContainer = styled.div<{disabled: boolean}>`\n  margin-top: 22px;\n  display: flex;\n  flex-direction: row;\n  margin-bottom: 4px;\n  align-items: center;\n  ${props => props.disabled ? `\n    color: ${COLORS.neutral_300};\n\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ` : ''}\n`;\n\nconst Divider = styled.div`\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\n  border-top-style: solid;\n  width: 100%;\n  height: 1px;\n  margin-bottom: 9px;\n`;\n\nconst NoteLeft = styled.div`\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n  }\n`;\nconst NoteRight = styled.div`\n  position: absolute;\n  top: 0px;\n  right: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n  }\n`;\n\nconst AuthorName = styled.div`\n  flex-grow: 2;\n`;\n\nconst ButtonRowContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\n  border-top-style: solid;\n\n  button:last-child{\n    margin: 8px 0px 0px 0px;\n  }\n\n  button:not(:last-child) {\n    margin: 8px 0px 0px 0px;\n  }\n\n  svg {\n    color: ${COLORS.neutral_600};\n  }\n`;\n\nconst Container = styled.div<{interactionType: InteractionType; disabled: boolean}>`\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};\n\n  ${ButtonRowContainer} {\n    ${props => props.interactionType == InteractionType.Clickable ? \n      `cursor: ${props.disabled ? 'not-allowed' : 'auto'};` : ''}\n  }\n`;\n\nconst CardBottomSection: React.FunctionComponent<CardBottomSectionProps> = ({\n  interactionType,\n  progressLevel,\n  progressMax,\n  progressType = LinearProgressType.Line,\n  noteLeft,\n  noteLeftIcon,\n  noteRight,\n  noteRightIcon,\n  authorName,\n  actions,\n  disabled\n}: CardBottomSectionProps) => {\n\n  const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;\n  return (\n    <Container disabled={disabled} interactionType={interactionType}>\n      {haveAtLeastSomething && <Divider />}\n      {progressLevel != undefined && <ProgressContainer>\n        <LinearProgress size={Size.Small}\n                        type={progressType}\n                        variant={LinearProgressVariant.Normal}\n                        value={progressLevel}\n                        max={progressMax ?? progressLevel} />\n        </ProgressContainer>}\n\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <NotesContainer>\n        {(noteLeft || noteLeftIcon) && (\n          <NoteLeft>\n            {noteLeftIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\n          </NoteLeft>\n        )}\n        {(noteRight || noteRightIcon) && (\n          <NoteRight>\n            {noteRightIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\n          </NoteRight>\n        )}\n      </NotesContainer>}\n\n      {authorName && <AuthorContainer disabled={disabled}>\n        <AuthorName>{authorName}</AuthorName>\n        <LaerdalLogo width='80px' height='43px'  />\n      </AuthorContainer>}\n\n      {actions && <ButtonRowContainer>\n        {actions.map(x => (\n          <IconButton disabled={disabled} variant=\"secondary\" shape=\"circular\" action={(e) => {e?.stopPropagation(); x.onClick();}}>\n            {x.icon}\n          </IconButton>\n        ))}\n      </ButtonRowContainer>}\n    </Container>\n  );\n};\n\nexport default CardBottomSection;\n"],"file":"CardBottomSection.cjs"}

package/dist/Card/CardBottomSection.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { InteractionType, LinearProgressionType } from '..';
+import { InteractionType, LinearProgressType } from '..';
 export interface ActionItem {
     icon: React.ReactNode;
     onClick: () => void;
@@ -8,7 +8,7 @@ export interface CardBottomSectionProps {
     interactionType: InteractionType;
     progressLevel?: number;
     progressMax?: number;
-    progressType?: LinearProgressionType;
+    progressType?: LinearProgressType;
     noteLeft?: string;
     noteLeftIcon?: React.ReactNode;
     noteRight?: string;

package/dist/Card/CardBottomSection.js

@@ -5,7 +5,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 
 import * as React from 'react';
 import styled from 'styled-components';
-import { COLORS, ComponentTextStyle, ComponentXXS, InteractionType, LinearProgression, LinearProgressionType, LinearProgressionVariant, Size } from '..';
+import { COLORS, ComponentTextStyle, ComponentXXS, InteractionType, LinearProgress, LinearProgressType, LinearProgressVariant, Size } from '..';
 import { LaerdalLogo } from '../assets';
 import { IconButton } from '../Button';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -31,7 +31,7 @@ var CardBottomSection = function CardBottomSection(_ref) {
       progressLevel = _ref.progressLevel,
       progressMax = _ref.progressMax,
       _ref$progressType = _ref.progressType,
-      progressType = _ref$progressType === void 0 ? LinearProgressionType.Line : _ref$progressType,
+      progressType = _ref$progressType === void 0 ? LinearProgressType.Line : _ref$progressType,
       noteLeft = _ref.noteLeft,
       noteLeftIcon = _ref.noteLeftIcon,
       noteRight = _ref.noteRight,
@@ -44,10 +44,10 @@ var CardBottomSection = function CardBottomSection(_ref) {
     disabled: disabled,
     interactionType: interactionType,
     children: [haveAtLeastSomething && /*#__PURE__*/_jsx(Divider, {}), progressLevel != undefined && /*#__PURE__*/_jsx(ProgressContainer, {
-      children: /*#__PURE__*/_jsx(LinearProgression, {
+      children: /*#__PURE__*/_jsx(LinearProgress, {
         size: Size.Small,
         type: progressType,
-        variant: LinearProgressionVariant.Normal,
+        variant: LinearProgressVariant.Normal,
         value: progressLevel,
         max: progressMax !== null && progressMax !== void 0 ? progressMax : progressLevel
       })

package/dist/Card/CardBottomSection.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Card/CardBottomSection.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentXXS","InteractionType","LinearProgression","LinearProgressionType","LinearProgressionVariant","Size","LaerdalLogo","IconButton","ProgressContainer","div","NotesContainer","neutral_500","AuthorContainer","props","disabled","neutral_300","Divider","neutral_100","NoteLeft","NoteRight","AuthorName","ButtonRowContainer","neutral_600","Container","interactionType","Clickable","CardBottomSection","progressLevel","progressMax","progressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","actions","haveAtLeastSomething","undefined","Small","Normal","Bold","map","x","e","stopPropagation","onClick","icon","logoSrc"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXXS, InteractionType, LinearProgression, LinearProgressionType, LinearProgressionVariant, Size } from '..';\nimport { LaerdalLogo } from '../assets';\nimport { IconButton } from '../Button';\n\nexport interface ActionItem {\n  icon: React.ReactNode;\n  onClick: () => void;\n}\n\nexport interface CardBottomSectionProps {\n  interactionType: InteractionType;\n  progressLevel?: number;\n  progressMax?: number;\n  progressType?: LinearProgressionType;\n\n  noteLeft?: string;\n  noteLeftIcon?: React.ReactNode;\n  noteRight?: string;\n  noteRightIcon?: React.ReactNode;\n  \n  authorName?: string;\n  actions?: ActionItem[];\n  logoSrc: string;\n  disabled: boolean;\n}\n\n\nconst ProgressContainer = styled.div``;\n\nconst NotesContainer = styled.div`\n  height: 24px;\n  margin-top: 24px;\n  position: relative;\n  color: ${COLORS.neutral_500};\n`;\n\nconst AuthorContainer = styled.div<{disabled: boolean}>`\n  margin-top: 22px;\n  display: flex;\n  flex-direction: row;\n  margin-bottom: 4px;\n  align-items: center;\n  ${props => props.disabled ? `\n    color: ${COLORS.neutral_300};\n\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ` : ''}\n`;\n\nconst Divider = styled.div`\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\n  border-top-style: solid;\n  width: 100%;\n  height: 1px;\n  margin-bottom: 9px;\n`;\n\nconst NoteLeft = styled.div`\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n  }\n`;\nconst NoteRight = styled.div`\n  position: absolute;\n  top: 0px;\n  right: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n  }\n`;\n\nconst AuthorName = styled.div`\n  flex-grow: 2;\n`;\n\nconst ButtonRowContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\n  border-top-style: solid;\n\n  button:last-child{\n    margin: 8px 0px 0px 0px;\n  }\n\n  button:not(:last-child) {\n    margin: 8px 0px 0px 0px;\n  }\n\n  svg {\n    color: ${COLORS.neutral_600};\n  }\n`;\n\nconst Container = styled.div<{interactionType: InteractionType; disabled: boolean}>`\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};\n\n  ${ButtonRowContainer} {\n    ${props => props.interactionType == InteractionType.Clickable ? \n      `cursor: ${props.disabled ? 'not-allowed' : 'auto'};` : ''}\n  }\n`;\n\nconst CardBottomSection: React.FunctionComponent<CardBottomSectionProps> = ({\n  interactionType,\n  progressLevel,\n  progressMax,\n  progressType = LinearProgressionType.Line,\n  noteLeft,\n  noteLeftIcon,\n  noteRight,\n  noteRightIcon,\n  authorName,\n  actions,\n  disabled\n}: CardBottomSectionProps) => {\n\n  const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;\n  return (\n    <Container disabled={disabled} interactionType={interactionType}>\n      {haveAtLeastSomething && <Divider />}\n      {progressLevel != undefined && <ProgressContainer>\n        <LinearProgression   size={Size.Small}\n          type={progressType}\n          variant={LinearProgressionVariant.Normal}\n          value={progressLevel} \n          max={progressMax ?? progressLevel} />\n        </ProgressContainer>}\n\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <NotesContainer>\n        {(noteLeft || noteLeftIcon) && (\n          <NoteLeft>\n            {noteLeftIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\n          </NoteLeft>\n        )}\n        {(noteRight || noteRightIcon) && (\n          <NoteRight>\n            {noteRightIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\n          </NoteRight>\n        )}\n      </NotesContainer>}\n\n      {authorName && <AuthorContainer disabled={disabled}>\n        <AuthorName>{authorName}</AuthorName>\n        <LaerdalLogo width='80px' height='43px'  />\n      </AuthorContainer>}\n\n      {actions && <ButtonRowContainer>\n        {actions.map(x => (\n          <IconButton disabled={disabled} variant=\"secondary\" shape=\"circular\" action={(e) => {e?.stopPropagation(); x.onClick();}}>\n            {x.icon}\n          </IconButton>\n        ))}\n      </ButtonRowContainer>}\n    </Container>\n  );\n};\n\nexport default CardBottomSection;\n"],"file":"CardBottomSection.js"}
+{"version":3,"sources":["../../src/Card/CardBottomSection.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentXXS","InteractionType","LinearProgress","LinearProgressType","LinearProgressVariant","Size","LaerdalLogo","IconButton","ProgressContainer","div","NotesContainer","neutral_500","AuthorContainer","props","disabled","neutral_300","Divider","neutral_100","NoteLeft","NoteRight","AuthorName","ButtonRowContainer","neutral_600","Container","interactionType","Clickable","CardBottomSection","progressLevel","progressMax","progressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","actions","haveAtLeastSomething","undefined","Small","Normal","Bold","map","x","e","stopPropagation","onClick","icon","logoSrc"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXXS, InteractionType, LinearProgress, LinearProgressType, LinearProgressVariant, Size } from '..';\nimport { LaerdalLogo } from '../assets';\nimport { IconButton } from '../Button';\n\nexport interface ActionItem {\n  icon: React.ReactNode;\n  onClick: () => void;\n}\n\nexport interface CardBottomSectionProps {\n  interactionType: InteractionType;\n  progressLevel?: number;\n  progressMax?: number;\n  progressType?: LinearProgressType;\n\n  noteLeft?: string;\n  noteLeftIcon?: React.ReactNode;\n  noteRight?: string;\n  noteRightIcon?: React.ReactNode;\n  \n  authorName?: string;\n  actions?: ActionItem[];\n  logoSrc: string;\n  disabled: boolean;\n}\n\n\nconst ProgressContainer = styled.div``;\n\nconst NotesContainer = styled.div`\n  height: 24px;\n  margin-top: 24px;\n  position: relative;\n  color: ${COLORS.neutral_500};\n`;\n\nconst AuthorContainer = styled.div<{disabled: boolean}>`\n  margin-top: 22px;\n  display: flex;\n  flex-direction: row;\n  margin-bottom: 4px;\n  align-items: center;\n  ${props => props.disabled ? `\n    color: ${COLORS.neutral_300};\n\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ` : ''}\n`;\n\nconst Divider = styled.div`\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\n  border-top-style: solid;\n  width: 100%;\n  height: 1px;\n  margin-bottom: 9px;\n`;\n\nconst NoteLeft = styled.div`\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n  }\n`;\nconst NoteRight = styled.div`\n  position: absolute;\n  top: 0px;\n  right: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n  }\n`;\n\nconst AuthorName = styled.div`\n  flex-grow: 2;\n`;\n\nconst ButtonRowContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\n  border-top-style: solid;\n\n  button:last-child{\n    margin: 8px 0px 0px 0px;\n  }\n\n  button:not(:last-child) {\n    margin: 8px 0px 0px 0px;\n  }\n\n  svg {\n    color: ${COLORS.neutral_600};\n  }\n`;\n\nconst Container = styled.div<{interactionType: InteractionType; disabled: boolean}>`\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};\n\n  ${ButtonRowContainer} {\n    ${props => props.interactionType == InteractionType.Clickable ? \n      `cursor: ${props.disabled ? 'not-allowed' : 'auto'};` : ''}\n  }\n`;\n\nconst CardBottomSection: React.FunctionComponent<CardBottomSectionProps> = ({\n  interactionType,\n  progressLevel,\n  progressMax,\n  progressType = LinearProgressType.Line,\n  noteLeft,\n  noteLeftIcon,\n  noteRight,\n  noteRightIcon,\n  authorName,\n  actions,\n  disabled\n}: CardBottomSectionProps) => {\n\n  const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;\n  return (\n    <Container disabled={disabled} interactionType={interactionType}>\n      {haveAtLeastSomething && <Divider />}\n      {progressLevel != undefined && <ProgressContainer>\n        <LinearProgress size={Size.Small}\n                        type={progressType}\n                        variant={LinearProgressVariant.Normal}\n                        value={progressLevel}\n                        max={progressMax ?? progressLevel} />\n        </ProgressContainer>}\n\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <NotesContainer>\n        {(noteLeft || noteLeftIcon) && (\n          <NoteLeft>\n            {noteLeftIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\n          </NoteLeft>\n        )}\n        {(noteRight || noteRightIcon) && (\n          <NoteRight>\n            {noteRightIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\n          </NoteRight>\n        )}\n      </NotesContainer>}\n\n      {authorName && <AuthorContainer disabled={disabled}>\n        <AuthorName>{authorName}</AuthorName>\n        <LaerdalLogo width='80px' height='43px'  />\n      </AuthorContainer>}\n\n      {actions && <ButtonRowContainer>\n        {actions.map(x => (\n          <IconButton disabled={disabled} variant=\"secondary\" shape=\"circular\" action={(e) => {e?.stopPropagation(); x.onClick();}}>\n            {x.icon}\n          </IconButton>\n        ))}\n      </ButtonRowContainer>}\n    </Container>\n  );\n};\n\nexport default CardBottomSection;\n"],"file":"CardBottomSection.js"}

package/dist/Dropdown/BasicDropdown.cjs

@@ -141,7 +141,6 @@ var BasicDropdown = function BasicDropdown(_ref) {
       var initValue = dropdownMenuValues ? dropdownMenuValues.join(',') : initalValue ? initalValue : '';
       setInput(initValue);
       setRestartFilter(true);
-      setSelectedValues([initValue]);
     }
   }, [initalValue, dropdownMenuValues]);
   React.useEffect(function () {

package/dist/Dropdown/BasicDropdown.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Dropdown/BasicDropdown.tsx"],"names":["MAX_MENU_HEIGHT","AVG_OPTION_HEIGHT","BasicDropdown","id","list","placeholder","onSelect","setDropdownMenuValues","initalValue","disableSorting","messageOnNoResults","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","actionDisabled","pinTopItem","multiSelect","scrollable","maxHeight","disabled","locked","isButton","activeValidationMessage","autofilledMessage","size","margin","dropdownMenuValues","minWidth","React","useState","isOpen","setIsOpen","isLoading","setIsLoading","input","setInput","placeholderSearch","setPlaceholderSearch","restartFilter","setRestartFilter","focused","setFocused","selectedValues","setSelectedValues","styledFieldRef","useRef","inputRef","handleKeyPress","e","current","contains","target","keyCode","handleValueSelect","values","join","useEffect","initValue","document","addEventListener","removeEventListener","customSetIsOpen","getDisplayItems","split","map","val","trim","listDisplayLabels","filter","item","includes","value","l","displayLabel","concat","focus","stopPropagation","Size","Small","COLORS","neutral_600","onValueUpdate","items","warning_400"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAkCA,IAAMA,eAAe,GAAG,GAAxB;AACA,IAAMC,iBAAiB,GAAG,EAA1B;;AAEA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,OA6BK;AAAA,MA5BzBC,EA4ByB,QA5BzBA,EA4ByB;AAAA,MA3BzBC,IA2ByB,QA3BzBA,IA2ByB;AAAA,MA1BzBC,WA0ByB,QA1BzBA,WA0ByB;AAAA,MAzBzBC,QAyByB,QAzBzBA,QAyByB;AAAA,MAxBzBC,qBAwByB,QAxBzBA,qBAwByB;AAAA,MAvBzBC,WAuByB,QAvBzBA,WAuByB;AAAA,MAtBzBC,cAsByB,QAtBzBA,cAsByB;AAAA,MArBzBC,kBAqByB,QArBzBA,kBAqByB;AAAA,4BApBzBC,SAoByB;AAAA,MApBzBA,SAoByB,+BApBb,QAoBa;AAAA,MAnBzBC,MAmByB,QAnBzBA,MAmByB;AAAA,MAlBzBC,WAkByB,QAlBzBA,WAkByB;AAAA,MAjBzBC,aAiByB,QAjBzBA,aAiByB;AAAA,MAhBzBC,UAgByB,QAhBzBA,UAgByB;AAAA,MAfzBC,aAeyB,QAfzBA,aAeyB;AAAA,MAdzBC,cAcyB,QAdzBA,cAcyB;AAAA,MAbzBC,UAayB,QAbzBA,UAayB;AAAA,MAZzBC,WAYyB,QAZzBA,WAYyB;AAAA,6BAXzBC,UAWyB;AAAA,MAXzBA,UAWyB,gCAXZ,IAWY;AAAA,MAVzBC,SAUyB,QAVzBA,SAUyB;AAAA,MATzBC,QASyB,QATzBA,QASyB;AAAA,MARzBC,MAQyB,QARzBA,MAQyB;AAAA,MAPzBC,QAOyB,QAPzBA,QAOyB;AAAA,MANzBC,uBAMyB,QANzBA,uBAMyB;AAAA,MALzBC,iBAKyB,QALzBA,iBAKyB;AAAA,MAJzBC,IAIyB,QAJzBA,IAIyB;AAAA,yBAHzBC,MAGyB;AAAA,MAHzBA,MAGyB,4BAHhB,OAGgB;AAAA,MAFzBC,kBAEyB,QAFzBA,kBAEyB;AAAA,MADzBC,QACyB,QADzBA,QACyB;;AACzB,wBAA4BC,KAAK,CAACC,QAAN,CAAwB,KAAxB,CAA5B;AAAA;AAAA,MAAOC,MAAP;AAAA,MAAeC,SAAf;;AACA,yBAAkCH,KAAK,CAACC,QAAN,CAAwB,KAAxB,CAAlC;AAAA;AAAA,MAAOG,SAAP;AAAA,MAAkBC,YAAlB;;AACA,yBAA0BL,KAAK,CAACC,QAAN,CAAuB,EAAvB,CAA1B;AAAA;AAAA,MAAOK,KAAP;AAAA,MAAcC,QAAd;;AACA,yBAAkDP,KAAK,CAACC,QAAN,CAAuB3B,WAAW,IAAI,EAAtC,CAAlD;AAAA;AAAA,MAAOkC,iBAAP;AAAA,MAA0BC,oBAA1B;;AACA,yBAA0CT,KAAK,CAACC,QAAN,CAAwB,KAAxB,CAA1C;AAAA;AAAA,MAAOS,aAAP;AAAA,MAAsBC,gBAAtB;;AACA,0BAA8BX,KAAK,CAACC,QAAN,CAA8B,IAA9B,CAA9B;AAAA;AAAA,MAAOW,OAAP;AAAA,MAAgBC,UAAhB;;AACA,0BAA4Cb,KAAK,CAACC,QAAN,CAAyBxB,WAAW,GAAG,CAACA,WAAD,CAAH,GAAmB,EAAvD,CAA5C;AAAA;AAAA,MAAOqC,cAAP;AAAA,MAAuBC,iBAAvB;;AAEA,MAAMC,cAAc,GAAGhB,KAAK,CAACiB,MAAN,CAA6B,IAA7B,CAAvB;AACA,MAAMC,QAAQ,GAAGlB,KAAK,CAACiB,MAAN,CAA+B,IAA/B,CAAjB;AAEA;AACF;AACA;AACA;AACA;;AAEE,MAAME,cAAc,GAAG,SAAjBA,cAAiB,CAACC,CAAD,EAAY;AACjC,QAAIJ,cAAc,SAAd,IAAAA,cAAc,WAAd,IAAAA,cAAc,CAAEK,OAAhB,IAA2BL,cAAc,CAACK,OAAf,CAAuBC,QAAvB,CAAgCF,CAAC,CAACG,MAAlC,CAA/B,EAA0E;AACxE,UAAIH,CAAC,CAACI,OAAF,KAAc,EAAlB,EAAsB;AACpBX,QAAAA,UAAU,CAAC,CAAD,CAAV;AACAV,QAAAA,SAAS,CAAC,CAACD,MAAF,CAAT;AACD,OAHD,MAGO,IAAIkB,CAAC,CAACI,OAAF,KAAc,EAAlB,EAAsB;AAC3BX,QAAAA,UAAU,CAAC,CAAD,CAAV;AACAV,QAAAA,SAAS,CAAC,CAACD,MAAF,CAAT;AACD;AACF;AACF,GAVD;;AAYA,MAAMuB,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,MAAD,EAAsB;AAC9Cf,IAAAA,gBAAgB,CAAC,IAAD,CAAhB;AACAJ,IAAAA,QAAQ,CAACmB,MAAM,CAACC,IAAP,CAAY,IAAZ,CAAD,CAAR;AACApD,IAAAA,QAAQ,IAAIA,QAAQ,CAACmD,MAAD,CAApB,CAH8C,CAI9C;;AACA,QAAI5C,WAAW,IAAIM,WAAnB,EAAgC;AAEhCe,IAAAA,SAAS,CAAC,KAAD,CAAT;AACAU,IAAAA,UAAU,CAAC,IAAD,CAAV;AACD,GATD;;AAWAb,EAAAA,KAAK,CAAC4B,SAAN,CAAgB,YAAM;AACpB,QAAInD,WAAW,IAAIqB,kBAAnB,EAAuC;AACrC,UAAM+B,SAAS,GAAG/B,kBAAkB,GAAGA,kBAAkB,CAAE6B,IAApB,CAAyB,GAAzB,CAAH,GAAmClD,WAAW,GAAGA,WAAH,GAAiB,EAAnG;AACA8B,MAAAA,QAAQ,CAACsB,SAAD,CAAR;AACAlB,MAAAA,gBAAgB,CAAC,IAAD,CAAhB;AACAI,MAAAA,iBAAiB,CAAC,CAACc,SAAD,CAAD,CAAjB;AACD;AACF,GAPD,EAOG,CAACpD,WAAD,EAAcqB,kBAAd,CAPH;AASAE,EAAAA,KAAK,CAAC4B,SAAN,CAAgB,YAAM;AACpBE,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,UAA1B,EAAsCZ,cAAtC;AACA,WAAO,YAAM;AACXW,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,UAA7B,EAAyCb,cAAzC;AACD,KAFD;AAGD,GALD;AAOAnB,EAAAA,KAAK,CAAC4B,SAAN,CAAgB,YAAM;AACpBvB,IAAAA,YAAY,CAAC,KAAD,CAAZ;AACD,GAFD,EAEG,CAACC,KAAD,CAFH;;AAIA,MAAM2B,eAAe,GAAG,SAAlBA,eAAkB,CAAC/B,MAAD,EAAqB;AAC3CC,IAAAA,SAAS,CAACD,MAAD,CAAT;AACD,GAFD;;AAIA,MAAMgC,eAAe,GAAG,SAAlBA,eAAkB,GAAM;AAC5B,QAAMR,MAAM,GAAGpB,KAAK,CAAC6B,KAAN,CAAY,GAAZ,EAAiBC,GAAjB,CAAqB,UAACC,GAAD;AAAA,aAASA,GAAG,CAACC,IAAJ,EAAT;AAAA,KAArB,CAAf;AACA,QAAMC,iBAAiB,GAAGlE,IAAI,CAACmE,MAAL,CAAY,UAACC,IAAD;AAAA,aAAUf,MAAM,CAACgB,QAAP,CAAgBD,IAAI,CAACE,KAArB,CAAV;AAAA,KAAZ,EAAmDP,GAAnD,CAAuD,UAACQ,CAAD;AAAA,aAAOA,CAAC,CAACC,YAAT;AAAA,KAAvD,CAA1B;AACA,WAAON,iBAAiB,CAACZ,IAAlB,CAAuB,IAAvB,CAAP;AACD,GAJD;;AAMA,sBACE;AAAA,4BACE,sBAAC,uBAAD;AAAU,MAAA,QAAQ,EAAElC,QAAQ,IAAI,KAAhC;AAAuC,MAAA,SAAS,EAAEG,IAAI,GAAGA,IAAH,GAAU,EAAhE;AAAoE,MAAA,MAAM,EAAEJ,MAA5E;AAAoF,MAAA,QAAQ,EAAED,QAA9F;AAAwG,MAAA,MAAM,EAAEM,MAAhH;AAAwH,MAAA,QAAQ,EAAEE,QAAlI;AAAA,8BACE,sBAAC,0BAAD;AACE,QAAA,GAAG,EAAEiB,cADP;AAEE,QAAA,SAAS,EAAE,CAACd,MAAM,GAAG,WAAH,GAAiB,EAAxB,EAA4B4C,MAA5B,CAAmClD,IAAI,GAAGA,IAAH,GAAU,EAAjD,EAAqDkD,MAArD,CAA4DrD,QAAQ,GAAG,QAAH,GAAc,EAAlF,CAFb;AAGE,QAAA,OAAO,EAAE,iBAAC2B,CAAD,EAAO;AACd,cAAI,CAAC5B,MAAD,IAAW,CAACD,QAAhB,EAA0B;AAAA;;AACxBY,YAAAA,SAAS,CAAC,CAACD,MAAF,CAAT;AACA,iCAAAgB,QAAQ,CAACG,OAAT,wEAAkB0B,KAAlB;AACD;AACF,SARH;AASE,QAAA,QAAQ,EAAExD,QAAQ,IAAIC,MAAZ,GAAqB,CAAC,CAAtB,GAA0B,CATtC;AAUE,QAAA,QAAQ,EAAED,QAAQ,IAAI,KAVxB;AAWE,QAAA,MAAM,EAAEC,MAAM,IAAI,KAXpB;AAYE,QAAA,qBAAqB,EAAE,CAAC,CAACE,uBAZ3B;AAaE,QAAA,WAAW,EAAEc,iBAbf;AAcE,QAAA,aAAa,EAAE,CAACF,KAdlB;AAeE,QAAA,QAAQ,EAAEP,QAfZ;AAAA,gCAgBE,qBAAC,yBAAD;AACE,UAAA,GAAG,EAAEmB,QADP;AAEE,UAAA,IAAI,EAAC,QAFP;AAGE,UAAA,QAAQ,MAHV;AAIE,UAAA,WAAW,EAAEV,iBAJf;AAKE,UAAA,KAAK,EAAE0B,eAAe,EALxB;AAME,UAAA,SAAS,EAAEtC,IAAI,aAAMA,IAAN,cAAqB,OANtC;AAOE,UAAA,OAAO,EAAE,iBAACwB,CAAD,EAAY;AACnB,gBAAI,CAAC5B,MAAD,IAAW,CAACD,QAAhB,EAA0B;AACxB6B,cAAAA,CAAC,CAAC4B,eAAF;AACA7C,cAAAA,SAAS,CAAC,CAACD,MAAF,CAAT;AACD;AACF,WAZH;AAaE,UAAA,QAAQ,EAAEX,QAAQ,IAAIC,MAAZ,GAAqB,CAAC,CAAtB,GAA0B,CAbtC;AAcE,UAAA,QAAQ,EAAED,QAAQ,IAAI;AAdxB,UAhBF,EAgCGa,SAAS,gBAAG,qBAAC,kCAAD;AAAkB,UAAA,IAAI,EAAE6C,YAAKC,KAA7B;AAAoC,UAAA,KAAK,EAAEC,eAAOC;AAAlD,UAAH,GAAuE,IAhCnF,eAiCE;AAAK,UAAA,OAAO,EAAE;AAAA,mBAAMjD,SAAS,CAAC,CAACD,MAAF,CAAf;AAAA,WAAd;AAAwC,UAAA,SAAS,EAAE,qBAAnD;AAAA,oBACGA,MAAM,gBAAG,qBAAC,wBAAD;AAAa,YAAA,IAAI,EAAC,MAAlB;AAAyB,YAAA,SAAS,EAAEN,IAAI,GAAGA,IAAH,GAAU;AAAlD,YAAH,gBAA8D,qBAAC,0BAAD;AAAe,YAAA,IAAI,EAAC,MAApB;AAA2B,YAAA,SAAS,EAAEA,IAAI,GAAGA,IAAH,GAAU;AAApD;AADvE,UAjCF;AAAA,QADF,EAsCG,CAACJ,MAAD,IAAW,CAACD,QAAZ,iBACC,qBAAC,wBAAD;AACE,QAAA,kBAAkB,EAAE;AAClBX,UAAAA,SAAS,EAAEA,SADO;AAElBC,UAAAA,MAAM,EAAEA,MAAF,aAAEA,MAAF,cAAEA,MAAF,GAAa,YAAM,CAAE,CAFT;AAGlBC,UAAAA,WAAW,EAAEA,WAHK;AAIlBC,UAAAA,aAAa,EAAEA,aAJG;AAKlBG,UAAAA,cAAc,EAAEA,cALE;AAMlBG,UAAAA,UAAU,EAAEA,UANM;AAOlBgE,UAAAA,aAAa,EAAE5B,iBAPG;AAQlB6B,UAAAA,KAAK,EAAEjF,IARW;AASlBe,UAAAA,WAAW,EAAEA,WATK;AAUlBD,UAAAA,UAAU,EAAEA,UAVM;AAWlBG,UAAAA,SAAS,EAAEA,SAXO;AAYlBN,UAAAA,UAAU,EAAEA,UAZM;AAalBC,UAAAA,aAAa,EAAEA;AAbG,SADtB;AAgBE,QAAA,OAAO,EAAE2B,OAhBX;AAiBE,QAAA,UAAU,EAAEC,UAjBd;AAkBE,QAAA,IAAI,EAAEjB,IAAF,aAAEA,IAAF,cAAEA,IAAF,GAAUqD,YAAKC,KAlBrB;AAmBE,QAAA,MAAM,EAAE,EAnBV;AAoBE,QAAA,kBAAkB,EAAE,IApBtB;AAqBE,QAAA,MAAM,EAAEhD,MArBV;AAsBE,QAAA,SAAS,EAAE+B,eAtBb;AAuBE,QAAA,kBAAkB,EAAEtD,kBAAF,aAAEA,kBAAF,cAAEA,kBAAF,GAAwB,EAvB5C;AAwBE,QAAA,QAAQ,EAAEc,QAAQ,IAAI,KAxBxB;AAyBE,QAAA,cAAc,EAAEK,kBAAF,aAAEA,kBAAF,cAAEA,kBAAF,GAAwBgB,cAzBxC;AA0BE,QAAA,iBAAiB,EAAEtC,qBAAqB,GAAGA,qBAAH,GAA2BuC,iBA1BrE;AA2BE,QAAA,EAAE,YAAK3C,EAAL;AA3BJ,QAvCJ;AAAA,MADF,EAuEGsB,uBAAuB,iBACtB,sBAAC,uBAAD;AAAA,8BACE,qBAAC,6BAAD;AAAkB,QAAA,IAAI,EAAC,MAAvB;AAA8B,QAAA,KAAK,EAAEyD,eAAOI;AAA5C,QADF,eAEE;AAAA,kBAAO7D;AAAP,QAFF;AAAA,MAxEJ,EA6EGC,iBAAiB,iBAChB,sBAAC,0BAAD;AAAA,8BACE,qBAAC,wBAAD;AAAa,QAAA,IAAI,EAAC,MAAlB;AAAyB,QAAA,KAAK,EAAEwD,eAAOC;AAAvC,QADF,eAEE;AAAA,kBAAOzD;AAAP,QAFF;AAAA,MA9EJ;AAAA,IADF;AAsFD,CA1LD;;;AAjCEvB,EAAAA,E;AACAC,EAAAA,I;AACAO,EAAAA,S,4BAAY,Q,EAAW,U,EAAa,O;AACpCC,EAAAA,M;AACAC,EAAAA,W;AAEAE,EAAAA,U;AACAC,EAAAA,a;AACAC,EAAAA,c;AACAC,EAAAA,U;AACAC,EAAAA,W;AACAC,EAAAA,U;AACAC,EAAAA,S;AACAhB,EAAAA,W;AACAC,EAAAA,Q;AACAC,EAAAA,qB;AACAC,EAAAA,W;AACAC,EAAAA,c;AACAC,EAAAA,kB;AACAY,EAAAA,Q;AACAC,EAAAA,M;AACAC,EAAAA,Q;AACAC,EAAAA,uB;AACAC,EAAAA,iB;AAEAE,EAAAA,M;AACAC,EAAAA,kB;;eAmMa3B,a","sourcesContent":["import * as React from 'react';\nimport { COLORS } from '../styles';\nimport { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport {Dropdown, StyledField, InputField} from './CommonStyling';\nimport DropdownContent, { DropdownItem } from './DropdownContent';\nimport { AutofilledMessage, WarningMessage } from '../InputFields/styling';\nimport { Size } from '../types';\nimport {defaultOnMouseDownHandler} from '../common';\n\ninterface DropdownFilterProps {\n  id: string;\n  list: DropdownItem[];\n  itemsType?: 'normal' | 'checkbox' | 'radio';\n  action?: () => void;\n  actionLabel?: string;\n  actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;\n  actionIcon?: React.ReactNode;\n  actionLoading?: boolean;\n  actionDisabled?: boolean;\n  pinTopItem?: boolean;\n  multiSelect?: boolean;\n  scrollable?: boolean;\n  maxHeight?: string;\n  placeholder?: string;\n  onSelect?: (value: string[]) => void;\n  setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\n  initalValue?: string;\n  disableSorting?: boolean;\n  messageOnNoResults?: string;\n  disabled?: boolean;\n  locked?: boolean;\n  isButton?: boolean;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  dropdownMenuValues?: string[];\n  minWidth?: string;\n}\n\nconst MAX_MENU_HEIGHT = 240;\nconst AVG_OPTION_HEIGHT = 48;\n\nconst BasicDropdown = ({\n  id,\n  list,\n  placeholder,\n  onSelect,\n  setDropdownMenuValues,\n  initalValue,\n  disableSorting,\n  messageOnNoResults,\n  itemsType = 'normal',\n  action,\n  actionLabel,\n  actionVariant,\n  actionIcon,\n  actionLoading,\n  actionDisabled,\n  pinTopItem,\n  multiSelect,\n  scrollable = true,\n  maxHeight,\n  disabled,\n  locked,\n  isButton,\n  activeValidationMessage,\n  autofilledMessage,\n  size,\n  margin = '4px 0',\n  dropdownMenuValues,\n  minWidth,\n}: DropdownFilterProps) => {\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [isLoading, setIsLoading] = React.useState<boolean>(false);\n  const [input, setInput] = React.useState<string>('');\n  const [placeholderSearch, setPlaceholderSearch] = React.useState<string>(placeholder || '');\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>(initalValue ? [initalValue] : []);\n\n  const styledFieldRef = React.useRef<HTMLDivElement>(null);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n\n  /*\n  if (!items.includes(input)) {\n    setInput('');\n    setPlaceholderSearch(placeholder || '');\n  } */\n\n  const handleKeyPress = (e: any) => {\n    if (styledFieldRef?.current && styledFieldRef.current.contains(e.target)) {\n      if (e.keyCode === 13) {\n        setFocused(0);\n        setIsOpen(!isOpen);\n      } else if (e.keyCode === 40) {\n        setFocused(0);\n        setIsOpen(!isOpen);\n      }\n    }\n  };\n\n  const handleValueSelect = (values: string[]) => {\n    setRestartFilter(true);\n    setInput(values.join(', '));\n    onSelect && onSelect(values);\n    //don't close dropdown on item select if have custom action or multiselect\n    if (actionLabel || multiSelect) return;\n\n    setIsOpen(false);\n    setFocused(null);\n  };\n\n  React.useEffect(() => {\n    if (initalValue || dropdownMenuValues) {\n      const initValue = dropdownMenuValues ? dropdownMenuValues!.join(',') : initalValue ? initalValue : '';\n      setInput(initValue);\n      setRestartFilter(true);\n      setSelectedValues([initValue]);\n    }\n  }, [initalValue, dropdownMenuValues]);\n\n  React.useEffect(() => {\n    document.addEventListener('keypress', handleKeyPress);\n    return () => {\n      document.removeEventListener('keypress', handleKeyPress);\n    };\n  });\n\n  React.useEffect(() => {\n    setIsLoading(false);\n  }, [input]);\n\n  const customSetIsOpen = (isOpen: boolean) => {\n    setIsOpen(isOpen);\n  };\n\n  const getDisplayItems = () => {\n    const values = input.split(',').map((val) => val.trim());\n    const listDisplayLabels = list.filter((item) => values.includes(item.value)).map((l) => l.displayLabel);\n    return listDisplayLabels.join(', ');\n  };\n\n  return (\n    <>\n      <Dropdown isButton={isButton || false} className={size ? size : ''} locked={locked} disabled={disabled} margin={margin} minWidth={minWidth}>\n        <StyledField\n          ref={styledFieldRef}\n          className={(isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : '')}\n          onClick={(e) => {\n            if (!locked || !disabled) {\n              setIsOpen(!isOpen);\n              inputRef.current?.focus();\n            }\n          }}\n          tabIndex={disabled || locked ? -1 : 0}\n          disabled={disabled || false}\n          locked={locked || false}\n          showValidationMessage={!!activeValidationMessage}\n          placeholder={placeholderSearch}\n          isPlaceholder={!input}\n          minWidth={minWidth}>\n          <InputField\n            ref={inputRef}\n            type=\"search\"\n            readOnly\n            placeholder={placeholderSearch}\n            value={getDisplayItems()}\n            className={size ? `${size} value` : 'value'}\n            onClick={(e: any) => {\n              if (!locked && !disabled) {\n                e.stopPropagation();\n                setIsOpen(!isOpen);\n              }\n            }}\n            tabIndex={disabled || locked ? -1 : 0}\n            disabled={disabled || false}\n          />\n          {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} /> : null}\n          <div onClick={() => setIsOpen(!isOpen)} className={'icon dropdown-arrow'}>\n            {isOpen ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n          </div>\n        </StyledField>\n        {!locked && !disabled && (\n          <DropdownContent\n            customizationProps={{\n              itemsType: itemsType,\n              action: action ?? (() => {}),\n              actionLabel: actionLabel,\n              actionVariant: actionVariant,\n              actionDisabled: actionDisabled,\n              scrollable: scrollable,\n              onValueUpdate: handleValueSelect,\n              items: list,\n              multiSelect: multiSelect,\n              pinTopItem: pinTopItem,\n              maxHeight: maxHeight,\n              actionIcon: actionIcon,\n              actionLoading: actionLoading,\n            }}\n            focused={focused}\n            setFocused={setFocused}\n            size={size ?? Size.Small}\n            filter={''}\n            hideOnClickOutside={true}\n            isOpen={isOpen}\n            setIsOpen={customSetIsOpen}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            isButton={isButton || false}\n            selectedValues={dropdownMenuValues ?? selectedValues}\n            setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\n            id={`${id}_dropdowncontent`}\n          />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <WarningMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.warning_400} />\n          <span>{activeValidationMessage}</span>\n        </WarningMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage>\n          <Information size=\"20px\" color={COLORS.neutral_600} />\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n};\n\nexport default BasicDropdown;\n"],"file":"BasicDropdown.cjs"}
+{"version":3,"sources":["../../src/Dropdown/BasicDropdown.tsx"],"names":["MAX_MENU_HEIGHT","AVG_OPTION_HEIGHT","BasicDropdown","id","list","placeholder","onSelect","setDropdownMenuValues","initalValue","disableSorting","messageOnNoResults","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","actionDisabled","pinTopItem","multiSelect","scrollable","maxHeight","disabled","locked","isButton","activeValidationMessage","autofilledMessage","size","margin","dropdownMenuValues","minWidth","React","useState","isOpen","setIsOpen","isLoading","setIsLoading","input","setInput","placeholderSearch","setPlaceholderSearch","restartFilter","setRestartFilter","focused","setFocused","selectedValues","setSelectedValues","styledFieldRef","useRef","inputRef","handleKeyPress","e","current","contains","target","keyCode","handleValueSelect","values","join","useEffect","initValue","document","addEventListener","removeEventListener","customSetIsOpen","getDisplayItems","split","map","val","trim","listDisplayLabels","filter","item","includes","value","l","displayLabel","concat","focus","stopPropagation","Size","Small","COLORS","neutral_600","onValueUpdate","items","warning_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { COLORS } from '../styles';\nimport { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport {Dropdown, StyledField, InputField} from './CommonStyling';\nimport DropdownContent, { DropdownItem } from './DropdownContent';\nimport { AutofilledMessage, WarningMessage } from '../InputFields/styling';\nimport { Size } from '../types';\nimport {defaultOnMouseDownHandler} from '../common';\n\ninterface DropdownFilterProps {\n  id: string;\n  list: DropdownItem[];\n  itemsType?: 'normal' | 'checkbox' | 'radio';\n  action?: () => void;\n  actionLabel?: string;\n  actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;\n  actionIcon?: React.ReactNode;\n  actionLoading?: boolean;\n  actionDisabled?: boolean;\n  pinTopItem?: boolean;\n  multiSelect?: boolean;\n  scrollable?: boolean;\n  maxHeight?: string;\n  placeholder?: string;\n  onSelect?: (value: string[]) => void;\n  setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\n  initalValue?: string;\n  disableSorting?: boolean;\n  messageOnNoResults?: string;\n  disabled?: boolean;\n  locked?: boolean;\n  isButton?: boolean;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  dropdownMenuValues?: string[];\n  minWidth?: string;\n}\n\nconst MAX_MENU_HEIGHT = 240;\nconst AVG_OPTION_HEIGHT = 48;\n\nconst BasicDropdown = ({\n  id,\n  list,\n  placeholder,\n  onSelect,\n  setDropdownMenuValues,\n  initalValue,\n  disableSorting,\n  messageOnNoResults,\n  itemsType = 'normal',\n  action,\n  actionLabel,\n  actionVariant,\n  actionIcon,\n  actionLoading,\n  actionDisabled,\n  pinTopItem,\n  multiSelect,\n  scrollable = true,\n  maxHeight,\n  disabled,\n  locked,\n  isButton,\n  activeValidationMessage,\n  autofilledMessage,\n  size,\n  margin = '4px 0',\n  dropdownMenuValues,\n  minWidth,\n}: DropdownFilterProps) => {\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [isLoading, setIsLoading] = React.useState<boolean>(false);\n  const [input, setInput] = React.useState<string>('');\n  const [placeholderSearch, setPlaceholderSearch] = React.useState<string>(placeholder || '');\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>(initalValue ? [initalValue] : []);\n\n  const styledFieldRef = React.useRef<HTMLDivElement>(null);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n\n  /*\n  if (!items.includes(input)) {\n    setInput('');\n    setPlaceholderSearch(placeholder || '');\n  } */\n\n  const handleKeyPress = (e: any) => {\n    if (styledFieldRef?.current && styledFieldRef.current.contains(e.target)) {\n      if (e.keyCode === 13) {\n        setFocused(0);\n        setIsOpen(!isOpen);\n      } else if (e.keyCode === 40) {\n        setFocused(0);\n        setIsOpen(!isOpen);\n      }\n    }\n  };\n\n  const handleValueSelect = (values: string[]) => {\n    setRestartFilter(true);\n    setInput(values.join(', '));\n    onSelect && onSelect(values);\n    //don't close dropdown on item select if have custom action or multiselect\n    if (actionLabel || multiSelect) return;\n\n    setIsOpen(false);\n    setFocused(null);\n  };\n\n  React.useEffect(() => {\n    if (initalValue || dropdownMenuValues) {\n      const initValue = dropdownMenuValues ? dropdownMenuValues!.join(',') : initalValue ? initalValue : '';\n      setInput(initValue);\n      setRestartFilter(true);\n    }\n  }, [initalValue, dropdownMenuValues]);\n\n  React.useEffect(() => {\n    document.addEventListener('keypress', handleKeyPress);\n    return () => {\n      document.removeEventListener('keypress', handleKeyPress);\n    };\n  });\n\n  React.useEffect(() => {\n    setIsLoading(false);\n  }, [input]);\n\n  const customSetIsOpen = (isOpen: boolean) => {\n    setIsOpen(isOpen);\n  };\n\n  const getDisplayItems = () => {\n    const values = input.split(',').map((val) => val.trim());\n    const listDisplayLabels = list.filter((item) => values.includes(item.value)).map((l) => l.displayLabel);\n    return listDisplayLabels.join(', ');\n  };\n\n  return (\n    <>\n      <Dropdown isButton={isButton || false} className={size ? size : ''} locked={locked} disabled={disabled} margin={margin} minWidth={minWidth}>\n        <StyledField\n          ref={styledFieldRef}\n          className={(isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : '')}\n          onClick={(e) => {\n            if (!locked || !disabled) {\n              setIsOpen(!isOpen);\n              inputRef.current?.focus();\n            }\n          }}\n          tabIndex={disabled || locked ? -1 : 0}\n          disabled={disabled || false}\n          locked={locked || false}\n          showValidationMessage={!!activeValidationMessage}\n          placeholder={placeholderSearch}\n          isPlaceholder={!input}\n          minWidth={minWidth}>\n          <InputField\n            ref={inputRef}\n            type=\"search\"\n            readOnly\n            placeholder={placeholderSearch}\n            value={getDisplayItems()}\n            className={size ? `${size} value` : 'value'}\n            onClick={(e: any) => {\n              if (!locked && !disabled) {\n                e.stopPropagation();\n                setIsOpen(!isOpen);\n              }\n            }}\n            tabIndex={disabled || locked ? -1 : 0}\n            disabled={disabled || false}\n          />\n          {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} /> : null}\n          <div onClick={() => setIsOpen(!isOpen)} className={'icon dropdown-arrow'}>\n            {isOpen ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n          </div>\n        </StyledField>\n        {!locked && !disabled && (\n          <DropdownContent\n            customizationProps={{\n              itemsType: itemsType,\n              action: action ?? (() => {}),\n              actionLabel: actionLabel,\n              actionVariant: actionVariant,\n              actionDisabled: actionDisabled,\n              scrollable: scrollable,\n              onValueUpdate: handleValueSelect,\n              items: list,\n              multiSelect: multiSelect,\n              pinTopItem: pinTopItem,\n              maxHeight: maxHeight,\n              actionIcon: actionIcon,\n              actionLoading: actionLoading,\n            }}\n            focused={focused}\n            setFocused={setFocused}\n            size={size ?? Size.Small}\n            filter={''}\n            hideOnClickOutside={true}\n            isOpen={isOpen}\n            setIsOpen={customSetIsOpen}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            isButton={isButton || false}\n            selectedValues={dropdownMenuValues ?? selectedValues}\n            setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\n            id={`${id}_dropdowncontent`}\n          />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <WarningMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.warning_400} />\n          <span>{activeValidationMessage}</span>\n        </WarningMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage>\n          <Information size=\"20px\" color={COLORS.neutral_600} />\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n};\n\nexport default BasicDropdown;\n"],"file":"BasicDropdown.cjs"}

package/dist/Dropdown/BasicDropdown.js

@@ -117,7 +117,6 @@ var BasicDropdown = function BasicDropdown(_ref) {
       var initValue = dropdownMenuValues ? dropdownMenuValues.join(',') : initalValue ? initalValue : '';
       setInput(initValue);
       setRestartFilter(true);
-      setSelectedValues([initValue]);
     }
   }, [initalValue, dropdownMenuValues]);
   React.useEffect(function () {

package/dist/Dropdown/BasicDropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Dropdown/BasicDropdown.tsx"],"names":["React","COLORS","ArrowDropDown","ArrowDropUp","Information","TechnicalWarning","LoadingIndicator","Dropdown","StyledField","InputField","DropdownContent","AutofilledMessage","WarningMessage","Size","MAX_MENU_HEIGHT","AVG_OPTION_HEIGHT","BasicDropdown","id","list","placeholder","onSelect","setDropdownMenuValues","initalValue","disableSorting","messageOnNoResults","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","actionDisabled","pinTopItem","multiSelect","scrollable","maxHeight","disabled","locked","isButton","activeValidationMessage","autofilledMessage","size","margin","dropdownMenuValues","minWidth","useState","isOpen","setIsOpen","isLoading","setIsLoading","input","setInput","placeholderSearch","setPlaceholderSearch","restartFilter","setRestartFilter","focused","setFocused","selectedValues","setSelectedValues","styledFieldRef","useRef","inputRef","handleKeyPress","e","current","contains","target","keyCode","handleValueSelect","values","join","useEffect","initValue","document","addEventListener","removeEventListener","customSetIsOpen","getDisplayItems","split","map","val","trim","listDisplayLabels","filter","item","includes","value","l","displayLabel","concat","focus","stopPropagation","Small","neutral_600","onValueUpdate","items","warning_400"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,aAAT,EAAwBC,WAAxB,EAAqCC,WAArC,EAAkDC,gBAAlD,QAA0E,kCAA1E;AACA,SAASC,gBAAT,QAAiC,qBAAjC;AACA,SAAQC,QAAR,EAAkBC,WAAlB,EAA+BC,UAA/B,QAAgD,iBAAhD;AACA,OAAOC,eAAP,MAA8C,mBAA9C;AACA,SAASC,iBAAT,EAA4BC,cAA5B,QAAkD,wBAAlD;AACA,SAASC,IAAT,QAAqB,UAArB;;;;AAkCA,IAAMC,eAAe,GAAG,GAAxB;AACA,IAAMC,iBAAiB,GAAG,EAA1B;;AAEA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,OA6BK;AAAA,MA5BzBC,EA4ByB,QA5BzBA,EA4ByB;AAAA,MA3BzBC,IA2ByB,QA3BzBA,IA2ByB;AAAA,MA1BzBC,WA0ByB,QA1BzBA,WA0ByB;AAAA,MAzBzBC,QAyByB,QAzBzBA,QAyByB;AAAA,MAxBzBC,qBAwByB,QAxBzBA,qBAwByB;AAAA,MAvBzBC,WAuByB,QAvBzBA,WAuByB;AAAA,MAtBzBC,cAsByB,QAtBzBA,cAsByB;AAAA,MArBzBC,kBAqByB,QArBzBA,kBAqByB;AAAA,4BApBzBC,SAoByB;AAAA,MApBzBA,SAoByB,+BApBb,QAoBa;AAAA,MAnBzBC,MAmByB,QAnBzBA,MAmByB;AAAA,MAlBzBC,WAkByB,QAlBzBA,WAkByB;AAAA,MAjBzBC,aAiByB,QAjBzBA,aAiByB;AAAA,MAhBzBC,UAgByB,QAhBzBA,UAgByB;AAAA,MAfzBC,aAeyB,QAfzBA,aAeyB;AAAA,MAdzBC,cAcyB,QAdzBA,cAcyB;AAAA,MAbzBC,UAayB,QAbzBA,UAayB;AAAA,MAZzBC,WAYyB,QAZzBA,WAYyB;AAAA,6BAXzBC,UAWyB;AAAA,MAXzBA,UAWyB,gCAXZ,IAWY;AAAA,MAVzBC,SAUyB,QAVzBA,SAUyB;AAAA,MATzBC,QASyB,QATzBA,QASyB;AAAA,MARzBC,MAQyB,QARzBA,MAQyB;AAAA,MAPzBC,QAOyB,QAPzBA,QAOyB;AAAA,MANzBC,uBAMyB,QANzBA,uBAMyB;AAAA,MALzBC,iBAKyB,QALzBA,iBAKyB;AAAA,MAJzBC,IAIyB,QAJzBA,IAIyB;AAAA,yBAHzBC,MAGyB;AAAA,MAHzBA,MAGyB,4BAHhB,OAGgB;AAAA,MAFzBC,kBAEyB,QAFzBA,kBAEyB;AAAA,MADzBC,QACyB,QADzBA,QACyB;;AACzB,wBAA4B5C,KAAK,CAAC6C,QAAN,CAAwB,KAAxB,CAA5B;AAAA;AAAA,MAAOC,MAAP;AAAA,MAAeC,SAAf;;AACA,yBAAkC/C,KAAK,CAAC6C,QAAN,CAAwB,KAAxB,CAAlC;AAAA;AAAA,MAAOG,SAAP;AAAA,MAAkBC,YAAlB;;AACA,yBAA0BjD,KAAK,CAAC6C,QAAN,CAAuB,EAAvB,CAA1B;AAAA;AAAA,MAAOK,KAAP;AAAA,MAAcC,QAAd;;AACA,yBAAkDnD,KAAK,CAAC6C,QAAN,CAAuB1B,WAAW,IAAI,EAAtC,CAAlD;AAAA;AAAA,MAAOiC,iBAAP;AAAA,MAA0BC,oBAA1B;;AACA,yBAA0CrD,KAAK,CAAC6C,QAAN,CAAwB,KAAxB,CAA1C;AAAA;AAAA,MAAOS,aAAP;AAAA,MAAsBC,gBAAtB;;AACA,0BAA8BvD,KAAK,CAAC6C,QAAN,CAA8B,IAA9B,CAA9B;AAAA;AAAA,MAAOW,OAAP;AAAA,MAAgBC,UAAhB;;AACA,0BAA4CzD,KAAK,CAAC6C,QAAN,CAAyBvB,WAAW,GAAG,CAACA,WAAD,CAAH,GAAmB,EAAvD,CAA5C;AAAA;AAAA,MAAOoC,cAAP;AAAA,MAAuBC,iBAAvB;;AAEA,MAAMC,cAAc,GAAG5D,KAAK,CAAC6D,MAAN,CAA6B,IAA7B,CAAvB;AACA,MAAMC,QAAQ,GAAG9D,KAAK,CAAC6D,MAAN,CAA+B,IAA/B,CAAjB;AAEA;AACF;AACA;AACA;AACA;;AAEE,MAAME,cAAc,GAAG,SAAjBA,cAAiB,CAACC,CAAD,EAAY;AACjC,QAAIJ,cAAc,SAAd,IAAAA,cAAc,WAAd,IAAAA,cAAc,CAAEK,OAAhB,IAA2BL,cAAc,CAACK,OAAf,CAAuBC,QAAvB,CAAgCF,CAAC,CAACG,MAAlC,CAA/B,EAA0E;AACxE,UAAIH,CAAC,CAACI,OAAF,KAAc,EAAlB,EAAsB;AACpBX,QAAAA,UAAU,CAAC,CAAD,CAAV;AACAV,QAAAA,SAAS,CAAC,CAACD,MAAF,CAAT;AACD,OAHD,MAGO,IAAIkB,CAAC,CAACI,OAAF,KAAc,EAAlB,EAAsB;AAC3BX,QAAAA,UAAU,CAAC,CAAD,CAAV;AACAV,QAAAA,SAAS,CAAC,CAACD,MAAF,CAAT;AACD;AACF;AACF,GAVD;;AAYA,MAAMuB,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,MAAD,EAAsB;AAC9Cf,IAAAA,gBAAgB,CAAC,IAAD,CAAhB;AACAJ,IAAAA,QAAQ,CAACmB,MAAM,CAACC,IAAP,CAAY,IAAZ,CAAD,CAAR;AACAnD,IAAAA,QAAQ,IAAIA,QAAQ,CAACkD,MAAD,CAApB,CAH8C,CAI9C;;AACA,QAAI3C,WAAW,IAAIM,WAAnB,EAAgC;AAEhCc,IAAAA,SAAS,CAAC,KAAD,CAAT;AACAU,IAAAA,UAAU,CAAC,IAAD,CAAV;AACD,GATD;;AAWAzD,EAAAA,KAAK,CAACwE,SAAN,CAAgB,YAAM;AACpB,QAAIlD,WAAW,IAAIqB,kBAAnB,EAAuC;AACrC,UAAM8B,SAAS,GAAG9B,kBAAkB,GAAGA,kBAAkB,CAAE4B,IAApB,CAAyB,GAAzB,CAAH,GAAmCjD,WAAW,GAAGA,WAAH,GAAiB,EAAnG;AACA6B,MAAAA,QAAQ,CAACsB,SAAD,CAAR;AACAlB,MAAAA,gBAAgB,CAAC,IAAD,CAAhB;AACAI,MAAAA,iBAAiB,CAAC,CAACc,SAAD,CAAD,CAAjB;AACD;AACF,GAPD,EAOG,CAACnD,WAAD,EAAcqB,kBAAd,CAPH;AASA3C,EAAAA,KAAK,CAACwE,SAAN,CAAgB,YAAM;AACpBE,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,UAA1B,EAAsCZ,cAAtC;AACA,WAAO,YAAM;AACXW,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,UAA7B,EAAyCb,cAAzC;AACD,KAFD;AAGD,GALD;AAOA/D,EAAAA,KAAK,CAACwE,SAAN,CAAgB,YAAM;AACpBvB,IAAAA,YAAY,CAAC,KAAD,CAAZ;AACD,GAFD,EAEG,CAACC,KAAD,CAFH;;AAIA,MAAM2B,eAAe,GAAG,SAAlBA,eAAkB,CAAC/B,MAAD,EAAqB;AAC3CC,IAAAA,SAAS,CAACD,MAAD,CAAT;AACD,GAFD;;AAIA,MAAMgC,eAAe,GAAG,SAAlBA,eAAkB,GAAM;AAC5B,QAAMR,MAAM,GAAGpB,KAAK,CAAC6B,KAAN,CAAY,GAAZ,EAAiBC,GAAjB,CAAqB,UAACC,GAAD;AAAA,aAASA,GAAG,CAACC,IAAJ,EAAT;AAAA,KAArB,CAAf;AACA,QAAMC,iBAAiB,GAAGjE,IAAI,CAACkE,MAAL,CAAY,UAACC,IAAD;AAAA,aAAUf,MAAM,CAACgB,QAAP,CAAgBD,IAAI,CAACE,KAArB,CAAV;AAAA,KAAZ,EAAmDP,GAAnD,CAAuD,UAACQ,CAAD;AAAA,aAAOA,CAAC,CAACC,YAAT;AAAA,KAAvD,CAA1B;AACA,WAAON,iBAAiB,CAACZ,IAAlB,CAAuB,IAAvB,CAAP;AACD,GAJD;;AAMA,sBACE;AAAA,4BACE,MAAC,QAAD;AAAU,MAAA,QAAQ,EAAEjC,QAAQ,IAAI,KAAhC;AAAuC,MAAA,SAAS,EAAEG,IAAI,GAAGA,IAAH,GAAU,EAAhE;AAAoE,MAAA,MAAM,EAAEJ,MAA5E;AAAoF,MAAA,QAAQ,EAAED,QAA9F;AAAwG,MAAA,MAAM,EAAEM,MAAhH;AAAwH,MAAA,QAAQ,EAAEE,QAAlI;AAAA,8BACE,MAAC,WAAD;AACE,QAAA,GAAG,EAAEgB,cADP;AAEE,QAAA,SAAS,EAAE,CAACd,MAAM,GAAG,WAAH,GAAiB,EAAxB,EAA4B4C,MAA5B,CAAmCjD,IAAI,GAAGA,IAAH,GAAU,EAAjD,EAAqDiD,MAArD,CAA4DpD,QAAQ,GAAG,QAAH,GAAc,EAAlF,CAFb;AAGE,QAAA,OAAO,EAAE,iBAAC0B,CAAD,EAAO;AACd,cAAI,CAAC3B,MAAD,IAAW,CAACD,QAAhB,EAA0B;AAAA;;AACxBW,YAAAA,SAAS,CAAC,CAACD,MAAF,CAAT;AACA,iCAAAgB,QAAQ,CAACG,OAAT,wEAAkB0B,KAAlB;AACD;AACF,SARH;AASE,QAAA,QAAQ,EAAEvD,QAAQ,IAAIC,MAAZ,GAAqB,CAAC,CAAtB,GAA0B,CATtC;AAUE,QAAA,QAAQ,EAAED,QAAQ,IAAI,KAVxB;AAWE,QAAA,MAAM,EAAEC,MAAM,IAAI,KAXpB;AAYE,QAAA,qBAAqB,EAAE,CAAC,CAACE,uBAZ3B;AAaE,QAAA,WAAW,EAAEa,iBAbf;AAcE,QAAA,aAAa,EAAE,CAACF,KAdlB;AAeE,QAAA,QAAQ,EAAEN,QAfZ;AAAA,gCAgBE,KAAC,UAAD;AACE,UAAA,GAAG,EAAEkB,QADP;AAEE,UAAA,IAAI,EAAC,QAFP;AAGE,UAAA,QAAQ,MAHV;AAIE,UAAA,WAAW,EAAEV,iBAJf;AAKE,UAAA,KAAK,EAAE0B,eAAe,EALxB;AAME,UAAA,SAAS,EAAErC,IAAI,aAAMA,IAAN,cAAqB,OANtC;AAOE,UAAA,OAAO,EAAE,iBAACuB,CAAD,EAAY;AACnB,gBAAI,CAAC3B,MAAD,IAAW,CAACD,QAAhB,EAA0B;AACxB4B,cAAAA,CAAC,CAAC4B,eAAF;AACA7C,cAAAA,SAAS,CAAC,CAACD,MAAF,CAAT;AACD;AACF,WAZH;AAaE,UAAA,QAAQ,EAAEV,QAAQ,IAAIC,MAAZ,GAAqB,CAAC,CAAtB,GAA0B,CAbtC;AAcE,UAAA,QAAQ,EAAED,QAAQ,IAAI;AAdxB,UAhBF,EAgCGY,SAAS,gBAAG,KAAC,gBAAD;AAAkB,UAAA,IAAI,EAAEnC,IAAI,CAACgF,KAA7B;AAAoC,UAAA,KAAK,EAAE5F,MAAM,CAAC6F;AAAlD,UAAH,GAAuE,IAhCnF,eAiCE;AAAK,UAAA,OAAO,EAAE;AAAA,mBAAM/C,SAAS,CAAC,CAACD,MAAF,CAAf;AAAA,WAAd;AAAwC,UAAA,SAAS,EAAE,qBAAnD;AAAA,oBACGA,MAAM,gBAAG,KAAC,WAAD;AAAa,YAAA,IAAI,EAAC,MAAlB;AAAyB,YAAA,SAAS,EAAEL,IAAI,GAAGA,IAAH,GAAU;AAAlD,YAAH,gBAA8D,KAAC,aAAD;AAAe,YAAA,IAAI,EAAC,MAApB;AAA2B,YAAA,SAAS,EAAEA,IAAI,GAAGA,IAAH,GAAU;AAApD;AADvE,UAjCF;AAAA,QADF,EAsCG,CAACJ,MAAD,IAAW,CAACD,QAAZ,iBACC,KAAC,eAAD;AACE,QAAA,kBAAkB,EAAE;AAClBX,UAAAA,SAAS,EAAEA,SADO;AAElBC,UAAAA,MAAM,EAAEA,MAAF,aAAEA,MAAF,cAAEA,MAAF,GAAa,YAAM,CAAE,CAFT;AAGlBC,UAAAA,WAAW,EAAEA,WAHK;AAIlBC,UAAAA,aAAa,EAAEA,aAJG;AAKlBG,UAAAA,cAAc,EAAEA,cALE;AAMlBG,UAAAA,UAAU,EAAEA,UANM;AAOlB6D,UAAAA,aAAa,EAAE1B,iBAPG;AAQlB2B,UAAAA,KAAK,EAAE9E,IARW;AASlBe,UAAAA,WAAW,EAAEA,WATK;AAUlBD,UAAAA,UAAU,EAAEA,UAVM;AAWlBG,UAAAA,SAAS,EAAEA,SAXO;AAYlBN,UAAAA,UAAU,EAAEA,UAZM;AAalBC,UAAAA,aAAa,EAAEA;AAbG,SADtB;AAgBE,QAAA,OAAO,EAAE0B,OAhBX;AAiBE,QAAA,UAAU,EAAEC,UAjBd;AAkBE,QAAA,IAAI,EAAEhB,IAAF,aAAEA,IAAF,cAAEA,IAAF,GAAU5B,IAAI,CAACgF,KAlBrB;AAmBE,QAAA,MAAM,EAAE,EAnBV;AAoBE,QAAA,kBAAkB,EAAE,IApBtB;AAqBE,QAAA,MAAM,EAAE/C,MArBV;AAsBE,QAAA,SAAS,EAAE+B,eAtBb;AAuBE,QAAA,kBAAkB,EAAErD,kBAAF,aAAEA,kBAAF,cAAEA,kBAAF,GAAwB,EAvB5C;AAwBE,QAAA,QAAQ,EAAEc,QAAQ,IAAI,KAxBxB;AAyBE,QAAA,cAAc,EAAEK,kBAAF,aAAEA,kBAAF,cAAEA,kBAAF,GAAwBe,cAzBxC;AA0BE,QAAA,iBAAiB,EAAErC,qBAAqB,GAAGA,qBAAH,GAA2BsC,iBA1BrE;AA2BE,QAAA,EAAE,YAAK1C,EAAL;AA3BJ,QAvCJ;AAAA,MADF,EAuEGsB,uBAAuB,iBACtB,MAAC,cAAD;AAAA,8BACE,KAAC,gBAAD;AAAkB,QAAA,IAAI,EAAC,MAAvB;AAA8B,QAAA,KAAK,EAAEtC,MAAM,CAACgG;AAA5C,QADF,eAEE;AAAA,kBAAO1D;AAAP,QAFF;AAAA,MAxEJ,EA6EGC,iBAAiB,iBAChB,MAAC,iBAAD;AAAA,8BACE,KAAC,WAAD;AAAa,QAAA,IAAI,EAAC,MAAlB;AAAyB,QAAA,KAAK,EAAEvC,MAAM,CAAC6F;AAAvC,QADF,eAEE;AAAA,kBAAOtD;AAAP,QAFF;AAAA,MA9EJ;AAAA,IADF;AAsFD,CA1LD;;;AAjCEvB,EAAAA,E;AACAC,EAAAA,I;AACAO,EAAAA,S,aAAY,Q,EAAW,U,EAAa,O;AACpCC,EAAAA,M;AACAC,EAAAA,W;AAEAE,EAAAA,U;AACAC,EAAAA,a;AACAC,EAAAA,c;AACAC,EAAAA,U;AACAC,EAAAA,W;AACAC,EAAAA,U;AACAC,EAAAA,S;AACAhB,EAAAA,W;AACAC,EAAAA,Q;AACAC,EAAAA,qB;AACAC,EAAAA,W;AACAC,EAAAA,c;AACAC,EAAAA,kB;AACAY,EAAAA,Q;AACAC,EAAAA,M;AACAC,EAAAA,Q;AACAC,EAAAA,uB;AACAC,EAAAA,iB;AAEAE,EAAAA,M;AACAC,EAAAA,kB;;AAmMF,eAAe3B,aAAf","sourcesContent":["import * as React from 'react';\nimport { COLORS } from '../styles';\nimport { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport {Dropdown, StyledField, InputField} from './CommonStyling';\nimport DropdownContent, { DropdownItem } from './DropdownContent';\nimport { AutofilledMessage, WarningMessage } from '../InputFields/styling';\nimport { Size } from '../types';\nimport {defaultOnMouseDownHandler} from '../common';\n\ninterface DropdownFilterProps {\n  id: string;\n  list: DropdownItem[];\n  itemsType?: 'normal' | 'checkbox' | 'radio';\n  action?: () => void;\n  actionLabel?: string;\n  actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;\n  actionIcon?: React.ReactNode;\n  actionLoading?: boolean;\n  actionDisabled?: boolean;\n  pinTopItem?: boolean;\n  multiSelect?: boolean;\n  scrollable?: boolean;\n  maxHeight?: string;\n  placeholder?: string;\n  onSelect?: (value: string[]) => void;\n  setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\n  initalValue?: string;\n  disableSorting?: boolean;\n  messageOnNoResults?: string;\n  disabled?: boolean;\n  locked?: boolean;\n  isButton?: boolean;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  dropdownMenuValues?: string[];\n  minWidth?: string;\n}\n\nconst MAX_MENU_HEIGHT = 240;\nconst AVG_OPTION_HEIGHT = 48;\n\nconst BasicDropdown = ({\n  id,\n  list,\n  placeholder,\n  onSelect,\n  setDropdownMenuValues,\n  initalValue,\n  disableSorting,\n  messageOnNoResults,\n  itemsType = 'normal',\n  action,\n  actionLabel,\n  actionVariant,\n  actionIcon,\n  actionLoading,\n  actionDisabled,\n  pinTopItem,\n  multiSelect,\n  scrollable = true,\n  maxHeight,\n  disabled,\n  locked,\n  isButton,\n  activeValidationMessage,\n  autofilledMessage,\n  size,\n  margin = '4px 0',\n  dropdownMenuValues,\n  minWidth,\n}: DropdownFilterProps) => {\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [isLoading, setIsLoading] = React.useState<boolean>(false);\n  const [input, setInput] = React.useState<string>('');\n  const [placeholderSearch, setPlaceholderSearch] = React.useState<string>(placeholder || '');\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>(initalValue ? [initalValue] : []);\n\n  const styledFieldRef = React.useRef<HTMLDivElement>(null);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n\n  /*\n  if (!items.includes(input)) {\n    setInput('');\n    setPlaceholderSearch(placeholder || '');\n  } */\n\n  const handleKeyPress = (e: any) => {\n    if (styledFieldRef?.current && styledFieldRef.current.contains(e.target)) {\n      if (e.keyCode === 13) {\n        setFocused(0);\n        setIsOpen(!isOpen);\n      } else if (e.keyCode === 40) {\n        setFocused(0);\n        setIsOpen(!isOpen);\n      }\n    }\n  };\n\n  const handleValueSelect = (values: string[]) => {\n    setRestartFilter(true);\n    setInput(values.join(', '));\n    onSelect && onSelect(values);\n    //don't close dropdown on item select if have custom action or multiselect\n    if (actionLabel || multiSelect) return;\n\n    setIsOpen(false);\n    setFocused(null);\n  };\n\n  React.useEffect(() => {\n    if (initalValue || dropdownMenuValues) {\n      const initValue = dropdownMenuValues ? dropdownMenuValues!.join(',') : initalValue ? initalValue : '';\n      setInput(initValue);\n      setRestartFilter(true);\n      setSelectedValues([initValue]);\n    }\n  }, [initalValue, dropdownMenuValues]);\n\n  React.useEffect(() => {\n    document.addEventListener('keypress', handleKeyPress);\n    return () => {\n      document.removeEventListener('keypress', handleKeyPress);\n    };\n  });\n\n  React.useEffect(() => {\n    setIsLoading(false);\n  }, [input]);\n\n  const customSetIsOpen = (isOpen: boolean) => {\n    setIsOpen(isOpen);\n  };\n\n  const getDisplayItems = () => {\n    const values = input.split(',').map((val) => val.trim());\n    const listDisplayLabels = list.filter((item) => values.includes(item.value)).map((l) => l.displayLabel);\n    return listDisplayLabels.join(', ');\n  };\n\n  return (\n    <>\n      <Dropdown isButton={isButton || false} className={size ? size : ''} locked={locked} disabled={disabled} margin={margin} minWidth={minWidth}>\n        <StyledField\n          ref={styledFieldRef}\n          className={(isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : '')}\n          onClick={(e) => {\n            if (!locked || !disabled) {\n              setIsOpen(!isOpen);\n              inputRef.current?.focus();\n            }\n          }}\n          tabIndex={disabled || locked ? -1 : 0}\n          disabled={disabled || false}\n          locked={locked || false}\n          showValidationMessage={!!activeValidationMessage}\n          placeholder={placeholderSearch}\n          isPlaceholder={!input}\n          minWidth={minWidth}>\n          <InputField\n            ref={inputRef}\n            type=\"search\"\n            readOnly\n            placeholder={placeholderSearch}\n            value={getDisplayItems()}\n            className={size ? `${size} value` : 'value'}\n            onClick={(e: any) => {\n              if (!locked && !disabled) {\n                e.stopPropagation();\n                setIsOpen(!isOpen);\n              }\n            }}\n            tabIndex={disabled || locked ? -1 : 0}\n            disabled={disabled || false}\n          />\n          {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} /> : null}\n          <div onClick={() => setIsOpen(!isOpen)} className={'icon dropdown-arrow'}>\n            {isOpen ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n          </div>\n        </StyledField>\n        {!locked && !disabled && (\n          <DropdownContent\n            customizationProps={{\n              itemsType: itemsType,\n              action: action ?? (() => {}),\n              actionLabel: actionLabel,\n              actionVariant: actionVariant,\n              actionDisabled: actionDisabled,\n              scrollable: scrollable,\n              onValueUpdate: handleValueSelect,\n              items: list,\n              multiSelect: multiSelect,\n              pinTopItem: pinTopItem,\n              maxHeight: maxHeight,\n              actionIcon: actionIcon,\n              actionLoading: actionLoading,\n            }}\n            focused={focused}\n            setFocused={setFocused}\n            size={size ?? Size.Small}\n            filter={''}\n            hideOnClickOutside={true}\n            isOpen={isOpen}\n            setIsOpen={customSetIsOpen}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            isButton={isButton || false}\n            selectedValues={dropdownMenuValues ?? selectedValues}\n            setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\n            id={`${id}_dropdowncontent`}\n          />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <WarningMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.warning_400} />\n          <span>{activeValidationMessage}</span>\n        </WarningMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage>\n          <Information size=\"20px\" color={COLORS.neutral_600} />\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n};\n\nexport default BasicDropdown;\n"],"file":"BasicDropdown.js"}
+{"version":3,"sources":["../../src/Dropdown/BasicDropdown.tsx"],"names":["React","COLORS","ArrowDropDown","ArrowDropUp","Information","TechnicalWarning","LoadingIndicator","Dropdown","StyledField","InputField","DropdownContent","AutofilledMessage","WarningMessage","Size","MAX_MENU_HEIGHT","AVG_OPTION_HEIGHT","BasicDropdown","id","list","placeholder","onSelect","setDropdownMenuValues","initalValue","disableSorting","messageOnNoResults","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","actionDisabled","pinTopItem","multiSelect","scrollable","maxHeight","disabled","locked","isButton","activeValidationMessage","autofilledMessage","size","margin","dropdownMenuValues","minWidth","useState","isOpen","setIsOpen","isLoading","setIsLoading","input","setInput","placeholderSearch","setPlaceholderSearch","restartFilter","setRestartFilter","focused","setFocused","selectedValues","setSelectedValues","styledFieldRef","useRef","inputRef","handleKeyPress","e","current","contains","target","keyCode","handleValueSelect","values","join","useEffect","initValue","document","addEventListener","removeEventListener","customSetIsOpen","getDisplayItems","split","map","val","trim","listDisplayLabels","filter","item","includes","value","l","displayLabel","concat","focus","stopPropagation","Small","neutral_600","onValueUpdate","items","warning_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { COLORS } from '../styles';\nimport { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport {Dropdown, StyledField, InputField} from './CommonStyling';\nimport DropdownContent, { DropdownItem } from './DropdownContent';\nimport { AutofilledMessage, WarningMessage } from '../InputFields/styling';\nimport { Size } from '../types';\nimport {defaultOnMouseDownHandler} from '../common';\n\ninterface DropdownFilterProps {\n  id: string;\n  list: DropdownItem[];\n  itemsType?: 'normal' | 'checkbox' | 'radio';\n  action?: () => void;\n  actionLabel?: string;\n  actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;\n  actionIcon?: React.ReactNode;\n  actionLoading?: boolean;\n  actionDisabled?: boolean;\n  pinTopItem?: boolean;\n  multiSelect?: boolean;\n  scrollable?: boolean;\n  maxHeight?: string;\n  placeholder?: string;\n  onSelect?: (value: string[]) => void;\n  setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\n  initalValue?: string;\n  disableSorting?: boolean;\n  messageOnNoResults?: string;\n  disabled?: boolean;\n  locked?: boolean;\n  isButton?: boolean;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  dropdownMenuValues?: string[];\n  minWidth?: string;\n}\n\nconst MAX_MENU_HEIGHT = 240;\nconst AVG_OPTION_HEIGHT = 48;\n\nconst BasicDropdown = ({\n  id,\n  list,\n  placeholder,\n  onSelect,\n  setDropdownMenuValues,\n  initalValue,\n  disableSorting,\n  messageOnNoResults,\n  itemsType = 'normal',\n  action,\n  actionLabel,\n  actionVariant,\n  actionIcon,\n  actionLoading,\n  actionDisabled,\n  pinTopItem,\n  multiSelect,\n  scrollable = true,\n  maxHeight,\n  disabled,\n  locked,\n  isButton,\n  activeValidationMessage,\n  autofilledMessage,\n  size,\n  margin = '4px 0',\n  dropdownMenuValues,\n  minWidth,\n}: DropdownFilterProps) => {\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [isLoading, setIsLoading] = React.useState<boolean>(false);\n  const [input, setInput] = React.useState<string>('');\n  const [placeholderSearch, setPlaceholderSearch] = React.useState<string>(placeholder || '');\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>(initalValue ? [initalValue] : []);\n\n  const styledFieldRef = React.useRef<HTMLDivElement>(null);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n\n  /*\n  if (!items.includes(input)) {\n    setInput('');\n    setPlaceholderSearch(placeholder || '');\n  } */\n\n  const handleKeyPress = (e: any) => {\n    if (styledFieldRef?.current && styledFieldRef.current.contains(e.target)) {\n      if (e.keyCode === 13) {\n        setFocused(0);\n        setIsOpen(!isOpen);\n      } else if (e.keyCode === 40) {\n        setFocused(0);\n        setIsOpen(!isOpen);\n      }\n    }\n  };\n\n  const handleValueSelect = (values: string[]) => {\n    setRestartFilter(true);\n    setInput(values.join(', '));\n    onSelect && onSelect(values);\n    //don't close dropdown on item select if have custom action or multiselect\n    if (actionLabel || multiSelect) return;\n\n    setIsOpen(false);\n    setFocused(null);\n  };\n\n  React.useEffect(() => {\n    if (initalValue || dropdownMenuValues) {\n      const initValue = dropdownMenuValues ? dropdownMenuValues!.join(',') : initalValue ? initalValue : '';\n      setInput(initValue);\n      setRestartFilter(true);\n    }\n  }, [initalValue, dropdownMenuValues]);\n\n  React.useEffect(() => {\n    document.addEventListener('keypress', handleKeyPress);\n    return () => {\n      document.removeEventListener('keypress', handleKeyPress);\n    };\n  });\n\n  React.useEffect(() => {\n    setIsLoading(false);\n  }, [input]);\n\n  const customSetIsOpen = (isOpen: boolean) => {\n    setIsOpen(isOpen);\n  };\n\n  const getDisplayItems = () => {\n    const values = input.split(',').map((val) => val.trim());\n    const listDisplayLabels = list.filter((item) => values.includes(item.value)).map((l) => l.displayLabel);\n    return listDisplayLabels.join(', ');\n  };\n\n  return (\n    <>\n      <Dropdown isButton={isButton || false} className={size ? size : ''} locked={locked} disabled={disabled} margin={margin} minWidth={minWidth}>\n        <StyledField\n          ref={styledFieldRef}\n          className={(isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : '')}\n          onClick={(e) => {\n            if (!locked || !disabled) {\n              setIsOpen(!isOpen);\n              inputRef.current?.focus();\n            }\n          }}\n          tabIndex={disabled || locked ? -1 : 0}\n          disabled={disabled || false}\n          locked={locked || false}\n          showValidationMessage={!!activeValidationMessage}\n          placeholder={placeholderSearch}\n          isPlaceholder={!input}\n          minWidth={minWidth}>\n          <InputField\n            ref={inputRef}\n            type=\"search\"\n            readOnly\n            placeholder={placeholderSearch}\n            value={getDisplayItems()}\n            className={size ? `${size} value` : 'value'}\n            onClick={(e: any) => {\n              if (!locked && !disabled) {\n                e.stopPropagation();\n                setIsOpen(!isOpen);\n              }\n            }}\n            tabIndex={disabled || locked ? -1 : 0}\n            disabled={disabled || false}\n          />\n          {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} /> : null}\n          <div onClick={() => setIsOpen(!isOpen)} className={'icon dropdown-arrow'}>\n            {isOpen ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n          </div>\n        </StyledField>\n        {!locked && !disabled && (\n          <DropdownContent\n            customizationProps={{\n              itemsType: itemsType,\n              action: action ?? (() => {}),\n              actionLabel: actionLabel,\n              actionVariant: actionVariant,\n              actionDisabled: actionDisabled,\n              scrollable: scrollable,\n              onValueUpdate: handleValueSelect,\n              items: list,\n              multiSelect: multiSelect,\n              pinTopItem: pinTopItem,\n              maxHeight: maxHeight,\n              actionIcon: actionIcon,\n              actionLoading: actionLoading,\n            }}\n            focused={focused}\n            setFocused={setFocused}\n            size={size ?? Size.Small}\n            filter={''}\n            hideOnClickOutside={true}\n            isOpen={isOpen}\n            setIsOpen={customSetIsOpen}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            isButton={isButton || false}\n            selectedValues={dropdownMenuValues ?? selectedValues}\n            setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\n            id={`${id}_dropdowncontent`}\n          />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <WarningMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.warning_400} />\n          <span>{activeValidationMessage}</span>\n        </WarningMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage>\n          <Information size=\"20px\" color={COLORS.neutral_600} />\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n};\n\nexport default BasicDropdown;\n"],"file":"BasicDropdown.js"}

package/dist/{LinearProgression/LinearProgression.cjs → LinearProgress/LinearProgress.cjs}

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.LinearProgressionVariant = exports.LinearProgressionType = exports.LineFill = exports.Line = exports.Dot = exports.Bar = void 0;
+exports.default = exports.LinearProgressVariant = exports.LinearProgressType = exports.LineFill = exports.Line = exports.Dot = exports.Bar = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -21,7 +21,7 @@ var _styles = require("../styles");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
 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);
 
@@ -39,32 +39,37 @@ var Line = _styledComponents.default.div(_templateObject4 || (_templateObject4 =
 
 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 Label = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), _styles.COLORS.black);
 
-var LinearProgressionType;
-exports.LinearProgressionType = LinearProgressionType;
+var Content = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  height: 16px;\n"])));
 
-(function (LinearProgressionType) {
-  LinearProgressionType["Dots"] = "dots";
-  LinearProgressionType["Line"] = "line";
-  LinearProgressionType["Bars"] = "bars";
-})(LinearProgressionType || (exports.LinearProgressionType = LinearProgressionType = {}));
+var Wrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  &.inverted {\n    ", " {\n      color: ", ";\n    }\n  }\n\n  &.small {\n    ", " {\n      ", "\n    }\n\n    ", " {\n      gap: 4px;\n\n      ", ":first-of-type {\n        border-top-left-radius: 6px;\n        border-bottom-left-radius: 6px;\n      }\n\n      ", ":last-of-type {\n        border-top-right-radius: 6px;\n        border-bottom-right-radius: 6px;\n      }\n    }\n  }\n\n  &.medium {\n    ", " {\n      ", "\n    }\n\n    ", " {\n      gap: 6px;\n\n      ", ":first-of-type {\n        border-top-left-radius: 8px;\n        border-bottom-left-radius: 8px;\n      }\n\n      ", ":last-of-type {\n        border-top-right-radius: 8px;\n        border-bottom-right-radius: 8px;\n      }\n    }\n  }\n\n  &.large {\n    ", " {\n      ", "\n    }\n\n    ", " {\n      gap: 8px;\n\n      ", ":first-of-type {\n        border-top-left-radius: 12px;\n        border-bottom-left-radius: 12px;\n      }\n\n      ", ":last-of-type {\n        border-top-right-radius: 12px;\n        border-bottom-right-radius: 12px;\n      }\n    }\n  }\n"])), Label, _styles.COLORS.white, Label, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), Content, Bar, Bar, Label, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), Content, Bar, Bar, Label, (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null), Content, Bar, Bar);
 
-var LinearProgressionVariant;
-exports.LinearProgressionVariant = LinearProgressionVariant;
+var LinearProgressType;
+exports.LinearProgressType = LinearProgressType;
 
-(function (LinearProgressionVariant) {
-  LinearProgressionVariant["Normal"] = "normal";
-  LinearProgressionVariant["Inverted"] = "inverted";
-})(LinearProgressionVariant || (exports.LinearProgressionVariant = LinearProgressionVariant = {}));
+(function (LinearProgressType) {
+  LinearProgressType["Dots"] = "dots";
+  LinearProgressType["Line"] = "line";
+  LinearProgressType["Bars"] = "bars";
+})(LinearProgressType || (exports.LinearProgressType = LinearProgressType = {}));
 
-var LinearProgression = function LinearProgression(_ref) {
+var LinearProgressVariant;
+exports.LinearProgressVariant = LinearProgressVariant;
+
+(function (LinearProgressVariant) {
+  LinearProgressVariant["Normal"] = "normal";
+  LinearProgressVariant["Inverted"] = "inverted";
+})(LinearProgressVariant || (exports.LinearProgressVariant = LinearProgressVariant = {}));
+
+var LinearProgress = function LinearProgress(_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,
+      type = _ref$type === void 0 ? LinearProgressType.Line : _ref$type,
       _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? LinearProgressionVariant.Normal : _ref$variant,
+      variant = _ref$variant === void 0 ? LinearProgressVariant.Normal : _ref$variant,
+      label = _ref.label,
       value = _ref.value,
       max = _ref.max;
 
@@ -103,30 +108,35 @@ var LinearProgression = function LinearProgression(_ref) {
 
   var render = function render() {
     switch (type) {
-      case LinearProgressionType.Bars:
+      case LinearProgressType.Bars:
         return renderBars();
 
-      case LinearProgressionType.Dots:
+      case LinearProgressType.Dots:
         return renderDots();
 
-      case LinearProgressionType.Line:
+      case LinearProgressType.Line:
       default:
         return renderLine();
     }
   };
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
     className: "".concat(size, " ").concat(type, " ").concat(variant),
-    children: render()
+    children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {
+      children: label
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Content, {
+      children: render()
+    })]
   });
 };
 
-LinearProgression.propTypes = {
+LinearProgress.propTypes = {
   type: _propTypes.default.oneOf(["dots", "line", "bars"]),
   variant: _propTypes.default.oneOf(["normal", "inverted"]),
+  label: _propTypes.default.string,
   value: _propTypes.default.number.isRequired,
   max: _propTypes.default.number.isRequired
 };
-var _default = LinearProgression;
+var _default = LinearProgress;
 exports.default = _default;
-//# sourceMappingURL=LinearProgression.cjs.map
+//# sourceMappingURL=LinearProgress.cjs.map

package/dist/LinearProgress/LinearProgress.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/LinearProgress/LinearProgress.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","Label","black","Content","Wrapper","ComponentTextStyle","Regular","LinearProgressType","LinearProgressVariant","LinearProgress","size","Size","Medium","type","variant","Normal","label","value","max","renderBars","Array","from","keys","map","i","Math","ceil","renderDots","renderLine","width","render","Bars","Dots"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {COLORS, 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    ${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\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 {\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                                                                            }) => {\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}`}>\n      {label && <Label>{label}</Label>}\n      <Content>\n        {render()}\n      </Content>\n    </Wrapper>\n  )\n};\n\nexport default LinearProgress;\n"],"file":"LinearProgress.cjs"}

package/dist/{LinearProgression/LinearProgression.d.ts → LinearProgress/LinearProgress.d.ts}

@@ -4,21 +4,22 @@ export declare const Bar: import("styled-components").StyledComponent<"div", any
 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 {
+export declare enum LinearProgressType {
     Dots = "dots",
     Line = "line",
     Bars = "bars"
 }
-export declare enum LinearProgressionVariant {
+export declare enum LinearProgressVariant {
     Normal = "normal",
     Inverted = "inverted"
 }
-export interface LinearProgressionProps {
+export interface LinearProgressProps {
     size?: Size.Small | Size.Medium | Size.Large;
-    type?: LinearProgressionType;
-    variant?: LinearProgressionVariant;
+    type?: LinearProgressType;
+    variant?: LinearProgressVariant;
+    label?: string;
     value: number;
     max: number;
 }
-declare const LinearProgression: React.FunctionComponent<LinearProgressionProps>;
-export default LinearProgression;
+declare const LinearProgress: React.FunctionComponent<LinearProgressProps>;
+export default LinearProgress;

package/dist/{LinearProgression/LinearProgression.js → LinearProgress/LinearProgress.js}

@@ -1,41 +1,45 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
 import React from 'react';
 import { Size } from '../types';
 import styled from 'styled-components';
-import { COLORS } from '../styles';
+import { COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } 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;
+var Label = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), COLORS.black);
+var Content = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  height: 16px;\n"])));
+var Wrapper = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  &.inverted {\n    ", " {\n      color: ", ";\n    }\n  }\n\n  &.small {\n    ", " {\n      ", "\n    }\n\n    ", " {\n      gap: 4px;\n\n      ", ":first-of-type {\n        border-top-left-radius: 6px;\n        border-bottom-left-radius: 6px;\n      }\n\n      ", ":last-of-type {\n        border-top-right-radius: 6px;\n        border-bottom-right-radius: 6px;\n      }\n    }\n  }\n\n  &.medium {\n    ", " {\n      ", "\n    }\n\n    ", " {\n      gap: 6px;\n\n      ", ":first-of-type {\n        border-top-left-radius: 8px;\n        border-bottom-left-radius: 8px;\n      }\n\n      ", ":last-of-type {\n        border-top-right-radius: 8px;\n        border-bottom-right-radius: 8px;\n      }\n    }\n  }\n\n  &.large {\n    ", " {\n      ", "\n    }\n\n    ", " {\n      gap: 8px;\n\n      ", ":first-of-type {\n        border-top-left-radius: 12px;\n        border-bottom-left-radius: 12px;\n      }\n\n      ", ":last-of-type {\n        border-top-right-radius: 12px;\n        border-bottom-right-radius: 12px;\n      }\n    }\n  }\n"])), Label, COLORS.white, Label, ComponentSStyling(ComponentTextStyle.Regular, null), Content, Bar, Bar, Label, ComponentMStyling(ComponentTextStyle.Regular, null), Content, Bar, Bar, Label, ComponentLStyling(ComponentTextStyle.Regular, null), Content, Bar, Bar);
+export var LinearProgressType;
 
-(function (LinearProgressionType) {
-  LinearProgressionType["Dots"] = "dots";
-  LinearProgressionType["Line"] = "line";
-  LinearProgressionType["Bars"] = "bars";
-})(LinearProgressionType || (LinearProgressionType = {}));
+(function (LinearProgressType) {
+  LinearProgressType["Dots"] = "dots";
+  LinearProgressType["Line"] = "line";
+  LinearProgressType["Bars"] = "bars";
+})(LinearProgressType || (LinearProgressType = {}));
 
-export var LinearProgressionVariant;
+export var LinearProgressVariant;
 
-(function (LinearProgressionVariant) {
-  LinearProgressionVariant["Normal"] = "normal";
-  LinearProgressionVariant["Inverted"] = "inverted";
-})(LinearProgressionVariant || (LinearProgressionVariant = {}));
+(function (LinearProgressVariant) {
+  LinearProgressVariant["Normal"] = "normal";
+  LinearProgressVariant["Inverted"] = "inverted";
+})(LinearProgressVariant || (LinearProgressVariant = {}));
 
-var LinearProgression = function LinearProgression(_ref) {
+var LinearProgress = function LinearProgress(_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,
+      type = _ref$type === void 0 ? LinearProgressType.Line : _ref$type,
       _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? LinearProgressionVariant.Normal : _ref$variant,
+      variant = _ref$variant === void 0 ? LinearProgressVariant.Normal : _ref$variant,
+      label = _ref.label,
       value = _ref.value,
       max = _ref.max;
 
@@ -74,29 +78,34 @@ var LinearProgression = function LinearProgression(_ref) {
 
   var render = function render() {
     switch (type) {
-      case LinearProgressionType.Bars:
+      case LinearProgressType.Bars:
         return renderBars();
 
-      case LinearProgressionType.Dots:
+      case LinearProgressType.Dots:
         return renderDots();
 
-      case LinearProgressionType.Line:
+      case LinearProgressType.Line:
       default:
         return renderLine();
     }
   };
 
-  return /*#__PURE__*/_jsx(Wrapper, {
+  return /*#__PURE__*/_jsxs(Wrapper, {
     className: "".concat(size, " ").concat(type, " ").concat(variant),
-    children: render()
+    children: [label && /*#__PURE__*/_jsx(Label, {
+      children: label
+    }), /*#__PURE__*/_jsx(Content, {
+      children: render()
+    })]
   });
 };
 
-LinearProgression.propTypes = {
+LinearProgress.propTypes = {
   type: _pt.oneOf(["dots", "line", "bars"]),
   variant: _pt.oneOf(["normal", "inverted"]),
+  label: _pt.string,
   value: _pt.number.isRequired,
   max: _pt.number.isRequired
 };
-export default LinearProgression;
-//# sourceMappingURL=LinearProgression.js.map
+export default LinearProgress;
+//# sourceMappingURL=LinearProgress.js.map

package/dist/LinearProgress/LinearProgress.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/LinearProgress/LinearProgress.tsx"],"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","renderBars","Array","from","keys","map","i","Math","ceil","renderDots","renderLine","width","render","Bars","Dots"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {COLORS, 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    ${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\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 {\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                                                                            }) => {\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}`}>\n      {label && <Label>{label}</Label>}\n      <Content>\n        {render()}\n      </Content>\n    </Wrapper>\n  )\n};\n\nexport default LinearProgress;\n"],"file":"LinearProgress.js"}

package/dist/{LinearProgression → LinearProgress}/index.cjs

@@ -5,26 +5,26 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "LinearProgression", {
+Object.defineProperty(exports, "LinearProgress", {
   enumerable: true,
   get: function get() {
-    return _LinearProgression.default;
+    return _LinearProgress.default;
   }
 });
-Object.defineProperty(exports, "LinearProgressionType", {
+Object.defineProperty(exports, "LinearProgressType", {
   enumerable: true,
   get: function get() {
-    return _LinearProgression.LinearProgressionType;
+    return _LinearProgress.LinearProgressType;
   }
 });
-Object.defineProperty(exports, "LinearProgressionVariant", {
+Object.defineProperty(exports, "LinearProgressVariant", {
   enumerable: true,
   get: function get() {
-    return _LinearProgression.LinearProgressionVariant;
+    return _LinearProgress.LinearProgressVariant;
   }
 });
 
-var _LinearProgression = _interopRequireWildcard(require("./LinearProgression"));
+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); }
 

package/dist/LinearProgress/index.cjs.map

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

package/dist/LinearProgress/index.d.ts

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

package/dist/LinearProgress/index.js

@@ -0,0 +1,4 @@
+import LinearProgress, { LinearProgressType, LinearProgressVariant } from './LinearProgress';
+export { LinearProgressType, LinearProgressVariant };
+export { LinearProgress };
+//# sourceMappingURL=index.js.map

package/dist/LinearProgress/index.js.map

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

package/dist/SegmentControl/SegmentControl.cjs

@@ -33,7 +33,7 @@ var SegmentControlItemBackground = _styledComponents.default.div(_templateObject
 
 exports.SegmentControlItemBackground = SegmentControlItemBackground;
 
-var SegmentControlItemWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  cursor: pointer;\n  min-height: 48px;\n\n  &:focus {\n    z-index: ", ";\n    outline: none;\n\n    ", " {\n      background-color: ", ";\n      color: ", ";\n      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n    }\n  }\n\n  &:hover {\n    z-index: ", ";\n\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &:active {\n    z-index: ", ";\n\n    ", " {\n      background-color: ", ";\n      color: ", ";\n      box-shadow: none;\n    }\n  }\n\n  &.disabled {\n    pointer-events: none;\n    cursor: not-allowed;\n\n    ", " {\n      background-color: transparent;\n      color: ", ";\n    }\n  }\n\n  &.selected {\n    cursor: default;\n    pointer-events: none;\n\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.selected.disabled {\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), _styles.Z_INDEXES.focus, SegmentControlItemContent, _styles.COLORS.primary_100, _styles.COLORS.primary_700, _styles.Z_INDEXES.hover, SegmentControlItemContent, _styles.COLORS.primary_100, _styles.COLORS.primary_700, _styles.Z_INDEXES.active, SegmentControlItemContent, _styles.COLORS.primary_200, _styles.COLORS.primary_800, SegmentControlItemContent, _styles.COLORS.neutral_300, SegmentControlItemContent, _styles.COLORS.primary_500, _styles.COLORS.white, SegmentControlItemContent, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300);
+var SegmentControlItemWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  cursor: pointer;\n  min-height: 48px;\n\n  &:focus {\n    z-index: ", ";\n    outline: none;\n\n    ", " {\n      background-color: ", ";\n      color: ", ";\n      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n    }\n  }\n\n  &:hover {\n    z-index: ", ";\n\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &:active {\n    z-index: ", ";\n\n    ", " {\n      background-color: ", ";\n      color: ", ";\n      box-shadow: none;\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    ", " {\n      background-color: transparent;\n      color: ", ";\n    }\n  }\n\n  &.selected {\n    cursor: default;\n    pointer-events: none;\n\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.selected.disabled {\n    cursor: not-allowed;\n    pointer-events: unset;\n    \n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), _styles.Z_INDEXES.focus, SegmentControlItemContent, _styles.COLORS.primary_100, _styles.COLORS.primary_700, _styles.Z_INDEXES.hover, SegmentControlItemContent, _styles.COLORS.primary_100, _styles.COLORS.primary_700, _styles.Z_INDEXES.active, SegmentControlItemContent, _styles.COLORS.primary_200, _styles.COLORS.primary_800, SegmentControlItemContent, _styles.COLORS.neutral_300, SegmentControlItemContent, _styles.COLORS.primary_500, _styles.COLORS.white, SegmentControlItemContent, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300);
 
 exports.SegmentControlItemWrapper = SegmentControlItemWrapper;
 

package/dist/SegmentControl/SegmentControl.cjs.map

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

package/dist/SegmentControl/SegmentControl.js

@@ -11,7 +11,7 @@ import { defaultOnMouseDownHandler } from '../common';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var SegmentControlItemContent = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  border-radius: 8px;\n  padding: 0 16px;\n\n  background-color: transparent;\n  color: ", ";\n"])), COLORS.neutral_600);
 export var SegmentControlItemBackground = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  background-color: ", ";\n  padding: 4px 0px;\n"])), COLORS.neutral_20);
-export var SegmentControlItemWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  cursor: pointer;\n  min-height: 48px;\n\n  &:focus {\n    z-index: ", ";\n    outline: none;\n\n    ", " {\n      background-color: ", ";\n      color: ", ";\n      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n    }\n  }\n\n  &:hover {\n    z-index: ", ";\n\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &:active {\n    z-index: ", ";\n\n    ", " {\n      background-color: ", ";\n      color: ", ";\n      box-shadow: none;\n    }\n  }\n\n  &.disabled {\n    pointer-events: none;\n    cursor: not-allowed;\n\n    ", " {\n      background-color: transparent;\n      color: ", ";\n    }\n  }\n\n  &.selected {\n    cursor: default;\n    pointer-events: none;\n\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.selected.disabled {\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), Z_INDEXES.focus, SegmentControlItemContent, COLORS.primary_100, COLORS.primary_700, Z_INDEXES.hover, SegmentControlItemContent, COLORS.primary_100, COLORS.primary_700, Z_INDEXES.active, SegmentControlItemContent, COLORS.primary_200, COLORS.primary_800, SegmentControlItemContent, COLORS.neutral_300, SegmentControlItemContent, COLORS.primary_500, COLORS.white, SegmentControlItemContent, COLORS.neutral_100, COLORS.neutral_300);
+export var SegmentControlItemWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  cursor: pointer;\n  min-height: 48px;\n\n  &:focus {\n    z-index: ", ";\n    outline: none;\n\n    ", " {\n      background-color: ", ";\n      color: ", ";\n      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n    }\n  }\n\n  &:hover {\n    z-index: ", ";\n\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &:active {\n    z-index: ", ";\n\n    ", " {\n      background-color: ", ";\n      color: ", ";\n      box-shadow: none;\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    ", " {\n      background-color: transparent;\n      color: ", ";\n    }\n  }\n\n  &.selected {\n    cursor: default;\n    pointer-events: none;\n\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.selected.disabled {\n    cursor: not-allowed;\n    pointer-events: unset;\n    \n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), Z_INDEXES.focus, SegmentControlItemContent, COLORS.primary_100, COLORS.primary_700, Z_INDEXES.hover, SegmentControlItemContent, COLORS.primary_100, COLORS.primary_700, Z_INDEXES.active, SegmentControlItemContent, COLORS.primary_200, COLORS.primary_800, SegmentControlItemContent, COLORS.neutral_300, SegmentControlItemContent, COLORS.primary_500, COLORS.white, SegmentControlItemContent, COLORS.neutral_100, COLORS.neutral_300);
 export var SegmentControlWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  ", ":first-of-type {\n    ", " {\n      border-bottom-left-radius: 12px;\n      border-top-left-radius: 12px;\n      padding-left: 4px;\n    }\n  }\n\n  ", ":last-of-type {\n    ", " {\n      border-bottom-right-radius: 12px;\n      border-top-right-radius: 12px;\n      padding-right: 4px;\n    }\n  }\n\n\n  &.small {\n    ", " {\n      ", "\n      min-height: 32px;\n    }\n  }\n\n  &.medium {\n    ", " {\n      ", "\n      min-height: 40px;\n    }\n  }\n"])), SegmentControlItemWrapper, SegmentControlItemBackground, SegmentControlItemWrapper, SegmentControlItemBackground, SegmentControlItemContent, ComponentSStyling(ComponentTextStyle.Bold, null), SegmentControlItemContent, ComponentMStyling(ComponentTextStyle.Bold, null));
 
 var SegmentControl = function SegmentControl(_ref) {

package/dist/SegmentControl/SegmentControl.js.map

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

package/dist/index.cjs

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

package/dist/index.cjs.map

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

package/dist/index.d.ts

@@ -30,7 +30,7 @@ export * from './Accordion';
 export * from './Tooltips';
 export * from './common';
 export * from './QuizButton';
-export * from './LinearProgression';
+export * from './LinearProgress';
 export * from './SegmentControl';
 export * from './Card';
 export * from './Tag';

package/dist/index.js

@@ -30,7 +30,7 @@ export * from './Accordion';
 export * from './Tooltips';
 export * from './common';
 export * from './QuizButton';
-export * from './LinearProgression';
+export * from './LinearProgress';
 export * from './SegmentControl';
 export * from './Card';
 export * from './Tag';

package/dist/index.js.map

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

package/package.json

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

package/dist/LinearProgression/LinearProgression.cjs.map

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

package/dist/LinearProgression/LinearProgression.js.map

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

package/dist/LinearProgression/index.cjs.map

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

package/dist/LinearProgression/index.d.ts

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

package/dist/LinearProgression/index.js

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

package/dist/LinearProgression/index.js.map

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