@yakad/ui 2.0.1 → 2.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yakad/ui",
-    "version": "2.0.1",
+    "version": "2.0.3",
     "private": false,
     "author": "Natiq",
     "description": "UI components for NextJS/React",
@@ -34,8 +34,15 @@
     },
     "dependencies": {
         "@material/material-color-utilities": "^0.4.0",
-        "@yakad/lib": "1.0.23",
-        "@yakad/symbols": "1.0.42",
+        "@radix-ui/react-avatar": "^1.2.6",
+        "@radix-ui/react-checkbox": "^1.3.12",
+        "@radix-ui/react-label": "^2.1.15",
+        "@radix-ui/react-navigation-menu": "^1.3.0",
+        "@radix-ui/react-radio-group": "^1.4.8",
+        "@radix-ui/react-separator": "^1.1.15",
+        "@radix-ui/react-slot": "^1.3.3",
+        "@yakad/lib": "1.0.32",
+        "@yakad/symbols": "1.0.43",
         "@yakad/use-interactions": "1.0.0",
         "class-variance-authority": "^0.7.1",
         "classnames": "2.5.1",
@@ -50,8 +57,8 @@
         "@types/css-modules": "1.0.5",
         "@types/react": "^19.0.0",
         "@types/react-dom": "^19.0.0",
-        "react": "^19.0.0",
-        "react-dom": "^19.0.0",
+        "react": "^19.2.0",
+        "react-dom": "^19.2.0",
         "tsx": "^4.23.13"
     }
 }

package/dist/Avatar/Avatar.module.css

@@ -1,32 +0,0 @@
-.profileContainer {
-    background-image: url("./default-avatar.svg");
-    position: relative;
-    width: 60px;
-    height: 60px;
-    cursor: pointer;
-    border-radius: 50%;
-    overflow: hidden;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    background-size: cover;
-    background-position: center;
-    transition: all 0.3s ease;
-}
-
-
-.editOverlay {
-    position: absolute;
-    inset: 0;
-    background-color: rgba(0, 0, 0, 0.5);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    opacity: 0;
-    transition: opacity 0.3s ease;
-    color: white;
-}
-
-.profileContainer:hover .editOverlay {
-    opacity: 1;
-}

package/dist/Avatar/default-avatar.svg

@@ -1,17 +0,0 @@
-<svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="256"
-    height="256"
-    viewBox="0 0 256 256"
-    role="img"
-    aria-label="Default avatar"
->
-    <rect width="100%" height="100%" rx="24" fill="#E6EEF8" />
-    <g transform="translate(48,40)" fill="none" fill-rule="evenodd">
-        <circle cx="80" cy="56" r="40" fill="#CBDFF6" />
-        <path
-            d="M0 152c0-44.18 35.82-80 80-80s80 35.82 80 80v8H0v-8z"
-            fill="#B6D0FB"
-        />
-    </g>
-</svg>

package/dist/Button/Button.module.css

