@veeqo/ui 15.8.0 → 15.10.0

package/dist/components/Alerts/Alert/Alert.cjs

@@ -2,7 +2,6 @@
 
 var React = require('react');
 var Text = require('../../Text/Text.cjs');
-var Button = require('../../Button/Button.cjs');
 var Action = require('../../Action/Action.cjs');
 var CrossIcon = require('../../../icons/design-system/components/CrossIcon.cjs');
 var constants = require('../constants.cjs');
@@ -42,7 +41,7 @@ const Alert = ({ size = 'base', variant = 'default', direction = 'horizontal', c
             messageSlot || (message && React__default.default.createElement(Text.Text, { variant: "body" }, message))))),
         hasActions && (React__default.default.createElement(FlexRow.FlexRow, { flexWrap: "nowrap", gap: "sm", className: Alert_module.actions },
             rightActionsSlot, rightActions === null || rightActions === void 0 ? void 0 :
-            rightActions.map(({ label, ...actionProps }) => (React__default.default.createElement(Button.Button, { key: label, type: "button", size: "sm", ...actionProps }, label))))),
+            rightActions.map(({ label, ...actionProps }) => (React__default.default.createElement(Action.Action, { key: label, type: "button", size: "sm", ...actionProps }, label))))),
         onClickClose && (React__default.default.createElement(Action.Action, { variant: "flat", size: "sm", iconSlot: React__default.default.createElement(CrossIcon.ReactComponent, null), onClick: onClickClose, "aria-label": "Close", className: Alert_module.close }))));
 };
 

package/dist/components/Alerts/Alert/Alert.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.cjs","sources":["../../../../src/components/Alerts/Alert/Alert.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../../Text';\nimport { Button } from '../../Button';\nimport { Action } from '../../Action';\nimport { CrossIcon } from '../../../icons';\nimport { IconMap } from '../constants';\nimport { AlertProps } from './types';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { assignCssVars, buildClassnames } from '../../../utils';\n\nimport alertStyles from '../Alerts.module.scss';\nimport styles from './Alert.module.scss';\n\n/**\n * Alert component for displaying contextual feedback messages with optional actions and close button.\n */\nexport const Alert = ({\n  size = 'base',\n  variant = 'default',\n  direction = 'horizontal',\n  colours: passedColours,\n  rightActions,\n  rightActionsSlot,\n  title,\n  titleSlot,\n  messageSlot,\n  message,\n  children,\n  iconSlot,\n  onClickClose,\n  className,\n  ...divProps\n}: AlertProps) => {\n  const DefaultIcon = IconMap[variant];\n  const isVertical = direction === 'vertical';\n  const hasActions = (rightActions?.length ?? 0) > 0 || Boolean(rightActionsSlot);\n  const hasSingleContent = !children && !((title || titleSlot) && (message || messageSlot));\n\n  return (\n    <FlexCol\n      role={variant === 'error' ? 'alert' : 'status'}\n      gap=\"none\"\n      className={buildClassnames([\n        styles.alertContainer,\n        styles[`${size}-size`],\n        isVertical ? styles.vertical : undefined,\n        hasSingleContent ? styles.centered : undefined,\n        alertStyles[`${variant}-alert-variant`],\n        className,\n      ])}\n      style={assignCssVars({ backgroundColor: passedColours?.background })}\n      {...divProps}\n    >\n      <FlexRow\n        style={assignCssVars({ iconColor: passedColours?.primary })}\n        className={buildClassnames([alertStyles.icon, styles.iconArea])}\n      >\n        {iconSlot || <DefaultIcon role=\"presentation\" />}\n      </FlexRow>\n\n      <FlexCol className={styles.content} flexWrap=\"nowrap\">\n        {children || (\n          <FlexCol gap={size === 'xs' ? 'xs' : 'sm'}>\n            {titleSlot ||\n              (title && (\n                <Text variant=\"bodyBold\" style={size === 'base' ? { lineHeight: '24px' } : {}}>\n                  {title}\n                </Text>\n              ))}\n            {messageSlot || (message && <Text variant=\"body\">{message}</Text>)}\n          </FlexCol>\n        )}\n      </FlexCol>\n\n      {hasActions && (\n        <FlexRow flexWrap=\"nowrap\" gap=\"sm\" className={styles.actions}>\n          {rightActionsSlot}\n          {rightActions?.map(({ label, ...actionProps }) => (\n            <Button key={label} type=\"button\" size=\"sm\" {...actionProps}>\n              {label}\n            </Button>\n          ))}\n        </FlexRow>\n      )}\n\n      {onClickClose && (\n        <Action\n          variant=\"flat\"\n          size=\"sm\"\n          iconSlot={<CrossIcon />}\n          onClick={onClickClose}\n          aria-label=\"Close\"\n          className={styles.close}\n        />\n      )}\n    </FlexCol>\n  );\n};\n"],"names":["IconMap","React","FlexCol","buildClassnames","styles","alertStyles","assignCssVars","FlexRow","Text","Button","Action","CrossIcon"],"mappings":"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"}
+{"version":3,"file":"Alert.cjs","sources":["../../../../src/components/Alerts/Alert/Alert.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../../Text';\nimport { Action } from '../../Action';\nimport { CrossIcon } from '../../../icons';\nimport { IconMap } from '../constants';\nimport { AlertProps } from './types';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { assignCssVars, buildClassnames } from '../../../utils';\n\nimport alertStyles from '../Alerts.module.scss';\nimport styles from './Alert.module.scss';\n\n/**\n * Alert component for displaying contextual feedback messages with optional actions and close button.\n */\nexport const Alert = ({\n  size = 'base',\n  variant = 'default',\n  direction = 'horizontal',\n  colours: passedColours,\n  rightActions,\n  rightActionsSlot,\n  title,\n  titleSlot,\n  messageSlot,\n  message,\n  children,\n  iconSlot,\n  onClickClose,\n  className,\n  ...divProps\n}: AlertProps) => {\n  const DefaultIcon = IconMap[variant];\n  const isVertical = direction === 'vertical';\n  const hasActions = (rightActions?.length ?? 0) > 0 || Boolean(rightActionsSlot);\n  const hasSingleContent = !children && !((title || titleSlot) && (message || messageSlot));\n\n  return (\n    <FlexCol\n      role={variant === 'error' ? 'alert' : 'status'}\n      gap=\"none\"\n      className={buildClassnames([\n        styles.alertContainer,\n        styles[`${size}-size`],\n        isVertical ? styles.vertical : undefined,\n        hasSingleContent ? styles.centered : undefined,\n        alertStyles[`${variant}-alert-variant`],\n        className,\n      ])}\n      style={assignCssVars({ backgroundColor: passedColours?.background })}\n      {...divProps}\n    >\n      <FlexRow\n        style={assignCssVars({ iconColor: passedColours?.primary })}\n        className={buildClassnames([alertStyles.icon, styles.iconArea])}\n      >\n        {iconSlot || <DefaultIcon role=\"presentation\" />}\n      </FlexRow>\n\n      <FlexCol className={styles.content} flexWrap=\"nowrap\">\n        {children || (\n          <FlexCol gap={size === 'xs' ? 'xs' : 'sm'}>\n            {titleSlot ||\n              (title && (\n                <Text variant=\"bodyBold\" style={size === 'base' ? { lineHeight: '24px' } : {}}>\n                  {title}\n                </Text>\n              ))}\n            {messageSlot || (message && <Text variant=\"body\">{message}</Text>)}\n          </FlexCol>\n        )}\n      </FlexCol>\n\n      {hasActions && (\n        <FlexRow flexWrap=\"nowrap\" gap=\"sm\" className={styles.actions}>\n          {rightActionsSlot}\n          {rightActions?.map(({ label, ...actionProps }) => (\n            <Action key={label} type=\"button\" size=\"sm\" {...actionProps}>\n              {label}\n            </Action>\n          ))}\n        </FlexRow>\n      )}\n\n      {onClickClose && (\n        <Action\n          variant=\"flat\"\n          size=\"sm\"\n          iconSlot={<CrossIcon />}\n          onClick={onClickClose}\n          aria-label=\"Close\"\n          className={styles.close}\n        />\n      )}\n    </FlexCol>\n  );\n};\n"],"names":["IconMap","React","FlexCol","buildClassnames","styles","alertStyles","assignCssVars","FlexRow","Text","Action","CrossIcon"],"mappings":";;;;;;;;;;;;;;;;;;;AAcA;;AAEG;MACU,KAAK,GAAG,CAAC,EACpB,IAAI,GAAG,MAAM,EACb,OAAO,GAAG,SAAS,EACnB,SAAS,GAAG,YAAY,EACxB,OAAO,EAAE,aAAa,EACtB,YAAY,EACZ,gBAAgB,EAChB,KAAK,EACL,SAAS,EACT,WAAW,EACX,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,GAAG,QAAQ,EACA,KAAI;;AACf,IAAA,MAAM,WAAW,GAAGA,iBAAO,CAAC,OAAO,CAAC;AACpC,IAAA,MAAM,UAAU,GAAG,SAAS,KAAK,UAAU;IAC3C,MAAM,UAAU,GAAG,CAAC,CAAA,EAAA,GAAA,YAAY,KAAA,IAAA,IAAZ,YAAY,uBAAZ,YAAY,CAAE,MAAM,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,gBAAgB,CAAC;AAC/E,IAAA,MAAM,gBAAgB,GAAG,CAAC,QAAQ,IAAI,EAAE,CAAC,KAAK,IAAI,SAAS,MAAM,OAAO,IAAI,WAAW,CAAC,CAAC;IAEzF,QACEC,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAA,EACN,IAAI,EAAE,OAAO,KAAK,OAAO,GAAG,OAAO,GAAG,QAAQ,EAC9C,GAAG,EAAC,MAAM,EACV,SAAS,EAAEC,+BAAe,CAAC;AACzB,YAAAC,YAAM,CAAC,cAAc;AACrB,YAAAA,YAAM,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC;YACtB,UAAU,GAAGA,YAAM,CAAC,QAAQ,GAAG,SAAS;YACxC,gBAAgB,GAAGA,YAAM,CAAC,QAAQ,GAAG,SAAS;AAC9C,YAAAC,aAAW,CAAC,CAAA,EAAG,OAAO,CAAA,cAAA,CAAgB,CAAC;YACvC,SAAS;AACV,SAAA,CAAC,EACF,KAAK,EAAEC,2BAAa,CAAC,EAAE,eAAe,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,uBAAb,aAAa,CAAE,UAAU,EAAE,CAAC,KAChE,QAAQ,EAAA;AAEZ,QAAAL,sBAAA,CAAA,aAAA,CAACM,eAAO,EAAA,EACN,KAAK,EAAED,2BAAa,CAAC,EAAE,SAAS,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,uBAAb,aAAa,CAAE,OAAO,EAAE,CAAC,EAC3D,SAAS,EAAEH,+BAAe,CAAC,CAACE,aAAW,CAAC,IAAI,EAAED,YAAM,CAAC,QAAQ,CAAC,CAAC,IAE9D,QAAQ,IAAIH,qCAAC,WAAW,EAAA,EAAC,IAAI,EAAC,cAAc,GAAG,CACxC;AAEV,QAAAA,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAA,EAAC,SAAS,EAAEE,YAAM,CAAC,OAAO,EAAE,QAAQ,EAAC,QAAQ,EAAA,EAClD,QAAQ,KACPH,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAA,EAAC,GAAG,EAAE,IAAI,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,EAAA;YACtC,SAAS;AACR,iBAAC,KAAK,KACJD,sBAAA,CAAA,aAAA,CAACO,SAAI,EAAA,EAAC,OAAO,EAAC,UAAU,EAAC,KAAK,EAAE,IAAI,KAAK,MAAM,GAAG,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,EAAE,EAAA,EAC1E,KAAK,CACD,CACR,CAAC;AACH,YAAA,WAAW,KAAK,OAAO,IAAIP,sBAAA,CAAA,aAAA,CAACO,SAAI,EAAA,EAAC,OAAO,EAAC,MAAM,IAAE,OAAO,CAAQ,CAAC,CAC1D,CACX,CACO;AAET,QAAA,UAAU,KACTP,sBAAA,CAAA,aAAA,CAACM,eAAO,EAAA,EAAC,QAAQ,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,SAAS,EAAEH,YAAM,CAAC,OAAO,EAAA;YAC1D,gBAAgB,EAChB,YAAY,KAAA,IAAA,IAAZ,YAAY,KAAA,MAAA,GAAA,MAAA;AAAZ,YAAA,YAAY,CAAE,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,WAAW,EAAE,MAC3CH,sBAAA,CAAA,aAAA,CAACQ,aAAM,EAAA,EAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAA,GAAK,WAAW,IACxD,KAAK,CACC,CACV,CAAC,CACM,CACX;AAEA,QAAA,YAAY,KACXR,sBAAA,CAAA,aAAA,CAACQ,aAAM,IACL,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,IAAI,EACT,QAAQ,EAAER,sBAAA,CAAA,aAAA,CAACS,wBAAS,EAAA,IAAA,CAAG,EACvB,OAAO,EAAE,YAAY,EAAA,YAAA,EACV,OAAO,EAClB,SAAS,EAAEN,YAAM,CAAC,KAAK,EAAA,CACvB,CACH,CACO;AAEd;;;;"}

package/dist/components/Alerts/Alert/Alert.js

@@ -1,6 +1,5 @@
 import React__default from 'react';
 import { Text } from '../../Text/Text.js';
-import { Button } from '../../Button/Button.js';
 import { Action } from '../../Action/Action.js';
 import { ReactComponent as CrossIcon } from '../../../icons/design-system/components/CrossIcon.js';
 import { IconMap } from '../constants.js';
