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

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

@@ -0,0 +1,99 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Option = exports.Options = exports.MultiSelectionWrapper = void 0;
+const styled_components_1 = __importStar(require("styled-components"));
+const InputError_1 = require("../InputError/InputError");
+exports.MultiSelectionWrapper = styled_components_1.default.div `
+  width: 100%:
+`;
+exports.Options = styled_components_1.default.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 &&
+    (0, styled_components_1.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 && InputError_1.INPUT_ERROR_CSS}
+`;
+exports.Option = styled_components_1.default.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 }) => (0, styled_components_1.css) `
+    @media (min-width: ${theme.breakpoints.small}) {
+      padding: ${theme.spacing.xxsmall} ${theme.spacing.small};
+      min-width: 80px;
+      height: 45px;
+    }
+  `}
+
+  ${({ $selected, theme }) => $selected &&
+    (0, styled_components_1.css) `
+      border-color: ${theme.color.border.selected};
+    `}
+`;

package/dist/cjs/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/cjs/components/NavigationMenu/NavigationMenu.js

@@ -0,0 +1,85 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationMenuContentItem = exports.NavigationMenuLink = exports.NavigationMenuCallout = exports.NavigationMenuContent = exports.NavigationMenuTrigger = exports.NavigationMenuItem = exports.NavigationMenu = exports.MenuContentLayout = void 0;
+const RadixNavigationMenu = __importStar(require("@radix-ui/react-navigation-menu"));
+const react_1 = __importDefault(require("react"));
+const Icon_1 = require("../Icon");
+const styles_1 = require("./styles");
+var MenuContentLayout;
+(function (MenuContentLayout) {
+    MenuContentLayout["callout"] = "callout";
+    MenuContentLayout["calloutWithList"] = "calloutWithList";
+    MenuContentLayout["oneColumn"] = "oneColumn";
+    MenuContentLayout["twoColumns"] = "twoColumns";
+    MenuContentLayout["threeColumns"] = "threeColumns";
+})(MenuContentLayout || (exports.MenuContentLayout = MenuContentLayout = {}));
+const NavigationMenuContentItem = react_1.default.forwardRef(({ active, className, children, title, ...props }, forwardedRef) => (react_1.default.createElement("li", null,
+    react_1.default.createElement(RadixNavigationMenu.Link, { asChild: true, active: active },
+        react_1.default.createElement(styles_1.ListItemLink, { className: className, ...props, ref: forwardedRef, textDecoration: false, active: active },
+            react_1.default.createElement(styles_1.ListItemHeading, { tag: "h3" }, title),
+            react_1.default.createElement(styles_1.ListItemText, { className: "ListItemText" }, children))))));
+exports.NavigationMenuContentItem = NavigationMenuContentItem;
+const NavigationMenuList = styles_1.NavMenuList;
+const NavigationMenuItem = RadixNavigationMenu.Item;
+exports.NavigationMenuItem = NavigationMenuItem;
+const NavigationMenuLink = (props) => (react_1.default.createElement(RadixNavigationMenu.Link, { asChild: true },
+    react_1.default.createElement(styles_1.NavMenuLink, { ...props, textDecoration: false }, props.children)));
+exports.NavigationMenuLink = NavigationMenuLink;
+const NavigationMenuTrigger = ({ children }) => (react_1.default.createElement(styles_1.NavMenuTrigger, null,
+    children,
+    react_1.default.createElement(styles_1.MenuTriggerIcon, { width: 12, height: 12, label: "menu trigger icon" })));
+exports.NavigationMenuTrigger = NavigationMenuTrigger;
+const NavigationMenuCallout = ({ heading, description, Icon, to, href, }) => (react_1.default.createElement("li", { style: { gridRow: 'span 3' } },
+    react_1.default.createElement(RadixNavigationMenu.Link, { asChild: true },
+        react_1.default.createElement(styles_1.Callout, { to: to, href: href },
+            Icon ? (react_1.default.createElement(Icon, { width: "48px", height: "48px", label: "Callout Icon" })) : (react_1.default.createElement(Icon_1.Logo, { width: "48px", height: "48px", color: "white", label: "Little World Icon" })),
+            react_1.default.createElement(styles_1.CalloutHeading, null, heading),
+            react_1.default.createElement(styles_1.CalloutText, null, description)))));
+exports.NavigationMenuCallout = NavigationMenuCallout;
+const NavigationMenuContent = ({ layout, children, }) => (react_1.default.createElement(styles_1.NavMenuContent, null,
+    react_1.default.createElement(styles_1.ContentList, { "$layout": layout }, children)));
+exports.NavigationMenuContent = NavigationMenuContent;
+const NavigationMenu = ({ children, withShadow, }) => (react_1.default.createElement(styles_1.NavMenuRoot, null,
+    react_1.default.createElement(NavigationMenuList, { "$withShadow": withShadow },
+        children,
+        react_1.default.createElement(styles_1.NavMenuIndicator, null,
+            react_1.default.createElement(styles_1.NavMenuIndicatorArrow, null))),
+    react_1.default.createElement(styles_1.ViewportPosition, null,
+        react_1.default.createElement(styles_1.NavMenuViewport, null))));
+exports.NavigationMenu = NavigationMenu;

