@lets-events/react 5.0.0 → 6.0.0

package/dist/index.mjs

@@ -235,7 +235,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element = REACT_ELEMENT_TYPE;
         var ForwardRef = REACT_FORWARD_REF_TYPE;
-        var Fragment3 = REACT_FRAGMENT_TYPE;
+        var Fragment2 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo = REACT_MEMO_TYPE;
         var Portal = REACT_PORTAL_TYPE;
@@ -294,7 +294,7 @@ var require_react_is_development = __commonJS({
         exports.ContextProvider = ContextProvider;
         exports.Element = Element;
         exports.ForwardRef = ForwardRef;
-        exports.Fragment = Fragment3;
+        exports.Fragment = Fragment2;
         exports.Lazy = Lazy;
         exports.Memo = Memo;
         exports.Portal = Portal;
@@ -1222,7 +1222,41 @@ var fontSizes = {
   "2xl": "1.5rem",
   "3xl": "2rem",
   "4xl": "2.5rem",
-  full: "62.4375rem"
+  full: "62.4375rem",
+  displayLarge: "3.5rem",
+  displayMedium: "3rem",
+  displaySmall: "2.25rem",
+  headline1: "2.5rem",
+  headline2: "2rem",
+  headline3: "1.75rem",
+  headline4: "1.375rem",
+  headline5: "1.25rem",
+  headline6: "1.125rem",
+  headline7: "1rem",
+  headline8: "0.875rem",
+  bodyXL: "1.25rem",
+  bodyL: "1.125rem",
+  bodyM: "1rem",
+  bodyS: "0.875rem",
+  bodyXS: "0.8125rem",
+  bodyXXS: "0.75rem",
+  buttonLarge: "1.25rem",
+  buttonMedium: "0.875rem",
+  buttonSmall: "0.875rem",
+  buttonExtraSmall: "0.75rem",
+  badgeLarge: "1rem",
+  badgeMedium: "0.875rem",
+  badgeSmall: "0.75rem",
+  badgeExtraSmall: "0.625rem",
+  tooltip: "0.875rem",
+  popoversRegular: "0.875rem",
+  labelLarge: "1rem",
+  labelMedium: "0.875rem",
+  labelSmall: "0.8125rem",
+  labelExtraSmall: "0.75rem",
+  captionLarge: "0.8125rem",
+  captionMedium: "0.75rem",
+  captionSmall: "0.625rem"
 };
 var fontWeights = {
   regular: "400",
@@ -1239,8 +1273,42 @@ var lineHeights = {
   // 12px
   base: "150%",
   // 16px
-  tall: "175%"
+  tall: "175%",
   // 24px
+  displayLarge: "4.5rem",
+  displayMedium: "4rem",
+  displaySmall: "3.25rem",
+  headline1: "3.25rem",
+  headline2: "2.75rem",
+  headline3: "2.5rem",
+  headline4: "1.75rem",
+  headline5: "1.5rem",
+  headline6: "1.375rem",
+  headline7: "1.5rem",
+  headline8: "1.25rem",
+  bodyXL: "1.75rem",
+  bodyL: "1.625rem",
+  bodyM: "1.5rem",
+  bodyS: "1.25rem",
+  bodyXS: "1.125rem",
+  bodyXXS: "1rem",
+  buttonLarge: "1.25rem",
+  buttonMedium: "1rem",
+  buttonSmall: "0.875rem",
+  buttonExtraSmall: "0.75rem",
+  badgeLarge: "1rem",
+  badgeMedium: "0.875rem",
+  badgeSmall: "0.75rem",
+  badgeExtraSmall: "0.625rem",
+  tooltip: "1rem",
+  popoversRegular: "1rem",
+  labelLarge: "1.125rem",
+  labelMedium: "1.125rem",
+  labelSmall: "1rem",
+  labelExtraSmall: "1rem",
+  captionLarge: "1rem",
+  captionMedium: "0.875rem",
+  captionSmall: "0.75rem"
 };
 var radii = {
   "3xs": "2px",
@@ -1320,19 +1388,199 @@ var {
 
 // src/components/Text.tsx
 import { Text as TextRadix } from "@radix-ui/themes";
+
+// src/types/typographyValues.ts
+var typographyValues = {
+  displayLarge: {
+    fontSize: "$displayLarge",
+    lineHeight: "$displayLarge",
+    letterSpacing: "$displayLarge"
+  },
+  displayMedium: {
+    fontSize: "$displayMedium",
+    lineHeight: "$displayMedium",
+    letterSpacing: "$displayMedium"
+  },
+  displaySmall: {
+    fontSize: "$displaySmall",
+    lineHeight: "$displaySmall",
+    letterSpacing: "$displaySmall"
+  },
+  headline1: {
+    fontSize: "$headline1",
+    lineHeight: "$headline1"
+  },
+  headline2: {
+    fontSize: "$headline2",
+    lineHeight: "$headline2"
+  },
+  headline3: {
+    fontSize: "$headline3",
+    lineHeight: "$headline3"
+  },
+  headline4: {
+    fontSize: "$headline4",
+    lineHeight: "$headline4"
+  },
+  headline5: {
+    fontSize: "$headline5",
+    lineHeight: "$headline5"
+  },
+  headline6: {
+    fontSize: "$headline6",
+    lineHeight: "$headline6"
+  },
+  headline7: {
+    fontSize: "$headline7",
+    lineHeight: "$headline7"
+  },
+  headline8: {
+    fontSize: "$headline8",
+    lineHeight: "$headline8"
+  },
+  bodyXL: {
+    fontSize: "$bodyXL",
+    lineHeight: "$bodyXL"
+  },
+  bodyL: {
+    fontSize: "$bodyL",
+    lineHeight: "$bodyL"
+  },
+  bodyM: {
+    fontSize: "$bodyM",
+    lineHeight: "$bodyM"
+  },
+  bodyS: {
+    fontSize: "$bodyS",
+    lineHeight: "$bodyS"
+  },
+  bodyXS: {
+    fontSize: "$bodyXS",
+    lineHeight: "$bodyXS"
+  },
+  bodyXXS: {
+    fontSize: "$bodyXXS",
+    lineHeight: "$bodyXXS"
+  },
+  badgeLarge: {
+    fontSize: "$badgeLarge",
+    lineHeight: "$badgeLarge"
+  },
+  badgeMedium: {
+    fontSize: "$badgeMedium",
+    lineHeight: "$badgeMedium"
+  },
+  badgeSmall: {
+    fontSize: "$badgeSmall",
+    lineHeight: "$badgeSmall"
+  },
+  badgeExtraSmall: {
+    fontSize: "$badgeExtraSmall",
+    lineHeight: "$badgeExtraSmall"
+  },
+  tooltip: {
+    fontSize: "$tooltip",
+    lineHeight: "$tooltip"
+  },
+  popoversRegular: {
+    fontSize: "$popoversRegular",
+    lineHeight: "$popoversRegular"
+  },
+  captionLarge: {
+    fontSize: "$captionLarge",
+    lineHeight: "$captionLarge"
+  },
+  captionMedium: {
+    fontSize: "$captionMedium",
+    lineHeight: "$captionMedium"
+  },
+  captionSmall: {
+    fontSize: "$captionSmall",
+    lineHeight: "$captionSmall"
+  },
+  buttonLarge: {
+    fontSize: "$buttonLarge",
+    lineHeight: "$buttonLarge"
+  },
+  buttonMedium: {
+    fontSize: "$buttonMedium",
+    lineHeight: "$buttonMedium"
+  },
+  buttonSmall: {
+    fontSize: "$buttonSmall",
+    lineHeight: "$buttonSmall"
+  },
+  buttonExtraSmall: {
+    fontSize: "$buttonExtraSmall",
+    lineHeight: "$buttonExtraSmall"
+  },
+  labelLarge: {
+    fontSize: "$labelLarge",
+    lineHeight: "$labelLarge"
+  },
+  labelMedium: {
+    fontSize: "$labelMedium",
+    lineHeight: "$labelMedium"
+  },
+  labelSmall: {
+    fontSize: "$labelSmall",
+    lineHeight: "$labelSmall"
+  },
+  labelExtraSmall: {
+    fontSize: "$labelExtraSmall",
+    lineHeight: "$labelExtraSmall"
+  }
+};
+var typographyButtonValues = {
+  buttonLarge: {
+    fontSize: "$buttonLarge",
+    lineHeight: "$buttonLarge"
+  },
+  buttonMedium: {
+    fontSize: "$buttonMedium",
+    lineHeight: "$buttonMedium"
+  },
+  buttonSmall: {
+    fontSize: "$buttonSmall",
+    lineHeight: "$buttonSmall"
+  },
+  buttonExtraSmall: {
+    fontSize: "$buttonExtraSmall",
+    lineHeight: "$buttonExtraSmall"
+  }
+};
+var typographyLabelValues = {
+  labelLarge: {
+    fontSize: "$labelLarge",
+    lineHeight: "$labelLarge"
+  },
+  labelMedium: {
+    fontSize: "$labelMedium",
+    lineHeight: "$labelMedium"
+  },
+  labelSmall: {
+    fontSize: "$labelSmall",
+    lineHeight: "$labelSmall"
+  },
+  labelExtraSmall: {
+    fontSize: "$labelExtraSmall",
+    lineHeight: "$labelExtraSmall"
+  }
+};
+
+// src/components/Text.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
 var TextStyle = styled(TextRadix, {
   fontFamily: "$default",
   lineHeight: "$base",
   color: "$gray100",
-  letterSpacing: "$2",
-  fontWeight: "$semibold",
-  fontSize: "$sm",
   variants: {
-    size: {
-      lg: { fontSize: "$56" },
-      md: { fontSize: "$48" },
-      sm: { fontSize: "$36" }
+    typography: typographyValues,
+    fontWeight: {
+      regular: { fontWeight: "$regular" },
+      medium: { fontWeight: "$medium" },
+      semibold: { fontWeight: "$semibold" },
+      bold: { fontWeight: "$bold" }
     }
   }
 });
@@ -1413,27 +1661,12 @@ var ButtonStyled = styled(ButtonRadix, {
         }
       }
     },
-    size: {
-      xs: {
-        padding: "$6 $12",
-        fontSize: "$12",
-        lineHeight: "$base"
-      },
-      sm: {
-        padding: "$8 $14",
-        fontSize: "$13",
-        lineHeight: "$smaller"
-      },
-      md: {
-        padding: "$12 $16",
-        fontSize: "$14",
-        lineHeight: "$smaller"
-      },
-      lg: {
-        padding: "$13 $20",
-        fontSize: "$18",
-        lineHeight: "$smaller"
-      }
+    typography: typographyButtonValues,
+    fontWeight: {
+      regular: { fontWeight: "$regular" },
+      medium: { fontWeight: "$medium" },
+      semibold: { fontWeight: "$semibold" },
+      bold: { fontWeight: "$bold" }
     },
     radii: {
       "full": {
@@ -1443,7 +1676,7 @@ var ButtonStyled = styled(ButtonRadix, {
   },
   defaultVariants: {
     variant: "contained",
-    size: "md",
+    typography: "buttonMedium",
     color: "brand"
   },
   compoundVariants: [
@@ -1730,79 +1963,85 @@ var ButtonGroupStyled = styled(Flex, {
         }
       }
     },
-    size: {
-      xs: {
+    typography: {
+      buttonLarge: {
         [`& ${ButtonItemStyled}`]: {
-          padding: "$6 $12",
-          fontSize: "$12",
-          lineHeight: "$base",
+          padding: "$13 $20",
+          fontSize: "$buttonLarge",
+          lineHeight: "$buttonLarge",
           "&:not(:first-child)": {
             borderLeft: "none"
           },
           "&:first-child": {
-            borderTopLeftRadius: "$xs",
-            borderBottomLeftRadius: "$xs"
+            borderTopLeftRadius: "$lg",
+            borderBottomLeftRadius: "$lg"
           },
           "&:last-child": {
-            borderTopRightRadius: "$xs",
-            borderBottomRightRadius: "$xs"
+            borderTopRightRadius: "$lg",
+            borderBottomRightRadius: "$lg"
           }
         }
       },
-      sm: {
+      buttonMedium: {
         [`& ${ButtonItemStyled}`]: {
-          padding: "$8 $14",
-          fontSize: "$13",
-          lineHeight: "$smaller",
+          padding: "$12 $16",
+          fontSize: "$buttonMedium",
+          lineHeight: "$buttonMedium",
           "&:not(:first-child)": {
             borderLeft: "none"
           },
           "&:first-child": {
-            borderTopLeftRadius: "$sm",
-            borderBottomLeftRadius: "$sm"
+            borderTopLeftRadius: "$md",
+            borderBottomLeftRadius: "$md"
           },
           "&:last-child": {
-            borderTopRightRadius: "$sm",
-            borderBottomRightRadius: "$sm"
+            borderTopRightRadius: "$md",
+            borderBottomRightRadius: "$md"
           }
         }
       },
-      md: {
+      buttonSmall: {
         [`& ${ButtonItemStyled}`]: {
-          padding: "$12 $16",
-          fontSize: "$14",
-          lineHeight: "$smaller",
+          padding: "$8 $14",
+          fontSize: "$buttonSmall",
+          lineHeight: "$buttonSmall",
           "&:not(:first-child)": {
             borderLeft: "none"
           },
           "&:first-child": {
-            borderTopLeftRadius: "$md",
-            borderBottomLeftRadius: "$md"
+            borderTopLeftRadius: "$sm",
+            borderBottomLeftRadius: "$sm"
           },
           "&:last-child": {
-            borderTopRightRadius: "$md",
-            borderBottomRightRadius: "$md"
+            borderTopRightRadius: "$sm",
+            borderBottomRightRadius: "$sm"
           }
         }
       },
-      lg: {
+      buttonExtraSmall: {
         [`& ${ButtonItemStyled}`]: {
-          padding: "$13 $20",
-          fontSize: "$18",
-          lineHeight: "$smaller",
+          padding: "$6 $12",
+          fontSize: "$buttonExtraSmall",
+          lineHeight: "$buttonExtraSmall",
           "&:not(:first-child)": {
             borderLeft: "none"
           },
           "&:first-child": {
-            borderTopLeftRadius: "$lg",
-            borderBottomLeftRadius: "$lg"
+            borderTopLeftRadius: "$xs",
+            borderBottomLeftRadius: "$xs"
           },
           "&:last-child": {
-            borderTopRightRadius: "$lg",
-            borderBottomRightRadius: "$lg"
+            borderTopRightRadius: "$xs",
+            borderBottomRightRadius: "$xs"
           }
         }
       }
+    },
+    fontWeight: {
+      regular: { [`& ${ButtonItemStyled}`]: { fontWeight: "$regular" } },
+      medium: { [`& ${ButtonItemStyled}`]: { fontWeight: "$medium" } },
+      semibold: { [`& ${ButtonItemStyled}`]: { fontWeight: "$semibold" } },
+      bold: { [`& ${ButtonItemStyled}`]: { fontWeight: "$bold" } }
     }
   },
   compoundVariants: [
@@ -2128,7 +2367,8 @@ var ButtonGroupStyled = styled(Flex, {
   ],
   defaultVariants: {
     variant: "contained",
-    size: "md",
+    typography: "buttonMedium",
+    fontWeight: "medium",
     color: "brand"
   }
 });
@@ -2193,12 +2433,10 @@ function Avatar(_a) {
 
 // src/components/TextField.tsx
 import { TextField as TextFieldRadix } from "@radix-ui/themes";
-import { Fragment, jsx as jsx6, jsxs } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs } from "react/jsx-runtime";
 var TextFieldStyled = styled(TextFieldRadix.Root, {
   height: "$40",
   fontFamily: "$default",
-  letterSpacing: "0px",
-  fontSize: "$13",
   padding: "$12 $14",
   borderRadius: "$sm",
   boxSizing: "border-box",
@@ -2212,7 +2450,8 @@ var TextFieldStyled = styled(TextFieldRadix.Root, {
     outline: "none",
     padding: 0,
     margin: 0,
-    width: "100%"
+    width: "100%",
+    font: "inherit"
   },
   "&:has(input:focus)": {
     border: "2px solid $brand300"
@@ -2244,7 +2483,7 @@ var TextFieldStyled = styled(TextFieldRadix.Root, {
         "input::placeholder": {
           color: "$error400"
         },
-        "& hast(input:focus)": {
+        "&:has(input:focus)": {
           border: "2px solid $error400"
         },
         "&:has(input:disabled)": {
@@ -2255,6 +2494,13 @@ var TextFieldStyled = styled(TextFieldRadix.Root, {
         }
       }
     },
+    typography: typographyValues,
+    fontWeight: {
+      regular: { fontWeight: "$regular" },
+      medium: { fontWeight: "$medium" },
+      semibold: { fontWeight: "$semibold" },
+      bold: { fontWeight: "$bold" }
+    },
     isValid: {
       true: {},
       false: {}
@@ -2306,50 +2552,106 @@ var TextFieldStyled = styled(TextFieldRadix.Root, {
 var TextFieldSlotStyled = styled(TextFieldRadix.Slot, {
   display: "flex",
   alignItems: "center",
-  justifyContent: "center"
+  justifyContent: "center",
+  variants: {
+    typography: typographyValues,
+    fontWeight: {
+      regular: { fontWeight: "$regular" },
+      medium: { fontWeight: "$medium" },
+      semibold: { fontWeight: "$semibold" },
+      bold: { fontWeight: "$bold" }
+    }
+  }
 });
 function TextField(_a) {
   var _b = _a, {
     children,
     isValid,
     name,
-    color
+    color,
+    typography,
+    fontWeight
   } = _b, props = __objRest(_b, [
     "children",
     "isValid",
     "name",
-    "color"
+    "color",
+    "typography",
+    "fontWeight"
   ]);
-  return /* @__PURE__ */ jsxs(TextFieldStyled, __spreadProps(__spreadValues({ color, isValid, name }, props), { children: [
-    children,
-    isValid && /* @__PURE__ */ jsx6(TextFieldSlot, { position: "flex-end", name, color, children: /* @__PURE__ */ jsx6(Icon_default, { name: "check" }) })
-  ] }));
+  return /* @__PURE__ */ jsxs(
+    TextFieldStyled,
+    __spreadProps(__spreadValues({
+      color,
+      isValid,
+      name,
+      typography,
+      fontWeight
+    }, props), {
+      children: [
+        children,
+        isValid && /* @__PURE__ */ jsx6(
+          TextFieldSlot,
+          {
+            position: "flex-end",
+            name,
+            color,
+            typography,
+            fontWeight,
+            children: /* @__PURE__ */ jsx6(Icon_default, { name: "check" })
+          }
+        )
+      ]
+    })
+  );
 }
 function TextFieldSlot(_a) {
   var _b = _a, {
     children,
     position = "flex-start",
-    onClick
+    onClick,
+    typography = "bodyXS",
+    fontWeight = "regular"
   } = _b, props = __objRest(_b, [
     "children",
     "position",
-    "onClick"
+    "onClick",
+    "typography",
+    "fontWeight"
   ]);
-  console.log("onclick", onClick);
-  return /* @__PURE__ */ jsx6(Fragment, { children: !!onClick ? /* @__PURE__ */ jsx6(TextFieldSlotStyled, __spreadProps(__spreadValues({}, __spreadProps(__spreadValues({}, props), { color: void 0 })), { style: {
-    position: "absolute",
-    left: position === "flex-end" ? "none" : 15,
-    right: position === "flex-start" ? "none" : 15,
-    padding: 13,
-    zIndex: 2,
-    top: 0,
-    cursor: "pointer"
-  }, onClick: () => onClick(), children })) : /* @__PURE__ */ jsx6(TextFieldSlotStyled, __spreadProps(__spreadValues({}, __spreadProps(__spreadValues({}, props), { color: void 0 })), { style: {
-    float: position === "flex-start" ? "left" : "right",
-    order: position === "flex-start" ? 0 : 2,
-    marginLeft: position === "flex-start" ? 0 : 15,
-    marginRight: position === "flex-end" ? 0 : 15
-  }, children })) });
+  const sharedStyles = __spreadProps(__spreadValues({
+    typography,
+    fontWeight
+  }, props), {
+    color: void 0
+  });
+  return !!onClick ? /* @__PURE__ */ jsx6(
+    TextFieldSlotStyled,
+    __spreadProps(__spreadValues({}, sharedStyles), {
+      style: {
+        position: "absolute",
+        left: position === "flex-end" ? "none" : 15,
+        right: position === "flex-start" ? "none" : 15,
+        padding: 13,
+        zIndex: 2,
+        top: 0,
+        cursor: "pointer"
+      },
+      onClick: () => onClick(),
+      children
+    })
+  ) : /* @__PURE__ */ jsx6(
+    TextFieldSlotStyled,
+    __spreadProps(__spreadValues({}, sharedStyles), {
+      style: {
+        float: position === "flex-start" ? "left" : "right",
+        order: position === "flex-start" ? 0 : 2,
+        marginLeft: position === "flex-start" ? 0 : 15,
+        marginRight: position === "flex-end" ? 0 : 15
+      },
+      children
+    })
+  );
 }
 
 // src/components/RadioGroup.tsx
@@ -2357,8 +2659,6 @@ import { RadioGroup as RadioGroupRadix } from "@radix-ui/themes";
 import { jsx as jsx7 } from "react/jsx-runtime";
 var RadioGroupStyled = styled(RadioGroupRadix.Root, {
   fontFamily: "$default",
-  letterSpacing: "0px",
-  fontSize: "$13",
   "label": {
     display: "flex",
     alignItems: "center",
@@ -2446,6 +2746,13 @@ var RadioGroupStyled = styled(RadioGroupRadix.Root, {
         }
       },
       false: {}
+    },
+    typography: typographyLabelValues,
+    fontWeight: {
+      regular: { fontWeight: "$regular" },
+      medium: { fontWeight: "$medium" },
+      semibold: { fontWeight: "$semibold" },
+      bold: { fontWeight: "$bold" }
     }
   },
   compoundVariants: [
@@ -2542,8 +2849,6 @@ import { CheckboxGroup as CheckboxGroupRadix } from "@radix-ui/themes";
 import { jsx as jsx8 } from "react/jsx-runtime";
 var CheckboxGroupStyled = styled(CheckboxGroupRadix.Root, {
   fontFamily: "$default",
-  letterSpacing: "0px",
-  fontSize: "$13",
   "svg": {
     display: "none"
   },
@@ -2633,6 +2938,13 @@ var CheckboxGroupStyled = styled(CheckboxGroupRadix.Root, {
         }
       },
       false: {}
+    },
+    typography: typographyLabelValues,
+    fontWeight: {
+      regular: { fontWeight: "$regular" },
+      medium: { fontWeight: "$medium" },
+      semibold: { fontWeight: "$semibold" },
+      bold: { fontWeight: "$bold" }
     }
   },
   compoundVariants: [
@@ -2718,6 +3030,34 @@ function CheckboxItem(_a) {
 // src/components/Filter.tsx
 import { Theme, DropdownMenu } from "@radix-ui/themes";
 import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
+var FilterContentStyled = styled(DropdownMenu.Content, {
+  background: "white",
+  padding: "$8 $12",
+  border: "1px solid $dark300",
+  borderRadius: "$xs",
+  boxShadow: "0px 4px 4px 0px rgba(35, 53, 67, 0.08)",
+  width: "calc(var(--radix-popper-anchor-width) - 24px);",
+  minWidth: "100%",
+  marginTop: "3px",
+  fontFamily: "$default",
+  variants: {
+    typography: typographyLabelValues,
+    fontWeight: {
+      regular: {
+        fontWeight: "$regular"
+      },
+      medium: {
+        fontWeight: "$medium"
+      },
+      semibold: {
+        fontWeight: "$semibold"
+      },
+      bold: {
+        fontWeight: "$bold"
+      }
+    }
+  }
+});
 var FilterStyled = styled("div", {
   fontFamily: "$default",
   color: "$dark600",
@@ -2743,27 +3083,63 @@ var FilterStyled = styled("div", {
     "svg:last-child": {
       marginLeft: "auto"
     }
+  },
+  variants: {
+    typography: {
+      labelLarge: {
+        "span": {
+          fontSize: "$labelLarge",
+          lineHeight: "$labelLarge"
+        }
+      },
+      labelMedium: {
+        "span": {
+          fontSize: "$labelMedium",
+          lineHeight: "$labelMedium"
+        }
+      },
+      labelSmall: {
+        "span": {
+          fontSize: "$labelSmall",
+          lineHeight: "$labelSmall"
+        }
+      },
+      labelExtraSmall: {
+        "span": {
+          fontSize: "$labelExtraSmall",
+          lineHeight: "$labelExtraSmall"
+        }
+      }
+    },
+    fontWeight: {
+      regular: {
+        "span": { fontWeight: "$regular" }
+      },
+      medium: {
+        "span": { fontWeight: "$medium" }
+      },
+      semibold: {
+        "span": { fontWeight: "$semibold" }
+      },
+      bold: {
+        "span": { fontWeight: "$bold" }
+      }
+    }
   }
 });
-var FilterContentStyled = styled(DropdownMenu.Content, {
-  background: "white",
-  padding: "$8 $12",
-  border: "1px solid $dark300",
-  borderRadius: "$xs",
-  boxShadow: "0px 4px 4px 0px rgba(35, 53, 67, 0.08)",
-  width: "calc(var(--radix-popper-anchor-width) - 24px);",
-  minWidth: "100%",
-  marginTop: "3px"
-});
 function Filter(_a) {
   var _b = _a, {
     children,
-    placeholder
+    placeholder,
+    typography,
+    fontWeight
   } = _b, props = __objRest(_b, [
     "children",
-    "placeholder"
+    "placeholder",
+    "typography",
+    "fontWeight"
   ]);
-  return /* @__PURE__ */ jsx9(Theme, { children: /* @__PURE__ */ jsx9(DropdownMenu.Root, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsxs2(FilterStyled, { children: [
+  return /* @__PURE__ */ jsx9(Theme, { children: /* @__PURE__ */ jsx9(DropdownMenu.Root, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsxs2(FilterStyled, { typography, fontWeight, children: [
     /* @__PURE__ */ jsx9(DropdownMenu.Trigger, { children: /* @__PURE__ */ jsxs2("button", { "aria-label": placeholder || "Fitrar", children: [
       /* @__PURE__ */ jsx9(Icon, { name: "filter" }),
       /* @__PURE__ */ jsx9("span", { children: placeholder || "Fitrar" }),
@@ -2775,6 +3151,8 @@ function Filter(_a) {
         avoidCollisions: false,
         align: "start",
         alignOffset: -14,
+        typography,
+        fontWeight,
         children: /* @__PURE__ */ jsx9(CheckboxGroup, { children })
       }
     )
@@ -2792,6 +3170,27 @@ function FilterItem(_a) {
 // src/components/Dropdown.tsx
 import { Theme as Theme2, DropdownMenu as DropdownMenuRadix } from "@radix-ui/themes";
 import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
+var DropdownMenuItemStyled = styled(DropdownMenuRadix.Item, {
+  fontFamily: "$default",
+  color: "$dark600",
+  letterSpacing: "0px",
+  padding: "$8 $12",
+  "&:hover, &:focus": {
+    backgroundColor: "transparent",
+    border: "none",
+    outline: "none",
+    cursor: "pointer"
+  },
+  variants: {
+    typography: typographyLabelValues,
+    fontWeight: {
+      regular: { fontWeight: "$regular" },
+      medium: { fontWeight: "$medium" },
+      semibold: { fontWeight: "$semibold" },
+      bold: { fontWeight: "$bold" }
+    }
+  }
+});
 var DropdownMenuStyled = styled("div", {
   fontFamily: "$default",
   color: "$dark600",
@@ -2817,6 +3216,40 @@ var DropdownMenuStyled = styled("div", {
     "svg": {
       marginLeft: "auto"
     }
+  },
+  variants: {
+    typography: {
+      labelLarge: {
+        "button": {
+          fontSize: "$labelLarge",
+          lineHeight: "$labelLarge"
+        }
+      },
+      labelMedium: {
+        "button": {
+          fontSize: "$labelMedium",
+          lineHeight: "$labelMedium"
+        }
+      },
+      labelSmall: {
+        "button": {
+          fontSize: "$labelSmall",
+          lineHeight: "$labelSmall"
+        }
+      },
+      labelExtraSmall: {
+        "button": {
+          fontSize: "$labelExtraSmall",
+          lineHeight: "$labelExtraSmall"
+        }
+      }
+    },
+    fontWeight: {
+      regular: { "button": { fontWeight: "$regular" } },
+      medium: { "button": { fontWeight: "$medium" } },
+      semibold: { "button": { fontWeight: "$semibold" } },
+      bold: { "button": { fontWeight: "$bold" } }
+    }
   }
 });
 var DropdownMenuContentStyled = styled(DropdownMenuRadix.Content, {
@@ -2829,29 +3262,21 @@ var DropdownMenuContentStyled = styled(DropdownMenuRadix.Content, {
   minWidth: "100%",
   marginTop: "3px"
 });
-var DropdownMenuItemStyled = styled(DropdownMenuRadix.Item, {
-  fontFamily: "$default",
-  color: "$dark600",
-  letterSpacing: "0px",
-  padding: "$8 $12",
-  "&:hover, &:focus": {
-    backgroundColor: "transparent",
-    border: "none",
-    outline: "none",
-    cursor: "pointer"
-  }
-});
 function DropdownMenu2(_a) {
   var _b = _a, {
     children,
-    placeholder
+    placeholder,
+    typography,
+    fontWeight
   } = _b, props = __objRest(_b, [
     "children",
-    "placeholder"
+    "placeholder",
+    "typography",
+    "fontWeight"
   ]);
-  return /* @__PURE__ */ jsx10(Theme2, { children: /* @__PURE__ */ jsx10(DropdownMenuRadix.Root, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsxs3(DropdownMenuStyled, { children: [
-    /* @__PURE__ */ jsx10(DropdownMenuRadix.Trigger, { children: /* @__PURE__ */ jsxs3("button", { "aria-label": placeholder || "Fitrar", children: [
-      /* @__PURE__ */ jsx10("span", { children: placeholder || "Fitrar" }),
+  return /* @__PURE__ */ jsx10(Theme2, { children: /* @__PURE__ */ jsx10(DropdownMenuRadix.Root, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsxs3(DropdownMenuStyled, { typography, fontWeight, children: [
+    /* @__PURE__ */ jsx10(DropdownMenuRadix.Trigger, { children: /* @__PURE__ */ jsxs3("button", { "aria-label": placeholder || "Filtrar", children: [
+      /* @__PURE__ */ jsx10("span", { children: placeholder || "Filtrar" }),
       /* @__PURE__ */ jsx10(DropdownMenuRadix.TriggerIcon, {})
     ] }) }),
     /* @__PURE__ */ jsx10(
@@ -2867,11 +3292,23 @@ function DropdownMenu2(_a) {
 }
 function DropdownMenuItem(_a) {
   var _b = _a, {
-    children
+    children,
+    typography,
+    fontWeight
   } = _b, props = __objRest(_b, [
-    "children"
+    "children",
+    "typography",
+    "fontWeight"
   ]);
-  return /* @__PURE__ */ jsx10(DropdownMenuItemStyled, __spreadProps(__spreadValues({}, props), { children }));
+  return /* @__PURE__ */ jsx10(
+    DropdownMenuItemStyled,
+    __spreadProps(__spreadValues({
+      typography,
+      fontWeight
+    }, props), {
+      children
+    })
+  );
 }
 
 // src/components/Badge.tsx
@@ -2939,29 +3376,35 @@ var BadgeStyled = styled(BadgeRadix, {
     size: {
       xs: {
         padding: "$4 $6",
-        fontSize: "$10",
+        fontSize: "$badgeExtraSmall",
         borderRadius: "$2xs",
-        lineHeight: "$smaller"
+        lineHeight: "$bagdeExtraSmall"
       },
       sm: {
         padding: "$4 $8",
-        fontSize: "$12",
+        fontSize: "$badgeSmall",
         borderRadius: "$xs",
-        lineHeight: "$smaller"
+        lineHeight: "$badgeSmall"
       },
       md: {
         padding: "$8 $10",
-        fontSize: "$14",
+        fontSize: "$badgeMedium",
         borderRadius: "$sm",
-        lineHeight: "$smaller"
+        lineHeight: "$badgeMedium"
       },
       xl: {
         padding: "$12 $12",
-        fontSize: "$16",
+        fontSize: "$badgeLarge",
         borderRadius: "$sm",
-        lineHeight: "$smaller"
+        lineHeight: "$badgeLarge"
       }
     },
+    fontWeight: {
+      regular: { fontWeight: "$regular" },
+      medium: { fontWeight: "$medium" },
+      semibold: { fontWeight: "$semibold" },
+      bold: { fontWeight: "$bold" }
+    },
     radii: {
       "full": {
         borderRadius: "$full"
@@ -2970,7 +3413,8 @@ var BadgeStyled = styled(BadgeRadix, {
   },
   defaultVariants: {
     size: "md",
-    color: "primary"
+    color: "primary",
+    fontWeight: "regular"
   }
 });
 function Badge(_a) {
@@ -3165,7 +3609,7 @@ function Modal(_a) {
 
 // src/components/Alert.tsx
 import { Theme as Theme3, AlertDialog } from "@radix-ui/themes";
-import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
 var AlertDialogSimpleStyled = styled(AlertDialog.Content, {
   fontFamily: "$default",
   lineHeight: "$base",
@@ -3280,10 +3724,10 @@ function Alert(_a) {
     "simpleAlert"
   ]);
   console.log("completAlert", completAlert, " simpleAlert", simpleAlert);
-  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs5(Fragment, { children: [
     simpleAlert && /* @__PURE__ */ jsx14(Theme3, { children: /* @__PURE__ */ jsxs5(AlertDialog.Root, { children: [
       /* @__PURE__ */ jsx14(AlertDialog.Trigger, { children: trigger }),
-      /* @__PURE__ */ jsx14(Fragment2, { children: /* @__PURE__ */ jsxs5(AlertDialogSimpleStyled, __spreadProps(__spreadValues({}, props), { children: [
+      /* @__PURE__ */ jsx14(Fragment, { children: /* @__PURE__ */ jsxs5(AlertDialogSimpleStyled, __spreadProps(__spreadValues({}, props), { children: [
         /* @__PURE__ */ jsx14(AlertDialogDescriptionStyled, { children: simpleAlert.description }),
         simpleAlert.cancel && /* @__PURE__ */ jsx14(AlertDialog.Cancel, { children: /* @__PURE__ */ jsx14(Button, { variant: "text", children: /* @__PURE__ */ jsx14(Icon_default, { name: "close" }) }) })
       ] })) })