@laerdal/life-react-components 2.3.1-dev.1 → 2.3.1-dev.2

package/dist/Panel/Panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.js","names":["React","styled","BREAKPOINTS","COLORS","IconButton","SystemIcons","LinearProgress","LinearProgressType","useMediaMatch","Size","Wrapper","div","neutral_20","neutral_600","LARGE","Media","Body","Footer","Panel","props","useState","currentImage","setCurrentImage","isLargeScreen","replace","rest","order","undefined","media","title","content","items","type","moveLeft","length","moveRight","currentItem","className","fit","src","alt","Medium","Small","Dots"],"sources":["../../src/Panel/Panel.tsx"],"sourcesContent":["import React from 'react';\nimport styled from \"styled-components\";\nimport {BREAKPOINTS, COLORS} from \"../styles\";\nimport {IconButton} from \"../Button\";\nimport {SystemIcons} from \"../icons\";\nimport {LinearProgress, LinearProgressType} from \"../LinearProgress\";\nimport {useMediaMatch} from \"rooks\";\nimport {Size} from \"../types\";\n\nconst Wrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  background: ${COLORS.neutral_20};\n  min-height: 100%;\n  align-items: flex-end;\n  box-sizing: border-box;\n  overflow: hidden;\n\n  gap: 24px;\n  padding: 56px 32px 120px 32px;\n\n  p {\n    flex: 1;\n    color: ${COLORS.neutral_600};\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    gap: 32px;\n    padding: 56px 64px 120px 64px;\n  }\n\n  &.reverse {\n    align-items: flex-start;\n  }\n`;\n\nconst Media = styled.div`\n  display: flex;\n  width: 320px;\n  height: 200px;\n\n\n  img {\n    object-fit: contain;\n  }\n\n  img.fit {\n    object-fit: contain;\n  }\n\n  img.fill {\n    object-fit: cover;\n  }\n\n  max-width: 100%;\n\n  img {\n    max-width: 100%;\n    width: 320px;\n    height: 200px;\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    width: 488px;\n    height: 280px;\n\n    img {\n      width: 488px;\n      height: 280px;\n    }\n  }\n\n`;\n\nconst Body = styled.div`\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n\n  max-width: 320px;\n\n  ${BREAKPOINTS.LARGE} {\n    max-width: 488px;\n  }\n\n`;\nconst Footer = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n\n  max-width: 320px;\n\n  ${BREAKPOINTS.LARGE} {\n    max-width: 488px;\n  }\n\n  .progress {\n    width: max-content;\n  }\n`;\n\ninterface BasePanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n  type?: 'default' | 'carousel';\n}\n\ninterface PanelContent {\n  media?: { type: 'image', src: string; alt: string, fit?: 'fill' | 'fit' } | { type: 'custom', content: React.ReactNode };\n  title?: string;\n  content?: React.ReactNode;\n}\n\ninterface DefaultPanelProps extends BasePanelProps, PanelContent {\n  type?: 'default';\n  order?: 'default' | 'reverse';\n}\n\ninterface CarouselPanelProps extends BasePanelProps {\n  type: 'carousel';\n  order?: 'default' | 'reverse';\n  items?: PanelContent[];\n}\n\nexport type PanelProps = DefaultPanelProps | CarouselPanelProps;\n\nexport const Panel = (props: PanelProps) => {\n\n  const [currentImage, setCurrentImage] = React.useState(0);\n  const isLargeScreen = useMediaMatch(BREAKPOINTS.LARGE.replace('@media ', ''));\n\n  let rest: React.HTMLAttributes<HTMLDivElement> = {};\n  let order = undefined;\n  let media = undefined;\n  let title = '';\n  let content = undefined;\n  let items: PanelContent[] = [];\n\n\n  switch (props.type) {\n    case 'carousel':\n      ({items = [], order, ...rest} = props);\n      break;\n    case 'default':\n    default:\n      ({media, content, title = '', order, ...rest} = props)\n      break;\n  }\n\n\n  const moveLeft = () => {\n    props.type === 'carousel' && setCurrentImage(currentImage === 0 ? items.length - 1 : currentImage - 1);\n  }\n  const moveRight = () => {\n    props.type === 'carousel' && setCurrentImage(currentImage + 1 > items.length - 1 ? 0 : currentImage + 1);\n  }\n\n  const currentItem: PanelContent = props.type === 'carousel' ? items[currentImage] : {media, title, content};\n\n  return (\n    <Wrapper {...rest} className={`${rest.className || ''} ${order || ''} `}>\n      <Media>\n        {\n          currentItem.media?.type === 'image' &&\n            <img className={currentItem.media.fit} src={currentItem.media.src} alt={currentItem.media.alt}/>\n        }\n        {\n          currentItem.media?.type === 'custom' && currentItem.media.content\n        }\n      </Media>\n      <Body>\n        <h1>{currentItem.title}</h1>\n        <p>{currentItem.content}</p>\n      </Body>\n      {\n        props.type === 'carousel' &&\n          <Footer>\n              <IconButton action={moveLeft} variant={'secondary'} shape={'circular'}>\n                  <SystemIcons.ChevronLeft/>\n              </IconButton>\n              <LinearProgress size={isLargeScreen ? Size.Medium : Size.Small}\n                              className={'progress'}\n                              value={currentImage + 1}\n                              max={props.items!.length }\n                              type={LinearProgressType.Dots}/>\n              <IconButton action={moveRight} variant={'secondary'} shape={'circular'}>\n                  <SystemIcons.ChevronRight/>\n              </IconButton>\n          </Footer>\n      }\n    </Wrapper>\n  )\n};\n"],"mappings":"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"}

package/dist/Panel/index.cjs

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Panel = require("./Panel");
+Object.keys(_Panel).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Panel[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Panel[key];
+    }
+  });
+});
+//# sourceMappingURL=index.cjs.map

package/dist/Panel/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":[],"sources":["../../src/Panel/index.ts"],"sourcesContent":["export * from './Panel';\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/dist/Panel/index.d.ts

@@ -0,0 +1 @@
+export * from './Panel';

package/dist/Panel/index.js

@@ -0,0 +1,2 @@
+export * from './Panel';
+//# sourceMappingURL=index.js.map

package/dist/Panel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Panel/index.ts"],"sourcesContent":["export * from './Panel';\n"],"mappings":"AAAA,cAAc,SAAS"}

