@citygross/components_v2 0.1.4 → 0.1.6

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/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

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

package/dist/typography/BodyText/BodyText.js

@@ -3,12 +3,13 @@ import { bodyText } from './BodyText.css.vanilla.js';
 
 const BodyText = ({
   children,
+  className,
   color,
   fontWeight,
-  textDecoration,
   size,
   textAlign,
-  className
+  textDecoration,
+  ...props
 }) => {
   return /* @__PURE__ */ React.createElement(
     "p",
@@ -19,7 +20,8 @@ const BodyText = ({
         textDecoration,
         textAlign,
         fontWeight
-      })} ${className}`
+      })} ${className}`,
+      ...props
     },
     children
   );

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.4",
+  "version": "0.1.6",
   "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": "88620124f147f7b2f0b15279613f3c12b579b69d"
+  "gitHead": "507497cf84edeeff4b9ac9019f56323aef8a7401"
 }