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

package/dist/cjs/components/InputError/InputError.js

@@ -0,0 +1,79 @@
+"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.INPUT_ERROR_CSS = void 0;
+const react_1 = __importDefault(require("react"));
+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.INPUT_ERROR_CSS = (0, styled_components_1.css) `
+  border: 1px solid ${({ theme }) => theme.color.border.error};
+
+  &:focus,
+  &:focus-visible {
+    outline: ${({ theme }) => theme.color.border.error} 1px auto;
+  }
+`;
+const ErrorText = (0, styled_components_1.default)(Text_1.default) `
+  color: ${({ theme }) => theme.color.text.error};
+  visibility: hidden;
+  opacity: 0;
+  transition:
+    visibility 1s,
+    opacity 1s;
+  min-height: ${({ theme }) => theme.spacing.small};
+  padding-left: 1px;
+  text-align: ${({ $textAlign }) => $textAlign};
+
+  ${({ $top, $bottom, $right, $left }) => ($top || $right || $bottom || $left) &&
+    `
+    position: absolute;
+    top: ${$top};
+    bottom: ${$bottom};
+    right: ${$right};
+    left: ${$left};
+  `};
+
+  ${({ $visible }) => $visible &&
+    `
+    visibility: visible;
+    opacity: 1;
+  `};
+`;
+const InputError = ({ children, top, bottom, right, left, textAlign = 'right', textType = little_world_design_system_core_1.TextTypes.Body7, visible, }) => (react_1.default.createElement(ErrorText, { type: textType, "$visible": visible, "$top": top, "$bottom": bottom, "$right": right, "$left": left, "$textAlign": textAlign }, children));
+exports.default = InputError;

package/dist/cjs/components/Label/Label.d.ts

@@ -0,0 +1,10 @@
+import * as RadixLabel from '@radix-ui/react-label';
+import React from 'react';
+type LabelProps = RadixLabel.LabelProps & {
+    bold?: boolean;
+    inline?: boolean;
+    marginBottom?: string | number;
+    tooltipText?: string;
+};
+declare const Label: React.FC<LabelProps>;
+export default Label;

package/dist/cjs/components/Label/Label.js

@@ -0,0 +1,68 @@
+"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 });
+const RadixLabel = __importStar(require("@radix-ui/react-label"));
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const parser_1 = __importDefault(require("../../utils/parser"));
+const Button_1 = __importStar(require("../Button/Button"));
+const Icon_1 = require("../Icon");
+const styles_1 = require("../Text/styles");
+const InfoPopover_1 = __importDefault(require("../Popover/InfoPopover"));
+const StyledLabel = (0, styled_components_1.default)(RadixLabel.Root) `
+  ${styles_1.BODY_5_CSS}
+  width: fit-content;
+
+  ${({ $bold, $inline, $marginBottom, theme }) => (0, styled_components_1.css) `
+    ${$bold && 'font-weight: bold;'}
+    display: ${$inline ? 'inline-flex' : 'block'};
+    margin-bottom: ${$marginBottom ?? theme.spacing.xxsmall};
+    gap: ${theme.spacing.xxxsmall};
+    align-items: center;
+  `}
+`;
+const InfoPopoverTrigger = (0, styled_components_1.default)(Button_1.default) `
+  color: ${({ theme }) => theme.color.surface.bold};
+`;
+const Label = ({ bold, className, children, inline, marginBottom, asChild, htmlFor, tooltipText, }) => {
+    return (react_1.default.createElement(StyledLabel, { "$bold": bold, "$inline": Boolean(inline || tooltipText), "$marginBottom": inline ? '0px' : marginBottom, className: className, asChild: asChild, htmlFor: htmlFor },
+        typeof children === 'string' ? (0, parser_1.default)(children) : children,
+        tooltipText && (react_1.default.createElement(InfoPopover_1.default, { trigger: react_1.default.createElement(InfoPopoverTrigger, { variation: Button_1.ButtonVariations.Icon, size: Button_1.ButtonSizes.Small },
+                react_1.default.createElement(Icon_1.QuestionIcon, { label: "questionIcon" })), text: tooltipText }))));
+};
+exports.default = Label;

