@citygross/components_v2 0.1.5 → 0.1.7

package/dist/assets/logo.js

@@ -0,0 +1,3 @@
+var logo = "<svg width=\"106\" height=\"81\" viewBox=\"0 0 106 81\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<rect y=\"0.5\" width=\"106\" height=\"80\" fill=\"#FFE522\"/>\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M23.5214 18.8162V20.7756H27.9219V18.9074C27.9219 15.1253 25.7792 11.9584 21.3787 11.9584C16.7478 11.9584 14.6282 14.8747 14.6282 18.4517V31.5067C14.6282 35.0837 16.7708 38 21.3787 38C25.8023 38 27.9219 35.0837 27.9219 31.5067V28.5904H23.5214V31.6434C23.5214 33.3066 22.9915 34.218 21.4018 34.218C19.6277 34.218 19.0517 33.3066 19.0517 31.4156V18.5656C19.0517 16.6746 19.6277 15.7632 21.4018 15.7632C22.5307 15.7632 23.5214 16.6746 23.5214 18.8162ZM35.0411 37.6583H30.6405V12.3229H35.0411V37.6583ZM37.345 16.105H41.6073V37.6583H46.0078V16.105H50.2701V12.3229H37.345V16.105ZM60.8221 37.6583H56.4216V27.1323L51.0995 12.3229H55.5691L58.6564 21.9832H58.7255L61.6746 12.3229H66.1442L60.8221 27.1323V37.6583Z\" fill=\"#0072BB\"/>\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M28.2817 49.4429V51.3095L23.8621 51.3323V49.3746C23.8621 47.2348 22.8723 46.3243 21.7444 46.3243C19.972 46.3243 19.3965 47.2348 19.3965 49.1242V61.963C19.3965 63.8523 19.972 64.7629 21.7444 64.7629C23.3557 64.7629 23.8851 63.8296 23.8851 62.1906V58.4801H21.9286V55.5208H28.2817V62.0312C28.2817 65.6051 26.141 68.5189 21.7444 68.5189C17.1177 68.5189 15 65.6051 15 62.0312V48.9877C15 45.4138 17.1407 42.5 21.7444 42.5C26.164 42.5 28.2817 45.6642 28.2817 49.4429ZM47.295 48.9877C47.295 45.4138 49.4357 42.5 54.0394 42.5C58.6431 42.5 60.7838 45.4138 60.7838 48.9877V62.0312C60.7838 65.6051 58.6661 68.5189 54.0394 68.5189C49.4357 68.5189 47.295 65.6051 47.295 62.0312V48.9877ZM35.4865 68.1774H31.0899V42.8415H37.2589C42.1849 42.8415 44.7169 44.913 44.7169 50.3079C44.7169 54.3826 43.1286 56.0216 41.6324 56.6818L45.3614 68.1547H40.8958L37.7653 57.6606C37.1899 57.7289 36.2691 57.7744 35.4865 57.7744V68.1774ZM35.4865 54.2233H37.0517C39.4226 54.2233 40.3204 53.3355 40.3204 50.3307C40.3204 47.3259 39.4226 46.4381 37.0517 46.4381H35.4865V54.2233ZM54.0394 64.7401C52.267 64.7401 51.6915 63.8296 51.6915 61.9402V49.1015C51.6915 47.2121 52.267 46.3015 54.0394 46.3015C55.8118 46.3015 56.3873 47.2121 56.3873 49.1015V61.9402C56.3873 63.8296 55.8118 64.7401 54.0394 64.7401ZM69.2086 46.3015C70.1984 46.3015 71.3724 46.9162 71.5565 49.1015C71.5565 49.1015 75.7229 48.6462 75.7229 48.669C75.3315 45.0951 73.2138 42.5228 69.6229 42.5228C65.2955 42.5228 62.8095 44.7991 62.8095 48.8283C62.8095 52.7954 65.475 54.9961 67.8937 56.9929C69.9023 58.6512 71.7407 60.1689 71.7407 62.441C71.7407 63.9662 70.7048 64.7629 69.1856 64.7629C67.7584 64.7629 66.7456 63.5109 66.5615 60.9386L62.3721 61.5304C62.5563 65.3092 64.9041 68.5417 68.9784 68.5417C73.0988 68.5417 75.93 66.2198 75.93 62.054C75.93 58.2047 73.1484 55.8656 70.6899 53.7981C68.7431 52.1609 66.9988 50.6941 66.9988 48.7828C66.9988 47.2121 67.7815 46.3015 69.2086 46.3015ZM86.9099 49.1015C86.7257 46.9162 85.5518 46.3015 84.562 46.3015C83.1348 46.3015 82.3522 47.2121 82.3522 48.7828C82.3522 50.6941 84.0964 52.1609 86.0433 53.7981C88.5018 55.8656 91.2834 58.2047 91.2834 62.054C91.2834 66.2198 88.4521 68.5417 84.3318 68.5417C80.2575 68.5417 77.9096 65.3092 77.7255 61.5304L81.9149 60.9386C82.099 63.5109 83.1118 64.7629 84.539 64.7629C86.0582 64.7629 87.094 63.9662 87.094 62.441C87.094 60.1689 85.2557 58.6512 83.2471 56.9929C80.8284 54.9961 78.1628 52.7954 78.1628 48.8283C78.1628 44.7991 80.6488 42.5228 84.9763 42.5228C88.5672 42.5228 90.6849 45.0951 91.0762 48.669C91.0992 48.6462 86.9099 49.1015 86.9099 49.1015Z\" fill=\"#0072BB\"/>\n</svg>";
+
+export { logo as default };

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