@@ -36,7 +35,7 @@ const Alert = ({ size = 'base', variant = 'default', direction = 'horizontal', c
             messageSlot || (message && React__default.createElement(Text, { variant: "body" }, message))))),
         hasActions && (React__default.createElement(FlexRow, { flexWrap: "nowrap", gap: "sm", className: styles.actions },
             rightActionsSlot, rightActions === null || rightActions === void 0 ? void 0 :
-            rightActions.map(({ label, ...actionProps }) => (React__default.createElement(Button, { key: label, type: "button", size: "sm", ...actionProps }, label))))),
+            rightActions.map(({ label, ...actionProps }) => (React__default.createElement(Action, { key: label, type: "button", size: "sm", ...actionProps }, label))))),
         onClickClose && (React__default.createElement(Action, { variant: "flat", size: "sm", iconSlot: React__default.createElement(CrossIcon, null), onClick: onClickClose, "aria-label": "Close", className: styles.close }))));
 };
 

package/dist/components/Alerts/Alert/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sources":["../../../../src/components/Alerts/Alert/Alert.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../../Text';\nimport { Button } from '../../Button';\nimport { Action } from '../../Action';\nimport { CrossIcon } from '../../../icons';\nimport { IconMap } from '../constants';\nimport { AlertProps } from './types';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { assignCssVars, buildClassnames } from '../../../utils';\n\nimport alertStyles from '../Alerts.module.scss';\nimport styles from './Alert.module.scss';\n\n/**\n * Alert component for displaying contextual feedback messages with optional actions and close button.\n */\nexport const Alert = ({\n  size = 'base',\n  variant = 'default',\n  direction = 'horizontal',\n  colours: passedColours,\n  rightActions,\n  rightActionsSlot,\n  title,\n  titleSlot,\n  messageSlot,\n  message,\n  children,\n  iconSlot,\n  onClickClose,\n  className,\n  ...divProps\n}: AlertProps) => {\n  const DefaultIcon = IconMap[variant];\n  const isVertical = direction === 'vertical';\n  const hasActions = (rightActions?.length ?? 0) > 0 || Boolean(rightActionsSlot);\n  const hasSingleContent = !children && !((title || titleSlot) && (message || messageSlot));\n\n  return (\n    <FlexCol\n      role={variant === 'error' ? 'alert' : 'status'}\n      gap=\"none\"\n      className={buildClassnames([\n        styles.alertContainer,\n        styles[`${size}-size`],\n        isVertical ? styles.vertical : undefined,\n        hasSingleContent ? styles.centered : undefined,\n        alertStyles[`${variant}-alert-variant`],\n        className,\n      ])}\n      style={assignCssVars({ backgroundColor: passedColours?.background })}\n      {...divProps}\n    >\n      <FlexRow\n        style={assignCssVars({ iconColor: passedColours?.primary })}\n        className={buildClassnames([alertStyles.icon, styles.iconArea])}\n      >\n        {iconSlot || <DefaultIcon role=\"presentation\" />}\n      </FlexRow>\n\n      <FlexCol className={styles.content} flexWrap=\"nowrap\">\n        {children || (\n          <FlexCol gap={size === 'xs' ? 'xs' : 'sm'}>\n            {titleSlot ||\n              (title && (\n                <Text variant=\"bodyBold\" style={size === 'base' ? { lineHeight: '24px' } : {}}>\n                  {title}\n                </Text>\n              ))}\n            {messageSlot || (message && <Text variant=\"body\">{message}</Text>)}\n          </FlexCol>\n        )}\n      </FlexCol>\n\n      {hasActions && (\n        <FlexRow flexWrap=\"nowrap\" gap=\"sm\" className={styles.actions}>\n          {rightActionsSlot}\n          {rightActions?.map(({ label, ...actionProps }) => (\n            <Button key={label} type=\"button\" size=\"sm\" {...actionProps}>\n              {label}\n            </Button>\n          ))}\n        </FlexRow>\n      )}\n\n      {onClickClose && (\n        <Action\n          variant=\"flat\"\n          size=\"sm\"\n          iconSlot={<CrossIcon />}\n          onClick={onClickClose}\n          aria-label=\"Close\"\n          className={styles.close}\n        />\n      )}\n    </FlexCol>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"Alert.js","sources":["../../../../src/components/Alerts/Alert/Alert.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../../Text';\nimport { Action } from '../../Action';\nimport { CrossIcon } from '../../../icons';\nimport { IconMap } from '../constants';\nimport { AlertProps } from './types';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { assignCssVars, buildClassnames } from '../../../utils';\n\nimport alertStyles from '../Alerts.module.scss';\nimport styles from './Alert.module.scss';\n\n/**\n * Alert component for displaying contextual feedback messages with optional actions and close button.\n */\nexport const Alert = ({\n  size = 'base',\n  variant = 'default',\n  direction = 'horizontal',\n  colours: passedColours,\n  rightActions,\n  rightActionsSlot,\n  title,\n  titleSlot,\n  messageSlot,\n  message,\n  children,\n  iconSlot,\n  onClickClose,\n  className,\n  ...divProps\n}: AlertProps) => {\n  const DefaultIcon = IconMap[variant];\n  const isVertical = direction === 'vertical';\n  const hasActions = (rightActions?.length ?? 0) > 0 || Boolean(rightActionsSlot);\n  const hasSingleContent = !children && !((title || titleSlot) && (message || messageSlot));\n\n  return (\n    <FlexCol\n      role={variant === 'error' ? 'alert' : 'status'}\n      gap=\"none\"\n      className={buildClassnames([\n        styles.alertContainer,\n        styles[`${size}-size`],\n        isVertical ? styles.vertical : undefined,\n        hasSingleContent ? styles.centered : undefined,\n        alertStyles[`${variant}-alert-variant`],\n        className,\n      ])}\n      style={assignCssVars({ backgroundColor: passedColours?.background })}\n      {...divProps}\n    >\n      <FlexRow\n        style={assignCssVars({ iconColor: passedColours?.primary })}\n        className={buildClassnames([alertStyles.icon, styles.iconArea])}\n      >\n        {iconSlot || <DefaultIcon role=\"presentation\" />}\n      </FlexRow>\n\n      <FlexCol className={styles.content} flexWrap=\"nowrap\">\n        {children || (\n          <FlexCol gap={size === 'xs' ? 'xs' : 'sm'}>\n            {titleSlot ||\n              (title && (\n                <Text variant=\"bodyBold\" style={size === 'base' ? { lineHeight: '24px' } : {}}>\n                  {title}\n                </Text>\n              ))}\n            {messageSlot || (message && <Text variant=\"body\">{message}</Text>)}\n          </FlexCol>\n        )}\n      </FlexCol>\n\n      {hasActions && (\n        <FlexRow flexWrap=\"nowrap\" gap=\"sm\" className={styles.actions}>\n          {rightActionsSlot}\n          {rightActions?.map(({ label, ...actionProps }) => (\n            <Action key={label} type=\"button\" size=\"sm\" {...actionProps}>\n              {label}\n            </Action>\n          ))}\n        </FlexRow>\n      )}\n\n      {onClickClose && (\n        <Action\n          variant=\"flat\"\n          size=\"sm\"\n          iconSlot={<CrossIcon />}\n          onClick={onClickClose}\n          aria-label=\"Close\"\n          className={styles.close}\n        />\n      )}\n    </FlexCol>\n  );\n};\n"],"names":["React"],"mappings":"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"}

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

@@ -1,10 +1,13 @@
 import { ReactNode } from 'react';
-import { Action } from '../../Modal/types';
+import { ActionProps } from '../../Action/types';
 import { AlertColours, BaseAlertProps } from '../types';
 /** Controls the padding density of the alert */
 export type AlertSizes = 'base' | 'sm' | 'xs';
 /** Direction of content flow */
 export type AlertDirection = 'horizontal' | 'vertical';
+export type AlertAction = {
+    label: string;
+} & ActionProps<'button'>;
 export type AlertProps = React.HTMLAttributes<HTMLDivElement> & BaseAlertProps & {
     /** Controls padding density */
     size?: AlertSizes;
@@ -13,7 +16,7 @@ export type AlertProps = React.HTMLAttributes<HTMLDivElement> & BaseAlertProps &
     /** Override the primary and background colours */
     colours?: AlertColours;
     /** Action buttons rendered on the right (horizontal) or below the content (vertical) */
-    rightActions?: Action[];
+    rightActions?: AlertAction[];
     /** Custom content rendered in the actions area, replacing or alongside `rightActions` */
     rightActionsSlot?: ReactNode;
     /** Replaces the default title text with custom content */

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

@@ -12,9 +12,9 @@ require('../../../../../theme/modules/shadows.cjs');
 require('../../../../../theme/modules/sizes.cjs');
 require('../../../../../theme/modules/text.cjs');
 require('framer-motion');
-require('../../../../Tooltip/components/TooltipPopover.cjs');
 require('../../../../Portal/Portal.cjs');
 require('../../../../Portal/PortalContext.cjs');
+require('../../../../Tooltip/components/TooltipPopover.cjs');
 require('../../../../Text/Text.cjs');
 require('../../../../Flex/FlexRow/FlexRow.cjs');
 require('../../../../Radio/Radio.cjs');

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

@@ -10,9 +10,9 @@ import '../../../../../theme/modules/shadows.js';
 import '../../../../../theme/modules/sizes.js';
 import '../../../../../theme/modules/text.js';
 import 'framer-motion';
-import '../../../../Tooltip/components/TooltipPopover.js';
 import '../../../../Portal/Portal.js';
 import '../../../../Portal/PortalContext.js';
+import '../../../../Tooltip/components/TooltipPopover.js';
 import '../../../../Text/Text.js';
 import '../../../../Flex/FlexRow/FlexRow.js';
 import '../../../../Radio/Radio.js';

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

@@ -9,9 +9,9 @@ require('@tanstack/react-table');
 require('../../../../Stack/Stack.cjs');
 var index = require('../../../../../theme/index.cjs');
 require('framer-motion');
-require('../../../../Tooltip/components/TooltipPopover.cjs');
 require('../../../../Portal/Portal.cjs');
 require('../../../../Portal/PortalContext.cjs');
+require('../../../../Tooltip/components/TooltipPopover.cjs');
 require('../../../../Text/Text.cjs');
 require('../../../../Flex/FlexRow/FlexRow.cjs');
 require('../../../../Radio/Radio.cjs');

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

@@ -7,9 +7,9 @@ import '@tanstack/react-table';
 import '../../../../Stack/Stack.js';
 import { theme } from '../../../../../theme/index.js';
 import 'framer-motion';
-import '../../../../Tooltip/components/TooltipPopover.js';
 import '../../../../Portal/Portal.js';
 import '../../../../Portal/PortalContext.js';
+import '../../../../Tooltip/components/TooltipPopover.js';
 import '../../../../Text/Text.js';
 import '../../../../Flex/FlexRow/FlexRow.js';
 import '../../../../Radio/Radio.js';

package/dist/components/DataGrid/components/GridContainer/GridContainer.cjs

@@ -13,9 +13,9 @@ var usePinnedColumnLayout = require('../../hooks/usePinnedColumnLayout.cjs');
 require('@tanstack/react-table');
 require('../../../Stack/Stack.cjs');
 require('framer-motion');
-require('../../../Tooltip/components/TooltipPopover.cjs');
 require('../../../Portal/Portal.cjs');
 require('../../../Portal/PortalContext.cjs');
+require('../../../Tooltip/components/TooltipPopover.cjs');
 require('../../../Text/Text.cjs');
 require('../../../Flex/FlexRow/FlexRow.cjs');
 require('../../../Radio/Radio.cjs');

package/dist/components/DataGrid/components/GridContainer/GridContainer.js

@@ -11,9 +11,9 @@ import { usePinnedColumnLayout } from '../../hooks/usePinnedColumnLayout.js';
 import '@tanstack/react-table';
 import '../../../Stack/Stack.js';
 import 'framer-motion';
-import '../../../Tooltip/components/TooltipPopover.js';
 import '../../../Portal/Portal.js';
 import '../../../Portal/PortalContext.js';
+import '../../../Tooltip/components/TooltipPopover.js';
 import '../../../Text/Text.js';
 import '../../../Flex/FlexRow/FlexRow.js';
 import '../../../Radio/Radio.js';

package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.cjs

@@ -11,9 +11,9 @@ require('../../../../../theme/modules/shadows.cjs');
 require('../../../../../theme/modules/sizes.cjs');
 require('../../../../../theme/modules/text.cjs');
 require('framer-motion');
-require('../../../../Tooltip/components/TooltipPopover.cjs');
 require('../../../../Portal/Portal.cjs');
 require('../../../../Portal/PortalContext.cjs');
+require('../../../../Tooltip/components/TooltipPopover.cjs');
 require('../../../../Text/Text.cjs');
 require('../../../../Flex/FlexRow/FlexRow.cjs');
 require('../../../../Radio/Radio.cjs');

package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.js

@@ -9,9 +9,9 @@ import '../../../../../theme/modules/shadows.js';
 import '../../../../../theme/modules/sizes.js';
 import '../../../../../theme/modules/text.js';
 import 'framer-motion';
-import '../../../../Tooltip/components/TooltipPopover.js';
 import '../../../../Portal/Portal.js';
 import '../../../../Portal/PortalContext.js';
+import '../../../../Tooltip/components/TooltipPopover.js';
 import '../../../../Text/Text.js';
 import '../../../../Flex/FlexRow/FlexRow.js';
 import '../../../../Radio/Radio.js';

package/dist/components/Modal/Modal.cjs

@@ -1,19 +1,19 @@
 'use strict';
 
-var React = require('react');
 var framerMotion = require('framer-motion');
-var types = require('./types.cjs');
+var React = require('react');
 var Dialog = require('./components/Dialog/Dialog.cjs');
+var types = require('./types.cjs');
+var useIsOverflowing = require('../../hooks/useIsOverflowing.cjs');
 var buildClassnames = require('../../utils/buildClassnames.cjs');
 require('uid/secure');
-var useIsOverflowing = require('../../hooks/useIsOverflowing.cjs');
-var Button = require('../Button/Button.cjs');
+var Action = require('../Action/Action.cjs');
 var Card = require('../Card/Card.cjs');
 var CardHeader = require('../CardHeader/CardHeader.cjs');
+var FlexRow = require('../Flex/FlexRow/FlexRow.cjs');
 var ScrollLock = require('../ScrollLock/ScrollLock.cjs');
-var Stack = require('../Stack/Stack.cjs');
-var utils = require('./utils.cjs');
 var Modal_module = require('./Modal.module.scss.cjs');
+var utils = require('./utils.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -21,7 +21,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 /* eslint-disable react/destructuring-assignment */
 const Modal = (props) => {
-    const { shouldShow, showHeaderCloseButton = true, preventClose = false, displayMode = 'modal', fullBleed = false, variant = 'base', onClose: parentOnClose, children, ...rest } = props;
+    const { shouldShow, showHeaderCloseButton = true, preventClose = false, displayMode = 'modal', fullBleed = false, size = 'base', onClose: parentOnClose, children, ...rest } = props;
     const modalRef = React.useRef(null);
     const [mainSectionRef, setMainSectionRef] = React.useState(null);
     React.useEffect(() => {
@@ -59,7 +59,7 @@ const Modal = (props) => {
     };
     return (React__default.default.createElement(framerMotion.AnimatePresence, null, shouldShow && (React__default.default.createElement("div", { "data-testid": "dialog-wrapper", style: { position: 'absolute' } },
         React__default.default.createElement(ScrollLock.ScrollLock, null),
-        React__default.default.createElement(Dialog.Dialog, { "data-dialog-type": "modal", displayMode: displayMode, variant: variant, ref: modalRef, onClose: handleClose, onKeyDown: preventClose ? utils.preventDefaultEventOnESC : handleKeyDown, onClick: handleBackdropClick, ...rest, "aria-describedby": "modal_title", appearance: (types.isSideDraw(props) && props.appearance) || 'primary' },
+        React__default.default.createElement(Dialog.Dialog, { "data-dialog-type": "modal", displayMode: displayMode, size: size, ref: modalRef, onClose: handleClose, onKeyDown: preventClose ? utils.preventDefaultEventOnESC : handleKeyDown, onClick: handleBackdropClick, ...rest, "aria-describedby": "modal_title", appearance: (types.isSideDraw(props) && props.appearance) || 'primary' },
             React__default.default.createElement(Card.Card.Surface, null,
                 types.hasHeaderSlot(props) ? (props.headerSlot) : (React__default.default.createElement(CardHeader.CardHeader, { id: "modal_title", headerVariant: "headingLarge", title: props.headerTitle, subtitle: props.headerSubtitle, ...(showHeaderCloseButton && { onClickClose: handleClose }) })),
                 React__default.default.createElement("section", { onScroll: onScroll, ref: setMainSectionRef, className: buildClassnames.buildClassnames([
@@ -69,9 +69,9 @@ const Modal = (props) => {
                     ]) }, children),
                 types.hasFooterSlot(props) && props.footerSlot,
                 !types.hasFooterSlot(props) && (props.leftActions || props.rightActions) && (React__default.default.createElement(Card.Card.Footer, null,
-                    React__default.default.createElement(Stack.Stack, { direction: "horizontal", alignX: props.leftActions ? 'between' : 'end' },
-                        props.leftActions && (React__default.default.createElement(Stack.Stack, { direction: "horizontal", alignX: "start", "data-testid": "left-actions-container" }, props.leftActions.map(({ label, ...actionProps }) => (React__default.default.createElement(Button.Button, { key: label, type: "button", ...actionProps }, label))))),
-                        props.rightActions && (React__default.default.createElement(Stack.Stack, { direction: "horizontal", alignX: "end", "data-testid": "right-actions-container" }, props.rightActions.map(({ label, ...actionProps }) => (React__default.default.createElement(Button.Button, { key: label, type: "button", ...actionProps }, label))))))))))))));
+                    React__default.default.createElement(FlexRow.FlexRow, { justifyContent: props.leftActions ? 'space-between' : 'flex-end' },
+                        props.leftActions && (React__default.default.createElement(FlexRow.FlexRow, { justifyContent: "flex-start", "data-testid": "left-actions-container" }, props.leftActions.map(({ label, ...actionProps }) => (React__default.default.createElement(Action.Action, { key: label, type: "button", ...actionProps }, label))))),
+                        props.rightActions && (React__default.default.createElement(FlexRow.FlexRow, { justifyContent: "flex-end", "data-testid": "right-actions-container" }, props.rightActions.map(({ label, ...actionProps }) => (React__default.default.createElement(Action.Action, { key: label, type: "button", ...actionProps }, label))))))))))))));
 };
 
 exports.Modal = Modal;