package/dist/Tabs/TabLink.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabLink.cjs","names":["StyledTabLink","styled","NavLink","COLORS","neutral_600","props","disabled","neutral_100","focusStyles","Z_INDEXES","active","neutral_20","primary_20","hover","primary_600","primary_100","primary_800","primary_500","white","neutral_300","OptionalLineWrapperWithIcon","div","TopWrapper","TextContainer","StyledNotification","OptionalLineWrapper","Wrapper","TabLink","to","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","testId","showNotificationDot","size","Size","Small","variant","ref","React","useRef","useState","activeState","setActiveState","toString","isActive","defaultOnMouseDownHandler","e"],"sources":["../../src/Tabs/TabLink.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavLink, NavLinkProps } from 'react-router-dom';\nimport { useLocation } from 'react-router';\nimport styled from 'styled-components';\nimport { NotificationDot } from '../NotificationDot';\nimport { BaseProps } from '../icons';\nimport { Size } from '../types';\nimport { COLORS, focusStyles } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { defaultOnMouseDownHandler } from '../common';\nimport { useState } from 'react';\n\ntype TabLinkProps = {\n  disabled?: boolean;\n  requiredLine: string;\n  optionalLine?: string;\n  OptionalLineIcon?: React.ReactNode; //React.FunctionComponent<BaseProps>;\n  onLinkClick?: (e: React.MouseEvent) => void;\n  testId?: string;\n  showNotificationDot?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n  variant?: 'positive' | 'critical';\n} & NavLinkProps;\n\ntype StyledTabLinkProps = {\n  disabled?: boolean;\n};\n\nconst StyledTabLink = styled(NavLink)<StyledTabLinkProps>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  font-size: 16px;\n  line-height: 120%;\n  color: ${COLORS.neutral_600};\n\n  background-color: ${(props) => (props.disabled ? COLORS.neutral_100 : 'transparent')};\n  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n  border-left: 1px solid transparent;\n  text-decoration: none;\n  position: relative;\n  border-radius: 2px;\n\n  &:not(:last-child) {\n    margin-bottom: 4px;\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &.active {\n    z-index: ${Z_INDEXES.active};\n    background-color: ${COLORS.neutral_20};\n  }\n\n  &.active:hover {\n    background-color: ${COLORS.primary_20};\n  }\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_600};\n  }\n\n  &:active {\n    z-index: ${Z_INDEXES.active};\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n\n  &.active {\n    &::after {\n      position: absolute;\n      content: ' ';\n      width: 4px;\n      top: 0;\n      bottom: 0;\n      left: -1px;\n      background-color: ${COLORS.primary_500};\n\n      border-radius: 2px;\n    }\n  }\n\n  &.active:hover {\n    &::after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n\n  &.active:active {\n    background-color: ${COLORS.primary_100};\n\n    &::after {\n      background-color: ${COLORS.primary_800};\n    }\n  }\n\n  &.disabled {\n    background-color: ${COLORS.white};\n    color: ${COLORS.neutral_300};\n\n    span {\n      color: ${COLORS.neutral_300};\n    }\n\n    &::after {\n      background-color: ${COLORS.neutral_300};\n    }\n  }\n`;\n\nconst OptionalLineWrapperWithIcon = styled.div`\n  display: flex;\n  flex-direction: row;\n\n  span {\n    margin: 0 0 0 4px !important;\n    font-size: 12px;\n    line-height: 16px;\n  }\n`;\n\nconst TopWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n\n  span:not(:only-child) {\n    width: calc(100% - 32px);\n  }\n`;\n\nconst TextContainer = styled.div`\n  width: 100%;\n  margin: auto 0 auto 16px !important;\n`;\n\nconst StyledNotification = styled.div`\n  margin: 0 15px 0 0 !important;\n`;\n\nconst OptionalLineWrapper = styled.div`\n  font-size: 12px;\n`;\n\nconst Wrapper = styled.div`\n  &.disabled {\n    cursor: not-allowed;\n\n    ${StyledTabLink} {\n      pointer-events: none;\n    }\n  }\n`;\n\nconst TabLink = ({\n  to,\n  disabled = false,\n  requiredLine,\n  optionalLine,\n  OptionalLineIcon,\n  onLinkClick,\n  testId,\n  showNotificationDot = false,\n  size = Size.Small,\n  variant = 'critical',\n}: TabLinkProps) => {\n  const ref = React.useRef<any>(null);\n  const [activeState, setActiveState] = useState<boolean>(false);\n  return (\n    <Wrapper className={disabled ? 'disabled' : ''}>\n      <StyledTabLink\n        to={to.toString()}\n        disabled={disabled}\n        className={({ isActive }) => {\n          if(isActive != activeState)\n            setActiveState(isActive);\n          return (isActive ? 'active ' : '') + (disabled ? 'disabled' : '');\n        }}\n        onMouseDown={defaultOnMouseDownHandler}\n        tabIndex={disabled ? -1 : 0}\n        role=\"tab\"\n        aria-selected={activeState}\n        onClick={(e: React.MouseEvent) => !disabled && onLinkClick && onLinkClick(e)}\n        ref={ref}\n        data-testid={testId}>\n        <TextContainer>\n          <TopWrapper>\n            <span>{requiredLine}</span>\n          </TopWrapper>\n          {optionalLine && OptionalLineIcon ? (\n            <OptionalLineWrapperWithIcon>\n              {OptionalLineIcon}\n              {!!optionalLine && <span>{optionalLine}</span>}\n            </OptionalLineWrapperWithIcon>\n          ) : optionalLine ? (\n            <OptionalLineWrapper>\n              <span>{optionalLine}</span>\n            </OptionalLineWrapper>\n          ) : (\n            <></>\n          )}\n        </TextContainer>\n        <StyledNotification>{showNotificationDot && <NotificationDot testId=\"NotificationDot\" size={size} variant={variant} />}</StyledNotification>\n      </StyledTabLink>\n    </Wrapper>\n  );\n};\n\nexport default TabLink;\n"],"mappings":"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"}
+{"version":3,"file":"TabLink.cjs","names":["StyledTabLink","styled","NavLink","COLORS","neutral_600","props","disabled","neutral_100","focusStyles","Z_INDEXES","active","neutral_20","primary_20","hover","primary_600","primary_100","primary_800","primary_500","white","neutral_300","OptionalLineWrapperWithIcon","div","TopWrapper","TextContainer","StyledNotification","OptionalLineWrapper","Wrapper","TabLink","to","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","testId","showNotificationDot","size","Size","Small","variant","ref","React","useRef","useState","activeState","setActiveState","toString","isActive","defaultOnMouseDownHandler","e"],"sources":["../../src/Tabs/TabLink.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavLink, NavLinkProps } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { NotificationDot } from '../NotificationDot';\nimport { Size } from '../types';\nimport { COLORS, focusStyles } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { defaultOnMouseDownHandler } from '../common';\nimport { useState } from 'react';\n\ntype TabLinkProps = {\n  disabled?: boolean;\n  requiredLine: string;\n  optionalLine?: string;\n  OptionalLineIcon?: React.ReactNode; //React.FunctionComponent<BaseProps>;\n  onLinkClick?: (e: React.MouseEvent) => void;\n  testId?: string;\n  showNotificationDot?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n  variant?: 'positive' | 'critical';\n} & NavLinkProps;\n\ntype StyledTabLinkProps = {\n  disabled?: boolean;\n};\n\nconst StyledTabLink = styled(NavLink)<StyledTabLinkProps>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  font-size: 16px;\n  line-height: 120%;\n  color: ${COLORS.neutral_600};\n\n  background-color: ${(props) => (props.disabled ? COLORS.neutral_100 : 'transparent')};\n  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n  border-left: 1px solid transparent;\n  text-decoration: none;\n  position: relative;\n  border-radius: 2px;\n\n  &:not(:last-child) {\n    margin-bottom: 4px;\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &.active {\n    z-index: ${Z_INDEXES.active};\n    background-color: ${COLORS.neutral_20};\n  }\n\n  &.active:hover {\n    background-color: ${COLORS.primary_20};\n  }\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_600};\n  }\n\n  &:active {\n    z-index: ${Z_INDEXES.active};\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n\n  &.active {\n    &::after {\n      position: absolute;\n      content: ' ';\n      width: 4px;\n      top: 0;\n      bottom: 0;\n      left: -1px;\n      background-color: ${COLORS.primary_500};\n\n      border-radius: 2px;\n    }\n  }\n\n  &.active:hover {\n    &::after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n\n  &.active:active {\n    background-color: ${COLORS.primary_100};\n\n    &::after {\n      background-color: ${COLORS.primary_800};\n    }\n  }\n\n  &.disabled {\n    background-color: ${COLORS.white};\n    color: ${COLORS.neutral_300};\n\n    span {\n      color: ${COLORS.neutral_300};\n    }\n\n    &::after {\n      background-color: ${COLORS.neutral_300};\n    }\n  }\n`;\n\nconst OptionalLineWrapperWithIcon = styled.div`\n  display: flex;\n  flex-direction: row;\n\n  span {\n    margin: 0 0 0 4px !important;\n    font-size: 12px;\n    line-height: 16px;\n  }\n`;\n\nconst TopWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n\n  span:not(:only-child) {\n    width: calc(100% - 32px);\n  }\n`;\n\nconst TextContainer = styled.div`\n  width: 100%;\n  margin: auto 0 auto 16px !important;\n`;\n\nconst StyledNotification = styled.div`\n  margin: 0 15px 0 0 !important;\n`;\n\nconst OptionalLineWrapper = styled.div`\n  font-size: 12px;\n`;\n\nconst Wrapper = styled.div`\n  &.disabled {\n    cursor: not-allowed;\n\n    ${StyledTabLink} {\n      pointer-events: none;\n    }\n  }\n`;\n\nconst TabLink = ({\n  to,\n  disabled = false,\n  requiredLine,\n  optionalLine,\n  OptionalLineIcon,\n  onLinkClick,\n  testId,\n  showNotificationDot = false,\n  size = Size.Small,\n  variant = 'critical',\n}: TabLinkProps) => {\n  const ref = React.useRef<any>(null);\n  const [activeState, setActiveState] = useState<boolean>(false);\n  return (\n    <Wrapper className={disabled ? 'disabled' : ''}>\n      <StyledTabLink\n        to={to.toString()}\n        disabled={disabled}\n        className={({ isActive }) => {\n          if(isActive != activeState)\n            setActiveState(isActive);\n          return (isActive ? 'active ' : '') + (disabled ? 'disabled' : '');\n        }}\n        onMouseDown={defaultOnMouseDownHandler}\n        tabIndex={disabled ? -1 : 0}\n        role=\"tab\"\n        aria-selected={activeState}\n        onClick={(e: React.MouseEvent) => !disabled && onLinkClick && onLinkClick(e)}\n        ref={ref}\n        data-testid={testId}>\n        <TextContainer>\n          <TopWrapper>\n            <span>{requiredLine}</span>\n          </TopWrapper>\n          {optionalLine && OptionalLineIcon ? (\n            <OptionalLineWrapperWithIcon>\n              {OptionalLineIcon}\n              {!!optionalLine && <span>{optionalLine}</span>}\n            </OptionalLineWrapperWithIcon>\n          ) : optionalLine ? (\n            <OptionalLineWrapper>\n              <span>{optionalLine}</span>\n            </OptionalLineWrapper>\n          ) : (\n            <></>\n          )}\n        </TextContainer>\n        <StyledNotification>{showNotificationDot && <NotificationDot testId=\"NotificationDot\" size={size} variant={variant} />}</StyledNotification>\n      </StyledTabLink>\n    </Wrapper>\n  );\n};\n\nexport default TabLink;\n"],"mappings":"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"}

package/dist/Tabs/TabLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabLink.js","names":["React","NavLink","styled","NotificationDot","Size","COLORS","focusStyles","Z_INDEXES","defaultOnMouseDownHandler","useState","StyledTabLink","neutral_600","props","disabled","neutral_100","active","neutral_20","primary_20","hover","primary_600","primary_100","primary_800","primary_500","white","neutral_300","OptionalLineWrapperWithIcon","div","TopWrapper","TextContainer","StyledNotification","OptionalLineWrapper","Wrapper","TabLink","to","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","testId","showNotificationDot","size","Small","variant","ref","useRef","activeState","setActiveState","toString","isActive","e"],"sources":["../../src/Tabs/TabLink.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavLink, NavLinkProps } from 'react-router-dom';\nimport { useLocation } from 'react-router';\nimport styled from 'styled-components';\nimport { NotificationDot } from '../NotificationDot';\nimport { BaseProps } from '../icons';\nimport { Size } from '../types';\nimport { COLORS, focusStyles } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { defaultOnMouseDownHandler } from '../common';\nimport { useState } from 'react';\n\ntype TabLinkProps = {\n  disabled?: boolean;\n  requiredLine: string;\n  optionalLine?: string;\n  OptionalLineIcon?: React.ReactNode; //React.FunctionComponent<BaseProps>;\n  onLinkClick?: (e: React.MouseEvent) => void;\n  testId?: string;\n  showNotificationDot?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n  variant?: 'positive' | 'critical';\n} & NavLinkProps;\n\ntype StyledTabLinkProps = {\n  disabled?: boolean;\n};\n\nconst StyledTabLink = styled(NavLink)<StyledTabLinkProps>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  font-size: 16px;\n  line-height: 120%;\n  color: ${COLORS.neutral_600};\n\n  background-color: ${(props) => (props.disabled ? COLORS.neutral_100 : 'transparent')};\n  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n  border-left: 1px solid transparent;\n  text-decoration: none;\n  position: relative;\n  border-radius: 2px;\n\n  &:not(:last-child) {\n    margin-bottom: 4px;\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &.active {\n    z-index: ${Z_INDEXES.active};\n    background-color: ${COLORS.neutral_20};\n  }\n\n  &.active:hover {\n    background-color: ${COLORS.primary_20};\n  }\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_600};\n  }\n\n  &:active {\n    z-index: ${Z_INDEXES.active};\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n\n  &.active {\n    &::after {\n      position: absolute;\n      content: ' ';\n      width: 4px;\n      top: 0;\n      bottom: 0;\n      left: -1px;\n      background-color: ${COLORS.primary_500};\n\n      border-radius: 2px;\n    }\n  }\n\n  &.active:hover {\n    &::after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n\n  &.active:active {\n    background-color: ${COLORS.primary_100};\n\n    &::after {\n      background-color: ${COLORS.primary_800};\n    }\n  }\n\n  &.disabled {\n    background-color: ${COLORS.white};\n    color: ${COLORS.neutral_300};\n\n    span {\n      color: ${COLORS.neutral_300};\n    }\n\n    &::after {\n      background-color: ${COLORS.neutral_300};\n    }\n  }\n`;\n\nconst OptionalLineWrapperWithIcon = styled.div`\n  display: flex;\n  flex-direction: row;\n\n  span {\n    margin: 0 0 0 4px !important;\n    font-size: 12px;\n    line-height: 16px;\n  }\n`;\n\nconst TopWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n\n  span:not(:only-child) {\n    width: calc(100% - 32px);\n  }\n`;\n\nconst TextContainer = styled.div`\n  width: 100%;\n  margin: auto 0 auto 16px !important;\n`;\n\nconst StyledNotification = styled.div`\n  margin: 0 15px 0 0 !important;\n`;\n\nconst OptionalLineWrapper = styled.div`\n  font-size: 12px;\n`;\n\nconst Wrapper = styled.div`\n  &.disabled {\n    cursor: not-allowed;\n\n    ${StyledTabLink} {\n      pointer-events: none;\n    }\n  }\n`;\n\nconst TabLink = ({\n  to,\n  disabled = false,\n  requiredLine,\n  optionalLine,\n  OptionalLineIcon,\n  onLinkClick,\n  testId,\n  showNotificationDot = false,\n  size = Size.Small,\n  variant = 'critical',\n}: TabLinkProps) => {\n  const ref = React.useRef<any>(null);\n  const [activeState, setActiveState] = useState<boolean>(false);\n  return (\n    <Wrapper className={disabled ? 'disabled' : ''}>\n      <StyledTabLink\n        to={to.toString()}\n        disabled={disabled}\n        className={({ isActive }) => {\n          if(isActive != activeState)\n            setActiveState(isActive);\n          return (isActive ? 'active ' : '') + (disabled ? 'disabled' : '');\n        }}\n        onMouseDown={defaultOnMouseDownHandler}\n        tabIndex={disabled ? -1 : 0}\n        role=\"tab\"\n        aria-selected={activeState}\n        onClick={(e: React.MouseEvent) => !disabled && onLinkClick && onLinkClick(e)}\n        ref={ref}\n        data-testid={testId}>\n        <TextContainer>\n          <TopWrapper>\n            <span>{requiredLine}</span>\n          </TopWrapper>\n          {optionalLine && OptionalLineIcon ? (\n            <OptionalLineWrapperWithIcon>\n              {OptionalLineIcon}\n              {!!optionalLine && <span>{optionalLine}</span>}\n            </OptionalLineWrapperWithIcon>\n          ) : optionalLine ? (\n            <OptionalLineWrapper>\n              <span>{optionalLine}</span>\n            </OptionalLineWrapper>\n          ) : (\n            <></>\n          )}\n        </TextContainer>\n        <StyledNotification>{showNotificationDot && <NotificationDot testId=\"NotificationDot\" size={size} variant={variant} />}</StyledNotification>\n      </StyledTabLink>\n    </Wrapper>\n  );\n};\n\nexport default TabLink;\n"],"mappings":"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"}
+{"version":3,"file":"TabLink.js","names":["React","NavLink","styled","NotificationDot","Size","COLORS","focusStyles","Z_INDEXES","defaultOnMouseDownHandler","useState","StyledTabLink","neutral_600","props","disabled","neutral_100","active","neutral_20","primary_20","hover","primary_600","primary_100","primary_800","primary_500","white","neutral_300","OptionalLineWrapperWithIcon","div","TopWrapper","TextContainer","StyledNotification","OptionalLineWrapper","Wrapper","TabLink","to","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","testId","showNotificationDot","size","Small","variant","ref","useRef","activeState","setActiveState","toString","isActive","e"],"sources":["../../src/Tabs/TabLink.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavLink, NavLinkProps } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { NotificationDot } from '../NotificationDot';\nimport { Size } from '../types';\nimport { COLORS, focusStyles } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { defaultOnMouseDownHandler } from '../common';\nimport { useState } from 'react';\n\ntype TabLinkProps = {\n  disabled?: boolean;\n  requiredLine: string;\n  optionalLine?: string;\n  OptionalLineIcon?: React.ReactNode; //React.FunctionComponent<BaseProps>;\n  onLinkClick?: (e: React.MouseEvent) => void;\n  testId?: string;\n  showNotificationDot?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n  variant?: 'positive' | 'critical';\n} & NavLinkProps;\n\ntype StyledTabLinkProps = {\n  disabled?: boolean;\n};\n\nconst StyledTabLink = styled(NavLink)<StyledTabLinkProps>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  font-size: 16px;\n  line-height: 120%;\n  color: ${COLORS.neutral_600};\n\n  background-color: ${(props) => (props.disabled ? COLORS.neutral_100 : 'transparent')};\n  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n  border-left: 1px solid transparent;\n  text-decoration: none;\n  position: relative;\n  border-radius: 2px;\n\n  &:not(:last-child) {\n    margin-bottom: 4px;\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &.active {\n    z-index: ${Z_INDEXES.active};\n    background-color: ${COLORS.neutral_20};\n  }\n\n  &.active:hover {\n    background-color: ${COLORS.primary_20};\n  }\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_600};\n  }\n\n  &:active {\n    z-index: ${Z_INDEXES.active};\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n\n  &.active {\n    &::after {\n      position: absolute;\n      content: ' ';\n      width: 4px;\n      top: 0;\n      bottom: 0;\n      left: -1px;\n      background-color: ${COLORS.primary_500};\n\n      border-radius: 2px;\n    }\n  }\n\n  &.active:hover {\n    &::after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n\n  &.active:active {\n    background-color: ${COLORS.primary_100};\n\n    &::after {\n      background-color: ${COLORS.primary_800};\n    }\n  }\n\n  &.disabled {\n    background-color: ${COLORS.white};\n    color: ${COLORS.neutral_300};\n\n    span {\n      color: ${COLORS.neutral_300};\n    }\n\n    &::after {\n      background-color: ${COLORS.neutral_300};\n    }\n  }\n`;\n\nconst OptionalLineWrapperWithIcon = styled.div`\n  display: flex;\n  flex-direction: row;\n\n  span {\n    margin: 0 0 0 4px !important;\n    font-size: 12px;\n    line-height: 16px;\n  }\n`;\n\nconst TopWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n\n  span:not(:only-child) {\n    width: calc(100% - 32px);\n  }\n`;\n\nconst TextContainer = styled.div`\n  width: 100%;\n  margin: auto 0 auto 16px !important;\n`;\n\nconst StyledNotification = styled.div`\n  margin: 0 15px 0 0 !important;\n`;\n\nconst OptionalLineWrapper = styled.div`\n  font-size: 12px;\n`;\n\nconst Wrapper = styled.div`\n  &.disabled {\n    cursor: not-allowed;\n\n    ${StyledTabLink} {\n      pointer-events: none;\n    }\n  }\n`;\n\nconst TabLink = ({\n  to,\n  disabled = false,\n  requiredLine,\n  optionalLine,\n  OptionalLineIcon,\n  onLinkClick,\n  testId,\n  showNotificationDot = false,\n  size = Size.Small,\n  variant = 'critical',\n}: TabLinkProps) => {\n  const ref = React.useRef<any>(null);\n  const [activeState, setActiveState] = useState<boolean>(false);\n  return (\n    <Wrapper className={disabled ? 'disabled' : ''}>\n      <StyledTabLink\n        to={to.toString()}\n        disabled={disabled}\n        className={({ isActive }) => {\n          if(isActive != activeState)\n            setActiveState(isActive);\n          return (isActive ? 'active ' : '') + (disabled ? 'disabled' : '');\n        }}\n        onMouseDown={defaultOnMouseDownHandler}\n        tabIndex={disabled ? -1 : 0}\n        role=\"tab\"\n        aria-selected={activeState}\n        onClick={(e: React.MouseEvent) => !disabled && onLinkClick && onLinkClick(e)}\n        ref={ref}\n        data-testid={testId}>\n        <TextContainer>\n          <TopWrapper>\n            <span>{requiredLine}</span>\n          </TopWrapper>\n          {optionalLine && OptionalLineIcon ? (\n            <OptionalLineWrapperWithIcon>\n              {OptionalLineIcon}\n              {!!optionalLine && <span>{optionalLine}</span>}\n            </OptionalLineWrapperWithIcon>\n          ) : optionalLine ? (\n            <OptionalLineWrapper>\n              <span>{optionalLine}</span>\n            </OptionalLineWrapper>\n          ) : (\n            <></>\n          )}\n        </TextContainer>\n        <StyledNotification>{showNotificationDot && <NotificationDot testId=\"NotificationDot\" size={size} variant={variant} />}</StyledNotification>\n      </StyledTabLink>\n    </Wrapper>\n  );\n};\n\nexport default TabLink;\n"],"mappings":"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"}

package/dist/common/NavigationHelper.cjs

@@ -4,11 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useNavigationHelper = void 0;
-var _reactRouterDom = require("react-router-dom");
 var _reactRouter = require("react-router");
 var useNavigationHelper = function useNavigationHelper() {
   var navigateHook = (0, _reactRouter.useNavigate)();
-  var location = (0, _reactRouterDom.useLocation)();
+  var location = (0, _reactRouter.useLocation)();
   var navigate = function navigate(url, isExternal) {
     if (isExternal) {
       window.location.href = url;
@@ -18,7 +17,7 @@ var useNavigationHelper = function useNavigationHelper() {
   };
   var isActiveRoute = function isActiveRoute(url, exact) {
     var _location$pathname;
-    return !!(0, _reactRouterDom.matchPath)({
+    return !!(0, _reactRouter.matchPath)({
       path: url,
       end: exact
     }, (_location$pathname = location.pathname) !== null && _location$pathname !== void 0 ? _location$pathname : '');

package/dist/common/NavigationHelper.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationHelper.cjs","names":["useNavigationHelper","navigateHook","useNavigate","location","useLocation","navigate","url","isExternal","window","href","isActiveRoute","exact","matchPath","path","end","pathname"],"sources":["../../src/common/NavigationHelper.ts"],"sourcesContent":["import { matchPath, useLocation } from 'react-router-dom';\nimport { useNavigate } from 'react-router';\n\nexport const useNavigationHelper = () => {\n  const navigateHook = useNavigate();\n  const location = useLocation();\n\n  const navigate = (url: string, isExternal: boolean) => {\n    if (isExternal) {\n      window.location.href = url;\n    } else {\n      navigateHook(url);\n    }\n  };\n\n  const isActiveRoute = (url: string, exact: boolean): boolean => {\n    return !!matchPath({ path: url, end: exact }, location.pathname ?? '');\n  };\n\n  return { navigate, isActiveRoute };\n};\n"],"mappings":";;;;;;AAAA;AACA;AAEO,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAmB,GAAS;EACvC,IAAMC,YAAY,GAAG,IAAAC,wBAAW,GAAE;EAClC,IAAMC,QAAQ,GAAG,IAAAC,2BAAW,GAAE;EAE9B,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,CAAIC,GAAW,EAAEC,UAAmB,EAAK;IACrD,IAAIA,UAAU,EAAE;MACdC,MAAM,CAACL,QAAQ,CAACM,IAAI,GAAGH,GAAG;IAC5B,CAAC,MAAM;MACLL,YAAY,CAACK,GAAG,CAAC;IACnB;EACF,CAAC;EAED,IAAMI,aAAa,GAAG,SAAhBA,aAAa,CAAIJ,GAAW,EAAEK,KAAc,EAAc;IAAA;IAC9D,OAAO,CAAC,CAAC,IAAAC,yBAAS,EAAC;MAAEC,IAAI,EAAEP,GAAG;MAAEQ,GAAG,EAAEH;IAAM,CAAC,wBAAER,QAAQ,CAACY,QAAQ,mEAAI,EAAE,CAAC;EACxE,CAAC;EAED,OAAO;IAAEV,QAAQ,EAARA,QAAQ;IAAEK,aAAa,EAAbA;EAAc,CAAC;AACpC,CAAC;AAAC"}
+{"version":3,"file":"NavigationHelper.cjs","names":["useNavigationHelper","navigateHook","useNavigate","location","useLocation","navigate","url","isExternal","window","href","isActiveRoute","exact","matchPath","path","end","pathname"],"sources":["../../src/common/NavigationHelper.ts"],"sourcesContent":["import { useNavigate, matchPath, useLocation } from 'react-router';\n\nexport const useNavigationHelper = () => {\n  const navigateHook = useNavigate();\n  const location = useLocation();\n\n  const navigate = (url: string, isExternal: boolean) => {\n    if (isExternal) {\n      window.location.href = url;\n    } else {\n      navigateHook(url);\n    }\n  };\n\n  const isActiveRoute = (url: string, exact: boolean): boolean => {\n    return !!matchPath({ path: url, end: exact }, location.pathname ?? '');\n  };\n\n  return { navigate, isActiveRoute };\n};\n"],"mappings":";;;;;;AAAA;AAEO,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAmB,GAAS;EACvC,IAAMC,YAAY,GAAG,IAAAC,wBAAW,GAAE;EAClC,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAE9B,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,CAAIC,GAAW,EAAEC,UAAmB,EAAK;IACrD,IAAIA,UAAU,EAAE;MACdC,MAAM,CAACL,QAAQ,CAACM,IAAI,GAAGH,GAAG;IAC5B,CAAC,MAAM;MACLL,YAAY,CAACK,GAAG,CAAC;IACnB;EACF,CAAC;EAED,IAAMI,aAAa,GAAG,SAAhBA,aAAa,CAAIJ,GAAW,EAAEK,KAAc,EAAc;IAAA;IAC9D,OAAO,CAAC,CAAC,IAAAC,sBAAS,EAAC;MAAEC,IAAI,EAAEP,GAAG;MAAEQ,GAAG,EAAEH;IAAM,CAAC,wBAAER,QAAQ,CAACY,QAAQ,mEAAI,EAAE,CAAC;EACxE,CAAC;EAED,OAAO;IAAEV,QAAQ,EAARA,QAAQ;IAAEK,aAAa,EAAbA;EAAc,CAAC;AACpC,CAAC;AAAC"}

package/dist/common/NavigationHelper.js

@@ -1,5 +1,4 @@
-import { matchPath, useLocation } from 'react-router-dom';
-import { useNavigate } from 'react-router';
+import { useNavigate, matchPath, useLocation } from 'react-router';
 export var useNavigationHelper = function useNavigationHelper() {
   var navigateHook = useNavigate();
   var location = useLocation();

package/dist/common/NavigationHelper.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationHelper.js","names":["matchPath","useLocation","useNavigate","useNavigationHelper","navigateHook","location","navigate","url","isExternal","window","href","isActiveRoute","exact","path","end","pathname"],"sources":["../../src/common/NavigationHelper.ts"],"sourcesContent":["import { matchPath, useLocation } from 'react-router-dom';\nimport { useNavigate } from 'react-router';\n\nexport const useNavigationHelper = () => {\n  const navigateHook = useNavigate();\n  const location = useLocation();\n\n  const navigate = (url: string, isExternal: boolean) => {\n    if (isExternal) {\n      window.location.href = url;\n    } else {\n      navigateHook(url);\n    }\n  };\n\n  const isActiveRoute = (url: string, exact: boolean): boolean => {\n    return !!matchPath({ path: url, end: exact }, location.pathname ?? '');\n  };\n\n  return { navigate, isActiveRoute };\n};\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,WAAW,QAAQ,kBAAkB;AACzD,SAASC,WAAW,QAAQ,cAAc;AAE1C,OAAO,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmB,GAAS;EACvC,IAAMC,YAAY,GAAGF,WAAW,EAAE;EAClC,IAAMG,QAAQ,GAAGJ,WAAW,EAAE;EAE9B,IAAMK,QAAQ,GAAG,SAAXA,QAAQ,CAAIC,GAAW,EAAEC,UAAmB,EAAK;IACrD,IAAIA,UAAU,EAAE;MACdC,MAAM,CAACJ,QAAQ,CAACK,IAAI,GAAGH,GAAG;IAC5B,CAAC,MAAM;MACLH,YAAY,CAACG,GAAG,CAAC;IACnB;EACF,CAAC;EAED,IAAMI,aAAa,GAAG,SAAhBA,aAAa,CAAIJ,GAAW,EAAEK,KAAc,EAAc;IAAA;IAC9D,OAAO,CAAC,CAACZ,SAAS,CAAC;MAAEa,IAAI,EAAEN,GAAG;MAAEO,GAAG,EAAEF;IAAM,CAAC,wBAAEP,QAAQ,CAACU,QAAQ,mEAAI,EAAE,CAAC;EACxE,CAAC;EAED,OAAO;IAAET,QAAQ,EAARA,QAAQ;IAAEK,aAAa,EAAbA;EAAc,CAAC;AACpC,CAAC"}
+{"version":3,"file":"NavigationHelper.js","names":["useNavigate","matchPath","useLocation","useNavigationHelper","navigateHook","location","navigate","url","isExternal","window","href","isActiveRoute","exact","path","end","pathname"],"sources":["../../src/common/NavigationHelper.ts"],"sourcesContent":["import { useNavigate, matchPath, useLocation } from 'react-router';\n\nexport const useNavigationHelper = () => {\n  const navigateHook = useNavigate();\n  const location = useLocation();\n\n  const navigate = (url: string, isExternal: boolean) => {\n    if (isExternal) {\n      window.location.href = url;\n    } else {\n      navigateHook(url);\n    }\n  };\n\n  const isActiveRoute = (url: string, exact: boolean): boolean => {\n    return !!matchPath({ path: url, end: exact }, location.pathname ?? '');\n  };\n\n  return { navigate, isActiveRoute };\n};\n"],"mappings":"AAAA,SAASA,WAAW,EAAEC,SAAS,EAAEC,WAAW,QAAQ,cAAc;AAElE,OAAO,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmB,GAAS;EACvC,IAAMC,YAAY,GAAGJ,WAAW,EAAE;EAClC,IAAMK,QAAQ,GAAGH,WAAW,EAAE;EAE9B,IAAMI,QAAQ,GAAG,SAAXA,QAAQ,CAAIC,GAAW,EAAEC,UAAmB,EAAK;IACrD,IAAIA,UAAU,EAAE;MACdC,MAAM,CAACJ,QAAQ,CAACK,IAAI,GAAGH,GAAG;IAC5B,CAAC,MAAM;MACLH,YAAY,CAACG,GAAG,CAAC;IACnB;EACF,CAAC;EAED,IAAMI,aAAa,GAAG,SAAhBA,aAAa,CAAIJ,GAAW,EAAEK,KAAc,EAAc;IAAA;IAC9D,OAAO,CAAC,CAACX,SAAS,CAAC;MAAEY,IAAI,EAAEN,GAAG;MAAEO,GAAG,EAAEF;IAAM,CAAC,wBAAEP,QAAQ,CAACU,QAAQ,mEAAI,EAAE,CAAC;EACxE,CAAC;EAED,OAAO;IAAET,QAAQ,EAARA,QAAQ;IAAEK,aAAa,EAAbA;EAAc,CAAC;AACpC,CAAC"}

package/dist/index.cjs

@@ -529,4 +529,16 @@ Object.keys(_SideMenu).forEach(function (key) {
     }
   });
 });
+var _Panel = require("./Panel");
+Object.keys(_Panel).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Panel[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Panel[key];
+    }
+  });
+});
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":[],"sources":["../src/index.ts"],"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';\nexport * from './SideMenu';\n"],"mappings":";;;;;;;;;;;;;;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
+{"version":3,"file":"index.cjs","names":[],"sources":["../src/index.ts"],"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';\nexport * from './SideMenu';\nexport * from './Panel';\n"],"mappings":";;;;;;;;;;;;;;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/dist/index.d.ts

@@ -42,3 +42,4 @@ export * from './ProfileButton';
 export { LaerdalLogo } from './assets';
 export * from './Popover';
 export * from './SideMenu';
+export * from './Panel';

package/dist/index.js

@@ -42,4 +42,5 @@ export * from './ProfileButton';
 export { LaerdalLogo } from './assets';
 export * from './Popover';
 export * from './SideMenu';
+export * from './Panel';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["LaerdalLogo"],"sources":["../src/index.ts"],"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';\nexport * from './SideMenu';\n"],"mappings":"AAAA,cAAc,UAAU;AACxB,cAAc,SAAS;AACvB,cAAc,SAAS;AACvB,cAAc,YAAY;AAC1B,cAAc,UAAU;AACxB,cAAc,cAAc;AAC5B,cAAc,SAAS;AACvB,cAAc,iBAAiB;AAC/B,cAAc,UAAU;AACxB,cAAc,oBAAoB;AAClC,cAAc,mBAAmB;AACjC,cAAc,WAAW;AACzB,cAAc,WAAW;AACzB,cAAc,uBAAuB;AACrC,cAAc,QAAQ;AACtB,cAAc,WAAW;AACzB,cAAc,YAAY;AAC1B,cAAc,eAAe;AAC7B,cAAc,YAAY;AAC1B,cAAc,YAAY;AAC1B,cAAc,eAAe;AAC7B,cAAc,QAAQ;AACtB,cAAc,UAAU;AACxB,cAAc,aAAa;AAC3B,cAAc,SAAS;AACvB,cAAc,WAAW;AACzB,cAAc,aAAa;AAC3B,cAAc,mBAAmB;AACjC,cAAc,aAAa;AAC3B,cAAc,YAAY;AAC1B,cAAc,UAAU;AACxB,cAAc,cAAc;AAC5B,cAAc,kBAAkB;AAChC,cAAc,kBAAkB;AAChC,cAAc,QAAQ;AACtB,cAAc,YAAY;AAC1B,cAAc,OAAO;AACrB,cAAc,SAAS;AACvB,cAAc,cAAc;AAC5B,cAAc,QAAQ;AACtB,cAAc,iBAAiB;AAC/B,SAAQA,WAAW,QAAO,UAAU;AACpC,cAAc,WAAW;AACzB,cAAc,YAAY"}
+{"version":3,"file":"index.js","names":["LaerdalLogo"],"sources":["../src/index.ts"],"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';\nexport * from './SideMenu';\nexport * from './Panel';\n"],"mappings":"AAAA,cAAc,UAAU;AACxB,cAAc,SAAS;AACvB,cAAc,SAAS;AACvB,cAAc,YAAY;AAC1B,cAAc,UAAU;AACxB,cAAc,cAAc;AAC5B,cAAc,SAAS;AACvB,cAAc,iBAAiB;AAC/B,cAAc,UAAU;AACxB,cAAc,oBAAoB;AAClC,cAAc,mBAAmB;AACjC,cAAc,WAAW;AACzB,cAAc,WAAW;AACzB,cAAc,uBAAuB;AACrC,cAAc,QAAQ;AACtB,cAAc,WAAW;AACzB,cAAc,YAAY;AAC1B,cAAc,eAAe;AAC7B,cAAc,YAAY;AAC1B,cAAc,YAAY;AAC1B,cAAc,eAAe;AAC7B,cAAc,QAAQ;AACtB,cAAc,UAAU;AACxB,cAAc,aAAa;AAC3B,cAAc,SAAS;AACvB,cAAc,WAAW;AACzB,cAAc,aAAa;AAC3B,cAAc,mBAAmB;AACjC,cAAc,aAAa;AAC3B,cAAc,YAAY;AAC1B,cAAc,UAAU;AACxB,cAAc,cAAc;AAC5B,cAAc,kBAAkB;AAChC,cAAc,kBAAkB;AAChC,cAAc,QAAQ;AACtB,cAAc,YAAY;AAC1B,cAAc,OAAO;AACrB,cAAc,SAAS;AACvB,cAAc,cAAc;AAC5B,cAAc,QAAQ;AACtB,cAAc,iBAAiB;AAC/B,SAAQA,WAAW,QAAO,UAAU;AACpC,cAAc,WAAW;AACzB,cAAc,YAAY;AAC1B,cAAc,SAAS"}

