@becklyn/next 4.3.0 → 4.4.0

package/dist/cjs/types/style.d.ts

@@ -4,4 +4,9 @@ export interface StyledProps {
 export type PropsWithClassName<P = object> = P & {
     className?: string;
 };
+export type PropsWithClassNames<K extends string, P = object> = P & {
+    classNames?: {
+        [Key in K]?: string;
+    };
+};
 //# sourceMappingURL=style.d.ts.map

package/dist/cjs/types/style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../types/style.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,MAAM,kBAAkB,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC"}
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../types/style.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,MAAM,kBAAkB,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAExE,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,GAAG,MAAM,IAAI,CAAC,GAAG;IAChE,UAAU,CAAC,EAAE;SACR,GAAG,IAAI,CAAC,CAAC,CAAC,EAAE,MAAM;KACtB,CAAC;CACL,CAAC"}

package/dist/es/contentful/imageLoader.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.imageLoader = void 0;
-const imageLoader = ({ src, width, quality, format = "webp" }) => {
+export const imageLoader = ({ src, width, quality, format = "webp" }) => {
     let url = src;
     if (!src.startsWith("https")) {
         if (src.startsWith("http")) {
@@ -21,4 +18,3 @@ const imageLoader = ({ src, width, quality, format = "webp" }) => {
             return src;
     }
 };
-exports.imageLoader = imageLoader;

package/dist/es/contentful/inspector.js

@@ -1,34 +1,30 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.inspector = exports.removeInspectorProps = exports.getInspectorProps = exports.InspectorPropsSchema = exports.InspectableFieldSchema = exports.InspectableItemSchema = void 0;
-const zod_1 = require("zod");
-exports.InspectableItemSchema = zod_1.z.object({
-    entryId: zod_1.z.string().optional(),
-    draftMode: zod_1.z.boolean().optional(),
-    locale: zod_1.z.string().optional(),
+import { z } from "zod";
+export const InspectableItemSchema = z.object({
+    entryId: z.string().optional(),
+    draftMode: z.boolean().optional(),
+    locale: z.string().optional(),
 });
-exports.InspectableFieldSchema = zod_1.z
+export const InspectableFieldSchema = z
     .object({
-    fieldId: zod_1.z.string().optional(),
-    assetId: zod_1.z.string().optional(),
+    fieldId: z.string().optional(),
+    assetId: z.string().optional(),
 })
-    .extend(exports.InspectableItemSchema.shape);
-exports.InspectorPropsSchema = zod_1.z.object({
-    entryId: zod_1.z.string().optional(),
-    draftMode: zod_1.z.boolean().optional(),
-    locale: zod_1.z.string().optional(),
-    fieldId: zod_1.z.string().optional(),
-    assetId: zod_1.z.string().optional(),
+    .extend(InspectableItemSchema.shape);
+export const InspectorPropsSchema = z.object({
+    entryId: z.string().optional(),
+    draftMode: z.boolean().optional(),
+    locale: z.string().optional(),
+    fieldId: z.string().optional(),
+    assetId: z.string().optional(),
 });
-const getInspectorProps = (data) => {
+export const getInspectorProps = (data) => {
     if (!data) {
         return {};
     }
     const { entryId, fieldId, assetId, draftMode, locale } = data;
     return { entryId, fieldId, assetId, draftMode, locale };
 };
-exports.getInspectorProps = getInspectorProps;
-const removeInspectorProps = (data) => {
+export const removeInspectorProps = (data) => {
     if (!data) {
         return {};
     }
@@ -36,8 +32,7 @@ const removeInspectorProps = (data) => {
     const { entryId, fieldId, assetId, draftMode, locale, ...props } = data;
     return props;
 };
-exports.removeInspectorProps = removeInspectorProps;
-const inspector = (data) => {
+export const inspector = (data) => {
     if (!data) {
         return {};
     }
@@ -53,4 +48,3 @@ const inspector = (data) => {
         "data-contentful-locale": locale,
     };
 };
-exports.inspector = inspector;

package/dist/es/error/ErrorBoundary.js

@@ -1,9 +1,6 @@
 "use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ErrorBoundary = void 0;
-const react_1 = require("react");
-class ErrorBoundary extends react_1.Component {
+import { Component } from "react";
+export class ErrorBoundary extends Component {
     constructor(props) {
         super(props);
         this.state = { hasError: false };
@@ -18,4 +15,3 @@ class ErrorBoundary extends react_1.Component {
         return this.props.children;
     }
 }
-exports.ErrorBoundary = ErrorBoundary;

package/dist/es/format/phone.js

@@ -1,10 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.formatPhone = void 0;
-const formatPhone = (phone) => {
+export const formatPhone = (phone) => {
     if (typeof phone === "number") {
         return phone;
     }
     return phone.replace(/[-/)( ]/g, "").replace("+49", "0049");
 };
-exports.formatPhone = formatPhone;

package/dist/es/lib/click.js

@@ -1,10 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useClickOutside = void 0;
-const react_1 = require("react");
-const useClickOutside = ({ callback }) => {
-    const ref = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
+import { useEffect, useRef } from "react";
+export const useClickOutside = ({ callback }) => {
+    const ref = useRef(null);
+    useEffect(() => {
         const handleClickOutside = (event) => {
             if (ref.current && !ref.current.contains(event.target)) {
                 callback(event);
@@ -15,4 +12,3 @@ const useClickOutside = ({ callback }) => {
     });
     return ref;
 };
-exports.useClickOutside = useClickOutside;

package/dist/es/lib/debounce.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.debounce = void 0;
-const debounce = (func, wait) => {
+export const debounce = (func, wait) => {
     let timeout = null;
     return () => {
         if (timeout) {
@@ -10,4 +7,3 @@ const debounce = (func, wait) => {
         timeout = setTimeout(func, wait);
     };
 };
-exports.debounce = debounce;

package/dist/es/lib/escape.js

@@ -1,9 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useEscapeListener = void 0;
-const react_1 = require("react");
-const useEscapeListener = (callback, deps, capture = false) => {
-    (0, react_1.useEffect)(() => {
+import { useEffect } from "react";
+export const useEscapeListener = (callback, deps, capture = false) => {
+    useEffect(() => {
         const onKeyDown = (e) => {
             if (e.key === "Escape") {
                 callback(e);
@@ -15,4 +12,3 @@ const useEscapeListener = (callback, deps, capture = false) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     deps ? [...deps, capture] : undefined);
 };
-exports.useEscapeListener = useEscapeListener;

package/dist/es/lib/fetcher.js

@@ -1,5 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.fetcher = void 0;
-const fetcher = (...args) => fetch(...args).then(res => res.json());
-exports.fetcher = fetcher;
+export const fetcher = (...args) => fetch(...args).then(res => res.json());

package/dist/es/lib/focusTrap.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTrapFocus = exports.FOCUSABLE_ELEMENTS = exports.checkCanFocusTrap = void 0;
-const react_1 = require("react");
-const checkCanFocusTrap = async (container) => {
+import { useCallback, useEffect, useRef, useState } from "react";
+export const checkCanFocusTrap = async (container) => {
     const results = container.map(element => {
         return new Promise(resolve => {
             const interval = setInterval(() => {
@@ -15,19 +12,18 @@ const checkCanFocusTrap = async (container) => {
     });
     await Promise.all(results);
 };
-exports.checkCanFocusTrap = checkCanFocusTrap;
-exports.FOCUSABLE_ELEMENTS = 'button:not([tabindex="-1"]), [href]:not([tabindex="-1"]), input:not([tabindex="-1"]), select:not([tabindex="-1"]), textarea:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])';
-const useTrapFocus = (container) => {
-    const ref = (0, react_1.useRef)(null);
-    const [nodes, setNodes] = (0, react_1.useState)(null);
-    const update = (0, react_1.useCallback)(() => {
+export const FOCUSABLE_ELEMENTS = 'button:not([tabindex="-1"]), [href]:not([tabindex="-1"]), input:not([tabindex="-1"]), select:not([tabindex="-1"]), textarea:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])';
+export const useTrapFocus = (container) => {
+    const ref = useRef(null);
+    const [nodes, setNodes] = useState(null);
+    const update = useCallback(() => {
         const el = ref.current || container;
         if (!el) {
             return;
         }
-        setNodes(Array.from(el.querySelectorAll(exports.FOCUSABLE_ELEMENTS)));
+        setNodes(Array.from(el.querySelectorAll(FOCUSABLE_ELEMENTS)));
     }, [container]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         const el = ref.current || container;
         if (!el) {
             return;
@@ -35,7 +31,7 @@ const useTrapFocus = (container) => {
         // eslint-disable-next-line react-hooks/set-state-in-effect
         update();
     }, [container, update]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         const el = ref.current || container;
         if (!el || !nodes) {
             return;
@@ -62,4 +58,3 @@ const useTrapFocus = (container) => {
     }, [container, nodes]);
     return [ref, { update }];
 };
-exports.useTrapFocus = useTrapFocus;

package/dist/es/lib/geo.js

@@ -1,23 +1,18 @@
 "use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useGeoLocation = exports.getGeoLocation = void 0;
-const react_1 = require("react");
-const getGeoLocation = async () => {
+import { useState } from "react";
+export const getGeoLocation = async () => {
     if (navigator && "geolocation" in navigator) {
         return new Promise((resolve, reject) => {
             navigator.geolocation.getCurrentPosition(resolve, reject);
         });
     }
 };
-exports.getGeoLocation = getGeoLocation;
-const useGeoLocation = () => {
-    const [location, setLocation] = (0, react_1.useState)();
+export const useGeoLocation = () => {
+    const [location, setLocation] = useState();
     const onClick = async () => {
-        const l = await (0, exports.getGeoLocation)();
+        const l = await getGeoLocation();
         setLocation(l);
         return l;
     };
     return [onClick, location];
 };
-exports.useGeoLocation = useGeoLocation;

package/dist/es/lib/intersection.js

@@ -1,12 +1,9 @@
 "use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useIntersection = void 0;
-const react_1 = require("react");
-const useIntersection = ({ ref, defaultValue = false, callback, filter, options, dependencies, }) => {
-    const [visible, setVisible] = (0, react_1.useState)(defaultValue);
+import { useEffect, useState } from "react";
+export const useIntersection = ({ ref, defaultValue = false, callback, filter, options, dependencies, }) => {
+    const [visible, setVisible] = useState(defaultValue);
     const { current } = ref;
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         const observer = new IntersectionObserver(entries => {
             entries.forEach(entry => {
                 const isVisible = filter ? filter(entry) : entry.isIntersecting;
@@ -24,4 +21,3 @@ const useIntersection = ({ ref, defaultValue = false, callback, filter, options,
     }, [current, ...(dependencies ?? [])]);
     return visible;
 };
-exports.useIntersection = useIntersection;

package/dist/es/lib/isMounted.js

@@ -1,22 +1,17 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useIsLayoutMounted = exports.useIsMounted = void 0;
-const react_1 = require("react");
-const useIsMounted = () => {
-    const [isMounted, setIsMounted] = (0, react_1.useState)(false);
-    (0, react_1.useEffect)(() => {
+import { useEffect, useLayoutEffect, useState } from "react";
+export const useIsMounted = () => {
+    const [isMounted, setIsMounted] = useState(false);
+    useEffect(() => {
         // eslint-disable-next-line react-hooks/set-state-in-effect
         setIsMounted(true);
     }, []);
     return isMounted;
 };
-exports.useIsMounted = useIsMounted;
-const useIsLayoutMounted = () => {
-    const [isLayoutMounted, setIsLayoutMounted] = (0, react_1.useState)(false);
-    (0, react_1.useLayoutEffect)(() => {
+export const useIsLayoutMounted = () => {
+    const [isLayoutMounted, setIsLayoutMounted] = useState(false);
+    useLayoutEffect(() => {
         // eslint-disable-next-line react-hooks/set-state-in-effect
         setIsLayoutMounted(true);
     }, []);
     return isLayoutMounted;
 };
-exports.useIsLayoutMounted = useIsLayoutMounted;

package/dist/es/lib/shortcut.js

@@ -1,9 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useShortcut = void 0;
-const react_1 = require("react");
-const useShortcut = (key, callback, deps) => {
-    (0, react_1.useEffect)(() => {
+import { useEffect } from "react";
+export const useShortcut = (key, callback, deps) => {
+    useEffect(() => {
         const onKeyDown = (e) => {
             let input = "";
             if (e.metaKey) {
@@ -28,4 +25,3 @@ const useShortcut = (key, callback, deps) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, deps);
 };
-exports.useShortcut = useShortcut;

package/dist/es/lib/sleep.js

@@ -1,5 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.sleep = void 0;
-const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
-exports.sleep = sleep;
+export const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));

package/dist/es/lib/slider.js

@@ -1,23 +1,17 @@
 "use client";
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSlider = void 0;
-const react_1 = require("react");
-const keen_slider_1 = __importDefault(require("keen-slider"));
-const useSlider = ({ shouldObserverMutations, shouldAutoDisable, ...opt } = {}) => {
-    const [ref, setRef] = (0, react_1.useState)(null);
-    const [details, setDetails] = (0, react_1.useState)(null);
-    const [options, setOptions] = (0, react_1.useState)(null);
-    const [isMounted, setIsMounted] = (0, react_1.useState)(false);
-    const sliderRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
+import { useCallback, useEffect, useRef, useState } from "react";
+import KeenSlider from "keen-slider";
+export const useSlider = ({ shouldObserverMutations, shouldAutoDisable, ...opt } = {}) => {
+    const [ref, setRef] = useState(null);
+    const [details, setDetails] = useState(null);
+    const [options, setOptions] = useState(null);
+    const [isMounted, setIsMounted] = useState(false);
+    const sliderRef = useRef(null);
+    useEffect(() => {
         if (!ref) {
             return;
         }
-        sliderRef.current = new keen_slider_1.default(ref, {
+        sliderRef.current = new KeenSlider(ref, {
             rubberband: false,
             created: handleDetails,
             slideChanged: handleDetails,
@@ -37,7 +31,7 @@ const useSlider = ({ shouldObserverMutations, shouldAutoDisable, ...opt } = {})
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [ref]);
-    const isActiveIndex = (0, react_1.useCallback)((index) => index === details?.rel, [details]);
+    const isActiveIndex = useCallback((index) => index === details?.rel, [details]);
     const handleDetails = (ref) => {
         const details = ref.track.details;
         setIsMounted(true);
@@ -77,7 +71,6 @@ const useSlider = ({ shouldObserverMutations, shouldAutoDisable, ...opt } = {})
         },
     ];
 };
-exports.useSlider = useSlider;
 const MutationPlugin = slider => {
     const observer = new MutationObserver(() => {
         slider.update(slider.options);

package/dist/es/lib/staticContent.js

@@ -1,11 +1,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStaticContent = void 0;
-const react_1 = require("react");
-const useStaticContent = () => {
-    const ref = (0, react_1.useRef)(null);
-    const [render, setRender] = (0, react_1.useState)(typeof window === "undefined");
-    (0, react_1.useEffect)(() => {
+import { useEffect, useRef, useState } from "react";
+export const useStaticContent = () => {
+    const ref = useRef(null);
+    const [render, setRender] = useState(typeof window === "undefined");
+    useEffect(() => {
         // check if the innerHTML is empty as client side navigation
         // need to render the component without server-side backup
         const isEmpty = ref.current?.innerHTML === "";
@@ -16,4 +13,3 @@ const useStaticContent = () => {
     }, []);
     return [render, ref];
 };
-exports.useStaticContent = useStaticContent;

package/dist/es/lib/typeChecks.js

@@ -1,19 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ensureArray = exports.first = exports.isDefined = exports.isObject = exports.isString = void 0;
-const isString = (value) => {
+export const isString = (value) => {
     return typeof value === "string";
 };
-exports.isString = isString;
-const isObject = (value) => {
+export const isObject = (value) => {
     return typeof value === "object" && !Array.isArray(value);
 };
-exports.isObject = isObject;
-const isDefined = (value) => {
+export const isDefined = (value) => {
     return value !== undefined && value !== null;
 };
-exports.isDefined = isDefined;
-const first = (value) => value ? (Array.isArray(value) ? value.at(0) : value) : undefined;
-exports.first = first;
-const ensureArray = (value) => value ? (Array.isArray(value) ? value : [value]) : [];
-exports.ensureArray = ensureArray;
+export const first = (value) => value ? (Array.isArray(value) ? value.at(0) : value) : undefined;
+export const ensureArray = (value) => value ? (Array.isArray(value) ? value : [value]) : [];

package/dist/es/lib/useDebounce.js

@@ -1,11 +1,7 @@
 "use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDebounce = void 0;
-const react_1 = require("react");
-const debounce_1 = require("./debounce");
-const useDebounce = (fn, ms, deps) => {
-    const bounce = (0, react_1.useMemo)(() => (0, debounce_1.debounce)(fn, ms), [fn, ms]);
-    (0, react_1.useEffect)(() => (deps && Array.isArray(deps) ? bounce() : bounce()), [deps, bounce]);
+import { useEffect, useMemo } from "react";
+import { debounce } from "./debounce";
+export const useDebounce = (fn, ms, deps) => {
+    const bounce = useMemo(() => debounce(fn, ms), [fn, ms]);
+    useEffect(() => (deps && Array.isArray(deps) ? bounce() : bounce()), [deps, bounce]);
 };
-exports.useDebounce = useDebounce;

package/dist/es/lib/useInterval.js

@@ -1,12 +1,9 @@
 "use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useInterval = void 0;
-const react_1 = require("react");
-const useInterval = (callback, interval, maxExecutions) => {
-    const intervalRef = (0, react_1.useRef)(null);
-    const executions = (0, react_1.useRef)(0);
-    const startInterval = (0, react_1.useCallback)(() => {
+import { useCallback, useEffect, useRef } from "react";
+export const useInterval = (callback, interval, maxExecutions) => {
+    const intervalRef = useRef(null);
+    const executions = useRef(0);
+    const startInterval = useCallback(() => {
         if (intervalRef.current) {
             clearInterval(intervalRef.current);
         }
@@ -22,13 +19,13 @@ const useInterval = (callback, interval, maxExecutions) => {
             }
         }, interval);
     }, [callback, interval, maxExecutions]);
-    const cancelInterval = (0, react_1.useCallback)(() => {
+    const cancelInterval = useCallback(() => {
         if (intervalRef.current) {
             clearInterval(intervalRef.current);
             intervalRef.current = null;
         }
     }, []);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         return () => {
             if (intervalRef.current) {
                 clearInterval(intervalRef.current);
@@ -37,4 +34,3 @@ const useInterval = (callback, interval, maxExecutions) => {
     }, []);
     return { startInterval, cancelInterval };
 };
-exports.useInterval = useInterval;

package/dist/es/lib/useIsDocumentHidden.js

@@ -1,14 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useIsDocumentHidden = void 0;
-const react_1 = require("react");
-const useIsDocumentHidden = () => {
-    const [isDocumentHidden, setIsDocumentHidden] = (0, react_1.useState)(document.hidden);
-    (0, react_1.useEffect)(() => {
+import { useEffect, useState } from "react";
+export const useIsDocumentHidden = () => {
+    const [isDocumentHidden, setIsDocumentHidden] = useState(document.hidden);
+    useEffect(() => {
         const handleVisibilityChange = () => setIsDocumentHidden(document.hidden);
         document.addEventListener("visibilitychange", handleVisibilityChange);
         return () => document.removeEventListener("visibilitychange", handleVisibilityChange);
     }, []);
     return isDocumentHidden;
 };
-exports.useIsDocumentHidden = useIsDocumentHidden;

package/dist/es/lib/useMediaQuery.js

@@ -1,18 +1,15 @@
 "use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMediaQuery = void 0;
-const react_1 = require("react");
+import { useEffect, useRef, useState } from "react";
 /**
  * Hook to track media query state
  * @param query - The media query string (e.g., "(min-width: 1024px)")
  * @returns boolean indicating if the media query matches
  */
-const useMediaQuery = (query) => {
+export const useMediaQuery = (query) => {
     // Default to false for SSR to prevent hydration mismatch
-    const [matches, setMatches] = (0, react_1.useState)(false);
-    const currentMatches = (0, react_1.useRef)(matches);
-    (0, react_1.useEffect)(() => {
+    const [matches, setMatches] = useState(false);
+    const currentMatches = useRef(matches);
+    useEffect(() => {
         // Only run on client side
         if (typeof window === "undefined") {
             return;
@@ -39,4 +36,3 @@ const useMediaQuery = (query) => {
     }, [query]);
     return matches;
 };
-exports.useMediaQuery = useMediaQuery;

package/dist/es/lib/useScrollAway.js

@@ -1,10 +1,7 @@
 "use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useScrollAway = void 0;
-const react_1 = require("react");
-const useScrollAway = (elementId, options) => {
-    (0, react_1.useEffect)(() => {
+import { useEffect } from "react";
+export const useScrollAway = (elementId, options) => {
+    useEffect(() => {
         if (typeof document === "undefined") {
             return;
         }
@@ -44,4 +41,3 @@ const useScrollAway = (elementId, options) => {
         return () => targetElement.removeEventListener("scroll", handleScroll);
     }, [elementId, options]);
 };
-exports.useScrollAway = useScrollAway;

package/dist/es/lib/useTimeout.js

@@ -1,12 +1,9 @@
 "use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTimeout = void 0;
-const react_1 = require("react");
-const useTimeout = (callback, duration, maxExecutions) => {
-    const timeoutRef = (0, react_1.useRef)(null);
-    const executions = (0, react_1.useRef)(0);
-    const startTimeout = (0, react_1.useCallback)(() => {
+import { useCallback, useRef } from "react";
+export const useTimeout = (callback, duration, maxExecutions) => {
+    const timeoutRef = useRef(null);
+    const executions = useRef(0);
+    const startTimeout = useCallback(() => {
         if (undefined !== maxExecutions && maxExecutions <= executions.current) {
             return;
         }
@@ -16,7 +13,7 @@ const useTimeout = (callback, duration, maxExecutions) => {
         }, duration);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    const cancelTimeout = (0, react_1.useCallback)(() => {
+    const cancelTimeout = useCallback(() => {
         if (timeoutRef.current) {
             clearTimeout(timeoutRef.current);
             timeoutRef.current = null;
@@ -24,4 +21,3 @@ const useTimeout = (callback, duration, maxExecutions) => {
     }, []);
     return { startTimeout, cancelTimeout };
 };
-exports.useTimeout = useTimeout;

package/dist/es/mock/block.js

@@ -1,10 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.mockBlock = void 0;
-const mockBlock = (overwrite) => ({
+export const mockBlock = (overwrite) => ({
     entryId: "123",
     locale: "de",
     draftMode: false,
     ...overwrite,
 });
-exports.mockBlock = mockBlock;

package/dist/es/rte/generators.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.generateRte = exports.generateRteData = exports.generateRteNewline = exports.generateRteAsset = exports.generateRteEmbed = exports.generateRteParagraph = exports.generateRteHeadline = exports.generateRteLink = exports.generateRteText = void 0;
-const rich_text_types_1 = require("@contentful/rich-text-types");
-const generateRteText = (text, marks = []) => {
+import { BLOCKS, INLINES, } from "@contentful/rich-text-types";
+export const generateRteText = (text, marks = []) => {
     return {
         data: {},
         marks,
@@ -10,36 +7,32 @@ const generateRteText = (text, marks = []) => {
         nodeType: "text",
     };
 };
-exports.generateRteText = generateRteText;
-const generateRteLink = (text, url) => {
+export const generateRteLink = (text, url) => {
     return {
         data: {
             uri: url,
         },
-        content: [(0, exports.generateRteText)(text)],
-        nodeType: rich_text_types_1.INLINES.HYPERLINK,
+        content: [generateRteText(text)],
+        nodeType: INLINES.HYPERLINK,
     };
 };
-exports.generateRteLink = generateRteLink;
-const generateRteHeadline = (text, marks = []) => {
+export const generateRteHeadline = (text, marks = []) => {
     return {
         data: {},
-        content: [(0, exports.generateRteText)(text, marks)],
-        nodeType: rich_text_types_1.BLOCKS.HEADING_3,
+        content: [generateRteText(text, marks)],
+        nodeType: BLOCKS.HEADING_3,
     };
 };
-exports.generateRteHeadline = generateRteHeadline;
-const generateRteParagraph = (children) => {
+export const generateRteParagraph = (children) => {
     return {
         content: children,
         data: {},
-        nodeType: rich_text_types_1.BLOCKS.PARAGRAPH,
+        nodeType: BLOCKS.PARAGRAPH,
     };
 };
-exports.generateRteParagraph = generateRteParagraph;
-const generateRteEmbed = (id) => {
+export const generateRteEmbed = (id) => {
     return {
-        nodeType: rich_text_types_1.BLOCKS.EMBEDDED_ENTRY,
+        nodeType: BLOCKS.EMBEDDED_ENTRY,
         data: {
             target: {
                 sys: {
@@ -52,10 +45,9 @@ const generateRteEmbed = (id) => {
         content: [],
     };
 };
-exports.generateRteEmbed = generateRteEmbed;
-const generateRteAsset = (id) => {
+export const generateRteAsset = (id) => {
     return {
-        nodeType: rich_text_types_1.BLOCKS.EMBEDDED_ASSET,
+        nodeType: BLOCKS.EMBEDDED_ASSET,
         data: {
             target: {
                 sys: {
@@ -68,20 +60,16 @@ const generateRteAsset = (id) => {
         content: [],
     };
 };
-exports.generateRteAsset = generateRteAsset;
-const generateRteNewline = () => (0, exports.generateRteParagraph)([(0, exports.generateRteText)("")]);
-exports.generateRteNewline = generateRteNewline;
-const generateRteData = (children) => {
+export const generateRteNewline = () => generateRteParagraph([generateRteText("")]);
+export const generateRteData = (children) => {
     return {
         content: children,
         data: {},
-        nodeType: rich_text_types_1.BLOCKS.DOCUMENT,
+        nodeType: BLOCKS.DOCUMENT,
     };
 };
-exports.generateRteData = generateRteData;
-const generateRte = (json) => {
+export const generateRte = (json) => {
     return {
         json,
     };
 };
-exports.generateRte = generateRte;

package/dist/es/rte/index.js

@@ -1,10 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Rte = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const rich_text_react_renderer_1 = require("@contentful/rich-text-react-renderer");
-const typeChecks_1 = require("../lib/typeChecks");
-const Rte = ({ data, options, ...props }) => {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { documentToReactComponents } from "@contentful/rich-text-react-renderer";
+import { isString } from "../lib/typeChecks";
+export const Rte = ({ data, options, ...props }) => {
     if (!data) {
         return null;
     }
@@ -12,9 +9,8 @@ const Rte = ({ data, options, ...props }) => {
     if (!json) {
         return null;
     }
-    if ((0, typeChecks_1.isString)(json)) {
-        return (0, jsx_runtime_1.jsx)("div", { ...props, children: json });
+    if (isString(json)) {
+        return _jsx("div", { ...props, children: json });
     }
-    return (0, jsx_runtime_1.jsx)("div", { ...props, children: (0, rich_text_react_renderer_1.documentToReactComponents)(json, options) });
+    return _jsx("div", { ...props, children: documentToReactComponents(json, options) });
 };
-exports.Rte = Rte;

package/dist/es/structuredData/index.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StructuredData = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const StructuredData = ({ data }) => {
+import { jsx as _jsx } from "react/jsx-runtime";
+export const StructuredData = ({ data }) => {
     if (!data) {
         return null;
     }
@@ -10,6 +7,5 @@ const StructuredData = ({ data }) => {
         "@context": "https://schema.org",
         ...data,
     };
-    return ((0, jsx_runtime_1.jsx)("script", { type: "application/ld+json", dangerouslySetInnerHTML: { __html: JSON.stringify(structuredData) } }));
+    return (_jsx("script", { type: "application/ld+json", dangerouslySetInnerHTML: { __html: JSON.stringify(structuredData) } }));
 };
-exports.StructuredData = StructuredData;

package/dist/es/tracking/cookiebot/index.js

@@ -1,14 +1,8 @@
 "use client";
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.withCookiebot = exports.useCookiebot = exports.CookiebotProvider = exports.CookiebotProviderContext = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const script_1 = __importDefault(require("next/script"));
-exports.CookiebotProviderContext = (0, react_1.createContext)({});
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useState } from "react";
+import Script from "next/script";
+export const CookiebotProviderContext = createContext({});
 const closeWidget = () => {
     if (typeof window !== "undefined") {
         window?.Cookiebot?.hide();
@@ -19,13 +13,13 @@ const openWidget = () => {
         window?.Cookiebot?.show();
     }
 };
-const CookiebotProvider = ({ locale, cookieBotId, children, }) => {
-    const [consentUpdate, setConsentUpdate] = (0, react_1.useState)(0);
-    const [isAccepted, setIsAccepted] = (0, react_1.useState)(false);
-    const [isConsentAnswered, setIsConsentAnswered] = (0, react_1.useState)(false);
-    const [isLoaded, setIsLoaded] = (0, react_1.useState)(false);
-    const [isOpened, setIsOpened] = (0, react_1.useState)(false);
-    const [consent, setConsent] = (0, react_1.useState)({
+export const CookiebotProvider = ({ locale, cookieBotId, children, }) => {
+    const [consentUpdate, setConsentUpdate] = useState(0);
+    const [isAccepted, setIsAccepted] = useState(false);
+    const [isConsentAnswered, setIsConsentAnswered] = useState(false);
+    const [isLoaded, setIsLoaded] = useState(false);
+    const [isOpened, setIsOpened] = useState(false);
+    const [consent, setConsent] = useState({
         necessary: false,
         preferences: false,
         statistics: false,
@@ -33,7 +27,7 @@ const CookiebotProvider = ({ locale, cookieBotId, children, }) => {
         method: null,
     });
     const checkConsent = (key) => isAccepted && isLoaded && !!consent[key];
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         const openedInitHandler = () => { };
         const tagsExecutedHandler = () => { };
         const openedHandler = () => {
@@ -74,7 +68,7 @@ const CookiebotProvider = ({ locale, cookieBotId, children, }) => {
             window.removeEventListener("CookiebotOnTagsExecuted", tagsExecutedHandler);
         };
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(exports.CookiebotProviderContext.Provider, { value: {
+    return (_jsxs(CookiebotProviderContext.Provider, { value: {
             openWidget,
             closeWidget,
             isLoaded,
@@ -84,12 +78,9 @@ const CookiebotProvider = ({ locale, cookieBotId, children, }) => {
             checkConsent,
             consent,
             consentUpdate,
-        }, children: [(0, jsx_runtime_1.jsx)(script_1.default, { id: "Cookiebot", "data-culture": locale.toUpperCase(), src: `https://consent.cookiebot.com/uc.js?cbid=${cookieBotId}` }), children] }));
+        }, children: [_jsx(Script, { id: "Cookiebot", "data-culture": locale.toUpperCase(), src: `https://consent.cookiebot.com/uc.js?cbid=${cookieBotId}` }), children] }));
 };
-exports.CookiebotProvider = CookiebotProvider;
-const useCookiebot = () => (0, react_1.useContext)(exports.CookiebotProviderContext);
-exports.useCookiebot = useCookiebot;
-const withCookiebot = (Component) => {
-    return (props) => ((0, jsx_runtime_1.jsx)(exports.CookiebotProvider, { ...props, children: (0, jsx_runtime_1.jsx)(Component, { ...props }) }));
+export const useCookiebot = () => useContext(CookiebotProviderContext);
+export const withCookiebot = (Component) => {
+    return (props) => (_jsx(CookiebotProvider, { ...props, children: _jsx(Component, { ...props }) }));
 };
-exports.withCookiebot = withCookiebot;

package/dist/es/tracking/cookiebot/types.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/dist/es/tracking/gtm/index.js

@@ -1,17 +1,11 @@
 "use client";
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDataEventForwarder = exports.useLazyDataLayer = exports.useDataLayer = exports.withGtm = exports.useGtm = exports.GtmProvider = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const script_1 = __importDefault(require("next/script"));
-const Context = (0, react_1.createContext)({});
-const GtmProvider = ({ hasConsent, onBeforeGtmSetup, onAfterGtmSetup, gtmDomain, gtmId, children, }) => {
-    (0, exports.useDataEventForwarder)(hasConsent);
-    (0, react_1.useEffect)(() => {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useLayoutEffect, } from "react";
+import Script from "next/script";
+const Context = createContext({});
+export const GtmProvider = ({ hasConsent, onBeforeGtmSetup, onAfterGtmSetup, gtmDomain, gtmId, children, }) => {
+    useDataEventForwarder(hasConsent);
+    useEffect(() => {
         if (onBeforeGtmSetup) {
             onBeforeGtmSetup();
         }
@@ -22,7 +16,7 @@ const GtmProvider = ({ hasConsent, onBeforeGtmSetup, onAfterGtmSetup, gtmDomain,
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(Context.Provider, { value: { hasConsent }, children: [hasConsent && ((0, jsx_runtime_1.jsx)(script_1.default, { id: "google-tag-manager", "data-cookieconsent": "marketing", children: `
+    return (_jsxs(Context.Provider, { value: { hasConsent }, children: [hasConsent && (_jsx(Script, { id: "google-tag-manager", "data-cookieconsent": "marketing", children: `
                       (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
                       new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
                       j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
@@ -30,16 +24,13 @@ const GtmProvider = ({ hasConsent, onBeforeGtmSetup, onAfterGtmSetup, gtmDomain,
                       })(window,document,'script','dataLayer','${gtmId}');
                     ` })), children] }));
 };
-exports.GtmProvider = GtmProvider;
-const useGtm = () => (0, react_1.useContext)(Context);
-exports.useGtm = useGtm;
-const withGtm = (Component) => {
-    return (props) => ((0, jsx_runtime_1.jsx)(exports.GtmProvider, { ...props, children: (0, jsx_runtime_1.jsx)(Component, { ...props }) }));
+export const useGtm = () => useContext(Context);
+export const withGtm = (Component) => {
+    return (props) => (_jsx(GtmProvider, { ...props, children: _jsx(Component, { ...props }) }));
 };
-exports.withGtm = withGtm;
-const useDataLayer = (input, deps = []) => {
-    const hasConsent = (0, exports.useGtm)();
-    (0, react_1.useEffect)(() => {
+export const useDataLayer = (input, deps = []) => {
+    const hasConsent = useGtm();
+    useEffect(() => {
         if (!hasConsent) {
             return;
         }
@@ -56,9 +47,8 @@ const useDataLayer = (input, deps = []) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [hasConsent, input, ...deps]);
 };
-exports.useDataLayer = useDataLayer;
-const useLazyDataLayer = () => {
-    const { hasConsent } = (0, exports.useGtm)();
+export const useLazyDataLayer = () => {
+    const { hasConsent } = useGtm();
     return (input) => {
         if (!hasConsent || !input) {
             return;
@@ -72,9 +62,8 @@ const useLazyDataLayer = () => {
         }
     };
 };
-exports.useLazyDataLayer = useLazyDataLayer;
-const useDataEventForwarder = (hasConsent) => {
-    (0, react_1.useLayoutEffect)(() => {
+export const useDataEventForwarder = (hasConsent) => {
+    useLayoutEffect(() => {
         const captureDataEvent = (event) => {
             if (!hasConsent) {
                 return;
@@ -111,4 +100,3 @@ const useDataEventForwarder = (hasConsent) => {
         };
     }, [hasConsent]);
 };
-exports.useDataEventForwarder = useDataEventForwarder;

package/dist/es/tracking/gtm/types.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/dist/es/tracking/index.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TRACKING = void 0;
-exports.TRACKING = {
+export const TRACKING = {
     LOGO: "ga-logo",
     FOOTER: "ga-footer",
     HEADER: "ga-header",

package/dist/es/types/block.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/dist/es/types/prettify.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/dist/es/types/preview.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/dist/es/types/structuredData.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/dist/es/types/style.d.ts

@@ -4,4 +4,9 @@ export interface StyledProps {
 export type PropsWithClassName<P = object> = P & {
     className?: string;
 };
+export type PropsWithClassNames<K extends string, P = object> = P & {
+    classNames?: {
+        [Key in K]?: string;
+    };
+};
 //# sourceMappingURL=style.d.ts.map

package/dist/es/types/style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../types/style.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,MAAM,kBAAkB,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC"}
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../types/style.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,MAAM,kBAAkB,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAExE,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,GAAG,MAAM,IAAI,CAAC,GAAG;IAChE,UAAU,CAAC,EAAE;SACR,GAAG,IAAI,CAAC,CAAC,CAAC,EAAE,MAAM;KACtB,CAAC;CACL,CAAC"}

package/dist/es/types/style.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@becklyn/next",
-    "version": "4.3.0",
+    "version": "4.4.0",
     "license": "MIT",
     "homepage": "https://github.com/Becklyn-Studios/ts-libs/tree/main/packages/next",
     "repository": {

package/scss/story/story.scss

@@ -0,0 +1,34 @@
+.story-container {
+    position: relative;
+    margin: 0 auto;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    padding: 2rem;
+    width: 400px;
+    border-radius: 30px;
+
+    &.large {
+        width: 800px;
+    }
+
+    &.flex {
+        display: flex;
+        gap: 4px;
+    }
+
+    &.flex-column {
+        flex-direction: column;
+    }
+
+    &.full-height {
+        height: 100vh;
+        overflow-y: auto;
+    }
+
+    &.full-width {
+        width: 100%;
+    }
+
+    &.no-padding {
+        padding: 0;
+    }
+}