package/dist/components/Modal/Modal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.cjs","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["/* eslint-disable react/destructuring-assignment */\nimport React, { useEffect, useRef, useState } from 'react';\nimport { AnimatePresence } from 'framer-motion';\n\nimport { ModalProps, hasFooterSlot, hasHeaderSlot, isSideDraw } from './types';\nimport { Dialog } from './components/Dialog/Dialog';\n\nimport { buildClassnames } from '../../utils';\nimport { useIsOverflowing } from '../../hooks/useIsOverflowing';\nimport { Button } from '../Button';\nimport { Card } from '../Card';\nimport { CardHeader } from '../CardHeader';\nimport { ScrollLock } from '../ScrollLock';\nimport { Stack } from '../Stack';\nimport { preventDefaultEventOnESC } from './utils';\nimport modalStyles from './Modal.module.scss';\n\nexport const Modal = (props: ModalProps) => {\n  const {\n    shouldShow,\n    showHeaderCloseButton = true,\n    preventClose = false,\n    displayMode = 'modal',\n    fullBleed = false,\n    variant = 'base',\n    onClose: parentOnClose,\n    children,\n    ...rest\n  } = props;\n\n  const modalRef = useRef<HTMLDialogElement | null>(null);\n  const [mainSectionRef, setMainSectionRef] = useState<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (shouldShow) {\n      modalRef.current?.removeAttribute('open'); // Allows for conditional rendering.\n      modalRef.current?.showModal();\n    }\n  }, [shouldShow]);\n\n  const { isOverflowing: isContentOverflowing, onScroll } = useIsOverflowing(mainSectionRef);\n\n  const handleClose = () => {\n    if (preventClose) return;\n\n    const result = parentOnClose();\n    if (result === false) return; // Otherwise close on void, or true.\n\n    modalRef.current?.close();\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDialogElement>) => {\n    if (e.key === 'Escape') {\n      e.preventDefault(); // Prevent default ESC behavior\n\n      // Don't close if this is the top level and there are other dialogs open\n      const openDialogs = document.querySelectorAll('dialog[open]');\n      if (openDialogs.length > 1 && modalRef.current === openDialogs[0]) return;\n\n      handleClose();\n    }\n  };\n\n  const handleBackdropClick = async (e: React.MouseEvent<HTMLDialogElement>) => {\n    if (displayMode === 'modal') return;\n    if (e.target === modalRef.current) handleClose();\n  };\n\n  return (\n    <AnimatePresence>\n      {shouldShow && (\n        <div data-testid=\"dialog-wrapper\" style={{ position: 'absolute' }}>\n          <ScrollLock />\n          <Dialog\n            data-dialog-type=\"modal\"\n            displayMode={displayMode}\n            variant={variant}\n            ref={modalRef}\n            onClose={handleClose}\n            onKeyDown={preventClose ? preventDefaultEventOnESC : handleKeyDown}\n            onClick={handleBackdropClick}\n            {...rest}\n            aria-describedby=\"modal_title\"\n            appearance={(isSideDraw(props) && props.appearance) || 'primary'}\n          >\n            <Card.Surface>\n              {hasHeaderSlot(props) ? (\n                props.headerSlot\n              ) : (\n                <CardHeader\n                  id=\"modal_title\"\n                  headerVariant=\"headingLarge\"\n                  title={props.headerTitle}\n                  subtitle={props.headerSubtitle}\n                  {...(showHeaderCloseButton && { onClickClose: handleClose })}\n                />\n              )}\n\n              <section\n                onScroll={onScroll}\n                ref={setMainSectionRef}\n                className={buildClassnames([\n                  modalStyles.mainSection,\n                  fullBleed && modalStyles.fullBleed,\n                  isContentOverflowing && modalStyles.scrollable,\n                ])}\n              >\n                {children}\n              </section>\n\n              {hasFooterSlot(props) && props.footerSlot}\n\n              {!hasFooterSlot(props) && (props.leftActions || props.rightActions) && (\n                <Card.Footer>\n                  <Stack direction=\"horizontal\" alignX={props.leftActions ? 'between' : 'end'}>\n                    {props.leftActions && (\n                      <Stack\n                        direction=\"horizontal\"\n                        alignX=\"start\"\n                        data-testid=\"left-actions-container\"\n                      >\n                        {props.leftActions.map(({ label, ...actionProps }) => (\n                          <Button key={label} type=\"button\" {...actionProps}>\n                            {label}\n                          </Button>\n                        ))}\n                      </Stack>\n                    )}\n                    {props.rightActions && (\n                      <Stack\n                        direction=\"horizontal\"\n                        alignX=\"end\"\n                        data-testid=\"right-actions-container\"\n                      >\n                        {props.rightActions.map(({ label, ...actionProps }) => (\n                          <Button key={label} type=\"button\" {...actionProps}>\n                            {label}\n                          </Button>\n                        ))}\n                      </Stack>\n                    )}\n                  </Stack>\n                </Card.Footer>\n              )}\n            </Card.Surface>\n          </Dialog>\n        </div>\n      )}\n    </AnimatePresence>\n  );\n};\n"],"names":["useRef","useState","useEffect","useIsOverflowing","React","AnimatePresence","ScrollLock","Dialog","preventDefaultEventOnESC","isSideDraw","Card","hasHeaderSlot","CardHeader","buildClassnames","modalStyles","hasFooterSlot","Stack","Button"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAiBO,MAAM,KAAK,GAAG,CAAC,KAAiB,KAAI;AACzC,IAAA,MAAM,EACJ,UAAU,EACV,qBAAqB,GAAG,IAAI,EAC5B,YAAY,GAAG,KAAK,EACpB,WAAW,GAAG,OAAO,EACrB,SAAS,GAAG,KAAK,EACjB,OAAO,GAAG,MAAM,EAChB,OAAO,EAAE,aAAa,EACtB,QAAQ,EACR,GAAG,IAAI,EACR,GAAG,KAAK;AAET,IAAA,MAAM,QAAQ,GAAGA,YAAM,CAA2B,IAAI,CAAC;IACvD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAGC,cAAQ,CAAqB,IAAI,CAAC;IAE9EC,eAAS,CAAC,MAAK;;AACb,QAAA,IAAI,UAAU,EAAE;YACd,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,eAAe,CAAC,MAAM,CAAC,CAAC;AAC1C,YAAA,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,SAAS,EAAE;AAC9B,QAAA;AACH,IAAA,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC;AAEhB,IAAA,MAAM,EAAE,aAAa,EAAE,oBAAoB,EAAE,QAAQ,EAAE,GAAGC,iCAAgB,CAAC,cAAc,CAAC;IAE1F,MAAM,WAAW,GAAG,MAAK;;AACvB,QAAA,IAAI,YAAY;YAAE;AAElB,QAAA,MAAM,MAAM,GAAG,aAAa,EAAE;QAC9B,IAAI,MAAM,KAAK,KAAK;AAAE,YAAA,OAAO;AAE7B,QAAA,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK,EAAE;AAC3B,IAAA,CAAC;AAED,IAAA,MAAM,aAAa,GAAG,CAAC,CAAyC,KAAI;AAClE,QAAA,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE;AACtB,YAAA,CAAC,CAAC,cAAc,EAAE,CAAC;;YAGnB,MAAM,WAAW,GAAG,QAAQ,CAAC,gBAAgB,CAAC,cAAc,CAAC;AAC7D,YAAA,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,QAAQ,CAAC,OAAO,KAAK,WAAW,CAAC,CAAC,CAAC;gBAAE;AAEnE,YAAA,WAAW,EAAE;AACd,QAAA;AACH,IAAA,CAAC;AAED,IAAA,MAAM,mBAAmB,GAAG,OAAO,CAAsC,KAAI;QAC3E,IAAI,WAAW,KAAK,OAAO;YAAE;AAC7B,QAAA,IAAI,CAAC,CAAC,MAAM,KAAK,QAAQ,CAAC,OAAO;AAAE,YAAA,WAAW,EAAE;AAClD,IAAA,CAAC;AAED,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,4BAAe,EAAA,IAAA,EACb,UAAU,KACTD,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAiB,gBAAgB,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAA;AAC/D,QAAAA,sBAAA,CAAA,aAAA,CAACE,qBAAU,EAAA,IAAA,CAAG;QACdF,sBAAA,CAAA,aAAA,CAACG,aAAM,EAAA,EAAA,kBAAA,EACY,OAAO,EACxB,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,QAAQ,EACb,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,YAAY,GAAGC,8BAAwB,GAAG,aAAa,EAClE,OAAO,EAAE,mBAAmB,EAAA,GACxB,IAAI,EAAA,kBAAA,EACS,aAAa,EAC9B,UAAU,EAAE,CAACC,gBAAU,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,UAAU,KAAK,SAAS,EAAA;YAEhEL,sBAAA,CAAA,aAAA,CAACM,SAAI,CAAC,OAAO,EAAA,IAAA;gBACVC,mBAAa,CAAC,KAAK,CAAC,IACnB,KAAK,CAAC,UAAU,KAEhBP,sBAAA,CAAA,aAAA,CAACQ,qBAAU,IACT,EAAE,EAAC,aAAa,EAChB,aAAa,EAAC,cAAc,EAC5B,KAAK,EAAE,KAAK,CAAC,WAAW,EACxB,QAAQ,EAAE,KAAK,CAAC,cAAc,MACzB,qBAAqB,IAAI,EAAE,YAAY,EAAE,WAAW,EAAE,CAAC,EAAA,CAC5D,CACH;gBAEDR,sBAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EACE,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,iBAAiB,EACtB,SAAS,EAAES,+BAAe,CAAC;AACzB,wBAAAC,YAAW,CAAC,WAAW;wBACvB,SAAS,IAAIA,YAAW,CAAC,SAAS;wBAClC,oBAAoB,IAAIA,YAAW,CAAC,UAAU;qBAC/C,CAAC,EAAA,EAED,QAAQ,CACD;AAET,gBAAAC,mBAAa,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,UAAU;AAExC,gBAAA,CAACA,mBAAa,CAAC,KAAK,CAAC,KAAK,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,YAAY,CAAC,KACjEX,sBAAA,CAAA,aAAA,CAACM,SAAI,CAAC,MAAM,EAAA,IAAA;AACV,oBAAAN,sBAAA,CAAA,aAAA,CAACY,WAAK,EAAA,EAAC,SAAS,EAAC,YAAY,EAAC,MAAM,EAAE,KAAK,CAAC,WAAW,GAAG,SAAS,GAAG,KAAK,EAAA;wBACxE,KAAK,CAAC,WAAW,KAChBZ,sBAAA,CAAA,aAAA,CAACY,WAAK,EAAA,EACJ,SAAS,EAAC,YAAY,EACtB,MAAM,EAAC,OAAO,EAAA,aAAA,EACF,wBAAwB,EAAA,EAEnC,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,WAAW,EAAE,MAC/CZ,sBAAA,CAAA,aAAA,CAACa,aAAM,EAAA,EAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAC,QAAQ,EAAA,GAAK,WAAW,EAAA,EAC9C,KAAK,CACC,CACV,CAAC,CACI,CACT;AACA,wBAAA,KAAK,CAAC,YAAY,KACjBb,sBAAA,CAAA,aAAA,CAACY,WAAK,EAAA,EACJ,SAAS,EAAC,YAAY,EACtB,MAAM,EAAC,KAAK,EAAA,aAAA,EACA,yBAAyB,EAAA,EAEpC,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,WAAW,EAAE,MAChDZ,sBAAA,CAAA,aAAA,CAACa,aAAM,EAAA,EAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAC,QAAQ,EAAA,GAAK,WAAW,EAAA,EAC9C,KAAK,CACC,CACV,CAAC,CACI,CACT,CACK,CACI,CACf,CACY,CACR,CACL,CACP,CACe;AAEtB;;;;"}
+{"version":3,"file":"Modal.cjs","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["/* eslint-disable react/destructuring-assignment */\nimport { AnimatePresence } from 'framer-motion';\nimport React, { useEffect, useRef, useState } from 'react';\n\nimport { Dialog } from './components/Dialog/Dialog';\nimport { ModalProps, hasFooterSlot, hasHeaderSlot, isSideDraw } from './types';\n\nimport { useIsOverflowing } from '../../hooks/useIsOverflowing';\nimport { buildClassnames } from '../../utils';\nimport { Action } from '../Action';\nimport { Card } from '../Card';\nimport { CardHeader } from '../CardHeader';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { ScrollLock } from '../ScrollLock';\nimport modalStyles from './Modal.module.scss';\nimport { preventDefaultEventOnESC } from './utils';\n\nexport const Modal = (props: ModalProps) => {\n  const {\n    shouldShow,\n    showHeaderCloseButton = true,\n    preventClose = false,\n    displayMode = 'modal',\n    fullBleed = false,\n    size = 'base',\n    onClose: parentOnClose,\n    children,\n    ...rest\n  } = props;\n\n  const modalRef = useRef<HTMLDialogElement | null>(null);\n  const [mainSectionRef, setMainSectionRef] = useState<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (shouldShow) {\n      modalRef.current?.removeAttribute('open'); // Allows for conditional rendering.\n      modalRef.current?.showModal();\n    }\n  }, [shouldShow]);\n\n  const { isOverflowing: isContentOverflowing, onScroll } = useIsOverflowing(mainSectionRef);\n\n  const handleClose = () => {\n    if (preventClose) return;\n\n    const result = parentOnClose();\n    if (result === false) return; // Otherwise close on void, or true.\n\n    modalRef.current?.close();\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDialogElement>) => {\n    if (e.key === 'Escape') {\n      e.preventDefault(); // Prevent default ESC behavior\n\n      // Don't close if this is the top level and there are other dialogs open\n      const openDialogs = document.querySelectorAll('dialog[open]');\n      if (openDialogs.length > 1 && modalRef.current === openDialogs[0]) return;\n\n      handleClose();\n    }\n  };\n\n  const handleBackdropClick = async (e: React.MouseEvent<HTMLDialogElement>) => {\n    if (displayMode === 'modal') return;\n    if (e.target === modalRef.current) handleClose();\n  };\n\n  return (\n    <AnimatePresence>\n      {shouldShow && (\n        <div data-testid=\"dialog-wrapper\" style={{ position: 'absolute' }}>\n          <ScrollLock />\n          <Dialog\n            data-dialog-type=\"modal\"\n            displayMode={displayMode}\n            size={size}\n            ref={modalRef}\n            onClose={handleClose}\n            onKeyDown={preventClose ? preventDefaultEventOnESC : handleKeyDown}\n            onClick={handleBackdropClick}\n            {...rest}\n            aria-describedby=\"modal_title\"\n            appearance={(isSideDraw(props) && props.appearance) || 'primary'}\n          >\n            <Card.Surface>\n              {hasHeaderSlot(props) ? (\n                props.headerSlot\n              ) : (\n                <CardHeader\n                  id=\"modal_title\"\n                  headerVariant=\"headingLarge\"\n                  title={props.headerTitle}\n                  subtitle={props.headerSubtitle}\n                  {...(showHeaderCloseButton && { onClickClose: handleClose })}\n                />\n              )}\n\n              <section\n                onScroll={onScroll}\n                ref={setMainSectionRef}\n                className={buildClassnames([\n                  modalStyles.mainSection,\n                  fullBleed && modalStyles.fullBleed,\n                  isContentOverflowing && modalStyles.scrollable,\n                ])}\n              >\n                {children}\n              </section>\n\n              {hasFooterSlot(props) && props.footerSlot}\n\n              {!hasFooterSlot(props) && (props.leftActions || props.rightActions) && (\n                <Card.Footer>\n                  <FlexRow justifyContent={props.leftActions ? 'space-between' : 'flex-end'}>\n                    {props.leftActions && (\n                      <FlexRow justifyContent=\"flex-start\" data-testid=\"left-actions-container\">\n                        {props.leftActions.map(({ label, ...actionProps }) => (\n                          <Action key={label} type=\"button\" {...actionProps}>\n                            {label}\n                          </Action>\n                        ))}\n                      </FlexRow>\n                    )}\n                    {props.rightActions && (\n                      <FlexRow justifyContent=\"flex-end\" data-testid=\"right-actions-container\">\n                        {props.rightActions.map(({ label, ...actionProps }) => (\n                          <Action key={label} type=\"button\" {...actionProps}>\n                            {label}\n                          </Action>\n                        ))}\n                      </FlexRow>\n                    )}\n                  </FlexRow>\n                </Card.Footer>\n              )}\n            </Card.Surface>\n          </Dialog>\n        </div>\n      )}\n    </AnimatePresence>\n  );\n};\n"],"names":["useRef","useState","useEffect","useIsOverflowing","React","AnimatePresence","ScrollLock","Dialog","preventDefaultEventOnESC","isSideDraw","Card","hasHeaderSlot","CardHeader","buildClassnames","modalStyles","hasFooterSlot","FlexRow","Action"],"mappings":"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"}

package/dist/components/Modal/Modal.js

@@ -1,21 +1,21 @@
-import React__default, { useRef, useState, useEffect } from 'react';
 import { AnimatePresence } from 'framer-motion';
-import { isSideDraw, hasHeaderSlot, hasFooterSlot } from './types.js';
+import React__default, { useRef, useState, useEffect } from 'react';
 import { Dialog } from './components/Dialog/Dialog.js';
+import { isSideDraw, hasHeaderSlot, hasFooterSlot } from './types.js';
+import { useIsOverflowing } from '../../hooks/useIsOverflowing.js';
 import { buildClassnames } from '../../utils/buildClassnames.js';
 import 'uid/secure';
-import { useIsOverflowing } from '../../hooks/useIsOverflowing.js';
-import { Button } from '../Button/Button.js';
+import { Action } from '../Action/Action.js';
 import { Card } from '../Card/Card.js';
 import { CardHeader } from '../CardHeader/CardHeader.js';
+import { FlexRow } from '../Flex/FlexRow/FlexRow.js';
 import { ScrollLock } from '../ScrollLock/ScrollLock.js';
-import { Stack } from '../Stack/Stack.js';
-import { preventDefaultEventOnESC } from './utils.js';
 import modalStyles from './Modal.module.scss.js';
+import { preventDefaultEventOnESC } from './utils.js';
 
 /* eslint-disable react/destructuring-assignment */
 const Modal = (props) => {
-    const { shouldShow, showHeaderCloseButton = true, preventClose = false, displayMode = 'modal', fullBleed = false, variant = 'base', onClose: parentOnClose, children, ...rest } = props;
+    const { shouldShow, showHeaderCloseButton = true, preventClose = false, displayMode = 'modal', fullBleed = false, size = 'base', onClose: parentOnClose, children, ...rest } = props;
     const modalRef = useRef(null);
     const [mainSectionRef, setMainSectionRef] = useState(null);
     useEffect(() => {
@@ -53,7 +53,7 @@ const Modal = (props) => {
     };
     return (React__default.createElement(AnimatePresence, null, shouldShow && (React__default.createElement("div", { "data-testid": "dialog-wrapper", style: { position: 'absolute' } },
         React__default.createElement(ScrollLock, null),
-        React__default.createElement(Dialog, { "data-dialog-type": "modal", displayMode: displayMode, variant: variant, ref: modalRef, onClose: handleClose, onKeyDown: preventClose ? preventDefaultEventOnESC : handleKeyDown, onClick: handleBackdropClick, ...rest, "aria-describedby": "modal_title", appearance: (isSideDraw(props) && props.appearance) || 'primary' },
+        React__default.createElement(Dialog, { "data-dialog-type": "modal", displayMode: displayMode, size: size, ref: modalRef, onClose: handleClose, onKeyDown: preventClose ? preventDefaultEventOnESC : handleKeyDown, onClick: handleBackdropClick, ...rest, "aria-describedby": "modal_title", appearance: (isSideDraw(props) && props.appearance) || 'primary' },
             React__default.createElement(Card.Surface, null,
                 hasHeaderSlot(props) ? (props.headerSlot) : (React__default.createElement(CardHeader, { id: "modal_title", headerVariant: "headingLarge", title: props.headerTitle, subtitle: props.headerSubtitle, ...(showHeaderCloseButton && { onClickClose: handleClose }) })),
                 React__default.createElement("section", { onScroll: onScroll, ref: setMainSectionRef, className: buildClassnames([
@@ -63,9 +63,9 @@ const Modal = (props) => {
                     ]) }, children),
                 hasFooterSlot(props) && props.footerSlot,
                 !hasFooterSlot(props) && (props.leftActions || props.rightActions) && (React__default.createElement(Card.Footer, null,
-                    React__default.createElement(Stack, { direction: "horizontal", alignX: props.leftActions ? 'between' : 'end' },
-                        props.leftActions && (React__default.createElement(Stack, { direction: "horizontal", alignX: "start", "data-testid": "left-actions-container" }, props.leftActions.map(({ label, ...actionProps }) => (React__default.createElement(Button, { key: label, type: "button", ...actionProps }, label))))),
-                        props.rightActions && (React__default.createElement(Stack, { direction: "horizontal", alignX: "end", "data-testid": "right-actions-container" }, props.rightActions.map(({ label, ...actionProps }) => (React__default.createElement(Button, { key: label, type: "button", ...actionProps }, label))))))))))))));
+                    React__default.createElement(FlexRow, { justifyContent: props.leftActions ? 'space-between' : 'flex-end' },
+                        props.leftActions && (React__default.createElement(FlexRow, { justifyContent: "flex-start", "data-testid": "left-actions-container" }, props.leftActions.map(({ label, ...actionProps }) => (React__default.createElement(Action, { key: label, type: "button", ...actionProps }, label))))),
+                        props.rightActions && (React__default.createElement(FlexRow, { justifyContent: "flex-end", "data-testid": "right-actions-container" }, props.rightActions.map(({ label, ...actionProps }) => (React__default.createElement(Action, { key: label, type: "button", ...actionProps }, label))))))))))))));
 };
 
 export { Modal };

