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

package/dist/theme.css-Dj6kL9o0.js

@@ -0,0 +1,3020 @@
+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
+};