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

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

@@ -0,0 +1,38 @@
+import styled from 'styled-components';
+import Button from '../Button/Button';
+import { DROPDOWN_MAX_WIDTH } from '../Dropdown/styles';
+export const MultiDropdownWrapper = styled.div ``;
+export const AddMore = styled.div `
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.spacing.xxsmall};
+`;
+export const AddMoreButton = styled(Button) `
+  color: ${({ theme }) => theme.color.text.highlight};
+
+  &:disabled {
+    color: ${({ theme }) => theme.color.text.disabled};
+  }
+`;
+export const Segment = styled.section `
+  display: grid;
+  max-width: calc(
+    ${DROPDOWN_MAX_WIDTH} * 2 + ${({ theme }) => theme.spacing.small}
+  );
+  grid-template-columns: ${({ $locked, theme }) => $locked
+    ? 'repeat(2, minmax(0, 1fr))'
+    : `repeat(2, minmax(0, 1fr)) minmax(
+      ${theme.spacing.medium},
+      auto
+    )`};
+  align-items: start;
+  gap: ${({ theme }) => theme.spacing.small};
+  margin-bottom: ${({ theme }) => theme.spacing.xxsmall};
+`;
+export const DeleteButton = styled(Button) `
+  top: ${({ theme }) => theme.spacing.xxsmall};
+  margin-left: calc(
+    ${({ theme }) => theme.spacing.xxsmall} -
+      ${({ theme }) => theme.spacing.small}
+  );
+`;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+type Props = {
+    error?: string;
+    id: string;
+    label: string;
+    labelTooltip?: string;
+    options: {
+        tag: string;
+        value: string;
+    }[];
+    preSelected?: string[];
+    onSelection: (selected: string[]) => void;
+    withBackground?: boolean;
+};
+declare const MultiSelection: React.FC<Props>;
+export default MultiSelection;

package/dist/esm/components/MultiSelection/MultiSelection.js

@@ -0,0 +1,24 @@
+import React, { useEffect, useState } from 'react';
+import { MultiSelectionWrapper, Options, Option } from './styles';
+import Label from '../Label/Label';
+import InputError from '../InputError/InputError';
+const MultiSelection = ({ error, label, labelTooltip, id, options, preSelected = [], onSelection, withBackground = true, }) => {
+    const [selected, setSelected] = useState([]);
+    useEffect(() => {
+        setSelected(preSelected);
+    }, [JSON.stringify([preSelected])]);
+    const handleOnClick = (newSelection) => {
+        setSelected(newSelection);
+        onSelection(newSelection);
+    };
+    return (React.createElement(MultiSelectionWrapper, null,
+        label && (React.createElement(Label, { bold: true, htmlFor: id, tooltipText: labelTooltip }, label)),
+        React.createElement(Options, { "$hasError": Boolean(error), "$withBackground": withBackground }, options.map(option => {
+            const isSelected = selected?.some(el => el === option.value);
+            return (React.createElement(Option, { key: option.value, "$selected": isSelected, "$withBackground": withBackground, onClick: () => handleOnClick(isSelected
+                    ? selected.filter(el => el !== option.value)
+                    : [...selected, option.value]), type: "button" }, option.tag));
+        })),
+        React.createElement(InputError, { visible: Boolean(error) }, error)));
+};
+export default MultiSelection;

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

@@ -0,0 +1,9 @@
+export declare const MultiSelectionWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Options: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $hasError: boolean;
+    $withBackground: boolean;
+}>> & string;
+export declare const Option: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $selected: boolean;
+    $withBackground: boolean;
+}>> & string;

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

