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

package/dist/cjs/globalStyles.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// globalStyles.js
+const styled_components_1 = require("styled-components");
+const GlobalStyle = (0, styled_components_1.createGlobalStyle) `
+  html {
+    background: ${({ theme }) => theme.color.surface.background};
+  }  
+
+  body {
+    padding: 0;
+    margin: 0;
+    font-size: 16px;
+    overflow-x: hidden;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+      'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+      sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    color: ${({ theme }) => theme.color.text.primary};
+    background: ${({ theme }) => theme.color.surface.background};
+  }
+
+  code {
+    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+      monospace;
+  }
+
+  button {
+    cursor: pointer;
+    padding: 0;
+    background: none;
+    border: none;
+    font-size: 1rem;
+  }
+
+  p {
+    margin: 0;
+    padding: 0;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5 {
+    margin: 0;
+    font-weight: normal;
+  }
+
+  ul {
+    margin-block-end: 0;
+    margin-block-start: 0;
+    list-style-type: none;
+    padding-inline-start: 0;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  ::placeholder {
+    color: ${({ theme }) => theme.color.text.tertiary};
+  }
+`;
+exports.default = GlobalStyle;

package/dist/cjs/hooks/useAutosizeTextArea.d.ts

@@ -0,0 +1,2 @@
+declare const useAutosizeTextArea: (textAreaRef: HTMLTextAreaElement | null, value: string, expandable?: boolean) => void;
+export default useAutosizeTextArea;

package/dist/cjs/hooks/useAutosizeTextArea.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+// Updates the height of a <textarea> when the value changes.
+const useAutosizeTextArea = (textAreaRef, value, expandable) => {
+    (0, react_1.useEffect)(() => {
+        if (textAreaRef && expandable) {
+            textAreaRef.style.height = '0px';
+            const scrollHeight = textAreaRef.scrollHeight;
+            textAreaRef.style.height = scrollHeight + 'px';
+        }
+    }, [textAreaRef, value]);
+};
+exports.default = useAutosizeTextArea;

package/dist/cjs/index.d.ts

@@ -0,0 +1,51 @@
+import 'styled-components';
+import { ThemeWeb } from '@a-little-world/little-world-design-system-core';
+declare module 'styled-components' {
+    interface DefaultTheme extends ThemeWeb {
+    }
+}
+export { default as Accordion, AccordionContent, } from './components/Accordion/Accordion';
+export { default as Button, ButtonAppearance, ButtonSizes, ButtonVariations, } from './components/Button/Button';
+export { OPTION_BUTTON_CSS } from './components/Button/styles';
+export { default as Card, CardContent, CardDimensions, CardSizes, CardFooter, CardHeader, } from './components/Card/Card';
+export { default as Checkbox } from './components/Checkbox/Checkbox';
+export { default as CheckboxGrid } from './components/CheckboxGrid/CheckboxGrid';
+export { default as Dropdown } from './components/Dropdown/Dropdown';
+export { default as MultiDropdown } from './components/MultiDropdown/MultiDropdown';
+export * from './components/Icon';
+export * from './components/Illustrations';
+export { default as InputError } from './components/InputError/InputError';
+export { default as Label } from './components/Label/Label';
+export { default as Link } from './components/Link/Link';
+export { default as Loading, LoadingSizes } from './components/Loading/Loading';
+export { default as Modal } from './components/Modal/Modal';
+export { default as MultiCheckbox } from './components/MultiCheckbox/MultiCheckbox';
+export { default as MultiSelection } from './components/MultiSelection/MultiSelection';
+export { NavigationMenu, NavigationMenuCallout, NavigationMenuContent, NavigationMenuContentItem, NavigationMenuItem, NavigationMenuLink, NavigationMenuTrigger, MenuContentLayout, } from './components/NavigationMenu/NavigationMenu';
+export { default as ProgressBar } from './components/ProgressBar/ProgressBar';
+export { default as Popover } from './components/Popover/Popover';
+export { default as InfoPopover } from './components/Popover/InfoPopover';
+export { default as RadioGroup } from './components/RadioGroup/RadioGroup';
+export { default as Separator } from './components/Separator/Separator';
+export { default as Slider } from './components/Slider/Slider';
+export { default as StarRating, StarRatingSizes, } from './components/StarRating/StarRating';
+export { default as StatusMessage } from './components/StatusMessage/StatusMessage';
+export { default as Switch } from './components/Switch/Switch';
+export { default as Tags, Tag } from './components/Tags/Tags';
+export { default as Text } from './components/Text/Text';
+export { default as TextArea, TextAreaSize, } from './components/TextArea/TextArea';
+export { default as TextContent, ContentTypes, } from './components/TextContent/TextContent';
+export { default as TextInput, InputHeight, InputWidth, } from './components/TextInput/TextInput';
+export { default as Toast } from './components/Toast/Toast';
+export { ToastProvider, ToastViewport } from './components/Toast/styles';
+export { default as Tooltip } from './components/Tooltip/Tooltip';
+export { default as CallWidget } from './components/Widget/CallWidget';
+export { default as Widget, WidgetSizes } from './components/Widget/Widget';
+export { default as AttachmentWidget } from './components/Widget/AttachmentWidget';
+export { CustomThemeProvider, themeContext } from './theme';
+export { default as GlobalStyles } from './globalStyles';
+export { default as textParser } from './utils/parser';
+export { pixelate } from './utils/styles';
+export type { TextStyle } from './components/Text/types';
+export type { ThemeWeb, ToastBaseProps, } from '@a-little-world/little-world-design-system-core';
+export { Gradients, StatusTypes, TagSizes, TagAppearance, TextTypes, ThemeVariants, tokensPixelated as tokens, } from '@a-little-world/little-world-design-system-core';