package/dist/components/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["/* eslint-disable react/destructuring-assignment */\nimport React, { useEffect, useRef, useState } from 'react';\nimport { AnimatePresence } from 'framer-motion';\n\nimport { ModalProps, hasFooterSlot, hasHeaderSlot, isSideDraw } from './types';\nimport { Dialog } from './components/Dialog/Dialog';\n\nimport { buildClassnames } from '../../utils';\nimport { useIsOverflowing } from '../../hooks/useIsOverflowing';\nimport { Button } from '../Button';\nimport { Card } from '../Card';\nimport { CardHeader } from '../CardHeader';\nimport { ScrollLock } from '../ScrollLock';\nimport { Stack } from '../Stack';\nimport { preventDefaultEventOnESC } from './utils';\nimport modalStyles from './Modal.module.scss';\n\nexport const Modal = (props: ModalProps) => {\n  const {\n    shouldShow,\n    showHeaderCloseButton = true,\n    preventClose = false,\n    displayMode = 'modal',\n    fullBleed = false,\n    variant = 'base',\n    onClose: parentOnClose,\n    children,\n    ...rest\n  } = props;\n\n  const modalRef = useRef<HTMLDialogElement | null>(null);\n  const [mainSectionRef, setMainSectionRef] = useState<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (shouldShow) {\n      modalRef.current?.removeAttribute('open'); // Allows for conditional rendering.\n      modalRef.current?.showModal();\n    }\n  }, [shouldShow]);\n\n  const { isOverflowing: isContentOverflowing, onScroll } = useIsOverflowing(mainSectionRef);\n\n  const handleClose = () => {\n    if (preventClose) return;\n\n    const result = parentOnClose();\n    if (result === false) return; // Otherwise close on void, or true.\n\n    modalRef.current?.close();\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDialogElement>) => {\n    if (e.key === 'Escape') {\n      e.preventDefault(); // Prevent default ESC behavior\n\n      // Don't close if this is the top level and there are other dialogs open\n      const openDialogs = document.querySelectorAll('dialog[open]');\n      if (openDialogs.length > 1 && modalRef.current === openDialogs[0]) return;\n\n      handleClose();\n    }\n  };\n\n  const handleBackdropClick = async (e: React.MouseEvent<HTMLDialogElement>) => {\n    if (displayMode === 'modal') return;\n    if (e.target === modalRef.current) handleClose();\n  };\n\n  return (\n    <AnimatePresence>\n      {shouldShow && (\n        <div data-testid=\"dialog-wrapper\" style={{ position: 'absolute' }}>\n          <ScrollLock />\n          <Dialog\n            data-dialog-type=\"modal\"\n            displayMode={displayMode}\n            variant={variant}\n            ref={modalRef}\n            onClose={handleClose}\n            onKeyDown={preventClose ? preventDefaultEventOnESC : handleKeyDown}\n            onClick={handleBackdropClick}\n            {...rest}\n            aria-describedby=\"modal_title\"\n            appearance={(isSideDraw(props) && props.appearance) || 'primary'}\n          >\n            <Card.Surface>\n              {hasHeaderSlot(props) ? (\n                props.headerSlot\n              ) : (\n                <CardHeader\n                  id=\"modal_title\"\n                  headerVariant=\"headingLarge\"\n                  title={props.headerTitle}\n                  subtitle={props.headerSubtitle}\n                  {...(showHeaderCloseButton && { onClickClose: handleClose })}\n                />\n              )}\n\n              <section\n                onScroll={onScroll}\n                ref={setMainSectionRef}\n                className={buildClassnames([\n                  modalStyles.mainSection,\n                  fullBleed && modalStyles.fullBleed,\n                  isContentOverflowing && modalStyles.scrollable,\n                ])}\n              >\n                {children}\n              </section>\n\n              {hasFooterSlot(props) && props.footerSlot}\n\n              {!hasFooterSlot(props) && (props.leftActions || props.rightActions) && (\n                <Card.Footer>\n                  <Stack direction=\"horizontal\" alignX={props.leftActions ? 'between' : 'end'}>\n                    {props.leftActions && (\n                      <Stack\n                        direction=\"horizontal\"\n                        alignX=\"start\"\n                        data-testid=\"left-actions-container\"\n                      >\n                        {props.leftActions.map(({ label, ...actionProps }) => (\n                          <Button key={label} type=\"button\" {...actionProps}>\n                            {label}\n                          </Button>\n                        ))}\n                      </Stack>\n                    )}\n                    {props.rightActions && (\n                      <Stack\n                        direction=\"horizontal\"\n                        alignX=\"end\"\n                        data-testid=\"right-actions-container\"\n                      >\n                        {props.rightActions.map(({ label, ...actionProps }) => (\n                          <Button key={label} type=\"button\" {...actionProps}>\n                            {label}\n                          </Button>\n                        ))}\n                      </Stack>\n                    )}\n                  </Stack>\n                </Card.Footer>\n              )}\n            </Card.Surface>\n          </Dialog>\n        </div>\n      )}\n    </AnimatePresence>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"Modal.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["/* eslint-disable react/destructuring-assignment */\nimport { AnimatePresence } from 'framer-motion';\nimport React, { useEffect, useRef, useState } from 'react';\n\nimport { Dialog } from './components/Dialog/Dialog';\nimport { ModalProps, hasFooterSlot, hasHeaderSlot, isSideDraw } from './types';\n\nimport { useIsOverflowing } from '../../hooks/useIsOverflowing';\nimport { buildClassnames } from '../../utils';\nimport { Action } from '../Action';\nimport { Card } from '../Card';\nimport { CardHeader } from '../CardHeader';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { ScrollLock } from '../ScrollLock';\nimport modalStyles from './Modal.module.scss';\nimport { preventDefaultEventOnESC } from './utils';\n\nexport const Modal = (props: ModalProps) => {\n  const {\n    shouldShow,\n    showHeaderCloseButton = true,\n    preventClose = false,\n    displayMode = 'modal',\n    fullBleed = false,\n    size = 'base',\n    onClose: parentOnClose,\n    children,\n    ...rest\n  } = props;\n\n  const modalRef = useRef<HTMLDialogElement | null>(null);\n  const [mainSectionRef, setMainSectionRef] = useState<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (shouldShow) {\n      modalRef.current?.removeAttribute('open'); // Allows for conditional rendering.\n      modalRef.current?.showModal();\n    }\n  }, [shouldShow]);\n\n  const { isOverflowing: isContentOverflowing, onScroll } = useIsOverflowing(mainSectionRef);\n\n  const handleClose = () => {\n    if (preventClose) return;\n\n    const result = parentOnClose();\n    if (result === false) return; // Otherwise close on void, or true.\n\n    modalRef.current?.close();\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDialogElement>) => {\n    if (e.key === 'Escape') {\n      e.preventDefault(); // Prevent default ESC behavior\n\n      // Don't close if this is the top level and there are other dialogs open\n      const openDialogs = document.querySelectorAll('dialog[open]');\n      if (openDialogs.length > 1 && modalRef.current === openDialogs[0]) return;\n\n      handleClose();\n    }\n  };\n\n  const handleBackdropClick = async (e: React.MouseEvent<HTMLDialogElement>) => {\n    if (displayMode === 'modal') return;\n    if (e.target === modalRef.current) handleClose();\n  };\n\n  return (\n    <AnimatePresence>\n      {shouldShow && (\n        <div data-testid=\"dialog-wrapper\" style={{ position: 'absolute' }}>\n          <ScrollLock />\n          <Dialog\n            data-dialog-type=\"modal\"\n            displayMode={displayMode}\n            size={size}\n            ref={modalRef}\n            onClose={handleClose}\n            onKeyDown={preventClose ? preventDefaultEventOnESC : handleKeyDown}\n            onClick={handleBackdropClick}\n            {...rest}\n            aria-describedby=\"modal_title\"\n            appearance={(isSideDraw(props) && props.appearance) || 'primary'}\n          >\n            <Card.Surface>\n              {hasHeaderSlot(props) ? (\n                props.headerSlot\n              ) : (\n                <CardHeader\n                  id=\"modal_title\"\n                  headerVariant=\"headingLarge\"\n                  title={props.headerTitle}\n                  subtitle={props.headerSubtitle}\n                  {...(showHeaderCloseButton && { onClickClose: handleClose })}\n                />\n              )}\n\n              <section\n                onScroll={onScroll}\n                ref={setMainSectionRef}\n                className={buildClassnames([\n                  modalStyles.mainSection,\n                  fullBleed && modalStyles.fullBleed,\n                  isContentOverflowing && modalStyles.scrollable,\n                ])}\n              >\n                {children}\n              </section>\n\n              {hasFooterSlot(props) && props.footerSlot}\n\n              {!hasFooterSlot(props) && (props.leftActions || props.rightActions) && (\n                <Card.Footer>\n                  <FlexRow justifyContent={props.leftActions ? 'space-between' : 'flex-end'}>\n                    {props.leftActions && (\n                      <FlexRow justifyContent=\"flex-start\" data-testid=\"left-actions-container\">\n                        {props.leftActions.map(({ label, ...actionProps }) => (\n                          <Action key={label} type=\"button\" {...actionProps}>\n                            {label}\n                          </Action>\n                        ))}\n                      </FlexRow>\n                    )}\n                    {props.rightActions && (\n                      <FlexRow justifyContent=\"flex-end\" data-testid=\"right-actions-container\">\n                        {props.rightActions.map(({ label, ...actionProps }) => (\n                          <Action key={label} type=\"button\" {...actionProps}>\n                            {label}\n                          </Action>\n                        ))}\n                      </FlexRow>\n                    )}\n                  </FlexRow>\n                </Card.Footer>\n              )}\n            </Card.Surface>\n          </Dialog>\n        </div>\n      )}\n    </AnimatePresence>\n  );\n};\n"],"names":["React"],"mappings":"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"}

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

