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

package/dist/esm/components/TextContent/TextContent.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import Text from '../Text/Text';
+import { TextTypes } from '@a-little-world/little-world-design-system-core';
+import { ContentWrapper, ImageWrapper, List, ListItem } from './styles';
+export 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 || (ContentTypes = {}));
+const TextPage = ({ content, marginBottom }) => {
+    return (React.createElement(ContentWrapper, { "$marginBottom": marginBottom }, content.map(({ color, center, text, type, listItems, Image, imageWidth, imageMaxWidth, style, }) => {
+        if (type === ContentTypes.Heading)
+            return (React.createElement(Text, { style: style, key: text, tag: "h2", type: TextTypes.Heading3, color: color, center: center }, text));
+        if (type === ContentTypes.Title)
+            return (React.createElement(Text, { style: style, key: text, tag: "h3", type: TextTypes.Body2, bold: true, color: color, center: center }, text));
+        if (type === ContentTypes.Subtitle)
+            return (React.createElement(Text, { style: style, key: text, tag: "h4", type: TextTypes.Body3, bold: true, color: color, center: center }, text));
+        if (type === ContentTypes.Paragraph)
+            return (React.createElement(Text, { style: style, key: text, center: center }, text));
+        if (type === ContentTypes.Sentence)
+            return (React.createElement(Text, { style: style, key: text, center: center }, text));
+        if (type === ContentTypes.List)
+            return (React.createElement(List, { key: listItems?.[0], style: style }, listItems?.map(item => (React.createElement(ListItem, { key: item, tag: "li" }, item)))));
+        if (type === ContentTypes.OrderedList)
+            return (React.createElement(List, { key: listItems?.[0], as: "ol", "$ordered": true, style: style }, listItems?.map(item => (React.createElement(ListItem, { key: item, tag: "li" }, item)))));
+        if (type === ContentTypes.Emphasize)
+            return (React.createElement(Text, { style: style, key: text, bold: true, color: color, center: center }, text));
+        if (type === ContentTypes.Image)
+            return (Image && (React.createElement(ImageWrapper, { "$width": imageWidth, "$maxWidth": imageMaxWidth, "$marginBottom": marginBottom },
+                React.createElement(Image, { color: color, ...style }))));
+    })));
+};
+export default TextPage;

package/dist/esm/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/esm/components/TextContent/styles.js

