@veeqo/ui 11.4.2 → 12.0.1

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

@@ -17,13 +17,14 @@ 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`],
+            className,
         ]), ...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" })),

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.cjs","sources":["../../../../src/components/Alerts/Alert/Alert.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../../Text';\nimport { Button } from '../../Button';\nimport { 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":"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"}
+{"version":3,"file":"Alert.cjs","sources":["../../../../src/components/Alerts/Alert/Alert.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../../Text';\nimport { 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      {...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":"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"}

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

@@ -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

@@ -11,13 +11,14 @@ 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`],
+            className,
         ]), ...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" })),

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sources":["../../../../src/components/Alerts/Alert/Alert.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../../Text';\nimport { Button } from '../../Button';\nimport { 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":"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"}
+{"version":3,"file":"Alert.js","sources":["../../../../src/components/Alerts/Alert/Alert.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../../Text';\nimport { 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      {...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":"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"}

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

@@ -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", ...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

@@ -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;;;;"}
+{"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\" {...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;AAEpC,IAAA,QACEC,sBAAC,CAAA,aAAA,CAAAC,eAAO,EAAC,EAAA,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,EAAK,GAAA,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAA;AAChE,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

@@ -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

@@ -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", ...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

@@ -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;;;;"}
+{"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\" {...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;AAEpC,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,OAAO,EAAC,EAAA,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,EAAK,GAAA,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAA;AAChE,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

@@ -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

@@ -1,17 +1,40 @@
 'use strict';
 
 var React = require('react');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+require('uid/secure');
+var assignCssVars = require('../../utils/assignCssVars.cjs');
+var CriticalIcon = require('../../icons/custom/components/CriticalIcon.cjs');
 var index = require('../../theme/index.cjs');
-var styled = require('./styled.cjs');
+var Avatar_module = require('./Avatar.module.scss.cjs');
+var Text = require('../Text/Text.cjs');
+var FlexRow = require('../Flex/FlexRow/FlexRow.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-/* eslint-disable react/no-array-index-key */
-const Avatar = ({ width = '40px', name = 'Veeqo', bgColor = index.theme.colors.secondary.blue.base, textColor = '#ffffff', }) => {
-    const userInitials = name.toUpperCase().match(/\b(\w)/g);
-    return (React__default.default.createElement(styled.AvatarSC, { width: width, bgColor: bgColor, textColor: textColor, className: "avatar" }, userInitials === null || userInitials === undefined ? undefined : userInitials.slice(0, 2).map((initial, i) => React__default.default.createElement("span", { key: `${initial}-${i}` }, initial))));
+const textVariantMapping = {
+    md: 'bodySmallBold',
+    lg: 'bodySmallBold',
+    xl: 'headingSmall',
+    xxl: 'headingMedium',
+};
+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`], className]), style: {
+            ...assignCssVars.assignCssVars({
+                avatarBgColor: iconSlot ? index.theme.colors.neutral.grey.lightest : bgColor,
+                avatarTextColor: textColor,
+            }),
+        }, "aria-label": ariaLabel },
+        hasIndicator && (React__default.default.createElement(CriticalIcon.CriticalIcon, { className: Avatar_module.indicatorIcon, color: index.theme.colors.secondary.red.base, fill: index.theme.colors.neutral.grey.lightest, role: "status", "aria-live": "polite", "aria-label": "Avatar has an error" })),
+        imageUrl && React__default.default.createElement("img", { src: imageUrl, alt: name, className: Avatar_module.avatarImage }),
+        !!iconSlot && iconSlot,
+        !imageUrl && !iconSlot && (React__default.default.createElement(Text.Text, { variant: textVariant, className: Avatar_module.avatarText }, (_a = name
+            .toUpperCase()
+            .match(/(\b\w|\+)/g)) === null || _a === undefined ? undefined : _a.slice(0, 2)))));
 };
 
 exports.Avatar = Avatar;

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.cjs","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["/* eslint-disable react/no-array-index-key */\n\nimport React from 'react';\nimport { theme } from '../../theme';\nimport { AvatarSC } from './styled';\nimport { AvatarProps } from './types';\n\nexport const Avatar = ({\n  width = '40px',\n  name = 'Veeqo',\n  bgColor = theme.colors.secondary.blue.base,\n  textColor = '#ffffff',\n}: AvatarProps) => {\n  const userInitials = name.toUpperCase().match(/\\b(\\w)/g);\n\n  return (\n    <AvatarSC width={width} bgColor={bgColor} textColor={textColor} className=\"avatar\">\n      {userInitials\n        ?.slice(0, 2)\n        .map((initial, i) => <span key={`${initial}-${i}`}>{initial}</span>)}\n    </AvatarSC>\n  );\n};\n"],"names":["theme","React","AvatarSC"],"mappings":";;;;;;;;;;AAAA;AAOO,MAAM,MAAM,GAAG,CAAC,EACrB,KAAK,GAAG,MAAM,EACd,IAAI,GAAG,OAAO,EACd,OAAO,GAAGA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAC1C,SAAS,GAAG,SAAS,GACT,KAAI;IAChB,MAAM,YAAY,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC;IAExD,QACEC,sBAAC,CAAA,aAAA,CAAAC,eAAQ,EAAC,EAAA,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAC,QAAQ,EAC/E,EAAA,YAAY,KAAZ,IAAA,IAAA,YAAY,KAAZ,SAAA,GAAA,SAAA,GAAA,YAAY,CACT,KAAK,CAAC,CAAC,EAAE,CAAC,CAAA,CACX,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,KAAKD,sBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,GAAG,EAAE,CAAA,EAAG,OAAO,CAAA,CAAA,EAAI,CAAC,CAAA,CAAE,EAAG,EAAA,OAAO,CAAQ,CAAC,CAC7D;AAEf;;;;"}
+{"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

@@ -1,3 +1,3 @@
 import React from 'react';
 import { AvatarProps } from './types';
-export declare const Avatar: ({ width, name, bgColor, textColor, }: 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

@@ -1,11 +1,34 @@
 import React__default from 'react';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
+import { assignCssVars } from '../../utils/assignCssVars.js';
+import { CriticalIcon } from '../../icons/custom/components/CriticalIcon.js';
 import { theme } from '../../theme/index.js';
-import { AvatarSC } from './styled.js';
+import styles from './Avatar.module.scss.js';
+import { Text } from '../Text/Text.js';
+import { FlexRow } from '../Flex/FlexRow/FlexRow.js';
 
-/* eslint-disable react/no-array-index-key */
-const Avatar = ({ width = '40px', name = 'Veeqo', bgColor = theme.colors.secondary.blue.base, textColor = '#ffffff', }) => {
-    const userInitials = name.toUpperCase().match(/\b(\w)/g);
-    return (React__default.createElement(AvatarSC, { width: width, bgColor: bgColor, textColor: textColor, className: "avatar" }, userInitials === null || userInitials === undefined ? undefined : userInitials.slice(0, 2).map((initial, i) => React__default.createElement("span", { key: `${initial}-${i}` }, initial))));
+const textVariantMapping = {
+    md: 'bodySmallBold',
+    lg: 'bodySmallBold',
+    xl: 'headingSmall',
+    xxl: 'headingMedium',
+};
+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`], className]), style: {
+            ...assignCssVars({
+                avatarBgColor: iconSlot ? theme.colors.neutral.grey.lightest : bgColor,
+                avatarTextColor: textColor,
+            }),
+        }, "aria-label": ariaLabel },
+        hasIndicator && (React__default.createElement(CriticalIcon, { className: styles.indicatorIcon, color: theme.colors.secondary.red.base, fill: theme.colors.neutral.grey.lightest, role: "status", "aria-live": "polite", "aria-label": "Avatar has an error" })),
+        imageUrl && React__default.createElement("img", { src: imageUrl, alt: name, className: styles.avatarImage }),
+        !!iconSlot && iconSlot,
+        !imageUrl && !iconSlot && (React__default.createElement(Text, { variant: textVariant, className: styles.avatarText }, (_a = name
+            .toUpperCase()
+            .match(/(\b\w|\+)/g)) === null || _a === undefined ? undefined : _a.slice(0, 2)))));
 };
 
 export { Avatar };

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["/* eslint-disable react/no-array-index-key */\n\nimport React from 'react';\nimport { theme } from '../../theme';\nimport { AvatarSC } from './styled';\nimport { AvatarProps } from './types';\n\nexport const Avatar = ({\n  width = '40px',\n  name = 'Veeqo',\n  bgColor = theme.colors.secondary.blue.base,\n  textColor = '#ffffff',\n}: AvatarProps) => {\n  const userInitials = name.toUpperCase().match(/\\b(\\w)/g);\n\n  return (\n    <AvatarSC width={width} bgColor={bgColor} textColor={textColor} className=\"avatar\">\n      {userInitials\n        ?.slice(0, 2)\n        .map((initial, i) => <span key={`${initial}-${i}`}>{initial}</span>)}\n    </AvatarSC>\n  );\n};\n"],"names":["React"],"mappings":";;;;AAAA;AAOO,MAAM,MAAM,GAAG,CAAC,EACrB,KAAK,GAAG,MAAM,EACd,IAAI,GAAG,OAAO,EACd,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAC1C,SAAS,GAAG,SAAS,GACT,KAAI;IAChB,MAAM,YAAY,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC;IAExD,QACEA,cAAC,CAAA,aAAA,CAAA,QAAQ,EAAC,EAAA,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAC,QAAQ,EAC/E,EAAA,YAAY,KAAZ,IAAA,IAAA,YAAY,KAAZ,SAAA,GAAA,SAAA,GAAA,YAAY,CACT,KAAK,CAAC,CAAC,EAAE,CAAC,CAAA,CACX,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,KAAKA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,GAAG,EAAE,CAAA,EAAG,OAAO,CAAA,CAAA,EAAI,CAAC,CAAA,CAAE,EAAG,EAAA,OAAO,CAAQ,CAAC,CAC7D;AAEf;;;;"}
+{"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/Avatar.module.scss.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._avatar_1oval_1 {\n  border: var(--sizes-line) solid var(--colors-neutral-grey-base);\n  border-radius: var(--radius-full);\n  background-size: cover;\n  background-color: var(--avatar-bg-color, var(--colors-secondary-blue-base));\n  position: relative;\n  width: var(--avatar-size, var(--sizes-lg));\n  height: var(--avatar-size, var(--sizes-lg));\n}\n\n._avatarImage_1oval_11 {\n  width: 100%;\n  height: 100%;\n  border-radius: var(--radius-full);\n  object-fit: cover;\n}\n\n._avatarText_1oval_18 {\n  color: var(--avatar-text-color, #fff) !important;\n}\n\n._indicatorIcon_1oval_22 {\n  position: absolute;\n  /* Calculate offset as roughly 30% of icon size, with fallback */\n  top: calc(-0.3 * var(--indicator-icon-size, 16px));\n  right: calc(-0.3 * var(--indicator-icon-size, 16px));\n  width: var(--indicator-icon-size, var(--sizes-lg));\n  height: var(--indicator-icon-size, var(--sizes-lg));\n}\n\n._md-size_1oval_31 {\n  --avatar-size: var(--sizes-md);\n  --indicator-icon-size: var(--sizes-3);\n}\n\n._lg-size_1oval_36 {\n  --avatar-size: var(--sizes-lg);\n  --indicator-icon-size: var(--sizes-base);\n}\n\n._xl-size_1oval_41 {\n  --avatar-size: var(--sizes-xl);\n  --indicator-icon-size: var(--sizes-7);\n}\n\n._xxl-size_1oval_46 {\n  --avatar-size: var(--sizes-xxl);\n  --indicator-icon-size: var(--sizes-lg);\n}");
+var styles = {"avatar":"_avatar_1oval_1","avatarImage":"_avatarImage_1oval_11","avatarText":"_avatarText_1oval_18","indicatorIcon":"_indicatorIcon_1oval_22","md-size":"_md-size_1oval_31","lg-size":"_lg-size_1oval_36","xl-size":"_xl-size_1oval_41","xxl-size":"_xxl-size_1oval_46"};
+
+module.exports = styles;
+//# sourceMappingURL=Avatar.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.module.scss.cjs","sources":["../../../src/components/Avatar/Avatar.module.scss"],"sourcesContent":[".avatar {\n  border: var(--sizes-line) solid var(--colors-neutral-grey-base);\n  border-radius: var(--radius-full);\n  background-size: cover;\n  background-color: var(--avatar-bg-color, var(--colors-secondary-blue-base));\n  position: relative;\n  width: var(--avatar-size, var(--sizes-lg));\n  height: var(--avatar-size, var(--sizes-lg));\n}\n\n.avatarImage {\n  width: 100%;\n  height: 100%;\n  border-radius: var(--radius-full);\n  object-fit: cover;\n}\n\n.avatarText {\n  color: var(--avatar-text-color, #fff) !important;\n}\n\n.indicatorIcon {\n  position: absolute;\n  /* Calculate offset as roughly 30% of icon size, with fallback */\n  top: calc(-0.3 * var(--indicator-icon-size, 16px));\n  right: calc(-0.3 * var(--indicator-icon-size, 16px));\n  width: var(--indicator-icon-size, var(--sizes-lg));\n  height: var(--indicator-icon-size, var(--sizes-lg));\n}\n\n.md-size {\n  --avatar-size: var(--sizes-md);\n  --indicator-icon-size: var(--sizes-3);\n}\n\n.lg-size {\n  --avatar-size: var(--sizes-lg);\n  --indicator-icon-size: var(--sizes-base);\n}\n\n.xl-size {\n  --avatar-size: var(--sizes-xl);\n  --indicator-icon-size: var(--sizes-7);\n}\n\n.xxl-size {\n  --avatar-size: var(--sizes-xxl);\n  --indicator-icon-size: var(--sizes-lg);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,mzCAAA;AACA,aAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,UAAA,CAAA,oBAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._avatar_1oval_1 {\n  border: var(--sizes-line) solid var(--colors-neutral-grey-base);\n  border-radius: var(--radius-full);\n  background-size: cover;\n  background-color: var(--avatar-bg-color, var(--colors-secondary-blue-base));\n  position: relative;\n  width: var(--avatar-size, var(--sizes-lg));\n  height: var(--avatar-size, var(--sizes-lg));\n}\n\n._avatarImage_1oval_11 {\n  width: 100%;\n  height: 100%;\n  border-radius: var(--radius-full);\n  object-fit: cover;\n}\n\n._avatarText_1oval_18 {\n  color: var(--avatar-text-color, #fff) !important;\n}\n\n._indicatorIcon_1oval_22 {\n  position: absolute;\n  /* Calculate offset as roughly 30% of icon size, with fallback */\n  top: calc(-0.3 * var(--indicator-icon-size, 16px));\n  right: calc(-0.3 * var(--indicator-icon-size, 16px));\n  width: var(--indicator-icon-size, var(--sizes-lg));\n  height: var(--indicator-icon-size, var(--sizes-lg));\n}\n\n._md-size_1oval_31 {\n  --avatar-size: var(--sizes-md);\n  --indicator-icon-size: var(--sizes-3);\n}\n\n._lg-size_1oval_36 {\n  --avatar-size: var(--sizes-lg);\n  --indicator-icon-size: var(--sizes-base);\n}\n\n._xl-size_1oval_41 {\n  --avatar-size: var(--sizes-xl);\n  --indicator-icon-size: var(--sizes-7);\n}\n\n._xxl-size_1oval_46 {\n  --avatar-size: var(--sizes-xxl);\n  --indicator-icon-size: var(--sizes-lg);\n}");
+var styles = {"avatar":"_avatar_1oval_1","avatarImage":"_avatarImage_1oval_11","avatarText":"_avatarText_1oval_18","indicatorIcon":"_indicatorIcon_1oval_22","md-size":"_md-size_1oval_31","lg-size":"_lg-size_1oval_36","xl-size":"_xl-size_1oval_41","xxl-size":"_xxl-size_1oval_46"};
+
+export { styles as default };
+//# sourceMappingURL=Avatar.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.module.scss.js","sources":["../../../src/components/Avatar/Avatar.module.scss"],"sourcesContent":[".avatar {\n  border: var(--sizes-line) solid var(--colors-neutral-grey-base);\n  border-radius: var(--radius-full);\n  background-size: cover;\n  background-color: var(--avatar-bg-color, var(--colors-secondary-blue-base));\n  position: relative;\n  width: var(--avatar-size, var(--sizes-lg));\n  height: var(--avatar-size, var(--sizes-lg));\n}\n\n.avatarImage {\n  width: 100%;\n  height: 100%;\n  border-radius: var(--radius-full);\n  object-fit: cover;\n}\n\n.avatarText {\n  color: var(--avatar-text-color, #fff) !important;\n}\n\n.indicatorIcon {\n  position: absolute;\n  /* Calculate offset as roughly 30% of icon size, with fallback */\n  top: calc(-0.3 * var(--indicator-icon-size, 16px));\n  right: calc(-0.3 * var(--indicator-icon-size, 16px));\n  width: var(--indicator-icon-size, var(--sizes-lg));\n  height: var(--indicator-icon-size, var(--sizes-lg));\n}\n\n.md-size {\n  --avatar-size: var(--sizes-md);\n  --indicator-icon-size: var(--sizes-3);\n}\n\n.lg-size {\n  --avatar-size: var(--sizes-lg);\n  --indicator-icon-size: var(--sizes-base);\n}\n\n.xl-size {\n  --avatar-size: var(--sizes-xl);\n  --indicator-icon-size: var(--sizes-7);\n}\n\n.xxl-size {\n  --avatar-size: var(--sizes-xxl);\n  --indicator-icon-size: var(--sizes-lg);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,mzCAAA;AACA,aAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,UAAA,CAAA,oBAAA;;;;"}

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