package/dist/cjs/components/Link/Link.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { LinkProps as RouterLinkProps } from 'react-router-dom';
+import { LinkBaseProps } from '@a-little-world/little-world-design-system-core';
+export type LinkProps = Omit<RouterLinkProps, 'to'> & LinkBaseProps;
+declare const Link: React.ForwardRefExoticComponent<Omit<RouterLinkProps, "to"> & LinkBaseProps & React.RefAttributes<HTMLAnchorElement>>;
+export default Link;

package/dist/cjs/components/Link/Link.js

@@ -0,0 +1,48 @@
+"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 });
+const react_1 = __importStar(require("react"));
+const little_world_design_system_core_1 = require("@a-little-world/little-world-design-system-core");
+const styles_1 = require("./styles");
+const Variants = {
+    href: styles_1.Anchor,
+    to: styles_1.RouterLink,
+};
+const Link = (0, react_1.forwardRef)(({ active, bold, buttonAppearance, buttonSize, children, className, href, onClick, state, style, target, to, textType, textDecoration = true, ...props }, ref) => {
+    const Component = Variants[href ? 'href' : 'to'];
+    return (react_1.default.createElement(Component, { ...(href ? { href } : { to }), className: className, ref: ref, "$active": active, onClick: onClick, "$buttonAppearance": buttonAppearance, "$size": buttonSize, state: state, style: style, target: target, "$textDecoration": textDecoration, ...props },
+        react_1.default.createElement(styles_1.AnchorText, { as: "span", "$type": textType || little_world_design_system_core_1.TextTypes.Body5, "$bold": Boolean(bold), "$center": false }, children)));
+});
+exports.default = Link;

package/dist/cjs/components/Link/styles.d.ts

@@ -0,0 +1,22 @@
+import { ButtonAppearance, ButtonSizes } from '../Button/Button';
+export declare const LINK_HOVER_CSS: import("styled-components").RuleSet<object>;
+export declare const RouterLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react-router-dom").LinkProps & import("react").RefAttributes<HTMLAnchorElement>, {
+    $active?: boolean;
+    $color?: string;
+    $buttonAppearance?: ButtonAppearance;
+    $size?: keyof typeof ButtonSizes;
+    $textDecoration: boolean;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<import("react-router-dom").LinkProps & import("react").RefAttributes<HTMLAnchorElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const Anchor: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {
+    $active?: boolean;
+    $color?: string;
+    $buttonAppearance?: ButtonAppearance;
+    $size?: keyof typeof ButtonSizes;
+    $textDecoration: boolean;
+}>> & string;
+export declare const AnchorText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$color" | "$type" | "$bold" | "$center"> & {
+    $bold: boolean;
+    $center: boolean;
+    $color?: string;
+    $type: keyof typeof import("@a-little-world/little-world-design-system-core").TextTypes;
+}, never>> & string;

package/dist/cjs/components/Link/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.AnchorText = exports.Anchor = exports.RouterLink = exports.LINK_HOVER_CSS = void 0;
+const react_router_dom_1 = require("react-router-dom");
+const styled_components_1 = __importStar(require("styled-components"));
+const Button_1 = require("../Button/Button");
+const styles_1 = require("../Button/styles");
+const styles_2 = require("../Text/styles");
+exports.LINK_HOVER_CSS = (0, styled_components_1.css) `
+  transition: all 0.3s ease-in-out;
+  background: transparent;
+
+  // underline hover effect
+  &::before {
+    content: '';
+    background: currentColor;
+    display: block;
+    position: absolute;
+    bottom: -1px;
+    left: 0;
+    width: 0;
+    height: 1px;
+    transition: all 0.3s ease-in-out;
+  }
+`;
+const LINK_CSS = (0, styled_components_1.css) `
+  position: relative;
+  display: inline-flex;
+  text-decoration: none;
+  border: none;
+
+  > span {
+    color: currentColor;
+  }
+
+  ${({ theme, $buttonAppearance, $color, $textDecoration }) => $buttonAppearance
+    ? (0, styled_components_1.css) `
+          ${$buttonAppearance === Button_1.ButtonAppearance.Primary
+        ? styles_1.PrimaryButtonCss
+        : styles_1.SecondaryButtonCss}
+          box-sizing: border-box;
+          align-items: center;
+          justify-content: center;
+        `
+    : (0, styled_components_1.css) `
+          color: ${$color || theme.color.text.link};
+
+          ${$textDecoration && exports.LINK_HOVER_CSS}
+
+          &:hover {
+            cursor: pointer;
+            background-position: 0;
+
+            &::before {
+              width: 100%;
+            }
+          }
+        `}
+`;
+exports.RouterLink = (0, styled_components_1.default)(react_router_dom_1.Link) `
+  ${LINK_CSS}
+`;
+exports.Anchor = styled_components_1.default.a `
+  ${LINK_CSS}
+`;
+exports.AnchorText = (0, styled_components_1.default)(styles_2.StyledElement) ``;

