@yakad/ui 1.3.162 → 1.3.164

package/dist/AppBar/AppBar.d.ts

@@ -8,4 +8,4 @@ export interface AppBarProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
     ref?: React.Ref<HTMLDivElement>;
 }
-export declare function AppBar({ align, overflow, position, size, blur, className, children, ref, ...restProps }: AppBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppBar({ align, overflow, position, size, blur, className, children, ...restProps }: AppBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/AppBar/AppBar.js

@@ -16,7 +16,7 @@ import classNames from "classnames";
 import boxingStyles from "../boxing.module.css";
 import styles from "./AppBar.module.css";
 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"]);
+    var { align, overflow = "shrink", position = "initial", size, blur, className, children } = _a, restProps = __rest(_a, ["align", "overflow", "position", "size", "blur", "className", "children"]);
     const [show, setShow] = useState(true);
     const [lastScrollY, setLastScrollY] = useState(0);
     useEffect(() => {
@@ -40,5 +40,5 @@ export function AppBar(_a) {
     const joinedClassNames = classNames(boxingStyles.flexRowBox, { [boxingStyles[align]]: align }, boxingStyles[overflow], styles.header, {
         [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 })));
+    return (_jsx("header", Object.assign({}, restProps, { className: joinedClassNames, children: children })));
 }

package/dist/Avatar/Avatar.d.ts

@@ -3,4 +3,4 @@ export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
     src?: string;
     ref?: React.Ref<HTMLDivElement>;
 }
-export declare function Avatar({ src, className, ref, ...restProps }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+export declare function Avatar({ src, className, ...restProps }: AvatarProps): import("react/jsx-runtime").JSX.Element;

package/dist/Avatar/Avatar.js

@@ -14,7 +14,7 @@ import classNames from "classnames";
 import styles from "./Avatar.module.css";
 import { Symbol } from "@yakad/symbols";
 export function Avatar(_a) {
-    var { src, className, ref } = _a, restProps = __rest(_a, ["src", "className", "ref"]);
+    var { src, className } = _a, restProps = __rest(_a, ["src", "className"]);
     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" }) }) })));
+    return (_jsx("div", Object.assign({}, restProps, { className: joinedClassNames, style: src ? { backgroundImage: `url(${src})` } : {}, children: _jsx("div", { className: styles.editOverlay, children: _jsx(Symbol, { icon: "edit" }) }) })));
 }

package/dist/Button/Button.d.ts

@@ -11,4 +11,4 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     children?: React.ReactNode;
     ref?: React.Ref<HTMLButtonElement>;
 }
-export declare function Button({ fullWidthOnParentDemand, size, variant, borderStyle, icon, iconPosition, loadingPosition, loadingVariant, className, children, ref, ...restProps }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function Button({ fullWidthOnParentDemand, size, variant, borderStyle, icon, iconPosition, loadingPosition, loadingVariant, className, children, ...restProps }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/Button/Button.js

@@ -15,11 +15,11 @@ import { LoadingIcon } from "..";
 import boxingStyles from "../boxing.module.css";
 import styles from "./Button.module.css";
 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"]);
+    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"]);
     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, {
+    return (_jsxs("button", Object.assign({ 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

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

package/dist/Card/Card.js

@@ -14,7 +14,7 @@ import classNames from "classnames";
 import { Stack } from "..";
 import styles from "./Card.module.css";
 export function Card(_a) {
-    var { blur, level, hoverEffect, className, children, ref } = _a, restProps = __rest(_a, ["blur", "level", "hoverEffect", "className", "children", "ref"]);
+    var { blur, level, hoverEffect, className, children } = _a, restProps = __rest(_a, ["blur", "level", "hoverEffect", "className", "children"]);
     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 })));
+    return (_jsx(Stack, Object.assign({}, restProps, { className: joinedClassNames, children: children })));
 }

package/dist/CheckBox/CheckBox.d.ts

@@ -4,5 +4,5 @@ export interface CheckBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
     label?: string;
     ref?: React.Ref<HTMLInputElement>;
 }
-export declare function CheckBox({ label, className, style, ref, ...restProps }: CheckBoxProps): import("react/jsx-runtime").JSX.Element;
+export declare function CheckBox({ label, className, style, ...restProps }: CheckBoxProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/CheckBox/CheckBox.js

@@ -15,7 +15,7 @@ import { Symbol } from "@yakad/symbols";
 import boxingStyles from "../boxing.module.css";
 import styles from "./CheckBox.module.css";
 export function CheckBox(_a) {
-    var { label, className, style, ref } = _a, restProps = __rest(_a, ["label", "className", "style", "ref"]);
+    var { label, className, style } = _a, restProps = __rest(_a, ["label", "className", "style"]);
     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" })] })] }));
+    return (_jsxs("label", { className: joinedClassNames, style: style, children: [label, _jsx("input", Object.assign({}, 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

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

package/dist/CodeBox/CodeBox.js

@@ -16,7 +16,7 @@ import { Button, Card } from "..";
 import boxingStyles from "../boxing.module.css";
 import styles from "./CodeBox.module.css";
 export function CodeBox(_a) {
-    var { copyButton, className, children, ref } = _a, restProps = __rest(_a, ["copyButton", "className", "children", "ref"]);
+    var { copyButton, className, children } = _a, restProps = __rest(_a, ["copyButton", "className", "children"]);
     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" }) })] })));
+    return (_jsxs(Card, Object.assign({}, restProps, { className: joinedClassNames, children: [_jsx("pre", { children: children }), copyButton && _jsx(Button, { icon: _jsx(Symbol, { icon: "copy_all" }) })] })));
 }

package/dist/CodeField/CodeField.d.ts

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

package/dist/CodeField/CodeField.js

@@ -31,10 +31,10 @@ function removeUnNumberChars(inputElement) {
     inputElement.value = inputElement.value.replace(/[^0-9]+/, "");
 }
 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"]);
+    var { length = 6, onFilled, autoComplete, pattern, onInput, className, style } = _a, restProps = __rest(_a, ["length", "onFilled", "autoComplete", "pattern", "onInput", "className", "style"]);
     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) => {
+    return (_jsx("input", Object.assign({}, restProps, { className: joinedClassNames, style: joinedStyles, type: "number", minLength: length, maxLength: length, autoComplete: autoComplete || "off", pattern: pattern || "[0-9]", onInput: (event) => {
             if (isInputFilled(event, length)) {
                 onFilled === null || onFilled === void 0 ? void 0 : onFilled();
             }

package/dist/Container/Container.d.ts

@@ -5,4 +5,4 @@ export interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
     ref?: React.Ref<HTMLDivElement>;
 }
-export declare function Container({ size, align, className, children, ref, ...restProps }: ContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare function Container({ size, align, className, children, ...restProps }: ContainerProps): import("react/jsx-runtime").JSX.Element;

package/dist/Container/Container.js

@@ -14,7 +14,7 @@ import classNames from "classnames";
 import boxingStyles from "../boxing.module.css";
 import styles from "./Container.module.css";
 export function Container(_a) {
-    var { size = "xl", align, className, children, ref } = _a, restProps = __rest(_a, ["size", "align", "className", "children", "ref"]);
+    var { size = "xl", align, className, children } = _a, restProps = __rest(_a, ["size", "align", "className", "children"]);
     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 })));
+    return (_jsx("div", Object.assign({}, restProps, { className: joinedClassNames, children: children })));
 }

package/dist/Display/Display.d.ts

@@ -6,6 +6,6 @@ export interface DisplayProps extends React.HTMLAttributes<HTMLDivElement> {
     maxWidth?: "xs" | "sm" | "md" | "lg" | "xl";
     children?: React.ReactNode;
 }
-export declare function Display({ align, fullWidthOnParentDemand, minWidth, maxWidth, className, children, ref, ...restProps }: DisplayProps & {
+export declare function Display({ align, fullWidthOnParentDemand, minWidth, maxWidth, className, children, ...restProps }: DisplayProps & {
     ref?: React.Ref<HTMLDivElement>;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/Display/Display.js

@@ -14,7 +14,7 @@ import classNames from "classnames";
 import boxingStyles from "../boxing.module.css";
 import styles from "./Display.module.css";
 export function Display(_a) {
-    var { align, fullWidthOnParentDemand = true, minWidth, maxWidth, className, children, ref } = _a, restProps = __rest(_a, ["align", "fullWidthOnParentDemand", "minWidth", "maxWidth", "className", "children", "ref"]);
+    var { align, fullWidthOnParentDemand = true, minWidth, maxWidth, className, children } = _a, restProps = __rest(_a, ["align", "fullWidthOnParentDemand", "minWidth", "maxWidth", "className", "children"]);
     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 })));
+    return (_jsx("div", Object.assign({}, restProps, { className: joinedClassNames, children: children })));
 }

package/dist/Dropdown/Dropdown.js

@@ -11,7 +11,7 @@ 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, useImperativeHandle, } from "react";
+import { useRef, useState, useEffect, useImperativeHandle } from "react";
 import classNames from "classnames";
 import { Card, useOnOutsideClick } from "..";
 import styles from "./Dropdown.module.css";

package/dist/Footer/Footer.d.ts

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

package/dist/Footer/Footer.js

@@ -16,7 +16,7 @@ import classNames from "classnames";
 import boxingStyles from "../boxing.module.css";
 import styles from "./Footer.module.css";
 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"]);
+    var { align, overflow = "shrink", position = "initial", size, blur, className, children } = _a, restProps = __rest(_a, ["align", "overflow", "position", "size", "blur", "className", "children"]);
     const [show, setShow] = useState(true);
     const [lastScrollY, setLastScrollY] = useState(0);
     useEffect(() => {
@@ -38,5 +38,5 @@ export function Footer(_a) {
         return () => window.removeEventListener("scroll", handleScroll);
     }, [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 })));
+    return (_jsx("footer", Object.assign({}, restProps, { className: joinedClassNames, children: children })));
 }

package/dist/Form/Form.d.ts

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

package/dist/Form/Form.js

@@ -14,7 +14,7 @@ import classNames from "classnames";
 import styles from "./Form.module.css";
 import boxingStyles from "../boxing.module.css";
 export function Form(_a) {
-    var { align, fullWidthOnParentDemand = true, className, children, ref } = _a, restProps = __rest(_a, ["align", "fullWidthOnParentDemand", "className", "children", "ref"]);
+    var { align, fullWidthOnParentDemand = true, className, children } = _a, restProps = __rest(_a, ["align", "fullWidthOnParentDemand", "className", "children"]);
     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 })));
+    return (_jsx("form", Object.assign({}, restProps, { className: joinedClassNames, children: children })));
 }

package/dist/GridContainer/GridContainer.d.ts

@@ -4,6 +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 function GridContainer({ gap, columns, className, style, children, ref, ...restProps }: GridContainerProps & {
+export declare function GridContainer({ gap, columns, className, style, children, ...restProps }: GridContainerProps & {
     ref?: React.Ref<HTMLDivElement>;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/GridContainer/GridContainer.js

@@ -13,8 +13,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from "classnames";
 import styles from "./GridContainer.module.css";
 export function GridContainer(_a) {
-    var { gap = 1.5, columns = 12, className, style, children, ref } = _a, restProps = __rest(_a, ["gap", "columns", "className", "style", "children", "ref"]);
+    var { gap = 1.5, columns = 12, className, style, children } = _a, restProps = __rest(_a, ["gap", "columns", "className", "style", "children"]);
     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 })));
+    return (_jsx("div", Object.assign({}, restProps, { className: joinedClassNames, style: joinedStyles, children: children })));
 }

package/dist/GridItem/GridItem.d.ts

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

package/dist/GridItem/GridItem.js

@@ -14,7 +14,7 @@ import classNames from "classnames";
 import boxingStyles from "../boxing.module.css";
 import styles from "./GridItem.module.css";
 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"]);
+    var { align, xs, sm, md, lg, xl, className, children } = _a, restProps = __rest(_a, ["align", "xs", "sm", "md", "lg", "xl", "className", "children"]);
     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 })));
+    return (_jsx("div", Object.assign({}, restProps, { className: joinedClassNames, children: children })));
 }

package/dist/Hr/Hr.d.ts

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

package/dist/Hr/Hr.js

@@ -13,8 +13,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from "classnames";
 import styles from "./Hr.module.css";
 export function Hr(_a) {
-    var { variant, height, marginx, className, style, ref } = _a, restProps = __rest(_a, ["variant", "height", "marginx", "className", "style", "ref"]);
+    var { variant, height, marginx, className, style } = _a, restProps = __rest(_a, ["variant", "height", "marginx", "className", "style"]);
     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 })));
