@kirill.konshin/bootstrap 0.0.2 → 0.0.3

package/dist/footer.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Footer, FooterNavItem } from './footer';
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Footer, FooterNavItem } from './footer.js';
 declare const meta: Meta<typeof Footer>;
 export default meta;
 type Story = StoryObj<typeof meta>;

package/dist/footer.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"footer.stories.d.ts","sourceRoot":"","sources":["../src/footer.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEjD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAQ7B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAgBrB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAmB5B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAsBvB,CAAC;AAGF,eAAO,MAAM,cAAc,EAAE,QAAQ,CAAC,OAAO,aAAa,CAWzD,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,QAAQ,CAAC,OAAO,aAAa,CAYxD,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,QAAQ,CAAC,OAAO,aAAa,CAU1D,CAAC"}
+{"version":3,"file":"footer.stories.d.ts","sourceRoot":"","sources":["../src/footer.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEjD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAQ7B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAgBrB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAmB5B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAsBvB,CAAC;AAGF,eAAO,MAAM,cAAc,EAAE,QAAQ,CAAC,OAAO,aAAa,CAWzD,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,QAAQ,CAAC,OAAO,aAAa,CAYxD,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,QAAQ,CAAC,OAAO,aAAa,CAU1D,CAAC"}

package/dist/globalLoading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"globalLoading.d.ts","sourceRoot":"","sources":["../src/globalLoading.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAQ,MAAM,OAAO,CAAC;AAIxC,MAAM,MAAM,kBAAkB,GAAG;IAAE,OAAO,EAAE,OAAO,CAAA;CAAE,CAAC;AAEtD,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAY/C,CAAC"}
+{"version":3,"file":"globalLoading.d.ts","sourceRoot":"","sources":["../src/globalLoading.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,KAAK,EAAE,EAAQ,MAAM,OAAO,CAAC;AAI7C,MAAM,MAAM,kBAAkB,GAAG;IAAE,OAAO,EAAE,OAAO,CAAA;CAAE,CAAC;AAEtD,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAY/C,CAAC"}

package/dist/globalLoading.js

@@ -1,11 +1,15 @@
-import { jsx } from "react/jsx-runtime";
-import { memo } from "react";
 import { Loading } from "./loading.js";
-const GlobalLoading = memo(function GlobalLoading2({ loading }) {
-  if (!loading) return null;
-  return /* @__PURE__ */ jsx("div", { className: "bg-white position-absolute top-0 start-0 w-100 h-100 z-3 d-flex align-items-center justify-content-center", children: /* @__PURE__ */ jsx(Loading, {}) });
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/globalLoading.tsx
+var GlobalLoading = memo(function GlobalLoading({ loading }) {
+	if (!loading) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "bg-white position-absolute top-0 start-0 w-100 h-100 z-3 d-flex align-items-center justify-content-center",
+		children: /* @__PURE__ */ jsx(Loading, {})
+	});
 });
-export {
-  GlobalLoading
-};
-//# sourceMappingURL=globalLoading.js.map
+//#endregion
+export { GlobalLoading };
+
+//# sourceMappingURL=globalLoading.js.map

package/dist/globalLoading.js.map

@@ -1 +1 @@
-{"version":3,"file":"globalLoading.js","sources":["../src/globalLoading.tsx"],"sourcesContent":["import React, { FC, memo } from 'react';\n// import { useLoading, useLoadingTimeout } from '../redux/loadingSlice';\nimport { Loading } from './loading';\n\nexport type GlobalLoadingProps = { loading: boolean };\n\nexport const GlobalLoading: FC<GlobalLoadingProps> = memo(function GlobalLoading({ loading }) {\n    // const { loading } = useLoading();\n\n    // useLoadingTimeout(15000); // escape latch if something is stuck\n\n    if (!loading) return null;\n\n    return (\n        <div className=\"bg-white position-absolute top-0 start-0 w-100 h-100 z-3 d-flex align-items-center justify-content-center\">\n            <Loading />\n        </div>\n    );\n});\n"],"names":["GlobalLoading"],"mappings":";;;AAMO,MAAM,gBAAwC,KAAK,SAASA,eAAc,EAAE,WAAW;AAK1F,MAAI,CAAC,QAAS,QAAO;AAErB,6BACK,OAAA,EAAI,WAAU,6GACX,UAAA,oBAAC,WAAQ,GACb;AAER,CAAC;"}
+{"version":3,"file":"globalLoading.js","names":[],"sources":["../src/globalLoading.tsx"],"sourcesContent":["import React, { type FC, memo } from 'react';\n// import { useLoading, useLoadingTimeout } from '../redux/loadingSlice';\nimport { Loading } from './loading';\n\nexport type GlobalLoadingProps = { loading: boolean };\n\nexport const GlobalLoading: FC<GlobalLoadingProps> = memo(function GlobalLoading({ loading }) {\n    // const { loading } = useLoading();\n\n    // useLoadingTimeout(15000); // escape latch if something is stuck\n\n    if (!loading) return null;\n\n    return (\n        <div className=\"bg-white position-absolute top-0 start-0 w-100 h-100 z-3 d-flex align-items-center justify-content-center\">\n            <Loading />\n        </div>\n    );\n});\n"],"mappings":";;;;AAMA,IAAa,gBAAwC,KAAK,SAAS,cAAc,EAAE,WAAW;CAK1F,IAAI,CAAC,SAAS,OAAO;CAErB,OACI,oBAAC,OAAD;EAAK,WAAU;YACX,oBAAC,SAAD,CAAU,CAAA;CACT,CAAA;AAEb,CAAC"}

package/dist/globalLoading.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { GlobalLoading } from './globalLoading';
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { GlobalLoading } from './globalLoading.js';
 declare const meta: Meta<typeof GlobalLoading>;
 export default meta;
 type Story = StoryObj<typeof meta>;

package/dist/globalLoading.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"globalLoading.stories.d.ts","sourceRoot":"","sources":["../src/globalLoading.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,aAAa,CAUpC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC"}
+{"version":3,"file":"globalLoading.stories.d.ts","sourceRoot":"","sources":["../src/globalLoading.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,aAAa,CAUpC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC"}

package/dist/index.d.ts

@@ -1,13 +1,13 @@
-export * from './adaptiveContainer';
-export * from './controls';
-export * from './error';
-export * from './field';
-export * from './footer';
-export * from './globalLoading';
-export * from './loading';
-export * from './responsiveHelper';
-export * from './screen';
-export * from './toaster';
-export * from './useModal';
-export * from './useWrappedForm';
+export * from './adaptiveContainer.js';
+export * from './controls.js';
+export * from './error.js';
+export * from './field.js';
+export * from './footer.js';
+export * from './globalLoading.js';
+export * from './loading.js';
+export * from './responsiveHelper.js';
+export * from './screen.js';
+export * from './toaster.js';
+export * from './useModal.js';
+export * from './useWrappedForm.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,35 +1,13 @@
+import { ResponsiveHelperBS, useBreakpoint } from "./responsiveHelper.js";
 import { AdaptiveContainer } from "./adaptiveContainer.js";
 import { Checkbox, Control, Label, Range, Select } from "./controls.js";
 import { ErrorAlert } from "./error.js";
 import { FieldGroup } from "./field.js";
 import { Footer, FooterNavItem } from "./footer.js";
-import { GlobalLoading } from "./globalLoading.js";
 import { Loading } from "./loading.js";
-import { ResponsiveHelperBS, useBreakpoint } from "./responsiveHelper.js";
+import { GlobalLoading } from "./globalLoading.js";
 import { Screen } from "./screen.js";
 import { Toaster } from "./toaster.js";
 import { useModal } from "./useModal.js";
 import { isFormLoading, stopPropagation, useWrappedForm } from "./useWrappedForm.js";
-export {
-  AdaptiveContainer,
-  Checkbox,
-  Control,
-  ErrorAlert,
-  FieldGroup,
-  Footer,
-  FooterNavItem,
-  GlobalLoading,
-  Label,
-  Loading,
-  Range,
-  ResponsiveHelperBS,
-  Screen,
-  Select,
-  Toaster,
-  isFormLoading,
-  stopPropagation,
-  useBreakpoint,
-  useModal,
-  useWrappedForm
-};
-//# sourceMappingURL=index.js.map
+export { AdaptiveContainer, Checkbox, Control, ErrorAlert, FieldGroup, Footer, FooterNavItem, GlobalLoading, Label, Loading, Range, ResponsiveHelperBS, Screen, Select, Toaster, isFormLoading, stopPropagation, useBreakpoint, useModal, useWrappedForm };

package/dist/loading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"loading.d.ts","sourceRoot":"","sources":["../src/loading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,YAAY,EAAS,MAAM,iBAAiB,CAAC;AAC/D,OAAc,EAAE,EAAE,EAAQ,MAAM,OAAO,CAAC;AAExC,MAAM,MAAM,YAAY,GAAG;IACvB,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;CAC/B,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CAanC,CAAC"}
+{"version":3,"file":"loading.d.ts","sourceRoot":"","sources":["../src/loading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,YAAY,EAAS,MAAM,iBAAiB,CAAC;AACpE,OAAc,EAAE,KAAK,EAAE,EAAQ,MAAM,OAAO,CAAC;AAE7C,MAAM,MAAM,YAAY,GAAG;IACvB,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;CAC/B,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CAanC,CAAC"}

package/dist/loading.js

@@ -1,19 +1,21 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { Stack, Spinner } from "react-bootstrap";
 import { memo } from "react";
-const Loading = memo(function Loading2({
-  children = "Loading...",
-  show = true,
-  className = "",
-  size
-}) {
-  if (!show) return null;
-  return /* @__PURE__ */ jsxs(Stack, { direction: "horizontal", gap: 3, className: `align-self-auto ${className}`, children: [
-    /* @__PURE__ */ jsx(Spinner, { animation: "border", role: "status", size }),
-    /* @__PURE__ */ jsx("span", { children })
-  ] });
+import { Spinner, Stack } from "react-bootstrap";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/loading.tsx
+var Loading = memo(function Loading({ children = "Loading...", show = true, className = "", size }) {
+	if (!show) return null;
+	return /* @__PURE__ */ jsxs(Stack, {
+		direction: "horizontal",
+		gap: 3,
+		className: `align-self-auto ${className}`,
+		children: [/* @__PURE__ */ jsx(Spinner, {
+			animation: "border",
+			role: "status",
+			size
+		}), /* @__PURE__ */ jsx("span", { children })]
+	});
 });
-export {
-  Loading
-};
-//# sourceMappingURL=loading.js.map
+//#endregion
+export { Loading };
+
+//# sourceMappingURL=loading.js.map

package/dist/loading.js.map

@@ -1 +1 @@
-{"version":3,"file":"loading.js","sources":["../src/loading.tsx"],"sourcesContent":["import { Spinner, SpinnerProps, Stack } from 'react-bootstrap';\nimport React, { FC, memo } from 'react';\n\nexport type LoadingProps = {\n    children?: any;\n    show?: boolean;\n    className?: string;\n    size?: SpinnerProps['size'];\n};\n\nexport const Loading: FC<LoadingProps> = memo(function Loading({\n    children = 'Loading...' as any,\n    show = true,\n    className = '',\n    size,\n}) {\n    if (!show) return null;\n    return (\n        <Stack direction=\"horizontal\" gap={3} className={`align-self-auto ${className}`}>\n            <Spinner animation=\"border\" role=\"status\" size={size as any} />\n            <span>{children}</span>\n        </Stack>\n    );\n});\n"],"names":["Loading"],"mappings":";;;AAUO,MAAM,UAA4B,KAAK,SAASA,SAAQ;AAAA,EAC3D,WAAW;AAAA,EACX,OAAO;AAAA,EACP,YAAY;AAAA,EACZ;AACJ,GAAG;AACC,MAAI,CAAC,KAAM,QAAO;AAClB,SACI,qBAAC,SAAM,WAAU,cAAa,KAAK,GAAG,WAAW,mBAAmB,SAAS,IACzE,UAAA;AAAA,IAAA,oBAAC,SAAA,EAAQ,WAAU,UAAS,MAAK,UAAS,MAAmB;AAAA,IAC7D,oBAAC,UAAM,SAAA,CAAS;AAAA,EAAA,GACpB;AAER,CAAC;"}
+{"version":3,"file":"loading.js","names":[],"sources":["../src/loading.tsx"],"sourcesContent":["import { Spinner, type SpinnerProps, Stack } from 'react-bootstrap';\nimport React, { type FC, memo } from 'react';\n\nexport type LoadingProps = {\n    children?: any;\n    show?: boolean;\n    className?: string;\n    size?: SpinnerProps['size'];\n};\n\nexport const Loading: FC<LoadingProps> = memo(function Loading({\n    children = 'Loading...' as any,\n    show = true,\n    className = '',\n    size,\n}) {\n    if (!show) return null;\n    return (\n        <Stack direction=\"horizontal\" gap={3} className={`align-self-auto ${className}`}>\n            <Spinner animation=\"border\" role=\"status\" size={size as any} />\n            <span>{children}</span>\n        </Stack>\n    );\n});\n"],"mappings":";;;;AAUA,IAAa,UAA4B,KAAK,SAAS,QAAQ,EAC3D,WAAW,cACX,OAAO,MACP,YAAY,IACZ,QACD;CACC,IAAI,CAAC,MAAM,OAAO;CAClB,OACI,qBAAC,OAAD;EAAO,WAAU;EAAa,KAAK;EAAG,WAAW,mBAAmB;YAApE,CACI,oBAAC,SAAD;GAAS,WAAU;GAAS,MAAK;GAAe;EAAc,CAAA,GAC9D,oBAAC,QAAD,EAAO,SAAe,CAAA,CACnB;;AAEf,CAAC"}

package/dist/loading.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Loading } from './loading';
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Loading } from './loading.js';
 declare const meta: Meta<typeof Loading>;
 export default meta;
 type Story = StoryObj<typeof meta>;

package/dist/loading.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"loading.stories.d.ts","sourceRoot":"","sources":["../src/loading.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAY9B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,QAAQ,EAAE,KAItB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAIlB,CAAC"}
+{"version":3,"file":"loading.stories.d.ts","sourceRoot":"","sources":["../src/loading.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAY9B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,QAAQ,EAAE,KAItB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAIlB,CAAC"}

package/dist/responsiveHelper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"responsiveHelper.d.ts","sourceRoot":"","sources":["../src/responsiveHelper.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,EAAE,EAA6B,MAAM,OAAO,CAAC;AAE7D,wBAAgB,aAAa,IAAI;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;CACtB,CAiCA;AAED,eAAO,MAAM,kBAAkB,EAAE,EAW/B,CAAC"}
+{"version":3,"file":"responsiveHelper.d.ts","sourceRoot":"","sources":["../src/responsiveHelper.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,KAAK,EAAE,EAA6B,MAAM,OAAO,CAAC;AAElE,wBAAgB,aAAa,IAAI;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;CACtB,CAiCA;AAED,eAAO,MAAM,kBAAkB,EAAE,EAW/B,CAAC"}

package/dist/responsiveHelper.js

@@ -1,46 +1,73 @@
 "use client";
-import { jsxs, jsx } from "react/jsx-runtime";
-import { memo, useState, useEffect } from "react";
+import { memo, useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/responsiveHelper.tsx
 function useBreakpoint() {
-  const [breakpoint, setBreakpoint] = useState("xs");
-  useEffect(() => {
-    const updateBreakpoint = () => {
-      const width = window.innerWidth;
-      if (width < 576) {
-        setBreakpoint("xs");
-      } else if (width < 768) {
-        setBreakpoint("sm");
-      } else if (width < 992) {
-        setBreakpoint("md");
-      } else if (width < 1200) {
-        setBreakpoint("lg");
-      } else if (width < 1400) {
-        setBreakpoint("xl");
-      } else {
-        setBreakpoint("xxl");
-      }
-    };
-    updateBreakpoint();
-    window.addEventListener("resize", updateBreakpoint);
-    return () => {
-      window.removeEventListener("resize", updateBreakpoint);
-    };
-  }, []);
-  const isMobile = ["xs", "sm", "md"].includes(breakpoint);
-  return { breakpoint, isMobile, isDesktop: !isMobile };
+	const [breakpoint, setBreakpoint] = useState("xs");
+	useEffect(() => {
+		const updateBreakpoint = () => {
+			const width = window.innerWidth;
+			if (width < 576) setBreakpoint("xs");
+			else if (width < 768) setBreakpoint("sm");
+			else if (width < 992) setBreakpoint("md");
+			else if (width < 1200) setBreakpoint("lg");
+			else if (width < 1400) setBreakpoint("xl");
+			else setBreakpoint("xxl");
+		};
+		updateBreakpoint();
+		window.addEventListener("resize", updateBreakpoint);
+		return () => {
+			window.removeEventListener("resize", updateBreakpoint);
+		};
+	}, []);
+	const isMobile = [
+		"xs",
+		"sm",
+		"md"
+	].includes(breakpoint);
+	return {
+		breakpoint,
+		isMobile,
+		isDesktop: !isMobile
+	};
 }
-const ResponsiveHelperBS = memo(function ResponsiveHelperBS2() {
-  return /* @__PURE__ */ jsxs("span", { className: "small position-fixed bottom-0 z-3", style: { fontSize: "9px", right: 1, lineHeight: 1 }, children: [
-    /* @__PURE__ */ jsx("small", { className: "d-block d-sm-none", children: "XS" }),
-    /* @__PURE__ */ jsx("small", { className: "d-none d-sm-block d-md-none", children: "SM" }),
-    /* @__PURE__ */ jsx("small", { className: "d-none d-md-block d-lg-none", children: "MD" }),
-    /* @__PURE__ */ jsx("small", { className: "d-none d-lg-block d-xl-none", children: "LG" }),
-    /* @__PURE__ */ jsx("small", { className: "d-none d-xl-block d-xxl-none", children: "XL" }),
-    /* @__PURE__ */ jsx("small", { className: "d-none d-xxl-block", children: "XXL" })
-  ] });
+var ResponsiveHelperBS = memo(function ResponsiveHelperBS() {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "small position-fixed bottom-0 z-3",
+		style: {
+			fontSize: "9px",
+			right: 1,
+			lineHeight: 1
+		},
+		children: [
+			/* @__PURE__ */ jsx("small", {
+				className: "d-block d-sm-none",
+				children: "XS"
+			}),
+			/* @__PURE__ */ jsx("small", {
+				className: "d-none d-sm-block d-md-none",
+				children: "SM"
+			}),
+			/* @__PURE__ */ jsx("small", {
+				className: "d-none d-md-block d-lg-none",
+				children: "MD"
+			}),
+			/* @__PURE__ */ jsx("small", {
+				className: "d-none d-lg-block d-xl-none",
+				children: "LG"
+			}),
+			/* @__PURE__ */ jsx("small", {
+				className: "d-none d-xl-block d-xxl-none",
+				children: "XL"
+			}),
+			/* @__PURE__ */ jsx("small", {
+				className: "d-none d-xxl-block",
+				children: "XXL"
+			})
+		]
+	});
 });
-export {
-  ResponsiveHelperBS,
-  useBreakpoint
-};
-//# sourceMappingURL=responsiveHelper.js.map
+//#endregion
+export { ResponsiveHelperBS, useBreakpoint };
+
+//# sourceMappingURL=responsiveHelper.js.map

package/dist/responsiveHelper.js.map

@@ -1 +1 @@
-{"version":3,"file":"responsiveHelper.js","sources":["../src/responsiveHelper.tsx"],"sourcesContent":["'use client';\n\nimport React, { FC, memo, useEffect, useState } from 'react';\n\nexport function useBreakpoint(): {\n    breakpoint: string;\n    isMobile: boolean;\n    isDesktop: boolean;\n} {\n    const [breakpoint, setBreakpoint] = useState('xs');\n\n    useEffect(() => {\n        const updateBreakpoint = () => {\n            const width = window.innerWidth;\n            if (width < 576) {\n                setBreakpoint('xs');\n            } else if (width < 768) {\n                setBreakpoint('sm');\n            } else if (width < 992) {\n                setBreakpoint('md');\n            } else if (width < 1200) {\n                setBreakpoint('lg');\n            } else if (width < 1400) {\n                setBreakpoint('xl');\n            } else {\n                setBreakpoint('xxl');\n            }\n        };\n\n        updateBreakpoint();\n\n        window.addEventListener('resize', updateBreakpoint);\n\n        return () => {\n            window.removeEventListener('resize', updateBreakpoint);\n        };\n    }, []);\n\n    const isMobile = ['xs', 'sm', 'md'].includes(breakpoint);\n\n    return { breakpoint, isMobile, isDesktop: !isMobile };\n}\n\nexport const ResponsiveHelperBS: FC = memo(function ResponsiveHelperBS() {\n    return (\n        <span className=\"small position-fixed bottom-0 z-3\" style={{ fontSize: '9px', right: 1, lineHeight: 1 }}>\n            <small className=\"d-block d-sm-none\">XS</small>\n            <small className=\"d-none d-sm-block d-md-none\">SM</small>\n            <small className=\"d-none d-md-block d-lg-none\">MD</small>\n            <small className=\"d-none d-lg-block d-xl-none\">LG</small>\n            <small className=\"d-none d-xl-block d-xxl-none\">XL</small>\n            <small className=\"d-none d-xxl-block\">XXL</small>\n        </span>\n    );\n});\n"],"names":["ResponsiveHelperBS"],"mappings":";;;AAIO,SAAS,gBAId;AACE,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,IAAI;AAEjD,YAAU,MAAM;AACZ,UAAM,mBAAmB,MAAM;AAC3B,YAAM,QAAQ,OAAO;AACrB,UAAI,QAAQ,KAAK;AACb,sBAAc,IAAI;AAAA,MACtB,WAAW,QAAQ,KAAK;AACpB,sBAAc,IAAI;AAAA,MACtB,WAAW,QAAQ,KAAK;AACpB,sBAAc,IAAI;AAAA,MACtB,WAAW,QAAQ,MAAM;AACrB,sBAAc,IAAI;AAAA,MACtB,WAAW,QAAQ,MAAM;AACrB,sBAAc,IAAI;AAAA,MACtB,OAAO;AACH,sBAAc,KAAK;AAAA,MACvB;AAAA,IACJ;AAEA,qBAAA;AAEA,WAAO,iBAAiB,UAAU,gBAAgB;AAElD,WAAO,MAAM;AACT,aAAO,oBAAoB,UAAU,gBAAgB;AAAA,IACzD;AAAA,EACJ,GAAG,CAAA,CAAE;AAEL,QAAM,WAAW,CAAC,MAAM,MAAM,IAAI,EAAE,SAAS,UAAU;AAEvD,SAAO,EAAE,YAAY,UAAU,WAAW,CAAC,SAAA;AAC/C;AAEO,MAAM,qBAAyB,KAAK,SAASA,sBAAqB;AACrE,SACI,qBAAC,QAAA,EAAK,WAAU,qCAAoC,OAAO,EAAE,UAAU,OAAO,OAAO,GAAG,YAAY,EAAA,GAChG,UAAA;AAAA,IAAA,oBAAC,SAAA,EAAM,WAAU,qBAAoB,UAAA,MAAE;AAAA,IACvC,oBAAC,SAAA,EAAM,WAAU,+BAA8B,UAAA,MAAE;AAAA,IACjD,oBAAC,SAAA,EAAM,WAAU,+BAA8B,UAAA,MAAE;AAAA,IACjD,oBAAC,SAAA,EAAM,WAAU,+BAA8B,UAAA,MAAE;AAAA,IACjD,oBAAC,SAAA,EAAM,WAAU,gCAA+B,UAAA,MAAE;AAAA,IAClD,oBAAC,SAAA,EAAM,WAAU,sBAAqB,UAAA,MAAA,CAAG;AAAA,EAAA,GAC7C;AAER,CAAC;"}
+{"version":3,"file":"responsiveHelper.js","names":[],"sources":["../src/responsiveHelper.tsx"],"sourcesContent":["'use client';\n\nimport React, { type FC, memo, useEffect, useState } from 'react';\n\nexport function useBreakpoint(): {\n    breakpoint: string;\n    isMobile: boolean;\n    isDesktop: boolean;\n} {\n    const [breakpoint, setBreakpoint] = useState('xs');\n\n    useEffect(() => {\n        const updateBreakpoint = () => {\n            const width = window.innerWidth;\n            if (width < 576) {\n                setBreakpoint('xs');\n            } else if (width < 768) {\n                setBreakpoint('sm');\n            } else if (width < 992) {\n                setBreakpoint('md');\n            } else if (width < 1200) {\n                setBreakpoint('lg');\n            } else if (width < 1400) {\n                setBreakpoint('xl');\n            } else {\n                setBreakpoint('xxl');\n            }\n        };\n\n        updateBreakpoint();\n\n        window.addEventListener('resize', updateBreakpoint);\n\n        return () => {\n            window.removeEventListener('resize', updateBreakpoint);\n        };\n    }, []);\n\n    const isMobile = ['xs', 'sm', 'md'].includes(breakpoint);\n\n    return { breakpoint, isMobile, isDesktop: !isMobile };\n}\n\nexport const ResponsiveHelperBS: FC = memo(function ResponsiveHelperBS() {\n    return (\n        <span className=\"small position-fixed bottom-0 z-3\" style={{ fontSize: '9px', right: 1, lineHeight: 1 }}>\n            <small className=\"d-block d-sm-none\">XS</small>\n            <small className=\"d-none d-sm-block d-md-none\">SM</small>\n            <small className=\"d-none d-md-block d-lg-none\">MD</small>\n            <small className=\"d-none d-lg-block d-xl-none\">LG</small>\n            <small className=\"d-none d-xl-block d-xxl-none\">XL</small>\n            <small className=\"d-none d-xxl-block\">XXL</small>\n        </span>\n    );\n});\n"],"mappings":";;;;AAIA,SAAgB,gBAId;CACE,MAAM,CAAC,YAAY,iBAAiB,SAAS,IAAI;CAEjD,gBAAgB;EACZ,MAAM,yBAAyB;GAC3B,MAAM,QAAQ,OAAO;GACrB,IAAI,QAAQ,KACR,cAAc,IAAI;QACf,IAAI,QAAQ,KACf,cAAc,IAAI;QACf,IAAI,QAAQ,KACf,cAAc,IAAI;QACf,IAAI,QAAQ,MACf,cAAc,IAAI;QACf,IAAI,QAAQ,MACf,cAAc,IAAI;QAElB,cAAc,KAAK;EAE3B;EAEA,iBAAiB;EAEjB,OAAO,iBAAiB,UAAU,gBAAgB;EAElD,aAAa;GACT,OAAO,oBAAoB,UAAU,gBAAgB;EACzD;CACJ,GAAG,CAAC,CAAC;CAEL,MAAM,WAAW;EAAC;EAAM;EAAM;CAAI,CAAC,CAAC,SAAS,UAAU;CAEvD,OAAO;EAAE;EAAY;EAAU,WAAW,CAAC;CAAS;AACxD;AAEA,IAAa,qBAAyB,KAAK,SAAS,qBAAqB;CACrE,OACI,qBAAC,QAAD;EAAM,WAAU;EAAoC,OAAO;GAAE,UAAU;GAAO,OAAO;GAAG,YAAY;EAAE;YAAtG;GACI,oBAAC,SAAD;IAAO,WAAU;cAAoB;GAAS,CAAA;GAC9C,oBAAC,SAAD;IAAO,WAAU;cAA8B;GAAS,CAAA;GACxD,oBAAC,SAAD;IAAO,WAAU;cAA8B;GAAS,CAAA;GACxD,oBAAC,SAAD;IAAO,WAAU;cAA8B;GAAS,CAAA;GACxD,oBAAC,SAAD;IAAO,WAAU;cAA+B;GAAS,CAAA;GACzD,oBAAC,SAAD;IAAO,WAAU;cAAqB;GAAU,CAAA;EAC9C;;AAEd,CAAC"}

package/dist/responsiveHelper.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { ResponsiveHelperBS } from './responsiveHelper';
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { ResponsiveHelperBS } from './responsiveHelper.js';
 declare const meta: Meta<typeof ResponsiveHelperBS>;
 export default meta;
 type Story = StoryObj<typeof meta>;

package/dist/responsiveHelper.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"responsiveHelper.stories.d.ts","sourceRoot":"","sources":["../src/responsiveHelper.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,kBAAkB,EAAiB,MAAM,oBAAoB,CAAC;AAEvE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,kBAAkB,CAQzC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAkBrB,CAAC;AA8CF,eAAO,MAAM,iBAAiB,EAAE,KAS/B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAc1B,CAAC"}
+{"version":3,"file":"responsiveHelper.stories.d.ts","sourceRoot":"","sources":["../src/responsiveHelper.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,kBAAkB,EAAiB,MAAM,oBAAoB,CAAC;AAEvE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,kBAAkB,CAQzC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAkBrB,CAAC;AA8CF,eAAO,MAAM,iBAAiB,EAAE,KAS/B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAc1B,CAAC"}

package/dist/screen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"screen.d.ts","sourceRoot":"","sources":["../src/screen.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAQ,MAAM,OAAO,CAAC;AAKxC,MAAM,MAAM,WAAW,GAAG;IACtB,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,WAAW,CAAC,EAAE,GAAG,CAAC;IAClB,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,QAAQ,EAAE,GAAG,CAAC;IACd,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CAEpB,CAAC;AAGF,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CAsHjC,CAAC"}
+{"version":3,"file":"screen.d.ts","sourceRoot":"","sources":["../src/screen.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,KAAK,EAAE,EAAQ,MAAM,OAAO,CAAC;AAK7C,MAAM,MAAM,WAAW,GAAG;IACtB,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,WAAW,CAAC,EAAE,GAAG,CAAC;IAClB,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,QAAQ,EAAE,GAAG,CAAC;IACd,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CAEpB,CAAC;AAGF,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CAsHjC,CAAC"}

package/dist/screen.js

@@ -1,80 +1,87 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { memo } from "react";
-import { Navbar, Nav, Stack, Button } from "react-bootstrap";
 import { useBreakpoint } from "./responsiveHelper.js";
 import { AdaptiveContainer } from "./adaptiveContainer.js";
-const Screen = memo(function Screen2({
-  backBtn,
-  backCb,
-  backIcon,
-  forwardBtn,
-  forwardIcon,
-  forwardCb,
-  footer,
-  menu,
-  header,
-  children,
-  noContentPadding = false,
-  contentClassName = "",
-  title = "",
-  centerContent = false,
-  noHeader = false,
-  noFooter = false,
-  noMenu = false
-  // noFolders = false,
-}) {
-  backBtn = backBtn || (backCb ? (
-    // backCb === true ? () => router.back() : backCb
-    /* @__PURE__ */ jsx(Button, { onClick: backCb, variant: "nav", children: /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("span", { className: backIcon || "bi-chevron-left icon-thick" }),
-      /* @__PURE__ */ jsx("span", { className: "d-none d-lg-inline ms-2", children: "Back" })
-    ] }) })
-  ) : null);
-  forwardBtn = forwardBtn || (forwardCb ? /* @__PURE__ */ jsx(Button, { onClick: forwardCb, children: forwardIcon ? /* @__PURE__ */ jsx("span", { className: forwardIcon }) : "Next" }) : null);
-  const { isMobile, isDesktop } = useBreakpoint();
-  return /* @__PURE__ */ jsxs("div", { className: `d-flex flex-column flex-grow-1 flex-lg-grow-0 ${isMobile ? "vh-100" : ""}`, "data-id": "screen", children: [
-    !noHeader && /* @__PURE__ */ jsxs("header", { className: isDesktop ? "" : "shadow-sm border-bottom", "data-id": "header", children: [
-      isDesktop && !noMenu && menu,
-      title && // (isDesktop ? 'border-bottom' : '')
-      /* @__PURE__ */ jsx(Navbar, { expand: true, className: "main-nav", children: /* @__PURE__ */ jsxs(AdaptiveContainer, { className: "gap-2", children: [
-        backBtn && /* @__PURE__ */ jsx(Nav, { className: "hstack gap-3", children: backBtn }),
-        /* @__PURE__ */ jsx(Navbar.Brand, { className: "me-auto", children: title }),
-        forwardBtn && /* @__PURE__ */ jsx(Nav, { className: "hstack gap-3", children: forwardBtn })
-      ] }) }),
-      header
-    ] }),
-    /* @__PURE__ */ jsxs(
-      AdaptiveContainer,
-      {
-        as: "main",
-        className: [
-          isMobile ? "overflow-y-auto overflow-x-hidden" : "gap-3",
-          `flex-grow-1 d-flex flex-column`,
-          centerContent ? "align-items-center justify-content-center" : "justify-content-start",
-          contentClassName,
-          noContentPadding ? "p-0" : "py-3"
-        ].filter(Boolean).join(" "),
-        "data-id": "content",
-        children: [
-          children,
-          isDesktop && !noFooter && /* @__PURE__ */ jsxs(Fragment, { children: [
-            footer,
-            (forwardBtn || backBtn) && // Navbar screws up the popper
-            /* @__PURE__ */ jsxs(Stack, { gap: 3, direction: "horizontal", children: [
-              backBtn && /* @__PURE__ */ jsx(Nav, { className: "hstack gap-3", children: backBtn }),
-              forwardBtn && /* @__PURE__ */ jsx(Nav, { className: "hstack gap-3 flex-grow-1", children: forwardBtn })
-            ] })
-          ] })
-        ]
-      }
-    ),
-    !noMenu && !noFooter && /* @__PURE__ */ jsxs("footer", { className: "shadow-lg border-top d-block d-lg-none", "data-id": "footer", children: [
-      !noFooter && footer,
-      !noMenu && menu
-    ] })
-  ] });
+import { memo } from "react";
+import { Button, Nav, Navbar, Stack } from "react-bootstrap";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/screen.tsx
+var Screen = memo(function Screen({ backBtn, backCb, backIcon, forwardBtn, forwardIcon, forwardCb, footer, menu, header, children, noContentPadding = false, contentClassName = "", title = "", centerContent = false, noHeader = false, noFooter = false, noMenu = false }) {
+	backBtn = backBtn || (backCb ? /* @__PURE__ */ jsx(Button, {
+		onClick: backCb,
+		variant: "nav",
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", { className: backIcon || "bi-chevron-left icon-thick" }), /* @__PURE__ */ jsx("span", {
+			className: "d-none d-lg-inline ms-2",
+			children: "Back"
+		})] })
+	}) : null);
+	forwardBtn = forwardBtn || (forwardCb ? /* @__PURE__ */ jsx(Button, {
+		onClick: forwardCb,
+		children: forwardIcon ? /* @__PURE__ */ jsx("span", { className: forwardIcon }) : "Next"
+	}) : null);
+	const { isMobile, isDesktop } = useBreakpoint();
+	return /* @__PURE__ */ jsxs("div", {
+		className: `d-flex flex-column flex-grow-1 flex-lg-grow-0 ${isMobile ? "vh-100" : ""}`,
+		"data-id": "screen",
+		children: [
+			!noHeader && /* @__PURE__ */ jsxs("header", {
+				className: isDesktop ? "" : "shadow-sm border-bottom",
+				"data-id": "header",
+				children: [
+					isDesktop && !noMenu && menu,
+					title && /* @__PURE__ */ jsx(Navbar, {
+						expand: true,
+						className: "main-nav",
+						children: /* @__PURE__ */ jsxs(AdaptiveContainer, {
+							className: "gap-2",
+							children: [
+								backBtn && /* @__PURE__ */ jsx(Nav, {
+									className: "hstack gap-3",
+									children: backBtn
+								}),
+								/* @__PURE__ */ jsx(Navbar.Brand, {
+									className: "me-auto",
+									children: title
+								}),
+								forwardBtn && /* @__PURE__ */ jsx(Nav, {
+									className: "hstack gap-3",
+									children: forwardBtn
+								})
+							]
+						})
+					}),
+					header
+				]
+			}),
+			/* @__PURE__ */ jsxs(AdaptiveContainer, {
+				as: "main",
+				className: [
+					isMobile ? "overflow-y-auto overflow-x-hidden" : "gap-3",
+					`flex-grow-1 d-flex flex-column`,
+					centerContent ? "align-items-center justify-content-center" : "justify-content-start",
+					contentClassName,
+					noContentPadding ? "p-0" : "py-3"
+				].filter(Boolean).join(" "),
+				"data-id": "content",
+				children: [children, isDesktop && !noFooter && /* @__PURE__ */ jsxs(Fragment, { children: [footer, (forwardBtn || backBtn) && /* @__PURE__ */ jsxs(Stack, {
+					gap: 3,
+					direction: "horizontal",
+					children: [backBtn && /* @__PURE__ */ jsx(Nav, {
+						className: "hstack gap-3",
+						children: backBtn
+					}), forwardBtn && /* @__PURE__ */ jsx(Nav, {
+						className: "hstack gap-3 flex-grow-1",
+						children: forwardBtn
+					})]
+				})] })]
+			}),
+			!noMenu && !noFooter && /* @__PURE__ */ jsxs("footer", {
+				className: "shadow-lg border-top d-block d-lg-none",
+				"data-id": "footer",
+				children: [!noFooter && footer, !noMenu && menu]
+			})
+		]
+	});
 });
-export {
-  Screen
-};
-//# sourceMappingURL=screen.js.map
+//#endregion
+export { Screen };
+
+//# sourceMappingURL=screen.js.map

package/dist/screen.js.map

@@ -1 +1 @@
-{"version":3,"file":"screen.js","sources":["../src/screen.tsx"],"sourcesContent":["import React, { FC, memo } from 'react';\nimport { Button, Navbar, Nav, Stack } from 'react-bootstrap';\nimport { useBreakpoint } from './responsiveHelper';\nimport { AdaptiveContainer } from './adaptiveContainer';\n\nexport type ScreenProps = {\n    backBtn?: any;\n    backCb?: any;\n    backIcon?: any;\n    forwardBtn?: any;\n    forwardIcon?: any;\n    forwardCb?: any;\n    children: any;\n    contentClassName?: string;\n    noContentPadding?: boolean;\n    header?: any; // resides on top panel in mobile, does not scroll, before content on desktop\n    footer?: any; // resides on bottom menu panel in mobile, does not scroll, or after content on desktop\n    menu?: any;\n    title?: any;\n    centerContent?: boolean;\n    noHeader?: boolean;\n    noFooter?: boolean;\n    noMenu?: boolean;\n    // noFolders?: boolean;\n};\n\n//TODO Footer -> menu\nexport const Screen: FC<ScreenProps> = memo(function Screen({\n    backBtn,\n    backCb,\n    backIcon,\n    forwardBtn,\n    forwardIcon,\n    forwardCb,\n    footer,\n    menu,\n    header,\n    children,\n    noContentPadding = false,\n    contentClassName = '',\n    title = '',\n    centerContent = false,\n    noHeader = false,\n    noFooter = false,\n    noMenu = false,\n    // noFolders = false,\n}) {\n    // const router = useRouter();\n\n    backBtn =\n        backBtn ||\n        (backCb ? (\n            // backCb === true ? () => router.back() : backCb\n            <Button onClick={backCb} variant=\"nav\">\n                {\n                    <>\n                        <span className={backIcon || 'bi-chevron-left icon-thick'} />\n                        <span className=\"d-none d-lg-inline ms-2\">Back</span>\n                    </>\n                }\n            </Button>\n        ) : null);\n\n    forwardBtn =\n        forwardBtn ||\n        (forwardCb ? (\n            <Button onClick={forwardCb}>{forwardIcon ? <span className={forwardIcon}></span> : 'Next'}</Button>\n        ) : null);\n\n    const { isMobile, isDesktop } = useBreakpoint();\n\n    // useLoadingTimeout(1000); // less jerky UI\n\n    return (\n        <div className={`d-flex flex-column flex-grow-1 flex-lg-grow-0 ${isMobile ? 'vh-100' : ''}`} data-id=\"screen\">\n            {/* HEADER */}\n\n            {/* FIXME postition fixed does not assign z-index automatically https://getbootstrap.com/docs/4.0/layout/overview/#z-index*/}\n            {!noHeader && (\n                <header className={isDesktop ? '' : 'shadow-sm border-bottom'} data-id=\"header\">\n                    {/* {!noFolders && <FolderBar />} */}\n\n                    {/* {isDesktop && !noFooter && <Footer />} */}\n                    {isDesktop && !noMenu && menu}\n\n                    {title && (\n                        // (isDesktop ? 'border-bottom' : '')\n                        <Navbar expand className=\"main-nav\">\n                            <AdaptiveContainer className=\"gap-2\">\n                                {backBtn && <Nav className=\"hstack gap-3\">{backBtn}</Nav>}\n                                <Navbar.Brand className=\"me-auto\">{title}</Navbar.Brand>\n                                {forwardBtn && <Nav className=\"hstack gap-3\">{forwardBtn}</Nav>}\n                            </AdaptiveContainer>\n                        </Navbar>\n                    )}\n\n                    {header}\n                </header>\n            )}\n\n            {/* CONTENT */}\n\n            <AdaptiveContainer\n                as=\"main\"\n                className={[\n                    isMobile ? 'overflow-y-auto overflow-x-hidden' : 'gap-3',\n                    `flex-grow-1 d-flex flex-column`,\n                    centerContent ? 'align-items-center justify-content-center' : 'justify-content-start',\n                    contentClassName,\n                    noContentPadding ? 'p-0' : 'py-3',\n                ]\n                    .filter(Boolean)\n                    .join(' ')}\n                data-id=\"content\"\n            >\n                {children}\n\n                {/* Repeat screen buttons at the bottom on desktop */}\n                {isDesktop && !noFooter && (\n                    <>\n                        {footer}\n\n                        {/* TODO Possibly introduce a prop desktopFooterBeforeButtons */}\n                        {(forwardBtn || backBtn) && (\n                            // Navbar screws up the popper\n                            <Stack gap={3} direction=\"horizontal\">\n                                {/* No container since already in container */}\n                                {backBtn && <Nav className=\"hstack gap-3\">{backBtn}</Nav>}\n                                {forwardBtn && <Nav className=\"hstack gap-3 flex-grow-1\">{forwardBtn}</Nav>}\n                            </Stack>\n                        )}\n                    </>\n                )}\n            </AdaptiveContainer>\n\n            {/* FOOTER */}\n\n            {!noMenu && !noFooter && (\n                <footer className=\"shadow-lg border-top d-block d-lg-none\" data-id=\"footer\">\n                    {!noFooter && footer}\n                    {!noMenu && menu}\n                </footer>\n            )}\n        </div>\n    );\n});\n"],"names":["Screen"],"mappings":";;;;;AA2BO,MAAM,SAA0B,KAAK,SAASA,QAAO;AAAA,EACxD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB,mBAAmB;AAAA,EACnB,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB,WAAW;AAAA,EACX,WAAW;AAAA,EACX,SAAS;AAAA;AAEb,GAAG;AAGC,YACI,YACC;AAAA;AAAA,wBAEI,QAAA,EAAO,SAAS,QAAQ,SAAQ,OAEzB,UAAA,qBAAA,UAAA,EACI,UAAA;AAAA,MAAA,oBAAC,QAAA,EAAK,WAAW,YAAY,6BAAA,CAA8B;AAAA,MAC3D,oBAAC,QAAA,EAAK,WAAU,2BAA0B,UAAA,OAAA,CAAI;AAAA,IAAA,EAAA,CAClD,EAAA,CAER;AAAA,MACA;AAER,eACI,eACC,YACG,oBAAC,QAAA,EAAO,SAAS,WAAY,UAAA,cAAc,oBAAC,QAAA,EAAK,WAAW,YAAA,CAAa,IAAU,QAAO,IAC1F;AAER,QAAM,EAAE,UAAU,UAAA,IAAc,cAAA;AAIhC,SACI,qBAAC,SAAI,WAAW,iDAAiD,WAAW,WAAW,EAAE,IAAI,WAAQ,UAIhG,UAAA;AAAA,IAAA,CAAC,iCACG,UAAA,EAAO,WAAW,YAAY,KAAK,2BAA2B,WAAQ,UAIlE,UAAA;AAAA,MAAA,aAAa,CAAC,UAAU;AAAA,MAExB;AAAA,MAEG,oBAAC,UAAO,QAAM,MAAC,WAAU,YACrB,UAAA,qBAAC,mBAAA,EAAkB,WAAU,SACxB,UAAA;AAAA,QAAA,WAAW,oBAAC,KAAA,EAAI,WAAU,gBAAgB,UAAA,SAAQ;AAAA,4BAClD,OAAO,OAAP,EAAa,WAAU,WAAW,UAAA,OAAM;AAAA,QACxC,cAAc,oBAAC,KAAA,EAAI,WAAU,gBAAgB,UAAA,WAAA,CAAW;AAAA,MAAA,EAAA,CAC7D,EAAA,CACJ;AAAA,MAGH;AAAA,IAAA,GACL;AAAA,IAKJ;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,IAAG;AAAA,QACH,WAAW;AAAA,UACP,WAAW,sCAAsC;AAAA,UACjD;AAAA,UACA,gBAAgB,8CAA8C;AAAA,UAC9D;AAAA,UACA,mBAAmB,QAAQ;AAAA,QAAA,EAE1B,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,QACb,WAAQ;AAAA,QAEP,UAAA;AAAA,UAAA;AAAA,UAGA,aAAa,CAAC,YACX,qBAAA,UAAA,EACK,UAAA;AAAA,YAAA;AAAA,aAGC,cAAc;AAAA,YAEZ,qBAAC,OAAA,EAAM,KAAK,GAAG,WAAU,cAEpB,UAAA;AAAA,cAAA,WAAW,oBAAC,KAAA,EAAI,WAAU,gBAAgB,UAAA,SAAQ;AAAA,cAClD,cAAc,oBAAC,KAAA,EAAI,WAAU,4BAA4B,UAAA,WAAA,CAAW;AAAA,YAAA,EAAA,CACzE;AAAA,UAAA,EAAA,CAER;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAMP,CAAC,UAAU,CAAC,iCACR,UAAA,EAAO,WAAU,0CAAyC,WAAQ,UAC9D,UAAA;AAAA,MAAA,CAAC,YAAY;AAAA,MACb,CAAC,UAAU;AAAA,IAAA,EAAA,CAChB;AAAA,EAAA,GAER;AAER,CAAC;"}
+{"version":3,"file":"screen.js","names":[],"sources":["../src/screen.tsx"],"sourcesContent":["import React, { type FC, memo } from 'react';\nimport { Button, Navbar, Nav, Stack } from 'react-bootstrap';\nimport { useBreakpoint } from './responsiveHelper';\nimport { AdaptiveContainer } from './adaptiveContainer';\n\nexport type ScreenProps = {\n    backBtn?: any;\n    backCb?: any;\n    backIcon?: any;\n    forwardBtn?: any;\n    forwardIcon?: any;\n    forwardCb?: any;\n    children: any;\n    contentClassName?: string;\n    noContentPadding?: boolean;\n    header?: any; // resides on top panel in mobile, does not scroll, before content on desktop\n    footer?: any; // resides on bottom menu panel in mobile, does not scroll, or after content on desktop\n    menu?: any;\n    title?: any;\n    centerContent?: boolean;\n    noHeader?: boolean;\n    noFooter?: boolean;\n    noMenu?: boolean;\n    // noFolders?: boolean;\n};\n\n//TODO Footer -> menu\nexport const Screen: FC<ScreenProps> = memo(function Screen({\n    backBtn,\n    backCb,\n    backIcon,\n    forwardBtn,\n    forwardIcon,\n    forwardCb,\n    footer,\n    menu,\n    header,\n    children,\n    noContentPadding = false,\n    contentClassName = '',\n    title = '',\n    centerContent = false,\n    noHeader = false,\n    noFooter = false,\n    noMenu = false,\n    // noFolders = false,\n}) {\n    // const router = useRouter();\n\n    backBtn =\n        backBtn ||\n        (backCb ? (\n            // backCb === true ? () => router.back() : backCb\n            <Button onClick={backCb} variant=\"nav\">\n                {\n                    <>\n                        <span className={backIcon || 'bi-chevron-left icon-thick'} />\n                        <span className=\"d-none d-lg-inline ms-2\">Back</span>\n                    </>\n                }\n            </Button>\n        ) : null);\n\n    forwardBtn =\n        forwardBtn ||\n        (forwardCb ? (\n            <Button onClick={forwardCb}>{forwardIcon ? <span className={forwardIcon}></span> : 'Next'}</Button>\n        ) : null);\n\n    const { isMobile, isDesktop } = useBreakpoint();\n\n    // useLoadingTimeout(1000); // less jerky UI\n\n    return (\n        <div className={`d-flex flex-column flex-grow-1 flex-lg-grow-0 ${isMobile ? 'vh-100' : ''}`} data-id=\"screen\">\n            {/* HEADER */}\n\n            {/* FIXME postition fixed does not assign z-index automatically https://getbootstrap.com/docs/4.0/layout/overview/#z-index*/}\n            {!noHeader && (\n                <header className={isDesktop ? '' : 'shadow-sm border-bottom'} data-id=\"header\">\n                    {/* {!noFolders && <FolderBar />} */}\n\n                    {/* {isDesktop && !noFooter && <Footer />} */}\n                    {isDesktop && !noMenu && menu}\n\n                    {title && (\n                        // (isDesktop ? 'border-bottom' : '')\n                        <Navbar expand className=\"main-nav\">\n                            <AdaptiveContainer className=\"gap-2\">\n                                {backBtn && <Nav className=\"hstack gap-3\">{backBtn}</Nav>}\n                                <Navbar.Brand className=\"me-auto\">{title}</Navbar.Brand>\n                                {forwardBtn && <Nav className=\"hstack gap-3\">{forwardBtn}</Nav>}\n                            </AdaptiveContainer>\n                        </Navbar>\n                    )}\n\n                    {header}\n                </header>\n            )}\n\n            {/* CONTENT */}\n\n            <AdaptiveContainer\n                as=\"main\"\n                className={[\n                    isMobile ? 'overflow-y-auto overflow-x-hidden' : 'gap-3',\n                    `flex-grow-1 d-flex flex-column`,\n                    centerContent ? 'align-items-center justify-content-center' : 'justify-content-start',\n                    contentClassName,\n                    noContentPadding ? 'p-0' : 'py-3',\n                ]\n                    .filter(Boolean)\n                    .join(' ')}\n                data-id=\"content\"\n            >\n                {children}\n\n                {/* Repeat screen buttons at the bottom on desktop */}\n                {isDesktop && !noFooter && (\n                    <>\n                        {footer}\n\n                        {/* TODO Possibly introduce a prop desktopFooterBeforeButtons */}\n                        {(forwardBtn || backBtn) && (\n                            // Navbar screws up the popper\n                            <Stack gap={3} direction=\"horizontal\">\n                                {/* No container since already in container */}\n                                {backBtn && <Nav className=\"hstack gap-3\">{backBtn}</Nav>}\n                                {forwardBtn && <Nav className=\"hstack gap-3 flex-grow-1\">{forwardBtn}</Nav>}\n                            </Stack>\n                        )}\n                    </>\n                )}\n            </AdaptiveContainer>\n\n            {/* FOOTER */}\n\n            {!noMenu && !noFooter && (\n                <footer className=\"shadow-lg border-top d-block d-lg-none\" data-id=\"footer\">\n                    {!noFooter && footer}\n                    {!noMenu && menu}\n                </footer>\n            )}\n        </div>\n    );\n});\n"],"mappings":";;;;;;AA2BA,IAAa,SAA0B,KAAK,SAAS,OAAO,EACxD,SACA,QACA,UACA,YACA,aACA,WACA,QACA,MACA,QACA,UACA,mBAAmB,OACnB,mBAAmB,IACnB,QAAQ,IACR,gBAAgB,OAChB,WAAW,OACX,WAAW,OACX,SAAS,SAEV;CAGC,UACI,YACC,SAEG,oBAAC,QAAD;EAAQ,SAAS;EAAQ,SAAQ;YAEzB,qBAAA,UAAA,EAAA,UAAA,CACI,oBAAC,QAAD,EAAM,WAAW,YAAY,6BAA+B,CAAA,GAC5D,oBAAC,QAAD;GAAM,WAAU;aAA0B;EAAU,CAAA,CACtD,EAAA,CAAA;CAEF,CAAA,IACR;CAER,aACI,eACC,YACG,oBAAC,QAAD;EAAQ,SAAS;YAAY,cAAc,oBAAC,QAAD,EAAM,WAAW,YAAmB,CAAA,IAAI;CAAe,CAAA,IAClG;CAER,MAAM,EAAE,UAAU,cAAc,cAAc;CAI9C,OACI,qBAAC,OAAD;EAAK,WAAW,iDAAiD,WAAW,WAAW;EAAM,WAAQ;YAArG;GAIK,CAAC,YACE,qBAAC,UAAD;IAAQ,WAAW,YAAY,KAAK;IAA2B,WAAQ;cAAvE;KAIK,aAAa,CAAC,UAAU;KAExB,SAEG,oBAAC,QAAD;MAAQ,QAAA;MAAO,WAAU;gBACrB,qBAAC,mBAAD;OAAmB,WAAU;iBAA7B;QACK,WAAW,oBAAC,KAAD;SAAK,WAAU;mBAAgB;QAAa,CAAA;QACxD,oBAAC,OAAO,OAAR;SAAc,WAAU;mBAAW;QAAoB,CAAA;QACtD,cAAc,oBAAC,KAAD;SAAK,WAAU;mBAAgB;QAAgB,CAAA;OAC/C;;KACf,CAAA;KAGX;IACG;;GAKZ,qBAAC,mBAAD;IACI,IAAG;IACH,WAAW;KACP,WAAW,sCAAsC;KACjD;KACA,gBAAgB,8CAA8C;KAC9D;KACA,mBAAmB,QAAQ;IAC/B,CAAC,CACI,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;IACb,WAAQ;cAXZ,CAaK,UAGA,aAAa,CAAC,YACX,qBAAA,UAAA,EAAA,UAAA,CACK,SAGC,cAAc,YAEZ,qBAAC,OAAD;KAAO,KAAK;KAAG,WAAU;eAAzB,CAEK,WAAW,oBAAC,KAAD;MAAK,WAAU;gBAAgB;KAAa,CAAA,GACvD,cAAc,oBAAC,KAAD;MAAK,WAAU;gBAA4B;KAAgB,CAAA,CACvE;MAEb,EAAA,CAAA,CAES;;GAIlB,CAAC,UAAU,CAAC,YACT,qBAAC,UAAD;IAAQ,WAAU;IAAyC,WAAQ;cAAnE,CACK,CAAC,YAAY,QACb,CAAC,UAAU,IACR;;EAEX;;AAEb,CAAC"}

package/dist/screen.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Screen } from './screen';
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Screen } from './screen.js';
 declare const meta: Meta<typeof Screen>;
 export default meta;
 type Story = StoryObj<typeof meta>;

package/dist/screen.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"screen.stories.d.ts","sourceRoot":"","sources":["../src/screen.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AA2ClC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CA8B7B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,WAAW,EAAE,KAKzB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAcpB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAIvB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAKzB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAgBxB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAaxB,CAAC"}
+{"version":3,"file":"screen.stories.d.ts","sourceRoot":"","sources":["../src/screen.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AA2ClC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CA8B7B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,WAAW,EAAE,KAKzB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAcpB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAIvB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAKzB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAgBxB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAaxB,CAAC"}