@yakad/ui 1.3.113 → 1.3.115

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,8 +14,16 @@ import { forwardRef } from "react";
 import classNames from "classnames";
 import boxingStyles from "../boxing.module.css";
 import styles from "./Card.module.css";
+import "./card.css";
 export const Card = forwardRef(function Card(_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);
+    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 })));
 });

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

@@ -16,6 +16,6 @@ import { Symbol } from "@yakad/symbols";
 import styles from "./CheckBox.module.css";
 export const CheckBox = forwardRef(function CheckBox(_a, ref) {
     var { label, className, style } = _a, restProps = __rest(_a, ["label", "className", "style"]);
-    const joinedClassNames = classNames(label && "fullWidthLover", styles.label, { [styles.labeled]: label }, { [styles.disabled]: restProps.disabled }, className);
+    const joinedClassNames = classNames({ fullWidthLover: label }, styles.label, { [styles.labeled]: label }, { [styles.disabled]: restProps.disabled }, className);
     return (_jsxs("label", { className: joinedClassNames, style: style, children: [label, _jsx("input", Object.assign({ ref: ref }, restProps, { className: styles.input, type: "checkbox" })), _jsxs("div", { className: styles.symbolContainer, children: [_jsx(Symbol, { className: styles.symbolChecked, icon: "check_box" }), _jsx(Symbol, { className: styles.symbolUnChecked, icon: "check_box_outline_blank" })] })] }));
 });

package/dist/CodeBox/CodeBox.js

@@ -17,6 +17,6 @@ import { Button, Card } from "..";
 import styles from "./CodeBox.module.css";
 export const CodeBox = forwardRef(function CodeBox(_a, ref) {
     var { copyButton, className, children } = _a, restProps = __rest(_a, ["copyButton", "className", "children"]);
-    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" }) })] })));
 });

package/dist/CodeField/CodeField.js

@@ -32,7 +32,7 @@ function removeUnNumberChars(inputElement) {
 }
 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;

package/dist/Display/Display.js

@@ -15,6 +15,6 @@ import classNames from "classnames";
 import styles from "./Display.module.css";
 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 })));
 });

package/dist/Form/Form.js

@@ -16,6 +16,6 @@ import styles from "./Form.module.css";
 import boxingStyles from "../boxing.module.css";
 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 })));
 });

package/dist/InputField/InputField.js

@@ -16,5 +16,5 @@ import styles from "./InputField.module.css";
 export const InputField = forwardRef(function InputField(_a, ref) {
     var { variant = "outlined", boxSize = "normal", placeholder, className } = _a, restProps = __rest(_a, ["variant", "boxSize", "placeholder", "className"]);
     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 }))] }));
 });

package/dist/List/List.js

@@ -15,6 +15,6 @@ import classNames from "classnames";
 import styles from "./List.module.css";
 export const List = forwardRef(function List(_a, ref) {
     var { direction = "row", collapsed, className, children } = _a, restProps = __rest(_a, ["direction", "collapsed", "className", "children"]);
-    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 })));
 });

package/dist/Row/Row.js

@@ -16,6 +16,6 @@ import boxingStyles from "../boxing.module.css";
 import styles from "./Row.module.css";
 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, { fullWidthLover: overflow === "shrink" }, styles[size], className);
     return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });

package/dist/Select/Select.js

@@ -17,5 +17,5 @@ import inputStyles from "../InputField/InputField.module.css";
 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] }));
 });

package/dist/Stack/Stack.js

@@ -16,6 +16,6 @@ import boxingStyles from "../boxing.module.css";
 import styles from "./Stack.module.css";
 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 })));
 });

package/dist/Table/Table.js

@@ -15,7 +15,7 @@ import classNames from "classnames";
 import styles from "./Table.module.css";
 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 })));
 });
 export const Thead = forwardRef(function Thead(_a, ref) {

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/package.json

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