@growth-angels/ds-core 1.21.2 → 1.22.1

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

@@ -1,4 +1,4 @@
-import { WordpressDefault } from "../../global.types.js";
+import type { WordpressDefault } from "../../global.types.js";
 import type { ElementType, ComponentPropsWithoutRef, ReactNode, MouseEventHandler, ElementRef } from "react";
 export type ButtonVariant = "primary" | "secondary" | "tertiary" | "link" | "icon";
 export type ButtonProps<T extends ElementType = "button"> = {

package/dist/atoms/Icon/Icon.d.ts

@@ -1,2 +1,2 @@
-import { IconProps } from "./Icon.types";
+import type { IconProps } from "./Icon.types";
 export declare const Icon: ({ name, size, extraClassNames }: IconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/atoms/Icon/Icon.types.d.ts

@@ -1,4 +1,4 @@
-import { WordpressDefault } from "../../global.types";
+import type { WordpressDefault } from "../../global.types";
 export interface IconProps extends WordpressDefault {
     name: string;
     size?: 'sm' | 'md' | 'lg';

package/dist/atoms/Text/Text.d.ts

@@ -1,4 +1,4 @@
-import { TextProps } from "./Text.types";
+import type { TextProps } from "./Text.types";
 export declare const Text: (props: TextProps) => import("react").DetailedReactHTMLElement<{
     className: string;
     style: import("react").CSSProperties | undefined;

package/dist/layout/Container/Container.types.d.ts

@@ -1,4 +1,4 @@
-import { WordpressDefault } from "../../global.types";
+import type { WordpressDefault } from "../../global.types";
 export type ContainerSize = 'large' | 'medium' | 'small' | 'full';
 export type ContainerStretch = 'right' | 'left';
 export interface ContainerProps extends WordpressDefault, React.HTMLAttributes<HTMLDivElement> {

package/dist/layout/FlexBlock/FlexBlock.d.ts

@@ -1,2 +1,2 @@
-import { FlexBlockProps } from "./FlexBlock.types";
+import type { FlexBlockProps } from "./FlexBlock.types";
 export declare const FlexBlock: ({ children, gap, alignItems, justifyContent, flexDirection, extraClassNames }: FlexBlockProps) => import("react/jsx-runtime").JSX.Element;

package/dist/layout/FlexBlock/FlexBlock.types.d.ts

@@ -1,4 +1,4 @@
-import { WordpressDefault } from "../../global.types";
+import type { WordpressDefault } from "../../global.types";
 export type FlexBlockAttrs = {
     gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
     alignItems?: string;

package/dist/layout/FlexCol/FlexCol.d.ts

@@ -1,4 +1,4 @@
-import { FlexColAttrs } from "./FlexCol.types";
+import type { FlexColAttrs } from "./FlexCol.types";
 export declare const FlexCol: ({ children, gap }: {
     children: React.ReactNode;
     gap?: FlexColAttrs["gap"];

package/dist/layout/Grid/Grid.d.ts

@@ -1,2 +1,2 @@
-import { GridProps } from "./Grid.types";
+import type { GridProps } from "./Grid.types";
 export declare const Grid: (props: GridProps) => JSX.Element;

package/dist/layout/Grid/Grid.types.d.ts

@@ -1,4 +1,4 @@
-import { WordpressDefault } from "../../global.types";
+import type { WordpressDefault } from "../../global.types";
 export interface GridAttributes {
     alignItems: 'flex-start' | 'center' | 'flex-end' | 'none';
     justifyContent: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'none';

package/dist/layout/Grid/GridItem/GridItem.d.ts

@@ -1,3 +1,3 @@
 import type { JSX } from "react/jsx-runtime";
-import { GridItemProps } from "./GridItem.types";
+import type { GridItemProps } from "./GridItem.types";
 export declare const GridItem: (props: GridItemProps) => JSX.Element;

package/dist/layout/Grid/GridItem/GridItem.types.d.ts

@@ -1,4 +1,4 @@
-import { WordpressDefault } from "../../../global.types";
+import type { WordpressDefault } from "../../../global.types";
 export type ColumnSize = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
 export interface GridItemAttributes {
     sizes: {

package/dist/lib/hydrate-carousel.js

@@ -10,11 +10,9 @@ window.Swiper = {
 };
 import "swiper/css";
 import "swiper/css/autoplay";
-const { createElement, createRoot } = useReactAdapter();
 export function HydrateCarousel(islands) {
+    const { createElement, createRoot } = useReactAdapter();
     islands?.forEach((carousel) => {
-        // first hide all carousels to prevent FOUC
-        carousel.setAttribute("style", "opacity: 0");
         const Component = CarouselSwiper;
         if (!Component)
             return;
@@ -28,6 +26,8 @@ export function HydrateCarousel(islands) {
         root.render(createElement(Component, { ...parsedProps, children }));
         carousel.setAttribute("data-hydrated", "true");
         // finally show the carousel
-        carousel.setAttribute("style", "opacity: 1");
+        setTimeout(() => {
+            carousel.setAttribute("style", "opacity: 1");
+        }, 1000);
     });
 }

package/dist/lib/hydrate-spoiler.js

@@ -2,16 +2,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Spoiler } from "../molecules/molecules";
 import { SpoilerList } from "../organisms/organisms";
 import { useReactAdapter } from "../hooks/useReactAdaptater";
-const { createRoot } = useReactAdapter();
 export function HydrateSpoiler(islands) {
+    const { createRoot } = useReactAdapter();
     islands?.forEach((el) => {
         const props = el.getAttribute("data-props");
         el.removeAttribute("data-props");
-        const items = Array.from(el.querySelectorAll('div[data-wp-island="ga-ds-spoiler"]')).map((item) => {
+        const items = Array.from(el.querySelectorAll('div[data-wp-island="ga-ds-spoiler"]')).map((item, i) => {
             const props = item.getAttribute("data-props");
             return (_jsx(Spoiler, { ...(props ? JSON.parse(props) : {}), children: _jsx("div", { dangerouslySetInnerHTML: {
                         __html: item.innerHTML,
-                    } }) }));
+                    } }) }, i));
         });
         const root = createRoot(el);
         root.render(_jsx(SpoilerList, { ...(props ? JSON.parse(props) : {}), children: items }));

package/dist/lib/hydrate-tabs.js

@@ -2,8 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Tabs } from "@growth-angels/ds-core";
 import { NativeChildWrapper } from "./utils/native-child-wrapper";
 import { useReactAdapter } from "../hooks/useReactAdaptater";
-const { createRoot } = useReactAdapter();
 export function HydrateTabs(els) {
+    const { createRoot } = useReactAdapter();
     els?.forEach((el) => {
         const props = el.getAttribute("data-props");
         el.removeAttribute("data-props");

package/dist/lib/utils/native-child-wrapper.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useReactAdapter } from "../../hooks/useReactAdaptater";
-const { useRef, useEffect } = useReactAdapter();
 export function NativeChildWrapper({ child, id }) {
+    const { useRef, useEffect } = useReactAdapter();
     const ref = useRef(null);
     useEffect(() => {
         if (ref.current) {

package/dist/molecules/ButtonGroup/ButtonGroup.d.ts

@@ -1,2 +1,2 @@
-import { ButtonGroupProps } from "./ButtonGroup.types";
+import type { ButtonGroupProps } from "./ButtonGroup.types";
 export declare const ButtonGroup: ({ alignment, children, extraClassNames }: ButtonGroupProps) => import("react/jsx-runtime").JSX.Element;

package/dist/molecules/ButtonGroup/ButtonGroup.types.d.ts

@@ -1,4 +1,4 @@
-import { WordpressDefault } from "../../global.types";
+import type { WordpressDefault } from "../../global.types";
 export interface ButtonGroupProps extends WordpressDefault {
     alignment?: 'center' | 'right';
     children?: React.ReactNode;

package/dist/molecules/Spoiler/Spoiler.d.ts

@@ -1,2 +1,2 @@
-import { SpoilerProps } from "./Spoiler.types";
+import type { SpoilerProps } from "./Spoiler.types";
 export declare const Spoiler: (props: SpoilerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/organisms/Carousel/Carousel.d.ts

@@ -1,2 +1,2 @@
-import { CarouselProps } from "./Carousel.types";
+import type { CarouselProps } from "./Carousel.types";
 export declare const Carousel: (props: CarouselProps) => import("react/jsx-runtime").JSX.Element;

package/dist/organisms/Carousel/Carousel.js

@@ -11,7 +11,7 @@ export const Carousel = (props) => {
     const slides = Children.toArray(children);
     const totalSlides = slides.length;
     const calculatePages = (slidesPerView = 0) => {
-        let pagesArr = [];
+        const pagesArr = [];
         for (let i = slidesPerView; i < totalSlides; i++) {
             pagesArr.push({});
         }

package/dist/organisms/Carousel/Carousel.types.d.ts

@@ -1,4 +1,4 @@
-import { WordpressDefault } from "../../global.types";
+import type { WordpressDefault } from "../../global.types";
 export type CarouselAttributes = {
     context?: 'wp-editor';
     slidesPerView?: {

package/dist/organisms/Carousel/CarouselSwiper.d.ts

@@ -1,2 +1,2 @@
-import { CarouselProps } from "./Carousel.types";
+import type { CarouselProps } from "./Carousel.types";
 export declare const CarouselSwiper: (props: CarouselProps) => import("react/jsx-runtime").JSX.Element;

package/dist/organisms/Carousel/CarouselSwiper.stories.js

@@ -9,13 +9,13 @@ export default meta;
 export const Primary = {
     args: {
         children: [
-            _jsx("div", { children: "Slide 1" }),
-            _jsx("div", { children: "Slide 2" }),
-            _jsx("div", { children: "Slide 3" }),
-            _jsx("div", { children: "Slide 4" }),
-            _jsx("div", { children: "Slide 5" }),
-            _jsx("div", { children: "Slide 6" }),
-            _jsx("div", { children: "Slide 7" }),
+            _jsx("div", { children: "Slide 1" }, 1),
+            _jsx("div", { children: "Slide 2" }, 2),
+            _jsx("div", { children: "Slide 3" }, 3),
+            _jsx("div", { children: "Slide 4" }, 4),
+            _jsx("div", { children: "Slide 5" }, 5),
+            _jsx("div", { children: "Slide 6" }, 6),
+            _jsx("div", { children: "Slide 7" }, 7),
         ],
         slidesPerView: { sm: 1, md: 2, lg: 3, xl: 4 },
         spaceBetween: 16,

package/dist/organisms/SpoilerList/SpoilerList.d.ts

@@ -1,2 +1,2 @@
-import { SpoilerListProps } from "./SpoilerList.types";
+import type { SpoilerListProps } from "./SpoilerList.types";
 export declare const SpoilerList: ({ children, extraClassNames }: SpoilerListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/organisms/SpoilerList/SpoilerList.types.d.ts

@@ -1,4 +1,4 @@
-import { WordpressDefault } from "../../global.types";
+import type { WordpressDefault } from "../../global.types";
 export interface SpoilerListProps extends WordpressDefault {
     children?: React.ReactNode;
 }

package/dist/organisms/Tabs/Tabs.d.ts

@@ -1,2 +1,2 @@
-import { TabsProps } from "./Tabs.types";
+import type { TabsProps } from "./Tabs.types";
 export declare const Tabs: ({ tabs, children, extraClassNames, edit }: TabsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/organisms/Tabs/Tabs.stories.js

@@ -15,9 +15,9 @@ export const Primary = {
             { id: ids[2], label: "Tab 3" },
         ],
         children: [
-            _jsx("div", { id: ids[0], children: "Content for Tab 1" }),
-            _jsx("div", { id: ids[1], children: "Content for Tab 2" }),
-            _jsx("div", { id: ids[2], children: "Content for Tab 3" }),
+            _jsx("div", { id: ids[0], children: "Content for Tab 1" }, 0),
+            _jsx("div", { id: ids[1], children: "Content for Tab 2" }, 1),
+            _jsx("div", { id: ids[2], children: "Content for Tab 3" }, 2),
         ],
     },
 };

package/dist/organisms/Tabs/Tabs.types.d.ts

@@ -1,4 +1,4 @@
-import { WordpressDefault } from "../../global.types";
+import type { WordpressDefault } from "../../global.types";
 export interface TabsProps extends WordpressDefault {
     tabs: Array<{
         id: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@growth-angels/ds-core",
-  "version": "1.21.2",
+  "version": "1.22.1",
   "description": "Design system by Growth Angels",
   "license": "MIT",
   "private": false,
@@ -37,7 +37,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@growth-angels/foundation": "^1.4.1",
+    "@growth-angels/foundation": "workspace:*",
     "swiper": "^12.0.3"
   },
   "peerDependencies": {

package/src/atoms/Button/Button.types.ts

@@ -1,4 +1,4 @@
-import { WordpressDefault } from "../../global.types.js"
+import type { WordpressDefault } from "../../global.types.js"
 import type { ElementType, ComponentPropsWithoutRef, ReactNode, MouseEventHandler, ElementRef } from "react"
 
 export type ButtonVariant = "primary" | "secondary" | "tertiary" | "link" | "icon"

package/src/atoms/Icon/Icon.tsx

@@ -1,5 +1,5 @@
 import { useThemeAssets } from "../../hooks/useThemeAssets"
-import { IconProps } from "./Icon.types"
+import type { IconProps } from "./Icon.types"
 
 export const Icon = ({ name, size, extraClassNames }: IconProps) => {
   const { iconsSprite } = useThemeAssets()

package/src/atoms/Icon/Icon.types.ts

@@ -1,4 +1,4 @@
-import { WordpressDefault } from "../../global.types"
+import type { WordpressDefault } from "../../global.types"
 
 export interface IconProps extends WordpressDefault {
   name: string

package/src/atoms/Text/Text.tsx

@@ -1,5 +1,5 @@
 import { useReactAdapter } from "../../hooks/useReactAdaptater"
-import { TextProps } from "./Text.types"
+import type { TextProps } from "./Text.types"
 
 export const Text = (props: TextProps) => {
   const React = useReactAdapter()

package/src/context/SpoilerContext.tsx

@@ -1,12 +1,11 @@
 import { useReactAdapter } from "../hooks/useReactAdaptater"
 
-const { createContext, useContext, useState } = useReactAdapter()
-
 interface SpoilerContextProps {
   activeIndex: number | null
   setActiveIndex: (index: number | null) => void
 }
 
+const { createContext, useContext, useState } = useReactAdapter()
 const SpoilerContext = createContext<SpoilerContextProps | undefined>(undefined)
 
 export const SpoilerProvider = ({ children }: { children: React.ReactNode }) => {

package/src/hooks/useReactAdaptater.ts

@@ -1,4 +1,3 @@
-// @ts-ignore - React types from window.wp.element
 type ReactType = typeof import('react')
 
 type ExtendedReactType = ReactType & {

package/src/layout/Container/Container.scss

@@ -6,6 +6,7 @@
   display: flex;
   flex-direction: column;
   align-items: stretch;
+  --ga-container-safe-zone: 2.4rem;
 
   &:not(.ga-ds-container--full) {
     padding-left: var(--ga-container-safe-zone, 2.4rem);
@@ -29,43 +30,35 @@
   }
 }
 
-.ga-ds-container--small {
-  @include bp-up("lg", $ga-breakpoints) {
-    &:not(.ga-ds-container-stretch--right) {
-      padding-right: calc((100% - (#{map.get($ga-containers, "sm")} / 0.8)) / 2);
-    }
-    &:not(.ga-ds-container-stretch--left) {
-      padding-left: calc((100% - (#{map.get($ga-containers, "sm")} / 0.8)) / 2);
-    }
-  }
-  @include bp-up("xxl", $ga-breakpoints) {
-    &:not(.ga-ds-container-stretch--right) {
-      padding-right: calc((100% - #{map.get($ga-containers, "sm")}) / 2);
-    }
-    &:not(.ga-ds-container-stretch--left) {
-      padding-left: calc((100% - #{map.get($ga-containers, "sm")}) / 2);
-    }
-  }
-}
+@each $key, $config in $ga-containers {
+  $breakpoint: map.get($config, "breakpoint");
+  $size: map.get($config, "size");
+  $class: map.get($config, "key");
 
-@include bp-up("xxl", $ga-breakpoints) {
-  .ga-ds-container--medium {
-    &:not(.ga-ds-container-stretch--right) {
-      padding-right: calc((100% - #{map.get($ga-containers, "md")}) / 2);
-    }
-    &:not(.ga-ds-container-stretch--left) {
-      padding-left: calc((100% - #{map.get($ga-containers, "md")}) / 2);
+  @if $key == null {
+    @warn "Unknown container key: #{$key}";
+  } @else if $key != "max" {
+    @include bp-up($breakpoint, $ga-breakpoints) {
+      .ga-ds-container--#{$class} {
+        &:not(.ga-ds-container-stretch--right) {
+          padding-right: calc((100% - (#{$size})) / 2);
+        }
+        &:not(.ga-ds-container-stretch--left) {
+          padding-left: calc((100% - (#{$size})) / 2);
+        }
+      }
     }
   }
-}
-
-@include bp-up("xxl", $ga-breakpoints) {
-  .ga-ds-container--large {
-    &:not(.ga-ds-container-stretch--right) {
-      padding-right: calc((100% - #{map.get($ga-containers, "lg")}) / 2);
-    }
-    &:not(.ga-ds-container-stretch--left) {
-      padding-left: calc((100% - #{map.get($ga-containers, "lg")}) / 2);
+  @if $key == "max" {
+    @include bp-up($breakpoint, $ga-breakpoints) {
+      .ga-ds-container--large {
+        &:not(.ga-ds-container-stretch--right) {
+          padding-right: calc((100% - (#{$size})) / 2);
+        }
+        &:not(.ga-ds-container-stretch--left) {
+          padding-left: calc((100% - (#{$size})) / 2);
+        }
+      }
     }
   }
 }

package/src/layout/Container/Container.types.ts

@@ -1,4 +1,4 @@
-import { WordpressDefault } from "../../global.types";
+import type { WordpressDefault } from "../../global.types";
 
 export type ContainerSize = 'large' | 'medium' | 'small' | 'full';
 export type ContainerStretch = 'right' | 'left'

package/src/layout/FlexBlock/FlexBlock.tsx

@@ -1,4 +1,4 @@
-import { FlexBlockProps } from "./FlexBlock.types"
+import type { FlexBlockProps } from "./FlexBlock.types"
 
 export const FlexBlock = ({ children, gap, alignItems, justifyContent, flexDirection, extraClassNames }: FlexBlockProps) => {
   const styles = []

package/src/layout/FlexBlock/FlexBlock.types.ts

@@ -1,4 +1,4 @@
-import { WordpressDefault } from "../../global.types";
+import type { WordpressDefault } from "../../global.types";
 
 export type FlexBlockAttrs = {
   gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';

package/src/layout/FlexCol/FlexCol.tsx

@@ -1,4 +1,4 @@
-import { FlexColAttrs } from "./FlexCol.types"
+import type { FlexColAttrs } from "./FlexCol.types"
 
 export const FlexCol = ({ children, gap }: { children: React.ReactNode; gap?: FlexColAttrs["gap"] }) => {
   return (

package/src/layout/Grid/Grid.tsx

@@ -1,4 +1,4 @@
-import { GridProps } from "./Grid.types"
+import type { GridProps } from "./Grid.types"
 export const Grid = (props: GridProps): JSX.Element => {
   const { children, alignItems, justifyContent, extraClassNames, padding, margin, paddingPosition, marginPosition } = props
   const classNames = [

package/src/layout/Grid/Grid.types.ts

@@ -1,4 +1,4 @@
-import { WordpressDefault } from "../../global.types";
+import type { WordpressDefault } from "../../global.types";
 
 export interface GridAttributes {
   alignItems: 'flex-start' | 'center' | 'flex-end' | 'none'

package/src/layout/Grid/GridItem/GridItem.tsx

@@ -1,5 +1,5 @@
 import type { JSX } from "react/jsx-runtime"
-import { GridItemProps } from "./GridItem.types"
+import type { GridItemProps } from "./GridItem.types"
 export const GridItem = (props: GridItemProps): JSX.Element => {
   const {
     children,

package/src/layout/Grid/GridItem/GridItem.types.ts

@@ -1,4 +1,4 @@
-import { WordpressDefault } from "../../../global.types";
+import type { WordpressDefault } from "../../../global.types";
 
 export type ColumnSize = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12'
 

package/src/lib/hydrate-carousel.tsx

@@ -9,12 +9,10 @@ import * as modules from "swiper/modules"
 }
 import "swiper/css"
 import "swiper/css/autoplay"
-const { createElement, createRoot } = useReactAdapter()
 
 export function HydrateCarousel(islands: NodeListOf<Element> | null) {
+  const { createElement, createRoot } = useReactAdapter()
   islands?.forEach((carousel) => {
-    // first hide all carousels to prevent FOUC
-    carousel.setAttribute("style", "opacity: 0")
     const Component = CarouselSwiper
     if (!Component) return
     const props = carousel.getAttribute("data-props")
@@ -31,6 +29,8 @@ export function HydrateCarousel(islands: NodeListOf<Element> | null) {
     root.render(createElement(Component, { ...parsedProps, children }))
     carousel.setAttribute("data-hydrated", "true")
     // finally show the carousel
-    carousel.setAttribute("style", "opacity: 1")
+    setTimeout(() => {
+      carousel.setAttribute("style", "opacity: 1")
+    }, 1000)
   })
 }

package/src/lib/hydrate-spoiler.tsx

@@ -1,16 +1,16 @@
 import { Spoiler } from "../molecules/molecules"
 import { SpoilerList } from "../organisms/organisms"
 import { useReactAdapter } from "../hooks/useReactAdaptater"
-const { createRoot } = useReactAdapter()
 
 export function HydrateSpoiler(islands: NodeListOf<Element> | null) {
+  const { createRoot } = useReactAdapter()
   islands?.forEach((el) => {
     const props = el.getAttribute("data-props")
     el.removeAttribute("data-props")
-    const items = Array.from(el.querySelectorAll('div[data-wp-island="ga-ds-spoiler"]')).map((item) => {
+    const items = Array.from(el.querySelectorAll('div[data-wp-island="ga-ds-spoiler"]')).map((item, i) => {
       const props = item.getAttribute("data-props")
       return (
-        <Spoiler {...(props ? JSON.parse(props) : {})}>
+        <Spoiler key={i} {...(props ? JSON.parse(props) : {})}>
           <div
             dangerouslySetInnerHTML={{
               __html: item.innerHTML,

package/src/lib/hydrate-tabs.tsx

@@ -1,9 +1,9 @@
 import { Tabs } from "@growth-angels/ds-core"
 import { NativeChildWrapper } from "./utils/native-child-wrapper"
 import { useReactAdapter } from "../hooks/useReactAdaptater"
-const { createRoot } = useReactAdapter()
 
 export function HydrateTabs(els: NodeListOf<Element> | null) {
+  const { createRoot } = useReactAdapter()
   els?.forEach((el) => {
     const props = el.getAttribute("data-props")
     el.removeAttribute("data-props")
@@ -26,7 +26,7 @@ export function HydrateTabs(els: NodeListOf<Element> | null) {
     root.render(
       <Tabs tabs={tabs} extraClassNames={extraClassNames}>
         {tabPanels}
-      </Tabs>
+      </Tabs>,
     )
   })
 }

package/src/lib/utils/native-child-wrapper.tsx

@@ -1,7 +1,7 @@
 import { useReactAdapter } from "../../hooks/useReactAdaptater"
-const { useRef, useEffect } = useReactAdapter()
 
 export function NativeChildWrapper({ child, id }: { child: Element; id?: string }) {
+  const { useRef, useEffect } = useReactAdapter()
   const ref = useRef<HTMLDivElement | null>(null)
 
   useEffect(() => {

package/src/molecules/ButtonGroup/ButtonGroup.tsx

@@ -1,4 +1,4 @@
-import { ButtonGroupProps } from "./ButtonGroup.types"
+import type { ButtonGroupProps } from "./ButtonGroup.types"
 
 export const ButtonGroup = ({ alignment, children, extraClassNames }: ButtonGroupProps) => {
   const style = {} as React.CSSProperties & Record<string, string | number | undefined>

package/src/molecules/ButtonGroup/ButtonGroup.types.ts

@@ -1,4 +1,4 @@
-import { WordpressDefault } from "../../global.types";
+import type { WordpressDefault } from "../../global.types";
 
 export interface ButtonGroupProps extends WordpressDefault {
   alignment?: 'center' | 'right';

package/src/molecules/Spoiler/Spoiler.tsx

@@ -1,4 +1,4 @@
-import { SpoilerProps } from "./Spoiler.types"
+import type { SpoilerProps } from "./Spoiler.types"
 import { useReactAdapter } from "../../hooks/useReactAdaptater"
 import { Icon } from "../../atoms/Icon/Icon"
 import { useSpoilerContext } from "../../context/SpoilerContext"

package/src/organisms/Carousel/Carousel.tsx

@@ -1,7 +1,7 @@
 import { Button } from "../../atoms/atoms"
 import { useBreakpointObserver } from "../../hooks/useBreakPointObserver"
 import { useReactAdapter } from "../../hooks/useReactAdaptater"
-import { CarouselProps } from "./Carousel.types"
+import type { CarouselProps } from "./Carousel.types"
 
 export const Carousel = (props: CarouselProps) => {
   const {
@@ -22,7 +22,7 @@ export const Carousel = (props: CarouselProps) => {
   const slides = Children.toArray(children)
   const totalSlides = slides.length
   const calculatePages = (slidesPerView = 0) => {
-    let pagesArr = []
+    const pagesArr = []
     for (let i = slidesPerView; i < totalSlides; i++) {
       pagesArr.push({})
     }

package/src/organisms/Carousel/Carousel.types.ts

@@ -1,4 +1,4 @@
-import { WordpressDefault } from "../../global.types"
+import type { WordpressDefault } from "../../global.types"
 
 export type CarouselAttributes = {
   context?: 'wp-editor'

package/src/organisms/Carousel/CarouselSwiper.stories.tsx

@@ -13,13 +13,13 @@ type Story = StoryObj<typeof CarouselSwiper>
 export const Primary: Story = {
   args: {
     children: [
-      <div>Slide 1</div>,
-      <div>Slide 2</div>,
-      <div>Slide 3</div>,
-      <div>Slide 4</div>,
-      <div>Slide 5</div>,
-      <div>Slide 6</div>,
-      <div>Slide 7</div>,
+      <div key={1}>Slide 1</div>,
+      <div key={2}>Slide 2</div>,
+      <div key={3}>Slide 3</div>,
+      <div key={4}>Slide 4</div>,
+      <div key={5}>Slide 5</div>,
+      <div key={6}>Slide 6</div>,
+      <div key={7}>Slide 7</div>,
     ],
     slidesPerView: { sm: 1, md: 2, lg: 3, xl: 4 },
     spaceBetween: 16,

package/src/organisms/Carousel/CarouselSwiper.tsx

@@ -1,5 +1,5 @@
 import { useReactAdapter } from "../../hooks/useReactAdaptater"
-import { CarouselProps } from "./Carousel.types"
+import type { CarouselProps } from "./Carousel.types"
 import { Button } from "../../atoms/atoms"
 import Swiper from "swiper"
 import { Autoplay, Navigation, Pagination } from "swiper/modules"

package/src/organisms/SpoilerList/SpoilerList.tsx

@@ -1,6 +1,6 @@
 import { SpoilerProvider } from "../../context/SpoilerContext"
 import { useReactAdapter } from "../../hooks/useReactAdaptater"
-import { SpoilerListProps } from "./SpoilerList.types"
+import type { SpoilerListProps } from "./SpoilerList.types"
 
 export const SpoilerList = ({ children, extraClassNames }: SpoilerListProps) => {
   const { Children, cloneElement } = useReactAdapter()

package/src/organisms/SpoilerList/SpoilerList.types.ts

@@ -1,4 +1,4 @@
-import { WordpressDefault } from "../../global.types";
+import type { WordpressDefault } from "../../global.types";
 
 export interface SpoilerListProps extends WordpressDefault {
   children?: React.ReactNode

package/src/organisms/Tabs/Tabs.stories.tsx

@@ -18,9 +18,15 @@ export const Primary: Story = {
       { id: ids[2], label: "Tab 3" },
     ],
     children: [
-      <div id={ids[0]}>Content for Tab 1</div>,
-      <div id={ids[1]}>Content for Tab 2</div>,
-      <div id={ids[2]}>Content for Tab 3</div>,
+      <div key={0} id={ids[0]}>
+        Content for Tab 1
+      </div>,
+      <div key={1} id={ids[1]}>
+        Content for Tab 2
+      </div>,
+      <div key={2} id={ids[2]}>
+        Content for Tab 3
+      </div>,
     ],
   },
 }

package/src/organisms/Tabs/Tabs.tsx

@@ -1,5 +1,5 @@
 import { useReactAdapter } from "../../hooks/useReactAdaptater"
-import { TabsProps } from "./Tabs.types"
+import type { TabsProps } from "./Tabs.types"
 export const Tabs = ({ tabs, children, extraClassNames, edit }: TabsProps) => {
   const { useState, useRef, Children } = useReactAdapter()
 

package/src/organisms/Tabs/Tabs.types.ts

@@ -1,4 +1,4 @@
-import { WordpressDefault } from "../../global.types"
+import type { WordpressDefault } from "../../global.types"
 
 export interface TabsProps extends WordpressDefault {
   tabs: Array<{