@@ -0,0 +1,63 @@
+import styled, { css } from 'styled-components';
+import { INPUT_ERROR_CSS } from '../InputError/InputError';
+export const MultiSelectionWrapper = styled.div `
+  width: 100%:
+`;
+export const Options = styled.div `
+  display: flex;
+  border-radius: 15px;
+  align-items: center;
+  text-align: center;
+  flex-wrap: wrap;
+  gap: ${({ theme }) => theme.spacing.xxsmall};
+  padding: 0px;
+  margin-bottom: ${({ theme }) => theme.spacing.xxsmall};
+  white-space: pre-line;
+
+  ${({ theme, $withBackground }) => $withBackground &&
+    css `
+      background: ${theme.color.surface.secondary};
+      border: 1px solid ${theme.color.border.subtle};
+      padding: ${theme.spacing.xxsmall};
+
+      @media (min-width: ${theme.breakpoints.small}) {
+        padding: ${theme.spacing.small};
+      }
+    `}
+
+  ${({ $hasError }) => $hasError && INPUT_ERROR_CSS}
+`;
+export const Option = styled.button `
+  font-family: 'Signika Negative';
+  color: ${({ theme, $selected, $withBackground }) => $withBackground || $selected
+    ? theme.color.text.primary
+    : theme.color.text.disabled};
+  background: ${({ theme }) => theme.color.surface.primary};
+  border-radius: 10px;
+  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.03);
+  border-radius: 1000px;
+  border: 2px solid
+    ${({ theme, $withBackground }) => $withBackground
+    ? theme.color.border.reversed
+    : theme.color.border.subtle};
+  padding: ${({ theme }) => `${theme.spacing.xxxsmall} ${theme.spacing.xsmall}`};
+  min-width: 60px;
+  height: 33px;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  ${({ theme }) => css `
+    @media (min-width: ${theme.breakpoints.small}) {
+      padding: ${theme.spacing.xxsmall} ${theme.spacing.small};
+      min-width: 80px;
+      height: 45px;
+    }
+  `}
+
+  ${({ $selected, theme }) => $selected &&
+    css `
+      border-color: ${theme.color.border.selected};
+    `}
+`;

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

@@ -0,0 +1,35 @@
+import * as RadixNavigationMenu from '@radix-ui/react-navigation-menu';
+import React, { HTMLProps, PropsWithChildren, ReactNode } from 'react';
+import { LinkProps } from '../Link/Link';
+export declare enum MenuContentLayout {
+    callout = "callout",
+    calloutWithList = "calloutWithList",
+    oneColumn = "oneColumn",
+    twoColumns = "twoColumns",
+    threeColumns = "threeColumns"
+}
+interface NavigationMenuContentItemProps extends HTMLProps<HTMLAnchorElement> {
+    active?: boolean;
+    title?: string;
+    children?: ReactNode;
+}
+declare const NavigationMenuContentItem: React.ForwardRefExoticComponent<Omit<NavigationMenuContentItemProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+declare const NavigationMenuItem: React.ForwardRefExoticComponent<RadixNavigationMenu.NavigationMenuItemProps & React.RefAttributes<HTMLLIElement>>;
+declare const NavigationMenuLink: (props: LinkProps & RadixNavigationMenu.NavigationMenuLinkProps) => React.JSX.Element;
+declare const NavigationMenuTrigger: ({ children }: PropsWithChildren) => React.JSX.Element;
+interface CalloutProps {
+    heading: string;
+    description: string;
+    link: string;
+    Icon?: any;
+    to?: string;
+    href?: string;
+}
+declare const NavigationMenuCallout: ({ heading, description, Icon, to, href, }: CalloutProps) => React.JSX.Element;
+declare const NavigationMenuContent: ({ layout, children, }: PropsWithChildren<{
+    layout: keyof typeof MenuContentLayout;
+}>) => React.JSX.Element;
+declare const NavigationMenu: ({ children, withShadow, }: PropsWithChildren<{
+    withShadow?: boolean;
+}>) => React.JSX.Element;
+export { NavigationMenu, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuCallout, NavigationMenuLink, NavigationMenuContentItem, };

package/dist/esm/components/NavigationMenu/NavigationMenu.js

