@laerdal/life-react-components 1.8.0 → 1.9.0-dev.1

package/dist/Tile/TileCommonItems.js

@@ -0,0 +1,126 @@
+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(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+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([""])));
+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([""])));
+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':
+      {
+        return /*#__PURE__*/_jsx(IconButton, {
+          variant: 'secondary',
+          useTransparentBackground: true,
+          shape: 'circular',
+          action: item.action,
+          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,
+          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(TileHyperLinkIcon, {
+              children: /*#__PURE__*/React.cloneElement(linkIcon, {
+                size: size === Size.Large ? '28px' : '24px'
+              })
+            }), /*#__PURE__*/_jsx(TileHyperLinkText, {
+              children: linkText
+            })]
+          }))
+        }, key);
+      }
+
+    case 'button':
+      {
+        var buttonText = item.buttonText,
+            _componentType = item.componentType,
+            _rest = _objectWithoutProperties(item, _excluded2);
+
+        return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
+          size: size
+        }, _rest), {}, {
+          children: buttonText
+        }), key);
+      }
+  }
+};
+//# sourceMappingURL=TileCommonItems.js.map

package/dist/Tile/TileCommonItems.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Tile/TileCommonItems.tsx"],"names":["Button","IconButton","ToggleButton","DropdownButton","React","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ComponentXXSStyling","HyperLink","Size","TileNoteText","div","TileNoteIcon","TileNoteWrapper","neutral_600","Regular","TileHyperLinkIcon","TileHyperLinkText","TileHyperLinkWrapper","Bold","primary_500","RenderTileItem","item","size","key","undefined","componentType","action","disabled","icon","active","onChange","defaultState","activeState","items","itemsType","onClick","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight","noteIcon","cloneElement","Large","noteText","linkText","linkIcon","rest","buttonText"],"mappings":"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","sourcesContent":["import {\n  TileDropdownButton,\n  TileHyperLink,\n  TileIconButton,\n  TileNote,\n  TileStandardButton,\n  TileToggleButton\n} from './TileTypes';\nimport {Button, IconButton} from '../Button';\nimport {ToggleButton} from '../Toggles';\nimport {DropdownButton} from '../Dropdown';\nimport React from 'react';\nimport styled from 'styled-components';\nimport {\n  COLORS, ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles';\nimport {HyperLink} from '../HyperLink';\nimport {Size} from '../types';\n\n\nexport const TileNoteText = styled.div``;\nexport const TileNoteIcon = styled.div``;\nexport const TileNoteWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  color: ${COLORS.neutral_600};\n\n  &.small {\n    gap: 4px;\n\n    ${TileNoteIcon} {\n      width: 16px;\n      height: 16px;\n    }\n\n    ${TileNoteText} {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n    }\n  }\n\n  &.medium {\n    gap: 6px;\n\n    ${TileNoteIcon} {\n      width: 16px;\n      height: 16px;\n    }\n\n    ${TileNoteText} {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n  }\n\n  &.large {\n    gap: 8px;\n\n    ${TileNoteIcon} {\n      width: 20px;\n      height: 20px;\n    }\n\n    ${TileNoteText} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n  }\n`;\n\n\nexport const TileHyperLinkIcon = styled.div``;\nexport const TileHyperLinkText = styled.div``;\n\nexport const TileHyperLinkWrapper = styled.div`\n  width: max-content;\n\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500)}\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n\n  &.small {\n    ${TileHyperLinkIcon} {\n      width: 24px;\n      height: 24px;\n    }\n\n    ${TileHyperLinkText} {\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n    }\n\n    a {\n      gap: 4px;\n    }\n  }\n\n  &.medium {\n    ${TileHyperLinkIcon} {\n      width: 24px;\n      height: 24px;\n    }\n\n    ${TileHyperLinkText} {\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n    }\n\n    a {\n      gap: 6px;\n    }\n  }\n\n  &.large {\n    ${TileHyperLinkIcon} {\n      width: 28px;\n      height: 28px;\n    }\n\n    ${TileHyperLinkText} {\n      ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n    }\n\n    a {\n      gap: 8px;\n    }\n  }\n`\n\nexport const RenderTileItem = (item: TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton | TileNote | TileHyperLink,\n                               size: Size,\n                               key: any | undefined = undefined) => {\n  switch (item.componentType) {\n    case 'icon': {\n      return <IconButton key={key}\n                         variant={'secondary'}\n                         useTransparentBackground={true}\n                         shape={'circular'}\n                         action={item.action}\n                         disabled={item.disabled}>\n        {item.icon}\n      </IconButton>\n    }\n    case 'toggle': {\n      return <ToggleButton key={key}\n                           active={item.active}\n                           onChange={item.onChange}\n                           defaultState={item.defaultState}\n                           activeState={item.activeState}\n                           disabled={item.disabled}/>\n    }\n    case 'dropdown': {\n      return <DropdownButton key={key}\n                             type={'icon'}\n                             items={item.items}\n                             itemsType={item.itemsType}\n                             onClick={item.onClick}\n                             icon={item.icon}\n                             action={item.action}\n                             actionIcon={item.actionIcon}\n                             actionLabel={item.actionLabel}\n                             actionVariant={item.actionVariant}\n                             actionLoading={item.actionLoading}\n                             multiSelect={item.multiSelect}\n                             scrollable={item.scrollable}\n                             pinTopItem={item.pinTopItem}\n                             maxHeight={item.maxHeight}\n                             disabled={item.disabled}/>\n\n    }\n    case 'note': {\n      return <TileNoteWrapper key={key} className={size}>\n        {\n          item.noteIcon &&\n          <TileNoteIcon>\n            {React.cloneElement(item.noteIcon as React.ReactElement, {size: size === Size.Large ? '20px' : '16'})}\n          </TileNoteIcon>\n        }\n        <TileNoteText>{item.noteText}</TileNoteText>\n      </TileNoteWrapper>\n\n    }\n    case 'link': {\n      const {linkText, componentType, linkIcon, ...rest} = item;\n      return <TileHyperLinkWrapper className={size} key={key}>\n        <HyperLink {...rest}>\n          <TileHyperLinkIcon>\n            {React.cloneElement(linkIcon as React.ReactElement, {size: size === Size.Large ? '28px' : '24px'})}\n          </TileHyperLinkIcon>\n          <TileHyperLinkText>{linkText}</TileHyperLinkText>\n        </HyperLink>\n      </TileHyperLinkWrapper>\n    }\n    case 'button': {\n      const {buttonText, componentType, ...rest} = item;\n      return <Button key={key}\n                     size={size}\n                     {...rest}>\n        {buttonText}\n      </Button>\n    }\n  }\n}\n"],"file":"TileCommonItems.js"}

package/dist/Tile/TileFooter.cjs

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _TileCommonItems = require("./TileCommonItems");
+
+var _styles = require("../styles");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2, _templateObject3;
+
+var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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 = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1\n"])));
+
+var RightItemContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  color: ", ";\n"])), _styles.COLORS.neutral_600);
+
+var TileFooter = function TileFooter(_ref) {
+  var buttons = _ref.buttons,
+      leftItem = _ref.leftItem,
+      size = _ref.size;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
+    className: size,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(LeftItemContainer, {
+      children: leftItem && (0, _TileCommonItems.RenderTileItem)(leftItem, size)
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(RightItemContainer, {
+      children: buttons && buttons.map(function (value, index) {
+        return (0, _TileCommonItems.RenderTileItem)(value, size, index);
+      })
+    })]
+  });
+};
+
+var _default = TileFooter;
+exports.default = _default;
+//# sourceMappingURL=TileFooter.cjs.map

