@veeqo/ui 13.16.0 → 13.18.0

package/dist/components/Card/Card.cjs

@@ -12,12 +12,13 @@ const collapseAnimationVariants = {
     expanded: { height: 'auto' },
     collapsed: { height: 0 },
 };
-const Card = ({ className, style, title, subtitle, headerActionSlot, action, collapsable, elevation, accent, children, onClose, renderFooter, }) => {
+const Card = ({ className, style, title, subtitle, headerTitleSlot, headerActionSlot, action, collapsable, elevation, accent, children, onClose, renderFooter, }) => {
     const [isCollapsed, setIsCollapsed] = React.useState(false);
     const toggleCollapsed = () => {
         setIsCollapsed(!isCollapsed);
     };
-    const headerMarkup = title && (React__default.default.createElement(CardHeader.CardHeader, { title: title, subtitle: subtitle, actionSlot: headerActionSlot, action: action, onClickClose: onClose, isCollapsed: isCollapsed, onClickCollapse: collapsable ? toggleCollapsed : undefined }));
+    const showHeader = title || headerTitleSlot !== undefined;
+    const headerMarkup = showHeader && (React__default.default.createElement(CardHeader.CardHeader, { title: title, subtitle: subtitle, titleSlot: headerTitleSlot, actionSlot: headerActionSlot, action: action, onClickClose: onClose, isCollapsed: isCollapsed, onClickCollapse: collapsable ? toggleCollapsed : undefined }));
     const showBody = (collapsable && !isCollapsed) || !collapsable;
     const bodyMarkup = (React__default.default.createElement(styled.Body, { animate: showBody ? 'expanded' : 'collapsed', variants: collapseAnimationVariants, transition: { duration: 0.3, ease: 'easeOut' } },
         React__default.default.createElement(styled.Section, null, children)));

package/dist/components/Card/Card.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Card.cjs","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\n\nimport { CardHeader } from '../CardHeader';\nimport { Surface, Body, FullBleed, Footer, CardElevation, Section } from './styled';\n\nconst collapseAnimationVariants = {\n  expanded: { height: 'auto' },\n  collapsed: { height: 0 },\n};\n\ntype CardAction = {\n  title: string;\n  onClick: () => void;\n};\n\nexport type CardProps = {\n  className?: string;\n  style?: React.CSSProperties;\n  title?: string;\n  subtitle?: string;\n  headerActionSlot?: React.ReactNode;\n  action?: CardAction;\n  collapsable?: boolean;\n  elevation?: CardElevation;\n  accent?: 'info' | 'success' | 'error';\n  children: ReactNode;\n  onClose?: () => void;\n  renderFooter?: () => ReactNode;\n};\n\nexport const Card = ({\n  className,\n  style,\n  title,\n  subtitle,\n  headerActionSlot,\n  action,\n  collapsable,\n  elevation,\n  accent,\n  children,\n  onClose,\n  renderFooter,\n}: CardProps) => {\n  const [isCollapsed, setIsCollapsed] = useState(false);\n\n  const toggleCollapsed = () => {\n    setIsCollapsed(!isCollapsed);\n  };\n\n  const headerMarkup = title && (\n    <CardHeader\n      title={title}\n      subtitle={subtitle}\n      actionSlot={headerActionSlot}\n      action={action}\n      onClickClose={onClose}\n      isCollapsed={isCollapsed}\n      onClickCollapse={collapsable ? toggleCollapsed : undefined}\n    />\n  );\n\n  const showBody = (collapsable && !isCollapsed) || !collapsable;\n  const bodyMarkup = (\n    <Body\n      animate={showBody ? 'expanded' : 'collapsed'}\n      variants={collapseAnimationVariants}\n      transition={{ duration: 0.3, ease: 'easeOut' }}\n    >\n      <Section>{children}</Section>\n    </Body>\n  );\n\n  const footerMarkup = renderFooter !== undefined && <Footer>{renderFooter()}</Footer>;\n\n  return (\n    <Surface className={className} style={style} elevation={elevation} accent={accent}>\n      {headerMarkup}\n      {bodyMarkup}\n      {footerMarkup}\n    </Surface>\n  );\n};\n\nCard.Surface = Surface;\nCard.Section = Section;\nCard.FullBleed = FullBleed;\nCard.Footer = Footer;\n"],"names":["useState","React","CardHeader","Body","Section","Footer","Surface","FullBleed"],"mappings":";;;;;;;;;;AAKA,MAAM,yBAAyB,GAAG;AAChC,IAAA,QAAQ,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE;AAC5B,IAAA,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE;CACzB;AAsBM,MAAM,IAAI,GAAG,CAAC,EACnB,SAAS,EACT,KAAK,EACL,KAAK,EACL,QAAQ,EACR,gBAAgB,EAChB,MAAM,EACN,WAAW,EACX,SAAS,EACT,MAAM,EACN,QAAQ,EACR,OAAO,EACP,YAAY,GACF,KAAI;IACd,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC;IAErD,MAAM,eAAe,GAAG,MAAK;AAC3B,QAAA,cAAc,CAAC,CAAC,WAAW,CAAC;AAC9B,KAAC;IAED,MAAM,YAAY,GAAG,KAAK,KACxBC,sBAAC,CAAA,aAAA,CAAAC,qBAAU,IACT,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,gBAAgB,EAC5B,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,OAAO,EACrB,WAAW,EAAE,WAAW,EACxB,eAAe,EAAE,WAAW,GAAG,eAAe,GAAG,SAAS,EAC1D,CAAA,CACH;IAED,MAAM,QAAQ,GAAG,CAAC,WAAW,IAAI,CAAC,WAAW,KAAK,CAAC,WAAW;AAC9D,IAAA,MAAM,UAAU,IACdD,sBAAA,CAAA,aAAA,CAACE,WAAI,EACH,EAAA,OAAO,EAAE,QAAQ,GAAG,UAAU,GAAG,WAAW,EAC5C,QAAQ,EAAE,yBAAyB,EACnC,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,EAAA;AAE9C,QAAAF,sBAAA,CAAA,aAAA,CAACG,cAAO,EAAE,IAAA,EAAA,QAAQ,CAAW,CACxB,CACR;AAED,IAAA,MAAM,YAAY,GAAG,YAAY,KAAK,SAAS,IAAIH,sBAAC,CAAA,aAAA,CAAAI,aAAM,EAAE,IAAA,EAAA,YAAY,EAAE,CAAU;AAEpF,IAAA,QACEJ,sBAAC,CAAA,aAAA,CAAAK,cAAO,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAA;QAC9E,YAAY;QACZ,UAAU;QACV,YAAY,CACL;AAEd;AAEA,IAAI,CAAC,OAAO,GAAGA,cAAO;AACtB,IAAI,CAAC,OAAO,GAAGF,cAAO;AACtB,IAAI,CAAC,SAAS,GAAGG,gBAAS;AAC1B,IAAI,CAAC,MAAM,GAAGF,aAAM;;;;"}
+{"version":3,"file":"Card.cjs","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\n\nimport { CardHeader } from '../CardHeader';\nimport { Surface, Body, FullBleed, Footer, CardElevation, Section } from './styled';\n\nconst collapseAnimationVariants = {\n  expanded: { height: 'auto' },\n  collapsed: { height: 0 },\n};\n\ntype CardAction = {\n  title: string;\n  onClick: () => void;\n};\n\nexport type CardProps = {\n  className?: string;\n  style?: React.CSSProperties;\n  title?: string;\n  subtitle?: string;\n  headerTitleSlot?: React.ReactNode;\n  headerActionSlot?: React.ReactNode;\n  action?: CardAction;\n  collapsable?: boolean;\n  elevation?: CardElevation;\n  accent?: 'info' | 'success' | 'error';\n  children: ReactNode;\n  onClose?: () => void;\n  renderFooter?: () => ReactNode;\n};\n\nexport const Card = ({\n  className,\n  style,\n  title,\n  subtitle,\n  headerTitleSlot,\n  headerActionSlot,\n  action,\n  collapsable,\n  elevation,\n  accent,\n  children,\n  onClose,\n  renderFooter,\n}: CardProps) => {\n  const [isCollapsed, setIsCollapsed] = useState(false);\n\n  const toggleCollapsed = () => {\n    setIsCollapsed(!isCollapsed);\n  };\n\n  const showHeader = title || headerTitleSlot !== undefined;\n  const headerMarkup = showHeader && (\n    <CardHeader\n      title={title}\n      subtitle={subtitle}\n      titleSlot={headerTitleSlot}\n      actionSlot={headerActionSlot}\n      action={action}\n      onClickClose={onClose}\n      isCollapsed={isCollapsed}\n      onClickCollapse={collapsable ? toggleCollapsed : undefined}\n    />\n  );\n\n  const showBody = (collapsable && !isCollapsed) || !collapsable;\n  const bodyMarkup = (\n    <Body\n      animate={showBody ? 'expanded' : 'collapsed'}\n      variants={collapseAnimationVariants}\n      transition={{ duration: 0.3, ease: 'easeOut' }}\n    >\n      <Section>{children}</Section>\n    </Body>\n  );\n\n  const footerMarkup = renderFooter !== undefined && <Footer>{renderFooter()}</Footer>;\n\n  return (\n    <Surface className={className} style={style} elevation={elevation} accent={accent}>\n      {headerMarkup}\n      {bodyMarkup}\n      {footerMarkup}\n    </Surface>\n  );\n};\n\nCard.Surface = Surface;\nCard.Section = Section;\nCard.FullBleed = FullBleed;\nCard.Footer = Footer;\n"],"names":["useState","React","CardHeader","Body","Section","Footer","Surface","FullBleed"],"mappings":";;;;;;;;;;AAKA,MAAM,yBAAyB,GAAG;AAChC,IAAA,QAAQ,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE;AAC5B,IAAA,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE;CACzB;AAuBM,MAAM,IAAI,GAAG,CAAC,EACnB,SAAS,EACT,KAAK,EACL,KAAK,EACL,QAAQ,EACR,eAAe,EACf,gBAAgB,EAChB,MAAM,EACN,WAAW,EACX,SAAS,EACT,MAAM,EACN,QAAQ,EACR,OAAO,EACP,YAAY,GACF,KAAI;IACd,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC;IAErD,MAAM,eAAe,GAAG,MAAK;AAC3B,QAAA,cAAc,CAAC,CAAC,WAAW,CAAC;AAC9B,KAAC;AAED,IAAA,MAAM,UAAU,GAAG,KAAK,IAAI,eAAe,KAAK,SAAS;IACzD,MAAM,YAAY,GAAG,UAAU,KAC7BC,sBAAC,CAAA,aAAA,CAAAC,qBAAU,EACT,EAAA,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,gBAAgB,EAC5B,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,OAAO,EACrB,WAAW,EAAE,WAAW,EACxB,eAAe,EAAE,WAAW,GAAG,eAAe,GAAG,SAAS,EAC1D,CAAA,CACH;IAED,MAAM,QAAQ,GAAG,CAAC,WAAW,IAAI,CAAC,WAAW,KAAK,CAAC,WAAW;AAC9D,IAAA,MAAM,UAAU,IACdD,sBAAA,CAAA,aAAA,CAACE,WAAI,EACH,EAAA,OAAO,EAAE,QAAQ,GAAG,UAAU,GAAG,WAAW,EAC5C,QAAQ,EAAE,yBAAyB,EACnC,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,EAAA;AAE9C,QAAAF,sBAAA,CAAA,aAAA,CAACG,cAAO,EAAE,IAAA,EAAA,QAAQ,CAAW,CACxB,CACR;AAED,IAAA,MAAM,YAAY,GAAG,YAAY,KAAK,SAAS,IAAIH,sBAAC,CAAA,aAAA,CAAAI,aAAM,EAAE,IAAA,EAAA,YAAY,EAAE,CAAU;AAEpF,IAAA,QACEJ,sBAAC,CAAA,aAAA,CAAAK,cAAO,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAA;QAC9E,YAAY;QACZ,UAAU;QACV,YAAY,CACL;AAEd;AAEA,IAAI,CAAC,OAAO,GAAGA,cAAO;AACtB,IAAI,CAAC,OAAO,GAAGF,cAAO;AACtB,IAAI,CAAC,SAAS,GAAGG,gBAAS;AAC1B,IAAI,CAAC,MAAM,GAAGF,aAAM;;;;"}

package/dist/components/Card/Card.d.ts

@@ -9,6 +9,7 @@ export type CardProps = {
     style?: React.CSSProperties;
     title?: string;
     subtitle?: string;
+    headerTitleSlot?: React.ReactNode;
     headerActionSlot?: React.ReactNode;
     action?: CardAction;
     collapsable?: boolean;
@@ -19,7 +20,7 @@ export type CardProps = {
     renderFooter?: () => ReactNode;
 };
 export declare const Card: {
-    ({ className, style, title, subtitle, headerActionSlot, action, collapsable, elevation, accent, children, onClose, renderFooter, }: CardProps): React.JSX.Element;
+    ({ className, style, title, subtitle, headerTitleSlot, headerActionSlot, action, collapsable, elevation, accent, children, onClose, renderFooter, }: CardProps): React.JSX.Element;
     Surface: import("styled-components").StyledComponent<"div", any, import("./styled").SurfaceProps, never>;
     Section: import("styled-components").StyledComponent<"section", any, {}, never>;
     FullBleed: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/Card/Card.js

@@ -6,12 +6,13 @@ const collapseAnimationVariants = {
     expanded: { height: 'auto' },
     collapsed: { height: 0 },
 };
-const Card = ({ className, style, title, subtitle, headerActionSlot, action, collapsable, elevation, accent, children, onClose, renderFooter, }) => {
+const Card = ({ className, style, title, subtitle, headerTitleSlot, headerActionSlot, action, collapsable, elevation, accent, children, onClose, renderFooter, }) => {
     const [isCollapsed, setIsCollapsed] = useState(false);
     const toggleCollapsed = () => {
         setIsCollapsed(!isCollapsed);
     };
-    const headerMarkup = title && (React__default.createElement(CardHeader, { title: title, subtitle: subtitle, actionSlot: headerActionSlot, action: action, onClickClose: onClose, isCollapsed: isCollapsed, onClickCollapse: collapsable ? toggleCollapsed : undefined }));
+    const showHeader = title || headerTitleSlot !== undefined;
+    const headerMarkup = showHeader && (React__default.createElement(CardHeader, { title: title, subtitle: subtitle, titleSlot: headerTitleSlot, actionSlot: headerActionSlot, action: action, onClickClose: onClose, isCollapsed: isCollapsed, onClickCollapse: collapsable ? toggleCollapsed : undefined }));
     const showBody = (collapsable && !isCollapsed) || !collapsable;
     const bodyMarkup = (React__default.createElement(Body, { animate: showBody ? 'expanded' : 'collapsed', variants: collapseAnimationVariants, transition: { duration: 0.3, ease: 'easeOut' } },
         React__default.createElement(Section, null, children)));

package/dist/components/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\n\nimport { CardHeader } from '../CardHeader';\nimport { Surface, Body, FullBleed, Footer, CardElevation, Section } from './styled';\n\nconst collapseAnimationVariants = {\n  expanded: { height: 'auto' },\n  collapsed: { height: 0 },\n};\n\ntype CardAction = {\n  title: string;\n  onClick: () => void;\n};\n\nexport type CardProps = {\n  className?: string;\n  style?: React.CSSProperties;\n  title?: string;\n  subtitle?: string;\n  headerActionSlot?: React.ReactNode;\n  action?: CardAction;\n  collapsable?: boolean;\n  elevation?: CardElevation;\n  accent?: 'info' | 'success' | 'error';\n  children: ReactNode;\n  onClose?: () => void;\n  renderFooter?: () => ReactNode;\n};\n\nexport const Card = ({\n  className,\n  style,\n  title,\n  subtitle,\n  headerActionSlot,\n  action,\n  collapsable,\n  elevation,\n  accent,\n  children,\n  onClose,\n  renderFooter,\n}: CardProps) => {\n  const [isCollapsed, setIsCollapsed] = useState(false);\n\n  const toggleCollapsed = () => {\n    setIsCollapsed(!isCollapsed);\n  };\n\n  const headerMarkup = title && (\n    <CardHeader\n      title={title}\n      subtitle={subtitle}\n      actionSlot={headerActionSlot}\n      action={action}\n      onClickClose={onClose}\n      isCollapsed={isCollapsed}\n      onClickCollapse={collapsable ? toggleCollapsed : undefined}\n    />\n  );\n\n  const showBody = (collapsable && !isCollapsed) || !collapsable;\n  const bodyMarkup = (\n    <Body\n      animate={showBody ? 'expanded' : 'collapsed'}\n      variants={collapseAnimationVariants}\n      transition={{ duration: 0.3, ease: 'easeOut' }}\n    >\n      <Section>{children}</Section>\n    </Body>\n  );\n\n  const footerMarkup = renderFooter !== undefined && <Footer>{renderFooter()}</Footer>;\n\n  return (\n    <Surface className={className} style={style} elevation={elevation} accent={accent}>\n      {headerMarkup}\n      {bodyMarkup}\n      {footerMarkup}\n    </Surface>\n  );\n};\n\nCard.Surface = Surface;\nCard.Section = Section;\nCard.FullBleed = FullBleed;\nCard.Footer = Footer;\n"],"names":["React"],"mappings":";;;;AAKA,MAAM,yBAAyB,GAAG;AAChC,IAAA,QAAQ,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE;AAC5B,IAAA,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE;CACzB;AAsBM,MAAM,IAAI,GAAG,CAAC,EACnB,SAAS,EACT,KAAK,EACL,KAAK,EACL,QAAQ,EACR,gBAAgB,EAChB,MAAM,EACN,WAAW,EACX,SAAS,EACT,MAAM,EACN,QAAQ,EACR,OAAO,EACP,YAAY,GACF,KAAI;IACd,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAErD,MAAM,eAAe,GAAG,MAAK;AAC3B,QAAA,cAAc,CAAC,CAAC,WAAW,CAAC;AAC9B,KAAC;IAED,MAAM,YAAY,GAAG,KAAK,KACxBA,cAAC,CAAA,aAAA,CAAA,UAAU,IACT,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,gBAAgB,EAC5B,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,OAAO,EACrB,WAAW,EAAE,WAAW,EACxB,eAAe,EAAE,WAAW,GAAG,eAAe,GAAG,SAAS,EAC1D,CAAA,CACH;IAED,MAAM,QAAQ,GAAG,CAAC,WAAW,IAAI,CAAC,WAAW,KAAK,CAAC,WAAW;AAC9D,IAAA,MAAM,UAAU,IACdA,cAAA,CAAA,aAAA,CAAC,IAAI,EACH,EAAA,OAAO,EAAE,QAAQ,GAAG,UAAU,GAAG,WAAW,EAC5C,QAAQ,EAAE,yBAAyB,EACnC,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,EAAA;AAE9C,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAE,IAAA,EAAA,QAAQ,CAAW,CACxB,CACR;AAED,IAAA,MAAM,YAAY,GAAG,YAAY,KAAK,SAAS,IAAIA,cAAC,CAAA,aAAA,CAAA,MAAM,EAAE,IAAA,EAAA,YAAY,EAAE,CAAU;AAEpF,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,OAAO,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAA;QAC9E,YAAY;QACZ,UAAU;QACV,YAAY,CACL;AAEd;AAEA,IAAI,CAAC,OAAO,GAAG,OAAO;AACtB,IAAI,CAAC,OAAO,GAAG,OAAO;AACtB,IAAI,CAAC,SAAS,GAAG,SAAS;AAC1B,IAAI,CAAC,MAAM,GAAG,MAAM;;;;"}
+{"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\n\nimport { CardHeader } from '../CardHeader';\nimport { Surface, Body, FullBleed, Footer, CardElevation, Section } from './styled';\n\nconst collapseAnimationVariants = {\n  expanded: { height: 'auto' },\n  collapsed: { height: 0 },\n};\n\ntype CardAction = {\n  title: string;\n  onClick: () => void;\n};\n\nexport type CardProps = {\n  className?: string;\n  style?: React.CSSProperties;\n  title?: string;\n  subtitle?: string;\n  headerTitleSlot?: React.ReactNode;\n  headerActionSlot?: React.ReactNode;\n  action?: CardAction;\n  collapsable?: boolean;\n  elevation?: CardElevation;\n  accent?: 'info' | 'success' | 'error';\n  children: ReactNode;\n  onClose?: () => void;\n  renderFooter?: () => ReactNode;\n};\n\nexport const Card = ({\n  className,\n  style,\n  title,\n  subtitle,\n  headerTitleSlot,\n  headerActionSlot,\n  action,\n  collapsable,\n  elevation,\n  accent,\n  children,\n  onClose,\n  renderFooter,\n}: CardProps) => {\n  const [isCollapsed, setIsCollapsed] = useState(false);\n\n  const toggleCollapsed = () => {\n    setIsCollapsed(!isCollapsed);\n  };\n\n  const showHeader = title || headerTitleSlot !== undefined;\n  const headerMarkup = showHeader && (\n    <CardHeader\n      title={title}\n      subtitle={subtitle}\n      titleSlot={headerTitleSlot}\n      actionSlot={headerActionSlot}\n      action={action}\n      onClickClose={onClose}\n      isCollapsed={isCollapsed}\n      onClickCollapse={collapsable ? toggleCollapsed : undefined}\n    />\n  );\n\n  const showBody = (collapsable && !isCollapsed) || !collapsable;\n  const bodyMarkup = (\n    <Body\n      animate={showBody ? 'expanded' : 'collapsed'}\n      variants={collapseAnimationVariants}\n      transition={{ duration: 0.3, ease: 'easeOut' }}\n    >\n      <Section>{children}</Section>\n    </Body>\n  );\n\n  const footerMarkup = renderFooter !== undefined && <Footer>{renderFooter()}</Footer>;\n\n  return (\n    <Surface className={className} style={style} elevation={elevation} accent={accent}>\n      {headerMarkup}\n      {bodyMarkup}\n      {footerMarkup}\n    </Surface>\n  );\n};\n\nCard.Surface = Surface;\nCard.Section = Section;\nCard.FullBleed = FullBleed;\nCard.Footer = Footer;\n"],"names":["React"],"mappings":";;;;AAKA,MAAM,yBAAyB,GAAG;AAChC,IAAA,QAAQ,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE;AAC5B,IAAA,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE;CACzB;AAuBM,MAAM,IAAI,GAAG,CAAC,EACnB,SAAS,EACT,KAAK,EACL,KAAK,EACL,QAAQ,EACR,eAAe,EACf,gBAAgB,EAChB,MAAM,EACN,WAAW,EACX,SAAS,EACT,MAAM,EACN,QAAQ,EACR,OAAO,EACP,YAAY,GACF,KAAI;IACd,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAErD,MAAM,eAAe,GAAG,MAAK;AAC3B,QAAA,cAAc,CAAC,CAAC,WAAW,CAAC;AAC9B,KAAC;AAED,IAAA,MAAM,UAAU,GAAG,KAAK,IAAI,eAAe,KAAK,SAAS;IACzD,MAAM,YAAY,GAAG,UAAU,KAC7BA,cAAC,CAAA,aAAA,CAAA,UAAU,EACT,EAAA,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,gBAAgB,EAC5B,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,OAAO,EACrB,WAAW,EAAE,WAAW,EACxB,eAAe,EAAE,WAAW,GAAG,eAAe,GAAG,SAAS,EAC1D,CAAA,CACH;IAED,MAAM,QAAQ,GAAG,CAAC,WAAW,IAAI,CAAC,WAAW,KAAK,CAAC,WAAW;AAC9D,IAAA,MAAM,UAAU,IACdA,cAAA,CAAA,aAAA,CAAC,IAAI,EACH,EAAA,OAAO,EAAE,QAAQ,GAAG,UAAU,GAAG,WAAW,EAC5C,QAAQ,EAAE,yBAAyB,EACnC,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,EAAA;AAE9C,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAE,IAAA,EAAA,QAAQ,CAAW,CACxB,CACR;AAED,IAAA,MAAM,YAAY,GAAG,YAAY,KAAK,SAAS,IAAIA,cAAC,CAAA,aAAA,CAAA,MAAM,EAAE,IAAA,EAAA,YAAY,EAAE,CAAU;AAEpF,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,OAAO,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAA;QAC9E,YAAY;QACZ,UAAU;QACV,YAAY,CACL;AAEd;AAEA,IAAI,CAAC,OAAO,GAAG,OAAO;AACtB,IAAI,CAAC,OAAO,GAAG,OAAO;AACtB,IAAI,CAAC,SAAS,GAAG,SAAS;AAC1B,IAAI,CAAC,MAAM,GAAG,MAAM;;;;"}

package/dist/components/CardHeader/CardHeader.cjs

@@ -12,9 +12,9 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const CardHeader = ({ id, title, subtitle, headerVariant = 'headingSmall', action, actionSlot, isCollapsed, onClickCollapse, onClickClose, }) => (React__default.default.createElement(styled.Header, null,
+const CardHeader = ({ id, title, subtitle, titleSlot, headerVariant = 'headingSmall', action, actionSlot, isCollapsed, onClickCollapse, onClickClose, }) => (React__default.default.createElement(styled.Header, null,
     React__default.default.createElement(styled.HeaderGrid, null,
-        React__default.default.createElement(Text.Text, { id: id, variant: headerVariant }, title),
+        titleSlot || (React__default.default.createElement(Text.Text, { id: id, variant: headerVariant }, title)),
         action && (React__default.default.createElement(Button.Button, { variant: "link", onClick: action.onClick }, action.title)),
         actionSlot,
         onClickCollapse && (React__default.default.createElement(Button.Button, { variant: "flat", iconSlot: isCollapsed ? React__default.default.createElement(DownArrowIcon.ReactComponent, null) : React__default.default.createElement(UpArrowIcon.ReactComponent, null), onClick: onClickCollapse })),

package/dist/components/CardHeader/CardHeader.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CardHeader.cjs","sources":["../../../src/components/CardHeader/CardHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../Text';\nimport { Button } from '../Button';\nimport { Header, HeaderGrid } from './styled';\nimport { HeaderVariant } from '../Text/types';\nimport { DownArrowIcon, UpArrowIcon, CrossIcon } from '../../icons';\n\ntype CardHeaderAction = {\n  title: string;\n  onClick: () => void;\n};\n\nexport interface CardHeaderProps {\n  id?: string;\n  title?: string;\n  subtitle?: string;\n  headerVariant?: HeaderVariant;\n  action?: CardHeaderAction;\n  actionSlot?: React.ReactNode;\n  isCollapsed?: boolean;\n  onClickCollapse?: () => void;\n  onClickClose?: () => void;\n}\n\nexport const CardHeader = ({\n  id,\n  title,\n  subtitle,\n  headerVariant = 'headingSmall',\n  action,\n  actionSlot,\n  isCollapsed,\n  onClickCollapse,\n  onClickClose,\n}: CardHeaderProps) => (\n  <Header>\n    <HeaderGrid>\n      <Text id={id} variant={headerVariant}>\n        {title}\n      </Text>\n      {action && (\n        <Button variant=\"link\" onClick={action.onClick}>\n          {action.title}\n        </Button>\n      )}\n      {actionSlot}\n      {onClickCollapse && (\n        <Button\n          variant=\"flat\"\n          iconSlot={isCollapsed ? <DownArrowIcon /> : <UpArrowIcon />}\n          onClick={onClickCollapse}\n        />\n      )}\n      {onClickClose && (\n        <Button\n          variant=\"flat\"\n          iconSlot={<CrossIcon />}\n          onClick={onClickClose}\n          aria-label=\"Close\"\n          type=\"button\"\n        />\n      )}\n    </HeaderGrid>\n    {subtitle && <Text variant=\"subheadingSmall\">{subtitle}</Text>}\n  </Header>\n);\n"],"names":["React","Header","HeaderGrid","Text","Button","DownArrowIcon","UpArrowIcon","CrossIcon"],"mappings":";;;;;;;;;;;;;;AAyBO,MAAM,UAAU,GAAG,CAAC,EACzB,EAAE,EACF,KAAK,EACL,QAAQ,EACR,aAAa,GAAG,cAAc,EAC9B,MAAM,EACN,UAAU,EACV,WAAW,EACX,eAAe,EACf,YAAY,GACI,MAChBA,qCAACC,aAAM,EAAA,IAAA;AACL,IAAAD,sBAAA,CAAA,aAAA,CAACE,iBAAU,EAAA,IAAA;QACTF,sBAAC,CAAA,aAAA,CAAAG,SAAI,EAAC,EAAA,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,aAAa,EACjC,EAAA,KAAK,CACD;AACN,QAAA,MAAM,KACLH,sBAAA,CAAA,aAAA,CAACI,aAAM,EAAC,EAAA,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,MAAM,CAAC,OAAO,EAAA,EAC3C,MAAM,CAAC,KAAK,CACN,CACV;QACA,UAAU;AACV,QAAA,eAAe,KACdJ,sBAAC,CAAA,aAAA,CAAAI,aAAM,EACL,EAAA,OAAO,EAAC,MAAM,EACd,QAAQ,EAAE,WAAW,GAAGJ,sBAAA,CAAA,aAAA,CAACK,4BAAa,EAAA,IAAA,CAAG,GAAGL,sBAAA,CAAA,aAAA,CAACM,0BAAW,EAAA,IAAA,CAAG,EAC3D,OAAO,EAAE,eAAe,GACxB,CACH;QACA,YAAY,KACXN,sBAAA,CAAA,aAAA,CAACI,aAAM,EAAA,EACL,OAAO,EAAC,MAAM,EACd,QAAQ,EAAEJ,sBAAC,CAAA,aAAA,CAAAO,wBAAS,OAAG,EACvB,OAAO,EAAE,YAAY,EACV,YAAA,EAAA,OAAO,EAClB,IAAI,EAAC,QAAQ,EACb,CAAA,CACH,CACU;AACZ,IAAA,QAAQ,IAAIP,sBAAA,CAAA,aAAA,CAACG,SAAI,EAAA,EAAC,OAAO,EAAC,iBAAiB,EAAA,EAAE,QAAQ,CAAQ,CACvD;;;;"}
+{"version":3,"file":"CardHeader.cjs","sources":["../../../src/components/CardHeader/CardHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../Text';\nimport { Button } from '../Button';\nimport { Header, HeaderGrid } from './styled';\nimport { HeaderVariant } from '../Text/types';\nimport { DownArrowIcon, UpArrowIcon, CrossIcon } from '../../icons';\n\ntype CardHeaderAction = {\n  title: string;\n  onClick: () => void;\n};\n\nexport interface CardHeaderProps {\n  id?: string;\n  title?: string;\n  subtitle?: string;\n  titleSlot?: React.ReactNode;\n  headerVariant?: HeaderVariant;\n  action?: CardHeaderAction;\n  actionSlot?: React.ReactNode;\n  isCollapsed?: boolean;\n  onClickCollapse?: () => void;\n  onClickClose?: () => void;\n}\n\nexport const CardHeader = ({\n  id,\n  title,\n  subtitle,\n  titleSlot,\n  headerVariant = 'headingSmall',\n  action,\n  actionSlot,\n  isCollapsed,\n  onClickCollapse,\n  onClickClose,\n}: CardHeaderProps) => (\n  <Header>\n    <HeaderGrid>\n      {titleSlot || (\n        <Text id={id} variant={headerVariant}>\n          {title}\n        </Text>\n      )}\n      {action && (\n        <Button variant=\"link\" onClick={action.onClick}>\n          {action.title}\n        </Button>\n      )}\n      {actionSlot}\n      {onClickCollapse && (\n        <Button\n          variant=\"flat\"\n          iconSlot={isCollapsed ? <DownArrowIcon /> : <UpArrowIcon />}\n          onClick={onClickCollapse}\n        />\n      )}\n      {onClickClose && (\n        <Button\n          variant=\"flat\"\n          iconSlot={<CrossIcon />}\n          onClick={onClickClose}\n          aria-label=\"Close\"\n          type=\"button\"\n        />\n      )}\n    </HeaderGrid>\n    {subtitle && <Text variant=\"subheadingSmall\">{subtitle}</Text>}\n  </Header>\n);\n"],"names":["React","Header","HeaderGrid","Text","Button","DownArrowIcon","UpArrowIcon","CrossIcon"],"mappings":";;;;;;;;;;;;;;AA0BO,MAAM,UAAU,GAAG,CAAC,EACzB,EAAE,EACF,KAAK,EACL,QAAQ,EACR,SAAS,EACT,aAAa,GAAG,cAAc,EAC9B,MAAM,EACN,UAAU,EACV,WAAW,EACX,eAAe,EACf,YAAY,GACI,MAChBA,qCAACC,aAAM,EAAA,IAAA;AACL,IAAAD,sBAAA,CAAA,aAAA,CAACE,iBAAU,EAAA,IAAA;AACR,QAAA,SAAS,KACRF,sBAAC,CAAA,aAAA,CAAAG,SAAI,IAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,aAAa,EACjC,EAAA,KAAK,CACD,CACR;AACA,QAAA,MAAM,KACLH,sBAAA,CAAA,aAAA,CAACI,aAAM,EAAC,EAAA,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,MAAM,CAAC,OAAO,EAAA,EAC3C,MAAM,CAAC,KAAK,CACN,CACV;QACA,UAAU;AACV,QAAA,eAAe,KACdJ,sBAAC,CAAA,aAAA,CAAAI,aAAM,EACL,EAAA,OAAO,EAAC,MAAM,EACd,QAAQ,EAAE,WAAW,GAAGJ,sBAAA,CAAA,aAAA,CAACK,4BAAa,EAAA,IAAA,CAAG,GAAGL,sBAAA,CAAA,aAAA,CAACM,0BAAW,EAAA,IAAA,CAAG,EAC3D,OAAO,EAAE,eAAe,GACxB,CACH;QACA,YAAY,KACXN,sBAAA,CAAA,aAAA,CAACI,aAAM,EAAA,EACL,OAAO,EAAC,MAAM,EACd,QAAQ,EAAEJ,sBAAC,CAAA,aAAA,CAAAO,wBAAS,OAAG,EACvB,OAAO,EAAE,YAAY,EACV,YAAA,EAAA,OAAO,EAClB,IAAI,EAAC,QAAQ,EACb,CAAA,CACH,CACU;AACZ,IAAA,QAAQ,IAAIP,sBAAA,CAAA,aAAA,CAACG,SAAI,EAAA,EAAC,OAAO,EAAC,iBAAiB,EAAA,EAAE,QAAQ,CAAQ,CACvD;;;;"}

package/dist/components/CardHeader/CardHeader.d.ts

@@ -8,6 +8,7 @@ export interface CardHeaderProps {
     id?: string;
     title?: string;
     subtitle?: string;
+    titleSlot?: React.ReactNode;
     headerVariant?: HeaderVariant;
     action?: CardHeaderAction;
     actionSlot?: React.ReactNode;
@@ -15,5 +16,5 @@ export interface CardHeaderProps {
     onClickCollapse?: () => void;
     onClickClose?: () => void;
 }
-export declare const CardHeader: ({ id, title, subtitle, headerVariant, action, actionSlot, isCollapsed, onClickCollapse, onClickClose, }: CardHeaderProps) => React.JSX.Element;
+export declare const CardHeader: ({ id, title, subtitle, titleSlot, headerVariant, action, actionSlot, isCollapsed, onClickCollapse, onClickClose, }: CardHeaderProps) => React.JSX.Element;
 export {};

package/dist/components/CardHeader/CardHeader.js

@@ -6,9 +6,9 @@ import { ReactComponent as CrossIcon } from '../../icons/design-system/component
 import { ReactComponent as DownArrowIcon } from '../../icons/design-system/components/DownArrowIcon.js';
 import { ReactComponent as UpArrowIcon } from '../../icons/design-system/components/UpArrowIcon.js';
 
-const CardHeader = ({ id, title, subtitle, headerVariant = 'headingSmall', action, actionSlot, isCollapsed, onClickCollapse, onClickClose, }) => (React__default.createElement(Header, null,
+const CardHeader = ({ id, title, subtitle, titleSlot, headerVariant = 'headingSmall', action, actionSlot, isCollapsed, onClickCollapse, onClickClose, }) => (React__default.createElement(Header, null,
     React__default.createElement(HeaderGrid, null,
-        React__default.createElement(Text, { id: id, variant: headerVariant }, title),
+        titleSlot || (React__default.createElement(Text, { id: id, variant: headerVariant }, title)),
         action && (React__default.createElement(Button, { variant: "link", onClick: action.onClick }, action.title)),
         actionSlot,
         onClickCollapse && (React__default.createElement(Button, { variant: "flat", iconSlot: isCollapsed ? React__default.createElement(DownArrowIcon, null) : React__default.createElement(UpArrowIcon, null), onClick: onClickCollapse })),

package/dist/components/CardHeader/CardHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardHeader.js","sources":["../../../src/components/CardHeader/CardHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../Text';\nimport { Button } from '../Button';\nimport { Header, HeaderGrid } from './styled';\nimport { HeaderVariant } from '../Text/types';\nimport { DownArrowIcon, UpArrowIcon, CrossIcon } from '../../icons';\n\ntype CardHeaderAction = {\n  title: string;\n  onClick: () => void;\n};\n\nexport interface CardHeaderProps {\n  id?: string;\n  title?: string;\n  subtitle?: string;\n  headerVariant?: HeaderVariant;\n  action?: CardHeaderAction;\n  actionSlot?: React.ReactNode;\n  isCollapsed?: boolean;\n  onClickCollapse?: () => void;\n  onClickClose?: () => void;\n}\n\nexport const CardHeader = ({\n  id,\n  title,\n  subtitle,\n  headerVariant = 'headingSmall',\n  action,\n  actionSlot,\n  isCollapsed,\n  onClickCollapse,\n  onClickClose,\n}: CardHeaderProps) => (\n  <Header>\n    <HeaderGrid>\n      <Text id={id} variant={headerVariant}>\n        {title}\n      </Text>\n      {action && (\n        <Button variant=\"link\" onClick={action.onClick}>\n          {action.title}\n        </Button>\n      )}\n      {actionSlot}\n      {onClickCollapse && (\n        <Button\n          variant=\"flat\"\n          iconSlot={isCollapsed ? <DownArrowIcon /> : <UpArrowIcon />}\n          onClick={onClickCollapse}\n        />\n      )}\n      {onClickClose && (\n        <Button\n          variant=\"flat\"\n          iconSlot={<CrossIcon />}\n          onClick={onClickClose}\n          aria-label=\"Close\"\n          type=\"button\"\n        />\n      )}\n    </HeaderGrid>\n    {subtitle && <Text variant=\"subheadingSmall\">{subtitle}</Text>}\n  </Header>\n);\n"],"names":["React"],"mappings":";;;;;;;;AAyBO,MAAM,UAAU,GAAG,CAAC,EACzB,EAAE,EACF,KAAK,EACL,QAAQ,EACR,aAAa,GAAG,cAAc,EAC9B,MAAM,EACN,UAAU,EACV,WAAW,EACX,eAAe,EACf,YAAY,GACI,MAChBA,6BAAC,MAAM,EAAA,IAAA;AACL,IAAAA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,IAAA;QACTA,cAAC,CAAA,aAAA,CAAA,IAAI,EAAC,EAAA,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,aAAa,EACjC,EAAA,KAAK,CACD;AACN,QAAA,MAAM,KACLA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAC,EAAA,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,MAAM,CAAC,OAAO,EAAA,EAC3C,MAAM,CAAC,KAAK,CACN,CACV;QACA,UAAU;AACV,QAAA,eAAe,KACdA,cAAC,CAAA,aAAA,CAAA,MAAM,EACL,EAAA,OAAO,EAAC,MAAM,EACd,QAAQ,EAAE,WAAW,GAAGA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAA,IAAA,CAAG,GAAGA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,IAAA,CAAG,EAC3D,OAAO,EAAE,eAAe,GACxB,CACH;QACA,YAAY,KACXA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAC,MAAM,EACd,QAAQ,EAAEA,cAAC,CAAA,aAAA,CAAA,SAAS,OAAG,EACvB,OAAO,EAAE,YAAY,EACV,YAAA,EAAA,OAAO,EAClB,IAAI,EAAC,QAAQ,EACb,CAAA,CACH,CACU;AACZ,IAAA,QAAQ,IAAIA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,iBAAiB,EAAA,EAAE,QAAQ,CAAQ,CACvD;;;;"}
+{"version":3,"file":"CardHeader.js","sources":["../../../src/components/CardHeader/CardHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../Text';\nimport { Button } from '../Button';\nimport { Header, HeaderGrid } from './styled';\nimport { HeaderVariant } from '../Text/types';\nimport { DownArrowIcon, UpArrowIcon, CrossIcon } from '../../icons';\n\ntype CardHeaderAction = {\n  title: string;\n  onClick: () => void;\n};\n\nexport interface CardHeaderProps {\n  id?: string;\n  title?: string;\n  subtitle?: string;\n  titleSlot?: React.ReactNode;\n  headerVariant?: HeaderVariant;\n  action?: CardHeaderAction;\n  actionSlot?: React.ReactNode;\n  isCollapsed?: boolean;\n  onClickCollapse?: () => void;\n  onClickClose?: () => void;\n}\n\nexport const CardHeader = ({\n  id,\n  title,\n  subtitle,\n  titleSlot,\n  headerVariant = 'headingSmall',\n  action,\n  actionSlot,\n  isCollapsed,\n  onClickCollapse,\n  onClickClose,\n}: CardHeaderProps) => (\n  <Header>\n    <HeaderGrid>\n      {titleSlot || (\n        <Text id={id} variant={headerVariant}>\n          {title}\n        </Text>\n      )}\n      {action && (\n        <Button variant=\"link\" onClick={action.onClick}>\n          {action.title}\n        </Button>\n      )}\n      {actionSlot}\n      {onClickCollapse && (\n        <Button\n          variant=\"flat\"\n          iconSlot={isCollapsed ? <DownArrowIcon /> : <UpArrowIcon />}\n          onClick={onClickCollapse}\n        />\n      )}\n      {onClickClose && (\n        <Button\n          variant=\"flat\"\n          iconSlot={<CrossIcon />}\n          onClick={onClickClose}\n          aria-label=\"Close\"\n          type=\"button\"\n        />\n      )}\n    </HeaderGrid>\n    {subtitle && <Text variant=\"subheadingSmall\">{subtitle}</Text>}\n  </Header>\n);\n"],"names":["React"],"mappings":";;;;;;;;AA0BO,MAAM,UAAU,GAAG,CAAC,EACzB,EAAE,EACF,KAAK,EACL,QAAQ,EACR,SAAS,EACT,aAAa,GAAG,cAAc,EAC9B,MAAM,EACN,UAAU,EACV,WAAW,EACX,eAAe,EACf,YAAY,GACI,MAChBA,6BAAC,MAAM,EAAA,IAAA;AACL,IAAAA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,IAAA;AACR,QAAA,SAAS,KACRA,cAAC,CAAA,aAAA,CAAA,IAAI,IAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,aAAa,EACjC,EAAA,KAAK,CACD,CACR;AACA,QAAA,MAAM,KACLA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAC,EAAA,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,MAAM,CAAC,OAAO,EAAA,EAC3C,MAAM,CAAC,KAAK,CACN,CACV;QACA,UAAU;AACV,QAAA,eAAe,KACdA,cAAC,CAAA,aAAA,CAAA,MAAM,EACL,EAAA,OAAO,EAAC,MAAM,EACd,QAAQ,EAAE,WAAW,GAAGA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAA,IAAA,CAAG,GAAGA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,IAAA,CAAG,EAC3D,OAAO,EAAE,eAAe,GACxB,CACH;QACA,YAAY,KACXA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAC,MAAM,EACd,QAAQ,EAAEA,cAAC,CAAA,aAAA,CAAA,SAAS,OAAG,EACvB,OAAO,EAAE,YAAY,EACV,YAAA,EAAA,OAAO,EAClB,IAAI,EAAC,QAAQ,EACb,CAAA,CACH,CACU;AACZ,IAAA,QAAQ,IAAIA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,iBAAiB,EAAA,EAAE,QAAQ,CAAQ,CACvD;;;;"}

package/dist/components/Divider/Divider.cjs

@@ -9,8 +9,8 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-function Divider({ className, ...otherProps }) {
-    const classNames = buildClassnames.buildClassnames([Divider_module.divider, className]);
+function Divider({ className, direction = 'horizontal', variant = 'primary', ...otherProps }) {
+    const classNames = buildClassnames.buildClassnames([Divider_module[direction], Divider_module[variant], className]);
     return React__default.default.createElement("div", { className: classNames, ...otherProps });
 }
 

package/dist/components/Divider/Divider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.cjs","sources":["../../../src/components/Divider/Divider.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../utils';\nimport styles from './Divider.module.scss';\n\ntype DividerProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport function Divider({ className, ...otherProps }: DividerProps) {\n  const classNames = buildClassnames([styles.divider, className]);\n  return <div className={classNames} {...otherProps} />;\n}\n"],"names":["buildClassnames","styles","React"],"mappings":";;;;;;;;;;;AAMM,SAAU,OAAO,CAAC,EAAE,SAAS,EAAE,GAAG,UAAU,EAAgB,EAAA;AAChE,IAAA,MAAM,UAAU,GAAGA,+BAAe,CAAC,CAACC,cAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;AAC/D,IAAA,OAAOC,8CAAK,SAAS,EAAE,UAAU,EAAM,GAAA,UAAU,GAAI;AACvD;;;;"}
+{"version":3,"file":"Divider.cjs","sources":["../../../src/components/Divider/Divider.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../utils';\nimport styles from './Divider.module.scss';\n\nexport type DividerProps = React.HTMLAttributes<HTMLDivElement> & {\n  direction?: 'vertical' | 'horizontal';\n  variant?: 'primary' | 'secondary';\n  className?: string;\n};\n\nexport function Divider({\n  className,\n  direction = 'horizontal',\n  variant = 'primary',\n  ...otherProps\n}: DividerProps) {\n  const classNames = buildClassnames([styles[direction], styles[variant], className]);\n\n  return <div className={classNames} {...otherProps} />;\n}\n"],"names":["buildClassnames","styles","React"],"mappings":";;;;;;;;;;;SAUgB,OAAO,CAAC,EACtB,SAAS,EACT,SAAS,GAAG,YAAY,EACxB,OAAO,GAAG,SAAS,EACnB,GAAG,UAAU,EACA,EAAA;AACb,IAAA,MAAM,UAAU,GAAGA,+BAAe,CAAC,CAACC,cAAM,CAAC,SAAS,CAAC,EAAEA,cAAM,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,CAAC;AAEnF,IAAA,OAAOC,8CAAK,SAAS,EAAE,UAAU,EAAM,GAAA,UAAU,GAAI;AACvD;;;;"}

package/dist/components/Divider/Divider.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
-type DividerProps = React.HTMLAttributes<HTMLDivElement>;
-export declare function Divider({ className, ...otherProps }: DividerProps): React.JSX.Element;
-export {};
+export type DividerProps = React.HTMLAttributes<HTMLDivElement> & {
+    direction?: 'vertical' | 'horizontal';
+    variant?: 'primary' | 'secondary';
+    className?: string;
+};
+export declare function Divider({ className, direction, variant, ...otherProps }: DividerProps): React.JSX.Element;

package/dist/components/Divider/Divider.js

@@ -3,8 +3,8 @@ import { buildClassnames } from '../../utils/buildClassnames.js';
 import 'uid/secure';
 import styles from './Divider.module.scss.js';
 
-function Divider({ className, ...otherProps }) {
-    const classNames = buildClassnames([styles.divider, className]);
+function Divider({ className, direction = 'horizontal', variant = 'primary', ...otherProps }) {
+    const classNames = buildClassnames([styles[direction], styles[variant], className]);
     return React__default.createElement("div", { className: classNames, ...otherProps });
 }
 

package/dist/components/Divider/Divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.js","sources":["../../../src/components/Divider/Divider.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../utils';\nimport styles from './Divider.module.scss';\n\ntype DividerProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport function Divider({ className, ...otherProps }: DividerProps) {\n  const classNames = buildClassnames([styles.divider, className]);\n  return <div className={classNames} {...otherProps} />;\n}\n"],"names":["React"],"mappings":";;;;;AAMM,SAAU,OAAO,CAAC,EAAE,SAAS,EAAE,GAAG,UAAU,EAAgB,EAAA;AAChE,IAAA,MAAM,UAAU,GAAG,eAAe,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;AAC/D,IAAA,OAAOA,sCAAK,SAAS,EAAE,UAAU,EAAM,GAAA,UAAU,GAAI;AACvD;;;;"}
+{"version":3,"file":"Divider.js","sources":["../../../src/components/Divider/Divider.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../utils';\nimport styles from './Divider.module.scss';\n\nexport type DividerProps = React.HTMLAttributes<HTMLDivElement> & {\n  direction?: 'vertical' | 'horizontal';\n  variant?: 'primary' | 'secondary';\n  className?: string;\n};\n\nexport function Divider({\n  className,\n  direction = 'horizontal',\n  variant = 'primary',\n  ...otherProps\n}: DividerProps) {\n  const classNames = buildClassnames([styles[direction], styles[variant], className]);\n\n  return <div className={classNames} {...otherProps} />;\n}\n"],"names":["React"],"mappings":";;;;;SAUgB,OAAO,CAAC,EACtB,SAAS,EACT,SAAS,GAAG,YAAY,EACxB,OAAO,GAAG,SAAS,EACnB,GAAG,UAAU,EACA,EAAA;AACb,IAAA,MAAM,UAAU,GAAG,eAAe,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,CAAC;AAEnF,IAAA,OAAOA,sCAAK,SAAS,EAAE,UAAU,EAAM,GAAA,UAAU,GAAI;AACvD;;;;"}

package/dist/components/Divider/Divider.module.scss.cjs

@@ -2,8 +2,8 @@
 
 var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
 
-___$insertStyle("._divider_1bzcp_1 {\n  height: var(--sizes-line);\n  background-color: var(--colors-neutral-grey-base);\n}");
-var styles = {"divider":"_divider_1bzcp_1"};
+___$insertStyle("._horizontal_1rb3w_1 {\n  height: var(--sizes-line);\n}\n\n._vertical_1rb3w_5 {\n  align-self: stretch;\n  width: var(--sizes-line);\n  min-height: var(--sizes-3);\n}\n\n._primary_1rb3w_11 {\n  background-color: var(--colors-neutral-grey-base);\n}\n\n._secondary_1rb3w_15 {\n  background-color: var(--colors-neutral-grey-blue-base);\n}");
+var styles = {"horizontal":"_horizontal_1rb3w_1","vertical":"_vertical_1rb3w_5","primary":"_primary_1rb3w_11","secondary":"_secondary_1rb3w_15"};
 
 module.exports = styles;
 //# sourceMappingURL=Divider.module.scss.cjs.map

package/dist/components/Divider/Divider.module.scss.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.module.scss.cjs","sources":["../../../src/components/Divider/Divider.module.scss"],"sourcesContent":[".divider {\n  height: var(--sizes-line);\n  background-color: var(--colors-neutral-grey-base);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,4GAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA;;;;"}
+{"version":3,"file":"Divider.module.scss.cjs","sources":["../../../src/components/Divider/Divider.module.scss"],"sourcesContent":[".horizontal {\n  height: var(--sizes-line);\n}\n.vertical {\n  align-self: stretch;\n  width: var(--sizes-line);\n  min-height: var(--sizes-3);\n}\n.primary {\n  background-color: var(--colors-neutral-grey-base);\n}\n.secondary {\n  background-color: var(--colors-neutral-grey-blue-base);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,iVAAA;;;;;"}

package/dist/components/Divider/Divider.module.scss.js

@@ -1,7 +1,7 @@
 import insertStyle from '../../_virtual/____insertStyle.js';
 
-insertStyle("._divider_1bzcp_1 {\n  height: var(--sizes-line);\n  background-color: var(--colors-neutral-grey-base);\n}");
-var styles = {"divider":"_divider_1bzcp_1"};
+insertStyle("._horizontal_1rb3w_1 {\n  height: var(--sizes-line);\n}\n\n._vertical_1rb3w_5 {\n  align-self: stretch;\n  width: var(--sizes-line);\n  min-height: var(--sizes-3);\n}\n\n._primary_1rb3w_11 {\n  background-color: var(--colors-neutral-grey-base);\n}\n\n._secondary_1rb3w_15 {\n  background-color: var(--colors-neutral-grey-blue-base);\n}");
+var styles = {"horizontal":"_horizontal_1rb3w_1","vertical":"_vertical_1rb3w_5","primary":"_primary_1rb3w_11","secondary":"_secondary_1rb3w_15"};
 
 export { styles as default };
 //# sourceMappingURL=Divider.module.scss.js.map

package/dist/components/Divider/Divider.module.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.module.scss.js","sources":["../../../src/components/Divider/Divider.module.scss"],"sourcesContent":[".divider {\n  height: var(--sizes-line);\n  background-color: var(--colors-neutral-grey-base);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,4GAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA;;;;"}
+{"version":3,"file":"Divider.module.scss.js","sources":["../../../src/components/Divider/Divider.module.scss"],"sourcesContent":[".horizontal {\n  height: var(--sizes-line);\n}\n.vertical {\n  align-self: stretch;\n  width: var(--sizes-line);\n  min-height: var(--sizes-3);\n}\n.primary {\n  background-color: var(--colors-neutral-grey-base);\n}\n.secondary {\n  background-color: var(--colors-neutral-grey-blue-base);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,iVAAA;;;;;"}

package/dist/components/Divider/index.d.ts

@@ -1 +1,2 @@
 export { Divider } from './Divider';
+export type { DividerProps } from './Divider';

package/dist/components/ViewsContainer/ViewsContainer.module.scss.cjs

@@ -2,8 +2,8 @@
 
 var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
 
-___$insertStyle("._viewsWrapper_1ht5y_1 {\n  overflow-x: scroll;\n  -ms-overflow-style: none; /* for Internet Explorer, Edge */\n  scrollbar-width: none; /* for Firefox */\n  height: inherit;\n  padding: var(--sizes-sm) 6px var(--sizes-sm) var(--sizes-3);\n  margin-left: 0;\n}\n._viewsWrapper_1ht5y_1 ::-webkit-scrollbar {\n  display: none; /* for Chrome, Safari, and Opera */\n}\n._viewsWrapper_1ht5y_1._compact_1ht5y_12 {\n  padding: var(--sizes-xs);\n}\n\n._appearance-primary_1ht5y_16 {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n._menuButton_1ht5y_20 {\n  background-color: white !important;\n  border-radius: var(--sizes-sm);\n}\n._menuButton_1ht5y_20:hover {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n._scrollButton_1ht5y_28 {\n  background-color: white !important;\n}\n._scrollButton_1ht5y_28:disabled {\n  background-color: white !important;\n}\n._scrollButton_1ht5y_28:disabled svg {\n  color: var(--colors-neutral-ink-lightest);\n}\n._scrollButton_1ht5y_28:hover {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n._buttonGroup_1ht5y_41 {\n  padding-right: var(--sizes-sm);\n}");
-var styles = {"viewsWrapper":"_viewsWrapper_1ht5y_1","compact":"_compact_1ht5y_12","appearance-primary":"_appearance-primary_1ht5y_16","menuButton":"_menuButton_1ht5y_20","scrollButton":"_scrollButton_1ht5y_28","buttonGroup":"_buttonGroup_1ht5y_41"};
+___$insertStyle("._viewsWrapper_10igq_1 {\n  overflow-x: scroll;\n  -ms-overflow-style: none; /* for Internet Explorer, Edge */\n  scrollbar-width: none; /* for Firefox */\n  height: inherit;\n  padding: var(--sizes-sm) 6px var(--sizes-sm) 0px;\n  margin-left: 0;\n}\n._viewsWrapper_10igq_1 ::-webkit-scrollbar {\n  display: none; /* for Chrome, Safari, and Opera */\n}\n._viewsWrapper_10igq_1._compact_10igq_12 {\n  padding: var(--sizes-xs);\n}\n\n._appearance-primary_10igq_16 {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n._menuButton_10igq_20 {\n  background-color: white !important;\n  border-radius: var(--sizes-sm);\n}\n._menuButton_10igq_20:hover {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n._scrollButton_10igq_28 {\n  background-color: white !important;\n}\n._scrollButton_10igq_28:disabled {\n  background-color: white !important;\n}\n._scrollButton_10igq_28:disabled svg {\n  color: var(--colors-neutral-ink-lightest);\n}\n._scrollButton_10igq_28:hover {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n._buttonGroup_10igq_41 {\n  padding-right: var(--sizes-sm);\n}");
+var styles = {"viewsWrapper":"_viewsWrapper_10igq_1","compact":"_compact_10igq_12","appearance-primary":"_appearance-primary_10igq_16","menuButton":"_menuButton_10igq_20","scrollButton":"_scrollButton_10igq_28","buttonGroup":"_buttonGroup_10igq_41"};
 
 module.exports = styles;
 //# sourceMappingURL=ViewsContainer.module.scss.cjs.map

package/dist/components/ViewsContainer/ViewsContainer.module.scss.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ViewsContainer.module.scss.cjs","sources":["../../../src/components/ViewsContainer/ViewsContainer.module.scss"],"sourcesContent":[".viewsWrapper {\n  overflow-x: scroll;\n  -ms-overflow-style: none; /* for Internet Explorer, Edge */\n  scrollbar-width: none; /* for Firefox */\n\n  ::-webkit-scrollbar {\n    display: none; /* for Chrome, Safari, and Opera */\n  }\n\n  height: inherit;\n  padding: var(--sizes-sm) 6px var(--sizes-sm) var(--sizes-3);\n  margin-left: 0;\n\n  &.compact {\n    padding: var(--sizes-xs);\n  }\n}\n\n.appearance-primary {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n// using important to override styled-component styles on button\n.menuButton {\n  background-color: white !important;\n  border-radius: var(--sizes-sm);\n\n  &:hover {\n    background-color: var(--colors-neutral-grey-lightest);\n  }\n}\n\n// using important to override styled-component styles on button\n.scrollButton {\n  background-color: white !important;\n\n  &:disabled {\n    background-color: white !important;\n    & svg {\n      color: var(--colors-neutral-ink-lightest);\n    }\n  }\n\n  &:hover {\n    background-color: var(--colors-neutral-grey-lightest);\n  }\n}\n\n.buttonGroup {\n  padding-right: var(--sizes-sm);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,2mCAAA;AACA,aAAA,CAAA,cAAA,CAAA,uBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,oBAAA,CAAA,8BAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,aAAA,CAAA,uBAAA;;;;"}
+{"version":3,"file":"ViewsContainer.module.scss.cjs","sources":["../../../src/components/ViewsContainer/ViewsContainer.module.scss"],"sourcesContent":[".viewsWrapper {\n  overflow-x: scroll;\n  -ms-overflow-style: none; /* for Internet Explorer, Edge */\n  scrollbar-width: none; /* for Firefox */\n\n  ::-webkit-scrollbar {\n    display: none; /* for Chrome, Safari, and Opera */\n  }\n\n  height: inherit;\n  padding: var(--sizes-sm) 6px var(--sizes-sm) 0px;\n  margin-left: 0;\n\n  &.compact {\n    padding: var(--sizes-xs);\n  }\n}\n\n.appearance-primary {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n// using important to override styled-component styles on button\n.menuButton {\n  background-color: white !important;\n  border-radius: var(--sizes-sm);\n\n  &:hover {\n    background-color: var(--colors-neutral-grey-lightest);\n  }\n}\n\n// using important to override styled-component styles on button\n.scrollButton {\n  background-color: white !important;\n\n  &:disabled {\n    background-color: white !important;\n    & svg {\n      color: var(--colors-neutral-ink-lightest);\n    }\n  }\n\n  &:hover {\n    background-color: var(--colors-neutral-grey-lightest);\n  }\n}\n\n.buttonGroup {\n  padding-right: var(--sizes-sm);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,gmCAAA;AACA,aAAA,CAAA,cAAA,CAAA,uBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,oBAAA,CAAA,8BAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,aAAA,CAAA,uBAAA;;;;"}

package/dist/components/ViewsContainer/ViewsContainer.module.scss.js

@@ -1,7 +1,7 @@
 import insertStyle from '../../_virtual/____insertStyle.js';
 
-insertStyle("._viewsWrapper_1ht5y_1 {\n  overflow-x: scroll;\n  -ms-overflow-style: none; /* for Internet Explorer, Edge */\n  scrollbar-width: none; /* for Firefox */\n  height: inherit;\n  padding: var(--sizes-sm) 6px var(--sizes-sm) var(--sizes-3);\n  margin-left: 0;\n}\n._viewsWrapper_1ht5y_1 ::-webkit-scrollbar {\n  display: none; /* for Chrome, Safari, and Opera */\n}\n._viewsWrapper_1ht5y_1._compact_1ht5y_12 {\n  padding: var(--sizes-xs);\n}\n\n._appearance-primary_1ht5y_16 {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n._menuButton_1ht5y_20 {\n  background-color: white !important;\n  border-radius: var(--sizes-sm);\n}\n._menuButton_1ht5y_20:hover {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n._scrollButton_1ht5y_28 {\n  background-color: white !important;\n}\n._scrollButton_1ht5y_28:disabled {\n  background-color: white !important;\n}\n._scrollButton_1ht5y_28:disabled svg {\n  color: var(--colors-neutral-ink-lightest);\n}\n._scrollButton_1ht5y_28:hover {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n._buttonGroup_1ht5y_41 {\n  padding-right: var(--sizes-sm);\n}");
-var styles = {"viewsWrapper":"_viewsWrapper_1ht5y_1","compact":"_compact_1ht5y_12","appearance-primary":"_appearance-primary_1ht5y_16","menuButton":"_menuButton_1ht5y_20","scrollButton":"_scrollButton_1ht5y_28","buttonGroup":"_buttonGroup_1ht5y_41"};
+insertStyle("._viewsWrapper_10igq_1 {\n  overflow-x: scroll;\n  -ms-overflow-style: none; /* for Internet Explorer, Edge */\n  scrollbar-width: none; /* for Firefox */\n  height: inherit;\n  padding: var(--sizes-sm) 6px var(--sizes-sm) 0px;\n  margin-left: 0;\n}\n._viewsWrapper_10igq_1 ::-webkit-scrollbar {\n  display: none; /* for Chrome, Safari, and Opera */\n}\n._viewsWrapper_10igq_1._compact_10igq_12 {\n  padding: var(--sizes-xs);\n}\n\n._appearance-primary_10igq_16 {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n._menuButton_10igq_20 {\n  background-color: white !important;\n  border-radius: var(--sizes-sm);\n}\n._menuButton_10igq_20:hover {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n._scrollButton_10igq_28 {\n  background-color: white !important;\n}\n._scrollButton_10igq_28:disabled {\n  background-color: white !important;\n}\n._scrollButton_10igq_28:disabled svg {\n  color: var(--colors-neutral-ink-lightest);\n}\n._scrollButton_10igq_28:hover {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n._buttonGroup_10igq_41 {\n  padding-right: var(--sizes-sm);\n}");
+var styles = {"viewsWrapper":"_viewsWrapper_10igq_1","compact":"_compact_10igq_12","appearance-primary":"_appearance-primary_10igq_16","menuButton":"_menuButton_10igq_20","scrollButton":"_scrollButton_10igq_28","buttonGroup":"_buttonGroup_10igq_41"};
 
 export { styles as default };
 //# sourceMappingURL=ViewsContainer.module.scss.js.map

package/dist/components/ViewsContainer/ViewsContainer.module.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"ViewsContainer.module.scss.js","sources":["../../../src/components/ViewsContainer/ViewsContainer.module.scss"],"sourcesContent":[".viewsWrapper {\n  overflow-x: scroll;\n  -ms-overflow-style: none; /* for Internet Explorer, Edge */\n  scrollbar-width: none; /* for Firefox */\n\n  ::-webkit-scrollbar {\n    display: none; /* for Chrome, Safari, and Opera */\n  }\n\n  height: inherit;\n  padding: var(--sizes-sm) 6px var(--sizes-sm) var(--sizes-3);\n  margin-left: 0;\n\n  &.compact {\n    padding: var(--sizes-xs);\n  }\n}\n\n.appearance-primary {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n// using important to override styled-component styles on button\n.menuButton {\n  background-color: white !important;\n  border-radius: var(--sizes-sm);\n\n  &:hover {\n    background-color: var(--colors-neutral-grey-lightest);\n  }\n}\n\n// using important to override styled-component styles on button\n.scrollButton {\n  background-color: white !important;\n\n  &:disabled {\n    background-color: white !important;\n    & svg {\n      color: var(--colors-neutral-ink-lightest);\n    }\n  }\n\n  &:hover {\n    background-color: var(--colors-neutral-grey-lightest);\n  }\n}\n\n.buttonGroup {\n  padding-right: var(--sizes-sm);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,2mCAAA;AACA,aAAA,CAAA,cAAA,CAAA,uBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,oBAAA,CAAA,8BAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,aAAA,CAAA,uBAAA;;;;"}
+{"version":3,"file":"ViewsContainer.module.scss.js","sources":["../../../src/components/ViewsContainer/ViewsContainer.module.scss"],"sourcesContent":[".viewsWrapper {\n  overflow-x: scroll;\n  -ms-overflow-style: none; /* for Internet Explorer, Edge */\n  scrollbar-width: none; /* for Firefox */\n\n  ::-webkit-scrollbar {\n    display: none; /* for Chrome, Safari, and Opera */\n  }\n\n  height: inherit;\n  padding: var(--sizes-sm) 6px var(--sizes-sm) 0px;\n  margin-left: 0;\n\n  &.compact {\n    padding: var(--sizes-xs);\n  }\n}\n\n.appearance-primary {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n// using important to override styled-component styles on button\n.menuButton {\n  background-color: white !important;\n  border-radius: var(--sizes-sm);\n\n  &:hover {\n    background-color: var(--colors-neutral-grey-lightest);\n  }\n}\n\n// using important to override styled-component styles on button\n.scrollButton {\n  background-color: white !important;\n\n  &:disabled {\n    background-color: white !important;\n    & svg {\n      color: var(--colors-neutral-ink-lightest);\n    }\n  }\n\n  &:hover {\n    background-color: var(--colors-neutral-grey-lightest);\n  }\n}\n\n.buttonGroup {\n  padding-right: var(--sizes-sm);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,gmCAAA;AACA,aAAA,CAAA,cAAA,CAAA,uBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,oBAAA,CAAA,8BAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,aAAA,CAAA,uBAAA;;;;"}

package/dist/components/index.d.ts

@@ -26,7 +26,7 @@ export { DataTable, type ColumnWidthsType, type ColumnConfig, useCellWidths, use
 export { DescriptionList } from './DescriptionList';
 export { DetailPage } from './DetailPage';
 export { DimensionsInput } from './DimensionsInput';
-export { Divider } from './Divider';
+export { Divider, type DividerProps } from './Divider';
 export { Dropdown } from './Dropdown';
 export { FilterTag } from './FilterTag';
 export { Grid } from './Grid';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veeqo/ui",
-  "version": "13.16.0",
+  "version": "13.18.0",
   "description": "New optimised component library for Veeqo.",
   "author": "Robert Wealthall",
   "license": "ISC",