@trackunit/react-components 0.1.127 → 0.1.129

package/index.cjs

@@ -38995,175 +38995,6 @@ const cvaClickable = cssClassVarianceUtilities.cvaMerge([
     },
 });
 
-/**
- * The MinTopFullContentLayout component.
- *
- * @param {MinTopFullContentLayoutProps} props - The props for the MinTopFullContentLayout component
- * @returns {JSX.Element} MinTopFullContentLayout component
- */
-const MinTopFullContentLayout = ({ children, className, dataTestId }) => (jsxRuntime.jsx(Layout$4, { className: className, "data-testid": dataTestId, children: children }));
-const Layout$4 = tailwindStyledComponents.tw.span `
-  grid
-  h-full
-  grid-rows-min-fr
-`;
-
-/**
- * Responsive layout component setting up three grid areas
- * one for filtering, (result-)list and (result-map)
- *
- * List needs to handle its own min size - and map takes up the rest.
- *
- * @param {FilterListMapLayoutProps} props - The props for the FilterListMapLayout component
- * @returns {JSX.Element} FilterListMapLayout component
- */
-const FilterListMapLayout = ({ children }) => jsxRuntime.jsx(Layout$3, { children: children });
-const Layout$3 = tailwindStyledComponents.tw.span `
-  tu-layout-FilterListMap 
-`;
-
-/**
- * Layout component with repeating full width areas, default one height fraction each but option to use content height instead
- * Row min height can optionally be set here or managed by children
- * Scrolling happens if/when children's a min-height is reached
- *
- * @param {FullWidthRepeatingLayoutProps} props - The props for the FullWidthRepeatingLayout component
- * @returns {JSX.Element} FullWidthRepeatingLayout component
- */
-const FullWidthRepeatingLayout = ({ children, rowSizing = "Unmanaged", rowMinHeight, dataTestId, className, }) => (jsxRuntime.jsx(Layout$2, { "data-testid": dataTestId, className: className, "$rowSizing": rowSizing, "$rowMinHeight": rowMinHeight !== null && rowMinHeight !== void 0 ? rowMinHeight : 0, children: children }));
-const Layout$2 = tailwindStyledComponents.tw.span `
-  tu-layout-FullWidthRepeatingLayout
-
-  ${({ $rowSizing }) => {
-    switch ($rowSizing) {
-        case "MinContent":
-            return tailwindStyledComponents.tws ` tu-layout-FullWidthRepeatingLayout--MinContent`;
-        case "Equal":
-            return tailwindStyledComponents.tws ` tu-layout-FullWidthRepeatingLayout--Equal`;
-        case "Unmanaged":
-        default:
-            return null;
-    }
-}}
-`;
-
-/**
- * Simply applies a Grid Area to the element
- *
- * @param {GridAreaProps} props - The props for the GridArea component
- * @returns {JSX.Element} GridArea component
- */
-const GridArea = ({ area, dataTestId, className, children }) => (jsxRuntime.jsx("section", { className: className, "data-testid": dataTestId, style: { gridArea: area }, children: children }));
-
-/**
- * A grid container that has a flexible number of columns.
- * Adds more columns if constraints allow it, otherwise wraps to next row
- *
- * @param {IntrinsicallyResponsiveGridProps} props - The props for the IntrinsicallyResponsiveGrid component
- * @returns {JSX.Element} IntrinsicallyResponsiveGrid component
- */
-const IntrinsicallyResponsiveGrid = ({ children, occupation = "auto-fill", minColumnWidth = "md", rowHeight = "1fr", gap = "auto", dataTestId, className, }) => {
-    return (jsxRuntime.jsx(Layout$1, { "$minColumnWidth": minColumnWidth, "data-testid": dataTestId, "$gap": gap, "$rowHeight": rowHeight, "$occupation": occupation, className: className, children: children }));
-};
-const Layout$1 = tailwindStyledComponents.tw.span `
-  empty:hidden
-  tu-layout-IntrinsicallyResponsiveGrid
-  ${({ $occupation }) => {
-    switch ($occupation) {
-        case "auto-fit":
-            return tailwindStyledComponents.tws `tu-layout-IntrinsicallyResponsiveGrid--fit`;
-        case "auto-fill":
-        default:
-            return tailwindStyledComponents.tws `tu-layout-IntrinsicallyResponsiveGrid--fill`;
-    }
-}}
-
-  ${({ $minColumnWidth }) => {
-    switch ($minColumnWidth) {
-        case "xs":
-            return tailwindStyledComponents.tws `tu-layout-IntrinsicallyResponsiveGrid--xs`;
-        case "sm":
-            return tailwindStyledComponents.tws `tu-layout-IntrinsicallyResponsiveGrid--sm`;
-        case "lg":
-            return tailwindStyledComponents.tws `tu-layout-IntrinsicallyResponsiveGrid--lg`;
-        case "xl":
-            return tailwindStyledComponents.tws `tu-layout-IntrinsicallyResponsiveGrid--xl`;
-        case "md":
-        default:
-            return tailwindStyledComponents.tws `tu-layout-IntrinsicallyResponsiveGrid--md`;
-    }
-}}
-  
-  ${({ $gap }) => {
-    switch ($gap) {
-        case "tiny":
-            return tailwindStyledComponents.tws `gap-1`;
-        case "mini":
-            return tailwindStyledComponents.tws `gap-2`;
-        case "small":
-            return tailwindStyledComponents.tws `gap-3`;
-        case "medium":
-            return tailwindStyledComponents.tws `gap-4`;
-        case "large":
-            return tailwindStyledComponents.tws `gap-6`;
-        case "giant":
-            return tailwindStyledComponents.tws `gap-8`;
-        case "enormous":
-            return tailwindStyledComponents.tws `gap-10`;
-        case "none":
-            return tailwindStyledComponents.tws `gap-0`;
-        case "inherit":
-            return tailwindStyledComponents.tws `gap-[inherit]`;
-        case "auto":
-        default:
-            return tailwindStyledComponents.tws `gap-responsive-space`;
-    }
-}};
-  
-  ${({ $rowHeight }) => {
-    switch ($rowHeight) {
-        case "auto":
-            return tailwindStyledComponents.tws `tu-layout-IntrinsicallyResponsiveGrid--row-auto`;
-        case "1fr":
-        default:
-            return tailwindStyledComponents.tws `tu-layout-IntrinsicallyResponsiveGrid--row-1fr`;
-    }
-}};
-`;
-
-/**
- * The TitleNavContentLayout.
- * Use the `TitleGridArea`, `NavGridArea` and `ContentGridArea` components to define the layout elements.
- *
- * @param {TitleNavContentLayoutProps} props - The props for the TitleNavContentLayout component
- * @returns {JSX.Element} TitleNavContentLayout component
- */
-const TitleNavContentLayout = ({ children, className }) => (jsxRuntime.jsx(Layout, { className: className, children: children }));
-const Layout = tailwindStyledComponents.tw.div `
-  tu-layout-TitleNavContentLayout
-  lg:tu-layout-TitleNavContentLayout-lg
-`;
-/**
- * A component to define the title area of the TitleNavContentLayout.
- */
-const TitleGridArea = tailwindStyledComponents.tw.header `
-  tu-layout-area-title
-`;
-/**
- * A component to define the navigation area of the TitleNavContentLayout.
- * Adds the needed left padding on large screens.
- */
-const NavGridArea = tailwindStyledComponents.tw.aside `
-  tu-layout-area-nav
-`;
-/**
- * A component to define the content area of the TitleNavContentLayout.
- * Adds the needed right padding on large screens.
- */
-const ContentGridArea = tailwindStyledComponents.tw.article `
-  tu-layout-area-content
-`;
-
 exports.Alert = Alert;
 exports.Badge = Badge;
 exports.Button = Button$1;