package/dist/Tile/TileFooter.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Tile/TileFooter.tsx"],"names":["Wrapper","styled","div","LeftItemContainer","RightItemContainer","COLORS","neutral_600","TileFooter","buttons","leftItem","size","map","value","index"],"mappings":";;;;;;;;;;;AAAA;;AAGA;;AACA;;AACA;;;;;;AAEA,IAAMA,OAAO,GAAGC,0BAAOC,GAAV,0bAAb;;AA2BA,IAAMC,iBAAiB,GAAGF,0BAAOC,GAAV,kGAAvB;;AAIA,IAAME,kBAAkB,GAAGH,0BAAOC,GAAV,gLAIbG,eAAOC,WAJM,CAAxB;;AAOA,IAAMC,UAAqE,GAAG,SAAxEA,UAAwE,OAA+B;AAAA,MAA7BC,OAA6B,QAA7BA,OAA6B;AAAA,MAApBC,QAAoB,QAApBA,QAAoB;AAAA,MAAVC,IAAU,QAAVA,IAAU;AAE3G,sBACE,sBAAC,OAAD;AAAS,IAAA,SAAS,EAAEA,IAApB;AAAA,4BACE,qBAAC,iBAAD;AAAA,gBAAoBD,QAAQ,IAAI,qCAAeA,QAAf,EAAyBC,IAAzB;AAAhC,MADF,eAEE,qBAAC,kBAAD;AAAA,gBAAqBF,OAAO,IAAIA,OAAO,CAACG,GAAR,CAAY,UAACC,KAAD,EAAQC,KAAR;AAAA,eAAkB,qCAAeD,KAAf,EAAsBF,IAAtB,EAA4BG,KAA5B,CAAlB;AAAA,OAAZ;AAAhC,MAFF;AAAA,IADF;AAMD,CARD;;eAUeN,U","sourcesContent":["import React from 'react';\nimport {TileFooterProps} from './TileTypes';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {RenderTileItem} from './TileCommonItems';\nimport {COLORS} from '../styles';\n\nconst Wrapper = styled.div`\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\nconst LeftItemContainer = styled.div`\n  flex: 1\n`;\n\nconst RightItemContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  color: ${COLORS.neutral_600};\n`;\n\nconst TileFooter: React.FunctionComponent<TileFooterProps & { size: Size }> = ({buttons, leftItem, size}) => {\n\n  return (\n    <Wrapper className={size}>\n      <LeftItemContainer>{leftItem && RenderTileItem(leftItem, size)}</LeftItemContainer>\n      <RightItemContainer>{buttons && buttons.map((value, index) => RenderTileItem(value, size, index))}</RightItemContainer>\n    </Wrapper>\n  )\n}\n\nexport default TileFooter;\n"],"file":"TileFooter.cjs"}