@@ -0,0 +1,40 @@
+import * as RadixNavigationMenu from '@radix-ui/react-navigation-menu';
+import React from 'react';
+import { Logo } from '../Icon';
+import { Callout, CalloutHeading, CalloutText, ContentList, ListItemHeading, ListItemLink, ListItemText, MenuTriggerIcon, NavMenuContent, NavMenuIndicator, NavMenuIndicatorArrow, NavMenuLink, NavMenuList, NavMenuRoot, NavMenuTrigger, NavMenuViewport, ViewportPosition, } from './styles';
+export var MenuContentLayout;
+(function (MenuContentLayout) {
+    MenuContentLayout["callout"] = "callout";
+    MenuContentLayout["calloutWithList"] = "calloutWithList";
+    MenuContentLayout["oneColumn"] = "oneColumn";
+    MenuContentLayout["twoColumns"] = "twoColumns";
+    MenuContentLayout["threeColumns"] = "threeColumns";
+})(MenuContentLayout || (MenuContentLayout = {}));
+const NavigationMenuContentItem = React.forwardRef(({ active, className, children, title, ...props }, forwardedRef) => (React.createElement("li", null,
+    React.createElement(RadixNavigationMenu.Link, { asChild: true, active: active },
+        React.createElement(ListItemLink, { className: className, ...props, ref: forwardedRef, textDecoration: false, active: active },
+            React.createElement(ListItemHeading, { tag: "h3" }, title),
+            React.createElement(ListItemText, { className: "ListItemText" }, children))))));
+const NavigationMenuList = NavMenuList;
+const NavigationMenuItem = RadixNavigationMenu.Item;
+const NavigationMenuLink = (props) => (React.createElement(RadixNavigationMenu.Link, { asChild: true },
+    React.createElement(NavMenuLink, { ...props, textDecoration: false }, props.children)));
+const NavigationMenuTrigger = ({ children }) => (React.createElement(NavMenuTrigger, null,
+    children,
+    React.createElement(MenuTriggerIcon, { width: 12, height: 12, label: "menu trigger icon" })));
+const NavigationMenuCallout = ({ heading, description, Icon, to, href, }) => (React.createElement("li", { style: { gridRow: 'span 3' } },
+    React.createElement(RadixNavigationMenu.Link, { asChild: true },
+        React.createElement(Callout, { to: to, href: href },
+            Icon ? (React.createElement(Icon, { width: "48px", height: "48px", label: "Callout Icon" })) : (React.createElement(Logo, { width: "48px", height: "48px", color: "white", label: "Little World Icon" })),
+            React.createElement(CalloutHeading, null, heading),
+            React.createElement(CalloutText, null, description)))));
+const NavigationMenuContent = ({ layout, children, }) => (React.createElement(NavMenuContent, null,
+    React.createElement(ContentList, { "$layout": layout }, children)));
+const NavigationMenu = ({ children, withShadow, }) => (React.createElement(NavMenuRoot, null,
+    React.createElement(NavigationMenuList, { "$withShadow": withShadow },
+        children,
+        React.createElement(NavMenuIndicator, null,
+            React.createElement(NavMenuIndicatorArrow, null))),
+    React.createElement(ViewportPosition, null,
+        React.createElement(NavMenuViewport, null))));
+export { NavigationMenu, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuCallout, NavigationMenuLink, NavigationMenuContentItem, };

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

