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

package/dist/esm/components/Widget/AttachmentWidget.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import styled, { useTheme } from 'styled-components';
+import { AttachmentIcon, CameraIcon, DownloadIcon } from '../Icon';
+import Modal from '../Modal/Modal';
+import Text from '../Text/Text';
+import Widget, { Preview, WidgetSizes } from './Widget';
+export const ImageSizes = {
+    xsmall: '72px',
+    small: '128px',
+    medium: '154px',
+    large: '180px',
+    flex: '100%',
+};
+const WidgetContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: ${WidgetSizes.Large};
+  height: auto;
+`;
+const ContentContainer = styled.div `
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: ${({ theme }) => theme.spacing.xxsmall};
+  padding: ${({ theme }) => theme.spacing.xxsmall};
+`;
+const AttachmentDownload = styled.a `
+  display: inline-flex;
+  color: ${({ theme }) => theme.color.text.primary};
+  align-items: center;
+  justify-content: space-between;
+  gap: ${({ theme }) => theme.spacing.xxsmall};
+  text-align: left;
+  cursor: pointer;
+  width: 100%;
+  text-decoration: none;
+`;
+const ImageButton = styled.button `
+  cursor: pointer;
+  padding: 0;
+  background: none;
+  border: none;
+  font-size: 1rem;
+`;
+const Image = styled.img `
+  background-size: cover;
+  background-position: center;
+  border-radius: ${({ theme }) => theme.radius.small};
+  display: flex;
+  align-items: end;
+  justify-content: center;
+  width: 100%;
+  height: auto;
+  object-fit: cover;
+  max-height: 100%;
+  max-width: 920px;
+`;
+const Caption = styled(Text) `
+  padding: 0 ${({ theme }) => theme.spacing.xxxsmall};
+  margin-top: ${({ theme }) => theme.spacing.xxxsmall};
+  margin-bottom: ${({ theme }) => theme.spacing.xxxxsmall};
+`;
+const AttachmentWidget = ({ attachmentTitle, attachmentLink, caption, imageSrc, isPreview, }) => {
+    const theme = useTheme();
+    const defaultTitle = imageSrc ? 'Photo' : 'File';
+    const title = attachmentTitle || defaultTitle;
+    const [viewImage, setViewImage] = React.useState(false);
+    if (isPreview)
+        return (React.createElement(Preview, null,
+            imageSrc ? (React.createElement(CameraIcon, { label: 'attachment icon', width: 16 })) : (React.createElement(AttachmentIcon, { label: 'attachment icon', width: 12 })),
+            React.createElement(Text, { disableParser: true }, title)));
+    return (React.createElement(WidgetContainer, null,
+        React.createElement(Widget, { width: WidgetSizes.Large, padding: imageSrc && '0px' }, imageSrc ? (React.createElement(React.Fragment, null,
+            React.createElement(Modal, { open: viewImage, onClose: () => setViewImage(false) },
+                React.createElement(Image, { src: imageSrc, alt: title })),
+            React.createElement(ImageButton, { onClick: () => setViewImage(true) },
+                React.createElement(Image, { src: imageSrc, alt: title })))) : (React.createElement(ContentContainer, null,
+            React.createElement(AttachmentIcon, { label: 'attachment icon', width: 20, height: 20, color: theme.color.text.tertiary }),
+            React.createElement(AttachmentDownload, { href: attachmentLink, download: true, target: "_blank" },
+                React.createElement(Text, { disableParser: true }, title),
+                React.createElement(DownloadIcon, { label: 'download icon', width: 20, height: 20, color: theme.color.text.title }))))),
+        caption && React.createElement(Caption, null, caption)));
+};
+export default AttachmentWidget;

package/dist/esm/components/Widget/CallWidget.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { WidgetProps } from './Widget';
+interface CallWidgetProps extends Omit<WidgetProps, 'children'> {
+    description: string;
+    isPreview?: boolean;
+    isMissed?: boolean;
+    isOutgoing?: boolean;
+    onReturnCall?: () => void;
+}
+declare const CallWidget: ({ description, header, isMissed, isOutgoing, isPreview, onReturnCall, ...widgetProps }: CallWidgetProps) => React.JSX.Element;
+export default CallWidget;

package/dist/esm/components/Widget/CallWidget.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import styled, { css, useTheme } from 'styled-components';
+import { CallIncomingIcon, CallOutgoingIcon } from '../Icon';
+import Text from '../Text/Text';
+import Widget, { Preview, WidgetSizes } from './Widget';
+const CallDescription = styled(Text) `
+  color: ${({ theme }) => theme.color.text.secondary};
+`;
+const CallButton = styled.button `
+  display: flex;
+  align-items: center;
+  text-align: left;
+  width: 100%;
+  gap: ${({ theme }) => theme.spacing.xsmall};
+  border-radius: ${({ theme }) => theme.radius.small};
+  cursor: pointer;
+  text-decoration: none;
+  color: ${({ theme }) => theme.color.text.primary};
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+`;
+const CallInfo = styled.div `
+  ${({ $isPreview }) => !$isPreview &&
+    css `
+      margin-right: ${({ theme }) => theme.spacing.xsmall};
+    `}
+`;
+const CallIcon = ({ isPreview, isOutgoing, isMissed, }) => {
+    const theme = useTheme();
+    return isOutgoing ? (React.createElement(CallOutgoingIcon, { label: '', width: isPreview ? 12 : 20, height: isPreview ? 12 : 20, borderColor: theme.color.surface.secondary, color: isMissed ? theme.color.status.error : theme.color.text.primary, circular: !isPreview })) : (React.createElement(CallIncomingIcon, { label: '', width: isPreview ? 12 : 20, height: isPreview ? 12 : 20, borderColor: theme.color.surface.secondary, color: isMissed ? theme.color.status.error : theme.color.text.primary, circular: !isPreview }));
+};
+const CallWidget = ({ description, header, isMissed, isOutgoing, isPreview, onReturnCall, ...widgetProps }) => {
+    if (isPreview)
+        return (React.createElement(Preview, null,
+            React.createElement(CallIcon, { isMissed: isMissed, isOutgoing: isOutgoing, isPreview: isPreview }),
+            React.createElement(Text, null, header)));
+    return (React.createElement(Widget, { width: WidgetSizes.Medium, ...widgetProps },
+        React.createElement(CallButton, { onClick: onReturnCall },
+            React.createElement(CallIcon, { isMissed: isMissed, isOutgoing: isOutgoing }),
+            React.createElement(CallInfo, null,
+                React.createElement(Text, { bold: true }, header),
+                !isPreview && (React.createElement(CallDescription, { disableParser: true }, description || 'N/A'))))));
+};
+export default CallWidget;

package/dist/esm/components/Widget/Widget.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { ValueOf } from '../../utils/types';
+import { WidgetSizes } from '@a-little-world/little-world-design-system-core';
+export { WidgetSizes };
+export interface WidgetProps {
+    borderColor?: string;
+    children: React.ReactNode;
+    className?: string;
+    height?: string;
+    width?: ValueOf<typeof WidgetSizes>;
+    header?: string | React.ReactNode;
+    footer?: string | React.ReactNode;
+    padding?: string;
+}
+export declare const WidgetHeader: React.FC<{
+    align?: string;
+    children: React.ReactNode;
+    textColor?: string;
+}>;
+export declare const WidgetFooter: React.FC<{
+    align?: string;
+    children: React.ReactNode;
+}>;
+export declare const Preview: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const Widget: React.FC<WidgetProps>;
+export default Widget;

package/dist/esm/components/Widget/Widget.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { TextTypes } from '@a-little-world/little-world-design-system-core';
+import { WidgetDimensions, WidgetSizes, } from '@a-little-world/little-world-design-system-core';
+export { WidgetSizes };
+const StyledWidget = styled.div `
+  display: flex;
+  flex-direction: column;
+  border-radius: ${({ theme }) => theme.radius.medium};
+  background: rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 1px 15px 1px rgba(0, 0, 0, 0.05);
+  width: 100%;
+  max-width: ${({ $width }) => ($width ? WidgetDimensions[$width] : '100%')};
+  height: ${({ $height }) => $height || 'auto'};
+  padding: ${({ theme, $padding }) => $padding || theme.spacing.xxsmall};
+`;
+const StyledWidgetHeader = styled.h3 `
+  color: ${({ $color, theme }) => $color || theme.color.text.primary};
+  font-size: ${TextTypes.Heading4};
+  margin-bottom: ${({ theme }) => theme.spacing.xsmall};
+  text-align: center;
+`;
+export const WidgetHeader = ({ children, textColor }) => (React.createElement(StyledWidgetHeader, { "$color": textColor }, children));
+const Footer = styled.div `
+  display: flex;
+  order: 1;
+  margin-top: auto;
+  width: 100%;
+  gap: ${({ theme }) => theme.spacing.xxsmall};
+
+  ${({ $align }) => $align &&
+    css `
+      justify-content: ${$align};
+    `};
+`;
+export const WidgetFooter = ({ children, align }) => React.createElement(Footer, { "$align": align }, children);
+export const Preview = styled.div `
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.spacing.xxsmall};
+`;
+const Widget = ({ borderColor, children, className, footer, header, height, padding, width, }) => (React.createElement(StyledWidget, { className: className, "$borderColor": borderColor, "$height": height, "$padding": padding, "$width": width },
+    header && React.createElement(WidgetHeader, null, header),
+    children,
+    footer && React.createElement(WidgetFooter, null, footer)));
+export default Widget;

package/dist/esm/globalStyles.d.ts

@@ -0,0 +1,5 @@
+import { ThemeWeb } from '@a-little-world/little-world-design-system-core';
+declare const GlobalStyle: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & {
+    theme: ThemeWeb;
+}>;
+export default GlobalStyle;

package/dist/esm/globalStyles.js

@@ -0,0 +1,64 @@
+// globalStyles.js
+import { createGlobalStyle } from 'styled-components';
+const GlobalStyle = 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};
+  }
+`;
+export default GlobalStyle;

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

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

