@entur/layout 3.4.1-next.0 → 3.4.1

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

@@ -1,96 +1,78 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
 const classNames = require("classnames");
 const Contrast = require("../Contrast.cjs");
 const index$1 = require("../Flex/index.cjs");
 const index = require("../Grid/index.cjs");
 ;/* empty css               */
-const defaultSidebarElement = "aside";
-const defaultSectionElement = "div";
-const defaultNavigationElement = "nav";
-const defaultFooterElement = "footer";
-const SidebarLogo = React.forwardRef(
-  ({ children, as, ...rest }, ref) => {
-    const Element = as || defaultSectionElement;
-    return /* @__PURE__ */ jsxRuntime.jsx(Element, { ref, ...rest, children });
-  }
-);
-const SidebarUser = React.forwardRef(
-  ({ children, as, ...rest }, ref) => {
-    const Element = as || defaultSectionElement;
-    return /* @__PURE__ */ jsxRuntime.jsx(Element, { ref, ...rest, children });
-  }
-);
-const SidebarData = React.forwardRef(
-  ({ children, as, ...rest }, ref) => {
-    const Element = as || defaultSectionElement;
-    return /* @__PURE__ */ jsxRuntime.jsx(Element, { ref, ...rest, children });
-  }
-);
-const SidebarNavigation = React.forwardRef(
-  ({ children, className, as, ...rest }, ref) => {
-    const Element = as || defaultNavigationElement;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Element,
-      {
-        ref,
-        className: classNames(
-          "eds-layout-template-sidebar__navigation",
-          className
-        ),
-        ...rest,
-        children
-      }
-    );
-  }
-);
-const SidebarFooter = React.forwardRef(
-  ({ children, className, as, ...rest }, ref) => {
-    const Element = as || defaultFooterElement;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Element,
-      {
-        ref,
-        className: classNames("eds-layout-template-sidebar__footer", className),
-        ...rest,
-        children
-      }
-    );
-  }
-);
-const SidebarRoot = React.forwardRef(
-  ({
-    children,
-    className,
-    style,
-    contrast = true,
-    as,
-    ...rest
-  }, ref) => {
-    const WrapperElement = contrast ? Contrast.Contrast : "div";
-    return /* @__PURE__ */ jsxRuntime.jsx(index.GridComponent.Item, { as: WrapperElement, colSpan: "1 / 2", rowSpan: "1 / 2", children: /* @__PURE__ */ jsxRuntime.jsx(
-      index$1.FlexComponent,
-      {
-        ref,
-        as: as || defaultSidebarElement,
-        direction: "column",
-        gap: "m",
-        className: classNames(
-          "eds-layout-template-sidebar",
-          {
-            "eds-layout-template-sidebar--plain": !contrast
-          },
-          className
-        ),
-        style,
-        ...rest,
-        children
-      }
-    ) });
-  }
-);
+const SidebarLogo = ({ children, ...rest }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...rest, children });
+};
+const SidebarUser = ({ children, ...rest }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...rest, children });
+};
+const SidebarData = ({ children, ...rest }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...rest, children });
+};
+const SidebarNavigation = ({
+  children,
+  className,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "nav",
+    {
+      className: classNames(
+        "eds-layout-template-sidebar__navigation",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+};
+const SidebarFooter = ({
+  children,
+  className,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "footer",
+    {
+      className: classNames("eds-layout-template-sidebar__footer", className),
+      ...rest,
+      children
+    }
+  );
+};
+const SidebarRoot = ({
+  children,
+  className,
+  style,
+  contrast = true,
+  ...rest
+}) => {
+  const WrapperElement = contrast ? Contrast.Contrast : "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(index.GridComponent.Item, { as: WrapperElement, colSpan: "1 / 2", rowSpan: "1 / 2", children: /* @__PURE__ */ jsxRuntime.jsx(
+    index$1.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,

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

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.cjs","sources":["../../../../src/beta/templates/Sidebar.tsx"],"sourcesContent":["import React from 'react';\nimport type { PolymorphicComponentProps } from '@entur/utils';\nimport classNames from 'classnames';\nimport { Contrast } from '../../Contrast';\nimport { Flex } from '../Flex';\nimport { Grid } from '../Grid';\nimport './Sidebar.scss';\n\ntype SidebarOwnProps = {\n  /** Toggle contrast styling for the sidebar */\n  contrast?: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n};\n\ntype SidebarSectionOwnProps = {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n};\n\nconst defaultSidebarElement = 'aside';\nconst defaultSectionElement = 'div';\nconst defaultNavigationElement = 'nav';\nconst defaultFooterElement = 'footer';\n\nexport type SidebarProps<\n  T extends React.ElementType = typeof defaultSidebarElement,\n> = PolymorphicComponentProps<T, SidebarOwnProps>;\n\nexport type SidebarSectionProps<\n  T extends React.ElementType = typeof defaultSectionElement,\n> = PolymorphicComponentProps<T, SidebarSectionOwnProps>;\n\nconst SidebarLogo = React.forwardRef(\n  <E extends React.ElementType = typeof defaultSectionElement>(\n    { children, as, ...rest }: SidebarSectionProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    const Element: React.ElementType = as || defaultSectionElement;\n    return (\n      <Element ref={ref} {...rest}>\n        {children}\n      </Element>\n    );\n  },\n);\n\nconst SidebarUser = React.forwardRef(\n  <E extends React.ElementType = typeof defaultSectionElement>(\n    { children, as, ...rest }: SidebarSectionProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    const Element: React.ElementType = as || defaultSectionElement;\n    return (\n      <Element ref={ref} {...rest}>\n        {children}\n      </Element>\n    );\n  },\n);\n\nconst SidebarData = React.forwardRef(\n  <E extends React.ElementType = typeof defaultSectionElement>(\n    { children, as, ...rest }: SidebarSectionProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    const Element: React.ElementType = as || defaultSectionElement;\n    return (\n      <Element ref={ref} {...rest}>\n        {children}\n      </Element>\n    );\n  },\n);\n\nconst SidebarNavigation = React.forwardRef(\n  <E extends React.ElementType = typeof defaultNavigationElement>(\n    { children, className, as, ...rest }: SidebarSectionProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    const Element: React.ElementType = as || defaultNavigationElement;\n    return (\n      <Element\n        ref={ref}\n        className={classNames(\n          'eds-layout-template-sidebar__navigation',\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </Element>\n    );\n  },\n);\n\nconst SidebarFooter = React.forwardRef(\n  <E extends React.ElementType = typeof defaultFooterElement>(\n    { children, className, as, ...rest }: SidebarSectionProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    const Element: React.ElementType = as || defaultFooterElement;\n    return (\n      <Element\n        ref={ref}\n        className={classNames('eds-layout-template-sidebar__footer', className)}\n        {...rest}\n      >\n        {children}\n      </Element>\n    );\n  },\n);\n\nconst SidebarRoot = React.forwardRef(\n  <E extends React.ElementType = typeof defaultSidebarElement>(\n    {\n      children,\n      className,\n      style,\n      contrast = true,\n      as,\n      ...rest\n    }: SidebarProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    const WrapperElement = contrast ? Contrast : 'div';\n    return (\n      <Grid.Item as={WrapperElement} colSpan=\"1 / 2\" rowSpan=\"1 / 2\">\n        <Flex\n          ref={ref}\n          as={as || defaultSidebarElement}\n          direction=\"column\"\n          gap=\"m\"\n          className={classNames(\n            'eds-layout-template-sidebar',\n            {\n              'eds-layout-template-sidebar--plain': !contrast,\n            },\n            className,\n          )}\n          style={style}\n          {...rest}\n        >\n          {children}\n        </Flex>\n      </Grid.Item>\n    );\n  },\n);\n\nexport type SidebarComponent = typeof SidebarRoot & {\n  Logo: typeof SidebarLogo;\n  User: typeof SidebarUser;\n  Data: typeof SidebarData;\n  Navigation: typeof SidebarNavigation;\n  Footer: typeof SidebarFooter;\n};\n\nexport const Sidebar: SidebarComponent = Object.assign(SidebarRoot, {\n  Logo: SidebarLogo,\n  User: SidebarUser,\n  Data: SidebarData,\n  Navigation: SidebarNavigation,\n  Footer: SidebarFooter,\n});\n\nSidebar.displayName = 'Template.Portal.Sidebar';\nSidebar.Logo.displayName = 'Template.Portal.Sidebar.Logo';\nSidebar.User.displayName = 'Template.Portal.Sidebar.User';\nSidebar.Data.displayName = 'Template.Portal.Sidebar.Data';\nSidebar.Navigation.displayName = 'Template.Portal.Sidebar.Navigation';\nSidebar.Footer.displayName = 'Template.Portal.Sidebar.Footer';\n"],"names":["jsx","Contrast","Grid","Flex"],"mappings":";;;;;;;;;AAsBA,MAAM,wBAAwB;AAC9B,MAAM,wBAAwB;AAC9B,MAAM,2BAA2B;AACjC,MAAM,uBAAuB;AAU7B,MAAM,cAAc,MAAM;AAAA,EACxB,CACE,EAAE,UAAU,IAAI,GAAG,KAAA,GACnB,QACG;AACH,UAAM,UAA6B,MAAM;AACzC,WACEA,2BAAAA,IAAC,SAAA,EAAQ,KAAW,GAAG,MACpB,UACH;AAAA,EAEJ;AACF;AAEA,MAAM,cAAc,MAAM;AAAA,EACxB,CACE,EAAE,UAAU,IAAI,GAAG,KAAA,GACnB,QACG;AACH,UAAM,UAA6B,MAAM;AACzC,WACEA,2BAAAA,IAAC,SAAA,EAAQ,KAAW,GAAG,MACpB,UACH;AAAA,EAEJ;AACF;AAEA,MAAM,cAAc,MAAM;AAAA,EACxB,CACE,EAAE,UAAU,IAAI,GAAG,KAAA,GACnB,QACG;AACH,UAAM,UAA6B,MAAM;AACzC,WACEA,2BAAAA,IAAC,SAAA,EAAQ,KAAW,GAAG,MACpB,UACH;AAAA,EAEJ;AACF;AAEA,MAAM,oBAAoB,MAAM;AAAA,EAC9B,CACE,EAAE,UAAU,WAAW,IAAI,GAAG,KAAA,GAC9B,QACG;AACH,UAAM,UAA6B,MAAM;AACzC,WACEA,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,MAAM,gBAAgB,MAAM;AAAA,EAC1B,CACE,EAAE,UAAU,WAAW,IAAI,GAAG,KAAA,GAC9B,QACG;AACH,UAAM,UAA6B,MAAM;AACzC,WACEA,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,WAAW,uCAAuC,SAAS;AAAA,QACrE,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,MAAM,cAAc,MAAM;AAAA,EACxB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,iBAAiB,WAAWC,SAAAA,WAAW;AAC7C,WACED,+BAACE,MAAAA,cAAK,MAAL,EAAU,IAAI,gBAAgB,SAAQ,SAAQ,SAAQ,SACrD,UAAAF,2BAAAA;AAAAA,MAACG,QAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA,IAAI,MAAM;AAAA,QACV,WAAU;AAAA,QACV,KAAI;AAAA,QACJ,WAAW;AAAA,UACT;AAAA,UACA;AAAA,YACE,sCAAsC,CAAC;AAAA,UAAA;AAAA,UAEzC;AAAA,QAAA;AAAA,QAEF;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,EAEJ;AACF;AAUO,MAAM,UAA4B,OAAO,OAAO,aAAa;AAAA,EAClE,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,QAAQ;AACV,CAAC;AAED,QAAQ,cAAc;AACtB,QAAQ,KAAK,cAAc;AAC3B,QAAQ,KAAK,cAAc;AAC3B,QAAQ,KAAK,cAAc;AAC3B,QAAQ,WAAW,cAAc;AACjC,QAAQ,OAAO,cAAc;;"}
+{"version":3,"file":"Sidebar.cjs","sources":["../../../../src/beta/templates/Sidebar.tsx"],"sourcesContent":["import React from 'react';\nimport 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":["jsx","Contrast","Grid","Flex"],"mappings":";;;;;;;;AAcA,MAAM,cAA6C,CAAC,EAAE,UAAU,GAAG,WAAW;AAC5E,SAAOA,2BAAAA,IAAC,OAAA,EAAK,GAAG,MAAO,SAAA,CAAS;AAClC;AAEA,MAAM,cAA6C,CAAC,EAAE,UAAU,GAAG,WAAW;AAC5E,SAAOA,2BAAAA,IAAC,OAAA,EAAK,GAAG,MAAO,SAAA,CAAS;AAClC;AAEA,MAAM,cAA6C,CAAC,EAAE,UAAU,GAAG,WAAW;AAC5E,SAAOA,2BAAAA,IAAC,OAAA,EAAK,GAAG,MAAO,SAAA,CAAS;AAClC;AAEA,MAAM,oBAAmD,CAAC;AAAA,EACxD;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACEA,2BAAAA;AAAAA,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,SACEA,2BAAAA;AAAAA,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,WAAWC,SAAAA,WAAW;AAC7C,SACED,+BAACE,MAAAA,cAAK,MAAL,EAAU,IAAI,gBAAgB,SAAQ,SAAQ,SAAQ,SACrD,UAAAF,2BAAAA;AAAAA,IAACG,QAAAA;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/cjs/templates/portal/Portal.cjs

@@ -1,45 +1,46 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
 const classNames = require("classnames");
 const index = require("../../Grid/index.cjs");
 const Sidebar = require("../Sidebar.cjs");
 ;/* empty css              */
-const defaultPortalMainElement = "main";
-const PortalRoot = React.forwardRef(
-  ({ children, className, style, as, ...rest }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      index.GridComponent,
-      {
-        ref,
-        as,
-        templateColumns: "var(--eds-sidebar-width, min-content) minmax(0, 1fr)",
-        gap: "m",
-        className: classNames("eds-layout-template-portal", className),
-        style,
-        ...rest,
-        children
-      }
-    );
-  }
-);
-const PortalMain = React.forwardRef(
-  ({ children, className, style, as, ...rest }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      index.GridComponent.Item,
-      {
-        ref,
-        as: as || defaultPortalMainElement,
-        colSpan: "2 / -1",
-        className: classNames("eds-layout-template-portal__main", className),
-        style,
-        ...rest,
-        children
-      }
-    );
-  }
-);
+const PortalRoot = ({
+  children,
+  className,
+  style,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index.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__ */ jsxRuntime.jsx(
+    index.GridComponent.Item,
+    {
+      as: "main",
+      colSpan: "2 / -1",
+      className: classNames("eds-layout-template-portal__main", className),
+      style,
+      ...rest,
+      children
+    }
+  );
+};
 const Portal = Object.assign(PortalRoot, {
   Sidebar: Sidebar.Sidebar,
   Main: PortalMain

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

@@ -1 +1 @@
-{"version":3,"file":"Portal.cjs","sources":["../../../../../src/beta/templates/portal/Portal.tsx"],"sourcesContent":["import React from 'react';\nimport type { PolymorphicComponentProps } from '@entur/utils';\nimport classNames from 'classnames';\nimport { Grid } from '../../Grid';\nimport { Sidebar, SidebarComponent } from '../Sidebar';\nimport './Portal.scss';\n\ntype PortalOwnProps = {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n};\n\ntype PortalMainOwnProps = {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n};\n\nconst defaultPortalMainElement = 'main';\n\nexport type PortalProps<T extends React.ElementType = typeof Grid> =\n  PolymorphicComponentProps<T, PortalOwnProps>;\n\nexport type PortalMainProps<\n  T extends React.ElementType = typeof defaultPortalMainElement,\n> = PolymorphicComponentProps<T, PortalMainOwnProps>;\n\nconst PortalRoot = React.forwardRef(\n  <E extends React.ElementType = typeof Grid>(\n    { children, className, style, as, ...rest }: PortalProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    return (\n      <Grid\n        ref={ref}\n        as={as}\n        templateColumns=\"var(--eds-sidebar-width, min-content) minmax(0, 1fr)\"\n        gap=\"m\"\n        className={classNames('eds-layout-template-portal', className)}\n        style={style}\n        {...rest}\n      >\n        {children}\n      </Grid>\n    );\n  },\n);\n\nconst PortalMain = React.forwardRef(\n  <E extends React.ElementType = typeof defaultPortalMainElement>(\n    { children, className, style, as, ...rest }: PortalMainProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    return (\n      <Grid.Item\n        ref={ref}\n        as={as || defaultPortalMainElement}\n        colSpan=\"2 / -1\"\n        className={classNames('eds-layout-template-portal__main', className)}\n        style={style}\n        {...rest}\n      >\n        {children}\n      </Grid.Item>\n    );\n  },\n);\n\nexport type PortalComponent = typeof PortalRoot & {\n  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":["jsx","Grid","Sidebar"],"mappings":";;;;;;;;AAmBA,MAAM,2BAA2B;AASjC,MAAM,aAAa,MAAM;AAAA,EACvB,CACE,EAAE,UAAU,WAAW,OAAO,IAAI,GAAG,KAAA,GACrC,QACG;AACH,WACEA,2BAAAA;AAAAA,MAACC,MAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,iBAAgB;AAAA,QAChB,KAAI;AAAA,QACJ,WAAW,WAAW,8BAA8B,SAAS;AAAA,QAC7D;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,MAAM,aAAa,MAAM;AAAA,EACvB,CACE,EAAE,UAAU,WAAW,OAAO,IAAI,GAAG,KAAA,GACrC,QACG;AACH,WACED,2BAAAA;AAAAA,MAACC,MAAAA,cAAK;AAAA,MAAL;AAAA,QACC;AAAA,QACA,IAAI,MAAM;AAAA,QACV,SAAQ;AAAA,QACR,WAAW,WAAW,oCAAoC,SAAS;AAAA,QACnE;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAOO,MAAM,SAA0B,OAAO,OAAO,YAAY;AAAA,EAAA,SAC/DC,QAAAA;AAAAA,EACA,MAAM;AACR,CAAC;AAED,OAAO,cAAc;AACrB,OAAO,KAAK,cAAc;;"}
+{"version":3,"file":"Portal.cjs","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":["jsx","Grid","Sidebar"],"mappings":";;;;;;;AAUA,MAAM,aAAoC,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACEA,2BAAAA;AAAAA,IAACC,MAAAA;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,SACED,2BAAAA;AAAAA,IAACC,MAAAA,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,EAAA,SAC/DC,QAAAA;AAAAA,EACA,MAAM;AACR,CAAC;AAED,OAAO,cAAc;AACrB,OAAO,KAAK,cAAc;;"}

package/dist/beta/esm/Flex/Flex.mjs

@@ -1,114 +1,110 @@
 import { jsx } from "react/jsx-runtime";
-import React from "react";
 import classNames from "classnames";
 import { getSpacingValue } from "../LayoutWrapper/utils.mjs";
 import { useResponsiveValue } from "../LayoutWrapper/useResponsiveValue.mjs";
 /* 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(direction);
-    const resolvedWrap = useResponsiveValue(wrap);
-    const resolvedAlign = useResponsiveValue(align);
-    const resolvedJustify = useResponsiveValue(justify);
-    const resolvedAlignContent = useResponsiveValue(alignContent);
-    const resolvedGap = useResponsiveValue(gap);
-    const resolvedRowGap = useResponsiveValue(rowGap);
-    const resolvedColumnGap = 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": getSpacingValue(resolvedGap, "Flex")
-      },
-      ...resolvedRowGap && {
-        "--flex-row-gap": getSpacingValue(resolvedRowGap, "Flex")
-      },
-      ...resolvedColumnGap && {
-        "--flex-column-gap": 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__ */ 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(direction);
+  const resolvedWrap = useResponsiveValue(wrap);
+  const resolvedAlign = useResponsiveValue(align);
+  const resolvedJustify = useResponsiveValue(justify);
+  const resolvedAlignContent = useResponsiveValue(alignContent);
+  const resolvedGap = useResponsiveValue(gap);
+  const resolvedRowGap = useResponsiveValue(rowGap);
+  const resolvedColumnGap = 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": getSpacingValue(resolvedGap, "Flex")
+    },
+    ...resolvedRowGap && {
+      "--flex-row-gap": getSpacingValue(resolvedRowGap, "Flex")
+    },
+    ...resolvedColumnGap && {
+      "--flex-column-gap": 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__ */ jsx(
+    Element,
+    {
+      className: classNames("eds-layout-flex", className),
+      style: flexStyle,
+      ...rest,
+      children
+    }
+  );
+};
 export {
   Flex
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Flex.mjs","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":[],"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,oBAAoB,mBAAmB,SAAS;AACtD,UAAM,eAAe,mBAAmB,IAAI;AAC5C,UAAM,gBAAgB,mBAAmB,KAAK;AAC9C,UAAM,kBAAkB,mBAAmB,OAAO;AAClD,UAAM,uBAAuB,mBAAmB,YAAY;AAC5D,UAAM,cAAc,mBAAmB,GAAG;AAC1C,UAAM,iBAAiB,mBAAmB,MAAM;AAChD,UAAM,oBAAoB,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,cAAc,gBAAgB,aAAa,MAAM;AAAA,MAAA;AAAA,MAEnD,GAAI,kBAAkB;AAAA,QACpB,kBAAkB,gBAAgB,gBAAgB,MAAM;AAAA,MAAA;AAAA,MAE1D,GAAI,qBAAqB;AAAA,QACvB,qBAAqB,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,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,WAAW,mBAAmB,SAAS;AAAA,QAClD,OAAO;AAAA,QACN,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}
+{"version":3,"file":"Flex.mjs","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":[],"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,oBAAoB,mBAAmB,SAAS;AACtD,QAAM,eAAe,mBAAmB,IAAI;AAC5C,QAAM,gBAAgB,mBAAmB,KAAK;AAC9C,QAAM,kBAAkB,mBAAmB,OAAO;AAClD,QAAM,uBAAuB,mBAAmB,YAAY;AAC5D,QAAM,cAAc,mBAAmB,GAAG;AAC1C,QAAM,iBAAiB,mBAAmB,MAAM;AAChD,QAAM,oBAAoB,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,cAAc,gBAAgB,aAAa,MAAM;AAAA,IAAA;AAAA,IAEnD,GAAI,kBAAkB;AAAA,MACpB,kBAAkB,gBAAgB,gBAAgB,MAAM;AAAA,IAAA;AAAA,IAE1D,GAAI,qBAAqB;AAAA,MACvB,qBAAqB,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,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,WAAW,mBAAmB,SAAS;AAAA,MAClD,OAAO;AAAA,MACN,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}