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

package/dist/esm/components/Label/Label.js

@@ -0,0 +1,30 @@
+import * as RadixLabel from '@radix-ui/react-label';
+import React from 'react';
+import styled, { css } from 'styled-components';
+import textParser from '../../utils/parser';
+import Button, { ButtonSizes, ButtonVariations } from '../Button/Button';
+import { QuestionIcon } from '../Icon';
+import { BODY_5_CSS } from '../Text/styles';
+import InfoPopover from '../Popover/InfoPopover';
+const StyledLabel = styled(RadixLabel.Root) `
+  ${BODY_5_CSS}
+  width: fit-content;
+
+  ${({ $bold, $inline, $marginBottom, theme }) => 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 = styled(Button) `
+  color: ${({ theme }) => theme.color.surface.bold};
+`;
+const Label = ({ bold, className, children, inline, marginBottom, asChild, htmlFor, tooltipText, }) => {
+    return (React.createElement(StyledLabel, { "$bold": bold, "$inline": Boolean(inline || tooltipText), "$marginBottom": inline ? '0px' : marginBottom, className: className, asChild: asChild, htmlFor: htmlFor },
+        typeof children === 'string' ? textParser(children) : children,
+        tooltipText && (React.createElement(InfoPopover, { trigger: React.createElement(InfoPopoverTrigger, { variation: ButtonVariations.Icon, size: ButtonSizes.Small },
+                React.createElement(QuestionIcon, { label: "questionIcon" })), text: tooltipText }))));
+};
+export default Label;

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

@@ -0,0 +1,13 @@
+import React, { forwardRef } from 'react';
+import { TextTypes, } from '@a-little-world/little-world-design-system-core';
+import { Anchor, AnchorText, RouterLink } from './styles';
+const Variants = {
+    href: Anchor,
+    to: RouterLink,
+};
+const Link = 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.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.createElement(AnchorText, { as: "span", "$type": textType || TextTypes.Body5, "$bold": Boolean(bold), "$center": false }, children)));
+});
+export default Link;

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

@@ -0,0 +1,63 @@
+import { Link } from 'react-router-dom';
+import styled, { css } from 'styled-components';
+import { ButtonAppearance } from '../Button/Button';
+import { PrimaryButtonCss, SecondaryButtonCss } from '../Button/styles';
+import { StyledElement } from '../Text/styles';
+export const LINK_HOVER_CSS = 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 = css `
+  position: relative;
+  display: inline-flex;
+  text-decoration: none;
+  border: none;
+
+  > span {
+    color: currentColor;
+  }
+
+  ${({ theme, $buttonAppearance, $color, $textDecoration }) => $buttonAppearance
+    ? css `
+          ${$buttonAppearance === ButtonAppearance.Primary
+        ? PrimaryButtonCss
+        : SecondaryButtonCss}
+          box-sizing: border-box;
+          align-items: center;
+          justify-content: center;
+        `
+    : css `
+          color: ${$color || theme.color.text.link};
+
+          ${$textDecoration && LINK_HOVER_CSS}
+
+          &:hover {
+            cursor: pointer;
+            background-position: 0;
+
+            &::before {
+              width: 100%;
+            }
+          }
+        `}
+`;
+export const RouterLink = styled(Link) `
+  ${LINK_CSS}
+`;
+export const Anchor = styled.a `
+  ${LINK_CSS}
+`;
+export const AnchorText = styled(StyledElement) ``;

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { LoadingSizes, LoadingType, } from '@a-little-world/little-world-design-system-core';
+import { LoadingContainer, LoadingElement, LogoContainer } from './styles';
+import LoadingLogo from './LoadingLogo';
+// Re-export enum for easy access
+export { LoadingSizes, LoadingType };
+export const LOADING_RING_ID = 'loadingRing';
+export const LOADING_LOGO_ID = 'loadingLogo';
+const Loading = ({ align, className, color, inline = false, size = LoadingSizes.Small, type = LoadingType.Ring, }) => {
+    if (type === LoadingType.Logo) {
+        return (React.createElement(LoadingContainer, { className: className, "$align": align, "$color": color, "$inline": inline, "$size": size, "$type": type, "data-testid": LOADING_LOGO_ID },
+            React.createElement(LogoContainer, { "$size": size },
+                React.createElement(LoadingLogo, { size: size }))));
+    }
+    return (React.createElement(LoadingContainer, { className: className, "$align": align, "$color": color, "$inline": inline, "$size": size, "$type": type, "data-testid": LOADING_RING_ID },
+        React.createElement(LoadingElement, { "$color": color, "$size": size }),
+        React.createElement(LoadingElement, { "$color": color, "$size": size }),
+        React.createElement(LoadingElement, { "$color": color, "$size": size }),
+        React.createElement(LoadingElement, { "$color": color, "$size": size })));
+};
+export default Loading;

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { LoadingDimensions, LoadingSizes, } from '@a-little-world/little-world-design-system-core';
+const LoadingLogo = ({ size = LoadingSizes.Small, label = 'Loading logo', }) => {
+    const dimension = LoadingDimensions[size];
+    return (React.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.createElement("defs", null,
+            React.createElement("linearGradient", { id: "loadingOrangeGradient", y1: "35.21", x2: "80", y2: "35.21", gradientUnits: "userSpaceOnUse" },
+                React.createElement("stop", { offset: "0", stopColor: "#d85509", stopOpacity: "0.25" },
+                    React.createElement("animate", { attributeName: "stop-opacity", values: "0.25;1;0.25", dur: "2s", repeatCount: "indefinite" })),
+                React.createElement("stop", { offset: "0.14", stopColor: "#df6510", stopOpacity: "0.25" },
+                    React.createElement("animate", { attributeName: "stop-opacity", values: "0.25;1;0.25", dur: "2s", begin: "0.2s", repeatCount: "indefinite" })),
+                React.createElement("stop", { offset: "0.49", stopColor: "#ed861f", stopOpacity: "0.25" },
+                    React.createElement("animate", { attributeName: "stop-opacity", values: "0.25;1;0.25", dur: "2s", begin: "0.4s", repeatCount: "indefinite" })),
+                React.createElement("stop", { offset: "0.67", stopColor: "#f39325", stopOpacity: "0.25" },
+                    React.createElement("animate", { attributeName: "stop-opacity", values: "0.25;1;0.25", dur: "2s", begin: "0.6s", repeatCount: "indefinite" }))),
+            React.createElement("linearGradient", { id: "loadingBlueGradient", x1: "20.41", y1: "31.58", x2: "100.41", y2: "31.58", gradientUnits: "userSpaceOnUse" },
+                React.createElement("stop", { offset: "0.18", stopColor: "#36a9e1", stopOpacity: "0.4" },
+                    React.createElement("animate", { attributeName: "stop-opacity", values: "0.25;1;0.25", dur: "2s", repeatCount: "indefinite" })),
+                React.createElement("stop", { offset: "0.56", stopColor: "#1f8bcc", stopOpacity: "0.4" },
+                    React.createElement("animate", { attributeName: "stop-opacity", values: "0.25;1;0.25", dur: "2s", begin: "0.2s", repeatCount: "indefinite" })),
+                React.createElement("stop", { offset: "1", stopColor: "#0063af", stopOpacity: "0.4" },
+                    React.createElement("animate", { attributeName: "stop-opacity", values: "0.25;1;0.25", dur: "2s", begin: "0.4s", repeatCount: "indefinite" })))),
+        React.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.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" })));
+};
+export default LoadingLogo;

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

@@ -0,0 +1,71 @@
+import styled, { keyframes } from 'styled-components';
+import { LoadingDimensions, LoadingSizes, } from '@a-little-world/little-world-design-system-core';
+import { pixelate } from '../../utils/styles';
+const loading = keyframes `
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+`;
+const logoPulse = keyframes `
+    0%, 100% {
+      transform: scale(1);
+    }
+    50% {
+      transform: scale(1.03);
+    }
+`;
+export const LoadingContainer = styled.div `
+  display: ${({ $inline }) => ($inline ? 'inline-flex' : 'flex')};
+  align-items: center;
+  justify-content: ${({ $align }) => $align || 'center'};
+  position: relative;
+  width: ${({ $inline, $size }) => $inline
+    ? pixelate(LoadingDimensions[$size || LoadingSizes.Small])
+    : '100%'};
+  height: 100%;
+  min-height: ${({ $size }) => pixelate(LoadingDimensions[$size || LoadingSizes.Small])};
+`;
+export const LoadingElement = styled.div `
+    box-sizing: border-box;
+    display: block;
+    position: absolute;
+    width: ${({ $size }) => pixelate(LoadingDimensions[$size || LoadingSizes.Small])};
+    height: ${({ $size }) => pixelate(LoadingDimensions[$size || LoadingSizes.Small])};
+    border: 2px solid ${({ $color }) => $color || 'currentColor'};
+    border-width: ${({ $size }) => ($size === 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;
+    }
+}
+`;
+export const LogoContainer = styled.div `
+  position: relative;
+  width: ${({ $size }) => pixelate(LoadingDimensions[$size || LoadingSizes.Small])};
+  height: ${({ $size }) => pixelate(LoadingDimensions[$size || 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/esm/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;

package/dist/esm/components/Modal/Modal.js

@@ -0,0 +1,59 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { ButtonVariations } from '../Button/Button';
+import { CloseIcon } from '../Icon';
+import { BackdropContainer, CloseButton } from './styles';
+export const BACKDROP_LABEL = 'dialog backdrop';
+const ROOT_LABEL = '#root';
+const CLOSE_BUTTON_LABEL = 'dialog close button';
+const Modal = ({ children, createInPortal = true, open, onClose, locked, parent, className, }) => {
+    const [active, setActive] = useState(false);
+    const backdrop = useRef(null);
+    const el = useMemo(() => document.createElement('div'), []);
+    useEffect(() => {
+        const target = parent?.appendChild ? parent : document.body;
+        target.appendChild(el);
+        return () => {
+            target.removeChild(el);
+        };
+    }, [el, parent, className]);
+    useEffect(() => {
+        const { current } = backdrop;
+        const transitionEnd = () => setActive(open);
+        const keyHandler = (e) => !locked && e.key === 'Escape' && onClose();
+        const clickHandler = (e) => !locked && e.target === current && onClose();
+        let openTimeout;
+        if (current) {
+            current.addEventListener('transitionend', transitionEnd);
+            current.addEventListener('click', clickHandler);
+            window.addEventListener('keyup', keyHandler);
+        }
+        if (open) {
+            openTimeout = window.setTimeout(() => {
+                (document?.activeElement).blur();
+                setActive(open);
+                document.body.style.overflow = 'hidden';
+                document.querySelector(ROOT_LABEL)?.setAttribute('inert', 'true');
+                current?.focus();
+            }, 10);
+        }
+        return () => {
+            if (current) {
+                current.removeEventListener('transitionend', transitionEnd);
+                current.removeEventListener('click', clickHandler);
+            }
+            clearTimeout(openTimeout);
+            document.querySelector(ROOT_LABEL)?.removeAttribute('inert');
+            document.body.style.overflow = 'unset';
+            window.removeEventListener('keyup', keyHandler);
+        };
+    }, [open, locked, onClose]);
+    const Backdrop = (React.createElement(BackdropContainer, { "aria-modal": true, "aria-label": BACKDROP_LABEL, ref: backdrop, "$active": active && open },
+        !locked && (React.createElement(CloseButton, { variation: ButtonVariations.Icon, onClick: onClose },
+            React.createElement(CloseIcon, { label: CLOSE_BUTTON_LABEL, height: "24", width: "24" }))),
+        children));
+    if (open)
+        return createInPortal ? createPortal(Backdrop, el) : Backdrop;
+    return null;
+};
+export default Modal;

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

@@ -0,0 +1,4 @@
+export declare const BackdropContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement>, {
+    $active: boolean;
+}>> & string;
+export declare const CloseButton: 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/Modal/styles.js

@@ -0,0 +1,63 @@
+import styled, { css } from 'styled-components';
+import Button from '../Button/Button';
+export const BackdropContainer = styled.dialog `
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: unset;
+  height: unset;
+  margin: 0;
+  padding: ${({ theme }) => theme.spacing.small};
+  border: none;
+  background-color: rgba(51, 51, 51, 0.3);
+  backdrop-filter: blur(8px);
+  opacity: 0;
+  transition: all 100ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition-delay: 200ms;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  overflow: auto;
+  overscroll-behavior: contain;
+
+  > div {
+    transform: translateY(100px);
+    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
+    opacity: 0;
+  }
+
+  ${({ $active }) => $active &&
+    css `
+      transition-duration: 250ms;
+      transition-delay: 0ms;
+      opacity: 1;
+
+      > div {
+        transform: translateY(0);
+        opacity: 1;
+        transition-delay: 150ms;
+        transition-duration: 350ms;
+      }
+    `}
+
+  @media (min-width: ${({ theme }) => theme.breakpoints.medium}) {
+    padding: ${({ theme }) => theme.spacing.large};
+  }
+`;
+export const CloseButton = styled(Button) `
+  position: absolute;
+  top: ${({ theme }) => theme.spacing.xsmall};
+  right: ${({ theme }) => theme.spacing.xsmall};
+  z-index: 2;
+  padding: 7px;
+  background: ${({ theme }) => theme.color.surface.secondary};
+  border-radius: ${({ theme }) => theme.radius.full};
+
+  @media (min-width: ${({ theme }) => theme.breakpoints.medium}) {
+    top: ${({ theme }) => theme.spacing.medium};
+    right: ${({ theme }) => theme.spacing.medium};
+  }
+`;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+type MultiCheckboxProps = {
+    heading?: string;
+    options: {
+        label: string;
+        value: string;
+    }[];
+    onSelection: (selected: string[]) => void;
+    preSelected?: string[];
+    error?: string;
+    name: string;
+    readOnly?: boolean;
+};
+declare const MultiCheckbox: React.FC<MultiCheckboxProps>;
+export default MultiCheckbox;

package/dist/esm/components/MultiCheckbox/MultiCheckbox.js

@@ -0,0 +1,23 @@
+import React, { useState } from 'react';
+import { useTheme } from 'styled-components';
+import { CheckboxButton } from '../Checkbox/Checkbox';
+import InputError from '../InputError/InputError';
+import Label from '../Label/Label';
+import { MultiCheckboxWrapper } from './styles';
+const MultiCheckbox = ({ error, heading, preSelected, onSelection, options, name, readOnly, }) => {
+    const theme = useTheme();
+    const [selected, setSelected] = useState(preSelected || []);
+    const onSelect = ({ state, value, }) => {
+        const oldValues = selected || [];
+        const newValues = state
+            ? [...oldValues, value]
+            : oldValues.filter(el => el !== value);
+        setSelected(newValues);
+        onSelection(newValues);
+    };
+    return (React.createElement("div", null,
+        heading && React.createElement(Label, { bold: true }, heading),
+        React.createElement(MultiCheckboxWrapper, null, options.map(({ value, label }) => (React.createElement(CheckboxButton, { key: label, error: error, label: label, name: name, checked: selected.includes(value), onCheckedChange: state => onSelect({ value, state }), color: theme.color.surface.selected, value: value, readOnly: readOnly })))),
+        React.createElement(InputError, { visible: Boolean(error), textAlign: "left" }, error)));
+};
+export default MultiCheckbox;

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

@@ -0,0 +1 @@
+export declare const MultiCheckboxWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+export const MultiCheckboxWrapper = styled.div `
+  width: 100%;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: ${({ theme }) => theme.spacing.xxsmall};
+  margin-bottom: ${({ theme }) => theme.spacing.xxsmall};
+`;

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { DropdownProps } from '../Dropdown/Dropdown';
+interface DropdownInstanceProps extends Omit<DropdownProps, 'onValueChange'> {
+    lockedValue?: string;
+    dataField: string;
+    values: string[];
+    ariaLabel: string;
+    errors: string[];
+}
+type Props = {
+    addMoreLabel: string;
+    error?: string;
+    label?: string;
+    labelTooltip?: string;
+    locked?: boolean;
+    defaultSegments?: number;
+    maxSegments?: number;
+    onValueChange: (value: {
+        [x: string]: string;
+    }[]) => void;
+    firstDropdown: DropdownInstanceProps;
+    secondDropdown: DropdownInstanceProps;
+    restrictions?: {
+        [key: string]: string[];
+    };
+};
+declare const MultiDropdown: React.FC<Props>;
+export default MultiDropdown;

package/dist/esm/components/MultiDropdown/MultiDropdown.js

@@ -0,0 +1,86 @@
+import { isEmpty } from 'lodash';
+import React, { useEffect, useState } from 'react';
+import Button, { ButtonSizes, ButtonVariations } from '../Button/Button';
+import Dropdown from '../Dropdown/Dropdown';
+import { PlusIcon, TrashIcon } from '../Icon';
+import Label from '../Label/Label';
+import Text from '../Text/Text';
+import { AddMore, AddMoreButton, DeleteButton, MultiDropdownWrapper, Segment, } from './styles';
+import { useTheme } from 'styled-components';
+const DELETE_SEGMENT = 'delete segment';
+const formatValues = (values, firstDataField, secondDataField) => values[0].reduce((newValues, firstVal, index) => {
+    // only push the value if both values exist
+    if (firstVal && values[1][index]) {
+        newValues.push({
+            [firstDataField]: firstVal,
+            [secondDataField]: values[1][index],
+        });
+    }
+    return newValues;
+}, []);
+const setDropdownValues = (firstDropdown, secondDropdown) => {
+    const first = (firstDropdown.lockedValue
+        ? [firstDropdown.lockedValue, ...(firstDropdown.values.slice(1) || [])]
+        : firstDropdown.values) || [];
+    const second = (secondDropdown.lockedValue
+        ? [secondDropdown.lockedValue, ...(secondDropdown.values.slice(1) || [])]
+        : secondDropdown.values) || [];
+    return [first, second];
+};
+const MultiDropdown = ({ addMoreLabel = 'Add more rows', label, labelTooltip, locked, firstDropdown, secondDropdown, onValueChange, defaultSegments = 1, maxSegments = 4, restrictions, }) => {
+    const [segments, setSegments] = useState(Math.max(firstDropdown?.values?.length ?? 0, secondDropdown?.values?.length ?? 0, defaultSegments));
+    const [values, setValues] = useState(setDropdownValues(firstDropdown, secondDropdown));
+    const theme = useTheme();
+    useEffect(() => {
+        setValues(setDropdownValues(firstDropdown, secondDropdown));
+        setSegments(Math.max(firstDropdown?.values?.length ?? 0, secondDropdown?.values?.length ?? 0, defaultSegments));
+    }, [firstDropdown?.values, secondDropdown?.values]);
+    const handleValueChange = (value, position, index) => {
+        setValues(values => {
+            const newValues = [...values];
+            newValues[position][index] = value;
+            if (values[position || 0])
+                onValueChange(formatValues(newValues, firstDropdown.dataField, secondDropdown.dataField));
+            return newValues;
+        });
+    };
+    const handleDelete = (index) => {
+        setValues(values => {
+            const newValues = [...values];
+            (newValues[0].splice(index, 1),
+                newValues[1].splice(index, 1),
+                onValueChange(formatValues(newValues, firstDropdown.dataField, secondDropdown.dataField)));
+            return newValues;
+        });
+        setSegments(currentNumber => currentNumber - 1);
+    };
+    return (React.createElement(MultiDropdownWrapper, null,
+        label && (React.createElement(Label, { bold: true, htmlFor: firstDropdown.label, marginBottom: theme.spacing.xsmall, tooltipText: labelTooltip }, label)),
+        Array(segments)
+            .fill('')
+            .map((_, index) => {
+            const isFirstSegment = index === 0;
+            const firstSegmentLockedVal1 = isFirstSegment
+                ? firstDropdown.lockedValue
+                : undefined;
+            const firstSegmentLockedVal2 = isFirstSegment
+                ? secondDropdown.lockedValue
+                : undefined;
+            const deletable = !!index && !locked;
+            return (React.createElement(Segment, { "$locked": locked, key: `MultiDropdown Segment ${index}${values[0][index]}${values[1][index]}` },
+                React.createElement(Dropdown, { ariaLabel: firstDropdown.ariaLabel + index, placeholder: firstDropdown.placeholder, onValueChange: val => handleValueChange(val, 0, index), options: firstDropdown.options, value: values[0][index], lockedValue: firstSegmentLockedVal1 ||
+                        (locked ? values[0][index] : undefined), required: Boolean(values[1][index]), error: firstDropdown.errors?.[index] }),
+                React.createElement(Dropdown, { ariaLabel: secondDropdown.ariaLabel + index, placeholder: secondDropdown.placeholder, onValueChange: val => handleValueChange(val, 1, index), options: isEmpty(restrictions?.[values[0][index]])
+                        ? secondDropdown.options
+                        : secondDropdown.options.filter(option => restrictions?.[values[0][index]]?.includes(option.value)), value: values[1][index], lockedValue: firstSegmentLockedVal2 ||
+                        (locked ? values[1][index] : undefined), required: Boolean(values[0][index]), error: secondDropdown.errors?.[index] }),
+                deletable && (React.createElement(DeleteButton, { variation: ButtonVariations.Icon, onClick: () => handleDelete(index), size: ButtonSizes.Small },
+                    React.createElement(TrashIcon, { label: DELETE_SEGMENT, color: "orange" })))));
+        }),
+        !locked && (React.createElement(AddMore, null,
+            React.createElement(AddMoreButton, { variation: ButtonVariations.Icon, disabled: segments === maxSegments, onClick: () => setSegments(currentNumber => currentNumber + 1), size: ButtonSizes.Small },
+                React.createElement(PlusIcon, { label: "add more dropdowns", width: 10 })),
+            React.createElement(Button, { variation: ButtonVariations.Inline, disabled: segments === maxSegments, onClick: () => setSegments(currentNumber => currentNumber + 1) },
+                React.createElement(Text, null, addMoreLabel))))));
+};
+export default MultiDropdown;

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

@@ -0,0 +1,7 @@
+export declare const MultiDropdownWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const AddMore: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const AddMoreButton: 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>>;
+export declare const Segment: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {
+    $locked?: boolean;
+}>> & string;
+export declare const DeleteButton: 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>>;