@@ -2,8 +2,8 @@
 
 var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
 
-___$insertStyle("/* Scroll-lock: prevents body scrolling when modal is open.\n   The class persists through AnimatePresence exit animations because\n   it's managed by the ScrollLock component mounted inside AnimatePresence. */\nbody.veeqo-modal-open {\n  overflow: hidden;\n  scrollbar-gutter: stable;\n}\n\n@keyframes _fadeIn_6h63u_1 {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n._dialog_6h63u_17 {\n  padding: 0;\n  border: none;\n  border-radius: var(--sizes-sm);\n  box-shadow: var(--shadows-lg);\n  z-index: var(--layers-modal);\n  /* Targets Card.Surface: the sole direct child of dialog.\n     Wave 3 (Card migration) can update to CSS Module class reference. */\n  /* Targets Card.Footer */\n}\n._dialog_6h63u_17::backdrop {\n  animation: _fadeIn_6h63u_1 0.25s ease forwards;\n  background-color: rgba(55, 66, 77, 0.5);\n  width: 100%;\n  height: 100%;\n}\n._dialog_6h63u_17 > :first-child {\n  display: flex;\n  flex-direction: column;\n}\n._dialog_6h63u_17 > :first-child ._mainSection_6h63u_37 {\n  padding-bottom: var(--sizes-md);\n}\n._dialog_6h63u_17 > :first-child footer {\n  margin-top: 0;\n}\n\n._secondaryAppearance_6h63u_44::backdrop {\n  animation: none;\n  opacity: 0;\n}\n\n/* ---------- MainSection ---------- */\n._mainSection_6h63u_37 {\n  flex: 1;\n  overflow-y: auto;\n}\n\n._mainSection_6h63u_37:not(._fullBleed_6h63u_55) {\n  padding: 0 var(--sizes-md);\n}\n\n/* Scrollable shadow on Card.Footer when content overflows */\n._mainSection_6h63u_37._scrollable_6h63u_60 + footer {\n  box-shadow: 0px 10px 15px 0px var(--colors-neutral-ink-dark);\n}\n\n/* ---------- Modal display mode ---------- */\n._modal_6h63u_65 {\n  min-width: 464px;\n  /* Critical for framer-motion exit animations: prevents HTML dialog from\n     hiding via UA stylesheet when 'open' attribute is removed. */\n}\n._modal_6h63u_65:not([open]) {\n  display: block;\n  position: fixed;\n  inset: 0;\n  transform: translate(-50%, -50%);\n}\n\n/* ---------- Side drawer shared base ---------- */\n._leftDrawer_6h63u_78,\n._rightDrawer_6h63u_79 {\n  height: 100%;\n  max-height: 100%;\n  min-width: 320px;\n  width: 400px;\n  margin: 0;\n  position: fixed;\n  transform: none;\n  border-radius: 0;\n  overflow: visible;\n  /* Critical for framer-motion exit animations */\n}\n._leftDrawer_6h63u_78 > :first-child,\n._rightDrawer_6h63u_79 > :first-child {\n  border-radius: 0;\n  height: 100%;\n}\n._leftDrawer_6h63u_78:not([open]),\n._rightDrawer_6h63u_79:not([open]) {\n  display: block;\n}\n\n._leftDrawer_6h63u_78 {\n  inset: 0 auto 0 0;\n}\n\n._rightDrawer_6h63u_79 {\n  inset: 0 0 0 auto;\n}\n\n/* ---------- Variant-specific responsive widths ---------- */\n/* Values hardcoded from constants.ts (heightMap, widthMap, fullScreenBreakpointMap) */\n._xs-variant_6h63u_111 {\n  /* fullScreenBreakpointMap['xs'] = 640px (breakpoints.mobile) */\n}\n._xs-variant_6h63u_111 > :first-child {\n  max-height: 84vh;\n}\n@media (width <= 640px) {\n  ._xs-variant_6h63u_111 {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n  }\n  ._xs-variant_6h63u_111, ._xs-variant_6h63u_111 > :first-child {\n    border-radius: 0;\n    height: 100%;\n    width: 100%;\n    max-height: unset;\n  }\n}\n@media (width >= 641px) and (width <= 720px) {\n  ._xs-variant_6h63u_111 {\n    max-width: 60vw;\n  }\n}\n@media (width >= 720px) and (width <= 960px) {\n  ._xs-variant_6h63u_111 {\n    max-width: 48vw;\n  }\n}\n@media (width >= 960px) and (width <= 1280px) {\n  ._xs-variant_6h63u_111 {\n    max-width: 36vw;\n  }\n}\n@media (width >= 1280px) {\n  ._xs-variant_6h63u_111 {\n    max-width: 32vw;\n  }\n}\n\n._sm-variant_6h63u_152 {\n  /* fullScreenBreakpointMap['sm'] = 640px (breakpoints.mobile) */\n}\n._sm-variant_6h63u_152 > :first-child {\n  max-height: 72vh;\n}\n@media (width <= 640px) {\n  ._sm-variant_6h63u_152 {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n  }\n  ._sm-variant_6h63u_152, ._sm-variant_6h63u_152 > :first-child {\n    border-radius: 0;\n    height: 100%;\n    width: 100%;\n    max-height: unset;\n  }\n}\n@media (width >= 641px) and (width <= 720px) {\n  ._sm-variant_6h63u_152 {\n    max-width: 72vw;\n  }\n}\n@media (width >= 720px) and (width <= 960px) {\n  ._sm-variant_6h63u_152 {\n    max-width: 56vw;\n  }\n}\n@media (width >= 960px) and (width <= 1280px) {\n  ._sm-variant_6h63u_152 {\n    max-width: 44vw;\n  }\n}\n@media (width >= 1280px) {\n  ._sm-variant_6h63u_152 {\n    max-width: 40vw;\n  }\n}\n\n._base-variant_6h63u_193 {\n  /* fullScreenBreakpointMap['base'] = 720px (breakpoints.tablet) */\n}\n._base-variant_6h63u_193 > :first-child {\n  max-height: 84vh;\n}\n@media (width <= 720px) {\n  ._base-variant_6h63u_193 {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n  }\n  ._base-variant_6h63u_193, ._base-variant_6h63u_193 > :first-child {\n    border-radius: 0;\n    height: 100%;\n    width: 100%;\n    max-height: unset;\n  }\n}\n@media (width >= 720px) and (width <= 960px) {\n  ._base-variant_6h63u_193 {\n    max-width: 88vw;\n  }\n}\n@media (width >= 960px) and (width <= 1280px) {\n  ._base-variant_6h63u_193 {\n    max-width: 72vw;\n  }\n}\n@media (width >= 1280px) {\n  ._base-variant_6h63u_193 {\n    max-width: 52vw;\n  }\n}\n\n._lg-variant_6h63u_229 {\n  /* fullScreenBreakpointMap['lg'] = 960px (breakpoints.lgTablet) */\n}\n._lg-variant_6h63u_229 > :first-child {\n  max-height: 96vh;\n}\n@media (width <= 960px) {\n  ._lg-variant_6h63u_229 {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n  }\n  ._lg-variant_6h63u_229, ._lg-variant_6h63u_229 > :first-child {\n    border-radius: 0;\n    height: 100%;\n    width: 100%;\n    max-height: unset;\n  }\n}\n@media (width >= 960px) and (width <= 1280px) {\n  ._lg-variant_6h63u_229 {\n    max-width: 88vw;\n  }\n}\n@media (width >= 1280px) {\n  ._lg-variant_6h63u_229 {\n    max-width: 80vw;\n  }\n}");
-var modalStyles = {"dialog":"_dialog_6h63u_17","fadeIn":"_fadeIn_6h63u_1","mainSection":"_mainSection_6h63u_37","secondaryAppearance":"_secondaryAppearance_6h63u_44","fullBleed":"_fullBleed_6h63u_55","scrollable":"_scrollable_6h63u_60","modal":"_modal_6h63u_65","leftDrawer":"_leftDrawer_6h63u_78","rightDrawer":"_rightDrawer_6h63u_79","xs-variant":"_xs-variant_6h63u_111","sm-variant":"_sm-variant_6h63u_152","base-variant":"_base-variant_6h63u_193","lg-variant":"_lg-variant_6h63u_229"};
+___$insertStyle("/* Scroll-lock: prevents body scrolling when modal is open.\n   The class persists through AnimatePresence exit animations because\n   it's managed by the ScrollLock component mounted inside AnimatePresence. */\nbody.veeqo-modal-open {\n  overflow: hidden;\n  scrollbar-gutter: stable;\n}\n\n@keyframes _fadeIn_sccv3_1 {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n._dialog_sccv3_17 {\n  padding: 0;\n  border: none;\n  border-radius: var(--sizes-sm);\n  box-shadow: var(--shadows-lg);\n  z-index: var(--layers-modal);\n  /* Targets Card.Surface: the sole direct child of dialog.\n     Wave 3 (Card migration) can update to CSS Module class reference. */\n  /* Targets Card.Footer */\n}\n._dialog_sccv3_17::backdrop {\n  animation: _fadeIn_sccv3_1 0.25s ease forwards;\n  background-color: rgba(55, 66, 77, 0.5);\n  width: 100%;\n  height: 100%;\n}\n._dialog_sccv3_17 > :first-child {\n  display: flex;\n  flex-direction: column;\n}\n._dialog_sccv3_17 > :first-child ._mainSection_sccv3_37 {\n  padding-bottom: var(--sizes-md);\n}\n._dialog_sccv3_17 > :first-child footer {\n  margin-top: 0;\n}\n\n._secondaryAppearance_sccv3_44::backdrop {\n  animation: none;\n  opacity: 0;\n}\n\n/* ---------- MainSection ---------- */\n._mainSection_sccv3_37 {\n  flex: 1;\n  overflow-y: auto;\n}\n\n._mainSection_sccv3_37:not(._fullBleed_sccv3_55) {\n  padding: 0 var(--sizes-md);\n}\n\n/* Scrollable shadow on Card.Footer when content overflows */\n._mainSection_sccv3_37._scrollable_sccv3_60 + footer {\n  box-shadow: 0px 10px 15px 0px var(--colors-neutral-ink-dark);\n}\n\n/* ---------- Modal display mode ---------- */\n._modal_sccv3_65 {\n  min-width: 464px;\n  /* Critical for framer-motion exit animations: prevents HTML dialog from\n     hiding via UA stylesheet when 'open' attribute is removed. */\n}\n._modal_sccv3_65 > :first-child {\n  border: none;\n}\n._modal_sccv3_65:not([open]) {\n  display: block;\n  position: fixed;\n  inset: 0;\n  transform: translate(-50%, -50%);\n}\n\n/* ---------- Side drawer shared base ---------- */\n._leftDrawer_sccv3_81,\n._rightDrawer_sccv3_82 {\n  height: 100%;\n  max-height: 100%;\n  min-width: 320px;\n  width: 400px;\n  margin: 0;\n  position: fixed;\n  transform: none;\n  border-radius: 0;\n  overflow: visible;\n  /* Critical for framer-motion exit animations */\n}\n._leftDrawer_sccv3_81 > :first-child,\n._rightDrawer_sccv3_82 > :first-child {\n  border-radius: 0;\n  height: 100%;\n}\n._leftDrawer_sccv3_81:not([open]),\n._rightDrawer_sccv3_82:not([open]) {\n  display: block;\n}\n\n._leftDrawer_sccv3_81 {\n  inset: 0 auto 0 0;\n}\n\n._rightDrawer_sccv3_82 {\n  inset: 0 0 0 auto;\n}\n\n/* ---------- Size-specific responsive widths ---------- */\n/* Values hardcoded from constants.ts (heightMap, widthMap, fullScreenBreakpointMap) */\n._xs-size_sccv3_114 {\n  /* fullScreenBreakpointMap['xs'] = 640px (breakpoints.mobile) */\n}\n._xs-size_sccv3_114 > :first-child {\n  max-height: 84vh;\n}\n@media (width <= 640px) {\n  ._xs-size_sccv3_114 {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n  }\n  ._xs-size_sccv3_114, ._xs-size_sccv3_114 > :first-child {\n    border-radius: 0;\n    height: 100%;\n    width: 100%;\n    max-height: unset;\n  }\n}\n@media (width >= 641px) and (width <= 720px) {\n  ._xs-size_sccv3_114 {\n    max-width: 60vw;\n  }\n}\n@media (width >= 720px) and (width <= 960px) {\n  ._xs-size_sccv3_114 {\n    max-width: 48vw;\n  }\n}\n@media (width >= 960px) and (width <= 1280px) {\n  ._xs-size_sccv3_114 {\n    max-width: 36vw;\n  }\n}\n@media (width >= 1280px) {\n  ._xs-size_sccv3_114 {\n    max-width: 32vw;\n  }\n}\n\n._sm-size_sccv3_155 {\n  /* fullScreenBreakpointMap['sm'] = 640px (breakpoints.mobile) */\n}\n._sm-size_sccv3_155 > :first-child {\n  max-height: 72vh;\n}\n@media (width <= 640px) {\n  ._sm-size_sccv3_155 {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n  }\n  ._sm-size_sccv3_155, ._sm-size_sccv3_155 > :first-child {\n    border-radius: 0;\n    height: 100%;\n    width: 100%;\n    max-height: unset;\n  }\n}\n@media (width >= 641px) and (width <= 720px) {\n  ._sm-size_sccv3_155 {\n    max-width: 72vw;\n  }\n}\n@media (width >= 720px) and (width <= 960px) {\n  ._sm-size_sccv3_155 {\n    max-width: 56vw;\n  }\n}\n@media (width >= 960px) and (width <= 1280px) {\n  ._sm-size_sccv3_155 {\n    max-width: 44vw;\n  }\n}\n@media (width >= 1280px) {\n  ._sm-size_sccv3_155 {\n    max-width: 40vw;\n  }\n}\n\n._base-size_sccv3_196 {\n  /* fullScreenBreakpointMap['base'] = 720px (breakpoints.tablet) */\n}\n._base-size_sccv3_196 > :first-child {\n  max-height: 84vh;\n}\n@media (width <= 720px) {\n  ._base-size_sccv3_196 {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n  }\n  ._base-size_sccv3_196, ._base-size_sccv3_196 > :first-child {\n    border-radius: 0;\n    height: 100%;\n    width: 100%;\n    max-height: unset;\n  }\n}\n@media (width >= 720px) and (width <= 960px) {\n  ._base-size_sccv3_196 {\n    max-width: 88vw;\n  }\n}\n@media (width >= 960px) and (width <= 1280px) {\n  ._base-size_sccv3_196 {\n    max-width: 72vw;\n  }\n}\n@media (width >= 1280px) {\n  ._base-size_sccv3_196 {\n    max-width: 52vw;\n  }\n}\n\n._lg-size_sccv3_232 {\n  /* fullScreenBreakpointMap['lg'] = 960px (breakpoints.lgTablet) */\n}\n._lg-size_sccv3_232 > :first-child {\n  max-height: 96vh;\n}\n@media (width <= 960px) {\n  ._lg-size_sccv3_232 {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n  }\n  ._lg-size_sccv3_232, ._lg-size_sccv3_232 > :first-child {\n    border-radius: 0;\n    height: 100%;\n    width: 100%;\n    max-height: unset;\n  }\n}\n@media (width >= 960px) and (width <= 1280px) {\n  ._lg-size_sccv3_232 {\n    max-width: 88vw;\n  }\n}\n@media (width >= 1280px) {\n  ._lg-size_sccv3_232 {\n    max-width: 80vw;\n  }\n}");
+var modalStyles = {"dialog":"_dialog_sccv3_17","fadeIn":"_fadeIn_sccv3_1","mainSection":"_mainSection_sccv3_37","secondaryAppearance":"_secondaryAppearance_sccv3_44","fullBleed":"_fullBleed_sccv3_55","scrollable":"_scrollable_sccv3_60","modal":"_modal_sccv3_65","leftDrawer":"_leftDrawer_sccv3_81","rightDrawer":"_rightDrawer_sccv3_82","xs-size":"_xs-size_sccv3_114","sm-size":"_sm-size_sccv3_155","base-size":"_base-size_sccv3_196","lg-size":"_lg-size_sccv3_232"};
 
 module.exports = modalStyles;
 //# sourceMappingURL=Modal.module.scss.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.module.scss.cjs","sources":["../../../src/components/Modal/Modal.module.scss"],"sourcesContent":["/* Scroll-lock: prevents body scrolling when modal is open.\n   The class persists through AnimatePresence exit animations because\n   it's managed by the ScrollLock component mounted inside AnimatePresence. */\n:global(body.veeqo-modal-open) {\n  overflow: hidden;\n  scrollbar-gutter: stable;\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n.dialog {\n  padding: 0;\n  border: none;\n  border-radius: var(--sizes-sm);\n  box-shadow: var(--shadows-lg);\n  z-index: var(--layers-modal);\n\n  &::backdrop {\n    animation: fadeIn 0.25s ease forwards;\n    background-color: rgba(55, 66, 77, 0.5);\n    width: 100%;\n    height: 100%;\n  }\n\n  /* Targets Card.Surface: the sole direct child of dialog.\n     Wave 3 (Card migration) can update to CSS Module class reference. */\n  & > :first-child {\n    display: flex;\n    flex-direction: column;\n  }\n\n  & > :first-child .mainSection {\n    padding-bottom: var(--sizes-md);\n  }\n\n  /* Targets Card.Footer */\n  & > :first-child footer {\n    margin-top: 0;\n  }\n}\n\n.secondaryAppearance {\n  &::backdrop {\n    animation: none;\n    opacity: 0;\n  }\n}\n\n/* ---------- MainSection ---------- */\n\n.mainSection {\n  flex: 1;\n  overflow-y: auto;\n}\n\n.mainSection:not(.fullBleed) {\n  padding: 0 var(--sizes-md);\n}\n\n/* Scrollable shadow on Card.Footer when content overflows */\n.mainSection.scrollable + footer {\n  box-shadow: 0px 10px 15px 0px var(--colors-neutral-ink-dark);\n}\n\n/* ---------- Modal display mode ---------- */\n\n.modal {\n  min-width: 464px;\n\n  /* Critical for framer-motion exit animations: prevents HTML dialog from\n     hiding via UA stylesheet when 'open' attribute is removed. */\n  &:not([open]) {\n    display: block;\n    position: fixed;\n    inset: 0;\n    transform: translate(-50%, -50%);\n  }\n}\n\n/* ---------- Side drawer shared base ---------- */\n\n.leftDrawer,\n.rightDrawer {\n  height: 100%;\n  max-height: 100%;\n  min-width: 320px;\n  width: 400px;\n  margin: 0;\n  position: fixed;\n  transform: none;\n  border-radius: 0;\n  overflow: visible;\n\n  & > :first-child {\n    border-radius: 0;\n    height: 100%;\n  }\n\n  /* Critical for framer-motion exit animations */\n  &:not([open]) {\n    display: block;\n  }\n}\n\n.leftDrawer {\n  inset: 0 auto 0 0;\n}\n\n.rightDrawer {\n  inset: 0 0 0 auto;\n}\n\n/* ---------- Variant-specific responsive widths ---------- */\n/* Values hardcoded from constants.ts (heightMap, widthMap, fullScreenBreakpointMap) */\n\n.xs-variant {\n  & > :first-child {\n    max-height: 84vh;\n  }\n\n  /* fullScreenBreakpointMap['xs'] = 640px (breakpoints.mobile) */\n  @media (width <= 640px) {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n\n    &,\n    & > :first-child {\n      border-radius: 0;\n      height: 100%;\n      width: 100%;\n      max-height: unset;\n    }\n  }\n\n  @media (width >= 641px) and (width <= 720px) {\n    max-width: 60vw;\n  }\n\n  @media (width >= 720px) and (width <= 960px) {\n    max-width: 48vw;\n  }\n\n  @media (width >= 960px) and (width <= 1280px) {\n    max-width: 36vw;\n  }\n\n  @media (width >= 1280px) {\n    max-width: 32vw;\n  }\n}\n\n.sm-variant {\n  & > :first-child {\n    max-height: 72vh;\n  }\n\n  /* fullScreenBreakpointMap['sm'] = 640px (breakpoints.mobile) */\n  @media (width <= 640px) {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n\n    &,\n    & > :first-child {\n      border-radius: 0;\n      height: 100%;\n      width: 100%;\n      max-height: unset;\n    }\n  }\n\n  @media (width >= 641px) and (width <= 720px) {\n    max-width: 72vw;\n  }\n\n  @media (width >= 720px) and (width <= 960px) {\n    max-width: 56vw;\n  }\n\n  @media (width >= 960px) and (width <= 1280px) {\n    max-width: 44vw;\n  }\n\n  @media (width >= 1280px) {\n    max-width: 40vw;\n  }\n}\n\n.base-variant {\n  & > :first-child {\n    max-height: 84vh;\n  }\n\n  /* fullScreenBreakpointMap['base'] = 720px (breakpoints.tablet) */\n  @media (width <= 720px) {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n\n    &,\n    & > :first-child {\n      border-radius: 0;\n      height: 100%;\n      width: 100%;\n      max-height: unset;\n    }\n  }\n\n  @media (width >= 720px) and (width <= 960px) {\n    max-width: 88vw;\n  }\n\n  @media (width >= 960px) and (width <= 1280px) {\n    max-width: 72vw;\n  }\n\n  @media (width >= 1280px) {\n    max-width: 52vw;\n  }\n}\n\n.lg-variant {\n  & > :first-child {\n    max-height: 96vh;\n  }\n\n  /* fullScreenBreakpointMap['lg'] = 960px (breakpoints.lgTablet) */\n  @media (width <= 960px) {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n\n    &,\n    & > :first-child {\n      border-radius: 0;\n      height: 100%;\n      width: 100%;\n      max-height: unset;\n    }\n  }\n\n  @media (width >= 960px) and (width <= 1280px) {\n    max-width: 88vw;\n  }\n\n  @media (width >= 1280px) {\n    max-width: 80vw;\n  }\n}\n"],"names":[],"mappings":";;;;AAAA,eAAA,CAAA,4yLAAA;AAAA,kBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,qBAAA,CAAA,+BAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,YAAA,CAAA,uBAAA,CAAA,YAAA,CAAA,uBAAA,CAAA,cAAA,CAAA,yBAAA,CAAA,YAAA,CAAA,uBAAA;;;;"}
