@citygross/components_v2 0.0.60 → 0.1.0

package/dist/components/Accordion/Accordion.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
 
-declare type TAccordion = {
-    children: React.ReactNode;
-    open: boolean;
-    className?: string;
-};
+declare type TAccordion = {
+    children: React.ReactNode;
+    open: boolean;
+    className?: string;
+};
 declare const Accordion: ({ children, open, className }: TAccordion) => JSX.Element;
 
 export { Accordion, TAccordion };

package/dist/components/AlertBox/AlertBox.d.ts

@@ -1,17 +1,17 @@
 import React from 'react';
 import { THardSpacingKeys, TPaletteKeys, TSpacingKeys } from '@citygross/design-tokens_v2';
 
-declare type TAlertBox = {
-    arrowPlacement?: 'left' | 'right';
-    arrowSpacing?: THardSpacingKeys;
-    background?: TPaletteKeys;
-    borderColor?: TPaletteKeys;
-    children: React.ReactNode;
-    icon?: JSX.Element;
-    iconMinWidth?: THardSpacingKeys;
-    padding?: TSpacingKeys;
-    withArrow?: boolean;
-};
+declare type TAlertBox = {
+    arrowPlacement?: 'left' | 'right';
+    arrowSpacing?: THardSpacingKeys;
+    background?: TPaletteKeys;
+    borderColor?: TPaletteKeys;
+    children: React.ReactNode;
+    icon?: JSX.Element;
+    iconMinWidth?: THardSpacingKeys;
+    padding?: TSpacingKeys;
+    withArrow?: boolean;
+};
 declare function AlertBox({ arrowPlacement, arrowSpacing, background, borderColor, children, icon, iconMinWidth, padding, withArrow }: TAlertBox): JSX.Element;
 
 export { AlertBox, TAlertBox };

package/dist/components/Box/Box.d.ts

@@ -1,19 +1,19 @@
 import React from 'react';
 import { TPaletteKeys, TBorderRadiusKeys, TSpacingKeys } from '@citygross/design-tokens_v2';
 
-declare type TBox = {
-    background?: TPaletteKeys;
-    borderColor?: TPaletteKeys;
-    hoverBackgroundColor?: TPaletteKeys;
-    borderRadius?: TBorderRadiusKeys;
-    padding?: TSpacingKeys;
-    paddingHorizontal?: TSpacingKeys;
-    paddingVertical?: TSpacingKeys;
-    margin?: TSpacingKeys;
-    marginHorizontal?: TSpacingKeys;
-    marginVertical?: TSpacingKeys;
-    children: React.ReactNode;
-};
+declare type TBox = {
+    background?: TPaletteKeys;
+    borderColor?: TPaletteKeys;
+    hoverBackgroundColor?: TPaletteKeys;
+    borderRadius?: TBorderRadiusKeys;
+    padding?: TSpacingKeys;
+    paddingHorizontal?: TSpacingKeys;
+    paddingVertical?: TSpacingKeys;
+    margin?: TSpacingKeys;
+    marginHorizontal?: TSpacingKeys;
+    marginVertical?: TSpacingKeys;
+    children: React.ReactNode;
+};
 declare function Box({ background, borderColor, borderRadius, hoverBackgroundColor, padding, paddingVertical, paddingHorizontal, margin, marginHorizontal, marginVertical, children }: TBox): JSX.Element;
 
 export { Box, TBox };

package/dist/components/BoxArrow/BoxArrow.d.ts

@@ -1,10 +1,10 @@
 import { THardSpacingKeys, TPaletteKeys } from '@citygross/design-tokens_v2';
 
-declare type TBoxArrow = {
-    arrowPlacement?: 'left' | 'right';
-    arrowSpacing?: THardSpacingKeys;
-    background?: TPaletteKeys;
-};
+declare type TBoxArrow = {
+    arrowPlacement?: 'left' | 'right';
+    arrowSpacing?: THardSpacingKeys;
+    background?: TPaletteKeys;
+};
 declare const BoxArrow: ({ arrowPlacement, arrowSpacing, background }: TBoxArrow) => JSX.Element;
 
 export { BoxArrow, TBoxArrow };

package/dist/components/Button/Button.d.ts

@@ -1,21 +1,21 @@
 import React from 'react';
 
-declare type TCgButton = {
-    ariaLabel?: string;
-    buttonRef?: React.Ref<HTMLButtonElement>;
-    children?: React.ReactNode;
-    className?: string;
-    disabled?: boolean;
-    flexReverse?: boolean;
-    fullWidth?: boolean;
-    icon?: React.ReactNode;
-    loading?: boolean;
-    onClick?: () => void;
-    round?: boolean;
-    shouldPreventDefault?: boolean;
-    size?: 'small' | 'medium' | 'icon' | 'large';
-    variant?: 'primary' | 'secondary' | 'ghost' | 'tertiary' | 'prio' | 'dark';
-};
+declare type TCgButton = {
+    ariaLabel?: string;
+    buttonRef?: React.Ref<HTMLButtonElement>;
+    children?: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+    flexReverse?: boolean;
+    fullWidth?: boolean;
+    icon?: React.ReactNode;
+    loading?: boolean;
+    onClick?: () => void;
+    round?: boolean;
+    shouldPreventDefault?: boolean;
+    size?: 'small' | 'medium' | 'icon' | 'large';
+    variant?: 'primary' | 'secondary' | 'ghost' | 'tertiary' | 'prio' | 'dark';
+};
 declare const Button: ({ ariaLabel, buttonRef, children, className, disabled, flexReverse, fullWidth, icon, loading, onClick, round, shouldPreventDefault, size, variant }: TCgButton) => JSX.Element;
 
 export { Button, TCgButton };

