@laerdal/life-react-components 2.1.1-dev.24 → 2.1.1-dev.29

package/dist/Accordion/AccordionItem.cjs

@@ -14,7 +14,7 @@ var _icons = require("../icons");
 var _styles = require("./styles");
 var _common = require("../common");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["id", "onSelect", "isActive", "title", "icon", "disabled", "isLast", "padding", "children", "className"];
+var _excluded = ["id", "onSelect", "isActive", "title", "icon", "disabled", "isLast", "padding", "children", "className", "size"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var AccordionItem = function AccordionItem(props) {
@@ -28,11 +28,12 @@ var AccordionItem = function AccordionItem(props) {
     padding = props.padding,
     children = props.children,
     className = props.className,
+    _props$size = props.size,
+    size = _props$size === void 0 ? _.Size.Medium : _props$size,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
-  var cls = (isActive ? 'active' : '') + (disabled ? ' disabled' : '') + (className ? " ".concat(className) : '');
+  var cls = (isActive ? 'active' : '') + (disabled ? ' disabled' : '') + (className ? " ".concat(className) : '') + " ".concat(size);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.AccordionItemContainer, {
     id: id,
-    displaySeparator: !isActive && !isLast,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ItemHeaderContainer, _objectSpread(_objectSpread({
       role: "button",
       "aria-expanded": isActive,
@@ -50,26 +51,16 @@ var AccordionItem = function AccordionItem(props) {
       onMouseDown: _common.defaultOnMouseDownHandler,
       className: cls
     }, rest), {}, {
-      children: [icon && /*#__PURE__*/_react.default.cloneElement(icon, {
-        size: '24px'
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: [icon, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         children: title
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         "aria-hidden": "true",
-        children: isActive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ChevronUp, {
-          color: _.COLORS.neutral_800,
-          size: "20px"
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ChevronDown, {
-          color: _.COLORS.neutral_600,
-          size: "20px"
-        })
+        children: [isActive && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ChevronUp, {}), !isActive && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ChevronDown, {})]
       })]
     })), isActive && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ItemBodyContainer, {
       id: "itemContentFor_".concat(id),
       padding: padding,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ComponentS, {
-        children: children
-      })
+      children: children
     })]
   });
 };

