@entur/layout 3.4.1-next.1 → 3.4.1

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

@@ -1,115 +1,111 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
 const classNames = require("classnames");
 const utils = require("../LayoutWrapper/utils.cjs");
 const useResponsiveValue = require("../LayoutWrapper/useResponsiveValue.cjs");
 ;/* empty css            */
 const defaultElement = "div";
-const Flex = React.forwardRef(
-  ({
-    direction,
-    wrap,
-    align,
-    justify,
-    alignContent,
-    gap,
-    rowGap,
-    columnGap,
-    flex,
-    grow,
-    shrink,
-    basis,
-    width,
-    height,
-    minWidth,
-    minHeight,
-    maxWidth,
-    maxHeight,
-    as,
-    className,
-    children,
-    style,
-    ...rest
-  }, ref) => {
-    const Element = as || defaultElement;
-    const resolvedDirection = useResponsiveValue.useResponsiveValue(direction);
-    const resolvedWrap = useResponsiveValue.useResponsiveValue(wrap);
-    const resolvedAlign = useResponsiveValue.useResponsiveValue(align);
-    const resolvedJustify = useResponsiveValue.useResponsiveValue(justify);
-    const resolvedAlignContent = useResponsiveValue.useResponsiveValue(alignContent);
-    const resolvedGap = useResponsiveValue.useResponsiveValue(gap);
-    const resolvedRowGap = useResponsiveValue.useResponsiveValue(rowGap);
-    const resolvedColumnGap = useResponsiveValue.useResponsiveValue(columnGap);
-    const flexStyle = {
-      ...resolvedDirection && {
-        "--flex-direction": resolvedDirection
-      },
-      ...resolvedWrap && {
-        "--flex-wrap": resolvedWrap
-      },
-      ...resolvedAlign && {
-        "--flex-align-items": resolvedAlign
-      },
-      ...resolvedJustify && {
-        "--flex-justify-content": resolvedJustify
-      },
-      ...resolvedAlignContent && {
-        "--flex-align-content": resolvedAlignContent
-      },
-      ...resolvedGap && {
-        "--flex-gap": utils.getSpacingValue(resolvedGap, "Flex")
-      },
-      ...resolvedRowGap && {
-        "--flex-row-gap": utils.getSpacingValue(resolvedRowGap, "Flex")
-      },
-      ...resolvedColumnGap && {
-        "--flex-column-gap": utils.getSpacingValue(resolvedColumnGap, "Flex")
-      },
-      ...flex !== void 0 && {
-        "--flex": flex
-      },
-      ...grow !== void 0 && {
-        "--flex-grow": grow
-      },
-      ...shrink !== void 0 && {
-        "--flex-shrink": shrink
-      },
-      ...basis !== void 0 && {
-        "--flex-basis": basis
-      },
-      ...width && {
-        "--flex-width": width
-      },
-      ...height && {
-        "--flex-height": height
-      },
-      ...minWidth && {
-        "--flex-min-width": minWidth
-      },
-      ...minHeight && {
-        "--flex-min-height": minHeight
-      },
-      ...maxWidth && {
-        "--flex-max-width": maxWidth
-      },
-      ...maxHeight && {
-        "--flex-max-height": maxHeight
-      },
-      ...style
-    };
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Element,
-      {
-        ref,
-        className: classNames("eds-layout-flex", className),
-        style: flexStyle,
-        ...rest,
-        children
-      }
-    );
-  }
-);
+const Flex = ({
+  direction,
+  wrap,
+  align,
+  justify,
+  alignContent,
+  gap,
+  rowGap,
+  columnGap,
+  flex,
+  grow,
+  shrink,
+  basis,
+  width,
+  height,
+  minWidth,
+  minHeight,
+  maxWidth,
+  maxHeight,
+  as,
+  className,
+  children,
+  style,
+  ...rest
+}) => {
+  const Element = as || defaultElement;
+  const resolvedDirection = useResponsiveValue.useResponsiveValue(direction);
+  const resolvedWrap = useResponsiveValue.useResponsiveValue(wrap);
+  const resolvedAlign = useResponsiveValue.useResponsiveValue(align);
+  const resolvedJustify = useResponsiveValue.useResponsiveValue(justify);
+  const resolvedAlignContent = useResponsiveValue.useResponsiveValue(alignContent);
+  const resolvedGap = useResponsiveValue.useResponsiveValue(gap);
+  const resolvedRowGap = useResponsiveValue.useResponsiveValue(rowGap);
+  const resolvedColumnGap = useResponsiveValue.useResponsiveValue(columnGap);
+  const flexStyle = {
+    ...resolvedDirection && {
+      "--flex-direction": resolvedDirection
+    },
+    ...resolvedWrap && {
+      "--flex-wrap": resolvedWrap
+    },
+    ...resolvedAlign && {
+      "--flex-align-items": resolvedAlign
+    },
+    ...resolvedJustify && {
+      "--flex-justify-content": resolvedJustify
+    },
+    ...resolvedAlignContent && {
+      "--flex-align-content": resolvedAlignContent
+    },
+    ...resolvedGap && {
+      "--flex-gap": utils.getSpacingValue(resolvedGap, "Flex")
+    },
+    ...resolvedRowGap && {
+      "--flex-row-gap": utils.getSpacingValue(resolvedRowGap, "Flex")
+    },
+    ...resolvedColumnGap && {
+      "--flex-column-gap": utils.getSpacingValue(resolvedColumnGap, "Flex")
+    },
+    ...flex !== void 0 && {
+      "--flex": flex
+    },
+    ...grow !== void 0 && {
+      "--flex-grow": grow
+    },
+    ...shrink !== void 0 && {
+      "--flex-shrink": shrink
+    },
+    ...basis !== void 0 && {
+      "--flex-basis": basis
+    },
+    ...width && {
+      "--flex-width": width
+    },
+    ...height && {
+      "--flex-height": height
+    },
+    ...minWidth && {
+      "--flex-min-width": minWidth
+    },
+    ...minHeight && {
+      "--flex-min-height": minHeight
+    },
+    ...maxWidth && {
+      "--flex-max-width": maxWidth
+    },
+    ...maxHeight && {
+      "--flex-max-height": maxHeight
+    },
+    ...style
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Element,
+    {
+      className: classNames("eds-layout-flex", className),
+      style: flexStyle,
+      ...rest,
+      children
+    }
+  );
+};
 exports.Flex = Flex;
 //# sourceMappingURL=Flex.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Flex.cjs","sources":["../../../../src/beta/Flex/Flex.tsx"],"sourcesContent":["import React from 'react';\nimport { PolymorphicComponentProps } from '@entur/utils';\nimport classNames from 'classnames';\nimport { getSpacingValue } from '../LayoutWrapper/utils';\nimport type { GridSpacingValue, ResponsiveValue } from '../LayoutWrapper/utils';\nimport { useResponsiveValue } from '../LayoutWrapper/useResponsiveValue';\n\nimport './Flex.scss';\n\nexport type FlexSpacingValue = GridSpacingValue;\n\ntype FlexDirection = React.CSSProperties['flexDirection'];\ntype FlexWrap = React.CSSProperties['flexWrap'];\ntype AlignItems = React.CSSProperties['alignItems'];\ntype JustifyContent = React.CSSProperties['justifyContent'];\ntype AlignContent = React.CSSProperties['alignContent'];\ntype FlexBasis = React.CSSProperties['flexBasis'];\ntype FlexValue = React.CSSProperties['flex'];\n\nexport type FlexOwnProps = {\n  /** CSS flex-direction value (supports responsive objects)\n   * @default \"row\"\n   */\n  direction?: FlexDirection | ResponsiveValue<FlexDirection>;\n  /** CSS flex-wrap value (supports responsive objects)\n   * @default \"nowrap\"\n   */\n  wrap?: FlexWrap | ResponsiveValue<FlexWrap>;\n  /** CSS align-items value (supports responsive objects) */\n  align?: AlignItems | ResponsiveValue<AlignItems>;\n  /** CSS justify-content value (supports responsive objects) */\n  justify?: JustifyContent | ResponsiveValue<JustifyContent>;\n  /** CSS align-content value (supports responsive objects) */\n  alignContent?: AlignContent | ResponsiveValue<AlignContent>;\n  /** Spacing between flex items (supports responsive objects) */\n  gap?: FlexSpacingValue | ResponsiveValue<FlexSpacingValue>;\n  /** Vertical spacing between rows (supports responsive objects) */\n  rowGap?: FlexSpacingValue | ResponsiveValue<FlexSpacingValue>;\n  /** Horizontal spacing between columns (supports responsive objects) */\n  columnGap?: FlexSpacingValue | ResponsiveValue<FlexSpacingValue>;\n  /** CSS flex shorthand value */\n  flex?: FlexValue;\n  /** CSS flex-grow value */\n  grow?: number;\n  /** CSS flex-shrink value */\n  shrink?: number;\n  /** CSS flex-basis value */\n  basis?: FlexBasis;\n  /** CSS width value */\n  width?: string;\n  /** CSS height value */\n  height?: string;\n  /** CSS min-width value */\n  minWidth?: string;\n  /** CSS min-height value */\n  minHeight?: string;\n  /** CSS max-width value */\n  maxWidth?: string;\n  /** CSS max-height value */\n  maxHeight?: string;\n  /** HTML element or React component used to render the Flex container\n   * @default \"div\"\n   */\n  as?: string | React.ElementType;\n  /** Additional class names */\n  className?: string;\n  /** Content of the Flex container */\n  children?: React.ReactNode;\n};\n\nexport type FlexProps<T extends React.ElementType = typeof defaultElement> =\n  PolymorphicComponentProps<T, FlexOwnProps>;\n\nconst defaultElement = 'div';\n\nexport const Flex = React.forwardRef(\n  <E extends React.ElementType = typeof defaultElement>(\n    {\n      direction,\n      wrap,\n      align,\n      justify,\n      alignContent,\n      gap,\n      rowGap,\n      columnGap,\n      flex,\n      grow,\n      shrink,\n      basis,\n      width,\n      height,\n      minWidth,\n      minHeight,\n      maxWidth,\n      maxHeight,\n      as,\n      className,\n      children,\n      style,\n      ...rest\n    }: FlexProps<E>,\n    ref?: React.Ref<Element>,\n  ): JSX.Element => {\n    const Element: React.ElementType = as || defaultElement;\n\n    const resolvedDirection = useResponsiveValue(direction);\n    const resolvedWrap = useResponsiveValue(wrap);\n    const resolvedAlign = useResponsiveValue(align);\n    const resolvedJustify = useResponsiveValue(justify);\n    const resolvedAlignContent = useResponsiveValue(alignContent);\n    const resolvedGap = useResponsiveValue(gap);\n    const resolvedRowGap = useResponsiveValue(rowGap);\n    const resolvedColumnGap = useResponsiveValue(columnGap);\n\n    const flexStyle: React.CSSProperties = {\n      ...(resolvedDirection && {\n        '--flex-direction': resolvedDirection,\n      }),\n      ...(resolvedWrap && {\n        '--flex-wrap': resolvedWrap,\n      }),\n      ...(resolvedAlign && {\n        '--flex-align-items': resolvedAlign,\n      }),\n      ...(resolvedJustify && {\n        '--flex-justify-content': resolvedJustify,\n      }),\n      ...(resolvedAlignContent && {\n        '--flex-align-content': resolvedAlignContent,\n      }),\n      ...(resolvedGap && {\n        '--flex-gap': getSpacingValue(resolvedGap, 'Flex'),\n      }),\n      ...(resolvedRowGap && {\n        '--flex-row-gap': getSpacingValue(resolvedRowGap, 'Flex'),\n      }),\n      ...(resolvedColumnGap && {\n        '--flex-column-gap': getSpacingValue(resolvedColumnGap, 'Flex'),\n      }),\n      ...(flex !== undefined && {\n        '--flex': flex,\n      }),\n      ...(grow !== undefined && {\n        '--flex-grow': grow,\n      }),\n      ...(shrink !== undefined && {\n        '--flex-shrink': shrink,\n      }),\n      ...(basis !== undefined && {\n        '--flex-basis': basis,\n      }),\n      ...(width && {\n        '--flex-width': width,\n      }),\n      ...(height && {\n        '--flex-height': height,\n      }),\n      ...(minWidth && {\n        '--flex-min-width': minWidth,\n      }),\n      ...(minHeight && {\n        '--flex-min-height': minHeight,\n      }),\n      ...(maxWidth && {\n        '--flex-max-width': maxWidth,\n      }),\n      ...(maxHeight && {\n        '--flex-max-height': maxHeight,\n      }),\n      ...style,\n    } as React.CSSProperties;\n\n    return (\n      <Element\n        ref={ref}\n        className={classNames('eds-layout-flex', className)}\n        style={flexStyle}\n        {...rest}\n      >\n        {children}\n      </Element>\n    );\n  },\n);\n"],"names":["useResponsiveValue","getSpacingValue","jsx"],"mappings":";;;;;;;;AAyEA,MAAM,iBAAiB;AAEhB,MAAM,OAAO,MAAM;AAAA,EACxB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACgB;AAChB,UAAM,UAA6B,MAAM;AAEzC,UAAM,oBAAoBA,mBAAAA,mBAAmB,SAAS;AACtD,UAAM,eAAeA,mBAAAA,mBAAmB,IAAI;AAC5C,UAAM,gBAAgBA,mBAAAA,mBAAmB,KAAK;AAC9C,UAAM,kBAAkBA,mBAAAA,mBAAmB,OAAO;AAClD,UAAM,uBAAuBA,mBAAAA,mBAAmB,YAAY;AAC5D,UAAM,cAAcA,mBAAAA,mBAAmB,GAAG;AAC1C,UAAM,iBAAiBA,mBAAAA,mBAAmB,MAAM;AAChD,UAAM,oBAAoBA,mBAAAA,mBAAmB,SAAS;AAEtD,UAAM,YAAiC;AAAA,MACrC,GAAI,qBAAqB;AAAA,QACvB,oBAAoB;AAAA,MAAA;AAAA,MAEtB,GAAI,gBAAgB;AAAA,QAClB,eAAe;AAAA,MAAA;AAAA,MAEjB,GAAI,iBAAiB;AAAA,QACnB,sBAAsB;AAAA,MAAA;AAAA,MAExB,GAAI,mBAAmB;AAAA,QACrB,0BAA0B;AAAA,MAAA;AAAA,MAE5B,GAAI,wBAAwB;AAAA,QAC1B,wBAAwB;AAAA,MAAA;AAAA,MAE1B,GAAI,eAAe;AAAA,QACjB,cAAcC,MAAAA,gBAAgB,aAAa,MAAM;AAAA,MAAA;AAAA,MAEnD,GAAI,kBAAkB;AAAA,QACpB,kBAAkBA,MAAAA,gBAAgB,gBAAgB,MAAM;AAAA,MAAA;AAAA,MAE1D,GAAI,qBAAqB;AAAA,QACvB,qBAAqBA,MAAAA,gBAAgB,mBAAmB,MAAM;AAAA,MAAA;AAAA,MAEhE,GAAI,SAAS,UAAa;AAAA,QACxB,UAAU;AAAA,MAAA;AAAA,MAEZ,GAAI,SAAS,UAAa;AAAA,QACxB,eAAe;AAAA,MAAA;AAAA,MAEjB,GAAI,WAAW,UAAa;AAAA,QAC1B,iBAAiB;AAAA,MAAA;AAAA,MAEnB,GAAI,UAAU,UAAa;AAAA,QACzB,gBAAgB;AAAA,MAAA;AAAA,MAElB,GAAI,SAAS;AAAA,QACX,gBAAgB;AAAA,MAAA;AAAA,MAElB,GAAI,UAAU;AAAA,QACZ,iBAAiB;AAAA,MAAA;AAAA,MAEnB,GAAI,YAAY;AAAA,QACd,oBAAoB;AAAA,MAAA;AAAA,MAEtB,GAAI,aAAa;AAAA,QACf,qBAAqB;AAAA,MAAA;AAAA,MAEvB,GAAI,YAAY;AAAA,QACd,oBAAoB;AAAA,MAAA;AAAA,MAEtB,GAAI,aAAa;AAAA,QACf,qBAAqB;AAAA,MAAA;AAAA,MAEvB,GAAG;AAAA,IAAA;AAGL,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,WAAW,mBAAmB,SAAS;AAAA,QAClD,OAAO;AAAA,QACN,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;;"}
