autocasting-ui-library-padimasso 1.3.4 → 1.3.6

package/dist/components/Actions/Buttons/Button/Button.js

@@ -4,7 +4,7 @@ import { clsx } from 'clsx';
 import { BUTTON_STRUCTURE } from '../../../../styles/style_constants.js';
 
 const Button = forwardRef((props, ref) => {
-    const { className, variant = 'primary', asChild = false, children, ...rest } = props;
+    const { className, variant = 'primary', asChild = false, children, type, ...rest } = props;
     const { disabled, ...delegated } = rest;
     const variantClasses = {
         primary: 'bg-(--color-primary-purple) text-(--color-primary-white) cursor-pointer hover:bg-(--hover-color-primary)',
@@ -24,7 +24,7 @@ const Button = forwardRef((props, ref) => {
         };
         return cloneElement(children, childProps);
     }
-    return (jsx("button", { ref: ref, className: computedClass, disabled: disabled, ...delegated, children: children }));
+    return (jsx("button", { ref: ref, type: type ?? 'button', className: computedClass, disabled: disabled, ...delegated, children: children }));
 });
 Button.displayName = 'Button';
 

package/dist/components/Brand/Identity/Icon/Icon.js

@@ -78,7 +78,9 @@ import TickIconAlertGreen from '../../../../icons/tick-2-alert-green.svg.js';
 import TickIcon from '../../../../icons/tick-2.svg.js';
 import TikTokIcon from '../../../../icons/tikTok.svg.js';
 import ViewIconPurple from '../../../../icons/view-purple.svg.js';
+import ViewHideIconPurple from '../../../../icons/view-hide-purple.svg.js';
 import ViewIcon from '../../../../icons/view.svg.js';
+import ViewHideIcon from '../../../../icons/view-hide.svg.js';
 import VimeoIconPurple from '../../../../icons/vimeo-purple.svg.js';
 import VimeoIcon from '../../../../icons/vimeo.svg.js';
 import WhatsappIconPurple from '../../../../icons/whatsapp-purple.svg.js';
@@ -263,6 +265,10 @@ const ICONS = {
     warning: {
         default: WarningIconAlertYellow,
     },
+    viewHide: {
+        default: ViewHideIcon,
+        primary: ViewHideIconPurple,
+    },
 };
 function Icon({ name, variant = 'default', size = 18, className, alt = '', style, ...rest }) {
     const config = ICONS[name];

package/dist/components/Forms/Fields/FormCurrencyField/FormCurrencyField.js

@@ -0,0 +1,16 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import '../../primitive/Input/Input.js';
+import CurrencyInput from '../../primitive/CurrencyInput/CurrencyInput.js';
+import '../../primitive/PasswordInput/PasswordInput.js';
+import '../../primitive/Select/Select.js';
+import Label from '../../primitive/Label/Label.js';
+
+const FormCurrencyField = (allProps) => {
+    const hasValueProp = Object.prototype.hasOwnProperty.call(allProps, 'value');
+    const { id, label, error, labelClassName, className, value, required, onValueChange, ...props } = allProps;
+    const inputValueProps = hasValueProp ? { value: (value ?? '') } : {};
+    return (jsxs("div", { className: "w-full flex flex-col", children: [label && (jsxs(Label, { htmlFor: id, className: clsx('mb-2', labelClassName), children: [label, required ? (jsx("span", { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" })) : null] })), jsx(CurrencyInput, { id: id, "aria-invalid": !!error, "aria-describedby": error ? `${id}-error` : undefined, className: className, onValueChange: onValueChange, ...inputValueProps, ...props }), jsx("div", { className: "min-h-[25px]", children: error && (jsx(Label, { id: `${id}-error`, variant: "error", className: "mt-0.4 pl-0.7", children: error })) })] }));
+};
+
+export { FormCurrencyField as default };

package/dist/components/Forms/Fields/FormCurrencyField/index.js

@@ -0,0 +1,5 @@
+import FormCurrencyField from './FormCurrencyField.js';
+
+
+
+export { FormCurrencyField as default };

package/dist/components/Forms/Fields/FormInputField/FormInputField.js

@@ -1,14 +1,19 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import Input from '../../primitive/Input/Input.js';
+import '../../primitive/CurrencyInput/CurrencyInput.js';
+import '../../primitive/PasswordInput/PasswordInput.js';
 import '../../primitive/Select/Select.js';
 import Label from '../../primitive/Label/Label.js';
 import { clsx } from 'clsx';
 import EditableInput from '../../primitive/EditableInput/EditableInput.js';
 
-const FormInputField = ({ id, label, error, editable = false, onEdit, labelClassName, type = 'text', className, value, required, ...props }) => {
-    return (jsxs("div", { className: "w-full flex flex-col", children: [label && (jsxs(Label, { htmlFor: id, className: clsx('mb-2', labelClassName), children: [label, required ? (jsx("span", { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" })) : null] })), editable ? (jsx(EditableInput, { id: id, "aria-invalid": !!error, "aria-describedby": error ? `${id}-error` : undefined, className: className, type: type, value: value, onEdit: onEdit, ...props })) : (
+const FormInputField = (allProps) => {
+    const hasValueProp = Object.prototype.hasOwnProperty.call(allProps, 'value');
+    const { id, label, error, editable = false, onEdit, labelClassName, type = 'text', className, value, required, ...props } = allProps;
+    const inputValueProps = hasValueProp ? { value: (value ?? '') } : {};
+    return (jsxs("div", { className: "w-full flex flex-col", children: [label && (jsxs(Label, { htmlFor: id, className: clsx('mb-2', labelClassName), children: [label, required ? (jsx("span", { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" })) : null] })), editable ? (jsx(EditableInput, { id: id, "aria-invalid": !!error, "aria-describedby": error ? `${id}-error` : undefined, className: className, type: type, onEdit: onEdit, ...inputValueProps, ...props })) : (
             /* ----- Normal variant (la que ya tenías) ----- */
-            jsx(Input, { id: id, "aria-invalid": !!error, "aria-describedby": error ? `${id}-error` : undefined, className: className, type: type, value: value, ...props })), jsx("div", { className: "min-h-[25px]", children: error && (jsx(Label, { id: `${id}-error`, variant: "error", className: "mt-0.4 pl-0.7", children: error })) })] }));
+            jsx(Input, { id: id, "aria-invalid": !!error, "aria-describedby": error ? `${id}-error` : undefined, className: className, type: type, ...inputValueProps, ...props })), jsx("div", { className: "min-h-[25px]", children: error && (jsx(Label, { id: `${id}-error`, variant: "error", className: "mt-0.4 pl-0.7", children: error })) })] }));
 };
 
 export { FormInputField as default };

package/dist/components/Forms/Fields/FormPasswordField/FormPasswordField.js

@@ -0,0 +1,16 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import '../../primitive/Input/Input.js';
+import '../../primitive/CurrencyInput/CurrencyInput.js';
+import PasswordInput from '../../primitive/PasswordInput/PasswordInput.js';
+import '../../primitive/Select/Select.js';
+import Label from '../../primitive/Label/Label.js';
+
+const FormPasswordField = (allProps) => {
+    const hasValueProp = Object.prototype.hasOwnProperty.call(allProps, 'value');
+    const { id, label, error, labelClassName, className, value, required, ...props } = allProps;
+    const inputValueProps = hasValueProp ? { value: (value ?? '') } : {};
+    return (jsxs("div", { className: "w-full flex flex-col", children: [label && (jsxs(Label, { htmlFor: id, className: clsx('mb-2', labelClassName), children: [label, required ? (jsx("span", { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" })) : null] })), jsx(PasswordInput, { id: id, "aria-invalid": !!error, "aria-describedby": error ? `${id}-error` : undefined, className: className, ...inputValueProps, ...props }), jsx("div", { className: "min-h-[25px]", children: error && (jsx(Label, { id: `${id}-error`, variant: "error", className: "mt-0.4 pl-0.7", children: error })) })] }));
+};
+
+export { FormPasswordField as default };

package/dist/components/Forms/Fields/FormPasswordField/index.js

@@ -0,0 +1,5 @@
+import FormPasswordField from './FormPasswordField.js';
+
+
+
+export { FormPasswordField as default };

package/dist/components/Forms/Fields/FormSelectField/FormSelectField.js

@@ -1,6 +1,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import Select from '../../primitive/Select/Select.js';
 import '../../primitive/Input/Input.js';
+import '../../primitive/CurrencyInput/CurrencyInput.js';
+import '../../primitive/PasswordInput/PasswordInput.js';
 import Label from '../../primitive/Label/Label.js';
 
 const FormSelectField = ({ id, label, labelClassName, error, placeholder, options, className, required, ...props }) => {

package/dist/components/Forms/primitive/CurrencyInput/CurrencyInput.js

@@ -0,0 +1,55 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useMemo, useState, useEffect } from 'react';
+import Input from '../Input/Input.js';
+
+function extractDigits(value) {
+    return (value ?? '').replace(/\D/g, '');
+}
+function addThousandsSeparator(intPart) {
+    return intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
+}
+function formatDigitsAsCurrency(digits) {
+    if (!digits)
+        return '';
+    const normalized = digits.replace(/^0+(?=\d)/, '');
+    const padded = normalized.padStart(3, '0');
+    const integerPart = addThousandsSeparator(padded.slice(0, -2));
+    const decimalPart = padded.slice(-2);
+    return `${integerPart},${decimalPart}`;
+}
+function normalizeCurrencyText(value) {
+    return formatDigitsAsCurrency(extractDigits(value));
+}
+const CurrencyInput = forwardRef((allProps, ref) => {
+    const hasValueProp = Object.prototype.hasOwnProperty.call(allProps, 'value');
+    const { value, defaultValue, onChange, onValueChange, ...props } = allProps;
+    const controlledValue = useMemo(() => normalizeCurrencyText(value), [value]);
+    const initialValue = useMemo(() => normalizeCurrencyText(defaultValue), [defaultValue]);
+    const [uncontrolledValue, setUncontrolledValue] = useState(initialValue);
+    useEffect(() => {
+        if (!hasValueProp) {
+            setUncontrolledValue(initialValue);
+        }
+    }, [hasValueProp, initialValue]);
+    const displayValue = hasValueProp ? controlledValue : uncontrolledValue;
+    const handleChange = (event) => {
+        const formattedValue = formatDigitsAsCurrency(extractDigits(event.target.value));
+        const nextDigits = extractDigits(formattedValue);
+        if (!hasValueProp) {
+            setUncontrolledValue(formattedValue);
+        }
+        onValueChange?.(formattedValue, nextDigits);
+        if (onChange) {
+            const nextEvent = {
+                ...event,
+                target: { ...event.target, value: formattedValue },
+                currentTarget: { ...event.currentTarget, value: formattedValue },
+            };
+            onChange(nextEvent);
+        }
+    };
+    return (jsx(Input, { ref: ref, type: "text", inputMode: "numeric", autoComplete: "off", value: displayValue, onChange: handleChange, ...props }));
+});
+CurrencyInput.displayName = 'CurrencyInput';
+
+export { CurrencyInput as default };

package/dist/components/Forms/primitive/CurrencyInput/index.js

@@ -0,0 +1,5 @@
+import CurrencyInput from './CurrencyInput.js';
+
+
+
+export { CurrencyInput as default };

package/dist/components/Forms/primitive/EditableInput/EditableInput.js

@@ -1,10 +1,15 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { clsx } from 'clsx';
-import EditIcon from '../../../Brand/Identity/Icons/EditIcon.js';
+import { Icon } from '../../../Brand/Identity/Icon/Icon.js';
+import Input from '../Input/Input.js';
 
-const EditableInput = forwardRef(({ className, value, onEdit, disabled, ...props }, ref) => {
-    return (jsxs("div", { className: clsx('w-full h-14 rounded-xl text-base', 'border border-(--color-secondary-outline)', 'focus:outline-none focus:ring-0 focus:border-(--color-primary-black)', disabled && 'bg-(--color-secondary-disabled-grey) cursor-not-allowed', 'transition-colors', 'flex items-stretch', className), children: [jsx("input", { value: value, ref: ref, disabled: disabled, className: clsx('w-full h-full bg-transparent outline-none', 'border-0 focus:ring-0', 'px-5 py-3', 'text-base placeholder:text-(--color-secondary-grey) placeholder:font-light placeholder:text-sm'), ...props }), jsx("div", { className: clsx('flex items-center border-l border-(--color-secondary-outline)', 'px-2'), children: jsx("button", { type: "button", onClick: onEdit, disabled: disabled, className: clsx('cursor-pointer inline-flex items-center justify-center rounded-full', 'h-7 w-7', !disabled && 'active:bg-black/10', disabled && 'opacity-60 cursor-not-allowed'), children: jsx(EditIcon, {}) }) })] }));
+const EditableInput = forwardRef((allProps, ref) => {
+    const hasValueProp = Object.prototype.hasOwnProperty.call(allProps, 'value');
+    const { className, value, onEdit, disabled, ...props } = allProps;
+    const canEdit = !disabled && !!onEdit;
+    const inputValueProps = hasValueProp ? { value: (value ?? '') } : {};
+    return (jsxs("div", { className: clsx('w-full h-12 flex items-stretch rounded-xl border border-(--color-secondary-outline) overflow-hidden', disabled && 'bg-(--color-secondary-offwhite) cursor-not-allowed'), children: [jsx(Input, { ref: ref, disabled: disabled, className: clsx('h-full rounded-none border-0 focus:border-0 focus:ring-0', disabled && 'bg-transparent', className), ...inputValueProps, ...props }), jsx("div", { className: clsx('flex items-center justify-center border-l border-(--color-secondary-outline)', 'px-4'), children: jsx("button", { type: "button", onClick: onEdit, disabled: !canEdit, "aria-label": "Edit field", className: "inline-flex items-center justify-center disabled:cursor-not-allowed", children: jsx(Icon, { name: "edit", variant: canEdit ? 'default' : 'disabled' }) }) })] }));
 });
 EditableInput.displayName = 'EditableInput';
 

package/dist/components/Forms/primitive/PasswordInput/PasswordInput.js

@@ -0,0 +1,19 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useState } from 'react';
+import { clsx } from 'clsx';
+import { Icon } from '../../../Brand/Identity/Icon/Icon.js';
+import Input from '../Input/Input.js';
+
+const PasswordInput = forwardRef((props, ref) => {
+    const { className, disabled, ...rest } = props;
+    const [revealed, setRevealed] = useState(false);
+    const toggleReveal = () => {
+        if (disabled)
+            return;
+        setRevealed((prev) => !prev);
+    };
+    return (jsxs("div", { className: clsx('w-full h-12 flex items-stretch rounded-xl border border-(--color-secondary-outline) overflow-hidden', disabled && 'bg-(--color-secondary-offwhite) cursor-not-allowed'), children: [jsx(Input, { ref: ref, type: revealed ? 'text' : 'password', disabled: disabled, className: clsx('h-full rounded-none border-0 focus:border-0 focus:ring-0', disabled && 'bg-transparent', className), ...rest }), jsx("div", { className: "flex items-center justify-center border-l border-(--color-secondary-outline) px-4", children: jsx("button", { type: "button", onClick: toggleReveal, disabled: disabled, "aria-label": revealed ? 'Hide password' : 'Show password', className: "inline-flex items-center justify-center disabled:cursor-not-allowed disabled:opacity-60", children: jsx(Icon, { name: revealed ? 'viewHide' : 'view', variant: "default" }) }) })] }));
+});
+PasswordInput.displayName = 'PasswordInput';
+
+export { PasswordInput as default };

package/dist/components/Forms/primitive/PasswordInput/index.js

@@ -0,0 +1,5 @@
+import PasswordInput from './PasswordInput.js';
+
+
+
+export { PasswordInput as default };

package/dist/components/Overlays/Dialogs/Modal/Modal.js

@@ -36,7 +36,7 @@ function Modal({ isOpen, onClose, title, children, size = 'md' }) {
                 sticky top-0 z-10 bg-(--color-primary-white)/95 backdrop-blur
                 transition-shadow
                 ${scrolled ? 'shadow-md' : 'shadow-none'}
-              `, children: [jsx("button", { onClick: onClose, className: "cursor-pointer absolute right-5 top-4 text-xl leading-none", "aria-label": "Close", children: "\u2715" }), title && jsx("h2", { className: "text-2xl font-bold px-6 pt-5 pb-3 pr-12", children: title })] })), jsx("div", { className: `p-6 pt-4 ${title ? 'mt-0' : 'mt-10'}`, children: children })] }) }) }));
+              `, children: [jsx("button", { type: "button", onClick: onClose, className: "cursor-pointer absolute right-5 top-4 text-xl leading-none", "aria-label": "Close", children: "\u2715" }), title && jsx("h2", { className: "text-2xl font-bold px-6 pt-5 pb-3 pr-12", children: title })] })), jsx("div", { className: `p-6 pt-4 ${title ? 'mt-0' : 'mt-10'}`, children: children })] }) }) }));
 }
 
 export { Modal as default };

package/dist/components/Overlays/Panels/DetailsView/DetailsView.js

@@ -31,7 +31,7 @@ function DetailsView({ open, onClose, headerLeft: navigation, headerRight, child
     }, [open]);
     if (!open)
         return null;
-    return (jsxs("div", { className: "fixed inset-0 z-[100] flex justify-end items-stretch", children: [jsx("button", { type: "button", "aria-label": "Cerrar", onClick: onClose, className: "absolute inset-0 bg-black/60" }), jsxs("aside", { className: clsx('relative ml-auto h-full w-full max-w-[550px] bg-(--color-secondary-white) shadow-xl flex flex-col', className), children: [jsxs("header", { className: "flex items-center justify-between p-5 border-b border-(--color-secondary-outline) bg-(--color-primary-white)", children: [navigation, jsxs("div", { className: "flex items-center gap-4", children: [headerRight, jsx(Icon, { name: "burgerClose", onClick: onClose })] })] }), jsx("div", { ref: bodyRef, className: "flex-1 min-h-0 overflow-auto px-8 py-10", children: children })] })] }));
+    return (jsxs("div", { className: "fixed inset-0 z-[140] flex justify-end items-stretch", children: [jsx("button", { type: "button", "aria-label": "Cerrar", onClick: onClose, className: "absolute inset-0 bg-black/60" }), jsxs("aside", { className: clsx('relative ml-auto h-full w-full max-w-[550px] bg-(--color-secondary-white) shadow-xl flex flex-col', className), children: [jsxs("header", { className: "flex items-center justify-between p-5 border-b border-(--color-secondary-outline) bg-(--color-primary-white)", children: [navigation, jsxs("div", { className: "flex items-center gap-4", children: [headerRight, jsx(Icon, { name: "burgerClose", onClick: onClose })] })] }), jsx("div", { ref: bodyRef, className: "flex-1 min-h-0 overflow-auto px-8 py-10", children: children })] })] }));
 }
 
 export { DetailsView as default };

package/dist/components/Overlays/Tooltip/Tooltip.js

@@ -0,0 +1,108 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useId, useRef, useState, useCallback, useLayoutEffect, isValidElement, Fragment as Fragment$1, cloneElement } from 'react';
+import { createPortal } from 'react-dom';
+import { clsx } from 'clsx';
+
+const TOOLTIP_GAP = 16;
+const POSITION_STYLES = {
+    topLeft: {
+        tailClassName: 'left-3 top-full',
+        tailStyle: {
+            clipPath: 'polygon(0 0, 100% 0, 50% 100%)',
+        },
+    },
+    topRight: {
+        tailClassName: 'right-3 top-full',
+        tailStyle: {
+            clipPath: 'polygon(0 0, 100% 0, 50% 100%)',
+        },
+    },
+    bottomLeft: {
+        tailClassName: 'left-3 bottom-full',
+        tailStyle: {
+            clipPath: 'polygon(50% 0, 0 100%, 100% 100%)',
+        },
+    },
+    bottomRight: {
+        tailClassName: 'right-3 bottom-full',
+        tailStyle: {
+            clipPath: 'polygon(50% 0, 0 100%, 100% 100%)',
+        },
+    },
+};
+function getTooltipCoordinates(triggerRect, tooltipRect, position, nudgeX = 0, nudgeY = 0) {
+    if (position === 'topLeft') {
+        return {
+            left: triggerRect.left + nudgeX,
+            top: triggerRect.top - tooltipRect.height - TOOLTIP_GAP + nudgeY,
+        };
+    }
+    if (position === 'topRight') {
+        return {
+            left: triggerRect.right - tooltipRect.width + nudgeX,
+            top: triggerRect.top - tooltipRect.height - TOOLTIP_GAP + nudgeY,
+        };
+    }
+    if (position === 'bottomLeft') {
+        return {
+            left: triggerRect.left + nudgeX,
+            top: triggerRect.bottom + TOOLTIP_GAP + nudgeY,
+        };
+    }
+    return {
+        left: triggerRect.right - tooltipRect.width + nudgeX,
+        top: triggerRect.bottom + TOOLTIP_GAP + nudgeY,
+    };
+}
+function Tooltip({ children, title, position = 'topLeft', nudgeX = 0, nudgeY = 0 }) {
+    const tooltipId = useId();
+    const triggerRef = useRef(null);
+    const tooltipRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    const [isPositioned, setIsPositioned] = useState(false);
+    const [coordinates, setCoordinates] = useState({ left: 0, top: 0 });
+    const positionStyle = POSITION_STYLES[position];
+    const updatePosition = useCallback(() => {
+        const triggerElement = triggerRef.current;
+        const tooltipElement = tooltipRef.current;
+        if (!triggerElement || !tooltipElement)
+            return;
+        const nextCoordinates = getTooltipCoordinates(triggerElement.getBoundingClientRect(), tooltipElement.getBoundingClientRect(), position, nudgeX, nudgeY);
+        setCoordinates((currentCoordinates) => {
+            if (currentCoordinates.left === nextCoordinates.left && currentCoordinates.top === nextCoordinates.top) {
+                return currentCoordinates;
+            }
+            return nextCoordinates;
+        });
+        setIsPositioned(true);
+    }, [nudgeX, nudgeY, position]);
+    useLayoutEffect(() => {
+        if (!open)
+            return;
+        setIsPositioned(false);
+        updatePosition();
+        const handleViewportChange = () => updatePosition();
+        window.addEventListener('resize', handleViewportChange);
+        window.addEventListener('scroll', handleViewportChange, true);
+        return () => {
+            window.removeEventListener('resize', handleViewportChange);
+            window.removeEventListener('scroll', handleViewportChange, true);
+        };
+    }, [open, updatePosition]);
+    if (!title) {
+        return jsx(Fragment, { children: children });
+    }
+    const trigger = isValidElement(children) && children.type !== Fragment$1
+        ? cloneElement(children, {
+            'aria-describedby': open ? tooltipId : undefined,
+        })
+        : children;
+    return (jsxs(Fragment, { children: [jsx("span", { ref: triggerRef, className: "inline-flex max-w-full", onMouseEnter: () => setOpen(true), onMouseLeave: () => setOpen(false), onFocus: () => setOpen(true), onBlur: () => setOpen(false), "aria-describedby": !isValidElement(children) && open ? tooltipId : undefined, children: trigger }), open
+                ? createPortal(jsx("span", { ref: tooltipRef, id: tooltipId, role: "tooltip", "aria-hidden": "true", className: clsx('pointer-events-none fixed z-[1200] ', isPositioned ? 'opacity-100' : 'opacity-0'), style: {
+                        left: coordinates.left,
+                        top: coordinates.top,
+                    }, children: jsxs("span", { className: clsx('relative block rounded-[10px] bg-(--color-primary-purple)', 'px-2.5 py-1.5 text-xs font-normal text-(--color-primary-white)', 'shadow-xl'), children: [jsx("span", { className: clsx('absolute h-2 w-4 bg-inherit', positionStyle.tailClassName), style: positionStyle.tailStyle, "aria-hidden": "true" }), title] }) }), document.body)
+                : null] }));
+}
+
+export { Tooltip as default };

package/dist/icons/view-hide-purple.svg.js

@@ -0,0 +1,3 @@
+var ViewHideIconPurple = "data:image/svg+xml,%3Csvg width=%2220%22 height=%2216%22 viewBox=%220 0 20 16%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M16.3801 8.06313C17.2416 7.20164 17.925 6.17891 18.3912 5.05332C18.6058 4.53525 18.7725 4.00006 18.8899 3.45447M16.3801 8.06313C15.5187 8.92462 14.4959 9.60798 13.3703 10.0742C12.9958 10.2294 12.6123 10.3595 12.2223 10.464M16.3801 8.06313L17.9537 9.63666M3.25991 8.06313C4.1214 8.92462 5.14413 9.60798 6.26972 10.0742C6.64428 10.2294 7.02779 10.3595 7.41772 10.464M3.25991 8.06313C2.39842 7.20164 1.71506 6.17891 1.24882 5.05332C1.03423 4.53525 0.867572 4.00006 0.750183 3.45447M3.25991 8.06313L1.68637 9.63666M7.41772 10.464C8.19953 10.6736 9.00712 10.7804 9.82003 10.7804C10.6329 10.7804 11.4405 10.6736 12.2223 10.464M7.41772 10.464L6.85997 12.5455M12.2223 10.464L12.7801 12.5455%22 stroke=%22%236F2DF3%22 stroke-width=%221.5%22 stroke-linecap=%22round%22/%3E%3C/svg%3E";
+
+export { ViewHideIconPurple as default };

package/dist/icons/view-hide.svg.js

@@ -0,0 +1,3 @@
+var ViewHideIcon = "data:image/svg+xml,%3Csvg width=%2220%22 height=%2216%22 viewBox=%220 0 20 16%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M16.3801 8.06313C17.2416 7.20164 17.925 6.17891 18.3912 5.05332C18.6058 4.53525 18.7725 4.00006 18.8899 3.45447M16.3801 8.06313C15.5187 8.92462 14.4959 9.60798 13.3703 10.0742C12.9958 10.2294 12.6123 10.3595 12.2223 10.464M16.3801 8.06313L17.9537 9.63666M3.25991 8.06313C4.1214 8.92462 5.14413 9.60798 6.26972 10.0742C6.64428 10.2294 7.02779 10.3595 7.41772 10.464M3.25991 8.06313C2.39842 7.20164 1.71506 6.17891 1.24882 5.05332C1.03423 4.53525 0.867572 4.00006 0.750183 3.45447M3.25991 8.06313L1.68637 9.63666M7.41772 10.464C8.19953 10.6736 9.00712 10.7804 9.82003 10.7804C10.6329 10.7804 11.4405 10.6736 12.2223 10.464M7.41772 10.464L6.85997 12.5455M12.2223 10.464L12.7801 12.5455%22 stroke=%22%23070707%22 stroke-width=%221.5%22 stroke-linecap=%22round%22/%3E%3C/svg%3E";
+
+export { ViewHideIcon as default };

package/dist/index.d.ts

@@ -34,7 +34,7 @@ declare function ButtonRow({ items, className, innerClassName }: ButtonRowProps)
 type GoogleButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
 declare const GoogleButton: ({ className, children, ...props }: GoogleButtonProps) => react_jsx_runtime.JSX.Element;
 
-type IconName = 'ogIcon' | 'switcher' | 'tick' | 'view' | 'open' | 'burger' | 'burgerClose' | 'arrowLongLeft' | 'catalog' | 'copyLink' | 'clapper' | 'clapperManage' | 'clock' | 'file' | 'filter' | 'profile' | 'settings' | 'cross' | 'edit' | 'mail' | 'location' | 'calendar' | 'behance' | 'imdb' | 'plus' | 'whatsapp' | 'vimeo' | 'instagram' | 'x' | 'tikTok' | 'linkedin' | 'delete' | 'save' | 'publish' | 'overflowmenu' | 'applicants' | 'search' | 'info' | 'play' | 'web' | 'warning' | 'logout';
+type IconName = 'ogIcon' | 'switcher' | 'tick' | 'view' | 'viewHide' | 'open' | 'burger' | 'burgerClose' | 'arrowLongLeft' | 'catalog' | 'copyLink' | 'clapper' | 'clapperManage' | 'clock' | 'file' | 'filter' | 'profile' | 'settings' | 'cross' | 'edit' | 'mail' | 'location' | 'calendar' | 'behance' | 'imdb' | 'plus' | 'whatsapp' | 'vimeo' | 'instagram' | 'x' | 'tikTok' | 'linkedin' | 'delete' | 'save' | 'publish' | 'overflowmenu' | 'applicants' | 'search' | 'info' | 'play' | 'web' | 'warning' | 'logout';
 type IconVariant = 'default' | 'primary' | 'white' | 'success' | 'danger' | 'disabled';
 type IconProps = Omit<ImgHTMLAttributes<HTMLImageElement>, 'src'> & {
     name: IconName;
@@ -189,6 +189,16 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, '
 }
 declare const Input: React$1.ForwardRefExoticComponent<InputProps & React$1.RefAttributes<HTMLInputElement>>;
 
+declare const CurrencyInput: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "type"> & {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (formattedValue: string, rawDigits: string) => void;
+} & React$1.RefAttributes<HTMLInputElement>>;
+
+declare const PasswordInput: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "type"> & {
+    type?: "password";
+} & React$1.RefAttributes<HTMLInputElement>>;
+
 type SelectOption = {
     value: string;
     label: string;
@@ -213,7 +223,26 @@ type FormInputFieldProps = React$1.InputHTMLAttributes<HTMLInputElement> & {
     editable?: boolean;
     onEdit?: () => void;
 };
-declare const FormInputField: ({ id, label, error, editable, onEdit, labelClassName, type, className, value, required, ...props }: FormInputFieldProps) => react_jsx_runtime.JSX.Element;
+declare const FormInputField: (allProps: FormInputFieldProps) => react_jsx_runtime.JSX.Element;
+
+type FormCurrencyFieldProps = Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'type'> & {
+    id: string;
+    label?: string;
+    error?: string;
+    labelClassName?: string;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (formattedValue: string, rawDigits: string) => void;
+};
+declare const FormCurrencyField: (allProps: FormCurrencyFieldProps) => react_jsx_runtime.JSX.Element;
+
+type FormPasswordFieldProps = Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'type'> & {
+    id: string;
+    label?: string;
+    error?: string;
+    labelClassName?: string;
+};
+declare const FormPasswordField: (allProps: FormPasswordFieldProps) => react_jsx_runtime.JSX.Element;
 
 type Props$4 = React__default.SelectHTMLAttributes<HTMLSelectElement> & {
     id: string;
@@ -361,6 +390,16 @@ type ModalProps = {
 };
 declare function Modal({ isOpen, onClose, title, children, size }: ModalProps): react_jsx_runtime.JSX.Element | null;
 
+type TooltipPosition = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
+type TooltipProps = {
+    children: React.ReactNode;
+    title: string;
+    position?: TooltipPosition;
+    nudgeX?: number;
+    nudgeY?: number;
+};
+declare function Tooltip({ children, title, position, nudgeX, nudgeY }: TooltipProps): react_jsx_runtime.JSX.Element;
+
 type DetailsViewProps = {
     open: boolean;
     onClose: () => void;
@@ -388,5 +427,5 @@ type WizardProps = {
 };
 declare function Wizard({ children }: WizardProps): ReactElement<WizardStepProps, string | React$1.JSXElementConstructor<any>>;
 
-export { Button, ButtonRow, ChevronLeft, ChevronRight, ChevronUpDown, Chip, DetailsView, FormInputField, FormSelectField, FullscreenCenter, GoogleButton, HilighterSvg, Icon, ImageCarousel, Input, Label, Logo, Modal, OverflowMenu, PhotoZoomOverlay, Pills, SearchInput, SearchWithSuggestions, Select, Separator, Spinner, StatusChip, TextDropdownTrigger, Toast, ToastProvider, UniversalVideoPlayer, UploadTile, VideoPreviewCard, Wizard, WizardStep, clearToasts, dismissToast, showToast, useDebouncedValue, useToast, useViewportVhVar };
-export type { IconName, IconVariant, OverflowMenuAlign, OverflowMenuItem, OverflowMenuSide, PillItem, ShowToastOptions, ToastContent, ToastContextValue, ToastPosition, ToastProps, ToastRecord, ToastType, UniversalVideoPlayerProps, VideoProvider, WizardStepProps };
+export { Button, ButtonRow, ChevronLeft, ChevronRight, ChevronUpDown, Chip, CurrencyInput, DetailsView, FormCurrencyField, FormInputField, FormPasswordField, FormSelectField, FullscreenCenter, GoogleButton, HilighterSvg, Icon, ImageCarousel, Input, Label, Logo, Modal, OverflowMenu, PasswordInput, PhotoZoomOverlay, Pills, SearchInput, SearchWithSuggestions, Select, Separator, Spinner, StatusChip, TextDropdownTrigger, Toast, ToastProvider, Tooltip, UniversalVideoPlayer, UploadTile, VideoPreviewCard, Wizard, WizardStep, clearToasts, dismissToast, showToast, useDebouncedValue, useToast, useViewportVhVar };
+export type { IconName, IconVariant, OverflowMenuAlign, OverflowMenuItem, OverflowMenuSide, PillItem, ShowToastOptions, ToastContent, ToastContextValue, ToastPosition, ToastProps, ToastRecord, ToastType, TooltipPosition, TooltipProps, UniversalVideoPlayerProps, VideoProvider, WizardStepProps };

package/dist/index.js

@@ -16,9 +16,13 @@ export { default as StatusChip } from './components/Feedback/Status/Chip/StatusC
 export { default as Toast } from './components/Feedback/Toast/Toast.js';
 export { ToastProvider, clearToasts, dismissToast, showToast, useToast } from './components/Feedback/Toast/ToastProvider.js';
 export { default as Input } from './components/Forms/primitive/Input/Input.js';
+export { default as CurrencyInput } from './components/Forms/primitive/CurrencyInput/CurrencyInput.js';
+export { default as PasswordInput } from './components/Forms/primitive/PasswordInput/PasswordInput.js';
 export { default as Select } from './components/Forms/primitive/Select/Select.js';
 export { default as Label } from './components/Forms/primitive/Label/Label.js';
 export { default as FormInputField } from './components/Forms/Fields/FormInputField/FormInputField.js';
+export { default as FormCurrencyField } from './components/Forms/Fields/FormCurrencyField/FormCurrencyField.js';
+export { default as FormPasswordField } from './components/Forms/Fields/FormPasswordField/FormPasswordField.js';
 export { default as FormSelectField } from './components/Forms/Fields/FormSelectField/FormSelectField.js';
 export { default as SearchInput } from './components/Forms/Search/SearchInput.js';
 export { default as SearchWithSuggestions } from './components/Forms/Search/SearchWithSuggestions.js';
@@ -32,6 +36,7 @@ export { default as ChevronRight } from './components/Navigation/Indicators/Chev
 export { default as ChevronUpDown } from './components/Navigation/Indicators/Chevron/ChevronUpDown.js';
 export { default as Pills } from './components/Navigation/Selection/Pills/Pills.js';
 export { default as Modal } from './components/Overlays/Dialogs/Modal/Modal.js';
+export { default as Tooltip } from './components/Overlays/Tooltip/Tooltip.js';
 export { default as DetailsView } from './components/Overlays/Panels/DetailsView/DetailsView.js';
 export { default as Wizard } from './components/Flows/Wizard/Wizard.js';
 export { default as WizardStep } from './components/Flows/Wizard/WizardStep.js';