@nulogy/components 11.3.1 → 12.1.0

package/dist/src/TopBar/TopBar.styled.d.ts

@@ -1,18 +1,282 @@
 /// <reference types="react" />
 import { StyledProps } from "../StyledProps";
-declare const MenuItemList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
-declare const Header: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {}, never>;
-declare const Navigation: import("styled-components").StyledComponent<"nav", import("styled-components").DefaultTheme, {}, never>;
-declare const StylelessButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, StyledProps, never>;
-declare const MenuButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, StyledProps, never>;
-declare const NavigationItemsList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
-declare const StyledBackLink: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, {}, never>;
-declare const StyledPageTitle: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {}, never>;
-declare const Overlay: import("styled-components").StyledComponent<import("framer-motion").CustomDomComponent<import("@reach/utils/dist/declarations/src/polymorphic").Merge<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+declare const MenuItemList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
+declare const Header: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
+declare const Navigation: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
+declare const StylelessButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, StyledProps>> & string;
+declare const MenuButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof StyledProps> & StyledProps, "ref"> & {
+    ref?: import("react").Ref<HTMLButtonElement>;
+}, never>> & string;
+declare const NavigationItemsList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
+declare const StyledBackLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
+declare const StyledPageTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
+declare const Overlay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: import("react").Ref<HTMLDivElement>;
+}, "as" | keyof import("@reach/dialog/dist/declarations/src").DialogOverlayProps> & import("@reach/dialog/dist/declarations/src").DialogOverlayProps & {
+    as?: "div";
+} & import("framer-motion").MotionProps, "ref"> & import("react").RefAttributes<HTMLElement | SVGElement>, never>> & string & Omit<import("framer-motion").CustomDomComponent<import("@reach/utils/dist/declarations/src/polymorphic").Merge<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").Ref<HTMLDivElement>;
 }, import("@reach/dialog/dist/declarations/src").DialogOverlayProps & {
     as?: "div";
-}>>, import("styled-components").DefaultTheme, {}, never>;
-declare const TileLink: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, {}, never>;
-declare const StyledMenuItem: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLLIElement, import("framer-motion").HTMLMotionProps<"li">>, import("styled-components").DefaultTheme, {}, never>;
+}>>, keyof import("react").Component<any, {}, any>>;
+declare const TileLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
+declare const StyledMenuItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<{
+    defaultChecked?: boolean;
+    defaultValue?: string | number | readonly string[];
+    suppressContentEditableWarning?: boolean;
+    suppressHydrationWarning?: boolean;
+    accessKey?: string;
+    autoFocus?: boolean;
+    className?: string;
+    contentEditable?: "inherit" | (boolean | "false" | "true");
+    contextMenu?: string;
+    dir?: string;
+    draggable?: boolean | "false" | "true";
+    hidden?: boolean;
+    id?: string;
+    lang?: string;
+    nonce?: string;
+    placeholder?: string;
+    slot?: string;
+    spellCheck?: boolean | "false" | "true";
+    tabIndex?: number;
+    title?: string;
+    translate?: "yes" | "no";
+    radioGroup?: string;
+    role?: import("react").AriaRole;
+    about?: string;
+    content?: string;
+    datatype?: string;
+    inlist?: any;
+    prefix?: string;
+    property?: string;
+    rel?: string;
+    resource?: string;
+    rev?: string;
+    typeof?: string;
+    vocab?: string;
+    autoCapitalize?: string;
+    autoCorrect?: string;
+    autoSave?: string;
+    color?: string;
+    itemProp?: string;
+    itemScope?: boolean;
+    itemType?: string;
+    itemID?: string;
+    itemRef?: string;
+    results?: number;
+    security?: string;
+    unselectable?: "on" | "off";
+    inputMode?: "none" | "text" | "search" | "tel" | "url" | "email" | "numeric" | "decimal";
+    is?: string;
+    children?: import("react").ReactNode | Record<string, unknown>;
+    "aria-activedescendant"?: string;
+    "aria-atomic"?: boolean | "false" | "true";
+    "aria-autocomplete"?: "both" | "none" | "inline" | "list";
+    "aria-busy"?: boolean | "false" | "true";
+    "aria-checked"?: boolean | "mixed" | "false" | "true";
+    "aria-colcount"?: number;
+    "aria-colindex"?: number;
+    "aria-colspan"?: number;
+    "aria-controls"?: string;
+    "aria-current"?: boolean | "page" | "false" | "true" | "time" | "step" | "location" | "date";
+    "aria-describedby"?: string;
+    "aria-details"?: string;
+    "aria-disabled"?: boolean | "false" | "true";
+    "aria-dropeffect"?: "none" | "copy" | "move" | "link" | "execute" | "popup";
+    "aria-errormessage"?: string;
+    "aria-expanded"?: boolean | "false" | "true";
+    "aria-flowto"?: string;
+    "aria-grabbed"?: boolean | "false" | "true";
+    "aria-haspopup"?: boolean | "listbox" | "grid" | "menu" | "false" | "true" | "dialog" | "tree";
+    "aria-hidden"?: boolean | "false" | "true";
+    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling";
+    "aria-keyshortcuts"?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-level"?: number;
+    "aria-live"?: "off" | "assertive" | "polite";
+    "aria-modal"?: boolean | "false" | "true";
+    "aria-multiline"?: boolean | "false" | "true";
+    "aria-multiselectable"?: boolean | "false" | "true";
+    "aria-orientation"?: "horizontal" | "vertical";
+    "aria-owns"?: string;
+    "aria-placeholder"?: string;
+    "aria-posinset"?: number;
+    "aria-pressed"?: boolean | "mixed" | "false" | "true";
+    "aria-readonly"?: boolean | "false" | "true";
+    "aria-relevant"?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
+    "aria-required"?: boolean | "false" | "true";
+    "aria-roledescription"?: string;
+    "aria-rowcount"?: number;
+    "aria-rowindex"?: number;
+    "aria-rowspan"?: number;
+    "aria-selected"?: boolean | "false" | "true";
+    "aria-setsize"?: number;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other";
+    "aria-valuemax"?: number;
+    "aria-valuemin"?: number;
+    "aria-valuenow"?: number;
+    "aria-valuetext"?: string;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    };
+    onCopy?: import("react").ClipboardEventHandler<HTMLLIElement>;
+    onCopyCapture?: import("react").ClipboardEventHandler<HTMLLIElement>;
+    onCut?: import("react").ClipboardEventHandler<HTMLLIElement>;
+    onCutCapture?: import("react").ClipboardEventHandler<HTMLLIElement>;
+    onPaste?: import("react").ClipboardEventHandler<HTMLLIElement>;
+    onPasteCapture?: import("react").ClipboardEventHandler<HTMLLIElement>;
+    onCompositionEnd?: import("react").CompositionEventHandler<HTMLLIElement>;
+    onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLLIElement>;
+    onCompositionStart?: import("react").CompositionEventHandler<HTMLLIElement>;
+    onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLLIElement>;
+    onCompositionUpdate?: import("react").CompositionEventHandler<HTMLLIElement>;
+    onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLLIElement>;
+    onFocus?: import("react").FocusEventHandler<HTMLLIElement>;
+    onFocusCapture?: import("react").FocusEventHandler<HTMLLIElement>;
+    onBlur?: import("react").FocusEventHandler<HTMLLIElement>;
+    onBlurCapture?: import("react").FocusEventHandler<HTMLLIElement>;
+    onChange?: import("react").FormEventHandler<HTMLLIElement>;
+    onChangeCapture?: import("react").FormEventHandler<HTMLLIElement>;
+    onBeforeInput?: import("react").FormEventHandler<HTMLLIElement>;
+    onBeforeInputCapture?: import("react").FormEventHandler<HTMLLIElement>;
+    onInput?: import("react").FormEventHandler<HTMLLIElement>;
+    onInputCapture?: import("react").FormEventHandler<HTMLLIElement>;
+    onReset?: import("react").FormEventHandler<HTMLLIElement>;
+    onResetCapture?: import("react").FormEventHandler<HTMLLIElement>;
+    onSubmit?: import("react").FormEventHandler<HTMLLIElement>;
+    onSubmitCapture?: import("react").FormEventHandler<HTMLLIElement>;
+    onInvalid?: import("react").FormEventHandler<HTMLLIElement>;
+    onInvalidCapture?: import("react").FormEventHandler<HTMLLIElement>;
+    onLoad?: import("react").ReactEventHandler<HTMLLIElement>;
+    onLoadCapture?: import("react").ReactEventHandler<HTMLLIElement>;
+    onError?: import("react").ReactEventHandler<HTMLLIElement>;
+    onErrorCapture?: import("react").ReactEventHandler<HTMLLIElement>;
+    onKeyDown?: import("react").KeyboardEventHandler<HTMLLIElement>;
+    onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLLIElement>;
+    onKeyPress?: import("react").KeyboardEventHandler<HTMLLIElement>;
+    onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLLIElement>;
+    onKeyUp?: import("react").KeyboardEventHandler<HTMLLIElement>;
+    onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLLIElement>;
+    onAbort?: import("react").ReactEventHandler<HTMLLIElement>;
+    onAbortCapture?: import("react").ReactEventHandler<HTMLLIElement>;
+    onCanPlay?: import("react").ReactEventHandler<HTMLLIElement>;
+    onCanPlayCapture?: import("react").ReactEventHandler<HTMLLIElement>;
+    onCanPlayThrough?: import("react").ReactEventHandler<HTMLLIElement>;
+    onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLLIElement>;
+    onDurationChange?: import("react").ReactEventHandler<HTMLLIElement>;
+    onDurationChangeCapture?: import("react").ReactEventHandler<HTMLLIElement>;
+    onEmptied?: import("react").ReactEventHandler<HTMLLIElement>;
+    onEmptiedCapture?: import("react").ReactEventHandler<HTMLLIElement>;
+    onEncrypted?: import("react").ReactEventHandler<HTMLLIElement>;
+    onEncryptedCapture?: import("react").ReactEventHandler<HTMLLIElement>;
+    onEnded?: import("react").ReactEventHandler<HTMLLIElement>;
+    onEndedCapture?: import("react").ReactEventHandler<HTMLLIElement>;
+    onLoadedData?: import("react").ReactEventHandler<HTMLLIElement>;
+    onLoadedDataCapture?: import("react").ReactEventHandler<HTMLLIElement>;
+    onLoadedMetadata?: import("react").ReactEventHandler<HTMLLIElement>;
+    onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLLIElement>;
+    onLoadStart?: import("react").ReactEventHandler<HTMLLIElement>;
+    onLoadStartCapture?: import("react").ReactEventHandler<HTMLLIElement>;
+    onPause?: import("react").ReactEventHandler<HTMLLIElement>;
+    onPauseCapture?: import("react").ReactEventHandler<HTMLLIElement>;
+    onPlay?: import("react").ReactEventHandler<HTMLLIElement>;
+    onPlayCapture?: import("react").ReactEventHandler<HTMLLIElement>;
+    onPlaying?: import("react").ReactEventHandler<HTMLLIElement>;
+    onPlayingCapture?: import("react").ReactEventHandler<HTMLLIElement>;
+    onProgress?: import("react").ReactEventHandler<HTMLLIElement>;
+    onProgressCapture?: import("react").ReactEventHandler<HTMLLIElement>;
+    onRateChange?: import("react").ReactEventHandler<HTMLLIElement>;
+    onRateChangeCapture?: import("react").ReactEventHandler<HTMLLIElement>;
+    onSeeked?: import("react").ReactEventHandler<HTMLLIElement>;
+    onSeekedCapture?: import("react").ReactEventHandler<HTMLLIElement>;
+    onSeeking?: import("react").ReactEventHandler<HTMLLIElement>;
+    onSeekingCapture?: import("react").ReactEventHandler<HTMLLIElement>;
+    onStalled?: import("react").ReactEventHandler<HTMLLIElement>;
+    onStalledCapture?: import("react").ReactEventHandler<HTMLLIElement>;
+    onSuspend?: import("react").ReactEventHandler<HTMLLIElement>;
+    onSuspendCapture?: import("react").ReactEventHandler<HTMLLIElement>;
+    onTimeUpdate?: import("react").ReactEventHandler<HTMLLIElement>;
+    onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLLIElement>;
+    onVolumeChange?: import("react").ReactEventHandler<HTMLLIElement>;
+    onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLLIElement>;
+    onWaiting?: import("react").ReactEventHandler<HTMLLIElement>;
+    onWaitingCapture?: import("react").ReactEventHandler<HTMLLIElement>;
+    onAuxClick?: import("react").MouseEventHandler<HTMLLIElement>;
+    onAuxClickCapture?: import("react").MouseEventHandler<HTMLLIElement>;
+    onClick?: import("react").MouseEventHandler<HTMLLIElement>;
+    onClickCapture?: import("react").MouseEventHandler<HTMLLIElement>;
+    onContextMenu?: import("react").MouseEventHandler<HTMLLIElement>;
+    onContextMenuCapture?: import("react").MouseEventHandler<HTMLLIElement>;
+    onDoubleClick?: import("react").MouseEventHandler<HTMLLIElement>;
+    onDoubleClickCapture?: import("react").MouseEventHandler<HTMLLIElement>;
+    onDragCapture?: import("react").DragEventHandler<HTMLLIElement>;
+    onDragEndCapture?: import("react").DragEventHandler<HTMLLIElement>;
+    onDragEnter?: import("react").DragEventHandler<HTMLLIElement>;
+    onDragEnterCapture?: import("react").DragEventHandler<HTMLLIElement>;
+    onDragExit?: import("react").DragEventHandler<HTMLLIElement>;
+    onDragExitCapture?: import("react").DragEventHandler<HTMLLIElement>;
+    onDragLeave?: import("react").DragEventHandler<HTMLLIElement>;
+    onDragLeaveCapture?: import("react").DragEventHandler<HTMLLIElement>;
+    onDragOver?: import("react").DragEventHandler<HTMLLIElement>;
+    onDragOverCapture?: import("react").DragEventHandler<HTMLLIElement>;
+    onDragStartCapture?: import("react").DragEventHandler<HTMLLIElement>;
+    onDrop?: import("react").DragEventHandler<HTMLLIElement>;
+    onDropCapture?: import("react").DragEventHandler<HTMLLIElement>;
+    onMouseDown?: import("react").MouseEventHandler<HTMLLIElement>;
+    onMouseDownCapture?: import("react").MouseEventHandler<HTMLLIElement>;
+    onMouseEnter?: import("react").MouseEventHandler<HTMLLIElement>;
+    onMouseLeave?: import("react").MouseEventHandler<HTMLLIElement>;
+    onMouseMove?: import("react").MouseEventHandler<HTMLLIElement>;
+    onMouseMoveCapture?: import("react").MouseEventHandler<HTMLLIElement>;
+    onMouseOut?: import("react").MouseEventHandler<HTMLLIElement>;
+    onMouseOutCapture?: import("react").MouseEventHandler<HTMLLIElement>;
+    onMouseOver?: import("react").MouseEventHandler<HTMLLIElement>;
+    onMouseOverCapture?: import("react").MouseEventHandler<HTMLLIElement>;
+    onMouseUp?: import("react").MouseEventHandler<HTMLLIElement>;
+    onMouseUpCapture?: import("react").MouseEventHandler<HTMLLIElement>;
+    onSelect?: import("react").ReactEventHandler<HTMLLIElement>;
+    onSelectCapture?: import("react").ReactEventHandler<HTMLLIElement>;
+    onTouchCancel?: import("react").TouchEventHandler<HTMLLIElement>;
+    onTouchCancelCapture?: import("react").TouchEventHandler<HTMLLIElement>;
+    onTouchEnd?: import("react").TouchEventHandler<HTMLLIElement>;
+    onTouchEndCapture?: import("react").TouchEventHandler<HTMLLIElement>;
+    onTouchMove?: import("react").TouchEventHandler<HTMLLIElement>;
+    onTouchMoveCapture?: import("react").TouchEventHandler<HTMLLIElement>;
+    onTouchStart?: import("react").TouchEventHandler<HTMLLIElement>;
+    onTouchStartCapture?: import("react").TouchEventHandler<HTMLLIElement>;
+    onPointerDown?: import("react").PointerEventHandler<HTMLLIElement>;
+    onPointerDownCapture?: import("react").PointerEventHandler<HTMLLIElement>;
+    onPointerMove?: import("react").PointerEventHandler<HTMLLIElement>;
+    onPointerMoveCapture?: import("react").PointerEventHandler<HTMLLIElement>;
+    onPointerUp?: import("react").PointerEventHandler<HTMLLIElement>;
+    onPointerUpCapture?: import("react").PointerEventHandler<HTMLLIElement>;
+    onPointerCancel?: import("react").PointerEventHandler<HTMLLIElement>;
+    onPointerCancelCapture?: import("react").PointerEventHandler<HTMLLIElement>;
+    onPointerEnter?: import("react").PointerEventHandler<HTMLLIElement>;
+    onPointerEnterCapture?: import("react").PointerEventHandler<HTMLLIElement>;
+    onPointerLeave?: import("react").PointerEventHandler<HTMLLIElement>;
+    onPointerLeaveCapture?: import("react").PointerEventHandler<HTMLLIElement>;
+    onPointerOver?: import("react").PointerEventHandler<HTMLLIElement>;
+    onPointerOverCapture?: import("react").PointerEventHandler<HTMLLIElement>;
+    onPointerOut?: import("react").PointerEventHandler<HTMLLIElement>;
+    onPointerOutCapture?: import("react").PointerEventHandler<HTMLLIElement>;
+    onGotPointerCapture?: import("react").PointerEventHandler<HTMLLIElement>;
+    onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLLIElement>;
+    onLostPointerCapture?: import("react").PointerEventHandler<HTMLLIElement>;
+    onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLLIElement>;
+    onScroll?: import("react").UIEventHandler<HTMLLIElement>;
+    onScrollCapture?: import("react").UIEventHandler<HTMLLIElement>;
+    onWheel?: import("react").WheelEventHandler<HTMLLIElement>;
+    onWheelCapture?: import("react").WheelEventHandler<HTMLLIElement>;
+    onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLLIElement>;
+    onAnimationEnd?: import("react").AnimationEventHandler<HTMLLIElement>;
+    onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLLIElement>;
+    onAnimationIteration?: import("react").AnimationEventHandler<HTMLLIElement>;
+    onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLLIElement>;
+    onTransitionEnd?: import("react").TransitionEventHandler<HTMLLIElement>;
+    onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLLIElement>;
+    value?: string | number | readonly string[];
+} & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLLIElement>, never>> & string & Omit<import("framer-motion").ForwardRefComponent<HTMLLIElement, import("framer-motion").HTMLMotionProps<"li">>, keyof import("react").Component<any, {}, any>>;
 export { Navigation, Header, NavigationItemsList, StyledBackLink, StyledPageTitle, Overlay, TileLink, StylelessButton, MenuItemList, MenuButton, StyledMenuItem, };

