@yakad/ui 1.3.112 → 1.3.114

package/dist/AppBar/AppBar.js

@@ -15,7 +15,7 @@ import { forwardRef, useEffect, useState } from "react";
 import classNames from "classnames";
 import boxingStyles from "../boxing.module.css";
 import styles from "./AppBar.module.css";
-export const AppBar = forwardRef((_a, ref) => {
+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"]);
     const [show, setShow] = useState(true);
     const [lastScrollY, setLastScrollY] = useState(0);
@@ -42,4 +42,3 @@ export const AppBar = forwardRef((_a, ref) => {
     }, { [styles.hidden]: position === "scroll" && !show }, { [styles[size]]: size }, { [styles.blur]: blur }, className);
     return (_jsx("header", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });
-AppBar.displayName = "AppBar";

package/dist/Button/Button.js

@@ -14,7 +14,7 @@ import { forwardRef } from "react";
 import classNames from "classnames";
 import { LoadingIcon } from "..";
 import styles from "./Button.module.css";
-export const Button = forwardRef((_a, ref) => {
+export const Button = forwardRef(function Button(_a, ref) {
     var { size = "medium", variant = "text", borderStyle = "rounded", icon, iconPosition = "start", loadingPosition = "auto", loadingVariant, className, children } = _a, restProps = __rest(_a, ["size", "variant", "borderStyle", "icon", "iconPosition", "loadingPosition", "loadingVariant", "className", "children"]);
     const childrenFirst = Boolean(iconPosition === "end");
     const isLoadingPositionCenter = Boolean(!icon || loadingPosition === "center");
@@ -23,4 +23,3 @@ export const Button = forwardRef((_a, ref) => {
                     [styles.positionCenter]: isLoadingPositionCenter,
                 }), children: _jsx(LoadingIcon, { size: size, variant: loadingVariant }) })), icon, !childrenFirst && children] })));
 });
-Button.displayName = "Button";

package/dist/Card/Card.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="react" />
+import "./card.css";
 export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
     align?: "start" | "space" | "center" | "end";
     blur?: boolean;
+    level?: "low" | "mid" | "high";
     children?: React.ReactNode;
 }
 export declare const Card: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Card/Card.js

@@ -14,9 +14,16 @@ import { forwardRef } from "react";
 import classNames from "classnames";
 import boxingStyles from "../boxing.module.css";
 import styles from "./Card.module.css";
-export const Card = forwardRef((_a, ref) => {
-    var { align, blur, className, children } = _a, restProps = __rest(_a, ["align", "blur", "className", "children"]);
-    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, "fullWidthLover", styles.card, { [styles.blur]: blur }, className);
+import "./card.css";
+export const Card = forwardRef(function Card(_a, ref) {
+    var { align, blur, level, className, children } = _a, restProps = __rest(_a, ["align", "blur", "level", "className", "children"]);
+    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { fullWidthLover: true }, styles.card, 
+    // { [styles.blur]: blur },
+    {
+        yakadCardAutoLevel: level === undefined,
+        yakadCardLowLevel: level === "low",
+        yakadCardMidLevel: level === "mid",
+        yakadCardHighLevel: level === "high",
+    }, className);
     return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });
-Card.displayName = "Card";

package/dist/Card/Card.module.css

@@ -3,7 +3,6 @@
     border-radius: 2rem;
     box-shadow: 0px 3px 3px -2px rgb(0 0 0 / 20%),
         0px 3px 4px 0px rgb(0 0 0 / 14%), 0px 1px 8px 0px rgb(0 0 0 / 12%);
-    background: rgb(var(--surfaceContainerHighestColor, 230 224 233));
     color: rgb(var(--onSurfaceColor, 28 27 31));
     fill: rgb(var(--onSurfaceColor, 28 27 31));
     overflow: hidden;

package/dist/Card/card.css

