@laerdal/life-react-components 1.6.0 → 1.7.0-dev.2

package/dist/SkipToContent/SkipToContent.js

@@ -7,8 +7,8 @@ import styled from 'styled-components';
 import { COLORS, ComponentTextStyle } from '../styles';
 import { ComponentSStyling } from '../styles/typography';
 import { jsx as _jsx } from "react/jsx-runtime";
-var SkipToContentLink = styled.a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  \n  text-decoration: underline;\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.black));
-var SkipToContentWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  text-decoration: none;\n  z-index: -1000;\n  height: 0px;\n  overflow-x: hidden;\n\n  &:focus-within {\n    height: auto;\n    padding: 16px;\n    z-index: 100000;\n\n    background: ", ";\n  }\n\n  @media print {\n    display: none;\n  }\n"])), COLORS.accent2_200);
+var SkipToContentLink = styled.a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n\n  text-decoration: underline;\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.black));
+var SkipToContentWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  text-decoration: none;\n  z-index: -1000;\n  height: 0px;\n  overflow-x: hidden;\n\n  &:focus-within {\n    height: auto;\n    padding: 16px;\n    z-index: 100000;\n    flex: 1 0 auto;\n    background: ", ";\n  }\n\n  @media print {\n    display: none;\n  }\n"])), COLORS.accent2_200);
 
 var SkipToContent = function SkipToContent(_ref) {
   var children = _ref.children;

package/dist/SkipToContent/SkipToContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/SkipToContent/SkipToContent.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentSStyling","SkipToContentLink","a","Bold","black","SkipToContentWrapper","div","accent2_200","SkipToContent","children"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AAEA,SAAQC,MAAR,EAAgBC,kBAAhB,QAAqD,WAArD;AACA,SAAQC,iBAAR,QAAgC,sBAAhC;;AAIA,IAAMC,iBAAiB,GAAGJ,MAAM,CAACK,CAAV,mHACnBF,iBAAiB,CAACD,kBAAkB,CAACI,IAApB,EAA0BL,MAAM,CAACM,KAAjC,CADE,CAAvB;AAMA,IAAMC,oBAAoB,GAAGR,MAAM,CAACS,GAAV,4TAWRR,MAAM,CAACS,WAXC,CAA1B;;AAmBA,IAAMC,aAA0D,GAAG,SAA7DA,aAA6D,OAAkB;AAAA,MAAfC,QAAe,QAAfA,QAAe;AACnF,sBACE,KAAC,oBAAD;AAAA,2BACE,KAAC,iBAAD;AAAmB,MAAA,IAAI,EAAC,OAAxB;AAAA,gBAAiCA;AAAjC;AADF,IADF;AAKD,CAND;;AAQA,eAAeD,aAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {COLORS, ComponentTextStyle, TYPOGRAPHY} from '../styles';\nimport {ComponentSStyling} from '../styles/typography';\n\ntype SkipToContentProps = {};\n\nconst SkipToContentLink = styled.a`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.black)}\n  \n  text-decoration: underline;\n`;\n\nconst SkipToContentWrapper = styled.div`\n  text-decoration: none;\n  z-index: -1000;\n  height: 0px;\n  overflow-x: hidden;\n\n  &:focus-within {\n    height: auto;\n    padding: 16px;\n    z-index: 100000;\n\n    background: ${COLORS.accent2_200};\n  }\n\n  @media print {\n    display: none;\n  }\n`;\n\nconst SkipToContent: React.FunctionComponent<SkipToContentProps> = ({ children }) => {\n  return (\n    <SkipToContentWrapper>\n      <SkipToContentLink href=\"#main\">{children}</SkipToContentLink>\n    </SkipToContentWrapper>\n  );\n};\n\nexport default SkipToContent;\n"],"file":"SkipToContent.js"}
+{"version":3,"sources":["../../src/SkipToContent/SkipToContent.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentSStyling","SkipToContentLink","a","Bold","black","SkipToContentWrapper","div","accent2_200","SkipToContent","children"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AAEA,SAASC,MAAT,EAAiBC,kBAAjB,QAAuD,WAAvD;AACA,SAASC,iBAAT,QAAkC,sBAAlC;;AAIA,IAAMC,iBAAiB,GAAGJ,MAAM,CAACK,CAAV,iHACnBF,iBAAiB,CAACD,kBAAkB,CAACI,IAApB,EAA0BL,MAAM,CAACM,KAAjC,CADE,CAAvB;AAMA,IAAMC,oBAAoB,GAAGR,MAAM,CAACS,GAAV,+UAWRR,MAAM,CAACS,WAXC,CAA1B;;AAmBA,IAAMC,aAA0D,GAAG,SAA7DA,aAA6D,OAAkB;AAAA,MAAfC,QAAe,QAAfA,QAAe;AACnF,sBACE,KAAC,oBAAD;AAAA,2BACE,KAAC,iBAAD;AAAmB,MAAA,IAAI,EAAC,OAAxB;AAAA,gBAAiCA;AAAjC;AADF,IADF;AAKD,CAND;;AAQA,eAAeD,aAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { COLORS, ComponentTextStyle, TYPOGRAPHY } from '../styles';\nimport { ComponentSStyling } from '../styles/typography';\n\ntype SkipToContentProps = {};\n\nconst SkipToContentLink = styled.a`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.black)}\n\n  text-decoration: underline;\n`;\n\nconst SkipToContentWrapper = styled.div`\n  text-decoration: none;\n  z-index: -1000;\n  height: 0px;\n  overflow-x: hidden;\n\n  &:focus-within {\n    height: auto;\n    padding: 16px;\n    z-index: 100000;\n    flex: 1 0 auto;\n    background: ${COLORS.accent2_200};\n  }\n\n  @media print {\n    display: none;\n  }\n`;\n\nconst SkipToContent: React.FunctionComponent<SkipToContentProps> = ({ children }) => {\n  return (\n    <SkipToContentWrapper>\n      <SkipToContentLink href=\"#main\">{children}</SkipToContentLink>\n    </SkipToContentWrapper>\n  );\n};\n\nexport default SkipToContent;\n"],"file":"SkipToContent.js"}

package/dist/Switcher/MobileSwitcherMenu.cjs

@@ -19,6 +19,8 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _styles = require("../styles");
 
+var _types = require("../types");
+
 var _Button = require("../Button");
 
 var _SystemIcons = require("../icons/systemicons/SystemIcons");
@@ -39,7 +41,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var Menu = _styledComponents.default.ul(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  list-style: none;\n  margin: 0;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: none;\n  -webkit-animation: ", " 0.2s ease-in-out;\n  animation: ", " 0.2s ease-in-out;\n  position: absolute;\n  border-radius: 4px;\n  z-index: ", ";\n  height: 100%;\n  width: 320px;\n  padding-inline-start: 0;\n  overflow-y: scroll;\n  ", " {\n    min-width: 360px;\n  }\n\n  .open & {\n    display: flex;\n    flex-direction: column;\n  }\n\n  ", ";\n"])), _styles.COLORS.white, _CommonStyles.flowDown, _CommonStyles.flowDown, _zIndexes.Z_INDEXES.off_canvas, _styles.BREAKPOINTS.SMALL, _styles.scrollBarStyling);
+var Menu = _styledComponents.default.ul(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  list-style: none;\n  margin: 0;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: none;\n  -webkit-animation: ", " 0.2s ease-in-out;\n  animation: ", " 0.2s ease-in-out;\n  position: absolute;\n  border-radius: 4px;\n  z-index: ", ";\n  height: 100%;\n  width: 320px;\n  padding-inline-start: 0;\n  overflow-y: scroll;\n  ", " {\n    min-width: 360px;\n  }\n\n  .open & {\n    display: flex;\n    flex-direction: column;\n  }\n\n  ", ";\n"])), _styles.COLORS.white, _CommonStyles.flowDown, _CommonStyles.flowDown, _zIndexes.Z_INDEXES.off_canvas, _styles.BREAKPOINTS.SMALL, (0, _styles.scrollBarStyling)(_types.Size.Small));
 
 var MenuSection = _styledComponents.default.li(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 8px 0;\n  position: relative;\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n"])));
 

package/dist/Switcher/MobileSwitcherMenu.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Switcher/MobileSwitcherMenu.tsx"],"names":["Menu","styled","ul","COLORS","white","flowDown","Z_INDEXES","off_canvas","BREAKPOINTS","SMALL","scrollBarStyling","MenuSection","li","MenuSectionList","UserMenuSectionListStyling","Top","div","neutral_600","ComponentTextStyle","Regular","LabelLine","span","neutral_20","MobileSwitcherMenu","header","elementsHeader","clickMenuAction","elements","React","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","length","map","element","to","label","icon"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, scrollBarStyling} from '../styles';\n\nimport {UserMenuItem} from '../types';\nimport {IconButton} from '../Button';\nimport {ArrowLineLeft, Close} from '../icons/systemicons/SystemIcons';\nimport {flowDown, Right, UserMenuSectionListStyling} from '../GlobalNavigationBar/mobile/CommonStyles';\nimport SwitcherMenuItem from './SwitcherMenuItem';\nimport {ComponentSStyling} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst Menu = styled.ul`\n  list-style: none;\n  margin: 0;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  display: none;\n  -webkit-animation: ${flowDown} 0.2s ease-in-out;\n  animation: ${flowDown} 0.2s ease-in-out;\n  position: absolute;\n  border-radius: 4px;\n  z-index: ${Z_INDEXES.off_canvas};\n  height: 100%;\n  width: 320px;\n  padding-inline-start: 0;\n  overflow-y: scroll;\n  ${BREAKPOINTS.SMALL} {\n    min-width: 360px;\n  }\n\n  .open & {\n    display: flex;\n    flex-direction: column;\n  }\n\n  ${scrollBarStyling};\n`;\n\nconst MenuSection = styled.li`\n  padding: 8px 0;\n  position: relative;\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n`;\n\nconst MenuSectionList = styled.ul`\n  list-style: none;\n  margin: 0;\n  overflow-y: unset !important;\n  padding-inline-start: 0;\n\n  ${UserMenuSectionListStyling}\n`;\n\nconst Top = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 22px 12px 0 12px;\n  color: ${COLORS.neutral_600};\n\n  h3 {\n    margin-block-start: 0 !important;\n    margin-block-end: 0 !important;\n    margin-inline-start: 0px;\n    margin-inline-end: 0px;\n    margin-left: 24px;\n\n    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n  }\n`;\n\nconst LabelLine = styled.span`\n  height: 32px;\n  background-color: ${COLORS.neutral_20};\n  padding-left: 24px;\n  display: flex;\n  line-height: 32px;\n`;\n\ninterface Props {\n  header: string;\n  elementsHeader: string;\n  clickMenuAction: () => void;\n  elements?: UserMenuItem[];\n}\n\nconst MobileSwitcherMenu = ({ header, elementsHeader, clickMenuAction, elements }: Props) => {\n  React.useEffect(() => {\n    function handleKeyPress(e: any) {\n      if (e.keyCode === 27) {\n        clickMenuAction();\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyPress, false);\n    return () => {\n      document.removeEventListener('keydown', handleKeyPress, false);\n    };\n  }, [clickMenuAction]);\n\n  return (\n    <Menu onClick={() => {}} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n      <Top>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n          <ArrowLineLeft size=\"24px\" color={COLORS.neutral_600} />\n        </IconButton>\n        <h3>{header}</h3>\n        <Right>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n            <Close size=\"24px\" />\n          </IconButton>\n        </Right>\n      </Top>\n      {elements && elements?.length > 0 && (\n        <MenuSection>\n          <LabelLine>{elementsHeader}</LabelLine>\n          <MenuSectionList>\n            {elements?.map((element) => (\n              <SwitcherMenuItem url={element?.to} label={element?.label} Icon={element.icon} />\n            ))}\n          </MenuSectionList>\n        </MenuSection>\n      )}\n    </Menu>\n  );\n};\n\nexport default MobileSwitcherMenu;\n"],"file":"MobileSwitcherMenu.cjs"}
+{"version":3,"sources":["../../src/Switcher/MobileSwitcherMenu.tsx"],"names":["Menu","styled","ul","COLORS","white","flowDown","Z_INDEXES","off_canvas","BREAKPOINTS","SMALL","Size","Small","MenuSection","li","MenuSectionList","UserMenuSectionListStyling","Top","div","neutral_600","ComponentTextStyle","Regular","LabelLine","span","neutral_20","MobileSwitcherMenu","header","elementsHeader","clickMenuAction","elements","React","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","length","map","element","to","label","icon"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, scrollBarStyling} from '../styles';\n\nimport {Size, UserMenuItem} from '../types';\nimport {IconButton} from '../Button';\nimport {ArrowLineLeft, Close} from '../icons/systemicons/SystemIcons';\nimport {flowDown, Right, UserMenuSectionListStyling} from '../GlobalNavigationBar/mobile/CommonStyles';\nimport SwitcherMenuItem from './SwitcherMenuItem';\nimport {ComponentSStyling} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst Menu = styled.ul`\n  list-style: none;\n  margin: 0;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  display: none;\n  -webkit-animation: ${flowDown} 0.2s ease-in-out;\n  animation: ${flowDown} 0.2s ease-in-out;\n  position: absolute;\n  border-radius: 4px;\n  z-index: ${Z_INDEXES.off_canvas};\n  height: 100%;\n  width: 320px;\n  padding-inline-start: 0;\n  overflow-y: scroll;\n  ${BREAKPOINTS.SMALL} {\n    min-width: 360px;\n  }\n\n  .open & {\n    display: flex;\n    flex-direction: column;\n  }\n\n  ${scrollBarStyling(Size.Small)};\n`;\n\nconst MenuSection = styled.li`\n  padding: 8px 0;\n  position: relative;\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n`;\n\nconst MenuSectionList = styled.ul`\n  list-style: none;\n  margin: 0;\n  overflow-y: unset !important;\n  padding-inline-start: 0;\n\n  ${UserMenuSectionListStyling}\n`;\n\nconst Top = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 22px 12px 0 12px;\n  color: ${COLORS.neutral_600};\n\n  h3 {\n    margin-block-start: 0 !important;\n    margin-block-end: 0 !important;\n    margin-inline-start: 0px;\n    margin-inline-end: 0px;\n    margin-left: 24px;\n\n    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n  }\n`;\n\nconst LabelLine = styled.span`\n  height: 32px;\n  background-color: ${COLORS.neutral_20};\n  padding-left: 24px;\n  display: flex;\n  line-height: 32px;\n`;\n\ninterface Props {\n  header: string;\n  elementsHeader: string;\n  clickMenuAction: () => void;\n  elements?: UserMenuItem[];\n}\n\nconst MobileSwitcherMenu = ({ header, elementsHeader, clickMenuAction, elements }: Props) => {\n  React.useEffect(() => {\n    function handleKeyPress(e: any) {\n      if (e.keyCode === 27) {\n        clickMenuAction();\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyPress, false);\n    return () => {\n      document.removeEventListener('keydown', handleKeyPress, false);\n    };\n  }, [clickMenuAction]);\n\n  return (\n    <Menu onClick={() => {}} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n      <Top>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n          <ArrowLineLeft size=\"24px\" color={COLORS.neutral_600} />\n        </IconButton>\n        <h3>{header}</h3>\n        <Right>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n            <Close size=\"24px\" />\n          </IconButton>\n        </Right>\n      </Top>\n      {elements && elements?.length > 0 && (\n        <MenuSection>\n          <LabelLine>{elementsHeader}</LabelLine>\n          <MenuSectionList>\n            {elements?.map((element) => (\n              <SwitcherMenuItem url={element?.to} label={element?.label} Icon={element.icon} />\n            ))}\n          </MenuSectionList>\n        </MenuSection>\n      )}\n    </Menu>\n  );\n};\n\nexport default MobileSwitcherMenu;\n"],"file":"MobileSwitcherMenu.cjs"}

package/dist/Switcher/MobileSwitcherMenu.js

@@ -6,6 +6,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 import * as React from 'react';
 import styled from 'styled-components';
 import { BREAKPOINTS, COLORS, ComponentTextStyle, scrollBarStyling } from '../styles';
+import { Size } from '../types';
 import { IconButton } from '../Button';
 import { ArrowLineLeft, Close } from '../icons/systemicons/SystemIcons';
 import { flowDown, Right, UserMenuSectionListStyling } from '../GlobalNavigationBar/mobile/CommonStyles';
@@ -14,7 +15,7 @@ import { ComponentSStyling } from '../styles/typography';
 import { Z_INDEXES } from '../styles/z-indexes';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var Menu = styled.ul(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  list-style: none;\n  margin: 0;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: none;\n  -webkit-animation: ", " 0.2s ease-in-out;\n  animation: ", " 0.2s ease-in-out;\n  position: absolute;\n  border-radius: 4px;\n  z-index: ", ";\n  height: 100%;\n  width: 320px;\n  padding-inline-start: 0;\n  overflow-y: scroll;\n  ", " {\n    min-width: 360px;\n  }\n\n  .open & {\n    display: flex;\n    flex-direction: column;\n  }\n\n  ", ";\n"])), COLORS.white, flowDown, flowDown, Z_INDEXES.off_canvas, BREAKPOINTS.SMALL, scrollBarStyling);
+var Menu = styled.ul(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  list-style: none;\n  margin: 0;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: none;\n  -webkit-animation: ", " 0.2s ease-in-out;\n  animation: ", " 0.2s ease-in-out;\n  position: absolute;\n  border-radius: 4px;\n  z-index: ", ";\n  height: 100%;\n  width: 320px;\n  padding-inline-start: 0;\n  overflow-y: scroll;\n  ", " {\n    min-width: 360px;\n  }\n\n  .open & {\n    display: flex;\n    flex-direction: column;\n  }\n\n  ", ";\n"])), COLORS.white, flowDown, flowDown, Z_INDEXES.off_canvas, BREAKPOINTS.SMALL, scrollBarStyling(Size.Small));
 var MenuSection = styled.li(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 8px 0;\n  position: relative;\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n"])));
 var MenuSectionList = styled.ul(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  list-style: none;\n  margin: 0;\n  overflow-y: unset !important;\n  padding-inline-start: 0;\n\n  ", "\n"])), UserMenuSectionListStyling);
 var Top = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 22px 12px 0 12px;\n  color: ", ";\n\n  h3 {\n    margin-block-start: 0 !important;\n    margin-block-end: 0 !important;\n    margin-inline-start: 0px;\n    margin-inline-end: 0px;\n    margin-left: 24px;\n\n    ", "\n  }\n"])), COLORS.neutral_600, ComponentSStyling(ComponentTextStyle.Regular, 'inherit'));

package/dist/Switcher/MobileSwitcherMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Switcher/MobileSwitcherMenu.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","scrollBarStyling","IconButton","ArrowLineLeft","Close","flowDown","Right","UserMenuSectionListStyling","SwitcherMenuItem","ComponentSStyling","Z_INDEXES","Menu","ul","white","off_canvas","SMALL","MenuSection","li","MenuSectionList","Top","div","neutral_600","Regular","LabelLine","span","neutral_20","MobileSwitcherMenu","header","elementsHeader","clickMenuAction","elements","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","length","map","element","to","label","icon"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, scrollBarStyling} from '../styles';\n\nimport {UserMenuItem} from '../types';\nimport {IconButton} from '../Button';\nimport {ArrowLineLeft, Close} from '../icons/systemicons/SystemIcons';\nimport {flowDown, Right, UserMenuSectionListStyling} from '../GlobalNavigationBar/mobile/CommonStyles';\nimport SwitcherMenuItem from './SwitcherMenuItem';\nimport {ComponentSStyling} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst Menu = styled.ul`\n  list-style: none;\n  margin: 0;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  display: none;\n  -webkit-animation: ${flowDown} 0.2s ease-in-out;\n  animation: ${flowDown} 0.2s ease-in-out;\n  position: absolute;\n  border-radius: 4px;\n  z-index: ${Z_INDEXES.off_canvas};\n  height: 100%;\n  width: 320px;\n  padding-inline-start: 0;\n  overflow-y: scroll;\n  ${BREAKPOINTS.SMALL} {\n    min-width: 360px;\n  }\n\n  .open & {\n    display: flex;\n    flex-direction: column;\n  }\n\n  ${scrollBarStyling};\n`;\n\nconst MenuSection = styled.li`\n  padding: 8px 0;\n  position: relative;\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n`;\n\nconst MenuSectionList = styled.ul`\n  list-style: none;\n  margin: 0;\n  overflow-y: unset !important;\n  padding-inline-start: 0;\n\n  ${UserMenuSectionListStyling}\n`;\n\nconst Top = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 22px 12px 0 12px;\n  color: ${COLORS.neutral_600};\n\n  h3 {\n    margin-block-start: 0 !important;\n    margin-block-end: 0 !important;\n    margin-inline-start: 0px;\n    margin-inline-end: 0px;\n    margin-left: 24px;\n\n    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n  }\n`;\n\nconst LabelLine = styled.span`\n  height: 32px;\n  background-color: ${COLORS.neutral_20};\n  padding-left: 24px;\n  display: flex;\n  line-height: 32px;\n`;\n\ninterface Props {\n  header: string;\n  elementsHeader: string;\n  clickMenuAction: () => void;\n  elements?: UserMenuItem[];\n}\n\nconst MobileSwitcherMenu = ({ header, elementsHeader, clickMenuAction, elements }: Props) => {\n  React.useEffect(() => {\n    function handleKeyPress(e: any) {\n      if (e.keyCode === 27) {\n        clickMenuAction();\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyPress, false);\n    return () => {\n      document.removeEventListener('keydown', handleKeyPress, false);\n    };\n  }, [clickMenuAction]);\n\n  return (\n    <Menu onClick={() => {}} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n      <Top>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n          <ArrowLineLeft size=\"24px\" color={COLORS.neutral_600} />\n        </IconButton>\n        <h3>{header}</h3>\n        <Right>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n            <Close size=\"24px\" />\n          </IconButton>\n        </Right>\n      </Top>\n      {elements && elements?.length > 0 && (\n        <MenuSection>\n          <LabelLine>{elementsHeader}</LabelLine>\n          <MenuSectionList>\n            {elements?.map((element) => (\n              <SwitcherMenuItem url={element?.to} label={element?.label} Icon={element.icon} />\n            ))}\n          </MenuSectionList>\n        </MenuSection>\n      )}\n    </Menu>\n  );\n};\n\nexport default MobileSwitcherMenu;\n"],"file":"MobileSwitcherMenu.js"}
+{"version":3,"sources":["../../src/Switcher/MobileSwitcherMenu.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","scrollBarStyling","Size","IconButton","ArrowLineLeft","Close","flowDown","Right","UserMenuSectionListStyling","SwitcherMenuItem","ComponentSStyling","Z_INDEXES","Menu","ul","white","off_canvas","SMALL","Small","MenuSection","li","MenuSectionList","Top","div","neutral_600","Regular","LabelLine","span","neutral_20","MobileSwitcherMenu","header","elementsHeader","clickMenuAction","elements","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","length","map","element","to","label","icon"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, scrollBarStyling} from '../styles';\n\nimport {Size, UserMenuItem} from '../types';\nimport {IconButton} from '../Button';\nimport {ArrowLineLeft, Close} from '../icons/systemicons/SystemIcons';\nimport {flowDown, Right, UserMenuSectionListStyling} from '../GlobalNavigationBar/mobile/CommonStyles';\nimport SwitcherMenuItem from './SwitcherMenuItem';\nimport {ComponentSStyling} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst Menu = styled.ul`\n  list-style: none;\n  margin: 0;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  display: none;\n  -webkit-animation: ${flowDown} 0.2s ease-in-out;\n  animation: ${flowDown} 0.2s ease-in-out;\n  position: absolute;\n  border-radius: 4px;\n  z-index: ${Z_INDEXES.off_canvas};\n  height: 100%;\n  width: 320px;\n  padding-inline-start: 0;\n  overflow-y: scroll;\n  ${BREAKPOINTS.SMALL} {\n    min-width: 360px;\n  }\n\n  .open & {\n    display: flex;\n    flex-direction: column;\n  }\n\n  ${scrollBarStyling(Size.Small)};\n`;\n\nconst MenuSection = styled.li`\n  padding: 8px 0;\n  position: relative;\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n`;\n\nconst MenuSectionList = styled.ul`\n  list-style: none;\n  margin: 0;\n  overflow-y: unset !important;\n  padding-inline-start: 0;\n\n  ${UserMenuSectionListStyling}\n`;\n\nconst Top = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 22px 12px 0 12px;\n  color: ${COLORS.neutral_600};\n\n  h3 {\n    margin-block-start: 0 !important;\n    margin-block-end: 0 !important;\n    margin-inline-start: 0px;\n    margin-inline-end: 0px;\n    margin-left: 24px;\n\n    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n  }\n`;\n\nconst LabelLine = styled.span`\n  height: 32px;\n  background-color: ${COLORS.neutral_20};\n  padding-left: 24px;\n  display: flex;\n  line-height: 32px;\n`;\n\ninterface Props {\n  header: string;\n  elementsHeader: string;\n  clickMenuAction: () => void;\n  elements?: UserMenuItem[];\n}\n\nconst MobileSwitcherMenu = ({ header, elementsHeader, clickMenuAction, elements }: Props) => {\n  React.useEffect(() => {\n    function handleKeyPress(e: any) {\n      if (e.keyCode === 27) {\n        clickMenuAction();\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyPress, false);\n    return () => {\n      document.removeEventListener('keydown', handleKeyPress, false);\n    };\n  }, [clickMenuAction]);\n\n  return (\n    <Menu onClick={() => {}} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n      <Top>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n          <ArrowLineLeft size=\"24px\" color={COLORS.neutral_600} />\n        </IconButton>\n        <h3>{header}</h3>\n        <Right>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n            <Close size=\"24px\" />\n          </IconButton>\n        </Right>\n      </Top>\n      {elements && elements?.length > 0 && (\n        <MenuSection>\n          <LabelLine>{elementsHeader}</LabelLine>\n          <MenuSectionList>\n            {elements?.map((element) => (\n              <SwitcherMenuItem url={element?.to} label={element?.label} Icon={element.icon} />\n            ))}\n          </MenuSectionList>\n        </MenuSection>\n      )}\n    </Menu>\n  );\n};\n\nexport default MobileSwitcherMenu;\n"],"file":"MobileSwitcherMenu.js"}

package/dist/Tag/Tag.cjs

@@ -27,7 +27,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  height: 24px;\n  width: fit-content;\n  border-radius: 2px;\n  background: ", ";\n"])), function (props) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  height: 24px;\n  width: calc(100%);\n  max-width: fit-content;\n  min-width: ", ";\n  border-radius: 2px;\n  background: ", ";\n"])), function (props) {
+  return props.isLabelPresent ? '64px' : '';
+}, function (props) {
   return getBackgroundColor(props.variant);
 });
 
@@ -35,7 +37,7 @@ var IconContainer = _styledComponents.default.div(_templateObject2 || (_template
   return props.variant === 'neutral' ? _.COLORS.neutral_600 : _.COLORS.white;
 });
 
-var TextContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  border-radius: 2px;\n  margin: ", ";\n  height: 16px;\n  ", "\n"])), function (props) {
+var TextContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  border-radius: 2px;\n  margin: ", ";\n  height: 16px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;  \n  ", "\n"])), function (props) {
   return props.variant === 'neutral' ? _.COLORS.neutral_600 : _.COLORS.white;
 }, function (props) {
   return props.icon ? "4px 8px 4px 0" : "4px 8px";
@@ -70,6 +72,7 @@ var Tag = function Tag(_ref) {
       variant = _ref$variant === void 0 ? 'neutral' : _ref$variant;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
     variant: variant,
+    isLabelPresent: !!label,
     children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(IconContainer, {
       variant: variant,
       "data-testid": 'iconContainer',

package/dist/Tag/Tag.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Tag/Tag.tsx"],"names":["Container","styled","div","props","getBackgroundColor","variant","IconContainer","COLORS","neutral_600","white","TextContainer","icon","ComponentTextStyle","Bold","correct_500","warning_500","critical_500","accent1_500","accent2_500","neutral_100","Tag","label"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,SAAS,GAAGC,0BAAOC,GAAV,4LAKC,UAAAC,KAAK;AAAA,SAAGC,kBAAkB,CAACD,KAAK,CAACE,OAAP,CAArB;AAAA,CALN,CAAf;;AAQA,IAAMC,aAAa,GAAGL,0BAAOC,GAAV,oMAMN,UAAAC,KAAK;AAAA,SAAGA,KAAK,CAACE,OAAN,KAAkB,SAAlB,GAA8BE,SAAOC,WAArC,GAAmDD,SAAOE,KAA7D;AAAA,CANC,CAAnB;;AAUA,IAAMC,aAAa,GAAGT,0BAAOC,GAAV,yKACR,UAAAC,KAAK;AAAA,SAAGA,KAAK,CAACE,OAAN,KAAkB,SAAlB,GAA8BE,SAAOC,WAArC,GAAmDD,SAAOE,KAA7D;AAAA,CADG,EAGP,UAAAN,KAAK;AAAA,SAAGA,KAAK,CAACQ,IAAN,8BAAH;AAAA,CAHE,EAKf,0BAAmBC,qBAAmBC,IAAtC,EAA4C,IAA5C,CALe,CAAnB;;AAQA,IAAMT,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,OAAD,EAA0B;AACnD,UAAOA,OAAP;AACE,SAAK,UAAL;AAAiB,aAAOE,SAAOO,WAAd;;AACjB,SAAK,SAAL;AAAiB,aAAOP,SAAOQ,WAAd;;AACjB,SAAK,UAAL;AAAiB,aAAOR,SAAOS,YAAd;;AACjB,SAAK,SAAL;AAAgB,aAAOT,SAAOU,WAAd;;AAChB,SAAK,SAAL;AAAgB,aAAOV,SAAOW,WAAd;;AAChB;AAAS,aAAOX,SAAOY,WAAd;AANX;AAQD,CATD;;AAmBA,IAAMC,GAAsC,GAAG,SAAzCA,GAAyC,OAAsC;AAAA,MAApCC,KAAoC,QAApCA,KAAoC;AAAA,MAA7BV,IAA6B,QAA7BA,IAA6B;AAAA,0BAAvBN,OAAuB;AAAA,MAAvBA,OAAuB,6BAAf,SAAe;AACnF,sBACE,sBAAC,SAAD;AAAW,IAAA,OAAO,EAAEA,OAApB;AAAA,eACGM,IAAI,iBAAI,qBAAC,aAAD;AAAe,MAAA,OAAO,EAAEN,OAAxB;AAAiC,qBAAa,eAA9C;AAAA,gBACJM;AADI,MADX,EAKGU,KAAK,iBAAI,qBAAC,aAAD;AAAe,MAAA,OAAO,EAAEhB,OAAxB;AAAiC,MAAA,IAAI,EAAEM,IAAvC;AAAA,gBACLU;AADK,MALZ;AAAA,IADF;AAYD,CAbD;;;AALEA,EAAAA,K;AACAV,EAAAA,I;AACAN,EAAAA,O,4BALwB,S,EAAY,U,EAAa,S,EAAY,U,EAAa,S,EAAY,S;;eAuBzEe,G","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\n\nconst Container = styled.div<{variant: TagVariants}>`\n  display: flex;\n  height: 24px;\n  width: fit-content;\n  border-radius: 2px;\n  background: ${props=> getBackgroundColor(props.variant)};\n`;\n\nconst IconContainer = styled.div<{variant: TagVariants}>`\n  border-radius: 2px;\n  margin: 4px;\n  svg {\n    width: 16px;\n    height: 16px;\n    color: ${props=> props.variant === 'neutral' ? COLORS.neutral_600 : COLORS.white};\n  }\n`;\n\nconst TextContainer = styled.div<{variant: TagVariants, icon: React.ReactNode}>`\n  color: ${props=> props.variant === 'neutral' ? COLORS.neutral_600 : COLORS.white};\n  border-radius: 2px;\n  margin: ${props=> props.icon ? `4px 8px 4px 0` : `4px 8px`};\n  height: 16px;\n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n`;\n\nconst getBackgroundColor = (variant: TagVariants) => {\n  switch(variant){\n    case 'positive': return COLORS.correct_500;\n    case 'warning' : return COLORS.warning_500;\n    case 'critical': return COLORS.critical_500;\n    case 'accent1': return COLORS.accent1_500;\n    case 'accent2': return COLORS.accent2_500;\n    default: return COLORS.neutral_100;\n  }\n}\n\nexport type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\n\ntype TagProps = {\n  label?: string;\n  icon?: React.ReactNode;\n  variant?: TagVariants;\n}\n\nconst Tag: React.FunctionComponent<TagProps> = ({label, icon, variant='neutral'}) => {\n  return (   \n    <Container variant={variant}>\n      {icon && <IconContainer variant={variant} data-testid={'iconContainer'}>\n          {icon}\n        </IconContainer>\n      }\n      {label && <TextContainer variant={variant} icon={icon}>\n          {label}\n        </TextContainer>\n      }\n    </Container>\n  );\n};\n\nexport default Tag;"],"file":"Tag.cjs"}
+{"version":3,"sources":["../../src/Tag/Tag.tsx"],"names":["Container","styled","div","props","isLabelPresent","getBackgroundColor","variant","IconContainer","COLORS","neutral_600","white","TextContainer","icon","ComponentTextStyle","Bold","correct_500","warning_500","critical_500","accent1_500","accent2_500","neutral_100","Tag","label"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,SAAS,GAAGC,0BAAOC,GAAV,0OAKA,UAAAC,KAAK;AAAA,SAAEA,KAAK,CAACC,cAAN,GAAuB,MAAvB,GAAgC,EAAlC;AAAA,CALL,EAOC,UAAAD,KAAK;AAAA,SAAGE,kBAAkB,CAACF,KAAK,CAACG,OAAP,CAArB;AAAA,CAPN,CAAf;;AAUA,IAAMC,aAAa,GAAGN,0BAAOC,GAAV,oMAMN,UAAAC,KAAK;AAAA,SAAGA,KAAK,CAACG,OAAN,KAAkB,SAAlB,GAA8BE,SAAOC,WAArC,GAAmDD,SAAOE,KAA7D;AAAA,CANC,CAAnB;;AAUA,IAAMC,aAAa,GAAGV,0BAAOC,GAAV,oPACR,UAAAC,KAAK;AAAA,SAAGA,KAAK,CAACG,OAAN,KAAkB,SAAlB,GAA8BE,SAAOC,WAArC,GAAmDD,SAAOE,KAA7D;AAAA,CADG,EAGP,UAAAP,KAAK;AAAA,SAAGA,KAAK,CAACS,IAAN,8BAAH;AAAA,CAHE,EAQf,0BAAmBC,qBAAmBC,IAAtC,EAA4C,IAA5C,CARe,CAAnB;;AAWA,IAAMT,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,OAAD,EAA0B;AACnD,UAAOA,OAAP;AACE,SAAK,UAAL;AAAiB,aAAOE,SAAOO,WAAd;;AACjB,SAAK,SAAL;AAAiB,aAAOP,SAAOQ,WAAd;;AACjB,SAAK,UAAL;AAAiB,aAAOR,SAAOS,YAAd;;AACjB,SAAK,SAAL;AAAgB,aAAOT,SAAOU,WAAd;;AAChB,SAAK,SAAL;AAAgB,aAAOV,SAAOW,WAAd;;AAChB;AAAS,aAAOX,SAAOY,WAAd;AANX;AAQD,CATD;;AAmBA,IAAMC,GAAsC,GAAG,SAAzCA,GAAyC,OAAsC;AAAA,MAApCC,KAAoC,QAApCA,KAAoC;AAAA,MAA7BV,IAA6B,QAA7BA,IAA6B;AAAA,0BAAvBN,OAAuB;AAAA,MAAvBA,OAAuB,6BAAf,SAAe;AACnF,sBACE,sBAAC,SAAD;AAAW,IAAA,OAAO,EAAEA,OAApB;AAA6B,IAAA,cAAc,EAAE,CAAC,CAACgB,KAA/C;AAAA,eACGV,IAAI,iBAAI,qBAAC,aAAD;AAAe,MAAA,OAAO,EAAEN,OAAxB;AAAiC,qBAAa,eAA9C;AAAA,gBACJM;AADI,MADX,EAKGU,KAAK,iBAAI,qBAAC,aAAD;AAAe,MAAA,OAAO,EAAEhB,OAAxB;AAAiC,MAAA,IAAI,EAAEM,IAAvC;AAAA,gBACLU;AADK,MALZ;AAAA,IADF;AAYD,CAbD;;;AALEA,EAAAA,K;AACAV,EAAAA,I;AACAN,EAAAA,O,4BALwB,S,EAAY,U,EAAa,S,EAAY,U,EAAa,S,EAAY,S;;eAuBzEe,G","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\n\nconst Container = styled.div<{variant: TagVariants, isLabelPresent: boolean}>`\n  display: flex;\n  height: 24px;\n  width: calc(100%);\n  max-width: fit-content;\n  min-width: ${props=>props.isLabelPresent ? '64px' : ''};\n  border-radius: 2px;\n  background: ${props=> getBackgroundColor(props.variant)};\n`;\n\nconst IconContainer = styled.div<{variant: TagVariants}>`\n  border-radius: 2px;\n  margin: 4px;\n  svg {\n    width: 16px;\n    height: 16px;\n    color: ${props=> props.variant === 'neutral' ? COLORS.neutral_600 : COLORS.white};\n  }\n`;\n\nconst TextContainer = styled.div<{variant: TagVariants, icon: React.ReactNode}>`\n  color: ${props=> props.variant === 'neutral' ? COLORS.neutral_600 : COLORS.white};\n  border-radius: 2px;\n  margin: ${props=> props.icon ? `4px 8px 4px 0` : `4px 8px`};\n  height: 16px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;  \n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n`;\n\nconst getBackgroundColor = (variant: TagVariants) => {\n  switch(variant){\n    case 'positive': return COLORS.correct_500;\n    case 'warning' : return COLORS.warning_500;\n    case 'critical': return COLORS.critical_500;\n    case 'accent1': return COLORS.accent1_500;\n    case 'accent2': return COLORS.accent2_500;\n    default: return COLORS.neutral_100;\n  }\n}\n\nexport type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\n\ntype TagProps = {\n  label?: string;\n  icon?: React.ReactNode;\n  variant?: TagVariants;\n}\n\nconst Tag: React.FunctionComponent<TagProps> = ({label, icon, variant='neutral'}) => {\n  return (   \n    <Container variant={variant} isLabelPresent={!!label}>\n      {icon && <IconContainer variant={variant} data-testid={'iconContainer'}>\n          {icon}\n        </IconContainer>\n      }\n      {label && <TextContainer variant={variant} icon={icon}>\n          {label}\n        </TextContainer>\n      }\n    </Container>\n  );\n};\n\nexport default Tag;"],"file":"Tag.cjs"}

package/dist/Tag/Tag.js

@@ -8,13 +8,15 @@ import styled from 'styled-components';
 import { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  height: 24px;\n  width: fit-content;\n  border-radius: 2px;\n  background: ", ";\n"])), function (props) {
+var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  height: 24px;\n  width: calc(100%);\n  max-width: fit-content;\n  min-width: ", ";\n  border-radius: 2px;\n  background: ", ";\n"])), function (props) {
+  return props.isLabelPresent ? '64px' : '';
+}, function (props) {
   return getBackgroundColor(props.variant);
 });
 var IconContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border-radius: 2px;\n  margin: 4px;\n  svg {\n    width: 16px;\n    height: 16px;\n    color: ", ";\n  }\n"])), function (props) {
   return props.variant === 'neutral' ? COLORS.neutral_600 : COLORS.white;
 });
-var TextContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  border-radius: 2px;\n  margin: ", ";\n  height: 16px;\n  ", "\n"])), function (props) {
+var TextContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  border-radius: 2px;\n  margin: ", ";\n  height: 16px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;  \n  ", "\n"])), function (props) {
   return props.variant === 'neutral' ? COLORS.neutral_600 : COLORS.white;
 }, function (props) {
   return props.icon ? "4px 8px 4px 0" : "4px 8px";
@@ -49,6 +51,7 @@ var Tag = function Tag(_ref) {
       variant = _ref$variant === void 0 ? 'neutral' : _ref$variant;
   return /*#__PURE__*/_jsxs(Container, {
     variant: variant,
+    isLabelPresent: !!label,
     children: [icon && /*#__PURE__*/_jsx(IconContainer, {
       variant: variant,
       "data-testid": 'iconContainer',

package/dist/Tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Tag/Tag.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentXSStyling","Container","div","props","getBackgroundColor","variant","IconContainer","neutral_600","white","TextContainer","icon","Bold","correct_500","warning_500","critical_500","accent1_500","accent2_500","neutral_100","Tag","label"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,MAAT,EAAiBC,kBAAjB,EAAqCC,kBAArC,QAA+D,IAA/D;;;AAEA,IAAMC,SAAS,GAAGJ,MAAM,CAACK,GAAV,8KAKC,UAAAC,KAAK;AAAA,SAAGC,kBAAkB,CAACD,KAAK,CAACE,OAAP,CAArB;AAAA,CALN,CAAf;AAQA,IAAMC,aAAa,GAAGT,MAAM,CAACK,GAAV,sLAMN,UAAAC,KAAK;AAAA,SAAGA,KAAK,CAACE,OAAN,KAAkB,SAAlB,GAA8BP,MAAM,CAACS,WAArC,GAAmDT,MAAM,CAACU,KAA7D;AAAA,CANC,CAAnB;AAUA,IAAMC,aAAa,GAAGZ,MAAM,CAACK,GAAV,2JACR,UAAAC,KAAK;AAAA,SAAGA,KAAK,CAACE,OAAN,KAAkB,SAAlB,GAA8BP,MAAM,CAACS,WAArC,GAAmDT,MAAM,CAACU,KAA7D;AAAA,CADG,EAGP,UAAAL,KAAK;AAAA,SAAGA,KAAK,CAACO,IAAN,8BAAH;AAAA,CAHE,EAKfV,kBAAkB,CAACD,kBAAkB,CAACY,IAApB,EAA0B,IAA1B,CALH,CAAnB;;AAQA,IAAMP,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,OAAD,EAA0B;AACnD,UAAOA,OAAP;AACE,SAAK,UAAL;AAAiB,aAAOP,MAAM,CAACc,WAAd;;AACjB,SAAK,SAAL;AAAiB,aAAOd,MAAM,CAACe,WAAd;;AACjB,SAAK,UAAL;AAAiB,aAAOf,MAAM,CAACgB,YAAd;;AACjB,SAAK,SAAL;AAAgB,aAAOhB,MAAM,CAACiB,WAAd;;AAChB,SAAK,SAAL;AAAgB,aAAOjB,MAAM,CAACkB,WAAd;;AAChB;AAAS,aAAOlB,MAAM,CAACmB,WAAd;AANX;AAQD,CATD;;AAmBA,IAAMC,GAAsC,GAAG,SAAzCA,GAAyC,OAAsC;AAAA,MAApCC,KAAoC,QAApCA,KAAoC;AAAA,MAA7BT,IAA6B,QAA7BA,IAA6B;AAAA,0BAAvBL,OAAuB;AAAA,MAAvBA,OAAuB,6BAAf,SAAe;AACnF,sBACE,MAAC,SAAD;AAAW,IAAA,OAAO,EAAEA,OAApB;AAAA,eACGK,IAAI,iBAAI,KAAC,aAAD;AAAe,MAAA,OAAO,EAAEL,OAAxB;AAAiC,qBAAa,eAA9C;AAAA,gBACJK;AADI,MADX,EAKGS,KAAK,iBAAI,KAAC,aAAD;AAAe,MAAA,OAAO,EAAEd,OAAxB;AAAiC,MAAA,IAAI,EAAEK,IAAvC;AAAA,gBACLS;AADK,MALZ;AAAA,IADF;AAYD,CAbD;;;AALEA,EAAAA,K;AACAT,EAAAA,I;AACAL,EAAAA,O,aALwB,S,EAAY,U,EAAa,S,EAAY,U,EAAa,S,EAAY,S;;AAuBxF,eAAea,GAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\n\nconst Container = styled.div<{variant: TagVariants}>`\n  display: flex;\n  height: 24px;\n  width: fit-content;\n  border-radius: 2px;\n  background: ${props=> getBackgroundColor(props.variant)};\n`;\n\nconst IconContainer = styled.div<{variant: TagVariants}>`\n  border-radius: 2px;\n  margin: 4px;\n  svg {\n    width: 16px;\n    height: 16px;\n    color: ${props=> props.variant === 'neutral' ? COLORS.neutral_600 : COLORS.white};\n  }\n`;\n\nconst TextContainer = styled.div<{variant: TagVariants, icon: React.ReactNode}>`\n  color: ${props=> props.variant === 'neutral' ? COLORS.neutral_600 : COLORS.white};\n  border-radius: 2px;\n  margin: ${props=> props.icon ? `4px 8px 4px 0` : `4px 8px`};\n  height: 16px;\n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n`;\n\nconst getBackgroundColor = (variant: TagVariants) => {\n  switch(variant){\n    case 'positive': return COLORS.correct_500;\n    case 'warning' : return COLORS.warning_500;\n    case 'critical': return COLORS.critical_500;\n    case 'accent1': return COLORS.accent1_500;\n    case 'accent2': return COLORS.accent2_500;\n    default: return COLORS.neutral_100;\n  }\n}\n\nexport type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\n\ntype TagProps = {\n  label?: string;\n  icon?: React.ReactNode;\n  variant?: TagVariants;\n}\n\nconst Tag: React.FunctionComponent<TagProps> = ({label, icon, variant='neutral'}) => {\n  return (   \n    <Container variant={variant}>\n      {icon && <IconContainer variant={variant} data-testid={'iconContainer'}>\n          {icon}\n        </IconContainer>\n      }\n      {label && <TextContainer variant={variant} icon={icon}>\n          {label}\n        </TextContainer>\n      }\n    </Container>\n  );\n};\n\nexport default Tag;"],"file":"Tag.js"}
+{"version":3,"sources":["../../src/Tag/Tag.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentXSStyling","Container","div","props","isLabelPresent","getBackgroundColor","variant","IconContainer","neutral_600","white","TextContainer","icon","Bold","correct_500","warning_500","critical_500","accent1_500","accent2_500","neutral_100","Tag","label"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,MAAT,EAAiBC,kBAAjB,EAAqCC,kBAArC,QAA+D,IAA/D;;;AAEA,IAAMC,SAAS,GAAGJ,MAAM,CAACK,GAAV,4NAKA,UAAAC,KAAK;AAAA,SAAEA,KAAK,CAACC,cAAN,GAAuB,MAAvB,GAAgC,EAAlC;AAAA,CALL,EAOC,UAAAD,KAAK;AAAA,SAAGE,kBAAkB,CAACF,KAAK,CAACG,OAAP,CAArB;AAAA,CAPN,CAAf;AAUA,IAAMC,aAAa,GAAGV,MAAM,CAACK,GAAV,sLAMN,UAAAC,KAAK;AAAA,SAAGA,KAAK,CAACG,OAAN,KAAkB,SAAlB,GAA8BR,MAAM,CAACU,WAArC,GAAmDV,MAAM,CAACW,KAA7D;AAAA,CANC,CAAnB;AAUA,IAAMC,aAAa,GAAGb,MAAM,CAACK,GAAV,sOACR,UAAAC,KAAK;AAAA,SAAGA,KAAK,CAACG,OAAN,KAAkB,SAAlB,GAA8BR,MAAM,CAACU,WAArC,GAAmDV,MAAM,CAACW,KAA7D;AAAA,CADG,EAGP,UAAAN,KAAK;AAAA,SAAGA,KAAK,CAACQ,IAAN,8BAAH;AAAA,CAHE,EAQfX,kBAAkB,CAACD,kBAAkB,CAACa,IAApB,EAA0B,IAA1B,CARH,CAAnB;;AAWA,IAAMP,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,OAAD,EAA0B;AACnD,UAAOA,OAAP;AACE,SAAK,UAAL;AAAiB,aAAOR,MAAM,CAACe,WAAd;;AACjB,SAAK,SAAL;AAAiB,aAAOf,MAAM,CAACgB,WAAd;;AACjB,SAAK,UAAL;AAAiB,aAAOhB,MAAM,CAACiB,YAAd;;AACjB,SAAK,SAAL;AAAgB,aAAOjB,MAAM,CAACkB,WAAd;;AAChB,SAAK,SAAL;AAAgB,aAAOlB,MAAM,CAACmB,WAAd;;AAChB;AAAS,aAAOnB,MAAM,CAACoB,WAAd;AANX;AAQD,CATD;;AAmBA,IAAMC,GAAsC,GAAG,SAAzCA,GAAyC,OAAsC;AAAA,MAApCC,KAAoC,QAApCA,KAAoC;AAAA,MAA7BT,IAA6B,QAA7BA,IAA6B;AAAA,0BAAvBL,OAAuB;AAAA,MAAvBA,OAAuB,6BAAf,SAAe;AACnF,sBACE,MAAC,SAAD;AAAW,IAAA,OAAO,EAAEA,OAApB;AAA6B,IAAA,cAAc,EAAE,CAAC,CAACc,KAA/C;AAAA,eACGT,IAAI,iBAAI,KAAC,aAAD;AAAe,MAAA,OAAO,EAAEL,OAAxB;AAAiC,qBAAa,eAA9C;AAAA,gBACJK;AADI,MADX,EAKGS,KAAK,iBAAI,KAAC,aAAD;AAAe,MAAA,OAAO,EAAEd,OAAxB;AAAiC,MAAA,IAAI,EAAEK,IAAvC;AAAA,gBACLS;AADK,MALZ;AAAA,IADF;AAYD,CAbD;;;AALEA,EAAAA,K;AACAT,EAAAA,I;AACAL,EAAAA,O,aALwB,S,EAAY,U,EAAa,S,EAAY,U,EAAa,S,EAAY,S;;AAuBxF,eAAea,GAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\n\nconst Container = styled.div<{variant: TagVariants, isLabelPresent: boolean}>`\n  display: flex;\n  height: 24px;\n  width: calc(100%);\n  max-width: fit-content;\n  min-width: ${props=>props.isLabelPresent ? '64px' : ''};\n  border-radius: 2px;\n  background: ${props=> getBackgroundColor(props.variant)};\n`;\n\nconst IconContainer = styled.div<{variant: TagVariants}>`\n  border-radius: 2px;\n  margin: 4px;\n  svg {\n    width: 16px;\n    height: 16px;\n    color: ${props=> props.variant === 'neutral' ? COLORS.neutral_600 : COLORS.white};\n  }\n`;\n\nconst TextContainer = styled.div<{variant: TagVariants, icon: React.ReactNode}>`\n  color: ${props=> props.variant === 'neutral' ? COLORS.neutral_600 : COLORS.white};\n  border-radius: 2px;\n  margin: ${props=> props.icon ? `4px 8px 4px 0` : `4px 8px`};\n  height: 16px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;  \n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n`;\n\nconst getBackgroundColor = (variant: TagVariants) => {\n  switch(variant){\n    case 'positive': return COLORS.correct_500;\n    case 'warning' : return COLORS.warning_500;\n    case 'critical': return COLORS.critical_500;\n    case 'accent1': return COLORS.accent1_500;\n    case 'accent2': return COLORS.accent2_500;\n    default: return COLORS.neutral_100;\n  }\n}\n\nexport type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\n\ntype TagProps = {\n  label?: string;\n  icon?: React.ReactNode;\n  variant?: TagVariants;\n}\n\nconst Tag: React.FunctionComponent<TagProps> = ({label, icon, variant='neutral'}) => {\n  return (   \n    <Container variant={variant} isLabelPresent={!!label}>\n      {icon && <IconContainer variant={variant} data-testid={'iconContainer'}>\n          {icon}\n        </IconContainer>\n      }\n      {label && <TextContainer variant={variant} icon={icon}>\n          {label}\n        </TextContainer>\n      }\n    </Container>\n  );\n};\n\nexport default Tag;"],"file":"Tag.js"}

package/dist/common/HoverWithin.cjs

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useActionWithin = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+var useActionWithin = function useActionWithin(ref, children) {
+  var handleMouseEnter = function handleMouseEnter(e) {
+    ref.current.classList.add('action-within');
+  };
+
+  var handleMouseLeave = function handleMouseLeave(e) {
+    ref.current.classList.remove('action-within');
+  };
+
+  _react.default.useEffect(function () {
+    var _iterator = _createForOfIteratorHelper(children),
+        _step;
+
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var child = _step.value;
+        child.current.addEventListener('mouseenter', handleMouseEnter);
+        child.current.addEventListener('mouseleave', handleMouseLeave);
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+
+    return function () {
+      var _iterator2 = _createForOfIteratorHelper(children),
+          _step2;
+
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var child = _step2.value;
+          child.current.removeEventListener('mouseenter', handleMouseEnter);
+          child.current.removeEventListener('mouseleave', handleMouseLeave);
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+    };
+  }, [children]);
+};
+
+exports.useActionWithin = useActionWithin;
+//# sourceMappingURL=HoverWithin.cjs.map

package/dist/common/HoverWithin.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/common/HoverWithin.ts"],"names":["useActionWithin","ref","children","handleMouseEnter","e","current","classList","add","handleMouseLeave","remove","React","useEffect","child","addEventListener","removeEventListener"],"mappings":";;;;;;;;;AAAA;;;;;;;;AAEO,IAAMA,eAAe,GAAG,SAAlBA,eAAkB,CAACC,GAAD,EAAWC,QAAX,EAAuD;AAEpF,MAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,CAAD,EAAmB;AAC1CH,IAAAA,GAAG,CAACI,OAAJ,CAAYC,SAAZ,CAAsBC,GAAtB,CAA0B,eAA1B;AACD,GAFD;;AAIA,MAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACJ,CAAD,EAAmB;AAC1CH,IAAAA,GAAG,CAACI,OAAJ,CAAYC,SAAZ,CAAsBG,MAAtB,CAA6B,eAA7B;AACD,GAFD;;AAKAC,iBAAMC,SAAN,CAAgB,YAAM;AAAA,+CACFT,QADE;AAAA;;AAAA;AACpB,0DAA4B;AAAA,YAAnBU,KAAmB;AAC1BA,QAAAA,KAAK,CAACP,OAAN,CAAcQ,gBAAd,CAA+B,YAA/B,EAA6CV,gBAA7C;AACAS,QAAAA,KAAK,CAACP,OAAN,CAAcQ,gBAAd,CAA+B,YAA/B,EAA6CL,gBAA7C;AACD;AAJmB;AAAA;AAAA;AAAA;AAAA;;AAMpB,WAAO,YAAM;AAAA,kDACON,QADP;AAAA;;AAAA;AACX,+DAA4B;AAAA,cAAnBU,KAAmB;AAC1BA,UAAAA,KAAK,CAACP,OAAN,CAAcS,mBAAd,CAAkC,YAAlC,EAAgDX,gBAAhD;AACAS,UAAAA,KAAK,CAACP,OAAN,CAAcS,mBAAd,CAAkC,YAAlC,EAAgDN,gBAAhD;AACD;AAJU;AAAA;AAAA;AAAA;AAAA;AAKZ,KALD;AAMD,GAZD,EAYG,CAACN,QAAD,CAZH;AAaD,CAxBM","sourcesContent":["import React from 'react';\n\nexport const useActionWithin = (ref: any, children: React.MutableRefObject<any>[]) => {\n\n  const handleMouseEnter = (e: MouseEvent) => {\n    ref.current.classList.add('action-within');\n  };\n\n  const handleMouseLeave = (e: MouseEvent) => {\n    ref.current.classList.remove('action-within');\n  };\n\n\n  React.useEffect(() => {\n    for (let child of children) {\n      child.current.addEventListener('mouseenter', handleMouseEnter);\n      child.current.addEventListener('mouseleave', handleMouseLeave);\n    }\n\n    return () => {\n      for (let child of children) {\n        child.current.removeEventListener('mouseenter', handleMouseEnter);\n        child.current.removeEventListener('mouseleave', handleMouseLeave);\n      }\n    };\n  }, [children]);\n};\n"],"file":"HoverWithin.cjs"}

package/dist/common/HoverWithin.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const useActionWithin: (ref: any, children: React.MutableRefObject<any>[]) => void;

package/dist/common/HoverWithin.js

@@ -0,0 +1,51 @@
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+import React from 'react';
+export var useActionWithin = function useActionWithin(ref, children) {
+  var handleMouseEnter = function handleMouseEnter(e) {
+    ref.current.classList.add('action-within');
+  };
+
+  var handleMouseLeave = function handleMouseLeave(e) {
+    ref.current.classList.remove('action-within');
+  };
+
+  React.useEffect(function () {
+    var _iterator = _createForOfIteratorHelper(children),
+        _step;
+
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var child = _step.value;
+        child.current.addEventListener('mouseenter', handleMouseEnter);
+        child.current.addEventListener('mouseleave', handleMouseLeave);
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+
+    return function () {
+      var _iterator2 = _createForOfIteratorHelper(children),
+          _step2;
+
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var child = _step2.value;
+          child.current.removeEventListener('mouseenter', handleMouseEnter);
+          child.current.removeEventListener('mouseleave', handleMouseLeave);
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+    };
+  }, [children]);
+};
+//# sourceMappingURL=HoverWithin.js.map

package/dist/common/HoverWithin.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/common/HoverWithin.ts"],"names":["React","useActionWithin","ref","children","handleMouseEnter","e","current","classList","add","handleMouseLeave","remove","useEffect","child","addEventListener","removeEventListener"],"mappings":";;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAO,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,CAACC,GAAD,EAAWC,QAAX,EAAuD;AAEpF,MAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,CAAD,EAAmB;AAC1CH,IAAAA,GAAG,CAACI,OAAJ,CAAYC,SAAZ,CAAsBC,GAAtB,CAA0B,eAA1B;AACD,GAFD;;AAIA,MAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACJ,CAAD,EAAmB;AAC1CH,IAAAA,GAAG,CAACI,OAAJ,CAAYC,SAAZ,CAAsBG,MAAtB,CAA6B,eAA7B;AACD,GAFD;;AAKAV,EAAAA,KAAK,CAACW,SAAN,CAAgB,YAAM;AAAA,+CACFR,QADE;AAAA;;AAAA;AACpB,0DAA4B;AAAA,YAAnBS,KAAmB;AAC1BA,QAAAA,KAAK,CAACN,OAAN,CAAcO,gBAAd,CAA+B,YAA/B,EAA6CT,gBAA7C;AACAQ,QAAAA,KAAK,CAACN,OAAN,CAAcO,gBAAd,CAA+B,YAA/B,EAA6CJ,gBAA7C;AACD;AAJmB;AAAA;AAAA;AAAA;AAAA;;AAMpB,WAAO,YAAM;AAAA,kDACON,QADP;AAAA;;AAAA;AACX,+DAA4B;AAAA,cAAnBS,KAAmB;AAC1BA,UAAAA,KAAK,CAACN,OAAN,CAAcQ,mBAAd,CAAkC,YAAlC,EAAgDV,gBAAhD;AACAQ,UAAAA,KAAK,CAACN,OAAN,CAAcQ,mBAAd,CAAkC,YAAlC,EAAgDL,gBAAhD;AACD;AAJU;AAAA;AAAA;AAAA;AAAA;AAKZ,KALD;AAMD,GAZD,EAYG,CAACN,QAAD,CAZH;AAaD,CAxBM","sourcesContent":["import React from 'react';\n\nexport const useActionWithin = (ref: any, children: React.MutableRefObject<any>[]) => {\n\n  const handleMouseEnter = (e: MouseEvent) => {\n    ref.current.classList.add('action-within');\n  };\n\n  const handleMouseLeave = (e: MouseEvent) => {\n    ref.current.classList.remove('action-within');\n  };\n\n\n  React.useEffect(() => {\n    for (let child of children) {\n      child.current.addEventListener('mouseenter', handleMouseEnter);\n      child.current.addEventListener('mouseleave', handleMouseLeave);\n    }\n\n    return () => {\n      for (let child of children) {\n        child.current.removeEventListener('mouseenter', handleMouseEnter);\n        child.current.removeEventListener('mouseleave', handleMouseLeave);\n      }\n    };\n  }, [children]);\n};\n"],"file":"HoverWithin.js"}

package/dist/common/index.cjs

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "defaultOnMouseDownHandler", {
     return _EventHandlers.defaultOnMouseDownHandler;
   }
 });
+Object.defineProperty(exports, "useActionWithin", {
+  enumerable: true,
+  get: function get() {
+    return _HoverWithin.useActionWithin;
+  }
+});
 Object.defineProperty(exports, "useFocusVisibleRef", {
   enumerable: true,
   get: function get() {
@@ -27,4 +33,6 @@ var _InputStyling = require("./InputStyling");
 var _EventHandlers = require("./EventHandlers");
 
 var _FocusVisible = require("./FocusVisible");
+
+var _HoverWithin = require("./HoverWithin");
 //# sourceMappingURL=index.cjs.map

package/dist/common/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/common/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA","sourcesContent":["export {CommonInteractionStyling} from './InputStyling';\nexport {defaultOnMouseDownHandler} from './EventHandlers'\nexport {useFocusVisibleRef} from './FocusVisible';\n"],"file":"index.cjs"}
+{"version":3,"sources":["../../src/common/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA","sourcesContent":["export {CommonInteractionStyling} from './InputStyling';\nexport {defaultOnMouseDownHandler} from './EventHandlers'\nexport {useFocusVisibleRef} from './FocusVisible';\nexport {useActionWithin} from './HoverWithin';\n"],"file":"index.cjs"}

package/dist/common/index.d.ts

@@ -1,3 +1,4 @@
 export { CommonInteractionStyling } from './InputStyling';
 export { defaultOnMouseDownHandler } from './EventHandlers';
 export { useFocusVisibleRef } from './FocusVisible';
+export { useActionWithin } from './HoverWithin';

package/dist/common/index.js

@@ -1,4 +1,5 @@
 export { CommonInteractionStyling } from './InputStyling';
 export { defaultOnMouseDownHandler } from './EventHandlers';
 export { useFocusVisibleRef } from './FocusVisible';
+export { useActionWithin } from './HoverWithin';
 //# sourceMappingURL=index.js.map

package/dist/common/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/common/index.ts"],"names":["CommonInteractionStyling","defaultOnMouseDownHandler","useFocusVisibleRef"],"mappings":"AAAA,SAAQA,wBAAR,QAAuC,gBAAvC;AACA,SAAQC,yBAAR,QAAwC,iBAAxC;AACA,SAAQC,kBAAR,QAAiC,gBAAjC","sourcesContent":["export {CommonInteractionStyling} from './InputStyling';\nexport {defaultOnMouseDownHandler} from './EventHandlers'\nexport {useFocusVisibleRef} from './FocusVisible';\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/common/index.ts"],"names":["CommonInteractionStyling","defaultOnMouseDownHandler","useFocusVisibleRef","useActionWithin"],"mappings":"AAAA,SAAQA,wBAAR,QAAuC,gBAAvC;AACA,SAAQC,yBAAR,QAAwC,iBAAxC;AACA,SAAQC,kBAAR,QAAiC,gBAAjC;AACA,SAAQC,eAAR,QAA8B,eAA9B","sourcesContent":["export {CommonInteractionStyling} from './InputStyling';\nexport {defaultOnMouseDownHandler} from './EventHandlers'\nexport {useFocusVisibleRef} from './FocusVisible';\nexport {useActionWithin} from './HoverWithin';\n"],"file":"index.js"}

package/dist/index.cjs

@@ -517,5 +517,19 @@ Object.keys(_Tag).forEach(function (key) {
   });
 });
 
+var _Image = require("./Image");
+
+Object.keys(_Image).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Image[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Image[key];
+    }
+  });
+});
+
 var _assets = require("./assets");
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -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","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 {LaerdalLogo} from './assets';\n"],"file":"index.cjs"}
+{"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","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 { LaerdalLogo } from './assets';\n"],"file":"index.cjs"}

package/dist/index.d.ts

@@ -34,4 +34,5 @@ export * from './LinearProgress';
 export * from './SegmentControl';
 export * from './Card';
 export * from './Tag';
+export * from './Image';
 export { LaerdalLogo } from './assets';

package/dist/index.js

@@ -34,5 +34,6 @@ export * from './LinearProgress';
 export * from './SegmentControl';
 export * from './Card';
 export * from './Tag';
+export * from './Image';
 export { LaerdalLogo } from './assets';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -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,OAAd;AACA,SAAQA,WAAR,QAA0B,UAA1B","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 {LaerdalLogo} from './assets';\n"],"file":"index.js"}
+{"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,SAASA,WAAT,QAA4B,UAA5B","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 { LaerdalLogo } from './assets';\n"],"file":"index.js"}

package/dist/styles/index.cjs

@@ -279,10 +279,16 @@ var _typography = require("./typography");
 
 var _global = _interopRequireDefault(require("./global"));
 
+var _types = require("../types");
+
 var _zIndexes = require("./z-indexes");
 
 var _templateObject;
 
-var scrollBarStyling = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* width */\n  ::-webkit-scrollbar {\n    width: 4px;\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ", ";\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"])), _colors.default.white, _colors.default.neutral_200, _colors.default.neutral_400);
+var scrollBarStyling = function scrollBarStyling() {
+  var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _types.Size.Small;
+  return (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  \n  ::-webkit-scrollbar {\n    width: ", ";\n    height: ", ";\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ", ";\n    border-radius: 6px;\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 4px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:active {\n    background: ", ";\n  }\n"])), size == _types.Size.Medium ? '6px' : '4px', size == _types.Size.Medium ? '6px' : '4px', _colors.default.neutral_100, _colors.default.neutral_500, _colors.default.primary_700, _colors.default.primary_800);
+};
+
 exports.scrollBarStyling = scrollBarStyling;
 //# sourceMappingURL=index.cjs.map

package/dist/styles/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/styles/index.ts"],"names":["scrollBarStyling","css","COLORS","white","neutral_200","neutral_400"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AAQA;;AAoCA;;;;AAxBO,IAAMA,gBAAgB,OAAGC,qBAAH,ybASXC,gBAAOC,KATI,EAcXD,gBAAOE,WAdI,EAoBXF,gBAAOG,WApBI,CAAtB","sourcesContent":["import { css } from 'styled-components';\nimport COLORS from './colors';\nimport BREAKPOINTS from './breakpoints';\nimport { BOXSHADOWS } from './shadowstyles';\n\nimport { TYPOGRAPHY } from './typography';\nimport { HeadlineXL, HeadlineL, HeadlineM, HeadlineS, HeadlineXS, HeadlineXXS } from './typography';\nimport { ParagraphTextStyle, ParagraphXL, ParagraphL, ParagraphM, ParagraphS, ParagraphXS } from './typography';\nimport { ComponentTextStyle, ComponentXL, ComponentL, ComponentM, ComponentS, ComponentXS, ComponentXXS, ComponentResponsive } from './typography';\nimport { ComponentXLStyling, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling } from './typography';\nimport { ParagraphXlStyling, ParagraphLStyling, ParagraphMStyling, ParagraphSStyling, ParagraphXSStyling } from './typography';\nimport { HeadlineXLStyling, HeadlineLStyling, HeadlineMStyling, HeadlineSStyling, HeadlineXSStyling, HeadlineXXSStyling } from './typography';\n\nimport globalStyles from './global';\n\nexport { COLORS, BREAKPOINTS, BOXSHADOWS, globalStyles };\n\nexport { TYPOGRAPHY };\nexport { HeadlineXL, HeadlineL, HeadlineM, HeadlineS, HeadlineXS, HeadlineXXS };\nexport { ParagraphTextStyle, ParagraphXL, ParagraphL, ParagraphM, ParagraphS, ParagraphXS };\nexport { ComponentTextStyle, ComponentXL, ComponentL, ComponentM, ComponentS, ComponentXS, ComponentXXS, ComponentResponsive };\nexport { ComponentXLStyling, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling };\nexport { ParagraphXlStyling, ParagraphLStyling, ParagraphMStyling, ParagraphSStyling, ParagraphXSStyling };\nexport { HeadlineXLStyling, HeadlineLStyling, HeadlineMStyling, HeadlineSStyling, HeadlineXSStyling, HeadlineXXSStyling };\n\nexport const scrollBarStyling = css`\n  /* width */\n  ::-webkit-scrollbar {\n    width: 4px;\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ${COLORS.white};\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ${COLORS.neutral_200};\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ${COLORS.neutral_400};\n  }\n`;\n\nexport {Z_INDEXES} from './z-indexes'\n"],"file":"index.cjs"}
+{"version":3,"sources":["../../src/styles/index.ts"],"names":["scrollBarStyling","size","Size","Small","css","Medium","COLORS","neutral_100","neutral_500","primary_700","primary_800"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AAQA;;AACA;;AA2CA;;;;AA/BO,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAmB;AAAA,MAACC,IAAD,uEAAkCC,YAAKC,KAAvC;AAAA,aAAiDC,qBAAjD,wjBAGnBH,IAAI,IAAIC,YAAKG,MAAb,GAAsB,KAAtB,GAA8B,KAHX,EAIlBJ,IAAI,IAAIC,YAAKG,MAAb,GAAsB,KAAtB,GAA8B,KAJZ,EAUdC,gBAAOC,WAVO,EAgBdD,gBAAOE,WAhBO,EAsBdF,gBAAOG,WAtBO,EA2BdH,gBAAOI,WA3BO;AAAA,CAAzB","sourcesContent":["import { css } from 'styled-components';\nimport COLORS from './colors';\nimport BREAKPOINTS from './breakpoints';\nimport { BOXSHADOWS } from './shadowstyles';\n\nimport { TYPOGRAPHY } from './typography';\nimport { HeadlineXL, HeadlineL, HeadlineM, HeadlineS, HeadlineXS, HeadlineXXS } from './typography';\nimport { ParagraphTextStyle, ParagraphXL, ParagraphL, ParagraphM, ParagraphS, ParagraphXS } from './typography';\nimport { ComponentTextStyle, ComponentXL, ComponentL, ComponentM, ComponentS, ComponentXS, ComponentXXS, ComponentResponsive } from './typography';\nimport { ComponentXLStyling, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling } from './typography';\nimport { ParagraphXlStyling, ParagraphLStyling, ParagraphMStyling, ParagraphSStyling, ParagraphXSStyling } from './typography';\nimport { HeadlineXLStyling, HeadlineLStyling, HeadlineMStyling, HeadlineSStyling, HeadlineXSStyling, HeadlineXXSStyling } from './typography';\n\nimport globalStyles from './global';\nimport { Size } from '../types';\n\nexport { COLORS, BREAKPOINTS, BOXSHADOWS, globalStyles };\n\nexport { TYPOGRAPHY };\nexport { HeadlineXL, HeadlineL, HeadlineM, HeadlineS, HeadlineXS, HeadlineXXS };\nexport { ParagraphTextStyle, ParagraphXL, ParagraphL, ParagraphM, ParagraphS, ParagraphXS };\nexport { ComponentTextStyle, ComponentXL, ComponentL, ComponentM, ComponentS, ComponentXS, ComponentXXS, ComponentResponsive };\nexport { ComponentXLStyling, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling };\nexport { ParagraphXlStyling, ParagraphLStyling, ParagraphMStyling, ParagraphSStyling, ParagraphXSStyling };\nexport { HeadlineXLStyling, HeadlineLStyling, HeadlineMStyling, HeadlineSStyling, HeadlineXSStyling, HeadlineXXSStyling };\n\nexport const scrollBarStyling = (size: Size.Small | Size.Medium = Size.Small) => css`\n  \n  ::-webkit-scrollbar {\n    width: ${size == Size.Medium ? '6px' : '4px'};\n    height: ${size == Size.Medium ? '6px' : '4px'};\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ${COLORS.neutral_100};\n    border-radius: 6px;\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ${COLORS.neutral_500};\n    border-radius: 4px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ${COLORS.primary_700};\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:active {\n    background: ${COLORS.primary_800};\n  }\n`;\n\nexport {Z_INDEXES} from './z-indexes'\n"],"file":"index.cjs"}

package/dist/styles/index.d.ts

@@ -9,6 +9,7 @@ import { ComponentXLStyling, ComponentLStyling, ComponentMStyling, ComponentSSty
 import { ParagraphXlStyling, ParagraphLStyling, ParagraphMStyling, ParagraphSStyling, ParagraphXSStyling } from './typography';
 import { HeadlineXLStyling, HeadlineLStyling, HeadlineMStyling, HeadlineSStyling, HeadlineXSStyling, HeadlineXXSStyling } from './typography';
 import globalStyles from './global';
+import { Size } from '../types';
 export { COLORS, BREAKPOINTS, BOXSHADOWS, globalStyles };
 export { TYPOGRAPHY };
 export { HeadlineXL, HeadlineL, HeadlineM, HeadlineS, HeadlineXS, HeadlineXXS };
@@ -17,5 +18,5 @@ export { ComponentTextStyle, ComponentXL, ComponentL, ComponentM, ComponentS, Co
 export { ComponentXLStyling, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling };
 export { ParagraphXlStyling, ParagraphLStyling, ParagraphMStyling, ParagraphSStyling, ParagraphXSStyling };
 export { HeadlineXLStyling, HeadlineLStyling, HeadlineMStyling, HeadlineSStyling, HeadlineXSStyling, HeadlineXXSStyling };
-export declare const scrollBarStyling: import("styled-components").FlattenSimpleInterpolation;
+export declare const scrollBarStyling: (size?: Size.Small | Size.Medium) => import("styled-components").FlattenSimpleInterpolation;
 export { Z_INDEXES } from './z-indexes';

package/dist/styles/index.js

@@ -14,6 +14,7 @@ import { ComponentXLStyling, ComponentLStyling, ComponentMStyling, ComponentSSty
 import { ParagraphXlStyling, ParagraphLStyling, ParagraphMStyling, ParagraphSStyling, ParagraphXSStyling } from './typography';
 import { HeadlineXLStyling, HeadlineLStyling, HeadlineMStyling, HeadlineSStyling, HeadlineXSStyling, HeadlineXXSStyling } from './typography';
 import globalStyles from './global';
+import { Size } from '../types';
 export { COLORS, BREAKPOINTS, BOXSHADOWS, globalStyles };
 export { TYPOGRAPHY };
 export { HeadlineXL, HeadlineL, HeadlineM, HeadlineS, HeadlineXS, HeadlineXXS };
@@ -22,6 +23,9 @@ export { ComponentTextStyle, ComponentXL, ComponentL, ComponentM, ComponentS, Co
 export { ComponentXLStyling, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling };
 export { ParagraphXlStyling, ParagraphLStyling, ParagraphMStyling, ParagraphSStyling, ParagraphXSStyling };
 export { HeadlineXLStyling, HeadlineLStyling, HeadlineMStyling, HeadlineSStyling, HeadlineXSStyling, HeadlineXXSStyling };
-export var scrollBarStyling = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* width */\n  ::-webkit-scrollbar {\n    width: 4px;\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ", ";\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"])), COLORS.white, COLORS.neutral_200, COLORS.neutral_400);
+export var scrollBarStyling = function scrollBarStyling() {
+  var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : Size.Small;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  \n  ::-webkit-scrollbar {\n    width: ", ";\n    height: ", ";\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ", ";\n    border-radius: 6px;\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 4px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:active {\n    background: ", ";\n  }\n"])), size == Size.Medium ? '6px' : '4px', size == Size.Medium ? '6px' : '4px', COLORS.neutral_100, COLORS.neutral_500, COLORS.primary_700, COLORS.primary_800);
+};
 export { Z_INDEXES } from './z-indexes';
 //# sourceMappingURL=index.js.map