package/dist/src/TopBar/components/MenuItem.d.ts

@@ -1,11 +1,2 @@
-import { IconName } from "@nulogy/icons";
-import React, { ComponentProps } from "react";
-import { TileLink } from "../TopBar.styled";
-interface MenuItemProps extends ComponentProps<typeof TileLink> {
-    title: string;
-    description?: string;
-    icon: IconName;
-}
-export declare function MenuItem({ description, title, icon, ...props }: MenuItemProps): React.JSX.Element;
-export type MenuItems = MenuItemProps[];
-export {};
+import React from "react";
+export declare function MenuItem({ children }: React.PropsWithChildren<{}>): React.JSX.Element;

package/dist/src/TopBar/components/MenuItemLink.d.ts

@@ -0,0 +1,10 @@
+import { IconName } from "@nulogy/icons";
+import React, { ComponentProps } from "react";
+import { TileLink } from "../TopBar.styled";
+interface MenuItemLinkProps extends ComponentProps<typeof TileLink> {
+    title: string;
+    description?: string;
+    icon: IconName;
+}
+export declare function MenuItemLink({ description, title, icon, ...props }: MenuItemLinkProps): React.JSX.Element;
+export {};

package/dist/src/TopBar/index.d.ts

@@ -0,0 +1 @@
+export { TopBar } from "./TopBar";

