@yakad/ui 1.3.165 → 1.3.166

package/dist/ActiveOnVisible/ActiveOnVisible.d.ts

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

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, ...restProps }: AppBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppBar({ align, overflow, position, size, blur, className, children, ...restProps }: AppBarProps): import("react").JSX.Element;

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, ...restProps }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+export declare function Avatar({ src, className, ...restProps }: AvatarProps): React.JSX.Element;

package/dist/Avatar/Avatar.js

@@ -12,9 +12,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from "classnames";
 import styles from "./Avatar.module.css";
-import { Symbol } from "@yakad/symbols";
+import { Material } from "@yakad/symbols";
 export function Avatar(_a) {
     var { src, className } = _a, restProps = __rest(_a, ["src", "className"]);
     const joinedClassNames = classNames(styles.profileContainer, className);
-    return (_jsx("div", Object.assign({}, 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(Material, { 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, ...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.Element;

package/dist/Button/Button.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
-import { LoadingIcon } from "..";
+import { Spinner } from "@yakad/symbols";
 import boxingStyles from "../boxing.module.css";
 import styles from "./Button.module.css";
 export function Button(_a) {
@@ -21,5 +21,5 @@ export function Button(_a) {
     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({ 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] })));
+                }), children: _jsx(Spinner, { 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, ...restProps }: CardProps): import("react/jsx-runtime").JSX.Element;
+export declare function Card({ blur, level, hoverEffect, className, children, ...restProps }: CardProps): import("react").JSX.Element;

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, ...restProps }: CheckBoxProps): import("react/jsx-runtime").JSX.Element;
+export declare function CheckBox({ label, className, style, ...restProps }: CheckBoxProps): import("react").JSX.Element;
 export {};

package/dist/CheckBox/CheckBox.js

@@ -11,11 +11,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
-import { Symbol } from "@yakad/symbols";
+import { Material } from "@yakad/symbols";
 import boxingStyles from "../boxing.module.css";
 import styles from "./CheckBox.module.css";
 export function CheckBox(_a) {
     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({}, 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(Material, { className: styles.symbolChecked, icon: "check_box" }), _jsx(Material, { className: styles.symbolUnChecked, icon: "check_box_outline_blank" })] })] }));
 }

package/dist/CodeBox/CodeBox.d.ts

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

package/dist/CodeBox/CodeBox.js

