@veeqo/ui 13.5.2 → 13.6.1

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

@@ -25,7 +25,7 @@ const Alert = ({ size = 'base', variant = 'default', colours: passedColours, rig
             Alert_module[`${size}-size`],
             Alerts_module[`${variant}-alert-variant`],
             className,
-        ]), flexWrap: "nowrap", ...divProps },
+        ]), style: assignCssVars.assignCssVars({ backgroundColor: passedColours === null || passedColours === undefined ? undefined : passedColours.background }), flexWrap: "nowrap", ...divProps },
         React__default.default.createElement(FlexRow.FlexRow, { alignItems: isXsSize ? 'center' : 'flex-start', flexWrap: "nowrap", className: Alert_module.iconTextContainer },
             React__default.default.createElement(FlexRow.FlexRow, { style: assignCssVars.assignCssVars({ iconColor: passedColours === null || passedColours === undefined ? undefined : passedColours.primary }), className: Alerts_module.icon, alignItems: "flex-start" }, iconSlot || React__default.default.createElement(DefaultIcon, { role: "presentation" })),
             children || (React__default.default.createElement(FlexCol.FlexCol, { gap: isXsSize ? 'xs' : 'sm' },

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.cjs","sources":["../../../../src/components/Alerts/Alert/Alert.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../../Text';\nimport { Button } from '../../Button';\nimport { CrossIcon } from '../../../icons';\nimport { IconMap } from '../constants';\nimport { AlertProps } from './types';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { assignCssVars, buildClassnames } from '../../../utils';\n\nimport alertStyles from '../Alerts.module.scss';\nimport styles from './Alert.module.scss';\n\nexport const Alert = ({\n  size = 'base',\n  variant = 'default',\n  colours: passedColours,\n  rightActions,\n  rightActionsSlot,\n  title,\n  titleSlot,\n  messageSlot,\n  message,\n  children,\n  iconSlot,\n  onClickClose,\n  className,\n  ...divProps\n}: AlertProps) => {\n  const DefaultIcon = IconMap[variant];\n\n  const isXsSize = size === 'xs';\n\n  return (\n    <FlexRow\n      justifyContent=\"space-between\"\n      className={buildClassnames([\n        styles.alertContainer,\n        styles[`${size}-size`],\n        alertStyles[`${variant}-alert-variant`],\n        className,\n      ])}\n      flexWrap=\"nowrap\"\n      {...divProps}\n    >\n      <FlexRow\n        alignItems={isXsSize ? 'center' : 'flex-start'}\n        flexWrap=\"nowrap\"\n        className={styles.iconTextContainer}\n      >\n        <FlexRow\n          style={assignCssVars({ iconColor: passedColours?.primary })}\n          className={alertStyles.icon}\n          alignItems=\"flex-start\"\n        >\n          {iconSlot || <DefaultIcon role=\"presentation\" />}\n        </FlexRow>\n\n        {children || (\n          <FlexCol gap={isXsSize ? 'xs' : 'sm'}>\n            {titleSlot || (\n              <Text variant=\"bodyBold\" style={size === 'base' ? { lineHeight: '24px' } : {}}>\n                {title}\n              </Text>\n            )}\n            {messageSlot || <Text variant=\"body\">{message}</Text>}\n          </FlexCol>\n        )}\n      </FlexRow>\n\n      <FlexRow justifyContent=\"flex-end\" flexWrap=\"nowrap\" className={styles.rightActionsContainer}>\n        {rightActionsSlot}\n\n        {rightActions && (\n          <FlexCol justifyContent=\"center\" className={styles.rightActions}>\n            {rightActions.map(({ label, ...actionProps }) => (\n              <Button key={label} type=\"button\" size=\"sm\" {...actionProps}>\n                {label}\n              </Button>\n            ))}\n          </FlexCol>\n        )}\n\n        {onClickClose && (\n          <FlexCol className={styles.closeContainer}>\n            <Button\n              variant=\"flat\"\n              iconSlot={<CrossIcon />}\n              onClick={onClickClose}\n              aria-label=\"Close\"\n              size=\"sm\"\n            />\n          </FlexCol>\n        )}\n      </FlexRow>\n    </FlexRow>\n  );\n};\n"],"names":["IconMap","React","FlexRow","buildClassnames","styles","alertStyles","assignCssVars","FlexCol","Text","Button","CrossIcon"],"mappings":"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"}
+{"version":3,"file":"Alert.cjs","sources":["../../../../src/components/Alerts/Alert/Alert.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../../Text';\nimport { Button } from '../../Button';\nimport { CrossIcon } from '../../../icons';\nimport { IconMap } from '../constants';\nimport { AlertProps } from './types';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { assignCssVars, buildClassnames } from '../../../utils';\n\nimport alertStyles from '../Alerts.module.scss';\nimport styles from './Alert.module.scss';\n\nexport const Alert = ({\n  size = 'base',\n  variant = 'default',\n  colours: passedColours,\n  rightActions,\n  rightActionsSlot,\n  title,\n  titleSlot,\n  messageSlot,\n  message,\n  children,\n  iconSlot,\n  onClickClose,\n  className,\n  ...divProps\n}: AlertProps) => {\n  const DefaultIcon = IconMap[variant];\n\n  const isXsSize = size === 'xs';\n\n  return (\n    <FlexRow\n      justifyContent=\"space-between\"\n      className={buildClassnames([\n        styles.alertContainer,\n        styles[`${size}-size`],\n        alertStyles[`${variant}-alert-variant`],\n        className,\n      ])}\n      style={assignCssVars({ backgroundColor: passedColours?.background })}\n      flexWrap=\"nowrap\"\n      {...divProps}\n    >\n      <FlexRow\n        alignItems={isXsSize ? 'center' : 'flex-start'}\n        flexWrap=\"nowrap\"\n        className={styles.iconTextContainer}\n      >\n        <FlexRow\n          style={assignCssVars({ iconColor: passedColours?.primary })}\n          className={alertStyles.icon}\n          alignItems=\"flex-start\"\n        >\n          {iconSlot || <DefaultIcon role=\"presentation\" />}\n        </FlexRow>\n\n        {children || (\n          <FlexCol gap={isXsSize ? 'xs' : 'sm'}>\n            {titleSlot || (\n              <Text variant=\"bodyBold\" style={size === 'base' ? { lineHeight: '24px' } : {}}>\n                {title}\n              </Text>\n            )}\n            {messageSlot || <Text variant=\"body\">{message}</Text>}\n          </FlexCol>\n        )}\n      </FlexRow>\n\n      <FlexRow justifyContent=\"flex-end\" flexWrap=\"nowrap\" className={styles.rightActionsContainer}>\n        {rightActionsSlot}\n\n        {rightActions && (\n          <FlexCol justifyContent=\"center\" className={styles.rightActions}>\n            {rightActions.map(({ label, ...actionProps }) => (\n              <Button key={label} type=\"button\" size=\"sm\" {...actionProps}>\n                {label}\n              </Button>\n            ))}\n          </FlexCol>\n        )}\n\n        {onClickClose && (\n          <FlexCol className={styles.closeContainer}>\n            <Button\n              variant=\"flat\"\n              iconSlot={<CrossIcon />}\n              onClick={onClickClose}\n              aria-label=\"Close\"\n              size=\"sm\"\n            />\n          </FlexCol>\n        )}\n      </FlexRow>\n    </FlexRow>\n  );\n};\n"],"names":["IconMap","React","FlexRow","buildClassnames","styles","alertStyles","assignCssVars","FlexCol","Text","Button","CrossIcon"],"mappings":"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"}

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

@@ -19,7 +19,7 @@ const Alert = ({ size = 'base', variant = 'default', colours: passedColours, rig
             styles[`${size}-size`],
             alertStyles[`${variant}-alert-variant`],
             className,
-        ]), flexWrap: "nowrap", ...divProps },
+        ]), style: assignCssVars({ backgroundColor: passedColours === null || passedColours === undefined ? undefined : passedColours.background }), flexWrap: "nowrap", ...divProps },
         React__default.createElement(FlexRow, { alignItems: isXsSize ? 'center' : 'flex-start', flexWrap: "nowrap", className: styles.iconTextContainer },
             React__default.createElement(FlexRow, { style: assignCssVars({ iconColor: passedColours === null || passedColours === undefined ? undefined : passedColours.primary }), className: alertStyles.icon, alignItems: "flex-start" }, iconSlot || React__default.createElement(DefaultIcon, { role: "presentation" })),
             children || (React__default.createElement(FlexCol, { gap: isXsSize ? 'xs' : 'sm' },

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sources":["../../../../src/components/Alerts/Alert/Alert.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../../Text';\nimport { Button } from '../../Button';\nimport { CrossIcon } from '../../../icons';\nimport { IconMap } from '../constants';\nimport { AlertProps } from './types';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { assignCssVars, buildClassnames } from '../../../utils';\n\nimport alertStyles from '../Alerts.module.scss';\nimport styles from './Alert.module.scss';\n\nexport const Alert = ({\n  size = 'base',\n  variant = 'default',\n  colours: passedColours,\n  rightActions,\n  rightActionsSlot,\n  title,\n  titleSlot,\n  messageSlot,\n  message,\n  children,\n  iconSlot,\n  onClickClose,\n  className,\n  ...divProps\n}: AlertProps) => {\n  const DefaultIcon = IconMap[variant];\n\n  const isXsSize = size === 'xs';\n\n  return (\n    <FlexRow\n      justifyContent=\"space-between\"\n      className={buildClassnames([\n        styles.alertContainer,\n        styles[`${size}-size`],\n        alertStyles[`${variant}-alert-variant`],\n        className,\n      ])}\n      flexWrap=\"nowrap\"\n      {...divProps}\n    >\n      <FlexRow\n        alignItems={isXsSize ? 'center' : 'flex-start'}\n        flexWrap=\"nowrap\"\n        className={styles.iconTextContainer}\n      >\n        <FlexRow\n          style={assignCssVars({ iconColor: passedColours?.primary })}\n          className={alertStyles.icon}\n          alignItems=\"flex-start\"\n        >\n          {iconSlot || <DefaultIcon role=\"presentation\" />}\n        </FlexRow>\n\n        {children || (\n          <FlexCol gap={isXsSize ? 'xs' : 'sm'}>\n            {titleSlot || (\n              <Text variant=\"bodyBold\" style={size === 'base' ? { lineHeight: '24px' } : {}}>\n                {title}\n              </Text>\n            )}\n            {messageSlot || <Text variant=\"body\">{message}</Text>}\n          </FlexCol>\n        )}\n      </FlexRow>\n\n      <FlexRow justifyContent=\"flex-end\" flexWrap=\"nowrap\" className={styles.rightActionsContainer}>\n        {rightActionsSlot}\n\n        {rightActions && (\n          <FlexCol justifyContent=\"center\" className={styles.rightActions}>\n            {rightActions.map(({ label, ...actionProps }) => (\n              <Button key={label} type=\"button\" size=\"sm\" {...actionProps}>\n                {label}\n              </Button>\n            ))}\n          </FlexCol>\n        )}\n\n        {onClickClose && (\n          <FlexCol className={styles.closeContainer}>\n            <Button\n              variant=\"flat\"\n              iconSlot={<CrossIcon />}\n              onClick={onClickClose}\n              aria-label=\"Close\"\n              size=\"sm\"\n            />\n          </FlexCol>\n        )}\n      </FlexRow>\n    </FlexRow>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"Alert.js","sources":["../../../../src/components/Alerts/Alert/Alert.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../../Text';\nimport { Button } from '../../Button';\nimport { CrossIcon } from '../../../icons';\nimport { IconMap } from '../constants';\nimport { AlertProps } from './types';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { assignCssVars, buildClassnames } from '../../../utils';\n\nimport alertStyles from '../Alerts.module.scss';\nimport styles from './Alert.module.scss';\n\nexport const Alert = ({\n  size = 'base',\n  variant = 'default',\n  colours: passedColours,\n  rightActions,\n  rightActionsSlot,\n  title,\n  titleSlot,\n  messageSlot,\n  message,\n  children,\n  iconSlot,\n  onClickClose,\n  className,\n  ...divProps\n}: AlertProps) => {\n  const DefaultIcon = IconMap[variant];\n\n  const isXsSize = size === 'xs';\n\n  return (\n    <FlexRow\n      justifyContent=\"space-between\"\n      className={buildClassnames([\n        styles.alertContainer,\n        styles[`${size}-size`],\n        alertStyles[`${variant}-alert-variant`],\n        className,\n      ])}\n      style={assignCssVars({ backgroundColor: passedColours?.background })}\n      flexWrap=\"nowrap\"\n      {...divProps}\n    >\n      <FlexRow\n        alignItems={isXsSize ? 'center' : 'flex-start'}\n        flexWrap=\"nowrap\"\n        className={styles.iconTextContainer}\n      >\n        <FlexRow\n          style={assignCssVars({ iconColor: passedColours?.primary })}\n          className={alertStyles.icon}\n          alignItems=\"flex-start\"\n        >\n          {iconSlot || <DefaultIcon role=\"presentation\" />}\n        </FlexRow>\n\n        {children || (\n          <FlexCol gap={isXsSize ? 'xs' : 'sm'}>\n            {titleSlot || (\n              <Text variant=\"bodyBold\" style={size === 'base' ? { lineHeight: '24px' } : {}}>\n                {title}\n              </Text>\n            )}\n            {messageSlot || <Text variant=\"body\">{message}</Text>}\n          </FlexCol>\n        )}\n      </FlexRow>\n\n      <FlexRow justifyContent=\"flex-end\" flexWrap=\"nowrap\" className={styles.rightActionsContainer}>\n        {rightActionsSlot}\n\n        {rightActions && (\n          <FlexCol justifyContent=\"center\" className={styles.rightActions}>\n            {rightActions.map(({ label, ...actionProps }) => (\n              <Button key={label} type=\"button\" size=\"sm\" {...actionProps}>\n                {label}\n              </Button>\n            ))}\n          </FlexCol>\n        )}\n\n        {onClickClose && (\n          <FlexCol className={styles.closeContainer}>\n            <Button\n              variant=\"flat\"\n              iconSlot={<CrossIcon />}\n              onClick={onClickClose}\n              aria-label=\"Close\"\n              size=\"sm\"\n            />\n          </FlexCol>\n        )}\n      </FlexRow>\n    </FlexRow>\n  );\n};\n"],"names":["React"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export declare const DateInputField: import("react").FC<import("./types").DateInputFieldProps & import("../../hoc/withLabels/withLabels").WithLabelsProps>;
+export declare const DateInputField: import("react").ForwardRefExoticComponent<(import("./types").DateInputFieldProps & import("../../hoc/withLabels/withLabels").WithLabelsProps) & import("react").RefAttributes<unknown>>;

package/dist/components/DimensionsInput/DimensionsInput.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare const DimensionsInput: React.FC<{
+export declare const DimensionsInput: React.ForwardRefExoticComponent<{
     form?: string | undefined;
     slot?: string | undefined;
     style?: React.CSSProperties | undefined;
@@ -308,4 +308,4 @@ export declare const DimensionsInput: React.FC<{
     unit?: string | undefined;
     className?: string | undefined;
     hasError?: boolean | undefined;
-} & import("../../hoc/withLabels/withLabels").WithLabelsProps>;
+} & import("../../hoc/withLabels/withLabels").WithLabelsProps & React.RefAttributes<unknown>>;

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

@@ -15,7 +15,7 @@ export declare const PaginationButton: import("styled-components").StyledCompone
     loading?: boolean | undefined;
     contentStyles?: import("react").CSSProperties | undefined;
 } & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
-export declare const PageInput: import("styled-components").StyledComponent<import("react").FC<{
+export declare const PageInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<{
     form?: string | undefined;
     slot?: string | undefined;
     style?: import("react").CSSProperties | undefined;
@@ -314,4 +314,4 @@ export declare const PageInput: import("styled-components").StyledComponent<impo
     hasError?: boolean | undefined;
     size?: "base" | "sm" | undefined;
     multiline?: boolean | undefined;
-} & import("react").RefAttributes<HTMLInputElement> & import("../../hoc/withLabels/withLabels").WithLabelsProps>, any, {}, never>;
+} & import("react").RefAttributes<HTMLInputElement> & import("../../hoc/withLabels/withLabels").WithLabelsProps, "ref"> & import("react").RefAttributes<unknown>>, any, {}, never>;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const PhoneInput: import("react").FC<{
+export declare const PhoneInput: import("react").ForwardRefExoticComponent<{
     form?: string | undefined;
     slot?: string | undefined;
     style?: import("react").CSSProperties | undefined;
@@ -305,4 +305,4 @@ export declare const PhoneInput: import("react").FC<{
     disabled?: boolean | undefined;
     error?: string | undefined;
     className?: string | undefined;
-} & import("../../hoc/withLabels/withLabels").WithLabelsProps>;
+} & import("../../hoc/withLabels/withLabels").WithLabelsProps & import("react").RefAttributes<unknown>>;

package/dist/components/PriceInput/PriceInput.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { PriceInputProps } from './types';
-export declare const PriceInput: React.FC<PriceInputProps & import("../../hoc/withLabels/withLabels").WithLabelsProps>;
+export declare const PriceInput: React.ForwardRefExoticComponent<PriceInputProps & import("../../hoc/withLabels/withLabels").WithLabelsProps & React.RefAttributes<unknown>>;

package/dist/components/Search/Search.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare const Search: React.FC<{
+export declare const Search: React.ForwardRefExoticComponent<{
     form?: string | undefined;
     slot?: string | undefined;
     style?: React.CSSProperties | undefined;
@@ -303,4 +303,4 @@ export declare const Search: React.FC<{
     fill?: string | undefined;
     onClearClick?: ((event: React.SyntheticEvent<Element, Event>) => void) | undefined;
     reversed?: boolean | undefined;
-} & import("../../hoc/withLabels/withLabels").WithLabelsProps>;
+} & import("../../hoc/withLabels/withLabels").WithLabelsProps & React.RefAttributes<unknown>>;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { Loader } from '../Loader';
-declare const Input: import("styled-components").StyledComponent<import("react").FC<{
+declare const Input: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<{
     form?: string | undefined;
     slot?: string | undefined;
     style?: import("react").CSSProperties | undefined;
@@ -299,7 +299,7 @@ declare const Input: import("styled-components").StyledComponent<import("react")
     hasError?: boolean | undefined;
     size?: "base" | "sm" | undefined;
     multiline?: boolean | undefined;
-} & import("react").RefAttributes<HTMLInputElement> & import("../../hoc/withLabels/withLabels").WithLabelsProps>, any, {}, never>;
+} & import("react").RefAttributes<HTMLInputElement> & import("../../hoc/withLabels/withLabels").WithLabelsProps, "ref"> & import("react").RefAttributes<unknown>>, any, {}, never>;
 declare const IconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const Container: import("styled-components").StyledComponent<"div", any, {
     iconPosition: 'left' | 'right';

package/dist/components/Select/Select.d.ts

@@ -15,4 +15,4 @@ export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectE
     hasError?: boolean;
     onChange?: (value: string) => void;
 }
-export declare const Select: React.FC<SelectProps & React.RefAttributes<HTMLSelectElement> & import("../../hoc/withLabels/withLabels").WithLabelsProps>;
+export declare const Select: React.ForwardRefExoticComponent<Omit<SelectProps & React.RefAttributes<HTMLSelectElement> & import("../../hoc/withLabels/withLabels").WithLabelsProps, "ref"> & React.RefAttributes<unknown>>;

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

@@ -1,3 +1,3 @@
 import React from 'react';
 import { SelectDropdownProps } from './types';
-export declare const SelectDropdown: React.FC<SelectDropdownProps & import("../../hoc/withLabels/withLabels").WithLabelsProps>;
+export declare const SelectDropdown: React.ForwardRefExoticComponent<(SelectDropdownProps & import("../../hoc/withLabels/withLabels").WithLabelsProps) & React.RefAttributes<unknown>>;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export * from './types';
-export declare const TextField: import("react").FC<{
+export declare const TextField: import("react").ForwardRefExoticComponent<Omit<{
     form?: string | undefined;
     slot?: string | undefined;
     style?: import("react").CSSProperties | undefined;
@@ -299,4 +299,4 @@ export declare const TextField: import("react").FC<{
     hasError?: boolean | undefined;
     size?: "base" | "sm" | undefined;
     multiline?: boolean | undefined;
-} & import("react").RefAttributes<HTMLInputElement> & import("../../hoc/withLabels/withLabels").WithLabelsProps>;
+} & import("react").RefAttributes<HTMLInputElement> & import("../../hoc/withLabels/withLabels").WithLabelsProps, "ref"> & import("react").RefAttributes<unknown>>;

package/dist/components/WeightInput/WeightInput.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { WeightProps } from './types';
-export declare const WeightInput: React.FC<WeightProps & import("../../hoc/withLabels/withLabels").WithLabelsProps>;
+export declare const WeightInput: React.ForwardRefExoticComponent<(WeightProps & import("../../hoc/withLabels/withLabels").WithLabelsProps) & React.RefAttributes<unknown>>;

package/dist/hoc/withLabels/withLabels.cjs

@@ -1,39 +1,41 @@
 'use strict';
 
 var React = require('react');
+var FlexRow = require('../../components/Flex/FlexRow/FlexRow.cjs');
+var useId = require('../../hooks/useId.cjs');
 var CriticalIcon = require('../../icons/design-system/components/CriticalIcon.cjs');
 var HelpIcon = require('../../icons/design-system/components/HelpIcon.cjs');
 var LockIcon = require('../../icons/design-system/components/LockIcon.cjs');
 var index = require('../../theme/index.cjs');
 var styled = require('./styled.cjs');
-var useId = require('../../hooks/useId.cjs');
-var Stack = require('../../components/Stack/Stack.cjs');
-require('../../components/Stack/types.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-function withLabels(Component) {
-    return ({ label, hint, error, disabledMessage, tooltip, tooltipContent, id, ...otherProps }) => {
+// eslint-disable-next-line @typescript-eslint/comma-dangle -- comma is required so TS knows this is a generic, not JSX
+const withLabels = (Component) => {
+    const ComponentWithLabels = React.forwardRef(({ label, hint, error, disabledMessage, tooltip, tooltipContent, id, ...otherProps }, ref) => {
         const componentId = useId.useId({ id, prefix: Component.name });
         if (!label)
-            return (React__default.default.createElement(Component, { id: componentId, hasError: !!error, disabled: !!disabledMessage, ...otherProps }));
+            return (React__default.default.createElement(Component, { ref: ref, id: componentId, hasError: !!error, disabled: !!disabledMessage, ...otherProps }));
         return (React__default.default.createElement(styled.RootStack, { spacing: "sm", alignX: "stretch" },
-            React__default.default.createElement(Stack.Stack, { direction: "horizontal", alignY: "center", spacing: "sm" },
+            React__default.default.createElement(FlexRow.FlexRow, null,
                 React__default.default.createElement(styled.Label, { id: `${componentId}-label`, htmlFor: componentId }, label),
                 (tooltip || tooltipContent) && (React__default.default.createElement(styled.BlockTooltip, { text: tooltip, content: tooltipContent },
                     React__default.default.createElement(HelpIcon.ReactComponent, { "data-testid": "tooltip-help", width: index.theme.sizes.base, height: index.theme.sizes.base, color: index.theme.colors.neutral.ink.light })))),
             hint && React__default.default.createElement(styled.Hint, { id: `${componentId}-hint` }, hint),
-            React__default.default.createElement(Component, { id: componentId, hasError: !!error, disabled: !!disabledMessage, ...otherProps }),
-            error && (React__default.default.createElement(Stack.Stack, { id: `${componentId}-error`, direction: "horizontal", alignY: "center", spacing: "xs" },
+            React__default.default.createElement(Component, { ref: ref, id: componentId, hasError: !!error, disabled: !!disabledMessage, ...otherProps }),
+            error && (React__default.default.createElement(FlexRow.FlexRow, { id: `${componentId}-error`, gap: "xs" },
                 React__default.default.createElement(CriticalIcon.ReactComponent, { width: 16, height: 16, color: index.theme.colors.secondary.red.base }),
                 React__default.default.createElement(styled.Error, null, error))),
-            disabledMessage && (React__default.default.createElement(Stack.Stack, { id: `${componentId}-disabled`, direction: "horizontal", alignY: "center", spacing: "xs" },
+            disabledMessage && (React__default.default.createElement(FlexRow.FlexRow, { id: `${componentId}-disabled`, gap: "xs" },
                 React__default.default.createElement(LockIcon.ReactComponent, { width: 16, height: 16, color: index.theme.colors.neutral.ink.light }),
                 React__default.default.createElement(styled.Disabled, null, disabledMessage)))));
-    };
-}
+    });
+    ComponentWithLabels.displayName = `withLabels(${Component.displayName || Component.name || 'Component'})`;
+    return ComponentWithLabels;
+};
 
 exports.withLabels = withLabels;
 //# sourceMappingURL=withLabels.cjs.map

package/dist/hoc/withLabels/withLabels.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"withLabels.cjs","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, FC, ReactNode } from 'react';\nimport { CriticalIcon, HelpIcon, LockIcon } from '../../icons';\nimport { theme } from '../../theme';\n\nimport { RootStack, Label, Hint, Error, BlockTooltip, Disabled } from './styled';\nimport { useId } from '../../hooks/useId';\nimport { Stack } from '../../components/Stack';\n\nexport interface WithLabelsProps {\n  id?: string;\n  label?: ReactNode;\n  hint?: ReactNode;\n  error?: ReactNode;\n  disabledMessage?: ReactNode;\n  tooltip?: string;\n  tooltipContent?: ReactNode;\n}\n\nexport function withLabels<P>(Component: ComponentType<P>): FC<P & WithLabelsProps> {\n  return ({ label, hint, error, disabledMessage, tooltip, tooltipContent, id, ...otherProps }) => {\n    const componentId = useId({ id, prefix: Component.name });\n\n    if (!label)\n      return (\n        <Component\n          id={componentId}\n          hasError={!!error}\n          disabled={!!disabledMessage}\n          {...(otherProps as P)}\n        />\n      );\n\n    return (\n      <RootStack spacing=\"sm\" alignX=\"stretch\">\n        <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"sm\">\n          <Label id={`${componentId}-label`} htmlFor={componentId}>\n            {label}\n          </Label>\n          {(tooltip || tooltipContent) && (\n            <BlockTooltip text={tooltip} content={tooltipContent}>\n              <HelpIcon\n                data-testid=\"tooltip-help\"\n                width={theme.sizes.base}\n                height={theme.sizes.base}\n                color={theme.colors.neutral.ink.light}\n              />\n            </BlockTooltip>\n          )}\n        </Stack>\n        {hint && <Hint id={`${componentId}-hint`}>{hint}</Hint>}\n        <Component\n          id={componentId}\n          hasError={!!error}\n          disabled={!!disabledMessage}\n          {...(otherProps as P)}\n        />\n        {error && (\n          <Stack id={`${componentId}-error`} direction=\"horizontal\" alignY=\"center\" spacing=\"xs\">\n            <CriticalIcon width={16} height={16} color={theme.colors.secondary.red.base} />\n            <Error>{error}</Error>\n          </Stack>\n        )}\n        {disabledMessage && (\n          <Stack id={`${componentId}-disabled`} direction=\"horizontal\" alignY=\"center\" spacing=\"xs\">\n            <LockIcon width={16} height={16} color={theme.colors.neutral.ink.light} />\n            <Disabled>{disabledMessage}</Disabled>\n          </Stack>\n        )}\n      </RootStack>\n    );\n  };\n}\n"],"names":["useId","React","RootStack","Stack","Label","BlockTooltip","HelpIcon","theme","Hint","CriticalIcon","Error","LockIcon","Disabled"],"mappings":"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"}
+{"version":3,"file":"withLabels.cjs","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, forwardRef, ReactNode } from 'react';\n\nimport { FlexRow } from '../../components/Flex/FlexRow';\nimport { useId } from '../../hooks/useId';\nimport { CriticalIcon, HelpIcon, LockIcon } from '../../icons';\nimport { theme } from '../../theme';\n\nimport { RootStack, Label, Hint, Error, BlockTooltip, Disabled } from './styled';\n\nexport interface WithLabelsProps {\n  id?: string;\n  label?: ReactNode;\n  hint?: ReactNode;\n  error?: ReactNode;\n  disabledMessage?: ReactNode;\n  tooltip?: string;\n  tooltipContent?: ReactNode;\n}\n\n// eslint-disable-next-line @typescript-eslint/comma-dangle -- comma is required so TS knows this is a generic, not JSX\nexport const withLabels = <P, R = unknown>(Component: ComponentType<P>) => {\n  const ComponentWithLabels = forwardRef<R, P & WithLabelsProps>(\n    ({ label, hint, error, disabledMessage, tooltip, tooltipContent, id, ...otherProps }, ref) => {\n      const componentId = useId({ id, prefix: Component.name });\n\n      if (!label)\n        return (\n          <Component\n            ref={ref}\n            id={componentId}\n            hasError={!!error}\n            disabled={!!disabledMessage}\n            {...(otherProps as P)}\n          />\n        );\n\n      return (\n        <RootStack spacing=\"sm\" alignX=\"stretch\">\n          <FlexRow>\n            <Label id={`${componentId}-label`} htmlFor={componentId}>\n              {label}\n            </Label>\n            {(tooltip || tooltipContent) && (\n              <BlockTooltip text={tooltip} content={tooltipContent}>\n                <HelpIcon\n                  data-testid=\"tooltip-help\"\n                  width={theme.sizes.base}\n                  height={theme.sizes.base}\n                  color={theme.colors.neutral.ink.light}\n                />\n              </BlockTooltip>\n            )}\n          </FlexRow>\n          {hint && <Hint id={`${componentId}-hint`}>{hint}</Hint>}\n          <Component\n            ref={ref}\n            id={componentId}\n            hasError={!!error}\n            disabled={!!disabledMessage}\n            {...(otherProps as P)}\n          />\n          {error && (\n            <FlexRow id={`${componentId}-error`} gap=\"xs\">\n              <CriticalIcon width={16} height={16} color={theme.colors.secondary.red.base} />\n              <Error>{error}</Error>\n            </FlexRow>\n          )}\n          {disabledMessage && (\n            <FlexRow id={`${componentId}-disabled`} gap=\"xs\">\n              <LockIcon width={16} height={16} color={theme.colors.neutral.ink.light} />\n              <Disabled>{disabledMessage}</Disabled>\n            </FlexRow>\n          )}\n        </RootStack>\n      );\n    },\n  );\n\n  ComponentWithLabels.displayName = `withLabels(${Component.displayName || Component.name || 'Component'})`;\n\n  return ComponentWithLabels;\n};\n"],"names":["forwardRef","useId","React","RootStack","FlexRow","Label","BlockTooltip","HelpIcon","theme","Hint","CriticalIcon","Error","LockIcon","Disabled"],"mappings":"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"}

package/dist/hoc/withLabels/withLabels.d.ts

@@ -1,4 +1,4 @@
-import { ComponentType, FC, ReactNode } from 'react';
+import React, { ComponentType, ReactNode } from 'react';
 export interface WithLabelsProps {
     id?: string;
     label?: ReactNode;
@@ -8,4 +8,4 @@ export interface WithLabelsProps {
     tooltip?: string;
     tooltipContent?: ReactNode;
 }
-export declare function withLabels<P>(Component: ComponentType<P>): FC<P & WithLabelsProps>;
+export declare const withLabels: <P, R = unknown>(Component: React.ComponentType<P>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P & WithLabelsProps> & React.RefAttributes<R>>;

package/dist/hoc/withLabels/withLabels.js

@@ -1,33 +1,35 @@
-import React__default from 'react';
+import React__default, { forwardRef } from 'react';
+import { FlexRow } from '../../components/Flex/FlexRow/FlexRow.js';
+import { useId } from '../../hooks/useId.js';
 import { ReactComponent as CriticalIcon } from '../../icons/design-system/components/CriticalIcon.js';
 import { ReactComponent as HelpIcon } from '../../icons/design-system/components/HelpIcon.js';
 import { ReactComponent as LockIcon } from '../../icons/design-system/components/LockIcon.js';
 import { theme } from '../../theme/index.js';
 import { RootStack, Label, BlockTooltip, Hint, Error, Disabled } from './styled.js';
-import { useId } from '../../hooks/useId.js';
-import { Stack } from '../../components/Stack/Stack.js';
-import '../../components/Stack/types.js';
 
-function withLabels(Component) {
-    return ({ label, hint, error, disabledMessage, tooltip, tooltipContent, id, ...otherProps }) => {
+// eslint-disable-next-line @typescript-eslint/comma-dangle -- comma is required so TS knows this is a generic, not JSX
+const withLabels = (Component) => {
+    const ComponentWithLabels = forwardRef(({ label, hint, error, disabledMessage, tooltip, tooltipContent, id, ...otherProps }, ref) => {
         const componentId = useId({ id, prefix: Component.name });
         if (!label)
-            return (React__default.createElement(Component, { id: componentId, hasError: !!error, disabled: !!disabledMessage, ...otherProps }));
+            return (React__default.createElement(Component, { ref: ref, id: componentId, hasError: !!error, disabled: !!disabledMessage, ...otherProps }));
         return (React__default.createElement(RootStack, { spacing: "sm", alignX: "stretch" },
-            React__default.createElement(Stack, { direction: "horizontal", alignY: "center", spacing: "sm" },
+            React__default.createElement(FlexRow, null,
                 React__default.createElement(Label, { id: `${componentId}-label`, htmlFor: componentId }, label),
                 (tooltip || tooltipContent) && (React__default.createElement(BlockTooltip, { text: tooltip, content: tooltipContent },
                     React__default.createElement(HelpIcon, { "data-testid": "tooltip-help", width: theme.sizes.base, height: theme.sizes.base, color: theme.colors.neutral.ink.light })))),
             hint && React__default.createElement(Hint, { id: `${componentId}-hint` }, hint),
-            React__default.createElement(Component, { id: componentId, hasError: !!error, disabled: !!disabledMessage, ...otherProps }),
-            error && (React__default.createElement(Stack, { id: `${componentId}-error`, direction: "horizontal", alignY: "center", spacing: "xs" },
+            React__default.createElement(Component, { ref: ref, id: componentId, hasError: !!error, disabled: !!disabledMessage, ...otherProps }),
+            error && (React__default.createElement(FlexRow, { id: `${componentId}-error`, gap: "xs" },
                 React__default.createElement(CriticalIcon, { width: 16, height: 16, color: theme.colors.secondary.red.base }),
                 React__default.createElement(Error, null, error))),
-            disabledMessage && (React__default.createElement(Stack, { id: `${componentId}-disabled`, direction: "horizontal", alignY: "center", spacing: "xs" },
+            disabledMessage && (React__default.createElement(FlexRow, { id: `${componentId}-disabled`, gap: "xs" },
                 React__default.createElement(LockIcon, { width: 16, height: 16, color: theme.colors.neutral.ink.light }),
                 React__default.createElement(Disabled, null, disabledMessage)))));
-    };
-}
+    });
+    ComponentWithLabels.displayName = `withLabels(${Component.displayName || Component.name || 'Component'})`;
+    return ComponentWithLabels;
+};
 
 export { withLabels };
 //# sourceMappingURL=withLabels.js.map

package/dist/hoc/withLabels/withLabels.js.map

@@ -1 +1 @@
-{"version":3,"file":"withLabels.js","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, FC, ReactNode } from 'react';\nimport { CriticalIcon, HelpIcon, LockIcon } from '../../icons';\nimport { theme } from '../../theme';\n\nimport { RootStack, Label, Hint, Error, BlockTooltip, Disabled } from './styled';\nimport { useId } from '../../hooks/useId';\nimport { Stack } from '../../components/Stack';\n\nexport interface WithLabelsProps {\n  id?: string;\n  label?: ReactNode;\n  hint?: ReactNode;\n  error?: ReactNode;\n  disabledMessage?: ReactNode;\n  tooltip?: string;\n  tooltipContent?: ReactNode;\n}\n\nexport function withLabels<P>(Component: ComponentType<P>): FC<P & WithLabelsProps> {\n  return ({ label, hint, error, disabledMessage, tooltip, tooltipContent, id, ...otherProps }) => {\n    const componentId = useId({ id, prefix: Component.name });\n\n    if (!label)\n      return (\n        <Component\n          id={componentId}\n          hasError={!!error}\n          disabled={!!disabledMessage}\n          {...(otherProps as P)}\n        />\n      );\n\n    return (\n      <RootStack spacing=\"sm\" alignX=\"stretch\">\n        <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"sm\">\n          <Label id={`${componentId}-label`} htmlFor={componentId}>\n            {label}\n          </Label>\n          {(tooltip || tooltipContent) && (\n            <BlockTooltip text={tooltip} content={tooltipContent}>\n              <HelpIcon\n                data-testid=\"tooltip-help\"\n                width={theme.sizes.base}\n                height={theme.sizes.base}\n                color={theme.colors.neutral.ink.light}\n              />\n            </BlockTooltip>\n          )}\n        </Stack>\n        {hint && <Hint id={`${componentId}-hint`}>{hint}</Hint>}\n        <Component\n          id={componentId}\n          hasError={!!error}\n          disabled={!!disabledMessage}\n          {...(otherProps as P)}\n        />\n        {error && (\n          <Stack id={`${componentId}-error`} direction=\"horizontal\" alignY=\"center\" spacing=\"xs\">\n            <CriticalIcon width={16} height={16} color={theme.colors.secondary.red.base} />\n            <Error>{error}</Error>\n          </Stack>\n        )}\n        {disabledMessage && (\n          <Stack id={`${componentId}-disabled`} direction=\"horizontal\" alignY=\"center\" spacing=\"xs\">\n            <LockIcon width={16} height={16} color={theme.colors.neutral.ink.light} />\n            <Disabled>{disabledMessage}</Disabled>\n          </Stack>\n        )}\n      </RootStack>\n    );\n  };\n}\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"withLabels.js","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, forwardRef, ReactNode } from 'react';\n\nimport { FlexRow } from '../../components/Flex/FlexRow';\nimport { useId } from '../../hooks/useId';\nimport { CriticalIcon, HelpIcon, LockIcon } from '../../icons';\nimport { theme } from '../../theme';\n\nimport { RootStack, Label, Hint, Error, BlockTooltip, Disabled } from './styled';\n\nexport interface WithLabelsProps {\n  id?: string;\n  label?: ReactNode;\n  hint?: ReactNode;\n  error?: ReactNode;\n  disabledMessage?: ReactNode;\n  tooltip?: string;\n  tooltipContent?: ReactNode;\n}\n\n// eslint-disable-next-line @typescript-eslint/comma-dangle -- comma is required so TS knows this is a generic, not JSX\nexport const withLabels = <P, R = unknown>(Component: ComponentType<P>) => {\n  const ComponentWithLabels = forwardRef<R, P & WithLabelsProps>(\n    ({ label, hint, error, disabledMessage, tooltip, tooltipContent, id, ...otherProps }, ref) => {\n      const componentId = useId({ id, prefix: Component.name });\n\n      if (!label)\n        return (\n          <Component\n            ref={ref}\n            id={componentId}\n            hasError={!!error}\n            disabled={!!disabledMessage}\n            {...(otherProps as P)}\n          />\n        );\n\n      return (\n        <RootStack spacing=\"sm\" alignX=\"stretch\">\n          <FlexRow>\n            <Label id={`${componentId}-label`} htmlFor={componentId}>\n              {label}\n            </Label>\n            {(tooltip || tooltipContent) && (\n              <BlockTooltip text={tooltip} content={tooltipContent}>\n                <HelpIcon\n                  data-testid=\"tooltip-help\"\n                  width={theme.sizes.base}\n                  height={theme.sizes.base}\n                  color={theme.colors.neutral.ink.light}\n                />\n              </BlockTooltip>\n            )}\n          </FlexRow>\n          {hint && <Hint id={`${componentId}-hint`}>{hint}</Hint>}\n          <Component\n            ref={ref}\n            id={componentId}\n            hasError={!!error}\n            disabled={!!disabledMessage}\n            {...(otherProps as P)}\n          />\n          {error && (\n            <FlexRow id={`${componentId}-error`} gap=\"xs\">\n              <CriticalIcon width={16} height={16} color={theme.colors.secondary.red.base} />\n              <Error>{error}</Error>\n            </FlexRow>\n          )}\n          {disabledMessage && (\n            <FlexRow id={`${componentId}-disabled`} gap=\"xs\">\n              <LockIcon width={16} height={16} color={theme.colors.neutral.ink.light} />\n              <Disabled>{disabledMessage}</Disabled>\n            </FlexRow>\n          )}\n        </RootStack>\n      );\n    },\n  );\n\n  ComponentWithLabels.displayName = `withLabels(${Component.displayName || Component.name || 'Component'})`;\n\n  return ComponentWithLabels;\n};\n"],"names":["React"],"mappings":"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"}

package/package.json

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