@yakad/ui 1.3.145 → 1.3.147

package/dist/Button/Button.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    fullWidth?: boolean;
+    fullWidthOnParentDemand?: boolean;
     size?: "small" | "medium" | "large";
     variant?: "text" | "outlined" | "filled" | "filledtonal" | "tonal" | "elevated" | "link" | "fab";
     borderStyle?: "none" | "semi" | "squircle" | "rounded";

package/dist/Button/Button.js

@@ -15,10 +15,10 @@ import classNames from "classnames";
 import { LoadingIcon } from "..";
 import styles from "./Button.module.css";
 export const Button = forwardRef(function Button(_a, ref) {
-    var { fullWidth = false, size = "medium", variant = "text", borderStyle = "rounded", icon, iconPosition = "start", loadingPosition = "auto", loadingVariant, className, children } = _a, restProps = __rest(_a, ["fullWidth", "size", "variant", "borderStyle", "icon", "iconPosition", "loadingPosition", "loadingVariant", "className", "children"]);
+    var { fullWidthOnParentDemand = false, size = "medium", variant = "text", borderStyle = "rounded", icon, iconPosition = "start", loadingPosition = "auto", loadingVariant, className, children } = _a, restProps = __rest(_a, ["fullWidthOnParentDemand", "size", "variant", "borderStyle", "icon", "iconPosition", "loadingPosition", "loadingVariant", "className", "children"]);
     const childrenFirst = iconPosition === "end";
     const isloadingPositionCenter = !icon || loadingPosition === "center";
-    const joinedClassNames = classNames({ fullWidth: fullWidth }, styles.button, styles[variant], { [styles.loading]: loadingVariant }, { [styles.loadingPositionCenter]: isloadingPositionCenter }, styles[size], styles[borderStyle], { [styles.iconButton]: !children && icon }, className);
+    const joinedClassNames = classNames({ fullWidthOnParentDemand: fullWidthOnParentDemand }, styles.button, styles[variant], { [styles.loading]: loadingVariant }, { [styles.loadingPositionCenter]: isloadingPositionCenter }, styles[size], styles[borderStyle], { [styles.iconButton]: !children && icon }, className);
     return (_jsxs("button", Object.assign({ ref: ref, className: joinedClassNames }, restProps, { children: [childrenFirst && children, loadingVariant && (_jsx("div", { className: classNames(styles.displayOnDisabled, {
                     [styles.positionCenter]: isloadingPositionCenter,
                 }), children: _jsx(LoadingIcon, { size: size, variant: loadingVariant }) })), icon, !childrenFirst && children] })));

package/dist/Card/Card.d.ts

@@ -2,7 +2,7 @@
 import "./card.css";
 export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
     align?: "start" | "space" | "center" | "end";
-    fullWidth?: boolean;
+    fullWidthOnParentDemand?: boolean;
     blur?: boolean;
     level?: "low" | "mid" | "high";
 }

package/dist/Card/Card.js

@@ -16,8 +16,8 @@ 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, fullWidth = true, blur, level, className, children } = _a, restProps = __rest(_a, ["align", "fullWidth", "blur", "level", "className", "children"]);
-    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { fullWidth: fullWidth }, styles.card, { [styles.blur]: blur }, {
+    var { align, fullWidthOnParentDemand = true, blur, level, className, children } = _a, restProps = __rest(_a, ["align", "fullWidthOnParentDemand", "blur", "level", "className", "children"]);
+    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { demandChildsToBeFullWidth: true }, { fullWidthOnParentDemand: fullWidthOnParentDemand }, styles.card, { [styles.blur]: blur }, {
         yakadCardAutoLevel: level === undefined,
         yakadCardLowLevel: level === "low",
         yakadCardMidLevel: level === "mid",

package/dist/Container/Container.js

@@ -16,6 +16,6 @@ import boxingStyles from "../boxing.module.css";
 import styles from "./Container.module.css";
 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);
+    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { demandChildsToBeFullWidth: true }, styles.container, styles[size], className);
     return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });

package/dist/Display/Display.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export interface DisplayProps extends React.HTMLAttributes<HTMLDivElement> {
     align?: "start" | "space" | "center" | "end";
-    fullWidth?: boolean;
+    fullWidthOnParentDemand?: boolean;
     minWidth?: "xs" | "sm" | "md" | "lg" | "xl";
     maxWidth?: "xs" | "sm" | "md" | "lg" | "xl";
     children?: React.ReactNode;

package/dist/Display/Display.js

@@ -15,7 +15,7 @@ import classNames from "classnames";
 import boxingStyles from "../boxing.module.css";
 import styles from "./Display.module.css";
 export const Display = forwardRef(function Display(_a, ref) {
-    var { align, fullWidth = true, minWidth, maxWidth, className, children } = _a, restProps = __rest(_a, ["align", "fullWidth", "minWidth", "maxWidth", "className", "children"]);
-    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { fullWidth: fullWidth }, { [styles[`${minWidth}MinWidth`]]: minWidth }, { [styles[`${maxWidth}MaxWidth`]]: maxWidth }, className);
+    var { align, fullWidthOnParentDemand = true, minWidth, maxWidth, className, children } = _a, restProps = __rest(_a, ["align", "fullWidthOnParentDemand", "minWidth", "maxWidth", "className", "children"]);
+    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { demandChildsToBeFullWidth: true }, { fullWidthOnParentDemand: fullWidthOnParentDemand }, { [styles[`${minWidth}MinWidth`]]: minWidth }, { [styles[`${maxWidth}MaxWidth`]]: maxWidth }, className);
     return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });

package/dist/Dropdown/Dropdown.js

@@ -16,7 +16,7 @@ import classNames from "classnames";
 import { Card, WithInteractions } from "..";
 import styles from "./Dropdown.module.css";
 export const Dropdown = forwardRef(function Dropdown(_a, forwardedRef) {
-    var { fullWidth = false, blur, level = "high", triggerref, onClose, className, style, children } = _a, restProps = __rest(_a, ["fullWidth", "blur", "level", "triggerref", "onClose", "className", "style", "children"]);
+    var { level = "high", triggerref, onClose, className, style, children } = _a, restProps = __rest(_a, ["level", "triggerref", "onClose", "className", "style", "children"]);
     const fallbackTriggerRef = useRef(null);
     const dropdownRef = useRef(null);
     const placementTargetRef = triggerref || fallbackTriggerRef;
@@ -71,7 +71,7 @@ export const Dropdown = forwardRef(function Dropdown(_a, forwardedRef) {
             setIsPlaced(true);
         }
     }, [children, placementTargetRef]);
-    return (_jsxs(_Fragment, { children: [!triggerref && _jsx("div", { ref: fallbackTriggerRef }), _jsx(WithInteractions, { onOutsideClick: onClose, children: _jsx(Card, Object.assign({ ref: dropdownRef, fullWidth: fullWidth, 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, {
+    return (_jsxs(_Fragment, { children: [!triggerref && _jsx("div", { ref: fallbackTriggerRef }), _jsx(WithInteractions, { onOutsideClick: onClose, children: _jsx(Card, Object.assign({ ref: dropdownRef, 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,

package/dist/Form/Form.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export interface FormProps extends React.HTMLAttributes<HTMLFormElement> {
     align?: "start" | "space" | "center" | "end";
-    fullWidth?: boolean;
+    fullWidthOnParentDemand?: boolean;
     children?: React.ReactNode;
 }
 export declare const Form: import("react").ForwardRefExoticComponent<FormProps & import("react").RefAttributes<HTMLFormElement>>;

package/dist/Form/Form.js

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

package/dist/GridItem/GridItem.js

@@ -16,6 +16,6 @@ import boxingStyles from "../boxing.module.css";
 import styles from "./GridItem.module.css";
 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);
+    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { demandChildsToBeFullWidth: true }, styles.gridItem, { [styles[`xs${xs}`]]: xs }, { [styles[`sm${sm}`]]: sm }, { [styles[`md${md}`]]: md }, { [styles[`lg${lg}`]]: lg }, { [styles[`xl${xl}`]]: xl }, className);
     return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });

package/dist/ListItem/ListItem.js

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

package/dist/Main/Main.js

@@ -16,6 +16,6 @@ import boxingStyles from "../boxing.module.css";
 import styles from "./Main.module.css";
 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);
+    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { demandChildsToBeFullWidth: true }, styles.main, { [styles.navOpen]: navOpen }, className);
     return (_jsx("main", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });

package/dist/Navigation/Navigation.js

@@ -16,7 +16,7 @@ import boxingStyles from "../boxing.module.css";
 import styles from "./Navigation.module.css";
 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], {
+    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { demandChildsToBeFullWidth: true }, styles.navigation, styles[anchor], {
         [styles.open]: open,
     }, className);
     return (_jsx("nav", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));

package/dist/Popup/Popup.js

@@ -18,5 +18,5 @@ import { Button, Card, Row, Screen, Spacer, Stack, Text, WithInteractions, } fro
 import styles from "./Popup.module.css";
 export const Popup = forwardRef(function Popup(_a, ref) {
     var { align, onClose, heading, className, children } = _a, restProps = __rest(_a, ["align", "onClose", "heading", "className", "children"]);
-    return (_jsx(Screen, { align: "center", className: styles.popupscreen, children: _jsx(WithInteractions, { onOutsideClick: onClose, children: _jsxs(Card, Object.assign({ ref: ref }, 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 })] })) }) }));
+    return (_jsx(Screen, { align: "center", className: styles.popupscreen, children: _jsx(WithInteractions, { align: "center", onOutsideClick: onClose, children: _jsxs(Card, Object.assign({ ref: ref }, 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 })] })) }) }));
 });

package/dist/Row/Row.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export interface RowProps extends React.HTMLAttributes<HTMLDivElement> {
     align?: "start" | "space" | "center" | "end";
-    fullWidth?: boolean;
+    fullWidthOnParentDemand?: boolean;
     overflow?: "shrink" | "wrap" | "scroll";
     size?: "xs" | "sm" | "md" | "lg" | "xl";
     children?: React.ReactNode;

package/dist/Row/Row.js

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

package/dist/Screen/Screen.js

@@ -16,6 +16,6 @@ import boxingStyles from "../boxing.module.css";
 import styles from "./Screen.module.css";
 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);
+    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { demandChildsToBeFullWidth: true }, styles.screen, className);
     return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });

package/dist/Stack/Stack.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export interface StackProps extends React.HTMLAttributes<HTMLDivElement> {
     align?: "start" | "space" | "center" | "end";
-    fullWidth?: boolean;
+    fullWidthOnParentDemand?: boolean;
     children?: React.ReactNode;
 }
 export declare const Stack: import("react").ForwardRefExoticComponent<StackProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Stack/Stack.js

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

package/dist/Theme/Theme.js

@@ -22,6 +22,6 @@ export const Theme = forwardRef(function Theme(_a, ref) {
     useEffect(() => {
         document.documentElement.style.setProperty("font-size", zoomPercentage + "%");
     }, [zoomPercentage]);
-    const joinedClassNames = classNames("portalRoot", boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, styles.theme, styles[darkStyle], styles[color], className);
+    const joinedClassNames = classNames({ portalRoot: true }, boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { demandChildsToBeFullWidth: true }, styles.theme, styles[darkStyle], styles[color], className);
     return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });

package/dist/WithInteractions/WithInteractions.d.ts

@@ -22,4 +22,4 @@ export interface WithInteractionsProps extends StackProps {
     onMouseHoverStart?: (e: MouseEvent) => void;
     onMouseHoverLeave?: (e: MouseEvent) => void;
 }
-export declare const WithInteractions: import("react").ForwardRefExoticComponent<WithInteractionsProps & import("react").RefAttributes<HTMLElement>>;
+export declare const WithInteractions: import("react").ForwardRefExoticComponent<WithInteractionsProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/WithOverlay/WithOverlay.d.ts

@@ -10,5 +10,5 @@ export interface WithOverlayProps extends WithInteractionsProps {
     overlay?: AllowedOverlays;
     children?: React.ReactElement;
 }
-export declare function WithOverlay({ trigger, overlay, children, onRightClick, onClick, ...restProps }: WithOverlayProps): import("react/jsx-runtime").JSX.Element;
+export declare const WithOverlay: import("react").ForwardRefExoticComponent<WithOverlayProps & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/dist/WithOverlay/WithOverlay.js

@@ -11,13 +11,15 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, cloneElement, useEffect, useRef } from "react";
-import { WithInteractions, } from "..";
+import { useState, cloneElement, useEffect, useRef, forwardRef, useImperativeHandle, } from "react";
 import { createPortal } from "react-dom";
-export function WithOverlay(_a) {
+import { WithInteractions, } from "..";
+export const WithOverlay = forwardRef(function WithOverlay(_a, forwardedRef) {
     var { trigger = "onClick", overlay, children, onRightClick, onClick } = _a, restProps = __rest(_a, ["trigger", "overlay", "children", "onRightClick", "onClick"]);
     // Get Triggers ref and send to Overlay
     const triggerRef = useRef(null);
+    // Let the parent access our DOM node
+    useImperativeHandle(forwardedRef, () => triggerRef.current);
     const [showOverlay, setShowOverlay] = useState(false);
     // Disable Body Scroll on showOverlay
     useEffect(() => {
@@ -35,7 +37,8 @@ export function WithOverlay(_a) {
                 (_b = (_a = overlay.props).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
                 setShowOverlay(false);
             },
-        }), document.getElementsByClassName("portalRoot")[0] || document.body);
+        }), document.getElementsByClassName("portalRoot")[0] ||
+            document.body);
     return (_jsxs(_Fragment, { children: [_jsx(WithInteractions, Object.assign({ ref: triggerRef }, restProps, { onRightClick: (e) => {
                     trigger === "onRightClick" && setShowOverlay(true);
                     onRightClick === null || onRightClick === void 0 ? void 0 : onRightClick(e);
@@ -43,4 +46,4 @@ export function WithOverlay(_a) {
                     trigger === "onClick" && setShowOverlay(true);
                     onClick === null || onClick === void 0 ? void 0 : onClick(e);
                 }, children: children })), showOverlay && teleport] }));
-}
+});

package/dist/boxing.module.css

@@ -1,3 +1,8 @@
+/* Full Width Childs */
+:global(.demandChildsToBeFullWidth) > :global(.fullWidthOnParentDemand) {
+    width: 100%;
+}
+
 /* Column Box */
 .flexColumnBox {
     display: flex;
@@ -21,10 +26,6 @@
     justify-content: flex-end;
     align-items: flex-end;
 }
-/* Full Width Childs */
-.flexColumnBox > :global(.fullWidth) {
-    width: 100%;
-}
 
 /* Row Box */
 .flexRowBox {

package/package.json

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