package/dist/components/CartItemSummary/CartItemSummary.d.ts

@@ -1,15 +1,15 @@
-declare type TSummaryItem = {
-    amount: number;
-    cancelledAmount: number;
-    quantity: number;
-    cancelledQuantity: number;
-    name?: string;
-};
-declare type TCartItemSummary = {
-    product: TSummaryItem;
-    withParenthesis?: boolean;
-    unit?: string;
-};
+declare type TSummaryItem = {
+    amount: number;
+    cancelledAmount: number;
+    quantity: number;
+    cancelledQuantity: number;
+    name?: string;
+};
+declare type TCartItemSummary = {
+    product: TSummaryItem;
+    withParenthesis?: boolean;
+    unit?: string;
+};
 declare const CartItemSummary: ({ product, withParenthesis, unit }: TCartItemSummary) => JSX.Element;
 
 export { CartItemSummary, TCartItemSummary, TSummaryItem };

package/dist/components/CartSummary/CartSummary.d.ts

@@ -1,26 +1,26 @@
 import { TSummaryItem } from '../CartItemSummary/CartItemSummary.js';
 
-declare type TCartSummary = {
-    title?: string;
-    subTitle?: string;
-    bags?: TSummaryItem[];
-    groceries?: TSummaryItem[];
-    charges?: TSummaryItem[];
-    cateredMeals?: TSummaryItem[];
-    deliveryFee?: {
-        amount: number;
-        taxAmount: number;
-        taxPercentage: number;
-        totalDiscountAmount: number;
-    };
-    totalAmount: number;
-    totalDiscount: number;
-    totalTaxAmount: number;
-    totalLabel?: string;
-    taxLabel?: string;
-    shippingLabel?: string;
-    saveLabel?: string;
-};
+declare type TCartSummary = {
+    title?: string;
+    subTitle?: string;
+    bags?: TSummaryItem[];
+    groceries?: TSummaryItem[];
+    charges?: TSummaryItem[];
+    cateredMeals?: TSummaryItem[];
+    deliveryFee?: {
+        amount: number;
+        taxAmount: number;
+        taxPercentage: number;
+        totalDiscountAmount: number;
+    };
+    totalAmount: number;
+    totalDiscount: number;
+    totalTaxAmount: number;
+    totalLabel?: string;
+    taxLabel?: string;
+    shippingLabel?: string;
+    saveLabel?: string;
+};
 declare function CartSummary({ saveLabel, shippingLabel, totalLabel, taxLabel, ...cartSummary }: TCartSummary): JSX.Element;
 
 export { CartSummary, TCartSummary };

package/dist/components/Divider/Divider.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
 import { TSpacingKeys, TPaletteKeys } from '@citygross/design-tokens_v2';
 
-declare type TDivider = {
-    marginVertical?: TSpacingKeys;
-    color?: TPaletteKeys;
-};
+declare type TDivider = {
+    marginVertical?: TSpacingKeys;
+    color?: TPaletteKeys;
+};
 declare const Divider: React.FunctionComponent<TDivider>;
 
 export { Divider, TDivider };

package/dist/components/Dot/Dot.d.ts

@@ -1,9 +1,9 @@
 import { TPaletteKeys } from '@citygross/design-tokens_v2';
 
-declare type TDot = {
-    color?: TPaletteKeys;
-    shadow?: TPaletteKeys;
-};
+declare type TDot = {
+    color?: TPaletteKeys;
+    shadow?: TPaletteKeys;
+};
 declare function Dot({ color, shadow }: TDot): JSX.Element;
 
 export { Dot, TDot };

package/dist/components/EmptyBox/EmptyBox.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
 
-declare type TEmptyBox = {
-    title?: string;
-    icon?: React.ReactNode;
-    description?: React.ReactNode;
-};
+declare type TEmptyBox = {
+    title?: string;
+    icon?: React.ReactNode;
+    description?: React.ReactNode;
+};
 declare const EmptyBox: ({ title, description, icon }: TEmptyBox) => JSX.Element;
 
 export { EmptyBox, TEmptyBox };

package/dist/components/FormControl/FormControl.d.ts

@@ -1,17 +1,17 @@
 import React from 'react';
 
-declare enum TScreenWidth {
-    '1/2' = "calc(50% - 12px)",
-    '1/3' = "calc(33% - 12px)",
-    '1/4' = "calc(25% - 12px)"
-}
-declare type TFormControl = {
-    title?: string;
-    children: React.ReactNode;
-    errorMessage?: React.ReactNode;
-    isValid?: boolean;
-    screenWidth?: '1/2' | '1/3' | '1/4';
-};
+declare enum TScreenWidth {
+    '1/2' = "calc(50% - 12px)",
+    '1/3' = "calc(33% - 12px)",
+    '1/4' = "calc(25% - 12px)"
+}
+declare type TFormControl = {
+    title?: string;
+    children: React.ReactNode;
+    errorMessage?: React.ReactNode;
+    isValid?: boolean;
+    screenWidth?: '1/2' | '1/3' | '1/4';
+};
 declare function FormControl({ title, children, errorMessage, isValid, screenWidth }: TFormControl): JSX.Element;
 
 export { FormControl, TFormControl, TScreenWidth };

