@yakad/ui 1.3.160 → 1.3.161

package/dist/ActiveOnVisible/ActiveOnVisible.d.ts

@@ -2,5 +2,6 @@
 import { StackProps } from "..";
 export interface ActiveOnVisibleProps extends StackProps {
     onVisibilityChange?: (visible: boolean) => void;
+    ref?: React.Ref<HTMLDivElement>;
 }
-export declare const ActiveOnVisible: import("react").ForwardRefExoticComponent<ActiveOnVisibleProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function ActiveOnVisible({ onVisibilityChange, style, children, ref, ...restProps }: ActiveOnVisibleProps): import("react/jsx-runtime").JSX.Element;

package/dist/ActiveOnVisible/ActiveOnVisible.js

@@ -11,15 +11,15 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useImperativeHandle, useRef, useState } from "react";
+import { useImperativeHandle, useRef, useState } from "react";
 import { Stack, useOnVisibilityChange } from "..";
-export const ActiveOnVisible = forwardRef(function ActiveOnVisible(_a, forwardedRef) {
-    var { onVisibilityChange, style, children } = _a, restProps = __rest(_a, ["onVisibilityChange", "style", "children"]);
+export function ActiveOnVisible(_a) {
+    var { onVisibilityChange, style, children, ref } = _a, restProps = __rest(_a, ["onVisibilityChange", "style", "children", "ref"]);
     const localRef = useRef(null);
     const [boxHeight, setBoxHeight] = useState(0);
     // const isVisible = boxHeight === 0;
     // Let the parent access our DOM node
-    useImperativeHandle(forwardedRef, () => localRef.current);
+    useImperativeHandle(ref, () => localRef.current);
     useOnVisibilityChange((visible) => {
         var _a;
         onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(visible);
@@ -32,4 +32,4 @@ export const ActiveOnVisible = forwardRef(function ActiveOnVisible(_a, forwarded
         }
     }, localRef);
     return (_jsx(Stack, Object.assign({ ref: localRef }, restProps, { style: Object.assign({ height: boxHeight || "auto" }, style), children: children })));
-});
+}

package/dist/AppBar/AppBar.d.ts

@@ -6,5 +6,6 @@ export interface AppBarProps extends React.HTMLAttributes<HTMLDivElement> {
     size?: "xs" | "sm" | "md" | "lg" | "xl";
     blur?: boolean;
     children?: React.ReactNode;
+    ref?: React.Ref<HTMLDivElement>;
 }
-export declare const AppBar: import("react").ForwardRefExoticComponent<AppBarProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function AppBar({ align, overflow, position, size, blur, className, children, ref, ...restProps }: AppBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/AppBar/AppBar.js

@@ -11,12 +11,12 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import classNames from "classnames";
 import boxingStyles from "../boxing.module.css";
 import styles from "./AppBar.module.css";
-export const AppBar = forwardRef(function AppBar(_a, ref) {
-    var { align, overflow = "shrink", position = "initial", size, blur, className, children } = _a, restProps = __rest(_a, ["align", "overflow", "position", "size", "blur", "className", "children"]);
+export function AppBar(_a) {
+    var { align, overflow = "shrink", position = "initial", size, blur, className, children, ref } = _a, restProps = __rest(_a, ["align", "overflow", "position", "size", "blur", "className", "children", "ref"]);
     const [show, setShow] = useState(true);
     const [lastScrollY, setLastScrollY] = useState(0);
     useEffect(() => {
@@ -41,4 +41,4 @@ export const AppBar = forwardRef(function AppBar(_a, ref) {
         [styles.sticky]: position === "sticky" || position === "scroll",
     }, { [styles.hidden]: position === "scroll" && !show }, { [styles[size]]: size }, { [styles.blur]: blur }, className);
     return (_jsx("header", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
-});
+}

package/dist/Avatar/Avatar.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
     src?: string;
+    ref?: React.Ref<HTMLDivElement>;
 }
-export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;
-export default Avatar;
+export declare function Avatar({ src, className, ref, ...restProps }: AvatarProps): import("react/jsx-runtime").JSX.Element;

package/dist/Avatar/Avatar.js

@@ -10,13 +10,11 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import classNames from "classnames";
 import styles from "./Avatar.module.css";
 import { Symbol } from "@yakad/symbols";
-export const Avatar = forwardRef(function Avatar(_a, ref) {
-    var { src, className } = _a, restProps = __rest(_a, ["src", "className"]);
+export function Avatar(_a) {
+    var { src, className, ref } = _a, restProps = __rest(_a, ["src", "className", "ref"]);
     const joinedClassNames = classNames(styles.profileContainer, className);
     return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, style: src ? { backgroundImage: `url(${src})` } : {}, children: _jsx("div", { className: styles.editOverlay, children: _jsx(Symbol, { icon: "edit" }) }) })));
-});
-export default Avatar;
+}

package/dist/Button/Button.d.ts

@@ -9,5 +9,6 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     loadingPosition?: "auto" | "center";
     loadingVariant?: "scaleOut" | "dots" | "spinner";
     children?: React.ReactNode;
+    ref?: React.Ref<HTMLButtonElement>;
 }