+    return (_jsx("hr", Object.assign({}, restProps, { className: joinedClassNames, style: joinedStyles })));
 }

package/dist/InputField/InputField.d.ts

@@ -4,4 +4,4 @@ export interface InputFieldProps extends React.InputHTMLAttributes<HTMLInputElem
     boxSize?: "small" | "normal";
     ref?: React.Ref<HTMLInputElement>;
 }
-export declare function InputField({ variant, boxSize, placeholder, className, ref, ...restProps }: InputFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function InputField({ variant, boxSize, placeholder, className, ...restProps }: InputFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/InputField/InputField.js

@@ -14,7 +14,7 @@ import classNames from "classnames";
 import boxingStyles from "../boxing.module.css";
 import styles from "./InputField.module.css";
 export function InputField(_a) {
-    var { variant = "outlined", boxSize = "normal", placeholder, className, ref } = _a, restProps = __rest(_a, ["variant", "boxSize", "placeholder", "className", "ref"]);
+    var { variant = "outlined", boxSize = "normal", placeholder, className } = _a, restProps = __rest(_a, ["variant", "boxSize", "placeholder", "className"]);
     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 }))] }));
+    return (_jsxs("div", { className: classNames({ [boxingStyles.fullWidthOnParentDemand]: true }, styles.div), children: [_jsx("input", Object.assign({}, restProps, { className: joinedClassNames, placeholder: " " })), placeholder && (_jsx("label", { className: styles.label, children: placeholder }))] }));
 }

