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

package/dist/Tile/Tile.js

@@ -1,43 +1,42 @@
-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 { Size } from '../types';
-import styled from 'styled-components';
-import TileHeader from './TileHeader';
-import TileFooter from './TileFooter';
-import TileBody from './TileBody';
-import { COLORS } from '../styles';
-var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-flow: column;\n  flex-direction: column;\n  background: ", ";\n  border-radius: 8px;\n  border: 1px solid ", ";\n  box-sizing: border-box;\n"], ["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-flow: column;\n  flex-direction: column;\n  background: ", ";\n  border-radius: 8px;\n  border: 1px solid ", ";\n  box-sizing: border-box;\n"])), COLORS.white, COLORS.neutral_200);
-var Tile = function (_a) {
-    var header = _a.header, footer = _a.footer, _b = _a.size, size = _b === void 0 ? Size.Medium : _b, style = _a.style, children = _a.children, className = _a.className, rest = __rest(_a, ["header", "footer", "size", "style", "children", "className"]);
-    return (React.createElement(Wrapper, __assign({ style: style, className: "".concat(size, " ").concat(className || '') }, rest),
-        header && React.createElement(TileHeader, __assign({}, header, { size: size })),
-        React.createElement(TileBody, { size: size }, children),
-        footer && React.createElement(TileFooter, __assign({}, footer, { size: size }))));
-};
-export default Tile;
-var templateObject_1;
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _excluded = ["header", "footer", "size", "style", "children", "className"];
+var _templateObject;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import { Size } from '../types';
+import styled from 'styled-components';
+import TileHeader from './TileHeader';
+import TileFooter from './TileFooter';
+import TileBody from './TileBody';
+import { COLORS } from '../styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-flow: column;\n  flex-direction: column;\n  background: ", ";\n  border-radius: 8px;\n  border: 1px solid ", ";\n  box-sizing: border-box;\n"])), COLORS.white, COLORS.neutral_200);
+var Tile = function Tile(_ref) {
+  var header = _ref.header,
+    footer = _ref.footer,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? Size.Medium : _ref$size,
+    style = _ref.style,
+    children = _ref.children,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsxs(Wrapper, _objectSpread(_objectSpread({
+    style: style,
+    className: "".concat(size, " ").concat(className || '')
+  }, rest), {}, {
+    children: [header && /*#__PURE__*/_jsx(TileHeader, _objectSpread(_objectSpread({}, header), {}, {
+      size: size
+    })), /*#__PURE__*/_jsx(TileBody, {
+      size: size,
+      children: children
+    }), footer && /*#__PURE__*/_jsx(TileFooter, _objectSpread(_objectSpread({}, footer), {}, {
+      size: size
+    }))]
+  }));
+};
+export default Tile;
+//# sourceMappingURL=Tile.js.map

package/dist/Tile/TileBody.js

@@ -1,15 +1,18 @@
-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 { Size } from '../types';
-import styled from 'styled-components';
-import { scrollBarStyling } from '../styles';
-var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex: 1;\n  margin: 8px;\n  overflow: auto;\n  box-sizing: border-box;\n\n  &.small {\n    padding: 0 8px;\n  }\n\n  &.medium {\n    padding: 0 12px;\n  }\n\n  &.large {\n    padding: 0 16px;\n  }\n\n  ", "\n"], ["\n  flex: 1;\n  margin: 8px;\n  overflow: auto;\n  box-sizing: border-box;\n\n  &.small {\n    padding: 0 8px;\n  }\n\n  &.medium {\n    padding: 0 12px;\n  }\n\n  &.large {\n    padding: 0 16px;\n  }\n\n  ", "\n"])), scrollBarStyling(Size.Small));
-var TileBody = function (_a) {
-    var children = _a.children, size = _a.size;
-    return (React.createElement(Wrapper, { className: size }, children));
-};
-export default TileBody;
-var templateObject_1;
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject;
+import React from 'react';
+import { Size } from '../types';
+import styled from 'styled-components';
+import { scrollBarStyling } from '../styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex: 1;\n  margin: 8px;\n  overflow: auto;\n  box-sizing: border-box;\n\n  &.small {\n    padding: 0 8px;\n  }\n\n  &.medium {\n    padding: 0 12px;\n  }\n\n  &.large {\n    padding: 0 16px;\n  }\n\n  ", "\n"])), scrollBarStyling(Size.Small));
+var TileBody = function TileBody(_ref) {
+  var children = _ref.children,
+    size = _ref.size;
+  return /*#__PURE__*/_jsx(Wrapper, {
+    className: size,
+    children: children
+  });
+};
+export default TileBody;
+//# sourceMappingURL=TileBody.js.map

