@citygross/components_v2 0.0.16 → 0.0.17

package/dist/components/RippleContainer/RippleContainer.css.vanilla.js

@@ -0,0 +1,6 @@
+import './RippleContainer.css.ts.vanilla.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var rippleContainer = createRuntimeFn({ defaultClassName: "RippleContainer_rippleContainer__r9yswj1c", variantClassNames: { afterBackground: { primary: "RippleContainer_afterBackground_primary__r9yswj1", secondary: "RippleContainer_afterBackground_secondary__r9yswj2", brandYellow: "RippleContainer_afterBackground_brandYellow__r9yswj3", brandBlue: "RippleContainer_afterBackground_brandBlue__r9yswj4", brandPurple: "RippleContainer_afterBackground_brandPurple__r9yswj5", brandPrio: "RippleContainer_afterBackground_brandPrio__r9yswj6", yellowLighter: "RippleContainer_afterBackground_yellowLighter__r9yswj7", yellowLight: "RippleContainer_afterBackground_yellowLight__r9yswj8", blueLight: "RippleContainer_afterBackground_blueLight__r9yswj9", blueLighter: "RippleContainer_afterBackground_blueLighter__r9yswja", blueMedium: "RippleContainer_afterBackground_blueMedium__r9yswjb", greenLight: "RippleContainer_afterBackground_greenLight__r9yswjc", greenMedium: "RippleContainer_afterBackground_greenMedium__r9yswjd", redLight: "RippleContainer_afterBackground_redLight__r9yswje", recipeVego: "RippleContainer_afterBackground_recipeVego__r9yswjf", recipeLactose: "RippleContainer_afterBackground_recipeLactose__r9yswjg", recipeGluten: "RippleContainer_afterBackground_recipeGluten__r9yswjh", link: "RippleContainer_afterBackground_link__r9yswji", white: "RippleContainer_afterBackground_white__r9yswjj", black: "RippleContainer_afterBackground_black__r9yswjk", lightest: "RippleContainer_afterBackground_lightest__r9yswjl", lighter: "RippleContainer_afterBackground_lighter__r9yswjm", light: "RippleContainer_afterBackground_light__r9yswjn", medium: "RippleContainer_afterBackground_medium__r9yswjo", mediumDark: "RippleContainer_afterBackground_mediumDark__r9yswjp", dark: "RippleContainer_afterBackground_dark__r9yswjq", darker: "RippleContainer_afterBackground_darker__r9yswjr", darkest: "RippleContainer_afterBackground_darkest__r9yswjs", buttonGray: "RippleContainer_afterBackground_buttonGray__r9yswjt", disabledGray: "RippleContainer_afterBackground_disabledGray__r9yswju", disabledDarkGray: "RippleContainer_afterBackground_disabledDarkGray__r9yswjv", placeholder: "RippleContainer_afterBackground_placeholder__r9yswjw", border: "RippleContainer_afterBackground_border__r9yswjx", boxShadow: "RippleContainer_afterBackground_boxShadow__r9yswjy", boxShadowActive: "RippleContainer_afterBackground_boxShadowActive__r9yswjz", alertRed: "RippleContainer_afterBackground_alertRed__r9yswj10", alertBlue: "RippleContainer_afterBackground_alertBlue__r9yswj11", alertGreen: "RippleContainer_afterBackground_alertGreen__r9yswj12", darkOverlay: "RippleContainer_afterBackground_darkOverlay__r9yswj13", transparent: "RippleContainer_afterBackground_transparent__r9yswj14", brandBlueHover: "RippleContainer_afterBackground_brandBlueHover__r9yswj15", brandYellowHover: "RippleContainer_afterBackground_brandYellowHover__r9yswj16", brandPrioHover: "RippleContainer_afterBackground_brandPrioHover__r9yswj17", brandBlueActive: "RippleContainer_afterBackground_brandBlueActive__r9yswj18", brandYellowActive: "RippleContainer_afterBackground_brandYellowActive__r9yswj19", brandPrioActive: "RippleContainer_afterBackground_brandPrioActive__r9yswj1a", none: "RippleContainer_afterBackground_none__r9yswj1b" } }, defaultVariants: {}, compoundVariants: [] });
+
+export { rippleContainer };

package/dist/components/RippleContainer/RippleContainer.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { TPaletteKeys } from '@citygross/design-tokens_v2';
+
+declare type TRippleContainer = {
+    color?: TPaletteKeys;
+    children: React.ReactNode;
+};
+declare function RippleContainer({ color, children }: TRippleContainer): JSX.Element;
+
+export { RippleContainer, TRippleContainer };

package/dist/components/RippleContainer/RippleContainer.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { rippleContainer } from './RippleContainer.css.vanilla.js';
+
+function RippleContainer({ color, children }) {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: rippleContainer({
+        afterBackground: color
+      })
+    },
+    children
+  );
+}
+
+export { RippleContainer };

package/dist/components/SideModal/SideModal.css.ts.vanilla.css

