@laerdal/life-react-components 1.8.0 → 1.9.0-dev.1

package/dist/InputFields/types.d.ts

@@ -0,0 +1,38 @@
+import { Size } from '../types';
+export declare type TextFieldProps = {
+    id: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    onChange?: (text: string) => void;
+    value?: string;
+    validationMessage?: string;
+    type?: string;
+    state?: 'invalid' | 'valid';
+    autoComplete?: string;
+    placeholder?: string;
+    required?: boolean;
+    pattern?: string;
+    maxLength?: number;
+    withoutBorder?: boolean;
+    size?: Size.Small | Size.Medium;
+    margin?: string;
+    note?: TextFieldNote;
+};
+export declare type TextareaProps = {
+    id: string;
+    placeholder: string;
+    value?: string;
+    disabled?: boolean;
+    state?: 'invalid' | 'valid';
+    onChange?: (text: string) => void;
+    validationMessage?: string;
+    size: Size.Small | Size.Medium;
+    autoHeight?: boolean;
+    margin?: string;
+    note?: TextFieldNote;
+    required: boolean;
+};
+export declare type TextFieldNote = {
+    message: string;
+    icon: React.ReactNode;
+};

package/dist/InputFields/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/InputFields/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"types.js"}

package/dist/List/ListRow.cjs

@@ -121,6 +121,7 @@ var ListRow = function ListRow(_ref) {
         return setInAction(false);
       },
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.DropdownButton, _objectSpread(_objectSpread({}, dropdown), {}, {
+        type: 'icon',
         disabled: disabled || dropdown.disabled,
         icon: variant === 'overlay' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ArrowDropDown, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.MoreVertical, {})
       }))