@@ -5,6 +5,6 @@ declare type TAccordion = {
     open: boolean;
     className?: string;
 };
-declare const Accordion: ({ children, open, className }: TAccordion) => JSX.Element;
+declare const Accordion: ({ children, open, className }: TAccordion) => React.JSX.Element;
 
 export { Accordion, TAccordion };

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

@@ -12,6 +12,6 @@ declare type TAlertBox = {
     padding?: TSpacingKeys;
     withArrow?: boolean;
 };
-declare function AlertBox({ arrowPlacement, arrowSpacing, background, borderColor, children, icon, iconMinWidth, padding, withArrow }: TAlertBox): JSX.Element;
+declare function AlertBox({ arrowPlacement, arrowSpacing, background, borderColor, children, icon, iconMinWidth, padding, withArrow }: TAlertBox): React.JSX.Element;
 
 export { AlertBox, TAlertBox };

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

@@ -14,6 +14,6 @@ declare type TBox = {
     marginVertical?: TSpacingKeys;
     children: React.ReactNode;
 };
-declare function Box({ background, borderColor, borderRadius, hoverBackgroundColor, padding, paddingVertical, paddingHorizontal, margin, marginHorizontal, marginVertical, children }: TBox): JSX.Element;
+declare function Box({ background, borderColor, borderRadius, hoverBackgroundColor, padding, paddingVertical, paddingHorizontal, margin, marginHorizontal, marginVertical, children }: TBox): React.JSX.Element;
 
 export { Box, TBox };

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { THardSpacingKeys, TPaletteKeys } from '@citygross/design-tokens_v2';
 
 declare type TBoxArrow = {
@@ -5,6 +6,6 @@ declare type TBoxArrow = {
     arrowSpacing?: THardSpacingKeys;
     background?: TPaletteKeys;
 };
-declare const BoxArrow: ({ arrowPlacement, arrowSpacing, background }: TBoxArrow) => JSX.Element;
+declare const BoxArrow: ({ arrowPlacement, arrowSpacing, background }: TBoxArrow) => React.JSX.Element;
 
 export { BoxArrow, TBoxArrow };

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

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

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

@@ -1,6 +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;
+declare const DivAsButton: ({ boxShadow, children, circle, fullWidth, rounded, size, variant, className, ...props }: TButtonRoot & React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
 
 export { DivAsButton };

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

@@ -1,3 +1,5 @@
+import React from 'react';
+
 declare type TSummaryItem = {
     amount: number;
     cancelledAmount: number;
@@ -10,6 +12,6 @@ declare type TCartItemSummary = {
     withParenthesis?: boolean;
     unit?: string;
 };
-declare const CartItemSummary: ({ product, withParenthesis, unit }: TCartItemSummary) => JSX.Element;
+declare const CartItemSummary: ({ product, withParenthesis, unit }: TCartItemSummary) => React.JSX.Element;
 
 export { CartItemSummary, TCartItemSummary, TSummaryItem };

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { TSummaryItem } from '../CartItemSummary/CartItemSummary.js';
 
 declare type TCartSummary = {
@@ -21,6 +22,6 @@ declare type TCartSummary = {
     totalLabel?: string;
     totalTaxAmount: number;
 };
-declare function CartSummary({ saveLabel, shippingLabel, totalLabel, taxLabel, ...cartSummary }: TCartSummary): JSX.Element;
+declare function CartSummary({ saveLabel, shippingLabel, totalLabel, taxLabel, ...cartSummary }: TCartSummary): React.JSX.Element;
 
 export { CartSummary, TCartSummary };

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

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

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

@@ -5,6 +5,6 @@ declare type TEmptyBox = {
     icon?: React.ReactNode;
     description?: React.ReactNode;
 };
-declare const EmptyBox: ({ title, description, icon }: TEmptyBox) => JSX.Element;
+declare const EmptyBox: ({ title, description, icon }: TEmptyBox) => React.JSX.Element;
 
 export { EmptyBox, TEmptyBox };

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

@@ -6,6 +6,6 @@ declare type TFlex = {
     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;
+declare const Flex: ({ children, className, alignItems, gap, justifyContent, row, style, ...props }: TFlex) => React.JSX.Element;
 
 export { Flex, TFlex };

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

@@ -12,6 +12,6 @@ declare type TFormControl = {
     isValid?: boolean;
     screenWidth?: '1/2' | '1/3' | '1/4';
 };
-declare function FormControl({ title, children, errorMessage, isValid, screenWidth }: TFormControl): JSX.Element;
+declare function FormControl({ title, children, errorMessage, isValid, screenWidth }: TFormControl): React.JSX.Element;
 
 export { FormControl, TFormControl, TScreenWidth };

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

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

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

@@ -6,6 +6,6 @@ declare type THeaderCheckout = {
     headerLinkAriaLabel?: string;
     headerLinkOnClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
 };
-declare const HeaderCheckout: ({ headerLinkText, headerLinkHref, headerLinkAriaLabel, headerLinkOnClick }: THeaderCheckout) => JSX.Element;
+declare const HeaderCheckout: ({ headerLinkText, headerLinkHref, headerLinkAriaLabel, headerLinkOnClick }: THeaderCheckout) => React.JSX.Element;
 
 export { HeaderCheckout, THeaderCheckout };

package/dist/components/Header/HeaderCheckout.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icons } from '@citygross/icons_v2';
+import logo from '../../assets/logo.js';
 import { wrapper, headerWrapper, headerContainer, logoContainer, headerLinkStyles } from './HeaderCheckout.css.vanilla.js';
 
 const HeaderCheckout = ({
@@ -7,7 +7,7 @@ const HeaderCheckout = ({
   headerLinkHref = "#",
   headerLinkAriaLabel,
   headerLinkOnClick
-}) => /* @__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" })), headerLinkText && /* @__PURE__ */ React.createElement(
+}) => /* @__PURE__ */ React.createElement("header", { className: wrapper }, /* @__PURE__ */ React.createElement("nav", { className: headerWrapper }, /* @__PURE__ */ React.createElement("div", { className: headerContainer }, /* @__PURE__ */ React.createElement("a", { href: "/", className: logoContainer }, /* @__PURE__ */ React.createElement("img", { src: logo, alt: "City Gross logo", width: 64, height: 48, role: "img" })), headerLinkText && /* @__PURE__ */ React.createElement(
   "a",
   {
     href: headerLinkHref,

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

@@ -11,6 +11,6 @@ declare type TInput = InputHTMLAttributes<HTMLInputElement> & {
 };
 declare function Input({ icon, iconOnClick, flexGrow, inValid, fontSize, inputSize, inputRef, ...props }: TInput & {
     inputRef?: React.RefObject<HTMLInputElement>;
-}): JSX.Element;
+}): React.JSX.Element;
 
 export { Input, TInput };

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

@@ -7,6 +7,6 @@ declare type TLinkButton = {
     onClick?: () => void;
     ariaLabel?: string;
 };
-declare const LinkButton: ({ onClick, children, variant, ariaLabel, disabled }: TLinkButton) => JSX.Element;
+declare const LinkButton: ({ onClick, children, variant, ariaLabel, disabled }: TLinkButton) => React.JSX.Element;
 
 export { LinkButton, TLinkButton };

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

@@ -24,6 +24,6 @@ declare type TListItem = {
     alignment?: EListItemAlignment;
     textColor?: TPaletteKeys;
 };
-declare function ListItem({ item, loading, isSmall, fallBackImage, imageAutoHeight, boldHeader, smallSkeleton, children, alignment, textColor, usedInSearch }: TListItem): JSX.Element;
+declare function ListItem({ item, loading, isSmall, fallBackImage, imageAutoHeight, boldHeader, smallSkeleton, children, alignment, textColor, usedInSearch }: TListItem): React.JSX.Element;
 
 export { EListItemAlignment, ListItem, TItem, TListItem };

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

@@ -8,6 +8,6 @@ declare type TMobileOrderLine = {
     cancelled?: boolean;
     withBorder?: boolean;
 };
-declare const MobileOrderLine: ({ deliveryString, orderAmount, orderStatus, orderNumber, cancelled, withBorder }: TMobileOrderLine) => JSX.Element;
+declare const MobileOrderLine: ({ deliveryString, orderAmount, orderStatus, orderNumber, cancelled, withBorder }: TMobileOrderLine) => React.JSX.Element;
 
 export { MobileOrderLine };

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

@@ -1,3 +1,5 @@
+import React from 'react';
+
 declare type TPagination = {
     currentPage: number;
     fetchItems: (page: number) => void;
@@ -7,6 +9,6 @@ declare type TPagination = {
     setPage?: (page: number) => void;
     totalItems?: number;
 };
-declare function Pagination({ currentPage, fetchItems, itemsPerPage, onPageChange, pageLabel, setPage, totalItems }: TPagination): JSX.Element;
+declare function Pagination({ currentPage, fetchItems, itemsPerPage, onPageChange, pageLabel, setPage, totalItems }: TPagination): React.JSX.Element;
 
 export { Pagination, TPagination };

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

@@ -5,6 +5,6 @@ declare type TRippleContainer = {
     color?: TPaletteKeys;
     children: React.ReactNode;
 };
-declare function RippleContainer({ color, children }: TRippleContainer): JSX.Element;
+declare function RippleContainer({ color, children }: TRippleContainer): React.JSX.Element;
 
 export { RippleContainer, TRippleContainer };

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

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

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { TPaletteKeys } from '@citygross/design-tokens_v2';
 
 declare type TTimelineItem = {
@@ -20,6 +21,6 @@ declare type TTimeline = {
     color?: TPaletteKeys;
     reversed?: boolean;
 };
-declare function Timeline({ items, title, mobileTitle, current, dotColor, dotActiveColor, dotShadow, borderStyle, borderColor, color, reversed, completedColor }: TTimeline): JSX.Element;
+declare function Timeline({ items, title, mobileTitle, current, dotColor, dotActiveColor, dotShadow, borderStyle, borderColor, color, reversed, completedColor }: TTimeline): React.JSX.Element;
 
 export { TTimeline, TTimelineItem, Timeline };

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" | "code" | "primary", string>;
-declare const fontSize: Record<"code" | "xs" | "s1" | "s2" | "s3" | "s4" | "m1" | "m2" | "l1", string>;
+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>;

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

@@ -10,6 +10,6 @@ declare type TBodyText = {
     textAlign?: TTextAlign;
     textDecoration?: TTextDecoration;
 } & React.ComponentPropsWithoutRef<'p'>;
-declare const BodyText: ({ children, className, color, fontWeight, size, textAlign, textDecoration, ...props }: TBodyText) => JSX.Element;
+declare const BodyText: ({ children, className, color, fontWeight, size, textAlign, textDecoration, ...props }: TBodyText) => React.JSX.Element;
 
 export { BodyText, TBodyText };

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

@@ -8,6 +8,6 @@ declare type TH1 = {
     fontWeight?: TFontWeightKeys;
     className?: string;
 };
-declare const H1: ({ children, color, fontWeight, lineThrough, className }: TH1) => JSX.Element;
+declare const H1: ({ children, color, fontWeight, lineThrough, className }: TH1) => React.JSX.Element;
 
 export { H1, TH1 };

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

@@ -8,6 +8,6 @@ declare type TH2 = {
     fontWeight?: TFontWeightKeys;
     className?: string;
 };
-declare const H2: ({ children, color, fontWeight, lineThrough, className }: TH2) => JSX.Element;
+declare const H2: ({ children, color, fontWeight, lineThrough, className }: TH2) => React.JSX.Element;
 
 export { H2, TH2 };

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

@@ -8,6 +8,6 @@ declare type TH3 = {
     fontWeight?: TFontWeightKeys;
     className?: string;
 };
-declare const H3: ({ children, className, color, fontWeight, lineThrough }: TH3) => JSX.Element;
+declare const H3: ({ children, className, color, fontWeight, lineThrough }: TH3) => React.JSX.Element;
 
 export { H3, TH3 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citygross/components_v2",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "license": "ISC",
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -40,42 +40,42 @@
     "@storybook/manager-webpack5": "^6.5.16",
     "@storybook/react": "^6.5.16",
     "@storybook/storybook-deployer": "^2.8.7",
-    "@testing-library/jest-dom": "^5.10.1",
-    "@testing-library/react": "^12.0.0",
-    "@types/jest": "^26.0.0",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
+    "@testing-library/jest-dom": "^5.16.0",
+    "@testing-library/react": "^14.0.0",
+    "@types/jest": "^29.0.0",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.1",
     "@types/react-slick": "^0.23.13",
     "@vanilla-extract/rollup-plugin": "1.3.10",
     "@vanilla-extract/webpack-plugin": "2.3.14",
     "awesome-typescript-loader": "^5.2.1",
     "copyfiles": "^2.4.1",
-    "jest": "^27.0.6",
-    "react": "^17.0.1",
+    "jest": "^29.0.0",
+    "react": "^18.3.1",
     "react-docgen-typescript-loader": "^3.7.2",
-    "react-dom": "^17.0.1",
-    "ts-jest": "^27.0.3",
+    "react-dom": "^18.3.1",
+    "ts-jest": "^29.0.0",
     "ts-loader": "^9.2.3",
     "webpack-merge": "6.0.1"
   },
   "peerDependencies": {
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "dependencies": {
     "@citygross/design-tokens_v2": "^0.0.7",
-    "@citygross/icons_v2": "^0.0.5",
-    "@citygross/react-use-bg-wizard": "^0.0.8",
+    "@citygross/icons_v2": "^0.0.6",
+    "@citygross/react-use-bg-wizard": "^0.0.13",
     "@citygross/typography": "^0.0.89",
-    "@citygross/utils": "^0.0.44",
+    "@citygross/utils": "^0.0.45",
     "@vanilla-extract/css": "^1.14.1",
     "@vanilla-extract/css-utils": "^0.1.3",
     "@vanilla-extract/recipes": "^0.5.1",
-    "framer-motion": "^4.1.17",
     "moment": "^2.29.1",
+    "motion": "^12.34.3",
     "react-loading-skeleton": "^2.2.0",
     "react-slick": "^0.30.1",
     "slick-carousel": "^1.8.1"
   },
-  "gitHead": "55460ca22865ed2947fa166d15a7f36940a28efc"
+  "gitHead": "aa688b12b462f1d9c1fc0457096faa2d1e43169c"
 }