package/dist/styles/breakpoints.cjs

@@ -5,11 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var BREAKPOINTS = {
-  XSMALL: '@media (min-width: 320px)',
-  SMALL: '@media (min-width: 576px)',
+  SMALL: '@media (min-width: 320px)',
   MEDIUM: '@media (min-width: 768px)',
-  LARGE: '@media (min-width: 992px)',
-  XLARGE: '@media (min-width: 1200px)'
+  LARGE: '@media (min-width: 1280px)'
 };
 var _default = BREAKPOINTS;
 exports.default = _default;

package/dist/styles/breakpoints.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"breakpoints.cjs","names":["BREAKPOINTS","XSMALL","SMALL","MEDIUM","LARGE","XLARGE"],"sources":["../../src/styles/breakpoints.ts"],"sourcesContent":["const BREAKPOINTS = {\n  XSMALL: '@media (min-width: 320px)',\n  SMALL: '@media (min-width: 576px)',\n  MEDIUM: '@media (min-width: 768px)',\n  LARGE: '@media (min-width: 992px)',\n  XLARGE: '@media (min-width: 1200px)',\n};\n\nexport default BREAKPOINTS;\n"],"mappings":";;;;;;AAAA,IAAMA,WAAW,GAAG;EAClBC,MAAM,EAAE,2BAA2B;EACnCC,KAAK,EAAE,2BAA2B;EAClCC,MAAM,EAAE,2BAA2B;EACnCC,KAAK,EAAE,2BAA2B;EAClCC,MAAM,EAAE;AACV,CAAC;AAAC,eAEaL,WAAW;AAAA"}
+{"version":3,"file":"breakpoints.cjs","names":["BREAKPOINTS","SMALL","MEDIUM","LARGE"],"sources":["../../src/styles/breakpoints.ts"],"sourcesContent":["const BREAKPOINTS = {\n  SMALL: '@media (min-width: 320px)',\n  MEDIUM: '@media (min-width: 768px)',\n  LARGE: '@media (min-width: 1280px)',\n};\n\nexport default BREAKPOINTS;\n"],"mappings":";;;;;;AAAA,IAAMA,WAAW,GAAG;EAClBC,KAAK,EAAE,2BAA2B;EAClCC,MAAM,EAAE,2BAA2B;EACnCC,KAAK,EAAE;AACT,CAAC;AAAC,eAEaH,WAAW;AAAA"}

