@veeqo/ui 13.5.2 → 13.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/DateInputField/index.d.ts +1 -1
- package/dist/components/DimensionsInput/DimensionsInput.d.ts +2 -2
- package/dist/components/Pagination/styled.d.ts +2 -2
- package/dist/components/PhoneInput/index.d.ts +2 -2
- package/dist/components/PriceInput/PriceInput.d.ts +1 -1
- package/dist/components/Search/Search.d.ts +2 -2
- package/dist/components/Search/styled.d.ts +2 -2
- package/dist/components/Select/Select.d.ts +1 -1
- package/dist/components/SelectDropdown/index.d.ts +1 -1
- package/dist/components/TextField/index.d.ts +2 -2
- package/dist/components/WeightInput/WeightInput.d.ts +1 -1
- package/dist/hoc/withLabels/withLabels.cjs +14 -12
- package/dist/hoc/withLabels/withLabels.cjs.map +1 -1
- package/dist/hoc/withLabels/withLabels.d.ts +2 -2
- package/dist/hoc/withLabels/withLabels.js +15 -13
- package/dist/hoc/withLabels/withLabels.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const DateInputField: import("react").
|
|
2
|
+
export declare const DateInputField: import("react").ForwardRefExoticComponent<(import("./types").DateInputFieldProps & import("../../hoc/withLabels/withLabels").WithLabelsProps) & import("react").RefAttributes<unknown>>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
export declare const DimensionsInput: React.
|
|
2
|
+
export declare const DimensionsInput: React.ForwardRefExoticComponent<{
|
|
3
3
|
form?: string | undefined;
|
|
4
4
|
slot?: string | undefined;
|
|
5
5
|
style?: React.CSSProperties | undefined;
|
|
@@ -308,4 +308,4 @@ export declare const DimensionsInput: React.FC<{
|
|
|
308
308
|
unit?: string | undefined;
|
|
309
309
|
className?: string | undefined;
|
|
310
310
|
hasError?: boolean | undefined;
|
|
311
|
-
} & import("../../hoc/withLabels/withLabels").WithLabelsProps
|
|
311
|
+
} & import("../../hoc/withLabels/withLabels").WithLabelsProps & React.RefAttributes<unknown>>;
|
|
@@ -15,7 +15,7 @@ export declare const PaginationButton: import("styled-components").StyledCompone
|
|
|
15
15
|
loading?: boolean | undefined;
|
|
16
16
|
contentStyles?: import("react").CSSProperties | undefined;
|
|
17
17
|
} & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
|
|
18
|
-
export declare const PageInput: import("styled-components").StyledComponent<import("react").
|
|
18
|
+
export declare const PageInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<{
|
|
19
19
|
form?: string | undefined;
|
|
20
20
|
slot?: string | undefined;
|
|
21
21
|
style?: import("react").CSSProperties | undefined;
|
|
@@ -314,4 +314,4 @@ export declare const PageInput: import("styled-components").StyledComponent<impo
|
|
|
314
314
|
hasError?: boolean | undefined;
|
|
315
315
|
size?: "base" | "sm" | undefined;
|
|
316
316
|
multiline?: boolean | undefined;
|
|
317
|
-
} & import("react").RefAttributes<HTMLInputElement> & import("../../hoc/withLabels/withLabels").WithLabelsProps
|
|
317
|
+
} & import("react").RefAttributes<HTMLInputElement> & import("../../hoc/withLabels/withLabels").WithLabelsProps, "ref"> & import("react").RefAttributes<unknown>>, any, {}, never>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const PhoneInput: import("react").
|
|
2
|
+
export declare const PhoneInput: import("react").ForwardRefExoticComponent<{
|
|
3
3
|
form?: string | undefined;
|
|
4
4
|
slot?: string | undefined;
|
|
5
5
|
style?: import("react").CSSProperties | undefined;
|
|
@@ -305,4 +305,4 @@ export declare const PhoneInput: import("react").FC<{
|
|
|
305
305
|
disabled?: boolean | undefined;
|
|
306
306
|
error?: string | undefined;
|
|
307
307
|
className?: string | undefined;
|
|
308
|
-
} & import("../../hoc/withLabels/withLabels").WithLabelsProps
|
|
308
|
+
} & import("../../hoc/withLabels/withLabels").WithLabelsProps & import("react").RefAttributes<unknown>>;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { PriceInputProps } from './types';
|
|
3
|
-
export declare const PriceInput: React.
|
|
3
|
+
export declare const PriceInput: React.ForwardRefExoticComponent<PriceInputProps & import("../../hoc/withLabels/withLabels").WithLabelsProps & React.RefAttributes<unknown>>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
export declare const Search: React.
|
|
2
|
+
export declare const Search: React.ForwardRefExoticComponent<{
|
|
3
3
|
form?: string | undefined;
|
|
4
4
|
slot?: string | undefined;
|
|
5
5
|
style?: React.CSSProperties | undefined;
|
|
@@ -303,4 +303,4 @@ export declare const Search: React.FC<{
|
|
|
303
303
|
fill?: string | undefined;
|
|
304
304
|
onClearClick?: ((event: React.SyntheticEvent<Element, Event>) => void) | undefined;
|
|
305
305
|
reversed?: boolean | undefined;
|
|
306
|
-
} & import("../../hoc/withLabels/withLabels").WithLabelsProps
|
|
306
|
+
} & import("../../hoc/withLabels/withLabels").WithLabelsProps & React.RefAttributes<unknown>>;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { Loader } from '../Loader';
|
|
3
|
-
declare const Input: import("styled-components").StyledComponent<import("react").
|
|
3
|
+
declare const Input: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<{
|
|
4
4
|
form?: string | undefined;
|
|
5
5
|
slot?: string | undefined;
|
|
6
6
|
style?: import("react").CSSProperties | undefined;
|
|
@@ -299,7 +299,7 @@ declare const Input: import("styled-components").StyledComponent<import("react")
|
|
|
299
299
|
hasError?: boolean | undefined;
|
|
300
300
|
size?: "base" | "sm" | undefined;
|
|
301
301
|
multiline?: boolean | undefined;
|
|
302
|
-
} & import("react").RefAttributes<HTMLInputElement> & import("../../hoc/withLabels/withLabels").WithLabelsProps
|
|
302
|
+
} & import("react").RefAttributes<HTMLInputElement> & import("../../hoc/withLabels/withLabels").WithLabelsProps, "ref"> & import("react").RefAttributes<unknown>>, any, {}, never>;
|
|
303
303
|
declare const IconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
304
304
|
declare const Container: import("styled-components").StyledComponent<"div", any, {
|
|
305
305
|
iconPosition: 'left' | 'right';
|
|
@@ -15,4 +15,4 @@ export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectE
|
|
|
15
15
|
hasError?: boolean;
|
|
16
16
|
onChange?: (value: string) => void;
|
|
17
17
|
}
|
|
18
|
-
export declare const Select: React.
|
|
18
|
+
export declare const Select: React.ForwardRefExoticComponent<Omit<SelectProps & React.RefAttributes<HTMLSelectElement> & import("../../hoc/withLabels/withLabels").WithLabelsProps, "ref"> & React.RefAttributes<unknown>>;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { SelectDropdownProps } from './types';
|
|
3
|
-
export declare const SelectDropdown: React.
|
|
3
|
+
export declare const SelectDropdown: React.ForwardRefExoticComponent<(SelectDropdownProps & import("../../hoc/withLabels/withLabels").WithLabelsProps) & React.RefAttributes<unknown>>;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export * from './types';
|
|
3
|
-
export declare const TextField: import("react").
|
|
3
|
+
export declare const TextField: import("react").ForwardRefExoticComponent<Omit<{
|
|
4
4
|
form?: string | undefined;
|
|
5
5
|
slot?: string | undefined;
|
|
6
6
|
style?: import("react").CSSProperties | undefined;
|
|
@@ -299,4 +299,4 @@ export declare const TextField: import("react").FC<{
|
|
|
299
299
|
hasError?: boolean | undefined;
|
|
300
300
|
size?: "base" | "sm" | undefined;
|
|
301
301
|
multiline?: boolean | undefined;
|
|
302
|
-
} & import("react").RefAttributes<HTMLInputElement> & import("../../hoc/withLabels/withLabels").WithLabelsProps
|
|
302
|
+
} & import("react").RefAttributes<HTMLInputElement> & import("../../hoc/withLabels/withLabels").WithLabelsProps, "ref"> & import("react").RefAttributes<unknown>>;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { WeightProps } from './types';
|
|
3
|
-
export declare const WeightInput: React.
|
|
3
|
+
export declare const WeightInput: React.ForwardRefExoticComponent<(WeightProps & import("../../hoc/withLabels/withLabels").WithLabelsProps) & React.RefAttributes<unknown>>;
|
|
@@ -1,39 +1,41 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
|
+
var FlexRow = require('../../components/Flex/FlexRow/FlexRow.cjs');
|
|
5
|
+
var useId = require('../../hooks/useId.cjs');
|
|
4
6
|
var CriticalIcon = require('../../icons/design-system/components/CriticalIcon.cjs');
|
|
5
7
|
var HelpIcon = require('../../icons/design-system/components/HelpIcon.cjs');
|
|
6
8
|
var LockIcon = require('../../icons/design-system/components/LockIcon.cjs');
|
|
7
9
|
var index = require('../../theme/index.cjs');
|
|
8
10
|
var styled = require('./styled.cjs');
|
|
9
|
-
var useId = require('../../hooks/useId.cjs');
|
|
10
|
-
var Stack = require('../../components/Stack/Stack.cjs');
|
|
11
|
-
require('../../components/Stack/types.cjs');
|
|
12
11
|
|
|
13
12
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
14
13
|
|
|
15
14
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
16
15
|
|
|
17
|
-
|
|
18
|
-
|
|
16
|
+
// eslint-disable-next-line @typescript-eslint/comma-dangle -- comma is required so TS knows this is a generic, not JSX
|
|
17
|
+
const withLabels = (Component) => {
|
|
18
|
+
const ComponentWithLabels = React.forwardRef(({ label, hint, error, disabledMessage, tooltip, tooltipContent, id, ...otherProps }, ref) => {
|
|
19
19
|
const componentId = useId.useId({ id, prefix: Component.name });
|
|
20
20
|
if (!label)
|
|
21
|
-
return (React__default.default.createElement(Component, { id: componentId, hasError: !!error, disabled: !!disabledMessage, ...otherProps }));
|
|
21
|
+
return (React__default.default.createElement(Component, { ref: ref, id: componentId, hasError: !!error, disabled: !!disabledMessage, ...otherProps }));
|
|
22
22
|
return (React__default.default.createElement(styled.RootStack, { spacing: "sm", alignX: "stretch" },
|
|
23
|
-
React__default.default.createElement(
|
|
23
|
+
React__default.default.createElement(FlexRow.FlexRow, null,
|
|
24
24
|
React__default.default.createElement(styled.Label, { id: `${componentId}-label`, htmlFor: componentId }, label),
|
|
25
25
|
(tooltip || tooltipContent) && (React__default.default.createElement(styled.BlockTooltip, { text: tooltip, content: tooltipContent },
|
|
26
26
|
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 })))),
|
|
27
27
|
hint && React__default.default.createElement(styled.Hint, { id: `${componentId}-hint` }, hint),
|
|
28
|
-
React__default.default.createElement(Component, { id: componentId, hasError: !!error, disabled: !!disabledMessage, ...otherProps }),
|
|
29
|
-
error && (React__default.default.createElement(
|
|
28
|
+
React__default.default.createElement(Component, { ref: ref, id: componentId, hasError: !!error, disabled: !!disabledMessage, ...otherProps }),
|
|
29
|
+
error && (React__default.default.createElement(FlexRow.FlexRow, { id: `${componentId}-error`, gap: "xs" },
|
|
30
30
|
React__default.default.createElement(CriticalIcon.ReactComponent, { width: 16, height: 16, color: index.theme.colors.secondary.red.base }),
|
|
31
31
|
React__default.default.createElement(styled.Error, null, error))),
|
|
32
|
-
disabledMessage && (React__default.default.createElement(
|
|
32
|
+
disabledMessage && (React__default.default.createElement(FlexRow.FlexRow, { id: `${componentId}-disabled`, gap: "xs" },
|
|
33
33
|
React__default.default.createElement(LockIcon.ReactComponent, { width: 16, height: 16, color: index.theme.colors.neutral.ink.light }),
|
|
34
34
|
React__default.default.createElement(styled.Disabled, null, disabledMessage)))));
|
|
35
|
-
};
|
|
36
|
-
}
|
|
35
|
+
});
|
|
36
|
+
ComponentWithLabels.displayName = `withLabels(${Component.displayName || Component.name || 'Component'})`;
|
|
37
|
+
return ComponentWithLabels;
|
|
38
|
+
};
|
|
37
39
|
|
|
38
40
|
exports.withLabels = withLabels;
|
|
39
41
|
//# sourceMappingURL=withLabels.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"withLabels.cjs","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType,
|
|
1
|
+
{"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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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ComponentType,
|
|
1
|
+
import React, { ComponentType, ReactNode } from 'react';
|
|
2
2
|
export interface WithLabelsProps {
|
|
3
3
|
id?: string;
|
|
4
4
|
label?: ReactNode;
|
|
@@ -8,4 +8,4 @@ export interface WithLabelsProps {
|
|
|
8
8
|
tooltip?: string;
|
|
9
9
|
tooltipContent?: ReactNode;
|
|
10
10
|
}
|
|
11
|
-
export declare
|
|
11
|
+
export declare const withLabels: <P, R = unknown>(Component: React.ComponentType<P>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P & WithLabelsProps> & React.RefAttributes<R>>;
|
|
@@ -1,33 +1,35 @@
|
|
|
1
|
-
import React__default from 'react';
|
|
1
|
+
import React__default, { forwardRef } from 'react';
|
|
2
|
+
import { FlexRow } from '../../components/Flex/FlexRow/FlexRow.js';
|
|
3
|
+
import { useId } from '../../hooks/useId.js';
|
|
2
4
|
import { ReactComponent as CriticalIcon } from '../../icons/design-system/components/CriticalIcon.js';
|
|
3
5
|
import { ReactComponent as HelpIcon } from '../../icons/design-system/components/HelpIcon.js';
|
|
4
6
|
import { ReactComponent as LockIcon } from '../../icons/design-system/components/LockIcon.js';
|
|
5
7
|
import { theme } from '../../theme/index.js';
|
|
6
8
|
import { RootStack, Label, BlockTooltip, Hint, Error, Disabled } from './styled.js';
|
|
7
|
-
import { useId } from '../../hooks/useId.js';
|
|
8
|
-
import { Stack } from '../../components/Stack/Stack.js';
|
|
9
|
-
import '../../components/Stack/types.js';
|
|
10
9
|
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
// eslint-disable-next-line @typescript-eslint/comma-dangle -- comma is required so TS knows this is a generic, not JSX
|
|
11
|
+
const withLabels = (Component) => {
|
|
12
|
+
const ComponentWithLabels = forwardRef(({ label, hint, error, disabledMessage, tooltip, tooltipContent, id, ...otherProps }, ref) => {
|
|
13
13
|
const componentId = useId({ id, prefix: Component.name });
|
|
14
14
|
if (!label)
|
|
15
|
-
return (React__default.createElement(Component, { id: componentId, hasError: !!error, disabled: !!disabledMessage, ...otherProps }));
|
|
15
|
+
return (React__default.createElement(Component, { ref: ref, id: componentId, hasError: !!error, disabled: !!disabledMessage, ...otherProps }));
|
|
16
16
|
return (React__default.createElement(RootStack, { spacing: "sm", alignX: "stretch" },
|
|
17
|
-
React__default.createElement(
|
|
17
|
+
React__default.createElement(FlexRow, null,
|
|
18
18
|
React__default.createElement(Label, { id: `${componentId}-label`, htmlFor: componentId }, label),
|
|
19
19
|
(tooltip || tooltipContent) && (React__default.createElement(BlockTooltip, { text: tooltip, content: tooltipContent },
|
|
20
20
|
React__default.createElement(HelpIcon, { "data-testid": "tooltip-help", width: theme.sizes.base, height: theme.sizes.base, color: theme.colors.neutral.ink.light })))),
|
|
21
21
|
hint && React__default.createElement(Hint, { id: `${componentId}-hint` }, hint),
|
|
22
|
-
React__default.createElement(Component, { id: componentId, hasError: !!error, disabled: !!disabledMessage, ...otherProps }),
|
|
23
|
-
error && (React__default.createElement(
|
|
22
|
+
React__default.createElement(Component, { ref: ref, id: componentId, hasError: !!error, disabled: !!disabledMessage, ...otherProps }),
|
|
23
|
+
error && (React__default.createElement(FlexRow, { id: `${componentId}-error`, gap: "xs" },
|
|
24
24
|
React__default.createElement(CriticalIcon, { width: 16, height: 16, color: theme.colors.secondary.red.base }),
|
|
25
25
|
React__default.createElement(Error, null, error))),
|
|
26
|
-
disabledMessage && (React__default.createElement(
|
|
26
|
+
disabledMessage && (React__default.createElement(FlexRow, { id: `${componentId}-disabled`, gap: "xs" },
|
|
27
27
|
React__default.createElement(LockIcon, { width: 16, height: 16, color: theme.colors.neutral.ink.light }),
|
|
28
28
|
React__default.createElement(Disabled, null, disabledMessage)))));
|
|
29
|
-
};
|
|
30
|
-
}
|
|
29
|
+
});
|
|
30
|
+
ComponentWithLabels.displayName = `withLabels(${Component.displayName || Component.name || 'Component'})`;
|
|
31
|
+
return ComponentWithLabels;
|
|
32
|
+
};
|
|
31
33
|
|
|
32
34
|
export { withLabels };
|
|
33
35
|
//# sourceMappingURL=withLabels.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"withLabels.js","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType,
|
|
1
|
+
{"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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"}
|