@@ -39172,7 +39003,6 @@ exports.CardBody = CardBody;
 exports.CardFooter = CardFooter;
 exports.CardHeader = CardHeader;
 exports.Collapse = Collapse;
-exports.ContentGridArea = ContentGridArea;
 exports.CopyableText = CopyableText;
 exports.DayPicker = DayPicker;
 exports.DayPickerPopover = DayPickerPopover;
@@ -39181,21 +39011,15 @@ exports.DensityContainer = DensityContainer;
 exports.Drawer = Drawer;
 exports.EmptyState = EmptyState;
 exports.ExternalLink = ExternalLink;
-exports.FilterListMapLayout = FilterListMapLayout;
-exports.FullWidthRepeatingLayout = FullWidthRepeatingLayout;
-exports.GridArea = GridArea;
 exports.Heading = Heading;
 exports.Icon = Icon;
 exports.IconButton = IconButton;
 exports.Indicator = Indicator;
-exports.IntrinsicallyResponsiveGrid = IntrinsicallyResponsiveGrid;
 exports.MenuItem = MenuItem;
 exports.MenuList = MenuList;
-exports.MinTopFullContentLayout = MinTopFullContentLayout;
 exports.Modal = Modal;
 exports.ModalBackdrop = ModalBackdrop;
 exports.MoreMenu = MoreMenu;