package/dist/Tile/TileFooter.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TileFooterProps } from './TileTypes';
+import { Size } from '../types';
+declare const TileFooter: React.FunctionComponent<TileFooterProps & {
+    size: Size;
+}>;
+export default TileFooter;

package/dist/Tile/TileFooter.js

@@ -0,0 +1,32 @@
+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/TileFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Tile/TileFooter.tsx"],"names":["React","styled","RenderTileItem","COLORS","Wrapper","div","LeftItemContainer","RightItemContainer","neutral_600","TileFooter","buttons","leftItem","size","map","value","index"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAGA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,cAAR,QAA6B,mBAA7B;AACA,SAAQC,MAAR,QAAqB,WAArB;;;AAEA,IAAMC,OAAO,GAAGH,MAAM,CAACI,GAAV,4aAAb;AA2BA,IAAMC,iBAAiB,GAAGL,MAAM,CAACI,GAAV,oFAAvB;AAIA,IAAME,kBAAkB,GAAGN,MAAM,CAACI,GAAV,kKAIbF,MAAM,CAACK,WAJM,CAAxB;;AAOA,IAAMC,UAAqE,GAAG,SAAxEA,UAAwE,OAA+B;AAAA,MAA7BC,OAA6B,QAA7BA,OAA6B;AAAA,MAApBC,QAAoB,QAApBA,QAAoB;AAAA,MAAVC,IAAU,QAAVA,IAAU;AAE3G,sBACE,MAAC,OAAD;AAAS,IAAA,SAAS,EAAEA,IAApB;AAAA,4BACE,KAAC,iBAAD;AAAA,gBAAoBD,QAAQ,IAAIT,cAAc,CAACS,QAAD,EAAWC,IAAX;AAA9C,MADF,eAEE,KAAC,kBAAD;AAAA,gBAAqBF,OAAO,IAAIA,OAAO,CAACG,GAAR,CAAY,UAACC,KAAD,EAAQC,KAAR;AAAA,eAAkBb,cAAc,CAACY,KAAD,EAAQF,IAAR,EAAcG,KAAd,CAAhC;AAAA,OAAZ;AAAhC,MAFF;AAAA,IADF;AAMD,CARD;;AAUA,eAAeN,UAAf","sourcesContent":["import React from 'react';\nimport {TileFooterProps} from './TileTypes';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {RenderTileItem} from './TileCommonItems';\nimport {COLORS} from '../styles';\n\nconst Wrapper = styled.div`\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\nconst LeftItemContainer = styled.div`\n  flex: 1\n`;\n\nconst RightItemContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  color: ${COLORS.neutral_600};\n`;\n\nconst TileFooter: React.FunctionComponent<TileFooterProps & { size: Size }> = ({buttons, leftItem, size}) => {\n\n  return (\n    <Wrapper className={size}>\n      <LeftItemContainer>{leftItem && RenderTileItem(leftItem, size)}</LeftItemContainer>\n      <RightItemContainer>{buttons && buttons.map((value, index) => RenderTileItem(value, size, index))}</RightItemContainer>\n    </Wrapper>\n  )\n}\n\nexport default TileFooter;\n"],"file":"TileFooter.js"}