@@ -0,0 +1,104 @@
+@keyframes SideModal_slideLeft__1scj0sn0 {
+  from {
+    left: -100%;
+    opacity: 0;
+  }
+  to {
+    left: 0;
+    opacity: 1;
+  }
+}
+@keyframes SideModal_slideRight__1scj0sn1 {
+  from {
+    right: -100%;
+    opacity: 0;
+  }
+  to {
+    right: 0;
+    opacity: 1;
+  }
+}
+@keyframes SideModal_slideOutLeft__1scj0sn2 {
+  from {
+    left: 0;
+    opacity: 1;
+  }
+  to {
+    left: -100%;
+    opacity: 0;
+  }
+}
+@keyframes SideModal_slideOutRight__1scj0sn3 {
+  from {
+    right: 0;
+    opacity: 1;
+  }
+  to {
+    right: -100%;
+    opacity: 0;
+  }
+}
+.SideModal_slideVariants_left__1scj0sn4 {
+  left: -100%;
+}
+.SideModal_slideVariants_right__1scj0sn5 {
+  right: 100%;
+}
+.SideModal_sideModal__1scj0sn6 {
+  height: 100vh;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  overscroll-behavior: none;
+  z-index: 5;
+  overflow: auto;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.SideModal_sideModal__1scj0sn6::-webkit-scrollbar {
+  display: none;
+}
+.SideModal_sideModal_slideIn_leftIn__1scj0sn1k {
+  animation: SideModal_slideLeft__1scj0sn0 300ms ease-out forwards;
+}
+.SideModal_sideModal_slideIn_rightIn__1scj0sn1l {
+  animation: SideModal_slideRight__1scj0sn1 300ms ease-out forwards;
+}
+.SideModal_sideModal_slideIn_leftOut__1scj0sn1m {
+  animation: SideModal_slideOutLeft__1scj0sn2 300ms ease-out forwards;
+}
+.SideModal_sideModal_slideIn_rightOut__1scj0sn1n {
+  animation: SideModal_slideOutRight__1scj0sn3 300ms ease-out forwards;
+}
+.SideModal_sideModalOverLayer__1scj0sn1o {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overscroll-behavior: none;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 100%;
+  opacity: 0;
+  transition: opacity 300ms ease-out;
+}
+.SideModal_sideModalOverLayer_open_true__1scj0sn30 {
+  opacity: 1;
+  z-index: 5;
+}
+.SideModal_sideModalOverLayer_open_false__1scj0sn31 {
+  opacity: 0;
+  z-index: -1;
+}
+@media screen and (min-width: 576px) {
+  .SideModal_sideModal__1scj0sn6 {
+    max-height: unset;
+  }
+}
+@supports (height: 100dvh) {
+  .SideModal_sideModal__1scj0sn6 {
+    height: 100dvh;
+  }
+}

package/dist/components/SideModal/SideModal.css.vanilla.js

@@ -0,0 +1,8 @@
+import './../../cssUtils/color.css.ts.vanilla.css';
+import './SideModal.css.ts.vanilla.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var sideModal = createRuntimeFn({ defaultClassName: "SideModal_sideModal__1scj0sn6", variantClassNames: { backgroundColor: { primary: "color_backgroundColor_primary__13rr0b21b", secondary: "color_backgroundColor_secondary__13rr0b21c", brandYellow: "color_backgroundColor_brandYellow__13rr0b21d", brandBlue: "color_backgroundColor_brandBlue__13rr0b21e", brandPurple: "color_backgroundColor_brandPurple__13rr0b21f", brandPrio: "color_backgroundColor_brandPrio__13rr0b21g", yellowLighter: "color_backgroundColor_yellowLighter__13rr0b21h", yellowLight: "color_backgroundColor_yellowLight__13rr0b21i", blueLight: "color_backgroundColor_blueLight__13rr0b21j", blueLighter: "color_backgroundColor_blueLighter__13rr0b21k", blueMedium: "color_backgroundColor_blueMedium__13rr0b21l", greenLight: "color_backgroundColor_greenLight__13rr0b21m", greenMedium: "color_backgroundColor_greenMedium__13rr0b21n", redLight: "color_backgroundColor_redLight__13rr0b21o", recipeVego: "color_backgroundColor_recipeVego__13rr0b21p", recipeLactose: "color_backgroundColor_recipeLactose__13rr0b21q", recipeGluten: "color_backgroundColor_recipeGluten__13rr0b21r", link: "color_backgroundColor_link__13rr0b21s", white: "color_backgroundColor_white__13rr0b21t", black: "color_backgroundColor_black__13rr0b21u", lightest: "color_backgroundColor_lightest__13rr0b21v", lighter: "color_backgroundColor_lighter__13rr0b21w", light: "color_backgroundColor_light__13rr0b21x", medium: "color_backgroundColor_medium__13rr0b21y", mediumDark: "color_backgroundColor_mediumDark__13rr0b21z", dark: "color_backgroundColor_dark__13rr0b220", darker: "color_backgroundColor_darker__13rr0b221", darkest: "color_backgroundColor_darkest__13rr0b222", buttonGray: "color_backgroundColor_buttonGray__13rr0b223", disabledGray: "color_backgroundColor_disabledGray__13rr0b224", disabledDarkGray: "color_backgroundColor_disabledDarkGray__13rr0b225", placeholder: "color_backgroundColor_placeholder__13rr0b226", border: "color_backgroundColor_border__13rr0b227", boxShadow: "color_backgroundColor_boxShadow__13rr0b228", boxShadowActive: "color_backgroundColor_boxShadowActive__13rr0b229", alertRed: "color_backgroundColor_alertRed__13rr0b22a", alertBlue: "color_backgroundColor_alertBlue__13rr0b22b", alertGreen: "color_backgroundColor_alertGreen__13rr0b22c", darkOverlay: "color_backgroundColor_darkOverlay__13rr0b22d", transparent: "color_backgroundColor_transparent__13rr0b22e", brandBlueHover: "color_backgroundColor_brandBlueHover__13rr0b22f", brandYellowHover: "color_backgroundColor_brandYellowHover__13rr0b22g", brandPrioHover: "color_backgroundColor_brandPrioHover__13rr0b22h", brandBlueActive: "color_backgroundColor_brandBlueActive__13rr0b22i", brandYellowActive: "color_backgroundColor_brandYellowActive__13rr0b22j", brandPrioActive: "color_backgroundColor_brandPrioActive__13rr0b22k", none: "color_backgroundColor_none__13rr0b22l" }, slideVariants: { left: "SideModal_slideVariants_left__1scj0sn4", right: "SideModal_slideVariants_right__1scj0sn5" }, slideIn: { leftIn: "SideModal_sideModal_slideIn_leftIn__1scj0sn1k", rightIn: "SideModal_sideModal_slideIn_rightIn__1scj0sn1l", leftOut: "SideModal_sideModal_slideIn_leftOut__1scj0sn1m", rightOut: "SideModal_sideModal_slideIn_rightOut__1scj0sn1n" } }, defaultVariants: {}, compoundVariants: [] });
+var sideModalOverLayer = createRuntimeFn({ defaultClassName: "SideModal_sideModalOverLayer__1scj0sn1o", variantClassNames: { backgroundColor: { primary: "color_backgroundColor_primary__13rr0b21b", secondary: "color_backgroundColor_secondary__13rr0b21c", brandYellow: "color_backgroundColor_brandYellow__13rr0b21d", brandBlue: "color_backgroundColor_brandBlue__13rr0b21e", brandPurple: "color_backgroundColor_brandPurple__13rr0b21f", brandPrio: "color_backgroundColor_brandPrio__13rr0b21g", yellowLighter: "color_backgroundColor_yellowLighter__13rr0b21h", yellowLight: "color_backgroundColor_yellowLight__13rr0b21i", blueLight: "color_backgroundColor_blueLight__13rr0b21j", blueLighter: "color_backgroundColor_blueLighter__13rr0b21k", blueMedium: "color_backgroundColor_blueMedium__13rr0b21l", greenLight: "color_backgroundColor_greenLight__13rr0b21m", greenMedium: "color_backgroundColor_greenMedium__13rr0b21n", redLight: "color_backgroundColor_redLight__13rr0b21o", recipeVego: "color_backgroundColor_recipeVego__13rr0b21p", recipeLactose: "color_backgroundColor_recipeLactose__13rr0b21q", recipeGluten: "color_backgroundColor_recipeGluten__13rr0b21r", link: "color_backgroundColor_link__13rr0b21s", white: "color_backgroundColor_white__13rr0b21t", black: "color_backgroundColor_black__13rr0b21u", lightest: "color_backgroundColor_lightest__13rr0b21v", lighter: "color_backgroundColor_lighter__13rr0b21w", light: "color_backgroundColor_light__13rr0b21x", medium: "color_backgroundColor_medium__13rr0b21y", mediumDark: "color_backgroundColor_mediumDark__13rr0b21z", dark: "color_backgroundColor_dark__13rr0b220", darker: "color_backgroundColor_darker__13rr0b221", darkest: "color_backgroundColor_darkest__13rr0b222", buttonGray: "color_backgroundColor_buttonGray__13rr0b223", disabledGray: "color_backgroundColor_disabledGray__13rr0b224", disabledDarkGray: "color_backgroundColor_disabledDarkGray__13rr0b225", placeholder: "color_backgroundColor_placeholder__13rr0b226", border: "color_backgroundColor_border__13rr0b227", boxShadow: "color_backgroundColor_boxShadow__13rr0b228", boxShadowActive: "color_backgroundColor_boxShadowActive__13rr0b229", alertRed: "color_backgroundColor_alertRed__13rr0b22a", alertBlue: "color_backgroundColor_alertBlue__13rr0b22b", alertGreen: "color_backgroundColor_alertGreen__13rr0b22c", darkOverlay: "color_backgroundColor_darkOverlay__13rr0b22d", transparent: "color_backgroundColor_transparent__13rr0b22e", brandBlueHover: "color_backgroundColor_brandBlueHover__13rr0b22f", brandYellowHover: "color_backgroundColor_brandYellowHover__13rr0b22g", brandPrioHover: "color_backgroundColor_brandPrioHover__13rr0b22h", brandBlueActive: "color_backgroundColor_brandBlueActive__13rr0b22i", brandYellowActive: "color_backgroundColor_brandYellowActive__13rr0b22j", brandPrioActive: "color_backgroundColor_brandPrioActive__13rr0b22k", none: "color_backgroundColor_none__13rr0b22l" }, open: { true: "SideModal_sideModalOverLayer_open_true__1scj0sn30", false: "SideModal_sideModalOverLayer_open_false__1scj0sn31" } }, defaultVariants: {}, compoundVariants: [] });
+
+export { sideModal, sideModalOverLayer };

package/dist/components/SideModal/SideModal.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { TPaletteKeys } from '@citygross/design-tokens_v2';
+
+declare type TSideModal = {
+    onBackdropClick: () => void;
+    children?: React.ReactNode;
+    width?: string;
+    background?: TPaletteKeys;
+    isVisible?: boolean;
+    querySelector?: string;
+    slideFrom?: 'left' | 'right';
+    overlayBackground?: TPaletteKeys;
+    maxWidth?: string;
+    maxHeight?: string;
+    fullViewportHeight?: boolean;
+};
+declare const SideModal: ({ onBackdropClick, background, overlayBackground, width, isVisible, slideFrom, querySelector, maxWidth, children }: TSideModal) => React.ReactPortal;
+
+export { SideModal, TSideModal };

package/dist/components/SideModal/SideModal.js

@@ -0,0 +1,50 @@
+import React, { useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { sideModalOverLayer, sideModal } from './SideModal.css.vanilla.js';
+
+const SideModal = ({
+  onBackdropClick,
+  background = "white",
+  overlayBackground = "darkOverlay",
+  width = "375px",
+  isVisible,
+  slideFrom,
+  querySelector = "#root",
+  maxWidth,
+  children
+}) => {
+  const ref = useRef(null);
+  const domSafe = typeof document !== "undefined";
+  return domSafe ? createPortal(
+    /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: sideModalOverLayer({
+          backgroundColor: overlayBackground,
+          open: isVisible
+        }),
+        ref,
+        onMouseDown: (e) => {
+          if (ref && e.target === ref?.current) {
+            onBackdropClick();
+          }
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: sideModal({
+            backgroundColor: background,
+            slideVariants: slideFrom,
+            slideIn: slideFrom === "left" ? isVisible ? "leftIn" : "leftOut" : isVisible ? "rightIn" : "rightOut"
+          }),
+          style: { maxWidth, width }
+        },
+        children
+      )
+    )),
+    document.querySelector(querySelector) || document.body
+  ) : null;
+};
+
+export { SideModal };

