@veeqo/ui 14.9.0-beta-1 → 14.9.0

package/dist/components/ToastsLayout/components/Toast.cjs

@@ -1,19 +1,18 @@
 'use strict';
 
 var React = require('react');
-var colors = require('../../../theme/modules/colors.cjs');
-var Stack = require('../../Stack/Stack.cjs');
-var Text = require('../../Text/Text.cjs');
-var BaseContainer = require('../../BaseContainer/BaseContainer.cjs');
-var buildClassnames = require('../../../utils/buildClassnames.cjs');
-var assignCssVars = require('../../../utils/assignCssVars.cjs');
-var Button = require('../../Button/Button.cjs');
 var AttentionIcon = require('../../../icons/design-system/components/AttentionIcon.cjs');
 var CrossIcon = require('../../../icons/design-system/components/CrossIcon.cjs');
 var InfoIcon = require('../../../icons/design-system/components/InfoIcon.cjs');
 var MergeIcon = require('../../../icons/design-system/components/MergeIcon.cjs');
 var SuccessIcon = require('../../../icons/design-system/components/SuccessIcon.cjs');
-var ToastsLayout_module = require('../ToastsLayout.module.scss.cjs');
+var buildClassnames = require('../../../utils/buildClassnames.cjs');
+require('uid/secure');
+var assignCssVars = require('../../../utils/assignCssVars.cjs');
+var Action = require('../../Action/Action.cjs');
+var FlexRow = require('../../Flex/FlexRow/FlexRow.cjs');
+var Text = require('../../Text/Text.cjs');
+var Toast_module = require('./Toast.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -21,19 +20,15 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 const toastTypes = {
     info: {
-        accentColor: colors.colors.brand.blue.base,
         icon: React__default.default.createElement(InfoIcon.ReactComponent, null),
     },
     success: {
-        accentColor: colors.colors.secondary.green.base,
         icon: React__default.default.createElement(SuccessIcon.ReactComponent, null),
     },
     error: {
-        accentColor: colors.colors.secondary.red.base,
         icon: React__default.default.createElement(AttentionIcon.ReactComponent, null),
     },
     merge: {
-        accentColor: colors.colors.secondary.purple.base,
         icon: React__default.default.createElement(MergeIcon.ReactComponent, null),
     },
 };
@@ -42,21 +37,31 @@ const generateClassNames = (prefix) => ({
     icon: prefix ? `${prefix}-toast-icon` : undefined,
     closeIcon: prefix ? `${prefix}-toast-close-icon` : undefined,
 });
