@veeqo/ui 14.7.1 → 14.9.0-beta-1

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\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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"}

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/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.headerGrid },
         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.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;;;;"}

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.headerGrid },
         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.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;;;;"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._header_pke2d_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_pke2d_1 > * + * {\n  margin-top: var(--sizes-xs);\n}\n\n._headerGrid_pke2d_11 {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n}\n._headerGrid_pke2d_11 > *:first-child {\n  flex: 1;\n}");
+var styles = {"header":"_header_pke2d_1","headerGrid":"_headerGrid_pke2d_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.headerGrid {\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,6XAAA;AACA,aAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,YAAA,CAAA,sBAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._header_pke2d_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_pke2d_1 > * + * {\n  margin-top: var(--sizes-xs);\n}\n\n._headerGrid_pke2d_11 {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n}\n._headerGrid_pke2d_11 > *:first-child {\n  flex: 1;\n}");
+var styles = {"header":"_header_pke2d_1","headerGrid":"_headerGrid_pke2d_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.headerGrid {\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,6XAAA;AACA,aAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,YAAA,CAAA,sBAAA;;;;"}

package/dist/components/Checkbox/Checkbox.cjs

@@ -2,8 +2,8 @@
 
 var React = require('react');
 var Choice = require('../Choice/Choice.cjs');
-var styled = require('./styled.cjs');
 var generateId = require('../../utils/generateId.cjs');
+var Checkbox_module = require('./Checkbox.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -26,7 +26,7 @@ const Checkbox = ({ id, checked, indeterminate, value, name, hint, disabled, ari
     }, [indeterminate]);
     const ariaDescribedBy = hint ? `hint-${componentId}` : undefined;
     return (React__default.default.createElement(Choice.Choice, { htmlFor: componentId, disabled: disabled, className: className, hint: hint, ...otherProps },
-        React__default.default.createElement(styled.Input, { ref: checkboxRef, id: componentId, type: "checkbox", checked: checked, value: value, name: name, disabled: disabled, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, onChange: handleChange })));
+        React__default.default.createElement("input", { ref: checkboxRef, id: componentId, type: "checkbox", checked: checked, value: value, name: name, disabled: disabled, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, onChange: handleChange, className: Checkbox_module.input })));
 };
 
 exports.Checkbox = Checkbox;

package/dist/components/Checkbox/Checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.cjs","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useMemo } from 'react';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport { Input } from './styled';\nimport { generateId } from '../../utils/generateId';\n\nexport type CheckboxValue = string | number;\n\nexport interface CheckboxProps extends ForwardedChoiceProps {\n  id?: string;\n  checked: boolean;\n  indeterminate?: boolean;\n  value?: CheckboxValue;\n  name?: string;\n  disabled?: boolean;\n  ariaLabel?: string;\n  onChange: (checked: boolean, value?: CheckboxValue, meta?: { shiftKey?: boolean }) => void;\n  className?: string;\n}\n\nexport const Checkbox = ({\n  id,\n  checked,\n  indeterminate,\n  value,\n  name,\n  hint,\n  disabled,\n  ariaLabel,\n  className,\n  onChange,\n  ...otherProps\n}: CheckboxProps) => {\n  const componentId = useMemo(() => id ?? generateId('checkbox'), [id]);\n  const checkboxRef = useRef<HTMLInputElement>(null);\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      onChange(e.currentTarget.checked, value);\n    },\n    [onChange, value],\n  );\n\n  useEffect(() => {\n    if (!checkboxRef.current) return;\n    if (indeterminate === true) {\n      checkboxRef.current.indeterminate = true;\n      return;\n    }\n    checkboxRef.current.indeterminate = false;\n  }, [indeterminate]);\n\n  const ariaDescribedBy = hint ? `hint-${componentId}` : undefined;\n\n  return (\n    <Choice\n      htmlFor={componentId}\n      disabled={disabled}\n      className={className}\n      hint={hint}\n      {...otherProps}\n    >\n      <Input\n        ref={checkboxRef}\n        id={componentId}\n        type=\"checkbox\"\n        checked={checked}\n        value={value}\n        name={name}\n        disabled={disabled}\n        aria-label={ariaLabel}\n        aria-describedby={ariaDescribedBy}\n        onChange={handleChange}\n      />\n    </Choice>\n  );\n};\n"],"names":["useMemo","generateId","useRef","useCallback","useEffect","React","Choice","Input"],"mappings":";;;;;;;;;;;AAmBO,MAAM,QAAQ,GAAG,CAAC,EACvB,EAAE,EACF,OAAO,EACP,aAAa,EACb,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,SAAS,EACT,QAAQ,EACR,GAAG,UAAU,EACC,KAAI;IAClB,MAAM,WAAW,GAAGA,aAAO,CAAC,MAAM,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,MAAA,GAAF,EAAE,GAAIC,qBAAU,CAAC,UAAU,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AACrE,IAAA,MAAM,WAAW,GAAGC,YAAM,CAAmB,IAAI,CAAC;AAElD,IAAA,MAAM,YAAY,GAAGC,iBAAW,CAC9B,CAAC,CAAsC,KAAI;QACzC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC;AAC1C,IAAA,CAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;IAEDC,eAAS,CAAC,MAAK;QACb,IAAI,CAAC,WAAW,CAAC,OAAO;YAAE;QAC1B,IAAI,aAAa,KAAK,IAAI,EAAE;AAC1B,YAAA,WAAW,CAAC,OAAO,CAAC,aAAa,GAAG,IAAI;YACxC;AACD,QAAA;AACD,QAAA,WAAW,CAAC,OAAO,CAAC,aAAa,GAAG,KAAK;AAC3C,IAAA,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC;AAEnB,IAAA,MAAM,eAAe,GAAG,IAAI,GAAG,CAAA,KAAA,EAAQ,WAAW,CAAA,CAAE,GAAG,SAAS;IAEhE,QACEC,qCAACC,aAAM,EAAA,EACL,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,KACN,UAAU,EAAA;AAEd,QAAAD,sBAAA,CAAA,aAAA,CAACE,YAAK,EAAA,EACJ,GAAG,EAAE,WAAW,EAChB,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAAA,YAAA,EACN,SAAS,EAAA,kBAAA,EACH,eAAe,EACjC,QAAQ,EAAE,YAAY,EAAA,CACtB,CACK;AAEb;;;;"}
+{"version":3,"file":"Checkbox.cjs","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useMemo } from 'react';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport { generateId } from '../../utils/generateId';\n\nimport styles from './Checkbox.module.scss';\n\nexport type CheckboxValue = string | number;\n\nexport interface CheckboxProps extends ForwardedChoiceProps {\n  id?: string;\n  checked: boolean;\n  indeterminate?: boolean;\n  value?: CheckboxValue;\n  name?: string;\n  disabled?: boolean;\n  ariaLabel?: string;\n  onChange: (checked: boolean, value?: CheckboxValue, meta?: { shiftKey?: boolean }) => void;\n  className?: string;\n}\n\nexport const Checkbox = ({\n  id,\n  checked,\n  indeterminate,\n  value,\n  name,\n  hint,\n  disabled,\n  ariaLabel,\n  className,\n  onChange,\n  ...otherProps\n}: CheckboxProps) => {\n  const componentId = useMemo(() => id ?? generateId('checkbox'), [id]);\n  const checkboxRef = useRef<HTMLInputElement>(null);\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      onChange(e.currentTarget.checked, value);\n    },\n    [onChange, value],\n  );\n\n  useEffect(() => {\n    if (!checkboxRef.current) return;\n    if (indeterminate === true) {\n      checkboxRef.current.indeterminate = true;\n      return;\n    }\n    checkboxRef.current.indeterminate = false;\n  }, [indeterminate]);\n\n  const ariaDescribedBy = hint ? `hint-${componentId}` : undefined;\n\n  return (\n    <Choice\n      htmlFor={componentId}\n      disabled={disabled}\n      className={className}\n      hint={hint}\n      {...otherProps}\n    >\n      <input\n        ref={checkboxRef}\n        id={componentId}\n        type=\"checkbox\"\n        checked={checked}\n        value={value}\n        name={name}\n        disabled={disabled}\n        aria-label={ariaLabel}\n        aria-describedby={ariaDescribedBy}\n        onChange={handleChange}\n        className={styles.input}\n      />\n    </Choice>\n  );\n};\n"],"names":["useMemo","generateId","useRef","useCallback","useEffect","React","Choice","styles"],"mappings":";;;;;;;;;;;AAoBO,MAAM,QAAQ,GAAG,CAAC,EACvB,EAAE,EACF,OAAO,EACP,aAAa,EACb,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,SAAS,EACT,QAAQ,EACR,GAAG,UAAU,EACC,KAAI;IAClB,MAAM,WAAW,GAAGA,aAAO,CAAC,MAAM,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,MAAA,GAAF,EAAE,GAAIC,qBAAU,CAAC,UAAU,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AACrE,IAAA,MAAM,WAAW,GAAGC,YAAM,CAAmB,IAAI,CAAC;AAElD,IAAA,MAAM,YAAY,GAAGC,iBAAW,CAC9B,CAAC,CAAsC,KAAI;QACzC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC;AAC1C,IAAA,CAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;IAEDC,eAAS,CAAC,MAAK;QACb,IAAI,CAAC,WAAW,CAAC,OAAO;YAAE;QAC1B,IAAI,aAAa,KAAK,IAAI,EAAE;AAC1B,YAAA,WAAW,CAAC,OAAO,CAAC,aAAa,GAAG,IAAI;YACxC;AACD,QAAA;AACD,QAAA,WAAW,CAAC,OAAO,CAAC,aAAa,GAAG,KAAK;AAC3C,IAAA,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC;AAEnB,IAAA,MAAM,eAAe,GAAG,IAAI,GAAG,CAAA,KAAA,EAAQ,WAAW,CAAA,CAAE,GAAG,SAAS;IAEhE,QACEC,qCAACC,aAAM,EAAA,EACL,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,KACN,UAAU,EAAA;QAEdD,sBAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,GAAG,EAAE,WAAW,EAChB,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAAA,YAAA,EACN,SAAS,EAAA,kBAAA,EACH,eAAe,EACjC,QAAQ,EAAE,YAAY,EACtB,SAAS,EAAEE,eAAM,CAAC,KAAK,EAAA,CACvB,CACK;AAEb;;;;"}

