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

package/dist/cjs/components/TextContent/TextContent.js

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentTypes = void 0;
+const react_1 = __importDefault(require("react"));
+const Text_1 = __importDefault(require("../Text/Text"));
+const little_world_design_system_core_1 = require("@a-little-world/little-world-design-system-core");
+const styles_1 = require("./styles");
+var ContentTypes;
+(function (ContentTypes) {
+    ContentTypes["Paragraph"] = "paragraph";
+    ContentTypes["List"] = "list";
+    ContentTypes["OrderedList"] = "orderedList";
+    ContentTypes["Title"] = "title";
+    ContentTypes["Subtitle"] = "subtitle";
+    ContentTypes["Heading"] = "heading";
+    ContentTypes["Emphasize"] = "emphasize";
+    ContentTypes["Sentence"] = "sentence";
+    ContentTypes["Image"] = "image";
+})(ContentTypes || (exports.ContentTypes = ContentTypes = {}));
+const TextPage = ({ content, marginBottom }) => {
+    return (react_1.default.createElement(styles_1.ContentWrapper, { "$marginBottom": marginBottom }, content.map(({ color, center, text, type, listItems, Image, imageWidth, imageMaxWidth, style, }) => {
+        if (type === ContentTypes.Heading)
+            return (react_1.default.createElement(Text_1.default, { style: style, key: text, tag: "h2", type: little_world_design_system_core_1.TextTypes.Heading3, color: color, center: center }, text));
+        if (type === ContentTypes.Title)
+            return (react_1.default.createElement(Text_1.default, { style: style, key: text, tag: "h3", type: little_world_design_system_core_1.TextTypes.Body2, bold: true, color: color, center: center }, text));
+        if (type === ContentTypes.Subtitle)
+            return (react_1.default.createElement(Text_1.default, { style: style, key: text, tag: "h4", type: little_world_design_system_core_1.TextTypes.Body3, bold: true, color: color, center: center }, text));
+        if (type === ContentTypes.Paragraph)
+            return (react_1.default.createElement(Text_1.default, { style: style, key: text, center: center }, text));
+        if (type === ContentTypes.Sentence)
+            return (react_1.default.createElement(Text_1.default, { style: style, key: text, center: center }, text));
+        if (type === ContentTypes.List)
+            return (react_1.default.createElement(styles_1.List, { key: listItems?.[0], style: style }, listItems?.map(item => (react_1.default.createElement(styles_1.ListItem, { key: item, tag: "li" }, item)))));
+        if (type === ContentTypes.OrderedList)
+            return (react_1.default.createElement(styles_1.List, { key: listItems?.[0], as: "ol", "$ordered": true, style: style }, listItems?.map(item => (react_1.default.createElement(styles_1.ListItem, { key: item, tag: "li" }, item)))));
+        if (type === ContentTypes.Emphasize)
+            return (react_1.default.createElement(Text_1.default, { style: style, key: text, bold: true, color: color, center: center }, text));
+        if (type === ContentTypes.Image)
+            return (Image && (react_1.default.createElement(styles_1.ImageWrapper, { "$width": imageWidth, "$maxWidth": imageMaxWidth, "$marginBottom": marginBottom },
+                react_1.default.createElement(Image, { color: color, ...style }))));
+    })));
+};
+exports.default = TextPage;

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

@@ -0,0 +1,24 @@
+export declare const ContentWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $marginBottom?: string;
+}>> & string;
+export declare const List: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {
+    $ordered?: boolean;
+}>> & string;
+export declare const ListItem: 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>>;
+export declare const ImageWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $marginBottom?: string;
+    $width?: string;
+    $maxWidth?: string;
+}>> & string;

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