package/dist/styles/breakpoints.d.ts

@@ -1,8 +1,6 @@
 declare const BREAKPOINTS: {
-    XSMALL: string;
     SMALL: string;
     MEDIUM: string;
     LARGE: string;
-    XLARGE: string;
 };
 export default BREAKPOINTS;

package/dist/styles/breakpoints.js

@@ -1,9 +1,7 @@
 var BREAKPOINTS = {
-  XSMALL: '@media (min-width: 320px)',
-  SMALL: '@media (min-width: 576px)',
+  SMALL: '@media (min-width: 320px)',
   MEDIUM: '@media (min-width: 768px)',
-  LARGE: '@media (min-width: 992px)',
-  XLARGE: '@media (min-width: 1200px)'
+  LARGE: '@media (min-width: 1280px)'
 };
 export default BREAKPOINTS;
 //# sourceMappingURL=breakpoints.js.map

package/dist/styles/breakpoints.js.map

@@ -1 +1 @@
-{"version":3,"file":"breakpoints.js","names":["BREAKPOINTS","XSMALL","SMALL","MEDIUM","LARGE","XLARGE"],"sources":["../../src/styles/breakpoints.ts"],"sourcesContent":["const BREAKPOINTS = {\n  XSMALL: '@media (min-width: 320px)',\n  SMALL: '@media (min-width: 576px)',\n  MEDIUM: '@media (min-width: 768px)',\n  LARGE: '@media (min-width: 992px)',\n  XLARGE: '@media (min-width: 1200px)',\n};\n\nexport default BREAKPOINTS;\n"],"mappings":"AAAA,IAAMA,WAAW,GAAG;EAClBC,MAAM,EAAE,2BAA2B;EACnCC,KAAK,EAAE,2BAA2B;EAClCC,MAAM,EAAE,2BAA2B;EACnCC,KAAK,EAAE,2BAA2B;EAClCC,MAAM,EAAE;AACV,CAAC;AAED,eAAeL,WAAW"}
+{"version":3,"file":"breakpoints.js","names":["BREAKPOINTS","SMALL","MEDIUM","LARGE"],"sources":["../../src/styles/breakpoints.ts"],"sourcesContent":["const BREAKPOINTS = {\n  SMALL: '@media (min-width: 320px)',\n  MEDIUM: '@media (min-width: 768px)',\n  LARGE: '@media (min-width: 1280px)',\n};\n\nexport default BREAKPOINTS;\n"],"mappings":"AAAA,IAAMA,WAAW,GAAG;EAClBC,KAAK,EAAE,2BAA2B;EAClCC,MAAM,EAAE,2BAA2B;EACnCC,KAAK,EAAE;AACT,CAAC;AAED,eAAeH,WAAW"}