package/dist/Tile/TileHeader.cjs

@@ -0,0 +1,90 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _types = require("../types");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _styles = require("../styles");
+
+var _Tooltips = require("../Tooltips");
+
+var _Button = require("../Button");
+
+var _SystemIcons = require("../icons/systemicons/SystemIcons");
+
+var _TileCommonItems = require("./TileCommonItems");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+var TagLineContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), _styles.COLORS.neutral_600);
+
+var TitleContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), _styles.COLORS.black);
+
+var TextContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex: 1;\n"])));
+
+var ActionContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n"])));
+
+var Wrapper = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n\n  min-height: 56px;\n  box-sizing: border-box;\n\n  &.small {\n    padding: 4px 16px;\n    min-height: 56px;\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"])), TagLineContainer, (0, _styles.ComponentXXSStyling)(_styles.ComponentTextStyle.Regular, null), TitleContainer, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, null), TagLineContainer, (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null), TitleContainer, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, null), TagLineContainer, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), TitleContainer, (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Bold, null));
+
+var TileHeader = function TileHeader(_ref) {
+  var title = _ref.title,
+      tagLine = _ref.tagLine,
+      tooltip = _ref.tooltip,
+      buttons = _ref.buttons,
+      size = _ref.size;
+
+  var renderTooltip = function renderTooltip() {
+    return !!tooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltips.TooltipWrapper, {
+      delay: "0s",
+      size: _types.Size.XSmall,
+      align: "center",
+      position: "bottom",
+      withArrow: false,
+      label: tooltip,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+        variant: "secondary",
+        shape: "circular",
+        style: {
+          cursor: 'help'
+        },
+        action: function action() {},
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.Help, {
+          size: "24px",
+          color: _styles.COLORS.neutral_600
+        })
+      })
+    });
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
+    className: size,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(TextContainer, {
+      children: [tagLine && /*#__PURE__*/(0, _jsxRuntime.jsx)(TagLineContainer, {
+        children: tagLine
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TitleContainer, {
+        children: title
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ActionContainer, {
+      children: [renderTooltip(), buttons && buttons.map(function (item, index) {
+        return (0, _TileCommonItems.RenderTileItem)(item, size, index);
+      })]
+    })]
+  });
+};
+
+var _default = TileHeader;
+exports.default = _default;
+//# sourceMappingURL=TileHeader.cjs.map

package/dist/Tile/TileHeader.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Tile/TileHeader.tsx"],"names":["TagLineContainer","styled","div","COLORS","neutral_600","TitleContainer","black","TextContainer","ActionContainer","Wrapper","ComponentTextStyle","Regular","Bold","TileHeader","title","tagLine","tooltip","buttons","size","renderTooltip","Size","XSmall","cursor","map","item","index"],"mappings":";;;;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AAQA;;AACA;;AACA;;AACA;;;;;;AAEA,IAAMA,gBAAgB,GAAGC,0BAAOC,GAAV,sGACXC,eAAOC,WADI,CAAtB;;AAIA,IAAMC,cAAc,GAAGJ,0BAAOC,GAAV,wGACTC,eAAOG,KADE,CAApB;;AAIA,IAAMC,aAAa,GAAGN,0BAAOC,GAAV,4KAAnB;;AAOA,IAAMM,eAAe,GAAGP,0BAAOC,GAAV,iIAArB;;AAKA,IAAMO,OAAO,GAAGR,0BAAOC,GAAV,ykBAWPF,gBAXO,EAYL,iCAAoBU,2BAAmBC,OAAvC,EAAgD,IAAhD,CAZK,EAePN,cAfO,EAgBL,+BAAkBK,2BAAmBE,IAArC,EAA2C,IAA3C,CAhBK,EAwBPZ,gBAxBO,EAyBL,gCAAmBU,2BAAmBC,OAAtC,EAA+C,IAA/C,CAzBK,EA4BPN,cA5BO,EA6BL,+BAAkBK,2BAAmBE,IAArC,EAA2C,IAA3C,CA7BK,EAsCPZ,gBAtCO,EAuCL,+BAAkBU,2BAAmBC,OAArC,EAA8C,IAA9C,CAvCK,EA0CPN,cA1CO,EA2CL,+BAAkBK,2BAAmBE,IAArC,EAA2C,IAA3C,CA3CK,CAAb;;AAkDA,IAAMC,UAAqE,GAAG,SAAxEA,UAAwE,OAMO;AAAA,MALJC,KAKI,QALJA,KAKI;AAAA,MAJJC,OAII,QAJJA,OAII;AAAA,MAHJC,OAGI,QAHJA,OAGI;AAAA,MAFJC,OAEI,QAFJA,OAEI;AAAA,MADJC,IACI,QADJA,IACI;;AAEnF,MAAMC,aAAa,GAAG,SAAhBA,aAAgB;AAAA,WACpB,CAAC,CAACH,OAAF,iBACA,qBAAC,wBAAD;AAAgB,MAAA,KAAK,EAAC,IAAtB;AAA2B,MAAA,IAAI,EAAEI,YAAKC,MAAtC;AACgB,MAAA,KAAK,EAAC,QADtB;AAEgB,MAAA,QAAQ,EAAC,QAFzB;AAGgB,MAAA,SAAS,EAAE,KAH3B;AAIgB,MAAA,KAAK,EAAEL,OAJvB;AAAA,6BAKE,qBAAC,kBAAD;AAAY,QAAA,OAAO,EAAC,WAApB;AACY,QAAA,KAAK,EAAC,UADlB;AAEY,QAAA,KAAK,EAAE;AAACM,UAAAA,MAAM,EAAE;AAAT,SAFnB;AAGY,QAAA,MAAM,EAAE,kBAAM,CACb,CAJb;AAAA,+BAKE,qBAAC,iBAAD;AAAM,UAAA,IAAI,EAAC,MAAX;AAAkB,UAAA,KAAK,EAAEnB,eAAOC;AAAhC;AALF;AALF,MAFoB;AAAA,GAAtB;;AAiBA,sBACE,sBAAC,OAAD;AAAS,IAAA,SAAS,EAAEc,IAApB;AAAA,4BACE,sBAAC,aAAD;AAAA,iBACGH,OAAO,iBAAI,qBAAC,gBAAD;AAAA,kBAAmBA;AAAnB,QADd,eAEE,qBAAC,cAAD;AAAA,kBAAiBD;AAAjB,QAFF;AAAA,MADF,eAKE,sBAAC,eAAD;AAAA,iBACGK,aAAa,EADhB,EAEGF,OAAO,IAAIA,OAAO,CAACM,GAAR,CAAY,UAACC,IAAD,EAAOC,KAAP;AAAA,eAAiB,qCAAeD,IAAf,EAAqBN,IAArB,EAA2BO,KAA3B,CAAjB;AAAA,OAAZ,CAFd;AAAA,MALF;AAAA,IADF;AAYD,CArCD;;eAuCeZ,U","sourcesContent":["import React from 'react';\nimport {TileHeaderProps} from './TileTypes';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {\n  COLORS,\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle, ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles';\nimport {TooltipWrapper} from '../Tooltips';\nimport {IconButton} from '../Button';\nimport {Help} from '../icons/systemicons/SystemIcons';\nimport {RenderTileItem} from './TileCommonItems';\n\nconst TagLineContainer = styled.div`\n  color: ${COLORS.neutral_600};\n`;\n\nconst TitleContainer = styled.div`\n  color: ${COLORS.black};\n`;\n\nconst TextContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex: 1;\n`;\n\nconst ActionContainer = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst Wrapper = styled.div`\n  display: flex;\n  align-items: center;\n\n  min-height: 56px;\n  box-sizing: border-box;\n\n  &.small {\n    padding: 4px 16px;\n    min-height: 56px;\n\n    ${TagLineContainer} {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${TitleContainer} {\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n    }\n  }\n\n  &.medium {\n    padding: 8px 20px;\n    min-height: 64px;\n\n    ${TagLineContainer} {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${TitleContainer} {\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n    }\n\n  }\n\n  &.large {\n    padding: 12px 24px;\n    min-height: 72px;\n\n    ${TagLineContainer} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${TitleContainer} {\n      ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n    }\n\n  }\n`;\n\n\nconst TileHeader: React.FunctionComponent<TileHeaderProps & { size: Size }> = ({\n                                                                                 title,\n                                                                                 tagLine,\n                                                                                 tooltip,\n                                                                                 buttons,\n                                                                                 size\n                                                                               }) => {\n\n  const renderTooltip = () =>\n    !!tooltip &&\n    <TooltipWrapper delay=\"0s\" size={Size.XSmall}\n                    align=\"center\"\n                    position=\"bottom\"\n                    withArrow={false}\n                    label={tooltip}>\n      <IconButton variant=\"secondary\"\n                  shape=\"circular\"\n                  style={{cursor: 'help'}}\n                  action={() => {\n                  }}>\n        <Help size=\"24px\" color={COLORS.neutral_600}/>\n      </IconButton>\n    </TooltipWrapper>;\n\n\n  return (\n    <Wrapper className={size}>\n      <TextContainer>\n        {tagLine && <TagLineContainer>{tagLine}</TagLineContainer>}\n        <TitleContainer>{title}</TitleContainer>\n      </TextContainer>\n      <ActionContainer>\n        {renderTooltip()}\n        {buttons && buttons.map((item, index) => RenderTileItem(item, size, index))}\n      </ActionContainer>\n    </Wrapper>\n  )\n}\n\nexport default TileHeader;\n"],"file":"TileHeader.cjs"}

package/dist/Tile/TileHeader.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TileHeaderProps } from './TileTypes';
+import { Size } from '../types';
+declare const TileHeader: React.FunctionComponent<TileHeaderProps & {
+    size: Size;
+}>;
+export default TileHeader;

package/dist/Tile/TileHeader.js

@@ -0,0 +1,68 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+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 { Help } from '../icons/systemicons/SystemIcons';
+import { RenderTileItem } from './TileCommonItems';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var TagLineContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n"])), COLORS.neutral_600);
+var TitleContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), COLORS.black);
+var TextContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex: 1;\n"])));
+var ActionContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
+var Wrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  min-height: 56px;\n  box-sizing: border-box;\n\n  &.small {\n    padding: 4px 16px;\n    min-height: 56px;\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"])), TagLineContainer, ComponentXXSStyling(ComponentTextStyle.Regular, null), TitleContainer, ComponentSStyling(ComponentTextStyle.Bold, null), TagLineContainer, ComponentXSStyling(ComponentTextStyle.Regular, null), TitleContainer, ComponentMStyling(ComponentTextStyle.Bold, null), TagLineContainer, ComponentSStyling(ComponentTextStyle.Regular, null), TitleContainer, ComponentLStyling(ComponentTextStyle.Bold, null));
+
+var TileHeader = function TileHeader(_ref) {
+  var title = _ref.title,
+      tagLine = _ref.tagLine,
+      tooltip = _ref.tooltip,
+      buttons = _ref.buttons,
+      size = _ref.size;
+
+  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(Help, {
+          size: "24px",
+          color: COLORS.neutral_600
+        })
+      })
+    });
+  };
+
+  return /*#__PURE__*/_jsxs(Wrapper, {
+    className: size,
+    children: [/*#__PURE__*/_jsxs(TextContainer, {
+      children: [tagLine && /*#__PURE__*/_jsx(TagLineContainer, {
+        children: tagLine
+      }), /*#__PURE__*/_jsx(TitleContainer, {
+        children: title
+      })]
+    }), /*#__PURE__*/_jsxs(ActionContainer, {
+      children: [renderTooltip(), buttons && buttons.map(function (item, index) {
+        return RenderTileItem(item, size, index);
+      })]
+    })]
+  });
+};
+
+export default TileHeader;
+//# sourceMappingURL=TileHeader.js.map

