@laerdal/life-react-components 3.5.1-dev.17 → 3.5.1-dev.18

package/dist/src/Button/BackButton.js

@@ -1,45 +0,0 @@
-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 { COLORS, focusStyles } from '../styles';
-import { Size } from '../types';
-import { SystemIcons } from '../icons';
-import { ComponentTextStyle, ComponentSStyling, ComponentXSStyling } from '../styles';
-import { defaultOnMouseDownHandler } from '../common';
-export var BackButtonContentContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
-var BackButtonContainerStyles = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  min-height: 48px;\n  padding: 0;\n  margin: 0;\n  outline:none;\n  max-width: max-content;\n  display: flex;\n  align-items: center;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n\n  ", ";\n  font-feature-settings: 'liga' off;\n\n  & > ", " {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-start;\n    max-width: max-content;\n    padding: 4px 4px 4px 0;\n    border-radius: 4px;\n    cursor: inherit;\n    min-width: 64px;\n\n  }\n\n  & > ", " > span {\n    display: flex;\n    cursor: inherit;\n  }\n  & > ", " > label {\n    display: flex;\n    cursor: inherit;\n    flex-grow: 1;\n    justify-content: center;\n  }\n\n  &:hover > ", ",\n  &.hover-state > ", " {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:focus > ", ",\n  &.focus-state > ", " {\n    ", "\n  }\n  &:active > ", ",\n  &.active-state > ", " {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:disabled > ", " {\n    color: ", " !important;\n    background-color: transparent !important;\n  }\n"], ["\n  box-sizing: border-box;\n  min-height: 48px;\n  padding: 0;\n  margin: 0;\n  outline:none;\n  max-width: max-content;\n  display: flex;\n  align-items: center;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n\n  ", ";\n  font-feature-settings: 'liga' off;\n\n  & > ", " {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-start;\n    max-width: max-content;\n    padding: 4px 4px 4px 0;\n    border-radius: 4px;\n    cursor: inherit;\n    min-width: 64px;\n\n  }\n\n  & > ", " > span {\n    display: flex;\n    cursor: inherit;\n  }\n  & > ", " > label {\n    display: flex;\n    cursor: inherit;\n    flex-grow: 1;\n    justify-content: center;\n  }\n\n  &:hover > ", ",\n  &.hover-state > ", " {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:focus > ", ",\n  &.focus-state > ", " {\n    ", "\n  }\n  &:active > ", ",\n  &.active-state > ", " {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:disabled > ", " {\n    color: ", " !important;\n    background-color: transparent !important;\n  }\n"])), function (props) { return (props.size === Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600) : ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)); }, BackButtonContentContainer, BackButtonContentContainer, BackButtonContentContainer, BackButtonContentContainer, BackButtonContentContainer, COLORS.primary_20, COLORS.primary_700, BackButtonContentContainer, BackButtonContentContainer, focusStyles, BackButtonContentContainer, BackButtonContentContainer, COLORS.primary_100, COLORS.primary_800, BackButtonContentContainer, COLORS.neutral_300);
-var BackButton = function (_a) {
-    var children = _a.children, _b = _a.size, size = _b === void 0 ? Size.Small : _b, dataTestId = _a.dataTestId, props = __rest(_a, ["children", "size", "dataTestId"]);
-    return (React.createElement(BackButtonContainerStyles, __assign({}, props, { size: size, onMouseDown: defaultOnMouseDownHandler, dataTestId: dataTestId }),
-        React.createElement(BackButtonContentContainer, null,
-            React.createElement("span", { "aria-hidden": "true" },
-                React.createElement(SystemIcons.ArrowLineLeft, { size: size === Size.XSmall ? '20' : '24' })),
-            React.createElement("label", null, children))));
-};
-export default BackButton;
-var templateObject_1, templateObject_2;

package/dist/src/Button/Button.d.ts

@@ -1,43 +0,0 @@
-import * as React from 'react';
-import { Size } from '../types';
-export declare const ButtonContentContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ButtonPrimaryStyled: import("styled-components").StyledComponent<"button", any, ButtonProps & {
-    iconOnly: boolean;
-}, never>;
-export declare const ButtonSecondaryStyled: import("styled-components").StyledComponent<"button", any, ButtonProps & {
-    iconOnly: boolean;
-}, never>;
-export declare const ButtonTertiaryStyled: import("styled-components").StyledComponent<"button", any, ButtonProps & {
-    iconOnly: boolean;
-}, never>;
-export declare const ButtonPositiveStyled: import("styled-components").StyledComponent<"button", any, ButtonProps & {
-    iconOnly: boolean;
-}, never>;
-export declare const ButtonCriticalStyled: import("styled-components").StyledComponent<"button", any, ButtonProps & {
-    iconOnly: boolean;
-}, never>;
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    /** Look and feel variant of the component. Defaults to 'primary'. */
-    variant?: 'primary' | 'secondary' | 'tertiary' | 'positive' | 'critical';
-    /** Can be used in order to remove rounded corners on right or left edge of the button. Used by 'DualFunctionButton'. Defaults to 'undefined' */
-    flatEdge?: 'right' | 'left' | 'none' | undefined;
-    /** Size of the component. Small, Medium or Large. Defaults to 'medium' */
-    size?: Size.Small | Size.Medium | Size.Large;
-    /** Color theme altering of the component. By default there is no altering applied. */
-    colorTheme?: 'teal' | 'dark';
-    /** Allows using inverted colors for outlining focus rect. Shown when component focused by keyboard. */
-    invertFocus?: boolean;
-    /** Can be used to set custom value for width style. Value is set for 'ButtonContent' container. */
-    width?: 'auto' | string;
-    /** If set, then 'opacity' of children container will be set to 0, and loading indicator will be shown.  */
-    loading?: boolean;
-    /** TestId. Will be set to the top level button component. */
-    testId?: string;
-    /** Icon that will be shown on the left of the children. */
-    icon?: React.ReactNode;
-}
-/**
- * Button component
- */
-declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
-export default Button;

package/dist/src/Button/Button.js

@@ -1,87 +0,0 @@
-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 = 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/src/Button/DualFunctionButton.d.ts

@@ -1,23 +0,0 @@
-import * as React from 'react';
-import { ButtonProps } from './Button';
-import { DropdownCustomizationProps } from '../Dropdown/DropdownContent';
-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>;
-export default DualFunctionButton;

package/dist/src/Button/DualFunctionButton.js

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

package/dist/src/Button/Iconbutton.d.ts

@@ -1,46 +0,0 @@
-import React from 'react';
-import { Testable } from '../types';
-import { TooltipProps } from "../Tooltips/TooltipTypes";
-export interface HeaderItemProps {
-    inMobileMenu?: boolean;
-    useTransparentBackground?: boolean;
-    iconColor?: string;
-    unsetIconSize?: boolean;
-    borderRadius?: number;
-    shape?: string;
-    flatEdge?: string;
-    invertFocus?: boolean;
-    shouldNotInteract?: boolean;
-}
-export declare const IconButtonContentStyles: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const IconButtonStyled: import("styled-components").StyledComponent<"button", any, HeaderItemProps, never>;
-export declare const IconButtonStyledPrimary: import("styled-components").StyledComponent<"button", any, HeaderItemProps, never>;
-export declare const IconButtonStyledSecondary: import("styled-components").StyledComponent<"button", any, HeaderItemProps, never>;
-export interface IconButtonProps extends Testable, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onMouseDown'> {
-    /** Variant of the button. Defaults to 'primary' */
-    variant?: 'primary' | 'secondary';
-    /** Shape of the button. Defaults to 'square' */
-    shape?: 'square' | 'circular';
-    /** Action that will get executed when button is clicked. */
-    action: (event?: React.MouseEvent<HTMLButtonElement>) => void;
-    /** Allows removing rounded corners on one of the edges of the button. */
-    flatEdge?: 'right' | 'left' | 'none' | undefined;
-    /** If set background filling color of the button will be transparent. */
-    useTransparentBackground?: boolean;
-    /** Custom fill color for SVG icon. */
-    iconColor?: string;
-    /** If set then the width and height of SVG icon will be set to 'unset', otherwise will be set to '24px' */
-    unsetIconSize?: boolean;
-    /** Sets border radius of the button.  */
-    borderRadius?: number;
-    /** Content (icon) to show in the button. */
-    children?: React.ReactNode;
-    /** Invert color scheme of focus framing. */
-    invertFocus?: boolean;
-    /** If this flag is set, then blurs current focus, as a result will focus current IconButton when user clicks it. */
-    focusOnClick?: boolean;
-    /** Details of the tooltip to show. */
-    tooltip?: Omit<TooltipProps, 'tabIndex'>;
-}
-export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
-export default IconButton;

package/dist/src/Button/Iconbutton.js

@@ -1,70 +0,0 @@
-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 React from 'react';
-import styled from 'styled-components';
-import { COLORS, focusStyles, invertedFocusStyles } from '../styles';
-import { defaultOnMouseDownHandler } from '../common';
-import TooltipWrapper from "../Tooltips/TooltipWrapper";
-var getBorderRadius = function (props) { return (props.borderRadius ? "".concat(props.borderRadius, "px") : '4px'); };
-var getBorderRadiusStyle = function (props) {
-    var radius = getBorderRadius(props);
-    switch (props.flatEdge) {
-        case 'left':
-            return "0px ".concat(radius, " ").concat(radius, " 0px");
-        case 'right':
-            return "".concat(radius, " 0px 0px ").concat(radius);
-        case 'none':
-        default:
-            return "".concat(radius);
-    }
-};
-export var IconButtonContentStyles = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
-export var IconButtonStyled = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n  position: relative;\n  display: block;\n\n  border-radius: ", ";\n  ", " {\n    height: 36px;\n    width: 36px;\n    border-radius: ", ";\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ", ";\n      width: ", ";\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:focus {\n    ", "\n  }\n"], ["\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n  position: relative;\n  display: block;\n\n  border-radius: ", ";\n  ", " {\n    height: 36px;\n    width: 36px;\n    border-radius: ", ";\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ", ";\n      width: ", ";\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:focus {\n    ", "\n  }\n"])), function (props) { return (props.borderRadius ? "".concat(props.borderRadius, "px") : '4px'); }, IconButtonContentStyles, getBorderRadiusStyle, function (props) { return (props.unsetIconSize ? 'unset' : '24px'); }, function (props) { return (props.unsetIconSize ? 'unset' : '24px'); }, function (props) { return (props.invertFocus ? invertedFocusStyles : focusStyles); });
-export var IconButtonStyledPrimary = styled(IconButtonStyled)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", " {\n    background-color: ", ";\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n  }\n  &:hover:not(:disabled),\n  &.hover-state {\n    ", " {\n      background-color: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ", " {\n      background: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n  &:disabled {\n    ", " {\n      background-color: ", ";\n    }\n    svg {\n      path {\n        fill: ", ";\n      }\n      fill: ", ";\n    }\n  }\n"], ["\n  ", " {\n    background-color: ", ";\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n  }\n  &:hover:not(:disabled),\n  &.hover-state {\n    ", " {\n      background-color: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ", " {\n      background: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n  &:disabled {\n    ", " {\n      background-color: ", ";\n    }\n    svg {\n      path {\n        fill: ", ";\n      }\n      fill: ", ";\n    }\n  }\n"])), IconButtonContentStyles, function (props) { return (props.useTransparentBackground ? 'transparent' : COLORS.primary_500); }, function (props) { return props.iconColor || COLORS.white; }, function (props) { return props.iconColor || COLORS.white; }, IconButtonContentStyles, COLORS.primary_700, IconButtonContentStyles, IconButtonContentStyles, COLORS.white, IconButtonContentStyles, COLORS.primary_800, IconButtonContentStyles, IconButtonContentStyles, COLORS.white, IconButtonContentStyles, COLORS.neutral_200, COLORS.white, COLORS.white);
-export var IconButtonStyledSecondary = styled(IconButtonStyled)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", " {\n    background-color: ", ";\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n  }\n\n\n  &:hover:not(:disabled) {\n    ", " {\n      background-color: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ", " {\n      background: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n\n  &:disabled {\n    ", " {\n      background-color: ", ";\n    }\n    svg {\n      path {\n        fill: ", ";\n      }\n      fill: ", ";\n    }\n  }\n"], ["\n  ", " {\n    background-color: ", ";\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n  }\n\n\n  &:hover:not(:disabled) {\n    ", " {\n      background-color: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ", " {\n      background: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n\n  &:disabled {\n    ", " {\n      background-color: ", ";\n    }\n    svg {\n      path {\n        fill: ", ";\n      }\n      fill: ", ";\n    }\n  }\n"])), IconButtonContentStyles, function (props) { return (props.useTransparentBackground ? 'transparent' : COLORS.white); }, function (props) { return props.iconColor || COLORS.neutral_600; }, function (props) { return props.iconColor || COLORS.neutral_600; }, IconButtonContentStyles, COLORS.primary_20, IconButtonContentStyles, IconButtonContentStyles, COLORS.primary_700, IconButtonContentStyles, COLORS.primary_100, IconButtonContentStyles, IconButtonContentStyles, COLORS.primary_800, IconButtonContentStyles, function (props) { return (props.useTransparentBackground ? 'transparent' : COLORS.white); }, COLORS.neutral_300, COLORS.neutral_300);
-export var IconButton = React.forwardRef(function (_a, ref) {
-    var id = _a.id, variant = _a.variant, shape = _a.shape, action = _a.action, children = _a.children, useTransparentBackground = _a.useTransparentBackground, disabled = _a.disabled, iconColor = _a.iconColor, unsetIconSize = _a.unsetIconSize, tabIndex = _a.tabIndex, flatEdge = _a.flatEdge, borderRadius = _a.borderRadius, type = _a.type, hidden = _a.hidden, invertFocus = _a.invertFocus, dataTestId = _a.dataTestId, focusOnClick = _a.focusOnClick, tooltip = _a.tooltip, rest = __rest(_a, ["id", "variant", "shape", "action", "children", "useTransparentBackground", "disabled", "iconColor", "unsetIconSize", "tabIndex", "flatEdge", "borderRadius", "type", "hidden", "invertFocus", "dataTestId", "focusOnClick", "tooltip"]);
-    var render = function () {
-        // Let's render button
-        var ButtonVariant = IconButtonStyledPrimary;
-        switch (variant) {
-            case 'secondary':
-                ButtonVariant = IconButtonStyledSecondary;
-                break;
-        }
-        return React.createElement(ButtonVariant, __assign({ id: id, type: type !== null && type !== void 0 ? type : 'button', "data-testid": dataTestId, flatEdge: flatEdge, ref: ref, onClick: function (event) {
-                event.stopPropagation();
-                action(event);
-            }, disabled: disabled, useTransparentBackground: useTransparentBackground, iconColor: iconColor, unsetIconSize: unsetIconSize, tabIndex: tabIndex, borderRadius: borderRadius || shape === 'circular' ? 18 : 0, onMouseDown: !focusOnClick ? defaultOnMouseDownHandler : undefined, hidden: hidden, invertFocus: invertFocus }, rest),
-            React.createElement(IconButtonContentStyles, null, children));
-    };
-    return !tooltip
-        ? render()
-        : (React.createElement(TooltipWrapper, __assign({}, tooltip), render()));
-});
-export default IconButton;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/src/Button/index.d.ts

@@ -1,8 +0,0 @@
-export { default as IconButton } from './Iconbutton';
-export * from './Iconbutton';
-export { default as Button } from './Button';
-export * from './Button';
-export { default as BackButton } from './BackButton';
-export * from './BackButton';
-export { default as DualFunctionButton } from './DualFunctionButton';
-export * from './DualFunctionButton';

package/dist/src/Button/index.js

@@ -1,8 +0,0 @@
-export { default as IconButton } from './Iconbutton';
-export * from './Iconbutton';
-export { default as Button } from './Button';
-export * from './Button';
-export { default as BackButton } from './BackButton';
-export * from './BackButton';
-export { default as DualFunctionButton } from './DualFunctionButton';
-export * from './DualFunctionButton';

package/dist/src/Card/HorizontalCard/HorizontalCard.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-import { HorizontalCardProps } from './types';
-export declare const HorizontalCardContentContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const HorizontalCardContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const HorizontalCard: React.FunctionComponent<HorizontalCardProps>;
-export default HorizontalCard;

package/dist/src/Card/HorizontalCard/HorizontalCard.js

@@ -1,55 +0,0 @@
-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 React from 'react';
-import styled from 'styled-components';
-import { BOXSHADOWS, COLORS, focusStyles } from '../../styles';
-import { HorizontalCardThumbnail } from './HorizontalCardThumbnail';
-import { HorizontalCardBody } from './HorizontalCardBody';
-import { HorizontalCardActions } from './HorizontalCardActions';
-import { defaultOnMouseDownHandler, useActionWithin } from '../../common';
-export var HorizontalCardContentContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n  align-items: center;\n  background-color: ", ";\n  border-radius: 8px;\n"], ["\n  position: relative;\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n  align-items: center;\n  background-color: ", ";\n  border-radius: 8px;\n"])), COLORS.white);
-export var HorizontalCardContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex: 1;\n\n  &.outline {\n    ", " {\n      box-shadow: inset 0 0 0 1px ", ";\n    }\n  }\n\n  &.elevated {\n    ", " {\n      box-shadow: ", ";\n    }\n  }\n\n  &.clickable {\n    cursor: pointer;\n\n    &:hover:not(.action-within):not(.disabled) {\n      &.outline {\n        ", " {\n          background-color: ", ";\n        }\n      }\n\n      &.elevated {\n        ", " {\n          box-shadow: ", ";\n        }\n      }\n    }\n\n    &:active:not(.action-within):not(.disabled) {\n      &.outline {\n        ", " {\n          background-color: ", ";\n        }\n      }\n\n      &.elevated {\n        ", " {\n          box-shadow: ", ";\n        }\n      }\n    }\n\n    &:focus {\n      ", "\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    &.elevated {\n      ", " {\n        box-shadow: ", ";\n      }\n    }\n\n    &.outline {\n      ", " {\n        box-shadow: inset 0 0 0 1px ", ";\n      }\n    }\n  }\n"], ["\n  display: flex;\n  flex: 1;\n\n  &.outline {\n    ", " {\n      box-shadow: inset 0 0 0 1px ", ";\n    }\n  }\n\n  &.elevated {\n    ", " {\n      box-shadow: ", ";\n    }\n  }\n\n  &.clickable {\n    cursor: pointer;\n\n    &:hover:not(.action-within):not(.disabled) {\n      &.outline {\n        ", " {\n          background-color: ", ";\n        }\n      }\n\n      &.elevated {\n        ", " {\n          box-shadow: ", ";\n        }\n      }\n    }\n\n    &:active:not(.action-within):not(.disabled) {\n      &.outline {\n        ", " {\n          background-color: ", ";\n        }\n      }\n\n      &.elevated {\n        ", " {\n          box-shadow: ", ";\n        }\n      }\n    }\n\n    &:focus {\n      ", "\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    &.elevated {\n      ", " {\n        box-shadow: ", ";\n      }\n    }\n\n    &.outline {\n      ", " {\n        box-shadow: inset 0 0 0 1px ", ";\n      }\n    }\n  }\n"])), HorizontalCardContentContainer, COLORS.neutral_200, HorizontalCardContentContainer, BOXSHADOWS.BOXSHADOW_L1, HorizontalCardContentContainer, COLORS.primary_20, HorizontalCardContentContainer, BOXSHADOWS.BOXSHADOW_L3, HorizontalCardContentContainer, COLORS.primary_100, HorizontalCardContentContainer, BOXSHADOWS.BOXSHADOW_L2, focusStyles, HorizontalCardContentContainer, BOXSHADOWS.BOXSHADOW_L1, HorizontalCardContentContainer, COLORS.neutral_100);
-export var HorizontalCard = function (_a) {
-    var title = _a.title, description = _a.description, tags = _a.tags, progress = _a.progress, icon = _a.icon, _b = _a.variant, variant = _b === void 0 ? 'outline' : _b, image = _a.image, action = _a.action, actions = _a.actions, disabled = _a.disabled, className = _a.className, dataTestId = _a.dataTestId, rest = __rest(_a, ["title", "description", "tags", "progress", "icon", "variant", "image", "action", "actions", "disabled", "className", "dataTestId"]);
-    var _c = React.useState([]), actionsRefs = _c[0], setActionsRefs = _c[1];
-    var containerRef = React.useRef(null);
-    useActionWithin(containerRef, actionsRefs);
-    var cls = "".concat(variant, " ").concat(action ? 'clickable' : '', " ").concat(disabled ? 'disabled' : '', " ").concat(className || '');
-    var handleClick = function () {
-        !disabled && action && action();
-    };
-    var handleButtonPress = function (e) {
-        e.key === 'Enter' && handleClick();
-    };
-    return (React.createElement(HorizontalCardContainer, { ref: containerRef, tabIndex: action && !disabled ? 0 : -1, className: cls, onKeyDown: handleButtonPress, onClick: handleClick, onMouseDown: defaultOnMouseDownHandler },
-        React.createElement(HorizontalCardContentContainer, __assign({ onMouseDown: defaultOnMouseDownHandler, "data-testid": dataTestId }, rest),
-            React.createElement(HorizontalCardThumbnail, { image: image, icon: icon }),
-            React.createElement(HorizontalCardBody, { title: title, description: description, tags: tags, progress: progress }),
-            React.createElement(HorizontalCardActions, { ref: function (instance) { return setActionsRefs(instance !== null && instance !== void 0 ? instance : []); }, actions: actions, disabled: disabled }))));
-};
-export default HorizontalCard;
-var templateObject_1, templateObject_2;

package/dist/src/Card/HorizontalCard/HorizontalCardActions.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import { HorizontalCardProps } from './types';
-declare type Props = Pick<HorizontalCardProps, 'actions' | 'disabled'>;
-export declare const HorizontalCardActions: React.ForwardRefExoticComponent<Props & React.RefAttributes<React.RefObject<HTMLButtonElement>[]>>;
-export {};

package/dist/src/Card/HorizontalCard/HorizontalCardActions.js

@@ -1,39 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import React from 'react';
-import { IconButton } from '../../Button';
-import { ToggleButton } from '../../Toggles';
-import { DropdownButton } from '../../Dropdown';
-import styled from 'styled-components';
-var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-export var HorizontalCardActions = React.forwardRef(function (_a, ref) {
-    var actions = _a.actions, disabled = _a.disabled;
-    var _b = React.useState([]), elRefs = _b[0], setElRefs = _b[1];
-    var length = (actions === null || actions === void 0 ? void 0 : actions.length) || 0;
-    React.useEffect(function () {
-        setElRefs(Array(length || 0).fill(null).map(function () { return React.createRef(); }));
-    }, [length]);
-    React.useImperativeHandle(ref, function () { return elRefs; }, [elRefs]);
-    var renderAction = function (item, index) {
-        var _a, _b, _c;
-        switch (item.componentType) {
-            case 'custom': {
-                return item.content;
-            }
-            case 'icon': {
-                return React.createElement(IconButton, { ref: elRefs[index], key: index, variant: 'secondary', useTransparentBackground: true, shape: 'circular', action: item.action, tooltip: item.tooltip, disabled: (_a = item.disabled) !== null && _a !== void 0 ? _a : disabled }, item.icon);
-            }
-            case 'toggle': {
-                return React.createElement(ToggleButton, { ref: elRefs[index], key: index, active: item.active, onChange: item.onChange, defaultState: item.defaultState, activeState: item.activeState, disabled: (_b = item.disabled) !== null && _b !== void 0 ? _b : disabled });
-            }
-            case 'dropdown': {
-                return React.createElement(DropdownButton, { ref: elRefs[index], key: index, type: 'icon', items: item.items, itemsType: item.itemsType, onClick: item.onClick, icon: item.icon, action: item.action, actionIcon: item.actionIcon, actionLabel: item.actionLabel, actionVariant: item.actionVariant, actionLoading: item.actionLoading, multiSelect: item.multiSelect, scrollable: item.scrollable, pinTopItem: item.pinTopItem, maxHeight: item.maxHeight, disabled: (_c = item.disabled) !== null && _c !== void 0 ? _c : disabled });
-            }
-        }
-    };
-    return (React.createElement(React.Fragment, null, (actions === null || actions === void 0 ? void 0 : actions.length) &&
-        React.createElement(Container, null, actions === null || actions === void 0 ? void 0 : actions.map(function (item, index) { return renderAction(item, index); }))));
-});
-var templateObject_1;

package/dist/src/Card/HorizontalCard/HorizontalCardBody.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { HorizontalCardProps } from './types';
-export declare const HorizontalCardBodyContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const HorizontalCardBodyTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const HorizontalCardBodyDescription: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const HorizontalCardBodyTagsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare type Props = Pick<HorizontalCardProps, 'title' | 'description' | 'progress' | 'tags'>;
-export declare const HorizontalCardBody: React.FunctionComponent<Props>;
-export {};