@laerdal/life-react-components 1.10.3-dev.9.full → 1.11.0-dev.4

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"];
+var _excluded = ["size", "type", "children", "bottom", "testId", "linkText", "link", "onClose", "icon", "noIcon", "linkAction", "fullWidth", "className"];
 
 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\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) {
+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) {
   return props.$type ? props.$type : _styles.COLORS.correct_100;
 }, _styles.COLORS.black, function (props) {
   return props.bottom ? 'auto' : '0';
@@ -61,9 +61,7 @@ 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"])), function (props) {
-  return (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.$color);
-}, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE);
+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    margin: 0 16px;\n\n    ", " {\n      margin: 0 24px;\n    }\n    ", " {\n      margin: 0 48px;\n    }\n\n    &.small {\n      margin: 0 16px;\n    }\n\n    &.medium{\n      margin: 0 24px;\n    }\n\n    &.large{\n      margin: 0 48px;\n    }\n  }\n"])), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), _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,7 +73,8 @@ var BannerContentWrapper = _styledComponents.default.div(_templateObject5 || (_t
 
 var Banner = function Banner(_ref) {
   var size = _ref.size,
-      type = _ref.type,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'neutral' : _ref$type,
       children = _ref.children,
       bottom = _ref.bottom,
       testId = _ref.testId,
@@ -85,6 +84,8 @@ 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),
@@ -105,45 +106,48 @@ var Banner = function Banner(_ref) {
     hoverColor: _styles.COLORS.primary_20,
     closeIconColor: _styles.COLORS.primary_500,
     icon: _SystemIcons.Tip,
-    containerType: 'neutral',
+    containerType: type,
     focusBgColor: _styles.COLORS.primary_200,
     linkVisited: _styles.COLORS.primary_600,
     linkFocused: _styles.COLORS.primary_800
   };