package/dist/Accordion/AccordionItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.cjs","names":["AccordionItem","props","id","onSelect","isActive","title","icon","disabled","isLast","padding","children","className","rest","cls","undefined","e","key","defaultOnMouseDownHandler","React","cloneElement","size","COLORS","neutral_800","neutral_600"],"sources":["../../src/Accordion/AccordionItem.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS, ComponentS } from '..';\nimport { SystemIcons } from '../icons';\nimport { AccordionItemProps } from './AccordionMenu';\nimport { AccordionItemContainer, ItemBodyContainer, ItemHeaderContainer } from './styles';\nimport { defaultOnMouseDownHandler } from '../common';\n\ninterface AccordionItemPropsInner extends AccordionItemProps {\n  onSelect: (id: string) => void;\n  isActive: boolean;\n  isLast: boolean;\n  padding?: string;\n}\n\nconst AccordionItem: React.FunctionComponent<AccordionItemPropsInner> = (props: AccordionItemPropsInner) => {\n  const { id, onSelect, isActive, title, icon, disabled, isLast, padding, children, className, ...rest } = props;\n\n  const cls = (isActive ? 'active' : '') + (disabled ? ' disabled' : '') + (className ? ` ${className}` : '');\n\n  return (\n    <AccordionItemContainer id={id} displaySeparator={!isActive && !isLast}>\n      <ItemHeaderContainer\n        role=\"button\"\n        aria-expanded={isActive}\n        id={`itemHeaderFor_${id}`}\n        aria-controls={`itemContentFor_${id}`}\n        tabIndex={!disabled ? 0 : undefined}\n        onClick={() => {\n          if (!disabled) {\n            onSelect(id);\n          }\n        }}\n        onKeyDown={(e: any) => {\n          if (e.key === 'Enter') onSelect(id);\n        }}\n        onMouseDown={defaultOnMouseDownHandler}\n        className={cls}\n        {...rest}>\n        {icon && React.cloneElement(icon as React.ReactElement, { size: '24px' })}\n        <span>{title}</span>\n        <div aria-hidden=\"true\">\n          {isActive ? <SystemIcons.ChevronUp color={COLORS.neutral_800} size=\"20px\" /> : <SystemIcons.ChevronDown color={COLORS.neutral_600} size=\"20px\" />}\n        </div>\n      </ItemHeaderContainer>\n      {isActive && (\n        <ItemBodyContainer id={`itemContentFor_${id}`} padding={padding}>\n          <ComponentS>{children}</ComponentS>\n        </ItemBodyContainer>\n      )}\n    </AccordionItemContainer>\n  );\n};\n\nexport default AccordionItem;\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAEA;AACA;AAAsD;AAAA;AAAA;AAAA;AAStD,IAAMA,aAA+D,GAAG,SAAlEA,aAA+D,CAAIC,KAA8B,EAAK;EAC1G,IAAQC,EAAE,GAA+FD,KAAK,CAAtGC,EAAE;IAAEC,QAAQ,GAAqFF,KAAK,CAAlGE,QAAQ;IAAEC,QAAQ,GAA2EH,KAAK,CAAxFG,QAAQ;IAAEC,KAAK,GAAoEJ,KAAK,CAA9EI,KAAK;IAAEC,IAAI,GAA8DL,KAAK,CAAvEK,IAAI;IAAEC,QAAQ,GAAoDN,KAAK,CAAjEM,QAAQ;IAAEC,MAAM,GAA4CP,KAAK,CAAvDO,MAAM;IAAEC,OAAO,GAAmCR,KAAK,CAA/CQ,OAAO;IAAEC,QAAQ,GAAyBT,KAAK,CAAtCS,QAAQ;IAAEC,SAAS,GAAcV,KAAK,CAA5BU,SAAS;IAAKC,IAAI,0CAAKX,KAAK;EAE9G,IAAMY,GAAG,GAAG,CAACT,QAAQ,GAAG,QAAQ,GAAG,EAAE,KAAKG,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAC,IAAII,SAAS,cAAOA,SAAS,IAAK,EAAE,CAAC;EAE3G,oBACE,sBAAC,8BAAsB;IAAC,EAAE,EAAET,EAAG;IAAC,gBAAgB,EAAE,CAACE,QAAQ,IAAI,CAACI,MAAO;IAAA,wBACrE,sBAAC,2BAAmB;MAClB,IAAI,EAAC,QAAQ;MACb,iBAAeJ,QAAS;MACxB,EAAE,0BAAmBF,EAAE,CAAG;MAC1B,0CAAiCA,EAAE,CAAG;MACtC,QAAQ,EAAE,CAACK,QAAQ,GAAG,CAAC,GAAGO,SAAU;MACpC,OAAO,EAAE,mBAAM;QACb,IAAI,CAACP,QAAQ,EAAE;UACbJ,QAAQ,CAACD,EAAE,CAAC;QACd;MACF,CAAE;MACF,SAAS,EAAE,mBAACa,CAAM,EAAK;QACrB,IAAIA,CAAC,CAACC,GAAG,KAAK,OAAO,EAAEb,QAAQ,CAACD,EAAE,CAAC;MACrC,CAAE;MACF,WAAW,EAAEe,iCAA0B;MACvC,SAAS,EAAEJ;IAAI,GACXD,IAAI;MAAA,WACPN,IAAI,iBAAIY,cAAK,CAACC,YAAY,CAACb,IAAI,EAAwB;QAAEc,IAAI,EAAE;MAAO,CAAC,CAAC,eACzE;QAAA,UAAOf;MAAK,EAAQ,eACpB;QAAK,eAAY,MAAM;QAAA,UACpBD,QAAQ,gBAAG,qBAAC,kBAAW,CAAC,SAAS;UAAC,KAAK,EAAEiB,QAAM,CAACC,WAAY;UAAC,IAAI,EAAC;QAAM,EAAG,gBAAG,qBAAC,kBAAW,CAAC,WAAW;UAAC,KAAK,EAAED,QAAM,CAACE,WAAY;UAAC,IAAI,EAAC;QAAM;MAAG,EAC7I;IAAA,GACc,EACrBnB,QAAQ,iBACP,qBAAC,yBAAiB;MAAC,EAAE,2BAAoBF,EAAE,CAAG;MAAC,OAAO,EAAEO,OAAQ;MAAA,uBAC9D,qBAAC,YAAU;QAAA,UAAEC;MAAQ;IAAc,EAEtC;EAAA,EACsB;AAE7B,CAAC;AAAC;EA3CAP,QAAQ;EACRC,QAAQ;EACRI,MAAM;EACNC,OAAO;AAAA;AAAA,eA0CMT,aAAa;AAAA"}
+{"version":3,"file":"AccordionItem.cjs","names":["AccordionItem","props","id","onSelect","isActive","title","icon","disabled","isLast","padding","children","className","size","Size","Medium","rest","cls","undefined","e","key","defaultOnMouseDownHandler"],"sources":["../../src/Accordion/AccordionItem.tsx"],"sourcesContent":["import React from 'react';\nimport {COLORS, ComponentS, Size} from '..';\nimport {SystemIcons} from '../icons';\nimport {AccordionItemProps} from './AccordionMenu';\nimport {AccordionItemContainer, ItemBodyContainer, ItemHeaderContainer} from './styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\ninterface AccordionItemPropsInner extends AccordionItemProps {\n  onSelect: (id: string) => void;\n  isActive: boolean;\n  isLast: boolean;\n  padding?: string;\n  size?: Size.Small | Size.Medium | Size.Large;\n}\n\nconst AccordionItem: React.FunctionComponent<AccordionItemPropsInner> = (props: AccordionItemPropsInner) => {\n  const {\n    id,\n    onSelect,\n    isActive,\n    title,\n    icon,\n    disabled,\n    isLast,\n    padding,\n    children,\n    className,\n    size = Size.Medium,\n    ...rest\n  } = props;\n\n  const cls = (isActive ? 'active' : '') + (disabled ? ' disabled' : '') + (className ? ` ${className}` : '') + ` ${size}`;\n\n  return (\n    <AccordionItemContainer id={id}>\n      <ItemHeaderContainer\n        role=\"button\"\n        aria-expanded={isActive}\n        id={`itemHeaderFor_${id}`}\n        aria-controls={`itemContentFor_${id}`}\n        tabIndex={!disabled ? 0 : undefined}\n        onClick={() => {\n          if (!disabled) {\n            onSelect(id);\n          }\n        }}\n        onKeyDown={(e: any) => {\n          if (e.key === 'Enter') onSelect(id);\n        }}\n        onMouseDown={defaultOnMouseDownHandler}\n        className={cls}\n        {...rest}>\n        {icon}\n        <span>{title}</span>\n        <div aria-hidden=\"true\">\n          {\n            isActive && <SystemIcons.ChevronUp/>\n          }\n          {\n            !isActive && <SystemIcons.ChevronDown/>\n          }\n        </div>\n      </ItemHeaderContainer>\n      {isActive && (\n        <ItemBodyContainer id={`itemContentFor_${id}`} padding={padding}>\n          {children}\n        </ItemBodyContainer>\n      )\n      }\n    </AccordionItemContainer>\n  );\n};\n\nexport default AccordionItem;\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAEA;AACA;AAAoD;AAAA;AAAA;AAAA;AAUpD,IAAMA,aAA+D,GAAG,SAAlEA,aAA+D,CAAIC,KAA8B,EAAK;EAC1G,IACEC,EAAE,GAYAD,KAAK,CAZPC,EAAE;IACFC,QAAQ,GAWNF,KAAK,CAXPE,QAAQ;IACRC,QAAQ,GAUNH,KAAK,CAVPG,QAAQ;IACRC,KAAK,GASHJ,KAAK,CATPI,KAAK;IACLC,IAAI,GAQFL,KAAK,CARPK,IAAI;IACJC,QAAQ,GAONN,KAAK,CAPPM,QAAQ;IACRC,MAAM,GAMJP,KAAK,CANPO,MAAM;IACNC,OAAO,GAKLR,KAAK,CALPQ,OAAO;IACPC,QAAQ,GAINT,KAAK,CAJPS,QAAQ;IACRC,SAAS,GAGPV,KAAK,CAHPU,SAAS;IAAA,cAGPV,KAAK,CAFPW,IAAI;IAAJA,IAAI,4BAAGC,MAAI,CAACC,MAAM;IACfC,IAAI,0CACLd,KAAK;EAET,IAAMe,GAAG,GAAG,CAACZ,QAAQ,GAAG,QAAQ,GAAG,EAAE,KAAKG,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAC,IAAII,SAAS,cAAOA,SAAS,IAAK,EAAE,CAAC,cAAOC,IAAI,CAAE;EAExH,oBACE,sBAAC,8BAAsB;IAAC,EAAE,EAAEV,EAAG;IAAA,wBAC7B,sBAAC,2BAAmB;MAClB,IAAI,EAAC,QAAQ;MACb,iBAAeE,QAAS;MACxB,EAAE,0BAAmBF,EAAE,CAAG;MAC1B,0CAAiCA,EAAE,CAAG;MACtC,QAAQ,EAAE,CAACK,QAAQ,GAAG,CAAC,GAAGU,SAAU;MACpC,OAAO,EAAE,mBAAM;QACb,IAAI,CAACV,QAAQ,EAAE;UACbJ,QAAQ,CAACD,EAAE,CAAC;QACd;MACF,CAAE;MACF,SAAS,EAAE,mBAACgB,CAAM,EAAK;QACrB,IAAIA,CAAC,CAACC,GAAG,KAAK,OAAO,EAAEhB,QAAQ,CAACD,EAAE,CAAC;MACrC,CAAE;MACF,WAAW,EAAEkB,iCAA0B;MACvC,SAAS,EAAEJ;IAAI,GACXD,IAAI;MAAA,WACPT,IAAI,eACL;QAAA,UAAOD;MAAK,EAAQ,eACpB;QAAK,eAAY,MAAM;QAAA,WAEnBD,QAAQ,iBAAI,qBAAC,kBAAW,CAAC,SAAS,KAAE,EAGpC,CAACA,QAAQ,iBAAI,qBAAC,kBAAW,CAAC,WAAW,KAAE;MAAA,EAErC;IAAA,GACc,EACrBA,QAAQ,iBACP,qBAAC,yBAAiB;MAAC,EAAE,2BAAoBF,EAAE,CAAG;MAAC,OAAO,EAAEO,OAAQ;MAAA,UAC7DC;IAAQ,EAEZ;EAAA,EAEsB;AAE7B,CAAC;AAAC;EA/DAP,QAAQ;EACRC,QAAQ;EACRI,MAAM;EACNC,OAAO;AAAA;AAAA,eA8DMT,aAAa;AAAA"}

package/dist/Accordion/AccordionItem.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
+import { Size } from '..';
 import { AccordionItemProps } from './AccordionMenu';
 interface AccordionItemPropsInner extends AccordionItemProps {
     onSelect: (id: string) => void;
     isActive: boolean;
     isLast: boolean;
     padding?: string;
+    size?: Size.Small | Size.Medium | Size.Large;
 }
 declare const AccordionItem: React.FunctionComponent<AccordionItemPropsInner>;
 export default AccordionItem;

package/dist/Accordion/AccordionItem.js

@@ -1,11 +1,11 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _pt from "prop-types";
-var _excluded = ["id", "onSelect", "isActive", "title", "icon", "disabled", "isLast", "padding", "children", "className"];
+var _excluded = ["id", "onSelect", "isActive", "title", "icon", "disabled", "isLast", "padding", "children", "className", "size"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React from 'react';
-import { COLORS, ComponentS } from '..';
+import { Size } from '..';
 import { SystemIcons } from '../icons';
 import { AccordionItemContainer, ItemBodyContainer, ItemHeaderContainer } from './styles';
 import { defaultOnMouseDownHandler } from '../common';
@@ -22,11 +22,12 @@ var AccordionItem = function AccordionItem(props) {
     padding = props.padding,
     children = props.children,
     className = props.className,
+    _props$size = props.size,
+    size = _props$size === void 0 ? Size.Medium : _props$size,
     rest = _objectWithoutProperties(props, _excluded);
-  var cls = (isActive ? 'active' : '') + (disabled ? ' disabled' : '') + (className ? " ".concat(className) : '');
+  var cls = (isActive ? 'active' : '') + (disabled ? ' disabled' : '') + (className ? " ".concat(className) : '') + " ".concat(size);
   return /*#__PURE__*/_jsxs(AccordionItemContainer, {
     id: id,
-    displaySeparator: !isActive && !isLast,
     children: [/*#__PURE__*/_jsxs(ItemHeaderContainer, _objectSpread(_objectSpread({
       role: "button",
       "aria-expanded": isActive,
@@ -44,26 +45,16 @@ var AccordionItem = function AccordionItem(props) {
       onMouseDown: defaultOnMouseDownHandler,
       className: cls
     }, rest), {}, {
-      children: [icon && /*#__PURE__*/React.cloneElement(icon, {
-        size: '24px'
-      }), /*#__PURE__*/_jsx("span", {
+      children: [icon, /*#__PURE__*/_jsx("span", {
         children: title
-      }), /*#__PURE__*/_jsx("div", {
+      }), /*#__PURE__*/_jsxs("div", {
         "aria-hidden": "true",
-        children: isActive ? /*#__PURE__*/_jsx(SystemIcons.ChevronUp, {
-          color: COLORS.neutral_800,
-          size: "20px"
-        }) : /*#__PURE__*/_jsx(SystemIcons.ChevronDown, {
-          color: COLORS.neutral_600,
-          size: "20px"
-        })
+        children: [isActive && /*#__PURE__*/_jsx(SystemIcons.ChevronUp, {}), !isActive && /*#__PURE__*/_jsx(SystemIcons.ChevronDown, {})]
       })]
     })), isActive && /*#__PURE__*/_jsx(ItemBodyContainer, {
       id: "itemContentFor_".concat(id),
       padding: padding,
-      children: /*#__PURE__*/_jsx(ComponentS, {
-        children: children
-      })
+      children: children
     })]
   });
 };

package/dist/Accordion/AccordionItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.js","names":["React","COLORS","ComponentS","SystemIcons","AccordionItemContainer","ItemBodyContainer","ItemHeaderContainer","defaultOnMouseDownHandler","AccordionItem","props","id","onSelect","isActive","title","icon","disabled","isLast","padding","children","className","rest","cls","undefined","e","key","cloneElement","size","neutral_800","neutral_600"],"sources":["../../src/Accordion/AccordionItem.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS, ComponentS } from '..';\nimport { SystemIcons } from '../icons';\nimport { AccordionItemProps } from './AccordionMenu';\nimport { AccordionItemContainer, ItemBodyContainer, ItemHeaderContainer } from './styles';\nimport { defaultOnMouseDownHandler } from '../common';\n\ninterface AccordionItemPropsInner extends AccordionItemProps {\n  onSelect: (id: string) => void;\n  isActive: boolean;\n  isLast: boolean;\n  padding?: string;\n}\n\nconst AccordionItem: React.FunctionComponent<AccordionItemPropsInner> = (props: AccordionItemPropsInner) => {\n  const { id, onSelect, isActive, title, icon, disabled, isLast, padding, children, className, ...rest } = props;\n\n  const cls = (isActive ? 'active' : '') + (disabled ? ' disabled' : '') + (className ? ` ${className}` : '');\n\n  return (\n    <AccordionItemContainer id={id} displaySeparator={!isActive && !isLast}>\n      <ItemHeaderContainer\n        role=\"button\"\n        aria-expanded={isActive}\n        id={`itemHeaderFor_${id}`}\n        aria-controls={`itemContentFor_${id}`}\n        tabIndex={!disabled ? 0 : undefined}\n        onClick={() => {\n          if (!disabled) {\n            onSelect(id);\n          }\n        }}\n        onKeyDown={(e: any) => {\n          if (e.key === 'Enter') onSelect(id);\n        }}\n        onMouseDown={defaultOnMouseDownHandler}\n        className={cls}\n        {...rest}>\n        {icon && React.cloneElement(icon as React.ReactElement, { size: '24px' })}\n        <span>{title}</span>\n        <div aria-hidden=\"true\">\n          {isActive ? <SystemIcons.ChevronUp color={COLORS.neutral_800} size=\"20px\" /> : <SystemIcons.ChevronDown color={COLORS.neutral_600} size=\"20px\" />}\n        </div>\n      </ItemHeaderContainer>\n      {isActive && (\n        <ItemBodyContainer id={`itemContentFor_${id}`} padding={padding}>\n          <ComponentS>{children}</ComponentS>\n        </ItemBodyContainer>\n      )}\n    </AccordionItemContainer>\n  );\n};\n\nexport default AccordionItem;\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,MAAM,EAAEC,UAAU,QAAQ,IAAI;AACvC,SAASC,WAAW,QAAQ,UAAU;AAEtC,SAASC,sBAAsB,EAAEC,iBAAiB,EAAEC,mBAAmB,QAAQ,UAAU;AACzF,SAASC,yBAAyB,QAAQ,WAAW;AAAC;AAAA;AAStD,IAAMC,aAA+D,GAAG,SAAlEA,aAA+D,CAAIC,KAA8B,EAAK;EAC1G,IAAQC,EAAE,GAA+FD,KAAK,CAAtGC,EAAE;IAAEC,QAAQ,GAAqFF,KAAK,CAAlGE,QAAQ;IAAEC,QAAQ,GAA2EH,KAAK,CAAxFG,QAAQ;IAAEC,KAAK,GAAoEJ,KAAK,CAA9EI,KAAK;IAAEC,IAAI,GAA8DL,KAAK,CAAvEK,IAAI;IAAEC,QAAQ,GAAoDN,KAAK,CAAjEM,QAAQ;IAAEC,MAAM,GAA4CP,KAAK,CAAvDO,MAAM;IAAEC,OAAO,GAAmCR,KAAK,CAA/CQ,OAAO;IAAEC,QAAQ,GAAyBT,KAAK,CAAtCS,QAAQ;IAAEC,SAAS,GAAcV,KAAK,CAA5BU,SAAS;IAAKC,IAAI,4BAAKX,KAAK;EAE9G,IAAMY,GAAG,GAAG,CAACT,QAAQ,GAAG,QAAQ,GAAG,EAAE,KAAKG,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAC,IAAII,SAAS,cAAOA,SAAS,IAAK,EAAE,CAAC;EAE3G,oBACE,MAAC,sBAAsB;IAAC,EAAE,EAAET,EAAG;IAAC,gBAAgB,EAAE,CAACE,QAAQ,IAAI,CAACI,MAAO;IAAA,wBACrE,MAAC,mBAAmB;MAClB,IAAI,EAAC,QAAQ;MACb,iBAAeJ,QAAS;MACxB,EAAE,0BAAmBF,EAAE,CAAG;MAC1B,0CAAiCA,EAAE,CAAG;MACtC,QAAQ,EAAE,CAACK,QAAQ,GAAG,CAAC,GAAGO,SAAU;MACpC,OAAO,EAAE,mBAAM;QACb,IAAI,CAACP,QAAQ,EAAE;UACbJ,QAAQ,CAACD,EAAE,CAAC;QACd;MACF,CAAE;MACF,SAAS,EAAE,mBAACa,CAAM,EAAK;QACrB,IAAIA,CAAC,CAACC,GAAG,KAAK,OAAO,EAAEb,QAAQ,CAACD,EAAE,CAAC;MACrC,CAAE;MACF,WAAW,EAAEH,yBAA0B;MACvC,SAAS,EAAEc;IAAI,GACXD,IAAI;MAAA,WACPN,IAAI,iBAAId,KAAK,CAACyB,YAAY,CAACX,IAAI,EAAwB;QAAEY,IAAI,EAAE;MAAO,CAAC,CAAC,eACzE;QAAA,UAAOb;MAAK,EAAQ,eACpB;QAAK,eAAY,MAAM;QAAA,UACpBD,QAAQ,gBAAG,KAAC,WAAW,CAAC,SAAS;UAAC,KAAK,EAAEX,MAAM,CAAC0B,WAAY;UAAC,IAAI,EAAC;QAAM,EAAG,gBAAG,KAAC,WAAW,CAAC,WAAW;UAAC,KAAK,EAAE1B,MAAM,CAAC2B,WAAY;UAAC,IAAI,EAAC;QAAM;MAAG,EAC7I;IAAA,GACc,EACrBhB,QAAQ,iBACP,KAAC,iBAAiB;MAAC,EAAE,2BAAoBF,EAAE,CAAG;MAAC,OAAO,EAAEO,OAAQ;MAAA,uBAC9D,KAAC,UAAU;QAAA,UAAEC;MAAQ;IAAc,EAEtC;EAAA,EACsB;AAE7B,CAAC;AAAC;EA3CAP,QAAQ;EACRC,QAAQ;EACRI,MAAM;EACNC,OAAO;AAAA;AA0CT,eAAeT,aAAa"}
+{"version":3,"file":"AccordionItem.js","names":["React","Size","SystemIcons","AccordionItemContainer","ItemBodyContainer","ItemHeaderContainer","defaultOnMouseDownHandler","AccordionItem","props","id","onSelect","isActive","title","icon","disabled","isLast","padding","children","className","size","Medium","rest","cls","undefined","e","key"],"sources":["../../src/Accordion/AccordionItem.tsx"],"sourcesContent":["import React from 'react';\nimport {COLORS, ComponentS, Size} from '..';\nimport {SystemIcons} from '../icons';\nimport {AccordionItemProps} from './AccordionMenu';\nimport {AccordionItemContainer, ItemBodyContainer, ItemHeaderContainer} from './styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\ninterface AccordionItemPropsInner extends AccordionItemProps {\n  onSelect: (id: string) => void;\n  isActive: boolean;\n  isLast: boolean;\n  padding?: string;\n  size?: Size.Small | Size.Medium | Size.Large;\n}\n\nconst AccordionItem: React.FunctionComponent<AccordionItemPropsInner> = (props: AccordionItemPropsInner) => {\n  const {\n    id,\n    onSelect,\n    isActive,\n    title,\n    icon,\n    disabled,\n    isLast,\n    padding,\n    children,\n    className,\n    size = Size.Medium,\n    ...rest\n  } = props;\n\n  const cls = (isActive ? 'active' : '') + (disabled ? ' disabled' : '') + (className ? ` ${className}` : '') + ` ${size}`;\n\n  return (\n    <AccordionItemContainer id={id}>\n      <ItemHeaderContainer\n        role=\"button\"\n        aria-expanded={isActive}\n        id={`itemHeaderFor_${id}`}\n        aria-controls={`itemContentFor_${id}`}\n        tabIndex={!disabled ? 0 : undefined}\n        onClick={() => {\n          if (!disabled) {\n            onSelect(id);\n          }\n        }}\n        onKeyDown={(e: any) => {\n          if (e.key === 'Enter') onSelect(id);\n        }}\n        onMouseDown={defaultOnMouseDownHandler}\n        className={cls}\n        {...rest}>\n        {icon}\n        <span>{title}</span>\n        <div aria-hidden=\"true\">\n          {\n            isActive && <SystemIcons.ChevronUp/>\n          }\n          {\n            !isActive && <SystemIcons.ChevronDown/>\n          }\n        </div>\n      </ItemHeaderContainer>\n      {isActive && (\n        <ItemBodyContainer id={`itemContentFor_${id}`} padding={padding}>\n          {children}\n        </ItemBodyContainer>\n      )\n      }\n    </AccordionItemContainer>\n  );\n};\n\nexport default AccordionItem;\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAA4BC,IAAI,QAAO,IAAI;AAC3C,SAAQC,WAAW,QAAO,UAAU;AAEpC,SAAQC,sBAAsB,EAAEC,iBAAiB,EAAEC,mBAAmB,QAAO,UAAU;AACvF,SAAQC,yBAAyB,QAAO,WAAW;AAAC;AAAA;AAUpD,IAAMC,aAA+D,GAAG,SAAlEA,aAA+D,CAAIC,KAA8B,EAAK;EAC1G,IACEC,EAAE,GAYAD,KAAK,CAZPC,EAAE;IACFC,QAAQ,GAWNF,KAAK,CAXPE,QAAQ;IACRC,QAAQ,GAUNH,KAAK,CAVPG,QAAQ;IACRC,KAAK,GASHJ,KAAK,CATPI,KAAK;IACLC,IAAI,GAQFL,KAAK,CARPK,IAAI;IACJC,QAAQ,GAONN,KAAK,CAPPM,QAAQ;IACRC,MAAM,GAMJP,KAAK,CANPO,MAAM;IACNC,OAAO,GAKLR,KAAK,CALPQ,OAAO;IACPC,QAAQ,GAINT,KAAK,CAJPS,QAAQ;IACRC,SAAS,GAGPV,KAAK,CAHPU,SAAS;IAAA,cAGPV,KAAK,CAFPW,IAAI;IAAJA,IAAI,4BAAGlB,IAAI,CAACmB,MAAM;IACfC,IAAI,4BACLb,KAAK;EAET,IAAMc,GAAG,GAAG,CAACX,QAAQ,GAAG,QAAQ,GAAG,EAAE,KAAKG,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAC,IAAII,SAAS,cAAOA,SAAS,IAAK,EAAE,CAAC,cAAOC,IAAI,CAAE;EAExH,oBACE,MAAC,sBAAsB;IAAC,EAAE,EAAEV,EAAG;IAAA,wBAC7B,MAAC,mBAAmB;MAClB,IAAI,EAAC,QAAQ;MACb,iBAAeE,QAAS;MACxB,EAAE,0BAAmBF,EAAE,CAAG;MAC1B,0CAAiCA,EAAE,CAAG;MACtC,QAAQ,EAAE,CAACK,QAAQ,GAAG,CAAC,GAAGS,SAAU;MACpC,OAAO,EAAE,mBAAM;QACb,IAAI,CAACT,QAAQ,EAAE;UACbJ,QAAQ,CAACD,EAAE,CAAC;QACd;MACF,CAAE;MACF,SAAS,EAAE,mBAACe,CAAM,EAAK;QACrB,IAAIA,CAAC,CAACC,GAAG,KAAK,OAAO,EAAEf,QAAQ,CAACD,EAAE,CAAC;MACrC,CAAE;MACF,WAAW,EAAEH,yBAA0B;MACvC,SAAS,EAAEgB;IAAI,GACXD,IAAI;MAAA,WACPR,IAAI,eACL;QAAA,UAAOD;MAAK,EAAQ,eACpB;QAAK,eAAY,MAAM;QAAA,WAEnBD,QAAQ,iBAAI,KAAC,WAAW,CAAC,SAAS,KAAE,EAGpC,CAACA,QAAQ,iBAAI,KAAC,WAAW,CAAC,WAAW,KAAE;MAAA,EAErC;IAAA,GACc,EACrBA,QAAQ,iBACP,KAAC,iBAAiB;MAAC,EAAE,2BAAoBF,EAAE,CAAG;MAAC,OAAO,EAAEO,OAAQ;MAAA,UAC7DC;IAAQ,EAEZ;EAAA,EAEsB;AAE7B,CAAC;AAAC;EA/DAP,QAAQ;EACRC,QAAQ;EACRI,MAAM;EACNC,OAAO;AAAA;AA8DT,eAAeT,aAAa"}

package/dist/Accordion/AccordionMenu.cjs

@@ -14,8 +14,9 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
 var _AccordionItem = _interopRequireDefault(require("./AccordionItem"));
 var _styles = require("./styles");
+var _types = require("../types");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["items", "selectedItems", "setSelectedItems", "onSelect", "multipleActive", "padding"],
+var _excluded = ["items", "selectedItems", "setSelectedItems", "onSelect", "multipleActive", "padding", "size"],
   _excluded2 = ["id", "disabled", "title", "icon", "children"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -28,6 +29,8 @@ var AccordionMenu = function AccordionMenu(props) {
     onSelect = props.onSelect,
     multipleActive = props.multipleActive,
     padding = props.padding,
+    _props$size = props.size,
+    size = _props$size === void 0 ? _types.Size.Medium : _props$size,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
   var _React$useState = React.useState([]),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
@@ -73,7 +76,8 @@ var AccordionMenu = function AccordionMenu(props) {
         }),
         isLast: index === items.length - 1,
         onSelect: onSelected,
-        padding: padding
+        padding: padding,
+        size: size
       }, rest), {}, {
         children: children
       }), id);

package/dist/Accordion/AccordionMenu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionMenu.cjs","names":["AccordionMenu","props","items","selectedItems","setSelectedItems","onSelect","multipleActive","padding","rest","React","useState","builtinSelectedItems","builtinSetSelectedItems","getCollection","getUpdateFunction","onSelected","id","collection","updateFunc","isActive","find","x","filter","map","index","disabled","title","icon","children","length"],"sources":["../../src/Accordion/AccordionMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport AccordionItem from './AccordionItem';\nimport { AccordionMenuWrapper } from './styles';\n\nexport interface AccordionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'>{\n  items: AccordionItemProps[];\n  selectedItems?: string[];\n  setSelectedItems?: (a: string[]) => void;\n  onSelect?: (id: string) => void;\n  multipleActive?: boolean;\n  padding?: string;\n}\n\nexport interface AccordionItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'aria-expanded' | 'onSelect' | 'tabIndex' | 'onKeyDown' | 'onClick' | 'onMouseDown'> {\n  id: string;\n  disabled?: boolean;\n  title: string;\n  icon?: React.ReactNode;\n  children: React.ReactNode;\n}\n\nconst AccordionMenu: React.FunctionComponent<AccordionProps> = (props: AccordionProps) => {\n  const { items, selectedItems, setSelectedItems, onSelect, multipleActive, padding, ...rest } = props;\n  const [builtinSelectedItems, builtinSetSelectedItems] = React.useState<string[]>([]);\n\n  const getCollection = () => {\n    return selectedItems ? selectedItems : builtinSelectedItems;\n  };\n\n  const getUpdateFunction = () => {\n    return setSelectedItems ? setSelectedItems : builtinSetSelectedItems;\n  };\n\n  const onSelected = (id: string) => {\n    const collection = getCollection();\n    const updateFunc = getUpdateFunction();\n\n    const isActive = !!collection.find((x) => x == id);\n    if (multipleActive) {\n      if (isActive) updateFunc(collection.filter((x) => x != id));\n      else updateFunc([...collection, id]);\n    } else updateFunc(isActive ? [] : [id]);\n\n    onSelect && onSelect(id);\n  };\n\n  return (\n    <AccordionMenuWrapper {...rest}>\n      {items.map(({id, disabled, title, icon, children, ...rest}, index) => (\n        <AccordionItem\n          key={id}\n          id={id}\n          disabled={disabled}\n          title={title}\n          aria-expanded={!!getCollection().find((x) => x == id)}\n          icon={icon}\n          isActive={!!getCollection().find((x) => x == id)}\n          isLast={index === items.length - 1}\n          onSelect={onSelected}\n          padding={padding}\n          {...rest}>\n          {children}\n        </AccordionItem>\n      ))}\n    </AccordionMenuWrapper>\n  );\n};\n\nexport default AccordionMenu;\n"],"mappings":";;;;;;;;;;;;;AAAA;AACA;AACA;AAAgD;AAAA;EAAA;AAAA;AAAA;AAAA;AAAA;AAmBhD,IAAMA,aAAsD,GAAG,SAAzDA,aAAsD,CAAIC,KAAqB,EAAK;EACxF,IAAQC,KAAK,GAAkFD,KAAK,CAA5FC,KAAK;IAAEC,aAAa,GAAmEF,KAAK,CAArFE,aAAa;IAAEC,gBAAgB,GAAiDH,KAAK,CAAtEG,gBAAgB;IAAEC,QAAQ,GAAuCJ,KAAK,CAApDI,QAAQ;IAAEC,cAAc,GAAuBL,KAAK,CAA1CK,cAAc;IAAEC,OAAO,GAAcN,KAAK,CAA1BM,OAAO;IAAKC,IAAI,0CAAKP,KAAK;EACpG,sBAAwDQ,KAAK,CAACC,QAAQ,CAAW,EAAE,CAAC;IAAA;IAA7EC,oBAAoB;IAAEC,uBAAuB;EAEpD,IAAMC,aAAa,GAAG,SAAhBA,aAAa,GAAS;IAC1B,OAAOV,aAAa,GAAGA,aAAa,GAAGQ,oBAAoB;EAC7D,CAAC;EAED,IAAMG,iBAAiB,GAAG,SAApBA,iBAAiB,GAAS;IAC9B,OAAOV,gBAAgB,GAAGA,gBAAgB,GAAGQ,uBAAuB;EACtE,CAAC;EAED,IAAMG,UAAU,GAAG,SAAbA,UAAU,CAAIC,EAAU,EAAK;IACjC,IAAMC,UAAU,GAAGJ,aAAa,EAAE;IAClC,IAAMK,UAAU,GAAGJ,iBAAiB,EAAE;IAEtC,IAAMK,QAAQ,GAAG,CAAC,CAACF,UAAU,CAACG,IAAI,CAAC,UAACC,CAAC;MAAA,OAAKA,CAAC,IAAIL,EAAE;IAAA,EAAC;IAClD,IAAIV,cAAc,EAAE;MAClB,IAAIa,QAAQ,EAAED,UAAU,CAACD,UAAU,CAACK,MAAM,CAAC,UAACD,CAAC;QAAA,OAAKA,CAAC,IAAIL,EAAE;MAAA,EAAC,CAAC,CAAC,KACvDE,UAAU,4CAAKD,UAAU,IAAED,EAAE,GAAE;IACtC,CAAC,MAAME,UAAU,CAACC,QAAQ,GAAG,EAAE,GAAG,CAACH,EAAE,CAAC,CAAC;IAEvCX,QAAQ,IAAIA,QAAQ,CAACW,EAAE,CAAC;EAC1B,CAAC;EAED,oBACE,qBAAC,4BAAoB,kCAAKR,IAAI;IAAA,UAC3BN,KAAK,CAACqB,GAAG,CAAC,gBAAiDC,KAAK;MAAA,IAApDR,EAAE,QAAFA,EAAE;QAAES,QAAQ,QAARA,QAAQ;QAAEC,KAAK,QAALA,KAAK;QAAEC,IAAI,QAAJA,IAAI;QAAEC,QAAQ,QAARA,QAAQ;QAAKpB,IAAI;MAAA,oBACvD,qBAAC,sBAAa;QAEZ,EAAE,EAAEQ,EAAG;QACP,QAAQ,EAAES,QAAS;QACnB,KAAK,EAAEC,KAAM;QACb,iBAAe,CAAC,CAACb,aAAa,EAAE,CAACO,IAAI,CAAC,UAACC,CAAC;UAAA,OAAKA,CAAC,IAAIL,EAAE;QAAA,EAAE;QACtD,IAAI,EAAEW,IAAK;QACX,QAAQ,EAAE,CAAC,CAACd,aAAa,EAAE,CAACO,IAAI,CAAC,UAACC,CAAC;UAAA,OAAKA,CAAC,IAAIL,EAAE;QAAA,EAAE;QACjD,MAAM,EAAEQ,KAAK,KAAKtB,KAAK,CAAC2B,MAAM,GAAG,CAAE;QACnC,QAAQ,EAAEd,UAAW;QACrB,OAAO,EAAER;MAAQ,GACbC,IAAI;QAAA,UACPoB;MAAQ,IAXJZ,EAAE,CAYO;IAAA,CACjB;EAAC,GACmB;AAE3B,CAAC;AAAC;EA7DAd,KAAK;IASLc,EAAE;IACFS,QAAQ;IACRC,KAAK;IACLC,IAAI;IACJC,QAAQ;EAAA;EAZRzB,aAAa;EACbC,gBAAgB;EAChBC,QAAQ;EACRC,cAAc;EACdC,OAAO;AAAA;AAAA,eA0DMP,aAAa;AAAA"}
+{"version":3,"file":"AccordionMenu.cjs","names":["AccordionMenu","props","items","selectedItems","setSelectedItems","onSelect","multipleActive","padding","size","Size","Medium","rest","React","useState","builtinSelectedItems","builtinSetSelectedItems","getCollection","getUpdateFunction","onSelected","id","collection","updateFunc","isActive","find","x","filter","map","index","disabled","title","icon","children","length"],"sources":["../../src/Accordion/AccordionMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport AccordionItem from './AccordionItem';\nimport { AccordionMenuWrapper } from './styles';\nimport {Size} from \"../types\";\n\nexport interface AccordionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'>{\n  items: AccordionItemProps[];\n  selectedItems?: string[];\n  setSelectedItems?: (a: string[]) => void;\n  onSelect?: (id: string) => void;\n  multipleActive?: boolean;\n  padding?: string;\n  size?: Size.Small | Size.Medium | Size.Large;\n}\n\nexport interface AccordionItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'aria-expanded' | 'onSelect' | 'tabIndex' | 'onKeyDown' | 'onClick' | 'onMouseDown'> {\n  id: string;\n  disabled?: boolean;\n  title: string;\n  icon?: React.ReactNode;\n\n  size?: Size.Small | Size.Medium | Size.Large;\n  children: React.ReactNode;\n}\n\nconst AccordionMenu: React.FunctionComponent<AccordionProps> = (props: AccordionProps) => {\n  const { items, selectedItems, setSelectedItems, onSelect, multipleActive, padding, size = Size.Medium, ...rest } = props;\n  const [builtinSelectedItems, builtinSetSelectedItems] = React.useState<string[]>([]);\n\n  const getCollection = () => {\n    return selectedItems ? selectedItems : builtinSelectedItems;\n  };\n\n  const getUpdateFunction = () => {\n    return setSelectedItems ? setSelectedItems : builtinSetSelectedItems;\n  };\n\n  const onSelected = (id: string) => {\n    const collection = getCollection();\n    const updateFunc = getUpdateFunction();\n\n    const isActive = !!collection.find((x) => x == id);\n    if (multipleActive) {\n      if (isActive) updateFunc(collection.filter((x) => x != id));\n      else updateFunc([...collection, id]);\n    } else updateFunc(isActive ? [] : [id]);\n\n    onSelect && onSelect(id);\n  };\n\n  return (\n    <AccordionMenuWrapper {...rest}>\n      {items.map(({id, disabled, title, icon, children, ...rest}, index) => (\n        <AccordionItem\n          key={id}\n          id={id}\n          disabled={disabled}\n          title={title}\n          aria-expanded={!!getCollection().find((x) => x == id)}\n          icon={icon}\n          isActive={!!getCollection().find((x) => x == id)}\n          isLast={index === items.length - 1}\n          onSelect={onSelected}\n          padding={padding}\n          size={size}\n          {...rest}>\n          {children}\n        </AccordionItem>\n      ))}\n    </AccordionMenuWrapper>\n  );\n};\n\nexport default AccordionMenu;\n"],"mappings":"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"}

package/dist/Accordion/AccordionMenu.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Size } from "../types";
 export interface AccordionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
     items: AccordionItemProps[];
     selectedItems?: string[];
@@ -6,12 +7,14 @@ export interface AccordionProps extends Omit<React.HTMLAttributes<HTMLDivElement
     onSelect?: (id: string) => void;
     multipleActive?: boolean;
     padding?: string;
+    size?: Size.Small | Size.Medium | Size.Large;
 }
 export interface AccordionItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'aria-expanded' | 'onSelect' | 'tabIndex' | 'onKeyDown' | 'onClick' | 'onMouseDown'> {
     id: string;
     disabled?: boolean;
     title: string;
     icon?: React.ReactNode;
+    size?: Size.Small | Size.Medium | Size.Large;
     children: React.ReactNode;
 }
 declare const AccordionMenu: React.FunctionComponent<AccordionProps>;

package/dist/Accordion/AccordionMenu.js

@@ -3,13 +3,14 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _pt from "prop-types";
-var _excluded = ["items", "selectedItems", "setSelectedItems", "onSelect", "multipleActive", "padding"],
+var _excluded = ["items", "selectedItems", "setSelectedItems", "onSelect", "multipleActive", "padding", "size"],
   _excluded2 = ["id", "disabled", "title", "icon", "children"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import * as React from 'react';
 import AccordionItem from './AccordionItem';
 import { AccordionMenuWrapper } from './styles';
+import { Size } from "../types";
 import { jsx as _jsx } from "react/jsx-runtime";
 var AccordionMenu = function AccordionMenu(props) {
   var items = props.items,
@@ -18,6 +19,8 @@ var AccordionMenu = function AccordionMenu(props) {
     onSelect = props.onSelect,
     multipleActive = props.multipleActive,
     padding = props.padding,
+    _props$size = props.size,
+    size = _props$size === void 0 ? Size.Medium : _props$size,
     rest = _objectWithoutProperties(props, _excluded);
   var _React$useState = React.useState([]),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -63,7 +66,8 @@ var AccordionMenu = function AccordionMenu(props) {
         }),
         isLast: index === items.length - 1,
         onSelect: onSelected,
-        padding: padding
+        padding: padding,
+        size: size
       }, rest), {}, {
         children: children
       }), id);

package/dist/Accordion/AccordionMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionMenu.js","names":["React","AccordionItem","AccordionMenuWrapper","AccordionMenu","props","items","selectedItems","setSelectedItems","onSelect","multipleActive","padding","rest","useState","builtinSelectedItems","builtinSetSelectedItems","getCollection","getUpdateFunction","onSelected","id","collection","updateFunc","isActive","find","x","filter","map","index","disabled","title","icon","children","length"],"sources":["../../src/Accordion/AccordionMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport AccordionItem from './AccordionItem';\nimport { AccordionMenuWrapper } from './styles';\n\nexport interface AccordionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'>{\n  items: AccordionItemProps[];\n  selectedItems?: string[];\n  setSelectedItems?: (a: string[]) => void;\n  onSelect?: (id: string) => void;\n  multipleActive?: boolean;\n  padding?: string;\n}\n\nexport interface AccordionItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'aria-expanded' | 'onSelect' | 'tabIndex' | 'onKeyDown' | 'onClick' | 'onMouseDown'> {\n  id: string;\n  disabled?: boolean;\n  title: string;\n  icon?: React.ReactNode;\n  children: React.ReactNode;\n}\n\nconst AccordionMenu: React.FunctionComponent<AccordionProps> = (props: AccordionProps) => {\n  const { items, selectedItems, setSelectedItems, onSelect, multipleActive, padding, ...rest } = props;\n  const [builtinSelectedItems, builtinSetSelectedItems] = React.useState<string[]>([]);\n\n  const getCollection = () => {\n    return selectedItems ? selectedItems : builtinSelectedItems;\n  };\n\n  const getUpdateFunction = () => {\n    return setSelectedItems ? setSelectedItems : builtinSetSelectedItems;\n  };\n\n  const onSelected = (id: string) => {\n    const collection = getCollection();\n    const updateFunc = getUpdateFunction();\n\n    const isActive = !!collection.find((x) => x == id);\n    if (multipleActive) {\n      if (isActive) updateFunc(collection.filter((x) => x != id));\n      else updateFunc([...collection, id]);\n    } else updateFunc(isActive ? [] : [id]);\n\n    onSelect && onSelect(id);\n  };\n\n  return (\n    <AccordionMenuWrapper {...rest}>\n      {items.map(({id, disabled, title, icon, children, ...rest}, index) => (\n        <AccordionItem\n          key={id}\n          id={id}\n          disabled={disabled}\n          title={title}\n          aria-expanded={!!getCollection().find((x) => x == id)}\n          icon={icon}\n          isActive={!!getCollection().find((x) => x == id)}\n          isLast={index === items.length - 1}\n          onSelect={onSelected}\n          padding={padding}\n          {...rest}>\n          {children}\n        </AccordionItem>\n      ))}\n    </AccordionMenuWrapper>\n  );\n};\n\nexport default AccordionMenu;\n"],"mappings":"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"}
+{"version":3,"file":"AccordionMenu.js","names":["React","AccordionItem","AccordionMenuWrapper","Size","AccordionMenu","props","items","selectedItems","setSelectedItems","onSelect","multipleActive","padding","size","Medium","rest","useState","builtinSelectedItems","builtinSetSelectedItems","getCollection","getUpdateFunction","onSelected","id","collection","updateFunc","isActive","find","x","filter","map","index","disabled","title","icon","children","length"],"sources":["../../src/Accordion/AccordionMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport AccordionItem from './AccordionItem';\nimport { AccordionMenuWrapper } from './styles';\nimport {Size} from \"../types\";\n\nexport interface AccordionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'>{\n  items: AccordionItemProps[];\n  selectedItems?: string[];\n  setSelectedItems?: (a: string[]) => void;\n  onSelect?: (id: string) => void;\n  multipleActive?: boolean;\n  padding?: string;\n  size?: Size.Small | Size.Medium | Size.Large;\n}\n\nexport interface AccordionItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'aria-expanded' | 'onSelect' | 'tabIndex' | 'onKeyDown' | 'onClick' | 'onMouseDown'> {\n  id: string;\n  disabled?: boolean;\n  title: string;\n  icon?: React.ReactNode;\n\n  size?: Size.Small | Size.Medium | Size.Large;\n  children: React.ReactNode;\n}\n\nconst AccordionMenu: React.FunctionComponent<AccordionProps> = (props: AccordionProps) => {\n  const { items, selectedItems, setSelectedItems, onSelect, multipleActive, padding, size = Size.Medium, ...rest } = props;\n  const [builtinSelectedItems, builtinSetSelectedItems] = React.useState<string[]>([]);\n\n  const getCollection = () => {\n    return selectedItems ? selectedItems : builtinSelectedItems;\n  };\n\n  const getUpdateFunction = () => {\n    return setSelectedItems ? setSelectedItems : builtinSetSelectedItems;\n  };\n\n  const onSelected = (id: string) => {\n    const collection = getCollection();\n    const updateFunc = getUpdateFunction();\n\n    const isActive = !!collection.find((x) => x == id);\n    if (multipleActive) {\n      if (isActive) updateFunc(collection.filter((x) => x != id));\n      else updateFunc([...collection, id]);\n    } else updateFunc(isActive ? [] : [id]);\n\n    onSelect && onSelect(id);\n  };\n\n  return (\n    <AccordionMenuWrapper {...rest}>\n      {items.map(({id, disabled, title, icon, children, ...rest}, index) => (\n        <AccordionItem\n          key={id}\n          id={id}\n          disabled={disabled}\n          title={title}\n          aria-expanded={!!getCollection().find((x) => x == id)}\n          icon={icon}\n          isActive={!!getCollection().find((x) => x == id)}\n          isLast={index === items.length - 1}\n          onSelect={onSelected}\n          padding={padding}\n          size={size}\n          {...rest}>\n          {children}\n        </AccordionItem>\n      ))}\n    </AccordionMenuWrapper>\n  );\n};\n\nexport default AccordionMenu;\n"],"mappings":"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"}

package/dist/Accordion/styles.cjs

@@ -4,24 +4,20 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ItemHeaderContainer = exports.ItemBodyContainer = exports.HeaderIconContainer = exports.AccordionMenuWrapper = exports.AccordionItemContainer = void 0;
+exports.ItemHeaderContainer = exports.ItemBodyContainer = exports.AccordionMenuWrapper = exports.AccordionItemContainer = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _styles = require("../styles");
 var _zIndexes = require("../styles/z-indexes");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 var AccordionMenuWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  min-width: 320px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n"])));
 exports.AccordionMenuWrapper = AccordionMenuWrapper;
-var AccordionItemContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  border-bottom: ", ";\n"])), function (props) {
-  return props.displaySeparator ? "1px solid ".concat(_styles.COLORS.neutral_100) : '';
-});
-exports.AccordionItemContainer = AccordionItemContainer;
-var ItemHeaderContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 16px 11px 16px;\n  cursor: pointer;\n\n  ", "\n\n  div:last-child {\n    margin-left: auto;\n  }\n  outline: none;\n\n  :focus:not(:active) {\n    ", "\n  }\n\n  :hover {\n    background: ", ";\n    color: ", ";\n    z-index: ", ";\n  }\n\n  :active {\n    color: ", ";\n    background: ", ";\n    z-index: ", ";\n  }\n\n  &.active {\n    color: ", ";\n  }\n\n  &.disabled {\n    background: ", "!important;\n    color: ", ";\n    cursor: not-allowed;\n    pointer-events: none;\n    svg {\n      color: ", "!important;\n    }\n  }\n"])), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), _styles.focusStyles, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_800, _styles.COLORS.primary_100, _zIndexes.Z_INDEXES.active, _styles.COLORS.neutral_800, _styles.COLORS.white, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300);
+var ItemHeaderContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  outline: none;\n  box-sizing: border-box;\n\n  ", "\n\n  div:last-child {\n    margin-left: auto;\n  }\n\n  padding: 0 16px;\n  min-height: 48px;\n  \n  svg {\n    width: 20px;\n    height: 20px;\n  }\n  \n  &.medium {\n    ", "\n    padding: 0 24px;\n    min-height: 56px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  &.large {\n    ", "\n    padding: 0 32px;\n    min-height: 64px;\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  :focus:not(:active) {\n    ", "\n  }\n\n  :hover {\n    background: ", ";\n    color: ", ";\n    z-index: ", ";\n  }\n\n  :active {\n    color: ", ";\n    background: ", ";\n    z-index: ", ";\n  }\n\n  &.active {\n    color: ", ";\n  }\n\n  &.disabled {\n    background: ", "!important;\n    color: ", ";\n    cursor: not-allowed;\n    pointer-events: none;\n    svg {\n      color: ", "!important;\n    }\n  }\n"])), (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), _styles.focusStyles, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_800, _styles.COLORS.primary_100, _zIndexes.Z_INDEXES.active, _styles.COLORS.neutral_800, _styles.COLORS.white, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300);
 exports.ItemHeaderContainer = ItemHeaderContainer;
-var HeaderIconContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: auto;\n"])));
-exports.HeaderIconContainer = HeaderIconContainer;
-var ItemBodyContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", ";\n  background: ", ";\n"])), function (props) {
+var AccordionItemContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  \n  &:not(:last-child) ", ":not(.active) {\n    border-bottom: 1px solid ", ";\n  }\n"])), ItemHeaderContainer, _styles.COLORS.neutral_100);
+exports.AccordionItemContainer = AccordionItemContainer;
+var ItemBodyContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", ";\n  background: ", ";\n  \n  ", "\n  \n  .medium & {\n    ", "\n  }\n  \n  .large & {\n    ", "\n  }\n\n"])), function (props) {
   return props.padding || '12px 16px';
-}, _styles.COLORS.white);
+}, _styles.COLORS.white, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null));
 exports.ItemBodyContainer = ItemBodyContainer;
 //# sourceMappingURL=styles.cjs.map

