@clickpalm/react 1.2.0 → 1.2.1

package/dist/index.d.ts

@@ -4,7 +4,7 @@ import * as _stitches_react_types_styled_component from '@stitches/react/types/s
 import * as _stitches_react_types_stitches from '@stitches/react/types/stitches';
 import * as _stitches_react_types_css_util from '@stitches/react/types/css-util';
 import * as react from 'react';
-import react__default, { ComponentProps, ComponentPropsWithoutRef, ElementType, ReactNode, InputHTMLAttributes, SVGProps, CSSProperties } from 'react';
+import react__default, { ComponentProps, ComponentPropsWithoutRef, ElementType, ReactNode, InputHTMLAttributes, CSSProperties, SVGProps } from 'react';
 import * as _stitches_react_types_util from '@stitches/react/types/util';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as Avatar$1 from '@radix-ui/react-avatar';
@@ -2535,10 +2535,10 @@ declare const StyledHr: _stitches_react_types_styled_component.StyledComponent<"
     transition: "transitions";
     zIndex: "zIndices";
 }, {}>>;
-type CustomCSS$4 = CSS<typeof config>;
+type CustomCSS$5 = CSS<typeof config>;
 interface HrProps extends ComponentPropsWithoutRef<'hr'>, VariantProps<typeof StyledHr> {
     as?: ElementType;
-    css?: CustomCSS$4;
+    css?: CustomCSS$5;
     children?: React.ReactNode;
     variant?: 'gray' | 'purple';
 }
@@ -2548,6 +2548,7 @@ interface ModalProps {
     open: boolean;
     onOpenChange: (open: boolean) => void;
     title: string;
+    description?: string;
     children: react__default.ReactNode;
 }
 declare const Modal: react__default.FC<ModalProps>;
@@ -2570,7 +2571,7 @@ interface RadioProps {
     required?: boolean;
     errorMessage?: string;
 }