@@ -11,12 +11,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
-import { Symbol } from "@yakad/symbols";
+import { Material } from "@yakad/symbols";
 import { Button, Card } from "..";
 import boxingStyles from "../boxing.module.css";
 import styles from "./CodeBox.module.css";
 export function CodeBox(_a) {
     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({}, 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(Material, { 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, ...restProps }: CodeFieldsProps): import("react/jsx-runtime").JSX.Element;
+export declare function CodeField({ length, onFilled, autoComplete, pattern, onInput, className, style, ...restProps }: CodeFieldsProps): import("react").JSX.Element;
 export {};

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, ...restProps }: ContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare function Container({ size, align, className, children, ...restProps }: ContainerProps): import("react").JSX.Element;

package/dist/Display/Display.d.ts

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

package/dist/Dropdown/Dropdown.d.ts

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

package/dist/Footer/Footer.d.ts

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

package/dist/Form/Form.d.ts

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

package/dist/GridContainer/GridContainer.d.ts

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

package/dist/GridItem/GridItem.d.ts

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

package/dist/Hr/Hr.d.ts

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

package/dist/InputField/InputField.d.ts

@@ -1,7 +1,15 @@
-import React from "react";
-export interface InputFieldProps extends React.InputHTMLAttributes<HTMLInputElement> {
-    variant?: "outlined" | "filled";
-    boxSize?: "small" | "normal";
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+import { Input } from "./input";
+declare const inputFieldVariants: (props?: ({
+    variant?: "filled" | "outlined" | null | undefined;
+    boxSize?: "small" | "normal" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export interface InputFieldProps extends Omit<React.ComponentProps<typeof Input>, "size">, VariantProps<typeof inputFieldVariants> {
     ref?: React.Ref<HTMLInputElement>;
 }
-export declare function InputField({ variant, boxSize, placeholder, className, ...restProps }: InputFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function InputField({ variant, boxSize, placeholder, className, ref, ...restProps }: InputFieldProps): React.JSX.Element;
+export declare namespace InputField {
+    var displayName: string;
+}
+export { inputFieldVariants };

package/dist/InputField/InputField.js

@@ -10,11 +10,41 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import classNames from "classnames";
-import boxingStyles from "../boxing.module.css";
-import styles from "./InputField.module.css";
+import { cva } from "class-variance-authority";
+import { cn } from "./cn";
+import { Input } from "./input";
+const inputFieldVariants = cva("peer w-full transition-colors placeholder:text-transparent focus-visible:ring-offset-0", {
+    variants: {
+        variant: {
+            outlined: "border border-input bg-transparent focus-visible:ring-1 focus-visible:ring-ring",
+            filled: "rounded-b-none border-0 border-b-2 border-input bg-muted focus-visible:ring-0 focus-visible:border-primary",
+        },
+        boxSize: {
+            small: "h-8 px-2 text-sm",
+            normal: "h-10 px-3 text-base",
+        },
+    },
+    defaultVariants: {
+        variant: "outlined",
+        boxSize: "normal",
+    },
+});
+const labelVariants = cva("pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground transition-all " +
+    "peer-focus:top-0 peer-focus:-translate-y-1/2 peer-focus:bg-background peer-focus:px-1 peer-focus:text-xs peer-focus:text-primary " +
+    "peer-[:not(:placeholder-shown)]:top-0 peer-[:not(:placeholder-shown)]:-translate-y-1/2 peer-[:not(:placeholder-shown)]:bg-background peer-[:not(:placeholder-shown)]:px-1 peer-[:not(:placeholder-shown)]:text-xs", {
+    variants: {
+        boxSize: {
+            small: "text-sm",
+            normal: "text-base",
+        },
+    },
+    defaultVariants: {
+        boxSize: "normal",
+    },
+});
 export function InputField(_a) {
-    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({}, restProps, { className: joinedClassNames, placeholder: " " })), placeholder && (_jsx("label", { className: styles.label, children: placeholder }))] }));
+    var { variant = "outlined", boxSize = "normal", placeholder, className, ref } = _a, restProps = __rest(_a, ["variant", "boxSize", "placeholder", "className", "ref"]);
+    return (_jsxs("div", { className: "relative w-full", children: [_jsx(Input, Object.assign({ ref: ref, placeholder: " ", className: cn(inputFieldVariants({ variant, boxSize }), className) }, restProps)), placeholder && (_jsx("label", { className: cn(labelVariants({ boxSize })), children: placeholder }))] }));
 }
+InputField.displayName = "InputField";
+export { inputFieldVariants };

package/dist/InputField/cn.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/InputField/cn.js

@@ -0,0 +1,5 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/InputField/input.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+export interface InputProps extends React.ComponentProps<"input"> {
+}
+export declare function Input({ className, type, ...props }: InputProps): React.JSX.Element;
+export declare namespace Input {
+    var displayName: string;
+}

package/dist/InputField/input.js

@@ -0,0 +1,18 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "./cn";
+export function Input(_a) {
+    var { className, type } = _a, props = __rest(_a, ["className", "type"]);
+    return (_jsx("input", Object.assign({ type: type, "data-slot": "input", className: cn("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", className) }, props)));
+}
+Input.displayName = "Input";

package/dist/List/List.d.ts

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

package/dist/ListItem/ListItem.d.ts

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

package/dist/Main/Main.d.ts

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

package/dist/Navigation/Navigation.d.ts

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

package/dist/Popup/Popup.d.ts

@@ -5,4 +5,4 @@ export interface PopupProps extends CardProps, OverlayProps {
     teleport?: boolean;
     ref?: React.Ref<HTMLDivElement>;
 }
-export declare function Popup({ align, onClose, heading, className, children, teleport, ref, ...restProps }: PopupProps): import("react/jsx-runtime").JSX.Element;
+export declare function Popup({ align, onClose, heading, className, children, teleport, ref, ...restProps }: PopupProps): import("react").JSX.Element;

package/dist/Popup/Popup.js

@@ -13,7 +13,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useImperativeHandle } from "react";
 import classNames from "classnames";
