@citygross/components_v2 0.1.0 → 0.1.2

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

@@ -1,155 +1,166 @@
-.Button_buttonBase__fe4m9p0 {
-  outline: none;
+.Button_buttonStyle__fe4m9p1 {
   border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 500;
+  border-radius: 4px;
+  width: max-content;
+  position: relative;
+  transition: background-color 0.3s ease;
+  white-space: nowrap;
 }
-.Button_buttonBase__fe4m9p0:disabled {
-  color: #FFFFFF;
-  background-color: #E8E8E8;
-  cursor: default;
+.Button_buttonStyle__fe4m9p1:disabled {
+  color: #8f8f8f;
+  cursor: not-allowed;
 }
-.Button_buttonBase__fe4m9p0:focus-visible:not(:hover) {
+.Button_buttonStyle__fe4m9p1:focus-visible:not(:hover) {
   outline: none;
   box-shadow: 0 0 0 2px #fff,0 0 0 4px #000,0 0 0 6px #fff;
   transition: all 0.1s ease-in-out;
 }
-.Button_buttonVariant_primary__fe4m9p1 {
+.Button_buttonStyle_size_small__fe4m9p2 {
+  font-size: 13px;
+  height: 32px;
+  padding: 4px 8px;
+}
+.Button_buttonStyle_size_medium__fe4m9p3 {
+  font-size: 15px;
+  height: 40px;
+  padding: 8px 12px;
+}
+.Button_buttonStyle_size_large__fe4m9p4 {
+  font-size: 15px;
+  height: 56px;
+  padding: 12px 16px;
+}
+.Button_buttonStyle_variant_primary__fe4m9p5 {
   background-color: #0069AE;
   color: #FFFFFF;
 }
-.Button_buttonVariant_primary__fe4m9p1:hover:not(:disabled) {
+.Button_buttonStyle_variant_primary__fe4m9p5:not(:disabled):hover {
   background-color: #005C99;
 }
-.Button_buttonVariant_primary__fe4m9p1:active:not(:disabled) {
+.Button_buttonStyle_variant_primary__fe4m9p5:not(:disabled):active {
   background-color: #004D80;
 }
-.Button_buttonVariant_secondary__fe4m9p2 {
+.Button_buttonStyle_variant_primary__fe4m9p5:disabled {
+  background-color: #E8E8E8;
+}
+.Button_buttonStyle_variant_secondary__fe4m9p6 {
   background-color: #FFFFFF;
   color: #333333;
   border: 1px solid #B8B8B8;
 }
-.Button_buttonVariant_secondary__fe4m9p2:hover:not(:disabled) {
+.Button_buttonStyle_variant_secondary__fe4m9p6:not(:disabled):hover {
   background-color: #F7F7F7;
 }
-.Button_buttonVariant_secondary__fe4m9p2:active:not(:disabled) {
+.Button_buttonStyle_variant_secondary__fe4m9p6:not(:disabled):active {
   background-color: #F1F1F1;
 }
-.Button_buttonVariant_secondary__fe4m9p2:disabled {
-  color: #B8B8B8;
-}
-.Button_buttonVariant_ghost__fe4m9p3 {
+.Button_buttonStyle_variant_secondary__fe4m9p6:disabled {
   background-color: #FFFFFF;
-  color: #333333;
-}
-.Button_buttonVariant_ghost__fe4m9p3:hover:not(:disabled) {
-  background-color: #F7F7F7;
-}
-.Button_buttonVariant_ghost__fe4m9p3:active:not(:disabled) {
-  background-color: #F1F1F1;
-}
-.Button_buttonVariant_ghost__fe4m9p3:disabled {
-  color: #B8B8B8;
 }
-.Button_buttonVariant_tertiary__fe4m9p4 {
+.Button_buttonStyle_variant_tertiary__fe4m9p7 {
   background-color: #FFE522;
   color: #333333;
 }
-.Button_buttonVariant_tertiary__fe4m9p4:hover:not(:disabled) {
+.Button_buttonStyle_variant_tertiary__fe4m9p7:not(:disabled):hover {
   background-color: #F5D800;
 }
-.Button_buttonVariant_tertiary__fe4m9p4:active:not(:disabled) {
+.Button_buttonStyle_variant_tertiary__fe4m9p7:not(:disabled):active {
   background-color: #DBC100;
 }
-.Button_buttonVariant_prio__fe4m9p5 {
+.Button_buttonStyle_variant_tertiary__fe4m9p7:disabled {
+  background-color: #E8E8E8;
+}
+.Button_buttonStyle_variant_prio__fe4m9p8 {
   background-color: #A71680;
   color: #FFFFFF;
 }
-.Button_buttonVariant_prio__fe4m9p5:hover:not(:disabled) {
+.Button_buttonStyle_variant_prio__fe4m9p8:not(:disabled):hover {
   background-color: #90136F;
 }
-.Button_buttonVariant_prio__fe4m9p5:active:not(:disabled) {
+.Button_buttonStyle_variant_prio__fe4m9p8:not(:disabled):active {
   background-color: #7A105E;
 }
-.Button_buttonVariant_dark__fe4m9p6 {
-  background-color: #333333;
-  color: #FFFFFF;
+.Button_buttonStyle_variant_prio__fe4m9p8:disabled {
+  background-color: #E8E8E8;
 }
-.Button_buttonVariant_dark__fe4m9p6:hover:not(:disabled) {
-  background-color: #4A4A4A;
+.Button_buttonStyle_variant_ghost__fe4m9p9 {
+  background-color: #FFFFFF;
+  color: #333333;
 }
-.Button_buttonVariant_dark__fe4m9p6:active:not(:disabled) {
-  background-color: #333333;
+.Button_buttonStyle_variant_ghost__fe4m9p9:not(:disabled):hover {
+  background-color: #F7F7F7;
 }
-.Button_buttonVariant_dark__fe4m9p6:disabled {
-  background-color: #B8B8B8;
+.Button_buttonStyle_variant_ghost__fe4m9p9:not(:disabled):active {
+  background-color: #F1F1F1;
 }
-.Button_buttonFontSize_small__fe4m9p7 {
-  font-size: 13px;
+.Button_buttonStyle_variant_ghost__fe4m9p9:disabled {
+  background-color: #FFFFFF;
 }
-.Button_buttonFontSize_default__fe4m9p8 {
-  font-size: 15px;
+.Button_buttonStyle_fullWidth_true__fe4m9pa {
+  width: 100%;
 }
-.Button_buttonPadding_small__fe4m9p9 {
-  padding: 6px 8px;
+.Button_buttonStyle_circle_true__fe4m9pb {
+  border-radius: 100px;
+  height: max-content;
 }
-.Button_buttonPadding_medium__fe4m9pa {
-  padding: 8px 12px;
+.Button_buttonStyle_rounded_true__fe4m9pc {
+  border-radius: 100px;
 }
-.Button_buttonPadding_large__fe4m9pb {
-  padding: 12px 16px;
+.Button_buttonStyle_boxShadow_false__fe4m9pe {
+  box-shadow: none;
 }
-.Button_buttonPadding_icon__fe4m9pc {
-  height: 32px;
-  width: 32px;
-  display: grid;
-  place-content: center;
+.Button_buttonStyle_compound_0__fe4m9pf {
+  padding: 4px;
 }
-.Button_buttonShadow_none__fe4m9pd {
-  box-shadow: none;
+.Button_buttonStyle_compound_1__fe4m9pg {
+  padding: 8px;
 }
-.Button_buttonShadow_small__fe4m9pe {
+.Button_buttonStyle_compound_2__fe4m9ph {
+  padding: 12px;
+}
+.Button_buttonStyle_compound_3__fe4m9pi {
   box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.15);
 }
-.Button_buttonShadow_default__fe4m9pf {
+.Button_buttonStyle_compound_4__fe4m9pj {
   box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.15);
 }
-.Button_buttonRadius_round__fe4m9pg {
-  border-radius: 100px;
-  box-shadow: none;
-}
-.Button_buttonRadius_default__fe4m9ph {
-  border-radius: 4px;
-}
-.Button_button__fe4m9pi {
-  cursor: pointer;
-  position: relative;
+.Button_buttonStyle_compound_5__fe4m9pk {
+  box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.15);
 }
-.Button_button__fe4m9pi[data-loading="true"] {
-  background-color: #F7F7F7;
+.Button_buttonStyle_compound_6__fe4m9pl {
+  border-radius: 100px;
 }
-.Button_button_fullWidth_true__fe4m9pj {
-  width: 100%;
+.Button_buttonBase__fe4m9p0 svg {
+  display: block;
 }
-.Button_buttonContent__fe4m9pz {
+.Button_childrenContainer__fe4m9pm {
   display: flex;
-  justify-content: center;
   align-items: center;
   gap: 8px;
-  flex-direction: row;
-  white-space: nowrap;
-  min-width: max-content;
 }
-.Button_buttonContent_flexReverse_true__fe4m9p12 {
-  flex-direction: row-reverse;
-}
-.Button_buttonContent_loading_true__fe4m9p13 {
+.Button_childrenContainer_loading_true__fe4m9pn {
   opacity: 0;
 }
-.Button_buttonLoader__fe4m9p14 {
+.Button_spinnerContainer__fe4m9po {
+  position: absolute;
+}
+.Button_badgeContainer__fe4m9pp {
+  background: #000000;
+  border-radius: 5px;
+  color: #FFFFFF;
+  font-size: 10px;
+  line-height: 15px;
+  min-width: 24px;
+  padding: 2px 6px;
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: grid;
-  place-content: center;
+  top: -4px;
+  right: -4px;
+  width: fit-content;
 }

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

@@ -1,8 +1,9 @@
 import './Button.css.ts.vanilla.css';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
 
-var button = createRuntimeFn({ defaultClassName: "Button_button__fe4m9pi Button_buttonBase__fe4m9p0", variantClassNames: { fullWidth: { true: "Button_button_fullWidth_true__fe4m9pj" }, buttonRadius: { round: "Button_buttonRadius_round__fe4m9pg", "default": "Button_buttonRadius_default__fe4m9ph" }, buttonShadow: { none: "Button_buttonShadow_none__fe4m9pd", small: "Button_buttonShadow_small__fe4m9pe", "default": "Button_buttonShadow_default__fe4m9pf" }, buttonVariant: { primary: "Button_buttonVariant_primary__fe4m9p1", secondary: "Button_buttonVariant_secondary__fe4m9p2", ghost: "Button_buttonVariant_ghost__fe4m9p3", tertiary: "Button_buttonVariant_tertiary__fe4m9p4", prio: "Button_buttonVariant_prio__fe4m9p5", dark: "Button_buttonVariant_dark__fe4m9p6" }, buttonPadding: { small: "Button_buttonPadding_small__fe4m9p9", medium: "Button_buttonPadding_medium__fe4m9pa", large: "Button_buttonPadding_large__fe4m9pb", icon: "Button_buttonPadding_icon__fe4m9pc" } }, defaultVariants: { buttonPadding: "large", buttonRadius: "default", buttonShadow: "default", buttonVariant: "primary" }, compoundVariants: [] });
-var buttonContent = createRuntimeFn({ defaultClassName: "Button_buttonContent__fe4m9pz", variantClassNames: { buttonFontSize: { small: "Button_buttonFontSize_small__fe4m9p7", "default": "Button_buttonFontSize_default__fe4m9p8" }, flexReverse: { true: "Button_buttonContent_flexReverse_true__fe4m9p12" }, loading: { true: "Button_buttonContent_loading_true__fe4m9p13" } }, defaultVariants: { buttonFontSize: "default" }, compoundVariants: [] });
-var buttonLoader = "Button_buttonLoader__fe4m9p14";
+var badgeContainer = "Button_badgeContainer__fe4m9pp";
+var buttonStyle = createRuntimeFn({ defaultClassName: "Button_buttonStyle__fe4m9p1 Button_buttonBase__fe4m9p0", variantClassNames: { size: { small: "Button_buttonStyle_size_small__fe4m9p2", medium: "Button_buttonStyle_size_medium__fe4m9p3", large: "Button_buttonStyle_size_large__fe4m9p4" }, variant: { primary: "Button_buttonStyle_variant_primary__fe4m9p5", secondary: "Button_buttonStyle_variant_secondary__fe4m9p6", tertiary: "Button_buttonStyle_variant_tertiary__fe4m9p7", prio: "Button_buttonStyle_variant_prio__fe4m9p8", ghost: "Button_buttonStyle_variant_ghost__fe4m9p9" }, fullWidth: { true: "Button_buttonStyle_fullWidth_true__fe4m9pa" }, circle: { true: "Button_buttonStyle_circle_true__fe4m9pb" }, rounded: { true: "Button_buttonStyle_rounded_true__fe4m9pc" }, boxShadow: { true: "Button_buttonStyle_boxShadow_true__fe4m9pd", false: "Button_buttonStyle_boxShadow_false__fe4m9pe" } }, defaultVariants: { size: "medium", variant: "primary", boxShadow: false }, compoundVariants: [[{ circle: true, size: "small" }, "Button_buttonStyle_compound_0__fe4m9pf"], [{ circle: true, size: "medium" }, "Button_buttonStyle_compound_1__fe4m9pg"], [{ circle: true, size: "large" }, "Button_buttonStyle_compound_2__fe4m9ph"], [{ boxShadow: true, size: "small" }, "Button_buttonStyle_compound_3__fe4m9pi"], [{ boxShadow: true, size: "medium" }, "Button_buttonStyle_compound_4__fe4m9pj"], [{ boxShadow: true, size: "large" }, "Button_buttonStyle_compound_5__fe4m9pk"], [{ circle: true, rounded: true }, "Button_buttonStyle_compound_6__fe4m9pl"]] });
+var childrenContainer = createRuntimeFn({ defaultClassName: "Button_childrenContainer__fe4m9pm", variantClassNames: { loading: { true: "Button_childrenContainer_loading_true__fe4m9pn" } }, defaultVariants: {}, compoundVariants: [] });
+var spinnerContainer = "Button_spinnerContainer__fe4m9po";
 
-export { button, buttonContent, buttonLoader };
+export { badgeContainer, buttonStyle, childrenContainer, spinnerContainer };

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

@@ -1,21 +1,9 @@
+import { TButtonRoot } from './Button.types.js';
 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;
+declare const Button: React.ForwardRefExoticComponent<{
+    badge?: string;
     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;
+} & TButtonRoot & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
 
-export { Button, TCgButton };
+export { Button };

package/dist/components/Button/Button.js

@@ -1,55 +1,46 @@
-import React from 'react';
-import { button, buttonContent, buttonLoader } from './Button.css.vanilla.js';
+import React, { forwardRef } from 'react';
 import { Spinner } from '../Spinner/Spinner.js';
+import { EButtonSize, EButtonVariant } from './Button.types.js';
+import { buttonStyle, childrenContainer, spinnerContainer, badgeContainer } from './Button.css.vanilla.js';
 
-const Button = ({
-  ariaLabel,
-  buttonRef,
-  children,
-  className,
-  disabled,
-  flexReverse,
-  fullWidth,
-  icon,
-  loading,
-  onClick,
-  round,
-  shouldPreventDefault = true,
-  size,
-  variant
-}) => {
-  return /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      "aria-label": ariaLabel,
-      className: `${button({
-        buttonPadding: size,
-        buttonRadius: round ? "round" : "default",
-        buttonShadow: variant === "ghost" || variant === "secondary" ? "none" : size === "small" ? "small" : "default",
-        buttonVariant: variant,
-        fullWidth
-      })} ${className}`,
-      disabled: disabled || loading,
-      onClick: (e) => {
-        shouldPreventDefault && e.preventDefault();
-        onClick && onClick();
-      },
-      ref: buttonRef
-    },
-    /* @__PURE__ */ React.createElement(
-      "div",
+const Button = forwardRef(
+  ({
+    badge,
+    children,
+    loading,
+    size = EButtonSize.medium,
+    type = "button",
+    variant = EButtonVariant.primary,
+    boxShadow,
+    circle,
+    fullWidth,
+    rounded,
+    className,
+    ...props
+  }, ref) => {
+    const spinnerSize = size === EButtonSize.small ? "small" : size === EButtonSize.large ? "large" : "medium";
+    return /* @__PURE__ */ React.createElement(
+      "button",
       {
-        className: buttonContent({
-          buttonFontSize: size === "small" ? "small" : "default",
-          flexReverse,
-          loading
-        })
+        disabled: loading,
+        ref,
+        type,
+        className: `${buttonStyle({
+          size,
+          variant,
+          boxShadow,
+          circle,
+          fullWidth,
+          rounded
+        })}${className ? ` ${className}` : ""}`,
+        ...props
       },
-      icon,
-      children
-    ),
-    loading && /* @__PURE__ */ React.createElement("div", { className: buttonLoader }, /* @__PURE__ */ React.createElement(Spinner, { size: size === "small" ? "small" : "medium" }))
-  );
-};
+      /* @__PURE__ */ React.createElement("div", { className: childrenContainer({ loading }) }, children),
+      loading && /* @__PURE__ */ React.createElement("span", { className: spinnerContainer }, /* @__PURE__ */ React.createElement(Spinner, { spinnerColor: "disabledGray", size: spinnerSize })),
+      badge && /* @__PURE__ */ React.createElement("div", { className: badgeContainer }, badge)
+    );
+  }
+);
+Button.displayName = "Button";
 
 export { Button };

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

@@ -0,0 +1,29 @@
+declare enum EButtonSize {
+    small = "small",
+    medium = "medium",
+    large = "large"
+}
+declare enum EButtonVariant {
+    primary = "primary",
+    secondary = "secondary",
+    tertiary = "tertiary",
+    prio = "prio",
+    ghost = "ghost"
+}
+declare type TButtonRoot = {
+    boxShadow?: boolean;
+    children?: React.ReactNode;
+    circle?: boolean;
+    fullWidth?: boolean;
+    rounded?: boolean;
+    size?: EButtonSize;
+    type?: 'button' | 'submit' | 'reset';
+    variant?: EButtonVariant;
+};
+declare type TButton = {
+    badge?: string;
+    loading?: boolean;
+} & TButtonRoot & React.ButtonHTMLAttributes<HTMLButtonElement>;
+declare type TChildrenContainer = Pick<TButton, 'loading'>;
+
+export { EButtonSize, EButtonVariant, TButton, TButtonRoot, TChildrenContainer };

package/dist/components/Button/Button.types.js

@@ -0,0 +1,16 @@
+var EButtonSize = /* @__PURE__ */ ((EButtonSize2) => {
+  EButtonSize2["small"] = "small";
+  EButtonSize2["medium"] = "medium";
+  EButtonSize2["large"] = "large";
+  return EButtonSize2;
+})(EButtonSize || {});
+var EButtonVariant = /* @__PURE__ */ ((EButtonVariant2) => {
+  EButtonVariant2["primary"] = "primary";
+  EButtonVariant2["secondary"] = "secondary";
+  EButtonVariant2["tertiary"] = "tertiary";
+  EButtonVariant2["prio"] = "prio";
+  EButtonVariant2["ghost"] = "ghost";
+  return EButtonVariant2;
+})(EButtonVariant || {});
+
+export { EButtonSize, EButtonVariant };

package/dist/components/Button/ButtonAsLink/ButtonAsLink.css.ts.vanilla.css

@@ -0,0 +1,12 @@
+.ButtonAsLink_buttonAsLink__1yp0jq60 {
+  background: none;
+  border: none;
+  color: #0069AE;
+  cursor: pointer;
+  display: inline-block;
+  font-size: 15px;
+  padding: 0;
+  text-align: left;
+  text-decoration: underline;
+  width: fit-content;
+}

package/dist/components/Button/ButtonAsLink/ButtonAsLink.css.vanilla.js

@@ -0,0 +1,5 @@
+import './ButtonAsLink.css.ts.vanilla.css';
+
+var buttonAsLink = "ButtonAsLink_buttonAsLink__1yp0jq60";
+
+export { buttonAsLink };

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

@@ -0,0 +1,9 @@
+import React from 'react';
+
+declare type TButtonAsLink = {
+    children: React.ReactNode;
+    type?: 'button' | 'submit' | 'reset';
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+declare const ButtonAsLink: ({ children, type, className, ...props }: TButtonAsLink) => JSX.Element;
+
+export { ButtonAsLink, TButtonAsLink };

package/dist/components/Button/ButtonAsLink/ButtonAsLink.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { buttonAsLink } from './ButtonAsLink.css.vanilla.js';
+
+const ButtonAsLink = ({
+  children,
+  type = "button",
+  className,
+  ...props
+}) => /* @__PURE__ */ React.createElement(
+  "button",
+  {
+    type,
+    className: `${buttonAsLink}${className ? ` ${className}` : ""}`,
+    ...props
+  },
+  children
+);
+
+export { ButtonAsLink };

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { TButtonRoot } from '../Button.types.js';
+
+declare const DivAsButton: ({ boxShadow, children, circle, fullWidth, rounded, size, variant, className, ...props }: TButtonRoot & React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+
+export { DivAsButton };

package/dist/components/Button/DivAsButton/DivAsButton.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { EButtonSize, EButtonVariant } from '../Button.types.js';
+import { buttonStyle } from '../Button.css.vanilla.js';
+
+const DivAsButton = ({
+  boxShadow,
+  children,
+  circle,
+  fullWidth,
+  rounded,
+  size = EButtonSize.medium,
+  variant = EButtonVariant.primary,
+  className,
+  ...props
+}) => /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    className: `${buttonStyle({
+      size,
+      variant,
+      boxShadow,
+      circle,
+      fullWidth,
+      rounded
+    })}${className ? ` ${className}` : ""}`,
+    ...props
+  },
+  children
+);
+
+export { DivAsButton };

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

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

package/dist/components/CartSummary/CartSummary.js

@@ -38,7 +38,7 @@ function CartSummary({
   const sumOfBags = calculateSummaryLine(bags);
   const sumOfGroceries = calculateSummaryLine(groceries);
   const sumOfCateredMeals = calculateSummaryLine(cateredMeals);
-  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: cartPaymentContainer }, cartSummary.title && /* @__PURE__ */ React.createElement("div", { className: cartSummaryTitle }, /* @__PURE__ */ React.createElement(H3, null, cartSummary.title), /* @__PURE__ */ React.createElement(BodyText, null, cartSummary.subTitle)), /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: cartPaymentContainer }, cartSummary.title && /* @__PURE__ */ React.createElement("div", { className: cartSummaryTitle }, /* @__PURE__ */ React.createElement(H3, null, cartSummary.title), /* @__PURE__ */ React.createElement(BodyText, null, cartSummary.subtitle)), /* @__PURE__ */ React.createElement(
     "div",
     {
       className: cartSummaryHeader({

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

@@ -0,0 +1,42 @@
+.Flex_flex__g9z2i20 {
+  display: flex;
+}
+.Flex_flex_alignItems_baseline__g9z2i21 {
+  align-items: baseline;
+}
+.Flex_flex_alignItems_center__g9z2i22 {
+  align-items: center;
+}
+.Flex_flex_alignItems_flex-start__g9z2i23 {
+  align-items: flex-start;
+}
+.Flex_flex_alignItems_flex-end__g9z2i24 {
+  align-items: flex-end;
+}
+.Flex_flex_alignItems_stretch__g9z2i25 {
+  align-items: stretch;
+}
+.Flex_flex_justifyContent_center__g9z2i26 {
+  justify-content: center;
+}
+.Flex_flex_justifyContent_flex-start__g9z2i27 {
+  justify-content: flex-start;
+}
+.Flex_flex_justifyContent_flex-end__g9z2i28 {
+  justify-content: flex-end;
+}
+.Flex_flex_justifyContent_space-between__g9z2i29 {
+  justify-content: space-between;
+}
+.Flex_flex_justifyContent_space-around__g9z2i2a {
+  justify-content: space-around;
+}
+.Flex_flex_justifyContent_space-evenly__g9z2i2b {
+  justify-content: space-evenly;
+}
+.Flex_flex_direction_row__g9z2i2c {
+  flex-direction: row;
+}
+.Flex_flex_direction_column__g9z2i2d {
+  flex-direction: column;
+}

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

@@ -0,0 +1,6 @@
+import './Flex.css.ts.vanilla.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var flex = createRuntimeFn({ defaultClassName: "Flex_flex__g9z2i20", variantClassNames: { alignItems: { baseline: "Flex_flex_alignItems_baseline__g9z2i21", center: "Flex_flex_alignItems_center__g9z2i22", "flex-start": "Flex_flex_alignItems_flex-start__g9z2i23", "flex-end": "Flex_flex_alignItems_flex-end__g9z2i24", stretch: "Flex_flex_alignItems_stretch__g9z2i25" }, justifyContent: { center: "Flex_flex_justifyContent_center__g9z2i26", "flex-start": "Flex_flex_justifyContent_flex-start__g9z2i27", "flex-end": "Flex_flex_justifyContent_flex-end__g9z2i28", "space-between": "Flex_flex_justifyContent_space-between__g9z2i29", "space-around": "Flex_flex_justifyContent_space-around__g9z2i2a", "space-evenly": "Flex_flex_justifyContent_space-evenly__g9z2i2b" }, direction: { row: "Flex_flex_direction_row__g9z2i2c", column: "Flex_flex_direction_column__g9z2i2d" } }, defaultVariants: { alignItems: "flex-start", justifyContent: "flex-start", direction: "column" }, compoundVariants: [] });
+
+export { flex };

package/dist/components/Flex/Flex.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+
+declare type TFlex = {
+    alignItems?: 'baseline' | 'center' | 'flex-start' | 'flex-end' | 'stretch';
+    gap?: number;
+    justifyContent?: 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
+    row?: boolean;
+} & React.HTMLAttributes<HTMLDivElement>;
+declare const Flex: ({ children, className, alignItems, gap, justifyContent, row, style, ...props }: TFlex) => JSX.Element;
+
+export { Flex, TFlex };

package/dist/components/Flex/Flex.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { flex } from './Flex.css.vanilla.js';
+
+const Flex = ({
+  children,
+  className,
+  alignItems,
+  gap = 0,
+  justifyContent = "flex-start",
+  row,
+  style,
+  ...props
+}) => /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    ...props,
+    className: `${flex({
+      alignItems: alignItems ?? (row ? "center" : "flex-start"),
+      justifyContent,
+      direction: row ? "row" : "column"
+    })}${className ? ` ${className}` : ""}`,
+    style: { ...style, gap }
+  },
+  children
+);
+
+export { Flex };

package/dist/components/Header/Header.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Button } from '../Button/Button.js';
+import { EButtonVariant } from '../Button/Button.types.js';
 import { Icons } from '@citygross/icons_v2';
 import { wrapper, headerWrapper, headerContainer, mobileLogo, desktopLogo, headerButtonContainer, menuIconContainer } from './Header.css.vanilla.js';
 
@@ -9,14 +10,7 @@ const Header = ({
   onMenuClick,
   sideModal,
   headerLink
-}) => /* @__PURE__ */ React.createElement("div", { className: wrapper }, headerLink && headerLink, /* @__PURE__ */ React.createElement("div", { className: headerWrapper }, /* @__PURE__ */ React.createElement("div", { className: headerContainer }, /* @__PURE__ */ React.createElement("span", { className: mobileLogo }, /* @__PURE__ */ React.createElement(Icons.LogoFlat, { small: true })), /* @__PURE__ */ React.createElement("span", { className: desktopLogo }, /* @__PURE__ */ React.createElement(Icons.Logo, null)), /* @__PURE__ */ React.createElement("div", { className: headerButtonContainer }, btnLabel && /* @__PURE__ */ React.createElement(
-  Button,
-  {
-    onClick: btnOnClick,
-    variant: "secondary"
-  },
-  btnLabel
-), /* @__PURE__ */ React.createElement(
+}) => /* @__PURE__ */ React.createElement("div", { className: wrapper }, headerLink && headerLink, /* @__PURE__ */ React.createElement("div", { className: headerWrapper }, /* @__PURE__ */ React.createElement("div", { className: headerContainer }, /* @__PURE__ */ React.createElement("span", { className: mobileLogo }, /* @__PURE__ */ React.createElement(Icons.LogoFlat, { small: true })), /* @__PURE__ */ React.createElement("span", { className: desktopLogo }, /* @__PURE__ */ React.createElement(Icons.Logo, null)), /* @__PURE__ */ React.createElement("div", { className: headerButtonContainer }, btnLabel && /* @__PURE__ */ React.createElement(Button, { onClick: btnOnClick, variant: EButtonVariant.secondary }, btnLabel), /* @__PURE__ */ React.createElement(
   "div",
   {
     className: menuIconContainer,

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

@@ -10,7 +10,7 @@ declare type TModal = {
     isConfirm?: boolean;
     onBackdropClick?: () => void;
     querySelector?: string;
-    subTitle?: string;
+    subtitle?: string;
     title?: string;
 };
 declare const Modal: React.ForwardRefExoticComponent<TModal & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Modal/Modal.js

@@ -16,7 +16,7 @@ const Modal = forwardRef(
     isConfirm,
     onBackdropClick,
     querySelector = "#root",
-    subTitle,
+    subtitle,
     title
   }, ref) => {
     const domSafe = typeof document !== "undefined";
@@ -46,7 +46,7 @@ const Modal = forwardRef(
               onClick: () => onBackdropClick && onBackdropClick()
             },
             /* @__PURE__ */ React.createElement(Icons.Cross, null)
-          )), /* @__PURE__ */ React.createElement(BodyText, null, subTitle)),
+          )), /* @__PURE__ */ React.createElement(BodyText, null, subtitle)),
           children && /* @__PURE__ */ React.createElement("div", { className: childrenWrapper }, children),
           footer && /* @__PURE__ */ React.createElement(Fragment, null, /* @__PURE__ */ React.createElement(Spacer, null), /* @__PURE__ */ React.createElement("div", { className: footerWrapper }, footer))
         )

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

@@ -1,16 +1,6 @@
-.Pagination_paginationButtonWrapper__139elee0 {
-  padding: 0 4px;
-}
-.Pagination_leftPaginationButtonWrapper__139elee1 {
-  padding: 0 4px;
-  width: 44px;
-}
-.Pagination_flex__139elee2 {
+.Pagination_paginationContainer__139elee0 {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
+  gap: 24px;
   justify-content: center;
-}
-.Pagination_paginationButton__139elee3 {
-  width: 32px;
-  height: 32px;
 }

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

@@ -1,8 +1,5 @@
 import './Pagination.css.ts.vanilla.css';
 
-var flex = "Pagination_flex__139elee2";
-var leftPaginationButtonWrapper = "Pagination_leftPaginationButtonWrapper__139elee1";
-var paginationButton = "Pagination_paginationButton__139elee3";
-var paginationButtonWrapper = "Pagination_paginationButtonWrapper__139elee0";
+var paginationContainer = "Pagination_paginationContainer__139elee0";
 
-export { flex, leftPaginationButtonWrapper, paginationButton, paginationButtonWrapper };
+export { paginationContainer };

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

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

package/dist/components/Pagination/Pagination.js

@@ -1,82 +1,66 @@
-import React, { useState } from 'react';
-import { Box } from '../Box/Box.js';
-import { flex, leftPaginationButtonWrapper, paginationButton, paginationButtonWrapper } from './Pagination.css.vanilla.js';
+import React from 'react';
+import { Icons } from '@citygross/icons_v2';
+import { palette } from '@citygross/design-tokens_v2';
+import { BodyText } from '../../typography/BodyText/BodyText.js';
 import { Button } from '../Button/Button.js';
+import { EButtonVariant } from '../Button/Button.types.js';
+import { paginationContainer } from './Pagination.css.vanilla.js';
 
-function createPagination(totalItems, itemsPerPage, numOfPaginationsToShow) {
-  const amountOfPages = Math.ceil((totalItems || 0) / (itemsPerPage ?? 6));
-  if (amountOfPages === 0 || itemsPerPage === 0) {
-    return [];
-  }
-  const pagination = [];
-  let block = [];
-  let counter = 0;
-  new Array(amountOfPages).fill(0).map((_, index) => {
-    if (counter < (numOfPaginationsToShow ?? 4) - 1) {
-      counter++;
-      block.push(index);
-      if (index === amountOfPages - 1) {
-        pagination.push(block);
-      }
-    } else {
-      counter = 0;
-      block.push(index);
-      pagination.push(block);
-      block = [];
-    }
-    return null;
-  });
-  return pagination;
-}
 function Pagination({
-  totalItems,
   currentPage,
   fetchItems,
-  itemsPerPage,
+  itemsPerPage = 10,
+  onPageChange,
+  pageLabel = "Sida",
   setPage,
-  numOfPaginationsToShow = 4,
-  rightIcon,
-  leftIcon
+  totalItems
 }) {
-  const [currentIndex, setIndex] = useState(
-    Math.floor((currentPage - 1) / numOfPaginationsToShow)
-  );
-  const pagination = createPagination(
-    totalItems,
-    itemsPerPage,
-    numOfPaginationsToShow
-  );
-  return /* @__PURE__ */ React.createElement(Box, null, pagination && pagination.length > 0 && /* @__PURE__ */ React.createElement("div", { className: flex }, /* @__PURE__ */ React.createElement("div", { className: leftPaginationButtonWrapper }, currentIndex > 0 && /* @__PURE__ */ React.createElement(
+  const totalPages = Math.ceil((totalItems || 0) / itemsPerPage);
+  const hasNextPage = currentPage < totalPages;
+  const hasPrevPage = currentPage > 1;
+  const handlePageChange = (page) => {
+    setPage?.(page);
+    fetchItems(page);
+    onPageChange?.(page);
+  };
+  if (totalPages === 0) return null;
+  return /* @__PURE__ */ React.createElement("nav", { "aria-label": "Paginering", className: paginationContainer }, /* @__PURE__ */ React.createElement(
     Button,
     {
-      variant: "secondary",
-      size: "icon",
-      onClick: () => {
-        setPage && setPage(currentPage - 1);
-        setIndex(currentIndex - 1);
-      },
-      className: paginationButton
+      "aria-label": "F\xF6reg\xE5ende sida",
+      circle: true,
+      disabled: !hasPrevPage,
+      onClick: () => handlePageChange(currentPage - 1),
+      variant: hasPrevPage ? EButtonVariant.secondary : EButtonVariant.ghost
     },
-    leftIcon
-  )), pagination?.[currentIndex]?.map((page) => /* @__PURE__ */ React.createElement("div", { className: paginationButtonWrapper, key: page }, /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      size: "icon",
-      variant: currentPage === page + 1 ? "tertiary" : "secondary",
-      className: paginationButton,
-      onClick: () => fetchItems(page + 1)
-    },
-    page + 1
-  ))), pagination.length > 1 && currentIndex < pagination.length - 1 && rightIcon && /* @__PURE__ */ React.createElement("div", { className: paginationButtonWrapper }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(
+      Icons.ChevronLeft,
+      {
+        "aria-hidden": "true",
+        color: hasPrevPage ? palette.darkest : palette.placeholder,
+        height: 20,
+        width: 20
+      }
+    )
+  ), /* @__PURE__ */ React.createElement(BodyText, { "aria-atomic": "true", "aria-live": "polite", color: "darkest" }, pageLabel, " ", currentPage, " av ", totalPages), /* @__PURE__ */ React.createElement(
     Button,
     {
-      size: "icon",
-      variant: "secondary",
-      onClick: () => setIndex(currentIndex + 1),
-      className: paginationButton
+      "aria-label": "N\xE4sta sida",
+      circle: true,
+      variant: hasNextPage ? EButtonVariant.secondary : EButtonVariant.ghost,
+      disabled: !hasNextPage,
+      onClick: () => handlePageChange(currentPage + 1)
     },
-    rightIcon
-  ))));
+    /* @__PURE__ */ React.createElement(
+      Icons.ChevronRight,
+      {
+        "aria-hidden": "true",
+        color: hasNextPage ? palette.darkest : palette.placeholder,
+        height: 20,
+        width: 20
+      }
+    )
+  ));
 }
 
 export { Pagination };

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

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

@@ -1,8 +1,8 @@
 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 fontFamily: Record<"display" | "code" | "primary", string>;
+declare const fontSize: Record<"code" | "xs" | "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>;

package/dist/index.d.ts

@@ -1,13 +1,17 @@
-export { AlertBox, TAlertBox } from './components/AlertBox/AlertBox.js';
 export { Accordion, TAccordion } from './components/Accordion/Accordion.js';
+export { AlertBox, TAlertBox } from './components/AlertBox/AlertBox.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 { Button } from './components/Button/Button.js';
+export { EButtonSize, EButtonVariant, TButton, TButtonRoot, TChildrenContainer } from './components/Button/Button.types.js';
+export { ButtonAsLink, TButtonAsLink } from './components/Button/ButtonAsLink/ButtonAsLink.js';
+export { DivAsButton } from './components/Button/DivAsButton/DivAsButton.js';
 export { CartItemSummary, TCartItemSummary, TSummaryItem } from './components/CartItemSummary/CartItemSummary.js';
 export { CartSummary, TCartSummary } from './components/CartSummary/CartSummary.js';
-export { EmptyBox, TEmptyBox } from './components/EmptyBox/EmptyBox.js';
 export { Divider, TDivider } from './components/Divider/Divider.js';
 export { Dot, TDot } from './components/Dot/Dot.js';
+export { EmptyBox, TEmptyBox } from './components/EmptyBox/EmptyBox.js';
+export { Flex, TFlex } from './components/Flex/Flex.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';
@@ -24,12 +28,12 @@ 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 { H1, TH1 } from './typography/H1/H1.js';
-export { H2, TH2 } from './typography/H2/H2.js';
-export { H3, TH3 } from './typography/H3/H3.js';
 export { TBodyTextSizeKeys, TTextAlign, TTextDecoration, bodyTextSize, fontFamily, fontSize, fontWeight, lineHeight, textAlign, textDecoration } from './cssUtils/typography.css.js';
 export { backgroundColor, color, hoverBackgroundColor, hoverColor } from './cssUtils/color.css.js';
 export { borderColor, borderRadius } from './cssUtils/border.css.js';
 export { margin, marginBottomDynamic, marginHorizontal, marginVertical, padding, paddingHorizontal, paddingVertical } from './cssUtils/spacings.css.js';
 export { customToCssMapper, spacingsToCssMapper } from './cssUtils/utils.js';
+export { BodyText, TBodyText } from './typography/BodyText/BodyText.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';

package/dist/index.js

@@ -1,13 +1,17 @@
-export { AlertBox } from './components/AlertBox/AlertBox.js';
 export { Accordion } from './components/Accordion/Accordion.js';
+export { AlertBox } from './components/AlertBox/AlertBox.js';
 export { Box } from './components/Box/Box.js';
 export { BoxArrow } from './components/BoxArrow/BoxArrow.js';
 export { Button } from './components/Button/Button.js';
+export { EButtonSize, EButtonVariant } from './components/Button/Button.types.js';
+export { ButtonAsLink } from './components/Button/ButtonAsLink/ButtonAsLink.js';
+export { DivAsButton } from './components/Button/DivAsButton/DivAsButton.js';
 export { CartItemSummary } from './components/CartItemSummary/CartItemSummary.js';
 export { CartSummary } from './components/CartSummary/CartSummary.js';
-export { EmptyBox } from './components/EmptyBox/EmptyBox.js';
 export { Divider } from './components/Divider/Divider.js';
 export { Dot } from './components/Dot/Dot.js';
+export { EmptyBox } from './components/EmptyBox/EmptyBox.js';
+export { Flex } from './components/Flex/Flex.js';
 export { FormControl, TScreenWidth } from './components/FormControl/FormControl.js';
 export { Header } from './components/Header/Header.js';
 export { HeaderCheckout } from './components/Header/HeaderCheckout.js';
@@ -24,12 +28,12 @@ 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 { H1 } from './typography/H1/H1.js';
-export { H2 } from './typography/H2/H2.js';
-export { H3 } from './typography/H3/H3.js';
 export { bodyTextSize, fontFamily, fontSize, fontWeight, lineHeight, textAlign, textDecoration } from './cssUtils/typography.css.vanilla.js';
 export { backgroundColor, color, hoverBackgroundColor, hoverColor } from './cssUtils/color.css.vanilla.js';
 export { borderColor, borderRadius } from './cssUtils/border.css.vanilla.js';
 export { margin, marginBottomDynamic, marginHorizontal, marginVertical, padding, paddingHorizontal, paddingVertical } from './cssUtils/spacings.css.vanilla.js';
 export { customToCssMapper, spacingsToCssMapper } from './cssUtils/utils.js';
+export { BodyText } from './typography/BodyText/BodyText.js';
+export { H1 } from './typography/H1/H1.js';
+export { H2 } from './typography/H2/H2.js';
+export { H3 } from './typography/H3/H3.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citygross/components_v2",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "license": "ISC",
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -28,17 +28,17 @@
     "access": "public"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^6.3.4",
-    "@storybook/addon-actions": "^6.3.4",
-    "@storybook/addon-controls": "^6.3.4",
-    "@storybook/addon-docs": "^6.3.4",
-    "@storybook/addon-essentials": "^6.3.4",
-    "@storybook/addon-links": "^6.3.4",
-    "@storybook/addon-viewport": "^6.3.4",
-    "@storybook/addons": "^6.3.4",
+    "@storybook/addon-a11y": "^6.5.16",
+    "@storybook/addon-actions": "^6.5.16",
+    "@storybook/addon-controls": "^6.5.16",
+    "@storybook/addon-docs": "^6.5.16",
+    "@storybook/addon-essentials": "^6.5.16",
+    "@storybook/addon-links": "^6.5.16",
+    "@storybook/addon-viewport": "^6.5.16",
+    "@storybook/addons": "^6.5.16",
     "@storybook/builder-webpack5": "^6.5.16",
     "@storybook/manager-webpack5": "^6.5.16",
-    "@storybook/react": "^6.3.4",
+    "@storybook/react": "^6.5.16",
     "@storybook/storybook-deployer": "^2.8.7",
     "@testing-library/jest-dom": "^5.10.1",
     "@testing-library/react": "^12.0.0",
@@ -77,5 +77,5 @@
     "react-slick": "^0.30.1",
     "slick-carousel": "^1.8.1"
   },
-  "gitHead": "9689ed1055a89211b68777d29774bc3be1801ecb"
+  "gitHead": "78d618c78176dc6c6b96c3cfaacc02b2247cb914"
 }