-exports.NavGridArea = NavGridArea;
 exports.PageHeader = PageHeader;
 exports.Pagination = Pagination;
 exports.Popover = Popover;
@@ -39215,8 +39039,6 @@ exports.Text = Text;
 exports.Timeline = Timeline;
 exports.TimelineElement = TimelineElement;
 exports.Tip = Tip;
-exports.TitleGridArea = TitleGridArea;
-exports.TitleNavContentLayout = TitleNavContentLayout;
 exports.Tooltip = Tooltip;
 exports.ValueBar = ValueBar;
 exports.cvaButton = cvaButton;

package/index.js

@@ -38968,173 +38968,4 @@ const cvaClickable = cvaMerge([
     },
 });
 
-/**
- * The MinTopFullContentLayout component.
- *
- * @param {MinTopFullContentLayoutProps} props - The props for the MinTopFullContentLayout component
- * @returns {JSX.Element} MinTopFullContentLayout component
- */
-const MinTopFullContentLayout = ({ children, className, dataTestId }) => (jsx(Layout$4, { className: className, "data-testid": dataTestId, children: children }));
-const Layout$4 = tw.span `
-  grid
-  h-full
-  grid-rows-min-fr
-`;
-
-/**
- * Responsive layout component setting up three grid areas
- * one for filtering, (result-)list and (result-map)
- *
- * List needs to handle its own min size - and map takes up the rest.
- *
- * @param {FilterListMapLayoutProps} props - The props for the FilterListMapLayout component
- * @returns {JSX.Element} FilterListMapLayout component
- */
-const FilterListMapLayout = ({ children }) => jsx(Layout$3, { children: children });
-const Layout$3 = tw.span `
-  tu-layout-FilterListMap 
-`;
-
-/**
- * Layout component with repeating full width areas, default one height fraction each but option to use content height instead
- * Row min height can optionally be set here or managed by children
- * Scrolling happens if/when children's a min-height is reached
- *
- * @param {FullWidthRepeatingLayoutProps} props - The props for the FullWidthRepeatingLayout component
- * @returns {JSX.Element} FullWidthRepeatingLayout component
- */
-const FullWidthRepeatingLayout = ({ children, rowSizing = "Unmanaged", rowMinHeight, dataTestId, className, }) => (jsx(Layout$2, { "data-testid": dataTestId, className: className, "$rowSizing": rowSizing, "$rowMinHeight": rowMinHeight !== null && rowMinHeight !== void 0 ? rowMinHeight : 0, children: children }));
-const Layout$2 = tw.span `
-  tu-layout-FullWidthRepeatingLayout
-
-  ${({ $rowSizing }) => {
-    switch ($rowSizing) {
-        case "MinContent":
-            return tws ` tu-layout-FullWidthRepeatingLayout--MinContent`;
-        case "Equal":
-            return tws ` tu-layout-FullWidthRepeatingLayout--Equal`;
-        case "Unmanaged":
-        default:
-            return null;
-    }
-}}
-`;
-
-/**
- * Simply applies a Grid Area to the element
- *
- * @param {GridAreaProps} props - The props for the GridArea component
- * @returns {JSX.Element} GridArea component
- */
-const GridArea = ({ area, dataTestId, className, children }) => (jsx("section", { className: className, "data-testid": dataTestId, style: { gridArea: area }, children: children }));
-
-/**
- * A grid container that has a flexible number of columns.
- * Adds more columns if constraints allow it, otherwise wraps to next row
- *
- * @param {IntrinsicallyResponsiveGridProps} props - The props for the IntrinsicallyResponsiveGrid component
- * @returns {JSX.Element} IntrinsicallyResponsiveGrid component
- */
-const IntrinsicallyResponsiveGrid = ({ children, occupation = "auto-fill", minColumnWidth = "md", rowHeight = "1fr", gap = "auto", dataTestId, className, }) => {
-    return (jsx(Layout$1, { "$minColumnWidth": minColumnWidth, "data-testid": dataTestId, "$gap": gap, "$rowHeight": rowHeight, "$occupation": occupation, className: className, children: children }));
-};
-const Layout$1 = tw.span `
-  empty:hidden
-  tu-layout-IntrinsicallyResponsiveGrid
-  ${({ $occupation }) => {
-    switch ($occupation) {
-        case "auto-fit":
-            return tws `tu-layout-IntrinsicallyResponsiveGrid--fit`;
-        case "auto-fill":
-        default:
-            return tws `tu-layout-IntrinsicallyResponsiveGrid--fill`;
-    }
-}}
-
-  ${({ $minColumnWidth }) => {
-    switch ($minColumnWidth) {
-        case "xs":
-            return tws `tu-layout-IntrinsicallyResponsiveGrid--xs`;
-        case "sm":
-            return tws `tu-layout-IntrinsicallyResponsiveGrid--sm`;
-        case "lg":
-            return tws `tu-layout-IntrinsicallyResponsiveGrid--lg`;
-        case "xl":
-            return tws `tu-layout-IntrinsicallyResponsiveGrid--xl`;
-        case "md":
-        default:
-            return tws `tu-layout-IntrinsicallyResponsiveGrid--md`;
-    }
-}}
-  
-  ${({ $gap }) => {
-    switch ($gap) {
-        case "tiny":
-            return tws `gap-1`;
-        case "mini":
-            return tws `gap-2`;
-        case "small":
-            return tws `gap-3`;
-        case "medium":
-            return tws `gap-4`;
-        case "large":
-            return tws `gap-6`;
-        case "giant":
-            return tws `gap-8`;
-        case "enormous":
-            return tws `gap-10`;
-        case "none":
-            return tws `gap-0`;
-        case "inherit":
-            return tws `gap-[inherit]`;
-        case "auto":
-        default:
-            return tws `gap-responsive-space`;
-    }
-}};
-  
-  ${({ $rowHeight }) => {
-    switch ($rowHeight) {
-        case "auto":
-            return tws `tu-layout-IntrinsicallyResponsiveGrid--row-auto`;
-        case "1fr":
-        default:
-            return tws `tu-layout-IntrinsicallyResponsiveGrid--row-1fr`;
-    }
-}};
-`;
-
-/**
- * The TitleNavContentLayout.
- * Use the `TitleGridArea`, `NavGridArea` and `ContentGridArea` components to define the layout elements.
- *
- * @param {TitleNavContentLayoutProps} props - The props for the TitleNavContentLayout component
- * @returns {JSX.Element} TitleNavContentLayout component
- */
-const TitleNavContentLayout = ({ children, className }) => (jsx(Layout, { className: className, children: children }));
-const Layout = tw.div `
-  tu-layout-TitleNavContentLayout
-  lg:tu-layout-TitleNavContentLayout-lg
-`;
-/**
- * A component to define the title area of the TitleNavContentLayout.
- */
-const TitleGridArea = tw.header `
-  tu-layout-area-title
-`;
-/**
- * A component to define the navigation area of the TitleNavContentLayout.
- * Adds the needed left padding on large screens.
- */
-const NavGridArea = tw.aside `
-  tu-layout-area-nav
-`;
-/**
- * A component to define the content area of the TitleNavContentLayout.
- * Adds the needed right padding on large screens.
- */
-const ContentGridArea = tw.article `
-  tu-layout-area-content
-`;
-
-export { Alert, Badge, Button$1 as Button, Card, CardBody, CardFooter, CardHeader, Collapse, ContentGridArea, CopyableText, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, Drawer, EmptyState, ExternalLink, FilterListMapLayout, FullWidthRepeatingLayout, GridArea, Heading, Icon, IconButton, Indicator, IntrinsicallyResponsiveGrid, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MoreMenu, NavGridArea, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text, Timeline, TimelineElement, Tip, TitleGridArea, TitleNavContentLayout, Tooltip, ValueBar, cvaButton, cvaButtonSpinner, cvaClickable, cvaIconButtonContainer, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, useClickOutside, useContainerProps, useDebounce, useDevicePixelRatio, useHover, useIsFirstRender, useLocalStorage, useLocalStorageReducer, useModal, usePopoverContext, usePrompt, useResize, useTimeout };
+export { Alert, Badge, Button$1 as Button, Card, CardBody, CardFooter, CardHeader, Collapse, CopyableText, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, Drawer, EmptyState, ExternalLink, Heading, Icon, IconButton, Indicator, MenuItem, MenuList, Modal, ModalBackdrop, MoreMenu, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text, Timeline, TimelineElement, Tip, Tooltip, ValueBar, cvaButton, cvaButtonSpinner, cvaClickable, cvaIconButtonContainer, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, useClickOutside, useContainerProps, useDebounce, useDevicePixelRatio, useHover, useIsFirstRender, useLocalStorage, useLocalStorageReducer, useModal, usePopoverContext, usePrompt, useResize, useTimeout };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.127",
+  "version": "0.1.129",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.22.2",
-    "@trackunit/css-class-variance-utilities": "0.0.7",
+    "@trackunit/css-class-variance-utilities": "0.0.8",
     "@trackunit/css-core": "0.0.89",
     "@trackunit/tailwind-styled-components": "0.0.58",
     "@trackunit/ui-design-tokens": "0.0.73",