package/dist/List/List.d.ts

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

package/dist/List/List.js

@@ -14,7 +14,7 @@ import classNames from "classnames";
 import boxingStyles from "../boxing.module.css";
 import styles from "./List.module.css";
 export function List(_a) {
-    var { direction = "row", collapsed, className, children, ref } = _a, restProps = __rest(_a, ["direction", "collapsed", "className", "children", "ref"]);
+    var { direction = "row", collapsed, className, children } = _a, restProps = __rest(_a, ["direction", "collapsed", "className", "children"]);
     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 })));
+    return (_jsx("ul", Object.assign({}, restProps, { className: joinedClassNames, children: children })));
 }

package/dist/ListItem/ListItem.d.ts

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

package/dist/ListItem/ListItem.js

@@ -14,6 +14,6 @@ import classNames from "classnames";
 import boxingStyles from "../boxing.module.css";
 import styles from "./ListItem.module.css";
 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 })));
+    var { align, className, children } = _a, restProps = __rest(_a, ["align", "className", "children"]);
+    return (_jsx("li", Object.assign({}, restProps, { className: classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { [boxingStyles.demandChildsToBeFullWidth]: true }, styles.listItem, className), children: children })));
 }

package/dist/LoadingIcon/LoadingIcon.d.ts

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

package/dist/LoadingIcon/LoadingIcon.js

@@ -13,7 +13,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from "classnames";
 import styles from "./LoadingIcon.module.css";
 export function LoadingIcon(_a) {
-    var { size = "medium", variant = "dots", className, ref } = _a, restProps = __rest(_a, ["size", "variant", "className", "ref"]);
+    var { size = "medium", variant = "dots", className } = _a, restProps = __rest(_a, ["size", "variant", "className"]);
     const joinedClassNames = classNames(styles.loadingIcon, styles[size], styles[variant], className);
-    return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: _jsx("div", {}) })));
+    return (_jsx("div", Object.assign({}, restProps, { className: joinedClassNames, children: _jsx("div", {}) })));
 }

package/dist/Main/Main.d.ts

@@ -3,7 +3,6 @@ export interface MainProps extends React.HTMLAttributes<HTMLDivElement> {
     align?: "start" | "space" | "center" | "end";
     navOpen?: boolean;
     children?: React.ReactNode;
-}
-export declare function Main({ align, navOpen, className, children, ref, ...restProps }: MainProps & {
     ref?: React.Ref<HTMLDivElement>;
-}): import("react/jsx-runtime").JSX.Element;
+}
+export declare function Main({ align, navOpen, className, children, ...restProps }: MainProps): import("react/jsx-runtime").JSX.Element;

package/dist/Main/Main.js

@@ -14,7 +14,7 @@ import classNames from "classnames";
 import boxingStyles from "../boxing.module.css";
 import styles from "./Main.module.css";
 export function Main(_a) {
-    var { align, navOpen = false, className, children, ref } = _a, restProps = __rest(_a, ["align", "navOpen", "className", "children", "ref"]);
+    var { align, navOpen = false, className, children } = _a, restProps = __rest(_a, ["align", "navOpen", "className", "children"]);
     const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { [boxingStyles.demandChildsToBeFullWidth]: true }, styles.main, { [styles.navOpen]: navOpen }, className);
-    return (_jsx("main", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
+    return (_jsx("main", Object.assign({}, restProps, { className: joinedClassNames, children: children })));
 }

package/dist/Navigation/Navigation.d.ts

@@ -4,7 +4,6 @@ export interface NavigationProps extends React.HTMLAttributes<HTMLElement> {
     anchor?: "left" | "right" | "top" | "bottom" | "auto";
     open: boolean;
     children?: React.ReactNode;
-}
-export declare function Navigation({ align, anchor, open, className, children, ref, ...restProps }: NavigationProps & {
     ref?: React.Ref<HTMLDivElement>;
-}): import("react/jsx-runtime").JSX.Element;
+}
+export declare function Navigation({ align, anchor, open, className, children, ...restProps }: NavigationProps): import("react/jsx-runtime").JSX.Element;

package/dist/Navigation/Navigation.js

@@ -14,9 +14,9 @@ import classNames from "classnames";
 import boxingStyles from "../boxing.module.css";
 import styles from "./Navigation.module.css";
 export function Navigation(_a) {
-    var { align, anchor = "auto", open = false, className, children, ref } = _a, restProps = __rest(_a, ["align", "anchor", "open", "className", "children", "ref"]);
+    var { align, anchor = "auto", open = false, className, children } = _a, restProps = __rest(_a, ["align", "anchor", "open", "className", "children"]);
     const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { [boxingStyles.demandChildsToBeFullWidth]: true }, styles.navigation, styles[anchor], {
         [styles.open]: open,
     }, className);
-    return (_jsx("nav", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
+    return (_jsx("nav", Object.assign({}, restProps, { className: joinedClassNames, children: children })));
 }

package/dist/RadioButton/RadioButton.d.ts

@@ -10,5 +10,5 @@ export interface RadioButtonProps extends Omit<React.InputHTMLAttributes<HTMLInp
     };
     ref?: React.Ref<HTMLInputElement>;
 }
