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

package/dist/esm/components/StarRating/styles.js

@@ -0,0 +1,65 @@
+import styled, { css } from 'styled-components';
+import Text from '../Text/Text';
+export const RatingContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+export const Stars = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+export const StarContainer = styled.button `
+  position: relative;
+  cursor: pointer;
+  background: none;
+  border: none;
+  outline: none;
+  border-radius: ${({ theme }) => theme.radius.xxxsmall};
+  f &:focus-visible {
+    box-shadow: 0 0 0 2px #4f46e5;
+  }
+  padding: ${({ theme }) => theme.spacing.xxsmall};
+`;
+export const StarOverlay = styled.div `
+  position: absolute;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+  width: ${props => props.$fillAmount * 100}%;
+  pointer-events: none;
+  padding: ${({ theme }) => theme.spacing.xxsmall};
+
+  transition: width 0.3s ease-in-out;
+  &:hover {
+    transition: width 1s ease-in-out;
+  }
+
+  > svg {
+    transition: width 0.3s ease-in-out;
+    ${({ $fillAmount }) => !$fillAmount &&
+    css `
+        transition: width 0.3s ease-in-out;
+        width: 0;
+      `}:
+  }
+`;
+export const Rating = styled(Text) `
+  margin-left: ${({ theme }) => theme.spacing.xxsmall};
+  width: 24px;
+`;
+export const TextRating = styled(Text) `
+  height: 16px;
+`;
+export const VisuallyHidden = styled.span `
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+`;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { StatusBaseProps } from '@a-little-world/little-world-design-system-core';
+declare const StatusMessage: ({ className, type, visible, children, withBorder, }: StatusBaseProps) => React.JSX.Element;
+export default StatusMessage;

package/dist/esm/components/StatusMessage/StatusMessage.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { StatusTypes, } from '@a-little-world/little-world-design-system-core';
+import Text from '../Text/Text';
+import { ExclamationIcon } from '../Icon';
+const StatusMessageWrapper = styled.div `
+  display: flex;
+  justify-content: center;
+  gap: ${({ theme }) => theme.spacing.xxsmall};
+  width: 100%;
+  min-height: ${({ theme }) => theme.spacing.xlarge};
+  padding: ${({ theme, $withBorder }) => $withBorder ? theme.spacing.small : theme.spacing.xxsmall};
+  opacity: ${({ $visible }) => ($visible ? 1 : 0)};
+  transition: ${({ $visible }) => ($visible ? 'opacity 1s' : 'none')};
+  text-align: ${({ $withIcon }) => ($withIcon ? 'left' : 'center')};
+  margin: ${({ theme, $withBorder }) => $withBorder ? 0 : theme.spacing.xxsmall}
+    0;
+  border-radius: ${({ theme, $withBorder }) => $withBorder ? theme.radius.xxsmall : 0};
+
+  ${({ $type, theme, $withBorder }) => {
+    if ($type === StatusTypes.Error)
+        return css `
+        background: ${theme.color.surface.error};
+        color: ${theme.color.text.error};
+        border: ${$withBorder
+            ? `1px solid ${theme.color.border.error}`
+            : 'none'};
+      `;
+    if ($type === StatusTypes.Success)
+        return css `
+        background: ${theme.color.surface.success};
+        color: ${theme.color.text.success};
+        border: ${$withBorder
+            ? `1px solid ${theme.color.border.success}`
+            : 'none'};
+      `;
+    if ($type === StatusTypes.Warning)
+        return css `
+        background: ${theme.color.surface.warning};
+        color: ${theme.color.text.warning};
+        border: ${$withBorder
+            ? `1px solid ${theme.color.border.warning}`
+            : 'none'};
+      `;
+    // default is Info type
+    return css `
+      background: ${theme.color.surface.subtle};
+      color: ${theme.color.text.info};
+      border: ${$withBorder ? `1px solid ${theme.color.border.info}` : 'none'};
+    `;
+}})
+`;
+const StyledIcon = styled.svg `
+  flex-shrink: 0;
+  margin-top: 3px;
+`;
+const STATUS_ICONS = {
+    [StatusTypes.Error]: {
+        Icon: ExclamationIcon,
+        label: 'error icon',
+    },
+    [StatusTypes.Warning]: {
+        Icon: ExclamationIcon,
+        label: 'warning icon',
+    },
+};
+const StatusMessage = ({ className, type, visible, children, withBorder, }) => {
+    const icon = STATUS_ICONS[type];
+    const Icon = withBorder && icon?.Icon;
+    return (React.createElement(StatusMessageWrapper, { className: className, "$type": type, "$visible": visible, "$withBorder": withBorder, "$withIcon": !!Icon },
+        Icon && (React.createElement(StyledIcon, { as: Icon, label: icon.label, width: 18, height: 18 })),
+        React.createElement(Text, null, children)));
+};
+export default StatusMessage;

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