@@ -1,11 +1,17 @@
-export interface AvatarProps {
+/// <reference types="react" />
+export declare enum AvatarSize {
+    md = "md",
+    lg = "lg",
+    xl = "xl",
+    xxl = "xxl"
+}
+export type AvatarProps = React.HTMLAttributes<HTMLDivElement> & {
     name: string;
-    width?: string;
+    size?: keyof typeof AvatarSize;
     bgColor?: string;
     textColor?: string;
-}
-export interface AvatarSCProps {
-    width: string;
-    bgColor: string;
-    textColor: string;
-}
+    iconSlot?: React.ReactNode;
+    imageUrl?: string;
+    ariaLabel?: string;
+    hasIndicator?: boolean;
+};

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { AvatarProps } from '../Avatar/types';
+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, className, ...listProps }: AvatarGroupProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+export { AvatarGroup } from './AvatarGroup';

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

@@ -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

@@ -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;;;;"}
+{"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

@@ -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

@@ -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

@@ -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;;;;"}
+{"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

@@ -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

@@ -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;;;;"}
+{"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

@@ -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

@@ -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

@@ -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;;;;"}
+{"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/dist/icons/custom/components/CriticalIcon.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var React = require('react');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const CriticalIcon = ({ fill, ...props }) => (React__default.default.createElement("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
+    React__default.default.createElement("circle", { cx: 8, cy: 8, r: 6, fill: fill }),
+    React__default.default.createElement("path", { d: "M8 1.33334C4.32 1.33334 1.33334 4.32001 1.33334 8.00001C1.33334 11.68 4.32 14.6667 8 14.6667C11.68 14.6667 14.6667 11.68 14.6667 8.00001C14.6667 4.32001 11.68 1.33334 8 1.33334ZM8.66667 11.3333H7.33334V10H8.66667V11.3333ZM8.66667 8.66668H7.33334V4.66668H8.66667V8.66668Z", fill: "currentColor" })));
+
+exports.CriticalIcon = CriticalIcon;
+//# sourceMappingURL=CriticalIcon.cjs.map

package/dist/icons/custom/components/CriticalIcon.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CriticalIcon.cjs","sources":["../../../../src/icons/custom/components/CriticalIcon.tsx"],"sourcesContent":["import React from 'react';\nimport { IconComponentProps } from 'src/icons/types';\n\nexport const CriticalIcon = ({ fill, ...props }: IconComponentProps) => (\n  <svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n    <circle cx={8} cy={8} r={6} fill={fill} />\n    <path\n      d=\"M8 1.33334C4.32 1.33334 1.33334 4.32001 1.33334 8.00001C1.33334 11.68 4.32 14.6667 8 14.6667C11.68 14.6667 14.6667 11.68 14.6667 8.00001C14.6667 4.32001 11.68 1.33334 8 1.33334ZM8.66667 11.3333H7.33334V10H8.66667V11.3333ZM8.66667 8.66668H7.33334V4.66668H8.66667V8.66668Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n);\n"],"names":["React"],"mappings":";;;;;;;;AAGO,MAAM,YAAY,GAAG,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAsB,MACjEA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,GAAK,KAAK,EAAA;AAC/E,IAAAA,sBAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAI,CAAA;IAC1CA,sBACE,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,gRAAgR,EAClR,IAAI,EAAC,cAAc,EAAA,CACnB,CACE;;;;"}

package/dist/icons/custom/components/CriticalIcon.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { IconComponentProps } from 'src/icons/types';
-export declare const CriticalIcon: (props: IconComponentProps) => React.JSX.Element;
+export declare const CriticalIcon: ({ fill, ...props }: IconComponentProps) => React.JSX.Element;

package/dist/icons/custom/components/CriticalIcon.js

@@ -0,0 +1,8 @@
+import React__default from 'react';
+
+const CriticalIcon = ({ fill, ...props }) => (React__default.createElement("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
+    React__default.createElement("circle", { cx: 8, cy: 8, r: 6, fill: fill }),
+    React__default.createElement("path", { d: "M8 1.33334C4.32 1.33334 1.33334 4.32001 1.33334 8.00001C1.33334 11.68 4.32 14.6667 8 14.6667C11.68 14.6667 14.6667 11.68 14.6667 8.00001C14.6667 4.32001 11.68 1.33334 8 1.33334ZM8.66667 11.3333H7.33334V10H8.66667V11.3333ZM8.66667 8.66668H7.33334V4.66668H8.66667V8.66668Z", fill: "currentColor" })));
+
+export { CriticalIcon };
+//# sourceMappingURL=CriticalIcon.js.map

package/dist/icons/custom/components/CriticalIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CriticalIcon.js","sources":["../../../../src/icons/custom/components/CriticalIcon.tsx"],"sourcesContent":["import React from 'react';\nimport { IconComponentProps } from 'src/icons/types';\n\nexport const CriticalIcon = ({ fill, ...props }: IconComponentProps) => (\n  <svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n    <circle cx={8} cy={8} r={6} fill={fill} />\n    <path\n      d=\"M8 1.33334C4.32 1.33334 1.33334 4.32001 1.33334 8.00001C1.33334 11.68 4.32 14.6667 8 14.6667C11.68 14.6667 14.6667 11.68 14.6667 8.00001C14.6667 4.32001 11.68 1.33334 8 1.33334ZM8.66667 11.3333H7.33334V10H8.66667V11.3333ZM8.66667 8.66668H7.33334V4.66668H8.66667V8.66668Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n);\n"],"names":["React"],"mappings":";;AAGO,MAAM,YAAY,GAAG,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAsB,MACjEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,GAAK,KAAK,EAAA;AAC/E,IAAAA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAI,CAAA;IAC1CA,cACE,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,gRAAgR,EAClR,IAAI,EAAC,cAAc,EAAA,CACnB,CACE;;;;"}

