@latte-macchiat-io/latte-vanilla-components 0.0.176 → 0.0.177

package/dist/theme.css-Dj6kL9o0.js

@@ -1,3020 +0,0 @@
-import { createSprinkles as c, defineProperties as p } from "@vanilla-extract/sprinkles";
-import { recipe as i } from "@vanilla-extract/recipes";
-import { createGlobalThemeContract as g, style as t, keyframes as l } from "@vanilla-extract/css";
-const e = g({
-  colors: {
-    primary: null,
-    secondary: null,
-    accent: null,
-    background: null,
-    surface: null,
-    text: null,
-    textSecondary: null,
-    textLight: null,
-    border: null,
-    error: null,
-    warning: null,
-    success: null,
-    info: null
-  },
-  space: {
-    none: null,
-    xs: null,
-    sm: null,
-    md: null,
-    lg: null,
-    xl: null,
-    "2xl": null
-  },
-  radii: {
-    none: null,
-    sm: null,
-    md: null,
-    lg: null,
-    xl: null,
-    full: null
-  },
-  fonts: {
-    body: null,
-    heading: null,
-    mono: null
-  },
-  fontSizes: {
-    xs: null,
-    sm: null,
-    md: null,
-    lg: null,
-    xl: null,
-    "2xl": null,
-    "3xl": null,
-    "4xl": null
-  },
-  fontWeights: {
-    light: null,
-    normal: null,
-    medium: null,
-    semibold: null,
-    bold: null
-  },
-  lineHeights: {
-    tight: null,
-    normal: null,
-    relaxed: null
-  },
-  shadows: {
-    none: null,
-    sm: null,
-    md: null,
-    lg: null,
-    xl: null
-  },
-  maxWidth: null,
-  section: {
-    paddingTop: null,
-    paddingBottom: null
-  },
-  header: {
-    height: null
-  },
-  footer: {
-    height: null
-  }
-}, (a) => `latte-${a}`), n = {
-  colors: {
-    primary: "#FF7377",
-    secondary: "#FCEFE6",
-    accent: "#FF7377",
-    background: "#ffffff",
-    surface: "#f8f9fa",
-    text: "#000000",
-    textSecondary: "#666666",
-    textLight: "#f5f5f5",
-    border: "#e1e1e1",
-    error: "#dc3545",
-    warning: "#ffc107",
-    success: "#28a745",
-    info: "#17a2b8"
-  },
-  space: {
-    none: "0px",
-    xs: "4px",
-    sm: "8px",
-    md: "16px",
-    lg: "32px",
-    xl: "64px",
-    "2xl": "128px"
-  },
-  radii: {
-    none: "0px",
-    sm: "4px",
-    md: "8px",
-    lg: "16px",
-    xl: "24px",
-    full: "9999px"
-  },
-  fonts: {
-    body: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-    heading: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-    mono: 'ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, monospace'
-  },
-  fontSizes: {
-    xs: "12px",
-    sm: "14px",
-    md: "16px",
-    lg: "18px",
-    xl: "20px",
-    "2xl": "24px",
-    "3xl": "32px",
-    "4xl": "40px"
-  },
-  fontWeights: {
-    light: "300",
-    normal: "400",
-    medium: "500",
-    semibold: "600",
-    bold: "700"
-  },
-  lineHeights: {
-    tight: "1.2",
-    normal: "1.5",
-    relaxed: "1.75"
-  },
-  shadows: {
-    none: "none",
-    sm: "0 1px 2px rgba(0, 0, 0, 0.05)",
-    md: "0 4px 6px rgba(0, 0, 0, 0.1)",
-    lg: "0 10px 15px rgba(0, 0, 0, 0.1)",
-    xl: "0 20px 25px rgba(0, 0, 0, 0.1)"
-  },
-  maxWidth: "1500px",
-  section: {
-    paddingTop: "48px",
-    paddingBottom: "48px"
-  },
-  header: {
-    height: "80px"
-  },
-  footer: {
-    height: "80px"
-  }
-}, s = {
-  colors: {
-    primary: "#1a73e8",
-    secondary: "#374151",
-    accent: "#60a5fa",
-    background: "#111827",
-    surface: "#1f2937",
-    text: "#ffffff",
-    textSecondary: "#9ca3af",
-    textLight: "#f3f4f6",
-    border: "#374151",
-    error: "#ef4444",
-    warning: "#f59e0b",
-    success: "#10b981",
-    info: "#3b82f6"
-  },
-  space: {
-    none: "0px",
-    xs: "4px",
-    sm: "8px",
-    md: "16px",
-    lg: "32px",
-    xl: "64px",
-    "2xl": "128px"
-  },
-  radii: {
-    none: "0px",
-    sm: "4px",
-    md: "8px",
-    lg: "16px",
-    xl: "24px",
-    full: "9999px"
-  },
-  fonts: {
-    body: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-    heading: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-    mono: 'ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, monospace'
-  },
-  fontSizes: {
-    xs: "12px",
-    sm: "14px",
-    md: "16px",
-    lg: "18px",
-    xl: "20px",
-    "2xl": "24px",
-    "3xl": "32px",
-    "4xl": "40px"
-  },
-  fontWeights: {
-    light: "300",
-    normal: "400",
-    medium: "500",
-    semibold: "600",
-    bold: "700"
-  },
-  lineHeights: {
-    tight: "1.2",
-    normal: "1.5",
-    relaxed: "1.75"
-  },
-  shadows: {
-    none: "none",
-    sm: "0 1px 2px rgba(0, 0, 0, 0.1)",
-    md: "0 4px 6px rgba(0, 0, 0, 0.15)",
-    lg: "0 10px 15px rgba(0, 0, 0, 0.2)",
-    xl: "0 20px 25px rgba(0, 0, 0, 0.25)"
-  },
-  maxWidth: "1500px",
-  section: {
-    paddingTop: "48px",
-    paddingBottom: "48px"
-  },
-  header: {
-    height: "80px"
-  },
-  footer: {
-    height: "80px"
-  }
-}, r = {
-  mobile: 0,
-  sm: 640,
-  md: 768,
-  lg: 1024,
-  xl: 1280,
-  "2xl": 1536
-}, o = {
-  mobile: `screen and (min-width: ${r.mobile}px)`,
-  sm: `screen and (min-width: ${r.sm}px)`,
-  md: `screen and (min-width: ${r.md}px)`,
-  lg: `screen and (min-width: ${r.lg}px)`,
-  xl: `screen and (min-width: ${r.xl}px)`,
-  "2xl": `screen and (min-width: ${r["2xl"]}px)`
-}, m = p({
-  conditions: {
-    mobile: {},
-    sm: { "@media": o.sm },
-    md: { "@media": o.md },
-    lg: { "@media": o.lg },
-    xl: { "@media": o.xl },
-    "2xl": { "@media": o["2xl"] }
-  },
-  defaultCondition: "mobile",
-  properties: {
-    // Spacing
-    padding: e.space,
-    paddingTop: e.space,
-    paddingBottom: e.space,
-    paddingLeft: e.space,
-    paddingRight: e.space,
-    margin: e.space,
-    marginTop: e.space,
-    marginBottom: e.space,
-    marginLeft: e.space,
-    marginRight: e.space,
-    gap: e.space,
-    // Layout
-    display: ["none", "block", "inline", "inline-block", "flex", "inline-flex", "grid", "inline-grid"],
-    flexDirection: ["row", "column", "row-reverse", "column-reverse"],
-    // alignItems: ['stretch', 'flex-start', 'center', 'flex-end', 'baseline'],
-    justifyContent: ["flex-start", "center", "flex-end", "space-between", "space-around", "space-evenly"],
-    flexWrap: ["nowrap", "wrap", "wrap-reverse"],
-    flex: ["1", "auto", "initial", "none"],
-    // Dimensions
-    width: ["auto", "100%", "50%", "33.333333%", "25%", "fit-content", "min-content", "max-content"],
-    height: ["auto", "100%", "100vh", "fit-content", "min-content", "max-content"],
-    minWidth: ["0", "100%", "fit-content", "min-content", "max-content"],
-    maxWidth: [e.maxWidth],
-    minHeight: ["0", "100%", "100vh"],
-    // Position
-    position: ["static", "relative", "absolute", "fixed", "sticky"],
-    top: e.space,
-    bottom: e.space,
-    left: e.space,
-    right: e.space,
-    zIndex: [0, 10, 20, 30, 40, 50],
-    // Typography
-    fontSize: e.fontSizes,
-    fontFamily: e.fonts,
-    lineHeight: e.lineHeights,
-    textAlign: ["left", "center", "right", "justify"],
-    fontWeight: ["normal", "bold", "100", "200", "300", "400", "500", "600", "700", "800", "900"],
-    // Colors
-    color: e.colors,
-    backgroundColor: e.colors,
-    // Border
-    borderRadius: e.radii,
-    borderWidth: ["0", "1px", "2px", "4px"],
-    borderStyle: ["none", "solid", "dashed", "dotted"],
-    borderColor: e.colors,
-    // Effects
-    boxShadow: e.shadows,
-    opacity: ["0", "0.25", "0.5", "0.75", "1"],
-    // Overflow
-    overflow: ["visible", "hidden", "scroll", "auto"],
-    overflowX: ["visible", "hidden", "scroll", "auto"],
-    overflowY: ["visible", "hidden", "scroll", "auto"]
-  }
-}), J = c(m), K = i({
-  base: {
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    padding: e.space.md,
-    borderRadius: e.radii.md,
-    border: "none",
-    cursor: "pointer",
-    fontFamily: e.fonts.body,
-    fontSize: e.fontSizes.md,
-    fontWeight: "500",
-    lineHeight: e.lineHeights.tight,
-    textDecoration: "none",
-    transition: "all 0.2s ease-in-out",
-    outline: "none",
-    ":hover": {
-      transform: "translateY(-1px)",
-      boxShadow: e.shadows.md
-    },
-    ":active": {
-      transform: "translateY(0)"
-    },
-    ":focus-visible": {
-      outline: "2px solid",
-      outlineColor: e.colors.primary,
-      outlineOffset: "2px"
-    },
-    ":disabled": {
-      opacity: "0.5",
-      cursor: "not-allowed",
-      transform: "none",
-      boxShadow: "none"
-    }
-  },
-  variants: {
-    variant: {
-      primary: {
-        backgroundColor: e.colors.primary,
-        color: e.colors.background,
-        ":hover": {
-          backgroundColor: e.colors.accent
-        }
-      },
-      secondary: {
-        backgroundColor: e.colors.secondary,
-        color: e.colors.text,
-        ":hover": {
-          backgroundColor: e.colors.surface
-        }
-      },
-      outline: {
-        backgroundColor: "transparent",
-        color: e.colors.text,
-        border: `1px solid ${e.colors.border}`,
-        ":hover": {
-          backgroundColor: e.colors.surface,
-          borderColor: e.colors.primary
-        }
-      },
-      ghost: {
-        backgroundColor: "transparent",
-        color: e.colors.text,
-        ":hover": {
-          backgroundColor: e.colors.surface
-        }
-      },
-      danger: {
-        backgroundColor: e.colors.error,
-        color: e.colors.background,
-        ":hover": {
-          opacity: "0.9"
-        }
-      }
-    },
-    size: {
-      sm: {
-        padding: `${e.space.xs} ${e.space.sm}`,
-        fontSize: e.fontSizes.sm,
-        borderRadius: e.radii.sm
-      },
-      md: {
-        padding: `${e.space.sm} ${e.space.md}`,
-        fontSize: e.fontSizes.md,
-        borderRadius: e.radii.md
-      },
-      lg: {
-        padding: `${e.space.md} ${e.space.lg}`,
-        fontSize: e.fontSizes.lg,
-        borderRadius: e.radii.lg
-      }
-    },
-    fullWidth: {
-      true: {
-        width: "100%"
-      }
-    }
-  },
-  defaultVariants: {
-    variant: "primary",
-    size: "md"
-  }
-}), f = t({
-  width: "100%",
-  display: "flex",
-  flexDirection: "column",
-  alignItems: "center",
-  justifyContent: "flex-start",
-  paddingTop: e.section.paddingTop,
-  paddingBottom: e.section.paddingBottom,
-  paddingLeft: e.space.md,
-  paddingRight: e.space.md,
-  maxWidth: e.maxWidth,
-  margin: "0 auto",
-  position: "relative",
-  "@media": {
-    "screen and (min-width: 768px)": {
-      paddingLeft: e.space.lg,
-      paddingRight: e.space.lg
-    },
-    "screen and (min-width: 1024px)": {
-      paddingLeft: e.space.xl,
-      paddingRight: e.space.xl
-    }
-  }
-}), Q = i({
-  base: f,
-  variants: {
-    align: {
-      left: {
-        textAlign: "left",
-        alignItems: "flex-start"
-      },
-      center: {
-        textAlign: "center",
-        alignItems: "center"
-      },
-      right: {
-        textAlign: "right",
-        alignItems: "flex-end"
-      }
-    },
-    isDark: {
-      true: {
-        backgroundColor: e.colors.surface,
-        color: e.colors.textLight
-      },
-      false: {
-        backgroundColor: e.colors.background,
-        color: e.colors.text
-      }
-    },
-    isFullHeight: {
-      true: {
-        minHeight: "100vh",
-        justifyContent: "center"
-      },
-      false: {
-        minHeight: "auto",
-        justifyContent: "flex-start"
-      }
-    },
-    spacing: {
-      none: {
-        paddingTop: "0",
-        paddingBottom: "0"
-      },
-      sm: {
-        paddingTop: e.space.md,
-        paddingBottom: e.space.md
-      },
-      md: {
-        paddingTop: e.section.paddingTop,
-        paddingBottom: e.section.paddingBottom
-      },
-      lg: {
-        paddingTop: e.space.xl,
-        paddingBottom: e.space.xl
-      },
-      xl: {
-        paddingTop: e.space["2xl"],
-        paddingBottom: e.space["2xl"]
-      }
-    }
-  },
-  defaultVariants: {
-    align: "left",
-    isDark: !1,
-    isFullHeight: !1,
-    spacing: "md"
-  }
-}), x = t({
-  display: "flex",
-  flexDirection: "column",
-  alignItems: "center",
-  justifyContent: "flex-start",
-  width: "100%",
-  minHeight: "100vh",
-  maxWidth: e.maxWidth,
-  margin: "0 auto",
-  paddingTop: e.header.height,
-  paddingBottom: e.footer.height,
-  backgroundColor: e.colors.background,
-  color: e.colors.text,
-  fontFamily: e.fonts.body
-}), Z = i({
-  base: x,
-  variants: {
-    centered: {
-      true: {
-        justifyContent: "center",
-        alignItems: "center"
-      },
-      false: {
-        justifyContent: "flex-start",
-        alignItems: "stretch"
-      }
-    },
-    fullWidth: {
-      true: {
-        maxWidth: "100%"
-      },
-      false: {
-        maxWidth: e.maxWidth
-      }
-    },
-    noPadding: {
-      true: {
-        paddingTop: "0",
-        paddingBottom: "0"
-      },
-      false: {
-        paddingTop: e.header.height,
-        paddingBottom: e.footer.height
-      }
-    }
-  },
-  defaultVariants: {
-    centered: !1,
-    fullWidth: !1,
-    noPadding: !1
-  }
-}), u = t({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-between",
-  width: "100%",
-  height: e.header.height,
-  backgroundColor: e.colors.background,
-  color: e.colors.text,
-  zIndex: 30,
-  paddingLeft: e.space.md,
-  paddingRight: e.space.md,
-  paddingTop: e.space.sm,
-  paddingBottom: e.space.sm,
-  gap: e.space.md,
-  "@media": {
-    [o.md]: {
-      paddingLeft: e.space.lg,
-      paddingRight: e.space.lg,
-      gap: e.space.lg
-    },
-    [o.lg]: {
-      paddingLeft: e.space.xl,
-      paddingRight: e.space.xl,
-      gap: e.space.xl
-    }
-  }
-  // selectors: {
-  //   '& a': {
-  //     transition: 'all 0.3s ease-in-out',
-  //     textDecoration: 'none',
-  //     color: 'inherit',
-  //   },
-  //   '& a:hover': {
-  //     opacity: '0.7',
-  //     transform: 'translateY(-1px)',
-  //   },
-  // },
-}), _ = i({
-  base: u,
-  variants: {
-    // position: {
-    //   relative: {
-    //     position: 'relative',
-    //   },
-    //   fixed: {
-    //     position: 'fixed',
-    //     top: 0,
-    //     left: 0,
-    //     right: 0,
-    //   },
-    //   sticky: {
-    //     position: 'sticky',
-    //     top: 0,
-    //   },
-    // },
-    variant: {
-      default: {
-        backgroundColor: e.colors.background,
-        borderBottom: `1px solid ${e.colors.border}`
-      },
-      transparent: {
-        backgroundColor: "transparent",
-        borderBottom: "none"
-      },
-      dark: {
-        backgroundColor: e.colors.surface,
-        color: e.colors.textLight
-      }
-    },
-    size: {
-      sm: {
-        height: "60px",
-        paddingTop: e.space.xs,
-        paddingBottom: e.space.xs
-      },
-      md: {
-        height: e.header.height,
-        paddingTop: e.space.sm,
-        paddingBottom: e.space.sm
-      },
-      lg: {
-        height: "100px",
-        paddingTop: e.space.md,
-        paddingBottom: e.space.md
-      }
-    }
-  },
-  defaultVariants: {
-    // position: 'relative',
-    variant: "default",
-    size: "md"
-  }
-}), ee = t({
-  height: e.header.height,
-  width: "100%"
-}), h = t({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-between",
-  flexDirection: "column",
-  backgroundColor: e.colors.background,
-  color: e.colors.text,
-  zIndex: 20,
-  paddingLeft: e.space.md,
-  paddingRight: e.space.md,
-  paddingTop: e.space.lg,
-  paddingBottom: e.space.lg,
-  gap: e.space.md,
-  fontSize: e.fontSizes.sm,
-  borderTop: `1px solid ${e.colors.border}`,
-  "@media": {
-    [o.md]: {
-      paddingLeft: e.space.lg,
-      paddingRight: e.space.lg,
-      gap: e.space.lg
-    },
-    [o.lg]: {
-      flexDirection: "row",
-      paddingLeft: e.space.xl,
-      paddingRight: e.space.xl,
-      gap: e.space.xl
-    }
-  }
-  // selectors: {
-  //   '& a': {
-  //     transition: 'all 0.3s ease-in-out',
-  //     textDecoration: 'none',
-  //     color: 'inherit',
-  //   },
-  //   '& a:hover': {
-  //     opacity: '0.7',
-  //     transform: 'translateY(-1px)',
-  //   },
-  // },
-}), te = i({
-  base: h,
-  variants: {
-    variant: {
-      default: {
-        backgroundColor: e.colors.background,
-        borderTop: `1px solid ${e.colors.border}`
-      },
-      dark: {
-        backgroundColor: e.colors.surface,
-        color: e.colors.textLight,
-        borderTop: `1px solid ${e.colors.border}`
-      },
-      minimal: {
-        backgroundColor: "transparent",
-        borderTop: "none"
-      }
-    },
-    size: {
-      sm: {
-        paddingTop: e.space.md,
-        paddingBottom: e.space.md,
-        fontSize: e.fontSizes.xs
-      },
-      md: {
-        paddingTop: e.space.lg,
-        paddingBottom: e.space.lg,
-        fontSize: e.fontSizes.sm
-      },
-      lg: {
-        paddingTop: e.space.xl,
-        paddingBottom: e.space.xl,
-        fontSize: e.fontSizes.md
-      }
-    },
-    layout: {
-      stacked: {
-        flexDirection: "column",
-        textAlign: "center"
-      },
-      horizontal: {
-        "@media": {
-          [o.sm]: {
-            flexDirection: "row",
-            textAlign: "left"
-          }
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    variant: "default",
-    size: "md",
-    layout: "horizontal"
-  }
-}), b = t({
-  display: "flex",
-  alignItems: "center",
-  gap: e.space.md,
-  flexDirection: "column",
-  "@media": {
-    [o.md]: {
-      flexDirection: "row",
-      gap: e.space.lg
-    },
-    [o.lg]: {
-      gap: e.space.xl
-    }
-  }
-  // selectors: {
-  //   '& a': {
-  //     textDecoration: 'none',
-  //     color: 'inherit',
-  //     transition: 'all 0.3s ease-in-out',
-  //     display: 'block',
-  //     padding: `${themeContract.space.xs} ${themeContract.space.sm}`,
-  //     borderRadius: themeContract.radii.sm,
-  //   },
-  //   '& a:hover': {
-  //     backgroundColor: themeContract.colors.surface,
-  //     transform: 'translateY(-1px)',
-  //   },
-  //   '& a:focus': {
-  //     outline: '2px solid',
-  //     outlineColor: themeContract.colors.primary,
-  //     outlineOffset: '2px',
-  //   },
-  //   '& a[aria-current="page"]': {
-  //     backgroundColor: themeContract.colors.primary,
-  //     color: themeContract.colors.background,
-  //   },
-  // },
-}), oe = i({
-  base: b,
-  variants: {
-    orientation: {
-      horizontal: {
-        flexDirection: "row",
-        alignItems: "center"
-      },
-      vertical: {
-        flexDirection: "column",
-        alignItems: "flex-start"
-      },
-      responsive: {
-        flexDirection: "column",
-        alignItems: "flex-start",
-        "@media": {
-          [o.md]: {
-            flexDirection: "row",
-            alignItems: "center"
-          }
-        }
-      }
-    },
-    variant: {
-      default: {
-        gap: e.space.md
-      },
-      compact: {
-        gap: e.space.sm
-        // selectors: {
-        //   '& a': {
-        //     padding: `${themeContract.space.xs} ${themeContract.space.xs}`,
-        //     fontSize: themeContract.fontSizes.sm,
-        //   },
-        // },
-      },
-      spacious: {
-        gap: e.space.lg
-        // selectors: {
-        //   '& a': {
-        //     padding: `${themeContract.space.sm} ${themeContract.space.md}`,
-        //     fontSize: themeContract.fontSizes.lg,
-        //   },
-        // },
-      }
-    },
-    justify: {
-      start: {
-        justifyContent: "flex-start"
-      },
-      center: {
-        justifyContent: "center"
-      },
-      end: {
-        justifyContent: "flex-end"
-      },
-      between: {
-        justifyContent: "space-between"
-      },
-      around: {
-        justifyContent: "space-around"
-      }
-    }
-  },
-  defaultVariants: {
-    orientation: "responsive",
-    variant: "default",
-    justify: "start"
-  }
-}), y = t({
-  display: "inline-block",
-  verticalAlign: "middle",
-  fill: "currentColor",
-  flexShrink: 0,
-  transition: "all 0.3s ease-in-out"
-});
-t({
-  transition: "fill 0.3s ease-in-out"
-});
-const ae = i({
-  base: y,
-  variants: {
-    size: {
-      xs: {
-        width: "12px",
-        height: "12px"
-      },
-      sm: {
-        width: "16px",
-        height: "16px"
-      },
-      md: {
-        width: "24px",
-        height: "24px"
-      },
-      lg: {
-        width: "32px",
-        height: "32px"
-      },
-      xl: {
-        width: "48px",
-        height: "48px"
-      },
-      "2xl": {
-        width: "64px",
-        height: "64px"
-      }
-    },
-    // color: {
-    //   current: {
-    //     fill: 'currentColor',
-    //   },
-    //   primary: {
-    //     fill: themeContract.colors.primary,
-    //   },
-    //   secondary: {
-    //     fill: themeContract.colors.secondary,
-    //   },
-    //   accent: {
-    //     fill: themeContract.colors.accent,
-    //   },
-    //   text: {
-    //     fill: themeContract.colors.text,
-    //   },
-    //   textSecondary: {
-    //     fill: themeContract.colors.textSecondary,
-    //   },
-    //   error: {
-    //     fill: themeContract.colors.error,
-    //   },
-    //   success: {
-    //     fill: themeContract.colors.success,
-    //   },
-    //   warning: {
-    //     fill: themeContract.colors.warning,
-    //   },
-    //   info: {
-    //     fill: themeContract.colors.info,
-    //   },
-    // },
-    interactive: {
-      true: {
-        cursor: "pointer",
-        ":hover": {
-          transform: "scale(1.1)",
-          opacity: 0.8
-        },
-        ":active": {
-          transform: "scale(0.95)"
-        }
-      },
-      false: {}
-    }
-  },
-  defaultVariants: {
-    size: "md",
-    // color: 'current',
-    interactive: !1
-  }
-}), w = l({
-  from: { opacity: "0" },
-  to: { opacity: "1" }
-}), v = l({
-  from: {
-    opacity: "0",
-    transform: "translate(-50%, -60%) scale(0.95)"
-  },
-  to: {
-    opacity: "1",
-    transform: "translate(-50%, -50%) scale(1)"
-  }
-}), z = t({
-  position: "fixed",
-  top: 0,
-  left: 0,
-  right: 0,
-  bottom: 0,
-  zIndex: 50,
-  backgroundColor: "rgba(0, 0, 0, 0.5)",
-  backdropFilter: "blur(4px)",
-  animation: `${w} 0.2s ease-out`,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  padding: e.space.md,
-  overflowY: "auto"
-}), C = t({
-  position: "relative",
-  backgroundColor: e.colors.background,
-  borderRadius: e.radii.lg,
-  boxShadow: e.shadows.xl,
-  border: `1px solid ${e.colors.border}`,
-  maxHeight: "90vh",
-  maxWidth: "90vw",
-  width: "100%",
-  overflowY: "auto",
-  animation: `${v} 0.3s ease-out`,
-  "@media": {
-    [o.sm]: {
-      maxWidth: "500px"
-    },
-    [o.md]: {
-      maxWidth: "600px"
-    },
-    [o.lg]: {
-      maxWidth: "800px"
-    }
-  }
-}), ie = t({
-  position: "absolute",
-  top: e.space.md,
-  right: e.space.md,
-  zIndex: 10,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  width: "32px",
-  height: "32px",
-  border: "none",
-  borderRadius: e.radii.full,
-  backgroundColor: e.colors.surface,
-  color: e.colors.text,
-  cursor: "pointer",
-  transition: "all 0.2s ease-in-out"
-  // ':hover': {
-  //   backgroundColor: themeContract.colors.error,
-  //   color: themeContract.colors.background,
-  //   transform: 'scale(1.1)',
-  // },
-  // ':focus': {
-  //   outline: '2px solid',
-  //   outlineColor: themeContract.colors.primary,
-  //   outlineOffset: '2px',
-  // },
-}), ne = i({
-  base: z,
-  variants: {
-    size: {
-      sm: {},
-      md: {},
-      lg: {},
-      xl: {},
-      full: {
-        padding: 0
-        // selectors: {
-        //   '& > div': {
-        //     width: '100vw',
-        //     height: '100vh',
-        //     maxWidth: 'none',
-        //     maxHeight: 'none',
-        //     borderRadius: 0,
-        //   },
-        // },
-      }
-    },
-    centered: {
-      true: {
-        alignItems: "center",
-        justifyContent: "center"
-      },
-      false: {
-        alignItems: "flex-start",
-        justifyContent: "center",
-        paddingTop: "5vh"
-      }
-    }
-  },
-  defaultVariants: {
-    size: "md",
-    centered: !0
-  }
-}), se = i({
-  base: C,
-  variants: {
-    size: {
-      sm: {
-        padding: e.space.md,
-        "@media": {
-          [o.sm]: {
-            maxWidth: "400px"
-          }
-        }
-      },
-      md: {
-        padding: e.space.lg,
-        "@media": {
-          [o.sm]: {
-            maxWidth: "500px"
-          }
-        }
-      },
-      lg: {
-        padding: e.space.xl,
-        "@media": {
-          [o.md]: {
-            maxWidth: "700px"
-          }
-        }
-      },
-      xl: {
-        padding: e.space.xl,
-        "@media": {
-          [o.lg]: {
-            maxWidth: "900px"
-          }
-        }
-      },
-      full: {
-        width: "100vw",
-        height: "100vh",
-        maxWidth: "none",
-        maxHeight: "none",
-        borderRadius: 0,
-        padding: e.space.xl
-      }
-    },
-    align: {
-      left: {
-        textAlign: "left"
-      },
-      center: {
-        textAlign: "center"
-      },
-      right: {
-        textAlign: "right"
-      }
-    }
-  },
-  defaultVariants: {
-    size: "md",
-    align: "left"
-  }
-}), S = t({
-  display: "inline-block"
-  // selectors: {
-  //   '& img': {
-  //     width: '100%',
-  //     height: 'auto',
-  //     maxWidth: '100%',
-  //     display: 'block',
-  //   },
-  //   '& svg': {
-  //     width: '100%',
-  //     height: 'auto',
-  //     maxWidth: '100%',
-  //     display: 'block',
-  //     fill: 'currentColor',
-  //   },
-  // },
-}), re = i({
-  base: S,
-  variants: {
-    size: {
-      xs: {
-        width: "80px",
-        height: "auto"
-      },
-      sm: {
-        width: "120px",
-        height: "auto"
-      },
-      md: {
-        width: "160px",
-        height: "auto"
-      },
-      lg: {
-        width: "200px",
-        height: "auto"
-      },
-      xl: {
-        width: "240px",
-        height: "auto"
-      },
-      auto: {
-        width: "auto",
-        height: "auto"
-      }
-    },
-    variant: {
-      default: {},
-      link: {
-        cursor: "pointer",
-        transition: "all 0.3s ease-in-out",
-        ":hover": {
-          opacity: "0.8",
-          transform: "scale(1.05)"
-        },
-        ":focus": {
-          outline: "2px solid",
-          outlineColor: e.colors.primary,
-          outlineOffset: "2px",
-          borderRadius: e.radii.sm
-        }
-      }
-    },
-    responsive: {
-      true: {
-        maxWidth: "100%",
-        height: "auto"
-        // selectors: {
-        //   '& img, & svg': {
-        //     width: '100%',
-        //     height: 'auto',
-        //     maxWidth: '100%',
-        //   },
-        // },
-      },
-      false: {}
-    }
-  },
-  defaultVariants: {
-    size: "md",
-    variant: "default",
-    responsive: !0
-  }
-}), k = t({
-  display: "flex",
-  flexDirection: "column",
-  alignItems: "flex-start",
-  justifyContent: "flex-start",
-  width: "100%",
-  gap: e.space.md,
-  "@media": {
-    [o.md]: {
-      flexDirection: "row",
-      alignItems: "stretch",
-      gap: e.space.lg
-    },
-    [o.lg]: {
-      gap: e.space.xl
-    }
-  }
-}), le = {
-  1: t({
-    "@media": {
-      [o.md]: {
-        flex: "0 0 100%",
-        maxWidth: "100%"
-      }
-    }
-  }),
-  2: t({
-    "@media": {
-      [o.md]: {
-        flex: "0 0 50%",
-        maxWidth: "50%"
-      }
-    }
-  }),
-  3: t({
-    "@media": {
-      [o.md]: {
-        flex: "0 0 33.333333%",
-        maxWidth: "33.333333%"
-      }
-    }
-  }),
-  4: t({
-    "@media": {
-      [o.md]: {
-        flex: "0 0 25%",
-        maxWidth: "25%"
-      }
-    }
-  }),
-  6: t({
-    "@media": {
-      [o.md]: {
-        flex: "0 0 16.666667%",
-        maxWidth: "16.666667%"
-      }
-    }
-  }),
-  12: t({
-    "@media": {
-      [o.md]: {
-        flex: "0 0 8.333333%",
-        maxWidth: "8.333333%"
-      }
-    }
-  })
-}, de = i({
-  base: k,
-  variants: {
-    align: {
-      left: {
-        textAlign: "left",
-        justifyContent: "flex-start"
-      },
-      center: {
-        textAlign: "center",
-        justifyContent: "center"
-      },
-      right: {
-        textAlign: "right",
-        justifyContent: "flex-end"
-      }
-    },
-    spacing: {
-      none: {
-        gap: "0"
-      },
-      sm: {
-        gap: e.space.sm,
-        "@media": {
-          [o.md]: {
-            gap: e.space.md
-          }
-        }
-      },
-      md: {
-        gap: e.space.md,
-        "@media": {
-          [o.md]: {
-            gap: e.space.lg
-          }
-        }
-      },
-      lg: {
-        gap: e.space.lg,
-        "@media": {
-          [o.md]: {
-            gap: e.space.xl
-          }
-        }
-      }
-    },
-    wrap: {
-      true: {
-        flexWrap: "wrap"
-      },
-      false: {
-        flexWrap: "nowrap"
-      }
-    },
-    reverse: {
-      true: {
-        "@media": {
-          [o.md]: {
-            flexDirection: "row-reverse"
-          }
-        }
-      },
-      false: {}
-    },
-    alignItems: {
-      start: {
-        "@media": {
-          [o.md]: {
-            alignItems: "flex-start"
-          }
-        }
-      },
-      center: {
-        "@media": {
-          [o.md]: {
-            alignItems: "center"
-          }
-        }
-      },
-      end: {
-        "@media": {
-          [o.md]: {
-            alignItems: "flex-end"
-          }
-        }
-      },
-      stretch: {
-        "@media": {
-          [o.md]: {
-            alignItems: "stretch"
-          }
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    align: "left",
-    spacing: "md",
-    wrap: !0,
-    reverse: !1,
-    alignItems: "stretch"
-  }
-}), B = t({
-  display: "flex",
-  flexWrap: "wrap",
-  gap: e.space.sm,
-  paddingTop: e.space.sm,
-  width: "100%",
-  "@media": {
-    [o.lg]: {
-      gap: e.space.md,
-      paddingTop: e.space.md
-    }
-  }
-}), ce = i({
-  base: B,
-  variants: {
-    align: {
-      left: {
-        justifyContent: "flex-start",
-        alignItems: "flex-start"
-      },
-      center: {
-        justifyContent: "center",
-        alignItems: "center"
-      },
-      right: {
-        justifyContent: "flex-end",
-        alignItems: "flex-end"
-      }
-    },
-    direction: {
-      row: {
-        flexDirection: "row"
-      },
-      column: {
-        flexDirection: "column"
-      },
-      "row-reverse": {
-        flexDirection: "row-reverse"
-      },
-      "column-reverse": {
-        flexDirection: "column-reverse"
-      }
-    },
-    spacing: {
-      none: {
-        gap: "0",
-        paddingTop: "0"
-      },
-      xs: {
-        gap: e.space.xs,
-        paddingTop: e.space.xs
-      },
-      sm: {
-        gap: e.space.sm,
-        paddingTop: e.space.sm
-      },
-      md: {
-        gap: e.space.md,
-        paddingTop: e.space.md
-      },
-      lg: {
-        gap: e.space.lg,
-        paddingTop: e.space.lg
-      },
-      xl: {
-        gap: e.space.xl,
-        paddingTop: e.space.xl
-      }
-    },
-    wrap: {
-      true: {
-        flexWrap: "wrap"
-      },
-      false: {
-        flexWrap: "nowrap"
-      }
-    },
-    fullWidth: {
-      true: {
-        width: "100%"
-        // selectors: {
-        //   '& > *': {
-        //     flex: '1',
-        //   },
-        // },
-      },
-      false: {
-        width: "auto"
-      }
-    }
-  },
-  defaultVariants: {
-    align: "left",
-    direction: "row",
-    spacing: "sm",
-    wrap: !0,
-    fullWidth: !1
-  }
-});
-l({
-  "0%": { transform: "translateX(0)" },
-  "100%": { transform: "translateX(var(--slide-offset))" }
-});
-const W = t({
-  position: "relative",
-  overflow: "hidden",
-  width: "100%"
-}), pe = t({
-  width: "100%",
-  position: "relative"
-}), ge = t({
-  display: "flex",
-  position: "relative",
-  transition: "transform 0.3s ease-in-out",
-  willChange: "transform"
-}), me = t({
-  width: "100%",
-  display: "flex",
-  position: "relative",
-  alignItems: "stretch",
-  flexShrink: 0
-}), fe = t({
-  position: "absolute",
-  bottom: 0,
-  left: 0,
-  right: 0,
-  zIndex: 30,
-  width: "100%",
-  maxWidth: e.maxWidth,
-  display: "flex",
-  justifyContent: "flex-end",
-  pointerEvents: "none",
-  gap: e.space.sm,
-  padding: e.space.md
-}), xe = t({
-  border: "none",
-  borderRadius: e.radii.full,
-  backgroundColor: e.colors.background,
-  color: e.colors.text,
-  padding: e.space.sm,
-  cursor: "pointer",
-  pointerEvents: "auto",
-  transition: "all 0.3s ease-in-out",
-  boxShadow: e.shadows.md,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  width: "48px",
-  height: "48px"
-  // ':hover': {
-  //   transform: 'scale(1.1)',
-  //   backgroundColor: themeContract.colors.primary,
-  //   color: themeContract.colors.background,
-  // },
-  // ':focus': {
-  //   outline: '2px solid',
-  //   outlineColor: themeContract.colors.primary,
-  //   outlineOffset: '2px',
-  // },
-  // ':disabled': {
-  //   opacity: '0.5',
-  //   cursor: 'not-allowed',
-  //   transform: 'none',
-  // },
-  // selectors: {
-  //   ':disabled:hover': {
-  //     transform: 'none',
-  //     backgroundColor: themeContract.colors.background,
-  //     color: themeContract.colors.text,
-  //   },
-  // },
-}), ue = t({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  gap: e.space.md,
-  marginTop: e.space.lg,
-  "@media": {
-    [o.lg]: {
-      marginTop: e.space.xl
-    }
-  }
-}), he = t({
-  width: "12px",
-  height: "12px",
-  borderRadius: e.radii.full,
-  backgroundColor: e.colors.border,
-  cursor: "pointer",
-  transition: "all 0.3s ease-in-out",
-  border: "none",
-  ":hover": {
-    transform: "scale(1.2)",
-    backgroundColor: e.colors.primary
-  },
-  ":focus": {
-    outline: "2px solid",
-    outlineColor: e.colors.primary,
-    outlineOffset: "2px"
-  },
-  "@media": {
-    [o.md]: {
-      width: "16px",
-      height: "16px"
-    }
-  }
-}), be = i({
-  base: W,
-  variants: {
-    fullWidth: {
-      true: {
-        width: "100vw",
-        marginLeft: `calc((100vw - ${e.maxWidth}) / -2)`,
-        marginRight: `calc((100vw - ${e.maxWidth}) / -2)`,
-        "@media": {
-          "screen and (max-width: 1500px)": {
-            marginLeft: `calc(-1 * ${e.space.md})`,
-            marginRight: `calc(-1 * ${e.space.md})`
-          },
-          [o.md]: {
-            marginLeft: `calc(-1 * ${e.space.lg})`,
-            marginRight: `calc(-1 * ${e.space.lg})`
-          },
-          [o.lg]: {
-            marginLeft: `calc(-1 * ${e.space.xl})`,
-            marginRight: `calc(-1 * ${e.space.xl})`
-          }
-        }
-      },
-      false: {
-        width: "100%"
-      }
-    }
-  },
-  defaultVariants: {
-    fullWidth: !1
-  }
-}), ye = t({
-  backgroundColor: e.colors.primary,
-  pointerEvents: "none",
-  opacity: 1
-}), R = l({
-  from: { opacity: "0" },
-  to: { opacity: "1" }
-}), I = l({
-  from: {
-    opacity: "0",
-    transform: "translateY(100%)"
-  },
-  to: {
-    opacity: "1",
-    transform: "translateY(0)"
-  }
-}), $ = t({
-  position: "fixed",
-  top: 0,
-  left: 0,
-  right: 0,
-  bottom: 0,
-  zIndex: 100,
-  animation: `${R} 0.3s ease-out`,
-  "::before": {
-    content: '""',
-    position: "fixed",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    backgroundColor: "rgba(0, 0, 0, 0.3)",
-    backdropFilter: "blur(2px)",
-    opacity: 0.8
-  }
-}), we = t({
-  // position: 'fixed',
-  bottom: e.space.md,
-  right: e.space.md,
-  zIndex: 20,
-  display: "flex",
-  flexDirection: "column",
-  backgroundColor: e.colors.background,
-  border: `1px solid ${e.colors.border}`,
-  borderRadius: e.radii.lg,
-  boxShadow: e.shadows.xl,
-  padding: e.space.lg,
-  width: "300px",
-  maxWidth: "calc(100vw - 32px)",
-  animation: `${I} 0.3s ease-out`,
-  "@media": {
-    [o.sm]: {
-      width: "400px"
-    },
-    [o.md]: {
-      width: "500px",
-      padding: e.space.xl
-    }
-  }
-}), ve = t({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "flex-end",
-  gap: e.space.md,
-  marginTop: e.space.lg,
-  flexWrap: "wrap",
-  "@media": {
-    [o.sm]: {
-      flexWrap: "nowrap"
-    }
-  }
-}), ze = i({
-  base: $,
-  variants: {
-    // position: {
-    //   'bottom-right': {},
-    //   'bottom-left': {
-    //     // selectors: {
-    //     //   '& > div': {
-    //     //     left: themeContract.space.md,
-    //     //     right: 'auto',
-    //     //   },
-    //     // },
-    //   },
-    //   'bottom-center': {
-    //     // selectors: {
-    //     //   '& > div': {
-    //     //     left: '50%',
-    //     //     right: 'auto',
-    //     //     transform: 'translateX(-50%)',
-    //     //   },
-    //     // },
-    //   },
-    //   'top-right': {
-    //     // selectors: {
-    //     //   '& > div': {
-    //     //     top: themeContract.space.md,
-    //     //     bottom: 'auto',
-    //     //   },
-    //     // },
-    //   },
-    //   'top-left': {
-    //     // selectors: {
-    //     //   '& > div': {
-    //     //     top: themeContract.space.md,
-    //     //     bottom: 'auto',
-    //     //     left: themeContract.space.md,
-    //     //     right: 'auto',
-    //     //   },
-    //     // },
-    //   },
-    //   'top-center': {
-    //     // selectors: {
-    //     //   '& > div': {
-    //     //     top: themeContract.space.md,
-    //     //     bottom: 'auto',
-    //     //     left: '50%',
-    //     //     right: 'auto',
-    //     //     transform: 'translateX(-50%)',
-    //     //   },
-    //     // },
-    //   },
-    // },
-    variant: {
-      modal: {},
-      banner: {
-        "::before": {
-          display: "none"
-        }
-        // selectors: {
-        //   '& > div': {
-        //     position: 'static',
-        //     width: '100%',
-        //     maxWidth: 'none',
-        //     borderRadius: 0,
-        //     bottom: 'auto',
-        //     right: 'auto',
-        //   },
-        // },
-      }
-    }
-  },
-  defaultVariants: {
-    // position: 'bottom-right',
-    variant: "modal"
-  }
-}), T = t({
-  display: "flex",
-  flexDirection: "column",
-  alignItems: "center",
-  textAlign: "center",
-  color: e.colors.text
-}), Ce = t({
-  fontSize: e.fontSizes.lg,
-  paddingBottom: e.space.md,
-  fontWeight: "400",
-  "@media": {
-    [o.lg]: {
-      paddingBottom: e.space.lg
-    }
-  }
-  // selectors: {
-  //   '& span': {
-  //     fontSize: themeContract.fontSizes['4xl'],
-  //     lineHeight: themeContract.lineHeights.tight,
-  //     fontWeight: 'bold',
-  //     display: 'inline-block',
-  //     '@media': {
-  //       [queries.md]: {
-  //         fontSize: '3rem',
-  //       },
-  //       [queries.lg]: {
-  //         fontSize: '4rem',
-  //       },
-  //     },
-  //   },
-  // },
-}), Se = t({
-  fontSize: e.fontSizes.md,
-  color: e.colors.textSecondary,
-  lineHeight: e.lineHeights.normal,
-  margin: 0,
-  "@media": {
-    [o.md]: {
-      fontSize: e.fontSizes.lg
-    }
-  }
-}), ke = i({
-  base: T,
-  variants: {
-    size: {
-      sm: {
-        // selectors: {
-        //   [`& .${keyNumberValue}`]: {
-        //     fontSize: themeContract.fontSizes.md,
-        //   },
-        //   [`& .${keyNumberValue} span`]: {
-        //     fontSize: themeContract.fontSizes['2xl'],
-        //   },
-        //   [`& .${keyNumberLabel}`]: {
-        //     fontSize: themeContract.fontSizes.sm,
-        //   },
-        // },
-      },
-      md: {},
-      lg: {
-        // selectors: {
-        //   [`& .${keyNumberValue}`]: {
-        //     fontSize: themeContract.fontSizes.xl,
-        //   },
-        //   [`& .${keyNumberValue} span`]: {
-        //     fontSize: '5rem',
-        //     '@media': {
-        //       [queries.lg]: {
-        //         fontSize: '6rem',
-        //       },
-        //     },
-        //   },
-        //   [`& .${keyNumberLabel}`]: {
-        //     fontSize: themeContract.fontSizes.xl,
-        //   },
-        // },
-      }
-    },
-    variant: {
-      default: {},
-      highlighted: {
-        padding: e.space.lg,
-        backgroundColor: e.colors.surface,
-        borderRadius: e.radii.lg,
-        boxShadow: e.shadows.md
-      },
-      outlined: {
-        padding: e.space.lg,
-        border: `2px solid ${e.colors.border}`,
-        borderRadius: e.radii.lg
-      }
-    },
-    align: {
-      left: {
-        alignItems: "flex-start",
-        textAlign: "left"
-      },
-      center: {
-        alignItems: "center",
-        textAlign: "center"
-      },
-      right: {
-        alignItems: "flex-end",
-        textAlign: "right"
-      }
-    }
-    // color: {
-    //   default: {},
-    //   primary: {
-    //     // selectors: {
-    //     //   [`& .${keyNumberValue} span`]: {
-    //     //     color: themeContract.colors.primary,
-    //     //   },
-    //     // },
-    //   },
-    //   accent: {
-    //     // selectors: {
-    //     //   [`& .${keyNumberValue} span`]: {
-    //     //     color: themeContract.colors.accent,
-    //     //   },
-    //     // },
-    //   },
-    //   success: {
-    //     // selectors: {
-    //     //   [`& .${keyNumberValue} span`]: {
-    //     //     color: themeContract.colors.success,
-    //     //   },
-    //     // },
-    //   },
-    // },
-  },
-  defaultVariants: {
-    size: "md",
-    variant: "default",
-    align: "center"
-    // color: 'default',
-  }
-}), D = t({
-  display: "flex",
-  alignItems: "center",
-  gap: e.space.md,
-  "@media": {
-    [o.md]: {
-      gap: e.space.lg
-    }
-  }
-}), Be = t({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  textDecoration: "none",
-  color: "inherit",
-  transition: "all 0.3s ease-in-out",
-  borderRadius: e.radii.full,
-  padding: e.space.xs
-  // ':hover': {
-  //   transform: 'translateY(-2px) scale(1.1)',
-  //   color: themeContract.colors.primary,
-  // },
-  // ':focus': {
-  //   outline: '2px solid',
-  //   outlineColor: themeContract.colors.primary,
-  //   outlineOffset: '2px',
-  // },
-  // ':active': {
-  //   transform: 'translateY(0) scale(1.05)',
-  // },
-}), We = i({
-  base: D,
-  variants: {
-    orientation: {
-      horizontal: {
-        flexDirection: "row"
-      },
-      vertical: {
-        flexDirection: "column"
-      }
-    },
-    size: {
-      sm: {
-        gap: e.space.sm
-        // selectors: {
-        //   [`& .${navSocialLink}`]: {
-        //     padding: themeContract.space.xs,
-        //   },
-        // },
-      },
-      md: {
-        gap: e.space.md
-      },
-      lg: {
-        gap: e.space.lg
-        // selectors: {
-        //   [`& .${navSocialLink}`]: {
-        //     padding: themeContract.space.sm,
-        //   },
-        // },
-      }
-    },
-    variant: {
-      default: {},
-      rounded: {
-        // selectors: {
-        //   [`& .${navSocialLink}`]: {
-        //     backgroundColor: themeContract.colors.surface,
-        //     borderRadius: themeContract.radii.full,
-        //     width: '40px',
-        //     height: '40px',
-        //   },
-        //   [`& .${navSocialLink}:hover`]: {
-        //     backgroundColor: themeContract.colors.primary,
-        //     color: themeContract.colors.background,
-        //   },
-        // },
-      },
-      outlined: {
-        // selectors: {
-        //   [`& .${navSocialLink}`]: {
-        //     border: `1px solid ${themeContract.colors.border}`,
-        //     borderRadius: themeContract.radii.md,
-        //     width: '40px',
-        //     height: '40px',
-        //   },
-        //   [`& .${navSocialLink}:hover`]: {
-        //     borderColor: themeContract.colors.primary,
-        //     backgroundColor: themeContract.colors.primary,
-        //     color: themeContract.colors.background,
-        //   },
-        // },
-      }
-    }
-  },
-  defaultVariants: {
-    orientation: "horizontal",
-    size: "md",
-    variant: "default"
-  }
-}), j = t({
-  display: "flex",
-  alignItems: "center",
-  gap: e.space.md,
-  fontSize: e.fontSizes.sm,
-  color: e.colors.textSecondary,
-  flexDirection: "column",
-  "@media": {
-    [o.md]: {
-      flexDirection: "row",
-      gap: e.space.lg
-    }
-  }
-  // selectors: {
-  //   '& a': {
-  //     color: 'inherit',
-  //     textDecoration: 'none',
-  //     transition: 'all 0.3s ease-in-out',
-  //     borderRadius: themeContract.radii.sm,
-  //     padding: `${themeContract.space.xs} ${themeContract.space.sm}`,
-  //   },
-  //   '& a:hover': {
-  //     color: themeContract.colors.primary,
-  //     backgroundColor: themeContract.colors.surface,
-  //   },
-  //   '& a:focus': {
-  //     outline: '2px solid',
-  //     outlineColor: themeContract.colors.primary,
-  //     outlineOffset: '2px',
-  //   },
-  // },
-}), Re = i({
-  base: j,
-  variants: {
-    orientation: {
-      horizontal: {
-        flexDirection: "row"
-      },
-      vertical: {
-        flexDirection: "column",
-        alignItems: "flex-start"
-      },
-      responsive: {
-        flexDirection: "column",
-        alignItems: "flex-start",
-        "@media": {
-          [o.md]: {
-            flexDirection: "row",
-            alignItems: "center"
-          }
-        }
-      }
-    },
-    size: {
-      sm: {
-        fontSize: e.fontSizes.xs,
-        gap: e.space.sm
-      },
-      md: {
-        fontSize: e.fontSizes.sm,
-        gap: e.space.md
-      },
-      lg: {
-        fontSize: e.fontSizes.md,
-        gap: e.space.lg
-      }
-    },
-    variant: {
-      default: {},
-      compact: {
-        gap: e.space.sm
-        // selectors: {
-        //   '& a': {
-        //     padding: `${themeContract.space.xs} ${themeContract.space.xs}`,
-        //   },
-        // },
-      },
-      spacious: {
-        gap: e.space.xl
-        // selectors: {
-        //   '& a': {
-        //     padding: `${themeContract.space.sm} ${themeContract.space.md}`,
-        //   },
-        // },
-      }
-    },
-    align: {
-      left: {
-        justifyContent: "flex-start"
-      },
-      center: {
-        justifyContent: "center"
-      },
-      right: {
-        justifyContent: "flex-end"
-      }
-    }
-  },
-  defaultVariants: {
-    orientation: "responsive",
-    size: "md",
-    variant: "default",
-    align: "left"
-  }
-}), H = t({
-  position: "relative",
-  display: "inline-flex",
-  alignItems: "center"
-}), Ie = t({
-  appearance: "none",
-  background: "transparent",
-  border: `1px solid ${e.colors.border}`,
-  borderRadius: e.radii.md,
-  padding: `${e.space.sm} ${e.space.md}`,
-  paddingRight: e.space.xl,
-  fontSize: e.fontSizes.sm,
-  fontFamily: e.fonts.body,
-  color: e.colors.text,
-  cursor: "pointer",
-  transition: "all 0.3s ease-in-out",
-  minWidth: "120px"
-  // ':hover': {
-  //   borderColor: themeContract.colors.primary,
-  //   backgroundColor: themeContract.colors.surface,
-  // },
-  // ':focus': {
-  //   outline: '2px solid',
-  //   outlineColor: themeContract.colors.primary,
-  //   outlineOffset: '2px',
-  //   borderColor: themeContract.colors.primary,
-  // },
-  // ':disabled': {
-  //   opacity: '0.5',
-  //   cursor: 'not-allowed',
-  // },
-}), $e = t({
-  position: "absolute",
-  right: e.space.sm,
-  top: "50%",
-  transform: "translateY(-50%)",
-  pointerEvents: "none",
-  color: e.colors.textSecondary,
-  transition: "transform 0.2s ease-in-out"
-  // selectors: {
-  //   [`${languageSwitcherSelect}:focus + &`]: {
-  //     color: themeContract.colors.primary,
-  //     transform: 'translateY(-50%) rotate(180deg)',
-  //   },
-  // },
-}), Te = i({
-  base: H,
-  variants: {
-    variant: {
-      default: {},
-      minimal: {
-        // selectors: {
-        //   [`& .${languageSwitcherSelect}`]: {
-        //     border: 'none',
-        //     borderRadius: 0,
-        //     borderBottom: `1px solid ${themeContract.colors.border}`,
-        //     paddingLeft: 0,
-        //     paddingRight: themeContract.space.lg,
-        //     backgroundColor: 'transparent',
-        //   },
-        // },
-      },
-      outlined: {},
-      filled: {
-        // selectors: {
-        //   [`& .${languageSwitcherSelect}`]: {
-        //     backgroundColor: themeContract.colors.surface,
-        //     border: 'none',
-        //   },
-        // },
-      }
-    },
-    size: {
-      sm: {
-        // selectors: {
-        //   [`& .${languageSwitcherSelect}`]: {
-        //     padding: `${themeContract.space.xs} ${themeContract.space.sm}`,
-        //     paddingRight: themeContract.space.lg,
-        //     fontSize: themeContract.fontSizes.xs,
-        //     minWidth: '100px',
-        //   },
-        // },
-      },
-      md: {},
-      lg: {
-        // selectors: {
-        //   [`& .${languageSwitcherSelect}`]: {
-        //     padding: `${themeContract.space.md} ${themeContract.space.lg}`,
-        //     paddingRight: '48px',
-        //     fontSize: themeContract.fontSizes.md,
-        //     minWidth: '140px',
-        //   },
-        // },
-      }
-    }
-  },
-  defaultVariants: {
-    variant: "default",
-    size: "md"
-  }
-}), F = t({
-  position: "relative",
-  overflow: "hidden",
-  backgroundColor: e.colors.background
-}), De = t({
-  top: "50%",
-  left: "50%",
-  width: "auto",
-  minWidth: "100%",
-  minHeight: "100%",
-  position: "absolute",
-  transform: "translate(-50%, -50%)"
-}), je = t({
-  top: 0,
-  left: 0,
-  width: "100%",
-  height: "100%",
-  position: "absolute",
-  opacity: 1,
-  transition: "opacity 0.3s ease-in-out",
-  pointerEvents: "auto"
-  // selectors: {
-  //   '&[data-playing="true"]': {
-  //     opacity: 0,
-  //     pointerEvents: 'none',
-  //   },
-  // },
-}), He = t({
-  width: "100%",
-  height: "100%",
-  minWidth: "100%",
-  minHeight: "100%",
-  objectFit: "cover"
-}), Fe = t({
-  position: "absolute",
-  top: "50%",
-  left: "50%",
-  transform: "translate(-50%, -50%)",
-  border: "none",
-  borderRadius: e.radii.full,
-  backgroundColor: "rgba(0, 0, 0, 0.7)",
-  color: e.colors.background,
-  cursor: "pointer",
-  transition: "all 0.3s ease-in-out",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  opacity: 1,
-  pointerEvents: "auto",
-  ":hover": {
-    backgroundColor: "rgba(0, 0, 0, 0.9)",
-    transform: "translate(-50%, -50%) scale(1.1)"
-  },
-  ":focus": {
-    outline: "2px solid",
-    outlineColor: e.colors.primary,
-    outlineOffset: "2px"
-  }
-  // selectors: {
-  //   '&[data-playing="true"]': {
-  //     opacity: 0,
-  //     pointerEvents: 'none',
-  //   },
-  //   '&[data-hidden="true"]': {
-  //     display: 'none',
-  //   },
-  // },
-}), d = t({
-  position: "absolute",
-  border: "none",
-  borderRadius: e.radii.md,
-  backgroundColor: "rgba(0, 0, 0, 0.7)",
-  color: e.colors.background,
-  cursor: "pointer",
-  transition: "all 0.3s ease-in-out",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center"
-  // ':hover': {
-  //   backgroundColor: 'rgba(0, 0, 0, 0.9)',
-  // },
-  // ':focus': {
-  //   outline: '2px solid',
-  //   outlineColor: themeContract.colors.primary,
-  //   outlineOffset: '2px',
-  // },
-}), Le = t([
-  d,
-  {
-    top: e.space.md,
-    right: e.space.md,
-    width: "40px",
-    height: "40px",
-    "@media": {
-      "screen and (min-width: 768px)": {
-        width: "48px",
-        height: "48px",
-        top: e.space.lg,
-        right: e.space.lg
-      }
-    }
-  }
-]), Ve = t([
-  d,
-  {
-    bottom: e.space.md,
-    right: "80px",
-    width: "40px",
-    height: "40px",
-    "@media": {
-      "screen and (min-width: 768px)": {
-        width: "48px",
-        height: "48px",
-        bottom: e.space.lg,
-        right: "100px"
-      }
-    }
-  }
-]), Ae = t([
-  d,
-  {
-    bottom: e.space.md,
-    right: e.space.md,
-    width: "40px",
-    height: "40px",
-    "@media": {
-      "screen and (min-width: 768px)": {
-        width: "48px",
-        height: "48px",
-        bottom: e.space.lg,
-        right: e.space.lg
-      }
-    }
-  }
-]), Me = i({
-  base: F,
-  variants: {
-    size: {
-      sm: {
-        width: "300px",
-        height: "200px"
-      },
-      md: {
-        width: "500px",
-        height: "300px"
-      },
-      lg: {
-        width: "800px",
-        height: "450px"
-      },
-      fullWidth: {
-        width: "100vw",
-        height: 0,
-        paddingBottom: "56.25%",
-        // 16:9 aspect ratio
-        position: "relative"
-      }
-    },
-    aspectRatio: {
-      "16:9": {
-        aspectRatio: "16/9"
-      },
-      "4:3": {
-        aspectRatio: "4/3"
-      },
-      "1:1": {
-        aspectRatio: "1/1"
-      }
-    }
-  },
-  defaultVariants: {
-    size: "md",
-    aspectRatio: "16:9"
-  }
-}), L = t({
-  height: 0,
-  width: "100vw",
-  overflow: "hidden",
-  position: "relative",
-  paddingBottom: "56.25%",
-  // 16:9 aspect ratio
-  backgroundColor: e.colors.background,
-  // Break out of container padding
-  marginLeft: "calc(-50vw + 50%)",
-  marginRight: "calc(-50vw + 50%)",
-  "@media": {
-    "screen and (min-width: 768px)": {
-      marginLeft: "calc(-50vw + 50%)",
-      marginRight: "calc(-50vw + 50%)"
-    }
-  }
-}), Ee = i({
-  base: L,
-  variants: {
-    aspectRatio: {
-      "16:9": {
-        paddingBottom: "56.25%"
-      },
-      "4:3": {
-        paddingBottom: "75%"
-      },
-      "1:1": {
-        paddingBottom: "100%"
-      },
-      "21:9": {
-        paddingBottom: "42.86%"
-      }
-    }
-  },
-  defaultVariants: {
-    aspectRatio: "16:9"
-  }
-}), V = t({
-  width: "100%",
-  backgroundColor: "transparent"
-}), Oe = i({
-  base: V,
-  variants: {
-    spacing: {
-      none: {
-        gap: 0
-      },
-      sm: {
-        display: "flex",
-        flexDirection: "column",
-        gap: e.space.sm
-      },
-      md: {
-        display: "flex",
-        flexDirection: "column",
-        gap: e.space.md
-      },
-      lg: {
-        display: "flex",
-        flexDirection: "column",
-        gap: e.space.lg
-      },
-      xl: {
-        display: "flex",
-        flexDirection: "column",
-        gap: e.space.xl
-      }
-    },
-    layout: {
-      stacked: {
-        display: "flex",
-        flexDirection: "column"
-      },
-      inline: {
-        display: "flex",
-        flexDirection: "row",
-        flexWrap: "wrap",
-        alignItems: "flex-end"
-      },
-      grid: {
-        display: "grid",
-        gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))",
-        gap: e.space.md
-      }
-    }
-  },
-  defaultVariants: {
-    spacing: "md",
-    layout: "stacked"
-  }
-}), A = t({
-  display: "flex",
-  width: "100%"
-}), Ye = i({
-  base: A,
-  variants: {
-    align: {
-      left: {
-        justifyContent: "flex-start",
-        textAlign: "left"
-      },
-      center: {
-        justifyContent: "center",
-        textAlign: "center"
-      },
-      right: {
-        justifyContent: "flex-end",
-        textAlign: "right"
-      }
-    },
-    variant: {
-      default: {
-        flexDirection: "column",
-        gap: e.space.sm
-      },
-      actions: {
-        flexDirection: "row",
-        alignItems: "center",
-        gap: e.space.md,
-        marginTop: e.space.lg
-      },
-      message: {
-        flexDirection: "column",
-        padding: e.space.md,
-        backgroundColor: e.colors.surface,
-        borderRadius: e.radii.md,
-        border: `1px solid ${e.colors.border}`
-      }
-    },
-    spacing: {
-      none: {
-        gap: 0
-      },
-      sm: {
-        gap: e.space.sm
-      },
-      md: {
-        gap: e.space.md
-      },
-      lg: {
-        gap: e.space.lg
-      }
-    }
-  },
-  defaultVariants: {
-    align: "left",
-    variant: "default",
-    spacing: "sm"
-  }
-}), M = t({
-  display: "flex",
-  flexDirection: "column",
-  width: "100%",
-  gap: e.space.xs
-}), Ne = t({
-  fontFamily: e.fonts.body,
-  fontSize: e.fontSizes.sm,
-  fontWeight: e.fontWeights.medium,
-  color: e.colors.text,
-  lineHeight: e.lineHeights.tight
-  // selectors: {
-  //   '&[data-required="true"]': {
-  //     selectors: {
-  //       '&::after': {
-  //         content: ' *',
-  //         color: themeContract.colors.error,
-  //       },
-  //     },
-  //   },
-  // },
-}), E = t({
-  appearance: "none",
-  backgroundColor: e.colors.background,
-  border: `1px solid ${e.colors.border}`,
-  borderRadius: e.radii.md,
-  color: e.colors.text,
-  fontFamily: e.fonts.body,
-  fontSize: e.fontSizes.sm,
-  lineHeight: e.lineHeights.normal,
-  padding: `${e.space.sm} ${e.space.md}`,
-  transition: "all 0.2s ease-in-out",
-  width: "100%",
-  "::placeholder": {
-    color: e.colors.textSecondary
-  },
-  ":hover": {
-    borderColor: e.colors.primary
-  },
-  ":focus": {
-    outline: "2px solid",
-    outlineColor: e.colors.primary,
-    outlineOffset: "2px",
-    borderColor: e.colors.primary
-  },
-  ":disabled": {
-    backgroundColor: e.colors.surface,
-    color: e.colors.textSecondary,
-    cursor: "not-allowed",
-    opacity: "0.6"
-  }
-  // selectors: {
-  //   '&[data-error="true"]': {
-  //     borderColor: themeContract.colors.error,
-  //   },
-  //   '&[data-error="true"]:focus': {
-  //     outlineColor: themeContract.colors.error,
-  //     borderColor: themeContract.colors.error,
-  //   },
-  // },
-}), Pe = t([
-  E,
-  {
-    resize: "vertical",
-    minHeight: "80px"
-  }
-]), Ue = t({
-  display: "flex",
-  flexDirection: "column",
-  gap: e.space.xs
-}), Xe = t({
-  color: e.colors.error,
-  fontSize: e.fontSizes.xs,
-  lineHeight: e.lineHeights.tight,
-  fontFamily: e.fonts.body
-}), qe = i({
-  base: M,
-  variants: {
-    size: {
-      sm: {
-        gap: e.space.xs
-        // selectors: {
-        //   [`& .${labelBase}`]: {
-        //     fontSize: themeContract.fontSizes.xs,
-        //   },
-        //   [`& .${inputBase}`]: {
-        //     fontSize: themeContract.fontSizes.xs,
-        //     padding: `${themeContract.space.xs} ${themeContract.space.sm}`,
-        //   },
-        // },
-      },
-      md: {},
-      lg: {
-        gap: e.space.sm
-        // selectors: {
-        //   [`& .${labelBase}`]: {
-        //     fontSize: themeContract.fontSizes.md,
-        //   },
-        //   [`& .${inputBase}`]: {
-        //     fontSize: themeContract.fontSizes.md,
-        //     padding: `${themeContract.space.md} ${themeContract.space.lg}`,
-        //   },
-        // },
-      }
-    }
-  },
-  defaultVariants: {
-    size: "md"
-  }
-}), O = t({
-  fontFamily: e.fonts.body,
-  fontSize: e.fontSizes.sm,
-  fontWeight: e.fontWeights.medium,
-  color: e.colors.text,
-  lineHeight: e.lineHeights.tight,
-  width: "100%",
-  textAlign: "left",
-  paddingBottom: e.space.xs
-  // selectors: {
-  //   '&[data-required="true"]': {
-  //     selectors: {
-  //       '&::after': {
-  //         content: ' *',
-  //         color: themeContract.colors.error,
-  //       },
-  //     },
-  //   },
-  // },
-}), Ge = i({
-  base: O,
-  variants: {
-    size: {
-      sm: {
-        fontSize: e.fontSizes.xs,
-        paddingBottom: e.space.xs
-      },
-      md: {},
-      lg: {
-        fontSize: e.fontSizes.md,
-        paddingBottom: e.space.sm
-      }
-    },
-    variant: {
-      default: {},
-      inline: {
-        display: "inline-block",
-        marginRight: e.space.sm,
-        paddingBottom: 0
-      }
-    }
-  },
-  defaultVariants: {
-    size: "md",
-    variant: "default"
-  }
-}), Y = t({
-  appearance: "none",
-  backgroundColor: e.colors.background,
-  border: `1px solid ${e.colors.border}`,
-  borderRadius: e.radii.md,
-  color: e.colors.text,
-  fontFamily: e.fonts.body,
-  fontSize: e.fontSizes.sm,
-  lineHeight: e.lineHeights.normal,
-  padding: `${e.space.sm} ${e.space.md}`,
-  transition: "all 0.2s ease-in-out",
-  width: "100%"
-  // '::placeholder': {
-  //   color: themeContract.colors.textSecondary,
-  // },
-  // ':hover': {
-  //   borderColor: themeContract.colors.primary,
-  // },
-  // ':focus': {
-  //   outline: '2px solid',
-  //   outlineColor: themeContract.colors.primary,
-  //   outlineOffset: '2px',
-  //   borderColor: themeContract.colors.primary,
-  // },
-  // ':disabled': {
-  //   backgroundColor: themeContract.colors.surface,
-  //   color: themeContract.colors.textSecondary,
-  //   cursor: 'not-allowed',
-  //   opacity: '0.6',
-  // },
-  // selectors: {
-  //   '&[data-error="true"]': {
-  //     borderColor: themeContract.colors.error,
-  //   },
-  //   '&[data-error="true"]:focus': {
-  //     outlineColor: themeContract.colors.error,
-  //     borderColor: themeContract.colors.error,
-  //   },
-  //   // WebKit autofill styles
-  //   '&:-webkit-autofill': {
-  //     WebkitTextFillColor: themeContract.colors.text,
-  //     WebkitBoxShadow: `0 0 0px 1000px ${themeContract.colors.background} inset`,
-  //   },
-  // },
-}), Je = i({
-  base: Y,
-  variants: {
-    size: {
-      sm: {
-        fontSize: e.fontSizes.xs,
-        padding: `${e.space.xs} ${e.space.sm}`
-      },
-      md: {},
-      lg: {
-        fontSize: e.fontSizes.md,
-        padding: `${e.space.md} ${e.space.lg}`
-      }
-    },
-    variant: {
-      default: {},
-      filled: {
-        backgroundColor: e.colors.surface,
-        border: "none"
-        // ':focus': {
-        //   backgroundColor: themeContract.colors.background,
-        //   border: `1px solid ${themeContract.colors.primary}`,
-        // },
-      },
-      outlined: {
-        backgroundColor: "transparent"
-      },
-      underlined: {
-        backgroundColor: "transparent",
-        border: "none",
-        borderBottom: `1px solid ${e.colors.border}`,
-        borderRadius: 0,
-        padding: `${e.space.sm} 0`
-        // ':focus': {
-        //   borderBottom: `2px solid ${themeContract.colors.primary}`,
-        //   outline: 'none',
-        // },
-      }
-    }
-  },
-  defaultVariants: {
-    size: "md",
-    variant: "default"
-  }
-}), N = t({
-  appearance: "none",
-  backgroundColor: e.colors.background,
-  border: `1px solid ${e.colors.border}`,
-  borderRadius: e.radii.md,
-  color: e.colors.text,
-  fontFamily: e.fonts.body,
-  fontSize: e.fontSizes.sm,
-  lineHeight: e.lineHeights.normal,
-  padding: `${e.space.sm} ${e.space.md}`,
-  transition: "all 0.2s ease-in-out",
-  width: "100%",
-  resize: "vertical",
-  minHeight: "80px",
-  "::placeholder": {
-    color: e.colors.textSecondary
-  },
-  ":hover": {
-    borderColor: e.colors.primary
-  },
-  ":focus": {
-    outline: "2px solid",
-    outlineColor: e.colors.primary,
-    outlineOffset: "2px",
-    borderColor: e.colors.primary
-  },
-  ":disabled": {
-    backgroundColor: e.colors.surface,
-    color: e.colors.textSecondary,
-    cursor: "not-allowed",
-    opacity: "0.6",
-    resize: "none"
-  },
-  selectors: {
-    '&[data-error="true"]': {
-      borderColor: e.colors.error
-    },
-    '&[data-error="true"]:focus': {
-      outlineColor: e.colors.error,
-      borderColor: e.colors.error
-    }
-  }
-}), Ke = i({
-  base: N,
-  variants: {
-    size: {
-      sm: {
-        fontSize: e.fontSizes.xs,
-        padding: `${e.space.xs} ${e.space.sm}`,
-        minHeight: "60px"
-      },
-      md: {},
-      lg: {
-        fontSize: e.fontSizes.md,
-        padding: `${e.space.md} ${e.space.lg}`,
-        minHeight: "100px"
-      }
-    },
-    variant: {
-      default: {},
-      filled: {
-        backgroundColor: e.colors.surface,
-        border: "none",
-        ":focus": {
-          backgroundColor: e.colors.background,
-          border: `1px solid ${e.colors.primary}`
-        }
-      },
-      outlined: {
-        backgroundColor: "transparent"
-      },
-      underlined: {
-        backgroundColor: "transparent",
-        border: "none",
-        borderBottom: `1px solid ${e.colors.border}`,
-        borderRadius: 0,
-        padding: `${e.space.sm} 0`,
-        ":focus": {
-          borderBottom: `2px solid ${e.colors.primary}`,
-          outline: "none"
-        }
-      }
-    },
-    resize: {
-      vertical: {
-        resize: "vertical"
-      },
-      horizontal: {
-        resize: "horizontal"
-      },
-      both: {
-        resize: "both"
-      },
-      none: {
-        resize: "none"
-      }
-    }
-  },
-  defaultVariants: {
-    size: "md",
-    variant: "default",
-    resize: "vertical"
-  }
-}), P = (a = {}) => ({
-  colors: {
-    ...n.colors,
-    ...a.colors
-  },
-  space: {
-    ...n.space,
-    ...a.space
-  },
-  radii: {
-    ...n.radii,
-    ...a.radii
-  },
-  fonts: {
-    ...n.fonts,
-    ...a.fonts
-  },
-  maxWidth: a.maxWidth || `${n.maxWidth}px`,
-  fontSizes: {
-    ...n.fontSizes,
-    ...a.fontSizes
-  },
-  fontWeights: {
-    ...n.fontWeights,
-    ...a.fontWeights
-  },
-  lineHeights: {
-    ...n.lineHeights,
-    ...a.lineHeights
-  },
-  shadows: {
-    ...n.shadows,
-    ...a.shadows
-  },
-  section: {
-    ...n.section,
-    ...a.section
-  },
-  header: {
-    ...n.header,
-    ...a.header
-  },
-  footer: {
-    ...n.footer,
-    ...a.footer
-  }
-}), U = (a = {}) => ({
-  colors: {
-    ...s.colors,
-    ...a.colors
-  },
-  space: {
-    ...s.space,
-    ...a.space
-  },
-  radii: {
-    ...s.radii,
-    ...a.radii
-  },
-  fonts: {
-    ...s.fonts,
-    ...a.fonts
-  },
-  maxWidth: a.maxWidth || `${s.maxWidth}px`,
-  fontSizes: {
-    ...s.fontSizes,
-    ...a.fontSizes
-  },
-  fontWeights: {
-    ...s.fontWeights,
-    ...a.fontWeights
-  },
-  lineHeights: {
-    ...s.lineHeights,
-    ...a.lineHeights
-  },
-  shadows: {
-    ...s.shadows,
-    ...a.shadows
-  },
-  section: {
-    ...s.section,
-    ...a.section
-  },
-  header: {
-    ...s.header,
-    ...a.header
-  },
-  footer: {
-    ...s.footer,
-    ...a.footer
-  }
-}), Qe = (a = {}) => P(a), Ze = (a = {}) => U(a);
-export {
-  je as $,
-  Re as A,
-  We as B,
-  Q as C,
-  Me as D,
-  Ee as E,
-  n as F,
-  s as G,
-  ee as H,
-  ie as I,
-  le as J,
-  r as K,
-  pe as L,
-  ge as M,
-  me as N,
-  fe as O,
-  xe as P,
-  ue as Q,
-  he as R,
-  ye as S,
-  we as T,
-  ve as U,
-  Ce as V,
-  Se as W,
-  Be as X,
-  Ie as Y,
-  $e as Z,
-  De as _,
-  Ze as a,
-  He as a0,
-  Fe as a1,
-  Le as a2,
-  Ve as a3,
-  Ae as a4,
-  Ne as a5,
-  Pe as a6,
-  E as a7,
-  Ue as a8,
-  Xe as a9,
-  o as aa,
-  ce as b,
-  Qe as c,
-  K as d,
-  be as e,
-  de as f,
-  ze as g,
-  te as h,
-  Oe as i,
-  Ye as j,
-  Je as k,
-  Ge as l,
-  qe as m,
-  Ke as n,
-  _ as o,
-  ae as p,
-  ke as q,
-  m as r,
-  J as s,
-  e as t,
-  Te as u,
-  re as v,
-  Z as w,
-  ne as x,
-  se as y,
-  oe as z
-};