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

package/dist/cjs/utils/parser.js

@@ -0,0 +1,200 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Button_1 = __importDefault(require("../components/Button/Button"));
+const Link_1 = __importDefault(require("../components/Link/Link"));
+const replaceUrlsWithAnchors_1 = __importDefault(require("./replaceUrlsWithAnchors"));
+const ColorText = styled_components_1.default.strong `
+  color: ${({ theme, color }) => color === SupportedColorTags.bold
+    ? 'currentColor'
+    : theme.color.text[color]};
+`;
+const ANCHOR_TAG = 'a';
+const BUTTON_TAG = 'button';
+var SupportedColorTags;
+(function (SupportedColorTags) {
+    SupportedColorTags["highlight"] = "highlight";
+    SupportedColorTags["bold"] = "bold";
+})(SupportedColorTags || (SupportedColorTags = {}));
+const findTags = (text) => {
+    const tags = [];
+    const textLength = text.length;
+    let position = 0;
+    while (position < textLength) {
+        const openBracket = text.indexOf('<', position);
+        if (openBracket === -1)
+            break;
+        const closeBracket = text.indexOf('>', openBracket);
+        if (closeBracket === -1)
+            break;
+        const tagContent = text.substring(openBracket + 1, closeBracket);
+        // Check if it's a valid opening tag (starts with letter)
+        if (/^[a-zA-Z]/.test(tagContent)) {
+            const firstSpace = tagContent.indexOf(' ');
+            const tagName = firstSpace === -1 ? tagContent : tagContent.substring(0, firstSpace);
+            const attributesText = firstSpace === -1 ? '' : tagContent.substring(firstSpace + 1);
+            // Parse attributes safely
+            let attributes = {};
+            if (attributesText.trim()) {
+                try {
+                    attributes = JSON.parse(attributesText);
+                }
+                catch {
+                    // Invalid JSON - treat as plain text
+                    position = closeBracket + 1;
+                    continue;
+                }
+            }
+            // Look for closing tag
+            const closingTag = `</${tagName}>`;
+            const closingTagIndex = text.indexOf(closingTag, closeBracket + 1);
+            if (closingTagIndex !== -1) {
+                // Found complete tag
+                tags.push({
+                    start: openBracket,
+                    end: closingTagIndex + closingTag.length,
+                    tagName,
+                    attributes,
+                    hasClosingTag: true,
+                    contentStart: closeBracket + 1,
+                    contentEnd: closingTagIndex,
+                });
+                position = closingTagIndex + closingTag.length;
+            }
+            else {
+                // No closing tag - treat as plain text
+                position = closeBracket + 1;
+            }
+        }
+        else {
+            // Not a valid tag - move past it
+            position = closeBracket + 1;
+        }
+    }
+    return tags;
+};
+const parseContent = (content, options) => {
+    const tags = findTags(content);
+    if (tags.length === 0) {
+        return [content];
+    }
+    const components = [];
+    let currentIndex = 0;
+    for (const tag of tags) {
+        // Add text before this tag
+        if (tag.start > currentIndex) {
+            components.push(content.substring(currentIndex, tag.start));
+        }
+        // Extract content between tags
+        const tagContent = content.substring(tag.contentStart, tag.contentEnd);
+        // Process the tag based on type and options
+        if (tag.tagName === ANCHOR_TAG) {
+            // Always process anchor tags
+            const nestedContent = parseContent(tagContent, options);
+            components.push(tag.attributes.href ? (react_1.default.createElement(Link_1.default, { key: `${tag.tagName}-${tag.start}-${tag.end}`, to: tag.attributes.href, ...tag.attributes }, nestedContent)) : (react_1.default.createElement(react_1.default.Fragment, null, nestedContent)));
+        }
+        else if (options.onlyLinks) {
+            // In onlyLinks mode, treat all non-anchor tags as plain text
+            components.push(content.substring(tag.start, tag.end));
+        }
+        else if (tag.tagName === BUTTON_TAG) {
+            const nestedContent = parseContent(tagContent, options);
+            components.push(react_1.default.createElement(Button_1.default, { key: `${tag.tagName}-${tag.start}-${tag.end}`, ...tag.attributes }, nestedContent));
+        }
+        else if (Object.values(SupportedColorTags).includes(tag.tagName)) {
+            const nestedContent = parseContent(tagContent, options);
+            components.push(react_1.default.createElement(ColorText, { key: `${tag.tagName}-${tag.start}-${tag.end}`, color: SupportedColorTags[tag.tagName] }, nestedContent));
+        }
+        else if (options.customElements) {
+            // Check for custom elements
+            const customElement = options.customElements.find(element => element.tag === tag.tagName);
+            if (customElement) {
+                const nestedContent = parseContent(tagContent, options);
+                components.push(react_1.default.createElement(customElement.Component, { key: `${tag.tagName}-${tag.start}-${tag.end}`, ...tag.attributes, ...customElement.props }, nestedContent));
+            }
+            else {
+                // Unrecognized tag, add as plain text
+                components.push(content.substring(tag.start, tag.end));
+            }
+        }
+        else {
+            // Unrecognized tag, add as plain text
+            components.push(content.substring(tag.start, tag.end));
+        }
+        currentIndex = tag.end;
+    }
+    // Add remaining text after last tag
+    if (currentIndex < content.length) {
+        components.push(content.substring(currentIndex));
+    }
+    return components;
+};
+const textParser = (text, options = {}) => {
+    const nonInteractive = options.nonInteractive || false;
+    // First convert HTML links to recognised anchor tags
+    const textWithParsedUrls = nonInteractive
+        ? text
+        : (0, replaceUrlsWithAnchors_1.default)(text);
+    // Find all complete tags
+    const tags = findTags(textWithParsedUrls);
+    if (tags.length === 0) {
+        return textWithParsedUrls;
+    }
+    const components = [];
+    let currentIndex = 0;
+    for (const tag of tags) {
+        // Add text before this tag
+        if (tag.start > currentIndex) {
+            components.push(textWithParsedUrls.substring(currentIndex, tag.start));
+        }
+        // Extract content between tags
+        const content = textWithParsedUrls.substring(tag.contentStart, tag.contentEnd);
+        // Process the tag based on type
+        if (tag.tagName === ANCHOR_TAG) {
+            // Always process anchor tags (even in onlyLinks mode)
+            const nestedContent = parseContent(content, options);
+            components.push(tag.attributes.href && !nonInteractive ? (react_1.default.createElement(Link_1.default, { key: `${tag.tagName}-${tag.start}-${tag.end}`, to: tag.attributes.href, ...tag.attributes }, nestedContent)) : (react_1.default.createElement(react_1.default.Fragment, null, nestedContent)));
+        }
+        else if (options.onlyLinks) {
+            // In onlyLinks mode, treat all non-anchor tags as plain text
+            components.push(textWithParsedUrls.substring(tag.start, tag.end));
+        }
+        else if (tag.tagName === BUTTON_TAG) {
+            const nestedContent = parseContent(content, options);
+            components.push(nonInteractive ? (react_1.default.createElement(react_1.default.Fragment, null, nestedContent)) : (react_1.default.createElement(Button_1.default, { key: `${tag.tagName}-${tag.start}-${tag.end}`, ...tag.attributes }, nestedContent)));
+        }
+        else if (Object.values(SupportedColorTags).includes(tag.tagName)) {
+            const nestedContent = parseContent(content, options);
+            components.push(nonInteractive ? (react_1.default.createElement(react_1.default.Fragment, null, nestedContent)) : (react_1.default.createElement(ColorText, { key: `${tag.tagName}-${tag.start}-${tag.end}`, color: SupportedColorTags[tag.tagName] }, nestedContent)));
+        }
+        else if (options.customElements) {
+            // Check for custom elements
+            const customElement = options.customElements.find(element => element.tag === tag.tagName);
+            if (customElement) {
+                const nestedContent = parseContent(content, options);
+                components.push(react_1.default.createElement(customElement.Component, { key: `${tag.tagName}-${tag.start}-${tag.end}`, ...tag.attributes, ...customElement.props }, nestedContent));
+            }
+            else {
+                // Unrecognized tag, add as plain text
+                components.push(textWithParsedUrls.substring(tag.start, tag.end));
+            }
+        }
+        else {
+            // Unrecognized tag, add as plain text
+            components.push(textWithParsedUrls.substring(tag.start, tag.end));
+        }
+        currentIndex = tag.end;
+    }
+    // Add remaining text after last tag
+    if (currentIndex < textWithParsedUrls.length) {
+        components.push(textWithParsedUrls.substring(currentIndex));
+    }
+    return (react_1.default.createElement("span", null, components.map((section, index) => typeof section === 'string'
+        ? section
+        : react_1.default.cloneElement(section, { key: index }))));
+};
+exports.default = textParser;