package/dist/cjs/components/Loading/Loading.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { LoadingBaseProps, LoadingSizes, LoadingType } from '@a-little-world/little-world-design-system-core';
+export { LoadingSizes, LoadingType };
+export declare const LOADING_RING_ID = "loadingRing";
+export declare const LOADING_LOGO_ID = "loadingLogo";
+export interface LoadingProps extends LoadingBaseProps {
+    className?: string;
+}
+declare const Loading: React.FC<LoadingProps>;
+export default Loading;

package/dist/cjs/components/Loading/Loading.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LOADING_LOGO_ID = exports.LOADING_RING_ID = exports.LoadingType = exports.LoadingSizes = void 0;
+const react_1 = __importDefault(require("react"));
+const little_world_design_system_core_1 = require("@a-little-world/little-world-design-system-core");
+Object.defineProperty(exports, "LoadingSizes", { enumerable: true, get: function () { return little_world_design_system_core_1.LoadingSizes; } });
+Object.defineProperty(exports, "LoadingType", { enumerable: true, get: function () { return little_world_design_system_core_1.LoadingType; } });
+const styles_1 = require("./styles");
+const LoadingLogo_1 = __importDefault(require("./LoadingLogo"));
+exports.LOADING_RING_ID = 'loadingRing';
+exports.LOADING_LOGO_ID = 'loadingLogo';
+const Loading = ({ align, className, color, inline = false, size = little_world_design_system_core_1.LoadingSizes.Small, type = little_world_design_system_core_1.LoadingType.Ring, }) => {
+    if (type === little_world_design_system_core_1.LoadingType.Logo) {
+        return (react_1.default.createElement(styles_1.LoadingContainer, { className: className, "$align": align, "$color": color, "$inline": inline, "$size": size, "$type": type, "data-testid": exports.LOADING_LOGO_ID },
+            react_1.default.createElement(styles_1.LogoContainer, { "$size": size },
+                react_1.default.createElement(LoadingLogo_1.default, { size: size }))));
+    }
+    return (react_1.default.createElement(styles_1.LoadingContainer, { className: className, "$align": align, "$color": color, "$inline": inline, "$size": size, "$type": type, "data-testid": exports.LOADING_RING_ID },
+        react_1.default.createElement(styles_1.LoadingElement, { "$color": color, "$size": size }),
+        react_1.default.createElement(styles_1.LoadingElement, { "$color": color, "$size": size }),
+        react_1.default.createElement(styles_1.LoadingElement, { "$color": color, "$size": size }),
+        react_1.default.createElement(styles_1.LoadingElement, { "$color": color, "$size": size })));
+};
+exports.default = Loading;

package/dist/cjs/components/Loading/LoadingLogo.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { LoadingSizes } from '@a-little-world/little-world-design-system-core';
+export interface LoadingLogoProps {
+    size?: LoadingSizes;
+    label?: string;
+}
+declare const LoadingLogo: React.FC<LoadingLogoProps>;
+export default LoadingLogo;