package/dist/Tile/TileCommonItems.js

@@ -1,75 +1,117 @@
-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 { Button, IconButton } from '../Button';
-import { ToggleButton } from '../Toggles';
-import { DropdownButton } from '../Dropdown';
-import React from 'react';
-import styled from 'styled-components';
-import { COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, ComponentXXSStyling } from '../styles';
-import { HyperLink } from '../HyperLink';
-import { Size } from '../types';
-export var TileNoteText = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
-export var TileNoteIcon = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["display: flex;"], ["display: flex;"])));
-export var TileNoteWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  color: ", ";\n\n  &.small {\n    gap: 4px;\n\n    ", " {\n      width: 16px;\n      height: 16px;\n    }\n\n    ", " {\n      ", "\n    }\n  }\n\n  &.medium {\n    gap: 6px;\n\n    ", " {\n      width: 16px;\n      height: 16px;\n    }\n\n    ", " {\n      ", "\n    }\n\n  }\n\n  &.large {\n    gap: 8px;\n\n    ", " {\n      width: 20px;\n      height: 20px;\n    }\n\n    ", " {\n      ", "\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  color: ", ";\n\n  &.small {\n    gap: 4px;\n\n    ", " {\n      width: 16px;\n      height: 16px;\n    }\n\n    ", " {\n      ", "\n    }\n  }\n\n  &.medium {\n    gap: 6px;\n\n    ", " {\n      width: 16px;\n      height: 16px;\n    }\n\n    ", " {\n      ", "\n    }\n\n  }\n\n  &.large {\n    gap: 8px;\n\n    ", " {\n      width: 20px;\n      height: 20px;\n    }\n\n    ", " {\n      ", "\n    }\n  }\n"])), COLORS.neutral_600, TileNoteIcon, TileNoteText, ComponentXXSStyling(ComponentTextStyle.Regular, null), TileNoteIcon, TileNoteText, ComponentXSStyling(ComponentTextStyle.Regular, null), TileNoteIcon, TileNoteText, ComponentSStyling(ComponentTextStyle.Regular, null));
-export var TileHyperLinkIcon = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["display: flex"], ["display: flex"])));
-export var TileHyperLinkText = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject([""], [""])));
-export var TileHyperLinkWrapper = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  width: max-content;\n\n  ", "\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n\n  &.small {\n    ", " {\n      width: 24px;\n      height: 24px;\n    }\n\n    ", " {\n      ", "\n    }\n\n    a {\n      gap: 4px;\n    }\n  }\n\n  &.medium {\n    ", " {\n      width: 24px;\n      height: 24px;\n    }\n\n    ", " {\n      ", "\n    }\n\n    a {\n      gap: 6px;\n    }\n  }\n\n  &.large {\n    ", " {\n      width: 28px;\n      height: 28px;\n    }\n\n    ", " {\n      ", "\n    }\n\n    a {\n      gap: 8px;\n    }\n  }\n"], ["\n  width: max-content;\n\n  ", "\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n\n  &.small {\n    ", " {\n      width: 24px;\n      height: 24px;\n    }\n\n    ", " {\n      ", "\n    }\n\n    a {\n      gap: 4px;\n    }\n  }\n\n  &.medium {\n    ", " {\n      width: 24px;\n      height: 24px;\n    }\n\n    ", " {\n      ", "\n    }\n\n    a {\n      gap: 6px;\n    }\n  }\n\n  &.large {\n    ", " {\n      width: 28px;\n      height: 28px;\n    }\n\n    ", " {\n      ", "\n    }\n\n    a {\n      gap: 8px;\n    }\n  }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500), TileHyperLinkIcon, TileHyperLinkText, ComponentSStyling(ComponentTextStyle.Bold, null), TileHyperLinkIcon, TileHyperLinkText, ComponentMStyling(ComponentTextStyle.Bold, null), TileHyperLinkIcon, TileHyperLinkText, ComponentLStyling(ComponentTextStyle.Bold, null));
-export var RenderTileItem = function (item, size, key) {
-    var _a, _b;
-    if (key === void 0) { key = undefined; }
-    switch (item.componentType) {
-        case 'icon': {
-            return React.createElement(IconButton, { key: key, variant: (_a = item.variant) !== null && _a !== void 0 ? _a : 'secondary', useTransparentBackground: item.variant == 'secondary' ? true : false, shape: (_b = item.shape) !== null && _b !== void 0 ? _b : 'circular', action: item.action, tooltip: item.tooltip, disabled: item.disabled }, item.icon);
-        }
-        case 'toggle': {
-            return React.createElement(ToggleButton, { key: key, active: item.active, onChange: item.onChange, defaultState: item.defaultState, activeState: item.activeState, disabled: item.disabled });
-        }
-        case 'dropdown': {
-            return React.createElement(DropdownButton, { key: key, type: 'icon', items: item.items, itemsType: item.itemsType, onClick: item.onClick, icon: item.icon, tooltip: item.tooltip, 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: item.disabled });
-        }
-        case 'note': {
-            return React.createElement(TileNoteWrapper, { key: key, className: size },
-                item.noteIcon &&
-                    React.createElement(TileNoteIcon, null, React.cloneElement(item.noteIcon, { size: size === Size.Large ? '20px' : '16' })),
-                React.createElement(TileNoteText, null, item.noteText));
-        }
-        case 'link': {
-            var linkText = item.linkText, componentType = item.componentType, linkIcon = item.linkIcon, rest = __rest(item, ["linkText", "componentType", "linkIcon"]);
-            return React.createElement(TileHyperLinkWrapper, { className: size, key: key },
-                React.createElement(HyperLink, __assign({}, rest),
-                    React.createElement(TileHyperLinkText, null, linkText),
-                    linkIcon &&
-                        React.createElement(TileHyperLinkIcon, null, React.cloneElement(linkIcon, { size: size === Size.Large ? '28px' : '24px' }))));
-        }
-        case 'button': {
-            var buttonText = item.buttonText, componentType = item.componentType, rest = __rest(item, ["buttonText", "componentType"]);
-            return React.createElement(Button, __assign({ key: key, size: [Size.XSmall, Size.XSmall, Size.XXSmall].includes(size) ? Size.Small :
-                    size == Size.Large ? Size.Large : Size.Medium }, rest), buttonText);
-        }
-    }
-};
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _excluded = ["linkText", "componentType", "linkIcon"],
+  _excluded2 = ["buttonText", "componentType"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { Button, IconButton } from '../Button';
+import { ToggleButton } from '../Toggles';
+import { DropdownButton } from '../Dropdown';
+import React from 'react';
+import styled from 'styled-components';
+import { COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, ComponentXXSStyling } from '../styles';
+import { HyperLink } from '../HyperLink';
+import { Size } from '../types';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var TileNoteText = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral([""])));
+export var TileNoteIcon = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["display: flex;"])));
+export var TileNoteWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  color: ", ";\n\n  &.small {\n    gap: 4px;\n\n    ", " {\n      width: 16px;\n      height: 16px;\n    }\n\n    ", " {\n      ", "\n    }\n  }\n\n  &.medium {\n    gap: 6px;\n\n    ", " {\n      width: 16px;\n      height: 16px;\n    }\n\n    ", " {\n      ", "\n    }\n\n  }\n\n  &.large {\n    gap: 8px;\n\n    ", " {\n      width: 20px;\n      height: 20px;\n    }\n\n    ", " {\n      ", "\n    }\n  }\n"])), COLORS.neutral_600, TileNoteIcon, TileNoteText, ComponentXXSStyling(ComponentTextStyle.Regular, null), TileNoteIcon, TileNoteText, ComponentXSStyling(ComponentTextStyle.Regular, null), TileNoteIcon, TileNoteText, ComponentSStyling(ComponentTextStyle.Regular, null));
+export var TileHyperLinkIcon = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["display: flex"])));
+export var TileHyperLinkText = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([""])));
+export var TileHyperLinkWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: max-content;\n\n  ", "\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n\n  &.small {\n    ", " {\n      width: 24px;\n      height: 24px;\n    }\n\n    ", " {\n      ", "\n    }\n\n    a {\n      gap: 4px;\n    }\n  }\n\n  &.medium {\n    ", " {\n      width: 24px;\n      height: 24px;\n    }\n\n    ", " {\n      ", "\n    }\n\n    a {\n      gap: 6px;\n    }\n  }\n\n  &.large {\n    ", " {\n      width: 28px;\n      height: 28px;\n    }\n\n    ", " {\n      ", "\n    }\n\n    a {\n      gap: 8px;\n    }\n  }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500), TileHyperLinkIcon, TileHyperLinkText, ComponentSStyling(ComponentTextStyle.Bold, null), TileHyperLinkIcon, TileHyperLinkText, ComponentMStyling(ComponentTextStyle.Bold, null), TileHyperLinkIcon, TileHyperLinkText, ComponentLStyling(ComponentTextStyle.Bold, null));
+export var RenderTileItem = function RenderTileItem(item, size) {
+  var key = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
+  switch (item.componentType) {
+    case 'icon':
+      {
+        var _item$variant, _item$shape;
+        return /*#__PURE__*/_jsx(IconButton, {
+          variant: (_item$variant = item.variant) !== null && _item$variant !== void 0 ? _item$variant : 'secondary',
+          useTransparentBackground: item.variant == 'secondary' ? true : false,
+          shape: (_item$shape = item.shape) !== null && _item$shape !== void 0 ? _item$shape : 'circular',
+          action: item.action,
+          tooltip: item.tooltip,
+          disabled: item.disabled,
+          children: item.icon
+        }, key);
+      }
+    case 'toggle':
+      {
+        return /*#__PURE__*/_jsx(ToggleButton, {
+          active: item.active,
+          onChange: item.onChange,
+          defaultState: item.defaultState,
+          activeState: item.activeState,
+          disabled: item.disabled
+        }, key);
+      }
+    case 'dropdown':
+      {
+        return /*#__PURE__*/_jsx(DropdownButton, {
+          type: 'icon',
+          items: item.items,
+          itemsType: item.itemsType,
+          onClick: item.onClick,
+          icon: item.icon,
+          tooltip: item.tooltip,
+          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: item.disabled
+        }, key);
+      }
+    case 'note':
+      {
+        return /*#__PURE__*/_jsxs(TileNoteWrapper, {
+          className: size,
+          children: [item.noteIcon && /*#__PURE__*/_jsx(TileNoteIcon, {
+            children: /*#__PURE__*/React.cloneElement(item.noteIcon, {
+              size: size === Size.Large ? '20px' : '16'
+            })
+          }), /*#__PURE__*/_jsx(TileNoteText, {
+            children: item.noteText
+          })]
+        }, key);
+      }
+    case 'link':
+      {
+        var linkText = item.linkText,
+          componentType = item.componentType,
+          linkIcon = item.linkIcon,
+          rest = _objectWithoutProperties(item, _excluded);
+        return /*#__PURE__*/_jsx(TileHyperLinkWrapper, {
+          className: size,
+          children: /*#__PURE__*/_jsxs(HyperLink, _objectSpread(_objectSpread({}, rest), {}, {
+            children: [/*#__PURE__*/_jsx(TileHyperLinkText, {
+              children: linkText
+            }), linkIcon && /*#__PURE__*/_jsx(TileHyperLinkIcon, {
+              children: /*#__PURE__*/React.cloneElement(linkIcon, {
+                size: size === Size.Large ? '28px' : '24px'
+              })
+            })]
+          }))
+        }, key);
+      }
+    case 'button':
+      {
+        var buttonText = item.buttonText,
+          _componentType = item.componentType,
+          _rest = _objectWithoutProperties(item, _excluded2);
+        return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
+          size: [Size.XSmall, Size.XSmall, Size.XXSmall].includes(size) ? Size.Small : size == Size.Large ? Size.Large : Size.Medium
+        }, _rest), {}, {
+          children: buttonText
+        }), key);
+      }
+  }
+};
+//# sourceMappingURL=TileCommonItems.js.map