@@ -0,0 +1,15 @@
+import * as RadixSwitch from '@radix-ui/react-switch';
+import React from 'react';
+type Props = {
+    className?: string;
+    description?: string;
+    error?: string;
+    fullWidth?: boolean;
+    label?: string;
+    labelBold?: boolean;
+    labelInline?: boolean;
+    labelTooltip?: string;
+    inputRef: React.RefObject<HTMLButtonElement>;
+} & RadixSwitch.SwitchProps;
+declare const Switch: React.FC<Props>;
+export default Switch;

package/dist/esm/components/Switch/Switch.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import InputError from '../InputError/InputError';
+import Label from '../Label/Label';
+import Text from '../Text/Text';
+import { LabelContainer, SwitchContainer, SwitchRoot, SwitchThumb, SwitchWrapper, } from './styles';
+const Switch = ({ className, description, error, fullWidth, label, labelBold = true, labelInline, labelTooltip, inputRef, checked, onCheckedChange, value, ...rest }) => (React.createElement(SwitchWrapper, { className: className, "$fullWidth": fullWidth, "$labelInline": labelInline, "$labelAndDescription": Boolean(label && description) },
+    (label || description) && (React.createElement(LabelContainer, { "$inline": labelInline },
+        label && (React.createElement(Label, { bold: labelBold, htmlFor: label, tooltipText: labelTooltip, marginBottom: "0" }, label)),
+        description && React.createElement(Text, null, description))),
+    React.createElement(SwitchContainer, null,
+        React.createElement(SwitchRoot, { ref: inputRef, checked: checked, value: value, name: label, onCheckedChange: onCheckedChange, "$hasError": Boolean(error), ...rest },
+            React.createElement(SwitchThumb, null)),
+        React.createElement(InputError, { visible: Boolean(error), textAlign: "left" }, error))));
+export default Switch;

package/dist/esm/components/Switch/styles.d.ts

