@laerdal/life-react-components 1.10.3-dev.7 → 1.10.3-dev.8

package/dist/Banners/Banner.cjs

@@ -37,7 +37,7 @@ var _HyperLink2 = require("../HyperLink/HyperLink");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _excluded = ["size", "type", "children", "bottom", "testId", "linkText", "link", "onClose", "icon", "noIcon", "linkAction", "fullWidth", "className"];
+var _excluded = ["size", "type", "children", "bottom", "testId", "linkText", "link", "onClose", "icon", "noIcon", "linkAction"];
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
@@ -49,7 +49,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-var BannerContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  min-height: 48px;\n  display: flex;\n  color: ", ";\n  margin-top: ", ";\n  border-radius: 4px;\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ", " {\n      margin: 0 0 0 16px;\n    }\n    ", " {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  ", " {\n    &:link{\n      color: ", ";\n    }\n    &:visited{\n      color: ", ";\n    }\n    &:focus,\n    &:active{\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n  \n  .full-width-banner{\n    margin: 8px;\n  }\n"])), function (props) {
+var BannerContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  min-height: 48px;\n  display: flex;\n  color: ", ";\n  margin-top: ", ";\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ", " {\n      margin: 0 0 0 16px;\n    }\n    ", " {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  ", " {\n    &:link{\n      color: ", ";\n    }\n    &:visited{\n      color: ", ";\n    }\n    &:focus,\n    &:active{\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), function (props) {
   return props.$type ? props.$type : _styles.COLORS.correct_100;
 }, _styles.COLORS.black, function (props) {
   return props.bottom ? 'auto' : '0';
@@ -61,9 +61,9 @@ var BannerContainer = _styledComponents.default.div(_templateObject || (_templat
   return props.linkFocused;
 }, _styles.COLORS.white);
 
-var BannerCenter = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n\n  display: flex;\n  width: 100%;\n  margin: 0 16px;\n  ", " {\n    margin: 0 32px;\n  }\n  ", " {\n    margin: 0 56px;\n  }\n  &.small {\n    margin: 0 16px;\n  }\n  &.medium {\n    margin: 0 32px;\n  }\n  &.large {\n    margin: 0 56px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n  \n  .full-width-banner & {\n    ", " {\n      margin: 0 24px;\n    }\n    ", " {\n      margin: 0 48px;\n    }\n\n    &.medium{\n      margin: 0 24px;\n    }\n\n    &.large{\n      margin: 0 48px;\n    }\n  }\n"])), function (props) {
+var BannerCenter = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n\n  display: flex;\n  width: 100%;\n  margin: 0 16px;\n  ", " {\n    margin: 0 32px;\n  }\n  ", " {\n    margin: 0 56px;\n  }\n  &.small {\n    margin: 0 16px;\n  }\n  &.medium {\n    margin: 0 32px;\n  }\n  &.large {\n    margin: 0 56px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n"])), function (props) {
   return (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.$color);
-}, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE);
+}, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE);
 
 var ButtonWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 0 0 auto;\n"])));
 
@@ -75,8 +75,7 @@ var BannerContentWrapper = _styledComponents.default.div(_templateObject5 || (_t
 
 var Banner = function Banner(_ref) {
   var size = _ref.size,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'neutral' : _ref$type,
+      type = _ref.type,
       children = _ref.children,
       bottom = _ref.bottom,
       testId = _ref.testId,
@@ -86,8 +85,6 @@ var Banner = function Banner(_ref) {
       icon = _ref.icon,
       noIcon = _ref.noIcon,
       linkAction = _ref.linkAction,
-      fullWidth = _ref.fullWidth,
-      className = _ref.className,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var _React$useState = React.useState(window.innerWidth),
@@ -108,48 +105,45 @@ var Banner = function Banner(_ref) {
     hoverColor: _styles.COLORS.primary_20,
     closeIconColor: _styles.COLORS.primary_500,
     icon: _SystemIcons.Tip,
-    containerType: type,
+    containerType: 'neutral',
     focusBgColor: _styles.COLORS.primary_200,
     linkVisited: _styles.COLORS.primary_600,
     linkFocused: _styles.COLORS.primary_800
   };
-
-  switch (type) {
-    case 'warning':
-      bannerParams.typeColor = _styles.COLORS.warning_100;
-      bannerParams.accentColor = _styles.COLORS.warning_700;
-      bannerParams.focusBgColor = _styles.COLORS.warning_200;
-      bannerParams.hoverColor = _styles.COLORS.warning_20;
-      bannerParams.icon = _SystemIcons.Help;
-      bannerParams.closeIconColor = _styles.COLORS.warning_500;
-      bannerParams.linkVisited = _styles.COLORS.warning_800;
-      bannerParams.linkFocused = _styles.COLORS.warning_800;
-      break;
-
-    case 'critical':
-      bannerParams.typeColor = _styles.COLORS.critical_100;
-      bannerParams.accentColor = _styles.COLORS.critical_700;
-      bannerParams.focusBgColor = _styles.COLORS.critical_200;
-      bannerParams.hoverColor = _styles.COLORS.critical_20;
-      bannerParams.icon = _SystemIcons.TechnicalWarning;
-      bannerParams.closeIconColor = _styles.COLORS.critical_500;
-      bannerParams.linkVisited = _styles.COLORS.critical_800;
-      bannerParams.linkFocused = _styles.COLORS.critical_800;
-      break;
-
-    case 'positive':
-      bannerParams.typeColor = _styles.COLORS.correct_100;
-      bannerParams.accentColor = _styles.COLORS.correct_700;
-      bannerParams.focusBgColor = _styles.COLORS.correct_200;
-      bannerParams.hoverColor = _styles.COLORS.correct_20;
-      bannerParams.icon = _SystemIcons.ThumbsUp;
-      bannerParams.closeIconColor = _styles.COLORS.correct_500;
-      bannerParams.linkVisited = _styles.COLORS.correct_800;
-      bannerParams.linkFocused = _styles.COLORS.correct_800;
-      break;
+  var formatTypeToLowerCase = type === null || type === void 0 ? void 0 : type.toLowerCase();
+
+  if (formatTypeToLowerCase == 'warning') {
+    bannerParams.typeColor = _styles.COLORS.warning_100;
+    bannerParams.accentColor = _styles.COLORS.warning_700;
+    bannerParams.focusBgColor = _styles.COLORS.warning_200;
+    bannerParams.hoverColor = _styles.COLORS.warning_20;
+    bannerParams.icon = _SystemIcons.Help;
+    bannerParams.closeIconColor = _styles.COLORS.warning_500;
+    bannerParams.containerType = formatTypeToLowerCase;
+    bannerParams.linkVisited = _styles.COLORS.warning_800;
+    bannerParams.linkFocused = _styles.COLORS.warning_800;
+  } else if (formatTypeToLowerCase == 'critical') {
+    bannerParams.typeColor = _styles.COLORS.critical_100;
+    bannerParams.accentColor = _styles.COLORS.critical_700;
+    bannerParams.focusBgColor = _styles.COLORS.critical_200;
+    bannerParams.hoverColor = _styles.COLORS.critical_20;
+    bannerParams.icon = _SystemIcons.TechnicalWarning;
+    bannerParams.closeIconColor = _styles.COLORS.critical_500;
+    bannerParams.containerType = formatTypeToLowerCase;
+    bannerParams.linkVisited = _styles.COLORS.critical_800;
+    bannerParams.linkFocused = _styles.COLORS.critical_800;
+  } else if (formatTypeToLowerCase == 'positive') {
+    bannerParams.typeColor = _styles.COLORS.correct_100;
+    bannerParams.accentColor = _styles.COLORS.correct_700;
+    bannerParams.focusBgColor = _styles.COLORS.correct_200;
+    bannerParams.hoverColor = _styles.COLORS.correct_20;
+    bannerParams.icon = _SystemIcons.ThumbsUp;
+    bannerParams.closeIconColor = _styles.COLORS.correct_500;
+    bannerParams.containerType = formatTypeToLowerCase;
+    bannerParams.linkVisited = _styles.COLORS.correct_800;
+    bannerParams.linkFocused = _styles.COLORS.correct_800;
   }
 
-  var cls = "".concat(className !== null && className !== void 0 ? className : '', " ").concat(fullWidth ? 'full-width-banner' : '');
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(BannerContainer, _objectSpread(_objectSpread({
     "data-testid": testId,
     $type: bannerParams.typeColor,
@@ -157,8 +151,7 @@ var Banner = function Banner(_ref) {
     linkVisited: bannerParams.linkVisited,
     link: bannerParams.accentColor,
     hover: bannerParams.hoverColor,
-    bottom: bottom,
-    className: cls
+    bottom: bottom
   }, rest), {}, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(BannerCenter, {
       $color: bannerParams.accentColor,
@@ -207,7 +200,7 @@ var Banner = function Banner(_ref) {
 };
 
 Banner.propTypes = {
-  type: _propTypes.default.oneOf(['warning', 'critical', 'positive', 'neutral']),
+  type: _propTypes.default.string,
   link: _propTypes.default.string,
   linkText: _propTypes.default.string,
   linkAction: _propTypes.default.func,
@@ -216,8 +209,7 @@ Banner.propTypes = {
   testId: _propTypes.default.string,
   icon: _propTypes.default.node,
   onClose: _propTypes.default.func,
-  noIcon: _propTypes.default.bool,
-  fullWidth: _propTypes.default.bool
+  noIcon: _propTypes.default.bool
 };
 var _default = Banner;
 exports.default = _default;

package/dist/Banners/Banner.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Banners/Banner.tsx"],"names":["BannerContainer","styled","div","props","$type","COLORS","correct_100","black","bottom","BREAKPOINTS","MEDIUM","LARGE","StyledLink","link","linkVisited","linkFocused","white","BannerCenter","ComponentTextStyle","Regular","$color","ButtonWrapper","ButtonContainer","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","linkAction","fullWidth","className","rest","React","useState","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","bannerParams","typeColor","primary_100","accentColor","primary_700","hoverColor","primary_20","closeIconColor","primary_500","Tip","containerType","focusBgColor","primary_200","primary_600","primary_800","warning_100","warning_700","warning_200","warning_20","Help","warning_500","warning_800","critical_100","critical_700","critical_200","critical_20","TechnicalWarning","critical_500","critical_800","correct_700","correct_200","correct_20","ThumbsUp","correct_500","correct_800","cls","Math","floor","random","e","preventDefault","hover"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { Close, Help, TechnicalWarning, ThumbsUp, Tip } from '../icons/systemicons/SystemIcons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\nimport { Size } from '../types';\nimport { ComponentMStyling, ComponentResponsive } from '../styles';\nimport { HyperLink } from '../HyperLink';\nimport {StyledLink} from '../HyperLink/HyperLink';\n\n/**\n * Styles for <Banner />\n */\ntype StyleBannerProps = BannerProps & { $type: string, linkVisited: string, linkFocused: string };\n\nconst BannerContainer = styled.div<StyleBannerProps>`\n  background: ${(props: StyleBannerProps) => (props.$type ? props.$type : COLORS.correct_100)};\n  min-height: 48px;\n  display: flex;\n  color: ${COLORS.black};\n  margin-top: ${(props: StyleBannerProps) => (props.bottom ? 'auto' : '0')};\n  border-radius: 4px;\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ${BREAKPOINTS.MEDIUM} {\n      margin: 0 0 0 16px;\n    }\n    ${BREAKPOINTS.LARGE} {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  ${StyledLink} {\n    &:link{\n      color: ${(props) => props.link};\n    }\n    &:visited{\n      color: ${(props) => props.linkVisited};\n    }\n    &:focus,\n    &:active{\n      background-color: ${(props) => props.linkFocused};\n      color: ${COLORS.white};\n    }\n  }\n  \n  .full-width-banner{\n    margin: 8px;\n  }\n`;\n\nconst BannerCenter = styled.div<{ $color: string }>`\n  ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color)}\n\n  display: flex;\n  width: 100%;\n  margin: 0 16px;\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 32px;\n  }\n  ${BREAKPOINTS.LARGE} {\n    margin: 0 56px;\n  }\n  &.small {\n    margin: 0 16px;\n  }\n  &.medium {\n    margin: 0 32px;\n  }\n  &.large {\n    margin: 0 56px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n  \n  .full-width-banner & {\n    ${BREAKPOINTS.MEDIUM} {\n      margin: 0 24px;\n    }\n    ${BREAKPOINTS.LARGE} {\n      margin: 0 48px;\n    }\n\n    &.medium{\n      margin: 0 24px;\n    }\n\n    &.large{\n      margin: 0 48px;\n    }\n  }\n`;\n\n\nconst ButtonWrapper = styled.div`\n  margin: 0 0 0 auto;\n`;\n\nconst ButtonContainer = styled.div<{ $type?: string }>`\n  display: contents;\n  ${(props) => (props.$type ? getButtonStyle(props.$type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  margin: 12px 0;\n  &:not(:first-child) {\n    margin-left: 8px;\n  }\n`;\n\ntype BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n  size?: Size.Small | Size.Medium | Size.Large;\n  type?: 'warning' | 'critical' | 'positive' | 'neutral';\n  link?: string;\n  linkText?: string;\n  linkAction?: (ev: React.MouseEvent) => void;\n  hover?: string;\n  bottom?: boolean;\n  testId?: string;\n  icon?: React.ReactNode;\n  onClose?: () => void;\n  noIcon?: boolean;\n  fullWidth?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({\n                                                        size,\n                                                        type = 'neutral',\n                                                        children,\n                                                        bottom,\n                                                        testId,\n                                                        linkText,\n                                                        link,\n                                                        onClose,\n                                                        icon,\n                                                        noIcon,\n                                                        linkAction,\n                                                        fullWidth,\n                                                        className,\n                                                        ...rest\n                                                      }) => {\n  const [width, setWidth] = React.useState<number>(window.innerWidth);\n  React.useEffect(() => {\n    function handleResize() {\n      setWidth(window.innerWidth);\n    }\n    window.addEventListener('resize', handleResize);\n  });\n\n  let bannerParams = {\n    typeColor: COLORS.primary_100,\n    accentColor: COLORS.primary_700,\n    hoverColor: COLORS.primary_20,\n    closeIconColor: COLORS.primary_500,\n    icon: Tip,\n    containerType: type,\n    focusBgColor: COLORS.primary_200,\n    linkVisited: COLORS.primary_600,\n    linkFocused: COLORS.primary_800\n  };\n  switch (type) {\n    case 'warning':\n      bannerParams.typeColor = COLORS.warning_100;\n      bannerParams.accentColor = COLORS.warning_700;\n      bannerParams.focusBgColor = COLORS.warning_200;\n      bannerParams.hoverColor = COLORS.warning_20;\n      bannerParams.icon = Help;\n      bannerParams.closeIconColor = COLORS.warning_500;\n      bannerParams.linkVisited = COLORS.warning_800;\n      bannerParams.linkFocused = COLORS.warning_800;\n      break;\n    case 'critical':\n      bannerParams.typeColor = COLORS.critical_100;\n      bannerParams.accentColor = COLORS.critical_700;\n      bannerParams.focusBgColor = COLORS.critical_200;\n      bannerParams.hoverColor = COLORS.critical_20;\n      bannerParams.icon = TechnicalWarning;\n      bannerParams.closeIconColor = COLORS.critical_500;\n      bannerParams.linkVisited = COLORS.critical_800;\n      bannerParams.linkFocused = COLORS.critical_800;\n      break;\n    case 'positive':\n      bannerParams.typeColor = COLORS.correct_100;\n      bannerParams.accentColor = COLORS.correct_700;\n      bannerParams.focusBgColor = COLORS.correct_200;\n      bannerParams.hoverColor = COLORS.correct_20;\n      bannerParams.icon = ThumbsUp;\n      bannerParams.closeIconColor = COLORS.correct_500;\n      bannerParams.linkVisited = COLORS.correct_800;\n      bannerParams.linkFocused = COLORS.correct_800;\n      break;\n  }\n  \n  const cls = `${className ?? ''} ${fullWidth ? 'full-width-banner' : ''}`;\n\n  return (\n    <BannerContainer data-testid={testId}\n                     $type={bannerParams.typeColor}\n                     linkFocused={bannerParams.linkFocused}\n                     linkVisited={bannerParams.linkVisited}\n                     link={bannerParams.accentColor}\n                     hover={bannerParams.hoverColor}\n                     bottom={bottom}\n                     className={cls}\n                     {...rest}>\n      <BannerCenter $color={bannerParams.accentColor} className={size}>\n        {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\n        <BannerContentWrapper>\n          <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\n            {children}&nbsp;\n            {link && linkText && (\n              <HyperLink\n                id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\n                onClick={(e) => {\n                  if (linkAction) {\n                    e.preventDefault();\n                    linkAction(e);\n                  }\n                }}\n                href={link}\n                variant=\"default\">\n                {linkText}\n              </HyperLink>\n            )}\n          </ComponentResponsive>\n        </BannerContentWrapper>\n        {onClose && (\n          <ButtonWrapper>\n            <ButtonContainer $type={bannerParams.containerType}>\n              <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground focusBackgroundColor={bannerParams.focusBgColor} action={() => onClose()}>\n                <Close color={bannerParams.closeIconColor} size=\"24px\" />\n              </IconButton>\n            </ButtonContainer>\n          </ButtonWrapper>\n        )}\n      </BannerCenter>\n    </BannerContainer>\n  );\n};\n\nexport default Banner;\n"],"file":"Banner.cjs"}
+{"version":3,"sources":["../../src/Banners/Banner.tsx"],"names":["BannerContainer","styled","div","props","$type","COLORS","correct_100","black","bottom","BREAKPOINTS","MEDIUM","LARGE","StyledLink","link","linkVisited","linkFocused","white","BannerCenter","ComponentTextStyle","Regular","$color","ButtonWrapper","ButtonContainer","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","linkAction","rest","React","useState","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","bannerParams","typeColor","primary_100","accentColor","primary_700","hoverColor","primary_20","closeIconColor","primary_500","Tip","containerType","focusBgColor","primary_200","primary_600","primary_800","formatTypeToLowerCase","toLowerCase","warning_100","warning_700","warning_200","warning_20","Help","warning_500","warning_800","critical_100","critical_700","critical_200","critical_20","TechnicalWarning","critical_500","critical_800","correct_700","correct_200","correct_20","ThumbsUp","correct_500","correct_800","Math","floor","random","e","preventDefault","hover"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { Close, Help, TechnicalWarning, ThumbsUp, Tip } from '../icons/systemicons/SystemIcons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\nimport { Size } from '../types';\nimport { ComponentMStyling, ComponentResponsive } from '../styles';\nimport { HyperLink } from '../HyperLink';\nimport {StyledLink} from '../HyperLink/HyperLink';\n\n/**\n * Styles for <Banner />\n */\ntype StyleBannerProps = BannerProps & { $type: string, linkVisited: string, linkFocused: string };\n\nconst BannerContainer = styled.div<StyleBannerProps>`\n  background: ${(props: StyleBannerProps) => (props.$type ? props.$type : COLORS.correct_100)};\n  min-height: 48px;\n  display: flex;\n  color: ${COLORS.black};\n  margin-top: ${(props: StyleBannerProps) => (props.bottom ? 'auto' : '0')};\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ${BREAKPOINTS.MEDIUM} {\n      margin: 0 0 0 16px;\n    }\n    ${BREAKPOINTS.LARGE} {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  ${StyledLink} {\n    &:link{\n      color: ${(props) => props.link};\n    }\n    &:visited{\n      color: ${(props) => props.linkVisited};\n    }\n    &:focus,\n    &:active{\n      background-color: ${(props) => props.linkFocused};\n      color: ${COLORS.white};\n    }\n  }\n`;\n\nconst BannerCenter = styled.div<{ $color: string }>`\n  ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color)}\n\n  display: flex;\n  width: 100%;\n  margin: 0 16px;\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 32px;\n  }\n  ${BREAKPOINTS.LARGE} {\n    margin: 0 56px;\n  }\n  &.small {\n    margin: 0 16px;\n  }\n  &.medium {\n    margin: 0 32px;\n  }\n  &.large {\n    margin: 0 56px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n`;\n\nconst ButtonWrapper = styled.div`\n  margin: 0 0 0 auto;\n`;\n\nconst ButtonContainer = styled.div<{ $type?: string }>`\n  display: contents;\n  ${(props) => (props.$type ? getButtonStyle(props.$type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  margin: 12px 0;\n  &:not(:first-child) {\n    margin-left: 8px;\n  }\n`;\n\ntype BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n  size?: Size.Small | Size.Medium | Size.Large;\n  type?: string;\n  link?: string;\n  linkText?: string;\n  linkAction?: (ev: React.MouseEvent) => void;\n  hover?: string;\n  bottom?: boolean;\n  testId?: string;\n  icon?: React.ReactNode;\n  onClose?: () => void;\n  noIcon?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({\n                                                        size,\n                                                        type,\n                                                        children,\n                                                        bottom,\n                                                        testId,\n                                                        linkText,\n                                                        link,\n                                                        onClose,\n                                                        icon,\n                                                        noIcon,\n                                                        linkAction,\n                                                        ...rest\n                                                      }) => {\n  const [width, setWidth] = React.useState<number>(window.innerWidth);\n  React.useEffect(() => {\n    function handleResize() {\n      setWidth(window.innerWidth);\n    }\n    window.addEventListener('resize', handleResize);\n  });\n\n  let bannerParams = {\n    typeColor: COLORS.primary_100,\n    accentColor: COLORS.primary_700,\n    hoverColor: COLORS.primary_20,\n    closeIconColor: COLORS.primary_500,\n    icon: Tip,\n    containerType: 'neutral',\n    focusBgColor: COLORS.primary_200,\n    linkVisited: COLORS.primary_600,\n    linkFocused: COLORS.primary_800\n  };\n  const formatTypeToLowerCase = type?.toLowerCase();\n  if (formatTypeToLowerCase == 'warning') {\n    bannerParams.typeColor = COLORS.warning_100;\n    bannerParams.accentColor = COLORS.warning_700;\n    bannerParams.focusBgColor = COLORS.warning_200;\n    bannerParams.hoverColor = COLORS.warning_20;\n    bannerParams.icon = Help;\n    bannerParams.closeIconColor = COLORS.warning_500;\n    bannerParams.containerType = formatTypeToLowerCase;\n    bannerParams.linkVisited = COLORS.warning_800;\n    bannerParams.linkFocused = COLORS.warning_800;\n  } else if (formatTypeToLowerCase == 'critical') {\n    bannerParams.typeColor = COLORS.critical_100;\n    bannerParams.accentColor = COLORS.critical_700;\n    bannerParams.focusBgColor = COLORS.critical_200;\n    bannerParams.hoverColor = COLORS.critical_20;\n    bannerParams.icon = TechnicalWarning;\n    bannerParams.closeIconColor = COLORS.critical_500;\n    bannerParams.containerType = formatTypeToLowerCase;\n    bannerParams.linkVisited = COLORS.critical_800;\n    bannerParams.linkFocused = COLORS.critical_800;\n  } else if (formatTypeToLowerCase == 'positive') {\n    bannerParams.typeColor = COLORS.correct_100;\n    bannerParams.accentColor = COLORS.correct_700;\n    bannerParams.focusBgColor = COLORS.correct_200;\n    bannerParams.hoverColor = COLORS.correct_20;\n    bannerParams.icon = ThumbsUp;\n    bannerParams.closeIconColor = COLORS.correct_500;\n    bannerParams.containerType = formatTypeToLowerCase;\n    bannerParams.linkVisited = COLORS.correct_800;\n    bannerParams.linkFocused = COLORS.correct_800;\n  }\n\n  return (\n    <BannerContainer data-testid={testId}\n                     $type={bannerParams.typeColor}\n                     linkFocused={bannerParams.linkFocused}\n                     linkVisited={bannerParams.linkVisited}\n                     link={bannerParams.accentColor}\n                     hover={bannerParams.hoverColor}\n                     bottom={bottom}\n                     {...rest}>\n      <BannerCenter $color={bannerParams.accentColor} className={size}>\n        {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\n        <BannerContentWrapper>\n          <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\n            {children}&nbsp;\n            {link && linkText && (\n              <HyperLink\n                id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\n                onClick={(e) => {\n                  if (linkAction) {\n                    e.preventDefault();\n                    linkAction(e);\n                  }\n                }}\n                href={link}\n                variant=\"default\">\n                {linkText}\n              </HyperLink>\n            )}\n          </ComponentResponsive>\n        </BannerContentWrapper>\n        {onClose && (\n          <ButtonWrapper>\n            <ButtonContainer $type={bannerParams.containerType}>\n              <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground focusBackgroundColor={bannerParams.focusBgColor} action={() => onClose()}>\n                <Close color={bannerParams.closeIconColor} size=\"24px\" />\n              </IconButton>\n            </ButtonContainer>\n          </ButtonWrapper>\n        )}\n      </BannerCenter>\n    </BannerContainer>\n  );\n};\n\nexport default Banner;\n"],"file":"Banner.cjs"}

package/dist/Banners/Banner.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Size } from '../types';
 declare type BannerProps = React.HTMLAttributes<HTMLDivElement> & {
     size?: Size.Small | Size.Medium | Size.Large;
-    type?: 'warning' | 'critical' | 'positive' | 'neutral';
+    type?: string;
     link?: string;
     linkText?: string;
     linkAction?: (ev: React.MouseEvent) => void;
@@ -12,7 +12,6 @@ declare type BannerProps = React.HTMLAttributes<HTMLDivElement> & {
     icon?: React.ReactNode;
     onClose?: () => void;
     noIcon?: boolean;
-    fullWidth?: boolean;
 };
 declare const Banner: React.FunctionComponent<BannerProps>;
 export default Banner;

package/dist/Banners/Banner.js

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
-var _excluded = ["size", "type", "children", "bottom", "testId", "linkText", "link", "onClose", "icon", "noIcon", "linkAction", "fullWidth", "className"];
+var _excluded = ["size", "type", "children", "bottom", "testId", "linkText", "link", "onClose", "icon", "noIcon", "linkAction"];
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
@@ -26,7 +26,7 @@ import { StyledLink } from '../HyperLink/HyperLink';
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var BannerContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  min-height: 48px;\n  display: flex;\n  color: ", ";\n  margin-top: ", ";\n  border-radius: 4px;\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ", " {\n      margin: 0 0 0 16px;\n    }\n    ", " {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  ", " {\n    &:link{\n      color: ", ";\n    }\n    &:visited{\n      color: ", ";\n    }\n    &:focus,\n    &:active{\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n  \n  .full-width-banner{\n    margin: 8px;\n  }\n"])), function (props) {
+var BannerContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  min-height: 48px;\n  display: flex;\n  color: ", ";\n  margin-top: ", ";\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ", " {\n      margin: 0 0 0 16px;\n    }\n    ", " {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  ", " {\n    &:link{\n      color: ", ";\n    }\n    &:visited{\n      color: ", ";\n    }\n    &:focus,\n    &:active{\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), function (props) {
   return props.$type ? props.$type : COLORS.correct_100;
 }, COLORS.black, function (props) {
   return props.bottom ? 'auto' : '0';
@@ -37,9 +37,9 @@ var BannerContainer = styled.div(_templateObject || (_templateObject = _taggedTe
 }, function (props) {
   return props.linkFocused;
 }, COLORS.white);
-var BannerCenter = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n\n  display: flex;\n  width: 100%;\n  margin: 0 16px;\n  ", " {\n    margin: 0 32px;\n  }\n  ", " {\n    margin: 0 56px;\n  }\n  &.small {\n    margin: 0 16px;\n  }\n  &.medium {\n    margin: 0 32px;\n  }\n  &.large {\n    margin: 0 56px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n  \n  .full-width-banner & {\n    ", " {\n      margin: 0 24px;\n    }\n    ", " {\n      margin: 0 48px;\n    }\n\n    &.medium{\n      margin: 0 24px;\n    }\n\n    &.large{\n      margin: 0 48px;\n    }\n  }\n"])), function (props) {
+var BannerCenter = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n\n  display: flex;\n  width: 100%;\n  margin: 0 16px;\n  ", " {\n    margin: 0 32px;\n  }\n  ", " {\n    margin: 0 56px;\n  }\n  &.small {\n    margin: 0 16px;\n  }\n  &.medium {\n    margin: 0 32px;\n  }\n  &.large {\n    margin: 0 56px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n"])), function (props) {
   return ComponentMStyling(ComponentTextStyle.Regular, props.$color);
-}, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE);
+}, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE);
 var ButtonWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin: 0 0 0 auto;\n"])));
 var ButtonContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: contents;\n  ", ";\n"])), function (props) {
   return props.$type ? getButtonStyle(props.$type) : null;
@@ -48,8 +48,7 @@ var BannerContentWrapper = styled.div(_templateObject5 || (_templateObject5 = _t
 
 var Banner = function Banner(_ref) {
   var size = _ref.size,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'neutral' : _ref$type,
+      type = _ref.type,
       children = _ref.children,
       bottom = _ref.bottom,
       testId = _ref.testId,
@@ -59,8 +58,6 @@ var Banner = function Banner(_ref) {
       icon = _ref.icon,
       noIcon = _ref.noIcon,
       linkAction = _ref.linkAction,
-      fullWidth = _ref.fullWidth,
-      className = _ref.className,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var _React$useState = React.useState(window.innerWidth),
@@ -81,48 +78,45 @@ var Banner = function Banner(_ref) {
     hoverColor: COLORS.primary_20,
     closeIconColor: COLORS.primary_500,
     icon: Tip,
-    containerType: type,
+    containerType: 'neutral',
     focusBgColor: COLORS.primary_200,
     linkVisited: COLORS.primary_600,
     linkFocused: COLORS.primary_800
   };
+  var formatTypeToLowerCase = type === null || type === void 0 ? void 0 : type.toLowerCase();
 
-  switch (type) {
-    case 'warning':
-      bannerParams.typeColor = COLORS.warning_100;
-      bannerParams.accentColor = COLORS.warning_700;
-      bannerParams.focusBgColor = COLORS.warning_200;
-      bannerParams.hoverColor = COLORS.warning_20;
-      bannerParams.icon = Help;
-      bannerParams.closeIconColor = COLORS.warning_500;
-      bannerParams.linkVisited = COLORS.warning_800;
-      bannerParams.linkFocused = COLORS.warning_800;
-      break;
-
-    case 'critical':
-      bannerParams.typeColor = COLORS.critical_100;
-      bannerParams.accentColor = COLORS.critical_700;
-      bannerParams.focusBgColor = COLORS.critical_200;
-      bannerParams.hoverColor = COLORS.critical_20;
-      bannerParams.icon = TechnicalWarning;
-      bannerParams.closeIconColor = COLORS.critical_500;
-      bannerParams.linkVisited = COLORS.critical_800;
-      bannerParams.linkFocused = COLORS.critical_800;
-      break;
-
-    case 'positive':
-      bannerParams.typeColor = COLORS.correct_100;
-      bannerParams.accentColor = COLORS.correct_700;
-      bannerParams.focusBgColor = COLORS.correct_200;
-      bannerParams.hoverColor = COLORS.correct_20;
-      bannerParams.icon = ThumbsUp;
-      bannerParams.closeIconColor = COLORS.correct_500;
-      bannerParams.linkVisited = COLORS.correct_800;
-      bannerParams.linkFocused = COLORS.correct_800;
-      break;
+  if (formatTypeToLowerCase == 'warning') {
+    bannerParams.typeColor = COLORS.warning_100;
+    bannerParams.accentColor = COLORS.warning_700;
+    bannerParams.focusBgColor = COLORS.warning_200;
+    bannerParams.hoverColor = COLORS.warning_20;
+    bannerParams.icon = Help;
+    bannerParams.closeIconColor = COLORS.warning_500;
+    bannerParams.containerType = formatTypeToLowerCase;
+    bannerParams.linkVisited = COLORS.warning_800;
+    bannerParams.linkFocused = COLORS.warning_800;
+  } else if (formatTypeToLowerCase == 'critical') {
+    bannerParams.typeColor = COLORS.critical_100;
+    bannerParams.accentColor = COLORS.critical_700;
+    bannerParams.focusBgColor = COLORS.critical_200;
+    bannerParams.hoverColor = COLORS.critical_20;
+    bannerParams.icon = TechnicalWarning;
+    bannerParams.closeIconColor = COLORS.critical_500;
+    bannerParams.containerType = formatTypeToLowerCase;
+    bannerParams.linkVisited = COLORS.critical_800;
+    bannerParams.linkFocused = COLORS.critical_800;
+  } else if (formatTypeToLowerCase == 'positive') {
+    bannerParams.typeColor = COLORS.correct_100;
+    bannerParams.accentColor = COLORS.correct_700;
+    bannerParams.focusBgColor = COLORS.correct_200;
+    bannerParams.hoverColor = COLORS.correct_20;
+    bannerParams.icon = ThumbsUp;
+    bannerParams.closeIconColor = COLORS.correct_500;
+    bannerParams.containerType = formatTypeToLowerCase;
+    bannerParams.linkVisited = COLORS.correct_800;
+    bannerParams.linkFocused = COLORS.correct_800;
   }
 
-  var cls = "".concat(className !== null && className !== void 0 ? className : '', " ").concat(fullWidth ? 'full-width-banner' : '');
   return /*#__PURE__*/_jsx(BannerContainer, _objectSpread(_objectSpread({
     "data-testid": testId,
     $type: bannerParams.typeColor,
@@ -130,8 +124,7 @@ var Banner = function Banner(_ref) {
     linkVisited: bannerParams.linkVisited,
     link: bannerParams.accentColor,
     hover: bannerParams.hoverColor,
-    bottom: bottom,
-    className: cls
+    bottom: bottom
   }, rest), {}, {
     children: /*#__PURE__*/_jsxs(BannerCenter, {
       $color: bannerParams.accentColor,
@@ -180,7 +173,7 @@ var Banner = function Banner(_ref) {
 };
 
 Banner.propTypes = {
-  type: _pt.oneOf(['warning', 'critical', 'positive', 'neutral']),
+  type: _pt.string,
   link: _pt.string,
   linkText: _pt.string,
   linkAction: _pt.func,
@@ -189,8 +182,7 @@ Banner.propTypes = {
   testId: _pt.string,
   icon: _pt.node,
   onClose: _pt.func,
-  noIcon: _pt.bool,
-  fullWidth: _pt.bool
+  noIcon: _pt.bool
 };
 export default Banner;
 //# sourceMappingURL=Banner.js.map

package/dist/Banners/Banner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Banners/Banner.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","Close","Help","TechnicalWarning","ThumbsUp","Tip","IconButton","getButtonStyle","ComponentMStyling","ComponentResponsive","HyperLink","StyledLink","BannerContainer","div","props","$type","correct_100","black","bottom","MEDIUM","LARGE","link","linkVisited","linkFocused","white","BannerCenter","Regular","$color","ButtonWrapper","ButtonContainer","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","linkAction","fullWidth","className","rest","useState","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","bannerParams","typeColor","primary_100","accentColor","primary_700","hoverColor","primary_20","closeIconColor","primary_500","containerType","focusBgColor","primary_200","primary_600","primary_800","warning_100","warning_700","warning_200","warning_20","warning_500","warning_800","critical_100","critical_700","critical_200","critical_20","critical_500","critical_800","correct_700","correct_200","correct_20","correct_500","correct_800","cls","Math","floor","random","e","preventDefault","hover"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { Close, Help, TechnicalWarning, ThumbsUp, Tip } from '../icons/systemicons/SystemIcons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\nimport { Size } from '../types';\nimport { ComponentMStyling, ComponentResponsive } from '../styles';\nimport { HyperLink } from '../HyperLink';\nimport {StyledLink} from '../HyperLink/HyperLink';\n\n/**\n * Styles for <Banner />\n */\ntype StyleBannerProps = BannerProps & { $type: string, linkVisited: string, linkFocused: string };\n\nconst BannerContainer = styled.div<StyleBannerProps>`\n  background: ${(props: StyleBannerProps) => (props.$type ? props.$type : COLORS.correct_100)};\n  min-height: 48px;\n  display: flex;\n  color: ${COLORS.black};\n  margin-top: ${(props: StyleBannerProps) => (props.bottom ? 'auto' : '0')};\n  border-radius: 4px;\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ${BREAKPOINTS.MEDIUM} {\n      margin: 0 0 0 16px;\n    }\n    ${BREAKPOINTS.LARGE} {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  ${StyledLink} {\n    &:link{\n      color: ${(props) => props.link};\n    }\n    &:visited{\n      color: ${(props) => props.linkVisited};\n    }\n    &:focus,\n    &:active{\n      background-color: ${(props) => props.linkFocused};\n      color: ${COLORS.white};\n    }\n  }\n  \n  .full-width-banner{\n    margin: 8px;\n  }\n`;\n\nconst BannerCenter = styled.div<{ $color: string }>`\n  ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color)}\n\n  display: flex;\n  width: 100%;\n  margin: 0 16px;\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 32px;\n  }\n  ${BREAKPOINTS.LARGE} {\n    margin: 0 56px;\n  }\n  &.small {\n    margin: 0 16px;\n  }\n  &.medium {\n    margin: 0 32px;\n  }\n  &.large {\n    margin: 0 56px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n  \n  .full-width-banner & {\n    ${BREAKPOINTS.MEDIUM} {\n      margin: 0 24px;\n    }\n    ${BREAKPOINTS.LARGE} {\n      margin: 0 48px;\n    }\n\n    &.medium{\n      margin: 0 24px;\n    }\n\n    &.large{\n      margin: 0 48px;\n    }\n  }\n`;\n\n\nconst ButtonWrapper = styled.div`\n  margin: 0 0 0 auto;\n`;\n\nconst ButtonContainer = styled.div<{ $type?: string }>`\n  display: contents;\n  ${(props) => (props.$type ? getButtonStyle(props.$type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  margin: 12px 0;\n  &:not(:first-child) {\n    margin-left: 8px;\n  }\n`;\n\ntype BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n  size?: Size.Small | Size.Medium | Size.Large;\n  type?: 'warning' | 'critical' | 'positive' | 'neutral';\n  link?: string;\n  linkText?: string;\n  linkAction?: (ev: React.MouseEvent) => void;\n  hover?: string;\n  bottom?: boolean;\n  testId?: string;\n  icon?: React.ReactNode;\n  onClose?: () => void;\n  noIcon?: boolean;\n  fullWidth?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({\n                                                        size,\n                                                        type = 'neutral',\n                                                        children,\n                                                        bottom,\n                                                        testId,\n                                                        linkText,\n                                                        link,\n                                                        onClose,\n                                                        icon,\n                                                        noIcon,\n                                                        linkAction,\n                                                        fullWidth,\n                                                        className,\n                                                        ...rest\n                                                      }) => {\n  const [width, setWidth] = React.useState<number>(window.innerWidth);\n  React.useEffect(() => {\n    function handleResize() {\n      setWidth(window.innerWidth);\n    }\n    window.addEventListener('resize', handleResize);\n  });\n\n  let bannerParams = {\n    typeColor: COLORS.primary_100,\n    accentColor: COLORS.primary_700,\n    hoverColor: COLORS.primary_20,\n    closeIconColor: COLORS.primary_500,\n    icon: Tip,\n    containerType: type,\n    focusBgColor: COLORS.primary_200,\n    linkVisited: COLORS.primary_600,\n    linkFocused: COLORS.primary_800\n  };\n  switch (type) {\n    case 'warning':\n      bannerParams.typeColor = COLORS.warning_100;\n      bannerParams.accentColor = COLORS.warning_700;\n      bannerParams.focusBgColor = COLORS.warning_200;\n      bannerParams.hoverColor = COLORS.warning_20;\n      bannerParams.icon = Help;\n      bannerParams.closeIconColor = COLORS.warning_500;\n      bannerParams.linkVisited = COLORS.warning_800;\n      bannerParams.linkFocused = COLORS.warning_800;\n      break;\n    case 'critical':\n      bannerParams.typeColor = COLORS.critical_100;\n      bannerParams.accentColor = COLORS.critical_700;\n      bannerParams.focusBgColor = COLORS.critical_200;\n      bannerParams.hoverColor = COLORS.critical_20;\n      bannerParams.icon = TechnicalWarning;\n      bannerParams.closeIconColor = COLORS.critical_500;\n      bannerParams.linkVisited = COLORS.critical_800;\n      bannerParams.linkFocused = COLORS.critical_800;\n      break;\n    case 'positive':\n      bannerParams.typeColor = COLORS.correct_100;\n      bannerParams.accentColor = COLORS.correct_700;\n      bannerParams.focusBgColor = COLORS.correct_200;\n      bannerParams.hoverColor = COLORS.correct_20;\n      bannerParams.icon = ThumbsUp;\n      bannerParams.closeIconColor = COLORS.correct_500;\n      bannerParams.linkVisited = COLORS.correct_800;\n      bannerParams.linkFocused = COLORS.correct_800;\n      break;\n  }\n  \n  const cls = `${className ?? ''} ${fullWidth ? 'full-width-banner' : ''}`;\n\n  return (\n    <BannerContainer data-testid={testId}\n                     $type={bannerParams.typeColor}\n                     linkFocused={bannerParams.linkFocused}\n                     linkVisited={bannerParams.linkVisited}\n                     link={bannerParams.accentColor}\n                     hover={bannerParams.hoverColor}\n                     bottom={bottom}\n                     className={cls}\n                     {...rest}>\n      <BannerCenter $color={bannerParams.accentColor} className={size}>\n        {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\n        <BannerContentWrapper>\n          <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\n            {children}&nbsp;\n            {link && linkText && (\n              <HyperLink\n                id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\n                onClick={(e) => {\n                  if (linkAction) {\n                    e.preventDefault();\n                    linkAction(e);\n                  }\n                }}\n                href={link}\n                variant=\"default\">\n                {linkText}\n              </HyperLink>\n            )}\n          </ComponentResponsive>\n        </BannerContentWrapper>\n        {onClose && (\n          <ButtonWrapper>\n            <ButtonContainer $type={bannerParams.containerType}>\n              <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground focusBackgroundColor={bannerParams.focusBgColor} action={() => onClose()}>\n                <Close color={bannerParams.closeIconColor} size=\"24px\" />\n              </IconButton>\n            </ButtonContainer>\n          </ButtonWrapper>\n        )}\n      </BannerCenter>\n    </BannerContainer>\n  );\n};\n\nexport default Banner;\n"],"file":"Banner.js"}
+{"version":3,"sources":["../../src/Banners/Banner.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","Close","Help","TechnicalWarning","ThumbsUp","Tip","IconButton","getButtonStyle","ComponentMStyling","ComponentResponsive","HyperLink","StyledLink","BannerContainer","div","props","$type","correct_100","black","bottom","MEDIUM","LARGE","link","linkVisited","linkFocused","white","BannerCenter","Regular","$color","ButtonWrapper","ButtonContainer","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","linkAction","rest","useState","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","bannerParams","typeColor","primary_100","accentColor","primary_700","hoverColor","primary_20","closeIconColor","primary_500","containerType","focusBgColor","primary_200","primary_600","primary_800","formatTypeToLowerCase","toLowerCase","warning_100","warning_700","warning_200","warning_20","warning_500","warning_800","critical_100","critical_700","critical_200","critical_20","critical_500","critical_800","correct_700","correct_200","correct_20","correct_500","correct_800","Math","floor","random","e","preventDefault","hover"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { Close, Help, TechnicalWarning, ThumbsUp, Tip } from '../icons/systemicons/SystemIcons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\nimport { Size } from '../types';\nimport { ComponentMStyling, ComponentResponsive } from '../styles';\nimport { HyperLink } from '../HyperLink';\nimport {StyledLink} from '../HyperLink/HyperLink';\n\n/**\n * Styles for <Banner />\n */\ntype StyleBannerProps = BannerProps & { $type: string, linkVisited: string, linkFocused: string };\n\nconst BannerContainer = styled.div<StyleBannerProps>`\n  background: ${(props: StyleBannerProps) => (props.$type ? props.$type : COLORS.correct_100)};\n  min-height: 48px;\n  display: flex;\n  color: ${COLORS.black};\n  margin-top: ${(props: StyleBannerProps) => (props.bottom ? 'auto' : '0')};\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ${BREAKPOINTS.MEDIUM} {\n      margin: 0 0 0 16px;\n    }\n    ${BREAKPOINTS.LARGE} {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  ${StyledLink} {\n    &:link{\n      color: ${(props) => props.link};\n    }\n    &:visited{\n      color: ${(props) => props.linkVisited};\n    }\n    &:focus,\n    &:active{\n      background-color: ${(props) => props.linkFocused};\n      color: ${COLORS.white};\n    }\n  }\n`;\n\nconst BannerCenter = styled.div<{ $color: string }>`\n  ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color)}\n\n  display: flex;\n  width: 100%;\n  margin: 0 16px;\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 32px;\n  }\n  ${BREAKPOINTS.LARGE} {\n    margin: 0 56px;\n  }\n  &.small {\n    margin: 0 16px;\n  }\n  &.medium {\n    margin: 0 32px;\n  }\n  &.large {\n    margin: 0 56px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n`;\n\nconst ButtonWrapper = styled.div`\n  margin: 0 0 0 auto;\n`;\n\nconst ButtonContainer = styled.div<{ $type?: string }>`\n  display: contents;\n  ${(props) => (props.$type ? getButtonStyle(props.$type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  margin: 12px 0;\n  &:not(:first-child) {\n    margin-left: 8px;\n  }\n`;\n\ntype BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n  size?: Size.Small | Size.Medium | Size.Large;\n  type?: string;\n  link?: string;\n  linkText?: string;\n  linkAction?: (ev: React.MouseEvent) => void;\n  hover?: string;\n  bottom?: boolean;\n  testId?: string;\n  icon?: React.ReactNode;\n  onClose?: () => void;\n  noIcon?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({\n                                                        size,\n                                                        type,\n                                                        children,\n                                                        bottom,\n                                                        testId,\n                                                        linkText,\n                                                        link,\n                                                        onClose,\n                                                        icon,\n                                                        noIcon,\n                                                        linkAction,\n                                                        ...rest\n                                                      }) => {\n  const [width, setWidth] = React.useState<number>(window.innerWidth);\n  React.useEffect(() => {\n    function handleResize() {\n      setWidth(window.innerWidth);\n    }\n    window.addEventListener('resize', handleResize);\n  });\n\n  let bannerParams = {\n    typeColor: COLORS.primary_100,\n    accentColor: COLORS.primary_700,\n    hoverColor: COLORS.primary_20,\n    closeIconColor: COLORS.primary_500,\n    icon: Tip,\n    containerType: 'neutral',\n    focusBgColor: COLORS.primary_200,\n    linkVisited: COLORS.primary_600,\n    linkFocused: COLORS.primary_800\n  };\n  const formatTypeToLowerCase = type?.toLowerCase();\n  if (formatTypeToLowerCase == 'warning') {\n    bannerParams.typeColor = COLORS.warning_100;\n    bannerParams.accentColor = COLORS.warning_700;\n    bannerParams.focusBgColor = COLORS.warning_200;\n    bannerParams.hoverColor = COLORS.warning_20;\n    bannerParams.icon = Help;\n    bannerParams.closeIconColor = COLORS.warning_500;\n    bannerParams.containerType = formatTypeToLowerCase;\n    bannerParams.linkVisited = COLORS.warning_800;\n    bannerParams.linkFocused = COLORS.warning_800;\n  } else if (formatTypeToLowerCase == 'critical') {\n    bannerParams.typeColor = COLORS.critical_100;\n    bannerParams.accentColor = COLORS.critical_700;\n    bannerParams.focusBgColor = COLORS.critical_200;\n    bannerParams.hoverColor = COLORS.critical_20;\n    bannerParams.icon = TechnicalWarning;\n    bannerParams.closeIconColor = COLORS.critical_500;\n    bannerParams.containerType = formatTypeToLowerCase;\n    bannerParams.linkVisited = COLORS.critical_800;\n    bannerParams.linkFocused = COLORS.critical_800;\n  } else if (formatTypeToLowerCase == 'positive') {\n    bannerParams.typeColor = COLORS.correct_100;\n    bannerParams.accentColor = COLORS.correct_700;\n    bannerParams.focusBgColor = COLORS.correct_200;\n    bannerParams.hoverColor = COLORS.correct_20;\n    bannerParams.icon = ThumbsUp;\n    bannerParams.closeIconColor = COLORS.correct_500;\n    bannerParams.containerType = formatTypeToLowerCase;\n    bannerParams.linkVisited = COLORS.correct_800;\n    bannerParams.linkFocused = COLORS.correct_800;\n  }\n\n  return (\n    <BannerContainer data-testid={testId}\n                     $type={bannerParams.typeColor}\n                     linkFocused={bannerParams.linkFocused}\n                     linkVisited={bannerParams.linkVisited}\n                     link={bannerParams.accentColor}\n                     hover={bannerParams.hoverColor}\n                     bottom={bottom}\n                     {...rest}>\n      <BannerCenter $color={bannerParams.accentColor} className={size}>\n        {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\n        <BannerContentWrapper>\n          <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\n            {children}&nbsp;\n            {link && linkText && (\n              <HyperLink\n                id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\n                onClick={(e) => {\n                  if (linkAction) {\n                    e.preventDefault();\n                    linkAction(e);\n                  }\n                }}\n                href={link}\n                variant=\"default\">\n                {linkText}\n              </HyperLink>\n            )}\n          </ComponentResponsive>\n        </BannerContentWrapper>\n        {onClose && (\n          <ButtonWrapper>\n            <ButtonContainer $type={bannerParams.containerType}>\n              <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground focusBackgroundColor={bannerParams.focusBgColor} action={() => onClose()}>\n                <Close color={bannerParams.closeIconColor} size=\"24px\" />\n              </IconButton>\n            </ButtonContainer>\n          </ButtonWrapper>\n        )}\n      </BannerCenter>\n    </BannerContainer>\n  );\n};\n\nexport default Banner;\n"],"file":"Banner.js"}

package/dist/ChipsInput/ChipInputField.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ChipsInput/ChipInputField.tsx"],"names":["Wrapper","styled","div","Loading","ChipInputBoundItems","ChipInputContentContainer","Size","Small","ChipInputEl","input","ComponentTextStyle","Regular","COLORS","black","Italic","neutral_600","ChipInputContainer","neutral_400","white","focusStyles","primary_700","primary_800","critical_500","neutral_100","neutral_300","ChipInputField","React","forwardRef","ref","inputId","items","disabled","placeholder","altPlaceholder","multiLine","size","Medium","validationMessage","loading","onRemoveItem","onInputValueChange","onInputKeyDown","onActivationChange","inputValue","required","onBlur","rest","containerRef","useRef","inputRef","useImperativeHandle","current","useEffect","document","activeElement","scrollIntoView","block","inline","handleInputKeyDown","e","key","value","repeat","length","handleItemRemove","event","item","index","focus","focusVisible","detail","handleInputClear","handleContainerKeyDown","querySelectorAll","currentIndex","Array","from","indexOf","target","direction","cls","map","chip","icon","variant","States","Default","label","stopPropagation","marginLeft","critical_400"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {ChipItem} from './ChipInputTypes';\nimport {Size, States} from '../types';\nimport {InputChip} from '../Chips';\nimport {ErrorMessage} from '../InputFields/styling';\nimport {TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {\n  COLORS,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  focusStyles,\n  scrollBarStyling\n} from '../styles';\nimport styled from 'styled-components';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {useFocusVisibleRef} from '../common';\nimport {IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\n\nconst Wrapper = styled.div`\n  position: relative;\n`;\n\nconst Loading = styled.div`\n  height: 20px;\n  width: 20px;\n`;\n\nexport const ChipInputBoundItems = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  flex: 1;\n  min-width: 40px;\n`;\n\nexport const ChipInputContentContainer = styled.div`\n  width: 100%;\n  background: transparent;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  column-gap: 8px;\n  margin-right: 6px;\n  padding-right: 10px;\n  padding-left: 16px;\n  flex-wrap: nowrap;\n  overflow-x: scroll;\n  min-height: 48px;\n\n  ${scrollBarStyling(Size.Small)}\n  ::-webkit-scrollbar:horizontal {\n    display: none;\n  }\n\n  .action-right:focus,\n  button:focus {\n    outline-offset: -4px !important;\n  }\n`;\n\nexport const ChipInputEl = styled.input`\n  border: none;\n  outline: none;\n\n  height: 40px;\n  min-width: 40px;\n  display: inline-flex;\n  flex: 1;\n  background: transparent;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n  color: ${COLORS.black} !important;\n\n  &::placeholder {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n`;\n\nexport const ChipInputContainer = styled.div`\n  width: 100%;\n  height: auto;\n  border-radius: 4px;\n  margin: 4px 0px;\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  cursor: text;\n  outline: none;\n  display: flex;\n  align-items: center;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  &.small {\n    padding: 0;\n    min-height: 48px;\n\n    ${ChipInputEl}::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.medium {\n    padding: 4px 0;\n    min-height: 56px;\n\n    ${ChipInputEl}::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.multiline.medium {\n    ${ChipInputContentContainer} {\n      max-height: calc(48px * 3);\n      flex-wrap: wrap;\n      overflow-y: auto;\n      overflow-x: unset;\n    }\n  }\n\n  &.focus-visible-within,\n  :focus {\n    ${focusStyles}\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  &.invalid,\n  &.invalid:hover,\n  &.invalid:focus {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\n  }\n\n  &.disabled {\n    ${ChipInputContentContainer} {\n      pointer-events: none;\n    }\n\n    cursor: not-allowed;\n    box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n    outline: none;\n    color: ${COLORS.neutral_300} !important;\n  }\n`;\n\nexport interface ChipInputFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'id' | 'required' | 'tabIndex' | 'value' | 'onChange' | 'onKeyDown' | 'placeholder' | 'onClick' | 'disabled' | 'size'> {\n  inputId: string;\n  items: ChipItem[];\n  disabled?: boolean;\n  placeholder?: string;\n  altPlaceholder?: string;\n  multiLine?: boolean;\n  size?: Size.Large | Size.Medium | Size.Small;\n  loading?: boolean;\n  required?: boolean;\n\n  validationMessage?: string;\n\n  onRemoveItem: (item: ChipItem, index: number) => void;\n  inputValue: string;\n  onInputValueChange: (value: string) => void;\n  onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n  onActivationChange?: (active: boolean) => void;\n}\n\nexport const ChipInputField = React.forwardRef<HTMLInputElement, ChipInputFieldProps>(\n  (\n    {\n      inputId,\n      items,\n      disabled = false,\n      placeholder,\n      altPlaceholder,\n      multiLine = true,\n      size = Size.Medium,\n      validationMessage,\n      loading,\n      onRemoveItem,\n      onInputValueChange,\n      onInputKeyDown,\n      onActivationChange,\n      inputValue,\n      required,\n      onBlur,\n      ...rest\n    },\n    ref,\n  ) => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const inputRef = useFocusVisibleRef([containerRef]);\n    \n    React.useImperativeHandle(ref, () => inputRef.current, [inputRef])\n\n    /**\n     * Scroll container to last item on change\n     * */\n    React.useEffect(() => {\n      if (inputRef.current && document.activeElement === inputRef.current) {\n        inputRef.current.scrollIntoView({\n          block: 'nearest',\n          inline: 'nearest',\n        });\n      }\n    }, [containerRef, inputRef, items]);\n\n    /**\n     * Remove last cheap on backspace\n     * */\n    const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'Backspace' && !inputRef.current?.value && !e.repeat && items.length > 0) {\n        onRemoveItem(items[items.length - 1], items.length - 1);\n      } else {\n        onInputKeyDown(e);\n      }\n    };\n\n    const handleItemRemove = (event: any, item: ChipItem, index: number) => {\n      onRemoveItem(item, index);\n      inputRef.current?.focus({focusVisible: event.detail !== 1} as any);\n    };\n\n    const handleInputClear = (e: any) => {\n      onInputValueChange('');\n      inputRef.current?.focus({focusVisible: e?.detail !== 1} as any);\n    };\n\n    const handleContainerKeyDown = (e: React.KeyboardEvent) => {\n      if (!containerRef.current || (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')) return;\n\n      const items = containerRef.current.querySelectorAll('[tabindex=\"0\"]') as NodeListOf<HTMLElement>;\n      const currentIndex = Array.from(items).indexOf(e.target as any);\n      const direction = e.key === 'ArrowLeft' ? -1 : 1;\n      const item = items[currentIndex + direction];\n      item?.focus({focusVisible: true} as any);\n\n      onActivationChange && onActivationChange(false);\n    };\n\n    const cls = `${multiLine ? 'multiline' : ''} ${validationMessage ? 'invalid' : ''} ${size} ${loading ? 'loading' : ''} ${disabled ? 'disabled' : ''}`;\n\n    return (\n      <Wrapper onBlur={onBlur}>\n        <ChipInputContainer\n          data-testid=\"chip-input-container\"\n          ref={containerRef}\n          onKeyDown={handleContainerKeyDown}\n          onClick={() => !disabled && inputRef.current?.focus()}\n          className={cls}>\n          <ChipInputContentContainer>\n            {items?.map((chip: ChipItem, index: number) => (\n              <InputChip\n                key={`chip_${index}`}\n                icon={chip?.icon}\n                size={size}\n                disabled={chip.disabled || disabled}\n                variant={chip.variant || States.Default}\n                text={chip.label}\n                onRemove={(e) => handleItemRemove(e, chip, index)}\n              />\n            ))}\n            <ChipInputBoundItems>\n              <ChipInputEl\n                ref={inputRef}\n                type=\"text\"\n                id={inputId}\n                required={required}\n                tabIndex={disabled ? -1 : 0}\n                value={inputValue}\n                onChange={(e) => onInputValueChange(e.target.value)}\n                onKeyDown={handleInputKeyDown}\n                placeholder={items?.length === 0 ? placeholder : altPlaceholder || ''}\n                onClick={(e) => {\n                  e.stopPropagation();\n                  onActivationChange && onActivationChange(true);\n                }}\n                {...rest}\n              />\n              {inputValue && !disabled && (\n                <IconButton\n                  id=\"clear-btn\"\n                  action={handleInputClear}\n                  ref={(ref) => {\n                    ref?.scrollIntoView({\n                      block: 'nearest',\n                      inline: 'nearest',\n                    });\n                  }}\n                  useTransparentBackground={true}\n                  shape={'circular'}\n                  style={{marginLeft: '-8px'}}\n                  variant={'secondary'}>\n                  <SystemIcons.Clear/>\n                </IconButton>\n              )}\n\n              {loading && (\n                <Loading className={size}>\n                  <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/>\n                </Loading>\n              )}\n            </ChipInputBoundItems>\n          </ChipInputContentContainer>\n        </ChipInputContainer>\n        {validationMessage && (\n          <ErrorMessage>\n            <TechnicalWarning color={COLORS.critical_400}/>\n            <span>{validationMessage}</span>\n          </ErrorMessage>\n        )}\n      </Wrapper>\n    );\n  },\n);\n"],"file":"ChipInputField.cjs"}
+{"version":3,"sources":["../../src/ChipsInput/ChipInputField.tsx"],"names":["Wrapper","styled","div","Loading","ChipInputBoundItems","ChipInputContentContainer","Size","Small","ChipInputEl","input","ComponentTextStyle","Regular","COLORS","black","Italic","neutral_600","ChipInputContainer","neutral_400","white","focusStyles","primary_700","primary_800","critical_500","neutral_100","neutral_300","ChipInputField","React","forwardRef","ref","inputId","items","disabled","placeholder","altPlaceholder","multiLine","size","Medium","validationMessage","loading","onRemoveItem","onInputValueChange","onInputKeyDown","onActivationChange","inputValue","required","onBlur","rest","containerRef","useRef","inputRef","useImperativeHandle","current","useEffect","document","activeElement","scrollIntoView","block","inline","handleInputKeyDown","e","key","value","repeat","length","handleItemRemove","event","item","index","focus","focusVisible","detail","handleInputClear","handleContainerKeyDown","querySelectorAll","currentIndex","Array","from","indexOf","target","direction","cls","map","chip","icon","variant","States","Default","label","stopPropagation","marginLeft","critical_400"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {ChipItem} from './ChipInputTypes';\nimport {Size, States} from '../types';\nimport {InputChip} from '../Chips';\nimport {ErrorMessage} from '../InputFields/styling';\nimport {TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {\n  COLORS,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  focusStyles,\n  scrollBarStyling\n} from '../styles';\nimport styled from 'styled-components';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {useFocusVisibleRef} from '../common';\nimport {IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\n\nconst Wrapper = styled.div`\n  position: relative;\n`;\n\nconst Loading = styled.div`\n  height: 20px;\n  width: 20px;\n`;\n\nexport const ChipInputBoundItems = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  flex: 1;\n  min-width: 40px;\n`;\n\nexport const ChipInputContentContainer = styled.div`\n  width: 100%;\n  background: transparent;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  column-gap: 8px;\n  margin-right: 6px;\n  padding-right: 10px;\n  padding-left: 16px;\n  flex-wrap: nowrap;\n  overflow-x: scroll;\n  min-height: 48px;\n\n  ${scrollBarStyling(Size.Small)}\n  ::-webkit-scrollbar:horizontal {\n    display: none;\n  }\n\n  .action-right:focus,\n  button:focus {\n    outline-offset: -4px !important;\n  }\n`;\n\nexport const ChipInputEl = styled.input`\n  border: none;\n  outline: none;\n\n  height: 40px;\n  min-width: 40px;\n  display: inline-flex;\n  flex: 1;\n  background: transparent;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n  color: ${COLORS.black} !important;\n\n  &::placeholder {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n`;\n\nexport const ChipInputContainer = styled.div`\n  width: 100%;\n  height: auto;\n  border-radius: 4px;\n  margin: 4px 0px;\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  cursor: text;\n  outline: none;\n  display: flex;\n  align-items: center;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  &.small {\n    padding: 0;\n    min-height: 48px;\n\n    ${ChipInputEl}::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.medium {\n    padding: 4px 0;\n    min-height: 56px;\n\n    ${ChipInputEl}::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.multiline.medium {\n    ${ChipInputContentContainer} {\n      max-height: calc(48px * 3);\n      flex-wrap: wrap;\n      overflow-y: auto;\n      overflow-x: unset;\n    }\n  }\n\n  &.focus-visible-within,\n  :focus {\n    ${focusStyles}\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  &.invalid,\n  &.invalid:hover,\n  &.invalid:focus {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\n  }\n\n  &.disabled {\n    ${ChipInputContentContainer} {\n      pointer-events: none;\n    }\n\n    cursor: not-allowed;\n    box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n    outline: none;\n    color: ${COLORS.neutral_300} !important;\n  }\n`;\n\nexport interface ChipInputFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>,  'type' | 'id' | 'required' | 'tabIndex' | 'value' | 'onChange' | 'onKeyDown' | 'placeholder' | 'onClick' | 'disabled' | 'size'> {\n  inputId: string;\n  items: ChipItem[];\n  disabled?: boolean;\n  placeholder?: string;\n  altPlaceholder?: string;\n  multiLine?: boolean;\n  size?: Size.Large | Size.Medium | Size.Small;\n  loading?: boolean;\n  required?: boolean;\n\n  validationMessage?: string;\n\n  onRemoveItem: (item: ChipItem, index: number) => void;\n  inputValue: string;\n  onInputValueChange: (value: string) => void;\n  onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n  onActivationChange?: (active: boolean) => void;\n}\n\nexport const ChipInputField = React.forwardRef<HTMLInputElement, ChipInputFieldProps>(\n  (\n    {\n      inputId,\n      items,\n      disabled = false,\n      placeholder,\n      altPlaceholder,\n      multiLine = true,\n      size = Size.Medium,\n      validationMessage,\n      loading,\n      onRemoveItem,\n      onInputValueChange,\n      onInputKeyDown,\n      onActivationChange,\n      inputValue,\n      required,\n      onBlur,\n      ...rest\n    },\n    ref,\n  ) => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const inputRef = useFocusVisibleRef([containerRef]);\n    \n    React.useImperativeHandle(ref, () => inputRef.current, [inputRef])\n\n    /**\n     * Scroll container to last item on change\n     * */\n    React.useEffect(() => {\n      if (inputRef.current && document.activeElement === inputRef.current) {\n        inputRef.current.scrollIntoView({\n          block: 'nearest',\n          inline: 'nearest',\n        });\n      }\n    }, [containerRef, inputRef, items]);\n\n    /**\n     * Remove last cheap on backspace\n     * */\n    const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'Backspace' && !inputRef.current?.value && !e.repeat && items.length > 0) {\n        onRemoveItem(items[items.length - 1], items.length - 1);\n      } else {\n        onInputKeyDown(e);\n      }\n    };\n\n    const handleItemRemove = (event: any, item: ChipItem, index: number) => {\n      onRemoveItem(item, index);\n      inputRef.current?.focus({focusVisible: event.detail !== 1} as any);\n    };\n\n    const handleInputClear = (e: any) => {\n      onInputValueChange('');\n      inputRef.current?.focus({focusVisible: e?.detail !== 1} as any);\n    };\n\n    const handleContainerKeyDown = (e: React.KeyboardEvent) => {\n      if (!containerRef.current || (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')) return;\n\n      const items = containerRef.current.querySelectorAll('[tabindex=\"0\"]') as NodeListOf<HTMLElement>;\n      const currentIndex = Array.from(items).indexOf(e.target as any);\n      const direction = e.key === 'ArrowLeft' ? -1 : 1;\n      const item = items[currentIndex + direction];\n      item?.focus({focusVisible: true} as any);\n\n      onActivationChange && onActivationChange(false);\n    };\n\n    const cls = `${multiLine ? 'multiline' : ''} ${validationMessage ? 'invalid' : ''} ${size} ${loading ? 'loading' : ''} ${disabled ? 'disabled' : ''}`;\n\n    return (\n      <Wrapper onBlur={onBlur}>\n        <ChipInputContainer\n          data-testid=\"chip-input-container\"\n          ref={containerRef}\n          onKeyDown={handleContainerKeyDown}\n          onClick={() => !disabled && inputRef.current?.focus()}\n          className={cls}>\n          <ChipInputContentContainer>\n            {items?.map((chip: ChipItem, index: number) => (\n              <InputChip\n                key={`chip_${index}`}\n                icon={chip?.icon}\n                size={size}\n                disabled={chip.disabled || disabled}\n                variant={chip.variant || States.Default}\n                text={chip.label}\n                onRemove={(e) => handleItemRemove(e, chip, index)}\n              />\n            ))}\n            <ChipInputBoundItems>\n              <ChipInputEl\n                ref={inputRef}\n                type=\"text\"\n                id={inputId}\n                required={required}\n                tabIndex={disabled ? -1 : 0}\n                value={inputValue}\n                onChange={(e) => onInputValueChange(e.target.value)}\n                onKeyDown={handleInputKeyDown}\n                placeholder={items?.length === 0 ? placeholder : altPlaceholder || ''}\n                onClick={(e) => {\n                  e.stopPropagation();\n                  onActivationChange && onActivationChange(true);\n                }}\n                {...rest}\n              />\n              {inputValue && !disabled && (\n                <IconButton\n                  id=\"clear-btn\"\n                  action={handleInputClear}\n                  ref={(ref) => {\n                    ref?.scrollIntoView({\n                      block: 'nearest',\n                      inline: 'nearest',\n                    });\n                  }}\n                  useTransparentBackground={true}\n                  shape={'circular'}\n                  style={{marginLeft: '-8px'}}\n                  variant={'secondary'}>\n                  <SystemIcons.Clear/>\n                </IconButton>\n              )}\n\n              {loading && (\n                <Loading className={size}>\n                  <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/>\n                </Loading>\n              )}\n            </ChipInputBoundItems>\n          </ChipInputContentContainer>\n        </ChipInputContainer>\n        {validationMessage && (\n          <ErrorMessage>\n            <TechnicalWarning color={COLORS.critical_400}/>\n            <span>{validationMessage}</span>\n          </ErrorMessage>\n        )}\n      </Wrapper>\n    );\n  },\n);\n"],"file":"ChipInputField.cjs"}

package/dist/ChipsInput/ChipInputField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ChipsInput/ChipInputField.tsx"],"names":["React","Size","States","InputChip","ErrorMessage","TechnicalWarning","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","focusStyles","scrollBarStyling","styled","LoadingIndicator","useFocusVisibleRef","IconButton","SystemIcons","Wrapper","div","Loading","ChipInputBoundItems","ChipInputContentContainer","Small","ChipInputEl","input","Regular","black","Italic","neutral_600","ChipInputContainer","neutral_400","white","primary_700","primary_800","critical_500","neutral_100","neutral_300","ChipInputField","forwardRef","ref","inputId","items","disabled","placeholder","altPlaceholder","multiLine","size","Medium","validationMessage","loading","onRemoveItem","onInputValueChange","onInputKeyDown","onActivationChange","inputValue","required","onBlur","rest","containerRef","useRef","inputRef","useImperativeHandle","current","useEffect","document","activeElement","scrollIntoView","block","inline","handleInputKeyDown","e","key","value","repeat","length","handleItemRemove","event","item","index","focus","focusVisible","detail","handleInputClear","handleContainerKeyDown","querySelectorAll","currentIndex","Array","from","indexOf","target","direction","cls","map","chip","icon","variant","Default","label","stopPropagation","marginLeft","critical_400"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {ChipItem} from './ChipInputTypes';\nimport {Size, States} from '../types';\nimport {InputChip} from '../Chips';\nimport {ErrorMessage} from '../InputFields/styling';\nimport {TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {\n  COLORS,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  focusStyles,\n  scrollBarStyling\n} from '../styles';\nimport styled from 'styled-components';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {useFocusVisibleRef} from '../common';\nimport {IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\n\nconst Wrapper = styled.div`\n  position: relative;\n`;\n\nconst Loading = styled.div`\n  height: 20px;\n  width: 20px;\n`;\n\nexport const ChipInputBoundItems = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  flex: 1;\n  min-width: 40px;\n`;\n\nexport const ChipInputContentContainer = styled.div`\n  width: 100%;\n  background: transparent;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  column-gap: 8px;\n  margin-right: 6px;\n  padding-right: 10px;\n  padding-left: 16px;\n  flex-wrap: nowrap;\n  overflow-x: scroll;\n  min-height: 48px;\n\n  ${scrollBarStyling(Size.Small)}\n  ::-webkit-scrollbar:horizontal {\n    display: none;\n  }\n\n  .action-right:focus,\n  button:focus {\n    outline-offset: -4px !important;\n  }\n`;\n\nexport const ChipInputEl = styled.input`\n  border: none;\n  outline: none;\n\n  height: 40px;\n  min-width: 40px;\n  display: inline-flex;\n  flex: 1;\n  background: transparent;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n  color: ${COLORS.black} !important;\n\n  &::placeholder {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n`;\n\nexport const ChipInputContainer = styled.div`\n  width: 100%;\n  height: auto;\n  border-radius: 4px;\n  margin: 4px 0px;\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  cursor: text;\n  outline: none;\n  display: flex;\n  align-items: center;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  &.small {\n    padding: 0;\n    min-height: 48px;\n\n    ${ChipInputEl}::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.medium {\n    padding: 4px 0;\n    min-height: 56px;\n\n    ${ChipInputEl}::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.multiline.medium {\n    ${ChipInputContentContainer} {\n      max-height: calc(48px * 3);\n      flex-wrap: wrap;\n      overflow-y: auto;\n      overflow-x: unset;\n    }\n  }\n\n  &.focus-visible-within,\n  :focus {\n    ${focusStyles}\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  &.invalid,\n  &.invalid:hover,\n  &.invalid:focus {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\n  }\n\n  &.disabled {\n    ${ChipInputContentContainer} {\n      pointer-events: none;\n    }\n\n    cursor: not-allowed;\n    box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n    outline: none;\n    color: ${COLORS.neutral_300} !important;\n  }\n`;\n\nexport interface ChipInputFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'id' | 'required' | 'tabIndex' | 'value' | 'onChange' | 'onKeyDown' | 'placeholder' | 'onClick' | 'disabled' | 'size'> {\n  inputId: string;\n  items: ChipItem[];\n  disabled?: boolean;\n  placeholder?: string;\n  altPlaceholder?: string;\n  multiLine?: boolean;\n  size?: Size.Large | Size.Medium | Size.Small;\n  loading?: boolean;\n  required?: boolean;\n\n  validationMessage?: string;\n\n  onRemoveItem: (item: ChipItem, index: number) => void;\n  inputValue: string;\n  onInputValueChange: (value: string) => void;\n  onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n  onActivationChange?: (active: boolean) => void;\n}\n\nexport const ChipInputField = React.forwardRef<HTMLInputElement, ChipInputFieldProps>(\n  (\n    {\n      inputId,\n      items,\n      disabled = false,\n      placeholder,\n      altPlaceholder,\n      multiLine = true,\n      size = Size.Medium,\n      validationMessage,\n      loading,\n      onRemoveItem,\n      onInputValueChange,\n      onInputKeyDown,\n      onActivationChange,\n      inputValue,\n      required,\n      onBlur,\n      ...rest\n    },\n    ref,\n  ) => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const inputRef = useFocusVisibleRef([containerRef]);\n    \n    React.useImperativeHandle(ref, () => inputRef.current, [inputRef])\n\n    /**\n     * Scroll container to last item on change\n     * */\n    React.useEffect(() => {\n      if (inputRef.current && document.activeElement === inputRef.current) {\n        inputRef.current.scrollIntoView({\n          block: 'nearest',\n          inline: 'nearest',\n        });\n      }\n    }, [containerRef, inputRef, items]);\n\n    /**\n     * Remove last cheap on backspace\n     * */\n    const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'Backspace' && !inputRef.current?.value && !e.repeat && items.length > 0) {\n        onRemoveItem(items[items.length - 1], items.length - 1);\n      } else {\n        onInputKeyDown(e);\n      }\n    };\n\n    const handleItemRemove = (event: any, item: ChipItem, index: number) => {\n      onRemoveItem(item, index);\n      inputRef.current?.focus({focusVisible: event.detail !== 1} as any);\n    };\n\n    const handleInputClear = (e: any) => {\n      onInputValueChange('');\n      inputRef.current?.focus({focusVisible: e?.detail !== 1} as any);\n    };\n\n    const handleContainerKeyDown = (e: React.KeyboardEvent) => {\n      if (!containerRef.current || (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')) return;\n\n      const items = containerRef.current.querySelectorAll('[tabindex=\"0\"]') as NodeListOf<HTMLElement>;\n      const currentIndex = Array.from(items).indexOf(e.target as any);\n      const direction = e.key === 'ArrowLeft' ? -1 : 1;\n      const item = items[currentIndex + direction];\n      item?.focus({focusVisible: true} as any);\n\n      onActivationChange && onActivationChange(false);\n    };\n\n    const cls = `${multiLine ? 'multiline' : ''} ${validationMessage ? 'invalid' : ''} ${size} ${loading ? 'loading' : ''} ${disabled ? 'disabled' : ''}`;\n\n    return (\n      <Wrapper onBlur={onBlur}>\n        <ChipInputContainer\n          data-testid=\"chip-input-container\"\n          ref={containerRef}\n          onKeyDown={handleContainerKeyDown}\n          onClick={() => !disabled && inputRef.current?.focus()}\n          className={cls}>\n          <ChipInputContentContainer>\n            {items?.map((chip: ChipItem, index: number) => (\n              <InputChip\n                key={`chip_${index}`}\n                icon={chip?.icon}\n                size={size}\n                disabled={chip.disabled || disabled}\n                variant={chip.variant || States.Default}\n                text={chip.label}\n                onRemove={(e) => handleItemRemove(e, chip, index)}\n              />\n            ))}\n            <ChipInputBoundItems>\n              <ChipInputEl\n                ref={inputRef}\n                type=\"text\"\n                id={inputId}\n                required={required}\n                tabIndex={disabled ? -1 : 0}\n                value={inputValue}\n                onChange={(e) => onInputValueChange(e.target.value)}\n                onKeyDown={handleInputKeyDown}\n                placeholder={items?.length === 0 ? placeholder : altPlaceholder || ''}\n                onClick={(e) => {\n                  e.stopPropagation();\n                  onActivationChange && onActivationChange(true);\n                }}\n                {...rest}\n              />\n              {inputValue && !disabled && (\n                <IconButton\n                  id=\"clear-btn\"\n                  action={handleInputClear}\n                  ref={(ref) => {\n                    ref?.scrollIntoView({\n                      block: 'nearest',\n                      inline: 'nearest',\n                    });\n                  }}\n                  useTransparentBackground={true}\n                  shape={'circular'}\n                  style={{marginLeft: '-8px'}}\n                  variant={'secondary'}>\n                  <SystemIcons.Clear/>\n                </IconButton>\n              )}\n\n              {loading && (\n                <Loading className={size}>\n                  <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/>\n                </Loading>\n              )}\n            </ChipInputBoundItems>\n          </ChipInputContentContainer>\n        </ChipInputContainer>\n        {validationMessage && (\n          <ErrorMessage>\n            <TechnicalWarning color={COLORS.critical_400}/>\n            <span>{validationMessage}</span>\n          </ErrorMessage>\n        )}\n      </Wrapper>\n    );\n  },\n);\n"],"file":"ChipInputField.js"}
+{"version":3,"sources":["../../src/ChipsInput/ChipInputField.tsx"],"names":["React","Size","States","InputChip","ErrorMessage","TechnicalWarning","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","focusStyles","scrollBarStyling","styled","LoadingIndicator","useFocusVisibleRef","IconButton","SystemIcons","Wrapper","div","Loading","ChipInputBoundItems","ChipInputContentContainer","Small","ChipInputEl","input","Regular","black","Italic","neutral_600","ChipInputContainer","neutral_400","white","primary_700","primary_800","critical_500","neutral_100","neutral_300","ChipInputField","forwardRef","ref","inputId","items","disabled","placeholder","altPlaceholder","multiLine","size","Medium","validationMessage","loading","onRemoveItem","onInputValueChange","onInputKeyDown","onActivationChange","inputValue","required","onBlur","rest","containerRef","useRef","inputRef","useImperativeHandle","current","useEffect","document","activeElement","scrollIntoView","block","inline","handleInputKeyDown","e","key","value","repeat","length","handleItemRemove","event","item","index","focus","focusVisible","detail","handleInputClear","handleContainerKeyDown","querySelectorAll","currentIndex","Array","from","indexOf","target","direction","cls","map","chip","icon","variant","Default","label","stopPropagation","marginLeft","critical_400"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {ChipItem} from './ChipInputTypes';\nimport {Size, States} from '../types';\nimport {InputChip} from '../Chips';\nimport {ErrorMessage} from '../InputFields/styling';\nimport {TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {\n  COLORS,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  focusStyles,\n  scrollBarStyling\n} from '../styles';\nimport styled from 'styled-components';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {useFocusVisibleRef} from '../common';\nimport {IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\n\nconst Wrapper = styled.div`\n  position: relative;\n`;\n\nconst Loading = styled.div`\n  height: 20px;\n  width: 20px;\n`;\n\nexport const ChipInputBoundItems = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  flex: 1;\n  min-width: 40px;\n`;\n\nexport const ChipInputContentContainer = styled.div`\n  width: 100%;\n  background: transparent;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  column-gap: 8px;\n  margin-right: 6px;\n  padding-right: 10px;\n  padding-left: 16px;\n  flex-wrap: nowrap;\n  overflow-x: scroll;\n  min-height: 48px;\n\n  ${scrollBarStyling(Size.Small)}\n  ::-webkit-scrollbar:horizontal {\n    display: none;\n  }\n\n  .action-right:focus,\n  button:focus {\n    outline-offset: -4px !important;\n  }\n`;\n\nexport const ChipInputEl = styled.input`\n  border: none;\n  outline: none;\n\n  height: 40px;\n  min-width: 40px;\n  display: inline-flex;\n  flex: 1;\n  background: transparent;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n  color: ${COLORS.black} !important;\n\n  &::placeholder {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n`;\n\nexport const ChipInputContainer = styled.div`\n  width: 100%;\n  height: auto;\n  border-radius: 4px;\n  margin: 4px 0px;\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  cursor: text;\n  outline: none;\n  display: flex;\n  align-items: center;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  &.small {\n    padding: 0;\n    min-height: 48px;\n\n    ${ChipInputEl}::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.medium {\n    padding: 4px 0;\n    min-height: 56px;\n\n    ${ChipInputEl}::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.multiline.medium {\n    ${ChipInputContentContainer} {\n      max-height: calc(48px * 3);\n      flex-wrap: wrap;\n      overflow-y: auto;\n      overflow-x: unset;\n    }\n  }\n\n  &.focus-visible-within,\n  :focus {\n    ${focusStyles}\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  &.invalid,\n  &.invalid:hover,\n  &.invalid:focus {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\n  }\n\n  &.disabled {\n    ${ChipInputContentContainer} {\n      pointer-events: none;\n    }\n\n    cursor: not-allowed;\n    box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n    outline: none;\n    color: ${COLORS.neutral_300} !important;\n  }\n`;\n\nexport interface ChipInputFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>,  'type' | 'id' | 'required' | 'tabIndex' | 'value' | 'onChange' | 'onKeyDown' | 'placeholder' | 'onClick' | 'disabled' | 'size'> {\n  inputId: string;\n  items: ChipItem[];\n  disabled?: boolean;\n  placeholder?: string;\n  altPlaceholder?: string;\n  multiLine?: boolean;\n  size?: Size.Large | Size.Medium | Size.Small;\n  loading?: boolean;\n  required?: boolean;\n\n  validationMessage?: string;\n\n  onRemoveItem: (item: ChipItem, index: number) => void;\n  inputValue: string;\n  onInputValueChange: (value: string) => void;\n  onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n  onActivationChange?: (active: boolean) => void;\n}\n\nexport const ChipInputField = React.forwardRef<HTMLInputElement, ChipInputFieldProps>(\n  (\n    {\n      inputId,\n      items,\n      disabled = false,\n      placeholder,\n      altPlaceholder,\n      multiLine = true,\n      size = Size.Medium,\n      validationMessage,\n      loading,\n      onRemoveItem,\n      onInputValueChange,\n      onInputKeyDown,\n      onActivationChange,\n      inputValue,\n      required,\n      onBlur,\n      ...rest\n    },\n    ref,\n  ) => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const inputRef = useFocusVisibleRef([containerRef]);\n    \n    React.useImperativeHandle(ref, () => inputRef.current, [inputRef])\n\n    /**\n     * Scroll container to last item on change\n     * */\n    React.useEffect(() => {\n      if (inputRef.current && document.activeElement === inputRef.current) {\n        inputRef.current.scrollIntoView({\n          block: 'nearest',\n          inline: 'nearest',\n        });\n      }\n    }, [containerRef, inputRef, items]);\n\n    /**\n     * Remove last cheap on backspace\n     * */\n    const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'Backspace' && !inputRef.current?.value && !e.repeat && items.length > 0) {\n        onRemoveItem(items[items.length - 1], items.length - 1);\n      } else {\n        onInputKeyDown(e);\n      }\n    };\n\n    const handleItemRemove = (event: any, item: ChipItem, index: number) => {\n      onRemoveItem(item, index);\n      inputRef.current?.focus({focusVisible: event.detail !== 1} as any);\n    };\n\n    const handleInputClear = (e: any) => {\n      onInputValueChange('');\n      inputRef.current?.focus({focusVisible: e?.detail !== 1} as any);\n    };\n\n    const handleContainerKeyDown = (e: React.KeyboardEvent) => {\n      if (!containerRef.current || (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')) return;\n\n      const items = containerRef.current.querySelectorAll('[tabindex=\"0\"]') as NodeListOf<HTMLElement>;\n      const currentIndex = Array.from(items).indexOf(e.target as any);\n      const direction = e.key === 'ArrowLeft' ? -1 : 1;\n      const item = items[currentIndex + direction];\n      item?.focus({focusVisible: true} as any);\n\n      onActivationChange && onActivationChange(false);\n    };\n\n    const cls = `${multiLine ? 'multiline' : ''} ${validationMessage ? 'invalid' : ''} ${size} ${loading ? 'loading' : ''} ${disabled ? 'disabled' : ''}`;\n\n    return (\n      <Wrapper onBlur={onBlur}>\n        <ChipInputContainer\n          data-testid=\"chip-input-container\"\n          ref={containerRef}\n          onKeyDown={handleContainerKeyDown}\n          onClick={() => !disabled && inputRef.current?.focus()}\n          className={cls}>\n          <ChipInputContentContainer>\n            {items?.map((chip: ChipItem, index: number) => (\n              <InputChip\n                key={`chip_${index}`}\n                icon={chip?.icon}\n                size={size}\n                disabled={chip.disabled || disabled}\n                variant={chip.variant || States.Default}\n                text={chip.label}\n                onRemove={(e) => handleItemRemove(e, chip, index)}\n              />\n            ))}\n            <ChipInputBoundItems>\n              <ChipInputEl\n                ref={inputRef}\n                type=\"text\"\n                id={inputId}\n                required={required}\n                tabIndex={disabled ? -1 : 0}\n                value={inputValue}\n                onChange={(e) => onInputValueChange(e.target.value)}\n                onKeyDown={handleInputKeyDown}\n                placeholder={items?.length === 0 ? placeholder : altPlaceholder || ''}\n                onClick={(e) => {\n                  e.stopPropagation();\n                  onActivationChange && onActivationChange(true);\n                }}\n                {...rest}\n              />\n              {inputValue && !disabled && (\n                <IconButton\n                  id=\"clear-btn\"\n                  action={handleInputClear}\n                  ref={(ref) => {\n                    ref?.scrollIntoView({\n                      block: 'nearest',\n                      inline: 'nearest',\n                    });\n                  }}\n                  useTransparentBackground={true}\n                  shape={'circular'}\n                  style={{marginLeft: '-8px'}}\n                  variant={'secondary'}>\n                  <SystemIcons.Clear/>\n                </IconButton>\n              )}\n\n              {loading && (\n                <Loading className={size}>\n                  <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/>\n                </Loading>\n              )}\n            </ChipInputBoundItems>\n          </ChipInputContentContainer>\n        </ChipInputContainer>\n        {validationMessage && (\n          <ErrorMessage>\n            <TechnicalWarning color={COLORS.critical_400}/>\n            <span>{validationMessage}</span>\n          </ErrorMessage>\n        )}\n      </Wrapper>\n    );\n  },\n);\n"],"file":"ChipInputField.js"}

package/dist/InputFields/PasswordField.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/PasswordField.tsx"],"names":["StyledPassSwitch","styled","div","Z_INDEXES","badge","PasswordRow","PasswordField","React","forwardRef","ref","id","disabled","onChange","invalid","value","validationMessage","autoComplete","placeholder","required","readOnly","size","margin","className","name","rest","useState","passwordHidden","setPasswordHidden","inputRef","useImperativeHandle","current","handleKeyDown","e","keyCode","cls","display","target","COLORS","critical_400"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AAmBA,IAAMA,gBAAgB,GAAGC,0BAAOC,GAAV,4IACTC,kBAAUC,KADD,CAAtB;;AAMA,IAAMC,WAAW,GAAGJ,0BAAOC,GAAV,gLAAjB;;AAOA,IAAMI,aAAa,gBAAGC,KAAK,CAACC,UAAN,CAAiB,gBAgBwBC,GAhBxB,EAgBgC;AAAA,MAf7BC,EAe6B,QAf7BA,EAe6B;AAAA,MAd7BC,QAc6B,QAd7BA,QAc6B;AAAA,MAb7BC,SAa6B,QAb7BA,QAa6B;AAAA,MAZ7BC,OAY6B,QAZ7BA,OAY6B;AAAA,MAX7BC,KAW6B,QAX7BA,KAW6B;AAAA,MAV7BC,iBAU6B,QAV7BA,iBAU6B;AAAA,MAT7BC,YAS6B,QAT7BA,YAS6B;AAAA,MAR7BC,WAQ6B,QAR7BA,WAQ6B;AAAA,MAP7BC,QAO6B,QAP7BA,QAO6B;AAAA,MAN7BC,QAM6B,QAN7BA,QAM6B;AAAA,MAL7BC,IAK6B,QAL7BA,IAK6B;AAAA,MAJ7BC,MAI6B,QAJ7BA,MAI6B;AAAA,MAH7BC,SAG6B,QAH7BA,SAG6B;AAAA,uBAF7BC,IAE6B;AAAA,MAF7BA,IAE6B,0BAFtB,UAEsB;AAAA,MAD1BC,IAC0B;;AACrE,wBAA4CjB,KAAK,CAACkB,QAAN,CAAwB,IAAxB,CAA5C;AAAA;AAAA,MAAOC,cAAP;AAAA,MAAuBC,iBAAvB;;AACA,MAAMC,QAAQ,GAAG,iCAAjB;AAEArB,EAAAA,KAAK,CAACsB,mBAAN,CAA0BpB,GAA1B,EAA+B;AAAA,WAAMmB,QAAQ,CAACE,OAAf;AAAA,GAA/B,EAAuD,CAACF,QAAD,CAAvD;;AAEA,MAAMG,aAAa,GAAG,SAAhBA,aAAgB,CAACC,CAAD,EAAY;AAChC,QAAIA,CAAC,CAACC,OAAF,KAAc,EAAlB,EAAsB;AACpBN,MAAAA,iBAAiB,CAAC,CAACD,cAAF,CAAjB;AACD;AACF,GAJD;;AAMA,MAAMQ,GAAG,aAAMrB,OAAO,GAAG,SAAH,GAAe,EAA5B,eAAmCO,IAAI,IAAI,EAA3C,cAAiDE,SAAjD,CAAT;AAEA,sBACE;AAAA,4BACE,qBAAC,qBAAD;AAAc,MAAA,QAAQ,EAAEX,QAAxB;AAAkC,MAAA,QAAQ,EAAEQ,QAA5C;AAAsD,MAAA,MAAM,EAAEE,MAA9D;AAAA,6BACE;AAAK,QAAA,KAAK,EAAE;AAAEc,UAAAA,OAAO,EAAE,OAAX;AAAoBd,UAAAA,MAAM,EAAE;AAA5B,SAAZ;AAAA,+BACE,sBAAC,WAAD;AAAA,kCACE,qBAAC,0BAAD;AACE,YAAA,EAAE,EAAEX,EADN;AAEE,YAAA,GAAG,EAAEkB,QAFP;AAGE,YAAA,IAAI,EAAEF,cAAc,GAAG,UAAH,GAAgB,MAHtC;AAIE,YAAA,IAAI,EAAEH,IAJR;AAKE,YAAA,KAAK,EAAET,KALT;AAME,YAAA,SAAS,EAAEoB,GANb;AAOE,YAAA,QAAQ,EAAEvB,QAAQ,IAAIQ,QAAZ,GAAuB,CAAC,CAAxB,GAA4B,CAPxC;AAQE,YAAA,YAAY,EAAEH,YARhB;AASE,YAAA,kBAAkB,EAAE,CAAC,CAACD,iBATxB;AAUE,YAAA,WAAW,EAAEE,WAVf;AAWE,YAAA,QAAQ,EAAEN,QAXZ;AAYE,YAAA,QAAQ,EAAEO,QAZZ;AAaE,YAAA,QAAQ,EAAEC,QAbZ;AAcE,YAAA,QAAQ,EAAE,kBAACa,CAAD;AAAA;;AAAA,qBAAYpB,SAAQ,IAAIA,SAAQ,CAAC,CAAAoB,CAAC,SAAD,IAAAA,CAAC,WAAD,yBAAAA,CAAC,CAAEI,MAAH,wDAAWtB,KAAX,KAAoB,EAArB,CAAhC;AAAA;AAdZ,aAeMU,IAfN,EADF,eAkBE,qBAAC,gBAAD;AAAkB,YAAA,SAAS,EAAEJ,IAAI,GAAGA,IAAH,GAAU,EAA3C;AAAA,sBACG,CAACT,QAAD,IAAa,CAACQ,QAAd,GACCO,cAAc,gBACZ,qBAAC,kBAAD;AACE,cAAA,EAAE,YAAKhB,EAAL,aADJ;AAEE,cAAA,SAAS,EAAE,SAFb;AAGE,cAAA,OAAO,EAAE,WAHX;AAIE,cAAA,KAAK,EAAE,UAJT;AAKE,cAAA,UAAU,EAAEqB,aALd;AAME,cAAA,MAAM,EAAE;AAAA,uBAAMJ,iBAAiB,CAAC,CAACD,cAAF,CAAvB;AAAA,eANV;AAAA,qCAOE,qBAAC,kBAAD,CAAa,UAAb;AAPF,cADY,gBAWZ,qBAAC,kBAAD;AACE,cAAA,EAAE,YAAKhB,EAAL,gBADJ;AAEE,cAAA,SAAS,EAAE,SAFb;AAGE,cAAA,OAAO,EAAE,WAHX;AAIE,cAAA,KAAK,EAAE,UAJT;AAKE,cAAA,UAAU,EAAEqB,aALd;AAME,cAAA,MAAM,EAAE;AAAA,uBAAMJ,iBAAiB,CAAC,CAACD,cAAF,CAAvB;AAAA,eANV;AAAA,qCAOE,qBAAC,kBAAD,CAAa,SAAb;AAPF,cAZH,GAsBG;AAvBN,YAlBF;AAAA;AADF;AADF,MADF,EAiDGX,iBAAiB,iBAChB,sBAAC,qBAAD;AAAc,MAAA,SAAS,EAAEK,IAAI,IAAI,EAAjC;AAAA,8BACE,qBAAC,6BAAD;AAAkB,QAAA,KAAK,EAAEiB,eAAOC;AAAhC,QADF,eAEE;AAAA,kBAAOvB;AAAP,QAFF;AAAA,MAlDJ;AAAA,IADF;AA0DD,CAxFqB,CAAtB;;AA3BEL,EAAAA,E;AACAC,EAAAA,Q;AACAC,EAAAA,Q;AACAC,EAAAA,O;AACAC,EAAAA,K;AACAC,EAAAA,iB;AACAC,EAAAA,Y;AACAC,EAAAA,W;AACAC,EAAAA,Q;AACAC,EAAAA,Q;AAEAE,EAAAA,M;;eA0Gaf,a","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS } from '../styles';\nimport { Size } from '../types';\nimport { InputFieldStyling, InputWrapper, ErrorMessage } from './styling';\nimport { Z_INDEXES } from '../styles';\nimport { useFocusVisibleRef } from '../common';\nimport { IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\ntype PasswordFieldProps =\n  Omit<React.InputHTMLAttributes<HTMLInputElement>, 'id' | 'onChange' | 'readOnly' | 'required' | 'placeholder' | 'autoComplete' | 'value' | 'disabled' | 'tabIndex' | 'type'>\n  & {\n  id: string;\n  disabled?: boolean;\n  onChange?: (text: string) => void;\n  invalid?: boolean;\n  value?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  readOnly?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst StyledPassSwitch = styled.div`\n  z-index: ${Z_INDEXES.badge};\n  right: 0;\n  position: absolute;\n`;\n\nconst PasswordRow = styled.div`\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst PasswordField = React.forwardRef(({\n                                          id,\n                                          disabled,\n                                          onChange,\n                                          invalid,\n                                          value,\n                                          validationMessage,\n                                          autoComplete,\n                                          placeholder,\n                                          required,\n                                          readOnly,\n                                          size,\n                                          margin,\n                                          className,\n                                          name = 'password',\n                                          ...rest\n                                        }: PasswordFieldProps, ref) => {\n  const [passwordHidden, setPasswordHidden] = React.useState<Boolean>(true);\n  const inputRef = useFocusVisibleRef();\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const handleKeyDown = (e: any) => {\n    if (e.keyCode === 13) {\n      setPasswordHidden(!passwordHidden);\n    }\n  };\n\n  const cls = `${invalid ? 'invalid' : ''}  ${size || ''} ${className}`;\n\n  return (\n    <>\n      <InputWrapper disabled={disabled} readOnly={readOnly} margin={margin}>\n        <div style={{ display: 'block', margin: '4px 0px'}}>\n          <PasswordRow>\n            <InputFieldStyling\n              id={id}\n              ref={inputRef}\n              type={passwordHidden ? 'password' : 'text'}\n              name={name}\n              value={value}\n              className={cls}\n              tabIndex={disabled || readOnly ? -1 : 0}\n              autoComplete={autoComplete}\n              activeErrorMessage={!!validationMessage}\n              placeholder={placeholder}\n              disabled={disabled}\n              required={required}\n              readOnly={readOnly}\n              onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n              {...rest}\n            />\n            <StyledPassSwitch className={size ? size : ''}>\n              {!disabled && !readOnly ? (\n                passwordHidden ? (\n                  <IconButton\n                    id={`${id}_Visible`}\n                    iconColor={'#666666'}\n                    variant={'secondary'}\n                    shape={'circular'}\n                    onKeyPress={handleKeyDown}\n                    action={() => setPasswordHidden(!passwordHidden)}>\n                    <SystemIcons.VisibleOff />\n                  </IconButton>\n                ) : (\n                  <IconButton\n                    id={`${id}_NotVisible`}\n                    iconColor={'#666666'}\n                    variant={'secondary'}\n                    shape={'circular'}\n                    onKeyPress={handleKeyDown}\n                    action={() => setPasswordHidden(!passwordHidden)}>\n                    <SystemIcons.VisibleOn />\n                  </IconButton>\n                )\n              ) : null}\n            </StyledPassSwitch>\n          </PasswordRow>\n        </div>\n      </InputWrapper>\n      {validationMessage && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.critical_400} />\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n});\n\nexport default PasswordField;\n"],"file":"PasswordField.cjs"}
+{"version":3,"sources":["../../src/InputFields/PasswordField.tsx"],"names":["StyledPassSwitch","styled","div","Z_INDEXES","badge","PasswordRow","PasswordField","React","forwardRef","ref","id","disabled","onChange","invalid","value","validationMessage","autoComplete","placeholder","required","readOnly","size","margin","className","name","rest","useState","passwordHidden","setPasswordHidden","inputRef","useImperativeHandle","current","handleKeyDown","e","keyCode","cls","display","target","COLORS","critical_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS } from '../styles';\nimport { Size } from '../types';\nimport { InputFieldStyling, InputWrapper, ErrorMessage } from './styling';\nimport { Z_INDEXES } from '../styles';\nimport { useFocusVisibleRef } from '../common';\nimport { IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\ntype PasswordFieldProps =\n  Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'id' | 'onChange' | 'readOnly' | 'required' | 'placeholder' | 'autoComplete' | 'value' | 'disabled' | 'tabIndex' | 'type'>\n  & {\n  id: string;\n  disabled?: boolean;\n  onChange?: (text: string) => void;\n  invalid?: boolean;\n  value?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  readOnly?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst StyledPassSwitch = styled.div`\n  z-index: ${Z_INDEXES.badge};\n  right: 0;\n  position: absolute;\n`;\n\nconst PasswordRow = styled.div`\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst PasswordField = React.forwardRef(({\n                                          id,\n                                          disabled,\n                                          onChange,\n                                          invalid,\n                                          value,\n                                          validationMessage,\n                                          autoComplete,\n                                          placeholder,\n                                          required,\n                                          readOnly,\n                                          size,\n                                          margin,\n                                          className,\n                                          name = 'password',\n                                          ...rest\n                                        }: PasswordFieldProps, ref) => {\n  const [passwordHidden, setPasswordHidden] = React.useState<Boolean>(true);\n  const inputRef = useFocusVisibleRef();\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const handleKeyDown = (e: any) => {\n    if (e.keyCode === 13) {\n      setPasswordHidden(!passwordHidden);\n    }\n  };\n\n  const cls = `${invalid ? 'invalid' : ''}  ${size || ''} ${className}`;\n\n  return (\n    <>\n      <InputWrapper disabled={disabled} readOnly={readOnly} margin={margin}>\n        <div style={{ display: 'block', margin: '4px 0px'}}>\n          <PasswordRow>\n            <InputFieldStyling\n              id={id}\n              ref={inputRef}\n              type={passwordHidden ? 'password' : 'text'}\n              name={name}\n              value={value}\n              className={cls}\n              tabIndex={disabled || readOnly ? -1 : 0}\n              autoComplete={autoComplete}\n              activeErrorMessage={!!validationMessage}\n              placeholder={placeholder}\n              disabled={disabled}\n              required={required}\n              readOnly={readOnly}\n              onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n              {...rest}\n            />\n            <StyledPassSwitch className={size ? size : ''}>\n              {!disabled && !readOnly ? (\n                passwordHidden ? (\n                  <IconButton\n                    id={`${id}_Visible`}\n                    iconColor={'#666666'}\n                    variant={'secondary'}\n                    shape={'circular'}\n                    onKeyPress={handleKeyDown}\n                    action={() => setPasswordHidden(!passwordHidden)}>\n                    <SystemIcons.VisibleOff />\n                  </IconButton>\n                ) : (\n                  <IconButton\n                    id={`${id}_NotVisible`}\n                    iconColor={'#666666'}\n                    variant={'secondary'}\n                    shape={'circular'}\n                    onKeyPress={handleKeyDown}\n                    action={() => setPasswordHidden(!passwordHidden)}>\n                    <SystemIcons.VisibleOn />\n                  </IconButton>\n                )\n              ) : null}\n            </StyledPassSwitch>\n          </PasswordRow>\n        </div>\n      </InputWrapper>\n      {validationMessage && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.critical_400} />\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n});\n\nexport default PasswordField;\n"],"file":"PasswordField.cjs"}

package/dist/InputFields/PasswordField.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Size } from '../types';
-declare const PasswordField: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "id" | "placeholder" | "tabIndex" | "onChange" | "disabled" | "value" | "autoComplete" | "readOnly" | "required"> & {
+declare const PasswordField: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "id" | "placeholder" | "tabIndex" | "onChange" | "size" | "disabled" | "value" | "autoComplete" | "readOnly" | "required"> & {
     id: string;
     disabled?: boolean | undefined;
     onChange?: ((text: string) => void) | undefined;

package/dist/InputFields/PasswordField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/PasswordField.tsx"],"names":["React","styled","COLORS","InputFieldStyling","InputWrapper","ErrorMessage","Z_INDEXES","useFocusVisibleRef","IconButton","SystemIcons","TechnicalWarning","StyledPassSwitch","div","badge","PasswordRow","PasswordField","forwardRef","ref","id","disabled","onChange","invalid","value","validationMessage","autoComplete","placeholder","required","readOnly","size","margin","className","name","rest","useState","passwordHidden","setPasswordHidden","inputRef","useImperativeHandle","current","handleKeyDown","e","keyCode","cls","display","target","critical_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS } from '../styles';\nimport { Size } from '../types';\nimport { InputFieldStyling, InputWrapper, ErrorMessage } from './styling';\nimport { Z_INDEXES } from '../styles';\nimport { useFocusVisibleRef } from '../common';\nimport { IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\ntype PasswordFieldProps =\n  Omit<React.InputHTMLAttributes<HTMLInputElement>, 'id' | 'onChange' | 'readOnly' | 'required' | 'placeholder' | 'autoComplete' | 'value' | 'disabled' | 'tabIndex' | 'type'>\n  & {\n  id: string;\n  disabled?: boolean;\n  onChange?: (text: string) => void;\n  invalid?: boolean;\n  value?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  readOnly?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst StyledPassSwitch = styled.div`\n  z-index: ${Z_INDEXES.badge};\n  right: 0;\n  position: absolute;\n`;\n\nconst PasswordRow = styled.div`\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst PasswordField = React.forwardRef(({\n                                          id,\n                                          disabled,\n                                          onChange,\n                                          invalid,\n                                          value,\n                                          validationMessage,\n                                          autoComplete,\n                                          placeholder,\n                                          required,\n                                          readOnly,\n                                          size,\n                                          margin,\n                                          className,\n                                          name = 'password',\n                                          ...rest\n                                        }: PasswordFieldProps, ref) => {\n  const [passwordHidden, setPasswordHidden] = React.useState<Boolean>(true);\n  const inputRef = useFocusVisibleRef();\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const handleKeyDown = (e: any) => {\n    if (e.keyCode === 13) {\n      setPasswordHidden(!passwordHidden);\n    }\n  };\n\n  const cls = `${invalid ? 'invalid' : ''}  ${size || ''} ${className}`;\n\n  return (\n    <>\n      <InputWrapper disabled={disabled} readOnly={readOnly} margin={margin}>\n        <div style={{ display: 'block', margin: '4px 0px'}}>\n          <PasswordRow>\n            <InputFieldStyling\n              id={id}\n              ref={inputRef}\n              type={passwordHidden ? 'password' : 'text'}\n              name={name}\n              value={value}\n              className={cls}\n              tabIndex={disabled || readOnly ? -1 : 0}\n              autoComplete={autoComplete}\n              activeErrorMessage={!!validationMessage}\n              placeholder={placeholder}\n              disabled={disabled}\n              required={required}\n              readOnly={readOnly}\n              onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n              {...rest}\n            />\n            <StyledPassSwitch className={size ? size : ''}>\n              {!disabled && !readOnly ? (\n                passwordHidden ? (\n                  <IconButton\n                    id={`${id}_Visible`}\n                    iconColor={'#666666'}\n                    variant={'secondary'}\n                    shape={'circular'}\n                    onKeyPress={handleKeyDown}\n                    action={() => setPasswordHidden(!passwordHidden)}>\n                    <SystemIcons.VisibleOff />\n                  </IconButton>\n                ) : (\n                  <IconButton\n                    id={`${id}_NotVisible`}\n                    iconColor={'#666666'}\n                    variant={'secondary'}\n                    shape={'circular'}\n                    onKeyPress={handleKeyDown}\n                    action={() => setPasswordHidden(!passwordHidden)}>\n                    <SystemIcons.VisibleOn />\n                  </IconButton>\n                )\n              ) : null}\n            </StyledPassSwitch>\n          </PasswordRow>\n        </div>\n      </InputWrapper>\n      {validationMessage && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.critical_400} />\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n});\n\nexport default PasswordField;\n"],"file":"PasswordField.js"}
+{"version":3,"sources":["../../src/InputFields/PasswordField.tsx"],"names":["React","styled","COLORS","InputFieldStyling","InputWrapper","ErrorMessage","Z_INDEXES","useFocusVisibleRef","IconButton","SystemIcons","TechnicalWarning","StyledPassSwitch","div","badge","PasswordRow","PasswordField","forwardRef","ref","id","disabled","onChange","invalid","value","validationMessage","autoComplete","placeholder","required","readOnly","size","margin","className","name","rest","useState","passwordHidden","setPasswordHidden","inputRef","useImperativeHandle","current","handleKeyDown","e","keyCode","cls","display","target","critical_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS } from '../styles';\nimport { Size } from '../types';\nimport { InputFieldStyling, InputWrapper, ErrorMessage } from './styling';\nimport { Z_INDEXES } from '../styles';\nimport { useFocusVisibleRef } from '../common';\nimport { IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\ntype PasswordFieldProps =\n  Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'id' | 'onChange' | 'readOnly' | 'required' | 'placeholder' | 'autoComplete' | 'value' | 'disabled' | 'tabIndex' | 'type'>\n  & {\n  id: string;\n  disabled?: boolean;\n  onChange?: (text: string) => void;\n  invalid?: boolean;\n  value?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  readOnly?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst StyledPassSwitch = styled.div`\n  z-index: ${Z_INDEXES.badge};\n  right: 0;\n  position: absolute;\n`;\n\nconst PasswordRow = styled.div`\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst PasswordField = React.forwardRef(({\n                                          id,\n                                          disabled,\n                                          onChange,\n                                          invalid,\n                                          value,\n                                          validationMessage,\n                                          autoComplete,\n                                          placeholder,\n                                          required,\n                                          readOnly,\n                                          size,\n                                          margin,\n                                          className,\n                                          name = 'password',\n                                          ...rest\n                                        }: PasswordFieldProps, ref) => {\n  const [passwordHidden, setPasswordHidden] = React.useState<Boolean>(true);\n  const inputRef = useFocusVisibleRef();\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const handleKeyDown = (e: any) => {\n    if (e.keyCode === 13) {\n      setPasswordHidden(!passwordHidden);\n    }\n  };\n\n  const cls = `${invalid ? 'invalid' : ''}  ${size || ''} ${className}`;\n\n  return (\n    <>\n      <InputWrapper disabled={disabled} readOnly={readOnly} margin={margin}>\n        <div style={{ display: 'block', margin: '4px 0px'}}>\n          <PasswordRow>\n            <InputFieldStyling\n              id={id}\n              ref={inputRef}\n              type={passwordHidden ? 'password' : 'text'}\n              name={name}\n              value={value}\n              className={cls}\n              tabIndex={disabled || readOnly ? -1 : 0}\n              autoComplete={autoComplete}\n              activeErrorMessage={!!validationMessage}\n              placeholder={placeholder}\n              disabled={disabled}\n              required={required}\n              readOnly={readOnly}\n              onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n              {...rest}\n            />\n            <StyledPassSwitch className={size ? size : ''}>\n              {!disabled && !readOnly ? (\n                passwordHidden ? (\n                  <IconButton\n                    id={`${id}_Visible`}\n                    iconColor={'#666666'}\n                    variant={'secondary'}\n                    shape={'circular'}\n                    onKeyPress={handleKeyDown}\n                    action={() => setPasswordHidden(!passwordHidden)}>\n                    <SystemIcons.VisibleOff />\n                  </IconButton>\n                ) : (\n                  <IconButton\n                    id={`${id}_NotVisible`}\n                    iconColor={'#666666'}\n                    variant={'secondary'}\n                    shape={'circular'}\n                    onKeyPress={handleKeyDown}\n                    action={() => setPasswordHidden(!passwordHidden)}>\n                    <SystemIcons.VisibleOn />\n                  </IconButton>\n                )\n              ) : null}\n            </StyledPassSwitch>\n          </PasswordRow>\n        </div>\n      </InputWrapper>\n      {validationMessage && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.critical_400} />\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n});\n\nexport default PasswordField;\n"],"file":"PasswordField.js"}

package/dist/InputFields/TextField.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/TextField.tsx"],"names":["TextField","React","forwardRef","ref","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","note","className","rest","elementRef","useImperativeHandle","current","cls","States","Invalid","e","preventDefault","undefined","target","Valid","COLORS","correct_400","critical_400","icon","message"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {CheckMark, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {COLORS} from '../styles';\nimport {Size, States} from '../types';\nimport {ErrorMessage, InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\nimport {useFocusVisibleRef} from '../common';\nimport {TextFieldNote} from './types';\n\ntype TextFieldProps =\n  Omit<React.InputHTMLAttributes<HTMLInputElement>, '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                                      ...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          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 ? <CheckMark color={COLORS.correct_400}/> :\n              <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"],"file":"TextField.cjs"}
+{"version":3,"sources":["../../src/InputFields/TextField.tsx"],"names":["TextField","React","forwardRef","ref","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","note","className","rest","elementRef","useImperativeHandle","current","cls","States","Invalid","e","preventDefault","undefined","target","Valid","COLORS","correct_400","critical_400","icon","message"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {CheckMark, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {COLORS} from '../styles';\nimport {Size, States} from '../types';\nimport {ErrorMessage, InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\nimport {useFocusVisibleRef} from '../common';\nimport {TextFieldNote} from './types';\n\ntype TextFieldProps =\n  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                                      ...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          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 ? <CheckMark color={COLORS.correct_400}/> :\n              <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"],"file":"TextField.cjs"}

package/dist/InputFields/TextField.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Size, States } from '../types';
 import { TextFieldNote } from './types';
-declare const TextField: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "pattern" | "type" | "id" | "onChange" | "disabled" | "value" | "autoComplete" | "maxLength" | "readOnly"> & {
+declare const TextField: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "pattern" | "type" | "id" | "onChange" | "size" | "disabled" | "value" | "autoComplete" | "maxLength" | "readOnly"> & {
     id?: string | undefined;
     disabled?: boolean | undefined;
     readOnly?: boolean | undefined;

package/dist/InputFields/TextField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/TextField.tsx"],"names":["React","CheckMark","TechnicalWarning","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","rest","elementRef","useImperativeHandle","current","cls","Invalid","e","preventDefault","undefined","target","Valid","correct_400","critical_400","icon","message"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {CheckMark, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {COLORS} from '../styles';\nimport {Size, States} from '../types';\nimport {ErrorMessage, InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\nimport {useFocusVisibleRef} from '../common';\nimport {TextFieldNote} from './types';\n\ntype TextFieldProps =\n  Omit<React.InputHTMLAttributes<HTMLInputElement>, '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                                      ...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          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 ? <CheckMark color={COLORS.correct_400}/> :\n              <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"],"file":"TextField.js"}
+{"version":3,"sources":["../../src/InputFields/TextField.tsx"],"names":["React","CheckMark","TechnicalWarning","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","rest","elementRef","useImperativeHandle","current","cls","Invalid","e","preventDefault","undefined","target","Valid","correct_400","critical_400","icon","message"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {CheckMark, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {COLORS} from '../styles';\nimport {Size, States} from '../types';\nimport {ErrorMessage, InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\nimport {useFocusVisibleRef} from '../common';\nimport {TextFieldNote} from './types';\n\ntype TextFieldProps =\n  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                                      ...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          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 ? <CheckMark color={COLORS.correct_400}/> :\n              <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"],"file":"TextField.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laerdal/life-react-components",
-  "version": "1.10.3-dev.7",
+  "version": "1.10.3-dev.8",
   "private": false,
   "author": "Thomas Kalve <thomas.kalve@laerdal.com>",
   "contributors": [