package/dist/List/ListRow.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/List/ListRow.tsx"],"names":["Row","styled","div","COLORS","neutral_100","neutral_600","white","primary_20","primary_700","Z_INDEXES","hover","primary_100","primary_800","active","focusStyles","neutral_300","ComponentTextStyle","Regular","ListRow","size","Size","Medium","variant","icon","mainText","secondaryText","dropdown","note","noteTooltip","disabled","action","React","useState","inAction","setInAction","handleKeyPress","e","key","rowClassName","concat","defaultOnMouseDownHandler","Large","Small","XSmall"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\n\nimport {\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {TooltipWrapper} from '../Tooltips';\nimport {DropdownButton} from '../Dropdown';\nimport {SystemIcons} from '../icons';\nimport {Size} from '../types';\nimport {Z_INDEXES} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst Row = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  box-sizing: border-box;\n  position: relative;\n\n  color: ${COLORS.neutral_600};\n  background-color: ${COLORS.white};\n\n\n  cursor: default;\n\n  &.interactive {\n    cursor: pointer;\n  }\n\n  &.interactive.disabled {\n    cursor: not-allowed;\n  }\n\n  &.interactive:hover:not(.in-action):not(.disabled) {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  &.interactive:active:not(.in-action):not(.disabled) {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n    z-index: ${Z_INDEXES.active};\n  }\n\n  &.interactive:focus {\n    ${focusStyles}\n  }\n\n  &.disabled {\n    .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n\n  &.small {\n    min-height: 48px;\n    padding: 0 8px;\n\n    .list-item-icon {\n      margin-right: 8px;\n    }\n\n    .list-item-main-text {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -8px;\n    }\n  }\n\n  &.medium {\n    min-height: 56px;\n    padding: 0 12px;\n\n    .list-item-icon {\n      margin-right: 12px;\n    }\n\n    .list-item-main-text {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -12px;\n    }\n  }\n\n  &.large {\n    min-height: 64px;\n    padding: 0 16px;\n\n    .list-item-icon {\n      margin-right: 16px;\n    }\n\n    .list-item-main-text {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -16px;\n    }\n  }\n\n  &.overlay {\n    padding: 0 4px;\n\n    .list-item-actions {\n      margin-right: -4px;\n    }\n  }\n\n  .list-item-icon {\n    width: 24px;\n    height: 24px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .list-item-content {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .list-item-main-text {\n  }\n\n  .list-item-secondary-text {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n  }\n\n  .list-item-note {\n    color: ${COLORS.neutral_600};\n    word-break: initial;\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n  }\n\n  .list-item-note.with-tooltip {\n    cursor: pointer;\n\n    > div {\n      text-decoration-line: underline;\n      text-decoration-style: dashed;\n      text-underline-offset: 1px;\n      text-decoration-thickness: 1px;\n    }\n  }\n\n  .list-item-actions {\n    color: ${COLORS.neutral_600};\n    display: flex;\n    align-items: center;\n\n    button div {\n      background-color: transparent;\n    }\n  }\n`;\n\n\ntype Props = {\n  size?: Size;\n  variant?: 'normal' | 'overlay';\n  icon?: React.ReactNode;\n  mainText: string;\n  secondaryText?: string;\n  dropdown?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width'>;\n  note?: string;\n  noteTooltip?: string;\n  disabled?: boolean;\n  action?: () => void;\n};\n\nconst ListRow: React.FunctionComponent<Props> = ({\n                                                   size = Size.Medium,\n                                                   variant = 'normal',\n                                                   icon,\n                                                   mainText,\n                                                   secondaryText,\n                                                   dropdown,\n                                                   note,\n                                                   noteTooltip,\n                                                   disabled = false,\n                                                   action\n                                                 }: Props) => {\n\n  const [inAction, setInAction] = React.useState<Boolean>(false);\n\n  const handleKeyPress = (e: any) => {\n    if (e.key === 'Enter') {\n      action && action()\n    }\n  }\n\n  const rowClassName = (inAction ? 'in-action ' : '')\n    .concat(disabled ? 'disabled ' : '')\n    .concat(!!action ? 'interactive ' : '')\n    .concat('list-item-row ')\n    .concat(`${variant} `)\n    .concat(`${size}`);\n\n  return (\n    <Row tabIndex={!action || disabled ? -1 : 0}\n         className={rowClassName}\n         onMouseDown={defaultOnMouseDownHandler}\n         onKeyPress={(e) => !disabled && handleKeyPress(e)}\n         onClick={e => {\n           !disabled && action && action();\n         }}\n         data-hj-suppress>\n      {\n        !!icon &&\n        <div className={'list-item-icon'}>{icon}</div>\n      }\n      <div className={'list-item-content'}>\n        <div className={'list-item-main-text'}>{mainText}</div>\n        {!!secondaryText && <div className={'list-item-secondary-text'}>{secondaryText}</div>}\n      </div>\n      {\n        !!note &&\n        <>\n          {\n            !!noteTooltip &&\n            <div className={'list-item-note with-tooltip'}>\n              <TooltipWrapper label={noteTooltip}\n                              size={size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small}\n                              position={'top'}\n                              tabIndex={disabled ? -1 : 0}\n                              withArrow={true}>\n                {note}\n              </TooltipWrapper>\n            </div>\n          }\n          {\n            !noteTooltip &&\n            <div className={'list-item-note'}>\n              {note}\n            </div>\n          }\n        </>\n      }\n      {\n        !!dropdown &&\n        <div className={'list-item-actions'}\n             onMouseEnter={() => setInAction(!dropdown?.disabled)}\n             onMouseLeave={() => setInAction(false)}>\n          <DropdownButton {...dropdown}\n                          disabled={disabled || dropdown.disabled}\n                          icon={variant === 'overlay'\n                            ? <SystemIcons.ArrowDropDown/>\n                            : <SystemIcons.MoreVertical/>}\n          />\n        </div>\n      }\n    </Row>\n  );\n};\n\nexport default ListRow;\n\n"],"file":"ListRow.cjs"}
+{"version":3,"sources":["../../src/List/ListRow.tsx"],"names":["Row","styled","div","COLORS","neutral_100","neutral_600","white","primary_20","primary_700","Z_INDEXES","hover","primary_100","primary_800","active","focusStyles","neutral_300","ComponentTextStyle","Regular","ListRow","size","Size","Medium","variant","icon","mainText","secondaryText","dropdown","note","noteTooltip","disabled","action","React","useState","inAction","setInAction","handleKeyPress","e","key","rowClassName","concat","defaultOnMouseDownHandler","Large","Small","XSmall"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAUA;;AACA;;AACA;;AACA;;AAEA;;;;;;;;;;;;;;AAEA,IAAMA,GAAG,GAAGC,0BAAOC,GAAV,y6EAKoBC,eAAOC,WAL3B,EASED,eAAOE,WATT,EAUaF,eAAOG,KAVpB,EAwBeH,eAAOI,UAxBtB,EAyBIJ,eAAOK,WAzBX,EA0BMC,kBAAUC,KA1BhB,EA8BeP,eAAOQ,WA9BtB,EA+BIR,eAAOS,WA/BX,EAgCMH,kBAAUI,MAhChB,EAoCHC,mBApCG,EAyCMX,eAAOY,WAzCb,EAuDD,+BAAkBC,2BAAmBC,OAArC,EAA8C,IAA9C,CAvDC,EAwED,+BAAkBD,2BAAmBC,OAArC,EAA8C,IAA9C,CAxEC,EAyFD,+BAAkBD,2BAAmBC,OAArC,EAA8C,IAA9C,CAzFC,EA6HH,iCAAoBD,2BAAmBC,OAAvC,EAAgD,IAAhD,CA7HG,EAiIId,eAAOE,WAjIX,EAmIH,gCAAmBW,2BAAmBC,OAAtC,EAA+C,IAA/C,CAnIG,EAkJId,eAAOE,WAlJX,CAAT;;AA0KA,IAAMa,OAAuC,GAAG,SAA1CA,OAA0C,OAWc;AAAA,uBAVXC,IAUW;AAAA,MAVXA,IAUW,0BAVJC,YAAKC,MAUD;AAAA,0BATXC,OASW;AAAA,MATXA,OASW,6BATD,QASC;AAAA,MARXC,IAQW,QARXA,IAQW;AAAA,MAPXC,QAOW,QAPXA,QAOW;AAAA,MANXC,aAMW,QANXA,aAMW;AAAA,MALXC,QAKW,QALXA,QAKW;AAAA,MAJXC,IAIW,QAJXA,IAIW;AAAA,MAHXC,WAGW,QAHXA,WAGW;AAAA,2BAFXC,QAEW;AAAA,MAFXA,QAEW,8BAFA,KAEA;AAAA,MADXC,MACW,QADXA,MACW;;AAE5D,wBAAgCC,KAAK,CAACC,QAAN,CAAwB,KAAxB,CAAhC;AAAA;AAAA,MAAOC,QAAP;AAAA,MAAiBC,WAAjB;;AAEA,MAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACC,CAAD,EAAY;AACjC,QAAIA,CAAC,CAACC,GAAF,KAAU,OAAd,EAAuB;AACrBP,MAAAA,MAAM,IAAIA,MAAM,EAAhB;AACD;AACF,GAJD;;AAMA,MAAMQ,YAAY,GAAG,CAACL,QAAQ,GAAG,YAAH,GAAkB,EAA3B,EAClBM,MADkB,CACXV,QAAQ,GAAG,WAAH,GAAiB,EADd,EAElBU,MAFkB,CAEX,CAAC,CAACT,MAAF,GAAW,cAAX,GAA4B,EAFjB,EAGlBS,MAHkB,CAGX,gBAHW,EAIlBA,MAJkB,WAIRjB,OAJQ,QAKlBiB,MALkB,WAKRpB,IALQ,EAArB;AAOA,sBACE,sBAAC,GAAD;AAAK,IAAA,QAAQ,EAAE,CAACW,MAAD,IAAWD,QAAX,GAAsB,CAAC,CAAvB,GAA2B,CAA1C;AACK,IAAA,SAAS,EAAES,YADhB;AAEK,IAAA,WAAW,EAAEE,iCAFlB;AAGK,IAAA,UAAU,EAAE,oBAACJ,CAAD;AAAA,aAAO,CAACP,QAAD,IAAaM,cAAc,CAACC,CAAD,CAAlC;AAAA,KAHjB;AAIK,IAAA,OAAO,EAAE,iBAAAA,CAAC,EAAI;AACZ,OAACP,QAAD,IAAaC,MAAb,IAAuBA,MAAM,EAA7B;AACD,KANN;AAOK,4BAPL;AAAA,eASI,CAAC,CAACP,IAAF,iBACA;AAAK,MAAA,SAAS,EAAE,gBAAhB;AAAA,gBAAmCA;AAAnC,MAVJ,eAYE;AAAK,MAAA,SAAS,EAAE,mBAAhB;AAAA,8BACE;AAAK,QAAA,SAAS,EAAE,qBAAhB;AAAA,kBAAwCC;AAAxC,QADF,EAEG,CAAC,CAACC,aAAF,iBAAmB;AAAK,QAAA,SAAS,EAAE,0BAAhB;AAAA,kBAA6CA;AAA7C,QAFtB;AAAA,MAZF,EAiBI,CAAC,CAACE,IAAF,iBACA;AAAA,iBAEI,CAAC,CAACC,WAAF,iBACA;AAAK,QAAA,SAAS,EAAE,6BAAhB;AAAA,+BACE,qBAAC,wBAAD;AAAgB,UAAA,KAAK,EAAEA,WAAvB;AACgB,UAAA,IAAI,EAAET,IAAI,KAAKC,YAAKqB,KAAd,GAAsBrB,YAAKC,MAA3B,GAAoCF,IAAI,KAAKC,YAAKsB,KAAd,GAAsBtB,YAAKuB,MAA3B,GAAoCvB,YAAKsB,KADnG;AAEgB,UAAA,QAAQ,EAAE,KAF1B;AAGgB,UAAA,QAAQ,EAAEb,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAH1C;AAIgB,UAAA,SAAS,EAAE,IAJ3B;AAAA,oBAKGF;AALH;AADF,QAHJ,EAcI,CAACC,WAAD,iBACA;AAAK,QAAA,SAAS,EAAE,gBAAhB;AAAA,kBACGD;AADH,QAfJ;AAAA,MAlBJ,EAwCI,CAAC,CAACD,QAAF,iBACA;AAAK,MAAA,SAAS,EAAE,mBAAhB;AACK,MAAA,YAAY,EAAE;AAAA,eAAMQ,WAAW,CAAC,EAACR,QAAD,aAACA,QAAD,eAACA,QAAQ,CAAEG,QAAX,CAAD,CAAjB;AAAA,OADnB;AAEK,MAAA,YAAY,EAAE;AAAA,eAAMK,WAAW,CAAC,KAAD,CAAjB;AAAA,OAFnB;AAAA,6BAGE,qBAAC,wBAAD,kCAAoBR,QAApB;AACgB,QAAA,IAAI,EAAE,MADtB;AAEgB,QAAA,QAAQ,EAAEG,QAAQ,IAAIH,QAAQ,CAACG,QAF/C;AAGgB,QAAA,IAAI,EAAEP,OAAO,KAAK,SAAZ,gBACF,qBAAC,kBAAD,CAAa,aAAb,KADE,gBAEF,qBAAC,kBAAD,CAAa,YAAb;AALpB;AAHF,MAzCJ;AAAA,IADF;AAwDD,CApFD;;;AAXEA,EAAAA,O,4BAAU,Q,EAAW,S;AACrBC,EAAAA,I;AACAC,EAAAA,Q;AACAC,EAAAA,a;AAEAE,EAAAA,I;AACAC,EAAAA,W;AACAC,EAAAA,Q;AACAC,EAAAA,M;;eAyFaZ,O","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\n\nimport {\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {TooltipWrapper} from '../Tooltips';\nimport {DropdownButton} from '../Dropdown';\nimport {SystemIcons} from '../icons';\nimport {Size} from '../types';\nimport {Z_INDEXES} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst Row = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  box-sizing: border-box;\n  position: relative;\n\n  color: ${COLORS.neutral_600};\n  background-color: ${COLORS.white};\n\n\n  cursor: default;\n\n  &.interactive {\n    cursor: pointer;\n  }\n\n  &.interactive.disabled {\n    cursor: not-allowed;\n  }\n\n  &.interactive:hover:not(.in-action):not(.disabled) {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  &.interactive:active:not(.in-action):not(.disabled) {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n    z-index: ${Z_INDEXES.active};\n  }\n\n  &.interactive:focus {\n    ${focusStyles}\n  }\n\n  &.disabled {\n    .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n\n  &.small {\n    min-height: 48px;\n    padding: 0 8px;\n\n    .list-item-icon {\n      margin-right: 8px;\n    }\n\n    .list-item-main-text {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -8px;\n    }\n  }\n\n  &.medium {\n    min-height: 56px;\n    padding: 0 12px;\n\n    .list-item-icon {\n      margin-right: 12px;\n    }\n\n    .list-item-main-text {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -12px;\n    }\n  }\n\n  &.large {\n    min-height: 64px;\n    padding: 0 16px;\n\n    .list-item-icon {\n      margin-right: 16px;\n    }\n\n    .list-item-main-text {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -16px;\n    }\n  }\n\n  &.overlay {\n    padding: 0 4px;\n\n    .list-item-actions {\n      margin-right: -4px;\n    }\n  }\n\n  .list-item-icon {\n    width: 24px;\n    height: 24px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .list-item-content {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .list-item-main-text {\n  }\n\n  .list-item-secondary-text {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n  }\n\n  .list-item-note {\n    color: ${COLORS.neutral_600};\n    word-break: initial;\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n  }\n\n  .list-item-note.with-tooltip {\n    cursor: pointer;\n\n    > div {\n      text-decoration-line: underline;\n      text-decoration-style: dashed;\n      text-underline-offset: 1px;\n      text-decoration-thickness: 1px;\n    }\n  }\n\n  .list-item-actions {\n    color: ${COLORS.neutral_600};\n    display: flex;\n    align-items: center;\n\n    button div {\n      background-color: transparent;\n    }\n  }\n`;\n\n\ntype Props = {\n  size?: Size;\n  variant?: 'normal' | 'overlay';\n  icon?: React.ReactNode;\n  mainText: string;\n  secondaryText?: string;\n  dropdown?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width'>;\n  note?: string;\n  noteTooltip?: string;\n  disabled?: boolean;\n  action?: () => void;\n};\n\nconst ListRow: React.FunctionComponent<Props> = ({\n                                                   size = Size.Medium,\n                                                   variant = 'normal',\n                                                   icon,\n                                                   mainText,\n                                                   secondaryText,\n                                                   dropdown,\n                                                   note,\n                                                   noteTooltip,\n                                                   disabled = false,\n                                                   action\n                                                 }: Props) => {\n\n  const [inAction, setInAction] = React.useState<Boolean>(false);\n\n  const handleKeyPress = (e: any) => {\n    if (e.key === 'Enter') {\n      action && action()\n    }\n  }\n\n  const rowClassName = (inAction ? 'in-action ' : '')\n    .concat(disabled ? 'disabled ' : '')\n    .concat(!!action ? 'interactive ' : '')\n    .concat('list-item-row ')\n    .concat(`${variant} `)\n    .concat(`${size}`);\n\n  return (\n    <Row tabIndex={!action || disabled ? -1 : 0}\n         className={rowClassName}\n         onMouseDown={defaultOnMouseDownHandler}\n         onKeyPress={(e) => !disabled && handleKeyPress(e)}\n         onClick={e => {\n           !disabled && action && action();\n         }}\n         data-hj-suppress>\n      {\n        !!icon &&\n        <div className={'list-item-icon'}>{icon}</div>\n      }\n      <div className={'list-item-content'}>\n        <div className={'list-item-main-text'}>{mainText}</div>\n        {!!secondaryText && <div className={'list-item-secondary-text'}>{secondaryText}</div>}\n      </div>\n      {\n        !!note &&\n        <>\n          {\n            !!noteTooltip &&\n            <div className={'list-item-note with-tooltip'}>\n              <TooltipWrapper label={noteTooltip}\n                              size={size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small}\n                              position={'top'}\n                              tabIndex={disabled ? -1 : 0}\n                              withArrow={true}>\n                {note}\n              </TooltipWrapper>\n            </div>\n          }\n          {\n            !noteTooltip &&\n            <div className={'list-item-note'}>\n              {note}\n            </div>\n          }\n        </>\n      }\n      {\n        !!dropdown &&\n        <div className={'list-item-actions'}\n             onMouseEnter={() => setInAction(!dropdown?.disabled)}\n             onMouseLeave={() => setInAction(false)}>\n          <DropdownButton {...dropdown}\n                          type={'icon'}\n                          disabled={disabled || dropdown.disabled}\n                          icon={variant === 'overlay'\n                            ? <SystemIcons.ArrowDropDown/>\n                            : <SystemIcons.MoreVertical/>}\n          />\n        </div>\n      }\n    </Row>\n  );\n};\n\nexport default ListRow;\n\n"],"file":"ListRow.cjs"}

package/dist/List/ListRow.js

@@ -98,6 +98,7 @@ var ListRow = function ListRow(_ref) {
         return setInAction(false);
       },
       children: /*#__PURE__*/_jsx(DropdownButton, _objectSpread(_objectSpread({}, dropdown), {}, {
+        type: 'icon',
         disabled: disabled || dropdown.disabled,
         icon: variant === 'overlay' ? /*#__PURE__*/_jsx(SystemIcons.ArrowDropDown, {}) : /*#__PURE__*/_jsx(SystemIcons.MoreVertical, {})
       }))

package/dist/List/ListRow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/List/ListRow.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","focusStyles","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXSStyling","ComponentXXSStyling","TooltipWrapper","DropdownButton","SystemIcons","Size","Z_INDEXES","defaultOnMouseDownHandler","Row","div","neutral_100","neutral_600","white","primary_20","primary_700","hover","primary_100","primary_800","active","neutral_300","Regular","ListRow","size","Medium","variant","icon","mainText","secondaryText","dropdown","note","noteTooltip","disabled","action","useState","inAction","setInAction","handleKeyPress","e","key","rowClassName","concat","Large","Small","XSmall"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\n\nimport {\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {TooltipWrapper} from '../Tooltips';\nimport {DropdownButton} from '../Dropdown';\nimport {SystemIcons} from '../icons';\nimport {Size} from '../types';\nimport {Z_INDEXES} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst Row = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  box-sizing: border-box;\n  position: relative;\n\n  color: ${COLORS.neutral_600};\n  background-color: ${COLORS.white};\n\n\n  cursor: default;\n\n  &.interactive {\n    cursor: pointer;\n  }\n\n  &.interactive.disabled {\n    cursor: not-allowed;\n  }\n\n  &.interactive:hover:not(.in-action):not(.disabled) {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  &.interactive:active:not(.in-action):not(.disabled) {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n    z-index: ${Z_INDEXES.active};\n  }\n\n  &.interactive:focus {\n    ${focusStyles}\n  }\n\n  &.disabled {\n    .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n\n  &.small {\n    min-height: 48px;\n    padding: 0 8px;\n\n    .list-item-icon {\n      margin-right: 8px;\n    }\n\n    .list-item-main-text {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -8px;\n    }\n  }\n\n  &.medium {\n    min-height: 56px;\n    padding: 0 12px;\n\n    .list-item-icon {\n      margin-right: 12px;\n    }\n\n    .list-item-main-text {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -12px;\n    }\n  }\n\n  &.large {\n    min-height: 64px;\n    padding: 0 16px;\n\n    .list-item-icon {\n      margin-right: 16px;\n    }\n\n    .list-item-main-text {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -16px;\n    }\n  }\n\n  &.overlay {\n    padding: 0 4px;\n\n    .list-item-actions {\n      margin-right: -4px;\n    }\n  }\n\n  .list-item-icon {\n    width: 24px;\n    height: 24px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .list-item-content {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .list-item-main-text {\n  }\n\n  .list-item-secondary-text {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n  }\n\n  .list-item-note {\n    color: ${COLORS.neutral_600};\n    word-break: initial;\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n  }\n\n  .list-item-note.with-tooltip {\n    cursor: pointer;\n\n    > div {\n      text-decoration-line: underline;\n      text-decoration-style: dashed;\n      text-underline-offset: 1px;\n      text-decoration-thickness: 1px;\n    }\n  }\n\n  .list-item-actions {\n    color: ${COLORS.neutral_600};\n    display: flex;\n    align-items: center;\n\n    button div {\n      background-color: transparent;\n    }\n  }\n`;\n\n\ntype Props = {\n  size?: Size;\n  variant?: 'normal' | 'overlay';\n  icon?: React.ReactNode;\n  mainText: string;\n  secondaryText?: string;\n  dropdown?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width'>;\n  note?: string;\n  noteTooltip?: string;\n  disabled?: boolean;\n  action?: () => void;\n};\n\nconst ListRow: React.FunctionComponent<Props> = ({\n                                                   size = Size.Medium,\n                                                   variant = 'normal',\n                                                   icon,\n                                                   mainText,\n                                                   secondaryText,\n                                                   dropdown,\n                                                   note,\n                                                   noteTooltip,\n                                                   disabled = false,\n                                                   action\n                                                 }: Props) => {\n\n  const [inAction, setInAction] = React.useState<Boolean>(false);\n\n  const handleKeyPress = (e: any) => {\n    if (e.key === 'Enter') {\n      action && action()\n    }\n  }\n\n  const rowClassName = (inAction ? 'in-action ' : '')\n    .concat(disabled ? 'disabled ' : '')\n    .concat(!!action ? 'interactive ' : '')\n    .concat('list-item-row ')\n    .concat(`${variant} `)\n    .concat(`${size}`);\n\n  return (\n    <Row tabIndex={!action || disabled ? -1 : 0}\n         className={rowClassName}\n         onMouseDown={defaultOnMouseDownHandler}\n         onKeyPress={(e) => !disabled && handleKeyPress(e)}\n         onClick={e => {\n           !disabled && action && action();\n         }}\n         data-hj-suppress>\n      {\n        !!icon &&\n        <div className={'list-item-icon'}>{icon}</div>\n      }\n      <div className={'list-item-content'}>\n        <div className={'list-item-main-text'}>{mainText}</div>\n        {!!secondaryText && <div className={'list-item-secondary-text'}>{secondaryText}</div>}\n      </div>\n      {\n        !!note &&\n        <>\n          {\n            !!noteTooltip &&\n            <div className={'list-item-note with-tooltip'}>\n              <TooltipWrapper label={noteTooltip}\n                              size={size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small}\n                              position={'top'}\n                              tabIndex={disabled ? -1 : 0}\n                              withArrow={true}>\n                {note}\n              </TooltipWrapper>\n            </div>\n          }\n          {\n            !noteTooltip &&\n            <div className={'list-item-note'}>\n              {note}\n            </div>\n          }\n        </>\n      }\n      {\n        !!dropdown &&\n        <div className={'list-item-actions'}\n             onMouseEnter={() => setInAction(!dropdown?.disabled)}\n             onMouseLeave={() => setInAction(false)}>\n          <DropdownButton {...dropdown}\n                          disabled={disabled || dropdown.disabled}\n                          icon={variant === 'overlay'\n                            ? <SystemIcons.ArrowDropDown/>\n                            : <SystemIcons.MoreVertical/>}\n          />\n        </div>\n      }\n    </Row>\n  );\n};\n\nexport default ListRow;\n\n"],"file":"ListRow.js"}
+{"version":3,"sources":["../../src/List/ListRow.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","focusStyles","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXSStyling","ComponentXXSStyling","TooltipWrapper","DropdownButton","SystemIcons","Size","Z_INDEXES","defaultOnMouseDownHandler","Row","div","neutral_100","neutral_600","white","primary_20","primary_700","hover","primary_100","primary_800","active","neutral_300","Regular","ListRow","size","Medium","variant","icon","mainText","secondaryText","dropdown","note","noteTooltip","disabled","action","useState","inAction","setInAction","handleKeyPress","e","key","rowClassName","concat","Large","Small","XSmall"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\n\nimport {\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {TooltipWrapper} from '../Tooltips';\nimport {DropdownButton} from '../Dropdown';\nimport {SystemIcons} from '../icons';\nimport {Size} from '../types';\nimport {Z_INDEXES} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst Row = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  box-sizing: border-box;\n  position: relative;\n\n  color: ${COLORS.neutral_600};\n  background-color: ${COLORS.white};\n\n\n  cursor: default;\n\n  &.interactive {\n    cursor: pointer;\n  }\n\n  &.interactive.disabled {\n    cursor: not-allowed;\n  }\n\n  &.interactive:hover:not(.in-action):not(.disabled) {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  &.interactive:active:not(.in-action):not(.disabled) {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n    z-index: ${Z_INDEXES.active};\n  }\n\n  &.interactive:focus {\n    ${focusStyles}\n  }\n\n  &.disabled {\n    .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n\n  &.small {\n    min-height: 48px;\n    padding: 0 8px;\n\n    .list-item-icon {\n      margin-right: 8px;\n    }\n\n    .list-item-main-text {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -8px;\n    }\n  }\n\n  &.medium {\n    min-height: 56px;\n    padding: 0 12px;\n\n    .list-item-icon {\n      margin-right: 12px;\n    }\n\n    .list-item-main-text {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -12px;\n    }\n  }\n\n  &.large {\n    min-height: 64px;\n    padding: 0 16px;\n\n    .list-item-icon {\n      margin-right: 16px;\n    }\n\n    .list-item-main-text {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -16px;\n    }\n  }\n\n  &.overlay {\n    padding: 0 4px;\n\n    .list-item-actions {\n      margin-right: -4px;\n    }\n  }\n\n  .list-item-icon {\n    width: 24px;\n    height: 24px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .list-item-content {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .list-item-main-text {\n  }\n\n  .list-item-secondary-text {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n  }\n\n  .list-item-note {\n    color: ${COLORS.neutral_600};\n    word-break: initial;\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n  }\n\n  .list-item-note.with-tooltip {\n    cursor: pointer;\n\n    > div {\n      text-decoration-line: underline;\n      text-decoration-style: dashed;\n      text-underline-offset: 1px;\n      text-decoration-thickness: 1px;\n    }\n  }\n\n  .list-item-actions {\n    color: ${COLORS.neutral_600};\n    display: flex;\n    align-items: center;\n\n    button div {\n      background-color: transparent;\n    }\n  }\n`;\n\n\ntype Props = {\n  size?: Size;\n  variant?: 'normal' | 'overlay';\n  icon?: React.ReactNode;\n  mainText: string;\n  secondaryText?: string;\n  dropdown?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width'>;\n  note?: string;\n  noteTooltip?: string;\n  disabled?: boolean;\n  action?: () => void;\n};\n\nconst ListRow: React.FunctionComponent<Props> = ({\n                                                   size = Size.Medium,\n                                                   variant = 'normal',\n                                                   icon,\n                                                   mainText,\n                                                   secondaryText,\n                                                   dropdown,\n                                                   note,\n                                                   noteTooltip,\n                                                   disabled = false,\n                                                   action\n                                                 }: Props) => {\n\n  const [inAction, setInAction] = React.useState<Boolean>(false);\n\n  const handleKeyPress = (e: any) => {\n    if (e.key === 'Enter') {\n      action && action()\n    }\n  }\n\n  const rowClassName = (inAction ? 'in-action ' : '')\n    .concat(disabled ? 'disabled ' : '')\n    .concat(!!action ? 'interactive ' : '')\n    .concat('list-item-row ')\n    .concat(`${variant} `)\n    .concat(`${size}`);\n\n  return (\n    <Row tabIndex={!action || disabled ? -1 : 0}\n         className={rowClassName}\n         onMouseDown={defaultOnMouseDownHandler}\n         onKeyPress={(e) => !disabled && handleKeyPress(e)}\n         onClick={e => {\n           !disabled && action && action();\n         }}\n         data-hj-suppress>\n      {\n        !!icon &&\n        <div className={'list-item-icon'}>{icon}</div>\n      }\n      <div className={'list-item-content'}>\n        <div className={'list-item-main-text'}>{mainText}</div>\n        {!!secondaryText && <div className={'list-item-secondary-text'}>{secondaryText}</div>}\n      </div>\n      {\n        !!note &&\n        <>\n          {\n            !!noteTooltip &&\n            <div className={'list-item-note with-tooltip'}>\n              <TooltipWrapper label={noteTooltip}\n                              size={size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small}\n                              position={'top'}\n                              tabIndex={disabled ? -1 : 0}\n                              withArrow={true}>\n                {note}\n              </TooltipWrapper>\n            </div>\n          }\n          {\n            !noteTooltip &&\n            <div className={'list-item-note'}>\n              {note}\n            </div>\n          }\n        </>\n      }\n      {\n        !!dropdown &&\n        <div className={'list-item-actions'}\n             onMouseEnter={() => setInAction(!dropdown?.disabled)}\n             onMouseLeave={() => setInAction(false)}>\n          <DropdownButton {...dropdown}\n                          type={'icon'}\n                          disabled={disabled || dropdown.disabled}\n                          icon={variant === 'overlay'\n                            ? <SystemIcons.ArrowDropDown/>\n                            : <SystemIcons.MoreVertical/>}\n          />\n        </div>\n      }\n    </Row>\n  );\n};\n\nexport default ListRow;\n\n"],"file":"ListRow.js"}

package/dist/MenuItem/MenuItem.cjs

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.LockedIconContainer = exports.ItemLabel = exports.ItemIcon = exports.ItemContent = exports.DropdownButtonCSS = exports.DropdownButton = void 0;
+exports.default = exports.ItemLabel = exports.ItemIconRight = exports.ItemIcon = exports.ItemContent = exports.DropdownButtonCSS = exports.DropdownButton = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -49,16 +49,24 @@ var ItemIcon = _styledComponents.default.div(_templateObject3 || (_templateObjec
 
 exports.ItemIcon = ItemIcon;
 
-var LockedIconContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\n"])));
+var ItemIconRight = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: flex;\n"])));
 
-exports.LockedIconContainer = LockedIconContainer;
+exports.ItemIconRight = ItemIconRight;
 
-var ItemContent = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\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);
+var ItemContent = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    margin: ", ";\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: ", ";\n      svg {\n        display: block;\n        margin: auto;\n        height:", ";\n        width:", ";\n      }\n    }\n\n    ", " {\n      flex-grow: 2;\n\n      .extraMargin {\n        margin-left: calc(100% - 24px);\n      }\n    }\n"])), function (props) {
+  return props.size === _types.Size.Small ? 'auto 0 auto 10px' : props.size === _types.Size.Large ? 'auto 0 auto 26px' : 'auto 0 auto 18px';
+}, ItemLabel, ItemIcon, function (props) {
+  return props.size === _types.Size.Small ? '6px' : '8px';
+}, function (props) {
+  return props.size === _types.Size.Small ? '20px' : '';
+}, function (props) {
+  return props.size === _types.Size.Small ? '20px' : '';
+}, ItemIconRight);
 
 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\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);
+  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: none;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ", ", ", " {\n      color: ", ";\n    }\n\n    &:hover:not(.active), &.hover-state {\n      background: ", ";\n      ", ", ", " {\n        color: ", ";\n      }\n    }\n\n    &:focus, &.focus-state, &.focus-visible {\n      ", "\n    }\n\n    &:active:not(.active), &.active-state {\n      background: ", ";\n      ", ", ", " {\n        color: ", ";\n      }\n    }\n\n    &.active {\n      background: ", ";\n\n      ", ", ", " {\n        color: ", ";\n      }\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 4px;\n        bottom: 4px;\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      ", ", ", " {\n        color: ", ";\n      }      \n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.active:active, &.active-active-state {\n      background-color: ", ";\n\n      ", ", ", " {\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, ItemLabel, ItemIcon, _styles.COLORS.neutral_600, _styles.COLORS.primary_20, ItemLabel, ItemIcon, _styles.COLORS.primary_700, _styles.focusStyles, _styles.COLORS.primary_100, ItemLabel, ItemIcon, _styles.COLORS.primary_800, _styles.COLORS.neutral_20, ItemLabel, ItemIcon, _styles.COLORS.neutral_800, _styles.COLORS.primary_500, _styles.COLORS.neutral_500, _styles.COLORS.primary_20, ItemIcon, ItemLabel, _styles.COLORS.primary_700, _styles.COLORS.primary_700, _styles.COLORS.primary_100, ItemIcon, ItemLabel, _styles.COLORS.primary_800, _styles.COLORS.primary_800, _styles.COLORS.neutral_200, _styles.COLORS.primary_20, _styles.COLORS.primary_600);
 };
 
 exports.DropdownButtonCSS = DropdownButtonCSS;
@@ -68,10 +76,11 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var active = _ref.active,
       item = _ref.item,
       onClickHandler = _ref.onClickHandler,
-      key = _ref.key,
-      size = _ref.size,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? _types.Size.Medium : _ref$size,
       className = _ref.className,
       tabIndex = _ref.tabIndex,
+      iconRight = _ref.iconRight,
       id = _ref.id;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(DropdownButton, {
     type: "button",
@@ -86,6 +95,7 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     children: [item.showDividerAbove && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "divider"
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ItemContent, {
+      size: size,
       children: [item.icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemIcon, {
         children: item.icon
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ItemLabel, {
@@ -99,24 +109,29 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
             },
             children: item.noteLabel
           })]
-        }), item.locked && /*#__PURE__*/(0, _jsxRuntime.jsx)(LockedIconContainer, {
+        }), item.locked && /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemIconRight, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.LockedOn, {
             color: _styles.COLORS.neutral_400,
             className: "extraMargin",
             size: "24px"
           })
+        }), !item.locked && !!iconRight && /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemIconRight, {
+          children: /*#__PURE__*/React.cloneElement(iconRight, {
+            className: 'extraMargin',
+            size: '24px'
+          })
         })]
       })]
     })]
-  }, key);
+  });
 });
 MenuItem.propTypes = {
   onClickHandler: _propTypes.default.func.isRequired,
   active: _propTypes.default.bool.isRequired,
   id: _propTypes.default.string.isRequired,
-  key: _propTypes.default.string.isRequired,
   className: _propTypes.default.string,
-  tabIndex: _propTypes.default.number
+  tabIndex: _propTypes.default.number,
+  iconRight: _propTypes.default.element
 };
 var _default = MenuItem;
 exports.default = _default;

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_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":";;;;;;;;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;;;;;AAaO,IAAMA,cAAc,GAAGC,0BAAOC,MAAV,8FACvB,UAACC,KAAD;AAAA,SAAWC,iBAAiB,CAACD,KAAK,CAACE,IAAP,CAA5B;AAAA,CADuB,CAApB;;;;AAIA,IAAMC,SAAS,GAAGL,0BAAOM,GAAV,qFAAf;;;;AACA,IAAMC,QAAQ,GAAGP,0BAAOM,GAAV,qFAAd;;;;AAEA,IAAME,mBAAmB,GAAGR,0BAAOM,GAAV,yFAAzB;;;;AAIA,IAAMG,WAAW,GAAGT,0BAAOM,GAAV,wiBAMlBD,SANkB,EAalBE,QAbkB,EAqBlBC,mBArBkB,CAAjB;;;;AA+BA,IAAML,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,IAAD,EAAiB;AAChD,aAAOM,qBAAP,6/CACIN,IAAI,IAAIO,YAAKC,KAAb,IAAsB,mCAAkBC,2BAAmBC,OAArC,EAA8CC,eAAOC,WAArD,CAD1B,EAEIZ,IAAI,IAAIO,YAAKM,MAAb,IAAuB,mCAAkBJ,2BAAmBC,OAArC,EAA8CC,eAAOC,WAArD,CAF3B,EAGIZ,IAAI,IAAIO,YAAKO,KAAb,IAAsB,mCAAkBL,2BAAmBC,OAArC,EAA8CC,eAAOC,WAArD,CAH1B,EAUgBZ,IAAI,IAAIO,YAAKO,KAAb,GAAqB,MAArB,GAA8Bd,IAAI,IAAIO,YAAKM,MAAb,GAAsB,MAAtB,GAA+B,MAV7E,EAWsBF,eAAOI,KAX7B,EAuBIC,gCAvBJ,EA0BkBL,eAAOM,UA1BzB,EAmC0BN,eAAOO,WAnCjC,EA6CaP,eAAOQ,WA7CpB,EAiDwBR,eAAOS,UAjD/B,EAoDeT,eAAOU,WApDtB,EAwD0BV,eAAOO,WAxDjC,EA6DwBP,eAAOW,WA7D/B,EAgEeX,eAAOY,WAhEtB,EAoE0BZ,eAAOO,WApEjC,EA2EaP,eAAOa,WA3EpB,EA+EwBb,eAAOS,UA/E/B,EAgFaT,eAAOU,WAhFpB;AAmFD,CApFM;;;AAsFP,IAAMI,QAAQ,gBAAGC,KAAK,CAACC,UAAN,CAAmD,gBAQ3CC,GAR2C,EAQnC;AAAA;;AAAA,MAP7BC,MAO6B,QAP7BA,MAO6B;AAAA,MAN7BC,IAM6B,QAN7BA,IAM6B;AAAA,MAL7BC,cAK6B,QAL7BA,cAK6B;AAAA,MAJ7BC,GAI6B,QAJ7BA,GAI6B;AAAA,MAH7BhC,IAG6B,QAH7BA,IAG6B;AAAA,MAF7BiC,SAE6B,QAF7BA,SAE6B;AAAA,MAD7BC,QAC6B,QAD7BA,QAC6B;AAAA,MAA7BC,EAA6B,QAA7BA,EAA6B;AAC/B,sBACE,sBAAC,cAAD;AACI,IAAA,IAAI,EAAC,QADT;AAEI,IAAA,IAAI,EAAEnC,IAFV;AAGI,IAAA,QAAQ,EAAE8B,IAAI,CAACM,QAAL,IAAiBN,IAAI,CAACO,MAHpC;AAII,IAAA,QAAQ,EAAEH,QAJd;AAKI,IAAA,WAAW,EAAEI,iCALjB;AAMI,IAAA,GAAG,EAAEV,GANT;AAOI,IAAA,OAAO,EAAEG,cAPb;AAQI,IAAA,SAAS,EAAGE,SAAS,GAAG,GAAZ,IAAmBH,IAAI,CAACO,MAAL,GAAc,QAAd,GAAyB,EAA5C,IAAkD,GAAlD,IAAyDP,IAAI,CAACS,gBAAL,GAAwB,oBAAxB,GAA+C,EAAxG,IAA8G,GAA9G,IAAqHV,MAAM,GAAG,QAAH,GAAc,EAAzI,CARhB;AAUI,IAAA,EAAE,EAAEM,EAVR;AAAA,eAWKL,IAAI,CAACS,gBAAL,iBAAyB;AAAK,MAAA,SAAS,EAAC;AAAf,MAX9B,eAYI,sBAAC,WAAD;AAAA,iBACGT,IAAI,CAACU,IAAL,iBAAa,qBAAC,QAAD;AAAA,kBAAWV,IAAI,CAACU;AAAhB,QADhB,eAEE,sBAAC,SAAD;AAAA,gCACI;AAAA,kCACE;AAAA,4CAAMV,IAAI,CAACW,YAAX,mEAA2BX,IAAI,CAACY;AAAhC,YADF,EAEGZ,IAAI,CAACa,SAAL,iBAAkB;AAAK,YAAA,KAAK,EAAE;AAAEC,cAAAA,QAAQ,EAAE,MAAZ;AAAoBC,cAAAA,UAAU,EAAE;AAAhC,aAAZ;AAAA,sBAAuDf,IAAI,CAACa;AAA5D,YAFrB;AAAA,UADJ,EAKKb,IAAI,CAACO,MAAL,iBAAe,qBAAC,mBAAD;AAAA,iCACd,qBAAC,qBAAD;AAAU,YAAA,KAAK,EAAE1B,eAAOmC,WAAxB;AAAqC,YAAA,SAAS,EAAC,aAA/C;AAA6D,YAAA,IAAI,EAAC;AAAlE;AADc,UALpB;AAAA,QAFF;AAAA,MAZJ;AAAA,KASSd,GATT,CADF;AA2BD,CApCgB,CAAjB;;AAzIGD,EAAAA,c;AACAF,EAAAA,M;AACAM,EAAAA,E;AACAH,EAAAA,G;AAEAC,EAAAA,S;AACAC,EAAAA,Q;;eAyKYT,Q","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"}
+{"version":3,"sources":["../../src/MenuItem/MenuItem.tsx"],"names":["DropdownButton","styled","button","props","DropdownButtonCSS","size","ItemLabel","div","ItemIcon","ItemIconRight","ItemContent","Size","Small","Large","css","ComponentTextStyle","Regular","COLORS","neutral_600","Medium","white","primary_20","primary_700","focusStyles","primary_100","primary_800","neutral_20","neutral_800","primary_500","neutral_500","neutral_200","primary_600","MenuItem","React","forwardRef","ref","active","item","onClickHandler","className","tabIndex","iconRight","id","disabled","locked","defaultOnMouseDownHandler","showDividerAbove","icon","displayLabel","value","noteLabel","fontSize","lineHeight","neutral_400","cloneElement"],"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, focusStyles} 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: React.MouseEvent) => void;\n   active: boolean;\n   id: string;\n   size?: Size;\n   className?: string;\n   tabIndex?: number;\n   iconRight?: React.ReactElement;\n}\n\nexport const DropdownButton = styled.button<{ size?: Size }>`\n  ${(props) => DropdownButtonCSS(props.size)}\n`;\n\nexport const ItemLabel = styled.div``;\n\nexport const ItemIcon = styled.div``;\n\nexport const ItemIconRight = styled.div`\n  align-items: center;\n  display: flex;\n`;\n\nexport const ItemContent = styled.div<{size:Size}>`\n    margin: ${props=>props.size===Size.Small?'auto 0 auto 10px':(props.size===Size.Large?'auto 0 auto 26px':'auto 0 auto 18px')};\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: ${props=>props.size===Size.Small?'6px':'8px'};\n      svg {\n        display: block;\n        margin: auto;\n        height:${props=>props.size===Size.Small?'20px':''};\n        width:${props=>props.size===Size.Small?'20px':''};\n      }\n    }\n\n    ${ItemIconRight} {\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: none;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ${ItemLabel}, ${ItemIcon} {\n      color: ${COLORS.neutral_600};\n    }\n\n    &:hover:not(.active), &.hover-state {\n      background: ${COLORS.primary_20};\n      ${ItemLabel}, ${ItemIcon} {\n        color: ${COLORS.primary_700};\n      }\n    }\n\n    &:focus, &.focus-state, &.focus-visible {\n      ${focusStyles}\n    }\n\n    &:active:not(.active), &.active-state {\n      background: ${COLORS.primary_100};\n      ${ItemLabel}, ${ItemIcon} {\n        color: ${COLORS.primary_800};\n      }\n    }\n\n    &.active {\n      background: ${COLORS.neutral_20};\n\n      ${ItemLabel}, ${ItemIcon} {\n        color: ${COLORS.neutral_800};\n      }\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 4px;\n        bottom: 4px;\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      ${ItemIcon}, ${ItemLabel} {\n        color: ${COLORS.primary_700};\n      }      \n\n      &::after {\n        background-color: ${COLORS.primary_700};\n      }\n    }\n\n    &.active:active, &.active-active-state {\n      background-color: ${COLORS.primary_100};\n\n      ${ItemIcon}, ${ItemLabel} {\n        color: ${COLORS.primary_800};\n      }\n\n      &::after {\n        background-color: ${COLORS.primary_800};\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    size = Size.Medium,\n    className,\n    tabIndex,\n    iconRight,\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        id={id}>\n        {item.showDividerAbove && <div className=\"divider\" />}\n        <ItemContent size={size}>\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            {\n              item.locked &&\n              <ItemIconRight>\n                <LockedOn color={COLORS.neutral_400} className=\"extraMargin\" size=\"24px\"/>\n              </ItemIconRight>\n            }\n            {\n              !item.locked && !!iconRight &&\n              <ItemIconRight>\n                {React.cloneElement(iconRight, {className: 'extraMargin', size: '24px',})}\n              </ItemIconRight>\n            }\n\n          </ItemLabel>\n        </ItemContent>\n  </DropdownButton>\n  );\n});\n\nexport default MenuItem;\n"],"file":"MenuItem.cjs"}

package/dist/MenuItem/MenuItem.d.ts

@@ -3,21 +3,23 @@ import { Size } from '../types';
 import { DropdownItem } from '../Dropdown/DropdownContent';
 export interface MenuItemProps {
     item: DropdownItem;
-    onClickHandler: (e: any) => void;
+    onClickHandler: (e: React.MouseEvent) => void;
     active: boolean;
     id: string;
-    key: string;
     size?: Size;
     className?: string;
     tabIndex?: number;
+    iconRight?: React.ReactElement;
 }
 export declare const DropdownButton: import("styled-components").StyledComponent<"button", any, {
     size?: Size | undefined;
 }, never>;
 export declare const ItemLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ItemIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const LockedIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ItemContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ItemIconRight: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ItemContent: import("styled-components").StyledComponent<"div", any, {
+    size: Size;
+}, never>;
 export declare const DropdownButtonCSS: (size?: Size | undefined) => import("styled-components").FlattenSimpleInterpolation;
 declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLButtonElement>>;
 export default MenuItem;

package/dist/MenuItem/MenuItem.js

@@ -5,11 +5,11 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 
 import * as React from 'react';
 import styled, { css } from 'styled-components';
-import { COLORS, ComponentTextStyle } from '../styles';
+import { COLORS, ComponentTextStyle, focusStyles } from '../styles';
 import { LockedOn } from '../icons/systemicons/SystemIcons';
 import { Size } from '../types';
 import { ComponentLStyling, ComponentMStyling, ComponentSStyling } from '../styles/typography';
-import { CommonInteractionStyling, defaultOnMouseDownHandler } from '../common';
+import { defaultOnMouseDownHandler } from '../common';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var DropdownButton = styled.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), function (props) {
@@ -17,10 +17,18 @@ export var DropdownButton = styled.button(_templateObject || (_templateObject =
 });
 export var ItemLabel = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
 export var ItemIcon = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([""])));
-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 ItemIconRight = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n"])));
+export var ItemContent = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    margin: ", ";\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: ", ";\n      svg {\n        display: block;\n        margin: auto;\n        height:", ";\n        width:", ";\n      }\n    }\n\n    ", " {\n      flex-grow: 2;\n\n      .extraMargin {\n        margin-left: calc(100% - 24px);\n      }\n    }\n"])), function (props) {
+  return props.size === Size.Small ? 'auto 0 auto 10px' : props.size === Size.Large ? 'auto 0 auto 26px' : 'auto 0 auto 18px';
+}, ItemLabel, ItemIcon, function (props) {
+  return props.size === Size.Small ? '6px' : '8px';
+}, function (props) {
+  return props.size === Size.Small ? '20px' : '';
+}, function (props) {
+  return props.size === Size.Small ? '20px' : '';
+}, ItemIconRight);
 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\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);
+  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: none;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ", ", ", " {\n      color: ", ";\n    }\n\n    &:hover:not(.active), &.hover-state {\n      background: ", ";\n      ", ", ", " {\n        color: ", ";\n      }\n    }\n\n    &:focus, &.focus-state, &.focus-visible {\n      ", "\n    }\n\n    &:active:not(.active), &.active-state {\n      background: ", ";\n      ", ", ", " {\n        color: ", ";\n      }\n    }\n\n    &.active {\n      background: ", ";\n\n      ", ", ", " {\n        color: ", ";\n      }\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 4px;\n        bottom: 4px;\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      ", ", ", " {\n        color: ", ";\n      }      \n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.active:active, &.active-active-state {\n      background-color: ", ";\n\n      ", ", ", " {\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, ItemLabel, ItemIcon, COLORS.neutral_600, COLORS.primary_20, ItemLabel, ItemIcon, COLORS.primary_700, focusStyles, COLORS.primary_100, ItemLabel, ItemIcon, COLORS.primary_800, COLORS.neutral_20, ItemLabel, ItemIcon, COLORS.neutral_800, COLORS.primary_500, COLORS.neutral_500, COLORS.primary_20, ItemIcon, ItemLabel, COLORS.primary_700, COLORS.primary_700, COLORS.primary_100, ItemIcon, ItemLabel, COLORS.primary_800, COLORS.primary_800, COLORS.neutral_200, COLORS.primary_20, COLORS.primary_600);
 };
 var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _item$displayLabel;
@@ -28,10 +36,11 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var active = _ref.active,
       item = _ref.item,
       onClickHandler = _ref.onClickHandler,
-      key = _ref.key,
-      size = _ref.size,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? Size.Medium : _ref$size,
       className = _ref.className,
       tabIndex = _ref.tabIndex,
+      iconRight = _ref.iconRight,
       id = _ref.id;
   return /*#__PURE__*/_jsxs(DropdownButton, {
     type: "button",
@@ -46,6 +55,7 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     children: [item.showDividerAbove && /*#__PURE__*/_jsx("div", {
       className: "divider"
     }), /*#__PURE__*/_jsxs(ItemContent, {
+      size: size,
       children: [item.icon && /*#__PURE__*/_jsx(ItemIcon, {
         children: item.icon
       }), /*#__PURE__*/_jsxs(ItemLabel, {
@@ -59,24 +69,29 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
             },
             children: item.noteLabel
           })]
-        }), item.locked && /*#__PURE__*/_jsx(LockedIconContainer, {
+        }), item.locked && /*#__PURE__*/_jsx(ItemIconRight, {
           children: /*#__PURE__*/_jsx(LockedOn, {
             color: COLORS.neutral_400,
             className: "extraMargin",
             size: "24px"
           })
+        }), !item.locked && !!iconRight && /*#__PURE__*/_jsx(ItemIconRight, {
+          children: /*#__PURE__*/React.cloneElement(iconRight, {
+            className: 'extraMargin',
+            size: '24px'
+          })
         })]
       })]
     })]
-  }, key);
+  });
 });
 MenuItem.propTypes = {
   onClickHandler: _pt.func.isRequired,
   active: _pt.bool.isRequired,
   id: _pt.string.isRequired,
-  key: _pt.string.isRequired,
   className: _pt.string,
-  tabIndex: _pt.number
+  tabIndex: _pt.number,
+  iconRight: _pt.element
 };
 export default MenuItem;
 //# sourceMappingURL=MenuItem.js.map

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_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"}
+{"version":3,"sources":["../../src/MenuItem/MenuItem.tsx"],"names":["React","styled","css","COLORS","ComponentTextStyle","focusStyles","LockedOn","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","defaultOnMouseDownHandler","DropdownButton","button","props","DropdownButtonCSS","size","ItemLabel","div","ItemIcon","ItemIconRight","ItemContent","Small","Large","Regular","neutral_600","Medium","white","primary_20","primary_700","primary_100","primary_800","neutral_20","neutral_800","primary_500","neutral_500","neutral_200","primary_600","MenuItem","forwardRef","ref","active","item","onClickHandler","className","tabIndex","iconRight","id","disabled","locked","showDividerAbove","icon","displayLabel","value","noteLabel","fontSize","lineHeight","neutral_400","cloneElement"],"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, focusStyles} 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: React.MouseEvent) => void;\n   active: boolean;\n   id: string;\n   size?: Size;\n   className?: string;\n   tabIndex?: number;\n   iconRight?: React.ReactElement;\n}\n\nexport const DropdownButton = styled.button<{ size?: Size }>`\n  ${(props) => DropdownButtonCSS(props.size)}\n`;\n\nexport const ItemLabel = styled.div``;\n\nexport const ItemIcon = styled.div``;\n\nexport const ItemIconRight = styled.div`\n  align-items: center;\n  display: flex;\n`;\n\nexport const ItemContent = styled.div<{size:Size}>`\n    margin: ${props=>props.size===Size.Small?'auto 0 auto 10px':(props.size===Size.Large?'auto 0 auto 26px':'auto 0 auto 18px')};\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: ${props=>props.size===Size.Small?'6px':'8px'};\n      svg {\n        display: block;\n        margin: auto;\n        height:${props=>props.size===Size.Small?'20px':''};\n        width:${props=>props.size===Size.Small?'20px':''};\n      }\n    }\n\n    ${ItemIconRight} {\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: none;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ${ItemLabel}, ${ItemIcon} {\n      color: ${COLORS.neutral_600};\n    }\n\n    &:hover:not(.active), &.hover-state {\n      background: ${COLORS.primary_20};\n      ${ItemLabel}, ${ItemIcon} {\n        color: ${COLORS.primary_700};\n      }\n    }\n\n    &:focus, &.focus-state, &.focus-visible {\n      ${focusStyles}\n    }\n\n    &:active:not(.active), &.active-state {\n      background: ${COLORS.primary_100};\n      ${ItemLabel}, ${ItemIcon} {\n        color: ${COLORS.primary_800};\n      }\n    }\n\n    &.active {\n      background: ${COLORS.neutral_20};\n\n      ${ItemLabel}, ${ItemIcon} {\n        color: ${COLORS.neutral_800};\n      }\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 4px;\n        bottom: 4px;\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      ${ItemIcon}, ${ItemLabel} {\n        color: ${COLORS.primary_700};\n      }      \n\n      &::after {\n        background-color: ${COLORS.primary_700};\n      }\n    }\n\n    &.active:active, &.active-active-state {\n      background-color: ${COLORS.primary_100};\n\n      ${ItemIcon}, ${ItemLabel} {\n        color: ${COLORS.primary_800};\n      }\n\n      &::after {\n        background-color: ${COLORS.primary_800};\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    size = Size.Medium,\n    className,\n    tabIndex,\n    iconRight,\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        id={id}>\n        {item.showDividerAbove && <div className=\"divider\" />}\n        <ItemContent size={size}>\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            {\n              item.locked &&\n              <ItemIconRight>\n                <LockedOn color={COLORS.neutral_400} className=\"extraMargin\" size=\"24px\"/>\n              </ItemIconRight>\n            }\n            {\n              !item.locked && !!iconRight &&\n              <ItemIconRight>\n                {React.cloneElement(iconRight, {className: 'extraMargin', size: '24px',})}\n              </ItemIconRight>\n            }\n\n          </ItemLabel>\n        </ItemContent>\n  </DropdownButton>\n  );\n});\n\nexport default MenuItem;\n"],"file":"MenuItem.js"}