package/dist/styles/global.cjs

@@ -6,7 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _colors = _interopRequireDefault(require("./colors"));
-var globalStyles = "\n  html,\n  body {\n    height: 100%;\n    font-family: 'Lato', sans-serif;\n    font-size: 18px;\n    color: ".concat(_colors.default.black, ";\n    -webkit-font-smoothing: antialiased;\n  }\n\n  [lang^=\"ja\" i] {\n    font-family: Lato, Noto Sans, Noto Sans JP, sans-serif;\n  }\n  \n  [lang^=\"ko\" i] {\n    font-family: Lato, Noto Sans, Noto Sans KR, sans-serif;\n  }\n  \n  [lang^=\"zh\" i] {\n    font-family: Lato, Noto Sans, Noto Sans SC, sans-serif;\n  }\n  \n  [lang=\"zh-cht\" i],\n  [lang=\"zh-hant\" i],\n  [lang=\"zh-hk\" i],\n  [lang=\"zh-mo\" i],\n  [lang=\"zh-tw\" i] {\n    font-family: Lato, Noto Sans, Noto Sans TC, sans-serif;\n  }\n\n\n  body {\n    margin: 0;\n    padding: 0;\n  }\n\n  main,\n  aside,\n  details {\n    display: block;\n  }\n\n  summary {\n    display: block;\n  }\n\n  #root {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n  }\n\n  button,\n  input,\n  label {\n    font-family: inherit;\n  }\n\n  .react-grid-item.react-grid-placeholder {\n    background: ").concat(_colors.default.primary_100, " !important;\n    opacity: 1 !important;\n  }\n\n  .react-resizable-handle {\n    background-image: none !important;\n  }\n\n  .react-resizable-handle::after {\n    border: none !important;\n  }\n");
+var _typography = require("./typography");
+var globalStyles = "\n  html,\n  body {\n    height: 100%;\n    font-family: 'Lato', sans-serif;\n    color: ".concat(_colors.default.black, ";\n    -webkit-font-smoothing: antialiased;\n  }\n\n  [lang^=\"ja\" i] {\n    font-family: Lato, Noto Sans, Noto Sans JP, sans-serif;\n  }\n  \n  [lang^=\"ko\" i] {\n    font-family: Lato, Noto Sans, Noto Sans KR, sans-serif;\n  }\n  \n  [lang^=\"zh\" i] {\n    font-family: Lato, Noto Sans, Noto Sans SC, sans-serif;\n  }\n  \n  [lang=\"zh-cht\" i],\n  [lang=\"zh-hant\" i],\n  [lang=\"zh-hk\" i],\n  [lang=\"zh-mo\" i],\n  [lang=\"zh-tw\" i] {\n    font-family: Lato, Noto Sans, Noto Sans TC, sans-serif;\n  }\n\n\n  body {\n    margin: 0;\n    padding: 0;\n  }\n\n  main,\n  aside,\n  details {\n    display: block;\n  }\n\n  summary {\n    display: block;\n  }\n\n  #root {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n  }\n\n  button,\n  input,\n  label {\n    font-family: inherit;\n  }\n\n  .react-grid-item.react-grid-placeholder {\n    background: ").concat(_colors.default.primary_100, " !important;\n    opacity: 1 !important;\n  }\n\n  .react-resizable-handle {\n    background-image: none !important;\n  }\n\n  .react-resizable-handle::after {\n    border: none !important;\n  }\n  \n  \n  ").concat(_typography.Typography, "\n");
 var _default = globalStyles;
 exports.default = _default;
 //# sourceMappingURL=global.cjs.map