package/dist/cjs/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/cjs/components/NavigationMenu/styles.js

@@ -0,0 +1,296 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CalloutText = exports.CalloutHeading = exports.Callout = exports.ListItemText = exports.ListItemHeading = exports.ListItemLink = exports.ContentList = exports.NavMenuViewport = exports.ViewportPosition = exports.NavMenuIndicatorArrow = exports.NavMenuIndicator = exports.NavMenuContent = exports.NavMenuTrigger = exports.NavMenuLink = exports.NavMenuList = exports.NavMenuRoot = exports.MenuTriggerIcon = void 0;
+const RadixNavigationMenu = __importStar(require("@radix-ui/react-navigation-menu"));
+const styled_components_1 = __importStar(require("styled-components"));
+const animations_1 = require("../../utils/animations");
+const Icon_1 = require("../Icon");
+const Link_1 = __importDefault(require("../Link/Link"));
+const Text_1 = __importDefault(require("../Text/Text"));
+exports.MenuTriggerIcon = (0, styled_components_1.default)(Icon_1.ChevronDownIcon) `
+  position: relative;
+  color: ${({ theme }) => theme.color.text.primary};
+  top: 1px;
+  transition: transform 250ms ease;
+`;
+exports.NavMenuRoot = (0, styled_components_1.default)(RadixNavigationMenu.Root) `
+  position: relative;
+  display: flex;
+  align-items: center;
+  z-index: 1000;
+
+  &[data-state='open'] > ${exports.MenuTriggerIcon} {
+    transform: rotate(-180deg);
+  }
+`;
+exports.NavMenuList = (0, styled_components_1.default)(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 = (0, styled_components_1.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};
+  }
+`;
+exports.NavMenuLink = (0, styled_components_1.default)(Link_1.default) `
+  display: block;
+  text-decoration: none;
+
+  ${MENU_ITEM_CSS}
+  ${({ active, theme }) => active &&
+    `
+   box-shadow: 0 0 0 2px ${theme.color.border.bold};  
+`}
+`;
+exports.NavMenuTrigger = (0, styled_components_1.default)(RadixNavigationMenu.Trigger) `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  ${MENU_ITEM_CSS}
+`;
+exports.NavMenuContent = (0, styled_components_1.default)(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: ${animations_1.enterFromLeft};
+  }
+  &[data-motion='from-end'] {
+    animation-name: ${animations_1.enterFromRight};
+  }
+  &[data-motion='to-start'] {
+    animation-name: ${animations_1.exitToLeft};
+  }
+
+  &[data-motion='to-end'] {
+    animation-name: ${animations_1.exitToRight};
+  }
+`;
+exports.NavMenuIndicator = (0, styled_components_1.default)(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;
+  }
+`;
+exports.NavMenuIndicatorArrow = styled_components_1.default.div `
+  position: relative;
+  top: 70%;
+  background-color: white;
+  width: 10px;
+  height: 10px;
+  transform: rotate(45deg);
+  border-top-left-radius: 2px;
+`;
+exports.ViewportPosition = styled_components_1.default.div `
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  top: 100%;
+  left: 0;
+  perspective: 2000px;
+`;
+exports.NavMenuViewport = (0, styled_components_1.default)(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: ${animations_1.scaleIn} 200ms ease;
+  }
+
+  &[data-state='closed'] {
+    animation: ${animations_1.scaleOut} 200ms ease;
+  }
+`;
+exports.ContentList = styled_components_1.default.ul `
+  display: grid;
+  padding: 22px;
+  margin: 0;
+  column-gap: 10px;
+  list-style: none;
+  gap: ${({ theme }) => theme.spacing.xxxsmall};
+
+  ${({ $layout }) => {
+    if ($layout === 'callout')
+        return (0, styled_components_1.css) `
+        width: 100%;
+        grid-template-columns: 1fr;
+      `;
+    if ($layout === 'calloutWithList')
+        return (0, styled_components_1.css) `
+        width: 100%;
+        grid-template-columns: 0.75fr 1fr;
+      `;
+    if ($layout === 'oneColumn')
+        return (0, styled_components_1.css) `
+        width: 100%;
+        grid-auto-flow: column;
+        grid-template-rows: repeat(1, 1fr);
+      `;
+    if ($layout === 'twoColumns')
+        return (0, styled_components_1.css) `
+        width: 100%;
+        grid-auto-flow: column;
+        grid-template-rows: repeat(3, 1fr);
+      `;
+    if ($layout === 'threeColumns')
+        return (0, styled_components_1.css) `
+        width: 100%;
+        grid-auto-flow: column;
+        grid-template-rows: repeat(2, 1fr);
+      `;
+}}
+`;
+exports.ListItemLink = (0, styled_components_1.default)(Link_1.default) `
+  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};  
+  `}
+`;
+exports.ListItemHeading = (0, styled_components_1.default)(Text_1.default) `
+  font-weight: 500;
+  line-height: 1.2;
+  margin-bottom: 5px;
+`;
+exports.ListItemText = (0, styled_components_1.default)(Text_1.default) `
+  color: ${({ theme }) => theme.color.text.primary};
+  line-height: 1.4;
+  font-weight: initial;
+`;
+exports.Callout = (0, styled_components_1.default)(Link_1.default) `
+  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};
+  }
+`;
+exports.CalloutHeading = (0, styled_components_1.default)(Text_1.default) `
+  color: ${({ theme }) => theme.color.text.reversed};
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 1.2;
+`;
+exports.CalloutText = (0, styled_components_1.default)(Text_1.default) `
+  color: ${({ theme }) => theme.color.text.reversed};
+  font-size: 14px;
+  line-height: 1.3;
+`;

package/dist/cjs/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/cjs/components/Popover/InfoPopover.js

@@ -0,0 +1,46 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const Popover_1 = __importStar(require("./Popover"));
+const Text_1 = __importDefault(require("../Text/Text"));
+const little_world_design_system_core_1 = require("@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_1.default.createElement(Popover_1.default, { asTooltip: true, defaultOpen: defaultOpen, open: open, side: side, sideOffset: sideOffset, showCloseButton: true, trigger: trigger, width: Popover_1.PopoverSizes.Large, ...rest },
+    react_1.default.createElement(Text_1.default, { type: little_world_design_system_core_1.TextTypes.Body5 }, text)));
+exports.default = InfoPopover;