-export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare function Button({ fullWidthOnParentDemand, size, variant, borderStyle, icon, iconPosition, loadingPosition, loadingVariant, className, children, ref, ...restProps }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/Button/Button.js

@@ -10,17 +10,16 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import classNames from "classnames";
 import { LoadingIcon } from "..";
 import boxingStyles from "../boxing.module.css";
 import styles from "./Button.module.css";
-export const Button = forwardRef(function Button(_a, ref) {
-    var { fullWidthOnParentDemand = false, size = "medium", variant = "text", borderStyle = "rounded", icon, iconPosition = "start", loadingPosition = "auto", loadingVariant, className, children } = _a, restProps = __rest(_a, ["fullWidthOnParentDemand", "size", "variant", "borderStyle", "icon", "iconPosition", "loadingPosition", "loadingVariant", "className", "children"]);
+export function Button(_a) {
+    var { fullWidthOnParentDemand = false, size = "medium", variant = "text", borderStyle = "rounded", icon, iconPosition = "start", loadingPosition = "auto", loadingVariant, className, children, ref } = _a, restProps = __rest(_a, ["fullWidthOnParentDemand", "size", "variant", "borderStyle", "icon", "iconPosition", "loadingPosition", "loadingVariant", "className", "children", "ref"]);
     const childrenFirst = iconPosition === "end";
     const isloadingPositionCenter = !icon || loadingPosition === "center";
     const joinedClassNames = classNames({ [boxingStyles.fullWidthOnParentDemand]: fullWidthOnParentDemand }, styles.button, styles[variant], { [styles.loading]: loadingVariant }, { [styles.loadingPositionCenter]: isloadingPositionCenter }, styles[size], styles[borderStyle], { [styles.iconButton]: !children && icon }, className);
     return (_jsxs("button", Object.assign({ ref: ref, className: joinedClassNames }, restProps, { children: [childrenFirst && children, loadingVariant && (_jsx("div", { className: classNames(styles.displayOnDisabled, {
                     [styles.positionCenter]: isloadingPositionCenter,
                 }), children: _jsx(LoadingIcon, { size: size, variant: loadingVariant }) })), icon, !childrenFirst && children] })));
-});
+}

package/dist/Card/Card.d.ts

@@ -4,5 +4,6 @@ export interface CardProps extends StackProps {
     blur?: boolean;
     level?: "transparent" | "low" | "mid" | "high";
     hoverEffect?: boolean;
+    ref?: React.Ref<HTMLDivElement>;
 }
-export declare const Card: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Card({ blur, level, hoverEffect, className, children, ref, ...restProps }: CardProps): import("react/jsx-runtime").JSX.Element;

package/dist/Card/Card.js

@@ -10,12 +10,11 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import classNames from "classnames";
 import { Stack } from "..";
 import styles from "./Card.module.css";
-export const Card = forwardRef(function Card(_a, ref) {
-    var { blur, level, hoverEffect, className, children } = _a, restProps = __rest(_a, ["blur", "level", "hoverEffect", "className", "children"]);
+export function Card(_a) {
+    var { blur, level, hoverEffect, className, children, ref } = _a, restProps = __rest(_a, ["blur", "level", "hoverEffect", "className", "children", "ref"]);
     const joinedClassNames = classNames(styles.card, { [styles.blur]: blur }, { [styles.elevated]: level !== "transparent" }, { [styles.hoverEffect]: hoverEffect }, { [styles.yakadCardAutoLevel]: !level || level === "transparent" }, { [styles.yakadCardLowLevel]: level === "low" }, { [styles.yakadCardMidLevel]: level === "mid" }, { [styles.yakadCardHighLevel]: level === "high" }, className);
     return (_jsx(Stack, Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
-});
+}

package/dist/CheckBox/CheckBox.d.ts

@@ -2,6 +2,7 @@
 type ExcludedTypes = "type";
 export interface CheckBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedTypes> {
     label?: string;
+    ref?: React.Ref<HTMLInputElement>;
 }
-export declare const CheckBox: import("react").ForwardRefExoticComponent<CheckBoxProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare function CheckBox({ label, className, style, ref, ...restProps }: CheckBoxProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/CheckBox/CheckBox.js

@@ -10,13 +10,12 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import classNames from "classnames";
 import { Symbol } from "@yakad/symbols";
 import boxingStyles from "../boxing.module.css";
 import styles from "./CheckBox.module.css";
-export const CheckBox = forwardRef(function CheckBox(_a, ref) {
-    var { label, className, style } = _a, restProps = __rest(_a, ["label", "className", "style"]);
+export function CheckBox(_a) {
+    var { label, className, style, ref } = _a, restProps = __rest(_a, ["label", "className", "style", "ref"]);
     const joinedClassNames = classNames({ [boxingStyles.fullWidthOnParentDemand]: label }, styles.label, { [styles.labeled]: label }, { [styles.disabled]: restProps.disabled }, className);
     return (_jsxs("label", { className: joinedClassNames, style: style, children: [label, _jsx("input", Object.assign({ ref: ref }, restProps, { className: styles.input, type: "checkbox" })), _jsxs("div", { className: styles.symbolContainer, children: [_jsx(Symbol, { className: styles.symbolChecked, icon: "check_box" }), _jsx(Symbol, { className: styles.symbolUnChecked, icon: "check_box_outline_blank" })] })] }));
-});
+}

package/dist/CodeBox/CodeBox.d.ts

@@ -1,6 +1,8 @@
-/// <reference types="react" />
+import React from "react";
 export interface CodeBoxProps extends React.HTMLAttributes<HTMLDivElement> {
     copyButton?: boolean;
     children?: React.ReactNode;
 }
-export declare const CodeBox: import("react").ForwardRefExoticComponent<CodeBoxProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function CodeBox({ copyButton, className, children, ref, ...restProps }: CodeBoxProps & {
+    ref?: React.Ref<HTMLDivElement>;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/CodeBox/CodeBox.js

@@ -10,14 +10,13 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import classNames from "classnames";
 import { Symbol } from "@yakad/symbols";
 import { Button, Card } from "..";
 import boxingStyles from "../boxing.module.css";
 import styles from "./CodeBox.module.css";
-export const CodeBox = forwardRef(function CodeBox(_a, ref) {
-    var { copyButton, className, children } = _a, restProps = __rest(_a, ["copyButton", "className", "children"]);
+export function CodeBox(_a) {
+    var { copyButton, className, children, ref } = _a, restProps = __rest(_a, ["copyButton", "className", "children", "ref"]);
     const joinedClassNames = classNames({ [boxingStyles.fullWidthOnParentDemand]: true }, styles.ZZZZZZZZZZ, className);
     return (_jsxs(Card, Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: [_jsx("pre", { children: children }), copyButton && _jsx(Button, { icon: _jsx(Symbol, { icon: "copy_all" }) })] })));
-});
+}

package/dist/CodeField/CodeField.d.ts

@@ -4,6 +4,7 @@ export interface CodeFieldsProps extends Omit<React.InputHTMLAttributes<HTMLInpu
     length?: number;
     onFilled?: () => void;
     children?: React.ReactNode;
+    ref?: React.Ref<HTMLInputElement>;
 }
-export declare const CodeField: import("react").ForwardRefExoticComponent<CodeFieldsProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare function CodeField({ length, onFilled, autoComplete, pattern, onInput, className, style, ref, ...restProps }: CodeFieldsProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/CodeField/CodeField.js

@@ -11,7 +11,6 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import classNames from "classnames";
 import boxingStyles from "../boxing.module.css";
 import styles from "./CodeField.module.css";
@@ -31,12 +30,14 @@ function sliceOverLength(inputElement, inputLength) {
 function removeUnNumberChars(inputElement) {
     inputElement.value = inputElement.value.replace(/[^0-9]+/, "");
 }
-export const CodeField = forwardRef(function CodeField(_a, ref) {
-    var { length = 6, onFilled, autoComplete, pattern, onInput, className, style } = _a, restProps = __rest(_a, ["length", "onFilled", "autoComplete", "pattern", "onInput", "className", "style"]);
+export function CodeField(_a) {
+    var { length = 6, onFilled, autoComplete, pattern, onInput, className, style, ref } = _a, restProps = __rest(_a, ["length", "onFilled", "autoComplete", "pattern", "onInput", "className", "style", "ref"]);
     const joinedClassNames = classNames({ [boxingStyles.fullWidthOnParentDemand]: true }, styles.input, className);
     const joinedStyles = Object.assign(Object.assign({}, style), { width: `calc(1.5ch * ${length})` });
     return (_jsx("input", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, style: joinedStyles, type: "number", minLength: length, maxLength: length, autoComplete: autoComplete || "off", pattern: pattern || "[0-9]", onInput: (event) => {
-            isInputFilled(event, length) && onFilled;
-            onInput;
+            if (isInputFilled(event, length)) {
+                onFilled === null || onFilled === void 0 ? void 0 : onFilled();
+            }
+            onInput === null || onInput === void 0 ? void 0 : onInput(event);
         } })));
-});
+}

package/dist/Container/Container.d.ts

@@ -3,5 +3,6 @@ export interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
     align?: "start" | "space" | "center" | "end";
     size?: "xs" | "sm" | "md" | "lg" | "xl";
     children?: React.ReactNode;
+    ref?: React.Ref<HTMLDivElement>;
 }
-export declare const Container: import("react").ForwardRefExoticComponent<ContainerProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Container({ size, align, className, children, ref, ...restProps }: ContainerProps): import("react/jsx-runtime").JSX.Element;

package/dist/Container/Container.js

@@ -10,12 +10,11 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import classNames from "classnames";
 import boxingStyles from "../boxing.module.css";
 import styles from "./Container.module.css";
-export const Container = forwardRef(function Container(_a, ref) {
-    var { size = "xl", align, className, children } = _a, restProps = __rest(_a, ["size", "align", "className", "children"]);
+export function Container(_a) {
+    var { size = "xl", align, className, children, ref } = _a, restProps = __rest(_a, ["size", "align", "className", "children", "ref"]);
     const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { [boxingStyles.demandChildsToBeFullWidth]: true }, styles.container, styles[size], className);
     return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
-});
+}

package/dist/Display/Display.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 export interface DisplayProps extends React.HTMLAttributes<HTMLDivElement> {
     align?: "start" | "space" | "center" | "end";
     fullWidthOnParentDemand?: boolean;
@@ -6,4 +6,6 @@ export interface DisplayProps extends React.HTMLAttributes<HTMLDivElement> {
     maxWidth?: "xs" | "sm" | "md" | "lg" | "xl";
     children?: React.ReactNode;
 }
-export declare const Display: import("react").ForwardRefExoticComponent<DisplayProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Display({ align, fullWidthOnParentDemand, minWidth, maxWidth, className, children, ref, ...restProps }: DisplayProps & {
+    ref?: React.Ref<HTMLDivElement>;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/Display/Display.js

@@ -10,12 +10,11 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import classNames from "classnames";
 import boxingStyles from "../boxing.module.css";
 import styles from "./Display.module.css";
-export const Display = forwardRef(function Display(_a, ref) {
-    var { align, fullWidthOnParentDemand = true, minWidth, maxWidth, className, children } = _a, restProps = __rest(_a, ["align", "fullWidthOnParentDemand", "minWidth", "maxWidth", "className", "children"]);
+export function Display(_a) {
+    var { align, fullWidthOnParentDemand = true, minWidth, maxWidth, className, children, ref } = _a, restProps = __rest(_a, ["align", "fullWidthOnParentDemand", "minWidth", "maxWidth", "className", "children", "ref"]);
     const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { [boxingStyles.demandChildsToBeFullWidth]: true }, { [boxingStyles.fullWidthOnParentDemand]: fullWidthOnParentDemand }, { [styles[`${minWidth}MinWidth`]]: minWidth }, { [styles[`${maxWidth}MaxWidth`]]: maxWidth }, className);
     return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
-});
+}

package/dist/Dropdown/Dropdown.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="react" />
 import { CardProps, OverlayProps } from "..";
 export interface DropdownProps extends CardProps, OverlayProps {
+    ref?: React.Ref<HTMLDivElement>;
 }
-export declare const Dropdown: import("react").ForwardRefExoticComponent<DropdownProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Dropdown({ fullWidthOnParentDemand, // Def in Card is True
+blur, level, triggerref, onClose, className, style, children, ref, ...restProps }: DropdownProps): import("react/jsx-runtime").JSX.Element;

package/dist/Dropdown/Dropdown.js

@@ -11,18 +11,18 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState, useEffect, forwardRef, useImperativeHandle, } from "react";
+import { useRef, useState, useEffect, useImperativeHandle, } from "react";
 import classNames from "classnames";
 import { Card, useOnOutsideClick } from "..";
 import styles from "./Dropdown.module.css";
-export const Dropdown = forwardRef(function Dropdown(_a, forwardedRef) {
+export function Dropdown(_a) {
     var { fullWidthOnParentDemand = false, // Def in Card is True
-    blur, level = "high", triggerref, onClose, className, style, children } = _a, restProps = __rest(_a, ["fullWidthOnParentDemand", "blur", "level", "triggerref", "onClose", "className", "style", "children"]);
+    blur, level = "high", triggerref, onClose, className, style, children, ref } = _a, restProps = __rest(_a, ["fullWidthOnParentDemand", "blur", "level", "triggerref", "onClose", "className", "style", "children", "ref"]);
     const fallbackTriggerRef = useRef(null);
     const dropdownRef = useRef(null);
     const placementTargetRef = triggerref || fallbackTriggerRef;
     // Let the parent access our DOM node
-    useImperativeHandle(forwardedRef, () => dropdownRef.current);
+    useImperativeHandle(ref, () => dropdownRef.current);
     const [arrowPosition, setArrowPosition] = useState({
         top: 0,
         left: 0,
@@ -82,4 +82,4 @@ export const Dropdown = forwardRef(function Dropdown(_a, forwardedRef) {
                     left: arrowPosition.left,
                     visibility: isPlaced ? "visible" : "hidden",
                 } })] }));
-});
+}