package/dist/components/Skeleton/Skeleton.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { THardSpacingKeys, TBorderRadiusKeys } from '@citygross/design-tokens_v2';
 
 declare type TSkeleton = {
@@ -6,5 +7,6 @@ declare type TSkeleton = {
     borderRadius?: TBorderRadiusKeys;
     className?: string;
 };
+declare const Skeleton: React.FC<TSkeleton>;
 
-export { TSkeleton };
+export { Skeleton, TSkeleton };

package/dist/components/Skeleton/Skeleton.js

@@ -19,4 +19,4 @@ const Skeleton = ({
   );
 };
 
-export { Skeleton as default };
+export { Skeleton };

package/dist/cssUtils/border.css.d.ts

@@ -1,4 +1,4 @@
-declare const borderColor: Record<"primary" | "none" | "boxShadow" | "border" | "link" | "black" | "transparent" | "white" | "medium" | "dark" | "light" | "lighter" | "secondary" | "brandYellow" | "brandBlue" | "brandPurple" | "brandPrio" | "yellowLighter" | "yellowLight" | "blueLight" | "blueLighter" | "blueMedium" | "greenLight" | "greenMedium" | "redLight" | "recipeVego" | "recipeLactose" | "recipeGluten" | "lightest" | "mediumDark" | "darker" | "darkest" | "buttonGray" | "disabledGray" | "disabledDarkGray" | "placeholder" | "boxShadowActive" | "alertRed" | "alertBlue" | "alertGreen" | "darkOverlay" | "brandBlueHover" | "brandYellowHover" | "brandPrioHover" | "brandBlueActive" | "brandYellowActive" | "brandPrioActive", string>;
-declare const borderRadius: Record<"extraSmall" | "small" | "default" | "none" | "big" | "round" | "large" | "bigger", string>;
+declare const borderColor: Record<"none" | "boxShadow" | "border" | "link" | "black" | "transparent" | "white" | "medium" | "dark" | "light" | "lighter" | "primary" | "secondary" | "brandYellow" | "brandBlue" | "brandPurple" | "brandPrio" | "yellowLighter" | "yellowLight" | "blueLight" | "blueLighter" | "blueMedium" | "greenLight" | "greenMedium" | "redLight" | "recipeVego" | "recipeLactose" | "recipeGluten" | "lightest" | "mediumDark" | "darker" | "darkest" | "buttonGray" | "disabledGray" | "disabledDarkGray" | "placeholder" | "boxShadowActive" | "alertRed" | "alertBlue" | "alertGreen" | "darkOverlay" | "brandBlueHover" | "brandYellowHover" | "brandPrioHover" | "brandBlueActive" | "brandYellowActive" | "brandPrioActive", string>;
+declare const borderRadius: Record<"none" | "big" | "small" | "round" | "default" | "large" | "extraSmall" | "bigger", string>;
 
 export { borderColor, borderRadius };

package/dist/cssUtils/color.css.d.ts

@@ -1,6 +1,6 @@
-declare const color: Record<"primary" | "none" | "boxShadow" | "border" | "link" | "black" | "transparent" | "white" | "medium" | "dark" | "light" | "lighter" | "secondary" | "brandYellow" | "brandBlue" | "brandPurple" | "brandPrio" | "yellowLighter" | "yellowLight" | "blueLight" | "blueLighter" | "blueMedium" | "greenLight" | "greenMedium" | "redLight" | "recipeVego" | "recipeLactose" | "recipeGluten" | "lightest" | "mediumDark" | "darker" | "darkest" | "buttonGray" | "disabledGray" | "disabledDarkGray" | "placeholder" | "boxShadowActive" | "alertRed" | "alertBlue" | "alertGreen" | "darkOverlay" | "brandBlueHover" | "brandYellowHover" | "brandPrioHover" | "brandBlueActive" | "brandYellowActive" | "brandPrioActive", string>;
-declare const backgroundColor: Record<"primary" | "none" | "boxShadow" | "border" | "link" | "black" | "transparent" | "white" | "medium" | "dark" | "light" | "lighter" | "secondary" | "brandYellow" | "brandBlue" | "brandPurple" | "brandPrio" | "yellowLighter" | "yellowLight" | "blueLight" | "blueLighter" | "blueMedium" | "greenLight" | "greenMedium" | "redLight" | "recipeVego" | "recipeLactose" | "recipeGluten" | "lightest" | "mediumDark" | "darker" | "darkest" | "buttonGray" | "disabledGray" | "disabledDarkGray" | "placeholder" | "boxShadowActive" | "alertRed" | "alertBlue" | "alertGreen" | "darkOverlay" | "brandBlueHover" | "brandYellowHover" | "brandPrioHover" | "brandBlueActive" | "brandYellowActive" | "brandPrioActive", string>;
-declare const hoverColor: Record<"primary" | "none" | "boxShadow" | "border" | "link" | "black" | "transparent" | "white" | "medium" | "dark" | "light" | "lighter" | "secondary" | "brandYellow" | "brandBlue" | "brandPurple" | "brandPrio" | "yellowLighter" | "yellowLight" | "blueLight" | "blueLighter" | "blueMedium" | "greenLight" | "greenMedium" | "redLight" | "recipeVego" | "recipeLactose" | "recipeGluten" | "lightest" | "mediumDark" | "darker" | "darkest" | "buttonGray" | "disabledGray" | "disabledDarkGray" | "placeholder" | "boxShadowActive" | "alertRed" | "alertBlue" | "alertGreen" | "darkOverlay" | "brandBlueHover" | "brandYellowHover" | "brandPrioHover" | "brandBlueActive" | "brandYellowActive" | "brandPrioActive", string>;
-declare const hoverBackgroundColor: Record<"primary" | "none" | "boxShadow" | "border" | "link" | "black" | "transparent" | "white" | "medium" | "dark" | "light" | "lighter" | "secondary" | "brandYellow" | "brandBlue" | "brandPurple" | "brandPrio" | "yellowLighter" | "yellowLight" | "blueLight" | "blueLighter" | "blueMedium" | "greenLight" | "greenMedium" | "redLight" | "recipeVego" | "recipeLactose" | "recipeGluten" | "lightest" | "mediumDark" | "darker" | "darkest" | "buttonGray" | "disabledGray" | "disabledDarkGray" | "placeholder" | "boxShadowActive" | "alertRed" | "alertBlue" | "alertGreen" | "darkOverlay" | "brandBlueHover" | "brandYellowHover" | "brandPrioHover" | "brandBlueActive" | "brandYellowActive" | "brandPrioActive", string>;
+declare const color: Record<"none" | "boxShadow" | "border" | "link" | "black" | "transparent" | "white" | "medium" | "dark" | "light" | "lighter" | "primary" | "secondary" | "brandYellow" | "brandBlue" | "brandPurple" | "brandPrio" | "yellowLighter" | "yellowLight" | "blueLight" | "blueLighter" | "blueMedium" | "greenLight" | "greenMedium" | "redLight" | "recipeVego" | "recipeLactose" | "recipeGluten" | "lightest" | "mediumDark" | "darker" | "darkest" | "buttonGray" | "disabledGray" | "disabledDarkGray" | "placeholder" | "boxShadowActive" | "alertRed" | "alertBlue" | "alertGreen" | "darkOverlay" | "brandBlueHover" | "brandYellowHover" | "brandPrioHover" | "brandBlueActive" | "brandYellowActive" | "brandPrioActive", string>;
+declare const backgroundColor: Record<"none" | "boxShadow" | "border" | "link" | "black" | "transparent" | "white" | "medium" | "dark" | "light" | "lighter" | "primary" | "secondary" | "brandYellow" | "brandBlue" | "brandPurple" | "brandPrio" | "yellowLighter" | "yellowLight" | "blueLight" | "blueLighter" | "blueMedium" | "greenLight" | "greenMedium" | "redLight" | "recipeVego" | "recipeLactose" | "recipeGluten" | "lightest" | "mediumDark" | "darker" | "darkest" | "buttonGray" | "disabledGray" | "disabledDarkGray" | "placeholder" | "boxShadowActive" | "alertRed" | "alertBlue" | "alertGreen" | "darkOverlay" | "brandBlueHover" | "brandYellowHover" | "brandPrioHover" | "brandBlueActive" | "brandYellowActive" | "brandPrioActive", string>;
+declare const hoverColor: Record<"none" | "boxShadow" | "border" | "link" | "black" | "transparent" | "white" | "medium" | "dark" | "light" | "lighter" | "primary" | "secondary" | "brandYellow" | "brandBlue" | "brandPurple" | "brandPrio" | "yellowLighter" | "yellowLight" | "blueLight" | "blueLighter" | "blueMedium" | "greenLight" | "greenMedium" | "redLight" | "recipeVego" | "recipeLactose" | "recipeGluten" | "lightest" | "mediumDark" | "darker" | "darkest" | "buttonGray" | "disabledGray" | "disabledDarkGray" | "placeholder" | "boxShadowActive" | "alertRed" | "alertBlue" | "alertGreen" | "darkOverlay" | "brandBlueHover" | "brandYellowHover" | "brandPrioHover" | "brandBlueActive" | "brandYellowActive" | "brandPrioActive", string>;
+declare const hoverBackgroundColor: Record<"none" | "boxShadow" | "border" | "link" | "black" | "transparent" | "white" | "medium" | "dark" | "light" | "lighter" | "primary" | "secondary" | "brandYellow" | "brandBlue" | "brandPurple" | "brandPrio" | "yellowLighter" | "yellowLight" | "blueLight" | "blueLighter" | "blueMedium" | "greenLight" | "greenMedium" | "redLight" | "recipeVego" | "recipeLactose" | "recipeGluten" | "lightest" | "mediumDark" | "darker" | "darkest" | "buttonGray" | "disabledGray" | "disabledDarkGray" | "placeholder" | "boxShadowActive" | "alertRed" | "alertBlue" | "alertGreen" | "darkOverlay" | "brandBlueHover" | "brandYellowHover" | "brandPrioHover" | "brandBlueActive" | "brandYellowActive" | "brandPrioActive", string>;
 
 export { backgroundColor, color, hoverBackgroundColor, hoverColor };

package/dist/cssUtils/spacings.css.d.ts

@@ -1,9 +1,9 @@
-declare const margin: Record<"false" | "xs" | "xxxs" | "xxs" | "xxs2" | "xs2" | "sm" | "sm2" | "md" | "lg" | "xl" | "xxl", string>;
-declare const marginHorizontal: Record<"false" | "xs" | "xxxs" | "xxs" | "xxs2" | "xs2" | "sm" | "sm2" | "md" | "lg" | "xl" | "xxl", string>;
-declare const marginVertical: Record<"false" | "xs" | "xxxs" | "xxs" | "xxs2" | "xs2" | "sm" | "sm2" | "md" | "lg" | "xl" | "xxl", string>;
-declare const marginBottomDynamic: Record<"false" | "xs" | "xxxs" | "xxs" | "xxs2" | "xs2" | "sm" | "sm2" | "md" | "lg" | "xl" | "xxl", string>;
-declare const padding: Record<"false" | "xs" | "xxxs" | "xxs" | "xxs2" | "xs2" | "sm" | "sm2" | "md" | "lg" | "xl" | "xxl", string>;
-declare const paddingHorizontal: Record<"false" | "xs" | "xxxs" | "xxs" | "xxs2" | "xs2" | "sm" | "sm2" | "md" | "lg" | "xl" | "xxl", string>;
-declare const paddingVertical: Record<"false" | "xs" | "xxxs" | "xxs" | "xxs2" | "xs2" | "sm" | "sm2" | "md" | "lg" | "xl" | "xxl", string>;
+declare const margin: Record<"xxxs" | "xxs" | "xxs2" | "xs" | "xs2" | "sm" | "sm2" | "md" | "lg" | "xl" | "xxl" | "false", string>;
+declare const marginHorizontal: Record<"xxxs" | "xxs" | "xxs2" | "xs" | "xs2" | "sm" | "sm2" | "md" | "lg" | "xl" | "xxl" | "false", string>;
+declare const marginVertical: Record<"xxxs" | "xxs" | "xxs2" | "xs" | "xs2" | "sm" | "sm2" | "md" | "lg" | "xl" | "xxl" | "false", string>;
+declare const marginBottomDynamic: Record<"xxxs" | "xxs" | "xxs2" | "xs" | "xs2" | "sm" | "sm2" | "md" | "lg" | "xl" | "xxl" | "false", string>;
+declare const padding: Record<"xxxs" | "xxs" | "xxs2" | "xs" | "xs2" | "sm" | "sm2" | "md" | "lg" | "xl" | "xxl" | "false", string>;
+declare const paddingHorizontal: Record<"xxxs" | "xxs" | "xxs2" | "xs" | "xs2" | "sm" | "sm2" | "md" | "lg" | "xl" | "xxl" | "false", string>;
+declare const paddingVertical: Record<"xxxs" | "xxs" | "xxs2" | "xs" | "xs2" | "sm" | "sm2" | "md" | "lg" | "xl" | "xxl" | "false", string>;
 
 export { margin, marginBottomDynamic, marginHorizontal, marginVertical, padding, paddingHorizontal, paddingVertical };

package/dist/index.d.ts

@@ -1,18 +1,29 @@
-export { Box, TBox } from './components/Box/Box.js';
 export { AlertBox, TAlertBox } from './components/AlertBox/AlertBox.js';
-export { Header, THeader } from './components/Header/Header.js';
+export { Box, TBox } from './components/Box/Box.js';
+export { BoxArrow, TBoxArrow } from './components/BoxArrow/BoxArrow.js';
+export { Button, TCgButton } from './components/Button/Button.js';
 export { CartItemSummary, TCartItemSummary, TSummaryItem } from './components/CartItemSummary/CartItemSummary.js';
+export { CartSummary, TCartSummary } from './components/CartSummary/CartSummary.js';
 export { Divider, TDivider } from './components/Divider/Divider.js';
 export { Dot, TDot } from './components/Dot/Dot.js';
 export { FormControl, TFormControl, TScreenWidth } from './components/FormControl/FormControl.js';
+export { Header, THeader } from './components/Header/Header.js';
 export { Input, TInput } from './components/Input/Input.js';
 export { EListItemAlignment, ListItem, TItem, TListItem } from './components/ListItem/ListItem.js';
-export { TSkeleton } from './components/Skeleton/Skeleton.js';
+export { BorderPosition, borderStyle, orderTable, orderTd, orderTh, orderThead, orderTr } from './components/OrderTable/OrderTable.css.js';
+export { MobileOrderLine } from './components/OrderTableMobile/OrderTableMobile.js';
+export { Pagination, TPagination } from './components/Pagination/Pagination.js';
+export { RippleContainer, TRippleContainer } from './components/RippleContainer/RippleContainer.js';
+export { SideModal, TSideModal } from './components/SideModal/SideModal.js';
+export { Skeleton, TSkeleton } from './components/Skeleton/Skeleton.js';
 export { Spacer, TSpacer } from './components/Spacer/Spacer.js';
 export { Spinner, TSpinner } from './components/Spinner/Spinner.js';
 export { TTimeline, TTimelineItem, Timeline } from './components/TimeLine/TimeLine.js';
 export { BodyText, TBodyText } from './typography/BodyText/BodyText.js';
+export { Paragraph, TParagraph } from './typography/Paragraph/Paragraph.js';
+export { H1, TH1 } from './typography/H1/H1.js';
+export { H2, TH2 } from './typography/H2/H2.js';
+export { H3, TH3 } from './typography/H3/H3.js';
 export { borderColor, borderRadius } from './cssUtils/border.css.js';
 export { backgroundColor, color, hoverBackgroundColor, hoverColor } from './cssUtils/color.css.js';
 export { margin, marginBottomDynamic, marginHorizontal, marginVertical, padding, paddingHorizontal, paddingVertical } from './cssUtils/spacings.css.js';
-export { CartSummary, TCartSummary } from './components/CartSummary/CartSummary.js';

package/dist/index.js

@@ -1,21 +1,29 @@
-export { Box } from './components/Box/Box.js';
 export { AlertBox } from './components/AlertBox/AlertBox.js';
-import '@citygross/icons_v2';
-import 'react';
-import './components/BoxArrow/BoxArrow.css.vanilla.js';
-export { Header } from './components/Header/Header.js';
+export { Box } from './components/Box/Box.js';
+export { BoxArrow } from './components/BoxArrow/BoxArrow.js';
+export { Button } from './components/Button/Button.js';
 export { CartItemSummary } from './components/CartItemSummary/CartItemSummary.js';
+export { CartSummary } from './components/CartSummary/CartSummary.js';
 export { Divider } from './components/Divider/Divider.js';
 export { Dot } from './components/Dot/Dot.js';
 export { FormControl, TScreenWidth } from './components/FormControl/FormControl.js';
+export { Header } from './components/Header/Header.js';
 export { Input } from './components/Input/Input.js';
 export { EListItemAlignment, ListItem } from './components/ListItem/ListItem.js';
-import './components/Skeleton/Skeleton.css.vanilla.js';
+export { BorderPosition, borderStyle, orderTable, orderTd, orderTh, orderThead, orderTr } from './components/OrderTable/OrderTable.css.vanilla.js';
+export { MobileOrderLine } from './components/OrderTableMobile/OrderTableMobile.js';
+export { Pagination } from './components/Pagination/Pagination.js';
+export { RippleContainer } from './components/RippleContainer/RippleContainer.js';
+export { SideModal } from './components/SideModal/SideModal.js';
+export { Skeleton } from './components/Skeleton/Skeleton.js';
 export { Spacer } from './components/Spacer/Spacer.js';
 export { Spinner } from './components/Spinner/Spinner.js';
 export { Timeline } from './components/TimeLine/TimeLine.js';
 export { BodyText } from './typography/BodyText/BodyText.js';
+export { Paragraph } from './typography/Paragraph/Paragraph.js';
+export { H1 } from './typography/H1/H1.js';
+export { H2 } from './typography/H2/H2.js';
+export { H3 } from './typography/H3/H3.js';
 export { borderColor, borderRadius } from './cssUtils/border.css.vanilla.js';
 export { backgroundColor, color, hoverBackgroundColor, hoverColor } from './cssUtils/color.css.vanilla.js';
 export { margin, marginBottomDynamic, marginHorizontal, marginVertical, padding, paddingHorizontal, paddingVertical } from './cssUtils/spacings.css.vanilla.js';
-export { CartSummary } from './components/CartSummary/CartSummary.js';

package/dist/typography/BodyText/BodyText.css.ts.vanilla.css

@@ -0,0 +1,3 @@
+.BodyText_bodyText__1lpefp40 {
+  margin: 0;
+}

package/dist/typography/BodyText/BodyText.css.vanilla.js

@@ -1,8 +1,8 @@
 import './../../cssUtils/typography.css.ts.vanilla.css';
 import './../../cssUtils/color.css.ts.vanilla.css';
-import 'src/typography/BodyText/BodyText.css.ts.vanilla.css';
+import './BodyText.css.ts.vanilla.css';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
 
-var bodyTextStyle = createRuntimeFn({ defaultClassName: "BodyText__1lpefp40", variantClassNames: { fontWeight: { regular: "typography_fontWeight_regular__xithytc", medium: "typography_fontWeight_medium__xithytd", semiBold: "typography_fontWeight_semiBold__xithyte", bold: "typography_fontWeight_bold__xithytf" }, textDecoration: { lineThrough: "typography_textDecoration_lineThrough__xithytq", underline: "typography_textDecoration_underline__xithytr" }, bodyTextSize: { tiny: "typography_bodyTextSize_tiny__xithyts", extraSmall: "typography_bodyTextSize_extraSmall__xithytt", small: "typography_bodyTextSize_small__xithytu", "default": "typography_bodyTextSize_default__xithytv" }, textAlign: { left: "typography_textAlign_left__xithytn", right: "typography_textAlign_right__xithyto", center: "typography_textAlign_center__xithytp" }, color: { primary: "color_color_primary__13rr0b20", secondary: "color_color_secondary__13rr0b21", brandYellow: "color_color_brandYellow__13rr0b22", brandBlue: "color_color_brandBlue__13rr0b23", brandPurple: "color_color_brandPurple__13rr0b24", brandPrio: "color_color_brandPrio__13rr0b25", yellowLighter: "color_color_yellowLighter__13rr0b26", yellowLight: "color_color_yellowLight__13rr0b27", blueLight: "color_color_blueLight__13rr0b28", blueLighter: "color_color_blueLighter__13rr0b29", blueMedium: "color_color_blueMedium__13rr0b2a", greenLight: "color_color_greenLight__13rr0b2b", greenMedium: "color_color_greenMedium__13rr0b2c", redLight: "color_color_redLight__13rr0b2d", recipeVego: "color_color_recipeVego__13rr0b2e", recipeLactose: "color_color_recipeLactose__13rr0b2f", recipeGluten: "color_color_recipeGluten__13rr0b2g", link: "color_color_link__13rr0b2h", white: "color_color_white__13rr0b2i", black: "color_color_black__13rr0b2j", lightest: "color_color_lightest__13rr0b2k", lighter: "color_color_lighter__13rr0b2l", light: "color_color_light__13rr0b2m", medium: "color_color_medium__13rr0b2n", mediumDark: "color_color_mediumDark__13rr0b2o", dark: "color_color_dark__13rr0b2p", darker: "color_color_darker__13rr0b2q", darkest: "color_color_darkest__13rr0b2r", buttonGray: "color_color_buttonGray__13rr0b2s", disabledGray: "color_color_disabledGray__13rr0b2t", disabledDarkGray: "color_color_disabledDarkGray__13rr0b2u", placeholder: "color_color_placeholder__13rr0b2v", border: "color_color_border__13rr0b2w", boxShadow: "color_color_boxShadow__13rr0b2x", boxShadowActive: "color_color_boxShadowActive__13rr0b2y", alertRed: "color_color_alertRed__13rr0b2z", alertBlue: "color_color_alertBlue__13rr0b210", alertGreen: "color_color_alertGreen__13rr0b211", darkOverlay: "color_color_darkOverlay__13rr0b212", transparent: "color_color_transparent__13rr0b213", brandBlueHover: "color_color_brandBlueHover__13rr0b214", brandYellowHover: "color_color_brandYellowHover__13rr0b215", brandPrioHover: "color_color_brandPrioHover__13rr0b216", brandBlueActive: "color_color_brandBlueActive__13rr0b217", brandYellowActive: "color_color_brandYellowActive__13rr0b218", brandPrioActive: "color_color_brandPrioActive__13rr0b219", none: "color_color_none__13rr0b21a" } }, defaultVariants: { color: "darkest", fontWeight: "regular", bodyTextSize: "default", textAlign: "left" }, compoundVariants: [] });
+var bodyText = createRuntimeFn({ defaultClassName: "BodyText_bodyText__1lpefp40", variantClassNames: { fontWeight: { regular: "typography_fontWeight_regular__xithytc", medium: "typography_fontWeight_medium__xithytd", semiBold: "typography_fontWeight_semiBold__xithyte", bold: "typography_fontWeight_bold__xithytf" }, textDecoration: { lineThrough: "typography_textDecoration_lineThrough__xithytq", underline: "typography_textDecoration_underline__xithytr" }, bodyTextSize: { tiny: "typography_bodyTextSize_tiny__xithyts", extraSmall: "typography_bodyTextSize_extraSmall__xithytt", small: "typography_bodyTextSize_small__xithytu", "default": "typography_bodyTextSize_default__xithytv" }, textAlign: { left: "typography_textAlign_left__xithytn", right: "typography_textAlign_right__xithyto", center: "typography_textAlign_center__xithytp" }, color: { primary: "color_color_primary__13rr0b20", secondary: "color_color_secondary__13rr0b21", brandYellow: "color_color_brandYellow__13rr0b22", brandBlue: "color_color_brandBlue__13rr0b23", brandPurple: "color_color_brandPurple__13rr0b24", brandPrio: "color_color_brandPrio__13rr0b25", yellowLighter: "color_color_yellowLighter__13rr0b26", yellowLight: "color_color_yellowLight__13rr0b27", blueLight: "color_color_blueLight__13rr0b28", blueLighter: "color_color_blueLighter__13rr0b29", blueMedium: "color_color_blueMedium__13rr0b2a", greenLight: "color_color_greenLight__13rr0b2b", greenMedium: "color_color_greenMedium__13rr0b2c", redLight: "color_color_redLight__13rr0b2d", recipeVego: "color_color_recipeVego__13rr0b2e", recipeLactose: "color_color_recipeLactose__13rr0b2f", recipeGluten: "color_color_recipeGluten__13rr0b2g", link: "color_color_link__13rr0b2h", white: "color_color_white__13rr0b2i", black: "color_color_black__13rr0b2j", lightest: "color_color_lightest__13rr0b2k", lighter: "color_color_lighter__13rr0b2l", light: "color_color_light__13rr0b2m", medium: "color_color_medium__13rr0b2n", mediumDark: "color_color_mediumDark__13rr0b2o", dark: "color_color_dark__13rr0b2p", darker: "color_color_darker__13rr0b2q", darkest: "color_color_darkest__13rr0b2r", buttonGray: "color_color_buttonGray__13rr0b2s", disabledGray: "color_color_disabledGray__13rr0b2t", disabledDarkGray: "color_color_disabledDarkGray__13rr0b2u", placeholder: "color_color_placeholder__13rr0b2v", border: "color_color_border__13rr0b2w", boxShadow: "color_color_boxShadow__13rr0b2x", boxShadowActive: "color_color_boxShadowActive__13rr0b2y", alertRed: "color_color_alertRed__13rr0b2z", alertBlue: "color_color_alertBlue__13rr0b210", alertGreen: "color_color_alertGreen__13rr0b211", darkOverlay: "color_color_darkOverlay__13rr0b212", transparent: "color_color_transparent__13rr0b213", brandBlueHover: "color_color_brandBlueHover__13rr0b214", brandYellowHover: "color_color_brandYellowHover__13rr0b215", brandPrioHover: "color_color_brandPrioHover__13rr0b216", brandBlueActive: "color_color_brandBlueActive__13rr0b217", brandYellowActive: "color_color_brandYellowActive__13rr0b218", brandPrioActive: "color_color_brandPrioActive__13rr0b219", none: "color_color_none__13rr0b21a" } }, defaultVariants: { color: "darkest", fontWeight: "regular", bodyTextSize: "default", textAlign: "left" }, compoundVariants: [] });
 
-export { bodyTextStyle };
+export { bodyText };

package/dist/typography/BodyText/BodyText.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { bodyTextStyle } from './BodyText.css.vanilla.js';
+import { bodyText } from './BodyText.css.vanilla.js';
 
 const BodyText = ({
   children,
@@ -13,7 +13,7 @@ const BodyText = ({
   return /* @__PURE__ */ React.createElement(
     "p",
     {
-      className: `${bodyTextStyle({
+      className: `${bodyText({
         bodyTextSize: size,
         color,
         textDecoration,

package/dist/typography/H1/H1.css.ts.vanilla.css

@@ -0,0 +1,10 @@
+.H1_H1Styles__1u2ghpy0 {
+  font-size: 24px;
+  line-height: 45px;
+}
+@media screen and (min-width: 576px) {
+  .H1_H1Styles__1u2ghpy0 {
+    font-size: 30px;
+    line-height: 45px;
+  }
+}

package/dist/typography/H1/H1.css.vanilla.js

@@ -0,0 +1,8 @@
+import './../../cssUtils/typography.css.ts.vanilla.css';
+import './../../cssUtils/color.css.ts.vanilla.css';
+import './H1.css.ts.vanilla.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var H1Styles = createRuntimeFn({ defaultClassName: "H1_H1Styles__1u2ghpy0", variantClassNames: { color: { primary: "color_color_primary__13rr0b20", secondary: "color_color_secondary__13rr0b21", brandYellow: "color_color_brandYellow__13rr0b22", brandBlue: "color_color_brandBlue__13rr0b23", brandPurple: "color_color_brandPurple__13rr0b24", brandPrio: "color_color_brandPrio__13rr0b25", yellowLighter: "color_color_yellowLighter__13rr0b26", yellowLight: "color_color_yellowLight__13rr0b27", blueLight: "color_color_blueLight__13rr0b28", blueLighter: "color_color_blueLighter__13rr0b29", blueMedium: "color_color_blueMedium__13rr0b2a", greenLight: "color_color_greenLight__13rr0b2b", greenMedium: "color_color_greenMedium__13rr0b2c", redLight: "color_color_redLight__13rr0b2d", recipeVego: "color_color_recipeVego__13rr0b2e", recipeLactose: "color_color_recipeLactose__13rr0b2f", recipeGluten: "color_color_recipeGluten__13rr0b2g", link: "color_color_link__13rr0b2h", white: "color_color_white__13rr0b2i", black: "color_color_black__13rr0b2j", lightest: "color_color_lightest__13rr0b2k", lighter: "color_color_lighter__13rr0b2l", light: "color_color_light__13rr0b2m", medium: "color_color_medium__13rr0b2n", mediumDark: "color_color_mediumDark__13rr0b2o", dark: "color_color_dark__13rr0b2p", darker: "color_color_darker__13rr0b2q", darkest: "color_color_darkest__13rr0b2r", buttonGray: "color_color_buttonGray__13rr0b2s", disabledGray: "color_color_disabledGray__13rr0b2t", disabledDarkGray: "color_color_disabledDarkGray__13rr0b2u", placeholder: "color_color_placeholder__13rr0b2v", border: "color_color_border__13rr0b2w", boxShadow: "color_color_boxShadow__13rr0b2x", boxShadowActive: "color_color_boxShadowActive__13rr0b2y", alertRed: "color_color_alertRed__13rr0b2z", alertBlue: "color_color_alertBlue__13rr0b210", alertGreen: "color_color_alertGreen__13rr0b211", darkOverlay: "color_color_darkOverlay__13rr0b212", transparent: "color_color_transparent__13rr0b213", brandBlueHover: "color_color_brandBlueHover__13rr0b214", brandYellowHover: "color_color_brandYellowHover__13rr0b215", brandPrioHover: "color_color_brandPrioHover__13rr0b216", brandBlueActive: "color_color_brandBlueActive__13rr0b217", brandYellowActive: "color_color_brandYellowActive__13rr0b218", brandPrioActive: "color_color_brandPrioActive__13rr0b219", none: "color_color_none__13rr0b21a" }, textDecoration: { lineThrough: "typography_textDecoration_lineThrough__xithytq", underline: "typography_textDecoration_underline__xithytr" }, fontWeight: { regular: "typography_fontWeight_regular__xithytc", medium: "typography_fontWeight_medium__xithytd", semiBold: "typography_fontWeight_semiBold__xithyte", bold: "typography_fontWeight_bold__xithytf" } }, defaultVariants: { color: "darkest", fontWeight: "bold" }, compoundVariants: [] });
+
+export { H1Styles };

package/dist/typography/H1/H1.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { TPaletteKeys, TFontWeightKeys } from '@citygross/design-tokens_v2';
+
+declare type TH1 = {
+    children: React.ReactNode;
+    lineThrough?: boolean;
+    color?: TPaletteKeys;
+    fontWeight?: TFontWeightKeys;
+    className?: string;
+};
+declare const H1: ({ children, color, fontWeight, lineThrough, className }: TH1) => JSX.Element;
+
+export { H1, TH1 };

package/dist/typography/H1/H1.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { H1Styles } from './H1.css.vanilla.js';
+
+const H1 = ({
+  children,
+  color,
+  fontWeight,
+  lineThrough,
+  className
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    "h1",
+    {
+      className: `${H1Styles({
+        color,
+        textDecoration: lineThrough ? "lineThrough" : null,
+        fontWeight
+      })} ${className}`
+    },
+    children
+  );
+};
+
+export { H1 };

package/dist/typography/H2/H2.css.ts.vanilla.css

@@ -0,0 +1,10 @@
+.H2_H2Styles__1w776ou0 {
+  font-size: 18px;
+  line-height: 27px;
+}
+@media screen and (min-width: 576px) {
+  .H2_H2Styles__1w776ou0 {
+    font-size: 15px;
+    line-height: 27px;
+  }
+}

package/dist/typography/H2/H2.css.vanilla.js

@@ -0,0 +1,8 @@
+import './../../cssUtils/typography.css.ts.vanilla.css';
+import './../../cssUtils/color.css.ts.vanilla.css';
+import './H2.css.ts.vanilla.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var H2Styles = createRuntimeFn({ defaultClassName: "H2_H2Styles__1w776ou0", variantClassNames: { color: { primary: "color_color_primary__13rr0b20", secondary: "color_color_secondary__13rr0b21", brandYellow: "color_color_brandYellow__13rr0b22", brandBlue: "color_color_brandBlue__13rr0b23", brandPurple: "color_color_brandPurple__13rr0b24", brandPrio: "color_color_brandPrio__13rr0b25", yellowLighter: "color_color_yellowLighter__13rr0b26", yellowLight: "color_color_yellowLight__13rr0b27", blueLight: "color_color_blueLight__13rr0b28", blueLighter: "color_color_blueLighter__13rr0b29", blueMedium: "color_color_blueMedium__13rr0b2a", greenLight: "color_color_greenLight__13rr0b2b", greenMedium: "color_color_greenMedium__13rr0b2c", redLight: "color_color_redLight__13rr0b2d", recipeVego: "color_color_recipeVego__13rr0b2e", recipeLactose: "color_color_recipeLactose__13rr0b2f", recipeGluten: "color_color_recipeGluten__13rr0b2g", link: "color_color_link__13rr0b2h", white: "color_color_white__13rr0b2i", black: "color_color_black__13rr0b2j", lightest: "color_color_lightest__13rr0b2k", lighter: "color_color_lighter__13rr0b2l", light: "color_color_light__13rr0b2m", medium: "color_color_medium__13rr0b2n", mediumDark: "color_color_mediumDark__13rr0b2o", dark: "color_color_dark__13rr0b2p", darker: "color_color_darker__13rr0b2q", darkest: "color_color_darkest__13rr0b2r", buttonGray: "color_color_buttonGray__13rr0b2s", disabledGray: "color_color_disabledGray__13rr0b2t", disabledDarkGray: "color_color_disabledDarkGray__13rr0b2u", placeholder: "color_color_placeholder__13rr0b2v", border: "color_color_border__13rr0b2w", boxShadow: "color_color_boxShadow__13rr0b2x", boxShadowActive: "color_color_boxShadowActive__13rr0b2y", alertRed: "color_color_alertRed__13rr0b2z", alertBlue: "color_color_alertBlue__13rr0b210", alertGreen: "color_color_alertGreen__13rr0b211", darkOverlay: "color_color_darkOverlay__13rr0b212", transparent: "color_color_transparent__13rr0b213", brandBlueHover: "color_color_brandBlueHover__13rr0b214", brandYellowHover: "color_color_brandYellowHover__13rr0b215", brandPrioHover: "color_color_brandPrioHover__13rr0b216", brandBlueActive: "color_color_brandBlueActive__13rr0b217", brandYellowActive: "color_color_brandYellowActive__13rr0b218", brandPrioActive: "color_color_brandPrioActive__13rr0b219", none: "color_color_none__13rr0b21a" }, textDecoration: { lineThrough: "typography_textDecoration_lineThrough__xithytq", underline: "typography_textDecoration_underline__xithytr" }, fontWeight: { regular: "typography_fontWeight_regular__xithytc", medium: "typography_fontWeight_medium__xithytd", semiBold: "typography_fontWeight_semiBold__xithyte", bold: "typography_fontWeight_bold__xithytf" } }, defaultVariants: { color: "darkest", fontWeight: "semiBold" }, compoundVariants: [] });
+
+export { H2Styles };

package/dist/typography/H2/H2.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { TPaletteKeys, TFontWeightKeys } from '@citygross/design-tokens_v2';
+
+declare type TH2 = {
+    children: React.ReactNode;
+    lineThrough?: boolean;
+    color?: TPaletteKeys;
+    fontWeight?: TFontWeightKeys;
+    className?: string;
+};
+declare const H2: ({ children, color, fontWeight, lineThrough, className }: TH2) => JSX.Element;
+
+export { H2, TH2 };

package/dist/typography/H2/H2.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { H2Styles } from './H2.css.vanilla.js';
+
+const H2 = ({
+  children,
+  color,
+  fontWeight,
+  lineThrough,
+  className
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    "h2",
+    {
+      className: `${H2Styles({
+        color,
+        textDecoration: lineThrough ? "lineThrough" : null,
+        fontWeight
+      })} ${className}`
+    },
+    children
+  );
+};
+
+export { H2 };

package/dist/typography/H3/H3.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { TPaletteKeys, TFontWeightKeys } from '@citygross/design-tokens_v2';
+
+declare type TH3 = {
+    children: React.ReactNode;
+    lineThrough?: boolean;
+    color?: TPaletteKeys;
+    fontWeight?: TFontWeightKeys;
+    className?: string;
+};
+declare const H3: ({ children, className, color, fontWeight, lineThrough }: TH3) => JSX.Element;
+
+export { H3, TH3 };

package/dist/typography/Paragraph/Paragraph.css.vanilla.js

@@ -0,0 +1,8 @@
+import './../../cssUtils/typography.css.ts.vanilla.css';
+import './../../cssUtils/color.css.ts.vanilla.css';
+import 'src/typography/Paragraph/Paragraph.css.ts.vanilla.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var paragraphtStyle = createRuntimeFn({ defaultClassName: "Paragraph__1xnbf7t0", variantClassNames: { fontWeight: { regular: "typography_fontWeight_regular__xithytc", medium: "typography_fontWeight_medium__xithytd", semiBold: "typography_fontWeight_semiBold__xithyte", bold: "typography_fontWeight_bold__xithytf" }, textDecoration: { lineThrough: "typography_textDecoration_lineThrough__xithytq", underline: "typography_textDecoration_underline__xithytr" }, bodyTextSize: { tiny: "typography_bodyTextSize_tiny__xithyts", extraSmall: "typography_bodyTextSize_extraSmall__xithytt", small: "typography_bodyTextSize_small__xithytu", "default": "typography_bodyTextSize_default__xithytv" }, textAlign: { left: "typography_textAlign_left__xithytn", right: "typography_textAlign_right__xithyto", center: "typography_textAlign_center__xithytp" }, color: { primary: "color_color_primary__13rr0b20", secondary: "color_color_secondary__13rr0b21", brandYellow: "color_color_brandYellow__13rr0b22", brandBlue: "color_color_brandBlue__13rr0b23", brandPurple: "color_color_brandPurple__13rr0b24", brandPrio: "color_color_brandPrio__13rr0b25", yellowLighter: "color_color_yellowLighter__13rr0b26", yellowLight: "color_color_yellowLight__13rr0b27", blueLight: "color_color_blueLight__13rr0b28", blueLighter: "color_color_blueLighter__13rr0b29", blueMedium: "color_color_blueMedium__13rr0b2a", greenLight: "color_color_greenLight__13rr0b2b", greenMedium: "color_color_greenMedium__13rr0b2c", redLight: "color_color_redLight__13rr0b2d", recipeVego: "color_color_recipeVego__13rr0b2e", recipeLactose: "color_color_recipeLactose__13rr0b2f", recipeGluten: "color_color_recipeGluten__13rr0b2g", link: "color_color_link__13rr0b2h", white: "color_color_white__13rr0b2i", black: "color_color_black__13rr0b2j", lightest: "color_color_lightest__13rr0b2k", lighter: "color_color_lighter__13rr0b2l", light: "color_color_light__13rr0b2m", medium: "color_color_medium__13rr0b2n", mediumDark: "color_color_mediumDark__13rr0b2o", dark: "color_color_dark__13rr0b2p", darker: "color_color_darker__13rr0b2q", darkest: "color_color_darkest__13rr0b2r", buttonGray: "color_color_buttonGray__13rr0b2s", disabledGray: "color_color_disabledGray__13rr0b2t", disabledDarkGray: "color_color_disabledDarkGray__13rr0b2u", placeholder: "color_color_placeholder__13rr0b2v", border: "color_color_border__13rr0b2w", boxShadow: "color_color_boxShadow__13rr0b2x", boxShadowActive: "color_color_boxShadowActive__13rr0b2y", alertRed: "color_color_alertRed__13rr0b2z", alertBlue: "color_color_alertBlue__13rr0b210", alertGreen: "color_color_alertGreen__13rr0b211", darkOverlay: "color_color_darkOverlay__13rr0b212", transparent: "color_color_transparent__13rr0b213", brandBlueHover: "color_color_brandBlueHover__13rr0b214", brandYellowHover: "color_color_brandYellowHover__13rr0b215", brandPrioHover: "color_color_brandPrioHover__13rr0b216", brandBlueActive: "color_color_brandBlueActive__13rr0b217", brandYellowActive: "color_color_brandYellowActive__13rr0b218", brandPrioActive: "color_color_brandPrioActive__13rr0b219", none: "color_color_none__13rr0b21a" } }, defaultVariants: { color: "darkest", fontWeight: "regular", bodyTextSize: "default", textAlign: "left" }, compoundVariants: [] });
+
+export { paragraphtStyle };