package/dist/components/Checkbox/Checkbox.js

@@ -1,7 +1,7 @@
 import React__default, { useMemo, useRef, useCallback, useEffect } from 'react';
 import { Choice } from '../Choice/Choice.js';
-import { Input } from './styled.js';
 import { generateId } from '../../utils/generateId.js';
+import styles from './Checkbox.module.scss.js';
 
 const Checkbox = ({ id, checked, indeterminate, value, name, hint, disabled, ariaLabel, className, onChange, ...otherProps }) => {
     const componentId = useMemo(() => id !== null && id !== void 0 ? id : generateId('checkbox'), [id]);
@@ -20,7 +20,7 @@ const Checkbox = ({ id, checked, indeterminate, value, name, hint, disabled, ari
     }, [indeterminate]);
     const ariaDescribedBy = hint ? `hint-${componentId}` : undefined;
     return (React__default.createElement(Choice, { htmlFor: componentId, disabled: disabled, className: className, hint: hint, ...otherProps },
-        React__default.createElement(Input, { ref: checkboxRef, id: componentId, type: "checkbox", checked: checked, value: value, name: name, disabled: disabled, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, onChange: handleChange })));
+        React__default.createElement("input", { ref: checkboxRef, id: componentId, type: "checkbox", checked: checked, value: value, name: name, disabled: disabled, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, onChange: handleChange, className: styles.input })));
 };
 
 export { Checkbox };