package/dist/Accordion/styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styles.cjs","names":["AccordionMenuWrapper","styled","div","AccordionItemContainer","props","displaySeparator","COLORS","neutral_100","ItemHeaderContainer","ComponentMStyling","ComponentTextStyle","Regular","neutral_600","focusStyles","primary_20","primary_700","Z_INDEXES","hover","primary_800","primary_100","active","neutral_800","white","neutral_300","HeaderIconContainer","ItemBodyContainer","padding"],"sources":["../../src/Accordion/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS, ComponentMStyling, ComponentTextStyle, focusStyles } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nexport const AccordionMenuWrapper = styled.div`\n  min-width: 320px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n`;\n\nexport const AccordionItemContainer = styled.div<{ displaySeparator: boolean }>`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  border-bottom: ${(props) => (props.displaySeparator ? `1px solid ${COLORS.neutral_100}` : '')};\n`;\n\nexport const ItemHeaderContainer = styled.div`\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 16px 11px 16px;\n  cursor: pointer;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  div:last-child {\n    margin-left: auto;\n  }\n  outline: none;\n\n  :focus:not(:active) {\n    ${focusStyles}\n  }\n\n  :hover {\n    background: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  :active {\n    color: ${COLORS.primary_800};\n    background: ${COLORS.primary_100};\n    z-index: ${Z_INDEXES.active};\n  }\n\n  &.active {\n    color: ${COLORS.neutral_800};\n  }\n\n  &.disabled {\n    background: ${COLORS.white}!important;\n    color: ${COLORS.neutral_300};\n    cursor: not-allowed;\n    pointer-events: none;\n    svg {\n      color: ${COLORS.neutral_300}!important;\n    }\n  }\n`;\n\nexport const HeaderIconContainer = styled.div`\n  margin-left: auto;\n`;\n\nexport const ItemBodyContainer = styled.div<{ padding?: string }>`\n  padding: ${(props) => props.padding || '12px 16px'};\n  background: ${COLORS.white};\n`;\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AAAgD;AAEzC,IAAMA,oBAAoB,GAAGC,yBAAM,CAACC,GAAG,kLAK7C;AAAC;AAEK,IAAMC,sBAAsB,GAAGF,yBAAM,CAACC,GAAG,wMAK7B,UAACE,KAAK;EAAA,OAAMA,KAAK,CAACC,gBAAgB,uBAAgBC,cAAM,CAACC,WAAW,IAAK,EAAE;AAAA,CAAC,CAC9F;AAAC;AAEK,IAAMC,mBAAmB,GAAGP,yBAAM,CAACC,GAAG,2sBAQzC,IAAAO,yBAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAEL,cAAM,CAACM,WAAW,CAAC,EAQ/DC,mBAAW,EAICP,cAAM,CAACQ,UAAU,EACtBR,cAAM,CAACS,WAAW,EAChBC,mBAAS,CAACC,KAAK,EAIjBX,cAAM,CAACY,WAAW,EACbZ,cAAM,CAACa,WAAW,EACrBH,mBAAS,CAACI,MAAM,EAIlBd,cAAM,CAACe,WAAW,EAIbf,cAAM,CAACgB,KAAK,EACjBhB,cAAM,CAACiB,WAAW,EAIhBjB,cAAM,CAACiB,WAAW,CAGhC;AAAC;AAEK,IAAMC,mBAAmB,GAAGvB,yBAAM,CAACC,GAAG,6GAE5C;AAAC;AAEK,IAAMuB,iBAAiB,GAAGxB,yBAAM,CAACC,GAAG,+HAC9B,UAACE,KAAK;EAAA,OAAKA,KAAK,CAACsB,OAAO,IAAI,WAAW;AAAA,GACpCpB,cAAM,CAACgB,KAAK,CAC3B;AAAC"}
+{"version":3,"file":"styles.cjs","names":["AccordionMenuWrapper","styled","div","ItemHeaderContainer","ComponentSStyling","ComponentTextStyle","Regular","COLORS","neutral_600","ComponentMStyling","ComponentLStyling","focusStyles","primary_20","primary_700","Z_INDEXES","hover","primary_800","primary_100","active","neutral_800","white","neutral_300","AccordionItemContainer","neutral_100","ItemBodyContainer","props","padding"],"sources":["../../src/Accordion/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport {\n  COLORS,\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  focusStyles\n} from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nexport const AccordionMenuWrapper = styled.div`\n  min-width: 320px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n`;\n\n\n\nexport const ItemHeaderContainer = styled.div`\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  outline: none;\n  box-sizing: border-box;\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  div:last-child {\n    margin-left: auto;\n  }\n\n  padding: 0 16px;\n  min-height: 48px;\n  \n  svg {\n    width: 20px;\n    height: 20px;\n  }\n  \n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    padding: 0 24px;\n    min-height: 56px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    padding: 0 32px;\n    min-height: 64px;\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  :focus:not(:active) {\n    ${focusStyles}\n  }\n\n  :hover {\n    background: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  :active {\n    color: ${COLORS.primary_800};\n    background: ${COLORS.primary_100};\n    z-index: ${Z_INDEXES.active};\n  }\n\n  &.active {\n    color: ${COLORS.neutral_800};\n  }\n\n  &.disabled {\n    background: ${COLORS.white}!important;\n    color: ${COLORS.neutral_300};\n    cursor: not-allowed;\n    pointer-events: none;\n    svg {\n      color: ${COLORS.neutral_300}!important;\n    }\n  }\n`;\n\nexport const AccordionItemContainer = styled.div`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  \n  &:not(:last-child) ${ItemHeaderContainer}:not(.active) {\n    border-bottom: 1px solid ${COLORS.neutral_100};\n  }\n`;\n\nexport const ItemBodyContainer = styled.div<{ padding?: string }>`\n  padding: ${(props) => props.padding || '12px 16px'};\n  background: ${COLORS.white};\n  \n  ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n  \n  .medium & {\n    ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n  }\n  \n  .large & {\n    ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n  }\n\n`;\n"],"mappings":";;;;;;;;AAAA;AACA;AAQA;AAAgD;AAEzC,IAAMA,oBAAoB,GAAGC,yBAAM,CAACC,GAAG,kLAK7C;AAAC;AAIK,IAAMC,mBAAmB,GAAGF,yBAAM,CAACC,GAAG,wjCASzC,IAAAE,yBAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,WAAW,CAAC,EAe/D,IAAAC,yBAAiB,EAACJ,0BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,WAAW,CAAC,EAWjE,IAAAE,yBAAiB,EAACL,0BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,WAAW,CAAC,EAUjEG,mBAAW,EAICJ,cAAM,CAACK,UAAU,EACtBL,cAAM,CAACM,WAAW,EAChBC,mBAAS,CAACC,KAAK,EAIjBR,cAAM,CAACS,WAAW,EACbT,cAAM,CAACU,WAAW,EACrBH,mBAAS,CAACI,MAAM,EAIlBX,cAAM,CAACY,WAAW,EAIbZ,cAAM,CAACa,KAAK,EACjBb,cAAM,CAACc,WAAW,EAIhBd,cAAM,CAACc,WAAW,CAGhC;AAAC;AAEK,IAAMC,sBAAsB,GAAGrB,yBAAM,CAACC,GAAG,uQAMzBC,mBAAmB,EACXI,cAAM,CAACgB,WAAW,CAEhD;AAAC;AAEK,IAAMC,iBAAiB,GAAGvB,yBAAM,CAACC,GAAG,gNAC9B,UAACuB,KAAK;EAAA,OAAKA,KAAK,CAACC,OAAO,IAAI,WAAW;AAAA,GACpCnB,cAAM,CAACa,KAAK,EAExB,IAAAhB,yBAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC,EAGjD,IAAAG,yBAAiB,EAACJ,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC,EAInD,IAAAI,yBAAiB,EAACL,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC,CAGxD;AAAC"}

