@growth-angels/ds-core 0.0.5 → 1.1.0

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

@@ -1,4 +1,4 @@
-import { JSX } from 'react/jsx-runtime';
-import type { ButtonProps } from './Button.types';
-import React from 'react';
+import { JSX } from "react/jsx-runtime";
+import type { ButtonProps } from "./Button.types";
+import React from "react";
 export declare const Button: <T extends React.ElementType = "button">(props: ButtonProps<T>) => JSX.Element;

package/dist/atoms/Button/Button.js

@@ -1,21 +1,21 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { Icon } from '../Icon/Icon';
+import React from "react";
+import { Icon } from "../Icon/Icon";
 export const Button = (props) => {
     const { as, children, variant, preventDefault, icon, extraClassNames, ...restProps } = props;
     let customVariant = variant;
     if (icon) {
-        customVariant = 'icon';
+        customVariant = "icon";
     }
-    const classNames = ['ga-ds-btn', `ga-ds-btn--${customVariant}`, ...(extraClassNames || [])];
+    const classNames = ["ga-ds-button", `ga-ds-button--${customVariant}`, ...(extraClassNames || [])];
     const handleClick = (e) => {
         if (preventDefault)
             e.preventDefault();
         props?.onClick?.(e);
     };
-    return React.createElement(as || 'button', {
+    return React.createElement(as || "button", {
         ...restProps,
-        className: classNames.join(' '),
-        onClick: handleClick
-    }, _jsxs(_Fragment, { children: [icon && _jsx(Icon, { name: icon, size: 'sm' }), children && children] }));
+        className: classNames.join(" "),
+        onClick: handleClick,
+    }, _jsxs(_Fragment, { children: [icon && _jsx(Icon, { name: icon, size: "sm" }), children && children] }));
 };

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

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Button } from './Button';
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Button } from "./Button";
 declare const meta: Meta<typeof Button>;
 export default meta;
 type Story = StoryObj<typeof Button>;

package/dist/atoms/Button/Button.stories.js

@@ -1,31 +1,31 @@
-import { Button } from './Button';
+import { Button } from "./Button";
 const meta = {
-    title: 'Atoms/Button',
+    title: "Atoms/Button",
     component: Button,
-    tags: ['autodocs'],
+    tags: ["autodocs"],
 };
 export default meta;
 export const Primary = {
     args: {
-        variant: 'primary',
-        children: 'Button',
-        as: 'a',
-        href: '#',
+        variant: "primary",
+        children: "Button",
+        as: "a",
+        href: "#",
     },
 };
 export const Secondary = {
     args: {
-        variant: 'secondary',
-        children: 'Button',
-        as: 'a',
-        href: '#',
+        variant: "secondary",
+        children: "Button",
+        as: "a",
+        href: "#",
     },
 };
 export const Link = {
     args: {
-        variant: 'link',
-        children: 'Button',
-        as: 'a',
-        href: '#',
+        variant: "link",
+        children: "Button",
+        as: "a",
+        href: "#",
     },
 };

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

@@ -1,9 +1,9 @@
 import { WordpressDefault } from "../../global.types.js";
 import React, { ElementType, ComponentPropsWithoutRef } from "react";
