@laerdal/life-react-components 2.3.0 → 2.3.1-dev.1

package/dist/Tile/TileCommonItems.js.map

@@ -1 +1 @@
-{"version":3,"file":"TileCommonItems.js","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"],"sources":["../../src/Tile/TileCommonItems.tsx"],"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"],"mappings":"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"}
+{"version":3,"file":"TileCommonItems.js","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","tooltip","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"],"sources":["../../src/Tile/TileCommonItems.tsx"],"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`display: flex;`;\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`display: flex`;\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                         tooltip={item.tooltip}\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                             tooltip={item.tooltip}\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"],"mappings":"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"}

package/dist/Tile/TileHeader.cjs

@@ -12,18 +12,20 @@ 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 _icons = require("../icons");
 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 _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var SubtitleIconContainer = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 16px;\n  height: 16px;\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: center;\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"])));
+var ActionContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n"])));
+var Wrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (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: 8px 16px;\n    min-height: 56px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      ", "\n    }\n  }\n\n  &.medium {\n    padding: 12px 20px;\n    min-height: 64px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      ", "\n    }\n\n  }\n\n  &.large {\n    padding: 16px 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 TileHeader = function TileHeader(_ref) {
   var title = _ref.title,
-    tagLine = _ref.tagLine,
+    subtitle = _ref.subtitle,
+    subtitleIcon = _ref.subtitleIcon,
     tooltip = _ref.tooltip,
     buttons = _ref.buttons,
     size = _ref.size;
@@ -42,7 +44,7 @@ var TileHeader = function TileHeader(_ref) {
           cursor: 'help'
         },
         action: function action() {},
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.Help, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.Help, {
           size: "24px",
           color: _styles.COLORS.neutral_600
         })
@@ -52,10 +54,16 @@ var TileHeader = function TileHeader(_ref) {
   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: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TitleContainer, {
         children: title
+      }), subtitle && /*#__PURE__*/(0, _jsxRuntime.jsxs)(SubtitleContainer, {
+        children: [subtitleIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(SubtitleIconContainer, {
+          children: /*#__PURE__*/_react.default.cloneElement(subtitleIcon, {
+            size: size === _types.Size.Large ? '20px' : '16px'
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: subtitle
+        })]
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ActionContainer, {
       children: [renderTooltip(), buttons && buttons.map(function (item, index) {

package/dist/Tile/TileHeader.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TileHeader.cjs","names":["TagLineContainer","styled","div","COLORS","neutral_600","TitleContainer","black","TextContainer","ActionContainer","Wrapper","ComponentXXSStyling","ComponentTextStyle","Regular","ComponentSStyling","Bold","ComponentXSStyling","ComponentMStyling","ComponentLStyling","TileHeader","title","tagLine","tooltip","buttons","size","renderTooltip","Size","XSmall","cursor","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, 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"],"mappings":";;;;;;;;AAAA;AAEA;AACA;AACA;AAQA;AACA;AACA;AACA;AAAiD;AAAA;AAEjD,IAAMA,gBAAgB,GAAGC,yBAAM,CAACC,GAAG,sGACxBC,cAAM,CAACC,WAAW,CAC5B;AAED,IAAMC,cAAc,GAAGJ,yBAAM,CAACC,GAAG,wGACtBC,cAAM,CAACG,KAAK,CACtB;AAED,IAAMC,aAAa,GAAGN,yBAAM,CAACC,GAAG,4KAK/B;AAED,IAAMM,eAAe,GAAGP,yBAAM,CAACC,GAAG,iIAGjC;AAED,IAAMO,OAAO,GAAGR,yBAAM,CAACC,GAAG,ykBAWpBF,gBAAgB,EACd,IAAAU,2BAAmB,EAACC,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC,EAGvDP,cAAc,EACZ,IAAAQ,yBAAiB,EAACF,0BAAkB,CAACG,IAAI,EAAE,IAAI,CAAC,EAQlDd,gBAAgB,EACd,IAAAe,0BAAkB,EAACJ,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC,EAGtDP,cAAc,EACZ,IAAAW,yBAAiB,EAACL,0BAAkB,CAACG,IAAI,EAAE,IAAI,CAAC,EASlDd,gBAAgB,EACd,IAAAa,yBAAiB,EAACF,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC,EAGrDP,cAAc,EACZ,IAAAY,yBAAiB,EAACN,0BAAkB,CAACG,IAAI,EAAE,IAAI,CAAC,CAIvD;AAGD,IAAMI,UAAqE,GAAG,SAAxEA,UAAqE,OAMU;EAAA,IALJC,KAAK,QAALA,KAAK;IACLC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IACPC,IAAI,QAAJA,IAAI;EAGnF,IAAMC,aAAa,GAAG,SAAhBA,aAAa;IAAA,OACjB,CAAC,CAACH,OAAO,iBACT,qBAAC,wBAAc;MAAC,KAAK,EAAC,IAAI;MAAC,IAAI,EAAEI,WAAI,CAACC,MAAO;MAC7B,KAAK,EAAC,QAAQ;MACd,QAAQ,EAAC,QAAQ;MACjB,SAAS,EAAE,KAAM;MACjB,KAAK,EAAEL,OAAQ;MAAA,uBAC7B,qBAAC,kBAAU;QAAC,OAAO,EAAC,WAAW;QACnB,KAAK,EAAC,UAAU;QAChB,KAAK,EAAE;UAACM,MAAM,EAAE;QAAM,CAAE;QACxB,MAAM,EAAE,kBAAM,CACd,CAAE;QAAA,uBACZ,qBAAC,iBAAI;UAAC,IAAI,EAAC,MAAM;UAAC,KAAK,EAAExB,cAAM,CAACC;QAAY;MAAE;IACnC,EACE;EAAA;EAGnB,oBACE,sBAAC,OAAO;IAAC,SAAS,EAAEmB,IAAK;IAAA,wBACvB,sBAAC,aAAa;MAAA,WACXH,OAAO,iBAAI,qBAAC,gBAAgB;QAAA,UAAEA;MAAO,EAAoB,eAC1D,qBAAC,cAAc;QAAA,UAAED;MAAK,EAAkB;IAAA,EAC1B,eAChB,sBAAC,eAAe;MAAA,WACbK,aAAa,EAAE,EACfF,OAAO,IAAIA,OAAO,CAACM,GAAG,CAAC,UAACC,IAAI,EAAEC,KAAK;QAAA,OAAK,IAAAC,+BAAc,EAACF,IAAI,EAAEN,IAAI,EAAEO,KAAK,CAAC;MAAA,EAAC;IAAA,EAC3D;EAAA,EACV;AAEd,CAAC;AAAA,eAEcZ,UAAU;AAAA"}
+{"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","TileHeader","title","subtitle","subtitleIcon","tooltip","buttons","size","renderTooltip","Size","XSmall","cursor","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';\n\nconst SubtitleIconContainer = styled.span`\n  display: flex;\n  width: 16px;\n  height: 16px;\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: center;\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\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: 8px 16px;\n    min-height: 56px;\n\n    ${SubtitleContainer} {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${TitleContainer} {\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n    }\n  }\n\n  &.medium {\n    padding: 12px 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: 16px 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\n\nconst TileHeader: React.FunctionComponent<TileHeaderProps & { size: Size }> = ({\n                                                                                 title,\n                                                                                 subtitle,\n                                                                                 subtitleIcon,\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        <SystemIcons.Help size=\"24px\" color={COLORS.neutral_600}/>\n      </IconButton>\n    </TooltipWrapper>;\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        {buttons && buttons.map((item, index) => RenderTileItem(item, size, index))}\n      </ActionContainer>\n    </Wrapper>\n  )\n}\n\nexport default TileHeader;\n"],"mappings":";;;;;;;;AAAA;AAEA;AACA;AACA;AASA;AACA;AACA;AACA;AAAiD;AAAA;AAEjD,IAAMA,qBAAqB,GAAGC,yBAAM,CAACC,IAAI,gMAQxC;AAED,IAAMC,iBAAiB,GAAGF,yBAAM,CAACG,GAAG,+JACzBC,cAAM,CAACC,WAAW,CAI5B;AAED,IAAMC,cAAc,GAAGN,yBAAM,CAACG,GAAG,wGACtBC,cAAM,CAACG,KAAK,CACtB;AAED,IAAMC,aAAa,GAAGR,yBAAM,CAACG,GAAG,yLAM/B;AAED,IAAMM,eAAe,GAAGT,yBAAM,CAACG,GAAG,iIAGjC;AAED,IAAMO,OAAO,GAAGV,yBAAM,CAACG,GAAG,0kBAWpBD,iBAAiB,EACf,IAAAS,2BAAmB,EAACC,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC,EAGvDP,cAAc,EACZ,IAAAQ,yBAAiB,EAACF,0BAAkB,CAACG,IAAI,EAAE,IAAI,CAAC,EAQlDb,iBAAiB,EACf,IAAAc,0BAAkB,EAACJ,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC,EAGtDP,cAAc,EACZ,IAAAW,yBAAiB,EAACL,0BAAkB,CAACG,IAAI,EAAE,IAAI,CAAC,EASlDb,iBAAiB,EACf,IAAAY,yBAAiB,EAACF,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC,EAGrDP,cAAc,EACZ,IAAAY,yBAAiB,EAACN,0BAAkB,CAACG,IAAI,EAAE,IAAI,CAAC,CAIvD;AAGD,IAAMI,UAAqE,GAAG,SAAxEA,UAAqE,OAOU;EAAA,IANJC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACRC,YAAY,QAAZA,YAAY;IACZC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IACPC,IAAI,QAAJA,IAAI;EAGnF,IAAMC,aAAa,GAAG,SAAhBA,aAAa;IAAA,OACjB,CAAC,CAACH,OAAO,iBACT,qBAAC,wBAAc;MAAC,KAAK,EAAC,IAAI;MAAC,IAAI,EAAEI,WAAI,CAACC,MAAO;MAC7B,KAAK,EAAC,QAAQ;MACd,QAAQ,EAAC,QAAQ;MACjB,SAAS,EAAE,KAAM;MACjB,KAAK,EAAEL,OAAQ;MAAA,uBAC7B,qBAAC,kBAAU;QAAC,OAAO,EAAC,WAAW;QACnB,KAAK,EAAC,UAAU;QAChB,KAAK,EAAE;UAACM,MAAM,EAAE;QAAM,CAAE;QACxB,MAAM,EAAE,kBAAM,CACd,CAAE;QAAA,uBACZ,qBAAC,kBAAW,CAAC,IAAI;UAAC,IAAI,EAAC,MAAM;UAAC,KAAK,EAAEzB,cAAM,CAACC;QAAY;MAAE;IAC/C,EACE;EAAA;EAGnB,oBACE,sBAAC,OAAO;IAAC,SAAS,EAAEoB,IAAK;IAAA,wBACvB,sBAAC,aAAa;MAAA,wBACZ,qBAAC,cAAc;QAAA,UAAEL;MAAK,EAAkB,EAEtCC,QAAQ,iBACR,sBAAC,iBAAiB;QAAA,WAEdC,YAAY,iBACZ,qBAAC,qBAAqB;UAAA,uBAAEQ,cAAK,CAACC,YAAY,CAACT,YAAY,EAAwB;YAACG,IAAI,EAAEA,IAAI,KAAKE,WAAI,CAACK,KAAK,GAAG,MAAM,GAAG;UAAM,CAAC;QAAC,EAAyB,eAExJ;UAAA,UAAOX;QAAQ,EAAQ;MAAA,EACL;IAAA,EAER,eAChB,sBAAC,eAAe;MAAA,WACbK,aAAa,EAAE,EACfF,OAAO,IAAIA,OAAO,CAACS,GAAG,CAAC,UAACC,IAAI,EAAEC,KAAK;QAAA,OAAK,IAAAC,+BAAc,EAACF,IAAI,EAAET,IAAI,EAAEU,KAAK,CAAC;MAAA,EAAC;IAAA,EAC3D;EAAA,EACV;AAEd,CAAC;AAAA,eAEchB,UAAU;AAAA"}

package/dist/Tile/TileHeader.js

@@ -1,23 +1,25 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 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 { SystemIcons } from '../icons';
 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 SubtitleIconContainer = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  width: 16px;\n  height: 16px;\n  .large & {\n    width: 20px;\n    height: 20px;\n  }\n"])));
+var SubtitleContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  display: flex;\n  align-items: center;\n  gap: 4px;\n"])), COLORS.neutral_600);
+var TitleContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), COLORS.black);
+var TextContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: 4px;\n  flex: 1;\n"])));
+var ActionContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
+var Wrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  min-height: 56px;\n  box-sizing: border-box;\n\n  &.small {\n    padding: 8px 16px;\n    min-height: 56px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      ", "\n    }\n  }\n\n  &.medium {\n    padding: 12px 20px;\n    min-height: 64px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      ", "\n    }\n\n  }\n\n  &.large {\n    padding: 16px 24px;\n    min-height: 72px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      ", "\n    }\n\n  }\n"])), SubtitleContainer, ComponentXXSStyling(ComponentTextStyle.Regular, null), TitleContainer, ComponentSStyling(ComponentTextStyle.Bold, null), SubtitleContainer, ComponentXSStyling(ComponentTextStyle.Regular, null), TitleContainer, ComponentMStyling(ComponentTextStyle.Bold, null), SubtitleContainer, ComponentSStyling(ComponentTextStyle.Regular, null), TitleContainer, ComponentLStyling(ComponentTextStyle.Bold, null));
 var TileHeader = function TileHeader(_ref) {
   var title = _ref.title,
-    tagLine = _ref.tagLine,
+    subtitle = _ref.subtitle,
+    subtitleIcon = _ref.subtitleIcon,
     tooltip = _ref.tooltip,
     buttons = _ref.buttons,
     size = _ref.size;
@@ -36,7 +38,7 @@ var TileHeader = function TileHeader(_ref) {
           cursor: 'help'
         },
         action: function action() {},
-        children: /*#__PURE__*/_jsx(Help, {
+        children: /*#__PURE__*/_jsx(SystemIcons.Help, {
           size: "24px",
           color: COLORS.neutral_600
         })
@@ -46,10 +48,16 @@ var TileHeader = function TileHeader(_ref) {
   return /*#__PURE__*/_jsxs(Wrapper, {
     className: size,
     children: [/*#__PURE__*/_jsxs(TextContainer, {
-      children: [tagLine && /*#__PURE__*/_jsx(TagLineContainer, {
-        children: tagLine
-      }), /*#__PURE__*/_jsx(TitleContainer, {
+      children: [/*#__PURE__*/_jsx(TitleContainer, {
         children: title
+      }), subtitle && /*#__PURE__*/_jsxs(SubtitleContainer, {
+        children: [subtitleIcon && /*#__PURE__*/_jsx(SubtitleIconContainer, {
+          children: /*#__PURE__*/React.cloneElement(subtitleIcon, {
+            size: size === Size.Large ? '20px' : '16px'
+          })
+        }), /*#__PURE__*/_jsx("span", {
+          children: subtitle
+        })]
       })]
     }), /*#__PURE__*/_jsxs(ActionContainer, {
       children: [renderTooltip(), buttons && buttons.map(function (item, index) {

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","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"],"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, 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"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAAQC,IAAI,QAAO,UAAU;AAC7B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SACEC,MAAM,EACNC,iBAAiB,EACjBC,iBAAiB,EACjBC,iBAAiB,EACjBC,kBAAkB,EAAEC,kBAAkB,EACtCC,mBAAmB,QACd,WAAW;AAClB,SAAQC,cAAc,QAAO,aAAa;AAC1C,SAAQC,UAAU,QAAO,WAAW;AACpC,SAAQC,IAAI,QAAO,kCAAkC;AACrD,SAAQC,cAAc,QAAO,mBAAmB;AAAC;AAAA;AAEjD,IAAMC,gBAAgB,GAAGZ,MAAM,CAACa,GAAG,wFACxBZ,MAAM,CAACa,WAAW,CAC5B;AAED,IAAMC,cAAc,GAAGf,MAAM,CAACa,GAAG,0FACtBZ,MAAM,CAACe,KAAK,CACtB;AAED,IAAMC,aAAa,GAAGjB,MAAM,CAACa,GAAG,8JAK/B;AAED,IAAMK,eAAe,GAAGlB,MAAM,CAACa,GAAG,mHAGjC;AAED,IAAMM,OAAO,GAAGnB,MAAM,CAACa,GAAG,2jBAWpBD,gBAAgB,EACdL,mBAAmB,CAACF,kBAAkB,CAACe,OAAO,EAAE,IAAI,CAAC,EAGvDL,cAAc,EACZX,iBAAiB,CAACC,kBAAkB,CAACgB,IAAI,EAAE,IAAI,CAAC,EAQlDT,gBAAgB,EACdN,kBAAkB,CAACD,kBAAkB,CAACe,OAAO,EAAE,IAAI,CAAC,EAGtDL,cAAc,EACZZ,iBAAiB,CAACE,kBAAkB,CAACgB,IAAI,EAAE,IAAI,CAAC,EASlDT,gBAAgB,EACdR,iBAAiB,CAACC,kBAAkB,CAACe,OAAO,EAAE,IAAI,CAAC,EAGrDL,cAAc,EACZb,iBAAiB,CAACG,kBAAkB,CAACgB,IAAI,EAAE,IAAI,CAAC,CAIvD;AAGD,IAAMC,UAAqE,GAAG,SAAxEA,UAAqE,OAMU;EAAA,IALJC,KAAK,QAALA,KAAK;IACLC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IACPC,IAAI,QAAJA,IAAI;EAGnF,IAAMC,aAAa,GAAG,SAAhBA,aAAa;IAAA,OACjB,CAAC,CAACH,OAAO,iBACT,KAAC,cAAc;MAAC,KAAK,EAAC,IAAI;MAAC,IAAI,EAAE1B,IAAI,CAAC8B,MAAO;MAC7B,KAAK,EAAC,QAAQ;MACd,QAAQ,EAAC,QAAQ;MACjB,SAAS,EAAE,KAAM;MACjB,KAAK,EAAEJ,OAAQ;MAAA,uBAC7B,KAAC,UAAU;QAAC,OAAO,EAAC,WAAW;QACnB,KAAK,EAAC,UAAU;QAChB,KAAK,EAAE;UAACK,MAAM,EAAE;QAAM,CAAE;QACxB,MAAM,EAAE,kBAAM,CACd,CAAE;QAAA,uBACZ,KAAC,IAAI;UAAC,IAAI,EAAC,MAAM;UAAC,KAAK,EAAE7B,MAAM,CAACa;QAAY;MAAE;IACnC,EACE;EAAA;EAGnB,oBACE,MAAC,OAAO;IAAC,SAAS,EAAEa,IAAK;IAAA,wBACvB,MAAC,aAAa;MAAA,WACXH,OAAO,iBAAI,KAAC,gBAAgB;QAAA,UAAEA;MAAO,EAAoB,eAC1D,KAAC,cAAc;QAAA,UAAED;MAAK,EAAkB;IAAA,EAC1B,eAChB,MAAC,eAAe;MAAA,WACbK,aAAa,EAAE,EACfF,OAAO,IAAIA,OAAO,CAACK,GAAG,CAAC,UAACC,IAAI,EAAEC,KAAK;QAAA,OAAKtB,cAAc,CAACqB,IAAI,EAAEL,IAAI,EAAEM,KAAK,CAAC;MAAA,EAAC;IAAA,EAC3D;EAAA,EACV;AAEd,CAAC;AAED,eAAeX,UAAU"}
+{"version":3,"file":"TileHeader.js","names":["React","Size","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ComponentXXSStyling","TooltipWrapper","IconButton","SystemIcons","RenderTileItem","SubtitleIconContainer","span","SubtitleContainer","div","neutral_600","TitleContainer","black","TextContainer","ActionContainer","Wrapper","Regular","Bold","TileHeader","title","subtitle","subtitleIcon","tooltip","buttons","size","renderTooltip","XSmall","cursor","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';\n\nconst SubtitleIconContainer = styled.span`\n  display: flex;\n  width: 16px;\n  height: 16px;\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: center;\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\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: 8px 16px;\n    min-height: 56px;\n\n    ${SubtitleContainer} {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${TitleContainer} {\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n    }\n  }\n\n  &.medium {\n    padding: 12px 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: 16px 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\n\nconst TileHeader: React.FunctionComponent<TileHeaderProps & { size: Size }> = ({\n                                                                                 title,\n                                                                                 subtitle,\n                                                                                 subtitleIcon,\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        <SystemIcons.Help size=\"24px\" color={COLORS.neutral_600}/>\n      </IconButton>\n    </TooltipWrapper>;\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        {buttons && buttons.map((item, index) => RenderTileItem(item, size, index))}\n      </ActionContainer>\n    </Wrapper>\n  )\n}\n\nexport default TileHeader;\n"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAAQC,IAAI,QAAO,UAAU;AAC7B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SACEC,MAAM,EACNC,iBAAiB,EACjBC,iBAAiB,EACjBC,iBAAiB,EACjBC,kBAAkB,EAClBC,kBAAkB,EAClBC,mBAAmB,QACd,WAAW;AAClB,SAAQC,cAAc,QAAO,aAAa;AAC1C,SAAQC,UAAU,QAAO,WAAW;AACpC,SAAQC,WAAW,QAAO,UAAU;AACpC,SAAQC,cAAc,QAAO,mBAAmB;AAAC;AAAA;AAEjD,IAAMC,qBAAqB,GAAGZ,MAAM,CAACa,IAAI,kLAQxC;AAED,IAAMC,iBAAiB,GAAGd,MAAM,CAACe,GAAG,iJACzBd,MAAM,CAACe,WAAW,CAI5B;AAED,IAAMC,cAAc,GAAGjB,MAAM,CAACe,GAAG,0FACtBd,MAAM,CAACiB,KAAK,CACtB;AAED,IAAMC,aAAa,GAAGnB,MAAM,CAACe,GAAG,2KAM/B;AAED,IAAMK,eAAe,GAAGpB,MAAM,CAACe,GAAG,mHAGjC;AAED,IAAMM,OAAO,GAAGrB,MAAM,CAACe,GAAG,4jBAWpBD,iBAAiB,EACfP,mBAAmB,CAACF,kBAAkB,CAACiB,OAAO,EAAE,IAAI,CAAC,EAGvDL,cAAc,EACZb,iBAAiB,CAACC,kBAAkB,CAACkB,IAAI,EAAE,IAAI,CAAC,EAQlDT,iBAAiB,EACfR,kBAAkB,CAACD,kBAAkB,CAACiB,OAAO,EAAE,IAAI,CAAC,EAGtDL,cAAc,EACZd,iBAAiB,CAACE,kBAAkB,CAACkB,IAAI,EAAE,IAAI,CAAC,EASlDT,iBAAiB,EACfV,iBAAiB,CAACC,kBAAkB,CAACiB,OAAO,EAAE,IAAI,CAAC,EAGrDL,cAAc,EACZf,iBAAiB,CAACG,kBAAkB,CAACkB,IAAI,EAAE,IAAI,CAAC,CAIvD;AAGD,IAAMC,UAAqE,GAAG,SAAxEA,UAAqE,OAOU;EAAA,IANJC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACRC,YAAY,QAAZA,YAAY;IACZC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IACPC,IAAI,QAAJA,IAAI;EAGnF,IAAMC,aAAa,GAAG,SAAhBA,aAAa;IAAA,OACjB,CAAC,CAACH,OAAO,iBACT,KAAC,cAAc;MAAC,KAAK,EAAC,IAAI;MAAC,IAAI,EAAE7B,IAAI,CAACiC,MAAO;MAC7B,KAAK,EAAC,QAAQ;MACd,QAAQ,EAAC,QAAQ;MACjB,SAAS,EAAE,KAAM;MACjB,KAAK,EAAEJ,OAAQ;MAAA,uBAC7B,KAAC,UAAU;QAAC,OAAO,EAAC,WAAW;QACnB,KAAK,EAAC,UAAU;QAChB,KAAK,EAAE;UAACK,MAAM,EAAE;QAAM,CAAE;QACxB,MAAM,EAAE,kBAAM,CACd,CAAE;QAAA,uBACZ,KAAC,WAAW,CAAC,IAAI;UAAC,IAAI,EAAC,MAAM;UAAC,KAAK,EAAEhC,MAAM,CAACe;QAAY;MAAE;IAC/C,EACE;EAAA;EAGnB,oBACE,MAAC,OAAO;IAAC,SAAS,EAAEc,IAAK;IAAA,wBACvB,MAAC,aAAa;MAAA,wBACZ,KAAC,cAAc;QAAA,UAAEL;MAAK,EAAkB,EAEtCC,QAAQ,iBACR,MAAC,iBAAiB;QAAA,WAEdC,YAAY,iBACZ,KAAC,qBAAqB;UAAA,uBAAE7B,KAAK,CAACoC,YAAY,CAACP,YAAY,EAAwB;YAACG,IAAI,EAAEA,IAAI,KAAK/B,IAAI,CAACoC,KAAK,GAAG,MAAM,GAAG;UAAM,CAAC;QAAC,EAAyB,eAExJ;UAAA,UAAOT;QAAQ,EAAQ;MAAA,EACL;IAAA,EAER,eAChB,MAAC,eAAe;MAAA,WACbK,aAAa,EAAE,EACfF,OAAO,IAAIA,OAAO,CAACO,GAAG,CAAC,UAACC,IAAI,EAAEC,KAAK;QAAA,OAAK3B,cAAc,CAAC0B,IAAI,EAAEP,IAAI,EAAEQ,KAAK,CAAC;MAAA,EAAC;IAAA,EAC3D;EAAA,EACV;AAEd,CAAC;AAED,eAAed,UAAU"}

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';\n\n\nexport type TileIconButton = Pick<IconButtonProps, 'action' | 'disabled'> & {\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}\n\nexport type TileStandardButton = Pick<ButtonProps, '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;\n\nexport interface TileHeaderProps {\n  title: string;\n  tooltip?: string;\n  tagLine?: string;\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';\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\";\n\n\nexport type TileIconButton = Pick<IconButtonProps, 'action' | 'disabled' | 'tooltip'> & {\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, '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;\n\nexport interface TileHeaderProps {\n  title: string;\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":""}

package/dist/Tile/TileTypes.d.ts

@@ -5,7 +5,8 @@ import { DropdownButtonProps } from '../Dropdown/DropdownButtonTypes';
 import { ButtonProps } from '../Button/Button';
 import { HyperlinkProps } from '../HyperLink/HyperLink';
 import { Size } from '../types';
-export type TileIconButton = Pick<IconButtonProps, 'action' | 'disabled'> & {
+import { TooltipProps } from "../Tooltips/TooltipTypes";
+export type TileIconButton = Pick<IconButtonProps, 'action' | 'disabled' | 'tooltip'> & {
     componentType: 'icon';
     icon: React.ReactNode;
 };
@@ -15,6 +16,7 @@ export type TileToggleButton = Pick<ToggleButtonProps, 'active' | 'onChange' | '
 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, 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {
     componentType: 'button';
@@ -35,7 +37,8 @@ export type HeaderButtons = TileIconButton | TileToggleButton | TileDropdownButt
 export interface TileHeaderProps {
     title: string;
     tooltip?: string;
-    tagLine?: string;
+    subtitle?: string;
+    subtitleIcon?: React.ReactNode;
     buttons?: HeaderButtons[];
 }
 export interface 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';\n\n\nexport type TileIconButton = Pick<IconButtonProps, 'action' | 'disabled'> & {\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}\n\nexport type TileStandardButton = Pick<ButtonProps, '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;\n\nexport interface TileHeaderProps {\n  title: string;\n  tooltip?: string;\n  tagLine?: string;\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';\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\";\n\n\nexport type TileIconButton = Pick<IconButtonProps, 'action' | 'disabled' | 'tooltip'> & {\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, '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;\n\nexport interface TileHeaderProps {\n  title: string;\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":""}

package/dist/Toasters/Toast.cjs

@@ -14,9 +14,9 @@ var React = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _types = require("../types");
 var _styles = require("../styles");
-var _SystemIcons = require("../icons/systemicons/SystemIcons");
 var _Button = require("../Button");
 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); }
@@ -168,7 +168,7 @@ var Toast = function Toast(_ref) {
         action: function action(event) {
           return setShouldRemove(true);
         },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.Close, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.Close, {
           size: "24px",
           color: _styles.COLORS.neutral_600
         })

package/dist/Toasters/Toast.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.cjs","names":["LoaderAnimationKeyframes","keyframes","Loader","styled","div","props","duration","ToastColor","BLACK","COLORS","neutral_200","neutral_800","WHITE","neutral_400","white","BLUE","accent1_200","accent1_600","GREEN","correct_200","correct_500","ORANGE","warning_200","warning_500","RED","critical_200","critical_500","Container","BOXSHADOWS","BOXSHADOW_L2","animation","bezier","transform","withClose","withLoader","ComponentSStyling","ComponentTextStyle","Regular","HyperLinkInvertedStyling","black","HyperLinkDefaultStyling","ActionButtons","CloseButton","neutral_600","TextContainer","span","IconContainer","DEFAULT_OPTIONS","color","autoClose","delay","showCloseButton","position","ToastPosition","TOPLEFT","enterFrom","ToastEntryDirection","TOP","Toast","content","remove","options","testId","Error","removeRef","React","useRef","current","elementRef","useState","shouldRemove","setShouldRemove","width","height","dimensions","setDimensions","opts","useEffect","id","setTimeout","clearTimeout","undefined","clientHeight","clientWidth","animations","direction","fromY","fromHeight","toY","toHeight","fromX","fromWidth","toX","toWidth","prop","theme","focus","icon","action","map","i","Size","Small","type","ToastActionType","SECONDARY","handler","label","event","enter","BOTTOM","LEFT","RIGHT","leave"],"sources":["../../src/Toasters/Toast.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled, { keyframes } from 'styled-components';\nimport { ToastActionType, ToastColor, ToastEntryDirection, ToastPosition } from '../types';\nimport { BOXSHADOWS, COLORS} from '../styles';\nimport { Close } from '../icons/systemicons/SystemIcons';\nimport { Size } from '../types' \nimport { Button, IconButton } from '../Button';\nimport { ComponentSStyling, ComponentTextStyle } from '../styles';\nimport {HyperLinkDefaultStyling, HyperLinkInvertedStyling} from '../HyperLink';\n\nconst LoaderAnimationKeyframes = keyframes`\n  0% {\n    background-position: right;\n  }\n  100% {\n    background-position: left;\n  }\n`;\n\nconst Loader = styled.div<{ duration: number }>`\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: ${LoaderAnimationKeyframes} ${(props) => props.duration}ms cubic-bezier(0.18, 0.39, 0.35, 1);\n\n  &.${ToastColor[ToastColor.BLACK]} {\n    background: linear-gradient(to right, ${COLORS.neutral_200} 50%, ${COLORS.neutral_800} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    background: linear-gradient(to right, ${COLORS.neutral_400} 50%, ${COLORS.white} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.BLUE]} {\n    background: linear-gradient(to right, ${COLORS.accent1_200} 50%, ${COLORS.accent1_600} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.GREEN]} {\n    background: linear-gradient(to right, ${COLORS.correct_200} 50%, ${COLORS.correct_500} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.ORANGE]} {\n    background: linear-gradient(to right, ${COLORS.warning_200} 50%, ${COLORS.warning_500} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.RED]} {\n    background: linear-gradient(to right, ${COLORS.critical_200} 50%, ${COLORS.critical_500} 50%) left;\n    background-size: 200% 100%;\n  }\n`;\n\nconst Container = styled.div<{ animation: { duration: string; bezier: string; transform: string; keyframes: any }; withLoader: boolean; withClose: boolean }>`\n  box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n  border-radius: 4px;\n\n  animation: ${(props) => props.animation.keyframes} ${(props) => props.animation.duration} ${(props) => props.animation.bezier};\n  transform: ${(props) => props.animation.transform};\n\n  transition: all 300ms cubic-bezier(0.64, 0.04, 0.35, 1);\n\n  padding: 0 ${(props) => (props.withClose ? '0' : '16px')} ${(props) => (props.withLoader ? '4px' : '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  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.white)}\n\n  & a {\n    display: inline;\n    ${HyperLinkInvertedStyling}\n  }\n\n  &.${ToastColor[ToastColor.BLACK]} {\n    background-color: ${COLORS.neutral_800};\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    background-color: ${COLORS.white};\n    color: ${COLORS.black};\n\n    & a {\n      ${HyperLinkDefaultStyling}\n    }\n  }\n\n  &.${ToastColor[ToastColor.BLUE]} {\n    background-color: ${COLORS.accent1_600};\n  }\n\n  &.${ToastColor[ToastColor.GREEN]} {\n    background-color: ${COLORS.correct_500};\n  }\n\n  &.${ToastColor[ToastColor.ORANGE]} {\n    background-color: ${COLORS.warning_500};\n  }\n\n  &.${ToastColor[ToastColor.RED]} {\n    background-color: ${COLORS.critical_500};\n  }\n`;\n\nconst ActionButtons = styled.div`\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n\n  & .action {\n    height: unset;\n  }\n`;\n\nconst CloseButton = styled.div`\n  & > button {\n    margin-left: 16px;\n\n    & svg {\n      padding: 0;\n    }\n  }\n\n  button svg path{\n    fill: ${COLORS.white} !important;\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    button svg path {\n      fill: ${COLORS.neutral_600} !important;\n    }\n  }\n`;\n\nconst TextContainer = styled.span`\n  font-feature-settings: 'liga' off;\n  width: 240px;\n  display: flex;\n  padding: 16px 0;\n`;\n\nconst IconContainer = styled.span`\n  margin-right: -8px;\n`;\n\nexport type ToastOptions = {\n  color?: ToastColor;\n  autoClose?: boolean;\n  delay?: number;\n  showCloseButton?: boolean;\n  action?: {\n    label: string;\n    handler: () => void;\n    type?: ToastActionType;\n  }[];\n  position: ToastPosition;\n  enterFrom?: ToastEntryDirection;\n  icon?: React.ReactNode;\n};\n\ntype Props = {\n  remove?: any;\n  content: any;\n  options?: ToastOptions;\n  testId?: string;\n};\n\nconst DEFAULT_OPTIONS: ToastOptions = {\n  color: ToastColor.BLACK,\n  autoClose: true,\n  delay: 5000,\n  showCloseButton: false,\n  position: ToastPosition.TOPLEFT,\n  enterFrom: ToastEntryDirection.TOP,\n};\n\nconst Toast = ({ content, remove, options = DEFAULT_OPTIONS, testId }: Props) => {\n\n  if(!remove)\n    throw new Error('remove function is required when rendering Toast. Make sure that you are using useToast hook and ToastProvider for rendering Toasts');\n\n  const removeRef = React.useRef();\n  removeRef.current = remove;\n\n  const elementRef = React.useRef<any>(null);\n\n  const [shouldRemove, setShouldRemove] = React.useState(false);\n  const [dimensions, setDimensions] = React.useState<{ width: number; height: number }>({ width: 0, height: 0 });\n\n  const opts = { ...DEFAULT_OPTIONS, ...options };\n\n  React.useEffect(() => {\n    if (opts?.autoClose) {\n      // @ts-ignore\n      const id = setTimeout(() => setShouldRemove(true), opts.delay);\n      return () => clearTimeout(id);\n    }\n    return undefined;\n  }, []);\n\n  React.useEffect(() => {\n    if (shouldRemove) {\n      // @ts-ignore\n      const id = setTimeout(() => removeRef.current(), 200);\n      return () => clearTimeout(id);\n    }\n  }, [shouldRemove]);\n\n  React.useEffect(() => {\n    setDimensions({ height: elementRef.current?.clientHeight, width: elementRef.current?.clientWidth });\n  }, []);\n\n  const animation = animations[shouldRemove ? 'leave' : 'enter'];\n  const direction = animation[opts.enterFrom ?? ToastEntryDirection.TOP];\n\n  const fromY = dimensions.height * direction.fromHeight;\n  const toY = dimensions.height * direction.toHeight;\n  const fromX = dimensions.width * direction.fromWidth;\n  const toX = dimensions.width * direction.toWidth;\n\n  let prop = {\n    duration: animation.duration,\n    bezier: animation.bezier,\n    transform: `translateY(${toY}) translateX(${toX})`,\n    keyframes: keyframes`\n        0% {\n          transform: translateY(${fromY}px) translateX(${fromX}px);\n        }\n        100% {\n          transform: translateY(${toY}px) translateX(${toX}px);\n        }`,\n  };\n\n  if (!dimensions.height) {\n    prop = {\n      ...prop,\n      ...{\n        transform: 'translateY(-1000vh) translateX(-1000vw)',\n        keyframes: keyframes``,\n      },\n    };\n  }\n\n  const theme = ToastColor[opts.color ?? ToastColor.BLACK];\n\n  if (!shouldRemove){\n    setTimeout(() => elementRef?.current?.focus());\n  }\n\n  return (\n    <Container data-testid={testId}\n               animation={prop}\n               ref={elementRef}\n               withLoader={!!opts.autoClose}\n               className={theme}\n               withClose={!!opts.showCloseButton}\n               tabIndex={-1}>\n      {opts.icon && <IconContainer>{opts.icon}</IconContainer>}\n      <TextContainer className={'description'}>{content}</TextContainer>\n      {opts.action && (\n        <ActionButtons>\n          {opts.action.map((action, i) => (\n            <Button\n              size={Size.Small}\n              variant={action.type === ToastActionType.SECONDARY ? 'secondary' : 'primary'}\n              colorTheme={opts.color !== ToastColor.WHITE ? 'dark' : 'teal'}\n              invertFocus={opts.color === ToastColor.BLACK}\n              key={i}\n              onClick={() => {\n                setShouldRemove(true);\n                action.handler();\n              }}\n              className={'action'}>\n              {action.label}\n            </Button>\n          ))}\n        </ActionButtons>\n      )}\n      {opts.showCloseButton && (\n        <CloseButton className={`close-button ${theme}`}>\n          <IconButton variant={'secondary'}\n                      shape=\"circular\"\n                      useTransparentBackground={true}\n                      invertFocus={opts.color === ToastColor.BLACK}\n                      action={(event) => setShouldRemove(true)}>\n            <Close size=\"24px\" color={COLORS.neutral_600} />\n          </IconButton>\n        </CloseButton>\n      )}\n      {!!opts.autoClose && <Loader className={`loader ${theme}`} duration={opts.delay ?? 0} />}\n    </Container>\n  );\n};\n\nexport default Toast;\n\nconst animations = {\n  enter: {\n    bezier: 'cubic-bezier(0.22, 0.61, 0.35, 1)',\n    duration: '300ms',\n    [ToastEntryDirection.TOP]: {\n      fromHeight: -1,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.BOTTOM]: {\n      fromHeight: 1,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.LEFT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: -1,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.RIGHT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 1,\n      toWidth: 0,\n    },\n  },\n  leave: {\n    bezier: 'cubic-bezier(0.5, 0.05, 0.67, 0.19)',\n    duration: '205ms',\n    [ToastEntryDirection.TOP]: {\n      fromHeight: 0,\n      toHeight: -1,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.BOTTOM]: {\n      fromHeight: 0,\n      toHeight: 1,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.LEFT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: -1,\n    },\n    [ToastEntryDirection.RIGHT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 1,\n    },\n  },\n};\n"],"mappings":"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"}
+{"version":3,"file":"Toast.cjs","names":["LoaderAnimationKeyframes","keyframes","Loader","styled","div","props","duration","ToastColor","BLACK","COLORS","neutral_200","neutral_800","WHITE","neutral_400","white","BLUE","accent1_200","accent1_600","GREEN","correct_200","correct_500","ORANGE","warning_200","warning_500","RED","critical_200","critical_500","Container","BOXSHADOWS","BOXSHADOW_L2","animation","bezier","transform","withClose","withLoader","ComponentSStyling","ComponentTextStyle","Regular","HyperLinkInvertedStyling","black","HyperLinkDefaultStyling","ActionButtons","CloseButton","neutral_600","TextContainer","span","IconContainer","DEFAULT_OPTIONS","color","autoClose","delay","showCloseButton","position","ToastPosition","TOPLEFT","enterFrom","ToastEntryDirection","TOP","Toast","content","remove","options","testId","Error","removeRef","React","useRef","current","elementRef","useState","shouldRemove","setShouldRemove","width","height","dimensions","setDimensions","opts","useEffect","id","setTimeout","clearTimeout","undefined","clientHeight","clientWidth","animations","direction","fromY","fromHeight","toY","toHeight","fromX","fromWidth","toX","toWidth","prop","theme","focus","icon","action","map","i","Size","Small","type","ToastActionType","SECONDARY","handler","label","event","enter","BOTTOM","LEFT","RIGHT","leave"],"sources":["../../src/Toasters/Toast.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled, { keyframes } from 'styled-components';\nimport { ToastActionType, ToastColor, ToastEntryDirection, ToastPosition } from '../types';\nimport { BOXSHADOWS, COLORS} from '../styles';\nimport { Size } from '../types'\nimport { Button, IconButton } from '../Button';\nimport { ComponentSStyling, ComponentTextStyle } from '../styles';\nimport {HyperLinkDefaultStyling, HyperLinkInvertedStyling} from '../HyperLink';\nimport { SystemIcons } from '../icons';\n\nconst LoaderAnimationKeyframes = keyframes`\n  0% {\n    background-position: right;\n  }\n  100% {\n    background-position: left;\n  }\n`;\n\nconst Loader = styled.div<{ duration: number }>`\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: ${LoaderAnimationKeyframes} ${(props) => props.duration}ms cubic-bezier(0.18, 0.39, 0.35, 1);\n\n  &.${ToastColor[ToastColor.BLACK]} {\n    background: linear-gradient(to right, ${COLORS.neutral_200} 50%, ${COLORS.neutral_800} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    background: linear-gradient(to right, ${COLORS.neutral_400} 50%, ${COLORS.white} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.BLUE]} {\n    background: linear-gradient(to right, ${COLORS.accent1_200} 50%, ${COLORS.accent1_600} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.GREEN]} {\n    background: linear-gradient(to right, ${COLORS.correct_200} 50%, ${COLORS.correct_500} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.ORANGE]} {\n    background: linear-gradient(to right, ${COLORS.warning_200} 50%, ${COLORS.warning_500} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.RED]} {\n    background: linear-gradient(to right, ${COLORS.critical_200} 50%, ${COLORS.critical_500} 50%) left;\n    background-size: 200% 100%;\n  }\n`;\n\nconst Container = styled.div<{ animation: { duration: string; bezier: string; transform: string; keyframes: any }; withLoader: boolean; withClose: boolean }>`\n  box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n  border-radius: 4px;\n\n  animation: ${(props) => props.animation.keyframes} ${(props) => props.animation.duration} ${(props) => props.animation.bezier};\n  transform: ${(props) => props.animation.transform};\n\n  transition: all 300ms cubic-bezier(0.64, 0.04, 0.35, 1);\n\n  padding: 0 ${(props) => (props.withClose ? '0' : '16px')} ${(props) => (props.withLoader ? '4px' : '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  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.white)}\n\n  & a {\n    display: inline;\n    ${HyperLinkInvertedStyling}\n  }\n\n  &.${ToastColor[ToastColor.BLACK]} {\n    background-color: ${COLORS.neutral_800};\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    background-color: ${COLORS.white};\n    color: ${COLORS.black};\n\n    & a {\n      ${HyperLinkDefaultStyling}\n    }\n  }\n\n  &.${ToastColor[ToastColor.BLUE]} {\n    background-color: ${COLORS.accent1_600};\n  }\n\n  &.${ToastColor[ToastColor.GREEN]} {\n    background-color: ${COLORS.correct_500};\n  }\n\n  &.${ToastColor[ToastColor.ORANGE]} {\n    background-color: ${COLORS.warning_500};\n  }\n\n  &.${ToastColor[ToastColor.RED]} {\n    background-color: ${COLORS.critical_500};\n  }\n`;\n\nconst ActionButtons = styled.div`\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n\n  & .action {\n    height: unset;\n  }\n`;\n\nconst CloseButton = styled.div`\n  & > button {\n    margin-left: 16px;\n\n    & svg {\n      padding: 0;\n    }\n  }\n\n  button svg path{\n    fill: ${COLORS.white} !important;\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    button svg path {\n      fill: ${COLORS.neutral_600} !important;\n    }\n  }\n`;\n\nconst TextContainer = styled.span`\n  font-feature-settings: 'liga' off;\n  width: 240px;\n  display: flex;\n  padding: 16px 0;\n`;\n\nconst IconContainer = styled.span`\n  margin-right: -8px;\n`;\n\nexport type ToastOptions = {\n  color?: ToastColor;\n  autoClose?: boolean;\n  delay?: number;\n  showCloseButton?: boolean;\n  action?: {\n    label: string;\n    handler: () => void;\n    type?: ToastActionType;\n  }[];\n  position: ToastPosition;\n  enterFrom?: ToastEntryDirection;\n  icon?: React.ReactNode;\n};\n\ntype Props = {\n  remove?: any;\n  content: any;\n  options?: ToastOptions;\n  testId?: string;\n};\n\nconst DEFAULT_OPTIONS: ToastOptions = {\n  color: ToastColor.BLACK,\n  autoClose: true,\n  delay: 5000,\n  showCloseButton: false,\n  position: ToastPosition.TOPLEFT,\n  enterFrom: ToastEntryDirection.TOP,\n};\n\nconst Toast = ({ content, remove, options = DEFAULT_OPTIONS, testId }: Props) => {\n\n  if(!remove)\n    throw new Error('remove function is required when rendering Toast. Make sure that you are using useToast hook and ToastProvider for rendering Toasts');\n\n  const removeRef = React.useRef();\n  removeRef.current = remove;\n\n  const elementRef = React.useRef<any>(null);\n\n  const [shouldRemove, setShouldRemove] = React.useState(false);\n  const [dimensions, setDimensions] = React.useState<{ width: number; height: number }>({ width: 0, height: 0 });\n\n  const opts = { ...DEFAULT_OPTIONS, ...options };\n\n  React.useEffect(() => {\n    if (opts?.autoClose) {\n      // @ts-ignore\n      const id = setTimeout(() => setShouldRemove(true), opts.delay);\n      return () => clearTimeout(id);\n    }\n    return undefined;\n  }, []);\n\n  React.useEffect(() => {\n    if (shouldRemove) {\n      // @ts-ignore\n      const id = setTimeout(() => removeRef.current(), 200);\n      return () => clearTimeout(id);\n    }\n  }, [shouldRemove]);\n\n  React.useEffect(() => {\n    setDimensions({ height: elementRef.current?.clientHeight, width: elementRef.current?.clientWidth });\n  }, []);\n\n  const animation = animations[shouldRemove ? 'leave' : 'enter'];\n  const direction = animation[opts.enterFrom ?? ToastEntryDirection.TOP];\n\n  const fromY = dimensions.height * direction.fromHeight;\n  const toY = dimensions.height * direction.toHeight;\n  const fromX = dimensions.width * direction.fromWidth;\n  const toX = dimensions.width * direction.toWidth;\n\n  let prop = {\n    duration: animation.duration,\n    bezier: animation.bezier,\n    transform: `translateY(${toY}) translateX(${toX})`,\n    keyframes: keyframes`\n        0% {\n          transform: translateY(${fromY}px) translateX(${fromX}px);\n        }\n        100% {\n          transform: translateY(${toY}px) translateX(${toX}px);\n        }`,\n  };\n\n  if (!dimensions.height) {\n    prop = {\n      ...prop,\n      ...{\n        transform: 'translateY(-1000vh) translateX(-1000vw)',\n        keyframes: keyframes``,\n      },\n    };\n  }\n\n  const theme = ToastColor[opts.color ?? ToastColor.BLACK];\n\n  if (!shouldRemove){\n    setTimeout(() => elementRef?.current?.focus());\n  }\n\n  return (\n    <Container data-testid={testId}\n               animation={prop}\n               ref={elementRef}\n               withLoader={!!opts.autoClose}\n               className={theme}\n               withClose={!!opts.showCloseButton}\n               tabIndex={-1}>\n      {opts.icon && <IconContainer>{opts.icon}</IconContainer>}\n      <TextContainer className={'description'}>{content}</TextContainer>\n      {opts.action && (\n        <ActionButtons>\n          {opts.action.map((action, i) => (\n            <Button\n              size={Size.Small}\n              variant={action.type === ToastActionType.SECONDARY ? 'secondary' : 'primary'}\n              colorTheme={opts.color !== ToastColor.WHITE ? 'dark' : 'teal'}\n              invertFocus={opts.color === ToastColor.BLACK}\n              key={i}\n              onClick={() => {\n                setShouldRemove(true);\n                action.handler();\n              }}\n              className={'action'}>\n              {action.label}\n            </Button>\n          ))}\n        </ActionButtons>\n      )}\n      {opts.showCloseButton && (\n        <CloseButton className={`close-button ${theme}`}>\n          <IconButton variant={'secondary'}\n                      shape=\"circular\"\n                      useTransparentBackground={true}\n                      invertFocus={opts.color === ToastColor.BLACK}\n                      action={(event) => setShouldRemove(true)}>\n            <SystemIcons.Close size=\"24px\" color={COLORS.neutral_600} />\n          </IconButton>\n        </CloseButton>\n      )}\n      {!!opts.autoClose && <Loader className={`loader ${theme}`} duration={opts.delay ?? 0} />}\n    </Container>\n  );\n};\n\nexport default Toast;\n\nconst animations = {\n  enter: {\n    bezier: 'cubic-bezier(0.22, 0.61, 0.35, 1)',\n    duration: '300ms',\n    [ToastEntryDirection.TOP]: {\n      fromHeight: -1,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.BOTTOM]: {\n      fromHeight: 1,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.LEFT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: -1,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.RIGHT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 1,\n      toWidth: 0,\n    },\n  },\n  leave: {\n    bezier: 'cubic-bezier(0.5, 0.05, 0.67, 0.19)',\n    duration: '205ms',\n    [ToastEntryDirection.TOP]: {\n      fromHeight: 0,\n      toHeight: -1,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.BOTTOM]: {\n      fromHeight: 0,\n      toHeight: 1,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.LEFT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: -1,\n    },\n    [ToastEntryDirection.RIGHT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 1,\n    },\n  },\n};\n"],"mappings":"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"}

package/dist/Toasters/Toast.js

@@ -9,11 +9,11 @@ import * as React from 'react';
 import styled, { keyframes } from 'styled-components';
 import { ToastActionType, ToastColor, ToastEntryDirection, ToastPosition } from '../types';
 import { BOXSHADOWS, COLORS } from '../styles';
-import { Close } from '../icons/systemicons/SystemIcons';
 import { Size } from '../types';
 import { Button, IconButton } from '../Button';
 import { ComponentSStyling, ComponentTextStyle } from '../styles';
 import { HyperLinkDefaultStyling, HyperLinkInvertedStyling } from '../HyperLink';
+import { SystemIcons } from '../icons';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var LoaderAnimationKeyframes = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    background-position: right;\n  }\n  100% {\n    background-position: left;\n  }\n"])));
@@ -161,7 +161,7 @@ var Toast = function Toast(_ref) {
         action: function action(event) {
           return setShouldRemove(true);
         },
-        children: /*#__PURE__*/_jsx(Close, {
+        children: /*#__PURE__*/_jsx(SystemIcons.Close, {
           size: "24px",
           color: COLORS.neutral_600
         })

package/dist/Toasters/Toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","names":["React","styled","keyframes","ToastActionType","ToastColor","ToastEntryDirection","ToastPosition","BOXSHADOWS","COLORS","Close","Size","Button","IconButton","ComponentSStyling","ComponentTextStyle","HyperLinkDefaultStyling","HyperLinkInvertedStyling","LoaderAnimationKeyframes","Loader","div","props","duration","BLACK","neutral_200","neutral_800","WHITE","neutral_400","white","BLUE","accent1_200","accent1_600","GREEN","correct_200","correct_500","ORANGE","warning_200","warning_500","RED","critical_200","critical_500","Container","BOXSHADOW_L2","animation","bezier","transform","withClose","withLoader","Regular","black","ActionButtons","CloseButton","neutral_600","TextContainer","span","IconContainer","DEFAULT_OPTIONS","color","autoClose","delay","showCloseButton","position","TOPLEFT","enterFrom","TOP","Toast","content","remove","options","testId","Error","removeRef","useRef","current","elementRef","useState","shouldRemove","setShouldRemove","width","height","dimensions","setDimensions","opts","useEffect","id","setTimeout","clearTimeout","undefined","clientHeight","clientWidth","animations","direction","fromY","fromHeight","toY","toHeight","fromX","fromWidth","toX","toWidth","prop","theme","focus","icon","action","map","i","Small","type","SECONDARY","handler","label","event","enter","BOTTOM","LEFT","RIGHT","leave"],"sources":["../../src/Toasters/Toast.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled, { keyframes } from 'styled-components';\nimport { ToastActionType, ToastColor, ToastEntryDirection, ToastPosition } from '../types';\nimport { BOXSHADOWS, COLORS} from '../styles';\nimport { Close } from '../icons/systemicons/SystemIcons';\nimport { Size } from '../types' \nimport { Button, IconButton } from '../Button';\nimport { ComponentSStyling, ComponentTextStyle } from '../styles';\nimport {HyperLinkDefaultStyling, HyperLinkInvertedStyling} from '../HyperLink';\n\nconst LoaderAnimationKeyframes = keyframes`\n  0% {\n    background-position: right;\n  }\n  100% {\n    background-position: left;\n  }\n`;\n\nconst Loader = styled.div<{ duration: number }>`\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: ${LoaderAnimationKeyframes} ${(props) => props.duration}ms cubic-bezier(0.18, 0.39, 0.35, 1);\n\n  &.${ToastColor[ToastColor.BLACK]} {\n    background: linear-gradient(to right, ${COLORS.neutral_200} 50%, ${COLORS.neutral_800} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    background: linear-gradient(to right, ${COLORS.neutral_400} 50%, ${COLORS.white} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.BLUE]} {\n    background: linear-gradient(to right, ${COLORS.accent1_200} 50%, ${COLORS.accent1_600} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.GREEN]} {\n    background: linear-gradient(to right, ${COLORS.correct_200} 50%, ${COLORS.correct_500} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.ORANGE]} {\n    background: linear-gradient(to right, ${COLORS.warning_200} 50%, ${COLORS.warning_500} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.RED]} {\n    background: linear-gradient(to right, ${COLORS.critical_200} 50%, ${COLORS.critical_500} 50%) left;\n    background-size: 200% 100%;\n  }\n`;\n\nconst Container = styled.div<{ animation: { duration: string; bezier: string; transform: string; keyframes: any }; withLoader: boolean; withClose: boolean }>`\n  box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n  border-radius: 4px;\n\n  animation: ${(props) => props.animation.keyframes} ${(props) => props.animation.duration} ${(props) => props.animation.bezier};\n  transform: ${(props) => props.animation.transform};\n\n  transition: all 300ms cubic-bezier(0.64, 0.04, 0.35, 1);\n\n  padding: 0 ${(props) => (props.withClose ? '0' : '16px')} ${(props) => (props.withLoader ? '4px' : '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  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.white)}\n\n  & a {\n    display: inline;\n    ${HyperLinkInvertedStyling}\n  }\n\n  &.${ToastColor[ToastColor.BLACK]} {\n    background-color: ${COLORS.neutral_800};\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    background-color: ${COLORS.white};\n    color: ${COLORS.black};\n\n    & a {\n      ${HyperLinkDefaultStyling}\n    }\n  }\n\n  &.${ToastColor[ToastColor.BLUE]} {\n    background-color: ${COLORS.accent1_600};\n  }\n\n  &.${ToastColor[ToastColor.GREEN]} {\n    background-color: ${COLORS.correct_500};\n  }\n\n  &.${ToastColor[ToastColor.ORANGE]} {\n    background-color: ${COLORS.warning_500};\n  }\n\n  &.${ToastColor[ToastColor.RED]} {\n    background-color: ${COLORS.critical_500};\n  }\n`;\n\nconst ActionButtons = styled.div`\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n\n  & .action {\n    height: unset;\n  }\n`;\n\nconst CloseButton = styled.div`\n  & > button {\n    margin-left: 16px;\n\n    & svg {\n      padding: 0;\n    }\n  }\n\n  button svg path{\n    fill: ${COLORS.white} !important;\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    button svg path {\n      fill: ${COLORS.neutral_600} !important;\n    }\n  }\n`;\n\nconst TextContainer = styled.span`\n  font-feature-settings: 'liga' off;\n  width: 240px;\n  display: flex;\n  padding: 16px 0;\n`;\n\nconst IconContainer = styled.span`\n  margin-right: -8px;\n`;\n\nexport type ToastOptions = {\n  color?: ToastColor;\n  autoClose?: boolean;\n  delay?: number;\n  showCloseButton?: boolean;\n  action?: {\n    label: string;\n    handler: () => void;\n    type?: ToastActionType;\n  }[];\n  position: ToastPosition;\n  enterFrom?: ToastEntryDirection;\n  icon?: React.ReactNode;\n};\n\ntype Props = {\n  remove?: any;\n  content: any;\n  options?: ToastOptions;\n  testId?: string;\n};\n\nconst DEFAULT_OPTIONS: ToastOptions = {\n  color: ToastColor.BLACK,\n  autoClose: true,\n  delay: 5000,\n  showCloseButton: false,\n  position: ToastPosition.TOPLEFT,\n  enterFrom: ToastEntryDirection.TOP,\n};\n\nconst Toast = ({ content, remove, options = DEFAULT_OPTIONS, testId }: Props) => {\n\n  if(!remove)\n    throw new Error('remove function is required when rendering Toast. Make sure that you are using useToast hook and ToastProvider for rendering Toasts');\n\n  const removeRef = React.useRef();\n  removeRef.current = remove;\n\n  const elementRef = React.useRef<any>(null);\n\n  const [shouldRemove, setShouldRemove] = React.useState(false);\n  const [dimensions, setDimensions] = React.useState<{ width: number; height: number }>({ width: 0, height: 0 });\n\n  const opts = { ...DEFAULT_OPTIONS, ...options };\n\n  React.useEffect(() => {\n    if (opts?.autoClose) {\n      // @ts-ignore\n      const id = setTimeout(() => setShouldRemove(true), opts.delay);\n      return () => clearTimeout(id);\n    }\n    return undefined;\n  }, []);\n\n  React.useEffect(() => {\n    if (shouldRemove) {\n      // @ts-ignore\n      const id = setTimeout(() => removeRef.current(), 200);\n      return () => clearTimeout(id);\n    }\n  }, [shouldRemove]);\n\n  React.useEffect(() => {\n    setDimensions({ height: elementRef.current?.clientHeight, width: elementRef.current?.clientWidth });\n  }, []);\n\n  const animation = animations[shouldRemove ? 'leave' : 'enter'];\n  const direction = animation[opts.enterFrom ?? ToastEntryDirection.TOP];\n\n  const fromY = dimensions.height * direction.fromHeight;\n  const toY = dimensions.height * direction.toHeight;\n  const fromX = dimensions.width * direction.fromWidth;\n  const toX = dimensions.width * direction.toWidth;\n\n  let prop = {\n    duration: animation.duration,\n    bezier: animation.bezier,\n    transform: `translateY(${toY}) translateX(${toX})`,\n    keyframes: keyframes`\n        0% {\n          transform: translateY(${fromY}px) translateX(${fromX}px);\n        }\n        100% {\n          transform: translateY(${toY}px) translateX(${toX}px);\n        }`,\n  };\n\n  if (!dimensions.height) {\n    prop = {\n      ...prop,\n      ...{\n        transform: 'translateY(-1000vh) translateX(-1000vw)',\n        keyframes: keyframes``,\n      },\n    };\n  }\n\n  const theme = ToastColor[opts.color ?? ToastColor.BLACK];\n\n  if (!shouldRemove){\n    setTimeout(() => elementRef?.current?.focus());\n  }\n\n  return (\n    <Container data-testid={testId}\n               animation={prop}\n               ref={elementRef}\n               withLoader={!!opts.autoClose}\n               className={theme}\n               withClose={!!opts.showCloseButton}\n               tabIndex={-1}>\n      {opts.icon && <IconContainer>{opts.icon}</IconContainer>}\n      <TextContainer className={'description'}>{content}</TextContainer>\n      {opts.action && (\n        <ActionButtons>\n          {opts.action.map((action, i) => (\n            <Button\n              size={Size.Small}\n              variant={action.type === ToastActionType.SECONDARY ? 'secondary' : 'primary'}\n              colorTheme={opts.color !== ToastColor.WHITE ? 'dark' : 'teal'}\n              invertFocus={opts.color === ToastColor.BLACK}\n              key={i}\n              onClick={() => {\n                setShouldRemove(true);\n                action.handler();\n              }}\n              className={'action'}>\n              {action.label}\n            </Button>\n          ))}\n        </ActionButtons>\n      )}\n      {opts.showCloseButton && (\n        <CloseButton className={`close-button ${theme}`}>\n          <IconButton variant={'secondary'}\n                      shape=\"circular\"\n                      useTransparentBackground={true}\n                      invertFocus={opts.color === ToastColor.BLACK}\n                      action={(event) => setShouldRemove(true)}>\n            <Close size=\"24px\" color={COLORS.neutral_600} />\n          </IconButton>\n        </CloseButton>\n      )}\n      {!!opts.autoClose && <Loader className={`loader ${theme}`} duration={opts.delay ?? 0} />}\n    </Container>\n  );\n};\n\nexport default Toast;\n\nconst animations = {\n  enter: {\n    bezier: 'cubic-bezier(0.22, 0.61, 0.35, 1)',\n    duration: '300ms',\n    [ToastEntryDirection.TOP]: {\n      fromHeight: -1,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.BOTTOM]: {\n      fromHeight: 1,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.LEFT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: -1,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.RIGHT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 1,\n      toWidth: 0,\n    },\n  },\n  leave: {\n    bezier: 'cubic-bezier(0.5, 0.05, 0.67, 0.19)',\n    duration: '205ms',\n    [ToastEntryDirection.TOP]: {\n      fromHeight: 0,\n      toHeight: -1,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.BOTTOM]: {\n      fromHeight: 0,\n      toHeight: 1,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.LEFT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: -1,\n    },\n    [ToastEntryDirection.RIGHT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 1,\n    },\n  },\n};\n"],"mappings":"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"}
+{"version":3,"file":"Toast.js","names":["React","styled","keyframes","ToastActionType","ToastColor","ToastEntryDirection","ToastPosition","BOXSHADOWS","COLORS","Size","Button","IconButton","ComponentSStyling","ComponentTextStyle","HyperLinkDefaultStyling","HyperLinkInvertedStyling","SystemIcons","LoaderAnimationKeyframes","Loader","div","props","duration","BLACK","neutral_200","neutral_800","WHITE","neutral_400","white","BLUE","accent1_200","accent1_600","GREEN","correct_200","correct_500","ORANGE","warning_200","warning_500","RED","critical_200","critical_500","Container","BOXSHADOW_L2","animation","bezier","transform","withClose","withLoader","Regular","black","ActionButtons","CloseButton","neutral_600","TextContainer","span","IconContainer","DEFAULT_OPTIONS","color","autoClose","delay","showCloseButton","position","TOPLEFT","enterFrom","TOP","Toast","content","remove","options","testId","Error","removeRef","useRef","current","elementRef","useState","shouldRemove","setShouldRemove","width","height","dimensions","setDimensions","opts","useEffect","id","setTimeout","clearTimeout","undefined","clientHeight","clientWidth","animations","direction","fromY","fromHeight","toY","toHeight","fromX","fromWidth","toX","toWidth","prop","theme","focus","icon","action","map","i","Small","type","SECONDARY","handler","label","event","enter","BOTTOM","LEFT","RIGHT","leave"],"sources":["../../src/Toasters/Toast.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled, { keyframes } from 'styled-components';\nimport { ToastActionType, ToastColor, ToastEntryDirection, ToastPosition } from '../types';\nimport { BOXSHADOWS, COLORS} from '../styles';\nimport { Size } from '../types'\nimport { Button, IconButton } from '../Button';\nimport { ComponentSStyling, ComponentTextStyle } from '../styles';\nimport {HyperLinkDefaultStyling, HyperLinkInvertedStyling} from '../HyperLink';\nimport { SystemIcons } from '../icons';\n\nconst LoaderAnimationKeyframes = keyframes`\n  0% {\n    background-position: right;\n  }\n  100% {\n    background-position: left;\n  }\n`;\n\nconst Loader = styled.div<{ duration: number }>`\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: ${LoaderAnimationKeyframes} ${(props) => props.duration}ms cubic-bezier(0.18, 0.39, 0.35, 1);\n\n  &.${ToastColor[ToastColor.BLACK]} {\n    background: linear-gradient(to right, ${COLORS.neutral_200} 50%, ${COLORS.neutral_800} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    background: linear-gradient(to right, ${COLORS.neutral_400} 50%, ${COLORS.white} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.BLUE]} {\n    background: linear-gradient(to right, ${COLORS.accent1_200} 50%, ${COLORS.accent1_600} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.GREEN]} {\n    background: linear-gradient(to right, ${COLORS.correct_200} 50%, ${COLORS.correct_500} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.ORANGE]} {\n    background: linear-gradient(to right, ${COLORS.warning_200} 50%, ${COLORS.warning_500} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.RED]} {\n    background: linear-gradient(to right, ${COLORS.critical_200} 50%, ${COLORS.critical_500} 50%) left;\n    background-size: 200% 100%;\n  }\n`;\n\nconst Container = styled.div<{ animation: { duration: string; bezier: string; transform: string; keyframes: any }; withLoader: boolean; withClose: boolean }>`\n  box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n  border-radius: 4px;\n\n  animation: ${(props) => props.animation.keyframes} ${(props) => props.animation.duration} ${(props) => props.animation.bezier};\n  transform: ${(props) => props.animation.transform};\n\n  transition: all 300ms cubic-bezier(0.64, 0.04, 0.35, 1);\n\n  padding: 0 ${(props) => (props.withClose ? '0' : '16px')} ${(props) => (props.withLoader ? '4px' : '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  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.white)}\n\n  & a {\n    display: inline;\n    ${HyperLinkInvertedStyling}\n  }\n\n  &.${ToastColor[ToastColor.BLACK]} {\n    background-color: ${COLORS.neutral_800};\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    background-color: ${COLORS.white};\n    color: ${COLORS.black};\n\n    & a {\n      ${HyperLinkDefaultStyling}\n    }\n  }\n\n  &.${ToastColor[ToastColor.BLUE]} {\n    background-color: ${COLORS.accent1_600};\n  }\n\n  &.${ToastColor[ToastColor.GREEN]} {\n    background-color: ${COLORS.correct_500};\n  }\n\n  &.${ToastColor[ToastColor.ORANGE]} {\n    background-color: ${COLORS.warning_500};\n  }\n\n  &.${ToastColor[ToastColor.RED]} {\n    background-color: ${COLORS.critical_500};\n  }\n`;\n\nconst ActionButtons = styled.div`\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n\n  & .action {\n    height: unset;\n  }\n`;\n\nconst CloseButton = styled.div`\n  & > button {\n    margin-left: 16px;\n\n    & svg {\n      padding: 0;\n    }\n  }\n\n  button svg path{\n    fill: ${COLORS.white} !important;\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    button svg path {\n      fill: ${COLORS.neutral_600} !important;\n    }\n  }\n`;\n\nconst TextContainer = styled.span`\n  font-feature-settings: 'liga' off;\n  width: 240px;\n  display: flex;\n  padding: 16px 0;\n`;\n\nconst IconContainer = styled.span`\n  margin-right: -8px;\n`;\n\nexport type ToastOptions = {\n  color?: ToastColor;\n  autoClose?: boolean;\n  delay?: number;\n  showCloseButton?: boolean;\n  action?: {\n    label: string;\n    handler: () => void;\n    type?: ToastActionType;\n  }[];\n  position: ToastPosition;\n  enterFrom?: ToastEntryDirection;\n  icon?: React.ReactNode;\n};\n\ntype Props = {\n  remove?: any;\n  content: any;\n  options?: ToastOptions;\n  testId?: string;\n};\n\nconst DEFAULT_OPTIONS: ToastOptions = {\n  color: ToastColor.BLACK,\n  autoClose: true,\n  delay: 5000,\n  showCloseButton: false,\n  position: ToastPosition.TOPLEFT,\n  enterFrom: ToastEntryDirection.TOP,\n};\n\nconst Toast = ({ content, remove, options = DEFAULT_OPTIONS, testId }: Props) => {\n\n  if(!remove)\n    throw new Error('remove function is required when rendering Toast. Make sure that you are using useToast hook and ToastProvider for rendering Toasts');\n\n  const removeRef = React.useRef();\n  removeRef.current = remove;\n\n  const elementRef = React.useRef<any>(null);\n\n  const [shouldRemove, setShouldRemove] = React.useState(false);\n  const [dimensions, setDimensions] = React.useState<{ width: number; height: number }>({ width: 0, height: 0 });\n\n  const opts = { ...DEFAULT_OPTIONS, ...options };\n\n  React.useEffect(() => {\n    if (opts?.autoClose) {\n      // @ts-ignore\n      const id = setTimeout(() => setShouldRemove(true), opts.delay);\n      return () => clearTimeout(id);\n    }\n    return undefined;\n  }, []);\n\n  React.useEffect(() => {\n    if (shouldRemove) {\n      // @ts-ignore\n      const id = setTimeout(() => removeRef.current(), 200);\n      return () => clearTimeout(id);\n    }\n  }, [shouldRemove]);\n\n  React.useEffect(() => {\n    setDimensions({ height: elementRef.current?.clientHeight, width: elementRef.current?.clientWidth });\n  }, []);\n\n  const animation = animations[shouldRemove ? 'leave' : 'enter'];\n  const direction = animation[opts.enterFrom ?? ToastEntryDirection.TOP];\n\n  const fromY = dimensions.height * direction.fromHeight;\n  const toY = dimensions.height * direction.toHeight;\n  const fromX = dimensions.width * direction.fromWidth;\n  const toX = dimensions.width * direction.toWidth;\n\n  let prop = {\n    duration: animation.duration,\n    bezier: animation.bezier,\n    transform: `translateY(${toY}) translateX(${toX})`,\n    keyframes: keyframes`\n        0% {\n          transform: translateY(${fromY}px) translateX(${fromX}px);\n        }\n        100% {\n          transform: translateY(${toY}px) translateX(${toX}px);\n        }`,\n  };\n\n  if (!dimensions.height) {\n    prop = {\n      ...prop,\n      ...{\n        transform: 'translateY(-1000vh) translateX(-1000vw)',\n        keyframes: keyframes``,\n      },\n    };\n  }\n\n  const theme = ToastColor[opts.color ?? ToastColor.BLACK];\n\n  if (!shouldRemove){\n    setTimeout(() => elementRef?.current?.focus());\n  }\n\n  return (\n    <Container data-testid={testId}\n               animation={prop}\n               ref={elementRef}\n               withLoader={!!opts.autoClose}\n               className={theme}\n               withClose={!!opts.showCloseButton}\n               tabIndex={-1}>\n      {opts.icon && <IconContainer>{opts.icon}</IconContainer>}\n      <TextContainer className={'description'}>{content}</TextContainer>\n      {opts.action && (\n        <ActionButtons>\n          {opts.action.map((action, i) => (\n            <Button\n              size={Size.Small}\n              variant={action.type === ToastActionType.SECONDARY ? 'secondary' : 'primary'}\n              colorTheme={opts.color !== ToastColor.WHITE ? 'dark' : 'teal'}\n              invertFocus={opts.color === ToastColor.BLACK}\n              key={i}\n              onClick={() => {\n                setShouldRemove(true);\n                action.handler();\n              }}\n              className={'action'}>\n              {action.label}\n            </Button>\n          ))}\n        </ActionButtons>\n      )}\n      {opts.showCloseButton && (\n        <CloseButton className={`close-button ${theme}`}>\n          <IconButton variant={'secondary'}\n                      shape=\"circular\"\n                      useTransparentBackground={true}\n                      invertFocus={opts.color === ToastColor.BLACK}\n                      action={(event) => setShouldRemove(true)}>\n            <SystemIcons.Close size=\"24px\" color={COLORS.neutral_600} />\n          </IconButton>\n        </CloseButton>\n      )}\n      {!!opts.autoClose && <Loader className={`loader ${theme}`} duration={opts.delay ?? 0} />}\n    </Container>\n  );\n};\n\nexport default Toast;\n\nconst animations = {\n  enter: {\n    bezier: 'cubic-bezier(0.22, 0.61, 0.35, 1)',\n    duration: '300ms',\n    [ToastEntryDirection.TOP]: {\n      fromHeight: -1,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.BOTTOM]: {\n      fromHeight: 1,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.LEFT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: -1,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.RIGHT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 1,\n      toWidth: 0,\n    },\n  },\n  leave: {\n    bezier: 'cubic-bezier(0.5, 0.05, 0.67, 0.19)',\n    duration: '205ms',\n    [ToastEntryDirection.TOP]: {\n      fromHeight: 0,\n      toHeight: -1,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.BOTTOM]: {\n      fromHeight: 0,\n      toHeight: 1,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.LEFT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: -1,\n    },\n    [ToastEntryDirection.RIGHT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 1,\n    },\n  },\n};\n"],"mappings":"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"}