package/dist/src/TopBar/stories/fixtures.d.ts

@@ -1,2 +1,44 @@
-import { MenuItems } from "../components/MenuItem";
-export declare const menuItems: MenuItems;
+export declare const menuItems: readonly [{
+    readonly title: "Home";
+    readonly description: "Go to the home page";
+    readonly icon: "home";
+    readonly href: "/home";
+}, {
+    readonly title: "Historical orders";
+    readonly description: "Manage past orders";
+    readonly icon: "queryBuilder";
+    readonly href: "/historical-orders";
+}, {
+    readonly title: "Pallet inspection";
+    readonly icon: "barcode";
+    readonly href: "/historical-orders";
+}, {
+    readonly title: "Pick Schedule";
+    readonly icon: "calendarToday";
+    readonly href: "/pick-schedule";
+}, {
+    readonly title: "Settings";
+    readonly description: "Prefrences and configurations";
+    readonly icon: "wrench";
+    readonly href: "/settings";
+}, {
+    readonly title: "Inventory";
+    readonly description: "Stock level management";
+    readonly icon: "building";
+    readonly href: "/inventory";
+}, {
+    readonly title: "Reports";
+    readonly description: "Data analytics and reporting";
+    readonly icon: "publish";
+    readonly href: "/reports";
+}, {
+    readonly title: "Users";
+    readonly description: "User management";
+    readonly icon: "upArrow";
+    readonly href: "/users";
+}, {
+    readonly title: "Shipping";
+    readonly description: "Manage deliveries";
+    readonly icon: "warningOutline";
+    readonly href: "/shipping";
+}];