package/dist/styles/global.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"global.cjs","names":["globalStyles","COLORS","black","primary_100"],"sources":["../../src/styles/global.ts"],"sourcesContent":["import COLORS from './colors';\n\nconst globalStyles = `\n  html,\n  body {\n    height: 100%;\n    font-family: 'Lato', sans-serif;\n    font-size: 18px;\n    color: ${COLORS.black};\n    -webkit-font-smoothing: antialiased;\n  }\n\n  [lang^=\"ja\" i] {\n    font-family: Lato, Noto Sans, Noto Sans JP, sans-serif;\n  }\n  \n  [lang^=\"ko\" i] {\n    font-family: Lato, Noto Sans, Noto Sans KR, sans-serif;\n  }\n  \n  [lang^=\"zh\" i] {\n    font-family: Lato, Noto Sans, Noto Sans SC, sans-serif;\n  }\n  \n  [lang=\"zh-cht\" i],\n  [lang=\"zh-hant\" i],\n  [lang=\"zh-hk\" i],\n  [lang=\"zh-mo\" i],\n  [lang=\"zh-tw\" i] {\n    font-family: Lato, Noto Sans, Noto Sans TC, sans-serif;\n  }\n\n\n  body {\n    margin: 0;\n    padding: 0;\n  }\n\n  main,\n  aside,\n  details {\n    display: block;\n  }\n\n  summary {\n    display: block;\n  }\n\n  #root {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n  }\n\n  button,\n  input,\n  label {\n    font-family: inherit;\n  }\n\n  .react-grid-item.react-grid-placeholder {\n    background: ${COLORS.primary_100} !important;\n    opacity: 1 !important;\n  }\n\n  .react-resizable-handle {\n    background-image: none !important;\n  }\n\n  .react-resizable-handle::after {\n    border: none !important;\n  }\n`;\n\nexport default globalStyles;\n"],"mappings":";;;;;;;AAAA;AAEA,IAAMA,YAAY,4HAMLC,eAAM,CAACC,KAAK,83BAqDPD,eAAM,CAACE,WAAW,yMAWnC;AAAC,eAEaH,YAAY;AAAA"}
+{"version":3,"file":"global.cjs","names":["globalStyles","COLORS","black","primary_100","Typography"],"sources":["../../src/styles/global.ts"],"sourcesContent":["import COLORS from './colors';\nimport {Typography} from \"./typography\";\n\nconst globalStyles = `\n  html,\n  body {\n    height: 100%;\n    font-family: 'Lato', sans-serif;\n    color: ${COLORS.black};\n    -webkit-font-smoothing: antialiased;\n  }\n\n  [lang^=\"ja\" i] {\n    font-family: Lato, Noto Sans, Noto Sans JP, sans-serif;\n  }\n  \n  [lang^=\"ko\" i] {\n    font-family: Lato, Noto Sans, Noto Sans KR, sans-serif;\n  }\n  \n  [lang^=\"zh\" i] {\n    font-family: Lato, Noto Sans, Noto Sans SC, sans-serif;\n  }\n  \n  [lang=\"zh-cht\" i],\n  [lang=\"zh-hant\" i],\n  [lang=\"zh-hk\" i],\n  [lang=\"zh-mo\" i],\n  [lang=\"zh-tw\" i] {\n    font-family: Lato, Noto Sans, Noto Sans TC, sans-serif;\n  }\n\n\n  body {\n    margin: 0;\n    padding: 0;\n  }\n\n  main,\n  aside,\n  details {\n    display: block;\n  }\n\n  summary {\n    display: block;\n  }\n\n  #root {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n  }\n\n  button,\n  input,\n  label {\n    font-family: inherit;\n  }\n\n  .react-grid-item.react-grid-placeholder {\n    background: ${COLORS.primary_100} !important;\n    opacity: 1 !important;\n  }\n\n  .react-resizable-handle {\n    background-image: none !important;\n  }\n\n  .react-resizable-handle::after {\n    border: none !important;\n  }\n  \n  \n  ${Typography}\n`;\n\nexport default globalStyles;\n"],"mappings":";;;;;;;AAAA;AACA;AAEA,IAAMA,YAAY,sGAKLC,eAAM,CAACC,KAAK,83BAqDPD,eAAM,CAACE,WAAW,2NAahCC,sBAAU,OACb;AAAC,eAEaJ,YAAY;AAAA"}

