@laerdal/life-react-components 1.11.0-dev.9 → 2.0.0-dev.1.full

package/dist/Modals/ModalDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalDialog.js","names":["React","Button","IconButton","ArrowLineLeft","Close","Help","COLORS","ComponentL","ComponentM","ComponentTextStyle","ComponentXL","Size","ModalContainer","BackButtonWrapper","CloseButtonWrapper","Column","FlexContainer","ModalBody","ModalFooter","ModalHeaderActions","ModalHeaderActionsWithImage","ModalTitleSection","StyledModalHeader","ModalHoverModifier","ImageOverlay","ImageContainer","ModalNote","TooltipWrapper","HyperLink","ImageWithFallbacks","ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","topImageWithFallbacksProps","topImageGrayscale","buttons","leftFooterAction","backButton","closeAction","submitAction","tooltip","children","note","state","icon","zIndex","contentOverflow","width","hasContentBorders","getMinWidth","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","getMaxHeight","ModalTitle","Bold","ModalTootip","XSmall","neutral_600","ModalCloseButton","onClick","black","ModalBackButton","getLeftActionIconElement","cloneElement","LeftFooterAction","text","actionType","disabled","action","type","loading","variant","order","marginRight","href","e","preventDefault","display","flexDirection","maxHeight","loader","alt","fallbacks","src","map","b","i","id"],"sources":["../../src/Modals/ModalDialog.tsx"],"sourcesContent":["import React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport { Size } from '../types';\nimport ModalContainer from './ModalContainer';\nimport {\n  BackButtonWrapper,\n  CloseButtonWrapper,\n  Column,\n  FlexContainer,\n  ModalBody,\n  ModalFooter,\n  ModalHeaderActions,\n  ModalHeaderActionsWithImage,\n  ModalTitleSection,\n  StyledModalHeader,\n  ModalHoverModifier,\n  ImageOverlay,\n  ImageContainer,\n} from './ModalStyles';\n\nimport { ModalNote } from './ModalNote';\nimport { TooltipWrapper } from '../Tooltips';\nimport { ButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\nimport { HyperLink, ImageWithFallbacks } from '..';\nimport { ImageWithFallbacksProps } from '../Image/ImageWithFallbacks';\n\ninterface NewModalProps {\n  size?: Size;\n  isModalOpen: boolean;\n  closeModalAndClearInput: any;\n  title?: string | React.ReactNode;\n  topImage?: any;\n  topImageWithFallbacksProps?: ImageWithFallbacksProps;\n  topImageGrayscale?: boolean;\n  buttons?: ButtonAction[];\n  leftFooterAction?: LeftFooterAction;\n  tooltip?: string;\n  backButton?: () => void;\n  closeAction: () => void;\n  submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n  note?: string | React.ReactNode;\n  state?: string;\n  icon?: React.ReactNode;\n  zIndex?: number;\n  contentOverflow?: string;\n  width?: string;\n  hasContentBorders?: boolean;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n  size,\n  isModalOpen,\n  closeModalAndClearInput,\n  title,\n  topImage,\n  topImageWithFallbacksProps,\n  topImageGrayscale,\n  buttons,\n  leftFooterAction,\n  backButton,\n  closeAction,\n  submitAction,\n  tooltip,\n  children,\n  note,\n  state,\n  icon,\n  zIndex,\n  contentOverflow,\n  width,\n  hasContentBorders,\n}) => {\n  const getMinWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '320px';\n      case Size.Large:\n        return '640px';\n      case Size.Medium:\n      default:\n        return '480px';\n    }\n  };\n\n  const getMaxWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '480px';\n      case Size.Large:\n        return '720px';\n      case Size.Medium:\n      default:\n        return '640px';\n    }\n  };\n\n  const getImageHeight = () => {\n    switch (size) {\n      case Size.Small:\n        return 160;\n      case Size.Medium:\n        return 200;\n      case Size.Large:\n        return 240;\n      default:\n        return 200;\n    }\n  };\n\n  const getMarginBottom = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px';\n      case Size.Medium:\n        return '24px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px';\n    }\n  };\n\n  const getPadding = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px 16px 8px';\n      case Size.Medium:\n        return '24px 24px 20px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px 24px 16px';\n    }\n  };\n\n  const getMaxHeight = () => {\n    switch (size) {\n      case Size.Small:\n        return 'calc(100vh - 56px)';\n      case Size.Medium:\n        return 'calc(100vh - 76px)';\n      case Size.Large:\n        return 'calc(100vh - 96px)';\n      default:\n        return 'calc(100vh - 72px)';\n    }\n  };\n\n  const ModalTitle = (title: string | React.ReactNode, size?: Size) => {\n    if (typeof title === 'string') {\n      switch (size) {\n        case Size.Small:\n          return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n        case Size.Medium:\n          return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n        case Size.Large:\n          return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n        default:\n          return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n      }\n    } else {\n      return title;\n    }\n  };\n\n  const ModalTootip = (tooltip: string) => {\n    return (\n      <ModalHoverModifier>\n        <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"top\" withArrow={false} label={tooltip}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => {}}>\n            <Help size=\"24px\" color={COLORS.neutral_600} />\n          </IconButton>\n        </TooltipWrapper>\n      </ModalHoverModifier>\n    );\n  };\n\n  const ModalCloseButton = (onClick: any) => {\n    return (\n      <CloseButtonWrapper hasImage={!!topImage || !!topImageWithFallbacksProps} size={size}>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n          <Close size=\"24px\" color={COLORS.black} />\n        </IconButton>\n      </CloseButtonWrapper>\n    );\n  };\n\n  const ModalBackButton = () => {\n    if (backButton) {\n      return (\n        <BackButtonWrapper hasImage={!!topImage || !!topImageWithFallbacksProps} size={size}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n            <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n          </IconButton>\n        </BackButtonWrapper>\n      );\n    }\n  };\n\n  const getLeftActionIconElement = (icon: React.ReactNode) => {\n    return React.cloneElement(icon as React.ReactElement, { size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px' });\n  };\n\n  const LeftFooterAction = (leftFooterAction: LeftFooterAction) => {\n    const { text, actionType, disabled, icon, action } = leftFooterAction;\n    switch (actionType) {\n      case 'button':\n        return (\n          <Button\n            id={'left-action-button'}\n            type={(leftFooterAction as LeftFooterButton)?.type}\n            disabled={disabled}\n            loading={(leftFooterAction as LeftFooterButton)?.loading}\n            icon={icon}\n            size={size}\n            onClick={action}\n            variant={(leftFooterAction as LeftFooterButton)?.variant ?? 'secondary'}\n            style={{ order: -1, marginRight: 'auto' }}>\n            {text}\n          </Button>\n        );\n      case 'hyperlink':\n        return (\n          <HyperLink\n            id=\"left-action-hyperlink\"\n            className=\"footer-action\"\n            href={(leftFooterAction as LeftFooterHyperlink).href}\n            disabled={disabled}\n            variant=\"default\"\n            onClick={(e) => {\n              if (action) {\n                e.preventDefault();\n                action(e);\n              }\n            }}>\n            {icon && getLeftActionIconElement(icon)}\n            {text}\n          </HyperLink>\n        );\n      case 'note':\n        return (\n          <div className=\"footer-action note\">\n            {icon && getLeftActionIconElement(icon)}\n            <span>{text}</span>\n          </div>\n        );\n    }\n  };\n\n  return (\n    <ModalContainer\n      showModal={isModalOpen}\n      closeModal={closeModalAndClearInput}\n      minWidth={getMinWidth()}\n      maxWidth={getMaxWidth()}\n      height=\"auto\"\n      padding={getPadding()}\n      zIndex={zIndex}\n      width={width}>\n      <Column>\n        <form onSubmit={submitAction} style={{ display: 'flex', flexDirection: 'column', maxHeight: getMaxHeight() }}>\n          {(topImage || topImageWithFallbacksProps) && (\n            <StyledModalHeader size={size} $height={getImageHeight()} marginBottom={getMarginBottom()}>\n              <ImageContainer $height={getImageHeight()}>\n                {topImageGrayscale && <ImageOverlay $height={getImageHeight()} />}\n                {topImage && <img src={topImage} alt=\"Modal top\" />}\n                {!topImage && topImageWithFallbacksProps && (\n                  <ImageWithFallbacks\n                    loader={topImageWithFallbacksProps.loader}\n                    alt={topImageWithFallbacksProps.alt}\n                    fallbacks={topImageWithFallbacksProps.fallbacks}\n                    src={topImageWithFallbacksProps.src}\n                  />\n                )}\n              </ImageContainer>\n              <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\n                {ModalBackButton()}\n                {ModalCloseButton(closeAction)}\n              </ModalHeaderActionsWithImage>\n            </StyledModalHeader>\n          )}\n          <ModalTitleSection>\n            <FlexContainer>\n              {!(topImage || topImageWithFallbacksProps) && ModalBackButton()}\n              {title && ModalTitle(title, size)}\n            </FlexContainer>\n            {(tooltip || !(topImage || topImageWithFallbacksProps)) && (\n              <ModalHeaderActions>\n                {tooltip && ModalTootip(tooltip)}\n                {!(topImage || topImageWithFallbacksProps) && ModalCloseButton(closeAction)}\n              </ModalHeaderActions>\n            )}\n          </ModalTitleSection>\n\n          <ModalBody size={size} overflow={contentOverflow} hasContentBorders={hasContentBorders}>\n            {children}\n          </ModalBody>\n\n          {note && <ModalNote note={note} state={state} size={size} icon={icon} />}\n\n          <ModalFooter size={size}>\n            {leftFooterAction && LeftFooterAction(leftFooterAction)}\n            {buttons?.map((b, i) => (\n              <Button key={b.id || i} icon={b.icon} id={b.id} disabled={b.disabled} loading={b.loading} size={size} onClick={b.action} type={b.type} variant={b.variant}>\n                {b.text}\n              </Button>\n            ))}\n          </ModalFooter>\n        </form>\n      </Column>\n    </ModalContainer>\n  );\n};\n\nexport default ModalDialog;\n"],"mappings":"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"}
+{"version":3,"file":"ModalDialog.js","names":["React","Button","IconButton","ArrowLineLeft","Close","Help","COLORS","ComponentL","ComponentM","ComponentTextStyle","ComponentXL","Size","ModalContainer","BackButtonWrapper","CloseButtonWrapper","Column","FlexContainer","ModalBody","ModalFooter","ModalHeaderActions","ModalHeaderActionsWithImage","ModalTitleSection","StyledModalHeader","ModalHoverModifier","ImageOverlay","ImageContainer","ModalNote","TooltipWrapper","HyperLink","ImageWithFallbacks","ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","topImageWithFallbacksProps","topImageGrayscale","buttons","leftFooterAction","backButton","closeAction","submitAction","tooltip","children","note","state","icon","zIndex","contentOverflow","width","hasContentBorders","getMinWidth","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","getMaxHeight","ModalTitle","Bold","ModalTootip","XSmall","neutral_600","ModalCloseButton","onClick","black","ModalBackButton","getLeftActionIconElement","cloneElement","LeftFooterAction","text","actionType","disabled","action","type","loading","variant","order","marginRight","href","e","preventDefault","display","flexDirection","maxHeight","loader","alt","fallbacks","src","map","b","i","id"],"sources":["../../src/Modals/ModalDialog.tsx"],"sourcesContent":["import React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport { Size } from '../types';\nimport ModalContainer from './ModalContainer';\nimport {\n  BackButtonWrapper,\n  CloseButtonWrapper,\n  Column,\n  FlexContainer,\n  ModalBody,\n  ModalFooter,\n  ModalHeaderActions,\n  ModalHeaderActionsWithImage,\n  ModalTitleSection,\n  StyledModalHeader,\n  ModalHoverModifier,\n  ImageOverlay,\n  ImageContainer,\n} from './ModalStyles';\n\nimport { ModalNote } from './ModalNote';\nimport { TooltipWrapper } from '../Tooltips';\nimport { ButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\nimport { HyperLink, ImageWithFallbacks } from '..';\nimport { ImageWithFallbacksProps } from '../Image/ImageWithFallbacks';\n\ninterface NewModalProps {\n  size?: Size;\n  isModalOpen: boolean;\n  children?: React.ReactNode;\n  closeModalAndClearInput: any;\n  title?: string | React.ReactNode;\n  topImage?: any;\n  topImageWithFallbacksProps?: ImageWithFallbacksProps;\n  topImageGrayscale?: boolean;\n  buttons?: ButtonAction[];\n  leftFooterAction?: LeftFooterAction;\n  tooltip?: string;\n  backButton?: () => void;\n  closeAction: () => void;\n  submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n  note?: string | React.ReactNode;\n  state?: string;\n  icon?: React.ReactNode;\n  zIndex?: number;\n  contentOverflow?: string;\n  width?: string;\n  hasContentBorders?: boolean;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n  size,\n  isModalOpen,\n  closeModalAndClearInput,\n  title,\n  topImage,\n  topImageWithFallbacksProps,\n  topImageGrayscale,\n  buttons,\n  leftFooterAction,\n  backButton,\n  closeAction,\n  submitAction,\n  tooltip,\n  children,\n  note,\n  state,\n  icon,\n  zIndex,\n  contentOverflow,\n  width,\n  hasContentBorders,\n}) => {\n  const getMinWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '320px';\n      case Size.Large:\n        return '640px';\n      case Size.Medium:\n      default:\n        return '480px';\n    }\n  };\n\n  const getMaxWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '480px';\n      case Size.Large:\n        return '720px';\n      case Size.Medium:\n      default:\n        return '640px';\n    }\n  };\n\n  const getImageHeight = () => {\n    switch (size) {\n      case Size.Small:\n        return 160;\n      case Size.Medium:\n        return 200;\n      case Size.Large:\n        return 240;\n      default:\n        return 200;\n    }\n  };\n\n  const getMarginBottom = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px';\n      case Size.Medium:\n        return '24px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px';\n    }\n  };\n\n  const getPadding = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px 16px 8px';\n      case Size.Medium:\n        return '24px 24px 20px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px 24px 16px';\n    }\n  };\n\n  const getMaxHeight = () => {\n    switch (size) {\n      case Size.Small:\n        return 'calc(100vh - 56px)';\n      case Size.Medium:\n        return 'calc(100vh - 76px)';\n      case Size.Large:\n        return 'calc(100vh - 96px)';\n      default:\n        return 'calc(100vh - 72px)';\n    }\n  };\n\n  const ModalTitle = (title: string | React.ReactNode, size?: Size) => {\n    if (typeof title === 'string') {\n      switch (size) {\n        case Size.Small:\n          return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n        case Size.Medium:\n          return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n        case Size.Large:\n          return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n        default:\n          return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n      }\n    } else {\n      return title;\n    }\n  };\n\n  const ModalTootip = (tooltip: string) => {\n    return (\n      <ModalHoverModifier>\n        <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"top\" withArrow={false} label={tooltip}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => {}}>\n            <Help size=\"24px\" color={COLORS.neutral_600} />\n          </IconButton>\n        </TooltipWrapper>\n      </ModalHoverModifier>\n    );\n  };\n\n  const ModalCloseButton = (onClick: any) => {\n    return (\n      <CloseButtonWrapper hasImage={!!topImage || !!topImageWithFallbacksProps} size={size}>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n          <Close size=\"24px\" color={COLORS.black} />\n        </IconButton>\n      </CloseButtonWrapper>\n    );\n  };\n\n  const ModalBackButton = () => {\n    if (backButton) {\n      return (\n        <BackButtonWrapper hasImage={!!topImage || !!topImageWithFallbacksProps} size={size}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n            <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n          </IconButton>\n        </BackButtonWrapper>\n      );\n    }\n  };\n\n  const getLeftActionIconElement = (icon: React.ReactNode) => {\n    return React.cloneElement(icon as React.ReactElement, { size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px' });\n  };\n\n  const LeftFooterAction = (leftFooterAction: LeftFooterAction) => {\n    const { text, actionType, disabled, icon, action } = leftFooterAction;\n    switch (actionType) {\n      case 'button':\n        return (\n          <Button\n            id={'left-action-button'}\n            type={(leftFooterAction as LeftFooterButton)?.type}\n            disabled={disabled}\n            loading={(leftFooterAction as LeftFooterButton)?.loading}\n            icon={icon}\n            size={size}\n            onClick={action}\n            variant={(leftFooterAction as LeftFooterButton)?.variant ?? 'secondary'}\n            style={{ order: -1, marginRight: 'auto' }}>\n            {text}\n          </Button>\n        );\n      case 'hyperlink':\n        return (\n          <HyperLink\n            id=\"left-action-hyperlink\"\n            className=\"footer-action\"\n            href={(leftFooterAction as LeftFooterHyperlink).href}\n            disabled={disabled}\n            variant=\"default\"\n            onClick={(e) => {\n              if (action) {\n                e.preventDefault();\n                action(e);\n              }\n            }}>\n            {icon && getLeftActionIconElement(icon)}\n            {text}\n          </HyperLink>\n        );\n      case 'note':\n        return (\n          <div className=\"footer-action note\">\n            {icon && getLeftActionIconElement(icon)}\n            <span>{text}</span>\n          </div>\n        );\n    }\n  };\n\n  return (\n    <ModalContainer\n      showModal={isModalOpen}\n      closeModal={closeModalAndClearInput}\n      minWidth={getMinWidth()}\n      maxWidth={getMaxWidth()}\n      height=\"auto\"\n      padding={getPadding()}\n      zIndex={zIndex}\n      width={width}>\n      <Column>\n        <form onSubmit={submitAction} style={{ display: 'flex', flexDirection: 'column', maxHeight: getMaxHeight() }}>\n          {(topImage || topImageWithFallbacksProps) && (\n            <StyledModalHeader size={size} $height={getImageHeight()} marginBottom={getMarginBottom()}>\n              <ImageContainer $height={getImageHeight()}>\n                {topImageGrayscale && <ImageOverlay $height={getImageHeight()} />}\n                {topImage && <img src={topImage} alt=\"Modal top\" />}\n                {!topImage && topImageWithFallbacksProps && (\n                  <ImageWithFallbacks\n                    loader={topImageWithFallbacksProps.loader}\n                    alt={topImageWithFallbacksProps.alt}\n                    fallbacks={topImageWithFallbacksProps.fallbacks}\n                    src={topImageWithFallbacksProps.src}\n                  />\n                )}\n              </ImageContainer>\n              <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\n                {ModalBackButton()}\n                {ModalCloseButton(closeAction)}\n              </ModalHeaderActionsWithImage>\n            </StyledModalHeader>\n          )}\n          <ModalTitleSection>\n            <FlexContainer>\n              {!(topImage || topImageWithFallbacksProps) && ModalBackButton()}\n              {title && ModalTitle(title, size)}\n            </FlexContainer>\n            {(tooltip || !(topImage || topImageWithFallbacksProps)) && (\n              <ModalHeaderActions>\n                {tooltip && ModalTootip(tooltip)}\n                {!(topImage || topImageWithFallbacksProps) && ModalCloseButton(closeAction)}\n              </ModalHeaderActions>\n            )}\n          </ModalTitleSection>\n\n          <ModalBody size={size} overflow={contentOverflow} hasContentBorders={hasContentBorders}>\n            {children}\n          </ModalBody>\n\n          {note && <ModalNote note={note} state={state} size={size} icon={icon} />}\n\n          <ModalFooter size={size}>\n            {leftFooterAction && LeftFooterAction(leftFooterAction)}\n            {buttons?.map((b, i) => (\n              <Button key={b.id || i} icon={b.icon} id={b.id} disabled={b.disabled} loading={b.loading} size={size} onClick={b.action} type={b.type} variant={b.variant}>\n                {b.text}\n              </Button>\n            ))}\n          </ModalFooter>\n        </form>\n      </Column>\n    </ModalContainer>\n  );\n};\n\nexport default ModalDialog;\n"],"mappings":"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"}