package/dist/cjs/index.js

@@ -0,0 +1,139 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentTypes = exports.TextContent = exports.TextAreaSize = exports.TextArea = exports.Text = exports.Tag = exports.Tags = exports.Switch = exports.StatusMessage = exports.StarRatingSizes = exports.StarRating = exports.Slider = exports.Separator = exports.RadioGroup = exports.InfoPopover = exports.Popover = exports.ProgressBar = exports.MenuContentLayout = exports.NavigationMenuTrigger = exports.NavigationMenuLink = exports.NavigationMenuItem = exports.NavigationMenuContentItem = exports.NavigationMenuContent = exports.NavigationMenuCallout = exports.NavigationMenu = exports.MultiSelection = exports.MultiCheckbox = exports.Modal = exports.LoadingSizes = exports.Loading = exports.Link = exports.Label = exports.InputError = exports.MultiDropdown = exports.Dropdown = exports.CheckboxGrid = exports.Checkbox = exports.CardHeader = exports.CardFooter = exports.CardSizes = exports.CardDimensions = exports.CardContent = exports.Card = exports.OPTION_BUTTON_CSS = exports.ButtonVariations = exports.ButtonSizes = exports.ButtonAppearance = exports.Button = exports.AccordionContent = exports.Accordion = void 0;
+exports.tokens = exports.ThemeVariants = exports.TextTypes = exports.TagAppearance = exports.TagSizes = exports.StatusTypes = exports.Gradients = exports.pixelate = exports.textParser = exports.GlobalStyles = exports.themeContext = exports.CustomThemeProvider = exports.AttachmentWidget = exports.WidgetSizes = exports.Widget = exports.CallWidget = exports.Tooltip = exports.ToastViewport = exports.ToastProvider = exports.Toast = exports.InputWidth = exports.InputHeight = exports.TextInput = void 0;
+require("styled-components");
+var Accordion_1 = require("./components/Accordion/Accordion");
+Object.defineProperty(exports, "Accordion", { enumerable: true, get: function () { return __importDefault(Accordion_1).default; } });
+Object.defineProperty(exports, "AccordionContent", { enumerable: true, get: function () { return Accordion_1.AccordionContent; } });
+var Button_1 = require("./components/Button/Button");
+Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return __importDefault(Button_1).default; } });
+Object.defineProperty(exports, "ButtonAppearance", { enumerable: true, get: function () { return Button_1.ButtonAppearance; } });
+Object.defineProperty(exports, "ButtonSizes", { enumerable: true, get: function () { return Button_1.ButtonSizes; } });
+Object.defineProperty(exports, "ButtonVariations", { enumerable: true, get: function () { return Button_1.ButtonVariations; } });
+var styles_1 = require("./components/Button/styles");
+Object.defineProperty(exports, "OPTION_BUTTON_CSS", { enumerable: true, get: function () { return styles_1.OPTION_BUTTON_CSS; } });
+var Card_1 = require("./components/Card/Card");
+Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return __importDefault(Card_1).default; } });
+Object.defineProperty(exports, "CardContent", { enumerable: true, get: function () { return Card_1.CardContent; } });
+Object.defineProperty(exports, "CardDimensions", { enumerable: true, get: function () { return Card_1.CardDimensions; } });
+Object.defineProperty(exports, "CardSizes", { enumerable: true, get: function () { return Card_1.CardSizes; } });
+Object.defineProperty(exports, "CardFooter", { enumerable: true, get: function () { return Card_1.CardFooter; } });
+Object.defineProperty(exports, "CardHeader", { enumerable: true, get: function () { return Card_1.CardHeader; } });
+var Checkbox_1 = require("./components/Checkbox/Checkbox");
+Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return __importDefault(Checkbox_1).default; } });
+var CheckboxGrid_1 = require("./components/CheckboxGrid/CheckboxGrid");
+Object.defineProperty(exports, "CheckboxGrid", { enumerable: true, get: function () { return __importDefault(CheckboxGrid_1).default; } });
+var Dropdown_1 = require("./components/Dropdown/Dropdown");
+Object.defineProperty(exports, "Dropdown", { enumerable: true, get: function () { return __importDefault(Dropdown_1).default; } });
+var MultiDropdown_1 = require("./components/MultiDropdown/MultiDropdown");
+Object.defineProperty(exports, "MultiDropdown", { enumerable: true, get: function () { return __importDefault(MultiDropdown_1).default; } });
+__exportStar(require("./components/Icon"), exports);
+__exportStar(require("./components/Illustrations"), exports);
+var InputError_1 = require("./components/InputError/InputError");
+Object.defineProperty(exports, "InputError", { enumerable: true, get: function () { return __importDefault(InputError_1).default; } });
+var Label_1 = require("./components/Label/Label");
+Object.defineProperty(exports, "Label", { enumerable: true, get: function () { return __importDefault(Label_1).default; } });
+var Link_1 = require("./components/Link/Link");
+Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return __importDefault(Link_1).default; } });
+var Loading_1 = require("./components/Loading/Loading");
+Object.defineProperty(exports, "Loading", { enumerable: true, get: function () { return __importDefault(Loading_1).default; } });
+Object.defineProperty(exports, "LoadingSizes", { enumerable: true, get: function () { return Loading_1.LoadingSizes; } });
+var Modal_1 = require("./components/Modal/Modal");
+Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return __importDefault(Modal_1).default; } });
+var MultiCheckbox_1 = require("./components/MultiCheckbox/MultiCheckbox");
+Object.defineProperty(exports, "MultiCheckbox", { enumerable: true, get: function () { return __importDefault(MultiCheckbox_1).default; } });
+var MultiSelection_1 = require("./components/MultiSelection/MultiSelection");
+Object.defineProperty(exports, "MultiSelection", { enumerable: true, get: function () { return __importDefault(MultiSelection_1).default; } });
+var NavigationMenu_1 = require("./components/NavigationMenu/NavigationMenu");
+Object.defineProperty(exports, "NavigationMenu", { enumerable: true, get: function () { return NavigationMenu_1.NavigationMenu; } });
+Object.defineProperty(exports, "NavigationMenuCallout", { enumerable: true, get: function () { return NavigationMenu_1.NavigationMenuCallout; } });
+Object.defineProperty(exports, "NavigationMenuContent", { enumerable: true, get: function () { return NavigationMenu_1.NavigationMenuContent; } });
+Object.defineProperty(exports, "NavigationMenuContentItem", { enumerable: true, get: function () { return NavigationMenu_1.NavigationMenuContentItem; } });
+Object.defineProperty(exports, "NavigationMenuItem", { enumerable: true, get: function () { return NavigationMenu_1.NavigationMenuItem; } });
+Object.defineProperty(exports, "NavigationMenuLink", { enumerable: true, get: function () { return NavigationMenu_1.NavigationMenuLink; } });
+Object.defineProperty(exports, "NavigationMenuTrigger", { enumerable: true, get: function () { return NavigationMenu_1.NavigationMenuTrigger; } });
+Object.defineProperty(exports, "MenuContentLayout", { enumerable: true, get: function () { return NavigationMenu_1.MenuContentLayout; } });
+var ProgressBar_1 = require("./components/ProgressBar/ProgressBar");
+Object.defineProperty(exports, "ProgressBar", { enumerable: true, get: function () { return __importDefault(ProgressBar_1).default; } });
+var Popover_1 = require("./components/Popover/Popover");
+Object.defineProperty(exports, "Popover", { enumerable: true, get: function () { return __importDefault(Popover_1).default; } });
+var InfoPopover_1 = require("./components/Popover/InfoPopover");
+Object.defineProperty(exports, "InfoPopover", { enumerable: true, get: function () { return __importDefault(InfoPopover_1).default; } });
+var RadioGroup_1 = require("./components/RadioGroup/RadioGroup");
+Object.defineProperty(exports, "RadioGroup", { enumerable: true, get: function () { return __importDefault(RadioGroup_1).default; } });
+var Separator_1 = require("./components/Separator/Separator");
+Object.defineProperty(exports, "Separator", { enumerable: true, get: function () { return __importDefault(Separator_1).default; } });
+var Slider_1 = require("./components/Slider/Slider");
+Object.defineProperty(exports, "Slider", { enumerable: true, get: function () { return __importDefault(Slider_1).default; } });
+var StarRating_1 = require("./components/StarRating/StarRating");
+Object.defineProperty(exports, "StarRating", { enumerable: true, get: function () { return __importDefault(StarRating_1).default; } });
+Object.defineProperty(exports, "StarRatingSizes", { enumerable: true, get: function () { return StarRating_1.StarRatingSizes; } });
+var StatusMessage_1 = require("./components/StatusMessage/StatusMessage");
+Object.defineProperty(exports, "StatusMessage", { enumerable: true, get: function () { return __importDefault(StatusMessage_1).default; } });
+var Switch_1 = require("./components/Switch/Switch");
+Object.defineProperty(exports, "Switch", { enumerable: true, get: function () { return __importDefault(Switch_1).default; } });
+var Tags_1 = require("./components/Tags/Tags");
+Object.defineProperty(exports, "Tags", { enumerable: true, get: function () { return __importDefault(Tags_1).default; } });
+Object.defineProperty(exports, "Tag", { enumerable: true, get: function () { return Tags_1.Tag; } });
+var Text_1 = require("./components/Text/Text");
+Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return __importDefault(Text_1).default; } });
+var TextArea_1 = require("./components/TextArea/TextArea");
+Object.defineProperty(exports, "TextArea", { enumerable: true, get: function () { return __importDefault(TextArea_1).default; } });
+Object.defineProperty(exports, "TextAreaSize", { enumerable: true, get: function () { return TextArea_1.TextAreaSize; } });
+var TextContent_1 = require("./components/TextContent/TextContent");
+Object.defineProperty(exports, "TextContent", { enumerable: true, get: function () { return __importDefault(TextContent_1).default; } });
+Object.defineProperty(exports, "ContentTypes", { enumerable: true, get: function () { return TextContent_1.ContentTypes; } });
+var TextInput_1 = require("./components/TextInput/TextInput");
+Object.defineProperty(exports, "TextInput", { enumerable: true, get: function () { return __importDefault(TextInput_1).default; } });
+Object.defineProperty(exports, "InputHeight", { enumerable: true, get: function () { return TextInput_1.InputHeight; } });
+Object.defineProperty(exports, "InputWidth", { enumerable: true, get: function () { return TextInput_1.InputWidth; } });
+var Toast_1 = require("./components/Toast/Toast");
+Object.defineProperty(exports, "Toast", { enumerable: true, get: function () { return __importDefault(Toast_1).default; } });
+var styles_2 = require("./components/Toast/styles");
+Object.defineProperty(exports, "ToastProvider", { enumerable: true, get: function () { return styles_2.ToastProvider; } });
+Object.defineProperty(exports, "ToastViewport", { enumerable: true, get: function () { return styles_2.ToastViewport; } });
+var Tooltip_1 = require("./components/Tooltip/Tooltip");
+Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return __importDefault(Tooltip_1).default; } });
+var CallWidget_1 = require("./components/Widget/CallWidget");
+Object.defineProperty(exports, "CallWidget", { enumerable: true, get: function () { return __importDefault(CallWidget_1).default; } });
+var Widget_1 = require("./components/Widget/Widget");
+Object.defineProperty(exports, "Widget", { enumerable: true, get: function () { return __importDefault(Widget_1).default; } });
+Object.defineProperty(exports, "WidgetSizes", { enumerable: true, get: function () { return Widget_1.WidgetSizes; } });
+var AttachmentWidget_1 = require("./components/Widget/AttachmentWidget");
+Object.defineProperty(exports, "AttachmentWidget", { enumerable: true, get: function () { return __importDefault(AttachmentWidget_1).default; } });
+var theme_1 = require("./theme");
+Object.defineProperty(exports, "CustomThemeProvider", { enumerable: true, get: function () { return theme_1.CustomThemeProvider; } });
+Object.defineProperty(exports, "themeContext", { enumerable: true, get: function () { return theme_1.themeContext; } });
+var globalStyles_1 = require("./globalStyles");
+Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return __importDefault(globalStyles_1).default; } });
+var parser_1 = require("./utils/parser");
+Object.defineProperty(exports, "textParser", { enumerable: true, get: function () { return __importDefault(parser_1).default; } });
+var styles_3 = require("./utils/styles");
+Object.defineProperty(exports, "pixelate", { enumerable: true, get: function () { return styles_3.pixelate; } });
+// export core elements
+var little_world_design_system_core_1 = require("@a-little-world/little-world-design-system-core");
+Object.defineProperty(exports, "Gradients", { enumerable: true, get: function () { return little_world_design_system_core_1.Gradients; } });
+Object.defineProperty(exports, "StatusTypes", { enumerable: true, get: function () { return little_world_design_system_core_1.StatusTypes; } });
+Object.defineProperty(exports, "TagSizes", { enumerable: true, get: function () { return little_world_design_system_core_1.TagSizes; } });
+Object.defineProperty(exports, "TagAppearance", { enumerable: true, get: function () { return little_world_design_system_core_1.TagAppearance; } });
+Object.defineProperty(exports, "TextTypes", { enumerable: true, get: function () { return little_world_design_system_core_1.TextTypes; } });
+Object.defineProperty(exports, "ThemeVariants", { enumerable: true, get: function () { return little_world_design_system_core_1.ThemeVariants; } });
+Object.defineProperty(exports, "tokens", { enumerable: true, get: function () { return little_world_design_system_core_1.tokensPixelated; } });

