@clickpalm/react 1.0.0

package/dist/index.mjs

@@ -0,0 +1,3342 @@
+// ../tokens/dist/index.mjs
+var colors = {
+  white: "#FFF",
+  black: "#000",
+  gray_background: "#EFEFEF",
+  gray_light: "#D9D9D9",
+  gray_mid: "#C2C2C2",
+  gray_dark: "#979797",
+  clickpalm_light: "#8987E6",
+  clickpalm_mid: "#8556E5",
+  clickpalm_dark: "#854FE8",
+  clickpalm_superDark: "#4A307F",
+  ignite_light: "#78CB63",
+  ignite_dark: "#518D42",
+  success: "#84FF8A",
+  success_dark: "#3EBF4A",
+  warning: "#FCD842",
+  warning_dark: "#C9A600",
+  danger: "#FF8173",
+  danger_dark: "#C94A3F"
+};
+var space = {
+  1: "0.25rem",
+  2: "0.5rem",
+  3: "0.75rem",
+  4: "1rem",
+  5: "1.25rem",
+  6: "1.5rem",
+  7: "1.75rem",
+  8: "2rem",
+  10: "2.5rem",
+  11: "2.75rem",
+  12: "3rem",
+  14: "3.5rem",
+  16: "4rem",
+  19: "4.75rem",
+  20: "5rem",
+  22: "6rem",
+  40: "10rem",
+  64: "16rem",
+  80: "20rem"
+};
+var radii = {
+  px: "1px",
+  xs: "4px",
+  sm: "6px",
+  md: "8px",
+  lg: "16px",
+  full: "99999px"
+};
+var fonts = {
+  default: "Nunito, sans-serif",
+  code: "monospace"
+};
+var fontSizes = {
+  xxs: "0.625rem",
+  xs: "0.75rem",
+  sm: "0.875rem",
+  md: "1rem",
+  lg: "1.125rem",
+  xl: "1.25rem",
+  "2xl": "1.5rem",
+  "4xl": "2rem",
+  "5xl": "2.25rem",
+  "6xl": "3rem",
+  "7xl": "4rem",
+  "8xl": "4.5rem",
+  "9xl": "6rem"
+};
+var fontWeights = {
+  regular: "400",
+  medium: "500",
+  bold: "700"
+};
+var lineHeights = {
+  regular: "100%",
+  shorter: "125%",
+  short: "140%",
+  base: "160%",
+  tall: "180%"
+};
+
+// src/styles/stitches.config.ts
+import { createStitches, defaultThemeMap } from "@stitches/react";
+var {
+  styled,
+  css,
+  globalCss,
+  keyframes,
+  getCssText,
+  theme,
+  createTheme,
+  config
+} = createStitches({
+  themeMap: {
+    ...defaultThemeMap,
+    height: "space",
+    width: "space"
+  },
+  theme: {
+    colors,
+    fontSizes,
+    fontWeights,
+    fonts,
+    lineHeights,
+    radii,
+    space
+  },
+  media: {
+    sm: "(min-width: 375px)",
+    md: "(min-width: 768px)",
+    lg: "(min-width: 1024px)"
+  }
+});
+
+// src/components/Avatar/styles.ts
+import * as Avatar from "@radix-ui/react-avatar";
+var AvatarContainer = styled(Avatar.Root, {
+  borderRadius: "$full",
+  display: "inline-block",
+  overflow: "hidden",
+  borderWidth: "3px",
+  borderStyle: "solid",
+  boxSizing: "border-box",
+  variants: {
+    size: {
+      sm: { width: "$11", height: "$11" },
+      md: { width: "$14", height: "$14" },
+      lg: { width: "$19", height: "$19" },
+      xlg: { width: "$22", height: "$22" }
+    },
+    status: {
+      default: { borderColor: "$white" },
+      warning: { borderColor: "$warning" },
+      error: { borderColor: "$danger" },
+      success: { borderColor: "$success" },
+      completed: { borderColor: "$clickpalm_dark" }
+    },
+    shadow: {
+      true: { boxShadow: "0 2px 4px $colors$gray_dark" }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    status: "default"
+  }
+});
+var AvatarImage = styled(Avatar.Image, {
+  width: "100%",
+  height: "100%",
+  objectFit: "cover",
+  borderRadius: "inherit"
+});
+var AvatarFallback = styled(Avatar.Fallback, {
+  width: "100%",
+  height: "100%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: "$gray_background",
+  color: "$black",
+  fontWeight: "$bold",
+  fontSize: "$sm"
+});
+var NotificationBadge = styled("div", {
+  position: "absolute",
+  transform: "translate(50%, 50%)",
+  backgroundColor: "$ignite_light",
+  color: "$black",
+  fontWeight: "$bold",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  borderRadius: "$full",
+  border: "1px solid $white",
+  boxSizing: "border-box",
+  zIndex: 1,
+  variants: {
+    size: {
+      sm: {
+        width: "20px",
+        height: "20px",
+        fontSize: "8px",
+        bottom: 18,
+        right: 4
+      },
+      md: {
+        width: "20px",
+        height: "20px",
+        fontSize: "10px",
+        bottom: 20,
+        right: 5
+      },
+      lg: {
+        width: "30px",
+        height: "30px",
+        fontSize: "11px",
+        bottom: 25,
+        right: 8
+      },
+      xlg: {
+        width: "30px",
+        height: "30px",
+        fontSize: "12px",
+        bottom: 25,
+        right: 8
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+
+// src/components/Avatar/index.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Avatar2({
+  fallback,
+  className,
+  style,
+  size = "md",
+  status = "default",
+  notifications = 0,
+  shadow = false,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("div", { style: { position: "relative", display: "inline-block" }, children: [
+    /* @__PURE__ */ jsxs(AvatarContainer, { className, style, size, status, shadow, children: [
+      /* @__PURE__ */ jsx(AvatarImage, { ...props }),
+      /* @__PURE__ */ jsx(AvatarFallback, { children: fallback })
+    ] }),
+    notifications > 0 && /* @__PURE__ */ jsx(NotificationBadge, { size, children: notifications > 99 ? "99+" : notifications })
+  ] });
+}
+Avatar2.displayName = "Avatar";
+
+// src/components/Calendar/index.tsx
+import { format } from "date-fns";
+import { ptBR } from "date-fns/locale";
+import { useEffect, useState } from "react";
+import { DayPicker } from "react-day-picker";
+import "react-day-picker/dist/style.css";
+
+// src/components/Button.tsx
+import { forwardRef } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var StyledButton = styled("button", {
+  all: "unset",
+  borderRadius: "$md",
+  fontWeight: "$bold",
+  fontFamily: "$default",
+  textAlign: "center",
+  boxSizing: "border-box",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "$2",
+  cursor: "pointer",
+  svg: {
+    width: "$4",
+    height: "$4"
+  },
+  "&:disabled": {
+    cursor: "not-allowed"
+  },
+  "&:focus": {
+    outline: "none"
+  },
+  variants: {
+    variant: {
+      primary: {
+        color: "$white",
+        backgroundImage: "linear-gradient(to bottom, $ignite_light, $ignite_dark)",
+        "&:not(:disabled):hover": {
+          background: "$ignite_dark"
+        },
+        "&:disabled": {
+          opacity: "0.6"
+        }
+      },
+      secondary: {
+        color: "$clickpalm_mid",
+        border: "2px solid $ignite_light",
+        "&:not(:disabled):hover": {
+          border: "2px solid $ignite_dark"
+        },
+        "&:disabled": {
+          opacity: "0.6"
+        }
+      },
+      tertiary: {
+        color: "$ignite_light",
+        border: "3px solid $clickpalm_mid",
+        "&:not(:disabled):hover": {
+          color: "$ignite_dark"
+        },
+        "&:disabled": {
+          opacity: "0.6"
+        }
+      }
+    },
+    size: {
+      xs: {},
+      sm: {
+        height: 33,
+        padding: "0 $2",
+        fontSize: "$md"
+      },
+      md: {
+        height: 53,
+        padding: "0 $4",
+        fontSize: "$md"
+      },
+      lg: {
+        height: 70,
+        padding: "0 $6",
+        fontSize: "$2xl"
+      }
+    },
+    full: {
+      true: {
+        width: "100%"
+      }
+    },
+    round: {
+      md: {
+        height: 53,
+        width: 53,
+        padding: "0 $4",
+        borderRadius: "50%"
+      },
+      lg: {
+        height: 70,
+        width: 70,
+        padding: "0 $6",
+        borderRadius: "50%"
+      },
+      xlg: {
+        height: 160,
+        width: 160,
+        padding: "0 $8",
+        borderRadius: "50%"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "primary",
+    size: "md"
+  }
+});
+var Button = forwardRef(function Button2({ children, ...props }, ref) {
+  return /* @__PURE__ */ jsx2(StyledButton, { ref, ...props, children });
+});
+Button.displayName = "Button";
+
+// src/components/Icon/icons.ts
+import {
+  TriangleDownIcon as TriangleDown,
+  TriangleUpIcon as TriangleUp,
+  TriangleLeftIcon as TriangleLeft,
+  TriangleRightIcon as TriangleRight,
+  EyeClosedIcon as EyeClosed,
+  EyeOpenIcon as EyeOpen
+} from "@radix-ui/react-icons";
+
+// src/components/Icon/Svgs/Calendar.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Calendar = (props) => /* @__PURE__ */ jsx3(
+  "svg",
+  {
+    width: "18",
+    height: "21",
+    viewBox: "0 0 18 21",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: /* @__PURE__ */ jsx3(
+      "path",
+      {
+        d: "M6 14.6113C5.3 14.6113 4.70833 14.3697 4.225 13.8863C3.74167 13.403 3.5 12.8113 3.5 12.1113C3.5 11.4113 3.74167 10.8197 4.225 10.3363C4.70833 9.85299 5.3 9.61133 6 9.61133C6.7 9.61133 7.29167 9.85299 7.775 10.3363C8.25833 10.8197 8.5 11.4113 8.5 12.1113C8.5 12.8113 8.25833 13.403 7.775 13.8863C7.29167 14.3697 6.7 14.6113 6 14.6113ZM2 20.1113C1.45 20.1113 0.979167 19.9155 0.5875 19.5238C0.195833 19.1322 0 18.6613 0 18.1113V4.11133C0 3.56133 0.195833 3.09049 0.5875 2.69883C0.979167 2.30716 1.45 2.11133 2 2.11133H3V0.111328H5V2.11133H13V0.111328H15V2.11133H16C16.55 2.11133 17.0208 2.30716 17.4125 2.69883C17.8042 3.09049 18 3.56133 18 4.11133V18.1113C18 18.6613 17.8042 19.1322 17.4125 19.5238C17.0208 19.9155 16.55 20.1113 16 20.1113H2ZM2 18.1113H16V8.11133H2V18.1113Z",
+        fill: "currentColor"
+      }
+    )
+  }
+);
+
+// src/components/Icon/Svgs/Closed.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Closed = (props) => {
+  return /* @__PURE__ */ jsx4(
+    "svg",
+    {
+      width: "14",
+      height: "15",
+      viewBox: "0 0 14 15",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: /* @__PURE__ */ jsx4(
+        "path",
+        {
+          d: "M1.4 14.5L0 13.1L5.6 7.5L0 1.9L1.4 0.5L7 6.1L12.6 0.5L14 1.9L8.4 7.5L14 13.1L12.6 14.5L7 8.9L1.4 14.5Z",
+          fill: "currentColor"
+        }
+      )
+    }
+  );
+};
+
+// src/components/Icon/Svgs/Dots.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Dots = (props) => {
+  return /* @__PURE__ */ jsx5(
+    "svg",
+    {
+      width: "16",
+      height: "5",
+      viewBox: "0 0 16 5",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: /* @__PURE__ */ jsx5(
+        "path",
+        {
+          d: "M2 4.36865C1.45 4.36865 0.979167 4.17282 0.5875 3.78115C0.195833 3.38949 0 2.91865 0 2.36865C0 1.81865 0.195833 1.34782 0.5875 0.956152C0.979167 0.564486 1.45 0.368652 2 0.368652C2.55 0.368652 3.02083 0.564486 3.4125 0.956152C3.80417 1.34782 4 1.81865 4 2.36865C4 2.91865 3.80417 3.38949 3.4125 3.78115C3.02083 4.17282 2.55 4.36865 2 4.36865ZM8 4.36865C7.45 4.36865 6.97917 4.17282 6.5875 3.78115C6.19583 3.38949 6 2.91865 6 2.36865C6 1.81865 6.19583 1.34782 6.5875 0.956152C6.97917 0.564486 7.45 0.368652 8 0.368652C8.55 0.368652 9.02083 0.564486 9.4125 0.956152C9.80417 1.34782 10 1.81865 10 2.36865C10 2.91865 9.80417 3.38949 9.4125 3.78115C9.02083 4.17282 8.55 4.36865 8 4.36865ZM14 4.36865C13.45 4.36865 12.9792 4.17282 12.5875 3.78115C12.1958 3.38949 12 2.91865 12 2.36865C12 1.81865 12.1958 1.34782 12.5875 0.956152C12.9792 0.564486 13.45 0.368652 14 0.368652C14.55 0.368652 15.0208 0.564486 15.4125 0.956152C15.8042 1.34782 16 1.81865 16 2.36865C16 2.91865 15.8042 3.38949 15.4125 3.78115C15.0208 4.17282 14.55 4.36865 14 4.36865Z",
+          fill: "currentColor"
+        }
+      )
+    }
+  );
+};
+
+// src/components/Icon/Svgs/Filter.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var Filter = (props) => {
+  return /* @__PURE__ */ jsx6(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "32",
+      height: "32",
+      fill: "currentColor",
+      viewBox: "0 0 256 256",
+      ...props,
+      children: /* @__PURE__ */ jsx6("path", { d: "M234.29,47.91A20,20,0,0,0,216,36H40A20,20,0,0,0,25.2,69.45l.12.14L92,140.75V216a20,20,0,0,0,31.1,16.64l32-21.33A20,20,0,0,0,164,194.66V140.75l66.67-71.16.12-.14A20,20,0,0,0,234.29,47.91Zm-91,79.89A12,12,0,0,0,140,136v56.52l-24,16V136a12,12,0,0,0-3.25-8.2L49.23,60H206.77Z" })
+    }
+  );
+};
+
+// src/components/Icon/Svgs/Hamburger.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var Hamburger = (props) => {
+  return /* @__PURE__ */ jsx7(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "32",
+      height: "32",
+      fill: "currentColor",
+      viewBox: "0 0 256 256",
+      ...props,
+      children: /* @__PURE__ */ jsx7("path", { d: "M228,128a12,12,0,0,1-12,12H40a12,12,0,0,1,0-24H216A12,12,0,0,1,228,128ZM40,76H216a12,12,0,0,0,0-24H40a12,12,0,0,0,0,24ZM216,180H40a12,12,0,0,0,0,24H216a12,12,0,0,0,0-24Z" })
+    }
+  );
+};
+
+// src/components/Icon/Svgs/Pencil.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var Pencil = (props) => {
+  return /* @__PURE__ */ jsx8(
+    "svg",
+    {
+      width: "18",
+      height: "19",
+      viewBox: "0 0 18 19",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: /* @__PURE__ */ jsx8(
+        "path",
+        {
+          d: "M2 16.9287H3.425L13.2 7.15371L11.775 5.72871L2 15.5037V16.9287ZM0 18.9287V14.6787L13.2 1.50371C13.4 1.32038 13.6208 1.17871 13.8625 1.07871C14.1042 0.978711 14.3583 0.928711 14.625 0.928711C14.8917 0.928711 15.15 0.978711 15.4 1.07871C15.65 1.17871 15.8667 1.32871 16.05 1.52871L17.425 2.92871C17.625 3.11204 17.7708 3.32871 17.8625 3.57871C17.9542 3.82871 18 4.07871 18 4.32871C18 4.59538 17.9542 4.84954 17.8625 5.09121C17.7708 5.33288 17.625 5.55371 17.425 5.75371L4.25 18.9287H0ZM12.475 6.45371L11.775 5.72871L13.2 7.15371L12.475 6.45371Z",
+          fill: "currentColor"
+        }
+      )
+    }
+  );
+};
+
+// src/components/Icon/Svgs/Photo.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var Photo = (props) => {
+  return /* @__PURE__ */ jsx9(
+    "svg",
+    {
+      width: "18",
+      height: "18",
+      viewBox: "0 0 18 18",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: /* @__PURE__ */ jsx9(
+        "path",
+        {
+          d: "M2 18C1.45 18 0.975 17.8083 0.575 17.425C0.191667 17.025 0 16.55 0 16V2C0 1.45 0.191667 0.983334 0.575 0.600001C0.975 0.2 1.45 0 2 0H16C16.55 0 17.0167 0.2 17.4 0.600001C17.8 0.983334 18 1.45 18 2V16C18 16.55 17.8 17.025 17.4 17.425C17.0167 17.8083 16.55 18 16 18H2ZM2 16H16V2H2V16ZM3 14H15L11.25 9L8.25 13L6 10L3 14ZM2 16V2V16Z",
+          fill: "currentColor"
+        }
+      )
+    }
+  );
+};
+
+// src/components/Icon/Svgs/Plus.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var Plus = (props) => {
+  return /* @__PURE__ */ jsx10(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: /* @__PURE__ */ jsx10(
+        "path",
+        {
+          d: "M8.58301 11.4167H0.0830078V8.58334H8.58301V0.0833435H11.4163V8.58334H19.9163V11.4167H11.4163V19.9167H8.58301V11.4167Z",
+          fill: "currentColor"
+        }
+      )
+    }
+  );
+};
+
+// src/components/Icon/Svgs/Search.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+var Search = (props) => {
+  return /* @__PURE__ */ jsx11(
+    "svg",
+    {
+      width: "18",
+      height: "18",
+      viewBox: "0 0 18 18",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: /* @__PURE__ */ jsx11(
+        "path",
+        {
+          d: "M16.6 18L10.3 11.7C9.8 12.1 9.225 12.4167 8.575 12.65C7.925 12.8833 7.23333 13 6.5 13C4.68333 13 3.14583 12.3708 1.8875 11.1125C0.629167 9.85417 0 8.31667 0 6.5C0 4.68333 0.629167 3.14583 1.8875 1.8875C3.14583 0.629167 4.68333 0 6.5 0C8.31667 0 9.85417 0.629167 11.1125 1.8875C12.3708 3.14583 13 4.68333 13 6.5C13 7.23333 12.8833 7.925 12.65 8.575C12.4167 9.225 12.1 9.8 11.7 10.3L18 16.6L16.6 18ZM6.5 11C7.75 11 8.8125 10.5625 9.6875 9.6875C10.5625 8.8125 11 7.75 11 6.5C11 5.25 10.5625 4.1875 9.6875 3.3125C8.8125 2.4375 7.75 2 6.5 2C5.25 2 4.1875 2.4375 3.3125 3.3125C2.4375 4.1875 2 5.25 2 6.5C2 7.75 2.4375 8.8125 3.3125 9.6875C4.1875 10.5625 5.25 11 6.5 11Z",
+          fill: "currentColor"
+        }
+      )
+    }
+  );
+};
+
+// src/components/Icon/Svgs/ChevronLeft.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+var ChevronLeft = (props) => {
+  return /* @__PURE__ */ jsx12(
+    "svg",
+    {
+      width: "8",
+      height: "12",
+      viewBox: "0 0 8 12",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: /* @__PURE__ */ jsx12(
+        "path",
+        {
+          d: "M6 12L0 6L6 0L7.4 1.4L2.8 6L7.4 10.6L6 12Z",
+          fill: "currentColor"
+        }
+      )
+    }
+  );
+};
+
+// src/components/Icon/Svgs/ChevronRight.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+var ChevronRight = (props) => {
+  return /* @__PURE__ */ jsx13(
+    "svg",
+    {
+      width: "8",
+      height: "12",
+      viewBox: "0 0 8 12",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: /* @__PURE__ */ jsx13(
+        "path",
+        {
+          d: "M4.6 6L0 1.4L1.4 0L7.4 6L1.4 12L0 10.6L4.6 6Z",
+          fill: "currentColor"
+        }
+      )
+    }
+  );
+};
+
+// src/components/Icon/Svgs/Check.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+var Check = (props) => {
+  return /* @__PURE__ */ jsx14(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "18",
+      height: "13",
+      viewBox: "0 0 18 13",
+      fill: "none",
+      ...props,
+      children: /* @__PURE__ */ jsx14(
+        "path",
+        {
+          d: "M6.55001 13L0.850006 7.3L2.27501 5.875L6.55001 10.15L15.725 0.975L17.15 2.4L6.55001 13Z",
+          fill: "currentColor"
+        }
+      )
+    }
+  );
+};
+
+// src/components/Icon/icons.ts
+var iconMap = {
+  TriangleDown,
+  TriangleUp,
+  TriangleLeft,
+  TriangleRight,
+  EyeClosed,
+  EyeOpen,
+  Calendar,
+  Closed,
+  Dots,
+  Filter,
+  Hamburger,
+  Pencil,
+  Photo,
+  Plus,
+  Search,
+  ChevronLeft,
+  ChevronRight,
+  Check
+};
+
+// src/components/Icon/index.tsx
+import { useMemo } from "react";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var colorMap = {
+  black: "#000000",
+  green: "#78CB63",
+  white: "#ffffff"
+};
+function Icon({ name, size = 24, color = "black", ...rest }) {
+  const IconComponent = iconMap[name];
+  if (!IconComponent) {
+    console.warn(`Icon "${name}" not found in iconMap`);
+    return null;
+  }
+  const fillColor = useMemo(() => colorMap[color], [color]);
+  return /* @__PURE__ */ jsx15(
+    IconComponent,
+    {
+      width: size,
+      height: size,
+      color: fillColor,
+      "aria-hidden": true,
+      ...rest
+    }
+  );
+}
+Icon.displayName = "Icon";
+
+// src/components/Calendar/styles.ts
+var calendarStyles = globalCss({
+  ".calendar-root": {
+    "--rdp-accent-color": theme.colors.clickpalm_light,
+    "--rdp-accent-background-color": theme.colors.clickpalm_light,
+    "--rdp-day-height": "45px",
+    "--rdp-day-width": "45px",
+    "--rdp-day_button-border-radius": theme.radii.md.value,
+    "--rdp-day_button-border": "2px solid transparent",
+    "--rdp-day_button-height": "40px",
+    "--rdp-day_button-width": "40px",
+    "--rdp-selected-border": "2px solid var(--rdp-accent-color)",
+    "--rdp-disabled-opacity": "0.5",
+    "--rdp-outside-opacity": "1",
+    "--rdp-today-color": theme.colors.clickpalm_light,
+    "--rdp-dropdown-gap": "0.5rem",
+    "--rdp-months-gap": "2rem",
+    "--rdp-nav_button-disabled-opacity": "0.5",
+    "--rdp-nav_button-height": "36px",
+    "--rdp-nav_button-width": "36px",
+    "--rdp-nav-height": "44px",
+    "--rdp-range_middle-background-color": "var(--rdp-accent-background-color)",
+    "--rdp-range_middle-color": "inherit",
+    "--rdp-range_start-color": "white",
+    "--rdp-range_start-background": "linear-gradient(var(--rdp-gradient-direction), transparent 50%, var(--rdp-range_middle-background-color) 50%)",
+    "--rdp-range_start-date-background-color": "var(--rdp-accent-color)",
+    "--rdp-range_end-background": "linear-gradient(var(--rdp-gradient-direction), var(--rdp-range_middle-background-color) 50%, transparent 50%)",
+    "--rdp-range_end-color": "white",
+    "--rdp-range_end-date-background-color": "var(--rdp-accent-color)",
+    "--rdp-weekday-opacity": "1",
+    "--rdp-weekday-padding": "0.5rem 0",
+    "--rdp-weekday-text-align": "center",
+    "--rdp-gradient-direction": "90deg",
+    "--rdp-animation_duration": "0.3s",
+    "--rdp-animation_timing": "cubic-bezier(0.4, 0, 0.2, 1)",
+    padding: theme.space[3],
+    border: `1px solid ${theme.colors.gray_light}`,
+    borderRadius: theme.radii.md.value,
+    maxWidth: "329px",
+    paddingLeft: "15px"
+  },
+  '.calendar-root[dir="rtl"]': {
+    "--rdp-gradient-direction": "-90deg"
+  },
+  '.calendar-root[data-broadcast-calendar="true"]': {
+    "--rdp-outside-opacity": "unset"
+  },
+  '.calendar-root[dir="rtl"] .rdp-nav .rdp-chevron': {
+    transform: "rotate(180deg)",
+    transformOrigin: "50%"
+  },
+  '.calendar-root[data-nav-layout="around"] .rdp-month': {
+    position: "relative"
+  },
+  '.calendar-root[data-nav-layout="after"] .rdp-month': {
+    position: "relative"
+  },
+  '.calendar-root[data-nav-layout="around"] .calendar-month_caption': {
+    justifyContent: "center",
+    marginInlineStart: "var(--rdp-nav_button-width)",
+    marginInlineEnd: "var(--rdp-nav_button-width)",
+    position: "relative"
+  },
+  '.calendar-root[data-nav-layout="around"] .rdp-button_previous': {
+    position: "absolute",
+    insetInlineStart: 0,
+    top: 0,
+    height: "var(--rdp-nav-height)",
+    display: "inline-flex"
+  },
+  '.calendar-root[data-nav-layout="around"] .rdp-button_next': {
+    position: "absolute",
+    insetInlineEnd: 0,
+    top: 0,
+    height: "var(--rdp-nav-height)",
+    display: "inline-flex",
+    justifyContent: "center"
+  },
+  '.calendar-root[dir="rtl"] .rdp-weeks_after_enter': {
+    animation: "rdp-slide_in_left var(--rdp-animation_duration) var(--rdp-animation_timing) forwards"
+  },
+  '.calendar-root[dir="rtl"] .rdp-weeks_before_exit': {
+    animation: "rdp-slide_out_right var(--rdp-animation_duration) var(--rdp-animation_timing) forwards"
+  },
+  '.calendar-root[dir="rtl"] .rdp-weeks_before_enter': {
+    animation: "rdp-slide_in_right var(--rdp-animation_duration) var(--rdp-animation_timing) forwards"
+  },
+  '.calendar-root[dir="rtl"] .rdp-weeks_after_exit': {
+    animation: "rdp-slide_out_left var(--rdp-animation_duration) var(--rdp-animation_timing) forwards"
+  },
+  ".calendar-month_caption": {
+    paddingLeft: "2px",
+    display: "flex",
+    alignItems: "center",
+    height: "var(--rdp-nav-height)",
+    fontWeight: "$bold",
+    fontSize: "$lg"
+  },
+  ".calendar-caption_label": {
+    paddingLeft: "$3",
+    zIndex: 1,
+    position: "relative",
+    display: "flex",
+    alignItems: "center",
+    whiteSpace: "nowrap"
+  },
+  ".calendar-root-collapsed": {
+    minWidth: "329px",
+    position: "relative"
+  },
+  ".calendar-root-collapsed .rdp-weekdays": {
+    display: "none"
+  },
+  ".calendar-root-collapsed .rdp-day": {
+    display: "none"
+  },
+  ".calendar-root-collapsed .rdp-months": {
+    minHeight: "var(--rdp-nav-height)",
+    position: "relative",
+    display: "flex",
+    flexWrap: "wrap",
+    gap: "var(--rdp-months-gap)",
+    maxWidth: "100%"
+  },
+  ".calendar-root-collapsed .rdp-nav": {
+    position: "absolute",
+    top: 0,
+    right: 0,
+    display: "flex",
+    alignItems: "center",
+    height: "var(--rdp-nav-height)"
+  },
+  ".rdp-dropdown:focus-visible ~ .calendar-caption_label": {
+    outline: "5px auto Highlight",
+    WebkitOutline: "5px auto -webkit-focus-ring-color"
+  },
+  ".rdp-nav": {
+    gap: "$1",
+    paddingRight: "6px"
+  },
+  ".rdp-weekday": {
+    fontFamily: theme.fonts.default,
+    fontWeight: theme.fontWeights.bold,
+    paddingRight: "6px"
+  },
+  ".rdp-day_button": {
+    background: theme.colors.gray_background,
+    color: theme.colors.black,
+    fontFamily: theme.fonts.default,
+    fontWeight: theme.fontWeights.bold,
+    fontSize: theme.fontSizes.md,
+    "&:hover": {
+      border: `2px solid ${theme.colors.clickpalm_light}`
+    },
+    "&:focus": {
+      border: `2px solid ${theme.colors.clickpalm_light}`,
+      outline: "none"
+    }
+  },
+  ".rdp-outside .rdp-day_button": {
+    fontFamily: theme.fonts.default,
+    background: theme.colors.gray_mid,
+    color: theme.colors.black
+  },
+  ".rdp-selected .rdp-day_button": {
+    background: theme.colors.clickpalm_light,
+    color: theme.colors.white
+  }
+});
+var StyledButton2 = styled("div", {
+  display: "flex",
+  alignItems: "center",
+  transition: "transform 0.4s ease",
+  variants: {
+    isOpen: {
+      true: {
+        transform: "rotate(180deg)"
+      },
+      false: {
+        transform: "rotate(0deg)"
+      }
+    }
+  }
+});
+var StyledLabel = styled("label", {
+  color: "$black",
+  fontFamily: "$default",
+  fontSize: "$md",
+  fontWeight: "$bold",
+  display: "flex",
+  marginBottom: "$6"
+});
+
+// src/components/Calendar/index.tsx
+import { jsx as jsx16, jsxs as jsxs2 } from "react/jsx-runtime";
+calendarStyles();
+var Calendar2 = ({ label, onChange }) => {
+  const [selected, setSelected] = useState(void 0);
+  const [month, setMonth] = useState(/* @__PURE__ */ new Date());
+  const [open, setOpen] = useState(true);
+  const handleDaySelect = (date) => {
+    setSelected(date);
+    if (date) {
+      const formatted = format(date, "dd/MM/yyyy");
+      onChange(formatted);
+    }
+  };
+  useEffect(() => {
+    if (selected) {
+      setMonth(selected);
+    }
+  }, [selected]);
+  return /* @__PURE__ */ jsxs2("div", { children: [
+    /* @__PURE__ */ jsx16(StyledLabel, { children: label }),
+    /* @__PURE__ */ jsx16(
+      DayPicker,
+      {
+        className: !open ? "calendar-root-collapsed" : "",
+        mode: "single",
+        selected,
+        onSelect: handleDaySelect,
+        month,
+        onMonthChange: setMonth,
+        locale: ptBR,
+        showOutsideDays: true,
+        classNames: {
+          root: "calendar-root",
+          month_caption: "calendar-month_caption",
+          caption_label: "calendar-caption_label"
+        },
+        formatters: {
+          formatCaption: (month2, options) => {
+            const mes = format(month2, "MMMM", options).replace(/^./, (c) => c.toUpperCase());
+            const ano = format(month2, "yyyy", options);
+            return `${mes} de ${ano}`;
+          },
+          formatWeekdayName: (date, options) => {
+            const dia = format(date, "EEEEEE", options);
+            return dia.charAt(0).toUpperCase() + dia.slice(1);
+          }
+        },
+        components: {
+          MonthCaption: ({ calendarMonth, displayIndex, ...safeprops }) => {
+            const displayMonth = calendarMonth.date;
+            return /* @__PURE__ */ jsxs2("div", { ...safeprops, children: [
+              /* @__PURE__ */ jsx16("div", { children: /* @__PURE__ */ jsx16(
+                Button,
+                {
+                  variant: "secondary",
+                  size: "sm",
+                  onClick: () => setOpen(!open),
+                  children: /* @__PURE__ */ jsx16(StyledButton2, { isOpen: open, children: /* @__PURE__ */ jsx16(Icon, { name: "TriangleUp", size: 16 }) })
+                }
+              ) }),
+              /* @__PURE__ */ jsx16("div", { className: "calendar-month_caption", children: /* @__PURE__ */ jsx16("div", { className: "calendar-caption_label", role: "heading", "aria-level": 2, children: format(displayMonth, "MMMM 'de' yyyy", { locale: ptBR }).replace(/^./, (c) => c.toUpperCase()) }) })
+            ] });
+          },
+          PreviousMonthButton: (props) => /* @__PURE__ */ jsx16(Button, { size: "sm", variant: "secondary", ...props, children: /* @__PURE__ */ jsx16(Icon, { name: "TriangleLeft", size: 16 }) }),
+          NextMonthButton: (props) => /* @__PURE__ */ jsx16(Button, { size: "sm", variant: "secondary", ...props, children: /* @__PURE__ */ jsx16(Icon, { name: "TriangleRight", size: 16 }) })
+        }
+      }
+    )
+  ] });
+};
+
+// src/components/Checkbox/styles.ts
+import * as Checkbox from "@radix-ui/react-checkbox";
+var StyledWrapper = styled("div", {
+  display: "flex",
+  alignSelf: "flex-start",
+  alignItems: "center",
+  lineHeight: "150%",
+  variants: {
+    hasError: {
+      true: {
+        marginBottom: "0px",
+        "&:focus": {
+          border: "2px solid $danger_dark"
+        }
+      },
+      false: {
+        marginBottom: "$6"
+      }
+    }
+  }
+});
+var CheckboxContainer = styled(Checkbox.Root, {
+  all: "unset",
+  width: "$6",
+  height: "$6",
+  backgroundColor: "$white",
+  borderRadius: "$md",
+  lineHeight: 0,
+  cursor: "pointer",
+  overflow: "hidden",
+  boxSizing: "border-box",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  borderWidth: "3px",
+  borderStyle: "solid",
+  borderColor: "$gray_mid",
+  '&[data-state="checked"]': {
+    outline: "none",
+    backgroundColor: "$clickpalm_dark",
+    borderColor: "$clickpalm_dark"
+  },
+  "&:focus": {
+    outline: "none",
+    border: "2px solid $clickpalm_light"
+  },
+  "&:disabled": {
+    opacity: 0.5,
+    cursor: "not-allowed"
+  },
+  variants: {
+    hasError: {
+      true: {
+        borderColor: "$danger_dark",
+        marginBottom: "0px",
+        "&:focus, &:hover": {
+          outline: "none",
+          border: "4px solid $danger_dark"
+        },
+        '&[data-state="checked"]': {
+          outline: "none",
+          backgroundColor: "$danger_dark",
+          borderColor: "$danger_dark"
+        }
+      }
+    }
+  }
+});
+var slideIn = keyframes({
+  from: {
+    transform: "translateY(-100%)"
+  },
+  to: {
+    transform: "translateY(0)"
+  }
+});
+var slideOut = keyframes({
+  from: {
+    transform: "translateY(0)"
+  },
+  to: {
+    transform: "translateY(-100%)"
+  }
+});
+var CheckboxIndicator = styled(Checkbox.Indicator, {
+  color: "$white",
+  width: "$4",
+  height: "$4",
+  '&[data-state="checked"]': {
+    animation: `${slideIn} 200ms ease-out`
+  },
+  '&[data-state="unchecked"]': {
+    animation: `${slideOut} 200ms ease-out`
+  }
+});
+var CheckboxLabel = styled("label", {
+  display: "flex",
+  paddingLeft: "$3",
+  fontSize: "$md",
+  lineHeight: "$base"
+});
+var Span = styled("span", {
+  fontFamily: "$default",
+  fontWeight: "$regular",
+  fontSize: "$sm",
+  color: "$danger_dark",
+  alignSelf: "flex-start",
+  paddingLeft: "1px",
+  marginTop: "2px",
+  marginBottom: "$6"
+});
+
+// src/components/Checkbox/index.tsx
+import { jsx as jsx17, jsxs as jsxs3 } from "react/jsx-runtime";
+function Checkbox2({ label, checked, onCheckedChange, errorMessage, ...rest }) {
+  return /* @__PURE__ */ jsxs3("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" }, children: [
+    /* @__PURE__ */ jsxs3(StyledWrapper, { hasError: !!errorMessage, children: [
+      /* @__PURE__ */ jsx17(
+        CheckboxContainer,
+        {
+          checked,
+          onCheckedChange,
+          hasError: !!errorMessage,
+          ...rest,
+          children: /* @__PURE__ */ jsx17(CheckboxIndicator, { asChild: true, children: /* @__PURE__ */ jsx17(Icon, { name: "Check", size: 16 }) })
+        }
+      ),
+      /* @__PURE__ */ jsx17(CheckboxLabel, { children: label })
+    ] }),
+    errorMessage && /* @__PURE__ */ jsx17(Span, { children: errorMessage })
+  ] });
+}
+Checkbox2.displayName = "Checkbox";
+
+// src/components/Datepicker/index.tsx
+import { format as format2 } from "date-fns";
+import { ptBR as ptBR2 } from "date-fns/locale";
+import { useEffect as useEffect2, useRef as useRef3, useState as useState2 } from "react";
+import { DayPicker as DayPicker2 } from "react-day-picker";
+import "react-day-picker/dist/style.css";
+
+// src/components/Input/index.tsx
+import React, { forwardRef as forwardRef2, useRef as useRef2 } from "react";
+
+// src/components/Input/styles.ts
+var StyledWrapper2 = styled("div", {
+  display: "flex",
+  flexDirection: "column"
+});
+var Label = styled("label", {
+  fontSize: "$md",
+  fontWeight: "$regular",
+  alignSelf: "flex-start",
+  marginBottom: "$2",
+  paddingLeft: "1px",
+  color: "$black"
+});
+var TextInputContainer = styled("div", {
+  backgroundColor: "$white",
+  borderRadius: "$md",
+  boxSizing: "border-box",
+  border: "1px solid $gray_mid",
+  display: "flex",
+  alignItems: "center",
+  padding: "$4 $4",
+  marginBottom: "$6",
+  FontSize: "$md",
+  "&:has(input:focus)": {
+    border: "2px solid $clickpalm_light"
+  },
+  "&:has(input:disabled)": {
+    opacity: 0.5,
+    cursor: "not-allowed"
+  },
+  variants: {
+    hasButtonSuffix: {
+      true: {
+        paddingTop: "10px",
+        paddingBottom: "10px"
+      }
+    },
+    noMargin: {
+      true: { marginBottom: "0px" }
+    },
+    hasError: {
+      true: {
+        border: "1px solid $danger_dark",
+        marginBottom: "0px",
+        "&:has(input:focus)": {
+          border: "2px solid $danger_dark"
+        }
+      }
+    }
+  }
+});
+var Prefix = styled("span", {
+  fontFamily: "$default",
+  fontSize: "$sm",
+  color: "$gray_light",
+  fontWeight: "regular"
+});
+var Input = styled("input", {
+  fontFamily: "$default",
+  fontSize: "$md",
+  color: "$black",
+  fontWeight: "regular",
+  background: "transparent",
+  border: 0,
+  width: "100%",
+  "&:focus": {
+    outline: 0
+  },
+  "&:disabled": {
+    cursor: "not-allowed",
+    opacity: 0.5
+  },
+  "&::placeholder": {
+    color: "$gray_mid"
+  }
+});
+var Suffix = styled("div", {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  marginLeft: "$2",
+  color: "$gray_light"
+});
+var Span2 = styled("span", {
+  fontFamily: "$default",
+  fontWeight: "$regular",
+  fontSize: "$sm",
+  color: "$danger_dark",
+  alignSelf: "flex-start",
+  paddingLeft: "1px",
+  marginTop: "2px",
+  marginBottom: "$6"
+});
+
+// src/components/Input/index.tsx
+import { jsx as jsx18, jsxs as jsxs4 } from "react/jsx-runtime";
+var Input2 = forwardRef2(
+  ({ prefix, suffix, label, errorMessage, noMargin = false, ...props }, forwardedRef) => {
+    const localInputRef = useRef2(null);
+    const inputRef = forwardedRef || localInputRef;
+    const handleContainerClick = () => {
+      inputRef?.current?.focus();
+    };
+    const isButtonElement = (node) => {
+      if (!React.isValidElement(node))
+        return false;
+      const type = node.type;
+      return type?.displayName === "Button";
+    };
+    return /* @__PURE__ */ jsxs4(StyledWrapper2, { children: [
+      label && /* @__PURE__ */ jsx18(Label, { children: label }),
+      /* @__PURE__ */ jsxs4(
+        TextInputContainer,
+        {
+          hasButtonSuffix: isButtonElement(suffix),
+          noMargin,
+          hasError: !!errorMessage,
+          onClick: handleContainerClick,
+          children: [
+            !!prefix && /* @__PURE__ */ jsx18(Prefix, { children: prefix }),
+            /* @__PURE__ */ jsx18(Input, { ref: inputRef, ...props }),
+            !!suffix && /* @__PURE__ */ jsx18(Suffix, { children: suffix })
+          ]
+        }
+      ),
+      errorMessage && /* @__PURE__ */ jsx18(Span2, { children: errorMessage })
+    ] });
+  }
+);
+Input2.displayName = "Input";
+
+// src/components/Datepicker/styles.ts
+var datePickerStyles = globalCss({
+  ".rdp-root": {
+    "--rdp-accent-color": theme.colors.clickpalm_light,
+    "--rdp-accent-background-color": theme.colors.clickpalm_light,
+    "--rdp-day-height": "45px",
+    "--rdp-day-width": "45px",
+    "--rdp-day_button-border-radius": theme.radii.md.value,
+    "--rdp-day_button-height": "40px",
+    "--rdp-day_button-width": "40px",
+    "--rdp-selected-border": "2px solid var(--rdp-accent-color)",
+    "--rdp-disabled-opacity": "0.5",
+    "--rdp-outside-opacity": "1",
+    "--rdp-today-color": theme.colors.clickpalm_light,
+    "--rdp-nav_button-disabled-opacity": "0.5",
+    "--rdp-nav_button-height": "36px",
+    "--rdp-nav_button-width": "36px",
+    "--rdp-nav-height": "44px",
+    "--rdp-weekday-opacity": "1",
+    "--rdp-weekday-padding": "0.5rem 0",
+    "--rdp-weekday-text-align": "center",
+    "--rdp-animation_duration": "0.3s",
+    "--rdp-animation_timing": "cubic-bezier(0.4, 0, 0.2, 1)",
+    padding: theme.space[3],
+    paddingLeft: "15px"
+  },
+  ".rdp-caption_label": {
+    paddingLeft: theme.space[1]
+  },
+  ".rdp-nav": {
+    gap: theme.space[1]
+  },
+  ".rdp-weekday": {
+    fontFamily: theme.fonts.default,
+    fontWeight: theme.fontWeights.bold
+  },
+  ".rdp-day_button": {
+    background: theme.colors.gray_background,
+    color: theme.colors.black,
+    fontFamily: theme.fonts.default,
+    fontWeight: theme.fontWeights.bold,
+    fontSize: theme.fontSizes.md,
+    "&:hover": {
+      border: `2px solid ${theme.colors.clickpalm_light}`
+    },
+    "&:focus": {
+      border: `2px solid ${theme.colors.clickpalm_light}`,
+      outline: "none"
+    }
+  },
+  ".rdp-outside .rdp-day_button": {
+    fontFamily: theme.fonts.default,
+    background: theme.colors.gray_mid,
+    color: theme.colors.black
+  },
+  ".rdp-selected .rdp-day_button": {
+    background: theme.colors.clickpalm_light,
+    color: theme.colors.white
+  }
+});
+
+// src/components/Datepicker/index.tsx
+import { jsx as jsx19, jsxs as jsxs5 } from "react/jsx-runtime";
+datePickerStyles();
+var Datepicker = ({ label, value, onChange }) => {
+  const [selected, setSelected] = useState2(void 0);
+  const [month, setMonth] = useState2(/* @__PURE__ */ new Date());
+  const [open, setOpen] = useState2(false);
+  const inputRef = useRef3(null);
+  const calendarRef = useRef3(null);
+  const handleDaySelect = (date) => {
+    setSelected(date);
+    if (date) {
+      const formatted = format2(date, "dd/MM/yyyy");
+      onChange(formatted);
+    }
+    setOpen(false);
+  };
+  useEffect2(() => {
+    const handleClickOutside = (event) => {
+      if (calendarRef.current && !calendarRef.current.contains(event.target) && inputRef.current && !inputRef.current.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  useEffect2(() => {
+    if (!open && selected) {
+      setMonth(selected);
+    }
+  }, [open, selected]);
+  return /* @__PURE__ */ jsxs5("div", { children: [
+    /* @__PURE__ */ jsx19(
+      Input2,
+      {
+        ref: inputRef,
+        label,
+        placeholder: "dd/mm/aaaa",
+        onFocus: () => setOpen(true),
+        value: value || "",
+        noMargin: true,
+        readOnly: true,
+        suffix: /* @__PURE__ */ jsx19(Icon, { name: "Calendar", size: 16 })
+      }
+    ),
+    open && /* @__PURE__ */ jsx19(
+      "div",
+      {
+        ref: calendarRef,
+        style: {
+          position: "absolute",
+          marginTop: "4px",
+          zIndex: 100,
+          backgroundColor: "#fff",
+          boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
+          borderRadius: "8px"
+        },
+        children: /* @__PURE__ */ jsx19(
+          DayPicker2,
+          {
+            mode: "single",
+            selected,
+            onSelect: handleDaySelect,
+            month,
+            onMonthChange: setMonth,
+            locale: ptBR2,
+            showOutsideDays: true,
+            formatters: {
+              formatCaption: (month2, options) => {
+                const mes = format2(month2, "MMMM", options).replace(/^./, (c) => c.toUpperCase());
+                const ano = format2(month2, "yyyy", options);
+                return `${mes} de ${ano}`;
+              },
+              formatWeekdayName: (date, options) => {
+                const dia = format2(date, "EEEEEE", options);
+                return dia.charAt(0).toUpperCase() + dia.slice(1);
+              }
+            },
+            components: {
+              PreviousMonthButton: (props) => /* @__PURE__ */ jsx19(Button, { size: "sm", variant: "secondary", ...props, children: /* @__PURE__ */ jsx19(Icon, { name: "TriangleLeft", size: 16 }) }),
+              NextMonthButton: (props) => /* @__PURE__ */ jsx19(Button, { size: "sm", variant: "secondary", ...props, children: /* @__PURE__ */ jsx19(Icon, { name: "TriangleRight", size: 16 }) })
+            }
+          }
+        )
+      }
+    )
+  ] });
+};
+
+// src/components/Hr.tsx
+var Hr = styled("hr", {
+  border: "none",
+  height: "1px",
+  width: "100%",
+  variants: {
+    variant: {
+      gray: {
+        backgroundColor: "$gray_mid"
+      },
+      purple: {
+        backgroundColor: "$clickpalm_light"
+      }
+    }
+  }
+});
+
+// src/components/Modal/index.tsx
+import * as Dialog2 from "@radix-ui/react-dialog";
+
+// src/components/Modal/styles.ts
+import * as Dialog from "@radix-ui/react-dialog";
+import { styled as styled2 } from "@stitches/react";
+var StyledOverlay = styled2(Dialog.Overlay, {
+  backgroundColor: "rgba(0, 0, 0, 0.5)",
+  position: "fixed",
+  inset: 0,
+  zIndex: 999999999
+});
+var StyledContent = styled2(Dialog.Content, {
+  position: "fixed",
+  top: "50%",
+  left: "50%",
+  display: "flex",
+  flexDirection: "column",
+  padding: "$4",
+  width: "90%",
+  maxWidth: "500px",
+  backgroundColor: "$white",
+  borderRadius: "$md",
+  boxShadow: "0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2)",
+  transform: "translate(-50%, -50%)",
+  zIndex: 1e9,
+  fontFamily: "$default"
+});
+var Wrapper = styled2("div", {
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center"
+});
+var StyledTitle = styled2(Dialog.Title, {
+  fontSize: "$lg",
+  fontWeight: "bold"
+});
+var StyledClose = styled2(Dialog.Close, {
+  all: "unset",
+  position: "absolute",
+  top: "16px",
+  right: "16px",
+  cursor: "pointer",
+  fontSize: "18px",
+  color: "#999",
+  "&:hover": {
+    color: "#333"
+  }
+});
+var StyledDivider = styled2("hr", {
+  width: "100%",
+  border: "none",
+  borderTop: "1px solid $gray_mid"
+});
+
+// src/components/Modal/index.tsx
+import { jsx as jsx20, jsxs as jsxs6 } from "react/jsx-runtime";
+var Modal = ({ open, onOpenChange, title, children }) => {
+  return /* @__PURE__ */ jsx20(Dialog2.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs6(Dialog2.Portal, { children: [
+    /* @__PURE__ */ jsx20(StyledOverlay, {}),
+    /* @__PURE__ */ jsxs6(StyledContent, { children: [
+      /* @__PURE__ */ jsxs6(Wrapper, { children: [
+        /* @__PURE__ */ jsx20(StyledTitle, { children: title }),
+        /* @__PURE__ */ jsx20(StyledClose, { asChild: true, "aria-label": "Close", children: /* @__PURE__ */ jsx20(Button, { variant: "secondary", size: "sm", children: /* @__PURE__ */ jsx20(Icon, { name: "Closed", size: 8 }) }) })
+      ] }),
+      /* @__PURE__ */ jsx20(StyledDivider, {}),
+      children
+    ] })
+  ] }) });
+};
+
+// src/components/ProgressBar/index.tsx
+import { useEffect as useEffect3, useState as useState3 } from "react";
+
+// src/components/ProgressBar/styles.ts
+import * as Progress from "@radix-ui/react-progress";
+var StyledWrapper3 = styled("div", {
+  display: "flex",
+  flexDirection: "column",
+  gap: "$2",
+  marginBottom: "$6"
+});
+var StyledRoot = styled(Progress.Root, {
+  position: "relative",
+  overflow: "hidden",
+  background: "$gray_background",
+  borderRadius: "$md",
+  border: "1px solid $gray_dark",
+  boxSizing: "border-box",
+  transform: "translateZ(0)",
+  width: "100%",
+  height: "10px"
+});
+var StyledIndicator = styled(Progress.Indicator, {
+  backgroundColor: "$ignite_light",
+  borderRadius: "$md",
+  height: "100%",
+  transition: "transform 660ms cubic-bezier(0.65, 0, 0.35, 1)",
+  transformOrigin: "left"
+});
+
+// src/components/ProgressBar/index.tsx
+import { jsx as jsx21, jsxs as jsxs7 } from "react/jsx-runtime";
+var ProgressBar = ({ label, value = 0, max = 100, ...rest }) => {
+  const [progress2, setProgress] = useState3(0);
+  useEffect3(() => {
+    const timer = setTimeout(() => setProgress(value), 500);
+    return () => clearTimeout(timer);
+  }, [value]);
+  const valueLabel = `${Math.round(progress2 / max * 100)}%`;
+  return /* @__PURE__ */ jsxs7(StyledWrapper3, { children: [
+    /* @__PURE__ */ jsx21("label", { style: { fontSize: 16, alignSelf: "flex-start" }, children: label }),
+    /* @__PURE__ */ jsx21(
+      StyledRoot,
+      {
+        value: progress2,
+        "aria-valuetext": valueLabel,
+        ...rest,
+        children: /* @__PURE__ */ jsx21(
+          StyledIndicator,
+          {
+            style: { transform: `translateX(-${100 - progress2}%)` }
+          }
+        )
+      }
+    )
+  ] });
+};
+ProgressBar.displayName = "ProgressBar";
+
+// src/components/Radio/styles.ts
+import * as RadioGroup from "@radix-ui/react-radio-group";
+var StyledRoot2 = styled(RadioGroup.Root, {
+  display: "flex",
+  flexDirection: "column",
+  gap: "$2",
+  cursor: "pointer",
+  variants: {
+    hasError: {
+      true: {
+        marginBottom: "0px",
+        "&:focus": {
+          border: "2px solid $danger_dark"
+        }
+      },
+      false: {
+        marginBottom: "$6"
+      }
+    }
+  }
+});
+var Wrapper2 = styled("div", {
+  display: "flex",
+  alignItems: "center"
+});
+var StyledItem = styled(RadioGroup.Item, {
+  all: "unset",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  width: "$5",
+  height: "$5",
+  borderRadius: "50%",
+  boxSizing: "border-box",
+  backgroundColor: "$clickpalm_dark",
+  '&[data-state="checked"]': {
+    backgroundColor: "$clickpalm_dark"
+  },
+  '&[data-state="unchecked"]': {
+    backgroundColor: "$white",
+    border: "2px solid $gray_dark"
+  },
+  "&:disabled": {
+    opacity: 0.5,
+    cursor: "not-allowed"
+  },
+  "&:focus": {
+    outline: "1px solid $clickpalm_light"
+  },
+  variants: {
+    hasError: {
+      true: {
+        borderColor: "$danger_dark",
+        marginBottom: "0px",
+        "&:focus": {
+          outline: "none",
+          border: "4px solid $danger_dark"
+        },
+        '&[data-state="unchecked"]': {
+          outline: "none",
+          border: "2px solid $danger_dark"
+        },
+        '&[data-state="checked"]': {
+          backgroundColor: "$danger_dark"
+        }
+      }
+    }
+  }
+});
+var StyledIndicator2 = styled(RadioGroup.Indicator, {
+  width: "$3",
+  height: "$3",
+  borderRadius: "50%",
+  backgroundColor: "$white"
+});
+var ItemLabel = styled("label", {
+  paddingLeft: "$3",
+  color: "$black",
+  cursor: "pointer"
+});
+var Span3 = styled("span", {
+  fontFamily: "$default",
+  fontWeight: "$regular",
+  fontSize: "$sm",
+  color: "$danger_dark",
+  alignSelf: "flex-start",
+  paddingLeft: "1px",
+  marginTop: "2px",
+  marginBottom: "$6"
+});
+
+// src/components/Radio/index.tsx
+import { jsx as jsx22, jsxs as jsxs8 } from "react/jsx-runtime";
+var Radio = ({
+  labels,
+  value,
+  onChange,
+  disabled = false,
+  required = false,
+  errorMessage
+}) => {
+  return /* @__PURE__ */ jsxs8("form", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" }, children: [
+    /* @__PURE__ */ jsx22(
+      StyledRoot2,
+      {
+        value,
+        onValueChange: onChange,
+        hasError: !!errorMessage,
+        disabled,
+        required,
+        loop: true,
+        children: labels.map((label, index) => /* @__PURE__ */ jsxs8(Wrapper2, { children: [
+          /* @__PURE__ */ jsx22(
+            StyledItem,
+            {
+              value: label,
+              id: `radio-${index}`,
+              "aria-label": label,
+              hasError: !!errorMessage,
+              children: /* @__PURE__ */ jsx22(StyledIndicator2, {})
+            }
+          ),
+          /* @__PURE__ */ jsx22(ItemLabel, { htmlFor: `radio-${index}`, children: label })
+        ] }, label))
+      }
+    ),
+    errorMessage && /* @__PURE__ */ jsx22(Span3, { children: errorMessage })
+  ] });
+};
+
+// src/components/Spacing.tsx
+import { jsx as jsx23 } from "react/jsx-runtime";
+var spacingMap = {
+  xs: 8,
+  sm: 12,
+  md: 16,
+  lg: 24,
+  xlg: 32,
+  xxlg: 40,
+  xxxlg: 64
+};
+var Spacing = ({ size, axis = "vertical" }) => {
+  const style = axis === "vertical" ? { height: spacingMap[size], width: "100%" } : { width: spacingMap[size], height: "100%" };
+  return /* @__PURE__ */ jsx23("div", { style, "data-testid": `spacing-${size}-${axis}` });
+};
+
+// src/components/Switch/styles.ts
+import * as Switch from "@radix-ui/react-switch";
+var Wrapper3 = styled("div", {
+  all: "unset",
+  display: "flex",
+  alignItems: "center",
+  variants: {
+    hasError: {
+      true: {
+        marginBottom: "0px"
+      },
+      false: {
+        marginBottom: "$6"
+      }
+    }
+  }
+});
+var Label2 = styled("label", {
+  paddingLeft: "$3",
+  color: "$black",
+  cursor: "pointer"
+});
+var StyledRoot3 = styled(Switch.Root, {
+  border: "none",
+  outline: "none",
+  boxShadow: "none",
+  position: "relative",
+  width: "$10",
+  height: "$5",
+  padding: "0 2px",
+  borderRadius: "30px",
+  boxSizing: "border-box",
+  WebkitTapHighlightColor: "rgba(0, 0, 0, 0)",
+  cursor: "pointer",
+  '&[data-state="checked"]': {
+    backgroundColor: "$clickpalm_dark"
+  },
+  '&[data-state="unchecked"]': {
+    backgroundColor: "$white",
+    border: "2px solid $gray_dark"
+  },
+  "&:disabled": {
+    opacity: 0.5,
+    cursor: "not-allowed"
+  },
+  "&:focus": {
+    outline: "1px solid $clickpalm_light"
+  },
+  variants: {
+    hasError: {
+      true: {
+        border: "2px solid $danger_dark",
+        marginBottom: "0px",
+        "&:focus": {
+          outline: "1px solid $danger_dark"
+        },
+        '&[data-state="unchecked"]': {
+          border: "2px solid $danger_dark"
+        }
+      }
+    }
+  }
+});
+var StyledThumb = styled(Switch.Thumb, {
+  position: "absolute",
+  top: "50%",
+  left: "2px",
+  borderRadius: "$full",
+  transition: "transform 100ms",
+  transform: "translateY(-50%)",
+  willChange: "transform",
+  '[data-state="checked"] &': {
+    width: "14px",
+    height: "14px",
+    backgroundColor: "$white",
+    transform: "translate(20px, -50%)"
+  },
+  '&[data-state="unchecked"]': {
+    width: "12px",
+    height: "12px",
+    backgroundColor: "$gray_light"
+  }
+});
+var Span4 = styled("span", {
+  fontFamily: "$default",
+  fontWeight: "$regular",
+  fontSize: "$sm",
+  color: "$danger_dark",
+  alignSelf: "flex-start",
+  paddingLeft: "1px",
+  marginTop: "2px",
+  marginBottom: "$6"
+});
+
+// src/components/Switch/index.tsx
+import { jsx as jsx24, jsxs as jsxs9 } from "react/jsx-runtime";
+var Switch2 = ({
+  label,
+  checked,
+  defaultChecked,
+  onCheckedChange,
+  disabled = false,
+  required = false,
+  id,
+  errorMessage
+}) => {
+  return /* @__PURE__ */ jsxs9("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" }, children: [
+    /* @__PURE__ */ jsxs9(Wrapper3, { hasError: !!errorMessage, children: [
+      /* @__PURE__ */ jsx24(
+        StyledRoot3,
+        {
+          id,
+          checked,
+          defaultChecked,
+          onCheckedChange,
+          hasError: !!errorMessage,
+          disabled,
+          required,
+          children: /* @__PURE__ */ jsx24(StyledThumb, {})
+        }
+      ),
+      label && /* @__PURE__ */ jsx24(Label2, { htmlFor: id, children: label })
+    ] }),
+    errorMessage && /* @__PURE__ */ jsx24(Span4, { children: errorMessage })
+  ] });
+};
+
+// src/components/Tabs/index.tsx
+import { Children, isValidElement, useLayoutEffect, useRef as useRef4, useState as useState4 } from "react";
+
+// src/components/Tabs/styles.ts
+import * as Tabs from "@radix-ui/react-tabs";
+var TabsRoot = styled(Tabs.Root, {
+  all: "unset",
+  display: "flex",
+  flexDirection: "column",
+  width: "100%",
+  backgroundColor: "$white"
+});
+var TabsList = styled(Tabs.List, {
+  all: "unset",
+  border: "none",
+  outline: "none",
+  boxShadow: "none",
+  display: "flex",
+  gap: "$2",
+  overflowX: "auto",
+  overflowY: "hidden",
+  whiteSpace: "nowrap",
+  "::-webkit-scrollbar": { display: "none" },
+  "-ms-overflow-style": "none",
+  "scrollbar-width": "none",
+  variants: {
+    scrollable: {
+      true: {
+        flex: 1
+      },
+      false: {
+        width: "100%",
+        flexShrink: 0,
+        flex: "0 0 auto",
+        justifyContent: "space-around"
+      }
+    }
+  }
+});
+var TabsTrigger = styled(Tabs.Trigger, {
+  all: "unset",
+  border: "none",
+  outline: "none",
+  boxShadow: "none",
+  display: "flex",
+  flex: "0 0 auto",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: "0 $2",
+  height: "$11",
+  fontSize: "$md",
+  lineHeight: "$base",
+  whiteSpace: "nowrap",
+  textOverflow: "ellipsis",
+  overflow: "hidden",
+  userSelect: "none",
+  background: "$gray100",
+  backgroundImage: "linear-gradient(to bottom, $clickpalm_mid, $clickpalm_superDark)",
+  WebkitBackgroundClip: "text",
+  WebkitTextFillColor: "transparent",
+  '&[data-state="active"]': {
+    color: "$ignite_light",
+    borderBottom: "3px solid $ignite_light",
+    outline: "none"
+  }
+});
+var TabsContent = styled(Tabs.Content, {
+  padding: "$3",
+  backgroundColor: "$white",
+  outline: "none",
+  variants: {
+    colorContent: {
+      gray: { backgroundColor: "$gray_background" },
+      white: { backgroundColor: "$white" }
+    }
+  },
+  defaultVariants: {
+    colorContent: "white"
+  }
+});
+
+// src/components/Tabs/index.tsx
+import { Fragment, jsx as jsx25, jsxs as jsxs10 } from "react/jsx-runtime";
+var TabsItem = ({ children }) => {
+  return /* @__PURE__ */ jsx25(Fragment, { children });
+};
+var Tabs2 = ({ defaultValue, colorContent, children }) => {
+  const items = [];
+  const childrenArray = Children.toArray(children);
+  childrenArray.forEach((child) => {
+    if (isValidElement(child) && child.type === TabsItem) {
+      const { value, label, children: content } = child.props;
+      items.push({ value, label, children: content });
+    }
+  });
+  const listRef = useRef4(null);
+  const rootRef = useRef4(null);
+  const hasOverflowRef = useRef4(false);
+  const [hasOverflow, setHasOverflow] = useState4(false);
+  const checkOverflow = () => {
+    const listEl = listRef.current;
+    const rootEl = rootRef.current;
+    if (listEl && rootEl) {
+      const availableWidth = rootEl.clientWidth;
+      const contentWidth = listEl.scrollWidth;
+      const overflow = contentWidth > availableWidth;
+      if (overflow !== hasOverflow) {
+        hasOverflowRef.current = overflow;
+        setHasOverflow(overflow);
+      }
+      setHasOverflow(overflow);
+    }
+  };
+  useLayoutEffect(() => {
+    checkOverflow();
+    const resizeObserver = new ResizeObserver(checkOverflow);
+    if (listRef.current) {
+      resizeObserver.observe(listRef.current);
+    }
+    return () => {
+      if (listRef.current) {
+        resizeObserver.unobserve(listRef.current);
+      }
+    };
+  }, []);
+  const scroll = (direction) => {
+    if (listRef.current) {
+      const scrollAmount = 120;
+      listRef.current.scrollBy({
+        left: direction === "left" ? -scrollAmount : scrollAmount,
+        behavior: "smooth"
+      });
+    }
+  };
+  return /* @__PURE__ */ jsxs10(
+    TabsRoot,
+    {
+      defaultValue: defaultValue || items[0]?.value,
+      ref: rootRef,
+      children: [
+        /* @__PURE__ */ jsxs10("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+          hasOverflow && /* @__PURE__ */ jsx25(
+            Button,
+            {
+              variant: "secondary",
+              size: "sm",
+              onClick: () => scroll("left"),
+              children: /* @__PURE__ */ jsx25(Icon, { name: "TriangleLeft", size: 64 })
+            }
+          ),
+          /* @__PURE__ */ jsx25(
+            TabsList,
+            {
+              ref: listRef,
+              scrollable: hasOverflow,
+              children: items.map((item) => /* @__PURE__ */ jsx25(
+                TabsTrigger,
+                {
+                  value: item.value,
+                  style: !hasOverflow ? { flexGrow: 1 } : { flexGrow: "0 0 auto" },
+                  children: item.label
+                },
+                `trigger-${item.value}`
+              ))
+            }
+          ),
+          hasOverflow && /* @__PURE__ */ jsx25(
+            Button,
+            {
+              variant: "secondary",
+              size: "sm",
+              onClick: () => scroll("right"),
+              children: /* @__PURE__ */ jsx25(Icon, { name: "TriangleRight", size: 64 })
+            }
+          )
+        ] }),
+        items.map((item) => /* @__PURE__ */ jsx25(
+          TabsContent,
+          {
+            colorContent,
+            value: item.value,
+            children: item.children
+          },
+          `content-${item.value}`
+        ))
+      ]
+    }
+  );
+};
+Tabs2.Item = TabsItem;
+
+// src/components/TextArea.tsx
+import { jsx as jsx26, jsxs as jsxs11 } from "react/jsx-runtime";
+var Wrapper4 = styled("div", {
+  display: "flex",
+  flexDirection: "column"
+});
+var StyledLabel2 = styled("label", {
+  fontSize: "$md",
+  fontWeight: "$regular",
+  color: "$black",
+  marginBottom: "$2",
+  paddingLeft: "1px",
+  alignSelf: "flex-start"
+});
+var TextAreaElement = styled("textarea", {
+  backgroundColor: "$white",
+  padding: "$3 $4",
+  marginBottom: "$6",
+  borderRadius: "$md",
+  boxSizing: "border-box",
+  border: "1px solid $gray_mid",
+  fontFamily: "$default",
+  fontSize: "$sm",
+  color: "$black",
+  fontWeight: "$regular",
+  resize: "none",
+  minHeight: 100,
+  maxHeight: "170px",
+  overflowY: "auto",
+  width: "100%",
+  "&:focus": {
+    outline: 0,
+    border: "2px solid $clickpalm_light"
+  },
+  "&:disabled": {
+    opacity: 0.5,
+    cursor: "not-allowed"
+  },
+  "&::placeholder": {
+    color: "$gray_mid"
+  },
+  "&::-webkit-scrollbar": {
+    width: "6px"
+  },
+  "&::-webkit-scrollbar-track": {
+    background: "transparent",
+    borderRadius: "$md",
+    margin: "$2"
+  },
+  "&::-webkit-scrollbar-thumb": {
+    backgroundColor: "$gray_mid",
+    borderRadius: "$md",
+    border: "2px solid $white"
+  },
+  variants: {
+    hasError: {
+      true: {
+        border: "1px solid $danger_dark",
+        marginBottom: "0px",
+        "&:focus": {
+          border: "2px solid $danger_dark"
+        }
+      }
+    }
+  }
+});
+var Span5 = styled("span", {
+  fontFamily: "$default",
+  fontWeight: "$regular",
+  fontSize: "$sm",
+  color: "$danger_dark",
+  alignSelf: "flex-start",
+  paddingLeft: "1px",
+  marginTop: "2px",
+  marginBottom: "$6"
+});
+var TextArea = ({ label, id, htmlFor, errorMessage, ...props }) => {
+  const textAreaId = id || htmlFor || `textarea-${crypto.randomUUID()}`;
+  return /* @__PURE__ */ jsxs11(Wrapper4, { children: [
+    label && /* @__PURE__ */ jsx26(StyledLabel2, { htmlFor: textAreaId, children: label }),
+    /* @__PURE__ */ jsx26(TextAreaElement, { id: textAreaId, ...props, hasError: !!errorMessage }),
+    errorMessage && /* @__PURE__ */ jsx26(Span5, { children: errorMessage })
+  ] });
+};
+TextArea.displayName = "TextArea";
+
+// src/components/Tooltip/index.tsx
+import * as RadixTooltip2 from "@radix-ui/react-tooltip";
+
+// src/components/Tooltip/styles.ts
+import * as RadixTooltip from "@radix-ui/react-tooltip";
+var slideUpAndFade = keyframes({
+  "0%": { opacity: 0, transform: "translateY(2px)" },
+  "100%": { opacity: 1, transform: "translateY(0)" }
+});
+var slideDownAndFade = keyframes({
+  "0%": { opacity: 0, transform: "translateY(-2px)" },
+  "100%": { opacity: 1, transform: "translateY(0)" }
+});
+var slideLeftAndFade = keyframes({
+  "0%": { opacity: 0, transform: "translateX(2px)" },
+  "100%": { opacity: 1, transform: "translateX(0)" }
+});
+var slideRightAndFade = keyframes({
+  "0%": { opacity: 0, transform: "translateX(-2px)" },
+  "100%": { opacity: 1, transform: "translateX(0)" }
+});
+var TooltipTrigger = RadixTooltip.Trigger;
+var TooltipContent = styled(RadixTooltip.Content, {
+  borderRadius: "$sm",
+  border: "2px solid $gray_background",
+  padding: "$2 $4",
+  fontSize: "$sm",
+  lineHeight: "1",
+  color: "$black",
+  backgroundColor: "$white",
+  boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.2)",
+  zIndex: 50,
+  maxWidth: "200px",
+  whiteSpace: "normal",
+  wordBreak: "break-word",
+  textAlign: "left",
+  "@media (prefers-reduced-motion: no-preference)": {
+    animationDuration: "200ms",
+    animationTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)",
+    willChange: "transform, opacity",
+    '&[data-state="delayed-open"][data-side="top"]': { animationName: slideDownAndFade },
+    '&[data-state="delayed-open"][data-side="right"]': { animationName: slideLeftAndFade },
+    '&[data-state="delayed-open"][data-side="bottom"]': { animationName: slideUpAndFade },
+    '&[data-state="delayed-open"][data-side="left"]': { animationName: slideRightAndFade }
+  }
+});
+var TooltipArrow = styled(RadixTooltip.Arrow, {
+  fill: "$gray_background"
+});
+
+// src/components/Tooltip/index.tsx
+import { jsx as jsx27, jsxs as jsxs12 } from "react/jsx-runtime";
+var Tooltip = ({
+  content,
+  children,
+  side = "top",
+  sideOffset = 5,
+  open,
+  onOpenChange,
+  delayDuration = 100
+}) => {
+  return /* @__PURE__ */ jsx27(RadixTooltip2.Provider, { children: /* @__PURE__ */ jsxs12(RadixTooltip2.Root, { open, onOpenChange, delayDuration, children: [
+    /* @__PURE__ */ jsx27(TooltipTrigger, { asChild: true, children }),
+    /* @__PURE__ */ jsxs12(TooltipContent, { side, sideOffset, children: [
+      content,
+      /* @__PURE__ */ jsx27(TooltipArrow, {})
+    ] })
+  ] }) });
+};
+Tooltip.displayName = "Tooltip";
+
+// src/components/Box.tsx
+import { jsx as jsx28 } from "react/jsx-runtime";
+var StyledBox = styled("div", {
+  padding: "$5",
+  borderRadius: "$md",
+  textAlign: "center",
+  marginBottom: "$6",
+  variants: {
+    variant: {
+      gray: {
+        backgroundColor: "$gray_background",
+        boxShadow: "0 1px 2px $colors$gray_dark"
+      },
+      white: {
+        backgroundColor: "$white"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "gray"
+  }
+});
+var Box = (props) => {
+  return /* @__PURE__ */ jsx28(StyledBox, { ...props });
+};
+Box.displayName = "Box";
+
+// src/components/Text.tsx
+import { jsx as jsx29 } from "react/jsx-runtime";
+var StyledText = styled("p", {
+  fontFamily: "$default",
+  lineHeight: "$short",
+  margin: 0,
+  variants: {
+    size: {
+      xxs: { fontSize: "$xxs" },
+      xs: { fontSize: "$xs" },
+      sm: { fontSize: "$sm" },
+      md: { fontSize: "$md" },
+      lg: { fontSize: "$lg" },
+      xl: { fontSize: "$xl" },
+      "2xl": { fontSize: "$2xl" },
+      "4xl": { fontSize: "$4xl" },
+      "5xl": { fontSize: "$5xl" },
+      "6xl": { fontSize: "$6xl" },
+      "7xl": { fontSize: "$7xl" },
+      "8xl": { fontSize: "$8xl" },
+      "9xl": { fontSize: "$9xl" }
+    },
+    wheight: {
+      regular: { fontWeight: "$regular" },
+      medium: { fontWeight: "$medium" },
+      bold: { fontWeight: "$bold" }
+    },
+    lineHeight: {
+      regular: { lineHeight: "$regular" },
+      shorter: { lineHeight: "$shorter" },
+      short: { lineHeight: "$short" },
+      base: { lineHeight: "$base" },
+      tall: { lineHeight: "$tall" }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    wheight: "regular",
+    lineHeight: "short"
+  }
+});
+var Text = (props) => {
+  return /* @__PURE__ */ jsx29(StyledText, { ...props });
+};
+Text.displayName = "Text";
+
+// src/components/Heading.tsx
+var Heading = styled("h2", {
+  fontFamily: "$default",
+  lineHeight: "$shorter",
+  margin: 0,
+  color: "$black",
+  variants: {
+    size: {
+      sm: { fontSize: "$xl" },
+      md: { fontSize: "$2xl" },
+      lg: { fontSize: "$4xl" },
+      "2xl": { fontSize: "$5xl" },
+      "3xl": { fontSize: "$6xl" },
+      "4xl": { fontSize: "$7xl" },
+      "5xl": { fontSize: "$8xl" },
+      "6xl": { fontSize: "$9xl" }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+Heading.displayName = "Heading";
+
+// src/components/Select/index.tsx
+import { TriangleDownIcon, TriangleUpIcon } from "@radix-ui/react-icons";
+import * as CustomSelect from "@radix-ui/react-select";
+import { useState as useState5 } from "react";
+
+// src/components/Select/styles.ts
+import * as Select from "@radix-ui/react-select";
+var StyledWrapper4 = styled("div", {
+  display: "flex",
+  flexDirection: "column"
+});
+var Label3 = styled("label", {
+  fontSize: "$md",
+  fontWeight: "$regular",
+  alignSelf: "flex-start",
+  marginBottom: "$2",
+  paddingLeft: "1px",
+  color: "$black"
+});
+var StyledTrigger = styled(Select.Trigger, {
+  all: "unset",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  marginBottom: "$6",
+  padding: "$3 $4",
+  boxSizing: "border-box",
+  borderRadius: "$md",
+  border: "1px solid $gray_mid",
+  fontSize: "$md",
+  backgroundColor: "white",
+  cursor: "pointer",
+  "&[data-placeholder]": {
+    color: "$gray_mid"
+  },
+  "&[data-highlighted], &:focus, &:hover": {
+    outline: "none",
+    border: "2px solid $clickpalm_light"
+  },
+  "&:disabled": {
+    opacity: 0.5,
+    cursor: "not-allowed"
+  },
+  variants: {
+    hasError: {
+      true: {
+        border: "1px solid $danger_dark",
+        marginBottom: "0px",
+        "&[data-highlighted], &:focus, &:hover": {
+          outline: "none",
+          border: "2px solid $danger_dark"
+        }
+      }
+    }
+  }
+});
+var StyledContent2 = styled(Select.Content, {
+  overflow: "hidden",
+  backgroundColor: "$gray_background",
+  borderRadius: "$md",
+  boxShadow: "0px 4px 6px rgba(0, 0, 0, 0.1)",
+  zIndex: 10,
+  width: "var(--radix-select-trigger-width)",
+  maxHeight: "var(--radix-select-content-available-height)"
+});
+var StyledViewport = styled(Select.Viewport, {
+  padding: "4px"
+});
+var StyledItem2 = styled(Select.Item, {
+  position: "relative",
+  fontSize: "$md",
+  padding: "14px 12px",
+  color: "$black",
+  cursor: "pointer",
+  "&[data-highlighted]": {
+    outline: "none",
+    color: "$clickpalm_light"
+  },
+  "&:not(:last-child)::after": {
+    content: '""',
+    position: "absolute",
+    bottom: 0,
+    left: "$3",
+    right: "$3",
+    height: "1px",
+    backgroundColor: "$gray_light"
+  }
+});
+var StyledIcon = styled(Select.Icon, {
+  display: "flex",
+  alignItems: "center",
+  color: "$black",
+  transition: "transform 0.4s ease",
+  variants: {
+    open: {
+      true: {
+        transform: "rotate(180deg)"
+      },
+      false: {
+        transform: "rotate(0deg)"
+      }
+    }
+  },
+  svg: {
+    width: 26,
+    height: 26
+  }
+});
+var Span6 = styled("span", {
+  fontFamily: "$default",
+  fontWeight: "$regular",
+  fontSize: "$sm",
+  color: "$danger_dark",
+  alignSelf: "flex-start",
+  paddingLeft: "1px",
+  marginTop: "2px",
+  marginBottom: "$6"
+});
+
+// src/components/Select/index.tsx
+import { jsx as jsx30, jsxs as jsxs13 } from "react/jsx-runtime";
+function Select2({
+  value,
+  onValueChange,
+  items,
+  placeholder = "Selecione",
+  label,
+  errorMessage,
+  ...rest
+}) {
+  const [open, setOpen] = useState5(false);
+  return /* @__PURE__ */ jsxs13(StyledWrapper4, { children: [
+    label && /* @__PURE__ */ jsx30(Label3, { children: label }),
+    /* @__PURE__ */ jsxs13(
+      CustomSelect.Root,
+      {
+        value,
+        onValueChange,
+        onOpenChange: setOpen,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxs13(StyledTrigger, { "aria-label": label, hasError: !!errorMessage, children: [
+            /* @__PURE__ */ jsx30(CustomSelect.Value, { placeholder }),
+            /* @__PURE__ */ jsx30(StyledIcon, { open, children: /* @__PURE__ */ jsx30(TriangleDownIcon, {}) })
+          ] }),
+          errorMessage && /* @__PURE__ */ jsx30(Span6, { children: errorMessage }),
+          /* @__PURE__ */ jsx30(CustomSelect.Portal, { children: /* @__PURE__ */ jsxs13(
+            StyledContent2,
+            {
+              side: "bottom",
+              align: "start",
+              position: "popper",
+              children: [
+                /* @__PURE__ */ jsx30(CustomSelect.ScrollUpButton, { children: /* @__PURE__ */ jsx30(TriangleUpIcon, {}) }),
+                /* @__PURE__ */ jsx30(StyledViewport, { children: items.map((item) => /* @__PURE__ */ jsx30(StyledItem2, { value: item.value, children: /* @__PURE__ */ jsx30(CustomSelect.ItemText, { children: item.label }) }, item.value)) }),
+                /* @__PURE__ */ jsx30(CustomSelect.ScrollDownButton, { children: /* @__PURE__ */ jsx30(TriangleDownIcon, {}) })
+              ]
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+}
+Select2.displayName = "Select";
+
+// src/components/LabelledValue/index.tsx
+import {
+  Children as Children2,
+  cloneElement,
+  isValidElement as isValidElement2
+} from "react";
+
+// src/components/LabelledValue/styles.ts
+var Container = styled("div", {
+  display: "flex",
+  variants: {
+    position: {
+      vertical: {
+        flexDirection: "column",
+        gap: "$5"
+      },
+      horizontal: {
+        flexDirection: "column",
+        flexWrap: "wrap",
+        gap: "$3"
+      }
+    }
+  }
+});
+var ItemWrapper = styled("div", {
+  display: "flex",
+  alignItems: "center",
+  variants: {
+    position: {
+      vertical: {
+        flexDirection: "column",
+        alignItems: "flex-start"
+      },
+      horizontal: {
+        paddingBottom: "$2",
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        borderBottom: "1px solid $gray_mid"
+      }
+    },
+    withRow: {
+      true: {
+        paddingBottom: "$2",
+        borderBottom: "1px solid $gray_mid"
+      }
+    }
+  }
+});
+var Label4 = styled("div", {
+  fontWeight: "$regular",
+  fontSize: "$md",
+  color: "$black",
+  whiteSpace: "nowrap"
+});
+var Value2 = styled("div", {
+  fontWeight: "$bold",
+  fontSize: "$md",
+  color: "$black",
+  textAlign: "right",
+  wordBreak: "break-word",
+  maxWidth: "100%",
+  flex: 1
+});
+
+// src/components/LabelledValue/index.tsx
+import { jsx as jsx31, jsxs as jsxs14 } from "react/jsx-runtime";
+function LabelledValue({ position = "vertical", withRow = false, children }) {
+  return /* @__PURE__ */ jsx31(Container, { position, children: Children2.map(children, (child) => {
+    if (isValidElement2(child)) {
+      return cloneElement(child, { position, withRow });
+    }
+    return child;
+  }) });
+}
+function Item3({ label, value, position = "vertical", withRow = false }) {
+  return /* @__PURE__ */ jsxs14(ItemWrapper, { position, withRow, children: [
+    /* @__PURE__ */ jsx31(Label4, { children: label }),
+    /* @__PURE__ */ jsx31(Value2, { children: value })
+  ] });
+}
+LabelledValue.Item = Item3;
+
+// src/components/OneTimePassword/index.tsx
+import * as OneTimePasswordField2 from "@radix-ui/react-one-time-password-field";
+
+// src/components/OneTimePassword/styles.ts
+import * as OneTimePasswordField from "@radix-ui/react-one-time-password-field";
+var StyledWrapper5 = styled("div", {
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  gap: "$5",
+  marginBottom: "$6"
+});
+var StyledRoot4 = styled(OneTimePasswordField.Root, {
+  display: "flex",
+  gap: "$2",
+  flexWrap: "nowrap"
+});
+var StyledInput = styled(OneTimePasswordField.Input, {
+  all: "unset",
+  gap: "1rem",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  textAlign: "center",
+  boxSizing: "border-box",
+  borderRadius: "$md",
+  borderStyle: "solid",
+  borderColor: "#C2C2C2",
+  borderWidth: "3px",
+  fontSize: "$md",
+  color: "$black",
+  padding: "0",
+  height: "50px",
+  width: "53px",
+  "&:hover": {
+    borderColor: "$gray_dark"
+  },
+  "&:focus": {
+    borderColor: "$clickpalm_mid"
+  }
+});
+
+// src/components/OneTimePassword/index.tsx
+import { jsx as jsx32, jsxs as jsxs15 } from "react/jsx-runtime";
+var OneTimePassword = ({ label, length, value, onValueChange, ...rootProps }) => {
+  return /* @__PURE__ */ jsxs15(StyledWrapper5, { children: [
+    /* @__PURE__ */ jsx32("label", { children: label }),
+    /* @__PURE__ */ jsxs15(
+      StyledRoot4,
+      {
+        value,
+        onValueChange,
+        ...rootProps,
+        children: [
+          Array.from({ length }).map((_, index) => /* @__PURE__ */ jsx32(StyledInput, {}, index)),
+          /* @__PURE__ */ jsx32(OneTimePasswordField2.HiddenInput, {})
+        ]
+      }
+    )
+  ] });
+};
+OneTimePassword.displayName = "OneTimePasswordInput";
+
+// src/components/Toast/index.tsx
+import * as ToastPrimitive2 from "@radix-ui/react-toast";
+import * as React2 from "react";
+
+// src/components/Toast/styles.ts
+import * as ToastPrimitive from "@radix-ui/react-toast";
+var hide = keyframes({
+  from: { opacity: 1 },
+  to: { opacity: 0 }
+});
+var slideIn2 = keyframes({
+  from: { transform: "translateX(calc(100% + 25px))" },
+  to: { transform: "translateX(0)" }
+});
+var swipeOut = keyframes({
+  from: { transform: "translateX(var(--radix-toast-swipe-end-x))" },
+  to: { transform: "translateX(calc(100% + 25px))" }
+});
+var ToastRoot = styled(ToastPrimitive.Root, {
+  position: "relative",
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  flexWrap: "nowrap",
+  gap: "$2",
+  width: "100%",
+  boxSizing: "border-box",
+  borderRadius: "$md",
+  padding: "$4 $6",
+  color: "$black",
+  fontSize: "$md",
+  boxShadow: "0 2px 10px rgba(0,0,0,0.1)",
+  '&[data-state="open"]': {
+    animation: `${slideIn2} 150ms cubic-bezier(0.16, 1, 0.3, 1)`
+  },
+  '&[data-state="closed"]': {
+    animation: `${hide} 100ms ease-in`
+  },
+  '&[data-swipe="move"]': {
+    transform: "translateX(var(--radix-toast-swipe-move-x))"
+  },
+  '&[data-swipe="cancel"]': {
+    transform: "translateX(0)",
+    transition: "transform 200ms ease-out"
+  },
+  '&[data-swipe="end"]': {
+    animation: `${swipeOut} 100ms ease-out`
+  },
+  variants: {
+    variant: {
+      success: { backgroundColor: "$success" },
+      warning: { backgroundColor: "$warning" },
+      error: { backgroundColor: "$danger" }
+    }
+  }
+});
+var ToastAction = styled(ToastPrimitive.Action, {
+  marginLeft: "auto",
+  background: "transparent",
+  border: "none",
+  cursor: "pointer"
+});
+var ToastContent = styled("div", {
+  display: "flex",
+  flexDirection: "column",
+  gap: "$1",
+  width: "100%",
+  alignItems: "flex-start",
+  "@lg": {
+    justifyContent: "space-between",
+    alignItems: "center",
+    flexDirection: "row"
+  }
+});
+var ToastTitle = styled("strong", {
+  fontWeight: "$bold",
+  display: "block"
+});
+var ToastDescription = styled("span", {
+  marginRight: "$6",
+  display: "block"
+});
+var ToastViewport = styled(ToastPrimitive.Viewport, {
+  position: "fixed",
+  top: "110px",
+  left: "50%",
+  transform: "translateX(-50%)",
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "flex-start",
+  alignItems: "center",
+  padding: 0,
+  margin: "0 auto",
+  gap: "$2",
+  width: "79%",
+  listStyle: "none",
+  outline: "none",
+  zIndex: 9999,
+  "@lg": {
+    maxWidth: "900px"
+  }
+});
+var progress = keyframes({
+  from: { width: "100%" },
+  to: { width: "0%" }
+});
+var ToastProgress = styled("div", {
+  position: "absolute",
+  bottom: 0,
+  left: 0,
+  height: "6px",
+  width: "90%",
+  justifyContent: "center",
+  borderBottomLeftRadius: "$full",
+  borderBottomRightRadius: "$full",
+  backgroundColor: "$clickpalm_light",
+  animationTimingFunction: "linear",
+  animation: `${progress} 3s linear`,
+  animationFillMode: "forwards",
+  variants: {
+    paused: {
+      true: {
+        animationPlayState: "paused"
+      },
+      false: {
+        animationPlayState: "running"
+      }
+    },
+    variant: {
+      success: { backgroundColor: "$success_dark" },
+      warning: { backgroundColor: "$warning_dark" },
+      error: { backgroundColor: "$danger_dark" }
+    }
+  }
+});
+
+// src/components/Toast/toast.ts
+var subscribers = [];
+var toastImpl = {
+  success(title, description) {
+    publish({ id: crypto.randomUUID(), variant: "success", title, description });
+  },
+  warning(title, description) {
+    publish({ id: crypto.randomUUID(), variant: "warning", title, description });
+  },
+  error(title, description) {
+    publish({ id: crypto.randomUUID(), variant: "error", title, description });
+  },
+  _subscribe(fn) {
+    subscribers.push(fn);
+  },
+  _unsubscribe(fn) {
+    subscribers = subscribers.filter((sub) => sub !== fn);
+  }
+};
+function publish(msg) {
+  subscribers.forEach((fn) => fn(msg));
+}
+var toast = {
+  success: toastImpl.success,
+  warning: toastImpl.warning,
+  error: toastImpl.error
+};
+
+// src/components/Toast/index.tsx
+import { jsx as jsx33, jsxs as jsxs16 } from "react/jsx-runtime";
+var Toast = () => {
+  const [messages, setMessages] = React2.useState([]);
+  const [paused, setPaused] = React2.useState(false);
+  React2.useEffect(() => {
+    const handleNewToast = (msg) => {
+      setMessages((prev) => [...prev, msg]);
+    };
+    toastImpl._subscribe(handleNewToast);
+    return () => {
+      toastImpl._unsubscribe(handleNewToast);
+    };
+  }, []);
+  const removeToast = (id) => {
+    setMessages((prev) => prev.filter((msg) => msg.id !== id));
+  };
+  return /* @__PURE__ */ jsxs16(ToastPrimitive2.Provider, { swipeDirection: "right", children: [
+    messages.map((message) => /* @__PURE__ */ jsxs16(
+      ToastRoot,
+      {
+        open: true,
+        onOpenChange: (open) => {
+          if (!open)
+            removeToast(message.id);
+        },
+        variant: message.variant,
+        duration: 3e3,
+        onPause: () => setPaused(true),
+        onResume: () => setPaused(false),
+        children: [
+          /* @__PURE__ */ jsxs16(ToastContent, { children: [
+            /* @__PURE__ */ jsx33(ToastTitle, { children: message.title }),
+            /* @__PURE__ */ jsx33(ToastDescription, { children: message.description })
+          ] }),
+          /* @__PURE__ */ jsx33(ToastAction, { altText: "Fechar", asChild: true, children: /* @__PURE__ */ jsx33(
+            "button",
+            {
+              style: {
+                all: "unset",
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center"
+              },
+              onClick: () => removeToast(message.id),
+              children: /* @__PURE__ */ jsx33(Icon, { name: "Closed", size: 16, height: 14, width: 14 })
+            }
+          ) }),
+          /* @__PURE__ */ jsx33(ToastProgress, { paused, variant: message.variant })
+        ]
+      },
+      message.id
+    )),
+    /* @__PURE__ */ jsx33(ToastViewport, {})
+  ] });
+};
+
+// src/components/MultiStep/styles.ts
+var Wrapper5 = styled("div", {
+  display: "flex",
+  "--circle-size": "48px",
+  "--gap": "16px",
+  variants: {
+    orientation: {
+      horizontal: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: "var(--gap)"
+      },
+      vertical: {
+        flexDirection: "column",
+        alignItems: "flex-start"
+      }
+    }
+  }
+});
+var StepItem = styled("div", {
+  display: "flex",
+  alignItems: "center",
+  position: "relative",
+  variants: {
+    orientation: {
+      horizontal: {
+        flex: 1,
+        flexDirection: "column",
+        textAlign: "center"
+      },
+      vertical: {
+        margin: "$4 0",
+        flexDirection: "row"
+      }
+    }
+  }
+});
+var StepCircle = styled("div", {
+  position: "relative",
+  zIndex: 999,
+  width: "var(--circle-size)",
+  height: "var(--circle-size)",
+  borderRadius: "50%",
+  border: "2px solid",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  fontWeight: "$regular",
+  color: "$black",
+  variants: {
+    isActive: {
+      true: {},
+      false: {}
+    },
+    hasLeftLine: {
+      true: {}
+    },
+    hasRightLine: {
+      true: {}
+    },
+    orientation: {
+      horizontal: {},
+      vertical: {
+        "&::before": {
+          content: "",
+          position: "absolute",
+          top: 0,
+          left: "50%",
+          transform: "translate(-50%, -100%)",
+          width: "3px",
+          height: "$6",
+          backgroundColor: "$clickpalm_dark"
+        },
+        "&::after": {
+          content: "",
+          position: "absolute",
+          bottom: 0,
+          left: "50%",
+          transform: "translate(-50%, 100%)",
+          width: "3px",
+          height: "$6",
+          backgroundColor: "$clickpalm_dark"
+        }
+      }
+    },
+    variant: {
+      primary: {
+        borderColor: "$clickpalm_dark"
+      },
+      secondary: {}
+    }
+  },
+  compoundVariants: [
+    {
+      hasLeftLine: false,
+      orientation: "horizontal",
+      css: {
+        "&::before": { display: "none" }
+      }
+    },
+    {
+      hasRightLine: false,
+      orientation: "horizontal",
+      css: {
+        "&::after": { display: "none" }
+      }
+    },
+    {
+      hasLeftLine: false,
+      orientation: "vertical",
+      css: {
+        "&::before": { display: "none" }
+      }
+    },
+    {
+      hasRightLine: false,
+      orientation: "vertical",
+      css: {
+        "&::after": { display: "none" }
+      }
+    },
+    {
+      isActive: true,
+      variant: "primary",
+      css: {
+        backgroundColor: "$clickpalm_dark",
+        color: "$white"
+      }
+    },
+    {
+      isActive: false,
+      variant: "primary",
+      css: {
+        borderColor: "$clickpalm_dark"
+      }
+    },
+    {
+      isActive: true,
+      variant: "secondary",
+      css: {
+        borderColor: "$ignite_light",
+        backgroundColor: "$ignite_light"
+      }
+    },
+    {
+      isActive: false,
+      variant: "secondary",
+      css: {
+        borderColor: "$white",
+        color: "$white"
+      }
+    },
+    {
+      isActive: true,
+      variant: "primary",
+      orientation: "vertical",
+      css: {
+        "&::before": {
+          backgroundColor: "$clickpalm_dark"
+        },
+        "&::after": {
+          backgroundColor: "$clickpalm_dark"
+        }
+      }
+    },
+    {
+      isActive: false,
+      variant: "primary",
+      orientation: "vertical",
+      css: {
+        "&::before": {
+          backgroundColor: "$clickpalm_dark"
+        },
+        "&::after": {
+          backgroundColor: "$clickpalm_dark"
+        }
+      }
+    },
+    {
+      isActive: true,
+      variant: "secondary",
+      orientation: "vertical",
+      css: {
+        "&::before": {
+          backgroundColor: "$ignite_light"
+        },
+        "&::after": {
+          backgroundColor: "$ignite_light"
+        }
+      }
+    },
+    {
+      isActive: false,
+      variant: "secondary",
+      orientation: "vertical",
+      css: {
+        "&::before": {
+          backgroundColor: "$white"
+        },
+        "&::after": {
+          backgroundColor: "$white"
+        }
+      }
+    }
+  ]
+});
+var StepLabel = styled("span", {
+  fontSize: "$md",
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  variants: {
+    orientation: {
+      horizontal: {
+        marginTop: "$2"
+      },
+      vertical: {
+        marginLeft: "$3"
+      }
+    },
+    variant: {
+      primary: {
+        color: "$black"
+      },
+      secondary: {
+        color: "$white"
+      }
+    }
+  }
+});
+
+// src/components/MultiStep/index.tsx
+import { jsx as jsx34, jsxs as jsxs17 } from "react/jsx-runtime";
+var MultiStep = ({
+  steps,
+  currentStep,
+  orientation = "horizontal",
+  variant
+}) => {
+  return /* @__PURE__ */ jsx34(
+    Wrapper5,
+    {
+      orientation,
+      children: steps.map((step, index) => {
+        const isFirst = index === 0;
+        const isLast = index === steps.length - 1;
+        return /* @__PURE__ */ jsxs17(StepItem, { orientation, children: [
+          /* @__PURE__ */ jsx34(
+            StepCircle,
+            {
+              orientation,
+              variant,
+              isActive: currentStep >= index,
+              hasLeftLine: !isFirst,
+              hasRightLine: !isLast,
+              children: index + 1
+            }
+          ),
+          /* @__PURE__ */ jsx34(
+            StepLabel,
+            {
+              orientation,
+              variant,
+              children: step.label
+            }
+          )
+        ] }, index);
+      })
+    }
+  );
+};
+MultiStep.displayName = "MultiStep";
+
+// src/components/Carousel/index.tsx
+import { useState as useState7, Children as Children3, cloneElement as cloneElement2 } from "react";
+
+// src/components/Carousel/styles.ts
+var CarouselContainer = styled("div", {
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  width: "100%",
+  maxWidth: "720px",
+  userSelect: "none"
+});
+var Wrapper6 = styled("div", {
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  borderRadius: "$md",
+  width: "stretch",
+  padding: "$4",
+  variants: {
+    variant: {
+      gray: {
+        backgroundColor: "$gray_background",
+        boxShadow: "0 1px 2px $colors$gray_dark"
+      },
+      purple: {
+        backgroundColor: "$clickpalm_mid",
+        color: "$white"
+      }
+    }
+  }
+});
+var CarouselHeader = styled("div", {
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  width: "100%"
+});
+var Title2 = styled("h3", {
+  fontFamily: "$default",
+  fontWeight: "$bold",
+  fontSize: "$md",
+  margin: "0px",
+  variants: {
+    variant: {
+      gray: {
+        color: "$black"
+      },
+      purple: {
+        color: "$white"
+      }
+    }
+  }
+});
+var Navigation = styled("h3", {
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  gap: "$1",
+  margin: "0px"
+});
+var CarouselContent = styled("div", {
+  width: "100%",
+  overflow: "hidden",
+  position: "relative"
+});
+var DotsContainer = styled("div", {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "100%"
+});
+var Dots2 = styled("div", {
+  display: "flex",
+  gap: "$2",
+  justifyContent: "center",
+  flexWrap: "nowrap"
+});
+var DotButton = styled("button", {
+  border: "2px solid $ignite_light",
+  background: "transparent",
+  height: "9px",
+  width: "9px",
+  borderRadius: "$full",
+  padding: 0,
+  cursor: "pointer",
+  transition: "background-color 0.3s ease, border-color 0.3s ease",
+  flexShrink: 0,
+  variants: {
+    active: {
+      true: {
+        backgroundColor: "$ignite_light",
+        borderColor: "$ignite_light"
+      },
+      false: {}
+    }
+  },
+  "&:focus": {
+    outline: "none",
+    borderColor: "$ignite_dark"
+  }
+});
+var CarouselItemContainer = styled("div", {
+  width: "100%"
+});
+
+// src/components/Carousel/index.tsx
+import { jsx as jsx35, jsxs as jsxs18 } from "react/jsx-runtime";
+var SWIPE_THRESHOLD = 50;
+var Carousel = ({ title, variant, children }) => {
+  const items = Children3.toArray(children);
+  const [activeIndex, setActiveIndex] = useState7(0);
+  const [touchStartX, setTouchStartX] = useState7(null);
+  const [touchEndX, setTouchEndX] = useState7(null);
+  const prev = () => {
+    setActiveIndex((prevIndex) => prevIndex === 0 ? items.length - 1 : prevIndex - 1);
+  };
+  const next = () => {
+    setActiveIndex((prevIndex) => prevIndex === items.length - 1 ? 0 : prevIndex + 1);
+  };
+  const onTouchStart = (e) => {
+    setTouchEndX(null);
+    setTouchStartX(e.targetTouches[0].clientX);
+  };
+  const onTouchMove = (e) => {
+    setTouchEndX(e.targetTouches[0].clientX);
+  };
+  const onTouchEnd = () => {
+    if (touchStartX !== null && touchEndX !== null) {
+      const distance = touchStartX - touchEndX;
+      if (Math.abs(distance) > SWIPE_THRESHOLD) {
+        if (distance > 0) {
+          next();
+        } else {
+          prev();
+        }
+      }
+    }
+    setTouchStartX(null);
+    setTouchEndX(null);
+  };
+  return /* @__PURE__ */ jsxs18(
+    CarouselContainer,
+    {
+      role: "region",
+      "aria-roledescription": "carousel",
+      "aria-label": "Carousel Component",
+      children: [
+        /* @__PURE__ */ jsxs18(Wrapper6, { variant, children: [
+          /* @__PURE__ */ jsxs18(CarouselHeader, { children: [
+            /* @__PURE__ */ jsx35(Title2, { children: title }),
+            /* @__PURE__ */ jsxs18(Navigation, { children: [
+              /* @__PURE__ */ jsx35(
+                Button,
+                {
+                  size: "sm",
+                  variant: "secondary",
+                  "aria-label": "Previous Slide",
+                  onClick: prev,
+                  tabIndex: 0,
+                  children: /* @__PURE__ */ jsx35(Icon, { name: "TriangleLeft", size: 16, color: variant === "purple" ? "white" : "black" })
+                }
+              ),
+              /* @__PURE__ */ jsx35(
+                Button,
+                {
+                  size: "sm",
+                  variant: "secondary",
+                  "aria-label": "Previous Slide",
+                  onClick: next,
+                  tabIndex: 0,
+                  children: /* @__PURE__ */ jsx35(Icon, { name: "TriangleRight", size: 16, color: variant === "purple" ? "white" : "black" })
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx35(Spacing, { size: "xs" }),
+          /* @__PURE__ */ jsx35(Hr, { variant }),
+          /* @__PURE__ */ jsx35(Spacing, { size: "xs" }),
+          /* @__PURE__ */ jsx35(
+            CarouselContent,
+            {
+              onTouchStart,
+              onTouchMove,
+              onTouchEnd,
+              children: items.map(
+                (child, index) => cloneElement2(child, {
+                  "aria-hidden": index !== activeIndex,
+                  style: {
+                    display: index === activeIndex ? "block" : "none"
+                  }
+                })
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx35(Spacing, { size: "md" }),
+        /* @__PURE__ */ jsx35(DotsContainer, { children: /* @__PURE__ */ jsx35(Dots2, { role: "tablist", "aria-label": "Carousel Pagination", children: items.map((_, idx) => /* @__PURE__ */ jsx35(
+          DotButton,
+          {
+            active: idx === activeIndex,
+            "aria-label": `Go to slide ${idx + 1}`,
+            "aria-selected": idx === activeIndex,
+            role: "tab",
+            onClick: () => setActiveIndex(idx),
+            type: "button"
+          },
+          idx
+        )) }) })
+      ]
+    }
+  );
+};
+var CarouselItem = ({ children, style, ...props }) => /* @__PURE__ */ jsx35(CarouselItemContainer, { ...props, style: { ...style }, children });
+Carousel.Item = CarouselItem;
+
+// src/components/PasswordInput.tsx
+import { forwardRef as forwardRef3, useRef as useRef5, useState as useState8, useImperativeHandle } from "react";
+import { jsx as jsx36 } from "react/jsx-runtime";
+var PasswordInput = forwardRef3(
+  ({ value, onChange, ...props }, ref) => {
+    console.log("\u{1F680} ~ value:", value);
+    const [visible, setVisible] = useState8(false);
+    const innerRef = useRef5(null);
+    useImperativeHandle(ref, () => innerRef.current);
+    const handleToggleVisibility = () => {
+      setVisible((v) => !v);
+      setTimeout(() => {
+        if (innerRef.current) {
+          const length = innerRef.current.value.length;
+          innerRef.current.setSelectionRange(length, length);
+        }
+      }, 0);
+    };
+    return /* @__PURE__ */ jsx36(
+      Input2,
+      {
+        ...props,
+        ref: innerRef,
+        type: visible ? "text" : "password",
+        value,
+        onChange,
+        suffix: /* @__PURE__ */ jsx36(
+          "button",
+          {
+            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__ */ jsx36(Icon, { name: "EyeClosed", size: 16, color: "black" }) : /* @__PURE__ */ jsx36(Icon, { name: "EyeOpen", size: 16, color: "black" })
+          }
+        )
+      }
+    );
+  }
+);
+PasswordInput.displayName = "PasswordInput";
+export {
+  Avatar2 as Avatar,
+  Box,
+  Button,
+  Calendar2 as Calendar,
+  Carousel,
+  Checkbox2 as Checkbox,
+  Datepicker,
+  Heading,
+  Hr,
+  Icon,
+  Input2 as Input,
+  LabelledValue,
+  Modal,
+  MultiStep,
+  OneTimePassword,
+  PasswordInput,
+  ProgressBar,
+  Radio,
+  Select2 as Select,
+  Spacing,
+  Span5 as Span,
+  Switch2 as Switch,
+  Tabs2 as Tabs,
+  Text,
+  TextArea,
+  TextAreaElement,
+  Toast,
+  Tooltip,
+  config,
+  createTheme,
+  css,
+  getCssText,
+  globalCss,
+  keyframes,
+  styled,
+  theme,
+  toast
+};