package/dist/NavItem/NavItem.cjs

@@ -7,19 +7,40 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _react = _interopRequireDefault(require("react"));
+
 var _styles = require("../styles");
 
 var _typography = require("../styles/typography");
 
 var _zIndexes = require("../styles/z-indexes");
 
+var _common = require("../common");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
 var _templateObject;
 
-var NavItem = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n\n  margin: 0;\n  padding: 0 21px 0 21px;\n  height: 64px;\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 3px;\n    background-color: transparent;\n  }\n\n  &.active:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &.disabled {\n    color: ", ";\n    background-color: ", ";\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &:hover:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &:focus:not(.disabled) {\n    ", "\n  }\n"])), (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), _zIndexes.Z_INDEXES.active, _styles.COLORS.neutral_20, _styles.COLORS.neutral_800, _styles.COLORS.primary_600, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_600, _styles.focusStyles);
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var NavItemDiv = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n\n  margin: 0;\n  padding: 0 21px 0 21px;\n  height: 64px;\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 3px;\n    background-color: transparent;\n  }\n\n  &.active:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &.disabled {\n    color: ", ";\n    background-color: ", ";\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &:hover:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &.focus-visible {\n    ", "\n  }\n"])), (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), _zIndexes.Z_INDEXES.active, _styles.COLORS.neutral_20, _styles.COLORS.neutral_800, _styles.COLORS.primary_600, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_600, _styles.focusStyles);
+
+var NavItem = function NavItem(props) {
+  var focusVisibleRef = (0, _common.useFocusVisibleRef)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(NavItemDiv, _objectSpread(_objectSpread({}, props), {}, {
+    ref: focusVisibleRef
+  }));
+};
 
 var _default = NavItem;
 exports.default = _default;

package/dist/NavItem/NavItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavItem.cjs","names":["NavItem","styled","div","ComponentMStyling","ComponentTextStyle","Regular","COLORS","neutral_600","Z_INDEXES","active","neutral_20","neutral_800","primary_600","neutral_300","neutral_100","hover","primary_20","primary_700","focusStyles"],"sources":["../../src/NavItem/NavItem.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport {COLORS, focusStyles} from '../styles';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst NavItem = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  margin: 0;\n  padding: 0 21px 0 21px;\n  height: 64px;\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 3px;\n    background-color: transparent;\n  }\n\n  &.active:not(.disabled) {\n    z-index: ${Z_INDEXES.active};\n    background-color: ${COLORS.neutral_20};\n    color: ${COLORS.neutral_800};\n    &:after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n\n  &.disabled {\n    color: ${COLORS.neutral_300};\n    background-color: ${COLORS.neutral_100};\n    &:after {\n      background-color: ${COLORS.neutral_100};\n    }\n  }\n\n  &:hover:not(.disabled) {\n    z-index: ${Z_INDEXES.hover};\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    &:after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n\n  &:focus:not(.disabled) {\n    ${focusStyles}\n  }\n`;\n\nexport default NavItem;\n"],"mappings":";;;;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;;;AAEA,IAAMA,OAAO,GAAGC,yBAAA,CAAOC,GAAV,04BACT,IAAAC,6BAAA,EAAkBC,8BAAA,CAAmBC,OAArC,EAA8CC,cAAA,CAAOC,WAArD,CADS,EAwBEC,mBAAA,CAAUC,MAxBZ,EAyBWH,cAAA,CAAOI,UAzBlB,EA0BAJ,cAAA,CAAOK,WA1BP,EA4BaL,cAAA,CAAOM,WA5BpB,EAiCAN,cAAA,CAAOO,WAjCP,EAkCWP,cAAA,CAAOQ,WAlClB,EAoCaR,cAAA,CAAOQ,WApCpB,EAyCEN,mBAAA,CAAUO,KAzCZ,EA0CWT,cAAA,CAAOU,UA1ClB,EA2CAV,cAAA,CAAOW,WA3CP,EA6CaX,cAAA,CAAOM,WA7CpB,EAkDPM,mBAlDO,CAAb;;eAsDelB,O"}
+{"version":3,"file":"NavItem.cjs","names":["NavItemDiv","styled","div","ComponentMStyling","ComponentTextStyle","Regular","COLORS","neutral_600","Z_INDEXES","active","neutral_20","neutral_800","primary_600","neutral_300","neutral_100","hover","primary_20","primary_700","focusStyles","NavItem","props","focusVisibleRef","useFocusVisibleRef"],"sources":["../../src/NavItem/NavItem.tsx"],"sourcesContent":["import styled, { StyledComponentProps } from 'styled-components';\nimport React from 'react';\nimport {COLORS, focusStyles} from '../styles';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport { useFocusVisibleRef } from '../common';\n\nexport type StyledComponentPropsWithAs<\n    C extends string | React.ComponentType<any>,\n    T extends object,\n    O extends object,\n    A extends keyof any,\n    AsC extends string | React.ComponentType<any> = C,\n    FAsC extends string | React.ComponentType<any> = C\n> = StyledComponentProps<C, T, O, A, FAsC> & { as?: AsC | undefined; forwardedAs?: FAsC | undefined };\n\n\nconst NavItemDiv = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  margin: 0;\n  padding: 0 21px 0 21px;\n  height: 64px;\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 3px;\n    background-color: transparent;\n  }\n\n  &.active:not(.disabled) {\n    z-index: ${Z_INDEXES.active};\n    background-color: ${COLORS.neutral_20};\n    color: ${COLORS.neutral_800};\n    &:after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n\n  &.disabled {\n    color: ${COLORS.neutral_300};\n    background-color: ${COLORS.neutral_100};\n    &:after {\n      background-color: ${COLORS.neutral_100};\n    }\n  }\n\n  &:hover:not(.disabled) {\n    z-index: ${Z_INDEXES.hover};\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    &:after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n\n  &.focus-visible {\n    ${focusStyles}\n  }\n`;\n\n\nconst NavItem = (props: StyledComponentPropsWithAs<string | React.ComponentType<any>, any, {}, never, string | React.ComponentType<any>, \"div\">) => {\n  const focusVisibleRef = useFocusVisibleRef();\n  return (\n    <NavItemDiv {...props} ref={focusVisibleRef} />\n  );\n};\n\nexport default NavItem;\n"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAYA,IAAMA,UAAU,GAAGC,yBAAA,CAAOC,GAAV,m4BACZ,IAAAC,6BAAA,EAAkBC,8BAAA,CAAmBC,OAArC,EAA8CC,cAAA,CAAOC,WAArD,CADY,EAwBDC,mBAAA,CAAUC,MAxBT,EAyBQH,cAAA,CAAOI,UAzBf,EA0BHJ,cAAA,CAAOK,WA1BJ,EA4BUL,cAAA,CAAOM,WA5BjB,EAiCHN,cAAA,CAAOO,WAjCJ,EAkCQP,cAAA,CAAOQ,WAlCf,EAoCUR,cAAA,CAAOQ,WApCjB,EAyCDN,mBAAA,CAAUO,KAzCT,EA0CQT,cAAA,CAAOU,UA1Cf,EA2CHV,cAAA,CAAOW,WA3CJ,EA6CUX,cAAA,CAAOM,WA7CjB,EAkDVM,mBAlDU,CAAhB;;AAuDA,IAAMC,OAAO,GAAG,SAAVA,OAAU,CAACC,KAAD,EAAoI;EAClJ,IAAMC,eAAe,GAAG,IAAAC,0BAAA,GAAxB;EACA,oBACE,qBAAC,UAAD,kCAAgBF,KAAhB;IAAuB,GAAG,EAAEC;EAA5B,GADF;AAGD,CALD;;eAOeF,O"}

package/dist/NavItem/NavItem.d.ts

@@ -1,2 +1,8 @@
-declare const NavItem: import("styled-components").StyledComponent<"div", any, {}, never>;
+import { StyledComponentProps } from 'styled-components';
+import React from 'react';
+export declare type StyledComponentPropsWithAs<C extends string | React.ComponentType<any>, T extends object, O extends object, A extends keyof any, AsC extends string | React.ComponentType<any> = C, FAsC extends string | React.ComponentType<any> = C> = StyledComponentProps<C, T, O, A, FAsC> & {
+    as?: AsC | undefined;
+    forwardedAs?: FAsC | undefined;
+};
+declare const NavItem: (props: StyledComponentPropsWithAs<string | React.ComponentType<any>, any, {}, never, string | React.ComponentType<any>, "div">) => JSX.Element;
 export default NavItem;

package/dist/NavItem/NavItem.js

@@ -1,11 +1,28 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
 
 var _templateObject;
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 import styled from 'styled-components';
+import React from 'react';
 import { COLORS, focusStyles } from '../styles';
 import { ComponentMStyling, ComponentTextStyle } from '../styles/typography';
 import { Z_INDEXES } from '../styles/z-indexes';
-var NavItem = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n\n  margin: 0;\n  padding: 0 21px 0 21px;\n  height: 64px;\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 3px;\n    background-color: transparent;\n  }\n\n  &.active:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &.disabled {\n    color: ", ";\n    background-color: ", ";\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &:hover:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &:focus:not(.disabled) {\n    ", "\n  }\n"])), ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), Z_INDEXES.active, COLORS.neutral_20, COLORS.neutral_800, COLORS.primary_600, COLORS.neutral_300, COLORS.neutral_100, COLORS.neutral_100, Z_INDEXES.hover, COLORS.primary_20, COLORS.primary_700, COLORS.primary_600, focusStyles);
+import { useFocusVisibleRef } from '../common';
+import { jsx as _jsx } from "react/jsx-runtime";
+var NavItemDiv = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n\n  margin: 0;\n  padding: 0 21px 0 21px;\n  height: 64px;\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 3px;\n    background-color: transparent;\n  }\n\n  &.active:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &.disabled {\n    color: ", ";\n    background-color: ", ";\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &:hover:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &.focus-visible {\n    ", "\n  }\n"])), ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), Z_INDEXES.active, COLORS.neutral_20, COLORS.neutral_800, COLORS.primary_600, COLORS.neutral_300, COLORS.neutral_100, COLORS.neutral_100, Z_INDEXES.hover, COLORS.primary_20, COLORS.primary_700, COLORS.primary_600, focusStyles);
+
+var NavItem = function NavItem(props) {
+  var focusVisibleRef = useFocusVisibleRef();
+  return /*#__PURE__*/_jsx(NavItemDiv, _objectSpread(_objectSpread({}, props), {}, {
+    ref: focusVisibleRef
+  }));
+};
+
 export default NavItem;
 //# sourceMappingURL=NavItem.js.map

package/dist/NavItem/NavItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavItem.js","names":["styled","COLORS","focusStyles","ComponentMStyling","ComponentTextStyle","Z_INDEXES","NavItem","div","Regular","neutral_600","active","neutral_20","neutral_800","primary_600","neutral_300","neutral_100","hover","primary_20","primary_700"],"sources":["../../src/NavItem/NavItem.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport {COLORS, focusStyles} from '../styles';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst NavItem = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  margin: 0;\n  padding: 0 21px 0 21px;\n  height: 64px;\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 3px;\n    background-color: transparent;\n  }\n\n  &.active:not(.disabled) {\n    z-index: ${Z_INDEXES.active};\n    background-color: ${COLORS.neutral_20};\n    color: ${COLORS.neutral_800};\n    &:after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n\n  &.disabled {\n    color: ${COLORS.neutral_300};\n    background-color: ${COLORS.neutral_100};\n    &:after {\n      background-color: ${COLORS.neutral_100};\n    }\n  }\n\n  &:hover:not(.disabled) {\n    z-index: ${Z_INDEXES.hover};\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    &:after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n\n  &:focus:not(.disabled) {\n    ${focusStyles}\n  }\n`;\n\nexport default NavItem;\n"],"mappings":";;;;AAAA,OAAOA,MAAP,MAAmB,mBAAnB;AAEA,SAAQC,MAAR,EAAgBC,WAAhB,QAAkC,WAAlC;AACA,SAASC,iBAAT,EAA4BC,kBAA5B,QAAsD,sBAAtD;AACA,SAAQC,SAAR,QAAwB,qBAAxB;AAEA,IAAMC,OAAO,GAAGN,MAAM,CAACO,GAAV,43BACTJ,iBAAiB,CAACC,kBAAkB,CAACI,OAApB,EAA6BP,MAAM,CAACQ,WAApC,CADR,EAwBEJ,SAAS,CAACK,MAxBZ,EAyBWT,MAAM,CAACU,UAzBlB,EA0BAV,MAAM,CAACW,WA1BP,EA4BaX,MAAM,CAACY,WA5BpB,EAiCAZ,MAAM,CAACa,WAjCP,EAkCWb,MAAM,CAACc,WAlClB,EAoCad,MAAM,CAACc,WApCpB,EAyCEV,SAAS,CAACW,KAzCZ,EA0CWf,MAAM,CAACgB,UA1ClB,EA2CAhB,MAAM,CAACiB,WA3CP,EA6CajB,MAAM,CAACY,WA7CpB,EAkDPX,WAlDO,CAAb;AAsDA,eAAeI,OAAf"}
+{"version":3,"file":"NavItem.js","names":["styled","React","COLORS","focusStyles","ComponentMStyling","ComponentTextStyle","Z_INDEXES","useFocusVisibleRef","NavItemDiv","div","Regular","neutral_600","active","neutral_20","neutral_800","primary_600","neutral_300","neutral_100","hover","primary_20","primary_700","NavItem","props","focusVisibleRef"],"sources":["../../src/NavItem/NavItem.tsx"],"sourcesContent":["import styled, { StyledComponentProps } from 'styled-components';\nimport React from 'react';\nimport {COLORS, focusStyles} from '../styles';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport { useFocusVisibleRef } from '../common';\n\nexport type StyledComponentPropsWithAs<\n    C extends string | React.ComponentType<any>,\n    T extends object,\n    O extends object,\n    A extends keyof any,\n    AsC extends string | React.ComponentType<any> = C,\n    FAsC extends string | React.ComponentType<any> = C\n> = StyledComponentProps<C, T, O, A, FAsC> & { as?: AsC | undefined; forwardedAs?: FAsC | undefined };\n\n\nconst NavItemDiv = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  margin: 0;\n  padding: 0 21px 0 21px;\n  height: 64px;\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 3px;\n    background-color: transparent;\n  }\n\n  &.active:not(.disabled) {\n    z-index: ${Z_INDEXES.active};\n    background-color: ${COLORS.neutral_20};\n    color: ${COLORS.neutral_800};\n    &:after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n\n  &.disabled {\n    color: ${COLORS.neutral_300};\n    background-color: ${COLORS.neutral_100};\n    &:after {\n      background-color: ${COLORS.neutral_100};\n    }\n  }\n\n  &:hover:not(.disabled) {\n    z-index: ${Z_INDEXES.hover};\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    &:after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n\n  &.focus-visible {\n    ${focusStyles}\n  }\n`;\n\n\nconst NavItem = (props: StyledComponentPropsWithAs<string | React.ComponentType<any>, any, {}, never, string | React.ComponentType<any>, \"div\">) => {\n  const focusVisibleRef = useFocusVisibleRef();\n  return (\n    <NavItemDiv {...props} ref={focusVisibleRef} />\n  );\n};\n\nexport default NavItem;\n"],"mappings":";;;;;;;;;;AAAA,OAAOA,MAAP,MAA6C,mBAA7C;AACA,OAAOC,KAAP,MAAkB,OAAlB;AACA,SAAQC,MAAR,EAAgBC,WAAhB,QAAkC,WAAlC;AACA,SAASC,iBAAT,EAA4BC,kBAA5B,QAAsD,sBAAtD;AACA,SAAQC,SAAR,QAAwB,qBAAxB;AACA,SAASC,kBAAT,QAAmC,WAAnC;;AAYA,IAAMC,UAAU,GAAGR,MAAM,CAACS,GAAV,q3BACZL,iBAAiB,CAACC,kBAAkB,CAACK,OAApB,EAA6BR,MAAM,CAACS,WAApC,CADL,EAwBDL,SAAS,CAACM,MAxBT,EAyBQV,MAAM,CAACW,UAzBf,EA0BHX,MAAM,CAACY,WA1BJ,EA4BUZ,MAAM,CAACa,WA5BjB,EAiCHb,MAAM,CAACc,WAjCJ,EAkCQd,MAAM,CAACe,WAlCf,EAoCUf,MAAM,CAACe,WApCjB,EAyCDX,SAAS,CAACY,KAzCT,EA0CQhB,MAAM,CAACiB,UA1Cf,EA2CHjB,MAAM,CAACkB,WA3CJ,EA6CUlB,MAAM,CAACa,WA7CjB,EAkDVZ,WAlDU,CAAhB;;AAuDA,IAAMkB,OAAO,GAAG,SAAVA,OAAU,CAACC,KAAD,EAAoI;EAClJ,IAAMC,eAAe,GAAGhB,kBAAkB,EAA1C;EACA,oBACE,KAAC,UAAD,kCAAgBe,KAAhB;IAAuB,GAAG,EAAEC;EAA5B,GADF;AAGD,CALD;;AAOA,eAAeF,OAAf"}

package/dist/NavItem/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":[],"sources":["../../src/NavItem/index.ts"],"sourcesContent":["export { default as NavItem } from './NavItem';\n"],"mappings":";;;;;;;;;;;;;;AAAA"}
+{"version":3,"file":"index.cjs","names":[],"sources":["../../src/NavItem/index.ts"],"sourcesContent":["export { default as NavItem } from './NavItem';\nexport { type StyledComponentPropsWithAs } from './NavItem';\n"],"mappings":";;;;;;;;;;;;;;AAAA"}

package/dist/NavItem/index.d.ts

@@ -1 +1,2 @@
 export { default as NavItem } from './NavItem';
+export { type StyledComponentPropsWithAs } from './NavItem';

package/dist/NavItem/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default","NavItem"],"sources":["../../src/NavItem/index.ts"],"sourcesContent":["export { default as NavItem } from './NavItem';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,OAApB,QAAmC,WAAnC"}
+{"version":3,"file":"index.js","names":["default","NavItem"],"sources":["../../src/NavItem/index.ts"],"sourcesContent":["export { default as NavItem } from './NavItem';\nexport { type StyledComponentPropsWithAs } from './NavItem';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,OAApB,QAAmC,WAAnC"}

package/dist/Paginator/Paginator.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare type PaginatorProps = {
     pageCount: number;
     currentPage: number;

package/dist/QuizButton/QuizButton.cjs

@@ -108,7 +108,9 @@ var QuizButton = function QuizButton(_ref) {
     onMouseDown: _.defaultOnMouseDownHandler,
     size: size,
     className: 'quiz-button '.concat(selected ? ' selected' : '').concat(disabled ? ' disabled' : '').concat(resultType ? ' result ' + resultType : '').concat(className ? ' ' + className : ''),
-    "data-testid": 'container'
+    "data-testid": 'container',
+    "aria-checked": selected,
+    role: type === 'radio' ? 'radio' : 'checkbox'
   }, rest), {}, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonContainer, {
       "data-testid": 'btnContainer',

package/dist/QuizButton/QuizButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"QuizButton.cjs","names":["TextContainer","styled","div","COLORS","accent1_20","props","size","Size","Small","Large","ComponentSStyling","ComponentTextStyle","Regular","ComponentLStyling","ComponentMStyling","TextWrapper","ButtonContainer","accent1_100","accent1_600","OptionContainer","accent1_200","neutral_100","neutral_20","neutral_300","correct_20","correct_400","critical_20","critical_500","warning_20","warning_400","focusStyles","accent1_300","isSelected","accent1_700","accent1_400","accent1_800","renderResultContent","resultType","white","QuizButton","text","type","onClick","id","className","selected","disabled","Medium","rest","defaultOnMouseDownHandler","concat"],"sources":["../../src/QuizButton/QuizButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {Checkbox, COLORS, defaultOnMouseDownHandler, focusStyles, RadioButton, Size, SystemIcons} from '..';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nconst TextContainer = styled.div<{size: Size}>`\n  border-radius: 0 8px 8px 0;\n  display: flex;\n  background: ${COLORS.accent1_20};\n  width: 100%;\n\n  transition: background 100ms ease-in-out;\n  align-items: center;\n\n  padding: ${props=>props.size===Size.Small?'6px 8px':(props.size===Size.Large?'20px 16px':'12px 16px')};\n  ${props=>props.size===Size.Small ? ComponentSStyling(ComponentTextStyle.Regular,null) : (props.size===Size.Large ? ComponentLStyling(ComponentTextStyle.Regular,null) : ComponentMStyling(ComponentTextStyle.Regular,null))}\n`;\n\nconst TextWrapper = styled.div<{size:Size}>``;\n\nconst ButtonContainer = styled.div<{size: Size}>`\n  border-radius: 8px 0 0 8px;\n  display: flex;\n  background: ${COLORS.accent1_100};\n\n  width: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\n\n  transition: background 100ms ease-in-out;\n\n  .quiz-button-result-icon {\n    height: ${props=>props.size===Size.Small?'16px':(props.size===Size.Large?'32px':'24px')};\n    width: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\n  }\n\n  .radio-button-icon, .checkbox-icon {\n    margin: auto;\n    min-width: unset;\n    background: transparent;\n\n    svg {\n      color: ${COLORS.accent1_600};\n    }\n\n    &:hover {\n      background: transparent;\n    }\n\n    &:active {\n      background: transparent;\n    }\n  }\n\n  .small {\n    min-width: 32px;\n    min-height: 32px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 16px;\n        width: 16px;\n      }\n    }\n  }\n\n  .medium {\n    min-width: 48px;\n    min-height: 48px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 24px;\n        width: 24px;\n      }\n    }\n  }\n\n  .large {\n    min-width: 64px;\n    min-height: 64px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 32px;\n        width: 32px;\n      }\n    }\n  }\n`;\n\nconst OptionContainer = styled.div<{isSelected:boolean, size:Size}>`\n  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n  max-width: 65ch;  \n  word-break: break-word;\n\n  min-height: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\n  margin-bottom: ${props=>props.size===Size.Small?'16px':(props.size===Size.Large?'32px':'24px')};\n\n  &.selected {\n    ${TextContainer} {\n      background: ${COLORS.accent1_100};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.accent1_200};\n    }\n  }\n  \n  &.disabled {\n    cursor: not-allowed;\n    \n    ${ButtonContainer} {\n      pointer-events: none;\n      background: ${COLORS.neutral_100};\n    }\n    ${TextContainer} {\n      pointer-events: none;\n      background: ${COLORS.neutral_20};\n      color: ${COLORS.neutral_300};\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &.correct {\n    ${TextContainer} {    \n      background: ${COLORS.correct_20};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.correct_400};\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.incorrect {\n    ${TextContainer} {    \n      background: ${COLORS.critical_20};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.critical_500};\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.partial {\n    ${TextContainer} {    \n      background: ${COLORS.warning_20};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.warning_400};\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &:focus,\n  &.focus-state {\n    ${focusStyles}\n  }\n\n  &:hover,\n  &.hover-state {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:active,\n  &.active-state {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:hover:not(.disabled):not(.result),\n  &.hover-state {\n    ${ButtonContainer} {\n      background: ${COLORS.accent1_300};\n    }\n    ${TextContainer} {\n      background: ${props=>props.isSelected ? COLORS.accent1_200  : COLORS.accent1_100};\n    }\n    \n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ${COLORS.accent1_700};\n      }\n    }\n  }\n\n  &:active:not(.disabled):not(.result),\n  &.active-state {\n    ${ButtonContainer} {\n      background: ${COLORS.accent1_400};\n      transition: none;\n    }\n    ${TextContainer} {\n      background: ${props=>props.isSelected ? COLORS.accent1_300 : COLORS.accent1_200};\n      transition: none;\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ${COLORS.accent1_800};\n      }\n    }\n  }\n`;\n\nconst renderResultContent = (resultType: string) => {\n  switch(resultType){\n    case 'correct' : return <SystemIcons.CheckMark color={COLORS.white} className={'quiz-button-result-icon'}/>;\n\n    case 'incorrect' : return <SystemIcons.Close color={COLORS.white} className={'quiz-button-result-icon'}/>;\n\n    default : return <SystemIcons.Close color={COLORS.white} className={'quiz-button-result-icon'}/>;\n  }\n};\n\ntype QuizButtonProps = {\n  resultType?: 'correct' | 'incorrect' | 'partial';\n  text: string;\n  onClick?: (arg:any)=>void;\n  id: string;\n  selected?: boolean;\n  disabled?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n  type: 'radio' | 'checkbox';\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'id' | 'tabIndex' | 'onMouseDown'>\n\nconst QuizButton: React.FunctionComponent<QuizButtonProps> = ({\n                                                                text,\n                                                                type,\n                                                                onClick,\n                                                                resultType,\n                                                                id,\n                                                                className,\n                                                                selected = false,\n                                                                disabled = false,\n                                                                size = Size.Medium,\n                                                                ...rest\n                                                              }) => {\n  return (   \n    <OptionContainer\n      onClick={onClick}\n      isSelected={selected}\n      tabIndex={(disabled || resultType) ? -1 : 0}\n      onMouseDown={defaultOnMouseDownHandler}\n      size={size}\n      className={'quiz-button '.concat(selected ? ' selected' : '')\n        .concat(disabled ? ' disabled' : '')\n        .concat(resultType ? ' result ' + resultType : '')\n        .concat(className ? ' ' + className : '')}\n      data-testid={'container'}\n      {...rest}>\n        <ButtonContainer data-testid={'btnContainer'} className={'quiz-button-icon'} size={size}>\n          {\n            resultType ? renderResultContent(resultType) : (\n                                type==='radio' ? <RadioButton selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\n                                select={()=>{}} id={id}/> : <Checkbox selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\n                                select={()=>{}} id={id}/>\n                              )\n          }\n        </ButtonContainer>\n\n        <TextContainer data-testid={'txtContainer'} className={'quiz-button-text'} size={size}>\n          <TextWrapper size={size}>\n            {text}\n          </TextWrapper>\n        </TextContainer>\n    </OptionContainer>\n  );\n};\n\nexport default QuizButton;\n"],"mappings":"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"}
+{"version":3,"file":"QuizButton.cjs","names":["TextContainer","styled","div","COLORS","accent1_20","props","size","Size","Small","Large","ComponentSStyling","ComponentTextStyle","Regular","ComponentLStyling","ComponentMStyling","TextWrapper","ButtonContainer","accent1_100","accent1_600","OptionContainer","accent1_200","neutral_100","neutral_20","neutral_300","correct_20","correct_400","critical_20","critical_500","warning_20","warning_400","focusStyles","accent1_300","isSelected","accent1_700","accent1_400","accent1_800","renderResultContent","resultType","white","QuizButton","text","type","onClick","id","className","selected","disabled","Medium","rest","defaultOnMouseDownHandler","concat"],"sources":["../../src/QuizButton/QuizButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {Checkbox, COLORS, defaultOnMouseDownHandler, focusStyles, RadioButton, Size, SystemIcons} from '..';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nconst TextContainer = styled.div<{size: Size}>`\n  border-radius: 0 8px 8px 0;\n  display: flex;\n  background: ${COLORS.accent1_20};\n  width: 100%;\n\n  transition: background 100ms ease-in-out;\n  align-items: center;\n\n  padding: ${props=>props.size===Size.Small?'6px 8px':(props.size===Size.Large?'20px 16px':'12px 16px')};\n  ${props=>props.size===Size.Small ? ComponentSStyling(ComponentTextStyle.Regular,null) : (props.size===Size.Large ? ComponentLStyling(ComponentTextStyle.Regular,null) : ComponentMStyling(ComponentTextStyle.Regular,null))}\n`;\n\nconst TextWrapper = styled.div<{size:Size}>``;\n\nconst ButtonContainer = styled.div<{size: Size}>`\n  border-radius: 8px 0 0 8px;\n  display: flex;\n  background: ${COLORS.accent1_100};\n\n  width: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\n\n  transition: background 100ms ease-in-out;\n\n  .quiz-button-result-icon {\n    height: ${props=>props.size===Size.Small?'16px':(props.size===Size.Large?'32px':'24px')};\n    width: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\n  }\n\n  .radio-button-icon, .checkbox-icon {\n    margin: auto;\n    min-width: unset;\n    background: transparent;\n\n    svg {\n      color: ${COLORS.accent1_600};\n    }\n\n    &:hover {\n      background: transparent;\n    }\n\n    &:active {\n      background: transparent;\n    }\n  }\n\n  .small {\n    min-width: 32px;\n    min-height: 32px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 16px;\n        width: 16px;\n      }\n    }\n  }\n\n  .medium {\n    min-width: 48px;\n    min-height: 48px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 24px;\n        width: 24px;\n      }\n    }\n  }\n\n  .large {\n    min-width: 64px;\n    min-height: 64px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 32px;\n        width: 32px;\n      }\n    }\n  }\n`;\n\nconst OptionContainer = styled.div<{isSelected:boolean, size:Size}>`\n  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n  max-width: 65ch;  \n  word-break: break-word;\n\n  min-height: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\n  margin-bottom: ${props=>props.size===Size.Small?'16px':(props.size===Size.Large?'32px':'24px')};\n\n  &.selected {\n    ${TextContainer} {\n      background: ${COLORS.accent1_100};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.accent1_200};\n    }\n  }\n  \n  &.disabled {\n    cursor: not-allowed;\n    \n    ${ButtonContainer} {\n      pointer-events: none;\n      background: ${COLORS.neutral_100};\n    }\n    ${TextContainer} {\n      pointer-events: none;\n      background: ${COLORS.neutral_20};\n      color: ${COLORS.neutral_300};\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &.correct {\n    ${TextContainer} {    \n      background: ${COLORS.correct_20};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.correct_400};\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.incorrect {\n    ${TextContainer} {    \n      background: ${COLORS.critical_20};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.critical_500};\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.partial {\n    ${TextContainer} {    \n      background: ${COLORS.warning_20};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.warning_400};\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &:focus,\n  &.focus-state {\n    ${focusStyles}\n  }\n\n  &:hover,\n  &.hover-state {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:active,\n  &.active-state {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:hover:not(.disabled):not(.result),\n  &.hover-state {\n    ${ButtonContainer} {\n      background: ${COLORS.accent1_300};\n    }\n    ${TextContainer} {\n      background: ${props=>props.isSelected ? COLORS.accent1_200  : COLORS.accent1_100};\n    }\n    \n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ${COLORS.accent1_700};\n      }\n    }\n  }\n\n  &:active:not(.disabled):not(.result),\n  &.active-state {\n    ${ButtonContainer} {\n      background: ${COLORS.accent1_400};\n      transition: none;\n    }\n    ${TextContainer} {\n      background: ${props=>props.isSelected ? COLORS.accent1_300 : COLORS.accent1_200};\n      transition: none;\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ${COLORS.accent1_800};\n      }\n    }\n  }\n`;\n\nconst renderResultContent = (resultType: string) => {\n  switch(resultType){\n    case 'correct' : return <SystemIcons.CheckMark color={COLORS.white} className={'quiz-button-result-icon'}/>;\n\n    case 'incorrect' : return <SystemIcons.Close color={COLORS.white} className={'quiz-button-result-icon'}/>;\n\n    default : return <SystemIcons.Close color={COLORS.white} className={'quiz-button-result-icon'}/>;\n  }\n};\n\ntype QuizButtonProps = {\n  resultType?: 'correct' | 'incorrect' | 'partial';\n  text: string;\n  onClick?: (arg:any)=>void;\n  id: string;\n  selected?: boolean;\n  disabled?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n  type: 'radio' | 'checkbox';\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'id' | 'tabIndex' | 'onMouseDown'>\n\nconst QuizButton: React.FunctionComponent<QuizButtonProps> = ({\n                                                                text,\n                                                                type,\n                                                                onClick,\n                                                                resultType,\n                                                                id,\n                                                                className,\n                                                                selected = false,\n                                                                disabled = false,\n                                                                size = Size.Medium,\n                                                                ...rest\n                                                              }) => {\n  return (   \n    <OptionContainer\n      onClick={onClick}\n      isSelected={selected}\n      tabIndex={(disabled || resultType) ? -1 : 0}\n      onMouseDown={defaultOnMouseDownHandler}\n      size={size}\n      className={'quiz-button '.concat(selected ? ' selected' : '')\n        .concat(disabled ? ' disabled' : '')\n        .concat(resultType ? ' result ' + resultType : '')\n        .concat(className ? ' ' + className : '')}\n      data-testid={'container'}\n      aria-checked={selected}\n      role={type === 'radio'? 'radio' : 'checkbox'}\n      {...rest}>\n        <ButtonContainer data-testid={'btnContainer'} className={'quiz-button-icon'} size={size}>\n          {\n            resultType ? renderResultContent(resultType) : (\n                                type==='radio' ? <RadioButton selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\n                                select={()=>{}} id={id}/> : <Checkbox selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\n                                select={()=>{}} id={id}/>\n                              )\n          }\n        </ButtonContainer>\n\n        <TextContainer data-testid={'txtContainer'} className={'quiz-button-text'} size={size}>\n          <TextWrapper size={size}>\n            {text}\n          </TextWrapper>\n        </TextContainer>\n    </OptionContainer>\n  );\n};\n\nexport default QuizButton;\n"],"mappings":"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"}

package/dist/QuizButton/QuizButton.js

@@ -83,7 +83,9 @@ var QuizButton = function QuizButton(_ref) {
     onMouseDown: defaultOnMouseDownHandler,
     size: size,
     className: 'quiz-button '.concat(selected ? ' selected' : '').concat(disabled ? ' disabled' : '').concat(resultType ? ' result ' + resultType : '').concat(className ? ' ' + className : ''),
-    "data-testid": 'container'
+    "data-testid": 'container',
+    "aria-checked": selected,
+    role: type === 'radio' ? 'radio' : 'checkbox'
   }, rest), {}, {
     children: [/*#__PURE__*/_jsx(ButtonContainer, {
       "data-testid": 'btnContainer',

package/dist/QuizButton/QuizButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuizButton.js","names":["React","styled","Checkbox","COLORS","defaultOnMouseDownHandler","focusStyles","RadioButton","Size","SystemIcons","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","TextContainer","div","accent1_20","props","size","Small","Large","Regular","TextWrapper","ButtonContainer","accent1_100","accent1_600","OptionContainer","accent1_200","neutral_100","neutral_20","neutral_300","correct_20","correct_400","critical_20","critical_500","warning_20","warning_400","accent1_300","isSelected","accent1_700","accent1_400","accent1_800","renderResultContent","resultType","white","QuizButton","text","type","onClick","id","className","selected","disabled","Medium","rest","concat"],"sources":["../../src/QuizButton/QuizButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {Checkbox, COLORS, defaultOnMouseDownHandler, focusStyles, RadioButton, Size, SystemIcons} from '..';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nconst TextContainer = styled.div<{size: Size}>`\n  border-radius: 0 8px 8px 0;\n  display: flex;\n  background: ${COLORS.accent1_20};\n  width: 100%;\n\n  transition: background 100ms ease-in-out;\n  align-items: center;\n\n  padding: ${props=>props.size===Size.Small?'6px 8px':(props.size===Size.Large?'20px 16px':'12px 16px')};\n  ${props=>props.size===Size.Small ? ComponentSStyling(ComponentTextStyle.Regular,null) : (props.size===Size.Large ? ComponentLStyling(ComponentTextStyle.Regular,null) : ComponentMStyling(ComponentTextStyle.Regular,null))}\n`;\n\nconst TextWrapper = styled.div<{size:Size}>``;\n\nconst ButtonContainer = styled.div<{size: Size}>`\n  border-radius: 8px 0 0 8px;\n  display: flex;\n  background: ${COLORS.accent1_100};\n\n  width: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\n\n  transition: background 100ms ease-in-out;\n\n  .quiz-button-result-icon {\n    height: ${props=>props.size===Size.Small?'16px':(props.size===Size.Large?'32px':'24px')};\n    width: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\n  }\n\n  .radio-button-icon, .checkbox-icon {\n    margin: auto;\n    min-width: unset;\n    background: transparent;\n\n    svg {\n      color: ${COLORS.accent1_600};\n    }\n\n    &:hover {\n      background: transparent;\n    }\n\n    &:active {\n      background: transparent;\n    }\n  }\n\n  .small {\n    min-width: 32px;\n    min-height: 32px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 16px;\n        width: 16px;\n      }\n    }\n  }\n\n  .medium {\n    min-width: 48px;\n    min-height: 48px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 24px;\n        width: 24px;\n      }\n    }\n  }\n\n  .large {\n    min-width: 64px;\n    min-height: 64px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 32px;\n        width: 32px;\n      }\n    }\n  }\n`;\n\nconst OptionContainer = styled.div<{isSelected:boolean, size:Size}>`\n  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n  max-width: 65ch;  \n  word-break: break-word;\n\n  min-height: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\n  margin-bottom: ${props=>props.size===Size.Small?'16px':(props.size===Size.Large?'32px':'24px')};\n\n  &.selected {\n    ${TextContainer} {\n      background: ${COLORS.accent1_100};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.accent1_200};\n    }\n  }\n  \n  &.disabled {\n    cursor: not-allowed;\n    \n    ${ButtonContainer} {\n      pointer-events: none;\n      background: ${COLORS.neutral_100};\n    }\n    ${TextContainer} {\n      pointer-events: none;\n      background: ${COLORS.neutral_20};\n      color: ${COLORS.neutral_300};\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &.correct {\n    ${TextContainer} {    \n      background: ${COLORS.correct_20};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.correct_400};\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.incorrect {\n    ${TextContainer} {    \n      background: ${COLORS.critical_20};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.critical_500};\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.partial {\n    ${TextContainer} {    \n      background: ${COLORS.warning_20};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.warning_400};\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &:focus,\n  &.focus-state {\n    ${focusStyles}\n  }\n\n  &:hover,\n  &.hover-state {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:active,\n  &.active-state {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:hover:not(.disabled):not(.result),\n  &.hover-state {\n    ${ButtonContainer} {\n      background: ${COLORS.accent1_300};\n    }\n    ${TextContainer} {\n      background: ${props=>props.isSelected ? COLORS.accent1_200  : COLORS.accent1_100};\n    }\n    \n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ${COLORS.accent1_700};\n      }\n    }\n  }\n\n  &:active:not(.disabled):not(.result),\n  &.active-state {\n    ${ButtonContainer} {\n      background: ${COLORS.accent1_400};\n      transition: none;\n    }\n    ${TextContainer} {\n      background: ${props=>props.isSelected ? COLORS.accent1_300 : COLORS.accent1_200};\n      transition: none;\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ${COLORS.accent1_800};\n      }\n    }\n  }\n`;\n\nconst renderResultContent = (resultType: string) => {\n  switch(resultType){\n    case 'correct' : return <SystemIcons.CheckMark color={COLORS.white} className={'quiz-button-result-icon'}/>;\n\n    case 'incorrect' : return <SystemIcons.Close color={COLORS.white} className={'quiz-button-result-icon'}/>;\n\n    default : return <SystemIcons.Close color={COLORS.white} className={'quiz-button-result-icon'}/>;\n  }\n};\n\ntype QuizButtonProps = {\n  resultType?: 'correct' | 'incorrect' | 'partial';\n  text: string;\n  onClick?: (arg:any)=>void;\n  id: string;\n  selected?: boolean;\n  disabled?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n  type: 'radio' | 'checkbox';\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'id' | 'tabIndex' | 'onMouseDown'>\n\nconst QuizButton: React.FunctionComponent<QuizButtonProps> = ({\n                                                                text,\n                                                                type,\n                                                                onClick,\n                                                                resultType,\n                                                                id,\n                                                                className,\n                                                                selected = false,\n                                                                disabled = false,\n                                                                size = Size.Medium,\n                                                                ...rest\n                                                              }) => {\n  return (   \n    <OptionContainer\n      onClick={onClick}\n      isSelected={selected}\n      tabIndex={(disabled || resultType) ? -1 : 0}\n      onMouseDown={defaultOnMouseDownHandler}\n      size={size}\n      className={'quiz-button '.concat(selected ? ' selected' : '')\n        .concat(disabled ? ' disabled' : '')\n        .concat(resultType ? ' result ' + resultType : '')\n        .concat(className ? ' ' + className : '')}\n      data-testid={'container'}\n      {...rest}>\n        <ButtonContainer data-testid={'btnContainer'} className={'quiz-button-icon'} size={size}>\n          {\n            resultType ? renderResultContent(resultType) : (\n                                type==='radio' ? <RadioButton selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\n                                select={()=>{}} id={id}/> : <Checkbox selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\n                                select={()=>{}} id={id}/>\n                              )\n          }\n        </ButtonContainer>\n\n        <TextContainer data-testid={'txtContainer'} className={'quiz-button-text'} size={size}>\n          <TextWrapper size={size}>\n            {text}\n          </TextWrapper>\n        </TextContainer>\n    </OptionContainer>\n  );\n};\n\nexport default QuizButton;\n"],"mappings":"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"}
+{"version":3,"file":"QuizButton.js","names":["React","styled","Checkbox","COLORS","defaultOnMouseDownHandler","focusStyles","RadioButton","Size","SystemIcons","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","TextContainer","div","accent1_20","props","size","Small","Large","Regular","TextWrapper","ButtonContainer","accent1_100","accent1_600","OptionContainer","accent1_200","neutral_100","neutral_20","neutral_300","correct_20","correct_400","critical_20","critical_500","warning_20","warning_400","accent1_300","isSelected","accent1_700","accent1_400","accent1_800","renderResultContent","resultType","white","QuizButton","text","type","onClick","id","className","selected","disabled","Medium","rest","concat"],"sources":["../../src/QuizButton/QuizButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {Checkbox, COLORS, defaultOnMouseDownHandler, focusStyles, RadioButton, Size, SystemIcons} from '..';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nconst TextContainer = styled.div<{size: Size}>`\n  border-radius: 0 8px 8px 0;\n  display: flex;\n  background: ${COLORS.accent1_20};\n  width: 100%;\n\n  transition: background 100ms ease-in-out;\n  align-items: center;\n\n  padding: ${props=>props.size===Size.Small?'6px 8px':(props.size===Size.Large?'20px 16px':'12px 16px')};\n  ${props=>props.size===Size.Small ? ComponentSStyling(ComponentTextStyle.Regular,null) : (props.size===Size.Large ? ComponentLStyling(ComponentTextStyle.Regular,null) : ComponentMStyling(ComponentTextStyle.Regular,null))}\n`;\n\nconst TextWrapper = styled.div<{size:Size}>``;\n\nconst ButtonContainer = styled.div<{size: Size}>`\n  border-radius: 8px 0 0 8px;\n  display: flex;\n  background: ${COLORS.accent1_100};\n\n  width: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\n\n  transition: background 100ms ease-in-out;\n\n  .quiz-button-result-icon {\n    height: ${props=>props.size===Size.Small?'16px':(props.size===Size.Large?'32px':'24px')};\n    width: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\n  }\n\n  .radio-button-icon, .checkbox-icon {\n    margin: auto;\n    min-width: unset;\n    background: transparent;\n\n    svg {\n      color: ${COLORS.accent1_600};\n    }\n\n    &:hover {\n      background: transparent;\n    }\n\n    &:active {\n      background: transparent;\n    }\n  }\n\n  .small {\n    min-width: 32px;\n    min-height: 32px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 16px;\n        width: 16px;\n      }\n    }\n  }\n\n  .medium {\n    min-width: 48px;\n    min-height: 48px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 24px;\n        width: 24px;\n      }\n    }\n  }\n\n  .large {\n    min-width: 64px;\n    min-height: 64px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 32px;\n        width: 32px;\n      }\n    }\n  }\n`;\n\nconst OptionContainer = styled.div<{isSelected:boolean, size:Size}>`\n  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n  max-width: 65ch;  \n  word-break: break-word;\n\n  min-height: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\n  margin-bottom: ${props=>props.size===Size.Small?'16px':(props.size===Size.Large?'32px':'24px')};\n\n  &.selected {\n    ${TextContainer} {\n      background: ${COLORS.accent1_100};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.accent1_200};\n    }\n  }\n  \n  &.disabled {\n    cursor: not-allowed;\n    \n    ${ButtonContainer} {\n      pointer-events: none;\n      background: ${COLORS.neutral_100};\n    }\n    ${TextContainer} {\n      pointer-events: none;\n      background: ${COLORS.neutral_20};\n      color: ${COLORS.neutral_300};\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &.correct {\n    ${TextContainer} {    \n      background: ${COLORS.correct_20};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.correct_400};\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.incorrect {\n    ${TextContainer} {    \n      background: ${COLORS.critical_20};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.critical_500};\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.partial {\n    ${TextContainer} {    \n      background: ${COLORS.warning_20};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.warning_400};\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &:focus,\n  &.focus-state {\n    ${focusStyles}\n  }\n\n  &:hover,\n  &.hover-state {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:active,\n  &.active-state {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:hover:not(.disabled):not(.result),\n  &.hover-state {\n    ${ButtonContainer} {\n      background: ${COLORS.accent1_300};\n    }\n    ${TextContainer} {\n      background: ${props=>props.isSelected ? COLORS.accent1_200  : COLORS.accent1_100};\n    }\n    \n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ${COLORS.accent1_700};\n      }\n    }\n  }\n\n  &:active:not(.disabled):not(.result),\n  &.active-state {\n    ${ButtonContainer} {\n      background: ${COLORS.accent1_400};\n      transition: none;\n    }\n    ${TextContainer} {\n      background: ${props=>props.isSelected ? COLORS.accent1_300 : COLORS.accent1_200};\n      transition: none;\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ${COLORS.accent1_800};\n      }\n    }\n  }\n`;\n\nconst renderResultContent = (resultType: string) => {\n  switch(resultType){\n    case 'correct' : return <SystemIcons.CheckMark color={COLORS.white} className={'quiz-button-result-icon'}/>;\n\n    case 'incorrect' : return <SystemIcons.Close color={COLORS.white} className={'quiz-button-result-icon'}/>;\n\n    default : return <SystemIcons.Close color={COLORS.white} className={'quiz-button-result-icon'}/>;\n  }\n};\n\ntype QuizButtonProps = {\n  resultType?: 'correct' | 'incorrect' | 'partial';\n  text: string;\n  onClick?: (arg:any)=>void;\n  id: string;\n  selected?: boolean;\n  disabled?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n  type: 'radio' | 'checkbox';\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'id' | 'tabIndex' | 'onMouseDown'>\n\nconst QuizButton: React.FunctionComponent<QuizButtonProps> = ({\n                                                                text,\n                                                                type,\n                                                                onClick,\n                                                                resultType,\n                                                                id,\n                                                                className,\n                                                                selected = false,\n                                                                disabled = false,\n                                                                size = Size.Medium,\n                                                                ...rest\n                                                              }) => {\n  return (   \n    <OptionContainer\n      onClick={onClick}\n      isSelected={selected}\n      tabIndex={(disabled || resultType) ? -1 : 0}\n      onMouseDown={defaultOnMouseDownHandler}\n      size={size}\n      className={'quiz-button '.concat(selected ? ' selected' : '')\n        .concat(disabled ? ' disabled' : '')\n        .concat(resultType ? ' result ' + resultType : '')\n        .concat(className ? ' ' + className : '')}\n      data-testid={'container'}\n      aria-checked={selected}\n      role={type === 'radio'? 'radio' : 'checkbox'}\n      {...rest}>\n        <ButtonContainer data-testid={'btnContainer'} className={'quiz-button-icon'} size={size}>\n          {\n            resultType ? renderResultContent(resultType) : (\n                                type==='radio' ? <RadioButton selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\n                                select={()=>{}} id={id}/> : <Checkbox selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\n                                select={()=>{}} id={id}/>\n                              )\n          }\n        </ButtonContainer>\n\n        <TextContainer data-testid={'txtContainer'} className={'quiz-button-text'} size={size}>\n          <TextWrapper size={size}>\n            {text}\n          </TextWrapper>\n        </TextContainer>\n    </OptionContainer>\n  );\n};\n\nexport default QuizButton;\n"],"mappings":"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"}

package/dist/SideMenu/SideMenuBody.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { SideMenuProps } from './types';
 export declare const SideMenuBody: (props: SideMenuProps) => JSX.Element;

package/dist/SideMenu/SideMenuFooter.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { SideMenuProps } from './types';
 export declare const SideMenuFooter: (props: SideMenuProps) => JSX.Element;

package/dist/SideMenu/SideMenuHeader.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { SideMenuProps } from './types';
 export declare const SideMenuHeader: (props: SideMenuProps) => JSX.Element;

package/dist/SideMenu/types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ButtonProps } from '../Button/Button';
 import { IconButtonProps } from '../Button/Iconbutton';
 import { MenuItemProps } from '../MenuItem/MenuItem';

package/dist/SkipToContent/SkipToContent.cjs

@@ -11,6 +11,8 @@ exports.default = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var React = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
@@ -39,6 +41,9 @@ var SkipToContent = function SkipToContent(_ref) {
   });
 };
 
+SkipToContent.propTypes = {
+  children: _propTypes.default.node.isRequired
+};
 var _default = SkipToContent;
 exports.default = _default;
 //# sourceMappingURL=SkipToContent.cjs.map

package/dist/SkipToContent/SkipToContent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SkipToContent.cjs","names":["SkipToContentLink","styled","a","ComponentSStyling","ComponentTextStyle","Bold","COLORS","black","SkipToContentWrapper","div","accent2_200","SkipToContent","children"],"sources":["../../src/SkipToContent/SkipToContent.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { COLORS, ComponentTextStyle} from '../styles';\nimport { ComponentSStyling } from '../styles';\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"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AAEA;;;;;;;;;;AAKA,IAAMA,iBAAiB,GAAGC,yBAAA,CAAOC,CAAV,+HACnB,IAAAC,yBAAA,EAAkBC,0BAAA,CAAmBC,IAArC,EAA2CC,cAAA,CAAOC,KAAlD,CADmB,CAAvB;;AAMA,IAAMC,oBAAoB,GAAGP,yBAAA,CAAOQ,GAAV,6VAWRH,cAAA,CAAOI,WAXC,CAA1B;;AAmBA,IAAMC,aAA0D,GAAG,SAA7DA,aAA6D,OAAkB;EAAA,IAAfC,QAAe,QAAfA,QAAe;EACnF,oBACE,qBAAC,oBAAD;IAAA,uBACE,qBAAC,iBAAD;MAAmB,IAAI,EAAC,OAAxB;MAAA,UAAiCA;IAAjC;EADF,EADF;AAKD,CAND;;eAQeD,a"}
+{"version":3,"file":"SkipToContent.cjs","names":["SkipToContentLink","styled","a","ComponentSStyling","ComponentTextStyle","Bold","COLORS","black","SkipToContentWrapper","div","accent2_200","SkipToContent","children"],"sources":["../../src/SkipToContent/SkipToContent.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { COLORS, ComponentTextStyle} from '../styles';\nimport { ComponentSStyling } from '../styles';\n\nexport type SkipToContentProps = {\n  children: React.ReactNode;\n};\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"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AAEA;;;;;;;;;;AAOA,IAAMA,iBAAiB,GAAGC,yBAAA,CAAOC,CAAV,+HACnB,IAAAC,yBAAA,EAAkBC,0BAAA,CAAmBC,IAArC,EAA2CC,cAAA,CAAOC,KAAlD,CADmB,CAAvB;;AAMA,IAAMC,oBAAoB,GAAGP,yBAAA,CAAOQ,GAAV,6VAWRH,cAAA,CAAOI,WAXC,CAA1B;;AAmBA,IAAMC,aAA0D,GAAG,SAA7DA,aAA6D,OAAkB;EAAA,IAAfC,QAAe,QAAfA,QAAe;EACnF,oBACE,qBAAC,oBAAD;IAAA,uBACE,qBAAC,iBAAD;MAAmB,IAAI,EAAC,OAAxB;MAAA,UAAiCA;IAAjC;EADF,EADF;AAKD,CAND;;;EA5BEA,Q;;eAoCaD,a"}

package/dist/SkipToContent/SkipToContent.d.ts

@@ -1,4 +1,6 @@
 import * as React from 'react';
-declare type SkipToContentProps = {};
+export declare type SkipToContentProps = {
+    children: React.ReactNode;
+};
 declare const SkipToContent: React.FunctionComponent<SkipToContentProps>;
 export default SkipToContent;

package/dist/SkipToContent/SkipToContent.js

@@ -1,4 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
 
 var _templateObject, _templateObject2;
 
@@ -20,5 +21,8 @@ var SkipToContent = function SkipToContent(_ref) {
   });
 };
 
+SkipToContent.propTypes = {
+  children: _pt.node.isRequired
+};
 export default SkipToContent;
 //# sourceMappingURL=SkipToContent.js.map

package/dist/SkipToContent/SkipToContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkipToContent.js","names":["React","styled","COLORS","ComponentTextStyle","ComponentSStyling","SkipToContentLink","a","Bold","black","SkipToContentWrapper","div","accent2_200","SkipToContent","children"],"sources":["../../src/SkipToContent/SkipToContent.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { COLORS, ComponentTextStyle} from '../styles';\nimport { ComponentSStyling } from '../styles';\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"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AAEA,SAASC,MAAT,EAAiBC,kBAAjB,QAA0C,WAA1C;AACA,SAASC,iBAAT,QAAkC,WAAlC;;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;EAAA,IAAfC,QAAe,QAAfA,QAAe;EACnF,oBACE,KAAC,oBAAD;IAAA,uBACE,KAAC,iBAAD;MAAmB,IAAI,EAAC,OAAxB;MAAA,UAAiCA;IAAjC;EADF,EADF;AAKD,CAND;;AAQA,eAAeD,aAAf"}
+{"version":3,"file":"SkipToContent.js","names":["React","styled","COLORS","ComponentTextStyle","ComponentSStyling","SkipToContentLink","a","Bold","black","SkipToContentWrapper","div","accent2_200","SkipToContent","children"],"sources":["../../src/SkipToContent/SkipToContent.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { COLORS, ComponentTextStyle} from '../styles';\nimport { ComponentSStyling } from '../styles';\n\nexport type SkipToContentProps = {\n  children: React.ReactNode;\n};\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"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AAEA,SAASC,MAAT,EAAiBC,kBAAjB,QAA0C,WAA1C;AACA,SAASC,iBAAT,QAAkC,WAAlC;;AAMA,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;EAAA,IAAfC,QAAe,QAAfA,QAAe;EACnF,oBACE,KAAC,oBAAD;IAAA,uBACE,KAAC,iBAAD;MAAmB,IAAI,EAAC,OAAxB;MAAA,UAAiCA;IAAjC;EADF,EADF;AAKD,CAND;;;EA5BEA,Q;;AAoCF,eAAeD,aAAf"}

package/dist/Switcher/MobileCustomMenuContent.cjs

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MobileCustomMenuContent = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ScrollableContainer = require("../common/ScrollableContainer");
+
+var _CommonStyles = require("../GlobalNavigationBar/mobile/CommonStyles");
+
+var _MobileActionContainer = require("../GlobalNavigationBar/mobile/MobileActionContainer");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var MobileCustomMenuContent = function MobileCustomMenuContent(_ref) {
+  var children = _ref.children,
+      header = _ref.header,
+      action = _ref.action;
+
+  var _useScrollableContain = (0, _ScrollableContainer.useScrollableContainer)([children]),
+      _useScrollableContain2 = (0, _slicedToArray2.default)(_useScrollableContain, 2),
+      scrollContainerRef = _useScrollableContain2[0],
+      scrollable = _useScrollableContain2[1];
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CommonStyles.MobileMenuWrapper, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_CommonStyles.ScrollableContainer, {
+      ref: scrollContainerRef,
+      className: scrollable ? 'scrollable' : '',
+      children: [!!header && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CommonStyles.MobileHeaderContainer, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyles.MobileHeaderText, {
+          children: header.header
+        }), header.note && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyles.MobileHeaderNote, {
+          children: header.note
+        })]
+      }), children]
+    }), action && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MobileActionContainer.MobileActionContainer, _objectSpread({}, action))]
+  });
+};
+
+exports.MobileCustomMenuContent = MobileCustomMenuContent;
+//# sourceMappingURL=MobileCustomMenuContent.cjs.map