+{"version":3,"file":"Modal.module.scss.cjs","sources":["../../../src/components/Modal/Modal.module.scss"],"sourcesContent":["/* Scroll-lock: prevents body scrolling when modal is open.\n   The class persists through AnimatePresence exit animations because\n   it's managed by the ScrollLock component mounted inside AnimatePresence. */\n:global(body.veeqo-modal-open) {\n  overflow: hidden;\n  scrollbar-gutter: stable;\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n.dialog {\n  padding: 0;\n  border: none;\n  border-radius: var(--sizes-sm);\n  box-shadow: var(--shadows-lg);\n  z-index: var(--layers-modal);\n\n  &::backdrop {\n    animation: fadeIn 0.25s ease forwards;\n    background-color: rgba(55, 66, 77, 0.5);\n    width: 100%;\n    height: 100%;\n  }\n\n  /* Targets Card.Surface: the sole direct child of dialog.\n     Wave 3 (Card migration) can update to CSS Module class reference. */\n  & > :first-child {\n    display: flex;\n    flex-direction: column;\n  }\n\n  & > :first-child .mainSection {\n    padding-bottom: var(--sizes-md);\n  }\n\n  /* Targets Card.Footer */\n  & > :first-child footer {\n    margin-top: 0;\n  }\n}\n\n.secondaryAppearance {\n  &::backdrop {\n    animation: none;\n    opacity: 0;\n  }\n}\n\n/* ---------- MainSection ---------- */\n\n.mainSection {\n  flex: 1;\n  overflow-y: auto;\n}\n\n.mainSection:not(.fullBleed) {\n  padding: 0 var(--sizes-md);\n}\n\n/* Scrollable shadow on Card.Footer when content overflows */\n.mainSection.scrollable + footer {\n  box-shadow: 0px 10px 15px 0px var(--colors-neutral-ink-dark);\n}\n\n/* ---------- Modal display mode ---------- */\n\n.modal {\n  min-width: 464px;\n  \n  & > :first-child {\n    border: none;\n  }\n\n  /* Critical for framer-motion exit animations: prevents HTML dialog from\n     hiding via UA stylesheet when 'open' attribute is removed. */\n  &:not([open]) {\n    display: block;\n    position: fixed;\n    inset: 0;\n    transform: translate(-50%, -50%);\n  }\n}\n\n/* ---------- Side drawer shared base ---------- */\n\n.leftDrawer,\n.rightDrawer {\n  height: 100%;\n  max-height: 100%;\n  min-width: 320px;\n  width: 400px;\n  margin: 0;\n  position: fixed;\n  transform: none;\n  border-radius: 0;\n  overflow: visible;\n\n  & > :first-child {\n    border-radius: 0;\n    height: 100%;\n  }\n\n  /* Critical for framer-motion exit animations */\n  &:not([open]) {\n    display: block;\n  }\n}\n\n.leftDrawer {\n  inset: 0 auto 0 0;\n}\n\n.rightDrawer {\n  inset: 0 0 0 auto;\n}\n\n/* ---------- Size-specific responsive widths ---------- */\n/* Values hardcoded from constants.ts (heightMap, widthMap, fullScreenBreakpointMap) */\n\n.xs-size {\n  & > :first-child {\n    max-height: 84vh;\n  }\n\n  /* fullScreenBreakpointMap['xs'] = 640px (breakpoints.mobile) */\n  @media (width <= 640px) {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n\n    &,\n    & > :first-child {\n      border-radius: 0;\n      height: 100%;\n      width: 100%;\n      max-height: unset;\n    }\n  }\n\n  @media (width >= 641px) and (width <= 720px) {\n    max-width: 60vw;\n  }\n\n  @media (width >= 720px) and (width <= 960px) {\n    max-width: 48vw;\n  }\n\n  @media (width >= 960px) and (width <= 1280px) {\n    max-width: 36vw;\n  }\n\n  @media (width >= 1280px) {\n    max-width: 32vw;\n  }\n}\n\n.sm-size {\n  & > :first-child {\n    max-height: 72vh;\n  }\n\n  /* fullScreenBreakpointMap['sm'] = 640px (breakpoints.mobile) */\n  @media (width <= 640px) {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n\n    &,\n    & > :first-child {\n      border-radius: 0;\n      height: 100%;\n      width: 100%;\n      max-height: unset;\n    }\n  }\n\n  @media (width >= 641px) and (width <= 720px) {\n    max-width: 72vw;\n  }\n\n  @media (width >= 720px) and (width <= 960px) {\n    max-width: 56vw;\n  }\n\n  @media (width >= 960px) and (width <= 1280px) {\n    max-width: 44vw;\n  }\n\n  @media (width >= 1280px) {\n    max-width: 40vw;\n  }\n}\n\n.base-size {\n  & > :first-child {\n    max-height: 84vh;\n  }\n\n  /* fullScreenBreakpointMap['base'] = 720px (breakpoints.tablet) */\n  @media (width <= 720px) {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n\n    &,\n    & > :first-child {\n      border-radius: 0;\n      height: 100%;\n      width: 100%;\n      max-height: unset;\n    }\n  }\n\n  @media (width >= 720px) and (width <= 960px) {\n    max-width: 88vw;\n  }\n\n  @media (width >= 960px) and (width <= 1280px) {\n    max-width: 72vw;\n  }\n\n  @media (width >= 1280px) {\n    max-width: 52vw;\n  }\n}\n\n.lg-size {\n  & > :first-child {\n    max-height: 96vh;\n  }\n\n  /* fullScreenBreakpointMap['lg'] = 960px (breakpoints.lgTablet) */\n  @media (width <= 960px) {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n\n    &,\n    & > :first-child {\n      border-radius: 0;\n      height: 100%;\n      width: 100%;\n      max-height: unset;\n    }\n  }\n\n  @media (width >= 960px) and (width <= 1280px) {\n    max-width: 88vw;\n  }\n\n  @media (width >= 1280px) {\n    max-width: 80vw;\n  }\n}\n"],"names":[],"mappings":";;;;AAAA,eAAA,CAAA,6vLAAA;AAAA,kBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,qBAAA,CAAA,+BAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,SAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,oBAAA,CAAA,WAAA,CAAA,sBAAA,CAAA,SAAA,CAAA,oBAAA;;;;"}

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