package/dist/src/Type/Headings.d.ts

@@ -1,36 +1,46 @@
-export declare const Heading1: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, import("react").HTMLAttributes<HTMLParagraphElement> & {
+/// <reference types="react" />
+import { TextProps } from "./Text";
+export declare const Heading1: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, keyof import("react").HTMLAttributes<HTMLParagraphElement> | "inline" | "disabled" | "textTransform" | keyof import("../StyledProps").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
     variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
     inline?: boolean;
     disabled?: boolean;
     textTransform?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "capitalize" | "full-size-kana" | "full-width" | "lowercase" | "uppercase";
     fontSize?: string;
-} & import("../StyledProps").StyledProps & {
-    as: string;
-}, "as">;
-export declare const Heading2: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, import("react").HTMLAttributes<HTMLParagraphElement> & {
+} & import("../StyledProps").StyledProps, "ref"> & {
+    ref?: import("react").Ref<HTMLParagraphElement>;
+}, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
+    ref?: import("react").Ref<HTMLHeadingElement>;
+}>, never>, TextProps>> & string;
+export declare const Heading2: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, keyof import("react").HTMLAttributes<HTMLParagraphElement> | "inline" | "disabled" | "textTransform" | keyof import("../StyledProps").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
     variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
     inline?: boolean;
     disabled?: boolean;
     textTransform?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "capitalize" | "full-size-kana" | "full-width" | "lowercase" | "uppercase";
     fontSize?: string;