package/dist/styles/global.js

@@ -1,4 +1,5 @@
 import COLORS from './colors';
-var globalStyles = "\n  html,\n  body {\n    height: 100%;\n    font-family: 'Lato', sans-serif;\n    font-size: 18px;\n    color: ".concat(COLORS.black, ";\n    -webkit-font-smoothing: antialiased;\n  }\n\n  [lang^=\"ja\" i] {\n    font-family: Lato, Noto Sans, Noto Sans JP, sans-serif;\n  }\n  \n  [lang^=\"ko\" i] {\n    font-family: Lato, Noto Sans, Noto Sans KR, sans-serif;\n  }\n  \n  [lang^=\"zh\" i] {\n    font-family: Lato, Noto Sans, Noto Sans SC, sans-serif;\n  }\n  \n  [lang=\"zh-cht\" i],\n  [lang=\"zh-hant\" i],\n  [lang=\"zh-hk\" i],\n  [lang=\"zh-mo\" i],\n  [lang=\"zh-tw\" i] {\n    font-family: Lato, Noto Sans, Noto Sans TC, sans-serif;\n  }\n\n\n  body {\n    margin: 0;\n    padding: 0;\n  }\n\n  main,\n  aside,\n  details {\n    display: block;\n  }\n\n  summary {\n    display: block;\n  }\n\n  #root {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n  }\n\n  button,\n  input,\n  label {\n    font-family: inherit;\n  }\n\n  .react-grid-item.react-grid-placeholder {\n    background: ").concat(COLORS.primary_100, " !important;\n    opacity: 1 !important;\n  }\n\n  .react-resizable-handle {\n    background-image: none !important;\n  }\n\n  .react-resizable-handle::after {\n    border: none !important;\n  }\n");
+import { Typography } from "./typography";
+var globalStyles = "\n  html,\n  body {\n    height: 100%;\n    font-family: 'Lato', sans-serif;\n    color: ".concat(COLORS.black, ";\n    -webkit-font-smoothing: antialiased;\n  }\n\n  [lang^=\"ja\" i] {\n    font-family: Lato, Noto Sans, Noto Sans JP, sans-serif;\n  }\n  \n  [lang^=\"ko\" i] {\n    font-family: Lato, Noto Sans, Noto Sans KR, sans-serif;\n  }\n  \n  [lang^=\"zh\" i] {\n    font-family: Lato, Noto Sans, Noto Sans SC, sans-serif;\n  }\n  \n  [lang=\"zh-cht\" i],\n  [lang=\"zh-hant\" i],\n  [lang=\"zh-hk\" i],\n  [lang=\"zh-mo\" i],\n  [lang=\"zh-tw\" i] {\n    font-family: Lato, Noto Sans, Noto Sans TC, sans-serif;\n  }\n\n\n  body {\n    margin: 0;\n    padding: 0;\n  }\n\n  main,\n  aside,\n  details {\n    display: block;\n  }\n\n  summary {\n    display: block;\n  }\n\n  #root {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n  }\n\n  button,\n  input,\n  label {\n    font-family: inherit;\n  }\n\n  .react-grid-item.react-grid-placeholder {\n    background: ").concat(COLORS.primary_100, " !important;\n    opacity: 1 !important;\n  }\n\n  .react-resizable-handle {\n    background-image: none !important;\n  }\n\n  .react-resizable-handle::after {\n    border: none !important;\n  }\n  \n  \n  ").concat(Typography, "\n");
 export default globalStyles;
 //# sourceMappingURL=global.js.map