package/dist/components/Header/Header.d.ts

@@ -1,13 +1,13 @@
 import { ReactNode } from 'react';
 
-declare type THeader = {
-    btnLabel?: string;
-    btnOnClick?: () => void;
-    onMenuClick?: () => void;
-    children?: ReactNode;
-    headerLink?: ReactNode;
-    sideModal?: ReactNode;
-};
+declare type THeader = {
+    btnLabel?: string;
+    btnOnClick?: () => void;
+    onMenuClick?: () => void;
+    children?: ReactNode;
+    headerLink?: ReactNode;
+    sideModal?: ReactNode;
+};
 declare const Header: ({ btnLabel, btnOnClick, onMenuClick, sideModal, headerLink }: THeader) => JSX.Element;
 
 export { Header, THeader };

package/dist/components/Header/HeaderCheckout.css.ts.vanilla.css

@@ -0,0 +1,41 @@
+.HeaderCheckout_wrapper__j8ucdc0 {
+  position: sticky;
+  top: 0;
+  z-index: 3;
+  background: #F7F7F7;
+}
+.HeaderCheckout_headerWrapper__j8ucdc1 {
+  background-color: #FFFFFF;
+  margin: 0 auto;
+  padding: 8px 24px;
+  display: flex;
+  justify-content: center;
+}
+.HeaderCheckout_headerContainer__j8ucdc2 {
+  display: flex;
+  max-width: 640px;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+}
+.HeaderCheckout_logoContainer__j8ucdc3 {
+  display: flex;
+  width: 64px;
+  height: 48px;
+  align-items: center;
+  justify-content: flex-start;
+}
+.HeaderCheckout_headerLinkContainer__j8ucdc4 {
+  display: flex;
+  align-items: center;
+}
+.HeaderCheckout_headerLink__j8ucdc5 {
+  color: #0069AE;
+  font-family: Poppins;
+  font-size: 15px;
+  text-decoration: underline;
+}
+.HeaderCheckout_headerLink__j8ucdc5:focus-visible {
+  outline: 2px solid #000;
+  outline-offset: 1px;
+}

package/dist/components/Header/HeaderCheckout.css.vanilla.js

@@ -0,0 +1,9 @@
+import './HeaderCheckout.css.ts.vanilla.css';
+
+var headerContainer = "HeaderCheckout_headerContainer__j8ucdc2";
+var headerLinkContainer = "HeaderCheckout_headerLinkContainer__j8ucdc4";
+var headerWrapper = "HeaderCheckout_headerWrapper__j8ucdc1";
+var logoContainer = "HeaderCheckout_logoContainer__j8ucdc3";
+var wrapper = "HeaderCheckout_wrapper__j8ucdc0";
+
+export { headerContainer, headerLinkContainer, headerWrapper, logoContainer, wrapper };

package/dist/components/Header/HeaderCheckout.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+
+declare type THeaderCheckout = {
+    headerLink?: ReactNode;
+};
+declare const HeaderCheckout: ({ headerLink }: THeaderCheckout) => JSX.Element;
+
+export { HeaderCheckout, THeaderCheckout };

package/dist/components/Header/HeaderCheckout.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { Icons } from '@citygross/icons_v2';
+import { wrapper, headerWrapper, headerContainer, logoContainer, headerLinkContainer } from './HeaderCheckout.css.vanilla.js';
+
+const HeaderCheckout = ({ headerLink }) => /* @__PURE__ */ React.createElement("header", { className: wrapper }, /* @__PURE__ */ React.createElement("div", { className: headerWrapper }, /* @__PURE__ */ React.createElement("div", { className: headerContainer }, /* @__PURE__ */ React.createElement("span", { className: logoContainer, "aria-label": "City Gross logo" }, /* @__PURE__ */ React.createElement(Icons.Logo, { small: true, "aria-hidden": "true" })), headerLink && /* @__PURE__ */ React.createElement("nav", { className: headerLinkContainer }, headerLink))));
+
+export { HeaderCheckout };

package/dist/components/Input/Input.d.ts

@@ -1,16 +1,16 @@
 import { TFontSizeKeys } from '@citygross/design-tokens_v2';
 import React, { InputHTMLAttributes } from 'react';
 