package/dist/Accordion/styles.d.ts

@@ -1,9 +1,6 @@
 export declare const AccordionMenuWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const AccordionItemContainer: import("styled-components").StyledComponent<"div", any, {
-    displaySeparator: boolean;
-}, never>;
 export declare const ItemHeaderContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const HeaderIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const AccordionItemContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ItemBodyContainer: import("styled-components").StyledComponent<"div", any, {
     padding?: string | undefined;
 }, never>;

package/dist/Accordion/styles.js

@@ -1,15 +1,12 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 import styled from 'styled-components';
-import { COLORS, ComponentMStyling, ComponentTextStyle, focusStyles } from '../styles';
+import { COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle, focusStyles } from '../styles';
 import { Z_INDEXES } from '../styles/z-indexes';
 export var AccordionMenuWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-width: 320px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n"])));
-export var AccordionItemContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  border-bottom: ", ";\n"])), function (props) {
-  return props.displaySeparator ? "1px solid ".concat(COLORS.neutral_100) : '';
-});
-export var ItemHeaderContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 16px 11px 16px;\n  cursor: pointer;\n\n  ", "\n\n  div:last-child {\n    margin-left: auto;\n  }\n  outline: none;\n\n  :focus:not(:active) {\n    ", "\n  }\n\n  :hover {\n    background: ", ";\n    color: ", ";\n    z-index: ", ";\n  }\n\n  :active {\n    color: ", ";\n    background: ", ";\n    z-index: ", ";\n  }\n\n  &.active {\n    color: ", ";\n  }\n\n  &.disabled {\n    background: ", "!important;\n    color: ", ";\n    cursor: not-allowed;\n    pointer-events: none;\n    svg {\n      color: ", "!important;\n    }\n  }\n"])), ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), focusStyles, COLORS.primary_20, COLORS.primary_700, Z_INDEXES.hover, COLORS.primary_800, COLORS.primary_100, Z_INDEXES.active, COLORS.neutral_800, COLORS.white, COLORS.neutral_300, COLORS.neutral_300);
-export var HeaderIconContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin-left: auto;\n"])));
-export var ItemBodyContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding: ", ";\n  background: ", ";\n"])), function (props) {
+export var ItemHeaderContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  outline: none;\n  box-sizing: border-box;\n\n  ", "\n\n  div:last-child {\n    margin-left: auto;\n  }\n\n  padding: 0 16px;\n  min-height: 48px;\n  \n  svg {\n    width: 20px;\n    height: 20px;\n  }\n  \n  &.medium {\n    ", "\n    padding: 0 24px;\n    min-height: 56px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  &.large {\n    ", "\n    padding: 0 32px;\n    min-height: 64px;\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  :focus:not(:active) {\n    ", "\n  }\n\n  :hover {\n    background: ", ";\n    color: ", ";\n    z-index: ", ";\n  }\n\n  :active {\n    color: ", ";\n    background: ", ";\n    z-index: ", ";\n  }\n\n  &.active {\n    color: ", ";\n  }\n\n  &.disabled {\n    background: ", "!important;\n    color: ", ";\n    cursor: not-allowed;\n    pointer-events: none;\n    svg {\n      color: ", "!important;\n    }\n  }\n"])), ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600), ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600), focusStyles, COLORS.primary_20, COLORS.primary_700, Z_INDEXES.hover, COLORS.primary_800, COLORS.primary_100, Z_INDEXES.active, COLORS.neutral_800, COLORS.white, COLORS.neutral_300, COLORS.neutral_300);
+export var AccordionItemContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  \n  &:not(:last-child) ", ":not(.active) {\n    border-bottom: 1px solid ", ";\n  }\n"])), ItemHeaderContainer, COLORS.neutral_100);
+export var ItemBodyContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  padding: ", ";\n  background: ", ";\n  \n  ", "\n  \n  .medium & {\n    ", "\n  }\n  \n  .large & {\n    ", "\n  }\n\n"])), function (props) {
   return props.padding || '12px 16px';
-}, COLORS.white);
+}, COLORS.white, ComponentSStyling(ComponentTextStyle.Regular, null), ComponentMStyling(ComponentTextStyle.Regular, null), ComponentLStyling(ComponentTextStyle.Regular, null));
 //# sourceMappingURL=styles.js.map