@@ -0,0 +1,21 @@
+.yakadCardBlur {
+}
+
+.yakadCard,
+.yakadCardLowLevel {
+    background: rgb(var(--surfaceContainerColor, 230 224 233));
+}
+
+.yakadCard .yakadCard,
+.yakadCardLowLevel .yakadCard,
+.yakadCardMidLevel {
+    background: rgb(var(--surfaceContainerHighColor, 230 224 233));
+}
+
+.yakadCard .yakadCard .yakadCard,
+.yakadCardLowLevel .yakadCard .yakadCard,
+.yakadCardMidLevel .yakadCard,
+.yakadCardHighLevel,
+.yakadCardHighLevel .yakadCard {
+    background: rgb(var(--surfaceContainerHighestColor, 230 224 233));
+}

package/dist/CheckBox/CheckBox.js

@@ -14,9 +14,8 @@ import { forwardRef } from "react";
 import classNames from "classnames";
 import { Symbol } from "@yakad/symbols";
 import styles from "./CheckBox.module.css";
-export const CheckBox = forwardRef((_a, ref) => {
+export const CheckBox = forwardRef(function CheckBox(_a, ref) {
     var { label, className, style } = _a, restProps = __rest(_a, ["label", "className", "style"]);
-    const joinedClassNames = classNames(label && "fullWidthLover", styles.label, { [styles.labeled]: label }, { [styles.disabled]: restProps.disabled }, className);
+    const joinedClassNames = classNames(label && { fullWidthLover: true }, 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" })] })] }));
 });
-CheckBox.displayName = "CheckBox";

package/dist/CodeBox/CodeBox.js

@@ -15,9 +15,8 @@ import classNames from "classnames";
 import { Symbol } from "@yakad/symbols";
 import { Button, Card } from "..";
 import styles from "./CodeBox.module.css";
-export const CodeBox = forwardRef((_a, ref) => {
+export const CodeBox = forwardRef(function CodeBox(_a, ref) {
     var { copyButton, className, children } = _a, restProps = __rest(_a, ["copyButton", "className", "children"]);
-    const joinedClassNames = classNames("fullWidthLover", styles.ZZZZZZZZZZ, className);
+    const joinedClassNames = classNames({ fullWidthLover: 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" }) })] })));
 });
-CodeBox.displayName = "CodeBox";

package/dist/CodeField/CodeField.js

@@ -30,13 +30,12 @@ function sliceOverLength(inputElement, inputLength) {
 function removeUnNumberChars(inputElement) {
     inputElement.value = inputElement.value.replace(/[^0-9]+/, "");
 }
-export const CodeField = forwardRef((_a, ref) => {
+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"]);
-    const joinedClassNames = classNames("fullWidthLover", styles.input, className);
+    const joinedClassNames = classNames({ fullWidthLover: 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;
         } })));
 });
-CodeField.displayName = "CodeField";

package/dist/Container/Container.js

@@ -14,9 +14,8 @@ import { forwardRef } from "react";
 import classNames from "classnames";
 import boxingStyles from "../boxing.module.css";
 import styles from "./Container.module.css";
-export const Container = forwardRef((_a, ref) => {
+export const Container = forwardRef(function Container(_a, ref) {
     var { size = "xl", align, className, children } = _a, restProps = __rest(_a, ["size", "align", "className", "children"]);
     const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, styles.container, styles[size], className);
     return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });
-Container.displayName = "Container";

package/dist/Display/Display.js

@@ -13,9 +13,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import classNames from "classnames";
 import styles from "./Display.module.css";
-export const Display = forwardRef((_a, ref) => {
+export const Display = forwardRef(function Display(_a, ref) {
     var { minWidth, maxWidth, className, children } = _a, restProps = __rest(_a, ["minWidth", "maxWidth", "className", "children"]);
-    const joinedClassNames = classNames("fullWidthLover", { [styles[`${minWidth}MinWidth`]]: minWidth }, { [styles[`${maxWidth}MaxWidth`]]: maxWidth }, className);
+    const joinedClassNames = classNames({ fullWidthLover: true }, { [styles[`${minWidth}MinWidth`]]: minWidth }, { [styles[`${maxWidth}MaxWidth`]]: maxWidth }, className);
     return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });
-Display.displayName = "Display";

package/dist/Footer/Footer.js

@@ -15,7 +15,7 @@ import { forwardRef, useState, useEffect } from "react";
 import classNames from "classnames";
 import boxingStyles from "../boxing.module.css";
 import styles from "./Footer.module.css";
-export const Footer = forwardRef((_a, ref) => {
+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"]);
     const [show, setShow] = useState(true);
     const [lastScrollY, setLastScrollY] = useState(0);
@@ -40,4 +40,3 @@ export const Footer = forwardRef((_a, ref) => {
     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 })));
 });
-Footer.displayName = "Footer";

package/dist/Form/Form.js

@@ -14,9 +14,8 @@ import { forwardRef } from "react";
 import classNames from "classnames";
 import styles from "./Form.module.css";
 import boxingStyles from "../boxing.module.css";
-export const Form = forwardRef((_a, ref) => {
+export const Form = forwardRef(function Form(_a, ref) {
     var { align, className, children } = _a, restProps = __rest(_a, ["align", "className", "children"]);
-    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, "fullWidthLover", styles.form, className);
+    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { fullWidthLover: true }, styles.form, className);
     return (_jsx("form", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });
-Form.displayName = "Form";

package/dist/GridContainer/GridContainer.js

@@ -13,10 +13,9 @@ 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((_a, ref) => {
+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"]);
     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 })));
 });
-GridContainer.displayName = "GridContainer";

package/dist/GridItem/GridItem.js

@@ -14,9 +14,8 @@ import { forwardRef } from "react";
 import classNames from "classnames";
 import boxingStyles from "../boxing.module.css";
 import styles from "./GridItem.module.css";
-export const GridItem = forwardRef((_a, ref) => {
+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"]);
     const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, 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 })));
 });
