@entur/layout 3.6.0 → 3.7.0

package/dist/beta/cjs/Flex/Flex.cjs

@@ -3,8 +3,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const classNames = require("classnames");
-const utils = require("../LayoutWrapper/utils.cjs");
-const useResponsiveValue = require("../LayoutWrapper/useResponsiveValue.cjs");
+const utils = require("../LayoutProvider/utils.cjs");
+const useResponsiveValue = require("../LayoutProvider/useResponsiveValue.cjs");
 ;/* empty css            */
 const defaultElement = "div";
 const Flex = React.forwardRef(

package/dist/beta/cjs/Flex/Flex.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Flex.cjs","sources":["../../../../src/beta/Flex/Flex.tsx"],"sourcesContent":["import React from 'react';\nimport { PolymorphicComponentProps } from '@entur/utils';\nimport classNames from 'classnames';\nimport { getSpacingValue } from '../LayoutWrapper/utils';\nimport type { GridSpacingValue, ResponsiveValue } from '../LayoutWrapper/utils';\nimport { useResponsiveValue } from '../LayoutWrapper/useResponsiveValue';\n\nimport './Flex.scss';\n\nexport type FlexSpacingValue = GridSpacingValue;\n\ntype FlexDirection = React.CSSProperties['flexDirection'];\ntype FlexWrap = React.CSSProperties['flexWrap'];\ntype AlignItems = React.CSSProperties['alignItems'];\ntype JustifyContent = React.CSSProperties['justifyContent'];\ntype AlignContent = React.CSSProperties['alignContent'];\ntype FlexBasis = React.CSSProperties['flexBasis'];\ntype FlexValue = React.CSSProperties['flex'];\n\nexport type FlexOwnProps = {\n  /** CSS flex-direction value (supports responsive objects)\n   * @default \"row\"\n   */\n  direction?: FlexDirection | ResponsiveValue<FlexDirection>;\n  /** CSS flex-wrap value (supports responsive objects)\n   * @default \"nowrap\"\n   */\n  wrap?: FlexWrap | ResponsiveValue<FlexWrap>;\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  /** Spacing between flex items (supports responsive objects) */\n  gap?: FlexSpacingValue | ResponsiveValue<FlexSpacingValue>;\n  /** Vertical spacing between rows (supports responsive objects) */\n  rowGap?: FlexSpacingValue | ResponsiveValue<FlexSpacingValue>;\n  /** Horizontal spacing between columns (supports responsive objects) */\n  columnGap?: FlexSpacingValue | ResponsiveValue<FlexSpacingValue>;\n  /** CSS flex shorthand value */\n  flex?: FlexValue;\n  /** CSS flex-grow value */\n  grow?: number;\n  /** CSS flex-shrink value */\n  shrink?: number;\n  /** CSS flex-basis value */\n  basis?: FlexBasis;\n  /** CSS width value */\n  width?: string;\n  /** CSS height value */\n  height?: string;\n  /** CSS min-width value */\n  minWidth?: string;\n  /** CSS min-height value */\n  minHeight?: string;\n  /** CSS max-width value */\n  maxWidth?: string;\n  /** CSS max-height value */\n  maxHeight?: string;\n  /** HTML element or React component used to render the Flex container\n   * @default \"div\"\n   */\n  as?: string | React.ElementType;\n  /** Additional class names */\n  className?: string;\n  /** Content of the Flex container */\n  children?: React.ReactNode;\n};\n\nexport type FlexProps<T extends React.ElementType = typeof defaultElement> =\n  PolymorphicComponentProps<T, FlexOwnProps>;\n\nconst defaultElement = 'div';\n\nexport const Flex = React.forwardRef(\n  <E extends React.ElementType = typeof defaultElement>(\n    {\n      direction,\n      wrap,\n      align,\n      justify,\n      alignContent,\n      gap,\n      rowGap,\n      columnGap,\n      flex,\n      grow,\n      shrink,\n      basis,\n      width,\n      height,\n      minWidth,\n      minHeight,\n      maxWidth,\n      maxHeight,\n      as,\n      className,\n      children,\n      style,\n      ...rest\n    }: FlexProps<E>,\n    ref?: React.Ref<Element>,\n  ): JSX.Element => {\n    const Element: React.ElementType = as || defaultElement;\n\n    const resolvedDirection = useResponsiveValue(direction);\n    const resolvedWrap = useResponsiveValue(wrap);\n    const resolvedAlign = useResponsiveValue(align);\n    const resolvedJustify = useResponsiveValue(justify);\n    const resolvedAlignContent = useResponsiveValue(alignContent);\n    const resolvedGap = useResponsiveValue(gap);\n    const resolvedRowGap = useResponsiveValue(rowGap);\n    const resolvedColumnGap = useResponsiveValue(columnGap);\n\n    const flexStyle: React.CSSProperties = {\n      ...(resolvedDirection && {\n        '--flex-direction': resolvedDirection,\n      }),\n      ...(resolvedWrap && {\n        '--flex-wrap': resolvedWrap,\n      }),\n      ...(resolvedAlign && {\n        '--flex-align-items': resolvedAlign,\n      }),\n      ...(resolvedJustify && {\n        '--flex-justify-content': resolvedJustify,\n      }),\n      ...(resolvedAlignContent && {\n        '--flex-align-content': resolvedAlignContent,\n      }),\n      ...(resolvedGap && {\n        '--flex-gap': getSpacingValue(resolvedGap, 'Flex'),\n      }),\n      ...(resolvedRowGap && {\n        '--flex-row-gap': getSpacingValue(resolvedRowGap, 'Flex'),\n      }),\n      ...(resolvedColumnGap && {\n        '--flex-column-gap': getSpacingValue(resolvedColumnGap, 'Flex'),\n      }),\n      ...(flex !== undefined && {\n        '--flex': flex,\n      }),\n      ...(grow !== undefined && {\n        '--flex-grow': grow,\n      }),\n      ...(shrink !== undefined && {\n        '--flex-shrink': shrink,\n      }),\n      ...(basis !== undefined && {\n        '--flex-basis': basis,\n      }),\n      ...(width && {\n        '--flex-width': width,\n      }),\n      ...(height && {\n        '--flex-height': height,\n      }),\n      ...(minWidth && {\n        '--flex-min-width': minWidth,\n      }),\n      ...(minHeight && {\n        '--flex-min-height': minHeight,\n      }),\n      ...(maxWidth && {\n        '--flex-max-width': maxWidth,\n      }),\n      ...(maxHeight && {\n        '--flex-max-height': maxHeight,\n      }),\n      ...style,\n    } as React.CSSProperties;\n\n    return (\n      <Element\n        ref={ref}\n        className={classNames('eds-layout-flex', className)}\n        style={flexStyle}\n        {...rest}\n      >\n        {children}\n      </Element>\n    );\n  },\n);\n"],"names":["useResponsiveValue","getSpacingValue","jsx"],"mappings":";;;;;;;;AAyEA,MAAM,iBAAiB;AAEhB,MAAM,OAAO,MAAM;AAAA,EACxB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;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,oBAAoBA,mBAAAA,mBAAmB,SAAS;AACtD,UAAM,eAAeA,mBAAAA,mBAAmB,IAAI;AAC5C,UAAM,gBAAgBA,mBAAAA,mBAAmB,KAAK;AAC9C,UAAM,kBAAkBA,mBAAAA,mBAAmB,OAAO;AAClD,UAAM,uBAAuBA,mBAAAA,mBAAmB,YAAY;AAC5D,UAAM,cAAcA,mBAAAA,mBAAmB,GAAG;AAC1C,UAAM,iBAAiBA,mBAAAA,mBAAmB,MAAM;AAChD,UAAM,oBAAoBA,mBAAAA,mBAAmB,SAAS;AAEtD,UAAM,YAAiC;AAAA,MACrC,GAAI,qBAAqB;AAAA,QACvB,oBAAoB;AAAA,MAAA;AAAA,MAEtB,GAAI,gBAAgB;AAAA,QAClB,eAAe;AAAA,MAAA;AAAA,MAEjB,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,cAAcC,MAAAA,gBAAgB,aAAa,MAAM;AAAA,MAAA;AAAA,MAEnD,GAAI,kBAAkB;AAAA,QACpB,kBAAkBA,MAAAA,gBAAgB,gBAAgB,MAAM;AAAA,MAAA;AAAA,MAE1D,GAAI,qBAAqB;AAAA,QACvB,qBAAqBA,MAAAA,gBAAgB,mBAAmB,MAAM;AAAA,MAAA;AAAA,MAEhE,GAAI,SAAS,UAAa;AAAA,QACxB,UAAU;AAAA,MAAA;AAAA,MAEZ,GAAI,SAAS,UAAa;AAAA,QACxB,eAAe;AAAA,MAAA;AAAA,MAEjB,GAAI,WAAW,UAAa;AAAA,QAC1B,iBAAiB;AAAA,MAAA;AAAA,MAEnB,GAAI,UAAU,UAAa;AAAA,QACzB,gBAAgB;AAAA,MAAA;AAAA,MAElB,GAAI,SAAS;AAAA,QACX,gBAAgB;AAAA,MAAA;AAAA,MAElB,GAAI,UAAU;AAAA,QACZ,iBAAiB;AAAA,MAAA;AAAA,MAEnB,GAAI,YAAY;AAAA,QACd,oBAAoB;AAAA,MAAA;AAAA,MAEtB,GAAI,aAAa;AAAA,QACf,qBAAqB;AAAA,MAAA;AAAA,MAEvB,GAAI,YAAY;AAAA,QACd,oBAAoB;AAAA,MAAA;AAAA,MAEtB,GAAI,aAAa;AAAA,QACf,qBAAqB;AAAA,MAAA;AAAA,MAEvB,GAAG;AAAA,IAAA;AAGL,WACEC,2BAAAA;AAAAA,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;;"}
+{"version":3,"file":"Flex.cjs","sources":["../../../../src/beta/Flex/Flex.tsx"],"sourcesContent":["import React from 'react';\nimport { PolymorphicComponentProps } from '@entur/utils';\nimport classNames from 'classnames';\nimport { getSpacingValue } from '../LayoutProvider/utils';\nimport type {\n  GridSpacingValue,\n  ResponsiveValue,\n} from '../LayoutProvider/utils';\nimport { useResponsiveValue } from '../LayoutProvider/useResponsiveValue';\n\nimport './Flex.scss';\n\nexport type FlexSpacingValue = GridSpacingValue;\n\ntype FlexDirection = React.CSSProperties['flexDirection'];\ntype FlexWrap = React.CSSProperties['flexWrap'];\ntype AlignItems = React.CSSProperties['alignItems'];\ntype JustifyContent = React.CSSProperties['justifyContent'];\ntype AlignContent = React.CSSProperties['alignContent'];\ntype FlexBasis = React.CSSProperties['flexBasis'];\ntype FlexValue = React.CSSProperties['flex'];\n\nexport type FlexOwnProps = {\n  /** CSS flex-direction value (supports responsive objects)\n   * @default \"row\"\n   */\n  direction?: FlexDirection | ResponsiveValue<FlexDirection>;\n  /** CSS flex-wrap value (supports responsive objects)\n   * @default \"nowrap\"\n   */\n  wrap?: FlexWrap | ResponsiveValue<FlexWrap>;\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  /** Spacing between flex items (supports responsive objects) */\n  gap?: FlexSpacingValue | ResponsiveValue<FlexSpacingValue>;\n  /** Vertical spacing between rows (supports responsive objects) */\n  rowGap?: FlexSpacingValue | ResponsiveValue<FlexSpacingValue>;\n  /** Horizontal spacing between columns (supports responsive objects) */\n  columnGap?: FlexSpacingValue | ResponsiveValue<FlexSpacingValue>;\n  /** CSS flex shorthand value */\n  flex?: FlexValue;\n  /** CSS flex-grow value */\n  grow?: number;\n  /** CSS flex-shrink value */\n  shrink?: number;\n  /** CSS flex-basis value */\n  basis?: FlexBasis;\n  /** CSS width value */\n  width?: string;\n  /** CSS height value */\n  height?: string;\n  /** CSS min-width value */\n  minWidth?: string;\n  /** CSS min-height value */\n  minHeight?: string;\n  /** CSS max-width value */\n  maxWidth?: string;\n  /** CSS max-height value */\n  maxHeight?: string;\n  /** HTML element or React component used to render the Flex container\n   * @default \"div\"\n   */\n  as?: string | React.ElementType;\n  /** Additional class names */\n  className?: string;\n  /** Content of the Flex container */\n  children?: React.ReactNode;\n};\n\nexport type FlexProps<T extends React.ElementType = typeof defaultElement> =\n  PolymorphicComponentProps<T, FlexOwnProps>;\n\nexport type FlexComponent = (<\n  E extends React.ElementType = typeof defaultElement,\n>(\n  props: FlexProps<E> & { ref?: React.Ref<Element> },\n) => React.ReactElement | null) & { displayName?: string };\n\nconst defaultElement = 'div';\n\nexport const Flex: FlexComponent = React.forwardRef(\n  <E extends React.ElementType = typeof defaultElement>(\n    {\n      direction,\n      wrap,\n      align,\n      justify,\n      alignContent,\n      gap,\n      rowGap,\n      columnGap,\n      flex,\n      grow,\n      shrink,\n      basis,\n      width,\n      height,\n      minWidth,\n      minHeight,\n      maxWidth,\n      maxHeight,\n      as,\n      className,\n      children,\n      style,\n      ...rest\n    }: FlexProps<E>,\n    ref?: React.Ref<Element>,\n  ): JSX.Element => {\n    const Element: React.ElementType = as || defaultElement;\n\n    const resolvedDirection = useResponsiveValue(direction);\n    const resolvedWrap = useResponsiveValue(wrap);\n    const resolvedAlign = useResponsiveValue(align);\n    const resolvedJustify = useResponsiveValue(justify);\n    const resolvedAlignContent = useResponsiveValue(alignContent);\n    const resolvedGap = useResponsiveValue(gap);\n    const resolvedRowGap = useResponsiveValue(rowGap);\n    const resolvedColumnGap = useResponsiveValue(columnGap);\n\n    const flexStyle: React.CSSProperties = {\n      ...(resolvedDirection && {\n        '--flex-direction': resolvedDirection,\n      }),\n      ...(resolvedWrap && {\n        '--flex-wrap': resolvedWrap,\n      }),\n      ...(resolvedAlign && {\n        '--flex-align-items': resolvedAlign,\n      }),\n      ...(resolvedJustify && {\n        '--flex-justify-content': resolvedJustify,\n      }),\n      ...(resolvedAlignContent && {\n        '--flex-align-content': resolvedAlignContent,\n      }),\n      ...(resolvedGap && {\n        '--flex-gap': getSpacingValue(resolvedGap, 'Flex'),\n      }),\n      ...(resolvedRowGap && {\n        '--flex-row-gap': getSpacingValue(resolvedRowGap, 'Flex'),\n      }),\n      ...(resolvedColumnGap && {\n        '--flex-column-gap': getSpacingValue(resolvedColumnGap, 'Flex'),\n      }),\n      ...(flex !== undefined && {\n        '--flex': flex,\n      }),\n      ...(grow !== undefined && {\n        '--flex-grow': grow,\n      }),\n      ...(shrink !== undefined && {\n        '--flex-shrink': shrink,\n      }),\n      ...(basis !== undefined && {\n        '--flex-basis': basis,\n      }),\n      ...(width && {\n        '--flex-width': width,\n      }),\n      ...(height && {\n        '--flex-height': height,\n      }),\n      ...(minWidth && {\n        '--flex-min-width': minWidth,\n      }),\n      ...(minHeight && {\n        '--flex-min-height': minHeight,\n      }),\n      ...(maxWidth && {\n        '--flex-max-width': maxWidth,\n      }),\n      ...(maxHeight && {\n        '--flex-max-height': maxHeight,\n      }),\n      ...style,\n    } as React.CSSProperties;\n\n    return (\n      <Element\n        ref={ref}\n        className={classNames('eds-layout-flex', className)}\n        style={flexStyle}\n        {...rest}\n      >\n        {children}\n      </Element>\n    );\n  },\n);\n"],"names":["useResponsiveValue","getSpacingValue","jsx"],"mappings":";;;;;;;;AAkFA,MAAM,iBAAiB;AAEhB,MAAM,OAAsB,MAAM;AAAA,EACvC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;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,oBAAoBA,mBAAAA,mBAAmB,SAAS;AACtD,UAAM,eAAeA,mBAAAA,mBAAmB,IAAI;AAC5C,UAAM,gBAAgBA,mBAAAA,mBAAmB,KAAK;AAC9C,UAAM,kBAAkBA,mBAAAA,mBAAmB,OAAO;AAClD,UAAM,uBAAuBA,mBAAAA,mBAAmB,YAAY;AAC5D,UAAM,cAAcA,mBAAAA,mBAAmB,GAAG;AAC1C,UAAM,iBAAiBA,mBAAAA,mBAAmB,MAAM;AAChD,UAAM,oBAAoBA,mBAAAA,mBAAmB,SAAS;AAEtD,UAAM,YAAiC;AAAA,MACrC,GAAI,qBAAqB;AAAA,QACvB,oBAAoB;AAAA,MAAA;AAAA,MAEtB,GAAI,gBAAgB;AAAA,QAClB,eAAe;AAAA,MAAA;AAAA,MAEjB,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,cAAcC,MAAAA,gBAAgB,aAAa,MAAM;AAAA,MAAA;AAAA,MAEnD,GAAI,kBAAkB;AAAA,QACpB,kBAAkBA,MAAAA,gBAAgB,gBAAgB,MAAM;AAAA,MAAA;AAAA,MAE1D,GAAI,qBAAqB;AAAA,QACvB,qBAAqBA,MAAAA,gBAAgB,mBAAmB,MAAM;AAAA,MAAA;AAAA,MAEhE,GAAI,SAAS,UAAa;AAAA,QACxB,UAAU;AAAA,MAAA;AAAA,MAEZ,GAAI,SAAS,UAAa;AAAA,QACxB,eAAe;AAAA,MAAA;AAAA,MAEjB,GAAI,WAAW,UAAa;AAAA,QAC1B,iBAAiB;AAAA,MAAA;AAAA,MAEnB,GAAI,UAAU,UAAa;AAAA,QACzB,gBAAgB;AAAA,MAAA;AAAA,MAElB,GAAI,SAAS;AAAA,QACX,gBAAgB;AAAA,MAAA;AAAA,MAElB,GAAI,UAAU;AAAA,QACZ,iBAAiB;AAAA,MAAA;AAAA,MAEnB,GAAI,YAAY;AAAA,QACd,oBAAoB;AAAA,MAAA;AAAA,MAEtB,GAAI,aAAa;AAAA,QACf,qBAAqB;AAAA,MAAA;AAAA,MAEvB,GAAI,YAAY;AAAA,QACd,oBAAoB;AAAA,MAAA;AAAA,MAEtB,GAAI,aAAa;AAAA,QACf,qBAAqB;AAAA,MAAA;AAAA,MAEvB,GAAG;AAAA,IAAA;AAGL,WACEC,2BAAAA;AAAAA,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/cjs/Flex/FlexSpacer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FlexSpacer.cjs","sources":["../../../../src/beta/Flex/FlexSpacer.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { PolymorphicComponentProps } from '@entur/utils';\n\nexport type FlexSpacerOwnProps = {\n  /** HTML element or React component used to render Flex.Spacer\n   * @default \"div\"\n   */\n  as?: string | React.ElementType;\n  /** Additional class name */\n  className?: string;\n  /** Spacer should not render children */\n  children?: never;\n};\n\nexport type FlexSpacerProps<\n  T extends React.ElementType = typeof defaultElement,\n> = PolymorphicComponentProps<T, FlexSpacerOwnProps>;\n\nconst defaultElement = 'div';\n\nexport const FlexSpacer = <\n  E extends React.ElementType = typeof defaultElement,\n>({\n  as,\n  className,\n  style,\n  ...rest\n}: FlexSpacerProps<E>): JSX.Element => {\n  const Element: React.ElementType = as || defaultElement;\n\n  return (\n    <Element\n      className={classNames('eds-layout-flex-spacer', className)}\n      style={style}\n      {...rest}\n      role=\"presentation\"\n      aria-hidden=\"true\"\n    ></Element>\n  );\n};\n"],"names":["jsx"],"mappings":";;;;AAmBA,MAAM,iBAAiB;AAEhB,MAAM,aAAa,CAExB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAuC;AACrC,QAAM,UAA6B,MAAM;AAEzC,SACEA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,WAAW,0BAA0B,SAAS;AAAA,MACzD;AAAA,MACC,GAAG;AAAA,MACJ,MAAK;AAAA,MACL,eAAY;AAAA,IAAA;AAAA,EAAA;AAGlB;;"}
+{"version":3,"file":"FlexSpacer.cjs","sources":["../../../../src/beta/Flex/FlexSpacer.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { PolymorphicComponentProps } from '@entur/utils';\n\nexport type FlexSpacerOwnProps = {\n  /** HTML element or React component used to render Flex.Spacer\n   * @default \"div\"\n   */\n  as?: string | React.ElementType;\n  /** Additional class name */\n  className?: string;\n  /** Spacer should not render children */\n  children?: never;\n};\n\nexport type FlexSpacerProps<\n  T extends React.ElementType = typeof defaultElement,\n> = PolymorphicComponentProps<T, FlexSpacerOwnProps>;\n\nexport type FlexSpacerComponent = (<\n  E extends React.ElementType = typeof defaultElement,\n>(\n  props: FlexSpacerProps<E>,\n) => React.ReactElement | null) & { displayName?: string };\n\nconst defaultElement = 'div';\n\nexport const FlexSpacer: FlexSpacerComponent = <\n  E extends React.ElementType = typeof defaultElement,\n>({\n  as,\n  className,\n  style,\n  ...rest\n}: FlexSpacerProps<E>): JSX.Element => {\n  const Element: React.ElementType = as || defaultElement;\n\n  return (\n    <Element\n      className={classNames('eds-layout-flex-spacer', className)}\n      style={style}\n      {...rest}\n      role=\"presentation\"\n      aria-hidden=\"true\"\n    ></Element>\n  );\n};\n"],"names":["jsx"],"mappings":";;;;AAyBA,MAAM,iBAAiB;AAEhB,MAAM,aAAkC,CAE7C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAuC;AACrC,QAAM,UAA6B,MAAM;AAEzC,SACEA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,WAAW,0BAA0B,SAAS;AAAA,MACzD;AAAA,MACC,GAAG;AAAA,MACJ,MAAK;AAAA,MACL,eAAY;AAAA,IAAA;AAAA,EAAA;AAGlB;;"}

package/dist/beta/cjs/Grid/Grid.cjs

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const utils = require("../LayoutWrapper/utils.cjs");
-const useResponsiveValue = require("../LayoutWrapper/useResponsiveValue.cjs");
+const utils = require("../LayoutProvider/utils.cjs");
+const useResponsiveValue = require("../LayoutProvider/useResponsiveValue.cjs");
 const classNames = require("classnames");
 ;/* empty css            */
 const defaultElement = "div";

package/dist/beta/cjs/Grid/Grid.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.cjs","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 = useResponsiveValue(templateColumns);\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);\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":["useResponsiveValue","getSpacingValue","jsx"],"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,0BAA0BA,mBAAAA,mBAAmB,eAAe;AAClE,UAAM,uBAAuBA,mBAAAA,mBAAmB,YAAY;AAC5D,UAAM,cAAcA,mBAAAA,mBAAmB,GAAG;AAC1C,UAAM,iBAAiBA,mBAAAA,mBAAmB,MAAM;AAChD,UAAM,oBAAoBA,mBAAAA,mBAAmB,SAAS;AACtD,UAAM,mBAAmBA,mBAAAA,mBAAmB,QAAQ;AACpD,UAAM,gBAAgBA,mBAAAA,mBAAmB,KAAK;AAC9C,UAAM,kBAAkBA,mBAAAA,mBAAmB,OAAO;AAClD,UAAM,uBAAuBA,mBAAAA,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,cAAcC,MAAAA,gBAAgB,WAAW;AAAA,MAAA;AAAA,MAE3C,GAAI,kBAAkB;AAAA,QACpB,kBAAkBA,MAAAA,gBAAgB,cAAc;AAAA,MAAA;AAAA,MAElD,GAAI,qBAAqB;AAAA,QACvB,qBAAqBA,MAAAA,gBAAgB,iBAAiB;AAAA,MAAA;AAAA,MAExD,GAAI,UAAU;AAAA,QACZ,iBAAiB;AAAA,MAAA;AAAA,MAEnB,GAAG;AAAA,IAAA;AAGL,WACEC,2BAAAA;AAAAA,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;;"}
+{"version":3,"file":"Grid.cjs","sources":["../../../../src/beta/Grid/Grid.tsx"],"sourcesContent":["import React from 'react';\nimport { PolymorphicComponentProps } from '@entur/utils';\nimport { getSpacingValue } from '../LayoutProvider/utils';\nimport type {\n  GridSpacingValue,\n  ResponsiveValue,\n} from '../LayoutProvider/utils';\nimport { useResponsiveValue } from '../LayoutProvider/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\nexport type GridComponent = (<\n  E extends React.ElementType = typeof defaultElement,\n>(\n  props: GridProps<E> & { ref?: React.Ref<Element> },\n) => React.ReactElement | null) & { displayName?: string };\n\nconst defaultElement = 'div';\n\nexport const Grid: GridComponent = 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 = useResponsiveValue(templateColumns);\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);\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":["useResponsiveValue","getSpacingValue","jsx"],"mappings":";;;;;;;;AAsEA,MAAM,iBAAiB;AAEhB,MAAM,OAAsB,MAAM;AAAA,EACvC,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,0BAA0BA,mBAAAA,mBAAmB,eAAe;AAClE,UAAM,uBAAuBA,mBAAAA,mBAAmB,YAAY;AAC5D,UAAM,cAAcA,mBAAAA,mBAAmB,GAAG;AAC1C,UAAM,iBAAiBA,mBAAAA,mBAAmB,MAAM;AAChD,UAAM,oBAAoBA,mBAAAA,mBAAmB,SAAS;AACtD,UAAM,mBAAmBA,mBAAAA,mBAAmB,QAAQ;AACpD,UAAM,gBAAgBA,mBAAAA,mBAAmB,KAAK;AAC9C,UAAM,kBAAkBA,mBAAAA,mBAAmB,OAAO;AAClD,UAAM,uBAAuBA,mBAAAA,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,cAAcC,MAAAA,gBAAgB,WAAW;AAAA,MAAA;AAAA,MAE3C,GAAI,kBAAkB;AAAA,QACpB,kBAAkBA,MAAAA,gBAAgB,cAAc;AAAA,MAAA;AAAA,MAElD,GAAI,qBAAqB;AAAA,QACvB,qBAAqBA,MAAAA,gBAAgB,iBAAiB;AAAA,MAAA;AAAA,MAExD,GAAI,UAAU;AAAA,QACZ,iBAAiB;AAAA,MAAA;AAAA,MAEnB,GAAG;AAAA,IAAA;AAGL,WACEC,2BAAAA;AAAAA,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/cjs/Grid/GridItem.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const useResponsiveValue = require("../LayoutWrapper/useResponsiveValue.cjs");
+const useResponsiveValue = require("../LayoutProvider/useResponsiveValue.cjs");
 const classNames = require("classnames");
 ;/* empty css                */
 const defaultElement = "div";

package/dist/beta/cjs/Grid/GridItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"GridItem.cjs","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":["useResponsiveValue","jsx"],"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,kBAAkBA,mBAAAA,mBAAmB,OAAO;AAClD,UAAM,kBAAkBA,mBAAAA,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,WACEC,2BAAAA;AAAAA,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;;"}
+{"version":3,"file":"GridItem.cjs","sources":["../../../../src/beta/Grid/GridItem.tsx"],"sourcesContent":["import React from 'react';\nimport { PolymorphicComponentProps } from '@entur/utils';\nimport { useResponsiveValue } from '../LayoutProvider/useResponsiveValue';\nimport type { ResponsiveValue } from '../LayoutProvider/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\nexport type GridItemComponent = (<\n  E extends React.ElementType = typeof defaultElement,\n>(\n  props: GridItemProps<E> & { ref?: React.Ref<Element> },\n) => React.ReactElement | null) & { displayName?: string };\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: GridItemComponent = 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":["useResponsiveValue","jsx"],"mappings":";;;;;;;AAuCA,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,WAA8B,MAAM;AAAA,EAC/C,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,kBAAkBA,mBAAAA,mBAAmB,OAAO;AAClD,UAAM,kBAAkBA,mBAAAA,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,WACEC,2BAAAA;AAAAA,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/cjs/Grid/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/beta/Grid/index.ts"],"sourcesContent":["import { Grid as GridParent } from './Grid';\nimport { GridItem } from './GridItem';\n\ntype Grid = typeof GridParent & {\n  /**\n   * An item inside a Grid.\n   *\n   * @example\n   * <Grid.Item colSpan={6}>Content</Grid.Item>\n   */\n  Item: typeof GridItem & { displayName?: string };\n};\n\n/**\n * A CSS Grid component for organizing content in a grid.\n *\n * @example\n * <Grid>\n *   <Grid.Item colSpan={6}>Content</Grid.Item>\n *   <Grid.Item colSpan={6}>Content</Grid.Item>\n * </Grid>\n */\nexport const GridComponent: Grid = Object.assign(GridParent, {\n  Item: GridItem,\n});\n\nGridComponent.Item.displayName = 'Grid.Item';\n\nexport type { GridProps, GridOwnProps } from './Grid';\nexport type { GridSpacingValue, ResponsiveValue } from '../LayoutWrapper/utils';\nexport type { GridItemProps, GridItemOwnProps } from './GridItem';\nexport { GridComponent as Grid, GridItem };\nexport { LayoutWrapper } from '../LayoutWrapper/LayoutWrapper';\nexport { useLayoutValues } from '../LayoutWrapper/useLayoutValues';\n"],"names":["GridParent","GridItem"],"mappings":";;;;AAsBO,MAAM,gBAAsB,OAAO,OAAOA,WAAY;AAAA,EAC3D,MAAMC,SAAAA;AACR,CAAC;AAED,cAAc,KAAK,cAAc;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/beta/Grid/index.ts"],"sourcesContent":["import { Grid as GridParent } from './Grid';\nimport { GridItem } from './GridItem';\n\ntype Grid = typeof GridParent & {\n  /**\n   * An item inside a Grid.\n   *\n   * @example\n   * <Grid.Item colSpan={6}>Content</Grid.Item>\n   */\n  Item: typeof GridItem & { displayName?: string };\n};\n\n/**\n * A CSS Grid component for organizing content in a grid.\n *\n * @example\n * <Grid>\n *   <Grid.Item colSpan={6}>Content</Grid.Item>\n *   <Grid.Item colSpan={6}>Content</Grid.Item>\n * </Grid>\n */\nexport const GridComponent: Grid = Object.assign(GridParent, {\n  Item: GridItem,\n});\n\nGridComponent.Item.displayName = 'Grid.Item';\n\nexport type { GridProps, GridOwnProps } from './Grid';\nexport type {\n  GridSpacingValue,\n  ResponsiveValue,\n} from '../LayoutProvider/utils';\nexport type { GridItemProps, GridItemOwnProps } from './GridItem';\nexport { GridComponent as Grid, GridItem };\n"],"names":["GridParent","GridItem"],"mappings":";;;;AAsBO,MAAM,gBAAsB,OAAO,OAAOA,WAAY;AAAA,EAC3D,MAAMC,SAAAA;AACR,CAAC;AAED,cAAc,KAAK,cAAc;;;;"}