package/package.json

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

package/dist/components/Avatar/styled.cjs

@@ -1,13 +0,0 @@
-'use strict';
-
-var styled = require('styled-components');
-var index = require('../../theme/index.cjs');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-
-const AvatarSC = styled__default.default.div.withConfig({ displayName: "vui--AvatarSC", componentId: "vui--1gxc5tv" }) `width:${(props) => props.width};height:${(props) => props.width};border:3px solid ${index.theme.colors.neutral.grey.base};color:${(props) => props.textColor};background-color:${(props) => props.bgColor};cursor:pointer;border-radius:50%;display:flex;justify-content:center;align-items:center;background-size:cover;span{font-family:${index.theme.text.bodySmallBold.fontFamily};font-weight:${index.theme.text.bodySmallBold.fontWeight};font-size:${index.theme.text.bodySmallBold.fontSize};line-height:${index.theme.text.bodySmallBold.lineHeight};}`;
-
-exports.AvatarSC = AvatarSC;
-//# sourceMappingURL=styled.cjs.map

package/dist/components/Avatar/styled.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/Avatar/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\nimport { AvatarSCProps } from './types';\n\nexport const AvatarSC = styled.div<AvatarSCProps>`\n  width: ${(props) => props.width};\n  height: ${(props) => props.width};\n  border: 3px solid ${theme.colors.neutral.grey.base};\n  color: ${(props) => props.textColor};\n  background-color: ${(props) => props.bgColor};\n  cursor: pointer;\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-size: cover;\n\n  span {\n    font-family: ${theme.text.bodySmallBold.fontFamily};\n    font-weight: ${theme.text.bodySmallBold.fontWeight};\n    font-size: ${theme.text.bodySmallBold.fontSize};\n    line-height: ${theme.text.bodySmallBold.lineHeight};\n  }\n`;\n"],"names":["styled","theme"],"mappings":";;;;;;;;;AAIa,MAAA,QAAQ,GAAGA,uBAAM,CAAC,GAAG,CACvB,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAAA,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,CAAA,QAAA,EACrB,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,qBACZC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CACzC,OAAA,EAAA,CAAC,KAAK,KAAK,KAAK,CAAC,SAAS,CAAA,kBAAA,EACf,CAAC,KAAK,KAAK,KAAK,CAAC,OAAO,CAAA,gIAAA,EAS3BA,WAAK,CAAC,IAAI,CAAC,aAAa,CAAC,UAAU,CAAA,aAAA,EACnCA,WAAK,CAAC,IAAI,CAAC,aAAa,CAAC,UAAU,CAAA,WAAA,EACrCA,WAAK,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAC/B,aAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,aAAa,CAAC,UAAU;;;;"}

