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

package/dist/Tile/TileHeader.cjs

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
@@ -18,15 +18,15 @@ var _TileCommonItems = require("./TileCommonItems");
 var _Tag = require("../Tag");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var SubtitleIconContainer = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 16px;\n  height: 16px;\n\n  .large & {\n    width: 20px;\n    height: 20px;\n  }\n"])));
-var SubtitleContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  display: flex;\n  align-items: flex-start;\n  gap: 4px;\n"])), _styles.COLORS.neutral_600);
-var TitleContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), _styles.COLORS.black);
-var TextContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\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 = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  height: 100%;\n"])));
-var Wrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\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, (0, _styles.ComponentXXSStyling)(_styles.ComponentTextStyle.Regular, null), TitleContainer, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, null), SubtitleContainer, (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null), TitleContainer, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, null), SubtitleContainer, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), TitleContainer, (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Bold, null));
-var TagContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  align-self: center;\n"])));
+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) { (0, _defineProperty2["default"])(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; }
+var SubtitleIconContainer = _styledComponents["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  width: 16px;\n  height: 16px;\n\n  .large & {\n    width: 20px;\n    height: 20px;\n  }\n"])));
+var SubtitleContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  display: flex;\n  align-items: flex-start;\n  gap: 4px;\n"])), _styles.COLORS.neutral_600);
+var TitleContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n"])), _styles.COLORS.black);
+var TextContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\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 = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  height: 100%;\n"])));
+var Wrapper = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\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, (0, _styles.ComponentXXSStyling)(_styles.ComponentTextStyle.Regular, null), TitleContainer, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, null), SubtitleContainer, (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null), TitleContainer, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, null), SubtitleContainer, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), TitleContainer, (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Bold, null));
+var TagContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  align-self: center;\n"])));
 var TileHeader = function TileHeader(_ref) {
   var title = _ref.title,
     subtitle = _ref.subtitle,
@@ -69,7 +69,7 @@ var TileHeader = function TileHeader(_ref) {
         children: title
       }), subtitle && /*#__PURE__*/(0, _jsxRuntime.jsxs)(SubtitleContainer, {
         children: [subtitleIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(SubtitleIconContainer, {
-          children: /*#__PURE__*/_react.default.cloneElement(subtitleIcon, {
+          children: /*#__PURE__*/_react["default"].cloneElement(subtitleIcon, {
             size: size === _types.Size.Large ? '20px' : '16px'
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
@@ -84,5 +84,5 @@ var TileHeader = function TileHeader(_ref) {
   });
 };
 var _default = TileHeader;
-exports.default = _default;
+exports["default"] = _default;
 //# sourceMappingURL=TileHeader.cjs.map

package/dist/Tile/TileHeader.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TileHeader.cjs","names":["SubtitleIconContainer","styled","span","SubtitleContainer","div","COLORS","neutral_600","TitleContainer","black","TextContainer","ActionContainer","Wrapper","ComponentXXSStyling","ComponentTextStyle","Regular","ComponentSStyling","Bold","ComponentXSStyling","ComponentMStyling","ComponentLStyling","TagContainer","TileHeader","title","subtitle","subtitleIcon","tooltip","buttons","size","tag","renderTooltip","Size","XSmall","cursor","renderTag","React","cloneElement","Large","map","item","index","RenderTileItem"],"sources":["../../src/Tile/TileHeader.tsx"],"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,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles';\nimport {TooltipWrapper} from '../Tooltips';\nimport {IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\nimport {RenderTileItem} from './TileCommonItems';\nimport {Tag} from \"../Tag\";\n\nconst SubtitleIconContainer = styled.span`\n  display: flex;\n  width: 16px;\n  height: 16px;\n\n  .large & {\n    width: 20px;\n    height: 20px;\n  }\n`;\n\nconst SubtitleContainer = styled.div`\n  color: ${COLORS.neutral_600};\n  display: flex;\n  align-items: flex-start;\n  gap: 4px;\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  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\nconst ActionContainer = styled.div`\n  display: flex;\n  height: 100%;\n`;\n\nconst Wrapper = styled.div`\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    ${SubtitleContainer} {\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    ${SubtitleContainer} {\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    ${SubtitleContainer} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${TitleContainer} {\n      ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n    }\n\n  }\n`;\n\nconst TagContainer = styled.div`\n  align-self: center;\n`;\n\n\nconst TileHeader: React.FunctionComponent<TileHeaderProps & { size: Size }> = ({\n                                                                                 title,\n                                                                                 subtitle,\n                                                                                 subtitleIcon,\n                                                                                 tooltip,\n                                                                                 buttons,\n                                                                                 size,\n                                                                                 tag\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        <SystemIcons.Help size=\"24px\" color={COLORS.neutral_600}/>\n      </IconButton>\n    </TooltipWrapper>;\n\n\n  const renderTag = () => !!tag && <TagContainer><Tag {...tag}/></TagContainer>\n\n\n  return (\n    <Wrapper className={size}>\n      <TextContainer>\n        <TitleContainer>{title}</TitleContainer>\n        {\n          subtitle &&\n          <SubtitleContainer>\n            {\n              subtitleIcon &&\n              <SubtitleIconContainer>{React.cloneElement(subtitleIcon as React.ReactElement, {size: size === Size.Large ? '20px' : '16px'})}</SubtitleIconContainer>\n            }\n            <span>{subtitle}</span>\n          </SubtitleContainer>\n        }\n      </TextContainer>\n      <ActionContainer>\n        {renderTooltip()}\n        {renderTag()}\n        {buttons && buttons.map((item, index) => RenderTileItem(item, size, index))}\n      </ActionContainer>\n    </Wrapper>\n  )\n}\n\nexport default TileHeader;\n"],"mappings":"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"}
+{"version":3,"file":"TileHeader.cjs","names":["_react","_interopRequireDefault","require","_types","_styledComponents","_styles","_Tooltips","_Button","_icons","_TileCommonItems","_Tag","_jsxRuntime","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","SubtitleIconContainer","styled","span","_taggedTemplateLiteral2","SubtitleContainer","div","COLORS","neutral_600","TitleContainer","black","TextContainer","ActionContainer","Wrapper","ComponentXXSStyling","ComponentTextStyle","Regular","ComponentSStyling","Bold","ComponentXSStyling","ComponentMStyling","ComponentLStyling","TagContainer","TileHeader","_ref","title","subtitle","subtitleIcon","tooltip","buttons","size","tag","renderTooltip","jsx","TooltipWrapper","delay","Size","XSmall","align","position","withArrow","label","children","IconButton","variant","shape","style","cursor","action","SystemIcons","Help","color","renderTag","Tag","jsxs","className","React","cloneElement","Large","map","item","index","RenderTileItem","_default","exports"],"sources":["../../src/Tile/TileHeader.tsx"],"sourcesContent":["import React from 'react';\r\nimport {TileHeaderProps} from './TileTypes';\r\nimport {Size} from '../types';\r\nimport styled from 'styled-components';\r\nimport {\r\n  COLORS,\r\n  ComponentLStyling,\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentTextStyle,\r\n  ComponentXSStyling,\r\n  ComponentXXSStyling\r\n} from '../styles';\r\nimport {TooltipWrapper} from '../Tooltips';\r\nimport {IconButton} from '../Button';\r\nimport {SystemIcons} from '../icons';\r\nimport {RenderTileItem} from './TileCommonItems';\r\nimport {Tag} from \"../Tag\";\r\n\r\nconst SubtitleIconContainer = styled.span`\r\n  display: flex;\r\n  width: 16px;\r\n  height: 16px;\r\n\r\n  .large & {\r\n    width: 20px;\r\n    height: 20px;\r\n  }\r\n`;\r\n\r\nconst SubtitleContainer = styled.div`\r\n  color: ${COLORS.neutral_600};\r\n  display: flex;\r\n  align-items: flex-start;\r\n  gap: 4px;\r\n`;\r\n\r\nconst TitleContainer = styled.div`\r\n  color: ${COLORS.black};\r\n`;\r\n\r\nconst TextContainer = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  gap: 4px;\r\n  flex: 1;\r\n\r\n  padding: 14px 0;\r\n\r\n  .medium & {\r\n    padding: 12px 0;\r\n  }\r\n\r\n  .large & {\r\n    padding: 12px 0;\r\n  }\r\n\r\n`;\r\n\r\nconst ActionContainer = styled.div`\r\n  display: flex;\r\n  height: 100%;\r\n`;\r\n\r\nconst Wrapper = styled.div`\r\n  display: flex;\r\n  align-items: flex-start;\r\n\r\n  min-height: 56px;\r\n  box-sizing: border-box;\r\n\r\n  &.small {\r\n    padding: 4px 16px;\r\n\r\n    ${SubtitleContainer} {\r\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    ${TitleContainer} {\r\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    padding: 8px 20px;\r\n    min-height: 64px;\r\n\r\n    ${SubtitleContainer} {\r\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    ${TitleContainer} {\r\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\r\n    }\r\n\r\n  }\r\n\r\n  &.large {\r\n    padding: 12px 24px;\r\n    min-height: 72px;\r\n\r\n    ${SubtitleContainer} {\r\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    ${TitleContainer} {\r\n      ${ComponentLStyling(ComponentTextStyle.Bold, null)}\r\n    }\r\n\r\n  }\r\n`;\r\n\r\nconst TagContainer = styled.div`\r\n  align-self: center;\r\n`;\r\n\r\n\r\nconst TileHeader: React.FunctionComponent<TileHeaderProps & { size: Size }> = ({\r\n                                                                                 title,\r\n                                                                                 subtitle,\r\n                                                                                 subtitleIcon,\r\n                                                                                 tooltip,\r\n                                                                                 buttons,\r\n                                                                                 size,\r\n                                                                                 tag\r\n                                                                               }) => {\r\n\r\n  const renderTooltip = () =>\r\n    !!tooltip &&\r\n    <TooltipWrapper delay=\"0s\" size={Size.XSmall}\r\n                    align=\"center\"\r\n                    position=\"bottom\"\r\n                    withArrow={false}\r\n                    label={tooltip}>\r\n      <IconButton variant=\"secondary\"\r\n                  shape=\"circular\"\r\n                  style={{cursor: 'help'}}\r\n                  action={() => {\r\n                  }}>\r\n        <SystemIcons.Help size=\"24px\" color={COLORS.neutral_600}/>\r\n      </IconButton>\r\n    </TooltipWrapper>;\r\n\r\n\r\n  const renderTag = () => !!tag && <TagContainer><Tag {...tag}/></TagContainer>\r\n\r\n\r\n  return (\r\n    <Wrapper className={size}>\r\n      <TextContainer>\r\n        <TitleContainer>{title}</TitleContainer>\r\n        {\r\n          subtitle &&\r\n          <SubtitleContainer>\r\n            {\r\n              subtitleIcon &&\r\n              <SubtitleIconContainer>{React.cloneElement(subtitleIcon as React.ReactElement, {size: size === Size.Large ? '20px' : '16px'})}</SubtitleIconContainer>\r\n            }\r\n            <span>{subtitle}</span>\r\n          </SubtitleContainer>\r\n        }\r\n      </TextContainer>\r\n      <ActionContainer>\r\n        {renderTooltip()}\r\n        {renderTag()}\r\n        {buttons && buttons.map((item, index) => RenderTileItem(item, size, index))}\r\n      </ActionContainer>\r\n    </Wrapper>\r\n  )\r\n}\r\n\r\nexport default TileHeader;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Tile/TileHeader.d.ts

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

@@ -1,8 +1,8 @@
 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(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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';

package/dist/Tile/TileHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"TileHeader.js","names":["React","Size","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ComponentXXSStyling","TooltipWrapper","IconButton","SystemIcons","RenderTileItem","Tag","SubtitleIconContainer","span","SubtitleContainer","div","neutral_600","TitleContainer","black","TextContainer","ActionContainer","Wrapper","Regular","Bold","TagContainer","TileHeader","title","subtitle","subtitleIcon","tooltip","buttons","size","tag","renderTooltip","XSmall","cursor","renderTag","cloneElement","Large","map","item","index"],"sources":["../../src/Tile/TileHeader.tsx"],"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,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles';\nimport {TooltipWrapper} from '../Tooltips';\nimport {IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\nimport {RenderTileItem} from './TileCommonItems';\nimport {Tag} from \"../Tag\";\n\nconst SubtitleIconContainer = styled.span`\n  display: flex;\n  width: 16px;\n  height: 16px;\n\n  .large & {\n    width: 20px;\n    height: 20px;\n  }\n`;\n\nconst SubtitleContainer = styled.div`\n  color: ${COLORS.neutral_600};\n  display: flex;\n  align-items: flex-start;\n  gap: 4px;\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  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\nconst ActionContainer = styled.div`\n  display: flex;\n  height: 100%;\n`;\n\nconst Wrapper = styled.div`\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    ${SubtitleContainer} {\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    ${SubtitleContainer} {\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    ${SubtitleContainer} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${TitleContainer} {\n      ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n    }\n\n  }\n`;\n\nconst TagContainer = styled.div`\n  align-self: center;\n`;\n\n\nconst TileHeader: React.FunctionComponent<TileHeaderProps & { size: Size }> = ({\n                                                                                 title,\n                                                                                 subtitle,\n                                                                                 subtitleIcon,\n                                                                                 tooltip,\n                                                                                 buttons,\n                                                                                 size,\n                                                                                 tag\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        <SystemIcons.Help size=\"24px\" color={COLORS.neutral_600}/>\n      </IconButton>\n    </TooltipWrapper>;\n\n\n  const renderTag = () => !!tag && <TagContainer><Tag {...tag}/></TagContainer>\n\n\n  return (\n    <Wrapper className={size}>\n      <TextContainer>\n        <TitleContainer>{title}</TitleContainer>\n        {\n          subtitle &&\n          <SubtitleContainer>\n            {\n              subtitleIcon &&\n              <SubtitleIconContainer>{React.cloneElement(subtitleIcon as React.ReactElement, {size: size === Size.Large ? '20px' : '16px'})}</SubtitleIconContainer>\n            }\n            <span>{subtitle}</span>\n          </SubtitleContainer>\n        }\n      </TextContainer>\n      <ActionContainer>\n        {renderTooltip()}\n        {renderTag()}\n        {buttons && buttons.map((item, index) => RenderTileItem(item, size, index))}\n      </ActionContainer>\n    </Wrapper>\n  )\n}\n\nexport default TileHeader;\n"],"mappings":"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"}
+{"version":3,"file":"TileHeader.js","names":["React","Size","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ComponentXXSStyling","TooltipWrapper","IconButton","SystemIcons","RenderTileItem","Tag","jsx","_jsx","jsxs","_jsxs","SubtitleIconContainer","span","_templateObject","_taggedTemplateLiteral","SubtitleContainer","div","_templateObject2","neutral_600","TitleContainer","_templateObject3","black","TextContainer","_templateObject4","ActionContainer","_templateObject5","Wrapper","_templateObject6","Regular","Bold","TagContainer","_templateObject7","TileHeader","_ref","title","subtitle","subtitleIcon","tooltip","buttons","size","tag","renderTooltip","delay","XSmall","align","position","withArrow","label","children","variant","shape","style","cursor","action","Help","color","renderTag","_objectSpread","className","cloneElement","Large","map","item","index"],"sources":["../../src/Tile/TileHeader.tsx"],"sourcesContent":["import React from 'react';\r\nimport {TileHeaderProps} from './TileTypes';\r\nimport {Size} from '../types';\r\nimport styled from 'styled-components';\r\nimport {\r\n  COLORS,\r\n  ComponentLStyling,\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentTextStyle,\r\n  ComponentXSStyling,\r\n  ComponentXXSStyling\r\n} from '../styles';\r\nimport {TooltipWrapper} from '../Tooltips';\r\nimport {IconButton} from '../Button';\r\nimport {SystemIcons} from '../icons';\r\nimport {RenderTileItem} from './TileCommonItems';\r\nimport {Tag} from \"../Tag\";\r\n\r\nconst SubtitleIconContainer = styled.span`\r\n  display: flex;\r\n  width: 16px;\r\n  height: 16px;\r\n\r\n  .large & {\r\n    width: 20px;\r\n    height: 20px;\r\n  }\r\n`;\r\n\r\nconst SubtitleContainer = styled.div`\r\n  color: ${COLORS.neutral_600};\r\n  display: flex;\r\n  align-items: flex-start;\r\n  gap: 4px;\r\n`;\r\n\r\nconst TitleContainer = styled.div`\r\n  color: ${COLORS.black};\r\n`;\r\n\r\nconst TextContainer = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  gap: 4px;\r\n  flex: 1;\r\n\r\n  padding: 14px 0;\r\n\r\n  .medium & {\r\n    padding: 12px 0;\r\n  }\r\n\r\n  .large & {\r\n    padding: 12px 0;\r\n  }\r\n\r\n`;\r\n\r\nconst ActionContainer = styled.div`\r\n  display: flex;\r\n  height: 100%;\r\n`;\r\n\r\nconst Wrapper = styled.div`\r\n  display: flex;\r\n  align-items: flex-start;\r\n\r\n  min-height: 56px;\r\n  box-sizing: border-box;\r\n\r\n  &.small {\r\n    padding: 4px 16px;\r\n\r\n    ${SubtitleContainer} {\r\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    ${TitleContainer} {\r\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    padding: 8px 20px;\r\n    min-height: 64px;\r\n\r\n    ${SubtitleContainer} {\r\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    ${TitleContainer} {\r\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\r\n    }\r\n\r\n  }\r\n\r\n  &.large {\r\n    padding: 12px 24px;\r\n    min-height: 72px;\r\n\r\n    ${SubtitleContainer} {\r\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    ${TitleContainer} {\r\n      ${ComponentLStyling(ComponentTextStyle.Bold, null)}\r\n    }\r\n\r\n  }\r\n`;\r\n\r\nconst TagContainer = styled.div`\r\n  align-self: center;\r\n`;\r\n\r\n\r\nconst TileHeader: React.FunctionComponent<TileHeaderProps & { size: Size }> = ({\r\n                                                                                 title,\r\n                                                                                 subtitle,\r\n                                                                                 subtitleIcon,\r\n                                                                                 tooltip,\r\n                                                                                 buttons,\r\n                                                                                 size,\r\n                                                                                 tag\r\n                                                                               }) => {\r\n\r\n  const renderTooltip = () =>\r\n    !!tooltip &&\r\n    <TooltipWrapper delay=\"0s\" size={Size.XSmall}\r\n                    align=\"center\"\r\n                    position=\"bottom\"\r\n                    withArrow={false}\r\n                    label={tooltip}>\r\n      <IconButton variant=\"secondary\"\r\n                  shape=\"circular\"\r\n                  style={{cursor: 'help'}}\r\n                  action={() => {\r\n                  }}>\r\n        <SystemIcons.Help size=\"24px\" color={COLORS.neutral_600}/>\r\n      </IconButton>\r\n    </TooltipWrapper>;\r\n\r\n\r\n  const renderTag = () => !!tag && <TagContainer><Tag {...tag}/></TagContainer>\r\n\r\n\r\n  return (\r\n    <Wrapper className={size}>\r\n      <TextContainer>\r\n        <TitleContainer>{title}</TitleContainer>\r\n        {\r\n          subtitle &&\r\n          <SubtitleContainer>\r\n            {\r\n              subtitleIcon &&\r\n              <SubtitleIconContainer>{React.cloneElement(subtitleIcon as React.ReactElement, {size: size === Size.Large ? '20px' : '16px'})}</SubtitleIconContainer>\r\n            }\r\n            <span>{subtitle}</span>\r\n          </SubtitleContainer>\r\n        }\r\n      </TextContainer>\r\n      <ActionContainer>\r\n        {renderTooltip()}\r\n        {renderTag()}\r\n        {buttons && buttons.map((item, index) => RenderTileItem(item, size, index))}\r\n      </ActionContainer>\r\n    </Wrapper>\r\n  )\r\n}\r\n\r\nexport default TileHeader;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Tile/TileTypes.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TileTypes.cjs","names":[],"sources":["../../src/Tile/TileTypes.ts"],"sourcesContent":["import React from 'react';\nimport {IconButtonProps} from '../Button/Iconbutton';\nimport {ToggleButtonProps} from '../Toggles/ToggleButton';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {ButtonProps} from '../Button/Button';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\nimport {Size} from '../types';\nimport {TooltipProps} from \"../Tooltips/TooltipTypes\";\nimport {TagProps} from \"../Tag\";\n\n\nexport type TileIconButton = Pick<IconButtonProps, 'action' | 'disabled' | 'tooltip' | 'variant' | 'shape'> & {\n  componentType: 'icon';\n  icon: React.ReactNode;\n}\n\nexport type TileToggleButton =\n  Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'>\n  & { componentType: 'toggle'; }\n\nexport type TileDropdownButton =\n  Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'>\n  & {\n  componentType: 'dropdown';\n  icon: React.ReactNode;\n  tooltip?: TooltipProps;\n}\n\nexport type TileStandardButton = Pick<ButtonProps, 'width' | 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {\n  componentType: 'button';\n  buttonText: string;\n}\n\nexport type TileNote = {\n  componentType: 'note';\n  noteIcon?: React.ReactNode;\n  noteText: string;\n}\n\n\nexport type TileHyperLink = HyperlinkProps & {\n  componentType: 'link';\n  linkIcon?: React.ReactNode;\n  linkText: string;\n}\n\nexport type FooterButtons = TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton;\nexport type HeaderButtons = TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton;\n\nexport interface TileHeaderProps {\n  title: string;\n  tag?: TagProps;\n  tooltip?: string;\n  subtitle?: string;\n  subtitleIcon?: React.ReactNode;\n\n  buttons?: HeaderButtons[];\n}\n\nexport interface TileFooterProps {\n  leftItem?: TileNote | TileHyperLink | TileStandardButton;\n  buttons?: FooterButtons[];\n}\n\n\nexport interface TileProps extends React.HTMLAttributes<HTMLDivElement>{\n  style?: {\n    width?: string,\n    minWidth?: string,\n    maxWidth?: string,\n    height?: string,\n    minHeight?: string,\n    maxHeight?: string,\n  };\n\n  size?: Size.Small | Size.Medium | Size.Large\n\n  header?: TileHeaderProps;\n  footer?: TileFooterProps;\n}\n"],"mappings":""}
+{"version":3,"file":"TileTypes.cjs","names":[],"sources":["../../src/Tile/TileTypes.ts"],"sourcesContent":["import React from 'react';\r\nimport {IconButtonProps} from '../Button/Iconbutton';\r\nimport {ToggleButtonProps} from '../Toggles/ToggleButton';\r\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\r\nimport {ButtonProps} from '../Button/Button';\r\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\r\nimport {Size} from '../types';\r\nimport {TooltipProps} from \"../Tooltips/TooltipTypes\";\r\nimport {TagProps} from \"../Tag\";\r\n\r\n\r\nexport type TileIconButton = Pick<IconButtonProps, 'action' | 'disabled' | 'tooltip' | 'variant' | 'shape'> & {\r\n  componentType: 'icon';\r\n  icon: React.ReactNode;\r\n}\r\n\r\nexport type TileToggleButton =\r\n  Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'>\r\n  & { componentType: 'toggle'; }\r\n\r\nexport type TileDropdownButton =\r\n  Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'>\r\n  & {\r\n  componentType: 'dropdown';\r\n  icon: React.ReactNode;\r\n  tooltip?: TooltipProps;\r\n}\r\n\r\nexport type TileStandardButton = Pick<ButtonProps, 'width' | 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {\r\n  componentType: 'button';\r\n  buttonText: string;\r\n}\r\n\r\nexport type TileNote = {\r\n  componentType: 'note';\r\n  noteIcon?: React.ReactNode;\r\n  noteText: string;\r\n}\r\n\r\n\r\nexport type TileHyperLink = HyperlinkProps & {\r\n  componentType: 'link';\r\n  linkIcon?: React.ReactNode;\r\n  linkText: string;\r\n}\r\n\r\nexport type FooterButtons = TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton;\r\nexport type HeaderButtons = TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton;\r\n\r\nexport interface TileHeaderProps {\r\n  title: string;\r\n  tag?: TagProps;\r\n  tooltip?: string;\r\n  subtitle?: string;\r\n  subtitleIcon?: React.ReactNode;\r\n\r\n  buttons?: HeaderButtons[];\r\n}\r\n\r\nexport interface TileFooterProps {\r\n  leftItem?: TileNote | TileHyperLink | TileStandardButton;\r\n  buttons?: FooterButtons[];\r\n}\r\n\r\n\r\nexport interface TileProps extends React.HTMLAttributes<HTMLDivElement>{\r\n  style?: {\r\n    width?: string,\r\n    minWidth?: string,\r\n    maxWidth?: string,\r\n    height?: string,\r\n    minHeight?: string,\r\n    maxHeight?: string,\r\n  };\r\n\r\n  size?: Size.Small | Size.Medium | Size.Large\r\n\r\n  header?: TileHeaderProps;\r\n  footer?: TileFooterProps;\r\n}\r\n"],"mappings":"","ignoreList":[]}

package/dist/Tile/TileTypes.d.ts

@@ -1,62 +1,62 @@
-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';
-import { TooltipProps } from "../Tooltips/TooltipTypes";
-import { TagProps } from "../Tag";
-export type TileIconButton = Pick<IconButtonProps, 'action' | 'disabled' | 'tooltip' | 'variant' | 'shape'> & {
-    componentType: 'icon';
-    icon: React.ReactNode;
-};
-export 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'> & {
-    componentType: 'dropdown';
-    icon: React.ReactNode;
-    tooltip?: TooltipProps;
-};
-export type TileStandardButton = Pick<ButtonProps, 'width' | 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {
-    componentType: 'button';
-    buttonText: string;
-};
-export type TileNote = {
-    componentType: 'note';
-    noteIcon?: React.ReactNode;
-    noteText: string;
-};
-export 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 interface TileHeaderProps {
-    title: string;
-    tag?: TagProps;
-    tooltip?: string;
-    subtitle?: string;
-    subtitleIcon?: React.ReactNode;
-    buttons?: HeaderButtons[];
-}
-export interface TileFooterProps {
-    leftItem?: TileNote | TileHyperLink | TileStandardButton;
-    buttons?: FooterButtons[];
-}
-export interface TileProps extends React.HTMLAttributes<HTMLDivElement> {
-    style?: {
-        width?: string;
-        minWidth?: string;
-        maxWidth?: string;
-        height?: string;
-        minHeight?: string;
-        maxHeight?: string;
-    };
-    size?: Size.Small | Size.Medium | Size.Large;
-    header?: TileHeaderProps;
-    footer?: TileFooterProps;
-}
+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';
+import { TooltipProps } from "../Tooltips/TooltipTypes";
+import { TagProps } from "../Tag";
+export type TileIconButton = Pick<IconButtonProps, 'action' | 'disabled' | 'tooltip' | 'variant' | 'shape'> & {
+    componentType: 'icon';
+    icon: React.ReactNode;
+};
+export 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'> & {
+    componentType: 'dropdown';
+    icon: React.ReactNode;
+    tooltip?: TooltipProps;
+};
+export type TileStandardButton = Pick<ButtonProps, 'width' | 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {
+    componentType: 'button';
+    buttonText: string;
+};
+export type TileNote = {
+    componentType: 'note';
+    noteIcon?: React.ReactNode;
+    noteText: string;
+};
+export 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 interface TileHeaderProps {
+    title: string;
+    tag?: TagProps;
+    tooltip?: string;
+    subtitle?: string;
+    subtitleIcon?: React.ReactNode;
+    buttons?: HeaderButtons[];
+}
+export interface TileFooterProps {
+    leftItem?: TileNote | TileHyperLink | TileStandardButton;
+    buttons?: FooterButtons[];
+}
+export interface TileProps extends React.HTMLAttributes<HTMLDivElement> {
+    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.map

@@ -1 +1 @@
-{"version":3,"file":"TileTypes.js","names":[],"sources":["../../src/Tile/TileTypes.ts"],"sourcesContent":["import React from 'react';\nimport {IconButtonProps} from '../Button/Iconbutton';\nimport {ToggleButtonProps} from '../Toggles/ToggleButton';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {ButtonProps} from '../Button/Button';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\nimport {Size} from '../types';\nimport {TooltipProps} from \"../Tooltips/TooltipTypes\";\nimport {TagProps} from \"../Tag\";\n\n\nexport type TileIconButton = Pick<IconButtonProps, 'action' | 'disabled' | 'tooltip' | 'variant' | 'shape'> & {\n  componentType: 'icon';\n  icon: React.ReactNode;\n}\n\nexport type TileToggleButton =\n  Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'>\n  & { componentType: 'toggle'; }\n\nexport type TileDropdownButton =\n  Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'>\n  & {\n  componentType: 'dropdown';\n  icon: React.ReactNode;\n  tooltip?: TooltipProps;\n}\n\nexport type TileStandardButton = Pick<ButtonProps, 'width' | 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {\n  componentType: 'button';\n  buttonText: string;\n}\n\nexport type TileNote = {\n  componentType: 'note';\n  noteIcon?: React.ReactNode;\n  noteText: string;\n}\n\n\nexport type TileHyperLink = HyperlinkProps & {\n  componentType: 'link';\n  linkIcon?: React.ReactNode;\n  linkText: string;\n}\n\nexport type FooterButtons = TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton;\nexport type HeaderButtons = TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton;\n\nexport interface TileHeaderProps {\n  title: string;\n  tag?: TagProps;\n  tooltip?: string;\n  subtitle?: string;\n  subtitleIcon?: React.ReactNode;\n\n  buttons?: HeaderButtons[];\n}\n\nexport interface TileFooterProps {\n  leftItem?: TileNote | TileHyperLink | TileStandardButton;\n  buttons?: FooterButtons[];\n}\n\n\nexport interface TileProps extends React.HTMLAttributes<HTMLDivElement>{\n  style?: {\n    width?: string,\n    minWidth?: string,\n    maxWidth?: string,\n    height?: string,\n    minHeight?: string,\n    maxHeight?: string,\n  };\n\n  size?: Size.Small | Size.Medium | Size.Large\n\n  header?: TileHeaderProps;\n  footer?: TileFooterProps;\n}\n"],"mappings":""}
+{"version":3,"file":"TileTypes.js","names":[],"sources":["../../src/Tile/TileTypes.ts"],"sourcesContent":["import React from 'react';\r\nimport {IconButtonProps} from '../Button/Iconbutton';\r\nimport {ToggleButtonProps} from '../Toggles/ToggleButton';\r\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\r\nimport {ButtonProps} from '../Button/Button';\r\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\r\nimport {Size} from '../types';\r\nimport {TooltipProps} from \"../Tooltips/TooltipTypes\";\r\nimport {TagProps} from \"../Tag\";\r\n\r\n\r\nexport type TileIconButton = Pick<IconButtonProps, 'action' | 'disabled' | 'tooltip' | 'variant' | 'shape'> & {\r\n  componentType: 'icon';\r\n  icon: React.ReactNode;\r\n}\r\n\r\nexport type TileToggleButton =\r\n  Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'>\r\n  & { componentType: 'toggle'; }\r\n\r\nexport type TileDropdownButton =\r\n  Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'>\r\n  & {\r\n  componentType: 'dropdown';\r\n  icon: React.ReactNode;\r\n  tooltip?: TooltipProps;\r\n}\r\n\r\nexport type TileStandardButton = Pick<ButtonProps, 'width' | 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {\r\n  componentType: 'button';\r\n  buttonText: string;\r\n}\r\n\r\nexport type TileNote = {\r\n  componentType: 'note';\r\n  noteIcon?: React.ReactNode;\r\n  noteText: string;\r\n}\r\n\r\n\r\nexport type TileHyperLink = HyperlinkProps & {\r\n  componentType: 'link';\r\n  linkIcon?: React.ReactNode;\r\n  linkText: string;\r\n}\r\n\r\nexport type FooterButtons = TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton;\r\nexport type HeaderButtons = TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton;\r\n\r\nexport interface TileHeaderProps {\r\n  title: string;\r\n  tag?: TagProps;\r\n  tooltip?: string;\r\n  subtitle?: string;\r\n  subtitleIcon?: React.ReactNode;\r\n\r\n  buttons?: HeaderButtons[];\r\n}\r\n\r\nexport interface TileFooterProps {\r\n  leftItem?: TileNote | TileHyperLink | TileStandardButton;\r\n  buttons?: FooterButtons[];\r\n}\r\n\r\n\r\nexport interface TileProps extends React.HTMLAttributes<HTMLDivElement>{\r\n  style?: {\r\n    width?: string,\r\n    minWidth?: string,\r\n    maxWidth?: string,\r\n    height?: string,\r\n    minHeight?: string,\r\n    maxHeight?: string,\r\n  };\r\n\r\n  size?: Size.Small | Size.Medium | Size.Large\r\n\r\n  header?: TileHeaderProps;\r\n  footer?: TileFooterProps;\r\n}\r\n"],"mappings":"","ignoreList":[]}

package/dist/Tile/index.cjs

@@ -10,7 +10,7 @@ var _exportNames = {
 Object.defineProperty(exports, "Tile", {
   enumerable: true,
   get: function get() {
-    return _Tile.default;
+    return _Tile["default"];
   }
 });
 var _Tile = _interopRequireDefault(require("./Tile"));

package/dist/Tile/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":[],"sources":["../../src/Tile/index.ts"],"sourcesContent":["import Tile from './Tile';\n\nexport {Tile}\nexport * from './TileTypes';\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAGA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
+{"version":3,"file":"index.cjs","names":["_Tile","_interopRequireDefault","require","_TileTypes","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get"],"sources":["../../src/Tile/index.ts"],"sourcesContent":["import Tile from './Tile';\r\n\r\nexport {Tile}\r\nexport * from './TileTypes';\r\n"],"mappings":";;;;;;;;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAGA,IAAAC,UAAA,GAAAD,OAAA;AAAAE,MAAA,CAAAC,IAAA,CAAAF,UAAA,EAAAG,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAJ,UAAA,CAAAI,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAZ,UAAA,CAAAI,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}

package/dist/Tile/index.d.ts

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

package/dist/Tile/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Tile"],"sources":["../../src/Tile/index.ts"],"sourcesContent":["import Tile from './Tile';\n\nexport {Tile}\nexport * from './TileTypes';\n"],"mappings":"AAAA,OAAOA,IAAI,MAAM,QAAQ;AAEzB,SAAQA,IAAI;AACZ,cAAc,aAAa"}
+{"version":3,"file":"index.js","names":["Tile"],"sources":["../../src/Tile/index.ts"],"sourcesContent":["import Tile from './Tile';\r\n\r\nexport {Tile}\r\nexport * from './TileTypes';\r\n"],"mappings":"AAAA,OAAOA,IAAI,MAAM,QAAQ;AAEzB,SAAQA,IAAI;AACZ,cAAc,aAAa","ignoreList":[]}

package/dist/Toasters/Toast.cjs

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.ToastTextContainer = exports.ToastIconContainer = exports.ToastContainer = exports.ToastCloseButton = exports.ToastActionButtons = void 0;
+exports["default"] = exports.ToastTextContainer = exports.ToastIconContainer = exports.ToastContainer = exports.ToastCloseButton = exports.ToastActionButtons = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
@@ -19,15 +19,15 @@ var _HyperLink = require("../HyperLink");
 var _icons = require("../icons");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _enter, _leave;
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var LoaderAnimationKeyframes = (0, _styledComponents.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    background-position: right;\n  }\n  100% {\n    background-position: left;\n  }\n"])));
-var Loader = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 4px;\n  border-bottom-left-radius: 8px;\n  border-bottom-right-radius: 8px;\n\n  animation: ", " ", "ms cubic-bezier(0.18, 0.39, 0.35, 1);\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n"])), LoaderAnimationKeyframes, function (props) {
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+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) { (0, _defineProperty2["default"])(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; }
+var LoaderAnimationKeyframes = (0, _styledComponents.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  0% {\n    background-position: right;\n  }\n  100% {\n    background-position: left;\n  }\n"])));
+var Loader = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 4px;\n  border-bottom-left-radius: 8px;\n  border-bottom-right-radius: 8px;\n\n  animation: ", " ", "ms cubic-bezier(0.18, 0.39, 0.35, 1);\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n"])), LoaderAnimationKeyframes, function (props) {
   return props.duration;
 }, _types.ToastColor[_types.ToastColor.BLACK], _styles.COLORS.neutral_200, _styles.COLORS.neutral_800, _types.ToastColor[_types.ToastColor.WHITE], _styles.COLORS.neutral_400, _styles.COLORS.white, _types.ToastColor[_types.ToastColor.BLUE], _styles.COLORS.accent1_200, _styles.COLORS.accent1_600, _types.ToastColor[_types.ToastColor.GREEN], _styles.COLORS.correct_200, _styles.COLORS.correct_500, _types.ToastColor[_types.ToastColor.ORANGE], _styles.COLORS.warning_200, _styles.COLORS.warning_500, _types.ToastColor[_types.ToastColor.RED], _styles.COLORS.critical_200, _styles.COLORS.critical_500);
-var ToastContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  box-shadow: ", ";\n  border-radius: 4px;\n\n  animation: ", " ", " ", ";\n  transform: ", ";\n\n  transition: all 300ms cubic-bezier(0.64, 0.04, 0.35, 1);\n\n  padding: 0 ", " ", " 16px;\n\n  margin-bottom: 8px;\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  justify-content: left;\n\n  position: relative;\n\n  width: max-content;\n  min-height: 48px;\n  box-sizing: border-box;\n\n  ", "\n\n  & a {\n    display: inline;\n    ", "\n  }\n\n  &.", " {\n    background-color: ", ";\n  }\n\n  &.", " {\n    background-color: ", ";\n    color: ", ";\n\n    & a {\n      ", "\n    }\n  }\n\n  &.", " {\n    background-color: ", ";\n  }\n\n  &.", " {\n    background-color: ", ";\n  }\n\n  &.", " {\n    background-color: ", ";\n  }\n\n  &.", " {\n    background-color: ", ";\n  }\n"])), _styles.BOXSHADOWS.BOXSHADOW_L2, function (props) {
+var ToastContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  box-shadow: ", ";\n  border-radius: 4px;\n\n  animation: ", " ", " ", ";\n  transform: ", ";\n\n  transition: all 300ms cubic-bezier(0.64, 0.04, 0.35, 1);\n\n  padding: 0 ", " ", " 16px;\n\n  margin-bottom: 8px;\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  justify-content: left;\n\n  position: relative;\n\n  width: max-content;\n  min-height: 48px;\n  box-sizing: border-box;\n\n  ", "\n\n  & a {\n    display: inline;\n    ", "\n  }\n\n  &.", " {\n    background-color: ", ";\n  }\n\n  &.", " {\n    background-color: ", ";\n    color: ", ";\n\n    & a {\n      ", "\n    }\n  }\n\n  &.", " {\n    background-color: ", ";\n  }\n\n  &.", " {\n    background-color: ", ";\n  }\n\n  &.", " {\n    background-color: ", ";\n  }\n\n  &.", " {\n    background-color: ", ";\n  }\n"])), _styles.BOXSHADOWS.BOXSHADOW_L2, function (props) {
   return props.animation.keyframes;
 }, function (props) {
   return props.animation.duration;
@@ -41,13 +41,13 @@ var ToastContainer = _styledComponents.default.div(_templateObject3 || (_templat
   return props.withLoader ? '4px' : '0';
 }, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.white), _HyperLink.HyperLinkInvertedStyling, _types.ToastColor[_types.ToastColor.BLACK], _styles.COLORS.neutral_800, _types.ToastColor[_types.ToastColor.WHITE], _styles.COLORS.white, _styles.COLORS.black, _HyperLink.HyperLinkDefaultStyling, _types.ToastColor[_types.ToastColor.BLUE], _styles.COLORS.accent1_600, _types.ToastColor[_types.ToastColor.GREEN], _styles.COLORS.correct_500, _types.ToastColor[_types.ToastColor.ORANGE], _styles.COLORS.warning_500, _types.ToastColor[_types.ToastColor.RED], _styles.COLORS.critical_500);
 exports.ToastContainer = ToastContainer;
-var ToastActionButtons = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n\n  & .action {\n    height: unset;\n  }\n"])));
+var ToastActionButtons = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n\n  & .action {\n    height: unset;\n  }\n"])));
 exports.ToastActionButtons = ToastActionButtons;
-var ToastCloseButton = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  & > button {\n    margin-left: 16px;\n\n    & svg {\n      padding: 0;\n    }\n  }\n\n  button svg path{\n    fill: ", " !important;\n  }\n\n  &.", " {\n    button svg path {\n      fill: ", " !important;\n    }\n  }\n"])), _styles.COLORS.white, _types.ToastColor[_types.ToastColor.WHITE], _styles.COLORS.neutral_600);
+var ToastCloseButton = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  & > button {\n    margin-left: 16px;\n\n    & svg {\n      padding: 0;\n    }\n  }\n\n  button svg path{\n    fill: ", " !important;\n  }\n\n  &.", " {\n    button svg path {\n      fill: ", " !important;\n    }\n  }\n"])), _styles.COLORS.white, _types.ToastColor[_types.ToastColor.WHITE], _styles.COLORS.neutral_600);
 exports.ToastCloseButton = ToastCloseButton;
-var ToastTextContainer = _styledComponents.default.span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  font-feature-settings: 'liga' off;\n  width: 240px;\n  display: flex;\n  padding: 16px 0;\n"])));
+var ToastTextContainer = _styledComponents["default"].span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  font-feature-settings: 'liga' off;\n  width: 240px;\n  display: flex;\n  padding: 16px 0;\n"])));
 exports.ToastTextContainer = ToastTextContainer;
-var ToastIconContainer = _styledComponents.default.span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: -8px;\n"])));
+var ToastIconContainer = _styledComponents["default"].span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  margin-right: -8px;\n"])));
 exports.ToastIconContainer = ToastIconContainer;
 var DEFAULT_OPTIONS = {
   color: _types.ToastColor.BLACK,
@@ -69,14 +69,14 @@ var Toast = function Toast(_ref) {
   removeRef.current = remove;
   var elementRef = React.useRef(null);
   var _React$useState = React.useState(false),
-    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
     shouldRemove = _React$useState2[0],
     setShouldRemove = _React$useState2[1];
   var _React$useState3 = React.useState({
       width: 0,
       height: 0
     }),
-    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
     dimensions = _React$useState4[0],
     setDimensions = _React$useState4[1];
   var opts = _objectSpread(_objectSpread({}, DEFAULT_OPTIONS), options);
@@ -120,12 +120,12 @@ var Toast = function Toast(_ref) {
     duration: animation.duration,
     bezier: animation.bezier,
     transform: "translateY(".concat(toY, ") translateX(").concat(toX, ")"),
-    keyframes: (0, _styledComponents.keyframes)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n        0% {\n          transform: translateY(", "px) translateX(", "px);\n        }\n        100% {\n          transform: translateY(", "px) translateX(", "px);\n        }"])), fromY, fromX, toY, toX)
+    keyframes: (0, _styledComponents.keyframes)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n        0% {\n          transform: translateY(", "px) translateX(", "px);\n        }\n        100% {\n          transform: translateY(", "px) translateX(", "px);\n        }"])), fromY, fromX, toY, toX)
   };
   if (!dimensions.height) {
     prop = _objectSpread(_objectSpread({}, prop), {
       transform: 'translateY(-1000vh) translateX(-1000vw)',
-      keyframes: (0, _styledComponents.keyframes)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)([""])))
+      keyframes: (0, _styledComponents.keyframes)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])([""])))
     });
   }
   var theme = _types.ToastColor[(_opts$color = opts.color) !== null && _opts$color !== void 0 ? _opts$color : _types.ToastColor.BLACK];
@@ -185,42 +185,42 @@ var Toast = function Toast(_ref) {
   });
 };
 Toast.propTypes = {
-  remove: _propTypes.default.any,
-  content: _propTypes.default.any.isRequired,
-  options: _propTypes.default.shape({
-    autoClose: _propTypes.default.bool,
-    delay: _propTypes.default.number,
-    showCloseButton: _propTypes.default.bool,
-    action: _propTypes.default.arrayOf(_propTypes.default.shape({
-      label: _propTypes.default.string.isRequired,
-      handler: _propTypes.default.func.isRequired
+  remove: _propTypes["default"].any,
+  content: _propTypes["default"].any.isRequired,
+  options: _propTypes["default"].shape({
+    autoClose: _propTypes["default"].bool,
+    delay: _propTypes["default"].number,
+    showCloseButton: _propTypes["default"].bool,
+    action: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+      label: _propTypes["default"].string.isRequired,
+      handler: _propTypes["default"].func.isRequired
     })),
-    icon: _propTypes.default.node
+    icon: _propTypes["default"].node
   }),
-  testId: _propTypes.default.string
+  testId: _propTypes["default"].string
 };
 var _default = Toast;
-exports.default = _default;
+exports["default"] = _default;
 var animations = {
   enter: (_enter = {
     bezier: 'cubic-bezier(0.22, 0.61, 0.35, 1)',
     duration: '300ms'
-  }, (0, _defineProperty2.default)(_enter, _types.ToastEntryDirection.TOP, {
+  }, (0, _defineProperty2["default"])(_enter, _types.ToastEntryDirection.TOP, {
     fromHeight: -1,
     toHeight: 0,
     fromWidth: 0,
     toWidth: 0
-  }), (0, _defineProperty2.default)(_enter, _types.ToastEntryDirection.BOTTOM, {
+  }), (0, _defineProperty2["default"])(_enter, _types.ToastEntryDirection.BOTTOM, {
     fromHeight: 1,
     toHeight: 0,
     fromWidth: 0,
     toWidth: 0
-  }), (0, _defineProperty2.default)(_enter, _types.ToastEntryDirection.LEFT, {
+  }), (0, _defineProperty2["default"])(_enter, _types.ToastEntryDirection.LEFT, {
     fromHeight: 0,
     toHeight: 0,
     fromWidth: -1,
     toWidth: 0
-  }), (0, _defineProperty2.default)(_enter, _types.ToastEntryDirection.RIGHT, {
+  }), (0, _defineProperty2["default"])(_enter, _types.ToastEntryDirection.RIGHT, {
     fromHeight: 0,
     toHeight: 0,
     fromWidth: 1,
@@ -229,22 +229,22 @@ var animations = {
   leave: (_leave = {
     bezier: 'cubic-bezier(0.5, 0.05, 0.67, 0.19)',
     duration: '205ms'
-  }, (0, _defineProperty2.default)(_leave, _types.ToastEntryDirection.TOP, {
+  }, (0, _defineProperty2["default"])(_leave, _types.ToastEntryDirection.TOP, {
     fromHeight: 0,
     toHeight: -1,
     fromWidth: 0,
     toWidth: 0
-  }), (0, _defineProperty2.default)(_leave, _types.ToastEntryDirection.BOTTOM, {
+  }), (0, _defineProperty2["default"])(_leave, _types.ToastEntryDirection.BOTTOM, {
     fromHeight: 0,
     toHeight: 1,
     fromWidth: 0,
     toWidth: 0
-  }), (0, _defineProperty2.default)(_leave, _types.ToastEntryDirection.LEFT, {
+  }), (0, _defineProperty2["default"])(_leave, _types.ToastEntryDirection.LEFT, {
     fromHeight: 0,
     toHeight: 0,
     fromWidth: 0,
     toWidth: -1
-  }), (0, _defineProperty2.default)(_leave, _types.ToastEntryDirection.RIGHT, {
+  }), (0, _defineProperty2["default"])(_leave, _types.ToastEntryDirection.RIGHT, {
     fromHeight: 0,
     toHeight: 0,
     fromWidth: 0,