@@ -0,0 +1,81 @@
+import * as RadixNavigationMenu from '@radix-ui/react-navigation-menu';
+export declare const MenuTriggerIcon: 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 NavMenuRoot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<RadixNavigationMenu.NavigationMenuProps & import("react").RefAttributes<HTMLElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<RadixNavigationMenu.NavigationMenuProps & import("react").RefAttributes<HTMLElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const NavMenuList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<RadixNavigationMenu.NavigationMenuListProps & import("react").RefAttributes<HTMLUListElement>, {
+    $withShadow?: boolean;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<RadixNavigationMenu.NavigationMenuListProps & import("react").RefAttributes<HTMLUListElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const NavMenuLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react-router-dom").LinkProps, "to"> & import("@a-little-world/little-world-design-system-core").LinkBaseProps & import("react").RefAttributes<HTMLAnchorElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("react-router-dom").LinkProps, "to"> & import("@a-little-world/little-world-design-system-core").LinkBaseProps & import("react").RefAttributes<HTMLAnchorElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const NavMenuTrigger: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<RadixNavigationMenu.NavigationMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<RadixNavigationMenu.NavigationMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const NavMenuContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<RadixNavigationMenu.NavigationMenuContentProps & import("react").RefAttributes<HTMLDivElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<RadixNavigationMenu.NavigationMenuContentProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const NavMenuIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<RadixNavigationMenu.NavigationMenuIndicatorProps & import("react").RefAttributes<HTMLDivElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<RadixNavigationMenu.NavigationMenuIndicatorProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const NavMenuIndicatorArrow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ViewportPosition: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const NavMenuViewport: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<RadixNavigationMenu.NavigationMenuViewportProps & import("react").RefAttributes<HTMLDivElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<RadixNavigationMenu.NavigationMenuViewportProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const ContentList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {
+    $layout: string;
+}>> & string;
+export declare const ListItemLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react-router-dom").LinkProps, "to"> & import("@a-little-world/little-world-design-system-core").LinkBaseProps & import("react").RefAttributes<HTMLAnchorElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("react-router-dom").LinkProps, "to"> & import("@a-little-world/little-world-design-system-core").LinkBaseProps & import("react").RefAttributes<HTMLAnchorElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const ListItemHeading: 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 ListItemText: 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 Callout: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react-router-dom").LinkProps, "to"> & import("@a-little-world/little-world-design-system-core").LinkBaseProps & import("react").RefAttributes<HTMLAnchorElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("react-router-dom").LinkProps, "to"> & import("@a-little-world/little-world-design-system-core").LinkBaseProps & import("react").RefAttributes<HTMLAnchorElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const CalloutHeading: 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 CalloutText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@a-little-world/little-world-design-system-core").TextBaseProps & {
+    className?: string;
+    disableParser?: boolean;
+    id?: string;
+    style?: import("react").CSSProperties;
+    tag?: "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "li" | "label" | "span" | "strong" | "div";
+}, never>> & string & Omit<({ bold, center, children, color, className, disableParser, id, style, tag, type, }: import("@a-little-world/little-world-design-system-core").TextBaseProps & {
+    className?: string;
+    disableParser?: boolean;
+    id?: string;
+    style?: import("react").CSSProperties;
+    tag?: "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "li" | "label" | "span" | "strong" | "div";
+}) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;

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