-declare const Radio: ({ labels, value, onChange, disabled, required, errorMessage }: RadioProps) => react_jsx_runtime.JSX.Element;
+declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLDivElement>>;
 
 type SpacingSize = 'xs' | 'sm' | 'md' | 'lg' | 'xlg' | 'xxlg' | 'xxxlg';
 interface SpacingProps {
@@ -2589,7 +2590,7 @@ interface SwitchProps {
     id?: string;
     errorMessage?: string;
 }
-declare const Switch: ({ label, checked, defaultChecked, onCheckedChange, disabled, required, id, errorMessage }: SwitchProps) => react_jsx_runtime.JSX.Element;
+declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLButtonElement>>;
 
 interface TabsProps {
     defaultValue?: string;
@@ -3051,10 +3052,7 @@ interface TextAreaProps extends ComponentPropsWithoutRef<'textarea'>, VariantPro
     htmlFor?: string;
     errorMessage?: string;
 }
-declare const TextArea: {
-    ({ label, id, htmlFor, errorMessage, ...props }: TextAreaProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
+declare const TextArea: react.ForwardRefExoticComponent<TextAreaProps & react.RefAttributes<HTMLTextAreaElement>>;
 
 interface TooltipProps {
     content: ReactNode;
@@ -3094,11 +3092,12 @@ declare const MaskedInput: react__default.ForwardRefExoticComponent<MaskedInputP
 interface DropdownProps {
     children: react__default.ReactNode;
 }
+type DropdownItemProps = ComponentProps<typeof DropdownMenu.Item>;
 declare const Dropdown: {
     ({ children }: DropdownProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
-declare const DropdownItem: _stitches_react_types_styled_component.StyledComponent<react__default.ForwardRefExoticComponent<DropdownMenu.DropdownMenuItemProps & react__default.RefAttributes<HTMLDivElement>>, {}, {
+declare const DropdownSeparator: _stitches_react_types_styled_component.StyledComponent<react__default.ForwardRefExoticComponent<DropdownMenu.DropdownMenuSeparatorProps & react__default.RefAttributes<HTMLDivElement>>, {}, {
     sm: "(min-width: 375px)";
     md: "(min-width: 768px)";
     lg: "(min-width: 1024px)";
@@ -3317,7 +3316,14 @@ declare const DropdownItem: _stitches_react_types_styled_component.StyledCompone
     transition: "transitions";
     zIndex: "zIndices";
 }, {}>>;
-declare const DropdownSeparator: _stitches_react_types_styled_component.StyledComponent<react__default.ForwardRefExoticComponent<DropdownMenu.DropdownMenuSeparatorProps & react__default.RefAttributes<HTMLDivElement>>, {}, {
+declare const DropdownItem: react__default.ForwardRefExoticComponent<Omit<DropdownMenu.DropdownMenuItemProps & react__default.RefAttributes<HTMLDivElement>, "ref"> & react__default.RefAttributes<HTMLDivElement>>;
+
+declare const StyledButton: _stitches_react_types_styled_component.StyledComponent<"button", {
+    variant?: "primary" | "secondary" | "tertiary" | undefined;
+    size?: "sm" | "md" | "lg" | "xs" | undefined;
+    full?: boolean | "true" | undefined;
+    round?: "md" | "lg" | "xlg" | undefined;
+}, {
     sm: "(min-width: 375px)";
     md: "(min-width: 768px)";
     lg: "(min-width: 1024px)";
@@ -3535,13 +3541,35 @@ declare const DropdownSeparator: _stitches_react_types_styled_component.StyledCo
     textShadow: "shadows";
     transition: "transitions";
     zIndex: "zIndices";
-}, {}>>;
+}, {}>>;
+type CustomCSS$4 = CSS<typeof config>;
+interface ButtonProps extends ComponentPropsWithoutRef<'button'>, VariantProps<typeof StyledButton> {
+    as?: ElementType;
+    css?: CustomCSS$4;
+    children?: React.ReactNode;
+    variant?: 'primary' | 'secondary' | 'tertiary';
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    full?: boolean;
+    round?: 'md' | 'lg' | 'xlg';
+}
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
-declare const StyledButton: _stitches_react_types_styled_component.StyledComponent<"button", {
-    variant?: "primary" | "secondary" | "tertiary" | undefined;
-    size?: "sm" | "md" | "lg" | "xs" | undefined;
-    full?: boolean | "true" | undefined;
-    round?: "md" | "lg" | "xlg" | undefined;
+type CustomCSS$3 = CSS<typeof config>;
+interface BoxProps extends ComponentPropsWithoutRef<'div'>, VariantProps<typeof Box> {
+    as?: ElementType;
+    css?: CustomCSS$3;
+    variant?: 'gray' | 'white';
+    children?: React.ReactNode;
+}
+declare const Box: {
+    (props: BoxProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const StyledParagraph: _stitches_react_types_styled_component.StyledComponent<"p", {
+    size?: "sm" | "md" | "lg" | "xxs" | "xs" | "xl" | "2xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
+    wheight?: "regular" | "medium" | "bold" | undefined;
+    lineHeight?: "regular" | "shorter" | "short" | "base" | "tall" | undefined;
 }, {
     sm: "(min-width: 375px)";
     md: "(min-width: 768px)";
@@ -3761,34 +3789,10 @@ declare const StyledButton: _stitches_react_types_styled_component.StyledCompone
     transition: "transitions";
     zIndex: "zIndices";
 }, {}>>;
-type CustomCSS$3 = CSS<typeof config>;
-interface ButtonProps extends ComponentPropsWithoutRef<'button'>, VariantProps<typeof StyledButton> {
-    as?: ElementType;
-    css?: CustomCSS$3;
-    children?: React.ReactNode;
-    variant?: 'primary' | 'secondary' | 'tertiary';
-    size?: 'xs' | 'sm' | 'md' | 'lg';
-    full?: boolean;
-    round?: 'md' | 'lg' | 'xlg';
-}
-declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
-
 type CustomCSS$2 = CSS<typeof config>;
-interface BoxProps extends ComponentPropsWithoutRef<'div'>, VariantProps<typeof Box> {
+interface ParagraphProps extends ComponentPropsWithoutRef<'p'>, VariantProps<typeof StyledParagraph> {
     as?: ElementType;
     css?: CustomCSS$2;
-    variant?: 'gray' | 'white';
-    children?: React.ReactNode;
-}
-declare const Box: {
-    (props: BoxProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-type CustomCSS$1 = CSS<typeof config>;
-interface ParagraphProps extends ComponentPropsWithoutRef<'p'>, VariantProps<typeof Paragraph> {
-    as?: ElementType;
-    css?: CustomCSS$1;
     size?: "sm" | "md" | "lg" | "xxs" | "xs" | "xl" | "2xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl";
     wheight?: "regular" | "medium" | "bold";
     lineHeight?: "regular" | "shorter" | "short" | "base" | "tall";
@@ -4019,10 +4023,10 @@ declare const StyledHeading: _stitches_react_types_styled_component.StyledCompon
     transition: "transitions";
     zIndex: "zIndices";
 }, {}>>;
-type CustomCSS = CSS<typeof config>;
+type CustomCSS$1 = CSS<typeof config>;
 interface HeadingProps extends ComponentPropsWithoutRef<'h2'>, VariantProps<typeof StyledHeading> {
     as?: ElementType;
-    css?: CustomCSS;
+    css?: CustomCSS$1;
     children?: React.ReactNode;
     size?: 'sm' | 'md' | 'lg' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
 }
@@ -4032,16 +4036,17 @@ interface SelectItem {
     value: string;
     label: string;
 }
+type CustomCSS = CSS<typeof config>;
 interface SelectProps extends ComponentProps<typeof CustomSelect.Root> {
     items: SelectItem[];
     placeholder?: string;
     label?: string;
     errorMessage?: string;
+    css?: CustomCSS;
+    className?: string;
+    style?: CSSProperties;
 }
-declare function Select({ value, onValueChange, items, placeholder, label, errorMessage, ...rest }: SelectProps): react_jsx_runtime.JSX.Element;
-declare namespace Select {
-    var displayName: string;
-}
+declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLButtonElement>>;
 
 interface LabelledValueProps {
     position?: 'vertical' | 'horizontal';
@@ -4130,4 +4135,4 @@ interface AccordionProps {
 }
 declare const Accordion: react__default.ForwardRefExoticComponent<AccordionProps & react__default.RefAttributes<HTMLDivElement>>;
 
-export { Accordion, Avatar, AvatarProps, AvatarSize, AvatarStatus, Box, BoxProps, Button, ButtonProps, Calendar, Carousel, CarouselProps, Checkbox, CheckboxProps, Datepicker, Dropdown, DropdownItem, DropdownSeparator, Heading, HeadingProps, Hr, HrProps, Icon, IconProps, Input, LabelledValue, LabelledValueProps, Loader, MaskType, MaskedInput, MaskedInputProps, Modal, MultiStep, MultiStepProps, OneTimePassword, OneTimePasswordProps, Paragraph, ParagraphProps, PasswordInput, PasswordInputProps, ProgressBar, ProgressBarProps, Radio, RadioProps, Select, SelectProps, Spacing, Span, StyledHr, Switch, SwitchProps, Tabs, TextArea, TextAreaElement, TextAreaProps, TextInputProps, Toast, Tooltip, TooltipProps, config, createTheme, css, getCssText, globalCss, keyframes, styled, theme, toast };
+export { Accordion, Avatar, AvatarProps, AvatarSize, AvatarStatus, Box, BoxProps, Button, ButtonProps, Calendar, Carousel, CarouselProps, Checkbox, CheckboxProps, Datepicker, Dropdown, DropdownItem, DropdownItemProps, DropdownSeparator, Heading, HeadingProps, Hr, HrProps, Icon, IconProps, Input, LabelledValue, LabelledValueProps, Loader, MaskType, MaskedInput, MaskedInputProps, Modal, MultiStep, MultiStepProps, OneTimePassword, OneTimePasswordProps, Paragraph, ParagraphProps, PasswordInput, PasswordInputProps, ProgressBar, ProgressBarProps, Radio, RadioProps, Select, SelectProps, Spacing, Span, StyledHr, Switch, SwitchProps, Tabs, TextArea, TextAreaElement, TextAreaProps, TextInputProps, Toast, Tooltip, TooltipProps, config, createTheme, css, getCssText, globalCss, keyframes, styled, theme, toast };

package/dist/index.js

@@ -1141,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",
@@ -1212,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)": {
@@ -1233,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"
         }
       }
@@ -1498,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%",
@@ -1518,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",
@@ -1542,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: [
@@ -1559,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"));
@@ -1597,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]);
@@ -1623,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, {
@@ -1716,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,
@@ -1751,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");
@@ -1769,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", {
@@ -1865,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,
@@ -1874,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,
@@ -1894,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"));
@@ -1984,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;
@@ -2009,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) {
@@ -2088,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",
@@ -2163,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
@@ -2329,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 = {
@@ -2394,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;
@@ -2445,7 +2476,7 @@ var MaskedInput = (0, import_react12.forwardRef)(
 MaskedInput.displayName = "MaskedInput";
 
 // src/components/Dropdown/index.tsx
-var import_react13 = require("react");
+var import_react15 = __toESM(require("react"));
 var DropdownMenu2 = __toESM(require("@radix-ui/react-dropdown-menu"));
 
 // src/components/Dropdown/styles.ts
@@ -2531,17 +2562,19 @@ var IconButton = styled("button", {
 // src/components/Dropdown/index.tsx
 var import_jsx_runtime32 = require("react/jsx-runtime");
 var Dropdown = ({ children }) => {
-  const childrenArray = import_react13.Children.toArray(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_react13.Fragment, { children: [
+    /* @__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 DropdownItem = StyledItem2;
 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";
@@ -2578,6 +2611,7 @@ var import_jsx_runtime34 = require("react/jsx-runtime");
 var StyledParagraph = styled("p", {
   fontFamily: "$default",
   lineHeight: "$short",
+  color: "$black",
   margin: 0,
   variants: {
     size: {
@@ -2620,7 +2654,7 @@ var Paragraph = (props) => {
 Paragraph.displayName = "Paragraph";
 
 // src/components/Heading.tsx
-var import_react14 = require("react");
+var import_react16 = require("react");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var StyledHeading = styled("h2", {
   fontFamily: "$default",
@@ -2643,7 +2677,7 @@ var StyledHeading = styled("h2", {
     size: "md"
   }
 });
-var Heading = (0, import_react14.forwardRef)(function Heading2({ children, ...props }, ref) {
+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";
@@ -2651,7 +2685,7 @@ 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_react15 = require("react");
+var import_react17 = require("react");
 
 // src/components/Select/styles.ts
 var Select = __toESM(require("@radix-ui/react-select"));
@@ -2680,6 +2714,7 @@ var StyledTrigger = styled(Select.Trigger, {
   fontSize: "$md",
   backgroundColor: "white",
   cursor: "pointer",
+  color: "$black",
   "&[data-placeholder]": {
     color: "$gray_mid"
   },
@@ -2709,9 +2744,10 @@ var StyledContent3 = styled(Select.Content, {
   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"
@@ -2719,10 +2755,11 @@ var StyledViewport = styled(Select.Viewport, {
 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"
   },
@@ -2769,53 +2806,50 @@ var Span6 = styled("span", {
 
 // src/components/Select/index.tsx
 var import_jsx_runtime36 = require("react/jsx-runtime");
-function Select2({
-  value,
-  onValueChange,
-  items,
-  placeholder = "Selecione",
-  label,
-  errorMessage,
-  ...rest
-}) {
-  const [open, setOpen] = (0, import_react15.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(StyledWrapper4, { 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, 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, {}) })
-              ]
-            }
-          ) })
-        ]
-      }
-    )
-  ] });
-}
+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_react16 = require("react");
+var import_react18 = require("react");
 
 // src/components/LabelledValue/styles.ts
 var Container = styled("div", {
@@ -2878,9 +2912,9 @@ var Value2 = styled("div", {
 // src/components/LabelledValue/index.tsx
 var import_jsx_runtime37 = require("react/jsx-runtime");
 function LabelledValue({ position = "vertical", withRow = false, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Container, { position, children: import_react16.Children.map(children, (child) => {
-    if ((0, import_react16.isValidElement)(child)) {
-      return (0, import_react16.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;
   }) });
@@ -2920,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",
@@ -3080,7 +3115,7 @@ var ToastViewport = styled(ToastPrimitive.Viewport, {
   outline: "none",
   zIndex: 9999,
   "@lg": {
-    maxWidth: "900px"
+    maxWidth: "700px"
   }
 });
 var progress = keyframes({
@@ -3241,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%",
@@ -3476,7 +3510,7 @@ var MultiStep = ({
 MultiStep.displayName = "MultiStep";
 
 // src/components/Carousel/index.tsx
-var import_react17 = require("react");
+var import_react19 = require("react");
 
 // src/components/Carousel/styles.ts
 var CarouselContainer = styled("div", {
@@ -3585,10 +3619,10 @@ var CarouselItemContainer = styled("div", {
 var import_jsx_runtime41 = require("react/jsx-runtime");
 var SWIPE_THRESHOLD = 50;
 var Carousel = ({ title, variant, children }) => {
-  const items = import_react17.Children.toArray(children);
-  const [activeIndex, setActiveIndex] = (0, import_react17.useState)(0);
-  const [touchStartX, setTouchStartX] = (0, import_react17.useState)(null);
-  const [touchEndX, setTouchEndX] = (0, import_react17.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);
   };
@@ -3661,7 +3695,7 @@ var Carousel = ({ title, variant, children }) => {
               onTouchMove,
               onTouchEnd,
               children: items.map(
-                (child, index) => (0, import_react17.cloneElement)(child, {
+                (child, index) => (0, import_react19.cloneElement)(child, {
                   "aria-hidden": index !== activeIndex,
                   style: {
                     display: index === activeIndex ? "block" : "none"
@@ -3692,7 +3726,7 @@ var CarouselItem = ({ children, style, ...props }) => /* @__PURE__ */ (0, import
 Carousel.Item = CarouselItem;
 
 // src/components/PasswordInput.tsx
-var import_react18 = require("react");
+var import_react20 = require("react");
 var import_jsx_runtime42 = require("react/jsx-runtime");
 var ToggleButton = styled("button", {
   all: "unset",
@@ -3708,11 +3742,11 @@ var ToggleButton = styled("button", {
     borderRadius: "$sm"
   }
 });
-var PasswordInput = (0, import_react18.forwardRef)(
+var PasswordInput = (0, import_react20.forwardRef)(
   ({ value, onChange, ...props }, ref) => {
-    const [visible, setVisible] = (0, import_react18.useState)(false);
-    const innerRef = (0, import_react18.useRef)(null);
-    (0, import_react18.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(() => {
@@ -3748,7 +3782,7 @@ PasswordInput.displayName = "PasswordInput";
 
 // src/components/Accordion/index.tsx
 var RadixAccordion = __toESM(require("@radix-ui/react-accordion"));
-var import_react19 = __toESM(require("react"));
+var import_react21 = __toESM(require("react"));
 
 // src/components/Accordion/styles.ts
 var Accordion = __toESM(require("@radix-ui/react-accordion"));
@@ -3830,7 +3864,7 @@ var OptionsButton = styled(Button, {
 
 // src/components/Accordion/index.tsx
 var import_jsx_runtime43 = require("react/jsx-runtime");
-var Accordion2 = import_react19.default.forwardRef(
+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: [

package/dist/index.mjs

@@ -1069,7 +1069,8 @@ var CheckboxLabel = styled("label", {
   display: "flex",
   paddingLeft: "$3",
   fontSize: "$md",
-  lineHeight: "$base"
+  lineHeight: "$base",
+  color: "$black"
 });
 var Span = styled("span", {
   fontFamily: "$default",
@@ -1140,7 +1141,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)": {
@@ -1161,7 +1162,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"
         }
       }
@@ -1426,14 +1427,13 @@ 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, {
+var StyledOverlay = styled(Dialog.Overlay, {
   backgroundColor: "rgba(0, 0, 0, 0.5)",
   position: "fixed",
   inset: 0,
-  zIndex: 999999999
+  zIndex: 101
 });
-var StyledContent = styled2(Dialog.Content, {
+var StyledContent = styled(Dialog.Content, {
   position: "fixed",
   top: "50%",
   left: "50%",
@@ -1446,19 +1446,21 @@ var StyledContent = styled2(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 = styled2("div", {
+var Wrapper = styled("div", {
   display: "flex",
   justifyContent: "space-between",
   alignItems: "center"
 });
-var StyledTitle = styled2(Dialog.Title, {
+var StyledTitle = styled(Dialog.Title, {
   fontSize: "$lg",
-  fontWeight: "bold"
+  fontWeight: "bold",
+  color: "$black"
 });
-var StyledClose = styled2(Dialog.Close, {
+var StyledClose = styled(Dialog.Close, {
   all: "unset",
   position: "absolute",
   top: "16px",
@@ -1470,15 +1472,22 @@ var StyledClose = styled2(Dialog.Close, {
     color: "#333"
   }
 });
-var StyledDivider = styled2("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
 import { jsx as jsx22, jsxs as jsxs6 } from "react/jsx-runtime";
-var Modal = ({ open, onOpenChange, title, children }) => {
+var Modal = ({ open, onOpenChange, title, description, children }) => {
   return /* @__PURE__ */ jsx22(Dialog2.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs6(Dialog2.Portal, { children: [
     /* @__PURE__ */ jsx22(StyledOverlay, {}),
     /* @__PURE__ */ jsxs6(StyledContent, { children: [
@@ -1487,6 +1496,7 @@ var Modal = ({ open, onOpenChange, title, children }) => {
         /* @__PURE__ */ jsx22(StyledClose, { asChild: true, "aria-label": "Close", children: /* @__PURE__ */ jsx22(Button, { variant: "secondary", size: "sm", children: /* @__PURE__ */ jsx22(Icon, { name: "Closed", size: 8 }) }) })
       ] }),
       /* @__PURE__ */ jsx22(StyledDivider, {}),
+      description && /* @__PURE__ */ jsx22(StyledDescription, { children: description }),
       children
     ] })
   ] }) });
@@ -1551,6 +1561,9 @@ var ProgressBar = ({ label, value = 0, max = 100, ...rest }) => {
 };
 ProgressBar.displayName = "ProgressBar";
 
+// src/components/Radio/index.tsx
+import { forwardRef as forwardRef5 } from "react";
+
 // src/components/Radio/styles.ts
 import * as RadioGroup from "@radix-ui/react-radio-group";
 var StyledRoot2 = styled(RadioGroup.Root, {
@@ -1644,18 +1657,19 @@ var Span3 = styled("span", {
 
 // src/components/Radio/index.tsx
 import { jsx as jsx24, jsxs as jsxs8 } from "react/jsx-runtime";
-var Radio = ({
+var Radio = forwardRef5(({
   labels,
   value,
   onChange,
   disabled = false,
   required = false,
   errorMessage
-}) => {
+}, ref) => {
   return /* @__PURE__ */ jsxs8("form", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" }, children: [
     /* @__PURE__ */ jsx24(
       StyledRoot2,
       {
+        ref,
         value,
         onValueChange: onChange,
         hasError: !!errorMessage,
@@ -1679,7 +1693,8 @@ var Radio = ({
     ),
     errorMessage && /* @__PURE__ */ jsx24(Span3, { children: errorMessage })
   ] });
-};
+});
+Radio.displayName = "Radio";
 
 // src/components/Spacing.tsx
 import { jsx as jsx25 } from "react/jsx-runtime";
@@ -1697,6 +1712,9 @@ var Spacing = ({ size, axis = "vertical" }) => {
   return /* @__PURE__ */ jsx25("div", { style, "data-testid": `spacing-${size}-${axis}` });
 };
 
+// src/components/Switch/index.tsx
+import { forwardRef as forwardRef6 } from "react";
+
 // src/components/Switch/styles.ts
 import * as Switch from "@radix-ui/react-switch";
 var Wrapper3 = styled("div", {
@@ -1793,7 +1811,7 @@ var Span4 = styled("span", {
 
 // src/components/Switch/index.tsx
 import { jsx as jsx26, jsxs as jsxs9 } from "react/jsx-runtime";
-var Switch2 = ({
+var Switch2 = forwardRef6(({
   label,
   checked,
   defaultChecked,
@@ -1802,12 +1820,13 @@ var Switch2 = ({
   required = false,
   id,
   errorMessage
-}) => {
+}, ref) => {
   return /* @__PURE__ */ jsxs9("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" }, children: [
     /* @__PURE__ */ jsxs9(Wrapper3, { hasError: !!errorMessage, children: [
       /* @__PURE__ */ jsx26(
         StyledRoot3,
         {
+          ref,
           id,
           checked,
           defaultChecked,
@@ -1822,7 +1841,8 @@ var Switch2 = ({
     ] }),
     errorMessage && /* @__PURE__ */ jsx26(Span4, { children: errorMessage })
   ] });
-};
+});
+Switch2.displayName = "Switch";
 
 // src/components/Tabs/index.tsx
 import { Children, isValidElement, useLayoutEffect, useRef as useRef4, useState as useState4 } from "react";
@@ -2016,6 +2036,7 @@ var Tabs2 = ({ defaultValue, colorContent, children }) => {
 Tabs2.Item = TabsItem;
 
 // src/components/TextArea.tsx
+import { forwardRef as forwardRef7 } from "react";
 import { jsx as jsx28, jsxs as jsxs11 } from "react/jsx-runtime";
 var Wrapper4 = styled("div", {
   display: "flex",
@@ -2091,14 +2112,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__ */ jsxs11(Wrapper4, { children: [
-    label && /* @__PURE__ */ jsx28(StyledLabel2, { htmlFor: textAreaId, children: label }),
-    /* @__PURE__ */ jsx28(TextAreaElement, { id: textAreaId, ...props, hasError: !!errorMessage }),
-    errorMessage && /* @__PURE__ */ jsx28(Span5, { children: errorMessage })
-  ] });
-};
+var TextArea = forwardRef7(
+  ({ label, id, htmlFor, errorMessage, ...props }, ref) => {
+    const textAreaId = id || htmlFor || `textarea-${crypto.randomUUID()}`;
+    return /* @__PURE__ */ jsxs11(Wrapper4, { children: [
+      label && /* @__PURE__ */ jsx28(StyledLabel2, { htmlFor: textAreaId, children: label }),
+      /* @__PURE__ */ jsx28(
+        TextAreaElement,
+        {
+          id: textAreaId,
+          ...props,
+          hasError: !!errorMessage,
+          ref
+        }
+      ),
+      errorMessage && /* @__PURE__ */ jsx28(Span5, { children: errorMessage })
+    ] });
+  }
+);
 TextArea.displayName = "TextArea";
 
 // src/components/Tooltip/index.tsx
@@ -2257,7 +2288,7 @@ var Loader = ({ show, fullscreen = false }) => {
 Loader.displayName = "Loader";
 
 // src/components/MaskedInput/index.tsx
-import { forwardRef as forwardRef5, useState as useState5, useRef as useRef5 } from "react";
+import { forwardRef as forwardRef8, useState as useState5, useRef as useRef5 } from "react";
 
 // src/components/MaskedInput/utils.ts
 var MAX_LENGTHS = {
@@ -2322,7 +2353,7 @@ var applyMask = (value, maskType) => {
 
 // src/components/MaskedInput/index.tsx
 import { jsx as jsx31 } from "react/jsx-runtime";
-var MaskedInput = forwardRef5(
+var MaskedInput = forwardRef8(
   ({ maskType, onChange, ...props }, ref) => {
     const [value, setValue] = useState5("");
     const inputRef = useRef5(null);
@@ -2373,7 +2404,7 @@ var MaskedInput = forwardRef5(
 MaskedInput.displayName = "MaskedInput";
 
 // src/components/Dropdown/index.tsx
-import { Children as Children2, Fragment as Fragment2 } from "react";
+import React3, { Children as Children2, Fragment as Fragment2 } from "react";
 import * as DropdownMenu2 from "@radix-ui/react-dropdown-menu";
 
 // src/components/Dropdown/styles.ts
@@ -2468,8 +2499,10 @@ var Dropdown = ({ children }) => {
     ] }, index)) }) })
   ] });
 };
-var DropdownItem = StyledItem2;
 var DropdownSeparator = StyledSeparator;
+var DropdownItem = React3.forwardRef(({ children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ jsx32(StyledItem2, { ...props, ref: forwardedRef, children });
+});
 Dropdown.displayName = "Dropdown";
 DropdownItem.displayName = "DropdownItem";
 DropdownSeparator.displayName = "DropdownSeparator";
@@ -2506,6 +2539,7 @@ import { jsx as jsx34 } from "react/jsx-runtime";
 var StyledParagraph = styled("p", {
   fontFamily: "$default",
   lineHeight: "$short",
+  color: "$black",
   margin: 0,
   variants: {
     size: {
@@ -2548,7 +2582,7 @@ var Paragraph = (props) => {
 Paragraph.displayName = "Paragraph";
 
 // src/components/Heading.tsx
-import { forwardRef as forwardRef6 } from "react";
+import { forwardRef as forwardRef9 } from "react";
 import { jsx as jsx35 } from "react/jsx-runtime";
 var StyledHeading = styled("h2", {
   fontFamily: "$default",
@@ -2571,7 +2605,7 @@ var StyledHeading = styled("h2", {
     size: "md"
   }
 });
-var Heading = forwardRef6(function Heading2({ children, ...props }, ref) {
+var Heading = forwardRef9(function Heading2({ children, ...props }, ref) {
   return /* @__PURE__ */ jsx35(StyledHeading, { ref, ...props, children });
 });
 Heading.displayName = "Heading";
@@ -2579,7 +2613,7 @@ 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 useState6 } from "react";
+import { forwardRef as forwardRef10, useState as useState6 } from "react";
 
 // src/components/Select/styles.ts
 import * as Select from "@radix-ui/react-select";
@@ -2608,6 +2642,7 @@ var StyledTrigger = styled(Select.Trigger, {
   fontSize: "$md",
   backgroundColor: "white",
   cursor: "pointer",
+  color: "$black",
   "&[data-placeholder]": {
     color: "$gray_mid"
   },
@@ -2637,9 +2672,10 @@ var StyledContent3 = styled(Select.Content, {
   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"
@@ -2647,10 +2683,11 @@ var StyledViewport = styled(Select.Viewport, {
 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"
   },
@@ -2697,49 +2734,46 @@ var Span6 = styled("span", {
 
 // src/components/Select/index.tsx
 import { jsx as jsx36, jsxs as jsxs14 } from "react/jsx-runtime";
-function Select2({
-  value,
-  onValueChange,
-  items,
-  placeholder = "Selecione",
-  label,
-  errorMessage,
-  ...rest
-}) {
-  const [open, setOpen] = useState6(false);
-  return /* @__PURE__ */ jsxs14(StyledWrapper4, { children: [
-    label && /* @__PURE__ */ jsx36(Label3, { children: label }),
-    /* @__PURE__ */ jsxs14(
-      CustomSelect.Root,
-      {
-        value,
-        onValueChange,
-        onOpenChange: setOpen,
-        ...rest,
-        children: [
-          /* @__PURE__ */ jsxs14(StyledTrigger, { "aria-label": label, hasError: !!errorMessage, children: [
-            /* @__PURE__ */ jsx36(CustomSelect.Value, { placeholder }),
-            /* @__PURE__ */ jsx36(StyledIcon, { open, children: /* @__PURE__ */ jsx36(TriangleDownIcon, {}) })
-          ] }),
-          errorMessage && /* @__PURE__ */ jsx36(Span6, { children: errorMessage }),
-          /* @__PURE__ */ jsx36(CustomSelect.Portal, { children: /* @__PURE__ */ jsxs14(
-            StyledContent3,
-            {
-              side: "bottom",
-              align: "start",
-              position: "popper",
-              children: [
-                /* @__PURE__ */ jsx36(CustomSelect.ScrollUpButton, { children: /* @__PURE__ */ jsx36(TriangleUpIcon, {}) }),
-                /* @__PURE__ */ jsx36(StyledViewport, { children: items.map((item) => /* @__PURE__ */ jsx36(StyledItem3, { value: item.value, children: /* @__PURE__ */ jsx36(CustomSelect.ItemText, { children: item.label }) }, item.value)) }),
-                /* @__PURE__ */ jsx36(CustomSelect.ScrollDownButton, { children: /* @__PURE__ */ jsx36(TriangleDownIcon, {}) })
-              ]
-            }
-          ) })
-        ]
-      }
-    )
-  ] });
-}
+var Select2 = forwardRef10(
+  ({
+    value,
+    onValueChange,
+    items,
+    placeholder = "Selecione",
+    label,
+    errorMessage,
+    css: css2,
+    className,
+    style,
+    ...rest
+  }, ref) => {
+    const [open, setOpen] = useState6(false);
+    return /* @__PURE__ */ jsxs14(StyledWrapper4, { css: css2, className, style, children: [
+      label && /* @__PURE__ */ jsx36(Label3, { children: label }),
+      /* @__PURE__ */ jsxs14(
+        CustomSelect.Root,
+        {
+          value,
+          onValueChange,
+          onOpenChange: setOpen,
+          ...rest,
+          children: [
+            /* @__PURE__ */ jsxs14(StyledTrigger, { "aria-label": label, hasError: !!errorMessage, ref, children: [
+              /* @__PURE__ */ jsx36(CustomSelect.Value, { placeholder }),
+              /* @__PURE__ */ jsx36(StyledIcon, { open, children: /* @__PURE__ */ jsx36(TriangleDownIcon, {}) })
+            ] }),
+            errorMessage && /* @__PURE__ */ jsx36(Span6, { children: errorMessage }),
+            /* @__PURE__ */ jsx36(CustomSelect.Portal, { children: /* @__PURE__ */ jsxs14(StyledContent3, { side: "bottom", align: "start", position: "popper", children: [
+              /* @__PURE__ */ jsx36(CustomSelect.ScrollUpButton, { children: /* @__PURE__ */ jsx36(TriangleUpIcon, {}) }),
+              /* @__PURE__ */ jsx36(StyledViewport, { children: items.map((item) => /* @__PURE__ */ jsx36(StyledItem3, { value: item.value, children: /* @__PURE__ */ jsx36(CustomSelect.ItemText, { children: item.label }) }, item.value)) }),
+              /* @__PURE__ */ jsx36(CustomSelect.ScrollDownButton, { children: /* @__PURE__ */ jsx36(TriangleDownIcon, {}) })
+            ] }) })
+          ]
+        }
+      )
+    ] });
+  }
+);
 Select2.displayName = "Select";
 
 // src/components/LabelledValue/index.tsx
@@ -2852,7 +2886,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",
@@ -3012,7 +3047,7 @@ var ToastViewport = styled(ToastPrimitive.Viewport, {
   outline: "none",
   zIndex: 9999,
   "@lg": {
-    maxWidth: "900px"
+    maxWidth: "700px"
   }
 });
 var progress = keyframes({
@@ -3173,7 +3208,6 @@ var StepItem = styled("div", {
 });
 var StepCircle = styled("div", {
   position: "relative",
-  zIndex: 990,
   width: "var(--circle-size)",
   height: "var(--circle-size)",
   borderRadius: "50%",
@@ -3624,7 +3658,7 @@ var CarouselItem = ({ children, style, ...props }) => /* @__PURE__ */ jsx41(Caro
 Carousel.Item = CarouselItem;
 
 // src/components/PasswordInput.tsx
-import { forwardRef as forwardRef7, useImperativeHandle, useRef as useRef6, useState as useState9 } from "react";
+import { forwardRef as forwardRef11, useImperativeHandle, useRef as useRef6, useState as useState9 } from "react";
 import { jsx as jsx42 } from "react/jsx-runtime";
 var ToggleButton = styled("button", {
   all: "unset",
@@ -3640,7 +3674,7 @@ var ToggleButton = styled("button", {
     borderRadius: "$sm"
   }
 });
-var PasswordInput = forwardRef7(
+var PasswordInput = forwardRef11(
   ({ value, onChange, ...props }, ref) => {
     const [visible, setVisible] = useState9(false);
     const innerRef = useRef6(null);

package/package.json

@@ -3,7 +3,7 @@
 	"description": "Design System da Clikpalm",
 	"author": "Enisson Shilo",
 	"license": "MIT",
-	"version": "1.2.0",
+	"version": "1.2.1",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/clickpalm/clickpalm-designsystem-lib.git"