@altinn/altinn-components 0.13.4 → 0.14.0

package/dist/types/lib/components/Layout/Layout.d.ts

@@ -1,18 +1,19 @@
 import { ReactNode } from 'react';
-import { LayoutTheme } from '.';
+import { LayoutColor, LayoutTheme } from '.';
 import { FooterProps } from '../Footer';
 import { HeaderProps } from '../Header';
 import { MenuProps } from '../Menu';
 interface SidebarProps {
-    theme?: LayoutTheme;
+    color?: LayoutColor;
     menu?: MenuProps;
     children?: ReactNode;
     hidden?: boolean;
 }
 interface ContentProps {
-    theme?: LayoutTheme;
+    color?: LayoutColor;
 }
 export interface LayoutProps {
+    color?: LayoutColor;
     theme?: LayoutTheme;
     header?: HeaderProps;
     footer?: FooterProps;
@@ -20,5 +21,5 @@ export interface LayoutProps {
     content?: ContentProps;
     children?: ReactNode;
 }
-export declare const Layout: ({ theme, header, footer, sidebar, content, children }: LayoutProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Layout: ({ color, theme, header, footer, sidebar, content, children, }: LayoutProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/lib/components/Layout/Layout.stories.d.ts

@@ -1,13 +1,13 @@
 import { LayoutProps } from '../';
 declare const meta: {
     title: string;
-    component: ({ theme, header, footer, sidebar, content, children }: LayoutProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ color, theme, header, footer, sidebar, content, children, }: LayoutProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {
         layout: string;
     };
     args: {
-        theme: "person";
+        color: "person";
         header: import('../Header').HeaderProps;
         footer: import('../Footer').FooterProps;
         sidebar: {

package/dist/types/lib/components/Layout/LayoutBase.d.ts

@@ -1,12 +1,14 @@
 import { ReactNode } from 'react';
-export type LayoutTheme = 'inherit' | 'global' | 'global-dark' | 'neutral' | 'company' | 'person';
+export type LayoutColor = 'neutral' | 'company' | 'person';
+export type LayoutTheme = 'default' | 'subtle';
 export interface LayoutBaseProps {
+    color?: LayoutColor;
     theme?: LayoutTheme;
     currentId?: string;
     children?: ReactNode;
 }
 /**
- * Base layout container where you can set the application theme colors.
+ * Base layout container where you can set the application colors.
  *
  * Anatomy of a layout:
  *
@@ -18,4 +20,4 @@ export interface LayoutBaseProps {
  *  - Footer
  *
  */
-export declare const LayoutBase: ({ currentId, theme, children }: LayoutBaseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LayoutBase: ({ currentId, color, theme, children }: LayoutBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Layout/LayoutBase.stories.d.ts

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ currentId, theme, children }: import('./LayoutBase').LayoutBaseProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ currentId, color, theme, children }: import('./LayoutBase').LayoutBaseProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {};

package/dist/types/lib/components/Layout/LayoutContent.d.ts

@@ -4,4 +4,4 @@ import { LayoutBaseProps } from './LayoutBase';
  *
  *
  */
-export declare const LayoutContent: ({ theme, children }: LayoutBaseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LayoutContent: ({ color, children }: LayoutBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Layout/LayoutContent.stories.d.ts

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ theme, children }: import('./LayoutBase').LayoutBaseProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ color, children }: import('./LayoutBase').LayoutBaseProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {};

package/dist/types/lib/components/Layout/LayoutSidebar.d.ts

@@ -1,13 +1,13 @@
 import { ReactNode } from 'react';
-import { LayoutTheme } from './LayoutBase';
+import { LayoutColor } from './LayoutBase';
 /**
  * Sidebar layout container. Should be a child of LayoutBody.
  *
  * Will be hidden on small screens.
  */
 export interface LayoutSidebarProps {
-    theme?: LayoutTheme;
+    color?: LayoutColor;
     hidden?: boolean;
     children?: ReactNode;
 }
-export declare const LayoutSidebar: ({ theme, hidden, children }: LayoutSidebarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LayoutSidebar: ({ color, hidden, children }: LayoutSidebarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Layout/LayoutSidebar.stories.d.ts

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ theme, hidden, children }: import('./LayoutSidebar').LayoutSidebarProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ color, hidden, children }: import('./LayoutSidebar').LayoutSidebarProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {};

package/dist/types/lib/components/LayoutAction/ActionHeader.d.ts

@@ -1,7 +1,10 @@
+import { LayoutActionColor, LayoutActionTheme } from './LayoutAction';
 export interface ActionHeaderProps {
+    color?: LayoutActionColor;
+    theme?: LayoutActionTheme;
     title: string;
     hidden?: boolean;
     dismissable?: boolean;
     onDismiss?: () => void;
 }
-export declare const ActionHeader: ({ hidden, title, dismissable, onDismiss }: ActionHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ActionHeader: ({ color, theme, hidden, title, dismissable, onDismiss, }: ActionHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/LayoutAction/LayoutAction.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { PageMenuProps } from '../';
+export type LayoutActionColor = 'accent';
+export type LayoutActionTheme = 'base';
+export interface LayoutActionProps {
+    color?: LayoutActionColor;
+    theme?: LayoutActionTheme;
+    hidden?: boolean;
+    title: string;
+    menu?: PageMenuProps;
+    dismissable?: boolean;
+    onDismiss?: () => void;
+    children?: ReactNode;
+}
+export declare const LayoutAction: ({ color, theme, hidden, title, menu, dismissable, onDismiss, children, }: LayoutActionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/LayoutAction/LayoutAction.stories.d.ts

@@ -0,0 +1,34 @@
+import { StoryObj } from '@storybook/react';
+import { LayoutActionProps } from '..';
+declare const meta: {
+    title: string;
+    component: ({ color, theme, hidden, title, menu, dismissable, onDismiss, children, }: LayoutActionProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {};
+    args: {
+        title: string;
+        menu: {
+            items: ({
+                id: string;
+                icon: "arrow-redo";
+                title: string;
+            } | {
+                id: string;
+                icon: "eye";
+                title: string;
+            } | {
+                id: string;
+                icon: "archive";
+                title: string;
+            } | {
+                id: string;
+                icon: "trash";
+                title: string;
+            })[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Controlled: (args: LayoutActionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/LayoutAction/index.d.ts

@@ -1,3 +1,3 @@
 export * from './ActionHeader.tsx';
 export * from './ActionFooter.tsx';
-export * from './ActionMenu.tsx';
+export * from './LayoutAction.tsx';

package/dist/types/lib/components/List/List.d.ts

@@ -1,11 +1,8 @@
-import { ListSpacing, ListTheme } from '../List';
-import { ListItemProps } from './ListItem';
-import { ListItemColor, ListItemSize } from './ListItemBase';
-export interface ListProps {
-    spacing?: ListSpacing;
-    theme?: ListTheme;
+import { ListBaseProps, ListItemColor, ListItemProps, ListItemSize, ListItemTheme } from '..';
+export interface ListProps extends ListBaseProps {
     items?: ListItemProps[];
     defaultItemColor?: ListItemColor;
+    defaultItemTheme?: ListItemTheme;
     defaultItemSize?: ListItemSize;
 }
-export declare const List: ({ theme, defaultItemSize, defaultItemColor, spacing, items }: ListProps) => import("react/jsx-runtime").JSX.Element;
+export declare const List: ({ defaultItemSize, defaultItemTheme, defaultItemColor, items, ...rest }: ListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/List/List.stories.d.ts

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ theme, defaultItemSize, defaultItemColor, spacing, items }: import('./List').ListProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ defaultItemSize, defaultItemTheme, defaultItemColor, items, ...rest }: import('./List').ListProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {

package/dist/types/lib/components/List/ListBase.d.ts

@@ -1,13 +1,5 @@
-import { ReactNode } from 'react';
-export type ListTheme = 'inherit' | 'global' | 'neutral' | 'person' | 'company';
-export type ListSpacing = 'none' | 'xs' | 'sm' | 'md' | 'lg';
-export type ListColor = 'transparent' | 'white';
-export type ListShadow = 'xs' | 'sm';
-export interface ListBaseProps {
-    theme?: ListTheme;
-    color?: ListColor;
-    shadow?: ListShadow;
-    spacing?: ListSpacing;
-    children?: ReactNode;
+import { FlexProps } from '..';
+export interface ListBaseProps extends FlexProps {
+    direction?: 'col';
 }
-export declare const ListBase: ({ theme, color, spacing, shadow, children }: ListBaseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ListBase: ({ direction, spacing, children, ...rest }: ListBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/List/ListItem.stories.d.ts

@@ -19,6 +19,6 @@ export declare const MediaTypes: (args: ListItemProps) => import("react/jsx-runt
 export declare const Loading: (args: ListItemProps) => import("react/jsx-runtime").JSX.Element;
 export declare const Controls: (args: ListItemProps) => import("react/jsx-runtime").JSX.Element;
 export declare const Selectable: (args: ListItemProps) => import("react/jsx-runtime").JSX.Element;
-export declare const Colors: (args: ListItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Themes: (args: ListItemProps) => import("react/jsx-runtime").JSX.Element;
 export declare const Sizes: (args: ListItemProps) => import("react/jsx-runtime").JSX.Element;
 export declare const Collapsible: (args: ListItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/List/ListItemBase.d.ts

@@ -1,10 +1,13 @@
 import { ReactNode } from 'react';
+import { Color } from '..';
 export type ListItemSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type ListItemVariant = 'solid' | 'dotted';
-export type ListItemColor = 'neutral' | 'accent' | 'transparent';
 export type ListItemShadow = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type ListItemColor = Color;
+export type ListItemTheme = 'transparent' | 'default' | 'subtle' | 'surface' | 'base';
 export interface ListItemBaseProps {
     color?: ListItemColor;
+    theme?: ListItemTheme;
     variant?: ListItemVariant;
     size?: ListItemSize;
     shadow?: ListItemShadow;
@@ -17,4 +20,4 @@ export interface ListItemBaseProps {
     expanded?: boolean;
     children?: ReactNode;
 }
-export declare const ListItemBase: ({ size, variant, color, shadow, loading, disabled, hidden, active, selected, expanded, children, }: ListItemBaseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ListItemBase: ({ size, variant, color, theme, shadow, loading, disabled, hidden, active, selected, expanded, className, children, }: ListItemBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Menu/Menu.d.ts

@@ -1,6 +1,8 @@
 import { MenuTheme } from './MenuBase';
+import { MenuItemColor } from './MenuItemBase';
 import { MenuItemsProps } from './MenuItems';
 export interface MenuProps extends MenuItemsProps {
+    color?: MenuItemColor;
     theme?: MenuTheme;
 }
-export declare const Menu: ({ theme, defaultItemColor, defaultItemSize, groups, items, search, }: MenuProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Menu: ({ color, theme, defaultItemColor, defaultItemTheme, defaultItemSize, groups, items, search, }: MenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Menu/Menu.stories.d.ts

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ theme, defaultItemColor, defaultItemSize, groups, items, search, }: import('./Menu').MenuProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ color, theme, defaultItemColor, defaultItemTheme, defaultItemSize, groups, items, search, }: import('./Menu').MenuProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {};
@@ -18,7 +18,7 @@ export declare const InboxMenuWithShortcuts: {
         groups: {
             shortcuts: {
                 title: string;
-                defaultItemColor: string;
+                defaultItemTheme: string;
             };
         };
         items: (import('./MenuItem.tsx').MenuItemProps | {

package/dist/types/lib/components/Menu/MenuBase.d.ts

@@ -1,10 +1,12 @@
 import { ElementType, ReactNode } from 'react';
-export type MenuTheme = 'inherit' | 'global' | 'neutral' | 'company' | 'person' | 'global-dark';
+import { MenuItemColor } from './MenuItemBase.tsx';
+export type MenuTheme = 'transparent' | 'default' | 'subtle';
 export type MenuListRole = 'presentation' | 'group';
 export type MenuListItemRole = 'presentation' | 'group' | 'separator';
 export interface MenuBaseProps {
     as?: ElementType;
     theme?: MenuTheme;
+    color?: MenuItemColor;
     className?: string;
     children?: ReactNode;
 }

package/dist/types/lib/components/Menu/MenuItem.d.ts

@@ -1,14 +1,13 @@
 import { ElementType, ReactNode } from 'react';
-import { AvatarGroupProps, AvatarProps } from '../Avatar';
-import { BadgeProps } from '../Badge';
-import { IconName } from '../Icon';
-import { MenuItemColor, MenuItemSize } from './MenuItemBase';
+import { AvatarGroupProps, AvatarProps, BadgeProps, IconName, IconVariant } from '..';
+import { MenuItemColor, MenuItemSize, MenuItemTheme } from './MenuItemBase';
 export interface MenuItemProps {
     id: string;
     type?: string;
     tabIndex?: number;
     as?: ElementType;
     color?: MenuItemColor;
+    theme?: MenuItemTheme;
     size?: MenuItemSize;
     href?: string;
     onClick?: () => void;
@@ -22,6 +21,7 @@ export interface MenuItemProps {
     title?: string;
     description?: string;
     icon?: IconName;
+    iconVariant?: IconVariant;
     avatar?: AvatarProps;
     avatarGroup?: AvatarGroupProps;
     badge?: BadgeProps | undefined;
@@ -32,4 +32,4 @@ export interface MenuItemProps {
     label?: ReactNode;
     items?: MenuItemProps[];
 }
-export declare const MenuItem: ({ as, color, size, collapsible, expanded, icon, avatar, avatarGroup, title, description, badge, alertBadge, linkText, linkIcon, label, ...rest }: MenuItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuItem: ({ as, size, color, theme, collapsible, expanded, icon, iconVariant, avatar, avatarGroup, title, description, badge, alertBadge, linkText, linkIcon, label, ...rest }: MenuItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Menu/MenuItem.stories.d.ts

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ as, color, size, collapsible, expanded, icon, avatar, avatarGroup, title, description, badge, alertBadge, linkText, linkIcon, label, ...rest }: import('./MenuItem').MenuItemProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ as, size, color, theme, collapsible, expanded, icon, iconVariant, avatar, avatarGroup, title, description, badge, alertBadge, linkText, linkIcon, label, ...rest }: import('./MenuItem').MenuItemProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {

package/dist/types/lib/components/Menu/MenuItemBase.d.ts

@@ -1,12 +1,13 @@
 import { ElementType, KeyboardEventHandler, ReactNode } from 'react';
-import { BadgeProps } from '../Badge';
-import { IconName } from '../Icon';
+import { BadgeProps, Color, IconName } from '..';
+export type MenuItemColor = Color;
 export type MenuItemSize = 'xs' | 'sm' | 'md' | 'lg';
-export type MenuItemColor = 'neutral' | 'subtle' | 'surface' | 'strong' | 'company' | 'person';
+export type MenuItemTheme = 'transparent' | 'default' | 'surface' | 'base';
 export interface MenuItemBaseProps {
     as?: ElementType;
-    size?: MenuItemSize;
     color?: MenuItemColor;
+    theme?: MenuItemTheme;
+    size?: MenuItemSize;
     className?: string;
     href?: string;
     onClick?: () => void;
@@ -22,4 +23,4 @@ export interface MenuItemBaseProps {
     linkIcon?: IconName;
     linkText?: string;
 }
-export declare const MenuItemBase: ({ as, size, color, className, href, onClick, onKeyPress, tabIndex, hidden, disabled, active, selected, expanded, linkIcon, linkText, badge, children, }: MenuItemBaseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuItemBase: ({ as, color, theme, size, className, href, onClick, onKeyPress, tabIndex, hidden, disabled, active, selected, expanded, linkIcon, linkText, badge, children, }: MenuItemBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Menu/MenuItemMedia.d.ts

@@ -1,13 +1,14 @@
 import { ReactNode } from 'react';
-import { AvatarGroupProps, AvatarProps, BadgeProps, IconName, MenuItemColor, MenuItemSize } from '..';
+import { AvatarGroupProps, AvatarProps, BadgeProps, IconName, IconVariant, MenuItemSize, MenuItemTheme } from '..';
 interface MenuItemMediaProps {
-    color?: MenuItemColor;
+    theme?: MenuItemTheme;
     size?: MenuItemSize;
     icon?: IconName;
+    iconVariant?: IconVariant;
     avatar?: AvatarProps;
     avatarGroup?: AvatarGroupProps;
     badge?: BadgeProps | undefined;
     children?: ReactNode;
 }
-export declare const MenuItemMedia: ({ size, color, icon, avatar, avatarGroup, badge, children, }: MenuItemMediaProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const MenuItemMedia: ({ theme, size, icon, iconVariant, avatar, avatarGroup, badge, children, }: MenuItemMediaProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/types/lib/components/Menu/MenuItems.d.ts

@@ -1,10 +1,11 @@
-import { MenuItemColor, MenuItemProps, MenuItemSize } from '../';
+import { MenuItemColor, MenuItemProps, MenuItemSize, MenuItemTheme } from '../';
 import { MenuSearchProps } from './MenuSearch';
 export interface MenuGroupProps {
     title?: string;
     divider?: boolean;
     defaultItemColor?: MenuItemColor;
     defaultItemSize?: MenuItemSize;
+    defaultItemTheme?: MenuItemTheme;
 }
 export type MenuItemGroups = Record<string, MenuGroupProps>;
 export interface MenuItemsProps {
@@ -15,5 +16,6 @@ export interface MenuItemsProps {
     groups?: MenuItemGroups;
     defaultItemColor?: MenuItemColor;
     defaultItemSize?: MenuItemSize;
+    defaultItemTheme?: MenuItemTheme;
 }
-export declare const MenuItems: ({ level, expanded, search, items, groups, defaultItemColor, defaultItemSize, }: MenuItemsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuItems: ({ level, expanded, search, items, groups, defaultItemColor, defaultItemTheme, defaultItemSize, }: MenuItemsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Page/Flex.d.ts

@@ -1,14 +1,17 @@
 import { CSSProperties, ReactNode } from 'react';
+import { Color, Range, Shadow, Theme } from '..';
 export type FlexElement = 'div' | 'section' | 'article' | 'header' | 'footer' | 'nav';
 export type FlexDirection = 'col' | 'row';
 export type FlexAlign = 'initial' | 'start' | 'end' | 'center' | 'stretch';
 export type FlexJustify = 'initial' | 'start' | 'end' | 'center' | 'between';
-export type FlexSpacing = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-export type FlexPadding = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-export type FlexMargin = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-export type FlexShadow = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type FlexSpacing = 'xs' | Range<11>;
+export type FlexPadding = 'page' | Range<11>;
+export type FlexMargin = 'page' | 'section';
 export interface FlexProps {
     as?: FlexElement;
+    shadow?: Shadow;
+    color?: Color;
+    theme?: Theme;
     direction?: FlexDirection;
     reverse?: boolean;
     align?: FlexAlign;
@@ -16,10 +19,9 @@ export interface FlexProps {
     spacing?: FlexSpacing;
     padding?: FlexPadding;
     margin?: FlexMargin;
-    shadow?: FlexShadow;
-    inset?: boolean;
+    bleed?: boolean;
     children?: ReactNode;
     className?: string;
     style?: CSSProperties;
 }
-export declare const Flex: ({ as, direction, reverse, align, justify, spacing, padding, margin, inset, className, style, children, ...rest }: FlexProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Flex: ({ as, color, theme, shadow, direction, reverse, align, justify, spacing, padding, margin, bleed, className, style, children, ...rest }: FlexProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Page/Grid.d.ts

@@ -1,15 +1,14 @@
 import { CSSProperties, ReactNode } from 'react';
-export type GridTheme = 'inherit' | 'neutral' | 'company' | 'person';
-export type GridColor = 'transparent' | 'subtle' | 'surface' | 'accent';
+import { Color, Range, Theme } from '..';
 export type GridElement = 'div' | 'section' | 'article' | 'header' | 'footer';
-export type GridCols = '1-2-3';
-export type GridSpacing = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-export type GridPadding = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-export type GridMargin = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type GridCols = 2 | 3 | 4;
+export type GridSpacing = 'xs' | Range<11>;
+export type GridPadding = 'page' | Range<11>;
+export type GridMargin = 'page' | 'section';
 export interface GridProps {
     as?: GridElement;
-    theme?: GridTheme;
-    color?: GridColor;
+    color?: Color;
+    theme?: Theme;
     cols?: GridCols;
     reverse?: boolean;
     spacing?: GridSpacing;

package/dist/types/lib/components/Page/PageBase.d.ts

@@ -1,6 +1,8 @@
-import { ReactNode } from 'react';
-import { SectionProps } from './Section';
-export interface PageBaseProps extends SectionProps {
-    children?: ReactNode;
+import { FlexProps } from './Flex';
+export interface PageBaseProps extends FlexProps {
+    bleed?: boolean;
 }
-export declare const PageBase: ({ children, ...props }: PageBaseProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * PageBase component. Use as wrapper for pages. Should renders a flex column by default.
+ */
+export declare const PageBase: ({ children, as, direction, ...props }: PageBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Page/PageMenu.d.ts

@@ -0,0 +1,8 @@
+import { MenuItemColor, MenuItemProps } from '..';
+export type PageMenuTheme = 'transparent' | 'base';
+export interface PageMenuProps {
+    theme?: PageMenuTheme;
+    color?: MenuItemColor;
+    items?: MenuItemProps[];
+}
+export declare const PageMenu: ({ theme, color, items }: PageMenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/{LayoutAction/ActionMenu.stories.d.ts → Page/PageMenu.stories.d.ts}

@@ -1,11 +1,10 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ theme, items }: import('./ActionMenu').ActionMenuProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ theme, color, items }: import('./PageMenu').PageMenuProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {
-        theme: "global-dark";
         items: ({
             id: string;
             icon: "arrow-redo";
@@ -28,3 +27,4 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const BulkActionbar: Story;

package/dist/types/lib/components/Page/PageNav.d.ts

@@ -1,10 +1,10 @@
 import { ReactNode } from 'react';
-import { BackButtonProps, BreadcrumbsLinkProps, ContextMenuProps, FlexProps } from '../';
-export type PageNavPadding = 'none' | 'sm';
-export type PageNavMargin = 'none' | 'sm';
-export interface PageNavProps extends FlexProps {
+import { BackButtonProps, BreadcrumbsLinkProps, ContextMenuProps } from '../';
+export type PageNavColor = 'neutral' | 'company' | 'person';
+export type PageNavPadding = 0 | 2;
+export interface PageNavProps {
+    color?: PageNavColor;
     padding?: PageNavPadding;
-    margin?: PageNavMargin;
     backButton?: BackButtonProps;
     breadcrumbs?: BreadcrumbsLinkProps[];
     menu?: ContextMenuProps;
@@ -13,4 +13,4 @@ export interface PageNavProps extends FlexProps {
 /**
  * Page navigation bar with Back button and controls.
  */
-export declare const PageNav: ({ padding, margin, breadcrumbs, backButton, menu, children, }: PageNavProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PageNav: ({ color, padding, breadcrumbs, backButton, menu, children, }: PageNavProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Page/PageNav.stories.d.ts

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ padding, margin, breadcrumbs, backButton, menu, children, }: import('./PageNav').PageNavProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ color, padding, breadcrumbs, backButton, menu, children, }: import('./PageNav').PageNavProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {

package/dist/types/lib/components/Page/Section.d.ts

@@ -1,11 +1,8 @@
 import { FlexProps } from '..';
-export type SectionBg = 'transparent' | 'default' | 'subtle' | 'surface' | 'border' | 'base';
-export type SectionShadow = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-export type SectionColor = 'inherit' | 'company' | 'person' | 'neutral' | 'success' | 'warning' | 'danger' | 'info';
+/**
+ * Section component. Use to divide pages into sections. Should renders a flex column by default.
+ */
 export interface SectionProps extends FlexProps {
-    inset?: boolean;
-    color?: SectionColor;
-    bg?: SectionBg;
-    shadow?: SectionShadow;
+    bleed?: boolean;
 }
-export declare const Section: ({ as, className, bg, color, shadow, children, ...rest }: SectionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Section: ({ as, direction, children, ...rest }: FlexProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Page/index.d.ts

@@ -1,5 +1,6 @@
 export * from './PageBase';
 export * from './PageNav';
+export * from './PageMenu';
 export * from './PageHeader';
 export * from './Article';
 export * from './Section';

package/dist/types/lib/components/ResourceList/ResourceList.stories.d.ts

@@ -5,7 +5,6 @@ declare const meta: {
     tags: string[];
     parameters: {};
     args: {
-        spacing: "md";
         items: {
             id: string;
             ownerName: string;

package/dist/types/lib/components/Searchbar/Searchbar.stories.d.ts

@@ -18,7 +18,7 @@ export declare const Query: Story;
 export declare const Expanded: Story;
 export declare const ControlledState: {
     (args: SearchbarProps): import("react/jsx-runtime").JSX.Element;
-    play({ canvasElement }: {
+    play({ canvasElement, }: {
         canvasElement: HTMLElement;
     }): Promise<void>;
 };