-GridItem.displayName = "GridItem";

package/dist/Hr/Hr.js

@@ -13,10 +13,9 @@ 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((_a, ref) => {
+export const Hr = forwardRef(function Hr(_a, 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 })));
 });
-Hr.displayName = "Hr";

package/dist/InputField/InputField.js

@@ -13,9 +13,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import classNames from "classnames";
 import styles from "./InputField.module.css";
-export const InputField = forwardRef((_a, ref) => {
+export const InputField = forwardRef(function InputField(_a, 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("fullWidthLover", 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({ fullWidthLover: true }, styles.div), children: [_jsx("input", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, placeholder: " " })), placeholder && (_jsx("label", { className: styles.label, children: placeholder }))] }));
 });
-InputField.displayName = "InputField";

package/dist/List/List.js

@@ -13,9 +13,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import classNames from "classnames";
 import styles from "./List.module.css";
-export const List = forwardRef((_a, ref) => {
+export const List = forwardRef(function List(_a, ref) {
     var { direction = "row", collapsed, className, children } = _a, restProps = __rest(_a, ["direction", "collapsed", "className", "children"]);
-    const joinedClassNames = classNames("fullWidthLover", styles.list, styles[direction], { [styles.collapsed]: collapsed }, className);
+    const joinedClassNames = classNames({ fullWidthLover: true }, styles.list, styles[direction], { [styles.collapsed]: collapsed }, className);
     return (_jsx("ul", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });
-List.displayName = "List";

package/dist/ListItem/ListItem.js

@@ -14,8 +14,7 @@ import { forwardRef } from "react";
 import classNames from "classnames";
 import boxingStyles from "../boxing.module.css";
 import styles from "./ListItem.module.css";
-export const ListItem = forwardRef((_a, ref) => {
+export const ListItem = forwardRef(function ListItem(_a, ref) {
     var { align, className, children } = _a, restProps = __rest(_a, ["align", "className", "children"]);
     return (_jsx("li", Object.assign({ ref: ref }, restProps, { className: classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, styles.listItem, className), children: children })));
 });
-ListItem.displayName = "ListItem";

package/dist/LoadingIcon/LoadingIcon.js

@@ -13,9 +13,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import classNames from "classnames";
 import styles from "./LoadingIcon.module.css";
-export const LoadingIcon = forwardRef((_a, ref) => {
+export const LoadingIcon = forwardRef(function LoadingIcon(_a, ref) {
     var { size = "medium", variant = "spinner", 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", {}) })));
 });
-LoadingIcon.displayName = "LoadingIcon";

package/dist/Main/Main.js

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

package/dist/Navigation/Navigation.js

@@ -14,11 +14,10 @@ import { forwardRef } from "react";
 import classNames from "classnames";
 import boxingStyles from "../boxing.module.css";
 import styles from "./Navigation.module.css";
-export const Navigation = forwardRef((_a, ref) => {
+export const Navigation = forwardRef(function Navigation(_a, 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 }, styles.navigation, styles[anchor], {
         [styles.open]: open,
     }, className);
     return (_jsx("nav", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });
-Navigation.displayName = "Navigation";

package/dist/RadioButton/RadioButton.js

@@ -16,7 +16,7 @@ import classNames from "classnames";
 import { Symbol } from "@yakad/symbols";
 import { Button } from "..";
 import styles from "./RadioButton.module.css";
-export const RadioButton = forwardRef((_a, ref) => {
+export const RadioButton = forwardRef(function RadioButton(_a, ref) {
     var { dataFromRadioGroup, label, onClick, className } = _a, restProps = __rest(_a, ["dataFromRadioGroup", "label", "onClick", "className"]);
     const joinedClassNames = classNames(styles.radiobutton, {
         [styles.labeled]: label,
@@ -30,4 +30,3 @@ export const RadioButton = forwardRef((_a, ref) => {
                         ? "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 }))] }));
 });
-RadioButton.displayName = "RadioButton";

package/dist/RadioGroup/RadioGroup.js

@@ -13,7 +13,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState, forwardRef, Children } from "react";
 import { RadioButton } from "..";
-export const RadioGroup = forwardRef((_a, ref) => {
+export const RadioGroup = forwardRef(function RadioGroup(_a, 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);
@@ -24,4 +24,3 @@ export const RadioGroup = forwardRef((_a, ref) => {
         } }), index)));
     return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: className, children: renderChildrens() })));
 });
-RadioGroup.displayName = "RadioGroup";

package/dist/Row/Row.js

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

package/dist/Screen/Screen.js

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

package/dist/Select/Select.js

@@ -14,9 +14,8 @@ import { forwardRef } from "react";
 import classNames from "classnames";
 import styles from "./Select.module.css";
 import inputStyles from "../InputField/InputField.module.css";
-export const Select = forwardRef((_a, ref) => {
+export const Select = forwardRef(function Select(_a, 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("fullWidthLover", 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({ fullWidthLover: true }, inputStyles.div), children: [_jsx("select", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })), placeholder ? (_jsx("label", { className: inputStyles.label, children: placeholder })) : null] }));
 });
-Select.displayName = "Select";

package/dist/Spacer/Spacer.js

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

package/dist/Stack/Stack.js

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

package/dist/SvgIcon/SvgIcon.js

@@ -13,10 +13,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import classNames from "classnames";
 import styles from "./SvgIcon.module.css";
-export const SvgIcon = forwardRef((_a, ref) => {
+export const SvgIcon = forwardRef(function SvgIcon(_a, 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 })));
 });
-SvgIcon.displayName = "SvgIcon";

package/dist/Table/Table.js

@@ -13,45 +13,38 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import classNames from "classnames";
 import styles from "./Table.module.css";
-export const Table = forwardRef((_a, ref) => {
+export const Table = forwardRef(function Table(_a, ref) {
     var { className, children } = _a, restProps = __rest(_a, ["className", "children"]);
-    const joinedClassNames = classNames("fullWidthLover", styles.table, className);
+    const joinedClassNames = classNames({ fullWidthLover: true }, styles.table, className);
     return (_jsx("table", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });
-Table.displayName = "Table";
-export const Thead = forwardRef((_a, ref) => {
+export const Thead = forwardRef(function Thead(_a, 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 })));
 });
-Thead.displayName = "Thead";
-export const Tbody = forwardRef((_a, ref) => {
+export const Tbody = forwardRef(function Tbody(_a, 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 })));
 });
-Tbody.displayName = "Tbody";
-export const Tfoot = forwardRef((_a, ref) => {
+export const Tfoot = forwardRef(function Tfoot(_a, 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 })));
 });
-Tfoot.displayName = "Tfoot";
-export const Tr = forwardRef((_a, ref) => {
+export const Tr = forwardRef(function Tr(_a, 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 })));
 });
