npm - @veeqo/ui - Versions diffs - 12.0.0 → 12.0.2-beta-0 - Mend

@veeqo/ui 12.0.0 → 12.0.2-beta-0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (29) hide show

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

@@ -17,20 +17,21 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-const Alert = ({ size = 'base', variant = 'default', colours: passedColours, rightActions, rightActionsSlot, title, titleSlot, messageSlot, message, children, iconSlot, onClickClose, ...divProps }) => {
+const Alert = ({ size = 'base', variant = 'default', colours: passedColours, rightActions, rightActionsSlot, title, titleSlot, messageSlot, message, children, iconSlot, onClickClose, className, ...divProps }) => {
     const DefaultIcon = constants.IconMap[variant];
     const isXsSize = size === 'xs';
     return (React__default.default.createElement(FlexRow.FlexRow, { justifyContent: "space-between", className: buildClassnames.buildClassnames([
             Alert_module.alertContainer,
             Alert_module[`${size}-size`],
             Alerts_module[`${variant}-alert-variant`],
-        ]), ...divProps },
-        React__default.default.createElement(FlexRow.FlexRow, { alignItems: isXsSize ? 'center' : 'start', className: Alert_module.iconTextContainer },
-            React__default.default.createElement(FlexRow.FlexRow, { style: assignCssVars.assignCssVars({ iconColor: passedColours === null || passedColours === undefined ? undefined : passedColours.primary }), className: Alerts_module.icon }, iconSlot || React__default.default.createElement(DefaultIcon, { role: "presentation" })),
+            className,
+        ]), flexWrap: "nowrap", ...divProps },
+        React__default.default.createElement(FlexRow.FlexRow, { alignItems: isXsSize ? 'center' : 'start', flexWrap: "nowrap", className: Alert_module.iconTextContainer },
+            React__default.default.createElement(FlexRow.FlexRow, { style: assignCssVars.assignCssVars({ iconColor: passedColours === null || passedColours === undefined ? undefined : passedColours.primary }), className: Alerts_module.icon, alignItems: "start" }, iconSlot || React__default.default.createElement(DefaultIcon, { role: "presentation" })),
             children || (React__default.default.createElement(FlexCol.FlexCol, { gap: isXsSize ? 'xs' : 'sm' },
                 titleSlot || (React__default.default.createElement(Text.Text, { variant: "bodyBold", style: size === 'base' ? { lineHeight: '24px' } : {} }, title)),
                 messageSlot || React__default.default.createElement(Text.Text, { variant: "body" }, message)))),
-        React__default.default.createElement(FlexRow.FlexRow, { justifyContent: "flex-end", className: Alert_module.rightActionsContainer },
+        React__default.default.createElement(FlexRow.FlexRow, { justifyContent: "flex-end", flexWrap: "nowrap", className: Alert_module.rightActionsContainer },
             rightActionsSlot,
             rightActions && (React__default.default.createElement(FlexCol.FlexCol, { justifyContent: "center", className: Alert_module.rightActions }, rightActions.map(({ label, ...actionProps }) => (React__default.default.createElement(Button.Button, { key: label, type: "button", size: "sm", ...actionProps }, label))))),
             onClickClose && (React__default.default.createElement(FlexCol.FlexCol, { className: Alert_module.closeContainer },

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

	@@ -1 +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 { 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\nexport const Alert = ({\n size = 'base',\n variant = 'default',\n colours: passedColours,\n rightActions,\n rightActionsSlot,\n title,\n titleSlot,\n messageSlot,\n message,\n children,\n iconSlot,\n onClickClose,\n ...divProps\n}: AlertProps) => {\n const DefaultIcon = IconMap[variant];\n\n const isXsSize = size === 'xs';\n\n return (\n <FlexRow\n justifyContent=\"space-between\"\n className={buildClassnames([\n styles.alertContainer,\n styles[`${size}-size`],\n alertStyles[`${variant}-alert-variant`],\n ])}\n {...divProps}\n >\n <FlexRow alignItems={isXsSize ? 'center' : 'start'} className={styles.iconTextContainer}>\n <FlexRow\n style={assignCssVars({ iconColor: passedColours?.primary })}\n className={alertStyles.icon}\n >\n {iconSlot \|\| <DefaultIcon role=\"presentation\" />}\n </FlexRow>\n\n {children \|\| (\n <FlexCol gap={isXsSize ? 'xs' : 'sm'}>\n {titleSlot \|\| (\n <Text variant=\"bodyBold\" style={size === 'base' ? { lineHeight: '24px' } : {}}>\n {title}\n </Text>\n )}\n {messageSlot \|\| <Text variant=\"body\">{message}</Text>}\n </FlexCol>\n )}\n </FlexRow>\n\n <FlexRow justifyContent=\"flex-end\" className={styles.rightActionsContainer}>\n {rightActionsSlot}\n\n {rightActions && (\n <FlexCol justifyContent=\"center\" className={styles.rightActions}>\n {rightActions.map(({ label, ...actionProps }) => (\n <Button key={label} type=\"button\" size=\"sm\" {...actionProps}>\n {label}\n </Button>\n ))}\n </FlexCol>\n )}\n\n {onClickClose && (\n <FlexCol className={styles.closeContainer}>\n <Button\n variant=\"flat\"\n iconSlot={<CrossIcon />}\n onClick={onClickClose}\n aria-label=\"Close\"\n size=\"sm\"\n />\n </FlexCol>\n )}\n </FlexRow>\n </FlexRow>\n );\n};\n"],"names":["IconMap","React","FlexRow","buildClassnames","styles","alertStyles","assignCssVars","FlexCol","Text","Button","CrossIcon"],"mappings":";;;;;;;;;;;;;;;;;;;AAca,MAAA,KAAK,GAAG,CAAC,EACpB,IAAI,GAAG,MAAM,EACb,OAAO,GAAG,SAAS,EACnB,OAAO,EAAE,aAAa,EACtB,YAAY,EACZ,gBAAgB,EAChB,KAAK,EACL,SAAS,EACT,WAAW,EACX,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,GAAG,QAAQ,EACA,KAAI;AACf,IAAA,MAAM,WAAW,GAAGA,iBAAO,CAAC,OAAO,CAAC;AAEpC,IAAA,MAAM,QAAQ,GAAG,IAAI,KAAK,IAAI;IAE9B,QACEC,sBAAC,CAAA,aAAA,CAAAC,eAAO,EACN,EAAA,cAAc,EAAC,eAAe,EAC9B,SAAS,EAAEC,+BAAe,CAAC;AACzB,YAAAC,YAAM,CAAC,cAAc;AACrB,YAAAA,YAAM,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC;AACtB,YAAAC,aAAW,CAAC,CAAA,EAAG,OAAO,CAAA,cAAA,CAAgB,CAAC;~~AACxC~~,SAAA,CAAC,~~KACE~~,QAAQ,EAAA;~~AAEZ~~,~~QAAAJ~~,~~sBAAA,~~CAAA,aAAA,~~CAACC~~,eAAO,~~EAAC~~,~~EAAA,~~UAAU,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,~~EAAE~~,SAAS,EAAEE,YAAM,CAAC,iBAAiB,EAAA;~~AACrF~~,YAAAH,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAA,~~EACN,~~KAAK,EAAEI,2BAAa,CAAC,EAAE,SAAS,EAAE,aAAa,~~KAAb~~,~~IAAA,IAAA,~~aAAa,~~KAAb~~,SAAA,GAAA,SAAA,~~GAAA~~,aAAa,CAAE,OAAO,EAAE,CAAC,EAC3D,SAAS,EAAED,aAAW,CAAC,IAAI,~~EAE1B~~,EAAA,QAAQ,IAAIJ,~~sBAAA~~,~~CAAA~~,~~aAAA~~,~~CAAC,WAAW,~~EAAC,~~EAAA,~~IAAI,EAAC,cAAc,GAAG,CACxC;AAET,YAAA,QAAQ,KACPA,sBAAC,CAAA,aAAA,CAAAM,eAAO,IAAC,GAAG,EAAE,QAAQ,GAAG,IAAI,GAAG,IAAI,EAAA;AACjC,gBAAA,SAAS,KACRN,sBAAC,CAAA,aAAA,CAAAO,SAAI,EAAC,EAAA,OAAO,EAAC,UAAU,EAAC,KAAK,EAAE,IAAI,KAAK,MAAM,GAAG,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,EAAE,EAC1E,EAAA,KAAK,CACD,CACR;AACA,gBAAA,WAAW,IAAIP,sBAAA,CAAA,aAAA,CAACO,SAAI,EAAA,EAAC,OAAO,EAAC,MAAM,EAAA,EAAE,OAAO,CAAQ,CAC7C,CACX,CACO;~~QAEVP~~,~~sBAAC~~,CAAA,aAAA,~~CAAAC~~,eAAO,EAAC,~~EAAA,~~cAAc,EAAC,UAAU,EAAC,SAAS,EAAEE,YAAM,CAAC,qBAAqB,EAAA;~~YACvE~~,gBAAgB;YAEhB,YAAY,KACXH,sBAAA,CAAA,aAAA,CAACM,eAAO,EAAA,EAAC,cAAc,EAAC,QAAQ,EAAC,SAAS,EAAEH,YAAM,CAAC,YAAY,EAAA,EAC5D,YAAY,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,WAAW,EAAE,MAC1CH,sBAAA,CAAA,aAAA,CAACQ,aAAM,EAAA,EAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAA,GAAK,WAAW,EAAA,EACxD,KAAK,CACC,CACV,CAAC,CACM,CACX;YAEA,YAAY,KACXR,sBAAC,CAAA,aAAA,CAAAM,eAAO,IAAC,SAAS,EAAEH,YAAM,CAAC,cAAc,EAAA;gBACvCH,sBAAC,CAAA,aAAA,CAAAQ,aAAM,EACL,EAAA,OAAO,EAAC,MAAM,EACd,QAAQ,EAAER,sBAAA,CAAA,aAAA,CAACS,wBAAS,EAAA,IAAA,CAAG,EACvB,OAAO,EAAE,YAAY,EACV,YAAA,EAAA,OAAO,EAClB,IAAI,EAAC,IAAI,EACT,CAAA,CACM,CACX,CACO,CACF;AAEd;;;;"}
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 { 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\nexport const Alert = ({\n size = 'base',\n variant = 'default',\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\n const isXsSize = size === 'xs';\n\n return (\n <FlexRow\n justifyContent=\"space-between\"\n className={buildClassnames([\n styles.alertContainer,\n styles[`${size}-size`],\n alertStyles[`${variant}-alert-variant`],\n className,\n ])}\n flexWrap=\"nowrap\"\n {...divProps}\n >\n <FlexRow\n alignItems={isXsSize ? 'center' : 'start'}\n flexWrap=\"nowrap\"\n className={styles.iconTextContainer}\n >\n <FlexRow\n style={assignCssVars({ iconColor: passedColours?.primary })}\n className={alertStyles.icon}\n alignItems=\"start\"\n >\n {iconSlot \|\| <DefaultIcon role=\"presentation\" />}\n </FlexRow>\n\n {children \|\| (\n <FlexCol gap={isXsSize ? 'xs' : 'sm'}>\n {titleSlot \|\| (\n <Text variant=\"bodyBold\" style={size === 'base' ? { lineHeight: '24px' } : {}}>\n {title}\n </Text>\n )}\n {messageSlot \|\| <Text variant=\"body\">{message}</Text>}\n </FlexCol>\n )}\n </FlexRow>\n\n <FlexRow justifyContent=\"flex-end\" flexWrap=\"nowrap\" className={styles.rightActionsContainer}>\n {rightActionsSlot}\n\n {rightActions && (\n <FlexCol justifyContent=\"center\" className={styles.rightActions}>\n {rightActions.map(({ label, ...actionProps }) => (\n <Button key={label} type=\"button\" size=\"sm\" {...actionProps}>\n {label}\n </Button>\n ))}\n </FlexCol>\n )}\n\n {onClickClose && (\n <FlexCol className={styles.closeContainer}>\n <Button\n variant=\"flat\"\n iconSlot={<CrossIcon />}\n onClick={onClickClose}\n aria-label=\"Close\"\n size=\"sm\"\n />\n </FlexCol>\n )}\n </FlexRow>\n </FlexRow>\n );\n};\n"],"names":["IconMap","React","FlexRow","buildClassnames","styles","alertStyles","assignCssVars","FlexCol","Text","Button","CrossIcon"],"mappings":"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"}

package/dist/components/Alerts/Alert/Alert.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
 import React from 'react';
 import { AlertProps } from './types';
-export declare const Alert: ({ size, variant, colours: passedColours, rightActions, rightActionsSlot, title, titleSlot, messageSlot, message, children, iconSlot, onClickClose, ...divProps }: AlertProps) => React.JSX.Element;
+export declare const Alert: ({ size, variant, colours: passedColours, rightActions, rightActionsSlot, title, titleSlot, messageSlot, message, children, iconSlot, onClickClose, className, ...divProps }: AlertProps) => React.JSX.Element;

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

@@ -11,20 +11,21 @@ import { assignCssVars } from '../../../utils/assignCssVars.js';
 import alertStyles from '../Alerts.module.scss.js';
 import styles from './Alert.module.scss.js';
-const Alert = ({ size = 'base', variant = 'default', colours: passedColours, rightActions, rightActionsSlot, title, titleSlot, messageSlot, message, children, iconSlot, onClickClose, ...divProps }) => {
+const Alert = ({ size = 'base', variant = 'default', colours: passedColours, rightActions, rightActionsSlot, title, titleSlot, messageSlot, message, children, iconSlot, onClickClose, className, ...divProps }) => {
     const DefaultIcon = IconMap[variant];
     const isXsSize = size === 'xs';
     return (React__default.createElement(FlexRow, { justifyContent: "space-between", className: buildClassnames([
             styles.alertContainer,
             styles[`${size}-size`],
             alertStyles[`${variant}-alert-variant`],
-        ]), ...divProps },
-        React__default.createElement(FlexRow, { alignItems: isXsSize ? 'center' : 'start', className: styles.iconTextContainer },
-            React__default.createElement(FlexRow, { style: assignCssVars({ iconColor: passedColours === null || passedColours === undefined ? undefined : passedColours.primary }), className: alertStyles.icon }, iconSlot || React__default.createElement(DefaultIcon, { role: "presentation" })),
+            className,
+        ]), flexWrap: "nowrap", ...divProps },
+        React__default.createElement(FlexRow, { alignItems: isXsSize ? 'center' : 'start', flexWrap: "nowrap", className: styles.iconTextContainer },
+            React__default.createElement(FlexRow, { style: assignCssVars({ iconColor: passedColours === null || passedColours === undefined ? undefined : passedColours.primary }), className: alertStyles.icon, alignItems: "start" }, iconSlot || React__default.createElement(DefaultIcon, { role: "presentation" })),
             children || (React__default.createElement(FlexCol, { gap: isXsSize ? 'xs' : 'sm' },
                 titleSlot || (React__default.createElement(Text, { variant: "bodyBold", style: size === 'base' ? { lineHeight: '24px' } : {} }, title)),
                 messageSlot || React__default.createElement(Text, { variant: "body" }, message)))),
-        React__default.createElement(FlexRow, { justifyContent: "flex-end", className: styles.rightActionsContainer },
+        React__default.createElement(FlexRow, { justifyContent: "flex-end", flexWrap: "nowrap", className: styles.rightActionsContainer },
             rightActionsSlot,
             rightActions && (React__default.createElement(FlexCol, { justifyContent: "center", className: styles.rightActions }, rightActions.map(({ label, ...actionProps }) => (React__default.createElement(Button, { key: label, type: "button", size: "sm", ...actionProps }, label))))),
             onClickClose && (React__default.createElement(FlexCol, { className: styles.closeContainer },

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

	@@ -1 +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 { 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\nexport const Alert = ({\n size = 'base',\n variant = 'default',\n colours: passedColours,\n rightActions,\n rightActionsSlot,\n title,\n titleSlot,\n messageSlot,\n message,\n children,\n iconSlot,\n onClickClose,\n ...divProps\n}: AlertProps) => {\n const DefaultIcon = IconMap[variant];\n\n const isXsSize = size === 'xs';\n\n return (\n <FlexRow\n justifyContent=\"space-between\"\n className={buildClassnames([\n styles.alertContainer,\n styles[`${size}-size`],\n alertStyles[`${variant}-alert-variant`],\n ])}\n {...divProps}\n >\n <FlexRow alignItems={isXsSize ? 'center' : 'start'} className={styles.iconTextContainer}>\n <FlexRow\n style={assignCssVars({ iconColor: passedColours?.primary })}\n className={alertStyles.icon}\n >\n {iconSlot \|\| <DefaultIcon role=\"presentation\" />}\n </FlexRow>\n\n {children \|\| (\n <FlexCol gap={isXsSize ? 'xs' : 'sm'}>\n {titleSlot \|\| (\n <Text variant=\"bodyBold\" style={size === 'base' ? { lineHeight: '24px' } : {}}>\n {title}\n </Text>\n )}\n {messageSlot \|\| <Text variant=\"body\">{message}</Text>}\n </FlexCol>\n )}\n </FlexRow>\n\n <FlexRow justifyContent=\"flex-end\" className={styles.rightActionsContainer}>\n {rightActionsSlot}\n\n {rightActions && (\n <FlexCol justifyContent=\"center\" className={styles.rightActions}>\n {rightActions.map(({ label, ...actionProps }) => (\n <Button key={label} type=\"button\" size=\"sm\" {...actionProps}>\n {label}\n </Button>\n ))}\n </FlexCol>\n )}\n\n {onClickClose && (\n <FlexCol className={styles.closeContainer}>\n <Button\n variant=\"flat\"\n iconSlot={<CrossIcon />}\n onClick={onClickClose}\n aria-label=\"Close\"\n size=\"sm\"\n />\n </FlexCol>\n )}\n </FlexRow>\n </FlexRow>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;AAca,MAAA,KAAK,GAAG,CAAC,EACpB,IAAI,GAAG,MAAM,EACb,OAAO,GAAG,SAAS,EACnB,OAAO,EAAE,aAAa,EACtB,YAAY,EACZ,gBAAgB,EAChB,KAAK,EACL,SAAS,EACT,WAAW,EACX,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,GAAG,QAAQ,EACA,KAAI;AACf,IAAA,MAAM,WAAW,GAAG,OAAO,CAAC,OAAO,CAAC;AAEpC,IAAA,MAAM,QAAQ,GAAG,IAAI,KAAK,IAAI;IAE9B,QACEA,cAAC,CAAA,aAAA,CAAA,OAAO,EACN,EAAA,cAAc,EAAC,eAAe,EAC9B,SAAS,EAAE,eAAe,CAAC;AACzB,YAAA,MAAM,CAAC,cAAc;AACrB,YAAA,MAAM,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC;AACtB,YAAA,WAAW,CAAC,CAAA,EAAG,OAAO,CAAA,cAAA,CAAgB,CAAC;~~AACxC~~,SAAA,CAAC,~~KACE~~,QAAQ,EAAA;~~AAEZ~~,~~QAAAA~~,~~cAAA,~~CAAA,aAAA,~~CAAC~~,OAAO,~~EAAC~~,~~EAAA,~~UAAU,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,~~EAAE~~,SAAS,EAAE,MAAM,CAAC,iBAAiB,EAAA;~~AACrF~~,YAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,~~EACN,~~KAAK,EAAE,aAAa,CAAC,EAAE,SAAS,EAAE,aAAa,~~KAAb~~,~~IAAA,IAAA,~~aAAa,~~KAAb~~,SAAA,GAAA,SAAA,~~GAAA~~,aAAa,CAAE,OAAO,EAAE,CAAC,EAC3D,SAAS,EAAE,WAAW,CAAC,IAAI,~~EAE1B~~,EAAA,QAAQ,IAAIA,~~cAAA~~,~~CAAA~~,~~aAAA~~,~~CAAC,WAAW,~~EAAC,~~EAAA,~~IAAI,EAAC,cAAc,GAAG,CACxC;AAET,YAAA,QAAQ,KACPA,cAAC,CAAA,aAAA,CAAA,OAAO,IAAC,GAAG,EAAE,QAAQ,GAAG,IAAI,GAAG,IAAI,EAAA;AACjC,gBAAA,SAAS,KACRA,cAAC,CAAA,aAAA,CAAA,IAAI,EAAC,EAAA,OAAO,EAAC,UAAU,EAAC,KAAK,EAAE,IAAI,KAAK,MAAM,GAAG,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,EAAE,EAC1E,EAAA,KAAK,CACD,CACR;AACA,gBAAA,WAAW,IAAIA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,MAAM,EAAA,EAAE,OAAO,CAAQ,CAC7C,CACX,CACO;~~QAEVA~~,~~cAAC~~,CAAA,aAAA,~~CAAA~~,OAAO,EAAC,~~EAAA,~~cAAc,EAAC,UAAU,EAAC,SAAS,EAAE,MAAM,CAAC,qBAAqB,EAAA;~~YACvE~~,gBAAgB;YAEhB,YAAY,KACXA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,cAAc,EAAC,QAAQ,EAAC,SAAS,EAAE,MAAM,CAAC,YAAY,EAAA,EAC5D,YAAY,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,WAAW,EAAE,MAC1CA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAA,GAAK,WAAW,EAAA,EACxD,KAAK,CACC,CACV,CAAC,CACM,CACX;YAEA,YAAY,KACXA,cAAC,CAAA,aAAA,CAAA,OAAO,IAAC,SAAS,EAAE,MAAM,CAAC,cAAc,EAAA;gBACvCA,cAAC,CAAA,aAAA,CAAA,MAAM,EACL,EAAA,OAAO,EAAC,MAAM,EACd,QAAQ,EAAEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,IAAA,CAAG,EACvB,OAAO,EAAE,YAAY,EACV,YAAA,EAAA,OAAO,EAClB,IAAI,EAAC,IAAI,EACT,CAAA,CACM,CACX,CACO,CACF;AAEd;;;;"}
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 { 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\nexport const Alert = ({\n size = 'base',\n variant = 'default',\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\n const isXsSize = size === 'xs';\n\n return (\n <FlexRow\n justifyContent=\"space-between\"\n className={buildClassnames([\n styles.alertContainer,\n styles[`${size}-size`],\n alertStyles[`${variant}-alert-variant`],\n className,\n ])}\n flexWrap=\"nowrap\"\n {...divProps}\n >\n <FlexRow\n alignItems={isXsSize ? 'center' : 'start'}\n flexWrap=\"nowrap\"\n className={styles.iconTextContainer}\n >\n <FlexRow\n style={assignCssVars({ iconColor: passedColours?.primary })}\n className={alertStyles.icon}\n alignItems=\"start\"\n >\n {iconSlot \|\| <DefaultIcon role=\"presentation\" />}\n </FlexRow>\n\n {children \|\| (\n <FlexCol gap={isXsSize ? 'xs' : 'sm'}>\n {titleSlot \|\| (\n <Text variant=\"bodyBold\" style={size === 'base' ? { lineHeight: '24px' } : {}}>\n {title}\n </Text>\n )}\n {messageSlot \|\| <Text variant=\"body\">{message}</Text>}\n </FlexCol>\n )}\n </FlexRow>\n\n <FlexRow justifyContent=\"flex-end\" flexWrap=\"nowrap\" className={styles.rightActionsContainer}>\n {rightActionsSlot}\n\n {rightActions && (\n <FlexCol justifyContent=\"center\" className={styles.rightActions}>\n {rightActions.map(({ label, ...actionProps }) => (\n <Button key={label} type=\"button\" size=\"sm\" {...actionProps}>\n {label}\n </Button>\n ))}\n </FlexCol>\n )}\n\n {onClickClose && (\n <FlexCol className={styles.closeContainer}>\n <Button\n variant=\"flat\"\n iconSlot={<CrossIcon />}\n onClick={onClickClose}\n aria-label=\"Close\"\n size=\"sm\"\n />\n </FlexCol>\n )}\n </FlexRow>\n </FlexRow>\n );\n};\n"],"names":["React"],"mappings":"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"}

package/dist/components/Alerts/MiniAlert/MiniAlert.cjs CHANGED Viewed

@@ -14,9 +14,9 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-const MiniAlert = ({ title, variant = 'default', iconSlot, customTitleColour, customIconColour, }) => {
+const MiniAlert = ({ title, variant = 'default', iconSlot, customTitleColour, customIconColour, className, ...divProps }) => {
     const DefaultIcon = constants.IconMap[variant];
-    return (React__default.default.createElement(FlexRow.FlexRow, { gap: "xs", role: "status" },
+    return (React__default.default.createElement(FlexRow.FlexRow, { gap: "xs", role: "status", flexWrap: "nowrap", ...divProps, className: className },
         React__default.default.createElement(FlexRow.FlexRow, { style: assignCssVars.assignCssVars({ iconColor: customIconColour }), className: buildClassnames.buildClassnames([
                 Alerts_module.icon,
                 Alerts_module[`${variant}-alert-variant`],

package/dist/components/Alerts/MiniAlert/MiniAlert.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MiniAlert.cjs","sources":["../../../../src/components/Alerts/MiniAlert/MiniAlert.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames, assignCssVars } from '../../../utils';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { IconMap } from '../constants';\nimport { Text } from '../../Text';\n\nimport { MiniAlertProps } from './types';\n\nimport styles from './MiniAlert.module.scss';\nimport alertStyles from '../Alerts.module.scss';\n\nexport const MiniAlert = ({\n title,\n variant = 'default',\n iconSlot,\n customTitleColour,\n customIconColour,\n}: MiniAlertProps) => {\n const DefaultIcon = IconMap[variant];\n\n return (\n <FlexRow gap=\"xs\" role=\"status\">\n <FlexRow\n style={assignCssVars({ iconColor: customIconColour })}\n className={buildClassnames([\n alertStyles.icon,\n alertStyles[`${variant}-alert-variant`],\n styles['mini-alert-size'],\n ])}\n >\n {iconSlot \|\| <DefaultIcon role=\"presentation\" />}\n </FlexRow>\n <Text\n variant=\"bodyBold\"\n style={assignCssVars({ textColor: customTitleColour })}\n className={buildClassnames([styles.text, styles[`${variant}-variant`]])}\n >\n {title}\n </Text>\n </FlexRow>\n );\n};\n"],"names":["IconMap","React","FlexRow","assignCssVars","buildClassnames","alertStyles","styles","Text"],"mappings":";;;;;;;;;;;;;;;;AAWa,MAAA,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,OAAO,GAAG,SAAS,EACnB,QAAQ,EACR,iBAAiB,EACjB,gBAAgB,~~GACD~~,KAAI;AACnB,IAAA,MAAM,WAAW,GAAGA,iBAAO,CAAC,OAAO,CAAC;IAEpC,QACEC,~~sBAAC~~,~~CAAA~~,~~aAAA~~,~~CAAAC,eAAO,~~EAAC,~~EAAA,~~GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,EAAA;~~AAC7B~~,QAAAD,sBAAA,CAAA,aAAA,CAACC,eAAO,EACN,EAAA,KAAK,EAAEC,2BAAa,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC,EACrD,SAAS,EAAEC,+BAAe,CAAC;AACzB,gBAAAC,aAAW,CAAC,IAAI;AAChB,gBAAAA,aAAW,CAAC,CAAA,EAAG,OAAO,CAAA,cAAA,CAAgB,CAAC;gBACvCC,gBAAM,CAAC,iBAAiB,CAAC;aAC1B,CAAC,EAAA,EAED,QAAQ,IAAIL,sBAAC,CAAA,aAAA,CAAA,WAAW,IAAC,IAAI,EAAC,cAAc,EAAA,CAAG,CACxC;AACV,QAAAA,sBAAA,CAAA,aAAA,CAACM,SAAI,EACH,EAAA,OAAO,EAAC,UAAU,EAClB,KAAK,EAAEJ,2BAAa,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC,EACtD,SAAS,EAAEC,+BAAe,CAAC,CAACE,gBAAM,CAAC,IAAI,EAAEA,gBAAM,CAAC,CAAG,EAAA,OAAO,CAAU,QAAA,CAAA,CAAC,CAAC,CAAC,EAAA,EAEtE,KAAK,CACD,CACC;AAEd;;;;"}
1	+ {"version":3,"file":"MiniAlert.cjs","sources":["../../../../src/components/Alerts/MiniAlert/MiniAlert.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames, assignCssVars } from '../../../utils';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { IconMap } from '../constants';\nimport { Text } from '../../Text';\n\nimport { MiniAlertProps } from './types';\n\nimport styles from './MiniAlert.module.scss';\nimport alertStyles from '../Alerts.module.scss';\n\nexport const MiniAlert = ({\n title,\n variant = 'default',\n iconSlot,\n customTitleColour,\n customIconColour,\n className,\n ...divProps\n}: MiniAlertProps) => {\n const DefaultIcon = IconMap[variant];\n\n return (\n <FlexRow gap=\"xs\" role=\"status\" flexWrap=\"nowrap\" {...divProps} className={className}>\n <FlexRow\n style={assignCssVars({ iconColor: customIconColour })}\n className={buildClassnames([\n alertStyles.icon,\n alertStyles[`${variant}-alert-variant`],\n styles['mini-alert-size'],\n ])}\n >\n {iconSlot \|\| <DefaultIcon role=\"presentation\" />}\n </FlexRow>\n <Text\n variant=\"bodyBold\"\n style={assignCssVars({ textColor: customTitleColour })}\n className={buildClassnames([styles.text, styles[`${variant}-variant`]])}\n >\n {title}\n </Text>\n </FlexRow>\n );\n};\n"],"names":["IconMap","React","FlexRow","assignCssVars","buildClassnames","alertStyles","styles","Text"],"mappings":";;;;;;;;;;;;;;;;AAWa,MAAA,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,OAAO,GAAG,SAAS,EACnB,QAAQ,EACR,iBAAiB,EACjB,gBAAgB,EAChB,SAAS,EACT,GAAG,QAAQ,EACI,KAAI;AACnB,IAAA,MAAM,WAAW,GAAGA,iBAAO,CAAC,OAAO,CAAC;IAEpC,QACEC,qCAACC,eAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAC,QAAQ,EAAA,GAAK,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAA;AAClF,QAAAD,sBAAA,CAAA,aAAA,CAACC,eAAO,EACN,EAAA,KAAK,EAAEC,2BAAa,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC,EACrD,SAAS,EAAEC,+BAAe,CAAC;AACzB,gBAAAC,aAAW,CAAC,IAAI;AAChB,gBAAAA,aAAW,CAAC,CAAA,EAAG,OAAO,CAAA,cAAA,CAAgB,CAAC;gBACvCC,gBAAM,CAAC,iBAAiB,CAAC;aAC1B,CAAC,EAAA,EAED,QAAQ,IAAIL,sBAAC,CAAA,aAAA,CAAA,WAAW,IAAC,IAAI,EAAC,cAAc,EAAA,CAAG,CACxC;AACV,QAAAA,sBAAA,CAAA,aAAA,CAACM,SAAI,EACH,EAAA,OAAO,EAAC,UAAU,EAClB,KAAK,EAAEJ,2BAAa,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC,EACtD,SAAS,EAAEC,+BAAe,CAAC,CAACE,gBAAM,CAAC,IAAI,EAAEA,gBAAM,CAAC,CAAG,EAAA,OAAO,CAAU,QAAA,CAAA,CAAC,CAAC,CAAC,EAAA,EAEtE,KAAK,CACD,CACC;AAEd;;;;"}

package/dist/components/Alerts/MiniAlert/MiniAlert.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
 import React from 'react';
 import { MiniAlertProps } from './types';
-export declare const MiniAlert: ({ title, variant, iconSlot, customTitleColour, customIconColour, }: MiniAlertProps) => React.JSX.Element;
+export declare const MiniAlert: ({ title, variant, iconSlot, customTitleColour, customIconColour, className, ...divProps }: MiniAlertProps) => React.JSX.Element;

package/dist/components/Alerts/MiniAlert/MiniAlert.js CHANGED Viewed

@@ -8,9 +8,9 @@ import { Text } from '../../Text/Text.js';
 import styles from './MiniAlert.module.scss.js';
 import alertStyles from '../Alerts.module.scss.js';
-const MiniAlert = ({ title, variant = 'default', iconSlot, customTitleColour, customIconColour, }) => {
+const MiniAlert = ({ title, variant = 'default', iconSlot, customTitleColour, customIconColour, className, ...divProps }) => {
     const DefaultIcon = IconMap[variant];
-    return (React__default.createElement(FlexRow, { gap: "xs", role: "status" },
+    return (React__default.createElement(FlexRow, { gap: "xs", role: "status", flexWrap: "nowrap", ...divProps, className: className },
         React__default.createElement(FlexRow, { style: assignCssVars({ iconColor: customIconColour }), className: buildClassnames([
                 alertStyles.icon,
                 alertStyles[`${variant}-alert-variant`],

package/dist/components/Alerts/MiniAlert/MiniAlert.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MiniAlert.js","sources":["../../../../src/components/Alerts/MiniAlert/MiniAlert.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames, assignCssVars } from '../../../utils';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { IconMap } from '../constants';\nimport { Text } from '../../Text';\n\nimport { MiniAlertProps } from './types';\n\nimport styles from './MiniAlert.module.scss';\nimport alertStyles from '../Alerts.module.scss';\n\nexport const MiniAlert = ({\n title,\n variant = 'default',\n iconSlot,\n customTitleColour,\n customIconColour,\n}: MiniAlertProps) => {\n const DefaultIcon = IconMap[variant];\n\n return (\n <FlexRow gap=\"xs\" role=\"status\">\n <FlexRow\n style={assignCssVars({ iconColor: customIconColour })}\n className={buildClassnames([\n alertStyles.icon,\n alertStyles[`${variant}-alert-variant`],\n styles['mini-alert-size'],\n ])}\n >\n {iconSlot \|\| <DefaultIcon role=\"presentation\" />}\n </FlexRow>\n <Text\n variant=\"bodyBold\"\n style={assignCssVars({ textColor: customTitleColour })}\n className={buildClassnames([styles.text, styles[`${variant}-variant`]])}\n >\n {title}\n </Text>\n </FlexRow>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;AAWa,MAAA,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,OAAO,GAAG,SAAS,EACnB,QAAQ,EACR,iBAAiB,EACjB,gBAAgB,~~GACD~~,KAAI;AACnB,IAAA,MAAM,WAAW,GAAG,OAAO,CAAC,OAAO,CAAC;IAEpC,QACEA,~~cAAC~~,~~CAAA~~,~~aAAA~~,~~CAAA,OAAO,~~EAAC,~~EAAA,~~GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,EAAA;~~AAC7B~~,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EACN,EAAA,KAAK,EAAE,aAAa,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC,EACrD,SAAS,EAAE,eAAe,CAAC;AACzB,gBAAA,WAAW,CAAC,IAAI;AAChB,gBAAA,WAAW,CAAC,CAAA,EAAG,OAAO,CAAA,cAAA,CAAgB,CAAC;gBACvC,MAAM,CAAC,iBAAiB,CAAC;aAC1B,CAAC,EAAA,EAED,QAAQ,IAAIA,cAAC,CAAA,aAAA,CAAA,WAAW,IAAC,IAAI,EAAC,cAAc,EAAA,CAAG,CACxC;AACV,QAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EACH,EAAA,OAAO,EAAC,UAAU,EAClB,KAAK,EAAE,aAAa,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC,EACtD,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,CAAG,EAAA,OAAO,CAAU,QAAA,CAAA,CAAC,CAAC,CAAC,EAAA,EAEtE,KAAK,CACD,CACC;AAEd;;;;"}
1	+ {"version":3,"file":"MiniAlert.js","sources":["../../../../src/components/Alerts/MiniAlert/MiniAlert.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames, assignCssVars } from '../../../utils';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { IconMap } from '../constants';\nimport { Text } from '../../Text';\n\nimport { MiniAlertProps } from './types';\n\nimport styles from './MiniAlert.module.scss';\nimport alertStyles from '../Alerts.module.scss';\n\nexport const MiniAlert = ({\n title,\n variant = 'default',\n iconSlot,\n customTitleColour,\n customIconColour,\n className,\n ...divProps\n}: MiniAlertProps) => {\n const DefaultIcon = IconMap[variant];\n\n return (\n <FlexRow gap=\"xs\" role=\"status\" flexWrap=\"nowrap\" {...divProps} className={className}>\n <FlexRow\n style={assignCssVars({ iconColor: customIconColour })}\n className={buildClassnames([\n alertStyles.icon,\n alertStyles[`${variant}-alert-variant`],\n styles['mini-alert-size'],\n ])}\n >\n {iconSlot \|\| <DefaultIcon role=\"presentation\" />}\n </FlexRow>\n <Text\n variant=\"bodyBold\"\n style={assignCssVars({ textColor: customTitleColour })}\n className={buildClassnames([styles.text, styles[`${variant}-variant`]])}\n >\n {title}\n </Text>\n </FlexRow>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;AAWa,MAAA,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,OAAO,GAAG,SAAS,EACnB,QAAQ,EACR,iBAAiB,EACjB,gBAAgB,EAChB,SAAS,EACT,GAAG,QAAQ,EACI,KAAI;AACnB,IAAA,MAAM,WAAW,GAAG,OAAO,CAAC,OAAO,CAAC;IAEpC,QACEA,6BAAC,OAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAC,QAAQ,EAAA,GAAK,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAA;AAClF,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EACN,EAAA,KAAK,EAAE,aAAa,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC,EACrD,SAAS,EAAE,eAAe,CAAC;AACzB,gBAAA,WAAW,CAAC,IAAI;AAChB,gBAAA,WAAW,CAAC,CAAA,EAAG,OAAO,CAAA,cAAA,CAAgB,CAAC;gBACvC,MAAM,CAAC,iBAAiB,CAAC;aAC1B,CAAC,EAAA,EAED,QAAQ,IAAIA,cAAC,CAAA,aAAA,CAAA,WAAW,IAAC,IAAI,EAAC,cAAc,EAAA,CAAG,CACxC;AACV,QAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EACH,EAAA,OAAO,EAAC,UAAU,EAClB,KAAK,EAAE,aAAa,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC,EACtD,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,CAAG,EAAA,OAAO,CAAU,QAAA,CAAA,CAAC,CAAC,CAAC,EAAA,EAEtE,KAAK,CACD,CACC;AAEd;;;;"}

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

@@ -1,5 +1,6 @@
+/// <reference types="react" />
 import { BaseAlertProps } from '../types';
-export type MiniAlertProps = BaseAlertProps & {
+export type MiniAlertProps = React.HTMLAttributes<HTMLDivElement> & BaseAlertProps & {
     customIconColour?: string;
     customTitleColour?: string;
 };

package/dist/components/Avatar/Avatar.cjs CHANGED Viewed

@@ -20,10 +20,10 @@ const textVariantMapping = {
     xl: 'headingSmall',
     xxl: 'headingMedium',
 };
-const Avatar = ({ size = 'lg', name, bgColor, textColor, iconSlot, imageUrl, hasIndicator = false, ariaLabel = `Avatar of ${name}`, }) => {
+const Avatar = ({ size = 'lg', name, bgColor, textColor, iconSlot, imageUrl, hasIndicator = false, ariaLabel = `Avatar of ${name}`, className, }) => {
     var _a;
     const textVariant = textVariantMapping[size];
-    return (React__default.default.createElement(FlexRow.FlexRow, { justifyContent: "center", className: buildClassnames.buildClassnames([Avatar_module.avatar, Avatar_module[`${size}-size`]]), style: {
+    return (React__default.default.createElement(FlexRow.FlexRow, { justifyContent: "center", className: buildClassnames.buildClassnames([Avatar_module.avatar, Avatar_module[`${size}-size`], className]), style: {
             ...assignCssVars.assignCssVars({
                 avatarBgColor: iconSlot ? index.theme.colors.neutral.grey.lightest : bgColor,
                 avatarTextColor: textColor,

package/dist/components/Avatar/Avatar.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Avatar.cjs","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React from 'react';\nimport { assignCssVars, buildClassnames } from '../../utils';\nimport { CriticalIcon } from '../../icons/custom/components/CriticalIcon';\nimport { theme } from '../../theme';\nimport styles from './Avatar.module.scss';\nimport { AvatarProps } from './types';\nimport { Text } from '../Text';\nimport { FlexRow } from '../Flex/FlexRow';\n\nconst textVariantMapping: Record<string, any> = {\n md: 'bodySmallBold',\n lg: 'bodySmallBold',\n xl: 'headingSmall',\n xxl: 'headingMedium',\n};\n\nexport const Avatar = ({\n size = 'lg',\n name,\n bgColor,\n textColor,\n iconSlot,\n imageUrl,\n hasIndicator = false,\n ariaLabel = `Avatar of ${name}`,\n}: AvatarProps) => {\n const textVariant = textVariantMapping[size];\n\n return (\n <FlexRow\n justifyContent=\"center\"\n className={buildClassnames([styles.avatar, styles[`${size}-size`]])}\n style={\n {\n ...assignCssVars({\n avatarBgColor: iconSlot ? theme.colors.neutral.grey.lightest : bgColor,\n avatarTextColor: textColor,\n }),\n } as React.CSSProperties\n }\n aria-label={ariaLabel}\n >\n {hasIndicator && (\n <CriticalIcon\n className={styles.indicatorIcon}\n color={theme.colors.secondary.red.base}\n fill={theme.colors.neutral.grey.lightest}\n role=\"status\"\n aria-live=\"polite\"\n aria-label=\"Avatar has an error\"\n />\n )}\n {imageUrl && <img src={imageUrl} alt={name} className={styles.avatarImage} />}\n {!!iconSlot && iconSlot}\n {!imageUrl && !iconSlot && (\n <Text variant={textVariant} className={styles.avatarText}>\n {name\n .toUpperCase()\n .match(/(\\b\\w\|\\+)/g)\n ?.slice(0, 2)}\n </Text>\n )}\n </FlexRow>\n );\n};\n"],"names":["React","FlexRow","buildClassnames","styles","assignCssVars","theme","CriticalIcon","Text"],"mappings":";;;;;;;;;;;;;;;;AASA,MAAM,kBAAkB,GAAwB;AAC9C,IAAA,EAAE,EAAE,eAAe;AACnB,IAAA,EAAE,EAAE,eAAe;AACnB,IAAA,EAAE,EAAE,cAAc;AAClB,IAAA,GAAG,EAAE,eAAe;CACrB;AAEM,MAAM,MAAM,GAAG,CAAC,EACrB,IAAI,GAAG,IAAI,EACX,IAAI,EACJ,OAAO,EACP,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,YAAY,GAAG,KAAK,EACpB,SAAS,GAAG,~~CAAa~~,UAAA,~~EAAA~~,IAAI,CAAE,CAAA,~~GACnB~~,KAAI;;AAChB,IAAA,MAAM,WAAW,GAAG,kBAAkB,CAAC,IAAI,CAAC;~~IAE5C~~,QACEA,~~sBAAC~~,CAAA,aAAA,~~CAAAC~~,eAAO,EACN,~~EAAA,~~cAAc,EAAC,QAAQ,EACvB,SAAS,EAAEC,+BAAe,CAAC,CAACC,aAAM,CAAC,MAAM,EAAEA,aAAM,CAAC,~~CAAG~~,~~EAAA~~,IAAI,~~CAAO~~,KAAA,~~CAAA~~,CAAC,CAAC,CAAC,~~EACnE~~,KAAK,EACH;AACE,YAAA,GAAGC,2BAAa,CAAC;AACf,gBAAA,aAAa,EAAE,QAAQ,GAAGC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,GAAG,OAAO;AACtE,gBAAA,eAAe,EAAE,SAAS;aAC3B,CAAC;AACoB,SAAA,EAAA,YAAA,EAEd,SAAS,EAAA;AAEpB,QAAA,YAAY,KACXL,sBAAA,CAAA,aAAA,CAACM,yBAAY,EACX,EAAA,SAAS,EAAEH,aAAM,CAAC,aAAa,EAC/B,KAAK,EAAEE,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EACtC,IAAI,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,EACxC,IAAI,EAAC,QAAQ,EAAA,WAAA,EACH,QAAQ,EACP,YAAA,EAAA,qBAAqB,GAChC,CACH;AACA,QAAA,QAAQ,IAAIL,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAEG,aAAM,CAAC,WAAW,EAAI,CAAA;QAC5E,CAAC,CAAC,QAAQ,IAAI,QAAQ;QACtB,CAAC,QAAQ,IAAI,CAAC,QAAQ,KACrBH,sBAAA,CAAA,aAAA,CAACO,SAAI,EAAC,EAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAEJ,aAAM,CAAC,UAAU,EAAA,EACrD,MAAA;AACE,aAAA,WAAW;AACX,aAAA,KAAK,CAAC,YAAY,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAClB,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CACV,CACR,CACO;AAEd;;;;"}
1	+ {"version":3,"file":"Avatar.cjs","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React from 'react';\nimport { assignCssVars, buildClassnames } from '../../utils';\nimport { CriticalIcon } from '../../icons/custom/components/CriticalIcon';\nimport { theme } from '../../theme';\nimport styles from './Avatar.module.scss';\nimport { AvatarProps } from './types';\nimport { Text } from '../Text';\nimport { FlexRow } from '../Flex/FlexRow';\n\nconst textVariantMapping: Record<string, any> = {\n md: 'bodySmallBold',\n lg: 'bodySmallBold',\n xl: 'headingSmall',\n xxl: 'headingMedium',\n};\n\nexport const Avatar = ({\n size = 'lg',\n name,\n bgColor,\n textColor,\n iconSlot,\n imageUrl,\n hasIndicator = false,\n ariaLabel = `Avatar of ${name}`,\n className,\n}: AvatarProps) => {\n const textVariant = textVariantMapping[size];\n\n return (\n <FlexRow\n justifyContent=\"center\"\n className={buildClassnames([styles.avatar, styles[`${size}-size`], className])}\n style={\n {\n ...assignCssVars({\n avatarBgColor: iconSlot ? theme.colors.neutral.grey.lightest : bgColor,\n avatarTextColor: textColor,\n }),\n } as React.CSSProperties\n }\n aria-label={ariaLabel}\n >\n {hasIndicator && (\n <CriticalIcon\n className={styles.indicatorIcon}\n color={theme.colors.secondary.red.base}\n fill={theme.colors.neutral.grey.lightest}\n role=\"status\"\n aria-live=\"polite\"\n aria-label=\"Avatar has an error\"\n />\n )}\n {imageUrl && <img src={imageUrl} alt={name} className={styles.avatarImage} />}\n {!!iconSlot && iconSlot}\n {!imageUrl && !iconSlot && (\n <Text variant={textVariant} className={styles.avatarText}>\n {name\n .toUpperCase()\n .match(/(\\b\\w\|\\+)/g)\n ?.slice(0, 2)}\n </Text>\n )}\n </FlexRow>\n );\n};\n"],"names":["React","FlexRow","buildClassnames","styles","assignCssVars","theme","CriticalIcon","Text"],"mappings":";;;;;;;;;;;;;;;;AASA,MAAM,kBAAkB,GAAwB;AAC9C,IAAA,EAAE,EAAE,eAAe;AACnB,IAAA,EAAE,EAAE,eAAe;AACnB,IAAA,EAAE,EAAE,cAAc;AAClB,IAAA,GAAG,EAAE,eAAe;CACrB;AAEM,MAAM,MAAM,GAAG,CAAC,EACrB,IAAI,GAAG,IAAI,EACX,IAAI,EACJ,OAAO,EACP,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,YAAY,GAAG,KAAK,EACpB,SAAS,GAAG,CAAA,UAAA,EAAa,IAAI,CAAE,CAAA,EAC/B,SAAS,GACG,KAAI;;AAChB,IAAA,MAAM,WAAW,GAAG,kBAAkB,CAAC,IAAI,CAAC;AAE5C,IAAA,QACEA,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAA,EACN,cAAc,EAAC,QAAQ,EACvB,SAAS,EAAEC,+BAAe,CAAC,CAACC,aAAM,CAAC,MAAM,EAAEA,aAAM,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC,EAAE,SAAS,CAAC,CAAC,EAC9E,KAAK,EACH;AACE,YAAA,GAAGC,2BAAa,CAAC;AACf,gBAAA,aAAa,EAAE,QAAQ,GAAGC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,GAAG,OAAO;AACtE,gBAAA,eAAe,EAAE,SAAS;aAC3B,CAAC;AACoB,SAAA,EAAA,YAAA,EAEd,SAAS,EAAA;AAEpB,QAAA,YAAY,KACXL,sBAAA,CAAA,aAAA,CAACM,yBAAY,EACX,EAAA,SAAS,EAAEH,aAAM,CAAC,aAAa,EAC/B,KAAK,EAAEE,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EACtC,IAAI,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,EACxC,IAAI,EAAC,QAAQ,EAAA,WAAA,EACH,QAAQ,EACP,YAAA,EAAA,qBAAqB,GAChC,CACH;AACA,QAAA,QAAQ,IAAIL,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAEG,aAAM,CAAC,WAAW,EAAI,CAAA;QAC5E,CAAC,CAAC,QAAQ,IAAI,QAAQ;QACtB,CAAC,QAAQ,IAAI,CAAC,QAAQ,KACrBH,sBAAA,CAAA,aAAA,CAACO,SAAI,EAAC,EAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAEJ,aAAM,CAAC,UAAU,EAAA,EACrD,MAAA;AACE,aAAA,WAAW;AACX,aAAA,KAAK,CAAC,YAAY,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAClB,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CACV,CACR,CACO;AAEd;;;;"}

package/dist/components/Avatar/Avatar.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
 import React from 'react';
 import { AvatarProps } from './types';
-export declare const Avatar: ({ size, name, bgColor, textColor, iconSlot, imageUrl, hasIndicator, ariaLabel, }: AvatarProps) => React.JSX.Element;
+export declare const Avatar: ({ size, name, bgColor, textColor, iconSlot, imageUrl, hasIndicator, ariaLabel, className, }: AvatarProps) => React.JSX.Element;

package/dist/components/Avatar/Avatar.js CHANGED Viewed

@@ -14,10 +14,10 @@ const textVariantMapping = {
     xl: 'headingSmall',
     xxl: 'headingMedium',
 };
-const Avatar = ({ size = 'lg', name, bgColor, textColor, iconSlot, imageUrl, hasIndicator = false, ariaLabel = `Avatar of ${name}`, }) => {
+const Avatar = ({ size = 'lg', name, bgColor, textColor, iconSlot, imageUrl, hasIndicator = false, ariaLabel = `Avatar of ${name}`, className, }) => {
     var _a;
     const textVariant = textVariantMapping[size];
-    return (React__default.createElement(FlexRow, { justifyContent: "center", className: buildClassnames([styles.avatar, styles[`${size}-size`]]), style: {
+    return (React__default.createElement(FlexRow, { justifyContent: "center", className: buildClassnames([styles.avatar, styles[`${size}-size`], className]), style: {
             ...assignCssVars({
                 avatarBgColor: iconSlot ? theme.colors.neutral.grey.lightest : bgColor,
                 avatarTextColor: textColor,

package/dist/components/Avatar/Avatar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Avatar.js","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React from 'react';\nimport { assignCssVars, buildClassnames } from '../../utils';\nimport { CriticalIcon } from '../../icons/custom/components/CriticalIcon';\nimport { theme } from '../../theme';\nimport styles from './Avatar.module.scss';\nimport { AvatarProps } from './types';\nimport { Text } from '../Text';\nimport { FlexRow } from '../Flex/FlexRow';\n\nconst textVariantMapping: Record<string, any> = {\n md: 'bodySmallBold',\n lg: 'bodySmallBold',\n xl: 'headingSmall',\n xxl: 'headingMedium',\n};\n\nexport const Avatar = ({\n size = 'lg',\n name,\n bgColor,\n textColor,\n iconSlot,\n imageUrl,\n hasIndicator = false,\n ariaLabel = `Avatar of ${name}`,\n}: AvatarProps) => {\n const textVariant = textVariantMapping[size];\n\n return (\n <FlexRow\n justifyContent=\"center\"\n className={buildClassnames([styles.avatar, styles[`${size}-size`]])}\n style={\n {\n ...assignCssVars({\n avatarBgColor: iconSlot ? theme.colors.neutral.grey.lightest : bgColor,\n avatarTextColor: textColor,\n }),\n } as React.CSSProperties\n }\n aria-label={ariaLabel}\n >\n {hasIndicator && (\n <CriticalIcon\n className={styles.indicatorIcon}\n color={theme.colors.secondary.red.base}\n fill={theme.colors.neutral.grey.lightest}\n role=\"status\"\n aria-live=\"polite\"\n aria-label=\"Avatar has an error\"\n />\n )}\n {imageUrl && <img src={imageUrl} alt={name} className={styles.avatarImage} />}\n {!!iconSlot && iconSlot}\n {!imageUrl && !iconSlot && (\n <Text variant={textVariant} className={styles.avatarText}>\n {name\n .toUpperCase()\n .match(/(\\b\\w\|\\+)/g)\n ?.slice(0, 2)}\n </Text>\n )}\n </FlexRow>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;AASA,MAAM,kBAAkB,GAAwB;AAC9C,IAAA,EAAE,EAAE,eAAe;AACnB,IAAA,EAAE,EAAE,eAAe;AACnB,IAAA,EAAE,EAAE,cAAc;AAClB,IAAA,GAAG,EAAE,eAAe;CACrB;AAEM,MAAM,MAAM,GAAG,CAAC,EACrB,IAAI,GAAG,IAAI,EACX,IAAI,EACJ,OAAO,EACP,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,YAAY,GAAG,KAAK,EACpB,SAAS,GAAG,~~CAAa~~,UAAA,~~EAAA~~,IAAI,CAAE,CAAA,~~GACnB~~,KAAI;;AAChB,IAAA,MAAM,WAAW,GAAG,kBAAkB,CAAC,IAAI,CAAC;~~IAE5C~~,QACEA,~~cAAC~~,CAAA,aAAA,~~CAAA~~,OAAO,EACN,~~EAAA,~~cAAc,EAAC,QAAQ,EACvB,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,~~CAAG~~,~~EAAA~~,IAAI,~~CAAO~~,KAAA,~~CAAA~~,CAAC,CAAC,CAAC,~~EACnE~~,KAAK,EACH;AACE,YAAA,GAAG,aAAa,CAAC;AACf,gBAAA,aAAa,EAAE,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,GAAG,OAAO;AACtE,gBAAA,eAAe,EAAE,SAAS;aAC3B,CAAC;AACoB,SAAA,EAAA,YAAA,EAEd,SAAS,EAAA;AAEpB,QAAA,YAAY,KACXA,cAAA,CAAA,aAAA,CAAC,YAAY,EACX,EAAA,SAAS,EAAE,MAAM,CAAC,aAAa,EAC/B,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EACtC,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,EACxC,IAAI,EAAC,QAAQ,EAAA,WAAA,EACH,QAAQ,EACP,YAAA,EAAA,qBAAqB,GAChC,CACH;AACA,QAAA,QAAQ,IAAIA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,WAAW,EAAI,CAAA;QAC5E,CAAC,CAAC,QAAQ,IAAI,QAAQ;QACtB,CAAC,QAAQ,IAAI,CAAC,QAAQ,KACrBA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,CAAC,UAAU,EAAA,EACrD,MAAA;AACE,aAAA,WAAW;AACX,aAAA,KAAK,CAAC,YAAY,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAClB,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CACV,CACR,CACO;AAEd;;;;"}
1	+ {"version":3,"file":"Avatar.js","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React from 'react';\nimport { assignCssVars, buildClassnames } from '../../utils';\nimport { CriticalIcon } from '../../icons/custom/components/CriticalIcon';\nimport { theme } from '../../theme';\nimport styles from './Avatar.module.scss';\nimport { AvatarProps } from './types';\nimport { Text } from '../Text';\nimport { FlexRow } from '../Flex/FlexRow';\n\nconst textVariantMapping: Record<string, any> = {\n md: 'bodySmallBold',\n lg: 'bodySmallBold',\n xl: 'headingSmall',\n xxl: 'headingMedium',\n};\n\nexport const Avatar = ({\n size = 'lg',\n name,\n bgColor,\n textColor,\n iconSlot,\n imageUrl,\n hasIndicator = false,\n ariaLabel = `Avatar of ${name}`,\n className,\n}: AvatarProps) => {\n const textVariant = textVariantMapping[size];\n\n return (\n <FlexRow\n justifyContent=\"center\"\n className={buildClassnames([styles.avatar, styles[`${size}-size`], className])}\n style={\n {\n ...assignCssVars({\n avatarBgColor: iconSlot ? theme.colors.neutral.grey.lightest : bgColor,\n avatarTextColor: textColor,\n }),\n } as React.CSSProperties\n }\n aria-label={ariaLabel}\n >\n {hasIndicator && (\n <CriticalIcon\n className={styles.indicatorIcon}\n color={theme.colors.secondary.red.base}\n fill={theme.colors.neutral.grey.lightest}\n role=\"status\"\n aria-live=\"polite\"\n aria-label=\"Avatar has an error\"\n />\n )}\n {imageUrl && <img src={imageUrl} alt={name} className={styles.avatarImage} />}\n {!!iconSlot && iconSlot}\n {!imageUrl && !iconSlot && (\n <Text variant={textVariant} className={styles.avatarText}>\n {name\n .toUpperCase()\n .match(/(\\b\\w\|\\+)/g)\n ?.slice(0, 2)}\n </Text>\n )}\n </FlexRow>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;AASA,MAAM,kBAAkB,GAAwB;AAC9C,IAAA,EAAE,EAAE,eAAe;AACnB,IAAA,EAAE,EAAE,eAAe;AACnB,IAAA,EAAE,EAAE,cAAc;AAClB,IAAA,GAAG,EAAE,eAAe;CACrB;AAEM,MAAM,MAAM,GAAG,CAAC,EACrB,IAAI,GAAG,IAAI,EACX,IAAI,EACJ,OAAO,EACP,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,YAAY,GAAG,KAAK,EACpB,SAAS,GAAG,CAAA,UAAA,EAAa,IAAI,CAAE,CAAA,EAC/B,SAAS,GACG,KAAI;;AAChB,IAAA,MAAM,WAAW,GAAG,kBAAkB,CAAC,IAAI,CAAC;AAE5C,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EACN,cAAc,EAAC,QAAQ,EACvB,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC,EAAE,SAAS,CAAC,CAAC,EAC9E,KAAK,EACH;AACE,YAAA,GAAG,aAAa,CAAC;AACf,gBAAA,aAAa,EAAE,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,GAAG,OAAO;AACtE,gBAAA,eAAe,EAAE,SAAS;aAC3B,CAAC;AACoB,SAAA,EAAA,YAAA,EAEd,SAAS,EAAA;AAEpB,QAAA,YAAY,KACXA,cAAA,CAAA,aAAA,CAAC,YAAY,EACX,EAAA,SAAS,EAAE,MAAM,CAAC,aAAa,EAC/B,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EACtC,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,EACxC,IAAI,EAAC,QAAQ,EAAA,WAAA,EACH,QAAQ,EACP,YAAA,EAAA,qBAAqB,GAChC,CACH;AACA,QAAA,QAAQ,IAAIA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,WAAW,EAAI,CAAA;QAC5E,CAAC,CAAC,QAAQ,IAAI,QAAQ;QACtB,CAAC,QAAQ,IAAI,CAAC,QAAQ,KACrBA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,CAAC,UAAU,EAAA,EACrD,MAAA;AACE,aAAA,WAAW;AACX,aAAA,KAAK,CAAC,YAAY,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAClB,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CACV,CACR,CACO;AAEd;;;;"}

package/dist/components/Avatar/types.d.ts CHANGED Viewed

@@ -5,7 +5,7 @@ export declare enum AvatarSize {
     xl = "xl",
     xxl = "xxl"
 }
-export type AvatarProps = {
+export type AvatarProps = React.HTMLAttributes<HTMLDivElement> & {
     name: string;
     size?: keyof typeof AvatarSize;
     bgColor?: string;

package/dist/components/AvatarGroup/AvatarGroup.d.ts CHANGED Viewed

@@ -1,11 +1,11 @@
 import React from 'react';
 import { AvatarProps } from '../Avatar/types';
-type AvatarGroupProps = {
+type AvatarGroupProps = React.HTMLAttributes<HTMLUListElement> & {
     avatars: Omit<AvatarProps, 'hasIndicator'>[];
     maxVisible?: number;
     compact?: boolean;
     ariaLabel?: string;
     hasIndicator?: boolean;
 };
-export declare const AvatarGroup: ({ avatars, maxVisible, compact, ariaLabel, hasIndicator, }: AvatarGroupProps) => React.JSX.Element;
+export declare const AvatarGroup: ({ avatars, maxVisible, compact, ariaLabel, hasIndicator, className, ...listProps }: AvatarGroupProps) => React.JSX.Element;
 export {};

package/dist/components/SelectDropdown/ListItem/ListItem.cjs CHANGED Viewed

@@ -14,9 +14,9 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-const ListItem = ({ id, label, href, appearance = 'primary', ...props }) => {
+const ListItem = ({ id, label, href, appearance = 'primary', className, ...props }) => {
     const idComputed = useId.useId({ id, prefix: 'list-item' });
-    return (React__default.default.createElement(reactAriaComponents.ListBoxItem, { id: idComputed, textValue: label, href: href, className: buildClassnames.buildClassnames([ListItem_module.listItem, ListItem_module[`appearance-${appearance}`]]), ...props }, ({ selectionMode, allowsDragging, isSelected }) => (React__default.default.createElement(ListItemContent.ListItemContent, { selectionMode: selectionMode, allowsDragging: allowsDragging, isSelected: isSelected, label: label, isLink: Boolean(href), appearance: appearance, ...props }))));
+    return (React__default.default.createElement(reactAriaComponents.ListBoxItem, { id: idComputed, textValue: label, href: href, className: buildClassnames.buildClassnames([ListItem_module.listItem, ListItem_module[`appearance-${appearance}`], className]), ...props }, ({ selectionMode, allowsDragging, isSelected }) => (React__default.default.createElement(ListItemContent.ListItemContent, { selectionMode: selectionMode, allowsDragging: allowsDragging, isSelected: isSelected, label: label, isLink: Boolean(href), appearance: appearance, ...props }))));
 };
 exports.ListItem = ListItem;

package/dist/components/SelectDropdown/ListItem/ListItem.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListItem.cjs","sources":["../../../../src/components/SelectDropdown/ListItem/ListItem.tsx"],"sourcesContent":["import React from 'react';\nimport { ListBoxItem, ListBoxItemRenderProps } from 'react-aria-components';\nimport { useId } from '../../../hooks';\nimport { ListItemProps } from './types';\nimport { ListItemContent } from './components/ListItemContent';\nimport styles from './ListItem.module.scss';\nimport { buildClassnames } from '../../../utils';\n\nexport const ListItem = ({ id, label, href, appearance = 'primary', ...props }: ListItemProps) => {\n const idComputed = useId({ id, prefix: 'list-item' });\n\n return (\n <ListBoxItem\n id={idComputed}\n textValue={label}\n href={href}\n className={buildClassnames([styles.listItem, styles[`appearance-${appearance}`]])}\n {...props}\n >\n {/* use react aria's render props to add more such as isHovered */}\n {({ selectionMode, allowsDragging, isSelected }: ListBoxItemRenderProps) => (\n <ListItemContent\n selectionMode={selectionMode}\n allowsDragging={allowsDragging}\n isSelected={isSelected}\n label={label}\n isLink={Boolean(href)}\n appearance={appearance}\n {...props}\n />\n )}\n </ListBoxItem>\n );\n};\n"],"names":["useId","React","ListBoxItem","buildClassnames","styles","ListItemContent"],"mappings":";;;;;;;;;;;;;;;;MAQa,QAAQ,GAAG,CAAC,~~EAAE~~,EAAE,~~EAAE~~,KAAK,~~EAAE~~,IAAI,~~EAAE~~,UAAU,GAAG,SAAS,~~EAAE~~,GAAG,KAAK,~~EAAiB~~,KAAI;~~AAC/F~~,IAAA,MAAM,UAAU,GAAGA,WAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC;AAErD,IAAA,QACEC,sBAAC,CAAA,aAAA,CAAAC,+BAAW,~~EACV~~,~~EAAA,~~EAAE,EAAE,UAAU,EACd,SAAS,EAAE,KAAK,EAChB,IAAI,EAAE,IAAI,EACV,SAAS,EAAEC,+BAAe,CAAC,CAACC,eAAM,CAAC,QAAQ,EAAEA,eAAM,CAAC,~~cAAc~~,UAAU,CAAA,~~CAAE,~~CAAC,CAAC,CAAC,~~EAC7E~~,~~GAAA~~,KAAK,~~IAGR~~,CAAC,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAA0B,MACrEH,~~sBAAA,CAAA,aAAA,CAACI~~,+BAAe,EACd,~~EAAA,~~aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,EACrB,UAAU,EAAE,UAAU,EAClB,GAAA,KAAK,GACT,CACH,CACW;AAElB;;;;"}
1	+ {"version":3,"file":"ListItem.cjs","sources":["../../../../src/components/SelectDropdown/ListItem/ListItem.tsx"],"sourcesContent":["import React from 'react';\nimport { ListBoxItem, ListBoxItemRenderProps } from 'react-aria-components';\nimport { useId } from '../../../hooks';\nimport { ListItemProps } from './types';\nimport { ListItemContent } from './components/ListItemContent';\nimport styles from './ListItem.module.scss';\nimport { buildClassnames } from '../../../utils';\n\nexport const ListItem = ({\n id,\n label,\n href,\n appearance = 'primary',\n className,\n ...props\n}: ListItemProps) => {\n const idComputed = useId({ id, prefix: 'list-item' });\n\n return (\n <ListBoxItem\n id={idComputed}\n textValue={label}\n href={href}\n className={buildClassnames([styles.listItem, styles[`appearance-${appearance}`], className])}\n {...props}\n >\n {/* use react aria's render props to add more such as isHovered */}\n {({ selectionMode, allowsDragging, isSelected }: ListBoxItemRenderProps) => (\n <ListItemContent\n selectionMode={selectionMode}\n allowsDragging={allowsDragging}\n isSelected={isSelected}\n label={label}\n isLink={Boolean(href)}\n appearance={appearance}\n {...props}\n />\n )}\n </ListBoxItem>\n );\n};\n"],"names":["useId","React","ListBoxItem","buildClassnames","styles","ListItemContent"],"mappings":";;;;;;;;;;;;;;;;MAQa,QAAQ,GAAG,CAAC,EACvB,EAAE,EACF,KAAK,EACL,IAAI,EACJ,UAAU,GAAG,SAAS,EACtB,SAAS,EACT,GAAG,KAAK,EACM,KAAI;AAClB,IAAA,MAAM,UAAU,GAAGA,WAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC;AAErD,IAAA,QACEC,sBAAC,CAAA,aAAA,CAAAC,+BAAW,IACV,EAAE,EAAE,UAAU,EACd,SAAS,EAAE,KAAK,EAChB,IAAI,EAAE,IAAI,EACV,SAAS,EAAEC,+BAAe,CAAC,CAACC,eAAM,CAAC,QAAQ,EAAEA,eAAM,CAAC,CAAA,WAAA,EAAc,UAAU,CAAE,CAAA,CAAC,EAAE,SAAS,CAAC,CAAC,EAAA,GACxF,KAAK,EAGR,EAAA,CAAC,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAA0B,MACrEH,qCAACI,+BAAe,EAAA,EACd,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,EACrB,UAAU,EAAE,UAAU,EAClB,GAAA,KAAK,GACT,CACH,CACW;AAElB;;;;"}

package/dist/components/SelectDropdown/ListItem/ListItem.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
 import React from 'react';
 import { ListItemProps } from './types';
-export declare const ListItem: ({ id, label, href, appearance, ...props }: ListItemProps) => React.JSX.Element;
+export declare const ListItem: ({ id, label, href, appearance, className, ...props }: ListItemProps) => React.JSX.Element;

package/dist/components/SelectDropdown/ListItem/ListItem.js CHANGED Viewed

@@ -8,9 +8,9 @@ import styles from './ListItem.module.scss.js';
 import { buildClassnames } from '../../../utils/buildClassnames.js';
 import 'uid/secure';
-const ListItem = ({ id, label, href, appearance = 'primary', ...props }) => {
+const ListItem = ({ id, label, href, appearance = 'primary', className, ...props }) => {
     const idComputed = useId({ id, prefix: 'list-item' });
-    return (React__default.createElement(ListBoxItem, { id: idComputed, textValue: label, href: href, className: buildClassnames([styles.listItem, styles[`appearance-${appearance}`]]), ...props }, ({ selectionMode, allowsDragging, isSelected }) => (React__default.createElement(ListItemContent, { selectionMode: selectionMode, allowsDragging: allowsDragging, isSelected: isSelected, label: label, isLink: Boolean(href), appearance: appearance, ...props }))));
+    return (React__default.createElement(ListBoxItem, { id: idComputed, textValue: label, href: href, className: buildClassnames([styles.listItem, styles[`appearance-${appearance}`], className]), ...props }, ({ selectionMode, allowsDragging, isSelected }) => (React__default.createElement(ListItemContent, { selectionMode: selectionMode, allowsDragging: allowsDragging, isSelected: isSelected, label: label, isLink: Boolean(href), appearance: appearance, ...props }))));
 };
 export { ListItem };

package/dist/components/SelectDropdown/ListItem/ListItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListItem.js","sources":["../../../../src/components/SelectDropdown/ListItem/ListItem.tsx"],"sourcesContent":["import React from 'react';\nimport { ListBoxItem, ListBoxItemRenderProps } from 'react-aria-components';\nimport { useId } from '../../../hooks';\nimport { ListItemProps } from './types';\nimport { ListItemContent } from './components/ListItemContent';\nimport styles from './ListItem.module.scss';\nimport { buildClassnames } from '../../../utils';\n\nexport const ListItem = ({ id, label, href, appearance = 'primary', ...props }: ListItemProps) => {\n const idComputed = useId({ id, prefix: 'list-item' });\n\n return (\n <ListBoxItem\n id={idComputed}\n textValue={label}\n href={href}\n className={buildClassnames([styles.listItem, styles[`appearance-${appearance}`]])}\n {...props}\n >\n {/* use react aria's render props to add more such as isHovered */}\n {({ selectionMode, allowsDragging, isSelected }: ListBoxItemRenderProps) => (\n <ListItemContent\n selectionMode={selectionMode}\n allowsDragging={allowsDragging}\n isSelected={isSelected}\n label={label}\n isLink={Boolean(href)}\n appearance={appearance}\n {...props}\n />\n )}\n </ListBoxItem>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;MAQa,QAAQ,GAAG,CAAC,~~EAAE~~,EAAE,~~EAAE~~,KAAK,~~EAAE~~,IAAI,~~EAAE~~,UAAU,GAAG,SAAS,~~EAAE~~,GAAG,KAAK,~~EAAiB~~,KAAI;~~AAC/F~~,IAAA,MAAM,UAAU,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC;AAErD,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,WAAW,~~EACV~~,~~EAAA,~~EAAE,EAAE,UAAU,EACd,SAAS,EAAE,KAAK,EAChB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,~~cAAc~~,UAAU,CAAA,~~CAAE,~~CAAC,CAAC,CAAC,~~EAC7E~~,~~GAAA~~,KAAK,~~IAGR~~,CAAC,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAA0B,MACrEA,~~cAAA~~,~~CAAA~~,~~aAAA~~,~~CAAC,eAAe,~~EACd,~~EAAA,~~aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,EACrB,UAAU,EAAE,UAAU,EAClB,GAAA,KAAK,GACT,CACH,CACW;AAElB;;;;"}
1	+ {"version":3,"file":"ListItem.js","sources":["../../../../src/components/SelectDropdown/ListItem/ListItem.tsx"],"sourcesContent":["import React from 'react';\nimport { ListBoxItem, ListBoxItemRenderProps } from 'react-aria-components';\nimport { useId } from '../../../hooks';\nimport { ListItemProps } from './types';\nimport { ListItemContent } from './components/ListItemContent';\nimport styles from './ListItem.module.scss';\nimport { buildClassnames } from '../../../utils';\n\nexport const ListItem = ({\n id,\n label,\n href,\n appearance = 'primary',\n className,\n ...props\n}: ListItemProps) => {\n const idComputed = useId({ id, prefix: 'list-item' });\n\n return (\n <ListBoxItem\n id={idComputed}\n textValue={label}\n href={href}\n className={buildClassnames([styles.listItem, styles[`appearance-${appearance}`], className])}\n {...props}\n >\n {/* use react aria's render props to add more such as isHovered */}\n {({ selectionMode, allowsDragging, isSelected }: ListBoxItemRenderProps) => (\n <ListItemContent\n selectionMode={selectionMode}\n allowsDragging={allowsDragging}\n isSelected={isSelected}\n label={label}\n isLink={Boolean(href)}\n appearance={appearance}\n {...props}\n />\n )}\n </ListBoxItem>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;MAQa,QAAQ,GAAG,CAAC,EACvB,EAAE,EACF,KAAK,EACL,IAAI,EACJ,UAAU,GAAG,SAAS,EACtB,SAAS,EACT,GAAG,KAAK,EACM,KAAI;AAClB,IAAA,MAAM,UAAU,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC;AAErD,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,WAAW,IACV,EAAE,EAAE,UAAU,EACd,SAAS,EAAE,KAAK,EAChB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA,WAAA,EAAc,UAAU,CAAE,CAAA,CAAC,EAAE,SAAS,CAAC,CAAC,EAAA,GACxF,KAAK,EAGR,EAAA,CAAC,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAA0B,MACrEA,6BAAC,eAAe,EAAA,EACd,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,EACrB,UAAU,EAAE,UAAU,EAClB,GAAA,KAAK,GACT,CACH,CACW;AAElB;;;;"}

package/dist/components/SelectDropdown/ListItemSection/ListItemSection.cjs CHANGED Viewed

@@ -7,12 +7,14 @@ var FlexCol = require('../../Flex/FlexCol/FlexCol.cjs');
 var Text = require('../../Text/Text.cjs');
 var ListItem = require('../ListItem/ListItem.cjs');
 var ListItemSection_module = require('./ListItemSection.module.scss.cjs');
+var buildClassnames = require('../../../utils/buildClassnames.cjs');
+require('uid/secure');
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-const ListItemSection = ({ label, hint, itemInfoSlot, items, children, ...props }) => (React__default.default.createElement(reactAriaComponents.Section, { className: ListItemSection_module.section, ...props },
+const ListItemSection = ({ label, hint, itemInfoSlot, items, children, className, ...props }) => (React__default.default.createElement(reactAriaComponents.Section, { className: buildClassnames.buildClassnames([ListItemSection_module.section, className]), ...props },
     React__default.default.createElement(reactAriaComponents.Header, null,
         React__default.default.createElement(FlexCol.FlexCol, { gap: "xs" },
             React__default.default.createElement(FlexRow.FlexRow, null,

package/dist/components/SelectDropdown/ListItemSection/ListItemSection.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListItemSection.cjs","sources":["../../../../src/components/SelectDropdown/ListItemSection/ListItemSection.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { Collection, Header, Section, SectionProps } from 'react-aria-components';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { Text as VeeqoText } from '../../Text';\nimport { ListItemProps } from '../ListItem/types';\nimport { ListItem } from '../ListItem/ListItem';\nimport styles from './ListItemSection.module.scss';\n\nexport type ListItemSectionProps = Omit<SectionProps<ListItemProps>, 'items'> & {\n label: string;\n hint?: string;\n itemInfoSlot?: ReactElement;\n items?: ListItemProps[];\n};\n\nexport const ListItemSection = ({\n label,\n hint,\n itemInfoSlot,\n items,\n children,\n ...props\n}: ListItemSectionProps) => (\n <Section className={styles.section} {...props}>\n <Header>\n <FlexCol gap=\"xs\">\n <FlexRow>\n <VeeqoText variant=\"body\">{label}</VeeqoText>\n {itemInfoSlot}\n </FlexRow>\n {hint && <VeeqoText variant=\"hintText\">{hint}</VeeqoText>}\n </FlexCol>\n </Header>\n {children}\n {items && (\n <Collection items={items}>{(item: ListItemProps) => <ListItem {...item} />}</Collection>\n )}\n </Section>\n);\n"],"names":["React","Section","styles","Header","FlexCol","FlexRow","VeeqoText","Collection","ListItem"],"mappings":"~~;;;;;;;;;;;;;;AAgBO~~,~~MAAM~~,eAAe,GAAG,CAAC,EAC9B,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACa,MACrBA,~~sBAAC~~,~~CAAA~~,~~aAAA~~,~~CAAAC,2BAAO,~~EAAC,~~EAAA,~~SAAS,EAAEC,sBAAM,CAAC,OAAO,KAAM,KAAK,EAAA;~~AAC3C~~,~~IAAAF~~,sBAAA,CAAA,aAAA,~~CAACG~~,0BAAM,EAAA,IAAA;AACL,~~QAAAH~~,sBAAA,CAAA,aAAA,~~CAACI~~,eAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAA;AACf,~~YAAAJ~~,sBAAA,CAAA,aAAA,~~CAACK~~,eAAO,EAAA,IAAA;AACN,~~gBAAAL~~,sBAAA,CAAA,aAAA,~~CAACM~~,SAAS,EAAC,EAAA,OAAO,EAAC,MAAM,EAAA,EAAE,KAAK,CAAa;AAC5C,gBAAA,YAAY,CACL;YACT,IAAI,~~IAAIN~~,sBAAC,CAAA,aAAA,~~CAAAM~~,SAAS,EAAC,EAAA,OAAO,EAAC,UAAU,EAAE,EAAA,IAAI,CAAa,CACjD,CACH;IACR,QAAQ;IACR,KAAK,~~KACJN~~,sBAAC,CAAA,aAAA,~~CAAAO~~,8BAAU,IAAC,KAAK,EAAE,KAAK,EAAA,EAAG,CAAC,IAAmB,~~KAAKP~~,sBAAC,CAAA,aAAA,~~CAAAQ~~,iBAAQ,EAAK,EAAA,GAAA,IAAI,GAAI,CAAc,CACzF,CACO;;;;"}
1	+ {"version":3,"file":"ListItemSection.cjs","sources":["../../../../src/components/SelectDropdown/ListItemSection/ListItemSection.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { Collection, Header, Section, SectionProps } from 'react-aria-components';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { Text as VeeqoText } from '../../Text';\nimport { ListItemProps } from '../ListItem/types';\nimport { ListItem } from '../ListItem/ListItem';\nimport styles from './ListItemSection.module.scss';\nimport { buildClassnames } from '../../../utils';\n\nexport type ListItemSectionProps = Omit<SectionProps<ListItemProps>, 'items'> & {\n label: string;\n hint?: string;\n itemInfoSlot?: ReactElement;\n items?: ListItemProps[];\n};\n\nexport const ListItemSection = ({\n label,\n hint,\n itemInfoSlot,\n items,\n children,\n className,\n ...props\n}: ListItemSectionProps) => (\n <Section className={buildClassnames([styles.section, className])} {...props}>\n <Header>\n <FlexCol gap=\"xs\">\n <FlexRow>\n <VeeqoText variant=\"body\">{label}</VeeqoText>\n {itemInfoSlot}\n </FlexRow>\n {hint && <VeeqoText variant=\"hintText\">{hint}</VeeqoText>}\n </FlexCol>\n </Header>\n {children}\n {items && (\n <Collection items={items}>{(item: ListItemProps) => <ListItem {...item} />}</Collection>\n )}\n </Section>\n);\n"],"names":["React","Section","buildClassnames","styles","Header","FlexCol","FlexRow","VeeqoText","Collection","ListItem"],"mappings":";;;;;;;;;;;;;;;;AAiBa,MAAA,eAAe,GAAG,CAAC,EAC9B,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACa,MACrBA,qCAACC,2BAAO,EAAA,EAAC,SAAS,EAAEC,+BAAe,CAAC,CAACC,sBAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,KAAM,KAAK,EAAA;AACzE,IAAAH,sBAAA,CAAA,aAAA,CAACI,0BAAM,EAAA,IAAA;AACL,QAAAJ,sBAAA,CAAA,aAAA,CAACK,eAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAA;AACf,YAAAL,sBAAA,CAAA,aAAA,CAACM,eAAO,EAAA,IAAA;AACN,gBAAAN,sBAAA,CAAA,aAAA,CAACO,SAAS,EAAC,EAAA,OAAO,EAAC,MAAM,EAAA,EAAE,KAAK,CAAa;AAC5C,gBAAA,YAAY,CACL;YACT,IAAI,IAAIP,sBAAC,CAAA,aAAA,CAAAO,SAAS,EAAC,EAAA,OAAO,EAAC,UAAU,EAAE,EAAA,IAAI,CAAa,CACjD,CACH;IACR,QAAQ;IACR,KAAK,KACJP,sBAAC,CAAA,aAAA,CAAAQ,8BAAU,IAAC,KAAK,EAAE,KAAK,EAAA,EAAG,CAAC,IAAmB,KAAKR,sBAAC,CAAA,aAAA,CAAAS,iBAAQ,EAAK,EAAA,GAAA,IAAI,GAAI,CAAc,CACzF,CACO;;;;"}

package/dist/components/SelectDropdown/ListItemSection/ListItemSection.d.ts CHANGED Viewed

@@ -7,4 +7,4 @@ export type ListItemSectionProps = Omit<SectionProps<ListItemProps>, 'items'> &
     itemInfoSlot?: ReactElement;
     items?: ListItemProps[];
 };
-export declare const ListItemSection: ({ label, hint, itemInfoSlot, items, children, ...props }: ListItemSectionProps) => React.JSX.Element;
+export declare const ListItemSection: ({ label, hint, itemInfoSlot, items, children, className, ...props }: ListItemSectionProps) => React.JSX.Element;

package/dist/components/SelectDropdown/ListItemSection/ListItemSection.js CHANGED Viewed

@@ -5,8 +5,10 @@ import { FlexCol } from '../../Flex/FlexCol/FlexCol.js';
 import { Text } from '../../Text/Text.js';
 import { ListItem } from '../ListItem/ListItem.js';
 import styles from './ListItemSection.module.scss.js';
+import { buildClassnames } from '../../../utils/buildClassnames.js';
+import 'uid/secure';
-const ListItemSection = ({ label, hint, itemInfoSlot, items, children, ...props }) => (React__default.createElement(Section, { className: styles.section, ...props },
+const ListItemSection = ({ label, hint, itemInfoSlot, items, children, className, ...props }) => (React__default.createElement(Section, { className: buildClassnames([styles.section, className]), ...props },
     React__default.createElement(Header, null,
         React__default.createElement(FlexCol, { gap: "xs" },
             React__default.createElement(FlexRow, null,

package/dist/components/SelectDropdown/ListItemSection/ListItemSection.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListItemSection.js","sources":["../../../../src/components/SelectDropdown/ListItemSection/ListItemSection.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { Collection, Header, Section, SectionProps } from 'react-aria-components';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { Text as VeeqoText } from '../../Text';\nimport { ListItemProps } from '../ListItem/types';\nimport { ListItem } from '../ListItem/ListItem';\nimport styles from './ListItemSection.module.scss';\n\nexport type ListItemSectionProps = Omit<SectionProps<ListItemProps>, 'items'> & {\n label: string;\n hint?: string;\n itemInfoSlot?: ReactElement;\n items?: ListItemProps[];\n};\n\nexport const ListItemSection = ({\n label,\n hint,\n itemInfoSlot,\n items,\n children,\n ...props\n}: ListItemSectionProps) => (\n <Section className={styles.section} {...props}>\n <Header>\n <FlexCol gap=\"xs\">\n <FlexRow>\n <VeeqoText variant=\"body\">{label}</VeeqoText>\n {itemInfoSlot}\n </FlexRow>\n {hint && <VeeqoText variant=\"hintText\">{hint}</VeeqoText>}\n </FlexCol>\n </Header>\n {children}\n {items && (\n <Collection items={items}>{(item: ListItemProps) => <ListItem {...item} />}</Collection>\n )}\n </Section>\n);\n"],"names":["React","VeeqoText"],"mappings":"~~;;;;;;;;AAgBO~~,~~MAAM~~,eAAe,GAAG,CAAC,EAC9B,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACa,MACrBA,~~cAAC~~,~~CAAA~~,~~aAAA~~,~~CAAA,OAAO,~~EAAC,~~EAAA,~~SAAS,EAAE,MAAM,CAAC,OAAO,KAAM,KAAK,EAAA;~~AAC3C~~,IAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,IAAA;AACL,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAA;AACf,YAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,IAAA;AACN,gBAAAA,cAAA,CAAA,aAAA,CAACC,IAAS,EAAC,EAAA,OAAO,EAAC,MAAM,EAAA,EAAE,KAAK,CAAa;AAC5C,gBAAA,YAAY,CACL;YACT,IAAI,IAAID,cAAC,CAAA,aAAA,CAAAC,IAAS,EAAC,EAAA,OAAO,EAAC,UAAU,EAAE,EAAA,IAAI,CAAa,CACjD,CACH;IACR,QAAQ;IACR,KAAK,KACJD,cAAC,CAAA,aAAA,CAAA,UAAU,IAAC,KAAK,EAAE,KAAK,EAAA,EAAG,CAAC,IAAmB,KAAKA,cAAC,CAAA,aAAA,CAAA,QAAQ,EAAK,EAAA,GAAA,IAAI,GAAI,CAAc,CACzF,CACO;;;;"}
1	+ {"version":3,"file":"ListItemSection.js","sources":["../../../../src/components/SelectDropdown/ListItemSection/ListItemSection.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { Collection, Header, Section, SectionProps } from 'react-aria-components';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { Text as VeeqoText } from '../../Text';\nimport { ListItemProps } from '../ListItem/types';\nimport { ListItem } from '../ListItem/ListItem';\nimport styles from './ListItemSection.module.scss';\nimport { buildClassnames } from '../../../utils';\n\nexport type ListItemSectionProps = Omit<SectionProps<ListItemProps>, 'items'> & {\n label: string;\n hint?: string;\n itemInfoSlot?: ReactElement;\n items?: ListItemProps[];\n};\n\nexport const ListItemSection = ({\n label,\n hint,\n itemInfoSlot,\n items,\n children,\n className,\n ...props\n}: ListItemSectionProps) => (\n <Section className={buildClassnames([styles.section, className])} {...props}>\n <Header>\n <FlexCol gap=\"xs\">\n <FlexRow>\n <VeeqoText variant=\"body\">{label}</VeeqoText>\n {itemInfoSlot}\n </FlexRow>\n {hint && <VeeqoText variant=\"hintText\">{hint}</VeeqoText>}\n </FlexCol>\n </Header>\n {children}\n {items && (\n <Collection items={items}>{(item: ListItemProps) => <ListItem {...item} />}</Collection>\n )}\n </Section>\n);\n"],"names":["React","VeeqoText"],"mappings":";;;;;;;;;;AAiBa,MAAA,eAAe,GAAG,CAAC,EAC9B,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACa,MACrBA,6BAAC,OAAO,EAAA,EAAC,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,KAAM,KAAK,EAAA;AACzE,IAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,IAAA;AACL,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAA;AACf,YAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,IAAA;AACN,gBAAAA,cAAA,CAAA,aAAA,CAACC,IAAS,EAAC,EAAA,OAAO,EAAC,MAAM,EAAA,EAAE,KAAK,CAAa;AAC5C,gBAAA,YAAY,CACL;YACT,IAAI,IAAID,cAAC,CAAA,aAAA,CAAAC,IAAS,EAAC,EAAA,OAAO,EAAC,UAAU,EAAE,EAAA,IAAI,CAAa,CACjD,CACH;IACR,QAAQ;IACR,KAAK,KACJD,cAAC,CAAA,aAAA,CAAA,UAAU,IAAC,KAAK,EAAE,KAAK,EAAA,EAAG,CAAC,IAAmB,KAAKA,cAAC,CAAA,aAAA,CAAA,QAAQ,EAAK,EAAA,GAAA,IAAI,GAAI,CAAc,CACzF,CACO;;;;"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@veeqo/ui",
-  "version": "12.0.0",
+  "version": "12.0.2-beta-0",
   "description": "New optimised component library for Veeqo.",
   "author": "Robert Wealthall",
   "license": "ISC",