@dnanpm/styleguide 3.3.0 → 3.3.1

package/build/es/components/Input/Input.d.ts

@@ -1,139 +1,139 @@
-import type { ChangeEvent, FocusEvent, KeyboardEvent, MouseEvent } from 'react';
-import React from 'react';
-type InputStatus = 'none' | 'success' | 'error' | 'comment';
-type InputType = 'email' | 'hidden' | 'number' | 'password' | 'range' | 'search' | 'tel' | 'text' | 'url';
-/**
- * @deprecated Use `DateTimePicker` component
- */
-type InputTypeDeprecated = 'date' | 'month' | 'time' | 'week';
-interface Props {
-    /**
-     * Unique ID for the input element
-     */
-    id: string;
-    /**
-     * Name of the input element
-     */
-    name: string;
-    /**
-     * Type of input element
-     *
-     * @param {InputType} email Used for entering an email address and supported with browser validation
-     * @param {InputType} hidden Input element is not displayed but its value is submitted with form regardless
-     * @param {InputType} number Used for entering a number, it displays arrows and might have browser validation
-     * @param {InputType} password Used for entering value which is obscured for view
-     * @param {InputType} range Used for entering a not number by displaying a range widget
-     * @param {InputType} search Used for entering search strings
-     * @param {InputType} tel Used for entering a telephone number
-     * @param {InputType} text Single-line text field
-     * @param {InputType} url Used for entering a URL and supported with browser validation
-     *
-     * @param {InputTypeDeprecated} date DEPRECATED Use `DateTimePicker` component
-     * @param {InputTypeDeprecated} month DEPRECATED Use `DateTimePicker` component
-     * @param {InputTypeDeprecated} time DEPRECATED Use `DateTimePicker` component
-     * @param {InputTypeDeprecated} week DEPRECATED Use `DateTimePicker` component
-     *
-     * @default 'text'
-     */
-    type?: InputType | InputTypeDeprecated;
-    /**
-     * Default value of input element
-     */
-    value?: string | number;
-    /**
-     * Text to be passed down to `LabelText` component. Acts as the input element label
-     */
-    label?: string;
-    /**
-     * Text of placeholder for the input value
-     */
-    placeholder?: string;
-    /**
-     * Integer attribute indicating the sequence of keyboard navigation
-     */
-    tabIndex?: number;
-    /**
-     * On input change callback
-     */
-    onChange?: (val: string, e: ChangeEvent<HTMLInputElement>) => void;
-    /**
-     * On input blur callback
-     */
-    onBlur?: (val: string, e: ChangeEvent<HTMLInputElement>) => void;
-    /**
-     * On input focus callback
-     */
-    onFocus?: (e: FocusEvent<HTMLInputElement>) => void;
-    /**
-     * On input key press callback
-     */
-    onKeyPress?: (e: KeyboardEvent<HTMLInputElement>) => void;
-    /**
-     * On input key down callback
-     */
-    onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
-    /**
-     * On clearable button click callback
-     */
-    onClearableButtonClick?: (e: MouseEvent<HTMLElement>) => void;
-    /**
-     * Allows user to change type of input between "password" and "text"
-     * When set to true, value of type property is ignored
-     *
-     * @default false
-     */
-    showPasswordToggle?: boolean;
-    /**
-     * Allows to define space separated string to describe type of autocomplete functionality the input should provide
-     * Use "off" to disable built-in browser autocomplete functionality
-     *
-     * For possible values refer to e.g.: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
-     */
-    autocomplete?: string;
-    /**
-     * Allows to disable the component functionality
-     *
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Allows to set input as readonly
-     *
-     * @default false
-     */
-    readonly?: boolean;
-    /**
-     * Allows to set input as mandatory
-     *
-     * @default false
-     */
-    required?: boolean;
-    /**
-     * Depending on the passed status, the styling changes and additional elements are shown
-     *
-     * @param {InputStatus} none Default styling
-     * @param {InputStatus} success Displays `success` icon with `theme.color.notification.success` color in the input element
-     * @param {InputStatus} error Displays `error` icon with `theme.color.notification.error` color in the input element and error message underneath the input
-     * @param {InputStatus} comment Displays comment message underneath the input
-     */
-    status?: InputStatus;
-    /**
-     * Text of the error message when input is in error state
-     */
-    errorMessage?: string;
-    /**
-     * Text of the comment message when input is in comment state
-     */
-    commentMessage?: string;
-    /**
-     * Allows to pass a custom className
-     */
-    className?: string;
-    /**
-     * Allows to pass testid string for testing purposes
-     */
-    'data-testid'?: string;
-}
-declare const Input: ({ type, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
-/** @component */
-export default Input;
+import type { ChangeEvent, FocusEvent, KeyboardEvent, MouseEvent } from 'react';
+import React from 'react';
+type InputStatus = 'none' | 'success' | 'error' | 'comment';
+type InputType = 'email' | 'hidden' | 'number' | 'password' | 'range' | 'search' | 'tel' | 'text' | 'url';
+/**
+ * @deprecated Use `DateTimePicker` component
+ */
+type InputTypeDeprecated = 'date' | 'month' | 'time' | 'week';
+interface Props {
+    /**
+     * Unique ID for the input element
+     */
+    id: string;
+    /**
+     * Name of the input element
+     */
+    name: string;
+    /**
+     * Type of input element
+     *
+     * @param {InputType} email Used for entering an email address and supported with browser validation
+     * @param {InputType} hidden Input element is not displayed but its value is submitted with form regardless
+     * @param {InputType} number Used for entering a number, it displays arrows and might have browser validation
+     * @param {InputType} password Used for entering value which is obscured for view
+     * @param {InputType} range Used for entering a not number by displaying a range widget
+     * @param {InputType} search Used for entering search strings
+     * @param {InputType} tel Used for entering a telephone number
+     * @param {InputType} text Single-line text field
+     * @param {InputType} url Used for entering a URL and supported with browser validation
+     *
+     * @param {InputTypeDeprecated} date DEPRECATED Use `DateTimePicker` component
+     * @param {InputTypeDeprecated} month DEPRECATED Use `DateTimePicker` component
+     * @param {InputTypeDeprecated} time DEPRECATED Use `DateTimePicker` component
+     * @param {InputTypeDeprecated} week DEPRECATED Use `DateTimePicker` component
+     *
+     * @default 'text'
+     */
+    type?: InputType | InputTypeDeprecated;
+    /**
+     * Default value of input element
+     */
+    value?: string | number;
+    /**
+     * Text to be passed down to `LabelText` component. Acts as the input element label
+     */
+    label?: string;
+    /**
+     * Text of placeholder for the input value
+     */
+    placeholder?: string;
+    /**
+     * Integer attribute indicating the sequence of keyboard navigation
+     */
+    tabIndex?: number;
+    /**
+     * On input change callback
+     */
+    onChange?: (val: string, e: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * On input blur callback
+     */
+    onBlur?: (val: string, e: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * On input focus callback
+     */
+    onFocus?: (e: FocusEvent<HTMLInputElement>) => void;
+    /**
+     * On input key press callback
+     */
+    onKeyPress?: (e: KeyboardEvent<HTMLInputElement>) => void;
+    /**
+     * On input key down callback
+     */
+    onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
+    /**
+     * On clearable button click callback
+     */
+    onClearableButtonClick?: (e: MouseEvent<HTMLElement>) => void;
+    /**
+     * Allows user to change type of input between "password" and "text"
+     * When set to true, value of type property is ignored
+     *
+     * @default false
+     */
+    showPasswordToggle?: boolean;
+    /**
+     * Allows to define space separated string to describe type of autocomplete functionality the input should provide
+     * Use "off" to disable built-in browser autocomplete functionality
+     *
+     * For possible values refer to e.g.: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
+     */
+    autocomplete?: string;
+    /**
+     * Allows to disable the component functionality
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Allows to set input as readonly
+     *
+     * @default false
+     */
+    readonly?: boolean;
+    /**
+     * Allows to set input as mandatory
+     *
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Depending on the passed status, the styling changes and additional elements are shown
+     *
+     * @param {InputStatus} none Default styling
+     * @param {InputStatus} success Displays `success` icon with `theme.color.notification.success` color in the input element
+     * @param {InputStatus} error Displays `error` icon with `theme.color.notification.error` color in the input element and error message underneath the input
+     * @param {InputStatus} comment Displays comment message underneath the input
+     */
+    status?: InputStatus;
+    /**
+     * Text of the error message when input is in error state
+     */
+    errorMessage?: string;
+    /**
+     * Text of the comment message when input is in comment state
+     */
+    commentMessage?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+declare const Input: ({ type, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default Input;

package/build/es/components/Input/Input.js

@@ -8,14 +8,14 @@ import ButtonIcon from '../Button/ButtonIcon.js';
 import Icon from '../Icon/Icon.js';
 import LabelText from '../LabelText/LabelText.js';
 
-const iconsMap = {
-    success: Check,
-    error: Error,
-};
+const iconsMap = {
+    success: Check,
+    error: Error,
+};
 const FieldContainer = styled.div `
     color: ${theme.color.text.black};
     margin-bottom: ${getMultipliedSize(theme.base.baseWidth, 1)};
-`;
+`;
 const FieldWrapper = styled.div `
     position: relative;
     display: flex;
@@ -25,23 +25,23 @@ const FieldWrapper = styled.div `
     padding: 0 ${getMultipliedSize(theme.base.baseWidth, 1)};
     background-color: ${theme.color.background.white.default};
 
-    ${({ status }) => status === 'error' &&
+    ${({ status }) => status === 'error' &&
     `
         border-bottom: 4px solid ${theme.color.notification.error};
     `}
 
-    ${({ $type }) => $type === 'range' &&
+    ${({ $type }) => $type === 'range' &&
     `
         border: 0;
         background: none;
     `}
 
-    ${({ $type }) => $type === 'hidden' &&
+    ${({ $type }) => $type === 'hidden' &&
     `
         display: none;
     `} 
 
-    ${({ $disabled }) => $disabled &&
+    ${({ $disabled }) => $disabled &&
     `
         background-color: ${theme.color.background.sand.E01};
     `} 
@@ -51,7 +51,7 @@ const FieldWrapper = styled.div `
         box-shadow: 0px 0px 0px 2px ${theme.color.focus.dark};
         border-radius: ${theme.radius.s};
     }
-`;
+`;
 const IconWrapper = styled.div `
     margin-left: ${getMultipliedSize(theme.base.baseWidth, 1)};
     display: flex;
@@ -66,7 +66,7 @@ const IconWrapper = styled.div `
             margin-left: 0;
         }
     }
-`;
+`;
 const StyledInput = styled.input `
     position: relative;
     display: inline-block;
@@ -97,64 +97,64 @@ const StyledInput = styled.input `
     &::placeholder {
         color: ${theme.color.text.black}${theme.color.transparency.T40};
     }
-`;
+`;
 const Message = styled.div `
     font-size: ${theme.fontSize.s};
     font-weight: ${theme.fontWeight.book};
     line-height: ${theme.lineHeight.s};
     color: ${theme.color.text.gray};
     margin-top: ${getMultipliedSize(theme.base.baseHeight, 0.5)};
-`;
+`;
 const ErrorMessage = styled(Message) `
     font-weight: ${theme.fontWeight.medium};
     color: ${theme.color.notification.error};
-`;
-const Input = (_a) => {
-    var { type = 'text', 'data-testid': dataTestId } = _a, props = __rest(_a, ["type", 'data-testid']);
-    const inputRef = useRef(null);
-    const [showPassword, setShowPassword] = useState(false);
-    useEffect(() => {
-        if (props.showPasswordToggle && inputRef && inputRef.current) {
-            inputRef.current.type = showPassword ? 'text' : 'password';
-        }
-    }, [showPassword, props.showPasswordToggle]);
-    const togglePasswordVisibility = () => {
-        if (props.showPasswordToggle && !props.disabled) {
-            setShowPassword(!showPassword);
-        }
-    };
-    const handleOnBlur = (e) => {
-        if (props.onBlur) {
-            props.onBlur(e.target.value, e);
-        }
-    };
-    const handleChange = (e) => {
-        if (props.onChange) {
-            props.onChange(e.target.value, e);
-        }
-    };
-    const onClick = (e) => {
-        e.preventDefault();
-        if (inputRef && inputRef.current) {
-            inputRef.current.focus();
-        }
-    };
-    return (React__default.createElement(FieldContainer, { className: props.className },
-        props.label && (React__default.createElement(LabelText, { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label`, status: props.status === 'error' ? props.status : undefined, isMandatory: props.required }, props.label)),
-        React__default.createElement(FieldWrapper, { status: props.status, "$type": type, "$disabled": props.disabled },
-            React__default.createElement(StyledInput, { id: props.id, name: props.name, type: type, value: props.value, placeholder: props.placeholder, onChange: handleChange, onBlur: handleOnBlur, onFocus: props.onFocus, onClick: onClick, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, required: props.required, disabled: props.disabled, autoComplete: props.autocomplete, "aria-disabled": props.disabled, "aria-label": props.id, ref: inputRef, tabIndex: props.tabIndex, "data-testid": dataTestId, readOnly: props.readonly }),
-            ((props.status && props.status !== 'comment') ||
-                props.showPasswordToggle ||
-                props.disabled ||
-                props.onClearableButtonClick) && (React__default.createElement(IconWrapper, null,
-                props.showPasswordToggle && (React__default.createElement(Icon, { icon: showPassword ? EyeOpen : EyeClosed, onClick: togglePasswordVisibility })),
-                (props.status === 'success' || props.status === 'error') && (React__default.createElement(Icon, { icon: iconsMap[props.status], color: theme.color.notification[props.status] })),
-                props.disabled && React__default.createElement(Icon, { icon: Lock }),
-                props.onClearableButtonClick &&
-                    Boolean(props.value) &&
-                    !props.disabled && (React__default.createElement(ButtonIcon, { icon: Close, onClick: props.onClearableButtonClick }))))),
-        props.status === 'error' && props.errorMessage && (React__default.createElement(ErrorMessage, { "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage)),
-        props.status === 'comment' && props.commentMessage && (React__default.createElement(Message, { "data-testid": dataTestId && `${dataTestId}-comment` }, props.commentMessage))));
+`;
+const Input = (_a) => {
+    var { type = 'text', 'data-testid': dataTestId } = _a, props = __rest(_a, ["type", 'data-testid']);
+    const inputRef = useRef(null);
+    const [showPassword, setShowPassword] = useState(false);
+    useEffect(() => {
+        if (props.showPasswordToggle && inputRef && inputRef.current) {
+            inputRef.current.type = showPassword ? 'text' : 'password';
+        }
+    }, [showPassword, props.showPasswordToggle]);
+    const togglePasswordVisibility = () => {
+        if (props.showPasswordToggle && !props.disabled) {
+            setShowPassword(!showPassword);
+        }
+    };
+    const handleOnBlur = (e) => {
+        if (props.onBlur) {
+            props.onBlur(e.target.value, e);
+        }
+    };
+    const handleChange = (e) => {
+        if (props.onChange) {
+            props.onChange(e.target.value, e);
+        }
+    };
+    const onClick = (e) => {
+        e.preventDefault();
+        if (inputRef && inputRef.current) {
+            inputRef.current.focus();
+        }
+    };
+    return (React__default.createElement(FieldContainer, { className: props.className },
+        props.label && (React__default.createElement(LabelText, { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label`, status: props.status === 'error' ? props.status : undefined, isMandatory: props.required }, props.label)),
+        React__default.createElement(FieldWrapper, { status: props.status, "$type": type, "$disabled": props.disabled },
+            React__default.createElement(StyledInput, { id: props.id, name: props.name, type: type, value: props.value, placeholder: props.placeholder, onChange: handleChange, onBlur: handleOnBlur, onFocus: props.onFocus, onClick: onClick, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, required: props.required, disabled: props.disabled, autoComplete: props.autocomplete, "aria-disabled": props.disabled, "aria-label": props.id, ref: inputRef, tabIndex: props.tabIndex, "data-testid": dataTestId, readOnly: props.readonly }),
+            ((props.status && props.status !== 'comment') ||
+                props.showPasswordToggle ||
+                props.disabled ||
+                props.onClearableButtonClick) && (React__default.createElement(IconWrapper, null,
+                props.showPasswordToggle && (React__default.createElement(Icon, { icon: showPassword ? EyeOpen : EyeClosed, onClick: togglePasswordVisibility })),
+                (props.status === 'success' || props.status === 'error') && (React__default.createElement(Icon, { icon: iconsMap[props.status], color: theme.color.notification[props.status] })),
+                props.disabled && React__default.createElement(Icon, { icon: Lock }),
+                props.onClearableButtonClick &&
+                    Boolean(props.value) &&
+                    !props.disabled && (React__default.createElement(ButtonIcon, { icon: Close, onClick: props.onClearableButtonClick }))))),
+        props.status === 'error' && props.errorMessage && (React__default.createElement(ErrorMessage, { "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage)),
+        props.status === 'comment' && props.commentMessage && (React__default.createElement(Message, { "data-testid": dataTestId && `${dataTestId}-comment` }, props.commentMessage))));
 };
 
 export { Input as default };

