@a-little-world/little-world-design-system 2.10.0

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { AccordionBaseProps } from '@a-little-world/little-world-design-system-core';
+import { AccordionContent } from './styles';
+export { AccordionContent };
+export interface AccordionProps extends AccordionBaseProps {
+    children?: React.ReactNode;
+    className?: string;
+    ContentWrapper?: React.ComponentType<{
+        children: React.ReactNode;
+    }>;
+    defaultOpen?: boolean;
+    onToggle?: (isOpen: boolean) => void;
+}
+declare const Accordion: React.FC<AccordionProps>;
+export default Accordion;

package/dist/cjs/components/Accordion/Accordion.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccordionContent = void 0;
+const react_1 = __importDefault(require("react"));
+const Text_1 = __importDefault(require("../Text/Text"));
+const little_world_design_system_core_1 = require("@a-little-world/little-world-design-system-core");
+const styles_1 = require("./styles");
+Object.defineProperty(exports, "AccordionContent", { enumerable: true, get: function () { return styles_1.AccordionContent; } });
+const Accordion = ({ className, ContentWrapper, headerType, headerColor, items, }) => {
+    return (react_1.default.createElement(styles_1.AccordionRoot, { className: className, type: "single", collapsible: true }, items.map(({ content, header }) => (react_1.default.createElement(styles_1.AccordionItem, { value: header, key: header },
+        react_1.default.createElement(styles_1.AccordionHeader, { id: header },
+            react_1.default.createElement(styles_1.AccordionTrigger, null,
+                react_1.default.createElement(Text_1.default, { type: headerType || little_world_design_system_core_1.TextTypes.Body4, color: headerColor }, header),
+                react_1.default.createElement(styles_1.TriggerIcon, { label: "accordion toggle icon", width: "14px", height: "14px", color: headerColor }))),
+        ContentWrapper ? (react_1.default.createElement(ContentWrapper, null, content)) : (react_1.default.createElement(styles_1.AccordionContent, null, content)))))));
+};
+exports.default = Accordion;

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

@@ -0,0 +1,18 @@
+import * as Accordion from '@radix-ui/react-accordion';
+export declare const AccordionRoot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<(Accordion.AccordionSingleProps & import("react").RefAttributes<HTMLDivElement>) | (Accordion.AccordionMultipleProps & import("react").RefAttributes<HTMLDivElement>), import("styled-components/dist/types").BaseObject>> & string & Omit<import("react").ForwardRefExoticComponent<(Accordion.AccordionSingleProps | Accordion.AccordionMultipleProps) & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const AccordionItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Accordion.AccordionItemProps & import("react").RefAttributes<HTMLDivElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<Accordion.AccordionItemProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const AccordionHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Accordion.AccordionHeaderProps & import("react").RefAttributes<HTMLHeadingElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<Accordion.AccordionHeaderProps & import("react").RefAttributes<HTMLHeadingElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const AccordionContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Accordion.AccordionContentProps & import("react").RefAttributes<HTMLDivElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<Accordion.AccordionContentProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const AccordionTrigger: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Accordion.AccordionTriggerProps & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<Accordion.AccordionTriggerProps & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const TriggerIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("@a-little-world/little-world-design-system-core").IconBaseProps, "children"> & import("react").SVGProps<SVGElement> & {
+    gradient?: import("@a-little-world/little-world-design-system-core").Gradients;
+} & {
+    style?: import("react").CSSProperties;
+    color?: string;
+}, never>> & string & Omit<{
+    ({ backgroundColor, borderColor, circular, className, color, gradient, height, label, labelVisible, style, width, }: import("../Icon/Icon").IconSvgProps & {
+        style?: import("react").CSSProperties;
+        color?: string;
+    }): import("react").JSX.Element;
+    displayName: string;
+}, keyof import("react").Component<any, {}, any>>;

package/dist/cjs/components/Accordion/styles.js