package/dist/components/Avatar/styled.d.ts

@@ -1,2 +0,0 @@
-import { AvatarSCProps } from './types';
-export declare const AvatarSC: import("styled-components").StyledComponent<"div", any, AvatarSCProps, never>;

package/dist/components/Avatar/styled.js

@@ -1,7 +0,0 @@
-import styled from 'styled-components';
-import { theme } from '../../theme/index.js';
-
-const AvatarSC = styled.div.withConfig({ displayName: "vui--AvatarSC", componentId: "vui--1gxc5tv" }) `width:${(props) => props.width};height:${(props) => props.width};border:3px solid ${theme.colors.neutral.grey.base};color:${(props) => props.textColor};background-color:${(props) => props.bgColor};cursor:pointer;border-radius:50%;display:flex;justify-content:center;align-items:center;background-size:cover;span{font-family:${theme.text.bodySmallBold.fontFamily};font-weight:${theme.text.bodySmallBold.fontWeight};font-size:${theme.text.bodySmallBold.fontSize};line-height:${theme.text.bodySmallBold.lineHeight};}`;
-
-export { AvatarSC };
-//# sourceMappingURL=styled.js.map

package/dist/components/Avatar/styled.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/Avatar/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\nimport { AvatarSCProps } from './types';\n\nexport const AvatarSC = styled.div<AvatarSCProps>`\n  width: ${(props) => props.width};\n  height: ${(props) => props.width};\n  border: 3px solid ${theme.colors.neutral.grey.base};\n  color: ${(props) => props.textColor};\n  background-color: ${(props) => props.bgColor};\n  cursor: pointer;\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-size: cover;\n\n  span {\n    font-family: ${theme.text.bodySmallBold.fontFamily};\n    font-weight: ${theme.text.bodySmallBold.fontWeight};\n    font-size: ${theme.text.bodySmallBold.fontSize};\n    line-height: ${theme.text.bodySmallBold.lineHeight};\n  }\n`;\n"],"names":[],"mappings":";;;AAIa,MAAA,QAAQ,GAAG,MAAM,CAAC,GAAG,CACvB,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAAA,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,CAAA,QAAA,EACrB,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,qBACZ,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CACzC,OAAA,EAAA,CAAC,KAAK,KAAK,KAAK,CAAC,SAAS,CAAA,kBAAA,EACf,CAAC,KAAK,KAAK,KAAK,CAAC,OAAO,CAAA,gIAAA,EAS3B,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,UAAU,CAAA,aAAA,EACnC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,UAAU,CAAA,WAAA,EACrC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAC/B,aAAA,EAAA,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,UAAU;;;;"}