-export declare function RadioButton({ dataFromRadioGroup, label, onClick, className, ref, ...restProps }: RadioButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function RadioButton({ dataFromRadioGroup, label, onClick, className, ...restProps }: RadioButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/RadioButton/RadioButton.js

@@ -16,7 +16,7 @@ import { Symbol } from "@yakad/symbols";
 import { Button } from "..";
 import styles from "./RadioButton.module.css";
 export function RadioButton(_a) {
-    var { dataFromRadioGroup, label, onClick, className, ref } = _a, restProps = __rest(_a, ["dataFromRadioGroup", "label", "onClick", "className", "ref"]);
+    var { dataFromRadioGroup, label, onClick, className } = _a, restProps = __rest(_a, ["dataFromRadioGroup", "label", "onClick", "className"]);
     const joinedClassNames = classNames(styles.radiobutton, {
         [styles.labeled]: label,
         className,
@@ -27,5 +27,5 @@ export function RadioButton(_a) {
     };
     return (_jsxs("div", { className: joinedClassNames, children: [label && (_jsx("label", { className: styles.label, htmlFor: dataFromRadioGroup === null || dataFromRadioGroup === void 0 ? void 0 : dataFromRadioGroup.name, children: label })), _jsx(Button, { icon: _jsx(Symbol, { icon: (dataFromRadioGroup === null || dataFromRadioGroup === void 0 ? void 0 : dataFromRadioGroup.checked)
                         ? "radio_button_checked"
-                        : "radio_button_unchecked" }), onClick: onClickRadioButtonHandler, disabled: restProps.disabled }), _jsx("input", Object.assign({ ref: ref }, restProps, { className: styles.input, type: "radio", name: dataFromRadioGroup === null || dataFromRadioGroup === void 0 ? void 0 : dataFromRadioGroup.name, checked: dataFromRadioGroup === null || dataFromRadioGroup === void 0 ? void 0 : dataFromRadioGroup.checked }))] }));
+                        : "radio_button_unchecked" }), onClick: onClickRadioButtonHandler, disabled: restProps.disabled }), _jsx("input", Object.assign({}, restProps, { className: styles.input, type: "radio", name: dataFromRadioGroup === null || dataFromRadioGroup === void 0 ? void 0 : dataFromRadioGroup.name, checked: dataFromRadioGroup === null || dataFromRadioGroup === void 0 ? void 0 : dataFromRadioGroup.checked }))] }));
 }

package/dist/RadioGroup/RadioGroup.d.ts

@@ -6,8 +6,7 @@ export interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElemen
     name: string;
     defaultValue?: string;
     children?: RadioButtonElement | RadioButtonElement[];
-}
-export declare function RadioGroup({ name, defaultValue, className, children, ref, ...restProps }: RadioGroupProps & {
     ref?: React.Ref<HTMLDivElement>;
-}): import("react/jsx-runtime").JSX.Element;
+}
+export declare function RadioGroup({ name, defaultValue, className, children, ...restProps }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/RadioGroup/RadioGroup.js

@@ -14,7 +14,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useState, Children } from "react";
 import { RadioButton } from "..";
 export function RadioGroup(_a) {
-    var { name, defaultValue, className, children, ref } = _a, restProps = __rest(_a, ["name", "defaultValue", "className", "children", "ref"]);
+    var { name, defaultValue, className, children } = _a, restProps = __rest(_a, ["name", "defaultValue", "className", "children"]);
     const [selectedValue, setSelectedValue] = useState(defaultValue || null);
     const arrayChildren = Children.toArray(children);
     const renderChildrens = () => arrayChildren.map((child, index) => (_jsx(RadioButton, Object.assign({}, child.props, { dataFromRadioGroup: {
@@ -22,5 +22,5 @@ export function RadioGroup(_a) {
             onSelect: () => setSelectedValue(child.props.value),
             checked: selectedValue === child.props.value,
         } }), index)));
-    return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: className, children: renderChildrens() })));
+    return (_jsx("div", Object.assign({}, restProps, { className: className, children: renderChildrens() })));
 }

package/dist/RenderByScroll/RenderByScroll.d.ts

@@ -10,4 +10,4 @@ export interface RenderByScrollProps extends StackProps {
     ref?: React.Ref<HTMLDivElement>;
 }
 export declare function RenderByScroll({ scrollMarginTop, // Sticky Header Height
-extraRender, jumpToIndex, stopNewRenders, newChildRendered, style, children, ref, ...restProps }: RenderByScrollProps): import("react/jsx-runtime").JSX.Element;
+extraRender, jumpToIndex, stopNewRenders, newChildRendered, style, children, ...restProps }: RenderByScrollProps): import("react/jsx-runtime").JSX.Element;

package/dist/RenderByScroll/RenderByScroll.js

@@ -15,7 +15,7 @@ import React, { useEffect, useRef, useState } from "react";
 import { ActiveOnVisible, Stack, useOnVisibilityChange } from "..";
 export function RenderByScroll(_a) {
     var { scrollMarginTop = 8, // Sticky Header Height
-    extraRender = 5, jumpToIndex = 0, stopNewRenders, newChildRendered, style, children, ref } = _a, restProps = __rest(_a, ["scrollMarginTop", "extraRender", "jumpToIndex", "stopNewRenders", "newChildRendered", "style", "children", "ref"]);
+    extraRender = 5, jumpToIndex = 0, stopNewRenders, newChildRendered, style, children } = _a, restProps = __rest(_a, ["scrollMarginTop", "extraRender", "jumpToIndex", "stopNewRenders", "newChildRendered", "style", "children"]);
     const childrenArray = React.Children.toArray(children);
     // Scroll Zone
     const childRefs = useRef({});
