@entur/layout 3.4.2 → 3.6.0

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

@@ -26,12 +26,12 @@ const Grid = React.forwardRef(
     ...rest
   }, ref) => {
     const Element = as || defaultElement;
-    const resolvedTemplateColumns = useResponsiveValue.useResponsiveValue(templateColumns) ?? "repeat(12, 1fr)";
+    const resolvedTemplateColumns = useResponsiveValue.useResponsiveValue(templateColumns);
     const resolvedTemplateRows = useResponsiveValue.useResponsiveValue(templateRows);
     const resolvedGap = useResponsiveValue.useResponsiveValue(gap);
     const resolvedRowGap = useResponsiveValue.useResponsiveValue(rowGap);
     const resolvedColumnGap = useResponsiveValue.useResponsiveValue(columnGap);
-    const resolvedAutoFlow = useResponsiveValue.useResponsiveValue(autoFlow) ?? "row";
+    const resolvedAutoFlow = useResponsiveValue.useResponsiveValue(autoFlow);
     const resolvedAlign = useResponsiveValue.useResponsiveValue(align);
     const resolvedJustify = useResponsiveValue.useResponsiveValue(justify);
     const resolvedAlignContent = useResponsiveValue.useResponsiveValue(alignContent);

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 =\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":["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,0BACJA,mBAAAA,mBAAmB,eAAe,KAAK;AACzC,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,KAAK;AACzD,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 '../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;;"}

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

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

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

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

package/dist/beta/cjs/index.cjs

@@ -1,18 +1,18 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 ;/* empty css             */
-const index = require("./Grid/index.cjs");
-const index$1 = require("./Flex/index.cjs");
+const index$1 = require("./Grid/index.cjs");
+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 FlexSpacer = require("./Flex/FlexSpacer.cjs");
-exports.Grid = index.GridComponent;
-exports.Flex = index$1.FlexComponent;
+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.useLayoutValues = useLayoutValues.useLayoutValues;
-exports.FlexSpacer = FlexSpacer.FlexSpacer;
 //# sourceMappingURL=index.cjs.map

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

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const classNames = require("classnames");
-const Contrast = require("../Contrast.cjs");
+const icons = require("@entur/icons");
 const index$1 = require("../Flex/index.cjs");
 const index = require("../Grid/index.cjs");
 ;/* empty css               */
@@ -25,8 +25,17 @@ const SidebarUser = React.forwardRef(
 );
 const SidebarData = React.forwardRef(
   ({ children, as, ...rest }, ref) => {
-    const Element = as || defaultSectionElement;
-    return /* @__PURE__ */ jsxRuntime.jsx(Element, { ref, ...rest, children });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      index$1.Flex,
+      {
+        ref,
+        as: as || defaultSectionElement,
+        direction: "column",
+        gap: "s",
+        ...rest,
+        children
+      }
+    );
   }
 );
 const SidebarNavigation = React.forwardRef(
@@ -60,35 +69,88 @@ const SidebarFooter = React.forwardRef(
     );
   }
 );