package/dist/cjs/utils/replaceUrlsWithAnchors.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Replaces all URLs in a text with HTML anchor tags
+ * @param text - The input text containing URLs
+ * @returns The text with URLs replaced with anchor tags
+ */
+export default function replaceUrlsWithAnchors(text: string): string;

package/dist/cjs/utils/replaceUrlsWithAnchors.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = replaceUrlsWithAnchors;
+const little_world_design_system_core_1 = require("@a-little-world/little-world-design-system-core");
+// Example outputs:
+/*
+Input: Check out www.google.com for more info
+Output: Check out <a href="https://www.google.com" target="_blank">www.google.com</a> for more info
+
+Input: Visit little-world.io and https://example.com
+Output: Visit <a href="https://little-world.io" target="_blank">little-world.io</a> and <a href="https://example.com" target="_blank">https://example.com</a>
+*/
+const urlPattern = /(?<=^|\s)(?:https?:\/\/)?(?:www\.)?(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,}(?:\/[^\s]*)?/g;
+/**
+ * Replaces all URLs in a text with HTML anchor tags
+ * @param text - The input text containing URLs
+ * @returns The text with URLs replaced with anchor tags
+ */
+function replaceUrlsWithAnchors(text) {
+    return text.replace(urlPattern, match => {
+        // Ensure URL has protocol for href
+        try {
+            if (!(0, little_world_design_system_core_1.isValidUrl)(match))
+                return match;
+            const href = match.startsWith('http') ? match : `https://${match}`;
+            return `<a {"target":"_blank", "href":"${href}"}>${match}</a>`;
+        }
+        catch {
+            return match;
+        }
+    });
+}

