@veeqo/ui 14.10.2 → 14.10.3

package/dist/components/Card/Card.js

@@ -1,11 +1,38 @@
 import React__default, { useState } from 'react';
+import { motion } from 'framer-motion';
 import { CardHeader } from '../CardHeader/CardHeader.js';
-import { Body, Section, Footer, Surface, FullBleed } from './styled.js';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
+import styles from './Card.module.scss.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 = () => {
@@ -14,7 +41,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(Body, { animate: showBody ? 'expanded' : 'collapsed', variants: collapseAnimationVariants, transition: { duration: 0.3, ease: 'easeOut' } },
+    const bodyMarkup = (React__default.createElement(motion.div, { className: styles.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';\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;;;;"}
+{"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\nexport interface 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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"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._surface_1a6rc_1 {\n  position: relative;\n  width: 100%;\n  background-color: white;\n  border: var(--sizes-line) solid var(--colors-neutral-grey-base);\n  border-radius: var(--radius-md);\n  overflow: hidden;\n  box-sizing: border-box;\n}\n\n/* Elevation levels */\n._elevation-0_1a6rc_12 {\n  box-shadow: none;\n}\n\n._elevation-1_1a6rc_16 {\n  box-shadow: var(--shadows-sm);\n}\n\n._elevation-2_1a6rc_20 {\n  box-shadow: var(--shadows-base);\n}\n\n._elevation-3_1a6rc_24 {\n  box-shadow: var(--shadows-md);\n}\n\n._elevation-4_1a6rc_28 {\n  box-shadow: var(--shadows-lg);\n}\n\n/* Accent bar via pseudo-element */\n._accent-info_1a6rc_33::after,\n._accent-success_1a6rc_34::after,\n._accent-error_1a6rc_35::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: var(--sizes-xs);\n}\n\n._accent-info_1a6rc_33::after {\n  background-color: var(--colors-secondary-blue-base);\n}\n\n._accent-success_1a6rc_34::after {\n  background-color: var(--colors-secondary-green-base);\n}\n\n._accent-error_1a6rc_35::after {\n  background-color: var(--colors-secondary-red-base);\n}\n\n/* Body: motion.div wrapper for collapse */\n._body_1a6rc_57 {\n  overflow-y: hidden;\n}\n._body_1a6rc_57:not(:first-child) > ._section_1a6rc_60:first-child {\n  margin-top: 0;\n}\n\n/* Section */\n._section_1a6rc_60 {\n  padding-right: var(--sizes-md);\n  padding-left: var(--sizes-md);\n  margin-top: var(--sizes-md);\n  margin-bottom: var(--sizes-md);\n  font-family: var(--text-body-font-family);\n  font-size: var(--text-body-font-size);\n  font-weight: var(--text-body-font-weight);\n  line-height: var(--text-body-line-height);\n  color: var(--text-body-color);\n}\n._section_1a6rc_60 + ._section_1a6rc_60 {\n  border-top: var(--sizes-line) solid var(--colors-neutral-grey-base);\n  padding-top: var(--sizes-md);\n}\n\n/* FullBleed */\n._fullBleed_1a6rc_82 {\n  margin-left: calc(-1 * var(--sizes-md));\n  margin-right: calc(-1 * var(--sizes-md));\n}\n\n/* Footer */\n._footer_1a6rc_88 {\n  margin-top: var(--sizes-base);\n  padding: var(--sizes-md);\n  z-index: 2;\n}");
+var styles = {"surface":"_surface_1a6rc_1","elevation-0":"_elevation-0_1a6rc_12","elevation-1":"_elevation-1_1a6rc_16","elevation-2":"_elevation-2_1a6rc_20","elevation-3":"_elevation-3_1a6rc_24","elevation-4":"_elevation-4_1a6rc_28","accent-info":"_accent-info_1a6rc_33","accent-success":"_accent-success_1a6rc_34","accent-error":"_accent-error_1a6rc_35","body":"_body_1a6rc_57","section":"_section_1a6rc_60","fullBleed":"_fullBleed_1a6rc_82","footer":"_footer_1a6rc_88"};
+
+module.exports = styles;
+//# sourceMappingURL=Card.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.module.scss.cjs","sources":["../../../src/components/Card/Card.module.scss"],"sourcesContent":[".surface {\n  position: relative;\n  width: 100%;\n  background-color: white;\n  border: var(--sizes-line) solid var(--colors-neutral-grey-base);\n  border-radius: var(--radius-md);\n  overflow: hidden;\n  box-sizing: border-box;\n}\n\n/* Elevation levels */\n.elevation-0 {\n  box-shadow: none;\n}\n\n.elevation-1 {\n  box-shadow: var(--shadows-sm);\n}\n\n.elevation-2 {\n  box-shadow: var(--shadows-base);\n}\n\n.elevation-3 {\n  box-shadow: var(--shadows-md);\n}\n\n.elevation-4 {\n  box-shadow: var(--shadows-lg);\n}\n\n/* Accent bar via pseudo-element */\n.accent-info::after,\n.accent-success::after,\n.accent-error::after {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: var(--sizes-xs);\n}\n\n.accent-info::after {\n  background-color: var(--colors-secondary-blue-base);\n}\n\n.accent-success::after {\n  background-color: var(--colors-secondary-green-base);\n}\n\n.accent-error::after {\n  background-color: var(--colors-secondary-red-base);\n}\n\n/* Body: motion.div wrapper for collapse */\n.body {\n  overflow-y: hidden;\n\n  &:not(:first-child) > .section:first-child {\n    margin-top: 0;\n  }\n}\n\n/* Section */\n.section {\n  padding-right: var(--sizes-md);\n  padding-left: var(--sizes-md);\n  margin-top: var(--sizes-md);\n  margin-bottom: var(--sizes-md);\n\n  font-family: var(--text-body-font-family);\n  font-size: var(--text-body-font-size);\n  font-weight: var(--text-body-font-weight);\n  line-height: var(--text-body-line-height);\n  color: var(--text-body-color);\n\n  & + & {\n    border-top: var(--sizes-line) solid var(--colors-neutral-grey-base);\n    padding-top: var(--sizes-md);\n  }\n}\n\n/* FullBleed */\n.fullBleed {\n  margin-left: calc(-1 * var(--sizes-md));\n  margin-right: calc(-1 * var(--sizes-md));\n}\n\n/* Footer */\n.footer {\n  margin-top: var(--sizes-base);\n  padding: var(--sizes-md);\n  z-index: 2;\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,8iEAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,QAAA,CAAA,kBAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._surface_1a6rc_1 {\n  position: relative;\n  width: 100%;\n  background-color: white;\n  border: var(--sizes-line) solid var(--colors-neutral-grey-base);\n  border-radius: var(--radius-md);\n  overflow: hidden;\n  box-sizing: border-box;\n}\n\n/* Elevation levels */\n._elevation-0_1a6rc_12 {\n  box-shadow: none;\n}\n\n._elevation-1_1a6rc_16 {\n  box-shadow: var(--shadows-sm);\n}\n\n._elevation-2_1a6rc_20 {\n  box-shadow: var(--shadows-base);\n}\n\n._elevation-3_1a6rc_24 {\n  box-shadow: var(--shadows-md);\n}\n\n._elevation-4_1a6rc_28 {\n  box-shadow: var(--shadows-lg);\n}\n\n/* Accent bar via pseudo-element */\n._accent-info_1a6rc_33::after,\n._accent-success_1a6rc_34::after,\n._accent-error_1a6rc_35::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: var(--sizes-xs);\n}\n\n._accent-info_1a6rc_33::after {\n  background-color: var(--colors-secondary-blue-base);\n}\n\n._accent-success_1a6rc_34::after {\n  background-color: var(--colors-secondary-green-base);\n}\n\n._accent-error_1a6rc_35::after {\n  background-color: var(--colors-secondary-red-base);\n}\n\n/* Body: motion.div wrapper for collapse */\n._body_1a6rc_57 {\n  overflow-y: hidden;\n}\n._body_1a6rc_57:not(:first-child) > ._section_1a6rc_60:first-child {\n  margin-top: 0;\n}\n\n/* Section */\n._section_1a6rc_60 {\n  padding-right: var(--sizes-md);\n  padding-left: var(--sizes-md);\n  margin-top: var(--sizes-md);\n  margin-bottom: var(--sizes-md);\n  font-family: var(--text-body-font-family);\n  font-size: var(--text-body-font-size);\n  font-weight: var(--text-body-font-weight);\n  line-height: var(--text-body-line-height);\n  color: var(--text-body-color);\n}\n._section_1a6rc_60 + ._section_1a6rc_60 {\n  border-top: var(--sizes-line) solid var(--colors-neutral-grey-base);\n  padding-top: var(--sizes-md);\n}\n\n/* FullBleed */\n._fullBleed_1a6rc_82 {\n  margin-left: calc(-1 * var(--sizes-md));\n  margin-right: calc(-1 * var(--sizes-md));\n}\n\n/* Footer */\n._footer_1a6rc_88 {\n  margin-top: var(--sizes-base);\n  padding: var(--sizes-md);\n  z-index: 2;\n}");
+var styles = {"surface":"_surface_1a6rc_1","elevation-0":"_elevation-0_1a6rc_12","elevation-1":"_elevation-1_1a6rc_16","elevation-2":"_elevation-2_1a6rc_20","elevation-3":"_elevation-3_1a6rc_24","elevation-4":"_elevation-4_1a6rc_28","accent-info":"_accent-info_1a6rc_33","accent-success":"_accent-success_1a6rc_34","accent-error":"_accent-error_1a6rc_35","body":"_body_1a6rc_57","section":"_section_1a6rc_60","fullBleed":"_fullBleed_1a6rc_82","footer":"_footer_1a6rc_88"};
+
+export { styles as default };
+//# sourceMappingURL=Card.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.module.scss.js","sources":["../../../src/components/Card/Card.module.scss"],"sourcesContent":[".surface {\n  position: relative;\n  width: 100%;\n  background-color: white;\n  border: var(--sizes-line) solid var(--colors-neutral-grey-base);\n  border-radius: var(--radius-md);\n  overflow: hidden;\n  box-sizing: border-box;\n}\n\n/* Elevation levels */\n.elevation-0 {\n  box-shadow: none;\n}\n\n.elevation-1 {\n  box-shadow: var(--shadows-sm);\n}\n\n.elevation-2 {\n  box-shadow: var(--shadows-base);\n}\n\n.elevation-3 {\n  box-shadow: var(--shadows-md);\n}\n\n.elevation-4 {\n  box-shadow: var(--shadows-lg);\n}\n\n/* Accent bar via pseudo-element */\n.accent-info::after,\n.accent-success::after,\n.accent-error::after {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: var(--sizes-xs);\n}\n\n.accent-info::after {\n  background-color: var(--colors-secondary-blue-base);\n}\n\n.accent-success::after {\n  background-color: var(--colors-secondary-green-base);\n}\n\n.accent-error::after {\n  background-color: var(--colors-secondary-red-base);\n}\n\n/* Body: motion.div wrapper for collapse */\n.body {\n  overflow-y: hidden;\n\n  &:not(:first-child) > .section:first-child {\n    margin-top: 0;\n  }\n}\n\n/* Section */\n.section {\n  padding-right: var(--sizes-md);\n  padding-left: var(--sizes-md);\n  margin-top: var(--sizes-md);\n  margin-bottom: var(--sizes-md);\n\n  font-family: var(--text-body-font-family);\n  font-size: var(--text-body-font-size);\n  font-weight: var(--text-body-font-weight);\n  line-height: var(--text-body-line-height);\n  color: var(--text-body-color);\n\n  & + & {\n    border-top: var(--sizes-line) solid var(--colors-neutral-grey-base);\n    padding-top: var(--sizes-md);\n  }\n}\n\n/* FullBleed */\n.fullBleed {\n  margin-left: calc(-1 * var(--sizes-md));\n  margin-right: calc(-1 * var(--sizes-md));\n}\n\n/* Footer */\n.footer {\n  margin-top: var(--sizes-base);\n  padding: var(--sizes-md);\n  z-index: 2;\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,8iEAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,QAAA,CAAA,kBAAA;;;;"}

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

@@ -1 +1,2 @@
 export { Card } from './Card';
+export type { CardElevation, SurfaceProps } from './Card';

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 styled = require('./styled.cjs');
+var CardHeader_module = require('./CardHeader.module.scss.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(styled.Header, null,
-    React__default.default.createElement(styled.HeaderGrid, null,
+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.headerActions },
         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 { 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;;;;"}
+{"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.headerActions}>\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,aAAa,EAAA;AACjC,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;;;;"}

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 { Header, HeaderGrid } from './styled.js';
+import styles from './CardHeader.module.scss.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, null,
-    React__default.createElement(HeaderGrid, null,
+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.headerActions },
         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 { 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;;;;"}
+{"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.headerActions}>\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,aAAa,EAAA;AACjC,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;;;;"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._header_176rk_1 {\n  padding-top: var(--sizes-md);\n  padding-right: var(--sizes-md);\n  padding-left: var(--sizes-md);\n  margin-bottom: var(--sizes-md);\n}\n._header_176rk_1 > * + * {\n  margin-top: var(--sizes-xs);\n}\n\n._headerActions_176rk_11 {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n}\n._headerActions_176rk_11 > *:first-child {\n  flex: 1;\n}");
+var styles = {"header":"_header_176rk_1","headerActions":"_headerActions_176rk_11"};
+
+module.exports = styles;
+//# sourceMappingURL=CardHeader.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CardHeader.module.scss.cjs","sources":["../../../src/components/CardHeader/CardHeader.module.scss"],"sourcesContent":[".header {\n  padding-top: var(--sizes-md);\n  padding-right: var(--sizes-md);\n  padding-left: var(--sizes-md);\n  margin-bottom: var(--sizes-md);\n\n  & > * + * {\n    margin-top: var(--sizes-xs);\n  }\n}\n\n.headerActions {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n\n  & > *:first-child {\n    flex: 1;\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,mYAAA;AACA,aAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,eAAA,CAAA,yBAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._header_176rk_1 {\n  padding-top: var(--sizes-md);\n  padding-right: var(--sizes-md);\n  padding-left: var(--sizes-md);\n  margin-bottom: var(--sizes-md);\n}\n._header_176rk_1 > * + * {\n  margin-top: var(--sizes-xs);\n}\n\n._headerActions_176rk_11 {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n}\n._headerActions_176rk_11 > *:first-child {\n  flex: 1;\n}");
+var styles = {"header":"_header_176rk_1","headerActions":"_headerActions_176rk_11"};
+
+export { styles as default };
+//# sourceMappingURL=CardHeader.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CardHeader.module.scss.js","sources":["../../../src/components/CardHeader/CardHeader.module.scss"],"sourcesContent":[".header {\n  padding-top: var(--sizes-md);\n  padding-right: var(--sizes-md);\n  padding-left: var(--sizes-md);\n  margin-bottom: var(--sizes-md);\n\n  & > * + * {\n    margin-top: var(--sizes-xs);\n  }\n}\n\n.headerActions {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n\n  & > *:first-child {\n    flex: 1;\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,mYAAA;AACA,aAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,eAAA,CAAA,yBAAA;;;;"}

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

@@ -1,11 +1,13 @@
 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;
@@ -14,7 +16,7 @@ export declare const DimensionsInput: React.ForwardRefExoticComponent<{
     suppressHydrationWarning?: boolean | undefined;
     accessKey?: string | undefined;
     autoFocus?: boolean | undefined;
-    contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
@@ -22,10 +24,9 @@ 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?: "no" | "yes" | undefined;
+    translate?: "yes" | "no" | undefined;
     radioGroup?: string | undefined;
     role?: React.AriaRole | undefined;
     about?: string | undefined;
@@ -61,7 +62,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" | "step" | "date" | "page" | "location" | undefined;
+    'aria-current'?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined;
     'aria-details'?: string | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -70,7 +71,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" | "grid" | "listbox" | "tree" | "true" | "false" | undefined;
+    'aria-haspopup'?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
     'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined;
@@ -262,13 +263,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;
@@ -280,17 +281,16 @@ 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/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?: "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;
+    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;
 } & 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?: ("wrap" | "nowrap" | "wrap-reverse") | undefined;
+    flexWrap?: ("nowrap" | "wrap" | "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?: ("wrap" | "nowrap" | "wrap-reverse") | undefined;
+    flexWrap?: ("nowrap" | "wrap" | "wrap-reverse") | undefined;
     flexGrow?: import("csstype").Property.FlexGrow | undefined;
 } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/LegacyDataTable/SpecificState/styled.d.ts

@@ -7,11 +7,11 @@ declare const EllipseContainer: import("styled-components").StyledComponent<impo
 declare const TitleText: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
     as?: import("../../Text").ValidTextTag | undefined;
     muted?: boolean | 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;
+    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;
 } & import("react").HTMLAttributes<HTMLElement> & import("react").LabelHTMLAttributes<HTMLLabelElement> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
 declare const SubTitleText: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
     as?: import("../../Text").ValidTextTag | undefined;
     muted?: boolean | 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;
+    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;
 } & import("react").HTMLAttributes<HTMLElement> & import("react").LabelHTMLAttributes<HTMLLabelElement> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
 export { SpecificStateContainer, EllipseContainer, TitleText, SubTitleText };

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

@@ -3,7 +3,7 @@ export declare const PageLimitContainer: import("styled-components").StyledCompo
     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?: ("wrap" | "nowrap" | "wrap-reverse") | undefined;
+    flexWrap?: ("nowrap" | "wrap" | "wrap-reverse") | undefined;
     flexGrow?: import("csstype").Property.FlexGrow | undefined;
 } & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
 export declare const PaginationButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("../../hoc/withTokens").WithTokensProps & {
@@ -21,11 +21,13 @@ export declare const PaginationButton: import("styled-components").StyledCompone
 } & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("../../hoc/withTokens").WithTokensProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
 export declare const PageInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<{
     rel?: string | undefined;
+    placeholder?: string | undefined;
     form?: string | undefined;
     slot?: string | undefined;
     style?: import("react").CSSProperties | undefined;
     title?: string | undefined;
     pattern?: string | undefined;
+    list?: string | undefined;
     className?: string | undefined;
     children?: import("react").ReactNode;
     defaultChecked?: boolean | undefined;
@@ -34,7 +36,7 @@ export declare const PageInput: import("styled-components").StyledComponent<impo
     suppressHydrationWarning?: boolean | undefined;
     accessKey?: string | undefined;
     autoFocus?: boolean | undefined;
-    contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
@@ -42,10 +44,9 @@ export declare const PageInput: import("styled-components").StyledComponent<impo
     id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
-    placeholder?: string | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;
     tabIndex?: number | undefined;
-    translate?: "no" | "yes" | undefined;
+    translate?: "yes" | "no" | undefined;
     radioGroup?: string | undefined;
     role?: import("react").AriaRole | undefined;
     about?: string | undefined;
@@ -81,7 +82,7 @@ export declare const PageInput: import("styled-components").StyledComponent<impo
     'aria-colindex'?: number | undefined;
     'aria-colspan'?: number | undefined;
     'aria-controls'?: string | undefined;
-    'aria-current'?: boolean | "time" | "true" | "false" | "step" | "date" | "page" | "location" | undefined;
+    'aria-current'?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined;
     'aria-details'?: string | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -90,7 +91,7 @@ export declare const PageInput: import("styled-components").StyledComponent<impo
     'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined;
     'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-    'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false" | undefined;
+    'aria-haspopup'?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
     'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined;
@@ -282,13 +283,13 @@ export declare const PageInput: import("styled-components").StyledComponent<impo
     onAnimationIterationCapture?: (import("react").AnimationEventHandler<HTMLInputElement> & import("react").AnimationEventHandler<HTMLTextAreaElement>) | undefined;
     onTransitionEnd?: (import("react").TransitionEventHandler<HTMLInputElement> & import("react").TransitionEventHandler<HTMLTextAreaElement>) | undefined;
     onTransitionEndCapture?: (import("react").TransitionEventHandler<HTMLInputElement> & import("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;
@@ -300,17 +301,16 @@ export declare const PageInput: import("styled-components").StyledComponent<impo
     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/PhoneInput/index.d.ts

@@ -1,11 +1,13 @@
 /// <reference types="react" />
 export declare const PhoneInput: import("react").ForwardRefExoticComponent<{
     rel?: string | undefined;
+    placeholder?: string | undefined;
     form?: string | undefined;
     slot?: string | undefined;
     style?: import("react").CSSProperties | undefined;
     title?: string | undefined;
     pattern?: string | undefined;
+    list?: string | undefined;
     className?: string | undefined;
     children?: import("react").ReactNode;
     defaultChecked?: boolean | undefined;
@@ -14,7 +16,7 @@ export declare const PhoneInput: import("react").ForwardRefExoticComponent<{
     suppressHydrationWarning?: boolean | undefined;
     accessKey?: string | undefined;
     autoFocus?: boolean | undefined;
-    contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
@@ -22,10 +24,9 @@ export declare const PhoneInput: import("react").ForwardRefExoticComponent<{
     id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
-    placeholder?: string | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;
     tabIndex?: number | undefined;
-    translate?: "no" | "yes" | undefined;
+    translate?: "yes" | "no" | undefined;
     radioGroup?: string | undefined;
     role?: import("react").AriaRole | undefined;
     about?: string | undefined;
@@ -61,7 +62,7 @@ export declare const PhoneInput: import("react").ForwardRefExoticComponent<{
     'aria-colindex'?: number | undefined;
     'aria-colspan'?: number | undefined;
     'aria-controls'?: string | undefined;
-    'aria-current'?: boolean | "time" | "true" | "false" | "step" | "date" | "page" | "location" | undefined;
+    'aria-current'?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined;
     'aria-details'?: string | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -70,7 +71,7 @@ export declare const PhoneInput: import("react").ForwardRefExoticComponent<{
     'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined;
     'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-    'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false" | undefined;
+    'aria-haspopup'?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
     'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined;
@@ -262,13 +263,13 @@ export declare const PhoneInput: import("react").ForwardRefExoticComponent<{
     onAnimationIterationCapture?: (import("react").AnimationEventHandler<HTMLInputElement> & import("react").AnimationEventHandler<HTMLTextAreaElement>) | undefined;
     onTransitionEnd?: (import("react").TransitionEventHandler<HTMLInputElement> & import("react").TransitionEventHandler<HTMLTextAreaElement>) | undefined;
     onTransitionEndCapture?: (import("react").TransitionEventHandler<HTMLInputElement> & import("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;
@@ -280,17 +281,16 @@ export declare const PhoneInput: import("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("..").TextFieldType | undefined;