+{"version":3,"file":"Flex.cjs","sources":["../../../../src/beta/Flex/Flex.tsx"],"sourcesContent":["import React from 'react';\nimport { PolymorphicComponentProps } from '@entur/utils';\nimport classNames from 'classnames';\nimport { getSpacingValue } from '../LayoutWrapper/utils';\nimport type { GridSpacingValue, ResponsiveValue } from '../LayoutWrapper/utils';\nimport { useResponsiveValue } from '../LayoutWrapper/useResponsiveValue';\n\nimport './Flex.scss';\n\nexport type FlexSpacingValue = GridSpacingValue;\n\ntype FlexDirection = React.CSSProperties['flexDirection'];\ntype FlexWrap = React.CSSProperties['flexWrap'];\ntype AlignItems = React.CSSProperties['alignItems'];\ntype JustifyContent = React.CSSProperties['justifyContent'];\ntype AlignContent = React.CSSProperties['alignContent'];\ntype FlexBasis = React.CSSProperties['flexBasis'];\ntype FlexValue = React.CSSProperties['flex'];\n\nexport type FlexOwnProps = {\n  /** CSS flex-direction value (supports responsive objects)\n   * @default \"row\"\n   */\n  direction?: FlexDirection | ResponsiveValue<FlexDirection>;\n  /** CSS flex-wrap value (supports responsive objects)\n   * @default \"nowrap\"\n   */\n  wrap?: FlexWrap | ResponsiveValue<FlexWrap>;\n  /** CSS align-items value (supports responsive objects) */\n  align?: AlignItems | ResponsiveValue<AlignItems>;\n  /** CSS justify-content value (supports responsive objects) */\n  justify?: JustifyContent | ResponsiveValue<JustifyContent>;\n  /** CSS align-content value (supports responsive objects) */\n  alignContent?: AlignContent | ResponsiveValue<AlignContent>;\n  /** Spacing between flex items (supports responsive objects) */\n  gap?: FlexSpacingValue | ResponsiveValue<FlexSpacingValue>;\n  /** Vertical spacing between rows (supports responsive objects) */\n  rowGap?: FlexSpacingValue | ResponsiveValue<FlexSpacingValue>;\n  /** Horizontal spacing between columns (supports responsive objects) */\n  columnGap?: FlexSpacingValue | ResponsiveValue<FlexSpacingValue>;\n  /** CSS flex shorthand value */\n  flex?: FlexValue;\n  /** CSS flex-grow value */\n  grow?: number;\n  /** CSS flex-shrink value */\n  shrink?: number;\n  /** CSS flex-basis value */\n  basis?: FlexBasis;\n  /** CSS width value */\n  width?: string;\n  /** CSS height value */\n  height?: string;\n  /** CSS min-width value */\n  minWidth?: string;\n  /** CSS min-height value */\n  minHeight?: string;\n  /** CSS max-width value */\n  maxWidth?: string;\n  /** CSS max-height value */\n  maxHeight?: string;\n  /** HTML element or React component used to render the Flex container\n   * @default \"div\"\n   */\n  as?: string | React.ElementType;\n  /** Additional class names */\n  className?: string;\n  /** Content of the Flex container */\n  children?: React.ReactNode;\n};\n\nexport type FlexProps<T extends React.ElementType = typeof defaultElement> =\n  PolymorphicComponentProps<T, FlexOwnProps>;\n\nconst defaultElement = 'div';\n\nexport const Flex = <E extends React.ElementType = typeof defaultElement>({\n  direction,\n  wrap,\n  align,\n  justify,\n  alignContent,\n  gap,\n  rowGap,\n  columnGap,\n  flex,\n  grow,\n  shrink,\n  basis,\n  width,\n  height,\n  minWidth,\n  minHeight,\n  maxWidth,\n  maxHeight,\n  as,\n  className,\n  children,\n  style,\n  ...rest\n}: FlexProps<E>): JSX.Element => {\n  const Element: React.ElementType = as || defaultElement;\n\n  const resolvedDirection = useResponsiveValue(direction);\n  const resolvedWrap = useResponsiveValue(wrap);\n  const resolvedAlign = useResponsiveValue(align);\n  const resolvedJustify = useResponsiveValue(justify);\n  const resolvedAlignContent = useResponsiveValue(alignContent);\n  const resolvedGap = useResponsiveValue(gap);\n  const resolvedRowGap = useResponsiveValue(rowGap);\n  const resolvedColumnGap = useResponsiveValue(columnGap);\n\n  const flexStyle: React.CSSProperties = {\n    ...(resolvedDirection && {\n      '--flex-direction': resolvedDirection,\n    }),\n    ...(resolvedWrap && {\n      '--flex-wrap': resolvedWrap,\n    }),\n    ...(resolvedAlign && {\n      '--flex-align-items': resolvedAlign,\n    }),\n    ...(resolvedJustify && {\n      '--flex-justify-content': resolvedJustify,\n    }),\n    ...(resolvedAlignContent && {\n      '--flex-align-content': resolvedAlignContent,\n    }),\n    ...(resolvedGap && {\n      '--flex-gap': getSpacingValue(resolvedGap, 'Flex'),\n    }),\n    ...(resolvedRowGap && {\n      '--flex-row-gap': getSpacingValue(resolvedRowGap, 'Flex'),\n    }),\n    ...(resolvedColumnGap && {\n      '--flex-column-gap': getSpacingValue(resolvedColumnGap, 'Flex'),\n    }),\n    ...(flex !== undefined && {\n      '--flex': flex,\n    }),\n    ...(grow !== undefined && {\n      '--flex-grow': grow,\n    }),\n    ...(shrink !== undefined && {\n      '--flex-shrink': shrink,\n    }),\n    ...(basis !== undefined && {\n      '--flex-basis': basis,\n    }),\n    ...(width && {\n      '--flex-width': width,\n    }),\n    ...(height && {\n      '--flex-height': height,\n    }),\n    ...(minWidth && {\n      '--flex-min-width': minWidth,\n    }),\n    ...(minHeight && {\n      '--flex-min-height': minHeight,\n    }),\n    ...(maxWidth && {\n      '--flex-max-width': maxWidth,\n    }),\n    ...(maxHeight && {\n      '--flex-max-height': maxHeight,\n    }),\n    ...style,\n  } as React.CSSProperties;\n\n  return (\n    <Element\n      className={classNames('eds-layout-flex', className)}\n      style={flexStyle}\n      {...rest}\n    >\n      {children}\n    </Element>\n  );\n};\n"],"names":["useResponsiveValue","getSpacingValue","jsx"],"mappings":";;;;;;;AAyEA,MAAM,iBAAiB;AAEhB,MAAM,OAAO,CAAsD;AAAA,EACxE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAiC;AAC/B,QAAM,UAA6B,MAAM;AAEzC,QAAM,oBAAoBA,mBAAAA,mBAAmB,SAAS;AACtD,QAAM,eAAeA,mBAAAA,mBAAmB,IAAI;AAC5C,QAAM,gBAAgBA,mBAAAA,mBAAmB,KAAK;AAC9C,QAAM,kBAAkBA,mBAAAA,mBAAmB,OAAO;AAClD,QAAM,uBAAuBA,mBAAAA,mBAAmB,YAAY;AAC5D,QAAM,cAAcA,mBAAAA,mBAAmB,GAAG;AAC1C,QAAM,iBAAiBA,mBAAAA,mBAAmB,MAAM;AAChD,QAAM,oBAAoBA,mBAAAA,mBAAmB,SAAS;AAEtD,QAAM,YAAiC;AAAA,IACrC,GAAI,qBAAqB;AAAA,MACvB,oBAAoB;AAAA,IAAA;AAAA,IAEtB,GAAI,gBAAgB;AAAA,MAClB,eAAe;AAAA,IAAA;AAAA,IAEjB,GAAI,iBAAiB;AAAA,MACnB,sBAAsB;AAAA,IAAA;AAAA,IAExB,GAAI,mBAAmB;AAAA,MACrB,0BAA0B;AAAA,IAAA;AAAA,IAE5B,GAAI,wBAAwB;AAAA,MAC1B,wBAAwB;AAAA,IAAA;AAAA,IAE1B,GAAI,eAAe;AAAA,MACjB,cAAcC,MAAAA,gBAAgB,aAAa,MAAM;AAAA,IAAA;AAAA,IAEnD,GAAI,kBAAkB;AAAA,MACpB,kBAAkBA,MAAAA,gBAAgB,gBAAgB,MAAM;AAAA,IAAA;AAAA,IAE1D,GAAI,qBAAqB;AAAA,MACvB,qBAAqBA,MAAAA,gBAAgB,mBAAmB,MAAM;AAAA,IAAA;AAAA,IAEhE,GAAI,SAAS,UAAa;AAAA,MACxB,UAAU;AAAA,IAAA;AAAA,IAEZ,GAAI,SAAS,UAAa;AAAA,MACxB,eAAe;AAAA,IAAA;AAAA,IAEjB,GAAI,WAAW,UAAa;AAAA,MAC1B,iBAAiB;AAAA,IAAA;AAAA,IAEnB,GAAI,UAAU,UAAa;AAAA,MACzB,gBAAgB;AAAA,IAAA;AAAA,IAElB,GAAI,SAAS;AAAA,MACX,gBAAgB;AAAA,IAAA;AAAA,IAElB,GAAI,UAAU;AAAA,MACZ,iBAAiB;AAAA,IAAA;AAAA,IAEnB,GAAI,YAAY;AAAA,MACd,oBAAoB;AAAA,IAAA;AAAA,IAEtB,GAAI,aAAa;AAAA,MACf,qBAAqB;AAAA,IAAA;AAAA,IAEvB,GAAI,YAAY;AAAA,MACd,oBAAoB;AAAA,IAAA;AAAA,IAEtB,GAAI,aAAa;AAAA,MACf,qBAAqB;AAAA,IAAA;AAAA,IAEvB,GAAG;AAAA,EAAA;AAGL,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,WAAW,mBAAmB,SAAS;AAAA,MAClD,OAAO;AAAA,MACN,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;;"}

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

