analytica-frontend-lib 1.0.31 → 1.0.32

package/dist/index.js

@@ -24,6 +24,7 @@ __export(src_exports, {
   Badge: () => Badge_default,
   Button: () => Button_default,
   CheckBox: () => CheckBox_default,
+  Chips: () => Chips_default,
   Divider: () => Divider_default,
   DropdownMenu: () => DropdownMenu_default,
   DropdownMenuContent: () => MenuContent,
@@ -35,6 +36,7 @@ __export(src_exports, {
   IconRoundedButton: () => IconRoundedButton_default,
   Input: () => Input_default,
   NavButton: () => NavButton_default,
+  Radio: () => Radio_default,
   SelectionButton: () => SelectionButton_default,
   Table: () => Table_default,
   Text: () => Text_default,
@@ -809,10 +811,231 @@ var CheckBox = (0, import_react5.forwardRef)(
 CheckBox.displayName = "CheckBox";
 var CheckBox_default = CheckBox;
 
-// src/components/TextArea/TextArea.tsx
+// src/components/Radio/Radio.tsx
 var import_react6 = require("react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var SIZE_CLASSES4 = {
+  small: {
+    radio: "w-5 h-5",
+    // 20px x 20px
+    textSize: "sm",
+    spacing: "gap-1.5",
+    // 6px
+    borderWidth: "border-2",
+    dotSize: "w-1.5 h-1.5",
+    // 6px inner dot
+    labelHeight: "h-5"
+  },
+  medium: {
+    radio: "w-6 h-6",
+    // 24px x 24px
+    textSize: "md",
+    spacing: "gap-2",
+    // 8px
+    borderWidth: "border-2",
+    dotSize: "w-2 h-2",
+    // 8px inner dot
+    labelHeight: "h-6"
+  },
+  large: {
+    radio: "w-7 h-7",
+    // 28px x 28px
+    textSize: "lg",
+    spacing: "gap-2",
+    // 8px
+    borderWidth: "border-2",
+    // 2px border (consistent with others)
+    dotSize: "w-2.5 h-2.5",
+    // 10px inner dot
+    labelHeight: "h-7"
+  },
+  extraLarge: {
+    radio: "w-8 h-8",
+    // 32px x 32px (larger than large)
+    textSize: "xl",
+    spacing: "gap-3",
+    // 12px
+    borderWidth: "border-2",
+    // 2px border (consistent with others)
+    dotSize: "w-3 h-3",
+    // 12px inner dot
+    labelHeight: "h-8"
+  }
+};
+var BASE_RADIO_CLASSES = "rounded-full border cursor-pointer transition-all duration-200 flex items-center justify-center focus:outline-none";
+var STATE_CLASSES2 = {
+  default: {
+    unchecked: "border-border-400 bg-background hover:border-border-500",
+    checked: "border-primary-950 bg-background hover:border-primary-800"
+  },
+  hovered: {
+    unchecked: "border-border-500 bg-background",
+    // #8C8D8D hover state for unchecked
+    checked: "border-info-700 bg-background"
+    // Adjust checked border for hover
+  },
+  focused: {
+    unchecked: "border-border-400 bg-background",
+    // #A5A3A3 for unchecked radio
+    checked: "border-primary-950 bg-background"
+    // #124393 for checked radio
+  },
+  invalid: {
+    unchecked: "border-border-400 bg-background",
+    // #A5A3A3 for unchecked radio
+    checked: "border-primary-950 bg-background"
+    // #124393 for checked radio
+  },
+  disabled: {
+    unchecked: "border-border-400 bg-background cursor-not-allowed",
+    // #A5A3A3 for unchecked radio
+    checked: "border-primary-950 bg-background cursor-not-allowed"
+    // #124393 for checked radio
+  }
+};
+var DOT_CLASSES = {
+  default: "bg-primary-950",
+  hovered: "bg-info-700",
+  // #1C61B2 hover state for checked dot
+  focused: "bg-primary-950",
+  // #124393 for focused checked dot
+  invalid: "bg-primary-950",
+  // #124393 for invalid checked dot
+  disabled: "bg-primary-950"
+  // #124393 for disabled checked dot
+};
+var Radio = (0, import_react6.forwardRef)(
+  ({
+    label,
+    size = "medium",
+    state = "default",
+    errorMessage,
+    helperText,
+    className = "",
+    labelClassName = "",
+    checked: checkedProp,
+    defaultChecked = false,
+    disabled,
+    id,
+    name,
+    value,
+    onChange,
+    ...props
+  }, ref) => {
+    const generatedId = (0, import_react6.useId)();
+    const inputId = id ?? `radio-${generatedId}`;
+    const [internalChecked, setInternalChecked] = (0, import_react6.useState)(defaultChecked);
+    const isControlled = checkedProp !== void 0;
+    const checked = isControlled ? checkedProp : internalChecked;
+    const handleChange = (event) => {
+      const newChecked = event.target.checked;
+      if (!isControlled) {
+        setInternalChecked(newChecked);
+      }
+      onChange?.(event);
+    };
+    const currentState = disabled ? "disabled" : state;
+    const sizeClasses = SIZE_CLASSES4[size];
+    const actualRadioSize = sizeClasses.radio;
+    const actualDotSize = sizeClasses.dotSize;
+    const radioVariant = checked ? "checked" : "unchecked";
+    const stylingClasses = STATE_CLASSES2[currentState][radioVariant];
+    const getBorderWidth = () => {
+      if (currentState === "focused") {
+        return "border-2";
+      }
+      return sizeClasses.borderWidth;
+    };
+    const borderWidthClass = getBorderWidth();
+    const radioClasses = `${BASE_RADIO_CLASSES} ${actualRadioSize} ${borderWidthClass} ${stylingClasses} ${className}`;
+    const dotClasses = `${actualDotSize} rounded-full ${DOT_CLASSES[currentState]} transition-all duration-200`;
+    const isWrapperNeeded = currentState === "focused" || currentState === "invalid";
+    const wrapperBorderColor = currentState === "focused" ? "border-indicator-info" : "border-indicator-error";
+    const getTextColor = () => {
+      if (currentState === "disabled") {
+        return checked ? "text-text-900" : "text-text-600";
+      }
+      if (currentState === "focused") {
+        return "text-text-900";
+      }
+      return checked ? "text-text-900" : "text-text-600";
+    };
+    const getCursorClass = () => {
+      return currentState === "disabled" ? "cursor-not-allowed" : "cursor-pointer";
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+        "div",
+        {
+          className: `flex flex-row items-center ${isWrapperNeeded ? `p-1 border-2 ${wrapperBorderColor} rounded-lg gap-1.5` : sizeClasses.spacing} ${disabled ? "opacity-40" : ""}`,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              "input",
+              {
+                ref,
+                type: "radio",
+                id: inputId,
+                checked,
+                disabled,
+                name,
+                value,
+                onChange: handleChange,
+                className: "sr-only",
+                ...props
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { htmlFor: inputId, className: radioClasses, children: checked && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: dotClasses }) }),
+            label && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              "div",
+              {
+                className: `flex flex-row items-center ${sizeClasses.labelHeight}`,
+                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  Text_default,
+                  {
+                    as: "label",
+                    htmlFor: inputId,
+                    size: sizeClasses.textSize,
+                    weight: "normal",
+                    className: `${getCursorClass()} select-none leading-normal flex items-center font-roboto ${labelClassName}`,
+                    color: getTextColor(),
+                    children: label
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ),
+      errorMessage && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        Text_default,
+        {
+          size: "sm",
+          weight: "normal",
+          className: "mt-1.5",
+          color: "text-error-600",
+          children: errorMessage
+        }
+      ),
+      helperText && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        Text_default,
+        {
+          size: "sm",
+          weight: "normal",
+          className: "mt-1.5",
+          color: "text-text-500",
+          children: helperText
+        }
+      )
+    ] });
+  }
+);
+Radio.displayName = "Radio";
+var Radio_default = Radio;
+
+// src/components/TextArea/TextArea.tsx
+var import_react7 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var SIZE_CLASSES5 = {
   small: {
     container: "w-72",
     // 288px width
@@ -843,7 +1066,7 @@ var SIZE_CLASSES4 = {
   }
 };
 var BASE_TEXTAREA_CLASSES = "w-full box-border p-3 bg-background border border-solid rounded-[4px] resize-none focus:outline-none font-roboto font-normal leading-[150%] placeholder:text-text-600 transition-all duration-200";
-var STATE_CLASSES2 = {
+var STATE_CLASSES3 = {
   default: {
     base: "border-border-300 bg-background text-text-600",
     hover: "hover:border-border-400",
@@ -870,7 +1093,7 @@ var STATE_CLASSES2 = {
     focus: ""
   }
 };
-var TextArea = (0, import_react6.forwardRef)(
+var TextArea = (0, import_react7.forwardRef)(
   ({
     label,
     size = "medium",
@@ -885,9 +1108,9 @@ var TextArea = (0, import_react6.forwardRef)(
     placeholder,
     ...props
   }, ref) => {
-    const generatedId = (0, import_react6.useId)();
+    const generatedId = (0, import_react7.useId)();
     const inputId = id ?? `textarea-${generatedId}`;
-    const [isFocused, setIsFocused] = (0, import_react6.useState)(false);
+    const [isFocused, setIsFocused] = (0, import_react7.useState)(false);
     const handleChange = (event) => {
       onChange?.(event);
     };
@@ -903,11 +1126,11 @@ var TextArea = (0, import_react6.forwardRef)(
     if (isFocused && currentState !== "invalid" && currentState !== "disabled") {
       currentState = "focused";
     }
-    const sizeClasses = SIZE_CLASSES4[size];
-    const stateClasses = STATE_CLASSES2[currentState];
+    const sizeClasses = SIZE_CLASSES5[size];
+    const stateClasses = STATE_CLASSES3[currentState];
     const textareaClasses = `${BASE_TEXTAREA_CLASSES} ${sizeClasses.textarea} ${stateClasses.base} ${stateClasses.hover} ${stateClasses.focus} ${className}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: `flex flex-col ${sizeClasses.container}`, children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `flex flex-col ${sizeClasses.container}`, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         Text_default,
         {
           as: "label",
@@ -919,7 +1142,7 @@ var TextArea = (0, import_react6.forwardRef)(
           children: label
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         "textarea",
         {
           ref,
@@ -933,8 +1156,8 @@ var TextArea = (0, import_react6.forwardRef)(
           ...props
         }
       ),
-      errorMessage && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Text_default, { size: "sm", weight: "normal", className: "mt-1.5 text-error-600", children: errorMessage }),
-      helperMessage && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Text_default, { size: "sm", weight: "normal", className: "mt-1.5 text-text-500", children: helperMessage })
+      errorMessage && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text_default, { size: "sm", weight: "normal", className: "mt-1.5 text-error-600", children: errorMessage }),
+      helperMessage && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text_default, { size: "sm", weight: "normal", className: "mt-1.5 text-text-500", children: helperMessage })
     ] });
   }
 );
@@ -943,7 +1166,7 @@ var TextArea_default = TextArea;
 
 // src/components/Toast/Toast.tsx
 var import_phosphor_react4 = require("phosphor-react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var VARIANT_ACTION_CLASSES4 = {
   solid: {
     warning: "bg-warning text-warning-600 border-none focus-visible:outline-none",
@@ -983,7 +1206,7 @@ var Toast = ({
   };
   const IconAction = iconMap[action] || iconMap["success"];
   const baseClasses = "max-w-[390px] w-full flex flex-row items-start justify-between shadow-lg rounded-lg border p-4 gap-6 group";
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "div",
     {
       role: "alert",
@@ -992,20 +1215,20 @@ var Toast = ({
       className: `${baseClasses} ${positionClasses[position]} ${variantClasses} ${className}`,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-row items-start gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "mt-1", "data-testid": `toast-icon-${action}`, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(IconAction, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col items-start justify-start", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "font-semibold text-md", children: title }),
-            description && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-md text-text-900", children: description })
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-row items-start gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "mt-1", "data-testid": `toast-icon-${action}`, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(IconAction, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col items-start justify-start", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "font-semibold text-md", children: title }),
+            description && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-md text-text-900", children: description })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           "button",
           {
             onClick: onClose,
             "aria-label": "Dismiss notification",
             className: "text-background-500 cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity",
-            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_phosphor_react4.X, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_phosphor_react4.X, {})
           }
         )
       ]
@@ -1033,11 +1256,11 @@ var useToastStore = (0, import_zustand.create)((set) => ({
 var ToastStore_default = useToastStore;
 
 // src/components/Toast/utils/Toaster.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var Toaster = () => {
   const toasts = ToastStore_default((state) => state.toasts);
   const removeToast = ToastStore_default((state) => state.removeToast);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: toasts.map((toast) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: toasts.map((toast) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     Toast_default,
     {
       title: toast.title,
@@ -1053,7 +1276,7 @@ var Toaster = () => {
 var Toaster_default = Toaster;
 
 // src/components/Divider/Divider.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var Divider = ({
   orientation = "horizontal",
   className = "",
@@ -1064,7 +1287,7 @@ var Divider = ({
     horizontal: "w-full h-px",
     vertical: "h-full w-px"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "hr",
     {
       className: `${baseClasses} ${orientationClasses[orientation]} ${className}`,
@@ -1077,15 +1300,15 @@ var Divider_default = Divider;
 
 // src/components/Input/Input.tsx
 var import_phosphor_react5 = require("phosphor-react");
-var import_react7 = require("react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var SIZE_CLASSES5 = {
+var import_react8 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var SIZE_CLASSES6 = {
   small: "text-sm",
   medium: "text-md",
   large: "text-lg",
   "extra-large": "text-xl"
 };
-var STATE_CLASSES3 = {
+var STATE_CLASSES4 = {
   default: "border-border-300 placeholder:text-text-600 hover:border-border-400",
   error: "border-2 border-indicator-error placeholder:text-text-600",
   disabled: "border-border-300 placeholder:text-text-600 cursor-not-allowed opacity-40",
@@ -1117,20 +1340,20 @@ var getPasswordToggleConfig = (type, disabled, readOnly, showPassword, iconRight
   let actualIconRight = iconRight;
   let ariaLabel;
   if (shouldShowPasswordToggle) {
-    actualIconRight = showPassword ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_phosphor_react5.EyeSlash, {}) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_phosphor_react5.Eye, {});
+    actualIconRight = showPassword ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_phosphor_react5.EyeSlash, {}) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_phosphor_react5.Eye, {});
     ariaLabel = showPassword ? "Ocultar senha" : "Mostrar senha";
   }
   return { shouldShowPasswordToggle, actualIconRight, ariaLabel };
 };
 var getCombinedClasses = (actualState, variant) => {
-  const stateClasses = STATE_CLASSES3[actualState];
+  const stateClasses = STATE_CLASSES4[actualState];
   const variantClasses = VARIANT_CLASSES[variant];
   if (actualState === "error" && variant === "underlined") {
     return "border-0 border-b-2 border-indicator-error rounded-none bg-transparent focus:outline-none focus:border-primary-950 placeholder:text-text-600";
   }
   return `${stateClasses} ${variantClasses}`;
 };
-var Input = (0, import_react7.forwardRef)(
+var Input = (0, import_react8.forwardRef)(
   ({
     label,
     helperText,
@@ -1148,18 +1371,18 @@ var Input = (0, import_react7.forwardRef)(
     type = "text",
     ...props
   }, ref) => {
-    const [showPassword, setShowPassword] = (0, import_react7.useState)(false);
+    const [showPassword, setShowPassword] = (0, import_react8.useState)(false);
     const isPasswordType = type === "password";
     const actualType = isPasswordType && showPassword ? "text" : type;
     const actualState = getActualState(disabled, readOnly, errorMessage, state);
-    const sizeClasses = SIZE_CLASSES5[size];
-    const combinedClasses = (0, import_react7.useMemo)(
+    const sizeClasses = SIZE_CLASSES6[size];
+    const combinedClasses = (0, import_react8.useMemo)(
       () => getCombinedClasses(actualState, variant),
       [actualState, variant]
     );
     const iconSize = getIconSize(size);
     const baseClasses = "bg-background w-full py-2 px-3 font-normal text-text-900 focus:outline-primary-950";
-    const generatedId = (0, import_react7.useId)();
+    const generatedId = (0, import_react8.useId)();
     const inputId = id ?? `input-${generatedId}`;
     const togglePasswordVisibility = () => setShowPassword(!showPassword);
     const { shouldShowPasswordToggle, actualIconRight, ariaLabel } = getPasswordToggleConfig(
@@ -1169,8 +1392,8 @@ var Input = (0, import_react7.forwardRef)(
       showPassword,
       iconRight
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: `${containerClassName}`, children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: `${containerClassName}`, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         "label",
         {
           htmlFor: inputId,
@@ -1178,15 +1401,15 @@ var Input = (0, import_react7.forwardRef)(
           children: label
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "relative", children: [
-        iconLeft && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "absolute left-3 top-1/2 transform -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "relative", children: [
+        iconLeft && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "absolute left-3 top-1/2 transform -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           "span",
           {
             className: `${iconSize} text-text-400 flex items-center justify-center`,
             children: iconLeft
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           "input",
           {
             ref,
@@ -1199,14 +1422,14 @@ var Input = (0, import_react7.forwardRef)(
             ...props
           }
         ),
-        actualIconRight && (shouldShowPasswordToggle ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        actualIconRight && (shouldShowPasswordToggle ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           "button",
           {
             type: "button",
             className: "absolute right-3 top-1/2 transform -translate-y-1/2 cursor-pointer border-0 bg-transparent p-0",
             onClick: togglePasswordVisibility,
             "aria-label": ariaLabel,
-            children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
               "span",
               {
                 className: `${iconSize} text-text-400 flex items-center justify-center hover:text-text-600 transition-colors`,
@@ -1214,7 +1437,7 @@ var Input = (0, import_react7.forwardRef)(
               }
             )
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           "span",
           {
             className: `${iconSize} text-text-400 flex items-center justify-center`,
@@ -1222,10 +1445,10 @@ var Input = (0, import_react7.forwardRef)(
           }
         ) }))
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "mt-1.5 gap-1.5", children: [
-        helperText && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-sm text-text-500", children: helperText }),
-        errorMessage && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("p", { className: "flex gap-1 items-center text-sm text-indicator-error", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_phosphor_react5.WarningCircle, { size: 16 }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "mt-1.5 gap-1.5", children: [
+        helperText && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-sm text-text-500", children: helperText }),
+        errorMessage && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("p", { className: "flex gap-1 items-center text-sm text-indicator-error", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_phosphor_react5.WarningCircle, { size: 16 }),
           " ",
           errorMessage
         ] })
@@ -1235,24 +1458,57 @@ var Input = (0, import_react7.forwardRef)(
 );
 var Input_default = Input;
 
+// src/components/Chips/Chips.tsx
+var import_phosphor_react6 = require("phosphor-react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var STATE_CLASSES5 = {
+  default: "bg-background text-text-950 border border-border-100 hover:bg-secondary-50 hover:border-border-300",
+  selected: "bg-info-background text-primary-950 border-2 border-primary-950 hover:bg-secondary-50 focus-visible:border-0"
+};
+var Chips = ({
+  children,
+  selected = false,
+  className = "",
+  disabled,
+  type = "button",
+  ...props
+}) => {
+  const stateClasses = selected ? STATE_CLASSES5.selected : STATE_CLASSES5.default;
+  const baseClasses = "inline-flex items-center justify-center rounded-full cursor-pointer font-normal text-sm px-4 py-2 gap-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-primary-600 disabled:opacity-40 disabled:cursor-not-allowed";
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    "button",
+    {
+      className: `${baseClasses} ${stateClasses} ${className}`,
+      disabled,
+      type,
+      ...props,
+      children: [
+        selected && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: `flex items-center`, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_phosphor_react6.Check, { weight: "bold", size: 16 }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "flex-1", children })
+      ]
+    }
+  );
+};
+var Chips_default = Chips;
+
 // src/components/DropdownMenu/DropdownMenu.tsx
-var import_react8 = require("react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var DropdownMenuContext = (0, import_react8.createContext)(
+var import_react9 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var DropdownMenuContext = (0, import_react9.createContext)(
   void 0
 );
 var DropdownMenu = ({ children, open, onOpenChange }) => {
-  const [internalOpen, setInternalOpen] = (0, import_react8.useState)(false);
+  const [internalOpen, setInternalOpen] = (0, import_react9.useState)(false);
   const isControlled = open !== void 0;
   const currentOpen = isControlled ? open : internalOpen;
-  const setOpen = (0, import_react8.useCallback)(
+  const setOpen = (0, import_react9.useCallback)(
     (newOpen) => {
       if (onOpenChange) onOpenChange(newOpen);
       if (!isControlled) setInternalOpen(newOpen);
     },
     [isControlled, onOpenChange]
   );
-  const menuRef = (0, import_react8.useRef)(null);
+  const menuRef = (0, import_react9.useRef)(null);
   const handleArrowDownOrArrowUp = (event) => {
     const menuContent = menuRef.current?.querySelector('[role="menu"]');
     if (menuContent) {
@@ -1286,7 +1542,7 @@ var DropdownMenu = ({ children, open, onOpenChange }) => {
       setOpen(false);
     }
   };
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (currentOpen) {
       document.addEventListener("mousedown", handleClickOutside);
       document.addEventListener("keydown", handleDownkey);
@@ -1296,18 +1552,18 @@ var DropdownMenu = ({ children, open, onOpenChange }) => {
       document.removeEventListener("keydown", handleDownkey);
     };
   }, [currentOpen]);
-  const value = (0, import_react8.useMemo)(
+  const value = (0, import_react9.useMemo)(
     () => ({ open: currentOpen, setOpen }),
     [currentOpen, setOpen]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DropdownMenuContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "relative", ref: menuRef, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DropdownMenuContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "relative", ref: menuRef, children }) });
 };
-var DropdownMenuTrigger = (0, import_react8.forwardRef)(({ className, children, onClick, ...props }, ref) => {
-  const context = (0, import_react8.useContext)(DropdownMenuContext);
+var DropdownMenuTrigger = (0, import_react9.forwardRef)(({ className, children, onClick, ...props }, ref) => {
+  const context = (0, import_react9.useContext)(DropdownMenuContext);
   if (!context)
     throw new Error("DropdownMenuTrigger must be used within a DropdownMenu");
   const { open, setOpen } = context;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "button",
     {
       ref,
@@ -1339,7 +1595,7 @@ var ALIGN_CLASSES = {
   center: "left-1/2 -translate-x-1/2",
   end: "right-0"
 };
-var MenuLabel = (0, import_react8.forwardRef)(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+var MenuLabel = (0, import_react9.forwardRef)(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
   "fieldset",
   {
     ref,
@@ -1349,7 +1605,7 @@ var MenuLabel = (0, import_react8.forwardRef)(({ className, inset, ...props }, r
   }
 ));
 MenuLabel.displayName = "MenuLabel";
-var MenuContent = (0, import_react8.forwardRef)(
+var MenuContent = (0, import_react9.forwardRef)(
   ({
     className,
     align = "start",
@@ -1358,9 +1614,9 @@ var MenuContent = (0, import_react8.forwardRef)(
     children,
     ...props
   }, ref) => {
-    const { open } = (0, import_react8.useContext)(DropdownMenuContext);
-    const [isVisible, setIsVisible] = (0, import_react8.useState)(open);
-    (0, import_react8.useEffect)(() => {
+    const { open } = (0, import_react9.useContext)(DropdownMenuContext);
+    const [isVisible, setIsVisible] = (0, import_react9.useState)(open);
+    (0, import_react9.useEffect)(() => {
       if (open) {
         setIsVisible(true);
       } else {
@@ -1374,7 +1630,7 @@ var MenuContent = (0, import_react8.forwardRef)(
       const horizontal = ALIGN_CLASSES[align];
       return `absolute ${vertical} ${horizontal}`;
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "div",
       {
         ref,
@@ -1398,7 +1654,7 @@ var MenuContent = (0, import_react8.forwardRef)(
   }
 );
 MenuContent.displayName = "MenuContent";
-var MenuItem = (0, import_react8.forwardRef)(
+var MenuItem = (0, import_react9.forwardRef)(
   ({
     className,
     inset,
@@ -1419,7 +1675,7 @@ var MenuItem = (0, import_react8.forwardRef)(
       }
       onClick?.(e);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
       "div",
       {
         ref,
@@ -1449,7 +1705,7 @@ var MenuItem = (0, import_react8.forwardRef)(
   }
 );
 MenuItem.displayName = "MenuItem";
-var MenuSeparator = (0, import_react8.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+var MenuSeparator = (0, import_react9.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
   "div",
   {
     ref,
@@ -1465,6 +1721,7 @@ var DropdownMenu_default = DropdownMenu;
   Badge,
   Button,
   CheckBox,
+  Chips,
   Divider,
   DropdownMenu,
   DropdownMenuContent,
@@ -1476,6 +1733,7 @@ var DropdownMenu_default = DropdownMenu;
   IconRoundedButton,
   Input,
   NavButton,
+  Radio,
   SelectionButton,
   Table,
   Text,