-Tr.displayName = "Tr";
-export const Th = forwardRef((_a, ref) => {
+export const Th = forwardRef(function Th(_a, 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 })));
 });
-Th.displayName = "Th";
-export const Td = forwardRef((_a, ref) => {
+export const Td = forwardRef(function Td(_a, 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 })));
 });
-Td.displayName = "Td";

package/dist/Text/Text.js

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

package/dist/Theme/Theme.js

@@ -16,7 +16,7 @@ import classNames from "classnames";
 import "./globals.css";
 import styles from "./Theme.module.css";
 import boxingStyles from "../boxing.module.css";
-export const Theme = forwardRef((_a, ref) => {
+export const Theme = forwardRef(function Theme(_a, 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(() => {
@@ -25,4 +25,3 @@ export const Theme = forwardRef((_a, ref) => {
     const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, styles.theme, styles[darkStyle], styles[color], className);
     return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });
-Theme.displayName = "Theme";

package/dist/Theme/Theme.module.css

@@ -28,7 +28,7 @@
     --LightSurfaceContainerLowestColor: 255 255 255;
     --LightSurfaceContainerLowColor: 247 242 250;
     --LightSurfaceContainerColor: 243 237 247;
-    --LightSurfaceContainerHightColor: 236 230 240;
+    --LightSurfaceContainerHighColor: 236 230 240;
     --LightSurfaceContainerHighestColor: 230 224 233;
     --LightOnSurfaceColor: 28 27 31;
     --LightOnSurfaceVariantColor: 73 69 78;
@@ -57,7 +57,7 @@
     --DarkSurfaceContainerLowestColor: 15 13 19;
     --DarkSurfaceContainerLowColor: 29 27 32;
     --DarkSurfaceContainerColor: 33 31 38;
-    --DarkSurfaceContainerHightColor: 43 41 48;
+    --DarkSurfaceContainerHighColor: 43 41 48;
     --DarkSurfaceContainerHighestColor: 54 52 59;
     --DarkOnSurfaceColor: 230 225 229;
     --DarkOnSurfaceVariantColor: 202 196 208;
@@ -87,7 +87,7 @@
     --LightSurfaceContainerLowestColor: 255 255 255;
     --LightSurfaceContainerLowColor: 247 242 250;
     --LightSurfaceContainerColor: 243 237 247;
-    --LightSurfaceContainerHightColor: 236 230 240;
+    --LightSurfaceContainerHighColor: 236 230 240;
     --LightSurfaceContainerHighestColor: 230 224 233;
     --LightOnSurfaceColor: 28 27 31;
     --LightOnSurfaceVariantColor: 73 69 78;
@@ -116,7 +116,7 @@
     --DarkSurfaceContainerLowestColor: 15 13 19;
     --DarkSurfaceContainerLowColor: 29 27 32;
     --DarkSurfaceContainerColor: 33 31 38;
-    --DarkSurfaceContainerHightColor: 43 41 48;
+    --DarkSurfaceContainerHighColor: 43 41 48;
     --DarkSurfaceContainerHighestColor: 54 52 59;
     --DarkOnSurfaceColor: 230 225 229;
     --DarkOnSurfaceVariantColor: 202 196 208;
@@ -147,7 +147,7 @@
     --LightSurfaceContainerLowestColor: 255 255 255;
     --LightSurfaceContainerLowColor: 247 242 250;
     --LightSurfaceContainerColor: 243 237 247;
-    --LightSurfaceContainerHightColor: 236 230 240;
+    --LightSurfaceContainerHighColor: 236 230 240;
     --LightSurfaceContainerHighestColor: 230 224 233;
     --LightOnSurfaceColor: 28 27 31;
     --LightOnSurfaceVariantColor: 73 69 78;
@@ -176,7 +176,7 @@
     --DarkSurfaceContainerLowestColor: 15 13 19;
     --DarkSurfaceContainerLowColor: 29 27 32;
     --DarkSurfaceContainerColor: 33 31 38;
-    --DarkSurfaceContainerHightColor: 43 41 48;
+    --DarkSurfaceContainerHighColor: 43 41 48;
     --DarkSurfaceContainerHighestColor: 54 52 59;
     --DarkOnSurfaceColor: 230 225 229;
     --DarkOnSurfaceVariantColor: 202 196 208;
@@ -207,7 +207,7 @@
     --LightSurfaceContainerLowestColor: 255 255 255;
     --LightSurfaceContainerLowColor: 247 242 250;
     --LightSurfaceContainerColor: 243 237 247;
-    --LightSurfaceContainerHightColor: 236 230 240;
+    --LightSurfaceContainerHighColor: 236 230 240;
     --LightSurfaceContainerHighestColor: 230 224 233;
     --LightOnSurfaceColor: 28 27 31;
     --LightOnSurfaceVariantColor: 73 69 78;
@@ -236,7 +236,7 @@
     --DarkSurfaceContainerLowestColor: 15 13 19;
     --DarkSurfaceContainerLowColor: 29 27 32;
     --DarkSurfaceContainerColor: 33 31 38;
-    --DarkSurfaceContainerHightColor: 43 41 48;
+    --DarkSurfaceContainerHighColor: 43 41 48;
     --DarkSurfaceContainerHighestColor: 54 52 59;
     --DarkOnSurfaceColor: 230 225 229;
     --DarkOnSurfaceVariantColor: 202 196 208;
@@ -269,7 +269,7 @@
     --LightSurfaceContainerLowestColor: 255 255 255;
     --LightSurfaceContainerLowColor: 247 242 250;
     --LightSurfaceContainerColor: 243 237 247;
-    --LightSurfaceContainerHightColor: 236 230 240;
+    --LightSurfaceContainerHighColor: 236 230 240;
     --LightSurfaceContainerHighestColor: 230 224 233;
     --LightOnSurfaceColor: 28 27 31;
     --LightOnSurfaceVariantColor: 73 69 78;
@@ -300,7 +300,7 @@
     --DarkSurfaceContainerLowestColor: 15 13 19;
     --DarkSurfaceContainerLowColor: 29 27 32;
     --DarkSurfaceContainerColor: 33 31 38;
-    --DarkSurfaceContainerHightColor: 43 41 48;
+    --DarkSurfaceContainerHighColor: 43 41 48;
     --DarkSurfaceContainerHighestColor: 54 52 59;
     --DarkOnSurfaceColor: 230 225 229;
     --DarkOnSurfaceVariantColor: 202 196 208;
@@ -331,7 +331,7 @@
     --surfaceContainerLowestColor: var(--LightSurfaceContainerLowestColor);
     --surfaceContainerLowColor: var(--LightSurfaceContainerLowColor);
     --surfaceContainerColor: var(--LightSurfaceContainerColor);
-    --surfaceContainerHightColor: var(--LightSurfaceContainerHightColor);
+    --surfaceContainerHighColor: var(--LightSurfaceContainerHighColor);
     --surfaceContainerHighestColor: var(--LightSurfaceContainerHighestColor);
     --onSurfaceColor: var(--LightOnSurfaceColor);
     --onSurfaceRGBColor: var(--LightOnSurfaceRGBColor);
@@ -361,7 +361,7 @@
     --surfaceContainerLowestColor: var(--DarkSurfaceContainerLowestColor);
     --surfaceContainerLowColor: var(--DarkSurfaceContainerLowColor);
     --surfaceContainerColor: var(--DarkSurfaceContainerColor);
-    --surfaceContainerHightColor: var(--DarkSurfaceContainerHightColor);
+    --surfaceContainerHighColor: var(--DarkSurfaceContainerHighColor);
     --surfaceContainerHighestColor: var(--DarkSurfaceContainerHighestColor);
     --onSurfaceColor: var(--DarkOnSurfaceColor);
     --onSurfaceRGBColor: var(--DarkOnSurfaceRGBColor);
@@ -392,7 +392,7 @@
         --surfaceContainerLowestColor: var(--DarkSurfaceContainerLowestColor);
         --surfaceContainerLowColor: var(--DarkSurfaceContainerLowColor);
         --surfaceContainerColor: var(--DarkSurfaceContainerColor);
-        --surfaceContainerHightColor: var(--DarkSurfaceContainerHightColor);
+        --surfaceContainerHighColor: var(--DarkSurfaceContainerHighColor);
         --surfaceContainerHighestColor: var(--DarkSurfaceContainerHighestColor);
         --onSurfaceColor: var(--DarkOnSurfaceColor);
         --onSurfaceRGBColor: var(--DarkOnSurfaceRGBColor);

package/dist/WithDropdawn/WithDropdawn.d.ts

@@ -8,7 +8,4 @@ export interface WithDropdawnProps extends React.HTMLAttributes<HTMLDivElement>
         onClick?: (e: React.MouseEvent<HTMLElement>) => void;
     }>;
 }
-export declare const WithDropdawn: {
-    ({ align, blur, trigger, dropdawnChildren, className, style, children, ...restProps }: WithDropdawnProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare function WithDropdawn({ align, blur, trigger, dropdawnChildren, className, style, children, ...restProps }: WithDropdawnProps): import("react/jsx-runtime").JSX.Element;

package/dist/WithDropdawn/WithDropdawn.js

@@ -16,7 +16,7 @@ import classNames from "classnames";
 import { WithInteractions } from "../";
 import boxingStyles from "../boxing.module.css";
 import styles from "./WithDropdawn.module.css";
-export const WithDropdawn = (_a) => {
+export function WithDropdawn(_a) {
     var { align, blur, trigger = "onClick", dropdawnChildren, className, style, children } = _a, restProps = __rest(_a, ["align", "blur", "trigger", "dropdawnChildren", "className", "style", "children"]);
     const toggleElementRef = useRef(null);
     const dropdawnRef = useRef(null);
@@ -74,5 +74,4 @@ export const WithDropdawn = (_a) => {
                     left: arrowX,
                     visibility: showDropdawn ? "visible" : "hidden",
                 } }), _jsx(WithInteractions, { onOutsideClick: () => setShowDropdawn(false), children: _jsx("div", Object.assign({ ref: dropdawnRef }, restProps, { className: joinedClassNames, style: Object.assign({ top: top, left: dropdawnX, visibility: showDropdawn ? "visible" : "hidden" }, style), children: dropdawnChildren })) })] }));
-};
-WithDropdawn.displayName = "WithDropdawn";
+}