package/build/es/components/Label/Label.d.ts

@@ -1,24 +1,24 @@
-import type { ReactNode } from 'react';
-import React from 'react';
-type LabelType = 'campaign' | 'new' | 'presale' | 'other';
-interface Props {
-    /**
-     * Allows to change the background color of component
-     */
-    type: LabelType;
-    /**
-     * Content of Label component
-     */
-    children?: ReactNode;
-    /**
-     * Allows to pass a custom className
-     */
-    className?: string;
-    /**
-     * Allows to pass testid string for testing purposes
-     */
-    'data-testid'?: string;
-}
-declare const Label: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
-/** @component */
-export default Label;
+import type { ReactNode } from 'react';
+import React from 'react';
+type LabelType = 'campaign' | 'new' | 'presale' | 'other';
+interface Props {
+    /**
+     * Allows to change the background color of component
+     */
+    type: LabelType;
+    /**
+     * Content of Label component
+     */
+    children?: ReactNode;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+declare const Label: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default Label;

package/build/es/components/Label/Label.js

@@ -4,12 +4,12 @@ import styled from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
 import { getDividedSize, getMultipliedSize } from '../../utils/styledUtils.js';
 
-const colorsMap = {
-    campaign: theme.color.background.pink.E01,
-    new: theme.color.background.lemon.default,
-    presale: theme.color.background.orange.default,
-    other: theme.color.background.sky.default,
-};
+const colorsMap = {
+    campaign: theme.color.background.pink.E01,
+    new: theme.color.background.lemon.default,
+    presale: theme.color.background.orange.default,
+    other: theme.color.background.sky.default,
+};
 const StyledLabel = styled.span `
     display: inline-block;
     color: ${theme.color.text.black};
@@ -22,10 +22,10 @@ const StyledLabel = styled.span `
     text-align: center;
     text-transform: uppercase;
     border-radius: ${theme.radius.pill};
-`;
-const Label = (_a) => {
-    var { 'data-testid': dataTestId } = _a, props = __rest(_a, ['data-testid']);
-    return (React__default.createElement(StyledLabel, { type: props.type, className: props.className, "data-testid": dataTestId }, props.children));
+`;
+const Label = (_a) => {
+    var { 'data-testid': dataTestId } = _a, props = __rest(_a, ['data-testid']);
+    return (React__default.createElement(StyledLabel, { type: props.type, className: props.className, "data-testid": dataTestId }, props.children));
 };
 
 export { Label as default };

package/build/es/components/LabelText/LabelText.d.ts

@@ -1,44 +1,44 @@
-import type { ReactNode } from 'react';
-import React from 'react';
-type LabelTextStatus = 'info' | 'success' | 'warning' | 'error';
-interface Props {
-    /**
-     * Unique ID for the component
-     */
-    id?: string;
-    /**
-     * Content of LabelText component
-     */
-    children?: ReactNode;
-    /**
-     * Allows to pass a custom 'for' attribute
-     */
-    htmlFor?: string;
-    /**
-     * Styling of `label` element changes depending on the passed status
-     *
-     * @param {LabelTextStatus} undefined Default styling
-     * @param {LabelTextStatus} info Changes color to `theme.color.notification.info`
-     * @param {LabelTextStatus} success Changes color to `theme.color.notification.success`
-     * @param {LabelTextStatus} warning Changes color to `theme.color.notification.warning`
-     * @param {LabelTextStatus} error Changes color to `theme.color.notification.error`
-     */
-    status?: LabelTextStatus;
-    /**
-     * Allows to set element as mandatory
-     *
-     * @default false
-     */
-    isMandatory?: boolean;
-    /**
-     * Allows to pass a custom className
-     */
-    className?: string;
-    /**
-     * Allows to pass testid string for testing purposes
-     */
-    'data-testid'?: string;
-}
-/** @visibleName Label Text */
-declare const LabelText: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
-export default LabelText;
+import type { ReactNode } from 'react';
+import React from 'react';
+type LabelTextStatus = 'info' | 'success' | 'warning' | 'error';
+interface Props {
+    /**
+     * Unique ID for the component
+     */
+    id?: string;
+    /**
+     * Content of LabelText component
+     */
+    children?: ReactNode;
+    /**
+     * Allows to pass a custom 'for' attribute
+     */
+    htmlFor?: string;
+    /**
+     * Styling of `label` element changes depending on the passed status
+     *
+     * @param {LabelTextStatus} undefined Default styling
+     * @param {LabelTextStatus} info Changes color to `theme.color.notification.info`
+     * @param {LabelTextStatus} success Changes color to `theme.color.notification.success`
+     * @param {LabelTextStatus} warning Changes color to `theme.color.notification.warning`
+     * @param {LabelTextStatus} error Changes color to `theme.color.notification.error`
+     */
+    status?: LabelTextStatus;
+    /**
+     * Allows to set element as mandatory
+     *
+     * @default false
+     */
+    isMandatory?: boolean;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+/** @visibleName Label Text */
+declare const LabelText: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+export default LabelText;

package/build/es/components/LabelText/LabelText.js

@@ -12,16 +12,16 @@ const Label = styled.label `
     line-height: ${theme.lineHeight.default};
     margin-bottom: ${getDividedSize(theme.base.baseWidth, 2)};
     ${({ htmlFor }) => htmlFor && `cursor: pointer`};
-`;
+`;
 const Mandatory = styled.span `
     color: ${theme.color.text.pink};
-`;
-/** @visibleName Label Text */
-const LabelText = (_a) => {
-    var { 'data-testid': dataTestId } = _a, props = __rest(_a, ['data-testid']);
-    return (React__default.createElement(Label, { id: props.id, htmlFor: props.htmlFor, className: props.className, "data-testid": dataTestId, status: props.status },
-        props.children,
-        props.isMandatory && React__default.createElement(Mandatory, null, "*")));
+`;
+/** @visibleName Label Text */
+const LabelText = (_a) => {
+    var { 'data-testid': dataTestId } = _a, props = __rest(_a, ['data-testid']);
+    return (React__default.createElement(Label, { id: props.id, htmlFor: props.htmlFor, className: props.className, "data-testid": dataTestId, status: props.status },
+        props.children,
+        props.isMandatory && React__default.createElement(Mandatory, null, "*")));
 };
 
 export { LabelText as default };