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

package/dist/Button/Button.js

@@ -1,197 +1,87 @@
-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);
+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);
 /**
  * Button component
- */
-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
+ */
+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;

package/dist/Button/DualFunctionButton.d.ts

@@ -5,8 +5,18 @@ export interface ButtonOption {
     label: string;
 }
 export interface DualButtonProps extends ButtonProps {
+    /**
+    * Required. An object containing customization properties for the dropdown.
+    */
     dropdownCustomizationProps: DropdownCustomizationProps;
+    /**
+    * Optional. An array of strings representing the values in the dropdown menu.
+    */
     dropdownMenuValues?: string[];
+    /**
+     * Optional. A function to be called when the values in the dropdown menu change.
+     * It should return void, a boolean, or undefined.
+     */
     setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;
 }
 declare const DualFunctionButton: React.FunctionComponent<DualButtonProps>;

package/dist/Button/DualFunctionButton.js

@@ -1,160 +1,71 @@
-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
+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;