@@ -1,7 +1,7 @@
 import insertStyle from '../../_virtual/____insertStyle.js';
 
-insertStyle("/* Scroll-lock: prevents body scrolling when modal is open.\n   The class persists through AnimatePresence exit animations because\n   it's managed by the ScrollLock component mounted inside AnimatePresence. */\nbody.veeqo-modal-open {\n  overflow: hidden;\n  scrollbar-gutter: stable;\n}\n\n@keyframes _fadeIn_6h63u_1 {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n._dialog_6h63u_17 {\n  padding: 0;\n  border: none;\n  border-radius: var(--sizes-sm);\n  box-shadow: var(--shadows-lg);\n  z-index: var(--layers-modal);\n  /* Targets Card.Surface: the sole direct child of dialog.\n     Wave 3 (Card migration) can update to CSS Module class reference. */\n  /* Targets Card.Footer */\n}\n._dialog_6h63u_17::backdrop {\n  animation: _fadeIn_6h63u_1 0.25s ease forwards;\n  background-color: rgba(55, 66, 77, 0.5);\n  width: 100%;\n  height: 100%;\n}\n._dialog_6h63u_17 > :first-child {\n  display: flex;\n  flex-direction: column;\n}\n._dialog_6h63u_17 > :first-child ._mainSection_6h63u_37 {\n  padding-bottom: var(--sizes-md);\n}\n._dialog_6h63u_17 > :first-child footer {\n  margin-top: 0;\n}\n\n._secondaryAppearance_6h63u_44::backdrop {\n  animation: none;\n  opacity: 0;\n}\n\n/* ---------- MainSection ---------- */\n._mainSection_6h63u_37 {\n  flex: 1;\n  overflow-y: auto;\n}\n\n._mainSection_6h63u_37:not(._fullBleed_6h63u_55) {\n  padding: 0 var(--sizes-md);\n}\n\n/* Scrollable shadow on Card.Footer when content overflows */\n._mainSection_6h63u_37._scrollable_6h63u_60 + footer {\n  box-shadow: 0px 10px 15px 0px var(--colors-neutral-ink-dark);\n}\n\n/* ---------- Modal display mode ---------- */\n._modal_6h63u_65 {\n  min-width: 464px;\n  /* Critical for framer-motion exit animations: prevents HTML dialog from\n     hiding via UA stylesheet when 'open' attribute is removed. */\n}\n._modal_6h63u_65:not([open]) {\n  display: block;\n  position: fixed;\n  inset: 0;\n  transform: translate(-50%, -50%);\n}\n\n/* ---------- Side drawer shared base ---------- */\n._leftDrawer_6h63u_78,\n._rightDrawer_6h63u_79 {\n  height: 100%;\n  max-height: 100%;\n  min-width: 320px;\n  width: 400px;\n  margin: 0;\n  position: fixed;\n  transform: none;\n  border-radius: 0;\n  overflow: visible;\n  /* Critical for framer-motion exit animations */\n}\n._leftDrawer_6h63u_78 > :first-child,\n._rightDrawer_6h63u_79 > :first-child {\n  border-radius: 0;\n  height: 100%;\n}\n._leftDrawer_6h63u_78:not([open]),\n._rightDrawer_6h63u_79:not([open]) {\n  display: block;\n}\n\n._leftDrawer_6h63u_78 {\n  inset: 0 auto 0 0;\n}\n\n._rightDrawer_6h63u_79 {\n  inset: 0 0 0 auto;\n}\n\n/* ---------- Variant-specific responsive widths ---------- */\n/* Values hardcoded from constants.ts (heightMap, widthMap, fullScreenBreakpointMap) */\n._xs-variant_6h63u_111 {\n  /* fullScreenBreakpointMap['xs'] = 640px (breakpoints.mobile) */\n}\n._xs-variant_6h63u_111 > :first-child {\n  max-height: 84vh;\n}\n@media (width <= 640px) {\n  ._xs-variant_6h63u_111 {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n  }\n  ._xs-variant_6h63u_111, ._xs-variant_6h63u_111 > :first-child {\n    border-radius: 0;\n    height: 100%;\n    width: 100%;\n    max-height: unset;\n  }\n}\n@media (width >= 641px) and (width <= 720px) {\n  ._xs-variant_6h63u_111 {\n    max-width: 60vw;\n  }\n}\n@media (width >= 720px) and (width <= 960px) {\n  ._xs-variant_6h63u_111 {\n    max-width: 48vw;\n  }\n}\n@media (width >= 960px) and (width <= 1280px) {\n  ._xs-variant_6h63u_111 {\n    max-width: 36vw;\n  }\n}\n@media (width >= 1280px) {\n  ._xs-variant_6h63u_111 {\n    max-width: 32vw;\n  }\n}\n\n._sm-variant_6h63u_152 {\n  /* fullScreenBreakpointMap['sm'] = 640px (breakpoints.mobile) */\n}\n._sm-variant_6h63u_152 > :first-child {\n  max-height: 72vh;\n}\n@media (width <= 640px) {\n  ._sm-variant_6h63u_152 {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n  }\n  ._sm-variant_6h63u_152, ._sm-variant_6h63u_152 > :first-child {\n    border-radius: 0;\n    height: 100%;\n    width: 100%;\n    max-height: unset;\n  }\n}\n@media (width >= 641px) and (width <= 720px) {\n  ._sm-variant_6h63u_152 {\n    max-width: 72vw;\n  }\n}\n@media (width >= 720px) and (width <= 960px) {\n  ._sm-variant_6h63u_152 {\n    max-width: 56vw;\n  }\n}\n@media (width >= 960px) and (width <= 1280px) {\n  ._sm-variant_6h63u_152 {\n    max-width: 44vw;\n  }\n}\n@media (width >= 1280px) {\n  ._sm-variant_6h63u_152 {\n    max-width: 40vw;\n  }\n}\n\n._base-variant_6h63u_193 {\n  /* fullScreenBreakpointMap['base'] = 720px (breakpoints.tablet) */\n}\n._base-variant_6h63u_193 > :first-child {\n  max-height: 84vh;\n}\n@media (width <= 720px) {\n  ._base-variant_6h63u_193 {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n  }\n  ._base-variant_6h63u_193, ._base-variant_6h63u_193 > :first-child {\n    border-radius: 0;\n    height: 100%;\n    width: 100%;\n    max-height: unset;\n  }\n}\n@media (width >= 720px) and (width <= 960px) {\n  ._base-variant_6h63u_193 {\n    max-width: 88vw;\n  }\n}\n@media (width >= 960px) and (width <= 1280px) {\n  ._base-variant_6h63u_193 {\n    max-width: 72vw;\n  }\n}\n@media (width >= 1280px) {\n  ._base-variant_6h63u_193 {\n    max-width: 52vw;\n  }\n}\n\n._lg-variant_6h63u_229 {\n  /* fullScreenBreakpointMap['lg'] = 960px (breakpoints.lgTablet) */\n}\n._lg-variant_6h63u_229 > :first-child {\n  max-height: 96vh;\n}\n@media (width <= 960px) {\n  ._lg-variant_6h63u_229 {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n  }\n  ._lg-variant_6h63u_229, ._lg-variant_6h63u_229 > :first-child {\n    border-radius: 0;\n    height: 100%;\n    width: 100%;\n    max-height: unset;\n  }\n}\n@media (width >= 960px) and (width <= 1280px) {\n  ._lg-variant_6h63u_229 {\n    max-width: 88vw;\n  }\n}\n@media (width >= 1280px) {\n  ._lg-variant_6h63u_229 {\n    max-width: 80vw;\n  }\n}");
-var modalStyles = {"dialog":"_dialog_6h63u_17","fadeIn":"_fadeIn_6h63u_1","mainSection":"_mainSection_6h63u_37","secondaryAppearance":"_secondaryAppearance_6h63u_44","fullBleed":"_fullBleed_6h63u_55","scrollable":"_scrollable_6h63u_60","modal":"_modal_6h63u_65","leftDrawer":"_leftDrawer_6h63u_78","rightDrawer":"_rightDrawer_6h63u_79","xs-variant":"_xs-variant_6h63u_111","sm-variant":"_sm-variant_6h63u_152","base-variant":"_base-variant_6h63u_193","lg-variant":"_lg-variant_6h63u_229"};
+insertStyle("/* Scroll-lock: prevents body scrolling when modal is open.\n   The class persists through AnimatePresence exit animations because\n   it's managed by the ScrollLock component mounted inside AnimatePresence. */\nbody.veeqo-modal-open {\n  overflow: hidden;\n  scrollbar-gutter: stable;\n}\n\n@keyframes _fadeIn_sccv3_1 {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n._dialog_sccv3_17 {\n  padding: 0;\n  border: none;\n  border-radius: var(--sizes-sm);\n  box-shadow: var(--shadows-lg);\n  z-index: var(--layers-modal);\n  /* Targets Card.Surface: the sole direct child of dialog.\n     Wave 3 (Card migration) can update to CSS Module class reference. */\n  /* Targets Card.Footer */\n}\n._dialog_sccv3_17::backdrop {\n  animation: _fadeIn_sccv3_1 0.25s ease forwards;\n  background-color: rgba(55, 66, 77, 0.5);\n  width: 100%;\n  height: 100%;\n}\n._dialog_sccv3_17 > :first-child {\n  display: flex;\n  flex-direction: column;\n}\n._dialog_sccv3_17 > :first-child ._mainSection_sccv3_37 {\n  padding-bottom: var(--sizes-md);\n}\n._dialog_sccv3_17 > :first-child footer {\n  margin-top: 0;\n}\n\n._secondaryAppearance_sccv3_44::backdrop {\n  animation: none;\n  opacity: 0;\n}\n\n/* ---------- MainSection ---------- */\n._mainSection_sccv3_37 {\n  flex: 1;\n  overflow-y: auto;\n}\n\n._mainSection_sccv3_37:not(._fullBleed_sccv3_55) {\n  padding: 0 var(--sizes-md);\n}\n\n/* Scrollable shadow on Card.Footer when content overflows */\n._mainSection_sccv3_37._scrollable_sccv3_60 + footer {\n  box-shadow: 0px 10px 15px 0px var(--colors-neutral-ink-dark);\n}\n\n/* ---------- Modal display mode ---------- */\n._modal_sccv3_65 {\n  min-width: 464px;\n  /* Critical for framer-motion exit animations: prevents HTML dialog from\n     hiding via UA stylesheet when 'open' attribute is removed. */\n}\n._modal_sccv3_65 > :first-child {\n  border: none;\n}\n._modal_sccv3_65:not([open]) {\n  display: block;\n  position: fixed;\n  inset: 0;\n  transform: translate(-50%, -50%);\n}\n\n/* ---------- Side drawer shared base ---------- */\n._leftDrawer_sccv3_81,\n._rightDrawer_sccv3_82 {\n  height: 100%;\n  max-height: 100%;\n  min-width: 320px;\n  width: 400px;\n  margin: 0;\n  position: fixed;\n  transform: none;\n  border-radius: 0;\n  overflow: visible;\n  /* Critical for framer-motion exit animations */\n}\n._leftDrawer_sccv3_81 > :first-child,\n._rightDrawer_sccv3_82 > :first-child {\n  border-radius: 0;\n  height: 100%;\n}\n._leftDrawer_sccv3_81:not([open]),\n._rightDrawer_sccv3_82:not([open]) {\n  display: block;\n}\n\n._leftDrawer_sccv3_81 {\n  inset: 0 auto 0 0;\n}\n\n._rightDrawer_sccv3_82 {\n  inset: 0 0 0 auto;\n}\n\n/* ---------- Size-specific responsive widths ---------- */\n/* Values hardcoded from constants.ts (heightMap, widthMap, fullScreenBreakpointMap) */\n._xs-size_sccv3_114 {\n  /* fullScreenBreakpointMap['xs'] = 640px (breakpoints.mobile) */\n}\n._xs-size_sccv3_114 > :first-child {\n  max-height: 84vh;\n}\n@media (width <= 640px) {\n  ._xs-size_sccv3_114 {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n  }\n  ._xs-size_sccv3_114, ._xs-size_sccv3_114 > :first-child {\n    border-radius: 0;\n    height: 100%;\n    width: 100%;\n    max-height: unset;\n  }\n}\n@media (width >= 641px) and (width <= 720px) {\n  ._xs-size_sccv3_114 {\n    max-width: 60vw;\n  }\n}\n@media (width >= 720px) and (width <= 960px) {\n  ._xs-size_sccv3_114 {\n    max-width: 48vw;\n  }\n}\n@media (width >= 960px) and (width <= 1280px) {\n  ._xs-size_sccv3_114 {\n    max-width: 36vw;\n  }\n}\n@media (width >= 1280px) {\n  ._xs-size_sccv3_114 {\n    max-width: 32vw;\n  }\n}\n\n._sm-size_sccv3_155 {\n  /* fullScreenBreakpointMap['sm'] = 640px (breakpoints.mobile) */\n}\n._sm-size_sccv3_155 > :first-child {\n  max-height: 72vh;\n}\n@media (width <= 640px) {\n  ._sm-size_sccv3_155 {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n  }\n  ._sm-size_sccv3_155, ._sm-size_sccv3_155 > :first-child {\n    border-radius: 0;\n    height: 100%;\n    width: 100%;\n    max-height: unset;\n  }\n}\n@media (width >= 641px) and (width <= 720px) {\n  ._sm-size_sccv3_155 {\n    max-width: 72vw;\n  }\n}\n@media (width >= 720px) and (width <= 960px) {\n  ._sm-size_sccv3_155 {\n    max-width: 56vw;\n  }\n}\n@media (width >= 960px) and (width <= 1280px) {\n  ._sm-size_sccv3_155 {\n    max-width: 44vw;\n  }\n}\n@media (width >= 1280px) {\n  ._sm-size_sccv3_155 {\n    max-width: 40vw;\n  }\n}\n\n._base-size_sccv3_196 {\n  /* fullScreenBreakpointMap['base'] = 720px (breakpoints.tablet) */\n}\n._base-size_sccv3_196 > :first-child {\n  max-height: 84vh;\n}\n@media (width <= 720px) {\n  ._base-size_sccv3_196 {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n  }\n  ._base-size_sccv3_196, ._base-size_sccv3_196 > :first-child {\n    border-radius: 0;\n    height: 100%;\n    width: 100%;\n    max-height: unset;\n  }\n}\n@media (width >= 720px) and (width <= 960px) {\n  ._base-size_sccv3_196 {\n    max-width: 88vw;\n  }\n}\n@media (width >= 960px) and (width <= 1280px) {\n  ._base-size_sccv3_196 {\n    max-width: 72vw;\n  }\n}\n@media (width >= 1280px) {\n  ._base-size_sccv3_196 {\n    max-width: 52vw;\n  }\n}\n\n._lg-size_sccv3_232 {\n  /* fullScreenBreakpointMap['lg'] = 960px (breakpoints.lgTablet) */\n}\n._lg-size_sccv3_232 > :first-child {\n  max-height: 96vh;\n}\n@media (width <= 960px) {\n  ._lg-size_sccv3_232 {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n  }\n  ._lg-size_sccv3_232, ._lg-size_sccv3_232 > :first-child {\n    border-radius: 0;\n    height: 100%;\n    width: 100%;\n    max-height: unset;\n  }\n}\n@media (width >= 960px) and (width <= 1280px) {\n  ._lg-size_sccv3_232 {\n    max-width: 88vw;\n  }\n}\n@media (width >= 1280px) {\n  ._lg-size_sccv3_232 {\n    max-width: 80vw;\n  }\n}");
+var modalStyles = {"dialog":"_dialog_sccv3_17","fadeIn":"_fadeIn_sccv3_1","mainSection":"_mainSection_sccv3_37","secondaryAppearance":"_secondaryAppearance_sccv3_44","fullBleed":"_fullBleed_sccv3_55","scrollable":"_scrollable_sccv3_60","modal":"_modal_sccv3_65","leftDrawer":"_leftDrawer_sccv3_81","rightDrawer":"_rightDrawer_sccv3_82","xs-size":"_xs-size_sccv3_114","sm-size":"_sm-size_sccv3_155","base-size":"_base-size_sccv3_196","lg-size":"_lg-size_sccv3_232"};
 
 export { modalStyles as default };
 //# sourceMappingURL=Modal.module.scss.js.map