@veeqo/ui 14.9.0-beta-1 → 14.9.0

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';\nimport { motion } from 'framer-motion';\n\nimport { CardHeader } from '../CardHeader';\nimport { buildClassnames } from '../../utils';\nimport styles from './Card.module.scss';\n\nexport type CardElevation = 0 | 1 | 2 | 3 | 4;\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\n/* --- Sub-components --- */\n\ninterface SurfaceProps extends React.HTMLAttributes<HTMLDivElement> {\n  elevation?: CardElevation;\n  accent?: 'info' | 'success' | 'error';\n  children?: ReactNode;\n}\n\n/**\n * Stable class used for styled-components selector interpolation.\n * Consumers (e.g. Modal) use `& > ${Card.Surface}` in template literals,\n * which calls `.toString()` and expects a CSS class selector.\n */\nconst SURFACE_STABLE_CLASS = 'veeqo-card-surface';\n\nconst Surface = React.forwardRef<HTMLDivElement, SurfaceProps>(\n  ({ elevation = 1, accent, className, children, ...rest }, ref) => (\n    <div\n      ref={ref}\n      className={buildClassnames([\n        SURFACE_STABLE_CLASS,\n        styles.surface,\n        styles[`elevation-${elevation}`],\n        accent ? styles[`accent-${accent}`] : undefined,\n        className,\n      ])}\n      {...rest}\n    >\n      {children}\n    </div>\n  ),\n);\nSurface.displayName = 'Card.Surface';\nSurface.toString = () => `.${SURFACE_STABLE_CLASS}`;\n\nconst Section = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(\n  ({ className, ...rest }, ref) => (\n    <section ref={ref} className={buildClassnames([styles.section, className])} {...rest} />\n  ),\n);\nSection.displayName = 'Card.Section';\n\nconst FullBleed = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...rest }, ref) => (\n    <div ref={ref} className={buildClassnames([styles.fullBleed, className])} {...rest} />\n  ),\n);\nFullBleed.displayName = 'Card.FullBleed';\n\nconst FOOTER_STABLE_CLASS = 'veeqo-card-footer';\n\nconst Footer = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(\n  ({ className, ...rest }, ref) => (\n    <footer ref={ref} className={buildClassnames([FOOTER_STABLE_CLASS, styles.footer, className])} {...rest} />\n  ),\n);\nFooter.displayName = 'Card.Footer';\nFooter.toString = () => `.${FOOTER_STABLE_CLASS}`;\n\n/* --- Main Card component --- */\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    <motion.div\n      className={styles.body}\n      animate={showBody ? 'expanded' : 'collapsed'}\n      variants={collapseAnimationVariants}\n      transition={{ duration: 0.3, ease: 'easeOut' }}\n    >\n      <Section>{children}</Section>\n    </motion.div>\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","buildClassnames","styles","useState","CardHeader","motion"],"mappings":"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"}
+{"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,IAAA,CAAC;AAED,IAAA,MAAM,UAAU,GAAG,KAAK,IAAI,eAAe,KAAK,SAAS;IACzD,MAAM,YAAY,GAAG,UAAU,KAC7BC,sBAAA,CAAA,aAAA,CAACC,qBAAU,EAAA,EACT,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,EAAA,CAC1D,CACH;IAED,MAAM,QAAQ,GAAG,CAAC,WAAW,IAAI,CAAC,WAAW,KAAK,CAAC,WAAW;AAC9D,IAAA,MAAM,UAAU,IACdD,sBAAA,CAAA,aAAA,CAACE,WAAI,EAAA,EACH,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,EAAA,IAAA,EAAE,QAAQ,CAAW,CACxB,CACR;AAED,IAAA,MAAM,YAAY,GAAG,YAAY,KAAK,SAAS,IAAIH,sBAAA,CAAA,aAAA,CAACI,aAAM,EAAA,IAAA,EAAE,YAAY,EAAE,CAAU;AAEpF,IAAA,QACEJ,sBAAA,CAAA,aAAA,CAACK,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

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-export type CardElevation = 0 | 1 | 2 | 3 | 4;
+import { CardElevation } from './styled';
 type CardAction = {
     title: string;
     onClick: () => void;
@@ -19,16 +19,11 @@ export type CardProps = {
     onClose?: () => void;
     renderFooter?: () => ReactNode;
 };
-interface SurfaceProps extends React.HTMLAttributes<HTMLDivElement> {
-    elevation?: CardElevation;
-    accent?: 'info' | 'success' | 'error';
-    children?: ReactNode;
-}
 export declare const Card: {
     ({ className, style, title, subtitle, headerTitleSlot, headerActionSlot, action, collapsable, elevation, accent, children, onClose, renderFooter, }: CardProps): React.JSX.Element;
-    Surface: React.ForwardRefExoticComponent<SurfaceProps & React.RefAttributes<HTMLDivElement>>;
-    Section: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
-    FullBleed: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-    Footer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
+    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>;
+    Footer: import("styled-components").StyledComponent<"footer", any, {}, never>;
 };
 export {};

package/dist/components/Card/Card.js

@@ -1,38 +1,11 @@
 import React__default, { useState } from 'react';
-import { motion } from 'framer-motion';
 import { CardHeader } from '../CardHeader/CardHeader.js';
-import { buildClassnames } from '../../utils/buildClassnames.js';
-import 'uid/secure';
-import styles from './Card.module.scss.js';
+import { Body, Section, Footer, Surface, FullBleed } from './styled.js';
 
 const collapseAnimationVariants = {
     expanded: { height: 'auto' },
     collapsed: { height: 0 },
 };
-/**
- * Stable class used for styled-components selector interpolation.
- * Consumers (e.g. Modal) use `& > ${Card.Surface}` in template literals,
- * which calls `.toString()` and expects a CSS class selector.
- */
-const SURFACE_STABLE_CLASS = 'veeqo-card-surface';
-const Surface = React__default.forwardRef(({ elevation = 1, accent, className, children, ...rest }, ref) => (React__default.createElement("div", { ref: ref, className: buildClassnames([
-        SURFACE_STABLE_CLASS,
-        styles.surface,
-        styles[`elevation-${elevation}`],
-        accent ? styles[`accent-${accent}`] : undefined,
-        className,
-    ]), ...rest }, children)));
-Surface.displayName = 'Card.Surface';
-Surface.toString = () => `.${SURFACE_STABLE_CLASS}`;
-const Section = React__default.forwardRef(({ className, ...rest }, ref) => (React__default.createElement("section", { ref: ref, className: buildClassnames([styles.section, className]), ...rest })));
-Section.displayName = 'Card.Section';
-const FullBleed = React__default.forwardRef(({ className, ...rest }, ref) => (React__default.createElement("div", { ref: ref, className: buildClassnames([styles.fullBleed, className]), ...rest })));
-FullBleed.displayName = 'Card.FullBleed';
-const FOOTER_STABLE_CLASS = 'veeqo-card-footer';
-const Footer = React__default.forwardRef(({ className, ...rest }, ref) => (React__default.createElement("footer", { ref: ref, className: buildClassnames([FOOTER_STABLE_CLASS, styles.footer, className]), ...rest })));
-Footer.displayName = 'Card.Footer';
-Footer.toString = () => `.${FOOTER_STABLE_CLASS}`;
-/* --- Main Card component --- */
 const Card = ({ className, style, title, subtitle, headerTitleSlot, headerActionSlot, action, collapsable, elevation, accent, children, onClose, renderFooter, }) => {
     const [isCollapsed, setIsCollapsed] = useState(false);
     const toggleCollapsed = () => {
@@ -41,7 +14,7 @@ const Card = ({ className, style, title, subtitle, headerTitleSlot, headerAction
     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(motion.div, { className: styles.body, animate: showBody ? 'expanded' : 'collapsed', variants: collapseAnimationVariants, transition: { duration: 0.3, ease: 'easeOut' } },
+    const bodyMarkup = (React__default.createElement(Body, { animate: showBody ? 'expanded' : 'collapsed', variants: collapseAnimationVariants, transition: { duration: 0.3, ease: 'easeOut' } },
         React__default.createElement(Section, null, children)));
     const footerMarkup = renderFooter !== undefined && React__default.createElement(Footer, null, renderFooter());
     return (React__default.createElement(Surface, { className: className, style: style, elevation: elevation, accent: accent },

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';\nimport { motion } from 'framer-motion';\n\nimport { CardHeader } from '../CardHeader';\nimport { buildClassnames } from '../../utils';\nimport styles from './Card.module.scss';\n\nexport type CardElevation = 0 | 1 | 2 | 3 | 4;\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\n/* --- Sub-components --- */\n\ninterface SurfaceProps extends React.HTMLAttributes<HTMLDivElement> {\n  elevation?: CardElevation;\n  accent?: 'info' | 'success' | 'error';\n  children?: ReactNode;\n}\n\n/**\n * Stable class used for styled-components selector interpolation.\n * Consumers (e.g. Modal) use `& > ${Card.Surface}` in template literals,\n * which calls `.toString()` and expects a CSS class selector.\n */\nconst SURFACE_STABLE_CLASS = 'veeqo-card-surface';\n\nconst Surface = React.forwardRef<HTMLDivElement, SurfaceProps>(\n  ({ elevation = 1, accent, className, children, ...rest }, ref) => (\n    <div\n      ref={ref}\n      className={buildClassnames([\n        SURFACE_STABLE_CLASS,\n        styles.surface,\n        styles[`elevation-${elevation}`],\n        accent ? styles[`accent-${accent}`] : undefined,\n        className,\n      ])}\n      {...rest}\n    >\n      {children}\n    </div>\n  ),\n);\nSurface.displayName = 'Card.Surface';\nSurface.toString = () => `.${SURFACE_STABLE_CLASS}`;\n\nconst Section = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(\n  ({ className, ...rest }, ref) => (\n    <section ref={ref} className={buildClassnames([styles.section, className])} {...rest} />\n  ),\n);\nSection.displayName = 'Card.Section';\n\nconst FullBleed = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...rest }, ref) => (\n    <div ref={ref} className={buildClassnames([styles.fullBleed, className])} {...rest} />\n  ),\n);\nFullBleed.displayName = 'Card.FullBleed';\n\nconst FOOTER_STABLE_CLASS = 'veeqo-card-footer';\n\nconst Footer = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(\n  ({ className, ...rest }, ref) => (\n    <footer ref={ref} className={buildClassnames([FOOTER_STABLE_CLASS, styles.footer, className])} {...rest} />\n  ),\n);\nFooter.displayName = 'Card.Footer';\nFooter.toString = () => `.${FOOTER_STABLE_CLASS}`;\n\n/* --- Main Card component --- */\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    <motion.div\n      className={styles.body}\n      animate={showBody ? 'expanded' : 'collapsed'}\n      variants={collapseAnimationVariants}\n      transition={{ duration: 0.3, ease: 'easeOut' }}\n    >\n      <Section>{children}</Section>\n    </motion.div>\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":"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"}
+{"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,IAAA,CAAC;AAED,IAAA,MAAM,UAAU,GAAG,KAAK,IAAI,eAAe,KAAK,SAAS;IACzD,MAAM,YAAY,GAAG,UAAU,KAC7BA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EACT,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,EAAA,CAC1D,CACH;IAED,MAAM,QAAQ,GAAG,CAAC,WAAW,IAAI,CAAC,WAAW,KAAK,CAAC,WAAW;AAC9D,IAAA,MAAM,UAAU,IACdA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACH,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,EAAA,IAAA,EAAE,QAAQ,CAAW,CACxB,CACR;AAED,IAAA,MAAM,YAAY,GAAG,YAAY,KAAK,SAAS,IAAIA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,IAAA,EAAE,YAAY,EAAE,CAAU;AAEpF,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,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/Card/styled.cjs

@@ -0,0 +1,50 @@
+'use strict';
+
+var styled = require('styled-components');
+var framerMotion = require('framer-motion');
+var shadows = require('../../theme/modules/shadows.cjs');
+var colors = require('../../theme/modules/colors.cjs');
+var sizes = require('../../theme/modules/sizes.cjs');
+var radius = require('../../theme/modules/radius.cjs');
+var text = require('../../theme/modules/text.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+const { grey } = colors.colors.neutral;
+const elevationShadowMap = {
+    0: 'none',
+    1: shadows.Shadows.sm,
+    2: shadows.Shadows.base,
+    3: shadows.Shadows.md,
+    4: shadows.Shadows.lg,
+};
+const accents = {
+    info: colors.colors.secondary.blue.base,
+    success: colors.colors.secondary.green.base,
+    error: colors.colors.secondary.red.base,
+};
+const Footer = styled__default.default.footer.withConfig({ displayName: "vui--Footer", componentId: "vui--livrdi" }) `margin-top:${sizes.sizes.base};padding:${sizes.sizes.md};z-index:2;`;
+const Section = styled__default.default.section.withConfig({ displayName: "vui--Section", componentId: "vui--z99ese" }) `padding-right:${sizes.sizes.md};padding-left:${sizes.sizes.md};margin-top:${sizes.sizes.md};margin-bottom:${sizes.sizes.md};font-family:${text.text.body.fontFamily};font-size:${text.text.body.fontSize};font-weight:${text.text.body.fontWeight};line-height:${text.text.body.lineHeight};color:${text.text.body.color};& + &{border-top:${sizes.sizes.line} solid ${grey.base};padding-top:${sizes.sizes.md};}`;
+const FullBleed = styled__default.default.div.withConfig({ displayName: "vui--FullBleed", componentId: "vui--1lgjeo7" }) `margin-left:-${sizes.sizes.md};margin-right:-${sizes.sizes.md};`;
+const Body = styled__default.default(framerMotion.motion.div).withConfig({ displayName: "vui--Body", componentId: "vui--pfgeh3" }) `overflow-y:hidden;&:not(:first-child)> ${Section}:first-child{margin-top:0;}`;
+const Surface = styled__default.default.div.withConfig({ displayName: "vui--Surface", componentId: "vui--g1wpqa" }) `position:relative;width:100%;background-color:white;border:${sizes.sizes.line} solid ${grey.base};box-shadow:${(props) => props.elevation !== undefined ? elevationShadowMap[props.elevation] : shadows.Shadows.sm};border-radius:${radius.radius.md};overflow:hidden;box-sizing:border-box;${({ accent }) => accent &&
+    `
+    &::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: ${sizes.sizes.xs};
+      background-color: ${accents[accent]};
+    }
+  `}`;
+
+exports.Body = Body;
+exports.Footer = Footer;
+exports.FullBleed = FullBleed;
+exports.Section = Section;
+exports.Surface = Surface;
+//# sourceMappingURL=styled.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/Card/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { motion } from 'framer-motion';\nimport { Shadows } from '../../theme/modules/shadows';\nimport { colors } from '../../theme/modules/colors';\nimport { sizes } from '../../theme/modules/sizes';\nimport { radius } from '../../theme/modules/radius';\nimport { text } from '../../theme/modules/text';\n\nconst { grey } = colors.neutral;\n\nexport type CardElevation = 0 | 1 | 2 | 3 | 4;\n\nconst elevationShadowMap = {\n  0: 'none',\n  1: Shadows.sm,\n  2: Shadows.base,\n  3: Shadows.md,\n  4: Shadows.lg,\n};\n\nconst accents = {\n  info: colors.secondary.blue.base,\n  success: colors.secondary.green.base,\n  error: colors.secondary.red.base,\n};\n\nexport const Footer = styled.footer`\n  margin-top: ${sizes.base};\n  padding: ${sizes.md};\n  z-index: 2;\n`;\n\nexport const Section = styled.section`\n  padding-right: ${sizes.md};\n  padding-left: ${sizes.md};\n  margin-top: ${sizes.md};\n  margin-bottom: ${sizes.md};\n\n  font-family: ${text.body.fontFamily};\n  font-size: ${text.body.fontSize};\n  font-weight: ${text.body.fontWeight};\n  line-height: ${text.body.lineHeight};\n  color: ${text.body.color};\n\n  & + & {\n    border-top: ${sizes.line} solid ${grey.base};\n    padding-top: ${sizes.md};\n  }\n`;\n\nexport const FullBleed = styled.div`\n  margin-left: -${sizes.md};\n  margin-right: -${sizes.md};\n`;\n\nexport const Body = styled(motion.div)`\n  overflow-y: hidden;\n\n  &:not(:first-child) > ${Section}:first-child {\n    margin-top: 0;\n  }\n`;\n\nexport interface SurfaceProps {\n  elevation?: CardElevation;\n  accent?: keyof typeof accents;\n}\n\nexport const Surface = styled.div<SurfaceProps>`\n  position: relative;\n  width: 100%;\n  background-color: white;\n  border: ${sizes.line} solid ${grey.base};\n  box-shadow: ${(props) =>\n    props.elevation !== undefined ? elevationShadowMap[props.elevation] : Shadows.sm};\n  border-radius: ${radius.md};\n  overflow: hidden;\n  box-sizing: border-box;\n\n  ${({ accent }) =>\n    accent &&\n    `\n    &::after {\n      content: \"\";\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      height: ${sizes.xs};\n      background-color: ${accents[accent]};\n    }\n  `}\n`;\n"],"names":["colors","Shadows","styled","sizes","text","motion","radius"],"mappings":";;;;;;;;;;;;;;AAQA,MAAM,EAAE,IAAI,EAAE,GAAGA,aAAM,CAAC,OAAO;AAI/B,MAAM,kBAAkB,GAAG;AACzB,IAAA,CAAC,EAAE,MAAM;IACT,CAAC,EAAEC,eAAO,CAAC,EAAE;IACb,CAAC,EAAEA,eAAO,CAAC,IAAI;IACf,CAAC,EAAEA,eAAO,CAAC,EAAE;IACb,CAAC,EAAEA,eAAO,CAAC,EAAE;CACd;AAED,MAAM,OAAO,GAAG;AACd,IAAA,IAAI,EAAED,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;AAChC,IAAA,OAAO,EAAEA,aAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI;AACpC,IAAA,KAAK,EAAEA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI;CACjC;AAEM,MAAM,MAAM,GAAGE,uBAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,WAAA,EACnBC,WAAK,CAAC,IAAI,CAAA,SAAA,EACbA,WAAK,CAAC,EAAE;AAId,MAAM,OAAO,GAAGD,uBAAM,CAAC,OAAO,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,cAAA,EAClBC,WAAK,CAAC,EAAE,CAAA,cAAA,EACTA,WAAK,CAAC,EAAE,CAAA,YAAA,EACVA,WAAK,CAAC,EAAE,CAAA,eAAA,EACLA,WAAK,CAAC,EAAE,CAAA,aAAA,EAEVC,SAAI,CAAC,IAAI,CAAC,UAAU,CAAA,WAAA,EACtBA,SAAI,CAAC,IAAI,CAAC,QAAQ,CAAA,aAAA,EAChBA,SAAI,CAAC,IAAI,CAAC,UAAU,CAAA,aAAA,EACpBA,SAAI,CAAC,IAAI,CAAC,UAAU,UAC1BA,SAAI,CAAC,IAAI,CAAC,KAAK,CAAA,kBAAA,EAGRD,WAAK,CAAC,IAAI,CAAA,OAAA,EAAU,IAAI,CAAC,IAAI,CAAA,aAAA,EAC5BA,WAAK,CAAC,EAAE;AAIpB,MAAM,SAAS,GAAGD,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,aAAA,EACjBC,WAAK,CAAC,EAAE,CAAA,eAAA,EACPA,WAAK,CAAC,EAAE;AAGpB,MAAM,IAAI,GAAGD,uBAAM,CAACG,mBAAM,CAAC,GAAG,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,uCAAA,EAGZ,OAAO;AAU1B,MAAM,OAAO,GAAGH,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,2DAAA,EAIrBC,WAAK,CAAC,IAAI,CAAA,OAAA,EAAU,IAAI,CAAC,IAAI,CAAA,YAAA,EACzB,CAAC,KAAK,KAClB,KAAK,CAAC,SAAS,KAAK,SAAS,GAAG,kBAAkB,CAAC,KAAK,CAAC,SAAS,CAAC,GAAGF,eAAO,CAAC,EAAE,CAAA,eAAA,EACjEK,aAAM,CAAC,EAAE,CAAA,uCAAA,EAIxB,CAAC,EAAE,MAAM,EAAE,KACX,MAAM;AACN,IAAA;;;;;;;AAOY,cAAA,EAAAH,WAAK,CAAC,EAAE,CAAA;0BACE,OAAO,CAAC,MAAM,CAAC,CAAA;;AAEtC,EAAA,CAAA,CAAA;;;;;;;;"}

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

@@ -0,0 +1,16 @@
+export type CardElevation = 0 | 1 | 2 | 3 | 4;
+declare const accents: {
+    info: string;
+    success: string;
+    error: string;
+};
+export declare const Footer: import("styled-components").StyledComponent<"footer", any, {}, never>;
+export declare const Section: import("styled-components").StyledComponent<"section", any, {}, never>;
+export declare const FullBleed: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Body: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {}, never>;
+export interface SurfaceProps {
+    elevation?: CardElevation;
+    accent?: keyof typeof accents;
+}
+export declare const Surface: import("styled-components").StyledComponent<"div", any, SurfaceProps, never>;
+export {};

package/dist/components/Card/styled.js

@@ -0,0 +1,40 @@
+import styled from 'styled-components';
+import { motion } from 'framer-motion';
+import { Shadows } from '../../theme/modules/shadows.js';
+import { colors } from '../../theme/modules/colors.js';
+import { sizes } from '../../theme/modules/sizes.js';
+import { radius } from '../../theme/modules/radius.js';
+import { text } from '../../theme/modules/text.js';
+
+const { grey } = colors.neutral;
+const elevationShadowMap = {
+    0: 'none',
+    1: Shadows.sm,
+    2: Shadows.base,
+    3: Shadows.md,
+    4: Shadows.lg,
+};
+const accents = {
+    info: colors.secondary.blue.base,
+    success: colors.secondary.green.base,
+    error: colors.secondary.red.base,
+};
+const Footer = styled.footer.withConfig({ displayName: "vui--Footer", componentId: "vui--livrdi" }) `margin-top:${sizes.base};padding:${sizes.md};z-index:2;`;
+const Section = styled.section.withConfig({ displayName: "vui--Section", componentId: "vui--z99ese" }) `padding-right:${sizes.md};padding-left:${sizes.md};margin-top:${sizes.md};margin-bottom:${sizes.md};font-family:${text.body.fontFamily};font-size:${text.body.fontSize};font-weight:${text.body.fontWeight};line-height:${text.body.lineHeight};color:${text.body.color};& + &{border-top:${sizes.line} solid ${grey.base};padding-top:${sizes.md};}`;
+const FullBleed = styled.div.withConfig({ displayName: "vui--FullBleed", componentId: "vui--1lgjeo7" }) `margin-left:-${sizes.md};margin-right:-${sizes.md};`;
+const Body = styled(motion.div).withConfig({ displayName: "vui--Body", componentId: "vui--pfgeh3" }) `overflow-y:hidden;&:not(:first-child)> ${Section}:first-child{margin-top:0;}`;
+const Surface = styled.div.withConfig({ displayName: "vui--Surface", componentId: "vui--g1wpqa" }) `position:relative;width:100%;background-color:white;border:${sizes.line} solid ${grey.base};box-shadow:${(props) => props.elevation !== undefined ? elevationShadowMap[props.elevation] : Shadows.sm};border-radius:${radius.md};overflow:hidden;box-sizing:border-box;${({ accent }) => accent &&
+    `
+    &::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: ${sizes.xs};
+      background-color: ${accents[accent]};
+    }
+  `}`;
+
+export { Body, Footer, FullBleed, Section, Surface };
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sources":["../../../src/components/Card/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { motion } from 'framer-motion';\nimport { Shadows } from '../../theme/modules/shadows';\nimport { colors } from '../../theme/modules/colors';\nimport { sizes } from '../../theme/modules/sizes';\nimport { radius } from '../../theme/modules/radius';\nimport { text } from '../../theme/modules/text';\n\nconst { grey } = colors.neutral;\n\nexport type CardElevation = 0 | 1 | 2 | 3 | 4;\n\nconst elevationShadowMap = {\n  0: 'none',\n  1: Shadows.sm,\n  2: Shadows.base,\n  3: Shadows.md,\n  4: Shadows.lg,\n};\n\nconst accents = {\n  info: colors.secondary.blue.base,\n  success: colors.secondary.green.base,\n  error: colors.secondary.red.base,\n};\n\nexport const Footer = styled.footer`\n  margin-top: ${sizes.base};\n  padding: ${sizes.md};\n  z-index: 2;\n`;\n\nexport const Section = styled.section`\n  padding-right: ${sizes.md};\n  padding-left: ${sizes.md};\n  margin-top: ${sizes.md};\n  margin-bottom: ${sizes.md};\n\n  font-family: ${text.body.fontFamily};\n  font-size: ${text.body.fontSize};\n  font-weight: ${text.body.fontWeight};\n  line-height: ${text.body.lineHeight};\n  color: ${text.body.color};\n\n  & + & {\n    border-top: ${sizes.line} solid ${grey.base};\n    padding-top: ${sizes.md};\n  }\n`;\n\nexport const FullBleed = styled.div`\n  margin-left: -${sizes.md};\n  margin-right: -${sizes.md};\n`;\n\nexport const Body = styled(motion.div)`\n  overflow-y: hidden;\n\n  &:not(:first-child) > ${Section}:first-child {\n    margin-top: 0;\n  }\n`;\n\nexport interface SurfaceProps {\n  elevation?: CardElevation;\n  accent?: keyof typeof accents;\n}\n\nexport const Surface = styled.div<SurfaceProps>`\n  position: relative;\n  width: 100%;\n  background-color: white;\n  border: ${sizes.line} solid ${grey.base};\n  box-shadow: ${(props) =>\n    props.elevation !== undefined ? elevationShadowMap[props.elevation] : Shadows.sm};\n  border-radius: ${radius.md};\n  overflow: hidden;\n  box-sizing: border-box;\n\n  ${({ accent }) =>\n    accent &&\n    `\n    &::after {\n      content: \"\";\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      height: ${sizes.xs};\n      background-color: ${accents[accent]};\n    }\n  `}\n`;\n"],"names":[],"mappings":";;;;;;;;AAQA,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,CAAC,OAAO;AAI/B,MAAM,kBAAkB,GAAG;AACzB,IAAA,CAAC,EAAE,MAAM;IACT,CAAC,EAAE,OAAO,CAAC,EAAE;IACb,CAAC,EAAE,OAAO,CAAC,IAAI;IACf,CAAC,EAAE,OAAO,CAAC,EAAE;IACb,CAAC,EAAE,OAAO,CAAC,EAAE;CACd;AAED,MAAM,OAAO,GAAG;AACd,IAAA,IAAI,EAAE,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;AAChC,IAAA,OAAO,EAAE,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI;AACpC,IAAA,KAAK,EAAE,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI;CACjC;AAEM,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,WAAA,EACnB,KAAK,CAAC,IAAI,CAAA,SAAA,EACb,KAAK,CAAC,EAAE;AAId,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,cAAA,EAClB,KAAK,CAAC,EAAE,CAAA,cAAA,EACT,KAAK,CAAC,EAAE,CAAA,YAAA,EACV,KAAK,CAAC,EAAE,CAAA,eAAA,EACL,KAAK,CAAC,EAAE,CAAA,aAAA,EAEV,IAAI,CAAC,IAAI,CAAC,UAAU,CAAA,WAAA,EACtB,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAA,aAAA,EAChB,IAAI,CAAC,IAAI,CAAC,UAAU,CAAA,aAAA,EACpB,IAAI,CAAC,IAAI,CAAC,UAAU,UAC1B,IAAI,CAAC,IAAI,CAAC,KAAK,CAAA,kBAAA,EAGR,KAAK,CAAC,IAAI,CAAA,OAAA,EAAU,IAAI,CAAC,IAAI,CAAA,aAAA,EAC5B,KAAK,CAAC,EAAE;AAIpB,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,aAAA,EACjB,KAAK,CAAC,EAAE,CAAA,eAAA,EACP,KAAK,CAAC,EAAE;AAGpB,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,uCAAA,EAGZ,OAAO;AAU1B,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,2DAAA,EAIrB,KAAK,CAAC,IAAI,CAAA,OAAA,EAAU,IAAI,CAAC,IAAI,CAAA,YAAA,EACzB,CAAC,KAAK,KAClB,KAAK,CAAC,SAAS,KAAK,SAAS,GAAG,kBAAkB,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC,EAAE,CAAA,eAAA,EACjE,MAAM,CAAC,EAAE,CAAA,uCAAA,EAIxB,CAAC,EAAE,MAAM,EAAE,KACX,MAAM;AACN,IAAA;;;;;;;AAOY,cAAA,EAAA,KAAK,CAAC,EAAE,CAAA;0BACE,OAAO,CAAC,MAAM,CAAC,CAAA;;AAEtC,EAAA,CAAA,CAAA;;;;"}

package/dist/components/CardHeader/CardHeader.cjs

@@ -3,7 +3,7 @@
 var React = require('react');
 var Text = require('../Text/Text.cjs');
 var Button = require('../Button/Button.cjs');
-var CardHeader_module = require('./CardHeader.module.scss.cjs');
+var styled = require('./styled.cjs');
 var CrossIcon = require('../../icons/design-system/components/CrossIcon.cjs');
 var DownArrowIcon = require('../../icons/design-system/components/DownArrowIcon.cjs');
 var UpArrowIcon = require('../../icons/design-system/components/UpArrowIcon.cjs');
@@ -12,8 +12,8 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const CardHeader = ({ id, title, subtitle, titleSlot, headerVariant = 'headingSmall', action, actionSlot, isCollapsed, onClickCollapse, onClickClose, }) => (React__default.default.createElement("header", { className: CardHeader_module.header },
-    React__default.default.createElement("div", { className: CardHeader_module.headerGrid },
+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,
         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,

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 styles from './CardHeader.module.scss';\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 className={styles.header}>\n    <div className={styles.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    </div>\n    {subtitle && <Text variant=\"subheadingSmall\">{subtitle}</Text>}\n  </header>\n);\n"],"names":["React","styles","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,sBAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,SAAS,EAAEC,iBAAM,CAAC,MAAM,EAAA;AAC9B,IAAAD,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,iBAAM,CAAC,UAAU,EAAA;AAC9B,QAAA,SAAS,KACRD,sBAAA,CAAA,aAAA,CAACE,SAAI,IAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,aAAa,EAAA,EACjC,KAAK,CACD,CACR;AACA,QAAA,MAAM,KACLF,sBAAA,CAAA,aAAA,CAACG,aAAM,EAAA,EAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,MAAM,CAAC,OAAO,EAAA,EAC3C,MAAM,CAAC,KAAK,CACN,CACV;QACA,UAAU;AACV,QAAA,eAAe,KACdH,sBAAA,CAAA,aAAA,CAACG,aAAM,EAAA,EACL,OAAO,EAAC,MAAM,EACd,QAAQ,EAAE,WAAW,GAAGH,sBAAA,CAAA,aAAA,CAACI,4BAAa,EAAA,IAAA,CAAG,GAAGJ,sBAAA,CAAA,aAAA,CAACK,0BAAW,EAAA,IAAA,CAAG,EAC3D,OAAO,EAAE,eAAe,GACxB,CACH;QACA,YAAY,KACXL,sBAAA,CAAA,aAAA,CAACG,aAAM,EAAA,EACL,OAAO,EAAC,MAAM,EACd,QAAQ,EAAEH,sBAAA,CAAA,aAAA,CAACM,wBAAS,OAAG,EACvB,OAAO,EAAE,YAAY,EAAA,YAAA,EACV,OAAO,EAClB,IAAI,EAAC,QAAQ,EAAA,CACb,CACH,CACG;AACL,IAAA,QAAQ,IAAIN,sBAAA,CAAA,aAAA,CAACE,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,sBAAA,CAAA,aAAA,CAACG,SAAI,IAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,aAAa,EAAA,EACjC,KAAK,CACD,CACR;AACA,QAAA,MAAM,KACLH,sBAAA,CAAA,aAAA,CAACI,aAAM,EAAA,EAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,MAAM,CAAC,OAAO,EAAA,EAC3C,MAAM,CAAC,KAAK,CACN,CACV;QACA,UAAU;AACV,QAAA,eAAe,KACdJ,sBAAA,CAAA,aAAA,CAACI,aAAM,EAAA,EACL,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,sBAAA,CAAA,aAAA,CAACO,wBAAS,OAAG,EACvB,OAAO,EAAE,YAAY,EAAA,YAAA,EACV,OAAO,EAClB,IAAI,EAAC,QAAQ,EAAA,CACb,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.js

@@ -1,13 +1,13 @@
 import React__default from 'react';
 import { Text } from '../Text/Text.js';
 import { Button } from '../Button/Button.js';
-import styles from './CardHeader.module.scss.js';
+import { Header, HeaderGrid } from './styled.js';
 import { ReactComponent as CrossIcon } from '../../icons/design-system/components/CrossIcon.js';
 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, titleSlot, headerVariant = 'headingSmall', action, actionSlot, isCollapsed, onClickCollapse, onClickClose, }) => (React__default.createElement("header", { className: styles.header },
-    React__default.createElement("div", { className: styles.headerGrid },
+const CardHeader = ({ id, title, subtitle, titleSlot, headerVariant = 'headingSmall', action, actionSlot, isCollapsed, onClickCollapse, onClickClose, }) => (React__default.createElement(Header, null,
+    React__default.createElement(HeaderGrid, null,
         titleSlot || (React__default.createElement(Text, { id: id, variant: headerVariant }, title)),
         action && (React__default.createElement(Button, { variant: "link", onClick: action.onClick }, action.title)),
         actionSlot,

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 styles from './CardHeader.module.scss';\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 className={styles.header}>\n    <div className={styles.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    </div>\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,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,SAAS,EAAE,MAAM,CAAC,MAAM,EAAA;AAC9B,IAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,UAAU,EAAA;AAC9B,QAAA,SAAS,KACRA,cAAA,CAAA,aAAA,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,aAAa,EAAA,EACjC,KAAK,CACD,CACR;AACA,QAAA,MAAM,KACLA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,MAAM,CAAC,OAAO,EAAA,EAC3C,MAAM,CAAC,KAAK,CACN,CACV;QACA,UAAU;AACV,QAAA,eAAe,KACdA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,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,cAAA,CAAA,aAAA,CAAC,SAAS,OAAG,EACvB,OAAO,EAAE,YAAY,EAAA,YAAA,EACV,OAAO,EAClB,IAAI,EAAC,QAAQ,EAAA,CACb,CACH,CACG;AACL,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,cAAA,CAAA,aAAA,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,aAAa,EAAA,EACjC,KAAK,CACD,CACR;AACA,QAAA,MAAM,KACLA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,MAAM,CAAC,OAAO,EAAA,EAC3C,MAAM,CAAC,KAAK,CACN,CACV;QACA,UAAU;AACV,QAAA,eAAe,KACdA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,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,cAAA,CAAA,aAAA,CAAC,SAAS,OAAG,EACvB,OAAO,EAAE,YAAY,EAAA,YAAA,EACV,OAAO,EAClB,IAAI,EAAC,QAAQ,EAAA,CACb,CACH,CACU;AACZ,IAAA,QAAQ,IAAIA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,iBAAiB,EAAA,EAAE,QAAQ,CAAQ,CACvD;;;;"}

package/dist/components/CardHeader/styled.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+var styled = require('styled-components');
+var sizes = require('../../theme/modules/sizes.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+const Header = styled__default.default.header.withConfig({ displayName: "vui--Header", componentId: "vui--oa1a54" }) `padding-top:${sizes.sizes.md};padding-right:${sizes.sizes.md};padding-left:${sizes.sizes.md};margin-bottom:${sizes.sizes.md};& > * + *{margin-top:${sizes.sizes.xs};}`;
+const HeaderGrid = styled__default.default.div.withConfig({ displayName: "vui--HeaderGrid", componentId: "vui--129vg5d" }) `/*${sizes.sizes.base}*/display:flex;justify-content:flex-end;align-items:center;& > *:first-child{flex:1;}`;
+
+exports.Header = Header;
+exports.HeaderGrid = HeaderGrid;
+//# sourceMappingURL=styled.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/CardHeader/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { sizes } from '../../theme/modules/sizes';\n\nexport const Header = styled.header`\n  padding-top: ${sizes.md};\n  padding-right: ${sizes.md};\n  padding-left: ${sizes.md};\n  margin-bottom: ${sizes.md};\n\n  & > * + * {\n    margin-top: ${sizes.xs};\n  }\n`;\n\nexport const HeaderGrid = styled.div`\n  /* display: grid;\n  grid-auto-flow: column;\n  grid-template-columns: 1fr;\n  grid-auto-columns: max-content;\n  column-gap: ${sizes.base};\n  align-items: center; */\n\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n\n  & > *:first-child {\n    flex: 1;\n  }\n`;\n"],"names":["styled","sizes"],"mappings":";;;;;;;;;AAGO,MAAM,MAAM,GAAGA,uBAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,YAAA,EAClBC,WAAK,CAAC,EAAE,CAAA,eAAA,EACNA,WAAK,CAAC,EAAE,CAAA,cAAA,EACTA,WAAK,CAAC,EAAE,CAAA,eAAA,EACPA,WAAK,CAAC,EAAE,CAAA,sBAAA,EAGTA,WAAK,CAAC,EAAE,CAAA,EAAA;AAInB,MAAM,UAAU,GAAGD,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,EAAA,EAKpBC,WAAK,CAAC,IAAI,CAAA,qFAAA;;;;;"}

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

@@ -0,0 +1,2 @@
+export declare const Header: import("styled-components").StyledComponent<"header", any, {}, never>;
+export declare const HeaderGrid: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/CardHeader/styled.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+import { sizes } from '../../theme/modules/sizes.js';
+
+const Header = styled.header.withConfig({ displayName: "vui--Header", componentId: "vui--oa1a54" }) `padding-top:${sizes.md};padding-right:${sizes.md};padding-left:${sizes.md};margin-bottom:${sizes.md};& > * + *{margin-top:${sizes.xs};}`;
+const HeaderGrid = styled.div.withConfig({ displayName: "vui--HeaderGrid", componentId: "vui--129vg5d" }) `/*${sizes.base}*/display:flex;justify-content:flex-end;align-items:center;& > *:first-child{flex:1;}`;
+
+export { Header, HeaderGrid };
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sources":["../../../src/components/CardHeader/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { sizes } from '../../theme/modules/sizes';\n\nexport const Header = styled.header`\n  padding-top: ${sizes.md};\n  padding-right: ${sizes.md};\n  padding-left: ${sizes.md};\n  margin-bottom: ${sizes.md};\n\n  & > * + * {\n    margin-top: ${sizes.xs};\n  }\n`;\n\nexport const HeaderGrid = styled.div`\n  /* display: grid;\n  grid-auto-flow: column;\n  grid-template-columns: 1fr;\n  grid-auto-columns: max-content;\n  column-gap: ${sizes.base};\n  align-items: center; */\n\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n\n  & > *:first-child {\n    flex: 1;\n  }\n`;\n"],"names":[],"mappings":";;;AAGO,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,YAAA,EAClB,KAAK,CAAC,EAAE,CAAA,eAAA,EACN,KAAK,CAAC,EAAE,CAAA,cAAA,EACT,KAAK,CAAC,EAAE,CAAA,eAAA,EACP,KAAK,CAAC,EAAE,CAAA,sBAAA,EAGT,KAAK,CAAC,EAAE,CAAA,EAAA;AAInB,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,EAAA,EAKpB,KAAK,CAAC,IAAI,CAAA,qFAAA;;;;"}

package/dist/components/DimensionsInput/DimensionsInput.d.ts

@@ -1,13 +1,11 @@
 import React from 'react';
 export declare const DimensionsInput: React.ForwardRefExoticComponent<{
     rel?: string | undefined;
-    placeholder?: string | undefined;
     form?: string | undefined;
     slot?: string | undefined;
     style?: React.CSSProperties | undefined;
     title?: string | undefined;
     pattern?: string | undefined;
-    list?: string | undefined;
     className?: string | undefined;
     children?: React.ReactNode;
     defaultChecked?: boolean | undefined;
@@ -16,7 +14,7 @@ export declare const DimensionsInput: React.ForwardRefExoticComponent<{
     suppressHydrationWarning?: boolean | undefined;
     accessKey?: string | undefined;
     autoFocus?: boolean | undefined;
-    contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
+    contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
@@ -24,9 +22,10 @@ export declare const DimensionsInput: React.ForwardRefExoticComponent<{
     id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
+    placeholder?: string | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;
     tabIndex?: number | undefined;
-    translate?: "yes" | "no" | undefined;
+    translate?: "no" | "yes" | undefined;
     radioGroup?: string | undefined;
     role?: React.AriaRole | undefined;
     about?: string | undefined;
@@ -62,7 +61,7 @@ export declare const DimensionsInput: React.ForwardRefExoticComponent<{
     'aria-colindex'?: number | undefined;
     'aria-colspan'?: number | undefined;
     'aria-controls'?: string | undefined;
-    'aria-current'?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
+    'aria-current'?: boolean | "time" | "true" | "false" | "step" | "date" | "page" | "location" | undefined;
     'aria-describedby'?: string | undefined;
     'aria-details'?: string | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -71,7 +70,7 @@ export declare const DimensionsInput: React.ForwardRefExoticComponent<{
     'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined;
     'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-    'aria-haspopup'?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
+    'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false" | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
     'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined;
@@ -263,13 +262,13 @@ export declare const DimensionsInput: React.ForwardRefExoticComponent<{
     onAnimationIterationCapture?: (React.AnimationEventHandler<HTMLInputElement> & React.AnimationEventHandler<HTMLTextAreaElement>) | undefined;
     onTransitionEnd?: (React.TransitionEventHandler<HTMLInputElement> & React.TransitionEventHandler<HTMLTextAreaElement>) | undefined;
     onTransitionEndCapture?: (React.TransitionEventHandler<HTMLInputElement> & React.TransitionEventHandler<HTMLTextAreaElement>) | undefined;
+    alt?: string | undefined;
     disabled?: boolean | undefined;
     formAction?: string | undefined;
     formEncType?: string | undefined;
     formMethod?: string | undefined;
     formNoValidate?: boolean | undefined;
     formTarget?: string | undefined;
-    alt?: string | undefined;
     autoComplete?: string | undefined;
     accept?: string | undefined;
     capture?: boolean | "user" | "environment" | undefined;
@@ -281,16 +280,17 @@ export declare const DimensionsInput: React.ForwardRefExoticComponent<{
     maxLength?: number | undefined;
     minLength?: number | undefined;
     src?: string | undefined;
+    list?: string | undefined;
+    name?: string | undefined;
     height?: string | number | undefined;
     max?: string | number | undefined;
     min?: string | number | undefined;
-    name?: string | undefined;
     width?: string | number | undefined;
-    wrap?: string | undefined;
-    step?: string | number | undefined;
     readOnly?: boolean | undefined;
     required?: boolean | undefined;
+    step?: string | number | undefined;
     rows?: number | undefined;
+    wrap?: string | undefined;
 } & {
     value?: string | undefined;
     type?: import("../TextField").TextFieldType | undefined;

package/dist/components/Dropdown/styled.cjs

@@ -9,18 +9,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const DropdownContainer = styled__default.default(framerMotion.motion(Card.Card.Surface)).withConfig({
-    shouldForwardProp: (prop) => !['useAnchorWidth', 'reversed'].includes(prop),
-}) `
-  display: inline-flex;
-  flex-direction: column;
-  overflow: hidden;
-
-  background-color: white;
-  box-shadow: ${index.theme.shadows.md};
-  border-radius: ${index.theme.radius.base};
-  padding: ${index.theme.sizes.base};
-`;
+const DropdownContainer = styled__default.default(framerMotion.motion(Card.Card.Surface)).withConfig({ displayName: "vui--DropdownContainer", componentId: "vui--1yrw4mw" }) `display:inline-flex;flex-direction:column;overflow:hidden;background-color:white;box-shadow:${index.theme.shadows.md};border-radius:${index.theme.radius.base};padding:${index.theme.sizes.base};`;
 
 exports.DropdownContainer = DropdownContainer;
 //# sourceMappingURL=styled.cjs.map

package/dist/components/Dropdown/styled.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/Dropdown/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { motion } from 'framer-motion';\nimport { theme } from '../../theme';\nimport { Card } from '../Card';\n\nexport const DropdownContainer = styled(motion(Card.Surface)).withConfig({\n  shouldForwardProp: (prop) => !['useAnchorWidth', 'reversed'].includes(prop),\n})<{ useAnchorWidth?: boolean; reversed?: boolean }>`\n  display: inline-flex;\n  flex-direction: column;\n  overflow: hidden;\n\n  background-color: white;\n  box-shadow: ${theme.shadows.md};\n  border-radius: ${theme.radius.base};\n  padding: ${theme.sizes.base};\n`;\n"],"names":["styled","motion","Card","theme"],"mappings":";;;;;;;;;;;AAMO,MAAM,iBAAiB,GAAGA,uBAAM,CAACC,mBAAM,CAACC,SAAI,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC;AACvE,IAAA,iBAAiB,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;AAC5E,CAAA,CAAC,CAAkD;;;;;;gBAMpCC,WAAK,CAAC,OAAO,CAAC,EAAE,CAAA;mBACbA,WAAK,CAAC,MAAM,CAAC,IAAI,CAAA;aACvBA,WAAK,CAAC,KAAK,CAAC,IAAI,CAAA;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/Dropdown/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { motion } from 'framer-motion';\nimport { theme } from '../../theme';\nimport { Card } from '../Card';\n\nexport const DropdownContainer = styled(motion(Card.Surface))`\n  display: inline-flex;\n  flex-direction: column;\n  overflow: hidden;\n\n  background-color: white;\n  box-shadow: ${theme.shadows.md};\n  border-radius: ${theme.radius.base};\n  padding: ${theme.sizes.base};\n`;\n"],"names":["styled","motion","Card","theme"],"mappings":";;;;;;;;;;;AAMO,MAAM,iBAAiB,GAAGA,uBAAM,CAACC,mBAAM,CAACC,SAAI,CAAC,OAAO,CAAC,CAAC,mLAM7CC,WAAK,CAAC,OAAO,CAAC,EAAE,CAAA,eAAA,EACbA,WAAK,CAAC,MAAM,CAAC,IAAI,CAAA,SAAA,EACvBA,WAAK,CAAC,KAAK,CAAC,IAAI;;;;"}

package/dist/components/Dropdown/styled.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare const DropdownContainer: import("styled-components").StyledComponent<import("framer-motion").CustomDomComponent<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: any;
+} & {
+    as?: string | import("react").ComponentType<any> | undefined;
+    forwardedAs?: string | import("react").ComponentType<any> | undefined;
+}>, any, {}, never>;

package/dist/components/Dropdown/styled.js

@@ -3,18 +3,7 @@ import { motion } from 'framer-motion';
 import { theme } from '../../theme/index.js';
 import { Card } from '../Card/Card.js';
 
-const DropdownContainer = styled(motion(Card.Surface)).withConfig({
-    shouldForwardProp: (prop) => !['useAnchorWidth', 'reversed'].includes(prop),
-}) `
-  display: inline-flex;
-  flex-direction: column;
-  overflow: hidden;
-
-  background-color: white;
-  box-shadow: ${theme.shadows.md};
-  border-radius: ${theme.radius.base};
-  padding: ${theme.sizes.base};
-`;
+const DropdownContainer = styled(motion(Card.Surface)).withConfig({ displayName: "vui--DropdownContainer", componentId: "vui--1yrw4mw" }) `display:inline-flex;flex-direction:column;overflow:hidden;background-color:white;box-shadow:${theme.shadows.md};border-radius:${theme.radius.base};padding:${theme.sizes.base};`;
 
 export { DropdownContainer };
 //# sourceMappingURL=styled.js.map

package/dist/components/Dropdown/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/Dropdown/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { motion } from 'framer-motion';\nimport { theme } from '../../theme';\nimport { Card } from '../Card';\n\nexport const DropdownContainer = styled(motion(Card.Surface)).withConfig({\n  shouldForwardProp: (prop) => !['useAnchorWidth', 'reversed'].includes(prop),\n})<{ useAnchorWidth?: boolean; reversed?: boolean }>`\n  display: inline-flex;\n  flex-direction: column;\n  overflow: hidden;\n\n  background-color: white;\n  box-shadow: ${theme.shadows.md};\n  border-radius: ${theme.radius.base};\n  padding: ${theme.sizes.base};\n`;\n"],"names":[],"mappings":";;;;;AAMO,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC;AACvE,IAAA,iBAAiB,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;AAC5E,CAAA,CAAC,CAAkD;;;;;;gBAMpC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA;mBACb,KAAK,CAAC,MAAM,CAAC,IAAI,CAAA;aACvB,KAAK,CAAC,KAAK,CAAC,IAAI,CAAA;;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/Dropdown/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { motion } from 'framer-motion';\nimport { theme } from '../../theme';\nimport { Card } from '../Card';\n\nexport const DropdownContainer = styled(motion(Card.Surface))`\n  display: inline-flex;\n  flex-direction: column;\n  overflow: hidden;\n\n  background-color: white;\n  box-shadow: ${theme.shadows.md};\n  border-radius: ${theme.radius.base};\n  padding: ${theme.sizes.base};\n`;\n"],"names":[],"mappings":";;;;;AAMO,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,mLAM7C,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA,eAAA,EACb,KAAK,CAAC,MAAM,CAAC,IAAI,CAAA,SAAA,EACvB,KAAK,CAAC,KAAK,CAAC,IAAI;;;;"}

package/dist/components/FilterTag/styled.d.ts

@@ -7,7 +7,7 @@ declare const Container: import("styled-components").StyledComponent<import("rea
 declare const GroupLabel: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
     as?: import("../Text").ValidTextTag | undefined;
     muted?: boolean | undefined;
-    variant?: "headingXXL" | "headingXL" | "headingLarge" | "headingMedium" | "headingSmall" | "headingTable" | "subheadingLarge" | "subheadingMedium" | "subheadingSmall" | "subheadingSmallBold" | "body" | "bodySmall" | "bodyBold" | "bodyBoldDark" | "bodySmallBold" | "inputLabel" | "inputLabelSmall" | "hintText" | "placeholder" | "placeholderSmall" | "placeholderCode" | "placeholderCodeSmall" | "error" | "errorSmall" | "successSmall" | "button" | "buttonSmall" | "linkLarge" | "linkMedium" | "link" | "linkSmall" | undefined;
+    variant?: "body" | "button" | "link" | "placeholder" | "headingXXL" | "headingXL" | "headingLarge" | "headingMedium" | "headingSmall" | "headingTable" | "subheadingLarge" | "subheadingMedium" | "subheadingSmall" | "subheadingSmallBold" | "bodySmall" | "bodyBold" | "bodyBoldDark" | "bodySmallBold" | "inputLabel" | "inputLabelSmall" | "hintText" | "placeholderSmall" | "placeholderCode" | "placeholderCodeSmall" | "error" | "errorSmall" | "successSmall" | "buttonSmall" | "linkLarge" | "linkMedium" | "linkSmall" | undefined;
 } & import("react").HTMLAttributes<HTMLElement> & import("react").LabelHTMLAttributes<HTMLLabelElement> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
 declare const MainIcon: import("styled-components").StyledComponent<(props: import("react").SVGProps<SVGSVGElement>) => import("react").JSX.Element, any, {
     $shouldShow?: boolean | undefined;

package/dist/components/Flex/FlexCol/FlexCol.d.ts

@@ -5,6 +5,6 @@ export declare const FlexCol: React.ForwardRefExoticComponent<{
     alignItems?: ("baseline" | "center" | "flex-start" | "flex-end" | "stretch") | undefined;
     justifyContent?: ("center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly") | undefined;
     gap?: keyof import("../../../theme/modules/sizes").SizeScale | undefined;
-    flexWrap?: ("nowrap" | "wrap" | "wrap-reverse") | undefined;
+    flexWrap?: ("wrap" | "nowrap" | "wrap-reverse") | undefined;
     flexGrow?: import("csstype").Property.FlexGrow | undefined;
 } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Flex/FlexRow/FlexRow.d.ts

@@ -5,6 +5,6 @@ export declare const FlexRow: React.ForwardRefExoticComponent<{
     alignItems?: ("baseline" | "center" | "flex-start" | "flex-end" | "stretch") | undefined;
     justifyContent?: ("center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly") | undefined;
     gap?: keyof import("../../../theme/modules/sizes").SizeScale | undefined;
-    flexWrap?: ("nowrap" | "wrap" | "wrap-reverse") | undefined;
+    flexWrap?: ("wrap" | "nowrap" | "wrap-reverse") | undefined;
     flexGrow?: import("csstype").Property.FlexGrow | undefined;
 } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;