package/src/index.d.ts

@@ -5,4 +5,3 @@ export * from "./components/Clickable/Clickable.variants";
 export * from "./components/Indicator/Indicator.variants";
 export * from "./components/Menu/MenuItem/MenuItem.variants";
 export * from "./hooks";
-export * from "./layout";

package/src/layout/helper/MinTopFullContentLayout.d.ts

@@ -1,18 +0,0 @@
-import { ReactNode } from "react";
-import { CommonProps } from "../../common/CommonProps";
-/**
- * Pass two children. The first will be min-content and the second full height
- * Useful when toy want the second child to have 100% height and be scrollable
- * Example: FilterBar + Fleet List
- */
-interface MinTopFullContentLayoutProps extends CommonProps {
-    children: ReactNode;
-}
-/**
- * The MinTopFullContentLayout component.
- *
- * @param {MinTopFullContentLayoutProps} props - The props for the MinTopFullContentLayout component
- * @returns {JSX.Element} MinTopFullContentLayout component
- */
-export declare const MinTopFullContentLayout: ({ children, className, dataTestId }: MinTopFullContentLayoutProps) => JSX.Element;
-export {};

package/src/layout/index.d.ts

@@ -1,6 +0,0 @@
-export * from "./helper/MinTopFullContentLayout";
-export * from "./responsive/FilterListMapLayout";
-export * from "./responsive/FullWidthRepeatingLayout";
-export * from "./responsive/GridArea";
-export * from "./responsive/IntrinsicallyResponsiveGrid";
-export * from "./responsive/TitleNavContentLayout";

