@laerdal/life-react-components 5.1.0 → 6.0.0-dev.1.full

package/dist/Tag/Tag.js

@@ -1,18 +1,68 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
 const _excluded = ["label", "icon", "variant", "className"];
-var _templateObject, _templateObject2, _templateObject3;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import * as React from 'react';
 import styled from 'styled-components';
 import { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  padding: 4px;\n  height: 24px;\n  width: calc(100%);\n  max-width: fit-content;\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  border-radius: 2px;\n  box-sizing: border-box;\n\n  &.neutral {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.positive {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.warning {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.critical {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.accent1 {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.accent2 {\n    background-color: ", ";\n    color: ", ";\n  }\n\n"])), props => props.$isLabelPresent ? '64px' : '', props => COLORS.getColor('neutral_100', props.theme), props => COLORS.getColor('neutral_600', props.theme), props => COLORS.getColor('correct_100', props.theme), props => COLORS.getColor('correct_600', props.theme), props => COLORS.getColor('warning_100', props.theme), props => COLORS.getColor('warning_600', props.theme), props => COLORS.getColor('critical_100', props.theme), props => COLORS.getColor('critical_600', props.theme), props => COLORS.getColor('accent1_100', props.theme), props => COLORS.getColor('accent1_600', props.theme), props => COLORS.getColor('accent2_100', props.theme), props => COLORS.getColor('accent2_600', props.theme));
-const IconContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 16px;\n  height: 16px;\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n"])));
-const TextContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: 16px;\n  padding: 0 4px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;  \n  ", "\n"])), ComponentXSStyling(ComponentTextStyle.Bold, null));
+const Container = styled.div`
+  display: flex;
+  padding: 4px;
+  height: 24px;
+  width: calc(100%);
+  max-width: fit-content;
+  align-items: center;
+  justify-content: center;
+  min-width: ${props => props.$isLabelPresent ? '64px' : ''};
+  border-radius: 2px;
+  box-sizing: border-box;
+
+  &.neutral {
+    background-color: ${props => COLORS.getColor('neutral_100', props.theme)};
+    color: ${props => COLORS.getColor('neutral_600', props.theme)};
+  }
+  &.positive {
+    background-color: ${props => COLORS.getColor('correct_100', props.theme)};
+    color: ${props => COLORS.getColor('correct_600', props.theme)};
+  }
+  &.warning {
+    background-color: ${props => COLORS.getColor('warning_100', props.theme)};
+    color: ${props => COLORS.getColor('warning_600', props.theme)};
+  }
+  &.critical {
+    background-color: ${props => COLORS.getColor('critical_100', props.theme)};
+    color: ${props => COLORS.getColor('critical_600', props.theme)};
+  }
+  &.accent1 {
+    background-color: ${props => COLORS.getColor('accent1_100', props.theme)};
+    color: ${props => COLORS.getColor('accent1_600', props.theme)};
+  }
+  &.accent2 {
+    background-color: ${props => COLORS.getColor('accent2_100', props.theme)};
+    color: ${props => COLORS.getColor('accent2_600', props.theme)};
+  }
+
+`;
+const IconContainer = styled.div`
+  display: flex;
+  width: 16px;
+  height: 16px;
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+`;
+const TextContainer = styled.div`
+  height: 16px;
+  padding: 0 4px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;  
+  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}
+`;
 const Tag = _ref => {
   let {
       label,
@@ -21,7 +71,7 @@ const Tag = _ref => {
       className
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
-  const cls = "".concat(className !== null && className !== void 0 ? className : '', " ").concat(variant);
+  const cls = `${className ?? ''} ${variant}`;
   return /*#__PURE__*/_jsxs(Container, _objectSpread(_objectSpread({
     $variant: variant,
     $isLabelPresent: !!label,

package/dist/Tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","names":["React","styled","COLORS","ComponentTextStyle","ComponentXSStyling","jsx","_jsx","jsxs","_jsxs","Container","div","_templateObject","_taggedTemplateLiteral","props","$isLabelPresent","getColor","theme","IconContainer","_templateObject2","TextContainer","_templateObject3","Bold","Tag","_ref","label","icon","variant","className","rest","_objectWithoutProperties","_excluded","cls","concat","_objectSpread","$variant","children","$icon","propTypes","_pt","string","node","oneOf"],"sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\r\n\r\nconst Container = styled.div<{$variant: TagVariants, $isLabelPresent: boolean}>`\r\n  display: flex;\r\n  padding: 4px;\r\n  height: 24px;\r\n  width: calc(100%);\r\n  max-width: fit-content;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-width: ${props=>props.$isLabelPresent ? '64px' : ''};\r\n  border-radius: 2px;\r\n  box-sizing: border-box;\r\n\r\n  &.neutral {\r\n    background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n  }\r\n  &.positive {\r\n    background-color: ${props => COLORS.getColor('correct_100', props.theme)};\r\n    color: ${props => COLORS.getColor('correct_600', props.theme)};\r\n  }\r\n  &.warning {\r\n    background-color: ${props => COLORS.getColor('warning_100', props.theme)};\r\n    color: ${props => COLORS.getColor('warning_600', props.theme)};\r\n  }\r\n  &.critical {\r\n    background-color: ${props => COLORS.getColor('critical_100', props.theme)};\r\n    color: ${props => COLORS.getColor('critical_600', props.theme)};\r\n  }\r\n  &.accent1 {\r\n    background-color: ${props => COLORS.getColor('accent1_100', props.theme)};\r\n    color: ${props => COLORS.getColor('accent1_600', props.theme)};\r\n  }\r\n  &.accent2 {\r\n    background-color: ${props => COLORS.getColor('accent2_100', props.theme)};\r\n    color: ${props => COLORS.getColor('accent2_600', props.theme)};\r\n  }\r\n\r\n`;\r\n\r\nconst IconContainer = styled.div<{$variant: TagVariants}>`\r\n  display: flex;\r\n  width: 16px;\r\n  height: 16px;\r\n  svg {\r\n    width: 16px;\r\n    height: 16px;\r\n  }\r\n`;\r\n\r\nconst TextContainer = styled.div<{$variant: TagVariants, $icon: React.ReactNode}>`\r\n  height: 16px;\r\n  padding: 0 4px;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n  overflow: hidden;  \r\n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\r\n`;\r\n\r\n\r\nexport type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\r\n\r\nexport type TagProps = React.HTMLAttributes<HTMLDivElement> & {\r\n  /** Optional. Label to be shown in the Tag. */\r\n  label?: string;\r\n  /** Optional. Icon to be shown in the tag. */\r\n  icon?: React.ReactNode;\r\n  /** Optional. Style Variant of the Tag. Defaults to 'neutral' */\r\n  variant?: TagVariants;\r\n}\r\n\r\nconst Tag: React.FunctionComponent<TagProps> = ({label, icon, variant='neutral', className, ...rest}) => {\r\n  const cls = `${className ?? ''} ${variant}`;\r\n  return (   \r\n    <Container $variant={variant} $isLabelPresent={!!label} className={cls} {...rest}>\r\n      {icon && <IconContainer $variant={variant} data-testid={'iconContainer'}>\r\n          {icon}\r\n        </IconContainer>\r\n      }\r\n      {label && <TextContainer $variant={variant} $icon={icon}>\r\n          {label}\r\n        </TextContainer>\r\n      }\r\n    </Container>\r\n  );\r\n};\r\n\r\nexport default Tag;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Tag.js","names":["React","styled","COLORS","ComponentTextStyle","ComponentXSStyling","jsx","_jsx","jsxs","_jsxs","Container","div","props","$isLabelPresent","getColor","theme","IconContainer","TextContainer","Bold","Tag","_ref","label","icon","variant","className","rest","_objectWithoutProperties","_excluded","cls","_objectSpread","$variant","children","$icon","propTypes","_pt","string","node","oneOf"],"sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\r\n\r\nconst Container = styled.div<{$variant: TagVariants, $isLabelPresent: boolean}>`\r\n  display: flex;\r\n  padding: 4px;\r\n  height: 24px;\r\n  width: calc(100%);\r\n  max-width: fit-content;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-width: ${props=>props.$isLabelPresent ? '64px' : ''};\r\n  border-radius: 2px;\r\n  box-sizing: border-box;\r\n\r\n  &.neutral {\r\n    background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n  }\r\n  &.positive {\r\n    background-color: ${props => COLORS.getColor('correct_100', props.theme)};\r\n    color: ${props => COLORS.getColor('correct_600', props.theme)};\r\n  }\r\n  &.warning {\r\n    background-color: ${props => COLORS.getColor('warning_100', props.theme)};\r\n    color: ${props => COLORS.getColor('warning_600', props.theme)};\r\n  }\r\n  &.critical {\r\n    background-color: ${props => COLORS.getColor('critical_100', props.theme)};\r\n    color: ${props => COLORS.getColor('critical_600', props.theme)};\r\n  }\r\n  &.accent1 {\r\n    background-color: ${props => COLORS.getColor('accent1_100', props.theme)};\r\n    color: ${props => COLORS.getColor('accent1_600', props.theme)};\r\n  }\r\n  &.accent2 {\r\n    background-color: ${props => COLORS.getColor('accent2_100', props.theme)};\r\n    color: ${props => COLORS.getColor('accent2_600', props.theme)};\r\n  }\r\n\r\n`;\r\n\r\nconst IconContainer = styled.div<{$variant: TagVariants}>`\r\n  display: flex;\r\n  width: 16px;\r\n  height: 16px;\r\n  svg {\r\n    width: 16px;\r\n    height: 16px;\r\n  }\r\n`;\r\n\r\nconst TextContainer = styled.div<{$variant: TagVariants, $icon: React.ReactNode}>`\r\n  height: 16px;\r\n  padding: 0 4px;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n  overflow: hidden;  \r\n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\r\n`;\r\n\r\n\r\nexport type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\r\n\r\nexport type TagProps = React.HTMLAttributes<HTMLDivElement> & {\r\n  /** Optional. Label to be shown in the Tag. */\r\n  label?: string;\r\n  /** Optional. Icon to be shown in the tag. */\r\n  icon?: React.ReactNode;\r\n  /** Optional. Style Variant of the Tag. Defaults to 'neutral' */\r\n  variant?: TagVariants;\r\n}\r\n\r\nconst Tag: React.FunctionComponent<TagProps> = ({label, icon, variant='neutral', className, ...rest}) => {\r\n  const cls = `${className ?? ''} ${variant}`;\r\n  return (   \r\n    <Container $variant={variant} $isLabelPresent={!!label} className={cls} {...rest}>\r\n      {icon && <IconContainer $variant={variant} data-testid={'iconContainer'}>\r\n          {icon}\r\n        </IconContainer>\r\n      }\r\n      {label && <TextContainer $variant={variant} $icon={icon}>\r\n          {label}\r\n        </TextContainer>\r\n      }\r\n    </Container>\r\n  );\r\n};\r\n\r\nexport default Tag;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Tag/index.d.ts

@@ -1,2 +1,2 @@
-export { default as Tag } from './Tag';
-export type { TagVariants, TagProps } from './Tag';
+export { default as Tag } from './Tag';
+export type { TagVariants, TagProps } from './Tag';

package/dist/Tile/Tile.cjs

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _types = require("../types");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
@@ -17,10 +16,19 @@ var _TileBody = _interopRequireDefault(require("./TileBody"));
 var _styles = require("../styles");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["header", "footer", "size", "style", "children", "className"];
-var _templateObject;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-const Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-flow: column;\n  flex-direction: column;\n  background: ", ";\n  border-radius: 8px;\n  border: 1px solid ", ";\n  box-sizing: border-box;\n"])), props => _styles.COLORS.getColor('white', props.theme), props => _styles.COLORS.getColor('neutral_200', props.theme));
+const Wrapper = _styledComponents.default.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-flow: column;
+  flex-direction: column;
+  background: ${props => _styles.COLORS.getColor('white', props.theme)};
+  border-radius: 8px;
+  border: 1px solid ${props => _styles.COLORS.getColor('neutral_200', props.theme)};
+  box-sizing: border-box;
+`;
 const Tile = _ref => {
   let {
       header,
@@ -33,7 +41,7 @@ const Tile = _ref => {
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, _objectSpread(_objectSpread({
     style: style,
-    className: "".concat(size, " ").concat(className || '')
+    className: `${size} ${className || ''}`
   }, rest), {}, {
     children: [header && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TileHeader.default, _objectSpread(_objectSpread({}, header), {}, {
       size: size

package/dist/Tile/Tile.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tile.cjs","names":["_react","_interopRequireDefault","require","_types","_styledComponents","_TileHeader","_TileFooter","_TileBody","_styles","_jsxRuntime","_excluded","_templateObject","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","default","getOwnPropertyDescriptors","defineProperties","defineProperty","Wrapper","styled","div","_taggedTemplateLiteral2","props","COLORS","getColor","theme","Tile","_ref","header","footer","size","Size","Medium","style","children","className","rest","_objectWithoutProperties2","jsxs","concat","jsx","_default","exports"],"sources":["../../src/Tile/Tile.tsx"],"sourcesContent":["import React from 'react';\r\nimport {Size} from '../types';\r\nimport {TileProps} from './TileTypes';\r\nimport styled from 'styled-components';\r\nimport TileHeader from './TileHeader';\r\nimport TileFooter from './TileFooter';\r\nimport TileBody from './TileBody';\r\nimport {COLORS} from '../styles';\r\n\r\nconst Wrapper = styled.div`\r\n  width: 100%;\r\n  height: 100%;\r\n  display: flex;\r\n  flex-flow: column;\r\n  flex-direction: column;\r\n  background: ${props => COLORS.getColor('white', props.theme)};\r\n  border-radius: 8px;\r\n  border: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  box-sizing: border-box;\r\n`;\r\n\r\nconst Tile: React.FunctionComponent<TileProps> = ({\r\n                                                    header,\r\n                                                    footer,\r\n                                                    size = Size.Medium,\r\n                                                    style,\r\n                                                    children,\r\n                                                    className,\r\n                                                    ...rest\r\n                                                  }) => {\r\n\r\n  return (\r\n    <Wrapper style={style}\r\n             className={`${size} ${className || ''}`}\r\n             {...rest}>\r\n      {header && <TileHeader {...header} size={size}/>}\r\n      <TileBody size={size}>\r\n        {children}\r\n      </TileBody>\r\n      {footer && <TileFooter {...footer} size={size}/>}\r\n    </Wrapper>\r\n  )\r\n}\r\n\r\n\r\nexport default Tile;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Tile.cjs","names":["_react","_interopRequireDefault","require","_types","_styledComponents","_TileHeader","_TileFooter","_TileBody","_styles","_jsxRuntime","_excluded","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","default","getOwnPropertyDescriptors","defineProperties","defineProperty","Wrapper","styled","div","props","COLORS","getColor","theme","Tile","_ref","header","footer","size","Size","Medium","style","children","className","rest","_objectWithoutProperties2","jsxs","jsx","_default","exports"],"sources":["../../src/Tile/Tile.tsx"],"sourcesContent":["import React from 'react';\r\nimport {Size} from '../types';\r\nimport {TileProps} from './TileTypes';\r\nimport styled from 'styled-components';\r\nimport TileHeader from './TileHeader';\r\nimport TileFooter from './TileFooter';\r\nimport TileBody from './TileBody';\r\nimport {COLORS} from '../styles';\r\n\r\nconst Wrapper = styled.div`\r\n  width: 100%;\r\n  height: 100%;\r\n  display: flex;\r\n  flex-flow: column;\r\n  flex-direction: column;\r\n  background: ${props => COLORS.getColor('white', props.theme)};\r\n  border-radius: 8px;\r\n  border: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  box-sizing: border-box;\r\n`;\r\n\r\nconst Tile: React.FunctionComponent<TileProps> = ({\r\n                                                    header,\r\n                                                    footer,\r\n                                                    size = Size.Medium,\r\n                                                    style,\r\n                                                    children,\r\n                                                    className,\r\n                                                    ...rest\r\n                                                  }) => {\r\n\r\n  return (\r\n    <Wrapper style={style}\r\n             className={`${size} ${className || ''}`}\r\n             {...rest}>\r\n      {header && <TileHeader {...header} size={size}/>}\r\n      <TileBody size={size}>\r\n        {children}\r\n      </TileBody>\r\n      {footer && <TileFooter {...footer} size={size}/>}\r\n    </Wrapper>\r\n  )\r\n}\r\n\r\n\r\nexport default Tile;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Tile/Tile.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { TileProps } from './TileTypes';
-declare const Tile: React.FunctionComponent<TileProps>;
-export default Tile;
+import React from 'react';
+import { TileProps } from './TileTypes';
+declare const Tile: React.FunctionComponent<TileProps>;
+export default Tile;

package/dist/Tile/Tile.js

@@ -1,8 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 const _excluded = ["header", "footer", "size", "style", "children", "className"];
-var _templateObject;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
@@ -13,7 +11,17 @@ import TileFooter from './TileFooter';
 import TileBody from './TileBody';
 import { COLORS } from '../styles';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-flow: column;\n  flex-direction: column;\n  background: ", ";\n  border-radius: 8px;\n  border: 1px solid ", ";\n  box-sizing: border-box;\n"])), props => COLORS.getColor('white', props.theme), props => COLORS.getColor('neutral_200', props.theme));
+const Wrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-flow: column;
+  flex-direction: column;
+  background: ${props => COLORS.getColor('white', props.theme)};
+  border-radius: 8px;
+  border: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};
+  box-sizing: border-box;
+`;
 const Tile = _ref => {
   let {
       header,
@@ -26,7 +34,7 @@ const Tile = _ref => {
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_jsxs(Wrapper, _objectSpread(_objectSpread({
     style: style,
-    className: "".concat(size, " ").concat(className || '')
+    className: `${size} ${className || ''}`
   }, rest), {}, {
     children: [header && /*#__PURE__*/_jsx(TileHeader, _objectSpread(_objectSpread({}, header), {}, {
       size: size

package/dist/Tile/Tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tile.js","names":["React","Size","styled","TileHeader","TileFooter","TileBody","COLORS","jsx","_jsx","jsxs","_jsxs","Wrapper","div","_templateObject","_taggedTemplateLiteral","props","getColor","theme","Tile","_ref","header","footer","size","Medium","style","children","className","rest","_objectWithoutProperties","_excluded","_objectSpread","concat"],"sources":["../../src/Tile/Tile.tsx"],"sourcesContent":["import React from 'react';\r\nimport {Size} from '../types';\r\nimport {TileProps} from './TileTypes';\r\nimport styled from 'styled-components';\r\nimport TileHeader from './TileHeader';\r\nimport TileFooter from './TileFooter';\r\nimport TileBody from './TileBody';\r\nimport {COLORS} from '../styles';\r\n\r\nconst Wrapper = styled.div`\r\n  width: 100%;\r\n  height: 100%;\r\n  display: flex;\r\n  flex-flow: column;\r\n  flex-direction: column;\r\n  background: ${props => COLORS.getColor('white', props.theme)};\r\n  border-radius: 8px;\r\n  border: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  box-sizing: border-box;\r\n`;\r\n\r\nconst Tile: React.FunctionComponent<TileProps> = ({\r\n                                                    header,\r\n                                                    footer,\r\n                                                    size = Size.Medium,\r\n                                                    style,\r\n                                                    children,\r\n                                                    className,\r\n                                                    ...rest\r\n                                                  }) => {\r\n\r\n  return (\r\n    <Wrapper style={style}\r\n             className={`${size} ${className || ''}`}\r\n             {...rest}>\r\n      {header && <TileHeader {...header} size={size}/>}\r\n      <TileBody size={size}>\r\n        {children}\r\n      </TileBody>\r\n      {footer && <TileFooter {...footer} size={size}/>}\r\n    </Wrapper>\r\n  )\r\n}\r\n\r\n\r\nexport default Tile;\r\n"],"mappings":";;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAAQC,IAAI,QAAO,UAAU;AAE7B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,OAAOC,UAAU,MAAM,cAAc;AACrC,OAAOC,UAAU,MAAM,cAAc;AACrC,OAAOC,QAAQ,MAAM,YAAY;AACjC,SAAQC,MAAM,QAAO,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEjC,MAAMC,OAAO,GAAGT,MAAM,CAACU,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,iNAMVC,KAAK,IAAIT,MAAM,CAACU,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC,EAExCF,KAAK,IAAIT,MAAM,CAACU,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC,CAEzE;AAED,MAAMC,IAAwC,GAAGC,IAAA,IAQO;EAAA,IARN;MACEC,MAAM;MACNC,MAAM;MACNC,IAAI,GAAGrB,IAAI,CAACsB,MAAM;MAClBC,KAAK;MACLC,QAAQ;MACRC;IAEF,CAAC,GAAAP,IAAA;IADIQ,IAAI,GAAAC,wBAAA,CAAAT,IAAA,EAAAU,SAAA;EAGzD,oBACEnB,KAAA,CAACC,OAAO,EAAAmB,aAAA,CAAAA,aAAA;IAACN,KAAK,EAAEA,KAAM;IACbE,SAAS,KAAAK,MAAA,CAAKT,IAAI,OAAAS,MAAA,CAAIL,SAAS,IAAI,EAAE;EAAG,GACpCC,IAAI;IAAAF,QAAA,GACdL,MAAM,iBAAIZ,IAAA,CAACL,UAAU,EAAA2B,aAAA,CAAAA,aAAA,KAAKV,MAAM;MAAEE,IAAI,EAAEA;IAAK,EAAC,CAAC,eAChDd,IAAA,CAACH,QAAQ;MAACiB,IAAI,EAAEA,IAAK;MAAAG,QAAA,EAClBA;IAAQ,CACD,CAAC,EACVJ,MAAM,iBAAIb,IAAA,CAACJ,UAAU,EAAA0B,aAAA,CAAAA,aAAA,KAAKT,MAAM;MAAEC,IAAI,EAAEA;IAAK,EAAC,CAAC;EAAA,EACzC,CAAC;AAEd,CAAC;AAGD,eAAeJ,IAAI","ignoreList":[]}
+{"version":3,"file":"Tile.js","names":["React","Size","styled","TileHeader","TileFooter","TileBody","COLORS","jsx","_jsx","jsxs","_jsxs","Wrapper","div","props","getColor","theme","Tile","_ref","header","footer","size","Medium","style","children","className","rest","_objectWithoutProperties","_excluded","_objectSpread"],"sources":["../../src/Tile/Tile.tsx"],"sourcesContent":["import React from 'react';\r\nimport {Size} from '../types';\r\nimport {TileProps} from './TileTypes';\r\nimport styled from 'styled-components';\r\nimport TileHeader from './TileHeader';\r\nimport TileFooter from './TileFooter';\r\nimport TileBody from './TileBody';\r\nimport {COLORS} from '../styles';\r\n\r\nconst Wrapper = styled.div`\r\n  width: 100%;\r\n  height: 100%;\r\n  display: flex;\r\n  flex-flow: column;\r\n  flex-direction: column;\r\n  background: ${props => COLORS.getColor('white', props.theme)};\r\n  border-radius: 8px;\r\n  border: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  box-sizing: border-box;\r\n`;\r\n\r\nconst Tile: React.FunctionComponent<TileProps> = ({\r\n                                                    header,\r\n                                                    footer,\r\n                                                    size = Size.Medium,\r\n                                                    style,\r\n                                                    children,\r\n                                                    className,\r\n                                                    ...rest\r\n                                                  }) => {\r\n\r\n  return (\r\n    <Wrapper style={style}\r\n             className={`${size} ${className || ''}`}\r\n             {...rest}>\r\n      {header && <TileHeader {...header} size={size}/>}\r\n      <TileBody size={size}>\r\n        {children}\r\n      </TileBody>\r\n      {footer && <TileFooter {...footer} size={size}/>}\r\n    </Wrapper>\r\n  )\r\n}\r\n\r\n\r\nexport default Tile;\r\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAAQC,IAAI,QAAO,UAAU;AAE7B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,OAAOC,UAAU,MAAM,cAAc;AACrC,OAAOC,UAAU,MAAM,cAAc;AACrC,OAAOC,QAAQ,MAAM,YAAY;AACjC,SAAQC,MAAM,QAAO,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEjC,MAAMC,OAAO,GAAGT,MAAM,CAACU,GAAG;AAC1B;AACA;AACA;AACA;AACA;AACA,gBAAgBC,KAAK,IAAIP,MAAM,CAACQ,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC;AAC9D;AACA,sBAAsBF,KAAK,IAAIP,MAAM,CAACQ,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAC1E;AACA,CAAC;AAED,MAAMC,IAAwC,GAAGC,IAAA,IAQO;EAAA,IARN;MACEC,MAAM;MACNC,MAAM;MACNC,IAAI,GAAGnB,IAAI,CAACoB,MAAM;MAClBC,KAAK;MACLC,QAAQ;MACRC;IAEF,CAAC,GAAAP,IAAA;IADIQ,IAAI,GAAAC,wBAAA,CAAAT,IAAA,EAAAU,SAAA;EAGzD,oBACEjB,KAAA,CAACC,OAAO,EAAAiB,aAAA,CAAAA,aAAA;IAACN,KAAK,EAAEA,KAAM;IACbE,SAAS,EAAE,GAAGJ,IAAI,IAAII,SAAS,IAAI,EAAE;EAAG,GACpCC,IAAI;IAAAF,QAAA,GACdL,MAAM,iBAAIV,IAAA,CAACL,UAAU,EAAAyB,aAAA,CAAAA,aAAA,KAAKV,MAAM;MAAEE,IAAI,EAAEA;IAAK,EAAC,CAAC,eAChDZ,IAAA,CAACH,QAAQ;MAACe,IAAI,EAAEA,IAAK;MAAAG,QAAA,EAClBA;IAAQ,CACD,CAAC,EACVJ,MAAM,iBAAIX,IAAA,CAACJ,UAAU,EAAAwB,aAAA,CAAAA,aAAA,KAAKT,MAAM;MAAEC,IAAI,EAAEA;IAAK,EAAC,CAAC;EAAA,EACzC,CAAC;AAEd,CAAC;AAGD,eAAeJ,IAAI","ignoreList":[]}

package/dist/Tile/TileBody.cjs

@@ -5,14 +5,31 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _types = require("../types");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _styles = require("../styles");
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject;
-const Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1;\n  margin: 8px;\n  overflow: auto;\n  box-sizing: border-box;\n\n  &.small {\n    padding: 0 8px;\n  }\n\n  &.medium {\n    padding: 0 12px;\n  }\n\n  &.large {\n    padding: 0 16px;\n  }\n\n  ", "\n"])), (0, _styles.scrollBarStyling)(_types.Size.Small));
+const Wrapper = _styledComponents.default.div`
+  flex: 1;
+  margin: 8px;
+  overflow: auto;
+  box-sizing: border-box;
+
+  &.small {
+    padding: 0 8px;
+  }
+
+  &.medium {
+    padding: 0 12px;
+  }
+
+  &.large {
+    padding: 0 16px;
+  }
+
+  ${(0, _styles.scrollBarStyling)(_types.Size.Small)}
+`;
 const TileBody = _ref => {
   let {
     children,

package/dist/Tile/TileBody.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TileBody.cjs","names":["_react","_interopRequireDefault","require","_types","_styledComponents","_styles","_jsxRuntime","_templateObject","Wrapper","styled","div","_taggedTemplateLiteral2","default","scrollBarStyling","Size","Small","TileBody","_ref","children","size","jsx","className","_default","exports"],"sources":["../../src/Tile/TileBody.tsx"],"sourcesContent":["import React from 'react'\r\nimport {Size} from '../types';\r\nimport styled from 'styled-components';\r\nimport {scrollBarStyling} from '../styles';\r\n\r\nconst Wrapper = styled.div`\r\n  flex: 1;\r\n  margin: 8px;\r\n  overflow: auto;\r\n  box-sizing: border-box;\r\n\r\n  &.small {\r\n    padding: 0 8px;\r\n  }\r\n\r\n  &.medium {\r\n    padding: 0 12px;\r\n  }\r\n\r\n  &.large {\r\n    padding: 0 16px;\r\n  }\r\n\r\n  ${scrollBarStyling(Size.Small)}\r\n`;\r\n\r\nconst TileBody: React.FunctionComponent<{ size: Size; children?: React.ReactNode; }> = ({children, size}) => {\r\n\r\n\r\n  return (\r\n    <Wrapper className={size}>\r\n      {children}\r\n    </Wrapper>\r\n  )\r\n}\r\n\r\n\r\nexport default TileBody;\r\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AAA2C,IAAAI,WAAA,GAAAJ,OAAA;AAAA,IAAAK,eAAA;AAE3C,MAAMC,OAAO,GAAGC,yBAAM,CAACC,GAAG,CAAAH,eAAA,KAAAA,eAAA,OAAAI,uBAAA,CAAAC,OAAA,8NAkBtB,IAAAC,wBAAgB,EAACC,WAAI,CAACC,KAAK,CAAC,CAC/B;AAED,MAAMC,QAA8E,GAAGC,IAAA,IAAsB;EAAA,IAArB;IAACC,QAAQ;IAAEC;EAAI,CAAC,GAAAF,IAAA;EAGtG,oBACE,IAAAX,WAAA,CAAAc,GAAA,EAACZ,OAAO;IAACa,SAAS,EAAEF,IAAK;IAAAD,QAAA,EACtBA;EAAQ,CACF,CAAC;AAEd,CAAC;AAAA,IAAAI,QAAA,GAAAC,OAAA,CAAAX,OAAA,GAGcI,QAAQ","ignoreList":[]}
+{"version":3,"file":"TileBody.cjs","names":["_react","_interopRequireDefault","require","_types","_styledComponents","_styles","_jsxRuntime","Wrapper","styled","div","scrollBarStyling","Size","Small","TileBody","_ref","children","size","jsx","className","_default","exports","default"],"sources":["../../src/Tile/TileBody.tsx"],"sourcesContent":["import React from 'react'\r\nimport {Size} from '../types';\r\nimport styled from 'styled-components';\r\nimport {scrollBarStyling} from '../styles';\r\n\r\nconst Wrapper = styled.div`\r\n  flex: 1;\r\n  margin: 8px;\r\n  overflow: auto;\r\n  box-sizing: border-box;\r\n\r\n  &.small {\r\n    padding: 0 8px;\r\n  }\r\n\r\n  &.medium {\r\n    padding: 0 12px;\r\n  }\r\n\r\n  &.large {\r\n    padding: 0 16px;\r\n  }\r\n\r\n  ${scrollBarStyling(Size.Small)}\r\n`;\r\n\r\nconst TileBody: React.FunctionComponent<{ size: Size; children?: React.ReactNode; }> = ({children, size}) => {\r\n\r\n\r\n  return (\r\n    <Wrapper className={size}>\r\n      {children}\r\n    </Wrapper>\r\n  )\r\n}\r\n\r\n\r\nexport default TileBody;\r\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AAA2C,IAAAI,WAAA,GAAAJ,OAAA;AAE3C,MAAMK,OAAO,GAAGC,yBAAM,CAACC,GAAG;AAC1B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI,IAAAC,wBAAgB,EAACC,WAAI,CAACC,KAAK,CAAC;AAChC,CAAC;AAED,MAAMC,QAA8E,GAAGC,IAAA,IAAsB;EAAA,IAArB;IAACC,QAAQ;IAAEC;EAAI,CAAC,GAAAF,IAAA;EAGtG,oBACE,IAAAR,WAAA,CAAAW,GAAA,EAACV,OAAO;IAACW,SAAS,EAAEF,IAAK;IAAAD,QAAA,EACtBA;EAAQ,CACF,CAAC;AAEd,CAAC;AAAA,IAAAI,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAGcR,QAAQ","ignoreList":[]}

package/dist/Tile/TileBody.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
-import { Size } from '../types';
-declare const TileBody: React.FunctionComponent<{
-    size: Size;
-    children?: React.ReactNode;
-}>;
-export default TileBody;
+import React from 'react';
+import { Size } from '../types';
+declare const TileBody: React.FunctionComponent<{
+    size: Size;
+    children?: React.ReactNode;
+}>;
+export default TileBody;

package/dist/Tile/TileBody.js

@@ -1,11 +1,28 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject;
 import React from 'react';
 import { Size } from '../types';
 import styled from 'styled-components';
 import { scrollBarStyling } from '../styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-const Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex: 1;\n  margin: 8px;\n  overflow: auto;\n  box-sizing: border-box;\n\n  &.small {\n    padding: 0 8px;\n  }\n\n  &.medium {\n    padding: 0 12px;\n  }\n\n  &.large {\n    padding: 0 16px;\n  }\n\n  ", "\n"])), scrollBarStyling(Size.Small));
+const Wrapper = styled.div`
+  flex: 1;
+  margin: 8px;
+  overflow: auto;
+  box-sizing: border-box;
+
+  &.small {
+    padding: 0 8px;
+  }
+
+  &.medium {
+    padding: 0 12px;
+  }
+
+  &.large {
+    padding: 0 16px;
+  }
+
+  ${scrollBarStyling(Size.Small)}
+`;
 const TileBody = _ref => {
   let {
     children,

package/dist/Tile/TileBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"TileBody.js","names":["React","Size","styled","scrollBarStyling","jsx","_jsx","Wrapper","div","_templateObject","_taggedTemplateLiteral","Small","TileBody","_ref","children","size","className"],"sources":["../../src/Tile/TileBody.tsx"],"sourcesContent":["import React from 'react'\r\nimport {Size} from '../types';\r\nimport styled from 'styled-components';\r\nimport {scrollBarStyling} from '../styles';\r\n\r\nconst Wrapper = styled.div`\r\n  flex: 1;\r\n  margin: 8px;\r\n  overflow: auto;\r\n  box-sizing: border-box;\r\n\r\n  &.small {\r\n    padding: 0 8px;\r\n  }\r\n\r\n  &.medium {\r\n    padding: 0 12px;\r\n  }\r\n\r\n  &.large {\r\n    padding: 0 16px;\r\n  }\r\n\r\n  ${scrollBarStyling(Size.Small)}\r\n`;\r\n\r\nconst TileBody: React.FunctionComponent<{ size: Size; children?: React.ReactNode; }> = ({children, size}) => {\r\n\r\n\r\n  return (\r\n    <Wrapper className={size}>\r\n      {children}\r\n    </Wrapper>\r\n  )\r\n}\r\n\r\n\r\nexport default TileBody;\r\n"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAAQC,IAAI,QAAO,UAAU;AAC7B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,gBAAgB,QAAO,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE3C,MAAMC,OAAO,GAAGJ,MAAM,CAACK,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,6NAkBtBN,gBAAgB,CAACF,IAAI,CAACS,KAAK,CAAC,CAC/B;AAED,MAAMC,QAA8E,GAAGC,IAAA,IAAsB;EAAA,IAArB;IAACC,QAAQ;IAAEC;EAAI,CAAC,GAAAF,IAAA;EAGtG,oBACEP,IAAA,CAACC,OAAO;IAACS,SAAS,EAAED,IAAK;IAAAD,QAAA,EACtBA;EAAQ,CACF,CAAC;AAEd,CAAC;AAGD,eAAeF,QAAQ","ignoreList":[]}
+{"version":3,"file":"TileBody.js","names":["React","Size","styled","scrollBarStyling","jsx","_jsx","Wrapper","div","Small","TileBody","_ref","children","size","className"],"sources":["../../src/Tile/TileBody.tsx"],"sourcesContent":["import React from 'react'\r\nimport {Size} from '../types';\r\nimport styled from 'styled-components';\r\nimport {scrollBarStyling} from '../styles';\r\n\r\nconst Wrapper = styled.div`\r\n  flex: 1;\r\n  margin: 8px;\r\n  overflow: auto;\r\n  box-sizing: border-box;\r\n\r\n  &.small {\r\n    padding: 0 8px;\r\n  }\r\n\r\n  &.medium {\r\n    padding: 0 12px;\r\n  }\r\n\r\n  &.large {\r\n    padding: 0 16px;\r\n  }\r\n\r\n  ${scrollBarStyling(Size.Small)}\r\n`;\r\n\r\nconst TileBody: React.FunctionComponent<{ size: Size; children?: React.ReactNode; }> = ({children, size}) => {\r\n\r\n\r\n  return (\r\n    <Wrapper className={size}>\r\n      {children}\r\n    </Wrapper>\r\n  )\r\n}\r\n\r\n\r\nexport default TileBody;\r\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAAQC,IAAI,QAAO,UAAU;AAC7B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,gBAAgB,QAAO,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE3C,MAAMC,OAAO,GAAGJ,MAAM,CAACK,GAAG;AAC1B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIJ,gBAAgB,CAACF,IAAI,CAACO,KAAK,CAAC;AAChC,CAAC;AAED,MAAMC,QAA8E,GAAGC,IAAA,IAAsB;EAAA,IAArB;IAACC,QAAQ;IAAEC;EAAI,CAAC,GAAAF,IAAA;EAGtG,oBACEL,IAAA,CAACC,OAAO;IAACO,SAAS,EAAED,IAAK;IAAAD,QAAA,EACtBA;EAAQ,CACF,CAAC;AAEd,CAAC;AAGD,eAAeF,QAAQ","ignoreList":[]}

package/dist/Tile/TileCommonItems.cjs

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.TileNoteWrapper = exports.TileNoteText = exports.TileNoteIcon = exports.TileHyperLinkWrapper = exports.TileHyperLinkText = exports.TileHyperLinkIcon = exports.RenderTileItem = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _Button = require("../Button");
 var _Toggles = require("../Toggles");
 var _Dropdown = require("../Dropdown");
@@ -19,25 +18,123 @@ var _types = require("../types");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["linkText", "componentType", "linkIcon"],
   _excluded2 = ["buttonText", "componentType"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-const TileNoteText = exports.TileNoteText = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)([""])));
-const TileNoteIcon = exports.TileNoteIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["display: flex;"])));
-const TileNoteWrapper = exports.TileNoteWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  color: ", ";\n\n  &.small {\n    gap: 4px;\n\n    ", " {\n      width: 16px;\n      height: 16px;\n    }\n\n    ", " {\n      ", "\n    }\n  }\n\n  &.medium {\n    gap: 6px;\n\n    ", " {\n      width: 16px;\n      height: 16px;\n    }\n\n    ", " {\n      ", "\n    }\n\n  }\n\n  &.large {\n    gap: 8px;\n\n    ", " {\n      width: 20px;\n      height: 20px;\n    }\n\n    ", " {\n      ", "\n    }\n  }\n"])), props => _styles.COLORS.getColor('neutral_600', props.theme), TileNoteIcon, TileNoteText, (0, _styles.ComponentXXSStyling)(_styles.ComponentTextStyle.Regular, null), TileNoteIcon, TileNoteText, (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null), TileNoteIcon, TileNoteText, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null));
-const TileHyperLinkIcon = exports.TileHyperLinkIcon = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["display: flex"])));
-const TileHyperLinkText = exports.TileHyperLinkText = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)([""])));
-const TileHyperLinkWrapper = exports.TileHyperLinkWrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  width: max-content;\n\n  ", "\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n\n  &.small {\n    ", " {\n      width: 24px;\n      height: 24px;\n    }\n\n    ", " {\n      ", "\n    }\n\n    a {\n      gap: 4px;\n    }\n  }\n\n  &.medium {\n    ", " {\n      width: 24px;\n      height: 24px;\n    }\n\n    ", " {\n      ", "\n    }\n\n    a {\n      gap: 6px;\n    }\n  }\n\n  &.large {\n    ", " {\n      width: 28px;\n      height: 28px;\n    }\n\n    ", " {\n      ", "\n    }\n\n    a {\n      gap: 8px;\n    }\n  }\n"])), props => (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.getColor('primary_500', props.theme)), TileHyperLinkIcon, TileHyperLinkText, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, null), TileHyperLinkIcon, TileHyperLinkText, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, null), TileHyperLinkIcon, TileHyperLinkText, (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Bold, null));
+const TileNoteText = exports.TileNoteText = _styledComponents.default.div``;
+const TileNoteIcon = exports.TileNoteIcon = _styledComponents.default.div`display: flex;`;
+const TileNoteWrapper = exports.TileNoteWrapper = _styledComponents.default.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  color: ${props => _styles.COLORS.getColor('neutral_600', props.theme)};
+
+  &.small {
+    gap: 4px;
+
+    ${TileNoteIcon} {
+      width: 16px;
+      height: 16px;
+    }
+
+    ${TileNoteText} {
+      ${(0, _styles.ComponentXXSStyling)(_styles.ComponentTextStyle.Regular, null)}
+    }
+  }
+
+  &.medium {
+    gap: 6px;
+
+    ${TileNoteIcon} {
+      width: 16px;
+      height: 16px;
+    }
+
+    ${TileNoteText} {
+      ${(0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null)}
+    }
+
+  }
+
+  &.large {
+    gap: 8px;
+
+    ${TileNoteIcon} {
+      width: 20px;
+      height: 20px;
+    }
+
+    ${TileNoteText} {
+      ${(0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null)}
+    }
+  }
+`;
+const TileHyperLinkIcon = exports.TileHyperLinkIcon = _styledComponents.default.div`display: flex`;
+const TileHyperLinkText = exports.TileHyperLinkText = _styledComponents.default.div``;
+const TileHyperLinkWrapper = exports.TileHyperLinkWrapper = _styledComponents.default.div`
+  width: max-content;
+
+  ${props => (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.getColor('primary_500', props.theme))}
+  a {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 4px;
+  }
+
+  &.small {
+    ${TileHyperLinkIcon} {
+      width: 24px;
+      height: 24px;
+    }
+
+    ${TileHyperLinkText} {
+      ${(0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, null)}
+    }
+
+    a {
+      gap: 4px;
+    }
+  }
+
+  &.medium {
+    ${TileHyperLinkIcon} {
+      width: 24px;
+      height: 24px;
+    }
+
+    ${TileHyperLinkText} {
+      ${(0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, null)}
+    }
+
+    a {
+      gap: 6px;
+    }
+  }
+
+  &.large {
+    ${TileHyperLinkIcon} {
+      width: 28px;
+      height: 28px;
+    }
+
+    ${TileHyperLinkText} {
+      ${(0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Bold, null)}
+    }
+
+    a {
+      gap: 8px;
+    }
+  }
+`;
 const RenderTileItem = function (item, size) {
   let key = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
   switch (item.componentType) {
     case 'icon':
       {
-        var _item$variant, _item$shape;
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
-          variant: (_item$variant = item.variant) !== null && _item$variant !== void 0 ? _item$variant : 'secondary',
+          variant: item.variant ?? 'secondary',
           useTransparentBackground: item.variant == 'secondary' ? true : false,
-          shape: (_item$shape = item.shape) !== null && _item$shape !== void 0 ? _item$shape : 'circular',
+          shape: item.shape ?? 'circular',
           action: item.action,
           tooltip: item.tooltip,
           disabled: item.disabled,
@@ -61,6 +158,7 @@ const RenderTileItem = function (item, size) {
           items: item.items,
           itemsType: item.itemsType,
           onClick: item.onClick,
+          value: item.value,
           icon: item.icon,
           tooltip: item.tooltip,
           action: item.action,
@@ -75,6 +173,28 @@ const RenderTileItem = function (item, size) {
           disabled: item.disabled
         }, key);
       }
+    case 'text-dropdown':
+      {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.DropdownButton, {
+          type: 'text',
+          items: item.items,
+          itemsType: item.itemsType,
+          onClick: item.onClick,
+          value: item.value,
+          label: item.label,
+          keepLabel: item.keepLabel,
+          action: item.action,
+          actionIcon: item.actionIcon,
+          actionLabel: item.actionLabel,
+          actionVariant: item.actionVariant,
+          actionLoading: item.actionLoading,
+          multiSelect: item.multiSelect,
+          scrollable: item.scrollable,
+          pinTopItem: item.pinTopItem,
+          maxHeight: item.maxHeight,
+          disabled: item.disabled
+        }, key);
+      }
     case 'note':
       {
         return /*#__PURE__*/(0, _jsxRuntime.jsxs)(TileNoteWrapper, {