@entur/layout 3.3.3 → 3.4.0

package/dist/beta/esm/LayoutWrapper/useResponsiveValue.mjs

@@ -0,0 +1,78 @@
+import { useState, useEffect } from "react";
+import { useLayoutValues } from "./useLayoutValues.mjs";
+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();
+  const [currentBreakpoint, setCurrentBreakpoint] = useState(() => {
+    if (typeof window === "undefined") {
+      return "sm";
+    }
+    return getCurrentBreakpoint(breakpoints, window.innerWidth);
+  });
+  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;
+};
+export {
+  useResponsiveValue
+};
+//# sourceMappingURL=useResponsiveValue.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useResponsiveValue.mjs","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":[],"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,IAAgB,gBAAA;AACxB,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAEhD,MAAM;AACN,QAAI,OAAO,WAAW,aAAa;AACjC,aAAO;AAAA,IACT;AACA,WAAO,qBAAqB,aAAa,OAAO,UAAU;AAAA,EAC5D,CAAC;AAED,YAAU,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/esm/LayoutWrapper/utils.mjs

@@ -0,0 +1,49 @@
+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})`;
+};
+export {
+  DEFAULT_BREAKPOINTS,
+  getSpacingValue
+};
+//# sourceMappingURL=utils.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.mjs","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/esm/index.mjs

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

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

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

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

@@ -0,0 +1,90 @@
+import { jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { Contrast } from "../Contrast.mjs";
+import { FlexComponent } from "../Flex/index.mjs";
+import { GridComponent } from "../Grid/index.mjs";
+/* empty css              */
+const SidebarLogo = ({ children, ...rest }) => {
+  return /* @__PURE__ */ jsx("div", { ...rest, children });
+};
+const SidebarUser = ({ children, ...rest }) => {
+  return /* @__PURE__ */ jsx("div", { ...rest, children });
+};
+const SidebarData = ({ children, ...rest }) => {
+  return /* @__PURE__ */ jsx("div", { ...rest, children });
+};
+const SidebarNavigation = ({
+  children,
+  className,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      className: classNames(
+        "eds-layout-template-sidebar__navigation",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+};
+const SidebarFooter = ({
+  children,
+  className,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx(
+    "footer",
+    {
+      className: classNames("eds-layout-template-sidebar__footer", className),
+      ...rest,
+      children
+    }
+  );
+};
+const SidebarRoot = ({
+  children,
+  className,
+  style,
+  contrast = true,
+  ...rest
+}) => {
+  const WrapperElement = contrast ? Contrast : "div";
+  return /* @__PURE__ */ jsx(GridComponent.Item, { as: WrapperElement, colSpan: "1 / 2", rowSpan: "1 / 2", children: /* @__PURE__ */ jsx(
+    FlexComponent,
+    {
+      as: "aside",
+      direction: "column",
+      gap: "m",
+      className: classNames(
+        "eds-layout-template-sidebar",
+        {
+          "eds-layout-template-sidebar--plain": !contrast
+        },
+        className
+      ),
+      style,
+      ...rest,
+      children
+    }
+  ) });
+};
+const Sidebar = Object.assign(SidebarRoot, {
+  Logo: SidebarLogo,
+  User: SidebarUser,
+  Data: SidebarData,
+  Navigation: SidebarNavigation,
+  Footer: SidebarFooter
+});
+Sidebar.displayName = "Template.Portal.Sidebar";
+Sidebar.Logo.displayName = "Template.Portal.Sidebar.Logo";
+Sidebar.User.displayName = "Template.Portal.Sidebar.User";
+Sidebar.Data.displayName = "Template.Portal.Sidebar.Data";
+Sidebar.Navigation.displayName = "Template.Portal.Sidebar.Navigation";
+Sidebar.Footer.displayName = "Template.Portal.Sidebar.Footer";
+export {
+  Sidebar
+};
+//# sourceMappingURL=Sidebar.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.mjs","sources":["../../../../src/beta/templates/Sidebar.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { Contrast } from '../../Contrast';\nimport { Flex } from '../Flex';\nimport { Grid } from '../Grid';\nimport './Sidebar.scss';\n\nexport type SidebarProps = React.HTMLAttributes<HTMLElement> & {\n  /** Toggle contrast styling for the sidebar */\n  contrast?: boolean;\n};\n\nexport type SidebarSectionProps = React.HTMLAttributes<HTMLElement>;\n\nconst SidebarLogo: React.FC<SidebarSectionProps> = ({ children, ...rest }) => {\n  return <div {...rest}>{children}</div>;\n};\n\nconst SidebarUser: React.FC<SidebarSectionProps> = ({ children, ...rest }) => {\n  return <div {...rest}>{children}</div>;\n};\n\nconst SidebarData: React.FC<SidebarSectionProps> = ({ children, ...rest }) => {\n  return <div {...rest}>{children}</div>;\n};\n\nconst SidebarNavigation: React.FC<SidebarSectionProps> = ({\n  children,\n  className,\n  ...rest\n}) => {\n  return (\n    <nav\n      className={classNames(\n        'eds-layout-template-sidebar__navigation',\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </nav>\n  );\n};\n\nconst SidebarFooter: React.FC<SidebarSectionProps> = ({\n  children,\n  className,\n  ...rest\n}) => {\n  return (\n    <footer\n      className={classNames('eds-layout-template-sidebar__footer', className)}\n      {...rest}\n    >\n      {children}\n    </footer>\n  );\n};\n\nconst SidebarRoot: React.FC<SidebarProps> = ({\n  children,\n  className,\n  style,\n  contrast = true,\n  ...rest\n}) => {\n  const WrapperElement = contrast ? Contrast : 'div';\n  return (\n    <Grid.Item as={WrapperElement} colSpan=\"1 / 2\" rowSpan=\"1 / 2\">\n      <Flex\n        as=\"aside\"\n        direction=\"column\"\n        gap=\"m\"\n        className={classNames(\n          'eds-layout-template-sidebar',\n          {\n            'eds-layout-template-sidebar--plain': !contrast,\n          },\n          className,\n        )}\n        style={style}\n        {...rest}\n      >\n        {children}\n      </Flex>\n    </Grid.Item>\n  );\n};\n\nexport type SidebarComponent = typeof SidebarRoot & {\n  Logo: typeof SidebarLogo;\n  User: typeof SidebarUser;\n  Data: typeof SidebarData;\n  Navigation: typeof SidebarNavigation;\n  Footer: typeof SidebarFooter;\n};\n\nexport const Sidebar: SidebarComponent = Object.assign(SidebarRoot, {\n  Logo: SidebarLogo,\n  User: SidebarUser,\n  Data: SidebarData,\n  Navigation: SidebarNavigation,\n  Footer: SidebarFooter,\n});\n\nSidebar.displayName = 'Template.Portal.Sidebar';\nSidebar.Logo.displayName = 'Template.Portal.Sidebar.Logo';\nSidebar.User.displayName = 'Template.Portal.Sidebar.User';\nSidebar.Data.displayName = 'Template.Portal.Sidebar.Data';\nSidebar.Navigation.displayName = 'Template.Portal.Sidebar.Navigation';\nSidebar.Footer.displayName = 'Template.Portal.Sidebar.Footer';\n"],"names":["Grid","Flex"],"mappings":";;;;;;AAcA,MAAM,cAA6C,CAAC,EAAE,UAAU,GAAG,WAAW;AAC5E,SAAO,oBAAC,OAAA,EAAK,GAAG,MAAO,SAAA,CAAS;AAClC;AAEA,MAAM,cAA6C,CAAC,EAAE,UAAU,GAAG,WAAW;AAC5E,SAAO,oBAAC,OAAA,EAAK,GAAG,MAAO,SAAA,CAAS;AAClC;AAEA,MAAM,cAA6C,CAAC,EAAE,UAAU,GAAG,WAAW;AAC5E,SAAO,oBAAC,OAAA,EAAK,GAAG,MAAO,SAAA,CAAS;AAClC;AAEA,MAAM,oBAAmD,CAAC;AAAA,EACxD;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,MAAM,gBAA+C,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,WAAW,uCAAuC,SAAS;AAAA,MACrE,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,MAAM,cAAsC,CAAC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,GAAG;AACL,MAAM;AACJ,QAAM,iBAAiB,WAAW,WAAW;AAC7C,SACE,oBAACA,cAAK,MAAL,EAAU,IAAI,gBAAgB,SAAQ,SAAQ,SAAQ,SACrD,UAAA;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH,WAAU;AAAA,MACV,KAAI;AAAA,MACJ,WAAW;AAAA,QACT;AAAA,QACA;AAAA,UACE,sCAAsC,CAAC;AAAA,QAAA;AAAA,QAEzC;AAAA,MAAA;AAAA,MAEF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;AAUO,MAAM,UAA4B,OAAO,OAAO,aAAa;AAAA,EAClE,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,QAAQ;AACV,CAAC;AAED,QAAQ,cAAc;AACtB,QAAQ,KAAK,cAAc;AAC3B,QAAQ,KAAK,cAAc;AAC3B,QAAQ,KAAK,cAAc;AAC3B,QAAQ,WAAW,cAAc;AACjC,QAAQ,OAAO,cAAc;"}

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

@@ -0,0 +1,8 @@
+import { Portal } from "./portal/Portal.mjs";
+const Template = {
+  Portal
+};
+export {
+  Template
+};
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../../src/beta/templates/index.ts"],"sourcesContent":["import { Portal } from './portal';\nimport type { PortalComponent, PortalMainProps, PortalProps } from './portal';\nimport type {\n  SidebarComponent,\n  SidebarProps,\n  SidebarSectionProps,\n} from './Sidebar';\n\nexport type TemplateComponent = {\n  Portal: PortalComponent;\n};\n\nexport const Template: TemplateComponent = {\n  Portal,\n};\n\nexport type {\n  PortalComponent,\n  PortalMainProps,\n  PortalProps,\n  SidebarComponent,\n  SidebarProps,\n  SidebarSectionProps,\n};\n"],"names":[],"mappings":";AAYO,MAAM,WAA8B;AAAA,EACzC;AACF;"}

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

@@ -0,0 +1,51 @@
+import { jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { GridComponent } from "../../Grid/index.mjs";
+import { Sidebar } from "../Sidebar.mjs";
+/* empty css             */
+const PortalRoot = ({
+  children,
+  className,
+  style,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx(
+    GridComponent,
+    {
+      templateColumns: "var(--eds-sidebar-width, min-content) minmax(0, 1fr)",
+      gap: "m",
+      className: classNames("eds-layout-template-portal", className),
+      style,
+      ...rest,
+      children
+    }
+  );
+};
+const PortalMain = ({
+  children,
+  className,
+  style,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx(
+    GridComponent.Item,
+    {
+      as: "main",
+      colSpan: "2 / -1",
+      className: classNames("eds-layout-template-portal__main", className),
+      style,
+      ...rest,
+      children
+    }
+  );
+};
+const Portal = Object.assign(PortalRoot, {
+  Sidebar,
+  Main: PortalMain
+});
+Portal.displayName = "Template.Portal";
+Portal.Main.displayName = "Template.Portal.Main";
+export {
+  Portal
+};
+//# sourceMappingURL=Portal.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Portal.mjs","sources":["../../../../../src/beta/templates/portal/Portal.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { Grid } from '../../Grid';\nimport { Sidebar, SidebarComponent } from '../Sidebar';\nimport './Portal.scss';\n\nexport type PortalProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport type PortalMainProps = React.HTMLAttributes<HTMLElement>;\n\nconst PortalRoot: React.FC<PortalProps> = ({\n  children,\n  className,\n  style,\n  ...rest\n}) => {\n  return (\n    <Grid\n      templateColumns=\"var(--eds-sidebar-width, min-content) minmax(0, 1fr)\"\n      gap=\"m\"\n      className={classNames('eds-layout-template-portal', className)}\n      style={style}\n      {...rest}\n    >\n      {children}\n    </Grid>\n  );\n};\n\nconst PortalMain: React.FC<PortalMainProps> = ({\n  children,\n  className,\n  style,\n  ...rest\n}) => {\n  return (\n    <Grid.Item\n      as=\"main\"\n      colSpan=\"2 / -1\"\n      className={classNames('eds-layout-template-portal__main', className)}\n      style={style}\n      {...rest}\n    >\n      {children}\n    </Grid.Item>\n  );\n};\n\nexport type PortalComponent = typeof PortalRoot & {\n  Sidebar: SidebarComponent;\n  Main: typeof PortalMain;\n};\n\nexport const Portal: PortalComponent = Object.assign(PortalRoot, {\n  Sidebar,\n  Main: PortalMain,\n});\n\nPortal.displayName = 'Template.Portal';\nPortal.Main.displayName = 'Template.Portal.Main';\n"],"names":["Grid"],"mappings":";;;;;AAUA,MAAM,aAAoC,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACE;AAAA,IAACA;AAAAA,IAAA;AAAA,MACC,iBAAgB;AAAA,MAChB,KAAI;AAAA,MACJ,WAAW,WAAW,8BAA8B,SAAS;AAAA,MAC7D;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,MAAM,aAAwC,CAAC;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACE;AAAA,IAACA,cAAK;AAAA,IAAL;AAAA,MACC,IAAG;AAAA,MACH,SAAQ;AAAA,MACR,WAAW,WAAW,oCAAoC,SAAS;AAAA,MACnE;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;AAOO,MAAM,SAA0B,OAAO,OAAO,YAAY;AAAA,EAC/D;AAAA,EACA,MAAM;AACR,CAAC;AAED,OAAO,cAAc;AACrB,OAAO,KAAK,cAAc;"}

package/dist/beta/styles/index.css

@@ -0,0 +1,197 @@
+:root,
+[data-view-mode=standard]{
+  /* number */
+  --2xs:var(--size-3);
+  --xs:var(--size-5);
+  --s:var(--size-6);
+  --s-m:var(--size-8);
+  --m:var(--size-9);
+  --m-l:var(--size-10);
+  --l:var(--size-11);
+  --xl:var(--size-12);
+  --2xl:var(--size-13);
+  --3xl:var(--size-14);
+  --4xl:var(--size-16);
+  --5xl:var(--size-17);
+  --6xl:var(--size-18);
+  --7xl:var(--size-19);
+  --8xl:var(--size-20);
+  --9xl:var(--size-21);
+  --10xl:var(--size-22);
+  --11xl:var(--size-23);
+}
+
+[data-view-mode=compact]{
+  /* number */
+  --2xs:var(--size-2);
+  --xs:var(--size-3);
+  --s:var(--size-5);
+  --s-m:var(--size-6);
+  --m:var(--size-8);
+  --m-l:var(--size-9);
+  --l:var(--size-10);
+  --xl:var(--size-11);
+  --2xl:var(--size-12);
+  --3xl:var(--size-13);
+  --4xl:var(--size-14);
+  --5xl:var(--size-16);
+  --6xl:var(--size-17);
+  --7xl:var(--size-18);
+  --8xl:var(--size-19);
+  --9xl:var(--size-20);
+  --10xl:var(--size-21);
+  --11xl:var(--size-22);
+}
+
+[data-view-mode=display]{
+  /* number */
+  --2xs:var(--size-5);
+  --xs:var(--size-8);
+  --s:var(--size-10);
+  --s-m:var(--size-11);
+  --m:var(--size-13);
+  --m-l:var(--size-15);
+  --l:var(--size-18);
+  --xl:var(--size-19);
+  --2xl:var(--size-20);
+  --3xl:var(--size-21);
+  --4xl:var(--size-23);
+  --5xl:var(--size-24);
+  --6xl:var(--size-25);
+  --7xl:var(--size-27);
+  --8xl:var(--size-28);
+  --9xl:var(--size-29);
+  --10xl:var(--size-30);
+  --11xl:var(--size-31);
+}:where(.eds-layout-grid){
+  display:grid;
+  grid-template-columns:repeat(12, 1fr);
+  grid-template-columns:var(--grid-template-columns, repeat(12, 1fr));
+  grid-template-rows:var(--grid-template-rows);
+  grid-auto-flow:row;
+  grid-auto-flow:var(--grid-auto-flow, row);
+  -webkit-box-align:var(--grid-align-items);
+  -webkit-align-items:var(--grid-align-items);
+     -moz-box-align:var(--grid-align-items);
+          align-items:var(--grid-align-items);
+  -webkit-box-pack:var(--grid-justify-content);
+  -webkit-justify-content:var(--grid-justify-content);
+     -moz-box-pack:var(--grid-justify-content);
+          justify-content:var(--grid-justify-content);
+  -webkit-align-content:var(--grid-align-content);
+          align-content:var(--grid-align-content);
+  grid-gap:var(--grid-gap);
+  gap:var(--grid-gap);
+  grid-row-gap:var(--grid-row-gap, var(--grid-gap));
+  row-gap:var(--grid-row-gap, var(--grid-gap));
+  grid-column-gap:var(--grid-column-gap, var(--grid-gap));
+  -webkit-column-gap:var(--grid-column-gap, var(--grid-gap));
+     -moz-column-gap:var(--grid-column-gap, var(--grid-gap));
+          column-gap:var(--grid-column-gap, var(--grid-gap));
+  height:var(--grid-height);
+}
+:where(.eds-layout-grid .eds-layout-grid){
+  grid-template-columns:subgrid;
+  grid-template-rows:subgrid;
+}.eds-layout-grid-item{
+  grid-column:var(--grid-item-column);
+  grid-row:var(--grid-item-row);
+}:where(.eds-layout-flex){
+  display:-webkit-box;
+  display:-webkit-flex;
+  display:-moz-box;
+  display:flex;
+  display:var(--flex-display, flex);
+  -webkit-box-orient:horizontal;
+  -webkit-box-direction:normal;
+  -webkit-flex-direction:row;
+     -moz-box-orient:horizontal;
+     -moz-box-direction:normal;
+          flex-direction:row;
+  flex-direction:var(--flex-direction, row);
+  -webkit-flex-wrap:nowrap;
+          flex-wrap:nowrap;
+  -webkit-flex-wrap:var(--flex-wrap, nowrap);
+          flex-wrap:var(--flex-wrap, nowrap);
+  -webkit-box-align:var(--flex-align-items);
+  -webkit-align-items:var(--flex-align-items);
+     -moz-box-align:var(--flex-align-items);
+          align-items:var(--flex-align-items);
+  -webkit-box-pack:var(--flex-justify-content);
+  -webkit-justify-content:var(--flex-justify-content);
+     -moz-box-pack:var(--flex-justify-content);
+          justify-content:var(--flex-justify-content);
+  -webkit-align-content:var(--flex-align-content);
+          align-content:var(--flex-align-content);
+  gap:var(--flex-gap);
+  row-gap:var(--flex-row-gap, var(--flex-gap));
+  column-gap:var(--flex-column-gap, var(--flex-gap));
+  -webkit-column-gap:var(--flex-column-gap, var(--flex-gap));
+  -moz-column-gap:var(--flex-column-gap, var(--flex-gap));
+  -webkit-box-flex:var(--flex);
+  -webkit-flex:var(--flex);
+     -moz-box-flex:var(--flex);
+          flex:var(--flex);
+  -webkit-box-flex:var(--flex-grow);
+  -webkit-flex-grow:var(--flex-grow);
+     -moz-box-flex:var(--flex-grow);
+          flex-grow:var(--flex-grow);
+  -webkit-flex-shrink:var(--flex-shrink);
+          flex-shrink:var(--flex-shrink);
+  -webkit-flex-basis:var(--flex-basis);
+          flex-basis:var(--flex-basis);
+  width:var(--flex-width);
+  height:var(--flex-height);
+  min-width:var(--flex-min-width);
+  min-height:var(--flex-min-height);
+  max-width:var(--flex-max-width);
+  max-height:var(--flex-max-height);
+}
+
+.eds-layout-flex-spacer{
+  -webkit-box-flex:1;
+  -webkit-flex:1 1 0%;
+     -moz-box-flex:1;
+          flex:1 1 0%;
+}.eds-layout-template-sidebar{
+  padding:1rem;
+  padding:var(--eds-sidebar-padding, 1rem);
+  height:100%;
+  width:20rem;
+  width:var(--eds-sidebar-width, 20rem);
+}
+
+.eds-layout-template-sidebar--plain{
+  background-color:var(--components-menu-sidenavigation-standard-background);
+}
+
+.eds-layout-template-sidebar__navigation{
+  -webkit-box-flex:1;
+  -webkit-flex:1 1 auto;
+     -moz-box-flex:1;
+          flex:1 1 auto;
+  margin-left:-webkit-calc(-1 * 1rem);
+  margin-left:-moz-calc(-1 * 1rem);
+  margin-left:calc(-1 * 1rem);
+  margin-left:-webkit-calc(-1 * var(--eds-sidebar-padding, 1rem));
+  margin-left:-moz-calc(-1 * var(--eds-sidebar-padding, 1rem));
+  margin-left:calc(-1 * var(--eds-sidebar-padding, 1rem));
+  margin-right:-webkit-calc(-1 * 1rem);
+  margin-right:-moz-calc(-1 * 1rem);
+  margin-right:calc(-1 * 1rem);
+  margin-right:-webkit-calc(-1 * var(--eds-sidebar-padding, 1rem));
+  margin-right:-moz-calc(-1 * var(--eds-sidebar-padding, 1rem));
+  margin-right:calc(-1 * var(--eds-sidebar-padding, 1rem));
+}
+
+.eds-layout-template-sidebar__footer{
+  margin-top:auto;
+}.eds-layout-template-portal{
+  min-height:100vh;
+  width:100%;
+}
+
+.eds-layout-template-portal__main{
+  padding:1rem;
+  padding:var(--eds-portal-main-padding, 1rem);
+}

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

@@ -0,0 +1,65 @@
+import { default as React } from 'react';
+import { PolymorphicComponentProps } from '@entur/utils';
+import { GridSpacingValue, ResponsiveValue } from '../LayoutWrapper/utils';
+export type FlexSpacingValue = GridSpacingValue;
+type FlexDirection = React.CSSProperties['flexDirection'];
+type FlexWrap = React.CSSProperties['flexWrap'];
+type AlignItems = React.CSSProperties['alignItems'];
+type JustifyContent = React.CSSProperties['justifyContent'];
+type AlignContent = React.CSSProperties['alignContent'];
+type FlexBasis = React.CSSProperties['flexBasis'];
+type FlexValue = React.CSSProperties['flex'];
+export type FlexOwnProps = {
+    /** CSS flex-direction value (supports responsive objects)
+     * @default "row"
+     */
+    direction?: FlexDirection | ResponsiveValue<FlexDirection>;
+    /** CSS flex-wrap value (supports responsive objects)
+     * @default "nowrap"
+     */
+    wrap?: FlexWrap | ResponsiveValue<FlexWrap>;
+    /** CSS align-items value (supports responsive objects) */
+    align?: AlignItems | ResponsiveValue<AlignItems>;
+    /** CSS justify-content value (supports responsive objects) */
+    justify?: JustifyContent | ResponsiveValue<JustifyContent>;
+    /** CSS align-content value (supports responsive objects) */
+    alignContent?: AlignContent | ResponsiveValue<AlignContent>;
+    /** Spacing between flex items (supports responsive objects) */
+    gap?: FlexSpacingValue | ResponsiveValue<FlexSpacingValue>;
+    /** Vertical spacing between rows (supports responsive objects) */
+    rowGap?: FlexSpacingValue | ResponsiveValue<FlexSpacingValue>;
+    /** Horizontal spacing between columns (supports responsive objects) */
+    columnGap?: FlexSpacingValue | ResponsiveValue<FlexSpacingValue>;
+    /** CSS flex shorthand value */
+    flex?: FlexValue;
+    /** CSS flex-grow value */
+    grow?: number;
+    /** CSS flex-shrink value */
+    shrink?: number;
+    /** CSS flex-basis value */
+    basis?: FlexBasis;
+    /** CSS width value */
+    width?: string;
+    /** CSS height value */
+    height?: string;
+    /** CSS min-width value */
+    minWidth?: string;
+    /** CSS min-height value */
+    minHeight?: string;
+    /** CSS max-width value */
+    maxWidth?: string;
+    /** CSS max-height value */
+    maxHeight?: string;
+    /** HTML element or React component used to render the Flex container
+     * @default "div"
+     */
+    as?: string | React.ElementType;
+    /** Additional class names */
+    className?: string;
+    /** Content of the Flex container */
+    children?: React.ReactNode;
+};
+export type FlexProps<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, FlexOwnProps>;
+declare const defaultElement = "div";
+export declare const Flex: <E extends React.ElementType = "div">({ direction, wrap, align, justify, alignContent, gap, rowGap, columnGap, flex, grow, shrink, basis, width, height, minWidth, minHeight, maxWidth, maxHeight, as, className, children, style, ...rest }: FlexProps<E>) => JSX.Element;
+export {};

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

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { PolymorphicComponentProps } from '@entur/utils';
+export type FlexSpacerOwnProps = {
+    /** HTML element or React component used to render Flex.Spacer
+     * @default "div"
+     */
+    as?: string | React.ElementType;
+    /** Additional class name */
+    className?: string;
+    /** Spacer should not render children */
+    children?: never;
+};
+export type FlexSpacerProps<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, FlexSpacerOwnProps>;
+declare const defaultElement = "div";
+export declare const FlexSpacer: <E extends React.ElementType = "div">({ as, className, style, ...rest }: FlexSpacerProps<E>) => JSX.Element;
+export {};

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

@@ -0,0 +1,24 @@
+import { Flex as FlexParent } from './Flex';
+import { FlexSpacer } from './FlexSpacer';
+type Flex = typeof FlexParent & {
+    /**
+     * A spacer element that fills available space in Flex.
+     *
+     * @example
+     * <Flex>
+     *   <Button>Left</Button>
+     *   <Flex.Spacer />
+     *   <Button>Right</Button>
+     * </Flex>
+     */
+    Spacer: typeof FlexSpacer & {
+        displayName?: string;
+    };
+};
+/**
+ * A Flex component for organizing content in a flexible layout.
+ */
+export declare const FlexComponent: Flex;
+export type { FlexProps, FlexOwnProps, FlexSpacingValue } from './Flex';
+export type { FlexSpacerProps, FlexSpacerOwnProps } from './FlexSpacer';
+export { FlexComponent as Flex, FlexSpacer };