npm - @veeqo/ui - Versions diffs - 15.1.2 → 15.1.4 - Mend

@veeqo/ui 15.1.2 → 15.1.4

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 (24) hide show

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

@@ -26,7 +26,7 @@ const Alert = ({ size = 'base', variant = 'default', direction = 'horizontal', c
     const DefaultIcon = constants.IconMap[variant];
     const isVertical = direction === 'vertical';
     const hasActions = ((_a = rightActions === null || rightActions === void 0 ? void 0 : rightActions.length) !== null && _a !== void 0 ? _a : 0) > 0 || Boolean(rightActionsSlot);
-    const hasSingleContent = !children && !hasActions && !((title || titleSlot) && (message || messageSlot));
+    const hasSingleContent = !children && !((title || titleSlot) && (message || messageSlot));
     return (React__default.default.createElement(FlexCol.FlexCol, { role: variant === 'error' ? 'alert' : 'status', gap: "none", className: buildClassnames.buildClassnames([
             Alert_module.alertContainer,
             Alert_module[`${size}-size`],

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

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

@@ -20,7 +20,7 @@ const Alert = ({ size = 'base', variant = 'default', direction = 'horizontal', c
     const DefaultIcon = IconMap[variant];
     const isVertical = direction === 'vertical';
     const hasActions = ((_a = rightActions === null || rightActions === void 0 ? void 0 : rightActions.length) !== null && _a !== void 0 ? _a : 0) > 0 || Boolean(rightActionsSlot);
-    const hasSingleContent = !children && !hasActions && !((title || titleSlot) && (message || messageSlot));
+    const hasSingleContent = !children && !((title || titleSlot) && (message || messageSlot));
     return (React__default.createElement(FlexCol, { role: variant === 'error' ? 'alert' : 'status', gap: "none", className: buildClassnames([
             styles.alertContainer,
             styles[`${size}-size`],

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 { Action } from '../../Action';\nimport { CrossIcon } from '../../../icons';\nimport { IconMap } from '../constants';\nimport { AlertProps } from './types';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { assignCssVars, buildClassnames } from '../../../utils';\n\nimport alertStyles from '../Alerts.module.scss';\nimport styles from './Alert.module.scss';\n\n/*\n Alert component for displaying contextual feedback messages with optional actions and close button.\n */\nexport const Alert = ({\n size = 'base',\n variant = 'default',\n direction = 'horizontal',\n colours: passedColours,\n rightActions,\n rightActionsSlot,\n title,\n titleSlot,\n messageSlot,\n message,\n children,\n iconSlot,\n onClickClose,\n className,\n ...divProps\n}: AlertProps) => {\n const DefaultIcon = IconMap[variant];\n const isVertical = direction === 'vertical';\n const hasActions = (rightActions?.length ?? 0) > 0 \|\| Boolean(rightActionsSlot);\n const hasSingleContent = !children && !~~hasActions && !~~((title \|\| titleSlot) && (message \|\| messageSlot));\n\n return (\n <FlexCol\n role={variant === 'error' ? 'alert' : 'status'}\n gap=\"none\"\n className={buildClassnames([\n styles.alertContainer,\n styles[`${size}-size`],\n isVertical ? styles.vertical : undefined,\n hasSingleContent ? styles.centered : undefined,\n alertStyles[`${variant}-alert-variant`],\n className,\n ])}\n style={assignCssVars({ backgroundColor: passedColours?.background })}\n {...divProps}\n >\n <FlexRow\n style={assignCssVars({ iconColor: passedColours?.primary })}\n className={buildClassnames([alertStyles.icon, styles.iconArea])}\n >\n {iconSlot \|\| <DefaultIcon role=\"presentation\" />}\n </FlexRow>\n\n <FlexCol className={styles.content} flexWrap=\"nowrap\">\n {children \|\| (\n <FlexCol gap={size === 'xs' ? 'xs' : 'sm'}>\n {titleSlot \|\|\n (title && (\n <Text variant=\"bodyBold\" style={size === 'base' ? { lineHeight: '24px' } : {}}>\n {title}\n </Text>\n ))}\n {messageSlot \|\| (message && <Text variant=\"body\">{message}</Text>)}\n </FlexCol>\n )}\n </FlexCol>\n\n {hasActions && (\n <FlexRow flexWrap=\"nowrap\" gap=\"sm\" className={styles.actions}>\n {rightActionsSlot}\n {rightActions?.map(({ label, ...actionProps }) => (\n <Button key={label} type=\"button\" size=\"sm\" {...actionProps}>\n {label}\n </Button>\n ))}\n </FlexRow>\n )}\n\n {onClickClose && (\n <Action\n variant=\"flat\"\n size=\"sm\"\n iconSlot={<CrossIcon />}\n onClick={onClickClose}\n aria-label=\"Close\"\n className={styles.close}\n />\n )}\n </FlexCol>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;AAeA;;AAEG;MACU,KAAK,GAAG,CAAC,EACpB,IAAI,GAAG,MAAM,EACb,OAAO,GAAG,SAAS,EACnB,SAAS,GAAG,YAAY,EACxB,OAAO,EAAE,aAAa,EACtB,YAAY,EACZ,gBAAgB,EAChB,KAAK,EACL,SAAS,EACT,WAAW,EACX,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,GAAG,QAAQ,EACA,KAAI;;AACf,IAAA,MAAM,WAAW,GAAG,OAAO,CAAC,OAAO,CAAC;AACpC,IAAA,MAAM,UAAU,GAAG,SAAS,KAAK,UAAU;IAC3C,MAAM,UAAU,GAAG,CAAC,CAAA,EAAA,GAAA,YAAY,KAAA,IAAA,IAAZ,YAAY,uBAAZ,YAAY,CAAE,MAAM,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,gBAAgB,CAAC;~~IAC~~/E,MAAM,gBAAgB,GAAG,CAAC,QAAQ,IAAI,~~CAAC,UAAU,IAAI,~~EAAE,CAAC,KAAK,IAAI,SAAS,MAAM,OAAO,IAAI,WAAW,CAAC,CAAC;~~IAExG~~,QACEA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EACN,IAAI,EAAE,OAAO,KAAK,OAAO,GAAG,OAAO,GAAG,QAAQ,EAC9C,GAAG,EAAC,MAAM,EACV,SAAS,EAAE,eAAe,CAAC;AACzB,YAAA,MAAM,CAAC,cAAc;AACrB,YAAA,MAAM,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC;YACtB,UAAU,GAAG,MAAM,CAAC,QAAQ,GAAG,SAAS;YACxC,gBAAgB,GAAG,MAAM,CAAC,QAAQ,GAAG,SAAS;AAC9C,YAAA,WAAW,CAAC,CAAA,EAAG,OAAO,CAAA,cAAA,CAAgB,CAAC;YACvC,SAAS;AACV,SAAA,CAAC,EACF,KAAK,EAAE,aAAa,CAAC,EAAE,eAAe,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,uBAAb,aAAa,CAAE,UAAU,EAAE,CAAC,KAChE,QAAQ,EAAA;AAEZ,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EACN,KAAK,EAAE,aAAa,CAAC,EAAE,SAAS,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,uBAAb,aAAa,CAAE,OAAO,EAAE,CAAC,EAC3D,SAAS,EAAE,eAAe,CAAC,CAAC,WAAW,CAAC,IAAI,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC,IAE9D,QAAQ,IAAIA,6BAAC,WAAW,EAAA,EAAC,IAAI,EAAC,cAAc,GAAG,CACxC;AAEV,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,SAAS,EAAE,MAAM,CAAC,OAAO,EAAE,QAAQ,EAAC,QAAQ,EAAA,EAClD,QAAQ,KACPA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,GAAG,EAAE,IAAI,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,EAAA;YACtC,SAAS;AACR,iBAAC,KAAK,KACJA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,UAAU,EAAC,KAAK,EAAE,IAAI,KAAK,MAAM,GAAG,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,EAAE,EAAA,EAC1E,KAAK,CACD,CACR,CAAC;AACH,YAAA,WAAW,KAAK,OAAO,IAAIA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,MAAM,IAAE,OAAO,CAAQ,CAAC,CAC1D,CACX,CACO;AAET,QAAA,UAAU,KACTA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,QAAQ,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,SAAS,EAAE,MAAM,CAAC,OAAO,EAAA;YAC1D,gBAAgB,EAChB,YAAY,KAAA,IAAA,IAAZ,YAAY,KAAA,MAAA,GAAA,MAAA;AAAZ,YAAA,YAAY,CAAE,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,WAAW,EAAE,MAC3CA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAA,GAAK,WAAW,IACxD,KAAK,CACC,CACV,CAAC,CACM,CACX;AAEA,QAAA,YAAY,KACXA,cAAA,CAAA,aAAA,CAAC,MAAM,IACL,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,IAAI,EACT,QAAQ,EAAEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,IAAA,CAAG,EACvB,OAAO,EAAE,YAAY,EAAA,YAAA,EACV,OAAO,EAClB,SAAS,EAAE,MAAM,CAAC,KAAK,EAAA,CACvB,CACH,CACO;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 { Action } from '../../Action';\nimport { CrossIcon } from '../../../icons';\nimport { IconMap } from '../constants';\nimport { AlertProps } from './types';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { assignCssVars, buildClassnames } from '../../../utils';\n\nimport alertStyles from '../Alerts.module.scss';\nimport styles from './Alert.module.scss';\n\n/*\n Alert component for displaying contextual feedback messages with optional actions and close button.\n */\nexport const Alert = ({\n size = 'base',\n variant = 'default',\n direction = 'horizontal',\n colours: passedColours,\n rightActions,\n rightActionsSlot,\n title,\n titleSlot,\n messageSlot,\n message,\n children,\n iconSlot,\n onClickClose,\n className,\n ...divProps\n}: AlertProps) => {\n const DefaultIcon = IconMap[variant];\n const isVertical = direction === 'vertical';\n const hasActions = (rightActions?.length ?? 0) > 0 \|\| Boolean(rightActionsSlot);\n const hasSingleContent = !children && !((title \|\| titleSlot) && (message \|\| messageSlot));\n\n return (\n <FlexCol\n role={variant === 'error' ? 'alert' : 'status'}\n gap=\"none\"\n className={buildClassnames([\n styles.alertContainer,\n styles[`${size}-size`],\n isVertical ? styles.vertical : undefined,\n hasSingleContent ? styles.centered : undefined,\n alertStyles[`${variant}-alert-variant`],\n className,\n ])}\n style={assignCssVars({ backgroundColor: passedColours?.background })}\n {...divProps}\n >\n <FlexRow\n style={assignCssVars({ iconColor: passedColours?.primary })}\n className={buildClassnames([alertStyles.icon, styles.iconArea])}\n >\n {iconSlot \|\| <DefaultIcon role=\"presentation\" />}\n </FlexRow>\n\n <FlexCol className={styles.content} flexWrap=\"nowrap\">\n {children \|\| (\n <FlexCol gap={size === 'xs' ? 'xs' : 'sm'}>\n {titleSlot \|\|\n (title && (\n <Text variant=\"bodyBold\" style={size === 'base' ? { lineHeight: '24px' } : {}}>\n {title}\n </Text>\n ))}\n {messageSlot \|\| (message && <Text variant=\"body\">{message}</Text>)}\n </FlexCol>\n )}\n </FlexCol>\n\n {hasActions && (\n <FlexRow flexWrap=\"nowrap\" gap=\"sm\" className={styles.actions}>\n {rightActionsSlot}\n {rightActions?.map(({ label, ...actionProps }) => (\n <Button key={label} type=\"button\" size=\"sm\" {...actionProps}>\n {label}\n </Button>\n ))}\n </FlexRow>\n )}\n\n {onClickClose && (\n <Action\n variant=\"flat\"\n size=\"sm\"\n iconSlot={<CrossIcon />}\n onClick={onClickClose}\n aria-label=\"Close\"\n className={styles.close}\n />\n )}\n </FlexCol>\n );\n};\n"],"names":["React"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 'use strict';
 var React = require('react');
-var reactPopper = require('react-popper');
+var react = require('@floating-ui/react');
 var reactDom = require('react-dom');
 var PlaceholderImage = require('./components/PlaceholderImage.cjs');
 var utils = require('./utils.cjs');
@@ -20,17 +20,11 @@ const Image = ({ src, alt = '', className, e2eClassName, width, height, previewW
     const [isPreviewOpen, setIsPreviewOpen] = React.useState(false);
     const [imageState, setImageState] = React.useState({ isLoaded: false, isError: false });
     const [referenceElement, setReferenceElement] = React__default.default.useState(null);
-    const [popperElement, setPopperElement] = React__default.default.useState(null);
-    const { styles, attributes } = reactPopper.usePopper(referenceElement, popperElement, {
+    const { refs, floatingStyles, placement: resolvedPlacement } = react.useFloating({
+        elements: { reference: referenceElement },
         placement: previewPlacement,
-        modifiers: [
-            {
-                name: 'offset',
-                options: {
-                    offset: [0, 12],
-                },
-            },
-        ],
+        middleware: [react.offset(12), react.flip()],
+        whileElementsMounted: react.autoUpdate,
     });
     const openImagePreview = React.useCallback(() => (previewEnabled ? setIsPreviewOpen(true) : {}), [previewEnabled]);
     const closeImagePreview = React.useCallback(() => (previewEnabled ? setIsPreviewOpen(false) : {}), [previewEnabled]);
@@ -52,7 +46,7 @@ const Image = ({ src, alt = '', className, e2eClassName, width, height, previewW
             isImageHidden &&
             (placeholder || (React__default.default.createElement(PlaceholderImage.PlaceholderImage, { className: buildClassnames.buildClassnames([classNames === null || classNames === void 0 ? void 0 : classNames.placeholder, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.placeholder]), width: placeholderWidth || width, height: placeholderHeight || height }))),
         isPreviewOpen &&
-            reactDom.createPortal(React__default.default.createElement("div", { ref: setPopperElement, style: styles.popper, ...attributes.popper, className: buildClassnames.buildClassnames([
+            reactDom.createPortal(React__default.default.createElement("div", { ref: refs.setFloating, style: floatingStyles, "data-placement": resolvedPlacement, className: buildClassnames.buildClassnames([
                     Image_module.previewImageContainer,
                     classNames === null || classNames === void 0 ? void 0 : classNames.previewImageContainer,
                     e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.previewImageContainer,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Image.cjs","sources":["../../../src/components/Image/Image.tsx"],"sourcesContent":["import React, { useState, useCallback } from 'react';\nimport { ~~usePopper~~ } from 'react~~-popper~~';\nimport { createPortal } from 'react-dom';\nimport { ~~Placement } from '@popperjs/core';\nimport {~~ PlaceholderImage } from './components/PlaceholderImage';\n\nimport { generateClassNames } from './utils';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport { createContextAwareUrl } from '../Anchor/utils/urlUtils';\nimport imageStyles from './Image.module.scss';\n\ntype ImageProps = {\n src: string;\n alt?: string;\n className?: string;\n e2eClassName?: string;\n width?: string;\n height?: string;\n previewWidth?: string;\n previewHeight?: string;\n previewPlacement?: Placement;\n previewEnabled?: boolean;\n placeholder?: React.ReactNode;\n placeholderWidth?: string;\n placeholderHeight?: string;\n disablePlaceholder?: boolean;\n};\n\nexport const Image = ({\n src,\n alt = '',\n className,\n e2eClassName,\n width,\n height,\n previewWidth,\n previewHeight,\n previewPlacement = 'right',\n previewEnabled = false,\n placeholder,\n placeholderWidth,\n placeholderHeight,\n disablePlaceholder = false,\n}: ImageProps) => {\n const classNames = generateClassNames(className);\n const e2eClassNames = generateClassNames(e2eClassName);\n const contextAwareSrc = createContextAwareUrl(src);\n\n const [isPreviewOpen, setIsPreviewOpen] = useState(false);\n const [imageState, setImageState] = useState({ isLoaded: false, isError: false });\n\n const [referenceElement, setReferenceElement] = React.useState<HTMLImageElement \| null>(null);\n const ~~[popperElement~~, ~~setPopperElement]~~ = ~~React.useState<HTMLDivElement~~ \| ~~null>~~(~~null);\~~n ~~const~~ { ~~styles,~~ ~~attributes~~ } ~~= usePopper(referenceElement, popperElement, {\~~n placement: previewPlacement,\n ~~modifiers~~: [~~\n {\n name: '~~offset~~',\n options: {\n offset: [0~~, 12],\n ~~},\n },\n~~ ],\n });\n\n const openImagePreview = useCallback(\n () => (previewEnabled ? setIsPreviewOpen(true) : {}),\n [previewEnabled],\n );\n const closeImagePreview = useCallback(\n () => (previewEnabled ? setIsPreviewOpen(false) : {}),\n [previewEnabled],\n );\n\n const onLoad = () => setImageState({ isLoaded: true, isError: false });\n const onError = () => setImageState({ isLoaded: true, isError: true });\n\n const isImageHidden = !imageState.isLoaded \|\| imageState.isError;\n\n return (\n <div\n className={buildClassnames([\n classNames?.container,\n e2eClassNames?.container,\n className,\n ])}\n >\n <img\n src={contextAwareSrc}\n alt={alt}\n className={buildClassnames([\n imageStyles.image,\n previewEnabled && imageStyles.previewEnabled,\n classNames?.image,\n e2eClassNames?.image,\n ])}\n width={width}\n height={height}\n onLoad={onLoad}\n onError={onError}\n onMouseEnter={openImagePreview}\n onMouseLeave={closeImagePreview}\n style={isImageHidden ? { display: 'none' } : {}}\n ref={setReferenceElement}\n />\n {!disablePlaceholder &&\n isImageHidden &&\n (placeholder \|\| (\n <PlaceholderImage\n className={buildClassnames([classNames?.placeholder, e2eClassNames?.placeholder])}\n width={placeholderWidth \|\| width}\n height={placeholderHeight \|\| height}\n />\n ))}\n {isPreviewOpen &&\n createPortal(\n <div\n ref={~~setPopperElement~~}\n style={~~styles.popper~~}\n {~~...attributes.popper~~}\n className={buildClassnames([\n imageStyles.previewImageContainer,\n classNames?.previewImageContainer,\n e2eClassNames?.previewImageContainer,\n ])}\n >\n <img\n className={imageStyles.previewImage}\n src={contextAwareSrc}\n alt=\"\"\n width={previewWidth}\n height={previewHeight}\n />\n </div>,\n document.body,\n )}\n </div>\n );\n};\n"],"names":["generateClassNames","createContextAwareUrl","useState","React","~~usePopper~~","useCallback","buildClassnames","imageStyles","PlaceholderImage","createPortal"],"mappings":";;;;;;;;;;;;;;;~~AA4BO~~,MAAM,KAAK,GAAG,CAAC,EACpB,GAAG,EACH,GAAG,GAAG,EAAE,EACR,SAAS,EACT,YAAY,EACZ,KAAK,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,gBAAgB,GAAG,OAAO,EAC1B,cAAc,GAAG,KAAK,EACtB,WAAW,EACX,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,GAAG,KAAK,GACf,KAAI;AACf,IAAA,MAAM,UAAU,GAAGA,wBAAkB,CAAC,SAAS,CAAC;AAChD,IAAA,MAAM,aAAa,GAAGA,wBAAkB,CAAC,YAAY,CAAC;AACtD,IAAA,MAAM,eAAe,GAAGC,8BAAqB,CAAC,GAAG,CAAC;IAElD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;AACzD,IAAA,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAGA,cAAQ,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;AAEjF,IAAA,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAGC,sBAAK,CAAC,QAAQ,CAA0B,IAAI,CAAC;~~AAC7F~~,~~IAAA,~~MAAM,~~CAAC,aAAa,~~EAAE,~~gBAAgB,CAAC,GAAGA,sBAAK,CAAC,QAAQ,CAAwB,~~IAAI,~~CAAC;IACrF~~,~~MAAM~~,EAAE,~~MAAM~~,EAAE,~~UAAU~~,EAAE,GAAGC,~~qBAAS~~,CAAC,~~gBAAgB~~,EAAE,~~aAAa,~~EAAE~~;AACxE~~,~~QAAA,~~SAAS,EAAE,gBAAgB;~~AAC3B~~,QAAA,SAAS,EAAE~~;AACT~~,~~YAAA~~;~~AACE~~,~~gBAAA~~,~~IAAI,~~EAAE,~~QAAQ;AACd~~,~~gBAAA~~,~~OAAO~~,EAAE~~;AACP~~,~~oBAAA,MAAM,EAAE,~~CAAC,~~CAAC~~,~~EAAE~~,EAAE,CAAC;~~AAChB~~,~~iBAAA;AACF~~,~~aAAA;AACF~~,~~SAAA~~;~~AACF~~,KAAA,CAAC;IAEF,MAAM,gBAAgB,GAAGC,iBAAW,CAClC,OAAO,cAAc,GAAG,gBAAgB,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,EACpD,CAAC,cAAc,CAAC,CACjB;IACD,MAAM,iBAAiB,GAAGA,iBAAW,CACnC,OAAO,cAAc,GAAG,gBAAgB,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,EACrD,CAAC,cAAc,CAAC,CACjB;AAED,IAAA,MAAM,MAAM,GAAG,MAAM,aAAa,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;AACtE,IAAA,MAAM,OAAO,GAAG,MAAM,aAAa,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;IAEtE,MAAM,aAAa,GAAG,CAAC,UAAU,CAAC,QAAQ,IAAI,UAAU,CAAC,OAAO;AAEhE,IAAA,~~QACEF~~,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,~~EAAEG~~,+BAAe,CAAC;AACzB,YAAA,UAAU,KAAA,IAAA,IAAV,UAAU,KAAA,MAAA,GAAA,MAAA,GAAV,UAAU,CAAE,SAAS;AACrB,YAAA,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,SAAS;YACxB,SAAS;SACV,CAAC,EAAA;~~QAEFH~~,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,eAAe,EACpB,GAAG,EAAE,GAAG,EACR,SAAS,~~EAAEG~~,+BAAe,CAAC;AACzB,gBAAAC,YAAW,CAAC,KAAK;gBACjB,cAAc,IAAIA,YAAW,CAAC,cAAc;AAC5C,gBAAA,UAAU,KAAA,IAAA,IAAV,UAAU,KAAA,MAAA,GAAA,MAAA,GAAV,UAAU,CAAE,KAAK;AACjB,gBAAA,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,KAAK;aACrB,CAAC,EACF,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,gBAAgB,EAC9B,YAAY,EAAE,iBAAiB,EAC/B,KAAK,EAAE,aAAa,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,EAC/C,GAAG,EAAE,mBAAmB,EAAA,CACxB;AACD,QAAA,CAAC,kBAAkB;YAClB,aAAa;AACb,aAAC,WAAW,~~KACVJ~~,~~qCAACK~~,iCAAgB,EAAA,EACf,SAAS,EAAEF,+BAAe,CAAC,CAAC,UAAU,aAAV,UAAU,KAAA,MAAA,GAAA,MAAA,GAAV,UAAU,CAAE,WAAW,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,WAAW,CAAC,CAAC,EACjF,KAAK,EAAE,gBAAgB,IAAI,KAAK,EAChC,MAAM,EAAE,iBAAiB,IAAI,MAAM,EAAA,CACnC,CACH,CAAC;QACH,aAAa;AACZ,YAAAG,qBAAY,~~CACVN~~,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,~~gBAAgB~~,EACrB,KAAK,EAAE,~~MAAM~~,~~CAAC,MAAM,~~EAAA,~~GAChB~~,~~UAAU~~,~~CAAC~~,~~MAAM~~,~~EACrB,~~SAAS,~~EAAEG~~,+BAAe,CAAC;AACzB,oBAAAC,YAAW,CAAC,qBAAqB;AACjC,oBAAA,UAAU,KAAA,IAAA,IAAV,UAAU,KAAA,MAAA,GAAA,MAAA,GAAV,UAAU,CAAE,qBAAqB;AACjC,oBAAA,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,qBAAqB;iBACrC,CAAC,EAAA;AAEF,~~gBAAAJ~~,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,~~EAAEI~~,YAAW,CAAC,YAAY,EACnC,GAAG,EAAE,eAAe,EACpB,GAAG,EAAC,EAAE,EACN,KAAK,EAAE,YAAY,EACnB,MAAM,EAAE,aAAa,EAAA,CACrB,CACE,EACN,QAAQ,CAAC,IAAI,CACd,CACC;AAEV;;;;"}
1	+ {"version":3,"file":"Image.cjs","sources":["../../../src/components/Image/Image.tsx"],"sourcesContent":["import React, { useState, useCallback } from 'react';\nimport { useFloating, offset, flip, autoUpdate, Placement } from '@floating-ui/react';\nimport { createPortal } from 'react-dom';\nimport { PlaceholderImage } from './components/PlaceholderImage';\n\nimport { generateClassNames } from './utils';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport { createContextAwareUrl } from '../Anchor/utils/urlUtils';\nimport imageStyles from './Image.module.scss';\n\ntype ImageProps = {\n src: string;\n alt?: string;\n className?: string;\n e2eClassName?: string;\n width?: string;\n height?: string;\n previewWidth?: string;\n previewHeight?: string;\n previewPlacement?: Placement;\n previewEnabled?: boolean;\n placeholder?: React.ReactNode;\n placeholderWidth?: string;\n placeholderHeight?: string;\n disablePlaceholder?: boolean;\n};\n\nexport const Image = ({\n src,\n alt = '',\n className,\n e2eClassName,\n width,\n height,\n previewWidth,\n previewHeight,\n previewPlacement = 'right',\n previewEnabled = false,\n placeholder,\n placeholderWidth,\n placeholderHeight,\n disablePlaceholder = false,\n}: ImageProps) => {\n const classNames = generateClassNames(className);\n const e2eClassNames = generateClassNames(e2eClassName);\n const contextAwareSrc = createContextAwareUrl(src);\n\n const [isPreviewOpen, setIsPreviewOpen] = useState(false);\n const [imageState, setImageState] = useState({ isLoaded: false, isError: false });\n\n const [referenceElement, setReferenceElement] = React.useState<HTMLImageElement \| null>(null);\n const { refs, floatingStyles, placement: resolvedPlacement } = useFloating({\n elements: { reference: referenceElement },\n placement: previewPlacement,\n middleware: [offset(12), flip()],\n whileElementsMounted: autoUpdate,\n });\n\n const openImagePreview = useCallback(\n () => (previewEnabled ? setIsPreviewOpen(true) : {}),\n [previewEnabled],\n );\n const closeImagePreview = useCallback(\n () => (previewEnabled ? setIsPreviewOpen(false) : {}),\n [previewEnabled],\n );\n\n const onLoad = () => setImageState({ isLoaded: true, isError: false });\n const onError = () => setImageState({ isLoaded: true, isError: true });\n\n const isImageHidden = !imageState.isLoaded \|\| imageState.isError;\n\n return (\n <div\n className={buildClassnames([\n classNames?.container,\n e2eClassNames?.container,\n className,\n ])}\n >\n <img\n src={contextAwareSrc}\n alt={alt}\n className={buildClassnames([\n imageStyles.image,\n previewEnabled && imageStyles.previewEnabled,\n classNames?.image,\n e2eClassNames?.image,\n ])}\n width={width}\n height={height}\n onLoad={onLoad}\n onError={onError}\n onMouseEnter={openImagePreview}\n onMouseLeave={closeImagePreview}\n style={isImageHidden ? { display: 'none' } : {}}\n ref={setReferenceElement}\n />\n {!disablePlaceholder &&\n isImageHidden &&\n (placeholder \|\| (\n <PlaceholderImage\n className={buildClassnames([classNames?.placeholder, e2eClassNames?.placeholder])}\n width={placeholderWidth \|\| width}\n height={placeholderHeight \|\| height}\n />\n ))}\n {isPreviewOpen &&\n createPortal(\n <div\n ref={refs.setFloating}\n style={floatingStyles}\n data-placement={resolvedPlacement}\n className={buildClassnames([\n imageStyles.previewImageContainer,\n classNames?.previewImageContainer,\n e2eClassNames?.previewImageContainer,\n ])}\n >\n <img\n className={imageStyles.previewImage}\n src={contextAwareSrc}\n alt=\"\"\n width={previewWidth}\n height={previewHeight}\n />\n </div>,\n document.body,\n )}\n </div>\n );\n};\n"],"names":["generateClassNames","createContextAwareUrl","useState","React","useFloating","offset","flip","autoUpdate","useCallback","buildClassnames","imageStyles","PlaceholderImage","createPortal"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Placement } from '@popperjs/core';
+import { Placement } from '@floating-ui/react';
 type ImageProps = {
     src: string;
     alt?: string;

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

@@ -1,5 +1,5 @@
 import React__default, { useState, useCallback } from 'react';
-import { usePopper } from 'react-popper';
+import { useFloating, autoUpdate, offset, flip } from '@floating-ui/react';
 import { createPortal } from 'react-dom';
 import { PlaceholderImage } from './components/PlaceholderImage.js';
 import { generateClassNames } from './utils.js';
@@ -14,17 +14,11 @@ const Image = ({ src, alt = '', className, e2eClassName, width, height, previewW
     const [isPreviewOpen, setIsPreviewOpen] = useState(false);
     const [imageState, setImageState] = useState({ isLoaded: false, isError: false });
     const [referenceElement, setReferenceElement] = React__default.useState(null);
-    const [popperElement, setPopperElement] = React__default.useState(null);
-    const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    const { refs, floatingStyles, placement: resolvedPlacement } = useFloating({
+        elements: { reference: referenceElement },
         placement: previewPlacement,
-        modifiers: [
-            {
-                name: 'offset',
-                options: {
-                    offset: [0, 12],
-                },
-            },
-        ],
+        middleware: [offset(12), flip()],
+        whileElementsMounted: autoUpdate,
     });
     const openImagePreview = useCallback(() => (previewEnabled ? setIsPreviewOpen(true) : {}), [previewEnabled]);
     const closeImagePreview = useCallback(() => (previewEnabled ? setIsPreviewOpen(false) : {}), [previewEnabled]);
@@ -46,7 +40,7 @@ const Image = ({ src, alt = '', className, e2eClassName, width, height, previewW
             isImageHidden &&
             (placeholder || (React__default.createElement(PlaceholderImage, { className: buildClassnames([classNames === null || classNames === void 0 ? void 0 : classNames.placeholder, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.placeholder]), width: placeholderWidth || width, height: placeholderHeight || height }))),
         isPreviewOpen &&
-            createPortal(React__default.createElement("div", { ref: setPopperElement, style: styles.popper, ...attributes.popper, className: buildClassnames([
+            createPortal(React__default.createElement("div", { ref: refs.setFloating, style: floatingStyles, "data-placement": resolvedPlacement, className: buildClassnames([
                     imageStyles.previewImageContainer,
                     classNames === null || classNames === void 0 ? void 0 : classNames.previewImageContainer,
                     e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.previewImageContainer,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Image.js","sources":["../../../src/components/Image/Image.tsx"],"sourcesContent":["import React, { useState, useCallback } from 'react';\nimport { ~~usePopper~~ } from 'react~~-popper~~';\nimport { createPortal } from 'react-dom';\nimport { ~~Placement } from '@popperjs/core';\nimport {~~ PlaceholderImage } from './components/PlaceholderImage';\n\nimport { generateClassNames } from './utils';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport { createContextAwareUrl } from '../Anchor/utils/urlUtils';\nimport imageStyles from './Image.module.scss';\n\ntype ImageProps = {\n src: string;\n alt?: string;\n className?: string;\n e2eClassName?: string;\n width?: string;\n height?: string;\n previewWidth?: string;\n previewHeight?: string;\n previewPlacement?: Placement;\n previewEnabled?: boolean;\n placeholder?: React.ReactNode;\n placeholderWidth?: string;\n placeholderHeight?: string;\n disablePlaceholder?: boolean;\n};\n\nexport const Image = ({\n src,\n alt = '',\n className,\n e2eClassName,\n width,\n height,\n previewWidth,\n previewHeight,\n previewPlacement = 'right',\n previewEnabled = false,\n placeholder,\n placeholderWidth,\n placeholderHeight,\n disablePlaceholder = false,\n}: ImageProps) => {\n const classNames = generateClassNames(className);\n const e2eClassNames = generateClassNames(e2eClassName);\n const contextAwareSrc = createContextAwareUrl(src);\n\n const [isPreviewOpen, setIsPreviewOpen] = useState(false);\n const [imageState, setImageState] = useState({ isLoaded: false, isError: false });\n\n const [referenceElement, setReferenceElement] = React.useState<HTMLImageElement \| null>(null);\n const ~~[popperElement~~, ~~setPopperElement]~~ = ~~React.useState<HTMLDivElement~~ \| ~~null>~~(~~null);\~~n ~~const~~ { ~~styles,~~ ~~attributes~~ } ~~= usePopper(referenceElement, popperElement, {\~~n placement: previewPlacement,\n ~~modifiers~~: [~~\n {\n name: '~~offset~~',\n options: {\n offset: [0~~, 12],\n ~~},\n },\n~~ ],\n });\n\n const openImagePreview = useCallback(\n () => (previewEnabled ? setIsPreviewOpen(true) : {}),\n [previewEnabled],\n );\n const closeImagePreview = useCallback(\n () => (previewEnabled ? setIsPreviewOpen(false) : {}),\n [previewEnabled],\n );\n\n const onLoad = () => setImageState({ isLoaded: true, isError: false });\n const onError = () => setImageState({ isLoaded: true, isError: true });\n\n const isImageHidden = !imageState.isLoaded \|\| imageState.isError;\n\n return (\n <div\n className={buildClassnames([\n classNames?.container,\n e2eClassNames?.container,\n className,\n ])}\n >\n <img\n src={contextAwareSrc}\n alt={alt}\n className={buildClassnames([\n imageStyles.image,\n previewEnabled && imageStyles.previewEnabled,\n classNames?.image,\n e2eClassNames?.image,\n ])}\n width={width}\n height={height}\n onLoad={onLoad}\n onError={onError}\n onMouseEnter={openImagePreview}\n onMouseLeave={closeImagePreview}\n style={isImageHidden ? { display: 'none' } : {}}\n ref={setReferenceElement}\n />\n {!disablePlaceholder &&\n isImageHidden &&\n (placeholder \|\| (\n <PlaceholderImage\n className={buildClassnames([classNames?.placeholder, e2eClassNames?.placeholder])}\n width={placeholderWidth \|\| width}\n height={placeholderHeight \|\| height}\n />\n ))}\n {isPreviewOpen &&\n createPortal(\n <div\n ref={~~setPopperElement~~}\n style={~~styles.popper~~}\n {~~...attributes.popper~~}\n className={buildClassnames([\n imageStyles.previewImageContainer,\n classNames?.previewImageContainer,\n e2eClassNames?.previewImageContainer,\n ])}\n >\n <img\n className={imageStyles.previewImage}\n src={contextAwareSrc}\n alt=\"\"\n width={previewWidth}\n height={previewHeight}\n />\n </div>,\n document.body,\n )}\n </div>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;~~AA4BO~~,MAAM,KAAK,GAAG,CAAC,EACpB,GAAG,EACH,GAAG,GAAG,EAAE,EACR,SAAS,EACT,YAAY,EACZ,KAAK,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,gBAAgB,GAAG,OAAO,EAC1B,cAAc,GAAG,KAAK,EACtB,WAAW,EACX,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,GAAG,KAAK,GACf,KAAI;AACf,IAAA,MAAM,UAAU,GAAG,kBAAkB,CAAC,SAAS,CAAC;AAChD,IAAA,MAAM,aAAa,GAAG,kBAAkB,CAAC,YAAY,CAAC;AACtD,IAAA,MAAM,eAAe,GAAG,qBAAqB,CAAC,GAAG,CAAC;IAElD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AACzD,IAAA,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;AAEjF,IAAA,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAGA,cAAK,CAAC,QAAQ,CAA0B,IAAI,CAAC;~~AAC7F~~,~~IAAA,~~MAAM,~~CAAC~~,~~aAAa~~,EAAE,~~gBAAgB~~,~~CAAC~~,~~GAAGA~~,~~cAAK~~,~~CAAC~~,~~QAAQ~~,~~CAAwB~~,~~IAAI~~,CAAC;~~IACrF~~,~~MAAM~~,~~EAAE~~,~~MAAM,~~EAAE,~~UAAU,~~EAAE,~~GAAG,~~SAAS,~~CAAC~~,gBAAgB,EAAE~~,aAAa,EAAE~~;~~AACxE~~,QAAA,SAAS,EAAE,gBAAgB;~~AAC3B~~,~~QAAA~~,~~SAAS,~~EAAE~~;AACT~~,~~YAAA;AACE~~,~~gBAAA~~,~~IAAI~~,EAAE,~~QAAQ;AACd~~,~~gBAAA,OAAO,~~EAAE~~;AACP~~,~~oBAAA~~,~~MAAM,~~EAAE,CAAC,~~CAAC~~,~~EAAE~~,EAAE,~~CAAC~~;~~AAChB~~,~~iBAAA;AACF,aAAA;AACF,SAAA;AACF,~~KAAA,CAAC;IAEF,MAAM,gBAAgB,GAAG,WAAW,CAClC,OAAO,cAAc,GAAG,gBAAgB,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,EACpD,CAAC,cAAc,CAAC,CACjB;IACD,MAAM,iBAAiB,GAAG,WAAW,CACnC,OAAO,cAAc,GAAG,gBAAgB,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,EACrD,CAAC,cAAc,CAAC,CACjB;AAED,IAAA,MAAM,MAAM,GAAG,MAAM,aAAa,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;AACtE,IAAA,MAAM,OAAO,GAAG,MAAM,aAAa,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;IAEtE,MAAM,aAAa,GAAG,CAAC,UAAU,CAAC,QAAQ,IAAI,UAAU,CAAC,OAAO;AAEhE,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,eAAe,CAAC;AACzB,YAAA,UAAU,KAAA,IAAA,IAAV,UAAU,KAAA,MAAA,GAAA,MAAA,GAAV,UAAU,CAAE,SAAS;AACrB,YAAA,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,SAAS;YACxB,SAAS;SACV,CAAC,EAAA;QAEFA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,eAAe,EACpB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,CAAC;AACzB,gBAAA,WAAW,CAAC,KAAK;gBACjB,cAAc,IAAI,WAAW,CAAC,cAAc;AAC5C,gBAAA,UAAU,KAAA,IAAA,IAAV,UAAU,KAAA,MAAA,GAAA,MAAA,GAAV,UAAU,CAAE,KAAK;AACjB,gBAAA,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,KAAK;aACrB,CAAC,EACF,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,gBAAgB,EAC9B,YAAY,EAAE,iBAAiB,EAC/B,KAAK,EAAE,aAAa,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,EAC/C,GAAG,EAAE,mBAAmB,EAAA,CACxB;AACD,QAAA,CAAC,kBAAkB;YAClB,aAAa;AACb,aAAC,WAAW,KACVA,6BAAC,gBAAgB,EAAA,EACf,SAAS,EAAE,eAAe,CAAC,CAAC,UAAU,aAAV,UAAU,KAAA,MAAA,GAAA,MAAA,GAAV,UAAU,CAAE,WAAW,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,WAAW,CAAC,CAAC,EACjF,KAAK,EAAE,gBAAgB,IAAI,KAAK,EAChC,MAAM,EAAE,iBAAiB,IAAI,MAAM,EAAA,CACnC,CACH,CAAC;QACH,aAAa;AACZ,YAAA,YAAY,CACVA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,~~gBAAgB~~,EACrB,KAAK,EAAE,~~MAAM~~,~~CAAC,MAAM,~~EAAA,~~GAChB~~,~~UAAU~~,~~CAAC~~,~~MAAM~~,~~EACrB,~~SAAS,EAAE,eAAe,CAAC;AACzB,oBAAA,WAAW,CAAC,qBAAqB;AACjC,oBAAA,UAAU,KAAA,IAAA,IAAV,UAAU,KAAA,MAAA,GAAA,MAAA,GAAV,UAAU,CAAE,qBAAqB;AACjC,oBAAA,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,qBAAqB;iBACrC,CAAC,EAAA;AAEF,gBAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,WAAW,CAAC,YAAY,EACnC,GAAG,EAAE,eAAe,EACpB,GAAG,EAAC,EAAE,EACN,KAAK,EAAE,YAAY,EACnB,MAAM,EAAE,aAAa,EAAA,CACrB,CACE,EACN,QAAQ,CAAC,IAAI,CACd,CACC;AAEV;;;;"}
1	+ {"version":3,"file":"Image.js","sources":["../../../src/components/Image/Image.tsx"],"sourcesContent":["import React, { useState, useCallback } from 'react';\nimport { useFloating, offset, flip, autoUpdate, Placement } from '@floating-ui/react';\nimport { createPortal } from 'react-dom';\nimport { PlaceholderImage } from './components/PlaceholderImage';\n\nimport { generateClassNames } from './utils';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport { createContextAwareUrl } from '../Anchor/utils/urlUtils';\nimport imageStyles from './Image.module.scss';\n\ntype ImageProps = {\n src: string;\n alt?: string;\n className?: string;\n e2eClassName?: string;\n width?: string;\n height?: string;\n previewWidth?: string;\n previewHeight?: string;\n previewPlacement?: Placement;\n previewEnabled?: boolean;\n placeholder?: React.ReactNode;\n placeholderWidth?: string;\n placeholderHeight?: string;\n disablePlaceholder?: boolean;\n};\n\nexport const Image = ({\n src,\n alt = '',\n className,\n e2eClassName,\n width,\n height,\n previewWidth,\n previewHeight,\n previewPlacement = 'right',\n previewEnabled = false,\n placeholder,\n placeholderWidth,\n placeholderHeight,\n disablePlaceholder = false,\n}: ImageProps) => {\n const classNames = generateClassNames(className);\n const e2eClassNames = generateClassNames(e2eClassName);\n const contextAwareSrc = createContextAwareUrl(src);\n\n const [isPreviewOpen, setIsPreviewOpen] = useState(false);\n const [imageState, setImageState] = useState({ isLoaded: false, isError: false });\n\n const [referenceElement, setReferenceElement] = React.useState<HTMLImageElement \| null>(null);\n const { refs, floatingStyles, placement: resolvedPlacement } = useFloating({\n elements: { reference: referenceElement },\n placement: previewPlacement,\n middleware: [offset(12), flip()],\n whileElementsMounted: autoUpdate,\n });\n\n const openImagePreview = useCallback(\n () => (previewEnabled ? setIsPreviewOpen(true) : {}),\n [previewEnabled],\n );\n const closeImagePreview = useCallback(\n () => (previewEnabled ? setIsPreviewOpen(false) : {}),\n [previewEnabled],\n );\n\n const onLoad = () => setImageState({ isLoaded: true, isError: false });\n const onError = () => setImageState({ isLoaded: true, isError: true });\n\n const isImageHidden = !imageState.isLoaded \|\| imageState.isError;\n\n return (\n <div\n className={buildClassnames([\n classNames?.container,\n e2eClassNames?.container,\n className,\n ])}\n >\n <img\n src={contextAwareSrc}\n alt={alt}\n className={buildClassnames([\n imageStyles.image,\n previewEnabled && imageStyles.previewEnabled,\n classNames?.image,\n e2eClassNames?.image,\n ])}\n width={width}\n height={height}\n onLoad={onLoad}\n onError={onError}\n onMouseEnter={openImagePreview}\n onMouseLeave={closeImagePreview}\n style={isImageHidden ? { display: 'none' } : {}}\n ref={setReferenceElement}\n />\n {!disablePlaceholder &&\n isImageHidden &&\n (placeholder \|\| (\n <PlaceholderImage\n className={buildClassnames([classNames?.placeholder, e2eClassNames?.placeholder])}\n width={placeholderWidth \|\| width}\n height={placeholderHeight \|\| height}\n />\n ))}\n {isPreviewOpen &&\n createPortal(\n <div\n ref={refs.setFloating}\n style={floatingStyles}\n data-placement={resolvedPlacement}\n className={buildClassnames([\n imageStyles.previewImageContainer,\n classNames?.previewImageContainer,\n e2eClassNames?.previewImageContainer,\n ])}\n >\n <img\n className={imageStyles.previewImage}\n src={contextAwareSrc}\n alt=\"\"\n width={previewWidth}\n height={previewHeight}\n />\n </div>,\n document.body,\n )}\n </div>\n );\n};\n"],"names":["React"],"mappings":"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"}

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

@@ -1,8 +1,7 @@
 'use strict';
 var React = require('react');
-var reactPopper = require('react-popper');
-var ResizeObserver = require('resize-observer-polyfill');
+var react = require('@floating-ui/react');
 var Portal = require('../Portal/Portal.cjs');
 var index = require('../../theme/index.cjs');
 var buildClassnames = require('../../utils/buildClassnames.cjs');
@@ -15,12 +14,15 @@ var Popover_module = require('./Popover.module.scss.cjs');
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var ResizeObserver__default = /*#__PURE__*/_interopDefaultCompat(ResizeObserver);
 const Popover = ({ id: passedId, children, zIndex = index.theme.layers.popup, placement = 'bottom', anchorElement, rootElementRef, onShouldClose, style, disableFocusLock, removeBackdrop = false, useAnchorWidth, ignoreAriaWarnings, className, ...dialogProps }) => {
-    // Set up PopperJS
-    const [popperElement, setPopperElement] = React.useState(null);
-    const { styles, attributes, update } = reactPopper.usePopper(anchorElement, popperElement, { placement });
+    // Set up Floating UI positioning
+    const { refs, floatingStyles, placement: resolvedPlacement } = react.useFloating({
+        elements: { reference: anchorElement },
+        placement,
+        middleware: [react.flip()],
+        whileElementsMounted: react.autoUpdate,
+    });
     // Setup popover id to use passed, or generate its' own.
     const id = React.useMemo(() => passedId || generateId.generateId('popover'), [passedId]);
     // Check and update aria for anchor, only works once this has rendered for the first time though.
@@ -30,42 +32,19 @@ const Popover = ({ id: passedId, children, zIndex = index.theme.layers.popup, pl
         onShouldClose === null || onShouldClose === void 0 ? void 0 : onShouldClose();
     };
     const { handleKeyDown } = useHandleFocus.useHandleFocus({
-        popperElement,
+        popperElement: refs.floating.current,
         anchorElement,
         onClose,
         disableFocusLock,
     });
-    /**
-     * When content size is changed, force popper update
-     */
-    React.useEffect(() => {
-        if (!update || !popperElement)
-            return undefined;
-        const resizeObserver = new ResizeObserver__default.default(update);
-        resizeObserver.observe(popperElement);
-        return () => {
-            resizeObserver.disconnect();
-        };
-    }, [update, popperElement]);
-    /**
-     * When window is resized, force popper update
-     */
-    React.useEffect(() => {
-        if (!update)
-            return undefined;
-        window.addEventListener('resize', update);
-        return () => {
-            window.removeEventListener('resize', update);
-        };
-    }, [update]);
     return (React__default.default.createElement(Portal.Portal, { rootElementRef: rootElementRef },
         !removeBackdrop && (React__default.default.createElement("div", { className: Popover_module.backdrop, style: assignCssVars.assignCssVars({ zIndex }), onClick: onClose, "data-testid": "popover-backdrop" })),
-        React__default.default.createElement("dialog", { open: true, id: id, "data-dialog-type": "popover", className: buildClassnames.buildClassnames([Popover_module.dialog, className]), ref: setPopperElement, style: {
+        React__default.default.createElement("dialog", { open: true, id: id, "data-dialog-type": "popover", "data-placement": resolvedPlacement, className: buildClassnames.buildClassnames([Popover_module.dialog, className]), ref: refs.setFloating, style: {
                 ...assignCssVars.assignCssVars({ zIndex: zIndex + 1 }),
-                ...styles.popper,
+                ...floatingStyles,
                 ...style,
                 ...(useAnchorWidth ? { minWidth: anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.clientWidth } : {}),
-            }, onKeyDown: handleKeyDown, ...attributes.popper, ...dialogProps }, children)));
+            }, onKeyDown: handleKeyDown, ...dialogProps }, children)));
 };
 exports.Popover = Popover;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Popover.cjs","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import React, { ~~useState, useEffect,~~ useMemo } from 'react';\nimport { ~~usePopper~~ } ~~from~~ ~~'react-popper';\nimport~~ ~~ResizeObserver~~ from '~~resize~~-~~observer-polyfill~~';\n\nimport { Portal } from '../Portal';\nimport { theme } from '../../theme';\nimport { buildClassnames, generateId, assignCssVars } from '../../utils';\nimport { useUpdateAriaAnchor } from './hooks/useUpdateAriaAnchor';\nimport { PopoverProps } from './types';\nimport { useHandleFocus } from './hooks/useHandleFocus';\nimport popoverStyles from './Popover.module.scss';\n\nexport const Popover = ({\n id: passedId,\n children,\n zIndex = theme.layers.popup,\n placement = 'bottom',\n anchorElement,\n rootElementRef,\n onShouldClose,\n style,\n disableFocusLock,\n removeBackdrop = false,\n useAnchorWidth,\n ignoreAriaWarnings,\n className,\n ...dialogProps\n}: PopoverProps) => {\n // Set up ~~PopperJS\n const~~ ~~[popperElement,~~ ~~setPopperElement] = useState<HTMLDialogElement \| null>(null);\~~n const { ~~styles~~, ~~attributes~~, ~~update~~ } = ~~usePopper~~(~~anchorElement,~~ ~~popperElement,~~ { placement });\n\n // Setup popover id to use passed, or generate its' own.\n const id = useMemo(() => passedId \|\| generateId('popover'), [passedId]);\n\n // Check and update aria for anchor, only works once this has rendered for the first time though.\n useUpdateAriaAnchor({ anchorElement, popoverId: id, ignoreAriaWarnings });\n\n const onClose = () => {\n anchorElement?.focus();\n onShouldClose?.();\n };\n\n const { handleKeyDown } = useHandleFocus({\n popperElement,\n anchorElement,\n onClose,\n disableFocusLock,\n });\n\n ~~/*\n When content size is changed, force popper update\n /\n useEffect(() => {\n if (!update \|\| !popperElement)~~ return ~~undefined;\n const resizeObserver = new ResizeObserver~~(~~update);\n resizeObserver.observe(popperElement);\n~~\n return () => {\n resizeObserver.disconnect();\n };\n }, [update, popperElement]);\n\n /\n When window is resized, force popper update\n */\n useEffect(() => {\n if (!update) return undefined;\n window.addEventListener('resize', update);\n\n return () => {\n window.removeEventListener('resize', update);\n };\n }, [update]);\n\n return (\n <Portal rootElementRef={rootElementRef}>\n {!removeBackdrop && (\n <div\n className={popoverStyles.backdrop}\n style={assignCssVars({ zIndex })}\n onClick={onClose}\n data-testid=\"popover-backdrop\"\n />\n )}\n <dialog\n open\n id={id}\n data-dialog-type=\"popover\"\n className={buildClassnames([popoverStyles.dialog, className])}\n ref={~~setPopperElement~~}\n style={{\n ...assignCssVars({ zIndex: zIndex + 1 })~~, // Dialog stacks above its backdrop\~~n ...~~styles.popper~~,\n ...style,\n ...(useAnchorWidth ? { minWidth: anchorElement?.clientWidth } : {}),\n }}\n onKeyDown={handleKeyDown}\n {...~~attributes.popper}\n {...~~dialogProps}\n >\n {children}\n </dialog>\n </Portal>\n );\n};\n"],"names":["theme","~~useState~~","~~usePopper~~","useMemo","generateId","useUpdateAriaAnchor","useHandleFocus","~~useEffect","ResizeObserver","~~React","Portal","popoverStyles","assignCssVars","buildClassnames"],"mappings":"~~;;;;;;;;;;;;;;;;;;;MAYa~~,OAAO,GAAG,CAAC,EACtB,EAAE,EAAE,QAAQ,EACZ,QAAQ,EACR,MAAM,GAAGA,WAAK,CAAC,MAAM,CAAC,KAAK,EAC3B,SAAS,GAAG,QAAQ,EACpB,aAAa,EACb,cAAc,EACd,aAAa,EACb,KAAK,EACL,gBAAgB,EAChB,cAAc,GAAG,KAAK,EACtB,cAAc,EACd,kBAAkB,EAClB,SAAS,EACT,GAAG,WAAW,EACD,KAAI;;IAEjB,MAAM,~~CAAC~~,~~aAAa~~,EAAE,~~gBAAgB~~,~~CAAC~~,~~GAAGC~~,~~cAAQ~~,~~CAA2B~~,~~IAAI~~,CAAC;~~AAClF~~,~~IAAA~~,~~MAAM~~,EAAE,~~MAAM,~~EAAE,~~UAAU~~,EAAE,~~MAAM~~,EAAE,~~GAAGC~~,~~qBAAS~~,~~CAAC~~,~~aAAa,~~EAAE,~~aAAa~~,~~EAAE~~,EAAE,~~SAAS~~,~~EAAE~~,CAAC;;~~AAG7F~~,IAAA,MAAM,EAAE,GAAGC,aAAO,CAAC,MAAM,QAAQ,IAAIC,qBAAU,CAAC,SAAS,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;;IAGvEC,uCAAmB,CAAC,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,EAAE,kBAAkB,EAAE,CAAC;IAEzE,MAAM,OAAO,GAAG,MAAK;AACnB,QAAA,aAAa,aAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,KAAK,EAAE;AACtB,QAAA,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,EAAI;AACnB,IAAA,CAAC;AAED,IAAA,MAAM,EAAE,aAAa,EAAE,GAAGC,6BAAc,CAAC;~~QACvC~~,~~aAAa;QACb~~,aAAa~~;QACb~~,~~OAAO;QACP~~,~~gBAAgB;AACjB,KAAA,CAAC;AAEF;;AAEG;IACHC,eAAS,CAAC,MAAK;AACb,QAAA,~~IAAI,CAAC,~~MAAM~~,~~IAAI,~~CAAC,~~aAAa~~;~~AAAE~~,~~YAAA,OAAO,SAAS;AAC/C,QAAA,MAAM,cAAc,GAAG,IAAIC,+BAAc,CAAC,MAAM,CAAC;AACjD,QAAA,cAAc,CAAC,OAAO,CAAC,~~aAAa~~,CAAC~~;~~AAErC~~,~~QAAA,~~OAAO~~,MAAK~~;~~YACV~~,~~cAAc,CAAC,UAAU,EAAE;AAC7B,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;AAE3B;;AAEG;IACHD,eAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,MAAM;AAAE,YAAA,OAAO,SAAS;AAC7B,QAAA,MAAM,CAAC,~~gBAAgB~~,CAAC,QAAQ,EAAE,MAAM,CAAC~~;~~AAEzC~~,~~QAAA~~,~~OAAO,MAAK;AACV,YAAA,MAAM,~~CAAC~~,mBAAmB,CAAC,QAAQ,EAAE,MAAM,CAAC~~;~~AAC9C~~,~~QAAA,CAAC;AACH,~~IAAA,~~CAAC~~,~~EAAE,CAAC,MAAM,CAAC,CAAC;AAEZ,IAAA,QACEE,~~sBAAA,CAAA,aAAA,CAACC,aAAM,EAAA,EAAC,cAAc,EAAE,cAAc,EAAA;QACnC,CAAC,cAAc,KACdD,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEE,cAAa,CAAC,QAAQ,EACjC,KAAK,EAAEC,2BAAa,CAAC,EAAE,MAAM,EAAE,CAAC,EAChC,OAAO,EAAE,OAAO,EAAA,aAAA,EACJ,kBAAkB,EAAA,CAC9B,CACH;~~QACDH~~,sBAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAA,IAAA,EACJ,EAAE,EAAE,EAAE,EAAA,kBAAA,EACW,SAAS,~~EAC1B~~,SAAS,EAAEI,+BAAe,CAAC,CAACF,cAAa,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,EAC7D,GAAG,EAAE,~~gBAAgB~~,EACrB,KAAK,EAAE;gBACL,GAAGC,2BAAa,CAAC,EAAE,MAAM,EAAE,MAAM,GAAG,CAAC,EAAE,CAAC;~~gBACxC~~,GAAG,~~MAAM,CAAC,MAAM~~;~~AAChB~~,gBAAA,GAAG,KAAK;gBACR,IAAI,cAAc,GAAG,EAAE,QAAQ,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,WAAW,EAAE,GAAG,EAAE,CAAC;~~AACpE~~,~~aAAA,~~EACD,SAAS,EAAE,aAAa,EAAA,GACpB,~~UAAU,CAAC,MAAM,EAAA,GACjB,~~WAAW,~~EAAA~~,~~EAEd,~~QAAQ,CACF,CACF;AAEb;;;;"}
1	+ {"version":3,"file":"Popover.cjs","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { useFloating, autoUpdate, flip } from '@floating-ui/react';\n\nimport { Portal } from '../Portal';\nimport { theme } from '../../theme';\nimport { buildClassnames, generateId, assignCssVars } from '../../utils';\nimport { useUpdateAriaAnchor } from './hooks/useUpdateAriaAnchor';\nimport { PopoverProps } from './types';\nimport { useHandleFocus } from './hooks/useHandleFocus';\nimport popoverStyles from './Popover.module.scss';\n\nexport const Popover = ({\n id: passedId,\n children,\n zIndex = theme.layers.popup,\n placement = 'bottom',\n anchorElement,\n rootElementRef,\n onShouldClose,\n style,\n disableFocusLock,\n removeBackdrop = false,\n useAnchorWidth,\n ignoreAriaWarnings,\n className,\n ...dialogProps\n}: PopoverProps) => {\n // Set up Floating UI positioning\n const { refs, floatingStyles, placement: resolvedPlacement } = useFloating({\n elements: { reference: anchorElement },\n placement,\n middleware: [flip()],\n whileElementsMounted: autoUpdate,\n });\n\n // Setup popover id to use passed, or generate its' own.\n const id = useMemo(() => passedId \|\| generateId('popover'), [passedId]);\n\n // Check and update aria for anchor, only works once this has rendered for the first time though.\n useUpdateAriaAnchor({ anchorElement, popoverId: id, ignoreAriaWarnings });\n\n const onClose = () => {\n anchorElement?.focus();\n onShouldClose?.();\n };\n\n const { handleKeyDown } = useHandleFocus({\n popperElement: refs.floating.current as HTMLDialogElement \| null,\n anchorElement,\n onClose,\n disableFocusLock,\n });\n\n return (\n <Portal rootElementRef={rootElementRef}>\n {!removeBackdrop && (\n <div\n className={popoverStyles.backdrop}\n style={assignCssVars({ zIndex })}\n onClick={onClose}\n data-testid=\"popover-backdrop\"\n />\n )}\n <dialog\n open\n id={id}\n data-dialog-type=\"popover\"\n data-placement={resolvedPlacement}\n className={buildClassnames([popoverStyles.dialog, className])}\n ref={refs.setFloating}\n style={{\n ...assignCssVars({ zIndex: zIndex + 1 }),\n ...floatingStyles,\n ...style,\n ...(useAnchorWidth ? { minWidth: anchorElement?.clientWidth } : {}),\n }}\n onKeyDown={handleKeyDown}\n {...dialogProps}\n >\n {children}\n </dialog>\n </Portal>\n );\n};\n"],"names":["theme","useFloating","flip","autoUpdate","useMemo","generateId","useUpdateAriaAnchor","useHandleFocus","React","Portal","popoverStyles","assignCssVars","buildClassnames"],"mappings":";;;;;;;;;;;;;;;;;MAWa,OAAO,GAAG,CAAC,EACtB,EAAE,EAAE,QAAQ,EACZ,QAAQ,EACR,MAAM,GAAGA,WAAK,CAAC,MAAM,CAAC,KAAK,EAC3B,SAAS,GAAG,QAAQ,EACpB,aAAa,EACb,cAAc,EACd,aAAa,EACb,KAAK,EACL,gBAAgB,EAChB,cAAc,GAAG,KAAK,EACtB,cAAc,EACd,kBAAkB,EAClB,SAAS,EACT,GAAG,WAAW,EACD,KAAI;;IAEjB,MAAM,EAAE,IAAI,EAAE,cAAc,EAAE,SAAS,EAAE,iBAAiB,EAAE,GAAGC,iBAAW,CAAC;AACzE,QAAA,QAAQ,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE;QACtC,SAAS;AACT,QAAA,UAAU,EAAE,CAACC,UAAI,EAAE,CAAC;AACpB,QAAA,oBAAoB,EAAEC,gBAAU;AACjC,KAAA,CAAC;;AAGF,IAAA,MAAM,EAAE,GAAGC,aAAO,CAAC,MAAM,QAAQ,IAAIC,qBAAU,CAAC,SAAS,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;;IAGvEC,uCAAmB,CAAC,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,EAAE,kBAAkB,EAAE,CAAC;IAEzE,MAAM,OAAO,GAAG,MAAK;AACnB,QAAA,aAAa,aAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,KAAK,EAAE;AACtB,QAAA,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,EAAI;AACnB,IAAA,CAAC;AAED,IAAA,MAAM,EAAE,aAAa,EAAE,GAAGC,6BAAc,CAAC;AACvC,QAAA,aAAa,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAmC;QAChE,aAAa;QACb,OAAO;QACP,gBAAgB;AACjB,KAAA,CAAC;AAEF,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,aAAM,EAAA,EAAC,cAAc,EAAE,cAAc,EAAA;QACnC,CAAC,cAAc,KACdD,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEE,cAAa,CAAC,QAAQ,EACjC,KAAK,EAAEC,2BAAa,CAAC,EAAE,MAAM,EAAE,CAAC,EAChC,OAAO,EAAE,OAAO,EAAA,aAAA,EACJ,kBAAkB,EAAA,CAC9B,CACH;AACD,QAAAH,sBAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAA,IAAA,EACJ,EAAE,EAAE,EAAE,EAAA,kBAAA,EACW,SAAS,EAAA,gBAAA,EACV,iBAAiB,EACjC,SAAS,EAAEI,+BAAe,CAAC,CAACF,cAAa,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,EAC7D,GAAG,EAAE,IAAI,CAAC,WAAW,EACrB,KAAK,EAAE;gBACL,GAAGC,2BAAa,CAAC,EAAE,MAAM,EAAE,MAAM,GAAG,CAAC,EAAE,CAAC;AACxC,gBAAA,GAAG,cAAc;AACjB,gBAAA,GAAG,KAAK;gBACR,IAAI,cAAc,GAAG,EAAE,QAAQ,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,WAAW,EAAE,GAAG,EAAE,CAAC;aACpE,EACD,SAAS,EAAE,aAAa,EAAA,GACpB,WAAW,IAEd,QAAQ,CACF,CACF;AAEb;;;;"}

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

@@ -1,6 +1,5 @@
-import React__default, { useState, useMemo, useEffect } from 'react';
-import { usePopper } from 'react-popper';
-import ResizeObserver from 'resize-observer-polyfill';
+import React__default, { useMemo } from 'react';
+import { useFloating, autoUpdate, flip } from '@floating-ui/react';
 import { Portal } from '../Portal/Portal.js';
 import { theme } from '../../theme/index.js';
 import { buildClassnames } from '../../utils/buildClassnames.js';
@@ -11,9 +10,13 @@ import { useHandleFocus } from './hooks/useHandleFocus.js';
 import popoverStyles from './Popover.module.scss.js';
 const Popover = ({ id: passedId, children, zIndex = theme.layers.popup, placement = 'bottom', anchorElement, rootElementRef, onShouldClose, style, disableFocusLock, removeBackdrop = false, useAnchorWidth, ignoreAriaWarnings, className, ...dialogProps }) => {
-    // Set up PopperJS
-    const [popperElement, setPopperElement] = useState(null);
-    const { styles, attributes, update } = usePopper(anchorElement, popperElement, { placement });
+    // Set up Floating UI positioning
+    const { refs, floatingStyles, placement: resolvedPlacement } = useFloating({
+        elements: { reference: anchorElement },
+        placement,
+        middleware: [flip()],
+        whileElementsMounted: autoUpdate,
+    });
     // Setup popover id to use passed, or generate its' own.
     const id = useMemo(() => passedId || generateId('popover'), [passedId]);
     // Check and update aria for anchor, only works once this has rendered for the first time though.
@@ -23,42 +26,19 @@ const Popover = ({ id: passedId, children, zIndex = theme.layers.popup, placemen
         onShouldClose === null || onShouldClose === void 0 ? void 0 : onShouldClose();
     };
     const { handleKeyDown } = useHandleFocus({
-        popperElement,
+        popperElement: refs.floating.current,
         anchorElement,
         onClose,
         disableFocusLock,
     });
-    /**
-     * When content size is changed, force popper update
-     */
-    useEffect(() => {
-        if (!update || !popperElement)
-            return undefined;
-        const resizeObserver = new ResizeObserver(update);
-        resizeObserver.observe(popperElement);
-        return () => {
-            resizeObserver.disconnect();
-        };
-    }, [update, popperElement]);
-    /**
-     * When window is resized, force popper update
-     */
-    useEffect(() => {
-        if (!update)
-            return undefined;
-        window.addEventListener('resize', update);
-        return () => {
-            window.removeEventListener('resize', update);
-        };
-    }, [update]);
     return (React__default.createElement(Portal, { rootElementRef: rootElementRef },
         !removeBackdrop && (React__default.createElement("div", { className: popoverStyles.backdrop, style: assignCssVars({ zIndex }), onClick: onClose, "data-testid": "popover-backdrop" })),
-        React__default.createElement("dialog", { open: true, id: id, "data-dialog-type": "popover", className: buildClassnames([popoverStyles.dialog, className]), ref: setPopperElement, style: {
+        React__default.createElement("dialog", { open: true, id: id, "data-dialog-type": "popover", "data-placement": resolvedPlacement, className: buildClassnames([popoverStyles.dialog, className]), ref: refs.setFloating, style: {
                 ...assignCssVars({ zIndex: zIndex + 1 }),
-                ...styles.popper,
+                ...floatingStyles,
                 ...style,
                 ...(useAnchorWidth ? { minWidth: anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.clientWidth } : {}),
-            }, onKeyDown: handleKeyDown, ...attributes.popper, ...dialogProps }, children)));
+            }, onKeyDown: handleKeyDown, ...dialogProps }, children)));
 };
 export { Popover };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Popover.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import React, { ~~useState, useEffect,~~ useMemo } from 'react';\nimport { ~~usePopper~~ } ~~from~~ ~~'react-popper';\nimport~~ ~~ResizeObserver~~ from '~~resize~~-~~observer-polyfill~~';\n\nimport { Portal } from '../Portal';\nimport { theme } from '../../theme';\nimport { buildClassnames, generateId, assignCssVars } from '../../utils';\nimport { useUpdateAriaAnchor } from './hooks/useUpdateAriaAnchor';\nimport { PopoverProps } from './types';\nimport { useHandleFocus } from './hooks/useHandleFocus';\nimport popoverStyles from './Popover.module.scss';\n\nexport const Popover = ({\n id: passedId,\n children,\n zIndex = theme.layers.popup,\n placement = 'bottom',\n anchorElement,\n rootElementRef,\n onShouldClose,\n style,\n disableFocusLock,\n removeBackdrop = false,\n useAnchorWidth,\n ignoreAriaWarnings,\n className,\n ...dialogProps\n}: PopoverProps) => {\n // Set up ~~PopperJS\n const~~ ~~[popperElement,~~ ~~setPopperElement] = useState<HTMLDialogElement \| null>(null);\~~n const { ~~styles~~, ~~attributes~~, ~~update~~ } = ~~usePopper~~(~~anchorElement,~~ ~~popperElement,~~ { placement });\n\n // Setup popover id to use passed, or generate its' own.\n const id = useMemo(() => passedId \|\| generateId('popover'), [passedId]);\n\n // Check and update aria for anchor, only works once this has rendered for the first time though.\n useUpdateAriaAnchor({ anchorElement, popoverId: id, ignoreAriaWarnings });\n\n const onClose = () => {\n anchorElement?.focus();\n onShouldClose?.();\n };\n\n const { handleKeyDown } = useHandleFocus({\n popperElement,\n anchorElement,\n onClose,\n disableFocusLock,\n });\n\n ~~/*\n When content size is changed, force popper update\n /\n useEffect(() => {\n if (!update \|\| !popperElement)~~ return ~~undefined;\n const resizeObserver = new ResizeObserver~~(~~update);\n resizeObserver.observe(popperElement);\n~~\n return () => {\n resizeObserver.disconnect();\n };\n }, [update, popperElement]);\n\n /\n When window is resized, force popper update\n */\n useEffect(() => {\n if (!update) return undefined;\n window.addEventListener('resize', update);\n\n return () => {\n window.removeEventListener('resize', update);\n };\n }, [update]);\n\n return (\n <Portal rootElementRef={rootElementRef}>\n {!removeBackdrop && (\n <div\n className={popoverStyles.backdrop}\n style={assignCssVars({ zIndex })}\n onClick={onClose}\n data-testid=\"popover-backdrop\"\n />\n )}\n <dialog\n open\n id={id}\n data-dialog-type=\"popover\"\n className={buildClassnames([popoverStyles.dialog, className])}\n ref={~~setPopperElement~~}\n style={{\n ...assignCssVars({ zIndex: zIndex + 1 })~~, // Dialog stacks above its backdrop\~~n ...~~styles.popper~~,\n ...style,\n ...(useAnchorWidth ? { minWidth: anchorElement?.clientWidth } : {}),\n }}\n onKeyDown={handleKeyDown}\n {...~~attributes.popper}\n {...~~dialogProps}\n >\n {children}\n </dialog>\n </Portal>\n );\n};\n"],"names":["React"],"mappings":"~~;;;;;;;;;;;;MAYa~~,OAAO,GAAG,CAAC,EACtB,EAAE,EAAE,QAAQ,EACZ,QAAQ,EACR,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,EAC3B,SAAS,GAAG,QAAQ,EACpB,aAAa,EACb,cAAc,EACd,aAAa,EACb,KAAK,EACL,gBAAgB,EAChB,cAAc,GAAG,KAAK,EACtB,cAAc,EACd,kBAAkB,EAClB,SAAS,EACT,GAAG,WAAW,EACD,KAAI;;IAEjB,MAAM,~~CAAC~~,~~aAAa~~,EAAE,~~gBAAgB~~,~~CAAC~~,~~GAAG~~,~~QAAQ~~,~~CAA2B~~,~~IAAI~~,CAAC;~~AAClF~~,~~IAAA~~,~~MAAM~~,EAAE,~~MAAM,~~EAAE,~~UAAU~~,EAAE,~~MAAM~~,EAAE,~~GAAG,~~SAAS,~~CAAC~~,~~aAAa~~,EAAE,~~aAAa~~,~~EAAE~~,EAAE,~~SAAS~~,EAAE,CAAC;;~~AAG7F~~,IAAA,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,QAAQ,IAAI,UAAU,CAAC,SAAS,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;;IAGvE,mBAAmB,CAAC,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,EAAE,kBAAkB,EAAE,CAAC;IAEzE,MAAM,OAAO,GAAG,MAAK;AACnB,QAAA,aAAa,aAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,KAAK,EAAE;AACtB,QAAA,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,EAAI;AACnB,IAAA,CAAC;AAED,IAAA,MAAM,EAAE,aAAa,EAAE,GAAG,cAAc,CAAC;~~QACvC~~,~~aAAa;QACb,aAAa;QACb,OAAO;QACP,gBAAgB;AACjB,KAAA,CAAC;AAEF;;AAEG;IACH,SAAS,CAAC,MAAK;AACb,~~QAAA,~~IAAI,CAAC,MAAM,IAAI,CAAC,~~aAAa~~;AAAE~~,~~YAAA~~,~~OAAO,SAAS;AAC/C,QAAA,MAAM,cAAc,GAAG,~~IAAI,~~cAAc,~~CAAC,~~MAAM~~,CAAC~~;AACjD~~,~~QAAA,cAAc,CAAC,OAAO,CAAC,aAAa,CAAC~~;~~AAErC~~,~~QAAA,OAAO,MAAK;YACV,cAAc,CAAC,UAAU,EAAE;AAC7B,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,MAAM,EAAE,~~aAAa~~,CAAC,CAAC~~;~~AAE3B;;AAEG;IACH~~,~~SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,MAAM;AAAE,YAAA,~~OAAO~~,SAAS~~;~~AAC7B~~,~~QAAA,MAAM,CAAC,~~gBAAgB~~,CAAC,QAAQ,EAAE,MAAM,CAAC~~;~~AAEzC~~,~~QAAA~~,~~OAAO,MAAK;AACV,YAAA,MAAM,~~CAAC~~,mBAAmB,CAAC,QAAQ,EAAE,MAAM,CAAC~~;~~AAC9C~~,~~QAAA,CAAC;AACH,~~IAAA,~~CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;AAEZ,IAAA,~~QACEA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,cAAc,EAAE,cAAc,EAAA;QACnC,CAAC,cAAc,KACdA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,aAAa,CAAC,QAAQ,EACjC,KAAK,EAAE,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC,EAChC,OAAO,EAAE,OAAO,EAAA,aAAA,EACJ,kBAAkB,EAAA,CAC9B,CACH;~~QACDA~~,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAA,IAAA,EACJ,EAAE,EAAE,EAAE,EAAA,kBAAA,EACW,SAAS,~~EAC1B~~,SAAS,EAAE,eAAe,CAAC,CAAC,aAAa,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,EAC7D,GAAG,EAAE,~~gBAAgB~~,EACrB,KAAK,EAAE;gBACL,GAAG,aAAa,CAAC,EAAE,MAAM,EAAE,MAAM,GAAG,CAAC,EAAE,CAAC;~~gBACxC~~,GAAG,~~MAAM,CAAC,MAAM~~;~~AAChB~~,gBAAA,GAAG,KAAK;gBACR,IAAI,cAAc,GAAG,EAAE,QAAQ,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,WAAW,EAAE,GAAG,EAAE,CAAC;~~AACpE~~,~~aAAA,~~EACD,SAAS,EAAE,aAAa,EAAA,GACpB,~~UAAU,CAAC,MAAM,EAAA,GACjB,~~WAAW,~~EAAA~~,~~EAEd,~~QAAQ,CACF,CACF;AAEb;;;;"}
1	+ {"version":3,"file":"Popover.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { useFloating, autoUpdate, flip } from '@floating-ui/react';\n\nimport { Portal } from '../Portal';\nimport { theme } from '../../theme';\nimport { buildClassnames, generateId, assignCssVars } from '../../utils';\nimport { useUpdateAriaAnchor } from './hooks/useUpdateAriaAnchor';\nimport { PopoverProps } from './types';\nimport { useHandleFocus } from './hooks/useHandleFocus';\nimport popoverStyles from './Popover.module.scss';\n\nexport const Popover = ({\n id: passedId,\n children,\n zIndex = theme.layers.popup,\n placement = 'bottom',\n anchorElement,\n rootElementRef,\n onShouldClose,\n style,\n disableFocusLock,\n removeBackdrop = false,\n useAnchorWidth,\n ignoreAriaWarnings,\n className,\n ...dialogProps\n}: PopoverProps) => {\n // Set up Floating UI positioning\n const { refs, floatingStyles, placement: resolvedPlacement } = useFloating({\n elements: { reference: anchorElement },\n placement,\n middleware: [flip()],\n whileElementsMounted: autoUpdate,\n });\n\n // Setup popover id to use passed, or generate its' own.\n const id = useMemo(() => passedId \|\| generateId('popover'), [passedId]);\n\n // Check and update aria for anchor, only works once this has rendered for the first time though.\n useUpdateAriaAnchor({ anchorElement, popoverId: id, ignoreAriaWarnings });\n\n const onClose = () => {\n anchorElement?.focus();\n onShouldClose?.();\n };\n\n const { handleKeyDown } = useHandleFocus({\n popperElement: refs.floating.current as HTMLDialogElement \| null,\n anchorElement,\n onClose,\n disableFocusLock,\n });\n\n return (\n <Portal rootElementRef={rootElementRef}>\n {!removeBackdrop && (\n <div\n className={popoverStyles.backdrop}\n style={assignCssVars({ zIndex })}\n onClick={onClose}\n data-testid=\"popover-backdrop\"\n />\n )}\n <dialog\n open\n id={id}\n data-dialog-type=\"popover\"\n data-placement={resolvedPlacement}\n className={buildClassnames([popoverStyles.dialog, className])}\n ref={refs.setFloating}\n style={{\n ...assignCssVars({ zIndex: zIndex + 1 }),\n ...floatingStyles,\n ...style,\n ...(useAnchorWidth ? { minWidth: anchorElement?.clientWidth } : {}),\n }}\n onKeyDown={handleKeyDown}\n {...dialogProps}\n >\n {children}\n </dialog>\n </Portal>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;MAWa,OAAO,GAAG,CAAC,EACtB,EAAE,EAAE,QAAQ,EACZ,QAAQ,EACR,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,EAC3B,SAAS,GAAG,QAAQ,EACpB,aAAa,EACb,cAAc,EACd,aAAa,EACb,KAAK,EACL,gBAAgB,EAChB,cAAc,GAAG,KAAK,EACtB,cAAc,EACd,kBAAkB,EAClB,SAAS,EACT,GAAG,WAAW,EACD,KAAI;;IAEjB,MAAM,EAAE,IAAI,EAAE,cAAc,EAAE,SAAS,EAAE,iBAAiB,EAAE,GAAG,WAAW,CAAC;AACzE,QAAA,QAAQ,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE;QACtC,SAAS;AACT,QAAA,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC;AACpB,QAAA,oBAAoB,EAAE,UAAU;AACjC,KAAA,CAAC;;AAGF,IAAA,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,QAAQ,IAAI,UAAU,CAAC,SAAS,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;;IAGvE,mBAAmB,CAAC,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,EAAE,kBAAkB,EAAE,CAAC;IAEzE,MAAM,OAAO,GAAG,MAAK;AACnB,QAAA,aAAa,aAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,KAAK,EAAE;AACtB,QAAA,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,EAAI;AACnB,IAAA,CAAC;AAED,IAAA,MAAM,EAAE,aAAa,EAAE,GAAG,cAAc,CAAC;AACvC,QAAA,aAAa,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAmC;QAChE,aAAa;QACb,OAAO;QACP,gBAAgB;AACjB,KAAA,CAAC;AAEF,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,cAAc,EAAE,cAAc,EAAA;QACnC,CAAC,cAAc,KACdA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,aAAa,CAAC,QAAQ,EACjC,KAAK,EAAE,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC,EAChC,OAAO,EAAE,OAAO,EAAA,aAAA,EACJ,kBAAkB,EAAA,CAC9B,CACH;AACD,QAAAA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAA,IAAA,EACJ,EAAE,EAAE,EAAE,EAAA,kBAAA,EACW,SAAS,EAAA,gBAAA,EACV,iBAAiB,EACjC,SAAS,EAAE,eAAe,CAAC,CAAC,aAAa,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,EAC7D,GAAG,EAAE,IAAI,CAAC,WAAW,EACrB,KAAK,EAAE;gBACL,GAAG,aAAa,CAAC,EAAE,MAAM,EAAE,MAAM,GAAG,CAAC,EAAE,CAAC;AACxC,gBAAA,GAAG,cAAc;AACjB,gBAAA,GAAG,KAAK;gBACR,IAAI,cAAc,GAAG,EAAE,QAAQ,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,WAAW,EAAE,GAAG,EAAE,CAAC;aACpE,EACD,SAAS,EAAE,aAAa,EAAA,GACpB,WAAW,IAEd,QAAQ,CACF,CACF;AAEb;;;;"}

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

@@ -1,5 +1,5 @@
 import { DialogHTMLAttributes, ReactNode } from 'react';
-import { Placement } from '@popperjs/core';
+import { Placement } from '@floating-ui/react';
 export type PopoverProps = DialogHTMLAttributes<HTMLDialogElement> & {
     children: ReactNode;
     zIndex?: number;

package/dist/components/Tooltip/Tooltip.module.scss.cjs CHANGED Viewed

@@ -2,8 +2,8 @@
 var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
-___$insertStyle("._container_soh5t_1 {\n  display: inline-block;\n}\n\n._hoverable_soh5t_5 {\n  display: inline-block;\n}\n\n._tip_soh5t_9 {\n  width: max-content;\n  pointer-events: none;\n  will-change: opacity, transform;\n}\n._tip_soh5t_9[data-popper-placement^=top-start] > ._triangle_soh5t_14 {\n  left: 8px;\n  bottom: 0;\n}\n._tip_soh5t_9[data-popper-placement^=top-end] > ._triangle_soh5t_14 {\n  right: 8px;\n  bottom: 0;\n}\n._tip_soh5t_9[data-popper-placement^=bottom-start] > ._triangle_soh5t_14 {\n  left: 8px;\n  top: -4px;\n}\n._tip_soh5t_9[data-popper-placement^=bottom-end] > ._triangle_soh5t_14 {\n  right: 8px;\n  top: -4px;\n}\n\n._wrap_soh5t_31 {\n  display: inline-block;\n  padding: var(--sizes-base) var(--sizes-5);\n  overflow: hidden;\n  z-index: 10;\n  min-width: var(--tip-min-width);\n  max-width: var(--tip-max-width);\n  color: #fff;\n  border-radius: var(--sizes-sm);\n  box-shadow: var(--shadows-base);\n  background: var(--colors-neutral-ink-dark);\n}\n\n._triangle_soh5t_14 {\n  background-color: var(--colors-neutral-ink-dark);\n  height: 16px;\n  width: 16px;\n  position: absolute;\n  transform: rotate(45deg);\n  z-index: var(--layers-tooltip);\n}");
-var tooltipStyles = {"container":"_container_soh5t_1","hoverable":"_hoverable_soh5t_5","tip":"_tip_soh5t_9","triangle":"_triangle_soh5t_14","wrap":"_wrap_soh5t_31"};
+___$insertStyle("._container_1jkfb_1 {\n  display: inline-block;\n}\n\n._hoverable_1jkfb_5 {\n  display: inline-block;\n}\n\n._tip_1jkfb_9 {\n  width: max-content;\n  pointer-events: none;\n  will-change: opacity, transform;\n  z-index: var(--layers-tooltip);\n}\n._tip_1jkfb_9[data-placement^=top-start] > ._triangle_1jkfb_15 {\n  left: 8px;\n  bottom: 0;\n}\n._tip_1jkfb_9[data-placement^=top-end] > ._triangle_1jkfb_15 {\n  right: 8px;\n  bottom: 0;\n}\n._tip_1jkfb_9[data-placement^=bottom-start] > ._triangle_1jkfb_15 {\n  left: 8px;\n  top: -4px;\n}\n._tip_1jkfb_9[data-placement^=bottom-end] > ._triangle_1jkfb_15 {\n  right: 8px;\n  top: -4px;\n}\n\n._wrap_1jkfb_32 {\n  display: inline-block;\n  padding: var(--sizes-base) var(--sizes-5);\n  overflow: hidden;\n  z-index: 10;\n  min-width: var(--tip-min-width);\n  max-width: var(--tip-max-width);\n  color: #fff;\n  border-radius: var(--sizes-sm);\n  box-shadow: var(--shadows-base);\n  background: var(--colors-neutral-ink-dark);\n}\n\n._triangle_1jkfb_15 {\n  background-color: var(--colors-neutral-ink-dark);\n  height: 16px;\n  width: 16px;\n  position: absolute;\n  transform: rotate(45deg);\n  z-index: var(--layers-tooltip);\n}");
+var tooltipStyles = {"container":"_container_1jkfb_1","hoverable":"_hoverable_1jkfb_5","tip":"_tip_1jkfb_9","triangle":"_triangle_1jkfb_15","wrap":"_wrap_1jkfb_32"};
 module.exports = tooltipStyles;
 //# sourceMappingURL=Tooltip.module.scss.cjs.map

package/dist/components/Tooltip/Tooltip.module.scss.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tooltip.module.scss.cjs","sources":["../../../src/components/Tooltip/Tooltip.module.scss"],"sourcesContent":[".container {\n display: inline-block;\n}\n\n.hoverable {\n display: inline-block;\n}\n\n.tip {\n width: max-content;\n pointer-events: none;\n will-change: opacity, transform;\n\n &[data-~~popper-~~placement^='top-start'] > .triangle {\n left: 8px;\n bottom: 0;\n }\n\n &[data-~~popper-~~placement^='top-end'] > .triangle {\n right: 8px;\n bottom: 0;\n }\n\n &[data-~~popper-~~placement^='bottom-start'] > .triangle {\n left: 8px;\n top: -4px;\n }\n\n &[data-~~popper-~~placement^='bottom-end'] > .triangle {\n right: 8px;\n top: -4px;\n }\n}\n\n.wrap {\n display: inline-block;\n padding: var(--sizes-base) var(--sizes-5);\n overflow: hidden;\n z-index: 10;\n min-width: var(--tip-min-width);\n max-width: var(--tip-max-width);\n color: #fff;\n border-radius: var(--sizes-sm);\n box-shadow: var(--shadows-base);\n background: var(--colors-neutral-ink-dark);\n}\n\n.triangle {\n background-color: var(--colors-neutral-ink-dark);\n height: 16px;\n width: 16px;\n position: absolute;\n transform: rotate(45deg);\n z-index: var(--layers-tooltip);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,~~opCAAA~~;;;;;"}
1	+ {"version":3,"file":"Tooltip.module.scss.cjs","sources":["../../../src/components/Tooltip/Tooltip.module.scss"],"sourcesContent":[".container {\n display: inline-block;\n}\n\n.hoverable {\n display: inline-block;\n}\n\n.tip {\n width: max-content;\n pointer-events: none;\n will-change: opacity, transform;\n z-index: var(--layers-tooltip);\n\n &[data-placement^='top-start'] > .triangle {\n left: 8px;\n bottom: 0;\n }\n\n &[data-placement^='top-end'] > .triangle {\n right: 8px;\n bottom: 0;\n }\n\n &[data-placement^='bottom-start'] > .triangle {\n left: 8px;\n top: -4px;\n }\n\n &[data-placement^='bottom-end'] > .triangle {\n right: 8px;\n top: -4px;\n }\n}\n\n.wrap {\n display: inline-block;\n padding: var(--sizes-base) var(--sizes-5);\n overflow: hidden;\n z-index: 10;\n min-width: var(--tip-min-width);\n max-width: var(--tip-max-width);\n color: #fff;\n border-radius: var(--sizes-sm);\n box-shadow: var(--shadows-base);\n background: var(--colors-neutral-ink-dark);\n}\n\n.triangle {\n background-color: var(--colors-neutral-ink-dark);\n height: 16px;\n width: 16px;\n position: absolute;\n transform: rotate(45deg);\n z-index: var(--layers-tooltip);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,2pCAAA;;;;;"}

package/dist/components/Tooltip/Tooltip.module.scss.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import insertStyle from '../../_virtual/____insertStyle.js';
-insertStyle("._container_soh5t_1 {\n  display: inline-block;\n}\n\n._hoverable_soh5t_5 {\n  display: inline-block;\n}\n\n._tip_soh5t_9 {\n  width: max-content;\n  pointer-events: none;\n  will-change: opacity, transform;\n}\n._tip_soh5t_9[data-popper-placement^=top-start] > ._triangle_soh5t_14 {\n  left: 8px;\n  bottom: 0;\n}\n._tip_soh5t_9[data-popper-placement^=top-end] > ._triangle_soh5t_14 {\n  right: 8px;\n  bottom: 0;\n}\n._tip_soh5t_9[data-popper-placement^=bottom-start] > ._triangle_soh5t_14 {\n  left: 8px;\n  top: -4px;\n}\n._tip_soh5t_9[data-popper-placement^=bottom-end] > ._triangle_soh5t_14 {\n  right: 8px;\n  top: -4px;\n}\n\n._wrap_soh5t_31 {\n  display: inline-block;\n  padding: var(--sizes-base) var(--sizes-5);\n  overflow: hidden;\n  z-index: 10;\n  min-width: var(--tip-min-width);\n  max-width: var(--tip-max-width);\n  color: #fff;\n  border-radius: var(--sizes-sm);\n  box-shadow: var(--shadows-base);\n  background: var(--colors-neutral-ink-dark);\n}\n\n._triangle_soh5t_14 {\n  background-color: var(--colors-neutral-ink-dark);\n  height: 16px;\n  width: 16px;\n  position: absolute;\n  transform: rotate(45deg);\n  z-index: var(--layers-tooltip);\n}");
-var tooltipStyles = {"container":"_container_soh5t_1","hoverable":"_hoverable_soh5t_5","tip":"_tip_soh5t_9","triangle":"_triangle_soh5t_14","wrap":"_wrap_soh5t_31"};
+insertStyle("._container_1jkfb_1 {\n  display: inline-block;\n}\n\n._hoverable_1jkfb_5 {\n  display: inline-block;\n}\n\n._tip_1jkfb_9 {\n  width: max-content;\n  pointer-events: none;\n  will-change: opacity, transform;\n  z-index: var(--layers-tooltip);\n}\n._tip_1jkfb_9[data-placement^=top-start] > ._triangle_1jkfb_15 {\n  left: 8px;\n  bottom: 0;\n}\n._tip_1jkfb_9[data-placement^=top-end] > ._triangle_1jkfb_15 {\n  right: 8px;\n  bottom: 0;\n}\n._tip_1jkfb_9[data-placement^=bottom-start] > ._triangle_1jkfb_15 {\n  left: 8px;\n  top: -4px;\n}\n._tip_1jkfb_9[data-placement^=bottom-end] > ._triangle_1jkfb_15 {\n  right: 8px;\n  top: -4px;\n}\n\n._wrap_1jkfb_32 {\n  display: inline-block;\n  padding: var(--sizes-base) var(--sizes-5);\n  overflow: hidden;\n  z-index: 10;\n  min-width: var(--tip-min-width);\n  max-width: var(--tip-max-width);\n  color: #fff;\n  border-radius: var(--sizes-sm);\n  box-shadow: var(--shadows-base);\n  background: var(--colors-neutral-ink-dark);\n}\n\n._triangle_1jkfb_15 {\n  background-color: var(--colors-neutral-ink-dark);\n  height: 16px;\n  width: 16px;\n  position: absolute;\n  transform: rotate(45deg);\n  z-index: var(--layers-tooltip);\n}");
+var tooltipStyles = {"container":"_container_1jkfb_1","hoverable":"_hoverable_1jkfb_5","tip":"_tip_1jkfb_9","triangle":"_triangle_1jkfb_15","wrap":"_wrap_1jkfb_32"};
 export { tooltipStyles as default };
 //# sourceMappingURL=Tooltip.module.scss.js.map

package/dist/components/Tooltip/Tooltip.module.scss.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tooltip.module.scss.js","sources":["../../../src/components/Tooltip/Tooltip.module.scss"],"sourcesContent":[".container {\n display: inline-block;\n}\n\n.hoverable {\n display: inline-block;\n}\n\n.tip {\n width: max-content;\n pointer-events: none;\n will-change: opacity, transform;\n\n &[data-~~popper-~~placement^='top-start'] > .triangle {\n left: 8px;\n bottom: 0;\n }\n\n &[data-~~popper-~~placement^='top-end'] > .triangle {\n right: 8px;\n bottom: 0;\n }\n\n &[data-~~popper-~~placement^='bottom-start'] > .triangle {\n left: 8px;\n top: -4px;\n }\n\n &[data-~~popper-~~placement^='bottom-end'] > .triangle {\n right: 8px;\n top: -4px;\n }\n}\n\n.wrap {\n display: inline-block;\n padding: var(--sizes-base) var(--sizes-5);\n overflow: hidden;\n z-index: 10;\n min-width: var(--tip-min-width);\n max-width: var(--tip-max-width);\n color: #fff;\n border-radius: var(--sizes-sm);\n box-shadow: var(--shadows-base);\n background: var(--colors-neutral-ink-dark);\n}\n\n.triangle {\n background-color: var(--colors-neutral-ink-dark);\n height: 16px;\n width: 16px;\n position: absolute;\n transform: rotate(45deg);\n z-index: var(--layers-tooltip);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,~~opCAAA~~;;;;;"}
1	+ {"version":3,"file":"Tooltip.module.scss.js","sources":["../../../src/components/Tooltip/Tooltip.module.scss"],"sourcesContent":[".container {\n display: inline-block;\n}\n\n.hoverable {\n display: inline-block;\n}\n\n.tip {\n width: max-content;\n pointer-events: none;\n will-change: opacity, transform;\n z-index: var(--layers-tooltip);\n\n &[data-placement^='top-start'] > .triangle {\n left: 8px;\n bottom: 0;\n }\n\n &[data-placement^='top-end'] > .triangle {\n right: 8px;\n bottom: 0;\n }\n\n &[data-placement^='bottom-start'] > .triangle {\n left: 8px;\n top: -4px;\n }\n\n &[data-placement^='bottom-end'] > .triangle {\n right: 8px;\n top: -4px;\n }\n}\n\n.wrap {\n display: inline-block;\n padding: var(--sizes-base) var(--sizes-5);\n overflow: hidden;\n z-index: 10;\n min-width: var(--tip-min-width);\n max-width: var(--tip-max-width);\n color: #fff;\n border-radius: var(--sizes-sm);\n box-shadow: var(--shadows-base);\n background: var(--colors-neutral-ink-dark);\n}\n\n.triangle {\n background-color: var(--colors-neutral-ink-dark);\n height: 16px;\n width: 16px;\n position: absolute;\n transform: rotate(45deg);\n z-index: var(--layers-tooltip);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,2pCAAA;;;;;"}

package/dist/components/Tooltip/components/TooltipPopover.cjs CHANGED Viewed

@@ -2,9 +2,8 @@
 var React = require('react');
 var framerMotion = require('framer-motion');
-var reactPopper = require('react-popper');
+var react = require('@floating-ui/react');
 var types = require('../types.cjs');
-var index = require('../../../theme/index.cjs');
 var Text = require('../../Text/Text.cjs');
 var buildClassnames = require('../../../utils/buildClassnames.cjs');
 require('uid/secure');
@@ -21,25 +20,15 @@ const defaultConfig = {
     tipMaxWidth: 340,
 };
 const TooltipPopover = ({ content, text, hoverableElement, config, reversed, withTriangle, legacyClassNames, }) => {
-    const [popperElement, setPopperElement] = React.useState(null);
     const usedConfig = { ...defaultConfig, ...config };
     const { side, tipMinWidth, tipMaxWidth } = usedConfig;
-    const { styles: popperStyles, attributes } = reactPopper.usePopper(hoverableElement, popperElement, {
+    const { refs, floatingStyles, placement } = react.useFloating({
+        elements: { reference: hoverableElement },
         placement: `${side}-${reversed ? 'end' : 'start'}`,
-        modifiers: [
-            {
-                name: 'offset',
-                options: {
-                    offset: [0, 8],
-                },
-            },
-        ],
+        middleware: [react.offset(8), react.flip()],
+        whileElementsMounted: react.autoUpdate,
     });
-    const tipInlineStyles = {
-        ...popperStyles.popper,
-        zIndex: index.theme.layers.tooltip,
-    };
-    return (React__default.default.createElement(framerMotion.motion.div, { key: "tooltip-tip", className: buildClassnames.buildClassnames([Tooltip_module.tip, legacyClassNames === null || legacyClassNames === void 0 ? void 0 : legacyClassNames.tip]), ref: setPopperElement, style: tipInlineStyles, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, ...attributes.popper, role: "tooltip" },
+    return (React__default.default.createElement(framerMotion.motion.div, { key: "tooltip-tip", className: buildClassnames.buildClassnames([Tooltip_module.tip, legacyClassNames === null || legacyClassNames === void 0 ? void 0 : legacyClassNames.tip]), ref: refs.setFloating, style: floatingStyles, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, "data-placement": placement, role: "tooltip" },
         React__default.default.createElement("div", { className: buildClassnames.buildClassnames([Tooltip_module.wrap, legacyClassNames === null || legacyClassNames === void 0 ? void 0 : legacyClassNames.wrap]), style: assignCssVars.assignCssVars({ tipMinWidth: `${tipMinWidth}px`, tipMaxWidth: `${tipMaxWidth}px` }) }, content !== null && content !== void 0 ? content : (React__default.default.createElement(Text.Text, { variant: "bodySmall", style: { color: 'white' } }, text))),
         withTriangle && React__default.default.createElement("div", { id: "veeqo-components-triangle", className: buildClassnames.buildClassnames([Tooltip_module.triangle, legacyClassNames === null || legacyClassNames === void 0 ? void 0 : legacyClassNames.triangle]) })));
 };

package/dist/components/Tooltip/components/TooltipPopover.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TooltipPopover.cjs","sources":["../../../../src/components/Tooltip/components/TooltipPopover.tsx"],"sourcesContent":["import React, ~~{ useState }~~ from 'react';\nimport { motion } from 'framer-motion';\nimport { ~~usePopper~~ } from 'react~~-popper~~';\nimport { IConfig, Sides } from '../types';\nimport { ~~Placement,~~ TooltipPopoverProps } from './types';\nimport { ~~theme } from '../../../theme';\nimport {~~ Text } from '../../Text';\nimport { assignCssVars, buildClassnames } from '../../../utils';\nimport tooltipStyles from '../Tooltip.module.scss';\n\nconst defaultConfig: IConfig = {\n side: Sides.TOP,\n tipMinWidth: 60,\n tipMaxWidth: 340,\n};\n\nexport const TooltipPopover = ({\n content,\n text,\n hoverableElement,\n config,\n reversed,\n withTriangle,\n legacyClassNames,\n}: TooltipPopoverProps) => {\n const ~~[popperElement, setPopperElement] = useState<HTMLDivElement \| null>(null);\n\n const~~ usedConfig = { ...defaultConfig, ...config };\n const { side, tipMinWidth, tipMaxWidth } = usedConfig;\n\n const { ~~styles:~~ ~~popperStyles~~, ~~attributes~~ } = ~~usePopper~~(~~hoverableElement, popperElement,~~ {\n placement: `${side}-${reversed ? 'end' : 'start'}` as Placement,\n ~~modifiers~~: [~~\n {\n name: '~~offset~~',\n options: {\n offset: [0~~, 8],\n ~~},\n },\n~~ ~~],\n });\n\n const tipInlineStyles = {\n ...popperStyles.popper,\n zIndex~~: ~~theme.layers.tooltip~~,\n };\n\n return (\n <motion.div\n key=\"tooltip-tip\"\n className={buildClassnames([tooltipStyles.tip, legacyClassNames?.tip])}\n ref={~~setPopperElement~~}\n style={~~tipInlineStyles~~}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={{ duration: 0.15 }}\n {~~...attributes.popper~~}\n role=\"tooltip\"\n >\n <div\n className={buildClassnames([tooltipStyles.wrap, legacyClassNames?.wrap])}\n style={assignCssVars({ tipMinWidth: `${tipMinWidth}px`, tipMaxWidth: `${tipMaxWidth}px` })}\n >\n {content ?? (\n <Text variant=\"bodySmall\" style={{ color: 'white' }}>\n {text}\n </Text>\n )}\n </div>\n {withTriangle && <div id=\"veeqo-components-triangle\" className={buildClassnames([tooltipStyles.triangle, legacyClassNames?.triangle])} />}\n </motion.div>\n );\n};\n"],"names":["Sides","~~useState~~","~~usePopper~~","~~theme~~","React","motion","buildClassnames","tooltipStyles","assignCssVars","Text"],"mappings":"~~;;;;;;;;;;;;;;;;;AAUA~~,MAAM,aAAa,GAAY;IAC7B,IAAI,EAAEA,WAAK,CAAC,GAAG;AACf,IAAA,WAAW,EAAE,EAAE;AACf,IAAA,WAAW,EAAE,GAAG;CACjB;MAEY,cAAc,GAAG,CAAC,EAC7B,OAAO,EACP,IAAI,EACJ,gBAAgB,EAChB,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,gBAAgB,GACI,KAAI;IACxB,MAAM,~~CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAGC,cAAQ,CAAwB,IAAI,CAAC;IAE/E,MAAM,~~UAAU,GAAG,EAAE,GAAG,aAAa,EAAE,GAAG,MAAM,EAAE;IAClD,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,UAAU;~~AAErD~~,~~IAAA,~~MAAM,EAAE,~~MAAM~~,EAAE,~~YAAY~~,EAAE,~~UAAU~~,EAAE,GAAGC,~~qBAAS~~,CAAC,~~gBAAgB~~,EAAE,~~aAAa~~,EAAE;~~AACtF~~,QAAA,SAAS,EAAE,CAAA,EAAG,IAAI,CAAA,CAAA,EAAI,QAAQ,GAAG,KAAK,GAAG,OAAO,CAAA,CAAe;~~AAC~~/D,~~QAAA~~,~~SAAS,~~EAAE~~;AACT~~,~~YAAA;AACE~~,~~gBAAA~~,~~IAAI,EAAE,QAAQ;AACd,gBAAA,OAAO,EAAE;AACP,oBAAA,MAAM,EAAE,~~CAAC,CAAC,~~EAAE,~~CAAC,~~CAAC;AACf~~,~~iBAAA;AACF~~,~~aAAA;AACF~~,~~SAAA;AACF,KAAA,~~CAAC;~~AAEF~~,~~IAAA,MAAM,eAAe,GAAG;QACtB,GAAG,YAAY,CAAC,MAAM;AACtB,~~QAAA,~~MAAM~~,EAAEC,~~WAAK~~,~~CAAC~~,~~MAAM,~~CAAC~~,OAAO~~;~~KAC7B;AAED~~,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,mBAAM,CAAC,GAAG,EAAA,EACT,GAAG,EAAC,aAAa,EACjB,SAAS,EAAEC,+BAAe,CAAC,CAACC,cAAa,CAAC,GAAG,EAAE,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,MAAA,GAAA,MAAA,GAAhB,gBAAgB,CAAE,GAAG,CAAC,CAAC,EACtE,GAAG,EAAE,~~gBAAgB~~,EACrB,KAAK,EAAE,~~eAAe~~,~~EACtB~~,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EACvB,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EACvB,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EACpB,UAAU,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAA,~~GAC1B~~,~~UAAU~~,~~CAAC~~,~~MAAM~~,~~EACrB,~~IAAI,EAAC,SAAS,EAAA;AAEd,QAAAH,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEE,+BAAe,CAAC,CAACC,cAAa,CAAC,IAAI,EAAE,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,MAAA,GAAA,MAAA,GAAhB,gBAAgB,CAAE,IAAI,CAAC,CAAC,EACxE,KAAK,EAAEC,2BAAa,CAAC,EAAE,WAAW,EAAE,CAAA,EAAG,WAAW,IAAI,EAAE,WAAW,EAAE,CAAA,EAAG,WAAW,CAAA,EAAA,CAAI,EAAE,CAAC,EAAA,EAEzF,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,MAAA,GAAP,OAAO,IACNJ,qCAACK,SAAI,EAAA,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EAAA,EAChD,IAAI,CACA,CACR,CACG;QACL,YAAY,IAAIL,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,EAAE,EAAC,2BAA2B,EAAC,SAAS,EAAEE,+BAAe,CAAC,CAACC,cAAa,CAAC,QAAQ,EAAE,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,MAAA,GAAA,MAAA,GAAhB,gBAAgB,CAAE,QAAQ,CAAC,CAAC,EAAA,CAAI,CAC9H;AAEjB;;;;"}
1	+ {"version":3,"file":"TooltipPopover.cjs","sources":["../../../../src/components/Tooltip/components/TooltipPopover.tsx"],"sourcesContent":["import React from 'react';\nimport { motion } from 'framer-motion';\nimport { useFloating, offset, flip, autoUpdate, Placement } from '@floating-ui/react';\nimport { IConfig, Sides } from '../types';\nimport { TooltipPopoverProps } from './types';\nimport { Text } from '../../Text';\nimport { assignCssVars, buildClassnames } from '../../../utils';\nimport tooltipStyles from '../Tooltip.module.scss';\n\nconst defaultConfig: IConfig = {\n side: Sides.TOP,\n tipMinWidth: 60,\n tipMaxWidth: 340,\n};\n\nexport const TooltipPopover = ({\n content,\n text,\n hoverableElement,\n config,\n reversed,\n withTriangle,\n legacyClassNames,\n}: TooltipPopoverProps) => {\n const usedConfig = { ...defaultConfig, ...config };\n const { side, tipMinWidth, tipMaxWidth } = usedConfig;\n\n const { refs, floatingStyles, placement } = useFloating({\n elements: { reference: hoverableElement },\n placement: `${side}-${reversed ? 'end' : 'start'}` as Placement,\n middleware: [offset(8), flip()],\n whileElementsMounted: autoUpdate,\n });\n\n return (\n <motion.div\n key=\"tooltip-tip\"\n className={buildClassnames([tooltipStyles.tip, legacyClassNames?.tip])}\n ref={refs.setFloating}\n style={floatingStyles}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={{ duration: 0.15 }}\n data-placement={placement}\n role=\"tooltip\"\n >\n <div\n className={buildClassnames([tooltipStyles.wrap, legacyClassNames?.wrap])}\n style={assignCssVars({ tipMinWidth: `${tipMinWidth}px`, tipMaxWidth: `${tipMaxWidth}px` })}\n >\n {content ?? (\n <Text variant=\"bodySmall\" style={{ color: 'white' }}>\n {text}\n </Text>\n )}\n </div>\n {withTriangle && <div id=\"veeqo-components-triangle\" className={buildClassnames([tooltipStyles.triangle, legacyClassNames?.triangle])} />}\n </motion.div>\n );\n};\n"],"names":["Sides","useFloating","offset","flip","autoUpdate","React","motion","buildClassnames","tooltipStyles","assignCssVars","Text"],"mappings":";;;;;;;;;;;;;;;;AASA,MAAM,aAAa,GAAY;IAC7B,IAAI,EAAEA,WAAK,CAAC,GAAG;AACf,IAAA,WAAW,EAAE,EAAE;AACf,IAAA,WAAW,EAAE,GAAG;CACjB;MAEY,cAAc,GAAG,CAAC,EAC7B,OAAO,EACP,IAAI,EACJ,gBAAgB,EAChB,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,gBAAgB,GACI,KAAI;IACxB,MAAM,UAAU,GAAG,EAAE,GAAG,aAAa,EAAE,GAAG,MAAM,EAAE;IAClD,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,UAAU;IAErD,MAAM,EAAE,IAAI,EAAE,cAAc,EAAE,SAAS,EAAE,GAAGC,iBAAW,CAAC;AACtD,QAAA,QAAQ,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE;AACzC,QAAA,SAAS,EAAE,CAAA,EAAG,IAAI,CAAA,CAAA,EAAI,QAAQ,GAAG,KAAK,GAAG,OAAO,CAAA,CAAe;QAC/D,UAAU,EAAE,CAACC,YAAM,CAAC,CAAC,CAAC,EAAEC,UAAI,EAAE,CAAC;AAC/B,QAAA,oBAAoB,EAAEC,gBAAU;AACjC,KAAA,CAAC;AAEF,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,mBAAM,CAAC,GAAG,EAAA,EACT,GAAG,EAAC,aAAa,EACjB,SAAS,EAAEC,+BAAe,CAAC,CAACC,cAAa,CAAC,GAAG,EAAE,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,MAAA,GAAA,MAAA,GAAhB,gBAAgB,CAAE,GAAG,CAAC,CAAC,EACtE,GAAG,EAAE,IAAI,CAAC,WAAW,EACrB,KAAK,EAAE,cAAc,EACrB,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EACvB,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EACvB,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EACpB,UAAU,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAA,gBAAA,EACd,SAAS,EACzB,IAAI,EAAC,SAAS,EAAA;AAEd,QAAAH,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEE,+BAAe,CAAC,CAACC,cAAa,CAAC,IAAI,EAAE,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,MAAA,GAAA,MAAA,GAAhB,gBAAgB,CAAE,IAAI,CAAC,CAAC,EACxE,KAAK,EAAEC,2BAAa,CAAC,EAAE,WAAW,EAAE,CAAA,EAAG,WAAW,IAAI,EAAE,WAAW,EAAE,CAAA,EAAG,WAAW,CAAA,EAAA,CAAI,EAAE,CAAC,EAAA,EAEzF,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,MAAA,GAAP,OAAO,IACNJ,qCAACK,SAAI,EAAA,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EAAA,EAChD,IAAI,CACA,CACR,CACG;QACL,YAAY,IAAIL,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,EAAE,EAAC,2BAA2B,EAAC,SAAS,EAAEE,+BAAe,CAAC,CAACC,cAAa,CAAC,QAAQ,EAAE,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,MAAA,GAAA,MAAA,GAAhB,gBAAgB,CAAE,QAAQ,CAAC,CAAC,EAAA,CAAI,CAC9H;AAEjB;;;;"}

package/dist/components/Tooltip/components/TooltipPopover.js CHANGED Viewed

@@ -1,8 +1,7 @@
-import React__default, { useState } from 'react';
+import React__default from 'react';
 import { motion } from 'framer-motion';
-import { usePopper } from 'react-popper';
+import { useFloating, autoUpdate, offset, flip } from '@floating-ui/react';
 import { Sides } from '../types.js';
-import { theme } from '../../../theme/index.js';
 import { Text } from '../../Text/Text.js';
 import { buildClassnames } from '../../../utils/buildClassnames.js';
 import 'uid/secure';
@@ -15,25 +14,15 @@ const defaultConfig = {
     tipMaxWidth: 340,
 };
 const TooltipPopover = ({ content, text, hoverableElement, config, reversed, withTriangle, legacyClassNames, }) => {
-    const [popperElement, setPopperElement] = useState(null);
     const usedConfig = { ...defaultConfig, ...config };
     const { side, tipMinWidth, tipMaxWidth } = usedConfig;
-    const { styles: popperStyles, attributes } = usePopper(hoverableElement, popperElement, {
+    const { refs, floatingStyles, placement } = useFloating({
+        elements: { reference: hoverableElement },
         placement: `${side}-${reversed ? 'end' : 'start'}`,
-        modifiers: [
-            {
-                name: 'offset',
-                options: {
-                    offset: [0, 8],
-                },
-            },
-        ],
+        middleware: [offset(8), flip()],
+        whileElementsMounted: autoUpdate,
     });
-    const tipInlineStyles = {
-        ...popperStyles.popper,
-        zIndex: theme.layers.tooltip,
-    };
-    return (React__default.createElement(motion.div, { key: "tooltip-tip", className: buildClassnames([tooltipStyles.tip, legacyClassNames === null || legacyClassNames === void 0 ? void 0 : legacyClassNames.tip]), ref: setPopperElement, style: tipInlineStyles, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, ...attributes.popper, role: "tooltip" },
+    return (React__default.createElement(motion.div, { key: "tooltip-tip", className: buildClassnames([tooltipStyles.tip, legacyClassNames === null || legacyClassNames === void 0 ? void 0 : legacyClassNames.tip]), ref: refs.setFloating, style: floatingStyles, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, "data-placement": placement, role: "tooltip" },
         React__default.createElement("div", { className: buildClassnames([tooltipStyles.wrap, legacyClassNames === null || legacyClassNames === void 0 ? void 0 : legacyClassNames.wrap]), style: assignCssVars({ tipMinWidth: `${tipMinWidth}px`, tipMaxWidth: `${tipMaxWidth}px` }) }, content !== null && content !== void 0 ? content : (React__default.createElement(Text, { variant: "bodySmall", style: { color: 'white' } }, text))),
         withTriangle && React__default.createElement("div", { id: "veeqo-components-triangle", className: buildClassnames([tooltipStyles.triangle, legacyClassNames === null || legacyClassNames === void 0 ? void 0 : legacyClassNames.triangle]) })));
 };

package/dist/components/Tooltip/components/TooltipPopover.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TooltipPopover.js","sources":["../../../../src/components/Tooltip/components/TooltipPopover.tsx"],"sourcesContent":["import React, ~~{ useState }~~ from 'react';\nimport { motion } from 'framer-motion';\nimport { ~~usePopper~~ } from 'react~~-popper~~';\nimport { IConfig, Sides } from '../types';\nimport { ~~Placement,~~ TooltipPopoverProps } from './types';\nimport { ~~theme } from '../../../theme';\nimport {~~ Text } from '../../Text';\nimport { assignCssVars, buildClassnames } from '../../../utils';\nimport tooltipStyles from '../Tooltip.module.scss';\n\nconst defaultConfig: IConfig = {\n side: Sides.TOP,\n tipMinWidth: 60,\n tipMaxWidth: 340,\n};\n\nexport const TooltipPopover = ({\n content,\n text,\n hoverableElement,\n config,\n reversed,\n withTriangle,\n legacyClassNames,\n}: TooltipPopoverProps) => {\n const ~~[popperElement, setPopperElement] = useState<HTMLDivElement \| null>(null);\n\n const~~ usedConfig = { ...defaultConfig, ...config };\n const { side, tipMinWidth, tipMaxWidth } = usedConfig;\n\n const { ~~styles:~~ ~~popperStyles~~, ~~attributes~~ } = ~~usePopper~~(~~hoverableElement, popperElement,~~ {\n placement: `${side}-${reversed ? 'end' : 'start'}` as Placement,\n ~~modifiers~~: [~~\n {\n name: '~~offset~~',\n options: {\n offset: [0~~, 8],\n ~~},\n },\n~~ ~~],\n });\n\n const tipInlineStyles = {\n ...popperStyles.popper,\n zIndex~~: ~~theme.layers.tooltip~~,\n };\n\n return (\n <motion.div\n key=\"tooltip-tip\"\n className={buildClassnames([tooltipStyles.tip, legacyClassNames?.tip])}\n ref={~~setPopperElement~~}\n style={~~tipInlineStyles~~}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={{ duration: 0.15 }}\n {~~...attributes.popper~~}\n role=\"tooltip\"\n >\n <div\n className={buildClassnames([tooltipStyles.wrap, legacyClassNames?.wrap])}\n style={assignCssVars({ tipMinWidth: `${tipMinWidth}px`, tipMaxWidth: `${tipMaxWidth}px` })}\n >\n {content ?? (\n <Text variant=\"bodySmall\" style={{ color: 'white' }}>\n {text}\n </Text>\n )}\n </div>\n {withTriangle && <div id=\"veeqo-components-triangle\" className={buildClassnames([tooltipStyles.triangle, legacyClassNames?.triangle])} />}\n </motion.div>\n );\n};\n"],"names":["React"],"mappings":"~~;;;;;;;;;;;AAUA~~,MAAM,aAAa,GAAY;IAC7B,IAAI,EAAE,KAAK,CAAC,GAAG;AACf,IAAA,WAAW,EAAE,EAAE;AACf,IAAA,WAAW,EAAE,GAAG;CACjB;MAEY,cAAc,GAAG,CAAC,EAC7B,OAAO,EACP,IAAI,EACJ,gBAAgB,EAChB,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,gBAAgB,GACI,KAAI;IACxB,MAAM,~~CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAwB,IAAI,CAAC;IAE/E,MAAM,~~UAAU,GAAG,EAAE,GAAG,aAAa,EAAE,GAAG,MAAM,EAAE;IAClD,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,UAAU;~~AAErD~~,~~IAAA,~~MAAM,EAAE,~~MAAM~~,EAAE,~~YAAY~~,EAAE,~~UAAU~~,EAAE,GAAG,~~SAAS~~,CAAC,~~gBAAgB~~,EAAE,~~aAAa~~,EAAE;~~AACtF~~,QAAA,SAAS,EAAE,CAAA,EAAG,IAAI,CAAA,CAAA,EAAI,QAAQ,GAAG,KAAK,GAAG,OAAO,CAAA,CAAe;~~AAC~~/D,~~QAAA~~,~~SAAS,~~EAAE~~;AACT~~,~~YAAA;AACE~~,~~gBAAA,IAAI,EAAE,QAAQ;AACd,gBAAA,OAAO,EAAE;AACP,oBAAA,~~MAAM,~~EAAE~~,CAAC,CAAC,EAAE,~~CAAC~~,~~CAAC;AACf~~,~~iBAAA;AACF,aAAA;AACF,SAAA;AACF,KAAA,~~CAAC;~~AAEF~~,~~IAAA,MAAM,eAAe,GAAG;QACtB,GAAG,YAAY,CAAC,MAAM;AACtB,~~QAAA,~~MAAM~~,EAAE,~~KAAK~~,~~CAAC~~,~~MAAM,~~CAAC~~,OAAO~~;~~KAC7B;AAED~~,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,MAAM,CAAC,GAAG,EAAA,EACT,GAAG,EAAC,aAAa,EACjB,SAAS,EAAE,eAAe,CAAC,CAAC,aAAa,CAAC,GAAG,EAAE,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,MAAA,GAAA,MAAA,GAAhB,gBAAgB,CAAE,GAAG,CAAC,CAAC,EACtE,GAAG,EAAE,~~gBAAgB~~,EACrB,KAAK,EAAE,~~eAAe~~,~~EACtB~~,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EACvB,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EACvB,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EACpB,UAAU,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAA,~~GAC1B~~,~~UAAU~~,~~CAAC~~,~~MAAM~~,~~EACrB,~~IAAI,EAAC,SAAS,EAAA;AAEd,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,eAAe,CAAC,CAAC,aAAa,CAAC,IAAI,EAAE,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,MAAA,GAAA,MAAA,GAAhB,gBAAgB,CAAE,IAAI,CAAC,CAAC,EACxE,KAAK,EAAE,aAAa,CAAC,EAAE,WAAW,EAAE,CAAA,EAAG,WAAW,IAAI,EAAE,WAAW,EAAE,CAAA,EAAG,WAAW,CAAA,EAAA,CAAI,EAAE,CAAC,EAAA,EAEzF,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,MAAA,GAAP,OAAO,IACNA,6BAAC,IAAI,EAAA,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EAAA,EAChD,IAAI,CACA,CACR,CACG;QACL,YAAY,IAAIA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,EAAE,EAAC,2BAA2B,EAAC,SAAS,EAAE,eAAe,CAAC,CAAC,aAAa,CAAC,QAAQ,EAAE,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,MAAA,GAAA,MAAA,GAAhB,gBAAgB,CAAE,QAAQ,CAAC,CAAC,EAAA,CAAI,CAC9H;AAEjB;;;;"}
1	+ {"version":3,"file":"TooltipPopover.js","sources":["../../../../src/components/Tooltip/components/TooltipPopover.tsx"],"sourcesContent":["import React from 'react';\nimport { motion } from 'framer-motion';\nimport { useFloating, offset, flip, autoUpdate, Placement } from '@floating-ui/react';\nimport { IConfig, Sides } from '../types';\nimport { TooltipPopoverProps } from './types';\nimport { Text } from '../../Text';\nimport { assignCssVars, buildClassnames } from '../../../utils';\nimport tooltipStyles from '../Tooltip.module.scss';\n\nconst defaultConfig: IConfig = {\n side: Sides.TOP,\n tipMinWidth: 60,\n tipMaxWidth: 340,\n};\n\nexport const TooltipPopover = ({\n content,\n text,\n hoverableElement,\n config,\n reversed,\n withTriangle,\n legacyClassNames,\n}: TooltipPopoverProps) => {\n const usedConfig = { ...defaultConfig, ...config };\n const { side, tipMinWidth, tipMaxWidth } = usedConfig;\n\n const { refs, floatingStyles, placement } = useFloating({\n elements: { reference: hoverableElement },\n placement: `${side}-${reversed ? 'end' : 'start'}` as Placement,\n middleware: [offset(8), flip()],\n whileElementsMounted: autoUpdate,\n });\n\n return (\n <motion.div\n key=\"tooltip-tip\"\n className={buildClassnames([tooltipStyles.tip, legacyClassNames?.tip])}\n ref={refs.setFloating}\n style={floatingStyles}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={{ duration: 0.15 }}\n data-placement={placement}\n role=\"tooltip\"\n >\n <div\n className={buildClassnames([tooltipStyles.wrap, legacyClassNames?.wrap])}\n style={assignCssVars({ tipMinWidth: `${tipMinWidth}px`, tipMaxWidth: `${tipMaxWidth}px` })}\n >\n {content ?? (\n <Text variant=\"bodySmall\" style={{ color: 'white' }}>\n {text}\n </Text>\n )}\n </div>\n {withTriangle && <div id=\"veeqo-components-triangle\" className={buildClassnames([tooltipStyles.triangle, legacyClassNames?.triangle])} />}\n </motion.div>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;AASA,MAAM,aAAa,GAAY;IAC7B,IAAI,EAAE,KAAK,CAAC,GAAG;AACf,IAAA,WAAW,EAAE,EAAE;AACf,IAAA,WAAW,EAAE,GAAG;CACjB;MAEY,cAAc,GAAG,CAAC,EAC7B,OAAO,EACP,IAAI,EACJ,gBAAgB,EAChB,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,gBAAgB,GACI,KAAI;IACxB,MAAM,UAAU,GAAG,EAAE,GAAG,aAAa,EAAE,GAAG,MAAM,EAAE;IAClD,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,UAAU;IAErD,MAAM,EAAE,IAAI,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,WAAW,CAAC;AACtD,QAAA,QAAQ,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE;AACzC,QAAA,SAAS,EAAE,CAAA,EAAG,IAAI,CAAA,CAAA,EAAI,QAAQ,GAAG,KAAK,GAAG,OAAO,CAAA,CAAe;QAC/D,UAAU,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC;AAC/B,QAAA,oBAAoB,EAAE,UAAU;AACjC,KAAA,CAAC;AAEF,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,MAAM,CAAC,GAAG,EAAA,EACT,GAAG,EAAC,aAAa,EACjB,SAAS,EAAE,eAAe,CAAC,CAAC,aAAa,CAAC,GAAG,EAAE,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,MAAA,GAAA,MAAA,GAAhB,gBAAgB,CAAE,GAAG,CAAC,CAAC,EACtE,GAAG,EAAE,IAAI,CAAC,WAAW,EACrB,KAAK,EAAE,cAAc,EACrB,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EACvB,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EACvB,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EACpB,UAAU,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAA,gBAAA,EACd,SAAS,EACzB,IAAI,EAAC,SAAS,EAAA;AAEd,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,eAAe,CAAC,CAAC,aAAa,CAAC,IAAI,EAAE,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,MAAA,GAAA,MAAA,GAAhB,gBAAgB,CAAE,IAAI,CAAC,CAAC,EACxE,KAAK,EAAE,aAAa,CAAC,EAAE,WAAW,EAAE,CAAA,EAAG,WAAW,IAAI,EAAE,WAAW,EAAE,CAAA,EAAG,WAAW,CAAA,EAAA,CAAI,EAAE,CAAC,EAAA,EAEzF,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,MAAA,GAAP,OAAO,IACNA,6BAAC,IAAI,EAAA,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EAAA,EAChD,IAAI,CACA,CACR,CACG;QACL,YAAY,IAAIA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,EAAE,EAAC,2BAA2B,EAAC,SAAS,EAAE,eAAe,CAAC,CAAC,aAAa,CAAC,QAAQ,EAAE,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,MAAA,GAAA,MAAA,GAAhB,gBAAgB,CAAE,QAAQ,CAAC,CAAC,EAAA,CAAI,CAC9H;AAEjB;;;;"}

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

@@ -8,8 +8,3 @@ export type TooltipPopoverProps = {
     hoverableElement: HTMLElement | null;
     legacyClassNames?: LegacyClassNames;
 } & Pick<TooltipProps, 'config' | 'withTriangle' | 'reversed' | 'content' | 'text'>;
-export declare enum Position {
-    end = "end",
-    start = "start"
-}
-export type Placement = 'top-start' | 'bottom-start' | 'top-end' | 'bottom-end';

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@veeqo/ui",
-  "version": "15.1.2",
+  "version": "15.1.4",
   "description": "New optimised component library for Veeqo.",
   "author": "Robert Wealthall",
   "license": "ISC",
@@ -58,7 +58,7 @@
     "@figma-export/output-components-as-svg": "^6.2.2",
     "@figma-export/transform-svg-with-svgo": "^6.2.2",
     "@figma/code-connect": "^1.4.4",
-    "@popperjs/core": "^2.11.8",
+    "@floating-ui/react": "^0.27.19",
     "@rollup/plugin-commonjs": "^28.0.2",
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-typescript": "^12.1.2",
@@ -111,7 +111,6 @@
     "prettier": "^3.0.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-popper": "^2.2.5",
     "react-transition-group": "^4.3.0",
     "remark-gfm": "^4.0.1",
     "resize-observer-polyfill": "^1.5.1",
@@ -129,15 +128,14 @@
     "typescript": "^5.2.2"
   },
   "peerDependencies": {
+    "@floating-ui/react": "^0.27.19",
     "@internationalized/date": "^3.5.4",
-    "@popperjs/core": "^2.11.8",
     "@tanstack/react-table": "^8.21.2",
     "framer-motion": ">=6.5.1",
     "lodash.throttle": "^4.1.1",
     "react": "^17.0.2 || ^18.0.0 || ^19.0.0",
     "react-aria-components": "^1.2.1",
     "react-dom": "^17.0.2 || ^18.0.0 || ^19.0.0",
-    "react-popper": "^2.2.5",
     "react-transition-group": "^4.3.0",
     "resize-observer-polyfill": "^1.5.1",
     "uid": "^2.0.2"
@@ -151,10 +149,6 @@
     },
     "@figma/code-connect": {
       "typescript": "$typescript"
-    },
-    "react-popper": {
-      "react": "$react",
-      "react-dom": "$react-dom"
     }
   }
 }