@laerdal/life-react-components 1.11.0-dev.7.full → 1.11.0-dev.9

package/dist/InputFields/Textarea.js

@@ -5,9 +5,9 @@ var _excluded = ["id", "placeholder", "state", "value", "size", "disabled", "val
 
 var _templateObject, _templateObject2;
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /**
  * Import React libraries.

package/dist/InputFields/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/Textarea.tsx"],"names":["React","COLORS","ComponentSStyling","NoteMessage","ValidationMessage","States","CheckMark","TechnicalWarning","styled","ComponentMStyling","ComponentTextStyle","TextareaWrapper","div","props","margin","TextArea","textarea","neutral_400","white","autoHeight","Italic","black","neutral_500","primary_700","primary_800","critical_500","correct_500","neutral_100","neutral_300","Textarea","forwardRef","ref","id","placeholder","state","value","size","disabled","validationMessage","onChange","note","required","className","rest","cls","Invalid","undefined","e","target","Valid","correct_400","critical_400","icon","message"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { COLORS, ComponentSStyling } from '../styles';\nimport { ErrorMessage, NoteMessage, ValidationMessage } from './styling';\nimport { Size, States } from '../types';\n\n/**\n * Import custom components.\n */\nimport { CheckMark, TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles';\nimport { TextareaProps, TextFieldNote } from './types';\n\n// Add component-specific styles.\nconst TextareaWrapper = styled.div<{ margin?: string }>`\n  width: 100%;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\nconst TextArea = styled.textarea<{ autoHeight?: boolean }>`\n  border: 1px solid ${COLORS.neutral_400};\n  background: ${COLORS.white};\n  border-radius: 4px;\n  outline: none;\n  margin: 4px 0px;\n  padding: 16px;\n\n  resize: ${(props) => (props.autoHeight ? 'none' : '')};\n\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.black)}\n    width: 304px;\n    &::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n    width: 344px;\n  }\n\n  &:hover {\n    border: 2px solid ${COLORS.primary_700};\n    margin: 3px -1px;\n  }\n\n  &:active,\n  &:focus {\n    border: 2px solid ${COLORS.primary_800};\n    margin: 3px -1px;\n  }\n\n  &.invalid,\n  &.invalid:hover,\n  &.invalid:focus,\n  &.invalid:active {\n    border: none;\n    margin: 4px 0px;\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};\n  }\n\n  &.valid {\n    border: none;\n    margin: 4px 0px;\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n  }\n\n  &:disabled,\n  &:disabled:hover,\n  &:disabled:focus {\n    cursor: not-allowed;\n    border: 1px solid ${COLORS.neutral_100};\n    margin: 4px 0px;\n    box-shadow: none;\n\n    &::placeholder {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &::placeholder {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n`;\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({\n  id,\n  placeholder,\n  state,\n  value,\n  size,\n  disabled,\n  validationMessage,\n  onChange,\n  margin,\n  autoHeight,\n  note,\n  required,\n  className,\n  ...rest\n}: TextareaProps, ref) => {\n\n  const cls = `${size} ${state || (validationMessage ? States.Invalid : '')} ${className || ''}`;\n  return (\n    <TextareaWrapper>\n      <TextArea\n        id={id}\n        ref={ref}\n        value={value}\n        placeholder={disabled ? undefined : placeholder}\n        autoHeight={autoHeight}\n        className={cls}\n        disabled={disabled}\n        onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n        required={required}\n        {...rest}\n      />\n      {validationMessage && (\n        <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n          {state === States.Valid ? <CheckMark color={COLORS.correct_400} /> : <TechnicalWarning color={COLORS.critical_400} />}\n          <span>{validationMessage}</span>\n        </ValidationMessage>\n      )}\n      {note && !disabled && (\n        <NoteMessage className={size}>\n          {note.icon}\n          <span>{note.message}</span>\n        </NoteMessage>\n      )}\n    </TextareaWrapper>\n  );\n});\n\nexport default Textarea;\n"],"file":"Textarea.js"}
+{"version":3,"file":"Textarea.js","names":["React","COLORS","ComponentSStyling","NoteMessage","ValidationMessage","States","CheckMark","TechnicalWarning","styled","ComponentMStyling","ComponentTextStyle","TextareaWrapper","div","props","margin","TextArea","textarea","neutral_400","white","autoHeight","Italic","black","neutral_500","primary_700","primary_800","critical_500","correct_500","neutral_100","neutral_300","Textarea","forwardRef","ref","id","placeholder","state","value","size","disabled","validationMessage","onChange","note","required","className","rest","cls","Invalid","undefined","e","target","Valid","correct_400","critical_400","icon","message"],"sources":["../../src/InputFields/Textarea.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { COLORS, ComponentSStyling } from '../styles';\nimport { ErrorMessage, NoteMessage, ValidationMessage } from './styling';\nimport { Size, States } from '../types';\n\n/**\n * Import custom components.\n */\nimport { CheckMark, TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles';\nimport { TextareaProps, TextFieldNote } from './types';\n\n// Add component-specific styles.\nconst TextareaWrapper = styled.div<{ margin?: string }>`\n  width: 100%;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\nconst TextArea = styled.textarea<{ autoHeight?: boolean }>`\n  border: 1px solid ${COLORS.neutral_400};\n  background: ${COLORS.white};\n  border-radius: 4px;\n  outline: none;\n  margin: 4px 0px;\n  padding: 16px;\n\n  resize: ${(props) => (props.autoHeight ? 'none' : '')};\n\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.black)}\n    width: 304px;\n    &::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n    width: 344px;\n  }\n\n  &:hover {\n    border: 2px solid ${COLORS.primary_700};\n    margin: 3px -1px;\n  }\n\n  &:active,\n  &:focus {\n    border: 2px solid ${COLORS.primary_800};\n    margin: 3px -1px;\n  }\n\n  &.invalid,\n  &.invalid:hover,\n  &.invalid:focus,\n  &.invalid:active {\n    border: none;\n    margin: 4px 0px;\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};\n  }\n\n  &.valid {\n    border: none;\n    margin: 4px 0px;\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n  }\n\n  &:disabled,\n  &:disabled:hover,\n  &:disabled:focus {\n    cursor: not-allowed;\n    border: 1px solid ${COLORS.neutral_100};\n    margin: 4px 0px;\n    box-shadow: none;\n\n    &::placeholder {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &::placeholder {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n`;\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({\n  id,\n  placeholder,\n  state,\n  value,\n  size,\n  disabled,\n  validationMessage,\n  onChange,\n  margin,\n  autoHeight,\n  note,\n  required,\n  className,\n  ...rest\n}: TextareaProps, ref) => {\n\n  const cls = `${size} ${state || (validationMessage ? States.Invalid : '')} ${className || ''}`;\n  return (\n    <TextareaWrapper>\n      <TextArea\n        id={id}\n        ref={ref}\n        value={value}\n        placeholder={disabled ? undefined : placeholder}\n        autoHeight={autoHeight}\n        className={cls}\n        disabled={disabled}\n        onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n        required={required}\n        {...rest}\n      />\n      {validationMessage && (\n        <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n          {state === States.Valid ? <CheckMark color={COLORS.correct_400} /> : <TechnicalWarning color={COLORS.critical_400} />}\n          <span>{validationMessage}</span>\n        </ValidationMessage>\n      )}\n      {note && !disabled && (\n        <NoteMessage className={size}>\n          {note.icon}\n          <span>{note.message}</span>\n        </NoteMessage>\n      )}\n    </TextareaWrapper>\n  );\n});\n\nexport default Textarea;\n"],"mappings":"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"}

package/dist/InputFields/components/SearchBarInput.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/components/SearchBarInput.tsx"],"names":["Search","styled","input","attrs","type","ComponentTextStyle","Italic","COLORS","neutral_500","Regular","black","neutral_600","BREAKPOINTS","MEDIUM","SearchBarInput","React","forwardRef","props","ref","id","searchTerm","setSearchTerm","enterSearch","placeholder","disabled","onKeyDown","size","onBlur","onClick","elementRef","focusParentRefs","useImperativeHandle","current","isPressingEnter","e","key","preventDefault","stopPropagation","target","value"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles/index';\nimport { Size } from '../../types';\nimport { ComponentMStyling, ComponentSStyling } from '../../styles';\nimport { useFocusVisibleRef } from '../../common';\n\nexport const Search = styled.input.attrs(() => ({ type: 'search' }))`\n  appearance: none;\n  width: calc(100% - 96px);\n\n  /* To prevent browser putting its own cross inside the search bar */\n\n  ::-ms-clear {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  ::-ms-reveal {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    display: none;\n  }\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  height: 32px;\n  border-width: 0;\n  margin-left: 48px;\n  outline: none;\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.small {\n    margin-left: 44px;\n\n    ::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.medium {\n    margin-left: 48px;\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    \n    ::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &:disabled {\n    background: transparent;\n    border: none;\n  }\n`;\n\ntype SearchBarInputProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  onBlur?: (e: any) => void;\n  focusParentRefs?: React.RefObject<any>[];\n  onClick?: ()=>void;\n};\n\nconst SearchBarInput = React.forwardRef<HTMLInputElement, SearchBarInputProps>((props: SearchBarInputProps, ref) => {\n  const { id, searchTerm, setSearchTerm, enterSearch, placeholder, disabled, onKeyDown, size, onBlur, onClick } = props;\n\n  const elementRef = useFocusVisibleRef(props.focusParentRefs || []);\n\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  return (\n    <Search\n      placeholder={disabled ? '' : placeholder}\n      ref={elementRef}\n      id={id}\n      data-testid={id}\n      className={size ? size : ''}\n      tabIndex={0}\n      disabled={disabled}\n      onChange={(e: any) => setSearchTerm(e.target.value)}\n      value={searchTerm}\n      onBlur={(e) => onBlur && onBlur(e)}\n      onKeyDown={onKeyDown}\n      onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}\n      onClick={onClick}\n    />\n  );\n});\n\nexport default SearchBarInput;\n"],"file":"SearchBarInput.cjs"}
+{"version":3,"file":"SearchBarInput.cjs","names":["Search","styled","input","attrs","type","ComponentSStyling","ComponentTextStyle","Italic","COLORS","neutral_500","Regular","black","neutral_600","BREAKPOINTS","MEDIUM","ComponentMStyling","SearchBarInput","React","forwardRef","props","ref","id","searchTerm","setSearchTerm","enterSearch","placeholder","disabled","onKeyDown","size","onBlur","onClick","elementRef","useFocusVisibleRef","focusParentRefs","useImperativeHandle","current","isPressingEnter","e","key","preventDefault","stopPropagation","target","value"],"sources":["../../../src/InputFields/components/SearchBarInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles/index';\nimport { Size } from '../../types';\nimport { ComponentMStyling, ComponentSStyling } from '../../styles';\nimport { useFocusVisibleRef } from '../../common';\n\nexport const Search = styled.input.attrs(() => ({ type: 'search' }))`\n  appearance: none;\n  width: calc(100% - 96px);\n\n  /* To prevent browser putting its own cross inside the search bar */\n\n  ::-ms-clear {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  ::-ms-reveal {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    display: none;\n  }\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  height: 32px;\n  border-width: 0;\n  margin-left: 48px;\n  outline: none;\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.small {\n    margin-left: 44px;\n\n    ::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.medium {\n    margin-left: 48px;\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    \n    ::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &:disabled {\n    background: transparent;\n    border: none;\n  }\n`;\n\ntype SearchBarInputProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  onBlur?: (e: any) => void;\n  focusParentRefs?: React.RefObject<any>[];\n  onClick?: ()=>void;\n};\n\nconst SearchBarInput = React.forwardRef<HTMLInputElement, SearchBarInputProps>((props: SearchBarInputProps, ref) => {\n  const { id, searchTerm, setSearchTerm, enterSearch, placeholder, disabled, onKeyDown, size, onBlur, onClick } = props;\n\n  const elementRef = useFocusVisibleRef(props.focusParentRefs || []);\n\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  return (\n    <Search\n      placeholder={disabled ? '' : placeholder}\n      ref={elementRef}\n      id={id}\n      data-testid={id}\n      className={size ? size : ''}\n      tabIndex={0}\n      disabled={disabled}\n      onChange={(e: any) => setSearchTerm(e.target.value)}\n      value={searchTerm}\n      onBlur={(e) => onBlur && onBlur(e)}\n      onKeyDown={onKeyDown}\n      onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}\n      onClick={onClick}\n    />\n  );\n});\n\nexport default SearchBarInput;\n"],"mappings":"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"}