@@ -1,84 +1,80 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
 const utils = require("../LayoutWrapper/utils.cjs");
 const useResponsiveValue = require("../LayoutWrapper/useResponsiveValue.cjs");
 const classNames = require("classnames");
 ;/* empty css            */
 const defaultElement = "div";
-const Grid = React.forwardRef(
-  ({
-    templateColumns,
-    templateRows,
-    gap = "m",
-    rowGap,
-    columnGap,
-    autoFlow = "row",
-    align,
-    justify,
-    alignContent,
-    height,
-    as,
-    className,
-    children,
-    style,
-    ...rest
-  }, ref) => {
-    const Element = as || defaultElement;
-    const resolvedTemplateColumns = useResponsiveValue.useResponsiveValue(templateColumns) ?? "repeat(12, 1fr)";
-    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 resolvedAlign = useResponsiveValue.useResponsiveValue(align);
-    const resolvedJustify = useResponsiveValue.useResponsiveValue(justify);
-    const resolvedAlignContent = useResponsiveValue.useResponsiveValue(alignContent);
-    const gridStyle = {
-      ...resolvedTemplateColumns && {
-        "--grid-template-columns": resolvedTemplateColumns
-      },
-      ...resolvedTemplateRows && {
-        "--grid-template-rows": resolvedTemplateRows
-      },
-      ...resolvedAutoFlow && {
-        "--grid-auto-flow": resolvedAutoFlow
-      },
-      ...resolvedAlign && {
-        "--grid-align-items": resolvedAlign
-      },
-      ...resolvedJustify && {
-        "--grid-justify-content": resolvedJustify
-      },
-      ...resolvedAlignContent && {
-        "--grid-align-content": resolvedAlignContent
-      },
-      ...resolvedGap && {
-        "--grid-gap": utils.getSpacingValue(resolvedGap)
-      },
-      ...resolvedRowGap && {
-        "--grid-row-gap": utils.getSpacingValue(resolvedRowGap)
-      },
-      ...resolvedColumnGap && {
-        "--grid-column-gap": utils.getSpacingValue(resolvedColumnGap)
-      },
-      ...height && {
-        "--grid-height": height
-      },
-      ...style
-    };
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Element,
-      {
-        ref,
-        className: classNames("eds-layout-grid", className),
-        style: gridStyle,
-        ...rest,
-        children
-      }
-    );
-  }
-);
+const Grid = ({
+  templateColumns,
+  templateRows,
+  gap = "m",
+  rowGap,
+  columnGap,
+  autoFlow = "row",
+  align,
+  justify,
+  alignContent,
+  height,
+  as,
+  className,
+  children,
+  style,
+  ...rest
+}) => {
+  const Element = as || defaultElement;
+  const resolvedTemplateColumns = useResponsiveValue.useResponsiveValue(templateColumns) ?? "repeat(12, 1fr)";
+  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 resolvedAlign = useResponsiveValue.useResponsiveValue(align);
+  const resolvedJustify = useResponsiveValue.useResponsiveValue(justify);
+  const resolvedAlignContent = useResponsiveValue.useResponsiveValue(alignContent);
+  const gridStyle = {
+    ...resolvedTemplateColumns && {
+      "--grid-template-columns": resolvedTemplateColumns
+    },
+    ...resolvedTemplateRows && {
+      "--grid-template-rows": resolvedTemplateRows
+    },
+    ...resolvedAutoFlow && {
+      "--grid-auto-flow": resolvedAutoFlow
+    },
+    ...resolvedAlign && {
+      "--grid-align-items": resolvedAlign
+    },
+    ...resolvedJustify && {
+      "--grid-justify-content": resolvedJustify
+    },
+    ...resolvedAlignContent && {
+      "--grid-align-content": resolvedAlignContent
+    },
+    ...resolvedGap && {
+      "--grid-gap": utils.getSpacingValue(resolvedGap)
+    },
+    ...resolvedRowGap && {
+      "--grid-row-gap": utils.getSpacingValue(resolvedRowGap)
+    },
+    ...resolvedColumnGap && {
+      "--grid-column-gap": utils.getSpacingValue(resolvedColumnGap)
+    },
+    ...height && {
+      "--grid-height": height
+    },
+    ...style
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Element,
+    {
+      className: classNames("eds-layout-grid", className),
+      style: gridStyle,
+      ...rest,
+      children
+    }
+  );
+};
 exports.Grid = Grid;
 //# sourceMappingURL=Grid.cjs.map

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 = <E extends React.ElementType = typeof defaultElement>({\n  templateColumns,\n  templateRows,\n  gap = 'm',\n  rowGap,\n  columnGap,\n  autoFlow = 'row',\n  align,\n  justify,\n  alignContent,\n  height,\n  as,\n  className,\n  children,\n  style,\n  ...rest\n}: GridProps<E>): JSX.Element => {\n  const Element: React.ElementType = as || defaultElement;\n\n  const resolvedTemplateColumns =\n    useResponsiveValue(templateColumns) ?? 'repeat(12, 1fr)';\n  const resolvedTemplateRows = useResponsiveValue(templateRows);\n  const resolvedGap = useResponsiveValue(gap);\n  const resolvedRowGap = useResponsiveValue(rowGap);\n  const resolvedColumnGap = useResponsiveValue(columnGap);\n  const resolvedAutoFlow = useResponsiveValue(autoFlow) ?? 'row';\n  const resolvedAlign = useResponsiveValue(align);\n  const resolvedJustify = useResponsiveValue(justify);\n  const resolvedAlignContent = useResponsiveValue(alignContent);\n\n  const gridStyle: React.CSSProperties = {\n    ...(resolvedTemplateColumns && {\n      '--grid-template-columns': resolvedTemplateColumns,\n    }),\n    ...(resolvedTemplateRows && {\n      '--grid-template-rows': resolvedTemplateRows,\n    }),\n    ...(resolvedAutoFlow && {\n      '--grid-auto-flow': resolvedAutoFlow,\n    }),\n    ...(resolvedAlign && {\n      '--grid-align-items': resolvedAlign,\n    }),\n    ...(resolvedJustify && {\n      '--grid-justify-content': resolvedJustify,\n    }),\n    ...(resolvedAlignContent && {\n      '--grid-align-content': resolvedAlignContent,\n    }),\n    ...(resolvedGap && {\n      '--grid-gap': getSpacingValue(resolvedGap),\n    }),\n    ...(resolvedRowGap && {\n      '--grid-row-gap': getSpacingValue(resolvedRowGap),\n    }),\n    ...(resolvedColumnGap && {\n      '--grid-column-gap': getSpacingValue(resolvedColumnGap),\n    }),\n    ...(height && {\n      '--grid-height': height,\n    }),\n    ...style,\n  } as React.CSSProperties;\n\n  return (\n    <Element\n      className={classNames('eds-layout-grid', className)}\n      style={gridStyle}\n      {...rest}\n    >\n      {children}\n    </Element>\n  );\n};\n"],"names":["useResponsiveValue","getSpacingValue","jsx"],"mappings":";;;;;;;AA6DA,MAAM,iBAAiB;AAEhB,MAAM,OAAO,CAAsD;AAAA,EACxE;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAiC;AAC/B,QAAM,UAA6B,MAAM;AAEzC,QAAM,0BACJA,mBAAAA,mBAAmB,eAAe,KAAK;AACzC,QAAM,uBAAuBA,mBAAAA,mBAAmB,YAAY;AAC5D,QAAM,cAAcA,mBAAAA,mBAAmB,GAAG;AAC1C,QAAM,iBAAiBA,mBAAAA,mBAAmB,MAAM;AAChD,QAAM,oBAAoBA,mBAAAA,mBAAmB,SAAS;AACtD,QAAM,mBAAmBA,mBAAAA,mBAAmB,QAAQ,KAAK;AACzD,QAAM,gBAAgBA,mBAAAA,mBAAmB,KAAK;AAC9C,QAAM,kBAAkBA,mBAAAA,mBAAmB,OAAO;AAClD,QAAM,uBAAuBA,mBAAAA,mBAAmB,YAAY;AAE5D,QAAM,YAAiC;AAAA,IACrC,GAAI,2BAA2B;AAAA,MAC7B,2BAA2B;AAAA,IAAA;AAAA,IAE7B,GAAI,wBAAwB;AAAA,MAC1B,wBAAwB;AAAA,IAAA;AAAA,IAE1B,GAAI,oBAAoB;AAAA,MACtB,oBAAoB;AAAA,IAAA;AAAA,IAEtB,GAAI,iBAAiB;AAAA,MACnB,sBAAsB;AAAA,IAAA;AAAA,IAExB,GAAI,mBAAmB;AAAA,MACrB,0BAA0B;AAAA,IAAA;AAAA,IAE5B,GAAI,wBAAwB;AAAA,MAC1B,wBAAwB;AAAA,IAAA;AAAA,IAE1B,GAAI,eAAe;AAAA,MACjB,cAAcC,MAAAA,gBAAgB,WAAW;AAAA,IAAA;AAAA,IAE3C,GAAI,kBAAkB;AAAA,MACpB,kBAAkBA,MAAAA,gBAAgB,cAAc;AAAA,IAAA;AAAA,IAElD,GAAI,qBAAqB;AAAA,MACvB,qBAAqBA,MAAAA,gBAAgB,iBAAiB;AAAA,IAAA;AAAA,IAExD,GAAI,UAAU;AAAA,MACZ,iBAAiB;AAAA,IAAA;AAAA,IAEnB,GAAG;AAAA,EAAA;AAGL,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,WAAW,mBAAmB,SAAS;AAAA,MAClD,OAAO;AAAA,MACN,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;;"}

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

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
 const useResponsiveValue = require("../LayoutWrapper/useResponsiveValue.cjs");
 const classNames = require("classnames");
 ;/* empty css                */