package/dist/Accordion/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["styled","COLORS","ComponentMStyling","ComponentTextStyle","focusStyles","Z_INDEXES","AccordionMenuWrapper","div","AccordionItemContainer","props","displaySeparator","neutral_100","ItemHeaderContainer","Regular","neutral_600","primary_20","primary_700","hover","primary_800","primary_100","active","neutral_800","white","neutral_300","HeaderIconContainer","ItemBodyContainer","padding"],"sources":["../../src/Accordion/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS, ComponentMStyling, ComponentTextStyle, focusStyles } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nexport const AccordionMenuWrapper = styled.div`\n  min-width: 320px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n`;\n\nexport const AccordionItemContainer = styled.div<{ displaySeparator: boolean }>`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  border-bottom: ${(props) => (props.displaySeparator ? `1px solid ${COLORS.neutral_100}` : '')};\n`;\n\nexport const ItemHeaderContainer = styled.div`\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 16px 11px 16px;\n  cursor: pointer;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  div:last-child {\n    margin-left: auto;\n  }\n  outline: none;\n\n  :focus:not(:active) {\n    ${focusStyles}\n  }\n\n  :hover {\n    background: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  :active {\n    color: ${COLORS.primary_800};\n    background: ${COLORS.primary_100};\n    z-index: ${Z_INDEXES.active};\n  }\n\n  &.active {\n    color: ${COLORS.neutral_800};\n  }\n\n  &.disabled {\n    background: ${COLORS.white}!important;\n    color: ${COLORS.neutral_300};\n    cursor: not-allowed;\n    pointer-events: none;\n    svg {\n      color: ${COLORS.neutral_300}!important;\n    }\n  }\n`;\n\nexport const HeaderIconContainer = styled.div`\n  margin-left: auto;\n`;\n\nexport const ItemBodyContainer = styled.div<{ padding?: string }>`\n  padding: ${(props) => props.padding || '12px 16px'};\n  background: ${COLORS.white};\n`;\n"],"mappings":";;AAAA,OAAOA,MAAM,MAAe,mBAAmB;AAC/C,SAASC,MAAM,EAAEC,iBAAiB,EAAEC,kBAAkB,EAAEC,WAAW,QAAQ,WAAW;AACtF,SAASC,SAAS,QAAQ,qBAAqB;AAE/C,OAAO,IAAMC,oBAAoB,GAAGN,MAAM,CAACO,GAAG,oKAK7C;AAED,OAAO,IAAMC,sBAAsB,GAAGR,MAAM,CAACO,GAAG,0LAK7B,UAACE,KAAK;EAAA,OAAMA,KAAK,CAACC,gBAAgB,uBAAgBT,MAAM,CAACU,WAAW,IAAK,EAAE;AAAA,CAAC,CAC9F;AAED,OAAO,IAAMC,mBAAmB,GAAGZ,MAAM,CAACO,GAAG,6rBAQzCL,iBAAiB,CAACC,kBAAkB,CAACU,OAAO,EAAEZ,MAAM,CAACa,WAAW,CAAC,EAQ/DV,WAAW,EAICH,MAAM,CAACc,UAAU,EACtBd,MAAM,CAACe,WAAW,EAChBX,SAAS,CAACY,KAAK,EAIjBhB,MAAM,CAACiB,WAAW,EACbjB,MAAM,CAACkB,WAAW,EACrBd,SAAS,CAACe,MAAM,EAIlBnB,MAAM,CAACoB,WAAW,EAIbpB,MAAM,CAACqB,KAAK,EACjBrB,MAAM,CAACsB,WAAW,EAIhBtB,MAAM,CAACsB,WAAW,CAGhC;AAED,OAAO,IAAMC,mBAAmB,GAAGxB,MAAM,CAACO,GAAG,+FAE5C;AAED,OAAO,IAAMkB,iBAAiB,GAAGzB,MAAM,CAACO,GAAG,iHAC9B,UAACE,KAAK;EAAA,OAAKA,KAAK,CAACiB,OAAO,IAAI,WAAW;AAAA,GACpCzB,MAAM,CAACqB,KAAK,CAC3B"}
+{"version":3,"file":"styles.js","names":["styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","focusStyles","Z_INDEXES","AccordionMenuWrapper","div","ItemHeaderContainer","Regular","neutral_600","primary_20","primary_700","hover","primary_800","primary_100","active","neutral_800","white","neutral_300","AccordionItemContainer","neutral_100","ItemBodyContainer","props","padding"],"sources":["../../src/Accordion/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport {\n  COLORS,\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  focusStyles\n} from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nexport const AccordionMenuWrapper = styled.div`\n  min-width: 320px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n`;\n\n\n\nexport const ItemHeaderContainer = styled.div`\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  outline: none;\n  box-sizing: border-box;\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  div:last-child {\n    margin-left: auto;\n  }\n\n  padding: 0 16px;\n  min-height: 48px;\n  \n  svg {\n    width: 20px;\n    height: 20px;\n  }\n  \n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    padding: 0 24px;\n    min-height: 56px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    padding: 0 32px;\n    min-height: 64px;\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  :focus:not(:active) {\n    ${focusStyles}\n  }\n\n  :hover {\n    background: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  :active {\n    color: ${COLORS.primary_800};\n    background: ${COLORS.primary_100};\n    z-index: ${Z_INDEXES.active};\n  }\n\n  &.active {\n    color: ${COLORS.neutral_800};\n  }\n\n  &.disabled {\n    background: ${COLORS.white}!important;\n    color: ${COLORS.neutral_300};\n    cursor: not-allowed;\n    pointer-events: none;\n    svg {\n      color: ${COLORS.neutral_300}!important;\n    }\n  }\n`;\n\nexport const AccordionItemContainer = styled.div`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  \n  &:not(:last-child) ${ItemHeaderContainer}:not(.active) {\n    border-bottom: 1px solid ${COLORS.neutral_100};\n  }\n`;\n\nexport const ItemBodyContainer = styled.div<{ padding?: string }>`\n  padding: ${(props) => props.padding || '12px 16px'};\n  background: ${COLORS.white};\n  \n  ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n  \n  .medium & {\n    ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n  }\n  \n  .large & {\n    ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n  }\n\n`;\n"],"mappings":";;AAAA,OAAOA,MAAM,MAAe,mBAAmB;AAC/C,SACEC,MAAM,EACNC,iBAAiB,EACjBC,iBAAiB,EACjBC,iBAAiB,EACjBC,kBAAkB,EAClBC,WAAW,QACN,WAAW;AAClB,SAASC,SAAS,QAAQ,qBAAqB;AAE/C,OAAO,IAAMC,oBAAoB,GAAGR,MAAM,CAACS,GAAG,oKAK7C;AAID,OAAO,IAAMC,mBAAmB,GAAGV,MAAM,CAACS,GAAG,0iCASzCL,iBAAiB,CAACC,kBAAkB,CAACM,OAAO,EAAEV,MAAM,CAACW,WAAW,CAAC,EAe/DT,iBAAiB,CAACE,kBAAkB,CAACM,OAAO,EAAEV,MAAM,CAACW,WAAW,CAAC,EAWjEV,iBAAiB,CAACG,kBAAkB,CAACM,OAAO,EAAEV,MAAM,CAACW,WAAW,CAAC,EAUjEN,WAAW,EAICL,MAAM,CAACY,UAAU,EACtBZ,MAAM,CAACa,WAAW,EAChBP,SAAS,CAACQ,KAAK,EAIjBd,MAAM,CAACe,WAAW,EACbf,MAAM,CAACgB,WAAW,EACrBV,SAAS,CAACW,MAAM,EAIlBjB,MAAM,CAACkB,WAAW,EAIblB,MAAM,CAACmB,KAAK,EACjBnB,MAAM,CAACoB,WAAW,EAIhBpB,MAAM,CAACoB,WAAW,CAGhC;AAED,OAAO,IAAMC,sBAAsB,GAAGtB,MAAM,CAACS,GAAG,yPAMzBC,mBAAmB,EACXT,MAAM,CAACsB,WAAW,CAEhD;AAED,OAAO,IAAMC,iBAAiB,GAAGxB,MAAM,CAACS,GAAG,kMAC9B,UAACgB,KAAK;EAAA,OAAKA,KAAK,CAACC,OAAO,IAAI,WAAW;AAAA,GACpCzB,MAAM,CAACmB,KAAK,EAExBhB,iBAAiB,CAACC,kBAAkB,CAACM,OAAO,EAAE,IAAI,CAAC,EAGjDR,iBAAiB,CAACE,kBAAkB,CAACM,OAAO,EAAE,IAAI,CAAC,EAInDT,iBAAiB,CAACG,kBAAkB,CAACM,OAAO,EAAE,IAAI,CAAC,CAGxD"}

