@laerdal/life-react-components 1.8.0-dev.40 → 1.8.0-dev.41

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/dist/MenuItem/MenuItem.cjs +11 -2
  2. package/dist/MenuItem/MenuItem.cjs.map +1 -1
  3. package/dist/MenuItem/MenuItem.d.ts +3 -1
  4. package/dist/MenuItem/MenuItem.js +13 -4
  5. package/dist/MenuItem/MenuItem.js.map +1 -1
  6. package/dist/MenuItem/index.cjs.map +1 -1
  7. package/dist/MenuItem/index.js.map +1 -1
  8. package/dist/index.cjs +0 -14
  9. package/dist/index.cjs.map +1 -1
  10. package/dist/index.d.ts +0 -1
  11. package/dist/index.js +0 -1
  12. package/dist/index.js.map +1 -1
  13. package/dist/styles/colors.cjs +1 -0
  14. package/dist/styles/colors.cjs.map +1 -1
  15. package/dist/styles/colors.d.ts +1 -0
  16. package/dist/styles/colors.js +1 -0
  17. package/dist/styles/colors.js.map +1 -1
  18. package/package.json +1 -1
package/dist/MenuItem/MenuItem.cjs CHANGED
@@ -53,12 +53,20 @@ var ItemIconRight = _styledComponents.default.div(_templateObject4 || (_template
53
53
 
54
54
  exports.ItemIconRight = ItemIconRight;
55
55
 
56
- 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, ItemIconRight);
56
+ 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) {
57
+ return props.size === _types.Size.Small ? 'auto 0 auto 10px' : props.size === _types.Size.Large ? 'auto 0 auto 26px' : 'auto 0 auto 18px';
58
+ }, ItemLabel, ItemIcon, function (props) {
59
+ return props.size === _types.Size.Small ? '6px' : '8px';
60
+ }, function (props) {
61
+ return props.size === _types.Size.Small ? '20px' : '';
62
+ }, function (props) {
63
+ return props.size === _types.Size.Small ? '20px' : '';
64
+ }, ItemIconRight);
57
65
 
58
66
  exports.ItemContent = ItemContent;
59
67
 
60
68
  var DropdownButtonCSS = function DropdownButtonCSS(size) {
61
- 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);
69
+ 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);
62
70
  };
63
71
 
64
72
  exports.DropdownButtonCSS = DropdownButtonCSS;