-} & import("../StyledProps").StyledProps & {
-    as: string;
-}, "as">;
-export declare const Heading3: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, import("react").HTMLAttributes<HTMLParagraphElement> & {
+} & import("../StyledProps").StyledProps, "ref"> & {
+    ref?: import("react").Ref<HTMLParagraphElement>;
+}, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
+    ref?: import("react").Ref<HTMLHeadingElement>;
+}>, never>, never>> & string;
+export declare const Heading3: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, keyof import("react").HTMLAttributes<HTMLParagraphElement> | "inline" | "disabled" | "textTransform" | keyof import("../StyledProps").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
     variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
     inline?: boolean;
     disabled?: boolean;
     textTransform?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "capitalize" | "full-size-kana" | "full-width" | "lowercase" | "uppercase";
     fontSize?: string;
-} & import("../StyledProps").StyledProps & {
-    as: string;
-}, "as">;
-export declare const Heading4: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, import("react").HTMLAttributes<HTMLParagraphElement> & {
+} & import("../StyledProps").StyledProps, "ref"> & {
+    ref?: import("react").Ref<HTMLParagraphElement>;
+}, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
+    ref?: import("react").Ref<HTMLHeadingElement>;
+}>, never>, never>> & string;
+export declare const Heading4: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, keyof import("react").HTMLAttributes<HTMLParagraphElement> | "inline" | "disabled" | "textTransform" | keyof import("../StyledProps").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
     variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
     inline?: boolean;
     disabled?: boolean;
     textTransform?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "capitalize" | "full-size-kana" | "full-width" | "lowercase" | "uppercase";
     fontSize?: string;