package/dist/Footer/Footer.d.ts

@@ -7,4 +7,6 @@ export interface FooterProps extends React.HTMLAttributes<HTMLDivElement> {
     blur?: boolean;
     children?: React.ReactNode;
 }
-export declare const Footer: import("react").ForwardRefExoticComponent<FooterProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Footer({ align, overflow, position, size, blur, className, children, ref, ...restProps }: FooterProps & {
+    ref?: React.Ref<HTMLDivElement>;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/Footer/Footer.js

@@ -11,12 +11,12 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import classNames from "classnames";
 import boxingStyles from "../boxing.module.css";
 import styles from "./Footer.module.css";
-export const Footer = forwardRef(function Footer(_a, ref) {
-    var { align, overflow = "shrink", position = "initial", size, blur, className, children } = _a, restProps = __rest(_a, ["align", "overflow", "position", "size", "blur", "className", "children"]);
+export function Footer(_a) {
+    var { align, overflow = "shrink", position = "initial", size, blur, className, children, ref } = _a, restProps = __rest(_a, ["align", "overflow", "position", "size", "blur", "className", "children", "ref"]);
     const [show, setShow] = useState(true);
     const [lastScrollY, setLastScrollY] = useState(0);
     useEffect(() => {
@@ -39,4 +39,4 @@ export const Footer = forwardRef(function Footer(_a, ref) {
     }, [lastScrollY, position]);
     const joinedClassNames = classNames(boxingStyles.flexRowBox, { [boxingStyles[align]]: align }, boxingStyles[overflow], styles.footer, { [styles.sticky]: position === "sticky" || position === "scroll" }, { [styles.hidden]: position === "scroll" && !show }, { [styles[size]]: size }, { [styles.blur]: blur }, className);
     return (_jsx("footer", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
-});
+}

package/dist/Form/Form.d.ts

@@ -4,4 +4,6 @@ export interface FormProps extends React.HTMLAttributes<HTMLFormElement> {
     fullWidthOnParentDemand?: boolean;
     children?: React.ReactNode;
 }
-export declare const Form: import("react").ForwardRefExoticComponent<FormProps & import("react").RefAttributes<HTMLFormElement>>;
+export declare function Form({ align, fullWidthOnParentDemand, className, children, ref, ...restProps }: FormProps & {
+    ref?: React.Ref<HTMLFormElement>;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/Form/Form.js

@@ -10,12 +10,11 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import classNames from "classnames";
 import styles from "./Form.module.css";
 import boxingStyles from "../boxing.module.css";
-export const Form = forwardRef(function Form(_a, ref) {
-    var { align, fullWidthOnParentDemand = true, className, children } = _a, restProps = __rest(_a, ["align", "fullWidthOnParentDemand", "className", "children"]);
+export function Form(_a) {
+    var { align, fullWidthOnParentDemand = true, className, children, ref } = _a, restProps = __rest(_a, ["align", "fullWidthOnParentDemand", "className", "children", "ref"]);
     const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { [boxingStyles.demandChildsToBeFullWidth]: true }, { [boxingStyles.fullWidthOnParentDemand]: fullWidthOnParentDemand }, styles.form, className);
     return (_jsx("form", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
-});
+}

package/dist/GridContainer/GridContainer.d.ts

@@ -4,4 +4,6 @@ export interface GridContainerProps extends React.HTMLAttributes<HTMLDivElement>
     columns?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
     children?: React.ReactNode;
 }
-export declare const GridContainer: import("react").ForwardRefExoticComponent<GridContainerProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function GridContainer({ gap, columns, className, style, children, ref, ...restProps }: GridContainerProps & {
+    ref?: React.Ref<HTMLDivElement>;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/GridContainer/GridContainer.js

@@ -10,12 +10,11 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import classNames from "classnames";
 import styles from "./GridContainer.module.css";
-export const GridContainer = forwardRef(function GridContainer(_a, ref) {
-    var { gap = 1.5, columns = 12, className, style, children } = _a, restProps = __rest(_a, ["gap", "columns", "className", "style", "children"]);
+export function GridContainer(_a) {
+    var { gap = 1.5, columns = 12, className, style, children, ref } = _a, restProps = __rest(_a, ["gap", "columns", "className", "style", "children", "ref"]);
     const joinedClassNames = classNames(styles.gridcontainer, styles[`gridColumns${columns}`], className);
     const joinedStyles = Object.assign(Object.assign({}, style), { columnGap: (style === null || style === void 0 ? void 0 : style.columnGap) || `${gap}rem`, rowGap: (style === null || style === void 0 ? void 0 : style.rowGap) || `${gap}rem` });
     return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, style: joinedStyles, children: children })));
-});
+}

package/dist/GridItem/GridItem.d.ts

@@ -9,5 +9,7 @@ export interface GridItemProps extends React.HTMLAttributes<HTMLDivElement> {
     xl?: GridColumn;
     children?: React.ReactNode;
 }
-export declare const GridItem: import("react").ForwardRefExoticComponent<GridItemProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function GridItem({ align, xs, sm, md, lg, xl, className, children, ref, ...restProps }: GridItemProps & {
+    ref?: React.Ref<HTMLDivElement>;
+}): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/GridItem/GridItem.js

@@ -10,12 +10,11 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import classNames from "classnames";
 import boxingStyles from "../boxing.module.css";
 import styles from "./GridItem.module.css";
-export const GridItem = forwardRef(function GridItem(_a, ref) {
-    var { align, xs, sm, md, lg, xl, className, children } = _a, restProps = __rest(_a, ["align", "xs", "sm", "md", "lg", "xl", "className", "children"]);
+export function GridItem(_a) {
+    var { align, xs, sm, md, lg, xl, className, children, ref } = _a, restProps = __rest(_a, ["align", "xs", "sm", "md", "lg", "xl", "className", "children", "ref"]);
     const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { [boxingStyles.demandChildsToBeFullWidth]: true }, styles.gridItem, { [styles[`xs${xs}`]]: xs }, { [styles[`sm${sm}`]]: sm }, { [styles[`md${md}`]]: md }, { [styles[`lg${lg}`]]: lg }, { [styles[`xl${xl}`]]: xl }, className);
     return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
-});
+}

package/dist/Hr/Hr.d.ts

@@ -4,4 +4,6 @@ export interface HrProps extends React.HTMLAttributes<HTMLHRElement> {
     height?: number;
     marginx?: number;
 }
-export declare const Hr: import("react").ForwardRefExoticComponent<HrProps & import("react").RefAttributes<HTMLHRElement>>;
+export declare function Hr({ variant, height, marginx, className, style, ref, ...restProps }: HrProps & {
+    ref?: React.Ref<HTMLHRElement>;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/Hr/Hr.js

@@ -10,12 +10,11 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import classNames from "classnames";
 import styles from "./Hr.module.css";
-export const Hr = forwardRef(function Hr(_a, ref) {
-    var { variant, height, marginx, className, style } = _a, restProps = __rest(_a, ["variant", "height", "marginx", "className", "style"]);
+export function Hr(_a) {
+    var { variant, height, marginx, className, style, ref } = _a, restProps = __rest(_a, ["variant", "height", "marginx", "className", "style", "ref"]);
     const joinedClassNames = classNames(styles.hr, variant && styles[variant], className);
     const joinedStyles = Object.assign(Object.assign({}, style), { borderTopWidth: height ? `${height}rem` : style === null || style === void 0 ? void 0 : style.borderTopWidth, marginTop: marginx ? `${marginx}rem` : style === null || style === void 0 ? void 0 : style.marginTop, marginBottom: marginx ? `${marginx}rem` : style === null || style === void 0 ? void 0 : style.marginBottom });
     return (_jsx("hr", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, style: joinedStyles })));
-});
+}

package/dist/InputField/InputField.d.ts

@@ -2,5 +2,6 @@ import React from "react";
 export interface InputFieldProps extends React.InputHTMLAttributes<HTMLInputElement> {
     variant?: "outlined" | "filled";
     boxSize?: "small" | "normal";
+    ref?: React.Ref<HTMLInputElement>;
 }
-export declare const InputField: React.ForwardRefExoticComponent<InputFieldProps & React.RefAttributes<HTMLInputElement>>;
+export declare function InputField({ variant, boxSize, placeholder, className, ref, ...restProps }: InputFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/InputField/InputField.js

@@ -10,12 +10,11 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import classNames from "classnames";
 import boxingStyles from "../boxing.module.css";
 import styles from "./InputField.module.css";
-export const InputField = forwardRef(function InputField(_a, ref) {
-    var { variant = "outlined", boxSize = "normal", placeholder, className } = _a, restProps = __rest(_a, ["variant", "boxSize", "placeholder", "className"]);
+export function InputField(_a) {
+    var { variant = "outlined", boxSize = "normal", placeholder, className, ref } = _a, restProps = __rest(_a, ["variant", "boxSize", "placeholder", "className", "ref"]);
     const joinedClassNames = classNames(styles.input, styles[variant], styles[boxSize], placeholder && styles.havePlaceHolder, className);
     return (_jsxs("div", { className: classNames({ [boxingStyles.fullWidthOnParentDemand]: true }, styles.div), children: [_jsx("input", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, placeholder: " " })), placeholder && (_jsx("label", { className: styles.label, children: placeholder }))] }));
-});
+}

package/dist/List/List.d.ts

@@ -4,4 +4,6 @@ export interface ListProps extends React.HTMLAttributes<HTMLUListElement> {
     collapsed?: boolean;
     children?: React.ReactNode;
 }
-export declare const List: import("react").ForwardRefExoticComponent<ListProps & import("react").RefAttributes<HTMLUListElement>>;
+export declare function List({ direction, collapsed, className, children, ref, ...restProps }: ListProps & {
+    ref?: React.Ref<HTMLUListElement>;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/List/List.js

@@ -10,12 +10,11 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import classNames from "classnames";
 import boxingStyles from "../boxing.module.css";
 import styles from "./List.module.css";
-export const List = forwardRef(function List(_a, ref) {
-    var { direction = "row", collapsed, className, children } = _a, restProps = __rest(_a, ["direction", "collapsed", "className", "children"]);
+export function List(_a) {
+    var { direction = "row", collapsed, className, children, ref } = _a, restProps = __rest(_a, ["direction", "collapsed", "className", "children", "ref"]);
     const joinedClassNames = classNames({ [boxingStyles.fullWidthOnParentDemand]: true }, styles.list, styles[direction], { [styles.collapsed]: collapsed }, className);
     return (_jsx("ul", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
-});
+}

package/dist/ListItem/ListItem.d.ts

@@ -2,4 +2,6 @@
 export interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
     align?: "start" | "space" | "center" | "end";
 }
-export declare const ListItem: import("react").ForwardRefExoticComponent<ListItemProps & import("react").RefAttributes<HTMLLIElement>>;
+export declare function ListItem({ align, className, children, ref, ...restProps }: ListItemProps & {
+    ref?: React.Ref<HTMLLIElement>;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/ListItem/ListItem.js

@@ -10,11 +10,10 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import classNames from "classnames";
 import boxingStyles from "../boxing.module.css";
 import styles from "./ListItem.module.css";
-export const ListItem = forwardRef(function ListItem(_a, ref) {
-    var { align, className, children } = _a, restProps = __rest(_a, ["align", "className", "children"]);
+export function ListItem(_a) {
+    var { align, className, children, ref } = _a, restProps = __rest(_a, ["align", "className", "children", "ref"]);
     return (_jsx("li", Object.assign({ ref: ref }, restProps, { className: classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { [boxingStyles.demandChildsToBeFullWidth]: true }, styles.listItem, className), children: children })));
-});
+}

package/dist/LoadingIcon/LoadingIcon.d.ts

@@ -3,4 +3,6 @@ export interface LoadingIconProps extends React.HTMLAttributes<HTMLDivElement> {
     size?: "extraSmall" | "small" | "medium" | "large" | "extraLarge";
     variant?: "scaleOut" | "dots" | "spinner";
 }
-export declare const LoadingIcon: import("react").ForwardRefExoticComponent<LoadingIconProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function LoadingIcon({ size, variant, className, ref, ...restProps }: LoadingIconProps & {
+    ref?: React.Ref<HTMLDivElement>;
+}): import("react/jsx-runtime").JSX.Element;