package/dist/Tile/TileHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Tile/TileHeader.tsx"],"names":["React","Size","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ComponentXXSStyling","TooltipWrapper","IconButton","Help","RenderTileItem","TagLineContainer","div","neutral_600","TitleContainer","black","TextContainer","ActionContainer","Wrapper","Regular","Bold","TileHeader","title","tagLine","tooltip","buttons","size","renderTooltip","XSmall","cursor","map","item","index"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {TileHeaderProps} from './TileTypes';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {\n  COLORS,\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle, ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles';\nimport {TooltipWrapper} from '../Tooltips';\nimport {IconButton} from '../Button';\nimport {Help} from '../icons/systemicons/SystemIcons';\nimport {RenderTileItem} from './TileCommonItems';\n\nconst TagLineContainer = styled.div`\n  color: ${COLORS.neutral_600};\n`;\n\nconst TitleContainer = styled.div`\n  color: ${COLORS.black};\n`;\n\nconst TextContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex: 1;\n`;\n\nconst ActionContainer = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst Wrapper = styled.div`\n  display: flex;\n  align-items: center;\n\n  min-height: 56px;\n  box-sizing: border-box;\n\n  &.small {\n    padding: 4px 16px;\n    min-height: 56px;\n\n    ${TagLineContainer} {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${TitleContainer} {\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n    }\n  }\n\n  &.medium {\n    padding: 8px 20px;\n    min-height: 64px;\n\n    ${TagLineContainer} {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${TitleContainer} {\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n    }\n\n  }\n\n  &.large {\n    padding: 12px 24px;\n    min-height: 72px;\n\n    ${TagLineContainer} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${TitleContainer} {\n      ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n    }\n\n  }\n`;\n\n\nconst TileHeader: React.FunctionComponent<TileHeaderProps & { size: Size }> = ({\n                                                                                 title,\n                                                                                 tagLine,\n                                                                                 tooltip,\n                                                                                 buttons,\n                                                                                 size\n                                                                               }) => {\n\n  const renderTooltip = () =>\n    !!tooltip &&\n    <TooltipWrapper delay=\"0s\" size={Size.XSmall}\n                    align=\"center\"\n                    position=\"bottom\"\n                    withArrow={false}\n                    label={tooltip}>\n      <IconButton variant=\"secondary\"\n                  shape=\"circular\"\n                  style={{cursor: 'help'}}\n                  action={() => {\n                  }}>\n        <Help size=\"24px\" color={COLORS.neutral_600}/>\n      </IconButton>\n    </TooltipWrapper>;\n\n\n  return (\n    <Wrapper className={size}>\n      <TextContainer>\n        {tagLine && <TagLineContainer>{tagLine}</TagLineContainer>}\n        <TitleContainer>{title}</TitleContainer>\n      </TextContainer>\n      <ActionContainer>\n        {renderTooltip()}\n        {buttons && buttons.map((item, index) => RenderTileItem(item, size, index))}\n      </ActionContainer>\n    </Wrapper>\n  )\n}\n\nexport default TileHeader;\n"],"file":"TileHeader.js"}