-import { Symbol } from "@yakad/symbols";
+import { Material } from "@yakad/symbols";
 import { Button, Card, Row, Screen, Spacer, Stack, Text, } from "..";
 import styles from "./Popup.module.css";
 import { createPortal } from "react-dom";
@@ -35,6 +35,6 @@ export function Popup(_a) {
         };
     }, []);
     useImperativeHandle(ref, () => localRef.current);
-    const popup = () => (_jsx(Screen, { align: "center", className: styles.popupscreen, children: _jsxs(Card, Object.assign({ ref: localRef }, restProps, { className: classNames(styles.popup, className), children: [_jsxs(Row, { style: { marginBottom: "2rem" }, children: [_jsx(Text, { variant: "heading4", children: heading }), _jsx(Spacer, {}), _jsx(Button, { title: "Close", icon: _jsx(Symbol, { icon: "close" }), onClick: onClose })] }), _jsx(Stack, { align: align, style: { width: "100%", overflowY: "auto" }, children: children })] })) }));
+    const popup = () => (_jsx(Screen, { align: "center", className: styles.popupscreen, children: _jsxs(Card, Object.assign({ ref: localRef }, restProps, { className: classNames(styles.popup, className), children: [_jsxs(Row, { style: { marginBottom: "2rem" }, children: [_jsx(Text, { variant: "heading4", children: heading }), _jsx(Spacer, {}), _jsx(Button, { title: "Close", icon: _jsx(Material, { icon: "close" }), onClick: onClose })] }), _jsx(Stack, { align: align, style: { width: "100%", overflowY: "auto" }, children: children })] })) }));
     return teleport ? doTeleport() : popup();
 }

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, ...restProps }: RadioButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function RadioButton({ dataFromRadioGroup, label, onClick, className, ...restProps }: RadioButtonProps): import("react").JSX.Element;
 export {};

package/dist/RadioButton/RadioButton.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
-import { Symbol } from "@yakad/symbols";
+import { Material } from "@yakad/symbols";
 import { Button } from "..";
 import styles from "./RadioButton.module.css";
 export function RadioButton(_a) {
@@ -25,7 +25,7 @@ export function RadioButton(_a) {
         dataFromRadioGroup === null || dataFromRadioGroup === void 0 ? void 0 : dataFromRadioGroup.onSelect();
         onClick;
     };
-    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)
+    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(Material, { 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({}, 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

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

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, ...restProps }: RenderByScrollProps): import("react/jsx-runtime").JSX.Element;
+extraRender, jumpToIndex, stopNewRenders, newChildRendered, style, children, ...restProps }: RenderByScrollProps): React.JSX.Element;

package/dist/Row/Row.d.ts

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

package/dist/Screen/Screen.d.ts

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

package/dist/Select/Select.d.ts

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

package/dist/Spacer/Spacer.d.ts

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

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, ...restProps }: StackProps): import("react/jsx-runtime").JSX.Element;
+export declare function Stack({ align, fullWidthOnParentDemand, className, children, ...restProps }: StackProps): import("react").JSX.Element;

package/dist/SvgIcon/SvgIcon.d.ts

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

package/dist/Table/Table.d.ts

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

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, ...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 declare function H1({ variant, palette, className, children, ...restProps }: TextProps<HTMLHeadingElement>): import("react").JSX.Element;
+export declare function H2({ variant, palette, className, children, ...restProps }: TextProps<HTMLHeadingElement>): import("react").JSX.Element;
+export declare function H3({ variant, palette, className, children, ...restProps }: TextProps<HTMLHeadingElement>): import("react").JSX.Element;
+export declare function H4({ variant, palette, className, children, ...restProps }: TextProps<HTMLHeadingElement>): import("react").JSX.Element;
+export declare function H5({ variant, palette, className, children, ...restProps }: TextProps<HTMLHeadingElement>): import("react").JSX.Element;
+export declare function H6({ variant, palette, className, children, ...restProps }: TextProps<HTMLHeadingElement>): import("react").JSX.Element;
+export declare function P({ variant, palette, className, children, ...restProps }: TextProps<HTMLParagraphElement>): import("react").JSX.Element;
+export declare function Span({ variant, palette, className, children, ...restProps }: TextProps<HTMLSpanElement>): import("react").JSX.Element;
+export declare function Text({ variant, palette, className, children, ...restProps }: TextProps<HTMLDivElement>): import("react").JSX.Element;
 export {};

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, ...restProps }: ThemeProps): import("react/jsx-runtime").JSX.Element;
+export declare function Theme({ align, darkStyle, color, zoom, className, children, ...restProps }: ThemeProps): import("react").JSX.Element;