-declare type TInput = InputHTMLAttributes<HTMLInputElement> & {
-    icon?: JSX.Element;
-    iconOnClick?: () => void;
-    flexGrow?: boolean;
-    inValid?: boolean;
-    fontSize?: TFontSizeKeys;
-    inputSize?: 'small' | 'medium';
-};
-declare function Input({ icon, iconOnClick, flexGrow, inValid, fontSize, inputSize, inputRef, ...props }: TInput & {
-    inputRef?: React.RefObject<HTMLInputElement>;
+declare type TInput = InputHTMLAttributes<HTMLInputElement> & {
+    icon?: JSX.Element;
+    iconOnClick?: () => void;
+    flexGrow?: boolean;
+    inValid?: boolean;
+    fontSize?: TFontSizeKeys;
+    inputSize?: 'small' | 'medium';
+};
+declare function Input({ icon, iconOnClick, flexGrow, inValid, fontSize, inputSize, inputRef, ...props }: TInput & {
+    inputRef?: React.RefObject<HTMLInputElement>;
 }): JSX.Element;
 
 export { Input, TInput };

package/dist/components/LinkButton/LinkButton.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
 
-declare type TLinkButton = {
-    children?: React.ReactNode;
-    variant?: 'primary' | 'secondary' | 'tertiary' | 'primaryInverted' | 'secondaryInverted';
-    disabled?: boolean;
-    onClick?: () => void;
-    ariaLabel?: string;
-};
+declare type TLinkButton = {
+    children?: React.ReactNode;
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'primaryInverted' | 'secondaryInverted';
+    disabled?: boolean;
+    onClick?: () => void;
+    ariaLabel?: string;
+};
 declare const LinkButton: ({ onClick, children, variant, ariaLabel, disabled }: TLinkButton) => JSX.Element;
 
 export { LinkButton, TLinkButton };

package/dist/components/ListItem/ListItem.d.ts

@@ -1,29 +1,29 @@
 import React from 'react';
 import { TPaletteKeys } from '@citygross/design-tokens_v2';
 
-declare type TItem = {
-    name?: string;
-    image?: string;
-    description?: string;
-    secondaryDescription?: React.ReactNode;
-};
-declare enum EListItemAlignment {
-    CENTER = "center",
-    TOP = "flex-start"
-}
-declare type TListItem = {
-    item?: TItem;
-    loading?: boolean;
-    children?: React.ReactNode;
-    fallBackImage?: string;
-    imageAutoHeight?: boolean;
-    boldHeader?: boolean;
-    smallSkeleton?: boolean;
-    isSmall?: boolean;
-    usedInSearch?: boolean;
-    alignment?: EListItemAlignment;
-    textColor?: TPaletteKeys;
-};
+declare type TItem = {
+    name?: string;
+    image?: string;
+    description?: string;
+    secondaryDescription?: React.ReactNode;
+};
+declare enum EListItemAlignment {
+    CENTER = "center",
+    TOP = "flex-start"
+}
+declare type TListItem = {
+    item?: TItem;
+    loading?: boolean;
+    children?: React.ReactNode;
+    fallBackImage?: string;
+    imageAutoHeight?: boolean;
+    boldHeader?: boolean;
+    smallSkeleton?: boolean;
+    isSmall?: boolean;
+    usedInSearch?: boolean;
+    alignment?: EListItemAlignment;
+    textColor?: TPaletteKeys;
+};
 declare function ListItem({ item, loading, isSmall, fallBackImage, imageAutoHeight, boldHeader, smallSkeleton, children, alignment, textColor, usedInSearch }: TListItem): JSX.Element;
 
 export { EListItemAlignment, ListItem, TItem, TListItem };

package/dist/components/ListItem/assets/fallback_grocery.js

@@ -1,3 +1,3 @@
-var FallbackIcon = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\r\n<svg width=\"128px\" height=\"124px\" viewBox=\"0 0 128 124\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\r\n    <!-- Generator: Sketch 52.4 (67378) - http://www.bohemiancoding.com/sketch -->\r\n    <title>shopping_cart_loaded</title>\r\n    <desc>Created with Sketch.</desc>\r\n    <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n        <g id=\"Artboard\" transform=\"translate(-100.000000, -53.000000)\">\r\n            <g id=\"shopping_cart_loaded\" transform=\"translate(100.000000, 53.000000)\">\r\n                <polygon id=\"Rectangle\" fill=\"#D8D8D8\" transform=\"translate(89.585472, 37.151291) rotate(45.000000) translate(-89.585472, -37.151291) \" points=\"69.9549199 17.5207389 109.199991 17.536771 109.216023 56.7818423 69.970952 56.7658102\"></polygon>\r\n                <polygon id=\"Rectangle\" fill=\"#D1D1D1\" transform=\"translate(61.784256, 30.970598) rotate(45.000000) translate(-61.784256, -30.970598) \" points=\"39.9897062 9.17604823 83.5610058 9.19384764 83.5788052 52.7651473 40.0075056 52.7473478\"></polygon>\r\n                <g id=\"Group\" transform=\"translate(6.000000, 12.000000)\" fill=\"#E8E8E8\">\r\n                    <path d=\"M40.2213256,80.6 C36.8179827,80.6 34.0334294,77.81 34.0334294,74.4 L34.0334294,43.4 L21.6576369,43.4 L21.6576369,74.4 C21.6576369,84.63 30.0112968,93 40.2213256,93 L99.0063401,93 L99.0063401,80.6 L40.2213256,80.6 Z\" id=\"Path\"></path>\r\n                    <path d=\"M24.1327954,12.4 L22.8952161,8.37 C21.0388473,3.41 16.3979251,0 11.1382133,0 L0,0 L0,12.4 L11.1382133,12.4 L28.154928,63.86 C29.0831124,66.34 31.2488761,68.2 34.0334294,68.2 L92.8184438,68.2 C95.2936023,68.2 97.459366,66.65 98.3875504,64.48 L121.901556,12.4 L24.1327954,12.4 Z\" id=\"Path\"></path>\r\n                </g>\r\n                <ellipse id=\"Oval\" fill=\"#D8D8D8\" cx=\"6\" cy=\"18.5\" rx=\"6\" ry=\"6.5\"></ellipse>\r\n                <g id=\"Group\" transform=\"translate(40.000000, 105.000000)\" fill=\"#D8D8D8\">\r\n                    <ellipse id=\"Oval\" cx=\"55.7142857\" cy=\"9.5\" rx=\"9.28571429\" ry=\"9.5\"></ellipse>\r\n                    <ellipse id=\"Oval\" cx=\"9.28571429\" cy=\"9.5\" rx=\"9.28571429\" ry=\"9.5\"></ellipse>\r\n                </g>\r\n                <g id=\"Group\" transform=\"translate(46.000000, 112.000000)\" fill=\"#D1D1D1\">\r\n                    <ellipse id=\"Oval\" cx=\"49.8823529\" cy=\"3\" rx=\"3.11764706\" ry=\"3\"></ellipse>\r\n                    <ellipse id=\"Oval\" cx=\"3.11764706\" cy=\"3\" rx=\"3.11764706\" ry=\"3\"></ellipse>\r\n                </g>\r\n            </g>\r\n        </g>\r\n    </g>\r\n</svg>";
+var FallbackIcon = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"128px\" height=\"124px\" viewBox=\"0 0 128 124\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n    <!-- Generator: Sketch 52.4 (67378) - http://www.bohemiancoding.com/sketch -->\n    <title>shopping_cart_loaded</title>\n    <desc>Created with Sketch.</desc>\n    <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <g id=\"Artboard\" transform=\"translate(-100.000000, -53.000000)\">\n            <g id=\"shopping_cart_loaded\" transform=\"translate(100.000000, 53.000000)\">\n                <polygon id=\"Rectangle\" fill=\"#D8D8D8\" transform=\"translate(89.585472, 37.151291) rotate(45.000000) translate(-89.585472, -37.151291) \" points=\"69.9549199 17.5207389 109.199991 17.536771 109.216023 56.7818423 69.970952 56.7658102\"></polygon>\n                <polygon id=\"Rectangle\" fill=\"#D1D1D1\" transform=\"translate(61.784256, 30.970598) rotate(45.000000) translate(-61.784256, -30.970598) \" points=\"39.9897062 9.17604823 83.5610058 9.19384764 83.5788052 52.7651473 40.0075056 52.7473478\"></polygon>\n                <g id=\"Group\" transform=\"translate(6.000000, 12.000000)\" fill=\"#E8E8E8\">\n                    <path d=\"M40.2213256,80.6 C36.8179827,80.6 34.0334294,77.81 34.0334294,74.4 L34.0334294,43.4 L21.6576369,43.4 L21.6576369,74.4 C21.6576369,84.63 30.0112968,93 40.2213256,93 L99.0063401,93 L99.0063401,80.6 L40.2213256,80.6 Z\" id=\"Path\"></path>\n                    <path d=\"M24.1327954,12.4 L22.8952161,8.37 C21.0388473,3.41 16.3979251,0 11.1382133,0 L0,0 L0,12.4 L11.1382133,12.4 L28.154928,63.86 C29.0831124,66.34 31.2488761,68.2 34.0334294,68.2 L92.8184438,68.2 C95.2936023,68.2 97.459366,66.65 98.3875504,64.48 L121.901556,12.4 L24.1327954,12.4 Z\" id=\"Path\"></path>\n                </g>\n                <ellipse id=\"Oval\" fill=\"#D8D8D8\" cx=\"6\" cy=\"18.5\" rx=\"6\" ry=\"6.5\"></ellipse>\n                <g id=\"Group\" transform=\"translate(40.000000, 105.000000)\" fill=\"#D8D8D8\">\n                    <ellipse id=\"Oval\" cx=\"55.7142857\" cy=\"9.5\" rx=\"9.28571429\" ry=\"9.5\"></ellipse>\n                    <ellipse id=\"Oval\" cx=\"9.28571429\" cy=\"9.5\" rx=\"9.28571429\" ry=\"9.5\"></ellipse>\n                </g>\n                <g id=\"Group\" transform=\"translate(46.000000, 112.000000)\" fill=\"#D1D1D1\">\n                    <ellipse id=\"Oval\" cx=\"49.8823529\" cy=\"3\" rx=\"3.11764706\" ry=\"3\"></ellipse>\n                    <ellipse id=\"Oval\" cx=\"3.11764706\" cy=\"3\" rx=\"3.11764706\" ry=\"3\"></ellipse>\n                </g>\n            </g>\n        </g>\n    </g>\n</svg>";
 
 export { FallbackIcon as default };

package/dist/components/Modal/Modal.d.ts

@@ -1,18 +1,18 @@
 import React from 'react';
 import { TPaletteKeys } from '@citygross/design-tokens_v2';
 
-declare type TModal = {
-    background?: TPaletteKeys;
-    children?: React.ReactNode;
-    className?: string;
-    footer?: JSX.Element;
-    hideCancel?: boolean;
-    isConfirm?: boolean;
-    onBackdropClick?: () => void;
-    querySelector?: string;
-    subTitle?: string;
-    title?: string;
-};
+declare type TModal = {
+    background?: TPaletteKeys;
+    children?: React.ReactNode;
+    className?: string;
+    footer?: JSX.Element;
+    hideCancel?: boolean;
+    isConfirm?: boolean;
+    onBackdropClick?: () => void;
+    querySelector?: string;
+    subTitle?: string;
+    title?: string;
+};
 declare const Modal: React.ForwardRefExoticComponent<TModal & React.RefAttributes<HTMLDivElement>>;
 
 export { Modal, TModal };

package/dist/components/OrderTable/OrderTable.css.d.ts

@@ -1,44 +1,44 @@
 import * as _vanilla_extract_recipes from '@vanilla-extract/recipes';
 
-declare const BorderPosition: {
-    Top: string;
-    Bottom: string;
-    None: string;
-    TopAndBottom: string;
-};
-declare const borderStyle: Record<string | number, string>;
-declare const orderTr: _vanilla_extract_recipes.RuntimeFn<{
-    borderStyle: Record<string | number, string>;
-    disableHover: {
-        true: {
-            selectors: {
-                '&:hover': {
-                    backgroundColor: "transparent";
-                };
-            };
-        };
-    };
-    mobile: {
-        true: {
-            selectors: {
-                '&:hover': {
-                    backgroundColor: "transparent";
-                };
-            };
-        };
-    };
-}>;
-declare const orderTd: _vanilla_extract_recipes.RuntimeFn<{
-    borderStyle: Record<string | number, string>;
-    lineThrough: {
-        true: {
-            textDecoration: "line-through";
-            color: string;
-        };
-    };
-}>;
-declare const orderTable: string;
-declare const orderThead: string;
+declare const BorderPosition: {
+    Top: string;
+    Bottom: string;
+    None: string;
+    TopAndBottom: string;
+};
+declare const borderStyle: Record<string | number, string>;
+declare const orderTr: _vanilla_extract_recipes.RuntimeFn<{
+    borderStyle: Record<string | number, string>;
+    disableHover: {
+        true: {
+            selectors: {
+                '&:hover': {
+                    backgroundColor: "transparent";
+                };
+            };
+        };
+    };
+    mobile: {
+        true: {
+            selectors: {
+                '&:hover': {
+                    backgroundColor: "transparent";
+                };
+            };
+        };
+    };
+}>;
+declare const orderTd: _vanilla_extract_recipes.RuntimeFn<{
+    borderStyle: Record<string | number, string>;
+    lineThrough: {
+        true: {
+            textDecoration: "line-through";
+            color: string;
+        };
+    };
+}>;
+declare const orderTable: string;
+declare const orderThead: string;
 declare const orderTh: string;
 
 export { BorderPosition, borderStyle, orderTable, orderTd, orderTh, orderThead, orderTr };

package/dist/components/OrderTableMobile/OrderTableMobile.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 
-declare type TMobileOrderLine = {
-    orderNumber?: string;
-    deliveryString?: React.ReactNode;
-    orderStatus?: string | null;
-    orderAmount?: string | null;
-    cancelled?: boolean;
-    withBorder?: boolean;
-};
+declare type TMobileOrderLine = {
+    orderNumber?: string;
+    deliveryString?: React.ReactNode;
+    orderStatus?: string | null;
+    orderAmount?: string | null;
+    cancelled?: boolean;
+    withBorder?: boolean;
+};
 declare const MobileOrderLine: ({ deliveryString, orderAmount, orderStatus, orderNumber, cancelled, withBorder }: TMobileOrderLine) => JSX.Element;
 
 export { MobileOrderLine };

package/dist/components/Pagination/Pagination.d.ts

@@ -1,15 +1,15 @@
 import React from 'react';
 
-declare type TPagination = {
-    totalItems?: number;
-    fetchItems: (page: number) => void;
-    currentPage: number;
-    itemsPerPage?: number;
-    setPage?: (page: number) => void;
-    numOfPaginationsToShow?: number;
-    rightIcon?: React.ReactNode;
-    leftIcon?: React.ReactNode;
-};
+declare type TPagination = {
+    totalItems?: number;
+    fetchItems: (page: number) => void;
+    currentPage: number;
+    itemsPerPage?: number;
+    setPage?: (page: number) => void;
+    numOfPaginationsToShow?: number;
+    rightIcon?: React.ReactNode;
+    leftIcon?: React.ReactNode;
+};
 declare function Pagination({ totalItems, currentPage, fetchItems, itemsPerPage, setPage, numOfPaginationsToShow, rightIcon, leftIcon }: TPagination): JSX.Element;
 
 export { Pagination, TPagination };

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

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

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

@@ -1,20 +1,20 @@
 import React from 'react';
 import { TPaletteKeys } from '@citygross/design-tokens_v2';
 
-declare enum EAnimate {
-    In = "in",
-    Out = "out"
-}
-declare type TSideModal = {
-    animate?: EAnimate;
-    backgroundColor?: TPaletteKeys;
-    children?: React.ReactNode;
-    onBackdropClick: () => void;
-    overlayBackground?: TPaletteKeys;
-    querySelector?: string;
-    slideFrom?: 'left' | 'right' | null;
-    width?: string;
-};
+declare enum EAnimate {
+    In = "in",
+    Out = "out"
+}
+declare type TSideModal = {
+    animate?: EAnimate;
+    backgroundColor?: TPaletteKeys;
+    children?: React.ReactNode;
+    onBackdropClick: () => void;
+    overlayBackground?: TPaletteKeys;
+    querySelector?: string;
+    slideFrom?: 'left' | 'right' | null;
+    width?: string;
+};
 declare const SideModal: ({ animate, backgroundColor, children, onBackdropClick, overlayBackground, querySelector, slideFrom, width }: TSideModal) => React.ReactPortal;
 
 export { EAnimate, SideModal, TSideModal };

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

@@ -1,14 +1,14 @@
 import React from 'react';
 import { THardSpacingKeys, TBorderRadiusKeys } from '@citygross/design-tokens_v2';
 
-declare type TSkeleton = {
-    width?: THardSpacingKeys;
-    height?: THardSpacingKeys;
-    borderRadius?: TBorderRadiusKeys;
-    fullWidth?: boolean;
-    fullHeight?: boolean;
-    className?: string;
-};
+declare type TSkeleton = {
+    width?: THardSpacingKeys;
+    height?: THardSpacingKeys;
+    borderRadius?: TBorderRadiusKeys;
+    fullWidth?: boolean;
+    fullHeight?: boolean;
+    className?: string;
+};
 declare const Skeleton: React.FC<TSkeleton>;
 
 export { Skeleton, TSkeleton };

package/dist/components/Spacer/Spacer.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import { TSpacingKeys } from '@citygross/design-tokens_v2';
 
-declare type TSpacer = {
-    spacing?: TSpacingKeys;
-};
+declare type TSpacer = {
+    spacing?: TSpacingKeys;
+};
 declare const Spacer: React.FunctionComponent<TSpacer>;
 
 export { Spacer, TSpacer };

package/dist/components/Spinner/Spinner.d.ts

@@ -1,10 +1,10 @@
 import { TPaletteKeys } from '@citygross/design-tokens_v2';
 
-declare type TSpinner = {
-    borderColor?: TPaletteKeys;
-    spinnerColor?: TPaletteKeys;
-    size?: 'small' | 'medium' | 'large';
-};
+declare type TSpinner = {
+    borderColor?: TPaletteKeys;
+    spinnerColor?: TPaletteKeys;
+    size?: 'small' | 'medium' | 'large';
+};
 declare const Spinner: ({ borderColor, size, spinnerColor }: TSpinner) => JSX.Element;
 
 export { Spinner, TSpinner };

package/dist/components/TimeLine/TimeLine.d.ts

@@ -1,25 +1,25 @@
 import { TPaletteKeys } from '@citygross/design-tokens_v2';
 
-declare type TTimelineItem = {
-    primaryText: string;
-    time: string;
-    secondaryText?: string;
-    tiernaryText?: string;
-};
-declare type TTimeline = {
-    items: TTimelineItem[];
-    title?: string;
-    mobileTitle?: string;
-    current: number;
-    dotColor?: TPaletteKeys;
-    dotActiveColor?: TPaletteKeys;
-    dotShadow?: TPaletteKeys;
-    borderStyle?: 'dashed' | 'solid';
-    borderColor?: TPaletteKeys;
-    completedColor?: TPaletteKeys;
-    color?: TPaletteKeys;
-    reversed?: boolean;
-};
+declare type TTimelineItem = {
+    primaryText: string;
+    time: string;
+    secondaryText?: string;
+    tiernaryText?: string;
+};
+declare type TTimeline = {
+    items: TTimelineItem[];
+    title?: string;
+    mobileTitle?: string;
+    current: number;
+    dotColor?: TPaletteKeys;
+    dotActiveColor?: TPaletteKeys;
+    dotShadow?: TPaletteKeys;
+    borderStyle?: 'dashed' | 'solid';
+    borderColor?: TPaletteKeys;
+    completedColor?: TPaletteKeys;
+    color?: TPaletteKeys;
+    reversed?: boolean;
+};
 declare function Timeline({ items, title, mobileTitle, current, dotColor, dotActiveColor, dotShadow, borderStyle, borderColor, color, reversed, completedColor }: TTimeline): JSX.Element;
 
 export { TTimeline, TTimelineItem, Timeline };

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

@@ -1,4 +1,4 @@
-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" | "myPrioGoldDark" | "myPrioGoldLight" | "lightest" | "mediumDark" | "darker" | "darkest" | "buttonGray" | "disabledGray" | "disabledDarkGray" | "placeholder" | "boxShadowActive" | "alertRed" | "alertBlue" | "alertGreen" | "darkOverlay" | "brandBlueHover" | "brandYellowHover" | "brandPrioHover" | "brandBlueActive" | "brandYellowActive" | "brandPrioActive", 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" | "myPrioGoldDark" | "myPrioGoldLight" | "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<"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" | "myPrioGoldDark" | "myPrioGoldLight" | "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" | "myPrioGoldDark" | "myPrioGoldLight" | "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" | "myPrioGoldDark" | "myPrioGoldLight" | "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" | "myPrioGoldDark" | "myPrioGoldLight" | "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" | "myPrioGoldDark" | "myPrioGoldLight" | "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" | "myPrioGoldDark" | "myPrioGoldLight" | "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" | "myPrioGoldDark" | "myPrioGoldLight" | "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<"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 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/cssUtils/typography.css.d.ts

@@ -1,12 +1,12 @@
-declare type TTextDecoration = 'underline' | 'lineThrough';
-declare type TTextAlign = 'center' | 'left' | 'right';
-declare type TBodyTextSizeKeys = 'tiny' | 'extraSmall' | 'small' | 'default';
-declare const fontFamily: Record<"display" | "primary" | "code", string>;
-declare const fontSize: Record<"xs" | "code" | "s1" | "s2" | "s3" | "s4" | "m1" | "m2" | "l1", string>;
-declare const fontWeight: Record<"bold" | "medium" | "regular" | "semiBold", string>;
-declare const lineHeight: Record<"xs" | "s1" | "s2" | "m1" | "m2" | "l1" | "m3", string>;
-declare const textAlign: Record<"left" | "right" | "center", string>;
-declare const textDecoration: Record<"underline" | "lineThrough", string>;
+declare type TTextDecoration = 'underline' | 'lineThrough';
+declare type TTextAlign = 'center' | 'left' | 'right';
+declare type TBodyTextSizeKeys = 'tiny' | 'extraSmall' | 'small' | 'default';
+declare const fontFamily: Record<"display" | "primary" | "code", string>;
+declare const fontSize: Record<"xs" | "code" | "s1" | "s2" | "s3" | "s4" | "m1" | "m2" | "l1", string>;
+declare const fontWeight: Record<"bold" | "medium" | "regular" | "semiBold", string>;
+declare const lineHeight: Record<"xs" | "s1" | "s2" | "m1" | "m2" | "l1" | "m3", string>;
+declare const textAlign: Record<"left" | "right" | "center", string>;
+declare const textDecoration: Record<"underline" | "lineThrough", string>;
 declare const bodyTextSize: Record<"small" | "default" | "tiny" | "extraSmall", string>;
 
 export { TBodyTextSizeKeys, TTextAlign, TTextDecoration, bodyTextSize, fontFamily, fontSize, fontWeight, lineHeight, textAlign, textDecoration };

package/dist/cssUtils/utils.d.ts

@@ -1,6 +1,6 @@
 import { styleVariants } from '@vanilla-extract/css';
 
-declare const spacingsToCssMapper: (fn: typeof styleVariants, css: string, unit?: string) => Record<"xxxs" | "xxs" | "xxs2" | "xs" | "xs2" | "sm" | "sm2" | "md" | "lg" | "xl" | "xxl", string>;
+declare const spacingsToCssMapper: (fn: typeof styleVariants, css: string, unit?: string) => Record<"xxxs" | "xxs" | "xxs2" | "xs" | "xs2" | "sm" | "sm2" | "md" | "lg" | "xl" | "xxl", string>;
 declare const customToCssMapper: (fn: typeof styleVariants, css: string, unit: string, customSizes: any) => Record<string | number | symbol, string>;
 
 export { customToCssMapper, spacingsToCssMapper };

package/dist/index.d.ts

@@ -10,6 +10,7 @@ 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 { HeaderCheckout, THeaderCheckout } from './components/Header/HeaderCheckout.js';
 export { Input, TInput } from './components/Input/Input.js';
 export { LinkButton, TLinkButton } from './components/LinkButton/LinkButton.js';
 export { EListItemAlignment, ListItem, TItem, TListItem } from './components/ListItem/ListItem.js';

package/dist/index.js

@@ -10,6 +10,7 @@ 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 { HeaderCheckout } from './components/Header/HeaderCheckout.js';
 export { Input } from './components/Input/Input.js';
 export { LinkButton } from './components/LinkButton/LinkButton.js';
 export { EListItemAlignment, ListItem } from './components/ListItem/ListItem.js';

package/dist/typography/BodyText/BodyText.d.ts

@@ -2,15 +2,15 @@ import React from 'react';
 import { TPaletteKeys, TFontWeightKeys } from '@citygross/design-tokens_v2';
 import { TBodyTextSizeKeys, TTextDecoration, TTextAlign } from '../../cssUtils/typography.css.js';
 
-declare type TBodyText = {
-    children: React.ReactNode;
-    size?: TBodyTextSizeKeys;
-    color?: TPaletteKeys;
-    textDecoration?: TTextDecoration;
-    fontWeight?: TFontWeightKeys;
-    textAlign?: TTextAlign;
-    className?: string;
-};
+declare type TBodyText = {
+    children: React.ReactNode;
+    size?: TBodyTextSizeKeys;
+    color?: TPaletteKeys;
+    textDecoration?: TTextDecoration;
+    fontWeight?: TFontWeightKeys;
+    textAlign?: TTextAlign;
+    className?: string;
+};
 declare const BodyText: ({ children, color, fontWeight, textDecoration, size, textAlign, className }: TBodyText) => JSX.Element;
 
 export { BodyText, TBodyText };

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

@@ -1,13 +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 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/H2/H2.d.ts

@@ -1,13 +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 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/H3/H3.d.ts

@@ -1,13 +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 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citygross/components_v2",
-  "version": "0.0.60",
+  "version": "0.1.0",
   "license": "ISC",
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -63,7 +63,7 @@
     "react-dom": "^17.0.1"
   },
   "dependencies": {
-    "@citygross/design-tokens_v2": "^0.0.6",
+    "@citygross/design-tokens_v2": "^0.0.7",
     "@citygross/icons_v2": "^0.0.5",
     "@citygross/react-use-bg-wizard": "^0.0.8",
     "@citygross/typography": "^0.0.89",
@@ -77,5 +77,5 @@
     "react-slick": "^0.30.1",
     "slick-carousel": "^1.8.1"
   },
-  "gitHead": "185b85646d61cacbbf4b02c592c93d98a1a83261"
+  "gitHead": "9689ed1055a89211b68777d29774bc3be1801ecb"
 }