package/dist/Tile/TileTypes.cjs

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=TileTypes.cjs.map

package/dist/Tile/TileTypes.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"TileTypes.cjs"}

package/dist/Tile/TileTypes.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+import { IconButtonProps } from '../Button/Iconbutton';
+import { ToggleButtonProps } from '../Toggles/ToggleButton';
+import { DropdownButtonProps } from '../Dropdown/DropdownButtonTypes';
+import { ButtonProps } from '../Button/Button';
+import { HyperlinkProps } from '../HyperLink/HyperLink';
+import { Size } from '../types';
+export declare type TileIconButton = Pick<IconButtonProps, 'action' | 'disabled'> & {
+    componentType: 'icon';
+    icon: React.ReactNode;
+};
+export declare 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'> & {
+    componentType: 'dropdown';
+    icon: React.ReactNode;
+};
+export declare type TileStandardButton = Pick<ButtonProps, 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {
+    componentType: 'button';
+    buttonText: string;
+};
+export declare type TileNote = {
+    componentType: 'note';
+    noteIcon?: React.ReactNode;
+    noteText: string;
+};
+export declare 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;
+export interface TileHeaderProps {
+    title: string;
+    tooltip?: string;
+    tagLine?: string;
+    buttons?: HeaderButtons[];
+}
+export interface TileFooterProps {
+    leftItem?: TileNote | TileHyperLink | TileStandardButton;
+    buttons?: FooterButtons[];
+}
+export interface TileProps {
+    style?: {
+        width?: string;
+        minWidth?: string;
+        maxWidth?: string;
+        height?: string;
+        minHeight?: string;
+        maxHeight?: string;
+    };
+    size?: Size.Small | Size.Medium | Size.Large;
+    header?: TileHeaderProps;
+    footer?: TileFooterProps;
+}