package/dist/cjs/components/Loading/LoadingLogo.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const little_world_design_system_core_1 = require("@a-little-world/little-world-design-system-core");
+const LoadingLogo = ({ size = little_world_design_system_core_1.LoadingSizes.Small, label = 'Loading logo', }) => {
+    const dimension = little_world_design_system_core_1.LoadingDimensions[size];
+    return (react_1.default.createElement("svg", { "aria-label": label, role: "img", fill: "none", focusable: false, width: dimension, height: dimension, xmlns: "http://www.w3.org/2000/svg", viewBox: "-0.01 0 100.38 66.86" },
+        react_1.default.createElement("defs", null,
+            react_1.default.createElement("linearGradient", { id: "loadingOrangeGradient", y1: "35.21", x2: "80", y2: "35.21", gradientUnits: "userSpaceOnUse" },
+                react_1.default.createElement("stop", { offset: "0", stopColor: "#d85509", stopOpacity: "0.25" },
+                    react_1.default.createElement("animate", { attributeName: "stop-opacity", values: "0.25;1;0.25", dur: "2s", repeatCount: "indefinite" })),
+                react_1.default.createElement("stop", { offset: "0.14", stopColor: "#df6510", stopOpacity: "0.25" },
+                    react_1.default.createElement("animate", { attributeName: "stop-opacity", values: "0.25;1;0.25", dur: "2s", begin: "0.2s", repeatCount: "indefinite" })),
+                react_1.default.createElement("stop", { offset: "0.49", stopColor: "#ed861f", stopOpacity: "0.25" },
+                    react_1.default.createElement("animate", { attributeName: "stop-opacity", values: "0.25;1;0.25", dur: "2s", begin: "0.4s", repeatCount: "indefinite" })),
+                react_1.default.createElement("stop", { offset: "0.67", stopColor: "#f39325", stopOpacity: "0.25" },
+                    react_1.default.createElement("animate", { attributeName: "stop-opacity", values: "0.25;1;0.25", dur: "2s", begin: "0.6s", repeatCount: "indefinite" }))),
+            react_1.default.createElement("linearGradient", { id: "loadingBlueGradient", x1: "20.41", y1: "31.58", x2: "100.41", y2: "31.58", gradientUnits: "userSpaceOnUse" },
+                react_1.default.createElement("stop", { offset: "0.18", stopColor: "#36a9e1", stopOpacity: "0.4" },
+                    react_1.default.createElement("animate", { attributeName: "stop-opacity", values: "0.25;1;0.25", dur: "2s", repeatCount: "indefinite" })),
+                react_1.default.createElement("stop", { offset: "0.56", stopColor: "#1f8bcc", stopOpacity: "0.4" },
+                    react_1.default.createElement("animate", { attributeName: "stop-opacity", values: "0.25;1;0.25", dur: "2s", begin: "0.2s", repeatCount: "indefinite" })),
+                react_1.default.createElement("stop", { offset: "1", stopColor: "#0063af", stopOpacity: "0.4" },
+                    react_1.default.createElement("animate", { attributeName: "stop-opacity", values: "0.25;1;0.25", dur: "2s", begin: "0.4s", repeatCount: "indefinite" })))),
+        react_1.default.createElement("path", { fill: "url(#loadingBlueGradient)", d: "M66.69,8.56H50.2a24.68,24.68,0,0,1,9.39,1.85c-.33.32-.65.65-1,1a1.38,1.38,0,0,0-.29,1.72c.17.35.38.68.57,1a8.33,8.33,0,0,0,1.66,1.94A1.61,1.61,0,0,1,61,17.68c-.09.36.12.71-.08,1,0,.06,0,.22.1.33.4.82.74,1,1.65.75a7.1,7.1,0,0,1,2.47-.17,1.76,1.76,0,0,1,1.56,1.05c.1.23.17.46.27.68a1.28,1.28,0,0,0,1.43.9,3,3,0,0,0,2.08-1.09c.25-.31.49-.64.73-1a24.69,24.69,0,0,1,2.5,21,2.7,2.7,0,0,0-.93-.46,1.74,1.74,0,0,1-1-2.71c.06-.1.14-.19.2-.3A1.19,1.19,0,0,0,72,36.37a6.42,6.42,0,0,0-.38-.53,1.24,1.24,0,0,0-2-.17A5.79,5.79,0,0,1,67.35,37c-.93.27-1.87.54-2.81.78a3.77,3.77,0,0,0-1.5.74,1.6,1.6,0,0,1-1.28.44,14.53,14.53,0,0,0-2.09-.23,3.28,3.28,0,0,0-3.29,1.45,2.3,2.3,0,0,1-1.84,1.15l-.22,0a1.23,1.23,0,0,0-.94,1.09,2.67,2.67,0,0,0,1.34,2.8,9.66,9.66,0,0,1,2.51,2.12,4.25,4.25,0,0,1,1.15,1.69c.33,1.14.28,1.77-.62,2.29a10.91,10.91,0,0,0-1.54,1.91A3.1,3.1,0,0,0,56,55.63c.16.58.28,1.17.4,1.75a24.84,24.84,0,0,1-6.2.79H29.8a24.81,24.81,0,1,1,0-49.61h3.92a29.6,29.6,0,0,1,16.48-5H29.8A29.77,29.77,0,0,0,6.94,52.45L4.83,66.86,15,59.22A29.61,29.61,0,0,0,29.8,63.16H50.2A29.79,29.79,0,0,0,66.69,8.56Z" }),
+        react_1.default.createElement("path", { fill: "url(#loadingOrangeGradient)", d: "M91.65,12.29,93.45,0,84.26,6.89A29.57,29.57,0,0,0,70.61,3.57H50.2a29.79,29.79,0,0,0-16.48,54.6H50.2a24.79,24.79,0,0,1-23-34.09,2.36,2.36,0,0,0,.59.24,8,8,0,0,1,1,.33c0,.1,0,.13,0,.15a.87.87,0,0,0,.32,1.12,1.43,1.43,0,0,1,.31,2,3.33,3.33,0,0,1-.43.67,4.31,4.31,0,0,0-1,3.61,6.84,6.84,0,0,0,.34,1.42A2.43,2.43,0,0,0,29.59,35a2.32,2.32,0,0,0,2.1.06,3.41,3.41,0,0,1,.76-.26,1.15,1.15,0,0,1,1.41.62c.28.48.56,1,.83,1.46a20.21,20.21,0,0,0,2.55,3.91,2.13,2.13,0,0,1,.49,1.33,1.67,1.67,0,0,1-.56,1.14,13,13,0,0,0-1.77,2.23,1.35,1.35,0,0,0,0,1.58c.35.47.8.57,1.52.36A8.92,8.92,0,0,1,38,47.14a12.34,12.34,0,0,0,2.8-.82,3.68,3.68,0,0,0,2.33-2.56,9.66,9.66,0,0,0,.21-2.84c-.06-1-.09-2.09-.11-3.14a.81.81,0,0,1,.22-.52,7.71,7.71,0,0,1,1.26-1.1,6.71,6.71,0,0,0,1.38-1A1.51,1.51,0,0,0,46.61,34c0-.39,0-.78-.09-1.16-.07-.81-.16-1.61-.2-2.41a2.34,2.34,0,0,1,1.31-2.48,1,1,0,0,0,.61-1.12c-.15-1-.28-2-.49-3a14.88,14.88,0,0,1-.38-3,4.85,4.85,0,0,0-.07-.55h-.83c-.62,0-1.23,0-1.84,0-.4,0-.63-.35-.44-.63a3.46,3.46,0,0,0,.4-1.89,1,1,0,0,0-.81-1c-.61,0-1.22,0-1.83.05a8,8,0,0,1-1.09.08,1.47,1.47,0,0,1-.79-.3,6.3,6.3,0,0,1-1.86-2.58,13.63,13.63,0,0,1-.53-1.82s0-.05,0-.09A24.64,24.64,0,0,1,50.2,8.56H70.61a24.81,24.81,0,0,1,0,49.61H66.69a29.61,29.61,0,0,1-16.49,5H70.61a29.78,29.78,0,0,0,21-50.87Z" })));
+};
+exports.default = LoadingLogo;