@@ -1,190 +0,0 @@
-.button {
-    display: flex;
-    position: relative;
-    text-align: center;
-    align-items: center;
-    line-height: 2rem;
-    font-weight: 700;
-    padding: 0.5rem var(--padding);
-    border: none;
-    background: none;
-    color: inherit;
-    fill: inherit;
-    user-select: none;
-    cursor: pointer;
-    box-sizing: border-box;
-    text-decoration: none;
-}
-.small {
-    min-width: 3rem;
-    min-height: 3rem;
-    --padding: 2rem;
-    gap: 0.4rem;
-    font-size: 1.2rem;
-    --border-radius: 1.5rem;
-}
-.medium {
-    min-width: 4rem;
-    min-height: 4rem;
-    --padding: 2.4rem;
-    gap: 0.8rem;
-    font-size: 1.4rem;
-    --border-radius: 2rem;
-}
-.large {
-    min-width: 5rem;
-    min-height: 5rem;
-    --padding: 3.2rem;
-    gap: 1.1rem;
-    font-size: 1.8rem;
-    --border-radius: 2.5rem;
-}
-
-.iconButton {
-    padding: 0;
-    justify-content: center;
-}
-
-.none {
-    border-radius: 0;
-}
-.semi {
-    border-radius: 0 var(--border-radius) var(--border-radius) 0;
-}
-[dir="rtl"] .semi {
-    border-radius: var(--border-radius) 0 0 var(--border-radius);
-}
-.squircle {
-    border-radius: calc(var(--border-radius) / 2);
-}
-.rounded {
-    border-radius: var(--border-radius);
-}
-
-@media (pointer: fine) {
-    .button:hover {
-        cursor: pointer;
-        box-shadow: inset 0 0 10rem #00000010;
-        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
-    }
-}
-.button:active {
-    box-shadow: inset 0 0 10rem #7d7d7d30;
-}
-.button:invalid {
-    border: 0.1rem solid rgb(var(--errorColor, 179 38 30));
-}
-.text {
-    color: rgb(var(--primaryColor, 11 87 208));
-    fill: rgb(var(--primaryColor, 11 87 208));
-}
-
-.outlined {
-    color: rgb(var(--primaryColor, 11 87 208));
-    fill: rgb(var(--primaryColor, 11 87 208));
-    border: 0.1rem solid #7d7d7d70;
-}
-.filled {
-    background: rgb(var(--primaryColor, 11 87 208));
-    color: rgb(var(--onPrimaryColor, 255 255 255));
-    fill: rgb(var(--onPrimaryColor, 255 255 255));
-}
-.filledtonal {
-    background: rgb(var(--primaryContainerColor, 211 227 253));
-    color: rgb(var(--onPrimaryContainerColor, 4 30 73));
-    fill: rgb(var(--onPrimaryContainerColor, 4 30 73));
-}
-.tonal {
-    background: rgb(var(--tertiaryColor, 196 238 208));
-    color: rgb(var(--onTertiaryColor, 7 39 17));
-    fill: rgb(var(--onTertiaryColor, 7 39 17));
-}
-.elevated {
-    background-color: rgb(var(--onSecondaryColor, 255 255 255));
-    color: rgb(var(--primaryColor, 11 87 208));
-    fill: rgb(var(--primaryColor, 11 87 208));
-    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
-}
-.link {
-    background: transparent;
-    display: flex;
-    position: relative;
-    transition: 0.3s;
-}
-
-.small.fab {
-    border-radius: 1.1rem;
-    height: 4.6rem;
-    min-width: 4.6rem;
-    --padding: 1.2rem;
-    font-size: 1.4rem;
-}
-.medium.fab {
-    border-radius: 1.3rem;
-    height: 5.6rem;
-    min-width: 5.6rem;
-    --padding: 1.6rem;
-    font-size: 1.6rem;
-}
-.large.fab {
-    border-radius: 1.5rem;
-    height: 6.6rem;
-    min-width: 6.6rem;
-    --padding: 1.8rem;
-    font-size: 1.8rem;
-}
-.fab {
-    justify-content: center;
-    background: rgb(var(--primaryContainerColor, 211 227 253));
-    color: rgb(var(--onPrimaryContainerColor, 4 30 73));
-    fill: rgb(var(--onPrimaryContainerColor, 4, 30, 73));
-}
-.link:before {
-    content: "";
-    position: absolute;
-    bottom: 0.5rem;
-    left: 0;
-    right: 0;
-    width: 0;
-    height: 0.1rem;
-    padding: 0;
-    margin: 0 auto;
-    background-color: rgb(var(--primaryColor, 30 100 212));
-    transition: 0.3s;
-}
-
-.link:hover {
-    box-shadow: none;
-}
-.link:hover:before {
-    width: calc(100% - var(--padding));
-}
-
-.loading.loadingPositionCenter:disabled {
-    color: transparent;
-    fill: transparent;
-}
-.loading.loadingPositionCenter {
-    position: absolute;
-    left: 50%;
-    transform: translate(-50%);
-}
-
-.button:disabled {
-    cursor: default;
-    box-shadow: none;
-    box-shadow: inset 0 0 10rem #7d7d7d20;
-}
-.button.link:disabled:before {
-    display: none;
-}
-
-.loading .displayOnDisabled {
-    display: none;
-}
-.loading:disabled .displayOnDisabled {
-    display: block;
-}
-.loading:disabled .hideOnDisabled {
-    display: none;
-}

package/dist/Card/Card.module.css