package/dist/styles/global.js.map

@@ -1 +1 @@
-{"version":3,"file":"global.js","names":["COLORS","globalStyles","black","primary_100"],"sources":["../../src/styles/global.ts"],"sourcesContent":["import COLORS from './colors';\n\nconst globalStyles = `\n  html,\n  body {\n    height: 100%;\n    font-family: 'Lato', sans-serif;\n    font-size: 18px;\n    color: ${COLORS.black};\n    -webkit-font-smoothing: antialiased;\n  }\n\n  [lang^=\"ja\" i] {\n    font-family: Lato, Noto Sans, Noto Sans JP, sans-serif;\n  }\n  \n  [lang^=\"ko\" i] {\n    font-family: Lato, Noto Sans, Noto Sans KR, sans-serif;\n  }\n  \n  [lang^=\"zh\" i] {\n    font-family: Lato, Noto Sans, Noto Sans SC, sans-serif;\n  }\n  \n  [lang=\"zh-cht\" i],\n  [lang=\"zh-hant\" i],\n  [lang=\"zh-hk\" i],\n  [lang=\"zh-mo\" i],\n  [lang=\"zh-tw\" i] {\n    font-family: Lato, Noto Sans, Noto Sans TC, sans-serif;\n  }\n\n\n  body {\n    margin: 0;\n    padding: 0;\n  }\n\n  main,\n  aside,\n  details {\n    display: block;\n  }\n\n  summary {\n    display: block;\n  }\n\n  #root {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n  }\n\n  button,\n  input,\n  label {\n    font-family: inherit;\n  }\n\n  .react-grid-item.react-grid-placeholder {\n    background: ${COLORS.primary_100} !important;\n    opacity: 1 !important;\n  }\n\n  .react-resizable-handle {\n    background-image: none !important;\n  }\n\n  .react-resizable-handle::after {\n    border: none !important;\n  }\n`;\n\nexport default globalStyles;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,UAAU;AAE7B,IAAMC,YAAY,4HAMLD,MAAM,CAACE,KAAK,83BAqDPF,MAAM,CAACG,WAAW,yMAWnC;AAED,eAAeF,YAAY"}
+{"version":3,"file":"global.js","names":["COLORS","Typography","globalStyles","black","primary_100"],"sources":["../../src/styles/global.ts"],"sourcesContent":["import COLORS from './colors';\nimport {Typography} from \"./typography\";\n\nconst globalStyles = `\n  html,\n  body {\n    height: 100%;\n    font-family: 'Lato', sans-serif;\n    color: ${COLORS.black};\n    -webkit-font-smoothing: antialiased;\n  }\n\n  [lang^=\"ja\" i] {\n    font-family: Lato, Noto Sans, Noto Sans JP, sans-serif;\n  }\n  \n  [lang^=\"ko\" i] {\n    font-family: Lato, Noto Sans, Noto Sans KR, sans-serif;\n  }\n  \n  [lang^=\"zh\" i] {\n    font-family: Lato, Noto Sans, Noto Sans SC, sans-serif;\n  }\n  \n  [lang=\"zh-cht\" i],\n  [lang=\"zh-hant\" i],\n  [lang=\"zh-hk\" i],\n  [lang=\"zh-mo\" i],\n  [lang=\"zh-tw\" i] {\n    font-family: Lato, Noto Sans, Noto Sans TC, sans-serif;\n  }\n\n\n  body {\n    margin: 0;\n    padding: 0;\n  }\n\n  main,\n  aside,\n  details {\n    display: block;\n  }\n\n  summary {\n    display: block;\n  }\n\n  #root {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n  }\n\n  button,\n  input,\n  label {\n    font-family: inherit;\n  }\n\n  .react-grid-item.react-grid-placeholder {\n    background: ${COLORS.primary_100} !important;\n    opacity: 1 !important;\n  }\n\n  .react-resizable-handle {\n    background-image: none !important;\n  }\n\n  .react-resizable-handle::after {\n    border: none !important;\n  }\n  \n  \n  ${Typography}\n`;\n\nexport default globalStyles;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,UAAU;AAC7B,SAAQC,UAAU,QAAO,cAAc;AAEvC,IAAMC,YAAY,sGAKLF,MAAM,CAACG,KAAK,83BAqDPH,MAAM,CAACI,WAAW,2NAahCH,UAAU,OACb;AAED,eAAeC,YAAY"}