+const CollapseToggle = ({ isCollapsed, onToggle, openLabel, closeLabel }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "button",
+  {
+    type: "button",
+    className: "eds-layout-template-sidebar__collapse-toggle",
+    onClick: onToggle,
+    "aria-expanded": !isCollapsed,
+    "aria-label": isCollapsed ? openLabel : closeLabel,
+    children: isCollapsed ? /* @__PURE__ */ jsxRuntime.jsx(icons.RightArrowIcon, { size: 16 }) : /* @__PURE__ */ jsxRuntime.jsx(icons.LeftArrowIcon, { size: 16 })
+  }
+);
 const SidebarRoot = React.forwardRef(
   ({
     children,
     className,
     style,
     contrast = true,
+    collapsed,
+    onCollapseToggle,
+    openSidebarAriaLabel = "Åpne sidemeny",
+    closeSidebarAriaLabel = "Lukk sidemeny",
     as,
     ...rest
   }, ref) => {
-    const WrapperElement = contrast ? Contrast.Contrast : "div";
-    return /* @__PURE__ */ jsxRuntime.jsx(index.GridComponent.Item, { as: WrapperElement, colSpan: "1 / 2", children: /* @__PURE__ */ jsxRuntime.jsx(
-      index$1.FlexComponent,
+    const collapsible = collapsed !== void 0;
+    const isCollapsed = collapsed ?? false;
+    const sidebarClassNames = classNames(
+      "eds-layout-template-sidebar",
       {
-        ref,
-        as: as || defaultSidebarElement,
-        direction: "column",
-        gap: "m",
-        className: classNames(
-          "eds-layout-template-sidebar",
-          {
-            "eds-layout-template-sidebar--plain": !contrast
-          },
-          className
-        ),
-        style,
-        ...rest,
-        children
+        "eds-layout-template-sidebar--plain": !contrast,
+        "eds-layout-template-sidebar--collapsible": collapsible,
+        "eds-layout-template-sidebar--collapsed": collapsible && isCollapsed
+      },
+      className
+    );
+    const wrapperClassNames = classNames(
+      "eds-layout-template-sidebar-wrapper",
+      {
+        "eds-contrast": contrast,
+        "eds-layout-template-sidebar-wrapper--collapsible": collapsible
       }
-    ) });
+    );
+    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
+        }
+      ) });
+    }
+    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
+        }
+      )
+    ] });
   }
 );
 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 { 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\">\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":["jsx","Contrast","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,WACEA,2BAAAA,IAAC,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,WACEA,2BAAAA,IAAC,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,WACEA,2BAAAA,IAAC,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,WACEA,2BAAAA;AAAAA,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,WACEA,2BAAAA;AAAAA,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,WAAWC,SAAAA,WAAW;AAC7C,0CACGC,oBAAK,MAAL,EAAU,IAAI,gBAAgB,SAAQ,SACrC,UAAAF,2BAAAA;AAAAA,MAACG,QAAAA;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;;"}
+{"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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"}

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

@@ -11,11 +11,10 @@ const defaultPortalMainElement = "main";
 const PortalRoot = React.forwardRef(
   ({ children, className, style, as, ...rest }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
-      index.GridComponent,
+      index.Grid,
       {
         ref,
         as,
-        templateColumns: "var(--eds-sidebar-width, min-content) minmax(0, 1fr)",
         gap: "none",
         columnGap: "m",
         className: classNames("eds-layout-template-portal", className),
@@ -29,7 +28,7 @@ const PortalRoot = React.forwardRef(
 const PortalStatusBar = React.forwardRef(
   ({ children, className, as, ...rest }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
-      index.GridComponent.Item,
+      index.Grid.Item,
       {
         ref,
         as: as || defaultStatusBarElement,
@@ -46,7 +45,7 @@ const PortalStatusBar = React.forwardRef(
 const PortalMain = React.forwardRef(
   ({ children, className, style, as, ...rest }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
-      index.GridComponent.Item,
+      index.Grid.Item,
       {
         ref,
         as: as || defaultPortalMainElement,

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

@@ -1 +1 @@
-{"version":3,"file":"Portal.cjs","sources":["../../../../../src/beta/templates/portal/Portal.tsx"],"sourcesContent":["import React from 'react';\nimport type { PolymorphicComponentProps } from '@entur/utils';\nimport classNames from 'classnames';\nimport { Grid } from '../../Grid';\nimport { Sidebar, SidebarComponent } from '../Sidebar';\nimport './Portal.scss';\n\ntype PortalOwnProps = {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n};\n\ntype PortalStatusBarOwnProps = {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n};\n\ntype PortalMainOwnProps = {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n};\n\nconst defaultStatusBarElement = 'div';\nconst defaultPortalMainElement = 'main';\n\nexport type PortalProps<T extends React.ElementType = typeof Grid> =\n  PolymorphicComponentProps<T, PortalOwnProps>;\n\nexport type PortalStatusBarProps<\n  T extends React.ElementType = typeof defaultStatusBarElement,\n> = PolymorphicComponentProps<T, PortalStatusBarOwnProps>;\n\nexport type PortalMainProps<\n  T extends React.ElementType = typeof defaultPortalMainElement,\n> = PolymorphicComponentProps<T, PortalMainOwnProps>;\n\nconst PortalRoot = React.forwardRef(\n  <E extends React.ElementType = typeof Grid>(\n    { children, className, style, as, ...rest }: PortalProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    return (\n      <Grid\n        ref={ref}\n        as={as}\n        templateColumns=\"var(--eds-sidebar-width, min-content) minmax(0, 1fr)\"\n        gap=\"none\"\n        columnGap=\"m\"\n        className={classNames('eds-layout-template-portal', className)}\n        style={style}\n        {...rest}\n      >\n        {children}\n      </Grid>\n    );\n  },\n);\n\nconst PortalStatusBar = React.forwardRef(\n  <E extends React.ElementType = typeof defaultStatusBarElement>(\n    { children, className, as, ...rest }: PortalStatusBarProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    return (\n      <Grid.Item\n        ref={ref}\n        as={as || defaultStatusBarElement}\n        className={classNames(\n          'eds-layout-template-portal__status-bar',\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </Grid.Item>\n    );\n  },\n);\n\nconst PortalMain = React.forwardRef(\n  <E extends React.ElementType = typeof defaultPortalMainElement>(\n    { children, className, style, as, ...rest }: PortalMainProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    return (\n      <Grid.Item\n        ref={ref}\n        as={as || defaultPortalMainElement}\n        colSpan=\"2 / -1\"\n        className={classNames('eds-layout-template-portal__main', className)}\n        style={style}\n        {...rest}\n      >\n        {children}\n      </Grid.Item>\n    );\n  },\n);\n\nexport type PortalComponent = typeof PortalRoot & {\n  StatusBar: typeof PortalStatusBar;\n  Sidebar: SidebarComponent;\n  Main: typeof PortalMain;\n};\n\nexport const Portal: PortalComponent = Object.assign(PortalRoot, {\n  StatusBar: PortalStatusBar,\n  Sidebar,\n  Main: PortalMain,\n});\n\nPortal.displayName = 'Template.Portal';\nPortal.StatusBar.displayName = 'Template.Portal.StatusBar';\nPortal.Main.displayName = 'Template.Portal.Main';\n"],"names":["jsx","Grid","Sidebar"],"mappings":";;;;;;;;AAyBA,MAAM,0BAA0B;AAChC,MAAM,2BAA2B;AAajC,MAAM,aAAa,MAAM;AAAA,EACvB,CACE,EAAE,UAAU,WAAW,OAAO,IAAI,GAAG,KAAA,GACrC,QACG;AACH,WACEA,2BAAAA;AAAAA,MAACC,MAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,iBAAgB;AAAA,QAChB,KAAI;AAAA,QACJ,WAAU;AAAA,QACV,WAAW,WAAW,8BAA8B,SAAS;AAAA,QAC7D;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,MAAM,kBAAkB,MAAM;AAAA,EAC5B,CACE,EAAE,UAAU,WAAW,IAAI,GAAG,KAAA,GAC9B,QACG;AACH,WACED,2BAAAA;AAAAA,MAACC,MAAAA,cAAK;AAAA,MAAL;AAAA,QACC;AAAA,QACA,IAAI,MAAM;AAAA,QACV,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,MAAM,aAAa,MAAM;AAAA,EACvB,CACE,EAAE,UAAU,WAAW,OAAO,IAAI,GAAG,KAAA,GACrC,QACG;AACH,WACED,2BAAAA;AAAAA,MAACC,MAAAA,cAAK;AAAA,MAAL;AAAA,QACC;AAAA,QACA,IAAI,MAAM;AAAA,QACV,SAAQ;AAAA,QACR,WAAW,WAAW,oCAAoC,SAAS;AAAA,QACnE;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAQO,MAAM,SAA0B,OAAO,OAAO,YAAY;AAAA,EAC/D,WAAW;AAAA,EAAA,SACXC,QAAAA;AAAAA,EACA,MAAM;AACR,CAAC;AAED,OAAO,cAAc;AACrB,OAAO,UAAU,cAAc;AAC/B,OAAO,KAAK,cAAc;;"}
+{"version":3,"file":"Portal.cjs","sources":["../../../../../src/beta/templates/portal/Portal.tsx"],"sourcesContent":["import React from 'react';\nimport type { PolymorphicComponentProps } from '@entur/utils';\nimport classNames from 'classnames';\nimport { Grid } from '../../Grid';\nimport { Sidebar, SidebarComponent } from '../Sidebar';\nimport './Portal.scss';\n\ntype PortalOwnProps = {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n};\n\ntype PortalStatusBarOwnProps = {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n};\n\ntype PortalMainOwnProps = {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n};\n\nconst defaultStatusBarElement = 'div';\nconst defaultPortalMainElement = 'main';\n\nexport type PortalProps<T extends React.ElementType = typeof Grid> =\n  PolymorphicComponentProps<T, PortalOwnProps>;\n\nexport type PortalStatusBarProps<\n  T extends React.ElementType = typeof defaultStatusBarElement,\n> = PolymorphicComponentProps<T, PortalStatusBarOwnProps>;\n\nexport type PortalMainProps<\n  T extends React.ElementType = typeof defaultPortalMainElement,\n> = PolymorphicComponentProps<T, PortalMainOwnProps>;\n\nconst PortalRoot = React.forwardRef(\n  <E extends React.ElementType = typeof Grid>(\n    { children, className, style, as, ...rest }: PortalProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    return (\n      <Grid\n        ref={ref}\n        as={as}\n        gap=\"none\"\n        columnGap=\"m\"\n        className={classNames('eds-layout-template-portal', className)}\n        style={style}\n        {...rest}\n      >\n        {children}\n      </Grid>\n    );\n  },\n);\n\nconst PortalStatusBar = React.forwardRef(\n  <E extends React.ElementType = typeof defaultStatusBarElement>(\n    { children, className, as, ...rest }: PortalStatusBarProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    return (\n      <Grid.Item\n        ref={ref}\n        as={as || defaultStatusBarElement}\n        className={classNames(\n          'eds-layout-template-portal__status-bar',\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </Grid.Item>\n    );\n  },\n);\n\nconst PortalMain = React.forwardRef(\n  <E extends React.ElementType = typeof defaultPortalMainElement>(\n    { children, className, style, as, ...rest }: PortalMainProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    return (\n      <Grid.Item\n        ref={ref}\n        as={as || defaultPortalMainElement}\n        colSpan=\"2 / -1\"\n        className={classNames('eds-layout-template-portal__main', className)}\n        style={style}\n        {...rest}\n      >\n        {children}\n      </Grid.Item>\n    );\n  },\n);\n\nexport type PortalComponent = typeof PortalRoot & {\n  StatusBar: typeof PortalStatusBar;\n  Sidebar: SidebarComponent;\n  Main: typeof PortalMain;\n};\n\nexport const Portal: PortalComponent = Object.assign(PortalRoot, {\n  StatusBar: PortalStatusBar,\n  Sidebar,\n  Main: PortalMain,\n});\n\nPortal.displayName = 'Template.Portal';\nPortal.StatusBar.displayName = 'Template.Portal.StatusBar';\nPortal.Main.displayName = 'Template.Portal.Main';\n"],"names":["jsx","Grid","Sidebar"],"mappings":";;;;;;;;AAyBA,MAAM,0BAA0B;AAChC,MAAM,2BAA2B;AAajC,MAAM,aAAa,MAAM;AAAA,EACvB,CACE,EAAE,UAAU,WAAW,OAAO,IAAI,GAAG,KAAA,GACrC,QACG;AACH,WACEA,2BAAAA;AAAAA,MAACC,MAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,KAAI;AAAA,QACJ,WAAU;AAAA,QACV,WAAW,WAAW,8BAA8B,SAAS;AAAA,QAC7D;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,MAAM,kBAAkB,MAAM;AAAA,EAC5B,CACE,EAAE,UAAU,WAAW,IAAI,GAAG,KAAA,GAC9B,QACG;AACH,WACED,2BAAAA;AAAAA,MAACC,MAAAA,KAAK;AAAA,MAAL;AAAA,QACC;AAAA,QACA,IAAI,MAAM;AAAA,QACV,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,MAAM,aAAa,MAAM;AAAA,EACvB,CACE,EAAE,UAAU,WAAW,OAAO,IAAI,GAAG,KAAA,GACrC,QACG;AACH,WACED,2BAAAA;AAAAA,MAACC,MAAAA,KAAK;AAAA,MAAL;AAAA,QACC;AAAA,QACA,IAAI,MAAM;AAAA,QACV,SAAQ;AAAA,QACR,WAAW,WAAW,oCAAoC,SAAS;AAAA,QACnE;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAQO,MAAM,SAA0B,OAAO,OAAO,YAAY;AAAA,EAC/D,WAAW;AAAA,EAAA,SACXC,QAAAA;AAAAA,EACA,MAAM;AACR,CAAC;AAED,OAAO,cAAc;AACrB,OAAO,UAAU,cAAc;AAC/B,OAAO,KAAK,cAAc;;"}

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

@@ -24,12 +24,12 @@ const Grid = React.forwardRef(
     ...rest
   }, ref) => {
     const Element = as || defaultElement;
-    const resolvedTemplateColumns = useResponsiveValue(templateColumns) ?? "repeat(12, 1fr)";
+    const resolvedTemplateColumns = useResponsiveValue(templateColumns);
     const resolvedTemplateRows = useResponsiveValue(templateRows);
     const resolvedGap = useResponsiveValue(gap);
     const resolvedRowGap = useResponsiveValue(rowGap);
     const resolvedColumnGap = useResponsiveValue(columnGap);
-    const resolvedAutoFlow = useResponsiveValue(autoFlow) ?? "row";
+    const resolvedAutoFlow = useResponsiveValue(autoFlow);
     const resolvedAlign = useResponsiveValue(align);
     const resolvedJustify = useResponsiveValue(justify);
     const resolvedAlignContent = useResponsiveValue(alignContent);

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 = 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;"}
+{"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 = 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":[],"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,0BAA0B,mBAAmB,eAAe;AAClE,UAAM,uBAAuB,mBAAmB,YAAY;AAC5D,UAAM,cAAc,mBAAmB,GAAG;AAC1C,UAAM,iBAAiB,mBAAmB,MAAM;AAChD,UAAM,oBAAoB,mBAAmB,SAAS;AACtD,UAAM,mBAAmB,mBAAmB,QAAQ;AACpD,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/LayoutWrapper/LayoutWrapper.mjs.map

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

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

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

package/dist/beta/esm/index.mjs

@@ -1,15 +1,15 @@
 /* empty css            */
-import { GridComponent } from "./Grid/index.mjs";
-import { FlexComponent } from "./Flex/index.mjs";
+import { Grid } from "./Grid/index.mjs";
+import { Flex } from "./Flex/index.mjs";
 import { Template } from "./templates/index.mjs";
+import { FlexSpacer } from "./Flex/FlexSpacer.mjs";
 import { GridItem } from "./Grid/GridItem.mjs";
 import { LayoutWrapper } from "./LayoutWrapper/LayoutWrapper.mjs";
 import { useLayoutValues } from "./LayoutWrapper/useLayoutValues.mjs";
-import { FlexSpacer } from "./Flex/FlexSpacer.mjs";
 export {
-  FlexComponent as Flex,
+  Flex,
   FlexSpacer,
-  GridComponent as Grid,
+  Grid,
   GridItem,
   LayoutWrapper,
   Template,

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

@@ -1,9 +1,9 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } 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";
+import { RightArrowIcon, LeftArrowIcon } from "@entur/icons";
+import { Flex as FlexComponent } from "../Flex/index.mjs";
+import { Grid as GridComponent } from "../Grid/index.mjs";
 /* empty css              */
 const defaultSidebarElement = "aside";
 const defaultSectionElement = "div";
@@ -23,8 +23,17 @@ const SidebarUser = React.forwardRef(
 );
 const SidebarData = React.forwardRef(
   ({ children, as, ...rest }, ref) => {
-    const Element = as || defaultSectionElement;
-    return /* @__PURE__ */ jsx(Element, { ref, ...rest, children });
+    return /* @__PURE__ */ jsx(
+      FlexComponent,
+      {
+        ref,
+        as: as || defaultSectionElement,
+        direction: "column",
+        gap: "s",
+        ...rest,
+        children
+      }
+    );
   }
 );
 const SidebarNavigation = React.forwardRef(
@@ -58,35 +67,88 @@ const SidebarFooter = React.forwardRef(
     );
   }
 );
+const CollapseToggle = ({ isCollapsed, onToggle, openLabel, closeLabel }) => /* @__PURE__ */ jsx(
+  "button",
+  {
+    type: "button",
+    className: "eds-layout-template-sidebar__collapse-toggle",
+    onClick: onToggle,
+    "aria-expanded": !isCollapsed,
+    "aria-label": isCollapsed ? openLabel : closeLabel,
+    children: isCollapsed ? /* @__PURE__ */ jsx(RightArrowIcon, { size: 16 }) : /* @__PURE__ */ jsx(LeftArrowIcon, { size: 16 })
+  }
+);
 const SidebarRoot = React.forwardRef(
   ({
     children,
     className,
     style,
     contrast = true,
+    collapsed,
+    onCollapseToggle,
+    openSidebarAriaLabel = "Åpne sidemeny",
+    closeSidebarAriaLabel = "Lukk sidemeny",
     as,
     ...rest
   }, ref) => {
-    const WrapperElement = contrast ? Contrast : "div";
-    return /* @__PURE__ */ jsx(GridComponent.Item, { as: WrapperElement, colSpan: "1 / 2", children: /* @__PURE__ */ jsx(
-      FlexComponent,
+    const collapsible = collapsed !== void 0;
+    const isCollapsed = collapsed ?? false;
+    const sidebarClassNames = classNames(
+      "eds-layout-template-sidebar",
       {
-        ref,
-        as: as || defaultSidebarElement,
-        direction: "column",
-        gap: "m",
-        className: classNames(
-          "eds-layout-template-sidebar",
-          {
-            "eds-layout-template-sidebar--plain": !contrast
-          },
-          className
-        ),
-        style,
-        ...rest,
-        children
+        "eds-layout-template-sidebar--plain": !contrast,
+        "eds-layout-template-sidebar--collapsible": collapsible,
+        "eds-layout-template-sidebar--collapsed": collapsible && isCollapsed
+      },
+      className
+    );
+    const wrapperClassNames = classNames(
+      "eds-layout-template-sidebar-wrapper",
+      {
+        "eds-contrast": contrast,
+        "eds-layout-template-sidebar-wrapper--collapsible": collapsible
       }
-    ) });
+    );
+    if (!collapsible) {
+      return /* @__PURE__ */ jsx(GridComponent.Item, { className: wrapperClassNames, colSpan: "1 / 2", children: /* @__PURE__ */ jsx(
+        FlexComponent,
+        {
+          ref,
+          as: as || defaultSidebarElement,
+          direction: "column",
+          gap: "m",
+          className: sidebarClassNames,
+          style,
+          ...rest,
+          children
+        }
+      ) });
+    }
+    const collapsedStyle = isCollapsed ? { ...style, "--eds-sidebar-width": "2rem" } : style;
+    return /* @__PURE__ */ jsxs(GridComponent.Item, { className: wrapperClassNames, colSpan: "1 / 2", children: [
+      /* @__PURE__ */ jsx(
+        FlexComponent,
+        {
+          ref,
+          as: as || defaultSidebarElement,
+          direction: "column",
+          gap: "m",
+          className: sidebarClassNames,
+          style: collapsedStyle,
+          ...rest,
+          children: /* @__PURE__ */ jsx("div", { className: "eds-layout-template-sidebar__content", children })
+        }
+      ),
+      onCollapseToggle && /* @__PURE__ */ jsx(
+        CollapseToggle,
+        {
+          isCollapsed,
+          onToggle: () => onCollapseToggle(!isCollapsed),
+          openLabel: openSidebarAriaLabel,
+          closeLabel: closeSidebarAriaLabel
+        }
+      )
+    ] });
   }
 );
 const Sidebar = Object.assign(SidebarRoot, {

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 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\">\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,+BACGA,cAAK,MAAL,EAAU,IAAI,gBAAgB,SAAQ,SACrC,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;"}
+{"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 { 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":["Flex","Grid"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
 import classNames from "classnames";
-import { GridComponent } from "../../Grid/index.mjs";
+import { Grid as GridComponent } from "../../Grid/index.mjs";
 import { Sidebar } from "../Sidebar.mjs";
 /* empty css             */
 const defaultStatusBarElement = "div";
@@ -13,7 +13,6 @@ const PortalRoot = React.forwardRef(
       {
         ref,
         as,
-        templateColumns: "var(--eds-sidebar-width, min-content) minmax(0, 1fr)",
         gap: "none",
         columnGap: "m",
         className: classNames("eds-layout-template-portal", className),

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

@@ -1 +1 @@
-{"version":3,"file":"Portal.mjs","sources":["../../../../../src/beta/templates/portal/Portal.tsx"],"sourcesContent":["import React from 'react';\nimport type { PolymorphicComponentProps } from '@entur/utils';\nimport classNames from 'classnames';\nimport { Grid } from '../../Grid';\nimport { Sidebar, SidebarComponent } from '../Sidebar';\nimport './Portal.scss';\n\ntype PortalOwnProps = {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n};\n\ntype PortalStatusBarOwnProps = {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n};\n\ntype PortalMainOwnProps = {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n};\n\nconst defaultStatusBarElement = 'div';\nconst defaultPortalMainElement = 'main';\n\nexport type PortalProps<T extends React.ElementType = typeof Grid> =\n  PolymorphicComponentProps<T, PortalOwnProps>;\n\nexport type PortalStatusBarProps<\n  T extends React.ElementType = typeof defaultStatusBarElement,\n> = PolymorphicComponentProps<T, PortalStatusBarOwnProps>;\n\nexport type PortalMainProps<\n  T extends React.ElementType = typeof defaultPortalMainElement,\n> = PolymorphicComponentProps<T, PortalMainOwnProps>;\n\nconst PortalRoot = React.forwardRef(\n  <E extends React.ElementType = typeof Grid>(\n    { children, className, style, as, ...rest }: PortalProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    return (\n      <Grid\n        ref={ref}\n        as={as}\n        templateColumns=\"var(--eds-sidebar-width, min-content) minmax(0, 1fr)\"\n        gap=\"none\"\n        columnGap=\"m\"\n        className={classNames('eds-layout-template-portal', className)}\n        style={style}\n        {...rest}\n      >\n        {children}\n      </Grid>\n    );\n  },\n);\n\nconst PortalStatusBar = React.forwardRef(\n  <E extends React.ElementType = typeof defaultStatusBarElement>(\n    { children, className, as, ...rest }: PortalStatusBarProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    return (\n      <Grid.Item\n        ref={ref}\n        as={as || defaultStatusBarElement}\n        className={classNames(\n          'eds-layout-template-portal__status-bar',\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </Grid.Item>\n    );\n  },\n);\n\nconst PortalMain = React.forwardRef(\n  <E extends React.ElementType = typeof defaultPortalMainElement>(\n    { children, className, style, as, ...rest }: PortalMainProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    return (\n      <Grid.Item\n        ref={ref}\n        as={as || defaultPortalMainElement}\n        colSpan=\"2 / -1\"\n        className={classNames('eds-layout-template-portal__main', className)}\n        style={style}\n        {...rest}\n      >\n        {children}\n      </Grid.Item>\n    );\n  },\n);\n\nexport type PortalComponent = typeof PortalRoot & {\n  StatusBar: typeof PortalStatusBar;\n  Sidebar: SidebarComponent;\n  Main: typeof PortalMain;\n};\n\nexport const Portal: PortalComponent = Object.assign(PortalRoot, {\n  StatusBar: PortalStatusBar,\n  Sidebar,\n  Main: PortalMain,\n});\n\nPortal.displayName = 'Template.Portal';\nPortal.StatusBar.displayName = 'Template.Portal.StatusBar';\nPortal.Main.displayName = 'Template.Portal.Main';\n"],"names":["Grid"],"mappings":";;;;;;AAyBA,MAAM,0BAA0B;AAChC,MAAM,2BAA2B;AAajC,MAAM,aAAa,MAAM;AAAA,EACvB,CACE,EAAE,UAAU,WAAW,OAAO,IAAI,GAAG,KAAA,GACrC,QACG;AACH,WACE;AAAA,MAACA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,iBAAgB;AAAA,QAChB,KAAI;AAAA,QACJ,WAAU;AAAA,QACV,WAAW,WAAW,8BAA8B,SAAS;AAAA,QAC7D;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,MAAM,kBAAkB,MAAM;AAAA,EAC5B,CACE,EAAE,UAAU,WAAW,IAAI,GAAG,KAAA,GAC9B,QACG;AACH,WACE;AAAA,MAACA,cAAK;AAAA,MAAL;AAAA,QACC;AAAA,QACA,IAAI,MAAM;AAAA,QACV,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,MAAM,aAAa,MAAM;AAAA,EACvB,CACE,EAAE,UAAU,WAAW,OAAO,IAAI,GAAG,KAAA,GACrC,QACG;AACH,WACE;AAAA,MAACA,cAAK;AAAA,MAAL;AAAA,QACC;AAAA,QACA,IAAI,MAAM;AAAA,QACV,SAAQ;AAAA,QACR,WAAW,WAAW,oCAAoC,SAAS;AAAA,QACnE;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAQO,MAAM,SAA0B,OAAO,OAAO,YAAY;AAAA,EAC/D,WAAW;AAAA,EACX;AAAA,EACA,MAAM;AACR,CAAC;AAED,OAAO,cAAc;AACrB,OAAO,UAAU,cAAc;AAC/B,OAAO,KAAK,cAAc;"}
+{"version":3,"file":"Portal.mjs","sources":["../../../../../src/beta/templates/portal/Portal.tsx"],"sourcesContent":["import React from 'react';\nimport type { PolymorphicComponentProps } from '@entur/utils';\nimport classNames from 'classnames';\nimport { Grid } from '../../Grid';\nimport { Sidebar, SidebarComponent } from '../Sidebar';\nimport './Portal.scss';\n\ntype PortalOwnProps = {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n};\n\ntype PortalStatusBarOwnProps = {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n};\n\ntype PortalMainOwnProps = {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n};\n\nconst defaultStatusBarElement = 'div';\nconst defaultPortalMainElement = 'main';\n\nexport type PortalProps<T extends React.ElementType = typeof Grid> =\n  PolymorphicComponentProps<T, PortalOwnProps>;\n\nexport type PortalStatusBarProps<\n  T extends React.ElementType = typeof defaultStatusBarElement,\n> = PolymorphicComponentProps<T, PortalStatusBarOwnProps>;\n\nexport type PortalMainProps<\n  T extends React.ElementType = typeof defaultPortalMainElement,\n> = PolymorphicComponentProps<T, PortalMainOwnProps>;\n\nconst PortalRoot = React.forwardRef(\n  <E extends React.ElementType = typeof Grid>(\n    { children, className, style, as, ...rest }: PortalProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    return (\n      <Grid\n        ref={ref}\n        as={as}\n        gap=\"none\"\n        columnGap=\"m\"\n        className={classNames('eds-layout-template-portal', className)}\n        style={style}\n        {...rest}\n      >\n        {children}\n      </Grid>\n    );\n  },\n);\n\nconst PortalStatusBar = React.forwardRef(\n  <E extends React.ElementType = typeof defaultStatusBarElement>(\n    { children, className, as, ...rest }: PortalStatusBarProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    return (\n      <Grid.Item\n        ref={ref}\n        as={as || defaultStatusBarElement}\n        className={classNames(\n          'eds-layout-template-portal__status-bar',\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </Grid.Item>\n    );\n  },\n);\n\nconst PortalMain = React.forwardRef(\n  <E extends React.ElementType = typeof defaultPortalMainElement>(\n    { children, className, style, as, ...rest }: PortalMainProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    return (\n      <Grid.Item\n        ref={ref}\n        as={as || defaultPortalMainElement}\n        colSpan=\"2 / -1\"\n        className={classNames('eds-layout-template-portal__main', className)}\n        style={style}\n        {...rest}\n      >\n        {children}\n      </Grid.Item>\n    );\n  },\n);\n\nexport type PortalComponent = typeof PortalRoot & {\n  StatusBar: typeof PortalStatusBar;\n  Sidebar: SidebarComponent;\n  Main: typeof PortalMain;\n};\n\nexport const Portal: PortalComponent = Object.assign(PortalRoot, {\n  StatusBar: PortalStatusBar,\n  Sidebar,\n  Main: PortalMain,\n});\n\nPortal.displayName = 'Template.Portal';\nPortal.StatusBar.displayName = 'Template.Portal.StatusBar';\nPortal.Main.displayName = 'Template.Portal.Main';\n"],"names":["Grid"],"mappings":";;;;;;AAyBA,MAAM,0BAA0B;AAChC,MAAM,2BAA2B;AAajC,MAAM,aAAa,MAAM;AAAA,EACvB,CACE,EAAE,UAAU,WAAW,OAAO,IAAI,GAAG,KAAA,GACrC,QACG;AACH,WACE;AAAA,MAACA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,KAAI;AAAA,QACJ,WAAU;AAAA,QACV,WAAW,WAAW,8BAA8B,SAAS;AAAA,QAC7D;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,MAAM,kBAAkB,MAAM;AAAA,EAC5B,CACE,EAAE,UAAU,WAAW,IAAI,GAAG,KAAA,GAC9B,QACG;AACH,WACE;AAAA,MAACA,cAAK;AAAA,MAAL;AAAA,QACC;AAAA,QACA,IAAI,MAAM;AAAA,QACV,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,MAAM,aAAa,MAAM;AAAA,EACvB,CACE,EAAE,UAAU,WAAW,OAAO,IAAI,GAAG,KAAA,GACrC,QACG;AACH,WACE;AAAA,MAACA,cAAK;AAAA,MAAL;AAAA,QACC;AAAA,QACA,IAAI,MAAM;AAAA,QACV,SAAQ;AAAA,QACR,WAAW,WAAW,oCAAoC,SAAS;AAAA,QACnE;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAQO,MAAM,SAA0B,OAAO,OAAO,YAAY;AAAA,EAC/D,WAAW;AAAA,EACX;AAAA,EACA,MAAM;AACR,CAAC;AAED,OAAO,cAAc;AACrB,OAAO,UAAU,cAAc;AAC/B,OAAO,KAAK,cAAc;"}

package/dist/beta/styles/index.css

@@ -163,43 +163,170 @@
   -webkit-flex:1 1 0%;
      -moz-box-flex:1;
           flex:1 1 0%;
-}.eds-layout-template-sidebar{
-  padding:1rem;
-  padding:var(--eds-sidebar-padding, 1rem);
+}.eds-layout-template-sidebar-wrapper{
+  height:100%;
+  min-height:0;
+}
+.eds-layout-template-sidebar-wrapper--collapsible{
+  position:relative;
+}
+
+.eds-layout-template-sidebar{
+  padding:2rem;
+  padding:var(--eds-sidebar-padding, 2rem);
   height:100%;
+  max-height:100dvh;
+  max-height:var(--eds-viewport-height, 100dvh);
   width:20rem;
   width:var(--eds-sidebar-width, 20rem);
+  position:-webkit-sticky;
+  position:sticky;
+  top:0;
+}
+.eds-layout-template-sidebar--collapsible{
+  overflow-x:hidden;
+  contain:inline-size;
+  -webkit-transition:width ease-in-out 0.2s;
+  -o-transition:width ease-in-out 0.2s;
+  -moz-transition:width ease-in-out 0.2s;
+  transition:width ease-in-out 0.2s;
+}
+.eds-layout-template-sidebar--collapsed{
+  padding:2rem 0;
+  padding:var(--eds-sidebar-padding, 2rem) 0;
 }
-
 .eds-layout-template-sidebar--plain{
   background-color:var(--components-menu-sidenavigation-standard-background);
 }
-
 .eds-layout-template-sidebar__navigation{
   -webkit-box-flex:1;
   -webkit-flex:1 1 auto;
      -moz-box-flex:1;
           flex:1 1 auto;
-  margin-left:-webkit-calc(-1 * 1rem);
-  margin-left:-moz-calc(-1 * 1rem);
-  margin-left:calc(-1 * 1rem);
-  margin-left:-webkit-calc(-1 * var(--eds-sidebar-padding, 1rem));
-  margin-left:-moz-calc(-1 * var(--eds-sidebar-padding, 1rem));
-  margin-left:calc(-1 * var(--eds-sidebar-padding, 1rem));
-  margin-right:-webkit-calc(-1 * 1rem);
-  margin-right:-moz-calc(-1 * 1rem);
-  margin-right:calc(-1 * 1rem);
-  margin-right:-webkit-calc(-1 * var(--eds-sidebar-padding, 1rem));
-  margin-right:-moz-calc(-1 * var(--eds-sidebar-padding, 1rem));
-  margin-right:calc(-1 * var(--eds-sidebar-padding, 1rem));
+  min-height:0;
+  overflow-y:auto;
+  scrollbar-width:thin;
+  scrollbar-color:rgba(255, 255, 255, 0.3) transparent;
+  margin-left:-webkit-calc(-1 * 2rem);
+  margin-left:-moz-calc(-1 * 2rem);
+  margin-left:calc(-1 * 2rem);
+  margin-left:-webkit-calc(-1 * var(--eds-sidebar-padding, 2rem));
+  margin-left:-moz-calc(-1 * var(--eds-sidebar-padding, 2rem));
+  margin-left:calc(-1 * var(--eds-sidebar-padding, 2rem));
+  margin-right:-webkit-calc(-1 * 2rem);
+  margin-right:-moz-calc(-1 * 2rem);
+  margin-right:calc(-1 * 2rem);
+  margin-right:-webkit-calc(-1 * var(--eds-sidebar-padding, 2rem));
+  margin-right:-moz-calc(-1 * var(--eds-sidebar-padding, 2rem));
+  margin-right:calc(-1 * var(--eds-sidebar-padding, 2rem));
+}
+.eds-layout-template-sidebar--plain .eds-layout-template-sidebar__navigation{
+  scrollbar-color:rgba(0, 0, 0, 0.2) transparent;
 }
-
 .eds-layout-template-sidebar__footer{
   margin-top:auto;
+}
+.eds-layout-template-sidebar__content{
+  display:-webkit-box;
+  display:-webkit-flex;
+  display:-moz-box;
+  display:flex;
+  -webkit-box-orient:vertical;
+  -webkit-box-direction:normal;
+  -webkit-flex-direction:column;
+     -moz-box-orient:vertical;
+     -moz-box-direction:normal;
+          flex-direction:column;
+  gap:var(--m);
+  -webkit-box-flex:1;
+  -webkit-flex:1 1 0;
+     -moz-box-flex:1;
+          flex:1 1 0;
+  min-height:0;
+  min-width:-webkit-calc(20rem - 2 * 2rem);
+  min-width:-moz-calc(20rem - 2 * 2rem);
+  min-width:calc(20rem - 2 * 2rem);
+  min-width:-webkit-calc(var(--eds-sidebar-width, 20rem) - 2 * var(--eds-sidebar-padding, 2rem));
+  min-width:-moz-calc(var(--eds-sidebar-width, 20rem) - 2 * var(--eds-sidebar-padding, 2rem));
+  min-width:calc(var(--eds-sidebar-width, 20rem) - 2 * var(--eds-sidebar-padding, 2rem));
+  opacity:1;
+  -webkit-transition:opacity ease-in 0.1s 0.2s;
+  -o-transition:opacity ease-in 0.1s 0.2s;
+  -moz-transition:opacity ease-in 0.1s 0.2s;
+  transition:opacity ease-in 0.1s 0.2s;
+}
+.eds-layout-template-sidebar--collapsed .eds-layout-template-sidebar__content{
+  opacity:0;
+  visibility:hidden;
+  -webkit-transition:opacity ease-out 0.1s, visibility 0s 0.1s;
+  -o-transition:opacity ease-out 0.1s, visibility 0s 0.1s;
+  -moz-transition:opacity ease-out 0.1s, visibility 0s 0.1s;
+  transition:opacity ease-out 0.1s, visibility 0s 0.1s;
+}
+.eds-layout-template-sidebar__collapse-toggle{
+  position:absolute;
+  right:-1rem;
+  bottom:2rem;
+  height:2rem;
+  width:2rem;
+  -webkit-border-radius:50%;
+     -moz-border-radius:50%;
+          border-radius:50%;
+  border:none;
+  cursor:pointer;
+  background-color:var(--basecolors-frame-default);
+  color:var(--text-dark);
+  -webkit-box-shadow:0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
+     -moz-box-shadow:0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
+          box-shadow:0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
+  display:-webkit-box;
+  display:-webkit-flex;
+  display:-moz-box;
+  display:flex;
+  -webkit-box-align:center;
+  -webkit-align-items:center;
+     -moz-box-align:center;
+          align-items:center;
+  -webkit-box-pack:center;
+  -webkit-justify-content:center;
+     -moz-box-pack:center;
+          justify-content:center;
+  z-index:10;
+  padding:0;
+}
+.eds-contrast .eds-layout-template-sidebar__collapse-toggle{
+  background-color:var(--basecolors-frame-contrastalt);
+  color:var(--basecolors-text-light);
+}
+.eds-layout-template-sidebar__collapse-toggle svg{
+  margin:0;
+}
+.eds-layout-template-sidebar__collapse-toggle:focus-visible{
+  outline:2px solid #181c56;
+  outline-color:var(--basecolors-stroke-focus-standard);
+  outline-offset:0.125rem;
+}
+.eds-contrast .eds-layout-template-sidebar__collapse-toggle:focus-visible{
+  outline-color:var(--basecolors-stroke-focus-contrast);
 }.eds-layout-template-portal{
-  min-height:100vh;
+  --grid-template-columns:var(--eds-sidebar-width, min-content) minmax(0, 1fr);
+  min-height:0;
+  max-height:100dvh;
+  max-height:var(--eds-viewport-height, 100dvh);
+  height:100dvh;
+  height:var(--eds-viewport-height, 100dvh);
   width:100%;
 }
+.eds-layout-template-portal:has(.eds-layout-template-sidebar--collapsible){
+  -webkit-transition:grid-template-columns ease-in-out 0.2s;
+  -o-transition:grid-template-columns ease-in-out 0.2s;
+  -moz-transition:grid-template-columns ease-in-out 0.2s;
+  transition:grid-template-columns ease-in-out 0.2s;
+  transition:grid-template-columns ease-in-out 0.2s, -ms-grid-columns ease-in-out 0.2s;
+}
+.eds-layout-template-portal:has(.eds-layout-template-sidebar--collapsed){
+  --grid-template-columns:2rem minmax(0, 1fr);
+}
 .eds-layout-template-portal:has(> .eds-layout-template-portal__status-bar){
   --grid-template-rows:auto 1fr;
 }

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

@@ -3,6 +3,19 @@ import { PolymorphicComponentProps } from '@entur/utils';
 type SidebarOwnProps = {
     /** Toggle contrast styling for the sidebar */
     contrast?: boolean;
+    /** Controlled collapsed state. When provided, the sidebar becomes
+     * collapsible and a toggle button is rendered. */
+    collapsed?: boolean;
+    /** Callback when the collapse toggle is clicked */
+    onCollapseToggle?: (collapsed: boolean) => void;
+    /** aria-label for the toggle button when the sidebar is collapsed
+     * @default 'Åpne sidemeny'
+     */
+    openSidebarAriaLabel?: string;
+    /** aria-label for the toggle button when the sidebar is expanded
+     * @default 'Lukk sidemeny'
+     */
+    closeSidebarAriaLabel?: string;
     className?: string;
     style?: React.CSSProperties;
     children?: React.ReactNode;

package/dist/layout.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.cjs.js","sources":["../src/Contrast.tsx","../src/BaseCard.tsx","../src/NavigationCard.tsx","../src/MediaCard.tsx","../src/Badge/Badge.tsx","../src/Badge/BulletBadge.tsx","../src/Badge/NotificationBadge.tsx","../src/Badge/StatusBadge.tsx","../src/Tag.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type ContrastBaseProps = {\n  /** Ekstra klassenavn */\n  className?: string;\n};\n\nexport type ContrastProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, ContrastBaseProps>;\n\nexport type ContrastComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: ContrastProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'div';\n\nexport const Contrast: ContrastComponent = React.forwardRef(function Contrast<\n  T extends React.ElementType = typeof defaultElement,\n>(\n  { className, as, ...rest }: ContrastProps<T>,\n  ref: PolymorphicRef<T>,\n): JSX.Element {\n  const Element: React.ElementType = as || defaultElement;\n  return (\n    <ContrastContext.Provider value={true}>\n      <Element\n        className={classNames('eds-contrast', className)}\n        ref={ref}\n        {...rest}\n      />\n    </ContrastContext.Provider>\n  );\n});\n\nexport const ContrastContext = React.createContext<boolean>(false);\n\nexport const useContrast: () => boolean = () =>\n  React.useContext(ContrastContext);\n","import React from 'react';\nimport classNames from 'classnames';\nimport { PolymorphicComponentProps } from '@entur/utils';\nimport './BaseCard.scss';\n\nexport type BaseCardOwnProps = {\n  /** HTML-elementet eller React-komponenten som lager Card\n   * @default \"div\"\n   */\n  as?: 'div' | React.ElementType;\n  /** Ekstra klassenavn */\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport type BaseCardProps<T extends React.ElementType = typeof defaultElement> =\n  PolymorphicComponentProps<T, BaseCardOwnProps>;\n\nconst defaultElement = 'div';\n\nexport const BaseCard = <E extends React.ElementType = typeof defaultElement>({\n  children,\n  className,\n  as,\n  ...rest\n}: BaseCardProps<E>): JSX.Element => {\n  const Element: React.ElementType = as || defaultElement;\n  const classList = classNames('eds-base-card', className);\n  return (\n    <Element className={classList} {...rest}>\n      {children}\n    </Element>\n  );\n};\n","import React from 'react';\nimport { Paragraph } from '@entur/typography';\nimport classNames from 'classnames';\nimport { Heading3 } from '@entur/typography';\nimport { BaseCard } from './BaseCard';\nimport './NavigationCard.scss';\nimport { PolymorphicComponentProps } from '@entur/utils';\n\nexport type NavigationCardOwnProps = {\n  /** HTML-elementet eller React-komponenten som lager NavigationCard\n   * @default 'a'\n   */\n  as?: 'a' | 'button' | React.ElementType;\n  /** Tittelen/teksten som står i CardBox */\n  title: string;\n  /** Valgfritt ikon som står over tittelen */\n  titleIcon?: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Lager en mer kompakt NavigationCard, uten ikon og beskrivende tekst\n   * @default false\n   */\n  compact?: boolean;\n  /** Beskrivelse under tittel, om ikke \"compact\" er valgt */\n  children?: React.ReactNode;\n  /** @deprecated eksternlenke ikon er ikke lenger støttet i NavigationCard  */\n  externalLink?: boolean;\n};\n\nexport type NavigationCardProps<\n  T extends React.ElementType = typeof defaultElement,\n> = PolymorphicComponentProps<T, NavigationCardOwnProps>;\n\nconst defaultElement = 'a';\n\nexport const NavigationCard = <\n  E extends React.ElementType = typeof defaultElement,\n>({\n  title,\n  children,\n  titleIcon,\n  compact = false,\n  className,\n  as,\n  ...rest\n}: NavigationCardProps<E>): JSX.Element => {\n  const Element: React.ElementType = as || defaultElement;\n  const classList = classNames('eds-navigation-card', className, {\n    'eds-base-card--red-line': compact,\n    'eds-navigation-card--compact': compact,\n  });\n  return (\n    <BaseCard as={Element} className={classList} {...rest}>\n      <div className=\"eds-navigation-card-header\">\n        <div className=\"eds-navigation-card-header__content\">\n          {titleIcon && (\n            <div\n              className=\"eds-navigation-card-header__title-icon\"\n              aria-hidden=\"true\"\n            >\n              {titleIcon}\n            </div>\n          )}\n          <span className=\"eds-navigation-card-header__title\">\n            <Heading3 as=\"span\">{title}</Heading3>\n          </span>\n        </div>\n        {!compact && (\n          <div className=\"eds-navigation-card-header__highlight\"></div>\n        )}\n      </div>\n      {!compact && (\n        <>\n          <Paragraph>{children}</Paragraph>\n        </>\n      )}\n    </BaseCard>\n  );\n};\n","import React, { CSSProperties } from 'react';\nimport { Paragraph, Label, Heading3 } from '@entur/typography';\nimport classNames from 'classnames';\nimport { BaseCard } from './BaseCard';\nimport { ForwardIcon } from '@entur/icons';\nimport './MediaCard.scss';\nimport { ConditionalWrapper, PolymorphicComponentProps } from '@entur/utils';\n\nexport type MediaCardOwnProps = {\n  /** HTML-elementet eller React-komponenten som lager bunnen (under media) av MediaCard\n   * @default 'a'\n   */\n  as?: 'a' | 'button' | React.ElementType;\n  /** Tittelen/teksten som står i CardBox */\n  title: string;\n  /** Teksten under tittelen i MediaCard */\n  description?: React.ReactNode;\n  /** Kategori (eller lignende) som vises over tittelen */\n  category?: string;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Det du skulle ønske som media (f.eks. bilder eller video) */\n  children?: React.ReactNode;\n  /** Styling som sendes til komponenten */\n  style?: CSSProperties;\n  /** Hvilken heading som brukes for tittelen.\n   *  Blir kun satt hvis description også er satt.\n   * @default 'h2'\n   */\n  headingLevel?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  /** Skjul pil-ikonet nederst til høyre\n   * @default false\n   */\n  hideArrow?: boolean;\n  /** Om MediaCard skal vises horisontalt eller vertikalt\n   * @default 'vertical'\n   */\n  orientation?: 'horizontal' | 'vertical';\n  /** Props som sendes til wrapper-elementet i stedet for lenke-elementet */\n  wrapperProps?: React.HTMLAttributes<HTMLElement>;\n  /** @deprecated Denne prop-en har ikke lenger en funksjon.\n   *  Hvis du trenger å legge til props på wrapper-elementet, bruk 'wrapperProps'-prop-en\n   */\n  wholeCardAsElement?: boolean;\n};\n\nexport type MediaCardProps<\n  T extends React.ElementType = typeof defaultElement,\n> = PolymorphicComponentProps<T, MediaCardOwnProps>;\n\nconst defaultElement = 'a';\n\nexport const MediaCard = <E extends React.ElementType = typeof defaultElement>({\n  title,\n  description,\n  children,\n  className,\n  category,\n  style,\n  as,\n  headingLevel = 'h2',\n  wholeCardAsElement: whole,\n  hideArrow,\n  wrapperProps,\n  orientation,\n  ...rest\n}: MediaCardProps<E>): JSX.Element => {\n  const Element: React.ElementType = as || defaultElement;\n  const Heading = Heading3;\n\n  const _wrapperProps = whole\n    ? { ...wrapperProps, ...rest }\n    : { ...wrapperProps };\n  const classList = classNames('eds-base-card, eds-media-card', className, {\n    'eds-media-card--horizontal': orientation === 'horizontal',\n  });\n\n  return (\n    <BaseCard className={classList} style={style} {..._wrapperProps}>\n      <div className=\"eds-media-card__media\">{children}</div>\n      <div className=\"eds-media-card__text\">\n        {category && (\n          <Label className=\"eds-media-card__text__category\">{category}</Label>\n        )}\n        {/* we only want a heading wrapper when we also have description text */}\n        <ConditionalWrapper\n          condition={description !== undefined}\n          wrapper={(children: React.ReactNode) => (\n            <Heading as={headingLevel} className=\"eds-media-card__text__title\">\n              {children}\n            </Heading>\n          )}\n        >\n          <Element\n            tabIndex={0}\n            className=\"eds-media-card__text__title-link\"\n            {...rest}\n          >\n            {title}\n          </Element>\n        </ConditionalWrapper>\n        {description !== undefined && <Paragraph>{description}</Paragraph>}\n        {!hideArrow && (\n          <ForwardIcon\n            className=\"eds-media-card__arrow-icon\"\n            aria-hidden=\"true\"\n          />\n        )}\n      </div>\n    </BaseCard>\n  );\n};\n\nexport default MediaCard;\n","import React from 'react';\nimport classNames from 'classnames';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { VariantType } from '@entur/utils';\n\nimport './Badge.scss';\n\n/** @deprecated use variant=\"information\" instead */\nconst info = 'info';\n/** @deprecated use variant=\"negative\" instead */\nconst danger = 'danger';\n\nexport type BadgeTypes = 'status' | 'bullet' | 'notification';\n\nexport type BadgeOwnProps = {\n  /** Elementet som wrapper badgen\n   * @default \"span\"\n   */\n  as?: 'span' | React.ElementType;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Elementet som badge vil legges relativt til */\n  children: React.ReactNode;\n  /** Hvilken type badge man vil ha */\n  variant: 'primary' | 'neutral' | VariantType | typeof danger | typeof info;\n  /** Om 0 skal vises\n   * @default false\n   */\n  showZero?: boolean;\n  /** Hva som er høyeste tallet før det legges på \"+\"\n   * @default ++\n   */\n  max?: number;\n  type?: BadgeTypes;\n  /** @deprecated Bruk `hide` i stedet */\n  invisible?: boolean;\n  /** Skjul badge */\n  hide?: boolean;\n};\n\nexport type BadgeProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, BadgeOwnProps>;\n\nexport type BadgeComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: BadgeProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'span';\n\nexport const Badge: BadgeComponent = React.forwardRef(\n  <T extends React.ElementType = typeof defaultElement>(\n    {\n      children,\n      className,\n      max = 99,\n      variant,\n      showZero = false,\n      invisible: invisibleProp = false,\n      hide: hideProp = false,\n      as,\n      type = 'status',\n      ...rest\n    }: BadgeProps<T>,\n    ref: PolymorphicRef<T>,\n  ) => {\n    const Element: React.ElementType = as || defaultElement;\n\n    const computedHide =\n      hideProp ||\n      invisibleProp ||\n      (children === 0 && !showZero) ||\n      children == null;\n\n    let displayValue;\n    if (typeof children === 'number') {\n      displayValue = children > max ? `${max}+` : children;\n    } else {\n      displayValue = children;\n    }\n\n    const classList = classNames(\n      className,\n      'eds-badge',\n      {\n        'eds-badge--hide': computedHide,\n        'eds-badge--show-zero': showZero,\n      },\n      `eds-badge--variant-${variant}`,\n      `eds-badge--type-${type}`,\n    );\n\n    return (\n      <Element className={classList} ref={ref} {...rest}>\n        {displayValue}\n      </Element>\n    );\n  },\n);\n","import React from 'react';\nimport { Badge } from './Badge';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { VariantType } from '@entur/utils';\n\n/** @deprecated use variant=\"information\" instead */\nconst info = 'info';\n/** @deprecated use variant=\"negative\" instead */\nconst danger = 'danger';\n\ntype BulletBadgeBaseProps = {\n  /** Elementet som wrapper badgen\n   * @default \"span\"\n   */\n  as?: string | React.ElementType;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Elementet som badge vil legges relativt til */\n  children: React.ReactNode;\n  /** Hvilken type badge man vil ha */\n  variant: 'primary' | 'neutral' | VariantType | typeof danger | typeof info;\n  /** Skjul badge */\n  hide?: boolean;\n};\n\nexport type BulletBadgeProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, BulletBadgeBaseProps>;\n\nexport type BulletBadgeComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: BulletBadgeProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'span';\n\nexport const BulletBadge: BulletBadgeComponent = React.forwardRef(\n  <T extends React.ElementType = typeof defaultElement>(\n    props: BulletBadgeProps<T>,\n    ref: PolymorphicRef<T>,\n  ) => {\n    const Element = props.as || defaultElement;\n    // @ts-expect-error type error due to props not being BadgeOwnProps\n    return <Badge as={Element} {...props} ref={ref} type=\"bullet\" />;\n  },\n);\n","import React from 'react';\nimport { Badge } from './Badge';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { VariantType } from '@entur/utils';\n\n/** @deprecated use variant=\"information\" instead */\nconst info = 'info';\n/** @deprecated use variant=\"negative\" instead */\nconst danger = 'danger';\n\ntype NotificationBadgeBaseProps = {\n  /** Elementet som wrapper badgen\n   * @default \"span\"\n   */\n  as?: string | React.ElementType;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Elementet som badge vil legges relativt til */\n  children: React.ReactNode;\n  /** Hvilken type badge man vil ha */\n  variant: 'primary' | 'neutral' | VariantType | typeof danger | typeof info;\n  /** Om 0 skal vises\n   * @default false\n   */\n  showZero?: boolean;\n  /** Hva som er høyeste tallet før det legges på \"+\"\n   * @default ++\n   */\n  max?: number;\n  /** Skjul badge */\n  hide?: boolean;\n};\n\nexport type NotificationBadgeProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, NotificationBadgeBaseProps>;\n\nexport type NotificationBadgeComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: NotificationBadgeProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'span';\n\nexport const NotificationBadge: NotificationBadgeComponent = React.forwardRef(\n  <T extends React.ElementType = typeof defaultElement>(\n    props: NotificationBadgeProps<T>,\n    ref: PolymorphicRef<T>,\n  ) => {\n    const Element = props.as || defaultElement;\n    // @ts-expect-error type error due to props not being BadgeOwnProps\n    return <Badge as={Element} {...props} ref={ref} type=\"notification\" />;\n  },\n);\n","import React from 'react';\nimport { Badge } from './Badge';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { VariantType } from '@entur/utils';\n\n/** @deprecated use variant=\"information\" instead */\nconst info = 'info';\n/** @deprecated use variant=\"negative\" instead */\nconst danger = 'danger';\n\ntype StatusBadgeBaseProps = {\n  /** Elementet som wrapper badgen\n   * @default \"span\"\n   */\n  as?: string | React.ElementType;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Elementet som badge vil legges relativt til */\n  children: React.ReactNode;\n  /** Hvilken type badge man vil ha */\n  variant: 'primary' | 'neutral' | VariantType | typeof danger | typeof info;\n  /** Skjul badge */\n  hide?: boolean;\n};\n\nexport type StatusBadgeProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, StatusBadgeBaseProps>;\n\nexport type StatusBadgeComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: StatusBadgeProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'span';\n\nexport const StatusBadge: StatusBadgeComponent = React.forwardRef(\n  <T extends React.ElementType = typeof defaultElement>(\n    props: StatusBadgeProps<T>,\n    ref: PolymorphicRef<T>,\n  ) => {\n    const Element = props.as || defaultElement;\n    // @ts-expect-error type error due to props not being BadgeOwnProps\n    return <Badge as={Element} {...props} ref={ref} type=\"status\" />;\n  },\n);\n","import React from 'react';\nimport classNames from 'classnames';\nimport './Tag.scss';\nimport { PolymorphicComponentProps } from '@entur/utils';\n\nexport type TagOwnProps = {\n  /** HTML-elementet eller React-komponenten som rendres\n   * @default 'div'\n   */\n  as?: string | React.ElementType;\n  /** Ekstra klassenavn */\n  className?: string;\n  /**Mindre og mer kompakt Tag, til f.eks. tabellbruk\n   * @default false\n   */\n  compact?: boolean;\n  children: React.ReactNode;\n};\n\nexport type TagProps<T extends React.ElementType = typeof defaultElement> =\n  PolymorphicComponentProps<T, TagOwnProps>;\n\nconst defaultElement = 'div';\n\nexport const Tag = <E extends React.ElementType = typeof defaultElement>({\n  className,\n  children,\n  compact,\n  as,\n  ...rest\n}: TagProps<E>): JSX.Element => {\n  const Element: React.ElementType = as || defaultElement;\n  const childrenArray = React.Children.toArray(children);\n  const hasLeadingIcon =\n    childrenArray.length > 1 && typeof childrenArray[0] !== 'string';\n  const hasTrailingIcon =\n    childrenArray.length > 1 &&\n    typeof childrenArray[childrenArray.length - 1] !== 'string';\n\n  return (\n    <Element\n      className={classNames('eds-tag', className, {\n        'eds-tag--leading-icon': hasLeadingIcon,\n        'eds-tag--trailing-icon': hasTrailingIcon,\n        'eds-tag--compact': compact,\n      })}\n      {...rest}\n    >\n      {children}\n    </Element>\n  );\n};\n","import './styles.scss';\nimport { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('layout', 'typography');\n\nexport * from './Contrast';\nexport * from './NavigationCard';\nexport * from './BaseCard';\nexport * from './MediaCard';\nexport * from './Badge/Badge';\nexport * from './Badge/BulletBadge';\nexport * from './Badge/NotificationBadge';\nexport * from './Badge/StatusBadge';\nexport * from './Tag';\n"],"names":["defaultElement","Contrast","jsx","jsxs","Heading3","Fragment","Paragraph","Label","ConditionalWrapper","children","ForwardIcon","warnAboutMissingStyles"],"mappings":"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"}
+{"version":3,"file":"layout.cjs.js","sources":["../src/Contrast.tsx","../src/BaseCard.tsx","../src/NavigationCard.tsx","../src/MediaCard.tsx","../src/Badge/Badge.tsx","../src/Badge/BulletBadge.tsx","../src/Badge/NotificationBadge.tsx","../src/Badge/StatusBadge.tsx","../src/Tag.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type ContrastBaseProps = {\n  /** Ekstra klassenavn */\n  className?: string;\n};\n\nexport type ContrastProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, ContrastBaseProps>;\n\nexport type ContrastComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: ContrastProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'div';\n\nexport const Contrast: ContrastComponent = React.forwardRef(function Contrast<\n  T extends React.ElementType = typeof defaultElement,\n>(\n  { className, as, ...rest }: ContrastProps<T>,\n  ref: PolymorphicRef<T>,\n): JSX.Element {\n  const Element: React.ElementType = as || defaultElement;\n  return (\n    <ContrastContext.Provider value={true}>\n      <Element\n        className={classNames('eds-contrast', className)}\n        ref={ref}\n        {...rest}\n      />\n    </ContrastContext.Provider>\n  );\n});\n\nexport const ContrastContext = React.createContext<boolean>(false);\n\nexport const useContrast: () => boolean = () =>\n  React.useContext(ContrastContext);\n","import React from 'react';\nimport classNames from 'classnames';\nimport { PolymorphicComponentProps } from '@entur/utils';\nimport './BaseCard.scss';\n\nexport type BaseCardOwnProps = {\n  /** HTML-elementet eller React-komponenten som lager Card\n   * @default \"div\"\n   */\n  as?: 'div' | React.ElementType;\n  /** Ekstra klassenavn */\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport type BaseCardProps<T extends React.ElementType = typeof defaultElement> =\n  PolymorphicComponentProps<T, BaseCardOwnProps>;\n\nconst defaultElement = 'div';\n\nexport const BaseCard = <E extends React.ElementType = typeof defaultElement>({\n  children,\n  className,\n  as,\n  ...rest\n}: BaseCardProps<E>): JSX.Element => {\n  const Element: React.ElementType = as || defaultElement;\n  const classList = classNames('eds-base-card', className);\n  return (\n    <Element className={classList} {...rest}>\n      {children}\n    </Element>\n  );\n};\n","import React from 'react';\nimport { Paragraph } from '@entur/typography';\nimport classNames from 'classnames';\nimport { Heading3 } from '@entur/typography';\nimport { BaseCard } from './BaseCard';\nimport './NavigationCard.scss';\nimport { PolymorphicComponentProps } from '@entur/utils';\n\nexport type NavigationCardOwnProps = {\n  /** HTML-elementet eller React-komponenten som lager NavigationCard\n   * @default 'a'\n   */\n  as?: 'a' | 'button' | React.ElementType;\n  /** Tittelen/teksten som står i CardBox */\n  title: string;\n  /** Valgfritt ikon som står over tittelen */\n  titleIcon?: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Lager en mer kompakt NavigationCard, uten ikon og beskrivende tekst\n   * @default false\n   */\n  compact?: boolean;\n  /** Beskrivelse under tittel, om ikke \"compact\" er valgt */\n  children?: React.ReactNode;\n  /** @deprecated eksternlenke ikon er ikke lenger støttet i NavigationCard  */\n  externalLink?: boolean;\n};\n\nexport type NavigationCardProps<\n  T extends React.ElementType = typeof defaultElement,\n> = PolymorphicComponentProps<T, NavigationCardOwnProps>;\n\nconst defaultElement = 'a';\n\nexport const NavigationCard = <\n  E extends React.ElementType = typeof defaultElement,\n>({\n  title,\n  children,\n  titleIcon,\n  compact = false,\n  className,\n  as,\n  ...rest\n}: NavigationCardProps<E>): JSX.Element => {\n  const Element: React.ElementType = as || defaultElement;\n  const classList = classNames('eds-navigation-card', className, {\n    'eds-base-card--red-line': compact,\n    'eds-navigation-card--compact': compact,\n  });\n  return (\n    <BaseCard as={Element} className={classList} {...rest}>\n      <div className=\"eds-navigation-card-header\">\n        <div className=\"eds-navigation-card-header__content\">\n          {titleIcon && (\n            <div\n              className=\"eds-navigation-card-header__title-icon\"\n              aria-hidden=\"true\"\n            >\n              {titleIcon}\n            </div>\n          )}\n          <span className=\"eds-navigation-card-header__title\">\n            <Heading3 as=\"span\">{title}</Heading3>\n          </span>\n        </div>\n        {!compact && (\n          <div className=\"eds-navigation-card-header__highlight\"></div>\n        )}\n      </div>\n      {!compact && (\n        <>\n          <Paragraph>{children}</Paragraph>\n        </>\n      )}\n    </BaseCard>\n  );\n};\n","import React, { CSSProperties } from 'react';\nimport { Heading3, Label, Paragraph } from '@entur/typography';\nimport classNames from 'classnames';\nimport { BaseCard } from './BaseCard';\nimport { ForwardIcon } from '@entur/icons';\nimport './MediaCard.scss';\nimport { ConditionalWrapper, PolymorphicComponentProps } from '@entur/utils';\n\nexport type MediaCardOwnProps = {\n  /** HTML-elementet eller React-komponenten som lager bunnen (under media) av MediaCard\n   * @default 'a'\n   */\n  as?: 'a' | 'button' | React.ElementType;\n  /** Tittelen/teksten som står i CardBox */\n  title: string;\n  /** Teksten under tittelen i MediaCard */\n  description?: React.ReactNode;\n  /** Kategori (eller lignende) som vises over tittelen */\n  category?: string;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Det du skulle ønske som media (f.eks. bilder eller video) */\n  children?: React.ReactNode;\n  /** Styling som sendes til komponenten */\n  style?: CSSProperties;\n  /** Hvilken heading som brukes for tittelen.\n   *  Blir kun satt hvis description også er satt.\n   * @default 'h2'\n   */\n  headingLevel?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  /** Skjul pil-ikonet nederst til høyre\n   * @default false\n   */\n  hideArrow?: boolean;\n  /** Om MediaCard skal vises horisontalt eller vertikalt\n   * @default 'vertical'\n   */\n  orientation?: 'horizontal' | 'vertical';\n  /** Props som sendes til wrapper-elementet i stedet for lenke-elementet */\n  wrapperProps?: React.HTMLAttributes<HTMLElement>;\n  /** @deprecated Denne prop-en har ikke lenger en funksjon.\n   *  Hvis du trenger å legge til props på wrapper-elementet, bruk 'wrapperProps'-prop-en\n   */\n  wholeCardAsElement?: boolean;\n};\n\nexport type MediaCardProps<\n  T extends React.ElementType = typeof defaultElement,\n> = PolymorphicComponentProps<T, MediaCardOwnProps>;\n\nconst defaultElement = 'a';\n\nexport const MediaCard = <E extends React.ElementType = typeof defaultElement>({\n  title,\n  description,\n  children,\n  className,\n  category,\n  style,\n  as,\n  headingLevel = 'h2',\n  wholeCardAsElement: whole,\n  hideArrow,\n  wrapperProps,\n  orientation,\n  ...rest\n}: MediaCardProps<E>): JSX.Element => {\n  const Element: React.ElementType = as || defaultElement;\n  const Heading = Heading3;\n\n  const _wrapperProps = whole\n    ? { ...wrapperProps, ...rest }\n    : { ...wrapperProps };\n  const classList = classNames('eds-base-card, eds-media-card', className, {\n    'eds-media-card--horizontal': orientation === 'horizontal',\n  });\n\n  return (\n    <BaseCard className={classList} style={style} {..._wrapperProps}>\n      <div className=\"eds-media-card__media\">{children}</div>\n      <div className=\"eds-media-card__text\">\n        {category && (\n          <Label className=\"eds-media-card__text__category\">{category}</Label>\n        )}\n        {/* we only want a heading wrapper when we also have description text */}\n        <ConditionalWrapper\n          condition={description !== undefined}\n          wrapper={(children: React.ReactNode) => (\n            <Heading as={headingLevel} className=\"eds-media-card__text__title\">\n              {children}\n            </Heading>\n          )}\n        >\n          <Element\n            tabIndex={0}\n            className=\"eds-media-card__text__title-link\"\n            {...rest}\n          >\n            {title}\n          </Element>\n        </ConditionalWrapper>\n        {description !== undefined && <Paragraph>{description}</Paragraph>}\n        {!hideArrow && (\n          <ForwardIcon\n            className=\"eds-media-card__arrow-icon\"\n            aria-hidden=\"true\"\n          />\n        )}\n      </div>\n    </BaseCard>\n  );\n};\n\nexport default MediaCard;\n","import React from 'react';\nimport classNames from 'classnames';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { VariantType } from '@entur/utils';\n\nimport './Badge.scss';\n\n/** @deprecated use variant=\"information\" instead */\nconst info = 'info';\n/** @deprecated use variant=\"negative\" instead */\nconst danger = 'danger';\n\nexport type BadgeTypes = 'status' | 'bullet' | 'notification';\n\nexport type BadgeOwnProps = {\n  /** Elementet som wrapper badgen\n   * @default \"span\"\n   */\n  as?: 'span' | React.ElementType;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Elementet som badge vil legges relativt til */\n  children: React.ReactNode;\n  /** Hvilken type badge man vil ha */\n  variant: 'primary' | 'neutral' | VariantType | typeof danger | typeof info;\n  /** Om 0 skal vises\n   * @default false\n   */\n  showZero?: boolean;\n  /** Hva som er høyeste tallet før det legges på \"+\"\n   * @default ++\n   */\n  max?: number;\n  type?: BadgeTypes;\n  /** @deprecated Bruk `hide` i stedet */\n  invisible?: boolean;\n  /** Skjul badge */\n  hide?: boolean;\n};\n\nexport type BadgeProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, BadgeOwnProps>;\n\nexport type BadgeComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: BadgeProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'span';\n\nexport const Badge: BadgeComponent = React.forwardRef(\n  <T extends React.ElementType = typeof defaultElement>(\n    {\n      children,\n      className,\n      max = 99,\n      variant,\n      showZero = false,\n      invisible: invisibleProp = false,\n      hide: hideProp = false,\n      as,\n      type = 'status',\n      ...rest\n    }: BadgeProps<T>,\n    ref: PolymorphicRef<T>,\n  ) => {\n    const Element: React.ElementType = as || defaultElement;\n\n    const computedHide =\n      hideProp ||\n      invisibleProp ||\n      (children === 0 && !showZero) ||\n      children == null;\n\n    let displayValue;\n    if (typeof children === 'number') {\n      displayValue = children > max ? `${max}+` : children;\n    } else {\n      displayValue = children;\n    }\n\n    const classList = classNames(\n      className,\n      'eds-badge',\n      {\n        'eds-badge--hide': computedHide,\n        'eds-badge--show-zero': showZero,\n      },\n      `eds-badge--variant-${variant}`,\n      `eds-badge--type-${type}`,\n    );\n\n    return (\n      <Element className={classList} ref={ref} {...rest}>\n        {displayValue}\n      </Element>\n    );\n  },\n);\n","import React from 'react';\nimport { Badge } from './Badge';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { VariantType } from '@entur/utils';\n\n/** @deprecated use variant=\"information\" instead */\nconst info = 'info';\n/** @deprecated use variant=\"negative\" instead */\nconst danger = 'danger';\n\ntype BulletBadgeBaseProps = {\n  /** Elementet som wrapper badgen\n   * @default \"span\"\n   */\n  as?: string | React.ElementType;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Elementet som badge vil legges relativt til */\n  children: React.ReactNode;\n  /** Hvilken type badge man vil ha */\n  variant: 'primary' | 'neutral' | VariantType | typeof danger | typeof info;\n  /** Skjul badge */\n  hide?: boolean;\n};\n\nexport type BulletBadgeProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, BulletBadgeBaseProps>;\n\nexport type BulletBadgeComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: BulletBadgeProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'span';\n\nexport const BulletBadge: BulletBadgeComponent = React.forwardRef(\n  <T extends React.ElementType = typeof defaultElement>(\n    props: BulletBadgeProps<T>,\n    ref: PolymorphicRef<T>,\n  ) => {\n    const Element = props.as || defaultElement;\n    // @ts-expect-error type error due to props not being BadgeOwnProps\n    return <Badge as={Element} {...props} ref={ref} type=\"bullet\" />;\n  },\n);\n","import React from 'react';\nimport { Badge } from './Badge';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { VariantType } from '@entur/utils';\n\n/** @deprecated use variant=\"information\" instead */\nconst info = 'info';\n/** @deprecated use variant=\"negative\" instead */\nconst danger = 'danger';\n\ntype NotificationBadgeBaseProps = {\n  /** Elementet som wrapper badgen\n   * @default \"span\"\n   */\n  as?: string | React.ElementType;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Elementet som badge vil legges relativt til */\n  children: React.ReactNode;\n  /** Hvilken type badge man vil ha */\n  variant: 'primary' | 'neutral' | VariantType | typeof danger | typeof info;\n  /** Om 0 skal vises\n   * @default false\n   */\n  showZero?: boolean;\n  /** Hva som er høyeste tallet før det legges på \"+\"\n   * @default ++\n   */\n  max?: number;\n  /** Skjul badge */\n  hide?: boolean;\n};\n\nexport type NotificationBadgeProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, NotificationBadgeBaseProps>;\n\nexport type NotificationBadgeComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: NotificationBadgeProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'span';\n\nexport const NotificationBadge: NotificationBadgeComponent = React.forwardRef(\n  <T extends React.ElementType = typeof defaultElement>(\n    props: NotificationBadgeProps<T>,\n    ref: PolymorphicRef<T>,\n  ) => {\n    const Element = props.as || defaultElement;\n    // @ts-expect-error type error due to props not being BadgeOwnProps\n    return <Badge as={Element} {...props} ref={ref} type=\"notification\" />;\n  },\n);\n","import React from 'react';\nimport { Badge } from './Badge';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { VariantType } from '@entur/utils';\n\n/** @deprecated use variant=\"information\" instead */\nconst info = 'info';\n/** @deprecated use variant=\"negative\" instead */\nconst danger = 'danger';\n\ntype StatusBadgeBaseProps = {\n  /** Elementet som wrapper badgen\n   * @default \"span\"\n   */\n  as?: string | React.ElementType;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Elementet som badge vil legges relativt til */\n  children: React.ReactNode;\n  /** Hvilken type badge man vil ha */\n  variant: 'primary' | 'neutral' | VariantType | typeof danger | typeof info;\n  /** Skjul badge */\n  hide?: boolean;\n};\n\nexport type StatusBadgeProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, StatusBadgeBaseProps>;\n\nexport type StatusBadgeComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: StatusBadgeProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'span';\n\nexport const StatusBadge: StatusBadgeComponent = React.forwardRef(\n  <T extends React.ElementType = typeof defaultElement>(\n    props: StatusBadgeProps<T>,\n    ref: PolymorphicRef<T>,\n  ) => {\n    const Element = props.as || defaultElement;\n    // @ts-expect-error type error due to props not being BadgeOwnProps\n    return <Badge as={Element} {...props} ref={ref} type=\"status\" />;\n  },\n);\n","import React from 'react';\nimport classNames from 'classnames';\nimport './Tag.scss';\nimport { PolymorphicComponentProps } from '@entur/utils';\n\nexport type TagOwnProps = {\n  /** HTML-elementet eller React-komponenten som rendres\n   * @default 'div'\n   */\n  as?: string | React.ElementType;\n  /** Ekstra klassenavn */\n  className?: string;\n  /**Mindre og mer kompakt Tag, til f.eks. tabellbruk\n   * @default false\n   */\n  compact?: boolean;\n  children: React.ReactNode;\n};\n\nexport type TagProps<T extends React.ElementType = typeof defaultElement> =\n  PolymorphicComponentProps<T, TagOwnProps>;\n\nconst defaultElement = 'div';\n\nexport const Tag = <E extends React.ElementType = typeof defaultElement>({\n  className,\n  children,\n  compact,\n  as,\n  ...rest\n}: TagProps<E>): JSX.Element => {\n  const Element: React.ElementType = as || defaultElement;\n  const childrenArray = React.Children.toArray(children);\n  const hasLeadingIcon =\n    childrenArray.length > 1 && typeof childrenArray[0] !== 'string';\n  const hasTrailingIcon =\n    childrenArray.length > 1 &&\n    typeof childrenArray[childrenArray.length - 1] !== 'string';\n\n  return (\n    <Element\n      className={classNames('eds-tag', className, {\n        'eds-tag--leading-icon': hasLeadingIcon,\n        'eds-tag--trailing-icon': hasTrailingIcon,\n        'eds-tag--compact': compact,\n      })}\n      {...rest}\n    >\n      {children}\n    </Element>\n  );\n};\n","import './styles.scss';\nimport { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('layout', 'typography');\n\nexport * from './Contrast';\nexport * from './NavigationCard';\nexport * from './BaseCard';\nexport * from './MediaCard';\nexport * from './Badge/Badge';\nexport * from './Badge/BulletBadge';\nexport * from './Badge/NotificationBadge';\nexport * from './Badge/StatusBadge';\nexport * from './Tag';\n"],"names":["defaultElement","Contrast","jsx","jsxs","Heading3","Fragment","Paragraph","Label","ConditionalWrapper","children","ForwardIcon","warnAboutMissingStyles"],"mappings":"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"}

package/dist/layout.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.esm.js","sources":["../src/Contrast.tsx","../src/BaseCard.tsx","../src/NavigationCard.tsx","../src/MediaCard.tsx","../src/Badge/Badge.tsx","../src/Badge/BulletBadge.tsx","../src/Badge/NotificationBadge.tsx","../src/Badge/StatusBadge.tsx","../src/Tag.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type ContrastBaseProps = {\n  /** Ekstra klassenavn */\n  className?: string;\n};\n\nexport type ContrastProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, ContrastBaseProps>;\n\nexport type ContrastComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: ContrastProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'div';\n\nexport const Contrast: ContrastComponent = React.forwardRef(function Contrast<\n  T extends React.ElementType = typeof defaultElement,\n>(\n  { className, as, ...rest }: ContrastProps<T>,\n  ref: PolymorphicRef<T>,\n): JSX.Element {\n  const Element: React.ElementType = as || defaultElement;\n  return (\n    <ContrastContext.Provider value={true}>\n      <Element\n        className={classNames('eds-contrast', className)}\n        ref={ref}\n        {...rest}\n      />\n    </ContrastContext.Provider>\n  );\n});\n\nexport const ContrastContext = React.createContext<boolean>(false);\n\nexport const useContrast: () => boolean = () =>\n  React.useContext(ContrastContext);\n","import React from 'react';\nimport classNames from 'classnames';\nimport { PolymorphicComponentProps } from '@entur/utils';\nimport './BaseCard.scss';\n\nexport type BaseCardOwnProps = {\n  /** HTML-elementet eller React-komponenten som lager Card\n   * @default \"div\"\n   */\n  as?: 'div' | React.ElementType;\n  /** Ekstra klassenavn */\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport type BaseCardProps<T extends React.ElementType = typeof defaultElement> =\n  PolymorphicComponentProps<T, BaseCardOwnProps>;\n\nconst defaultElement = 'div';\n\nexport const BaseCard = <E extends React.ElementType = typeof defaultElement>({\n  children,\n  className,\n  as,\n  ...rest\n}: BaseCardProps<E>): JSX.Element => {\n  const Element: React.ElementType = as || defaultElement;\n  const classList = classNames('eds-base-card', className);\n  return (\n    <Element className={classList} {...rest}>\n      {children}\n    </Element>\n  );\n};\n","import React from 'react';\nimport { Paragraph } from '@entur/typography';\nimport classNames from 'classnames';\nimport { Heading3 } from '@entur/typography';\nimport { BaseCard } from './BaseCard';\nimport './NavigationCard.scss';\nimport { PolymorphicComponentProps } from '@entur/utils';\n\nexport type NavigationCardOwnProps = {\n  /** HTML-elementet eller React-komponenten som lager NavigationCard\n   * @default 'a'\n   */\n  as?: 'a' | 'button' | React.ElementType;\n  /** Tittelen/teksten som står i CardBox */\n  title: string;\n  /** Valgfritt ikon som står over tittelen */\n  titleIcon?: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Lager en mer kompakt NavigationCard, uten ikon og beskrivende tekst\n   * @default false\n   */\n  compact?: boolean;\n  /** Beskrivelse under tittel, om ikke \"compact\" er valgt */\n  children?: React.ReactNode;\n  /** @deprecated eksternlenke ikon er ikke lenger støttet i NavigationCard  */\n  externalLink?: boolean;\n};\n\nexport type NavigationCardProps<\n  T extends React.ElementType = typeof defaultElement,\n> = PolymorphicComponentProps<T, NavigationCardOwnProps>;\n\nconst defaultElement = 'a';\n\nexport const NavigationCard = <\n  E extends React.ElementType = typeof defaultElement,\n>({\n  title,\n  children,\n  titleIcon,\n  compact = false,\n  className,\n  as,\n  ...rest\n}: NavigationCardProps<E>): JSX.Element => {\n  const Element: React.ElementType = as || defaultElement;\n  const classList = classNames('eds-navigation-card', className, {\n    'eds-base-card--red-line': compact,\n    'eds-navigation-card--compact': compact,\n  });\n  return (\n    <BaseCard as={Element} className={classList} {...rest}>\n      <div className=\"eds-navigation-card-header\">\n        <div className=\"eds-navigation-card-header__content\">\n          {titleIcon && (\n            <div\n              className=\"eds-navigation-card-header__title-icon\"\n              aria-hidden=\"true\"\n            >\n              {titleIcon}\n            </div>\n          )}\n          <span className=\"eds-navigation-card-header__title\">\n            <Heading3 as=\"span\">{title}</Heading3>\n          </span>\n        </div>\n        {!compact && (\n          <div className=\"eds-navigation-card-header__highlight\"></div>\n        )}\n      </div>\n      {!compact && (\n        <>\n          <Paragraph>{children}</Paragraph>\n        </>\n      )}\n    </BaseCard>\n  );\n};\n","import React, { CSSProperties } from 'react';\nimport { Paragraph, Label, Heading3 } from '@entur/typography';\nimport classNames from 'classnames';\nimport { BaseCard } from './BaseCard';\nimport { ForwardIcon } from '@entur/icons';\nimport './MediaCard.scss';\nimport { ConditionalWrapper, PolymorphicComponentProps } from '@entur/utils';\n\nexport type MediaCardOwnProps = {\n  /** HTML-elementet eller React-komponenten som lager bunnen (under media) av MediaCard\n   * @default 'a'\n   */\n  as?: 'a' | 'button' | React.ElementType;\n  /** Tittelen/teksten som står i CardBox */\n  title: string;\n  /** Teksten under tittelen i MediaCard */\n  description?: React.ReactNode;\n  /** Kategori (eller lignende) som vises over tittelen */\n  category?: string;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Det du skulle ønske som media (f.eks. bilder eller video) */\n  children?: React.ReactNode;\n  /** Styling som sendes til komponenten */\n  style?: CSSProperties;\n  /** Hvilken heading som brukes for tittelen.\n   *  Blir kun satt hvis description også er satt.\n   * @default 'h2'\n   */\n  headingLevel?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  /** Skjul pil-ikonet nederst til høyre\n   * @default false\n   */\n  hideArrow?: boolean;\n  /** Om MediaCard skal vises horisontalt eller vertikalt\n   * @default 'vertical'\n   */\n  orientation?: 'horizontal' | 'vertical';\n  /** Props som sendes til wrapper-elementet i stedet for lenke-elementet */\n  wrapperProps?: React.HTMLAttributes<HTMLElement>;\n  /** @deprecated Denne prop-en har ikke lenger en funksjon.\n   *  Hvis du trenger å legge til props på wrapper-elementet, bruk 'wrapperProps'-prop-en\n   */\n  wholeCardAsElement?: boolean;\n};\n\nexport type MediaCardProps<\n  T extends React.ElementType = typeof defaultElement,\n> = PolymorphicComponentProps<T, MediaCardOwnProps>;\n\nconst defaultElement = 'a';\n\nexport const MediaCard = <E extends React.ElementType = typeof defaultElement>({\n  title,\n  description,\n  children,\n  className,\n  category,\n  style,\n  as,\n  headingLevel = 'h2',\n  wholeCardAsElement: whole,\n  hideArrow,\n  wrapperProps,\n  orientation,\n  ...rest\n}: MediaCardProps<E>): JSX.Element => {\n  const Element: React.ElementType = as || defaultElement;\n  const Heading = Heading3;\n\n  const _wrapperProps = whole\n    ? { ...wrapperProps, ...rest }\n    : { ...wrapperProps };\n  const classList = classNames('eds-base-card, eds-media-card', className, {\n    'eds-media-card--horizontal': orientation === 'horizontal',\n  });\n\n  return (\n    <BaseCard className={classList} style={style} {..._wrapperProps}>\n      <div className=\"eds-media-card__media\">{children}</div>\n      <div className=\"eds-media-card__text\">\n        {category && (\n          <Label className=\"eds-media-card__text__category\">{category}</Label>\n        )}\n        {/* we only want a heading wrapper when we also have description text */}\n        <ConditionalWrapper\n          condition={description !== undefined}\n          wrapper={(children: React.ReactNode) => (\n            <Heading as={headingLevel} className=\"eds-media-card__text__title\">\n              {children}\n            </Heading>\n          )}\n        >\n          <Element\n            tabIndex={0}\n            className=\"eds-media-card__text__title-link\"\n            {...rest}\n          >\n            {title}\n          </Element>\n        </ConditionalWrapper>\n        {description !== undefined && <Paragraph>{description}</Paragraph>}\n        {!hideArrow && (\n          <ForwardIcon\n            className=\"eds-media-card__arrow-icon\"\n            aria-hidden=\"true\"\n          />\n        )}\n      </div>\n    </BaseCard>\n  );\n};\n\nexport default MediaCard;\n","import React from 'react';\nimport classNames from 'classnames';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { VariantType } from '@entur/utils';\n\nimport './Badge.scss';\n\n/** @deprecated use variant=\"information\" instead */\nconst info = 'info';\n/** @deprecated use variant=\"negative\" instead */\nconst danger = 'danger';\n\nexport type BadgeTypes = 'status' | 'bullet' | 'notification';\n\nexport type BadgeOwnProps = {\n  /** Elementet som wrapper badgen\n   * @default \"span\"\n   */\n  as?: 'span' | React.ElementType;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Elementet som badge vil legges relativt til */\n  children: React.ReactNode;\n  /** Hvilken type badge man vil ha */\n  variant: 'primary' | 'neutral' | VariantType | typeof danger | typeof info;\n  /** Om 0 skal vises\n   * @default false\n   */\n  showZero?: boolean;\n  /** Hva som er høyeste tallet før det legges på \"+\"\n   * @default ++\n   */\n  max?: number;\n  type?: BadgeTypes;\n  /** @deprecated Bruk `hide` i stedet */\n  invisible?: boolean;\n  /** Skjul badge */\n  hide?: boolean;\n};\n\nexport type BadgeProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, BadgeOwnProps>;\n\nexport type BadgeComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: BadgeProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'span';\n\nexport const Badge: BadgeComponent = React.forwardRef(\n  <T extends React.ElementType = typeof defaultElement>(\n    {\n      children,\n      className,\n      max = 99,\n      variant,\n      showZero = false,\n      invisible: invisibleProp = false,\n      hide: hideProp = false,\n      as,\n      type = 'status',\n      ...rest\n    }: BadgeProps<T>,\n    ref: PolymorphicRef<T>,\n  ) => {\n    const Element: React.ElementType = as || defaultElement;\n\n    const computedHide =\n      hideProp ||\n      invisibleProp ||\n      (children === 0 && !showZero) ||\n      children == null;\n\n    let displayValue;\n    if (typeof children === 'number') {\n      displayValue = children > max ? `${max}+` : children;\n    } else {\n      displayValue = children;\n    }\n\n    const classList = classNames(\n      className,\n      'eds-badge',\n      {\n        'eds-badge--hide': computedHide,\n        'eds-badge--show-zero': showZero,\n      },\n      `eds-badge--variant-${variant}`,\n      `eds-badge--type-${type}`,\n    );\n\n    return (\n      <Element className={classList} ref={ref} {...rest}>\n        {displayValue}\n      </Element>\n    );\n  },\n);\n","import React from 'react';\nimport { Badge } from './Badge';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { VariantType } from '@entur/utils';\n\n/** @deprecated use variant=\"information\" instead */\nconst info = 'info';\n/** @deprecated use variant=\"negative\" instead */\nconst danger = 'danger';\n\ntype BulletBadgeBaseProps = {\n  /** Elementet som wrapper badgen\n   * @default \"span\"\n   */\n  as?: string | React.ElementType;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Elementet som badge vil legges relativt til */\n  children: React.ReactNode;\n  /** Hvilken type badge man vil ha */\n  variant: 'primary' | 'neutral' | VariantType | typeof danger | typeof info;\n  /** Skjul badge */\n  hide?: boolean;\n};\n\nexport type BulletBadgeProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, BulletBadgeBaseProps>;\n\nexport type BulletBadgeComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: BulletBadgeProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'span';\n\nexport const BulletBadge: BulletBadgeComponent = React.forwardRef(\n  <T extends React.ElementType = typeof defaultElement>(\n    props: BulletBadgeProps<T>,\n    ref: PolymorphicRef<T>,\n  ) => {\n    const Element = props.as || defaultElement;\n    // @ts-expect-error type error due to props not being BadgeOwnProps\n    return <Badge as={Element} {...props} ref={ref} type=\"bullet\" />;\n  },\n);\n","import React from 'react';\nimport { Badge } from './Badge';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { VariantType } from '@entur/utils';\n\n/** @deprecated use variant=\"information\" instead */\nconst info = 'info';\n/** @deprecated use variant=\"negative\" instead */\nconst danger = 'danger';\n\ntype NotificationBadgeBaseProps = {\n  /** Elementet som wrapper badgen\n   * @default \"span\"\n   */\n  as?: string | React.ElementType;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Elementet som badge vil legges relativt til */\n  children: React.ReactNode;\n  /** Hvilken type badge man vil ha */\n  variant: 'primary' | 'neutral' | VariantType | typeof danger | typeof info;\n  /** Om 0 skal vises\n   * @default false\n   */\n  showZero?: boolean;\n  /** Hva som er høyeste tallet før det legges på \"+\"\n   * @default ++\n   */\n  max?: number;\n  /** Skjul badge */\n  hide?: boolean;\n};\n\nexport type NotificationBadgeProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, NotificationBadgeBaseProps>;\n\nexport type NotificationBadgeComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: NotificationBadgeProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'span';\n\nexport const NotificationBadge: NotificationBadgeComponent = React.forwardRef(\n  <T extends React.ElementType = typeof defaultElement>(\n    props: NotificationBadgeProps<T>,\n    ref: PolymorphicRef<T>,\n  ) => {\n    const Element = props.as || defaultElement;\n    // @ts-expect-error type error due to props not being BadgeOwnProps\n    return <Badge as={Element} {...props} ref={ref} type=\"notification\" />;\n  },\n);\n","import React from 'react';\nimport { Badge } from './Badge';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { VariantType } from '@entur/utils';\n\n/** @deprecated use variant=\"information\" instead */\nconst info = 'info';\n/** @deprecated use variant=\"negative\" instead */\nconst danger = 'danger';\n\ntype StatusBadgeBaseProps = {\n  /** Elementet som wrapper badgen\n   * @default \"span\"\n   */\n  as?: string | React.ElementType;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Elementet som badge vil legges relativt til */\n  children: React.ReactNode;\n  /** Hvilken type badge man vil ha */\n  variant: 'primary' | 'neutral' | VariantType | typeof danger | typeof info;\n  /** Skjul badge */\n  hide?: boolean;\n};\n\nexport type StatusBadgeProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, StatusBadgeBaseProps>;\n\nexport type StatusBadgeComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: StatusBadgeProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'span';\n\nexport const StatusBadge: StatusBadgeComponent = React.forwardRef(\n  <T extends React.ElementType = typeof defaultElement>(\n    props: StatusBadgeProps<T>,\n    ref: PolymorphicRef<T>,\n  ) => {\n    const Element = props.as || defaultElement;\n    // @ts-expect-error type error due to props not being BadgeOwnProps\n    return <Badge as={Element} {...props} ref={ref} type=\"status\" />;\n  },\n);\n","import React from 'react';\nimport classNames from 'classnames';\nimport './Tag.scss';\nimport { PolymorphicComponentProps } from '@entur/utils';\n\nexport type TagOwnProps = {\n  /** HTML-elementet eller React-komponenten som rendres\n   * @default 'div'\n   */\n  as?: string | React.ElementType;\n  /** Ekstra klassenavn */\n  className?: string;\n  /**Mindre og mer kompakt Tag, til f.eks. tabellbruk\n   * @default false\n   */\n  compact?: boolean;\n  children: React.ReactNode;\n};\n\nexport type TagProps<T extends React.ElementType = typeof defaultElement> =\n  PolymorphicComponentProps<T, TagOwnProps>;\n\nconst defaultElement = 'div';\n\nexport const Tag = <E extends React.ElementType = typeof defaultElement>({\n  className,\n  children,\n  compact,\n  as,\n  ...rest\n}: TagProps<E>): JSX.Element => {\n  const Element: React.ElementType = as || defaultElement;\n  const childrenArray = React.Children.toArray(children);\n  const hasLeadingIcon =\n    childrenArray.length > 1 && typeof childrenArray[0] !== 'string';\n  const hasTrailingIcon =\n    childrenArray.length > 1 &&\n    typeof childrenArray[childrenArray.length - 1] !== 'string';\n\n  return (\n    <Element\n      className={classNames('eds-tag', className, {\n        'eds-tag--leading-icon': hasLeadingIcon,\n        'eds-tag--trailing-icon': hasTrailingIcon,\n        'eds-tag--compact': compact,\n      })}\n      {...rest}\n    >\n      {children}\n    </Element>\n  );\n};\n","import './styles.scss';\nimport { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('layout', 'typography');\n\nexport * from './Contrast';\nexport * from './NavigationCard';\nexport * from './BaseCard';\nexport * from './MediaCard';\nexport * from './Badge/Badge';\nexport * from './Badge/BulletBadge';\nexport * from './Badge/NotificationBadge';\nexport * from './Badge/StatusBadge';\nexport * from './Tag';\n"],"names":["defaultElement","Contrast","children"],"mappings":"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"}
+{"version":3,"file":"layout.esm.js","sources":["../src/Contrast.tsx","../src/BaseCard.tsx","../src/NavigationCard.tsx","../src/MediaCard.tsx","../src/Badge/Badge.tsx","../src/Badge/BulletBadge.tsx","../src/Badge/NotificationBadge.tsx","../src/Badge/StatusBadge.tsx","../src/Tag.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type ContrastBaseProps = {\n  /** Ekstra klassenavn */\n  className?: string;\n};\n\nexport type ContrastProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, ContrastBaseProps>;\n\nexport type ContrastComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: ContrastProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'div';\n\nexport const Contrast: ContrastComponent = React.forwardRef(function Contrast<\n  T extends React.ElementType = typeof defaultElement,\n>(\n  { className, as, ...rest }: ContrastProps<T>,\n  ref: PolymorphicRef<T>,\n): JSX.Element {\n  const Element: React.ElementType = as || defaultElement;\n  return (\n    <ContrastContext.Provider value={true}>\n      <Element\n        className={classNames('eds-contrast', className)}\n        ref={ref}\n        {...rest}\n      />\n    </ContrastContext.Provider>\n  );\n});\n\nexport const ContrastContext = React.createContext<boolean>(false);\n\nexport const useContrast: () => boolean = () =>\n  React.useContext(ContrastContext);\n","import React from 'react';\nimport classNames from 'classnames';\nimport { PolymorphicComponentProps } from '@entur/utils';\nimport './BaseCard.scss';\n\nexport type BaseCardOwnProps = {\n  /** HTML-elementet eller React-komponenten som lager Card\n   * @default \"div\"\n   */\n  as?: 'div' | React.ElementType;\n  /** Ekstra klassenavn */\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport type BaseCardProps<T extends React.ElementType = typeof defaultElement> =\n  PolymorphicComponentProps<T, BaseCardOwnProps>;\n\nconst defaultElement = 'div';\n\nexport const BaseCard = <E extends React.ElementType = typeof defaultElement>({\n  children,\n  className,\n  as,\n  ...rest\n}: BaseCardProps<E>): JSX.Element => {\n  const Element: React.ElementType = as || defaultElement;\n  const classList = classNames('eds-base-card', className);\n  return (\n    <Element className={classList} {...rest}>\n      {children}\n    </Element>\n  );\n};\n","import React from 'react';\nimport { Paragraph } from '@entur/typography';\nimport classNames from 'classnames';\nimport { Heading3 } from '@entur/typography';\nimport { BaseCard } from './BaseCard';\nimport './NavigationCard.scss';\nimport { PolymorphicComponentProps } from '@entur/utils';\n\nexport type NavigationCardOwnProps = {\n  /** HTML-elementet eller React-komponenten som lager NavigationCard\n   * @default 'a'\n   */\n  as?: 'a' | 'button' | React.ElementType;\n  /** Tittelen/teksten som står i CardBox */\n  title: string;\n  /** Valgfritt ikon som står over tittelen */\n  titleIcon?: React.ReactNode;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Lager en mer kompakt NavigationCard, uten ikon og beskrivende tekst\n   * @default false\n   */\n  compact?: boolean;\n  /** Beskrivelse under tittel, om ikke \"compact\" er valgt */\n  children?: React.ReactNode;\n  /** @deprecated eksternlenke ikon er ikke lenger støttet i NavigationCard  */\n  externalLink?: boolean;\n};\n\nexport type NavigationCardProps<\n  T extends React.ElementType = typeof defaultElement,\n> = PolymorphicComponentProps<T, NavigationCardOwnProps>;\n\nconst defaultElement = 'a';\n\nexport const NavigationCard = <\n  E extends React.ElementType = typeof defaultElement,\n>({\n  title,\n  children,\n  titleIcon,\n  compact = false,\n  className,\n  as,\n  ...rest\n}: NavigationCardProps<E>): JSX.Element => {\n  const Element: React.ElementType = as || defaultElement;\n  const classList = classNames('eds-navigation-card', className, {\n    'eds-base-card--red-line': compact,\n    'eds-navigation-card--compact': compact,\n  });\n  return (\n    <BaseCard as={Element} className={classList} {...rest}>\n      <div className=\"eds-navigation-card-header\">\n        <div className=\"eds-navigation-card-header__content\">\n          {titleIcon && (\n            <div\n              className=\"eds-navigation-card-header__title-icon\"\n              aria-hidden=\"true\"\n            >\n              {titleIcon}\n            </div>\n          )}\n          <span className=\"eds-navigation-card-header__title\">\n            <Heading3 as=\"span\">{title}</Heading3>\n          </span>\n        </div>\n        {!compact && (\n          <div className=\"eds-navigation-card-header__highlight\"></div>\n        )}\n      </div>\n      {!compact && (\n        <>\n          <Paragraph>{children}</Paragraph>\n        </>\n      )}\n    </BaseCard>\n  );\n};\n","import React, { CSSProperties } from 'react';\nimport { Heading3, Label, Paragraph } from '@entur/typography';\nimport classNames from 'classnames';\nimport { BaseCard } from './BaseCard';\nimport { ForwardIcon } from '@entur/icons';\nimport './MediaCard.scss';\nimport { ConditionalWrapper, PolymorphicComponentProps } from '@entur/utils';\n\nexport type MediaCardOwnProps = {\n  /** HTML-elementet eller React-komponenten som lager bunnen (under media) av MediaCard\n   * @default 'a'\n   */\n  as?: 'a' | 'button' | React.ElementType;\n  /** Tittelen/teksten som står i CardBox */\n  title: string;\n  /** Teksten under tittelen i MediaCard */\n  description?: React.ReactNode;\n  /** Kategori (eller lignende) som vises over tittelen */\n  category?: string;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Det du skulle ønske som media (f.eks. bilder eller video) */\n  children?: React.ReactNode;\n  /** Styling som sendes til komponenten */\n  style?: CSSProperties;\n  /** Hvilken heading som brukes for tittelen.\n   *  Blir kun satt hvis description også er satt.\n   * @default 'h2'\n   */\n  headingLevel?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  /** Skjul pil-ikonet nederst til høyre\n   * @default false\n   */\n  hideArrow?: boolean;\n  /** Om MediaCard skal vises horisontalt eller vertikalt\n   * @default 'vertical'\n   */\n  orientation?: 'horizontal' | 'vertical';\n  /** Props som sendes til wrapper-elementet i stedet for lenke-elementet */\n  wrapperProps?: React.HTMLAttributes<HTMLElement>;\n  /** @deprecated Denne prop-en har ikke lenger en funksjon.\n   *  Hvis du trenger å legge til props på wrapper-elementet, bruk 'wrapperProps'-prop-en\n   */\n  wholeCardAsElement?: boolean;\n};\n\nexport type MediaCardProps<\n  T extends React.ElementType = typeof defaultElement,\n> = PolymorphicComponentProps<T, MediaCardOwnProps>;\n\nconst defaultElement = 'a';\n\nexport const MediaCard = <E extends React.ElementType = typeof defaultElement>({\n  title,\n  description,\n  children,\n  className,\n  category,\n  style,\n  as,\n  headingLevel = 'h2',\n  wholeCardAsElement: whole,\n  hideArrow,\n  wrapperProps,\n  orientation,\n  ...rest\n}: MediaCardProps<E>): JSX.Element => {\n  const Element: React.ElementType = as || defaultElement;\n  const Heading = Heading3;\n\n  const _wrapperProps = whole\n    ? { ...wrapperProps, ...rest }\n    : { ...wrapperProps };\n  const classList = classNames('eds-base-card, eds-media-card', className, {\n    'eds-media-card--horizontal': orientation === 'horizontal',\n  });\n\n  return (\n    <BaseCard className={classList} style={style} {..._wrapperProps}>\n      <div className=\"eds-media-card__media\">{children}</div>\n      <div className=\"eds-media-card__text\">\n        {category && (\n          <Label className=\"eds-media-card__text__category\">{category}</Label>\n        )}\n        {/* we only want a heading wrapper when we also have description text */}\n        <ConditionalWrapper\n          condition={description !== undefined}\n          wrapper={(children: React.ReactNode) => (\n            <Heading as={headingLevel} className=\"eds-media-card__text__title\">\n              {children}\n            </Heading>\n          )}\n        >\n          <Element\n            tabIndex={0}\n            className=\"eds-media-card__text__title-link\"\n            {...rest}\n          >\n            {title}\n          </Element>\n        </ConditionalWrapper>\n        {description !== undefined && <Paragraph>{description}</Paragraph>}\n        {!hideArrow && (\n          <ForwardIcon\n            className=\"eds-media-card__arrow-icon\"\n            aria-hidden=\"true\"\n          />\n        )}\n      </div>\n    </BaseCard>\n  );\n};\n\nexport default MediaCard;\n","import React from 'react';\nimport classNames from 'classnames';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { VariantType } from '@entur/utils';\n\nimport './Badge.scss';\n\n/** @deprecated use variant=\"information\" instead */\nconst info = 'info';\n/** @deprecated use variant=\"negative\" instead */\nconst danger = 'danger';\n\nexport type BadgeTypes = 'status' | 'bullet' | 'notification';\n\nexport type BadgeOwnProps = {\n  /** Elementet som wrapper badgen\n   * @default \"span\"\n   */\n  as?: 'span' | React.ElementType;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Elementet som badge vil legges relativt til */\n  children: React.ReactNode;\n  /** Hvilken type badge man vil ha */\n  variant: 'primary' | 'neutral' | VariantType | typeof danger | typeof info;\n  /** Om 0 skal vises\n   * @default false\n   */\n  showZero?: boolean;\n  /** Hva som er høyeste tallet før det legges på \"+\"\n   * @default ++\n   */\n  max?: number;\n  type?: BadgeTypes;\n  /** @deprecated Bruk `hide` i stedet */\n  invisible?: boolean;\n  /** Skjul badge */\n  hide?: boolean;\n};\n\nexport type BadgeProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, BadgeOwnProps>;\n\nexport type BadgeComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: BadgeProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'span';\n\nexport const Badge: BadgeComponent = React.forwardRef(\n  <T extends React.ElementType = typeof defaultElement>(\n    {\n      children,\n      className,\n      max = 99,\n      variant,\n      showZero = false,\n      invisible: invisibleProp = false,\n      hide: hideProp = false,\n      as,\n      type = 'status',\n      ...rest\n    }: BadgeProps<T>,\n    ref: PolymorphicRef<T>,\n  ) => {\n    const Element: React.ElementType = as || defaultElement;\n\n    const computedHide =\n      hideProp ||\n      invisibleProp ||\n      (children === 0 && !showZero) ||\n      children == null;\n\n    let displayValue;\n    if (typeof children === 'number') {\n      displayValue = children > max ? `${max}+` : children;\n    } else {\n      displayValue = children;\n    }\n\n    const classList = classNames(\n      className,\n      'eds-badge',\n      {\n        'eds-badge--hide': computedHide,\n        'eds-badge--show-zero': showZero,\n      },\n      `eds-badge--variant-${variant}`,\n      `eds-badge--type-${type}`,\n    );\n\n    return (\n      <Element className={classList} ref={ref} {...rest}>\n        {displayValue}\n      </Element>\n    );\n  },\n);\n","import React from 'react';\nimport { Badge } from './Badge';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { VariantType } from '@entur/utils';\n\n/** @deprecated use variant=\"information\" instead */\nconst info = 'info';\n/** @deprecated use variant=\"negative\" instead */\nconst danger = 'danger';\n\ntype BulletBadgeBaseProps = {\n  /** Elementet som wrapper badgen\n   * @default \"span\"\n   */\n  as?: string | React.ElementType;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Elementet som badge vil legges relativt til */\n  children: React.ReactNode;\n  /** Hvilken type badge man vil ha */\n  variant: 'primary' | 'neutral' | VariantType | typeof danger | typeof info;\n  /** Skjul badge */\n  hide?: boolean;\n};\n\nexport type BulletBadgeProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, BulletBadgeBaseProps>;\n\nexport type BulletBadgeComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: BulletBadgeProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'span';\n\nexport const BulletBadge: BulletBadgeComponent = React.forwardRef(\n  <T extends React.ElementType = typeof defaultElement>(\n    props: BulletBadgeProps<T>,\n    ref: PolymorphicRef<T>,\n  ) => {\n    const Element = props.as || defaultElement;\n    // @ts-expect-error type error due to props not being BadgeOwnProps\n    return <Badge as={Element} {...props} ref={ref} type=\"bullet\" />;\n  },\n);\n","import React from 'react';\nimport { Badge } from './Badge';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { VariantType } from '@entur/utils';\n\n/** @deprecated use variant=\"information\" instead */\nconst info = 'info';\n/** @deprecated use variant=\"negative\" instead */\nconst danger = 'danger';\n\ntype NotificationBadgeBaseProps = {\n  /** Elementet som wrapper badgen\n   * @default \"span\"\n   */\n  as?: string | React.ElementType;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Elementet som badge vil legges relativt til */\n  children: React.ReactNode;\n  /** Hvilken type badge man vil ha */\n  variant: 'primary' | 'neutral' | VariantType | typeof danger | typeof info;\n  /** Om 0 skal vises\n   * @default false\n   */\n  showZero?: boolean;\n  /** Hva som er høyeste tallet før det legges på \"+\"\n   * @default ++\n   */\n  max?: number;\n  /** Skjul badge */\n  hide?: boolean;\n};\n\nexport type NotificationBadgeProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, NotificationBadgeBaseProps>;\n\nexport type NotificationBadgeComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: NotificationBadgeProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'span';\n\nexport const NotificationBadge: NotificationBadgeComponent = React.forwardRef(\n  <T extends React.ElementType = typeof defaultElement>(\n    props: NotificationBadgeProps<T>,\n    ref: PolymorphicRef<T>,\n  ) => {\n    const Element = props.as || defaultElement;\n    // @ts-expect-error type error due to props not being BadgeOwnProps\n    return <Badge as={Element} {...props} ref={ref} type=\"notification\" />;\n  },\n);\n","import React from 'react';\nimport { Badge } from './Badge';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { VariantType } from '@entur/utils';\n\n/** @deprecated use variant=\"information\" instead */\nconst info = 'info';\n/** @deprecated use variant=\"negative\" instead */\nconst danger = 'danger';\n\ntype StatusBadgeBaseProps = {\n  /** Elementet som wrapper badgen\n   * @default \"span\"\n   */\n  as?: string | React.ElementType;\n  /** Ekstra klassenavn */\n  className?: string;\n  /** Elementet som badge vil legges relativt til */\n  children: React.ReactNode;\n  /** Hvilken type badge man vil ha */\n  variant: 'primary' | 'neutral' | VariantType | typeof danger | typeof info;\n  /** Skjul badge */\n  hide?: boolean;\n};\n\nexport type StatusBadgeProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, StatusBadgeBaseProps>;\n\nexport type StatusBadgeComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: StatusBadgeProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'span';\n\nexport const StatusBadge: StatusBadgeComponent = React.forwardRef(\n  <T extends React.ElementType = typeof defaultElement>(\n    props: StatusBadgeProps<T>,\n    ref: PolymorphicRef<T>,\n  ) => {\n    const Element = props.as || defaultElement;\n    // @ts-expect-error type error due to props not being BadgeOwnProps\n    return <Badge as={Element} {...props} ref={ref} type=\"status\" />;\n  },\n);\n","import React from 'react';\nimport classNames from 'classnames';\nimport './Tag.scss';\nimport { PolymorphicComponentProps } from '@entur/utils';\n\nexport type TagOwnProps = {\n  /** HTML-elementet eller React-komponenten som rendres\n   * @default 'div'\n   */\n  as?: string | React.ElementType;\n  /** Ekstra klassenavn */\n  className?: string;\n  /**Mindre og mer kompakt Tag, til f.eks. tabellbruk\n   * @default false\n   */\n  compact?: boolean;\n  children: React.ReactNode;\n};\n\nexport type TagProps<T extends React.ElementType = typeof defaultElement> =\n  PolymorphicComponentProps<T, TagOwnProps>;\n\nconst defaultElement = 'div';\n\nexport const Tag = <E extends React.ElementType = typeof defaultElement>({\n  className,\n  children,\n  compact,\n  as,\n  ...rest\n}: TagProps<E>): JSX.Element => {\n  const Element: React.ElementType = as || defaultElement;\n  const childrenArray = React.Children.toArray(children);\n  const hasLeadingIcon =\n    childrenArray.length > 1 && typeof childrenArray[0] !== 'string';\n  const hasTrailingIcon =\n    childrenArray.length > 1 &&\n    typeof childrenArray[childrenArray.length - 1] !== 'string';\n\n  return (\n    <Element\n      className={classNames('eds-tag', className, {\n        'eds-tag--leading-icon': hasLeadingIcon,\n        'eds-tag--trailing-icon': hasTrailingIcon,\n        'eds-tag--compact': compact,\n      })}\n      {...rest}\n    >\n      {children}\n    </Element>\n  );\n};\n","import './styles.scss';\nimport { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('layout', 'typography');\n\nexport * from './Contrast';\nexport * from './NavigationCard';\nexport * from './BaseCard';\nexport * from './MediaCard';\nexport * from './Badge/Badge';\nexport * from './Badge/BulletBadge';\nexport * from './Badge/NotificationBadge';\nexport * from './Badge/StatusBadge';\nexport * from './Tag';\n"],"names":["defaultElement","Contrast","children"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@entur/layout",
-  "version": "3.4.2",
+  "version": "3.6.0",
   "license": "EUPL-1.2",
   "main": "dist/layout.cjs.js",
   "module": "dist/layout.esm.js",
@@ -43,18 +43,17 @@
     "build": "yarn build:main && yarn build:beta",
     "build:main": "vite build",
     "build:beta": "vite build --config vite.config.beta.ts",
-    "test": "jest",
-    "lint": "eslint src"
+    "test": "jest"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
-    "@entur/icons": "^8.4.3",
-    "@entur/tokens": "^3.22.2",
-    "@entur/typography": "^2.1.4",
-    "@entur/utils": "^0.13.1",
+    "@entur/icons": "^8.4.5",
+    "@entur/tokens": "^3.22.4",
+    "@entur/typography": "^2.1.6",
+    "@entur/utils": "^0.13.3",
     "classnames": "^2.5.1"
   },
   "devDependencies": {
@@ -62,7 +61,6 @@
     "@testing-library/react": "^10.4.9",
     "@testing-library/user-event": "14.6.1",
     "@vitejs/plugin-react": "^5.0.1",
-    "eslint": "^7.32.0",
     "jest": "^29.0.0",
     "jest-environment-jsdom": "^29.0.0",
     "ts-jest": "^29.0.0",
@@ -70,5 +68,5 @@
     "vite": "^7.1.3",
     "vite-plugin-dts": "^4.5.4"
   },
-  "gitHead": "ee1f35746ed0ce1e2ab24377ec9d1bb78f6fabac"
+  "gitHead": "f103a7b4fef3dc0ce47ce4b0e06a8d4062ba1cc5"
 }

package/dist/beta/cjs/Contrast.cjs

@@ -1,21 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const classNames = require("classnames");
-const defaultElement = "div";
-const Contrast = React.forwardRef(function Contrast2({ className, as, ...rest }, ref) {
-  const Element = as || defaultElement;
-  return /* @__PURE__ */ jsxRuntime.jsx(ContrastContext.Provider, { value: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-    Element,
-    {
-      className: classNames("eds-contrast", className),
-      ref,
-      ...rest
-    }
-  ) });
-});
-const ContrastContext = React.createContext(false);
-exports.Contrast = Contrast;
-exports.ContrastContext = ContrastContext;
-//# sourceMappingURL=Contrast.cjs.map

package/dist/beta/cjs/Contrast.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Contrast.cjs","sources":["../../../src/Contrast.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type ContrastBaseProps = {\n  /** Ekstra klassenavn */\n  className?: string;\n};\n\nexport type ContrastProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, ContrastBaseProps>;\n\nexport type ContrastComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: ContrastProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'div';\n\nexport const Contrast: ContrastComponent = React.forwardRef(function Contrast<\n  T extends React.ElementType = typeof defaultElement,\n>(\n  { className, as, ...rest }: ContrastProps<T>,\n  ref: PolymorphicRef<T>,\n): JSX.Element {\n  const Element: React.ElementType = as || defaultElement;\n  return (\n    <ContrastContext.Provider value={true}>\n      <Element\n        className={classNames('eds-contrast', className)}\n        ref={ref}\n        {...rest}\n      />\n    </ContrastContext.Provider>\n  );\n});\n\nexport const ContrastContext = React.createContext<boolean>(false);\n\nexport const useContrast: () => boolean = () =>\n  React.useContext(ContrastContext);\n"],"names":["Contrast","jsx"],"mappings":";;;;;AAkBA,MAAM,iBAAiB;AAEhB,MAAM,WAA8B,MAAM,WAAW,SAASA,UAGnE,EAAE,WAAW,IAAI,GAAG,KAAA,GACpB,KACa;AACb,QAAM,UAA6B,MAAM;AACzC,SACEC,2BAAAA,IAAC,gBAAgB,UAAhB,EAAyB,OAAO,MAC/B,UAAAA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,WAAW,gBAAgB,SAAS;AAAA,MAC/C;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA,GAER;AAEJ,CAAC;AAEM,MAAM,kBAAkB,MAAM,cAAuB,KAAK;;;"}

package/dist/beta/esm/Contrast.mjs

@@ -1,21 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import React from "react";
-import classNames from "classnames";
-const defaultElement = "div";
-const Contrast = React.forwardRef(function Contrast2({ className, as, ...rest }, ref) {
-  const Element = as || defaultElement;
-  return /* @__PURE__ */ jsx(ContrastContext.Provider, { value: true, children: /* @__PURE__ */ jsx(
-    Element,
-    {
-      className: classNames("eds-contrast", className),
-      ref,
-      ...rest
-    }
-  ) });
-});
-const ContrastContext = React.createContext(false);
-export {
-  Contrast,
-  ContrastContext
-};
-//# sourceMappingURL=Contrast.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Contrast.mjs","sources":["../../../src/Contrast.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type ContrastBaseProps = {\n  /** Ekstra klassenavn */\n  className?: string;\n};\n\nexport type ContrastProps<T extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<T, ContrastBaseProps>;\n\nexport type ContrastComponent = <\n  T extends React.ElementType = typeof defaultElement,\n>(\n  props: ContrastProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'div';\n\nexport const Contrast: ContrastComponent = React.forwardRef(function Contrast<\n  T extends React.ElementType = typeof defaultElement,\n>(\n  { className, as, ...rest }: ContrastProps<T>,\n  ref: PolymorphicRef<T>,\n): JSX.Element {\n  const Element: React.ElementType = as || defaultElement;\n  return (\n    <ContrastContext.Provider value={true}>\n      <Element\n        className={classNames('eds-contrast', className)}\n        ref={ref}\n        {...rest}\n      />\n    </ContrastContext.Provider>\n  );\n});\n\nexport const ContrastContext = React.createContext<boolean>(false);\n\nexport const useContrast: () => boolean = () =>\n  React.useContext(ContrastContext);\n"],"names":["Contrast"],"mappings":";;;AAkBA,MAAM,iBAAiB;AAEhB,MAAM,WAA8B,MAAM,WAAW,SAASA,UAGnE,EAAE,WAAW,IAAI,GAAG,KAAA,GACpB,KACa;AACb,QAAM,UAA6B,MAAM;AACzC,SACE,oBAAC,gBAAgB,UAAhB,EAAyB,OAAO,MAC/B,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,WAAW,gBAAgB,SAAS;AAAA,MAC/C;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA,GAER;AAEJ,CAAC;AAEM,MAAM,kBAAkB,MAAM,cAAuB,KAAK;"}