@@ -0,0 +1,100 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TriggerIcon = exports.AccordionTrigger = exports.AccordionContent = exports.AccordionHeader = exports.AccordionItem = exports.AccordionRoot = void 0;
+const Accordion = __importStar(require("@radix-ui/react-accordion"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Icon_1 = require("../Icon");
+exports.AccordionRoot = (0, styled_components_1.default)(Accordion.Root) `
+  border: 1px solid ${({ theme }) => theme.color.border.subtle};
+  border-radius: 8px;
+
+  :root {
+    --radix-accordion-content-width: 100%;
+    --radix-collapsible-content-width: 100%;
+  }
+`;
+exports.AccordionItem = (0, styled_components_1.default)(Accordion.Item) `
+  box-sizing: border-box;
+  margin: 0;
+  width: 100%;
+  border-bottom: 1px solid ${({ theme }) => theme.color.border.subtle};
+  padding: ${({ theme }) => theme.spacing.xxsmall}
+    ${({ theme }) => theme.spacing.small};
+  padding-bottom: 0px;
+
+  &:last-child {
+    border-top-width: 0px;
+    border-bottom-width: 0px;
+  }
+`;
+exports.AccordionHeader = (0, styled_components_1.default)(Accordion.Header) `
+  margin: 0;
+  width: 100%;
+`;
+exports.AccordionContent = (0, styled_components_1.default)(Accordion.Content) `
+  width: 100%;
+  background: ${({ theme }) => theme.color.surface.secondary};
+  border-radius: 10px;
+  gap: ${({ theme }) => theme.spacing.xxsmall};
+  padding: ${({ theme }) => theme.spacing.small};
+  margin-bottom: ${({ theme }) => theme.spacing.small};
+  line-height: 1.5;
+  display: flex;
+  flex-direction: column;
+
+  &[hidden] {
+    display: none;
+  }
+`;
+exports.AccordionTrigger = (0, styled_components_1.default)(Accordion.Trigger) `
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  background: none;
+  padding: ${({ theme }) => theme.spacing.xxsmall} 0;
+  padding-bottom: ${({ theme }) => theme.spacing.small};
+  gap: ${({ theme }) => theme.spacing.small};
+  width: 100%;
+  border: none;
+  text-align: left;
+`;
+exports.TriggerIcon = (0, styled_components_1.default)(Icon_1.ChevronDownIcon) `
+  flex-shrink: 0;
+  margin-top: 6px;
+`;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ButtonAppearance, ButtonBaseProps, ButtonSizes, ButtonVariations } from '@a-little-world/little-world-design-system-core';
+export { ButtonAppearance, ButtonSizes, ButtonVariations };
+export interface ButtonProps extends ButtonBaseProps, React.ComponentPropsWithoutRef<'button'> {
+    isDummy?: boolean;
+}
+export type Ref = HTMLButtonElement;
+declare const Button: React.FC<ButtonProps>;
+export default Button;

package/dist/cjs/components/Button/Button.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonVariations = exports.ButtonSizes = exports.ButtonAppearance = void 0;
+const react_1 = __importDefault(require("react"));
+const little_world_design_system_core_1 = require("@a-little-world/little-world-design-system-core");
+Object.defineProperty(exports, "ButtonAppearance", { enumerable: true, get: function () { return little_world_design_system_core_1.ButtonAppearance; } });
+Object.defineProperty(exports, "ButtonSizes", { enumerable: true, get: function () { return little_world_design_system_core_1.ButtonSizes; } });
+Object.defineProperty(exports, "ButtonVariations", { enumerable: true, get: function () { return little_world_design_system_core_1.ButtonVariations; } });
+const Loading_1 = __importDefault(require("../Loading/Loading"));
+const styles_1 = require("./styles");
+const Button = react_1.default.forwardRef(({ appearance = little_world_design_system_core_1.ButtonAppearance.Primary, backgroundColor, borderColor, color, children, isDummy, loading, size, variation = little_world_design_system_core_1.ButtonVariations.Basic, type = 'button', ...rest }, ref) => {
+    return (react_1.default.createElement(styles_1.StyledButton, { "$appearance": appearance, "$backgroundColor": backgroundColor, "$borderColor": borderColor, "$color": color, "$size": size, "$variation": variation, as: isDummy ? 'div' : 'button', ref: ref, type: type, ...rest }, loading ? react_1.default.createElement(Loading_1.default, null) : children));
+});
+exports.default = Button;

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

@@ -0,0 +1,16 @@
+import { ButtonAppearance, ButtonSizes, ButtonVariations } from '@a-little-world/little-world-design-system-core';
+export declare const OPTION_BUTTON_CSS: import("styled-components").RuleSet<{
+    $appearance?: ButtonAppearance;
+    $backgroundColor?: string;
+    $color?: string;
+}>;
+export declare const PrimaryButtonCss: import("styled-components").RuleSet<object>;
+export declare const SecondaryButtonCss: import("styled-components").RuleSet<object>;
+export declare const StyledButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $appearance?: ButtonAppearance;
+    $backgroundColor?: string;
+    $borderColor?: string;
+    $color?: string;
+    $variation: ButtonVariations;
+    $size?: ButtonSizes;
+}>> & string;