@@ -0,0 +1,75 @@
+"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.ImageWrapper = exports.ListItem = exports.List = exports.ContentWrapper = void 0;
+const styled_components_1 = __importStar(require("styled-components"));
+const Text_1 = __importDefault(require("../Text/Text"));
+exports.ContentWrapper = styled_components_1.default.div `
+  width: 100%;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing.xsmall};
+  ${({ $marginBottom }) => $marginBottom &&
+    (0, styled_components_1.css) `
+      margin-bottom: ${$marginBottom};
+    `}
+`;
+exports.List = styled_components_1.default.ul `
+  padding-inline-start: ${({ theme }) => theme.spacing.small};
+  margin-block-start: 0;
+  margin-block-end: ${({ theme }) => theme.spacing.xxsmall};
+  list-style: ${({ $ordered }) => ($ordered ? 'decimal' : 'disc')};
+
+  > li:not(:last-child) {
+    margin-bottom: ${({ theme }) => theme.spacing.xxsmall};
+  }
+`;
+exports.ListItem = (0, styled_components_1.default)(Text_1.default) `
+  display: list-item;
+`;
+exports.ImageWrapper = styled_components_1.default.div `
+  margin: 0 auto;
+  width: ${({ $width }) => $width || '100%'};
+  max-width: ${({ $maxWidth }) => $maxWidth || '100%'};
+
+  ${({ $marginBottom }) => $marginBottom &&
+    (0, styled_components_1.css) `
+      margin-bottom: ${$marginBottom};
+    `};
+`;

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

@@ -0,0 +1,8 @@
+import { InputHeight, InputWidth, TextInputBaseProps } from '@a-little-world/little-world-design-system-core';
+import React from 'react';
+export { InputWidth, InputHeight };
+export interface Props extends Omit<React.ComponentPropsWithoutRef<'input'>, 'height' | 'onSubmit' | 'width'>, TextInputBaseProps {
+    inputRef?: React.RefObject<HTMLInputElement>;
+}
+declare const TextInput: React.FC<Props>;
+export default TextInput;

package/dist/cjs/components/TextInput/TextInput.js

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputHeight = exports.InputWidth = void 0;
+const Button_1 = require("../Button/Button");
+const Icon_1 = require("../Icon");
+const InputError_1 = __importDefault(require("../InputError/InputError"));
+const Label_1 = __importDefault(require("../Label/Label"));
+const styles_1 = require("./styles");
+const little_world_design_system_core_1 = require("@a-little-world/little-world-design-system-core");
+Object.defineProperty(exports, "InputHeight", { enumerable: true, get: function () { return little_world_design_system_core_1.InputHeight; } });
+Object.defineProperty(exports, "InputWidth", { enumerable: true, get: function () { return little_world_design_system_core_1.InputWidth; } });
+const react_1 = __importDefault(require("react"));
+const PASSWORD_TOGGLE_ICON_SIZE = 20;
+const TextInput = ({ error, height, id, inline, inputRef, label, labelTooltip, onChange, onSubmit, onlyCountries, type = 'text', width = little_world_design_system_core_1.InputWidth.Large, ...inputProps }) => {
+    const [inputType, setInputType] = react_1.default.useState(type); // ['text', 'password'
+    const [showPassword, setShowPassword] = react_1.default.useState(false);
+    const { defaultValue, value, ...propsWithoutValues } = inputProps;
+    const defaultTelephoneVal = (value ?? defaultValue)?.toString();
+    const errorProps = inline ? { bottom: '-16px', right: '0px' } : {};
+    const handlePasswordVisibilityToggle = () => {
+        if (inputType === 'password') {
+            setInputType('text');
+            setShowPassword(true);
+        }
+        else {
+            setInputType('password');
+            setShowPassword(false);
+        }
+    };
+    const handleTelephoneChange = (value, country, e) => {
+        onChange?.(e);
+    };
+    const handleKeyDown = async (e) => {
+        if (onSubmit && e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            await onSubmit();
+        }
+    };
+    return (react_1.default.createElement(styles_1.InputWrapper, { "$width": width },
+        label && (react_1.default.createElement(Label_1.default, { bold: true, htmlFor: id, tooltipText: labelTooltip }, label)),
+        react_1.default.createElement(styles_1.InputContainer, null,
+            type === 'tel' ? (react_1.default.createElement(styles_1.TelephoneInput, { country: "de", onlyCountries: onlyCountries, disableDropdown: onlyCountries?.length === 1, onChange: handleTelephoneChange, inputProps: { ...propsWithoutValues, ref: inputRef }, "$hasError": !!error, value: defaultTelephoneVal, countryCodeEditable: false, "$height": height })) : (react_1.default.createElement(styles_1.Input, { ref: inputRef, "$hasError": Boolean(error), type: inputType, id: id, onChange: onChange, onKeyDown: handleKeyDown, "$height": height, ...inputProps })),
+            type === 'password' && (react_1.default.createElement(styles_1.ShowPasswordToggle, { type: "button", variation: Button_1.ButtonVariations.Icon, onClick: handlePasswordVisibilityToggle }, showPassword ? (react_1.default.createElement(Icon_1.EyeClosedIcon, { label: "show password", width: PASSWORD_TOGGLE_ICON_SIZE, height: PASSWORD_TOGGLE_ICON_SIZE })) : (react_1.default.createElement(Icon_1.EyeOpenIcon, { label: "hide password", width: PASSWORD_TOGGLE_ICON_SIZE, height: PASSWORD_TOGGLE_ICON_SIZE }))))),
+        react_1.default.createElement(InputError_1.default, { visible: Boolean(error), textAlign: width === little_world_design_system_core_1.InputWidth.Large ? 'right' : 'left', ...errorProps }, error)));
+};
+exports.default = TextInput;

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

