@clickpalm/react 1.1.2 → 1.2.1

package/dist/index.js

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.tsx
 var src_exports = {};
 __export(src_exports, {
+  Accordion: () => Accordion2,
   Avatar: () => Avatar2,
   Box: () => Box,
   Button: () => Button,
@@ -37,6 +38,9 @@ __export(src_exports, {
   Carousel: () => Carousel,
   Checkbox: () => Checkbox2,
   Datepicker: () => Datepicker,
+  Dropdown: () => Dropdown,
+  DropdownItem: () => DropdownItem,
+  DropdownSeparator: () => DropdownSeparator,
   Heading: () => Heading,
   Hr: () => Hr,
   Icon: () => Icon,
@@ -1137,7 +1141,8 @@ var CheckboxLabel = styled("label", {
   display: "flex",
   paddingLeft: "$3",
   fontSize: "$md",
-  lineHeight: "$base"
+  lineHeight: "$base",
+  color: "$black"
 });
 var Span = styled("span", {
   fontFamily: "$default",
@@ -1208,7 +1213,7 @@ var TextInputContainer = styled("div", {
   padding: "$4 $4",
   marginBottom: "$6",
   FontSize: "$md",
-  "&:has(input:focus)": {
+  "&:has(input:focus), &:hover": {
     border: "2px solid $clickpalm_light"
   },
   "&:has(input:disabled)": {
@@ -1229,7 +1234,7 @@ var TextInputContainer = styled("div", {
       true: {
         border: "1px solid $danger_dark",
         marginBottom: "0px",
-        "&:has(input:focus)": {
+        "&:has(input:focus), &:hover": {
           border: "2px solid $danger_dark"
         }
       }
@@ -1494,14 +1499,13 @@ var Dialog2 = __toESM(require("@radix-ui/react-dialog"));
 
 // src/components/Modal/styles.ts
 var Dialog = __toESM(require("@radix-ui/react-dialog"));
-var import_react9 = require("@stitches/react");
-var StyledOverlay = (0, import_react9.styled)(Dialog.Overlay, {
+var StyledOverlay = styled(Dialog.Overlay, {
   backgroundColor: "rgba(0, 0, 0, 0.5)",
   position: "fixed",
   inset: 0,
-  zIndex: 999999999
+  zIndex: 101
 });
-var StyledContent = (0, import_react9.styled)(Dialog.Content, {
+var StyledContent = styled(Dialog.Content, {
   position: "fixed",
   top: "50%",
   left: "50%",
@@ -1514,19 +1518,21 @@ var StyledContent = (0, import_react9.styled)(Dialog.Content, {
   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"
+  zIndex: 102,
+  fontFamily: "$default",
+  fontWeight: "$regular"
 });
-var Wrapper = (0, import_react9.styled)("div", {
+var Wrapper = styled("div", {
   display: "flex",
   justifyContent: "space-between",
   alignItems: "center"
 });
-var StyledTitle = (0, import_react9.styled)(Dialog.Title, {
+var StyledTitle = styled(Dialog.Title, {
   fontSize: "$lg",
-  fontWeight: "bold"
+  fontWeight: "bold",
+  color: "$black"
 });
-var StyledClose = (0, import_react9.styled)(Dialog.Close, {
+var StyledClose = styled(Dialog.Close, {
   all: "unset",
   position: "absolute",
   top: "16px",
@@ -1538,15 +1544,22 @@ var StyledClose = (0, import_react9.styled)(Dialog.Close, {
     color: "#333"
   }
 });
-var StyledDivider = (0, import_react9.styled)("hr", {
+var StyledDivider = styled("hr", {
   width: "100%",
   border: "none",
   borderTop: "1px solid $gray_mid"
 });
+var StyledDescription = styled(Dialog.Description, {
+  display: "flex",
+  fontFamily: "$default",
+  fontWeight: "$regular",
+  fontSize: "$md",
+  margin: "$2 0"
+});
 
 // src/components/Modal/index.tsx
 var import_jsx_runtime22 = require("react/jsx-runtime");
-var Modal = ({ open, onOpenChange, title, children }) => {
+var Modal = ({ open, onOpenChange, title, description, children }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Dialog2.Root, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Dialog2.Portal, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StyledOverlay, {}),
     /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(StyledContent, { children: [
@@ -1555,13 +1568,14 @@ var Modal = ({ open, onOpenChange, title, children }) => {
         /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StyledClose, { asChild: true, "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { variant: "secondary", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: "Closed", size: 8 }) }) })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StyledDivider, {}),
+      description && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StyledDescription, { children: description }),
       children
     ] })
   ] }) });
 };
 
 // src/components/ProgressBar/index.tsx
-var import_react10 = require("react");
+var import_react9 = require("react");
 
 // src/components/ProgressBar/styles.ts
 var Progress = __toESM(require("@radix-ui/react-progress"));
@@ -1593,8 +1607,8 @@ var StyledIndicator = styled(Progress.Indicator, {
 // src/components/ProgressBar/index.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var ProgressBar = ({ label, value = 0, max = 100, ...rest }) => {
-  const [progress2, setProgress] = (0, import_react10.useState)(0);
-  (0, import_react10.useEffect)(() => {
+  const [progress2, setProgress] = (0, import_react9.useState)(0);
+  (0, import_react9.useEffect)(() => {
     const timer = setTimeout(() => setProgress(value), 500);
     return () => clearTimeout(timer);
   }, [value]);
@@ -1619,6 +1633,9 @@ var ProgressBar = ({ label, value = 0, max = 100, ...rest }) => {
 };
 ProgressBar.displayName = "ProgressBar";
 
+// src/components/Radio/index.tsx
+var import_react10 = require("react");
+
 // src/components/Radio/styles.ts
 var RadioGroup = __toESM(require("@radix-ui/react-radio-group"));
 var StyledRoot2 = styled(RadioGroup.Root, {
@@ -1712,18 +1729,19 @@ var Span3 = styled("span", {
 
 // src/components/Radio/index.tsx
 var import_jsx_runtime24 = require("react/jsx-runtime");
-var Radio = ({
+var Radio = (0, import_react10.forwardRef)(({
   labels,
   value,
   onChange,
   disabled = false,
   required = false,
   errorMessage
-}) => {
+}, ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("form", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       StyledRoot2,
       {
+        ref,
         value,
         onValueChange: onChange,
         hasError: !!errorMessage,
@@ -1747,7 +1765,8 @@ var Radio = ({
     ),
     errorMessage && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Span3, { children: errorMessage })
   ] });
-};
+});
+Radio.displayName = "Radio";
 
 // src/components/Spacing.tsx
 var import_jsx_runtime25 = require("react/jsx-runtime");
@@ -1765,6 +1784,9 @@ var Spacing = ({ size, axis = "vertical" }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { style, "data-testid": `spacing-${size}-${axis}` });
 };
 
+// src/components/Switch/index.tsx
+var import_react11 = require("react");
+
 // src/components/Switch/styles.ts
 var Switch = __toESM(require("@radix-ui/react-switch"));
 var Wrapper3 = styled("div", {
@@ -1861,7 +1883,7 @@ var Span4 = styled("span", {
 
 // src/components/Switch/index.tsx
 var import_jsx_runtime26 = require("react/jsx-runtime");
-var Switch2 = ({
+var Switch2 = (0, import_react11.forwardRef)(({
   label,
   checked,
   defaultChecked,
@@ -1870,12 +1892,13 @@ var Switch2 = ({
   required = false,
   id,
   errorMessage
-}) => {
+}, ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Wrapper3, { hasError: !!errorMessage, children: [
       /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         StyledRoot3,
         {
+          ref,
           id,
           checked,
           defaultChecked,
@@ -1890,10 +1913,11 @@ var Switch2 = ({
     ] }),
     errorMessage && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Span4, { children: errorMessage })
   ] });
-};
+});
+Switch2.displayName = "Switch";
 
 // src/components/Tabs/index.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 
 // src/components/Tabs/styles.ts
 var Tabs = __toESM(require("@radix-ui/react-tabs"));
@@ -1980,17 +2004,17 @@ var TabsItem = ({ children }) => {
 };
 var Tabs2 = ({ defaultValue, colorContent, children }) => {
   const items = [];
-  const childrenArray = import_react11.Children.toArray(children);
+  const childrenArray = import_react12.Children.toArray(children);
   childrenArray.forEach((child) => {
-    if ((0, import_react11.isValidElement)(child) && child.type === TabsItem) {
+    if ((0, import_react12.isValidElement)(child) && child.type === TabsItem) {
       const { value, label, children: content } = child.props;
       items.push({ value, label, children: content });
     }
   });
-  const listRef = (0, import_react11.useRef)(null);
-  const rootRef = (0, import_react11.useRef)(null);
-  const hasOverflowRef = (0, import_react11.useRef)(false);
-  const [hasOverflow, setHasOverflow] = (0, import_react11.useState)(false);
+  const listRef = (0, import_react12.useRef)(null);
+  const rootRef = (0, import_react12.useRef)(null);
+  const hasOverflowRef = (0, import_react12.useRef)(false);
+  const [hasOverflow, setHasOverflow] = (0, import_react12.useState)(false);
   const checkOverflow = () => {
     const listEl = listRef.current;
     const rootEl = rootRef.current;
@@ -2005,7 +2029,7 @@ var Tabs2 = ({ defaultValue, colorContent, children }) => {
       setHasOverflow(overflow);
     }
   };
-  (0, import_react11.useLayoutEffect)(() => {
+  (0, import_react12.useLayoutEffect)(() => {
     checkOverflow();
     const resizeObserver = new ResizeObserver(checkOverflow);
     if (listRef.current) {
@@ -2084,6 +2108,7 @@ var Tabs2 = ({ defaultValue, colorContent, children }) => {
 Tabs2.Item = TabsItem;
 
 // src/components/TextArea.tsx
+var import_react13 = require("react");
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var Wrapper4 = styled("div", {
   display: "flex",
@@ -2159,14 +2184,24 @@ var Span5 = styled("span", {
   marginTop: "2px",
   marginBottom: "$6"
 });
-var TextArea = ({ label, id, htmlFor, errorMessage, ...props }) => {
-  const textAreaId = id || htmlFor || `textarea-${crypto.randomUUID()}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Wrapper4, { children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(StyledLabel2, { htmlFor: textAreaId, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TextAreaElement, { id: textAreaId, ...props, hasError: !!errorMessage }),
-    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Span5, { children: errorMessage })
-  ] });
-};
+var TextArea = (0, import_react13.forwardRef)(
+  ({ label, id, htmlFor, errorMessage, ...props }, ref) => {
+    const textAreaId = id || htmlFor || `textarea-${crypto.randomUUID()}`;
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Wrapper4, { children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(StyledLabel2, { htmlFor: textAreaId, children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        TextAreaElement,
+        {
+          id: textAreaId,
+          ...props,
+          hasError: !!errorMessage,
+          ref
+        }
+      ),
+      errorMessage && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Span5, { children: errorMessage })
+    ] });
+  }
+);
 TextArea.displayName = "TextArea";
 
 // src/components/Tooltip/index.tsx
@@ -2325,7 +2360,7 @@ var Loader = ({ show, fullscreen = false }) => {
 Loader.displayName = "Loader";
 
 // src/components/MaskedInput/index.tsx
-var import_react12 = require("react");
+var import_react14 = require("react");
 
 // src/components/MaskedInput/utils.ts
 var MAX_LENGTHS = {
@@ -2390,10 +2425,10 @@ var applyMask = (value, maskType) => {
 
 // src/components/MaskedInput/index.tsx
 var import_jsx_runtime31 = require("react/jsx-runtime");
-var MaskedInput = (0, import_react12.forwardRef)(
+var MaskedInput = (0, import_react14.forwardRef)(
   ({ maskType, onChange, ...props }, ref) => {
-    const [value, setValue] = (0, import_react12.useState)("");
-    const inputRef = (0, import_react12.useRef)(null);
+    const [value, setValue] = (0, import_react14.useState)("");
+    const inputRef = (0, import_react14.useRef)(null);
     const handleChange = (e) => {
       const { value: inputValue, selectionStart } = e.target;
       const isBackspace = value.length > inputValue.length;
@@ -2440,8 +2475,112 @@ var MaskedInput = (0, import_react12.forwardRef)(
 );
 MaskedInput.displayName = "MaskedInput";
 
-// src/components/Box.tsx
+// src/components/Dropdown/index.tsx
+var import_react15 = __toESM(require("react"));
+var DropdownMenu2 = __toESM(require("@radix-ui/react-dropdown-menu"));
+
+// src/components/Dropdown/styles.ts
+var DropdownMenu = __toESM(require("@radix-ui/react-dropdown-menu"));
+var slideUpAndFade2 = keyframes({
+  "0%": { opacity: 0, transform: "translateY(2px)" },
+  "100%": { opacity: 1, transform: "translateY(0)" }
+});
+var slideRightAndFade2 = keyframes({
+  "0%": { opacity: 0, transform: "translateX(-2px)" },
+  "100%": { opacity: 1, transform: "translateX(0)" }
+});
+var slideDownAndFade2 = keyframes({
+  "0%": { opacity: 0, transform: "translateY(-2px)" },
+  "100%": { opacity: 1, transform: "translateY(0)" }
+});
+var slideLeftAndFade2 = keyframes({
+  "0%": { opacity: 0, transform: "translateX(2px)" },
+  "100%": { opacity: 1, transform: "translateX(0)" }
+});
+var StyledContent2 = styled(DropdownMenu.Content, {
+  minWidth: 100,
+  backgroundColor: "$white",
+  borderRadius: "$md",
+  padding: "$2",
+  boxShadow: "0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2)",
+  animationDuration: "400ms",
+  animationTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)",
+  willChange: "transform, opacity",
+  '&[data-state="open"]': {
+    '&[data-side="top"]': { animationName: slideDownAndFade2 },
+    '&[data-side="right"]': { animationName: slideLeftAndFade2 },
+    '&[data-side="bottom"]': { animationName: slideUpAndFade2 },
+    '&[data-side="left"]': { animationName: slideRightAndFade2 }
+  }
+});
+var itemStyles = {
+  all: "unset",
+  fontSize: "$sm",
+  lineHeight: 1,
+  color: "$black",
+  borderRadius: "$sm",
+  display: "flex",
+  alignItems: "center",
+  height: 25,
+  padding: "0 $2",
+  position: "relative",
+  paddingLeft: "$5",
+  userSelect: "none",
+  "&[data-disabled]": {
+    color: "$gray_mid",
+    pointerEvents: "none"
+  },
+  "&[data-highlighted]": {
+    color: "$clickpalm_light",
+    cursor: "pointer"
+  },
+  button: {
+    all: "unset",
+    width: "100%",
+    textAlign: "left"
+  }
+};
+var StyledItem2 = styled(DropdownMenu.Item, { ...itemStyles });
+var StyledSeparator = styled(DropdownMenu.Separator, {
+  height: "1px",
+  backgroundColor: "$gray_light",
+  margin: "$2"
+});
+var IconButton = styled("button", {
+  all: "unset",
+  fontFamily: "inherit",
+  borderRadius: "100%",
+  height: 35,
+  width: 35,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: "$clickpalm_light",
+  backgroundColor: "transparent"
+});
+
+// src/components/Dropdown/index.tsx
 var import_jsx_runtime32 = require("react/jsx-runtime");
+var Dropdown = ({ children }) => {
+  const childrenArray = import_react15.Children.toArray(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(DropdownMenu2.Root, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Button, { variant: "secondary", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon, { name: "Dots", size: 16 }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DropdownMenu2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(StyledContent2, { sideOffset: 5, align: "end", children: childrenArray.map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react15.Fragment, { children: [
+      child,
+      index < childrenArray.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DropdownSeparator, {})
+    ] }, index)) }) })
+  ] });
+};
+var DropdownSeparator = StyledSeparator;
+var DropdownItem = import_react15.default.forwardRef(({ children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(StyledItem2, { ...props, ref: forwardedRef, children });
+});
+Dropdown.displayName = "Dropdown";
+DropdownItem.displayName = "DropdownItem";
+DropdownSeparator.displayName = "DropdownSeparator";
+
+// src/components/Box.tsx
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var StyledBox = styled("div", {
   padding: "$5",
   borderRadius: "$md",
@@ -2463,15 +2602,16 @@ var StyledBox = styled("div", {
   }
 });
 var Box = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(StyledBox, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(StyledBox, { ...props });
 };
 Box.displayName = "Box";
 
 // src/components/Paragraph.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var StyledParagraph = styled("p", {
   fontFamily: "$default",
   lineHeight: "$short",
+  color: "$black",
   margin: 0,
   variants: {
     size: {
@@ -2509,13 +2649,13 @@ var StyledParagraph = styled("p", {
   }
 });
 var Paragraph = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(StyledParagraph, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(StyledParagraph, { ...props });
 };
 Paragraph.displayName = "Paragraph";
 
 // src/components/Heading.tsx
-var import_react13 = require("react");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_react16 = require("react");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var StyledHeading = styled("h2", {
   fontFamily: "$default",
   lineHeight: "$shorter",
@@ -2537,15 +2677,15 @@ var StyledHeading = styled("h2", {
     size: "md"
   }
 });
-var Heading = (0, import_react13.forwardRef)(function Heading2({ children, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(StyledHeading, { ref, ...props, children });
+var Heading = (0, import_react16.forwardRef)(function Heading2({ children, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(StyledHeading, { ref, ...props, children });
 });
 Heading.displayName = "Heading";
 
 // src/components/Select/index.tsx
 var import_react_icons2 = require("@radix-ui/react-icons");
 var CustomSelect = __toESM(require("@radix-ui/react-select"));
-var import_react14 = require("react");
+var import_react17 = require("react");
 
 // src/components/Select/styles.ts
 var Select = __toESM(require("@radix-ui/react-select"));
@@ -2574,6 +2714,7 @@ var StyledTrigger = styled(Select.Trigger, {
   fontSize: "$md",
   backgroundColor: "white",
   cursor: "pointer",
+  color: "$black",
   "&[data-placeholder]": {
     color: "$gray_mid"
   },
@@ -2598,25 +2739,27 @@ var StyledTrigger = styled(Select.Trigger, {
     }
   }
 });
-var StyledContent2 = styled(Select.Content, {
+var StyledContent3 = styled(Select.Content, {
   overflow: "hidden",
   backgroundColor: "$gray_background",
   borderRadius: "$md",
   boxShadow: "0px 4px 6px rgba(0, 0, 0, 0.1)",
-  zIndex: 10,
+  zIndex: 103,
   width: "var(--radix-select-trigger-width)",
-  maxHeight: "var(--radix-select-content-available-height)"
+  maxHeight: "var(--radix-select-content-available-height)",
+  fontWeight: "$regular"
 });
 var StyledViewport = styled(Select.Viewport, {
   padding: "4px"
 });
-var StyledItem2 = styled(Select.Item, {
+var StyledItem3 = styled(Select.Item, {
   position: "relative",
   fontSize: "$md",
+  fontWeight: "$regular",
   padding: "14px 12px",
   color: "$black",
   cursor: "pointer",
-  "&[data-highlighted]": {
+  "&[data-highlighted], &:focus, &:hover": {
     outline: "none",
     color: "$clickpalm_light"
   },
@@ -2662,54 +2805,51 @@ var Span6 = styled("span", {
 });
 
 // src/components/Select/index.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
-function Select2({
-  value,
-  onValueChange,
-  items,
-  placeholder = "Selecione",
-  label,
-  errorMessage,
-  ...rest
-}) {
-  const [open, setOpen] = (0, import_react14.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(StyledWrapper4, { children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Label3, { children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
-      CustomSelect.Root,
-      {
-        value,
-        onValueChange,
-        onOpenChange: setOpen,
-        ...rest,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(StyledTrigger, { "aria-label": label, hasError: !!errorMessage, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CustomSelect.Value, { placeholder }),
-            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(StyledIcon, { open, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_icons2.TriangleDownIcon, {}) })
-          ] }),
-          errorMessage && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Span6, { children: errorMessage }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CustomSelect.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
-            StyledContent2,
-            {
-              side: "bottom",
-              align: "start",
-              position: "popper",
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CustomSelect.ScrollUpButton, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_icons2.TriangleUpIcon, {}) }),
-                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(StyledViewport, { children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(StyledItem2, { value: item.value, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CustomSelect.ItemText, { children: item.label }) }, item.value)) }),
-                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CustomSelect.ScrollDownButton, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_icons2.TriangleDownIcon, {}) })
-              ]
-            }
-          ) })
-        ]
-      }
-    )
-  ] });
-}
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var Select2 = (0, import_react17.forwardRef)(
+  ({
+    value,
+    onValueChange,
+    items,
+    placeholder = "Selecione",
+    label,
+    errorMessage,
+    css: css2,
+    className,
+    style,
+    ...rest
+  }, ref) => {
+    const [open, setOpen] = (0, import_react17.useState)(false);
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(StyledWrapper4, { css: css2, className, style, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Label3, { children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+        CustomSelect.Root,
+        {
+          value,
+          onValueChange,
+          onOpenChange: setOpen,
+          ...rest,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(StyledTrigger, { "aria-label": label, hasError: !!errorMessage, ref, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CustomSelect.Value, { placeholder }),
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(StyledIcon, { open, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_icons2.TriangleDownIcon, {}) })
+            ] }),
+            errorMessage && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Span6, { children: errorMessage }),
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CustomSelect.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(StyledContent3, { side: "bottom", align: "start", position: "popper", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CustomSelect.ScrollUpButton, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_icons2.TriangleUpIcon, {}) }),
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(StyledViewport, { children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(StyledItem3, { value: item.value, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CustomSelect.ItemText, { children: item.label }) }, item.value)) }),
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CustomSelect.ScrollDownButton, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_icons2.TriangleDownIcon, {}) })
+            ] }) })
+          ]
+        }
+      )
+    ] });
+  }
+);
 Select2.displayName = "Select";
 
 // src/components/LabelledValue/index.tsx
-var import_react15 = require("react");
+var import_react18 = require("react");
 
 // src/components/LabelledValue/styles.ts
 var Container = styled("div", {
@@ -2770,22 +2910,22 @@ var Value2 = styled("div", {
 });
 
 // src/components/LabelledValue/index.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function LabelledValue({ position = "vertical", withRow = false, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Container, { position, children: import_react15.Children.map(children, (child) => {
-    if ((0, import_react15.isValidElement)(child)) {
-      return (0, import_react15.cloneElement)(child, { position, withRow });
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Container, { position, children: import_react18.Children.map(children, (child) => {
+    if ((0, import_react18.isValidElement)(child)) {
+      return (0, import_react18.cloneElement)(child, { position, withRow });
     }
     return child;
   }) });
 }
-function Item3({ label, value, position = "vertical", withRow = false }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(ItemWrapper, { position, withRow, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Label4, { children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Value2, { children: value })
+function Item4({ label, value, position = "vertical", withRow = false }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(ItemWrapper, { position, withRow, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Label4, { children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Value2, { children: value })
   ] });
 }
-LabelledValue.Item = Item3;
+LabelledValue.Item = Item4;
 
 // src/components/OneTimePassword/index.tsx
 var OneTimePasswordField2 = __toESM(require("@radix-ui/react-one-time-password-field"));
@@ -2814,7 +2954,8 @@ var StyledLabel3 = styled(OneTimePasswordField.Root, {
   display: "flex",
   justifyContent: "center",
   alignItems: "center",
-  marginBottom: "$5"
+  marginBottom: "$5",
+  color: "$black"
 });
 var StyledInput = styled(OneTimePasswordField.Input, {
   all: "unset",
@@ -2853,11 +2994,11 @@ var Span7 = styled("span", {
 });
 
 // src/components/OneTimePassword/index.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var OneTimePassword = ({ label, length, value, errorMessage, onValueChange, ...rootProps }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Container2, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(StyledWrapper5, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(StyledLabel3, { children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Container2, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(StyledWrapper5, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(StyledLabel3, { children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
       StyledRoot4,
       {
         value,
@@ -2865,19 +3006,19 @@ var OneTimePassword = ({ label, length, value, errorMessage, onValueChange, ...r
         ...rootProps,
         style: { "--otp-length": length },
         children: [
-          Array.from({ length }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(StyledInput, {}, index)),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(OneTimePasswordField2.HiddenInput, {})
+          Array.from({ length }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(StyledInput, {}, index)),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(OneTimePasswordField2.HiddenInput, {})
         ]
       }
     ),
-    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Span7, { children: errorMessage })
+    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Span7, { children: errorMessage })
   ] }) });
 };
 OneTimePassword.displayName = "OneTimePasswordInput";
 
 // src/components/Toast/index.tsx
 var ToastPrimitive2 = __toESM(require("@radix-ui/react-toast"));
-var React3 = __toESM(require("react"));
+var React4 = __toESM(require("react"));
 
 // src/components/Toast/styles.ts
 var ToastPrimitive = __toESM(require("@radix-ui/react-toast"));
@@ -2974,7 +3115,7 @@ var ToastViewport = styled(ToastPrimitive.Viewport, {
   outline: "none",
   zIndex: 9999,
   "@lg": {
-    maxWidth: "900px"
+    maxWidth: "700px"
   }
 });
 var progress = keyframes({
@@ -3040,11 +3181,11 @@ var toast = {
 };
 
 // src/components/Toast/index.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var Toast = () => {
-  const [messages, setMessages] = React3.useState([]);
-  const [paused, setPaused] = React3.useState(false);
-  React3.useEffect(() => {
+  const [messages, setMessages] = React4.useState([]);
+  const [paused, setPaused] = React4.useState(false);
+  React4.useEffect(() => {
     const handleNewToast = (msg) => {
       setMessages((prev) => [...prev, msg]);
     };
@@ -3056,8 +3197,8 @@ var Toast = () => {
   const removeToast = (id) => {
     setMessages((prev) => prev.filter((msg) => msg.id !== id));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(ToastPrimitive2.Provider, { swipeDirection: "right", children: [
-    messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(ToastPrimitive2.Provider, { swipeDirection: "right", children: [
+    messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
       ToastRoot,
       {
         open: true,
@@ -3070,11 +3211,11 @@ var Toast = () => {
         onPause: () => setPaused(true),
         onResume: () => setPaused(false),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(ToastContent, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ToastTitle, { children: message.title }),
-            message.description && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ToastDescription, { children: message.description })
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(ToastContent, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ToastTitle, { children: message.title }),
+            message.description && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ToastDescription, { children: message.description })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ToastAction, { altText: "Fechar", asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ToastAction, { altText: "Fechar", asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
             "button",
             {
               style: {
@@ -3084,15 +3225,15 @@ var Toast = () => {
                 alignItems: "center"
               },
               onClick: () => removeToast(message.id),
-              children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Icon, { name: "Closed", size: 16, height: 14, width: 14 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Icon, { name: "Closed", size: 16, height: 14, width: 14 })
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ToastProgress, { paused, variant: message.variant })
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ToastProgress, { paused, variant: message.variant })
         ]
       },
       message.id
     )),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ToastViewport, {})
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ToastViewport, {})
   ] });
 };
 
@@ -3135,7 +3276,6 @@ var StepItem = styled("div", {
 });
 var StepCircle = styled("div", {
   position: "relative",
-  zIndex: 990,
   width: "var(--circle-size)",
   height: "var(--circle-size)",
   borderRadius: "50%",
@@ -3328,22 +3468,22 @@ var StepLabel = styled("span", {
 });
 
 // src/components/MultiStep/index.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var MultiStep = ({
   steps,
   currentStep,
   orientation = "horizontal",
   variant
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     Wrapper5,
     {
       orientation,
       children: steps.map((step, index) => {
         const isFirst = index === 0;
         const isLast = index === steps.length - 1;
-        return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(StepItem, { orientation, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(StepItem, { orientation, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
             StepCircle,
             {
               orientation,
@@ -3354,7 +3494,7 @@ var MultiStep = ({
               children: index + 1
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
             StepLabel,
             {
               orientation,
@@ -3370,7 +3510,7 @@ var MultiStep = ({
 MultiStep.displayName = "MultiStep";
 
 // src/components/Carousel/index.tsx
-var import_react16 = require("react");
+var import_react19 = require("react");
 
 // src/components/Carousel/styles.ts
 var CarouselContainer = styled("div", {
@@ -3476,13 +3616,13 @@ var CarouselItemContainer = styled("div", {
 });
 
 // src/components/Carousel/index.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var SWIPE_THRESHOLD = 50;
 var Carousel = ({ title, variant, children }) => {
-  const items = import_react16.Children.toArray(children);
-  const [activeIndex, setActiveIndex] = (0, import_react16.useState)(0);
-  const [touchStartX, setTouchStartX] = (0, import_react16.useState)(null);
-  const [touchEndX, setTouchEndX] = (0, import_react16.useState)(null);
+  const items = import_react19.Children.toArray(children);
+  const [activeIndex, setActiveIndex] = (0, import_react19.useState)(0);
+  const [touchStartX, setTouchStartX] = (0, import_react19.useState)(null);
+  const [touchEndX, setTouchEndX] = (0, import_react19.useState)(null);
   const prev = () => {
     setActiveIndex((prevIndex) => prevIndex === 0 ? items.length - 1 : prevIndex - 1);
   };
@@ -3510,18 +3650,18 @@ var Carousel = ({ title, variant, children }) => {
     setTouchStartX(null);
     setTouchEndX(null);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
     CarouselContainer,
     {
       role: "region",
       "aria-roledescription": "carousel",
       "aria-label": "Carousel Component",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(Wrapper6, { variant, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(CarouselHeader, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Title2, { children: title }),
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(Navigation, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Wrapper6, { variant, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(CarouselHeader, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Title2, { children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Navigation, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                 Button,
                 {
                   size: "sm",
@@ -3529,10 +3669,10 @@ var Carousel = ({ title, variant, children }) => {
                   "aria-label": "Previous Slide",
                   onClick: prev,
                   tabIndex: 0,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Icon, { name: "TriangleLeft", size: 16, color: variant === "purple" ? "white" : "black" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon, { name: "TriangleLeft", size: 16, color: variant === "purple" ? "white" : "black" })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                 Button,
                 {
                   size: "sm",
@@ -3540,22 +3680,22 @@ var Carousel = ({ title, variant, children }) => {
                   "aria-label": "Previous Slide",
                   onClick: next,
                   tabIndex: 0,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Icon, { name: "TriangleRight", size: 16, color: variant === "purple" ? "white" : "black" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon, { name: "TriangleRight", size: 16, color: variant === "purple" ? "white" : "black" })
                 }
               )
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Spacing, { size: "xs" }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Hr, { variant }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Spacing, { size: "xs" }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Spacing, { size: "xs" }),
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Hr, { variant }),
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Spacing, { size: "xs" }),
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
             CarouselContent,
             {
               onTouchStart,
               onTouchMove,
               onTouchEnd,
               children: items.map(
-                (child, index) => (0, import_react16.cloneElement)(child, {
+                (child, index) => (0, import_react19.cloneElement)(child, {
                   "aria-hidden": index !== activeIndex,
                   style: {
                     display: index === activeIndex ? "block" : "none"
@@ -3565,8 +3705,8 @@ var Carousel = ({ title, variant, children }) => {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Spacing, { size: "md" }),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(DotsContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Dots2, { role: "tablist", "aria-label": "Carousel Pagination", children: items.map((_, idx) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Spacing, { size: "md" }),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DotsContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Dots2, { role: "tablist", "aria-label": "Carousel Pagination", children: items.map((_, idx) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           DotButton,
           {
             active: idx === activeIndex,
@@ -3582,12 +3722,12 @@ var Carousel = ({ title, variant, children }) => {
     }
   );
 };
-var CarouselItem = ({ children, style, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(CarouselItemContainer, { ...props, style: { ...style }, children });
+var CarouselItem = ({ children, style, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CarouselItemContainer, { ...props, style: { ...style }, children });
 Carousel.Item = CarouselItem;
 
 // src/components/PasswordInput.tsx
-var import_react17 = require("react");
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_react20 = require("react");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var ToggleButton = styled("button", {
   all: "unset",
   cursor: "pointer",
@@ -3602,11 +3742,11 @@ var ToggleButton = styled("button", {
     borderRadius: "$sm"
   }
 });
-var PasswordInput = (0, import_react17.forwardRef)(
+var PasswordInput = (0, import_react20.forwardRef)(
   ({ value, onChange, ...props }, ref) => {
-    const [visible, setVisible] = (0, import_react17.useState)(false);
-    const innerRef = (0, import_react17.useRef)(null);
-    (0, import_react17.useImperativeHandle)(ref, () => innerRef.current);
+    const [visible, setVisible] = (0, import_react20.useState)(false);
+    const innerRef = (0, import_react20.useRef)(null);
+    (0, import_react20.useImperativeHandle)(ref, () => innerRef.current);
     const handleToggleVisibility = () => {
       setVisible((v) => !v);
       setTimeout(() => {
@@ -3616,7 +3756,7 @@ var PasswordInput = (0, import_react17.forwardRef)(
         }
       }, 0);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       Input2,
       {
         ...props,
@@ -3624,14 +3764,14 @@ var PasswordInput = (0, import_react17.forwardRef)(
         type: visible ? "text" : "password",
         value,
         onChange,
-        suffix: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        suffix: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           ToggleButton,
           {
             type: "button",
             onClick: handleToggleVisibility,
             onMouseDown: (e) => e.preventDefault(),
             "aria-label": visible ? "Ocultar senha" : "Mostrar senha",
-            children: visible ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon, { name: "EyeClosed", size: 16, color: "black" }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon, { name: "EyeOpen", size: 16, color: "black" })
+            children: visible ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon, { name: "EyeClosed", size: 16, color: "black" }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon, { name: "EyeOpen", size: 16, color: "black" })
           }
         )
       }
@@ -3639,8 +3779,109 @@ var PasswordInput = (0, import_react17.forwardRef)(
   }
 );
 PasswordInput.displayName = "PasswordInput";
+
+// src/components/Accordion/index.tsx
+var RadixAccordion = __toESM(require("@radix-ui/react-accordion"));
+var import_react21 = __toESM(require("react"));
+
+// src/components/Accordion/styles.ts
+var Accordion = __toESM(require("@radix-ui/react-accordion"));
+var AccordionContainer = styled(Accordion.Root, {
+  borderRadius: "$md",
+  width: "100%",
+  backgroundColor: "$white",
+  boxShadow: "0 1px 2px $colors$gray_mid",
+  border: "2px solid $colors$gray_mid"
+});
+var AccordionItem = styled(Accordion.Item, {
+  overflow: "hidden",
+  marginTop: "1px",
+  "&:first-child": {
+    marginTop: 0,
+    borderTopLeftRadius: "$md",
+    borderTopRightRadius: "$md"
+  },
+  "&:last-child": {
+    borderBottomLeftRadius: "$md",
+    borderBottomRightRadius: "$md"
+  }
+});
+var AccordionHeader = styled(Accordion.Header, {
+  display: "flex"
+});
+var AccordionTrigger = styled(Accordion.Trigger, {
+  all: "unset",
+  fontFamily: "$default",
+  backgroundColor: "transparent",
+  padding: "0 $5",
+  flex: 1,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  fontSize: "$md",
+  lineHeight: "$regular",
+  color: "$black",
+  fontWeight: "$bold",
+  width: "100%",
+  "&:hover": {
+    cursor: "pointer"
+  },
+  "&:focus": {
+    cursor: "pointer",
+    outline: "none"
+  }
+});
+var AccordionChevron = styled(Icon, {
+  color: "$ignite_light",
+  transition: "transform 300ms cubic-bezier(0.87, 0, 0.13, 1)",
+  "[data-state=open] &": {
+    transform: "rotate(180deg)"
+  }
+});
+var AccordionContent = styled(Accordion.Content, {
+  overflow: "hidden",
+  fontSize: "$md",
+  color: "$black",
+  borderTop: "1px solid $colors$gray_mid",
+  '&[data-state="open"]': {
+    animation: "slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1)"
+  },
+  '&[data-state="closed"]': {
+    animation: "slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1)"
+  },
+  "> div": {
+    padding: "$5"
+  }
+});
+var TriggerContent = styled("div", {
+  display: "flex",
+  alignItems: "center",
+  gap: "$2"
+});
+var OptionsButton = styled(Button, {
+  marginRight: "$1"
+});
+
+// src/components/Accordion/index.tsx
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var Accordion2 = import_react21.default.forwardRef(
+  ({ title, children, dropdownItems }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(AccordionContainer, { type: "single", collapsible: true, ref, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(AccordionItem, { value: "item-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(AccordionHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(AccordionTrigger, { children: [
+        title,
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(TriggerContent, { children: [
+          dropdownItems && dropdownItems,
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Button, { variant: "secondary", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(AccordionChevron, { name: "TriangleDown", size: 16, "aria-hidden": true }) })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(RadixAccordion.Content, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(AccordionContent, { children }) })
+    ] }) });
+  }
+);
+Accordion2.displayName = "Accordion";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Accordion,
   Avatar,
   Box,
   Button,
@@ -3648,6 +3889,9 @@ PasswordInput.displayName = "PasswordInput";
   Carousel,
   Checkbox,
   Datepicker,
+  Dropdown,
+  DropdownItem,
+  DropdownSeparator,
   Heading,
   Hr,
   Icon,