@laerdal/life-react-components 3.4.3 → 3.5.0

package/dist/Tabs/Tabs.d.ts

@@ -1,8 +1,8 @@
-import * as React from 'react';
-import { Size } from '../types';
-type TabsProps = {
-    children?: any;
-    size: Size;
-};
-declare const Tabs: React.FunctionComponent<TabsProps>;
-export default Tabs;
+import * as React from 'react';
+import { Size } from '../types';
+type TabsProps = {
+    children?: any;
+    size: Size;
+};
+declare const Tabs: React.FunctionComponent<TabsProps>;
+export default Tabs;

package/dist/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","names":["React","styled","Size","getHeight","size","Small","Medium","Large","getFontSize","getTopMargin","getBottomMargin","Nav","nav","props","Tabs","children"],"sources":["../../src/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { Size } from '../types';\n\ntype TabsProps = {\n  children?: any;\n  size: Size;\n};\n\nconst getHeight = (size: Size) => {\n  switch (size) {\n    case Size.Small:\n      return '48px';\n    case Size.Medium:\n      return '56px';\n    case Size.Large:\n      return '64px';\n    default:\n      return '48px';\n  }\n};\n\nconst getFontSize = (size: Size) => {\n  switch (size) {\n    case Size.Small:\n      return '16px';\n    case Size.Medium:\n      return '18px';\n    case Size.Large:\n      return '20px';\n    default:\n      return '20px';\n  }\n};\n\nconst getTopMargin = (size: Size) => {\n  switch (size) {\n    case Size.Small:\n      return '6px';\n    case Size.Medium:\n      return '10px';\n    case Size.Large:\n      return '12px';\n    default:\n      return '12px';\n  }\n};\n\nconst getBottomMargin = (size: Size) => {\n  switch (size) {\n    case Size.Small:\n      return '2px';\n    case Size.Medium:\n      return '3px';\n    case Size.Large:\n      return '4px';\n    default:\n      return '4px';\n  }\n};\n\nconst Nav = styled.nav<TabsProps>`\n  display: flex;\n  flex-direction: column;\n\n  a {\n    height: ${(props) => getHeight(props.size)};\n  }\n\n  a > div:last-of-type {\n    font-size: 12px;\n    margin: 0 0 8px 16px;\n  }\n  a > div:first-child {\n    font-size: ${(props) => getFontSize(props.size)};\n    margin: ${(props) => getTopMargin(props.size)} 0 ${(props) => getBottomMargin(props.size)} 16px;\n  }\n  a > div:only-of-type {\n    font-size: ${(props) => getFontSize(props.size)};\n    margin: auto 0 auto 16px;\n  }\n\n  @media print {\n    display: none;\n  }\n`;\n\nconst Tabs: React.FunctionComponent<TabsProps> = ({ children, size }) => (\n  <Nav role=\"tablist\" size={size}>\n    {children}\n  </Nav>\n);\n\nexport default Tabs;\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,IAAI,QAAQ,UAAU;AAAC;AAOhC,IAAMC,SAAS,GAAG,SAAZA,SAAS,CAAIC,IAAU,EAAK;EAChC,QAAQA,IAAI;IACV,KAAKF,IAAI,CAACG,KAAK;MACb,OAAO,MAAM;IACf,KAAKH,IAAI,CAACI,MAAM;MACd,OAAO,MAAM;IACf,KAAKJ,IAAI,CAACK,KAAK;MACb,OAAO,MAAM;IACf;MACE,OAAO,MAAM;EAAC;AAEpB,CAAC;AAED,IAAMC,WAAW,GAAG,SAAdA,WAAW,CAAIJ,IAAU,EAAK;EAClC,QAAQA,IAAI;IACV,KAAKF,IAAI,CAACG,KAAK;MACb,OAAO,MAAM;IACf,KAAKH,IAAI,CAACI,MAAM;MACd,OAAO,MAAM;IACf,KAAKJ,IAAI,CAACK,KAAK;MACb,OAAO,MAAM;IACf;MACE,OAAO,MAAM;EAAC;AAEpB,CAAC;AAED,IAAME,YAAY,GAAG,SAAfA,YAAY,CAAIL,IAAU,EAAK;EACnC,QAAQA,IAAI;IACV,KAAKF,IAAI,CAACG,KAAK;MACb,OAAO,KAAK;IACd,KAAKH,IAAI,CAACI,MAAM;MACd,OAAO,MAAM;IACf,KAAKJ,IAAI,CAACK,KAAK;MACb,OAAO,MAAM;IACf;MACE,OAAO,MAAM;EAAC;AAEpB,CAAC;AAED,IAAMG,eAAe,GAAG,SAAlBA,eAAe,CAAIN,IAAU,EAAK;EACtC,QAAQA,IAAI;IACV,KAAKF,IAAI,CAACG,KAAK;MACb,OAAO,KAAK;IACd,KAAKH,IAAI,CAACI,MAAM;MACd,OAAO,KAAK;IACd,KAAKJ,IAAI,CAACK,KAAK;MACb,OAAO,KAAK;IACd;MACE,OAAO,KAAK;EAAC;AAEnB,CAAC;AAED,IAAMI,GAAG,GAAGV,MAAM,CAACW,GAAG,4bAKR,UAACC,KAAK;EAAA,OAAKV,SAAS,CAACU,KAAK,CAACT,IAAI,CAAC;AAAA,GAQ7B,UAACS,KAAK;EAAA,OAAKL,WAAW,CAACK,KAAK,CAACT,IAAI,CAAC;AAAA,GACrC,UAACS,KAAK;EAAA,OAAKJ,YAAY,CAACI,KAAK,CAACT,IAAI,CAAC;AAAA,GAAM,UAACS,KAAK;EAAA,OAAKH,eAAe,CAACG,KAAK,CAACT,IAAI,CAAC;AAAA,GAG5E,UAACS,KAAK;EAAA,OAAKL,WAAW,CAACK,KAAK,CAACT,IAAI,CAAC;AAAA,EAOlD;AAED,IAAMU,IAAwC,GAAG,SAA3CA,IAAwC;EAAA,IAAMC,QAAQ,QAARA,QAAQ;IAAEX,IAAI,QAAJA,IAAI;EAAA,oBAChE,KAAC,GAAG;IAAC,IAAI,EAAC,SAAS;IAAC,IAAI,EAAEA,IAAK;IAAA,UAC5BW;EAAQ,EACL;AAAA,CACP;AAAC;EAtFAA,QAAQ;AAAA;AAwFV,eAAeD,IAAI"}
+{"version":3,"file":"Tabs.js","names":["React","styled","Size","getHeight","size","Small","Medium","Large","getFontSize","getTopMargin","getBottomMargin","Nav","nav","props","Tabs","children"],"sources":["../../src/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { Size } from '../types';\r\n\r\ntype TabsProps = {\r\n  children?: any;\r\n  size: Size;\r\n};\r\n\r\nconst getHeight = (size: Size) => {\r\n  switch (size) {\r\n    case Size.Small:\r\n      return '48px';\r\n    case Size.Medium:\r\n      return '56px';\r\n    case Size.Large:\r\n      return '64px';\r\n    default:\r\n      return '48px';\r\n  }\r\n};\r\n\r\nconst getFontSize = (size: Size) => {\r\n  switch (size) {\r\n    case Size.Small:\r\n      return '16px';\r\n    case Size.Medium:\r\n      return '18px';\r\n    case Size.Large:\r\n      return '20px';\r\n    default:\r\n      return '20px';\r\n  }\r\n};\r\n\r\nconst getTopMargin = (size: Size) => {\r\n  switch (size) {\r\n    case Size.Small:\r\n      return '6px';\r\n    case Size.Medium:\r\n      return '10px';\r\n    case Size.Large:\r\n      return '12px';\r\n    default:\r\n      return '12px';\r\n  }\r\n};\r\n\r\nconst getBottomMargin = (size: Size) => {\r\n  switch (size) {\r\n    case Size.Small:\r\n      return '2px';\r\n    case Size.Medium:\r\n      return '3px';\r\n    case Size.Large:\r\n      return '4px';\r\n    default:\r\n      return '4px';\r\n  }\r\n};\r\n\r\nconst Nav = styled.nav<TabsProps>`\r\n  display: flex;\r\n  flex-direction: column;\r\n\r\n  a {\r\n    height: ${(props) => getHeight(props.size)};\r\n  }\r\n\r\n  a > div:last-of-type {\r\n    font-size: 12px;\r\n    margin: 0 0 8px 16px;\r\n  }\r\n  a > div:first-child {\r\n    font-size: ${(props) => getFontSize(props.size)};\r\n    margin: ${(props) => getTopMargin(props.size)} 0 ${(props) => getBottomMargin(props.size)} 16px;\r\n  }\r\n  a > div:only-of-type {\r\n    font-size: ${(props) => getFontSize(props.size)};\r\n    margin: auto 0 auto 16px;\r\n  }\r\n\r\n  @media print {\r\n    display: none;\r\n  }\r\n`;\r\n\r\nconst Tabs: React.FunctionComponent<TabsProps> = ({ children, size }) => (\r\n  <Nav role=\"tablist\" size={size}>\r\n    {children}\r\n  </Nav>\r\n);\r\n\r\nexport default Tabs;\r\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,IAAI,QAAQ,UAAU;AAAC;AAOhC,IAAMC,SAAS,GAAG,SAAZA,SAAS,CAAIC,IAAU,EAAK;EAChC,QAAQA,IAAI;IACV,KAAKF,IAAI,CAACG,KAAK;MACb,OAAO,MAAM;IACf,KAAKH,IAAI,CAACI,MAAM;MACd,OAAO,MAAM;IACf,KAAKJ,IAAI,CAACK,KAAK;MACb,OAAO,MAAM;IACf;MACE,OAAO,MAAM;EAAC;AAEpB,CAAC;AAED,IAAMC,WAAW,GAAG,SAAdA,WAAW,CAAIJ,IAAU,EAAK;EAClC,QAAQA,IAAI;IACV,KAAKF,IAAI,CAACG,KAAK;MACb,OAAO,MAAM;IACf,KAAKH,IAAI,CAACI,MAAM;MACd,OAAO,MAAM;IACf,KAAKJ,IAAI,CAACK,KAAK;MACb,OAAO,MAAM;IACf;MACE,OAAO,MAAM;EAAC;AAEpB,CAAC;AAED,IAAME,YAAY,GAAG,SAAfA,YAAY,CAAIL,IAAU,EAAK;EACnC,QAAQA,IAAI;IACV,KAAKF,IAAI,CAACG,KAAK;MACb,OAAO,KAAK;IACd,KAAKH,IAAI,CAACI,MAAM;MACd,OAAO,MAAM;IACf,KAAKJ,IAAI,CAACK,KAAK;MACb,OAAO,MAAM;IACf;MACE,OAAO,MAAM;EAAC;AAEpB,CAAC;AAED,IAAMG,eAAe,GAAG,SAAlBA,eAAe,CAAIN,IAAU,EAAK;EACtC,QAAQA,IAAI;IACV,KAAKF,IAAI,CAACG,KAAK;MACb,OAAO,KAAK;IACd,KAAKH,IAAI,CAACI,MAAM;MACd,OAAO,KAAK;IACd,KAAKJ,IAAI,CAACK,KAAK;MACb,OAAO,KAAK;IACd;MACE,OAAO,KAAK;EAAC;AAEnB,CAAC;AAED,IAAMI,GAAG,GAAGV,MAAM,CAACW,GAAG,4bAKR,UAACC,KAAK;EAAA,OAAKV,SAAS,CAACU,KAAK,CAACT,IAAI,CAAC;AAAA,GAQ7B,UAACS,KAAK;EAAA,OAAKL,WAAW,CAACK,KAAK,CAACT,IAAI,CAAC;AAAA,GACrC,UAACS,KAAK;EAAA,OAAKJ,YAAY,CAACI,KAAK,CAACT,IAAI,CAAC;AAAA,GAAM,UAACS,KAAK;EAAA,OAAKH,eAAe,CAACG,KAAK,CAACT,IAAI,CAAC;AAAA,GAG5E,UAACS,KAAK;EAAA,OAAKL,WAAW,CAACK,KAAK,CAACT,IAAI,CAAC;AAAA,EAOlD;AAED,IAAMU,IAAwC,GAAG,SAA3CA,IAAwC;EAAA,IAAMC,QAAQ,QAARA,QAAQ;IAAEX,IAAI,QAAJA,IAAI;EAAA,oBAChE,KAAC,GAAG;IAAC,IAAI,EAAC,SAAS;IAAC,IAAI,EAAEA,IAAK;IAAA,UAC5BW;EAAQ,EACL;AAAA,CACP;AAAC;EAtFAA,QAAQ;AAAA;AAwFV,eAAeD,IAAI"}

package/dist/Tabs/VerticalTabs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"VerticalTabs.cjs","names":["VerticalTabs","size","entries","Size","Large","map","entry","to","requiredLine","optionalLine","endLineIcon","optionalLineIcon","disabled","showNotificationDot","variant","e","onClick"],"sources":["../../src/Tabs/VerticalTabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport Tabs from './Tabs';\nimport TabLink from './TabLink';\nimport { BaseProps } from '../icons';\nimport { Size } from '../types';\n\nexport interface VerticalTabEntry {\n  requiredLine: string;\n  optionalLine?: string;\n  optionalLineIcon?: React.ReactNode;\n  endLineIcon?: React.ReactNode;\n  to: string;\n  disabled?: boolean;\n  onClick?: (e: React.MouseEvent) => void;\n  showNotificationDot?: boolean;\n  variant?: 'critical' | 'positive';\n}\ninterface VerticalTabsProps {\n  size?: Size.Small | Size.Medium | Size.Large;\n  entries: VerticalTabEntry[];\n}\n\nconst VerticalTabs = ({ size, entries }: VerticalTabsProps) => {\n  return (\n    <Tabs size={size ?? Size.Large}>\n      {entries?.map((entry: VerticalTabEntry) => (\n        <TabLink\n          key={entry.to}\n          to={entry.to}\n          requiredLine={entry.requiredLine}\n          optionalLine={entry.optionalLine}\n          endLineIcon={entry.endLineIcon}\n          OptionalLineIcon={entry.optionalLineIcon}\n          disabled={entry.disabled}\n          showNotificationDot={entry.showNotificationDot}\n          size={size}\n          variant={entry.variant}\n          onLinkClick={(e) => {\n            if (entry.onClick) {\n              entry.onClick(e);\n            }\n          }}/>\n      ))}\n    </Tabs>\n  );\n};\n\nexport default VerticalTabs;\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AAEA;AAAgC;AAAA;AAAA;AAkBhC,IAAMA,YAAY,GAAG,SAAfA,YAAY,OAA6C;EAAA,IAAvCC,IAAI,QAAJA,IAAI;IAAEC,OAAO,QAAPA,OAAO;EACnC,oBACE,qBAAC,aAAI;IAAC,IAAI,EAAED,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAIE,WAAI,CAACC,KAAM;IAAA,UAC5BF,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEG,GAAG,CAAC,UAACC,KAAuB;MAAA,oBACpC,qBAAC,gBAAO;QAEN,EAAE,EAAEA,KAAK,CAACC,EAAG;QACb,YAAY,EAAED,KAAK,CAACE,YAAa;QACjC,YAAY,EAAEF,KAAK,CAACG,YAAa;QACjC,WAAW,EAAEH,KAAK,CAACI,WAAY;QAC/B,gBAAgB,EAAEJ,KAAK,CAACK,gBAAiB;QACzC,QAAQ,EAAEL,KAAK,CAACM,QAAS;QACzB,mBAAmB,EAAEN,KAAK,CAACO,mBAAoB;QAC/C,IAAI,EAAEZ,IAAK;QACX,OAAO,EAAEK,KAAK,CAACQ,OAAQ;QACvB,WAAW,EAAE,qBAACC,CAAC,EAAK;UAClB,IAAIT,KAAK,CAACU,OAAO,EAAE;YACjBV,KAAK,CAACU,OAAO,CAACD,CAAC,CAAC;UAClB;QACF;MAAE,GAdGT,KAAK,CAACC,EAAE,CAcT;IAAA,CACP;EAAC,EACG;AAEX,CAAC;AAAC;EA1BAL,OAAO;IAZPM,YAAY;IACZC,YAAY;IACZE,gBAAgB;IAChBD,WAAW;IACXH,EAAE;IACFK,QAAQ;IACRI,OAAO;IACPH,mBAAmB;IACnBC,OAAO,4BAAG,UAAU,EAAG,UAAU;EAAA;AAAA;AAAA,eAgCpBd,YAAY;AAAA"}
+{"version":3,"file":"VerticalTabs.cjs","names":["VerticalTabs","size","entries","Size","Large","map","entry","to","requiredLine","optionalLine","endLineIcon","optionalLineIcon","disabled","showNotificationDot","variant","e","onClick"],"sources":["../../src/Tabs/VerticalTabs.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport Tabs from './Tabs';\r\nimport TabLink from './TabLink';\r\nimport { BaseProps } from '../icons';\r\nimport { Size } from '../types';\r\n\r\nexport interface VerticalTabEntry {\r\n  requiredLine: string;\r\n  optionalLine?: string;\r\n  optionalLineIcon?: React.ReactNode;\r\n  endLineIcon?: React.ReactNode;\r\n  to: string;\r\n  disabled?: boolean;\r\n  onClick?: (e: React.MouseEvent) => void;\r\n  showNotificationDot?: boolean;\r\n  variant?: 'critical' | 'positive';\r\n}\r\ninterface VerticalTabsProps {\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  entries: VerticalTabEntry[];\r\n}\r\n\r\nconst VerticalTabs = ({ size, entries }: VerticalTabsProps) => {\r\n  return (\r\n    <Tabs size={size ?? Size.Large}>\r\n      {entries?.map((entry: VerticalTabEntry) => (\r\n        <TabLink\r\n          key={entry.to}\r\n          to={entry.to}\r\n          requiredLine={entry.requiredLine}\r\n          optionalLine={entry.optionalLine}\r\n          endLineIcon={entry.endLineIcon}\r\n          OptionalLineIcon={entry.optionalLineIcon}\r\n          disabled={entry.disabled}\r\n          showNotificationDot={entry.showNotificationDot}\r\n          size={size}\r\n          variant={entry.variant}\r\n          onLinkClick={(e) => {\r\n            if (entry.onClick) {\r\n              entry.onClick(e);\r\n            }\r\n          }}/>\r\n      ))}\r\n    </Tabs>\r\n  );\r\n};\r\n\r\nexport default VerticalTabs;\r\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AAEA;AAAgC;AAAA;AAAA;AAkBhC,IAAMA,YAAY,GAAG,SAAfA,YAAY,OAA6C;EAAA,IAAvCC,IAAI,QAAJA,IAAI;IAAEC,OAAO,QAAPA,OAAO;EACnC,oBACE,qBAAC,aAAI;IAAC,IAAI,EAAED,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAIE,WAAI,CAACC,KAAM;IAAA,UAC5BF,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEG,GAAG,CAAC,UAACC,KAAuB;MAAA,oBACpC,qBAAC,gBAAO;QAEN,EAAE,EAAEA,KAAK,CAACC,EAAG;QACb,YAAY,EAAED,KAAK,CAACE,YAAa;QACjC,YAAY,EAAEF,KAAK,CAACG,YAAa;QACjC,WAAW,EAAEH,KAAK,CAACI,WAAY;QAC/B,gBAAgB,EAAEJ,KAAK,CAACK,gBAAiB;QACzC,QAAQ,EAAEL,KAAK,CAACM,QAAS;QACzB,mBAAmB,EAAEN,KAAK,CAACO,mBAAoB;QAC/C,IAAI,EAAEZ,IAAK;QACX,OAAO,EAAEK,KAAK,CAACQ,OAAQ;QACvB,WAAW,EAAE,qBAACC,CAAC,EAAK;UAClB,IAAIT,KAAK,CAACU,OAAO,EAAE;YACjBV,KAAK,CAACU,OAAO,CAACD,CAAC,CAAC;UAClB;QACF;MAAE,GAdGT,KAAK,CAACC,EAAE,CAcT;IAAA,CACP;EAAC,EACG;AAEX,CAAC;AAAC;EA1BAL,OAAO;IAZPM,YAAY;IACZC,YAAY;IACZE,gBAAgB;IAChBD,WAAW;IACXH,EAAE;IACFK,QAAQ;IACRI,OAAO;IACPH,mBAAmB;IACnBC,OAAO,4BAAG,UAAU,EAAG,UAAU;EAAA;AAAA;AAAA,eAgCpBd,YAAY;AAAA"}

package/dist/Tabs/VerticalTabs.d.ts

@@ -1,19 +1,19 @@
-import * as React from 'react';
-import { Size } from '../types';
-export interface VerticalTabEntry {
-    requiredLine: string;
-    optionalLine?: string;
-    optionalLineIcon?: React.ReactNode;
-    endLineIcon?: React.ReactNode;
-    to: string;
-    disabled?: boolean;
-    onClick?: (e: React.MouseEvent) => void;
-    showNotificationDot?: boolean;
-    variant?: 'critical' | 'positive';
-}
-interface VerticalTabsProps {
-    size?: Size.Small | Size.Medium | Size.Large;
-    entries: VerticalTabEntry[];
-}
-declare const VerticalTabs: ({ size, entries }: VerticalTabsProps) => JSX.Element;
-export default VerticalTabs;
+import * as React from 'react';
+import { Size } from '../types';
+export interface VerticalTabEntry {
+    requiredLine: string;
+    optionalLine?: string;
+    optionalLineIcon?: React.ReactNode;
+    endLineIcon?: React.ReactNode;
+    to: string;
+    disabled?: boolean;
+    onClick?: (e: React.MouseEvent) => void;
+    showNotificationDot?: boolean;
+    variant?: 'critical' | 'positive';
+}
+interface VerticalTabsProps {
+    size?: Size.Small | Size.Medium | Size.Large;
+    entries: VerticalTabEntry[];
+}
+declare const VerticalTabs: ({ size, entries }: VerticalTabsProps) => JSX.Element;
+export default VerticalTabs;

package/dist/Tabs/VerticalTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"VerticalTabs.js","names":["React","Tabs","TabLink","Size","VerticalTabs","size","entries","Large","map","entry","to","requiredLine","optionalLine","endLineIcon","optionalLineIcon","disabled","showNotificationDot","variant","e","onClick"],"sources":["../../src/Tabs/VerticalTabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport Tabs from './Tabs';\nimport TabLink from './TabLink';\nimport { BaseProps } from '../icons';\nimport { Size } from '../types';\n\nexport interface VerticalTabEntry {\n  requiredLine: string;\n  optionalLine?: string;\n  optionalLineIcon?: React.ReactNode;\n  endLineIcon?: React.ReactNode;\n  to: string;\n  disabled?: boolean;\n  onClick?: (e: React.MouseEvent) => void;\n  showNotificationDot?: boolean;\n  variant?: 'critical' | 'positive';\n}\ninterface VerticalTabsProps {\n  size?: Size.Small | Size.Medium | Size.Large;\n  entries: VerticalTabEntry[];\n}\n\nconst VerticalTabs = ({ size, entries }: VerticalTabsProps) => {\n  return (\n    <Tabs size={size ?? Size.Large}>\n      {entries?.map((entry: VerticalTabEntry) => (\n        <TabLink\n          key={entry.to}\n          to={entry.to}\n          requiredLine={entry.requiredLine}\n          optionalLine={entry.optionalLine}\n          endLineIcon={entry.endLineIcon}\n          OptionalLineIcon={entry.optionalLineIcon}\n          disabled={entry.disabled}\n          showNotificationDot={entry.showNotificationDot}\n          size={size}\n          variant={entry.variant}\n          onLinkClick={(e) => {\n            if (entry.onClick) {\n              entry.onClick(e);\n            }\n          }}/>\n      ))}\n    </Tabs>\n  );\n};\n\nexport default VerticalTabs;\n"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,IAAI,MAAM,QAAQ;AACzB,OAAOC,OAAO,MAAM,WAAW;AAE/B,SAASC,IAAI,QAAQ,UAAU;AAAC;AAkBhC,IAAMC,YAAY,GAAG,SAAfA,YAAY,OAA6C;EAAA,IAAvCC,IAAI,QAAJA,IAAI;IAAEC,OAAO,QAAPA,OAAO;EACnC,oBACE,KAAC,IAAI;IAAC,IAAI,EAAED,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAIF,IAAI,CAACI,KAAM;IAAA,UAC5BD,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEE,GAAG,CAAC,UAACC,KAAuB;MAAA,oBACpC,KAAC,OAAO;QAEN,EAAE,EAAEA,KAAK,CAACC,EAAG;QACb,YAAY,EAAED,KAAK,CAACE,YAAa;QACjC,YAAY,EAAEF,KAAK,CAACG,YAAa;QACjC,WAAW,EAAEH,KAAK,CAACI,WAAY;QAC/B,gBAAgB,EAAEJ,KAAK,CAACK,gBAAiB;QACzC,QAAQ,EAAEL,KAAK,CAACM,QAAS;QACzB,mBAAmB,EAAEN,KAAK,CAACO,mBAAoB;QAC/C,IAAI,EAAEX,IAAK;QACX,OAAO,EAAEI,KAAK,CAACQ,OAAQ;QACvB,WAAW,EAAE,qBAACC,CAAC,EAAK;UAClB,IAAIT,KAAK,CAACU,OAAO,EAAE;YACjBV,KAAK,CAACU,OAAO,CAACD,CAAC,CAAC;UAClB;QACF;MAAE,GAdGT,KAAK,CAACC,EAAE,CAcT;IAAA,CACP;EAAC,EACG;AAEX,CAAC;AAAC;EA1BAJ,OAAO;IAZPK,YAAY;IACZC,YAAY;IACZE,gBAAgB;IAChBD,WAAW;IACXH,EAAE;IACFK,QAAQ;IACRI,OAAO;IACPH,mBAAmB;IACnBC,OAAO,aAAG,UAAU,EAAG,UAAU;EAAA;AAAA;AAgCnC,eAAeb,YAAY"}
+{"version":3,"file":"VerticalTabs.js","names":["React","Tabs","TabLink","Size","VerticalTabs","size","entries","Large","map","entry","to","requiredLine","optionalLine","endLineIcon","optionalLineIcon","disabled","showNotificationDot","variant","e","onClick"],"sources":["../../src/Tabs/VerticalTabs.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport Tabs from './Tabs';\r\nimport TabLink from './TabLink';\r\nimport { BaseProps } from '../icons';\r\nimport { Size } from '../types';\r\n\r\nexport interface VerticalTabEntry {\r\n  requiredLine: string;\r\n  optionalLine?: string;\r\n  optionalLineIcon?: React.ReactNode;\r\n  endLineIcon?: React.ReactNode;\r\n  to: string;\r\n  disabled?: boolean;\r\n  onClick?: (e: React.MouseEvent) => void;\r\n  showNotificationDot?: boolean;\r\n  variant?: 'critical' | 'positive';\r\n}\r\ninterface VerticalTabsProps {\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  entries: VerticalTabEntry[];\r\n}\r\n\r\nconst VerticalTabs = ({ size, entries }: VerticalTabsProps) => {\r\n  return (\r\n    <Tabs size={size ?? Size.Large}>\r\n      {entries?.map((entry: VerticalTabEntry) => (\r\n        <TabLink\r\n          key={entry.to}\r\n          to={entry.to}\r\n          requiredLine={entry.requiredLine}\r\n          optionalLine={entry.optionalLine}\r\n          endLineIcon={entry.endLineIcon}\r\n          OptionalLineIcon={entry.optionalLineIcon}\r\n          disabled={entry.disabled}\r\n          showNotificationDot={entry.showNotificationDot}\r\n          size={size}\r\n          variant={entry.variant}\r\n          onLinkClick={(e) => {\r\n            if (entry.onClick) {\r\n              entry.onClick(e);\r\n            }\r\n          }}/>\r\n      ))}\r\n    </Tabs>\r\n  );\r\n};\r\n\r\nexport default VerticalTabs;\r\n"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,IAAI,MAAM,QAAQ;AACzB,OAAOC,OAAO,MAAM,WAAW;AAE/B,SAASC,IAAI,QAAQ,UAAU;AAAC;AAkBhC,IAAMC,YAAY,GAAG,SAAfA,YAAY,OAA6C;EAAA,IAAvCC,IAAI,QAAJA,IAAI;IAAEC,OAAO,QAAPA,OAAO;EACnC,oBACE,KAAC,IAAI;IAAC,IAAI,EAAED,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAIF,IAAI,CAACI,KAAM;IAAA,UAC5BD,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEE,GAAG,CAAC,UAACC,KAAuB;MAAA,oBACpC,KAAC,OAAO;QAEN,EAAE,EAAEA,KAAK,CAACC,EAAG;QACb,YAAY,EAAED,KAAK,CAACE,YAAa;QACjC,YAAY,EAAEF,KAAK,CAACG,YAAa;QACjC,WAAW,EAAEH,KAAK,CAACI,WAAY;QAC/B,gBAAgB,EAAEJ,KAAK,CAACK,gBAAiB;QACzC,QAAQ,EAAEL,KAAK,CAACM,QAAS;QACzB,mBAAmB,EAAEN,KAAK,CAACO,mBAAoB;QAC/C,IAAI,EAAEX,IAAK;QACX,OAAO,EAAEI,KAAK,CAACQ,OAAQ;QACvB,WAAW,EAAE,qBAACC,CAAC,EAAK;UAClB,IAAIT,KAAK,CAACU,OAAO,EAAE;YACjBV,KAAK,CAACU,OAAO,CAACD,CAAC,CAAC;UAClB;QACF;MAAE,GAdGT,KAAK,CAACC,EAAE,CAcT;IAAA,CACP;EAAC,EACG;AAEX,CAAC;AAAC;EA1BAJ,OAAO;IAZPK,YAAY;IACZC,YAAY;IACZE,gBAAgB;IAChBD,WAAW;IACXH,EAAE;IACFK,QAAQ;IACRI,OAAO;IACPH,mBAAmB;IACnBC,OAAO,aAAG,UAAU,EAAG,UAAU;EAAA;AAAA;AAgCnC,eAAeb,YAAY"}

package/dist/Tabs/__tests__/TabLink.tests.d.ts

@@ -1 +1 @@
-import 'jest-styled-components';
+import 'jest-styled-components';

package/dist/Tabs/__tests__/Tablist.tests.d.ts

@@ -1,2 +1,2 @@
-import 'jest-styled-components';
-import '@testing-library/jest-dom/extend-expect';
+import 'jest-styled-components';
+import '@testing-library/jest-dom/extend-expect';

package/dist/Tabs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":[],"sources":["../../src/Tabs/index.ts"],"sourcesContent":["import VerticalTabs from './VerticalTabs';\nimport HorizontalTabs from './HorizontalTabs';\n\nexport type {VerticalTabEntry} from './VerticalTabs'\nexport type {HorizontalTab} from './HorizontalTabs'\n\nexport { VerticalTabs, HorizontalTabs };\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AACA"}
+{"version":3,"file":"index.cjs","names":[],"sources":["../../src/Tabs/index.ts"],"sourcesContent":["import VerticalTabs from './VerticalTabs';\r\nimport HorizontalTabs from './HorizontalTabs';\r\n\r\nexport type {VerticalTabEntry} from './VerticalTabs'\r\nexport type {HorizontalTab} from './HorizontalTabs'\r\n\r\nexport { VerticalTabs, HorizontalTabs };\r\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AACA"}

package/dist/Tabs/index.d.ts

@@ -1,5 +1,5 @@
-import VerticalTabs from './VerticalTabs';
-import HorizontalTabs from './HorizontalTabs';
-export type { VerticalTabEntry } from './VerticalTabs';
-export type { HorizontalTab } from './HorizontalTabs';
-export { VerticalTabs, HorizontalTabs };
+import VerticalTabs from './VerticalTabs';
+import HorizontalTabs from './HorizontalTabs';
+export type { VerticalTabEntry } from './VerticalTabs';
+export type { HorizontalTab } from './HorizontalTabs';
+export { VerticalTabs, HorizontalTabs };

package/dist/Tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["VerticalTabs","HorizontalTabs"],"sources":["../../src/Tabs/index.ts"],"sourcesContent":["import VerticalTabs from './VerticalTabs';\nimport HorizontalTabs from './HorizontalTabs';\n\nexport type {VerticalTabEntry} from './VerticalTabs'\nexport type {HorizontalTab} from './HorizontalTabs'\n\nexport { VerticalTabs, HorizontalTabs };\n"],"mappings":"AAAA,OAAOA,YAAY,MAAM,gBAAgB;AACzC,OAAOC,cAAc,MAAM,kBAAkB;AAK7C,SAASD,YAAY,EAAEC,cAAc"}
+{"version":3,"file":"index.js","names":["VerticalTabs","HorizontalTabs"],"sources":["../../src/Tabs/index.ts"],"sourcesContent":["import VerticalTabs from './VerticalTabs';\r\nimport HorizontalTabs from './HorizontalTabs';\r\n\r\nexport type {VerticalTabEntry} from './VerticalTabs'\r\nexport type {HorizontalTab} from './HorizontalTabs'\r\n\r\nexport { VerticalTabs, HorizontalTabs };\r\n"],"mappings":"AAAA,OAAOA,YAAY,MAAM,gBAAgB;AACzC,OAAOC,cAAc,MAAM,kBAAkB;AAK7C,SAASD,YAAY,EAAEC,cAAc"}

package/dist/Tag/Tag.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.cjs","names":["Container","styled","div","props","isLabelPresent","COLORS","neutral_100","neutral_600","correct_100","correct_600","warning_100","warning_600","critical_100","critical_600","accent1_100","accent1_600","accent2_100","accent2_600","IconContainer","TextContainer","ComponentXSStyling","ComponentTextStyle","Bold","Tag","label","icon","variant","className","rest","cls"],"sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\n\nconst Container = styled.div<{variant: TagVariants, isLabelPresent: boolean}>`\n  display: flex;\n  padding: 4px;\n  height: 24px;\n  width: calc(100%);\n  max-width: fit-content;\n  align-items: center;\n  justify-content: center;\n  min-width: ${props=>props.isLabelPresent ? '64px' : ''};\n  border-radius: 2px;\n  box-sizing: border-box;\n\n  &.neutral {\n    background-color: ${COLORS.neutral_100};\n    color: ${COLORS.neutral_600};\n  }\n  &.positive {\n    background-color: ${COLORS.correct_100};\n    color: ${COLORS.correct_600};\n  }\n  &.warning {\n    background-color: ${COLORS.warning_100};\n    color: ${COLORS.warning_600};\n  }\n  &.critical {\n    background-color: ${COLORS.critical_100};\n    color: ${COLORS.critical_600};\n  }\n  &.accent1 {\n    background-color: ${COLORS.accent1_100};\n    color: ${COLORS.accent1_600};\n  }\n  &.accent2 {\n    background-color: ${COLORS.accent2_100};\n    color: ${COLORS.accent2_600};\n  }\n\n`;\n\nconst IconContainer = styled.div<{variant: TagVariants}>`\n  display: flex;\n  width: 16px;\n  height: 16px;\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n`;\n\nconst TextContainer = styled.div<{variant: TagVariants, icon: React.ReactNode}>`\n  height: 16px;\n  padding: 0 4px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;  \n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n`;\n\n\nexport type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\n\nexport type TagProps = React.HTMLAttributes<HTMLDivElement> & {\n  label?: string;\n  icon?: React.ReactNode;\n  variant?: TagVariants;\n}\n\nconst Tag: React.FunctionComponent<TagProps> = ({label, icon, variant='neutral', className, ...rest}) => {\n  const cls = `${className ?? ''} ${variant}`;\n  return (   \n    <Container variant={variant} isLabelPresent={!!label} className={cls} {...rest}>\n      {icon && <IconContainer variant={variant} data-testid={'iconContainer'}>\n          {icon}\n        </IconContainer>\n      }\n      {label && <TextContainer variant={variant} icon={icon}>\n          {label}\n        </TextContainer>\n      }\n    </Container>\n  );\n};\n\nexport default Tag;\n"],"mappings":";;;;;;;;;;;;AAAA;AACA;AACA;AAAoE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEpE,IAAMA,SAAS,GAAGC,yBAAM,CAACC,GAAG,6sBAQb,UAAAC,KAAK;EAAA,OAAEA,KAAK,CAACC,cAAc,GAAG,MAAM,GAAG,EAAE;AAAA,GAKhCC,QAAM,CAACC,WAAW,EAC7BD,QAAM,CAACE,WAAW,EAGPF,QAAM,CAACG,WAAW,EAC7BH,QAAM,CAACI,WAAW,EAGPJ,QAAM,CAACK,WAAW,EAC7BL,QAAM,CAACM,WAAW,EAGPN,QAAM,CAACO,YAAY,EAC9BP,QAAM,CAACQ,YAAY,EAGRR,QAAM,CAACS,WAAW,EAC7BT,QAAM,CAACU,WAAW,EAGPV,QAAM,CAACW,WAAW,EAC7BX,QAAM,CAACY,WAAW,CAG9B;AAED,IAAMC,aAAa,GAAGjB,yBAAM,CAACC,GAAG,6LAQ/B;AAED,IAAMiB,aAAa,GAAGlB,yBAAM,CAACC,GAAG,+MAM5B,IAAAkB,oBAAkB,EAACC,oBAAkB,CAACC,IAAI,EAAE,IAAI,CAAC,CACpD;AAWD,IAAMC,GAAsC,GAAG,SAAzCA,GAAsC,OAA6D;EAAA,IAAxDC,KAAK,QAALA,KAAK;IAAEC,IAAI,QAAJA,IAAI;IAAA,oBAAEC,OAAO;IAAPA,OAAO,6BAAC,SAAS;IAAEC,SAAS,QAATA,SAAS;IAAKC,IAAI;EACjG,IAAMC,GAAG,aAAMF,SAAS,aAATA,SAAS,cAATA,SAAS,GAAI,EAAE,cAAID,OAAO,CAAE;EAC3C,oBACE,sBAAC,SAAS;IAAC,OAAO,EAAEA,OAAQ;IAAC,cAAc,EAAE,CAAC,CAACF,KAAM;IAAC,SAAS,EAAEK;EAAI,GAAKD,IAAI;IAAA,WAC3EH,IAAI,iBAAI,qBAAC,aAAa;MAAC,OAAO,EAAEC,OAAQ;MAAC,eAAa,eAAgB;MAAA,UAClED;IAAI,EACS,EAEjBD,KAAK,iBAAI,qBAAC,aAAa;MAAC,OAAO,EAAEE,OAAQ;MAAC,IAAI,EAAED,IAAK;MAAA,UACjDD;IAAK,EACQ;EAAA,GAER;AAEhB,CAAC;AAAC;EAnBAA,KAAK;EACLC,IAAI;EACJC,OAAO,4BALiB,SAAS,EAAG,UAAU,EAAG,SAAS,EAAG,UAAU,EAAG,SAAS,EAAG,SAAS;AAAA;AAAA,eAwBlFH,GAAG;AAAA"}
+{"version":3,"file":"Tag.cjs","names":["Container","styled","div","props","isLabelPresent","COLORS","neutral_100","neutral_600","correct_100","correct_600","warning_100","warning_600","critical_100","critical_600","accent1_100","accent1_600","accent2_100","accent2_600","IconContainer","TextContainer","ComponentXSStyling","ComponentTextStyle","Bold","Tag","label","icon","variant","className","rest","cls"],"sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\r\n\r\nconst Container = styled.div<{variant: TagVariants, isLabelPresent: boolean}>`\r\n  display: flex;\r\n  padding: 4px;\r\n  height: 24px;\r\n  width: calc(100%);\r\n  max-width: fit-content;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-width: ${props=>props.isLabelPresent ? '64px' : ''};\r\n  border-radius: 2px;\r\n  box-sizing: border-box;\r\n\r\n  &.neutral {\r\n    background-color: ${COLORS.neutral_100};\r\n    color: ${COLORS.neutral_600};\r\n  }\r\n  &.positive {\r\n    background-color: ${COLORS.correct_100};\r\n    color: ${COLORS.correct_600};\r\n  }\r\n  &.warning {\r\n    background-color: ${COLORS.warning_100};\r\n    color: ${COLORS.warning_600};\r\n  }\r\n  &.critical {\r\n    background-color: ${COLORS.critical_100};\r\n    color: ${COLORS.critical_600};\r\n  }\r\n  &.accent1 {\r\n    background-color: ${COLORS.accent1_100};\r\n    color: ${COLORS.accent1_600};\r\n  }\r\n  &.accent2 {\r\n    background-color: ${COLORS.accent2_100};\r\n    color: ${COLORS.accent2_600};\r\n  }\r\n\r\n`;\r\n\r\nconst IconContainer = styled.div<{variant: TagVariants}>`\r\n  display: flex;\r\n  width: 16px;\r\n  height: 16px;\r\n  svg {\r\n    width: 16px;\r\n    height: 16px;\r\n  }\r\n`;\r\n\r\nconst TextContainer = styled.div<{variant: TagVariants, icon: React.ReactNode}>`\r\n  height: 16px;\r\n  padding: 0 4px;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n  overflow: hidden;  \r\n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\r\n`;\r\n\r\n\r\nexport type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\r\n\r\nexport type TagProps = React.HTMLAttributes<HTMLDivElement> & {\r\n  label?: string;\r\n  icon?: React.ReactNode;\r\n  variant?: TagVariants;\r\n}\r\n\r\nconst Tag: React.FunctionComponent<TagProps> = ({label, icon, variant='neutral', className, ...rest}) => {\r\n  const cls = `${className ?? ''} ${variant}`;\r\n  return (   \r\n    <Container variant={variant} isLabelPresent={!!label} className={cls} {...rest}>\r\n      {icon && <IconContainer variant={variant} data-testid={'iconContainer'}>\r\n          {icon}\r\n        </IconContainer>\r\n      }\r\n      {label && <TextContainer variant={variant} icon={icon}>\r\n          {label}\r\n        </TextContainer>\r\n      }\r\n    </Container>\r\n  );\r\n};\r\n\r\nexport default Tag;\r\n"],"mappings":";;;;;;;;;;;;AAAA;AACA;AACA;AAAoE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEpE,IAAMA,SAAS,GAAGC,yBAAM,CAACC,GAAG,6sBAQb,UAAAC,KAAK;EAAA,OAAEA,KAAK,CAACC,cAAc,GAAG,MAAM,GAAG,EAAE;AAAA,GAKhCC,QAAM,CAACC,WAAW,EAC7BD,QAAM,CAACE,WAAW,EAGPF,QAAM,CAACG,WAAW,EAC7BH,QAAM,CAACI,WAAW,EAGPJ,QAAM,CAACK,WAAW,EAC7BL,QAAM,CAACM,WAAW,EAGPN,QAAM,CAACO,YAAY,EAC9BP,QAAM,CAACQ,YAAY,EAGRR,QAAM,CAACS,WAAW,EAC7BT,QAAM,CAACU,WAAW,EAGPV,QAAM,CAACW,WAAW,EAC7BX,QAAM,CAACY,WAAW,CAG9B;AAED,IAAMC,aAAa,GAAGjB,yBAAM,CAACC,GAAG,6LAQ/B;AAED,IAAMiB,aAAa,GAAGlB,yBAAM,CAACC,GAAG,+MAM5B,IAAAkB,oBAAkB,EAACC,oBAAkB,CAACC,IAAI,EAAE,IAAI,CAAC,CACpD;AAWD,IAAMC,GAAsC,GAAG,SAAzCA,GAAsC,OAA6D;EAAA,IAAxDC,KAAK,QAALA,KAAK;IAAEC,IAAI,QAAJA,IAAI;IAAA,oBAAEC,OAAO;IAAPA,OAAO,6BAAC,SAAS;IAAEC,SAAS,QAATA,SAAS;IAAKC,IAAI;EACjG,IAAMC,GAAG,aAAMF,SAAS,aAATA,SAAS,cAATA,SAAS,GAAI,EAAE,cAAID,OAAO,CAAE;EAC3C,oBACE,sBAAC,SAAS;IAAC,OAAO,EAAEA,OAAQ;IAAC,cAAc,EAAE,CAAC,CAACF,KAAM;IAAC,SAAS,EAAEK;EAAI,GAAKD,IAAI;IAAA,WAC3EH,IAAI,iBAAI,qBAAC,aAAa;MAAC,OAAO,EAAEC,OAAQ;MAAC,eAAa,eAAgB;MAAA,UAClED;IAAI,EACS,EAEjBD,KAAK,iBAAI,qBAAC,aAAa;MAAC,OAAO,EAAEE,OAAQ;MAAC,IAAI,EAAED,IAAK;MAAA,UACjDD;IAAK,EACQ;EAAA,GAER;AAEhB,CAAC;AAAC;EAnBAA,KAAK;EACLC,IAAI;EACJC,OAAO,4BALiB,SAAS,EAAG,UAAU,EAAG,SAAS,EAAG,UAAU,EAAG,SAAS,EAAG,SAAS;AAAA;AAAA,eAwBlFH,GAAG;AAAA"}

package/dist/Tag/Tag.d.ts

@@ -1,9 +1,9 @@
-import * as React from 'react';
-export type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';
-export type TagProps = React.HTMLAttributes<HTMLDivElement> & {
-    label?: string;
-    icon?: React.ReactNode;
-    variant?: TagVariants;
-};
-declare const Tag: React.FunctionComponent<TagProps>;
-export default Tag;
+import * as React from 'react';
+export type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';
+export type TagProps = React.HTMLAttributes<HTMLDivElement> & {
+    label?: string;
+    icon?: React.ReactNode;
+    variant?: TagVariants;
+};
+declare const Tag: React.FunctionComponent<TagProps>;
+export default Tag;

package/dist/Tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","names":["React","styled","COLORS","ComponentTextStyle","ComponentXSStyling","Container","div","props","isLabelPresent","neutral_100","neutral_600","correct_100","correct_600","warning_100","warning_600","critical_100","critical_600","accent1_100","accent1_600","accent2_100","accent2_600","IconContainer","TextContainer","Bold","Tag","label","icon","variant","className","rest","cls"],"sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\n\nconst Container = styled.div<{variant: TagVariants, isLabelPresent: boolean}>`\n  display: flex;\n  padding: 4px;\n  height: 24px;\n  width: calc(100%);\n  max-width: fit-content;\n  align-items: center;\n  justify-content: center;\n  min-width: ${props=>props.isLabelPresent ? '64px' : ''};\n  border-radius: 2px;\n  box-sizing: border-box;\n\n  &.neutral {\n    background-color: ${COLORS.neutral_100};\n    color: ${COLORS.neutral_600};\n  }\n  &.positive {\n    background-color: ${COLORS.correct_100};\n    color: ${COLORS.correct_600};\n  }\n  &.warning {\n    background-color: ${COLORS.warning_100};\n    color: ${COLORS.warning_600};\n  }\n  &.critical {\n    background-color: ${COLORS.critical_100};\n    color: ${COLORS.critical_600};\n  }\n  &.accent1 {\n    background-color: ${COLORS.accent1_100};\n    color: ${COLORS.accent1_600};\n  }\n  &.accent2 {\n    background-color: ${COLORS.accent2_100};\n    color: ${COLORS.accent2_600};\n  }\n\n`;\n\nconst IconContainer = styled.div<{variant: TagVariants}>`\n  display: flex;\n  width: 16px;\n  height: 16px;\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n`;\n\nconst TextContainer = styled.div<{variant: TagVariants, icon: React.ReactNode}>`\n  height: 16px;\n  padding: 0 4px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;  \n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n`;\n\n\nexport type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\n\nexport type TagProps = React.HTMLAttributes<HTMLDivElement> & {\n  label?: string;\n  icon?: React.ReactNode;\n  variant?: TagVariants;\n}\n\nconst Tag: React.FunctionComponent<TagProps> = ({label, icon, variant='neutral', className, ...rest}) => {\n  const cls = `${className ?? ''} ${variant}`;\n  return (   \n    <Container variant={variant} isLabelPresent={!!label} className={cls} {...rest}>\n      {icon && <IconContainer variant={variant} data-testid={'iconContainer'}>\n          {icon}\n        </IconContainer>\n      }\n      {label && <TextContainer variant={variant} icon={icon}>\n          {label}\n        </TextContainer>\n      }\n    </Container>\n  );\n};\n\nexport default Tag;\n"],"mappings":";;;;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,MAAM,EAAEC,kBAAkB,EAAEC,kBAAkB,QAAQ,IAAI;AAAC;AAAA;AAEpE,IAAMC,SAAS,GAAGJ,MAAM,CAACK,GAAG,+rBAQb,UAAAC,KAAK;EAAA,OAAEA,KAAK,CAACC,cAAc,GAAG,MAAM,GAAG,EAAE;AAAA,GAKhCN,MAAM,CAACO,WAAW,EAC7BP,MAAM,CAACQ,WAAW,EAGPR,MAAM,CAACS,WAAW,EAC7BT,MAAM,CAACU,WAAW,EAGPV,MAAM,CAACW,WAAW,EAC7BX,MAAM,CAACY,WAAW,EAGPZ,MAAM,CAACa,YAAY,EAC9Bb,MAAM,CAACc,YAAY,EAGRd,MAAM,CAACe,WAAW,EAC7Bf,MAAM,CAACgB,WAAW,EAGPhB,MAAM,CAACiB,WAAW,EAC7BjB,MAAM,CAACkB,WAAW,CAG9B;AAED,IAAMC,aAAa,GAAGpB,MAAM,CAACK,GAAG,+KAQ/B;AAED,IAAMgB,aAAa,GAAGrB,MAAM,CAACK,GAAG,iMAM5BF,kBAAkB,CAACD,kBAAkB,CAACoB,IAAI,EAAE,IAAI,CAAC,CACpD;AAWD,IAAMC,GAAsC,GAAG,SAAzCA,GAAsC,OAA6D;EAAA,IAAxDC,KAAK,QAALA,KAAK;IAAEC,IAAI,QAAJA,IAAI;IAAA,oBAAEC,OAAO;IAAPA,OAAO,6BAAC,SAAS;IAAEC,SAAS,QAATA,SAAS;IAAKC,IAAI;EACjG,IAAMC,GAAG,aAAMF,SAAS,aAATA,SAAS,cAATA,SAAS,GAAI,EAAE,cAAID,OAAO,CAAE;EAC3C,oBACE,MAAC,SAAS;IAAC,OAAO,EAAEA,OAAQ;IAAC,cAAc,EAAE,CAAC,CAACF,KAAM;IAAC,SAAS,EAAEK;EAAI,GAAKD,IAAI;IAAA,WAC3EH,IAAI,iBAAI,KAAC,aAAa;MAAC,OAAO,EAAEC,OAAQ;MAAC,eAAa,eAAgB;MAAA,UAClED;IAAI,EACS,EAEjBD,KAAK,iBAAI,KAAC,aAAa;MAAC,OAAO,EAAEE,OAAQ;MAAC,IAAI,EAAED,IAAK;MAAA,UACjDD;IAAK,EACQ;EAAA,GAER;AAEhB,CAAC;AAAC;EAnBAA,KAAK;EACLC,IAAI;EACJC,OAAO,aALiB,SAAS,EAAG,UAAU,EAAG,SAAS,EAAG,UAAU,EAAG,SAAS,EAAG,SAAS;AAAA;AAwBjG,eAAeH,GAAG"}
+{"version":3,"file":"Tag.js","names":["React","styled","COLORS","ComponentTextStyle","ComponentXSStyling","Container","div","props","isLabelPresent","neutral_100","neutral_600","correct_100","correct_600","warning_100","warning_600","critical_100","critical_600","accent1_100","accent1_600","accent2_100","accent2_600","IconContainer","TextContainer","Bold","Tag","label","icon","variant","className","rest","cls"],"sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\r\n\r\nconst Container = styled.div<{variant: TagVariants, isLabelPresent: boolean}>`\r\n  display: flex;\r\n  padding: 4px;\r\n  height: 24px;\r\n  width: calc(100%);\r\n  max-width: fit-content;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-width: ${props=>props.isLabelPresent ? '64px' : ''};\r\n  border-radius: 2px;\r\n  box-sizing: border-box;\r\n\r\n  &.neutral {\r\n    background-color: ${COLORS.neutral_100};\r\n    color: ${COLORS.neutral_600};\r\n  }\r\n  &.positive {\r\n    background-color: ${COLORS.correct_100};\r\n    color: ${COLORS.correct_600};\r\n  }\r\n  &.warning {\r\n    background-color: ${COLORS.warning_100};\r\n    color: ${COLORS.warning_600};\r\n  }\r\n  &.critical {\r\n    background-color: ${COLORS.critical_100};\r\n    color: ${COLORS.critical_600};\r\n  }\r\n  &.accent1 {\r\n    background-color: ${COLORS.accent1_100};\r\n    color: ${COLORS.accent1_600};\r\n  }\r\n  &.accent2 {\r\n    background-color: ${COLORS.accent2_100};\r\n    color: ${COLORS.accent2_600};\r\n  }\r\n\r\n`;\r\n\r\nconst IconContainer = styled.div<{variant: TagVariants}>`\r\n  display: flex;\r\n  width: 16px;\r\n  height: 16px;\r\n  svg {\r\n    width: 16px;\r\n    height: 16px;\r\n  }\r\n`;\r\n\r\nconst TextContainer = styled.div<{variant: TagVariants, icon: React.ReactNode}>`\r\n  height: 16px;\r\n  padding: 0 4px;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n  overflow: hidden;  \r\n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\r\n`;\r\n\r\n\r\nexport type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\r\n\r\nexport type TagProps = React.HTMLAttributes<HTMLDivElement> & {\r\n  label?: string;\r\n  icon?: React.ReactNode;\r\n  variant?: TagVariants;\r\n}\r\n\r\nconst Tag: React.FunctionComponent<TagProps> = ({label, icon, variant='neutral', className, ...rest}) => {\r\n  const cls = `${className ?? ''} ${variant}`;\r\n  return (   \r\n    <Container variant={variant} isLabelPresent={!!label} className={cls} {...rest}>\r\n      {icon && <IconContainer variant={variant} data-testid={'iconContainer'}>\r\n          {icon}\r\n        </IconContainer>\r\n      }\r\n      {label && <TextContainer variant={variant} icon={icon}>\r\n          {label}\r\n        </TextContainer>\r\n      }\r\n    </Container>\r\n  );\r\n};\r\n\r\nexport default Tag;\r\n"],"mappings":";;;;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,MAAM,EAAEC,kBAAkB,EAAEC,kBAAkB,QAAQ,IAAI;AAAC;AAAA;AAEpE,IAAMC,SAAS,GAAGJ,MAAM,CAACK,GAAG,+rBAQb,UAAAC,KAAK;EAAA,OAAEA,KAAK,CAACC,cAAc,GAAG,MAAM,GAAG,EAAE;AAAA,GAKhCN,MAAM,CAACO,WAAW,EAC7BP,MAAM,CAACQ,WAAW,EAGPR,MAAM,CAACS,WAAW,EAC7BT,MAAM,CAACU,WAAW,EAGPV,MAAM,CAACW,WAAW,EAC7BX,MAAM,CAACY,WAAW,EAGPZ,MAAM,CAACa,YAAY,EAC9Bb,MAAM,CAACc,YAAY,EAGRd,MAAM,CAACe,WAAW,EAC7Bf,MAAM,CAACgB,WAAW,EAGPhB,MAAM,CAACiB,WAAW,EAC7BjB,MAAM,CAACkB,WAAW,CAG9B;AAED,IAAMC,aAAa,GAAGpB,MAAM,CAACK,GAAG,+KAQ/B;AAED,IAAMgB,aAAa,GAAGrB,MAAM,CAACK,GAAG,iMAM5BF,kBAAkB,CAACD,kBAAkB,CAACoB,IAAI,EAAE,IAAI,CAAC,CACpD;AAWD,IAAMC,GAAsC,GAAG,SAAzCA,GAAsC,OAA6D;EAAA,IAAxDC,KAAK,QAALA,KAAK;IAAEC,IAAI,QAAJA,IAAI;IAAA,oBAAEC,OAAO;IAAPA,OAAO,6BAAC,SAAS;IAAEC,SAAS,QAATA,SAAS;IAAKC,IAAI;EACjG,IAAMC,GAAG,aAAMF,SAAS,aAATA,SAAS,cAATA,SAAS,GAAI,EAAE,cAAID,OAAO,CAAE;EAC3C,oBACE,MAAC,SAAS;IAAC,OAAO,EAAEA,OAAQ;IAAC,cAAc,EAAE,CAAC,CAACF,KAAM;IAAC,SAAS,EAAEK;EAAI,GAAKD,IAAI;IAAA,WAC3EH,IAAI,iBAAI,KAAC,aAAa;MAAC,OAAO,EAAEC,OAAQ;MAAC,eAAa,eAAgB;MAAA,UAClED;IAAI,EACS,EAEjBD,KAAK,iBAAI,KAAC,aAAa;MAAC,OAAO,EAAEE,OAAQ;MAAC,IAAI,EAAED,IAAK;MAAA,UACjDD;IAAK,EACQ;EAAA,GAER;AAEhB,CAAC;AAAC;EAnBAA,KAAK;EACLC,IAAI;EACJC,OAAO,aALiB,SAAS,EAAG,UAAU,EAAG,SAAS,EAAG,UAAU,EAAG,SAAS,EAAG,SAAS;AAAA;AAwBjG,eAAeH,GAAG"}

package/dist/Tag/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":[],"sources":["../../src/Tag/index.ts"],"sourcesContent":["export { default as Tag } from './Tag';\nexport type { TagVariants, TagProps } from './Tag';"],"mappings":";;;;;;;;;;;;AAAA"}
+{"version":3,"file":"index.cjs","names":[],"sources":["../../src/Tag/index.ts"],"sourcesContent":["export { default as Tag } from './Tag';\r\nexport type { TagVariants, TagProps } from './Tag';"],"mappings":";;;;;;;;;;;;AAAA"}

package/dist/Tag/index.d.ts

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

package/dist/Tag/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default","Tag"],"sources":["../../src/Tag/index.ts"],"sourcesContent":["export { default as Tag } from './Tag';\nexport type { TagVariants, TagProps } from './Tag';"],"mappings":"AAAA,SAASA,OAAO,IAAIC,GAAG,QAAQ,OAAO"}
+{"version":3,"file":"index.js","names":["default","Tag"],"sources":["../../src/Tag/index.ts"],"sourcesContent":["export { default as Tag } from './Tag';\r\nexport type { TagVariants, TagProps } from './Tag';"],"mappings":"AAAA,SAASA,OAAO,IAAIC,GAAG,QAAQ,OAAO"}

package/dist/Tile/Tile.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tile.cjs","names":["Wrapper","styled","div","COLORS","white","neutral_200","Tile","header","footer","size","Size","Medium","style","children","className","rest"],"sources":["../../src/Tile/Tile.tsx"],"sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport {TileProps} from './TileTypes';\nimport styled from 'styled-components';\nimport TileHeader from './TileHeader';\nimport TileFooter from './TileFooter';\nimport TileBody from './TileBody';\nimport {COLORS} from '../styles';\n\nconst Wrapper = styled.div`\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-flow: column;\n  flex-direction: column;\n  background: ${COLORS.white};\n  border-radius: 8px;\n  border: 1px solid ${COLORS.neutral_200};\n  box-sizing: border-box;\n`;\n\nconst Tile: React.FunctionComponent<TileProps> = ({\n                                                    header,\n                                                    footer,\n                                                    size = Size.Medium,\n                                                    style,\n                                                    children,\n                                                    className,\n                                                    ...rest\n                                                  }) => {\n\n  return (\n    <Wrapper style={style}\n             className={`${size} ${className || ''}`}\n             {...rest}>\n      {header && <TileHeader {...header} size={size}/>}\n      <TileBody size={size}>\n        {children}\n      </TileBody>\n      {footer && <TileFooter {...footer} size={size}/>}\n    </Wrapper>\n  )\n}\n\n\nexport default Tile;\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAEA;AACA;AACA;AACA;AACA;AAAiC;AAAA;AAAA;AAAA;AAAA;AAEjC,IAAMA,OAAO,GAAGC,yBAAM,CAACC,GAAG,4RAMVC,cAAM,CAACC,KAAK,EAEND,cAAM,CAACE,WAAW,CAEvC;AAED,IAAMC,IAAwC,GAAG,SAA3CA,IAAwC,OAQU;EAAA,IAPJC,MAAM,QAANA,MAAM;IACNC,MAAM,QAANA,MAAM;IAAA,iBACNC,IAAI;IAAJA,IAAI,0BAAGC,WAAI,CAACC,MAAM;IAClBC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,IAAI;EAGzD,oBACE,sBAAC,OAAO;IAAC,KAAK,EAAEH,KAAM;IACb,SAAS,YAAKH,IAAI,cAAIK,SAAS,IAAI,EAAE;EAAG,GACpCC,IAAI;IAAA,WACdR,MAAM,iBAAI,qBAAC,mBAAU,kCAAKA,MAAM;MAAE,IAAI,EAAEE;IAAK,GAAE,eAChD,qBAAC,iBAAQ;MAAC,IAAI,EAAEA,IAAK;MAAA,UAClBI;IAAQ,EACA,EACVL,MAAM,iBAAI,qBAAC,mBAAU,kCAAKA,MAAM;MAAE,IAAI,EAAEC;IAAK,GAAE;EAAA,GACxC;AAEd,CAAC;AAAA,eAGcH,IAAI;AAAA"}
+{"version":3,"file":"Tile.cjs","names":["Wrapper","styled","div","COLORS","white","neutral_200","Tile","header","footer","size","Size","Medium","style","children","className","rest"],"sources":["../../src/Tile/Tile.tsx"],"sourcesContent":["import React from 'react';\r\nimport {Size} from '../types';\r\nimport {TileProps} from './TileTypes';\r\nimport styled from 'styled-components';\r\nimport TileHeader from './TileHeader';\r\nimport TileFooter from './TileFooter';\r\nimport TileBody from './TileBody';\r\nimport {COLORS} from '../styles';\r\n\r\nconst Wrapper = styled.div`\r\n  width: 100%;\r\n  height: 100%;\r\n  display: flex;\r\n  flex-flow: column;\r\n  flex-direction: column;\r\n  background: ${COLORS.white};\r\n  border-radius: 8px;\r\n  border: 1px solid ${COLORS.neutral_200};\r\n  box-sizing: border-box;\r\n`;\r\n\r\nconst Tile: React.FunctionComponent<TileProps> = ({\r\n                                                    header,\r\n                                                    footer,\r\n                                                    size = Size.Medium,\r\n                                                    style,\r\n                                                    children,\r\n                                                    className,\r\n                                                    ...rest\r\n                                                  }) => {\r\n\r\n  return (\r\n    <Wrapper style={style}\r\n             className={`${size} ${className || ''}`}\r\n             {...rest}>\r\n      {header && <TileHeader {...header} size={size}/>}\r\n      <TileBody size={size}>\r\n        {children}\r\n      </TileBody>\r\n      {footer && <TileFooter {...footer} size={size}/>}\r\n    </Wrapper>\r\n  )\r\n}\r\n\r\n\r\nexport default Tile;\r\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAEA;AACA;AACA;AACA;AACA;AAAiC;AAAA;AAAA;AAAA;AAAA;AAEjC,IAAMA,OAAO,GAAGC,yBAAM,CAACC,GAAG,4RAMVC,cAAM,CAACC,KAAK,EAEND,cAAM,CAACE,WAAW,CAEvC;AAED,IAAMC,IAAwC,GAAG,SAA3CA,IAAwC,OAQU;EAAA,IAPJC,MAAM,QAANA,MAAM;IACNC,MAAM,QAANA,MAAM;IAAA,iBACNC,IAAI;IAAJA,IAAI,0BAAGC,WAAI,CAACC,MAAM;IAClBC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,IAAI;EAGzD,oBACE,sBAAC,OAAO;IAAC,KAAK,EAAEH,KAAM;IACb,SAAS,YAAKH,IAAI,cAAIK,SAAS,IAAI,EAAE;EAAG,GACpCC,IAAI;IAAA,WACdR,MAAM,iBAAI,qBAAC,mBAAU,kCAAKA,MAAM;MAAE,IAAI,EAAEE;IAAK,GAAE,eAChD,qBAAC,iBAAQ;MAAC,IAAI,EAAEA,IAAK;MAAA,UAClBI;IAAQ,EACA,EACVL,MAAM,iBAAI,qBAAC,mBAAU,kCAAKA,MAAM;MAAE,IAAI,EAAEC;IAAK,GAAE;EAAA,GACxC;AAEd,CAAC;AAAA,eAGcH,IAAI;AAAA"}

package/dist/Tile/Tile.d.ts

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

package/dist/Tile/Tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tile.js","names":["React","Size","styled","TileHeader","TileFooter","TileBody","COLORS","Wrapper","div","white","neutral_200","Tile","header","footer","size","Medium","style","children","className","rest"],"sources":["../../src/Tile/Tile.tsx"],"sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport {TileProps} from './TileTypes';\nimport styled from 'styled-components';\nimport TileHeader from './TileHeader';\nimport TileFooter from './TileFooter';\nimport TileBody from './TileBody';\nimport {COLORS} from '../styles';\n\nconst Wrapper = styled.div`\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-flow: column;\n  flex-direction: column;\n  background: ${COLORS.white};\n  border-radius: 8px;\n  border: 1px solid ${COLORS.neutral_200};\n  box-sizing: border-box;\n`;\n\nconst Tile: React.FunctionComponent<TileProps> = ({\n                                                    header,\n                                                    footer,\n                                                    size = Size.Medium,\n                                                    style,\n                                                    children,\n                                                    className,\n                                                    ...rest\n                                                  }) => {\n\n  return (\n    <Wrapper style={style}\n             className={`${size} ${className || ''}`}\n             {...rest}>\n      {header && <TileHeader {...header} size={size}/>}\n      <TileBody size={size}>\n        {children}\n      </TileBody>\n      {footer && <TileFooter {...footer} size={size}/>}\n    </Wrapper>\n  )\n}\n\n\nexport default Tile;\n"],"mappings":";;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAAQC,IAAI,QAAO,UAAU;AAE7B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,OAAOC,UAAU,MAAM,cAAc;AACrC,OAAOC,UAAU,MAAM,cAAc;AACrC,OAAOC,QAAQ,MAAM,YAAY;AACjC,SAAQC,MAAM,QAAO,WAAW;AAAC;AAAA;AAEjC,IAAMC,OAAO,GAAGL,MAAM,CAACM,GAAG,8QAMVF,MAAM,CAACG,KAAK,EAENH,MAAM,CAACI,WAAW,CAEvC;AAED,IAAMC,IAAwC,GAAG,SAA3CA,IAAwC,OAQU;EAAA,IAPJC,MAAM,QAANA,MAAM;IACNC,MAAM,QAANA,MAAM;IAAA,iBACNC,IAAI;IAAJA,IAAI,0BAAGb,IAAI,CAACc,MAAM;IAClBC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,IAAI;EAGzD,oBACE,MAAC,OAAO;IAAC,KAAK,EAAEH,KAAM;IACb,SAAS,YAAKF,IAAI,cAAII,SAAS,IAAI,EAAE;EAAG,GACpCC,IAAI;IAAA,WACdP,MAAM,iBAAI,KAAC,UAAU,kCAAKA,MAAM;MAAE,IAAI,EAAEE;IAAK,GAAE,eAChD,KAAC,QAAQ;MAAC,IAAI,EAAEA,IAAK;MAAA,UAClBG;IAAQ,EACA,EACVJ,MAAM,iBAAI,KAAC,UAAU,kCAAKA,MAAM;MAAE,IAAI,EAAEC;IAAK,GAAE;EAAA,GACxC;AAEd,CAAC;AAGD,eAAeH,IAAI"}
+{"version":3,"file":"Tile.js","names":["React","Size","styled","TileHeader","TileFooter","TileBody","COLORS","Wrapper","div","white","neutral_200","Tile","header","footer","size","Medium","style","children","className","rest"],"sources":["../../src/Tile/Tile.tsx"],"sourcesContent":["import React from 'react';\r\nimport {Size} from '../types';\r\nimport {TileProps} from './TileTypes';\r\nimport styled from 'styled-components';\r\nimport TileHeader from './TileHeader';\r\nimport TileFooter from './TileFooter';\r\nimport TileBody from './TileBody';\r\nimport {COLORS} from '../styles';\r\n\r\nconst Wrapper = styled.div`\r\n  width: 100%;\r\n  height: 100%;\r\n  display: flex;\r\n  flex-flow: column;\r\n  flex-direction: column;\r\n  background: ${COLORS.white};\r\n  border-radius: 8px;\r\n  border: 1px solid ${COLORS.neutral_200};\r\n  box-sizing: border-box;\r\n`;\r\n\r\nconst Tile: React.FunctionComponent<TileProps> = ({\r\n                                                    header,\r\n                                                    footer,\r\n                                                    size = Size.Medium,\r\n                                                    style,\r\n                                                    children,\r\n                                                    className,\r\n                                                    ...rest\r\n                                                  }) => {\r\n\r\n  return (\r\n    <Wrapper style={style}\r\n             className={`${size} ${className || ''}`}\r\n             {...rest}>\r\n      {header && <TileHeader {...header} size={size}/>}\r\n      <TileBody size={size}>\r\n        {children}\r\n      </TileBody>\r\n      {footer && <TileFooter {...footer} size={size}/>}\r\n    </Wrapper>\r\n  )\r\n}\r\n\r\n\r\nexport default Tile;\r\n"],"mappings":";;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAAQC,IAAI,QAAO,UAAU;AAE7B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,OAAOC,UAAU,MAAM,cAAc;AACrC,OAAOC,UAAU,MAAM,cAAc;AACrC,OAAOC,QAAQ,MAAM,YAAY;AACjC,SAAQC,MAAM,QAAO,WAAW;AAAC;AAAA;AAEjC,IAAMC,OAAO,GAAGL,MAAM,CAACM,GAAG,8QAMVF,MAAM,CAACG,KAAK,EAENH,MAAM,CAACI,WAAW,CAEvC;AAED,IAAMC,IAAwC,GAAG,SAA3CA,IAAwC,OAQU;EAAA,IAPJC,MAAM,QAANA,MAAM;IACNC,MAAM,QAANA,MAAM;IAAA,iBACNC,IAAI;IAAJA,IAAI,0BAAGb,IAAI,CAACc,MAAM;IAClBC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,IAAI;EAGzD,oBACE,MAAC,OAAO;IAAC,KAAK,EAAEH,KAAM;IACb,SAAS,YAAKF,IAAI,cAAII,SAAS,IAAI,EAAE;EAAG,GACpCC,IAAI;IAAA,WACdP,MAAM,iBAAI,KAAC,UAAU,kCAAKA,MAAM;MAAE,IAAI,EAAEE;IAAK,GAAE,eAChD,KAAC,QAAQ;MAAC,IAAI,EAAEA,IAAK;MAAA,UAClBG;IAAQ,EACA,EACVJ,MAAM,iBAAI,KAAC,UAAU,kCAAKA,MAAM;MAAE,IAAI,EAAEC;IAAK,GAAE;EAAA,GACxC;AAEd,CAAC;AAGD,eAAeH,IAAI"}

package/dist/Tile/TileBody.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TileBody.cjs","names":["Wrapper","styled","div","scrollBarStyling","Size","Small","TileBody","children","size"],"sources":["../../src/Tile/TileBody.tsx"],"sourcesContent":["import React from 'react'\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {scrollBarStyling} from '../styles';\n\nconst Wrapper = styled.div`\n  flex: 1;\n  margin: 8px;\n  overflow: auto;\n  box-sizing: border-box;\n\n  &.small {\n    padding: 0 8px;\n  }\n\n  &.medium {\n    padding: 0 12px;\n  }\n\n  &.large {\n    padding: 0 16px;\n  }\n\n  ${scrollBarStyling(Size.Small)}\n`;\n\nconst TileBody: React.FunctionComponent<{ size: Size; children?: React.ReactNode; }> = ({children, size}) => {\n\n\n  return (\n    <Wrapper className={size}>\n      {children}\n    </Wrapper>\n  )\n}\n\n\nexport default TileBody;\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;AAA2C;AAAA;AAE3C,IAAMA,OAAO,GAAGC,yBAAM,CAACC,GAAG,wSAkBtB,IAAAC,wBAAgB,EAACC,WAAI,CAACC,KAAK,CAAC,CAC/B;AAED,IAAMC,QAA8E,GAAG,SAAjFA,QAA8E,OAAyB;EAAA,IAApBC,QAAQ,QAARA,QAAQ;IAAEC,IAAI,QAAJA,IAAI;EAGrG,oBACE,qBAAC,OAAO;IAAC,SAAS,EAAEA,IAAK;IAAA,UACtBD;EAAQ,EACD;AAEd,CAAC;AAAA,eAGcD,QAAQ;AAAA"}
+{"version":3,"file":"TileBody.cjs","names":["Wrapper","styled","div","scrollBarStyling","Size","Small","TileBody","children","size"],"sources":["../../src/Tile/TileBody.tsx"],"sourcesContent":["import React from 'react'\r\nimport {Size} from '../types';\r\nimport styled from 'styled-components';\r\nimport {scrollBarStyling} from '../styles';\r\n\r\nconst Wrapper = styled.div`\r\n  flex: 1;\r\n  margin: 8px;\r\n  overflow: auto;\r\n  box-sizing: border-box;\r\n\r\n  &.small {\r\n    padding: 0 8px;\r\n  }\r\n\r\n  &.medium {\r\n    padding: 0 12px;\r\n  }\r\n\r\n  &.large {\r\n    padding: 0 16px;\r\n  }\r\n\r\n  ${scrollBarStyling(Size.Small)}\r\n`;\r\n\r\nconst TileBody: React.FunctionComponent<{ size: Size; children?: React.ReactNode; }> = ({children, size}) => {\r\n\r\n\r\n  return (\r\n    <Wrapper className={size}>\r\n      {children}\r\n    </Wrapper>\r\n  )\r\n}\r\n\r\n\r\nexport default TileBody;\r\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;AAA2C;AAAA;AAE3C,IAAMA,OAAO,GAAGC,yBAAM,CAACC,GAAG,wSAkBtB,IAAAC,wBAAgB,EAACC,WAAI,CAACC,KAAK,CAAC,CAC/B;AAED,IAAMC,QAA8E,GAAG,SAAjFA,QAA8E,OAAyB;EAAA,IAApBC,QAAQ,QAARA,QAAQ;IAAEC,IAAI,QAAJA,IAAI;EAGrG,oBACE,qBAAC,OAAO;IAAC,SAAS,EAAEA,IAAK;IAAA,UACtBD;EAAQ,EACD;AAEd,CAAC;AAAA,eAGcD,QAAQ;AAAA"}

package/dist/Tile/TileBody.d.ts

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

package/dist/Tile/TileBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"TileBody.js","names":["React","Size","styled","scrollBarStyling","Wrapper","div","Small","TileBody","children","size"],"sources":["../../src/Tile/TileBody.tsx"],"sourcesContent":["import React from 'react'\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {scrollBarStyling} from '../styles';\n\nconst Wrapper = styled.div`\n  flex: 1;\n  margin: 8px;\n  overflow: auto;\n  box-sizing: border-box;\n\n  &.small {\n    padding: 0 8px;\n  }\n\n  &.medium {\n    padding: 0 12px;\n  }\n\n  &.large {\n    padding: 0 16px;\n  }\n\n  ${scrollBarStyling(Size.Small)}\n`;\n\nconst TileBody: React.FunctionComponent<{ size: Size; children?: React.ReactNode; }> = ({children, size}) => {\n\n\n  return (\n    <Wrapper className={size}>\n      {children}\n    </Wrapper>\n  )\n}\n\n\nexport default TileBody;\n"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAAQC,IAAI,QAAO,UAAU;AAC7B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,gBAAgB,QAAO,WAAW;AAAC;AAE3C,IAAMC,OAAO,GAAGF,MAAM,CAACG,GAAG,0RAkBtBF,gBAAgB,CAACF,IAAI,CAACK,KAAK,CAAC,CAC/B;AAED,IAAMC,QAA8E,GAAG,SAAjFA,QAA8E,OAAyB;EAAA,IAApBC,QAAQ,QAARA,QAAQ;IAAEC,IAAI,QAAJA,IAAI;EAGrG,oBACE,KAAC,OAAO;IAAC,SAAS,EAAEA,IAAK;IAAA,UACtBD;EAAQ,EACD;AAEd,CAAC;AAGD,eAAeD,QAAQ"}
+{"version":3,"file":"TileBody.js","names":["React","Size","styled","scrollBarStyling","Wrapper","div","Small","TileBody","children","size"],"sources":["../../src/Tile/TileBody.tsx"],"sourcesContent":["import React from 'react'\r\nimport {Size} from '../types';\r\nimport styled from 'styled-components';\r\nimport {scrollBarStyling} from '../styles';\r\n\r\nconst Wrapper = styled.div`\r\n  flex: 1;\r\n  margin: 8px;\r\n  overflow: auto;\r\n  box-sizing: border-box;\r\n\r\n  &.small {\r\n    padding: 0 8px;\r\n  }\r\n\r\n  &.medium {\r\n    padding: 0 12px;\r\n  }\r\n\r\n  &.large {\r\n    padding: 0 16px;\r\n  }\r\n\r\n  ${scrollBarStyling(Size.Small)}\r\n`;\r\n\r\nconst TileBody: React.FunctionComponent<{ size: Size; children?: React.ReactNode; }> = ({children, size}) => {\r\n\r\n\r\n  return (\r\n    <Wrapper className={size}>\r\n      {children}\r\n    </Wrapper>\r\n  )\r\n}\r\n\r\n\r\nexport default TileBody;\r\n"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAAQC,IAAI,QAAO,UAAU;AAC7B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,gBAAgB,QAAO,WAAW;AAAC;AAE3C,IAAMC,OAAO,GAAGF,MAAM,CAACG,GAAG,0RAkBtBF,gBAAgB,CAACF,IAAI,CAACK,KAAK,CAAC,CAC/B;AAED,IAAMC,QAA8E,GAAG,SAAjFA,QAA8E,OAAyB;EAAA,IAApBC,QAAQ,QAARA,QAAQ;IAAEC,IAAI,QAAJA,IAAI;EAGrG,oBACE,KAAC,OAAO;IAAC,SAAS,EAAEA,IAAK;IAAA,UACtBD;EAAQ,EACD;AAEd,CAAC;AAGD,eAAeD,QAAQ"}

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

package/dist/Tile/TileCommonItems.d.ts

@@ -1,10 +1,10 @@
-/// <reference types="react" />
-import { TileDropdownButton, TileHyperLink, TileIconButton, TileNote, TileStandardButton, TileToggleButton } from './TileTypes';
-import { Size } from '../types';
-export declare const TileNoteText: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TileNoteIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TileNoteWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TileHyperLinkIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TileHyperLinkText: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TileHyperLinkWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const RenderTileItem: (item: TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton | TileNote | TileHyperLink, size: Size, key?: any | undefined) => JSX.Element;
+/// <reference types="react" />
+import { TileDropdownButton, TileHyperLink, TileIconButton, TileNote, TileStandardButton, TileToggleButton } from './TileTypes';
+import { Size } from '../types';
+export declare const TileNoteText: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TileNoteIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TileNoteWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TileHyperLinkIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TileHyperLinkText: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TileHyperLinkWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RenderTileItem: (item: TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton | TileNote | TileHyperLink, size: Size, key?: any | undefined) => JSX.Element;

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

package/dist/Tile/TileFooter.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TileFooter.cjs","names":["Wrapper","styled","div","LeftItemContainer","RightItemContainer","COLORS","neutral_600","TileFooter","buttons","leftItem","size","RenderTileItem","map","value","index"],"sources":["../../src/Tile/TileFooter.tsx"],"sourcesContent":["import React from 'react';\nimport {TileFooterProps} from './TileTypes';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {RenderTileItem} from './TileCommonItems';\nimport {COLORS} from '../styles';\n\nconst Wrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  min-height: 56px;\n  box-sizing: border-box;\n\n  &.small {\n    padding: 0 16px;\n    min-height: 56px;\n    gap: 4px;\n  }\n\n  &.medium {\n    padding: 0 20px;\n    min-height: 64px;\n    gap: 4px;\n  }\n\n  &.large {\n    padding: 0 24px;\n    min-height: 80px;\n    gap: 8px;\n  }\n`;\n\nconst LeftItemContainer = styled.div`\n  flex: 1\n`;\n\nconst RightItemContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  color: ${COLORS.neutral_600};\n`;\n\nconst TileFooter: React.FunctionComponent<TileFooterProps & { size: Size }> = ({buttons, leftItem, size}) => {\n\n  return (\n    <Wrapper className={size}>\n      <LeftItemContainer>{leftItem && RenderTileItem(leftItem, size)}</LeftItemContainer>\n      <RightItemContainer>{buttons && buttons.map((value, index) => RenderTileItem(value, size, index))}</RightItemContainer>\n    </Wrapper>\n  )\n}\n\nexport default TileFooter;\n"],"mappings":";;;;;;;;AAAA;AAGA;AACA;AACA;AAAiC;AAAA;AAEjC,IAAMA,OAAO,GAAGC,yBAAM,CAACC,GAAG,0bAyBzB;AAED,IAAMC,iBAAiB,GAAGF,yBAAM,CAACC,GAAG,kGAEnC;AAED,IAAME,kBAAkB,GAAGH,yBAAM,CAACC,GAAG,gLAI1BG,cAAM,CAACC,WAAW,CAC5B;AAED,IAAMC,UAAqE,GAAG,SAAxEA,UAAqE,OAAkC;EAAA,IAA7BC,OAAO,QAAPA,OAAO;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,IAAI,QAAJA,IAAI;EAErG,oBACE,sBAAC,OAAO;IAAC,SAAS,EAAEA,IAAK;IAAA,wBACvB,qBAAC,iBAAiB;MAAA,UAAED,QAAQ,IAAI,IAAAE,+BAAc,EAACF,QAAQ,EAAEC,IAAI;IAAC,EAAqB,eACnF,qBAAC,kBAAkB;MAAA,UAAEF,OAAO,IAAIA,OAAO,CAACI,GAAG,CAAC,UAACC,KAAK,EAAEC,KAAK;QAAA,OAAK,IAAAH,+BAAc,EAACE,KAAK,EAAEH,IAAI,EAAEI,KAAK,CAAC;MAAA;IAAC,EAAsB;EAAA,EAC/G;AAEd,CAAC;AAAA,eAEcP,UAAU;AAAA"}
+{"version":3,"file":"TileFooter.cjs","names":["Wrapper","styled","div","LeftItemContainer","RightItemContainer","COLORS","neutral_600","TileFooter","buttons","leftItem","size","RenderTileItem","map","value","index"],"sources":["../../src/Tile/TileFooter.tsx"],"sourcesContent":["import React from 'react';\r\nimport {TileFooterProps} from './TileTypes';\r\nimport {Size} from '../types';\r\nimport styled from 'styled-components';\r\nimport {RenderTileItem} from './TileCommonItems';\r\nimport {COLORS} from '../styles';\r\n\r\nconst Wrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n\r\n  min-height: 56px;\r\n  box-sizing: border-box;\r\n\r\n  &.small {\r\n    padding: 0 16px;\r\n    min-height: 56px;\r\n    gap: 4px;\r\n  }\r\n\r\n  &.medium {\r\n    padding: 0 20px;\r\n    min-height: 64px;\r\n    gap: 4px;\r\n  }\r\n\r\n  &.large {\r\n    padding: 0 24px;\r\n    min-height: 80px;\r\n    gap: 8px;\r\n  }\r\n`;\r\n\r\nconst LeftItemContainer = styled.div`\r\n  flex: 1\r\n`;\r\n\r\nconst RightItemContainer = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: flex-end;\r\n  color: ${COLORS.neutral_600};\r\n`;\r\n\r\nconst TileFooter: React.FunctionComponent<TileFooterProps & { size: Size }> = ({buttons, leftItem, size}) => {\r\n\r\n  return (\r\n    <Wrapper className={size}>\r\n      <LeftItemContainer>{leftItem && RenderTileItem(leftItem, size)}</LeftItemContainer>\r\n      <RightItemContainer>{buttons && buttons.map((value, index) => RenderTileItem(value, size, index))}</RightItemContainer>\r\n    </Wrapper>\r\n  )\r\n}\r\n\r\nexport default TileFooter;\r\n"],"mappings":";;;;;;;;AAAA;AAGA;AACA;AACA;AAAiC;AAAA;AAEjC,IAAMA,OAAO,GAAGC,yBAAM,CAACC,GAAG,0bAyBzB;AAED,IAAMC,iBAAiB,GAAGF,yBAAM,CAACC,GAAG,kGAEnC;AAED,IAAME,kBAAkB,GAAGH,yBAAM,CAACC,GAAG,gLAI1BG,cAAM,CAACC,WAAW,CAC5B;AAED,IAAMC,UAAqE,GAAG,SAAxEA,UAAqE,OAAkC;EAAA,IAA7BC,OAAO,QAAPA,OAAO;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,IAAI,QAAJA,IAAI;EAErG,oBACE,sBAAC,OAAO;IAAC,SAAS,EAAEA,IAAK;IAAA,wBACvB,qBAAC,iBAAiB;MAAA,UAAED,QAAQ,IAAI,IAAAE,+BAAc,EAACF,QAAQ,EAAEC,IAAI;IAAC,EAAqB,eACnF,qBAAC,kBAAkB;MAAA,UAAEF,OAAO,IAAIA,OAAO,CAACI,GAAG,CAAC,UAACC,KAAK,EAAEC,KAAK;QAAA,OAAK,IAAAH,+BAAc,EAACE,KAAK,EAAEH,IAAI,EAAEI,KAAK,CAAC;MAAA;IAAC,EAAsB;EAAA,EAC/G;AAEd,CAAC;AAAA,eAEcP,UAAU;AAAA"}

package/dist/Tile/TileFooter.d.ts

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

package/dist/Tile/TileFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"TileFooter.js","names":["React","styled","RenderTileItem","COLORS","Wrapper","div","LeftItemContainer","RightItemContainer","neutral_600","TileFooter","buttons","leftItem","size","map","value","index"],"sources":["../../src/Tile/TileFooter.tsx"],"sourcesContent":["import React from 'react';\nimport {TileFooterProps} from './TileTypes';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {RenderTileItem} from './TileCommonItems';\nimport {COLORS} from '../styles';\n\nconst Wrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  min-height: 56px;\n  box-sizing: border-box;\n\n  &.small {\n    padding: 0 16px;\n    min-height: 56px;\n    gap: 4px;\n  }\n\n  &.medium {\n    padding: 0 20px;\n    min-height: 64px;\n    gap: 4px;\n  }\n\n  &.large {\n    padding: 0 24px;\n    min-height: 80px;\n    gap: 8px;\n  }\n`;\n\nconst LeftItemContainer = styled.div`\n  flex: 1\n`;\n\nconst RightItemContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  color: ${COLORS.neutral_600};\n`;\n\nconst TileFooter: React.FunctionComponent<TileFooterProps & { size: Size }> = ({buttons, leftItem, size}) => {\n\n  return (\n    <Wrapper className={size}>\n      <LeftItemContainer>{leftItem && RenderTileItem(leftItem, size)}</LeftItemContainer>\n      <RightItemContainer>{buttons && buttons.map((value, index) => RenderTileItem(value, size, index))}</RightItemContainer>\n    </Wrapper>\n  )\n}\n\nexport default TileFooter;\n"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,cAAc,QAAO,mBAAmB;AAChD,SAAQC,MAAM,QAAO,WAAW;AAAC;AAAA;AAEjC,IAAMC,OAAO,GAAGH,MAAM,CAACI,GAAG,4aAyBzB;AAED,IAAMC,iBAAiB,GAAGL,MAAM,CAACI,GAAG,oFAEnC;AAED,IAAME,kBAAkB,GAAGN,MAAM,CAACI,GAAG,kKAI1BF,MAAM,CAACK,WAAW,CAC5B;AAED,IAAMC,UAAqE,GAAG,SAAxEA,UAAqE,OAAkC;EAAA,IAA7BC,OAAO,QAAPA,OAAO;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,IAAI,QAAJA,IAAI;EAErG,oBACE,MAAC,OAAO;IAAC,SAAS,EAAEA,IAAK;IAAA,wBACvB,KAAC,iBAAiB;MAAA,UAAED,QAAQ,IAAIT,cAAc,CAACS,QAAQ,EAAEC,IAAI;IAAC,EAAqB,eACnF,KAAC,kBAAkB;MAAA,UAAEF,OAAO,IAAIA,OAAO,CAACG,GAAG,CAAC,UAACC,KAAK,EAAEC,KAAK;QAAA,OAAKb,cAAc,CAACY,KAAK,EAAEF,IAAI,EAAEG,KAAK,CAAC;MAAA;IAAC,EAAsB;EAAA,EAC/G;AAEd,CAAC;AAED,eAAeN,UAAU"}
+{"version":3,"file":"TileFooter.js","names":["React","styled","RenderTileItem","COLORS","Wrapper","div","LeftItemContainer","RightItemContainer","neutral_600","TileFooter","buttons","leftItem","size","map","value","index"],"sources":["../../src/Tile/TileFooter.tsx"],"sourcesContent":["import React from 'react';\r\nimport {TileFooterProps} from './TileTypes';\r\nimport {Size} from '../types';\r\nimport styled from 'styled-components';\r\nimport {RenderTileItem} from './TileCommonItems';\r\nimport {COLORS} from '../styles';\r\n\r\nconst Wrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n\r\n  min-height: 56px;\r\n  box-sizing: border-box;\r\n\r\n  &.small {\r\n    padding: 0 16px;\r\n    min-height: 56px;\r\n    gap: 4px;\r\n  }\r\n\r\n  &.medium {\r\n    padding: 0 20px;\r\n    min-height: 64px;\r\n    gap: 4px;\r\n  }\r\n\r\n  &.large {\r\n    padding: 0 24px;\r\n    min-height: 80px;\r\n    gap: 8px;\r\n  }\r\n`;\r\n\r\nconst LeftItemContainer = styled.div`\r\n  flex: 1\r\n`;\r\n\r\nconst RightItemContainer = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: flex-end;\r\n  color: ${COLORS.neutral_600};\r\n`;\r\n\r\nconst TileFooter: React.FunctionComponent<TileFooterProps & { size: Size }> = ({buttons, leftItem, size}) => {\r\n\r\n  return (\r\n    <Wrapper className={size}>\r\n      <LeftItemContainer>{leftItem && RenderTileItem(leftItem, size)}</LeftItemContainer>\r\n      <RightItemContainer>{buttons && buttons.map((value, index) => RenderTileItem(value, size, index))}</RightItemContainer>\r\n    </Wrapper>\r\n  )\r\n}\r\n\r\nexport default TileFooter;\r\n"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,cAAc,QAAO,mBAAmB;AAChD,SAAQC,MAAM,QAAO,WAAW;AAAC;AAAA;AAEjC,IAAMC,OAAO,GAAGH,MAAM,CAACI,GAAG,4aAyBzB;AAED,IAAMC,iBAAiB,GAAGL,MAAM,CAACI,GAAG,oFAEnC;AAED,IAAME,kBAAkB,GAAGN,MAAM,CAACI,GAAG,kKAI1BF,MAAM,CAACK,WAAW,CAC5B;AAED,IAAMC,UAAqE,GAAG,SAAxEA,UAAqE,OAAkC;EAAA,IAA7BC,OAAO,QAAPA,OAAO;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,IAAI,QAAJA,IAAI;EAErG,oBACE,MAAC,OAAO;IAAC,SAAS,EAAEA,IAAK;IAAA,wBACvB,KAAC,iBAAiB;MAAA,UAAED,QAAQ,IAAIT,cAAc,CAACS,QAAQ,EAAEC,IAAI;IAAC,EAAqB,eACnF,KAAC,kBAAkB;MAAA,UAAEF,OAAO,IAAIA,OAAO,CAACG,GAAG,CAAC,UAACC,KAAK,EAAEC,KAAK;QAAA,OAAKb,cAAc,CAACY,KAAK,EAAEF,IAAI,EAAEG,KAAK,CAAC;MAAA;IAAC,EAAsB;EAAA,EAC/G;AAEd,CAAC;AAED,eAAeN,UAAU"}

package/dist/Tile/TileHeader.cjs.map

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

package/dist/Tile/TileHeader.d.ts

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