package/dist/Tile/TileFooter.js

@@ -1,19 +1,28 @@
-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 styled from 'styled-components';
-import { RenderTileItem } from './TileCommonItems';
-import { COLORS } from '../styles';
-var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  min-height: 56px;\n  box-sizing: border-box;\n\n  &.small {\n    padding: 0 16px;\n    min-height: 56px;\n    gap: 4px;\n  }\n\n  &.medium {\n    padding: 0 20px;\n    min-height: 64px;\n    gap: 4px;\n  }\n\n  &.large {\n    padding: 0 24px;\n    min-height: 80px;\n    gap: 8px;\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  min-height: 56px;\n  box-sizing: border-box;\n\n  &.small {\n    padding: 0 16px;\n    min-height: 56px;\n    gap: 4px;\n  }\n\n  &.medium {\n    padding: 0 20px;\n    min-height: 64px;\n    gap: 4px;\n  }\n\n  &.large {\n    padding: 0 24px;\n    min-height: 80px;\n    gap: 8px;\n  }\n"])));
-var LeftItemContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1\n"], ["\n  flex: 1\n"])));
-var RightItemContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  color: ", ";\n"], ["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  color: ", ";\n"])), COLORS.neutral_600);
-var TileFooter = function (_a) {
-    var buttons = _a.buttons, leftItem = _a.leftItem, size = _a.size;
-    return (React.createElement(Wrapper, { className: size },
-        React.createElement(LeftItemContainer, null, leftItem && RenderTileItem(leftItem, size)),
-        React.createElement(RightItemContainer, null, buttons && buttons.map(function (value, index) { return RenderTileItem(value, size, index); }))));
-};
-export default TileFooter;
-var templateObject_1, templateObject_2, templateObject_3;
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3;
+import React from 'react';
+import styled from 'styled-components';
+import { RenderTileItem } from './TileCommonItems';
+import { COLORS } from '../styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  min-height: 56px;\n  box-sizing: border-box;\n\n  &.small {\n    padding: 0 16px;\n    min-height: 56px;\n    gap: 4px;\n  }\n\n  &.medium {\n    padding: 0 20px;\n    min-height: 64px;\n    gap: 4px;\n  }\n\n  &.large {\n    padding: 0 24px;\n    min-height: 80px;\n    gap: 8px;\n  }\n"])));
+var LeftItemContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex: 1\n"])));
+var RightItemContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  color: ", ";\n"])), COLORS.neutral_600);
+var TileFooter = function TileFooter(_ref) {
+  var buttons = _ref.buttons,
+    leftItem = _ref.leftItem,
+    size = _ref.size;
+  return /*#__PURE__*/_jsxs(Wrapper, {
+    className: size,
+    children: [/*#__PURE__*/_jsx(LeftItemContainer, {
+      children: leftItem && RenderTileItem(leftItem, size)
+    }), /*#__PURE__*/_jsx(RightItemContainer, {
+      children: buttons && buttons.map(function (value, index) {
+        return RenderTileItem(value, size, index);
+      })
+    })]
+  });
+};
+export default TileFooter;
+//# sourceMappingURL=TileFooter.js.map

package/dist/Tile/TileHeader.js

@@ -1,57 +1,81 @@
-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);
-};
-import React from 'react';
-import { Size } from '../types';
-import styled from 'styled-components';
-import { COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, ComponentXXSStyling } from '../styles';
-import { TooltipWrapper } from '../Tooltips';
-import { IconButton } from '../Button';
-import { SystemIcons } from '../icons';
-import { RenderTileItem } from './TileCommonItems';
-import { Tag } from "../Tag";
-var SubtitleIconContainer = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  width: 16px;\n  height: 16px;\n\n  .large & {\n    width: 20px;\n    height: 20px;\n  }\n"], ["\n  display: flex;\n  width: 16px;\n  height: 16px;\n\n  .large & {\n    width: 20px;\n    height: 20px;\n  }\n"])));
-var SubtitleContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: ", ";\n  display: flex;\n  align-items: flex-start;\n  gap: 4px;\n"], ["\n  color: ", ";\n  display: flex;\n  align-items: flex-start;\n  gap: 4px;\n"])), COLORS.neutral_600);
-var TitleContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), COLORS.black);
-var TextContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: 4px;\n  flex: 1;\n\n  padding: 14px 0;\n\n  .medium & {\n    padding: 12px 0;\n  }\n\n  .large & {\n    padding: 12px 0;\n  }\n\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: 4px;\n  flex: 1;\n\n  padding: 14px 0;\n\n  .medium & {\n    padding: 12px 0;\n  }\n\n  .large & {\n    padding: 12px 0;\n  }\n\n"])));
-var ActionContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  height: 100%;\n"], ["\n  display: flex;\n  height: 100%;\n"])));
-var Wrapper = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n\n  min-height: 56px;\n  box-sizing: border-box;\n\n  &.small {\n    padding: 4px 16px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      ", "\n    }\n  }\n\n  &.medium {\n    padding: 8px 20px;\n    min-height: 64px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      ", "\n    }\n\n  }\n\n  &.large {\n    padding: 12px 24px;\n    min-height: 72px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      ", "\n    }\n\n  }\n"], ["\n  display: flex;\n  align-items: flex-start;\n\n  min-height: 56px;\n  box-sizing: border-box;\n\n  &.small {\n    padding: 4px 16px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      ", "\n    }\n  }\n\n  &.medium {\n    padding: 8px 20px;\n    min-height: 64px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      ", "\n    }\n\n  }\n\n  &.large {\n    padding: 12px 24px;\n    min-height: 72px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      ", "\n    }\n\n  }\n"])), SubtitleContainer, ComponentXXSStyling(ComponentTextStyle.Regular, null), TitleContainer, ComponentSStyling(ComponentTextStyle.Bold, null), SubtitleContainer, ComponentXSStyling(ComponentTextStyle.Regular, null), TitleContainer, ComponentMStyling(ComponentTextStyle.Bold, null), SubtitleContainer, ComponentSStyling(ComponentTextStyle.Regular, null), TitleContainer, ComponentLStyling(ComponentTextStyle.Bold, null));
-var TagContainer = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-self: center;\n"], ["\n  align-self: center;\n"])));
-var TileHeader = function (_a) {
-    var title = _a.title, subtitle = _a.subtitle, subtitleIcon = _a.subtitleIcon, tooltip = _a.tooltip, buttons = _a.buttons, size = _a.size, tag = _a.tag;
-    var renderTooltip = function () {
-        return !!tooltip &&
-            React.createElement(TooltipWrapper, { delay: "0s", size: Size.XSmall, align: "center", position: "bottom", withArrow: false, label: tooltip },
-                React.createElement(IconButton, { variant: "secondary", shape: "circular", style: { cursor: 'help' }, action: function () {
-                    } },
-                    React.createElement(SystemIcons.Help, { size: "24px", color: COLORS.neutral_600 })));
-    };
-    var renderTag = function () { return !!tag && React.createElement(TagContainer, null,
-        React.createElement(Tag, __assign({}, tag))); };
-    return (React.createElement(Wrapper, { className: size },
-        React.createElement(TextContainer, null,
-            React.createElement(TitleContainer, null, title),
-            subtitle &&
-                React.createElement(SubtitleContainer, null,
-                    subtitleIcon &&
-                        React.createElement(SubtitleIconContainer, null, React.cloneElement(subtitleIcon, { size: size === Size.Large ? '20px' : '16px' })),
-                    React.createElement("span", null, subtitle))),
-        React.createElement(ActionContainer, null,
-            renderTooltip(),
-            renderTag(),
-            buttons && buttons.map(function (item, index) { return RenderTileItem(item, size, index); }))));
-};
-export default TileHeader;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import { Size } from '../types';
+import styled from 'styled-components';
+import { COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, ComponentXXSStyling } from '../styles';
+import { TooltipWrapper } from '../Tooltips';
+import { IconButton } from '../Button';
+import { SystemIcons } from '../icons';
+import { RenderTileItem } from './TileCommonItems';
+import { Tag } from "../Tag";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var SubtitleIconContainer = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  width: 16px;\n  height: 16px;\n\n  .large & {\n    width: 20px;\n    height: 20px;\n  }\n"])));
+var SubtitleContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  display: flex;\n  align-items: flex-start;\n  gap: 4px;\n"])), COLORS.neutral_600);
+var TitleContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), COLORS.black);
+var TextContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: 4px;\n  flex: 1;\n\n  padding: 14px 0;\n\n  .medium & {\n    padding: 12px 0;\n  }\n\n  .large & {\n    padding: 12px 0;\n  }\n\n"])));
+var ActionContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  height: 100%;\n"])));
+var Wrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: flex-start;\n\n  min-height: 56px;\n  box-sizing: border-box;\n\n  &.small {\n    padding: 4px 16px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      ", "\n    }\n  }\n\n  &.medium {\n    padding: 8px 20px;\n    min-height: 64px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      ", "\n    }\n\n  }\n\n  &.large {\n    padding: 12px 24px;\n    min-height: 72px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      ", "\n    }\n\n  }\n"])), SubtitleContainer, ComponentXXSStyling(ComponentTextStyle.Regular, null), TitleContainer, ComponentSStyling(ComponentTextStyle.Bold, null), SubtitleContainer, ComponentXSStyling(ComponentTextStyle.Regular, null), TitleContainer, ComponentMStyling(ComponentTextStyle.Bold, null), SubtitleContainer, ComponentSStyling(ComponentTextStyle.Regular, null), TitleContainer, ComponentLStyling(ComponentTextStyle.Bold, null));
+var TagContainer = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  align-self: center;\n"])));
+var TileHeader = function TileHeader(_ref) {
+  var title = _ref.title,
+    subtitle = _ref.subtitle,
+    subtitleIcon = _ref.subtitleIcon,
+    tooltip = _ref.tooltip,
+    buttons = _ref.buttons,
+    size = _ref.size,
+    tag = _ref.tag;
+  var renderTooltip = function renderTooltip() {
+    return !!tooltip && /*#__PURE__*/_jsx(TooltipWrapper, {
+      delay: "0s",
+      size: Size.XSmall,
+      align: "center",
+      position: "bottom",
+      withArrow: false,
+      label: tooltip,
+      children: /*#__PURE__*/_jsx(IconButton, {
+        variant: "secondary",
+        shape: "circular",
+        style: {
+          cursor: 'help'
+        },
+        action: function action() {},
+        children: /*#__PURE__*/_jsx(SystemIcons.Help, {
+          size: "24px",
+          color: COLORS.neutral_600
+        })
+      })
+    });
+  };
+  var renderTag = function renderTag() {
+    return !!tag && /*#__PURE__*/_jsx(TagContainer, {
+      children: /*#__PURE__*/_jsx(Tag, _objectSpread({}, tag))
+    });
+  };
+  return /*#__PURE__*/_jsxs(Wrapper, {
+    className: size,
+    children: [/*#__PURE__*/_jsxs(TextContainer, {
+      children: [/*#__PURE__*/_jsx(TitleContainer, {
+        children: title
+      }), subtitle && /*#__PURE__*/_jsxs(SubtitleContainer, {
+        children: [subtitleIcon && /*#__PURE__*/_jsx(SubtitleIconContainer, {
+          children: /*#__PURE__*/React.cloneElement(subtitleIcon, {
+            size: size === Size.Large ? '20px' : '16px'
+          })
+        }), /*#__PURE__*/_jsx("span", {
+          children: subtitle
+        })]
+      })]
+    }), /*#__PURE__*/_jsxs(ActionContainer, {
+      children: [renderTooltip(), renderTag(), buttons && buttons.map(function (item, index) {
+        return RenderTileItem(item, size, index);
+      })]
+    })]
+  });
+};
+export default TileHeader;
+//# sourceMappingURL=TileHeader.js.map