package/dist/InputFields/components/SearchBarInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/components/SearchBarInput.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","ComponentMStyling","ComponentSStyling","useFocusVisibleRef","Search","input","attrs","type","Italic","neutral_500","Regular","black","neutral_600","MEDIUM","SearchBarInput","forwardRef","props","ref","id","searchTerm","setSearchTerm","enterSearch","placeholder","disabled","onKeyDown","size","onBlur","onClick","elementRef","focusParentRefs","useImperativeHandle","current","isPressingEnter","e","key","preventDefault","stopPropagation","target","value"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles/index';\nimport { Size } from '../../types';\nimport { ComponentMStyling, ComponentSStyling } from '../../styles';\nimport { useFocusVisibleRef } from '../../common';\n\nexport const Search = styled.input.attrs(() => ({ type: 'search' }))`\n  appearance: none;\n  width: calc(100% - 96px);\n\n  /* To prevent browser putting its own cross inside the search bar */\n\n  ::-ms-clear {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  ::-ms-reveal {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    display: none;\n  }\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  height: 32px;\n  border-width: 0;\n  margin-left: 48px;\n  outline: none;\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.small {\n    margin-left: 44px;\n\n    ::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.medium {\n    margin-left: 48px;\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    \n    ::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &:disabled {\n    background: transparent;\n    border: none;\n  }\n`;\n\ntype SearchBarInputProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  onBlur?: (e: any) => void;\n  focusParentRefs?: React.RefObject<any>[];\n  onClick?: ()=>void;\n};\n\nconst SearchBarInput = React.forwardRef<HTMLInputElement, SearchBarInputProps>((props: SearchBarInputProps, ref) => {\n  const { id, searchTerm, setSearchTerm, enterSearch, placeholder, disabled, onKeyDown, size, onBlur, onClick } = props;\n\n  const elementRef = useFocusVisibleRef(props.focusParentRefs || []);\n\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  return (\n    <Search\n      placeholder={disabled ? '' : placeholder}\n      ref={elementRef}\n      id={id}\n      data-testid={id}\n      className={size ? size : ''}\n      tabIndex={0}\n      disabled={disabled}\n      onChange={(e: any) => setSearchTerm(e.target.value)}\n      value={searchTerm}\n      onBlur={(e) => onBlur && onBlur(e)}\n      onKeyDown={onKeyDown}\n      onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}\n      onClick={onClick}\n    />\n  );\n});\n\nexport default SearchBarInput;\n"],"file":"SearchBarInput.js"}
+{"version":3,"file":"SearchBarInput.js","names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","ComponentMStyling","ComponentSStyling","useFocusVisibleRef","Search","input","attrs","type","Italic","neutral_500","Regular","black","neutral_600","MEDIUM","SearchBarInput","forwardRef","props","ref","id","searchTerm","setSearchTerm","enterSearch","placeholder","disabled","onKeyDown","size","onBlur","onClick","elementRef","focusParentRefs","useImperativeHandle","current","isPressingEnter","e","key","preventDefault","stopPropagation","target","value"],"sources":["../../../src/InputFields/components/SearchBarInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles/index';\nimport { Size } from '../../types';\nimport { ComponentMStyling, ComponentSStyling } from '../../styles';\nimport { useFocusVisibleRef } from '../../common';\n\nexport const Search = styled.input.attrs(() => ({ type: 'search' }))`\n  appearance: none;\n  width: calc(100% - 96px);\n\n  /* To prevent browser putting its own cross inside the search bar */\n\n  ::-ms-clear {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  ::-ms-reveal {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    display: none;\n  }\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  height: 32px;\n  border-width: 0;\n  margin-left: 48px;\n  outline: none;\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.small {\n    margin-left: 44px;\n\n    ::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.medium {\n    margin-left: 48px;\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    \n    ::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &:disabled {\n    background: transparent;\n    border: none;\n  }\n`;\n\ntype SearchBarInputProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  onBlur?: (e: any) => void;\n  focusParentRefs?: React.RefObject<any>[];\n  onClick?: ()=>void;\n};\n\nconst SearchBarInput = React.forwardRef<HTMLInputElement, SearchBarInputProps>((props: SearchBarInputProps, ref) => {\n  const { id, searchTerm, setSearchTerm, enterSearch, placeholder, disabled, onKeyDown, size, onBlur, onClick } = props;\n\n  const elementRef = useFocusVisibleRef(props.focusParentRefs || []);\n\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  return (\n    <Search\n      placeholder={disabled ? '' : placeholder}\n      ref={elementRef}\n      id={id}\n      data-testid={id}\n      className={size ? size : ''}\n      tabIndex={0}\n      disabled={disabled}\n      onChange={(e: any) => setSearchTerm(e.target.value)}\n      value={searchTerm}\n      onBlur={(e) => onBlur && onBlur(e)}\n      onKeyDown={onKeyDown}\n      onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}\n      onClick={onClick}\n    />\n  );\n});\n\nexport default SearchBarInput;\n"],"mappings":"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"}

package/dist/InputFields/components/SearchField.cjs

@@ -35,9 +35,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var SearchFieldWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  &.focus-visible-within {\n    ", "\n  }\n"])), _index.focusStyles);
 

