@entur/layout 3.6.1 → 3.7.0

package/dist/beta/esm/templates/portal/Portal.mjs

@@ -8,51 +8,60 @@ const defaultStatusBarElement = "div";
 const defaultPortalMainElement = "main";
 const PortalRoot = React.forwardRef(
   ({ children, className, style, as, ...rest }, ref) => {
-    return /* @__PURE__ */ jsx(
-      GridComponent,
-      {
-        ref,
-        as,
-        gap: "none",
-        columnGap: "m",
-        className: classNames("eds-layout-template-portal", className),
-        style,
-        ...rest,
-        children
-      }
+    return (
+      // @ts-expect-error generic prop forwarding through polymorphic Grid
+      /* @__PURE__ */ jsx(
+        GridComponent,
+        {
+          ref,
+          as,
+          gap: "none",
+          columnGap: "m",
+          className: classNames("eds-layout-template-portal", className),
+          style,
+          ...rest,
+          children
+        }
+      )
     );
   }
 );
 const PortalStatusBar = React.forwardRef(
   ({ children, className, as, ...rest }, ref) => {
-    return /* @__PURE__ */ jsx(
-      GridComponent.Item,
-      {
-        ref,
-        as: as || defaultStatusBarElement,
-        className: classNames(
-          "eds-layout-template-portal__status-bar",
-          className
-        ),
-        ...rest,
-        children
-      }
+    return (
+      // @ts-expect-error generic prop forwarding through polymorphic Grid.Item
+      /* @__PURE__ */ jsx(
+        GridComponent.Item,
+        {
+          ref,
+          as: as || defaultStatusBarElement,
+          className: classNames(
+            "eds-layout-template-portal__status-bar",
+            className
+          ),
+          ...rest,
+          children
+        }
+      )
     );
   }
 );
 const PortalMain = React.forwardRef(
   ({ children, className, style, as, ...rest }, ref) => {
-    return /* @__PURE__ */ jsx(
-      GridComponent.Item,
-      {
-        ref,
-        as: as || defaultPortalMainElement,
-        colSpan: "2 / -1",
-        className: classNames("eds-layout-template-portal__main", className),
-        style,
-        ...rest,
-        children
-      }
+    return (
+      // @ts-expect-error generic prop forwarding through polymorphic Grid.Item
+      /* @__PURE__ */ jsx(
+        GridComponent.Item,
+        {
+          ref,
+          as: as || defaultPortalMainElement,
+          colSpan: "2 / -1",
+          className: classNames("eds-layout-template-portal__main", className),
+          style,
+          ...rest,
+          children
+        }
+      )
     );
   }
 );

package/dist/beta/esm/templates/portal/Portal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Portal.mjs","sources":["../../../../../src/beta/templates/portal/Portal.tsx"],"sourcesContent":["import React from 'react';\nimport type { PolymorphicComponentProps } from '@entur/utils';\nimport classNames from 'classnames';\nimport { Grid } from '../../Grid';\nimport { Sidebar, SidebarComponent } from '../Sidebar';\nimport './Portal.scss';\n\ntype PortalOwnProps = {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n};\n\ntype PortalStatusBarOwnProps = {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n};\n\ntype PortalMainOwnProps = {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n};\n\nconst defaultStatusBarElement = 'div';\nconst defaultPortalMainElement = 'main';\n\nexport type PortalProps<T extends React.ElementType = typeof Grid> =\n  PolymorphicComponentProps<T, PortalOwnProps>;\n\nexport type PortalStatusBarProps<\n  T extends React.ElementType = typeof defaultStatusBarElement,\n> = PolymorphicComponentProps<T, PortalStatusBarOwnProps>;\n\nexport type PortalMainProps<\n  T extends React.ElementType = typeof defaultPortalMainElement,\n> = PolymorphicComponentProps<T, PortalMainOwnProps>;\n\nconst PortalRoot = React.forwardRef(\n  <E extends React.ElementType = typeof Grid>(\n    { children, className, style, as, ...rest }: PortalProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    return (\n      <Grid\n        ref={ref}\n        as={as}\n        gap=\"none\"\n        columnGap=\"m\"\n        className={classNames('eds-layout-template-portal', className)}\n        style={style}\n        {...rest}\n      >\n        {children}\n      </Grid>\n    );\n  },\n);\n\nconst PortalStatusBar = React.forwardRef(\n  <E extends React.ElementType = typeof defaultStatusBarElement>(\n    { children, className, as, ...rest }: PortalStatusBarProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    return (\n      <Grid.Item\n        ref={ref}\n        as={as || defaultStatusBarElement}\n        className={classNames(\n          'eds-layout-template-portal__status-bar',\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </Grid.Item>\n    );\n  },\n);\n\nconst PortalMain = React.forwardRef(\n  <E extends React.ElementType = typeof defaultPortalMainElement>(\n    { children, className, style, as, ...rest }: PortalMainProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    return (\n      <Grid.Item\n        ref={ref}\n        as={as || defaultPortalMainElement}\n        colSpan=\"2 / -1\"\n        className={classNames('eds-layout-template-portal__main', className)}\n        style={style}\n        {...rest}\n      >\n        {children}\n      </Grid.Item>\n    );\n  },\n);\n\nexport type PortalComponent = typeof PortalRoot & {\n  StatusBar: typeof PortalStatusBar;\n  Sidebar: SidebarComponent;\n  Main: typeof PortalMain;\n};\n\nexport const Portal: PortalComponent = Object.assign(PortalRoot, {\n  StatusBar: PortalStatusBar,\n  Sidebar,\n  Main: PortalMain,\n});\n\nPortal.displayName = 'Template.Portal';\nPortal.StatusBar.displayName = 'Template.Portal.StatusBar';\nPortal.Main.displayName = 'Template.Portal.Main';\n"],"names":["Grid"],"mappings":";;;;;;AAyBA,MAAM,0BAA0B;AAChC,MAAM,2BAA2B;AAajC,MAAM,aAAa,MAAM;AAAA,EACvB,CACE,EAAE,UAAU,WAAW,OAAO,IAAI,GAAG,KAAA,GACrC,QACG;AACH,WACE;AAAA,MAACA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,KAAI;AAAA,QACJ,WAAU;AAAA,QACV,WAAW,WAAW,8BAA8B,SAAS;AAAA,QAC7D;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,MAAM,kBAAkB,MAAM;AAAA,EAC5B,CACE,EAAE,UAAU,WAAW,IAAI,GAAG,KAAA,GAC9B,QACG;AACH,WACE;AAAA,MAACA,cAAK;AAAA,MAAL;AAAA,QACC;AAAA,QACA,IAAI,MAAM;AAAA,QACV,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,MAAM,aAAa,MAAM;AAAA,EACvB,CACE,EAAE,UAAU,WAAW,OAAO,IAAI,GAAG,KAAA,GACrC,QACG;AACH,WACE;AAAA,MAACA,cAAK;AAAA,MAAL;AAAA,QACC;AAAA,QACA,IAAI,MAAM;AAAA,QACV,SAAQ;AAAA,QACR,WAAW,WAAW,oCAAoC,SAAS;AAAA,QACnE;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAQO,MAAM,SAA0B,OAAO,OAAO,YAAY;AAAA,EAC/D,WAAW;AAAA,EACX;AAAA,EACA,MAAM;AACR,CAAC;AAED,OAAO,cAAc;AACrB,OAAO,UAAU,cAAc;AAC/B,OAAO,KAAK,cAAc;"}
+{"version":3,"file":"Portal.mjs","sources":["../../../../../src/beta/templates/portal/Portal.tsx"],"sourcesContent":["import React from 'react';\nimport type { PolymorphicComponentProps } from '@entur/utils';\nimport classNames from 'classnames';\nimport { Grid } from '../../Grid';\nimport { Sidebar, SidebarComponent } from '../Sidebar';\nimport './Portal.scss';\n\ntype PortalOwnProps = {\n  className?: string;\n  style?: React.CSSProperties;\n  /** Content of the portal layout */\n  children?: React.ReactNode;\n};\n\ntype PortalStatusBarOwnProps = {\n  className?: string;\n  style?: React.CSSProperties;\n  /** Content of the status bar */\n  children?: React.ReactNode;\n};\n\ntype PortalMainOwnProps = {\n  className?: string;\n  style?: React.CSSProperties;\n  /** Main content area */\n  children?: React.ReactNode;\n};\n\nconst defaultStatusBarElement = 'div';\nconst defaultPortalMainElement = 'main';\n\nexport type PortalProps<T extends React.ElementType = typeof Grid> =\n  PolymorphicComponentProps<T, PortalOwnProps>;\n\nexport type PortalStatusBarProps<\n  T extends React.ElementType = typeof defaultStatusBarElement,\n> = PolymorphicComponentProps<T, PortalStatusBarOwnProps>;\n\nexport type PortalMainProps<\n  T extends React.ElementType = typeof defaultPortalMainElement,\n> = PolymorphicComponentProps<T, PortalMainOwnProps>;\n\ntype PortalRootComponent = (<E extends React.ElementType = typeof Grid>(\n  props: PortalProps<E> & { ref?: React.Ref<Element> },\n) => React.ReactElement | null) & { displayName?: string };\n\ntype PortalStatusBarComponent = (<\n  E extends React.ElementType = typeof defaultStatusBarElement,\n>(\n  props: PortalStatusBarProps<E> & { ref?: React.Ref<Element> },\n) => React.ReactElement | null) & { displayName?: string };\n\ntype PortalMainComponent = (<\n  E extends React.ElementType = typeof defaultPortalMainElement,\n>(\n  props: PortalMainProps<E> & { ref?: React.Ref<Element> },\n) => React.ReactElement | null) & { displayName?: string };\n\nconst PortalRoot: PortalRootComponent = React.forwardRef(\n  <E extends React.ElementType = typeof Grid>(\n    { children, className, style, as, ...rest }: PortalProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    return (\n      // @ts-expect-error generic prop forwarding through polymorphic Grid\n      <Grid\n        ref={ref}\n        as={as}\n        gap=\"none\"\n        columnGap=\"m\"\n        className={classNames('eds-layout-template-portal', className)}\n        style={style}\n        {...rest}\n      >\n        {children}\n      </Grid>\n    );\n  },\n);\n\nconst PortalStatusBar: PortalStatusBarComponent = React.forwardRef(\n  <E extends React.ElementType = typeof defaultStatusBarElement>(\n    { children, className, as, ...rest }: PortalStatusBarProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    return (\n      // @ts-expect-error generic prop forwarding through polymorphic Grid.Item\n      <Grid.Item\n        ref={ref}\n        as={as || defaultStatusBarElement}\n        className={classNames(\n          'eds-layout-template-portal__status-bar',\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </Grid.Item>\n    );\n  },\n);\n\nconst PortalMain: PortalMainComponent = React.forwardRef(\n  <E extends React.ElementType = typeof defaultPortalMainElement>(\n    { children, className, style, as, ...rest }: PortalMainProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    return (\n      // @ts-expect-error generic prop forwarding through polymorphic Grid.Item\n      <Grid.Item\n        ref={ref}\n        as={as || defaultPortalMainElement}\n        colSpan=\"2 / -1\"\n        className={classNames('eds-layout-template-portal__main', className)}\n        style={style}\n        {...rest}\n      >\n        {children}\n      </Grid.Item>\n    );\n  },\n);\n\nexport type PortalComponent = typeof PortalRoot & {\n  StatusBar: typeof PortalStatusBar;\n  Sidebar: SidebarComponent;\n  Main: typeof PortalMain;\n};\n\nexport const Portal: PortalComponent = Object.assign(PortalRoot, {\n  StatusBar: PortalStatusBar,\n  Sidebar,\n  Main: PortalMain,\n});\n\nPortal.displayName = 'Template.Portal';\nPortal.StatusBar.displayName = 'Template.Portal.StatusBar';\nPortal.Main.displayName = 'Template.Portal.Main';\n"],"names":["Grid"],"mappings":";;;;;;AA4BA,MAAM,0BAA0B;AAChC,MAAM,2BAA2B;AA6BjC,MAAM,aAAkC,MAAM;AAAA,EAC5C,CACE,EAAE,UAAU,WAAW,OAAO,IAAI,GAAG,KAAA,GACrC,QACG;AACH;AAAA;AAAA,MAEE;AAAA,QAACA;AAAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,KAAI;AAAA,UACJ,WAAU;AAAA,UACV,WAAW,WAAW,8BAA8B,SAAS;AAAA,UAC7D;AAAA,UACC,GAAG;AAAA,UAEH;AAAA,QAAA;AAAA,MAAA;AAAA;AAAA,EAGP;AACF;AAEA,MAAM,kBAA4C,MAAM;AAAA,EACtD,CACE,EAAE,UAAU,WAAW,IAAI,GAAG,KAAA,GAC9B,QACG;AACH;AAAA;AAAA,MAEE;AAAA,QAACA,cAAK;AAAA,QAAL;AAAA,UACC;AAAA,UACA,IAAI,MAAM;AAAA,UACV,WAAW;AAAA,YACT;AAAA,YACA;AAAA,UAAA;AAAA,UAED,GAAG;AAAA,UAEH;AAAA,QAAA;AAAA,MAAA;AAAA;AAAA,EAGP;AACF;AAEA,MAAM,aAAkC,MAAM;AAAA,EAC5C,CACE,EAAE,UAAU,WAAW,OAAO,IAAI,GAAG,KAAA,GACrC,QACG;AACH;AAAA;AAAA,MAEE;AAAA,QAACA,cAAK;AAAA,QAAL;AAAA,UACC;AAAA,UACA,IAAI,MAAM;AAAA,UACV,SAAQ;AAAA,UACR,WAAW,WAAW,oCAAoC,SAAS;AAAA,UACnE;AAAA,UACC,GAAG;AAAA,UAEH;AAAA,QAAA;AAAA,MAAA;AAAA;AAAA,EAGP;AACF;AAQO,MAAM,SAA0B,OAAO,OAAO,YAAY;AAAA,EAC/D,WAAW;AAAA,EACX;AAAA,EACA,MAAM;AACR,CAAC;AAED,OAAO,cAAc;AACrB,OAAO,UAAU,cAAc;AAC/B,OAAO,KAAK,cAAc;"}

package/dist/beta/styles/index.css

@@ -106,7 +106,28 @@
   --grid-item-row:initial;
   grid-column:var(--grid-item-column);
   grid-row:var(--grid-item-row);
-}:where(.eds-layout-flex){
+}.eds-layout-flex{
+  --flex-display:initial;
+  --flex-direction:initial;
+  --flex-wrap:initial;
+  --flex-align-items:initial;
+  --flex-justify-content:initial;
+  --flex-align-content:initial;
+  --flex-gap:initial;
+  --flex-row-gap:initial;
+  --flex-column-gap:initial;
+  --flex:initial;
+  --flex-grow:initial;
+  --flex-shrink:initial;
+  --flex-basis:initial;
+  --flex-width:initial;
+  --flex-height:initial;
+  --flex-min-width:initial;
+  --flex-min-height:initial;
+  --flex-max-width:initial;
+  --flex-max-height:initial;
+}
+:where(.eds-layout-flex){
   display:-webkit-box;
   display:-webkit-flex;
   display:-moz-box;

package/dist/beta/types/Flex/Flex.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { PolymorphicComponentProps } from '@entur/utils';
-import { GridSpacingValue, ResponsiveValue } from '../LayoutWrapper/utils';
+import { GridSpacingValue, ResponsiveValue } from '../LayoutProvider/utils';
 export type FlexSpacingValue = GridSpacingValue;
 type FlexDirection = React.CSSProperties['flexDirection'];
 type FlexWrap = React.CSSProperties['flexWrap'];
@@ -60,8 +60,11 @@ export type FlexOwnProps = {
     children?: React.ReactNode;
 };
 export type FlexProps<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, FlexOwnProps>;
+export type FlexComponent = (<E extends React.ElementType = typeof defaultElement>(props: FlexProps<E> & {
+    ref?: React.Ref<Element>;
+}) => React.ReactElement | null) & {
+    displayName?: string;
+};
 declare const defaultElement = "div";
-export declare const Flex: React.ForwardRefExoticComponent<Omit<FlexOwnProps & {
-    as?: React.ElementType<any> | undefined;
-} & Omit<Omit<any, "ref">, keyof FlexOwnProps>, "ref"> & React.RefAttributes<Element>>;
+export declare const Flex: FlexComponent;
 export {};

package/dist/beta/types/Flex/FlexSpacer.d.ts

@@ -11,6 +11,9 @@ export type FlexSpacerOwnProps = {
     children?: never;
 };
 export type FlexSpacerProps<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, FlexSpacerOwnProps>;
+export type FlexSpacerComponent = (<E extends React.ElementType = typeof defaultElement>(props: FlexSpacerProps<E>) => React.ReactElement | null) & {
+    displayName?: string;
+};
 declare const defaultElement = "div";
-export declare const FlexSpacer: <E extends React.ElementType = "div">({ as, className, style, ...rest }: FlexSpacerProps<E>) => JSX.Element;
+export declare const FlexSpacer: FlexSpacerComponent;
 export {};

package/dist/beta/types/Grid/Grid.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { PolymorphicComponentProps } from '@entur/utils';
-import { GridSpacingValue, ResponsiveValue } from '../LayoutWrapper/utils';
+import { GridSpacingValue, ResponsiveValue } from '../LayoutProvider/utils';
 type AlignItems = React.CSSProperties['alignItems'];
 type JustifyContent = React.CSSProperties['justifyContent'];
 type AlignContent = React.CSSProperties['alignContent'];
@@ -41,8 +41,11 @@ export type GridOwnProps = {
     children?: React.ReactNode;
 };
 export type GridProps<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, GridOwnProps>;
+export type GridComponent = (<E extends React.ElementType = typeof defaultElement>(props: GridProps<E> & {
+    ref?: React.Ref<Element>;
+}) => React.ReactElement | null) & {
+    displayName?: string;
+};
 declare const defaultElement = "div";
-export declare const Grid: React.ForwardRefExoticComponent<Omit<GridOwnProps & {
-    as?: React.ElementType<any> | undefined;
-} & Omit<Omit<any, "ref">, keyof GridOwnProps>, "ref"> & React.RefAttributes<Element>>;
+export declare const Grid: GridComponent;
 export {};

package/dist/beta/types/Grid/GridItem.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { PolymorphicComponentProps } from '@entur/utils';
-import { ResponsiveValue } from '../LayoutWrapper/utils';
+import { ResponsiveValue } from '../LayoutProvider/utils';
 export type GridItemOwnProps = {
     /** Number of columns the item should span (supports responsive objects)
      * If number: adds "span" prefix (e.g., 6 → "span 6")
@@ -23,8 +23,11 @@ export type GridItemOwnProps = {
     children?: React.ReactNode;
 };
 export type GridItemProps<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, GridItemOwnProps>;
+export type GridItemComponent = (<E extends React.ElementType = typeof defaultElement>(props: GridItemProps<E> & {
+    ref?: React.Ref<Element>;
+}) => React.ReactElement | null) & {
+    displayName?: string;
+};
 declare const defaultElement = "div";
-export declare const GridItem: React.ForwardRefExoticComponent<Omit<GridItemOwnProps & {
-    as?: React.ElementType<any> | undefined;
-} & Omit<Omit<any, "ref">, keyof GridItemOwnProps>, "ref"> & React.RefAttributes<Element>>;
+export declare const GridItem: GridItemComponent;
 export {};

package/dist/beta/types/Grid/index.d.ts

@@ -22,8 +22,6 @@ type Grid = typeof GridParent & {
  */
 export declare const GridComponent: Grid;
 export type { GridProps, GridOwnProps } from './Grid';
-export type { GridSpacingValue, ResponsiveValue } from '../LayoutWrapper/utils';
+export type { GridSpacingValue, ResponsiveValue, } from '../LayoutProvider/utils';
 export type { GridItemProps, GridItemOwnProps } from './GridItem';
 export { GridComponent as Grid, GridItem };
-export { LayoutWrapper } from '../LayoutWrapper/LayoutWrapper';
-export { useLayoutValues } from '../LayoutWrapper/useLayoutValues';

package/dist/beta/types/LayoutProvider/LayoutProvider.d.ts

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+import { Breakpoints } from './utils';
+export type LayoutValues = {
+    breakpoints: Breakpoints;
+};
+export type LayoutProviderProps = {
+    /**
+     * Custom breakpoint values (in px) to override the defaults.
+     *
+     * Breakpoints are **min-width** based: a breakpoint activates when the
+     * viewport is at least that wide and stays active until the next breakpoint.
+     *
+     * Default values:
+     * - `s`: 0px — always active below `m` (not configurable)
+     * - `m`: 800px — active from 800px up to (but not including) `lg`
+     * - `lg`: 1200px — active from 1200px up to (but not including) `xl`
+     * - `xl`: 1400px — active from 1400px and above
+     *
+     * @example
+     * <LayoutProvider breakpoints={{ m: 600, lg: 1024, xl: 1280 }}>
+     *   ...
+     * </LayoutProvider>
+     */
+    breakpoints?: Partial<Breakpoints>;
+    children: React.ReactNode;
+};
+export declare const LayoutProvider: ({ breakpoints: customBreakpoints, children, }: LayoutProviderProps) => JSX.Element;
+export declare const useLayoutContext: () => LayoutValues | null;

package/dist/beta/types/{LayoutWrapper → LayoutProvider}/index.d.ts

@@ -1,6 +1,6 @@
-export { LayoutWrapper } from './LayoutWrapper';
+export { LayoutProvider } from './LayoutProvider';
 export { useLayoutValues } from './useLayoutValues';
 export { useResponsiveValue } from './useResponsiveValue';
-export type { LayoutValues, LayoutWrapperProps } from './LayoutWrapper';
+export type { LayoutValues, LayoutProviderProps } from './LayoutProvider';
 export type { Breakpoints, GridSpacingValue, ResponsiveValue } from './utils';
 export { DEFAULT_BREAKPOINTS, getSpacingValue } from './utils';

package/dist/beta/types/{LayoutWrapper → LayoutProvider}/useLayoutValues.d.ts

@@ -1,2 +1,2 @@
-import { LayoutValues } from './LayoutWrapper';
+import { LayoutValues } from './LayoutProvider';
 export declare const useLayoutValues: () => LayoutValues;

package/dist/beta/types/{LayoutWrapper → LayoutProvider}/utils.d.ts

@@ -1,14 +1,25 @@
 declare const VALID_SPACING_VALUES: readonly ["2xs", "xs", "s", "s-m", "m", "m-l", "l", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl", "8xl", "9xl", "10xl", "11xl", "none"];
 export type GridSpacingValue = (typeof VALID_SPACING_VALUES)[number];
 export type ResponsiveValue<T> = T | {
-    sm?: T;
-    md?: T;
+    s?: T;
+    m?: T;
     lg?: T;
+    xl?: T;
 };
+/**
+ * Configurable min-width breakpoints (in px).
+ *
+ * `s` is always 0 and is not configurable — it is the base (mobile-first)
+ * fallback that activates below `m`.
+ *
+ * - `m`: activates at this width and above (default: 800px)
+ * - `lg`: activates at this width and above (default: 1200px)
+ * - `xl`: activates at this width and above (default: 1400px)
+ */
 export type Breakpoints = {
-    sm: number;
-    md: number;
+    m: number;
     lg: number;
+    xl: number;
 };
 export declare const DEFAULT_BREAKPOINTS: Breakpoints;
 export declare const getSpacingValue: (spacing: GridSpacingValue | undefined, componentName?: string) => string | undefined;

package/dist/beta/types/index.d.ts

@@ -1,5 +1,6 @@
 export { Grid, GridItem } from './Grid';
-export { LayoutWrapper, useLayoutValues } from './LayoutWrapper';
+export { LayoutProvider, useLayoutValues } from './LayoutProvider';
+export type { LayoutProviderProps } from './LayoutProvider';
 export { Flex, FlexSpacer } from './Flex';
 export { Template } from './templates';
 export type { GridProps, GridOwnProps, GridItemProps, GridItemOwnProps, GridSpacingValue, ResponsiveValue, } from './Grid';

package/dist/beta/types/templates/Sidebar.d.ts

@@ -18,6 +18,7 @@ type SidebarOwnProps = {
     closeSidebarAriaLabel?: string;
     className?: string;
     style?: React.CSSProperties;
+    /** Content of the sidebar */
     children?: React.ReactNode;
 };
 type SidebarSectionOwnProps = {
@@ -27,26 +28,26 @@ type SidebarSectionOwnProps = {
 };
 declare const defaultSidebarElement = "aside";
 declare const defaultSectionElement = "div";
+declare const defaultNavigationElement = "nav";
+declare const defaultFooterElement = "footer";
 export type SidebarProps<T extends React.ElementType = typeof defaultSidebarElement> = PolymorphicComponentProps<T, SidebarOwnProps>;
 export type SidebarSectionProps<T extends React.ElementType = typeof defaultSectionElement> = PolymorphicComponentProps<T, SidebarSectionOwnProps>;
-declare const SidebarLogo: React.ForwardRefExoticComponent<Omit<SidebarSectionOwnProps & {
-    as?: React.ElementType<any> | undefined;
-} & Omit<Omit<any, "ref">, "as" | keyof SidebarSectionOwnProps>, "ref"> & React.RefAttributes<Element>>;
-declare const SidebarUser: React.ForwardRefExoticComponent<Omit<SidebarSectionOwnProps & {
-    as?: React.ElementType<any> | undefined;
-} & Omit<Omit<any, "ref">, "as" | keyof SidebarSectionOwnProps>, "ref"> & React.RefAttributes<Element>>;
-declare const SidebarData: React.ForwardRefExoticComponent<Omit<SidebarSectionOwnProps & {
-    as?: React.ElementType<any> | undefined;
-} & Omit<Omit<any, "ref">, "as" | keyof SidebarSectionOwnProps>, "ref"> & React.RefAttributes<Element>>;
-declare const SidebarNavigation: React.ForwardRefExoticComponent<Omit<SidebarSectionOwnProps & {
-    as?: React.ElementType<any> | undefined;
-} & Omit<Omit<any, "ref">, "as" | keyof SidebarSectionOwnProps>, "ref"> & React.RefAttributes<Element>>;
-declare const SidebarFooter: React.ForwardRefExoticComponent<Omit<SidebarSectionOwnProps & {
-    as?: React.ElementType<any> | undefined;
-} & Omit<Omit<any, "ref">, "as" | keyof SidebarSectionOwnProps>, "ref"> & React.RefAttributes<Element>>;
-declare const SidebarRoot: React.ForwardRefExoticComponent<Omit<SidebarOwnProps & {
-    as?: React.ElementType<any> | undefined;
-} & Omit<Omit<any, "ref">, "as" | keyof SidebarOwnProps>, "ref"> & React.RefAttributes<Element>>;
+type SidebarRootComponent = (<E extends React.ElementType = typeof defaultSidebarElement>(props: SidebarProps<E> & {
+    ref?: React.Ref<Element>;
+}) => React.ReactElement | null) & {
+    displayName?: string;
+};
+type SidebarSectionComponent<Default extends React.ElementType = typeof defaultSectionElement> = (<E extends React.ElementType = Default>(props: SidebarSectionProps<E> & {
+    ref?: React.Ref<Element>;
+}) => React.ReactElement | null) & {
+    displayName?: string;
+};
+declare const SidebarLogo: SidebarSectionComponent;
+declare const SidebarUser: SidebarSectionComponent;
+declare const SidebarData: SidebarSectionComponent;
+declare const SidebarNavigation: SidebarSectionComponent<typeof defaultNavigationElement>;
+declare const SidebarFooter: SidebarSectionComponent<typeof defaultFooterElement>;
+declare const SidebarRoot: SidebarRootComponent;
 export type SidebarComponent = typeof SidebarRoot & {
     Logo: typeof SidebarLogo;
     User: typeof SidebarUser;

package/dist/beta/types/templates/portal/Portal.d.ts

@@ -5,16 +5,19 @@ import { SidebarComponent } from '../Sidebar';
 type PortalOwnProps = {
     className?: string;
     style?: React.CSSProperties;
+    /** Content of the portal layout */
     children?: React.ReactNode;
 };
 type PortalStatusBarOwnProps = {
     className?: string;
     style?: React.CSSProperties;
+    /** Content of the status bar */
     children?: React.ReactNode;
 };
 type PortalMainOwnProps = {
     className?: string;
     style?: React.CSSProperties;
+    /** Main content area */
     children?: React.ReactNode;
 };
 declare const defaultStatusBarElement = "div";
@@ -22,15 +25,24 @@ declare const defaultPortalMainElement = "main";
 export type PortalProps<T extends React.ElementType = typeof Grid> = PolymorphicComponentProps<T, PortalOwnProps>;
 export type PortalStatusBarProps<T extends React.ElementType = typeof defaultStatusBarElement> = PolymorphicComponentProps<T, PortalStatusBarOwnProps>;
 export type PortalMainProps<T extends React.ElementType = typeof defaultPortalMainElement> = PolymorphicComponentProps<T, PortalMainOwnProps>;
-declare const PortalRoot: React.ForwardRefExoticComponent<Omit<PortalOwnProps & {
-    as?: React.ElementType<any> | undefined;
-} & Omit<Omit<any, "ref">, "as" | keyof PortalOwnProps>, "ref"> & React.RefAttributes<Element>>;
-declare const PortalStatusBar: React.ForwardRefExoticComponent<Omit<PortalStatusBarOwnProps & {
-    as?: React.ElementType<any> | undefined;
-} & Omit<Omit<any, "ref">, "as" | keyof PortalStatusBarOwnProps>, "ref"> & React.RefAttributes<Element>>;
-declare const PortalMain: React.ForwardRefExoticComponent<Omit<PortalMainOwnProps & {
-    as?: React.ElementType<any> | undefined;
-} & Omit<Omit<any, "ref">, "as" | keyof PortalMainOwnProps>, "ref"> & React.RefAttributes<Element>>;
+type PortalRootComponent = (<E extends React.ElementType = typeof Grid>(props: PortalProps<E> & {
+    ref?: React.Ref<Element>;
+}) => React.ReactElement | null) & {
+    displayName?: string;
+};
+type PortalStatusBarComponent = (<E extends React.ElementType = typeof defaultStatusBarElement>(props: PortalStatusBarProps<E> & {
+    ref?: React.Ref<Element>;
+}) => React.ReactElement | null) & {
+    displayName?: string;
+};
+type PortalMainComponent = (<E extends React.ElementType = typeof defaultPortalMainElement>(props: PortalMainProps<E> & {
+    ref?: React.Ref<Element>;
+}) => React.ReactElement | null) & {
+    displayName?: string;
+};
+declare const PortalRoot: PortalRootComponent;
+declare const PortalStatusBar: PortalStatusBarComponent;
+declare const PortalMain: PortalMainComponent;
 export type PortalComponent = typeof PortalRoot & {
     StatusBar: typeof PortalStatusBar;
     Sidebar: SidebarComponent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@entur/layout",
-  "version": "3.6.1",
+  "version": "3.7.0",
   "license": "EUPL-1.2",
   "main": "dist/layout.cjs.js",
   "module": "dist/layout.esm.js",
@@ -50,10 +50,10 @@
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
-    "@entur/icons": "^8.4.5",
-    "@entur/tokens": "^3.22.4",
-    "@entur/typography": "^2.1.6",
-    "@entur/utils": "^0.13.3",
+    "@entur/icons": "^8.4.6",
+    "@entur/tokens": "^3.22.5",
+    "@entur/typography": "^2.1.7",
+    "@entur/utils": "^0.13.4",
     "classnames": "^2.5.1"
   },
   "devDependencies": {
@@ -65,8 +65,8 @@
     "jest-environment-jsdom": "^29.0.0",
     "ts-jest": "^29.0.0",
     "typescript": "^5.9.2",
-    "vite": "^7.1.3",
+    "vite": "^7.3.2",
     "vite-plugin-dts": "^4.5.4"
   },
-  "gitHead": "e24bdc134a9540bb1c87adac93322237ae568c70"
+  "gitHead": "0c3904649cb7f504f1d7bd832dfcc64f7fe5c123"
 }

package/dist/beta/cjs/LayoutWrapper/LayoutWrapper.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"LayoutWrapper.cjs","sources":["../../../../src/beta/LayoutWrapper/LayoutWrapper.tsx"],"sourcesContent":["import React, { createContext, useContext, useMemo } from 'react';\nimport { type Breakpoints, DEFAULT_BREAKPOINTS } from './utils';\n\nexport type LayoutValues = {\n  breakpoints: Breakpoints;\n};\n\nconst LayoutContext = createContext<LayoutValues | null>(null);\n\nexport type LayoutWrapperProps = {\n  /** Custom breakpoint values to override defaults */\n  breakpoints?: Partial<Breakpoints>;\n  /** Children components that can use layout values */\n  children: React.ReactNode;\n};\n\nexport const LayoutWrapper = ({\n  breakpoints: customBreakpoints,\n  children,\n}: LayoutWrapperProps): JSX.Element => {\n  const breakpoints = useMemo<Breakpoints>(\n    () => ({\n      ...DEFAULT_BREAKPOINTS,\n      ...customBreakpoints,\n    }),\n    [customBreakpoints],\n  );\n\n  const layoutValues = useMemo<LayoutValues>(\n    () => ({\n      breakpoints,\n    }),\n    [breakpoints],\n  );\n\n  return (\n    <LayoutContext.Provider value={layoutValues}>\n      {children}\n    </LayoutContext.Provider>\n  );\n};\n\nexport const useLayoutContext = (): LayoutValues | null => {\n  return useContext(LayoutContext);\n};\n"],"names":["createContext","useMemo","DEFAULT_BREAKPOINTS","useContext"],"mappings":";;;;;AAOA,MAAM,gBAAgBA,MAAAA,cAAmC,IAAI;AAStD,MAAM,gBAAgB,CAAC;AAAA,EAC5B,aAAa;AAAA,EACb;AACF,MAAuC;AACrC,QAAM,cAAcC,MAAAA;AAAAA,IAClB,OAAO;AAAA,MACL,GAAGC,MAAAA;AAAAA,MACH,GAAG;AAAA,IAAA;AAAA,IAEL,CAAC,iBAAiB;AAAA,EAAA;AAGpB,QAAM,eAAeD,MAAAA;AAAAA,IACnB,OAAO;AAAA,MACL;AAAA,IAAA;AAAA,IAEF,CAAC,WAAW;AAAA,EAAA;AAGd,wCACG,cAAc,UAAd,EAAuB,OAAO,cAC5B,UACH;AAEJ;AAEO,MAAM,mBAAmB,MAA2B;AACzD,SAAOE,MAAAA,WAAW,aAAa;AACjC;;;"}

package/dist/beta/cjs/LayoutWrapper/useLayoutValues.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"useLayoutValues.cjs","sources":["../../../../src/beta/LayoutWrapper/useLayoutValues.ts"],"sourcesContent":["import { DEFAULT_BREAKPOINTS } from './utils';\nimport { type LayoutValues, useLayoutContext } from './LayoutWrapper';\n\nexport const useLayoutValues = (): LayoutValues => {\n  const context = useLayoutContext();\n\n  if (context) {\n    return context;\n  }\n\n  return {\n    breakpoints: DEFAULT_BREAKPOINTS,\n  };\n};\n"],"names":["useLayoutContext","DEFAULT_BREAKPOINTS"],"mappings":";;;;AAGO,MAAM,kBAAkB,MAAoB;AACjD,QAAM,UAAUA,cAAAA,iBAAA;AAEhB,MAAI,SAAS;AACX,WAAO;AAAA,EACT;AAEA,SAAO;AAAA,IACL,aAAaC,MAAAA;AAAAA,EAAA;AAEjB;;"}

package/dist/beta/cjs/LayoutWrapper/useResponsiveValue.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"useResponsiveValue.cjs","sources":["../../../../src/beta/LayoutWrapper/useResponsiveValue.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { useLayoutValues } from './useLayoutValues';\nimport type { ResponsiveValue } from './utils';\n\nconst isResponsiveObject = <T>(\n  value: ResponsiveValue<T>,\n): value is { sm?: T; md?: T; lg?: T } => {\n  return (\n    typeof value === 'object' &&\n    value !== null &&\n    !Array.isArray(value) &&\n    ('sm' in value || 'md' in value || 'lg' in value)\n  );\n};\n\nconst getCurrentBreakpoint = (\n  breakpoints: { sm: number; md: number; lg: number },\n  windowWidth: number,\n): 'sm' | 'md' | 'lg' => {\n  if (windowWidth >= breakpoints.lg) {\n    return 'lg';\n  }\n  if (windowWidth >= breakpoints.md) {\n    return 'md';\n  }\n  return 'sm';\n};\n\nexport const useResponsiveValue = <T>(\n  value: ResponsiveValue<T> | undefined,\n): T | undefined => {\n  const { breakpoints } = useLayoutValues();\n  const [currentBreakpoint, setCurrentBreakpoint] = useState<\n    'sm' | 'md' | 'lg'\n  >(() => {\n    if (typeof window === 'undefined') {\n      return 'sm';\n    }\n    return getCurrentBreakpoint(breakpoints, window.innerWidth);\n  });\n\n  useEffect(() => {\n    if (\n      typeof window === 'undefined' ||\n      typeof window.matchMedia !== 'function'\n    ) {\n      return;\n    }\n\n    const updateBreakpoint = () => {\n      setCurrentBreakpoint(\n        getCurrentBreakpoint(breakpoints, window.innerWidth),\n      );\n    };\n\n    const mediaQueries = [\n      window.matchMedia(`(min-width: ${breakpoints.md}px)`),\n      window.matchMedia(`(min-width: ${breakpoints.lg}px)`),\n    ];\n\n    updateBreakpoint();\n\n    const handleChange = () => {\n      updateBreakpoint();\n    };\n\n    mediaQueries.forEach(mq => {\n      if (mq.addEventListener) {\n        mq.addEventListener('change', handleChange);\n      } else {\n        mq.addListener(handleChange);\n      }\n    });\n\n    return () => {\n      mediaQueries.forEach(mq => {\n        if (mq.removeEventListener) {\n          mq.removeEventListener('change', handleChange);\n        } else {\n          mq.removeListener(handleChange);\n        }\n      });\n    };\n  }, [breakpoints]);\n\n  if (!value) {\n    return undefined;\n  }\n\n  if (!isResponsiveObject(value)) {\n    return value;\n  }\n\n  const responsiveValue = value[currentBreakpoint];\n  if (responsiveValue !== undefined) {\n    return responsiveValue;\n  }\n\n  const fallbackOrder: Array<'lg' | 'md' | 'sm'> =\n    currentBreakpoint === 'lg'\n      ? ['lg', 'md', 'sm']\n      : currentBreakpoint === 'md'\n      ? ['md', 'sm']\n      : ['sm'];\n\n  for (const bp of fallbackOrder) {\n    if (value[bp] !== undefined) {\n      return value[bp];\n    }\n  }\n\n  return undefined;\n};\n"],"names":["useLayoutValues","useState","useEffect"],"mappings":";;;;AAIA,MAAM,qBAAqB,CACzB,UACwC;AACxC,SACE,OAAO,UAAU,YACjB,UAAU,QACV,CAAC,MAAM,QAAQ,KAAK,MACnB,QAAQ,SAAS,QAAQ,SAAS,QAAQ;AAE/C;AAEA,MAAM,uBAAuB,CAC3B,aACA,gBACuB;AACvB,MAAI,eAAe,YAAY,IAAI;AACjC,WAAO;AAAA,EACT;AACA,MAAI,eAAe,YAAY,IAAI;AACjC,WAAO;AAAA,EACT;AACA,SAAO;AACT;AAEO,MAAM,qBAAqB,CAChC,UACkB;AAClB,QAAM,EAAE,YAAA,IAAgBA,gCAAA;AACxB,QAAM,CAAC,mBAAmB,oBAAoB,IAAIC,MAAAA,SAEhD,MAAM;AACN,QAAI,OAAO,WAAW,aAAa;AACjC,aAAO;AAAA,IACT;AACA,WAAO,qBAAqB,aAAa,OAAO,UAAU;AAAA,EAC5D,CAAC;AAEDC,QAAAA,UAAU,MAAM;AACd,QACE,OAAO,WAAW,eAClB,OAAO,OAAO,eAAe,YAC7B;AACA;AAAA,IACF;AAEA,UAAM,mBAAmB,MAAM;AAC7B;AAAA,QACE,qBAAqB,aAAa,OAAO,UAAU;AAAA,MAAA;AAAA,IAEvD;AAEA,UAAM,eAAe;AAAA,MACnB,OAAO,WAAW,eAAe,YAAY,EAAE,KAAK;AAAA,MACpD,OAAO,WAAW,eAAe,YAAY,EAAE,KAAK;AAAA,IAAA;AAGtD,qBAAA;AAEA,UAAM,eAAe,MAAM;AACzB,uBAAA;AAAA,IACF;AAEA,iBAAa,QAAQ,CAAA,OAAM;AACzB,UAAI,GAAG,kBAAkB;AACvB,WAAG,iBAAiB,UAAU,YAAY;AAAA,MAC5C,OAAO;AACL,WAAG,YAAY,YAAY;AAAA,MAC7B;AAAA,IACF,CAAC;AAED,WAAO,MAAM;AACX,mBAAa,QAAQ,CAAA,OAAM;AACzB,YAAI,GAAG,qBAAqB;AAC1B,aAAG,oBAAoB,UAAU,YAAY;AAAA,QAC/C,OAAO;AACL,aAAG,eAAe,YAAY;AAAA,QAChC;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,WAAW,CAAC;AAEhB,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,mBAAmB,KAAK,GAAG;AAC9B,WAAO;AAAA,EACT;AAEA,QAAM,kBAAkB,MAAM,iBAAiB;AAC/C,MAAI,oBAAoB,QAAW;AACjC,WAAO;AAAA,EACT;AAEA,QAAM,gBACJ,sBAAsB,OAClB,CAAC,MAAM,MAAM,IAAI,IACjB,sBAAsB,OACtB,CAAC,MAAM,IAAI,IACX,CAAC,IAAI;AAEX,aAAW,MAAM,eAAe;AAC9B,QAAI,MAAM,EAAE,MAAM,QAAW;AAC3B,aAAO,MAAM,EAAE;AAAA,IACjB;AAAA,EACF;AAEA,SAAO;AACT;;"}

package/dist/beta/cjs/LayoutWrapper/utils.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.cjs","sources":["../../../../src/beta/LayoutWrapper/utils.ts"],"sourcesContent":["const VALID_SPACING_VALUES = [\n  '2xs',\n  'xs',\n  's',\n  's-m',\n  'm',\n  'm-l',\n  'l',\n  'xl',\n  '2xl',\n  '3xl',\n  '4xl',\n  '5xl',\n  '6xl',\n  '7xl',\n  '8xl',\n  '9xl',\n  '10xl',\n  '11xl',\n  'none',\n] as const;\n\nexport type GridSpacingValue = (typeof VALID_SPACING_VALUES)[number];\n\nexport type ResponsiveValue<T> =\n  | T\n  | {\n      sm?: T;\n      md?: T;\n      lg?: T;\n    };\n\nexport type Breakpoints = {\n  sm: number;\n  md: number;\n  lg: number;\n};\n\nexport const DEFAULT_BREAKPOINTS: Breakpoints = {\n  sm: 0,\n  md: 800,\n  lg: 1200,\n};\n\nconst isValidSpacingValue = (value: unknown): value is GridSpacingValue => {\n  return (\n    typeof value === 'string' &&\n    VALID_SPACING_VALUES.includes(value as GridSpacingValue)\n  );\n};\n\nexport const getSpacingValue = (\n  spacing: GridSpacingValue | undefined,\n  componentName = 'Grid',\n): string | undefined => {\n  if (!spacing) return undefined;\n  if (spacing === 'none') return '0';\n\n  if (!isValidSpacingValue(spacing)) {\n    if (process.env.NODE_ENV !== 'production') {\n      console.warn(\n        `Invalid ${componentName} spacing value: \"${spacing}\". Valid values are: ${VALID_SPACING_VALUES.join(\n          ', ',\n        )}. Falling back to undefined.`,\n      );\n    }\n    return undefined;\n  }\n\n  return `var(--${spacing})`;\n};\n"],"names":[],"mappings":";;AAAA,MAAM,uBAAuB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAkBO,MAAM,sBAAmC;AAAA,EAC9C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,sBAAsB,CAAC,UAA8C;AACzE,SACE,OAAO,UAAU,YACjB,qBAAqB,SAAS,KAAyB;AAE3D;AAEO,MAAM,kBAAkB,CAC7B,SACA,gBAAgB,WACO;AACvB,MAAI,CAAC,QAAS,QAAO;AACrB,MAAI,YAAY,OAAQ,QAAO;AAE/B,MAAI,CAAC,oBAAoB,OAAO,GAAG;AACjC,QAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,cAAQ;AAAA,QACN,WAAW,aAAa,oBAAoB,OAAO,wBAAwB,qBAAqB;AAAA,UAC9F;AAAA,QAAA,CACD;AAAA,MAAA;AAAA,IAEL;AACA,WAAO;AAAA,EACT;AAEA,SAAO,SAAS,OAAO;AACzB;;;"}

package/dist/beta/esm/LayoutWrapper/LayoutWrapper.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"LayoutWrapper.mjs","sources":["../../../../src/beta/LayoutWrapper/LayoutWrapper.tsx"],"sourcesContent":["import React, { createContext, useContext, useMemo } from 'react';\nimport { type Breakpoints, DEFAULT_BREAKPOINTS } from './utils';\n\nexport type LayoutValues = {\n  breakpoints: Breakpoints;\n};\n\nconst LayoutContext = createContext<LayoutValues | null>(null);\n\nexport type LayoutWrapperProps = {\n  /** Custom breakpoint values to override defaults */\n  breakpoints?: Partial<Breakpoints>;\n  /** Children components that can use layout values */\n  children: React.ReactNode;\n};\n\nexport const LayoutWrapper = ({\n  breakpoints: customBreakpoints,\n  children,\n}: LayoutWrapperProps): JSX.Element => {\n  const breakpoints = useMemo<Breakpoints>(\n    () => ({\n      ...DEFAULT_BREAKPOINTS,\n      ...customBreakpoints,\n    }),\n    [customBreakpoints],\n  );\n\n  const layoutValues = useMemo<LayoutValues>(\n    () => ({\n      breakpoints,\n    }),\n    [breakpoints],\n  );\n\n  return (\n    <LayoutContext.Provider value={layoutValues}>\n      {children}\n    </LayoutContext.Provider>\n  );\n};\n\nexport const useLayoutContext = (): LayoutValues | null => {\n  return useContext(LayoutContext);\n};\n"],"names":[],"mappings":";;;AAOA,MAAM,gBAAgB,cAAmC,IAAI;AAStD,MAAM,gBAAgB,CAAC;AAAA,EAC5B,aAAa;AAAA,EACb;AACF,MAAuC;AACrC,QAAM,cAAc;AAAA,IAClB,OAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,IAAA;AAAA,IAEL,CAAC,iBAAiB;AAAA,EAAA;AAGpB,QAAM,eAAe;AAAA,IACnB,OAAO;AAAA,MACL;AAAA,IAAA;AAAA,IAEF,CAAC,WAAW;AAAA,EAAA;AAGd,6BACG,cAAc,UAAd,EAAuB,OAAO,cAC5B,UACH;AAEJ;AAEO,MAAM,mBAAmB,MAA2B;AACzD,SAAO,WAAW,aAAa;AACjC;"}

package/dist/beta/esm/LayoutWrapper/useLayoutValues.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"useLayoutValues.mjs","sources":["../../../../src/beta/LayoutWrapper/useLayoutValues.ts"],"sourcesContent":["import { DEFAULT_BREAKPOINTS } from './utils';\nimport { type LayoutValues, useLayoutContext } from './LayoutWrapper';\n\nexport const useLayoutValues = (): LayoutValues => {\n  const context = useLayoutContext();\n\n  if (context) {\n    return context;\n  }\n\n  return {\n    breakpoints: DEFAULT_BREAKPOINTS,\n  };\n};\n"],"names":[],"mappings":";;AAGO,MAAM,kBAAkB,MAAoB;AACjD,QAAM,UAAU,iBAAA;AAEhB,MAAI,SAAS;AACX,WAAO;AAAA,EACT;AAEA,SAAO;AAAA,IACL,aAAa;AAAA,EAAA;AAEjB;"}

package/dist/beta/esm/LayoutWrapper/useResponsiveValue.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"useResponsiveValue.mjs","sources":["../../../../src/beta/LayoutWrapper/useResponsiveValue.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { useLayoutValues } from './useLayoutValues';\nimport type { ResponsiveValue } from './utils';\n\nconst isResponsiveObject = <T>(\n  value: ResponsiveValue<T>,\n): value is { sm?: T; md?: T; lg?: T } => {\n  return (\n    typeof value === 'object' &&\n    value !== null &&\n    !Array.isArray(value) &&\n    ('sm' in value || 'md' in value || 'lg' in value)\n  );\n};\n\nconst getCurrentBreakpoint = (\n  breakpoints: { sm: number; md: number; lg: number },\n  windowWidth: number,\n): 'sm' | 'md' | 'lg' => {\n  if (windowWidth >= breakpoints.lg) {\n    return 'lg';\n  }\n  if (windowWidth >= breakpoints.md) {\n    return 'md';\n  }\n  return 'sm';\n};\n\nexport const useResponsiveValue = <T>(\n  value: ResponsiveValue<T> | undefined,\n): T | undefined => {\n  const { breakpoints } = useLayoutValues();\n  const [currentBreakpoint, setCurrentBreakpoint] = useState<\n    'sm' | 'md' | 'lg'\n  >(() => {\n    if (typeof window === 'undefined') {\n      return 'sm';\n    }\n    return getCurrentBreakpoint(breakpoints, window.innerWidth);\n  });\n\n  useEffect(() => {\n    if (\n      typeof window === 'undefined' ||\n      typeof window.matchMedia !== 'function'\n    ) {\n      return;\n    }\n\n    const updateBreakpoint = () => {\n      setCurrentBreakpoint(\n        getCurrentBreakpoint(breakpoints, window.innerWidth),\n      );\n    };\n\n    const mediaQueries = [\n      window.matchMedia(`(min-width: ${breakpoints.md}px)`),\n      window.matchMedia(`(min-width: ${breakpoints.lg}px)`),\n    ];\n\n    updateBreakpoint();\n\n    const handleChange = () => {\n      updateBreakpoint();\n    };\n\n    mediaQueries.forEach(mq => {\n      if (mq.addEventListener) {\n        mq.addEventListener('change', handleChange);\n      } else {\n        mq.addListener(handleChange);\n      }\n    });\n\n    return () => {\n      mediaQueries.forEach(mq => {\n        if (mq.removeEventListener) {\n          mq.removeEventListener('change', handleChange);\n        } else {\n          mq.removeListener(handleChange);\n        }\n      });\n    };\n  }, [breakpoints]);\n\n  if (!value) {\n    return undefined;\n  }\n\n  if (!isResponsiveObject(value)) {\n    return value;\n  }\n\n  const responsiveValue = value[currentBreakpoint];\n  if (responsiveValue !== undefined) {\n    return responsiveValue;\n  }\n\n  const fallbackOrder: Array<'lg' | 'md' | 'sm'> =\n    currentBreakpoint === 'lg'\n      ? ['lg', 'md', 'sm']\n      : currentBreakpoint === 'md'\n      ? ['md', 'sm']\n      : ['sm'];\n\n  for (const bp of fallbackOrder) {\n    if (value[bp] !== undefined) {\n      return value[bp];\n    }\n  }\n\n  return undefined;\n};\n"],"names":[],"mappings":";;AAIA,MAAM,qBAAqB,CACzB,UACwC;AACxC,SACE,OAAO,UAAU,YACjB,UAAU,QACV,CAAC,MAAM,QAAQ,KAAK,MACnB,QAAQ,SAAS,QAAQ,SAAS,QAAQ;AAE/C;AAEA,MAAM,uBAAuB,CAC3B,aACA,gBACuB;AACvB,MAAI,eAAe,YAAY,IAAI;AACjC,WAAO;AAAA,EACT;AACA,MAAI,eAAe,YAAY,IAAI;AACjC,WAAO;AAAA,EACT;AACA,SAAO;AACT;AAEO,MAAM,qBAAqB,CAChC,UACkB;AAClB,QAAM,EAAE,YAAA,IAAgB,gBAAA;AACxB,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAEhD,MAAM;AACN,QAAI,OAAO,WAAW,aAAa;AACjC,aAAO;AAAA,IACT;AACA,WAAO,qBAAqB,aAAa,OAAO,UAAU;AAAA,EAC5D,CAAC;AAED,YAAU,MAAM;AACd,QACE,OAAO,WAAW,eAClB,OAAO,OAAO,eAAe,YAC7B;AACA;AAAA,IACF;AAEA,UAAM,mBAAmB,MAAM;AAC7B;AAAA,QACE,qBAAqB,aAAa,OAAO,UAAU;AAAA,MAAA;AAAA,IAEvD;AAEA,UAAM,eAAe;AAAA,MACnB,OAAO,WAAW,eAAe,YAAY,EAAE,KAAK;AAAA,MACpD,OAAO,WAAW,eAAe,YAAY,EAAE,KAAK;AAAA,IAAA;AAGtD,qBAAA;AAEA,UAAM,eAAe,MAAM;AACzB,uBAAA;AAAA,IACF;AAEA,iBAAa,QAAQ,CAAA,OAAM;AACzB,UAAI,GAAG,kBAAkB;AACvB,WAAG,iBAAiB,UAAU,YAAY;AAAA,MAC5C,OAAO;AACL,WAAG,YAAY,YAAY;AAAA,MAC7B;AAAA,IACF,CAAC;AAED,WAAO,MAAM;AACX,mBAAa,QAAQ,CAAA,OAAM;AACzB,YAAI,GAAG,qBAAqB;AAC1B,aAAG,oBAAoB,UAAU,YAAY;AAAA,QAC/C,OAAO;AACL,aAAG,eAAe,YAAY;AAAA,QAChC;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,WAAW,CAAC;AAEhB,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,mBAAmB,KAAK,GAAG;AAC9B,WAAO;AAAA,EACT;AAEA,QAAM,kBAAkB,MAAM,iBAAiB;AAC/C,MAAI,oBAAoB,QAAW;AACjC,WAAO;AAAA,EACT;AAEA,QAAM,gBACJ,sBAAsB,OAClB,CAAC,MAAM,MAAM,IAAI,IACjB,sBAAsB,OACtB,CAAC,MAAM,IAAI,IACX,CAAC,IAAI;AAEX,aAAW,MAAM,eAAe;AAC9B,QAAI,MAAM,EAAE,MAAM,QAAW;AAC3B,aAAO,MAAM,EAAE;AAAA,IACjB;AAAA,EACF;AAEA,SAAO;AACT;"}

package/dist/beta/esm/LayoutWrapper/utils.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.mjs","sources":["../../../../src/beta/LayoutWrapper/utils.ts"],"sourcesContent":["const VALID_SPACING_VALUES = [\n  '2xs',\n  'xs',\n  's',\n  's-m',\n  'm',\n  'm-l',\n  'l',\n  'xl',\n  '2xl',\n  '3xl',\n  '4xl',\n  '5xl',\n  '6xl',\n  '7xl',\n  '8xl',\n  '9xl',\n  '10xl',\n  '11xl',\n  'none',\n] as const;\n\nexport type GridSpacingValue = (typeof VALID_SPACING_VALUES)[number];\n\nexport type ResponsiveValue<T> =\n  | T\n  | {\n      sm?: T;\n      md?: T;\n      lg?: T;\n    };\n\nexport type Breakpoints = {\n  sm: number;\n  md: number;\n  lg: number;\n};\n\nexport const DEFAULT_BREAKPOINTS: Breakpoints = {\n  sm: 0,\n  md: 800,\n  lg: 1200,\n};\n\nconst isValidSpacingValue = (value: unknown): value is GridSpacingValue => {\n  return (\n    typeof value === 'string' &&\n    VALID_SPACING_VALUES.includes(value as GridSpacingValue)\n  );\n};\n\nexport const getSpacingValue = (\n  spacing: GridSpacingValue | undefined,\n  componentName = 'Grid',\n): string | undefined => {\n  if (!spacing) return undefined;\n  if (spacing === 'none') return '0';\n\n  if (!isValidSpacingValue(spacing)) {\n    if (process.env.NODE_ENV !== 'production') {\n      console.warn(\n        `Invalid ${componentName} spacing value: \"${spacing}\". Valid values are: ${VALID_SPACING_VALUES.join(\n          ', ',\n        )}. Falling back to undefined.`,\n      );\n    }\n    return undefined;\n  }\n\n  return `var(--${spacing})`;\n};\n"],"names":[],"mappings":"AAAA,MAAM,uBAAuB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAkBO,MAAM,sBAAmC;AAAA,EAC9C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,sBAAsB,CAAC,UAA8C;AACzE,SACE,OAAO,UAAU,YACjB,qBAAqB,SAAS,KAAyB;AAE3D;AAEO,MAAM,kBAAkB,CAC7B,SACA,gBAAgB,WACO;AACvB,MAAI,CAAC,QAAS,QAAO;AACrB,MAAI,YAAY,OAAQ,QAAO;AAE/B,MAAI,CAAC,oBAAoB,OAAO,GAAG;AACjC,QAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,cAAQ;AAAA,QACN,WAAW,aAAa,oBAAoB,OAAO,wBAAwB,qBAAqB;AAAA,UAC9F;AAAA,QAAA,CACD;AAAA,MAAA;AAAA,IAEL;AACA,WAAO;AAAA,EACT;AAEA,SAAO,SAAS,OAAO;AACzB;"}

package/dist/beta/types/LayoutWrapper/LayoutWrapper.d.ts

@@ -1,13 +0,0 @@
-import { default as React } from 'react';
-import { Breakpoints } from './utils';
-export type LayoutValues = {
-    breakpoints: Breakpoints;
-};
-export type LayoutWrapperProps = {
-    /** Custom breakpoint values to override defaults */
-    breakpoints?: Partial<Breakpoints>;
-    /** Children components that can use layout values */
-    children: React.ReactNode;
-};
-export declare const LayoutWrapper: ({ breakpoints: customBreakpoints, children, }: LayoutWrapperProps) => JSX.Element;
-export declare const useLayoutContext: () => LayoutValues | null;