@laerdal/life-react-components 5.1.0 → 6.0.0-dev.1

package/dist/Button/Button.js

@@ -1,10 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
 const _excluded = ["children", "variant", "type", "size", "colorTheme", "invertFocus", "width", "testId", "disabled", "flatEdge", "icon"],
   _excluded2 = ["loading"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import * as React from 'react';
@@ -18,21 +16,241 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 const getBorderRadius = (flatEdge, radius) => {
   switch (flatEdge) {
     case 'left':
-      return "0px ".concat(radius, "px ").concat(radius, "px 0px");
+      return `0px ${radius}px ${radius}px 0px`;
     case 'right':
-      return "".concat(radius, "px 0px 0px ").concat(radius, "px");
+      return `${radius}px 0px 0px ${radius}px`;
     case 'none':
     default:
-      return "".concat(radius, "px");
+      return `${radius}px`;
   }
 };
-export const ButtonContentContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-width: 64px;\n"])));
-const ButtonBaseStyled = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
-export const ButtonPrimaryStyled = styled(ButtonBaseStyled)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0;\n  margin: 0;\n  position: relative;\n  box-sizing: border-box;\n  min-height: ", ";\n  &.loading-state {\n    cursor: wait;\n  }\n  ", " {\n    ", ";\n\n    background-color: ", ";\n    border-radius: ", ";\n\n    width: ", ";\n    position: relative;\n\n    min-height: ", ";\n\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: ", ";\n\n    span.icon:not(.loading) {\n      pointer-events: none;\n    }\n\n    span.loading {\n      opacity: 0;\n    }\n\n    .icon {\n      margin: ", ";\n      width: ", ";\n      height: ", ";\n      svg {\n        width: ", " !important;\n        height: ", " !important;\n      }\n    }\n\n    .label {\n      margin: 0 4px;\n    }\n\n    div {\n      position: absolute;\n      width: 100%;\n      svg {\n        height: ", ";\n        width: ", ";\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n  &:hover > ", ",\n  &.hover-state > ", " {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:active > ", ",\n  &.active-state > ", " {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:focus,\n  &.focus-state {\n    ", "\n  }\n  &:disabled,\n  &.disabled-state {\n    cursor: not-allowed;\n  }\n  &:disabled > ", ",\n  &.disabled-state > ", " {\n    pointer-events: none;\n    background-color: ", ";\n    color: ", ";\n  }\n"])), props => props.$size === Size.Large ? '56px' : '48px', ButtonContentContainer, props => props.$size === Size.Large ? ComponentLStyling(ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? COLORS.getColor('primary_800', props.theme) : COLORS.getColor('white', props.theme)) : props.$size === Size.Small ? ComponentSStyling(ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? COLORS.getColor('primary_800', props.theme) : COLORS.getColor('white', props.theme)) : ComponentMStyling(ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? COLORS.getColor('primary_800', props.theme) : COLORS.getColor('white', props.theme)), props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary', props.theme), props => getBorderRadius(props.$flatEdge, 8), props => props.$width, props => props.$size === Size.Large ? '56px' : props.$size === Size.Small ? '32px' : '40px', props => props.$size === Size.Large ? '14px 16px' : props.$size === Size.Small ? '6px 8px' : '8px 12px', props => props.$size === Size.Medium ? props.$iconOnly ? '-2px -8px' : '' : props.$size === Size.Small ? props.$iconOnly ? '-2px -6px' : '' : '', props => props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px', props => props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px', props => props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px', props => props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px', props => props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px', props => props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px', props => props.$colorTheme === 'dark' ? COLORS.getColor('primary', props.theme) : COLORS.getColor('white', props.theme), ButtonContentContainer, ButtonContentContainer, props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? COLORS.getColor('primary_100', props.theme) : COLORS.getColor('primary_700', props.theme), props => (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? COLORS.getColor('primary_600', props.theme) : COLORS.getColor('white', props.theme), ButtonContentContainer, ButtonContentContainer, props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? COLORS.getColor('primary_200', props.theme) : COLORS.getColor('primary_800', props.theme), props => (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? COLORS.getColor('primary_800', props.theme) : COLORS.getColor('white', props.theme), props => props.$invertFocus || props.$invertFocus === undefined && props.$colorTheme === 'dark' ? invertedFocusStyles : focusStyles, ButtonContentContainer, ButtonContentContainer, props => props.$colorTheme === 'dark' ? COLORS.getColor('primary_700', props.theme) : COLORS.getColor('neutral_100', props.theme), props => props.$colorTheme === 'dark' ? COLORS.getColor('primary_800', props.theme) : COLORS.getColor('neutral_300', props.theme));
-export const ButtonSecondaryStyled = styled(ButtonPrimaryStyled)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", " {\n    color: ", ";\n    background-color: transparent;\n    div svg path {\n      fill: ", ";\n    }\n    box-shadow: inset 0 0 0 2px ", ";\n    \n    padding: ", ";\n  }\n\n  &:hover > ", ",\n  &.hover-state > ", " {\n    color: ", ";\n    box-shadow: inset 0 0 0 2px ", ";\n    \n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n  &:active > ", ",\n  &.active-state > ", " {\n    color: ", ";\n    box-shadow: inset 0 0 0 2px ", ";\n    \n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n\n  &:disabled > ", ",\n  &.disabled-state > ", " {\n    background-color: transparent;\n    color: ", ";\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n"])), ButtonContentContainer, props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary', props.theme), props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : COLORS.getColor('primary', props.theme), props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary', props.theme), props => props.$size === Size.Large ? '12px 16px' : props.$size === Size.Small ? '4px 8px' : '6px 12px', ButtonContentContainer, ButtonContentContainer, props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? COLORS.getColor('primary_200', props.theme) : COLORS.getColor('primary_700', props.theme), props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? COLORS.getColor('primary_200', props.theme) : COLORS.getColor('primary_700', props.theme), props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : COLORS.getColor('primary_700', props.theme), ButtonContentContainer, ButtonContentContainer, props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? COLORS.getColor('primary_300', props.theme) : COLORS.getColor('primary_800', props.theme), props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? COLORS.getColor('primary_300', props.theme) : COLORS.getColor('primary_800', props.theme), props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_800', props.theme), ButtonContentContainer, ButtonContentContainer, props => (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? COLORS.getColor('primary_700', props.theme) : COLORS.getColor('neutral_300', props.theme), props => (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? COLORS.getColor('primary_700', props.theme) : COLORS.getColor('neutral_100', props.theme));
-export const ButtonTertiaryStyled = styled(ButtonPrimaryStyled)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n", " {\n    color: ", ";\n    background-color: transparent;\n\n    div svg path {\n      fill: ", ";\n    }\n\n    padding: ", ";\n  }\n\n  &:hover > ", ",\n  &.hover-state > ", " {\n    background-color: ", ";\n    color: ", ";\n\n    div {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n  &:active > ", ",\n  &.active-state > ", " {\n    background-color: ", ";\n    color: ", ";\n\n    div {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n\n  &:disabled > ", ",\n  &.disabled-state > ", " {\n    background-color: transparent !important;\n    color: ", ";\n    border-color: transparent !important;\n  }\n"])), ButtonContentContainer, props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_500', props.theme), props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_500', props.theme), props => props.$size === Size.Large ? '12px 16px' : props.$size === Size.Small ? '4px 8px' : '6px 12px', ButtonContentContainer, ButtonContentContainer, props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_20', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('primary_700', props.theme) : COLORS.getColor('primary_20', props.theme), props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_700', props.theme), props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_700', props.theme), ButtonContentContainer, ButtonContentContainer, props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_100', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('primary_600', props.theme) : COLORS.getColor('primary_100', props.theme), props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_800', props.theme), props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_800', props.theme), ButtonContentContainer, ButtonContentContainer, props => COLORS.getColor('primary_700', props.theme));
-export const ButtonPositiveStyled = styled(ButtonPrimaryStyled)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", " {\n    color: white;\n    background-color: ", ";\n  }\n  &:hover > ", ",\n  &.hover-state > ", " {\n    background-color: ", ";\n  }\n  &:active > ", ",\n  &.active-state > ", " {\n    background-color: ", ";\n  }\n\n  &:disabled > ", ",\n  &.disabled-state > ", " {\n    background-color: ", ";\n    color: ", ";\n  }\n"])), ButtonContentContainer, props => COLORS.getColor('correct_500', props.theme), ButtonContentContainer, ButtonContentContainer, props => COLORS.getColor('correct_700', props.theme), ButtonContentContainer, ButtonContentContainer, props => COLORS.getColor('correct_800', props.theme), ButtonContentContainer, ButtonContentContainer, props => COLORS.getColor('neutral_100', props.theme), props => COLORS.getColor('neutral_300', props.theme));
-export const ButtonCriticalStyled = styled(ButtonPrimaryStyled)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", " {\n    color: white;\n    background-color: ", ";\n  }\n  &:hover > ", ",\n  &.hover-state > ", " {\n    background-color: ", ";\n  }\n  &:active > ", ",\n  &.active-state > ", " {\n    background-color: ", ";\n  }\n\n  &:disabled > ", ",\n  &.disabled-state > ", " {\n    background-color: ", ";\n    color: ", ";    \n  }\n"])), ButtonContentContainer, props => COLORS.getColor('critical_500', props.theme), ButtonContentContainer, ButtonContentContainer, props => COLORS.getColor('critical_700', props.theme), ButtonContentContainer, ButtonContentContainer, props => COLORS.getColor('critical_800', props.theme), ButtonContentContainer, ButtonContentContainer, props => COLORS.getColor('neutral_100', props.theme), props => COLORS.getColor('neutral_300', props.theme));
+export const ButtonContentContainer = styled.div`
+  min-width: 64px;
+`;
+const ButtonBaseStyled = styled.button``;
+export const ButtonPrimaryStyled = styled(ButtonBaseStyled)`
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  padding: 0;
+  margin: 0;
+  position: relative;
+  box-sizing: border-box;
+  min-height: ${props => props.$size === Size.Large ? '56px' : '48px'};
+  &.loading-state {
+    cursor: wait;
+  }
+  ${ButtonContentContainer} {
+    ${props => props.$size === Size.Large ? ComponentLStyling(ComponentTextStyle.Bold, props?.$colorTheme === 'dark' ? COLORS.getColor('primary_800', props.theme) : COLORS.getColor('white', props.theme)) : props.$size === Size.Small ? ComponentSStyling(ComponentTextStyle.Bold, props?.$colorTheme === 'dark' ? COLORS.getColor('primary_800', props.theme) : COLORS.getColor('white', props.theme)) : ComponentMStyling(ComponentTextStyle.Bold, props?.$colorTheme === 'dark' ? COLORS.getColor('primary_800', props.theme) : COLORS.getColor('white', props.theme))};
+
+    background-color: ${props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary', props.theme)};
+    border-radius: ${props => getBorderRadius(props.$flatEdge, 8)};
+
+    width: ${props => props.$width};
+    position: relative;
+
+    min-height: ${props => props.$size === Size.Large ? '56px' : props.$size === Size.Small ? '32px' : '40px'};
+
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: ${props => props.$size === Size.Large ? '14px 16px' : props.$size === Size.Small ? '6px 8px' : '8px 12px'};
+
+    span.icon:not(.loading) {
+      pointer-events: none;
+    }
+
+    span.loading {
+      opacity: 0;
+    }
+
+    .icon {
+      margin: ${props => props.$size === Size.Medium ? props.$iconOnly ? '-2px -8px' : '' : props.$size === Size.Small ? props.$iconOnly ? '-2px -6px' : '' : ''};
+      width: ${props => props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px'};
+      height: ${props => props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px'};
+      svg {
+        width: ${props => props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px'} !important;
+        height: ${props => props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px'} !important;
+      }
+    }
+
+    .label {
+      margin: 0 4px;
+    }
+
+    div {
+      position: absolute;
+      width: 100%;
+      svg {
+        height: ${props => props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px'};
+        width: ${props => props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px'};
+        path {
+          fill: ${props => props.$colorTheme === 'dark' ? COLORS.getColor('primary', props.theme) : COLORS.getColor('white', props.theme)};
+        }
+      }
+    }
+  }
+  &:hover > ${ButtonContentContainer},
+  &.hover-state > ${ButtonContentContainer} {
+    background-color: ${props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('primary_100', props.theme) : COLORS.getColor('primary_700', props.theme)};
+    color: ${props => props?.$colorTheme === 'dark' ? COLORS.getColor('primary_600', props.theme) : COLORS.getColor('white', props.theme)};
+  }
+  &:active > ${ButtonContentContainer},
+  &.active-state > ${ButtonContentContainer} {
+    background-color: ${props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('primary_200', props.theme) : COLORS.getColor('primary_800', props.theme)};
+    color: ${props => props?.$colorTheme === 'dark' ? COLORS.getColor('primary_800', props.theme) : COLORS.getColor('white', props.theme)};
+  }
+
+  &:focus,
+  &.focus-state {
+    ${props => props.$invertFocus || props.$invertFocus === undefined && props.$colorTheme === 'dark' ? invertedFocusStyles : focusStyles}
+  }
+  &:disabled,
+  &.disabled-state {
+    cursor: not-allowed;
+  }
+  &:disabled > ${ButtonContentContainer},
+  &.disabled-state > ${ButtonContentContainer} {
+    pointer-events: none;
+    background-color: ${props => props.$colorTheme === 'dark' ? COLORS.getColor('primary_700', props.theme) : COLORS.getColor('neutral_100', props.theme)};
+    color: ${props => props.$colorTheme === 'dark' ? COLORS.getColor('primary_800', props.theme) : COLORS.getColor('neutral_300', props.theme)};
+  }
+`;
+export const ButtonSecondaryStyled = styled(ButtonPrimaryStyled)`
+  ${ButtonContentContainer} {
+    color: ${props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary', props.theme)};
+    background-color: transparent;
+    div svg path {
+      fill: ${props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : COLORS.getColor('primary', props.theme)};
+    }
+    box-shadow: inset 0 0 0 2px ${props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary', props.theme)};
+    
+    padding: ${props => props.$size === Size.Large ? '12px 16px' : props.$size === Size.Small ? '4px 8px' : '6px 12px'};
+  }
+
+  &:hover > ${ButtonContentContainer},
+  &.hover-state > ${ButtonContentContainer} {
+    color: ${props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('primary_200', props.theme) : COLORS.getColor('primary_700', props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('primary_200', props.theme) : COLORS.getColor('primary_700', props.theme)};
+    
+    background-color: transparent;
+    div {
+      svg {
+        path {
+          fill: ${props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : COLORS.getColor('primary_700', props.theme)};
+        }
+      }
+    }
+  }
+  &:active > ${ButtonContentContainer},
+  &.active-state > ${ButtonContentContainer} {
+    color: ${props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('primary_300', props.theme) : COLORS.getColor('primary_800', props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('primary_300', props.theme) : COLORS.getColor('primary_800', props.theme)};
+    
+    background-color: transparent;
+    div {
+      svg {
+        path {
+          fill: ${props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_800', props.theme)};
+        }
+      }
+    }
+  }
+
+  &:disabled > ${ButtonContentContainer},
+  &.disabled-state > ${ButtonContentContainer} {
+    background-color: transparent;
+    color: ${props => props?.$colorTheme === 'dark' ? COLORS.getColor('primary_700', props.theme) : COLORS.getColor('neutral_300', props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => props?.$colorTheme === 'dark' ? COLORS.getColor('primary_700', props.theme) : COLORS.getColor('neutral_100', props.theme)};
+  }
+`;
+export const ButtonTertiaryStyled = styled(ButtonPrimaryStyled)`
+${ButtonContentContainer} {
+    color: ${props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_500', props.theme)};
+    background-color: transparent;
+
+    div svg path {
+      fill: ${props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_500', props.theme)};
+    }
+
+    padding: ${props => props.$size === Size.Large ? '12px 16px' : props.$size === Size.Small ? '4px 8px' : '6px 12px'};
+  }
+
+  &:hover > ${ButtonContentContainer},
+  &.hover-state > ${ButtonContentContainer} {
+    background-color: ${props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_20', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('primary_700', props.theme) : COLORS.getColor('primary_20', props.theme)};
+    color: ${props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_700', props.theme)};
+
+    div {
+      svg {
+        path {
+          fill: ${props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_700', props.theme)};
+        }
+      }
+    }
+  }
+  &:active > ${ButtonContentContainer},
+  &.active-state > ${ButtonContentContainer} {
+    background-color: ${props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_100', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('primary_600', props.theme) : COLORS.getColor('primary_100', props.theme)};
+    color: ${props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_800', props.theme)};
+
+    div {
+      svg {
+        path {
+          fill: ${props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_800', props.theme)};
+        }
+      }
+    }
+  }
+
+  &:disabled > ${ButtonContentContainer},
+  &.disabled-state > ${ButtonContentContainer} {
+    background-color: transparent !important;
+    color: ${props => COLORS.getColor('primary_700', props.theme)};
+    border-color: transparent !important;
+  }
+`;
+export const ButtonPositiveStyled = styled(ButtonPrimaryStyled)`
+  ${ButtonContentContainer} {
+    color: white;
+    background-color: ${props => COLORS.getColor('correct_500', props.theme)};
+  }
+  &:hover > ${ButtonContentContainer},
+  &.hover-state > ${ButtonContentContainer} {
+    background-color: ${props => COLORS.getColor('correct_700', props.theme)};
+  }
+  &:active > ${ButtonContentContainer},
+  &.active-state > ${ButtonContentContainer} {
+    background-color: ${props => COLORS.getColor('correct_800', props.theme)};
+  }
+
+  &:disabled > ${ButtonContentContainer},
+  &.disabled-state > ${ButtonContentContainer} {
+    background-color: ${props => COLORS.getColor('neutral_100', props.theme)};
+    color: ${props => COLORS.getColor('neutral_300', props.theme)};
+  }
+`;
+export const ButtonCriticalStyled = styled(ButtonPrimaryStyled)`
+  ${ButtonContentContainer} {
+    color: white;
+    background-color: ${props => COLORS.getColor('critical_500', props.theme)};
+  }
+  &:hover > ${ButtonContentContainer},
+  &.hover-state > ${ButtonContentContainer} {
+    background-color: ${props => COLORS.getColor('critical_700', props.theme)};
+  }
+  &:active > ${ButtonContentContainer},
+  &.active-state > ${ButtonContentContainer} {
+    background-color: ${props => COLORS.getColor('critical_800', props.theme)};
+  }
+
+  &:disabled > ${ButtonContentContainer},
+  &.disabled-state > ${ButtonContentContainer} {
+    background-color: ${props => COLORS.getColor('neutral_100', props.theme)};
+    color: ${props => COLORS.getColor('neutral_300', props.theme)};    
+  }
+`;
 /**
  * Button component
  */

package/dist/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":["React","styled","LoadingIndicator","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","COLORS","focusStyles","invertedFocusStyles","Size","defaultOnMouseDownHandler","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","getBorderRadius","flatEdge","radius","concat","ButtonContentContainer","div","_templateObject","_taggedTemplateLiteral","ButtonBaseStyled","button","_templateObject2","ButtonPrimaryStyled","_templateObject3","props","$size","Large","Bold","$colorTheme","getColor","theme","Small","$flatEdge","$width","Medium","$iconOnly","$invertFocus","undefined","ButtonSecondaryStyled","_templateObject4","ButtonTertiaryStyled","_templateObject5","ButtonPositiveStyled","_templateObject6","ButtonCriticalStyled","_templateObject7","Button","forwardRef","_ref","ref","children","variant","type","size","colorTheme","invertFocus","width","testId","disabled","icon","_objectWithoutProperties","_excluded","loading","renderProps","_excluded2","renderContent","className","ButtonStyled","_objectSpread","onMouseDown","propTypes","_pt","oneOf","bool","oneOfType","string","node"],"sources":["../../src/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { css } from 'styled-components';\r\nimport { LoadingIndicator } from '../LoadingIndicator';\r\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles';\r\nimport { COLORS, focusStyles, invertedFocusStyles } from '../styles';\r\nimport { Size, Testable } from '../types';\r\nimport { defaultOnMouseDownHandler } from '../common';\r\n\r\nconst getBorderRadius = (flatEdge: string | undefined, radius: number) => {\r\n  switch (flatEdge) {\r\n    case 'left':\r\n      return `0px ${radius}px ${radius}px 0px`;\r\n\r\n    case 'right':\r\n      return `${radius}px 0px 0px ${radius}px`;\r\n\r\n    case 'none':\r\n    default:\r\n      return `${radius}px`;\r\n  }\r\n};\r\n\r\nexport const ButtonContentContainer = styled.div`\r\n  min-width: 64px;\r\n`;\r\n\r\nconst ButtonBaseStyled = styled.button<{$iconOnly: boolean; $size: Size; $colorTheme: 'teal' | 'dark' | undefined; $flatEdge: string | undefined; $width: string; $invertFocus: boolean | undefined; }>``;\r\n\r\nexport const ButtonPrimaryStyled = styled(ButtonBaseStyled)`\r\n  border: none;\r\n  background-color: transparent;\r\n  cursor: pointer;\r\n  padding: 0;\r\n  margin: 0;\r\n  position: relative;\r\n  box-sizing: border-box;\r\n  min-height: ${(props) => (props.$size === Size.Large ? '56px' : '48px')};\r\n  &.loading-state {\r\n    cursor: wait;\r\n  }\r\n  ${ButtonContentContainer} {\r\n    ${(props) =>\r\n      props.$size === Size.Large\r\n        ? ComponentLStyling(ComponentTextStyle.Bold, props?.$colorTheme === 'dark' ? COLORS.getColor('primary_800', props.theme) : COLORS.getColor('white', props.theme))\r\n        : props.$size === Size.Small\r\n        ? ComponentSStyling(ComponentTextStyle.Bold, props?.$colorTheme === 'dark' ? COLORS.getColor('primary_800', props.theme) : COLORS.getColor('white', props.theme))\r\n        : ComponentMStyling(ComponentTextStyle.Bold, props?.$colorTheme === 'dark' ? COLORS.getColor('primary_800', props.theme) : COLORS.getColor('white', props.theme))};\r\n\r\n    background-color: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary', props.theme))};\r\n    border-radius: ${(props) => getBorderRadius(props.$flatEdge, 8)};\r\n\r\n    width: ${(props) => props.$width};\r\n    position: relative;\r\n\r\n    min-height: ${(props) => (props.$size === Size.Large ? '56px' : props.$size === Size.Small ? '32px' : '40px')};\r\n\r\n    box-sizing: border-box;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: ${(props) => (props.$size === Size.Large ? '14px 16px' : props.$size === Size.Small ? '6px 8px' : '8px 12px')};\r\n\r\n    span.icon:not(.loading) {\r\n      pointer-events: none;\r\n    }\r\n\r\n    span.loading {\r\n      opacity: 0;\r\n    }\r\n\r\n    .icon {\r\n      margin: ${(props) => (props.$size === Size.Medium ? props.$iconOnly ? '-2px -8px' : '' : (props.$size === Size.Small ? props.$iconOnly ? '-2px -6px' : '' : '' ))};\r\n      width: ${(props) => (props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px')};\r\n      height: ${(props) => (props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px')};\r\n      svg {\r\n        width: ${(props) => (props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px')} !important;\r\n        height: ${(props) => (props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px')} !important;\r\n      }\r\n    }\r\n\r\n    .label {\r\n      margin: 0 4px;\r\n    }\r\n\r\n    div {\r\n      position: absolute;\r\n      width: 100%;\r\n      svg {\r\n        height: ${(props) => (props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px')};\r\n        width: ${(props) => (props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px')};\r\n        path {\r\n          fill: ${(props) => (props.$colorTheme === 'dark' ? COLORS.getColor('primary', props.theme) : COLORS.getColor('white', props.theme))};\r\n        }\r\n      }\r\n    }\r\n  }\r\n  &:hover > ${ButtonContentContainer},\r\n  &.hover-state > ${ButtonContentContainer} {\r\n    background-color: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('primary_100', props.theme) : COLORS.getColor('primary_700', props.theme))};\r\n    color: ${(props) => (props?.$colorTheme === 'dark' ? COLORS.getColor('primary_600', props.theme) : COLORS.getColor('white', props.theme))};\r\n  }\r\n  &:active > ${ButtonContentContainer},\r\n  &.active-state > ${ButtonContentContainer} {\r\n    background-color: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('primary_200', props.theme) : COLORS.getColor('primary_800', props.theme))};\r\n    color: ${(props) => (props?.$colorTheme === 'dark' ? COLORS.getColor('primary_800', props.theme) : COLORS.getColor('white', props.theme))};\r\n  }\r\n\r\n  &:focus,\r\n  &.focus-state {\r\n    ${(props) => (props.$invertFocus || (props.$invertFocus === undefined && props.$colorTheme === 'dark') ? invertedFocusStyles : focusStyles)}\r\n  }\r\n  &:disabled,\r\n  &.disabled-state {\r\n    cursor: not-allowed;\r\n  }\r\n  &:disabled > ${ButtonContentContainer},\r\n  &.disabled-state > ${ButtonContentContainer} {\r\n    pointer-events: none;\r\n    background-color: ${(props) => (props.$colorTheme === 'dark' ? COLORS.getColor('primary_700', props.theme) : COLORS.getColor('neutral_100', props.theme))};\r\n    color: ${(props) => (props.$colorTheme === 'dark' ? COLORS.getColor('primary_800', props.theme) : COLORS.getColor('neutral_300', props.theme))};\r\n  }\r\n`;\r\n\r\nexport const ButtonSecondaryStyled = styled(ButtonPrimaryStyled)`\r\n  ${ButtonContentContainer} {\r\n    color: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary', props.theme))};\r\n    background-color: transparent;\r\n    div svg path {\r\n      fill: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : COLORS.getColor('primary', props.theme))};\r\n    }\r\n    box-shadow: inset 0 0 0 2px ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary', props.theme))};\r\n    \r\n    padding: ${(props) => (props.$size === Size.Large ? '12px 16px' : props.$size === Size.Small ? '4px 8px' : '6px 12px')};\r\n  }\r\n\r\n  &:hover > ${ButtonContentContainer},\r\n  &.hover-state > ${ButtonContentContainer} {\r\n    color: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('primary_200', props.theme) : COLORS.getColor('primary_700', props.theme))};\r\n    box-shadow: inset 0 0 0 2px ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('primary_200', props.theme) : COLORS.getColor('primary_700', props.theme))};\r\n    \r\n    background-color: transparent;\r\n    div {\r\n      svg {\r\n        path {\r\n          fill: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : COLORS.getColor('primary_700', props.theme))};\r\n        }\r\n      }\r\n    }\r\n  }\r\n  &:active > ${ButtonContentContainer},\r\n  &.active-state > ${ButtonContentContainer} {\r\n    color: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('primary_300', props.theme) : COLORS.getColor('primary_800', props.theme))};\r\n    box-shadow: inset 0 0 0 2px ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('primary_300', props.theme) : COLORS.getColor('primary_800', props.theme))};\r\n    \r\n    background-color: transparent;\r\n    div {\r\n      svg {\r\n        path {\r\n          fill: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_800', props.theme))};\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  &:disabled > ${ButtonContentContainer},\r\n  &.disabled-state > ${ButtonContentContainer} {\r\n    background-color: transparent;\r\n    color: ${(props) => (props?.$colorTheme === 'dark' ? COLORS.getColor('primary_700', props.theme) : COLORS.getColor('neutral_300', props.theme))};\r\n    box-shadow: inset 0 0 0 2px ${(props) => (props?.$colorTheme === 'dark' ? COLORS.getColor('primary_700', props.theme) : COLORS.getColor('neutral_100', props.theme))};\r\n  }\r\n`;\r\n\r\nexport const ButtonTertiaryStyled = styled(ButtonPrimaryStyled)`\r\n${ButtonContentContainer} {\r\n    color: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_500', props.theme))};\r\n    background-color: transparent;\r\n\r\n    div svg path {\r\n      fill: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_500', props.theme))};\r\n    }\r\n\r\n    padding: ${(props) => (props.$size === Size.Large ? '12px 16px' : props.$size === Size.Small ? '4px 8px' : '6px 12px')};\r\n  }\r\n\r\n  &:hover > ${ButtonContentContainer},\r\n  &.hover-state > ${ButtonContentContainer} {\r\n    background-color: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_20', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('primary_700', props.theme) : COLORS.getColor('primary_20', props.theme))};\r\n    color: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_700', props.theme))};\r\n\r\n    div {\r\n      svg {\r\n        path {\r\n          fill: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_700', props.theme))};\r\n        }\r\n      }\r\n    }\r\n  }\r\n  &:active > ${ButtonContentContainer},\r\n  &.active-state > ${ButtonContentContainer} {\r\n    background-color: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_100', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('primary_600', props.theme) : COLORS.getColor('primary_100', props.theme))};\r\n    color: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_800', props.theme))};\r\n\r\n    div {\r\n      svg {\r\n        path {\r\n          fill: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_800', props.theme))};\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  &:disabled > ${ButtonContentContainer},\r\n  &.disabled-state > ${ButtonContentContainer} {\r\n    background-color: transparent !important;\r\n    color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    border-color: transparent !important;\r\n  }\r\n`;\r\n\r\nexport const ButtonPositiveStyled = styled(ButtonPrimaryStyled)`\r\n  ${ButtonContentContainer} {\r\n    color: white;\r\n    background-color: ${props => COLORS.getColor('correct_500', props.theme)};\r\n  }\r\n  &:hover > ${ButtonContentContainer},\r\n  &.hover-state > ${ButtonContentContainer} {\r\n    background-color: ${props => COLORS.getColor('correct_700', props.theme)};\r\n  }\r\n  &:active > ${ButtonContentContainer},\r\n  &.active-state > ${ButtonContentContainer} {\r\n    background-color: ${props => COLORS.getColor('correct_800', props.theme)};\r\n  }\r\n\r\n  &:disabled > ${ButtonContentContainer},\r\n  &.disabled-state > ${ButtonContentContainer} {\r\n    background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n  }\r\n`;\r\n\r\nexport const ButtonCriticalStyled = styled(ButtonPrimaryStyled)`\r\n  ${ButtonContentContainer} {\r\n    color: white;\r\n    background-color: ${props => COLORS.getColor('critical_500', props.theme)};\r\n  }\r\n  &:hover > ${ButtonContentContainer},\r\n  &.hover-state > ${ButtonContentContainer} {\r\n    background-color: ${props => COLORS.getColor('critical_700', props.theme)};\r\n  }\r\n  &:active > ${ButtonContentContainer},\r\n  &.active-state > ${ButtonContentContainer} {\r\n    background-color: ${props => COLORS.getColor('critical_800', props.theme)};\r\n  }\r\n\r\n  &:disabled > ${ButtonContentContainer},\r\n  &.disabled-state > ${ButtonContentContainer} {\r\n    background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};    \r\n  }\r\n`;\r\n\r\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n  /** Look and feel variant of the component. Defaults to 'primary'. */\r\n  variant?: 'primary' | 'secondary' | 'tertiary' | 'positive' | 'critical';\r\n  /** Can be used in order to remove rounded corners on right or left edge of the button. Used by 'DualFunctionButton'. Defaults to 'undefined' */\r\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\r\n  /** Size of the component. Small, Medium or Large. Defaults to 'medium' */\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  /** Color theme altering of the component. By default there is no altering applied. */\r\n  colorTheme?: 'teal' | 'dark';\r\n  /** Allows using inverted colors for outlining focus rect. Shown when component focused by keyboard. */\r\n  invertFocus?: boolean;\r\n  /** Can be used to set custom value for width style. Value is set for 'ButtonContent' container. */\r\n  width?: 'auto' | string;\r\n  /** If set, then 'opacity' of children container will be set to 0, and loading indicator will be shown.  */\r\n  loading?: boolean;\r\n  /** TestId. Will be set to the top level button component. */\r\n  testId?: string;\r\n  /** Icon that will be shown on the left of the children. */\r\n  icon?: React.ReactNode;\r\n}\r\n\r\n/**\r\n * Button component\r\n */\r\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n  ({ children = '', variant = 'primary', type = 'button', size = Size.Medium, colorTheme, invertFocus,  width: width = 'auto', testId, disabled, flatEdge, icon, ...props }, ref) => {\r\n    // Let's filter out properties that we don't need to render.\r\n    const { loading, ...renderProps } = props;\r\n\r\n    const renderContent = () => (\r\n      <>\r\n        {icon && <span className={(children ? 'extramargin ' : '') + (loading ? 'icon loading' : 'icon')}>{icon}</span>}\r\n        {children && <span className={loading ? 'label loading' : 'label'}>{children}</span>}\r\n        {loading && <LoadingIndicator />}\r\n      </>\r\n    );\r\n\r\n    let ButtonStyled = ButtonPrimaryStyled;\r\n    switch (variant) {\r\n      case 'secondary':\r\n        ButtonStyled = ButtonSecondaryStyled;\r\n        break;\r\n      case 'tertiary':\r\n        ButtonStyled = ButtonTertiaryStyled;\r\n        break;\r\n      case 'positive':\r\n        ButtonStyled = ButtonPositiveStyled;\r\n        break;\r\n      case 'critical':\r\n        ButtonStyled = ButtonCriticalStyled;\r\n        break;\r\n    }\r\n\r\n    return (\r\n      <ButtonStyled\r\n        {...renderProps}\r\n        $size={size}\r\n        $colorTheme={colorTheme} \r\n        $invertFocus={invertFocus}        \r\n        ref={ref}\r\n        disabled={disabled}\r\n        $iconOnly={!children}\r\n        type={type}\r\n        $flatEdge={flatEdge}\r\n        $width={width}\r\n        data-testid={testId}\r\n        className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\r\n        onMouseDown={defaultOnMouseDownHandler}>\r\n        <ButtonContentContainer>{renderContent()}</ButtonContentContainer>\r\n      </ButtonStyled>\r\n    );\r\n  },\r\n);\r\n\r\nexport default Button;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Button.js","names":["React","styled","LoadingIndicator","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","COLORS","focusStyles","invertedFocusStyles","Size","defaultOnMouseDownHandler","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","getBorderRadius","flatEdge","radius","ButtonContentContainer","div","ButtonBaseStyled","button","ButtonPrimaryStyled","props","$size","Large","Bold","$colorTheme","getColor","theme","Small","$flatEdge","$width","Medium","$iconOnly","$invertFocus","undefined","ButtonSecondaryStyled","ButtonTertiaryStyled","ButtonPositiveStyled","ButtonCriticalStyled","Button","forwardRef","_ref","ref","children","variant","type","size","colorTheme","invertFocus","width","testId","disabled","icon","_objectWithoutProperties","_excluded","loading","renderProps","_excluded2","renderContent","className","ButtonStyled","_objectSpread","onMouseDown","propTypes","_pt","oneOf","bool","oneOfType","string","node"],"sources":["../../src/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { css } from 'styled-components';\r\nimport { LoadingIndicator } from '../LoadingIndicator';\r\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles';\r\nimport { COLORS, focusStyles, invertedFocusStyles } from '../styles';\r\nimport { Size, Testable } from '../types';\r\nimport { defaultOnMouseDownHandler } from '../common';\r\n\r\nconst getBorderRadius = (flatEdge: string | undefined, radius: number) => {\r\n  switch (flatEdge) {\r\n    case 'left':\r\n      return `0px ${radius}px ${radius}px 0px`;\r\n\r\n    case 'right':\r\n      return `${radius}px 0px 0px ${radius}px`;\r\n\r\n    case 'none':\r\n    default:\r\n      return `${radius}px`;\r\n  }\r\n};\r\n\r\nexport const ButtonContentContainer = styled.div`\r\n  min-width: 64px;\r\n`;\r\n\r\nconst ButtonBaseStyled = styled.button<{$iconOnly: boolean; $size: Size; $colorTheme: 'teal' | 'dark' | undefined; $flatEdge: string | undefined; $width: string; $invertFocus: boolean | undefined; }>``;\r\n\r\nexport const ButtonPrimaryStyled = styled(ButtonBaseStyled)`\r\n  border: none;\r\n  background-color: transparent;\r\n  cursor: pointer;\r\n  padding: 0;\r\n  margin: 0;\r\n  position: relative;\r\n  box-sizing: border-box;\r\n  min-height: ${(props) => (props.$size === Size.Large ? '56px' : '48px')};\r\n  &.loading-state {\r\n    cursor: wait;\r\n  }\r\n  ${ButtonContentContainer} {\r\n    ${(props) =>\r\n      props.$size === Size.Large\r\n        ? ComponentLStyling(ComponentTextStyle.Bold, props?.$colorTheme === 'dark' ? COLORS.getColor('primary_800', props.theme) : COLORS.getColor('white', props.theme))\r\n        : props.$size === Size.Small\r\n        ? ComponentSStyling(ComponentTextStyle.Bold, props?.$colorTheme === 'dark' ? COLORS.getColor('primary_800', props.theme) : COLORS.getColor('white', props.theme))\r\n        : ComponentMStyling(ComponentTextStyle.Bold, props?.$colorTheme === 'dark' ? COLORS.getColor('primary_800', props.theme) : COLORS.getColor('white', props.theme))};\r\n\r\n    background-color: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary', props.theme))};\r\n    border-radius: ${(props) => getBorderRadius(props.$flatEdge, 8)};\r\n\r\n    width: ${(props) => props.$width};\r\n    position: relative;\r\n\r\n    min-height: ${(props) => (props.$size === Size.Large ? '56px' : props.$size === Size.Small ? '32px' : '40px')};\r\n\r\n    box-sizing: border-box;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: ${(props) => (props.$size === Size.Large ? '14px 16px' : props.$size === Size.Small ? '6px 8px' : '8px 12px')};\r\n\r\n    span.icon:not(.loading) {\r\n      pointer-events: none;\r\n    }\r\n\r\n    span.loading {\r\n      opacity: 0;\r\n    }\r\n\r\n    .icon {\r\n      margin: ${(props) => (props.$size === Size.Medium ? props.$iconOnly ? '-2px -8px' : '' : (props.$size === Size.Small ? props.$iconOnly ? '-2px -6px' : '' : '' ))};\r\n      width: ${(props) => (props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px')};\r\n      height: ${(props) => (props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px')};\r\n      svg {\r\n        width: ${(props) => (props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px')} !important;\r\n        height: ${(props) => (props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px')} !important;\r\n      }\r\n    }\r\n\r\n    .label {\r\n      margin: 0 4px;\r\n    }\r\n\r\n    div {\r\n      position: absolute;\r\n      width: 100%;\r\n      svg {\r\n        height: ${(props) => (props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px')};\r\n        width: ${(props) => (props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px')};\r\n        path {\r\n          fill: ${(props) => (props.$colorTheme === 'dark' ? COLORS.getColor('primary', props.theme) : COLORS.getColor('white', props.theme))};\r\n        }\r\n      }\r\n    }\r\n  }\r\n  &:hover > ${ButtonContentContainer},\r\n  &.hover-state > ${ButtonContentContainer} {\r\n    background-color: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('primary_100', props.theme) : COLORS.getColor('primary_700', props.theme))};\r\n    color: ${(props) => (props?.$colorTheme === 'dark' ? COLORS.getColor('primary_600', props.theme) : COLORS.getColor('white', props.theme))};\r\n  }\r\n  &:active > ${ButtonContentContainer},\r\n  &.active-state > ${ButtonContentContainer} {\r\n    background-color: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('primary_200', props.theme) : COLORS.getColor('primary_800', props.theme))};\r\n    color: ${(props) => (props?.$colorTheme === 'dark' ? COLORS.getColor('primary_800', props.theme) : COLORS.getColor('white', props.theme))};\r\n  }\r\n\r\n  &:focus,\r\n  &.focus-state {\r\n    ${(props) => (props.$invertFocus || (props.$invertFocus === undefined && props.$colorTheme === 'dark') ? invertedFocusStyles : focusStyles)}\r\n  }\r\n  &:disabled,\r\n  &.disabled-state {\r\n    cursor: not-allowed;\r\n  }\r\n  &:disabled > ${ButtonContentContainer},\r\n  &.disabled-state > ${ButtonContentContainer} {\r\n    pointer-events: none;\r\n    background-color: ${(props) => (props.$colorTheme === 'dark' ? COLORS.getColor('primary_700', props.theme) : COLORS.getColor('neutral_100', props.theme))};\r\n    color: ${(props) => (props.$colorTheme === 'dark' ? COLORS.getColor('primary_800', props.theme) : COLORS.getColor('neutral_300', props.theme))};\r\n  }\r\n`;\r\n\r\nexport const ButtonSecondaryStyled = styled(ButtonPrimaryStyled)`\r\n  ${ButtonContentContainer} {\r\n    color: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary', props.theme))};\r\n    background-color: transparent;\r\n    div svg path {\r\n      fill: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : COLORS.getColor('primary', props.theme))};\r\n    }\r\n    box-shadow: inset 0 0 0 2px ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary', props.theme))};\r\n    \r\n    padding: ${(props) => (props.$size === Size.Large ? '12px 16px' : props.$size === Size.Small ? '4px 8px' : '6px 12px')};\r\n  }\r\n\r\n  &:hover > ${ButtonContentContainer},\r\n  &.hover-state > ${ButtonContentContainer} {\r\n    color: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('primary_200', props.theme) : COLORS.getColor('primary_700', props.theme))};\r\n    box-shadow: inset 0 0 0 2px ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('primary_200', props.theme) : COLORS.getColor('primary_700', props.theme))};\r\n    \r\n    background-color: transparent;\r\n    div {\r\n      svg {\r\n        path {\r\n          fill: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : COLORS.getColor('primary_700', props.theme))};\r\n        }\r\n      }\r\n    }\r\n  }\r\n  &:active > ${ButtonContentContainer},\r\n  &.active-state > ${ButtonContentContainer} {\r\n    color: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('primary_300', props.theme) : COLORS.getColor('primary_800', props.theme))};\r\n    box-shadow: inset 0 0 0 2px ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('primary_300', props.theme) : COLORS.getColor('primary_800', props.theme))};\r\n    \r\n    background-color: transparent;\r\n    div {\r\n      svg {\r\n        path {\r\n          fill: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_800', props.theme))};\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  &:disabled > ${ButtonContentContainer},\r\n  &.disabled-state > ${ButtonContentContainer} {\r\n    background-color: transparent;\r\n    color: ${(props) => (props?.$colorTheme === 'dark' ? COLORS.getColor('primary_700', props.theme) : COLORS.getColor('neutral_300', props.theme))};\r\n    box-shadow: inset 0 0 0 2px ${(props) => (props?.$colorTheme === 'dark' ? COLORS.getColor('primary_700', props.theme) : COLORS.getColor('neutral_100', props.theme))};\r\n  }\r\n`;\r\n\r\nexport const ButtonTertiaryStyled = styled(ButtonPrimaryStyled)`\r\n${ButtonContentContainer} {\r\n    color: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_500', props.theme))};\r\n    background-color: transparent;\r\n\r\n    div svg path {\r\n      fill: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_500', props.theme))};\r\n    }\r\n\r\n    padding: ${(props) => (props.$size === Size.Large ? '12px 16px' : props.$size === Size.Small ? '4px 8px' : '6px 12px')};\r\n  }\r\n\r\n  &:hover > ${ButtonContentContainer},\r\n  &.hover-state > ${ButtonContentContainer} {\r\n    background-color: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_20', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('primary_700', props.theme) : COLORS.getColor('primary_20', props.theme))};\r\n    color: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_700', props.theme))};\r\n\r\n    div {\r\n      svg {\r\n        path {\r\n          fill: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_700', props.theme))};\r\n        }\r\n      }\r\n    }\r\n  }\r\n  &:active > ${ButtonContentContainer},\r\n  &.active-state > ${ButtonContentContainer} {\r\n    background-color: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_100', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('primary_600', props.theme) : COLORS.getColor('primary_100', props.theme))};\r\n    color: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_800', props.theme))};\r\n\r\n    div {\r\n      svg {\r\n        path {\r\n          fill: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_800', props.theme))};\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  &:disabled > ${ButtonContentContainer},\r\n  &.disabled-state > ${ButtonContentContainer} {\r\n    background-color: transparent !important;\r\n    color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    border-color: transparent !important;\r\n  }\r\n`;\r\n\r\nexport const ButtonPositiveStyled = styled(ButtonPrimaryStyled)`\r\n  ${ButtonContentContainer} {\r\n    color: white;\r\n    background-color: ${props => COLORS.getColor('correct_500', props.theme)};\r\n  }\r\n  &:hover > ${ButtonContentContainer},\r\n  &.hover-state > ${ButtonContentContainer} {\r\n    background-color: ${props => COLORS.getColor('correct_700', props.theme)};\r\n  }\r\n  &:active > ${ButtonContentContainer},\r\n  &.active-state > ${ButtonContentContainer} {\r\n    background-color: ${props => COLORS.getColor('correct_800', props.theme)};\r\n  }\r\n\r\n  &:disabled > ${ButtonContentContainer},\r\n  &.disabled-state > ${ButtonContentContainer} {\r\n    background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n  }\r\n`;\r\n\r\nexport const ButtonCriticalStyled = styled(ButtonPrimaryStyled)`\r\n  ${ButtonContentContainer} {\r\n    color: white;\r\n    background-color: ${props => COLORS.getColor('critical_500', props.theme)};\r\n  }\r\n  &:hover > ${ButtonContentContainer},\r\n  &.hover-state > ${ButtonContentContainer} {\r\n    background-color: ${props => COLORS.getColor('critical_700', props.theme)};\r\n  }\r\n  &:active > ${ButtonContentContainer},\r\n  &.active-state > ${ButtonContentContainer} {\r\n    background-color: ${props => COLORS.getColor('critical_800', props.theme)};\r\n  }\r\n\r\n  &:disabled > ${ButtonContentContainer},\r\n  &.disabled-state > ${ButtonContentContainer} {\r\n    background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};    \r\n  }\r\n`;\r\n\r\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n  /** Look and feel variant of the component. Defaults to 'primary'. */\r\n  variant?: 'primary' | 'secondary' | 'tertiary' | 'positive' | 'critical';\r\n  /** Can be used in order to remove rounded corners on right or left edge of the button. Used by 'DualFunctionButton'. Defaults to 'undefined' */\r\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\r\n  /** Size of the component. Small, Medium or Large. Defaults to 'medium' */\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  /** Color theme altering of the component. By default there is no altering applied. */\r\n  colorTheme?: 'teal' | 'dark';\r\n  /** Allows using inverted colors for outlining focus rect. Shown when component focused by keyboard. */\r\n  invertFocus?: boolean;\r\n  /** Can be used to set custom value for width style. Value is set for 'ButtonContent' container. */\r\n  width?: 'auto' | string;\r\n  /** If set, then 'opacity' of children container will be set to 0, and loading indicator will be shown.  */\r\n  loading?: boolean;\r\n  /** TestId. Will be set to the top level button component. */\r\n  testId?: string;\r\n  /** Icon that will be shown on the left of the children. */\r\n  icon?: React.ReactNode;\r\n}\r\n\r\n/**\r\n * Button component\r\n */\r\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n  ({ children = '', variant = 'primary', type = 'button', size = Size.Medium, colorTheme, invertFocus,  width: width = 'auto', testId, disabled, flatEdge, icon, ...props }, ref) => {\r\n    // Let's filter out properties that we don't need to render.\r\n    const { loading, ...renderProps } = props;\r\n\r\n    const renderContent = () => (\r\n      <>\r\n        {icon && <span className={(children ? 'extramargin ' : '') + (loading ? 'icon loading' : 'icon')}>{icon}</span>}\r\n        {children && <span className={loading ? 'label loading' : 'label'}>{children}</span>}\r\n        {loading && <LoadingIndicator />}\r\n      </>\r\n    );\r\n\r\n    let ButtonStyled = ButtonPrimaryStyled;\r\n    switch (variant) {\r\n      case 'secondary':\r\n        ButtonStyled = ButtonSecondaryStyled;\r\n        break;\r\n      case 'tertiary':\r\n        ButtonStyled = ButtonTertiaryStyled;\r\n        break;\r\n      case 'positive':\r\n        ButtonStyled = ButtonPositiveStyled;\r\n        break;\r\n      case 'critical':\r\n        ButtonStyled = ButtonCriticalStyled;\r\n        break;\r\n    }\r\n\r\n    return (\r\n      <ButtonStyled\r\n        {...renderProps}\r\n        $size={size}\r\n        $colorTheme={colorTheme} \r\n        $invertFocus={invertFocus}        \r\n        ref={ref}\r\n        disabled={disabled}\r\n        $iconOnly={!children}\r\n        type={type}\r\n        $flatEdge={flatEdge}\r\n        $width={width}\r\n        data-testid={testId}\r\n        className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\r\n        onMouseDown={defaultOnMouseDownHandler}>\r\n        <ButtonContentContainer>{renderContent()}</ButtonContentContainer>\r\n      </ButtonStyled>\r\n    );\r\n  },\r\n);\r\n\r\nexport default Button;\r\n"],"mappings":";;;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAe,mBAAmB;AAC/C,SAASC,gBAAgB,QAAQ,qBAAqB;AACtD,SAASC,iBAAiB,EAAEC,iBAAiB,EAAEC,iBAAiB,EAAEC,kBAAkB,QAAQ,WAAW;AACvG,SAASC,MAAM,EAAEC,WAAW,EAAEC,mBAAmB,QAAQ,WAAW;AACpE,SAASC,IAAI,QAAkB,UAAU;AACzC,SAASC,yBAAyB,QAAQ,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA,EAAAC,IAAA,IAAAC,KAAA;AAEtD,MAAMC,eAAe,GAAGA,CAACC,QAA4B,EAAEC,MAAc,KAAK;EACxE,QAAQD,QAAQ;IACd,KAAK,MAAM;MACT,OAAO,OAAOC,MAAM,MAAMA,MAAM,QAAQ;IAE1C,KAAK,OAAO;MACV,OAAO,GAAGA,MAAM,cAAcA,MAAM,IAAI;IAE1C,KAAK,MAAM;IACX;MACE,OAAO,GAAGA,MAAM,IAAI;EACxB;AACF,CAAC;AAED,OAAO,MAAMC,sBAAsB,GAAGpB,MAAM,CAACqB,GAAG;AAChD;AACA,CAAC;AAED,MAAMC,gBAAgB,GAAGtB,MAAM,CAACuB,MAAuK,EAAE;AAEzM,OAAO,MAAMC,mBAAmB,GAAGxB,MAAM,CAACsB,gBAAgB,CAAC;AAC3D;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gBAAiBG,KAAK,IAAMA,KAAK,CAACC,KAAK,KAAKjB,IAAI,CAACkB,KAAK,GAAG,MAAM,GAAG,MAAO;AACzE;AACA;AACA;AACA,IAAIP,sBAAsB;AAC1B,MAAOK,KAAK,IACNA,KAAK,CAACC,KAAK,KAAKjB,IAAI,CAACkB,KAAK,GACtBzB,iBAAiB,CAACG,kBAAkB,CAACuB,IAAI,EAAEH,KAAK,EAAEI,WAAW,KAAK,MAAM,GAAGvB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,GAAGzB,MAAM,CAACwB,QAAQ,CAAC,OAAO,EAAEL,KAAK,CAACM,KAAK,CAAC,CAAC,GAC/JN,KAAK,CAACC,KAAK,KAAKjB,IAAI,CAACuB,KAAK,GAC1B5B,iBAAiB,CAACC,kBAAkB,CAACuB,IAAI,EAAEH,KAAK,EAAEI,WAAW,KAAK,MAAM,GAAGvB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,GAAGzB,MAAM,CAACwB,QAAQ,CAAC,OAAO,EAAEL,KAAK,CAACM,KAAK,CAAC,CAAC,GAC/J5B,iBAAiB,CAACE,kBAAkB,CAACuB,IAAI,EAAEH,KAAK,EAAEI,WAAW,KAAK,MAAM,GAAGvB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,GAAGzB,MAAM,CAACwB,QAAQ,CAAC,OAAO,EAAEL,KAAK,CAACM,KAAK,CAAC,CAAC;AACzK;AACA,wBAAyBN,KAAK,IAAMA,KAAK,CAACI,WAAW,KAAK,MAAM,GAAGvB,MAAM,CAACwB,QAAQ,CAAC,SAAS,EAAEL,KAAK,CAACM,KAAK,CAAC,GAAGN,KAAK,EAAEI,WAAW,KAAK,MAAM,GAAGvB,MAAM,CAACwB,QAAQ,CAAC,OAAO,EAAEL,KAAK,CAACM,KAAK,CAAC,GAAGzB,MAAM,CAACwB,QAAQ,CAAC,SAAS,EAAEL,KAAK,CAACM,KAAK,CAAE;AAC7N,qBAAsBN,KAAK,IAAKR,eAAe,CAACQ,KAAK,CAACQ,SAAS,EAAE,CAAC,CAAC;AACnE;AACA,aAAcR,KAAK,IAAKA,KAAK,CAACS,MAAM;AACpC;AACA;AACA,kBAAmBT,KAAK,IAAMA,KAAK,CAACC,KAAK,KAAKjB,IAAI,CAACkB,KAAK,GAAG,MAAM,GAAGF,KAAK,CAACC,KAAK,KAAKjB,IAAI,CAACuB,KAAK,GAAG,MAAM,GAAG,MAAO;AACjH;AACA;AACA;AACA;AACA;AACA,eAAgBP,KAAK,IAAMA,KAAK,CAACC,KAAK,KAAKjB,IAAI,CAACkB,KAAK,GAAG,WAAW,GAAGF,KAAK,CAACC,KAAK,KAAKjB,IAAI,CAACuB,KAAK,GAAG,SAAS,GAAG,UAAW;AAC1H;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gBAAiBP,KAAK,IAAMA,KAAK,CAACC,KAAK,KAAKjB,IAAI,CAAC0B,MAAM,GAAGV,KAAK,CAACW,SAAS,GAAG,WAAW,GAAG,EAAE,GAAIX,KAAK,CAACC,KAAK,KAAKjB,IAAI,CAACuB,KAAK,GAAGP,KAAK,CAACW,SAAS,GAAG,WAAW,GAAG,EAAE,GAAG,EAAK;AACvK,eAAgBX,KAAK,IAAMA,KAAK,CAACC,KAAK,KAAKjB,IAAI,CAACkB,KAAK,GAAG,MAAM,GAAGF,KAAK,CAACC,KAAK,KAAKjB,IAAI,CAACuB,KAAK,GAAG,MAAM,GAAG,MAAO;AAC9G,gBAAiBP,KAAK,IAAMA,KAAK,CAACC,KAAK,KAAKjB,IAAI,CAACkB,KAAK,GAAG,MAAM,GAAGF,KAAK,CAACC,KAAK,KAAKjB,IAAI,CAACuB,KAAK,GAAG,MAAM,GAAG,MAAO;AAC/G;AACA,iBAAkBP,KAAK,IAAMA,KAAK,CAACC,KAAK,KAAKjB,IAAI,CAACkB,KAAK,GAAG,MAAM,GAAGF,KAAK,CAACC,KAAK,KAAKjB,IAAI,CAACuB,KAAK,GAAG,MAAM,GAAG,MAAO;AAChH,kBAAmBP,KAAK,IAAMA,KAAK,CAACC,KAAK,KAAKjB,IAAI,CAACkB,KAAK,GAAG,MAAM,GAAGF,KAAK,CAACC,KAAK,KAAKjB,IAAI,CAACuB,KAAK,GAAG,MAAM,GAAG,MAAO;AACjH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAmBP,KAAK,IAAMA,KAAK,CAACC,KAAK,KAAKjB,IAAI,CAACkB,KAAK,GAAG,MAAM,GAAGF,KAAK,CAACC,KAAK,KAAKjB,IAAI,CAACuB,KAAK,GAAG,MAAM,GAAG,MAAO;AACjH,iBAAkBP,KAAK,IAAMA,KAAK,CAACC,KAAK,KAAKjB,IAAI,CAACkB,KAAK,GAAG,MAAM,GAAGF,KAAK,CAACC,KAAK,KAAKjB,IAAI,CAACuB,KAAK,GAAG,MAAM,GAAG,MAAO;AAChH;AACA,kBAAmBP,KAAK,IAAMA,KAAK,CAACI,WAAW,KAAK,MAAM,GAAGvB,MAAM,CAACwB,QAAQ,CAAC,SAAS,EAAEL,KAAK,CAACM,KAAK,CAAC,GAAGzB,MAAM,CAACwB,QAAQ,CAAC,OAAO,EAAEL,KAAK,CAACM,KAAK,CAAE;AAC7I;AACA;AACA;AACA;AACA,cAAcX,sBAAsB;AACpC,oBAAoBA,sBAAsB;AAC1C,wBAAyBK,KAAK,IAAMA,KAAK,CAACI,WAAW,KAAK,MAAM,GAAGvB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,GAAGN,KAAK,EAAEI,WAAW,KAAK,MAAM,GAAGvB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,GAAGzB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAE;AAC3O,aAAcN,KAAK,IAAMA,KAAK,EAAEI,WAAW,KAAK,MAAM,GAAGvB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,GAAGzB,MAAM,CAACwB,QAAQ,CAAC,OAAO,EAAEL,KAAK,CAACM,KAAK,CAAE;AAC7I;AACA,eAAeX,sBAAsB;AACrC,qBAAqBA,sBAAsB;AAC3C,wBAAyBK,KAAK,IAAMA,KAAK,CAACI,WAAW,KAAK,MAAM,GAAGvB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,GAAGN,KAAK,EAAEI,WAAW,KAAK,MAAM,GAAGvB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,GAAGzB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAE;AAC3O,aAAcN,KAAK,IAAMA,KAAK,EAAEI,WAAW,KAAK,MAAM,GAAGvB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,GAAGzB,MAAM,CAACwB,QAAQ,CAAC,OAAO,EAAEL,KAAK,CAACM,KAAK,CAAE;AAC7I;AACA;AACA;AACA;AACA,MAAON,KAAK,IAAMA,KAAK,CAACY,YAAY,IAAKZ,KAAK,CAACY,YAAY,KAAKC,SAAS,IAAIb,KAAK,CAACI,WAAW,KAAK,MAAO,GAAGrB,mBAAmB,GAAGD,WAAY;AAC/I;AACA;AACA;AACA;AACA;AACA,iBAAiBa,sBAAsB;AACvC,uBAAuBA,sBAAsB;AAC7C;AACA,wBAAyBK,KAAK,IAAMA,KAAK,CAACI,WAAW,KAAK,MAAM,GAAGvB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,GAAGzB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAE;AAC7J,aAAcN,KAAK,IAAMA,KAAK,CAACI,WAAW,KAAK,MAAM,GAAGvB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,GAAGzB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAE;AAClJ;AACA,CAAC;AAED,OAAO,MAAMQ,qBAAqB,GAAGvC,MAAM,CAACwB,mBAAmB,CAAC;AAChE,IAAIJ,sBAAsB;AAC1B,aAAcK,KAAK,IAAMA,KAAK,CAACI,WAAW,KAAK,MAAM,GAAGvB,MAAM,CAACwB,QAAQ,CAAC,SAAS,EAAEL,KAAK,CAACM,KAAK,CAAC,GAAGN,KAAK,EAAEI,WAAW,KAAK,MAAM,GAAGvB,MAAM,CAACwB,QAAQ,CAAC,OAAO,EAAEL,KAAK,CAACM,KAAK,CAAC,GAAGzB,MAAM,CAACwB,QAAQ,CAAC,SAAS,EAAEL,KAAK,CAACM,KAAK,CAAE;AAClN;AACA;AACA,cAAeN,KAAK,IAAMA,KAAK,CAACI,WAAW,KAAK,MAAM,GAAGvB,MAAM,CAACwB,QAAQ,CAAC,SAAS,EAAEL,KAAK,CAACM,KAAK,CAAC,GAAGzB,MAAM,CAACwB,QAAQ,CAAC,SAAS,EAAEL,KAAK,CAACM,KAAK,CAAE;AAC3I;AACA,kCAAmCN,KAAK,IAAMA,KAAK,CAACI,WAAW,KAAK,MAAM,GAAGvB,MAAM,CAACwB,QAAQ,CAAC,SAAS,EAAEL,KAAK,CAACM,KAAK,CAAC,GAAGN,KAAK,EAAEI,WAAW,KAAK,MAAM,GAAGvB,MAAM,CAACwB,QAAQ,CAAC,OAAO,EAAEL,KAAK,CAACM,KAAK,CAAC,GAAGzB,MAAM,CAACwB,QAAQ,CAAC,SAAS,EAAEL,KAAK,CAACM,KAAK,CAAE;AACvO;AACA,eAAgBN,KAAK,IAAMA,KAAK,CAACC,KAAK,KAAKjB,IAAI,CAACkB,KAAK,GAAG,WAAW,GAAGF,KAAK,CAACC,KAAK,KAAKjB,IAAI,CAACuB,KAAK,GAAG,SAAS,GAAG,UAAW;AAC1H;AACA;AACA,cAAcZ,sBAAsB;AACpC,oBAAoBA,sBAAsB;AAC1C,aAAcK,KAAK,IAAMA,KAAK,CAACI,WAAW,KAAK,MAAM,GAAGvB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,GAAGN,KAAK,EAAEI,WAAW,KAAK,MAAM,GAAGvB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,GAAGzB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAE;AAChO,kCAAmCN,KAAK,IAAMA,KAAK,CAACI,WAAW,KAAK,MAAM,GAAGvB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,GAAGN,KAAK,EAAEI,WAAW,KAAK,MAAM,GAAGvB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,GAAGzB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAE;AACrP;AACA;AACA;AACA;AACA;AACA,kBAAmBN,KAAK,IAAMA,KAAK,CAACI,WAAW,KAAK,MAAM,GAAGvB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,GAAGzB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAE;AACvJ;AACA;AACA;AACA;AACA,eAAeX,sBAAsB;AACrC,qBAAqBA,sBAAsB;AAC3C,aAAcK,KAAK,IAAMA,KAAK,CAACI,WAAW,KAAK,MAAM,GAAGvB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,GAAGN,KAAK,EAAEI,WAAW,KAAK,MAAM,GAAGvB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,GAAGzB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAE;AAChO,kCAAmCN,KAAK,IAAMA,KAAK,CAACI,WAAW,KAAK,MAAM,GAAGvB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,GAAGN,KAAK,EAAEI,WAAW,KAAK,MAAM,GAAGvB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,GAAGzB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAE;AACrP;AACA;AACA;AACA;AACA;AACA,kBAAmBN,KAAK,IAAMA,KAAK,CAACI,WAAW,KAAK,MAAM,GAAGvB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,GAAGN,KAAK,EAAEI,WAAW,KAAK,MAAM,GAAGvB,MAAM,CAACwB,QAAQ,CAAC,OAAO,EAAEL,KAAK,CAACM,KAAK,CAAC,GAAGzB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAE;AAC/N;AACA;AACA;AACA;AACA;AACA,iBAAiBX,sBAAsB;AACvC,uBAAuBA,sBAAsB;AAC7C;AACA,aAAcK,KAAK,IAAMA,KAAK,EAAEI,WAAW,KAAK,MAAM,GAAGvB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,GAAGzB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAE;AACnJ,kCAAmCN,KAAK,IAAMA,KAAK,EAAEI,WAAW,KAAK,MAAM,GAAGvB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,GAAGzB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAE;AACxK;AACA,CAAC;AAED,OAAO,MAAMS,oBAAoB,GAAGxC,MAAM,CAACwB,mBAAmB,CAAC;AAC/D,EAAEJ,sBAAsB;AACxB,aAAcK,KAAK,IAAMA,KAAK,CAACI,WAAW,KAAK,MAAM,GAAGvB,MAAM,CAACwB,QAAQ,CAAC,SAAS,EAAEL,KAAK,CAACM,KAAK,CAAC,GAAGN,KAAK,CAACI,WAAW,KAAK,MAAM,GAAGvB,MAAM,CAACwB,QAAQ,CAAC,OAAO,EAAEL,KAAK,CAACM,KAAK,CAAC,GAAGzB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAE;AACrN;AACA;AACA;AACA,cAAeN,KAAK,IAAMA,KAAK,CAACI,WAAW,KAAK,MAAM,GAAGvB,MAAM,CAACwB,QAAQ,CAAC,SAAS,EAAEL,KAAK,CAACM,KAAK,CAAC,GAAGN,KAAK,CAACI,WAAW,KAAK,MAAM,GAAGvB,MAAM,CAACwB,QAAQ,CAAC,OAAO,EAAEL,KAAK,CAACM,KAAK,CAAC,GAAGzB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAE;AACtN;AACA;AACA,eAAgBN,KAAK,IAAMA,KAAK,CAACC,KAAK,KAAKjB,IAAI,CAACkB,KAAK,GAAG,WAAW,GAAGF,KAAK,CAACC,KAAK,KAAKjB,IAAI,CAACuB,KAAK,GAAG,SAAS,GAAG,UAAW;AAC1H;AACA;AACA,cAAcZ,sBAAsB;AACpC,oBAAoBA,sBAAsB;AAC1C,wBAAyBK,KAAK,IAAMA,KAAK,CAACI,WAAW,KAAK,MAAM,GAAGvB,MAAM,CAACwB,QAAQ,CAAC,YAAY,EAAEL,KAAK,CAACM,KAAK,CAAC,GAAGN,KAAK,CAACI,WAAW,KAAK,MAAM,GAAGvB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,GAAGzB,MAAM,CAACwB,QAAQ,CAAC,YAAY,EAAEL,KAAK,CAACM,KAAK,CAAE;AACxO,aAAcN,KAAK,IAAMA,KAAK,CAACI,WAAW,KAAK,MAAM,GAAGvB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,GAAGN,KAAK,CAACI,WAAW,KAAK,MAAM,GAAGvB,MAAM,CAACwB,QAAQ,CAAC,OAAO,EAAEL,KAAK,CAACM,KAAK,CAAC,GAAGzB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAE;AACzN;AACA;AACA;AACA;AACA,kBAAmBN,KAAK,IAAMA,KAAK,CAACI,WAAW,KAAK,MAAM,GAAGvB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,GAAGN,KAAK,CAACI,WAAW,KAAK,MAAM,GAAGvB,MAAM,CAACwB,QAAQ,CAAC,OAAO,EAAEL,KAAK,CAACM,KAAK,CAAC,GAAGzB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAE;AAC9N;AACA;AACA;AACA;AACA,eAAeX,sBAAsB;AACrC,qBAAqBA,sBAAsB;AAC3C,wBAAyBK,KAAK,IAAMA,KAAK,CAACI,WAAW,KAAK,MAAM,GAAGvB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,GAAGN,KAAK,CAACI,WAAW,KAAK,MAAM,GAAGvB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,GAAGzB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAE;AAC1O,aAAcN,KAAK,IAAMA,KAAK,CAACI,WAAW,KAAK,MAAM,GAAGvB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,GAAGN,KAAK,CAACI,WAAW,KAAK,MAAM,GAAGvB,MAAM,CAACwB,QAAQ,CAAC,OAAO,EAAEL,KAAK,CAACM,KAAK,CAAC,GAAGzB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAE;AACzN;AACA;AACA;AACA;AACA,kBAAmBN,KAAK,IAAMA,KAAK,CAACI,WAAW,KAAK,MAAM,GAAGvB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,GAAGN,KAAK,CAACI,WAAW,KAAK,MAAM,GAAGvB,MAAM,CAACwB,QAAQ,CAAC,OAAO,EAAEL,KAAK,CAACM,KAAK,CAAC,GAAGzB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAE;AAC9N;AACA;AACA;AACA;AACA;AACA,iBAAiBX,sBAAsB;AACvC,uBAAuBA,sBAAsB;AAC7C;AACA,aAAaK,KAAK,IAAInB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC;AACjE;AACA;AACA,CAAC;AAED,OAAO,MAAMU,oBAAoB,GAAGzC,MAAM,CAACwB,mBAAmB,CAAC;AAC/D,IAAIJ,sBAAsB;AAC1B;AACA,wBAAwBK,KAAK,IAAInB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC;AAC5E;AACA,cAAcX,sBAAsB;AACpC,oBAAoBA,sBAAsB;AAC1C,wBAAwBK,KAAK,IAAInB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC;AAC5E;AACA,eAAeX,sBAAsB;AACrC,qBAAqBA,sBAAsB;AAC3C,wBAAwBK,KAAK,IAAInB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC;AAC5E;AACA;AACA,iBAAiBX,sBAAsB;AACvC,uBAAuBA,sBAAsB;AAC7C,wBAAwBK,KAAK,IAAInB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC;AAC5E,aAAaN,KAAK,IAAInB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC;AACjE;AACA,CAAC;AAED,OAAO,MAAMW,oBAAoB,GAAG1C,MAAM,CAACwB,mBAAmB,CAAC;AAC/D,IAAIJ,sBAAsB;AAC1B;AACA,wBAAwBK,KAAK,IAAInB,MAAM,CAACwB,QAAQ,CAAC,cAAc,EAAEL,KAAK,CAACM,KAAK,CAAC;AAC7E;AACA,cAAcX,sBAAsB;AACpC,oBAAoBA,sBAAsB;AAC1C,wBAAwBK,KAAK,IAAInB,MAAM,CAACwB,QAAQ,CAAC,cAAc,EAAEL,KAAK,CAACM,KAAK,CAAC;AAC7E;AACA,eAAeX,sBAAsB;AACrC,qBAAqBA,sBAAsB;AAC3C,wBAAwBK,KAAK,IAAInB,MAAM,CAACwB,QAAQ,CAAC,cAAc,EAAEL,KAAK,CAACM,KAAK,CAAC;AAC7E;AACA;AACA,iBAAiBX,sBAAsB;AACvC,uBAAuBA,sBAAsB;AAC7C,wBAAwBK,KAAK,IAAInB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC;AAC5E,aAAaN,KAAK,IAAInB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC;AACjE;AACA,CAAC;AAuBD;AACA;AACA;AACA,MAAMY,MAAM,gBAAG5C,KAAK,CAAC6C,UAAU,CAC7B,CAAAC,IAAA,EAA2KC,GAAG,KAAK;EAAA,IAAlL;MAAEC,QAAQ,GAAG,EAAE;MAAEC,OAAO,GAAG,SAAS;MAAEC,IAAI,GAAG,QAAQ;MAAEC,IAAI,GAAGzC,IAAI,CAAC0B,MAAM;MAAEgB,UAAU;MAAEC,WAAW;MAAUC,KAAK,GAAG,MAAM;MAAEC,MAAM;MAAEC,QAAQ;MAAErC,QAAQ;MAAEsC;IAAe,CAAC,GAAAX,IAAA;IAAPpB,KAAK,GAAAgC,wBAAA,CAAAZ,IAAA,EAAAa,SAAA;EACrK;EACA,MAAM;MAAEC;IAAwB,CAAC,GAAGlC,KAAK;IAArBmC,WAAW,GAAAH,wBAAA,CAAKhC,KAAK,EAAAoC,UAAA;EAEzC,MAAMC,aAAa,GAAGA,CAAA,kBACpB9C,KAAA,CAAAF,SAAA;IAAAiC,QAAA,GACGS,IAAI,iBAAI5C,IAAA;MAAMmD,SAAS,EAAE,CAAChB,QAAQ,GAAG,cAAc,GAAG,EAAE,KAAKY,OAAO,GAAG,cAAc,GAAG,MAAM,CAAE;MAAAZ,QAAA,EAAES;IAAI,CAAO,CAAC,EAC9GT,QAAQ,iBAAInC,IAAA;MAAMmD,SAAS,EAAEJ,OAAO,GAAG,eAAe,GAAG,OAAQ;MAAAZ,QAAA,EAAEA;IAAQ,CAAO,CAAC,EACnFY,OAAO,iBAAI/C,IAAA,CAACX,gBAAgB,IAAE,CAAC;EAAA,CAChC,CACH;EAED,IAAI+D,YAAY,GAAGxC,mBAAmB;EACtC,QAAQwB,OAAO;IACb,KAAK,WAAW;MACdgB,YAAY,GAAGzB,qBAAqB;MACpC;IACF,KAAK,UAAU;MACbyB,YAAY,GAAGxB,oBAAoB;MACnC;IACF,KAAK,UAAU;MACbwB,YAAY,GAAGvB,oBAAoB;MACnC;IACF,KAAK,UAAU;MACbuB,YAAY,GAAGtB,oBAAoB;MACnC;EACJ;EAEA,oBACE9B,IAAA,CAACoD,YAAY,EAAAC,aAAA,CAAAA,aAAA,KACPL,WAAW;IACflC,KAAK,EAAEwB,IAAK;IACZrB,WAAW,EAAEsB,UAAW;IACxBd,YAAY,EAAEe,WAAY;IAC1BN,GAAG,EAAEA,GAAI;IACTS,QAAQ,EAAEA,QAAS;IACnBnB,SAAS,EAAE,CAACW,QAAS;IACrBE,IAAI,EAAEA,IAAK;IACXhB,SAAS,EAAEf,QAAS;IACpBgB,MAAM,EAAEmB,KAAM;IACd,eAAaC,MAAO;IACpBS,SAAS,EAAEtC,KAAK,CAACkC,OAAO,GAAG,gBAAgB,GAAGlC,KAAK,CAACsC,SAAS,GAAG,GAAG,GAAGtC,KAAK,CAACsC,SAAU;IACtFG,WAAW,EAAExD,yBAA0B;IAAAqC,QAAA,eACvCnC,IAAA,CAACQ,sBAAsB;MAAA2B,QAAA,EAAEe,aAAa,CAAC;IAAC,CAAyB;EAAC,EACtD,CAAC;AAEnB,CACF,CAAC;AAACnB,MAAA,CAAAwB,SAAA;EAtEAnB,OAAO,EAAAoB,GAAA,CAAAC,KAAA,EAAG,SAAS,EAAG,WAAW,EAAG,UAAU,EAAG,UAAU,EAAG,UAAU;EAMxElB,UAAU,EAAAiB,GAAA,CAAAC,KAAA,EAAG,MAAM,EAAG,MAAM;EAE5BjB,WAAW,EAAAgB,GAAA,CAAAE,IAAA;EAEXjB,KAAK,EAAAe,GAAA,CAAAG,SAAA,EAAAH,GAAA,CAAAC,KAAA,EAAG,MAAM,IAAAD,GAAA,CAAAI,MAAA;EAEdb,OAAO,EAAAS,GAAA,CAAAE,IAAA;EAEPhB,MAAM,EAAAc,GAAA,CAAAI,MAAA;EAENhB,IAAI,EAAAY,GAAA,CAAAK;AAAA;AAwDN,eAAe9B,MAAM","ignoreList":[]}

package/dist/Button/DualFunctionButton.cjs

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
 var _Button = _interopRequireWildcard(require("./Button"));
@@ -21,12 +20,28 @@ var _common = require("../common");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children", "variant", "type", "size", "width", "testId", "disabled", "id", "dropdownMenuValues", "setDropdownMenuValues", "dropdownCustomizationProps"],
   _excluded2 = ["loading", "icon", "onClick"];
-var _templateObject;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-const DualButtonsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n\n  button:first-child {\n    margin-right: 2px;\n  }\n\n  ", " {\n    min-width: unset;\n    gap: 0px;\n    padding: ", ";\n  }\n\n  .extraMargin {\n    margin-bottom: 4px;\n  }\n"])), _Button.ButtonContentContainer, props => props.$size == _types.Size.Large ? '4px 18px' : props.$size == _types.Size.Medium ? '4px 14px' : '4px 10px');
+const DualButtonsContainer = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+
+  button:first-child {
+    margin-right: 2px;
+  }
+
+  ${_Button.ButtonContentContainer} {
+    min-width: unset;
+    gap: 0px;
+    padding: ${props => props.$size == _types.Size.Large ? '4px 18px' : props.$size == _types.Size.Medium ? '4px 14px' : '4px 10px'};
+  }
+
+  .extraMargin {
+    margin-bottom: 4px;
+  }
+`;
 const DualFunctionButton = _ref => {
   let {
       children = 'Primary Button',
@@ -86,7 +101,7 @@ const DualFunctionButton = _ref => {
         customizationProps: dropdownCustomizationProps,
         filter: "",
         ref: dropdownContentRef,
-        selectedValues: dropdownCustomizationProps.itemsType == 'normal' ? [] : dropdownMenuValues !== null && dropdownMenuValues !== void 0 ? dropdownMenuValues : selectedValues,
+        selectedValues: dropdownCustomizationProps.itemsType == 'normal' ? [] : dropdownMenuValues ?? selectedValues,
         setSelectedValues: setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues,
         isButton: true,
         setIsOpen: setIsOpen,

package/dist/Button/DualFunctionButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DualFunctionButton.cjs","names":["React","_interopRequireWildcard","require","_Button","_icons","_CommonStyling","_nanoid","_types","_DropdownContent","_interopRequireDefault","_styledComponents","_common","_jsxRuntime","_excluded","_excluded2","_templateObject","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","DualButtonsContainer","styled","div","_taggedTemplateLiteral2","ButtonContentContainer","props","$size","Size","Large","Medium","DualFunctionButton","_ref","children","variant","type","size","width","testId","disabled","id","dropdownMenuValues","setDropdownMenuValues","dropdownCustomizationProps","_objectWithoutProperties2","loading","icon","onClick","renderProps","isOpen","setIsOpen","useState","activeDescendant","setActiveDescendant","focused","setFocused","keyboardNavigated","setKeyboardNavigated","dropdownContainerRef","useRef","selectedValues","setSelectedValues","dropdownContentRef","dropdownButtonRef","useClickOutsideRef","useFocusOutsideRef","dropdownContentId","nanoid","useEffect","jsxs","DropdownContainer","ref","$isButton","$readOnly","$disabled","margin","jsx","flatEdge","containerRef","customizationProps","itemsType","isButton","Small","onActiveDescendantChanged","outline","messageOnNoResults","alignLeft","ariaRolesType","onKeyPress","key","className","role","stopPropagation","SystemIcons","ArrowDropUp","ArrowDropDown","propTypes","_propTypes","arrayOf","string","func","_default","exports"],"sources":["../../src/Button/DualFunctionButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport Button, { ButtonContentContainer, ButtonProps } from './Button';\r\nimport { SystemIcons } from '../icons';\r\nimport { DropdownContainer } from '../Dropdown/CommonStyling';\r\nimport { nanoid } from 'nanoid';\r\nimport { Size } from '../types';\r\nimport DropdownContent, { DropdownCustomizationProps } from '../Dropdown/DropdownContent';\r\nimport styled from 'styled-components';\r\nimport { useClickOutsideRef, useFocusOutsideRef } from '../common';\r\n\r\nconst DualButtonsContainer = styled.div<{ $size?: Size }>`\r\n  display: flex;\r\n  align-items: center;\r\n\r\n  button:first-child {\r\n    margin-right: 2px;\r\n  }\r\n\r\n  ${ButtonContentContainer} {\r\n    min-width: unset;\r\n    gap: 0px;\r\n    padding: ${(props) => (props.$size == Size.Large ? '4px 18px' : props.$size == Size.Medium ? '4px 14px' : '4px 10px')};\r\n  }\r\n\r\n  .extraMargin {\r\n    margin-bottom: 4px;\r\n  }\r\n`;\r\n\r\nexport interface ButtonOption {\r\n  label: string;\r\n}\r\n\r\nexport interface DualButtonProps extends ButtonProps {\r\n  /**\r\n  * Required. An object containing customization properties for the dropdown.\r\n  */\r\n  dropdownCustomizationProps: DropdownCustomizationProps;\r\n  /**\r\n  * Optional. An array of strings representing the values in the dropdown menu.\r\n  */\r\n  dropdownMenuValues?: string[];\r\n  /**\r\n   * Optional. A function to be called when the values in the dropdown menu change.\r\n   * It should return void, a boolean, or undefined.\r\n   */\r\n  setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\r\n}\r\n\r\nconst DualFunctionButton: React.FunctionComponent<DualButtonProps> = ({\r\n  children = 'Primary Button',\r\n  variant = 'primary',\r\n  type = 'button',\r\n  size = Size.Medium,\r\n  width: width = 'auto',\r\n  testId,\r\n  disabled,\r\n  id,\r\n  dropdownMenuValues,\r\n  setDropdownMenuValues,\r\n  dropdownCustomizationProps,\r\n  ...props\r\n}) => {\r\n  // Let's filter out properties that we don't need to render.\r\n  const { loading, icon, onClick, ...renderProps } = props;\r\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\r\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\r\n  const [focused, setFocused] = React.useState<number | null>(null);\r\n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\r\n  const dropdownContainerRef = React.useRef<HTMLDivElement>(null);\r\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\r\n\r\n  const dropdownContentRef = React.useRef<HTMLDivElement>(null);\r\n  const dropdownButtonRef = useClickOutsideRef(\r\n    () => setIsOpen(false),\r\n    [dropdownContainerRef],\r\n    useFocusOutsideRef(() => setIsOpen(false), [dropdownContentRef]),\r\n  );\r\n  \r\n  const dropdownContentId = id ? id + '_dropdownContent' : nanoid();\r\n\r\n  React.useEffect(() => {\r\n    !isOpen && setKeyboardNavigated(false);\r\n  }, [isOpen]);\r\n\r\n  return (\r\n    <DualButtonsContainer $size={size}>\r\n      <DropdownContainer ref={dropdownContainerRef} $isButton={true} $readOnly={false} $disabled={false} margin=\"\">\r\n        <Button {...renderProps} testId={testId} onClick={onClick} disabled={disabled} type={type} loading={loading} icon={icon} size={size} width={width} variant={variant} flatEdge=\"right\">\r\n          {children}\r\n        </Button>\r\n        <DropdownContent\r\n          containerRef={dropdownContainerRef}\r\n          customizationProps={dropdownCustomizationProps}\r\n          filter=\"\"\r\n          ref={dropdownContentRef}\r\n          selectedValues={dropdownCustomizationProps.itemsType == 'normal' ? [] : dropdownMenuValues ?? selectedValues}\r\n          setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\r\n          isButton={true}\r\n          setIsOpen={setIsOpen}\r\n          focused={focused}\r\n          width={size == Size.Small ? '280px' : '360px'}\r\n          onActiveDescendantChanged={(e) => setActiveDescendant(e)}\r\n          setFocused={setFocused}\r\n          size={size}\r\n          outline={keyboardNavigated}\r\n          isOpen={isOpen}\r\n          id={dropdownContentId}\r\n          messageOnNoResults=\"\"\r\n          alignLeft={true}\r\n          ariaRolesType=\"menu\"\r\n        />\r\n      </DropdownContainer>\r\n      <Button\r\n        variant={variant}\r\n        {...renderProps}\r\n        onKeyPress={(e: any) => {\r\n          if (isOpen) return;\r\n\r\n          if (e.key === 'Enter' || e.key === ' ') {\r\n            setFocused(0);\r\n            setKeyboardNavigated(true);\r\n          }\r\n        }}\r\n        className=\"extraMargin\"\r\n        testId={'options_toggleBtn'}\r\n        ref={dropdownButtonRef}\r\n        aria-activedescendant={activeDescendant}\r\n        role=\"button\"\r\n        aria-controls={dropdownContentId}\r\n        disabled={disabled}\r\n        type={type}\r\n        size={size}\r\n        onClick={(e) => {\r\n          e.stopPropagation();\r\n          setIsOpen(!isOpen);\r\n        }}\r\n        icon={ isOpen ? <SystemIcons.ArrowDropUp aria-hidden=\"true\" size=\"16px\" /> \r\n        : <SystemIcons.ArrowDropDown aria-hidden=\"true\" size=\"16px\" /> }\r\n        flatEdge=\"left\"\r\n      />\r\n    </DualButtonsContainer>\r\n  );\r\n};\r\n\r\nexport default DualFunctionButton;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"DualFunctionButton.cjs","names":["React","_interopRequireWildcard","require","_Button","_icons","_CommonStyling","_nanoid","_types","_DropdownContent","_interopRequireDefault","_styledComponents","_common","_jsxRuntime","_excluded","_excluded2","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","DualButtonsContainer","styled","div","ButtonContentContainer","props","$size","Size","Large","Medium","DualFunctionButton","_ref","children","variant","type","size","width","testId","disabled","id","dropdownMenuValues","setDropdownMenuValues","dropdownCustomizationProps","_objectWithoutProperties2","loading","icon","onClick","renderProps","isOpen","setIsOpen","useState","activeDescendant","setActiveDescendant","focused","setFocused","keyboardNavigated","setKeyboardNavigated","dropdownContainerRef","useRef","selectedValues","setSelectedValues","dropdownContentRef","dropdownButtonRef","useClickOutsideRef","useFocusOutsideRef","dropdownContentId","nanoid","useEffect","jsxs","DropdownContainer","ref","$isButton","$readOnly","$disabled","margin","jsx","flatEdge","containerRef","customizationProps","itemsType","isButton","Small","onActiveDescendantChanged","outline","messageOnNoResults","alignLeft","ariaRolesType","onKeyPress","key","className","role","stopPropagation","SystemIcons","ArrowDropUp","ArrowDropDown","propTypes","_propTypes","arrayOf","string","func","_default","exports"],"sources":["../../src/Button/DualFunctionButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport Button, { ButtonContentContainer, ButtonProps } from './Button';\r\nimport { SystemIcons } from '../icons';\r\nimport { DropdownContainer } from '../Dropdown/CommonStyling';\r\nimport { nanoid } from 'nanoid';\r\nimport { Size } from '../types';\r\nimport DropdownContent, { DropdownCustomizationProps } from '../Dropdown/DropdownContent';\r\nimport styled from 'styled-components';\r\nimport { useClickOutsideRef, useFocusOutsideRef } from '../common';\r\n\r\nconst DualButtonsContainer = styled.div<{ $size?: Size }>`\r\n  display: flex;\r\n  align-items: center;\r\n\r\n  button:first-child {\r\n    margin-right: 2px;\r\n  }\r\n\r\n  ${ButtonContentContainer} {\r\n    min-width: unset;\r\n    gap: 0px;\r\n    padding: ${(props) => (props.$size == Size.Large ? '4px 18px' : props.$size == Size.Medium ? '4px 14px' : '4px 10px')};\r\n  }\r\n\r\n  .extraMargin {\r\n    margin-bottom: 4px;\r\n  }\r\n`;\r\n\r\nexport interface ButtonOption {\r\n  label: string;\r\n}\r\n\r\nexport interface DualButtonProps extends ButtonProps {\r\n  /**\r\n  * Required. An object containing customization properties for the dropdown.\r\n  */\r\n  dropdownCustomizationProps: DropdownCustomizationProps;\r\n  /**\r\n  * Optional. An array of strings representing the values in the dropdown menu.\r\n  */\r\n  dropdownMenuValues?: string[];\r\n  /**\r\n   * Optional. A function to be called when the values in the dropdown menu change.\r\n   * It should return void, a boolean, or undefined.\r\n   */\r\n  setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\r\n}\r\n\r\nconst DualFunctionButton: React.FunctionComponent<DualButtonProps> = ({\r\n  children = 'Primary Button',\r\n  variant = 'primary',\r\n  type = 'button',\r\n  size = Size.Medium,\r\n  width: width = 'auto',\r\n  testId,\r\n  disabled,\r\n  id,\r\n  dropdownMenuValues,\r\n  setDropdownMenuValues,\r\n  dropdownCustomizationProps,\r\n  ...props\r\n}) => {\r\n  // Let's filter out properties that we don't need to render.\r\n  const { loading, icon, onClick, ...renderProps } = props;\r\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\r\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\r\n  const [focused, setFocused] = React.useState<number | null>(null);\r\n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\r\n  const dropdownContainerRef = React.useRef<HTMLDivElement>(null);\r\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\r\n\r\n  const dropdownContentRef = React.useRef<HTMLDivElement>(null);\r\n  const dropdownButtonRef = useClickOutsideRef(\r\n    () => setIsOpen(false),\r\n    [dropdownContainerRef],\r\n    useFocusOutsideRef(() => setIsOpen(false), [dropdownContentRef]),\r\n  );\r\n  \r\n  const dropdownContentId = id ? id + '_dropdownContent' : nanoid();\r\n\r\n  React.useEffect(() => {\r\n    !isOpen && setKeyboardNavigated(false);\r\n  }, [isOpen]);\r\n\r\n  return (\r\n    <DualButtonsContainer $size={size}>\r\n      <DropdownContainer ref={dropdownContainerRef} $isButton={true} $readOnly={false} $disabled={false} margin=\"\">\r\n        <Button {...renderProps} testId={testId} onClick={onClick} disabled={disabled} type={type} loading={loading} icon={icon} size={size} width={width} variant={variant} flatEdge=\"right\">\r\n          {children}\r\n        </Button>\r\n        <DropdownContent\r\n          containerRef={dropdownContainerRef}\r\n          customizationProps={dropdownCustomizationProps}\r\n          filter=\"\"\r\n          ref={dropdownContentRef}\r\n          selectedValues={dropdownCustomizationProps.itemsType == 'normal' ? [] : dropdownMenuValues ?? selectedValues}\r\n          setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\r\n          isButton={true}\r\n          setIsOpen={setIsOpen}\r\n          focused={focused}\r\n          width={size == Size.Small ? '280px' : '360px'}\r\n          onActiveDescendantChanged={(e) => setActiveDescendant(e)}\r\n          setFocused={setFocused}\r\n          size={size}\r\n          outline={keyboardNavigated}\r\n          isOpen={isOpen}\r\n          id={dropdownContentId}\r\n          messageOnNoResults=\"\"\r\n          alignLeft={true}\r\n          ariaRolesType=\"menu\"\r\n        />\r\n      </DropdownContainer>\r\n      <Button\r\n        variant={variant}\r\n        {...renderProps}\r\n        onKeyPress={(e: any) => {\r\n          if (isOpen) return;\r\n\r\n          if (e.key === 'Enter' || e.key === ' ') {\r\n            setFocused(0);\r\n            setKeyboardNavigated(true);\r\n          }\r\n        }}\r\n        className=\"extraMargin\"\r\n        testId={'options_toggleBtn'}\r\n        ref={dropdownButtonRef}\r\n        aria-activedescendant={activeDescendant}\r\n        role=\"button\"\r\n        aria-controls={dropdownContentId}\r\n        disabled={disabled}\r\n        type={type}\r\n        size={size}\r\n        onClick={(e) => {\r\n          e.stopPropagation();\r\n          setIsOpen(!isOpen);\r\n        }}\r\n        icon={ isOpen ? <SystemIcons.ArrowDropUp aria-hidden=\"true\" size=\"16px\" /> \r\n        : <SystemIcons.ArrowDropDown aria-hidden=\"true\" size=\"16px\" /> }\r\n        flatEdge=\"left\"\r\n      />\r\n    </DualButtonsContainer>\r\n  );\r\n};\r\n\r\nexport default DualFunctionButton;\r\n"],"mappings":"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","ignoreList":[]}