package/dist/Tile/TileCommonItems.cjs

@@ -24,11 +24,11 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var TileNoteText = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)([""])));
 exports.TileNoteText = TileNoteText;
-var TileNoteIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["display: flex;"])));
+var TileNoteIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)([""])));
 exports.TileNoteIcon = TileNoteIcon;
 var 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"])), _styles.COLORS.neutral_600, 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));
 exports.TileNoteWrapper = TileNoteWrapper;
-var TileHyperLinkIcon = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["display: flex"])));
+var TileHyperLinkIcon = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)([""])));
 exports.TileHyperLinkIcon = TileHyperLinkIcon;
 var TileHyperLinkText = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)([""])));
 exports.TileHyperLinkText = TileHyperLinkText;

package/dist/Tile/TileCommonItems.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TileCommonItems.cjs","names":["TileNoteText","styled","div","TileNoteIcon","TileNoteWrapper","COLORS","neutral_600","ComponentXXSStyling","ComponentTextStyle","Regular","ComponentXSStyling","ComponentSStyling","TileHyperLinkIcon","TileHyperLinkText","TileHyperLinkWrapper","Bold","primary_500","ComponentMStyling","ComponentLStyling","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","React","cloneElement","Size","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                         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":";;;;;;;;;;AAQA;AACA;AACA;AACA;AACA;AACA;AAQA;AACA;AAA8B;AAAA;EAAA;AAAA;AAAA;AAAA;AAGvB,IAAMA,YAAY,GAAGC,yBAAM,CAACC,GAAG,mFAAE;AAAC;AAClC,IAAMC,YAAY,GAAGF,yBAAM,CAACC,GAAG,mGAAgB;AAAC;AAChD,IAAME,eAAe,GAAGH,yBAAM,CAACC,GAAG,mjBAI9BG,cAAM,CAACC,WAAW,EAKvBH,YAAY,EAKZH,YAAY,EACV,IAAAO,2BAAmB,EAACC,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC,EAOvDN,YAAY,EAKZH,YAAY,EACV,IAAAU,0BAAkB,EAACF,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC,EAQtDN,YAAY,EAKZH,YAAY,EACV,IAAAW,yBAAiB,EAACH,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC,CAG1D;AAAC;AAGK,IAAMG,iBAAiB,GAAGX,yBAAM,CAACC,GAAG,kGAAe;AAAC;AACpD,IAAMW,iBAAiB,GAAGZ,yBAAM,CAACC,GAAG,qFAAE;AAAC;AAEvC,IAAMY,oBAAoB,GAAGb,yBAAM,CAACC,GAAG,ypBAG1C,IAAAS,yBAAiB,EAACH,0BAAkB,CAACO,IAAI,EAAEV,cAAM,CAACW,WAAW,CAAC,EAS5DJ,iBAAiB,EAKjBC,iBAAiB,EACf,IAAAF,yBAAiB,EAACH,0BAAkB,CAACO,IAAI,EAAE,IAAI,CAAC,EASlDH,iBAAiB,EAKjBC,iBAAiB,EACf,IAAAI,yBAAiB,EAACT,0BAAkB,CAACO,IAAI,EAAE,IAAI,CAAC,EASlDH,iBAAiB,EAKjBC,iBAAiB,EACf,IAAAK,yBAAiB,EAACV,0BAAkB,CAACO,IAAI,EAAE,IAAI,CAAC,CAOvD;AAAA;AAEM,IAAMI,cAAc,GAAG,SAAjBA,cAAc,CAAIC,IAA4G,EAC5GC,IAAU,EAC2B;EAAA,IAArCC,GAAoB,uEAAGC,SAAS;EAC7D,QAAQH,IAAI,CAACI,aAAa;IACxB,KAAK,MAAM;MAAE;QACX,oBAAO,qBAAC,kBAAU;UACC,OAAO,EAAE,WAAY;UACrB,wBAAwB,EAAE,IAAK;UAC/B,KAAK,EAAE,UAAW;UAClB,MAAM,EAAEJ,IAAI,CAACK,MAAO;UACpB,QAAQ,EAAEL,IAAI,CAACM,QAAS;UAAA,UACxCN,IAAI,CAACO;QAAI,GANYL,GAAG,CAOd;MACf;IACA,KAAK,QAAQ;MAAE;QACb,oBAAO,qBAAC,qBAAY;UACC,MAAM,EAAEF,IAAI,CAACQ,MAAO;UACpB,QAAQ,EAAER,IAAI,CAACS,QAAS;UACxB,YAAY,EAAET,IAAI,CAACU,YAAa;UAChC,WAAW,EAAEV,IAAI,CAACW,WAAY;UAC9B,QAAQ,EAAEX,IAAI,CAACM;QAAS,GALnBJ,GAAG,CAKkB;MACjD;IACA,KAAK,UAAU;MAAE;QACf,oBAAO,qBAAC,wBAAc;UACC,IAAI,EAAE,MAAO;UACb,KAAK,EAAEF,IAAI,CAACY,KAAM;UAClB,SAAS,EAAEZ,IAAI,CAACa,SAAU;UAC1B,OAAO,EAAEb,IAAI,CAACc,OAAQ;UACtB,IAAI,EAAEd,IAAI,CAACO,IAAK;UAChB,MAAM,EAAEP,IAAI,CAACK,MAAO;UACpB,UAAU,EAAEL,IAAI,CAACe,UAAW;UAC5B,WAAW,EAAEf,IAAI,CAACgB,WAAY;UAC9B,aAAa,EAAEhB,IAAI,CAACiB,aAAc;UAClC,aAAa,EAAEjB,IAAI,CAACkB,aAAc;UAClC,WAAW,EAAElB,IAAI,CAACmB,WAAY;UAC9B,UAAU,EAAEnB,IAAI,CAACoB,UAAW;UAC5B,UAAU,EAAEpB,IAAI,CAACqB,UAAW;UAC5B,SAAS,EAAErB,IAAI,CAACsB,SAAU;UAC1B,QAAQ,EAAEtB,IAAI,CAACM;QAAS,GAfnBJ,GAAG,CAekB;MAEnD;IACA,KAAK,MAAM;MAAE;QACX,oBAAO,sBAAC,eAAe;UAAW,SAAS,EAAED,IAAK;UAAA,WAE9CD,IAAI,CAACuB,QAAQ,iBACb,qBAAC,YAAY;YAAA,uBACVC,cAAK,CAACC,YAAY,CAACzB,IAAI,CAACuB,QAAQ,EAAwB;cAACtB,IAAI,EAAEA,IAAI,KAAKyB,WAAI,CAACC,KAAK,GAAG,MAAM,GAAG;YAAI,CAAC;UAAC,EACxF,eAEjB,qBAAC,YAAY;YAAA,UAAE3B,IAAI,CAAC4B;UAAQ,EAAgB;QAAA,GAPjB1B,GAAG,CAQd;MAEpB;IACA,KAAK,MAAM;MAAE;QACX,IAAO2B,QAAQ,GAAsC7B,IAAI,CAAlD6B,QAAQ;UAAEzB,aAAa,GAAuBJ,IAAI,CAAxCI,aAAa;UAAE0B,QAAQ,GAAa9B,IAAI,CAAzB8B,QAAQ;UAAKC,IAAI,0CAAI/B,IAAI;QACzD,oBAAO,qBAAC,oBAAoB;UAAC,SAAS,EAAEC,IAAK;UAAA,uBAC3C,sBAAC,oBAAS,kCAAK8B,IAAI;YAAA,wBACjB,qBAAC,iBAAiB;cAAA,uBACfP,cAAK,CAACC,YAAY,CAACK,QAAQ,EAAwB;gBAAC7B,IAAI,EAAEA,IAAI,KAAKyB,WAAI,CAACC,KAAK,GAAG,MAAM,GAAG;cAAM,CAAC;YAAC,EAChF,eACpB,qBAAC,iBAAiB;cAAA,UAAEE;YAAQ,EAAqB;UAAA;QACvC,GANqC3B,GAAG,CAO/B;MACzB;IACA,KAAK,QAAQ;MAAE;QACb,IAAO8B,UAAU,GAA4BhC,IAAI,CAA1CgC,UAAU;UAAE5B,cAAa,GAAaJ,IAAI,CAA9BI,aAAa;UAAK2B,KAAI,0CAAI/B,IAAI;QACjD,oBAAO,qBAAC,cAAM;UACC,IAAI,EAAEC;QAAK,GACP8B,KAAI;UAAA,UACpBC;QAAU,IAHO9B,GAAG,CAId;MACX;EAAC;AAEL,CAAC;AAAA"}
+{"version":3,"file":"TileCommonItems.cjs","names":["TileNoteText","styled","div","TileNoteIcon","TileNoteWrapper","COLORS","neutral_600","ComponentXXSStyling","ComponentTextStyle","Regular","ComponentXSStyling","ComponentSStyling","TileHyperLinkIcon","TileHyperLinkText","TileHyperLinkWrapper","Bold","primary_500","ComponentMStyling","ComponentLStyling","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","React","cloneElement","Size","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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"}

package/dist/Tile/TileCommonItems.js

@@ -17,9 +17,9 @@ import { Size } from '../types';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var TileNoteText = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral([""])));
-export var TileNoteIcon = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["display: flex;"])));
+export var TileNoteIcon = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
 export var TileNoteWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  color: ", ";\n\n  &.small {\n    gap: 4px;\n\n    ", " {\n      width: 16px;\n      height: 16px;\n    }\n\n    ", " {\n      ", "\n    }\n  }\n\n  &.medium {\n    gap: 6px;\n\n    ", " {\n      width: 16px;\n      height: 16px;\n    }\n\n    ", " {\n      ", "\n    }\n\n  }\n\n  &.large {\n    gap: 8px;\n\n    ", " {\n      width: 20px;\n      height: 20px;\n    }\n\n    ", " {\n      ", "\n    }\n  }\n"])), COLORS.neutral_600, TileNoteIcon, TileNoteText, ComponentXXSStyling(ComponentTextStyle.Regular, null), TileNoteIcon, TileNoteText, ComponentXSStyling(ComponentTextStyle.Regular, null), TileNoteIcon, TileNoteText, ComponentSStyling(ComponentTextStyle.Regular, null));