package/dist/Tile/TileTypes.js

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

package/dist/Tile/TileTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"TileTypes.js"}

package/dist/Tile/index.cjs

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  Tile: true
+};
+Object.defineProperty(exports, "Tile", {
+  enumerable: true,
+  get: function get() {
+    return _Tile.default;
+  }
+});
+
+var _Tile = _interopRequireDefault(require("./Tile"));
+
+var _TileTypes = require("./TileTypes");
+
+Object.keys(_TileTypes).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _TileTypes[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _TileTypes[key];
+    }
+  });
+});
+//# sourceMappingURL=index.cjs.map

package/dist/Tile/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Tile/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AAGA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["import Tile from './Tile';\n\nexport {Tile}\nexport * from './TileTypes';\n"],"file":"index.cjs"}

package/dist/Tile/index.d.ts

@@ -0,0 +1,3 @@
+import Tile from './Tile';
+export { Tile };
+export * from './TileTypes';

package/dist/Tile/index.js

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

package/dist/Tile/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Tile/index.ts"],"names":["Tile"],"mappings":"AAAA,OAAOA,IAAP,MAAiB,QAAjB;AAEA,SAAQA,IAAR;AACA,cAAc,aAAd","sourcesContent":["import Tile from './Tile';\n\nexport {Tile}\nexport * from './TileTypes';\n"],"file":"index.js"}

package/dist/common/StackState.cjs

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useStackState = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var useStackState = function useStackState(initial) {
+  var _React$useState = _react.default.useState(initial ? [initial] : []),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      state = _React$useState2[0],
+      setState = _React$useState2[1];
+
+  var reset = _react.default.useCallback(function (value) {
+    return setState(!!value || !!initial ? [value !== null && value !== void 0 ? value : initial] : []);
+  }, [initial]);
+
+  var peek = _react.default.useCallback(function () {
+    return !!state.length ? state[state.length - 1] : undefined;
+  }, [state]);
+
+  var push = _react.default.useCallback(function (value) {
+    return setState(state.concat(value));
+  }, [state]);
+
+  var pop = _react.default.useCallback(function () {
+    return setState(state.slice(0, -1));
+  }, [state]);
+
+  var length = state.length;
+  return {
+    peek: peek,
+    push: push,
+    pop: pop,
+    reset: reset,
+    length: length
+  };
+};
+
+exports.useStackState = useStackState;
+//# sourceMappingURL=StackState.cjs.map