package/dist/InputFields/components/SearchField.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/components/SearchField.tsx"],"names":["SearchFieldWrapper","styled","div","focusStyles","StyledSearchField","COLORS","neutral_400","white","ComponentTextStyle","Regular","black","Italic","neutral_500","BREAKPOINTS","MEDIUM","primary_800","neutral_600","critical_400","neutral_100","SearchField","React","forwardRef","ref","id","searchTerm","disabled","validationMessage","children","size","className","rest","cls","concat"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AAGO,IAAMA,kBAAkB,GAAGC,0BAAOC,GAAV,iIAEzBC,kBAFyB,CAAxB;;;;AAMA,IAAMC,iBAAiB,GAAGH,0BAAOC,GAAV,4nCAGEG,cAAOC,WAHT,EAURD,cAAOE,KAVC,EAY1B,+BAAkBC,0BAAmBC,OAArC,EAA8CJ,cAAOK,KAArD,CAZ0B,EAkBxB,+BAAkBF,0BAAmBG,MAArC,EAA6CN,cAAOO,WAApD,CAlBwB,EAqB1BC,mBAAYC,MArBc,EAsBxB,+BAAkBN,0BAAmBC,OAArC,EAA8CJ,cAAOK,KAArD,CAtBwB,EA4BtB,+BAAkBF,0BAAmBG,MAArC,EAA6CN,cAAOO,WAApD,CA5BsB,EAiCxB,+BAAkBJ,0BAAmBC,OAArC,EAA8CJ,cAAOK,KAArD,CAjCwB,EAsCtB,+BAAkBF,0BAAmBG,MAArC,EAA6CN,cAAOO,WAApD,CAtCsB,EA2CxB,+BAAkBJ,0BAAmBC,OAArC,EAA8CJ,cAAOK,KAArD,CA3CwB,EA+CtB,+BAAkBF,0BAAmBG,MAArC,EAA6CN,cAAOO,WAApD,CA/CsB,EAoDIP,cAAOU,WApDX,EAwDIV,cAAOU,WAxDX,EA4DjBV,cAAOW,WA5DU,EAiEIX,cAAOY,YAjEX,EAqEIZ,cAAOa,WArEX,CAAvB;;;AAoFP,IAAMC,WAAW,gBAAGC,KAAK,CAACC,UAAN,CAAkD,gBAAsFC,GAAtF,EAA8F;AAAA,MAA3FC,EAA2F,QAA3FA,EAA2F;AAAA,MAAvFC,UAAuF,QAAvFA,UAAuF;AAAA,MAA3EC,QAA2E,QAA3EA,QAA2E;AAAA,MAAjEC,iBAAiE,QAAjEA,iBAAiE;AAAA,MAA9CC,QAA8C,QAA9CA,QAA8C;AAAA,MAApCC,IAAoC,QAApCA,IAAoC;AAAA,MAA9BC,SAA8B,QAA9BA,SAA8B;AAAA,MAAhBC,IAAgB;AAClK,MAAMC,GAAG,GAAG,CAACN,QAAQ,GAAG,WAAH,GAAiB,EAA1B,EACTO,MADS,CACFR,UAAU,KAAK,EAAf,GAAoB,eAApB,GAAsC,EADpC,EAETQ,MAFS,CAEFJ,IAAI,aAAMA,IAAN,SAAgB,EAFlB,EAGTI,MAHS,CAGFN,iBAAiB,GAAG,WAAH,GAAiB,EAHhC,EAITM,MAJS,WAICH,SAJD,aAICA,SAJD,cAICA,SAJD,GAIc,EAJd,OAAZ;AAMA,sBACE,qBAAC,kBAAD;AAAoB,IAAA,GAAG,EAAEP,GAAzB;AAAA,2BACE,qBAAC,iBAAD;AAAmB,MAAA,EAAE,YAAKC,EAAL,UAArB;AAAqC,+BAAgBA,EAAhB,UAArC;AAAgE,MAAA,SAAS,EAAEQ;AAA3E,OAAoFD,IAApF;AAAA,gBACGH;AADH;AADF,IADF;AAOD,CAdmB,CAApB;;AAREJ,EAAAA,E;AACAC,EAAAA,U;AACAC,EAAAA,Q;AACAC,EAAAA,iB;AACAC,EAAAA,Q;;eAoBaR,W","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles } from '../../styles/index';\nimport { ComponentMStyling, ComponentSStyling } from '../../styles';\nimport { Size } from '../../types';\n\nexport const SearchFieldWrapper = styled.div`\n  &.focus-visible-within {\n    ${focusStyles}\n  }\n`;\n\nexport const StyledSearchField = styled.div<{ activeValidationMessage?: boolean }>`\n  display: flex;\n  flex-direction: row;\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n  box-sizing: border-box;\n  border-radius: 56px;\n  align-items: center;\n  position: relative;\n  height: 48px;\n  appearance: none;\n  background-color: ${COLORS.white};\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  padding: 0 !important;\n  width: 100%;\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n    height: 56px;\n    padding: 0 4px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    height: 48px;\n    padding: 0 !important;\n\n    &::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    height: 56px;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  div {\n    color: ${COLORS.neutral_600};\n    background-color: transparent;\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n  }\n\n  &.disabled {\n    box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n    pointer-events: none;\n    background-color: transparent !important;\n  }\n`;\n\ntype SeachFieldProps = React.HTMLAttributes<HTMLDivElement> & {\n  id: string;\n  searchTerm?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  children: any;\n  size?: Size.Small | Size.Medium;\n};\n\nconst SearchField = React.forwardRef<HTMLDivElement, SeachFieldProps>(({ id, searchTerm, disabled, validationMessage, children, size, className, ...rest }, ref) => {\n  const cls = (disabled ? 'disabled ' : '')\n    .concat(searchTerm !== '' ? 'searchactive ' : '')\n    .concat(size ? `${size} ` : '')\n    .concat(validationMessage ? ' invalid ' : '')\n    .concat(`${className ?? ''} `);\n\n  return (\n    <SearchFieldWrapper ref={ref}>\n      <StyledSearchField id={`${id}_main`} data-testid={`${id}_main`} className={cls} {...rest}>\n        {children}\n      </StyledSearchField>\n    </SearchFieldWrapper>\n  );\n});\n\nexport default SearchField;\n"],"file":"SearchField.cjs"}
+{"version":3,"file":"SearchField.cjs","names":["SearchFieldWrapper","styled","div","focusStyles","StyledSearchField","COLORS","neutral_400","white","ComponentSStyling","ComponentTextStyle","Regular","black","Italic","neutral_500","BREAKPOINTS","MEDIUM","ComponentMStyling","primary_800","neutral_600","critical_400","neutral_100","SearchField","React","forwardRef","ref","id","searchTerm","disabled","validationMessage","children","size","className","rest","cls","concat"],"sources":["../../../src/InputFields/components/SearchField.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles } from '../../styles/index';\nimport { ComponentMStyling, ComponentSStyling } from '../../styles';\nimport { Size } from '../../types';\n\nexport const SearchFieldWrapper = styled.div`\n  &.focus-visible-within {\n    ${focusStyles}\n  }\n`;\n\nexport const StyledSearchField = styled.div<{ activeValidationMessage?: boolean }>`\n  display: flex;\n  flex-direction: row;\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n  box-sizing: border-box;\n  border-radius: 56px;\n  align-items: center;\n  position: relative;\n  height: 48px;\n  appearance: none;\n  background-color: ${COLORS.white};\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  padding: 0 !important;\n  width: 100%;\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n    height: 56px;\n    padding: 0 4px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    height: 48px;\n    padding: 0 !important;\n\n    &::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    height: 56px;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  div {\n    color: ${COLORS.neutral_600};\n    background-color: transparent;\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n  }\n\n  &.disabled {\n    box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n    pointer-events: none;\n    background-color: transparent !important;\n  }\n`;\n\ntype SeachFieldProps = React.HTMLAttributes<HTMLDivElement> & {\n  id: string;\n  searchTerm?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  children: any;\n  size?: Size.Small | Size.Medium;\n};\n\nconst SearchField = React.forwardRef<HTMLDivElement, SeachFieldProps>(({ id, searchTerm, disabled, validationMessage, children, size, className, ...rest }, ref) => {\n  const cls = (disabled ? 'disabled ' : '')\n    .concat(searchTerm !== '' ? 'searchactive ' : '')\n    .concat(size ? `${size} ` : '')\n    .concat(validationMessage ? ' invalid ' : '')\n    .concat(`${className ?? ''} `);\n\n  return (\n    <SearchFieldWrapper ref={ref}>\n      <StyledSearchField id={`${id}_main`} data-testid={`${id}_main`} className={cls} {...rest}>\n        {children}\n      </StyledSearchField>\n    </SearchFieldWrapper>\n  );\n});\n\nexport default SearchField;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AAGO,IAAMA,kBAAkB,GAAGC,yBAAA,CAAOC,GAAV,iIAEzBC,kBAFyB,CAAxB;;;;AAMA,IAAMC,iBAAiB,GAAGH,yBAAA,CAAOC,GAAV,4nCAGEG,aAAA,CAAOC,WAHT,EAURD,aAAA,CAAOE,KAVC,EAY1B,IAAAC,yBAAA,EAAkBC,yBAAA,CAAmBC,OAArC,EAA8CL,aAAA,CAAOM,KAArD,CAZ0B,EAkBxB,IAAAH,yBAAA,EAAkBC,yBAAA,CAAmBG,MAArC,EAA6CP,aAAA,CAAOQ,WAApD,CAlBwB,EAqB1BC,kBAAA,CAAYC,MArBc,EAsBxB,IAAAC,yBAAA,EAAkBP,yBAAA,CAAmBC,OAArC,EAA8CL,aAAA,CAAOM,KAArD,CAtBwB,EA4BtB,IAAAK,yBAAA,EAAkBP,yBAAA,CAAmBG,MAArC,EAA6CP,aAAA,CAAOQ,WAApD,CA5BsB,EAiCxB,IAAAL,yBAAA,EAAkBC,yBAAA,CAAmBC,OAArC,EAA8CL,aAAA,CAAOM,KAArD,CAjCwB,EAsCtB,IAAAH,yBAAA,EAAkBC,yBAAA,CAAmBG,MAArC,EAA6CP,aAAA,CAAOQ,WAApD,CAtCsB,EA2CxB,IAAAG,yBAAA,EAAkBP,yBAAA,CAAmBC,OAArC,EAA8CL,aAAA,CAAOM,KAArD,CA3CwB,EA+CtB,IAAAK,yBAAA,EAAkBP,yBAAA,CAAmBG,MAArC,EAA6CP,aAAA,CAAOQ,WAApD,CA/CsB,EAoDIR,aAAA,CAAOY,WApDX,EAwDIZ,aAAA,CAAOY,WAxDX,EA4DjBZ,aAAA,CAAOa,WA5DU,EAiEIb,aAAA,CAAOc,YAjEX,EAqEId,aAAA,CAAOe,WArEX,CAAvB;;;AAoFP,IAAMC,WAAW,gBAAGC,KAAK,CAACC,UAAN,CAAkD,gBAAsFC,GAAtF,EAA8F;EAAA,IAA3FC,EAA2F,QAA3FA,EAA2F;EAAA,IAAvFC,UAAuF,QAAvFA,UAAuF;EAAA,IAA3EC,QAA2E,QAA3EA,QAA2E;EAAA,IAAjEC,iBAAiE,QAAjEA,iBAAiE;EAAA,IAA9CC,QAA8C,QAA9CA,QAA8C;EAAA,IAApCC,IAAoC,QAApCA,IAAoC;EAAA,IAA9BC,SAA8B,QAA9BA,SAA8B;EAAA,IAAhBC,IAAgB;EAClK,IAAMC,GAAG,GAAG,CAACN,QAAQ,GAAG,WAAH,GAAiB,EAA1B,EACTO,MADS,CACFR,UAAU,KAAK,EAAf,GAAoB,eAApB,GAAsC,EADpC,EAETQ,MAFS,CAEFJ,IAAI,aAAMA,IAAN,SAAgB,EAFlB,EAGTI,MAHS,CAGFN,iBAAiB,GAAG,WAAH,GAAiB,EAHhC,EAITM,MAJS,WAICH,SAJD,aAICA,SAJD,cAICA,SAJD,GAIc,EAJd,OAAZ;EAMA,oBACE,qBAAC,kBAAD;IAAoB,GAAG,EAAEP,GAAzB;IAAA,uBACE,qBAAC,iBAAD;MAAmB,EAAE,YAAKC,EAAL,UAArB;MAAqC,yBAAgBA,EAAhB,UAArC;MAAgE,SAAS,EAAEQ;IAA3E,GAAoFD,IAApF;MAAA,UACGH;IADH;EADF,EADF;AAOD,CAdmB,CAApB;;EAREJ,E;EACAC,U;EACAC,Q;EACAC,iB;EACAC,Q;;eAoBaR,W"}

package/dist/InputFields/components/SearchField.js

@@ -6,9 +6,9 @@ var _excluded = ["id", "searchTerm", "disabled", "validationMessage", "children"
 
 var _templateObject, _templateObject2;
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import * as React from 'react';
 import styled from 'styled-components';

package/dist/InputFields/components/SearchField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/components/SearchField.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","ComponentMStyling","ComponentSStyling","SearchFieldWrapper","div","StyledSearchField","neutral_400","white","Regular","black","Italic","neutral_500","MEDIUM","primary_800","neutral_600","critical_400","neutral_100","SearchField","forwardRef","ref","id","searchTerm","disabled","validationMessage","children","size","className","rest","cls","concat"],"mappings":";;;;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,WAAT,EAAsBC,MAAtB,EAA8BC,kBAA9B,EAAkDC,WAAlD,QAAqE,oBAArE;AACA,SAASC,iBAAT,EAA4BC,iBAA5B,QAAqD,cAArD;;AAGA,OAAO,IAAMC,kBAAkB,GAAGP,MAAM,CAACQ,GAAV,mHAEzBJ,WAFyB,CAAxB;AAMP,OAAO,IAAMK,iBAAiB,GAAGT,MAAM,CAACQ,GAAV,8mCAGEN,MAAM,CAACQ,WAHT,EAURR,MAAM,CAACS,KAVC,EAY1BL,iBAAiB,CAACH,kBAAkB,CAACS,OAApB,EAA6BV,MAAM,CAACW,KAApC,CAZS,EAkBxBP,iBAAiB,CAACH,kBAAkB,CAACW,MAApB,EAA4BZ,MAAM,CAACa,WAAnC,CAlBO,EAqB1Bd,WAAW,CAACe,MArBc,EAsBxBX,iBAAiB,CAACF,kBAAkB,CAACS,OAApB,EAA6BV,MAAM,CAACW,KAApC,CAtBO,EA4BtBR,iBAAiB,CAACF,kBAAkB,CAACW,MAApB,EAA4BZ,MAAM,CAACa,WAAnC,CA5BK,EAiCxBT,iBAAiB,CAACH,kBAAkB,CAACS,OAApB,EAA6BV,MAAM,CAACW,KAApC,CAjCO,EAsCtBP,iBAAiB,CAACH,kBAAkB,CAACW,MAApB,EAA4BZ,MAAM,CAACa,WAAnC,CAtCK,EA2CxBV,iBAAiB,CAACF,kBAAkB,CAACS,OAApB,EAA6BV,MAAM,CAACW,KAApC,CA3CO,EA+CtBR,iBAAiB,CAACF,kBAAkB,CAACW,MAApB,EAA4BZ,MAAM,CAACa,WAAnC,CA/CK,EAoDIb,MAAM,CAACe,WApDX,EAwDIf,MAAM,CAACe,WAxDX,EA4DjBf,MAAM,CAACgB,WA5DU,EAiEIhB,MAAM,CAACiB,YAjEX,EAqEIjB,MAAM,CAACkB,WArEX,CAAvB;AAoFP,IAAMC,WAAW,gBAAGtB,KAAK,CAACuB,UAAN,CAAkD,gBAAsFC,GAAtF,EAA8F;AAAA,MAA3FC,EAA2F,QAA3FA,EAA2F;AAAA,MAAvFC,UAAuF,QAAvFA,UAAuF;AAAA,MAA3EC,QAA2E,QAA3EA,QAA2E;AAAA,MAAjEC,iBAAiE,QAAjEA,iBAAiE;AAAA,MAA9CC,QAA8C,QAA9CA,QAA8C;AAAA,MAApCC,IAAoC,QAApCA,IAAoC;AAAA,MAA9BC,SAA8B,QAA9BA,SAA8B;AAAA,MAAhBC,IAAgB;;AAClK,MAAMC,GAAG,GAAG,CAACN,QAAQ,GAAG,WAAH,GAAiB,EAA1B,EACTO,MADS,CACFR,UAAU,KAAK,EAAf,GAAoB,eAApB,GAAsC,EADpC,EAETQ,MAFS,CAEFJ,IAAI,aAAMA,IAAN,SAAgB,EAFlB,EAGTI,MAHS,CAGFN,iBAAiB,GAAG,WAAH,GAAiB,EAHhC,EAITM,MAJS,WAICH,SAJD,aAICA,SAJD,cAICA,SAJD,GAIc,EAJd,OAAZ;AAMA,sBACE,KAAC,kBAAD;AAAoB,IAAA,GAAG,EAAEP,GAAzB;AAAA,2BACE,KAAC,iBAAD;AAAmB,MAAA,EAAE,YAAKC,EAAL,UAArB;AAAqC,+BAAgBA,EAAhB,UAArC;AAAgE,MAAA,SAAS,EAAEQ;AAA3E,OAAoFD,IAApF;AAAA,gBACGH;AADH;AADF,IADF;AAOD,CAdmB,CAApB;;AAREJ,EAAAA,E;AACAC,EAAAA,U;AACAC,EAAAA,Q;AACAC,EAAAA,iB;AACAC,EAAAA,Q;;AAoBF,eAAeP,WAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles } from '../../styles/index';\nimport { ComponentMStyling, ComponentSStyling } from '../../styles';\nimport { Size } from '../../types';\n\nexport const SearchFieldWrapper = styled.div`\n  &.focus-visible-within {\n    ${focusStyles}\n  }\n`;\n\nexport const StyledSearchField = styled.div<{ activeValidationMessage?: boolean }>`\n  display: flex;\n  flex-direction: row;\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n  box-sizing: border-box;\n  border-radius: 56px;\n  align-items: center;\n  position: relative;\n  height: 48px;\n  appearance: none;\n  background-color: ${COLORS.white};\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  padding: 0 !important;\n  width: 100%;\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n    height: 56px;\n    padding: 0 4px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    height: 48px;\n    padding: 0 !important;\n\n    &::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    height: 56px;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  div {\n    color: ${COLORS.neutral_600};\n    background-color: transparent;\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n  }\n\n  &.disabled {\n    box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n    pointer-events: none;\n    background-color: transparent !important;\n  }\n`;\n\ntype SeachFieldProps = React.HTMLAttributes<HTMLDivElement> & {\n  id: string;\n  searchTerm?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  children: any;\n  size?: Size.Small | Size.Medium;\n};\n\nconst SearchField = React.forwardRef<HTMLDivElement, SeachFieldProps>(({ id, searchTerm, disabled, validationMessage, children, size, className, ...rest }, ref) => {\n  const cls = (disabled ? 'disabled ' : '')\n    .concat(searchTerm !== '' ? 'searchactive ' : '')\n    .concat(size ? `${size} ` : '')\n    .concat(validationMessage ? ' invalid ' : '')\n    .concat(`${className ?? ''} `);\n\n  return (\n    <SearchFieldWrapper ref={ref}>\n      <StyledSearchField id={`${id}_main`} data-testid={`${id}_main`} className={cls} {...rest}>\n        {children}\n      </StyledSearchField>\n    </SearchFieldWrapper>\n  );\n});\n\nexport default SearchField;\n"],"file":"SearchField.js"}
+{"version":3,"file":"SearchField.js","names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","ComponentMStyling","ComponentSStyling","SearchFieldWrapper","div","StyledSearchField","neutral_400","white","Regular","black","Italic","neutral_500","MEDIUM","primary_800","neutral_600","critical_400","neutral_100","SearchField","forwardRef","ref","id","searchTerm","disabled","validationMessage","children","size","className","rest","cls","concat"],"sources":["../../../src/InputFields/components/SearchField.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles } from '../../styles/index';\nimport { ComponentMStyling, ComponentSStyling } from '../../styles';\nimport { Size } from '../../types';\n\nexport const SearchFieldWrapper = styled.div`\n  &.focus-visible-within {\n    ${focusStyles}\n  }\n`;\n\nexport const StyledSearchField = styled.div<{ activeValidationMessage?: boolean }>`\n  display: flex;\n  flex-direction: row;\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n  box-sizing: border-box;\n  border-radius: 56px;\n  align-items: center;\n  position: relative;\n  height: 48px;\n  appearance: none;\n  background-color: ${COLORS.white};\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  padding: 0 !important;\n  width: 100%;\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n    height: 56px;\n    padding: 0 4px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    height: 48px;\n    padding: 0 !important;\n\n    &::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    height: 56px;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  div {\n    color: ${COLORS.neutral_600};\n    background-color: transparent;\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n  }\n\n  &.disabled {\n    box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n    pointer-events: none;\n    background-color: transparent !important;\n  }\n`;\n\ntype SeachFieldProps = React.HTMLAttributes<HTMLDivElement> & {\n  id: string;\n  searchTerm?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  children: any;\n  size?: Size.Small | Size.Medium;\n};\n\nconst SearchField = React.forwardRef<HTMLDivElement, SeachFieldProps>(({ id, searchTerm, disabled, validationMessage, children, size, className, ...rest }, ref) => {\n  const cls = (disabled ? 'disabled ' : '')\n    .concat(searchTerm !== '' ? 'searchactive ' : '')\n    .concat(size ? `${size} ` : '')\n    .concat(validationMessage ? ' invalid ' : '')\n    .concat(`${className ?? ''} `);\n\n  return (\n    <SearchFieldWrapper ref={ref}>\n      <StyledSearchField id={`${id}_main`} data-testid={`${id}_main`} className={cls} {...rest}>\n        {children}\n      </StyledSearchField>\n    </SearchFieldWrapper>\n  );\n});\n\nexport default SearchField;\n"],"mappings":";;;;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,WAAT,EAAsBC,MAAtB,EAA8BC,kBAA9B,EAAkDC,WAAlD,QAAqE,oBAArE;AACA,SAASC,iBAAT,EAA4BC,iBAA5B,QAAqD,cAArD;;AAGA,OAAO,IAAMC,kBAAkB,GAAGP,MAAM,CAACQ,GAAV,mHAEzBJ,WAFyB,CAAxB;AAMP,OAAO,IAAMK,iBAAiB,GAAGT,MAAM,CAACQ,GAAV,8mCAGEN,MAAM,CAACQ,WAHT,EAURR,MAAM,CAACS,KAVC,EAY1BL,iBAAiB,CAACH,kBAAkB,CAACS,OAApB,EAA6BV,MAAM,CAACW,KAApC,CAZS,EAkBxBP,iBAAiB,CAACH,kBAAkB,CAACW,MAApB,EAA4BZ,MAAM,CAACa,WAAnC,CAlBO,EAqB1Bd,WAAW,CAACe,MArBc,EAsBxBX,iBAAiB,CAACF,kBAAkB,CAACS,OAApB,EAA6BV,MAAM,CAACW,KAApC,CAtBO,EA4BtBR,iBAAiB,CAACF,kBAAkB,CAACW,MAApB,EAA4BZ,MAAM,CAACa,WAAnC,CA5BK,EAiCxBT,iBAAiB,CAACH,kBAAkB,CAACS,OAApB,EAA6BV,MAAM,CAACW,KAApC,CAjCO,EAsCtBP,iBAAiB,CAACH,kBAAkB,CAACW,MAApB,EAA4BZ,MAAM,CAACa,WAAnC,CAtCK,EA2CxBV,iBAAiB,CAACF,kBAAkB,CAACS,OAApB,EAA6BV,MAAM,CAACW,KAApC,CA3CO,EA+CtBR,iBAAiB,CAACF,kBAAkB,CAACW,MAApB,EAA4BZ,MAAM,CAACa,WAAnC,CA/CK,EAoDIb,MAAM,CAACe,WApDX,EAwDIf,MAAM,CAACe,WAxDX,EA4DjBf,MAAM,CAACgB,WA5DU,EAiEIhB,MAAM,CAACiB,YAjEX,EAqEIjB,MAAM,CAACkB,WArEX,CAAvB;AAoFP,IAAMC,WAAW,gBAAGtB,KAAK,CAACuB,UAAN,CAAkD,gBAAsFC,GAAtF,EAA8F;EAAA,IAA3FC,EAA2F,QAA3FA,EAA2F;EAAA,IAAvFC,UAAuF,QAAvFA,UAAuF;EAAA,IAA3EC,QAA2E,QAA3EA,QAA2E;EAAA,IAAjEC,iBAAiE,QAAjEA,iBAAiE;EAAA,IAA9CC,QAA8C,QAA9CA,QAA8C;EAAA,IAApCC,IAAoC,QAApCA,IAAoC;EAAA,IAA9BC,SAA8B,QAA9BA,SAA8B;EAAA,IAAhBC,IAAgB;;EAClK,IAAMC,GAAG,GAAG,CAACN,QAAQ,GAAG,WAAH,GAAiB,EAA1B,EACTO,MADS,CACFR,UAAU,KAAK,EAAf,GAAoB,eAApB,GAAsC,EADpC,EAETQ,MAFS,CAEFJ,IAAI,aAAMA,IAAN,SAAgB,EAFlB,EAGTI,MAHS,CAGFN,iBAAiB,GAAG,WAAH,GAAiB,EAHhC,EAITM,MAJS,WAICH,SAJD,aAICA,SAJD,cAICA,SAJD,GAIc,EAJd,OAAZ;EAMA,oBACE,KAAC,kBAAD;IAAoB,GAAG,EAAEP,GAAzB;IAAA,uBACE,KAAC,iBAAD;MAAmB,EAAE,YAAKC,EAAL,UAArB;MAAqC,yBAAgBA,EAAhB,UAArC;MAAgE,SAAS,EAAEQ;IAA3E,GAAoFD,IAApF;MAAA,UACGH;IADH;EADF,EADF;AAOD,CAdmB,CAApB;;EAREJ,E;EACAC,U;EACAC,Q;EACAC,iB;EACAC,Q;;AAoBF,eAAeP,WAAf"}