package/src/layout/responsive/FilterListMapLayout.d.ts

@@ -1,15 +0,0 @@
-/// <reference types="react" />
-interface FilterListMapLayoutProps {
-    children: React.ReactNode;
-}
-/**
- * Responsive layout component setting up three grid areas
- * one for filtering, (result-)list and (result-map)
- *
- * List needs to handle its own min size - and map takes up the rest.
- *
- * @param {FilterListMapLayoutProps} props - The props for the FilterListMapLayout component
- * @returns {JSX.Element} FilterListMapLayout component
- */
-export declare const FilterListMapLayout: ({ children }: FilterListMapLayoutProps) => JSX.Element;
-export {};

package/src/layout/responsive/FullWidthRepeatingLayout.d.ts

@@ -1,19 +0,0 @@
-/// <reference types="react" />
-type RowSizing = "Equal" | "MinContent" | "Unmanaged";
-interface FullWidthRepeatingLayoutProps {
-    children: React.ReactNode;
-    rowSizing?: RowSizing;
-    rowMinHeight?: number;
-    dataTestId?: string;
-    className?: string;
-}
-/**
- * Layout component with repeating full width areas, default one height fraction each but option to use content height instead
- * Row min height can optionally be set here or managed by children
- * Scrolling happens if/when children's a min-height is reached
- *
- * @param {FullWidthRepeatingLayoutProps} props - The props for the FullWidthRepeatingLayout component
- * @returns {JSX.Element} FullWidthRepeatingLayout component
- */
-export declare const FullWidthRepeatingLayout: ({ children, rowSizing, rowMinHeight, dataTestId, className, }: FullWidthRepeatingLayoutProps) => JSX.Element;
-export {};