+/**
+ * A dismissible notification bar with a coloured icon, message text, and optional call-to-action.
+ * Rendered internally by `ToastsLayout` — not intended for standalone use.
+ */
 const Toast = React__default.default.forwardRef(({ className, e2eClassName, type, iconSlot, text, last, minWidth, cta, onClose }, ref) => {
     const classNames = generateClassNames(className);
     const e2eClassNames = generateClassNames(e2eClassName);
-    const toastVars = assignCssVars.assignCssVars({
-        toastMinWidth: typeof minWidth === 'number' ? `${minWidth}px` : minWidth,
-        toastExitStart: last ? 'translateY(0)' : 'translateX(0)',
-        toastExitEnd: last ? 'translateY(12px)' : 'translateX(12px)',
-        iconColor: toastTypes[type].accentColor,
-    });
-    return (React__default.default.createElement(Stack.Stack, { ref: ref, className: buildClassnames.buildClassnames([ToastsLayout_module.toast, classNames === null || classNames === void 0 ? void 0 : classNames.container, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.container]), style: toastVars, direction: "horizontal", alignY: "center" },
-        React__default.default.createElement(BaseContainer.BaseContainer, { className: buildClassnames.buildClassnames([ToastsLayout_module.iconWrap, classNames === null || classNames === void 0 ? void 0 : classNames.icon, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.icon]) }, iconSlot !== null && iconSlot !== void 0 ? iconSlot : toastTypes[type].icon),
-        React__default.default.createElement(Stack.Stack, { className: ToastsLayout_module.contentStack, direction: "horizontal", alignY: "center", alignX: "between" },
-            React__default.default.createElement(Text.Text, { variant: "body", className: ToastsLayout_module.toastText }, text),
+    return (React__default.default.createElement(FlexRow.FlexRow, { ref: ref, alignItems: "center", flexWrap: "nowrap", className: buildClassnames.buildClassnames([
+            Toast_module['toast-container'],
+            Toast_module[`${type}-variant`],
+            last && Toast_module.last,
+            classNames.container,
+            e2eClassNames.container,
+        ]), justifyContent: "space-between", style: assignCssVars.assignCssVars({ minWidth }), gap: "base" },
+        React__default.default.createElement(FlexRow.FlexRow, { justifyContent: "center", alignItems: "center", flexWrap: "nowrap", className: buildClassnames.buildClassnames([classNames.icon, e2eClassNames.icon, Toast_module['icon-wrap']]) }, iconSlot !== null && iconSlot !== void 0 ? iconSlot : toastTypes[type].icon),
+        React__default.default.createElement(FlexRow.FlexRow, { alignItems: "center", justifyContent: "space-between", flexGrow: 1, flexWrap: "nowrap" },
+            React__default.default.createElement(Text.Text, { variant: "subheadingMedium", className: Toast_module.text }, text),
             cta),
-        React__default.default.createElement(Button.Button, { variant: "flat", iconSlot: React__default.default.createElement(CrossIcon.ReactComponent, { color: "white" }), onClick: onClose, "aria-label": "Close" })));
+        React__default.default.createElement(Action.Action, { variant: "flat", 
+            // Always white on dark toast background
+            iconSlot: React__default.default.createElement(CrossIcon.ReactComponent, { color: "white" }), onClick: onClose, "aria-label": "Close", className: buildClassnames.buildClassnames([
+                classNames.closeIcon,
+                e2eClassNames.closeIcon,
+                Toast_module.closeAction,
+            ]) })));
 });
 Toast.displayName = 'Toast';
 

package/dist/components/ToastsLayout/components/Toast.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.cjs","sources":["../../../../src/components/ToastsLayout/components/Toast.tsx"],"sourcesContent":["import React from 'react';\nimport { colors } from '../../../theme/modules/colors';\nimport { Stack } from '../../Stack';\nimport { Text } from '../../Text';\nimport { BaseContainer } from '../../BaseContainer';\nimport { ToastType, ToastPropTypes, ClassNamesReturnPayload } from '../types';\nimport { buildClassnames } from '../../../utils/buildClassnames';\nimport { assignCssVars } from '../../../utils/assignCssVars';\nimport { Button } from '../../Button';\nimport { SuccessIcon, InfoIcon, AttentionIcon, MergeIcon, CrossIcon } from '../../../icons';\nimport styles from '../ToastsLayout.module.scss';\n\nconst toastTypes: ToastType = {\n  info: {\n    accentColor: colors.brand.blue.base,\n    icon: <InfoIcon />,\n  },\n  success: {\n    accentColor: colors.secondary.green.base,\n    icon: <SuccessIcon />,\n  },\n  error: {\n    accentColor: colors.secondary.red.base,\n    icon: <AttentionIcon />,\n  },\n  merge: {\n    accentColor: colors.secondary.purple.base,\n    icon: <MergeIcon />,\n  },\n};\n\nconst generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n  container: prefix ? `${prefix}-toast-container` : undefined,\n  icon: prefix ? `${prefix}-toast-icon` : undefined,\n  closeIcon: prefix ? `${prefix}-toast-close-icon` : undefined,\n});\n\nexport const Toast = React.forwardRef<HTMLDivElement, ToastPropTypes>(\n  ({ className, e2eClassName, type, iconSlot, text, last, minWidth, cta, onClose }, ref) => {\n    const classNames = generateClassNames(className);\n    const e2eClassNames = generateClassNames(e2eClassName);\n\n    const toastVars = assignCssVars({\n      toastMinWidth: typeof minWidth === 'number' ? `${minWidth}px` : minWidth,\n      toastExitStart: last ? 'translateY(0)' : 'translateX(0)',\n      toastExitEnd: last ? 'translateY(12px)' : 'translateX(12px)',\n      iconColor: toastTypes[type].accentColor,\n    });\n\n    return (\n      <Stack\n        ref={ref}\n        className={buildClassnames([styles.toast, classNames?.container, e2eClassNames?.container])}\n        style={toastVars}\n        direction=\"horizontal\"\n        alignY=\"center\"\n      >\n        <BaseContainer\n          className={buildClassnames([styles.iconWrap, classNames?.icon, e2eClassNames?.icon])}\n        >\n          {iconSlot ?? toastTypes[type].icon}\n        </BaseContainer>\n        <Stack className={styles.contentStack} direction=\"horizontal\" alignY=\"center\" alignX=\"between\">\n          <Text variant=\"body\" className={styles.toastText}>{text}</Text>\n          {cta}\n        </Stack>\n        <Button\n          variant=\"flat\"\n          iconSlot={<CrossIcon color=\"white\" />}\n          onClick={onClose}\n          aria-label=\"Close\"\n        />\n      </Stack>\n    );\n  },\n);\n\nToast.displayName = 'Toast';\n"],"names":["colors","React","InfoIcon","SuccessIcon","AttentionIcon","MergeIcon","assignCssVars","Stack","buildClassnames","styles","BaseContainer","Text","Button","CrossIcon"],"mappings":"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"}
+{"version":3,"file":"Toast.cjs","sources":["../../../../src/components/ToastsLayout/components/Toast.tsx"],"sourcesContent":["import React from 'react';\nimport { AttentionIcon, CrossIcon, InfoIcon, MergeIcon, SuccessIcon } from '../../../icons';\nimport { assignCssVars } from '../../../utils';\nimport { buildClassnames } from '../../../utils/buildClassnames';\nimport { Action } from '../../Action';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { Text } from '../../Text';\nimport { ClassNamesReturnPayload, ToastPropTypes, ToastType } from '../types';\nimport styles from './Toast.module.scss';\n\nconst toastTypes: ToastType = {\n  info: {\n    icon: <InfoIcon />,\n  },\n  success: {\n    icon: <SuccessIcon />,\n  },\n  error: {\n    icon: <AttentionIcon />,\n  },\n  merge: {\n    icon: <MergeIcon />,\n  },\n};\n\nconst generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n  container: prefix ? `${prefix}-toast-container` : undefined,\n  icon: prefix ? `${prefix}-toast-icon` : undefined,\n  closeIcon: prefix ? `${prefix}-toast-close-icon` : undefined,\n});\n\n/**\n * A dismissible notification bar with a coloured icon, message text, and optional call-to-action.\n * Rendered internally by `ToastsLayout` — not intended for standalone use.\n */\nexport const Toast = React.forwardRef<HTMLDivElement, ToastPropTypes>(\n  ({ className, e2eClassName, type, iconSlot, text, last, minWidth, cta, onClose }, ref) => {\n    const classNames = generateClassNames(className);\n    const e2eClassNames = generateClassNames(e2eClassName);\n\n    return (\n      <FlexRow\n        ref={ref}\n        alignItems=\"center\"\n        flexWrap=\"nowrap\"\n        className={buildClassnames([\n          styles['toast-container'],\n          styles[`${type}-variant`],\n          last && styles.last,\n          classNames.container,\n          e2eClassNames.container,\n        ])}\n        justifyContent=\"space-between\"\n        style={assignCssVars({ minWidth })}\n        gap=\"base\"\n      >\n        <FlexRow\n          justifyContent=\"center\"\n          alignItems=\"center\"\n          flexWrap=\"nowrap\"\n          className={buildClassnames([classNames.icon, e2eClassNames.icon, styles['icon-wrap']])}\n        >\n          {iconSlot ?? toastTypes[type].icon}\n        </FlexRow>\n        <FlexRow alignItems=\"center\" justifyContent=\"space-between\" flexGrow={1} flexWrap=\"nowrap\">\n          <Text variant=\"subheadingMedium\" className={styles.text}>\n            {text}\n          </Text>\n          {cta}\n        </FlexRow>\n        <Action\n          variant=\"flat\"\n          // Always white on dark toast background\n          iconSlot={<CrossIcon color=\"white\" />}\n          onClick={onClose}\n          aria-label=\"Close\"\n          className={buildClassnames([\n            classNames.closeIcon,\n            e2eClassNames.closeIcon,\n            styles.closeAction,\n          ])}\n        />\n      </FlexRow>\n    );\n  },\n);\n\nToast.displayName = 'Toast';\n"],"names":["React","InfoIcon","SuccessIcon","AttentionIcon","MergeIcon","FlexRow","buildClassnames","styles","assignCssVars","Text","Action","CrossIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;AAUA,MAAM,UAAU,GAAc;AAC5B,IAAA,IAAI,EAAE;QACJ,IAAI,EAAEA,sBAAA,CAAA,aAAA,CAACC,uBAAQ,EAAA,IAAA,CAAG;AACnB,KAAA;AACD,IAAA,OAAO,EAAE;QACP,IAAI,EAAED,sBAAA,CAAA,aAAA,CAACE,0BAAW,EAAA,IAAA,CAAG;AACtB,KAAA;AACD,IAAA,KAAK,EAAE;QACL,IAAI,EAAEF,sBAAA,CAAA,aAAA,CAACG,4BAAa,EAAA,IAAA,CAAG;AACxB,KAAA;AACD,IAAA,KAAK,EAAE;QACL,IAAI,EAAEH,sBAAA,CAAA,aAAA,CAACI,wBAAS,EAAA,IAAA,CAAG;AACpB,KAAA;CACF;AAED,MAAM,kBAAkB,GAAG,CAAC,MAAe,MAA+B;IACxE,SAAS,EAAE,MAAM,GAAG,CAAA,EAAG,MAAM,CAAA,gBAAA,CAAkB,GAAG,SAAS;IAC3D,IAAI,EAAE,MAAM,GAAG,CAAA,EAAG,MAAM,CAAA,WAAA,CAAa,GAAG,SAAS;IACjD,SAAS,EAAE,MAAM,GAAG,CAAA,EAAG,MAAM,CAAA,iBAAA,CAAmB,GAAG,SAAS;AAC7D,CAAA,CAAC;AAEF;;;AAGG;AACI,MAAM,KAAK,GAAGJ,sBAAK,CAAC,UAAU,CACnC,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,OAAO,EAAE,EAAE,GAAG,KAAI;AACvF,IAAA,MAAM,UAAU,GAAG,kBAAkB,CAAC,SAAS,CAAC;AAChD,IAAA,MAAM,aAAa,GAAG,kBAAkB,CAAC,YAAY,CAAC;AAEtD,IAAA,QACEA,sBAAA,CAAA,aAAA,CAACK,eAAO,IACN,GAAG,EAAE,GAAG,EACR,UAAU,EAAC,QAAQ,EACnB,QAAQ,EAAC,QAAQ,EACjB,SAAS,EAAEC,+BAAe,CAAC;YACzBC,YAAM,CAAC,iBAAiB,CAAC;AACzB,YAAAA,YAAM,CAAC,CAAA,EAAG,IAAI,CAAA,QAAA,CAAU,CAAC;YACzB,IAAI,IAAIA,YAAM,CAAC,IAAI;AACnB,YAAA,UAAU,CAAC,SAAS;AACpB,YAAA,aAAa,CAAC,SAAS;AACxB,SAAA,CAAC,EACF,cAAc,EAAC,eAAe,EAC9B,KAAK,EAAEC,2BAAa,CAAC,EAAE,QAAQ,EAAE,CAAC,EAClC,GAAG,EAAC,MAAM,EAAA;QAEVR,sBAAA,CAAA,aAAA,CAACK,eAAO,IACN,cAAc,EAAC,QAAQ,EACvB,UAAU,EAAC,QAAQ,EACnB,QAAQ,EAAC,QAAQ,EACjB,SAAS,EAAEC,+BAAe,CAAC,CAAC,UAAU,CAAC,IAAI,EAAE,aAAa,CAAC,IAAI,EAAEC,YAAM,CAAC,WAAW,CAAC,CAAC,CAAC,EAAA,EAErF,QAAQ,aAAR,QAAQ,KAAA,MAAA,GAAR,QAAQ,GAAI,UAAU,CAAC,IAAI,CAAC,CAAC,IAAI,CAC1B;AACV,QAAAP,sBAAA,CAAA,aAAA,CAACK,eAAO,EAAA,EAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,eAAe,EAAC,QAAQ,EAAE,CAAC,EAAE,QAAQ,EAAC,QAAQ,EAAA;AACxF,YAAAL,sBAAA,CAAA,aAAA,CAACS,SAAI,EAAA,EAAC,OAAO,EAAC,kBAAkB,EAAC,SAAS,EAAEF,YAAM,CAAC,IAAI,EAAA,EACpD,IAAI,CACA;AACN,YAAA,GAAG,CACI;AACV,QAAAP,sBAAA,CAAA,aAAA,CAACU,aAAM,EAAA,EACL,OAAO,EAAC,MAAM;;AAEd,YAAA,QAAQ,EAAEV,sBAAA,CAAA,aAAA,CAACW,wBAAS,IAAC,KAAK,EAAC,OAAO,EAAA,CAAG,EACrC,OAAO,EAAE,OAAO,EAAA,YAAA,EACL,OAAO,EAClB,SAAS,EAAEL,+BAAe,CAAC;AACzB,gBAAA,UAAU,CAAC,SAAS;AACpB,gBAAA,aAAa,CAAC,SAAS;AACvB,gBAAAC,YAAM,CAAC,WAAW;aACnB,CAAC,EAAA,CACF,CACM;AAEd,CAAC;AAGH,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}

package/dist/components/ToastsLayout/components/Toast.d.ts

@@ -1,8 +1,12 @@
 import React from 'react';
+/**
+ * A dismissible notification bar with a coloured icon, message text, and optional call-to-action.
+ * Rendered internally by `ToastsLayout` — not intended for standalone use.
+ */
 export declare const Toast: React.ForwardRefExoticComponent<Omit<import("../types").Notification, "key"> & {
     className?: string | undefined;
     e2eClassName?: string | undefined;
     last: boolean;
-    minWidth: string | number;
+    minWidth?: string | undefined;
     onClose: () => void;
 } & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ToastsLayout/components/Toast.js

@@ -1,33 +1,28 @@
 import React__default from 'react';
-import { colors } from '../../../theme/modules/colors.js';
-import { Stack } from '../../Stack/Stack.js';
-import { Text } from '../../Text/Text.js';
-import { BaseContainer } from '../../BaseContainer/BaseContainer.js';
-import { buildClassnames } from '../../../utils/buildClassnames.js';
-import { assignCssVars } from '../../../utils/assignCssVars.js';
-import { Button } from '../../Button/Button.js';
 import { ReactComponent as AttentionIcon } from '../../../icons/design-system/components/AttentionIcon.js';
 import { ReactComponent as CrossIcon } from '../../../icons/design-system/components/CrossIcon.js';
 import { ReactComponent as InfoIcon } from '../../../icons/design-system/components/InfoIcon.js';
 import { ReactComponent as MergeIcon } from '../../../icons/design-system/components/MergeIcon.js';
 import { ReactComponent as SuccessIcon } from '../../../icons/design-system/components/SuccessIcon.js';
-import styles from '../ToastsLayout.module.scss.js';
+import { buildClassnames } from '../../../utils/buildClassnames.js';
+import 'uid/secure';
+import { assignCssVars } from '../../../utils/assignCssVars.js';
+import { Action } from '../../Action/Action.js';
+import { FlexRow } from '../../Flex/FlexRow/FlexRow.js';
+import { Text } from '../../Text/Text.js';
+import toastStyles from './Toast.module.scss.js';
 
 const toastTypes = {
     info: {
-        accentColor: colors.brand.blue.base,
         icon: React__default.createElement(InfoIcon, null),
     },
     success: {
-        accentColor: colors.secondary.green.base,
         icon: React__default.createElement(SuccessIcon, null),
     },
     error: {
-        accentColor: colors.secondary.red.base,
         icon: React__default.createElement(AttentionIcon, null),
     },
     merge: {
-        accentColor: colors.secondary.purple.base,
         icon: React__default.createElement(MergeIcon, null),
     },
 };
@@ -36,21 +31,31 @@ const generateClassNames = (prefix) => ({
     icon: prefix ? `${prefix}-toast-icon` : undefined,
     closeIcon: prefix ? `${prefix}-toast-close-icon` : undefined,
 });
+/**
+ * A dismissible notification bar with a coloured icon, message text, and optional call-to-action.
+ * Rendered internally by `ToastsLayout` — not intended for standalone use.
+ */
 const Toast = React__default.forwardRef(({ className, e2eClassName, type, iconSlot, text, last, minWidth, cta, onClose }, ref) => {
     const classNames = generateClassNames(className);
     const e2eClassNames = generateClassNames(e2eClassName);
-    const toastVars = assignCssVars({
-        toastMinWidth: typeof minWidth === 'number' ? `${minWidth}px` : minWidth,
-        toastExitStart: last ? 'translateY(0)' : 'translateX(0)',
-        toastExitEnd: last ? 'translateY(12px)' : 'translateX(12px)',
-        iconColor: toastTypes[type].accentColor,
-    });
-    return (React__default.createElement(Stack, { ref: ref, className: buildClassnames([styles.toast, classNames === null || classNames === void 0 ? void 0 : classNames.container, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.container]), style: toastVars, direction: "horizontal", alignY: "center" },
-        React__default.createElement(BaseContainer, { className: buildClassnames([styles.iconWrap, classNames === null || classNames === void 0 ? void 0 : classNames.icon, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.icon]) }, iconSlot !== null && iconSlot !== void 0 ? iconSlot : toastTypes[type].icon),
-        React__default.createElement(Stack, { className: styles.contentStack, direction: "horizontal", alignY: "center", alignX: "between" },
-            React__default.createElement(Text, { variant: "body", className: styles.toastText }, text),
+    return (React__default.createElement(FlexRow, { ref: ref, alignItems: "center", flexWrap: "nowrap", className: buildClassnames([
+            toastStyles['toast-container'],
+            toastStyles[`${type}-variant`],
+            last && toastStyles.last,
+            classNames.container,
+            e2eClassNames.container,
+        ]), justifyContent: "space-between", style: assignCssVars({ minWidth }), gap: "base" },
+        React__default.createElement(FlexRow, { justifyContent: "center", alignItems: "center", flexWrap: "nowrap", className: buildClassnames([classNames.icon, e2eClassNames.icon, toastStyles['icon-wrap']]) }, iconSlot !== null && iconSlot !== void 0 ? iconSlot : toastTypes[type].icon),
+        React__default.createElement(FlexRow, { alignItems: "center", justifyContent: "space-between", flexGrow: 1, flexWrap: "nowrap" },
+            React__default.createElement(Text, { variant: "subheadingMedium", className: toastStyles.text }, text),
             cta),
-        React__default.createElement(Button, { variant: "flat", iconSlot: React__default.createElement(CrossIcon, { color: "white" }), onClick: onClose, "aria-label": "Close" })));
+        React__default.createElement(Action, { variant: "flat", 
+            // Always white on dark toast background
+            iconSlot: React__default.createElement(CrossIcon, { color: "white" }), onClick: onClose, "aria-label": "Close", className: buildClassnames([
+                classNames.closeIcon,
+                e2eClassNames.closeIcon,
+                toastStyles.closeAction,
+            ]) })));
 });
 Toast.displayName = 'Toast';
 

package/dist/components/ToastsLayout/components/Toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","sources":["../../../../src/components/ToastsLayout/components/Toast.tsx"],"sourcesContent":["import React from 'react';\nimport { colors } from '../../../theme/modules/colors';\nimport { Stack } from '../../Stack';\nimport { Text } from '../../Text';\nimport { BaseContainer } from '../../BaseContainer';\nimport { ToastType, ToastPropTypes, ClassNamesReturnPayload } from '../types';\nimport { buildClassnames } from '../../../utils/buildClassnames';\nimport { assignCssVars } from '../../../utils/assignCssVars';\nimport { Button } from '../../Button';\nimport { SuccessIcon, InfoIcon, AttentionIcon, MergeIcon, CrossIcon } from '../../../icons';\nimport styles from '../ToastsLayout.module.scss';\n\nconst toastTypes: ToastType = {\n  info: {\n    accentColor: colors.brand.blue.base,\n    icon: <InfoIcon />,\n  },\n  success: {\n    accentColor: colors.secondary.green.base,\n    icon: <SuccessIcon />,\n  },\n  error: {\n    accentColor: colors.secondary.red.base,\n    icon: <AttentionIcon />,\n  },\n  merge: {\n    accentColor: colors.secondary.purple.base,\n    icon: <MergeIcon />,\n  },\n};\n\nconst generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n  container: prefix ? `${prefix}-toast-container` : undefined,\n  icon: prefix ? `${prefix}-toast-icon` : undefined,\n  closeIcon: prefix ? `${prefix}-toast-close-icon` : undefined,\n});\n\nexport const Toast = React.forwardRef<HTMLDivElement, ToastPropTypes>(\n  ({ className, e2eClassName, type, iconSlot, text, last, minWidth, cta, onClose }, ref) => {\n    const classNames = generateClassNames(className);\n    const e2eClassNames = generateClassNames(e2eClassName);\n\n    const toastVars = assignCssVars({\n      toastMinWidth: typeof minWidth === 'number' ? `${minWidth}px` : minWidth,\n      toastExitStart: last ? 'translateY(0)' : 'translateX(0)',\n      toastExitEnd: last ? 'translateY(12px)' : 'translateX(12px)',\n      iconColor: toastTypes[type].accentColor,\n    });\n\n    return (\n      <Stack\n        ref={ref}\n        className={buildClassnames([styles.toast, classNames?.container, e2eClassNames?.container])}\n        style={toastVars}\n        direction=\"horizontal\"\n        alignY=\"center\"\n      >\n        <BaseContainer\n          className={buildClassnames([styles.iconWrap, classNames?.icon, e2eClassNames?.icon])}\n        >\n          {iconSlot ?? toastTypes[type].icon}\n        </BaseContainer>\n        <Stack className={styles.contentStack} direction=\"horizontal\" alignY=\"center\" alignX=\"between\">\n          <Text variant=\"body\" className={styles.toastText}>{text}</Text>\n          {cta}\n        </Stack>\n        <Button\n          variant=\"flat\"\n          iconSlot={<CrossIcon color=\"white\" />}\n          onClick={onClose}\n          aria-label=\"Close\"\n        />\n      </Stack>\n    );\n  },\n);\n\nToast.displayName = 'Toast';\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"Toast.js","sources":["../../../../src/components/ToastsLayout/components/Toast.tsx"],"sourcesContent":["import React from 'react';\nimport { AttentionIcon, CrossIcon, InfoIcon, MergeIcon, SuccessIcon } from '../../../icons';\nimport { assignCssVars } from '../../../utils';\nimport { buildClassnames } from '../../../utils/buildClassnames';\nimport { Action } from '../../Action';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { Text } from '../../Text';\nimport { ClassNamesReturnPayload, ToastPropTypes, ToastType } from '../types';\nimport styles from './Toast.module.scss';\n\nconst toastTypes: ToastType = {\n  info: {\n    icon: <InfoIcon />,\n  },\n  success: {\n    icon: <SuccessIcon />,\n  },\n  error: {\n    icon: <AttentionIcon />,\n  },\n  merge: {\n    icon: <MergeIcon />,\n  },\n};\n\nconst generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n  container: prefix ? `${prefix}-toast-container` : undefined,\n  icon: prefix ? `${prefix}-toast-icon` : undefined,\n  closeIcon: prefix ? `${prefix}-toast-close-icon` : undefined,\n});\n\n/**\n * A dismissible notification bar with a coloured icon, message text, and optional call-to-action.\n * Rendered internally by `ToastsLayout` — not intended for standalone use.\n */\nexport const Toast = React.forwardRef<HTMLDivElement, ToastPropTypes>(\n  ({ className, e2eClassName, type, iconSlot, text, last, minWidth, cta, onClose }, ref) => {\n    const classNames = generateClassNames(className);\n    const e2eClassNames = generateClassNames(e2eClassName);\n\n    return (\n      <FlexRow\n        ref={ref}\n        alignItems=\"center\"\n        flexWrap=\"nowrap\"\n        className={buildClassnames([\n          styles['toast-container'],\n          styles[`${type}-variant`],\n          last && styles.last,\n          classNames.container,\n          e2eClassNames.container,\n        ])}\n        justifyContent=\"space-between\"\n        style={assignCssVars({ minWidth })}\n        gap=\"base\"\n      >\n        <FlexRow\n          justifyContent=\"center\"\n          alignItems=\"center\"\n          flexWrap=\"nowrap\"\n          className={buildClassnames([classNames.icon, e2eClassNames.icon, styles['icon-wrap']])}\n        >\n          {iconSlot ?? toastTypes[type].icon}\n        </FlexRow>\n        <FlexRow alignItems=\"center\" justifyContent=\"space-between\" flexGrow={1} flexWrap=\"nowrap\">\n          <Text variant=\"subheadingMedium\" className={styles.text}>\n            {text}\n          </Text>\n          {cta}\n        </FlexRow>\n        <Action\n          variant=\"flat\"\n          // Always white on dark toast background\n          iconSlot={<CrossIcon color=\"white\" />}\n          onClick={onClose}\n          aria-label=\"Close\"\n          className={buildClassnames([\n            classNames.closeIcon,\n            e2eClassNames.closeIcon,\n            styles.closeAction,\n          ])}\n        />\n      </FlexRow>\n    );\n  },\n);\n\nToast.displayName = 'Toast';\n"],"names":["React","styles"],"mappings":"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"}

package/dist/components/ToastsLayout/components/Toast.module.scss.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("@charset \"UTF-8\";\n._toast-container_1wwfi_2 {\n  --toast-local-z-index: 40;\n  background-color: var(--colors-neutral-ink-dark);\n  padding: var(--sizes-3);\n  box-shadow: var(--shadows-md);\n  border-radius: var(--radius-base);\n  pointer-events: auto;\n  z-index: var(--toast-local-z-index);\n  min-width: min(var(--min-width, 50vw), 80vw);\n  max-width: 80vw;\n  transition: transform 500ms ease, opacity 500ms ease;\n}\n._toast-container_1wwfi_2._merge-variant_1wwfi_14 {\n  --variant-color: var(--colors-secondary-purple-base);\n}\n._toast-container_1wwfi_2._info-variant_1wwfi_17 {\n  --variant-color: var(--colors-secondary-blue-base);\n}\n._toast-container_1wwfi_2._error-variant_1wwfi_20 {\n  --variant-color: var(--colors-secondary-red-base);\n}\n._toast-container_1wwfi_2._success-variant_1wwfi_23 {\n  --variant-color: var(--colors-secondary-green-base);\n}\n\n/* Transition classes — co-located with .last so compound selectors hash correctly */\n._enter_1wwfi_28 {\n  transform: translateY(var(--sizes-3));\n  opacity: 0;\n}\n\n._enterActive_1wwfi_33 {\n  transform: translateY(0);\n  opacity: 1;\n}\n\n._exit_1wwfi_38 {\n  transform: translateX(0);\n  opacity: 1;\n}\n\n/*\n * .last modifier — applied to the bottom-most (oldest visible) toast.\n * Non-last toasts exit by sliding right (translateX) so the stack above\n * them collapses gracefully into the freed space. The last toast exits\n * by sliding down (translateY) off the bottom of the viewport since\n * there's nothing below it to displace.\n */\n._last_1wwfi_27._exit_1wwfi_38 {\n  transform: translateY(0);\n  opacity: 1;\n}\n\n._exitActive_1wwfi_55 {\n  transform: translateX(var(--sizes-3));\n  opacity: 0;\n}\n\n._last_1wwfi_27._exitActive_1wwfi_55 {\n  transform: translateY(var(--sizes-3));\n  opacity: 0;\n}\n\n._icon-wrap_1wwfi_65 {\n  flex-shrink: 0;\n  height: var(--sizes-10);\n  width: var(--sizes-10);\n  color: white;\n  border-radius: var(--radius-base);\n  background-color: var(--variant-color);\n}\n._icon-wrap_1wwfi_65 svg {\n  width: var(--sizes-md);\n  height: var(--sizes-md);\n}\n\n._text_1wwfi_78 {\n  color: white;\n}\n\n._closeAction_1wwfi_82 {\n  padding-left: var(--sizes-md);\n}\n._closeAction_1wwfi_82 svg {\n  width: var(--sizes-md);\n  height: var(--sizes-md);\n}\n\n._toast-container_1wwfi_2 ._closeAction_1wwfi_82:hover,\n._toast-container_1wwfi_2 ._closeAction_1wwfi_82:active,\n._toast-container_1wwfi_2 ._closeAction_1wwfi_82:focus-visible {\n  background-color: color-mix(in srgb, white 15%, var(--colors-neutral-ink-dark));\n}");
+var toastStyles = {"toast-container":"_toast-container_1wwfi_2","merge-variant":"_merge-variant_1wwfi_14","info-variant":"_info-variant_1wwfi_17","error-variant":"_error-variant_1wwfi_20","success-variant":"_success-variant_1wwfi_23","enter":"_enter_1wwfi_28","enterActive":"_enterActive_1wwfi_33","exit":"_exit_1wwfi_38","last":"_last_1wwfi_27","exitActive":"_exitActive_1wwfi_55","icon-wrap":"_icon-wrap_1wwfi_65","text":"_text_1wwfi_78","closeAction":"_closeAction_1wwfi_82"};
+
+module.exports = toastStyles;
+//# sourceMappingURL=Toast.module.scss.cjs.map

package/dist/components/ToastsLayout/components/Toast.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.module.scss.cjs","sources":["../../../../src/components/ToastsLayout/components/Toast.module.scss"],"sourcesContent":[".toast-container {\n  --toast-local-z-index: 40;\n\n  background-color: var(--colors-neutral-ink-dark);\n  padding: var(--sizes-3);\n  box-shadow: var(--shadows-md);\n  border-radius: var(--radius-base);\n  pointer-events: auto;\n  z-index: var(--toast-local-z-index);\n  min-width: min(var(--min-width, 50vw), 80vw);\n  max-width: 80vw;\n  transition:\n    transform 500ms ease,\n    opacity 500ms ease;\n\n  &.merge-variant {\n    --variant-color: var(--colors-secondary-purple-base);\n  }\n  &.info-variant {\n    --variant-color: var(--colors-secondary-blue-base);\n  }\n  &.error-variant {\n    --variant-color: var(--colors-secondary-red-base);\n  }\n  &.success-variant {\n    --variant-color: var(--colors-secondary-green-base);\n  }\n}\n\n/* Transition classes — co-located with .last so compound selectors hash correctly */\n.enter {\n  transform: translateY(var(--sizes-3));\n  opacity: 0;\n}\n\n.enterActive {\n  transform: translateY(0);\n  opacity: 1;\n}\n\n.exit {\n  transform: translateX(0);\n  opacity: 1;\n}\n\n/*\n * .last modifier — applied to the bottom-most (oldest visible) toast.\n * Non-last toasts exit by sliding right (translateX) so the stack above\n * them collapses gracefully into the freed space. The last toast exits\n * by sliding down (translateY) off the bottom of the viewport since\n * there's nothing below it to displace.\n */\n.last.exit {\n  transform: translateY(0);\n  opacity: 1;\n}\n\n.exitActive {\n  transform: translateX(var(--sizes-3));\n  opacity: 0;\n}\n\n.last.exitActive {\n  transform: translateY(var(--sizes-3));\n  opacity: 0;\n}\n\n.icon-wrap {\n  flex-shrink: 0;\n  height: var(--sizes-10);\n  width: var(--sizes-10);\n  color: white;\n  border-radius: var(--radius-base);\n  background-color: var(--variant-color);\n\n  svg {\n    width: var(--sizes-md);\n    height: var(--sizes-md);\n  }\n}\n.text {\n  color: white;\n}\n.closeAction {\n  padding-left: var(--sizes-md);\n\n  svg {\n    width: var(--sizes-md);\n    height: var(--sizes-md);\n  }\n}\n\n.toast-container .closeAction:hover,\n.toast-container .closeAction:active,\n.toast-container .closeAction:focus-visible {\n  background-color: color-mix(in srgb, white 15%, var(--colors-neutral-ink-dark));\n}\n"],"names":[],"mappings":";;;;AAAA,eAAA,CAAA,q/EAAA;AACE,kBAAA,CAAA,iBAAA,CAAA,0BAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,aAAA,CAAA,uBAAA;;;;"}

package/dist/components/ToastsLayout/components/Toast.module.scss.js

@@ -0,0 +1,7 @@
+import insertStyle from '../../../_virtual/____insertStyle.js';
+
+insertStyle("@charset \"UTF-8\";\n._toast-container_1wwfi_2 {\n  --toast-local-z-index: 40;\n  background-color: var(--colors-neutral-ink-dark);\n  padding: var(--sizes-3);\n  box-shadow: var(--shadows-md);\n  border-radius: var(--radius-base);\n  pointer-events: auto;\n  z-index: var(--toast-local-z-index);\n  min-width: min(var(--min-width, 50vw), 80vw);\n  max-width: 80vw;\n  transition: transform 500ms ease, opacity 500ms ease;\n}\n._toast-container_1wwfi_2._merge-variant_1wwfi_14 {\n  --variant-color: var(--colors-secondary-purple-base);\n}\n._toast-container_1wwfi_2._info-variant_1wwfi_17 {\n  --variant-color: var(--colors-secondary-blue-base);\n}\n._toast-container_1wwfi_2._error-variant_1wwfi_20 {\n  --variant-color: var(--colors-secondary-red-base);\n}\n._toast-container_1wwfi_2._success-variant_1wwfi_23 {\n  --variant-color: var(--colors-secondary-green-base);\n}\n\n/* Transition classes — co-located with .last so compound selectors hash correctly */\n._enter_1wwfi_28 {\n  transform: translateY(var(--sizes-3));\n  opacity: 0;\n}\n\n._enterActive_1wwfi_33 {\n  transform: translateY(0);\n  opacity: 1;\n}\n\n._exit_1wwfi_38 {\n  transform: translateX(0);\n  opacity: 1;\n}\n\n/*\n * .last modifier — applied to the bottom-most (oldest visible) toast.\n * Non-last toasts exit by sliding right (translateX) so the stack above\n * them collapses gracefully into the freed space. The last toast exits\n * by sliding down (translateY) off the bottom of the viewport since\n * there's nothing below it to displace.\n */\n._last_1wwfi_27._exit_1wwfi_38 {\n  transform: translateY(0);\n  opacity: 1;\n}\n\n._exitActive_1wwfi_55 {\n  transform: translateX(var(--sizes-3));\n  opacity: 0;\n}\n\n._last_1wwfi_27._exitActive_1wwfi_55 {\n  transform: translateY(var(--sizes-3));\n  opacity: 0;\n}\n\n._icon-wrap_1wwfi_65 {\n  flex-shrink: 0;\n  height: var(--sizes-10);\n  width: var(--sizes-10);\n  color: white;\n  border-radius: var(--radius-base);\n  background-color: var(--variant-color);\n}\n._icon-wrap_1wwfi_65 svg {\n  width: var(--sizes-md);\n  height: var(--sizes-md);\n}\n\n._text_1wwfi_78 {\n  color: white;\n}\n\n._closeAction_1wwfi_82 {\n  padding-left: var(--sizes-md);\n}\n._closeAction_1wwfi_82 svg {\n  width: var(--sizes-md);\n  height: var(--sizes-md);\n}\n\n._toast-container_1wwfi_2 ._closeAction_1wwfi_82:hover,\n._toast-container_1wwfi_2 ._closeAction_1wwfi_82:active,\n._toast-container_1wwfi_2 ._closeAction_1wwfi_82:focus-visible {\n  background-color: color-mix(in srgb, white 15%, var(--colors-neutral-ink-dark));\n}");
+var toastStyles = {"toast-container":"_toast-container_1wwfi_2","merge-variant":"_merge-variant_1wwfi_14","info-variant":"_info-variant_1wwfi_17","error-variant":"_error-variant_1wwfi_20","success-variant":"_success-variant_1wwfi_23","enter":"_enter_1wwfi_28","enterActive":"_enterActive_1wwfi_33","exit":"_exit_1wwfi_38","last":"_last_1wwfi_27","exitActive":"_exitActive_1wwfi_55","icon-wrap":"_icon-wrap_1wwfi_65","text":"_text_1wwfi_78","closeAction":"_closeAction_1wwfi_82"};
+
+export { toastStyles as default };
+//# sourceMappingURL=Toast.module.scss.js.map

package/dist/components/ToastsLayout/components/Toast.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.module.scss.js","sources":["../../../../src/components/ToastsLayout/components/Toast.module.scss"],"sourcesContent":[".toast-container {\n  --toast-local-z-index: 40;\n\n  background-color: var(--colors-neutral-ink-dark);\n  padding: var(--sizes-3);\n  box-shadow: var(--shadows-md);\n  border-radius: var(--radius-base);\n  pointer-events: auto;\n  z-index: var(--toast-local-z-index);\n  min-width: min(var(--min-width, 50vw), 80vw);\n  max-width: 80vw;\n  transition:\n    transform 500ms ease,\n    opacity 500ms ease;\n\n  &.merge-variant {\n    --variant-color: var(--colors-secondary-purple-base);\n  }\n  &.info-variant {\n    --variant-color: var(--colors-secondary-blue-base);\n  }\n  &.error-variant {\n    --variant-color: var(--colors-secondary-red-base);\n  }\n  &.success-variant {\n    --variant-color: var(--colors-secondary-green-base);\n  }\n}\n\n/* Transition classes — co-located with .last so compound selectors hash correctly */\n.enter {\n  transform: translateY(var(--sizes-3));\n  opacity: 0;\n}\n\n.enterActive {\n  transform: translateY(0);\n  opacity: 1;\n}\n\n.exit {\n  transform: translateX(0);\n  opacity: 1;\n}\n\n/*\n * .last modifier — applied to the bottom-most (oldest visible) toast.\n * Non-last toasts exit by sliding right (translateX) so the stack above\n * them collapses gracefully into the freed space. The last toast exits\n * by sliding down (translateY) off the bottom of the viewport since\n * there's nothing below it to displace.\n */\n.last.exit {\n  transform: translateY(0);\n  opacity: 1;\n}\n\n.exitActive {\n  transform: translateX(var(--sizes-3));\n  opacity: 0;\n}\n\n.last.exitActive {\n  transform: translateY(var(--sizes-3));\n  opacity: 0;\n}\n\n.icon-wrap {\n  flex-shrink: 0;\n  height: var(--sizes-10);\n  width: var(--sizes-10);\n  color: white;\n  border-radius: var(--radius-base);\n  background-color: var(--variant-color);\n\n  svg {\n    width: var(--sizes-md);\n    height: var(--sizes-md);\n  }\n}\n.text {\n  color: white;\n}\n.closeAction {\n  padding-left: var(--sizes-md);\n\n  svg {\n    width: var(--sizes-md);\n    height: var(--sizes-md);\n  }\n}\n\n.toast-container .closeAction:hover,\n.toast-container .closeAction:active,\n.toast-container .closeAction:focus-visible {\n  background-color: color-mix(in srgb, white 15%, var(--colors-neutral-ink-dark));\n}\n"],"names":["___$insertStyle"],"mappings":";;AAAAA,WAAA,CAAA,q/EAAA;AACE,kBAAA,CAAA,iBAAA,CAAA,0BAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,aAAA,CAAA,uBAAA;;;;"}

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

@@ -1,2 +1,2 @@
 export { ToastsLayout } from './ToastsLayout';
-export type { Notification } from './types';
+export type { Notification, ToastsLayoutPropTypes } from './types';

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

@@ -6,14 +6,13 @@ export declare enum ToastTypes {
     merge = "merge"
 }
 export type ToastType = Record<ToastTypes, {
-    accentColor: string;
     icon: ReactElement;
 }>;
 export type ToastPropTypes = Omit<Notification, 'key'> & {
     className?: string;
     e2eClassName?: string;
     last: boolean;
-    minWidth: number | string;
+    minWidth?: string;
     onClose: () => void;
 };
 export type ToastsLayoutPropTypes = {

package/dist/components/UploadFile/UploadFile.cjs

@@ -4,8 +4,7 @@ var React = require('react');
 var index = require('../../theme/index.cjs');
 var CriticalIcon = require('../../icons/design-system/components/CriticalIcon.cjs');
 var LockIcon = require('../../icons/design-system/components/LockIcon.cjs');
-var buildClassnames = require('../../utils/buildClassnames.cjs');
-var UploadFile_module = require('./UploadFile.module.scss.cjs');
+var styled = require('./styled.cjs');
 var constants = require('./constants.cjs');
 var UploadCopy = require('./components/UploadCopy/UploadCopy.cjs');
 var DropCopy = require('./components/DropCopy/DropCopy.cjs');
@@ -105,11 +104,7 @@ const UploadFile = React.forwardRef(({ id, name, maxBytes = constants.DEFAULT_MA
                     maxSizeCopy,
                     React__default.default.createElement("br", null),
                     acceptedTypesCopy),
-                React__default.default.createElement("div", { className: buildClassnames.buildClassnames([
-                        UploadFile_module.dropZone,
-                        isDragOver ? UploadFile_module.dragOver : undefined,
-                        hasError ? UploadFile_module.hasError : undefined,
-                    ]), "data-testid": "drop-zone-container", onDrop: onDrop, onDragEnter: onDragEnter, onDragOver: onDragOver, onDragLeave: onDragLeave },
+                React__default.default.createElement(styled.DropZoneContainer, { hasError: hasError, isDragOver: isDragOver, "data-testid": "drop-zone-container", onDrop: onDrop, onDragEnter: onDragEnter, onDragOver: onDragOver, onDragLeave: onDragLeave },
                     isDragOver ? React__default.default.createElement(DropCopy.DropCopy, null) : React__default.default.createElement(UploadCopy.UploadCopy, null),
                     React__default.default.createElement("input", { ref: inputRef, id: id, type: "file", accept: acceptedTypesForInputEl, name: name, disabled: disabled, multiple: multiple, ...otherProps })))),
         React__default.default.createElement(FlexCol.FlexCol, null,

package/dist/components/UploadFile/UploadFile.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"UploadFile.cjs","sources":["../../../src/components/UploadFile/UploadFile.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useState,\n  DragEvent,\n  forwardRef,\n  useImperativeHandle,\n} from 'react';\nimport { theme } from 'Theme';\nimport { CriticalIcon, LockIcon } from '../../icons';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport styles from './UploadFile.module.scss';\nimport {\n  FileSizeUnit,\n  DEFAULT_MAXIMUM_MULTIPLE_FILES,\n  DEFAULT_MAXIMUM_FILE_BYTES,\n} from './constants';\nimport { UploadCopy } from './components/UploadCopy/UploadCopy';\nimport { DropCopy } from './components/DropCopy/DropCopy';\nimport { getFileSizeString, getTypePropForInputEl, getValidTypesString } from './utils';\nimport { UploadFileProps } from './types';\nimport { Text } from '../Text';\nimport { FlexCol } from '../Flex/FlexCol';\nimport labelStyles from '../../hoc/withLabels/withLabels.module.scss';\nimport { UploadedFile } from '../UploadedFile';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { useUploadFile } from './hooks/useUploadFile';\nimport { useValidateInput } from './hooks/useValidateInput';\n\nexport const UploadFile = forwardRef<HTMLInputElement, UploadFileProps>(\n  (\n    {\n      id,\n      name,\n      maxBytes = DEFAULT_MAXIMUM_FILE_BYTES,\n      format = FileSizeUnit.MB,\n      fileTypes,\n      disabled,\n      multiple,\n      label = multiple ? 'Upload files' : 'Upload file',\n      hideUploadedFiles = false,\n      onMaxFilesExceeded,\n      onFileRemoved,\n      maxFiles = DEFAULT_MAXIMUM_MULTIPLE_FILES,\n      disabledMessage,\n      errorMessage = '',\n      onFileInputCancelled,\n      ...otherProps\n    }: UploadFileProps,\n    outerRef,\n  ) => {\n    const { inputRef, fileList, setFileList, onCancel, removeFileFromList, clearFileSelection } =\n      useUploadFile({ onFileInputCancelled });\n\n    useValidateInput({ inputRef, fileList, fileTypes, maxBytes, errorMessage });\n\n    useImperativeHandle(outerRef, () => inputRef.current!, [inputRef]);\n\n    const [isDragOver, setIsDragOver] = useState(false);\n\n    // Computed properties based on params\n    const maxSizeCopy = getFileSizeString({ maxBytes, format });\n    const acceptedTypesCopy = getValidTypesString({ fileTypes });\n    const acceptedTypesForInputEl = getTypePropForInputEl({ fileTypes });\n\n    const validateMaximumFiles = useCallback(\n      (files: FileList | null | undefined) => {\n        if (files?.length && files?.length > maxFiles) {\n          clearFileSelection();\n          onMaxFilesExceeded?.();\n          return false;\n        }\n        return true;\n      },\n      [clearFileSelection, maxFiles, onMaxFilesExceeded],\n    );\n\n    // Processes file and updates the UI appropriately:\n    const updateFiles = useCallback(\n      (files: FileList) => {\n        if (!files.length) {\n          return;\n        }\n\n        setFileList(files);\n      },\n      [setFileList],\n    );\n\n    // For focussing of input el and updating drop UI\n    const onDragEnter = (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      setIsDragOver(true);\n      inputRef.current?.focus();\n    };\n\n    // For unfocussing of input el and updating drop UI\n    const onDragLeave = (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      setIsDragOver(false);\n    };\n\n    // Prevents default browser behaviour\n    const onDragOver = (event: DragEvent<HTMLElement>) => event.preventDefault();\n\n    // Process file when dropped into eligible area\n    const onDrop = (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      setIsDragOver(false);\n      // Prevent reactions on dragging events that do not contain files\n      if (!event.dataTransfer.files.length) return;\n\n      const canUpdateFiles = validateMaximumFiles(event.dataTransfer.files);\n      if (canUpdateFiles) {\n        updateFiles(event.dataTransfer.files);\n      }\n    };\n\n    // Updates UI based on a native file input change. Attached via useEffect below\n    const onChange = useCallback(() => {\n      const canUpdateFiles = validateMaximumFiles(inputRef?.current?.files);\n      const files = inputRef?.current?.files;\n      if (canUpdateFiles && files) {\n        updateFiles(files);\n      } else if (fileList) {\n        updateFiles(fileList);\n      }\n    }, [validateMaximumFiles, inputRef, fileList, updateFiles]);\n\n    useEffect(() => {\n      const ref = inputRef?.current;\n      ref?.addEventListener('change', onChange);\n      ref?.addEventListener('cancel', onCancel);\n\n      return () => {\n        ref?.removeEventListener('change', onChange);\n        ref?.removeEventListener('cancel', onCancel);\n      };\n    }, [onChange, onCancel, inputRef]);\n\n    const hasError = !!((errorMessage || inputRef.current?.validationMessage) && !fileList?.length);\n\n    return (\n      <FlexCol gap=\"xs\" className={labelStyles.rootStack}>\n        <Text variant=\"inputLabel\" as=\"label\" htmlFor={id}>\n          {label}\n          <FlexCol>\n            <Text variant=\"hintText\" as=\"span\" className={labelStyles.hint}>\n              {maxSizeCopy}\n              <br />\n              {acceptedTypesCopy}\n            </Text>\n            <div\n              className={buildClassnames([\n                styles.dropZone,\n                isDragOver ? styles.dragOver : undefined,\n                hasError ? styles.hasError : undefined,\n              ])}\n              data-testid=\"drop-zone-container\"\n              onDrop={onDrop}\n              onDragEnter={onDragEnter}\n              onDragOver={onDragOver}\n              onDragLeave={onDragLeave}\n            >\n              {isDragOver ? <DropCopy /> : <UploadCopy />}\n              <input\n                ref={inputRef}\n                id={id}\n                type=\"file\"\n                accept={acceptedTypesForInputEl}\n                name={name}\n                disabled={disabled}\n                multiple={multiple}\n                {...otherProps}\n              />\n            </div>\n          </FlexCol>\n        </Text>\n        <FlexCol>\n          {hasError && (\n            <FlexRow>\n              <CriticalIcon\n                width={theme.sizes.base}\n                height={theme.sizes.base}\n                color={theme.colors.secondary.red.base}\n              />\n              <Text variant=\"error\" as=\"span\" className={labelStyles.error}>{errorMessage || inputRef.current?.validationMessage}</Text>\n            </FlexRow>\n          )}\n          {disabledMessage && (\n            <FlexRow id={`${id}-disabled`}>\n              <LockIcon\n                width={theme.sizes.base}\n                height={theme.sizes.base}\n                color={theme.colors.neutral.ink.light}\n              />\n              <Text variant=\"bodyBold\" as=\"span\">{disabledMessage}</Text>\n            </FlexRow>\n          )}\n          {!hideUploadedFiles &&\n            fileList && [\n              Array.from(fileList).map((file) => {\n                return (\n                  <UploadedFile\n                    key={`${file.name}`}\n                    file={file}\n                    onRemoveFile={(fileToRemove) => {\n                      removeFileFromList(fileToRemove);\n                      onFileRemoved?.(fileToRemove);\n                    }}\n                    disabled={disabled}\n                    format={format}\n                    maxBytes={maxBytes}\n                    fileTypes={fileTypes}\n                  />\n                );\n              }),\n            ]}\n        </FlexCol>\n      </FlexCol>\n    );\n  },\n);\n"],"names":["forwardRef","DEFAULT_MAXIMUM_FILE_BYTES","FileSizeUnit","DEFAULT_MAXIMUM_MULTIPLE_FILES","useUploadFile","useValidateInput","useImperativeHandle","useState","getFileSizeString","getValidTypesString","getTypePropForInputEl","useCallback","useEffect","React","FlexCol","labelStyles","Text","buildClassnames","styles","DropCopy","UploadCopy","FlexRow","CriticalIcon","theme","LockIcon","UploadedFile"],"mappings":"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"}
+{"version":3,"file":"UploadFile.cjs","sources":["../../../src/components/UploadFile/UploadFile.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useState,\n  DragEvent,\n  forwardRef,\n  useImperativeHandle,\n} from 'react';\nimport { theme } from 'Theme';\nimport { CriticalIcon, LockIcon } from '../../icons';\nimport { DropZoneContainer } from './styled';\nimport {\n  FileSizeUnit,\n  DEFAULT_MAXIMUM_MULTIPLE_FILES,\n  DEFAULT_MAXIMUM_FILE_BYTES,\n} from './constants';\nimport { UploadCopy } from './components/UploadCopy/UploadCopy';\nimport { DropCopy } from './components/DropCopy/DropCopy';\nimport { getFileSizeString, getTypePropForInputEl, getValidTypesString } from './utils';\nimport { UploadFileProps } from './types';\nimport { Text } from '../Text';\nimport { FlexCol } from '../Flex/FlexCol';\nimport labelStyles from '../../hoc/withLabels/withLabels.module.scss';\nimport { UploadedFile } from '../UploadedFile';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { useUploadFile } from './hooks/useUploadFile';\nimport { useValidateInput } from './hooks/useValidateInput';\n\nexport const UploadFile = forwardRef<HTMLInputElement, UploadFileProps>(\n  (\n    {\n      id,\n      name,\n      maxBytes = DEFAULT_MAXIMUM_FILE_BYTES,\n      format = FileSizeUnit.MB,\n      fileTypes,\n      disabled,\n      multiple,\n      label = multiple ? 'Upload files' : 'Upload file',\n      hideUploadedFiles = false,\n      onMaxFilesExceeded,\n      onFileRemoved,\n      maxFiles = DEFAULT_MAXIMUM_MULTIPLE_FILES,\n      disabledMessage,\n      errorMessage = '',\n      onFileInputCancelled,\n      ...otherProps\n    }: UploadFileProps,\n    outerRef,\n  ) => {\n    const { inputRef, fileList, setFileList, onCancel, removeFileFromList, clearFileSelection } =\n      useUploadFile({ onFileInputCancelled });\n\n    useValidateInput({ inputRef, fileList, fileTypes, maxBytes, errorMessage });\n\n    useImperativeHandle(outerRef, () => inputRef.current!, [inputRef]);\n\n    const [isDragOver, setIsDragOver] = useState(false);\n\n    // Computed properties based on params\n    const maxSizeCopy = getFileSizeString({ maxBytes, format });\n    const acceptedTypesCopy = getValidTypesString({ fileTypes });\n    const acceptedTypesForInputEl = getTypePropForInputEl({ fileTypes });\n\n    const validateMaximumFiles = useCallback(\n      (files: FileList | null | undefined) => {\n        if (files?.length && files?.length > maxFiles) {\n          clearFileSelection();\n          onMaxFilesExceeded?.();\n          return false;\n        }\n        return true;\n      },\n      [clearFileSelection, maxFiles, onMaxFilesExceeded],\n    );\n\n    // Processes file and updates the UI appropriately:\n    const updateFiles = useCallback(\n      (files: FileList) => {\n        if (!files.length) {\n          return;\n        }\n\n        setFileList(files);\n      },\n      [setFileList],\n    );\n\n    // For focussing of input el and updating drop UI\n    const onDragEnter = (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      setIsDragOver(true);\n      inputRef.current?.focus();\n    };\n\n    // For unfocussing of input el and updating drop UI\n    const onDragLeave = (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      setIsDragOver(false);\n    };\n\n    // Prevents default browser behaviour\n    const onDragOver = (event: DragEvent<HTMLElement>) => event.preventDefault();\n\n    // Process file when dropped into eligible area\n    const onDrop = (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      setIsDragOver(false);\n      // Prevent reactions on dragging events that do not contain files\n      if (!event.dataTransfer.files.length) return;\n\n      const canUpdateFiles = validateMaximumFiles(event.dataTransfer.files);\n      if (canUpdateFiles) {\n        updateFiles(event.dataTransfer.files);\n      }\n    };\n\n    // Updates UI based on a native file input change. Attached via useEffect below\n    const onChange = useCallback(() => {\n      const canUpdateFiles = validateMaximumFiles(inputRef?.current?.files);\n      const files = inputRef?.current?.files;\n      if (canUpdateFiles && files) {\n        updateFiles(files);\n      } else if (fileList) {\n        updateFiles(fileList);\n      }\n    }, [validateMaximumFiles, inputRef, fileList, updateFiles]);\n\n    useEffect(() => {\n      const ref = inputRef?.current;\n      ref?.addEventListener('change', onChange);\n      ref?.addEventListener('cancel', onCancel);\n\n      return () => {\n        ref?.removeEventListener('change', onChange);\n        ref?.removeEventListener('cancel', onCancel);\n      };\n    }, [onChange, onCancel, inputRef]);\n\n    const hasError = !!((errorMessage || inputRef.current?.validationMessage) && !fileList?.length);\n\n    return (\n      <FlexCol gap=\"xs\" className={labelStyles.rootStack}>\n        <Text variant=\"inputLabel\" as=\"label\" htmlFor={id}>\n          {label}\n          <FlexCol>\n            <Text variant=\"hintText\" as=\"span\" className={labelStyles.hint}>\n              {maxSizeCopy}\n              <br />\n              {acceptedTypesCopy}\n            </Text>\n            <DropZoneContainer\n              hasError={hasError}\n              isDragOver={isDragOver}\n              data-testid=\"drop-zone-container\"\n              onDrop={onDrop}\n              onDragEnter={onDragEnter}\n              onDragOver={onDragOver}\n              onDragLeave={onDragLeave}\n            >\n              {isDragOver ? <DropCopy /> : <UploadCopy />}\n              <input\n                ref={inputRef}\n                id={id}\n                type=\"file\"\n                accept={acceptedTypesForInputEl}\n                name={name}\n                disabled={disabled}\n                multiple={multiple}\n                {...otherProps}\n              />\n            </DropZoneContainer>\n          </FlexCol>\n        </Text>\n        <FlexCol>\n          {hasError && (\n            <FlexRow>\n              <CriticalIcon\n                width={theme.sizes.base}\n                height={theme.sizes.base}\n                color={theme.colors.secondary.red.base}\n              />\n              <Text variant=\"error\" as=\"span\" className={labelStyles.error}>{errorMessage || inputRef.current?.validationMessage}</Text>\n            </FlexRow>\n          )}\n          {disabledMessage && (\n            <FlexRow id={`${id}-disabled`}>\n              <LockIcon\n                width={theme.sizes.base}\n                height={theme.sizes.base}\n                color={theme.colors.neutral.ink.light}\n              />\n              <Text variant=\"bodyBold\" as=\"span\">{disabledMessage}</Text>\n            </FlexRow>\n          )}\n          {!hideUploadedFiles &&\n            fileList && [\n              Array.from(fileList).map((file) => {\n                return (\n                  <UploadedFile\n                    key={`${file.name}`}\n                    file={file}\n                    onRemoveFile={(fileToRemove) => {\n                      removeFileFromList(fileToRemove);\n                      onFileRemoved?.(fileToRemove);\n                    }}\n                    disabled={disabled}\n                    format={format}\n                    maxBytes={maxBytes}\n                    fileTypes={fileTypes}\n                  />\n                );\n              }),\n            ]}\n        </FlexCol>\n      </FlexCol>\n    );\n  },\n);\n"],"names":["forwardRef","DEFAULT_MAXIMUM_FILE_BYTES","FileSizeUnit","DEFAULT_MAXIMUM_MULTIPLE_FILES","useUploadFile","useValidateInput","useImperativeHandle","useState","getFileSizeString","getValidTypesString","getTypePropForInputEl","useCallback","useEffect","React","FlexCol","labelStyles","Text","DropZoneContainer","DropCopy","UploadCopy","FlexRow","CriticalIcon","theme","LockIcon","UploadedFile"],"mappings":"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"}

package/dist/components/UploadFile/UploadFile.js

@@ -2,8 +2,7 @@ import React__default, { forwardRef, useImperativeHandle, useState, useCallback,
 import { theme } from '../../theme/index.js';
 import { ReactComponent as CriticalIcon } from '../../icons/design-system/components/CriticalIcon.js';
 import { ReactComponent as LockIcon } from '../../icons/design-system/components/LockIcon.js';
-import { buildClassnames } from '../../utils/buildClassnames.js';
-import styles from './UploadFile.module.scss.js';
+import { DropZoneContainer } from './styled.js';
 import { DEFAULT_MAXIMUM_MULTIPLE_FILES, DEFAULT_MAXIMUM_FILE_BYTES, FileSizeUnit } from './constants.js';
 import { UploadCopy } from './components/UploadCopy/UploadCopy.js';
 import { DropCopy } from './components/DropCopy/DropCopy.js';
@@ -99,11 +98,7 @@ const UploadFile = forwardRef(({ id, name, maxBytes = DEFAULT_MAXIMUM_FILE_BYTES
                     maxSizeCopy,
                     React__default.createElement("br", null),
                     acceptedTypesCopy),
-                React__default.createElement("div", { className: buildClassnames([
-                        styles.dropZone,
-                        isDragOver ? styles.dragOver : undefined,
-                        hasError ? styles.hasError : undefined,
-                    ]), "data-testid": "drop-zone-container", onDrop: onDrop, onDragEnter: onDragEnter, onDragOver: onDragOver, onDragLeave: onDragLeave },
+                React__default.createElement(DropZoneContainer, { hasError: hasError, isDragOver: isDragOver, "data-testid": "drop-zone-container", onDrop: onDrop, onDragEnter: onDragEnter, onDragOver: onDragOver, onDragLeave: onDragLeave },
                     isDragOver ? React__default.createElement(DropCopy, null) : React__default.createElement(UploadCopy, null),
                     React__default.createElement("input", { ref: inputRef, id: id, type: "file", accept: acceptedTypesForInputEl, name: name, disabled: disabled, multiple: multiple, ...otherProps })))),
         React__default.createElement(FlexCol, null,

package/dist/components/UploadFile/UploadFile.js.map

@@ -1 +1 @@
-{"version":3,"file":"UploadFile.js","sources":["../../../src/components/UploadFile/UploadFile.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useState,\n  DragEvent,\n  forwardRef,\n  useImperativeHandle,\n} from 'react';\nimport { theme } from 'Theme';\nimport { CriticalIcon, LockIcon } from '../../icons';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport styles from './UploadFile.module.scss';\nimport {\n  FileSizeUnit,\n  DEFAULT_MAXIMUM_MULTIPLE_FILES,\n  DEFAULT_MAXIMUM_FILE_BYTES,\n} from './constants';\nimport { UploadCopy } from './components/UploadCopy/UploadCopy';\nimport { DropCopy } from './components/DropCopy/DropCopy';\nimport { getFileSizeString, getTypePropForInputEl, getValidTypesString } from './utils';\nimport { UploadFileProps } from './types';\nimport { Text } from '../Text';\nimport { FlexCol } from '../Flex/FlexCol';\nimport labelStyles from '../../hoc/withLabels/withLabels.module.scss';\nimport { UploadedFile } from '../UploadedFile';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { useUploadFile } from './hooks/useUploadFile';\nimport { useValidateInput } from './hooks/useValidateInput';\n\nexport const UploadFile = forwardRef<HTMLInputElement, UploadFileProps>(\n  (\n    {\n      id,\n      name,\n      maxBytes = DEFAULT_MAXIMUM_FILE_BYTES,\n      format = FileSizeUnit.MB,\n      fileTypes,\n      disabled,\n      multiple,\n      label = multiple ? 'Upload files' : 'Upload file',\n      hideUploadedFiles = false,\n      onMaxFilesExceeded,\n      onFileRemoved,\n      maxFiles = DEFAULT_MAXIMUM_MULTIPLE_FILES,\n      disabledMessage,\n      errorMessage = '',\n      onFileInputCancelled,\n      ...otherProps\n    }: UploadFileProps,\n    outerRef,\n  ) => {\n    const { inputRef, fileList, setFileList, onCancel, removeFileFromList, clearFileSelection } =\n      useUploadFile({ onFileInputCancelled });\n\n    useValidateInput({ inputRef, fileList, fileTypes, maxBytes, errorMessage });\n\n    useImperativeHandle(outerRef, () => inputRef.current!, [inputRef]);\n\n    const [isDragOver, setIsDragOver] = useState(false);\n\n    // Computed properties based on params\n    const maxSizeCopy = getFileSizeString({ maxBytes, format });\n    const acceptedTypesCopy = getValidTypesString({ fileTypes });\n    const acceptedTypesForInputEl = getTypePropForInputEl({ fileTypes });\n\n    const validateMaximumFiles = useCallback(\n      (files: FileList | null | undefined) => {\n        if (files?.length && files?.length > maxFiles) {\n          clearFileSelection();\n          onMaxFilesExceeded?.();\n          return false;\n        }\n        return true;\n      },\n      [clearFileSelection, maxFiles, onMaxFilesExceeded],\n    );\n\n    // Processes file and updates the UI appropriately:\n    const updateFiles = useCallback(\n      (files: FileList) => {\n        if (!files.length) {\n          return;\n        }\n\n        setFileList(files);\n      },\n      [setFileList],\n    );\n\n    // For focussing of input el and updating drop UI\n    const onDragEnter = (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      setIsDragOver(true);\n      inputRef.current?.focus();\n    };\n\n    // For unfocussing of input el and updating drop UI\n    const onDragLeave = (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      setIsDragOver(false);\n    };\n\n    // Prevents default browser behaviour\n    const onDragOver = (event: DragEvent<HTMLElement>) => event.preventDefault();\n\n    // Process file when dropped into eligible area\n    const onDrop = (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      setIsDragOver(false);\n      // Prevent reactions on dragging events that do not contain files\n      if (!event.dataTransfer.files.length) return;\n\n      const canUpdateFiles = validateMaximumFiles(event.dataTransfer.files);\n      if (canUpdateFiles) {\n        updateFiles(event.dataTransfer.files);\n      }\n    };\n\n    // Updates UI based on a native file input change. Attached via useEffect below\n    const onChange = useCallback(() => {\n      const canUpdateFiles = validateMaximumFiles(inputRef?.current?.files);\n      const files = inputRef?.current?.files;\n      if (canUpdateFiles && files) {\n        updateFiles(files);\n      } else if (fileList) {\n        updateFiles(fileList);\n      }\n    }, [validateMaximumFiles, inputRef, fileList, updateFiles]);\n\n    useEffect(() => {\n      const ref = inputRef?.current;\n      ref?.addEventListener('change', onChange);\n      ref?.addEventListener('cancel', onCancel);\n\n      return () => {\n        ref?.removeEventListener('change', onChange);\n        ref?.removeEventListener('cancel', onCancel);\n      };\n    }, [onChange, onCancel, inputRef]);\n\n    const hasError = !!((errorMessage || inputRef.current?.validationMessage) && !fileList?.length);\n\n    return (\n      <FlexCol gap=\"xs\" className={labelStyles.rootStack}>\n        <Text variant=\"inputLabel\" as=\"label\" htmlFor={id}>\n          {label}\n          <FlexCol>\n            <Text variant=\"hintText\" as=\"span\" className={labelStyles.hint}>\n              {maxSizeCopy}\n              <br />\n              {acceptedTypesCopy}\n            </Text>\n            <div\n              className={buildClassnames([\n                styles.dropZone,\n                isDragOver ? styles.dragOver : undefined,\n                hasError ? styles.hasError : undefined,\n              ])}\n              data-testid=\"drop-zone-container\"\n              onDrop={onDrop}\n              onDragEnter={onDragEnter}\n              onDragOver={onDragOver}\n              onDragLeave={onDragLeave}\n            >\n              {isDragOver ? <DropCopy /> : <UploadCopy />}\n              <input\n                ref={inputRef}\n                id={id}\n                type=\"file\"\n                accept={acceptedTypesForInputEl}\n                name={name}\n                disabled={disabled}\n                multiple={multiple}\n                {...otherProps}\n              />\n            </div>\n          </FlexCol>\n        </Text>\n        <FlexCol>\n          {hasError && (\n            <FlexRow>\n              <CriticalIcon\n                width={theme.sizes.base}\n                height={theme.sizes.base}\n                color={theme.colors.secondary.red.base}\n              />\n              <Text variant=\"error\" as=\"span\" className={labelStyles.error}>{errorMessage || inputRef.current?.validationMessage}</Text>\n            </FlexRow>\n          )}\n          {disabledMessage && (\n            <FlexRow id={`${id}-disabled`}>\n              <LockIcon\n                width={theme.sizes.base}\n                height={theme.sizes.base}\n                color={theme.colors.neutral.ink.light}\n              />\n              <Text variant=\"bodyBold\" as=\"span\">{disabledMessage}</Text>\n            </FlexRow>\n          )}\n          {!hideUploadedFiles &&\n            fileList && [\n              Array.from(fileList).map((file) => {\n                return (\n                  <UploadedFile\n                    key={`${file.name}`}\n                    file={file}\n                    onRemoveFile={(fileToRemove) => {\n                      removeFileFromList(fileToRemove);\n                      onFileRemoved?.(fileToRemove);\n                    }}\n                    disabled={disabled}\n                    format={format}\n                    maxBytes={maxBytes}\n                    fileTypes={fileTypes}\n                  />\n                );\n              }),\n            ]}\n        </FlexCol>\n      </FlexCol>\n    );\n  },\n);\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"UploadFile.js","sources":["../../../src/components/UploadFile/UploadFile.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useState,\n  DragEvent,\n  forwardRef,\n  useImperativeHandle,\n} from 'react';\nimport { theme } from 'Theme';\nimport { CriticalIcon, LockIcon } from '../../icons';\nimport { DropZoneContainer } from './styled';\nimport {\n  FileSizeUnit,\n  DEFAULT_MAXIMUM_MULTIPLE_FILES,\n  DEFAULT_MAXIMUM_FILE_BYTES,\n} from './constants';\nimport { UploadCopy } from './components/UploadCopy/UploadCopy';\nimport { DropCopy } from './components/DropCopy/DropCopy';\nimport { getFileSizeString, getTypePropForInputEl, getValidTypesString } from './utils';\nimport { UploadFileProps } from './types';\nimport { Text } from '../Text';\nimport { FlexCol } from '../Flex/FlexCol';\nimport labelStyles from '../../hoc/withLabels/withLabels.module.scss';\nimport { UploadedFile } from '../UploadedFile';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { useUploadFile } from './hooks/useUploadFile';\nimport { useValidateInput } from './hooks/useValidateInput';\n\nexport const UploadFile = forwardRef<HTMLInputElement, UploadFileProps>(\n  (\n    {\n      id,\n      name,\n      maxBytes = DEFAULT_MAXIMUM_FILE_BYTES,\n      format = FileSizeUnit.MB,\n      fileTypes,\n      disabled,\n      multiple,\n      label = multiple ? 'Upload files' : 'Upload file',\n      hideUploadedFiles = false,\n      onMaxFilesExceeded,\n      onFileRemoved,\n      maxFiles = DEFAULT_MAXIMUM_MULTIPLE_FILES,\n      disabledMessage,\n      errorMessage = '',\n      onFileInputCancelled,\n      ...otherProps\n    }: UploadFileProps,\n    outerRef,\n  ) => {\n    const { inputRef, fileList, setFileList, onCancel, removeFileFromList, clearFileSelection } =\n      useUploadFile({ onFileInputCancelled });\n\n    useValidateInput({ inputRef, fileList, fileTypes, maxBytes, errorMessage });\n\n    useImperativeHandle(outerRef, () => inputRef.current!, [inputRef]);\n\n    const [isDragOver, setIsDragOver] = useState(false);\n\n    // Computed properties based on params\n    const maxSizeCopy = getFileSizeString({ maxBytes, format });\n    const acceptedTypesCopy = getValidTypesString({ fileTypes });\n    const acceptedTypesForInputEl = getTypePropForInputEl({ fileTypes });\n\n    const validateMaximumFiles = useCallback(\n      (files: FileList | null | undefined) => {\n        if (files?.length && files?.length > maxFiles) {\n          clearFileSelection();\n          onMaxFilesExceeded?.();\n          return false;\n        }\n        return true;\n      },\n      [clearFileSelection, maxFiles, onMaxFilesExceeded],\n    );\n\n    // Processes file and updates the UI appropriately:\n    const updateFiles = useCallback(\n      (files: FileList) => {\n        if (!files.length) {\n          return;\n        }\n\n        setFileList(files);\n      },\n      [setFileList],\n    );\n\n    // For focussing of input el and updating drop UI\n    const onDragEnter = (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      setIsDragOver(true);\n      inputRef.current?.focus();\n    };\n\n    // For unfocussing of input el and updating drop UI\n    const onDragLeave = (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      setIsDragOver(false);\n    };\n\n    // Prevents default browser behaviour\n    const onDragOver = (event: DragEvent<HTMLElement>) => event.preventDefault();\n\n    // Process file when dropped into eligible area\n    const onDrop = (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      setIsDragOver(false);\n      // Prevent reactions on dragging events that do not contain files\n      if (!event.dataTransfer.files.length) return;\n\n      const canUpdateFiles = validateMaximumFiles(event.dataTransfer.files);\n      if (canUpdateFiles) {\n        updateFiles(event.dataTransfer.files);\n      }\n    };\n\n    // Updates UI based on a native file input change. Attached via useEffect below\n    const onChange = useCallback(() => {\n      const canUpdateFiles = validateMaximumFiles(inputRef?.current?.files);\n      const files = inputRef?.current?.files;\n      if (canUpdateFiles && files) {\n        updateFiles(files);\n      } else if (fileList) {\n        updateFiles(fileList);\n      }\n    }, [validateMaximumFiles, inputRef, fileList, updateFiles]);\n\n    useEffect(() => {\n      const ref = inputRef?.current;\n      ref?.addEventListener('change', onChange);\n      ref?.addEventListener('cancel', onCancel);\n\n      return () => {\n        ref?.removeEventListener('change', onChange);\n        ref?.removeEventListener('cancel', onCancel);\n      };\n    }, [onChange, onCancel, inputRef]);\n\n    const hasError = !!((errorMessage || inputRef.current?.validationMessage) && !fileList?.length);\n\n    return (\n      <FlexCol gap=\"xs\" className={labelStyles.rootStack}>\n        <Text variant=\"inputLabel\" as=\"label\" htmlFor={id}>\n          {label}\n          <FlexCol>\n            <Text variant=\"hintText\" as=\"span\" className={labelStyles.hint}>\n              {maxSizeCopy}\n              <br />\n              {acceptedTypesCopy}\n            </Text>\n            <DropZoneContainer\n              hasError={hasError}\n              isDragOver={isDragOver}\n              data-testid=\"drop-zone-container\"\n              onDrop={onDrop}\n              onDragEnter={onDragEnter}\n              onDragOver={onDragOver}\n              onDragLeave={onDragLeave}\n            >\n              {isDragOver ? <DropCopy /> : <UploadCopy />}\n              <input\n                ref={inputRef}\n                id={id}\n                type=\"file\"\n                accept={acceptedTypesForInputEl}\n                name={name}\n                disabled={disabled}\n                multiple={multiple}\n                {...otherProps}\n              />\n            </DropZoneContainer>\n          </FlexCol>\n        </Text>\n        <FlexCol>\n          {hasError && (\n            <FlexRow>\n              <CriticalIcon\n                width={theme.sizes.base}\n                height={theme.sizes.base}\n                color={theme.colors.secondary.red.base}\n              />\n              <Text variant=\"error\" as=\"span\" className={labelStyles.error}>{errorMessage || inputRef.current?.validationMessage}</Text>\n            </FlexRow>\n          )}\n          {disabledMessage && (\n            <FlexRow id={`${id}-disabled`}>\n              <LockIcon\n                width={theme.sizes.base}\n                height={theme.sizes.base}\n                color={theme.colors.neutral.ink.light}\n              />\n              <Text variant=\"bodyBold\" as=\"span\">{disabledMessage}</Text>\n            </FlexRow>\n          )}\n          {!hideUploadedFiles &&\n            fileList && [\n              Array.from(fileList).map((file) => {\n                return (\n                  <UploadedFile\n                    key={`${file.name}`}\n                    file={file}\n                    onRemoveFile={(fileToRemove) => {\n                      removeFileFromList(fileToRemove);\n                      onFileRemoved?.(fileToRemove);\n                    }}\n                    disabled={disabled}\n                    format={format}\n                    maxBytes={maxBytes}\n                    fileTypes={fileTypes}\n                  />\n                );\n              }),\n            ]}\n        </FlexCol>\n      </FlexCol>\n    );\n  },\n);\n"],"names":["React"],"mappings":"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"}

package/dist/components/UploadFile/styled.cjs

@@ -0,0 +1,54 @@
+'use strict';
+
+var styled = require('styled-components');
+var colors = require('../../theme/modules/colors.cjs');
+var radius = require('../../theme/modules/radius.cjs');
+var sizes = require('../../theme/modules/sizes.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+const DropZoneContainer = styled__default.default.div.withConfig({ displayName: "vui--DropZoneContainer", componentId: "vui--17v0v3c" }) `display:flex;align-items:center;justify-content:center;padding:${sizes.sizes.base};border-radius:${radius.radius.base};input[type='file']{position:absolute;opacity:0;width:1px;height:1px;cursor:pointer;}cursor:pointer;border:2px dashed ${colors.colors.neutral.ink.lightest};background-color:${colors.colors.neutral.grey.lightest};:hover{border:2px dashed ${colors.colors.secondary.blue.base};background-color:${colors.colors.secondary.blue.lightest};svg{color:${colors.colors.secondary.blue.base};}}:active,:focus-within{border:2px dashed ${colors.colors.secondary.blue.base};box-shadow:0 0 0 4px ${colors.colors.secondary.blue.light};background-color:${colors.colors.secondary.blue.lightest};svg{color:${colors.colors.secondary.blue.base};}}${({ isDragOver }) => isDragOver &&
+    `
+    border: 2px dashed ${colors.colors.secondary.blue.base};
+    box-shadow: 0 0 0 4px ${colors.colors.secondary.blue.light};
+    background-color: ${colors.colors.secondary.blue.lightest};
+
+    svg {
+      color: ${colors.colors.secondary.blue.base};
+    }
+  `} ${({ hasError, isDragOver }) => hasError &&
+    `
+    border: 2px dashed ${colors.colors.secondary.red.base};
+
+    :hover {
+      border: 2px dashed ${colors.colors.secondary.red.base};
+      background-color: ${colors.colors.secondary.red.lightest};
+
+      svg {
+        color: ${colors.colors.secondary.red.base};
+      }
+    }
+
+    :active, :focus-within {
+      border: 2px dashed ${colors.colors.secondary.red.base};
+      box-shadow: 0 0 0 4px ${colors.colors.secondary.red.light};
+      background-color: ${colors.colors.secondary.red.lightest};
+
+      svg {
+        color: ${colors.colors.secondary.red.base};
+      }
+    }
+
+    ${isDragOver
+        ? `
+    border: 2px dashed ${colors.colors.secondary.red.base};
+    box-shadow: 0 0 0 4px ${colors.colors.secondary.red.light};
+    background-color: ${colors.colors.secondary.red.lightest};
+  `
+        : ''}
+  `} &:has(input:disabled){cursor:not-allowed;box-shadow:none;background-color:${colors.colors.neutral.grey.light};border-color:${colors.colors.neutral.ink.lightest};color:${colors.colors.neutral.ink.light};svg{color:${colors.colors.neutral.ink.lightest};}}`;
+
+exports.DropZoneContainer = DropZoneContainer;
+//# sourceMappingURL=styled.cjs.map