package/dist/Switcher/MobileCustomMenuContent.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileCustomMenuContent.cjs","names":["MobileCustomMenuContent","children","header","action","useScrollableContainer","scrollContainerRef","scrollable","note"],"sources":["../../src/Switcher/MobileCustomMenuContent.tsx"],"sourcesContent":["import React from 'react';\nimport { useScrollableContainer } from '../common/ScrollableContainer';\nimport { MenuButton, MenuGroupHeader } from '../GlobalNavigationBar';\nimport { MobileHeaderContainer, MobileHeaderNote, MobileHeaderText, MobileMenuWrapper, ScrollableContainer } from '../GlobalNavigationBar/mobile/CommonStyles';\nimport { MobileActionContainer } from '../GlobalNavigationBar/mobile/MobileActionContainer';\n\ninterface MobileCustomMenuContentProps {\n  header?: MenuGroupHeader;\n  action?: MenuButton;\n}\n\nexport const MobileCustomMenuContent: React.FunctionComponent<MobileCustomMenuContentProps> = ({ children, header, action }) => {\n  const [scrollContainerRef, scrollable] = useScrollableContainer([children]);\n\n  return (\n    <MobileMenuWrapper>\n      <ScrollableContainer ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n        {!!header && (\n          <MobileHeaderContainer>\n            <MobileHeaderText>{header.header}</MobileHeaderText>\n            {header.note && <MobileHeaderNote>{header.note}</MobileHeaderNote>}\n          </MobileHeaderContainer>\n        )}\n        {children}\n      </ScrollableContainer>\n      {action && <MobileActionContainer {...action} />}\n    </MobileMenuWrapper>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;;;AAOO,IAAMA,uBAA8E,GAAG,SAAjFA,uBAAiF,OAAkC;EAAA,IAA/BC,QAA+B,QAA/BA,QAA+B;EAAA,IAArBC,MAAqB,QAArBA,MAAqB;EAAA,IAAbC,MAAa,QAAbA,MAAa;;EAC9H,4BAAyC,IAAAC,2CAAA,EAAuB,CAACH,QAAD,CAAvB,CAAzC;EAAA;EAAA,IAAOI,kBAAP;EAAA,IAA2BC,UAA3B;;EAEA,oBACE,sBAAC,+BAAD;IAAA,wBACE,sBAAC,iCAAD;MAAqB,GAAG,EAAED,kBAA1B;MAAqD,SAAS,EAAEC,UAAU,GAAG,YAAH,GAAkB,EAA5F;MAAA,WACG,CAAC,CAACJ,MAAF,iBACC,sBAAC,mCAAD;QAAA,wBACE,qBAAC,8BAAD;UAAA,UAAmBA,MAAM,CAACA;QAA1B,EADF,EAEGA,MAAM,CAACK,IAAP,iBAAe,qBAAC,8BAAD;UAAA,UAAmBL,MAAM,CAACK;QAA1B,EAFlB;MAAA,EAFJ,EAOGN,QAPH;IAAA,EADF,EAUGE,MAAM,iBAAI,qBAAC,4CAAD,oBAA2BA,MAA3B,EAVb;EAAA,EADF;AAcD,CAjBM"}

package/dist/Switcher/MobileCustomMenuContent.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { MenuButton, MenuGroupHeader } from '../GlobalNavigationBar';
+interface MobileCustomMenuContentProps {
+    header?: MenuGroupHeader;
+    action?: MenuButton;
+}
+export declare const MobileCustomMenuContent: React.FunctionComponent<MobileCustomMenuContentProps>;
+export {};