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

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

@@ -0,0 +1,99 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwitchThumb = exports.SwitchContainer = exports.SwitchRoot = exports.LabelContainer = exports.SwitchWrapper = void 0;
+const Switch = __importStar(require("@radix-ui/react-switch"));
+const styled_components_1 = __importStar(require("styled-components"));
+exports.SwitchWrapper = styled_components_1.default.div `
+  ${({ theme, $fullWidth, $labelInline, $labelAndDescription }) => $labelInline &&
+    (0, styled_components_1.css) `
+      display: flex;
+      gap: ${theme.spacing.small};
+      align-items: ${$labelAndDescription ? 'flex-start' : 'center'};
+      ${$fullWidth &&
+        (0, styled_components_1.css) `
+        width: 100%;
+        justify-content: space-between;
+      `}
+    `}
+`;
+exports.LabelContainer = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing.xxsmall};
+  margin-bottom: ${({ theme, $inline }) => $inline ? '20px' : theme.spacing.xxsmall};
+`;
+exports.SwitchRoot = (0, styled_components_1.default)(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 &&
+    (0, styled_components_1.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};
+  }
+`;
+exports.SwitchContainer = styled_components_1.default.div ``;
+exports.SwitchThumb = (0, styled_components_1.default)(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/cjs/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/cjs/components/Tags/Tags.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tag = void 0;
+const react_1 = __importDefault(require("react"));
+const little_world_design_system_core_1 = require("@a-little-world/little-world-design-system-core");
+const styles_1 = require("./styles");
+const Tag = ({ bold, children, className, size = little_world_design_system_core_1.TagSizes.large, appearance = little_world_design_system_core_1.TagAppearance.outline, color, }) => {
+    return (react_1.default.createElement(styles_1.StyledTag, { className: className, bold: bold, type: size === little_world_design_system_core_1.TagSizes.small ? little_world_design_system_core_1.TextTypes.Body6 : little_world_design_system_core_1.TextTypes.Body5, "$appearance": appearance, "$color": color, "$size": size }, children));
+};
+exports.Tag = Tag;
+function Tags({ appearance, bold, color, content, className, size, }) {
+    return (react_1.default.createElement(styles_1.TagsContainer, { className: className }, content.map(tag => (react_1.default.createElement(exports.Tag, { key: tag, bold: bold, size: size, color: color, appearance: appearance }, tag)))));
+}
+exports.default = Tags;

package/dist/cjs/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/cjs/components/Tags/styles.js

@@ -0,0 +1,119 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TagsContainer = exports.StyledTag = void 0;
+const styled_components_1 = __importStar(require("styled-components"));
+const Text_1 = __importDefault(require("../Text/Text"));
+const little_world_design_system_core_1 = require("@a-little-world/little-world-design-system-core");
+exports.StyledTag = (0, styled_components_1.default)(Text_1.default) `
+  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 === little_world_design_system_core_1.TagSizes.small) {
+        return (0, styled_components_1.css) `
+        height: 30px;
+        padding: ${theme.spacing.xsmall};
+      `;
+    }
+    if ($size === little_world_design_system_core_1.TagSizes.large) {
+        return (0, styled_components_1.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 === little_world_design_system_core_1.TagAppearance.outline) {
+        return (0, styled_components_1.css) `
+        color: ${$color || theme.color.text.primary};
+        border: 2px solid ${$color || theme.color.border.selected};
+      `;
+    }
+    if ($appearance === little_world_design_system_core_1.TagAppearance.filled) {
+        return (0, styled_components_1.css) `
+        color: ${theme.color.text.reversed};
+        background: ${$color || theme.color.text.bold};
+        border: 2px solid ${$color || theme.color.border.contrast};
+      `;
+    }
+    if ($appearance === little_world_design_system_core_1.TagAppearance.error) {
+        return (0, styled_components_1.css) `
+        color: ${theme.color.text.error};
+        background: ${theme.color.surface.error};
+        border: 0px;
+        filter: none;
+      `;
+    }
+    if ($appearance === little_world_design_system_core_1.TagAppearance.success) {
+        return (0, styled_components_1.css) `
+        color: ${theme.color.text.success};
+        background: ${theme.color.surface.success};
+        border: 0px;
+        filter: none;
+      `;
+    }
+    return '';
+}}
+`;
+exports.TagsContainer = styled_components_1.default.div `
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${({ theme }) => theme.spacing.xsmall};
+  padding-top: ${({ theme }) => theme.spacing.xxxsmall};
+`;

package/dist/cjs/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/cjs/components/Text/Text.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const little_world_design_system_core_1 = require("@a-little-world/little-world-design-system-core");
+const react_1 = __importDefault(require("react"));
+const parser_1 = __importDefault(require("../../utils/parser"));
+const styles_1 = require("./styles");
+const Text = ({ bold = false, center = false, children, color, className, disableParser = false, id, style, tag = 'p', type = little_world_design_system_core_1.TextTypes.Body5, }) => (react_1.default.createElement(styles_1.StyledElement, { className: className, style: style, id: id, "$bold": bold, "$center": center, "$color": color, "$type": type, as: tag }, typeof children === 'string' && !disableParser
+    ? (0, parser_1.default)(children)
+    : children));
+exports.default = Text;

package/dist/cjs/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/cjs/components/Text/styles.js

@@ -0,0 +1,98 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledElement = exports.BODY_5_CSS = void 0;
+const styled_components_1 = __importStar(require("styled-components"));
+const little_world_design_system_core_1 = require("@a-little-world/little-world-design-system-core");
+const BODY_SHARED_STYLES = (0, styled_components_1.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 = (0, styled_components_1.css) `
+  font-family: 'Work Sans', sans-serif;
+  font-weight: bold;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  line-height: 1.1;
+`;
+exports.BODY_5_CSS = (0, styled_components_1.css) `
+  ${BODY_SHARED_STYLES}
+  font-size: 1rem;
+
+  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
+    font-size: 1rem;
+  }
+`;
+const styles = {
+    [little_world_design_system_core_1.TextTypes.Heading1]: (0, little_world_design_system_core_1.getTextStyle)(little_world_design_system_core_1.TextTypes.Heading1),
+    [little_world_design_system_core_1.TextTypes.Heading2]: (0, little_world_design_system_core_1.getTextStyle)(little_world_design_system_core_1.TextTypes.Heading2),
+    [little_world_design_system_core_1.TextTypes.Heading3]: (0, little_world_design_system_core_1.getTextStyle)(little_world_design_system_core_1.TextTypes.Heading3),
+    [little_world_design_system_core_1.TextTypes.Heading4]: (0, little_world_design_system_core_1.getTextStyle)(little_world_design_system_core_1.TextTypes.Heading4),
+    [little_world_design_system_core_1.TextTypes.Heading5]: (0, little_world_design_system_core_1.getTextStyle)(little_world_design_system_core_1.TextTypes.Heading5),
+    [little_world_design_system_core_1.TextTypes.Heading6]: (0, little_world_design_system_core_1.getTextStyle)(little_world_design_system_core_1.TextTypes.Heading6),
+    [little_world_design_system_core_1.TextTypes.Body1]: (0, little_world_design_system_core_1.getTextStyle)(little_world_design_system_core_1.TextTypes.Body1),
+    [little_world_design_system_core_1.TextTypes.Body2]: (0, little_world_design_system_core_1.getTextStyle)(little_world_design_system_core_1.TextTypes.Body2),
+    [little_world_design_system_core_1.TextTypes.Body3]: (0, little_world_design_system_core_1.getTextStyle)(little_world_design_system_core_1.TextTypes.Body3),
+    [little_world_design_system_core_1.TextTypes.Body4]: (0, little_world_design_system_core_1.getTextStyle)(little_world_design_system_core_1.TextTypes.Body4),
+    [little_world_design_system_core_1.TextTypes.Body5]: (0, little_world_design_system_core_1.getTextStyle)(little_world_design_system_core_1.TextTypes.Body5),
+    [little_world_design_system_core_1.TextTypes.Body6]: (0, little_world_design_system_core_1.getTextStyle)(little_world_design_system_core_1.TextTypes.Body6),
+    [little_world_design_system_core_1.TextTypes.Body7]: (0, little_world_design_system_core_1.getTextStyle)(little_world_design_system_core_1.TextTypes.Body7),
+};
+exports.StyledElement = styled_components_1.default.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 (0, styled_components_1.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 &&
+        (0, styled_components_1.css) `
+        @media (min-width: ${theme.breakpoints.small}) {
+          font-size: ${style.desktopFontSize}rem;
+        }
+      `}
+    `;
+}}
+`;

package/dist/cjs/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/cjs/components/Text/types.js

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

package/dist/cjs/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/cjs/components/TextArea/TextArea.js

@@ -0,0 +1,84 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextAreaSize = void 0;
+const react_1 = __importStar(require("react"));
+const useAutosizeTextArea_1 = __importDefault(require("../../hooks/useAutosizeTextArea"));
+const InputError_1 = __importDefault(require("../InputError/InputError"));
+const Label_1 = __importDefault(require("../Label/Label"));
+const little_world_design_system_core_1 = require("@a-little-world/little-world-design-system-core");
+Object.defineProperty(exports, "TextAreaSize", { enumerable: true, get: function () { return little_world_design_system_core_1.TextAreaSize; } });
+const styles_1 = require("./styles");
+const TextArea = ({ displayCount = true, error, expandable, id, inputRef, label, labelTooltip, maxLength, onChange, onSubmit, readOnly, size = little_world_design_system_core_1.TextAreaSize.Small, value, ...areaProps }) => {
+    const [internalValue, setInternalValue] = (0, react_1.useState)(value ?? '');
+    const textAreaRef = (0, react_1.useRef)(null);
+    const isTouchDeviceRef = (0, react_1.useRef)(typeof window !== 'undefined' &&
+        ('ontouchstart' in window || navigator.maxTouchPoints > 0));
+    (0, useAutosizeTextArea_1.default)(textAreaRef.current, internalValue, expandable);
+    const [textAreaCount, setTextAreaCount] = (0, react_1.useState)(0);
+    (0, react_1.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_1.default.createElement(styles_1.AreaWrapper, { "$size": size },
+        label && (react_1.default.createElement(Label_1.default, { bold: true, htmlFor: id, tooltipText: labelTooltip }, label)),
+        Boolean(displayCount && !readOnly && maxLength) && (react_1.default.createElement(styles_1.Counter, { type: little_world_design_system_core_1.TextTypes.Body7 }, `${textAreaCount}/${maxLength}`)),
+        react_1.default.createElement(styles_1.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_1.default.createElement(InputError_1.default, { visible: Boolean(error), textAlign: "left" }, error))));
+};
+exports.default = TextArea;

package/dist/cjs/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/cjs/components/TextArea/styles.js

@@ -0,0 +1,81 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Counter = exports.Area = exports.AreaWrapper = void 0;
+const styled_components_1 = __importStar(require("styled-components"));
+const InputError_1 = require("../InputError/InputError");
+const Text_1 = __importDefault(require("../Text/Text"));
+const little_world_design_system_core_1 = require("@a-little-world/little-world-design-system-core");
+exports.AreaWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: ${({ $size }) => $size === little_world_design_system_core_1.TextAreaSize.Small ? '500px' : '100%'};
+  position: relative;
+`;
+exports.Area = styled_components_1.default.textarea `
+  width: 100%;
+  font-family: 'Signika Negative', sans-serif;
+  font-size: 1rem;
+  height: ${({ $size }) => little_world_design_system_core_1.TextAreaDimensions[$size]};
+  border: 1px solid ${({ theme }) => theme.color.border.moderate};
+  border-radius: ${({ $size, theme }) => $size === little_world_design_system_core_1.TextAreaSize.Xsmall ? theme.radius.large : theme.radius.xxsmall};
+  background: ${({ theme }) => theme.color.surface.primary};
+  color: ${({ theme }) => theme.color.text.primary};
+  padding: ${({ $size, theme }) => $size === little_world_design_system_core_1.TextAreaSize.Small
+    ? theme.spacing.xxsmall
+    : $size === little_world_design_system_core_1.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 &&
+    (0, styled_components_1.css) `
+      min-height: ${little_world_design_system_core_1.TextAreaDimensions[$size]};
+      max-height: 13rem;
+      max-height: 25dvh;
+    `}
+  ${({ $hasError }) => $hasError && InputError_1.INPUT_ERROR_CSS};
+`;
+exports.Counter = (0, styled_components_1.default)(Text_1.default) `
+  position: absolute;
+  bottom: 0px;
+  right: ${({ theme }) => theme.spacing.xxxxsmall};
+`;

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