@@ -0,0 +1,36 @@
+import styled, { css } from 'styled-components';
+import Text from '../Text/Text';
+export const ContentWrapper = styled.div `
+  width: 100%;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing.xsmall};
+  ${({ $marginBottom }) => $marginBottom &&
+    css `
+      margin-bottom: ${$marginBottom};
+    `}
+`;
+export const List = styled.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};
+  }
+`;
+export const ListItem = styled(Text) `
+  display: list-item;
+`;
+export const ImageWrapper = styled.div `
+  margin: 0 auto;
+  width: ${({ $width }) => $width || '100%'};
+  max-width: ${({ $maxWidth }) => $maxWidth || '100%'};
+
+  ${({ $marginBottom }) => $marginBottom &&
+    css `
+      margin-bottom: ${$marginBottom};
+    `};
+`;

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

@@ -0,0 +1,42 @@
+import { ButtonVariations } from '../Button/Button';
+import { EyeClosedIcon, EyeOpenIcon } from '../Icon';
+import InputError from '../InputError/InputError';
+import Label from '../Label/Label';
+import { Input, InputContainer, InputWrapper, ShowPasswordToggle, TelephoneInput, } from './styles';
+import { InputHeight, InputWidth, } from '@a-little-world/little-world-design-system-core';
+import React from 'react';
+const PASSWORD_TOGGLE_ICON_SIZE = 20;
+export { InputWidth, InputHeight };
+const TextInput = ({ error, height, id, inline, inputRef, label, labelTooltip, onChange, onSubmit, onlyCountries, type = 'text', width = InputWidth.Large, ...inputProps }) => {
+    const [inputType, setInputType] = React.useState(type); // ['text', 'password'
+    const [showPassword, setShowPassword] = React.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.createElement(InputWrapper, { "$width": width },
+        label && (React.createElement(Label, { bold: true, htmlFor: id, tooltipText: labelTooltip }, label)),
+        React.createElement(InputContainer, null,
+            type === 'tel' ? (React.createElement(TelephoneInput, { country: "de", onlyCountries: onlyCountries, disableDropdown: onlyCountries?.length === 1, onChange: handleTelephoneChange, inputProps: { ...propsWithoutValues, ref: inputRef }, "$hasError": !!error, value: defaultTelephoneVal, countryCodeEditable: false, "$height": height })) : (React.createElement(Input, { ref: inputRef, "$hasError": Boolean(error), type: inputType, id: id, onChange: onChange, onKeyDown: handleKeyDown, "$height": height, ...inputProps })),
+            type === 'password' && (React.createElement(ShowPasswordToggle, { type: "button", variation: ButtonVariations.Icon, onClick: handlePasswordVisibilityToggle }, showPassword ? (React.createElement(EyeClosedIcon, { label: "show password", width: PASSWORD_TOGGLE_ICON_SIZE, height: PASSWORD_TOGGLE_ICON_SIZE })) : (React.createElement(EyeOpenIcon, { label: "hide password", width: PASSWORD_TOGGLE_ICON_SIZE, height: PASSWORD_TOGGLE_ICON_SIZE }))))),
+        React.createElement(InputError, { visible: Boolean(error), textAlign: width === InputWidth.Large ? 'right' : 'left', ...errorProps }, error)));
+};
+export default TextInput;

package/dist/esm/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/esm/components/TextInput/styles.js

@@ -0,0 +1,111 @@
+import PhoneInput from 'react-phone-input-2';
+import 'react-phone-input-2/lib/style.css';
+import styled, { css } from 'styled-components';
+import Button from '../Button/Button';
+import { INPUT_ERROR_CSS } from '../InputError/InputError';
+import { InputHeight, } from '@a-little-world/little-world-design-system-core';
+import { pixelate } from '../../utils/styles';
+export const InputWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: ${({ $width }) => pixelate($width)};
+  position: relative;
+`;
+export const InputContainer = styled.div `
+  position: relative;
+  width: 100%;
+`;
+export const INPUT_CSS = 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 === InputHeight.Small ? '5px 8px' : theme.spacing.xxsmall};
+
+  margin-bottom: ${({ theme }) => theme.spacing.xxxxsmall};
+  font-size: 1rem;
+  height: unset;
+  line-height: 1.25;
+`;
+export const Input = styled.input `
+  ${INPUT_CSS}
+`;
+export const TelephoneInput = styled(PhoneInput) `
+  > input.form-control {
+    ${INPUT_CSS}
+    padding-left: 52px;
+
+    ${({ $hasError }) => $hasError && 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;
+  }
+`;
+export const ShowPasswordToggle = styled(Button) `
+  position: absolute;
+  right: ${({ theme }) => theme.spacing.xxsmall};
+  top: calc(50% - 1px);
+  transform: translateY(-50%);
+`;

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

@@ -0,0 +1,54 @@
+import { Close } from '@radix-ui/react-toast';
+import React, { useState } from 'react';
+import { TOAST_DEFAULT_DURATION, } from '@a-little-world/little-world-design-system-core';
+import Button, { ButtonSizes, ButtonVariations } from '../Button/Button';
+import { InfoIcon } from '../Icon';
+import { ToastAction, ToastCloseButton, ToastCloseIcon, ToastContent, ToastDescription, ToastHeader, ToastHeadline, ToastRoot, ToastTitle, } from './styles';
+export const TOAST_ICON_SIZE = '24px';
+const Toast = ({ className, icon, headline, title, description, timestamp, actionText, actionAltText, duration = 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] = 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.createElement("div", { className: className },
+        React.createElement(ToastRoot, { className: "ToastRoot", open: open, onOpenChange: onOpenChange, duration: duration, onClick: onClickInternal },
+            React.createElement(Close, { asChild: true },
+                React.createElement(ToastCloseButton, { variation: ButtonVariations.Icon, size: ButtonSizes.Small, onClick: onDismissClick },
+                    React.createElement(ToastCloseIcon, { label: 'ToastCloseIcon', width: TOAST_ICON_SIZE, height: TOAST_ICON_SIZE }))),
+            React.createElement(ToastHeader, null,
+                React.createElement(ToastHeadline, null,
+                    icon ?? (React.createElement(InfoIcon, { label: 'ToastInfoIcon', width: TOAST_ICON_SIZE, height: TOAST_ICON_SIZE })),
+                    React.createElement("span", null, headline)),
+                React.createElement("div", null, timestamp)),
+            React.createElement(ToastContent, null,
+                title && React.createElement(ToastTitle, { className: "ToastTitle" }, title),
+                description && React.createElement(ToastDescription, null, description),
+                actionText && actionAltText && onActionClick && (React.createElement(ToastAction, { className: "ToastAction", asChild: true, altText: actionAltText },
+                    React.createElement(Button, { variation: ButtonVariations.Basic, size: ButtonSizes.Small, onClick: onActionClickInternal }, actionText)))))));
+};
+export default Toast;

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

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

@@ -0,0 +1,125 @@
+import * as RadixToast from '@radix-ui/react-toast';
+import styled, { keyframes } from 'styled-components';
+import Button from '../Button/Button';
+import { CloseIcon } from '../Icon';
+const slideIn = keyframes `
+	from {
+		transform: translateX(calc(100% + var(--viewport-padding)));
+	}
+	to {
+		transform: translateX(0);
+	}
+`;
+const slideOut = keyframes `
+	from {
+    transform: translateX(0);
+	}
+	to {
+    transform: translateX(calc(100% + var(--viewport-padding)));
+	}
+`;
+const swipeOut = keyframes `
+	from {
+		transform: translateX(var(--radix-toast-swipe-end-x));
+	}
+	to {
+		transform: translateX(calc(100% + var(--viewport-padding)));
+	}
+`;
+export const ToastProvider = styled(RadixToast.ToastProvider) ``;
+export const ToastViewport = styled(RadixToast.Viewport) `
+  --viewport-padding: ${({ theme }) => theme.spacing.medium};
+  position: fixed;
+  top: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  padding: var(--viewport-padding);
+  gap: ${({ theme }) => theme.spacing.xxsmall};
+  width: 390px;
+  max-width: 100vw;
+  margin: 0;
+  list-style: none;
+  z-index: 1000;
+  outline: none;
+`;
+export const ToastRoot = styled(RadixToast.Root) `
+  position: relative;
+  --border-radius: ${({ theme }) => theme.radius.xxsmall};
+  background-color: ${({ theme }) => theme.color.surface.primary};
+  border-radius: var(--border-radius);
+  box-shadow:
+    hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
+    hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
+
+  &[data-state='open'] {
+    animation: ${slideIn} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  &[data-state='closed'] {
+    animation: ${slideOut} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  &[data-swipe='move'] {
+    transform: translateX(var(--radix-toast-swipe-move-x));
+  }
+
+  &[data-swipe='cancel'] {
+    transform: translateX(0);
+    transition: transform 200ms ease-out;
+  }
+
+  &[data-swipe='end'] {
+    animation: ${swipeOut} 100ms ease-out;
+  }
+`;
+export const ToastCloseButton = styled(Button) `
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  border-radius: ${({ theme }) => theme.radius.half};
+  background-color: ${({ theme }) => theme.color.surface.secondary};
+  width: 16px;
+  height: 16px;
+  box-shadow: 0px 0px 1px 1px ${({ theme }) => theme.color.border.subtle};
+`;
+export const ToastCloseIcon = styled(CloseIcon) `
+  scale: 0.8;
+`;
+export const ToastContent = styled.div `
+  padding: ${({ theme }) => theme.spacing.small};
+  display: grid;
+  grid-template-areas: 'headline headline' 'title action' 'description action';
+  grid-template-columns: auto max-content;
+  column-gap: ${({ theme }) => theme.spacing.small};
+  align-items: center;
+`;
+export const ToastHeader = styled.div `
+  padding: ${({ theme }) => `${theme.spacing.xxxsmall} ${theme.spacing.xxsmall}`};
+  border-radius: var(--border-radius) var(--border-radius) 0 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: ${({ $backgroundColor, theme }) => $backgroundColor || theme.color.surface.secondary};
+  justify-content: space-between;
+`;
+export const ToastHeadline = styled.div `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: ${({ theme }) => theme.spacing.xxxsmall};
+`;
+export const ToastTitle = styled(RadixToast.ToastTitle) `
+  grid-area: title;
+  margin-bottom: ${({ theme }) => theme.spacing.xxxsmall};
+  font-weight: bold;
+  color: ${({ theme }) => theme.color.text.primary};
+`;
+export const ToastDescription = styled(RadixToast.ToastDescription) `
+  grid-area: description;
+  margin: 0;
+  color: ${({ theme }) => theme.color.text.primary};
+`;
+export const ToastAction = styled(RadixToast.ToastAction) `
+  grid-area: action;
+`;

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

@@ -0,0 +1,9 @@
+import * as RadixTooltip from '@radix-ui/react-tooltip';
+import React from 'react';
+type Props = {
+    text: string;
+    trigger?: React.ReactNode;
+} & RadixTooltip.TooltipProps & RadixTooltip.TooltipContentProps;
+export declare const TooltipProvider: React.FC<RadixTooltip.TooltipProviderProps>;
+declare const Tooltip: React.FC<Props>;
+export default Tooltip;

package/dist/esm/components/Tooltip/Tooltip.js

@@ -0,0 +1,16 @@
+import * as RadixTooltip from '@radix-ui/react-tooltip';
+import React from 'react';
+import Text from '../Text/Text';
+import { TextTypes } from '@a-little-world/little-world-design-system-core';
+import { StyledTooltipContent, StyledTooltipArrow } from './styles';
+export const TooltipProvider = RadixTooltip.Provider;
+const DEFAULT_SIDE_OFFSET = 0; //px
+const DEFAULT_DELAY_DURATION = 300;
+const Tooltip = ({ defaultOpen, open, side, sideOffset = DEFAULT_SIDE_OFFSET, trigger, text, ...rest }) => (React.createElement(RadixTooltip.Provider, null,
+    React.createElement(RadixTooltip.Root, { defaultOpen: defaultOpen, delayDuration: DEFAULT_DELAY_DURATION, open: open, ...rest },
+        trigger && (React.createElement(RadixTooltip.Trigger, { asChild: true }, trigger)),
+        React.createElement(RadixTooltip.Portal, null,
+            React.createElement(StyledTooltipContent, { side: side, sideOffset: sideOffset },
+                React.createElement(StyledTooltipArrow, null),
+                React.createElement(Text, { type: TextTypes.Body5 }, text))))));
+export default Tooltip;

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

@@ -0,0 +1,2 @@
+export declare const StyledTooltipContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@radix-ui/react-tooltip").TooltipContentProps & import("react").RefAttributes<HTMLDivElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<import("@radix-ui/react-tooltip").TooltipContentProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledTooltipArrow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@radix-ui/react-tooltip").TooltipArrowProps & import("react").RefAttributes<SVGSVGElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<import("@radix-ui/react-tooltip").TooltipArrowProps & import("react").RefAttributes<SVGSVGElement>>, keyof import("react").Component<any, {}, any>>;

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

@@ -0,0 +1,18 @@
+import { TooltipArrow, TooltipContent } from '@radix-ui/react-tooltip';
+import styled from 'styled-components';
+export const StyledTooltipContent = styled(TooltipContent) `
+  background: ${({ theme }) => theme.color.surface.dim};
+  border-radius: ${({ theme }) => theme.radius.xxxsmall};
+  color: ${({ theme }) => theme.color.text.reversed};
+  padding: ${({ theme }) => theme.spacing.xxsmall};
+  box-shadow:
+    hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
+    hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
+  user-select: none;
+  animation-duration: 400ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform, opacity;
+`;
+export const StyledTooltipArrow = styled(TooltipArrow) `
+  fill: ${({ theme }) => theme.color.surface.dim};
+`;

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { WidgetProps } from './Widget';
+export declare const ImageSizes: {
+    xsmall: string;
+    small: string;
+    medium: string;
+    large: string;
+    flex: string;
+};
+interface AttachmentWidgetProps extends Omit<WidgetProps, 'children'> {
+    attachmentTitle?: string;
+    attachmentLink?: string;
+    caption?: string;
+    imageSrc?: string;
+    isPreview?: boolean;
+}
+declare const AttachmentWidget: ({ attachmentTitle, attachmentLink, caption, imageSrc, isPreview, }: AttachmentWidgetProps) => React.JSX.Element;
+export default AttachmentWidget;