package/dist/MenuItem/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/MenuItem/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["export {default as MenuItem} from './MenuItem';"],"file":"index.cjs"}
+{"version":3,"sources":["../../src/MenuItem/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["export { default as MenuItem } from './MenuItem';"],"file":"index.cjs"}

package/dist/MenuItem/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/MenuItem/index.tsx"],"names":["default","MenuItem"],"mappings":"AAAA,SAAQA,OAAO,IAAIC,QAAnB,QAAkC,YAAlC","sourcesContent":["export {default as MenuItem} from './MenuItem';"],"file":"index.js"}
+{"version":3,"sources":["../../src/MenuItem/index.tsx"],"names":["default","MenuItem"],"mappings":"AAAA,SAASA,OAAO,IAAIC,QAApB,QAAoC,YAApC","sourcesContent":["export { default as MenuItem } from './MenuItem';"],"file":"index.js"}

package/dist/Modals/ModalNote.cjs

@@ -38,7 +38,7 @@ var ModalNote = function ModalNote(_ref) {
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalStyles.ModalNoteSection, {
         state: stateVal,
         size: size,
-        children: [icon ? icon : /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.CheckComplete, {
+        children: [icon ? icon : /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.CheckMark, {
           color: _.COLORS.correct_500
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           children: note

package/dist/Modals/ModalNote.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Modals/ModalNote.tsx"],"names":["ModalNote","note","icon","size","state","stateVal","toLowerCase","COLORS","correct_500","warning_500","primary_500"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;AASO,IAAMA,SAA6C,GAAG,SAAhDA,SAAgD,OAA6C;AAAA,MAA1CC,IAA0C,QAA1CA,IAA0C;AAAA,MAApCC,IAAoC,QAApCA,IAAoC;AAAA,MAA9BC,IAA8B,QAA9BA,IAA8B;AAAA,wBAAxBC,KAAwB;AAAA,MAAxBA,KAAwB,2BAAhB,SAAgB;AACxG,MAAMC,QAAQ,GAAGD,KAAK,CAACE,WAAN,EAAjB;;AAEA,UAAQD,QAAR;AACE,SAAK,UAAL;AACE,0BACE,sBAAC,6BAAD;AAAkB,QAAA,KAAK,EAAEA,QAAzB;AAAmC,QAAA,IAAI,EAAEF,IAAzC;AAAA,mBACGD,IAAI,GAAGA,IAAH,gBAAU,qBAAC,0BAAD;AAAe,UAAA,KAAK,EAAEK,SAAOC;AAA7B,UADjB,eAEE;AAAA,oBAAOP;AAAP,UAFF;AAAA,QADF;;AAOF,SAAK,SAAL;AACE,0BACE,sBAAC,6BAAD;AAAkB,QAAA,KAAK,EAAEI,QAAzB;AAAmC,QAAA,IAAI,EAAEF,IAAzC;AAAA,mBACGD,IAAI,GAAGA,IAAH,gBAAU,qBAAC,6BAAD;AAAkB,UAAA,KAAK,EAAEK,SAAOE;AAAhC,UADjB,eAEE;AAAA,oBAAOR;AAAP,UAFF;AAAA,QADF;;AAOF,SAAK,UAAL;AACE,0BACE,sBAAC,6BAAD;AAAkB,QAAA,KAAK,EAAEI,QAAzB;AAAmC,QAAA,IAAI,EAAEF,IAAzC;AAAA,mBACGD,IAAI,GAAGA,IAAH,gBAAU,qBAAC,6BAAD;AAAkB,UAAA,KAAK,EAAEK,SAAOE;AAAhC,UADjB,eAEE;AAAA,oBAAOR;AAAP,UAFF;AAAA,QADF;;AAOF;AACE,0BACE,sBAAC,6BAAD;AAAkB,QAAA,KAAK,EAAEI,QAAzB;AAAmC,QAAA,IAAI,EAAEF,IAAzC;AAAA,mBACGD,IAAI,GAAGA,IAAH,gBAAU,qBAAC,wBAAD;AAAa,UAAA,KAAK,EAAEK,SAAOG,WAA3B;AAAwC,UAAA,SAAS,EAAEP;AAAnD,UADjB,eAEE;AAAA,oBAAOF;AAAP,UAFF;AAAA,QADF;AA1BJ;AAiCD,CApCM;;;;AANLA,EAAAA,I;AACAC,EAAAA,I;AACAE,EAAAA,K;AACAD,EAAAA,I;;eAyCaH,S","sourcesContent":["import * as React from 'react';\nimport { COLORS } from '..';\nimport { CheckComplete, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { ModalNoteSection } from './ModalStyles';\n\ninterface NoteProps {\n  note: string | React.ReactNode;\n  icon?: React.ReactNode;\n  state?: string;\n  size?: string;\n}\n\nexport const ModalNote: React.FunctionComponent<NoteProps> = ({ note, icon, size, state = 'neutral' }) => {\n  const stateVal = state.toLowerCase();\n\n  switch (stateVal) {\n    case 'positive':\n      return (\n        <ModalNoteSection state={stateVal} size={size}>\n          {icon ? icon : <CheckComplete color={COLORS.correct_500} />}\n          <span>{note}</span>\n        </ModalNoteSection>\n      );\n\n    case 'warning':\n      return (\n        <ModalNoteSection state={stateVal} size={size}>\n          {icon ? icon : <TechnicalWarning color={COLORS.warning_500} />}\n          <span>{note}</span>\n        </ModalNoteSection>\n      );\n\n    case 'critical':\n      return (\n        <ModalNoteSection state={stateVal} size={size}>\n          {icon ? icon : <TechnicalWarning color={COLORS.warning_500} />}\n          <span>{note}</span>\n        </ModalNoteSection>\n      );\n\n    default:\n      return (\n        <ModalNoteSection state={stateVal} size={size}>\n          {icon ? icon : <Information color={COLORS.primary_500} className={size} />}\n          <span>{note}</span>\n        </ModalNoteSection>\n      );\n  }\n};\n\nexport default ModalNote;\n"],"file":"ModalNote.cjs"}
+{"version":3,"sources":["../../src/Modals/ModalNote.tsx"],"names":["ModalNote","note","icon","size","state","stateVal","toLowerCase","COLORS","correct_500","warning_500","primary_500"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;AASO,IAAMA,SAA6C,GAAG,SAAhDA,SAAgD,OAA6C;AAAA,MAA1CC,IAA0C,QAA1CA,IAA0C;AAAA,MAApCC,IAAoC,QAApCA,IAAoC;AAAA,MAA9BC,IAA8B,QAA9BA,IAA8B;AAAA,wBAAxBC,KAAwB;AAAA,MAAxBA,KAAwB,2BAAhB,SAAgB;AACxG,MAAMC,QAAQ,GAAGD,KAAK,CAACE,WAAN,EAAjB;;AAEA,UAAQD,QAAR;AACE,SAAK,UAAL;AACE,0BACE,sBAAC,6BAAD;AAAkB,QAAA,KAAK,EAAEA,QAAzB;AAAmC,QAAA,IAAI,EAAEF,IAAzC;AAAA,mBACGD,IAAI,GAAGA,IAAH,gBAAU,qBAAC,sBAAD;AAAW,UAAA,KAAK,EAAEK,SAAOC;AAAzB,UADjB,eAEE;AAAA,oBAAOP;AAAP,UAFF;AAAA,QADF;;AAOF,SAAK,SAAL;AACE,0BACE,sBAAC,6BAAD;AAAkB,QAAA,KAAK,EAAEI,QAAzB;AAAmC,QAAA,IAAI,EAAEF,IAAzC;AAAA,mBACGD,IAAI,GAAGA,IAAH,gBAAU,qBAAC,6BAAD;AAAkB,UAAA,KAAK,EAAEK,SAAOE;AAAhC,UADjB,eAEE;AAAA,oBAAOR;AAAP,UAFF;AAAA,QADF;;AAOF,SAAK,UAAL;AACE,0BACE,sBAAC,6BAAD;AAAkB,QAAA,KAAK,EAAEI,QAAzB;AAAmC,QAAA,IAAI,EAAEF,IAAzC;AAAA,mBACGD,IAAI,GAAGA,IAAH,gBAAU,qBAAC,6BAAD;AAAkB,UAAA,KAAK,EAAEK,SAAOE;AAAhC,UADjB,eAEE;AAAA,oBAAOR;AAAP,UAFF;AAAA,QADF;;AAOF;AACE,0BACE,sBAAC,6BAAD;AAAkB,QAAA,KAAK,EAAEI,QAAzB;AAAmC,QAAA,IAAI,EAAEF,IAAzC;AAAA,mBACGD,IAAI,GAAGA,IAAH,gBAAU,qBAAC,wBAAD;AAAa,UAAA,KAAK,EAAEK,SAAOG,WAA3B;AAAwC,UAAA,SAAS,EAAEP;AAAnD,UADjB,eAEE;AAAA,oBAAOF;AAAP,UAFF;AAAA,QADF;AA1BJ;AAiCD,CApCM;;;;AANLA,EAAAA,I;AACAC,EAAAA,I;AACAE,EAAAA,K;AACAD,EAAAA,I;;eAyCaH,S","sourcesContent":["import * as React from 'react';\nimport { COLORS } from '..';\nimport { CheckMark, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { ModalNoteSection } from './ModalStyles';\n\ninterface NoteProps {\n  note: string | React.ReactNode;\n  icon?: React.ReactNode;\n  state?: string;\n  size?: string;\n}\n\nexport const ModalNote: React.FunctionComponent<NoteProps> = ({ note, icon, size, state = 'neutral' }) => {\n  const stateVal = state.toLowerCase();\n\n  switch (stateVal) {\n    case 'positive':\n      return (\n        <ModalNoteSection state={stateVal} size={size}>\n          {icon ? icon : <CheckMark color={COLORS.correct_500} />}\n          <span>{note}</span>\n        </ModalNoteSection>\n      );\n\n    case 'warning':\n      return (\n        <ModalNoteSection state={stateVal} size={size}>\n          {icon ? icon : <TechnicalWarning color={COLORS.warning_500} />}\n          <span>{note}</span>\n        </ModalNoteSection>\n      );\n\n    case 'critical':\n      return (\n        <ModalNoteSection state={stateVal} size={size}>\n          {icon ? icon : <TechnicalWarning color={COLORS.warning_500} />}\n          <span>{note}</span>\n        </ModalNoteSection>\n      );\n\n    default:\n      return (\n        <ModalNoteSection state={stateVal} size={size}>\n          {icon ? icon : <Information color={COLORS.primary_500} className={size} />}\n          <span>{note}</span>\n        </ModalNoteSection>\n      );\n  }\n};\n\nexport default ModalNote;\n"],"file":"ModalNote.cjs"}

package/dist/Modals/ModalNote.js

@@ -1,7 +1,7 @@
 import _pt from "prop-types";
 import * as React from 'react';
 import { COLORS } from '..';
-import { CheckComplete, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';
+import { CheckMark, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';
 import { ModalNoteSection } from './ModalStyles';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -18,7 +18,7 @@ export var ModalNote = function ModalNote(_ref) {
       return /*#__PURE__*/_jsxs(ModalNoteSection, {
         state: stateVal,
         size: size,
-        children: [icon ? icon : /*#__PURE__*/_jsx(CheckComplete, {
+        children: [icon ? icon : /*#__PURE__*/_jsx(CheckMark, {
           color: COLORS.correct_500
         }), /*#__PURE__*/_jsx("span", {
           children: note