@@ -0,0 +1,257 @@
+import * as RadixNavigationMenu from '@radix-ui/react-navigation-menu';
+import styled, { css } from 'styled-components';
+import { enterFromLeft, enterFromRight, exitToLeft, exitToRight, scaleIn, scaleOut, } from '../../utils/animations';
+import { ChevronDownIcon } from '../Icon';
+import Link from '../Link/Link';
+import Text from '../Text/Text';
+export const MenuTriggerIcon = styled(ChevronDownIcon) `
+  position: relative;
+  color: ${({ theme }) => theme.color.text.primary};
+  top: 1px;
+  transition: transform 250ms ease;
+`;
+export const NavMenuRoot = styled(RadixNavigationMenu.Root) `
+  position: relative;
+  display: flex;
+  align-items: center;
+  z-index: 1000;
+
+  &[data-state='open'] > ${MenuTriggerIcon} {
+    transform: rotate(-180deg);
+  }
+`;
+export const NavMenuList = styled(RadixNavigationMenu.List) `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: ${({ theme }) => theme.color.surface.primary};
+  padding: ${({ theme }) => theme.spacing.xxsmall};
+  border-radius: ${({ theme }) => theme.radius.xxsmall};
+  list-style: none;
+  margin: 0;
+  gap: ${({ theme }) => theme.spacing.xxsmall};
+
+  ${({ theme, $withShadow }) => $withShadow && `box-shadow: 0 2px 10px ${theme.color.surface.secondary};`}
+`;
+const MENU_ITEM_CSS = css `
+  gap: ${({ theme }) => theme.spacing.xxsmall};
+  padding: ${({ theme }) => `${theme.spacing.xsmall}`};
+  outline: none;
+  user-select: none;
+  font-weight: 500;
+  line-height: 1;
+  font-size: 15px;
+  border-radius: ${({ theme }) => theme.radius.xxxsmall};
+  color: ${({ theme }) => theme.color.text.primary};
+
+  &:focus {
+    box-shadow: 0 0 0 2px ${({ theme }) => theme.color.surface.secondary};
+  }
+
+  &:hover {
+    background-color: ${({ theme }) => theme.color.surface.secondary};
+  }
+`;
+export const NavMenuLink = styled(Link) `
+  display: block;
+  text-decoration: none;
+
+  ${MENU_ITEM_CSS}
+  ${({ active, theme }) => active &&
+    `
+   box-shadow: 0 0 0 2px ${theme.color.border.bold};  
+`}
+`;
+export const NavMenuTrigger = styled(RadixNavigationMenu.Trigger) `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  ${MENU_ITEM_CSS}
+`;
+export const NavMenuContent = styled(RadixNavigationMenu.Content) `
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  animation-duration: 250ms;
+  animation-timing-function: ease;
+  z-index: 200;
+
+  &[data-motion='from-start'] {
+    animation-name: ${enterFromLeft};
+  }
+  &[data-motion='from-end'] {
+    animation-name: ${enterFromRight};
+  }
+  &[data-motion='to-start'] {
+    animation-name: ${exitToLeft};
+  }
+
+  &[data-motion='to-end'] {
+    animation-name: ${exitToRight};
+  }
+`;
+export const NavMenuIndicator = styled(RadixNavigationMenu.Indicator) `
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  height: 10px;
+  top: 100%;
+  overflow: hidden;
+  z-index: 1;
+  transition:
+    width,
+    transform 250ms ease;
+
+  &[data-state='visible'] {
+    animation: fadeIn 200ms ease forward;
+  }
+
+  &[data-state='hidden'] {
+    animation: fadeOut 200ms ease forward;
+  }
+`;
+export const NavMenuIndicatorArrow = styled.div `
+  position: relative;
+  top: 70%;
+  background-color: white;
+  width: 10px;
+  height: 10px;
+  transform: rotate(45deg);
+  border-top-left-radius: 2px;
+`;
+export const ViewportPosition = styled.div `
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  top: 100%;
+  left: 0;
+  perspective: 2000px;
+`;
+export const NavMenuViewport = styled(RadixNavigationMenu.Viewport) `
+  position: relative;
+  transform-origin: top center;
+  margin-top: 10px;
+  width: 100%;
+  background-color: ${({ theme }) => theme.color.surface.primary};
+  border-radius: 6px;
+  overflow: hidden;
+  box-shadow:
+    hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
+    hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
+
+  transition:
+    width,
+    height,
+    300ms ease;
+  height: var(--radix-navigation-menu-viewport-height);
+
+  &[data-state='open'] {
+    animation: ${scaleIn} 200ms ease;
+  }
+
+  &[data-state='closed'] {
+    animation: ${scaleOut} 200ms ease;
+  }
+`;
+export const ContentList = styled.ul `
+  display: grid;
+  padding: 22px;
+  margin: 0;
+  column-gap: 10px;
+  list-style: none;
+  gap: ${({ theme }) => theme.spacing.xxxsmall};
+
+  ${({ $layout }) => {
+    if ($layout === 'callout')
+        return css `
+        width: 100%;
+        grid-template-columns: 1fr;
+      `;
+    if ($layout === 'calloutWithList')
+        return css `
+        width: 100%;
+        grid-template-columns: 0.75fr 1fr;
+      `;
+    if ($layout === 'oneColumn')
+        return css `
+        width: 100%;
+        grid-auto-flow: column;
+        grid-template-rows: repeat(1, 1fr);
+      `;
+    if ($layout === 'twoColumns')
+        return css `
+        width: 100%;
+        grid-auto-flow: column;
+        grid-template-rows: repeat(3, 1fr);
+      `;
+    if ($layout === 'threeColumns')
+        return css `
+        width: 100%;
+        grid-auto-flow: column;
+        grid-template-rows: repeat(2, 1fr);
+      `;
+}}
+`;
+export const ListItemLink = styled(Link) `
+  display: block;
+  outline: none;
+  text-decoration: none;
+  user-select: none;
+  padding: 12px;
+  border-radius: 6px;
+  font-size: 15px;
+  line-height: 1;
+
+  &:focus {
+    box-shadow: 0 0 0 2px ${({ theme }) => theme.color.surface.secondary};
+  }
+  &:hover {
+    background-color: ${({ theme }) => theme.color.surface.secondary};
+  }
+
+  ${({ active, theme }) => active &&
+    `
+     box-shadow: 0 0 0 2px ${theme.color.border.bold};  
+  `}
+`;
+export const ListItemHeading = styled(Text) `
+  font-weight: 500;
+  line-height: 1.2;
+  margin-bottom: 5px;
+`;
+export const ListItemText = styled(Text) `
+  color: ${({ theme }) => theme.color.text.primary};
+  line-height: 1.4;
+  font-weight: initial;
+`;
+export const Callout = styled(Link) `
+  display: flex;
+  justify-content: flex-end;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  background: ${({ theme }) => `linear-gradient(135deg, ${theme.color.text.primary} 0%, ${theme.color.border.bold} 100%)`};
+  border-radius: 6px;
+  padding: 25px;
+  text-decoration: none;
+  outline: none;
+  user-select: none;
+  grid-row: 1 / -1; /* Span all rows */
+
+  &:focus {
+    box-shadow: 0 0 0 2px ${({ theme }) => theme.color.text.primary};
+  }
+`;
+export const CalloutHeading = styled(Text) `
+  color: ${({ theme }) => theme.color.text.reversed};
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 1.2;
+`;
+export const CalloutText = styled(Text) `
+  color: ${({ theme }) => theme.color.text.reversed};
+  font-size: 14px;
+  line-height: 1.3;
+`;