package/dist/cjs/components/Loading/styles.d.ts

@@ -0,0 +1,15 @@
+import { LoadingSizes, LoadingType } from '@a-little-world/little-world-design-system-core';
+export declare const LoadingContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $align?: string;
+    $color?: string;
+    $inline?: boolean;
+    $size?: LoadingSizes;
+    $type?: LoadingType;
+}>> & string;
+export declare const LoadingElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $color?: string;
+    $size?: LoadingSizes;
+}>> & string;
+export declare const LogoContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $size?: LoadingSizes;
+}>> & string;

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

@@ -0,0 +1,107 @@
+"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.LogoContainer = exports.LoadingElement = exports.LoadingContainer = 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 styles_1 = require("../../utils/styles");
+const loading = (0, styled_components_1.keyframes) `
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+`;
+const logoPulse = (0, styled_components_1.keyframes) `
+    0%, 100% {
+      transform: scale(1);
+    }
+    50% {
+      transform: scale(1.03);
+    }
+`;
+exports.LoadingContainer = styled_components_1.default.div `
+  display: ${({ $inline }) => ($inline ? 'inline-flex' : 'flex')};
+  align-items: center;
+  justify-content: ${({ $align }) => $align || 'center'};
+  position: relative;
+  width: ${({ $inline, $size }) => $inline
+    ? (0, styles_1.pixelate)(little_world_design_system_core_1.LoadingDimensions[$size || little_world_design_system_core_1.LoadingSizes.Small])
+    : '100%'};
+  height: 100%;
+  min-height: ${({ $size }) => (0, styles_1.pixelate)(little_world_design_system_core_1.LoadingDimensions[$size || little_world_design_system_core_1.LoadingSizes.Small])};
+`;
+exports.LoadingElement = styled_components_1.default.div `
+    box-sizing: border-box;
+    display: block;
+    position: absolute;
+    width: ${({ $size }) => (0, styles_1.pixelate)(little_world_design_system_core_1.LoadingDimensions[$size || little_world_design_system_core_1.LoadingSizes.Small])};
+    height: ${({ $size }) => (0, styles_1.pixelate)(little_world_design_system_core_1.LoadingDimensions[$size || little_world_design_system_core_1.LoadingSizes.Small])};
+    border: 2px solid ${({ $color }) => $color || 'currentColor'};
+    border-width: ${({ $size }) => ($size === little_world_design_system_core_1.LoadingSizes.Large ? '4px' : '2px')};
+    border-radius: 50%;
+    animation: ${loading} 1.4s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    border-color: ${({ $color }) => $color || 'currentColor'} transparent
+    transparent transparent;
+
+    &:nth-child(1) {
+        animation-delay: -0.45s;
+    }
+
+    &:nth-child(2) {
+        animation-delay: -0.3s;
+    }
+
+    &:nth-child(3) {
+        animation-delay: -0.15s;
+    }
+}
+`;
+exports.LogoContainer = styled_components_1.default.div `
+  position: relative;
+  width: ${({ $size }) => (0, styles_1.pixelate)(little_world_design_system_core_1.LoadingDimensions[$size || little_world_design_system_core_1.LoadingSizes.Small])};
+  height: ${({ $size }) => (0, styles_1.pixelate)(little_world_design_system_core_1.LoadingDimensions[$size || little_world_design_system_core_1.LoadingSizes.Small])};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: ${logoPulse} 3s ease-in-out infinite;
+
+  svg {
+    width: 100%;
+    height: 100%;
+    transform-origin: center center;
+  }
+`;

package/dist/cjs/components/Modal/Modal.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export declare const BACKDROP_LABEL = "dialog backdrop";
+type BaseModalProps = {
+    children: any;
+    className?: string;
+    createInPortal?: boolean;
+    open: boolean;
+    parent?: any;
+};
+type UnlockedModalProps = BaseModalProps & {
+    locked?: false;
+    onClose: () => void;
+};
+type LockedModalProps = BaseModalProps & {
+    locked: true;
+    onClose?: () => void;
+};
+type ModalProps = UnlockedModalProps | LockedModalProps;
+declare const Modal: ({ children, createInPortal, open, onClose, locked, parent, className, }: ModalProps) => React.JSX.Element | null;
+export default Modal;