package/dist/WithOverlay/WithOverlay.d.ts

@@ -11,5 +11,5 @@ export interface WithOverlayProps extends StackProps {
     children?: React.ReactElement;
     ref?: React.Ref<HTMLDivElement>;
 }
-export declare function WithOverlay({ trigger, overlay, children, onClick, ref, ...restProps }: WithOverlayProps): import("react/jsx-runtime").JSX.Element;
+export declare function WithOverlay({ trigger, overlay, children, onClick, ref, ...restProps }: WithOverlayProps): import("react").JSX.Element;
 export {};

package/dist/index.d.ts

@@ -16,7 +16,6 @@ export * from "./List/List";
 export * from "./ListItem/ListItem";
 export * from "./Table/Table";
 export * from "./Button/Button";
-export * from "./LoadingIcon/LoadingIcon";
 export * from "./SvgIcon/SvgIcon";
 export * from "./Text/Text";
 export * from "./Form/Form";

package/dist/index.js

@@ -19,7 +19,6 @@ export * from "./List/List";
 export * from "./ListItem/ListItem";
 export * from "./Table/Table";
 export * from "./Button/Button";
-export * from "./LoadingIcon/LoadingIcon";
 export * from "./SvgIcon/SvgIcon";
 export * from "./Text/Text";
 // Form Components

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yakad/ui",
-    "version": "1.3.165",
+    "version": "1.3.166",
     "private": false,
     "author": "Natiq",
     "description": "UI components for NextJS/React",
@@ -33,9 +33,12 @@
     },
     "dependencies": {
         "@yakad/lib": "1.0.23",
-        "@yakad/symbols": "1.0.29",
+        "@yakad/symbols": "1.0.42",
         "@yakad/use-interactions": "1.0.0",
-        "classnames": "2.5.1"
+        "class-variance-authority": "^0.7.1",
+        "classnames": "2.5.1",
+        "clsx": "^2.1.1",
+        "tailwind-merge": "^3.6.0"
     },
     "peerDependencies": {
         "react": "^19.2.0",
@@ -48,4 +51,4 @@
         "react": "^19.0.0",
         "react-dom": "^19.0.0"
     }
-}
+}

package/dist/InputField/InputField.module.css