-} & import("../StyledProps").StyledProps & {
-    as: string;
-}, "as">;
+} & import("../StyledProps").StyledProps, "ref"> & {
+    ref?: import("react").Ref<HTMLParagraphElement>;
+}, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
+    ref?: import("react").Ref<HTMLHeadingElement>;
+}>, never>, never>> & string;

package/dist/src/Type/Text.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
 import { StyledProps } from "../StyledProps";
 export type TextProps = React.HTMLAttributes<HTMLParagraphElement> & {
@@ -7,11 +8,5 @@ export type TextProps = React.HTMLAttributes<HTMLParagraphElement> & {
     textTransform?: "none" | "inherit" | "initial" | "-moz-initial" | "revert" | "unset" | "capitalize" | "full-size-kana" | "full-width" | "lowercase" | "uppercase" | undefined;
     fontSize?: string;
 } & StyledProps;
-declare const Text: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, import("react").HTMLAttributes<HTMLParagraphElement> & {
-    variant?: ComponentVariant;
-    inline?: boolean;
-    disabled?: boolean;
-    textTransform?: "none" | "inherit" | "initial" | "-moz-initial" | "revert" | "unset" | "capitalize" | "full-size-kana" | "full-width" | "lowercase" | "uppercase" | undefined;
-    fontSize?: string;
-} & StyledProps, never>;
+declare const Text: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, TextProps>> & string;
 export default Text;

package/dist/src/index.d.ts

@@ -53,6 +53,7 @@ export { Toast } from "./Toast";
 export { toast, ToastContainer } from "./ToastContainer";
 export { Toggle } from "./Toggle";
 export { Tooltip } from "./Tooltip";
+export { TopBar } from "./TopBar";
 export { TruncatedText } from "./TruncatedText";
 export { Heading1, Heading2, Heading3, Heading4, Text } from "./Type";
 export type { TextProps } from "./Type";

package/dist/src/utils/ClickInputLabel.d.ts

@@ -1,6 +1,7 @@
+/// <reference types="react" />
 import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
-declare const ClickInputLabel: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {
+declare const ClickInputLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {
     variant?: ComponentVariant;
     disabled?: boolean;
-}, never>;
+}>> & string;
 export default ClickInputLabel;

package/dist/src/utils/PopperArrow.d.ts

@@ -1,10 +1,9 @@
-/// <reference types="react" />
 import { PopperArrowProps as ReactPopperArrowProps } from "react-popper";
-declare const PopperArrow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ReactPopperArrowProps & {
+import { PropsWithChildren } from "react";
+type PopperArrowProps = ReactPopperArrowProps & {
     placement?: string;
     borderColor?: string;
     backgroundColor?: string;
-} & {
-    children?: import("react").ReactNode;
-}, never>;
+};
+declare const PopperArrow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, PropsWithChildren<PopperArrowProps>>> & string;
 export default PopperArrow;

package/dist/src/utils/story/dashed.d.ts

@@ -1,9 +1,9 @@
-import { StyledComponent } from "styled-components";
 import { ComponentType } from "react";
-import { DefaultNDSThemeType } from "../../theme";
 /**
  * A styled utility that adds a dashed border around a component
  * to highlight its boundaries. To be used in Storybook exclusively.
  * Do not export for production.
  */
-export declare const dashed: <P extends object>(component: ComponentType<P>) => StyledComponent<ComponentType<P>, DefaultNDSThemeType, {}, never>;
+export declare const dashed: <P extends Record<string, unknown>>(component: ComponentType<P>) => import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<(import("react").PropsWithoutRef<P> & import("react").RefAttributes<import("react").Component<P, any, any>>) | (import("react").PropsWithRef<P & {
+    children?: import("react").ReactNode;
+}> & import("styled-components/dist/types").BaseObject), import("styled-components/dist/types").BaseObject>> & string & (Omit<import("react").ComponentClass<P, any>, keyof import("react").Component<any, {}, any>> | Omit<import("react").FunctionComponent<P>, keyof import("react").Component<any, {}, any>>);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "11.3.1",
+  "version": "12.1.0",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {
@@ -57,7 +57,7 @@
     "@nulogy/icons": "4",
     "react": ">=16.10.2",
     "react-dom": ">=16.10.2",
-    "styled-components": "^5.1.0",
+    "styled-components": "^6.0.0",
     "typescript": "4.9.5"
   },
   "devDependencies": {
@@ -95,7 +95,6 @@
     "@types/react": "^17.0.39",
     "@types/react-datepicker": "^4.1.0",
     "@types/react-dom": "^17.0.20",
-    "@types/styled-components": "^5.1.9",
     "@typescript-eslint/eslint-plugin": "^4.0.0",
     "@typescript-eslint/parser": "^5.30.5",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
@@ -137,7 +136,7 @@
     "semantic-release": "^17.2.1",
     "source-map-loader": "^1.0.1",
     "storybook-addon-performance": "^0.17.1",
-    "styled-components": "^5.3.11",
+    "styled-components": "^6.0.0",
     "svg-sprite-loader": "^6.0.11",
     "ts-jest": "^26.1.1",
     "typescript": "4.9.5",
@@ -146,10 +145,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.9.6",
+    "@emotion/is-prop-valid": "^1.3.1",
     "@nulogy/tokens": "^5.4.0",
     "@reach/dialog": "0.17.0",
     "@styled-system/prop-types": "^5.1.4",
     "@styled-system/theme-get": "^5.1.2",
+    "@types/react-router-dom": "5.3.0",
     "@types/styled-system": "5.1.22",
     "body-scroll-lock": "^3.1.5",
     "core-js": "3",
@@ -170,7 +171,8 @@
     "react-select": "^5.8.0",
     "react-windowed-select": "^5.2.0",
     "smoothscroll-polyfill": "^0.4.4",
-    "styled-system": "^5.1.4"
+    "styled-system": "^5.1.4",
+    "stylis": "^4.0.0"
   },
   "husky": {
     "hooks": {