package/dist/esm/components/Popover/InfoPopover.d.ts

@@ -0,0 +1,8 @@
+import { PopoverContentProps, PopoverProps } from '@radix-ui/react-popover';
+import React from 'react';
+type Props = {
+    text: string;
+    trigger?: React.ReactNode;
+} & PopoverProps & PopoverContentProps;
+declare const InfoPopover: React.FC<Props>;
+export default InfoPopover;

package/dist/esm/components/Popover/InfoPopover.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import Popover, { PopoverSizes } from './Popover';
+import Text from '../Text/Text';
+import { TextTypes } from '@a-little-world/little-world-design-system-core';
+const DEFAULT_SIDE_OFFSET = 4; //px
+const InfoPopover = ({ defaultOpen, open, side = 'top', sideOffset = DEFAULT_SIDE_OFFSET, trigger, text, ...rest }) => (React.createElement(Popover, { asTooltip: true, defaultOpen: defaultOpen, open: open, side: side, sideOffset: sideOffset, showCloseButton: true, trigger: trigger, width: PopoverSizes.Large, ...rest },
+    React.createElement(Text, { type: TextTypes.Body5 }, text)));
+export default InfoPopover;

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

@@ -0,0 +1,16 @@
+import * as RadixPopover from '@radix-ui/react-popover';
+import React from 'react';
+export declare enum PopoverSizes {
+    Small = "160px",
+    Medium = "240px",
+    Large = "360px"
+}
+type PopoverProps = {
+    asTooltip?: boolean;
+    children: React.ReactNode;
+    showCloseButton?: boolean;
+    trigger?: React.ReactNode;
+    width?: PopoverSizes;
+} & RadixPopover.PopoverProps & RadixPopover.PopoverContentProps;
+declare const Popover: React.FC<PopoverProps>;
+export default Popover;

