@entur/layout 3.3.2 → 3.4.0-beta.0

package/dist/beta/cjs/Contrast.cjs

@@ -0,0 +1,21 @@
+"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

@@ -0,0 +1 @@
+{"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/cjs/Flex/Flex.cjs

@@ -0,0 +1,111 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const classNames = require("classnames");
+const utils = require("../LayoutWrapper/utils.cjs");
+const useResponsiveValue = require("../LayoutWrapper/useResponsiveValue.cjs");
+;/* empty css            */
+const defaultElement = "div";
+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

@@ -0,0 +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 = <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/Flex/FlexSpacer.cjs

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const classNames = require("classnames");
+const defaultElement = "div";
+const FlexSpacer = ({
+  as,
+  className,
+  style,
+  ...rest
+}) => {
+  const Element = as || defaultElement;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Element,
+    {
+      className: classNames("eds-layout-flex-spacer", className),
+      style,
+      ...rest,
+      role: "presentation",
+      "aria-hidden": "true"
+    }
+  );
+};
+exports.FlexSpacer = FlexSpacer;
+//# sourceMappingURL=FlexSpacer.cjs.map

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

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

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const Flex = require("./Flex.cjs");
+const FlexSpacer = require("./FlexSpacer.cjs");
+const FlexComponent = Object.assign(Flex.Flex, {
+  Spacer: FlexSpacer.FlexSpacer
+});
+FlexComponent.Spacer.displayName = "Flex.Spacer";
+exports.FlexSpacer = FlexSpacer.FlexSpacer;
+exports.Flex = FlexComponent;
+exports.FlexComponent = FlexComponent;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/beta/Flex/index.ts"],"sourcesContent":["import { Flex as FlexParent } from './Flex';\nimport { FlexSpacer } from './FlexSpacer';\n\ntype Flex = typeof FlexParent & {\n  /**\n   * A spacer element that fills available space in Flex.\n   *\n   * @example\n   * <Flex>\n   *   <Button>Left</Button>\n   *   <Flex.Spacer />\n   *   <Button>Right</Button>\n   * </Flex>\n   */\n  Spacer: typeof FlexSpacer & { displayName?: string };\n};\n\n/**\n * A Flex component for organizing content in a flexible layout.\n */\nexport const FlexComponent: Flex = Object.assign(FlexParent, {\n  Spacer: FlexSpacer,\n});\n\nFlexComponent.Spacer.displayName = 'Flex.Spacer';\n\nexport type { FlexProps, FlexOwnProps, FlexSpacingValue } from './Flex';\nexport type { FlexSpacerProps, FlexSpacerOwnProps } from './FlexSpacer';\nexport { FlexComponent as Flex, FlexSpacer };\n"],"names":["FlexParent","FlexSpacer"],"mappings":";;;;AAoBO,MAAM,gBAAsB,OAAO,OAAOA,WAAY;AAAA,EAC3D,QAAQC,WAAAA;AACV,CAAC;AAED,cAAc,OAAO,cAAc;;;;"}

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

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const utils = require("../LayoutWrapper/utils.cjs");
+const useResponsiveValue = require("../LayoutWrapper/useResponsiveValue.cjs");
+const classNames = require("classnames");
+;/* empty css            */
+const defaultElement = "div";
+const Grid = ({
+  templateColumns,
+  templateRows,
+  gap = "m",
+  rowGap,
+  columnGap,
+  autoFlow = "row",
+  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 gridStyle = {
+    ...resolvedTemplateColumns && {
+      "--grid-template-columns": resolvedTemplateColumns
+    },
+    ...resolvedTemplateRows && {
+      "--grid-template-rows": resolvedTemplateRows
+    },
+    ...resolvedAutoFlow && {
+      "--grid-auto-flow": resolvedAutoFlow
+    },
+    ...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

@@ -0,0 +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\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  /** 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  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\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    ...(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":";;;;;;;AAmDA,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,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;AAEzD,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,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

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const useResponsiveValue = require("../LayoutWrapper/useResponsiveValue.cjs");
+const classNames = require("classnames");
+;/* empty css                */
+const defaultElement = "div";
+const formatGridSpan = (value) => {
+  if (value === void 0) {
+    return void 0;
+  }
+  if (typeof value === "number") {
+    return `span ${value}`;
+  }
+  return value;
+};
+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

@@ -0,0 +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 = <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;;"}

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const Grid = require("./Grid.cjs");
+const GridItem = require("./GridItem.cjs");
+const GridComponent = Object.assign(Grid.Grid, {
+  Item: GridItem.GridItem
+});
+GridComponent.Item.displayName = "Grid.Item";
+exports.GridItem = GridItem.GridItem;
+exports.Grid = GridComponent;
+exports.GridComponent = GridComponent;
+//# sourceMappingURL=index.cjs.map

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

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

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const utils = require("./utils.cjs");
+const LayoutContext = React.createContext(null);
+const LayoutWrapper = ({
+  breakpoints: customBreakpoints,
+  children
+}) => {
+  const breakpoints = React.useMemo(
+    () => ({
+      ...utils.DEFAULT_BREAKPOINTS,
+      ...customBreakpoints
+    }),
+    [customBreakpoints]
+  );
+  const layoutValues = React.useMemo(
+    () => ({
+      breakpoints
+    }),
+    [breakpoints]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(LayoutContext.Provider, { value: layoutValues, children });
+};
+const useLayoutContext = () => {
+  return React.useContext(LayoutContext);
+};
+exports.LayoutWrapper = LayoutWrapper;
+exports.useLayoutContext = useLayoutContext;
+//# sourceMappingURL=LayoutWrapper.cjs.map

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

@@ -0,0 +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;;;"}

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const utils = require("./utils.cjs");
+const LayoutWrapper = require("./LayoutWrapper.cjs");
+const useLayoutValues = () => {
+  const context = LayoutWrapper.useLayoutContext();
+  if (context) {
+    return context;
+  }
+  return {
+    breakpoints: utils.DEFAULT_BREAKPOINTS
+  };
+};
+exports.useLayoutValues = useLayoutValues;
+//# sourceMappingURL=useLayoutValues.cjs.map

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

@@ -0,0 +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;;"}

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

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const useLayoutValues = require("./useLayoutValues.cjs");
+const isResponsiveObject = (value) => {
+  return typeof value === "object" && value !== null && !Array.isArray(value) && ("sm" in value || "md" in value || "lg" in value);
+};
+const getCurrentBreakpoint = (breakpoints, windowWidth) => {
+  if (windowWidth >= breakpoints.lg) {
+    return "lg";
+  }
+  if (windowWidth >= breakpoints.md) {
+    return "md";
+  }
+  return "sm";
+};
+const useResponsiveValue = (value) => {
+  const { breakpoints } = useLayoutValues.useLayoutValues();
+  const [currentBreakpoint, setCurrentBreakpoint] = React.useState(() => {
+    if (typeof window === "undefined") {
+      return "sm";
+    }
+    return getCurrentBreakpoint(breakpoints, window.innerWidth);
+  });
+  React.useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+      return;
+    }
+    const updateBreakpoint = () => {
+      setCurrentBreakpoint(
+        getCurrentBreakpoint(breakpoints, window.innerWidth)
+      );
+    };
+    const mediaQueries = [
+      window.matchMedia(`(min-width: ${breakpoints.md}px)`),
+      window.matchMedia(`(min-width: ${breakpoints.lg}px)`)
+    ];
+    updateBreakpoint();
+    const handleChange = () => {
+      updateBreakpoint();
+    };
+    mediaQueries.forEach((mq) => {
+      if (mq.addEventListener) {
+        mq.addEventListener("change", handleChange);
+      } else {
+        mq.addListener(handleChange);
+      }
+    });
+    return () => {
+      mediaQueries.forEach((mq) => {
+        if (mq.removeEventListener) {
+          mq.removeEventListener("change", handleChange);
+        } else {
+          mq.removeListener(handleChange);
+        }
+      });
+    };
+  }, [breakpoints]);
+  if (!value) {
+    return void 0;
+  }
+  if (!isResponsiveObject(value)) {
+    return value;
+  }
+  const responsiveValue = value[currentBreakpoint];
+  if (responsiveValue !== void 0) {
+    return responsiveValue;
+  }
+  const fallbackOrder = currentBreakpoint === "lg" ? ["lg", "md", "sm"] : currentBreakpoint === "md" ? ["md", "sm"] : ["sm"];
+  for (const bp of fallbackOrder) {
+    if (value[bp] !== void 0) {
+      return value[bp];
+    }
+  }
+  return void 0;
+};
+exports.useResponsiveValue = useResponsiveValue;
+//# sourceMappingURL=useResponsiveValue.cjs.map

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

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

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

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const VALID_SPACING_VALUES = [
+  "2xs",
+  "xs",
+  "s",
+  "s-m",
+  "m",
+  "m-l",
+  "l",
+  "xl",
+  "2xl",
+  "3xl",
+  "4xl",
+  "5xl",
+  "6xl",
+  "7xl",
+  "8xl",
+  "9xl",
+  "10xl",
+  "11xl",
+  "none"
+];
+const DEFAULT_BREAKPOINTS = {
+  sm: 0,
+  md: 800,
+  lg: 1200
+};
+const isValidSpacingValue = (value) => {
+  return typeof value === "string" && VALID_SPACING_VALUES.includes(value);
+};
+const getSpacingValue = (spacing, componentName = "Grid") => {
+  if (!spacing) return void 0;
+  if (spacing === "none") return "0";
+  if (!isValidSpacingValue(spacing)) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        `Invalid ${componentName} spacing value: "${spacing}". Valid values are: ${VALID_SPACING_VALUES.join(
+          ", "
+        )}. Falling back to undefined.`
+      );
+    }
+    return void 0;
+  }
+  return `var(--${spacing})`;
+};
+exports.DEFAULT_BREAKPOINTS = DEFAULT_BREAKPOINTS;
+exports.getSpacingValue = getSpacingValue;
+//# sourceMappingURL=utils.cjs.map

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

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

package/dist/beta/cjs/index.cjs

@@ -0,0 +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$2 = require("./templates/index.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.Template = index$2.Template;
+exports.GridItem = GridItem.GridItem;
+exports.LayoutWrapper = LayoutWrapper.LayoutWrapper;
+exports.useLayoutValues = useLayoutValues.useLayoutValues;
+exports.FlexSpacer = FlexSpacer.FlexSpacer;
+//# sourceMappingURL=index.cjs.map

package/dist/beta/cjs/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}