@veeqo/ui 15.6.0 → 15.7.1

package/dist/components/Action/utils.cjs

@@ -2,9 +2,9 @@
 
 var buildClassnames = require('../../utils/buildClassnames.cjs');
 require('uid/secure');
-var base_module = require('./styles/base.module.scss.cjs');
 var button_module = require('./styles/button.module.scss.cjs');
 var link_module = require('./styles/link.module.scss.cjs');
+var reset_module = require('./styles/reset.module.scss.cjs');
 
 const getButtonVariantClasses = (variant) => [
     (variant === 'primary' || variant === 'primaryDestructive') && button_module['primary-variant'],
@@ -23,7 +23,6 @@ const getAppearanceClasses = (appearance, props) => {
         case 'button':
             return buildClassnames.buildClassnames([
                 props.className,
-                base_module.reset,
                 button_module.base,
                 ...iconClasses,
                 props.disabled && button_module.disabled,
@@ -34,13 +33,12 @@ const getAppearanceClasses = (appearance, props) => {
         case 'link':
             return buildClassnames.buildClassnames([
                 props.className,
-                base_module.reset,
                 link_module.base,
                 !props.size && link_module['inherit-size'],
                 props.size && props.size !== 'base' && link_module[`${props.size}-size`],
             ]);
         default:
-            return buildClassnames.buildClassnames([props.className, base_module.reset]);
+            return buildClassnames.buildClassnames([props.className, reset_module.reset]);
     }
 };
 

package/dist/components/Action/utils.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.cjs","sources":["../../../src/components/Action/utils.ts"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../utils';\nimport baseStyles from './styles/base.module.scss';\nimport buttonStyles from './styles/button.module.scss';\nimport linkStyles from './styles/link.module.scss';\nimport { ActionAppearance, ActionSize, ActionVariant } from './types';\n\ntype AppearanceClassProps = {\n  className?: string;\n  variant?: ActionVariant;\n  disabled?: boolean;\n  size?: ActionSize;\n  dropdown?: boolean;\n  iconSlot?: React.ReactNode;\n  children?: React.ReactNode;\n};\n\nexport const getButtonVariantClasses = (variant?: ActionVariant) =>\n  [\n    (variant === 'primary' || variant === 'primaryDestructive') && buttonStyles['primary-variant'],\n    (variant === 'destructive' || variant === 'primaryDestructive') &&\n      buttonStyles['destructive-variant'],\n    variant === 'flat' && buttonStyles['flat-variant'],\n  ].filter(Boolean);\n\nexport const getAppearanceClasses = (appearance: ActionAppearance, props: AppearanceClassProps) => {\n  const hasIcon = !!props.iconSlot;\n  const isIconOnly = hasIcon && (props.children == null || props.children === '');\n  const iconClasses = [\n    hasIcon && !isIconOnly && buttonStyles.icon,\n    isIconOnly && buttonStyles.iconOnly,\n  ];\n\n  switch (appearance) {\n    case 'button':\n      return buildClassnames([\n        props.className,\n        baseStyles.reset,\n        buttonStyles.base,\n        ...iconClasses,\n        props.disabled && buttonStyles.disabled,\n        props.size && props.size !== 'base' && buttonStyles[`${props.size}-size`],\n        props.dropdown && buttonStyles.dropdown,\n        ...getButtonVariantClasses(props.variant),\n      ]);\n    case 'link':\n      return buildClassnames([\n        props.className,\n        baseStyles.reset,\n        linkStyles.base,\n        !props.size && linkStyles['inherit-size'],\n        props.size && props.size !== 'base' && linkStyles[`${props.size}-size`],\n      ]);\n    default:\n      return buildClassnames([props.className, baseStyles.reset]);\n  }\n};\n"],"names":["buttonStyles","buildClassnames","baseStyles","linkStyles"],"mappings":";;;;;;;;MAiBa,uBAAuB,GAAG,CAAC,OAAuB,KAC7D;AACE,IAAA,CAAC,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,oBAAoB,KAAKA,aAAY,CAAC,iBAAiB,CAAC;AAC9F,IAAA,CAAC,OAAO,KAAK,aAAa,IAAI,OAAO,KAAK,oBAAoB;QAC5DA,aAAY,CAAC,qBAAqB,CAAC;AACrC,IAAA,OAAO,KAAK,MAAM,IAAIA,aAAY,CAAC,cAAc,CAAC;AACnD,CAAA,CAAC,MAAM,CAAC,OAAO;MAEL,oBAAoB,GAAG,CAAC,UAA4B,EAAE,KAA2B,KAAI;AAChG,IAAA,MAAM,OAAO,GAAG,CAAC,CAAC,KAAK,CAAC,QAAQ;AAChC,IAAA,MAAM,UAAU,GAAG,OAAO,KAAK,KAAK,CAAC,QAAQ,IAAI,IAAI,IAAI,KAAK,CAAC,QAAQ,KAAK,EAAE,CAAC;AAC/E,IAAA,MAAM,WAAW,GAAG;AAClB,QAAA,OAAO,IAAI,CAAC,UAAU,IAAIA,aAAY,CAAC,IAAI;QAC3C,UAAU,IAAIA,aAAY,CAAC,QAAQ;KACpC;AAED,IAAA,QAAQ,UAAU;AAChB,QAAA,KAAK,QAAQ;AACX,YAAA,OAAOC,+BAAe,CAAC;AACrB,gBAAA,KAAK,CAAC,SAAS;AACf,gBAAAC,WAAU,CAAC,KAAK;AAChB,gBAAAF,aAAY,CAAC,IAAI;AACjB,gBAAA,GAAG,WAAW;AACd,gBAAA,KAAK,CAAC,QAAQ,IAAIA,aAAY,CAAC,QAAQ;AACvC,gBAAA,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,IAAIA,aAAY,CAAC,CAAA,EAAG,KAAK,CAAC,IAAI,OAAO,CAAC;AACzE,gBAAA,KAAK,CAAC,QAAQ,IAAIA,aAAY,CAAC,QAAQ;AACvC,gBAAA,GAAG,uBAAuB,CAAC,KAAK,CAAC,OAAO,CAAC;AAC1C,aAAA,CAAC;AACJ,QAAA,KAAK,MAAM;AACT,YAAA,OAAOC,+BAAe,CAAC;AACrB,gBAAA,KAAK,CAAC,SAAS;AACf,gBAAAC,WAAU,CAAC,KAAK;AAChB,gBAAAC,WAAU,CAAC,IAAI;AACf,gBAAA,CAAC,KAAK,CAAC,IAAI,IAAIA,WAAU,CAAC,cAAc,CAAC;AACzC,gBAAA,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,IAAIA,WAAU,CAAC,CAAA,EAAG,KAAK,CAAC,IAAI,OAAO,CAAC;AACxE,aAAA,CAAC;AACJ,QAAA;AACE,YAAA,OAAOF,+BAAe,CAAC,CAAC,KAAK,CAAC,SAAS,EAAEC,WAAU,CAAC,KAAK,CAAC,CAAC;AAC9D;AACH;;;;;"}
+{"version":3,"file":"utils.cjs","sources":["../../../src/components/Action/utils.ts"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../utils';\nimport buttonStyles from './styles/button.module.scss';\nimport linkStyles from './styles/link.module.scss';\nimport resetStyles from './styles/reset.module.scss';\nimport { ActionAppearance, ActionSize, ActionVariant } from './types';\n\ntype AppearanceClassProps = {\n  className?: string;\n  variant?: ActionVariant;\n  disabled?: boolean;\n  size?: ActionSize;\n  dropdown?: boolean;\n  iconSlot?: React.ReactNode;\n  children?: React.ReactNode;\n};\n\nexport const getButtonVariantClasses = (variant?: ActionVariant) =>\n  [\n    (variant === 'primary' || variant === 'primaryDestructive') && buttonStyles['primary-variant'],\n    (variant === 'destructive' || variant === 'primaryDestructive') &&\n      buttonStyles['destructive-variant'],\n    variant === 'flat' && buttonStyles['flat-variant'],\n  ].filter(Boolean);\n\nexport const getAppearanceClasses = (appearance: ActionAppearance, props: AppearanceClassProps) => {\n  const hasIcon = !!props.iconSlot;\n  const isIconOnly = hasIcon && (props.children == null || props.children === '');\n  const iconClasses = [\n    hasIcon && !isIconOnly && buttonStyles.icon,\n    isIconOnly && buttonStyles.iconOnly,\n  ];\n\n  switch (appearance) {\n    case 'button':\n      return buildClassnames([\n        props.className,\n        buttonStyles.base,\n        ...iconClasses,\n        props.disabled && buttonStyles.disabled,\n        props.size && props.size !== 'base' && buttonStyles[`${props.size}-size`],\n        props.dropdown && buttonStyles.dropdown,\n        ...getButtonVariantClasses(props.variant),\n      ]);\n    case 'link':\n      return buildClassnames([\n        props.className,\n        linkStyles.base,\n        !props.size && linkStyles['inherit-size'],\n        props.size && props.size !== 'base' && linkStyles[`${props.size}-size`],\n      ]);\n    default:\n      return buildClassnames([props.className, resetStyles.reset]);\n  }\n};\n"],"names":["buttonStyles","buildClassnames","linkStyles","resetStyles"],"mappings":";;;;;;;;MAiBa,uBAAuB,GAAG,CAAC,OAAuB,KAC7D;AACE,IAAA,CAAC,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,oBAAoB,KAAKA,aAAY,CAAC,iBAAiB,CAAC;AAC9F,IAAA,CAAC,OAAO,KAAK,aAAa,IAAI,OAAO,KAAK,oBAAoB;QAC5DA,aAAY,CAAC,qBAAqB,CAAC;AACrC,IAAA,OAAO,KAAK,MAAM,IAAIA,aAAY,CAAC,cAAc,CAAC;AACnD,CAAA,CAAC,MAAM,CAAC,OAAO;MAEL,oBAAoB,GAAG,CAAC,UAA4B,EAAE,KAA2B,KAAI;AAChG,IAAA,MAAM,OAAO,GAAG,CAAC,CAAC,KAAK,CAAC,QAAQ;AAChC,IAAA,MAAM,UAAU,GAAG,OAAO,KAAK,KAAK,CAAC,QAAQ,IAAI,IAAI,IAAI,KAAK,CAAC,QAAQ,KAAK,EAAE,CAAC;AAC/E,IAAA,MAAM,WAAW,GAAG;AAClB,QAAA,OAAO,IAAI,CAAC,UAAU,IAAIA,aAAY,CAAC,IAAI;QAC3C,UAAU,IAAIA,aAAY,CAAC,QAAQ;KACpC;AAED,IAAA,QAAQ,UAAU;AAChB,QAAA,KAAK,QAAQ;AACX,YAAA,OAAOC,+BAAe,CAAC;AACrB,gBAAA,KAAK,CAAC,SAAS;AACf,gBAAAD,aAAY,CAAC,IAAI;AACjB,gBAAA,GAAG,WAAW;AACd,gBAAA,KAAK,CAAC,QAAQ,IAAIA,aAAY,CAAC,QAAQ;AACvC,gBAAA,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,IAAIA,aAAY,CAAC,CAAA,EAAG,KAAK,CAAC,IAAI,OAAO,CAAC;AACzE,gBAAA,KAAK,CAAC,QAAQ,IAAIA,aAAY,CAAC,QAAQ;AACvC,gBAAA,GAAG,uBAAuB,CAAC,KAAK,CAAC,OAAO,CAAC;AAC1C,aAAA,CAAC;AACJ,QAAA,KAAK,MAAM;AACT,YAAA,OAAOC,+BAAe,CAAC;AACrB,gBAAA,KAAK,CAAC,SAAS;AACf,gBAAAC,WAAU,CAAC,IAAI;AACf,gBAAA,CAAC,KAAK,CAAC,IAAI,IAAIA,WAAU,CAAC,cAAc,CAAC;AACzC,gBAAA,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,IAAIA,WAAU,CAAC,CAAA,EAAG,KAAK,CAAC,IAAI,OAAO,CAAC;AACxE,aAAA,CAAC;AACJ,QAAA;AACE,YAAA,OAAOD,+BAAe,CAAC,CAAC,KAAK,CAAC,SAAS,EAAEE,YAAW,CAAC,KAAK,CAAC,CAAC;AAC/D;AACH;;;;;"}

package/dist/components/Action/utils.js

@@ -1,8 +1,8 @@
 import { buildClassnames } from '../../utils/buildClassnames.js';
 import 'uid/secure';
-import baseStyles from './styles/base.module.scss.js';
 import buttonStyles from './styles/button.module.scss.js';
 import linkStyles from './styles/link.module.scss.js';
+import resetStyles from './styles/reset.module.scss.js';
 
 const getButtonVariantClasses = (variant) => [
     (variant === 'primary' || variant === 'primaryDestructive') && buttonStyles['primary-variant'],
@@ -21,7 +21,6 @@ const getAppearanceClasses = (appearance, props) => {
         case 'button':
             return buildClassnames([
                 props.className,
-                baseStyles.reset,
                 buttonStyles.base,
                 ...iconClasses,
                 props.disabled && buttonStyles.disabled,
@@ -32,13 +31,12 @@ const getAppearanceClasses = (appearance, props) => {
         case 'link':
             return buildClassnames([
                 props.className,
-                baseStyles.reset,
                 linkStyles.base,
                 !props.size && linkStyles['inherit-size'],
                 props.size && props.size !== 'base' && linkStyles[`${props.size}-size`],
             ]);
         default:
-            return buildClassnames([props.className, baseStyles.reset]);
+            return buildClassnames([props.className, resetStyles.reset]);
     }
 };
 

package/dist/components/Action/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../src/components/Action/utils.ts"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../utils';\nimport baseStyles from './styles/base.module.scss';\nimport buttonStyles from './styles/button.module.scss';\nimport linkStyles from './styles/link.module.scss';\nimport { ActionAppearance, ActionSize, ActionVariant } from './types';\n\ntype AppearanceClassProps = {\n  className?: string;\n  variant?: ActionVariant;\n  disabled?: boolean;\n  size?: ActionSize;\n  dropdown?: boolean;\n  iconSlot?: React.ReactNode;\n  children?: React.ReactNode;\n};\n\nexport const getButtonVariantClasses = (variant?: ActionVariant) =>\n  [\n    (variant === 'primary' || variant === 'primaryDestructive') && buttonStyles['primary-variant'],\n    (variant === 'destructive' || variant === 'primaryDestructive') &&\n      buttonStyles['destructive-variant'],\n    variant === 'flat' && buttonStyles['flat-variant'],\n  ].filter(Boolean);\n\nexport const getAppearanceClasses = (appearance: ActionAppearance, props: AppearanceClassProps) => {\n  const hasIcon = !!props.iconSlot;\n  const isIconOnly = hasIcon && (props.children == null || props.children === '');\n  const iconClasses = [\n    hasIcon && !isIconOnly && buttonStyles.icon,\n    isIconOnly && buttonStyles.iconOnly,\n  ];\n\n  switch (appearance) {\n    case 'button':\n      return buildClassnames([\n        props.className,\n        baseStyles.reset,\n        buttonStyles.base,\n        ...iconClasses,\n        props.disabled && buttonStyles.disabled,\n        props.size && props.size !== 'base' && buttonStyles[`${props.size}-size`],\n        props.dropdown && buttonStyles.dropdown,\n        ...getButtonVariantClasses(props.variant),\n      ]);\n    case 'link':\n      return buildClassnames([\n        props.className,\n        baseStyles.reset,\n        linkStyles.base,\n        !props.size && linkStyles['inherit-size'],\n        props.size && props.size !== 'base' && linkStyles[`${props.size}-size`],\n      ]);\n    default:\n      return buildClassnames([props.className, baseStyles.reset]);\n  }\n};\n"],"names":[],"mappings":";;;;;;MAiBa,uBAAuB,GAAG,CAAC,OAAuB,KAC7D;AACE,IAAA,CAAC,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,oBAAoB,KAAK,YAAY,CAAC,iBAAiB,CAAC;AAC9F,IAAA,CAAC,OAAO,KAAK,aAAa,IAAI,OAAO,KAAK,oBAAoB;QAC5D,YAAY,CAAC,qBAAqB,CAAC;AACrC,IAAA,OAAO,KAAK,MAAM,IAAI,YAAY,CAAC,cAAc,CAAC;AACnD,CAAA,CAAC,MAAM,CAAC,OAAO;MAEL,oBAAoB,GAAG,CAAC,UAA4B,EAAE,KAA2B,KAAI;AAChG,IAAA,MAAM,OAAO,GAAG,CAAC,CAAC,KAAK,CAAC,QAAQ;AAChC,IAAA,MAAM,UAAU,GAAG,OAAO,KAAK,KAAK,CAAC,QAAQ,IAAI,IAAI,IAAI,KAAK,CAAC,QAAQ,KAAK,EAAE,CAAC;AAC/E,IAAA,MAAM,WAAW,GAAG;AAClB,QAAA,OAAO,IAAI,CAAC,UAAU,IAAI,YAAY,CAAC,IAAI;QAC3C,UAAU,IAAI,YAAY,CAAC,QAAQ;KACpC;AAED,IAAA,QAAQ,UAAU;AAChB,QAAA,KAAK,QAAQ;AACX,YAAA,OAAO,eAAe,CAAC;AACrB,gBAAA,KAAK,CAAC,SAAS;AACf,gBAAA,UAAU,CAAC,KAAK;AAChB,gBAAA,YAAY,CAAC,IAAI;AACjB,gBAAA,GAAG,WAAW;AACd,gBAAA,KAAK,CAAC,QAAQ,IAAI,YAAY,CAAC,QAAQ;AACvC,gBAAA,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,IAAI,YAAY,CAAC,CAAA,EAAG,KAAK,CAAC,IAAI,OAAO,CAAC;AACzE,gBAAA,KAAK,CAAC,QAAQ,IAAI,YAAY,CAAC,QAAQ;AACvC,gBAAA,GAAG,uBAAuB,CAAC,KAAK,CAAC,OAAO,CAAC;AAC1C,aAAA,CAAC;AACJ,QAAA,KAAK,MAAM;AACT,YAAA,OAAO,eAAe,CAAC;AACrB,gBAAA,KAAK,CAAC,SAAS;AACf,gBAAA,UAAU,CAAC,KAAK;AAChB,gBAAA,UAAU,CAAC,IAAI;AACf,gBAAA,CAAC,KAAK,CAAC,IAAI,IAAI,UAAU,CAAC,cAAc,CAAC;AACzC,gBAAA,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,IAAI,UAAU,CAAC,CAAA,EAAG,KAAK,CAAC,IAAI,OAAO,CAAC;AACxE,aAAA,CAAC;AACJ,QAAA;AACE,YAAA,OAAO,eAAe,CAAC,CAAC,KAAK,CAAC,SAAS,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;AAC9D;AACH;;;;"}
+{"version":3,"file":"utils.js","sources":["../../../src/components/Action/utils.ts"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../utils';\nimport buttonStyles from './styles/button.module.scss';\nimport linkStyles from './styles/link.module.scss';\nimport resetStyles from './styles/reset.module.scss';\nimport { ActionAppearance, ActionSize, ActionVariant } from './types';\n\ntype AppearanceClassProps = {\n  className?: string;\n  variant?: ActionVariant;\n  disabled?: boolean;\n  size?: ActionSize;\n  dropdown?: boolean;\n  iconSlot?: React.ReactNode;\n  children?: React.ReactNode;\n};\n\nexport const getButtonVariantClasses = (variant?: ActionVariant) =>\n  [\n    (variant === 'primary' || variant === 'primaryDestructive') && buttonStyles['primary-variant'],\n    (variant === 'destructive' || variant === 'primaryDestructive') &&\n      buttonStyles['destructive-variant'],\n    variant === 'flat' && buttonStyles['flat-variant'],\n  ].filter(Boolean);\n\nexport const getAppearanceClasses = (appearance: ActionAppearance, props: AppearanceClassProps) => {\n  const hasIcon = !!props.iconSlot;\n  const isIconOnly = hasIcon && (props.children == null || props.children === '');\n  const iconClasses = [\n    hasIcon && !isIconOnly && buttonStyles.icon,\n    isIconOnly && buttonStyles.iconOnly,\n  ];\n\n  switch (appearance) {\n    case 'button':\n      return buildClassnames([\n        props.className,\n        buttonStyles.base,\n        ...iconClasses,\n        props.disabled && buttonStyles.disabled,\n        props.size && props.size !== 'base' && buttonStyles[`${props.size}-size`],\n        props.dropdown && buttonStyles.dropdown,\n        ...getButtonVariantClasses(props.variant),\n      ]);\n    case 'link':\n      return buildClassnames([\n        props.className,\n        linkStyles.base,\n        !props.size && linkStyles['inherit-size'],\n        props.size && props.size !== 'base' && linkStyles[`${props.size}-size`],\n      ]);\n    default:\n      return buildClassnames([props.className, resetStyles.reset]);\n  }\n};\n"],"names":[],"mappings":";;;;;;MAiBa,uBAAuB,GAAG,CAAC,OAAuB,KAC7D;AACE,IAAA,CAAC,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,oBAAoB,KAAK,YAAY,CAAC,iBAAiB,CAAC;AAC9F,IAAA,CAAC,OAAO,KAAK,aAAa,IAAI,OAAO,KAAK,oBAAoB;QAC5D,YAAY,CAAC,qBAAqB,CAAC;AACrC,IAAA,OAAO,KAAK,MAAM,IAAI,YAAY,CAAC,cAAc,CAAC;AACnD,CAAA,CAAC,MAAM,CAAC,OAAO;MAEL,oBAAoB,GAAG,CAAC,UAA4B,EAAE,KAA2B,KAAI;AAChG,IAAA,MAAM,OAAO,GAAG,CAAC,CAAC,KAAK,CAAC,QAAQ;AAChC,IAAA,MAAM,UAAU,GAAG,OAAO,KAAK,KAAK,CAAC,QAAQ,IAAI,IAAI,IAAI,KAAK,CAAC,QAAQ,KAAK,EAAE,CAAC;AAC/E,IAAA,MAAM,WAAW,GAAG;AAClB,QAAA,OAAO,IAAI,CAAC,UAAU,IAAI,YAAY,CAAC,IAAI;QAC3C,UAAU,IAAI,YAAY,CAAC,QAAQ;KACpC;AAED,IAAA,QAAQ,UAAU;AAChB,QAAA,KAAK,QAAQ;AACX,YAAA,OAAO,eAAe,CAAC;AACrB,gBAAA,KAAK,CAAC,SAAS;AACf,gBAAA,YAAY,CAAC,IAAI;AACjB,gBAAA,GAAG,WAAW;AACd,gBAAA,KAAK,CAAC,QAAQ,IAAI,YAAY,CAAC,QAAQ;AACvC,gBAAA,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,IAAI,YAAY,CAAC,CAAA,EAAG,KAAK,CAAC,IAAI,OAAO,CAAC;AACzE,gBAAA,KAAK,CAAC,QAAQ,IAAI,YAAY,CAAC,QAAQ;AACvC,gBAAA,GAAG,uBAAuB,CAAC,KAAK,CAAC,OAAO,CAAC;AAC1C,aAAA,CAAC;AACJ,QAAA,KAAK,MAAM;AACT,YAAA,OAAO,eAAe,CAAC;AACrB,gBAAA,KAAK,CAAC,SAAS;AACf,gBAAA,UAAU,CAAC,IAAI;AACf,gBAAA,CAAC,KAAK,CAAC,IAAI,IAAI,UAAU,CAAC,cAAc,CAAC;AACzC,gBAAA,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,IAAI,UAAU,CAAC,CAAA,EAAG,KAAK,CAAC,IAAI,OAAO,CAAC;AACxE,aAAA,CAAC;AACJ,QAAA;AACE,YAAA,OAAO,eAAe,CAAC,CAAC,KAAK,CAAC,SAAS,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;AAC/D;AACH;;;;"}

package/dist/components/Alerts/MiniAlert/types.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="react" />
 import { BaseAlertProps, MiniAlertVariants } from '../types';
 export type { MiniAlertVariants } from '../types';
-export type MiniAlertProps = React.HTMLAttributes<HTMLDivElement> & Omit<BaseAlertProps, 'variant'> & {
+export type MiniAlertProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & Omit<BaseAlertProps, 'variant' | 'title'> & {
+    /** Alert heading content — accepts string or ReactNode. Wrapped in a `<Text>` component with standard styling */
+    title?: React.ReactNode;
     /** Visual style variant */
     variant?: MiniAlertVariants;
-    /** Replaces the default title text with custom content (e.g. text with inline links) */
+    /** Replaces the default title text with custom content. Renders raw without a `<Text>` wrapper for full control over markup */
     titleSlot?: React.ReactNode;
     /** Override the icon colour */
     customIconColour?: string;

package/dist/components/Anchor/types.d.ts

@@ -7,6 +7,9 @@ export type AnchorSize = 'lg' | 'md' | 'base' | 'sm';
 /**
  * Props for the Anchor component
  */
+/**
+ * @deprecated Anchor is deprecated and will be removed in a future release. Use the `Action` component instead.
+ */
 export interface AnchorProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     /**
      * The visual style variant of the anchor

package/dist/components/AnimatedDropdown/types.d.ts

@@ -5,6 +5,9 @@ export type BasicDropdownProps = EventHandlerProps & {
     children: ReactNode;
     role?: HTMLAttributes<HTMLDivElement>['role'];
 };
+/**
+ * @deprecated AnimatedDropdown is deprecated and will be removed in a future release. Use the `Dropdown` component instead.
+ */
 export type AnimatedDropdownProps = BasicDropdownProps & {
     cta?: ReactNode;
     shouldShowDropdown: boolean;

package/dist/components/Badge/types.d.ts

@@ -3,6 +3,9 @@ export type BadgeVariant = 'default' | 'primary' | 'warning';
 /**
  * Badge properties.
  */
+/**
+ * @deprecated Badge is deprecated and will be removed in a future release. Use `Tag` or `FilterTag` instead.
+ */
 export type BadgeProps = {
     /**
      * Specifies the Badge variant.

package/dist/components/Banner/Banner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.cjs","sources":["../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import React, { ReactEventHandler, ReactNode, ReactElement } from 'react';\n\nimport { buildClassnames } from '../../utils';\nimport { Text } from '../Text';\nimport { Button } from '../Button';\nimport { CrossIcon } from '../../icons';\nimport { BannerTypes } from './types';\n\nimport styles from './Banner.module.scss';\n\nconst accentColors = {\n  help: 'var(--colors-secondary-blue-base)',\n  info: 'var(--colors-neutral-ink-base)',\n  error: 'var(--colors-secondary-red-base)',\n  success: 'var(--colors-secondary-green-base)',\n};\n\ntype BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n  type?: BannerTypes;\n  backgroundColor?: string;\n  text?: string;\n  iconSlot?: ReactElement;\n  onClose?: ReactEventHandler;\n  className?: string;\n  header?: ReactNode;\n  children?: ReactNode;\n};\n\n/**\n * @deprecated\n * The `Banner` component was previously called `Alert` (and similarly `Pill`).\n * Use Alert, FeatureBanner or SystemBanner instead\n */\nexport const Banner = ({\n  type = 'info',\n  text,\n  iconSlot,\n  onClose,\n  className,\n  header,\n  children,\n  backgroundColor = 'white',\n  ...props\n}: BannerProps) => {\n  const accentColor = accentColors[type as BannerTypes];\n\n  return (\n    <div\n      className={buildClassnames([styles.banner, className])}\n      style={\n        {\n          '--banner-accent': accentColor,\n          '--banner-bg': backgroundColor,\n        } as React.CSSProperties\n      }\n      {...props}\n    >\n      <div className={styles.row}>\n        {iconSlot && <div className={styles.iconCol}>{iconSlot}</div>}\n        {children ? (\n          <div className={styles.childContainer}>{children}</div>\n        ) : (\n          <>\n            <div className={styles.headerCol}>\n              {header || (\n                <Text className={styles.headerText} variant=\"headingSmall\">\n                  {text}\n                </Text>\n              )}\n            </div>\n            <div className={styles.col}>\n              {onClose && (\n                <Button\n                  variant=\"flat\"\n                  aria-label=\"Close\"\n                  iconSlot={<CrossIcon />}\n                  onClick={onClose}\n                />\n              )}\n            </div>\n          </>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["React","buildClassnames","styles","Text","Button","CrossIcon"],"mappings":";;;;;;;;;;;;;;AAUA,MAAM,YAAY,GAAG;AACnB,IAAA,IAAI,EAAE,mCAAmC;AACzC,IAAA,IAAI,EAAE,gCAAgC;AACtC,IAAA,KAAK,EAAE,kCAAkC;AACzC,IAAA,OAAO,EAAE,oCAAoC;CAC9C;AAaD;;;;AAIG;AACI,MAAM,MAAM,GAAG,CAAC,EACrB,IAAI,GAAG,MAAM,EACb,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,SAAS,EACT,MAAM,EACN,QAAQ,EACR,eAAe,GAAG,OAAO,EACzB,GAAG,KAAK,EACI,KAAI;AAChB,IAAA,MAAM,WAAW,GAAG,YAAY,CAAC,IAAmB,CAAC;AAErD,IAAA,QACEA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEC,+BAAe,CAAC,CAACC,aAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,EACtD,KAAK,EACH;AACE,YAAA,iBAAiB,EAAE,WAAW;AAC9B,YAAA,aAAa,EAAE,eAAe;AACR,SAAA,EAAA,GAEtB,KAAK,EAAA;AAET,QAAAF,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEE,aAAM,CAAC,GAAG,EAAA;YACvB,QAAQ,IAAIF,8CAAK,SAAS,EAAEE,aAAM,CAAC,OAAO,EAAA,EAAG,QAAQ,CAAO;AAC5D,YAAA,QAAQ,IACPF,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEE,aAAM,CAAC,cAAc,IAAG,QAAQ,CAAO,KAEvDF,sBAAA,CAAA,aAAA,CAAAA,sBAAA,CAAA,QAAA,EAAA,IAAA;gBACEA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEE,aAAM,CAAC,SAAS,IAC7B,MAAM,KACLF,sBAAA,CAAA,aAAA,CAACG,SAAI,EAAA,EAAC,SAAS,EAAED,aAAM,CAAC,UAAU,EAAE,OAAO,EAAC,cAAc,EAAA,EACvD,IAAI,CACA,CACR,CACG;AACN,gBAAAF,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEE,aAAM,CAAC,GAAG,EAAA,EACvB,OAAO,KACNF,qCAACI,aAAM,EAAA,EACL,OAAO,EAAC,MAAM,EAAA,YAAA,EACH,OAAO,EAClB,QAAQ,EAAEJ,sBAAA,CAAA,aAAA,CAACK,wBAAS,EAAA,IAAA,CAAG,EACvB,OAAO,EAAE,OAAO,EAAA,CAChB,CACH,CACG,CACL,CACJ,CACG,CACF;AAEV;;;;"}
+{"version":3,"file":"Banner.cjs","sources":["../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import React, { ReactEventHandler, ReactNode, ReactElement } from 'react';\n\nimport { buildClassnames } from '../../utils';\nimport { Text } from '../Text';\nimport { Button } from '../Button';\nimport { CrossIcon } from '../../icons';\nimport { BannerTypes } from './types';\n\nimport styles from './Banner.module.scss';\n\nconst accentColors = {\n  help: 'var(--colors-secondary-blue-base)',\n  info: 'var(--colors-neutral-ink-base)',\n  error: 'var(--colors-secondary-red-base)',\n  success: 'var(--colors-secondary-green-base)',\n};\n\n/**\n * @deprecated Banner is deprecated and will be removed in a future release. Use `Alert`, `FeatureBanner` or `SystemBanner` instead.\n */\ntype BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n  type?: BannerTypes;\n  backgroundColor?: string;\n  text?: string;\n  iconSlot?: ReactElement;\n  onClose?: ReactEventHandler;\n  className?: string;\n  header?: ReactNode;\n  children?: ReactNode;\n};\n\n/**\n * @deprecated\n * The `Banner` component was previously called `Alert` (and similarly `Pill`).\n * Use Alert, FeatureBanner or SystemBanner instead\n */\nexport const Banner = ({\n  type = 'info',\n  text,\n  iconSlot,\n  onClose,\n  className,\n  header,\n  children,\n  backgroundColor = 'white',\n  ...props\n}: BannerProps) => {\n  const accentColor = accentColors[type as BannerTypes];\n\n  return (\n    <div\n      className={buildClassnames([styles.banner, className])}\n      style={\n        {\n          '--banner-accent': accentColor,\n          '--banner-bg': backgroundColor,\n        } as React.CSSProperties\n      }\n      {...props}\n    >\n      <div className={styles.row}>\n        {iconSlot && <div className={styles.iconCol}>{iconSlot}</div>}\n        {children ? (\n          <div className={styles.childContainer}>{children}</div>\n        ) : (\n          <>\n            <div className={styles.headerCol}>\n              {header || (\n                <Text className={styles.headerText} variant=\"headingSmall\">\n                  {text}\n                </Text>\n              )}\n            </div>\n            <div className={styles.col}>\n              {onClose && (\n                <Button\n                  variant=\"flat\"\n                  aria-label=\"Close\"\n                  iconSlot={<CrossIcon />}\n                  onClick={onClose}\n                />\n              )}\n            </div>\n          </>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["React","buildClassnames","styles","Text","Button","CrossIcon"],"mappings":";;;;;;;;;;;;;;AAUA,MAAM,YAAY,GAAG;AACnB,IAAA,IAAI,EAAE,mCAAmC;AACzC,IAAA,IAAI,EAAE,gCAAgC;AACtC,IAAA,KAAK,EAAE,kCAAkC;AACzC,IAAA,OAAO,EAAE,oCAAoC;CAC9C;AAgBD;;;;AAIG;AACI,MAAM,MAAM,GAAG,CAAC,EACrB,IAAI,GAAG,MAAM,EACb,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,SAAS,EACT,MAAM,EACN,QAAQ,EACR,eAAe,GAAG,OAAO,EACzB,GAAG,KAAK,EACI,KAAI;AAChB,IAAA,MAAM,WAAW,GAAG,YAAY,CAAC,IAAmB,CAAC;AAErD,IAAA,QACEA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEC,+BAAe,CAAC,CAACC,aAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,EACtD,KAAK,EACH;AACE,YAAA,iBAAiB,EAAE,WAAW;AAC9B,YAAA,aAAa,EAAE,eAAe;AACR,SAAA,EAAA,GAEtB,KAAK,EAAA;AAET,QAAAF,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEE,aAAM,CAAC,GAAG,EAAA;YACvB,QAAQ,IAAIF,8CAAK,SAAS,EAAEE,aAAM,CAAC,OAAO,EAAA,EAAG,QAAQ,CAAO;AAC5D,YAAA,QAAQ,IACPF,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEE,aAAM,CAAC,cAAc,IAAG,QAAQ,CAAO,KAEvDF,sBAAA,CAAA,aAAA,CAAAA,sBAAA,CAAA,QAAA,EAAA,IAAA;gBACEA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEE,aAAM,CAAC,SAAS,IAC7B,MAAM,KACLF,sBAAA,CAAA,aAAA,CAACG,SAAI,EAAA,EAAC,SAAS,EAAED,aAAM,CAAC,UAAU,EAAE,OAAO,EAAC,cAAc,EAAA,EACvD,IAAI,CACA,CACR,CACG;AACN,gBAAAF,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEE,aAAM,CAAC,GAAG,EAAA,EACvB,OAAO,KACNF,qCAACI,aAAM,EAAA,EACL,OAAO,EAAC,MAAM,EAAA,YAAA,EACH,OAAO,EAClB,QAAQ,EAAEJ,sBAAA,CAAA,aAAA,CAACK,wBAAS,EAAA,IAAA,CAAG,EACvB,OAAO,EAAE,OAAO,EAAA,CAChB,CACH,CACG,CACL,CACJ,CACG,CACF;AAEV;;;;"}

package/dist/components/Banner/Banner.d.ts

@@ -1,5 +1,8 @@
 import React, { ReactEventHandler, ReactNode, ReactElement } from 'react';
 import { BannerTypes } from './types';
+/**
+ * @deprecated Banner is deprecated and will be removed in a future release. Use `Alert`, `FeatureBanner` or `SystemBanner` instead.
+ */
 type BannerProps = React.HTMLAttributes<HTMLDivElement> & {
     type?: BannerTypes;
     backgroundColor?: string;

package/dist/components/Banner/Banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","sources":["../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import React, { ReactEventHandler, ReactNode, ReactElement } from 'react';\n\nimport { buildClassnames } from '../../utils';\nimport { Text } from '../Text';\nimport { Button } from '../Button';\nimport { CrossIcon } from '../../icons';\nimport { BannerTypes } from './types';\n\nimport styles from './Banner.module.scss';\n\nconst accentColors = {\n  help: 'var(--colors-secondary-blue-base)',\n  info: 'var(--colors-neutral-ink-base)',\n  error: 'var(--colors-secondary-red-base)',\n  success: 'var(--colors-secondary-green-base)',\n};\n\ntype BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n  type?: BannerTypes;\n  backgroundColor?: string;\n  text?: string;\n  iconSlot?: ReactElement;\n  onClose?: ReactEventHandler;\n  className?: string;\n  header?: ReactNode;\n  children?: ReactNode;\n};\n\n/**\n * @deprecated\n * The `Banner` component was previously called `Alert` (and similarly `Pill`).\n * Use Alert, FeatureBanner or SystemBanner instead\n */\nexport const Banner = ({\n  type = 'info',\n  text,\n  iconSlot,\n  onClose,\n  className,\n  header,\n  children,\n  backgroundColor = 'white',\n  ...props\n}: BannerProps) => {\n  const accentColor = accentColors[type as BannerTypes];\n\n  return (\n    <div\n      className={buildClassnames([styles.banner, className])}\n      style={\n        {\n          '--banner-accent': accentColor,\n          '--banner-bg': backgroundColor,\n        } as React.CSSProperties\n      }\n      {...props}\n    >\n      <div className={styles.row}>\n        {iconSlot && <div className={styles.iconCol}>{iconSlot}</div>}\n        {children ? (\n          <div className={styles.childContainer}>{children}</div>\n        ) : (\n          <>\n            <div className={styles.headerCol}>\n              {header || (\n                <Text className={styles.headerText} variant=\"headingSmall\">\n                  {text}\n                </Text>\n              )}\n            </div>\n            <div className={styles.col}>\n              {onClose && (\n                <Button\n                  variant=\"flat\"\n                  aria-label=\"Close\"\n                  iconSlot={<CrossIcon />}\n                  onClick={onClose}\n                />\n              )}\n            </div>\n          </>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;AAUA,MAAM,YAAY,GAAG;AACnB,IAAA,IAAI,EAAE,mCAAmC;AACzC,IAAA,IAAI,EAAE,gCAAgC;AACtC,IAAA,KAAK,EAAE,kCAAkC;AACzC,IAAA,OAAO,EAAE,oCAAoC;CAC9C;AAaD;;;;AAIG;AACI,MAAM,MAAM,GAAG,CAAC,EACrB,IAAI,GAAG,MAAM,EACb,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,SAAS,EACT,MAAM,EACN,QAAQ,EACR,eAAe,GAAG,OAAO,EACzB,GAAG,KAAK,EACI,KAAI;AAChB,IAAA,MAAM,WAAW,GAAG,YAAY,CAAC,IAAmB,CAAC;AAErD,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,EACtD,KAAK,EACH;AACE,YAAA,iBAAiB,EAAE,WAAW;AAC9B,YAAA,aAAa,EAAE,eAAe;AACR,SAAA,EAAA,GAEtB,KAAK,EAAA;AAET,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,GAAG,EAAA;YACvB,QAAQ,IAAIA,sCAAK,SAAS,EAAE,MAAM,CAAC,OAAO,EAAA,EAAG,QAAQ,CAAO;AAC5D,YAAA,QAAQ,IACPA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,cAAc,IAAG,QAAQ,CAAO,KAEvDA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA;gBACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,SAAS,IAC7B,MAAM,KACLA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAE,MAAM,CAAC,UAAU,EAAE,OAAO,EAAC,cAAc,EAAA,EACvD,IAAI,CACA,CACR,CACG;AACN,gBAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,GAAG,EAAA,EACvB,OAAO,KACNA,6BAAC,MAAM,EAAA,EACL,OAAO,EAAC,MAAM,EAAA,YAAA,EACH,OAAO,EAClB,QAAQ,EAAEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,IAAA,CAAG,EACvB,OAAO,EAAE,OAAO,EAAA,CAChB,CACH,CACG,CACL,CACJ,CACG,CACF;AAEV;;;;"}
+{"version":3,"file":"Banner.js","sources":["../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import React, { ReactEventHandler, ReactNode, ReactElement } from 'react';\n\nimport { buildClassnames } from '../../utils';\nimport { Text } from '../Text';\nimport { Button } from '../Button';\nimport { CrossIcon } from '../../icons';\nimport { BannerTypes } from './types';\n\nimport styles from './Banner.module.scss';\n\nconst accentColors = {\n  help: 'var(--colors-secondary-blue-base)',\n  info: 'var(--colors-neutral-ink-base)',\n  error: 'var(--colors-secondary-red-base)',\n  success: 'var(--colors-secondary-green-base)',\n};\n\n/**\n * @deprecated Banner is deprecated and will be removed in a future release. Use `Alert`, `FeatureBanner` or `SystemBanner` instead.\n */\ntype BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n  type?: BannerTypes;\n  backgroundColor?: string;\n  text?: string;\n  iconSlot?: ReactElement;\n  onClose?: ReactEventHandler;\n  className?: string;\n  header?: ReactNode;\n  children?: ReactNode;\n};\n\n/**\n * @deprecated\n * The `Banner` component was previously called `Alert` (and similarly `Pill`).\n * Use Alert, FeatureBanner or SystemBanner instead\n */\nexport const Banner = ({\n  type = 'info',\n  text,\n  iconSlot,\n  onClose,\n  className,\n  header,\n  children,\n  backgroundColor = 'white',\n  ...props\n}: BannerProps) => {\n  const accentColor = accentColors[type as BannerTypes];\n\n  return (\n    <div\n      className={buildClassnames([styles.banner, className])}\n      style={\n        {\n          '--banner-accent': accentColor,\n          '--banner-bg': backgroundColor,\n        } as React.CSSProperties\n      }\n      {...props}\n    >\n      <div className={styles.row}>\n        {iconSlot && <div className={styles.iconCol}>{iconSlot}</div>}\n        {children ? (\n          <div className={styles.childContainer}>{children}</div>\n        ) : (\n          <>\n            <div className={styles.headerCol}>\n              {header || (\n                <Text className={styles.headerText} variant=\"headingSmall\">\n                  {text}\n                </Text>\n              )}\n            </div>\n            <div className={styles.col}>\n              {onClose && (\n                <Button\n                  variant=\"flat\"\n                  aria-label=\"Close\"\n                  iconSlot={<CrossIcon />}\n                  onClick={onClose}\n                />\n              )}\n            </div>\n          </>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;AAUA,MAAM,YAAY,GAAG;AACnB,IAAA,IAAI,EAAE,mCAAmC;AACzC,IAAA,IAAI,EAAE,gCAAgC;AACtC,IAAA,KAAK,EAAE,kCAAkC;AACzC,IAAA,OAAO,EAAE,oCAAoC;CAC9C;AAgBD;;;;AAIG;AACI,MAAM,MAAM,GAAG,CAAC,EACrB,IAAI,GAAG,MAAM,EACb,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,SAAS,EACT,MAAM,EACN,QAAQ,EACR,eAAe,GAAG,OAAO,EACzB,GAAG,KAAK,EACI,KAAI;AAChB,IAAA,MAAM,WAAW,GAAG,YAAY,CAAC,IAAmB,CAAC;AAErD,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,EACtD,KAAK,EACH;AACE,YAAA,iBAAiB,EAAE,WAAW;AAC9B,YAAA,aAAa,EAAE,eAAe;AACR,SAAA,EAAA,GAEtB,KAAK,EAAA;AAET,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,GAAG,EAAA;YACvB,QAAQ,IAAIA,sCAAK,SAAS,EAAE,MAAM,CAAC,OAAO,EAAA,EAAG,QAAQ,CAAO;AAC5D,YAAA,QAAQ,IACPA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,cAAc,IAAG,QAAQ,CAAO,KAEvDA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA;gBACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,SAAS,IAC7B,MAAM,KACLA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAE,MAAM,CAAC,UAAU,EAAE,OAAO,EAAC,cAAc,EAAA,EACvD,IAAI,CACA,CACR,CACG;AACN,gBAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,GAAG,EAAA,EACvB,OAAO,KACNA,6BAAC,MAAM,EAAA,EACL,OAAO,EAAC,MAAM,EAAA,YAAA,EACH,OAAO,EAClB,QAAQ,EAAEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,IAAA,CAAG,EACvB,OAAO,EAAE,OAAO,EAAA,CAChB,CACH,CACG,CACL,CACJ,CACG,CACF;AAEV;;;;"}

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

@@ -2,8 +2,8 @@
 
 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"};
+___$insertStyle("._input_naeof_1 {\n  appearance: none;\n  width: 18px;\n  height: 18px;\n  background-color: transparent;\n  border: 2px solid var(--choice-error-border, 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_naeof_1:checked {\n  background-color: var(--choice-error-bg, var(--colors-secondary-blue-base));\n  border-color: var(--choice-error-border, 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_naeof_1:hover {\n  border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n}\n._input_naeof_1:active {\n  border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n}\n._input_naeof_1:focus {\n  box-shadow: 0 0 0 var(--sizes-xs) var(--choice-error-focus, var(--colors-secondary-blue-light));\n  outline: 0;\n}\n._input_naeof_1:indeterminate {\n  background-color: var(--choice-error-bg, var(--colors-secondary-blue-base));\n  border-color: var(--choice-error-border, 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_naeof_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_naeof_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_naeof_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_naeof_1"};
 
 module.exports = styles;
 //# sourceMappingURL=Checkbox.module.scss.cjs.map

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

@@ -1 +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;;;;"}
+{"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(--choice-error-border, 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(--choice-error-bg, var(--colors-secondary-blue-base));\n    border-color: var(--choice-error-border, 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(--choice-error-border, var(--colors-secondary-blue-base));\n  }\n\n  &:active {\n    border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n  }\n\n  &:focus {\n    box-shadow: 0 0 0 var(--sizes-xs) var(--choice-error-focus, var(--colors-secondary-blue-light));\n    outline: 0;\n  }\n\n  &:indeterminate {\n    background-color: var(--choice-error-bg, var(--colors-secondary-blue-base));\n    border-color: var(--choice-error-border, 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,khFAAA;AACA,aAAA,CAAA,OAAA,CAAA,gBAAA;;;;"}

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

@@ -1,7 +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"};
+insertStyle("._input_naeof_1 {\n  appearance: none;\n  width: 18px;\n  height: 18px;\n  background-color: transparent;\n  border: 2px solid var(--choice-error-border, 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_naeof_1:checked {\n  background-color: var(--choice-error-bg, var(--colors-secondary-blue-base));\n  border-color: var(--choice-error-border, 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_naeof_1:hover {\n  border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n}\n._input_naeof_1:active {\n  border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n}\n._input_naeof_1:focus {\n  box-shadow: 0 0 0 var(--sizes-xs) var(--choice-error-focus, var(--colors-secondary-blue-light));\n  outline: 0;\n}\n._input_naeof_1:indeterminate {\n  background-color: var(--choice-error-bg, var(--colors-secondary-blue-base));\n  border-color: var(--choice-error-border, 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_naeof_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_naeof_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_naeof_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_naeof_1"};
 
 export { styles as default };
 //# sourceMappingURL=Checkbox.module.scss.js.map

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

@@ -1 +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;;;;"}
+{"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(--choice-error-border, 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(--choice-error-bg, var(--colors-secondary-blue-base));\n    border-color: var(--choice-error-border, 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(--choice-error-border, var(--colors-secondary-blue-base));\n  }\n\n  &:active {\n    border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n  }\n\n  &:focus {\n    box-shadow: 0 0 0 var(--sizes-xs) var(--choice-error-focus, var(--colors-secondary-blue-light));\n    outline: 0;\n  }\n\n  &:indeterminate {\n    background-color: var(--choice-error-bg, var(--colors-secondary-blue-base));\n    border-color: var(--choice-error-border, 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,khFAAA;AACA,aAAA,CAAA,OAAA,CAAA,gBAAA;;;;"}

package/dist/components/Choice/Choice.cjs

@@ -8,6 +8,7 @@ var index = require('../../theme/index.cjs');
 var Tooltip = require('../Tooltip/Tooltip.cjs');
 var HelpIcon = require('../../icons/design-system/components/HelpIcon.cjs');
 var Text = require('../Text/Text.cjs');
+var MiniAlert = require('../Alerts/MiniAlert/MiniAlert.cjs');
 var Choice_module = require('./Choice.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -30,6 +31,7 @@ const Choice = ({ htmlFor, className, label, hint, tooltip, tooltipContent, erro
         Choice_module.wrapper,
         bordered && Choice_module.bordered,
         disabled && Choice_module.disabled,
+        error && Choice_module.error,
         className,
     ]);
     const contentMarkup = (React__default.default.createElement("div", { className: Choice_module['root-layout'] },
@@ -42,7 +44,7 @@ const Choice = ({ htmlFor, className, label, hint, tooltip, tooltipContent, erro
                 (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)),
+            error && (React__default.default.createElement(MiniAlert.MiniAlert, { variant: "error", title: error, className: classNames.error, isBold: false, role: "alert" })),
             Footer)) : null,
         inputPosition === 'right' && React__default.default.createElement("div", { className: inputLayoutClass }, children)));
     return (React__default.default.createElement("label", { htmlFor: htmlFor, className: wrapperClass }, contentMarkup));

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 { 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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"}
+{"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';\nimport { MiniAlert } from '../Alerts/MiniAlert';\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    error && styles.error,\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            <MiniAlert \n              variant=\"error\" \n              title={error}\n              className={classNames.error}\n              isBold={false}\n              role=\"alert\"\n            />\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","MiniAlert"],"mappings":"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"}

package/dist/components/Choice/Choice.js

@@ -6,6 +6,7 @@ import { theme } from '../../theme/index.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 { MiniAlert } from '../Alerts/MiniAlert/MiniAlert.js';
 import styles from './Choice.module.scss.js';
 
 const generateClassNames = (prefix) => ({
@@ -24,6 +25,7 @@ const Choice = ({ htmlFor, className, label, hint, tooltip, tooltipContent, erro
         styles.wrapper,
         bordered && styles.bordered,
         disabled && styles.disabled,
+        error && styles.error,
         className,
     ]);
     const contentMarkup = (React__default.createElement("div", { className: styles['root-layout'] },
@@ -36,7 +38,7 @@ const Choice = ({ htmlFor, className, label, hint, tooltip, tooltipContent, erro
                 (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)),
+            error && (React__default.createElement(MiniAlert, { variant: "error", title: error, className: classNames.error, isBold: false, role: "alert" })),
             Footer)) : null,
         inputPosition === 'right' && React__default.createElement("div", { className: inputLayoutClass }, children)));
     return (React__default.createElement("label", { htmlFor: htmlFor, className: wrapperClass }, contentMarkup));

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 { 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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"}
+{"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';\nimport { MiniAlert } from '../Alerts/MiniAlert';\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    error && styles.error,\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            <MiniAlert \n              variant=\"error\" \n              title={error}\n              className={classNames.error}\n              isBold={false}\n              role=\"alert\"\n            />\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

@@ -2,8 +2,8 @@
 
 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"};
+___$insertStyle("._wrapper_416ft_1 {\n  box-sizing: border-box;\n}\n._wrapper_416ft_1:hover {\n  cursor: pointer;\n}\n._wrapper_416ft_1._disabled_416ft_7:hover {\n  cursor: default;\n}\n\n._error_416ft_11 {\n  --choice-error-border: var(--colors-secondary-red-base);\n  --choice-error-focus: var(--colors-secondary-red-light);\n  --choice-error-bg: var(--colors-secondary-red-base);\n  /* Bordered error state */\n}\n._error_416ft_11._bordered_416ft_17 {\n  border-color: var(--colors-secondary-red-base);\n}\n\n._bordered_416ft_17 {\n  display: block;\n  border: 2px solid var(--colors-neutral-grey-dark);\n  border-radius: var(--radius-md);\n  padding: var(--sizes-base) var(--sizes-3);\n  background-color: white;\n}\n._bordered_416ft_17:not(._disabled_416ft_7):hover {\n  border-color: var(--colors-secondary-blue-base);\n}\n._bordered_416ft_17:not(._error_416ft_11):has(input:checked) {\n  border-color: var(--colors-secondary-blue-base);\n}\n\n._root-layout_416ft_35 {\n  display: flex;\n  align-items: center;\n}\n._root-layout_416ft_35 > * + * {\n  margin-left: var(--sizes-base);\n}\n\n._input-layout_416ft_43 {\n  align-self: stretch;\n  display: flex;\n}\n._input-layout_416ft_43._align-top_416ft_47 {\n  align-items: flex-start;\n}\n._input-layout_416ft_43._align-center_416ft_50 {\n  align-items: center;\n}\n\n._accessory-layout_416ft_54 {\n  align-self: center;\n  display: flex;\n  align-items: center;\n}\n\n._text-layout_416ft_60 {\n  flex: 1;\n}\n._text-layout_416ft_60 > span {\n  display: block;\n}\n._text-layout_416ft_60 > * + * {\n  margin-top: var(--sizes-sm);\n}");
+var styles = {"wrapper":"_wrapper_416ft_1","disabled":"_disabled_416ft_7","error":"_error_416ft_11","bordered":"_bordered_416ft_17","root-layout":"_root-layout_416ft_35","input-layout":"_input-layout_416ft_43","align-top":"_align-top_416ft_47","align-center":"_align-center_416ft_50","accessory-layout":"_accessory-layout_416ft_54","text-layout":"_text-layout_416ft_60"};
 
 module.exports = styles;
 //# sourceMappingURL=Choice.module.scss.cjs.map

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

@@ -1 +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;;;;;"}
+{"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.error {\n  --choice-error-border: var(--colors-secondary-red-base);\n  --choice-error-focus: var(--colors-secondary-red-light);\n  --choice-error-bg: var(--colors-secondary-red-base);\n\n  /* Bordered error state */\n  &.bordered {\n    border-color: var(--colors-secondary-red-base);\n  }\n}\n\n.bordered {\n  display: block;\n  border: 2px solid var(--colors-neutral-grey-dark);\n  border-radius: var(--radius-md);\n  padding: var(--sizes-base) var(--sizes-3);\n  background-color: white;\n\n  &:not(.disabled):hover {\n    border-color: var(--colors-secondary-blue-base);\n  }\n\n  &:not(.error):has(input:checked) {\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  & > span {\n    display: block;\n  }\n\n  & > * + * {\n    margin-top: var(--sizes-sm);\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,qiDAAA;;;;;"}

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

@@ -1,7 +1,7 @@
 import insertStyle from '../../_virtual/____insertStyle.js';
 
-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"};
+insertStyle("._wrapper_416ft_1 {\n  box-sizing: border-box;\n}\n._wrapper_416ft_1:hover {\n  cursor: pointer;\n}\n._wrapper_416ft_1._disabled_416ft_7:hover {\n  cursor: default;\n}\n\n._error_416ft_11 {\n  --choice-error-border: var(--colors-secondary-red-base);\n  --choice-error-focus: var(--colors-secondary-red-light);\n  --choice-error-bg: var(--colors-secondary-red-base);\n  /* Bordered error state */\n}\n._error_416ft_11._bordered_416ft_17 {\n  border-color: var(--colors-secondary-red-base);\n}\n\n._bordered_416ft_17 {\n  display: block;\n  border: 2px solid var(--colors-neutral-grey-dark);\n  border-radius: var(--radius-md);\n  padding: var(--sizes-base) var(--sizes-3);\n  background-color: white;\n}\n._bordered_416ft_17:not(._disabled_416ft_7):hover {\n  border-color: var(--colors-secondary-blue-base);\n}\n._bordered_416ft_17:not(._error_416ft_11):has(input:checked) {\n  border-color: var(--colors-secondary-blue-base);\n}\n\n._root-layout_416ft_35 {\n  display: flex;\n  align-items: center;\n}\n._root-layout_416ft_35 > * + * {\n  margin-left: var(--sizes-base);\n}\n\n._input-layout_416ft_43 {\n  align-self: stretch;\n  display: flex;\n}\n._input-layout_416ft_43._align-top_416ft_47 {\n  align-items: flex-start;\n}\n._input-layout_416ft_43._align-center_416ft_50 {\n  align-items: center;\n}\n\n._accessory-layout_416ft_54 {\n  align-self: center;\n  display: flex;\n  align-items: center;\n}\n\n._text-layout_416ft_60 {\n  flex: 1;\n}\n._text-layout_416ft_60 > span {\n  display: block;\n}\n._text-layout_416ft_60 > * + * {\n  margin-top: var(--sizes-sm);\n}");
+var styles = {"wrapper":"_wrapper_416ft_1","disabled":"_disabled_416ft_7","error":"_error_416ft_11","bordered":"_bordered_416ft_17","root-layout":"_root-layout_416ft_35","input-layout":"_input-layout_416ft_43","align-top":"_align-top_416ft_47","align-center":"_align-center_416ft_50","accessory-layout":"_accessory-layout_416ft_54","text-layout":"_text-layout_416ft_60"};
 
 export { styles as default };
 //# sourceMappingURL=Choice.module.scss.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Choice.module.scss.js","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":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,ogCAAA;;;;;"}
+{"version":3,"file":"Choice.module.scss.js","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.error {\n  --choice-error-border: var(--colors-secondary-red-base);\n  --choice-error-focus: var(--colors-secondary-red-light);\n  --choice-error-bg: var(--colors-secondary-red-base);\n\n  /* Bordered error state */\n  &.bordered {\n    border-color: var(--colors-secondary-red-base);\n  }\n}\n\n.bordered {\n  display: block;\n  border: 2px solid var(--colors-neutral-grey-dark);\n  border-radius: var(--radius-md);\n  padding: var(--sizes-base) var(--sizes-3);\n  background-color: white;\n\n  &:not(.disabled):hover {\n    border-color: var(--colors-secondary-blue-base);\n  }\n\n  &:not(.error):has(input:checked) {\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  & > span {\n    display: block;\n  }\n\n  & > * + * {\n    margin-top: var(--sizes-sm);\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,qiDAAA;;;;;"}

package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.cjs

@@ -15,6 +15,7 @@ require('framer-motion');
 require('../../../../Tooltip/components/TooltipPopover.cjs');
 require('react-dom');
 require('../../../../Text/Text.cjs');
+require('../../../../Flex/FlexRow/FlexRow.cjs');
 require('../../../../Radio/Radio.cjs');
 var useExpandableCell = require('./hooks/useExpandableCell.cjs');
 var BodyCell_module = require('./BodyCell.module.scss.cjs');

package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BodyCell.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { Cell, flexRender } from '@tanstack/react-table';\nimport { SELECTION_COLUMN_ID } from '../../../constants';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\nimport { usePinnedColumnStyles } from '../../../hooks';\n\nimport { useExpandableCell } from './hooks';\nimport styles from './BodyCell.module.scss';\n\ntype ColumnCellProps = {\n  /**\n   * Cell within the TanStack Table instance.\n   */\n  cell: Cell<any, any>;\n\n  /**\n   * ARIA roles for the grid.\n   */\n  ariaRoles: AriaRoles;\n\n  /**\n   * Whether row selection is enabled.\n   */\n  enableRowSelection: boolean;\n\n  /**\n   * Whether row expanding is enabled for the grid.\n   */\n  enableExpanding: boolean;\n};\n\n/**\n * Renders a cell element, and its content, for a given column and row, within the grid body.\n */\nexport const BodyCell = ({\n  cell,\n  ariaRoles,\n  enableRowSelection,\n  enableExpanding,\n}: ColumnCellProps) => {\n  const { justifyContent, textAlign, rowHeader, generateDataTestId } = cell.column.columnDef.meta!;\n  const CellElement = rowHeader ? 'th' : 'td';\n\n  const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({ column: cell.column });\n\n  const { expandButtonProps, contentMarginLeft } = useExpandableCell({\n    cell,\n    enableExpanding,\n    enableRowSelection,\n  });\n\n  const bodyCellClassname = buildClassnames([\n    styles.bodyCell,\n    pinnedCellClassName,\n    'data-grid-cell',\n  ]);\n\n  const cellContext = cell.getContext();\n  const cellTestId = useMemo(\n    () => (generateDataTestId ? generateDataTestId(cellContext.row.original) : undefined),\n    [generateDataTestId, cellContext.row.original],\n  );\n\n  const isSelectionCol = enableRowSelection && cell.column.id === SELECTION_COLUMN_ID;\n\n  // Capture shift key state for range selection in selection column.\n  const captureShiftKeyForSelection = isSelectionCol\n    ? (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {\n        if ('key' in e && e.key !== ' ') return;\n\n        const { row, table } = cell.getContext();\n        if (!row.getCanSelect()) return;\n\n        const { rangeSelectionState } = table.options.meta || {};\n        if (rangeSelectionState) rangeSelectionState.isShiftKeyPressed = e.shiftKey;\n      }\n    : undefined;\n\n  return (\n    <CellElement\n      className={bodyCellClassname}\n      aria-colindex={cell.column.getIndex() + 1}\n      scope={rowHeader ? 'row' : undefined}\n      role={rowHeader ? 'rowheader' : ariaRoles.cell}\n      style={pinnedCellStyles}\n      data-testid={cellTestId}\n    >\n      <CellContent\n        contentStyle={\n          {\n            marginLeft: contentMarginLeft,\n            justifyContent,\n            textAlign,\n          } as React.CSSProperties\n        }\n        expandButtonProps={expandButtonProps}\n        onMouseDown={captureShiftKeyForSelection}\n        onKeyDown={captureShiftKeyForSelection}\n      >\n        {flexRender(cell.column.columnDef.cell, cellContext)}\n      </CellContent>\n    </CellElement>\n  );\n};\n"],"names":["usePinnedColumnStyles","useExpandableCell","buildClassnames","styles","useMemo","SELECTION_COLUMN_ID","React","CellContent","flexRender"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAoCA;;AAEG;AACI,MAAM,QAAQ,GAAG,CAAC,EACvB,IAAI,EACJ,SAAS,EACT,kBAAkB,EAClB,eAAe,GACC,KAAI;AACpB,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;IAChG,MAAM,WAAW,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI;AAE3C,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAGA,2CAAqB,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;AAEhG,IAAA,MAAM,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,GAAGC,mCAAiB,CAAC;QACjE,IAAI;QACJ,eAAe;QACf,kBAAkB;AACnB,KAAA,CAAC;IAEF,MAAM,iBAAiB,GAAGC,+BAAe,CAAC;AACxC,QAAAC,eAAM,CAAC,QAAQ;QACf,mBAAmB;QACnB,gBAAgB;AACjB,KAAA,CAAC;AAEF,IAAA,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE;AACrC,IAAA,MAAM,UAAU,GAAGC,aAAO,CACxB,OAAO,kBAAkB,GAAG,kBAAkB,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC,EACrF,CAAC,kBAAkB,EAAE,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,CAC/C;IAED,MAAM,cAAc,GAAG,kBAAkB,IAAI,IAAI,CAAC,MAAM,CAAC,EAAE,KAAKC,6BAAmB;;IAGnF,MAAM,2BAA2B,GAAG;AAClC,UAAE,CAAC,CAAyE,KAAI;YAC5E,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG;gBAAE;YAEjC,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,UAAU,EAAE;AACxC,YAAA,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;gBAAE;YAEzB,MAAM,EAAE,mBAAmB,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,IAAI,EAAE;AACxD,YAAA,IAAI,mBAAmB;AAAE,gBAAA,mBAAmB,CAAC,iBAAiB,GAAG,CAAC,CAAC,QAAQ;QAC7E;UACA,SAAS;IAEb,QACEC,qCAAC,WAAW,EAAA,EACV,SAAS,EAAE,iBAAiB,mBACb,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EACzC,KAAK,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,EACpC,IAAI,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC,IAAI,EAC9C,KAAK,EAAE,gBAAgB,EAAA,aAAA,EACV,UAAU,EAAA;QAEvBA,sBAAA,CAAA,aAAA,CAACC,uBAAW,EAAA,EACV,YAAY,EACV;AACE,gBAAA,UAAU,EAAE,iBAAiB;gBAC7B,cAAc;gBACd,SAAS;aACa,EAE1B,iBAAiB,EAAE,iBAAiB,EACpC,WAAW,EAAE,2BAA2B,EACxC,SAAS,EAAE,2BAA2B,EAAA,EAErCC,qBAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,WAAW,CAAC,CACxC,CACF;AAElB;;;;"}
+{"version":3,"file":"BodyCell.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { Cell, flexRender } from '@tanstack/react-table';\nimport { SELECTION_COLUMN_ID } from '../../../constants';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\nimport { usePinnedColumnStyles } from '../../../hooks';\n\nimport { useExpandableCell } from './hooks';\nimport styles from './BodyCell.module.scss';\n\ntype ColumnCellProps = {\n  /**\n   * Cell within the TanStack Table instance.\n   */\n  cell: Cell<any, any>;\n\n  /**\n   * ARIA roles for the grid.\n   */\n  ariaRoles: AriaRoles;\n\n  /**\n   * Whether row selection is enabled.\n   */\n  enableRowSelection: boolean;\n\n  /**\n   * Whether row expanding is enabled for the grid.\n   */\n  enableExpanding: boolean;\n};\n\n/**\n * Renders a cell element, and its content, for a given column and row, within the grid body.\n */\nexport const BodyCell = ({\n  cell,\n  ariaRoles,\n  enableRowSelection,\n  enableExpanding,\n}: ColumnCellProps) => {\n  const { justifyContent, textAlign, rowHeader, generateDataTestId } = cell.column.columnDef.meta!;\n  const CellElement = rowHeader ? 'th' : 'td';\n\n  const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({ column: cell.column });\n\n  const { expandButtonProps, contentMarginLeft } = useExpandableCell({\n    cell,\n    enableExpanding,\n    enableRowSelection,\n  });\n\n  const bodyCellClassname = buildClassnames([\n    styles.bodyCell,\n    pinnedCellClassName,\n    'data-grid-cell',\n  ]);\n\n  const cellContext = cell.getContext();\n  const cellTestId = useMemo(\n    () => (generateDataTestId ? generateDataTestId(cellContext.row.original) : undefined),\n    [generateDataTestId, cellContext.row.original],\n  );\n\n  const isSelectionCol = enableRowSelection && cell.column.id === SELECTION_COLUMN_ID;\n\n  // Capture shift key state for range selection in selection column.\n  const captureShiftKeyForSelection = isSelectionCol\n    ? (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {\n        if ('key' in e && e.key !== ' ') return;\n\n        const { row, table } = cell.getContext();\n        if (!row.getCanSelect()) return;\n\n        const { rangeSelectionState } = table.options.meta || {};\n        if (rangeSelectionState) rangeSelectionState.isShiftKeyPressed = e.shiftKey;\n      }\n    : undefined;\n\n  return (\n    <CellElement\n      className={bodyCellClassname}\n      aria-colindex={cell.column.getIndex() + 1}\n      scope={rowHeader ? 'row' : undefined}\n      role={rowHeader ? 'rowheader' : ariaRoles.cell}\n      style={pinnedCellStyles}\n      data-testid={cellTestId}\n    >\n      <CellContent\n        contentStyle={\n          {\n            marginLeft: contentMarginLeft,\n            justifyContent,\n            textAlign,\n          } as React.CSSProperties\n        }\n        expandButtonProps={expandButtonProps}\n        onMouseDown={captureShiftKeyForSelection}\n        onKeyDown={captureShiftKeyForSelection}\n      >\n        {flexRender(cell.column.columnDef.cell, cellContext)}\n      </CellContent>\n    </CellElement>\n  );\n};\n"],"names":["usePinnedColumnStyles","useExpandableCell","buildClassnames","styles","useMemo","SELECTION_COLUMN_ID","React","CellContent","flexRender"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA;;AAEG;AACI,MAAM,QAAQ,GAAG,CAAC,EACvB,IAAI,EACJ,SAAS,EACT,kBAAkB,EAClB,eAAe,GACC,KAAI;AACpB,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;IAChG,MAAM,WAAW,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI;AAE3C,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAGA,2CAAqB,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;AAEhG,IAAA,MAAM,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,GAAGC,mCAAiB,CAAC;QACjE,IAAI;QACJ,eAAe;QACf,kBAAkB;AACnB,KAAA,CAAC;IAEF,MAAM,iBAAiB,GAAGC,+BAAe,CAAC;AACxC,QAAAC,eAAM,CAAC,QAAQ;QACf,mBAAmB;QACnB,gBAAgB;AACjB,KAAA,CAAC;AAEF,IAAA,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE;AACrC,IAAA,MAAM,UAAU,GAAGC,aAAO,CACxB,OAAO,kBAAkB,GAAG,kBAAkB,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC,EACrF,CAAC,kBAAkB,EAAE,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,CAC/C;IAED,MAAM,cAAc,GAAG,kBAAkB,IAAI,IAAI,CAAC,MAAM,CAAC,EAAE,KAAKC,6BAAmB;;IAGnF,MAAM,2BAA2B,GAAG;AAClC,UAAE,CAAC,CAAyE,KAAI;YAC5E,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG;gBAAE;YAEjC,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,UAAU,EAAE;AACxC,YAAA,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;gBAAE;YAEzB,MAAM,EAAE,mBAAmB,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,IAAI,EAAE;AACxD,YAAA,IAAI,mBAAmB;AAAE,gBAAA,mBAAmB,CAAC,iBAAiB,GAAG,CAAC,CAAC,QAAQ;QAC7E;UACA,SAAS;IAEb,QACEC,qCAAC,WAAW,EAAA,EACV,SAAS,EAAE,iBAAiB,mBACb,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EACzC,KAAK,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,EACpC,IAAI,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC,IAAI,EAC9C,KAAK,EAAE,gBAAgB,EAAA,aAAA,EACV,UAAU,EAAA;QAEvBA,sBAAA,CAAA,aAAA,CAACC,uBAAW,EAAA,EACV,YAAY,EACV;AACE,gBAAA,UAAU,EAAE,iBAAiB;gBAC7B,cAAc;gBACd,SAAS;aACa,EAE1B,iBAAiB,EAAE,iBAAiB,EACpC,WAAW,EAAE,2BAA2B,EACxC,SAAS,EAAE,2BAA2B,EAAA,EAErCC,qBAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,WAAW,CAAC,CACxC,CACF;AAElB;;;;"}

package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.js

@@ -13,6 +13,7 @@ import 'framer-motion';
 import '../../../../Tooltip/components/TooltipPopover.js';
 import 'react-dom';
 import '../../../../Text/Text.js';
+import '../../../../Flex/FlexRow/FlexRow.js';
 import '../../../../Radio/Radio.js';
 import { useExpandableCell } from './hooks/useExpandableCell.js';
 import styles from './BodyCell.module.scss.js';

package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"BodyCell.js","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { Cell, flexRender } from '@tanstack/react-table';\nimport { SELECTION_COLUMN_ID } from '../../../constants';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\nimport { usePinnedColumnStyles } from '../../../hooks';\n\nimport { useExpandableCell } from './hooks';\nimport styles from './BodyCell.module.scss';\n\ntype ColumnCellProps = {\n  /**\n   * Cell within the TanStack Table instance.\n   */\n  cell: Cell<any, any>;\n\n  /**\n   * ARIA roles for the grid.\n   */\n  ariaRoles: AriaRoles;\n\n  /**\n   * Whether row selection is enabled.\n   */\n  enableRowSelection: boolean;\n\n  /**\n   * Whether row expanding is enabled for the grid.\n   */\n  enableExpanding: boolean;\n};\n\n/**\n * Renders a cell element, and its content, for a given column and row, within the grid body.\n */\nexport const BodyCell = ({\n  cell,\n  ariaRoles,\n  enableRowSelection,\n  enableExpanding,\n}: ColumnCellProps) => {\n  const { justifyContent, textAlign, rowHeader, generateDataTestId } = cell.column.columnDef.meta!;\n  const CellElement = rowHeader ? 'th' : 'td';\n\n  const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({ column: cell.column });\n\n  const { expandButtonProps, contentMarginLeft } = useExpandableCell({\n    cell,\n    enableExpanding,\n    enableRowSelection,\n  });\n\n  const bodyCellClassname = buildClassnames([\n    styles.bodyCell,\n    pinnedCellClassName,\n    'data-grid-cell',\n  ]);\n\n  const cellContext = cell.getContext();\n  const cellTestId = useMemo(\n    () => (generateDataTestId ? generateDataTestId(cellContext.row.original) : undefined),\n    [generateDataTestId, cellContext.row.original],\n  );\n\n  const isSelectionCol = enableRowSelection && cell.column.id === SELECTION_COLUMN_ID;\n\n  // Capture shift key state for range selection in selection column.\n  const captureShiftKeyForSelection = isSelectionCol\n    ? (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {\n        if ('key' in e && e.key !== ' ') return;\n\n        const { row, table } = cell.getContext();\n        if (!row.getCanSelect()) return;\n\n        const { rangeSelectionState } = table.options.meta || {};\n        if (rangeSelectionState) rangeSelectionState.isShiftKeyPressed = e.shiftKey;\n      }\n    : undefined;\n\n  return (\n    <CellElement\n      className={bodyCellClassname}\n      aria-colindex={cell.column.getIndex() + 1}\n      scope={rowHeader ? 'row' : undefined}\n      role={rowHeader ? 'rowheader' : ariaRoles.cell}\n      style={pinnedCellStyles}\n      data-testid={cellTestId}\n    >\n      <CellContent\n        contentStyle={\n          {\n            marginLeft: contentMarginLeft,\n            justifyContent,\n            textAlign,\n          } as React.CSSProperties\n        }\n        expandButtonProps={expandButtonProps}\n        onMouseDown={captureShiftKeyForSelection}\n        onKeyDown={captureShiftKeyForSelection}\n      >\n        {flexRender(cell.column.columnDef.cell, cellContext)}\n      </CellContent>\n    </CellElement>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;AAoCA;;AAEG;AACI,MAAM,QAAQ,GAAG,CAAC,EACvB,IAAI,EACJ,SAAS,EACT,kBAAkB,EAClB,eAAe,GACC,KAAI;AACpB,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;IAChG,MAAM,WAAW,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI;AAE3C,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAG,qBAAqB,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;AAEhG,IAAA,MAAM,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,GAAG,iBAAiB,CAAC;QACjE,IAAI;QACJ,eAAe;QACf,kBAAkB;AACnB,KAAA,CAAC;IAEF,MAAM,iBAAiB,GAAG,eAAe,CAAC;AACxC,QAAA,MAAM,CAAC,QAAQ;QACf,mBAAmB;QACnB,gBAAgB;AACjB,KAAA,CAAC;AAEF,IAAA,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE;AACrC,IAAA,MAAM,UAAU,GAAG,OAAO,CACxB,OAAO,kBAAkB,GAAG,kBAAkB,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC,EACrF,CAAC,kBAAkB,EAAE,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,CAC/C;IAED,MAAM,cAAc,GAAG,kBAAkB,IAAI,IAAI,CAAC,MAAM,CAAC,EAAE,KAAK,mBAAmB;;IAGnF,MAAM,2BAA2B,GAAG;AAClC,UAAE,CAAC,CAAyE,KAAI;YAC5E,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG;gBAAE;YAEjC,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,UAAU,EAAE;AACxC,YAAA,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;gBAAE;YAEzB,MAAM,EAAE,mBAAmB,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,IAAI,EAAE;AACxD,YAAA,IAAI,mBAAmB;AAAE,gBAAA,mBAAmB,CAAC,iBAAiB,GAAG,CAAC,CAAC,QAAQ;QAC7E;UACA,SAAS;IAEb,QACEA,6BAAC,WAAW,EAAA,EACV,SAAS,EAAE,iBAAiB,mBACb,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EACzC,KAAK,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,EACpC,IAAI,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC,IAAI,EAC9C,KAAK,EAAE,gBAAgB,EAAA,aAAA,EACV,UAAU,EAAA;QAEvBA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EACV,YAAY,EACV;AACE,gBAAA,UAAU,EAAE,iBAAiB;gBAC7B,cAAc;gBACd,SAAS;aACa,EAE1B,iBAAiB,EAAE,iBAAiB,EACpC,WAAW,EAAE,2BAA2B,EACxC,SAAS,EAAE,2BAA2B,EAAA,EAErC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,WAAW,CAAC,CACxC,CACF;AAElB;;;;"}
+{"version":3,"file":"BodyCell.js","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { Cell, flexRender } from '@tanstack/react-table';\nimport { SELECTION_COLUMN_ID } from '../../../constants';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\nimport { usePinnedColumnStyles } from '../../../hooks';\n\nimport { useExpandableCell } from './hooks';\nimport styles from './BodyCell.module.scss';\n\ntype ColumnCellProps = {\n  /**\n   * Cell within the TanStack Table instance.\n   */\n  cell: Cell<any, any>;\n\n  /**\n   * ARIA roles for the grid.\n   */\n  ariaRoles: AriaRoles;\n\n  /**\n   * Whether row selection is enabled.\n   */\n  enableRowSelection: boolean;\n\n  /**\n   * Whether row expanding is enabled for the grid.\n   */\n  enableExpanding: boolean;\n};\n\n/**\n * Renders a cell element, and its content, for a given column and row, within the grid body.\n */\nexport const BodyCell = ({\n  cell,\n  ariaRoles,\n  enableRowSelection,\n  enableExpanding,\n}: ColumnCellProps) => {\n  const { justifyContent, textAlign, rowHeader, generateDataTestId } = cell.column.columnDef.meta!;\n  const CellElement = rowHeader ? 'th' : 'td';\n\n  const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({ column: cell.column });\n\n  const { expandButtonProps, contentMarginLeft } = useExpandableCell({\n    cell,\n    enableExpanding,\n    enableRowSelection,\n  });\n\n  const bodyCellClassname = buildClassnames([\n    styles.bodyCell,\n    pinnedCellClassName,\n    'data-grid-cell',\n  ]);\n\n  const cellContext = cell.getContext();\n  const cellTestId = useMemo(\n    () => (generateDataTestId ? generateDataTestId(cellContext.row.original) : undefined),\n    [generateDataTestId, cellContext.row.original],\n  );\n\n  const isSelectionCol = enableRowSelection && cell.column.id === SELECTION_COLUMN_ID;\n\n  // Capture shift key state for range selection in selection column.\n  const captureShiftKeyForSelection = isSelectionCol\n    ? (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {\n        if ('key' in e && e.key !== ' ') return;\n\n        const { row, table } = cell.getContext();\n        if (!row.getCanSelect()) return;\n\n        const { rangeSelectionState } = table.options.meta || {};\n        if (rangeSelectionState) rangeSelectionState.isShiftKeyPressed = e.shiftKey;\n      }\n    : undefined;\n\n  return (\n    <CellElement\n      className={bodyCellClassname}\n      aria-colindex={cell.column.getIndex() + 1}\n      scope={rowHeader ? 'row' : undefined}\n      role={rowHeader ? 'rowheader' : ariaRoles.cell}\n      style={pinnedCellStyles}\n      data-testid={cellTestId}\n    >\n      <CellContent\n        contentStyle={\n          {\n            marginLeft: contentMarginLeft,\n            justifyContent,\n            textAlign,\n          } as React.CSSProperties\n        }\n        expandButtonProps={expandButtonProps}\n        onMouseDown={captureShiftKeyForSelection}\n        onKeyDown={captureShiftKeyForSelection}\n      >\n        {flexRender(cell.column.columnDef.cell, cellContext)}\n      </CellContent>\n    </CellElement>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;AAoCA;;AAEG;AACI,MAAM,QAAQ,GAAG,CAAC,EACvB,IAAI,EACJ,SAAS,EACT,kBAAkB,EAClB,eAAe,GACC,KAAI;AACpB,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;IAChG,MAAM,WAAW,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI;AAE3C,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAG,qBAAqB,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;AAEhG,IAAA,MAAM,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,GAAG,iBAAiB,CAAC;QACjE,IAAI;QACJ,eAAe;QACf,kBAAkB;AACnB,KAAA,CAAC;IAEF,MAAM,iBAAiB,GAAG,eAAe,CAAC;AACxC,QAAA,MAAM,CAAC,QAAQ;QACf,mBAAmB;QACnB,gBAAgB;AACjB,KAAA,CAAC;AAEF,IAAA,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE;AACrC,IAAA,MAAM,UAAU,GAAG,OAAO,CACxB,OAAO,kBAAkB,GAAG,kBAAkB,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC,EACrF,CAAC,kBAAkB,EAAE,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,CAC/C;IAED,MAAM,cAAc,GAAG,kBAAkB,IAAI,IAAI,CAAC,MAAM,CAAC,EAAE,KAAK,mBAAmB;;IAGnF,MAAM,2BAA2B,GAAG;AAClC,UAAE,CAAC,CAAyE,KAAI;YAC5E,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG;gBAAE;YAEjC,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,UAAU,EAAE;AACxC,YAAA,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;gBAAE;YAEzB,MAAM,EAAE,mBAAmB,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,IAAI,EAAE;AACxD,YAAA,IAAI,mBAAmB;AAAE,gBAAA,mBAAmB,CAAC,iBAAiB,GAAG,CAAC,CAAC,QAAQ;QAC7E;UACA,SAAS;IAEb,QACEA,6BAAC,WAAW,EAAA,EACV,SAAS,EAAE,iBAAiB,mBACb,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EACzC,KAAK,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,EACpC,IAAI,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC,IAAI,EAC9C,KAAK,EAAE,gBAAgB,EAAA,aAAA,EACV,UAAU,EAAA;QAEvBA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EACV,YAAY,EACV;AACE,gBAAA,UAAU,EAAE,iBAAiB;gBAC7B,cAAc;gBACd,SAAS;aACa,EAE1B,iBAAiB,EAAE,iBAAiB,EACpC,WAAW,EAAE,2BAA2B,EACxC,SAAS,EAAE,2BAA2B,EAAA,EAErC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,WAAW,CAAC,CACxC,CACF;AAElB;;;;"}

package/dist/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.cjs

@@ -12,6 +12,7 @@ require('framer-motion');
 require('../../../../Tooltip/components/TooltipPopover.cjs');
 require('react-dom');
 require('../../../../Text/Text.cjs');
+require('../../../../Flex/FlexRow/FlexRow.cjs');
 require('../../../../Radio/Radio.cjs');
 var CellContent = require('../../CellContent/CellContent.cjs');
 var BodyCell_module = require('../BodyCell/BodyCell.module.scss.cjs');