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

package/dist/src/Banners/styles.js

@@ -0,0 +1,55 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { css } from 'styled-components';
+import { IconButtonStyledSecondary } from '../Button/Iconbutton';
+import { COLORS } from '../styles';
+export var getButtonStyle = function (type) {
+    var style = {
+        svgFill: COLORS.primary_500,
+        hoverBgColor: COLORS.primary_200,
+        hoverSvgFill: COLORS.primary_700,
+        activeBgColor: COLORS.primary_300,
+        activeSvgFill: COLORS.primary_800,
+        focusBgColor: COLORS.primary_200,
+        focusSvgFill: COLORS.primary_700
+    };
+    switch (type) {
+        case 'warning':
+            style = {
+                svgFill: COLORS.warning_500,
+                hoverBgColor: COLORS.warning_200,
+                hoverSvgFill: COLORS.warning_700,
+                activeBgColor: COLORS.warning_300,
+                activeSvgFill: COLORS.warning_800,
+                focusBgColor: COLORS.warning_200,
+                focusSvgFill: COLORS.warning_700
+            };
+            break;
+        case 'critical':
+            style = {
+                svgFill: COLORS.critical_600,
+                hoverBgColor: COLORS.critical_200,
+                hoverSvgFill: COLORS.critical_700,
+                activeBgColor: COLORS.critical_300,
+                activeSvgFill: COLORS.critical_800,
+                focusBgColor: COLORS.critical_200,
+                focusSvgFill: COLORS.critical_700
+            };
+            break;
+        case 'positive':
+            style = {
+                svgFill: COLORS.correct_500,
+                hoverBgColor: COLORS.correct_200,
+                hoverSvgFill: COLORS.correct_700,
+                activeBgColor: COLORS.correct_300,
+                activeSvgFill: COLORS.correct_800,
+                focusBgColor: COLORS.correct_200,
+                focusSvgFill: COLORS.correct_700
+            };
+            break;
+    }
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", " {\n    div {\n      background-color: transparent;\n    }\n    div svg path,\n    div svg {\n      fill: ", ";\n    }\n    &:hover:not(:disabled) {\n      div {\n        background-color: ", ";\n      }\n      div svg path,\n      div svg {\n        fill: ", ";\n      }\n    }\n    &:active:not(:disabled) {\n      div {\n        background: ", ";\n      }\n      div svg path,\n      div svg {\n        fill: ", ";\n      }\n    }\n  }"], ["\n    ", " {\n    div {\n      background-color: transparent;\n    }\n    div svg path,\n    div svg {\n      fill: ", ";\n    }\n    &:hover:not(:disabled) {\n      div {\n        background-color: ", ";\n      }\n      div svg path,\n      div svg {\n        fill: ", ";\n      }\n    }\n    &:active:not(:disabled) {\n      div {\n        background: ", ";\n      }\n      div svg path,\n      div svg {\n        fill: ", ";\n      }\n    }\n  }"])), IconButtonStyledSecondary, style.svgFill, style.hoverBgColor, style.hoverSvgFill, style.activeBgColor, style.activeSvgFill);
+};
+var templateObject_1;

package/dist/src/Breadcrumb/Breadcrumb.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Size } from '..';
 import { BreadcrumbItem } from './BreadcrumbItem';