@@ -83,7 +83,7 @@ export function RenderByScroll(_a) {
     const onvisibRef = useOnVisibilityChange((visible) => {
         setIsVisibleLowSideLimitSensor(visible);
     });
-    return (_jsxs(Stack, Object.assign({ ref: ref }, restProps, { style: Object.assign({ minHeight: "100vh" }, style), children: [rendered.lowest > 0 && (_jsx("div", { ref: onvisibRef, style: {
+    return (_jsxs(Stack, Object.assign({}, restProps, { style: Object.assign({ minHeight: "100vh" }, style), children: [rendered.lowest > 0 && (_jsx("div", { ref: onvisibRef, style: {
                     marginBottom: `${scrollMarginTop}rem`,
                 } })), childrenArray.map((child, i) => i >= rendered.lowest &&
                 i <= rendered.highest && (_jsx(ActiveOnVisible, { ref: (el) => {

package/dist/Row/Row.d.ts

@@ -5,7 +5,6 @@ export interface RowProps extends React.HTMLAttributes<HTMLDivElement> {
     overflow?: "shrink" | "wrap" | "scroll";
     size?: "xs" | "sm" | "md" | "lg" | "xl";
     children?: React.ReactNode;
-}
-export declare function Row({ align, fullWidthOnParentDemand, overflow, size, className, children, ref, ...restProps }: RowProps & {
     ref?: React.Ref<HTMLDivElement>;
-}): import("react/jsx-runtime").JSX.Element;
+}
+export declare function Row({ align, fullWidthOnParentDemand, overflow, size, className, children, ...restProps }: RowProps): import("react/jsx-runtime").JSX.Element;

package/dist/Row/Row.js

@@ -14,7 +14,7 @@ import classNames from "classnames";
 import boxingStyles from "../boxing.module.css";
 import styles from "./Row.module.css";
 export function Row(_a) {
-    var { align, fullWidthOnParentDemand = true, overflow = "shrink", size = "xl", className, children, ref } = _a, restProps = __rest(_a, ["align", "fullWidthOnParentDemand", "overflow", "size", "className", "children", "ref"]);
+    var { align, fullWidthOnParentDemand = true, overflow = "shrink", size = "xl", className, children } = _a, restProps = __rest(_a, ["align", "fullWidthOnParentDemand", "overflow", "size", "className", "children"]);
     const joinedClassNames = classNames(boxingStyles.flexRowBox, { [boxingStyles[align]]: align }, boxingStyles[overflow], styles.row, { [boxingStyles.fullWidthOnParentDemand]: fullWidthOnParentDemand }, styles[size], className);
-    return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
+    return (_jsx("div", Object.assign({}, restProps, { className: joinedClassNames, children: children })));
 }

package/dist/Screen/Screen.d.ts

@@ -2,7 +2,6 @@
 export interface ScreenProps extends React.HTMLAttributes<HTMLDivElement> {
     align?: "start" | "space" | "center" | "end";
     children?: React.ReactNode;
-}
-export declare function Screen({ align, className, children, ref, ...restProps }: ScreenProps & {
     ref?: React.Ref<HTMLDivElement>;
-}): import("react/jsx-runtime").JSX.Element;
+}
+export declare function Screen({ align, className, children, ...restProps }: ScreenProps): import("react/jsx-runtime").JSX.Element;

package/dist/Screen/Screen.js

@@ -14,7 +14,7 @@ import classNames from "classnames";
 import boxingStyles from "../boxing.module.css";
 import styles from "./Screen.module.css";
 export function Screen(_a) {
-    var { align, className, children, ref } = _a, restProps = __rest(_a, ["align", "className", "children", "ref"]);
+    var { align, className, children } = _a, restProps = __rest(_a, ["align", "className", "children"]);
     const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { [boxingStyles.demandChildsToBeFullWidth]: true }, styles.screen, className);
-    return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
+    return (_jsx("div", Object.assign({}, restProps, { className: joinedClassNames, children: children })));
 }

package/dist/Select/Select.d.ts

@@ -4,7 +4,6 @@ export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElemen
     boxsize?: "small" | "normal";
     placeholder?: string;
     children?: React.ReactNode;
-}
-export declare function Select({ variant, boxsize, placeholder, className, children, ref, ...restProps }: SelectProps & {
     ref?: React.Ref<HTMLSelectElement>;
-}): import("react/jsx-runtime").JSX.Element;
+}
+export declare function Select({ variant, boxsize, placeholder, className, children, ...restProps }: SelectProps): import("react/jsx-runtime").JSX.Element;

package/dist/Select/Select.js

@@ -15,7 +15,7 @@ import boxingStyles from "../boxing.module.css";
 import styles from "./Select.module.css";
 import inputStyles from "../InputField/InputField.module.css";
 export function Select(_a) {
-    var { variant = "outlined", boxsize = "normal", placeholder, className, children, ref } = _a, restProps = __rest(_a, ["variant", "boxsize", "placeholder", "className", "children", "ref"]);
+    var { variant = "outlined", boxsize = "normal", placeholder, className, children } = _a, restProps = __rest(_a, ["variant", "boxsize", "placeholder", "className", "children"]);
     const joinedClassNames = classNames(styles.select, inputStyles.input, inputStyles[variant], inputStyles[boxsize], { [inputStyles.havePlaceHolder]: placeholder }, className);
-    return (_jsxs("div", { className: classNames({ [boxingStyles.fullWidthOnParentDemand]: true }, inputStyles.div), children: [_jsx("select", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })), placeholder ? (_jsx("label", { className: inputStyles.label, children: placeholder })) : null] }));
+    return (_jsxs("div", { className: classNames({ [boxingStyles.fullWidthOnParentDemand]: true }, inputStyles.div), children: [_jsx("select", Object.assign({}, restProps, { className: joinedClassNames, children: children })), placeholder ? (_jsx("label", { className: inputStyles.label, children: placeholder })) : null] }));
 }

package/dist/Spacer/Spacer.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 export interface SpacerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
-}
-export declare function Spacer({ className, ref, ...restProps }: SpacerProps & {
     ref?: React.Ref<HTMLDivElement>;
-}): import("react/jsx-runtime").JSX.Element;
+}
+export declare function Spacer({ className, ...restProps }: SpacerProps): import("react/jsx-runtime").JSX.Element;

package/dist/Spacer/Spacer.js

@@ -13,7 +13,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from "classnames";
 import styles from "./Spacer.module.css";
 export function Spacer(_a) {
-    var { className, ref } = _a, restProps = __rest(_a, ["className", "ref"]);
+    var { className } = _a, restProps = __rest(_a, ["className"]);
     const joinedClassNames = classNames(styles.spacer, className);
-    return _jsx("div", Object.assign({ ref: ref }, restProps, { className: joinedClassNames }));
+    return _jsx("div", Object.assign({}, restProps, { className: joinedClassNames }));
 }

package/dist/Stack/Stack.d.ts

@@ -5,4 +5,4 @@ export interface StackProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
     ref?: React.Ref<HTMLDivElement>;
 }
-export declare function Stack({ align, fullWidthOnParentDemand, className, children, ref, ...restProps }: StackProps): import("react/jsx-runtime").JSX.Element;
+export declare function Stack({ align, fullWidthOnParentDemand, className, children, ...restProps }: StackProps): import("react/jsx-runtime").JSX.Element;

package/dist/Stack/Stack.js

@@ -14,7 +14,7 @@ import classNames from "classnames";
 import boxingStyles from "../boxing.module.css";
 import styles from "./Stack.module.css";
 export function Stack(_a) {
-    var { align, fullWidthOnParentDemand = true, className, children, ref } = _a, restProps = __rest(_a, ["align", "fullWidthOnParentDemand", "className", "children", "ref"]);
+    var { align, fullWidthOnParentDemand = true, className, children } = _a, restProps = __rest(_a, ["align", "fullWidthOnParentDemand", "className", "children"]);
     const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { [boxingStyles.demandChildsToBeFullWidth]: true }, { [boxingStyles.fullWidthOnParentDemand]: fullWidthOnParentDemand }, styles.stack, className);
-    return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
+    return (_jsx("div", Object.assign({}, restProps, { className: joinedClassNames, children: children })));
 }

package/dist/SvgIcon/SvgIcon.d.ts

@@ -2,7 +2,6 @@
 export interface SvgIconProps extends React.HTMLAttributes<HTMLElement> {
     size?: number;
     children?: React.ReactNode;
-}
-export declare function SvgIcon({ size, className, style, children, ref, ...restProps }: SvgIconProps & {
     ref?: React.Ref<HTMLDivElement>;
-}): import("react/jsx-runtime").JSX.Element;
+}
+export declare function SvgIcon({ size, className, style, children, ...restProps }: SvgIconProps): import("react/jsx-runtime").JSX.Element;

package/dist/SvgIcon/SvgIcon.js

@@ -13,8 +13,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from "classnames";
 import styles from "./SvgIcon.module.css";
 export function SvgIcon(_a) {
-    var { size, className, style, children, ref } = _a, restProps = __rest(_a, ["size", "className", "style", "children", "ref"]);
+    var { size, className, style, children } = _a, restProps = __rest(_a, ["size", "className", "style", "children"]);
     const joinedClassNames = classNames(styles.svg, className);
     const sizeStyle = size && { width: `${size}rem`, height: `${size}rem` };
-    return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, style: Object.assign(Object.assign({}, style), sizeStyle), children: children })));
+    return (_jsx("div", Object.assign({}, restProps, { className: joinedClassNames, style: Object.assign(Object.assign({}, style), sizeStyle), children: children })));
 }

package/dist/Table/Table.d.ts

@@ -1,43 +1,36 @@
 /// <reference types="react" />
 export interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
     children?: React.ReactNode;
-}
-export declare function Table({ className, children, ref, ...restProps }: TableProps & {
     ref?: React.Ref<HTMLTableElement>;
-}): import("react/jsx-runtime").JSX.Element;
+}
+export declare function Table({ className, children, ...restProps }: TableProps): import("react/jsx-runtime").JSX.Element;
 export interface TheadProps extends React.HTMLAttributes<HTMLTableSectionElement> {
     children?: React.ReactNode;
-}
-export declare function Thead({ className, children, ref, ...restProps }: TheadProps & {
     ref?: React.Ref<HTMLTableSectionElement>;
-}): import("react/jsx-runtime").JSX.Element;
+}
+export declare function Thead({ className, children, ...restProps }: TheadProps): import("react/jsx-runtime").JSX.Element;
 export interface TbodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
     children?: React.ReactNode;
-}
-export declare function Tbody({ className, children, ref, ...restProps }: TbodyProps & {
     ref?: React.Ref<HTMLTableSectionElement>;
-}): import("react/jsx-runtime").JSX.Element;
+}
+export declare function Tbody({ className, children, ...restProps }: TbodyProps): import("react/jsx-runtime").JSX.Element;
 export interface TfootProps extends React.HTMLAttributes<HTMLTableSectionElement> {
     children?: React.ReactNode;
-}
-export declare function Tfoot({ className, children, ref, ...restProps }: TfootProps & {
     ref?: React.Ref<HTMLTableSectionElement>;
-}): import("react/jsx-runtime").JSX.Element;
+}
+export declare function Tfoot({ className, children, ...restProps }: TfootProps): import("react/jsx-runtime").JSX.Element;
 export interface TrProps extends React.HTMLAttributes<HTMLTableRowElement> {
     children?: React.ReactNode;
-}
-export declare function Tr({ className, children, ref, ...restProps }: TrProps & {
     ref?: React.Ref<HTMLTableRowElement>;
-}): import("react/jsx-runtime").JSX.Element;
+}
+export declare function Tr({ className, children, ...restProps }: TrProps): import("react/jsx-runtime").JSX.Element;
 export interface ThProps extends React.HTMLAttributes<HTMLTableCellElement> {
     children?: React.ReactNode;
-}
-export declare function Th({ className, children, ref, ...restProps }: ThProps & {
     ref?: React.Ref<HTMLTableCellElement>;
-}): import("react/jsx-runtime").JSX.Element;
+}
+export declare function Th({ className, children, ...restProps }: ThProps): import("react/jsx-runtime").JSX.Element;
 export interface TdProps extends React.HTMLAttributes<HTMLTableCellElement> {
     children?: React.ReactNode;
-}
-export declare function Td({ className, children, ref, ...restProps }: TdProps & {
     ref?: React.Ref<HTMLTableCellElement>;
-}): import("react/jsx-runtime").JSX.Element;
+}
+export declare function Td({ className, children, ...restProps }: TdProps): import("react/jsx-runtime").JSX.Element;