@@ -1,212 +0,0 @@
-.div {
-    position: relative;
-    display: inline-block;
-    box-sizing: border-box;
-    padding-top: 0.6rem;
-}
-.input {
-    box-sizing: border-box;
-    width: 100%;
-    margin: 0rem;
-    border-image: initial;
-    background-color: rgb(var(--surfaceContainerHighestColor, 230 224 233));
-    color: rgb(var(--onSurfaceColor, 28 27 31) / 0.87);
-    caret-color: rgb(var(--primaryColor, 11 87 208));
-}
-
-.input:focus {
-    outline: none;
-}
-
-.input ~ .label {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: block;
-    width: 100%;
-    height: 100%;
-    font-size: 1.5rem;
-    color: rgb(var(--onSurfaceColor, 28 27 31) / 0.6);
-    transition: 0.3s;
-    pointer-events: none;
-}
-@media (pointer: fine) {
-    .input:hover ~ .label {
-        color: rgb(var(--onSurfaceVariantColor, 73 69 78));
-    }
-}
-.input:focus ~ .label {
-    color: rgb(var(--primaryColor, 11 87 208));
-}
-.input:disabled ~ .label {
-    color: rgb(var(--onSurfaceColor, 28 27 31) / 0.38);
-}
-.input:invalid ~ .label,
-.input:invalid:focus ~ .label {
-    color: rgb(var(--errorColor, 11 87 208));
-}
-
-/********************************************* OutLined */
-.input.outlined {
-    height: 5rem;
-    padding: 1.5rem 1.3rem;
-    border-width: 0.1rem;
-    border-style: solid;
-    border-color: rgb(var(--onSurfaceColor, 28 27 31) / 0.6);
-    border-radius: 0.4rem;
-    background-color: transparent;
-}
-.input.outlined.small {
-    padding: 0.75rem 1.3rem;
-    height: 3.5rem;
-}
-@media (pointer: fine) {
-    .input.outlined:hover {
-        border-color: rgb(var(--onSurfaceVariantColor, 73 69 78));
-    }
-}
-.input.outlined:focus {
-    border-width: 0.2rem;
-    border-color: rgb(var(--primaryColor, 11 87 208));
-}
-.input.outlined:disabled {
-    border-color: rgb(var(--onSurfaceColor, 28 27 31) / 0.38);
-}
-.input.outlined:invalid {
-    border-color: rgb(var(--errorColor, 11 87 208));
-}
-.input.outlined:invalid:focus {
-    border-color: rgb(var(--errorColor, 11 87 208));
-}
-.input.outlined::placeholder {
-    color: transparent;
-}
-.input.outlined.havePlaceHolder:focus,
-.input.outlined.havePlaceHolder:not(:placeholder-shown) {
-    border-top-color: transparent;
-}
-
-.input.outlined ~ .label {
-    display: flex;
-    border-color: rgb(var(--onSurfaceColor, 28 27 31) / 0.6);
-    width: 100%;
-    max-height: 100%;
-    line-height: 6rem;
-}
-.input.outlined.small ~ .label {
-    line-height: 4.5rem;
-}
-.input.outlined:focus ~ .label,
-.input.outlined:not(:placeholder-shown) ~ .label {
-    font-size: 1.1rem;
-    line-height: 1.5rem;
-}
-
-.input.outlined ~ .label::before,
-.input.outlined ~ .label::after {
-    margin-top: 0.6rem;
-    border-top-width: 0.1rem;
-    border-top-style: solid;
-    border-color: transparent;
-    content: "";
-}
-.input.outlined:not(:placeholder-shown) ~ .label::before,
-.input.outlined:not(:placeholder-shown) ~ .label::after {
-    border-color: rgb(var(--onSurfaceColor, 28 27 31) / 0.6);
-}
-.input.outlined:invalid:not(:placeholder-shown) ~ .label::before,
-.input.outlined:invalid:not(:placeholder-shown) ~ .label::after {
-    border-color: rgb(var(--errorColor, 11 87 208));
-}
-.input.outlined ~ .label::before {
-    width: 1rem;
-    margin-right: 1.2rem;
-    border-radius: 0.4rem 0rem;
-}
-.input.outlined ~ .label::after {
-    width: 100%;
-    margin-left: 1.2rem;
-    border-radius: 0rem 0.4rem;
-}
-.input.outlined:focus ~ .label::before,
-.input.outlined:focus ~ .label::after {
-    border-width: 0.2rem;
-    border-top-color: rgb(var(--primaryColor, 11 87 208));
-}
-.input.outlined:invalid:focus ~ .label::before,
-.input.outlined:invalid:focus ~ .label::after {
-    border-color: rgb(var(--errorColor, 11 87 208));
-}
-
-/********************************************* Filled */
-.input.filled {
-    height: 5rem;
-    padding: 0 1.2rem;
-    border: none;
-    border-bottom: solid 0.1rem rgb(var(--onSurfaceColor, 28 27 31) / 0.6);
-    border-radius: 0.4rem 0.4rem 0rem 0rem;
-    background-color: rgb(var(--onSurfaceColor, 28 27 31) / 0.04);
-}
-.input.filled.small {
-    height: 3.5rem;
-}
-@media (pointer: fine) {
-    .input.input.filled:hover {
-        border-color: rgb(var(--onSurfaceVariantColor, 73 69 78));
-        background-color: rgb(var(--onSurfaceVariantColor, 73 69 78) / 0.04);
-    }
-}
-.input.filled:disabled {
-    border-bottom: solid 0.1rem rgb(var(--onSurfaceColor, 28 27 31) / 0.38);
-}
-.input.filled:invalid {
-    border-bottom-color: rgb(var(--errorColor, 11 87 208));
-}
-.input.filled.havePlaceHolder {
-    padding: 2rem 1.2rem 0.5rem;
-}
-.input.filled.small.havePlaceHolder {
-    padding: 1.5rem 1.2rem 0.5rem;
-}
-
-.input.filled::placeholder {
-    color: transparent;
-}
-
-.input.filled ~ .label {
-    display: block;
-    box-sizing: border-box;
-    line-height: 6rem;
-    padding: 0 1rem;
-}
-.input.filled.small ~ .label {
-    line-height: 4.5rem;
-}
-.input.filled:focus ~ .label,
-.input.filled:not(:placeholder-shown) ~ .label {
-    font-size: 1.1rem;
-    line-height: 4rem;
-}
-.input.filled:focus.small ~ .label,
-.input.filled.small:not(:placeholder-shown) ~ .label {
-    line-height: 3rem;
-}
-.input.filled ~ .label::after {
-    position: absolute;
-    left: 0rem;
-    content: "";
-    bottom: 0rem;
-    width: 100%;
-    height: 0.2rem;
-    display: inline-block;
-    background-color: rgb(var(--primaryColor, 11 87 208));
-    transform: scaleX(0);
-    transition: transform 0.3s ease 0s;
-}
-.input.filled:focus ~ .label::after {
-    transform: scale(1);
-    content: "";
-}
-.input.filled:invalid ~ .label::after {
-    background-color: rgb(var(--errorColor, 11 87 208));
-}