@@ -0,0 +1,14 @@
+import * as Switch from '@radix-ui/react-switch';
+export declare const SwitchWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $fullWidth?: boolean;
+    $labelInline?: boolean;
+    $labelAndDescription: boolean;
+}>> & string;
+export declare const LabelContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $inline?: boolean;
+}>> & string;
+export declare const SwitchRoot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Switch.SwitchProps & import("react").RefAttributes<HTMLButtonElement>, {
+    $hasError?: boolean;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<Switch.SwitchProps & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const SwitchContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SwitchThumb: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Switch.SwitchThumbProps & import("react").RefAttributes<HTMLSpanElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<Switch.SwitchThumbProps & import("react").RefAttributes<HTMLSpanElement>>, keyof import("react").Component<any, {}, any>>;

package/dist/esm/components/Switch/styles.js

@@ -0,0 +1,63 @@
+import * as Switch from '@radix-ui/react-switch';
+import styled, { css } from 'styled-components';
+export const SwitchWrapper = styled.div `
+  ${({ theme, $fullWidth, $labelInline, $labelAndDescription }) => $labelInline &&
+    css `
+      display: flex;
+      gap: ${theme.spacing.small};
+      align-items: ${$labelAndDescription ? 'flex-start' : 'center'};
+      ${$fullWidth &&
+        css `
+        width: 100%;
+        justify-content: space-between;
+      `}
+    `}
+`;
+export const LabelContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing.xxsmall};
+  margin-bottom: ${({ theme, $inline }) => $inline ? '20px' : theme.spacing.xxsmall};
+`;
+export const SwitchRoot = styled(Switch.Root) `
+  width: 56px;
+  height: 32px;
+  background-color: ${({ theme }) => theme.color.border.subtle};
+  border-radius: 9999px;
+  position: relative;
+  -webkit-tap-highlight-color: ${({ theme }) => theme.color.surface.on};
+
+  &:focus {
+    box-shadow: 0 0 0 2px ${({ theme }) => theme.color.border.minimal};
+  }
+
+  ${({ $hasError }) => $hasError &&
+    css `
+      box-shadow: 0 0 0 2px ${({ theme }) => theme.color.border.error};
+      background-color: ${({ theme }) => theme.color.surface.secondary};
+
+      &:focus {
+        box-shadow: 0 0 0 2px ${({ theme }) => theme.color.border.error};
+      }
+    `}
+
+  &[data-state='checked'] {
+    background-color: ${({ theme }) => theme.color.surface.on};
+  }
+`;
+export const SwitchContainer = styled.div ``;
+export const SwitchThumb = styled(Switch.Thumb) `
+  display: block;
+  width: 24px;
+  height: 24px;
+  background-color: ${({ theme }) => theme.color.surface.primary};
+  border-radius: 9999px;
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
+  transition: transform 100ms;
+  transform: translateX(4px);
+  will-change: transform;
+
+  &[data-state='checked'] {
+    transform: translateX(28px);
+  }
+`;

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

@@ -0,0 +1,15 @@
+import React, { FC, PropsWithChildren } from 'react';
+import { TagAppearance, TagSizes } from '@a-little-world/little-world-design-system-core';
+interface TagProps {
+    bold?: boolean;
+    className?: string;
+    appearance?: TagAppearance;
+    size?: TagSizes;
+    color?: string;
+}
+interface TagsProps extends TagProps {
+    content: string[];
+}
+export declare const Tag: FC<PropsWithChildren<TagProps>>;
+declare function Tags({ appearance, bold, color, content, className, size, }: TagsProps): React.JSX.Element;
+export default Tags;

package/dist/esm/components/Tags/Tags.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { TagAppearance, TagSizes, TextTypes, } from '@a-little-world/little-world-design-system-core';
+import { StyledTag, TagsContainer } from './styles';
+export const Tag = ({ bold, children, className, size = TagSizes.large, appearance = TagAppearance.outline, color, }) => {
+    return (React.createElement(StyledTag, { className: className, bold: bold, type: size === TagSizes.small ? TextTypes.Body6 : TextTypes.Body5, "$appearance": appearance, "$color": color, "$size": size }, children));
+};
+function Tags({ appearance, bold, color, content, className, size, }) {
+    return (React.createElement(TagsContainer, { className: className }, content.map(tag => (React.createElement(Tag, { key: tag, bold: bold, size: size, color: color, appearance: appearance }, tag)))));
+}
+export default Tags;

package/dist/esm/components/Tags/styles.d.ts

@@ -0,0 +1,19 @@
+import { TagAppearance, TagSizes } from '@a-little-world/little-world-design-system-core';
+export declare const StyledTag: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("@a-little-world/little-world-design-system-core").TextBaseProps & {
+    className?: string;
+    disableParser?: boolean;
+    id?: string;
+    style?: import("react").CSSProperties;
+    tag?: "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "li" | "label" | "span" | "strong" | "div";
+}, {
+    $size: TagSizes;
+    $appearance?: TagAppearance;
+    $color?: string;
+}>> & string & Omit<({ bold, center, children, color, className, disableParser, id, style, tag, type, }: import("@a-little-world/little-world-design-system-core").TextBaseProps & {
+    className?: string;
+    disableParser?: boolean;
+    id?: string;
+    style?: import("react").CSSProperties;
+    tag?: "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "li" | "label" | "span" | "strong" | "div";
+}) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export declare const TagsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/esm/components/Tags/styles.js

@@ -0,0 +1,80 @@
+import styled, { css } from 'styled-components';
+import Text from '../Text/Text';
+import { TagAppearance, TagSizes, } from '@a-little-world/little-world-design-system-core';
+export const StyledTag = styled(Text) `
+  font-family: 'Signika Negative';
+  line-height: 1;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${({ theme }) => theme.spacing.xxxsmall};
+  background: ${({ theme }) => theme.color.surface.primary};
+  border: 2px solid currentColor;
+  border-radius: ${({ theme }) => theme.radius.large};
+  min-width: 60px;
+  width: fit-content;
+  text-wrap: nowrap;
+  filter: drop-shadow(0px 1px 3px rgb(0 0 0 / 22%));
+
+  ${({ theme, $size }) => {
+    if ($size === TagSizes.small) {
+        return css `
+        height: 30px;
+        padding: ${theme.spacing.xsmall};
+      `;
+    }
+    if ($size === TagSizes.large) {
+        return css `
+        height: 33px;
+        padding: ${theme.spacing.xxsmall} ${theme.spacing.xsmall};
+
+        @media (min-width: ${theme.breakpoints.small}) {
+          padding: ${theme.spacing.xxsmall} ${theme.spacing.small};
+          min-width: 80px;
+          height: 40px;
+        }
+      `;
+    }
+    return '';
+}}
+
+  ${({ theme, $appearance, $color }) => {
+    if ($appearance === TagAppearance.outline) {
+        return css `
+        color: ${$color || theme.color.text.primary};
+        border: 2px solid ${$color || theme.color.border.selected};
+      `;
+    }
+    if ($appearance === TagAppearance.filled) {
+        return css `
+        color: ${theme.color.text.reversed};
+        background: ${$color || theme.color.text.bold};
+        border: 2px solid ${$color || theme.color.border.contrast};
+      `;
+    }
+    if ($appearance === TagAppearance.error) {
+        return css `
+        color: ${theme.color.text.error};
+        background: ${theme.color.surface.error};
+        border: 0px;
+        filter: none;
+      `;
+    }
+    if ($appearance === TagAppearance.success) {
+        return css `
+        color: ${theme.color.text.success};
+        background: ${theme.color.surface.success};
+        border: 0px;
+        filter: none;
+      `;
+    }
+    return '';
+}}
+`;
+export const TagsContainer = styled.div `
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${({ theme }) => theme.spacing.xsmall};
+  padding-top: ${({ theme }) => theme.spacing.xxxsmall};
+`;

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

@@ -0,0 +1,11 @@
+import { TextBaseProps } from '@a-little-world/little-world-design-system-core';
+import React, { CSSProperties } from 'react';
+type TextProps = TextBaseProps & {
+    className?: string;
+    disableParser?: boolean;
+    id?: string;
+    style?: CSSProperties;
+    tag?: 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'li' | 'label' | 'span' | 'strong' | 'div';
+};
+declare const Text: ({ bold, center, children, color, className, disableParser, id, style, tag, type, }: TextProps) => React.JSX.Element;
+export default Text;

package/dist/esm/components/Text/Text.js

@@ -0,0 +1,8 @@
+import { TextTypes, } from '@a-little-world/little-world-design-system-core';
+import React from 'react';
+import textParser from '../../utils/parser';
+import { StyledElement } from './styles';
+const Text = ({ bold = false, center = false, children, color, className, disableParser = false, id, style, tag = 'p', type = TextTypes.Body5, }) => (React.createElement(StyledElement, { className: className, style: style, id: id, "$bold": bold, "$center": center, "$color": color, "$type": type, as: tag }, typeof children === 'string' && !disableParser
+    ? textParser(children)
+    : children));
+export default Text;

package/dist/esm/components/Text/styles.d.ts

@@ -0,0 +1,8 @@
+import { TextTypes } from '@a-little-world/little-world-design-system-core';
+export declare const BODY_5_CSS: import("styled-components").RuleSet<object>;
+export declare const StyledElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $bold: boolean;
+    $center: boolean;
+    $color?: string;
+    $type: keyof typeof TextTypes;
+}>> & string;

package/dist/esm/components/Text/styles.js

@@ -0,0 +1,62 @@
+import styled, { css } from 'styled-components';
+import { TextTypes, getTextStyle, } from '@a-little-world/little-world-design-system-core';
+const BODY_SHARED_STYLES = css `
+  font-family: 'Signika Negative', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  margin: 0;
+  line-height: 1.5;
+`;
+const HEADING_SHARED_STYLES = css `
+  font-family: 'Work Sans', sans-serif;
+  font-weight: bold;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  line-height: 1.1;
+`;
+export const BODY_5_CSS = css `
+  ${BODY_SHARED_STYLES}
+  font-size: 1rem;
+
+  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
+    font-size: 1rem;
+  }
+`;
+const styles = {
+    [TextTypes.Heading1]: getTextStyle(TextTypes.Heading1),
+    [TextTypes.Heading2]: getTextStyle(TextTypes.Heading2),
+    [TextTypes.Heading3]: getTextStyle(TextTypes.Heading3),
+    [TextTypes.Heading4]: getTextStyle(TextTypes.Heading4),
+    [TextTypes.Heading5]: getTextStyle(TextTypes.Heading5),
+    [TextTypes.Heading6]: getTextStyle(TextTypes.Heading6),
+    [TextTypes.Body1]: getTextStyle(TextTypes.Body1),
+    [TextTypes.Body2]: getTextStyle(TextTypes.Body2),
+    [TextTypes.Body3]: getTextStyle(TextTypes.Body3),
+    [TextTypes.Body4]: getTextStyle(TextTypes.Body4),
+    [TextTypes.Body5]: getTextStyle(TextTypes.Body5),
+    [TextTypes.Body6]: getTextStyle(TextTypes.Body6),
+    [TextTypes.Body7]: getTextStyle(TextTypes.Body7),
+};
+export const StyledElement = styled.div `
+  ${({ $bold }) => $bold && 'font-weight: bold;'}
+  ${({ $center }) => $center && 'text-align: center;'}
+  ${({ $color }) => $color && `color: ${$color};`}
+  white-space: pre-line;
+
+  ${({ $type, theme }) => {
+    const style = styles[$type];
+    return css `
+      ${style.styleType === 'body' ? BODY_SHARED_STYLES : HEADING_SHARED_STYLES}
+      font-size: ${style.fontSize}rem;
+      ${style.fontWeight ? `font-weight: ${style.fontWeight};` : ''}
+      ${style.lineHeight ? `line-height: ${style.lineHeight};` : ''}
+
+      ${style.desktopFontSize &&
+        css `
+        @media (min-width: ${theme.breakpoints.small}) {
+          font-size: ${style.desktopFontSize}rem;
+        }
+      `}
+    `;
+}}
+`;

package/dist/esm/components/Text/types.d.ts

@@ -0,0 +1,8 @@
+export type TextStyleType = 'body' | 'heading';
+export interface TextStyle {
+    fontSize: number;
+    desktopFontSize?: number;
+    lineHeight?: number;
+    fontWeight?: 'normal' | 'bold';
+    styleType: TextStyleType;
+}

package/dist/esm/components/Text/types.js

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

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

@@ -0,0 +1,19 @@
+import React, { Ref } from 'react';
+import { TextAreaSize } from '@a-little-world/little-world-design-system-core';
+export { TextAreaSize };
+export interface TextAreaProps extends React.ComponentPropsWithoutRef<'textarea'> {
+    displayCount?: boolean;
+    error?: string;
+    expandable?: boolean;
+    id?: string;
+    inputRef?: Ref<HTMLFormElement>;
+    label?: string;
+    labelTooltip?: string;
+    maxLength?: number;
+    onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    onSubmit?: () => boolean;
+    size?: TextAreaSize;
+    value?: string;
+}
+declare const TextArea: React.FC<TextAreaProps>;
+export default TextArea;

package/dist/esm/components/TextArea/TextArea.js

@@ -0,0 +1,45 @@
+import React, { useEffect, useRef, useState } from 'react';
+import useAutosizeTextArea from '../../hooks/useAutosizeTextArea';
+import InputError from '../InputError/InputError';
+import Label from '../Label/Label';
+import { TextAreaSize, TextTypes, } from '@a-little-world/little-world-design-system-core';
+import { Area, AreaWrapper, Counter } from './styles';
+export { TextAreaSize };
+const TextArea = ({ displayCount = true, error, expandable, id, inputRef, label, labelTooltip, maxLength, onChange, onSubmit, readOnly, size = TextAreaSize.Small, value, ...areaProps }) => {
+    const [internalValue, setInternalValue] = useState(value ?? '');
+    const textAreaRef = useRef(null);
+    const isTouchDeviceRef = useRef(typeof window !== 'undefined' &&
+        ('ontouchstart' in window || navigator.maxTouchPoints > 0));
+    useAutosizeTextArea(textAreaRef.current, internalValue, expandable);
+    const [textAreaCount, setTextAreaCount] = useState(0);
+    useEffect(() => {
+        setTextAreaCount(value?.length || 0);
+        setInternalValue(value || '');
+    }, [value]);
+    const handleOnChange = (e) => {
+        onChange?.(e);
+        setTextAreaCount(e.target.value.length);
+        setInternalValue(e.target.value);
+    };
+    const handleKeyDown = async (e) => {
+        if (onSubmit &&
+            e.key === 'Enter' &&
+            !e.shiftKey &&
+            !isTouchDeviceRef.current) {
+            e.preventDefault();
+            const submitSuccessful = await onSubmit();
+            if (submitSuccessful)
+                setInternalValue('');
+        }
+    };
+    return (React.createElement(AreaWrapper, { "$size": size },
+        label && (React.createElement(Label, { bold: true, htmlFor: id, tooltipText: labelTooltip }, label)),
+        Boolean(displayCount && !readOnly && maxLength) && (React.createElement(Counter, { type: TextTypes.Body7 }, `${textAreaCount}/${maxLength}`)),
+        React.createElement(Area, { ref: e => {
+                // @ts-ignore
+                inputRef?.(e);
+                textAreaRef.current = e;
+            }, id: id, "$hasError": Boolean(error), "$size": size, "$expandable": Boolean(expandable), maxLength: maxLength, onChange: handleOnChange, onKeyDown: handleKeyDown, readOnly: readOnly, value: value, ...areaProps }),
+        !readOnly && (React.createElement(InputError, { visible: Boolean(error), textAlign: "left" }, error))));
+};
+export default TextArea;

package/dist/esm/components/TextArea/styles.d.ts

@@ -0,0 +1,22 @@
+import { TextAreaSize } from '@a-little-world/little-world-design-system-core';
+export declare const AreaWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $size?: TextAreaSize;
+}>> & string;
+export declare const Area: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, {
+    $expandable: boolean;
+    $hasError: boolean;
+    $size: TextAreaSize;
+}>> & string;
+export declare const Counter: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@a-little-world/little-world-design-system-core").TextBaseProps & {
+    className?: string;
+    disableParser?: boolean;
+    id?: string;
+    style?: import("react").CSSProperties;
+    tag?: "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "li" | "label" | "span" | "strong" | "div";
+}, never>> & string & Omit<({ bold, center, children, color, className, disableParser, id, style, tag, type, }: import("@a-little-world/little-world-design-system-core").TextBaseProps & {
+    className?: string;
+    disableParser?: boolean;
+    id?: string;
+    style?: import("react").CSSProperties;
+    tag?: "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "li" | "label" | "span" | "strong" | "div";
+}) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;

package/dist/esm/components/TextArea/styles.js

@@ -0,0 +1,42 @@
+import styled, { css } from 'styled-components';
+import { INPUT_ERROR_CSS } from '../InputError/InputError';
+import Text from '../Text/Text';
+import { TextAreaDimensions, TextAreaSize, } from '@a-little-world/little-world-design-system-core';
+export const AreaWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: ${({ $size }) => $size === TextAreaSize.Small ? '500px' : '100%'};
+  position: relative;
+`;
+export const Area = styled.textarea `
+  width: 100%;
+  font-family: 'Signika Negative', sans-serif;
+  font-size: 1rem;
+  height: ${({ $size }) => TextAreaDimensions[$size]};
+  border: 1px solid ${({ theme }) => theme.color.border.moderate};
+  border-radius: ${({ $size, theme }) => $size === TextAreaSize.Xsmall ? theme.radius.large : theme.radius.xxsmall};
+  background: ${({ theme }) => theme.color.surface.primary};
+  color: ${({ theme }) => theme.color.text.primary};
+  padding: ${({ $size, theme }) => $size === TextAreaSize.Small
+    ? theme.spacing.xxsmall
+    : $size === TextAreaSize.Xsmall
+        ? '11px 14px'
+        : theme.spacing.small};
+  box-sizing: border-box;
+  margin-bottom: ${({ theme, readOnly }) => readOnly ? 0 : theme.spacing.xxxxsmall};
+  resize: none;
+
+  ${({ $expandable, $size }) => $expandable &&
+    css `
+      min-height: ${TextAreaDimensions[$size]};
+      max-height: 13rem;
+      max-height: 25dvh;
+    `}
+  ${({ $hasError }) => $hasError && INPUT_ERROR_CSS};
+`;
+export const Counter = styled(Text) `
+  position: absolute;
+  bottom: 0px;
+  right: ${({ theme }) => theme.spacing.xxxxsmall};
+`;

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

@@ -0,0 +1,28 @@
+import React, { CSSProperties } from 'react';
+export declare enum ContentTypes {
+    Paragraph = "paragraph",
+    List = "list",
+    OrderedList = "orderedList",
+    Title = "title",
+    Subtitle = "subtitle",
+    Heading = "heading",
+    Emphasize = "emphasize",
+    Sentence = "sentence",
+    Image = "image"
+}
+type Props = {
+    content: {
+        center?: boolean;
+        type: ContentTypes;
+        text?: string;
+        listItems?: string[];
+        color?: string;
+        Image?: React.ElementType;
+        imageWidth?: string;
+        imageMaxWidth?: string;
+        style?: CSSProperties;
+    }[];
+    marginBottom?: string;
+};
+declare const TextPage: ({ content, marginBottom }: Props) => React.JSX.Element;
+export default TextPage;