@@ -1,48 +0,0 @@
-/* BackgroundColor Levels */
-.yakadCardAutoLevel,
-.yakadCardLowLevel {
-    --yakadCardBackgroundColor: var(--surfaceContainerColor);
-}
-.yakadCardAutoLevel .yakadCardAutoLevel,
-.yakadCardLowLevel .yakadCardAutoLevel,
-.yakadCardMidLevel {
-    --yakadCardBackgroundColor: var(--surfaceContainerHighColor);
-    --yakadCardBackgroundColor: var(--surfaceContainerHighColor);
-}
-.yakadCardAutoLevel .yakadCardAutoLevel .yakadCardAutoLevel,
-.yakadCardLowLevel .yakadCardAutoLevel .yakadCardAutoLevel,
-.yakadCardMidLevel .yakadCardAutoLevel,
-.yakadCardHighLevel,
-.yakadCardHighLevel .yakadCardAutoLevel {
-    --yakadCardBackgroundColor: var(--surfaceContainerHighestColor);
-}
-
-.card {
-    padding: 2rem;
-    border-radius: 2rem;
-    transition: box-shadow 0.3s ease, background-color 0.3s ease;
-}
-
-.card.elevated {
-    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-color: rgb(var(--yakadCardBackgroundColor, 230 224 233));
-    color: rgb(var(--onSurfaceColor, 28 27 31));
-    fill: rgb(var(--onSurfaceColor, 28 27 31));
-}
-
-.card.hoverEffect:hover {
-    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-color: rgb(var(--surfaceContainerHighestColor, 230 224 233));
-    cursor: pointer;
-}
-
-.card.blur {
-    background-color: color-mix(
-        in srgb,
-        rgb(var(--yakadCardBackgroundColor, 230 224 233)) 85%,
-        transparent
-    );
-    backdrop-filter: blur(0.5rem);
-}

package/dist/CheckBox/CheckBox.module.css

@@ -1,50 +0,0 @@
-.label {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    width: 4rem;
-    height: 4rem;
-    line-height: 4rem;
-    font-size: 1.6rem;
-    box-sizing: border-box;
-    user-select: none;
-    cursor: pointer;
-}
-.label.disabled {
-    cursor: default;
-}
-
-.label .input {
-    display: none;
-}
-
-.label .symbolContainer {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 3.6rem;
-    height: 3.6rem;
-    border-radius: 1.8rem;
-    margin: 0.1rem;
-    margin-inline-start: auto;
-}
-.label:hover .symbolContainer {
-    box-shadow: inset 0 0 10rem #00000010;
-    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
-}
-.label:active .symbolContainer {
-    box-shadow: inset 0 0 10rem #7d7d7d30;
-}
-.label.disabled .symbolContainer {
-    box-shadow: none;
-    box-shadow: inset 0 0 10rem #7d7d7d20;
-}
-
-.label .symbolContainer .symbolChecked,
-.label .input:checked + .symbolContainer .symbolUnChecked {
-    display: none;
-}
-.label .symbolContainer .symbolUnChecked,
-.label .input:checked + .symbolContainer .symbolChecked {
-    display: block;
-}

package/dist/CodeBox/CodeBox.d.ts

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

package/dist/CodeBox/CodeBox.js

@@ -1,22 +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, jsxs as _jsxs } from "react/jsx-runtime";
-import classNames from "classnames";
-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(Material, { icon: "copy_all" }) })] })));
-}

package/dist/CodeField/CodeField.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-type ExcludedTypes = "minLength" | "maxLength" | "type";
-export interface CodeFieldsProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedTypes> {
-    length?: number;
-    onFilled?: () => void;
-    children?: React.ReactNode;
-    ref?: React.Ref<HTMLInputElement>;
-}
-export declare function CodeField({ length, onFilled, autoComplete, pattern, onInput, className, style, ...restProps }: CodeFieldsProps): import("react").JSX.Element;
-export {};

package/dist/CodeField/CodeField.js