package/dist/WithInteractions/WithInteractions.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { mergeRefs } from "@yakad/lib";
 import { cloneElement, forwardRef, isValidElement, useEffect, useImperativeHandle, useRef, } from "react";
-export const WithInteractions = forwardRef((_a, forwardedRef) => {
+export const WithInteractions = forwardRef(function WithInteractions(_a, forwardedRef) {
     var _b;
     var { children, onRightClick, onTap, onDoubleTap, onOutsideClick, onSwipeLeft, onSwipeRight, onSwipeUp, onSwipeDown, onPinchIn, onPinchOut, onRotate, onScrollStart, onScrollStop, onResize, onVisibile, onHidden, onMouseHoverStart, onMouseHoverLeave } = _a, restProps = __rest(_a, ["children", "onRightClick", "onTap", "onDoubleTap", "onOutsideClick", "onSwipeLeft", "onSwipeRight", "onSwipeUp", "onSwipeDown", "onPinchIn", "onPinchOut", "onRotate", "onScrollStart", "onScrollStop", "onResize", "onVisibile", "onHidden", "onMouseHoverStart", "onMouseHoverLeave"]);
     const localRef = useRef(null);
@@ -216,4 +216,3 @@ export const WithInteractions = forwardRef((_a, forwardedRef) => {
         return null;
     return cloneElement(children, Object.assign(Object.assign({}, restProps), { ref: mergeRefs(localRef, forwardedRef, (_b = children.props) === null || _b === void 0 ? void 0 : _b.ref) }));
 });
-WithInteractions.displayName = "WithInteractions";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yakad/ui",
-    "version": "1.3.112",
+    "version": "1.3.114",
     "private": false,
     "author": "Natiq",
     "description": "UI components for NextJS/React",