package/dist/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useMemo } from 'react';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport { Input } from './styled';\nimport { generateId } from '../../utils/generateId';\n\nexport type CheckboxValue = string | number;\n\nexport interface CheckboxProps extends ForwardedChoiceProps {\n  id?: string;\n  checked: boolean;\n  indeterminate?: boolean;\n  value?: CheckboxValue;\n  name?: string;\n  disabled?: boolean;\n  ariaLabel?: string;\n  onChange: (checked: boolean, value?: CheckboxValue, meta?: { shiftKey?: boolean }) => void;\n  className?: string;\n}\n\nexport const Checkbox = ({\n  id,\n  checked,\n  indeterminate,\n  value,\n  name,\n  hint,\n  disabled,\n  ariaLabel,\n  className,\n  onChange,\n  ...otherProps\n}: CheckboxProps) => {\n  const componentId = useMemo(() => id ?? generateId('checkbox'), [id]);\n  const checkboxRef = useRef<HTMLInputElement>(null);\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      onChange(e.currentTarget.checked, value);\n    },\n    [onChange, value],\n  );\n\n  useEffect(() => {\n    if (!checkboxRef.current) return;\n    if (indeterminate === true) {\n      checkboxRef.current.indeterminate = true;\n      return;\n    }\n    checkboxRef.current.indeterminate = false;\n  }, [indeterminate]);\n\n  const ariaDescribedBy = hint ? `hint-${componentId}` : undefined;\n\n  return (\n    <Choice\n      htmlFor={componentId}\n      disabled={disabled}\n      className={className}\n      hint={hint}\n      {...otherProps}\n    >\n      <Input\n        ref={checkboxRef}\n        id={componentId}\n        type=\"checkbox\"\n        checked={checked}\n        value={value}\n        name={name}\n        disabled={disabled}\n        aria-label={ariaLabel}\n        aria-describedby={ariaDescribedBy}\n        onChange={handleChange}\n      />\n    </Choice>\n  );\n};\n"],"names":["React"],"mappings":";;;;;AAmBO,MAAM,QAAQ,GAAG,CAAC,EACvB,EAAE,EACF,OAAO,EACP,aAAa,EACb,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,SAAS,EACT,QAAQ,EACR,GAAG,UAAU,EACC,KAAI;IAClB,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,MAAA,GAAF,EAAE,GAAI,UAAU,CAAC,UAAU,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AACrE,IAAA,MAAM,WAAW,GAAG,MAAM,CAAmB,IAAI,CAAC;AAElD,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAsC,KAAI;QACzC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC;AAC1C,IAAA,CAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;IAED,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,WAAW,CAAC,OAAO;YAAE;QAC1B,IAAI,aAAa,KAAK,IAAI,EAAE;AAC1B,YAAA,WAAW,CAAC,OAAO,CAAC,aAAa,GAAG,IAAI;YACxC;AACD,QAAA;AACD,QAAA,WAAW,CAAC,OAAO,CAAC,aAAa,GAAG,KAAK;AAC3C,IAAA,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC;AAEnB,IAAA,MAAM,eAAe,GAAG,IAAI,GAAG,CAAA,KAAA,EAAQ,WAAW,CAAA,CAAE,GAAG,SAAS;IAEhE,QACEA,6BAAC,MAAM,EAAA,EACL,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,KACN,UAAU,EAAA;AAEd,QAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EACJ,GAAG,EAAE,WAAW,EAChB,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAAA,YAAA,EACN,SAAS,EAAA,kBAAA,EACH,eAAe,EACjC,QAAQ,EAAE,YAAY,EAAA,CACtB,CACK;AAEb;;;;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useMemo } from 'react';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport { generateId } from '../../utils/generateId';\n\nimport styles from './Checkbox.module.scss';\n\nexport type CheckboxValue = string | number;\n\nexport interface CheckboxProps extends ForwardedChoiceProps {\n  id?: string;\n  checked: boolean;\n  indeterminate?: boolean;\n  value?: CheckboxValue;\n  name?: string;\n  disabled?: boolean;\n  ariaLabel?: string;\n  onChange: (checked: boolean, value?: CheckboxValue, meta?: { shiftKey?: boolean }) => void;\n  className?: string;\n}\n\nexport const Checkbox = ({\n  id,\n  checked,\n  indeterminate,\n  value,\n  name,\n  hint,\n  disabled,\n  ariaLabel,\n  className,\n  onChange,\n  ...otherProps\n}: CheckboxProps) => {\n  const componentId = useMemo(() => id ?? generateId('checkbox'), [id]);\n  const checkboxRef = useRef<HTMLInputElement>(null);\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      onChange(e.currentTarget.checked, value);\n    },\n    [onChange, value],\n  );\n\n  useEffect(() => {\n    if (!checkboxRef.current) return;\n    if (indeterminate === true) {\n      checkboxRef.current.indeterminate = true;\n      return;\n    }\n    checkboxRef.current.indeterminate = false;\n  }, [indeterminate]);\n\n  const ariaDescribedBy = hint ? `hint-${componentId}` : undefined;\n\n  return (\n    <Choice\n      htmlFor={componentId}\n      disabled={disabled}\n      className={className}\n      hint={hint}\n      {...otherProps}\n    >\n      <input\n        ref={checkboxRef}\n        id={componentId}\n        type=\"checkbox\"\n        checked={checked}\n        value={value}\n        name={name}\n        disabled={disabled}\n        aria-label={ariaLabel}\n        aria-describedby={ariaDescribedBy}\n        onChange={handleChange}\n        className={styles.input}\n      />\n    </Choice>\n  );\n};\n"],"names":["React"],"mappings":";;;;;AAoBO,MAAM,QAAQ,GAAG,CAAC,EACvB,EAAE,EACF,OAAO,EACP,aAAa,EACb,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,SAAS,EACT,QAAQ,EACR,GAAG,UAAU,EACC,KAAI;IAClB,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,MAAA,GAAF,EAAE,GAAI,UAAU,CAAC,UAAU,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AACrE,IAAA,MAAM,WAAW,GAAG,MAAM,CAAmB,IAAI,CAAC;AAElD,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAsC,KAAI;QACzC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC;AAC1C,IAAA,CAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;IAED,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,WAAW,CAAC,OAAO;YAAE;QAC1B,IAAI,aAAa,KAAK,IAAI,EAAE;AAC1B,YAAA,WAAW,CAAC,OAAO,CAAC,aAAa,GAAG,IAAI;YACxC;AACD,QAAA;AACD,QAAA,WAAW,CAAC,OAAO,CAAC,aAAa,GAAG,KAAK;AAC3C,IAAA,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC;AAEnB,IAAA,MAAM,eAAe,GAAG,IAAI,GAAG,CAAA,KAAA,EAAQ,WAAW,CAAA,CAAE,GAAG,SAAS;IAEhE,QACEA,6BAAC,MAAM,EAAA,EACL,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,KACN,UAAU,EAAA;QAEdA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,GAAG,EAAE,WAAW,EAChB,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAAA,YAAA,EACN,SAAS,EAAA,kBAAA,EACH,eAAe,EACjC,QAAQ,EAAE,YAAY,EACtB,SAAS,EAAE,MAAM,CAAC,KAAK,EAAA,CACvB,CACK;AAEb;;;;"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._input_r02q7_1 {\n  appearance: none;\n  width: 18px;\n  height: 18px;\n  background-color: transparent;\n  border: 2px solid var(--colors-neutral-ink-lightest);\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  flex-shrink: 0;\n  transition: box-shadow 0.1s, background-color 0.1s;\n}\n._input_r02q7_1:checked {\n  background-color: var(--colors-secondary-blue-base);\n  border-color: var(--colors-secondary-blue-base);\n  background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='white' /></svg>\");\n  background-repeat: no-repeat;\n  background-size: var(--sizes-4);\n  background-position: center;\n}\n._input_r02q7_1:hover {\n  border-color: var(--colors-secondary-blue-base);\n}\n._input_r02q7_1:active {\n  border-color: var(--colors-secondary-blue-base);\n}\n._input_r02q7_1:focus {\n  box-shadow: 0 0 0 var(--sizes-xs) var(--colors-secondary-blue-light);\n  outline: 0;\n}\n._input_r02q7_1:indeterminate {\n  background-color: var(--colors-secondary-blue-base);\n  border-color: var(--colors-secondary-blue-base);\n  background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='white'/></svg>\");\n  background-repeat: no-repeat;\n  background-size: var(--sizes-4);\n  background-position: center;\n}\n._input_r02q7_1:disabled {\n  box-shadow: none;\n  background-color: var(--colors-neutral-grey-base);\n  border-color: var(--colors-neutral-grey-base);\n  color: var(--colors-neutral-ink-light);\n  cursor: default;\n}\n._input_r02q7_1:checked:disabled {\n  background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='%23637381' /></svg>\");\n}\n._input_r02q7_1:indeterminate:disabled {\n  background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='%23637381'/></svg>\");\n}");
+var styles = {"input":"_input_r02q7_1"};
+
+module.exports = styles;
+//# sourceMappingURL=Checkbox.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.module.scss.cjs","sources":["../../../src/components/Checkbox/Checkbox.module.scss"],"sourcesContent":[".input {\n  appearance: none;\n  width: 18px;\n  height: 18px;\n  background-color: transparent;\n  border: 2px solid var(--colors-neutral-ink-lightest);\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  flex-shrink: 0;\n  transition:\n    box-shadow 0.1s,\n    background-color 0.1s;\n\n  &:checked {\n    background-color: var(--colors-secondary-blue-base);\n    border-color: var(--colors-secondary-blue-base);\n    background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='white' /></svg>\");\n    background-repeat: no-repeat;\n    background-size: var(--sizes-4);\n    background-position: center;\n  }\n\n  &:hover {\n    border-color: var(--colors-secondary-blue-base);\n  }\n\n  &:active {\n    border-color: var(--colors-secondary-blue-base);\n  }\n\n  &:focus {\n    box-shadow: 0 0 0 var(--sizes-xs) var(--colors-secondary-blue-light);\n    outline: 0;\n  }\n\n  &:indeterminate {\n    background-color: var(--colors-secondary-blue-base);\n    border-color: var(--colors-secondary-blue-base);\n    background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='white'/></svg>\");\n    background-repeat: no-repeat;\n    background-size: var(--sizes-4);\n    background-position: center;\n  }\n\n  &:disabled {\n    box-shadow: none;\n    background-color: var(--colors-neutral-grey-base);\n    border-color: var(--colors-neutral-grey-base);\n    color: var(--colors-neutral-ink-light);\n    cursor: default;\n  }\n\n  &:checked:disabled {\n    background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='%23637381' /></svg>\");\n  }\n\n  &:indeterminate:disabled {\n    background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='%23637381'/></svg>\");\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,2zEAAA;AACA,aAAA,CAAA,OAAA,CAAA,gBAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._input_r02q7_1 {\n  appearance: none;\n  width: 18px;\n  height: 18px;\n  background-color: transparent;\n  border: 2px solid var(--colors-neutral-ink-lightest);\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  flex-shrink: 0;\n  transition: box-shadow 0.1s, background-color 0.1s;\n}\n._input_r02q7_1:checked {\n  background-color: var(--colors-secondary-blue-base);\n  border-color: var(--colors-secondary-blue-base);\n  background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='white' /></svg>\");\n  background-repeat: no-repeat;\n  background-size: var(--sizes-4);\n  background-position: center;\n}\n._input_r02q7_1:hover {\n  border-color: var(--colors-secondary-blue-base);\n}\n._input_r02q7_1:active {\n  border-color: var(--colors-secondary-blue-base);\n}\n._input_r02q7_1:focus {\n  box-shadow: 0 0 0 var(--sizes-xs) var(--colors-secondary-blue-light);\n  outline: 0;\n}\n._input_r02q7_1:indeterminate {\n  background-color: var(--colors-secondary-blue-base);\n  border-color: var(--colors-secondary-blue-base);\n  background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='white'/></svg>\");\n  background-repeat: no-repeat;\n  background-size: var(--sizes-4);\n  background-position: center;\n}\n._input_r02q7_1:disabled {\n  box-shadow: none;\n  background-color: var(--colors-neutral-grey-base);\n  border-color: var(--colors-neutral-grey-base);\n  color: var(--colors-neutral-ink-light);\n  cursor: default;\n}\n._input_r02q7_1:checked:disabled {\n  background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='%23637381' /></svg>\");\n}\n._input_r02q7_1:indeterminate:disabled {\n  background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='%23637381'/></svg>\");\n}");
+var styles = {"input":"_input_r02q7_1"};
+
+export { styles as default };
+//# sourceMappingURL=Checkbox.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.module.scss.js","sources":["../../../src/components/Checkbox/Checkbox.module.scss"],"sourcesContent":[".input {\n  appearance: none;\n  width: 18px;\n  height: 18px;\n  background-color: transparent;\n  border: 2px solid var(--colors-neutral-ink-lightest);\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  flex-shrink: 0;\n  transition:\n    box-shadow 0.1s,\n    background-color 0.1s;\n\n  &:checked {\n    background-color: var(--colors-secondary-blue-base);\n    border-color: var(--colors-secondary-blue-base);\n    background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='white' /></svg>\");\n    background-repeat: no-repeat;\n    background-size: var(--sizes-4);\n    background-position: center;\n  }\n\n  &:hover {\n    border-color: var(--colors-secondary-blue-base);\n  }\n\n  &:active {\n    border-color: var(--colors-secondary-blue-base);\n  }\n\n  &:focus {\n    box-shadow: 0 0 0 var(--sizes-xs) var(--colors-secondary-blue-light);\n    outline: 0;\n  }\n\n  &:indeterminate {\n    background-color: var(--colors-secondary-blue-base);\n    border-color: var(--colors-secondary-blue-base);\n    background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='white'/></svg>\");\n    background-repeat: no-repeat;\n    background-size: var(--sizes-4);\n    background-position: center;\n  }\n\n  &:disabled {\n    box-shadow: none;\n    background-color: var(--colors-neutral-grey-base);\n    border-color: var(--colors-neutral-grey-base);\n    color: var(--colors-neutral-ink-light);\n    cursor: default;\n  }\n\n  &:checked:disabled {\n    background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='%23637381' /></svg>\");\n  }\n\n  &:indeterminate:disabled {\n    background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='%23637381'/></svg>\");\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,2zEAAA;AACA,aAAA,CAAA,OAAA,CAAA,gBAAA;;;;"}