package/dist/esm/hooks/useAutosizeTextArea.js

@@ -0,0 +1,12 @@
+import { useEffect } from 'react';
+// Updates the height of a <textarea> when the value changes.
+const useAutosizeTextArea = (textAreaRef, value, expandable) => {
+    useEffect(() => {
+        if (textAreaRef && expandable) {
+            textAreaRef.style.height = '0px';
+            const scrollHeight = textAreaRef.scrollHeight;
+            textAreaRef.style.height = scrollHeight + 'px';
+        }
+    }, [textAreaRef, value]);
+};
+export default useAutosizeTextArea;

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

@@ -0,0 +1,45 @@
+import 'styled-components';
+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 core elements
+export { Gradients, StatusTypes, TagSizes, TagAppearance, TextTypes, ThemeVariants, tokensPixelated as tokens, } from '@a-little-world/little-world-design-system-core';

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

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

package/dist/esm/storybook/BreakpointDocumentation.js

@@ -0,0 +1,101 @@
+// @ts-nocheck
+import React from 'react';
+import styled, { useTheme } from 'styled-components';
+import Text from '../components/Text/Text';
+const Container = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing.large};
+  max-width: 800px;
+`;
+const BreakpointItem = styled.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.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.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing.xxxsmall};
+  flex: 1;
+`;
+const BreakpointLabel = styled.div `
+  font-weight: bold;
+  color: ${({ theme }) => theme.color.text.heading};
+`;
+const BreakpointValue = styled.div `
+  color: ${({ theme }) => theme.color.text.secondary};
+  font-family: monospace;
+`;
+const BreakpointDescription = styled.div `
+  color: ${({ theme }) => theme.color.text.tertiary};
+  font-size: 0.875rem;
+`;
+const BreakpointSection = () => {
+    const theme = 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.createElement(Container, null, breakpointTokens.map(({ key, value, description, useCase }) => (React.createElement(BreakpointItem, { key: key },
+        React.createElement(BreakpointVisual, { "$width": value },
+            React.createElement(Text, { type: "Body6", style: { color: 'white', fontSize: '10px' } }, value)),
+        React.createElement(BreakpointInfo, null,
+            React.createElement(BreakpointLabel, null,
+                React.createElement(Text, { type: "Body4" }, key)),
+            React.createElement(BreakpointValue, null,
+                React.createElement(Text, { type: "Body6" }, description)),
+            React.createElement(BreakpointDescription, null,
+                React.createElement(Text, { type: "Body6" }, useCase))))))));
+};
+export default BreakpointSection;

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

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

package/dist/esm/storybook/Components.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import styled from 'styled-components';
+const Item = styled.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.div `
+  font-family: 'Signika Negative', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  margin: 0;
+  line-height: 1.5;
+`;
+export const TypographyItem = ({ item, details }) => (React.createElement(Item, null,
+    item,
+    React.createElement(Details, null, details)));

package/dist/esm/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/esm/storybook/Documentation.js

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

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

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