package/dist/esm/components/Popover/Popover.js

@@ -0,0 +1,22 @@
+import * as RadixPopover from '@radix-ui/react-popover';
+import React from 'react';
+import Button, { ButtonVariations } from '../Button/Button';
+import { CloseIcon } from '../Icon';
+import { PopoverRoot, StyledPopoverArrow, StyledPopoverClose, StyledPopoverContent, } from './styles';
+export var PopoverSizes;
+(function (PopoverSizes) {
+    PopoverSizes["Small"] = "160px";
+    PopoverSizes["Medium"] = "240px";
+    PopoverSizes["Large"] = "360px";
+})(PopoverSizes || (PopoverSizes = {}));
+const DEFAULT_SIDE_OFFSET = 4; //px
+const Popover = ({ asTooltip, defaultOpen, children, onFocusOutside, open, side, sideOffset = DEFAULT_SIDE_OFFSET, showCloseButton, trigger, width = PopoverSizes.Small, }) => (React.createElement(PopoverRoot, { defaultOpen: defaultOpen, open: open },
+    trigger && React.createElement(RadixPopover.Trigger, { asChild: true }, trigger),
+    React.createElement(RadixPopover.Portal, null,
+        React.createElement(StyledPopoverContent, { side: side, sideOffset: sideOffset, "$asTooltip": asTooltip, "$width": width, "$extraPaddingTop": Boolean(!asTooltip && showCloseButton), collisionPadding: DEFAULT_SIDE_OFFSET, onFocusOutside: onFocusOutside },
+            children,
+            showCloseButton && (React.createElement(StyledPopoverClose, { asChild: true, "$asTooltip": asTooltip },
+                React.createElement(Button, { variation: ButtonVariations.Icon },
+                    React.createElement(CloseIcon, { label: "popover close", width: 12, height: 12 })))),
+            React.createElement(StyledPopoverArrow, { "$asTooltip": asTooltip })))));
+export default Popover;

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

@@ -0,0 +1,14 @@
+import { PopoverSizes } from './Popover';
+export declare const PopoverRoot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@radix-ui/react-popover").PopoverProps, never>> & string & Omit<import("react").FC<import("@radix-ui/react-popover").PopoverProps>, keyof import("react").Component<any, {}, any>>;
+export declare const POPOVER_CONTENT_CSS: import("styled-components").RuleSet<object>;
+export declare const StyledPopoverContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("@radix-ui/react-popover").PopoverContentProps & import("react").RefAttributes<HTMLDivElement>, {
+    $asTooltip?: boolean;
+    $extraPaddingTop: boolean;
+    $width: PopoverSizes;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<import("@radix-ui/react-popover").PopoverContentProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledPopoverClose: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("@radix-ui/react-popover").PopoverCloseProps & import("react").RefAttributes<HTMLButtonElement>, {
+    $asTooltip?: boolean;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<import("@radix-ui/react-popover").PopoverCloseProps & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledPopoverArrow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("@radix-ui/react-popover").PopoverArrowProps & import("react").RefAttributes<SVGSVGElement>, {
+    $asTooltip?: boolean;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<import("@radix-ui/react-popover").PopoverArrowProps & import("react").RefAttributes<SVGSVGElement>>, keyof import("react").Component<any, {}, any>>;