-export var TileHyperLinkIcon = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["display: flex"])));
+export var TileHyperLinkIcon = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral([""])));
 export var TileHyperLinkText = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([""])));
 export var TileHyperLinkWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: max-content;\n\n  ", "\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n\n  &.small {\n    ", " {\n      width: 24px;\n      height: 24px;\n    }\n\n    ", " {\n      ", "\n    }\n\n    a {\n      gap: 4px;\n    }\n  }\n\n  &.medium {\n    ", " {\n      width: 24px;\n      height: 24px;\n    }\n\n    ", " {\n      ", "\n    }\n\n    a {\n      gap: 6px;\n    }\n  }\n\n  &.large {\n    ", " {\n      width: 28px;\n      height: 28px;\n    }\n\n    ", " {\n      ", "\n    }\n\n    a {\n      gap: 8px;\n    }\n  }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500), TileHyperLinkIcon, TileHyperLinkText, ComponentSStyling(ComponentTextStyle.Bold, null), TileHyperLinkIcon, TileHyperLinkText, ComponentMStyling(ComponentTextStyle.Bold, null), TileHyperLinkIcon, TileHyperLinkText, ComponentLStyling(ComponentTextStyle.Bold, null));
 export var RenderTileItem = function RenderTileItem(item, size) {

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`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                         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","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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"}

package/dist/Tile/TileHeader.cjs

@@ -15,17 +15,15 @@ var _Button = require("../Button");
 var _SystemIcons = require("../icons/systemicons/SystemIcons");
 var _TileCommonItems = require("./TileCommonItems");
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _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 _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var TagLineContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), _styles.COLORS.neutral_600);
+var TitleContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), _styles.COLORS.black);
+var TextContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex: 1;\n"])));
+var ActionContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n"])));
+var Wrapper = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n\n  min-height: 56px;\n  box-sizing: border-box;\n\n  &.small {\n    padding: 4px 16px;\n    min-height: 56px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      ", "\n    }\n  }\n\n  &.medium {\n    padding: 8px 20px;\n    min-height: 64px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      ", "\n    }\n\n  }\n\n  &.large {\n    padding: 12px 24px;\n    min-height: 72px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      ", "\n    }\n\n  }\n"])), TagLineContainer, (0, _styles.ComponentXXSStyling)(_styles.ComponentTextStyle.Regular, null), TitleContainer, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, null), TagLineContainer, (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null), TitleContainer, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, null), TagLineContainer, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), TitleContainer, (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Bold, null));
 var TileHeader = function TileHeader(_ref) {
   var title = _ref.title,
-    subtitle = _ref.subtitle,
-    subtitleIcon = _ref.subtitleIcon,
+    tagLine = _ref.tagLine,
     tooltip = _ref.tooltip,
     buttons = _ref.buttons,
     size = _ref.size;
@@ -54,16 +52,10 @@ var TileHeader = function TileHeader(_ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
     className: size,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(TextContainer, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TitleContainer, {
+      children: [tagLine && /*#__PURE__*/(0, _jsxRuntime.jsx)(TagLineContainer, {
+        children: tagLine
+      }), /*#__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":["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 {Help} from '../icons/systemicons/SystemIcons';\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        <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":"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"}
+{"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"}

package/dist/Tile/TileHeader.js

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 import React from 'react';
 import { Size } from '../types';
 import styled from 'styled-components';
@@ -10,16 +10,14 @@ import { Help } from '../icons/systemicons/SystemIcons';
 import { RenderTileItem } from './TileCommonItems';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var 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 TagLineContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n"])), COLORS.neutral_600);
+var TitleContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), COLORS.black);
+var TextContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex: 1;\n"])));
+var ActionContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
+var Wrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  min-height: 56px;\n  box-sizing: border-box;\n\n  &.small {\n    padding: 4px 16px;\n    min-height: 56px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      ", "\n    }\n  }\n\n  &.medium {\n    padding: 8px 20px;\n    min-height: 64px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      ", "\n    }\n\n  }\n\n  &.large {\n    padding: 12px 24px;\n    min-height: 72px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      ", "\n    }\n\n  }\n"])), TagLineContainer, ComponentXXSStyling(ComponentTextStyle.Regular, null), TitleContainer, ComponentSStyling(ComponentTextStyle.Bold, null), TagLineContainer, ComponentXSStyling(ComponentTextStyle.Regular, null), TitleContainer, ComponentMStyling(ComponentTextStyle.Bold, null), TagLineContainer, ComponentSStyling(ComponentTextStyle.Regular, null), TitleContainer, ComponentLStyling(ComponentTextStyle.Bold, null));
 var TileHeader = function TileHeader(_ref) {
   var title = _ref.title,
-    subtitle = _ref.subtitle,
-    subtitleIcon = _ref.subtitleIcon,
+    tagLine = _ref.tagLine,
     tooltip = _ref.tooltip,
     buttons = _ref.buttons,
     size = _ref.size;
@@ -48,16 +46,10 @@ var TileHeader = function TileHeader(_ref) {
   return /*#__PURE__*/_jsxs(Wrapper, {
     className: size,
     children: [/*#__PURE__*/_jsxs(TextContainer, {
-      children: [/*#__PURE__*/_jsx(TitleContainer, {
+      children: [tagLine && /*#__PURE__*/_jsx(TagLineContainer, {
+        children: tagLine
+      }), /*#__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","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 {Help} from '../icons/systemicons/SystemIcons';\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        <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":"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"}
+{"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"}

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  subtitle?: string;\n  subtitleIcon?: React.ReactNode;\n\n  buttons?: HeaderButtons[];\n}\n\nexport interface TileFooterProps {\n  leftItem?: TileNote | TileHyperLink | TileStandardButton;\n  buttons?: FooterButtons[];\n}\n\n\nexport interface TileProps extends React.HTMLAttributes<HTMLDivElement>{\n  style?: {\n    width?: string,\n    minWidth?: string,\n    maxWidth?: string,\n    height?: string,\n    minHeight?: string,\n    maxHeight?: string,\n  };\n\n  size?: Size.Small | Size.Medium | Size.Large\n\n  header?: TileHeaderProps;\n  footer?: TileFooterProps;\n}\n"],"mappings":""}
+{"version":3,"file":"TileTypes.cjs","names":[],"sources":["../../src/Tile/TileTypes.ts"],"sourcesContent":["import React from 'react';\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":""}

package/dist/Tile/TileTypes.d.ts

@@ -35,8 +35,7 @@ export type HeaderButtons = TileIconButton | TileToggleButton | TileDropdownButt
 export interface TileHeaderProps {
     title: string;
     tooltip?: string;
-    subtitle?: string;
-    subtitleIcon?: React.ReactNode;
+    tagLine?: string;
     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  subtitle?: string;\n  subtitleIcon?: React.ReactNode;\n\n  buttons?: HeaderButtons[];\n}\n\nexport interface TileFooterProps {\n  leftItem?: TileNote | TileHyperLink | TileStandardButton;\n  buttons?: FooterButtons[];\n}\n\n\nexport interface TileProps extends React.HTMLAttributes<HTMLDivElement>{\n  style?: {\n    width?: string,\n    minWidth?: string,\n    maxWidth?: string,\n    height?: string,\n    minHeight?: string,\n    maxHeight?: string,\n  };\n\n  size?: Size.Small | Size.Medium | Size.Large\n\n  header?: TileHeaderProps;\n  footer?: TileFooterProps;\n}\n"],"mappings":""}
+{"version":3,"file":"TileTypes.js","names":[],"sources":["../../src/Tile/TileTypes.ts"],"sourcesContent":["import React from 'react';\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":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laerdal/life-react-components",
-  "version": "2.1.1-dev.24",
+  "version": "2.1.1-dev.29",
   "private": false,
   "author": "Erik Martirosyan <erik.martirosyan@laerdal.com>",
   "contributors": [],