package/dist/InputFields/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["import TextField from './TextField';\nimport PasswordField from './PasswordField';\nimport Checkbox from './Checkbox';\nimport RadioButton from './RadioButton';\nimport SearchBar from './SearchBar';\nimport InputLabel from './Label';\nimport DatepickerField from './DatepickerField';\nimport Textarea from './Textarea';\nimport QuickSearch from './QuickSearch';\nimport NumberField from './NumberField';\n\nexport * from './styling';\n\nexport {\n  TextField,\n  PasswordField,\n  Checkbox,\n  RadioButton,\n  SearchBar,\n  InputLabel,\n  DatepickerField,\n  Textarea,\n  QuickSearch,\n  NumberField\n};\n"],"file":"index.cjs"}
+{"version":3,"file":"index.cjs","names":[],"sources":["../../src/InputFields/index.ts"],"sourcesContent":["import TextField from './TextField';\nimport PasswordField from './PasswordField';\nimport Checkbox from './Checkbox';\nimport RadioButton from './RadioButton';\nimport SearchBar from './SearchBar';\nimport InputLabel from './Label';\nimport DatepickerField from './DatepickerField';\nimport Textarea from './Textarea';\nimport QuickSearch from './QuickSearch';\nimport NumberField from './NumberField';\n\nexport * from './styling';\n\nexport {\n  TextField,\n  PasswordField,\n  Checkbox,\n  RadioButton,\n  SearchBar,\n  InputLabel,\n  DatepickerField,\n  Textarea,\n  QuickSearch,\n  NumberField\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/dist/InputFields/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/index.ts"],"names":["TextField","PasswordField","Checkbox","RadioButton","SearchBar","InputLabel","DatepickerField","Textarea","QuickSearch","NumberField"],"mappings":"AAAA,OAAOA,SAAP,MAAsB,aAAtB;AACA,OAAOC,aAAP,MAA0B,iBAA1B;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,WAAP,MAAwB,eAAxB;AACA,OAAOC,SAAP,MAAsB,aAAtB;AACA,OAAOC,UAAP,MAAuB,SAAvB;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,WAAP,MAAwB,eAAxB;AACA,OAAOC,WAAP,MAAwB,eAAxB;AAEA,cAAc,WAAd;AAEA,SACET,SADF,EAEEC,aAFF,EAGEC,QAHF,EAIEC,WAJF,EAKEC,SALF,EAMEC,UANF,EAOEC,eAPF,EAQEC,QARF,EASEC,WATF,EAUEC,WAVF","sourcesContent":["import TextField from './TextField';\nimport PasswordField from './PasswordField';\nimport Checkbox from './Checkbox';\nimport RadioButton from './RadioButton';\nimport SearchBar from './SearchBar';\nimport InputLabel from './Label';\nimport DatepickerField from './DatepickerField';\nimport Textarea from './Textarea';\nimport QuickSearch from './QuickSearch';\nimport NumberField from './NumberField';\n\nexport * from './styling';\n\nexport {\n  TextField,\n  PasswordField,\n  Checkbox,\n  RadioButton,\n  SearchBar,\n  InputLabel,\n  DatepickerField,\n  Textarea,\n  QuickSearch,\n  NumberField\n};\n"],"file":"index.js"}
+{"version":3,"file":"index.js","names":["TextField","PasswordField","Checkbox","RadioButton","SearchBar","InputLabel","DatepickerField","Textarea","QuickSearch","NumberField"],"sources":["../../src/InputFields/index.ts"],"sourcesContent":["import TextField from './TextField';\nimport PasswordField from './PasswordField';\nimport Checkbox from './Checkbox';\nimport RadioButton from './RadioButton';\nimport SearchBar from './SearchBar';\nimport InputLabel from './Label';\nimport DatepickerField from './DatepickerField';\nimport Textarea from './Textarea';\nimport QuickSearch from './QuickSearch';\nimport NumberField from './NumberField';\n\nexport * from './styling';\n\nexport {\n  TextField,\n  PasswordField,\n  Checkbox,\n  RadioButton,\n  SearchBar,\n  InputLabel,\n  DatepickerField,\n  Textarea,\n  QuickSearch,\n  NumberField\n};\n"],"mappings":"AAAA,OAAOA,SAAP,MAAsB,aAAtB;AACA,OAAOC,aAAP,MAA0B,iBAA1B;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,WAAP,MAAwB,eAAxB;AACA,OAAOC,SAAP,MAAsB,aAAtB;AACA,OAAOC,UAAP,MAAuB,SAAvB;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,WAAP,MAAwB,eAAxB;AACA,OAAOC,WAAP,MAAwB,eAAxB;AAEA,cAAc,WAAd;AAEA,SACET,SADF,EAEEC,aAFF,EAGEC,QAHF,EAIEC,WAJF,EAKEC,SALF,EAMEC,UANF,EAOEC,eAPF,EAQEC,QARF,EASEC,WATF,EAUEC,WAVF"}