package/dist/components/Choice/Choice.cjs

@@ -1,11 +1,14 @@
 'use strict';
 
 var React = require('react');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+require('uid/secure');
 var Stack = require('../Stack/Stack.cjs');
 var index = require('../../theme/index.cjs');
-var styled = require('./components/styled.cjs');
+var Tooltip = require('../Tooltip/Tooltip.cjs');
 var HelpIcon = require('../../icons/design-system/components/HelpIcon.cjs');
 var Text = require('../Text/Text.cjs');
+var Choice_module = require('./Choice.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -19,23 +22,30 @@ const generateClassNames = (prefix) => ({
 });
 const Choice = ({ htmlFor, className, label, hint, tooltip, tooltipContent, error, bordered, Badge, Accessory, Footer, children, disabled = false, labelVariant = 'body', inputPosition = 'left', }) => {
     const classNames = generateClassNames(className);
-    const contentMarkup = (React__default.default.createElement(styled.RootLayout, null,
-        inputPosition === 'left' && (React__default.default.createElement(styled.InputLayout, { align: Accessory ? 'center' : 'top' }, children)),
-        Accessory && React__default.default.createElement(styled.AccessoryLayout, null, Accessory),
-        label || hint || error || Badge || Footer ? (React__default.default.createElement(styled.TextLayout, null,
+    const inputLayoutClass = [
+        Choice_module['input-layout'],
+        Accessory ? Choice_module['align-center'] : Choice_module['align-top'],
+    ].join(' ');
+    const wrapperClass = buildClassnames.buildClassnames([
+        Choice_module.wrapper,
+        bordered && Choice_module.bordered,
+        disabled && Choice_module.disabled,
+        className,
+    ]);
+    const contentMarkup = (React__default.default.createElement("div", { className: Choice_module['root-layout'] },
+        inputPosition === 'left' && React__default.default.createElement("div", { className: inputLayoutClass }, children),
+        Accessory && React__default.default.createElement("div", { className: Choice_module['accessory-layout'] }, Accessory),
+        label || hint || error || Badge || Footer ? (React__default.default.createElement("div", { className: Choice_module['text-layout'] },
             React__default.default.createElement(Stack.Stack, { direction: "horizontal", alignY: "center", spacing: "sm" },
                 Badge,
                 label && (React__default.default.createElement(Text.Text, { variant: labelVariant, className: classNames.label }, label)),
-                (tooltip || tooltipContent) && (React__default.default.createElement(styled.BlockTooltip, { text: tooltip, content: tooltipContent, className: classNames.tooltip },
+                (tooltip || tooltipContent) && (React__default.default.createElement(Tooltip.Tooltip, { text: tooltip, content: tooltipContent, className: classNames.tooltip },
                     React__default.default.createElement(HelpIcon.ReactComponent, { "data-testid": "tooltip-help", name: "help", width: index.theme.sizes.base, color: index.theme.colors.neutral.ink.lightest })))),
             hint && (React__default.default.createElement(Text.Text, { id: `hint-${htmlFor}`, variant: "hintText", className: classNames.hint }, hint)),
             error && (React__default.default.createElement(Text.Text, { variant: "error", className: classNames.error }, error)),
             Footer)) : null,
-        inputPosition === 'right' && (React__default.default.createElement(styled.InputLayout, { align: Accessory ? 'center' : 'top' }, children))));
-    if (bordered) {
-        return (React__default.default.createElement(styled.BorderedWrapper, { disabled: disabled, className: className }, contentMarkup));
-    }
-    return (React__default.default.createElement(styled.Wrapper, { disabled: disabled, className: className }, contentMarkup));
+        inputPosition === 'right' && React__default.default.createElement("div", { className: inputLayoutClass }, children)));
+    return (React__default.default.createElement("label", { htmlFor: htmlFor, className: wrapperClass }, contentMarkup));
 };
 
 exports.Choice = Choice;

package/dist/components/Choice/Choice.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Choice.cjs","sources":["../../../src/components/Choice/Choice.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { Stack } from '../Stack';\nimport { theme } from '../../theme';\n\nimport {\n  Wrapper,\n  BorderedWrapper,\n  RootLayout,\n  InputLayout,\n  AccessoryLayout,\n  TextLayout,\n  BlockTooltip,\n} from './components/styled';\nimport { HelpIcon } from '../../icons';\nimport { Text } from '../Text';\nimport { TextVariant } from '../Text/types';\n\nexport interface ForwardedChoiceProps {\n  className?: string;\n  disabled?: boolean;\n  label?: ReactNode;\n  hint?: ReactNode;\n  tooltip?: string;\n  tooltipContent?: ReactNode;\n  error?: ReactNode;\n  bordered?: boolean;\n  Badge?: ReactNode;\n  Accessory?: ReactNode;\n  Footer?: ReactNode;\n  inputPosition?: 'left' | 'right';\n  labelVariant?: TextVariant;\n}\n\nexport interface ChoiceProps extends ForwardedChoiceProps {\n  htmlFor: string;\n  children: ReactNode;\n}\n\nconst generateClassNames = (prefix?: string): any => ({\n  hint: prefix ? 'choice__hint' : undefined,\n  label: prefix ? 'choice__label' : undefined,\n  tooltip: prefix ? 'choice__tooltip' : undefined,\n  error: prefix ? 'choice__error' : undefined,\n});\n\nexport const Choice = ({\n  htmlFor,\n  className,\n  label,\n  hint,\n  tooltip,\n  tooltipContent,\n  error,\n  bordered,\n  Badge,\n  Accessory,\n  Footer,\n  children,\n  disabled = false,\n  labelVariant = 'body',\n  inputPosition = 'left',\n}: ChoiceProps) => {\n  const classNames = generateClassNames(className);\n\n  const contentMarkup = (\n    <RootLayout>\n      {inputPosition === 'left' && (\n        <InputLayout align={Accessory ? 'center' : 'top'}>{children}</InputLayout>\n      )}\n      {Accessory && <AccessoryLayout>{Accessory}</AccessoryLayout>}\n      {label || hint || error || Badge || Footer ? (\n        <TextLayout>\n          <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"sm\">\n            {Badge}\n            {label && (\n              <Text variant={labelVariant} className={classNames.label}>\n                {label}\n              </Text>\n            )}\n            {(tooltip || tooltipContent) && (\n              <BlockTooltip text={tooltip} content={tooltipContent} className={classNames.tooltip}>\n                <HelpIcon\n                  data-testid=\"tooltip-help\"\n                  name=\"help\"\n                  width={theme.sizes.base}\n                  color={theme.colors.neutral.ink.lightest}\n                />\n              </BlockTooltip>\n            )}\n          </Stack>\n          {hint && (\n            <Text id={`hint-${htmlFor}`} variant=\"hintText\" className={classNames.hint}>\n              {hint}\n            </Text>\n          )}\n          {error && (\n            <Text variant=\"error\" className={classNames.error}>\n              {error}\n            </Text>\n          )}\n          {Footer}\n        </TextLayout>\n      ) : null}\n      {inputPosition === 'right' && (\n        <InputLayout align={Accessory ? 'center' : 'top'}>{children}</InputLayout>\n      )}\n    </RootLayout>\n  );\n\n  if (bordered) {\n    return (\n      <BorderedWrapper disabled={disabled} className={className}>\n        {contentMarkup}\n      </BorderedWrapper>\n    );\n  }\n\n  return (\n    <Wrapper disabled={disabled} className={className}>\n      {contentMarkup}\n    </Wrapper>\n  );\n};\n"],"names":["React","RootLayout","InputLayout","AccessoryLayout","TextLayout","Stack","Text","BlockTooltip","HelpIcon","theme","BorderedWrapper","Wrapper"],"mappings":"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"}
+{"version":3,"file":"Choice.cjs","sources":["../../../src/components/Choice/Choice.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { buildClassnames } from '../../utils';\nimport { Stack } from '../Stack';\nimport { theme } from '../../theme';\nimport { Tooltip } from '../Tooltip';\nimport { HelpIcon } from '../../icons';\nimport { Text } from '../Text';\nimport { TextVariant } from '../Text/types';\n\nimport styles from './Choice.module.scss';\n\nexport interface ForwardedChoiceProps {\n  className?: string;\n  disabled?: boolean;\n  label?: ReactNode;\n  hint?: ReactNode;\n  tooltip?: string;\n  tooltipContent?: ReactNode;\n  error?: ReactNode;\n  bordered?: boolean;\n  Badge?: ReactNode;\n  Accessory?: ReactNode;\n  Footer?: ReactNode;\n  inputPosition?: 'left' | 'right';\n  labelVariant?: TextVariant;\n}\n\nexport interface ChoiceProps extends ForwardedChoiceProps {\n  htmlFor: string;\n  children: ReactNode;\n}\n\nconst generateClassNames = (prefix?: string): any => ({\n  hint: prefix ? 'choice__hint' : undefined,\n  label: prefix ? 'choice__label' : undefined,\n  tooltip: prefix ? 'choice__tooltip' : undefined,\n  error: prefix ? 'choice__error' : undefined,\n});\n\nexport const Choice = ({\n  htmlFor,\n  className,\n  label,\n  hint,\n  tooltip,\n  tooltipContent,\n  error,\n  bordered,\n  Badge,\n  Accessory,\n  Footer,\n  children,\n  disabled = false,\n  labelVariant = 'body',\n  inputPosition = 'left',\n}: ChoiceProps) => {\n  const classNames = generateClassNames(className);\n\n  const inputLayoutClass = [\n    styles['input-layout'],\n    Accessory ? styles['align-center'] : styles['align-top'],\n  ].join(' ');\n\n  const wrapperClass = buildClassnames([\n    styles.wrapper,\n    bordered && styles.bordered,\n    disabled && styles.disabled,\n    className,\n  ]);\n\n  const contentMarkup = (\n    <div className={styles['root-layout']}>\n      {inputPosition === 'left' && <div className={inputLayoutClass}>{children}</div>}\n      {Accessory && <div className={styles['accessory-layout']}>{Accessory}</div>}\n      {label || hint || error || Badge || Footer ? (\n        <div className={styles['text-layout']}>\n          <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"sm\">\n            {Badge}\n            {label && (\n              <Text variant={labelVariant} className={classNames.label}>\n                {label}\n              </Text>\n            )}\n            {(tooltip || tooltipContent) && (\n              <Tooltip text={tooltip} content={tooltipContent} className={classNames.tooltip}>\n                <HelpIcon\n                  data-testid=\"tooltip-help\"\n                  name=\"help\"\n                  width={theme.sizes.base}\n                  color={theme.colors.neutral.ink.lightest}\n                />\n              </Tooltip>\n            )}\n          </Stack>\n          {hint && (\n            <Text id={`hint-${htmlFor}`} variant=\"hintText\" className={classNames.hint}>\n              {hint}\n            </Text>\n          )}\n          {error && (\n            <Text variant=\"error\" className={classNames.error}>\n              {error}\n            </Text>\n          )}\n          {Footer}\n        </div>\n      ) : null}\n      {inputPosition === 'right' && <div className={inputLayoutClass}>{children}</div>}\n    </div>\n  );\n\n  return (\n    <label htmlFor={htmlFor} className={wrapperClass}>\n      {contentMarkup}\n    </label>\n  );\n};\n"],"names":["styles","buildClassnames","React","Stack","Text","Tooltip","HelpIcon","theme"],"mappings":"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"}

package/dist/components/Choice/Choice.js

@@ -1,9 +1,12 @@
 import React__default from 'react';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
 import { Stack } from '../Stack/Stack.js';
 import { theme } from '../../theme/index.js';
-import { RootLayout, InputLayout, AccessoryLayout, TextLayout, BlockTooltip, BorderedWrapper, Wrapper } from './components/styled.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
 import { ReactComponent as HelpIcon } from '../../icons/design-system/components/HelpIcon.js';
 import { Text } from '../Text/Text.js';
+import styles from './Choice.module.scss.js';
 
 const generateClassNames = (prefix) => ({
     hint: prefix ? 'choice__hint' : undefined,
@@ -13,23 +16,30 @@ const generateClassNames = (prefix) => ({
 });
 const Choice = ({ htmlFor, className, label, hint, tooltip, tooltipContent, error, bordered, Badge, Accessory, Footer, children, disabled = false, labelVariant = 'body', inputPosition = 'left', }) => {
     const classNames = generateClassNames(className);
-    const contentMarkup = (React__default.createElement(RootLayout, null,
-        inputPosition === 'left' && (React__default.createElement(InputLayout, { align: Accessory ? 'center' : 'top' }, children)),
-        Accessory && React__default.createElement(AccessoryLayout, null, Accessory),
-        label || hint || error || Badge || Footer ? (React__default.createElement(TextLayout, null,
+    const inputLayoutClass = [
+        styles['input-layout'],
+        Accessory ? styles['align-center'] : styles['align-top'],
+    ].join(' ');
+    const wrapperClass = buildClassnames([
+        styles.wrapper,
+        bordered && styles.bordered,
+        disabled && styles.disabled,
+        className,
+    ]);
+    const contentMarkup = (React__default.createElement("div", { className: styles['root-layout'] },
+        inputPosition === 'left' && React__default.createElement("div", { className: inputLayoutClass }, children),
+        Accessory && React__default.createElement("div", { className: styles['accessory-layout'] }, Accessory),
+        label || hint || error || Badge || Footer ? (React__default.createElement("div", { className: styles['text-layout'] },
             React__default.createElement(Stack, { direction: "horizontal", alignY: "center", spacing: "sm" },
                 Badge,
                 label && (React__default.createElement(Text, { variant: labelVariant, className: classNames.label }, label)),
-                (tooltip || tooltipContent) && (React__default.createElement(BlockTooltip, { text: tooltip, content: tooltipContent, className: classNames.tooltip },
+                (tooltip || tooltipContent) && (React__default.createElement(Tooltip, { text: tooltip, content: tooltipContent, className: classNames.tooltip },
                     React__default.createElement(HelpIcon, { "data-testid": "tooltip-help", name: "help", width: theme.sizes.base, color: theme.colors.neutral.ink.lightest })))),
             hint && (React__default.createElement(Text, { id: `hint-${htmlFor}`, variant: "hintText", className: classNames.hint }, hint)),
             error && (React__default.createElement(Text, { variant: "error", className: classNames.error }, error)),
             Footer)) : null,
-        inputPosition === 'right' && (React__default.createElement(InputLayout, { align: Accessory ? 'center' : 'top' }, children))));
-    if (bordered) {
-        return (React__default.createElement(BorderedWrapper, { disabled: disabled, className: className }, contentMarkup));
-    }
-    return (React__default.createElement(Wrapper, { disabled: disabled, className: className }, contentMarkup));
+        inputPosition === 'right' && React__default.createElement("div", { className: inputLayoutClass }, children)));
+    return (React__default.createElement("label", { htmlFor: htmlFor, className: wrapperClass }, contentMarkup));
 };
 
 export { Choice };

package/dist/components/Choice/Choice.js.map

@@ -1 +1 @@
-{"version":3,"file":"Choice.js","sources":["../../../src/components/Choice/Choice.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { Stack } from '../Stack';\nimport { theme } from '../../theme';\n\nimport {\n  Wrapper,\n  BorderedWrapper,\n  RootLayout,\n  InputLayout,\n  AccessoryLayout,\n  TextLayout,\n  BlockTooltip,\n} from './components/styled';\nimport { HelpIcon } from '../../icons';\nimport { Text } from '../Text';\nimport { TextVariant } from '../Text/types';\n\nexport interface ForwardedChoiceProps {\n  className?: string;\n  disabled?: boolean;\n  label?: ReactNode;\n  hint?: ReactNode;\n  tooltip?: string;\n  tooltipContent?: ReactNode;\n  error?: ReactNode;\n  bordered?: boolean;\n  Badge?: ReactNode;\n  Accessory?: ReactNode;\n  Footer?: ReactNode;\n  inputPosition?: 'left' | 'right';\n  labelVariant?: TextVariant;\n}\n\nexport interface ChoiceProps extends ForwardedChoiceProps {\n  htmlFor: string;\n  children: ReactNode;\n}\n\nconst generateClassNames = (prefix?: string): any => ({\n  hint: prefix ? 'choice__hint' : undefined,\n  label: prefix ? 'choice__label' : undefined,\n  tooltip: prefix ? 'choice__tooltip' : undefined,\n  error: prefix ? 'choice__error' : undefined,\n});\n\nexport const Choice = ({\n  htmlFor,\n  className,\n  label,\n  hint,\n  tooltip,\n  tooltipContent,\n  error,\n  bordered,\n  Badge,\n  Accessory,\n  Footer,\n  children,\n  disabled = false,\n  labelVariant = 'body',\n  inputPosition = 'left',\n}: ChoiceProps) => {\n  const classNames = generateClassNames(className);\n\n  const contentMarkup = (\n    <RootLayout>\n      {inputPosition === 'left' && (\n        <InputLayout align={Accessory ? 'center' : 'top'}>{children}</InputLayout>\n      )}\n      {Accessory && <AccessoryLayout>{Accessory}</AccessoryLayout>}\n      {label || hint || error || Badge || Footer ? (\n        <TextLayout>\n          <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"sm\">\n            {Badge}\n            {label && (\n              <Text variant={labelVariant} className={classNames.label}>\n                {label}\n              </Text>\n            )}\n            {(tooltip || tooltipContent) && (\n              <BlockTooltip text={tooltip} content={tooltipContent} className={classNames.tooltip}>\n                <HelpIcon\n                  data-testid=\"tooltip-help\"\n                  name=\"help\"\n                  width={theme.sizes.base}\n                  color={theme.colors.neutral.ink.lightest}\n                />\n              </BlockTooltip>\n            )}\n          </Stack>\n          {hint && (\n            <Text id={`hint-${htmlFor}`} variant=\"hintText\" className={classNames.hint}>\n              {hint}\n            </Text>\n          )}\n          {error && (\n            <Text variant=\"error\" className={classNames.error}>\n              {error}\n            </Text>\n          )}\n          {Footer}\n        </TextLayout>\n      ) : null}\n      {inputPosition === 'right' && (\n        <InputLayout align={Accessory ? 'center' : 'top'}>{children}</InputLayout>\n      )}\n    </RootLayout>\n  );\n\n  if (bordered) {\n    return (\n      <BorderedWrapper disabled={disabled} className={className}>\n        {contentMarkup}\n      </BorderedWrapper>\n    );\n  }\n\n  return (\n    <Wrapper disabled={disabled} className={className}>\n      {contentMarkup}\n    </Wrapper>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"Choice.js","sources":["../../../src/components/Choice/Choice.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { buildClassnames } from '../../utils';\nimport { Stack } from '../Stack';\nimport { theme } from '../../theme';\nimport { Tooltip } from '../Tooltip';\nimport { HelpIcon } from '../../icons';\nimport { Text } from '../Text';\nimport { TextVariant } from '../Text/types';\n\nimport styles from './Choice.module.scss';\n\nexport interface ForwardedChoiceProps {\n  className?: string;\n  disabled?: boolean;\n  label?: ReactNode;\n  hint?: ReactNode;\n  tooltip?: string;\n  tooltipContent?: ReactNode;\n  error?: ReactNode;\n  bordered?: boolean;\n  Badge?: ReactNode;\n  Accessory?: ReactNode;\n  Footer?: ReactNode;\n  inputPosition?: 'left' | 'right';\n  labelVariant?: TextVariant;\n}\n\nexport interface ChoiceProps extends ForwardedChoiceProps {\n  htmlFor: string;\n  children: ReactNode;\n}\n\nconst generateClassNames = (prefix?: string): any => ({\n  hint: prefix ? 'choice__hint' : undefined,\n  label: prefix ? 'choice__label' : undefined,\n  tooltip: prefix ? 'choice__tooltip' : undefined,\n  error: prefix ? 'choice__error' : undefined,\n});\n\nexport const Choice = ({\n  htmlFor,\n  className,\n  label,\n  hint,\n  tooltip,\n  tooltipContent,\n  error,\n  bordered,\n  Badge,\n  Accessory,\n  Footer,\n  children,\n  disabled = false,\n  labelVariant = 'body',\n  inputPosition = 'left',\n}: ChoiceProps) => {\n  const classNames = generateClassNames(className);\n\n  const inputLayoutClass = [\n    styles['input-layout'],\n    Accessory ? styles['align-center'] : styles['align-top'],\n  ].join(' ');\n\n  const wrapperClass = buildClassnames([\n    styles.wrapper,\n    bordered && styles.bordered,\n    disabled && styles.disabled,\n    className,\n  ]);\n\n  const contentMarkup = (\n    <div className={styles['root-layout']}>\n      {inputPosition === 'left' && <div className={inputLayoutClass}>{children}</div>}\n      {Accessory && <div className={styles['accessory-layout']}>{Accessory}</div>}\n      {label || hint || error || Badge || Footer ? (\n        <div className={styles['text-layout']}>\n          <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"sm\">\n            {Badge}\n            {label && (\n              <Text variant={labelVariant} className={classNames.label}>\n                {label}\n              </Text>\n            )}\n            {(tooltip || tooltipContent) && (\n              <Tooltip text={tooltip} content={tooltipContent} className={classNames.tooltip}>\n                <HelpIcon\n                  data-testid=\"tooltip-help\"\n                  name=\"help\"\n                  width={theme.sizes.base}\n                  color={theme.colors.neutral.ink.lightest}\n                />\n              </Tooltip>\n            )}\n          </Stack>\n          {hint && (\n            <Text id={`hint-${htmlFor}`} variant=\"hintText\" className={classNames.hint}>\n              {hint}\n            </Text>\n          )}\n          {error && (\n            <Text variant=\"error\" className={classNames.error}>\n              {error}\n            </Text>\n          )}\n          {Footer}\n        </div>\n      ) : null}\n      {inputPosition === 'right' && <div className={inputLayoutClass}>{children}</div>}\n    </div>\n  );\n\n  return (\n    <label htmlFor={htmlFor} className={wrapperClass}>\n      {contentMarkup}\n    </label>\n  );\n};\n"],"names":["React"],"mappings":"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"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._wrapper_jvoun_1 {\n  box-sizing: border-box;\n}\n._wrapper_jvoun_1:hover {\n  cursor: pointer;\n}\n._wrapper_jvoun_1._disabled_jvoun_7:hover {\n  cursor: default;\n}\n\n._bordered_jvoun_11 {\n  border: 2px solid var(--colors-neutral-grey-dark);\n  border-radius: var(--radius-md);\n  padding: var(--sizes-base) var(--sizes-3);\n}\n._bordered_jvoun_11:not(._disabled_jvoun_7):hover {\n  border-color: var(--colors-secondary-blue-base);\n}\n\n._root-layout_jvoun_20 {\n  display: flex;\n  align-items: center;\n}\n._root-layout_jvoun_20 > * + * {\n  margin-left: var(--sizes-base);\n}\n\n._input-layout_jvoun_28 {\n  align-self: stretch;\n  display: flex;\n}\n._input-layout_jvoun_28._align-top_jvoun_32 {\n  align-items: flex-start;\n}\n._input-layout_jvoun_28._align-center_jvoun_35 {\n  align-items: center;\n}\n\n._accessory-layout_jvoun_39 {\n  align-self: center;\n  display: flex;\n  align-items: center;\n}\n\n._text-layout_jvoun_45 {\n  flex: 1;\n}\n._text-layout_jvoun_45 > * + * {\n  margin-top: var(--sizes-sm);\n}");
+var styles = {"wrapper":"_wrapper_jvoun_1","disabled":"_disabled_jvoun_7","bordered":"_bordered_jvoun_11","root-layout":"_root-layout_jvoun_20","input-layout":"_input-layout_jvoun_28","align-top":"_align-top_jvoun_32","align-center":"_align-center_jvoun_35","accessory-layout":"_accessory-layout_jvoun_39","text-layout":"_text-layout_jvoun_45"};
+
+module.exports = styles;
+//# sourceMappingURL=Choice.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Choice.module.scss.cjs","sources":["../../../src/components/Choice/Choice.module.scss"],"sourcesContent":[".wrapper {\n  box-sizing: border-box;\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  &.disabled:hover {\n    cursor: default;\n  }\n}\n\n.bordered {\n  border: 2px solid var(--colors-neutral-grey-dark);\n  border-radius: var(--radius-md);\n  padding: var(--sizes-base) var(--sizes-3);\n\n  &:not(.disabled):hover {\n    border-color: var(--colors-secondary-blue-base);\n  }\n}\n\n.root-layout {\n  display: flex;\n  align-items: center;\n\n  & > * + * {\n    margin-left: var(--sizes-base);\n  }\n}\n\n.input-layout {\n  align-self: stretch;\n  display: flex;\n\n  &.align-top {\n    align-items: flex-start;\n  }\n\n  &.align-center {\n    align-items: center;\n  }\n}\n\n.accessory-layout {\n  align-self: center;\n  display: flex;\n  align-items: center;\n}\n\n.text-layout {\n  flex: 1;\n\n  & > * + * {\n    margin-top: var(--sizes-sm);\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,ogCAAA;;;;;"}