package/dist/Table/Table.js

@@ -14,37 +14,37 @@ import classNames from "classnames";
 import boxingStyles from "../boxing.module.css";
 import styles from "./Table.module.css";
 export function Table(_a) {
-    var { className, children, ref } = _a, restProps = __rest(_a, ["className", "children", "ref"]);
+    var { className, children } = _a, restProps = __rest(_a, ["className", "children"]);
     const joinedClassNames = classNames({ [boxingStyles.fullWidthOnParentDemand]: true }, styles.table, className);
-    return (_jsx("table", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
+    return (_jsx("table", Object.assign({}, restProps, { className: joinedClassNames, children: children })));
 }
 export function Thead(_a) {
-    var { className, children, ref } = _a, restProps = __rest(_a, ["className", "children", "ref"]);
+    var { className, children } = _a, restProps = __rest(_a, ["className", "children"]);
     const joinedClassNames = classNames(styles.thead, className);
-    return (_jsx("thead", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
+    return (_jsx("thead", Object.assign({}, restProps, { className: joinedClassNames, children: children })));
 }
 export function Tbody(_a) {
-    var { className, children, ref } = _a, restProps = __rest(_a, ["className", "children", "ref"]);
+    var { className, children } = _a, restProps = __rest(_a, ["className", "children"]);
     const joinedClassNames = classNames(styles.tbody, className);
-    return (_jsx("tbody", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
+    return (_jsx("tbody", Object.assign({}, restProps, { className: joinedClassNames, children: children })));
 }
 export function Tfoot(_a) {
-    var { className, children, ref } = _a, restProps = __rest(_a, ["className", "children", "ref"]);
+    var { className, children } = _a, restProps = __rest(_a, ["className", "children"]);
     const joinedClassNames = classNames(styles.tfoot, className);
-    return (_jsx("tfoot", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
+    return (_jsx("tfoot", Object.assign({}, restProps, { className: joinedClassNames, children: children })));
 }
 export function Tr(_a) {
-    var { className, children, ref } = _a, restProps = __rest(_a, ["className", "children", "ref"]);
+    var { className, children } = _a, restProps = __rest(_a, ["className", "children"]);
     const joinedClassNames = classNames(styles.tr, className);
-    return (_jsx("tr", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
+    return (_jsx("tr", Object.assign({}, restProps, { className: joinedClassNames, children: children })));
 }
 export function Th(_a) {
-    var { className, children, ref } = _a, restProps = __rest(_a, ["className", "children", "ref"]);
+    var { className, children } = _a, restProps = __rest(_a, ["className", "children"]);
     const joinedClassNames = classNames(styles.th, className);
-    return (_jsx("th", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
+    return (_jsx("th", Object.assign({}, restProps, { className: joinedClassNames, children: children })));
 }
 export function Td(_a) {
-    var { className, children, ref } = _a, restProps = __rest(_a, ["className", "children", "ref"]);
+    var { className, children } = _a, restProps = __rest(_a, ["className", "children"]);
     const joinedClassNames = classNames(styles.td, className);
-    return (_jsx("td", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
+    return (_jsx("td", Object.assign({}, restProps, { className: joinedClassNames, children: children })));
 }

package/dist/Text/Text.d.ts

@@ -6,13 +6,13 @@ export interface TextProps<T> extends React.HTMLAttributes<T> {
     children?: React.ReactNode;
     ref?: React.Ref<T>;
 }
-export declare function H1({ variant, palette, className, children, ref, ...restProps }: TextProps<HTMLHeadingElement>): import("react/jsx-runtime").JSX.Element;
-export declare function H2({ variant, palette, className, children, ref, ...restProps }: TextProps<HTMLHeadingElement>): import("react/jsx-runtime").JSX.Element;
-export declare function H3({ variant, palette, className, children, ref, ...restProps }: TextProps<HTMLHeadingElement>): import("react/jsx-runtime").JSX.Element;
-export declare function H4({ variant, palette, className, children, ref, ...restProps }: TextProps<HTMLHeadingElement>): import("react/jsx-runtime").JSX.Element;
-export declare function H5({ variant, palette, className, children, ref, ...restProps }: TextProps<HTMLHeadingElement>): import("react/jsx-runtime").JSX.Element;
-export declare function H6({ variant, palette, className, children, ref, ...restProps }: TextProps<HTMLHeadingElement>): import("react/jsx-runtime").JSX.Element;
-export declare function P({ variant, palette, className, children, ref, ...restProps }: TextProps<HTMLParagraphElement>): import("react/jsx-runtime").JSX.Element;
-export declare function Span({ variant, palette, className, children, ref, ...restProps }: TextProps<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
-export declare function Text({ variant, palette, className, children, ref, ...restProps }: TextProps<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare function H1({ variant, palette, className, children, ...restProps }: TextProps<HTMLHeadingElement>): import("react/jsx-runtime").JSX.Element;
+export declare function H2({ variant, palette, className, children, ...restProps }: TextProps<HTMLHeadingElement>): import("react/jsx-runtime").JSX.Element;
+export declare function H3({ variant, palette, className, children, ...restProps }: TextProps<HTMLHeadingElement>): import("react/jsx-runtime").JSX.Element;
+export declare function H4({ variant, palette, className, children, ...restProps }: TextProps<HTMLHeadingElement>): import("react/jsx-runtime").JSX.Element;
+export declare function H5({ variant, palette, className, children, ...restProps }: TextProps<HTMLHeadingElement>): import("react/jsx-runtime").JSX.Element;
+export declare function H6({ variant, palette, className, children, ...restProps }: TextProps<HTMLHeadingElement>): import("react/jsx-runtime").JSX.Element;
+export declare function P({ variant, palette, className, children, ...restProps }: TextProps<HTMLParagraphElement>): import("react/jsx-runtime").JSX.Element;
+export declare function Span({ variant, palette, className, children, ...restProps }: TextProps<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+export declare function Text({ variant, palette, className, children, ...restProps }: TextProps<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Text/Text.js

@@ -13,74 +13,74 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from "classnames";
 import styles from "./Text.module.css";
 export function H1(_a) {
-    var { variant = "heading1", palette, className, children, ref } = _a, restProps = __rest(_a, ["variant", "palette", "className", "children", "ref"]);
+    var { variant = "heading1", palette, className, children } = _a, restProps = __rest(_a, ["variant", "palette", "className", "children"]);
     const joinedClassNames = classNames(styles.text, styles[variant], {
         [styles.onSurfaceColor]: palette === "onSurfaceColor",
         [styles.onSurfaceVariantColor]: palette === "onSurfaceVariantColor",
     }, className);
-    return (_jsx("h1", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
+    return (_jsx("h1", Object.assign({}, restProps, { className: joinedClassNames, children: children })));
 }
 export function H2(_a) {
-    var { variant = "heading2", palette, className, children, ref } = _a, restProps = __rest(_a, ["variant", "palette", "className", "children", "ref"]);
+    var { variant = "heading2", palette, className, children } = _a, restProps = __rest(_a, ["variant", "palette", "className", "children"]);
     const joinedClassNames = classNames(styles.text, styles[variant], {
         [styles.onSurfaceColor]: palette === "onSurfaceColor",
         [styles.onSurfaceVariantColor]: palette === "onSurfaceVariantColor",
     }, className);
-    return (_jsx("h2", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
+    return (_jsx("h2", Object.assign({}, restProps, { className: joinedClassNames, children: children })));
 }
 export function H3(_a) {
-    var { variant = "heading3", palette, className, children, ref } = _a, restProps = __rest(_a, ["variant", "palette", "className", "children", "ref"]);
+    var { variant = "heading3", palette, className, children } = _a, restProps = __rest(_a, ["variant", "palette", "className", "children"]);
     const joinedClassNames = classNames(styles.text, styles[variant], {
         [styles.onSurfaceColor]: palette === "onSurfaceColor",
         [styles.onSurfaceVariantColor]: palette === "onSurfaceVariantColor",
     }, className);
-    return (_jsx("h3", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
+    return (_jsx("h3", Object.assign({}, restProps, { className: joinedClassNames, children: children })));
 }
 export function H4(_a) {
-    var { variant = "heading4", palette, className, children, ref } = _a, restProps = __rest(_a, ["variant", "palette", "className", "children", "ref"]);
+    var { variant = "heading4", palette, className, children } = _a, restProps = __rest(_a, ["variant", "palette", "className", "children"]);
     const joinedClassNames = classNames(styles.text, styles[variant], {
         [styles.onSurfaceColor]: palette === "onSurfaceColor",
         [styles.onSurfaceVariantColor]: palette === "onSurfaceVariantColor",
     }, className);
-    return (_jsx("h4", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
+    return (_jsx("h4", Object.assign({}, restProps, { className: joinedClassNames, children: children })));
 }
 export function H5(_a) {
-    var { variant = "heading5", palette, className, children, ref } = _a, restProps = __rest(_a, ["variant", "palette", "className", "children", "ref"]);
+    var { variant = "heading5", palette, className, children } = _a, restProps = __rest(_a, ["variant", "palette", "className", "children"]);
     const joinedClassNames = classNames(styles.text, styles[variant], {
         [styles.onSurfaceColor]: palette === "onSurfaceColor",
         [styles.onSurfaceVariantColor]: palette === "onSurfaceVariantColor",
     }, className);
-    return (_jsx("h5", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
+    return (_jsx("h5", Object.assign({}, restProps, { className: joinedClassNames, children: children })));
 }
 export function H6(_a) {
-    var { variant = "heading6", palette, className, children, ref } = _a, restProps = __rest(_a, ["variant", "palette", "className", "children", "ref"]);
+    var { variant = "heading6", palette, className, children } = _a, restProps = __rest(_a, ["variant", "palette", "className", "children"]);
     const joinedClassNames = classNames(styles.text, styles[variant], {
         [styles.onSurfaceColor]: palette === "onSurfaceColor",
         [styles.onSurfaceVariantColor]: palette === "onSurfaceVariantColor",
     }, className);
-    return (_jsx("h6", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
+    return (_jsx("h6", Object.assign({}, restProps, { className: joinedClassNames, children: children })));
 }
 export function P(_a) {
-    var { variant = "body5", palette, className, children, ref } = _a, restProps = __rest(_a, ["variant", "palette", "className", "children", "ref"]);
+    var { variant = "body5", palette, className, children } = _a, restProps = __rest(_a, ["variant", "palette", "className", "children"]);
     const joinedClassNames = classNames(styles.text, styles[variant], {
         [styles.onSurfaceColor]: palette === "onSurfaceColor",
         [styles.onSurfaceVariantColor]: palette === "onSurfaceVariantColor",
     }, className);
-    return (_jsx("p", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
+    return (_jsx("p", Object.assign({}, restProps, { className: joinedClassNames, children: children })));
 }
 export function Span(_a) {
-    var { variant = "span", palette, className, children, ref } = _a, restProps = __rest(_a, ["variant", "palette", "className", "children", "ref"]);
+    var { variant = "span", palette, className, children } = _a, restProps = __rest(_a, ["variant", "palette", "className", "children"]);
     const joinedClassNames = classNames(styles.text, styles[variant], {
         [styles.onSurfaceColor]: palette === "onSurfaceColor",
         [styles.onSurfaceVariantColor]: palette === "onSurfaceVariantColor",
     }, className);
-    return (_jsx("span", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
+    return (_jsx("span", Object.assign({}, restProps, { className: joinedClassNames, children: children })));
 }
 export function Text(_a) {
-    var { variant = "body5", palette, className, children, ref } = _a, restProps = __rest(_a, ["variant", "palette", "className", "children", "ref"]);
+    var { variant = "body5", palette, className, children } = _a, restProps = __rest(_a, ["variant", "palette", "className", "children"]);
     const joinedClassNames = classNames(styles[variant], {
         [styles.onSurfaceColor]: palette === "onSurfaceColor",
         [styles.onSurfaceVariantColor]: palette === "onSurfaceVariantColor",
     }, className);
-    return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
+    return (_jsx("div", Object.assign({}, restProps, { className: joinedClassNames, children: children })));
 }

package/dist/Theme/Theme.d.ts

@@ -10,4 +10,4 @@ export interface ThemeProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
     ref?: React.Ref<HTMLDivElement>;
 }
-export declare function Theme({ align, darkStyle, color, zoom, className, children, ref, ...restProps }: ThemeProps): import("react/jsx-runtime").JSX.Element;
+export declare function Theme({ align, darkStyle, color, zoom, className, children, ...restProps }: ThemeProps): import("react/jsx-runtime").JSX.Element;

package/dist/Theme/Theme.js

@@ -17,11 +17,11 @@ import "./globals.css";
 import styles from "./Theme.module.css";
 import boxingStyles from "../boxing.module.css";
 export function Theme(_a) {
-    var { align, darkStyle = "system", color = "blue", zoom = 100, className, children, ref } = _a, restProps = __rest(_a, ["align", "darkStyle", "color", "zoom", "className", "children", "ref"]);
+    var { align, darkStyle = "system", color = "blue", zoom = 100, className, children } = _a, restProps = __rest(_a, ["align", "darkStyle", "color", "zoom", "className", "children"]);
     const zoomPercentage = zoom ? (zoom / 100) * 62.5 : 62.5;
     useEffect(() => {
         document.documentElement.style.setProperty("font-size", zoomPercentage + "%");
     }, [zoomPercentage]);
     const joinedClassNames = classNames({ portalRoot: true }, boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { [boxingStyles.demandChildsToBeFullWidth]: true }, styles.theme, styles[darkStyle], styles[color], className);
-    return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
+    return (_jsx("div", Object.assign({}, restProps, { className: joinedClassNames, children: children })));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yakad/ui",
-    "version": "1.3.162",
+    "version": "1.3.164",
     "private": false,
     "author": "Natiq",
     "description": "UI components for NextJS/React",
@@ -32,7 +32,7 @@
         "prepublishOnly": "npm run lint && npm run test && npm run build && npm run typecheck"
     },
     "dependencies": {
-        "@yakad/lib": "1.0.22",
+        "@yakad/lib": "1.0.23",
         "@yakad/symbols": "1.0.29",
         "classnames": "2.5.1"
     },