-export type BreadcrumbProps = React.HTMLAttributes<HTMLDivElement> & {
+export declare type BreadcrumbProps = React.HTMLAttributes<HTMLDivElement> & {
     /** If set to false, then instead of 'Home' icon, link will be shown. Defaults to 'true' */
     homeIcon?: boolean;
     /** Label of the home link. Will be shown only if homeIcon is set to false. Defaults to 'Home' */

package/dist/src/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,67 @@
+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 { COLORS } from '../styles';
+import { Size, SystemIcons } from '..';
+import { useNavigate } from 'react-router';
+import { HyperLink, IconButton } from '..';
+import DropdownButton from '../Dropdown/DropdownButton';
+import { BreadcrumbContainerStyles, BreadcrumbItemLastStyles } from './styles';
+/** Breadcrumbs is a list of links that help visualize a page's location within a site's hierarchical structure, it allows navigation up to any of the ancestors. */
+var Breadcrumb = function (_a) {
+    var items = _a.items, _b = _a.size, size = _b === void 0 ? Size.Small : _b, _c = _a.homeIcon, homeIcon = _c === void 0 ? true : _c, _d = _a.homeLabel, homeLabel = _d === void 0 ? 'Home' : _d, _e = _a.lastItemAsLabel, lastItemAsLabel = _e === void 0 ? false : _e, _f = _a.homeUrl, homeUrl = _f === void 0 ? '/' : _f, rest = __rest(_a, ["items", "size", "homeIcon", "homeLabel", "lastItemAsLabel", "homeUrl"]);
+    var navigateHook = useNavigate();
+    var dropdownItems = items ? items.slice(0, items.length - 2).map(function (x) { return ({ value: x.url, displayLabel: x.label }); }) : [];
+    var navigate = function (links) {
+        navigateHook(links[0]);
+    };
+    var chevronSize = size == Size.Medium ? '24px' : size == Size.Small ? '20px' : '16px';
+    var renderChevron = function () { return (React.createElement("div", { "aria-hidden": "true" },
+        React.createElement(SystemIcons.ForwardSlash, { className: "chevronicon", color: COLORS.neutral_500, size: chevronSize }))); };
+    var renderBreadcrumbLinkItem = function (index, item) {
+        return (React.createElement(React.Fragment, null,
+            renderChevron(),
+            React.createElement(HyperLink, { id: 'link-item-' + index, onClick: function (e) {
+                    e.preventDefault();
+                    navigateHook(item.url);
+                }, target: "_self", variant: "default", href: item.url }, item.label)));
+    };
+    return (React.createElement(BreadcrumbContainerStyles, __assign({ size: size, "data-testid": 'breacrumbContainer' }, rest),
+        homeIcon ? (React.createElement(IconButton, { id: "homeIcon", variant: "secondary", shape: "circular", action: function () { return navigateHook(homeUrl); } },
+            React.createElement(SystemIcons.Home, { size: chevronSize }))) : (React.createElement(HyperLink, { id: 'homelink', variant: "default", href: homeUrl, onClick: function (e) {
+                e.preventDefault();
+                navigateHook(homeUrl);
+            } }, homeLabel)),
+        !!items &&
+            items.length > 2 &&
+            (items.length > 3 ? (React.createElement(React.Fragment, null,
+                renderChevron(),
+                React.createElement(DropdownButton, { type: 'icon', alignLeft: true, items: dropdownItems, size: size == Size.XSmall ? Size.Small : size, icon: React.createElement(SystemIcons.MoreHorizontal, { color: COLORS.neutral_600, size: "20px" }), onClick: navigate }))) : (React.createElement(React.Fragment, null, renderBreadcrumbLinkItem(items.length - 3, items[items.length - 3])))),
+        !!items && items.length > 1 && React.createElement(React.Fragment, null, renderBreadcrumbLinkItem(items.length - 2, items[items.length - 2])),
+        !!items && items.length > 0 && (React.createElement(React.Fragment, null, lastItemAsLabel ? (React.createElement(React.Fragment, null,
+            renderChevron(),
+            React.createElement(BreadcrumbItemLastStyles, { size: size }, items[items.length - 1].label))) : (React.createElement(React.Fragment, null,
+            renderBreadcrumbLinkItem(items.length - 1, items[items.length - 1]),
+            renderChevron()))))));
+};
+export default Breadcrumb;

package/dist/src/Breadcrumb/BreadcrumbItem.js

@@ -0,0 +1 @@
+export {};

package/dist/src/Breadcrumb/index.js

@@ -0,0 +1,4 @@
+export { default as Breadcrumb } from './Breadcrumb';
+export * from './Breadcrumb';
+export * from './BreadcrumbItem';
+export * from './styles';

package/dist/src/Breadcrumb/styles.js

@@ -0,0 +1,24 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from 'styled-components';
+import { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXXSStyling } from '../styles';
+import { Size } from '../types';
+var marginRight = function (size) {
+    return size == Size.Small || size == Size.Medium ? 'margin-right: 8px;' : 'margin-right: 4px;';
+};
+var FontStyles = function (size, textStyle, color) {
+    switch (size) {
+        case Size.XSmall:
+            return ComponentXXSStyling(textStyle, color);
+        case Size.Medium:
+            return ComponentMStyling(textStyle, color);
+        case Size.Small:
+        default:
+            return ComponentSStyling(textStyle, color);
+    }
+};
+export var BreadcrumbItemLastStyles = styled.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), function (props) { return FontStyles(props.size, ComponentTextStyle.Bold, COLORS.neutral_800); }, function (props) { return marginRight(props.size); });
+export var BreadcrumbContainerStyles = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  min-height: 48px;\n\n  a {\n    text-decoration: none;\n    ", "\n    ", "\n  }\n\n  .chevronicon {\n    ", "\n  }\n\n  a:hover {\n    color: ", ";\n  }\n  a:active {\n    color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  min-height: 48px;\n\n  a {\n    text-decoration: none;\n    ", "\n    ", "\n  }\n\n  .chevronicon {\n    ", "\n  }\n\n  a:hover {\n    color: ", ";\n  }\n  a:active {\n    color: ", ";\n  }\n"])), function (props) { return FontStyles(props.size, ComponentTextStyle.Regular, COLORS.neutral_600); }, function (props) { return marginRight(props.size); }, function (props) { return marginRight(props.size); }, COLORS.primary_700, COLORS.primary_800);
+var templateObject_1, templateObject_2;

package/dist/src/Button/BackButton.js

@@ -0,0 +1,45 @@
+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.js

@@ -0,0 +1,87 @@
+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.js

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

@@ -0,0 +1,70 @@
+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.js

@@ -0,0 +1,8 @@
+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.js

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