package/src/layout/responsive/GridArea.d.ts

@@ -1,13 +0,0 @@
-import React from "react";
-import { CommonProps } from "../../common/CommonProps";
-export interface GridAreaProps extends CommonProps {
-    area: string;
-    children: React.ReactNode;
-}
-/**
- * Simply applies a Grid Area to the element
- *
- * @param {GridAreaProps} props - The props for the GridArea component
- * @returns {JSX.Element} GridArea component
- */
-export declare const GridArea: ({ area, dataTestId, className, children }: GridAreaProps) => JSX.Element;

package/src/layout/responsive/IntrinsicallyResponsiveGrid.d.ts

@@ -1,32 +0,0 @@
-/// <reference types="react" />
-import { CommonProps } from "../../common/CommonProps";
-export type ColumnWidth = "xs" | "sm" | "md" | "lg" | "xl";
-export type RowHeight = "auto" | "1fr";
-export type Space = "inherit" | "auto" | "none" | "tiny" | "mini" | "small" | "medium" | "large" | "giant" | "enormous";
-export type Occupation = "auto-fill" | "auto-fit";
-interface IntrinsicallyResponsiveGridProps extends CommonProps {
-    /**
-     * The children to be laid out
-     */
-    children: React.ReactNode;
-    /**
-     * Default "auto-fill" stretch a little, till there's room for another column.
-     * Optionally set "auto-fit" to stretch children to fit entire container width,
-     */
-    occupation?: Occupation;
-    minColumnWidth?: ColumnWidth;
-    rowHeight?: RowHeight;
-    /**
-     * The gap size between children
-     */
-    gap?: Space;
-}
-/**
- * A grid container that has a flexible number of columns.
- * Adds more columns if constraints allow it, otherwise wraps to next row
- *
- * @param {IntrinsicallyResponsiveGridProps} props - The props for the IntrinsicallyResponsiveGrid component
- * @returns {JSX.Element} IntrinsicallyResponsiveGrid component
- */
-export declare const IntrinsicallyResponsiveGrid: ({ children, occupation, minColumnWidth, rowHeight, gap, dataTestId, className, }: IntrinsicallyResponsiveGridProps) => JSX.Element;
-export {};

package/src/layout/responsive/TitleNavContentLayout.d.ts

@@ -1,28 +0,0 @@
-/// <reference types="react" />
-import { CommonProps } from "../../common";
-interface TitleNavContentLayoutProps extends CommonProps {
-    children: React.ReactNode;
-}
-/**
- * The TitleNavContentLayout.
- * Use the `TitleGridArea`, `NavGridArea` and `ContentGridArea` components to define the layout elements.
- *
- * @param {TitleNavContentLayoutProps} props - The props for the TitleNavContentLayout component
- * @returns {JSX.Element} TitleNavContentLayout component
- */
-export declare const TitleNavContentLayout: ({ children, className }: TitleNavContentLayoutProps) => JSX.Element;
-/**
- * A component to define the title area of the TitleNavContentLayout.
- */
-export declare const TitleGridArea: import("dist/libs/ui/tailwind-styled-components/src/lib/types").TailwindComponent<import("dist/libs/ui/tailwind-styled-components/src/lib/types").TailwindHtmlComponent<"header">, {}>;
-/**
- * A component to define the navigation area of the TitleNavContentLayout.
- * Adds the needed left padding on large screens.
- */
-export declare const NavGridArea: import("dist/libs/ui/tailwind-styled-components/src/lib/types").TailwindComponent<import("dist/libs/ui/tailwind-styled-components/src/lib/types").TailwindHtmlComponent<"aside">, {}>;
-/**
- * A component to define the content area of the TitleNavContentLayout.
- * Adds the needed right padding on large screens.
- */
-export declare const ContentGridArea: import("dist/libs/ui/tailwind-styled-components/src/lib/types").TailwindComponent<import("dist/libs/ui/tailwind-styled-components/src/lib/types").TailwindHtmlComponent<"article">, {}>;
-export {};