package/dist/cjs/storybook/BreakpointDocumentation.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const BreakpointSection: () => React.JSX.Element;
+export default BreakpointSection;

package/dist/cjs/storybook/BreakpointDocumentation.js

@@ -0,0 +1,139 @@
+"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 });
+// @ts-nocheck
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const Text_1 = __importDefault(require("../components/Text/Text"));
+const Container = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing.large};
+  max-width: 800px;
+`;
+const BreakpointItem = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.spacing.medium};
+  padding: ${({ theme }) => theme.spacing.small};
+  border: 1px solid ${({ theme }) => theme.color.border.subtle};
+  border-radius: ${({ theme }) => theme.radius.small};
+  background: ${({ theme }) => theme.color.surface.primary};
+`;
+const BreakpointVisual = styled_components_1.default.div `
+  width: ${({ $width }) => $width};
+  height: 60px;
+  background: ${({ theme }) => theme.color.surface.bold};
+  border-radius: ${({ theme }) => theme.radius.xxsmall};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid ${({ theme }) => theme.color.border.contrast};
+  position: relative;
+  min-width: 80px;
+`;
+const BreakpointInfo = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing.xxxsmall};
+  flex: 1;
+`;
+const BreakpointLabel = styled_components_1.default.div `
+  font-weight: bold;
+  color: ${({ theme }) => theme.color.text.heading};
+`;
+const BreakpointValue = styled_components_1.default.div `
+  color: ${({ theme }) => theme.color.text.secondary};
+  font-family: monospace;
+`;
+const BreakpointDescription = styled_components_1.default.div `
+  color: ${({ theme }) => theme.color.text.tertiary};
+  font-size: 0.875rem;
+`;
+const BreakpointSection = () => {
+    const theme = (0, styled_components_1.useTheme)();
+    const breakpointTokens = [
+        {
+            key: 'xsmall',
+            value: theme.breakpoints.xsmall,
+            description: '360px - Mobile devices in portrait mode',
+            useCase: 'Small mobile screens',
+        },
+        {
+            key: 'small',
+            value: theme.breakpoints.small,
+            description: '500px - Small tablets and large mobile devices',
+            useCase: 'Large mobile and small tablets',
+        },
+        {
+            key: 'medium',
+            value: theme.breakpoints.medium,
+            description: '700px - Tablets and small laptops',
+            useCase: 'Tablets and small laptops',
+        },
+        {
+            key: 'large',
+            value: theme.breakpoints.large,
+            description: '900px - Desktop screens and large tablets',
+            useCase: 'Desktop screens',
+        },
+        {
+            key: 'xlarge',
+            value: theme.breakpoints.xlarge,
+            description: '1200px - Large desktop screens',
+            useCase: 'Large desktop screens',
+        },
+        {
+            key: 'xxlarge',
+            value: theme.breakpoints.xxlarge,
+            description: '1600px - Extra large screens and high-resolution displays',
+            useCase: 'Extra large screens',
+        },
+    ];
+    return (react_1.default.createElement(Container, null, breakpointTokens.map(({ key, value, description, useCase }) => (react_1.default.createElement(BreakpointItem, { key: key },
+        react_1.default.createElement(BreakpointVisual, { "$width": value },
+            react_1.default.createElement(Text_1.default, { type: "Body6", style: { color: 'white', fontSize: '10px' } }, value)),
+        react_1.default.createElement(BreakpointInfo, null,
+            react_1.default.createElement(BreakpointLabel, null,
+                react_1.default.createElement(Text_1.default, { type: "Body4" }, key)),
+            react_1.default.createElement(BreakpointValue, null,
+                react_1.default.createElement(Text_1.default, { type: "Body6" }, description)),
+            react_1.default.createElement(BreakpointDescription, null,
+                react_1.default.createElement(Text_1.default, { type: "Body6" }, useCase))))))));
+};
+exports.default = BreakpointSection;

package/dist/cjs/storybook/Components.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const TypographyItem: ({ item, details }: any) => React.JSX.Element;

package/dist/cjs/storybook/Components.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TypographyItem = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Item = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing.xxxsmall};
+  margin-bottom: ${({ theme }) => theme.spacing.small};
+  color: ${({ theme }) => theme.color.text.primary};
+
+  > * {
+    margin: 0px !important;
+  }
+`;
+const Details = styled_components_1.default.div `
+  font-family: 'Signika Negative', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  margin: 0;
+  line-height: 1.5;
+`;
+const TypographyItem = ({ item, details }) => (react_1.default.createElement(Item, null,
+    item,
+    react_1.default.createElement(Details, null, details)));
+exports.TypographyItem = TypographyItem;

