@laerdal/life-react-components 1.7.0-dev.20.full → 1.7.0-dev.22

package/dist/ChipsInput/ChipInputField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ChipsInput/ChipInputField.tsx"],"names":["React","Size","InputChip","ErrorMessage","WarningMessage","TechnicalWarning","COLORS","ComponentMStyling","ComponentTextStyle","focusStyles","scrollBarStyling","styled","LoadingIndicator","useFocusVisibleRef","IconButton","SystemIcons","Wrapper","div","Loading","ChipInputContentContainer","Small","ChipInputContainer","neutral_400","white","Regular","black","primary_700","primary_800","warning_500","critical_500","neutral_100","neutral_300","ChipInputEl","input","ChipInputField","forwardRef","ref","inputId","items","disabled","placeholder","altPlaceholder","multiLine","size","Medium","validationType","validationMessage","loading","onRemoveItem","onInputValueChange","onInputKeyDown","onActivation","inputValue","containerRef","useRef","inputRef","clearButtonRef","useEffect","current","scrollIntoView","block","inline","handleInputKeyDown","e","handleItemRemove","event","item","index","focus","focusVisible","detail","handleInputClear","cls","map","chip","icon","variant","label","target","value","length","stopPropagation","marginLeft","neutral_600","critical_400"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {ChipItem} from './ChipInputTypes';\nimport {Size} from '../types';\nimport {InputChip} from '../Chips';\nimport {ErrorMessage, WarningMessage} from '../InputFields/styling';\nimport {TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentMStyling, ComponentTextStyle, focusStyles, scrollBarStyling} from '../styles';\nimport styled from 'styled-components';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {useActionWithin, useFocusVisibleRef} from '../common';\nimport {IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\n\nconst Wrapper = styled.div`\n  position: relative;\n`;\n\nconst Loading = styled.div`\n  height: 20px;\n  width: 20px;\n`;\n\n\nexport const ChipInputContentContainer = styled.div`\n  width: 100%;\n  background: transparent;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  column-gap: 8px;\n  margin-right: 6px;\n  padding-right: 10px;\n  padding-left: 16px;\n  flex-wrap: nowrap;\n  overflow-x: scroll;\n  min-height: 48px;\n\n  ${scrollBarStyling(Size.Small)}\n  ::-webkit-scrollbar:horizontal {\n    display: none;\n  }\n\n  .action-right:focus, button:focus {\n    outline-offset: -4px !important;\n  }\n`;\n\nexport const ChipInputContainer = styled.div`\n  width: 100%;\n  height: auto;\n  border-radius: 4px;\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  cursor: text;\n  outline: none;\n  display: flex;\n  align-items: center;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  &.small {\n    padding: 0;\n    min-height: 48px;\n  }\n\n  &.medium {\n    padding: 4px 0;\n    min-height: 56px;\n  }\n\n\n  &.multiline.medium {\n    ${ChipInputContentContainer} {\n      max-height: calc(48px * 3);\n      flex-wrap: wrap;\n      overflow-y: auto;\n      overflow-x: unset;\n    }\n  }\n\n  &.focus-visible-within, :focus {\n    ${focusStyles}\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  &.warning,\n  &.warning:hover,\n  &.warning:focus {\n    box-shadow: inset 0 0 0 2px ${COLORS.warning_500};\n  }\n\n  &.error,\n  &.error:hover,\n  &.error:focus {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\n  }\n\n  &.disabled {\n    ${ChipInputContentContainer} {\n      pointer-events: none;\n    }\n\n    cursor: not-allowed;\n    box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n    outline: none;\n    color: ${COLORS.neutral_300} !important;\n  }\n\n\n`;\n\nexport const ChipInputEl = styled.input`\n  border: none;\n  outline: none;\n\n  height: 40px;\n  min-width: 40px;\n  display: inline-flex;\n  flex: 1;\n  background: transparent;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n  color: ${COLORS.black} !important;\n`;\n\n\nexport interface ChipInputFieldProps {\n  inputId: string;\n  items: ChipItem[];\n  disabled?: boolean;\n  placeholder?: string;\n  altPlaceholder?: string;\n  multiLine?: boolean;\n  size?: Size.Large | Size.Medium | Size.Small;\n  loading?: boolean;\n\n  validationType?: 'error' | 'warning';\n  validationMessage?: string;\n\n  onRemoveItem: (item: ChipItem, index: number) => void;\n  inputValue: string;\n  onInputValueChange: (value: string) => void;\n  onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n  onActivation?: () => void;\n}\n\nexport const ChipInputField = React.forwardRef<HTMLInputElement, ChipInputFieldProps>(({\n                                                                                         inputId,\n                                                                                         items,\n                                                                                         disabled = false,\n                                                                                         placeholder,\n                                                                                         altPlaceholder,\n                                                                                         multiLine = true,\n                                                                                         size = Size.Medium,\n                                                                                         validationType,\n                                                                                         validationMessage,\n                                                                                         loading,\n                                                                                         onRemoveItem,\n                                                                                         onInputValueChange,\n                                                                                         onInputKeyDown,\n                                                                                         onActivation,\n                                                                                         inputValue\n                                                                                       }, ref) => {\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const inputRef = useFocusVisibleRef([containerRef], ref as any);\n\n  const clearButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  /**\n   * Scroll container to last item on change\n   * */\n  React.useEffect(() => {\n    if (containerRef.current) {\n      inputRef.current.scrollIntoView({\n        block: 'nearest',\n        inline: 'nearest',\n      });\n    }\n  }, [containerRef, inputRef, items]);\n\n  /**\n   * Remove last cheap on backspace\n   * */\n  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    onInputKeyDown(e);\n  };\n\n  const handleItemRemove = (event: any, item: ChipItem, index: number) => {\n    onRemoveItem(item, index);\n    inputRef.current?.focus({focusVisible: event.detail !== 1} as any);\n  };\n\n  const handleInputClear = (e: any) => {\n    onInputValueChange('');\n    inputRef.current?.focus({focusVisible: e?.detail !== 1} as any)\n  };\n\n  const cls = `${multiLine ? 'multiline' : ''} ${validationType || ''} ${size} ${loading ? 'loading' : ''} ${disabled ? 'disabled' : ''}`;\n\n  return (\n    <Wrapper>\n      <ChipInputContainer ref={containerRef}\n                          id={inputId}\n                          onClick={() => !disabled && inputRef.current?.focus()}\n                          className={cls}>\n        <ChipInputContentContainer>\n          {items?.map((chip: ChipItem, index: number) => (\n            <InputChip key={`chip_${index}`}\n                       icon={chip?.icon}\n                       size={size}\n                       disabled={chip.disabled || disabled}\n                       variant={chip.variant || 'normal'}\n                       text={chip.label}\n                       onRemove={(e) => handleItemRemove(e, chip, index)}/>\n          ))}\n\n          <ChipInputEl ref={inputRef}\n                       type=\"text\"\n                       tabIndex={disabled ? -1 : 0}\n                       value={inputValue}\n                       onChange={e => onInputValueChange(e.target.value)}\n                       onKeyDown={handleInputKeyDown}\n                       placeholder={items?.length === 0 ? placeholder : (altPlaceholder || '')}\n                       onClick={e => {\n                         e.stopPropagation();\n                         onActivation && onActivation();\n                       }}/>\n          {\n            inputValue && !disabled &&\n            <IconButton action={handleInputClear}\n                        ref={clearButtonRef}\n                        useTransparentBackground={true}\n                        shape={'circular'}\n                        style={{marginLeft: '-8px'}}\n                        variant={'secondary'}>\n              <SystemIcons.Clear/>\n            </IconButton>\n          }\n\n          {loading &&\n            <Loading className={size}>\n              <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/>\n            </Loading>\n          }\n        </ChipInputContentContainer>\n      </ChipInputContainer>\n\n\n      {validationMessage && validationType === 'warning' ? (\n        <WarningMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.critical_500}/>\n          <span>{validationMessage}</span>\n        </WarningMessage>\n      ) : (\n        validationType === 'error' && (\n          <ErrorMessage>\n            <TechnicalWarning size=\"20px\" color={COLORS.critical_400}/>\n            <span>{validationMessage}</span>\n          </ErrorMessage>\n        )\n      )}\n    </Wrapper>\n  );\n});\n"],"file":"ChipInputField.js"}
+{"version":3,"sources":["../../src/ChipsInput/ChipInputField.tsx"],"names":["React","Size","InputChip","ErrorMessage","WarningMessage","TechnicalWarning","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","focusStyles","scrollBarStyling","styled","LoadingIndicator","useFocusVisibleRef","IconButton","SystemIcons","Wrapper","div","Loading","ChipInputBoundItems","ChipInputContentContainer","Small","ChipInputEl","input","Regular","black","Italic","neutral_600","ChipInputContainer","neutral_400","white","primary_700","primary_800","warning_500","critical_500","neutral_100","neutral_300","ChipInputField","forwardRef","ref","inputId","items","disabled","placeholder","altPlaceholder","multiLine","size","Medium","validationType","validationMessage","loading","onRemoveItem","onInputValueChange","onInputKeyDown","onActivationChange","inputValue","containerRef","useRef","inputRef","useEffect","current","scrollIntoView","block","inline","handleInputKeyDown","e","key","value","repeat","length","handleItemRemove","event","item","index","focus","focusVisible","detail","handleInputClear","handleContainerKeyDown","querySelectorAll","currentIndex","Array","from","indexOf","target","direction","cls","map","chip","icon","variant","label","stopPropagation","marginLeft","critical_400"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {ChipItem} from './ChipInputTypes';\nimport {Size} from '../types';\nimport {InputChip} from '../Chips';\nimport {ErrorMessage, WarningMessage} from '../InputFields/styling';\nimport {TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {\n  COLORS,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  focusStyles,\n  scrollBarStyling\n} from '../styles';\nimport styled from 'styled-components';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {useActionWithin, useFocusVisibleRef} from '../common';\nimport {IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\n\nconst Wrapper = styled.div`\n  position: relative;\n`;\n\nconst Loading = styled.div`\n  height: 20px;\n  width: 20px;\n`;\n\n\nexport const ChipInputBoundItems = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  flex: 1;\n  min-width: 40px;\n`;\n\nexport const ChipInputContentContainer = styled.div`\n  width: 100%;\n  background: transparent;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  column-gap: 8px;\n  margin-right: 6px;\n  padding-right: 10px;\n  padding-left: 16px;\n  flex-wrap: nowrap;\n  overflow-x: scroll;\n  min-height: 48px;\n\n  ${scrollBarStyling(Size.Small)}\n  ::-webkit-scrollbar:horizontal {\n    display: none;\n  }\n\n  .action-right:focus, button:focus {\n    outline-offset: -4px !important;\n  }\n`;\n\n\nexport const ChipInputEl = styled.input`\n  border: none;\n  outline: none;\n\n  height: 40px;\n  min-width: 40px;\n  display: inline-flex;\n  flex: 1;\n  background: transparent;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n  color: ${COLORS.black} !important;\n\n  &::placeholder {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n`;\n\nexport const ChipInputContainer = styled.div`\n  width: 100%;\n  height: auto;\n  border-radius: 4px;\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  cursor: text;\n  outline: none;\n  display: flex;\n  align-items: center;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  &.small {\n    padding: 0;\n    min-height: 48px;\n\n    ${ChipInputEl}::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.medium {\n    padding: 4px 0;\n    min-height: 56px;\n\n    ${ChipInputEl}::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n\n  &.multiline.medium {\n    ${ChipInputContentContainer} {\n      max-height: calc(48px * 3);\n      flex-wrap: wrap;\n      overflow-y: auto;\n      overflow-x: unset;\n    }\n  }\n\n  &.focus-visible-within, :focus {\n    ${focusStyles}\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  &.warning,\n  &.warning:hover,\n  &.warning:focus {\n    box-shadow: inset 0 0 0 2px ${COLORS.warning_500};\n  }\n\n  &.error,\n  &.error:hover,\n  &.error:focus {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\n  }\n\n  &.disabled {\n    ${ChipInputContentContainer} {\n      pointer-events: none;\n    }\n\n    cursor: not-allowed;\n    box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n    outline: none;\n    color: ${COLORS.neutral_300} !important;\n  }\n\n\n`;\n\n\nexport interface ChipInputFieldProps {\n  inputId: string;\n  items: ChipItem[];\n  disabled?: boolean;\n  placeholder?: string;\n  altPlaceholder?: string;\n  multiLine?: boolean;\n  size?: Size.Large | Size.Medium | Size.Small;\n  loading?: boolean;\n\n  validationType?: 'error' | 'warning';\n  validationMessage?: string;\n\n  onRemoveItem: (item: ChipItem, index: number) => void;\n  inputValue: string;\n  onInputValueChange: (value: string) => void;\n  onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n  onActivationChange?: (active: boolean) => void;\n}\n\nexport const ChipInputField = React.forwardRef<HTMLInputElement, ChipInputFieldProps>(({\n                                                                                         inputId,\n                                                                                         items,\n                                                                                         disabled = false,\n                                                                                         placeholder,\n                                                                                         altPlaceholder,\n                                                                                         multiLine = true,\n                                                                                         size = Size.Medium,\n                                                                                         validationType,\n                                                                                         validationMessage,\n                                                                                         loading,\n                                                                                         onRemoveItem,\n                                                                                         onInputValueChange,\n                                                                                         onInputKeyDown,\n                                                                                         onActivationChange,\n                                                                                         inputValue\n                                                                                       }, ref) => {\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const inputRef = useFocusVisibleRef([containerRef], ref as any);\n\n  /**\n   * Scroll container to last item on change\n   * */\n  React.useEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.scrollIntoView({\n        block: 'nearest',\n        inline: 'nearest',\n      });\n    }\n  }, [containerRef, inputRef, items]);\n\n  /**\n   * Remove last cheap on backspace\n   * */\n  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Backspace' && !inputRef.current?.value && !e.repeat && items.length > 0) {\n      onRemoveItem(items[items.length - 1], items.length - 1);\n    } else {\n      onInputKeyDown(e);\n    }\n  };\n\n  const handleItemRemove = (event: any, item: ChipItem, index: number) => {\n    onRemoveItem(item, index);\n    inputRef.current?.focus({focusVisible: event.detail !== 1} as any);\n  };\n\n  const handleInputClear = (e: any) => {\n    onInputValueChange('');\n    inputRef.current?.focus({focusVisible: e?.detail !== 1} as any)\n  };\n\n  const handleContainerKeyDown = (e: React.KeyboardEvent) => {\n    if (!containerRef.current || (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')) return;\n\n    const items = containerRef.current.querySelectorAll('[tabindex=\"0\"]') as NodeListOf<HTMLElement>;\n    const currentIndex = Array.from(items).indexOf(e.target as any);\n    const direction = e.key === 'ArrowLeft' ? -1 : 1;\n    const item = items[currentIndex + direction];\n    item?.focus({focusVisible: true} as any);\n\n    onActivationChange && onActivationChange(false);\n  };\n\n  const cls = `${multiLine ? 'multiline' : ''} ${validationType || ''} ${size} ${loading ? 'loading' : ''} ${disabled ? 'disabled' : ''}`;\n\n  return (\n    <Wrapper>\n      <ChipInputContainer ref={containerRef}\n                          id={inputId}\n                          onKeyDown={handleContainerKeyDown}\n                          onClick={() => !disabled && inputRef.current?.focus()}\n                          className={cls}>\n        <ChipInputContentContainer>\n          {items?.map((chip: ChipItem, index: number) => (\n            <InputChip key={`chip_${index}`}\n                       icon={chip?.icon}\n                       size={size}\n                       disabled={chip.disabled || disabled}\n                       variant={chip.variant || 'normal'}\n                       text={chip.label}\n                       onRemove={(e) => handleItemRemove(e, chip, index)}/>\n          ))}\n          <ChipInputBoundItems>\n            <ChipInputEl ref={inputRef}\n                         type=\"text\"\n                         tabIndex={disabled ? -1 : 0}\n                         value={inputValue}\n                         onChange={e => onInputValueChange(e.target.value)}\n                         onKeyDown={handleInputKeyDown}\n                         placeholder={items?.length === 0 ? placeholder : (altPlaceholder || '')}\n                         onClick={e => {\n                           e.stopPropagation();\n                           onActivationChange && onActivationChange(true);\n                         }}/>\n            {\n              inputValue && !disabled &&\n              <IconButton action={handleInputClear}\n                          ref={(ref) => {\n                            ref?.scrollIntoView({\n                              block: 'nearest',\n                              inline: 'nearest',\n                            });\n                          }}\n                          useTransparentBackground={true}\n                          shape={'circular'}\n                          style={{marginLeft: '-8px'}}\n                          variant={'secondary'}>\n                <SystemIcons.Clear/>\n              </IconButton>\n            }\n\n            {loading &&\n              <Loading className={size}>\n                <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/>\n              </Loading>\n            }\n          </ChipInputBoundItems>\n        </ChipInputContentContainer>\n      </ChipInputContainer>\n\n      {validationMessage && validationType === 'warning' ? (\n        <WarningMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.critical_500}/>\n          <span>{validationMessage}</span>\n        </WarningMessage>\n      ) : (\n        validationType === 'error' && (\n          <ErrorMessage>\n            <TechnicalWarning size=\"20px\" color={COLORS.critical_400}/>\n            <span>{validationMessage}</span>\n          </ErrorMessage>\n        )\n      )}\n    </Wrapper>\n  );\n});\n"],"file":"ChipInputField.js"}

package/dist/MenuItem/MenuItem.cjs

@@ -58,7 +58,7 @@ var ItemContent = _styledComponents.default.div(_templateObject5 || (_templateOb
 exports.ItemContent = ItemContent;
 
 var DropdownButtonCSS = function DropdownButtonCSS(size) {
-  return (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    ", "\n    ", "\n\n    position: relative;\n    text-decoration: none;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    min-height: ", ";\n    background-color: ", ";\n    border: none;\n    cursor: pointer;\n    background: transparent;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ", ";\n\n    &.active {\n      background: ", ";\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 6px;\n        bottom: 6px;\n        left: 4px;\n        background-color: ", ";\n\n        border-radius: 4px;\n      }\n    }\n\n    &:disabled, &.disabled-state {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ", ";\n    }\n\n    &.locked {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ", ";\n    }\n\n    &.active:hover, &.active-hover-state {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.active:active, &.active-active-state {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.dropdown-hover:not(:disabled) {\n      background-color: ", ";\n      color: ", ";\n    }\n  "])), size == _types.Size.Small && (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Medium && (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Large && (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Large ? '64px' : size == _types.Size.Medium ? '56px' : '48px', _styles.COLORS.white, _common.CommonInteractionStyling, _styles.COLORS.neutral_20, _styles.COLORS.primary_500, _styles.COLORS.neutral_200, _styles.COLORS.neutral_500, _styles.COLORS.primary_20, _styles.COLORS.primary_600, _styles.COLORS.primary_500, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.primary_500, _styles.COLORS.primary_20, _styles.COLORS.primary_600);
+  return (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    ", "\n    ", "\n\n    position: relative;\n    text-decoration: none;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    min-height: ", ";\n    background-color: ", ";\n    border: none;\n    cursor: pointer;\n    background: transparent;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ", ";\n\n    &.active {\n      background: ", ";\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 6px;\n        bottom: 6px;\n        left: 4px;\n        background-color: ", ";\n\n        border-radius: 4px;\n      }\n    }\n\n\n    &.locked {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ", ";\n    }\n\n    &.active:hover, &.active-hover-state {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.active:active, &.active-active-state {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &:disabled, &.disabled-state {\n      background-color: transparent !important;\n      cursor: not-allowed;\n      color: ", " !important;\n    }\n\n    &.dropdown-hover:not(:disabled) {\n      background-color: ", ";\n      color: ", ";\n    }\n  "])), size == _types.Size.Small && (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Medium && (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Large && (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Large ? '64px' : size == _types.Size.Medium ? '56px' : '48px', _styles.COLORS.white, _common.CommonInteractionStyling, _styles.COLORS.neutral_20, _styles.COLORS.primary_500, _styles.COLORS.neutral_500, _styles.COLORS.primary_20, _styles.COLORS.primary_600, _styles.COLORS.primary_500, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.primary_500, _styles.COLORS.neutral_200, _styles.COLORS.primary_20, _styles.COLORS.primary_600);
 };
 
 exports.DropdownButtonCSS = DropdownButtonCSS;

package/dist/MenuItem/MenuItem.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/MenuItem/MenuItem.tsx"],"names":["DropdownButton","styled","button","props","DropdownButtonCSS","size","ItemLabel","div","ItemIcon","LockedIconContainer","ItemContent","css","Size","Small","ComponentTextStyle","Regular","COLORS","neutral_600","Medium","Large","white","CommonInteractionStyling","neutral_20","primary_500","neutral_200","neutral_500","primary_20","primary_600","primary_100","primary_800","MenuItem","React","forwardRef","ref","active","item","onClickHandler","key","className","tabIndex","id","disabled","locked","defaultOnMouseDownHandler","showDividerAbove","icon","displayLabel","value","noteLabel","fontSize","lineHeight","neutral_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {Link} from 'react-router-dom';\nimport styled, { css } from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ChevronRight, LockedOn} from '../icons/systemicons/SystemIcons';\nimport {Product, Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\nimport {CommonInteractionStyling, defaultOnMouseDownHandler} from '../common';\n\nexport interface MenuItemProps {\n   item: DropdownItem;\n   onClickHandler: (e: any) => void;\n   active: boolean;\n   id: string;\n   key: string;\n   size?: Size;\n   className?: string;\n   tabIndex?: number;\n}\n\nexport const DropdownButton = styled.button<{ size?: Size }>`\n  ${(props) => DropdownButtonCSS(props.size)}\n`;\n\nexport const ItemLabel = styled.div``;\nexport const ItemIcon = styled.div``;\n\nexport const LockedIconContainer = styled.div`\n\n`;\n\nexport const ItemContent = styled.div`\n    margin: auto 0 auto 16px;\n    display: flex;\n    align-items: center;\n    flex-grow: 2;\n\n    ${ItemLabel} {\n      flex: 1 0 calc(100% - 40px);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n    }\n\n    ${ItemIcon} {\n      margin-right: 6px;\n      svg {\n        display: block;\n        margin: auto;\n      }\n    }\n\n    ${LockedIconContainer} {\n      flex-grow: 2;\n\n      .extraMargin {\n        margin-left: calc(100% - 24px);\n      }\n    }\n`;\n\n\nexport const DropdownButtonCSS = (size?: Size) => {\n  return css`\n    ${size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n    position: relative;\n    text-decoration: none;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    min-height: ${size == Size.Large ? '64px' : size == Size.Medium ? '56px' : '48px'};\n    background-color: ${COLORS.white};\n    border: none;\n    cursor: pointer;\n    background: transparent;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ${CommonInteractionStyling};\n\n    &.active {\n      background: ${COLORS.neutral_20};\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 6px;\n        bottom: 6px;\n        left: 4px;\n        background-color: ${COLORS.primary_500};\n\n        border-radius: 4px;\n      }\n    }\n\n    &:disabled, &.disabled-state {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ${COLORS.neutral_200};\n    }\n\n    &.locked {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ${COLORS.neutral_500};\n    }\n\n    &.active:hover, &.active-hover-state {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_600};\n      }\n\n      &::after {\n        background-color: ${COLORS.primary_500};\n      }\n    }\n\n    &.active:active, &.active-active-state {\n      background-color: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n\n      &::after {\n        background-color: ${COLORS.primary_500};\n      }\n    }\n\n    &.dropdown-hover:not(:disabled) {\n      background-color: ${COLORS.primary_20};\n      color: ${COLORS.primary_600};\n    }\n  `;\n};\n\nconst MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(({\n    active,\n    item,\n    onClickHandler,\n    key,\n    size,\n    className,\n    tabIndex,\n    id }: MenuItemProps, ref) => {\n  return (\n    <DropdownButton\n        type=\"button\"\n        size={size}\n        disabled={item.disabled || item.locked}\n        tabIndex={tabIndex}\n        onMouseDown={defaultOnMouseDownHandler}\n        ref={ref}\n        onClick={onClickHandler}\n        className={ className + ' ' + (item.locked ? 'locked' : '') + ' ' + (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (active ? 'active' : '')}\n        key={key}\n        id={id}>\n        {item.showDividerAbove && <div className=\"divider\" />}\n        <ItemContent>\n          {item.icon && <ItemIcon>{item.icon}</ItemIcon>}\n          <ItemLabel>\n              <div>\n                <div>{item.displayLabel ?? item.value}</div>\n                {item.noteLabel && <div style={{ fontSize: '12px', lineHeight: '16px' }}>{item.noteLabel}</div>}\n              </div>\n              {item.locked && <LockedIconContainer>\n                <LockedOn color={COLORS.neutral_400} className=\"extraMargin\" size=\"24px\" />\n              </LockedIconContainer>}\n          </ItemLabel>\n        </ItemContent>\n  </DropdownButton>\n  );\n});\n\nexport default MenuItem;\n"],"file":"MenuItem.cjs"}
+{"version":3,"sources":["../../src/MenuItem/MenuItem.tsx"],"names":["DropdownButton","styled","button","props","DropdownButtonCSS","size","ItemLabel","div","ItemIcon","LockedIconContainer","ItemContent","css","Size","Small","ComponentTextStyle","Regular","COLORS","neutral_600","Medium","Large","white","CommonInteractionStyling","neutral_20","primary_500","neutral_500","primary_20","primary_600","primary_100","primary_800","neutral_200","MenuItem","React","forwardRef","ref","active","item","onClickHandler","key","className","tabIndex","id","disabled","locked","defaultOnMouseDownHandler","showDividerAbove","icon","displayLabel","value","noteLabel","fontSize","lineHeight","neutral_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {Link} from 'react-router-dom';\nimport styled, { css } from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ChevronRight, LockedOn} from '../icons/systemicons/SystemIcons';\nimport {Product, Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\nimport {CommonInteractionStyling, defaultOnMouseDownHandler} from '../common';\n\nexport interface MenuItemProps {\n   item: DropdownItem;\n   onClickHandler: (e: any) => void;\n   active: boolean;\n   id: string;\n   key: string;\n   size?: Size;\n   className?: string;\n   tabIndex?: number;\n}\n\nexport const DropdownButton = styled.button<{ size?: Size }>`\n  ${(props) => DropdownButtonCSS(props.size)}\n`;\n\nexport const ItemLabel = styled.div``;\nexport const ItemIcon = styled.div``;\n\nexport const LockedIconContainer = styled.div`\n\n`;\n\nexport const ItemContent = styled.div`\n    margin: auto 0 auto 16px;\n    display: flex;\n    align-items: center;\n    flex-grow: 2;\n\n    ${ItemLabel} {\n      flex: 1 0 calc(100% - 40px);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n    }\n\n    ${ItemIcon} {\n      margin-right: 6px;\n      svg {\n        display: block;\n        margin: auto;\n      }\n    }\n\n    ${LockedIconContainer} {\n      flex-grow: 2;\n\n      .extraMargin {\n        margin-left: calc(100% - 24px);\n      }\n    }\n`;\n\n\nexport const DropdownButtonCSS = (size?: Size) => {\n  return css`\n    ${size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n    position: relative;\n    text-decoration: none;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    min-height: ${size == Size.Large ? '64px' : size == Size.Medium ? '56px' : '48px'};\n    background-color: ${COLORS.white};\n    border: none;\n    cursor: pointer;\n    background: transparent;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ${CommonInteractionStyling};\n\n    &.active {\n      background: ${COLORS.neutral_20};\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 6px;\n        bottom: 6px;\n        left: 4px;\n        background-color: ${COLORS.primary_500};\n\n        border-radius: 4px;\n      }\n    }\n\n\n    &.locked {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ${COLORS.neutral_500};\n    }\n\n    &.active:hover, &.active-hover-state {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_600};\n      }\n\n      &::after {\n        background-color: ${COLORS.primary_500};\n      }\n    }\n\n    &.active:active, &.active-active-state {\n      background-color: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n\n      &::after {\n        background-color: ${COLORS.primary_500};\n      }\n    }\n\n    &:disabled, &.disabled-state {\n      background-color: transparent !important;\n      cursor: not-allowed;\n      color: ${COLORS.neutral_200} !important;\n    }\n\n    &.dropdown-hover:not(:disabled) {\n      background-color: ${COLORS.primary_20};\n      color: ${COLORS.primary_600};\n    }\n  `;\n};\n\nconst MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(({\n    active,\n    item,\n    onClickHandler,\n    key,\n    size,\n    className,\n    tabIndex,\n    id }: MenuItemProps, ref) => {\n  return (\n    <DropdownButton\n        type=\"button\"\n        size={size}\n        disabled={item.disabled || item.locked}\n        tabIndex={tabIndex}\n        onMouseDown={defaultOnMouseDownHandler}\n        ref={ref}\n        onClick={onClickHandler}\n        className={ className + ' ' + (item.locked ? 'locked' : '') + ' ' + (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (active ? 'active' : '')}\n        key={key}\n        id={id}>\n        {item.showDividerAbove && <div className=\"divider\" />}\n        <ItemContent>\n          {item.icon && <ItemIcon>{item.icon}</ItemIcon>}\n          <ItemLabel>\n              <div>\n                <div>{item.displayLabel ?? item.value}</div>\n                {item.noteLabel && <div style={{ fontSize: '12px', lineHeight: '16px' }}>{item.noteLabel}</div>}\n              </div>\n              {item.locked && <LockedIconContainer>\n                <LockedOn color={COLORS.neutral_400} className=\"extraMargin\" size=\"24px\" />\n              </LockedIconContainer>}\n          </ItemLabel>\n        </ItemContent>\n  </DropdownButton>\n  );\n});\n\nexport default MenuItem;\n"],"file":"MenuItem.cjs"}

package/dist/MenuItem/MenuItem.js

@@ -20,7 +20,7 @@ export var ItemIcon = styled.div(_templateObject3 || (_templateObject3 = _tagged
 export var LockedIconContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\n"])));
 export var ItemContent = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    margin: auto 0 auto 16px;\n    display: flex;\n    align-items: center;\n    flex-grow: 2;\n\n    ", " {\n      flex: 1 0 calc(100% - 40px);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n    }\n\n    ", " {\n      margin-right: 6px;\n      svg {\n        display: block;\n        margin: auto;\n      }\n    }\n\n    ", " {\n      flex-grow: 2;\n\n      .extraMargin {\n        margin-left: calc(100% - 24px);\n      }\n    }\n"])), ItemLabel, ItemIcon, LockedIconContainer);
 export var DropdownButtonCSS = function DropdownButtonCSS(size) {
-  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    ", "\n    ", "\n    ", "\n\n    position: relative;\n    text-decoration: none;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    min-height: ", ";\n    background-color: ", ";\n    border: none;\n    cursor: pointer;\n    background: transparent;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ", ";\n\n    &.active {\n      background: ", ";\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 6px;\n        bottom: 6px;\n        left: 4px;\n        background-color: ", ";\n\n        border-radius: 4px;\n      }\n    }\n\n    &:disabled, &.disabled-state {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ", ";\n    }\n\n    &.locked {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ", ";\n    }\n\n    &.active:hover, &.active-hover-state {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.active:active, &.active-active-state {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.dropdown-hover:not(:disabled) {\n      background-color: ", ";\n      color: ", ";\n    }\n  "])), size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600), size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600), size == Size.Large ? '64px' : size == Size.Medium ? '56px' : '48px', COLORS.white, CommonInteractionStyling, COLORS.neutral_20, COLORS.primary_500, COLORS.neutral_200, COLORS.neutral_500, COLORS.primary_20, COLORS.primary_600, COLORS.primary_500, COLORS.primary_100, COLORS.primary_800, COLORS.primary_500, COLORS.primary_20, COLORS.primary_600);
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    ", "\n    ", "\n    ", "\n\n    position: relative;\n    text-decoration: none;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    min-height: ", ";\n    background-color: ", ";\n    border: none;\n    cursor: pointer;\n    background: transparent;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ", ";\n\n    &.active {\n      background: ", ";\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 6px;\n        bottom: 6px;\n        left: 4px;\n        background-color: ", ";\n\n        border-radius: 4px;\n      }\n    }\n\n\n    &.locked {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ", ";\n    }\n\n    &.active:hover, &.active-hover-state {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.active:active, &.active-active-state {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &:disabled, &.disabled-state {\n      background-color: transparent !important;\n      cursor: not-allowed;\n      color: ", " !important;\n    }\n\n    &.dropdown-hover:not(:disabled) {\n      background-color: ", ";\n      color: ", ";\n    }\n  "])), size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600), size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600), size == Size.Large ? '64px' : size == Size.Medium ? '56px' : '48px', COLORS.white, CommonInteractionStyling, COLORS.neutral_20, COLORS.primary_500, COLORS.neutral_500, COLORS.primary_20, COLORS.primary_600, COLORS.primary_500, COLORS.primary_100, COLORS.primary_800, COLORS.primary_500, COLORS.neutral_200, COLORS.primary_20, COLORS.primary_600);
 };
 var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _item$displayLabel;

package/dist/MenuItem/MenuItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/MenuItem/MenuItem.tsx"],"names":["React","styled","css","COLORS","ComponentTextStyle","LockedOn","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","CommonInteractionStyling","defaultOnMouseDownHandler","DropdownButton","button","props","DropdownButtonCSS","size","ItemLabel","div","ItemIcon","LockedIconContainer","ItemContent","Small","Regular","neutral_600","Medium","Large","white","neutral_20","primary_500","neutral_200","neutral_500","primary_20","primary_600","primary_100","primary_800","MenuItem","forwardRef","ref","active","item","onClickHandler","key","className","tabIndex","id","disabled","locked","showDividerAbove","icon","displayLabel","value","noteLabel","fontSize","lineHeight","neutral_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {Link} from 'react-router-dom';\nimport styled, { css } from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ChevronRight, LockedOn} from '../icons/systemicons/SystemIcons';\nimport {Product, Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\nimport {CommonInteractionStyling, defaultOnMouseDownHandler} from '../common';\n\nexport interface MenuItemProps {\n   item: DropdownItem;\n   onClickHandler: (e: any) => void;\n   active: boolean;\n   id: string;\n   key: string;\n   size?: Size;\n   className?: string;\n   tabIndex?: number;\n}\n\nexport const DropdownButton = styled.button<{ size?: Size }>`\n  ${(props) => DropdownButtonCSS(props.size)}\n`;\n\nexport const ItemLabel = styled.div``;\nexport const ItemIcon = styled.div``;\n\nexport const LockedIconContainer = styled.div`\n\n`;\n\nexport const ItemContent = styled.div`\n    margin: auto 0 auto 16px;\n    display: flex;\n    align-items: center;\n    flex-grow: 2;\n\n    ${ItemLabel} {\n      flex: 1 0 calc(100% - 40px);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n    }\n\n    ${ItemIcon} {\n      margin-right: 6px;\n      svg {\n        display: block;\n        margin: auto;\n      }\n    }\n\n    ${LockedIconContainer} {\n      flex-grow: 2;\n\n      .extraMargin {\n        margin-left: calc(100% - 24px);\n      }\n    }\n`;\n\n\nexport const DropdownButtonCSS = (size?: Size) => {\n  return css`\n    ${size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n    position: relative;\n    text-decoration: none;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    min-height: ${size == Size.Large ? '64px' : size == Size.Medium ? '56px' : '48px'};\n    background-color: ${COLORS.white};\n    border: none;\n    cursor: pointer;\n    background: transparent;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ${CommonInteractionStyling};\n\n    &.active {\n      background: ${COLORS.neutral_20};\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 6px;\n        bottom: 6px;\n        left: 4px;\n        background-color: ${COLORS.primary_500};\n\n        border-radius: 4px;\n      }\n    }\n\n    &:disabled, &.disabled-state {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ${COLORS.neutral_200};\n    }\n\n    &.locked {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ${COLORS.neutral_500};\n    }\n\n    &.active:hover, &.active-hover-state {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_600};\n      }\n\n      &::after {\n        background-color: ${COLORS.primary_500};\n      }\n    }\n\n    &.active:active, &.active-active-state {\n      background-color: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n\n      &::after {\n        background-color: ${COLORS.primary_500};\n      }\n    }\n\n    &.dropdown-hover:not(:disabled) {\n      background-color: ${COLORS.primary_20};\n      color: ${COLORS.primary_600};\n    }\n  `;\n};\n\nconst MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(({\n    active,\n    item,\n    onClickHandler,\n    key,\n    size,\n    className,\n    tabIndex,\n    id }: MenuItemProps, ref) => {\n  return (\n    <DropdownButton\n        type=\"button\"\n        size={size}\n        disabled={item.disabled || item.locked}\n        tabIndex={tabIndex}\n        onMouseDown={defaultOnMouseDownHandler}\n        ref={ref}\n        onClick={onClickHandler}\n        className={ className + ' ' + (item.locked ? 'locked' : '') + ' ' + (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (active ? 'active' : '')}\n        key={key}\n        id={id}>\n        {item.showDividerAbove && <div className=\"divider\" />}\n        <ItemContent>\n          {item.icon && <ItemIcon>{item.icon}</ItemIcon>}\n          <ItemLabel>\n              <div>\n                <div>{item.displayLabel ?? item.value}</div>\n                {item.noteLabel && <div style={{ fontSize: '12px', lineHeight: '16px' }}>{item.noteLabel}</div>}\n              </div>\n              {item.locked && <LockedIconContainer>\n                <LockedOn color={COLORS.neutral_400} className=\"extraMargin\" size=\"24px\" />\n              </LockedIconContainer>}\n          </ItemLabel>\n        </ItemContent>\n  </DropdownButton>\n  );\n});\n\nexport default MenuItem;\n"],"file":"MenuItem.js"}
+{"version":3,"sources":["../../src/MenuItem/MenuItem.tsx"],"names":["React","styled","css","COLORS","ComponentTextStyle","LockedOn","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","CommonInteractionStyling","defaultOnMouseDownHandler","DropdownButton","button","props","DropdownButtonCSS","size","ItemLabel","div","ItemIcon","LockedIconContainer","ItemContent","Small","Regular","neutral_600","Medium","Large","white","neutral_20","primary_500","neutral_500","primary_20","primary_600","primary_100","primary_800","neutral_200","MenuItem","forwardRef","ref","active","item","onClickHandler","key","className","tabIndex","id","disabled","locked","showDividerAbove","icon","displayLabel","value","noteLabel","fontSize","lineHeight","neutral_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {Link} from 'react-router-dom';\nimport styled, { css } from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ChevronRight, LockedOn} from '../icons/systemicons/SystemIcons';\nimport {Product, Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\nimport {CommonInteractionStyling, defaultOnMouseDownHandler} from '../common';\n\nexport interface MenuItemProps {\n   item: DropdownItem;\n   onClickHandler: (e: any) => void;\n   active: boolean;\n   id: string;\n   key: string;\n   size?: Size;\n   className?: string;\n   tabIndex?: number;\n}\n\nexport const DropdownButton = styled.button<{ size?: Size }>`\n  ${(props) => DropdownButtonCSS(props.size)}\n`;\n\nexport const ItemLabel = styled.div``;\nexport const ItemIcon = styled.div``;\n\nexport const LockedIconContainer = styled.div`\n\n`;\n\nexport const ItemContent = styled.div`\n    margin: auto 0 auto 16px;\n    display: flex;\n    align-items: center;\n    flex-grow: 2;\n\n    ${ItemLabel} {\n      flex: 1 0 calc(100% - 40px);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n    }\n\n    ${ItemIcon} {\n      margin-right: 6px;\n      svg {\n        display: block;\n        margin: auto;\n      }\n    }\n\n    ${LockedIconContainer} {\n      flex-grow: 2;\n\n      .extraMargin {\n        margin-left: calc(100% - 24px);\n      }\n    }\n`;\n\n\nexport const DropdownButtonCSS = (size?: Size) => {\n  return css`\n    ${size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n    position: relative;\n    text-decoration: none;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    min-height: ${size == Size.Large ? '64px' : size == Size.Medium ? '56px' : '48px'};\n    background-color: ${COLORS.white};\n    border: none;\n    cursor: pointer;\n    background: transparent;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ${CommonInteractionStyling};\n\n    &.active {\n      background: ${COLORS.neutral_20};\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 6px;\n        bottom: 6px;\n        left: 4px;\n        background-color: ${COLORS.primary_500};\n\n        border-radius: 4px;\n      }\n    }\n\n\n    &.locked {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ${COLORS.neutral_500};\n    }\n\n    &.active:hover, &.active-hover-state {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_600};\n      }\n\n      &::after {\n        background-color: ${COLORS.primary_500};\n      }\n    }\n\n    &.active:active, &.active-active-state {\n      background-color: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n\n      &::after {\n        background-color: ${COLORS.primary_500};\n      }\n    }\n\n    &:disabled, &.disabled-state {\n      background-color: transparent !important;\n      cursor: not-allowed;\n      color: ${COLORS.neutral_200} !important;\n    }\n\n    &.dropdown-hover:not(:disabled) {\n      background-color: ${COLORS.primary_20};\n      color: ${COLORS.primary_600};\n    }\n  `;\n};\n\nconst MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(({\n    active,\n    item,\n    onClickHandler,\n    key,\n    size,\n    className,\n    tabIndex,\n    id }: MenuItemProps, ref) => {\n  return (\n    <DropdownButton\n        type=\"button\"\n        size={size}\n        disabled={item.disabled || item.locked}\n        tabIndex={tabIndex}\n        onMouseDown={defaultOnMouseDownHandler}\n        ref={ref}\n        onClick={onClickHandler}\n        className={ className + ' ' + (item.locked ? 'locked' : '') + ' ' + (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (active ? 'active' : '')}\n        key={key}\n        id={id}>\n        {item.showDividerAbove && <div className=\"divider\" />}\n        <ItemContent>\n          {item.icon && <ItemIcon>{item.icon}</ItemIcon>}\n          <ItemLabel>\n              <div>\n                <div>{item.displayLabel ?? item.value}</div>\n                {item.noteLabel && <div style={{ fontSize: '12px', lineHeight: '16px' }}>{item.noteLabel}</div>}\n              </div>\n              {item.locked && <LockedIconContainer>\n                <LockedOn color={COLORS.neutral_400} className=\"extraMargin\" size=\"24px\" />\n              </LockedIconContainer>}\n          </ItemLabel>\n        </ItemContent>\n  </DropdownButton>\n  );\n});\n\nexport default MenuItem;\n"],"file":"MenuItem.js"}

package/dist/Tile/Tile.cjs

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _types = require("../types");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _TileHeader = _interopRequireDefault(require("./TileHeader"));
+
+var _TileFooter = _interopRequireDefault(require("./TileFooter"));
+
+var _TileBody = _interopRequireDefault(require("./TileBody"));
+
+var _styles = require("../styles");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject;
+
+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 _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; }
+
+var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-flow: column;\n  flex-direction: column;\n  background: ", ";\n  border-radius: 8px;\n  border: 1px solid ", ";\n  box-sizing: border-box;\n"])), _styles.COLORS.white, _styles.COLORS.neutral_200);
+
+var Tile = function Tile(_ref) {
+  var header = _ref.header,
+      footer = _ref.footer,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? _types.Size.Medium : _ref$size,
+      style = _ref.style,
+      children = _ref.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
+    style: style,
+    className: size,
+    children: [header && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TileHeader.default, _objectSpread(_objectSpread({}, header), {}, {
+      size: size
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TileBody.default, {
+      size: size,
+      children: children
+    }), footer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TileFooter.default, _objectSpread(_objectSpread({}, footer), {}, {
+      size: size
+    }))]
+  });
+};
+
+var _default = Tile;
+exports.default = _default;
+//# sourceMappingURL=Tile.cjs.map

package/dist/Tile/Tile.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Tile/Tile.tsx"],"names":["Wrapper","styled","div","COLORS","white","neutral_200","Tile","header","footer","size","Size","Medium","style","children"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,OAAO,GAAGC,0BAAOC,GAAV,4RAMGC,eAAOC,KANV,EAQSD,eAAOE,WARhB,CAAb;;AAYA,IAAMC,IAAwC,GAAG,SAA3CA,IAA2C,OAMO;AAAA,MALJC,MAKI,QALJA,MAKI;AAAA,MAJJC,MAII,QAJJA,MAII;AAAA,uBAHJC,IAGI;AAAA,MAHJA,IAGI,0BAHGC,YAAKC,MAGR;AAAA,MAFJC,KAEI,QAFJA,KAEI;AAAA,MADJC,QACI,QADJA,QACI;AAEtD,sBACE,sBAAC,OAAD;AAAS,IAAA,KAAK,EAAED,KAAhB;AACS,IAAA,SAAS,EAAEH,IADpB;AAAA,eAEGF,MAAM,iBAAI,qBAAC,mBAAD,kCAAgBA,MAAhB;AAAwB,MAAA,IAAI,EAAEE;AAA9B,OAFb,eAGE,qBAAC,iBAAD;AAAU,MAAA,IAAI,EAAEA,IAAhB;AAAA,gBACGI;AADH,MAHF,EAMGL,MAAM,iBAAI,qBAAC,mBAAD,kCAAgBA,MAAhB;AAAwB,MAAA,IAAI,EAAEC;AAA9B,OANb;AAAA,IADF;AAUD,CAlBD;;eAqBeH,I","sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport {TileProps} from './TileTypes';\nimport styled from 'styled-components';\nimport TileHeader from './TileHeader';\nimport TileFooter from './TileFooter';\nimport TileBody from './TileBody';\nimport {COLORS} from '../styles';\n\nconst Wrapper = styled.div`\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-flow: column;\n  flex-direction: column;\n  background: ${COLORS.white};\n  border-radius: 8px;\n  border: 1px solid ${COLORS.neutral_200};\n  box-sizing: border-box;\n`;\n\nconst Tile: React.FunctionComponent<TileProps> = ({\n                                                    header,\n                                                    footer,\n                                                    size = Size.Medium,\n                                                    style,\n                                                    children\n                                                  }) => {\n\n  return (\n    <Wrapper style={style}\n             className={size}>\n      {header && <TileHeader {...header} size={size}/>}\n      <TileBody size={size}>\n        {children}\n      </TileBody>\n      {footer && <TileFooter {...footer} size={size}/>}\n    </Wrapper>\n  )\n}\n\n\nexport default Tile;\n"],"file":"Tile.cjs"}

package/dist/Tile/Tile.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TileProps } from './TileTypes';
+declare const Tile: React.FunctionComponent<TileProps>;
+export default Tile;

package/dist/Tile/Tile.js

@@ -0,0 +1,43 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+
+var _templateObject;
+
+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 _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; }
+
+import React from 'react';
+import { Size } from '../types';
+import styled from 'styled-components';
+import TileHeader from './TileHeader';
+import TileFooter from './TileFooter';
+import TileBody from './TileBody';
+import { COLORS } from '../styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-flow: column;\n  flex-direction: column;\n  background: ", ";\n  border-radius: 8px;\n  border: 1px solid ", ";\n  box-sizing: border-box;\n"])), COLORS.white, COLORS.neutral_200);
+
+var Tile = function Tile(_ref) {
+  var header = _ref.header,
+      footer = _ref.footer,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? Size.Medium : _ref$size,
+      style = _ref.style,
+      children = _ref.children;
+  return /*#__PURE__*/_jsxs(Wrapper, {
+    style: style,
+    className: size,
+    children: [header && /*#__PURE__*/_jsx(TileHeader, _objectSpread(_objectSpread({}, header), {}, {
+      size: size
+    })), /*#__PURE__*/_jsx(TileBody, {
+      size: size,
+      children: children
+    }), footer && /*#__PURE__*/_jsx(TileFooter, _objectSpread(_objectSpread({}, footer), {}, {
+      size: size
+    }))]
+  });
+};
+
+export default Tile;
+//# sourceMappingURL=Tile.js.map

package/dist/Tile/Tile.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Tile/Tile.tsx"],"names":["React","Size","styled","TileHeader","TileFooter","TileBody","COLORS","Wrapper","div","white","neutral_200","Tile","header","footer","size","Medium","style","children"],"mappings":";;;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAAQC,IAAR,QAAmB,UAAnB;AAEA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,OAAOC,UAAP,MAAuB,cAAvB;AACA,OAAOC,UAAP,MAAuB,cAAvB;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,SAAQC,MAAR,QAAqB,WAArB;;;AAEA,IAAMC,OAAO,GAAGL,MAAM,CAACM,GAAV,8QAMGF,MAAM,CAACG,KANV,EAQSH,MAAM,CAACI,WARhB,CAAb;;AAYA,IAAMC,IAAwC,GAAG,SAA3CA,IAA2C,OAMO;AAAA,MALJC,MAKI,QALJA,MAKI;AAAA,MAJJC,MAII,QAJJA,MAII;AAAA,uBAHJC,IAGI;AAAA,MAHJA,IAGI,0BAHGb,IAAI,CAACc,MAGR;AAAA,MAFJC,KAEI,QAFJA,KAEI;AAAA,MADJC,QACI,QADJA,QACI;AAEtD,sBACE,MAAC,OAAD;AAAS,IAAA,KAAK,EAAED,KAAhB;AACS,IAAA,SAAS,EAAEF,IADpB;AAAA,eAEGF,MAAM,iBAAI,KAAC,UAAD,kCAAgBA,MAAhB;AAAwB,MAAA,IAAI,EAAEE;AAA9B,OAFb,eAGE,KAAC,QAAD;AAAU,MAAA,IAAI,EAAEA,IAAhB;AAAA,gBACGG;AADH,MAHF,EAMGJ,MAAM,iBAAI,KAAC,UAAD,kCAAgBA,MAAhB;AAAwB,MAAA,IAAI,EAAEC;AAA9B,OANb;AAAA,IADF;AAUD,CAlBD;;AAqBA,eAAeH,IAAf","sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport {TileProps} from './TileTypes';\nimport styled from 'styled-components';\nimport TileHeader from './TileHeader';\nimport TileFooter from './TileFooter';\nimport TileBody from './TileBody';\nimport {COLORS} from '../styles';\n\nconst Wrapper = styled.div`\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-flow: column;\n  flex-direction: column;\n  background: ${COLORS.white};\n  border-radius: 8px;\n  border: 1px solid ${COLORS.neutral_200};\n  box-sizing: border-box;\n`;\n\nconst Tile: React.FunctionComponent<TileProps> = ({\n                                                    header,\n                                                    footer,\n                                                    size = Size.Medium,\n                                                    style,\n                                                    children\n                                                  }) => {\n\n  return (\n    <Wrapper style={style}\n             className={size}>\n      {header && <TileHeader {...header} size={size}/>}\n      <TileBody size={size}>\n        {children}\n      </TileBody>\n      {footer && <TileFooter {...footer} size={size}/>}\n    </Wrapper>\n  )\n}\n\n\nexport default Tile;\n"],"file":"Tile.js"}

package/dist/Tile/TileBody.cjs

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _types = require("../types");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _styles = require("../styles");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject;
+
+var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1;\n  margin: 8px 6px 8px 4px;\n  overflow: auto;\n  box-sizing: border-box;\n\n  &.small {\n    padding-right: 10px;\n    padding-left: 12px;\n  }\n\n  &.medium {\n    padding-right: 14px;\n    padding-left: 16px;\n  }\n\n  &.large {\n    padding-right: 18px;\n    padding-left: 20px;\n  }\n\n  ", "\n"])), (0, _styles.scrollBarStyling)(_types.Size.Small));
+
+var TileBody = function TileBody(_ref) {
+  var children = _ref.children,
+      size = _ref.size;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
+    className: size,
+    children: children
+  });
+};
+
+var _default = TileBody;
+exports.default = _default;
+//# sourceMappingURL=TileBody.cjs.map

package/dist/Tile/TileBody.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Tile/TileBody.tsx"],"names":["Wrapper","styled","div","Size","Small","TileBody","children","size"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;AAEA,IAAMA,OAAO,GAAGC,0BAAOC,GAAV,4YAqBT,8BAAiBC,YAAKC,KAAtB,CArBS,CAAb;;AAwBA,IAAMC,QAAiD,GAAG,SAApDA,QAAoD,OAAsB;AAAA,MAApBC,QAAoB,QAApBA,QAAoB;AAAA,MAAVC,IAAU,QAAVA,IAAU;AAG9E,sBACE,qBAAC,OAAD;AAAS,IAAA,SAAS,EAAEA,IAApB;AAAA,cACGD;AADH,IADF;AAKD,CARD;;eAWeD,Q","sourcesContent":["import React from 'react'\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {scrollBarStyling} from '../styles';\n\nconst Wrapper = styled.div`\n  flex: 1;\n  margin: 8px 6px 8px 4px;\n  overflow: auto;\n  box-sizing: border-box;\n\n  &.small {\n    padding-right: 10px;\n    padding-left: 12px;\n  }\n\n  &.medium {\n    padding-right: 14px;\n    padding-left: 16px;\n  }\n\n  &.large {\n    padding-right: 18px;\n    padding-left: 20px;\n  }\n\n  ${scrollBarStyling(Size.Small)}\n`;\n\nconst TileBody: React.FunctionComponent<{ size: Size }> = ({children, size}) => {\n\n\n  return (\n    <Wrapper className={size}>\n      {children}\n    </Wrapper>\n  )\n}\n\n\nexport default TileBody;\n"],"file":"TileBody.cjs"}

package/dist/Tile/TileBody.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Size } from '../types';
+declare const TileBody: React.FunctionComponent<{
+    size: Size;
+}>;
+export default TileBody;

package/dist/Tile/TileBody.js

@@ -0,0 +1,22 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+
+var _templateObject;
+
+import React from 'react';
+import { Size } from '../types';
+import styled from 'styled-components';
+import { scrollBarStyling } from '../styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex: 1;\n  margin: 8px 6px 8px 4px;\n  overflow: auto;\n  box-sizing: border-box;\n\n  &.small {\n    padding-right: 10px;\n    padding-left: 12px;\n  }\n\n  &.medium {\n    padding-right: 14px;\n    padding-left: 16px;\n  }\n\n  &.large {\n    padding-right: 18px;\n    padding-left: 20px;\n  }\n\n  ", "\n"])), scrollBarStyling(Size.Small));
+
+var TileBody = function TileBody(_ref) {
+  var children = _ref.children,
+      size = _ref.size;
+  return /*#__PURE__*/_jsx(Wrapper, {
+    className: size,
+    children: children
+  });
+};
+
+export default TileBody;
+//# sourceMappingURL=TileBody.js.map

package/dist/Tile/TileBody.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Tile/TileBody.tsx"],"names":["React","Size","styled","scrollBarStyling","Wrapper","div","Small","TileBody","children","size"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAAQC,IAAR,QAAmB,UAAnB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,gBAAR,QAA+B,WAA/B;;AAEA,IAAMC,OAAO,GAAGF,MAAM,CAACG,GAAV,8XAqBTF,gBAAgB,CAACF,IAAI,CAACK,KAAN,CArBP,CAAb;;AAwBA,IAAMC,QAAiD,GAAG,SAApDA,QAAoD,OAAsB;AAAA,MAApBC,QAAoB,QAApBA,QAAoB;AAAA,MAAVC,IAAU,QAAVA,IAAU;AAG9E,sBACE,KAAC,OAAD;AAAS,IAAA,SAAS,EAAEA,IAApB;AAAA,cACGD;AADH,IADF;AAKD,CARD;;AAWA,eAAeD,QAAf","sourcesContent":["import React from 'react'\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {scrollBarStyling} from '../styles';\n\nconst Wrapper = styled.div`\n  flex: 1;\n  margin: 8px 6px 8px 4px;\n  overflow: auto;\n  box-sizing: border-box;\n\n  &.small {\n    padding-right: 10px;\n    padding-left: 12px;\n  }\n\n  &.medium {\n    padding-right: 14px;\n    padding-left: 16px;\n  }\n\n  &.large {\n    padding-right: 18px;\n    padding-left: 20px;\n  }\n\n  ${scrollBarStyling(Size.Small)}\n`;\n\nconst TileBody: React.FunctionComponent<{ size: Size }> = ({children, size}) => {\n\n\n  return (\n    <Wrapper className={size}>\n      {children}\n    </Wrapper>\n  )\n}\n\n\nexport default TileBody;\n"],"file":"TileBody.js"}

package/dist/Tile/TileCommonItems.cjs

@@ -0,0 +1,164 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TileNoteWrapper = exports.TileNoteText = exports.TileNoteIcon = exports.TileHyperLinkWrapper = exports.TileHyperLinkText = exports.TileHyperLinkIcon = exports.RenderTileItem = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _Button = require("../Button");
+
+var _Toggles = require("../Toggles");
+
+var _Dropdown = require("../Dropdown");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _styles = require("../styles");
+
+var _HyperLink = require("../HyperLink");
+
+var _types = require("../types");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _excluded = ["linkText", "componentType", "linkIcon"],
+    _excluded2 = ["buttonText", "componentType"];
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
+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 _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; }
+
+var TileNoteText = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)([""])));
+
+exports.TileNoteText = TileNoteText;
+
+var TileNoteIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)([""])));
+
+exports.TileNoteIcon = TileNoteIcon;
+
+var TileNoteWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  color: ", ";\n\n  &.small {\n    gap: 4px;\n\n    ", " {\n      width: 16px;\n      height: 16px;\n    }\n\n    ", " {\n      ", "\n    }\n  }\n\n  &.medium {\n    gap: 6px;\n\n    ", " {\n      width: 16px;\n      height: 16px;\n    }\n\n    ", " {\n      ", "\n    }\n\n  }\n\n  &.large {\n    gap: 8px;\n\n    ", " {\n      width: 20px;\n      height: 20px;\n    }\n\n    ", " {\n      ", "\n    }\n  }\n"])), _styles.COLORS.neutral_600, TileNoteIcon, TileNoteText, (0, _styles.ComponentXXSStyling)(_styles.ComponentTextStyle.Regular, null), TileNoteIcon, TileNoteText, (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null), TileNoteIcon, TileNoteText, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null));
+
+exports.TileNoteWrapper = TileNoteWrapper;
+
+var TileHyperLinkIcon = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)([""])));
+
+exports.TileHyperLinkIcon = TileHyperLinkIcon;
+
+var TileHyperLinkText = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)([""])));
+
+exports.TileHyperLinkText = TileHyperLinkText;
+
+var TileHyperLinkWrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  width: max-content;\n\n  ", "\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n\n  &.small {\n    ", " {\n      width: 24px;\n      height: 24px;\n    }\n\n    ", " {\n      ", "\n    }\n  }\n\n  &.medium {\n    ", " {\n      width: 24px;\n      height: 24px;\n    }\n\n    ", " {\n      ", "\n    }\n  }\n\n  &.large {\n    ", " {\n      width: 24px;\n      height: 24px;\n    }\n\n    ", " {\n      ", "\n    }\n  }\n"])), (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.primary_500), TileHyperLinkIcon, TileHyperLinkText, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, null), TileHyperLinkIcon, TileHyperLinkText, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, null), TileHyperLinkIcon, TileHyperLinkText, (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Bold, null));
+
+exports.TileHyperLinkWrapper = TileHyperLinkWrapper;
+
+var RenderTileItem = function RenderTileItem(item, size) {
+  var key = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
+
+  switch (item.componentType) {
+    case 'icon':
+      {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+          variant: 'secondary',
+          useTransparentBackground: true,
+          shape: 'circular',
+          action: item.action,
+          disabled: item.disabled,
+          children: item.icon
+        }, key);
+      }
+
+    case 'toggle':
+      {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toggles.ToggleButton, {
+          active: item.active,
+          onChange: item.onChange,
+          defaultState: item.defaultState,
+          activeState: item.activeState,
+          disabled: item.disabled
+        }, key);
+      }
+
+    case 'dropdown':
+      {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.DropdownButton, {
+          items: item.items,
+          itemsType: item.itemsType,
+          onClick: item.onClick,
+          icon: item.icon,
+          action: item.action,
+          actionIcon: item.actionIcon,
+          actionLabel: item.actionLabel,
+          actionVariant: item.actionVariant,
+          actionLoading: item.actionLoading,
+          multiSelect: item.multiSelect,
+          scrollable: item.scrollable,
+          pinTopItem: item.pinTopItem,
+          maxHeight: item.maxHeight,
+          disabled: item.disabled
+        }, key);
+      }
+
+    case 'note':
+      {
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(TileNoteWrapper, {
+          className: size,
+          children: [item.noteIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(TileNoteIcon, {
+            children: /*#__PURE__*/_react.default.cloneElement(item.noteIcon, {
+              size: size === _types.Size.Large ? '20px' : '16'
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TileNoteText, {
+            children: item.noteText
+          })]
+        }, key);
+      }
+
+    case 'link':
+      {
+        var linkText = item.linkText,
+            componentType = item.componentType,
+            linkIcon = item.linkIcon,
+            rest = (0, _objectWithoutProperties2.default)(item, _excluded);
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(TileHyperLinkWrapper, {
+          className: size,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_HyperLink.HyperLink, _objectSpread(_objectSpread({}, rest), {}, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TileHyperLinkIcon, {
+              children: /*#__PURE__*/_react.default.cloneElement(linkIcon, {
+                size: size === _types.Size.Large ? '28px' : '24px'
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TileHyperLinkText, {
+              children: linkText
+            })]
+          }))
+        }, key);
+      }
+
+    case 'button':
+      {
+        var buttonText = item.buttonText,
+            _componentType = item.componentType,
+            _rest = (0, _objectWithoutProperties2.default)(item, _excluded2);
+
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, _objectSpread(_objectSpread({
+          size: size
+        }, _rest), {}, {
+          children: buttonText
+        }), key);
+      }
+  }
+};
+
+exports.RenderTileItem = RenderTileItem;
+//# sourceMappingURL=TileCommonItems.cjs.map