package/dist/LoadingIcon/LoadingIcon.d.ts

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

package/dist/LoadingIcon/LoadingIcon.js

@@ -1,19 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-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 } = _a, restProps = __rest(_a, ["size", "variant", "className"]);
-    const joinedClassNames = classNames(styles.loadingIcon, styles[size], styles[variant], className);
-    return (_jsx("div", Object.assign({}, restProps, { className: joinedClassNames, children: _jsx("div", {}) })));
-}

package/dist/LoadingIcon/LoadingIcon.module.css

@@ -1,98 +0,0 @@
-.extraSmall {
-    --size: 1.2rem;
-}
-.small {
-    --size: 2rem;
-}
-.medium {
-    --size: 2.4rem;
-}
-.large {
-    --size: 3rem;
-}
-.extraLarge {
-    --size: 5rem;
-}
-
-.loadingIcon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--size);
-    height: var(--size);
-    margin: auto;
-    box-sizing: border-box;
-    --color: #7d7d7d;
-}
-.spinner div {
-    display: flex;
-    width: 75%;
-    height: 75%;
-    --spinner-border: calc(var(--size) / 8);
-    border-top: var(--spinner-border) solid var(--color);
-    border-right: var(--spinner-border) solid transparent;
-    border-bottom: none;
-    border-left: none;
-    border-radius: 50%;
-    animation: spinner 1000ms linear infinite;
-}
-@keyframes spinner {
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-.dots div {
-    width: 20%;
-    height: 20%;
-    border-radius: 50%;
-    background-color: var(--color);
-    --dots-space: calc(var(--size) / 3);
-    --dots-space-negative: calc(0rem - (var(--size) / 3));
-    box-shadow: var(--dots-space) 0 var(--color),
-        var(--dots-space-negative) 0 var(--color);
-    position: relative;
-    animation: flash 0.6s ease-out infinite alternate;
-}
-@keyframes flash {
-    0% {
-        background-color: var(--color);
-        box-shadow: var(--dots-space) 0 var(--color),
-            var(--dots-space-negative) 0 transparent;
-    }
-    50% {
-        background-color: transparent;
-        box-shadow: var(--dots-space) 0 var(--color),
-            var(--dots-space-negative) 0 var(--color);
-    }
-    100% {
-        background-color: var(--color);
-        box-shadow: var(--dots-space) 0 transparent,
-            var(--dots-space-negative) 0 var(--color);
-    }
-}
-
-.scaleOut div {
-    width: 90%;
-    height: 90%;
-    border-radius: 50%;
-    background-color: var(--color);
-    animation: sk-scaleout 1s infinite ease-in-out;
-}
-@keyframes sk-scaleout {
-    0% {
-        transform: scale(0);
-        opacity: 1;
-    }
-    5% {
-        transform: scale(0);
-        opacity: 1;
-    }
-    50% {
-        opacity: 0.9;
-    }
-    100% {
-        transform: scale(1);
-        opacity: 0;
-    }
-}