@clickpalm/react 1.1.0 → 1.1.2

package/dist/index.js

@@ -47,15 +47,16 @@ __export(src_exports, {
   Modal: () => Modal,
   MultiStep: () => MultiStep,
   OneTimePassword: () => OneTimePassword,
+  Paragraph: () => Paragraph,
   PasswordInput: () => PasswordInput,
   ProgressBar: () => ProgressBar,
   Radio: () => Radio,
   Select: () => Select2,
   Spacing: () => Spacing,
   Span: () => Span5,
+  StyledHr: () => StyledHr,
   Switch: () => Switch2,
   Tabs: () => Tabs2,
-  Text: () => Text,
   TextArea: () => TextArea,
   TextAreaElement: () => TextAreaElement,
   Toast: () => Toast,
@@ -345,7 +346,7 @@ var StyledButton = styled("button", {
       primary: {
         color: "$white",
         backgroundImage: "linear-gradient(to bottom, $ignite_light, $ignite_dark)",
-        "&:not(:disabled):hover": {
+        "&:not(:disabled):is(:hover, :focus)": {
           background: "$ignite_dark"
         },
         "&:disabled": {
@@ -355,7 +356,7 @@ var StyledButton = styled("button", {
       secondary: {
         color: "$clickpalm_mid",
         border: "2px solid $ignite_light",
-        "&:not(:disabled):hover": {
+        "&:not(:disabled):is(:hover, :focus)": {
           border: "2px solid $ignite_dark"
         },
         "&:disabled": {
@@ -365,7 +366,7 @@ var StyledButton = styled("button", {
       tertiary: {
         color: "$ignite_light",
         border: "3px solid $clickpalm_mid",
-        "&:not(:disabled):hover": {
+        "&:not(:disabled):is(:hover, :focus)": {
           color: "$ignite_dark"
         },
         "&:disabled": {
@@ -1034,6 +1035,9 @@ var Calendar2 = ({ label, onChange }) => {
   ] });
 };
 
+// src/components/Checkbox/index.tsx
+var import_react5 = require("react");
+
 // src/components/Checkbox/styles.ts
 var Checkbox = __toESM(require("@radix-ui/react-checkbox"));
 var StyledWrapper = styled("div", {
@@ -1148,35 +1152,38 @@ var Span = styled("span", {
 
 // src/components/Checkbox/index.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
-function Checkbox2({ label, checked, onCheckedChange, errorMessage, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(StyledWrapper, { hasError: !!errorMessage, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-        CheckboxContainer,
-        {
-          checked,
-          onCheckedChange,
-          hasError: !!errorMessage,
-          ...rest,
-          children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(CheckboxIndicator, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { name: "Check", size: 16 }) })
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(CheckboxLabel, { children: label })
-    ] }),
-    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Span, { children: errorMessage })
-  ] });
-}
+var Checkbox2 = (0, import_react5.forwardRef)(
+  ({ label, checked, onCheckedChange, errorMessage, ...rest }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(StyledWrapper, { hasError: !!errorMessage, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          CheckboxContainer,
+          {
+            ref,
+            checked,
+            onCheckedChange,
+            hasError: !!errorMessage,
+            ...rest,
+            children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(CheckboxIndicator, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { name: "Check", size: 16 }) })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(CheckboxLabel, { children: label })
+      ] }),
+      errorMessage && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Span, { children: errorMessage })
+    ] });
+  }
+);
 Checkbox2.displayName = "Checkbox";
 
 // src/components/Datepicker/index.tsx
 var import_date_fns2 = require("date-fns");
 var import_locale2 = require("date-fns/locale");
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_react_day_picker2 = require("react-day-picker");
 var import_style2 = require("react-day-picker/dist/style.css");
 
 // src/components/Input/index.tsx
-var import_react5 = __toESM(require("react"));
+var import_react6 = __toESM(require("react"));
 
 // src/components/Input/styles.ts
 var StyledWrapper2 = styled("div", {
@@ -1274,15 +1281,15 @@ var Span2 = styled("span", {
 
 // src/components/Input/index.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var Input2 = (0, import_react5.forwardRef)(
+var Input2 = (0, import_react6.forwardRef)(
   ({ prefix, suffix, label, errorMessage, noMargin = false, ...props }, forwardedRef) => {
-    const localInputRef = (0, import_react5.useRef)(null);
+    const localInputRef = (0, import_react6.useRef)(null);
     const inputRef = forwardedRef || localInputRef;
     const handleContainerClick = () => {
       inputRef?.current?.focus();
     };
     const isButtonElement = (node) => {
-      if (!import_react5.default.isValidElement(node))
+      if (!import_react6.default.isValidElement(node))
         return false;
       const type = node.type;
       return type?.displayName === "Button";
@@ -1374,11 +1381,11 @@ var datePickerStyles = globalCss({
 var import_jsx_runtime20 = require("react/jsx-runtime");
 datePickerStyles();
 var Datepicker = ({ label, value, onChange }) => {
-  const [selected, setSelected] = (0, import_react6.useState)(void 0);
-  const [month, setMonth] = (0, import_react6.useState)(/* @__PURE__ */ new Date());
-  const [open, setOpen] = (0, import_react6.useState)(false);
-  const inputRef = (0, import_react6.useRef)(null);
-  const calendarRef = (0, import_react6.useRef)(null);
+  const [selected, setSelected] = (0, import_react7.useState)(void 0);
+  const [month, setMonth] = (0, import_react7.useState)(/* @__PURE__ */ new Date());
+  const [open, setOpen] = (0, import_react7.useState)(false);
+  const inputRef = (0, import_react7.useRef)(null);
+  const calendarRef = (0, import_react7.useRef)(null);
   const handleDaySelect = (date) => {
     setSelected(date);
     if (date) {
@@ -1387,7 +1394,7 @@ var Datepicker = ({ label, value, onChange }) => {
     }
     setOpen(false);
   };
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (calendarRef.current && !calendarRef.current.contains(event.target) && inputRef.current && !inputRef.current.contains(event.target)) {
         setOpen(false);
@@ -1396,7 +1403,7 @@ var Datepicker = ({ label, value, onChange }) => {
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!open && selected) {
       setMonth(selected);
     }
@@ -1460,7 +1467,9 @@ var Datepicker = ({ label, value, onChange }) => {
 };
 
 // src/components/Hr.tsx
-var Hr = styled("hr", {
+var import_react8 = require("react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var StyledHr = styled("hr", {
   border: "none",
   height: "1px",
   width: "100%",
@@ -1475,20 +1484,24 @@ var Hr = styled("hr", {
     }
   }
 });
+var Hr = (0, import_react8.forwardRef)(function Hr2({ children, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(StyledHr, { ref, ...props, children });
+});
+Hr.displayName = "Hr";
 
 // src/components/Modal/index.tsx
 var Dialog2 = __toESM(require("@radix-ui/react-dialog"));
 
 // src/components/Modal/styles.ts
 var Dialog = __toESM(require("@radix-ui/react-dialog"));
-var import_react7 = require("@stitches/react");
-var StyledOverlay = (0, import_react7.styled)(Dialog.Overlay, {
+var import_react9 = require("@stitches/react");
+var StyledOverlay = (0, import_react9.styled)(Dialog.Overlay, {
   backgroundColor: "rgba(0, 0, 0, 0.5)",
   position: "fixed",
   inset: 0,
   zIndex: 999999999
 });
-var StyledContent = (0, import_react7.styled)(Dialog.Content, {
+var StyledContent = (0, import_react9.styled)(Dialog.Content, {
   position: "fixed",
   top: "50%",
   left: "50%",
@@ -1504,16 +1517,16 @@ var StyledContent = (0, import_react7.styled)(Dialog.Content, {
   zIndex: 1e9,
   fontFamily: "$default"
 });
-var Wrapper = (0, import_react7.styled)("div", {
+var Wrapper = (0, import_react9.styled)("div", {
   display: "flex",
   justifyContent: "space-between",
   alignItems: "center"
 });
-var StyledTitle = (0, import_react7.styled)(Dialog.Title, {
+var StyledTitle = (0, import_react9.styled)(Dialog.Title, {
   fontSize: "$lg",
   fontWeight: "bold"
 });
-var StyledClose = (0, import_react7.styled)(Dialog.Close, {
+var StyledClose = (0, import_react9.styled)(Dialog.Close, {
   all: "unset",
   position: "absolute",
   top: "16px",
@@ -1525,30 +1538,30 @@ var StyledClose = (0, import_react7.styled)(Dialog.Close, {
     color: "#333"
   }
 });
-var StyledDivider = (0, import_react7.styled)("hr", {
+var StyledDivider = (0, import_react9.styled)("hr", {
   width: "100%",
   border: "none",
   borderTop: "1px solid $gray_mid"
 });
 
 // src/components/Modal/index.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var Modal = ({ open, onOpenChange, title, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Dialog2.Root, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Dialog2.Portal, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(StyledOverlay, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(StyledContent, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Wrapper, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(StyledTitle, { children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(StyledClose, { asChild: true, "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { variant: "secondary", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon, { name: "Closed", size: 8 }) }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Dialog2.Root, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Dialog2.Portal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StyledOverlay, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(StyledContent, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Wrapper, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StyledTitle, { children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StyledClose, { asChild: true, "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { variant: "secondary", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: "Closed", size: 8 }) }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(StyledDivider, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StyledDivider, {}),
       children
     ] })
   ] }) });
 };
 
 // src/components/ProgressBar/index.tsx
-var import_react8 = require("react");
+var import_react10 = require("react");
 
 // src/components/ProgressBar/styles.ts
 var Progress = __toESM(require("@radix-ui/react-progress"));
@@ -1578,23 +1591,23 @@ var StyledIndicator = styled(Progress.Indicator, {
 });
 
 // src/components/ProgressBar/index.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var ProgressBar = ({ label, value = 0, max = 100, ...rest }) => {
-  const [progress2, setProgress] = (0, import_react8.useState)(0);
-  (0, import_react8.useEffect)(() => {
+  const [progress2, setProgress] = (0, import_react10.useState)(0);
+  (0, import_react10.useEffect)(() => {
     const timer = setTimeout(() => setProgress(value), 500);
     return () => clearTimeout(timer);
   }, [value]);
   const valueLabel = `${Math.round(progress2 / max * 100)}%`;
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(StyledWrapper3, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("label", { style: { fontSize: 16, alignSelf: "flex-start" }, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(StyledWrapper3, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("label", { style: { fontSize: 16, alignSelf: "flex-start" }, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       StyledRoot,
       {
         value: progress2,
         "aria-valuetext": valueLabel,
         ...rest,
-        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           StyledIndicator,
           {
             style: { transform: `translateX(-${100 - progress2}%)` }
@@ -1698,7 +1711,7 @@ var Span3 = styled("span", {
 });
 
 // src/components/Radio/index.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var Radio = ({
   labels,
   value,
@@ -1707,8 +1720,8 @@ var Radio = ({
   required = false,
   errorMessage
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("form", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("form", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       StyledRoot2,
       {
         value,
@@ -1717,27 +1730,27 @@ var Radio = ({
         disabled,
         required,
         loop: true,
-        children: labels.map((label, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Wrapper2, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        children: labels.map((label, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Wrapper2, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             StyledItem,
             {
               value: label,
               id: `radio-${index}`,
               "aria-label": label,
               hasError: !!errorMessage,
-              children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(StyledIndicator2, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(StyledIndicator2, {})
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ItemLabel, { htmlFor: `radio-${index}`, children: label })
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ItemLabel, { htmlFor: `radio-${index}`, children: label })
         ] }, label))
       }
     ),
-    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Span3, { children: errorMessage })
+    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Span3, { children: errorMessage })
   ] });
 };
 
 // src/components/Spacing.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var spacingMap = {
   xs: 8,
   sm: 12,
@@ -1749,7 +1762,7 @@ var spacingMap = {
 };
 var Spacing = ({ size, axis = "vertical" }) => {
   const style = axis === "vertical" ? { height: spacingMap[size], width: "100%" } : { width: spacingMap[size], height: "100%" };
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { style, "data-testid": `spacing-${size}-${axis}` });
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { style, "data-testid": `spacing-${size}-${axis}` });
 };
 
 // src/components/Switch/styles.ts
@@ -1847,7 +1860,7 @@ var Span4 = styled("span", {
 });
 
 // src/components/Switch/index.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var Switch2 = ({
   label,
   checked,
@@ -1858,9 +1871,9 @@ var Switch2 = ({
   id,
   errorMessage
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Wrapper3, { hasError: !!errorMessage, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Wrapper3, { hasError: !!errorMessage, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         StyledRoot3,
         {
           id,
@@ -1870,17 +1883,17 @@ var Switch2 = ({
           hasError: !!errorMessage,
           disabled,
           required,
-          children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(StyledThumb, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(StyledThumb, {})
         }
       ),
-      label && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Label2, { htmlFor: id, children: label })
+      label && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Label2, { htmlFor: id, children: label })
     ] }),
-    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Span4, { children: errorMessage })
+    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Span4, { children: errorMessage })
   ] });
 };
 
 // src/components/Tabs/index.tsx
-var import_react9 = require("react");
+var import_react11 = require("react");
 
 // src/components/Tabs/styles.ts
 var Tabs = __toESM(require("@radix-ui/react-tabs"));
@@ -1961,23 +1974,23 @@ var TabsContent = styled(Tabs.Content, {
 });
 
 // src/components/Tabs/index.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var TabsItem = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_jsx_runtime26.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_jsx_runtime27.Fragment, { children });
 };
 var Tabs2 = ({ defaultValue, colorContent, children }) => {
   const items = [];
-  const childrenArray = import_react9.Children.toArray(children);
+  const childrenArray = import_react11.Children.toArray(children);
   childrenArray.forEach((child) => {
-    if ((0, import_react9.isValidElement)(child) && child.type === TabsItem) {
+    if ((0, import_react11.isValidElement)(child) && child.type === TabsItem) {
       const { value, label, children: content } = child.props;
       items.push({ value, label, children: content });
     }
   });
-  const listRef = (0, import_react9.useRef)(null);
-  const rootRef = (0, import_react9.useRef)(null);
-  const hasOverflowRef = (0, import_react9.useRef)(false);
-  const [hasOverflow, setHasOverflow] = (0, import_react9.useState)(false);
+  const listRef = (0, import_react11.useRef)(null);
+  const rootRef = (0, import_react11.useRef)(null);
+  const hasOverflowRef = (0, import_react11.useRef)(false);
+  const [hasOverflow, setHasOverflow] = (0, import_react11.useState)(false);
   const checkOverflow = () => {
     const listEl = listRef.current;
     const rootEl = rootRef.current;
@@ -1992,7 +2005,7 @@ var Tabs2 = ({ defaultValue, colorContent, children }) => {
       setHasOverflow(overflow);
     }
   };
-  (0, import_react9.useLayoutEffect)(() => {
+  (0, import_react11.useLayoutEffect)(() => {
     checkOverflow();
     const resizeObserver = new ResizeObserver(checkOverflow);
     if (listRef.current) {
@@ -2013,28 +2026,28 @@ var Tabs2 = ({ defaultValue, colorContent, children }) => {
       });
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
     TabsRoot,
     {
       defaultValue: defaultValue || items[0]?.value,
       ref: rootRef,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-          hasOverflow && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+          hasOverflow && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             Button,
             {
               variant: "secondary",
               size: "sm",
               onClick: () => scroll("left"),
-              children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon, { name: "TriangleLeft", size: 64 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon, { name: "TriangleLeft", size: 64 })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             TabsList,
             {
               ref: listRef,
               scrollable: hasOverflow,
-              children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+              children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                 TabsTrigger,
                 {
                   value: item.value,
@@ -2045,17 +2058,17 @@ var Tabs2 = ({ defaultValue, colorContent, children }) => {
               ))
             }
           ),
-          hasOverflow && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          hasOverflow && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             Button,
             {
               variant: "secondary",
               size: "sm",
               onClick: () => scroll("right"),
-              children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon, { name: "TriangleRight", size: 64 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon, { name: "TriangleRight", size: 64 })
             }
           )
         ] }),
-        items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           TabsContent,
           {
             colorContent,
@@ -2071,7 +2084,7 @@ var Tabs2 = ({ defaultValue, colorContent, children }) => {
 Tabs2.Item = TabsItem;
 
 // src/components/TextArea.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var Wrapper4 = styled("div", {
   display: "flex",
   flexDirection: "column"
@@ -2148,10 +2161,10 @@ var Span5 = styled("span", {
 });
 var TextArea = ({ label, id, htmlFor, errorMessage, ...props }) => {
   const textAreaId = id || htmlFor || `textarea-${crypto.randomUUID()}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Wrapper4, { children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(StyledLabel2, { htmlFor: textAreaId, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TextAreaElement, { id: textAreaId, ...props, hasError: !!errorMessage }),
-    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Span5, { children: errorMessage })
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Wrapper4, { children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(StyledLabel2, { htmlFor: textAreaId, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TextAreaElement, { id: textAreaId, ...props, hasError: !!errorMessage }),
+    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Span5, { children: errorMessage })
   ] });
 };
 TextArea.displayName = "TextArea";
@@ -2207,7 +2220,7 @@ var TooltipArrow = styled(RadixTooltip.Arrow, {
 });
 
 // src/components/Tooltip/index.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var Tooltip = ({
   content,
   children,
@@ -2217,19 +2230,16 @@ var Tooltip = ({
   onOpenChange,
   delayDuration = 100
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(RadixTooltip2.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(RadixTooltip2.Root, { open, onOpenChange, delayDuration, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TooltipTrigger, { asChild: true, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(TooltipContent, { side, sideOffset, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(RadixTooltip2.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(RadixTooltip2.Root, { open, onOpenChange, delayDuration, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TooltipTrigger, { asChild: true, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(TooltipContent, { side, sideOffset, children: [
       content,
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TooltipArrow, {})
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TooltipArrow, {})
     ] })
   ] }) });
 };
 Tooltip.displayName = "Tooltip";
 
-// src/components/Loader/index.tsx
-var import_react10 = require("react");
-
 // src/components/Loader/style.ts
 var Content4 = styled("div", {
   position: "relative",
@@ -2246,13 +2256,16 @@ var Overlay2 = styled("div", {
   alignItems: "center",
   backgroundColor: "rgba(255, 255, 255, 0.6)",
   zIndex: 999,
+  transition: "opacity 0.3s ease-in-out",
   variants: {
     show: {
       true: {
-        opacity: 1
+        opacity: 1,
+        pointerEvents: "auto"
       },
       false: {
-        opacity: 0
+        opacity: 0,
+        pointerEvents: "none"
       }
     },
     fullscreen: {
@@ -2264,7 +2277,11 @@ var Overlay2 = styled("div", {
         bottom: 0
       },
       false: {
-        position: "absolute"
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%"
       }
     }
   }
@@ -2301,33 +2318,14 @@ var Spinner = styled("span", {
 });
 
 // src/components/Loader/index.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
-var Loader = ({ show, fullscreen }) => {
-  const ref = (0, import_react10.useRef)(null);
-  const [parentRect, setParentRect] = (0, import_react10.useState)(null);
-  (0, import_react10.useEffect)(() => {
-    if (!fullscreen && ref.current?.parentElement) {
-      const rect = ref.current.parentElement.getBoundingClientRect();
-      setParentRect(rect);
-    }
-  }, [fullscreen, show]);
-  if (!show)
-    return null;
-  const overlayStyles = fullscreen ? { position: "fixed", top: 0, left: 0, right: 0, bottom: 0 } : parentRect ? {
-    top: parentRect.top + window.scrollY,
-    left: parentRect.left + window.scrollX,
-    width: parentRect.width,
-    height: parentRect.height
-  } : {};
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { ref, style: { display: "none" } }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Overlay2, { show: true, fullscreen, style: overlayStyles, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SpinnerContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Spinner, {}) }) })
-  ] });
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var Loader = ({ show, fullscreen = false }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Overlay2, { show, fullscreen, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SpinnerContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Spinner, {}) }) });
 };
 Loader.displayName = "Loader";
 
 // src/components/MaskedInput/index.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 
 // src/components/MaskedInput/utils.ts
 var MAX_LENGTHS = {
@@ -2391,11 +2389,11 @@ var applyMask = (value, maskType) => {
 };
 
 // src/components/MaskedInput/index.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var MaskedInput = (0, import_react11.forwardRef)(
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var MaskedInput = (0, import_react12.forwardRef)(
   ({ maskType, onChange, ...props }, ref) => {
-    const [value, setValue] = (0, import_react11.useState)("");
-    const inputRef = (0, import_react11.useRef)(null);
+    const [value, setValue] = (0, import_react12.useState)("");
+    const inputRef = (0, import_react12.useRef)(null);
     const handleChange = (e) => {
       const { value: inputValue, selectionStart } = e.target;
       const isBackspace = value.length > inputValue.length;
@@ -2428,7 +2426,7 @@ var MaskedInput = (0, import_react11.forwardRef)(
         onChange(syntheticEvent);
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       Input2,
       {
         ...props,
@@ -2443,7 +2441,7 @@ var MaskedInput = (0, import_react11.forwardRef)(
 MaskedInput.displayName = "MaskedInput";
 
 // src/components/Box.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var StyledBox = styled("div", {
   padding: "$5",
   borderRadius: "$md",
@@ -2465,13 +2463,13 @@ var StyledBox = styled("div", {
   }
 });
 var Box = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(StyledBox, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(StyledBox, { ...props });
 };
 Box.displayName = "Box";
 
-// src/components/Text.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
-var StyledText = styled("p", {
+// src/components/Paragraph.tsx
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var StyledParagraph = styled("p", {
   fontFamily: "$default",
   lineHeight: "$short",
   margin: 0,
@@ -2510,13 +2508,15 @@ var StyledText = styled("p", {
     lineHeight: "short"
   }
 });
-var Text = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(StyledText, { ...props });
+var Paragraph = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(StyledParagraph, { ...props });
 };
-Text.displayName = "Text";
+Paragraph.displayName = "Paragraph";
 
 // src/components/Heading.tsx
-var Heading = styled("h2", {
+var import_react13 = require("react");
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var StyledHeading = styled("h2", {
   fontFamily: "$default",
   lineHeight: "$shorter",
   margin: 0,
@@ -2537,12 +2537,15 @@ var Heading = styled("h2", {
     size: "md"
   }
 });
+var Heading = (0, import_react13.forwardRef)(function Heading2({ children, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(StyledHeading, { ref, ...props, children });
+});
 Heading.displayName = "Heading";
 
 // src/components/Select/index.tsx
 var import_react_icons2 = require("@radix-ui/react-icons");
 var CustomSelect = __toESM(require("@radix-ui/react-select"));
-var import_react12 = require("react");
+var import_react14 = require("react");
 
 // src/components/Select/styles.ts
 var Select = __toESM(require("@radix-ui/react-select"));
@@ -2564,7 +2567,7 @@ var StyledTrigger = styled(Select.Trigger, {
   alignItems: "center",
   justifyContent: "space-between",
   marginBottom: "$6",
-  padding: "$3 $4",
+  padding: "$4 $4",
   boxSizing: "border-box",
   borderRadius: "$md",
   border: "1px solid $gray_mid",
@@ -2659,7 +2662,7 @@ var Span6 = styled("span", {
 });
 
 // src/components/Select/index.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function Select2({
   value,
   onValueChange,
@@ -2669,10 +2672,10 @@ function Select2({
   errorMessage,
   ...rest
 }) {
-  const [open, setOpen] = (0, import_react12.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(StyledWrapper4, { children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Label3, { children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  const [open, setOpen] = (0, import_react14.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(StyledWrapper4, { children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Label3, { children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
       CustomSelect.Root,
       {
         value,
@@ -2680,21 +2683,21 @@ function Select2({
         onOpenChange: setOpen,
         ...rest,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(StyledTrigger, { "aria-label": label, hasError: !!errorMessage, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CustomSelect.Value, { placeholder }),
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(StyledIcon, { open, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_icons2.TriangleDownIcon, {}) })
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(StyledTrigger, { "aria-label": label, hasError: !!errorMessage, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CustomSelect.Value, { placeholder }),
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(StyledIcon, { open, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_icons2.TriangleDownIcon, {}) })
           ] }),
-          errorMessage && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Span6, { children: errorMessage }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CustomSelect.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+          errorMessage && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Span6, { children: errorMessage }),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CustomSelect.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
             StyledContent2,
             {
               side: "bottom",
               align: "start",
               position: "popper",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CustomSelect.ScrollUpButton, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_icons2.TriangleUpIcon, {}) }),
-                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(StyledViewport, { children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(StyledItem2, { value: item.value, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CustomSelect.ItemText, { children: item.label }) }, item.value)) }),
-                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CustomSelect.ScrollDownButton, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_icons2.TriangleDownIcon, {}) })
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CustomSelect.ScrollUpButton, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_icons2.TriangleUpIcon, {}) }),
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(StyledViewport, { children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(StyledItem2, { value: item.value, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CustomSelect.ItemText, { children: item.label }) }, item.value)) }),
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CustomSelect.ScrollDownButton, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_icons2.TriangleDownIcon, {}) })
               ]
             }
           ) })
@@ -2706,7 +2709,7 @@ function Select2({
 Select2.displayName = "Select";
 
 // src/components/LabelledValue/index.tsx
-var import_react13 = require("react");
+var import_react15 = require("react");
 
 // src/components/LabelledValue/styles.ts
 var Container = styled("div", {
@@ -2767,19 +2770,19 @@ var Value2 = styled("div", {
 });
 
 // src/components/LabelledValue/index.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function LabelledValue({ position = "vertical", withRow = false, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Container, { position, children: import_react13.Children.map(children, (child) => {
-    if ((0, import_react13.isValidElement)(child)) {
-      return (0, import_react13.cloneElement)(child, { position, withRow });
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Container, { position, children: import_react15.Children.map(children, (child) => {
+    if ((0, import_react15.isValidElement)(child)) {
+      return (0, import_react15.cloneElement)(child, { position, withRow });
     }
     return child;
   }) });
 }
 function Item3({ label, value, position = "vertical", withRow = false }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(ItemWrapper, { position, withRow, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Label4, { children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Value2, { children: value })
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(ItemWrapper, { position, withRow, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Label4, { children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Value2, { children: value })
   ] });
 }
 LabelledValue.Item = Item3;
@@ -2789,18 +2792,29 @@ var OneTimePasswordField2 = __toESM(require("@radix-ui/react-one-time-password-f
 
 // src/components/OneTimePassword/styles.ts
 var OneTimePasswordField = __toESM(require("@radix-ui/react-one-time-password-field"));
-var StyledWrapper5 = styled("div", {
+var Container2 = styled("div", {
   display: "flex",
   flexDirection: "column",
   justifyContent: "center",
   alignItems: "center",
-  gap: "$5",
-  marginBottom: "$6"
+  marginBottom: "$6",
+  width: "100%"
 });
-var StyledRoot4 = styled(OneTimePasswordField.Root, {
+var StyledWrapper5 = styled("div", {
   display: "flex",
+  flexDirection: "column"
+});
+var StyledRoot4 = styled(OneTimePasswordField.Root, {
+  display: "grid",
   gap: "$2",
-  flexWrap: "nowrap"
+  gridTemplateColumns: "repeat(var(--otp-length), 1fr)",
+  width: "100%"
+});
+var StyledLabel3 = styled(OneTimePasswordField.Root, {
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  marginBottom: "$5"
 });
 var StyledInput = styled(OneTimePasswordField.Input, {
   all: "unset",
@@ -2812,13 +2826,14 @@ var StyledInput = styled(OneTimePasswordField.Input, {
   boxSizing: "border-box",
   borderRadius: "$md",
   borderStyle: "solid",
-  borderColor: "#C2C2C2",
+  borderColor: "$gray_mid",
   borderWidth: "3px",
   fontSize: "$md",
   color: "$black",
   padding: "0",
-  height: "50px",
-  width: "53px",
+  width: "100%",
+  aspectRatio: "1 / 1",
+  maxWidth: "53px",
   "&:hover": {
     borderColor: "$gray_dark"
   },
@@ -2826,25 +2841,37 @@ var StyledInput = styled(OneTimePasswordField.Input, {
     borderColor: "$clickpalm_mid"
   }
 });
+var Span7 = styled("span", {
+  fontFamily: "$default",
+  fontWeight: "$regular",
+  fontSize: "$sm",
+  color: "$danger_dark",
+  alignSelf: "flex-start",
+  paddingLeft: "1px",
+  marginTop: "2px",
+  marginBottom: "$6"
+});
 
 // src/components/OneTimePassword/index.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
-var OneTimePassword = ({ label, length, value, onValueChange, ...rootProps }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(StyledWrapper5, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("label", { children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var OneTimePassword = ({ label, length, value, errorMessage, onValueChange, ...rootProps }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Container2, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(StyledWrapper5, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(StyledLabel3, { children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
       StyledRoot4,
       {
         value,
         onValueChange,
         ...rootProps,
+        style: { "--otp-length": length },
         children: [
-          Array.from({ length }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(StyledInput, {}, index)),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(OneTimePasswordField2.HiddenInput, {})
+          Array.from({ length }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(StyledInput, {}, index)),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(OneTimePasswordField2.HiddenInput, {})
         ]
       }
-    )
-  ] });
+    ),
+    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Span7, { children: errorMessage })
+  ] }) });
 };
 OneTimePassword.displayName = "OneTimePasswordInput";
 
@@ -3013,7 +3040,7 @@ var toast = {
 };
 
 // src/components/Toast/index.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var Toast = () => {
   const [messages, setMessages] = React3.useState([]);
   const [paused, setPaused] = React3.useState(false);
@@ -3029,8 +3056,8 @@ var Toast = () => {
   const removeToast = (id) => {
     setMessages((prev) => prev.filter((msg) => msg.id !== id));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(ToastPrimitive2.Provider, { swipeDirection: "right", children: [
-    messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(ToastPrimitive2.Provider, { swipeDirection: "right", children: [
+    messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
       ToastRoot,
       {
         open: true,
@@ -3043,11 +3070,11 @@ var Toast = () => {
         onPause: () => setPaused(true),
         onResume: () => setPaused(false),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(ToastContent, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ToastTitle, { children: message.title }),
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ToastDescription, { children: message.description })
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(ToastContent, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ToastTitle, { children: message.title }),
+            message.description && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ToastDescription, { children: message.description })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ToastAction, { altText: "Fechar", asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ToastAction, { altText: "Fechar", asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             "button",
             {
               style: {
@@ -3057,15 +3084,15 @@ var Toast = () => {
                 alignItems: "center"
               },
               onClick: () => removeToast(message.id),
-              children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Icon, { name: "Closed", size: 16, height: 14, width: 14 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Icon, { name: "Closed", size: 16, height: 14, width: 14 })
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ToastProgress, { paused, variant: message.variant })
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ToastProgress, { paused, variant: message.variant })
         ]
       },
       message.id
     )),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ToastViewport, {})
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ToastViewport, {})
   ] });
 };
 
@@ -3077,7 +3104,8 @@ var Wrapper5 = styled("div", {
   variants: {
     orientation: {
       horizontal: {
-        flexDirection: "row",
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fit, minmax(100px, 1fr))",
         alignItems: "center",
         gap: "var(--gap)"
       },
@@ -3095,12 +3123,11 @@ var StepItem = styled("div", {
   variants: {
     orientation: {
       horizontal: {
-        flex: 1,
         flexDirection: "column",
         textAlign: "center"
       },
       vertical: {
-        margin: "$4 0",
+        margin: "$2 0",
         flexDirection: "row"
       }
     }
@@ -3108,7 +3135,7 @@ var StepItem = styled("div", {
 });
 var StepCircle = styled("div", {
   position: "relative",
-  zIndex: 999,
+  zIndex: 990,
   width: "var(--circle-size)",
   height: "var(--circle-size)",
   borderRadius: "50%",
@@ -3139,7 +3166,7 @@ var StepCircle = styled("div", {
           left: "50%",
           transform: "translate(-50%, -100%)",
           width: "3px",
-          height: "$6",
+          height: "$4",
           backgroundColor: "$clickpalm_dark"
         },
         "&::after": {
@@ -3149,7 +3176,7 @@ var StepCircle = styled("div", {
           left: "50%",
           transform: "translate(-50%, 100%)",
           width: "3px",
-          height: "$6",
+          height: "$4",
           backgroundColor: "$clickpalm_dark"
         }
       }
@@ -3301,22 +3328,22 @@ var StepLabel = styled("span", {
 });
 
 // src/components/MultiStep/index.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var MultiStep = ({
   steps,
   currentStep,
   orientation = "horizontal",
   variant
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     Wrapper5,
     {
       orientation,
       children: steps.map((step, index) => {
         const isFirst = index === 0;
         const isLast = index === steps.length - 1;
-        return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(StepItem, { orientation, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(StepItem, { orientation, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
             StepCircle,
             {
               orientation,
@@ -3327,7 +3354,7 @@ var MultiStep = ({
               children: index + 1
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
             StepLabel,
             {
               orientation,
@@ -3343,7 +3370,7 @@ var MultiStep = ({
 MultiStep.displayName = "MultiStep";
 
 // src/components/Carousel/index.tsx
-var import_react14 = require("react");
+var import_react16 = require("react");
 
 // src/components/Carousel/styles.ts
 var CarouselContainer = styled("div", {
@@ -3449,13 +3476,13 @@ var CarouselItemContainer = styled("div", {
 });
 
 // src/components/Carousel/index.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var SWIPE_THRESHOLD = 50;
 var Carousel = ({ title, variant, children }) => {
-  const items = import_react14.Children.toArray(children);
-  const [activeIndex, setActiveIndex] = (0, import_react14.useState)(0);
-  const [touchStartX, setTouchStartX] = (0, import_react14.useState)(null);
-  const [touchEndX, setTouchEndX] = (0, import_react14.useState)(null);
+  const items = import_react16.Children.toArray(children);
+  const [activeIndex, setActiveIndex] = (0, import_react16.useState)(0);
+  const [touchStartX, setTouchStartX] = (0, import_react16.useState)(null);
+  const [touchEndX, setTouchEndX] = (0, import_react16.useState)(null);
   const prev = () => {
     setActiveIndex((prevIndex) => prevIndex === 0 ? items.length - 1 : prevIndex - 1);
   };
@@ -3483,18 +3510,18 @@ var Carousel = ({ title, variant, children }) => {
     setTouchStartX(null);
     setTouchEndX(null);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
     CarouselContainer,
     {
       role: "region",
       "aria-roledescription": "carousel",
       "aria-label": "Carousel Component",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Wrapper6, { variant, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(CarouselHeader, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Title2, { children: title }),
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Navigation, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(Wrapper6, { variant, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(CarouselHeader, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Title2, { children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(Navigation, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                 Button,
                 {
                   size: "sm",
@@ -3502,10 +3529,10 @@ var Carousel = ({ title, variant, children }) => {
                   "aria-label": "Previous Slide",
                   onClick: prev,
                   tabIndex: 0,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Icon, { name: "TriangleLeft", size: 16, color: variant === "purple" ? "white" : "black" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Icon, { name: "TriangleLeft", size: 16, color: variant === "purple" ? "white" : "black" })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                 Button,
                 {
                   size: "sm",
@@ -3513,22 +3540,22 @@ var Carousel = ({ title, variant, children }) => {
                   "aria-label": "Previous Slide",
                   onClick: next,
                   tabIndex: 0,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Icon, { name: "TriangleRight", size: 16, color: variant === "purple" ? "white" : "black" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Icon, { name: "TriangleRight", size: 16, color: variant === "purple" ? "white" : "black" })
                 }
               )
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Spacing, { size: "xs" }),
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Hr, { variant }),
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Spacing, { size: "xs" }),
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Spacing, { size: "xs" }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Hr, { variant }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Spacing, { size: "xs" }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
             CarouselContent,
             {
               onTouchStart,
               onTouchMove,
               onTouchEnd,
               children: items.map(
-                (child, index) => (0, import_react14.cloneElement)(child, {
+                (child, index) => (0, import_react16.cloneElement)(child, {
                   "aria-hidden": index !== activeIndex,
                   style: {
                     display: index === activeIndex ? "block" : "none"
@@ -3538,8 +3565,8 @@ var Carousel = ({ title, variant, children }) => {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Spacing, { size: "md" }),
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DotsContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Dots2, { role: "tablist", "aria-label": "Carousel Pagination", children: items.map((_, idx) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Spacing, { size: "md" }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(DotsContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Dots2, { role: "tablist", "aria-label": "Carousel Pagination", children: items.map((_, idx) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           DotButton,
           {
             active: idx === activeIndex,
@@ -3555,17 +3582,31 @@ var Carousel = ({ title, variant, children }) => {
     }
   );
 };
-var CarouselItem = ({ children, style, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CarouselItemContainer, { ...props, style: { ...style }, children });
+var CarouselItem = ({ children, style, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(CarouselItemContainer, { ...props, style: { ...style }, children });
 Carousel.Item = CarouselItem;
 
 // src/components/PasswordInput.tsx
-var import_react15 = require("react");
-var import_jsx_runtime39 = require("react/jsx-runtime");
-var PasswordInput = (0, import_react15.forwardRef)(
+var import_react17 = require("react");
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var ToggleButton = styled("button", {
+  all: "unset",
+  cursor: "pointer",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  borderRadius: "$sm",
+  padding: "2px",
+  "&:focus-visible": {
+    outline: "none",
+    boxShadow: "0 0 0 2px $colors$ignite_light",
+    borderRadius: "$sm"
+  }
+});
+var PasswordInput = (0, import_react17.forwardRef)(
   ({ value, onChange, ...props }, ref) => {
-    const [visible, setVisible] = (0, import_react15.useState)(false);
-    const innerRef = (0, import_react15.useRef)(null);
-    (0, import_react15.useImperativeHandle)(ref, () => innerRef.current);
+    const [visible, setVisible] = (0, import_react17.useState)(false);
+    const innerRef = (0, import_react17.useRef)(null);
+    (0, import_react17.useImperativeHandle)(ref, () => innerRef.current);
     const handleToggleVisibility = () => {
       setVisible((v) => !v);
       setTimeout(() => {
@@ -3575,7 +3616,7 @@ var PasswordInput = (0, import_react15.forwardRef)(
         }
       }, 0);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       Input2,
       {
         ...props,
@@ -3583,21 +3624,14 @@ var PasswordInput = (0, import_react15.forwardRef)(
         type: visible ? "text" : "password",
         value,
         onChange,
-        suffix: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-          "button",
+        suffix: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          ToggleButton,
           {
             type: "button",
             onClick: handleToggleVisibility,
             onMouseDown: (e) => e.preventDefault(),
-            style: {
-              all: "unset",
-              cursor: "pointer",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center"
-            },
             "aria-label": visible ? "Ocultar senha" : "Mostrar senha",
-            children: visible ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Icon, { name: "EyeClosed", size: 16, color: "black" }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Icon, { name: "EyeOpen", size: 16, color: "black" })
+            children: visible ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon, { name: "EyeClosed", size: 16, color: "black" }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon, { name: "EyeOpen", size: 16, color: "black" })
           }
         )
       }
@@ -3624,15 +3658,16 @@ PasswordInput.displayName = "PasswordInput";
   Modal,
   MultiStep,
   OneTimePassword,
+  Paragraph,
   PasswordInput,
   ProgressBar,
   Radio,
   Select,
   Spacing,
   Span,
+  StyledHr,
   Switch,
   Tabs,
-  Text,
   TextArea,
   TextAreaElement,
   Toast,