package/dist/cjs/utils/status.d.ts

@@ -0,0 +1,6 @@
+type StatusProps = {
+    React: string;
+    Figma: string;
+};
+declare const Status: ({ React, Figma }: StatusProps) => import("react").JSX.Element;
+export default Status;

package/dist/cjs/utils/status.js

@@ -0,0 +1,54 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_components_1 = __importDefault(require("styled-components"));
+const Wrapper = styled_components_1.default.div `
+  display: flex;
+  gap: ${({ theme }) => theme.spacing.xxsmall};
+  margin: ${({ theme }) => theme.spacing.medium}; 0 ${({ theme }) => theme.spacing.xsmall}; 0;
+`;
+const ReactStatus = styled_components_1.default.div `
+  border-radius: 4px;
+  padding: ${({ theme }) => theme.spacing.xxsmall}
+    ${({ theme }) => theme.spacing.xsmall};
+  font-family: monospace;
+  background: #20232a;
+  color: #61dafb;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing.xxsmall};
+  align-items: center;
+  font-size: 1rem;
+`;
+const FigmaStatus = styled_components_1.default.a `
+  border-radius: 4px;
+  padding: ${({ theme }) => theme.spacing.xxsmall}
+    ${({ theme }) => theme.spacing.xsmall};
+  display: flex;
+  gap: ${({ theme }) => theme.spacing.xsmall};
+  align-items: center;
+  background: #000;
+  text-decoration: none;
+  color: #fff;
+  font-size: 0.9rem;
+
+  &:hover {
+    background: #333;
+  }
+`;
+const Status = ({ React, Figma }) => {
+    return (React.createElement(Wrapper, null,
+        React && (React.createElement(ReactStatus, null,
+            React.createElement("img", { src: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xMS41IC0xMC4yMzE3NCAyMyAyMC40NjM0OCI+CiAgPHRpdGxlPlJlYWN0IExvZ288L3RpdGxlPgogIDxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSIyLjA1IiBmaWxsPSIjNjFkYWZiIi8+CiAgPGcgc3Ryb2tlPSIjNjFkYWZiIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIi8+CiAgICA8ZWxsaXBzZSByeD0iMTEiIHJ5PSI0LjIiIHRyYW5zZm9ybT0icm90YXRlKDYwKSIvPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIiB0cmFuc2Zvcm09InJvdGF0ZSgxMjApIi8+CiAgPC9nPgo8L3N2Zz4K", alt: "", height: "20" }),
+            React.createElement("div", null, React))),
+        Figma && (React.createElement(FigmaStatus, { href: Figma },
+            React.createElement("svg", { height: "20px", viewBox: "0 0 38 57" },
+                React.createElement("path", { fill: "#1abcfe", d: "M19 28.5a9.5 9.5 0 1 1 19 0 9.5 9.5 0 0 1-19 0z" }),
+                React.createElement("path", { fill: "#0acf83", d: "M0 47.5A9.5 9.5 0 0 1 9.5 38H19v9.5a9.5 9.5 0 1 1-19 0z" }),
+                React.createElement("path", { fill: "#ff7262", d: "M19 0v19h9.5a9.5 9.5 0 1 0 0-19H19z" }),
+                React.createElement("path", { fill: "#f24e1e", d: "M0 9.5A9.5 9.5 0 0 0 9.5 19H19V0H9.5A9.5 9.5 0 0 0 0 9.5z" }),
+                React.createElement("path", { fill: "#a259ff", d: "M0 28.5A9.5 9.5 0 0 0 9.5 38H19V19H9.5A9.5 9.5 0 0 0 0 28.5z" })),
+            React.createElement("div", null, "Link")))));
+};
+exports.default = Status;

package/dist/cjs/utils/styles.d.ts

@@ -0,0 +1 @@
+export declare const pixelate: (value: number) => string;

package/dist/cjs/utils/styles.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pixelate = void 0;
+const pixelate = (value) => `${value}px`;
+exports.pixelate = pixelate;

package/dist/cjs/utils/types.d.ts

@@ -0,0 +1 @@
+export type ValueOf<T> = T[keyof T];

package/dist/cjs/utils/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/esm/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/esm/components/Accordion/Accordion.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import Text from '../Text/Text';
+import { TextTypes } from '@a-little-world/little-world-design-system-core';
+import { AccordionContent, AccordionHeader, AccordionItem, AccordionRoot, AccordionTrigger, TriggerIcon, } from './styles';
+export { AccordionContent };
+const Accordion = ({ className, ContentWrapper, headerType, headerColor, items, }) => {
+    return (React.createElement(AccordionRoot, { className: className, type: "single", collapsible: true }, items.map(({ content, header }) => (React.createElement(AccordionItem, { value: header, key: header },
+        React.createElement(AccordionHeader, { id: header },
+            React.createElement(AccordionTrigger, null,
+                React.createElement(Text, { type: headerType || TextTypes.Body4, color: headerColor }, header),
+                React.createElement(TriggerIcon, { label: "accordion toggle icon", width: "14px", height: "14px", color: headerColor }))),
+        ContentWrapper ? (React.createElement(ContentWrapper, null, content)) : (React.createElement(AccordionContent, null, content)))))));
+};
+export default Accordion;

package/dist/esm/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/esm/components/Accordion/styles.js

@@ -0,0 +1,61 @@
+import * as Accordion from '@radix-ui/react-accordion';
+import styled from 'styled-components';
+import { ChevronDownIcon } from '../Icon';
+export const AccordionRoot = styled(Accordion.Root) `
+  border: 1px solid ${({ theme }) => theme.color.border.subtle};
+  border-radius: 8px;
+
+  :root {
+    --radix-accordion-content-width: 100%;
+    --radix-collapsible-content-width: 100%;
+  }
+`;
+export const AccordionItem = styled(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;
+  }
+`;
+export const AccordionHeader = styled(Accordion.Header) `
+  margin: 0;
+  width: 100%;
+`;
+export const AccordionContent = styled(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;
+  }
+`;
+export const AccordionTrigger = styled(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;
+`;
+export const TriggerIcon = styled(ChevronDownIcon) `
+  flex-shrink: 0;
+  margin-top: 6px;
+`;

package/dist/esm/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/esm/components/Button/Button.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ButtonAppearance, ButtonSizes, ButtonVariations, } from '@a-little-world/little-world-design-system-core';
+import Loading from '../Loading/Loading';
+import { StyledButton } from './styles';
+// Re-export enums for easy access
+export { ButtonAppearance, ButtonSizes, ButtonVariations };
+const Button = React.forwardRef(({ appearance = ButtonAppearance.Primary, backgroundColor, borderColor, color, children, isDummy, loading, size, variation = ButtonVariations.Basic, type = 'button', ...rest }, ref) => {
+    return (React.createElement(StyledButton, { "$appearance": appearance, "$backgroundColor": backgroundColor, "$borderColor": borderColor, "$color": color, "$size": size, "$variation": variation, as: isDummy ? 'div' : 'button', ref: ref, type: type, ...rest }, loading ? React.createElement(Loading, null) : children));
+});
+export default Button;

package/dist/esm/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;