package/dist/InputFields/styling.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/styling.ts"],"names":["InputWrapper","styled","div","props","readOnly","disabled","margin","readOnlyState","css","COLORS","neutral_100","neutral_300","neutral_600","activeErrorMessageState","critical_400","InputFieldStyling","input","withoutBorder","neutral_400","ComponentTextStyle","Italic","neutral_500","BREAKPOINTS","MEDIUM","black","activeErrorMessage","suppressReadOnlyStyles","primary_800","focusStyles","correct_500","primary_700","ValidationStyling","Regular","Warning","ErrorMessage","critical_500","ValidationMessage","type","NoteMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;AAGO,IAAMA,YAAY,GAAGC,0BAAOC,GAAV,gJAErB,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,QAAN,IAAkBD,KAAK,CAACE,QAAxB,GAAmC,sBAAnC,GAA4D,EAAxE;AAAA,CAFqB,EAGrB,UAACF,KAAD;AAAA,SAAYA,KAAK,CAACG,MAAN,qBAA0BH,KAAK,CAACG,MAAhC,SAA4C,EAAxD;AAAA,CAHqB,CAAlB;;;AAOP,IAAMC,aAAa,OAAGC,qBAAH,kQACGC,eAAOC,WADV,EAEaD,eAAOE,WAFpB,EAGRF,eAAOG,WAHC,CAAnB;AAQO,IAAMC,uBAAuB,OAAGL,qBAAH,8HACJC,eAAOK,YADH,CAA7B;;;AAIP,IAAMC,iBAAiB,GAAGd,0BAAOe,KAAV,ynDAanB,UAACb,KAAD;AAAA,SACAA,KAAK,CAACc,aAAN,oJAKiDR,eAAOS,WALxD,6DAM2CT,eAAOS,WANlD,wDAOsCT,eAAOS,WAP7C,MADA;AAAA,CAbmB,EAgCjB,mCAAkBC,+BAAmBC,MAArC,EAA6CX,eAAOY,WAApD,CAhCiB,EAmCnBC,oBAAYC,MAnCO,EA0Cf,mCAAkBJ,+BAAmBC,MAArC,EAA6CX,eAAOY,WAApD,CA1Ce,EA6DZZ,eAAOe,KA7DK,EA+DnB,UAACrB,KAAD;AAAA,SAAYA,KAAK,CAACsB,kBAAN,GAA2BZ,uBAA3B,GAAqD,EAAjE;AAAA,CA/DmB,EAkEjB,UAACV,KAAD;AAAA,SAAYA,KAAK,CAACuB,sBAAN,GAA+B,EAA/B,GAAoCnB,aAAhD;AAAA,CAlEiB,EAsECE,eAAOC,WAtER,EA2EVD,eAAOE,WA3EG,EA8EiBF,eAAOkB,WA9ExB,EAkFjBC,mBAlFiB,EAsFWnB,eAAOK,YAtFlB,EAyFWL,eAAOoB,WAzFlB,EAqGiBpB,eAAOqB,WArGxB,EAyGiBrB,eAAOkB,WAzGxB,CAAvB;;;AAqHA,IAAMI,iBAAiB,OAAGvB,qBAAH,sUAEjB,qCAAoBW,+BAAmBa,OAAvC,EAAgDvB,eAAOe,KAAvD,CAFiB,EAWjB,qCAAoBL,+BAAmBa,OAAvC,EAAgD,SAAhD,CAXiB,CAAvB;;;AAiBO,IAAMC,OAAO,GAAGhC,0BAAOC,GAAV,ujBAGhB,qCAAoBiB,+BAAmBa,OAAvC,EAAgD,IAAhD,CAHgB,EAUhBV,oBAAYC,MAVI,EAWd,oCAAmBJ,+BAAmBa,OAAtC,EAA+C,IAA/C,CAXc,EAmBd,qCAAoBb,+BAAmBa,OAAvC,EAAgD,IAAhD,CAnBc,EA0Bd,oCAAmBb,+BAAmBa,OAAtC,EAA+C,IAA/C,CA1Bc,CAAb;;;AA0CA,IAAME,YAAY,GAAG,+BAAOD,OAAP,CAAH,wGACdxB,eAAO0B,YADO,CAAlB;;AAIA,IAAMC,iBAAiB,GAAG,+BAAOH,OAAP,CAAH,wGACnB,UAAC9B,KAAD;AAAA,SAAYA,KAAK,CAACkC,IAAN,KAAe,SAAf,GAA2B5B,eAAO0B,YAAlC,GAAiD1B,eAAOoB,WAApE;AAAA,CADmB,CAAvB;;AAIA,IAAMS,WAAW,GAAG,+BAAOL,OAAP,CAAH,wGACbxB,eAAOY,WADM,CAAjB;;AAGA,IAAMkB,iBAAiB,GAAG,+BAAON,OAAP,CAAH,0GACnBxB,eAAOG,WADY,CAAvB;;;AAMA,IAAM4B,UAAU,GAAGvC,0BAAOC,GAAV,gHAAhB;;;AAIA,IAAMuC,iBAAiB,GAAG,+BAAOD,UAAP,CAAH,uIAAvB","sourcesContent":["import styled, { css } from 'styled-components';\nimport { BREAKPOINTS, COLORS, focusStyles } from '../styles';\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';\nimport { Size } from '../types';\n\nexport const InputWrapper = styled.div<{ readOnly?: boolean; disabled?: boolean; margin?: string }>`\n  outline: none;\n  ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')};\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n  position: relative;\n`;\n\nconst readOnlyState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_300} !important;\n  color: ${COLORS.neutral_600} !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n`;\nexport const activeErrorMessageState = css`\n  box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n`;\n\nconst InputFieldStyling = styled.input<{\n  activeErrorMessage?: boolean;\n  active?: boolean;\n  withoutBorder?: boolean;\n  size?: string;\n  suppressReadOnlyStyles?: boolean;\n}>`\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ${(props) =>\n    props.withoutBorder\n      ? `-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      `\n      : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};`}\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 16px !important;\n\n  outline: none;\n  position: relative;\n\n  font-size: 16px;\n\n  &::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px;\n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px;\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  color: ${COLORS.black} !important;\n\n  ${(props) => (props.activeErrorMessage ? activeErrorMessageState : '')}\n\n  &:read-only:not(:disabled) {\n    ${(props) => (props.suppressReadOnlyStyles ? '' : readOnlyState)}\n  }\n\n  &:disabled {\n    border: 1px solid ${COLORS.neutral_100};\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ${COLORS.neutral_300} !important;\n  }\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.focus-visible {\n    ${focusStyles}\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n  }\n  &.valid {\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &.invalid {\n    margin-bottom: 0 !important;\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n  }\n\n  &.active {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n`;\n\nconst ValidationStyling = css`\n  &.error-msg {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    text-align: center;\n    font-weight: 400;\n    box-sizing: border-box;\n  }\n\n  &.error-msg {\n    padding-top: 8px;\n    padding-bottom: 0;\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468')}\n    font-weight: 700;\n    line-height: 15px;\n  }\n`;\n\nexport const Warning = styled.div`\n  display: flex;\n  align-items: center;\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  &.small {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  }\n  &.medium {\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  & * {\n    vertical-align: middle;\n    display: inline-block;\n  }\n\n  svg {\n    margin-right: 4px;\n  }\n`;\nexport const ErrorMessage = styled(Warning)`\n  color: ${COLORS.critical_500};\n`;\n\nexport const ValidationMessage = styled(Warning)<{ type: 'valid' | 'invalid' }>`\n  color: ${(props) => (props.type === 'invalid' ? COLORS.critical_500 : COLORS.correct_500)};\n`;\n\nexport const NoteMessage = styled(Warning)`\n  color: ${COLORS.neutral_500};\n`;\nexport const AutofilledMessage = styled(Warning)`\n  color: ${COLORS.neutral_600};\n`;\n\nexport { ValidationStyling, InputFieldStyling };\n\nexport const StyledIcon = styled.div`\n  border-radius: 50%;\n`;\n\nexport const SearchIconWrapper = styled(StyledIcon)`\n  position: absolute;\n  border-radius: 50%;\n`;\n"],"file":"styling.cjs"}
+{"version":3,"file":"styling.cjs","names":["InputWrapper","styled","div","props","readOnly","disabled","margin","readOnlyState","css","COLORS","neutral_100","neutral_300","neutral_600","activeErrorMessageState","critical_400","InputFieldStyling","input","withoutBorder","neutral_400","ComponentSStyling","ComponentTextStyle","Italic","neutral_500","BREAKPOINTS","MEDIUM","ComponentMStyling","black","activeErrorMessage","suppressReadOnlyStyles","primary_800","focusStyles","correct_500","primary_700","ValidationStyling","ComponentXXSStyling","Regular","Warning","ComponentXSStyling","ErrorMessage","critical_500","ValidationMessage","type","NoteMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"sources":["../../src/InputFields/styling.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { BREAKPOINTS, COLORS, focusStyles } from '../styles';\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';\nimport { Size } from '../types';\n\nexport const InputWrapper = styled.div<{ readOnly?: boolean; disabled?: boolean; margin?: string }>`\n  outline: none;\n  ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')};\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n  position: relative;\n`;\n\nconst readOnlyState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_300} !important;\n  color: ${COLORS.neutral_600} !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n`;\nexport const activeErrorMessageState = css`\n  box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n`;\n\nconst InputFieldStyling = styled.input<{\n  activeErrorMessage?: boolean;\n  active?: boolean;\n  withoutBorder?: boolean;\n  size?: string;\n  suppressReadOnlyStyles?: boolean;\n}>`\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ${(props) =>\n    props.withoutBorder\n      ? `-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      `\n      : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};`}\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 16px !important;\n\n  outline: none;\n  position: relative;\n\n  font-size: 16px;\n\n  &::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px;\n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px;\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  color: ${COLORS.black} !important;\n\n  ${(props) => (props.activeErrorMessage ? activeErrorMessageState : '')}\n\n  &:read-only:not(:disabled) {\n    ${(props) => (props.suppressReadOnlyStyles ? '' : readOnlyState)}\n  }\n\n  &:disabled {\n    border: 1px solid ${COLORS.neutral_100};\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ${COLORS.neutral_300} !important;\n  }\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.focus-visible {\n    ${focusStyles}\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n  }\n  &.valid {\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &.invalid {\n    margin-bottom: 0 !important;\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n  }\n\n  &.active {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n`;\n\nconst ValidationStyling = css`\n  &.error-msg {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    text-align: center;\n    font-weight: 400;\n    box-sizing: border-box;\n  }\n\n  &.error-msg {\n    padding-top: 8px;\n    padding-bottom: 0;\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468')}\n    font-weight: 700;\n    line-height: 15px;\n  }\n`;\n\nexport const Warning = styled.div`\n  display: flex;\n  align-items: center;\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  &.small {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  }\n  &.medium {\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  & * {\n    vertical-align: middle;\n    display: inline-block;\n  }\n\n  svg {\n    margin-right: 4px;\n  }\n`;\nexport const ErrorMessage = styled(Warning)`\n  color: ${COLORS.critical_500};\n`;\n\nexport const ValidationMessage = styled(Warning)<{ type: 'valid' | 'invalid' }>`\n  color: ${(props) => (props.type === 'invalid' ? COLORS.critical_500 : COLORS.correct_500)};\n`;\n\nexport const NoteMessage = styled(Warning)`\n  color: ${COLORS.neutral_500};\n`;\nexport const AutofilledMessage = styled(Warning)`\n  color: ${COLORS.neutral_600};\n`;\n\nexport { ValidationStyling, InputFieldStyling };\n\nexport const StyledIcon = styled.div`\n  border-radius: 50%;\n`;\n\nexport const SearchIconWrapper = styled(StyledIcon)`\n  position: absolute;\n  border-radius: 50%;\n`;\n"],"mappings":"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"}

package/dist/InputFields/styling.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/styling.ts"],"names":["styled","css","BREAKPOINTS","COLORS","focusStyles","ComponentXXSStyling","ComponentTextStyle","ComponentSStyling","ComponentMStyling","ComponentXSStyling","InputWrapper","div","props","readOnly","disabled","margin","readOnlyState","neutral_100","neutral_300","neutral_600","activeErrorMessageState","critical_400","InputFieldStyling","input","withoutBorder","neutral_400","Italic","neutral_500","MEDIUM","black","activeErrorMessage","suppressReadOnlyStyles","primary_800","correct_500","primary_700","ValidationStyling","Regular","Warning","ErrorMessage","critical_500","ValidationMessage","type","NoteMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { BREAKPOINTS, COLORS, focusStyles } from '../styles';\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';\nimport { Size } from '../types';\n\nexport const InputWrapper = styled.div<{ readOnly?: boolean; disabled?: boolean; margin?: string }>`\n  outline: none;\n  ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')};\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n  position: relative;\n`;\n\nconst readOnlyState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_300} !important;\n  color: ${COLORS.neutral_600} !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n`;\nexport const activeErrorMessageState = css`\n  box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n`;\n\nconst InputFieldStyling = styled.input<{\n  activeErrorMessage?: boolean;\n  active?: boolean;\n  withoutBorder?: boolean;\n  size?: string;\n  suppressReadOnlyStyles?: boolean;\n}>`\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ${(props) =>\n    props.withoutBorder\n      ? `-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      `\n      : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};`}\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 16px !important;\n\n  outline: none;\n  position: relative;\n\n  font-size: 16px;\n\n  &::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px;\n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px;\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  color: ${COLORS.black} !important;\n\n  ${(props) => (props.activeErrorMessage ? activeErrorMessageState : '')}\n\n  &:read-only:not(:disabled) {\n    ${(props) => (props.suppressReadOnlyStyles ? '' : readOnlyState)}\n  }\n\n  &:disabled {\n    border: 1px solid ${COLORS.neutral_100};\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ${COLORS.neutral_300} !important;\n  }\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.focus-visible {\n    ${focusStyles}\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n  }\n  &.valid {\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &.invalid {\n    margin-bottom: 0 !important;\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n  }\n\n  &.active {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n`;\n\nconst ValidationStyling = css`\n  &.error-msg {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    text-align: center;\n    font-weight: 400;\n    box-sizing: border-box;\n  }\n\n  &.error-msg {\n    padding-top: 8px;\n    padding-bottom: 0;\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468')}\n    font-weight: 700;\n    line-height: 15px;\n  }\n`;\n\nexport const Warning = styled.div`\n  display: flex;\n  align-items: center;\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  &.small {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  }\n  &.medium {\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  & * {\n    vertical-align: middle;\n    display: inline-block;\n  }\n\n  svg {\n    margin-right: 4px;\n  }\n`;\nexport const ErrorMessage = styled(Warning)`\n  color: ${COLORS.critical_500};\n`;\n\nexport const ValidationMessage = styled(Warning)<{ type: 'valid' | 'invalid' }>`\n  color: ${(props) => (props.type === 'invalid' ? COLORS.critical_500 : COLORS.correct_500)};\n`;\n\nexport const NoteMessage = styled(Warning)`\n  color: ${COLORS.neutral_500};\n`;\nexport const AutofilledMessage = styled(Warning)`\n  color: ${COLORS.neutral_600};\n`;\n\nexport { ValidationStyling, InputFieldStyling };\n\nexport const StyledIcon = styled.div`\n  border-radius: 50%;\n`;\n\nexport const SearchIconWrapper = styled(StyledIcon)`\n  position: absolute;\n  border-radius: 50%;\n`;\n"],"file":"styling.js"}
+{"version":3,"file":"styling.js","names":["styled","css","BREAKPOINTS","COLORS","focusStyles","ComponentXXSStyling","ComponentTextStyle","ComponentSStyling","ComponentMStyling","ComponentXSStyling","InputWrapper","div","props","readOnly","disabled","margin","readOnlyState","neutral_100","neutral_300","neutral_600","activeErrorMessageState","critical_400","InputFieldStyling","input","withoutBorder","neutral_400","Italic","neutral_500","MEDIUM","black","activeErrorMessage","suppressReadOnlyStyles","primary_800","correct_500","primary_700","ValidationStyling","Regular","Warning","ErrorMessage","critical_500","ValidationMessage","type","NoteMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"sources":["../../src/InputFields/styling.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { BREAKPOINTS, COLORS, focusStyles } from '../styles';\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';\nimport { Size } from '../types';\n\nexport const InputWrapper = styled.div<{ readOnly?: boolean; disabled?: boolean; margin?: string }>`\n  outline: none;\n  ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')};\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n  position: relative;\n`;\n\nconst readOnlyState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_300} !important;\n  color: ${COLORS.neutral_600} !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n`;\nexport const activeErrorMessageState = css`\n  box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n`;\n\nconst InputFieldStyling = styled.input<{\n  activeErrorMessage?: boolean;\n  active?: boolean;\n  withoutBorder?: boolean;\n  size?: string;\n  suppressReadOnlyStyles?: boolean;\n}>`\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ${(props) =>\n    props.withoutBorder\n      ? `-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      `\n      : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};`}\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 16px !important;\n\n  outline: none;\n  position: relative;\n\n  font-size: 16px;\n\n  &::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px;\n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px;\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  color: ${COLORS.black} !important;\n\n  ${(props) => (props.activeErrorMessage ? activeErrorMessageState : '')}\n\n  &:read-only:not(:disabled) {\n    ${(props) => (props.suppressReadOnlyStyles ? '' : readOnlyState)}\n  }\n\n  &:disabled {\n    border: 1px solid ${COLORS.neutral_100};\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ${COLORS.neutral_300} !important;\n  }\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.focus-visible {\n    ${focusStyles}\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n  }\n  &.valid {\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &.invalid {\n    margin-bottom: 0 !important;\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n  }\n\n  &.active {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n`;\n\nconst ValidationStyling = css`\n  &.error-msg {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    text-align: center;\n    font-weight: 400;\n    box-sizing: border-box;\n  }\n\n  &.error-msg {\n    padding-top: 8px;\n    padding-bottom: 0;\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468')}\n    font-weight: 700;\n    line-height: 15px;\n  }\n`;\n\nexport const Warning = styled.div`\n  display: flex;\n  align-items: center;\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  &.small {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  }\n  &.medium {\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  & * {\n    vertical-align: middle;\n    display: inline-block;\n  }\n\n  svg {\n    margin-right: 4px;\n  }\n`;\nexport const ErrorMessage = styled(Warning)`\n  color: ${COLORS.critical_500};\n`;\n\nexport const ValidationMessage = styled(Warning)<{ type: 'valid' | 'invalid' }>`\n  color: ${(props) => (props.type === 'invalid' ? COLORS.critical_500 : COLORS.correct_500)};\n`;\n\nexport const NoteMessage = styled(Warning)`\n  color: ${COLORS.neutral_500};\n`;\nexport const AutofilledMessage = styled(Warning)`\n  color: ${COLORS.neutral_600};\n`;\n\nexport { ValidationStyling, InputFieldStyling };\n\nexport const StyledIcon = styled.div`\n  border-radius: 50%;\n`;\n\nexport const SearchIconWrapper = styled(StyledIcon)`\n  position: absolute;\n  border-radius: 50%;\n`;\n"],"mappings":"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"}

package/dist/InputFields/types.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"types.cjs"}
+{"version":3,"file":"types.cjs","names":[],"sources":["../../src/InputFields/types.ts"],"sourcesContent":["import { Size } from '../types';\n\nexport type TextFieldProps = {\n  id: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  onChange?: (text: string) => void;\n  value?: string;\n  validationMessage?: string;\n  type?: string;\n  state?: 'invalid' | 'valid';\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  pattern?: string;\n  maxLength?: number;\n  withoutBorder?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  note?: TextFieldNote;\n};\n\nexport type TextareaProps =\n  Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'placeholder' | 'disabled' | 'required' | 'onChange'>\n  & {\n  id: string;\n  placeholder: string;\n  value?: string;\n  disabled?: boolean;\n  state?: 'invalid' | 'valid';\n  onChange?: (text: string) => void;\n  validationMessage?: string;\n  size: Size.Small | Size.Medium;\n  autoHeight?: boolean;\n  margin?: string;\n  note?: TextFieldNote;\n  required: boolean;\n};\n\nexport type TextFieldNote = {\n  message: string;\n  icon: React.ReactNode;\n};\n"],"mappings":""}

package/dist/InputFields/types.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Size } from '../types';
 export declare type TextFieldProps = {
     id: string;

package/dist/InputFields/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"types.js"}
+{"version":3,"file":"types.js","names":[],"sources":["../../src/InputFields/types.ts"],"sourcesContent":["import { Size } from '../types';\n\nexport type TextFieldProps = {\n  id: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  onChange?: (text: string) => void;\n  value?: string;\n  validationMessage?: string;\n  type?: string;\n  state?: 'invalid' | 'valid';\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  pattern?: string;\n  maxLength?: number;\n  withoutBorder?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  note?: TextFieldNote;\n};\n\nexport type TextareaProps =\n  Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'placeholder' | 'disabled' | 'required' | 'onChange'>\n  & {\n  id: string;\n  placeholder: string;\n  value?: string;\n  disabled?: boolean;\n  state?: 'invalid' | 'valid';\n  onChange?: (text: string) => void;\n  validationMessage?: string;\n  size: Size.Small | Size.Medium;\n  autoHeight?: boolean;\n  margin?: string;\n  note?: TextFieldNote;\n  required: boolean;\n};\n\nexport type TextFieldNote = {\n  message: string;\n  icon: React.ReactNode;\n};\n"],"mappings":""}

package/dist/Layouts/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Layouts/index.ts"],"names":["GRID","GAP","SMALL","MEDIUM","LARGE","GUTTER","PageWidth","styled","div","BREAKPOINTS","XLARGE","props","useMaxWidth","maxWidth","Columns","section","gap","columns","printColumns","ContainerMargins"],"mappings":";;;;;;;;;;;AAAA;;AAEA;;;;AAEA,IAAMA,IAAI,GAAG;AACXC,EAAAA,GAAG,EAAE;AACHC,IAAAA,KAAK,EAAE,MADJ;AAEHC,IAAAA,MAAM,EAAE,MAFL;AAGHC,IAAAA,KAAK,EAAE;AAHJ,GADM;AAMXC,EAAAA,MAAM,EAAE;AACNH,IAAAA,KAAK,EAAE,MADD;AAENC,IAAAA,MAAM,EAAE,MAFF;AAGNC,IAAAA,KAAK,EAAE;AAHD;AANG,CAAb;;AAaO,IAAME,SAAS,GAAGC,0BAAOC,GAAV,kQAERR,IAAI,CAACK,MAAL,CAAYH,KAFJ,EAIlBO,oBAAYN,MAJM,EAKNH,IAAI,CAACK,MAAL,CAAYF,MALN,EAOlBM,oBAAYL,KAPM,EAQNJ,IAAI,CAACK,MAAL,CAAYD,KARN,EAWlBK,oBAAYC,MAXM,EAYL,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,WAAN,GAAqBD,KAAK,CAACE,QAAN,GAAiB,sBAAsBF,KAAK,CAACE,QAA5B,GAAuC,KAAxD,GAAgE,oBAArF,GAA6G,QAAzH;AAAA,CAZK,CAAf;;;;AAiBA,IAAMC,OAAO,GAAGP,0BAAOQ,OAAV,ooBAGN,UAACJ,KAAD;AAAA,SAAWA,KAAK,CAACK,GAAN,IAAahB,IAAI,CAACC,GAAL,CAASC,KAAjC;AAAA,CAHM,EAMhBO,oBAAYN,MANI,EAOS,UAACQ,KAAD;AAAA,SAAWA,KAAK,CAACM,OAAjB;AAAA,CAPT,EAQI,UAACN,KAAD;AAAA,SAAWA,KAAK,CAACM,OAAjB;AAAA,CARJ,EASJ,UAACN,KAAD;AAAA,SAAWA,KAAK,CAACK,GAAN,IAAahB,IAAI,CAACC,GAAL,CAASE,MAAjC;AAAA,CATI,EAYhBM,oBAAYL,KAZI,EAaJ,UAACO,KAAD;AAAA,SAAWA,KAAK,CAACK,GAAN,IAAahB,IAAI,CAACC,GAAL,CAASG,KAAjC;AAAA,CAbI,EAoBCJ,IAAI,CAACC,GAAL,CAASE,MApBV,EA0BS,UAACQ,KAAD;AAAA,SAAWA,KAAK,CAACO,YAAN,IAAsB,MAAjC;AAAA,CA1BT,CAAb;;;;AA8BA,IAAMC,gBAAgB,GAAGZ,0BAAOC,GAAV,k1BAAtB","sourcesContent":["import styled from 'styled-components';\n\nimport { BREAKPOINTS } from '../styles';\n\nconst GRID = {\n  GAP: {\n    SMALL: '24px',\n    MEDIUM: '32px',\n    LARGE: '40px',\n  },\n  GUTTER: {\n    SMALL: '16px',\n    MEDIUM: '32px',\n    LARGE: '56px',\n  },\n};\n\nexport const PageWidth = styled.div<{ useMaxWidth?: boolean; maxWidth?: number }>`\n  display: block;\n  margin: 0 ${GRID.GUTTER.SMALL};\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 ${GRID.GUTTER.MEDIUM};\n  }\n  ${BREAKPOINTS.LARGE} {\n    margin: 0 ${GRID.GUTTER.LARGE};\n  }\n\n  ${BREAKPOINTS.XLARGE} {\n    max-width: ${(props) => (props.useMaxWidth ? (props.maxWidth ? 'min(100% - 112px,' + props.maxWidth + 'px)' : 'calc(100% - 112px)') : '1088px')};\n    margin: 0 auto;\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\nexport const ContainerMargins = styled.div`\n  /* X small devices (mobile phones, 320px and up) */\n  @media only screen and (min-width: 320px) {\n    margin: 16px;\n    column-gap: 16px;\n  }\n\n  /* Small devices (portrait tablets, 576px and up) */\n  @media only screen and (min-width: 576px) {\n    margin: 16px;\n    column-gap: 16px;\n  }\n\n  /* Medium devices (landscape tablets, 768px and up) */\n  @media only screen and (min-width: 768px) {\n    margin: 32px;\n    column-gap: 32px;\n  }\n\n  /* Large devices (laptops/desktops, 992px and up) */\n  @media only screen and (min-width: 992px) {\n    margin: 56px;\n    column-gap: 24px;\n  }\n\n  /* X large devices (laptops/desktops, 1200px and up) */\n  @media only screen and (min-width: 1200px) {\n    margin: 56px;\n    column-gap: 40px;\n  }\n`;\n"],"file":"index.cjs"}
+{"version":3,"file":"index.cjs","names":["GRID","GAP","SMALL","MEDIUM","LARGE","GUTTER","PageWidth","styled","div","BREAKPOINTS","XLARGE","props","useMaxWidth","maxWidth","Columns","section","gap","columns","printColumns","ContainerMargins"],"sources":["../../src/Layouts/index.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { BREAKPOINTS } from '../styles';\n\nconst GRID = {\n  GAP: {\n    SMALL: '24px',\n    MEDIUM: '32px',\n    LARGE: '40px',\n  },\n  GUTTER: {\n    SMALL: '16px',\n    MEDIUM: '32px',\n    LARGE: '56px',\n  },\n};\n\nexport const PageWidth = styled.div<{ useMaxWidth?: boolean; maxWidth?: number }>`\n  display: block;\n  margin: 0 ${GRID.GUTTER.SMALL};\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 ${GRID.GUTTER.MEDIUM};\n  }\n  ${BREAKPOINTS.LARGE} {\n    margin: 0 ${GRID.GUTTER.LARGE};\n  }\n\n  ${BREAKPOINTS.XLARGE} {\n    max-width: ${(props) => (props.useMaxWidth ? (props.maxWidth ? 'min(100% - 112px,' + props.maxWidth + 'px)' : 'calc(100% - 112px)') : '1088px')};\n    margin: 0 auto;\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\nexport const ContainerMargins = styled.div`\n  /* X small devices (mobile phones, 320px and up) */\n  @media only screen and (min-width: 320px) {\n    margin: 16px;\n    column-gap: 16px;\n  }\n\n  /* Small devices (portrait tablets, 576px and up) */\n  @media only screen and (min-width: 576px) {\n    margin: 16px;\n    column-gap: 16px;\n  }\n\n  /* Medium devices (landscape tablets, 768px and up) */\n  @media only screen and (min-width: 768px) {\n    margin: 32px;\n    column-gap: 32px;\n  }\n\n  /* Large devices (laptops/desktops, 992px and up) */\n  @media only screen and (min-width: 992px) {\n    margin: 56px;\n    column-gap: 24px;\n  }\n\n  /* X large devices (laptops/desktops, 1200px and up) */\n  @media only screen and (min-width: 1200px) {\n    margin: 56px;\n    column-gap: 40px;\n  }\n`;\n"],"mappings":";;;;;;;;;;;AAAA;;AAEA;;;;AAEA,IAAMA,IAAI,GAAG;EACXC,GAAG,EAAE;IACHC,KAAK,EAAE,MADJ;IAEHC,MAAM,EAAE,MAFL;IAGHC,KAAK,EAAE;EAHJ,CADM;EAMXC,MAAM,EAAE;IACNH,KAAK,EAAE,MADD;IAENC,MAAM,EAAE,MAFF;IAGNC,KAAK,EAAE;EAHD;AANG,CAAb;;AAaO,IAAME,SAAS,GAAGC,yBAAA,CAAOC,GAAV,kQAERR,IAAI,CAACK,MAAL,CAAYH,KAFJ,EAIlBO,mBAAA,CAAYN,MAJM,EAKNH,IAAI,CAACK,MAAL,CAAYF,MALN,EAOlBM,mBAAA,CAAYL,KAPM,EAQNJ,IAAI,CAACK,MAAL,CAAYD,KARN,EAWlBK,mBAAA,CAAYC,MAXM,EAYL,UAACC,KAAD;EAAA,OAAYA,KAAK,CAACC,WAAN,GAAqBD,KAAK,CAACE,QAAN,GAAiB,sBAAsBF,KAAK,CAACE,QAA5B,GAAuC,KAAxD,GAAgE,oBAArF,GAA6G,QAAzH;AAAA,CAZK,CAAf;;;;AAiBA,IAAMC,OAAO,GAAGP,yBAAA,CAAOQ,OAAV,ooBAGN,UAACJ,KAAD;EAAA,OAAWA,KAAK,CAACK,GAAN,IAAahB,IAAI,CAACC,GAAL,CAASC,KAAjC;AAAA,CAHM,EAMhBO,mBAAA,CAAYN,MANI,EAOS,UAACQ,KAAD;EAAA,OAAWA,KAAK,CAACM,OAAjB;AAAA,CAPT,EAQI,UAACN,KAAD;EAAA,OAAWA,KAAK,CAACM,OAAjB;AAAA,CARJ,EASJ,UAACN,KAAD;EAAA,OAAWA,KAAK,CAACK,GAAN,IAAahB,IAAI,CAACC,GAAL,CAASE,MAAjC;AAAA,CATI,EAYhBM,mBAAA,CAAYL,KAZI,EAaJ,UAACO,KAAD;EAAA,OAAWA,KAAK,CAACK,GAAN,IAAahB,IAAI,CAACC,GAAL,CAASG,KAAjC;AAAA,CAbI,EAoBCJ,IAAI,CAACC,GAAL,CAASE,MApBV,EA0BS,UAACQ,KAAD;EAAA,OAAWA,KAAK,CAACO,YAAN,IAAsB,MAAjC;AAAA,CA1BT,CAAb;;;;AA8BA,IAAMC,gBAAgB,GAAGZ,yBAAA,CAAOC,GAAV,k1BAAtB"}

package/dist/Layouts/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Layouts/index.ts"],"names":["styled","BREAKPOINTS","GRID","GAP","SMALL","MEDIUM","LARGE","GUTTER","PageWidth","div","XLARGE","props","useMaxWidth","maxWidth","Columns","section","gap","columns","printColumns","ContainerMargins"],"mappings":";;;;AAAA,OAAOA,MAAP,MAAmB,mBAAnB;AAEA,SAASC,WAAT,QAA4B,WAA5B;AAEA,IAAMC,IAAI,GAAG;AACXC,EAAAA,GAAG,EAAE;AACHC,IAAAA,KAAK,EAAE,MADJ;AAEHC,IAAAA,MAAM,EAAE,MAFL;AAGHC,IAAAA,KAAK,EAAE;AAHJ,GADM;AAMXC,EAAAA,MAAM,EAAE;AACNH,IAAAA,KAAK,EAAE,MADD;AAENC,IAAAA,MAAM,EAAE,MAFF;AAGNC,IAAAA,KAAK,EAAE;AAHD;AANG,CAAb;AAaA,OAAO,IAAME,SAAS,GAAGR,MAAM,CAACS,GAAV,oPAERP,IAAI,CAACK,MAAL,CAAYH,KAFJ,EAIlBH,WAAW,CAACI,MAJM,EAKNH,IAAI,CAACK,MAAL,CAAYF,MALN,EAOlBJ,WAAW,CAACK,KAPM,EAQNJ,IAAI,CAACK,MAAL,CAAYD,KARN,EAWlBL,WAAW,CAACS,MAXM,EAYL,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,WAAN,GAAqBD,KAAK,CAACE,QAAN,GAAiB,sBAAsBF,KAAK,CAACE,QAA5B,GAAuC,KAAxD,GAAgE,oBAArF,GAA6G,QAAzH;AAAA,CAZK,CAAf;AAiBP,OAAO,IAAMC,OAAO,GAAGd,MAAM,CAACe,OAAV,snBAGN,UAACJ,KAAD;AAAA,SAAWA,KAAK,CAACK,GAAN,IAAad,IAAI,CAACC,GAAL,CAASC,KAAjC;AAAA,CAHM,EAMhBH,WAAW,CAACI,MANI,EAOS,UAACM,KAAD;AAAA,SAAWA,KAAK,CAACM,OAAjB;AAAA,CAPT,EAQI,UAACN,KAAD;AAAA,SAAWA,KAAK,CAACM,OAAjB;AAAA,CARJ,EASJ,UAACN,KAAD;AAAA,SAAWA,KAAK,CAACK,GAAN,IAAad,IAAI,CAACC,GAAL,CAASE,MAAjC;AAAA,CATI,EAYhBJ,WAAW,CAACK,KAZI,EAaJ,UAACK,KAAD;AAAA,SAAWA,KAAK,CAACK,GAAN,IAAad,IAAI,CAACC,GAAL,CAASG,KAAjC;AAAA,CAbI,EAoBCJ,IAAI,CAACC,GAAL,CAASE,MApBV,EA0BS,UAACM,KAAD;AAAA,SAAWA,KAAK,CAACO,YAAN,IAAsB,MAAjC;AAAA,CA1BT,CAAb;AA8BP,OAAO,IAAMC,gBAAgB,GAAGnB,MAAM,CAACS,GAAV,o0BAAtB","sourcesContent":["import styled from 'styled-components';\n\nimport { BREAKPOINTS } from '../styles';\n\nconst GRID = {\n  GAP: {\n    SMALL: '24px',\n    MEDIUM: '32px',\n    LARGE: '40px',\n  },\n  GUTTER: {\n    SMALL: '16px',\n    MEDIUM: '32px',\n    LARGE: '56px',\n  },\n};\n\nexport const PageWidth = styled.div<{ useMaxWidth?: boolean; maxWidth?: number }>`\n  display: block;\n  margin: 0 ${GRID.GUTTER.SMALL};\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 ${GRID.GUTTER.MEDIUM};\n  }\n  ${BREAKPOINTS.LARGE} {\n    margin: 0 ${GRID.GUTTER.LARGE};\n  }\n\n  ${BREAKPOINTS.XLARGE} {\n    max-width: ${(props) => (props.useMaxWidth ? (props.maxWidth ? 'min(100% - 112px,' + props.maxWidth + 'px)' : 'calc(100% - 112px)') : '1088px')};\n    margin: 0 auto;\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\nexport const ContainerMargins = styled.div`\n  /* X small devices (mobile phones, 320px and up) */\n  @media only screen and (min-width: 320px) {\n    margin: 16px;\n    column-gap: 16px;\n  }\n\n  /* Small devices (portrait tablets, 576px and up) */\n  @media only screen and (min-width: 576px) {\n    margin: 16px;\n    column-gap: 16px;\n  }\n\n  /* Medium devices (landscape tablets, 768px and up) */\n  @media only screen and (min-width: 768px) {\n    margin: 32px;\n    column-gap: 32px;\n  }\n\n  /* Large devices (laptops/desktops, 992px and up) */\n  @media only screen and (min-width: 992px) {\n    margin: 56px;\n    column-gap: 24px;\n  }\n\n  /* X large devices (laptops/desktops, 1200px and up) */\n  @media only screen and (min-width: 1200px) {\n    margin: 56px;\n    column-gap: 40px;\n  }\n`;\n"],"file":"index.js"}
+{"version":3,"file":"index.js","names":["styled","BREAKPOINTS","GRID","GAP","SMALL","MEDIUM","LARGE","GUTTER","PageWidth","div","XLARGE","props","useMaxWidth","maxWidth","Columns","section","gap","columns","printColumns","ContainerMargins"],"sources":["../../src/Layouts/index.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { BREAKPOINTS } from '../styles';\n\nconst GRID = {\n  GAP: {\n    SMALL: '24px',\n    MEDIUM: '32px',\n    LARGE: '40px',\n  },\n  GUTTER: {\n    SMALL: '16px',\n    MEDIUM: '32px',\n    LARGE: '56px',\n  },\n};\n\nexport const PageWidth = styled.div<{ useMaxWidth?: boolean; maxWidth?: number }>`\n  display: block;\n  margin: 0 ${GRID.GUTTER.SMALL};\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 ${GRID.GUTTER.MEDIUM};\n  }\n  ${BREAKPOINTS.LARGE} {\n    margin: 0 ${GRID.GUTTER.LARGE};\n  }\n\n  ${BREAKPOINTS.XLARGE} {\n    max-width: ${(props) => (props.useMaxWidth ? (props.maxWidth ? 'min(100% - 112px,' + props.maxWidth + 'px)' : 'calc(100% - 112px)') : '1088px')};\n    margin: 0 auto;\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\nexport const ContainerMargins = styled.div`\n  /* X small devices (mobile phones, 320px and up) */\n  @media only screen and (min-width: 320px) {\n    margin: 16px;\n    column-gap: 16px;\n  }\n\n  /* Small devices (portrait tablets, 576px and up) */\n  @media only screen and (min-width: 576px) {\n    margin: 16px;\n    column-gap: 16px;\n  }\n\n  /* Medium devices (landscape tablets, 768px and up) */\n  @media only screen and (min-width: 768px) {\n    margin: 32px;\n    column-gap: 32px;\n  }\n\n  /* Large devices (laptops/desktops, 992px and up) */\n  @media only screen and (min-width: 992px) {\n    margin: 56px;\n    column-gap: 24px;\n  }\n\n  /* X large devices (laptops/desktops, 1200px and up) */\n  @media only screen and (min-width: 1200px) {\n    margin: 56px;\n    column-gap: 40px;\n  }\n`;\n"],"mappings":";;;;AAAA,OAAOA,MAAP,MAAmB,mBAAnB;AAEA,SAASC,WAAT,QAA4B,WAA5B;AAEA,IAAMC,IAAI,GAAG;EACXC,GAAG,EAAE;IACHC,KAAK,EAAE,MADJ;IAEHC,MAAM,EAAE,MAFL;IAGHC,KAAK,EAAE;EAHJ,CADM;EAMXC,MAAM,EAAE;IACNH,KAAK,EAAE,MADD;IAENC,MAAM,EAAE,MAFF;IAGNC,KAAK,EAAE;EAHD;AANG,CAAb;AAaA,OAAO,IAAME,SAAS,GAAGR,MAAM,CAACS,GAAV,oPAERP,IAAI,CAACK,MAAL,CAAYH,KAFJ,EAIlBH,WAAW,CAACI,MAJM,EAKNH,IAAI,CAACK,MAAL,CAAYF,MALN,EAOlBJ,WAAW,CAACK,KAPM,EAQNJ,IAAI,CAACK,MAAL,CAAYD,KARN,EAWlBL,WAAW,CAACS,MAXM,EAYL,UAACC,KAAD;EAAA,OAAYA,KAAK,CAACC,WAAN,GAAqBD,KAAK,CAACE,QAAN,GAAiB,sBAAsBF,KAAK,CAACE,QAA5B,GAAuC,KAAxD,GAAgE,oBAArF,GAA6G,QAAzH;AAAA,CAZK,CAAf;AAiBP,OAAO,IAAMC,OAAO,GAAGd,MAAM,CAACe,OAAV,snBAGN,UAACJ,KAAD;EAAA,OAAWA,KAAK,CAACK,GAAN,IAAad,IAAI,CAACC,GAAL,CAASC,KAAjC;AAAA,CAHM,EAMhBH,WAAW,CAACI,MANI,EAOS,UAACM,KAAD;EAAA,OAAWA,KAAK,CAACM,OAAjB;AAAA,CAPT,EAQI,UAACN,KAAD;EAAA,OAAWA,KAAK,CAACM,OAAjB;AAAA,CARJ,EASJ,UAACN,KAAD;EAAA,OAAWA,KAAK,CAACK,GAAN,IAAad,IAAI,CAACC,GAAL,CAASE,MAAjC;AAAA,CATI,EAYhBJ,WAAW,CAACK,KAZI,EAaJ,UAACK,KAAD;EAAA,OAAWA,KAAK,CAACK,GAAN,IAAad,IAAI,CAACC,GAAL,CAASG,KAAjC;AAAA,CAbI,EAoBCJ,IAAI,CAACC,GAAL,CAASE,MApBV,EA0BS,UAACM,KAAD;EAAA,OAAWA,KAAK,CAACO,YAAN,IAAsB,MAAjC;AAAA,CA1BT,CAAb;AA8BP,OAAO,IAAMC,gBAAgB,GAAGnB,MAAM,CAACS,GAAV,o0BAAtB"}

package/dist/LinearProgress/LinearProgress.cjs

@@ -29,9 +29,9 @@ var _excluded = ["size", "type", "variant", "label", "value", "max", "className"
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var 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);
 

package/dist/LinearProgress/LinearProgress.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/LinearProgress/LinearProgress.tsx"],"names":["Bar","styled","div","COLORS","neutral_100","accent1_400","accent1_800","neutral_600","white","Dot","neutral_400","accent1_600","LineFill","Line","neutral_500","accent1_500","neutral_700","Label","black","Content","Wrapper","ComponentTextStyle","Regular","LinearProgressType","LinearProgressVariant","LinearProgress","size","Size","Medium","type","variant","Normal","label","value","max","className","rest","renderBars","Array","from","keys","map","i","Math","ceil","renderDots","renderLine","width","render","Bars","Dots"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle} from '../styles';\n\nexport const Bar = styled.div`\n  flex: 1;\n  height: 6px;\n\n  &.small {\n    height: 6px;\n  }\n\n  &.medium {\n    height: 8px;\n  }\n\n  &.large {\n    height: 12px;\n  }\n\n  background-color: ${COLORS.neutral_100};\n\n  &.active {\n    background-color: ${COLORS.accent1_400};\n  }\n\n  &.current {\n    background-color: ${COLORS.accent1_800};\n  }\n\n  &.inverted {\n    background-color: ${COLORS.neutral_600};\n  }\n\n  &.inverted.active {\n    background-color: ${COLORS.accent1_400};\n  }\n\n  &.inverted.current {\n    background-color: ${COLORS.white};\n  }\n\n`;\n\nexport const Dot = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n\n\n  &:after {\n    content: '';\n    display: block;\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n    background-color: ${COLORS.neutral_400};\n  }\n\n  &.small {\n    &:after {\n      width: 6px;\n      height: 6px;\n    }\n\n    &.current:after {\n      width: 10px;\n      height: 10px;\n    }\n  }\n\n  &.medium {\n    &:after {\n      width: 8px;\n      height: 8px;\n    }\n\n    &.current:after {\n      width: 12px;\n      height: 12px;\n    }\n  }\n\n  &.large {\n    &:after {\n      width: 12px;\n      height: 12px;\n    }\n\n    &.current:after {\n      width: 16px;\n      height: 16px;\n    }\n  }\n\n\n  &.active:after {\n    background-color: ${COLORS.accent1_600};\n  }\n\n  &.current:after {\n    background-color: ${COLORS.accent1_800};\n  }\n\n  &.inverted:after {\n    background-color: ${COLORS.neutral_400};\n  }\n\n  &.inverted.active:after {\n    background-color: ${COLORS.accent1_400};\n  }\n\n  &.inverted.current:after {\n    background-color: ${COLORS.white};\n  }\n`;\n\nexport const LineFill = styled.div`\n  height: 100%;\n  max-width: 100%;\n  position: absolute;\n  z-index: 1;\n`;\n\nexport const Line = styled.div`\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  position: relative;\n\n  &:after {\n    content: '';\n    display: block;\n    height: 100%;\n    background-color: ${COLORS.neutral_500};\n    position: absolute;\n    right: 0;\n  }\n\n  &:before {\n    content: '';\n    display: block;\n    height: 100%;\n    background-color: ${COLORS.neutral_500};\n    position: absolute;\n    left: 0;\n  }\n\n  &.small {\n    height: 6px;\n    border-radius: 4px;\n\n    ${LineFill} {\n      border-radius: 4px;\n    }\n\n    &:after {\n      width: 3px;\n      border-top-right-radius: 6px;\n      border-bottom-right-radius: 6px;\n    }\n\n    &:before {\n      width: 3px;\n      border-top-left-radius: 6px;\n      border-bottom-left-radius: 6px;\n    }\n  }\n\n  &.medium {\n    height: 8px;\n    border-radius: 4px;\n\n    ${LineFill} {\n      border-radius: 4px;\n    }\n\n    &:after {\n      width: 4px;\n      border-top-right-radius: 8px;\n      border-bottom-right-radius: 8px;\n    }\n\n    &:before {\n      width: 4px;\n      border-top-left-radius: 8px;\n      border-bottom-left-radius: 8px;\n    }\n  }\n\n  &.large {\n    height: 12px;\n    border-radius: 6px;\n\n    ${LineFill} {\n      border-radius: 6px;\n    }\n\n    &:after {\n      width: 6px;\n      border-top-right-radius: 12px;\n      border-bottom-right-radius: 12px;\n    }\n\n    &:before {\n      width: 6px;\n      border-top-left-radius: 12px;\n      border-bottom-left-radius: 12px;\n    }\n  }\n\n  background-color: ${COLORS.neutral_100};\n\n  ${LineFill} {\n    background-color: ${COLORS.accent1_500};\n  }\n\n  &.inverted {\n    background-color: ${COLORS.neutral_700};\n\n    &:after,\n    &:before {\n      background-color: ${COLORS.neutral_400};\n    }\n\n    ${LineFill} {\n      background-color: ${COLORS.accent1_400};\n    }\n  }\n`;\n\nconst Label = styled.div`\n  color: ${COLORS.black};\n`;\n\nconst Content = styled.div`\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  height: 16px;\n`;\n\nconst Wrapper = styled.div`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  &.inverted {\n    ${Label} {\n      color: ${COLORS.white};\n    }\n  }\n\n  &.small {\n    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"],"file":"LinearProgress.cjs"}
+{"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":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEO,IAAMA,GAAG,GAAGC,yBAAA,CAAOC,GAAV,qhBAgBMC,cAAA,CAAOC,WAhBb,EAmBQD,cAAA,CAAOE,WAnBf,EAuBQF,cAAA,CAAOG,WAvBf,EA2BQH,cAAA,CAAOI,WA3Bf,EA+BQJ,cAAA,CAAOE,WA/Bf,EAmCQF,cAAA,CAAOK,KAnCf,CAAT;;;;AAwCA,IAAMC,GAAG,GAAGR,yBAAA,CAAOC,GAAV,slCAcQC,cAAA,CAAOO,WAdf,EAuDQP,cAAA,CAAOQ,WAvDf,EA2DQR,cAAA,CAAOG,WA3Df,EA+DQH,cAAA,CAAOO,WA/Df,EAmEQP,cAAA,CAAOE,WAnEf,EAuEQF,cAAA,CAAOK,KAvEf,CAAT;;;;AA2EA,IAAMI,QAAQ,GAAGX,yBAAA,CAAOC,GAAV,kKAAd;;;;AAOA,IAAMW,IAAI,GAAGZ,yBAAA,CAAOC,GAAV,owDAWOC,cAAA,CAAOW,WAXd,EAoBOX,cAAA,CAAOW,WApBd,EA6BXF,QA7BW,EAkDXA,QAlDW,EAuEXA,QAvEW,EAwFKT,cAAA,CAAOC,WAxFZ,EA0FbQ,QA1Fa,EA2FOT,cAAA,CAAOY,WA3Fd,EA+FOZ,cAAA,CAAOa,WA/Fd,EAmGSb,cAAA,CAAOO,WAnGhB,EAsGXE,QAtGW,EAuGST,cAAA,CAAOE,WAvGhB,CAAV;;;;AA4GP,IAAMY,KAAK,GAAGhB,yBAAA,CAAOC,GAAV,wGACAC,cAAA,CAAOe,KADP,CAAX;;AAIA,IAAMC,OAAO,GAAGlB,yBAAA,CAAOC,GAAV,0KAAb;;AAOA,IAAMkB,OAAO,GAAGnB,yBAAA,CAAOC,GAAV,g2CAOPe,KAPO,EAQEd,cAAA,CAAOK,KART,EAePS,KAfO,EAgBL,IAAAI,yBAAA,EAAkBC,0BAAA,CAAmBC,OAArC,EAA8C,IAA9C,CAhBK,EAmBPJ,OAnBO,EAsBLnB,GAtBK,EA2BLA,GA3BK,EAmCPiB,KAnCO,EAoCL,IAAAO,yBAAA,EAAkBF,0BAAA,CAAmBC,OAArC,EAA8C,IAA9C,CApCK,EAuCPJ,OAvCO,EA0CLnB,GA1CK,EA+CLA,GA/CK,EAuDPiB,KAvDO,EAwDL,IAAAQ,yBAAA,EAAkBH,0BAAA,CAAmBC,OAArC,EAA8C,IAA9C,CAxDK,EA2DPJ,OA3DO,EA8DLnB,GA9DK,EAmELA,GAnEK,EA4EPmB,OA5EO,EAkFPA,OAlFO,CAAb;;IAwFYO,kB;;;WAAAA,kB;EAAAA,kB;EAAAA,kB;EAAAA,kB;GAAAA,kB,kCAAAA,kB;;IAMAC,qB;;;WAAAA,qB;EAAAA,qB;EAAAA,qB;GAAAA,qB,qCAAAA,qB;;AAgBZ,IAAMC,cAA4D,GAAG,SAA/DA,cAA+D,OASO;EAAA,qBARJC,IAQI;EAAA,IARJA,IAQI,0BARGC,WAAA,CAAKC,MAQR;EAAA,qBAPJC,IAOI;EAAA,IAPJA,IAOI,0BAPGN,kBAAkB,CAACb,IAOtB;EAAA,wBANJoB,OAMI;EAAA,IANJA,OAMI,6BANMN,qBAAqB,CAACO,MAM5B;EAAA,IALJC,KAKI,QALJA,KAKI;EAAA,IAJJC,KAII,QAJJA,KAII;EAAA,IAHJC,GAGI,QAHJA,GAGI;EAAA,IAFJC,SAEI,QAFJA,SAEI;EAAA,IADDC,IACC;;EAE1E,IAAMC,UAAU,GAAG,SAAbA,UAAa;IAAA,oBACjB;MAAA,UACGC,KAAK,CAACC,IAAN,CAAWD,KAAK,CAACJ,GAAD,CAAL,CAAWM,IAAX,EAAX,EAA8BC,GAA9B,CAAkC,UAAAC,CAAC;QAAA,oBAClC,qBAAC,GAAD;UACK,SAAS,YAAKC,IAAI,CAACC,IAAL,CAAUX,KAAV,KAAoBS,CAAC,GAAG,CAAxB,GAA4B,QAA5B,GAAuC,EAA5C,cAAkDC,IAAI,CAACC,IAAL,CAAUX,KAAV,MAAqBS,CAAC,GAAG,CAAzB,GAA6B,SAA7B,GAAyC,EAA3F,cAAiGZ,OAAjG,cAA4GJ,IAA5G;QADd,GAAUgB,CAAV,CADkC;MAAA,CAAnC;IADH,EADiB;EAAA,CAAnB;;EAQA,IAAMG,UAAU,GAAG,SAAbA,UAAa;IAAA,oBACjB;MAAA,UACGP,KAAK,CAACC,IAAN,CAAWD,KAAK,CAACJ,GAAD,CAAL,CAAWM,IAAX,EAAX,EAA8BC,GAA9B,CAAkC,UAAAC,CAAC;QAAA,oBAClC,qBAAC,GAAD;UACK,SAAS,YAAKC,IAAI,CAACC,IAAL,CAAUX,KAAV,KAAoBS,CAAC,GAAG,CAAxB,GAA4B,QAA5B,GAAuC,EAA5C,cAAkDC,IAAI,CAACC,IAAL,CAAUX,KAAV,MAAqBS,CAAC,GAAG,CAAzB,GAA6B,SAA7B,GAAyC,EAA3F,cAAiGZ,OAAjG,cAA4GJ,IAA5G;QADd,GAAUgB,CAAV,CADkC;MAAA,CAAnC;IADH,EADiB;EAAA,CAAnB;;EAQA,IAAMI,UAAU,GAAG,SAAbA,UAAa;IAAA,oBACjB;MAAA,uBACE,qBAAC,IAAD;QAAM,SAAS,YAAKhB,OAAL,cAAgBJ,IAAhB,CAAf;QAAA,uBACE,qBAAC,QAAD;UAAU,KAAK,EAAE;YAACqB,KAAK,YAAKd,KAAK,GAAGC,GAAR,GAAc,GAAnB;UAAN;QAAjB;MADF;IADF,EADiB;EAAA,CAAnB;;EAQA,IAAMc,MAAM,GAAG,SAATA,MAAS,GAAM;IACnB,QAAQnB,IAAR;MACE,KAAKN,kBAAkB,CAAC0B,IAAxB;QACE,OAAOZ,UAAU,EAAjB;;MACF,KAAKd,kBAAkB,CAAC2B,IAAxB;QACE,OAAOL,UAAU,EAAjB;;MACF,KAAKtB,kBAAkB,CAACb,IAAxB;MACA;QACE,OAAOoC,UAAU,EAAjB;IAPJ;EASD,CAVD;;EAYA,oBACE,sBAAC,OAAD;IAAS,SAAS,YAAKpB,IAAL,cAAaG,IAAb,cAAqBC,OAArB,cAAgCK,SAAS,IAAI,EAA7C;EAAlB,GAAyEC,IAAzE;IAAA,WACGJ,KAAK,iBAAI,qBAAC,KAAD;MAAA,UAAQA;IAAR,EADZ,eAEE,qBAAC,OAAD;MAAA,UACGgB,MAAM;IADT,EAFF;EAAA,GADF;AAQD,CAvDD;;;EATEnB,I;EACAC,O;EAEAE,K;EAEAC,K;EACAC,G;;eA4DaT,c"}

package/dist/LinearProgress/LinearProgress.js

@@ -6,9 +6,9 @@ var _excluded = ["size", "type", "variant", "label", "value", "max", "className"
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React from 'react';
 import { Size } from '../types';

package/dist/LinearProgress/LinearProgress.js.map

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