@lets-events/react 5.0.0 → 6.0.0

package/dist/index.js

@@ -241,7 +241,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;
@@ -300,7 +300,7 @@ var require_react_is_development = __commonJS({
         exports2.ContextProvider = ContextProvider;
         exports2.Element = Element;
         exports2.ForwardRef = ForwardRef;
-        exports2.Fragment = Fragment3;
+        exports2.Fragment = Fragment2;
         exports2.Lazy = Lazy;
         exports2.Memo = Memo;
         exports2.Portal = Portal;
@@ -1290,7 +1290,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",
@@ -1307,8 +1341,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",
@@ -1388,19 +1456,199 @@ var {
 
 // src/components/Text.tsx
 var import_themes = require("@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
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var TextStyle = styled(import_themes.Text, {
   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" }
     }
   }
 });
@@ -1481,27 +1729,12 @@ var ButtonStyled = styled(import_themes2.Button, {
         }
       }
     },
-    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": {
@@ -1511,7 +1744,7 @@ var ButtonStyled = styled(import_themes2.Button, {
   },
   defaultVariants: {
     variant: "contained",
-    size: "md",
+    typography: "buttonMedium",
     color: "brand"
   },
   compoundVariants: [
@@ -1798,79 +2031,85 @@ var ButtonGroupStyled = styled(import_themes3.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: [
@@ -2196,7 +2435,8 @@ var ButtonGroupStyled = styled(import_themes3.Flex, {
   ],
   defaultVariants: {
     variant: "contained",
-    size: "md",
+    typography: "buttonMedium",
+    fontWeight: "medium",
     color: "brand"
   }
 });
@@ -2265,8 +2505,6 @@ var import_jsx_runtime6 = require("react/jsx-runtime");
 var TextFieldStyled = styled(import_themes5.TextField.Root, {
   height: "$40",
   fontFamily: "$default",
-  letterSpacing: "0px",
-  fontSize: "$13",
   padding: "$12 $14",
   borderRadius: "$sm",
   boxSizing: "border-box",
@@ -2280,7 +2518,8 @@ var TextFieldStyled = styled(import_themes5.TextField.Root, {
     outline: "none",
     padding: 0,
     margin: 0,
-    width: "100%"
+    width: "100%",
+    font: "inherit"
   },
   "&:has(input:focus)": {
     border: "2px solid $brand300"
@@ -2312,7 +2551,7 @@ var TextFieldStyled = styled(import_themes5.TextField.Root, {
         "input::placeholder": {
           color: "$error400"
         },
-        "& hast(input:focus)": {
+        "&:has(input:focus)": {
           border: "2px solid $error400"
         },
         "&:has(input:disabled)": {
@@ -2323,6 +2562,13 @@ var TextFieldStyled = styled(import_themes5.TextField.Root, {
         }
       }
     },
+    typography: typographyValues,
+    fontWeight: {
+      regular: { fontWeight: "$regular" },
+      medium: { fontWeight: "$medium" },
+      semibold: { fontWeight: "$semibold" },
+      bold: { fontWeight: "$bold" }
+    },
     isValid: {
       true: {},
       false: {}
@@ -2374,50 +2620,106 @@ var TextFieldStyled = styled(import_themes5.TextField.Root, {
 var TextFieldSlotStyled = styled(import_themes5.TextField.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__ */ (0, import_jsx_runtime6.jsxs)(TextFieldStyled, __spreadProps(__spreadValues({ color, isValid, name }, props), { children: [
-    children,
-    isValid && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TextFieldSlot, { position: "flex-end", name, color, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon_default, { name: "check" }) })
-  ] }));
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    TextFieldStyled,
+    __spreadProps(__spreadValues({
+      color,
+      isValid,
+      name,
+      typography,
+      fontWeight
+    }, props), {
+      children: [
+        children,
+        isValid && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          TextFieldSlot,
+          {
+            position: "flex-end",
+            name,
+            color,
+            typography,
+            fontWeight,
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(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__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: !!onClick ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(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__ */ (0, import_jsx_runtime6.jsx)(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__ */ (0, import_jsx_runtime6.jsx)(
+    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__ */ (0, import_jsx_runtime6.jsx)(
+    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
@@ -2425,8 +2727,6 @@ var import_themes6 = require("@radix-ui/themes");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var RadioGroupStyled = styled(import_themes6.RadioGroup.Root, {
   fontFamily: "$default",
-  letterSpacing: "0px",
-  fontSize: "$13",
   "label": {
     display: "flex",
     alignItems: "center",
@@ -2514,6 +2814,13 @@ var RadioGroupStyled = styled(import_themes6.RadioGroup.Root, {
         }
       },
       false: {}
+    },
+    typography: typographyLabelValues,
+    fontWeight: {
+      regular: { fontWeight: "$regular" },
+      medium: { fontWeight: "$medium" },
+      semibold: { fontWeight: "$semibold" },
+      bold: { fontWeight: "$bold" }
     }
   },
   compoundVariants: [
@@ -2610,8 +2917,6 @@ var import_themes7 = require("@radix-ui/themes");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var CheckboxGroupStyled = styled(import_themes7.CheckboxGroup.Root, {
   fontFamily: "$default",
-  letterSpacing: "0px",
-  fontSize: "$13",
   "svg": {
     display: "none"
   },
@@ -2701,6 +3006,13 @@ var CheckboxGroupStyled = styled(import_themes7.CheckboxGroup.Root, {
         }
       },
       false: {}
+    },
+    typography: typographyLabelValues,
+    fontWeight: {
+      regular: { fontWeight: "$regular" },
+      medium: { fontWeight: "$medium" },
+      semibold: { fontWeight: "$semibold" },
+      bold: { fontWeight: "$bold" }
     }
   },
   compoundVariants: [
@@ -2786,6 +3098,34 @@ function CheckboxItem(_a) {
 // src/components/Filter.tsx
 var import_themes8 = require("@radix-ui/themes");
 var import_jsx_runtime9 = require("react/jsx-runtime");
+var FilterContentStyled = styled(import_themes8.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",
@@ -2811,27 +3151,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(import_themes8.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__ */ (0, import_jsx_runtime9.jsx)(import_themes8.Theme, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_themes8.DropdownMenu.Root, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(FilterStyled, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_themes8.Theme, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_themes8.DropdownMenu.Root, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(FilterStyled, { typography, fontWeight, children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_themes8.DropdownMenu.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("button", { "aria-label": placeholder || "Fitrar", children: [
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { name: "filter" }),
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: placeholder || "Fitrar" }),
@@ -2843,6 +3219,8 @@ function Filter(_a) {
         avoidCollisions: false,
         align: "start",
         alignOffset: -14,
+        typography,
+        fontWeight,
         children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CheckboxGroup, { children })
       }
     )
@@ -2860,6 +3238,27 @@ function FilterItem(_a) {
 // src/components/Dropdown.tsx
 var import_themes9 = require("@radix-ui/themes");
 var import_jsx_runtime10 = require("react/jsx-runtime");
+var DropdownMenuItemStyled = styled(import_themes9.DropdownMenu.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",
@@ -2885,6 +3284,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(import_themes9.DropdownMenu.Content, {
@@ -2897,29 +3330,21 @@ var DropdownMenuContentStyled = styled(import_themes9.DropdownMenu.Content, {
   minWidth: "100%",
   marginTop: "3px"
 });
-var DropdownMenuItemStyled = styled(import_themes9.DropdownMenu.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__ */ (0, import_jsx_runtime10.jsx)(import_themes9.Theme, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_themes9.DropdownMenu.Root, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(DropdownMenuStyled, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_themes9.DropdownMenu.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("button", { "aria-label": placeholder || "Fitrar", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: placeholder || "Fitrar" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_themes9.Theme, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_themes9.DropdownMenu.Root, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(DropdownMenuStyled, { typography, fontWeight, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_themes9.DropdownMenu.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("button", { "aria-label": placeholder || "Filtrar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: placeholder || "Filtrar" }),
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_themes9.DropdownMenu.TriggerIcon, {})
     ] }) }),
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
@@ -2935,11 +3360,23 @@ function DropdownMenu2(_a) {
 }
 function DropdownMenuItem(_a) {
   var _b = _a, {
-    children
+    children,
+    typography,
+    fontWeight
   } = _b, props = __objRest(_b, [
-    "children"
+    "children",
+    "typography",
+    "fontWeight"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DropdownMenuItemStyled, __spreadProps(__spreadValues({}, props), { children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    DropdownMenuItemStyled,
+    __spreadProps(__spreadValues({
+      typography,
+      fontWeight
+    }, props), {
+      children
+    })
+  );
 }
 
 // src/components/Badge.tsx
@@ -3007,29 +3444,35 @@ var BadgeStyled = styled(import_themes10.Badge, {
     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"
@@ -3038,7 +3481,8 @@ var BadgeStyled = styled(import_themes10.Badge, {
   },
   defaultVariants: {
     size: "md",
-    color: "primary"
+    color: "primary",
+    fontWeight: "regular"
   }
 });
 function Badge(_a) {