@@ -0,0 +1,18 @@
+import 'react-phone-input-2/lib/style.css';
+import { InputHeight, InputWidth } from '@a-little-world/little-world-design-system-core';
+export declare const InputWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $width: InputWidth;
+}>> & string;
+export declare const InputContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const INPUT_CSS: import("styled-components").RuleSet<{
+    $height?: InputHeight;
+}>;
+export declare const Input: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {
+    $hasError: boolean;
+    $height?: InputHeight;
+}>> & string;
+export declare const TelephoneInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react-phone-input-2").PhoneInputProps, {
+    $hasError: boolean;
+    $height?: InputHeight;
+}>> & string & Omit<import("react").FC<import("react-phone-input-2").PhoneInputProps>, keyof import("react").Component<any, {}, any>>;
+export declare const ShowPasswordToggle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../Button/Button").ButtonProps, never>> & string & Omit<import("react").FC<import("../Button/Button").ButtonProps>, keyof import("react").Component<any, {}, any>>;

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

@@ -0,0 +1,150 @@
+"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.ShowPasswordToggle = exports.TelephoneInput = exports.Input = exports.INPUT_CSS = exports.InputContainer = exports.InputWrapper = void 0;
+const react_phone_input_2_1 = __importDefault(require("react-phone-input-2"));
+require("react-phone-input-2/lib/style.css");
+const styled_components_1 = __importStar(require("styled-components"));
+const Button_1 = __importDefault(require("../Button/Button"));
+const InputError_1 = require("../InputError/InputError");
+const little_world_design_system_core_1 = require("@a-little-world/little-world-design-system-core");
+const styles_1 = require("../../utils/styles");
+exports.InputWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: ${({ $width }) => (0, styles_1.pixelate)($width)};
+  position: relative;
+`;
+exports.InputContainer = styled_components_1.default.div `
+  position: relative;
+  width: 100%;
+`;
+exports.INPUT_CSS = (0, styled_components_1.css) `
+  width: 100%;
+  border: 2px solid ${({ theme }) => theme.color.border.subtle};
+  background: ${({ theme }) => theme.color.surface.primary};
+  color: ${({ theme }) => theme.color.text.primary};
+  border-radius: 6px;
+  box-sizing: border-box;
+  padding: ${({ theme, $height }) => $height === little_world_design_system_core_1.InputHeight.Small ? '5px 8px' : theme.spacing.xxsmall};
+
+  margin-bottom: ${({ theme }) => theme.spacing.xxxxsmall};
+  font-size: 1rem;
+  height: unset;
+  line-height: 1.25;
+`;
+exports.Input = styled_components_1.default.input `
+  ${exports.INPUT_CSS}
+`;
+exports.TelephoneInput = (0, styled_components_1.default)(react_phone_input_2_1.default) `
+  > input.form-control {
+    ${exports.INPUT_CSS}
+    padding-left: 52px;
+
+    ${({ $hasError }) => $hasError && InputError_1.INPUT_ERROR_CSS}
+  }
+
+  .flag-dropdown {
+    overflow: hidden;
+    border: 2px solid
+      ${({ theme, $hasError }) => $hasError ? theme.color.border.error : theme.color.border.subtle};
+  }
+
+  .flag-dropdown.open {
+    overflow: visible;
+  }
+
+  .flag-dropdown,
+  .flag-dropdown.open {
+    background: none;
+    border-radius: 6px 0 0 6px;
+  }
+
+  .react-tel-input .country-list {
+    background: ${({ theme }) => theme.color.surface.elevated};
+    background-color: ${({ theme }) => theme.color.surface.elevated};
+    color: ${({ theme }) => theme.color.text.primary};
+    border-radius: ${({ theme }) => theme.radius.xxxsmall};
+  }
+
+  .react-tel-input .country-list .country.highlight {
+    background-color: ${({ theme }) => theme.color.surface.quaternary};
+  }
+
+  .react-tel-input .flag-dropdown.open .selected-flag {
+    background: none;
+  }
+
+  .react-tel-input .selected-flag {
+    padding: 0 0 0 14px;
+    scale: 1.3;
+    width: 51px;
+    transition: background ease 0.2s;
+
+    > .flag {
+      margin-top: -6px;
+    }
+  }
+
+  .react-tel-input .selected-flag:focus {
+    background: none;
+  }
+
+  .flag-dropdown .selected-flag:hover {
+    background: ${({ theme }) => theme.color.border.subtle};
+  }
+
+  .react-tel-input .flag-dropdown.open .selected-flag {
+    &:hover {
+      background: none;
+      filter: brightness(0.8);
+    }
+  }
+
+  .react-tel-input .selected-flag,
+  .react-tel-input .flag-dropdown.open .selected-flag {
+    border-radius: 8px 0 0 8px;
+  }
+`;
+exports.ShowPasswordToggle = (0, styled_components_1.default)(Button_1.default) `
+  position: absolute;
+  right: ${({ theme }) => theme.spacing.xxsmall};
+  top: calc(50% - 1px);
+  transform: translateY(-50%);
+`;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ToastBaseProps } from '@a-little-world/little-world-design-system-core';
+export declare const TOAST_ICON_SIZE = "24px";
+declare const Toast: React.FC<ToastBaseProps>;
+export default Toast;

package/dist/cjs/components/Toast/Toast.js

@@ -0,0 +1,90 @@
+"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.TOAST_ICON_SIZE = void 0;
+const react_toast_1 = require("@radix-ui/react-toast");
+const react_1 = __importStar(require("react"));
+const little_world_design_system_core_1 = require("@a-little-world/little-world-design-system-core");
+const Button_1 = __importStar(require("../Button/Button"));
+const Icon_1 = require("../Icon");
+const styles_1 = require("./styles");
+exports.TOAST_ICON_SIZE = '24px';
+const Toast = ({ className, icon, headline, title, description, timestamp, actionText, actionAltText, duration = little_world_design_system_core_1.TOAST_DEFAULT_DURATION, onClose, onDismiss, onClick, onActionClick, }) => {
+    const actionWellDefined = !!actionText === !!actionAltText && !!actionText === !!onActionClick;
+    if (!actionWellDefined) {
+        throw new Error('The action text, click event and alt text must all be set or unset');
+    }
+    const [open, setOpen] = (0, react_1.useState)(true);
+    function closeToast() {
+        setOpen(false);
+    }
+    function onClickInternal(event) {
+        event.stopPropagation();
+        onClick?.();
+        closeToast();
+    }
+    function onDismissClick(event) {
+        event.stopPropagation(); // prevent toast onClick event from firing
+        onDismiss?.();
+        closeToast();
+    }
+    function onActionClickInternal(event) {
+        event.stopPropagation();
+        onActionClick?.();
+        closeToast();
+    }
+    function onOpenChange(open) {
+        if (!open) {
+            onClose?.();
+            closeToast();
+        }
+    }
+    return (react_1.default.createElement("div", { className: className },
+        react_1.default.createElement(styles_1.ToastRoot, { className: "ToastRoot", open: open, onOpenChange: onOpenChange, duration: duration, onClick: onClickInternal },
+            react_1.default.createElement(react_toast_1.Close, { asChild: true },
+                react_1.default.createElement(styles_1.ToastCloseButton, { variation: Button_1.ButtonVariations.Icon, size: Button_1.ButtonSizes.Small, onClick: onDismissClick },
+                    react_1.default.createElement(styles_1.ToastCloseIcon, { label: 'ToastCloseIcon', width: exports.TOAST_ICON_SIZE, height: exports.TOAST_ICON_SIZE }))),
+            react_1.default.createElement(styles_1.ToastHeader, null,
+                react_1.default.createElement(styles_1.ToastHeadline, null,
+                    icon ?? (react_1.default.createElement(Icon_1.InfoIcon, { label: 'ToastInfoIcon', width: exports.TOAST_ICON_SIZE, height: exports.TOAST_ICON_SIZE })),
+                    react_1.default.createElement("span", null, headline)),
+                react_1.default.createElement("div", null, timestamp)),
+            react_1.default.createElement(styles_1.ToastContent, null,
+                title && react_1.default.createElement(styles_1.ToastTitle, { className: "ToastTitle" }, title),
+                description && react_1.default.createElement(styles_1.ToastDescription, null, description),
+                actionText && actionAltText && onActionClick && (react_1.default.createElement(styles_1.ToastAction, { className: "ToastAction", asChild: true, altText: actionAltText },
+                    react_1.default.createElement(Button_1.default, { variation: Button_1.ButtonVariations.Basic, size: Button_1.ButtonSizes.Small, onClick: onActionClickInternal }, actionText)))))));
+};
+exports.default = Toast;

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

@@ -0,0 +1,27 @@
+import * as RadixToast from '@radix-ui/react-toast';
+export declare const ToastProvider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<RadixToast.ToastProviderProps, never>> & string & Omit<import("react").FC<RadixToast.ToastProviderProps>, keyof import("react").Component<any, {}, any>>;
+export declare const ToastViewport: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<RadixToast.ToastViewportProps & import("react").RefAttributes<HTMLOListElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<RadixToast.ToastViewportProps & import("react").RefAttributes<HTMLOListElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const ToastRoot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<RadixToast.ToastProps & import("react").RefAttributes<HTMLLIElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<RadixToast.ToastProps & import("react").RefAttributes<HTMLLIElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const ToastCloseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../Button/Button").ButtonProps, {
+    $visible?: boolean;
+}>> & string & Omit<import("react").FC<import("../Button/Button").ButtonProps>, keyof import("react").Component<any, {}, any>>;
+export declare const ToastCloseIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("@a-little-world/little-world-design-system-core").IconBaseProps, "children"> & import("react").SVGProps<SVGElement> & {
+    gradient?: import("@a-little-world/little-world-design-system-core").Gradients;
+} & {
+    style?: import("react").CSSProperties;
+    color?: string;
+}, never>> & string & Omit<{
+    ({ backgroundColor, borderColor, circular, className, color, gradient, height, label, labelVisible, style, width, }: import("../Icon/Icon").IconSvgProps & {
+        style?: import("react").CSSProperties;
+        color?: string;
+    }): import("react").JSX.Element;
+    displayName: string;
+}, keyof import("react").Component<any, {}, any>>;
+export declare const ToastContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ToastHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $backgroundColor?: string;
+}>> & string;
+export declare const ToastHeadline: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ToastTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<RadixToast.ToastTitleProps & import("react").RefAttributes<HTMLDivElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<RadixToast.ToastTitleProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const ToastDescription: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<RadixToast.ToastDescriptionProps & import("react").RefAttributes<HTMLDivElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<RadixToast.ToastDescriptionProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const ToastAction: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<RadixToast.ToastActionProps & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<RadixToast.ToastActionProps & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;