package/dist/beta/cjs/{LayoutWrapper/LayoutWrapper.cjs → LayoutProvider/LayoutProvider.cjs}

@@ -4,7 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const utils = require("./utils.cjs");
 const LayoutContext = React.createContext(null);
-const LayoutWrapper = ({
+const LayoutProvider = ({
   breakpoints: customBreakpoints,
   children
 }) => {
@@ -26,6 +26,6 @@ const LayoutWrapper = ({
 const useLayoutContext = () => {
   return React.useContext(LayoutContext);
 };
-exports.LayoutWrapper = LayoutWrapper;
+exports.LayoutProvider = LayoutProvider;
 exports.useLayoutContext = useLayoutContext;
-//# sourceMappingURL=LayoutWrapper.cjs.map
+//# sourceMappingURL=LayoutProvider.cjs.map

package/dist/beta/cjs/LayoutProvider/LayoutProvider.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutProvider.cjs","sources":["../../../../src/beta/LayoutProvider/LayoutProvider.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 LayoutProviderProps = {\n  /**\n   * Custom breakpoint values (in px) to override the defaults.\n   *\n   * Breakpoints are **min-width** based: a breakpoint activates when the\n   * viewport is at least that wide and stays active until the next breakpoint.\n   *\n   * Default values:\n   * - `s`: 0px — always active below `m` (not configurable)\n   * - `m`: 800px — active from 800px up to (but not including) `lg`\n   * - `lg`: 1200px — active from 1200px up to (but not including) `xl`\n   * - `xl`: 1400px — active from 1400px and above\n   *\n   * @example\n   * <LayoutProvider breakpoints={{ m: 600, lg: 1024, xl: 1280 }}>\n   *   ...\n   * </LayoutProvider>\n   */\n  breakpoints?: Partial<Breakpoints>;\n  children: React.ReactNode;\n};\n\nexport const LayoutProvider = ({\n  breakpoints: customBreakpoints,\n  children,\n}: LayoutProviderProps): 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;AAwBtD,MAAM,iBAAiB,CAAC;AAAA,EAC7B,aAAa;AAAA,EACb;AACF,MAAwC;AACtC,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 → LayoutProvider}/useLayoutValues.cjs

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const utils = require("./utils.cjs");
-const LayoutWrapper = require("./LayoutWrapper.cjs");
+const LayoutProvider = require("./LayoutProvider.cjs");
 const useLayoutValues = () => {
-  const context = LayoutWrapper.useLayoutContext();
+  const context = LayoutProvider.useLayoutContext();
   if (context) {
     return context;
   }

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

@@ -0,0 +1 @@
+{"version":3,"file":"useLayoutValues.cjs","sources":["../../../../src/beta/LayoutProvider/useLayoutValues.ts"],"sourcesContent":["import { DEFAULT_BREAKPOINTS } from './utils';\nimport { type LayoutValues, useLayoutContext } from './LayoutProvider';\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,eAAAA,iBAAA;AAEhB,MAAI,SAAS;AACX,WAAO;AAAA,EACT;AAEA,SAAO;AAAA,IACL,aAAaC,MAAAA;AAAAA,EAAA;AAEjB;;"}

package/dist/beta/cjs/{LayoutWrapper → LayoutProvider}/useResponsiveValue.cjs

@@ -3,22 +3,25 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const useLayoutValues = require("./useLayoutValues.cjs");
 const isResponsiveObject = (value) => {
-  return typeof value === "object" && value !== null && !Array.isArray(value) && ("sm" in value || "md" in value || "lg" in value);
+  return typeof value === "object" && value !== null && !Array.isArray(value) && ("s" in value || "m" in value || "lg" in value || "xl" in value);
 };
 const getCurrentBreakpoint = (breakpoints, windowWidth) => {
+  if (windowWidth >= breakpoints.xl) {
+    return "xl";
+  }
   if (windowWidth >= breakpoints.lg) {
     return "lg";
   }
-  if (windowWidth >= breakpoints.md) {
-    return "md";
+  if (windowWidth >= breakpoints.m) {
+    return "m";
   }
-  return "sm";
+  return "s";
 };
 const useResponsiveValue = (value) => {
   const { breakpoints } = useLayoutValues.useLayoutValues();
   const [currentBreakpoint, setCurrentBreakpoint] = React.useState(() => {
     if (typeof window === "undefined") {
-      return "sm";
+      return "s";
     }
     return getCurrentBreakpoint(breakpoints, window.innerWidth);
   });
@@ -32,8 +35,9 @@ const useResponsiveValue = (value) => {
       );
     };
     const mediaQueries = [
-      window.matchMedia(`(min-width: ${breakpoints.md}px)`),
-      window.matchMedia(`(min-width: ${breakpoints.lg}px)`)
+      window.matchMedia(`(min-width: ${breakpoints.m}px)`),
+      window.matchMedia(`(min-width: ${breakpoints.lg}px)`),
+      window.matchMedia(`(min-width: ${breakpoints.xl}px)`)
     ];
     updateBreakpoint();
     const handleChange = () => {
@@ -66,7 +70,7 @@ const useResponsiveValue = (value) => {
   if (responsiveValue !== void 0) {
     return responsiveValue;
   }
-  const fallbackOrder = currentBreakpoint === "lg" ? ["lg", "md", "sm"] : currentBreakpoint === "md" ? ["md", "sm"] : ["sm"];
+  const fallbackOrder = currentBreakpoint === "xl" ? ["xl", "lg", "m", "s"] : currentBreakpoint === "lg" ? ["lg", "m", "s"] : currentBreakpoint === "m" ? ["m", "s"] : ["s"];
   for (const bp of fallbackOrder) {
     if (value[bp] !== void 0) {
       return value[bp];

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

@@ -0,0 +1 @@
+{"version":3,"file":"useResponsiveValue.cjs","sources":["../../../../src/beta/LayoutProvider/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 { s?: T; m?: T; lg?: T; xl?: T } => {\n  return (\n    typeof value === 'object' &&\n    value !== null &&\n    !Array.isArray(value) &&\n    ('s' in value || 'm' in value || 'lg' in value || 'xl' in value)\n  );\n};\n\nconst getCurrentBreakpoint = (\n  breakpoints: { m: number; lg: number; xl: number },\n  windowWidth: number,\n): 's' | 'm' | 'lg' | 'xl' => {\n  if (windowWidth >= breakpoints.xl) {\n    return 'xl';\n  }\n  if (windowWidth >= breakpoints.lg) {\n    return 'lg';\n  }\n  if (windowWidth >= breakpoints.m) {\n    return 'm';\n  }\n  return 's';\n};\n\nexport const useResponsiveValue = <T>(\n  value: ResponsiveValue<T> | undefined,\n): T | undefined => {\n  const { breakpoints } = useLayoutValues();\n  const [currentBreakpoint, setCurrentBreakpoint] = useState<\n    's' | 'm' | 'lg' | 'xl'\n  >(() => {\n    if (typeof window === 'undefined') {\n      return 's';\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.m}px)`),\n      window.matchMedia(`(min-width: ${breakpoints.lg}px)`),\n      window.matchMedia(`(min-width: ${breakpoints.xl}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<'xl' | 'lg' | 'm' | 's'> =\n    currentBreakpoint === 'xl'\n      ? ['xl', 'lg', 'm', 's']\n      : currentBreakpoint === 'lg'\n      ? ['lg', 'm', 's']\n      : currentBreakpoint === 'm'\n      ? ['m', 's']\n      : ['s'];\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,UAC8C;AAC9C,SACE,OAAO,UAAU,YACjB,UAAU,QACV,CAAC,MAAM,QAAQ,KAAK,MACnB,OAAO,SAAS,OAAO,SAAS,QAAQ,SAAS,QAAQ;AAE9D;AAEA,MAAM,uBAAuB,CAC3B,aACA,gBAC4B;AAC5B,MAAI,eAAe,YAAY,IAAI;AACjC,WAAO;AAAA,EACT;AACA,MAAI,eAAe,YAAY,IAAI;AACjC,WAAO;AAAA,EACT;AACA,MAAI,eAAe,YAAY,GAAG;AAChC,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,CAAC,KAAK;AAAA,MACnD,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,KAAK,GAAG,IACrB,sBAAsB,OACtB,CAAC,MAAM,KAAK,GAAG,IACf,sBAAsB,MACtB,CAAC,KAAK,GAAG,IACT,CAAC,GAAG;AAEV,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 → LayoutProvider}/utils.cjs

@@ -22,9 +22,9 @@ const VALID_SPACING_VALUES = [
   "none"
 ];
 const DEFAULT_BREAKPOINTS = {
-  sm: 0,
-  md: 800,
-  lg: 1200
+  m: 800,
+  lg: 1200,
+  xl: 1400
 };
 const isValidSpacingValue = (value) => {
   return typeof value === "string" && VALID_SPACING_VALUES.includes(value);

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.cjs","sources":["../../../../src/beta/LayoutProvider/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      s?: T;\n      m?: T;\n      lg?: T;\n      xl?: T;\n    };\n\n/**\n * Configurable min-width breakpoints (in px).\n *\n * `s` is always 0 and is not configurable — it is the base (mobile-first)\n * fallback that activates below `m`.\n *\n * - `m`: activates at this width and above (default: 800px)\n * - `lg`: activates at this width and above (default: 1200px)\n * - `xl`: activates at this width and above (default: 1400px)\n */\nexport type Breakpoints = {\n  m: number;\n  lg: number;\n  xl: number;\n};\n\nexport const DEFAULT_BREAKPOINTS: Breakpoints = {\n  m: 800,\n  lg: 1200,\n  xl: 1400,\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;AA6BO,MAAM,sBAAmC;AAAA,EAC9C,GAAG;AAAA,EACH,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/cjs/index.cjs

@@ -6,13 +6,13 @@ const index = require("./Flex/index.cjs");
 const index$2 = require("./templates/index.cjs");
 const FlexSpacer = require("./Flex/FlexSpacer.cjs");
 const GridItem = require("./Grid/GridItem.cjs");
-const LayoutWrapper = require("./LayoutWrapper/LayoutWrapper.cjs");
-const useLayoutValues = require("./LayoutWrapper/useLayoutValues.cjs");
+const LayoutProvider = require("./LayoutProvider/LayoutProvider.cjs");
+const useLayoutValues = require("./LayoutProvider/useLayoutValues.cjs");
 exports.Grid = index$1.Grid;
 exports.Flex = index.Flex;
 exports.Template = index$2.Template;
 exports.FlexSpacer = FlexSpacer.FlexSpacer;
 exports.GridItem = GridItem.GridItem;
-exports.LayoutWrapper = LayoutWrapper.LayoutWrapper;
+exports.LayoutProvider = LayoutProvider.LayoutProvider;
 exports.useLayoutValues = useLayoutValues.useLayoutValues;
 //# sourceMappingURL=index.cjs.map

package/dist/beta/cjs/templates/Sidebar.cjs

@@ -25,16 +25,19 @@ const SidebarUser = React.forwardRef(
 );
 const SidebarData = React.forwardRef(
   ({ children, as, ...rest }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      index$1.Flex,
-      {
-        ref,
-        as: as || defaultSectionElement,
-        direction: "column",
-        gap: "s",
-        ...rest,
-        children
-      }
+    return (
+      // @ts-expect-error generic prop forwarding through polymorphic Flex
+      /* @__PURE__ */ jsxRuntime.jsx(
+        index$1.Flex,
+        {
+          ref,
+          as: as || defaultSectionElement,
+          direction: "column",
+          gap: "s",
+          ...rest,
+          children
+        }
+      )
     );
   }
 );
@@ -62,7 +65,10 @@ const SidebarFooter = React.forwardRef(
       Element,
       {
         ref,
-        className: classNames("eds-layout-template-sidebar__footer", className),
+        className: classNames(
+          "eds-layout-template-sidebar__footer",
+          className
+        ),
         ...rest,
         children
       }
@@ -112,45 +118,55 @@ const SidebarRoot = React.forwardRef(
       }
     );
     if (!collapsible) {
-      return /* @__PURE__ */ jsxRuntime.jsx(index.Grid.Item, { className: wrapperClassNames, colSpan: "1 / 2", children: /* @__PURE__ */ jsxRuntime.jsx(
-        index$1.Flex,
-        {
-          ref,
-          as: as || defaultSidebarElement,
-          direction: "column",
-          gap: "m",
-          className: sidebarClassNames,
-          style,
-          ...rest,
-          children
-        }
-      ) });
+      return /* @__PURE__ */ jsxRuntime.jsx(index.Grid.Item, {
+        className: wrapperClassNames,
+        colSpan: "1 / 2",
+        // @ts-expect-error generic prop forwarding through polymorphic Flex
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          index$1.Flex,
+          {
+            ref,
+            as: as || defaultSidebarElement,
+            direction: "column",
+            gap: "m",
+            className: sidebarClassNames,
+            style,
+            ...rest,
+            children
+          }
+        )
+      });
     }
     const collapsedStyle = isCollapsed ? { ...style, "--eds-sidebar-width": "2rem" } : style;
-    return /* @__PURE__ */ jsxRuntime.jsxs(index.Grid.Item, { className: wrapperClassNames, colSpan: "1 / 2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        index$1.Flex,
-        {
-          ref,
-          as: as || defaultSidebarElement,
-          direction: "column",
-          gap: "m",
-          className: sidebarClassNames,
-          style: collapsedStyle,
-          ...rest,
-          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "eds-layout-template-sidebar__content", children })
-        }
-      ),
-      onCollapseToggle && /* @__PURE__ */ jsxRuntime.jsx(
-        CollapseToggle,
-        {
-          isCollapsed,
-          onToggle: () => onCollapseToggle(!isCollapsed),
-          openLabel: openSidebarAriaLabel,
-          closeLabel: closeSidebarAriaLabel
-        }
-      )
-    ] });
+    return /* @__PURE__ */ jsxRuntime.jsxs(index.Grid.Item, {
+      className: wrapperClassNames,
+      colSpan: "1 / 2",
+      // @ts-expect-error generic prop forwarding through polymorphic Flex
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          index$1.Flex,
+          {
+            ref,
+            as: as || defaultSidebarElement,
+            direction: "column",
+            gap: "m",
+            className: sidebarClassNames,
+            style: collapsedStyle,
+            ...rest,
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "eds-layout-template-sidebar__content", children })
+          }
+        ),
+        onCollapseToggle && /* @__PURE__ */ jsxRuntime.jsx(
+          CollapseToggle,
+          {
+            isCollapsed,
+            onToggle: () => onCollapseToggle(!isCollapsed),
+            openLabel: openSidebarAriaLabel,
+            closeLabel: closeSidebarAriaLabel
+          }
+        )
+      ]
+    });
   }
 );
 const Sidebar = Object.assign(SidebarRoot, {

package/dist/beta/cjs/templates/Sidebar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.cjs","sources":["../../../../src/beta/templates/Sidebar.tsx"],"sourcesContent":["import React from 'react';\nimport type { PolymorphicComponentProps } from '@entur/utils';\nimport classNames from 'classnames';\nimport { LeftArrowIcon, RightArrowIcon } from '@entur/icons';\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  /** Controlled collapsed state. When provided, the sidebar becomes\n   * collapsible and a toggle button is rendered. */\n  collapsed?: boolean;\n  /** Callback when the collapse toggle is clicked */\n  onCollapseToggle?: (collapsed: boolean) => void;\n  /** aria-label for the toggle button when the sidebar is collapsed\n   * @default 'Åpne sidemeny'\n   */\n  openSidebarAriaLabel?: string;\n  /** aria-label for the toggle button when the sidebar is expanded\n   * @default 'Lukk sidemeny'\n   */\n  closeSidebarAriaLabel?: string;\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    return (\n      <Flex\n        ref={ref}\n        as={as || defaultSectionElement}\n        direction=\"column\"\n        gap=\"s\"\n        {...rest}\n      >\n        {children}\n      </Flex>\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 CollapseToggle: React.FC<{\n  isCollapsed: boolean;\n  onToggle: () => void;\n  openLabel: string;\n  closeLabel: string;\n}> = ({ isCollapsed, onToggle, openLabel, closeLabel }) => (\n  <button\n    type=\"button\"\n    className=\"eds-layout-template-sidebar__collapse-toggle\"\n    onClick={onToggle}\n    aria-expanded={!isCollapsed}\n    aria-label={isCollapsed ? openLabel : closeLabel}\n  >\n    {isCollapsed ? <RightArrowIcon size={16} /> : <LeftArrowIcon size={16} />}\n  </button>\n);\n\nconst SidebarRoot = React.forwardRef(\n  <E extends React.ElementType = typeof defaultSidebarElement>(\n    {\n      children,\n      className,\n      style,\n      contrast = true,\n      collapsed,\n      onCollapseToggle,\n      openSidebarAriaLabel = 'Åpne sidemeny',\n      closeSidebarAriaLabel = 'Lukk sidemeny',\n      as,\n      ...rest\n    }: SidebarProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    const collapsible = collapsed !== undefined;\n    const isCollapsed = collapsed ?? false;\n\n    const sidebarClassNames = classNames(\n      'eds-layout-template-sidebar',\n      {\n        'eds-layout-template-sidebar--plain': !contrast,\n        'eds-layout-template-sidebar--collapsible': collapsible,\n        'eds-layout-template-sidebar--collapsed': collapsible && isCollapsed,\n      },\n      className,\n    );\n\n    const wrapperClassNames = classNames(\n      'eds-layout-template-sidebar-wrapper',\n      {\n        'eds-contrast': contrast,\n        'eds-layout-template-sidebar-wrapper--collapsible': collapsible,\n      },\n    );\n\n    if (!collapsible) {\n      return (\n        <Grid.Item className={wrapperClassNames} colSpan=\"1 / 2\">\n          <Flex\n            ref={ref}\n            as={as || defaultSidebarElement}\n            direction=\"column\"\n            gap=\"m\"\n            className={sidebarClassNames}\n            style={style}\n            {...rest}\n          >\n            {children}\n          </Flex>\n        </Grid.Item>\n      );\n    }\n\n    const collapsedStyle = isCollapsed\n      ? ({ ...style, '--eds-sidebar-width': '2rem' } as React.CSSProperties)\n      : style;\n\n    return (\n      <Grid.Item className={wrapperClassNames} colSpan=\"1 / 2\">\n        <Flex\n          ref={ref}\n          as={as || defaultSidebarElement}\n          direction=\"column\"\n          gap=\"m\"\n          className={sidebarClassNames}\n          style={collapsedStyle}\n          {...rest}\n        >\n          <div className=\"eds-layout-template-sidebar__content\">{children}</div>\n        </Flex>\n        {onCollapseToggle && (\n          <CollapseToggle\n            isCollapsed={isCollapsed}\n            onToggle={() => onCollapseToggle(!isCollapsed)}\n            openLabel={openSidebarAriaLabel}\n            closeLabel={closeSidebarAriaLabel}\n          />\n        )}\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":["jsx","Flex","RightArrowIcon","LeftArrowIcon","Grid"],"mappings":"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"}
+{"version":3,"file":"Sidebar.cjs","sources":["../../../../src/beta/templates/Sidebar.tsx"],"sourcesContent":["import React from 'react';\nimport type { PolymorphicComponentProps } from '@entur/utils';\nimport classNames from 'classnames';\nimport { LeftArrowIcon, RightArrowIcon } from '@entur/icons';\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  /** Controlled collapsed state. When provided, the sidebar becomes\n   * collapsible and a toggle button is rendered. */\n  collapsed?: boolean;\n  /** Callback when the collapse toggle is clicked */\n  onCollapseToggle?: (collapsed: boolean) => void;\n  /** aria-label for the toggle button when the sidebar is collapsed\n   * @default 'Åpne sidemeny'\n   */\n  openSidebarAriaLabel?: string;\n  /** aria-label for the toggle button when the sidebar is expanded\n   * @default 'Lukk sidemeny'\n   */\n  closeSidebarAriaLabel?: string;\n  className?: string;\n  style?: React.CSSProperties;\n  /** Content of the sidebar */\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\ntype SidebarRootComponent = (<\n  E extends React.ElementType = typeof defaultSidebarElement,\n>(\n  props: SidebarProps<E> & { ref?: React.Ref<Element> },\n) => React.ReactElement | null) & { displayName?: string };\n\ntype SidebarSectionComponent<\n  Default extends React.ElementType = typeof defaultSectionElement,\n> = (<E extends React.ElementType = Default>(\n  props: SidebarSectionProps<E> & { ref?: React.Ref<Element> },\n) => React.ReactElement | null) & { displayName?: string };\n\nconst SidebarLogo: SidebarSectionComponent = 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: SidebarSectionComponent = 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: SidebarSectionComponent = React.forwardRef(\n  <E extends React.ElementType = typeof defaultSectionElement>(\n    { children, as, ...rest }: SidebarSectionProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    return (\n      // @ts-expect-error generic prop forwarding through polymorphic Flex\n      <Flex\n        ref={ref}\n        as={as || defaultSectionElement}\n        direction=\"column\"\n        gap=\"s\"\n        {...rest}\n      >\n        {children}\n      </Flex>\n    );\n  },\n);\n\nconst SidebarNavigation: SidebarSectionComponent<\n  typeof defaultNavigationElement\n> = 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: SidebarSectionComponent<typeof defaultFooterElement> =\n  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(\n            'eds-layout-template-sidebar__footer',\n            className,\n          )}\n          {...rest}\n        >\n          {children}\n        </Element>\n      );\n    },\n  );\n\nconst CollapseToggle: React.FC<{\n  isCollapsed: boolean;\n  onToggle: () => void;\n  openLabel: string;\n  closeLabel: string;\n}> = ({ isCollapsed, onToggle, openLabel, closeLabel }) => (\n  <button\n    type=\"button\"\n    className=\"eds-layout-template-sidebar__collapse-toggle\"\n    onClick={onToggle}\n    aria-expanded={!isCollapsed}\n    aria-label={isCollapsed ? openLabel : closeLabel}\n  >\n    {isCollapsed ? <RightArrowIcon size={16} /> : <LeftArrowIcon size={16} />}\n  </button>\n);\n\nconst SidebarRoot: SidebarRootComponent = React.forwardRef(\n  <E extends React.ElementType = typeof defaultSidebarElement>(\n    {\n      children,\n      className,\n      style,\n      contrast = true,\n      collapsed,\n      onCollapseToggle,\n      openSidebarAriaLabel = 'Åpne sidemeny',\n      closeSidebarAriaLabel = 'Lukk sidemeny',\n      as,\n      ...rest\n    }: SidebarProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    const collapsible = collapsed !== undefined;\n    const isCollapsed = collapsed ?? false;\n\n    const sidebarClassNames = classNames(\n      'eds-layout-template-sidebar',\n      {\n        'eds-layout-template-sidebar--plain': !contrast,\n        'eds-layout-template-sidebar--collapsible': collapsible,\n        'eds-layout-template-sidebar--collapsed': collapsible && isCollapsed,\n      },\n      className,\n    );\n\n    const wrapperClassNames = classNames(\n      'eds-layout-template-sidebar-wrapper',\n      {\n        'eds-contrast': contrast,\n        'eds-layout-template-sidebar-wrapper--collapsible': collapsible,\n      },\n    );\n\n    if (!collapsible) {\n      return (\n        <Grid.Item className={wrapperClassNames} colSpan=\"1 / 2\">\n          {\n            // @ts-expect-error generic prop forwarding through polymorphic Flex\n            <Flex\n              ref={ref}\n              as={as || defaultSidebarElement}\n              direction=\"column\"\n              gap=\"m\"\n              className={sidebarClassNames}\n              style={style}\n              {...rest}\n            >\n              {children}\n            </Flex>\n          }\n        </Grid.Item>\n      );\n    }\n\n    const collapsedStyle = isCollapsed\n      ? ({ ...style, '--eds-sidebar-width': '2rem' } as React.CSSProperties)\n      : style;\n\n    return (\n      <Grid.Item className={wrapperClassNames} colSpan=\"1 / 2\">\n        {\n          // @ts-expect-error generic prop forwarding through polymorphic Flex\n          <Flex\n            ref={ref}\n            as={as || defaultSidebarElement}\n            direction=\"column\"\n            gap=\"m\"\n            className={sidebarClassNames}\n            style={collapsedStyle}\n            {...rest}\n          >\n            <div className=\"eds-layout-template-sidebar__content\">\n              {children}\n            </div>\n          </Flex>\n        }\n        {onCollapseToggle && (\n          <CollapseToggle\n            isCollapsed={isCollapsed}\n            onToggle={() => onCollapseToggle(!isCollapsed)}\n            openLabel={openSidebarAriaLabel}\n            closeLabel={closeSidebarAriaLabel}\n          />\n        )}\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":["jsx","Flex","RightArrowIcon","LeftArrowIcon","Grid","jsxs"],"mappings":"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"}

package/dist/beta/cjs/templates/portal/Portal.cjs

@@ -10,51 +10,60 @@ const defaultStatusBarElement = "div";
 const defaultPortalMainElement = "main";
 const PortalRoot = React.forwardRef(
   ({ children, className, style, as, ...rest }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      index.Grid,
-      {
-        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__ */ jsxRuntime.jsx(
+        index.Grid,
+        {
+          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__ */ jsxRuntime.jsx(
-      index.Grid.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__ */ jsxRuntime.jsx(
+        index.Grid.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__ */ jsxRuntime.jsx(
-      index.Grid.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__ */ jsxRuntime.jsx(
+        index.Grid.Item,
+        {
+          ref,
+          as: as || defaultPortalMainElement,
+          colSpan: "2 / -1",
+          className: classNames("eds-layout-template-portal__main", className),
+          style,
+          ...rest,
+          children
+        }
+      )
     );
   }
 );