@entur/layout 3.4.0 → 3.4.1-next.0

package/dist/beta/esm/Grid/Grid.mjs

@@ -1,79 +1,83 @@
 import { jsx } from "react/jsx-runtime";
+import React from "react";
 import { getSpacingValue } from "../LayoutWrapper/utils.mjs";
 import { useResponsiveValue } from "../LayoutWrapper/useResponsiveValue.mjs";
 import classNames from "classnames";
 /* empty css           */
 const defaultElement = "div";
-const Grid = ({
-  templateColumns,
-  templateRows,
-  gap = "m",
-  rowGap,
-  columnGap,
-  autoFlow = "row",
-  align,
-  justify,
-  alignContent,
-  height,
-  as,
-  className,
-  children,
-  style,
-  ...rest
-}) => {
-  const Element = as || defaultElement;
-  const resolvedTemplateColumns = useResponsiveValue(templateColumns) ?? "repeat(12, 1fr)";
-  const resolvedTemplateRows = useResponsiveValue(templateRows);
-  const resolvedGap = useResponsiveValue(gap);
-  const resolvedRowGap = useResponsiveValue(rowGap);
-  const resolvedColumnGap = useResponsiveValue(columnGap);
-  const resolvedAutoFlow = useResponsiveValue(autoFlow) ?? "row";
-  const resolvedAlign = useResponsiveValue(align);
-  const resolvedJustify = useResponsiveValue(justify);
-  const resolvedAlignContent = useResponsiveValue(alignContent);
-  const gridStyle = {
-    ...resolvedTemplateColumns && {
-      "--grid-template-columns": resolvedTemplateColumns
-    },
-    ...resolvedTemplateRows && {
-      "--grid-template-rows": resolvedTemplateRows
-    },
-    ...resolvedAutoFlow && {
-      "--grid-auto-flow": resolvedAutoFlow
-    },
-    ...resolvedAlign && {
-      "--grid-align-items": resolvedAlign
-    },
-    ...resolvedJustify && {
-      "--grid-justify-content": resolvedJustify
-    },
-    ...resolvedAlignContent && {
-      "--grid-align-content": resolvedAlignContent
-    },
-    ...resolvedGap && {
-      "--grid-gap": getSpacingValue(resolvedGap)
-    },
-    ...resolvedRowGap && {
-      "--grid-row-gap": getSpacingValue(resolvedRowGap)
-    },
-    ...resolvedColumnGap && {
-      "--grid-column-gap": getSpacingValue(resolvedColumnGap)
-    },
-    ...height && {
-      "--grid-height": height
-    },
-    ...style
-  };
-  return /* @__PURE__ */ jsx(
-    Element,
-    {
-      className: classNames("eds-layout-grid", className),
-      style: gridStyle,
-      ...rest,
-      children
-    }
-  );
-};
+const Grid = React.forwardRef(
+  ({
+    templateColumns,
+    templateRows,
+    gap = "m",
+    rowGap,
+    columnGap,
+    autoFlow = "row",
+    align,
+    justify,
+    alignContent,
+    height,
+    as,
+    className,
+    children,
+    style,
+    ...rest
+  }, ref) => {
+    const Element = as || defaultElement;
+    const resolvedTemplateColumns = useResponsiveValue(templateColumns) ?? "repeat(12, 1fr)";
+    const resolvedTemplateRows = useResponsiveValue(templateRows);
+    const resolvedGap = useResponsiveValue(gap);
+    const resolvedRowGap = useResponsiveValue(rowGap);
+    const resolvedColumnGap = useResponsiveValue(columnGap);
+    const resolvedAutoFlow = useResponsiveValue(autoFlow) ?? "row";
+    const resolvedAlign = useResponsiveValue(align);
+    const resolvedJustify = useResponsiveValue(justify);
+    const resolvedAlignContent = useResponsiveValue(alignContent);
+    const gridStyle = {
+      ...resolvedTemplateColumns && {
+        "--grid-template-columns": resolvedTemplateColumns
+      },
+      ...resolvedTemplateRows && {
+        "--grid-template-rows": resolvedTemplateRows
+      },
+      ...resolvedAutoFlow && {
+        "--grid-auto-flow": resolvedAutoFlow
+      },
+      ...resolvedAlign && {
+        "--grid-align-items": resolvedAlign
+      },
+      ...resolvedJustify && {
+        "--grid-justify-content": resolvedJustify
+      },
+      ...resolvedAlignContent && {
+        "--grid-align-content": resolvedAlignContent
+      },
+      ...resolvedGap && {
+        "--grid-gap": getSpacingValue(resolvedGap)
+      },
+      ...resolvedRowGap && {
+        "--grid-row-gap": getSpacingValue(resolvedRowGap)
+      },
+      ...resolvedColumnGap && {
+        "--grid-column-gap": getSpacingValue(resolvedColumnGap)
+      },
+      ...height && {
+        "--grid-height": height
+      },
+      ...style
+    };
+    return /* @__PURE__ */ jsx(
+      Element,
+      {
+        ref,
+        className: classNames("eds-layout-grid", className),
+        style: gridStyle,
+        ...rest,
+        children
+      }
+    );
+  }
+);
 export {
   Grid
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Grid.mjs","sources":["../../../../src/beta/Grid/Grid.tsx"],"sourcesContent":["import React from 'react';\nimport { PolymorphicComponentProps } from '@entur/utils';\nimport { getSpacingValue } from '../LayoutWrapper/utils';\nimport type { GridSpacingValue, ResponsiveValue } from '../LayoutWrapper/utils';\nimport { useResponsiveValue } from '../LayoutWrapper/useResponsiveValue';\nimport classNames from 'classnames';\n\nimport './Grid.scss';\n\ntype AlignItems = React.CSSProperties['alignItems'];\ntype JustifyContent = React.CSSProperties['justifyContent'];\ntype AlignContent = React.CSSProperties['alignContent'];\n\nexport type GridOwnProps = {\n  /** CSS grid-template-columns value (supports responsive objects)\n   * @default \"repeat(12, 1fr)\"\n   */\n  templateColumns?: string | ResponsiveValue<string>;\n  /** Spacing between grid items (supports responsive objects)\n   * @default \"m\"\n   */\n  gap?: GridSpacingValue | ResponsiveValue<GridSpacingValue>;\n  /** Vertical spacing between grid rows (supports responsive objects) */\n  rowGap?: GridSpacingValue | ResponsiveValue<GridSpacingValue>;\n  /** Horizontal spacing between grid columns (supports responsive objects) */\n  columnGap?: GridSpacingValue | ResponsiveValue<GridSpacingValue>;\n  /** CSS grid-template-rows value (supports responsive objects) */\n  templateRows?: string | ResponsiveValue<string>;\n  /** CSS grid-auto-flow value (supports responsive objects)\n   * @default \"row\"\n   */\n  autoFlow?:\n    | 'row'\n    | 'column'\n    | 'dense'\n    | 'row dense'\n    | 'column dense'\n    | ResponsiveValue<\n        'row' | 'column' | 'dense' | 'row dense' | 'column dense'\n      >;\n  /** CSS align-items value (supports responsive objects) */\n  align?: AlignItems | ResponsiveValue<AlignItems>;\n  /** CSS justify-content value (supports responsive objects) */\n  justify?: JustifyContent | ResponsiveValue<JustifyContent>;\n  /** CSS align-content value (supports responsive objects) */\n  alignContent?: AlignContent | ResponsiveValue<AlignContent>;\n  /** The height of the grid container */\n  height?: string;\n  /** HTML element or React component used to render the Grid\n   * @default \"div\"\n   */\n  as?: string | React.ElementType;\n  /** Additional class names */\n  className?: string;\n  /** Content of the Grid container */\n  children?: React.ReactNode;\n};\n\nexport type GridProps<T extends React.ElementType = typeof defaultElement> =\n  PolymorphicComponentProps<T, GridOwnProps>;\n\nconst defaultElement = 'div';\n\nexport const Grid = <E extends React.ElementType = typeof defaultElement>({\n  templateColumns,\n  templateRows,\n  gap = 'm',\n  rowGap,\n  columnGap,\n  autoFlow = 'row',\n  align,\n  justify,\n  alignContent,\n  height,\n  as,\n  className,\n  children,\n  style,\n  ...rest\n}: GridProps<E>): JSX.Element => {\n  const Element: React.ElementType = as || defaultElement;\n\n  const resolvedTemplateColumns =\n    useResponsiveValue(templateColumns) ?? 'repeat(12, 1fr)';\n  const resolvedTemplateRows = useResponsiveValue(templateRows);\n  const resolvedGap = useResponsiveValue(gap);\n  const resolvedRowGap = useResponsiveValue(rowGap);\n  const resolvedColumnGap = useResponsiveValue(columnGap);\n  const resolvedAutoFlow = useResponsiveValue(autoFlow) ?? 'row';\n  const resolvedAlign = useResponsiveValue(align);\n  const resolvedJustify = useResponsiveValue(justify);\n  const resolvedAlignContent = useResponsiveValue(alignContent);\n\n  const gridStyle: React.CSSProperties = {\n    ...(resolvedTemplateColumns && {\n      '--grid-template-columns': resolvedTemplateColumns,\n    }),\n    ...(resolvedTemplateRows && {\n      '--grid-template-rows': resolvedTemplateRows,\n    }),\n    ...(resolvedAutoFlow && {\n      '--grid-auto-flow': resolvedAutoFlow,\n    }),\n    ...(resolvedAlign && {\n      '--grid-align-items': resolvedAlign,\n    }),\n    ...(resolvedJustify && {\n      '--grid-justify-content': resolvedJustify,\n    }),\n    ...(resolvedAlignContent && {\n      '--grid-align-content': resolvedAlignContent,\n    }),\n    ...(resolvedGap && {\n      '--grid-gap': getSpacingValue(resolvedGap),\n    }),\n    ...(resolvedRowGap && {\n      '--grid-row-gap': getSpacingValue(resolvedRowGap),\n    }),\n    ...(resolvedColumnGap && {\n      '--grid-column-gap': getSpacingValue(resolvedColumnGap),\n    }),\n    ...(height && {\n      '--grid-height': height,\n    }),\n    ...style,\n  } as React.CSSProperties;\n\n  return (\n    <Element\n      className={classNames('eds-layout-grid', className)}\n      style={gridStyle}\n      {...rest}\n    >\n      {children}\n    </Element>\n  );\n};\n"],"names":[],"mappings":";;;;;AA6DA,MAAM,iBAAiB;AAEhB,MAAM,OAAO,CAAsD;AAAA,EACxE;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAiC;AAC/B,QAAM,UAA6B,MAAM;AAEzC,QAAM,0BACJ,mBAAmB,eAAe,KAAK;AACzC,QAAM,uBAAuB,mBAAmB,YAAY;AAC5D,QAAM,cAAc,mBAAmB,GAAG;AAC1C,QAAM,iBAAiB,mBAAmB,MAAM;AAChD,QAAM,oBAAoB,mBAAmB,SAAS;AACtD,QAAM,mBAAmB,mBAAmB,QAAQ,KAAK;AACzD,QAAM,gBAAgB,mBAAmB,KAAK;AAC9C,QAAM,kBAAkB,mBAAmB,OAAO;AAClD,QAAM,uBAAuB,mBAAmB,YAAY;AAE5D,QAAM,YAAiC;AAAA,IACrC,GAAI,2BAA2B;AAAA,MAC7B,2BAA2B;AAAA,IAAA;AAAA,IAE7B,GAAI,wBAAwB;AAAA,MAC1B,wBAAwB;AAAA,IAAA;AAAA,IAE1B,GAAI,oBAAoB;AAAA,MACtB,oBAAoB;AAAA,IAAA;AAAA,IAEtB,GAAI,iBAAiB;AAAA,MACnB,sBAAsB;AAAA,IAAA;AAAA,IAExB,GAAI,mBAAmB;AAAA,MACrB,0BAA0B;AAAA,IAAA;AAAA,IAE5B,GAAI,wBAAwB;AAAA,MAC1B,wBAAwB;AAAA,IAAA;AAAA,IAE1B,GAAI,eAAe;AAAA,MACjB,cAAc,gBAAgB,WAAW;AAAA,IAAA;AAAA,IAE3C,GAAI,kBAAkB;AAAA,MACpB,kBAAkB,gBAAgB,cAAc;AAAA,IAAA;AAAA,IAElD,GAAI,qBAAqB;AAAA,MACvB,qBAAqB,gBAAgB,iBAAiB;AAAA,IAAA;AAAA,IAExD,GAAI,UAAU;AAAA,MACZ,iBAAiB;AAAA,IAAA;AAAA,IAEnB,GAAG;AAAA,EAAA;AAGL,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,WAAW,mBAAmB,SAAS;AAAA,MAClD,OAAO;AAAA,MACN,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"Grid.mjs","sources":["../../../../src/beta/Grid/Grid.tsx"],"sourcesContent":["import React from 'react';\nimport { PolymorphicComponentProps } from '@entur/utils';\nimport { getSpacingValue } from '../LayoutWrapper/utils';\nimport type { GridSpacingValue, ResponsiveValue } from '../LayoutWrapper/utils';\nimport { useResponsiveValue } from '../LayoutWrapper/useResponsiveValue';\nimport classNames from 'classnames';\n\nimport './Grid.scss';\n\ntype AlignItems = React.CSSProperties['alignItems'];\ntype JustifyContent = React.CSSProperties['justifyContent'];\ntype AlignContent = React.CSSProperties['alignContent'];\n\nexport type GridOwnProps = {\n  /** CSS grid-template-columns value (supports responsive objects)\n   * @default \"repeat(12, 1fr)\"\n   */\n  templateColumns?: string | ResponsiveValue<string>;\n  /** Spacing between grid items (supports responsive objects)\n   * @default \"m\"\n   */\n  gap?: GridSpacingValue | ResponsiveValue<GridSpacingValue>;\n  /** Vertical spacing between grid rows (supports responsive objects) */\n  rowGap?: GridSpacingValue | ResponsiveValue<GridSpacingValue>;\n  /** Horizontal spacing between grid columns (supports responsive objects) */\n  columnGap?: GridSpacingValue | ResponsiveValue<GridSpacingValue>;\n  /** CSS grid-template-rows value (supports responsive objects) */\n  templateRows?: string | ResponsiveValue<string>;\n  /** CSS grid-auto-flow value (supports responsive objects)\n   * @default \"row\"\n   */\n  autoFlow?:\n    | 'row'\n    | 'column'\n    | 'dense'\n    | 'row dense'\n    | 'column dense'\n    | ResponsiveValue<\n        'row' | 'column' | 'dense' | 'row dense' | 'column dense'\n      >;\n  /** CSS align-items value (supports responsive objects) */\n  align?: AlignItems | ResponsiveValue<AlignItems>;\n  /** CSS justify-content value (supports responsive objects) */\n  justify?: JustifyContent | ResponsiveValue<JustifyContent>;\n  /** CSS align-content value (supports responsive objects) */\n  alignContent?: AlignContent | ResponsiveValue<AlignContent>;\n  /** The height of the grid container */\n  height?: string;\n  /** HTML element or React component used to render the Grid\n   * @default \"div\"\n   */\n  as?: string | React.ElementType;\n  /** Additional class names */\n  className?: string;\n  /** Content of the Grid container */\n  children?: React.ReactNode;\n};\n\nexport type GridProps<T extends React.ElementType = typeof defaultElement> =\n  PolymorphicComponentProps<T, GridOwnProps>;\n\nconst defaultElement = 'div';\n\nexport const Grid = React.forwardRef(\n  <E extends React.ElementType = typeof defaultElement>(\n    {\n      templateColumns,\n      templateRows,\n      gap = 'm',\n      rowGap,\n      columnGap,\n      autoFlow = 'row',\n      align,\n      justify,\n      alignContent,\n      height,\n      as,\n      className,\n      children,\n      style,\n      ...rest\n    }: GridProps<E>,\n    ref?: React.Ref<Element>,\n  ): JSX.Element => {\n    const Element: React.ElementType = as || defaultElement;\n\n    const resolvedTemplateColumns =\n      useResponsiveValue(templateColumns) ?? 'repeat(12, 1fr)';\n    const resolvedTemplateRows = useResponsiveValue(templateRows);\n    const resolvedGap = useResponsiveValue(gap);\n    const resolvedRowGap = useResponsiveValue(rowGap);\n    const resolvedColumnGap = useResponsiveValue(columnGap);\n    const resolvedAutoFlow = useResponsiveValue(autoFlow) ?? 'row';\n    const resolvedAlign = useResponsiveValue(align);\n    const resolvedJustify = useResponsiveValue(justify);\n    const resolvedAlignContent = useResponsiveValue(alignContent);\n\n    const gridStyle: React.CSSProperties = {\n      ...(resolvedTemplateColumns && {\n        '--grid-template-columns': resolvedTemplateColumns,\n      }),\n      ...(resolvedTemplateRows && {\n        '--grid-template-rows': resolvedTemplateRows,\n      }),\n      ...(resolvedAutoFlow && {\n        '--grid-auto-flow': resolvedAutoFlow,\n      }),\n      ...(resolvedAlign && {\n        '--grid-align-items': resolvedAlign,\n      }),\n      ...(resolvedJustify && {\n        '--grid-justify-content': resolvedJustify,\n      }),\n      ...(resolvedAlignContent && {\n        '--grid-align-content': resolvedAlignContent,\n      }),\n      ...(resolvedGap && {\n        '--grid-gap': getSpacingValue(resolvedGap),\n      }),\n      ...(resolvedRowGap && {\n        '--grid-row-gap': getSpacingValue(resolvedRowGap),\n      }),\n      ...(resolvedColumnGap && {\n        '--grid-column-gap': getSpacingValue(resolvedColumnGap),\n      }),\n      ...(height && {\n        '--grid-height': height,\n      }),\n      ...style,\n    } as React.CSSProperties;\n\n    return (\n      <Element\n        ref={ref}\n        className={classNames('eds-layout-grid', className)}\n        style={gridStyle}\n        {...rest}\n      >\n        {children}\n      </Element>\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;;AA6DA,MAAM,iBAAiB;AAEhB,MAAM,OAAO,MAAM;AAAA,EACxB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACgB;AAChB,UAAM,UAA6B,MAAM;AAEzC,UAAM,0BACJ,mBAAmB,eAAe,KAAK;AACzC,UAAM,uBAAuB,mBAAmB,YAAY;AAC5D,UAAM,cAAc,mBAAmB,GAAG;AAC1C,UAAM,iBAAiB,mBAAmB,MAAM;AAChD,UAAM,oBAAoB,mBAAmB,SAAS;AACtD,UAAM,mBAAmB,mBAAmB,QAAQ,KAAK;AACzD,UAAM,gBAAgB,mBAAmB,KAAK;AAC9C,UAAM,kBAAkB,mBAAmB,OAAO;AAClD,UAAM,uBAAuB,mBAAmB,YAAY;AAE5D,UAAM,YAAiC;AAAA,MACrC,GAAI,2BAA2B;AAAA,QAC7B,2BAA2B;AAAA,MAAA;AAAA,MAE7B,GAAI,wBAAwB;AAAA,QAC1B,wBAAwB;AAAA,MAAA;AAAA,MAE1B,GAAI,oBAAoB;AAAA,QACtB,oBAAoB;AAAA,MAAA;AAAA,MAEtB,GAAI,iBAAiB;AAAA,QACnB,sBAAsB;AAAA,MAAA;AAAA,MAExB,GAAI,mBAAmB;AAAA,QACrB,0BAA0B;AAAA,MAAA;AAAA,MAE5B,GAAI,wBAAwB;AAAA,QAC1B,wBAAwB;AAAA,MAAA;AAAA,MAE1B,GAAI,eAAe;AAAA,QACjB,cAAc,gBAAgB,WAAW;AAAA,MAAA;AAAA,MAE3C,GAAI,kBAAkB;AAAA,QACpB,kBAAkB,gBAAgB,cAAc;AAAA,MAAA;AAAA,MAElD,GAAI,qBAAqB;AAAA,QACvB,qBAAqB,gBAAgB,iBAAiB;AAAA,MAAA;AAAA,MAExD,GAAI,UAAU;AAAA,QACZ,iBAAiB;AAAA,MAAA;AAAA,MAEnB,GAAG;AAAA,IAAA;AAGL,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,WAAW,mBAAmB,SAAS;AAAA,QAClD,OAAO;AAAA,QACN,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}

package/dist/beta/esm/Grid/GridItem.mjs

@@ -1,4 +1,5 @@
 import { jsx } from "react/jsx-runtime";
+import React from "react";
 import { useResponsiveValue } from "../LayoutWrapper/useResponsiveValue.mjs";
 import classNames from "classnames";
 /* empty css               */
@@ -12,37 +13,40 @@ const formatGridSpan = (value) => {
   }
   return value;
 };
-const GridItem = ({
-  colSpan,
-  rowSpan = 1,
-  as,
-  className,
-  children,
-  style,
-  ...rest
-}) => {
-  const Element = as || defaultElement;
-  const resolvedColSpan = useResponsiveValue(colSpan);
-  const resolvedRowSpan = useResponsiveValue(rowSpan);
-  const itemStyle = {
-    ...resolvedColSpan !== void 0 && {
-      "--grid-item-column": formatGridSpan(resolvedColSpan)
-    },
-    ...resolvedRowSpan !== void 0 && {
-      "--grid-item-row": formatGridSpan(resolvedRowSpan)
-    },
-    ...style
-  };
-  return /* @__PURE__ */ jsx(
-    Element,
-    {
-      className: classNames("eds-layout-grid-item", className),
-      style: itemStyle,
-      ...rest,
-      children
-    }
-  );
-};
+const GridItem = React.forwardRef(
+  ({
+    colSpan,
+    rowSpan = 1,
+    as,
+    className,
+    children,
+    style,
+    ...rest
+  }, ref) => {
+    const Element = as || defaultElement;
+    const resolvedColSpan = useResponsiveValue(colSpan);
+    const resolvedRowSpan = useResponsiveValue(rowSpan);
+    const itemStyle = {
+      ...resolvedColSpan !== void 0 && {
+        "--grid-item-column": formatGridSpan(resolvedColSpan)
+      },
+      ...resolvedRowSpan !== void 0 && {
+        "--grid-item-row": formatGridSpan(resolvedRowSpan)
+      },
+      ...style
+    };
+    return /* @__PURE__ */ jsx(
+      Element,
+      {
+        ref,
+        className: classNames("eds-layout-grid-item", className),
+        style: itemStyle,
+        ...rest,
+        children
+      }
+    );
+  }
+);
 export {
   GridItem
 };

package/dist/beta/esm/Grid/GridItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"GridItem.mjs","sources":["../../../../src/beta/Grid/GridItem.tsx"],"sourcesContent":["import React from 'react';\nimport { PolymorphicComponentProps } from '@entur/utils';\nimport { useResponsiveValue } from '../LayoutWrapper/useResponsiveValue';\nimport type { ResponsiveValue } from '../LayoutWrapper/utils';\nimport classNames from 'classnames';\n\nimport './GridItem.scss';\n\nexport type GridItemOwnProps = {\n  /** Number of columns the item should span (supports responsive objects)\n   * If number: adds \"span\" prefix (e.g., 6 → \"span 6\")\n   * If string: used directly (e.g., \"span 3\" or \"1 / 3\")\n   */\n  colSpan?: number | string | ResponsiveValue<number | string>;\n  /** Number of rows the item should span (supports responsive objects)\n   * @default 1\n   * If number: adds \"span\" prefix (e.g., 2 → \"span 2\")\n   * If string: used directly (e.g., \"span 2\" or \"1 / 3\")\n   */\n  rowSpan?: number | string | ResponsiveValue<number | string>;\n  /** HTML element or React component used to render the Grid item\n   * @default \"div\"\n   */\n  as?: string | React.ElementType;\n  /** Additional class names */\n  className?: string;\n  /** Content of the Grid item */\n  children?: React.ReactNode;\n};\n\nexport type GridItemProps<T extends React.ElementType = typeof defaultElement> =\n  PolymorphicComponentProps<T, GridItemOwnProps>;\n\nconst defaultElement = 'div';\n\nconst formatGridSpan = (\n  value: number | string | undefined,\n): string | undefined => {\n  if (value === undefined) {\n    return undefined;\n  }\n\n  if (typeof value === 'number') {\n    return `span ${value}`;\n  }\n\n  return value;\n};\n\nexport const GridItem = <E extends React.ElementType = typeof defaultElement>({\n  colSpan,\n  rowSpan = 1,\n  as,\n  className,\n  children,\n  style,\n  ...rest\n}: GridItemProps<E>): JSX.Element => {\n  const Element: React.ElementType = as || defaultElement;\n\n  const resolvedColSpan = useResponsiveValue(colSpan);\n  const resolvedRowSpan = useResponsiveValue(rowSpan);\n\n  const itemStyle: React.CSSProperties = {\n    ...(resolvedColSpan !== undefined && {\n      '--grid-item-column': formatGridSpan(resolvedColSpan),\n    }),\n    ...(resolvedRowSpan !== undefined && {\n      '--grid-item-row': formatGridSpan(resolvedRowSpan),\n    }),\n    ...style,\n  } as React.CSSProperties;\n\n  return (\n    <Element\n      className={classNames('eds-layout-grid-item', className)}\n      style={itemStyle}\n      {...rest}\n    >\n      {children}\n    </Element>\n  );\n};\n"],"names":[],"mappings":";;;;AAiCA,MAAM,iBAAiB;AAEvB,MAAM,iBAAiB,CACrB,UACuB;AACvB,MAAI,UAAU,QAAW;AACvB,WAAO;AAAA,EACT;AAEA,MAAI,OAAO,UAAU,UAAU;AAC7B,WAAO,QAAQ,KAAK;AAAA,EACtB;AAEA,SAAO;AACT;AAEO,MAAM,WAAW,CAAsD;AAAA,EAC5E;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAqC;AACnC,QAAM,UAA6B,MAAM;AAEzC,QAAM,kBAAkB,mBAAmB,OAAO;AAClD,QAAM,kBAAkB,mBAAmB,OAAO;AAElD,QAAM,YAAiC;AAAA,IACrC,GAAI,oBAAoB,UAAa;AAAA,MACnC,sBAAsB,eAAe,eAAe;AAAA,IAAA;AAAA,IAEtD,GAAI,oBAAoB,UAAa;AAAA,MACnC,mBAAmB,eAAe,eAAe;AAAA,IAAA;AAAA,IAEnD,GAAG;AAAA,EAAA;AAGL,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,WAAW,wBAAwB,SAAS;AAAA,MACvD,OAAO;AAAA,MACN,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"GridItem.mjs","sources":["../../../../src/beta/Grid/GridItem.tsx"],"sourcesContent":["import React from 'react';\nimport { PolymorphicComponentProps } from '@entur/utils';\nimport { useResponsiveValue } from '../LayoutWrapper/useResponsiveValue';\nimport type { ResponsiveValue } from '../LayoutWrapper/utils';\nimport classNames from 'classnames';\n\nimport './GridItem.scss';\n\nexport type GridItemOwnProps = {\n  /** Number of columns the item should span (supports responsive objects)\n   * If number: adds \"span\" prefix (e.g., 6 → \"span 6\")\n   * If string: used directly (e.g., \"span 3\" or \"1 / 3\")\n   */\n  colSpan?: number | string | ResponsiveValue<number | string>;\n  /** Number of rows the item should span (supports responsive objects)\n   * @default 1\n   * If number: adds \"span\" prefix (e.g., 2 → \"span 2\")\n   * If string: used directly (e.g., \"span 2\" or \"1 / 3\")\n   */\n  rowSpan?: number | string | ResponsiveValue<number | string>;\n  /** HTML element or React component used to render the Grid item\n   * @default \"div\"\n   */\n  as?: string | React.ElementType;\n  /** Additional class names */\n  className?: string;\n  /** Content of the Grid item */\n  children?: React.ReactNode;\n};\n\nexport type GridItemProps<T extends React.ElementType = typeof defaultElement> =\n  PolymorphicComponentProps<T, GridItemOwnProps>;\n\nconst defaultElement = 'div';\n\nconst formatGridSpan = (\n  value: number | string | undefined,\n): string | undefined => {\n  if (value === undefined) {\n    return undefined;\n  }\n\n  if (typeof value === 'number') {\n    return `span ${value}`;\n  }\n\n  return value;\n};\n\nexport const GridItem = React.forwardRef(\n  <E extends React.ElementType = typeof defaultElement>(\n    {\n      colSpan,\n      rowSpan = 1,\n      as,\n      className,\n      children,\n      style,\n      ...rest\n    }: GridItemProps<E>,\n    ref?: React.Ref<Element>,\n  ): JSX.Element => {\n    const Element: React.ElementType = as || defaultElement;\n\n    const resolvedColSpan = useResponsiveValue(colSpan);\n    const resolvedRowSpan = useResponsiveValue(rowSpan);\n\n    const itemStyle: React.CSSProperties = {\n      ...(resolvedColSpan !== undefined && {\n        '--grid-item-column': formatGridSpan(resolvedColSpan),\n      }),\n      ...(resolvedRowSpan !== undefined && {\n        '--grid-item-row': formatGridSpan(resolvedRowSpan),\n      }),\n      ...style,\n    } as React.CSSProperties;\n\n    return (\n      <Element\n        ref={ref}\n        className={classNames('eds-layout-grid-item', className)}\n        style={itemStyle}\n        {...rest}\n      >\n        {children}\n      </Element>\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;AAiCA,MAAM,iBAAiB;AAEvB,MAAM,iBAAiB,CACrB,UACuB;AACvB,MAAI,UAAU,QAAW;AACvB,WAAO;AAAA,EACT;AAEA,MAAI,OAAO,UAAU,UAAU;AAC7B,WAAO,QAAQ,KAAK;AAAA,EACtB;AAEA,SAAO;AACT;AAEO,MAAM,WAAW,MAAM;AAAA,EAC5B,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACgB;AAChB,UAAM,UAA6B,MAAM;AAEzC,UAAM,kBAAkB,mBAAmB,OAAO;AAClD,UAAM,kBAAkB,mBAAmB,OAAO;AAElD,UAAM,YAAiC;AAAA,MACrC,GAAI,oBAAoB,UAAa;AAAA,QACnC,sBAAsB,eAAe,eAAe;AAAA,MAAA;AAAA,MAEtD,GAAI,oBAAoB,UAAa;AAAA,QACnC,mBAAmB,eAAe,eAAe;AAAA,MAAA;AAAA,MAEnD,GAAG;AAAA,IAAA;AAGL,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,WAAW,wBAAwB,SAAS;AAAA,QACvD,OAAO;AAAA,QACN,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}

package/dist/beta/esm/templates/Sidebar.mjs

@@ -1,76 +1,94 @@
 import { jsx } from "react/jsx-runtime";
+import React from "react";
 import classNames from "classnames";
 import { Contrast } from "../Contrast.mjs";
 import { FlexComponent } from "../Flex/index.mjs";
 import { GridComponent } from "../Grid/index.mjs";
 /* empty css              */
-const SidebarLogo = ({ children, ...rest }) => {
-  return /* @__PURE__ */ jsx("div", { ...rest, children });
-};
-const SidebarUser = ({ children, ...rest }) => {
-  return /* @__PURE__ */ jsx("div", { ...rest, children });
-};
-const SidebarData = ({ children, ...rest }) => {
-  return /* @__PURE__ */ jsx("div", { ...rest, children });
-};
-const SidebarNavigation = ({
-  children,
-  className,
-  ...rest
-}) => {
-  return /* @__PURE__ */ jsx(
-    "nav",
-    {
-      className: classNames(
-        "eds-layout-template-sidebar__navigation",
-        className
-      ),
-      ...rest,
-      children
-    }
-  );
-};
-const SidebarFooter = ({
-  children,
-  className,
-  ...rest
-}) => {
-  return /* @__PURE__ */ jsx(
-    "footer",
-    {
-      className: classNames("eds-layout-template-sidebar__footer", className),
-      ...rest,
-      children
-    }
-  );
-};
-const SidebarRoot = ({
-  children,
-  className,
-  style,
-  contrast = true,
-  ...rest
-}) => {
-  const WrapperElement = contrast ? Contrast : "div";
-  return /* @__PURE__ */ jsx(GridComponent.Item, { as: WrapperElement, colSpan: "1 / 2", rowSpan: "1 / 2", children: /* @__PURE__ */ jsx(
-    FlexComponent,
-    {
-      as: "aside",
-      direction: "column",
-      gap: "m",
-      className: classNames(
-        "eds-layout-template-sidebar",
-        {
-          "eds-layout-template-sidebar--plain": !contrast
-        },
-        className
-      ),
-      style,
-      ...rest,
-      children
-    }
-  ) });
-};
+const defaultSidebarElement = "aside";
+const defaultSectionElement = "div";
+const defaultNavigationElement = "nav";
+const defaultFooterElement = "footer";
+const SidebarLogo = React.forwardRef(
+  ({ children, as, ...rest }, ref) => {
+    const Element = as || defaultSectionElement;
+    return /* @__PURE__ */ jsx(Element, { ref, ...rest, children });
+  }
+);
+const SidebarUser = React.forwardRef(
+  ({ children, as, ...rest }, ref) => {
+    const Element = as || defaultSectionElement;
+    return /* @__PURE__ */ jsx(Element, { ref, ...rest, children });
+  }
+);
+const SidebarData = React.forwardRef(
+  ({ children, as, ...rest }, ref) => {
+    const Element = as || defaultSectionElement;
+    return /* @__PURE__ */ jsx(Element, { ref, ...rest, children });
+  }
+);
+const SidebarNavigation = React.forwardRef(
+  ({ children, className, as, ...rest }, ref) => {
+    const Element = as || defaultNavigationElement;
+    return /* @__PURE__ */ jsx(
+      Element,
+      {
+        ref,
+        className: classNames(
+          "eds-layout-template-sidebar__navigation",
+          className
+        ),
+        ...rest,
+        children
+      }
+    );
+  }
+);
+const SidebarFooter = React.forwardRef(
+  ({ children, className, as, ...rest }, ref) => {
+    const Element = as || defaultFooterElement;
+    return /* @__PURE__ */ jsx(
+      Element,
+      {
+        ref,
+        className: classNames("eds-layout-template-sidebar__footer", className),
+        ...rest,
+        children
+      }
+    );
+  }
+);
+const SidebarRoot = React.forwardRef(
+  ({
+    children,
+    className,
+    style,
+    contrast = true,
+    as,
+    ...rest
+  }, ref) => {
+    const WrapperElement = contrast ? Contrast : "div";
+    return /* @__PURE__ */ jsx(GridComponent.Item, { as: WrapperElement, colSpan: "1 / 2", rowSpan: "1 / 2", children: /* @__PURE__ */ jsx(
+      FlexComponent,
+      {
+        ref,
+        as: as || defaultSidebarElement,
+        direction: "column",
+        gap: "m",
+        className: classNames(
+          "eds-layout-template-sidebar",
+          {
+            "eds-layout-template-sidebar--plain": !contrast
+          },
+          className
+        ),
+        style,
+        ...rest,
+        children
+      }
+    ) });
+  }
+);
 const Sidebar = Object.assign(SidebarRoot, {
   Logo: SidebarLogo,
   User: SidebarUser,

package/dist/beta/esm/templates/Sidebar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.mjs","sources":["../../../../src/beta/templates/Sidebar.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { Contrast } from '../../Contrast';\nimport { Flex } from '../Flex';\nimport { Grid } from '../Grid';\nimport './Sidebar.scss';\n\nexport type SidebarProps = React.HTMLAttributes<HTMLElement> & {\n  /** Toggle contrast styling for the sidebar */\n  contrast?: boolean;\n};\n\nexport type SidebarSectionProps = React.HTMLAttributes<HTMLElement>;\n\nconst SidebarLogo: React.FC<SidebarSectionProps> = ({ children, ...rest }) => {\n  return <div {...rest}>{children}</div>;\n};\n\nconst SidebarUser: React.FC<SidebarSectionProps> = ({ children, ...rest }) => {\n  return <div {...rest}>{children}</div>;\n};\n\nconst SidebarData: React.FC<SidebarSectionProps> = ({ children, ...rest }) => {\n  return <div {...rest}>{children}</div>;\n};\n\nconst SidebarNavigation: React.FC<SidebarSectionProps> = ({\n  children,\n  className,\n  ...rest\n}) => {\n  return (\n    <nav\n      className={classNames(\n        'eds-layout-template-sidebar__navigation',\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </nav>\n  );\n};\n\nconst SidebarFooter: React.FC<SidebarSectionProps> = ({\n  children,\n  className,\n  ...rest\n}) => {\n  return (\n    <footer\n      className={classNames('eds-layout-template-sidebar__footer', className)}\n      {...rest}\n    >\n      {children}\n    </footer>\n  );\n};\n\nconst SidebarRoot: React.FC<SidebarProps> = ({\n  children,\n  className,\n  style,\n  contrast = true,\n  ...rest\n}) => {\n  const WrapperElement = contrast ? Contrast : 'div';\n  return (\n    <Grid.Item as={WrapperElement} colSpan=\"1 / 2\" rowSpan=\"1 / 2\">\n      <Flex\n        as=\"aside\"\n        direction=\"column\"\n        gap=\"m\"\n        className={classNames(\n          'eds-layout-template-sidebar',\n          {\n            'eds-layout-template-sidebar--plain': !contrast,\n          },\n          className,\n        )}\n        style={style}\n        {...rest}\n      >\n        {children}\n      </Flex>\n    </Grid.Item>\n  );\n};\n\nexport type SidebarComponent = typeof SidebarRoot & {\n  Logo: typeof SidebarLogo;\n  User: typeof SidebarUser;\n  Data: typeof SidebarData;\n  Navigation: typeof SidebarNavigation;\n  Footer: typeof SidebarFooter;\n};\n\nexport const Sidebar: SidebarComponent = Object.assign(SidebarRoot, {\n  Logo: SidebarLogo,\n  User: SidebarUser,\n  Data: SidebarData,\n  Navigation: SidebarNavigation,\n  Footer: SidebarFooter,\n});\n\nSidebar.displayName = 'Template.Portal.Sidebar';\nSidebar.Logo.displayName = 'Template.Portal.Sidebar.Logo';\nSidebar.User.displayName = 'Template.Portal.Sidebar.User';\nSidebar.Data.displayName = 'Template.Portal.Sidebar.Data';\nSidebar.Navigation.displayName = 'Template.Portal.Sidebar.Navigation';\nSidebar.Footer.displayName = 'Template.Portal.Sidebar.Footer';\n"],"names":["Grid","Flex"],"mappings":";;;;;;AAcA,MAAM,cAA6C,CAAC,EAAE,UAAU,GAAG,WAAW;AAC5E,SAAO,oBAAC,OAAA,EAAK,GAAG,MAAO,SAAA,CAAS;AAClC;AAEA,MAAM,cAA6C,CAAC,EAAE,UAAU,GAAG,WAAW;AAC5E,SAAO,oBAAC,OAAA,EAAK,GAAG,MAAO,SAAA,CAAS;AAClC;AAEA,MAAM,cAA6C,CAAC,EAAE,UAAU,GAAG,WAAW;AAC5E,SAAO,oBAAC,OAAA,EAAK,GAAG,MAAO,SAAA,CAAS;AAClC;AAEA,MAAM,oBAAmD,CAAC;AAAA,EACxD;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,MAAM,gBAA+C,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,WAAW,uCAAuC,SAAS;AAAA,MACrE,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,MAAM,cAAsC,CAAC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,GAAG;AACL,MAAM;AACJ,QAAM,iBAAiB,WAAW,WAAW;AAC7C,SACE,oBAACA,cAAK,MAAL,EAAU,IAAI,gBAAgB,SAAQ,SAAQ,SAAQ,SACrD,UAAA;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH,WAAU;AAAA,MACV,KAAI;AAAA,MACJ,WAAW;AAAA,QACT;AAAA,QACA;AAAA,UACE,sCAAsC,CAAC;AAAA,QAAA;AAAA,QAEzC;AAAA,MAAA;AAAA,MAEF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;AAUO,MAAM,UAA4B,OAAO,OAAO,aAAa;AAAA,EAClE,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,QAAQ;AACV,CAAC;AAED,QAAQ,cAAc;AACtB,QAAQ,KAAK,cAAc;AAC3B,QAAQ,KAAK,cAAc;AAC3B,QAAQ,KAAK,cAAc;AAC3B,QAAQ,WAAW,cAAc;AACjC,QAAQ,OAAO,cAAc;"}
+{"version":3,"file":"Sidebar.mjs","sources":["../../../../src/beta/templates/Sidebar.tsx"],"sourcesContent":["import React from 'react';\nimport type { PolymorphicComponentProps } from '@entur/utils';\nimport classNames from 'classnames';\nimport { Contrast } from '../../Contrast';\nimport { Flex } from '../Flex';\nimport { Grid } from '../Grid';\nimport './Sidebar.scss';\n\ntype SidebarOwnProps = {\n  /** Toggle contrast styling for the sidebar */\n  contrast?: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n};\n\ntype SidebarSectionOwnProps = {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n};\n\nconst defaultSidebarElement = 'aside';\nconst defaultSectionElement = 'div';\nconst defaultNavigationElement = 'nav';\nconst defaultFooterElement = 'footer';\n\nexport type SidebarProps<\n  T extends React.ElementType = typeof defaultSidebarElement,\n> = PolymorphicComponentProps<T, SidebarOwnProps>;\n\nexport type SidebarSectionProps<\n  T extends React.ElementType = typeof defaultSectionElement,\n> = PolymorphicComponentProps<T, SidebarSectionOwnProps>;\n\nconst SidebarLogo = React.forwardRef(\n  <E extends React.ElementType = typeof defaultSectionElement>(\n    { children, as, ...rest }: SidebarSectionProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    const Element: React.ElementType = as || defaultSectionElement;\n    return (\n      <Element ref={ref} {...rest}>\n        {children}\n      </Element>\n    );\n  },\n);\n\nconst SidebarUser = React.forwardRef(\n  <E extends React.ElementType = typeof defaultSectionElement>(\n    { children, as, ...rest }: SidebarSectionProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    const Element: React.ElementType = as || defaultSectionElement;\n    return (\n      <Element ref={ref} {...rest}>\n        {children}\n      </Element>\n    );\n  },\n);\n\nconst SidebarData = React.forwardRef(\n  <E extends React.ElementType = typeof defaultSectionElement>(\n    { children, as, ...rest }: SidebarSectionProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    const Element: React.ElementType = as || defaultSectionElement;\n    return (\n      <Element ref={ref} {...rest}>\n        {children}\n      </Element>\n    );\n  },\n);\n\nconst SidebarNavigation = React.forwardRef(\n  <E extends React.ElementType = typeof defaultNavigationElement>(\n    { children, className, as, ...rest }: SidebarSectionProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    const Element: React.ElementType = as || defaultNavigationElement;\n    return (\n      <Element\n        ref={ref}\n        className={classNames(\n          'eds-layout-template-sidebar__navigation',\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </Element>\n    );\n  },\n);\n\nconst SidebarFooter = React.forwardRef(\n  <E extends React.ElementType = typeof defaultFooterElement>(\n    { children, className, as, ...rest }: SidebarSectionProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    const Element: React.ElementType = as || defaultFooterElement;\n    return (\n      <Element\n        ref={ref}\n        className={classNames('eds-layout-template-sidebar__footer', className)}\n        {...rest}\n      >\n        {children}\n      </Element>\n    );\n  },\n);\n\nconst SidebarRoot = React.forwardRef(\n  <E extends React.ElementType = typeof defaultSidebarElement>(\n    {\n      children,\n      className,\n      style,\n      contrast = true,\n      as,\n      ...rest\n    }: SidebarProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    const WrapperElement = contrast ? Contrast : 'div';\n    return (\n      <Grid.Item as={WrapperElement} colSpan=\"1 / 2\" rowSpan=\"1 / 2\">\n        <Flex\n          ref={ref}\n          as={as || defaultSidebarElement}\n          direction=\"column\"\n          gap=\"m\"\n          className={classNames(\n            'eds-layout-template-sidebar',\n            {\n              'eds-layout-template-sidebar--plain': !contrast,\n            },\n            className,\n          )}\n          style={style}\n          {...rest}\n        >\n          {children}\n        </Flex>\n      </Grid.Item>\n    );\n  },\n);\n\nexport type SidebarComponent = typeof SidebarRoot & {\n  Logo: typeof SidebarLogo;\n  User: typeof SidebarUser;\n  Data: typeof SidebarData;\n  Navigation: typeof SidebarNavigation;\n  Footer: typeof SidebarFooter;\n};\n\nexport const Sidebar: SidebarComponent = Object.assign(SidebarRoot, {\n  Logo: SidebarLogo,\n  User: SidebarUser,\n  Data: SidebarData,\n  Navigation: SidebarNavigation,\n  Footer: SidebarFooter,\n});\n\nSidebar.displayName = 'Template.Portal.Sidebar';\nSidebar.Logo.displayName = 'Template.Portal.Sidebar.Logo';\nSidebar.User.displayName = 'Template.Portal.Sidebar.User';\nSidebar.Data.displayName = 'Template.Portal.Sidebar.Data';\nSidebar.Navigation.displayName = 'Template.Portal.Sidebar.Navigation';\nSidebar.Footer.displayName = 'Template.Portal.Sidebar.Footer';\n"],"names":["Grid","Flex"],"mappings":";;;;;;;AAsBA,MAAM,wBAAwB;AAC9B,MAAM,wBAAwB;AAC9B,MAAM,2BAA2B;AACjC,MAAM,uBAAuB;AAU7B,MAAM,cAAc,MAAM;AAAA,EACxB,CACE,EAAE,UAAU,IAAI,GAAG,KAAA,GACnB,QACG;AACH,UAAM,UAA6B,MAAM;AACzC,WACE,oBAAC,SAAA,EAAQ,KAAW,GAAG,MACpB,UACH;AAAA,EAEJ;AACF;AAEA,MAAM,cAAc,MAAM;AAAA,EACxB,CACE,EAAE,UAAU,IAAI,GAAG,KAAA,GACnB,QACG;AACH,UAAM,UAA6B,MAAM;AACzC,WACE,oBAAC,SAAA,EAAQ,KAAW,GAAG,MACpB,UACH;AAAA,EAEJ;AACF;AAEA,MAAM,cAAc,MAAM;AAAA,EACxB,CACE,EAAE,UAAU,IAAI,GAAG,KAAA,GACnB,QACG;AACH,UAAM,UAA6B,MAAM;AACzC,WACE,oBAAC,SAAA,EAAQ,KAAW,GAAG,MACpB,UACH;AAAA,EAEJ;AACF;AAEA,MAAM,oBAAoB,MAAM;AAAA,EAC9B,CACE,EAAE,UAAU,WAAW,IAAI,GAAG,KAAA,GAC9B,QACG;AACH,UAAM,UAA6B,MAAM;AACzC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,MAAM,gBAAgB,MAAM;AAAA,EAC1B,CACE,EAAE,UAAU,WAAW,IAAI,GAAG,KAAA,GAC9B,QACG;AACH,UAAM,UAA6B,MAAM;AACzC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,WAAW,uCAAuC,SAAS;AAAA,QACrE,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,MAAM,cAAc,MAAM;AAAA,EACxB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,iBAAiB,WAAW,WAAW;AAC7C,WACE,oBAACA,cAAK,MAAL,EAAU,IAAI,gBAAgB,SAAQ,SAAQ,SAAQ,SACrD,UAAA;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC;AAAA,QACA,IAAI,MAAM;AAAA,QACV,WAAU;AAAA,QACV,KAAI;AAAA,QACJ,WAAW;AAAA,UACT;AAAA,UACA;AAAA,YACE,sCAAsC,CAAC;AAAA,UAAA;AAAA,UAEzC;AAAA,QAAA;AAAA,QAEF;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,EAEJ;AACF;AAUO,MAAM,UAA4B,OAAO,OAAO,aAAa;AAAA,EAClE,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,QAAQ;AACV,CAAC;AAED,QAAQ,cAAc;AACtB,QAAQ,KAAK,cAAc;AAC3B,QAAQ,KAAK,cAAc;AAC3B,QAAQ,KAAK,cAAc;AAC3B,QAAQ,WAAW,cAAc;AACjC,QAAQ,OAAO,cAAc;"}

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

@@ -1,44 +1,43 @@
 import { jsx } from "react/jsx-runtime";
+import React from "react";
 import classNames from "classnames";
 import { GridComponent } from "../../Grid/index.mjs";
 import { Sidebar } from "../Sidebar.mjs";
 /* empty css             */
-const PortalRoot = ({
-  children,
-  className,
-  style,
-  ...rest
-}) => {
-  return /* @__PURE__ */ jsx(
-    GridComponent,
-    {
-      templateColumns: "var(--eds-sidebar-width, min-content) minmax(0, 1fr)",
-      gap: "m",
-      className: classNames("eds-layout-template-portal", className),
-      style,
-      ...rest,
-      children
-    }
-  );
-};
-const PortalMain = ({
-  children,
-  className,
-  style,
-  ...rest
-}) => {
-  return /* @__PURE__ */ jsx(
-    GridComponent.Item,
-    {
-      as: "main",
-      colSpan: "2 / -1",
-      className: classNames("eds-layout-template-portal__main", className),
-      style,
-      ...rest,
-      children
-    }
-  );
-};
+const defaultPortalMainElement = "main";
+const PortalRoot = React.forwardRef(
+  ({ children, className, style, as, ...rest }, ref) => {
+    return /* @__PURE__ */ jsx(
+      GridComponent,
+      {
+        ref,
+        as,
+        templateColumns: "var(--eds-sidebar-width, min-content) minmax(0, 1fr)",
+        gap: "m",
+        className: classNames("eds-layout-template-portal", className),
+        style,
+        ...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
+      }
+    );
+  }
+);
 const Portal = Object.assign(PortalRoot, {
   Sidebar,
   Main: PortalMain

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 classNames from 'classnames';\nimport { Grid } from '../../Grid';\nimport { Sidebar, SidebarComponent } from '../Sidebar';\nimport './Portal.scss';\n\nexport type PortalProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport type PortalMainProps = React.HTMLAttributes<HTMLElement>;\n\nconst PortalRoot: React.FC<PortalProps> = ({\n  children,\n  className,\n  style,\n  ...rest\n}) => {\n  return (\n    <Grid\n      templateColumns=\"var(--eds-sidebar-width, min-content) minmax(0, 1fr)\"\n      gap=\"m\"\n      className={classNames('eds-layout-template-portal', className)}\n      style={style}\n      {...rest}\n    >\n      {children}\n    </Grid>\n  );\n};\n\nconst PortalMain: React.FC<PortalMainProps> = ({\n  children,\n  className,\n  style,\n  ...rest\n}) => {\n  return (\n    <Grid.Item\n      as=\"main\"\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\nexport type PortalComponent = typeof PortalRoot & {\n  Sidebar: SidebarComponent;\n  Main: typeof PortalMain;\n};\n\nexport const Portal: PortalComponent = Object.assign(PortalRoot, {\n  Sidebar,\n  Main: PortalMain,\n});\n\nPortal.displayName = 'Template.Portal';\nPortal.Main.displayName = 'Template.Portal.Main';\n"],"names":["Grid"],"mappings":";;;;;AAUA,MAAM,aAAoC,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACE;AAAA,IAACA;AAAAA,IAAA;AAAA,MACC,iBAAgB;AAAA,MAChB,KAAI;AAAA,MACJ,WAAW,WAAW,8BAA8B,SAAS;AAAA,MAC7D;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,MAAM,aAAwC,CAAC;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACE;AAAA,IAACA,cAAK;AAAA,IAAL;AAAA,MACC,IAAG;AAAA,MACH,SAAQ;AAAA,MACR,WAAW,WAAW,oCAAoC,SAAS;AAAA,MACnE;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;AAOO,MAAM,SAA0B,OAAO,OAAO,YAAY;AAAA,EAC/D;AAAA,EACA,MAAM;AACR,CAAC;AAED,OAAO,cAAc;AACrB,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  children?: React.ReactNode;\n};\n\ntype PortalMainOwnProps = {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n};\n\nconst defaultPortalMainElement = 'main';\n\nexport type PortalProps<T extends React.ElementType = typeof Grid> =\n  PolymorphicComponentProps<T, PortalOwnProps>;\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        templateColumns=\"var(--eds-sidebar-width, min-content) minmax(0, 1fr)\"\n        gap=\"m\"\n        className={classNames('eds-layout-template-portal', className)}\n        style={style}\n        {...rest}\n      >\n        {children}\n      </Grid>\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  Sidebar: SidebarComponent;\n  Main: typeof PortalMain;\n};\n\nexport const Portal: PortalComponent = Object.assign(PortalRoot, {\n  Sidebar,\n  Main: PortalMain,\n});\n\nPortal.displayName = 'Template.Portal';\nPortal.Main.displayName = 'Template.Portal.Main';\n"],"names":["Grid"],"mappings":";;;;;;AAmBA,MAAM,2BAA2B;AASjC,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,iBAAgB;AAAA,QAChB,KAAI;AAAA,QACJ,WAAW,WAAW,8BAA8B,SAAS;AAAA,QAC7D;AAAA,QACC,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;AAOO,MAAM,SAA0B,OAAO,OAAO,YAAY;AAAA,EAC/D;AAAA,EACA,MAAM;AACR,CAAC;AAED,OAAO,cAAc;AACrB,OAAO,KAAK,cAAc;"}

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

@@ -61,5 +61,7 @@ export type FlexOwnProps = {
 };
 export type FlexProps<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, FlexOwnProps>;
 declare const defaultElement = "div";
-export declare const Flex: <E extends React.ElementType = "div">({ direction, wrap, align, justify, alignContent, gap, rowGap, columnGap, flex, grow, shrink, basis, width, height, minWidth, minHeight, maxWidth, maxHeight, as, className, children, style, ...rest }: FlexProps<E>) => JSX.Element;
+export declare const Flex: React.ForwardRefExoticComponent<Omit<FlexOwnProps & {
+    as?: React.ElementType<any> | undefined;
+} & Omit<Omit<any, "ref">, keyof FlexOwnProps>, "ref"> & React.RefAttributes<Element>>;
 export {};

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

@@ -42,5 +42,7 @@ export type GridOwnProps = {
 };
 export type GridProps<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, GridOwnProps>;
 declare const defaultElement = "div";
-export declare const Grid: <E extends React.ElementType = "div">({ templateColumns, templateRows, gap, rowGap, columnGap, autoFlow, align, justify, alignContent, height, as, className, children, style, ...rest }: GridProps<E>) => JSX.Element;
+export declare const Grid: React.ForwardRefExoticComponent<Omit<GridOwnProps & {
+    as?: React.ElementType<any> | undefined;
+} & Omit<Omit<any, "ref">, keyof GridOwnProps>, "ref"> & React.RefAttributes<Element>>;
 export {};

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

@@ -24,5 +24,7 @@ export type GridItemOwnProps = {
 };
 export type GridItemProps<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, GridItemOwnProps>;
 declare const defaultElement = "div";
-export declare const GridItem: <E extends React.ElementType = "div">({ colSpan, rowSpan, as, className, children, style, ...rest }: GridItemProps<E>) => JSX.Element;
+export declare const GridItem: React.ForwardRefExoticComponent<Omit<GridItemOwnProps & {
+    as?: React.ElementType<any> | undefined;
+} & Omit<Omit<any, "ref">, keyof GridItemOwnProps>, "ref"> & React.RefAttributes<Element>>;
 export {};