-export type Variant = "primary" | "secondary" | "tertiary" | "link" | "icon";
+export type ButtonVariant = "primary" | "secondary" | "tertiary" | "link" | "icon";
 export type ButtonProps<T extends ElementType = "button"> = {
     as?: T;
-    variant?: Variant;
+    variant?: ButtonVariant;
     hasIcon?: "left" | "right";
     icon?: "chevron-left" | "chevron-right";
     preventDefault?: boolean;

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

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

package/dist/atoms/Icon/Icon.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useThemeAssets } from "../../hooks/useThemeAssets";
-export const Icon = ({ name, size }) => {
+export const Icon = ({ name, size, extraClassNames }) => {
     const { iconsSprite } = useThemeAssets();
-    const classeNames = ['ga-ds-icon', ...(size ? [`ga-ds-icon--${size}`] : [])];
-    return _jsx("svg", { className: classeNames.join(' '), xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: _jsx("use", { xlinkHref: `${iconsSprite}#${name}` }) });
+    const classNames = ["ga-ds-icon", ...(size ? [`ga-ds-icon--${size}`] : []), ...(extraClassNames || [])];
+    return (_jsx("svg", { className: classNames.join(" "), xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: _jsx("use", { xlinkHref: `${iconsSprite}#${name}` }) }));
 };

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

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

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

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

package/dist/atoms/Text/Text.js

@@ -1,8 +1,9 @@
 import React from "react";
 export const Text = (props) => {
-    const { as, children, classNames, type = "paragraph" } = props;
-    const className = typeof classNames === 'string' ? classNames : classNames?.join(' ') || '';
+    const { as, children, classNames, type = "paragraph", size, style } = props;
+    const className = typeof classNames === "string" ? classNames : classNames?.join(" ") || "";
     return React.createElement(as, {
-        className: `ga-ds-${type} ${className}`,
+        className: `ga-ds-${type} ga-ds-text--${size} ${className}`,
+        style: style || undefined,
     }, children);
 };

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

@@ -1,6 +1,10 @@
-export interface TextProps {
+export interface Attributes {
+    size: '64' | '56' | '48' | '40' | '32' | '24' | '20' | '16' | '14' | '12';
     as: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
+}
+export interface TextProps extends Attributes {
     classNames?: string[] | string;
     type?: 'heading' | 'paragraph';
+    style?: React.CSSProperties;
     children: string;
 }

package/dist/atoms/atoms.d.ts

@@ -1 +1,4 @@
 export * from './Button/Button';
+export * from './Button/Button.types';
+export * from './Icon/Icon';
+export * from './Icon/Icon.types';

package/dist/atoms/atoms.js

@@ -1 +1,4 @@
 export * from './Button/Button';
+export * from './Button/Button.types';
+export * from './Icon/Icon';
+export * from './Icon/Icon.types';

package/dist/context/SpoilerContext.d.ts

@@ -0,0 +1,9 @@
+interface SpoilerContextProps {
+    activeIndex: number | null;
+    setActiveIndex: (index: number | null) => void;
+}
+export declare const SpoilerProvider: ({ children }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useSpoilerContext: () => SpoilerContextProps;
+export {};

package/dist/context/SpoilerContext.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useReactAdapter } from "../hooks/useReactAdaptater";
+const { createContext, useContext, useState } = useReactAdapter();
+const SpoilerContext = createContext(undefined);
+export const SpoilerProvider = ({ children }) => {
+    const [activeIndex, setActiveIndex] = useState(0);
+    return _jsx(SpoilerContext.Provider, { value: { activeIndex, setActiveIndex }, children: children });
+};
+export const useSpoilerContext = () => {
+    const context = useContext(SpoilerContext);
+    if (!context) {
+        throw new Error("useSpoilerContext must be used within a SpoilerProvider");
+    }
+    return context;
+};

package/dist/global.types.d.ts

@@ -1,3 +1,7 @@
+export type Padding = "xsmall" | "small" | "medium" | "large" | "xlarge";
+export type Margin = "small" | "medium" | "large";
 export interface WordpressDefault {
     extraClassNames?: string[];
+    padding?: Padding;
+    margin?: Margin;
 }

package/dist/hooks/useReactAdaptater.d.ts

@@ -1,2 +1,10 @@
-import React from 'react';
-export declare const useReactAdapter: () => typeof React;
+type ReactType = typeof import('react');
+declare global {
+    interface Window {
+        wp?: {
+            element?: ReactType;
+        };
+    }
+}
+export declare const useReactAdapter: () => ReactType;
+export {};

package/dist/hooks/useReactAdaptater.js

@@ -1,7 +1,10 @@
 import React from 'react';
 export const useReactAdapter = () => {
-    if (typeof window === 'undefined' || !window.wp || !window.wp.element) {
-        return React;
+    // Check if WordPress element is available (WordPress context)
+    if (typeof window !== 'undefined' && window.wp?.element) {
+        return window.wp.element;
     }
-    return window.wp.element;
+    // Fallback for non-WordPress environments (Storybook, tests, SSR)
+    // This will bundle React only in non-WordPress builds
+    return React;
 };

package/dist/hooks/useSpoilerContext.d.ts

@@ -0,0 +1,4 @@
+export default function (): {
+    activeIndex: number | null;
+    toggleIndex: (index: number) => void;
+};

package/dist/hooks/useSpoilerContext.js

@@ -0,0 +1,12 @@
+import { useReactAdapter } from "./useReactAdaptater";
+export default function () {
+    const { useState } = useReactAdapter();
+    const [activeIndex, setActiveIndex] = useState(null);
+    const toggleIndex = (index) => {
+        setActiveIndex((currentIndex) => currentIndex === index ? null : index);
+    };
+    return {
+        activeIndex,
+        toggleIndex,
+    };
+}

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from './atoms/atoms';
 export * from './organisms/organisms';
+export * from './molecules/molecules';
 export * from './layout/layout';
 export { setThemeAssets } from './hooks/useThemeAssets';

package/dist/index.js

@@ -1,4 +1,5 @@
 export * from './atoms/atoms';
 export * from './organisms/organisms';
+export * from './molecules/molecules';
 export * from './layout/layout';
 export { setThemeAssets } from './hooks/useThemeAssets';

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

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

package/dist/layout/Container/Container.js

@@ -1,6 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 export const Container = (props) => {
-    const { size, children } = props;
-    const classes = ['ga-ds-container', `ga-ds-container--${size}`, ...(props.extraClassNames || [])];
-    return _jsx("div", { className: classes.join(' '), children: children });
+    const { size, children, style, padding, margin, stretch } = props;
+    const classes = [
+        "ga-ds-container",
+        `ga-ds-container--${size}`,
+        ...(padding ? [`ga-ds-util-padding--${padding}`] : []),
+        ...(margin ? [`ga-ds-util-margin--${margin}`] : []),
+        ...(stretch ? [`ga-ds-container-stretch--${stretch}`] : []),
+        ...(props.extraClassNames || []),
+    ];
+    return (_jsx("div", { className: classes.join(" "), style: style, children: children }));
 };

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

@@ -1,6 +1,9 @@
 import { WordpressDefault } from "../../global.types";
-export type ContainerSize = 'large' | 'medium' | 'small';
+export type ContainerSize = 'large' | 'medium' | 'small' | 'full';
+export type ContainerStretch = 'right' | 'left';
 export interface ContainerProps extends WordpressDefault {
     size: ContainerSize;
+    stretch?: ContainerStretch;
     children: React.ReactNode | React.ReactNode[];
+    style?: React.CSSProperties;
 }

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

@@ -0,0 +1,2 @@
+import { 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.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const FlexBlock = ({ children, gap, alignItems, justifyContent, flexDirection, extraClassNames }) => {
+    const styles = [];
+    if (gap) {
+        styles.push(["gap", `var(--ga-spacings-gap-${gap})`]);
+    }
+    if (alignItems) {
+        styles.push(["alignItems", alignItems]);
+    }
+    if (justifyContent) {
+        styles.push(["justifyContent", justifyContent]);
+    }
+    if (flexDirection) {
+        styles.push(["flexDirection", flexDirection]);
+    }
+    const classNames = ["ga-ds-flex-block"];
+    if (extraClassNames) {
+        classNames.push(...extraClassNames);
+    }
+    return (_jsx("div", { className: classNames.join(" "), style: Object.fromEntries(styles), children: children }));
+};

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

@@ -0,0 +1,10 @@
+import { WordpressDefault } from "../../global.types";
+export type FlexBlockAttrs = {
+    gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    alignItems?: string;
+    justifyContent?: string;
+    flexDirection?: 'column';
+};
+export interface FlexBlockProps extends FlexBlockAttrs, WordpressDefault {
+    children: React.ReactNode;
+}

package/dist/layout/FlexBlock/FlexBlock.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,5 @@
+import { FlexColAttrs } from "./FlexCol.types";
+export declare const FlexCol: ({ children, gap }: {
+    children: React.ReactNode;
+    gap?: FlexColAttrs["gap"];
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/layout/FlexCol/FlexCol.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const FlexCol = ({ children, gap }) => {
+    return (_jsx("div", { className: "ga-ds-flex-col", style: { "--ga-flex-col-gap": `var(--ga-spacings-gap-${gap || "xs"})` }, children: children }));
+};

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

@@ -0,0 +1,3 @@
+export type FlexColAttrs = {
+    gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+};

package/dist/layout/FlexCol/FlexCol.types.js

@@ -0,0 +1 @@
+export {};

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

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

package/dist/layout/Grid/Grid.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 export const Grid = (props) => {
-    const { children, alignItems, justifyContent, extraClassNames } = props;
-    const classNames = ['ga-ds-grid', ...(extraClassNames || [])];
-    return _jsx("div", { className: classNames.join(' '), style: { alignItems, justifyContent }, children: children });
+    const { children, alignItems, justifyContent, extraClassNames, padding } = props;
+    const classNames = ["ga-ds-grid", ...(padding ? [`ga-ds-util-padding--${padding}`] : []), ...(extraClassNames || [])];
+    return (_jsx("div", { className: classNames.join(" "), style: { ...(alignItems !== "none" && { alignItems }), ...(justifyContent !== "none" && { justifyContent }) }, children: children }));
 };

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

@@ -1,8 +1,8 @@
 import { WordpressDefault } from "../../global.types";
-export interface Attributes {
-    alignItems: 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
-    justifyContent: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around';
+export interface GridAttributes {
+    alignItems: 'flex-start' | 'center' | 'flex-end' | 'none';
+    justifyContent: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'none';
 }
-export interface GridProps extends WordpressDefault, Attributes {
+export interface GridProps extends WordpressDefault, GridAttributes {
     children: React.ReactNode | React.ReactNode[];
 }

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 { JSX } from "react/jsx-runtime";
+import { GridItemProps } from "./GridItem.types";
 export declare const GridItem: (props: GridItemProps) => JSX.Element;

package/dist/layout/Grid/GridItem/GridItem.js

@@ -5,7 +5,14 @@ export const GridItem = (props) => {
         sm: 12,
         md: 12,
         lg: 12,
-    } } = props;
-    const style = Object.fromEntries(Object.entries(sizes).map(([key, value]) => [`--ga-ds-grid-item-size-${key}`, `${value}`]));
-    return _jsx("div", { className: "ga-ds-grid-item", style: style, children: children });
+    }, style: givenStyle, extraClassNames, } = props;
+    const style = {
+        ...Object.fromEntries(Object.entries(sizes).map(([key, value]) => [`--ga-ds-grid-item-size-${key}`, `${value}`])),
+        ...givenStyle,
+    };
+    const classNames = ["ga-ds-grid-item"];
+    if (extraClassNames) {
+        classNames.push(...extraClassNames);
+    }
+    return (_jsx("div", { className: classNames.join(" "), style: style, children: children }));
 };

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

@@ -1,6 +1,6 @@
 import { WordpressDefault } from "../../../global.types";
 export type ColumnSize = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
-export interface Attributes {
+export interface GridItemAttributes {
     sizes: {
         xs: ColumnSize;
         sm: ColumnSize;
@@ -8,6 +8,7 @@ export interface Attributes {
         lg: ColumnSize;
     };
 }
-export interface GridItemProps extends WordpressDefault, Attributes {
+export interface GridItemProps extends WordpressDefault, GridItemAttributes {
     children: React.ReactNode | React.ReactNode[];
+    style?: React.CSSProperties;
 }

package/dist/layout/layout.d.ts

@@ -1,3 +1,10 @@
 export * from './Container/Container';
+export * from './Container/Container.types';
 export * from './Grid/Grid';
+export * from './Grid/Grid.types';
 export * from './Grid/GridItem/GridItem';
+export * from './Grid/GridItem/GridItem.types';
+export * from './FlexCol/FlexCol';
+export * from './FlexCol/FlexCol.types';
+export * from './FlexBlock/FlexBlock';
+export * from './FlexBlock/FlexBlock.types';

package/dist/layout/layout.js

@@ -1,3 +1,10 @@
 export * from './Container/Container';
+export * from './Container/Container.types';
 export * from './Grid/Grid';
+export * from './Grid/Grid.types';
 export * from './Grid/GridItem/GridItem';
+export * from './Grid/GridItem/GridItem.types';
+export * from './FlexCol/FlexCol';
+export * from './FlexCol/FlexCol.types';
+export * from './FlexBlock/FlexBlock';
+export * from './FlexBlock/FlexBlock.types';

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

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

package/dist/molecules/ButtonGroup/ButtonGroup.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ButtonGroup = ({ alignment, children, extraClassNames }) => {
+    const style = {};
+    const cssAlignmentsMap = {
+        center: "center",
+        right: "flex-end",
+    };
+    if (alignment && cssAlignmentsMap[alignment]) {
+        style["--alignment"] = cssAlignmentsMap[alignment];
+    }
+    const classes = ["ga-ds-btn-group"];
+    if (extraClassNames) {
+        classes.push(...extraClassNames);
+    }
+    return (_jsx("div", { className: classes.join(" "), ...(Object.entries(style).length ? { style } : {}), children: children }));
+};

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

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

package/dist/molecules/ButtonGroup/ButtonGroup.types.js

@@ -0,0 +1 @@
+export {};

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

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

package/dist/molecules/Spoiler/Spoiler.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from "../../atoms/Icon/Icon";
+import { useSpoilerContext } from "../../context/SpoilerContext";
+export const Spoiler = (props) => {
+    const { summary, children, defaultOpen = false, index } = props;
+    const { activeIndex, setActiveIndex } = useSpoilerContext();
+    const isOpen = activeIndex === index ? true : defaultOpen;
+    const handleToggle = (e) => {
+        e.preventDefault();
+        setActiveIndex(index);
+    };
+    return (_jsxs("div", { className: `ga-ds-spoiler ${isOpen ? "is-open" : ""}`, children: [_jsx("div", { className: "ga-ds-spoiler__separator" }), _jsxs("div", { className: "ga-ds-spoiler__summary", onClick: handleToggle, role: "button", tabIndex: 0, children: [summary, _jsx("span", { className: "ga-ds-spoiler__indicator", children: _jsx(Icon, { name: "chevron-right", size: "sm" }) })] }), _jsx("div", { className: "ga-ds-spoiler__content", children: _jsx("div", { className: "ga-ds-spoiler__body", children: children }) })] }));
+};

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

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Spoiler } from "./Spoiler";
+declare const meta: Meta<typeof Spoiler>;
+export default meta;
+type Story = StoryObj<typeof Spoiler>;
+export declare const Default: Story;
+export declare const OpenByDefault: Story;

package/dist/molecules/Spoiler/Spoiler.stories.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Spoiler } from "./Spoiler";
+import { SpoilerProvider } from "../../context/SpoilerContext";
+const meta = {
+    title: "Molecules/Spoiler",
+    component: Spoiler,
+    tags: ["autodocs"],
+    decorators: [
+        (Story) => (_jsx(SpoilerProvider, { children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {
+    args: {
+        summary: "Click to reveal the spoiler content",
+        children: (_jsxs(_Fragment, { children: [_jsx("p", { children: "This is the hidden spoiler content." }), _jsx("p", { children: "It can include any React nodes." })] })),
+    },
+};
+export const OpenByDefault = {
+    args: {
+        summary: "This spoiler is open by default",
+        children: (_jsxs(_Fragment, { children: [_jsx("p", { children: "The spoiler content is visible on load." }), _jsx("p", { children: "You can still toggle it closed." })] })),
+        defaultOpen: true,
+    },
+};

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

@@ -0,0 +1,6 @@
+export interface SpoilerProps {
+    summary: string;
+    children: React.ReactNode | React.ReactNode[];
+    defaultOpen?: boolean;
+    index: number;
+}

package/dist/molecules/Spoiler/Spoiler.types.js

@@ -0,0 +1 @@
+export {};

package/dist/molecules/molecules.d.ts

@@ -0,0 +1,2 @@
+export * from './ButtonGroup/ButtonGroup';
+export * from './Spoiler/Spoiler';

package/dist/molecules/molecules.js

@@ -0,0 +1,2 @@
+export * from './ButtonGroup/ButtonGroup';
+export * from './Spoiler/Spoiler';

package/dist/organisms/Card/Card.d.ts

@@ -1,3 +1,3 @@
-import { JSX } from 'react/jsx-runtime';
-import type { CardProps } from './Card.types';
-export declare const Card: ({ children, variant, extraClassNames, type }: CardProps) => JSX.Element;
+import { JSX } from "react/jsx-runtime";
+import type { CardProps } from "./Card.types";
+export declare const Card: ({ children, variant, extraClassNames, type, style, backgroundImage, }: CardProps) => JSX.Element;

package/dist/organisms/Card/Card.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export const Card = ({ children, variant = 'primary', extraClassNames, type = 'default' }) => {
-    const classNames = ['ga-ds-card', `ga-ds-card--${variant}`, `ga-ds-card--${type}`, ...(extraClassNames || [])];
-    return _jsx("div", { className: classNames.join(' '), children: children });
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Card = ({ children, variant = "primary", extraClassNames, type = "image", style, backgroundImage, }) => {
+    const classNames = ["ga-ds-card", `ga-ds-card--${variant}`, `ga-ds-card--${type}`, ...(extraClassNames || [])];
+    return (_jsxs("div", { ...(style && { style }), className: classNames.join(" "), children: [backgroundImage && _jsx("img", { src: backgroundImage.sizes?.full?.url, alt: backgroundImage?.alt }), children] }));
 };