@@ -1,43 +0,0 @@
-"use client";
-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 boxingStyles from "../boxing.module.css";
-import styles from "./CodeField.module.css";
-function isInputFilled(event, inputLength) {
-    const targetInputElement = event.target;
-    removeUnNumberChars(targetInputElement);
-    if (inputLength === targetInputElement.value.length)
-        return true;
-    sliceOverLength(targetInputElement, inputLength);
-    return false;
-}
-function sliceOverLength(inputElement, inputLength) {
-    const targetLength = inputElement.value.length;
-    if (targetLength > inputLength)
-        inputElement.value = inputElement.value.slice(0, inputLength);
-}
-function removeUnNumberChars(inputElement) {
-    inputElement.value = inputElement.value.replace(/[^0-9]+/, "");
-}
-export function CodeField(_a) {
-    var { length = 6, onFilled, autoComplete, pattern, onInput, className, style } = _a, restProps = __rest(_a, ["length", "onFilled", "autoComplete", "pattern", "onInput", "className", "style"]);
-    const joinedClassNames = classNames({ [boxingStyles.fullWidthOnParentDemand]: true }, styles.input, className);
-    const joinedStyles = Object.assign(Object.assign({}, style), { width: `calc(1.5ch * ${length})` });
-    return (_jsx("input", Object.assign({}, restProps, { className: joinedClassNames, style: joinedStyles, type: "number", minLength: length, maxLength: length, autoComplete: autoComplete || "off", pattern: pattern || "[0-9]", onInput: (event) => {
-            if (isInputFilled(event, length)) {
-                onFilled === null || onFilled === void 0 ? void 0 : onFilled();
-            }
-            onInput === null || onInput === void 0 ? void 0 : onInput(event);
-        } })));
-}

package/dist/CodeField/CodeField.module.css

@@ -1,27 +0,0 @@
-.input {
-    box-sizing: border-box;
-    display: block;
-    border: none;
-    padding: 0;
-    margin: auto;
-    background: repeating-linear-gradient(
-            90deg,
-            #7d7d7d 0,
-            #7d7d7d 1ch,
-            transparent 0,
-            transparent 1.5ch
-        )
-        0 100%/100% 0.2rem no-repeat;
-    color: transparent;
-    text-shadow: 0 0 0 rgb(var(--secondaryColor, 98 91 113));
-    letter-spacing: 0.5ch;
-    font-size: 4rem;
-}
-.input:focus {
-    outline: none;
-}
-.input::-webkit-outer-spin-button,
-.input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-}

