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

package/dist/InputFields/TextField.js

@@ -10,6 +10,7 @@ import { COLORS } from '../styles';
 import { States } from '../types';
 import { InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage } from './styling';
 import { useFocusVisibleRef } from '../common';
+import TooltipOverflow from '../Tooltips/TooltipOverflow';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -29,8 +30,7 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     withoutBorder = _ref.withoutBorder,
     state = _ref.state,
     size = _ref.size,
-    _ref$margin = _ref.margin,
-    margin = _ref$margin === void 0 ? '4px 0' : _ref$margin,
+    margin = _ref.margin,
     note = _ref.note,
     className = _ref.className,
     dataTestId = _ref.dataTestId,
@@ -71,7 +71,16 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         pattern: pattern,
         maxLength: maxLength,
         withoutBorder: withoutBorder
-      }, rest)), validationMessage && /*#__PURE__*/_jsxs(ValidationMessage, {
+      }, rest)), /*#__PURE__*/_jsx(TooltipOverflow, {
+        value: value,
+        input: elementRef,
+        withArrow: true,
+        maxWidth: "100%",
+        size: size,
+        align: "end",
+        position: "bottom",
+        children: value
+      }), validationMessage && /*#__PURE__*/_jsxs(ValidationMessage, {
         className: size || '',
         type: state !== null && state !== void 0 ? state : States.Invalid,
         children: [state === States.Valid ? /*#__PURE__*/_jsx(SystemIcons.CheckMark, {

package/dist/InputFields/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","names":["React","SystemIcons","COLORS","States","InputFieldStyling","InputWrapper","NoteMessage","ValidationMessage","useFocusVisibleRef","TextField","forwardRef","ref","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","note","className","dataTestId","rest","elementRef","useImperativeHandle","current","cls","Invalid","e","preventDefault","undefined","target","Valid","correct_400","critical_400","icon","message"],"sources":["../../src/InputFields/TextField.tsx"],"sourcesContent":["import * as React from 'react';\nimport {SystemIcons} from '../icons';\nimport {COLORS} from '../styles';\nimport {Size, States, Testable} from '../types';\nimport {InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\nimport {useFocusVisibleRef} from '../common';\nimport {TextFieldNote} from './types';\n\ntype TextFieldProps =\n  Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'disabled' | 'id'  | 'type' | 'readOnly' | 'autoComplete' | 'pattern' | 'maxLength'>\n  & {\n  id?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  onChange?: (text: string) => void;\n  value?: string;\n  validationMessage?: string;\n  type?: string;\n  state?: States.Invalid | States.Valid;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  pattern?: string;\n  maxLength?: number;\n  withoutBorder?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  note?: TextFieldNote;\n};\n\nconst TextField = React.forwardRef(({\n                                      id,\n                                      disabled,\n                                      readOnly,\n                                      onChange,\n                                      value,\n                                      validationMessage,\n                                      type,\n                                      autoComplete,\n                                      placeholder,\n                                      required,\n                                      pattern,\n                                      maxLength,\n                                      withoutBorder,\n                                      state,\n                                      size,\n                                      margin = '4px 0',\n                                      note,\n                                      className,\n                                      dataTestId,\n                                      ...rest\n                                    }: TextFieldProps, ref) => {\n  const elementRef = useFocusVisibleRef();\n\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\n\n  const cls = `${state || (validationMessage ? States.Invalid : '')} ${size || ''}`;\n\n  return (\n    <>\n      <InputWrapper\n        readOnly={readOnly}\n        disabled={disabled}\n        margin={margin}\n        onClick={(e: any) => {\n          if (disabled || readOnly) {\n            e.preventDefault();\n          }\n        }}>\n        <InputFieldStyling\n          id={id}\n          data-testId={dataTestId}\n          ref={elementRef}\n          type={type || 'text'}\n          value={value}\n          className={cls}\n          tabIndex={readOnly || disabled ? -1 : 0}\n          autoComplete={autoComplete}\n          placeholder={disabled ? undefined : placeholder}\n          disabled={disabled}\n          readOnly={readOnly}\n          onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n          activeErrorMessage={!!validationMessage && state !== States.Valid}\n          required={required}\n          pattern={pattern}\n          maxLength={maxLength}\n          withoutBorder={withoutBorder}\n          {...rest}\n        />\n        {validationMessage && (\n          <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n            {state === States.Valid ? <SystemIcons.CheckMark color={COLORS.correct_400}/> :\n              <SystemIcons.TechnicalWarning color={COLORS.critical_400}/>}\n            <span>{validationMessage}</span>\n          </ValidationMessage>\n        )}\n        {note && !disabled && (\n          <NoteMessage className={size}>\n            {note.icon}\n            <span>{note.message}</span>\n          </NoteMessage>\n        )}\n      </InputWrapper>\n    </>\n  );\n});\n\nexport default TextField;\n"],"mappings":"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"}
+{"version":3,"file":"TextField.js","names":["React","SystemIcons","COLORS","States","InputFieldStyling","InputWrapper","NoteMessage","ValidationMessage","useFocusVisibleRef","TooltipOverflow","TextField","forwardRef","ref","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","note","className","dataTestId","rest","elementRef","useImperativeHandle","current","cls","Invalid","e","preventDefault","undefined","target","Valid","correct_400","critical_400","icon","message"],"sources":["../../src/InputFields/TextField.tsx"],"sourcesContent":["import * as React from 'react';\nimport {SystemIcons} from '../icons';\nimport {COLORS} from '../styles';\nimport {Size, States, Testable} from '../types';\nimport {InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\nimport {useFocusVisibleRef} from '../common';\nimport {TextFieldNote} from './types';\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\n\ntype TextFieldProps =\n  Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'disabled' | 'id'  | 'type' | 'readOnly' | 'autoComplete' | 'pattern' | 'maxLength'>\n  & {\n  id?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  onChange?: (text: string) => void;\n  value?: string;\n  validationMessage?: string;\n  type?: string;\n  state?: States.Invalid | States.Valid;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  pattern?: string;\n  maxLength?: number;\n  withoutBorder?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  note?: TextFieldNote;\n};\n\nconst TextField = React.forwardRef(({\n                                      id,\n                                      disabled,\n                                      readOnly,\n                                      onChange,\n                                      value,\n                                      validationMessage,\n                                      type,\n                                      autoComplete,\n                                      placeholder,\n                                      required,\n                                      pattern,\n                                      maxLength,\n                                      withoutBorder,\n                                      state,\n                                      size,\n                                      margin,\n                                      note,\n                                      className,\n                                      dataTestId,\n                                      ...rest\n                                    }: TextFieldProps, ref) => {\n  const elementRef = useFocusVisibleRef();\n\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\n\n  const cls = `${state || (validationMessage ? States.Invalid : '')} ${size || ''}`;\n\n  return (\n    <>\n      <InputWrapper\n        readOnly={readOnly}\n        disabled={disabled}\n        margin={margin}\n        onClick={(e: any) => {\n          if (disabled || readOnly) {\n            e.preventDefault();\n          }\n        }}>\n        <InputFieldStyling\n          id={id}\n          data-testId={dataTestId}\n          ref={elementRef}\n          type={type || 'text'}\n          value={value}\n          className={cls}\n          tabIndex={readOnly || disabled ? -1 : 0}\n          autoComplete={autoComplete}\n          placeholder={disabled ? undefined : placeholder}\n          disabled={disabled}\n          readOnly={readOnly}\n          onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n          activeErrorMessage={!!validationMessage && state !== States.Valid}\n          required={required}\n          pattern={pattern}\n          maxLength={maxLength}\n          withoutBorder={withoutBorder}\n          {...rest}\n        />\n        <TooltipOverflow value={value} input={elementRef} withArrow={true} maxWidth=\"100%\" size={size} align='end' position='bottom'>\n          {value}\n        </TooltipOverflow>\n\n        {validationMessage && (\n          <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n            {state === States.Valid ? <SystemIcons.CheckMark color={COLORS.correct_400}/> :\n              <SystemIcons.TechnicalWarning color={COLORS.critical_400}/>}\n            <span>{validationMessage}</span>\n          </ValidationMessage>\n        )}\n        {note && !disabled && (\n          <NoteMessage className={size}>\n            {note.icon}\n            <span>{note.message}</span>\n          </NoteMessage>\n        )}\n      </InputWrapper>\n    </>\n  );\n});\n\nexport default TextField;\n"],"mappings":"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"}

package/dist/InputFields/styling.cjs

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.readOnlyState = exports.activeErrorMessageState = exports.Warning = exports.ValidationStyling = exports.ValidationMessage = exports.StyledIcon = exports.SearchIconWrapper = exports.NoteMessage = exports.InputWrapper = exports.InputFieldStyling = exports.ErrorMessage = exports.AutofilledMessage = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _TooltipStyles = require("../Tooltips/TooltipStyles");
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styles = require("../styles");
 var _typography = require("../styles/typography");
@@ -15,18 +16,21 @@ var _types = require("../types");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _StateColors, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var InputWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  outline: none;\n  ", ";\n  ", "\n  position: relative;\n"])), function (props) {
+var InputWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  outline: none;\n  ", ";\n  ", "\n  position: relative;\n  \n  ", "\n\n"])), function (props) {
   return props.readOnly || props.disabled ? 'cursor: not-allowed;' : '';
 }, function (props) {
   return props.margin ? "margin: ".concat(props.margin, ";") : '';
-});
+}, (0, _TooltipStyles.TooltipTrigger)());
 exports.InputWrapper = InputWrapper;
 var readOnlyState = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  box-shadow: inset 0 0 0 1px ", " !important;\n  color: ", " !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n"])), _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_600);
 exports.readOnlyState = readOnlyState;
 var activeErrorMessageState = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  box-shadow: inset 0 0 0 2px ", ";\n"])), _styles.COLORS.critical_400);
 exports.activeErrorMessageState = activeErrorMessageState;
-var InputFieldStyling = _styledComponents.default.input(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n  margin-bottom: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ", "\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 16px !important;\n\n  outline: none;\n  position: relative;\n\n  font-size: 16px;\n\n  &::placeholder {\n    ", "\n  }\n\n  ", " {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px;\n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px;\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  color: ", " !important;\n\n  ", "\n\n  &:read-only:not(:disabled) {\n    ", "\n  }\n\n  &:disabled {\n    border: 1px solid ", ";\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ", " !important;\n  }\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.focus-visible {\n    ", "\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n  &.valid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.active {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n"])), function (props) {
+var InputFieldStyling = _styledComponents.default.input(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n  margin-bottom: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ", "\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 ", "px 0 16px !important;\n  text-overflow: ellipsis;\n\n  outline: none;\n  position: relative;\n\n  font-size: 16px;\n\n  &::placeholder {\n    ", "\n  }\n\n  ", " {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px;\n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px;\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  color: ", " !important;\n\n  ", "\n\n  &:read-only:not(:disabled) {\n    ", "\n  }\n\n  &:disabled {\n    border: 1px solid ", ";\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ", " !important;\n  }\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.focus-visible {\n    ", "\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n  &.valid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.active {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n"])), function (props) {
   return props.withoutBorder ? "-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      " : "-webkit-box-shadow: inset 0px 0px 0px 1px ".concat(_styles.COLORS.neutral_400, ";\n      -moz-box-shadow: inset 0px 0px 0px 1px ").concat(_styles.COLORS.neutral_400, ";\n      box-shadow: inset 0px 0px 0px 1px ").concat(_styles.COLORS.neutral_400, ";");
+}, function (props) {
+  var _props$extraRightPadd;
+  return 16 + ((_props$extraRightPadd = props.extraRightPadding) !== null && _props$extraRightPadd !== void 0 ? _props$extraRightPadd : 0);
 }, (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Italic, _styles.COLORS.neutral_500), _styles.BREAKPOINTS.MEDIUM, (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Italic, _styles.COLORS.neutral_500), _styles.COLORS.black, function (props) {
   return props.activeErrorMessage ? activeErrorMessageState : '';
 }, function (props) {

package/dist/InputFields/styling.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styling.cjs","names":["InputWrapper","styled","div","props","readOnly","disabled","margin","readOnlyState","css","COLORS","neutral_100","neutral_300","neutral_600","activeErrorMessageState","critical_400","InputFieldStyling","input","withoutBorder","neutral_400","ComponentSStyling","ComponentTextStyle","Italic","neutral_500","BREAKPOINTS","MEDIUM","ComponentMStyling","black","activeErrorMessage","suppressReadOnlyStyles","primary_800","focusStyles","correct_500","primary_700","ValidationStyling","ComponentXXSStyling","Regular","Warning","ComponentXSStyling","ErrorMessage","critical_500","StateColors","States","Default","Valid","Invalid","ValidationMessage","type","NoteMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"sources":["../../src/InputFields/styling.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { BREAKPOINTS, COLORS, focusStyles } from '../styles';\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';\nimport {Size, States} from '../types';\n\nexport const InputWrapper = styled.div<{ readOnly?: boolean; disabled?: boolean; margin?: string }>`\n  outline: none;\n  ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')};\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n  position: relative;\n`;\n\nexport const readOnlyState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_300} !important;\n  color: ${COLORS.neutral_600} !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n`;\nexport const activeErrorMessageState = css`\n  box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n`;\n\nconst InputFieldStyling = styled.input<{\n  activeErrorMessage?: boolean;\n  active?: boolean;\n  withoutBorder?: boolean;\n  size?: string;\n  suppressReadOnlyStyles?: boolean;\n}>`\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n  margin-bottom: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ${(props) =>\n    props.withoutBorder\n      ? `-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      `\n      : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};`}\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 16px !important;\n\n  outline: none;\n  position: relative;\n\n  font-size: 16px;\n\n  &::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px;\n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px;\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  color: ${COLORS.black} !important;\n\n  ${(props) => (props.activeErrorMessage ? activeErrorMessageState : '')}\n\n  &:read-only:not(:disabled) {\n    ${(props) => (props.suppressReadOnlyStyles ? '' : readOnlyState)}\n  }\n\n  &:disabled {\n    border: 1px solid ${COLORS.neutral_100};\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ${COLORS.neutral_300} !important;\n  }\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.focus-visible {\n    ${focusStyles}\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n  }\n  &.valid {\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n  }\n\n  &.active {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n`;\n\nconst ValidationStyling = css`\n  &.error-msg {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    text-align: center;\n    font-weight: 400;\n    box-sizing: border-box;\n  }\n\n  &.error-msg {\n    padding-top: 8px;\n    padding-bottom: 0;\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468')}\n    font-weight: 700;\n    line-height: 15px;\n  }\n`;\n\nexport const Warning = styled.div`\n  display: flex;\n  align-items: center;\n  margin-bottom: 4px;\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  &.small {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  }\n  &.medium {\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  & * {\n    vertical-align: middle;\n    display: inline-block;\n  }\n\n  svg {\n    margin-right: 4px;\n  }\n`;\nexport const ErrorMessage = styled(Warning)`\n  color: ${COLORS.critical_500};\n`;\n\nconst StateColors = {\n  [States.Default]: COLORS.neutral_500,\n  [States.Valid]: COLORS.correct_500,\n  [States.Invalid]: COLORS.critical_500,\n}\n\nexport const ValidationMessage = styled(Warning)<{ type: States.Valid | States.Invalid | States.Default}>`\n  color: ${(props) => StateColors[props.type]};\n`;\n\nexport const NoteMessage = styled(Warning)`\n  color: ${COLORS.neutral_500};\n`;\nexport const AutofilledMessage = styled(Warning)`\n  color: ${COLORS.neutral_600};\n`;\n\nexport { ValidationStyling, InputFieldStyling };\n\nexport const StyledIcon = styled.div`\n  border-radius: 50%;\n`;\n\nexport const SearchIconWrapper = styled(StyledIcon)`\n  position: absolute;\n  border-radius: 50%;\n`;\n"],"mappings":"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"}
+{"version":3,"file":"styling.cjs","names":["InputWrapper","styled","div","props","readOnly","disabled","margin","TooltipTrigger","readOnlyState","css","COLORS","neutral_100","neutral_300","neutral_600","activeErrorMessageState","critical_400","InputFieldStyling","input","withoutBorder","neutral_400","extraRightPadding","ComponentSStyling","ComponentTextStyle","Italic","neutral_500","BREAKPOINTS","MEDIUM","ComponentMStyling","black","activeErrorMessage","suppressReadOnlyStyles","primary_800","focusStyles","correct_500","primary_700","ValidationStyling","ComponentXXSStyling","Regular","Warning","ComponentXSStyling","ErrorMessage","critical_500","StateColors","States","Default","Valid","Invalid","ValidationMessage","type","NoteMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"sources":["../../src/InputFields/styling.ts"],"sourcesContent":["import { TooltipTrigger } from '../Tooltips/TooltipStyles';\nimport styled, { css } from 'styled-components';\nimport { BREAKPOINTS, COLORS, focusStyles } from '../styles';\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';\nimport {Size, States} from '../types';\n\nexport const InputWrapper = styled.div<{ readOnly?: boolean; disabled?: boolean; margin?: string }>`\n  outline: none;\n  ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')};\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n  position: relative;\n  \n  ${TooltipTrigger()}\n\n`;\n\nexport const readOnlyState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_300} !important;\n  color: ${COLORS.neutral_600} !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n`;\nexport const activeErrorMessageState = css`\n  box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n`;\n\nconst InputFieldStyling = styled.input<{\n  activeErrorMessage?: boolean;\n  active?: boolean;\n  withoutBorder?: boolean;\n  size?: string;\n  suppressReadOnlyStyles?: boolean;\n  extraRightPadding?: number;\n}>`\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n  margin-bottom: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ${(props) =>\n    props.withoutBorder\n      ? `-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      `\n      : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};`}\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 ${props => 16 + (props.extraRightPadding ?? 0)}px 0 16px !important;\n  text-overflow: ellipsis;\n\n  outline: none;\n  position: relative;\n\n  font-size: 16px;\n\n  &::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px;\n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px;\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  color: ${COLORS.black} !important;\n\n  ${(props) => (props.activeErrorMessage ? activeErrorMessageState : '')}\n\n  &:read-only:not(:disabled) {\n    ${(props) => (props.suppressReadOnlyStyles ? '' : readOnlyState)}\n  }\n\n  &:disabled {\n    border: 1px solid ${COLORS.neutral_100};\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ${COLORS.neutral_300} !important;\n  }\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.focus-visible {\n    ${focusStyles}\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n  }\n  &.valid {\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n  }\n\n  &.active {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n`;\n\nconst ValidationStyling = css`\n  &.error-msg {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    text-align: center;\n    font-weight: 400;\n    box-sizing: border-box;\n  }\n\n  &.error-msg {\n    padding-top: 8px;\n    padding-bottom: 0;\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468')}\n    font-weight: 700;\n    line-height: 15px;\n  }\n`;\n\nexport const Warning = styled.div`\n  display: flex;\n  align-items: center;\n  margin-bottom: 4px;\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  &.small {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  }\n  &.medium {\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  & * {\n    vertical-align: middle;\n    display: inline-block;\n  }\n\n  svg {\n    margin-right: 4px;\n  }\n`;\nexport const ErrorMessage = styled(Warning)`\n  color: ${COLORS.critical_500};\n`;\n\nconst StateColors = {\n  [States.Default]: COLORS.neutral_500,\n  [States.Valid]: COLORS.correct_500,\n  [States.Invalid]: COLORS.critical_500,\n}\n\nexport const ValidationMessage = styled(Warning)<{ type: States.Valid | States.Invalid | States.Default}>`\n  color: ${(props) => StateColors[props.type]};\n`;\n\nexport const NoteMessage = styled(Warning)`\n  color: ${COLORS.neutral_500};\n`;\nexport const AutofilledMessage = styled(Warning)`\n  color: ${COLORS.neutral_600};\n`;\n\nexport { ValidationStyling, InputFieldStyling };\n\nexport const StyledIcon = styled.div`\n  border-radius: 50%;\n`;\n\nexport const SearchIconWrapper = styled(StyledIcon)`\n  position: absolute;\n  border-radius: 50%;\n`;\n"],"mappings":"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"}

package/dist/InputFields/styling.d.ts

@@ -12,6 +12,7 @@ declare const InputFieldStyling: import("styled-components").StyledComponent<"in
     withoutBorder?: boolean | undefined;
     size?: string | undefined;
     suppressReadOnlyStyles?: boolean | undefined;
+    extraRightPadding?: number | undefined;
 }, never>;
 declare const ValidationStyling: import("styled-components").FlattenSimpleInterpolation;
 export declare const Warning: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/InputFields/styling.js

@@ -1,19 +1,23 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _StateColors, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+import { TooltipTrigger } from '../Tooltips/TooltipStyles';
 import styled, { css } from 'styled-components';
 import { BREAKPOINTS, COLORS, focusStyles } from '../styles';
 import { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';
 import { States } from '../types';
-export var InputWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  outline: none;\n  ", ";\n  ", "\n  position: relative;\n"])), function (props) {
+export var InputWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  outline: none;\n  ", ";\n  ", "\n  position: relative;\n  \n  ", "\n\n"])), function (props) {
   return props.readOnly || props.disabled ? 'cursor: not-allowed;' : '';
 }, function (props) {
   return props.margin ? "margin: ".concat(props.margin, ";") : '';
-});
+}, TooltipTrigger());
 export var readOnlyState = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  box-shadow: inset 0 0 0 1px ", " !important;\n  color: ", " !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n"])), COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_600);
 export var activeErrorMessageState = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  box-shadow: inset 0 0 0 2px ", ";\n"])), COLORS.critical_400);
-var InputFieldStyling = styled.input(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n  margin-bottom: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ", "\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 16px !important;\n\n  outline: none;\n  position: relative;\n\n  font-size: 16px;\n\n  &::placeholder {\n    ", "\n  }\n\n  ", " {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px;\n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px;\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  color: ", " !important;\n\n  ", "\n\n  &:read-only:not(:disabled) {\n    ", "\n  }\n\n  &:disabled {\n    border: 1px solid ", ";\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ", " !important;\n  }\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.focus-visible {\n    ", "\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n  &.valid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.active {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n"])), function (props) {
+var InputFieldStyling = styled.input(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n  margin-bottom: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ", "\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 ", "px 0 16px !important;\n  text-overflow: ellipsis;\n\n  outline: none;\n  position: relative;\n\n  font-size: 16px;\n\n  &::placeholder {\n    ", "\n  }\n\n  ", " {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px;\n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px;\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  color: ", " !important;\n\n  ", "\n\n  &:read-only:not(:disabled) {\n    ", "\n  }\n\n  &:disabled {\n    border: 1px solid ", ";\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ", " !important;\n  }\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.focus-visible {\n    ", "\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n  &.valid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.active {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n"])), function (props) {
   return props.withoutBorder ? "-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      " : "-webkit-box-shadow: inset 0px 0px 0px 1px ".concat(COLORS.neutral_400, ";\n      -moz-box-shadow: inset 0px 0px 0px 1px ").concat(COLORS.neutral_400, ";\n      box-shadow: inset 0px 0px 0px 1px ").concat(COLORS.neutral_400, ";");
+}, function (props) {
+  var _props$extraRightPadd;
+  return 16 + ((_props$extraRightPadd = props.extraRightPadding) !== null && _props$extraRightPadd !== void 0 ? _props$extraRightPadd : 0);
 }, ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500), BREAKPOINTS.MEDIUM, ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500), COLORS.black, function (props) {
   return props.activeErrorMessage ? activeErrorMessageState : '';
 }, function (props) {

package/dist/InputFields/styling.js.map

@@ -1 +1 @@
-{"version":3,"file":"styling.js","names":["styled","css","BREAKPOINTS","COLORS","focusStyles","ComponentXXSStyling","ComponentTextStyle","ComponentSStyling","ComponentMStyling","ComponentXSStyling","States","InputWrapper","div","props","readOnly","disabled","margin","readOnlyState","neutral_100","neutral_300","neutral_600","activeErrorMessageState","critical_400","InputFieldStyling","input","withoutBorder","neutral_400","Italic","neutral_500","MEDIUM","black","activeErrorMessage","suppressReadOnlyStyles","primary_800","correct_500","primary_700","ValidationStyling","Regular","Warning","ErrorMessage","critical_500","StateColors","Default","Valid","Invalid","ValidationMessage","type","NoteMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"sources":["../../src/InputFields/styling.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { BREAKPOINTS, COLORS, focusStyles } from '../styles';\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';\nimport {Size, States} from '../types';\n\nexport const InputWrapper = styled.div<{ readOnly?: boolean; disabled?: boolean; margin?: string }>`\n  outline: none;\n  ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')};\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n  position: relative;\n`;\n\nexport const readOnlyState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_300} !important;\n  color: ${COLORS.neutral_600} !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n`;\nexport const activeErrorMessageState = css`\n  box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n`;\n\nconst InputFieldStyling = styled.input<{\n  activeErrorMessage?: boolean;\n  active?: boolean;\n  withoutBorder?: boolean;\n  size?: string;\n  suppressReadOnlyStyles?: boolean;\n}>`\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n  margin-bottom: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ${(props) =>\n    props.withoutBorder\n      ? `-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      `\n      : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};`}\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 16px !important;\n\n  outline: none;\n  position: relative;\n\n  font-size: 16px;\n\n  &::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px;\n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px;\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  color: ${COLORS.black} !important;\n\n  ${(props) => (props.activeErrorMessage ? activeErrorMessageState : '')}\n\n  &:read-only:not(:disabled) {\n    ${(props) => (props.suppressReadOnlyStyles ? '' : readOnlyState)}\n  }\n\n  &:disabled {\n    border: 1px solid ${COLORS.neutral_100};\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ${COLORS.neutral_300} !important;\n  }\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.focus-visible {\n    ${focusStyles}\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n  }\n  &.valid {\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n  }\n\n  &.active {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n`;\n\nconst ValidationStyling = css`\n  &.error-msg {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    text-align: center;\n    font-weight: 400;\n    box-sizing: border-box;\n  }\n\n  &.error-msg {\n    padding-top: 8px;\n    padding-bottom: 0;\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468')}\n    font-weight: 700;\n    line-height: 15px;\n  }\n`;\n\nexport const Warning = styled.div`\n  display: flex;\n  align-items: center;\n  margin-bottom: 4px;\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  &.small {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  }\n  &.medium {\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  & * {\n    vertical-align: middle;\n    display: inline-block;\n  }\n\n  svg {\n    margin-right: 4px;\n  }\n`;\nexport const ErrorMessage = styled(Warning)`\n  color: ${COLORS.critical_500};\n`;\n\nconst StateColors = {\n  [States.Default]: COLORS.neutral_500,\n  [States.Valid]: COLORS.correct_500,\n  [States.Invalid]: COLORS.critical_500,\n}\n\nexport const ValidationMessage = styled(Warning)<{ type: States.Valid | States.Invalid | States.Default}>`\n  color: ${(props) => StateColors[props.type]};\n`;\n\nexport const NoteMessage = styled(Warning)`\n  color: ${COLORS.neutral_500};\n`;\nexport const AutofilledMessage = styled(Warning)`\n  color: ${COLORS.neutral_600};\n`;\n\nexport { ValidationStyling, InputFieldStyling };\n\nexport const StyledIcon = styled.div`\n  border-radius: 50%;\n`;\n\nexport const SearchIconWrapper = styled(StyledIcon)`\n  position: absolute;\n  border-radius: 50%;\n`;\n"],"mappings":"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"}
+{"version":3,"file":"styling.js","names":["TooltipTrigger","styled","css","BREAKPOINTS","COLORS","focusStyles","ComponentXXSStyling","ComponentTextStyle","ComponentSStyling","ComponentMStyling","ComponentXSStyling","States","InputWrapper","div","props","readOnly","disabled","margin","readOnlyState","neutral_100","neutral_300","neutral_600","activeErrorMessageState","critical_400","InputFieldStyling","input","withoutBorder","neutral_400","extraRightPadding","Italic","neutral_500","MEDIUM","black","activeErrorMessage","suppressReadOnlyStyles","primary_800","correct_500","primary_700","ValidationStyling","Regular","Warning","ErrorMessage","critical_500","StateColors","Default","Valid","Invalid","ValidationMessage","type","NoteMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"sources":["../../src/InputFields/styling.ts"],"sourcesContent":["import { TooltipTrigger } from '../Tooltips/TooltipStyles';\nimport styled, { css } from 'styled-components';\nimport { BREAKPOINTS, COLORS, focusStyles } from '../styles';\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';\nimport {Size, States} from '../types';\n\nexport const InputWrapper = styled.div<{ readOnly?: boolean; disabled?: boolean; margin?: string }>`\n  outline: none;\n  ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')};\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n  position: relative;\n  \n  ${TooltipTrigger()}\n\n`;\n\nexport const readOnlyState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_300} !important;\n  color: ${COLORS.neutral_600} !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n`;\nexport const activeErrorMessageState = css`\n  box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n`;\n\nconst InputFieldStyling = styled.input<{\n  activeErrorMessage?: boolean;\n  active?: boolean;\n  withoutBorder?: boolean;\n  size?: string;\n  suppressReadOnlyStyles?: boolean;\n  extraRightPadding?: number;\n}>`\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n  margin-bottom: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ${(props) =>\n    props.withoutBorder\n      ? `-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      `\n      : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};`}\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 ${props => 16 + (props.extraRightPadding ?? 0)}px 0 16px !important;\n  text-overflow: ellipsis;\n\n  outline: none;\n  position: relative;\n\n  font-size: 16px;\n\n  &::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px;\n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px;\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  color: ${COLORS.black} !important;\n\n  ${(props) => (props.activeErrorMessage ? activeErrorMessageState : '')}\n\n  &:read-only:not(:disabled) {\n    ${(props) => (props.suppressReadOnlyStyles ? '' : readOnlyState)}\n  }\n\n  &:disabled {\n    border: 1px solid ${COLORS.neutral_100};\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ${COLORS.neutral_300} !important;\n  }\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.focus-visible {\n    ${focusStyles}\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n  }\n  &.valid {\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n  }\n\n  &.active {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n`;\n\nconst ValidationStyling = css`\n  &.error-msg {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    text-align: center;\n    font-weight: 400;\n    box-sizing: border-box;\n  }\n\n  &.error-msg {\n    padding-top: 8px;\n    padding-bottom: 0;\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468')}\n    font-weight: 700;\n    line-height: 15px;\n  }\n`;\n\nexport const Warning = styled.div`\n  display: flex;\n  align-items: center;\n  margin-bottom: 4px;\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  &.small {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  }\n  &.medium {\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  & * {\n    vertical-align: middle;\n    display: inline-block;\n  }\n\n  svg {\n    margin-right: 4px;\n  }\n`;\nexport const ErrorMessage = styled(Warning)`\n  color: ${COLORS.critical_500};\n`;\n\nconst StateColors = {\n  [States.Default]: COLORS.neutral_500,\n  [States.Valid]: COLORS.correct_500,\n  [States.Invalid]: COLORS.critical_500,\n}\n\nexport const ValidationMessage = styled(Warning)<{ type: States.Valid | States.Invalid | States.Default}>`\n  color: ${(props) => StateColors[props.type]};\n`;\n\nexport const NoteMessage = styled(Warning)`\n  color: ${COLORS.neutral_500};\n`;\nexport const AutofilledMessage = styled(Warning)`\n  color: ${COLORS.neutral_600};\n`;\n\nexport { ValidationStyling, InputFieldStyling };\n\nexport const StyledIcon = styled.div`\n  border-radius: 50%;\n`;\n\nexport const SearchIconWrapper = styled(StyledIcon)`\n  position: absolute;\n  border-radius: 50%;\n`;\n"],"mappings":"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"}

package/dist/Layouts/index.cjs

@@ -4,11 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PageWidth = exports.ContainerMargins = exports.Columns = void 0;
+exports.PageWidth = exports.Columns = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _styles = require("../styles");
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2;
 var GRID = {
   GAP: {
     SMALL: '16px',
@@ -21,14 +21,14 @@ var GRID = {
     LARGE: '32px 64px 128px'
   }
 };
-var PageWidth = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  margin: ", ";\n\n  ", "\n  ", " {\n    margin: ", ";\n    ", "\n  }\n\n  ", " {\n    margin: ", ";\n    ", "\n  }\n\n  ", " {\n    max-width: ", ";\n\n    margin: 32px auto 128px;\n    ", "\n\n  }\n"])), GRID.GUTTER.SMALL, function (props) {
+var PageWidth = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  margin: ", ";\n  ", "\n\n  ", " {\n    margin: ", ";\n    ", "\n  }\n\n  ", " {\n    margin: ", ";\n    ", "\n  }\n\n  ", " {\n    max-width: ", ";\n\n    margin: 32px auto 128px;\n    ", "\n  }\n"])), GRID.GUTTER.SMALL, function (props) {
   return props.unsetMargin && 'margin-top: 0; margin-bottom: 0;';
 }, _styles.BREAKPOINTS.MEDIUM, GRID.GUTTER.MEDIUM, function (props) {
   return props.unsetMargin && 'margin-top: 0; margin-bottom: 0;';
 }, _styles.BREAKPOINTS.LARGE, GRID.GUTTER.LARGE, function (props) {
   return props.unsetMargin && 'margin-top: 0; margin-bottom: 0;';
 }, _styles.BREAKPOINTS.LARGE, function (props) {
-  return props.useMaxWidth ? props.maxWidth ? 'min(100% - 128px,' + props.maxWidth + 'px)' : 'calc(100% - 128px)' : 'calc(1600 - 128px)';
+  return props.useMaxWidth ? props.maxWidth ? 'min(100% - 128px,' + props.maxWidth + 'px)' : 'calc(100% - 128px)' : 'calc(1600px - 128px)';
 }, function (props) {
   return props.unsetMargin && 'margin-top: 0; margin-bottom: 0;';
 });
@@ -47,6 +47,4 @@ var Columns = _styledComponents.default.section(_templateObject2 || (_templateOb
   return props.printColumns || 'none';
 });
 exports.Columns = Columns;
-var ContainerMargins = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  /* X small devices (mobile phones, 320px and up) */\n  @media only screen and (min-width: 320px) {\n    margin: 16px;\n    column-gap: 16px;\n  }\n\n  /* Medium devices (landscape tablets, 768px and up) */\n  @media only screen and (min-width: 768px) {\n    margin: 32px;\n    column-gap: 32px;\n  }\n\n  /* X large devices (laptops/desktops, 1200px and up) */\n  @media only screen and (min-width: 1200px) {\n    margin: 56px;\n    column-gap: 40px;\n  }\n"])));
-exports.ContainerMargins = ContainerMargins;
 //# sourceMappingURL=index.cjs.map

package/dist/Layouts/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["GRID","GAP","SMALL","MEDIUM","LARGE","GUTTER","PageWidth","styled","div","props","unsetMargin","BREAKPOINTS","useMaxWidth","maxWidth","Columns","section","gap","columns","printColumns","ContainerMargins"],"sources":["../../src/Layouts/index.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport {BREAKPOINTS} from '../styles';\n\nconst GRID = {\n  GAP: {\n    SMALL: '16px',\n    MEDIUM: '24px',\n    LARGE: '32px',\n  },\n  GUTTER: {\n    SMALL: '16px 16px 32px',\n    MEDIUM: '24px 32px 64px',\n    LARGE: '32px 64px 128px',\n  },\n};\n\nexport const PageWidth = styled.div<{ useMaxWidth?: boolean; maxWidth?: number; unsetMargin?: boolean; }>`\n  display: block;\n  margin: ${GRID.GUTTER.SMALL};\n\n  ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\n  ${BREAKPOINTS.MEDIUM} {\n    margin: ${GRID.GUTTER.MEDIUM};\n    ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    margin: ${GRID.GUTTER.LARGE};\n    ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    max-width: ${(props) => (\n            props.useMaxWidth\n                    ? (props.maxWidth\n                            ? 'min(100% - 128px,' + props.maxWidth + 'px)'\n                            : 'calc(100% - 128px)')\n                    : 'calc(1600 - 128px)')};\n\n    margin: 32px auto 128px;\n    ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\n\n  }\n`;\n\nexport const Columns = styled.section<{ gap?: string; columns?: string; printColumns?: string }>`\n  width: 100%;\n  display: grid;\n  grid-gap: ${(props) => props.gap || GRID.GAP.SMALL};\n  word-break: break-word; /* Prevent long words from breaking the layout – consider making this rule global */\n\n  ${BREAKPOINTS.MEDIUM} {\n    grid-template-columns: ${(props) => props.columns};\n    -ms-grid-columns: ${(props) => props.columns};\n    grid-gap: ${(props) => props.gap || GRID.GAP.MEDIUM};\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    grid-gap: ${(props) => props.gap || GRID.GAP.LARGE};\n  }\n\n  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n    display: -ms-grid;\n\n    > *:not(:first-child) {\n      margin-left: ${GRID.GAP.MEDIUM};\n    }\n  }\n\n  @media print {\n    grid-gap: 0;\n    grid-template-columns: ${(props) => props.printColumns || 'none'};\n  }\n`;\n\nexport const ContainerMargins = styled.div`\n  /* X small devices (mobile phones, 320px and up) */\n  @media only screen and (min-width: 320px) {\n    margin: 16px;\n    column-gap: 16px;\n  }\n\n  /* Medium devices (landscape tablets, 768px and up) */\n  @media only screen and (min-width: 768px) {\n    margin: 32px;\n    column-gap: 32px;\n  }\n\n  /* X large devices (laptops/desktops, 1200px and up) */\n  @media only screen and (min-width: 1200px) {\n    margin: 56px;\n    column-gap: 40px;\n  }\n`;\n"],"mappings":";;;;;;;;AAAA;AAEA;AAAsC;AAEtC,IAAMA,IAAI,GAAG;EACXC,GAAG,EAAE;IACHC,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdC,KAAK,EAAE;EACT,CAAC;EACDC,MAAM,EAAE;IACNH,KAAK,EAAE,gBAAgB;IACvBC,MAAM,EAAE,gBAAgB;IACxBC,KAAK,EAAE;EACT;AACF,CAAC;AAEM,IAAME,SAAS,GAAGC,yBAAM,CAACC,GAAG,iTAEvBR,IAAI,CAACK,MAAM,CAACH,KAAK,EAEzB,UAAAO,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAChEC,mBAAW,CAACR,MAAM,EACRH,IAAI,CAACK,MAAM,CAACF,MAAM,EAC1B,UAAAM,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAGlEC,mBAAW,CAACP,KAAK,EACPJ,IAAI,CAACK,MAAM,CAACD,KAAK,EACzB,UAAAK,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAGlEC,mBAAW,CAACP,KAAK,EACJ,UAACK,KAAK;EAAA,OACXA,KAAK,CAACG,WAAW,GACNH,KAAK,CAACI,QAAQ,GACP,mBAAmB,GAAGJ,KAAK,CAACI,QAAQ,GAAG,KAAK,GAC5C,oBAAoB,GAC5B,oBAAoB;AAAA,CAAC,EAGrC,UAAAJ,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,EAGrE;AAAC;AAEK,IAAMI,OAAO,GAAGP,yBAAM,CAACQ,OAAO,ooBAGvB,UAACN,KAAK;EAAA,OAAKA,KAAK,CAACO,GAAG,IAAIhB,IAAI,CAACC,GAAG,CAACC,KAAK;AAAA,GAGhDS,mBAAW,CAACR,MAAM,EACO,UAACM,KAAK;EAAA,OAAKA,KAAK,CAACQ,OAAO;AAAA,GAC7B,UAACR,KAAK;EAAA,OAAKA,KAAK,CAACQ,OAAO;AAAA,GAChC,UAACR,KAAK;EAAA,OAAKA,KAAK,CAACO,GAAG,IAAIhB,IAAI,CAACC,GAAG,CAACE,MAAM;AAAA,GAGnDQ,mBAAW,CAACP,KAAK,EACL,UAACK,KAAK;EAAA,OAAKA,KAAK,CAACO,GAAG,IAAIhB,IAAI,CAACC,GAAG,CAACG,KAAK;AAAA,GAOjCJ,IAAI,CAACC,GAAG,CAACE,MAAM,EAMP,UAACM,KAAK;EAAA,OAAKA,KAAK,CAACS,YAAY,IAAI,MAAM;AAAA,EAEnE;AAAC;AAEK,IAAMC,gBAAgB,GAAGZ,yBAAM,CAACC,GAAG,kiBAkBzC;AAAC"}
+{"version":3,"file":"index.cjs","names":["GRID","GAP","SMALL","MEDIUM","LARGE","GUTTER","PageWidth","styled","div","props","unsetMargin","BREAKPOINTS","useMaxWidth","maxWidth","Columns","section","gap","columns","printColumns"],"sources":["../../src/Layouts/index.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport {BREAKPOINTS} from '../styles';\n\nconst GRID = {\n  GAP: {\n    SMALL: '16px',\n    MEDIUM: '24px',\n    LARGE: '32px',\n  },\n  GUTTER: {\n    SMALL: '16px 16px 32px',\n    MEDIUM: '24px 32px 64px',\n    LARGE: '32px 64px 128px',\n  },\n};\n\nexport const PageWidth = styled.div<{ useMaxWidth?: boolean; maxWidth?: number; unsetMargin?: boolean; }>`\n  display: block;\n  margin: ${GRID.GUTTER.SMALL};\n  ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin: ${GRID.GUTTER.MEDIUM};\n    ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    margin: ${GRID.GUTTER.LARGE};\n    ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    max-width: ${(props) => (\n            props.useMaxWidth\n                    ? (props.maxWidth\n                            ? 'min(100% - 128px,' + props.maxWidth + 'px)'\n                            : 'calc(100% - 128px)')\n                    : 'calc(1600px - 128px)')};\n\n    margin: 32px auto 128px;\n    ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\n  }\n`;\n\nexport const Columns = styled.section<{ gap?: string; columns?: string; printColumns?: string }>`\n  width: 100%;\n  display: grid;\n  grid-gap: ${(props) => props.gap || GRID.GAP.SMALL};\n  word-break: break-word; /* Prevent long words from breaking the layout – consider making this rule global */\n\n  ${BREAKPOINTS.MEDIUM} {\n    grid-template-columns: ${(props) => props.columns};\n    -ms-grid-columns: ${(props) => props.columns};\n    grid-gap: ${(props) => props.gap || GRID.GAP.MEDIUM};\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    grid-gap: ${(props) => props.gap || GRID.GAP.LARGE};\n  }\n\n  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n    display: -ms-grid;\n\n    > *:not(:first-child) {\n      margin-left: ${GRID.GAP.MEDIUM};\n    }\n  }\n\n  @media print {\n    grid-gap: 0;\n    grid-template-columns: ${(props) => props.printColumns || 'none'};\n  }\n`;\n"],"mappings":";;;;;;;;AAAA;AAEA;AAAsC;AAEtC,IAAMA,IAAI,GAAG;EACXC,GAAG,EAAE;IACHC,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdC,KAAK,EAAE;EACT,CAAC;EACDC,MAAM,EAAE;IACNH,KAAK,EAAE,gBAAgB;IACvBC,MAAM,EAAE,gBAAgB;IACxBC,KAAK,EAAE;EACT;AACF,CAAC;AAEM,IAAME,SAAS,GAAGC,yBAAM,CAACC,GAAG,+SAEvBR,IAAI,CAACK,MAAM,CAACH,KAAK,EACzB,UAAAO,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAEhEC,mBAAW,CAACR,MAAM,EACRH,IAAI,CAACK,MAAM,CAACF,MAAM,EAC1B,UAAAM,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAGlEC,mBAAW,CAACP,KAAK,EACPJ,IAAI,CAACK,MAAM,CAACD,KAAK,EACzB,UAAAK,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAGlEC,mBAAW,CAACP,KAAK,EACJ,UAACK,KAAK;EAAA,OACXA,KAAK,CAACG,WAAW,GACNH,KAAK,CAACI,QAAQ,GACP,mBAAmB,GAAGJ,KAAK,CAACI,QAAQ,GAAG,KAAK,GAC5C,oBAAoB,GAC5B,sBAAsB;AAAA,CAAC,EAGvC,UAAAJ,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,EAErE;AAAC;AAEK,IAAMI,OAAO,GAAGP,yBAAM,CAACQ,OAAO,ooBAGvB,UAACN,KAAK;EAAA,OAAKA,KAAK,CAACO,GAAG,IAAIhB,IAAI,CAACC,GAAG,CAACC,KAAK;AAAA,GAGhDS,mBAAW,CAACR,MAAM,EACO,UAACM,KAAK;EAAA,OAAKA,KAAK,CAACQ,OAAO;AAAA,GAC7B,UAACR,KAAK;EAAA,OAAKA,KAAK,CAACQ,OAAO;AAAA,GAChC,UAACR,KAAK;EAAA,OAAKA,KAAK,CAACO,GAAG,IAAIhB,IAAI,CAACC,GAAG,CAACE,MAAM;AAAA,GAGnDQ,mBAAW,CAACP,KAAK,EACL,UAACK,KAAK;EAAA,OAAKA,KAAK,CAACO,GAAG,IAAIhB,IAAI,CAACC,GAAG,CAACG,KAAK;AAAA,GAOjCJ,IAAI,CAACC,GAAG,CAACE,MAAM,EAMP,UAACM,KAAK;EAAA,OAAKA,KAAK,CAACS,YAAY,IAAI,MAAM;AAAA,EAEnE;AAAC"}

package/dist/Layouts/index.d.ts

@@ -8,4 +8,3 @@ export declare const Columns: import("styled-components").StyledComponent<"secti
     columns?: string | undefined;
     printColumns?: string | undefined;
 }, never>;
-export declare const ContainerMargins: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/Layouts/index.js

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2;
 import styled from 'styled-components';
 import { BREAKPOINTS } from '../styles';
 var GRID = {
@@ -14,14 +14,14 @@ var GRID = {
     LARGE: '32px 64px 128px'
   }
 };
-export var PageWidth = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  margin: ", ";\n\n  ", "\n  ", " {\n    margin: ", ";\n    ", "\n  }\n\n  ", " {\n    margin: ", ";\n    ", "\n  }\n\n  ", " {\n    max-width: ", ";\n\n    margin: 32px auto 128px;\n    ", "\n\n  }\n"])), GRID.GUTTER.SMALL, function (props) {
+export var PageWidth = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  margin: ", ";\n  ", "\n\n  ", " {\n    margin: ", ";\n    ", "\n  }\n\n  ", " {\n    margin: ", ";\n    ", "\n  }\n\n  ", " {\n    max-width: ", ";\n\n    margin: 32px auto 128px;\n    ", "\n  }\n"])), GRID.GUTTER.SMALL, function (props) {
   return props.unsetMargin && 'margin-top: 0; margin-bottom: 0;';
 }, BREAKPOINTS.MEDIUM, GRID.GUTTER.MEDIUM, function (props) {
   return props.unsetMargin && 'margin-top: 0; margin-bottom: 0;';
 }, BREAKPOINTS.LARGE, GRID.GUTTER.LARGE, function (props) {
   return props.unsetMargin && 'margin-top: 0; margin-bottom: 0;';
 }, BREAKPOINTS.LARGE, function (props) {
-  return props.useMaxWidth ? props.maxWidth ? 'min(100% - 128px,' + props.maxWidth + 'px)' : 'calc(100% - 128px)' : 'calc(1600 - 128px)';
+  return props.useMaxWidth ? props.maxWidth ? 'min(100% - 128px,' + props.maxWidth + 'px)' : 'calc(100% - 128px)' : 'calc(1600px - 128px)';
 }, function (props) {
   return props.unsetMargin && 'margin-top: 0; margin-bottom: 0;';
 });
@@ -38,5 +38,4 @@ export var Columns = styled.section(_templateObject2 || (_templateObject2 = _tag
 }, GRID.GAP.MEDIUM, function (props) {
   return props.printColumns || 'none';
 });
-export var ContainerMargins = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  /* X small devices (mobile phones, 320px and up) */\n  @media only screen and (min-width: 320px) {\n    margin: 16px;\n    column-gap: 16px;\n  }\n\n  /* Medium devices (landscape tablets, 768px and up) */\n  @media only screen and (min-width: 768px) {\n    margin: 32px;\n    column-gap: 32px;\n  }\n\n  /* X large devices (laptops/desktops, 1200px and up) */\n  @media only screen and (min-width: 1200px) {\n    margin: 56px;\n    column-gap: 40px;\n  }\n"])));
 //# sourceMappingURL=index.js.map

package/dist/Layouts/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["styled","BREAKPOINTS","GRID","GAP","SMALL","MEDIUM","LARGE","GUTTER","PageWidth","div","props","unsetMargin","useMaxWidth","maxWidth","Columns","section","gap","columns","printColumns","ContainerMargins"],"sources":["../../src/Layouts/index.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport {BREAKPOINTS} from '../styles';\n\nconst GRID = {\n  GAP: {\n    SMALL: '16px',\n    MEDIUM: '24px',\n    LARGE: '32px',\n  },\n  GUTTER: {\n    SMALL: '16px 16px 32px',\n    MEDIUM: '24px 32px 64px',\n    LARGE: '32px 64px 128px',\n  },\n};\n\nexport const PageWidth = styled.div<{ useMaxWidth?: boolean; maxWidth?: number; unsetMargin?: boolean; }>`\n  display: block;\n  margin: ${GRID.GUTTER.SMALL};\n\n  ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\n  ${BREAKPOINTS.MEDIUM} {\n    margin: ${GRID.GUTTER.MEDIUM};\n    ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    margin: ${GRID.GUTTER.LARGE};\n    ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    max-width: ${(props) => (\n            props.useMaxWidth\n                    ? (props.maxWidth\n                            ? 'min(100% - 128px,' + props.maxWidth + 'px)'\n                            : 'calc(100% - 128px)')\n                    : 'calc(1600 - 128px)')};\n\n    margin: 32px auto 128px;\n    ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\n\n  }\n`;\n\nexport const Columns = styled.section<{ gap?: string; columns?: string; printColumns?: string }>`\n  width: 100%;\n  display: grid;\n  grid-gap: ${(props) => props.gap || GRID.GAP.SMALL};\n  word-break: break-word; /* Prevent long words from breaking the layout – consider making this rule global */\n\n  ${BREAKPOINTS.MEDIUM} {\n    grid-template-columns: ${(props) => props.columns};\n    -ms-grid-columns: ${(props) => props.columns};\n    grid-gap: ${(props) => props.gap || GRID.GAP.MEDIUM};\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    grid-gap: ${(props) => props.gap || GRID.GAP.LARGE};\n  }\n\n  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n    display: -ms-grid;\n\n    > *:not(:first-child) {\n      margin-left: ${GRID.GAP.MEDIUM};\n    }\n  }\n\n  @media print {\n    grid-gap: 0;\n    grid-template-columns: ${(props) => props.printColumns || 'none'};\n  }\n`;\n\nexport const ContainerMargins = styled.div`\n  /* X small devices (mobile phones, 320px and up) */\n  @media only screen and (min-width: 320px) {\n    margin: 16px;\n    column-gap: 16px;\n  }\n\n  /* Medium devices (landscape tablets, 768px and up) */\n  @media only screen and (min-width: 768px) {\n    margin: 32px;\n    column-gap: 32px;\n  }\n\n  /* X large devices (laptops/desktops, 1200px and up) */\n  @media only screen and (min-width: 1200px) {\n    margin: 56px;\n    column-gap: 40px;\n  }\n`;\n"],"mappings":";;AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,SAAQC,WAAW,QAAO,WAAW;AAErC,IAAMC,IAAI,GAAG;EACXC,GAAG,EAAE;IACHC,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdC,KAAK,EAAE;EACT,CAAC;EACDC,MAAM,EAAE;IACNH,KAAK,EAAE,gBAAgB;IACvBC,MAAM,EAAE,gBAAgB;IACxBC,KAAK,EAAE;EACT;AACF,CAAC;AAED,OAAO,IAAME,SAAS,GAAGR,MAAM,CAACS,GAAG,mSAEvBP,IAAI,CAACK,MAAM,CAACH,KAAK,EAEzB,UAAAM,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAChEV,WAAW,CAACI,MAAM,EACRH,IAAI,CAACK,MAAM,CAACF,MAAM,EAC1B,UAAAK,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAGlEV,WAAW,CAACK,KAAK,EACPJ,IAAI,CAACK,MAAM,CAACD,KAAK,EACzB,UAAAI,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAGlEV,WAAW,CAACK,KAAK,EACJ,UAACI,KAAK;EAAA,OACXA,KAAK,CAACE,WAAW,GACNF,KAAK,CAACG,QAAQ,GACP,mBAAmB,GAAGH,KAAK,CAACG,QAAQ,GAAG,KAAK,GAC5C,oBAAoB,GAC5B,oBAAoB;AAAA,CAAC,EAGrC,UAAAH,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,EAGrE;AAED,OAAO,IAAMG,OAAO,GAAGd,MAAM,CAACe,OAAO,snBAGvB,UAACL,KAAK;EAAA,OAAKA,KAAK,CAACM,GAAG,IAAId,IAAI,CAACC,GAAG,CAACC,KAAK;AAAA,GAGhDH,WAAW,CAACI,MAAM,EACO,UAACK,KAAK;EAAA,OAAKA,KAAK,CAACO,OAAO;AAAA,GAC7B,UAACP,KAAK;EAAA,OAAKA,KAAK,CAACO,OAAO;AAAA,GAChC,UAACP,KAAK;EAAA,OAAKA,KAAK,CAACM,GAAG,IAAId,IAAI,CAACC,GAAG,CAACE,MAAM;AAAA,GAGnDJ,WAAW,CAACK,KAAK,EACL,UAACI,KAAK;EAAA,OAAKA,KAAK,CAACM,GAAG,IAAId,IAAI,CAACC,GAAG,CAACG,KAAK;AAAA,GAOjCJ,IAAI,CAACC,GAAG,CAACE,MAAM,EAMP,UAACK,KAAK;EAAA,OAAKA,KAAK,CAACQ,YAAY,IAAI,MAAM;AAAA,EAEnE;AAED,OAAO,IAAMC,gBAAgB,GAAGnB,MAAM,CAACS,GAAG,ohBAkBzC"}
+{"version":3,"file":"index.js","names":["styled","BREAKPOINTS","GRID","GAP","SMALL","MEDIUM","LARGE","GUTTER","PageWidth","div","props","unsetMargin","useMaxWidth","maxWidth","Columns","section","gap","columns","printColumns"],"sources":["../../src/Layouts/index.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport {BREAKPOINTS} from '../styles';\n\nconst GRID = {\n  GAP: {\n    SMALL: '16px',\n    MEDIUM: '24px',\n    LARGE: '32px',\n  },\n  GUTTER: {\n    SMALL: '16px 16px 32px',\n    MEDIUM: '24px 32px 64px',\n    LARGE: '32px 64px 128px',\n  },\n};\n\nexport const PageWidth = styled.div<{ useMaxWidth?: boolean; maxWidth?: number; unsetMargin?: boolean; }>`\n  display: block;\n  margin: ${GRID.GUTTER.SMALL};\n  ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin: ${GRID.GUTTER.MEDIUM};\n    ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    margin: ${GRID.GUTTER.LARGE};\n    ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    max-width: ${(props) => (\n            props.useMaxWidth\n                    ? (props.maxWidth\n                            ? 'min(100% - 128px,' + props.maxWidth + 'px)'\n                            : 'calc(100% - 128px)')\n                    : 'calc(1600px - 128px)')};\n\n    margin: 32px auto 128px;\n    ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\n  }\n`;\n\nexport const Columns = styled.section<{ gap?: string; columns?: string; printColumns?: string }>`\n  width: 100%;\n  display: grid;\n  grid-gap: ${(props) => props.gap || GRID.GAP.SMALL};\n  word-break: break-word; /* Prevent long words from breaking the layout – consider making this rule global */\n\n  ${BREAKPOINTS.MEDIUM} {\n    grid-template-columns: ${(props) => props.columns};\n    -ms-grid-columns: ${(props) => props.columns};\n    grid-gap: ${(props) => props.gap || GRID.GAP.MEDIUM};\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    grid-gap: ${(props) => props.gap || GRID.GAP.LARGE};\n  }\n\n  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n    display: -ms-grid;\n\n    > *:not(:first-child) {\n      margin-left: ${GRID.GAP.MEDIUM};\n    }\n  }\n\n  @media print {\n    grid-gap: 0;\n    grid-template-columns: ${(props) => props.printColumns || 'none'};\n  }\n`;\n"],"mappings":";;AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,SAAQC,WAAW,QAAO,WAAW;AAErC,IAAMC,IAAI,GAAG;EACXC,GAAG,EAAE;IACHC,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdC,KAAK,EAAE;EACT,CAAC;EACDC,MAAM,EAAE;IACNH,KAAK,EAAE,gBAAgB;IACvBC,MAAM,EAAE,gBAAgB;IACxBC,KAAK,EAAE;EACT;AACF,CAAC;AAED,OAAO,IAAME,SAAS,GAAGR,MAAM,CAACS,GAAG,iSAEvBP,IAAI,CAACK,MAAM,CAACH,KAAK,EACzB,UAAAM,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAEhEV,WAAW,CAACI,MAAM,EACRH,IAAI,CAACK,MAAM,CAACF,MAAM,EAC1B,UAAAK,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAGlEV,WAAW,CAACK,KAAK,EACPJ,IAAI,CAACK,MAAM,CAACD,KAAK,EACzB,UAAAI,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAGlEV,WAAW,CAACK,KAAK,EACJ,UAACI,KAAK;EAAA,OACXA,KAAK,CAACE,WAAW,GACNF,KAAK,CAACG,QAAQ,GACP,mBAAmB,GAAGH,KAAK,CAACG,QAAQ,GAAG,KAAK,GAC5C,oBAAoB,GAC5B,sBAAsB;AAAA,CAAC,EAGvC,UAAAH,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,EAErE;AAED,OAAO,IAAMG,OAAO,GAAGd,MAAM,CAACe,OAAO,snBAGvB,UAACL,KAAK;EAAA,OAAKA,KAAK,CAACM,GAAG,IAAId,IAAI,CAACC,GAAG,CAACC,KAAK;AAAA,GAGhDH,WAAW,CAACI,MAAM,EACO,UAACK,KAAK;EAAA,OAAKA,KAAK,CAACO,OAAO;AAAA,GAC7B,UAACP,KAAK;EAAA,OAAKA,KAAK,CAACO,OAAO;AAAA,GAChC,UAACP,KAAK;EAAA,OAAKA,KAAK,CAACM,GAAG,IAAId,IAAI,CAACC,GAAG,CAACE,MAAM;AAAA,GAGnDJ,WAAW,CAACK,KAAK,EACL,UAACI,KAAK;EAAA,OAAKA,KAAK,CAACM,GAAG,IAAId,IAAI,CAACC,GAAG,CAACG,KAAK;AAAA,GAOjCJ,IAAI,CAACC,GAAG,CAACE,MAAM,EAMP,UAACK,KAAK;EAAA,OAAKA,KAAK,CAACQ,YAAY,IAAI,MAAM;AAAA,EAEnE"}

package/dist/LoadingIndicator/LoadingIndicator.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Size } from '../types';
 type LoadingIndicatorProps = {
     id?: string;

package/dist/MiniProductCard/MiniProductCard.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Product } from '../types';
 type CardProps = {
     product: Product;

package/dist/NavItem/NavItem.cjs

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.NavItemDiv = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -18,6 +18,7 @@ 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) { (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  ", " {\n    height: 80px;\n  }\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    background-color: transparent;\n    height: 3px;\n    border-radius: 3px;\n    left: 2px;\n    right: 2px;\n    bottom: 2px;\n  }\n\n  &.active:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &.disabled {\n    color: ", ";\n    background-color: ", ";\n\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &:hover:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &:active:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n\n  &:focus:not(.disabled) {\n    ", "\n    outline-offset: -4px;\n  }\n"])), (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), _styles.BREAKPOINTS.LARGE, _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_700, _zIndexes.Z_INDEXES.active, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.primary_800, _styles.focusStyles);
+exports.NavItemDiv = NavItemDiv;
 var NavItem = function NavItem(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(NavItemDiv, _objectSpread({}, props));
 };

package/dist/NavItem/NavItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavItem.cjs","names":["NavItemDiv","styled","div","ComponentMStyling","ComponentTextStyle","Regular","COLORS","neutral_600","BREAKPOINTS","LARGE","Z_INDEXES","active","neutral_20","neutral_800","primary_600","neutral_300","neutral_100","hover","primary_20","primary_700","primary_100","primary_800","focusStyles","NavItem","props"],"sources":["../../src/NavItem/NavItem.tsx"],"sourcesContent":["import styled, {StyledComponentProps} from 'styled-components';\nimport React from 'react';\nimport {BREAKPOINTS, 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  ${BREAKPOINTS.LARGE} {\n    height: 80px;\n  }\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    background-color: transparent;\n    height: 3px;\n    border-radius: 3px;\n    left: 2px;\n    right: 2px;\n    bottom: 2px;\n  }\n\n  &.active:not(.disabled) {\n    z-index: ${Z_INDEXES.active};\n    background-color: ${COLORS.neutral_20};\n    color: ${COLORS.neutral_800};\n\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\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\n    &:after {\n      background-color: ${COLORS.primary_700};\n    }\n  }\n\n  &:active:not(.disabled) {\n    z-index: ${Z_INDEXES.active};\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n\n    &:after {\n      background-color: ${COLORS.primary_800};\n    }\n  }\n\n\n  &:focus:not(.disabled) {\n    ${focusStyles}\n    outline-offset: -4px;\n  }\n`;\n\n\nconst NavItem = (props: StyledComponentPropsWithAs<string | React.ComponentType<any>, any, {}, never, string | React.ComponentType<any>, \"div\">) => {\n  return (\n    <NavItemDiv {...props} />\n  );\n};\n\nexport default NavItem;\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAA8C;AAAA;AAAA;AAAA;AAa9C,IAAMA,UAAU,GAAGC,yBAAM,CAACC,GAAG,8oCACzB,IAAAC,6BAAiB,EAACC,8BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,WAAW,CAAC,EAMjEC,mBAAW,CAACC,KAAK,EAsBNC,mBAAS,CAACC,MAAM,EACPL,cAAM,CAACM,UAAU,EAC5BN,cAAM,CAACO,WAAW,EAGLP,cAAM,CAACQ,WAAW,EAK/BR,cAAM,CAACS,WAAW,EACPT,cAAM,CAACU,WAAW,EAGhBV,cAAM,CAACU,WAAW,EAK7BN,mBAAS,CAACO,KAAK,EACNX,cAAM,CAACY,UAAU,EAC5BZ,cAAM,CAACa,WAAW,EAGLb,cAAM,CAACa,WAAW,EAK7BT,mBAAS,CAACC,MAAM,EACPL,cAAM,CAACc,WAAW,EAC7Bd,cAAM,CAACe,WAAW,EAGLf,cAAM,CAACe,WAAW,EAMtCC,mBAAW,CAGhB;AAGD,IAAMC,OAAO,GAAG,SAAVA,OAAO,CAAIC,KAA8H,EAAK;EAClJ,oBACE,qBAAC,UAAU,oBAAKA,KAAK,EAAI;AAE7B,CAAC;AAAC,eAEaD,OAAO;AAAA"}
+{"version":3,"file":"NavItem.cjs","names":["NavItemDiv","styled","div","ComponentMStyling","ComponentTextStyle","Regular","COLORS","neutral_600","BREAKPOINTS","LARGE","Z_INDEXES","active","neutral_20","neutral_800","primary_600","neutral_300","neutral_100","hover","primary_20","primary_700","primary_100","primary_800","focusStyles","NavItem","props"],"sources":["../../src/NavItem/NavItem.tsx"],"sourcesContent":["import styled, {StyledComponentProps} from 'styled-components';\nimport React from 'react';\nimport {BREAKPOINTS, 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\nexport const 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  ${BREAKPOINTS.LARGE} {\n    height: 80px;\n  }\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    background-color: transparent;\n    height: 3px;\n    border-radius: 3px;\n    left: 2px;\n    right: 2px;\n    bottom: 2px;\n  }\n\n  &.active:not(.disabled) {\n    z-index: ${Z_INDEXES.active};\n    background-color: ${COLORS.neutral_20};\n    color: ${COLORS.neutral_800};\n\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\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\n    &:after {\n      background-color: ${COLORS.primary_700};\n    }\n  }\n\n  &:active:not(.disabled) {\n    z-index: ${Z_INDEXES.active};\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n\n    &:after {\n      background-color: ${COLORS.primary_800};\n    }\n  }\n\n\n  &:focus:not(.disabled) {\n    ${focusStyles}\n    outline-offset: -4px;\n  }\n`;\n\n\nconst NavItem = (props: StyledComponentPropsWithAs<string | React.ComponentType<any>, any, {}, never, string | React.ComponentType<any>, \"div\">) => {\n  return (\n    <NavItemDiv {...props} />\n  );\n};\n\nexport default NavItem;\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAA8C;AAAA;AAAA;AAAA;AAavC,IAAMA,UAAU,GAAGC,yBAAM,CAACC,GAAG,8oCAChC,IAAAC,6BAAiB,EAACC,8BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,WAAW,CAAC,EAMjEC,mBAAW,CAACC,KAAK,EAsBNC,mBAAS,CAACC,MAAM,EACPL,cAAM,CAACM,UAAU,EAC5BN,cAAM,CAACO,WAAW,EAGLP,cAAM,CAACQ,WAAW,EAK/BR,cAAM,CAACS,WAAW,EACPT,cAAM,CAACU,WAAW,EAGhBV,cAAM,CAACU,WAAW,EAK7BN,mBAAS,CAACO,KAAK,EACNX,cAAM,CAACY,UAAU,EAC5BZ,cAAM,CAACa,WAAW,EAGLb,cAAM,CAACa,WAAW,EAK7BT,mBAAS,CAACC,MAAM,EACPL,cAAM,CAACc,WAAW,EAC7Bd,cAAM,CAACe,WAAW,EAGLf,cAAM,CAACe,WAAW,EAMtCC,mBAAW,CAGhB;AAAC;AAGF,IAAMC,OAAO,GAAG,SAAVA,OAAO,CAAIC,KAA8H,EAAK;EAClJ,oBACE,qBAAC,UAAU,oBAAKA,KAAK,EAAI;AAE7B,CAAC;AAAC,eAEaD,OAAO;AAAA"}

package/dist/NavItem/NavItem.d.ts

@@ -4,5 +4,6 @@ export type StyledComponentPropsWithAs<C extends string | React.ComponentType<an
     as?: AsC | undefined;
     forwardedAs?: FAsC | undefined;
 };
+export declare const NavItemDiv: import("styled-components").StyledComponent<"div", any, {}, never>;
 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

@@ -10,7 +10,7 @@ import { BREAKPOINTS, COLORS, focusStyles } from '../styles';
 import { ComponentMStyling, ComponentTextStyle } from '../styles/typography';
 import { Z_INDEXES } from '../styles/z-indexes';
 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  ", " {\n    height: 80px;\n  }\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    background-color: transparent;\n    height: 3px;\n    border-radius: 3px;\n    left: 2px;\n    right: 2px;\n    bottom: 2px;\n  }\n\n  &.active:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &.disabled {\n    color: ", ";\n    background-color: ", ";\n\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &:hover:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &:active:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n\n  &:focus:not(.disabled) {\n    ", "\n    outline-offset: -4px;\n  }\n"])), ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), BREAKPOINTS.LARGE, 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_700, Z_INDEXES.active, COLORS.primary_100, COLORS.primary_800, COLORS.primary_800, focusStyles);
+export var NavItemDiv = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n\n  margin: 0;\n  padding: 0 21px 0 21px;\n  height: 64px;\n\n  ", " {\n    height: 80px;\n  }\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    background-color: transparent;\n    height: 3px;\n    border-radius: 3px;\n    left: 2px;\n    right: 2px;\n    bottom: 2px;\n  }\n\n  &.active:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &.disabled {\n    color: ", ";\n    background-color: ", ";\n\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &:hover:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n  &:active:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n\n    &:after {\n      background-color: ", ";\n    }\n  }\n\n\n  &:focus:not(.disabled) {\n    ", "\n    outline-offset: -4px;\n  }\n"])), ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), BREAKPOINTS.LARGE, 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_700, Z_INDEXES.active, COLORS.primary_100, COLORS.primary_800, COLORS.primary_800, focusStyles);
 var NavItem = function NavItem(props) {
   return /*#__PURE__*/_jsx(NavItemDiv, _objectSpread({}, props));
 };

package/dist/NavItem/NavItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavItem.js","names":["styled","React","BREAKPOINTS","COLORS","focusStyles","ComponentMStyling","ComponentTextStyle","Z_INDEXES","NavItemDiv","div","Regular","neutral_600","LARGE","active","neutral_20","neutral_800","primary_600","neutral_300","neutral_100","hover","primary_20","primary_700","primary_100","primary_800","NavItem","props"],"sources":["../../src/NavItem/NavItem.tsx"],"sourcesContent":["import styled, {StyledComponentProps} from 'styled-components';\nimport React from 'react';\nimport {BREAKPOINTS, 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  ${BREAKPOINTS.LARGE} {\n    height: 80px;\n  }\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    background-color: transparent;\n    height: 3px;\n    border-radius: 3px;\n    left: 2px;\n    right: 2px;\n    bottom: 2px;\n  }\n\n  &.active:not(.disabled) {\n    z-index: ${Z_INDEXES.active};\n    background-color: ${COLORS.neutral_20};\n    color: ${COLORS.neutral_800};\n\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\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\n    &:after {\n      background-color: ${COLORS.primary_700};\n    }\n  }\n\n  &:active:not(.disabled) {\n    z-index: ${Z_INDEXES.active};\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n\n    &:after {\n      background-color: ${COLORS.primary_800};\n    }\n  }\n\n\n  &:focus:not(.disabled) {\n    ${focusStyles}\n    outline-offset: -4px;\n  }\n`;\n\n\nconst NavItem = (props: StyledComponentPropsWithAs<string | React.ComponentType<any>, any, {}, never, string | React.ComponentType<any>, \"div\">) => {\n  return (\n    <NavItemDiv {...props} />\n  );\n};\n\nexport default NavItem;\n"],"mappings":";;;;;;AAAA,OAAOA,MAAM,MAA8B,mBAAmB;AAC9D,OAAOC,KAAK,MAAM,OAAO;AACzB,SAAQC,WAAW,EAAEC,MAAM,EAAEC,WAAW,QAAO,WAAW;AAC1D,SAAQC,iBAAiB,EAAEC,kBAAkB,QAAO,sBAAsB;AAC1E,SAAQC,SAAS,QAAO,qBAAqB;AAAC;AAa9C,IAAMC,UAAU,GAAGR,MAAM,CAACS,GAAG,goCACzBJ,iBAAiB,CAACC,kBAAkB,CAACI,OAAO,EAAEP,MAAM,CAACQ,WAAW,CAAC,EAMjET,WAAW,CAACU,KAAK,EAsBNL,SAAS,CAACM,MAAM,EACPV,MAAM,CAACW,UAAU,EAC5BX,MAAM,CAACY,WAAW,EAGLZ,MAAM,CAACa,WAAW,EAK/Bb,MAAM,CAACc,WAAW,EACPd,MAAM,CAACe,WAAW,EAGhBf,MAAM,CAACe,WAAW,EAK7BX,SAAS,CAACY,KAAK,EACNhB,MAAM,CAACiB,UAAU,EAC5BjB,MAAM,CAACkB,WAAW,EAGLlB,MAAM,CAACkB,WAAW,EAK7Bd,SAAS,CAACM,MAAM,EACPV,MAAM,CAACmB,WAAW,EAC7BnB,MAAM,CAACoB,WAAW,EAGLpB,MAAM,CAACoB,WAAW,EAMtCnB,WAAW,CAGhB;AAGD,IAAMoB,OAAO,GAAG,SAAVA,OAAO,CAAIC,KAA8H,EAAK;EAClJ,oBACE,KAAC,UAAU,oBAAKA,KAAK,EAAI;AAE7B,CAAC;AAED,eAAeD,OAAO"}
+{"version":3,"file":"NavItem.js","names":["styled","React","BREAKPOINTS","COLORS","focusStyles","ComponentMStyling","ComponentTextStyle","Z_INDEXES","NavItemDiv","div","Regular","neutral_600","LARGE","active","neutral_20","neutral_800","primary_600","neutral_300","neutral_100","hover","primary_20","primary_700","primary_100","primary_800","NavItem","props"],"sources":["../../src/NavItem/NavItem.tsx"],"sourcesContent":["import styled, {StyledComponentProps} from 'styled-components';\nimport React from 'react';\nimport {BREAKPOINTS, 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\nexport const 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  ${BREAKPOINTS.LARGE} {\n    height: 80px;\n  }\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    background-color: transparent;\n    height: 3px;\n    border-radius: 3px;\n    left: 2px;\n    right: 2px;\n    bottom: 2px;\n  }\n\n  &.active:not(.disabled) {\n    z-index: ${Z_INDEXES.active};\n    background-color: ${COLORS.neutral_20};\n    color: ${COLORS.neutral_800};\n\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\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\n    &:after {\n      background-color: ${COLORS.primary_700};\n    }\n  }\n\n  &:active:not(.disabled) {\n    z-index: ${Z_INDEXES.active};\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n\n    &:after {\n      background-color: ${COLORS.primary_800};\n    }\n  }\n\n\n  &:focus:not(.disabled) {\n    ${focusStyles}\n    outline-offset: -4px;\n  }\n`;\n\n\nconst NavItem = (props: StyledComponentPropsWithAs<string | React.ComponentType<any>, any, {}, never, string | React.ComponentType<any>, \"div\">) => {\n  return (\n    <NavItemDiv {...props} />\n  );\n};\n\nexport default NavItem;\n"],"mappings":";;;;;;AAAA,OAAOA,MAAM,MAA8B,mBAAmB;AAC9D,OAAOC,KAAK,MAAM,OAAO;AACzB,SAAQC,WAAW,EAAEC,MAAM,EAAEC,WAAW,QAAO,WAAW;AAC1D,SAAQC,iBAAiB,EAAEC,kBAAkB,QAAO,sBAAsB;AAC1E,SAAQC,SAAS,QAAO,qBAAqB;AAAC;AAa9C,OAAO,IAAMC,UAAU,GAAGR,MAAM,CAACS,GAAG,goCAChCJ,iBAAiB,CAACC,kBAAkB,CAACI,OAAO,EAAEP,MAAM,CAACQ,WAAW,CAAC,EAMjET,WAAW,CAACU,KAAK,EAsBNL,SAAS,CAACM,MAAM,EACPV,MAAM,CAACW,UAAU,EAC5BX,MAAM,CAACY,WAAW,EAGLZ,MAAM,CAACa,WAAW,EAK/Bb,MAAM,CAACc,WAAW,EACPd,MAAM,CAACe,WAAW,EAGhBf,MAAM,CAACe,WAAW,EAK7BX,SAAS,CAACY,KAAK,EACNhB,MAAM,CAACiB,UAAU,EAC5BjB,MAAM,CAACkB,WAAW,EAGLlB,MAAM,CAACkB,WAAW,EAK7Bd,SAAS,CAACM,MAAM,EACPV,MAAM,CAACmB,WAAW,EAC7BnB,MAAM,CAACoB,WAAW,EAGLpB,MAAM,CAACoB,WAAW,EAMtCnB,WAAW,CAGhB;AAGD,IAAMoB,OAAO,GAAG,SAAVA,OAAO,CAAIC,KAA8H,EAAK;EAClJ,oBACE,KAAC,UAAU,oBAAKA,KAAK,EAAI;AAE7B,CAAC;AAED,eAAeD,OAAO"}

package/dist/NavItem/NestedNavItem.cjs

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var React = _interopRequireWildcard(require("react"));
+var _types = require("../types");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["active", "item", "onClickHandler", "size", "className", "tabIndex", "iconRight", "id"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var NestedNavItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var active = _ref.active,
+    item = _ref.item,
+    onClickHandler = _ref.onClickHandler,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? _types.Size.Medium : _ref$size,
+    className = _ref.className,
+    tabIndex = _ref.tabIndex,
+    iconRight = _ref.iconRight,
+    id = _ref.id,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
+});
+NestedNavItem.propTypes = {
+  onClickHandler: _propTypes.default.func.isRequired,
+  active: _propTypes.default.bool.isRequired,
+  id: _propTypes.default.string.isRequired,
+  iconRight: _propTypes.default.element
+};
+var _default = NestedNavItem;
+exports.default = _default;
+//# sourceMappingURL=NestedNavItem.cjs.map

package/dist/NavItem/NestedNavItem.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NestedNavItem.cjs","names":["NestedNavItem","React","forwardRef","ref","active","item","onClickHandler","size","Size","Medium","className","tabIndex","iconRight","id","rest"],"sources":["../../src/NavItem/NestedNavItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport {Size} from '../types';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\n\nexport interface MenuItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'id' | 'disabled' | 'onMouseDown' | 'onClick'> {\n   item: DropdownItem;\n   onClickHandler: (e: React.MouseEvent) => void;\n   active: boolean;\n   id: string;\n   size?: Size;\n   iconRight?: React.ReactElement;\n}\n\n\nconst NestedNavItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(({\n                                                                       active,\n                                                                       item,\n                                                                       onClickHandler,\n                                                                       size = Size.Medium,\n                                                                       className,\n                                                                       tabIndex,\n                                                                       iconRight,\n                                                                       id,\n                                                                       ...rest\n                                                                     }: MenuItemProps, ref) => {\n  return (\n   <></>\n  );\n});\n\nexport default NestedNavItem;\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAA8B;AAAA;AAAA;AAAA;AAa9B,IAAMA,aAAa,gBAAGC,KAAK,CAACC,UAAU,CAAmC,gBAUcC,GAAG,EAAK;EAAA,IATxBC,MAAM,QAANA,MAAM;IACNC,IAAI,QAAJA,IAAI;IACJC,cAAc,QAAdA,cAAc;IAAA,iBACdC,IAAI;IAAJA,IAAI,0BAAGC,WAAI,CAACC,MAAM;IAClBC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACTC,EAAE,QAAFA,EAAE;IACCC,IAAI;EAE5E,oBACC,8CAAK;AAER,CAAC,CAAC;AAAC;EAtBAR,cAAc;EACdF,MAAM;EACNS,EAAE;EAEFD,SAAS;AAAA;AAAA,eAoBGZ,aAAa;AAAA"}

package/dist/NavItem/NestedNavItem.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { Size } from '../types';
+import { DropdownItem } from '../Dropdown/DropdownContent';
+export interface MenuItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'id' | 'disabled' | 'onMouseDown' | 'onClick'> {
+    item: DropdownItem;
+    onClickHandler: (e: React.MouseEvent) => void;
+    active: boolean;
+    id: string;
+    size?: Size;
+    iconRight?: React.ReactElement;
+}
+declare const NestedNavItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLButtonElement>>;
+export default NestedNavItem;