@laerdal/life-react-components 3.5.1-dev.12 → 3.5.1-dev.14

package/dist/Button/Button.js

@@ -1,87 +1,197 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import * as React from 'react';
-import styled from 'styled-components';
-import { LoadingIndicator } from '../LoadingIndicator';
-import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles';
-import { COLORS, focusStyles, invertedFocusStyles } from '../styles';
-import { Size } from '../types';
-import { defaultOnMouseDownHandler } from '../common';
-var getBorderRadius = function (flatEdge, radius) {
-    switch (flatEdge) {
-        case 'left':
-            return "0px ".concat(radius, "px ").concat(radius, "px 0px");
-        case 'right':
-            return "".concat(radius, "px 0px 0px ").concat(radius, "px");
-        case 'none':
-        default:
-            return "".concat(radius, "px");
-    }
-};
-export var ButtonContentContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  min-width: 64px;\n"], ["\n  min-width: 64px;\n"])));
-export var ButtonPrimaryStyled = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\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"], ["\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"])), function (props) { return (props.size === Size.Large ? '56px' : '48px'); }, ButtonContentContainer, function (props) {
-    return props.size === Size.Large
-        ? ComponentLStyling(ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_800 : COLORS.white)
-        : props.size === Size.Small
-            ? ComponentSStyling(ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_800 : COLORS.white)
-            : ComponentMStyling(ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_800 : COLORS.white);
-}, function (props) { return (props.colorTheme === 'teal' ? COLORS.accent1 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.white : COLORS.primary); }, function (props) { return getBorderRadius(props.flatEdge, 8); }, function (props) { return props.width; }, function (props) { return (props.size === Size.Large ? '56px' : props.size === Size.Small ? '32px' : '40px'); }, function (props) { return (props.size === Size.Large ? '14px 16px' : props.size === Size.Small ? '6px 8px' : '8px 12px'); }, function (props) { return (props.size === Size.Medium ? props.iconOnly ? '-2px -8px' : '' : (props.size === Size.Small ? props.iconOnly ? '-2px -6px' : '' : '')); }, function (props) { return (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px'); }, function (props) { return (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px'); }, function (props) { return (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px'); }, function (props) { return (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px'); }, function (props) { return (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px'); }, function (props) { return (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px'); }, function (props) { return (props.colorTheme === 'dark' ? COLORS.primary : COLORS.white); }, ButtonContentContainer, ButtonContentContainer, function (props) { return (props.colorTheme === 'teal' ? COLORS.accent1_700 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_100 : COLORS.primary_700); }, function (props) { return ((props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_600 : COLORS.white); }, ButtonContentContainer, ButtonContentContainer, function (props) { return (props.colorTheme === 'teal' ? COLORS.accent1_800 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_200 : COLORS.primary_800); }, function (props) { return ((props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_800 : COLORS.white); }, function (props) { return (props.invertFocus || (props.invertFocus === undefined && props.colorTheme === 'dark') ? invertedFocusStyles : focusStyles); }, ButtonContentContainer, ButtonContentContainer, function (props) { return (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100); }, function (props) { return (props.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.neutral_300); });
-export var ButtonSecondaryStyled = styled(ButtonPrimaryStyled)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\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"], ["\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, function (props) { return (props.colorTheme === 'teal' ? COLORS.accent1 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.white : COLORS.primary); }, function (props) { return (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary); }, function (props) { return (props.colorTheme === 'teal' ? COLORS.accent1 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.white : COLORS.primary); }, function (props) { return (props.size === Size.Large ? '12px 16px' : props.size === Size.Small ? '4px 8px' : '6px 12px'); }, ButtonContentContainer, ButtonContentContainer, function (props) { return (props.colorTheme === 'teal' ? COLORS.accent1_700 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_200 : COLORS.primary_700); }, function (props) { return (props.colorTheme === 'teal' ? COLORS.accent1_700 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_200 : COLORS.primary_700); }, function (props) { return (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700); }, ButtonContentContainer, ButtonContentContainer, function (props) { return (props.colorTheme === 'teal' ? COLORS.accent1_800 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_300 : COLORS.primary_800); }, function (props) { return (props.colorTheme === 'teal' ? COLORS.accent1_800 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_300 : COLORS.primary_800); }, function (props) { return (props.colorTheme === 'teal' ? COLORS.accent1_800 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.white : COLORS.primary_800); }, ButtonContentContainer, ButtonContentContainer, function (props) { return ((props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_700 : COLORS.neutral_300); }, function (props) { return ((props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_700 : COLORS.neutral_100); });
-export var ButtonTertiaryStyled = styled(ButtonPrimaryStyled)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\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"], ["\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, function (props) { return (props.colorTheme === 'teal' ? COLORS.accent1 : props.colorTheme === 'dark' ? COLORS.white : COLORS.primary_500); }, function (props) { return (props.colorTheme === 'teal' ? COLORS.accent1 : props.colorTheme === 'dark' ? COLORS.white : COLORS.primary_500); }, function (props) { return (props.size === Size.Large ? '12px 16px' : props.size === Size.Small ? '4px 8px' : '6px 12px'); }, ButtonContentContainer, ButtonContentContainer, function (props) { return (props.colorTheme === 'teal' ? COLORS.accent1_20 : props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.primary_20); }, function (props) { return (props.colorTheme === 'teal' ? COLORS.accent1_700 : props.colorTheme === 'dark' ? COLORS.white : COLORS.primary_700); }, function (props) { return (props.colorTheme === 'teal' ? COLORS.accent1_700 : props.colorTheme === 'dark' ? COLORS.white : COLORS.primary_700); }, ButtonContentContainer, ButtonContentContainer, function (props) { return (props.colorTheme === 'teal' ? COLORS.accent1_100 : props.colorTheme === 'dark' ? COLORS.primary_600 : COLORS.primary_100); }, function (props) { return (props.colorTheme === 'teal' ? COLORS.accent1_800 : props.colorTheme === 'dark' ? COLORS.white : COLORS.primary_800); }, function (props) { return (props.colorTheme === 'teal' ? COLORS.accent1_800 : props.colorTheme === 'dark' ? COLORS.white : COLORS.primary_800); }, ButtonContentContainer, ButtonContentContainer, COLORS.primary_700);
-export var ButtonPositiveStyled = styled(ButtonPrimaryStyled)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\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"], ["\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, COLORS.correct_500, ButtonContentContainer, ButtonContentContainer, COLORS.correct_700, ButtonContentContainer, ButtonContentContainer, COLORS.correct_800, ButtonContentContainer, ButtonContentContainer, COLORS.neutral_100, COLORS.neutral_300);
-export var ButtonCriticalStyled = styled(ButtonPrimaryStyled)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\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"], ["\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, COLORS.critical_500, ButtonContentContainer, ButtonContentContainer, COLORS.critical_700, ButtonContentContainer, ButtonContentContainer, COLORS.critical_800, ButtonContentContainer, ButtonContentContainer, COLORS.neutral_100, COLORS.neutral_300);
+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";
+var _excluded = ["children", "variant", "type", "size", "width", "testId", "disabled", "flatEdge", "icon"],
+  _excluded2 = ["loading"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+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';
+import styled from 'styled-components';
+import { LoadingIndicator } from '../LoadingIndicator';
+import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles';
+import { COLORS, focusStyles, invertedFocusStyles } from '../styles';
+import { Size } from '../types';
+import { defaultOnMouseDownHandler } from '../common';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var getBorderRadius = function getBorderRadius(flatEdge, radius) {
+  switch (flatEdge) {
+    case 'left':
+      return "0px ".concat(radius, "px ").concat(radius, "px 0px");
+    case 'right':
+      return "".concat(radius, "px 0px 0px ").concat(radius, "px");
+    case 'none':
+    default:
+      return "".concat(radius, "px");
+  }
+};
+export var ButtonContentContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-width: 64px;\n"])));
+export var ButtonPrimaryStyled = styled.button(_templateObject2 || (_templateObject2 = _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"])), function (props) {
+  return props.size === Size.Large ? '56px' : '48px';
+}, ButtonContentContainer, function (props) {
+  return props.size === Size.Large ? ComponentLStyling(ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_800 : COLORS.white) : props.size === Size.Small ? ComponentSStyling(ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_800 : COLORS.white) : ComponentMStyling(ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_800 : COLORS.white);
+}, function (props) {
+  return props.colorTheme === 'teal' ? COLORS.accent1 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.white : COLORS.primary;
+}, function (props) {
+  return getBorderRadius(props.flatEdge, 8);
+}, function (props) {
+  return props.width;
+}, function (props) {
+  return props.size === Size.Large ? '56px' : props.size === Size.Small ? '32px' : '40px';
+}, function (props) {
+  return props.size === Size.Large ? '14px 16px' : props.size === Size.Small ? '6px 8px' : '8px 12px';
+}, function (props) {
+  return props.size === Size.Medium ? props.iconOnly ? '-2px -8px' : '' : props.size === Size.Small ? props.iconOnly ? '-2px -6px' : '' : '';
+}, function (props) {
+  return props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px';
+}, function (props) {
+  return props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px';
+}, function (props) {
+  return props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px';
+}, function (props) {
+  return props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px';
+}, function (props) {
+  return props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px';
+}, function (props) {
+  return props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px';
+}, function (props) {
+  return props.colorTheme === 'dark' ? COLORS.primary : COLORS.white;
+}, ButtonContentContainer, ButtonContentContainer, function (props) {
+  return props.colorTheme === 'teal' ? COLORS.accent1_700 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_100 : COLORS.primary_700;
+}, function (props) {
+  return (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_600 : COLORS.white;
+}, ButtonContentContainer, ButtonContentContainer, function (props) {
+  return props.colorTheme === 'teal' ? COLORS.accent1_800 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_200 : COLORS.primary_800;
+}, function (props) {
+  return (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_800 : COLORS.white;
+}, function (props) {
+  return props.invertFocus || props.invertFocus === undefined && props.colorTheme === 'dark' ? invertedFocusStyles : focusStyles;
+}, ButtonContentContainer, ButtonContentContainer, function (props) {
+  return props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100;
+}, function (props) {
+  return props.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.neutral_300;
+});
+export var ButtonSecondaryStyled = styled(ButtonPrimaryStyled)(_templateObject3 || (_templateObject3 = _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, function (props) {
+  return props.colorTheme === 'teal' ? COLORS.accent1 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.white : COLORS.primary;
+}, function (props) {
+  return props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary;
+}, function (props) {
+  return props.colorTheme === 'teal' ? COLORS.accent1 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.white : COLORS.primary;
+}, function (props) {
+  return props.size === Size.Large ? '12px 16px' : props.size === Size.Small ? '4px 8px' : '6px 12px';
+}, ButtonContentContainer, ButtonContentContainer, function (props) {
+  return props.colorTheme === 'teal' ? COLORS.accent1_700 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_200 : COLORS.primary_700;
+}, function (props) {
+  return props.colorTheme === 'teal' ? COLORS.accent1_700 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_200 : COLORS.primary_700;
+}, function (props) {
+  return props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700;
+}, ButtonContentContainer, ButtonContentContainer, function (props) {
+  return props.colorTheme === 'teal' ? COLORS.accent1_800 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_300 : COLORS.primary_800;
+}, function (props) {
+  return props.colorTheme === 'teal' ? COLORS.accent1_800 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_300 : COLORS.primary_800;
+}, function (props) {
+  return props.colorTheme === 'teal' ? COLORS.accent1_800 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.white : COLORS.primary_800;
+}, ButtonContentContainer, ButtonContentContainer, function (props) {
+  return (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_700 : COLORS.neutral_300;
+}, function (props) {
+  return (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_700 : COLORS.neutral_100;
+});
+export var ButtonTertiaryStyled = styled(ButtonPrimaryStyled)(_templateObject4 || (_templateObject4 = _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, function (props) {
+  return props.colorTheme === 'teal' ? COLORS.accent1 : props.colorTheme === 'dark' ? COLORS.white : COLORS.primary_500;
+}, function (props) {
+  return props.colorTheme === 'teal' ? COLORS.accent1 : props.colorTheme === 'dark' ? COLORS.white : COLORS.primary_500;
+}, function (props) {
+  return props.size === Size.Large ? '12px 16px' : props.size === Size.Small ? '4px 8px' : '6px 12px';
+}, ButtonContentContainer, ButtonContentContainer, function (props) {
+  return props.colorTheme === 'teal' ? COLORS.accent1_20 : props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.primary_20;
+}, function (props) {
+  return props.colorTheme === 'teal' ? COLORS.accent1_700 : props.colorTheme === 'dark' ? COLORS.white : COLORS.primary_700;
+}, function (props) {
+  return props.colorTheme === 'teal' ? COLORS.accent1_700 : props.colorTheme === 'dark' ? COLORS.white : COLORS.primary_700;
+}, ButtonContentContainer, ButtonContentContainer, function (props) {
+  return props.colorTheme === 'teal' ? COLORS.accent1_100 : props.colorTheme === 'dark' ? COLORS.primary_600 : COLORS.primary_100;
+}, function (props) {
+  return props.colorTheme === 'teal' ? COLORS.accent1_800 : props.colorTheme === 'dark' ? COLORS.white : COLORS.primary_800;
+}, function (props) {
+  return props.colorTheme === 'teal' ? COLORS.accent1_800 : props.colorTheme === 'dark' ? COLORS.white : COLORS.primary_800;
+}, ButtonContentContainer, ButtonContentContainer, COLORS.primary_700);
+export var ButtonPositiveStyled = styled(ButtonPrimaryStyled)(_templateObject5 || (_templateObject5 = _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, COLORS.correct_500, ButtonContentContainer, ButtonContentContainer, COLORS.correct_700, ButtonContentContainer, ButtonContentContainer, COLORS.correct_800, ButtonContentContainer, ButtonContentContainer, COLORS.neutral_100, COLORS.neutral_300);
+export var ButtonCriticalStyled = 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, COLORS.critical_500, ButtonContentContainer, ButtonContentContainer, COLORS.critical_700, ButtonContentContainer, ButtonContentContainer, COLORS.critical_800, ButtonContentContainer, ButtonContentContainer, COLORS.neutral_100, COLORS.neutral_300);
 /**
  * Button component
- */
-var Button = React.forwardRef(function (_a, ref) {
-    var _b = _a.children, children = _b === void 0 ? '' : _b, _c = _a.variant, variant = _c === void 0 ? 'primary' : _c, _d = _a.type, type = _d === void 0 ? 'button' : _d, _e = _a.size, size = _e === void 0 ? Size.Medium : _e, _f = _a.width, width = _f === void 0 ? 'auto' : _f, testId = _a.testId, disabled = _a.disabled, flatEdge = _a.flatEdge, icon = _a.icon, props = __rest(_a, ["children", "variant", "type", "size", "width", "testId", "disabled", "flatEdge", "icon"]);
-    // Let's filter out properties that we don't need to render.
-    var loading = props.loading, renderProps = __rest(props, ["loading"]);
-    var renderContent = function () { return (React.createElement(React.Fragment, null,
-        icon && React.createElement("span", { className: (children ? 'extramargin ' : '') + (loading ? 'icon loading' : 'icon') }, icon),
-        children && React.createElement("span", { className: loading ? 'label loading' : 'label' }, children),
-        loading && React.createElement(LoadingIndicator, null))); };
-    var ButtonStyled = ButtonPrimaryStyled;
-    switch (variant) {
-        case 'secondary':
-            ButtonStyled = ButtonSecondaryStyled;
-            break;
-        case 'tertiary':
-            ButtonStyled = ButtonTertiaryStyled;
-            break;
-        case 'positive':
-            ButtonStyled = ButtonPositiveStyled;
-            break;
-        case 'critical':
-            ButtonStyled = ButtonCriticalStyled;
-            break;
-    }
-    return (React.createElement(ButtonStyled, __assign({}, renderProps, { ref: ref, disabled: disabled, iconOnly: !children, type: type, size: size, flatEdge: flatEdge, width: width, "data-testid": testId, className: props.loading ? 'loading-state ' + props.className : ' ' + props.className, onMouseDown: defaultOnMouseDownHandler }),
-        React.createElement(ButtonContentContainer, null, renderContent())));
-});
-export default Button;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+ */
+var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _ref$children = _ref.children,
+    children = _ref$children === void 0 ? '' : _ref$children,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'button' : _ref$type,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? Size.Medium : _ref$size,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? 'auto' : _ref$width,
+    testId = _ref.testId,
+    disabled = _ref.disabled,
+    flatEdge = _ref.flatEdge,
+    icon = _ref.icon,
+    props = _objectWithoutProperties(_ref, _excluded);
+  // Let's filter out properties that we don't need to render.
+  var loading = props.loading,
+    renderProps = _objectWithoutProperties(props, _excluded2);
+  var renderContent = function renderContent() {
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [icon && /*#__PURE__*/_jsx("span", {
+        className: (children ? 'extramargin ' : '') + (loading ? 'icon loading' : 'icon'),
+        children: icon
+      }), children && /*#__PURE__*/_jsx("span", {
+        className: loading ? 'label loading' : 'label',
+        children: children
+      }), loading && /*#__PURE__*/_jsx(LoadingIndicator, {})]
+    });
+  };
+  var ButtonStyled = ButtonPrimaryStyled;
+  switch (variant) {
+    case 'secondary':
+      ButtonStyled = ButtonSecondaryStyled;
+      break;
+    case 'tertiary':
+      ButtonStyled = ButtonTertiaryStyled;
+      break;
+    case 'positive':
+      ButtonStyled = ButtonPositiveStyled;
+      break;
+    case 'critical':
+      ButtonStyled = ButtonCriticalStyled;
+      break;
+  }
+  return /*#__PURE__*/_jsx(ButtonStyled, _objectSpread(_objectSpread({}, renderProps), {}, {
+    ref: ref,
+    disabled: disabled,
+    iconOnly: !children,
+    type: type,
+    size: size,
+    flatEdge: flatEdge,
+    width: width,
+    "data-testid": testId,
+    className: props.loading ? 'loading-state ' + props.className : ' ' + props.className,
+    onMouseDown: defaultOnMouseDownHandler,
+    children: /*#__PURE__*/_jsx(ButtonContentContainer, {
+      children: renderContent()
+    })
+  }));
+});
+Button.propTypes = {
+  variant: _pt.oneOf(['primary', 'secondary', 'tertiary', 'positive', 'critical']),
+  colorTheme: _pt.oneOf(['teal', 'dark']),
+  invertFocus: _pt.bool,
+  width: _pt.oneOfType([_pt.oneOf(['auto']), _pt.string]),
+  loading: _pt.bool,
+  testId: _pt.string,
+  icon: _pt.node
+};
+export default Button;
+//# sourceMappingURL=Button.js.map

package/dist/Button/DualFunctionButton.js

@@ -1,71 +1,160 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import * as React from 'react';
-import Button, { ButtonContentContainer } from './Button';
-import { SystemIcons } from '../icons';
-import { DropdownContainer } from '../Dropdown/CommonStyling';
-import { nanoid } from 'nanoid';
-import { Size } from '../types';
-import DropdownContent from '../Dropdown/DropdownContent';
-import styled from 'styled-components';
-import { useClickOutsideRef, useFocusOutsideRef } from '../common';
-var DualButtonsContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\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"], ["\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"])), ButtonContentContainer, function (props) { return (props.size == Size.Large ? '4px 18px' : props.size == Size.Medium ? '4px 14px' : '4px 10px'); });
-var DualFunctionButton = function (_a) {
-    var _b = _a.children, children = _b === void 0 ? 'Primary Button' : _b, _c = _a.variant, variant = _c === void 0 ? 'primary' : _c, _d = _a.type, type = _d === void 0 ? 'button' : _d, _e = _a.size, size = _e === void 0 ? Size.Medium : _e, _f = _a.width, width = _f === void 0 ? 'auto' : _f, testId = _a.testId, disabled = _a.disabled, id = _a.id, dropdownMenuValues = _a.dropdownMenuValues, setDropdownMenuValues = _a.setDropdownMenuValues, dropdownCustomizationProps = _a.dropdownCustomizationProps, props = __rest(_a, ["children", "variant", "type", "size", "width", "testId", "disabled", "id", "dropdownMenuValues", "setDropdownMenuValues", "dropdownCustomizationProps"]);
-    // Let's filter out properties that we don't need to render.
-    var loading = props.loading, icon = props.icon, onClick = props.onClick, renderProps = __rest(props, ["loading", "icon", "onClick"]);
-    var _g = React.useState(false), isOpen = _g[0], setIsOpen = _g[1];
-    var _h = React.useState(), activeDescendant = _h[0], setActiveDescendant = _h[1];
-    var _j = React.useState(null), focused = _j[0], setFocused = _j[1];
-    var _k = React.useState(false), keyboardNavigated = _k[0], setKeyboardNavigated = _k[1];
-    var dropdownContainerRef = React.useRef(null);
-    var _l = React.useState([]), selectedValues = _l[0], setSelectedValues = _l[1];
-    var dropdownContentRef = React.useRef(null);
-    var dropdownButtonRef = useClickOutsideRef(function () { return setIsOpen(false); }, [dropdownContainerRef], useFocusOutsideRef(function () { return setIsOpen(false); }, [dropdownContentRef]));
-    var dropdownContentId = id ? id + '_dropdownContent' : nanoid();
-    React.useEffect(function () {
-        !isOpen && setKeyboardNavigated(false);
-    }, [isOpen]);
-    return (React.createElement(DualButtonsContainer, { ref: dropdownContainerRef, size: size },
-        React.createElement(DropdownContainer, { isButton: true, readOnly: false, disabled: false, margin: "" },
-            React.createElement(Button, __assign({}, renderProps, { testId: testId, onClick: onClick, disabled: disabled, type: type, loading: loading, icon: icon, size: size, width: width, variant: variant, flatEdge: "right" }), children),
-            React.createElement(DropdownContent, { containerRef: dropdownContainerRef, customizationProps: dropdownCustomizationProps, filter: "", ref: dropdownContentRef, selectedValues: dropdownCustomizationProps.itemsType == 'normal' ? [] : dropdownMenuValues !== null && dropdownMenuValues !== void 0 ? dropdownMenuValues : selectedValues, setSelectedValues: setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues, isButton: true, setIsOpen: setIsOpen, focused: focused, onActiveDescendantChanged: function (e) { return setActiveDescendant(e); }, setFocused: setFocused, size: size, outline: keyboardNavigated, isOpen: isOpen, id: dropdownContentId, messageOnNoResults: "", alignLeft: true, ariaRolesType: "menu" })),
-        React.createElement(Button, __assign({ variant: variant }, renderProps, { onKeyPress: function (e) {
-                if (isOpen)
-                    return;
-                if (e.key === 'Enter' || e.key === ' ') {
-                    setFocused(0);
-                    setKeyboardNavigated(true);
-                }
-            }, className: "extraMargin", testId: 'options_toggleBtn', ref: dropdownButtonRef, "aria-activedescendant": activeDescendant, role: "button", "aria-controls": dropdownContentId, disabled: disabled, type: type, size: size, onClick: function (e) {
-                e.stopPropagation();
-                setIsOpen(!isOpen);
-            }, icon: isOpen ? React.createElement(SystemIcons.ArrowDropUp, { "aria-hidden": "true", size: "16px" })
-                : React.createElement(SystemIcons.ArrowDropDown, { "aria-hidden": "true", size: "16px" }), flatEdge: "left" }))));
-};
-export default DualFunctionButton;
-var templateObject_1;
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+var _excluded = ["children", "variant", "type", "size", "width", "testId", "disabled", "id", "dropdownMenuValues", "setDropdownMenuValues", "dropdownCustomizationProps"],
+  _excluded2 = ["loading", "icon", "onClick"];
+var _templateObject;
+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';
+import Button, { ButtonContentContainer } from './Button';
+import { SystemIcons } from '../icons';
+import { DropdownContainer } from '../Dropdown/CommonStyling';
+import { nanoid } from 'nanoid';
+import { Size } from '../types';
+import DropdownContent from '../Dropdown/DropdownContent';
+import styled from 'styled-components';
+import { useClickOutsideRef, useFocusOutsideRef } from '../common';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var DualButtonsContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), ButtonContentContainer, function (props) {
+  return props.size == Size.Large ? '4px 18px' : props.size == Size.Medium ? '4px 14px' : '4px 10px';
+});
+var DualFunctionButton = function DualFunctionButton(_ref) {
+  var _ref$children = _ref.children,
+    children = _ref$children === void 0 ? 'Primary Button' : _ref$children,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'button' : _ref$type,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? Size.Medium : _ref$size,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? 'auto' : _ref$width,
+    testId = _ref.testId,
+    disabled = _ref.disabled,
+    id = _ref.id,
+    dropdownMenuValues = _ref.dropdownMenuValues,
+    setDropdownMenuValues = _ref.setDropdownMenuValues,
+    dropdownCustomizationProps = _ref.dropdownCustomizationProps,
+    props = _objectWithoutProperties(_ref, _excluded);
+  // Let's filter out properties that we don't need to render.
+  var loading = props.loading,
+    icon = props.icon,
+    onClick = props.onClick,
+    renderProps = _objectWithoutProperties(props, _excluded2);
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isOpen = _React$useState2[0],
+    setIsOpen = _React$useState2[1];
+  var _React$useState3 = React.useState(),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    activeDescendant = _React$useState4[0],
+    setActiveDescendant = _React$useState4[1];
+  var _React$useState5 = React.useState(null),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    focused = _React$useState6[0],
+    setFocused = _React$useState6[1];
+  var _React$useState7 = React.useState(false),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    keyboardNavigated = _React$useState8[0],
+    setKeyboardNavigated = _React$useState8[1];
+  var dropdownContainerRef = React.useRef(null);
+  var _React$useState9 = React.useState([]),
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    selectedValues = _React$useState10[0],
+    setSelectedValues = _React$useState10[1];
+  var dropdownContentRef = React.useRef(null);
+  var dropdownButtonRef = useClickOutsideRef(function () {
+    return setIsOpen(false);
+  }, [dropdownContainerRef], useFocusOutsideRef(function () {
+    return setIsOpen(false);
+  }, [dropdownContentRef]));
+  var dropdownContentId = id ? id + '_dropdownContent' : nanoid();
+  React.useEffect(function () {
+    !isOpen && setKeyboardNavigated(false);
+  }, [isOpen]);
+  return /*#__PURE__*/_jsxs(DualButtonsContainer, {
+    ref: dropdownContainerRef,
+    size: size,
+    children: [/*#__PURE__*/_jsxs(DropdownContainer, {
+      isButton: true,
+      readOnly: false,
+      disabled: false,
+      margin: "",
+      children: [/*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({}, renderProps), {}, {
+        testId: testId,
+        onClick: onClick,
+        disabled: disabled,
+        type: type,
+        loading: loading,
+        icon: icon,
+        size: size,
+        width: width,
+        variant: variant,
+        flatEdge: "right",
+        children: children
+      })), /*#__PURE__*/_jsx(DropdownContent, {
+        containerRef: dropdownContainerRef,
+        customizationProps: dropdownCustomizationProps,
+        filter: "",
+        ref: dropdownContentRef,
+        selectedValues: dropdownCustomizationProps.itemsType == 'normal' ? [] : dropdownMenuValues !== null && dropdownMenuValues !== void 0 ? dropdownMenuValues : selectedValues,
+        setSelectedValues: setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues,
+        isButton: true,
+        setIsOpen: setIsOpen,
+        focused: focused,
+        onActiveDescendantChanged: function onActiveDescendantChanged(e) {
+          return setActiveDescendant(e);
+        },
+        setFocused: setFocused,
+        size: size,
+        outline: keyboardNavigated,
+        isOpen: isOpen,
+        id: dropdownContentId,
+        messageOnNoResults: "",
+        alignLeft: true,
+        ariaRolesType: "menu"
+      })]
+    }), /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
+      variant: variant
+    }, renderProps), {}, {
+      onKeyPress: function onKeyPress(e) {
+        if (isOpen) return;
+        if (e.key === 'Enter' || e.key === ' ') {
+          setFocused(0);
+          setKeyboardNavigated(true);
+        }
+      },
+      className: "extraMargin",
+      testId: 'options_toggleBtn',
+      ref: dropdownButtonRef,
+      "aria-activedescendant": activeDescendant,
+      role: "button",
+      "aria-controls": dropdownContentId,
+      disabled: disabled,
+      type: type,
+      size: size,
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        setIsOpen(!isOpen);
+      },
+      icon: isOpen ? /*#__PURE__*/_jsx(SystemIcons.ArrowDropUp, {
+        "aria-hidden": "true",
+        size: "16px"
+      }) : /*#__PURE__*/_jsx(SystemIcons.ArrowDropDown, {
+        "aria-hidden": "true",
+        size: "16px"
+      }),
+      flatEdge: "left"
+    }))]
+  });
+};
+DualFunctionButton.propTypes = {
+  dropdownMenuValues: _pt.arrayOf(_pt.string),
+  setDropdownMenuValues: _pt.func
+};
+export default DualFunctionButton;
+//# sourceMappingURL=DualFunctionButton.js.map