-  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;
+
+  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 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,
@@ -151,10 +155,13 @@ var Banner = function Banner(_ref) {
     linkVisited: bannerParams.linkVisited,
     link: bannerParams.accentColor,
     hover: bannerParams.hoverColor,
-    bottom: bottom
+    bottom: bottom,
+    className: cls
   }, rest), {}, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(BannerCenter, {
-      $color: bannerParams.accentColor,
+      style: {
+        color: bannerParams.accentColor
+      },
       className: size,
       children: [icon ? icon : noIcon ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(bannerParams.icon, {
         color: bannerParams.accentColor,
@@ -200,7 +207,7 @@ var Banner = function Banner(_ref) {
 };
 
 Banner.propTypes = {
-  type: _propTypes.default.string,
+  type: _propTypes.default.oneOf(['warning', 'critical', 'positive', 'neutral']),
   link: _propTypes.default.string,
   linkText: _propTypes.default.string,
   linkAction: _propTypes.default.func,
@@ -209,7 +216,8 @@ Banner.propTypes = {
   testId: _propTypes.default.string,
   icon: _propTypes.default.node,
   onClose: _propTypes.default.func,
-  noIcon: _propTypes.default.bool
+  noIcon: _propTypes.default.bool,
+  fullWidth: _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","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"}
+{"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","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","color","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`\n  ${ComponentMStyling(ComponentTextStyle.Regular, null)}\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    margin: 0 16px;\n\n    ${BREAKPOINTS.MEDIUM} {\n      margin: 0 24px;\n    }\n    ${BREAKPOINTS.LARGE} {\n      margin: 0 48px;\n    }\n\n    &.small {\n      margin: 0 16px;\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 style={{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?: string;
+    type?: 'warning' | 'critical' | 'positive' | 'neutral';
     link?: string;
     linkText?: string;
     linkAction?: (ev: React.MouseEvent) => void;
@@ -12,6 +12,7 @@ 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"];
+var _excluded = ["size", "type", "children", "bottom", "testId", "linkText", "link", "onClose", "icon", "noIcon", "linkAction", "fullWidth", "className"];
 
 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\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) {
+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) {
   return props.$type ? props.$type : COLORS.correct_100;
 }, COLORS.black, function (props) {
   return props.bottom ? 'auto' : '0';
@@ -37,9 +37,7 @@ 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"])), function (props) {
-  return ComponentMStyling(ComponentTextStyle.Regular, props.$color);
-}, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE);
+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    margin: 0 16px;\n\n    ", " {\n      margin: 0 24px;\n    }\n    ", " {\n      margin: 0 48px;\n    }\n\n    &.small {\n      margin: 0 16px;\n    }\n\n    &.medium{\n      margin: 0 24px;\n    }\n\n    &.large{\n      margin: 0 48px;\n    }\n  }\n"])), ComponentMStyling(ComponentTextStyle.Regular, null), 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,7 +46,8 @@ var BannerContentWrapper = styled.div(_templateObject5 || (_templateObject5 = _t
 
 var Banner = function Banner(_ref) {
   var size = _ref.size,
-      type = _ref.type,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'neutral' : _ref$type,
       children = _ref.children,
       bottom = _ref.bottom,
       testId = _ref.testId,
@@ -58,6 +57,8 @@ 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),
@@ -78,45 +79,48 @@ var Banner = function Banner(_ref) {
     hoverColor: COLORS.primary_20,
     closeIconColor: COLORS.primary_500,
     icon: Tip,
-    containerType: 'neutral',
+    containerType: type,
     focusBgColor: COLORS.primary_200,
     linkVisited: COLORS.primary_600,
     linkFocused: COLORS.primary_800
   };
-  var formatTypeToLowerCase = type === null || type === void 0 ? void 0 : type.toLowerCase();
 
-  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;
+  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;
   }
 
+  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,
@@ -124,10 +128,13 @@ var Banner = function Banner(_ref) {
     linkVisited: bannerParams.linkVisited,
     link: bannerParams.accentColor,
     hover: bannerParams.hoverColor,
-    bottom: bottom
+    bottom: bottom,
+    className: cls
   }, rest), {}, {
     children: /*#__PURE__*/_jsxs(BannerCenter, {
-      $color: bannerParams.accentColor,
+      style: {
+        color: bannerParams.accentColor
+      },
       className: size,
       children: [icon ? icon : noIcon ? null : /*#__PURE__*/_jsx(bannerParams.icon, {
         color: bannerParams.accentColor,
@@ -173,7 +180,7 @@ var Banner = function Banner(_ref) {
 };
 
 Banner.propTypes = {
-  type: _pt.string,
+  type: _pt.oneOf(['warning', 'critical', 'positive', 'neutral']),
   link: _pt.string,
   linkText: _pt.string,
   linkAction: _pt.func,
@@ -182,7 +189,8 @@ Banner.propTypes = {
   testId: _pt.string,
   icon: _pt.node,
   onClose: _pt.func,
-  noIcon: _pt.bool
+  noIcon: _pt.bool,
+  fullWidth: _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","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"}
+{"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","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","color","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`\n  ${ComponentMStyling(ComponentTextStyle.Regular, null)}\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    margin: 0 16px;\n\n    ${BREAKPOINTS.MEDIUM} {\n      margin: 0 24px;\n    }\n    ${BREAKPOINTS.LARGE} {\n      margin: 0 48px;\n    }\n\n    &.small {\n      margin: 0 16px;\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 style={{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/Button/DualFunctionButton.cjs

@@ -129,6 +129,7 @@ var DualFunctionButton = function DualFunctionButton(_ref) {
         flatEdge: "right",
         children: children
       })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropdownContent.default, {
+        containerRef: dropdownContainerRef,
         customizationProps: dropdownCustomizationProps,
         filter: "",
         ref: dropdownContentRef,

package/dist/Button/DualFunctionButton.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Button/DualFunctionButton.tsx"],"names":["ButtonsContainer","styled","div","props","size","Size","Large","Medium","DualFunctionButton","children","variant","type","width","testId","disabled","id","dropdownMenuValues","setDropdownMenuValues","dropdownCustomizationProps","loading","icon","onClick","renderProps","React","useState","isOpen","setIsOpen","focused","setFocused","keyboardNavigated","setKeyboardNavigated","dropdownContainerRef","useRef","selectedValues","setSelectedValues","dropdownContentRef","dropdownButtonRef","useEffect","itemsType","e","key","stopPropagation"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport Button, { ButtonProps } from './Button';\nimport { ArrowDropDown, ArrowDropUp } from '../icons/systemicons/SystemIcons';\nimport { Dropdown } from '../Dropdown/CommonStyling';\nimport { Size } from '../types';\nimport DropdownContent, { DropdownCustomizationProps } from '../Dropdown/DropdownContent';\nimport styled from 'styled-components';\nimport { useClickOutsideRef, useFocusOutsideRef } from '../common';\n\nconst ButtonsContainer = styled.div<{ size?: Size }>`\n  display: flex;\n  align-items: center;\n\n  button:first-child {\n    margin-right: 2px;\n  }\n\n  div.button-content {\n    gap: 0px;\n    padding: ${(props) => (props.size == Size.Large ? '4px 18px' : props.size == Size.Medium ? '4px 14px' : '4px 10px')};\n  }\n`;\n\nexport interface ButtonOption {\n  label: string;\n}\n\nexport interface DualButtonProps extends ButtonProps {\n  dropdownCustomizationProps: DropdownCustomizationProps;\n  dropdownMenuValues?: string[];\n  setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\n}\n\nconst DualFunctionButton: React.FunctionComponent<DualButtonProps> = ({\n  children = 'Primary Button',\n  variant = 'primary',\n  type = 'button',\n  size = Size.Medium,\n  width = 'auto',\n  testId,\n  disabled,\n  id,\n  dropdownMenuValues,\n  setDropdownMenuValues,\n  dropdownCustomizationProps,\n  ...props\n}) => {\n  // Let's filter out properties that we don't need to render.\n  const { loading, icon, onClick, ...renderProps } = props;\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n  const dropdownContainerRef = React.useRef<HTMLDivElement>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n\n  const dropdownContentRef = React.useRef<HTMLDivElement>(null);\n  const dropdownButtonRef = useClickOutsideRef(\n    () => setIsOpen(false),\n    [dropdownContainerRef],\n    useFocusOutsideRef(() => setIsOpen(false), [dropdownContentRef]),\n  );\n\n  React.useEffect(() => {\n    !isOpen && setKeyboardNavigated(false);\n  }, [isOpen]);\n\n  return (\n    <ButtonsContainer ref={dropdownContainerRef} size={size}>\n      <Dropdown isButton={true} readOnly={false} disabled={false} margin=\"\">\n        <Button {...renderProps} onClick={onClick} disabled={disabled} type={type} loading={loading} icon={icon} size={size} width={width} variant={variant} flatEdge=\"right\">\n          {children}\n        </Button>\n        <DropdownContent\n          customizationProps={dropdownCustomizationProps}\n          filter=\"\"\n          ref={dropdownContentRef}\n          selectedValues={dropdownCustomizationProps.itemsType == 'normal' ? [] : dropdownMenuValues ?? selectedValues}\n          setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\n          isButton={true}\n          setIsOpen={setIsOpen}\n          focused={focused}\n          setFocused={setFocused}\n          size={size}\n          outline={keyboardNavigated}\n          isOpen={isOpen}\n          id={id ?? 'dropdownId'}\n          messageOnNoResults=\"\"\n          alignLeft={true}\n        />\n      </Dropdown>\n      <Button\n        variant={variant}\n        {...renderProps}\n        onKeyPress={(e: any) => {\n          if (isOpen) return;\n\n          if (e.key === 'Enter' || e.key === ' ') {\n            setFocused(0);\n            setKeyboardNavigated(true);\n          }\n        }}\n        testId={'options_toggleBtn'}\n        ref={dropdownButtonRef}\n        disabled={disabled}\n        type={type}\n        size={size}\n        minWidth={'unset'}\n        onClick={(e) => {\n          e.stopPropagation();\n          setIsOpen(!isOpen);\n        }}\n        icon={isOpen ? <ArrowDropUp size=\"16px\" /> : <ArrowDropDown size=\"16px\" />}\n        flatEdge=\"left\"\n      />\n    </ButtonsContainer>\n  );\n};\n\nexport default DualFunctionButton;\n"],"file":"DualFunctionButton.cjs"}
+{"version":3,"sources":["../../src/Button/DualFunctionButton.tsx"],"names":["ButtonsContainer","styled","div","props","size","Size","Large","Medium","DualFunctionButton","children","variant","type","width","testId","disabled","id","dropdownMenuValues","setDropdownMenuValues","dropdownCustomizationProps","loading","icon","onClick","renderProps","React","useState","isOpen","setIsOpen","focused","setFocused","keyboardNavigated","setKeyboardNavigated","dropdownContainerRef","useRef","selectedValues","setSelectedValues","dropdownContentRef","dropdownButtonRef","useEffect","itemsType","e","key","stopPropagation"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport Button, { ButtonProps } from './Button';\nimport { ArrowDropDown, ArrowDropUp } from '../icons/systemicons/SystemIcons';\nimport { Dropdown } from '../Dropdown/CommonStyling';\nimport { Size } from '../types';\nimport DropdownContent, { DropdownCustomizationProps } from '../Dropdown/DropdownContent';\nimport styled from 'styled-components';\nimport { useClickOutsideRef, useFocusOutsideRef } from '../common';\n\nconst ButtonsContainer = styled.div<{ size?: Size }>`\n  display: flex;\n  align-items: center;\n\n  button:first-child {\n    margin-right: 2px;\n  }\n\n  div.button-content {\n    gap: 0px;\n    padding: ${(props) => (props.size == Size.Large ? '4px 18px' : props.size == Size.Medium ? '4px 14px' : '4px 10px')};\n  }\n`;\n\nexport interface ButtonOption {\n  label: string;\n}\n\nexport interface DualButtonProps extends ButtonProps {\n  dropdownCustomizationProps: DropdownCustomizationProps;\n  dropdownMenuValues?: string[];\n  setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\n}\n\nconst DualFunctionButton: React.FunctionComponent<DualButtonProps> = ({\n  children = 'Primary Button',\n  variant = 'primary',\n  type = 'button',\n  size = Size.Medium,\n  width = 'auto',\n  testId,\n  disabled,\n  id,\n  dropdownMenuValues,\n  setDropdownMenuValues,\n  dropdownCustomizationProps,\n  ...props\n}) => {\n  // Let's filter out properties that we don't need to render.\n  const { loading, icon, onClick, ...renderProps } = props;\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n  const dropdownContainerRef = React.useRef<HTMLDivElement>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n\n  const dropdownContentRef = React.useRef<HTMLDivElement>(null);\n  const dropdownButtonRef = useClickOutsideRef(\n    () => setIsOpen(false),\n    [dropdownContainerRef],\n    useFocusOutsideRef(() => setIsOpen(false), [dropdownContentRef]),\n  );\n\n  React.useEffect(() => {\n    !isOpen && setKeyboardNavigated(false);\n  }, [isOpen]);\n\n  return (\n    <ButtonsContainer ref={dropdownContainerRef} size={size}>\n      <Dropdown isButton={true} readOnly={false} disabled={false} margin=\"\">\n        <Button {...renderProps} onClick={onClick} disabled={disabled} type={type} loading={loading} icon={icon} size={size} width={width} variant={variant} flatEdge=\"right\">\n          {children}\n        </Button>\n        <DropdownContent\n          containerRef={dropdownContainerRef}\n          customizationProps={dropdownCustomizationProps}\n          filter=\"\"\n          ref={dropdownContentRef}\n          selectedValues={dropdownCustomizationProps.itemsType == 'normal' ? [] : dropdownMenuValues ?? selectedValues}\n          setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\n          isButton={true}\n          setIsOpen={setIsOpen}\n          focused={focused}\n          setFocused={setFocused}\n          size={size}\n          outline={keyboardNavigated}\n          isOpen={isOpen}\n          id={id ?? 'dropdownId'}\n          messageOnNoResults=\"\"\n          alignLeft={true}\n        />\n      </Dropdown>\n      <Button\n        variant={variant}\n        {...renderProps}\n        onKeyPress={(e: any) => {\n          if (isOpen) return;\n\n          if (e.key === 'Enter' || e.key === ' ') {\n            setFocused(0);\n            setKeyboardNavigated(true);\n          }\n        }}\n        testId={'options_toggleBtn'}\n        ref={dropdownButtonRef}\n        disabled={disabled}\n        type={type}\n        size={size}\n        minWidth={'unset'}\n        onClick={(e) => {\n          e.stopPropagation();\n          setIsOpen(!isOpen);\n        }}\n        icon={isOpen ? <ArrowDropUp size=\"16px\" /> : <ArrowDropDown size=\"16px\" />}\n        flatEdge=\"left\"\n      />\n    </ButtonsContainer>\n  );\n};\n\nexport default DualFunctionButton;\n"],"file":"DualFunctionButton.cjs"}

package/dist/Button/DualFunctionButton.js

@@ -102,6 +102,7 @@ var DualFunctionButton = function DualFunctionButton(_ref) {
         flatEdge: "right",
         children: children
       })), /*#__PURE__*/_jsx(DropdownContent, {
+        containerRef: dropdownContainerRef,
         customizationProps: dropdownCustomizationProps,
         filter: "",
         ref: dropdownContentRef,