@laerdal/life-react-components 3.4.2 → 3.5.0

package/dist/Layouts/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["styled","BREAKPOINTS","GRID","GAP","SMALL","MEDIUM","LARGE","GUTTER","PageWidth","div","props","unsetMargin","useMaxWidth","maxWidth","Columns","section","gap","columns","printColumns"],"sources":["../../src/Layouts/index.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport {BREAKPOINTS} from '../styles';\n\nconst GRID = {\n  GAP: {\n    SMALL: '16px',\n    MEDIUM: '24px',\n    LARGE: '32px',\n  },\n  GUTTER: {\n    SMALL: '16px 16px 32px',\n    MEDIUM: '24px 32px 64px',\n    LARGE: '32px 64px 128px',\n  },\n};\n\nexport const PageWidth = styled.div<{ useMaxWidth?: boolean; maxWidth?: number; unsetMargin?: boolean; }>`\n  display: block;\n  margin: ${GRID.GUTTER.SMALL};\n  ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin: ${GRID.GUTTER.MEDIUM};\n    ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    margin: ${GRID.GUTTER.LARGE};\n    ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    max-width: ${(props) => (\n            props.useMaxWidth\n                    ? (props.maxWidth\n                            ? 'min(100% - 128px,' + props.maxWidth + 'px)'\n                            : 'calc(100% - 128px)')\n                    : 'calc(1600px - 128px)')};\n\n    margin: 32px auto 128px;\n    ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\n  }\n`;\n\nexport const Columns = styled.section<{ gap?: string; columns?: string; printColumns?: string }>`\n  width: 100%;\n  display: grid;\n  grid-gap: ${(props) => props.gap || GRID.GAP.SMALL};\n  word-break: break-word; /* Prevent long words from breaking the layout – consider making this rule global */\n\n  ${BREAKPOINTS.MEDIUM} {\n    grid-template-columns: ${(props) => props.columns};\n    -ms-grid-columns: ${(props) => props.columns};\n    grid-gap: ${(props) => props.gap || GRID.GAP.MEDIUM};\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    grid-gap: ${(props) => props.gap || GRID.GAP.LARGE};\n  }\n\n  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n    display: -ms-grid;\n\n    > *:not(:first-child) {\n      margin-left: ${GRID.GAP.MEDIUM};\n    }\n  }\n\n  @media print {\n    grid-gap: 0;\n    grid-template-columns: ${(props) => props.printColumns || 'none'};\n  }\n`;\n"],"mappings":";;AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,SAAQC,WAAW,QAAO,WAAW;AAErC,IAAMC,IAAI,GAAG;EACXC,GAAG,EAAE;IACHC,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdC,KAAK,EAAE;EACT,CAAC;EACDC,MAAM,EAAE;IACNH,KAAK,EAAE,gBAAgB;IACvBC,MAAM,EAAE,gBAAgB;IACxBC,KAAK,EAAE;EACT;AACF,CAAC;AAED,OAAO,IAAME,SAAS,GAAGR,MAAM,CAACS,GAAG,iSAEvBP,IAAI,CAACK,MAAM,CAACH,KAAK,EACzB,UAAAM,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAEhEV,WAAW,CAACI,MAAM,EACRH,IAAI,CAACK,MAAM,CAACF,MAAM,EAC1B,UAAAK,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAGlEV,WAAW,CAACK,KAAK,EACPJ,IAAI,CAACK,MAAM,CAACD,KAAK,EACzB,UAAAI,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAGlEV,WAAW,CAACK,KAAK,EACJ,UAACI,KAAK;EAAA,OACXA,KAAK,CAACE,WAAW,GACNF,KAAK,CAACG,QAAQ,GACP,mBAAmB,GAAGH,KAAK,CAACG,QAAQ,GAAG,KAAK,GAC5C,oBAAoB,GAC5B,sBAAsB;AAAA,CAAC,EAGvC,UAAAH,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,EAErE;AAED,OAAO,IAAMG,OAAO,GAAGd,MAAM,CAACe,OAAO,snBAGvB,UAACL,KAAK;EAAA,OAAKA,KAAK,CAACM,GAAG,IAAId,IAAI,CAACC,GAAG,CAACC,KAAK;AAAA,GAGhDH,WAAW,CAACI,MAAM,EACO,UAACK,KAAK;EAAA,OAAKA,KAAK,CAACO,OAAO;AAAA,GAC7B,UAACP,KAAK;EAAA,OAAKA,KAAK,CAACO,OAAO;AAAA,GAChC,UAACP,KAAK;EAAA,OAAKA,KAAK,CAACM,GAAG,IAAId,IAAI,CAACC,GAAG,CAACE,MAAM;AAAA,GAGnDJ,WAAW,CAACK,KAAK,EACL,UAACI,KAAK;EAAA,OAAKA,KAAK,CAACM,GAAG,IAAId,IAAI,CAACC,GAAG,CAACG,KAAK;AAAA,GAOjCJ,IAAI,CAACC,GAAG,CAACE,MAAM,EAMP,UAACK,KAAK;EAAA,OAAKA,KAAK,CAACQ,YAAY,IAAI,MAAM;AAAA,EAEnE"}
+{"version":3,"file":"index.js","names":["styled","BREAKPOINTS","GRID","GAP","SMALL","MEDIUM","LARGE","GUTTER","PageWidth","div","props","unsetMargin","useMaxWidth","maxWidth","Columns","section","gap","columns","printColumns"],"sources":["../../src/Layouts/index.ts"],"sourcesContent":["import styled from 'styled-components';\r\n\r\nimport {BREAKPOINTS} from '../styles';\r\n\r\nconst GRID = {\r\n  GAP: {\r\n    SMALL: '16px',\r\n    MEDIUM: '24px',\r\n    LARGE: '32px',\r\n  },\r\n  GUTTER: {\r\n    SMALL: '16px 16px 32px',\r\n    MEDIUM: '24px 32px 64px',\r\n    LARGE: '32px 64px 128px',\r\n  },\r\n};\r\n\r\nexport const PageWidth = styled.div<{ useMaxWidth?: boolean; maxWidth?: number; unsetMargin?: boolean; }>`\r\n  display: block;\r\n  margin: ${GRID.GUTTER.SMALL};\r\n  ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    margin: ${GRID.GUTTER.MEDIUM};\r\n    ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\r\n  }\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    margin: ${GRID.GUTTER.LARGE};\r\n    ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\r\n  }\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    max-width: ${(props) => (\r\n            props.useMaxWidth\r\n                    ? (props.maxWidth\r\n                            ? 'min(100% - 128px,' + props.maxWidth + 'px)'\r\n                            : 'calc(100% - 128px)')\r\n                    : 'calc(1600px - 128px)')};\r\n\r\n    margin: 32px auto 128px;\r\n    ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\r\n  }\r\n`;\r\n\r\nexport const Columns = styled.section<{ gap?: string; columns?: string; printColumns?: string }>`\r\n  width: 100%;\r\n  display: grid;\r\n  grid-gap: ${(props) => props.gap || GRID.GAP.SMALL};\r\n  word-break: break-word; /* Prevent long words from breaking the layout – consider making this rule global */\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    grid-template-columns: ${(props) => props.columns};\r\n    -ms-grid-columns: ${(props) => props.columns};\r\n    grid-gap: ${(props) => props.gap || GRID.GAP.MEDIUM};\r\n  }\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    grid-gap: ${(props) => props.gap || GRID.GAP.LARGE};\r\n  }\r\n\r\n  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\r\n    display: -ms-grid;\r\n\r\n    > *:not(:first-child) {\r\n      margin-left: ${GRID.GAP.MEDIUM};\r\n    }\r\n  }\r\n\r\n  @media print {\r\n    grid-gap: 0;\r\n    grid-template-columns: ${(props) => props.printColumns || 'none'};\r\n  }\r\n`;\r\n"],"mappings":";;AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,SAAQC,WAAW,QAAO,WAAW;AAErC,IAAMC,IAAI,GAAG;EACXC,GAAG,EAAE;IACHC,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdC,KAAK,EAAE;EACT,CAAC;EACDC,MAAM,EAAE;IACNH,KAAK,EAAE,gBAAgB;IACvBC,MAAM,EAAE,gBAAgB;IACxBC,KAAK,EAAE;EACT;AACF,CAAC;AAED,OAAO,IAAME,SAAS,GAAGR,MAAM,CAACS,GAAG,iSAEvBP,IAAI,CAACK,MAAM,CAACH,KAAK,EACzB,UAAAM,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAEhEV,WAAW,CAACI,MAAM,EACRH,IAAI,CAACK,MAAM,CAACF,MAAM,EAC1B,UAAAK,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAGlEV,WAAW,CAACK,KAAK,EACPJ,IAAI,CAACK,MAAM,CAACD,KAAK,EACzB,UAAAI,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAGlEV,WAAW,CAACK,KAAK,EACJ,UAACI,KAAK;EAAA,OACXA,KAAK,CAACE,WAAW,GACNF,KAAK,CAACG,QAAQ,GACP,mBAAmB,GAAGH,KAAK,CAACG,QAAQ,GAAG,KAAK,GAC5C,oBAAoB,GAC5B,sBAAsB;AAAA,CAAC,EAGvC,UAAAH,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,EAErE;AAED,OAAO,IAAMG,OAAO,GAAGd,MAAM,CAACe,OAAO,snBAGvB,UAACL,KAAK;EAAA,OAAKA,KAAK,CAACM,GAAG,IAAId,IAAI,CAACC,GAAG,CAACC,KAAK;AAAA,GAGhDH,WAAW,CAACI,MAAM,EACO,UAACK,KAAK;EAAA,OAAKA,KAAK,CAACO,OAAO;AAAA,GAC7B,UAACP,KAAK;EAAA,OAAKA,KAAK,CAACO,OAAO;AAAA,GAChC,UAACP,KAAK;EAAA,OAAKA,KAAK,CAACM,GAAG,IAAId,IAAI,CAACC,GAAG,CAACE,MAAM;AAAA,GAGnDJ,WAAW,CAACK,KAAK,EACL,UAACI,KAAK;EAAA,OAAKA,KAAK,CAACM,GAAG,IAAId,IAAI,CAACC,GAAG,CAACG,KAAK;AAAA,GAOjCJ,IAAI,CAACC,GAAG,CAACE,MAAM,EAMP,UAACK,KAAK;EAAA,OAAKA,KAAK,CAACQ,YAAY,IAAI,MAAM;AAAA,EAEnE"}