package/dist/cjs/components/Button/styles.js

@@ -0,0 +1,313 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledButton = exports.SecondaryButtonCss = exports.PrimaryButtonCss = exports.OPTION_BUTTON_CSS = void 0;
+const styled_components_1 = __importStar(require("styled-components"));
+const little_world_design_system_core_1 = require("@a-little-world/little-world-design-system-core");
+const styles_1 = require("../Link/styles");
+exports.OPTION_BUTTON_CSS = (0, styled_components_1.css) `
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  background: ${({ $backgroundColor, theme }) => $backgroundColor || theme.color.surface.secondary};
+  border: 1px solid ${({ theme }) => theme.color.border.subtle};
+  color: ${({ $color, theme }) => $color || theme.color.text.primary};
+  border-radius: 15px;
+  font-weight: 700;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding: ${({ theme }) => theme.spacing.xsmall};
+  gap: ${({ theme }) => theme.spacing.xxxsmall};
+  max-width: 144px;
+  align-items: center;
+  justify-content: center;
+  font-weight: normal;
+  flex-shrink: 0;
+  min-height: 69px;
+
+  &:not(:disabled):hover {
+    filter: brightness(95%);
+    cursor: pointer;
+    box-shadow:
+      0 0 10px 1px rgb(0 0 0 / 11%),
+      0 0 8px 3px rgb(255 255 255 / 15%);
+  }
+
+  ${({ $appearance, $backgroundColor, $color, theme }) => $appearance === little_world_design_system_core_1.ButtonAppearance.Secondary &&
+    (0, styled_components_1.css) `
+      color: ${$color || theme.color.text.button};
+      background: ${$backgroundColor || theme.color.gradient.blue10};
+    `}
+`;
+const StandardButtonCss = (0, styled_components_1.css) `
+  font-weight: 700;
+  border-radius: 90px;
+  padding: ${({ theme }) => `${theme.spacing.xsmall} ${theme.spacing.small}`};
+  height: 49px;
+  max-width: 480px;
+  gap: ${({ theme }) => theme.spacing.xxxxsmall};
+
+  ${({ $size }) => {
+    if ($size === little_world_design_system_core_1.ButtonSizes.Small || !$size) {
+        return `min-width: 110px;`;
+    }
+    if ($size === little_world_design_system_core_1.ButtonSizes.Medium) {
+        return `min-width: 160px;`;
+    }
+    if ($size === little_world_design_system_core_1.ButtonSizes.Large) {
+        return `min-width: 240px;`;
+    }
+    if ($size === little_world_design_system_core_1.ButtonSizes.Stretch) {
+        return `width: 100%;`;
+    }
+}}
+`;
+exports.PrimaryButtonCss = (0, styled_components_1.css) `
+  ${StandardButtonCss}
+
+  color: ${({ theme }) => theme.color.text.button};
+  border: none;
+  background: ${({ theme, $backgroundColor }) => $backgroundColor || theme.color.gradient.orange10};
+  transition:
+    background-color 0.5s ease,
+    filter 0.5s ease,
+    border-color 0.5s ease,
+    color 0.5s ease,
+    0.4s;
+
+  &:not(:disabled):hover {
+    filter: brightness(80%);
+    transition:
+      background-color 0.5s ease,
+      filter 0.5s ease,
+      border-color 0.5s ease,
+      color 0.5s ease,
+      0.4s;
+  }
+`;
+exports.SecondaryButtonCss = (0, styled_components_1.css) `
+  ${StandardButtonCss}
+
+  ${({ $color, $backgroundColor, theme }) => `
+    border: 2px solid ${$color || theme.color.border.bold};
+    background-color: ${$backgroundColor || 'transparent'};
+    color: ${$color || theme.color.text.heading};
+    transition: background-color 0.5s ease, filter 0.5s ease,
+    border-color 0.5s ease, color 0.5s ease, 0.4s;
+
+    &:not(:disabled):hover {
+      background: ${$color || theme.color.text.heading};
+      color: ${theme.color.text.control};
+      border-color: ${$color || theme.color.border.bold};
+      transition: background-color 0.5s ease, filter 0.5s ease,
+      border-color 0.5s ease, color 0.5s ease, 0.4s;
+    }
+  `}
+`;
+exports.StyledButton = styled_components_1.default.button `
+  cursor: pointer;
+  position: relative;
+  color: ${({ $color }) => $color || 'currentColor'};
+  font-family: 'Signika Negative';
+  font-size: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  transition:
+    background-color 0.5s ease,
+    filter 0.5s ease,
+    border-color 0.5s ease,
+    color 0.5s ease,
+    0.4s;
+
+  &:not(:disabled):hover {
+    transition:
+      background-color 0.5s ease,
+      filter 0.5s ease,
+      border-color 0.5s ease,
+      color 0.5s ease,
+      0.4s;
+  }
+
+  & > * {
+    cursor: pointer;
+  }
+
+  &:disabled {
+    background: ${({ theme }) => theme.color.surface.disabled};
+    border-color: ${({ theme }) => theme.color.border.disabled};
+    color: ${({ theme }) => theme.color.text.disabled};
+    cursor: not-allowed;
+
+    & > * {
+      cursor: not-allowed;
+    }
+  }
+
+  ${({ $appearance, $backgroundColor, $borderColor, $size, $variation, theme, }) => {
+    if ($variation === little_world_design_system_core_1.ButtonVariations.Basic) {
+        if ($appearance === little_world_design_system_core_1.ButtonAppearance.Primary)
+            return exports.PrimaryButtonCss;
+        if ($appearance === little_world_design_system_core_1.ButtonAppearance.Secondary)
+            return exports.SecondaryButtonCss;
+    }
+    if ($variation === little_world_design_system_core_1.ButtonVariations.Option)
+        return exports.OPTION_BUTTON_CSS;
+    let CIRCLE_DIMENSIONS;
+    switch ($size) {
+        case little_world_design_system_core_1.ButtonSizes.Small:
+            CIRCLE_DIMENSIONS = (0, styled_components_1.css) `
+          width: 28px;
+          height: 28px;
+        `;
+            break;
+        case little_world_design_system_core_1.ButtonSizes.Medium:
+            CIRCLE_DIMENSIONS = (0, styled_components_1.css) `
+          width: 36px;
+          height: 36px;
+        `;
+            break;
+        default:
+        case little_world_design_system_core_1.ButtonSizes.Large:
+            CIRCLE_DIMENSIONS = (0, styled_components_1.css) `
+          width: 44px;
+          height: 44px;
+        `;
+            break;
+    }
+    if ($variation === little_world_design_system_core_1.ButtonVariations.Circle)
+        return (0, styled_components_1.css) `
+        border: 1px solid ${$borderColor || $backgroundColor || 'currentColor'};
+        background: ${$backgroundColor || 'transparent'};
+        border-radius: 50%;
+        padding: 0;
+        transition: opacity 0.5s ease;
+        ${CIRCLE_DIMENSIONS}
+
+        &:not(:disabled):hover {
+          transition: opacity 0.3s ease;
+          opacity: 0.6;
+        }
+
+        ${CIRCLE_DIMENSIONS}
+      `;
+    let ICON_DIMENSIONS;
+    switch ($size) {
+        case little_world_design_system_core_1.ButtonSizes.Small:
+            ICON_DIMENSIONS = (0, styled_components_1.css) `
+          width: 16px;
+          height: 16px;
+        `;
+            break;
+        case little_world_design_system_core_1.ButtonSizes.Medium:
+            ICON_DIMENSIONS = (0, styled_components_1.css) `
+          width: 24px;
+          height: 24px;
+        `;
+            break;
+        case little_world_design_system_core_1.ButtonSizes.Large:
+            ICON_DIMENSIONS = (0, styled_components_1.css) `
+          width: 32px;
+          height: 32px;
+        `;
+            break;
+        default:
+            break;
+    }
+    if ($variation === little_world_design_system_core_1.ButtonVariations.Icon) {
+        return (0, styled_components_1.css) `
+        background: ${$backgroundColor || 'transparent'};
+        border-radius: ${theme.radius.xxxsmall};
+        width: auto;
+        min-width: 0;
+        height: fit-content;
+        transition: background 0.5s ease;
+
+        &:has(> svg:first-child) {
+          width: fit-content;
+          padding: ${!$size || $size === little_world_design_system_core_1.ButtonSizes.Small
+            ? theme.spacing.xxxsmall
+            : theme.spacing.xxsmall};
+        }
+
+        &:not(:disabled):has(> svg:first-child):hover {
+          transition: background 0.3s ease;
+          background: ${theme.color.surface.secondary};
+        }
+
+        &:not(:disabled):hover {
+          svg {
+            opacity: 0.5;
+            transition: opacity 0.5s ease;
+          }
+        }
+
+        svg {
+          transition: opacity 0.5s ease;
+          ${ICON_DIMENSIONS}
+        }
+      `;
+    }
+    if ($variation === little_world_design_system_core_1.ButtonVariations.Inline)
+        return (0, styled_components_1.css) `
+        display: inline-flex;
+        border: none;
+        border-radius: 0px;
+        height: auto;
+        width: auto;
+        gap: ${({ theme }) => theme.spacing.xxxsmall};
+        padding: ${({ theme }) => theme.spacing.xxxxsmall} 0;
+        transition: all 0.3s ease-in-out;
+        background: transparent;
+
+        &:disabled {
+          background: transparent;
+        }
+
+        ${styles_1.LINK_HOVER_CSS}
+
+        &:not(:disabled):hover {
+          background-position: 0;
+
+          &::before {
+            width: 100%;
+          }
+        }
+      `;
+}}
+`;