package/dist/Dropdown/Dropdown.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-import { CardProps, OverlayProps } from "..";
-export interface DropdownProps extends CardProps, OverlayProps {
-    teleport?: boolean;
-    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.Element;

package/dist/Dropdown/Dropdown.js

@@ -1,99 +0,0 @@
-"use client";
-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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState, useEffect, useImperativeHandle } from "react";
-import classNames from "classnames";
-import { Card } from "..";
-import styles from "./Dropdown.module.css";
-import { createPortal } from "react-dom";
-import { useOnOutsideClick } from "@yakad/use-interactions";
-export function Dropdown(_a) {
-    var { fullWidthOnParentDemand = false, // Def in Card is True
-    blur, level = "high", triggerref, onClose, className, style, children, teleport = false, ref } = _a, restProps = __rest(_a, ["fullWidthOnParentDemand", "blur", "level", "triggerref", "onClose", "className", "style", "children", "teleport", "ref"]);
-    const fallbackTriggerRef = useRef(null);
-    const dropdownRef = useRef(null);
-    const placementTargetRef = triggerref || fallbackTriggerRef;
-    // Let the parent access our DOM node
-    useImperativeHandle(ref, () => dropdownRef.current);
-    const [arrowPosition, setArrowPosition] = useState({
-        top: 0,
-        left: 0,
-    });
-    const [dropdownPosition, setDropdownPosition] = useState({
-        top: 0,
-        left: 0,
-    });
-    const [isPlacedAbove, setIsPlacedAbove] = useState(false);
-    const [isPlaced, setIsPlaced] = useState(false);
-    useEffect(() => {
-        document.body.style.overflow = "hidden";
-        return () => {
-            document.body.style.overflow = "initial";
-        };
-    }, []);
-    const doTeleport = () => {
-        const portalRoot = document.getElementsByClassName("portalRoot")[0] || document;
-        const t = portalRoot && createPortal(dropdown(), portalRoot);
-        return t;
-    };
-    useEffect(() => {
-        if ((placementTargetRef === null || placementTargetRef === void 0 ? void 0 : placementTargetRef.current) && dropdownRef.current) {
-            const placementTarget = placementTargetRef.current.getBoundingClientRect();
-            const dropdownRect = dropdownRef.current.getBoundingClientRect();
-            const padding = 10;
-            let dropdownY = placementTarget.bottom + padding;
-            let dropdownXPos = placementTarget.left + placementTarget.width / 2;
-            let arrowY = dropdownY;
-            const arrowX = dropdownXPos;
-            // Prevent overflow bottom
-            if (dropdownY + dropdownRect.height > window.innerHeight &&
-                placementTarget.top > dropdownRect.height) {
-                dropdownY = placementTarget.top - padding;
-                arrowY = placementTarget.top - padding;
-                setIsPlacedAbove(true);
-            }
-            else
-                setIsPlacedAbove(false);
-            // Prevent overflow right
-            if (dropdownXPos + dropdownRect.width / 2 >
-                window.innerWidth - padding) {
-                dropdownXPos =
-                    window.innerWidth - dropdownRect.width / 2 - padding;
-            }
-            // Prevent overflow left
-            if (dropdownXPos - dropdownRect.width / 2 < padding) {
-                dropdownXPos = dropdownRect.width / 2 + padding;
-            }
-            setDropdownPosition({
-                top: dropdownY,
-                left: dropdownXPos,
-            });
-            setArrowPosition({
-                top: arrowY,
-                left: arrowX,
-            });
-            setIsPlaced(true);
-        }
-    }, [children, placementTargetRef]);
-    useOnOutsideClick(() => {
-        onClose === null || onClose === void 0 ? void 0 : onClose();
-    }, dropdownRef);
-    const dropdown = () => (_jsxs(_Fragment, { children: [!triggerref && _jsx("div", { ref: fallbackTriggerRef }), _jsx(Card, Object.assign({ ref: dropdownRef, fullWidthOnParentDemand: fullWidthOnParentDemand, blur: blur, level: level }, restProps, { className: classNames(styles.dropdownCard, { [styles.isPlacedAbove]: isPlacedAbove }, className), style: Object.assign({ top: dropdownPosition.top, left: dropdownPosition.left, visibility: isPlaced ? "visible" : "hidden" }, style), children: children })), _jsx("span", { className: classNames(styles.arrow, {
-                    [styles.isPlacedAbove]: isPlacedAbove,
-                }, { [styles.blur]: blur }), style: {
-                    top: arrowPosition.top,
-                    left: arrowPosition.left,
-                    visibility: isPlaced ? "visible" : "hidden",
-                } })] }));
-    return teleport ? doTeleport() : dropdown();
-}

package/dist/Dropdown/Dropdown.module.css

@@ -1,39 +0,0 @@
-.dropdownCard {
-    position: fixed;
-    min-width: 6rem;
-    min-height: 10rem;
-    max-width: calc(100vw - 10rem);
-    max-height: min(50vh, 40rem);
-    transform: translate(-50%, 1rem);
-    overflow-x: auto;
-    visibility: hidden;
-    z-index: 4;
-}
-.dropdownCard.isPlacedAbove {
-    transform: translate(-50%, calc(-100% - 1rem));
-}
-
-/* Arrow */
-.arrow {
-    position: fixed;
-    width: 0;
-    height: 0;
-    border-left: 0.8rem solid transparent;
-    border-right: 0.8rem solid transparent;
-    border-bottom: 1rem solid
-        rgb(var(--surfaceContainerHighestColor, 230 224 233));
-    transform: translate(-50%, calc(-100% + 1rem));
-    visibility: hidden;
-    z-index: 4;
-}
-.arrow.isPlacedAbove {
-    transform: translate(-50%, -1rem) rotate(180deg);
-}
-.arrow.blur {
-    border-bottom: 1rem solid
-        color-mix(
-            in srgb,
-            rgb(var(--surfaceContainerHighestColor, 230 224 233)) 85%,
-            transparent
-        );
-}

package/dist/Form/Form.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-export interface FormProps extends React.HTMLAttributes<HTMLFormElement> {
-    align?: "start" | "space" | "center" | "end";
-    fullWidthOnParentDemand?: boolean;
-    children?: React.ReactNode;
-}
-export declare function Form({ align, fullWidthOnParentDemand, className, children, ...restProps }: FormProps & {
-    ref?: React.Ref<HTMLFormElement>;
-}): import("react").JSX.Element;

package/dist/Form/Form.js

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

package/dist/Form/Form.module.css

@@ -1,3 +0,0 @@
-.form {
-    gap: 2rem;
-}