package/dist/LinearProgress/LinearProgress.cjs.map

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

package/dist/LinearProgress/LinearProgress.d.ts

@@ -1,25 +1,25 @@
-import React from 'react';
-import { Size } from '../types';
-export declare const Bar: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Dot: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const LineFill: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Line: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare enum LinearProgressType {
-    Dots = "dots",
-    Line = "line",
-    Bars = "bars"
-}
-export declare enum LinearProgressVariant {
-    Normal = "normal",
-    Inverted = "inverted"
-}
-export interface LinearProgressProps extends React.HTMLAttributes<HTMLDivElement> {
-    size?: Size.Small | Size.Medium | Size.Large;
-    type?: LinearProgressType;
-    variant?: LinearProgressVariant;
-    label?: string;
-    value: number;
-    max: number;
-}
-declare const LinearProgress: React.FunctionComponent<LinearProgressProps>;
-export default LinearProgress;
+import React from 'react';
+import { Size } from '../types';
+export declare const Bar: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Dot: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LineFill: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Line: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare enum LinearProgressType {
+    Dots = "dots",
+    Line = "line",
+    Bars = "bars"
+}
+export declare enum LinearProgressVariant {
+    Normal = "normal",
+    Inverted = "inverted"
+}
+export interface LinearProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+    size?: Size.Small | Size.Medium | Size.Large;
+    type?: LinearProgressType;
+    variant?: LinearProgressVariant;
+    label?: string;
+    value: number;
+    max: number;
+}
+declare const LinearProgress: React.FunctionComponent<LinearProgressProps>;
+export default LinearProgress;