package/dist/Tile/TileTypes.d.ts

@@ -7,34 +7,34 @@ import { HyperlinkProps } from '../HyperLink/HyperLink';
 import { Size } from '../types';
 import { TooltipProps } from "../Tooltips/TooltipTypes";
 import { TagProps } from "../Tag";
-export declare type TileIconButton = Pick<IconButtonProps, 'action' | 'disabled' | 'tooltip' | 'variant' | 'shape'> & {
+export type TileIconButton = Pick<IconButtonProps, 'action' | 'disabled' | 'tooltip' | 'variant' | 'shape'> & {
     componentType: 'icon';
     icon: React.ReactNode;
 };
-export declare type TileToggleButton = Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'> & {
+export type TileToggleButton = Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'> & {
     componentType: 'toggle';
 };
-export declare type TileDropdownButton = Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'> & {
+export type TileDropdownButton = Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'> & {
     componentType: 'dropdown';
     icon: React.ReactNode;
     tooltip?: TooltipProps;
 };
-export declare type TileStandardButton = Pick<ButtonProps, 'width' | 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {
+export type TileStandardButton = Pick<ButtonProps, 'width' | 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {
     componentType: 'button';
     buttonText: string;
 };
-export declare type TileNote = {
+export type TileNote = {
     componentType: 'note';
     noteIcon?: React.ReactNode;
     noteText: string;
 };
-export declare type TileHyperLink = HyperlinkProps & {
+export type TileHyperLink = HyperlinkProps & {
     componentType: 'link';
     linkIcon?: React.ReactNode;
     linkText: string;
 };
-export declare type FooterButtons = TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton;
-export declare type HeaderButtons = TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton;
+export type FooterButtons = TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton;
+export type HeaderButtons = TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton;
 export interface TileHeaderProps {
     title: string;
     tag?: TagProps;

package/dist/Tile/TileTypes.js

@@ -1 +1,2 @@
-export {};
+export {};
+//# sourceMappingURL=TileTypes.js.map

package/dist/Tile/index.js

@@ -1,3 +1,4 @@
-import Tile from './Tile';
-export { Tile };
-export * from './TileTypes';
+import Tile from './Tile';
+export { Tile };
+export * from './TileTypes';
+//# sourceMappingURL=index.js.map