package/dist/cjs/components/Card/Card.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { CardBaseProps, CardContentProps, CardDimensions, CardFooterProps, CardHeaderProps, CardSizes } from '@a-little-world/little-world-design-system-core';
+export { CardSizes, CardDimensions };
+export declare const CardContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, CardContentProps>> & string;
+type CardProps = CardBaseProps & {
+    className?: string;
+};
+export declare const CardHeader: React.FC<CardHeaderProps>;
+export declare const CardFooter: React.FC<CardFooterProps>;
+declare const Card: React.FC<CardProps>;
+export default Card;

package/dist/cjs/components/Card/Card.js

@@ -0,0 +1,108 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardFooter = exports.CardHeader = exports.CardContent = exports.CardDimensions = exports.CardSizes = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const little_world_design_system_core_1 = require("@a-little-world/little-world-design-system-core");
+Object.defineProperty(exports, "CardDimensions", { enumerable: true, get: function () { return little_world_design_system_core_1.CardDimensions; } });
+Object.defineProperty(exports, "CardSizes", { enumerable: true, get: function () { return little_world_design_system_core_1.CardSizes; } });
+const Text_1 = __importDefault(require("../Text/Text"));
+const little_world_design_system_core_2 = require("@a-little-world/little-world-design-system-core");
+const styles_1 = require("../../utils/styles");
+const StyledCard = styled_components_1.default.div `
+  border-radius: ${({ theme }) => theme.radius.small};
+  background: ${({ theme }) => theme.color.surface.primary};
+  border: 1px solid
+    ${({ theme, $borderColor }) => $borderColor || theme.color.border.subtle};
+  box-shadow: 0px 1px 25px 1px rgba(0, 0, 0, 0.05);
+  width: 100%;
+  max-width: 100%;
+  max-height: 100%;
+
+  display: flex;
+  flex-direction: column;
+  padding: ${({ theme }) => theme.spacing.small};
+
+  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
+    border-radius: ${({ theme }) => theme.radius.xxlarge};
+    padding: ${({ $width, theme }) => $width === (0, styles_1.pixelate)(little_world_design_system_core_1.CardDimensions[little_world_design_system_core_1.CardSizes.Small])
+    ? theme.spacing.medium
+    : theme.spacing.large};
+
+    ${({ $width }) => $width &&
+    (0, styled_components_1.css) `
+        width: ${(0, styles_1.pixelate)(little_world_design_system_core_1.CardDimensions[$width])};
+      `}
+  }
+
+  ${({ $height }) => $height &&
+    (0, styled_components_1.css) `
+      height: ${$height};
+    `}
+`;
+const StyledCardHeader = (0, styled_components_1.default)(Text_1.default) `
+  margin-bottom: ${({ theme }) => theme.spacing.small};
+`;
+exports.CardContent = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  align-items: ${({ align }) => align || 'center'};
+  gap: ${({ gap, theme }) => gap || theme.spacing.small};
+  text-align: ${({ textAlign }) => textAlign || 'left'};
+  margin-bottom: ${({ marginBottom, theme }) => marginBottom || theme.spacing.small};
+  overflow: scroll;
+`;
+const Footer = styled_components_1.default.div `
+  display: flex;
+  order: 1;
+  margin-top: auto;
+  width: 100%;
+  gap: ${({ theme }) => theme.spacing.small};
+
+  ${({ $align }) => $align &&
+    (0, styled_components_1.css) `
+      justify-content: ${$align};
+    `};
+`;
+const CardHeader = ({ children, textColor, textType, }) => (react_1.default.createElement(StyledCardHeader, { type: textType || little_world_design_system_core_2.TextTypes.Heading4, center: true, color: textColor }, children));
+exports.CardHeader = CardHeader;
+const CardFooter = ({ children, align }) => (react_1.default.createElement(Footer, { "$align": align }, children));
+exports.CardFooter = CardFooter;
+const Card = ({ borderColor, children, className, height, width, }) => (react_1.default.createElement(StyledCard, { className: className, "$borderColor": borderColor, "$height": height, "$width": width }, children));
+exports.default = Card;

package/dist/cjs/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,15 @@
+import { CheckboxProps as RadixCheckboxProps } from '@radix-ui/react-checkbox';
+import React from 'react';
+type CheckboxProps = {
+    className?: string;
+    color?: string;
+    error?: string;
+    id?: string;
+    inputRef?: React.RefObject<HTMLButtonElement>;
+    label?: string;
+    readOnly?: boolean;
+    required?: boolean;
+} & RadixCheckboxProps;
+export declare const CheckboxButton: React.FC<CheckboxProps>;
+declare const Checkbox: React.FC<CheckboxProps>;
+export default Checkbox;