package/dist/LinearProgress/LinearProgress.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinearProgress.js","names":["React","Size","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","Bar","div","neutral_100","accent1_400","accent1_800","neutral_600","white","Dot","neutral_400","accent1_600","LineFill","Line","neutral_500","accent1_500","neutral_700","Label","black","Content","Wrapper","Regular","LinearProgressType","LinearProgressVariant","LinearProgress","size","Medium","type","variant","Normal","label","value","max","className","rest","renderBars","Array","from","keys","map","i","Math","ceil","renderDots","renderLine","width","render","Bars","Dots"],"sources":["../../src/LinearProgress/LinearProgress.tsx"],"sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle} from '../styles';\n\nexport const Bar = styled.div`\n  flex: 1;\n  height: 6px;\n\n  &.small {\n    height: 6px;\n  }\n\n  &.medium {\n    height: 8px;\n  }\n\n  &.large {\n    height: 12px;\n  }\n\n  background-color: ${COLORS.neutral_100};\n\n  &.active {\n    background-color: ${COLORS.accent1_400};\n  }\n\n  &.current {\n    background-color: ${COLORS.accent1_800};\n  }\n\n  &.inverted {\n    background-color: ${COLORS.neutral_600};\n  }\n\n  &.inverted.active {\n    background-color: ${COLORS.accent1_400};\n  }\n\n  &.inverted.current {\n    background-color: ${COLORS.white};\n  }\n\n`;\n\nexport const Dot = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n\n\n  &:after {\n    content: '';\n    display: block;\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n    background-color: ${COLORS.neutral_400};\n  }\n\n  &.small {\n    &:after {\n      width: 6px;\n      height: 6px;\n    }\n\n    &.current:after {\n      width: 10px;\n      height: 10px;\n    }\n  }\n\n  &.medium {\n    &:after {\n      width: 8px;\n      height: 8px;\n    }\n\n    &.current:after {\n      width: 12px;\n      height: 12px;\n    }\n  }\n\n  &.large {\n    &:after {\n      width: 12px;\n      height: 12px;\n    }\n\n    &.current:after {\n      width: 16px;\n      height: 16px;\n    }\n  }\n\n\n  &.active:after {\n    background-color: ${COLORS.accent1_600};\n  }\n\n  &.current:after {\n    background-color: ${COLORS.accent1_800};\n  }\n\n  &.inverted:after {\n    background-color: ${COLORS.neutral_400};\n  }\n\n  &.inverted.active:after {\n    background-color: ${COLORS.accent1_400};\n  }\n\n  &.inverted.current:after {\n    background-color: ${COLORS.white};\n  }\n`;\n\nexport const LineFill = styled.div`\n  height: 100%;\n  max-width: 100%;\n  position: absolute;\n  z-index: 1;\n`;\n\nexport const Line = styled.div`\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  position: relative;\n\n  &:after {\n    content: '';\n    display: block;\n    height: 100%;\n    background-color: ${COLORS.neutral_500};\n    position: absolute;\n    right: 0;\n  }\n\n  &:before {\n    content: '';\n    display: block;\n    height: 100%;\n    background-color: ${COLORS.neutral_500};\n    position: absolute;\n    left: 0;\n  }\n\n  &.small {\n    height: 6px;\n    border-radius: 4px;\n\n    ${LineFill} {\n      border-radius: 4px;\n    }\n\n    &:after {\n      width: 3px;\n      border-top-right-radius: 6px;\n      border-bottom-right-radius: 6px;\n    }\n\n    &:before {\n      width: 3px;\n      border-top-left-radius: 6px;\n      border-bottom-left-radius: 6px;\n    }\n  }\n\n  &.medium {\n    height: 8px;\n    border-radius: 4px;\n\n    ${LineFill} {\n      border-radius: 4px;\n    }\n\n    &:after {\n      width: 4px;\n      border-top-right-radius: 8px;\n      border-bottom-right-radius: 8px;\n    }\n\n    &:before {\n      width: 4px;\n      border-top-left-radius: 8px;\n      border-bottom-left-radius: 8px;\n    }\n  }\n\n  &.large {\n    height: 12px;\n    border-radius: 6px;\n\n    ${LineFill} {\n      border-radius: 6px;\n    }\n\n    &:after {\n      width: 6px;\n      border-top-right-radius: 12px;\n      border-bottom-right-radius: 12px;\n    }\n\n    &:before {\n      width: 6px;\n      border-top-left-radius: 12px;\n      border-bottom-left-radius: 12px;\n    }\n  }\n\n  background-color: ${COLORS.neutral_100};\n\n  ${LineFill} {\n    background-color: ${COLORS.accent1_500};\n  }\n\n  &.inverted {\n    background-color: ${COLORS.neutral_700};\n\n    &:after,\n    &:before {\n      background-color: ${COLORS.neutral_400};\n    }\n\n    ${LineFill} {\n      background-color: ${COLORS.accent1_400};\n    }\n  }\n`;\n\nconst Label = styled.div`\n  color: ${COLORS.black};\n`;\n\nconst Content = styled.div`\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  height: 16px;\n`;\n\nconst Wrapper = styled.div`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  &.inverted {\n    ${Label} {\n      color: ${COLORS.white};\n    }\n  }\n\n  &.small {\n    gap: 4px;\n\n    ${Label} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${Content} {\n      gap: 4px;\n\n      ${Bar}:first-of-type {\n        border-top-left-radius: 6px;\n        border-bottom-left-radius: 6px;\n      }\n\n      ${Bar}:last-of-type {\n        border-top-right-radius: 6px;\n        border-bottom-right-radius: 6px;\n      }\n    }\n  }\n\n  &.medium {\n    ${Label} {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${Content} {\n      gap: 6px;\n\n      ${Bar}:first-of-type {\n        border-top-left-radius: 8px;\n        border-bottom-left-radius: 8px;\n      }\n\n      ${Bar}:last-of-type {\n        border-top-right-radius: 8px;\n        border-bottom-right-radius: 8px;\n      }\n    }\n  }\n\n  &.large {\n    ${Label} {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${Content} {\n      gap: 8px;\n\n      ${Bar}:first-of-type {\n        border-top-left-radius: 12px;\n        border-bottom-left-radius: 12px;\n      }\n\n      ${Bar}:last-of-type {\n        border-top-right-radius: 12px;\n        border-bottom-right-radius: 12px;\n      }\n    }\n  }\n\n  &.dots.small,\n  &.dots.medium {\n    ${Content} {\n      padding: 0 2px;\n    }\n  }\n\n  &.dots.large {\n    ${Content} {\n      padding: 0 3px;\n    }\n  }\n`;\n\nexport enum LinearProgressType {\n  Dots = 'dots',\n  Line = 'line',\n  Bars = 'bars',\n}\n\nexport enum LinearProgressVariant {\n  Normal = 'normal',\n  Inverted = 'inverted',\n}\n\nexport interface LinearProgressProps extends React.HTMLAttributes<HTMLDivElement> {\n  size?: Size.Small | Size.Medium | Size.Large;\n  type?: LinearProgressType;\n  variant?: LinearProgressVariant;\n\n  label?: string;\n\n  value: number;\n  max: number;\n}\n\nconst LinearProgress: React.FunctionComponent<LinearProgressProps> = ({\n                                                                        size = Size.Medium,\n                                                                        type = LinearProgressType.Line,\n                                                                        variant = LinearProgressVariant.Normal,\n                                                                        label,\n                                                                        value,\n                                                                        max,\n                                                                        className,\n                                                                        ...rest\n                                                                      }) => {\n\n  const renderBars = () =>\n    <>\n      {Array.from(Array(max).keys()).map(i => (\n        <Bar key={i}\n             className={`${Math.ceil(value) >= i + 1 ? 'active' : ''} ${Math.ceil(value) === i + 1 ? 'current' : ''} ${variant} ${size}`}/>\n      ))}\n    </>\n\n  const renderDots = () =>\n    <>\n      {Array.from(Array(max).keys()).map(i => (\n        <Dot key={i}\n             className={`${Math.ceil(value) >= i + 1 ? 'active' : ''} ${Math.ceil(value) === i + 1 ? 'current' : ''} ${variant} ${size}`}/>\n      ))}\n    </>\n\n  const renderLine = () =>\n    <>\n      <Line className={`${variant} ${size}`}>\n        <LineFill style={{width: `${value / max * 100}%`}}/>\n      </Line>\n    </>\n\n\n  const render = () => {\n    switch (type) {\n      case LinearProgressType.Bars:\n        return renderBars();\n      case LinearProgressType.Dots:\n        return renderDots();\n      case LinearProgressType.Line:\n      default:\n        return renderLine();\n    }\n  }\n\n  return (\n    <Wrapper className={`${size} ${type} ${variant} ${className || ''}`} {...rest}>\n      {label && <Label>{label}</Label>}\n      <Content>\n        {render()}\n      </Content>\n    </Wrapper>\n  )\n};\n\nexport default LinearProgress;\n"],"mappings":"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"}
+{"version":3,"file":"LinearProgress.js","names":["React","Size","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","Bar","div","neutral_100","accent1_400","accent1_800","neutral_600","white","Dot","neutral_400","accent1_600","LineFill","Line","neutral_500","accent1_500","neutral_700","Label","black","Content","Wrapper","Regular","LinearProgressType","LinearProgressVariant","LinearProgress","size","Medium","type","variant","Normal","label","value","max","className","rest","renderBars","Array","from","keys","map","i","Math","ceil","renderDots","renderLine","width","render","Bars","Dots"],"sources":["../../src/LinearProgress/LinearProgress.tsx"],"sourcesContent":["import React from 'react';\r\nimport {Size} from '../types';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle} from '../styles';\r\n\r\nexport const Bar = styled.div`\r\n  flex: 1;\r\n  height: 6px;\r\n\r\n  &.small {\r\n    height: 6px;\r\n  }\r\n\r\n  &.medium {\r\n    height: 8px;\r\n  }\r\n\r\n  &.large {\r\n    height: 12px;\r\n  }\r\n\r\n  background-color: ${COLORS.neutral_100};\r\n\r\n  &.active {\r\n    background-color: ${COLORS.accent1_400};\r\n  }\r\n\r\n  &.current {\r\n    background-color: ${COLORS.accent1_800};\r\n  }\r\n\r\n  &.inverted {\r\n    background-color: ${COLORS.neutral_600};\r\n  }\r\n\r\n  &.inverted.active {\r\n    background-color: ${COLORS.accent1_400};\r\n  }\r\n\r\n  &.inverted.current {\r\n    background-color: ${COLORS.white};\r\n  }\r\n\r\n`;\r\n\r\nexport const Dot = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 16px;\r\n  height: 16px;\r\n\r\n\r\n  &:after {\r\n    content: '';\r\n    display: block;\r\n    width: 6px;\r\n    height: 6px;\r\n    border-radius: 50%;\r\n    background-color: ${COLORS.neutral_400};\r\n  }\r\n\r\n  &.small {\r\n    &:after {\r\n      width: 6px;\r\n      height: 6px;\r\n    }\r\n\r\n    &.current:after {\r\n      width: 10px;\r\n      height: 10px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    &:after {\r\n      width: 8px;\r\n      height: 8px;\r\n    }\r\n\r\n    &.current:after {\r\n      width: 12px;\r\n      height: 12px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    &:after {\r\n      width: 12px;\r\n      height: 12px;\r\n    }\r\n\r\n    &.current:after {\r\n      width: 16px;\r\n      height: 16px;\r\n    }\r\n  }\r\n\r\n\r\n  &.active:after {\r\n    background-color: ${COLORS.accent1_600};\r\n  }\r\n\r\n  &.current:after {\r\n    background-color: ${COLORS.accent1_800};\r\n  }\r\n\r\n  &.inverted:after {\r\n    background-color: ${COLORS.neutral_400};\r\n  }\r\n\r\n  &.inverted.active:after {\r\n    background-color: ${COLORS.accent1_400};\r\n  }\r\n\r\n  &.inverted.current:after {\r\n    background-color: ${COLORS.white};\r\n  }\r\n`;\r\n\r\nexport const LineFill = styled.div`\r\n  height: 100%;\r\n  max-width: 100%;\r\n  position: absolute;\r\n  z-index: 1;\r\n`;\r\n\r\nexport const Line = styled.div`\r\n  flex: 1;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: flex-start;\r\n  position: relative;\r\n\r\n  &:after {\r\n    content: '';\r\n    display: block;\r\n    height: 100%;\r\n    background-color: ${COLORS.neutral_500};\r\n    position: absolute;\r\n    right: 0;\r\n  }\r\n\r\n  &:before {\r\n    content: '';\r\n    display: block;\r\n    height: 100%;\r\n    background-color: ${COLORS.neutral_500};\r\n    position: absolute;\r\n    left: 0;\r\n  }\r\n\r\n  &.small {\r\n    height: 6px;\r\n    border-radius: 4px;\r\n\r\n    ${LineFill} {\r\n      border-radius: 4px;\r\n    }\r\n\r\n    &:after {\r\n      width: 3px;\r\n      border-top-right-radius: 6px;\r\n      border-bottom-right-radius: 6px;\r\n    }\r\n\r\n    &:before {\r\n      width: 3px;\r\n      border-top-left-radius: 6px;\r\n      border-bottom-left-radius: 6px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    height: 8px;\r\n    border-radius: 4px;\r\n\r\n    ${LineFill} {\r\n      border-radius: 4px;\r\n    }\r\n\r\n    &:after {\r\n      width: 4px;\r\n      border-top-right-radius: 8px;\r\n      border-bottom-right-radius: 8px;\r\n    }\r\n\r\n    &:before {\r\n      width: 4px;\r\n      border-top-left-radius: 8px;\r\n      border-bottom-left-radius: 8px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    height: 12px;\r\n    border-radius: 6px;\r\n\r\n    ${LineFill} {\r\n      border-radius: 6px;\r\n    }\r\n\r\n    &:after {\r\n      width: 6px;\r\n      border-top-right-radius: 12px;\r\n      border-bottom-right-radius: 12px;\r\n    }\r\n\r\n    &:before {\r\n      width: 6px;\r\n      border-top-left-radius: 12px;\r\n      border-bottom-left-radius: 12px;\r\n    }\r\n  }\r\n\r\n  background-color: ${COLORS.neutral_100};\r\n\r\n  ${LineFill} {\r\n    background-color: ${COLORS.accent1_500};\r\n  }\r\n\r\n  &.inverted {\r\n    background-color: ${COLORS.neutral_700};\r\n\r\n    &:after,\r\n    &:before {\r\n      background-color: ${COLORS.neutral_400};\r\n    }\r\n\r\n    ${LineFill} {\r\n      background-color: ${COLORS.accent1_400};\r\n    }\r\n  }\r\n`;\r\n\r\nconst Label = styled.div`\r\n  color: ${COLORS.black};\r\n`;\r\n\r\nconst Content = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  flex-direction: row;\r\n  height: 16px;\r\n`;\r\n\r\nconst Wrapper = styled.div`\r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 8px;\r\n\r\n  &.inverted {\r\n    ${Label} {\r\n      color: ${COLORS.white};\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    gap: 4px;\r\n\r\n    ${Label} {\r\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    ${Content} {\r\n      gap: 4px;\r\n\r\n      ${Bar}:first-of-type {\r\n        border-top-left-radius: 6px;\r\n        border-bottom-left-radius: 6px;\r\n      }\r\n\r\n      ${Bar}:last-of-type {\r\n        border-top-right-radius: 6px;\r\n        border-bottom-right-radius: 6px;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${Label} {\r\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    ${Content} {\r\n      gap: 6px;\r\n\r\n      ${Bar}:first-of-type {\r\n        border-top-left-radius: 8px;\r\n        border-bottom-left-radius: 8px;\r\n      }\r\n\r\n      ${Bar}:last-of-type {\r\n        border-top-right-radius: 8px;\r\n        border-bottom-right-radius: 8px;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${Label} {\r\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    ${Content} {\r\n      gap: 8px;\r\n\r\n      ${Bar}:first-of-type {\r\n        border-top-left-radius: 12px;\r\n        border-bottom-left-radius: 12px;\r\n      }\r\n\r\n      ${Bar}:last-of-type {\r\n        border-top-right-radius: 12px;\r\n        border-bottom-right-radius: 12px;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.dots.small,\r\n  &.dots.medium {\r\n    ${Content} {\r\n      padding: 0 2px;\r\n    }\r\n  }\r\n\r\n  &.dots.large {\r\n    ${Content} {\r\n      padding: 0 3px;\r\n    }\r\n  }\r\n`;\r\n\r\nexport enum LinearProgressType {\r\n  Dots = 'dots',\r\n  Line = 'line',\r\n  Bars = 'bars',\r\n}\r\n\r\nexport enum LinearProgressVariant {\r\n  Normal = 'normal',\r\n  Inverted = 'inverted',\r\n}\r\n\r\nexport interface LinearProgressProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  type?: LinearProgressType;\r\n  variant?: LinearProgressVariant;\r\n\r\n  label?: string;\r\n\r\n  value: number;\r\n  max: number;\r\n}\r\n\r\nconst LinearProgress: React.FunctionComponent<LinearProgressProps> = ({\r\n                                                                        size = Size.Medium,\r\n                                                                        type = LinearProgressType.Line,\r\n                                                                        variant = LinearProgressVariant.Normal,\r\n                                                                        label,\r\n                                                                        value,\r\n                                                                        max,\r\n                                                                        className,\r\n                                                                        ...rest\r\n                                                                      }) => {\r\n\r\n  const renderBars = () =>\r\n    <>\r\n      {Array.from(Array(max).keys()).map(i => (\r\n        <Bar key={i}\r\n             className={`${Math.ceil(value) >= i + 1 ? 'active' : ''} ${Math.ceil(value) === i + 1 ? 'current' : ''} ${variant} ${size}`}/>\r\n      ))}\r\n    </>\r\n\r\n  const renderDots = () =>\r\n    <>\r\n      {Array.from(Array(max).keys()).map(i => (\r\n        <Dot key={i}\r\n             className={`${Math.ceil(value) >= i + 1 ? 'active' : ''} ${Math.ceil(value) === i + 1 ? 'current' : ''} ${variant} ${size}`}/>\r\n      ))}\r\n    </>\r\n\r\n  const renderLine = () =>\r\n    <>\r\n      <Line className={`${variant} ${size}`}>\r\n        <LineFill style={{width: `${value / max * 100}%`}}/>\r\n      </Line>\r\n    </>\r\n\r\n\r\n  const render = () => {\r\n    switch (type) {\r\n      case LinearProgressType.Bars:\r\n        return renderBars();\r\n      case LinearProgressType.Dots:\r\n        return renderDots();\r\n      case LinearProgressType.Line:\r\n      default:\r\n        return renderLine();\r\n    }\r\n  }\r\n\r\n  return (\r\n    <Wrapper className={`${size} ${type} ${variant} ${className || ''}`} {...rest}>\r\n      {label && <Label>{label}</Label>}\r\n      <Content>\r\n        {render()}\r\n      </Content>\r\n    </Wrapper>\r\n  )\r\n};\r\n\r\nexport default LinearProgress;\r\n"],"mappings":";;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAAQC,IAAI,QAAO,UAAU;AAC7B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,MAAM,EAAEC,iBAAiB,EAAEC,iBAAiB,EAAEC,iBAAiB,EAAEC,kBAAkB,QAAO,WAAW;AAAC;AAAA;AAAA;AAE9G,OAAO,IAAMC,GAAG,GAAGN,MAAM,CAACO,GAAG,ugBAgBPN,MAAM,CAACO,WAAW,EAGhBP,MAAM,CAACQ,WAAW,EAIlBR,MAAM,CAACS,WAAW,EAIlBT,MAAM,CAACU,WAAW,EAIlBV,MAAM,CAACQ,WAAW,EAIlBR,MAAM,CAACW,KAAK,CAGnC;AAED,OAAO,IAAMC,GAAG,GAAGb,MAAM,CAACO,GAAG,wkCAcLN,MAAM,CAACa,WAAW,EAyClBb,MAAM,CAACc,WAAW,EAIlBd,MAAM,CAACS,WAAW,EAIlBT,MAAM,CAACa,WAAW,EAIlBb,MAAM,CAACQ,WAAW,EAIlBR,MAAM,CAACW,KAAK,CAEnC;AAED,OAAO,IAAMI,QAAQ,GAAGhB,MAAM,CAACO,GAAG,oJAKjC;AAED,OAAO,IAAMU,IAAI,GAAGjB,MAAM,CAACO,GAAG,svDAWNN,MAAM,CAACiB,WAAW,EASlBjB,MAAM,CAACiB,WAAW,EASpCF,QAAQ,EAqBRA,QAAQ,EAqBRA,QAAQ,EAiBQf,MAAM,CAACO,WAAW,EAEpCQ,QAAQ,EACYf,MAAM,CAACkB,WAAW,EAIlBlB,MAAM,CAACmB,WAAW,EAIhBnB,MAAM,CAACa,WAAW,EAGtCE,QAAQ,EACYf,MAAM,CAACQ,WAAW,CAG3C;AAED,IAAMY,KAAK,GAAGrB,MAAM,CAACO,GAAG,0FACbN,MAAM,CAACqB,KAAK,CACtB;AAED,IAAMC,OAAO,GAAGvB,MAAM,CAACO,GAAG,4JAKzB;AAED,IAAMiB,OAAO,GAAGxB,MAAM,CAACO,GAAG,k1CAOpBc,KAAK,EACIpB,MAAM,CAACW,KAAK,EAOrBS,KAAK,EACHjB,iBAAiB,CAACC,kBAAkB,CAACoB,OAAO,EAAE,IAAI,CAAC,EAGrDF,OAAO,EAGLjB,GAAG,EAKHA,GAAG,EAQLe,KAAK,EACHlB,iBAAiB,CAACE,kBAAkB,CAACoB,OAAO,EAAE,IAAI,CAAC,EAGrDF,OAAO,EAGLjB,GAAG,EAKHA,GAAG,EAQLe,KAAK,EACHnB,iBAAiB,CAACG,kBAAkB,CAACoB,OAAO,EAAE,IAAI,CAAC,EAGrDF,OAAO,EAGLjB,GAAG,EAKHA,GAAG,EASLiB,OAAO,EAMPA,OAAO,CAIZ;AAED,WAAYG,kBAAkB;AAI7B,WAJWA,kBAAkB;EAAlBA,kBAAkB;EAAlBA,kBAAkB;EAAlBA,kBAAkB;AAAA,GAAlBA,kBAAkB,KAAlBA,kBAAkB;AAM9B,WAAYC,qBAAqB;AAGhC,WAHWA,qBAAqB;EAArBA,qBAAqB;EAArBA,qBAAqB;AAAA,GAArBA,qBAAqB,KAArBA,qBAAqB;AAgBjC,IAAMC,cAA4D,GAAG,SAA/DA,cAA4D,OASU;EAAA,qBARJC,IAAI;IAAJA,IAAI,0BAAG9B,IAAI,CAAC+B,MAAM;IAAA,iBAClBC,IAAI;IAAJA,IAAI,0BAAGL,kBAAkB,CAACT,IAAI;IAAA,oBAC9Be,OAAO;IAAPA,OAAO,6BAAGL,qBAAqB,CAACM,MAAM;IACtCC,KAAK,QAALA,KAAK;IACLC,KAAK,QAALA,KAAK;IACLC,GAAG,QAAHA,GAAG;IACHC,SAAS,QAATA,SAAS;IACNC,IAAI;EAG7E,IAAMC,UAAU,GAAG,SAAbA,UAAU;IAAA,oBACd;MAAA,UACGC,KAAK,CAACC,IAAI,CAACD,KAAK,CAACJ,GAAG,CAAC,CAACM,IAAI,EAAE,CAAC,CAACC,GAAG,CAAC,UAAAC,CAAC;QAAA,oBAClC,KAAC,GAAG;UACC,SAAS,YAAKC,IAAI,CAACC,IAAI,CAACX,KAAK,CAAC,IAAIS,CAAC,GAAG,CAAC,GAAG,QAAQ,GAAG,EAAE,cAAIC,IAAI,CAACC,IAAI,CAACX,KAAK,CAAC,KAAKS,CAAC,GAAG,CAAC,GAAG,SAAS,GAAG,EAAE,cAAIZ,OAAO,cAAIH,IAAI;QAAG,GADvHe,CAAC,CACwH;MAAA,CACpI;IAAC,EACD;EAAA;EAEL,IAAMG,UAAU,GAAG,SAAbA,UAAU;IAAA,oBACd;MAAA,UACGP,KAAK,CAACC,IAAI,CAACD,KAAK,CAACJ,GAAG,CAAC,CAACM,IAAI,EAAE,CAAC,CAACC,GAAG,CAAC,UAAAC,CAAC;QAAA,oBAClC,KAAC,GAAG;UACC,SAAS,YAAKC,IAAI,CAACC,IAAI,CAACX,KAAK,CAAC,IAAIS,CAAC,GAAG,CAAC,GAAG,QAAQ,GAAG,EAAE,cAAIC,IAAI,CAACC,IAAI,CAACX,KAAK,CAAC,KAAKS,CAAC,GAAG,CAAC,GAAG,SAAS,GAAG,EAAE,cAAIZ,OAAO,cAAIH,IAAI;QAAG,GADvHe,CAAC,CACwH;MAAA,CACpI;IAAC,EACD;EAAA;EAEL,IAAMI,UAAU,GAAG,SAAbA,UAAU;IAAA,oBACd;MAAA,uBACE,KAAC,IAAI;QAAC,SAAS,YAAKhB,OAAO,cAAIH,IAAI,CAAG;QAAA,uBACpC,KAAC,QAAQ;UAAC,KAAK,EAAE;YAACoB,KAAK,YAAKd,KAAK,GAAGC,GAAG,GAAG,GAAG;UAAG;QAAE;MAAE;IAC/C,EACN;EAAA;EAGL,IAAMc,MAAM,GAAG,SAATA,MAAM,GAAS;IACnB,QAAQnB,IAAI;MACV,KAAKL,kBAAkB,CAACyB,IAAI;QAC1B,OAAOZ,UAAU,EAAE;MACrB,KAAKb,kBAAkB,CAAC0B,IAAI;QAC1B,OAAOL,UAAU,EAAE;MACrB,KAAKrB,kBAAkB,CAACT,IAAI;MAC5B;QACE,OAAO+B,UAAU,EAAE;IAAC;EAE1B,CAAC;EAED,oBACE,MAAC,OAAO;IAAC,SAAS,YAAKnB,IAAI,cAAIE,IAAI,cAAIC,OAAO,cAAIK,SAAS,IAAI,EAAE;EAAG,GAAKC,IAAI;IAAA,WAC1EJ,KAAK,iBAAI,KAAC,KAAK;MAAA,UAAEA;IAAK,EAAS,eAChC,KAAC,OAAO;MAAA,UACLgB,MAAM;IAAE,EACD;EAAA,GACF;AAEd,CAAC;AAAC;EAhEAnB,IAAI;EACJC,OAAO;EAEPE,KAAK;EAELC,KAAK;EACLC,GAAG;AAAA;AA4DL,eAAeR,cAAc"}

package/dist/LinearProgress/index.cjs.map

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

package/dist/LinearProgress/index.d.ts

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

package/dist/LinearProgress/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["LinearProgress","LinearProgressType","LinearProgressVariant"],"sources":["../../src/LinearProgress/index.ts"],"sourcesContent":["import LinearProgress, {LinearProgressType, LinearProgressVariant} from './LinearProgress';\n\nexport {LinearProgressType, LinearProgressVariant};\nexport {LinearProgress}\n"],"mappings":"AAAA,OAAOA,cAAc,IAAGC,kBAAkB,EAAEC,qBAAqB,QAAO,kBAAkB;AAE1F,SAAQD,kBAAkB,EAAEC,qBAAqB;AACjD,SAAQF,cAAc"}
+{"version":3,"file":"index.js","names":["LinearProgress","LinearProgressType","LinearProgressVariant"],"sources":["../../src/LinearProgress/index.ts"],"sourcesContent":["import LinearProgress, {LinearProgressType, LinearProgressVariant} from './LinearProgress';\r\n\r\nexport {LinearProgressType, LinearProgressVariant};\r\nexport {LinearProgress}\r\n"],"mappings":"AAAA,OAAOA,cAAc,IAAGC,kBAAkB,EAAEC,qBAAqB,QAAO,kBAAkB;AAE1F,SAAQD,kBAAkB,EAAEC,qBAAqB;AACjD,SAAQF,cAAc"}

package/dist/LinearProgression/LinearProgression.cjs

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

package/dist/LinearProgression/LinearProgression.cjs.map

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

package/dist/LinearProgression/LinearProgression.d.ts

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

package/dist/LinearProgression/LinearProgression.js

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

package/dist/LinearProgression/LinearProgression.js.map

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

package/dist/LinearProgression/index.cjs

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

package/dist/LinearProgression/index.cjs.map

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

package/dist/LinearProgression/index.d.ts

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

package/dist/LinearProgression/index.js

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

package/dist/LinearProgression/index.js.map

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