@@ -87,6 +95,7 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
87
95
  children: [item.showDividerAbove && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
88
96
  className: "divider"
89
97
  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ItemContent, {
98
+ size: size,
90
99
  children: [item.icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemIcon, {
91
100
  children: item.icon
92
101
  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ItemLabel, {
package/dist/MenuItem/MenuItem.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/MenuItem/MenuItem.tsx"],"names":["DropdownButton","styled","button","props","DropdownButtonCSS","size","ItemLabel","div","ItemIcon","ItemIconRight","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","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} 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``;\nexport const ItemIcon = styled.div``;\nexport const ItemIconRight = styled.div`\n align-items: center;\n display: flex;\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 ${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: 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 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>\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"}
1
+ {"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 CHANGED
@@ -17,7 +17,9 @@ export declare const DropdownButton: import("styled-components").StyledComponent
17
17
  export declare const ItemLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
18
18
  export declare const ItemIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
19
19
  export declare const ItemIconRight: import("styled-components").StyledComponent<"div", any, {}, never>;
20
- export declare const ItemContent: import("styled-components").StyledComponent<"div", any, {}, never>;
20
+ export declare const ItemContent: import("styled-components").StyledComponent<"div", any, {
21
+ size: Size;
22
+ }, never>;
21
23
  export declare const DropdownButtonCSS: (size?: Size | undefined) => import("styled-components").FlattenSimpleInterpolation;
22
24
  declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLButtonElement>>;
23
25
  export default MenuItem;
package/dist/MenuItem/MenuItem.js CHANGED
@@ -5,11 +5,11 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
5
5
 
6
6
  import * as React from 'react';
7
7
  import styled, { css } from 'styled-components';
8
- import { COLORS, ComponentTextStyle } from '../styles';
8
+ import { COLORS, ComponentTextStyle, focusStyles } from '../styles';
9
9
  import { LockedOn } from '../icons/systemicons/SystemIcons';
10
10
  import { Size } from '../types';
11
11
  import { ComponentLStyling, ComponentMStyling, ComponentSStyling } from '../styles/typography';
12
- import { CommonInteractionStyling, defaultOnMouseDownHandler } from '../common';
12
+ import { defaultOnMouseDownHandler } from '../common';
13
13
  import { jsx as _jsx } from "react/jsx-runtime";
14
14
  import { jsxs as _jsxs } from "react/jsx-runtime";
15
15
  export var DropdownButton = styled.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n ", "\n"])), function (props) {
@@ -18,9 +18,17 @@ export var DropdownButton = styled.button(_templateObject || (_templateObject =
18
18
  export var ItemLabel = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
19
19
  export var ItemIcon = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([""])));
20
20
  export var ItemIconRight = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n align-items: center;\n display: flex;\n"])));
21
- 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, ItemIconRight);
21
+ 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) {
22
+ return props.size === Size.Small ? 'auto 0 auto 10px' : props.size === Size.Large ? 'auto 0 auto 26px' : 'auto 0 auto 18px';
23
+ }, ItemLabel, ItemIcon, function (props) {
24
+ return props.size === Size.Small ? '6px' : '8px';
25
+ }, function (props) {
26
+ return props.size === Size.Small ? '20px' : '';
27
+ }, function (props) {
28
+ return props.size === Size.Small ? '20px' : '';
29
+ }, ItemIconRight);
22
30
  export var DropdownButtonCSS = function DropdownButtonCSS(size) {
23
- 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);
31
+ 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);
24
32
  };
25
33
  var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
26
34
  var _item$displayLabel;
@@ -47,6 +55,7 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
47
55
  children: [item.showDividerAbove && /*#__PURE__*/_jsx("div", {
48
56
  className: "divider"
49
57
  }), /*#__PURE__*/_jsxs(ItemContent, {
58
+ size: size,
50
59
  children: [item.icon && /*#__PURE__*/_jsx(ItemIcon, {
51
60
  children: item.icon
52
61
  }), /*#__PURE__*/_jsxs(ItemLabel, {
package/dist/MenuItem/MenuItem.js.map CHANGED
@@ -1 +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","ItemIconRight","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","className","tabIndex","iconRight","id","disabled","locked","showDividerAbove","icon","displayLabel","value","noteLabel","fontSize","lineHeight","neutral_400","cloneElement"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,OAAOC,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AACA,SAAqBC,MAArB,EAA6BC,kBAA7B,QAAsD,WAAtD;AACA,SAAsBC,QAAtB,QAAqC,kCAArC;AACA,SAAiBC,IAAjB,QAA4B,UAA5B;AACA,SAAQC,iBAAR,EAA2BC,iBAA3B,EAA8CC,iBAA9C,QAAsE,sBAAtE;AAEA,SAAQC,wBAAR,EAAkCC,yBAAlC,QAAkE,WAAlE;;;AAaA,OAAO,IAAMC,cAAc,GAAGX,MAAM,CAACY,MAAV,gFACvB,UAACC,KAAD;AAAA,SAAWC,iBAAiB,CAACD,KAAK,CAACE,IAAP,CAA5B;AAAA,CADuB,CAApB;AAIP,OAAO,IAAMC,SAAS,GAAGhB,MAAM,CAACiB,GAAV,uEAAf;AACP,OAAO,IAAMC,QAAQ,GAAGlB,MAAM,CAACiB,GAAV,uEAAd;AACP,OAAO,IAAME,aAAa,GAAGnB,MAAM,CAACiB,GAAV,mHAAnB;AAKP,OAAO,IAAMG,WAAW,GAAGpB,MAAM,CAACiB,GAAV,0hBAMlBD,SANkB,EAalBE,QAbkB,EAqBlBC,aArBkB,CAAjB;AA+BP,OAAO,IAAML,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,IAAD,EAAiB;AAChD,SAAOd,GAAP,8+CACIc,IAAI,IAAIV,IAAI,CAACgB,KAAb,IAAsBb,iBAAiB,CAACL,kBAAkB,CAACmB,OAApB,EAA6BpB,MAAM,CAACqB,WAApC,CAD3C,EAEIR,IAAI,IAAIV,IAAI,CAACmB,MAAb,IAAuBjB,iBAAiB,CAACJ,kBAAkB,CAACmB,OAApB,EAA6BpB,MAAM,CAACqB,WAApC,CAF5C,EAGIR,IAAI,IAAIV,IAAI,CAACoB,KAAb,IAAsBnB,iBAAiB,CAACH,kBAAkB,CAACmB,OAApB,EAA6BpB,MAAM,CAACqB,WAApC,CAH3C,EAUgBR,IAAI,IAAIV,IAAI,CAACoB,KAAb,GAAqB,MAArB,GAA8BV,IAAI,IAAIV,IAAI,CAACmB,MAAb,GAAsB,MAAtB,GAA+B,MAV7E,EAWsBtB,MAAM,CAACwB,KAX7B,EAuBIjB,wBAvBJ,EA0BkBP,MAAM,CAACyB,UA1BzB,EAmC0BzB,MAAM,CAAC0B,WAnCjC,EA6Ca1B,MAAM,CAAC2B,WA7CpB,EAiDwB3B,MAAM,CAAC4B,UAjD/B,EAoDe5B,MAAM,CAAC6B,WApDtB,EAwD0B7B,MAAM,CAAC0B,WAxDjC,EA6DwB1B,MAAM,CAAC8B,WA7D/B,EAgEe9B,MAAM,CAAC+B,WAhEtB,EAoE0B/B,MAAM,CAAC0B,WApEjC,EA2Ea1B,MAAM,CAACgC,WA3EpB,EA+EwBhC,MAAM,CAAC4B,UA/E/B,EAgFa5B,MAAM,CAAC6B,WAhFpB;AAmFD,CApFM;AAsFP,IAAMI,QAAQ,gBAAGpC,KAAK,CAACqC,UAAN,CAAmD,gBAQ3CC,GAR2C,EAQnC;AAAA;;AAAA,MAP7BC,MAO6B,QAP7BA,MAO6B;AAAA,MAN7BC,IAM6B,QAN7BA,IAM6B;AAAA,MAL7BC,cAK6B,QAL7BA,cAK6B;AAAA,uBAJ7BzB,IAI6B;AAAA,MAJ7BA,IAI6B,0BAJtBV,IAAI,CAACmB,MAIiB;AAAA,MAH7BiB,SAG6B,QAH7BA,SAG6B;AAAA,MAF7BC,QAE6B,QAF7BA,QAE6B;AAAA,MAD7BC,SAC6B,QAD7BA,SAC6B;AAAA,MAA7BC,EAA6B,QAA7BA,EAA6B;AAC/B,sBACE,MAAC,cAAD;AACI,IAAA,IAAI,EAAC,QADT;AAEI,IAAA,IAAI,EAAE7B,IAFV;AAGI,IAAA,QAAQ,EAAEwB,IAAI,CAACM,QAAL,IAAiBN,IAAI,CAACO,MAHpC;AAII,IAAA,QAAQ,EAAEJ,QAJd;AAKI,IAAA,WAAW,EAAEhC,yBALjB;AAMI,IAAA,GAAG,EAAE2B,GANT;AAOI,IAAA,OAAO,EAAEG,cAPb;AAQI,IAAA,SAAS,EAAGC,SAAS,GAAG,GAAZ,IAAmBF,IAAI,CAACO,MAAL,GAAc,QAAd,GAAyB,EAA5C,IAAkD,GAAlD,IAAyDP,IAAI,CAACQ,gBAAL,GAAwB,oBAAxB,GAA+C,EAAxG,IAA8G,GAA9G,IAAqHT,MAAM,GAAG,QAAH,GAAc,EAAzI,CARhB;AASI,IAAA,EAAE,EAAEM,EATR;AAAA,eAUKL,IAAI,CAACQ,gBAAL,iBAAyB;AAAK,MAAA,SAAS,EAAC;AAAf,MAV9B,eAWI,MAAC,WAAD;AAAA,iBACGR,IAAI,CAACS,IAAL,iBAAa,KAAC,QAAD;AAAA,kBAAWT,IAAI,CAACS;AAAhB,QADhB,eAEE,MAAC,SAAD;AAAA,gCACI;AAAA,kCACE;AAAA,4CAAMT,IAAI,CAACU,YAAX,mEAA2BV,IAAI,CAACW;AAAhC,YADF,EAEGX,IAAI,CAACY,SAAL,iBAAkB;AAAK,YAAA,KAAK,EAAE;AAAEC,cAAAA,QAAQ,EAAE,MAAZ;AAAoBC,cAAAA,UAAU,EAAE;AAAhC,aAAZ;AAAA,sBAAuDd,IAAI,CAACY;AAA5D,YAFrB;AAAA,UADJ,EAMIZ,IAAI,CAACO,MAAL,iBACA,KAAC,aAAD;AAAA,iCACE,KAAC,QAAD;AAAU,YAAA,KAAK,EAAE5C,MAAM,CAACoD,WAAxB;AAAqC,YAAA,SAAS,EAAC,aAA/C;AAA6D,YAAA,IAAI,EAAC;AAAlE;AADF,UAPJ,EAYI,CAACf,IAAI,CAACO,MAAN,IAAgB,CAAC,CAACH,SAAlB,iBACA,KAAC,aAAD;AAAA,iCACG5C,KAAK,CAACwD,YAAN,CAAmBZ,SAAnB,EAA8B;AAACF,YAAAA,SAAS,EAAE,aAAZ;AAA2B1B,YAAAA,IAAI,EAAE;AAAjC,WAA9B;AADH,UAbJ;AAAA,QAFF;AAAA,MAXJ;AAAA,IADF;AAoCD,CA7CgB,CAAjB;;AAzIGyB,EAAAA,c;AACAF,EAAAA,M;AACAM,EAAAA,E;AAEAH,EAAAA,S;AACAC,EAAAA,Q;AACAC,EAAAA,S;;AAkLH,eAAeR,QAAf","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: 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``;\nexport const ItemIcon = styled.div``;\nexport const ItemIconRight = styled.div`\n align-items: center;\n display: flex;\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 ${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: 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 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>\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"}
1
+ {"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 CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/MenuItem/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["export { default as MenuItem } from './MenuItem';"],"file":"index.cjs"}
1
+ {"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 CHANGED
@@ -1 +1 @@
1
- {"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"}
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"}
package/dist/index.cjs CHANGED
@@ -503,20 +503,6 @@ Object.keys(_Card).forEach(function (key) {
503
503
  });
504
504
  });
505
505
 
506
- var _MenuItem = require("./MenuItem");
507
-
508
- Object.keys(_MenuItem).forEach(function (key) {
509
- if (key === "default" || key === "__esModule") return;
510
- if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
511
- if (key in exports && exports[key] === _MenuItem[key]) return;
512
- Object.defineProperty(exports, key, {
513
- enumerable: true,
514
- get: function get() {
515
- return _MenuItem[key];
516
- }
517
- });
518
- });
519
-
520
506
  var _Tag = require("./Tag");
521
507
 
522
508
  Object.keys(_Tag).forEach(function (key) {
package/dist/index.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\nexport * from './AuthPage';\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot';\nexport * from './Accordion';\nexport * from './Tooltips';\nexport * from './common';\nexport * from './QuizButton';\nexport * from './LinearProgress';\nexport * from './SegmentControl';\nexport * from './Card';\nexport * from './MenuItem';\nexport * from './Tag';\nexport * from './Image';\nexport * from './ChipsInput';\nexport * from './Tile';\nexport * from './ProfileButton';\nexport {LaerdalLogo} from './assets';\nexport * from './Popover';"],"file":"index.cjs"}
1
+ {"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\nexport * from './AuthPage';\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot';\nexport * from './Accordion';\nexport * from './Tooltips';\nexport * from './common';\nexport * from './QuizButton';\nexport * from './LinearProgress';\nexport * from './SegmentControl';\nexport * from './Card';\nexport * from './Tag';\nexport * from './Image';\nexport * from './ChipsInput';\nexport * from './Tile';\nexport * from './ProfileButton';\nexport {LaerdalLogo} from './assets';\nexport * from './Popover';"],"file":"index.cjs"}
package/dist/index.d.ts CHANGED
@@ -33,7 +33,6 @@ export * from './QuizButton';
33
33
  export * from './LinearProgress';
34
34
  export * from './SegmentControl';
35
35
  export * from './Card';
36
- export * from './MenuItem';
37
36
  export * from './Tag';
38
37
  export * from './Image';
39
38
  export * from './ChipsInput';
package/dist/index.js CHANGED
@@ -33,7 +33,6 @@ export * from './QuizButton';
33
33
  export * from './LinearProgress';
34
34
  export * from './SegmentControl';
35
35
  export * from './Card';
36
- export * from './MenuItem';
37
36
  export * from './Tag';
38
37
  export * from './Image';
39
38
  export * from './ChipsInput';
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts"],"names":["LaerdalLogo"],"mappings":"AAAA,cAAc,UAAd;AACA,cAAc,SAAd;AACA,cAAc,SAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,SAAd;AACA,cAAc,iBAAd;AACA,cAAc,UAAd;AACA,cAAc,oBAAd;AACA,cAAc,mBAAd;AACA,cAAc,WAAd;AACA,cAAc,WAAd;AACA,cAAc,uBAAd;AACA,cAAc,QAAd;AACA,cAAc,WAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,YAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,QAAd;AACA,cAAc,UAAd;AACA,cAAc,aAAd;AACA,cAAc,SAAd;AACA,cAAc,WAAd;AACA,cAAc,aAAd;AACA,cAAc,mBAAd;AACA,cAAc,aAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,kBAAd;AACA,cAAc,kBAAd;AACA,cAAc,QAAd;AACA,cAAc,YAAd;AACA,cAAc,OAAd;AACA,cAAc,SAAd;AACA,cAAc,cAAd;AACA,cAAc,QAAd;AACA,cAAc,iBAAd;AACA,SAAQA,WAAR,QAA0B,UAA1B;AACA,cAAc,WAAd","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\nexport * from './AuthPage';\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot';\nexport * from './Accordion';\nexport * from './Tooltips';\nexport * from './common';\nexport * from './QuizButton';\nexport * from './LinearProgress';\nexport * from './SegmentControl';\nexport * from './Card';\nexport * from './MenuItem';\nexport * from './Tag';\nexport * from './Image';\nexport * from './ChipsInput';\nexport * from './Tile';\nexport * from './ProfileButton';\nexport {LaerdalLogo} from './assets';\nexport * from './Popover';"],"file":"index.js"}
1
+ {"version":3,"sources":["../src/index.ts"],"names":["LaerdalLogo"],"mappings":"AAAA,cAAc,UAAd;AACA,cAAc,SAAd;AACA,cAAc,SAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,SAAd;AACA,cAAc,iBAAd;AACA,cAAc,UAAd;AACA,cAAc,oBAAd;AACA,cAAc,mBAAd;AACA,cAAc,WAAd;AACA,cAAc,WAAd;AACA,cAAc,uBAAd;AACA,cAAc,QAAd;AACA,cAAc,WAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,YAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,QAAd;AACA,cAAc,UAAd;AACA,cAAc,aAAd;AACA,cAAc,SAAd;AACA,cAAc,WAAd;AACA,cAAc,aAAd;AACA,cAAc,mBAAd;AACA,cAAc,aAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,kBAAd;AACA,cAAc,kBAAd;AACA,cAAc,QAAd;AACA,cAAc,OAAd;AACA,cAAc,SAAd;AACA,cAAc,cAAd;AACA,cAAc,QAAd;AACA,cAAc,iBAAd;AACA,SAAQA,WAAR,QAA0B,UAA1B;AACA,cAAc,WAAd","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\nexport * from './AuthPage';\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot';\nexport * from './Accordion';\nexport * from './Tooltips';\nexport * from './common';\nexport * from './QuizButton';\nexport * from './LinearProgress';\nexport * from './SegmentControl';\nexport * from './Card';\nexport * from './Tag';\nexport * from './Image';\nexport * from './ChipsInput';\nexport * from './Tile';\nexport * from './ProfileButton';\nexport {LaerdalLogo} from './assets';\nexport * from './Popover';"],"file":"index.js"}
package/dist/styles/colors.cjs CHANGED
@@ -85,6 +85,7 @@ var COLORS = {
85
85
  critical_800: '#6B0613',
86
86
  neutral_20: '#FAFAFA',
87
87
  // 020 Core
88
+ neutral_50: '#F2F2F2',
88
89
  neutral_100: '#E5E5E5',
89
90
  neutral_200: '#CCCCCC',
90
91
  neutral_300: '#B3B3B3',
package/dist/styles/colors.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/styles/colors.ts"],"names":["COLORS","black","white","grey","primary","accent1","accent2","correct","warning","critical","primary_20","primary_100","primary_200","primary_300","primary_400","primary_500","primary_600","primary_700","primary_800","accent1_20","accent1_100","accent1_200","accent1_300","accent1_400","accent1_500","accent1_600","accent1_700","accent1_800","accent2_20","accent2_100","accent2_200","accent2_300","accent2_400","accent2_500","accent2_600","accent2_700","accent2_800","correct_20","correct_100","correct_200","correct_300","correct_400","correct_500","correct_600","correct_700","correct_800","warning_20","warning_100","warning_200","warning_300","warning_400","warning_500","warning_600","warning_700","warning_800","critical_20","critical_100","critical_200","critical_300","critical_400","critical_500","critical_600","critical_700","critical_800","neutral_20","neutral_100","neutral_200","neutral_300","neutral_400","neutral_500","neutral_600","neutral_700","neutral_800","focus","focus_25","white_gradient","toast_info","toast_success","toast_warning","toast_error"],"mappings":"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","sourcesContent":["const COLORS = {\n black: '#1F1F1F', // Neutrals / Black\n white: '#FFFFFF', // Neutrals / White\n grey: '#949494', // Neutrals / grey\n primary: '#2E7FA1', // Brand / Primary - Core 500\n accent1: '#25837E', // Brand / Accent 1 - Core 500\n accent2: '#EAC785', // Brand / Accent 2 - Core 200\n correct: '#37A851', // Semantic / Correct - Core 400\n warning: '#E97116', // Semantic / Warning - Core 400\n critical: '#DC3449', // Semantic / Critical - Core 500\n\n primary_20: '#F1FBFE',\n primary_100: '#D4E9F2',\n primary_200: '#A9D3E5',\n primary_300: '#7FBCD7',\n primary_400: '#519DBD',\n primary_500: '#2E7FA1', // 500 Core\n primary_600: '#276D8B',\n primary_700: '#215369',\n primary_800: '#163746',\n\n accent1_20: '#EDFCFB',\n accent1_100: '#C8EEEC',\n accent1_200: '#98D8D5',\n accent1_300: '#6BC2BE',\n accent1_400: '#3EA39E',\n accent1_500: '#25837E', // 500 Core\n accent1_600: '#23716D',\n accent1_700: '#145653',\n accent1_800: '#0F3937',\n\n accent2_20: '#FFFAEE',\n accent2_100: '#F8E2BF',\n accent2_200: '#EAC785', // 200 Core\n accent2_300: '#D6AD61',\n accent2_400: '#B58E45',\n accent2_500: '#92702F',\n accent2_600: '#806128',\n accent2_700: '#604920',\n accent2_800: '#42300F',\n\n correct_20: '#ECFEF1',\n correct_100: '#CCEED2',\n correct_200: '#A0D9AD',\n correct_300: '#77C589',\n correct_400: '#37A851', // 400 Core\n correct_500: '#14892F',\n correct_600: '#13772A',\n correct_700: '#025A15',\n correct_800: '#003D0E',\n\n warning_20: '#FEF7F1',\n warning_100: '#FCDDC5',\n warning_200: '#F8C096',\n warning_300: '#F4A162',\n warning_400: '#E97116', // 400 Core\n warning_500: '#C45402',\n warning_600: '#AD4B00',\n warning_700: '#803700',\n warning_800: '#572600',\n\n critical_20: '#FEF5F7',\n critical_100: '#FDDEE2',\n critical_200: '#FDBAC2',\n critical_300: '#FD96A4',\n critical_400: '#FC5A6F',\n critical_500: '#DC3449', // 500 Core\n critical_600: '#C32238',\n critical_700: '#9C0D1D',\n critical_800: '#6B0613',\n\n neutral_20: '#FAFAFA', // 020 Core\n neutral_100: '#E5E5E5',\n neutral_200: '#CCCCCC',\n neutral_300: '#B3B3B3',\n neutral_400: '#949494',\n neutral_500: '#767676',\n neutral_600: '#666666',\n neutral_700: '#4D4D4D',\n neutral_800: '#333333',\n\n focus: 'rgba(46, 127, 161, 1)', // Semantic / Focus 100%\n focus_25: 'rgba(46, 127, 161, 0.25)', // Semantic / Focus 25%\n\n white_gradient: 'linear-gradient(255deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%)',\n\n toast_info: '#2E7FA1',\n toast_success: '#37A851',\n toast_warning: '#E97116',\n toast_error: '#DC3449',\n};\n\nexport default COLORS;\n"],"file":"colors.cjs"}
1
+ {"version":3,"sources":["../../src/styles/colors.ts"],"names":["COLORS","black","white","grey","primary","accent1","accent2","correct","warning","critical","primary_20","primary_100","primary_200","primary_300","primary_400","primary_500","primary_600","primary_700","primary_800","accent1_20","accent1_100","accent1_200","accent1_300","accent1_400","accent1_500","accent1_600","accent1_700","accent1_800","accent2_20","accent2_100","accent2_200","accent2_300","accent2_400","accent2_500","accent2_600","accent2_700","accent2_800","correct_20","correct_100","correct_200","correct_300","correct_400","correct_500","correct_600","correct_700","correct_800","warning_20","warning_100","warning_200","warning_300","warning_400","warning_500","warning_600","warning_700","warning_800","critical_20","critical_100","critical_200","critical_300","critical_400","critical_500","critical_600","critical_700","critical_800","neutral_20","neutral_50","neutral_100","neutral_200","neutral_300","neutral_400","neutral_500","neutral_600","neutral_700","neutral_800","focus","focus_25","white_gradient","toast_info","toast_success","toast_warning","toast_error"],"mappings":"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","sourcesContent":["const COLORS = {\n black: '#1F1F1F', // Neutrals / Black\n white: '#FFFFFF', // Neutrals / White\n grey: '#949494', // Neutrals / grey\n primary: '#2E7FA1', // Brand / Primary - Core 500\n accent1: '#25837E', // Brand / Accent 1 - Core 500\n accent2: '#EAC785', // Brand / Accent 2 - Core 200\n correct: '#37A851', // Semantic / Correct - Core 400\n warning: '#E97116', // Semantic / Warning - Core 400\n critical: '#DC3449', // Semantic / Critical - Core 500\n\n primary_20: '#F1FBFE',\n primary_100: '#D4E9F2',\n primary_200: '#A9D3E5',\n primary_300: '#7FBCD7',\n primary_400: '#519DBD',\n primary_500: '#2E7FA1', // 500 Core\n primary_600: '#276D8B',\n primary_700: '#215369',\n primary_800: '#163746',\n\n accent1_20: '#EDFCFB',\n accent1_100: '#C8EEEC',\n accent1_200: '#98D8D5',\n accent1_300: '#6BC2BE',\n accent1_400: '#3EA39E',\n accent1_500: '#25837E', // 500 Core\n accent1_600: '#23716D',\n accent1_700: '#145653',\n accent1_800: '#0F3937',\n\n accent2_20: '#FFFAEE',\n accent2_100: '#F8E2BF',\n accent2_200: '#EAC785', // 200 Core\n accent2_300: '#D6AD61',\n accent2_400: '#B58E45',\n accent2_500: '#92702F',\n accent2_600: '#806128',\n accent2_700: '#604920',\n accent2_800: '#42300F',\n\n correct_20: '#ECFEF1',\n correct_100: '#CCEED2',\n correct_200: '#A0D9AD',\n correct_300: '#77C589',\n correct_400: '#37A851', // 400 Core\n correct_500: '#14892F',\n correct_600: '#13772A',\n correct_700: '#025A15',\n correct_800: '#003D0E',\n\n warning_20: '#FEF7F1',\n warning_100: '#FCDDC5',\n warning_200: '#F8C096',\n warning_300: '#F4A162',\n warning_400: '#E97116', // 400 Core\n warning_500: '#C45402',\n warning_600: '#AD4B00',\n warning_700: '#803700',\n warning_800: '#572600',\n\n critical_20: '#FEF5F7',\n critical_100: '#FDDEE2',\n critical_200: '#FDBAC2',\n critical_300: '#FD96A4',\n critical_400: '#FC5A6F',\n critical_500: '#DC3449', // 500 Core\n critical_600: '#C32238',\n critical_700: '#9C0D1D',\n critical_800: '#6B0613',\n\n neutral_20: '#FAFAFA', // 020 Core\n neutral_50: '#F2F2F2',\n neutral_100: '#E5E5E5',\n neutral_200: '#CCCCCC',\n neutral_300: '#B3B3B3',\n neutral_400: '#949494',\n neutral_500: '#767676',\n neutral_600: '#666666',\n neutral_700: '#4D4D4D',\n neutral_800: '#333333',\n\n focus: 'rgba(46, 127, 161, 1)', // Semantic / Focus 100%\n focus_25: 'rgba(46, 127, 161, 0.25)', // Semantic / Focus 25%\n\n white_gradient: 'linear-gradient(255deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%)',\n\n toast_info: '#2E7FA1',\n toast_success: '#37A851',\n toast_warning: '#E97116',\n toast_error: '#DC3449',\n};\n\nexport default COLORS;\n"],"file":"colors.cjs"}
package/dist/styles/colors.d.ts CHANGED
@@ -63,6 +63,7 @@ declare const COLORS: {
63
63
  critical_700: string;
64
64
  critical_800: string;
65
65
  neutral_20: string;
66
+ neutral_50: string;
66
67
  neutral_100: string;
67
68
  neutral_200: string;
68
69
  neutral_300: string;
package/dist/styles/colors.js CHANGED
@@ -79,6 +79,7 @@ var COLORS = {
79
79
  critical_800: '#6B0613',
80
80
  neutral_20: '#FAFAFA',
81
81
  // 020 Core
82
+ neutral_50: '#F2F2F2',
82
83
  neutral_100: '#E5E5E5',
83
84
  neutral_200: '#CCCCCC',
84
85
  neutral_300: '#B3B3B3',
package/dist/styles/colors.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/styles/colors.ts"],"names":["COLORS","black","white","grey","primary","accent1","accent2","correct","warning","critical","primary_20","primary_100","primary_200","primary_300","primary_400","primary_500","primary_600","primary_700","primary_800","accent1_20","accent1_100","accent1_200","accent1_300","accent1_400","accent1_500","accent1_600","accent1_700","accent1_800","accent2_20","accent2_100","accent2_200","accent2_300","accent2_400","accent2_500","accent2_600","accent2_700","accent2_800","correct_20","correct_100","correct_200","correct_300","correct_400","correct_500","correct_600","correct_700","correct_800","warning_20","warning_100","warning_200","warning_300","warning_400","warning_500","warning_600","warning_700","warning_800","critical_20","critical_100","critical_200","critical_300","critical_400","critical_500","critical_600","critical_700","critical_800","neutral_20","neutral_100","neutral_200","neutral_300","neutral_400","neutral_500","neutral_600","neutral_700","neutral_800","focus","focus_25","white_gradient","toast_info","toast_success","toast_warning","toast_error"],"mappings":"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","sourcesContent":["const COLORS = {\n black: '#1F1F1F', // Neutrals / Black\n white: '#FFFFFF', // Neutrals / White\n grey: '#949494', // Neutrals / grey\n primary: '#2E7FA1', // Brand / Primary - Core 500\n accent1: '#25837E', // Brand / Accent 1 - Core 500\n accent2: '#EAC785', // Brand / Accent 2 - Core 200\n correct: '#37A851', // Semantic / Correct - Core 400\n warning: '#E97116', // Semantic / Warning - Core 400\n critical: '#DC3449', // Semantic / Critical - Core 500\n\n primary_20: '#F1FBFE',\n primary_100: '#D4E9F2',\n primary_200: '#A9D3E5',\n primary_300: '#7FBCD7',\n primary_400: '#519DBD',\n primary_500: '#2E7FA1', // 500 Core\n primary_600: '#276D8B',\n primary_700: '#215369',\n primary_800: '#163746',\n\n accent1_20: '#EDFCFB',\n accent1_100: '#C8EEEC',\n accent1_200: '#98D8D5',\n accent1_300: '#6BC2BE',\n accent1_400: '#3EA39E',\n accent1_500: '#25837E', // 500 Core\n accent1_600: '#23716D',\n accent1_700: '#145653',\n accent1_800: '#0F3937',\n\n accent2_20: '#FFFAEE',\n accent2_100: '#F8E2BF',\n accent2_200: '#EAC785', // 200 Core\n accent2_300: '#D6AD61',\n accent2_400: '#B58E45',\n accent2_500: '#92702F',\n accent2_600: '#806128',\n accent2_700: '#604920',\n accent2_800: '#42300F',\n\n correct_20: '#ECFEF1',\n correct_100: '#CCEED2',\n correct_200: '#A0D9AD',\n correct_300: '#77C589',\n correct_400: '#37A851', // 400 Core\n correct_500: '#14892F',\n correct_600: '#13772A',\n correct_700: '#025A15',\n correct_800: '#003D0E',\n\n warning_20: '#FEF7F1',\n warning_100: '#FCDDC5',\n warning_200: '#F8C096',\n warning_300: '#F4A162',\n warning_400: '#E97116', // 400 Core\n warning_500: '#C45402',\n warning_600: '#AD4B00',\n warning_700: '#803700',\n warning_800: '#572600',\n\n critical_20: '#FEF5F7',\n critical_100: '#FDDEE2',\n critical_200: '#FDBAC2',\n critical_300: '#FD96A4',\n critical_400: '#FC5A6F',\n critical_500: '#DC3449', // 500 Core\n critical_600: '#C32238',\n critical_700: '#9C0D1D',\n critical_800: '#6B0613',\n\n neutral_20: '#FAFAFA', // 020 Core\n neutral_100: '#E5E5E5',\n neutral_200: '#CCCCCC',\n neutral_300: '#B3B3B3',\n neutral_400: '#949494',\n neutral_500: '#767676',\n neutral_600: '#666666',\n neutral_700: '#4D4D4D',\n neutral_800: '#333333',\n\n focus: 'rgba(46, 127, 161, 1)', // Semantic / Focus 100%\n focus_25: 'rgba(46, 127, 161, 0.25)', // Semantic / Focus 25%\n\n white_gradient: 'linear-gradient(255deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%)',\n\n toast_info: '#2E7FA1',\n toast_success: '#37A851',\n toast_warning: '#E97116',\n toast_error: '#DC3449',\n};\n\nexport default COLORS;\n"],"file":"colors.js"}
1
+ {"version":3,"sources":["../../src/styles/colors.ts"],"names":["COLORS","black","white","grey","primary","accent1","accent2","correct","warning","critical","primary_20","primary_100","primary_200","primary_300","primary_400","primary_500","primary_600","primary_700","primary_800","accent1_20","accent1_100","accent1_200","accent1_300","accent1_400","accent1_500","accent1_600","accent1_700","accent1_800","accent2_20","accent2_100","accent2_200","accent2_300","accent2_400","accent2_500","accent2_600","accent2_700","accent2_800","correct_20","correct_100","correct_200","correct_300","correct_400","correct_500","correct_600","correct_700","correct_800","warning_20","warning_100","warning_200","warning_300","warning_400","warning_500","warning_600","warning_700","warning_800","critical_20","critical_100","critical_200","critical_300","critical_400","critical_500","critical_600","critical_700","critical_800","neutral_20","neutral_50","neutral_100","neutral_200","neutral_300","neutral_400","neutral_500","neutral_600","neutral_700","neutral_800","focus","focus_25","white_gradient","toast_info","toast_success","toast_warning","toast_error"],"mappings":"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","sourcesContent":["const COLORS = {\n black: '#1F1F1F', // Neutrals / Black\n white: '#FFFFFF', // Neutrals / White\n grey: '#949494', // Neutrals / grey\n primary: '#2E7FA1', // Brand / Primary - Core 500\n accent1: '#25837E', // Brand / Accent 1 - Core 500\n accent2: '#EAC785', // Brand / Accent 2 - Core 200\n correct: '#37A851', // Semantic / Correct - Core 400\n warning: '#E97116', // Semantic / Warning - Core 400\n critical: '#DC3449', // Semantic / Critical - Core 500\n\n primary_20: '#F1FBFE',\n primary_100: '#D4E9F2',\n primary_200: '#A9D3E5',\n primary_300: '#7FBCD7',\n primary_400: '#519DBD',\n primary_500: '#2E7FA1', // 500 Core\n primary_600: '#276D8B',\n primary_700: '#215369',\n primary_800: '#163746',\n\n accent1_20: '#EDFCFB',\n accent1_100: '#C8EEEC',\n accent1_200: '#98D8D5',\n accent1_300: '#6BC2BE',\n accent1_400: '#3EA39E',\n accent1_500: '#25837E', // 500 Core\n accent1_600: '#23716D',\n accent1_700: '#145653',\n accent1_800: '#0F3937',\n\n accent2_20: '#FFFAEE',\n accent2_100: '#F8E2BF',\n accent2_200: '#EAC785', // 200 Core\n accent2_300: '#D6AD61',\n accent2_400: '#B58E45',\n accent2_500: '#92702F',\n accent2_600: '#806128',\n accent2_700: '#604920',\n accent2_800: '#42300F',\n\n correct_20: '#ECFEF1',\n correct_100: '#CCEED2',\n correct_200: '#A0D9AD',\n correct_300: '#77C589',\n correct_400: '#37A851', // 400 Core\n correct_500: '#14892F',\n correct_600: '#13772A',\n correct_700: '#025A15',\n correct_800: '#003D0E',\n\n warning_20: '#FEF7F1',\n warning_100: '#FCDDC5',\n warning_200: '#F8C096',\n warning_300: '#F4A162',\n warning_400: '#E97116', // 400 Core\n warning_500: '#C45402',\n warning_600: '#AD4B00',\n warning_700: '#803700',\n warning_800: '#572600',\n\n critical_20: '#FEF5F7',\n critical_100: '#FDDEE2',\n critical_200: '#FDBAC2',\n critical_300: '#FD96A4',\n critical_400: '#FC5A6F',\n critical_500: '#DC3449', // 500 Core\n critical_600: '#C32238',\n critical_700: '#9C0D1D',\n critical_800: '#6B0613',\n\n neutral_20: '#FAFAFA', // 020 Core\n neutral_50: '#F2F2F2',\n neutral_100: '#E5E5E5',\n neutral_200: '#CCCCCC',\n neutral_300: '#B3B3B3',\n neutral_400: '#949494',\n neutral_500: '#767676',\n neutral_600: '#666666',\n neutral_700: '#4D4D4D',\n neutral_800: '#333333',\n\n focus: 'rgba(46, 127, 161, 1)', // Semantic / Focus 100%\n focus_25: 'rgba(46, 127, 161, 0.25)', // Semantic / Focus 25%\n\n white_gradient: 'linear-gradient(255deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%)',\n\n toast_info: '#2E7FA1',\n toast_success: '#37A851',\n toast_warning: '#E97116',\n toast_error: '#DC3449',\n};\n\nexport default COLORS;\n"],"file":"colors.js"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@laerdal/life-react-components",
3
- "version": "1.8.0-dev.40",
3
+ "version": "1.8.0-dev.41",
4
4
  "private": false,
5
5
  "author": "Thomas Kalve <thomas.kalve@laerdal.com>",
6
6
  "contributors": [