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

package/dist/Tile/Tile.js

@@ -1,42 +1,43 @@
-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
+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;

package/dist/Tile/TileBody.js

@@ -1,18 +1,15 @@
-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
+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;

package/dist/Tile/TileCommonItems.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { TileDropdownButton, TileHyperLink, TileIconButton, TileNote, TileStandardButton, TileToggleButton } from './TileTypes';
+import React from 'react';
 import { Size } from '../types';
 export declare const TileNoteText: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TileNoteIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -7,4 +7,4 @@ export declare const TileNoteWrapper: import("styled-components").StyledComponen
 export declare const TileHyperLinkIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TileHyperLinkText: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TileHyperLinkWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const RenderTileItem: (item: TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton | TileNote | TileHyperLink, size: Size, key?: any | undefined) => JSX.Element;
+export declare const RenderTileItem: (item: TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton | TileNote | TileHyperLink, size: Size, key?: any | undefined) => React.JSX.Element;

package/dist/Tile/TileCommonItems.js

@@ -1,117 +1,75 @@
-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
+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;

package/dist/Tile/TileFooter.js

@@ -1,28 +1,19 @@
-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
+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;

package/dist/Tile/TileHeader.js

@@ -1,81 +1,57 @@
-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
+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;

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

package/dist/Tile/TileTypes.js

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