package/dist/cjs/storybook/Documentation.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const ColorSection: ({ section }: {
+    section: string;
+}) => React.JSX.Element;
+export default ColorSection;

package/dist/cjs/storybook/Documentation.js

@@ -0,0 +1,67 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+// @ts-nocheck
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Text_1 = __importDefault(require("../components/Text/Text"));
+const little_world_design_system_core_1 = require("@a-little-world/little-world-design-system-core");
+const Container = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const Panel = styled_components_1.default.div `
+  background: ${({ isLight }) => (isLight ? '#FFFFFF' : '#000000')};
+  display: flex;
+  flex-direction: column;
+  gap: ${little_world_design_system_core_1.tokensPixelated.spacing.small};
+  align-items: ${({ isLight }) => (isLight ? 'flex-end' : 'flex-start')};
+  padding: ${({ isLight }) => isLight
+    ? `${little_world_design_system_core_1.tokensPixelated.spacing.large} 0 ${little_world_design_system_core_1.tokensPixelated.spacing.large}
+  ${little_world_design_system_core_1.tokensPixelated.spacing.large}`
+    : `${little_world_design_system_core_1.tokensPixelated.spacing.large} ${little_world_design_system_core_1.tokensPixelated.spacing.large}
+    ${little_world_design_system_core_1.tokensPixelated.spacing.large} 0`};
+  width: 100%;
+`;
+const Entry = styled_components_1.default.div `
+  color: ${({ isLight }) => (isLight ? '#000' : '#FFF')};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: ${little_world_design_system_core_1.tokensPixelated.spacing.small};
+  gap: ${little_world_design_system_core_1.tokensPixelated.spacing.small};
+`;
+const Example = styled_components_1.default.div `
+  background: ${({ $background }) => $background};
+  width: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 48px;
+`;
+const ColorSection = ({ section }) => {
+    const lightSection = little_world_design_system_core_1.tokensPixelated.color.theme.light[section];
+    const darkSection = little_world_design_system_core_1.tokensPixelated.color.theme.dark[section];
+    // Check if sections exist
+    if (!lightSection || !darkSection) {
+        console.warn(`Color section "${section}" not found in tokens`);
+        return (react_1.default.createElement(Container, null,
+            react_1.default.createElement(Text_1.default, null,
+                "Color section \"",
+                section,
+                "\" not found")));
+    }
+    const light = Object.entries(lightSection);
+    const dark = Object.entries(darkSection);
+    return (react_1.default.createElement(Container, null,
+        react_1.default.createElement(Panel, { isLight: true }, light.map(([key, value]) => (react_1.default.createElement(Entry, { key: key, isLight: true },
+            react_1.default.createElement(Text_1.default, null, key),
+            react_1.default.createElement(Example, { "$background": value }, value))))),
+        react_1.default.createElement(Panel, null, dark.map(([key, value]) => (react_1.default.createElement(Entry, { key: key },
+            react_1.default.createElement(Example, { "$background": value }, value),
+            react_1.default.createElement(Text_1.default, null, key)))))));
+};
+exports.default = ColorSection;

package/dist/cjs/storybook/RadiusDocumentation.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const RadiusSection: () => React.JSX.Element;
+export default RadiusSection;