@@ -15,39 +14,36 @@ const formatGridSpan = (value) => {
   }
   return value;
 };
-const GridItem = React.forwardRef(
-  ({
-    colSpan,
-    rowSpan = 1,
-    as,
-    className,
-    children,
-    style,
-    ...rest
-  }, ref) => {
-    const Element = as || defaultElement;
-    const resolvedColSpan = useResponsiveValue.useResponsiveValue(colSpan);
-    const resolvedRowSpan = useResponsiveValue.useResponsiveValue(rowSpan);
-    const itemStyle = {
-      ...resolvedColSpan !== void 0 && {
-        "--grid-item-column": formatGridSpan(resolvedColSpan)
-      },
-      ...resolvedRowSpan !== void 0 && {
-        "--grid-item-row": formatGridSpan(resolvedRowSpan)
-      },
-      ...style
-    };
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Element,
-      {
-        ref,
-        className: classNames("eds-layout-grid-item", className),
-        style: itemStyle,
-        ...rest,
-        children
-      }
-    );
-  }
-);
+const GridItem = ({
+  colSpan,
+  rowSpan = 1,
+  as,
+  className,
+  children,
+  style,
+  ...rest
+}) => {
+  const Element = as || defaultElement;
+  const resolvedColSpan = useResponsiveValue.useResponsiveValue(colSpan);
+  const resolvedRowSpan = useResponsiveValue.useResponsiveValue(rowSpan);
+  const itemStyle = {
+    ...resolvedColSpan !== void 0 && {
+      "--grid-item-column": formatGridSpan(resolvedColSpan)
+    },
+    ...resolvedRowSpan !== void 0 && {
+      "--grid-item-row": formatGridSpan(resolvedRowSpan)
+    },
+    ...style
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Element,
+    {
+      className: classNames("eds-layout-grid-item", className),
+      style: itemStyle,
+      ...rest,
+      children
+    }
+  );
+};
 exports.GridItem = GridItem;
 //# sourceMappingURL=GridItem.cjs.map

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

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