@uxf/ui 11.30.1 → 11.32.0

package/flash-messages/flash-messages.stories.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.Default = Default;
 const button_1 = require("@uxf/ui/button");
 const icon_1 = require("@uxf/ui/icon");
 const react_1 = __importDefault(require("react"));
@@ -73,4 +73,3 @@ function Default() {
                 });
             } }, "Flash message, variant success, random text")));
 }
-exports.Default = Default;

package/form-component/form-component.js

@@ -31,9 +31,9 @@ const label_1 = require("../label");
 exports.FormComponent = (0, react_1.forwardRef)((props, ref) => {
     var _a;
     const helperTextClassName = (0, cx_1.cx)("uxf-helper-text", props.errorId && classes_1.CLASSES.IS_INVALID);
-    return (react_1.default.createElement("div", { className: `uxf-form-component ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, ref: ref, "data-name": props.name },
+    return (react_1.default.createElement("div", { className: `uxf-form-component ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, "data-name": props.name, ref: ref },
         react_1.default.createElement("div", { className: "uxf-form-component__label" },
-            react_1.default.createElement(label_1.Label, { isHidden: props.hiddenLabel, isRequired: props.isRequired, htmlFor: props.inputId, form: props.form }, props.label)),
+            react_1.default.createElement(label_1.Label, { form: props.form, htmlFor: props.inputId, isHidden: props.hiddenLabel, isRequired: props.isRequired }, props.label)),
         react_1.default.createElement("div", { className: "uxf-form-component__input" },
             props.children,
             props.helperText && (react_1.default.createElement("div", { className: helperTextClassName, id: props.errorId }, props.helperText)))));

package/form-component/form-component.stories.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.Default = Default;
 const react_1 = __importDefault(require("react"));
 const form_component_1 = require("./form-component");
 exports.default = {
@@ -13,13 +13,12 @@ exports.default = {
 };
 function Default() {
     return (react_1.default.createElement("div", { className: "space-y-4" },
-        react_1.default.createElement(form_component_1.FormComponent, { inputId: "default", helperText: "helper text", label: "Default", name: "form-component" },
+        react_1.default.createElement(form_component_1.FormComponent, { helperText: "helper text", inputId: "default", label: "Default", name: "form-component" },
             react_1.default.createElement("div", null, "Default")),
-        react_1.default.createElement(form_component_1.FormComponent, { inputId: "default", helperText: "helper text", label: "Default", isRequired: true, name: "form-component-required" },
+        react_1.default.createElement(form_component_1.FormComponent, { helperText: "helper text", inputId: "default", isRequired: true, label: "Default", name: "form-component-required" },
             react_1.default.createElement("div", null, "Is required")),
-        react_1.default.createElement(form_component_1.FormComponent, { inputId: "error", helperText: "helper text", label: "Default", errorId: "error--error", isRequired: true, name: "form-component-invalid" },
+        react_1.default.createElement(form_component_1.FormComponent, { errorId: "error--error", helperText: "helper text", inputId: "error", isRequired: true, label: "Default", name: "form-component-invalid" },
             react_1.default.createElement("div", null, "Is invalid")),
-        react_1.default.createElement(form_component_1.FormComponent, { inputId: "error", helperText: "helper text", label: "Default", errorId: "error--error", hiddenLabel: true, name: "form-component-hidden-label" },
+        react_1.default.createElement(form_component_1.FormComponent, { errorId: "error--error", helperText: "helper text", hiddenLabel: true, inputId: "error", label: "Default", name: "form-component-hidden-label" },
             react_1.default.createElement("div", null, "hidden label"))));
 }
-exports.Default = Default;

package/hooks/use-async-loading.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useAsyncLoading = void 0;
+exports.useAsyncLoading = useAsyncLoading;
 const react_1 = require("react");
 function useAsyncLoading(query, initialOptions, loadOptions) {
     const [options, setOptions] = (0, react_1.useState)(initialOptions);
@@ -29,4 +29,3 @@ function useAsyncLoading(query, initialOptions, loadOptions) {
     }, [getOptions, query]);
     return options;
 }
-exports.useAsyncLoading = useAsyncLoading;

package/hooks/use-dropdown.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Placement, Strategy } from "@floating-ui/react";
 export declare function useDropdown(placement: Placement, matchWidth?: boolean, maxHeight?: number, strategy?: Strategy): {
     placement: Placement;
@@ -29,7 +28,7 @@ export declare function useDropdown(placement: Placement, matchWidth?: boolean,
         update: () => void;
         floatingStyles: import("react").CSSProperties;
         open: boolean;
-        onOpenChange: (open: boolean, event?: Event | undefined, reason?: import("@floating-ui/react").OpenChangeReason | undefined) => void;
+        onOpenChange: (open: boolean, event?: Event, reason?: import("@floating-ui/react").OpenChangeReason) => void;
         events: import("@floating-ui/react").FloatingEvents;
         dataRef: import("react").MutableRefObject<import("@floating-ui/react").ContextData>;
         nodeId: string | undefined;

package/hooks/use-dropdown.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDropdown = void 0;
+exports.useDropdown = useDropdown;
 const react_1 = require("@floating-ui/react");
 const with_unit_1 = require("@uxf/styles/units/with-unit");
 function useDropdown(placement, matchWidth = false, maxHeight, strategy) {
@@ -26,4 +26,3 @@ function useDropdown(placement, matchWidth = false, maxHeight, strategy) {
         }),
     });
 }
-exports.useDropdown = useDropdown;

package/hooks/use-input-submit.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useInputSubmit = void 0;
+exports.useInputSubmit = useInputSubmit;
 const react_1 = require("react");
 function childrenHasFocus(node) {
     node.childNodes.forEach((child) => {
@@ -37,4 +37,3 @@ function useInputSubmit(ref, type, disabled) {
         return () => node.removeEventListener("keydown", handleSubmit);
     }, [disabled, ref, type]);
 }
-exports.useInputSubmit = useInputSubmit;

package/icon/icon.js

@@ -29,7 +29,7 @@ const rem_1 = require("@uxf/styles/units/rem");
 const react_1 = __importStar(require("react"));
 const context_1 = require("../context");
 exports.Icon = (0, react_1.forwardRef)((props, ref) => {
-    var _a, _b;
+    var _a;
     const componentContext = (0, context_1.useComponentContext)("icon");
     const CustomComponent = props.Component;
     const className = (0, cx_1.cx)("uxf-icon", props.color && `uxf-icon--color-${props.color}`, props.className);
@@ -38,7 +38,7 @@ exports.Icon = (0, react_1.forwardRef)((props, ref) => {
         ? {
             "--i-h": (0, rem_1.rem)(props.size),
             "--i-w": (0, rem_1.rem)(props.size),
-            ...((_b = props.style) !== null && _b !== void 0 ? _b : {}),
+            ...props.style,
         }
         : props.style;
     if (CustomComponent) {

package/icon/icon.stories.js

@@ -3,7 +3,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SpriteIconNotExists = exports.SpriteIcon = exports.CustomComponent = exports.ColorAndSizes = exports.AllIcons = void 0;
+exports.AllIcons = AllIcons;
+exports.ColorAndSizes = ColorAndSizes;
+exports.CustomComponent = CustomComponent;
+exports.SpriteIcon = SpriteIcon;
+exports.SpriteIconNotExists = SpriteIconNotExists;
 const react_1 = __importDefault(require("react"));
 const context_1 = require("../context");
 const icon_1 = require("./icon");
@@ -19,35 +23,30 @@ exports.default = {
 };
 function AllIcons() {
     const iconContext = (0, context_1.useComponentContext)("icon");
-    return (react_1.default.createElement("div", { className: "flex flex-row flex-wrap" }, Object.keys(iconContext.iconsConfig).map((iconName) => (react_1.default.createElement("div", { key: iconName, className: "flex size-28 flex-col items-center justify-center gap-3" },
+    return (react_1.default.createElement("div", { className: "flex flex-row flex-wrap" }, Object.keys(iconContext.iconsConfig).map((iconName) => (react_1.default.createElement("div", { className: "flex size-28 flex-col items-center justify-center gap-3", key: iconName },
         react_1.default.createElement(icon_1.Icon, { className: "dark:text-white", name: iconName, size: 24 }),
         react_1.default.createElement("div", { className: "text-gray-400" },
             react_1.default.createElement("small", null, iconName)))))));
 }
-exports.AllIcons = AllIcons;
 function ColorAndSizes() {
     return (react_1.default.createElement("div", { className: "flex flex-row flex-wrap gap-4" },
         react_1.default.createElement(icon_1.Icon, { name: "camera", size: 12 }),
         react_1.default.createElement(icon_1.Icon, { name: "camera", size: 16 }),
         react_1.default.createElement(icon_1.Icon, { name: "camera", size: 20 }),
-        react_1.default.createElement(icon_1.Icon, { name: "camera", size: 12, className: "text-primary-600" }),
-        react_1.default.createElement(icon_1.Icon, { name: "camera", size: 16, className: "text-orange-600" }),
-        react_1.default.createElement(icon_1.Icon, { name: "camera", size: 20, className: "text-green-600" })));
+        react_1.default.createElement(icon_1.Icon, { className: "text-primary-600", name: "camera", size: 12 }),
+        react_1.default.createElement(icon_1.Icon, { className: "text-orange-600", name: "camera", size: 16 }),
+        react_1.default.createElement(icon_1.Icon, { className: "text-green-600", name: "camera", size: 20 })));
 }
-exports.ColorAndSizes = ColorAndSizes;
 function CustomComponent() {
     const SvgIcon = (props) => {
         return (react_1.default.createElement("svg", { viewBox: "0 0 29.65 40", ...props },
-            react_1.default.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M0 14.83C0 6.61 6.61 0 14.83 0c8.11 0 14.83 6.61 14.83 14.83 0 8.64-8.85 19.41-14.83 25.17C8.75 34.24 0 23.47 0 14.83zm9.28 0c0-3.09 2.45-5.55 5.55-5.55 2.99 0 5.44 2.45 5.44 5.55 0 2.99-2.45 5.44-5.44 5.44-3.1 0-5.55-2.46-5.55-5.44z", clipRule: "evenodd" })));
+            react_1.default.createElement("path", { clipRule: "evenodd", d: "M0 14.83C0 6.61 6.61 0 14.83 0c8.11 0 14.83 6.61 14.83 14.83 0 8.64-8.85 19.41-14.83 25.17C8.75 34.24 0 23.47 0 14.83zm9.28 0c0-3.09 2.45-5.55 5.55-5.55 2.99 0 5.44 2.45 5.44 5.55 0 2.99-2.45 5.44-5.44 5.44-3.1 0-5.55-2.46-5.55-5.44z", fill: "currentColor", fillRule: "evenodd" })));
     };
     return react_1.default.createElement(icon_1.Icon, { Component: SvgIcon, size: 16 });
 }
-exports.CustomComponent = CustomComponent;
 function SpriteIcon() {
     return react_1.default.createElement(icon_1.Icon, { name: "camera", size: 16 });
 }
-exports.SpriteIcon = SpriteIcon;
 function SpriteIconNotExists() {
     return react_1.default.createElement(icon_1.Icon, { name: "not-exists", size: 16 });
 }
-exports.SpriteIconNotExists = SpriteIconNotExists;

package/image-gallery/components/gallery.js

@@ -63,7 +63,7 @@ const Gallery = (props) => {
         onSwipedRight: () => props.onPrevious(),
         swipeDuration: 500,
     });
-    return (react_1.default.createElement("div", { className: "uxf-image-gallery", role: "dialog", "aria-modal": true },
+    return (react_1.default.createElement("div", { "aria-modal": true, className: "uxf-image-gallery", role: "dialog" },
         react_1.default.createElement("div", { "aria-hidden": true, className: "uxf-image-gallery__backdrop", onClick: !props.disableBackdropClose ? props.onClose : undefined }),
         react_1.default.createElement("div", { className: "uxf-image-gallery__close-button-wrapper" },
             react_1.default.createElement(close_button_1.CloseButton, { buttonElement: props.closeButtonElement, onClick: props.onClose, text: props.closeButtonTitle })),
@@ -72,9 +72,9 @@ const Gallery = (props) => {
             react_1.default.createElement(next_button_1.NextButton, { buttonElement: props.nextButtonElement, onClick: props.onNext }))),
         react_1.default.createElement("div", { className: "uxf-image-gallery__content", ...handlers },
             react_1.default.createElement("div", { className: "uxf-image-gallery__inner" },
-                react_1.default.createElement("img", { alt: "", className: "uxf-image-gallery__image", src: typeof imageSrc === "string" ? imageSrc : (_a = (0, resizer_1.resizerImageUrl)(imageSrc)) !== null && _a !== void 0 ? _a : "" }),
+                react_1.default.createElement("img", { alt: "", className: "uxf-image-gallery__image", src: typeof imageSrc === "string" ? imageSrc : ((_a = (0, resizer_1.resizerImageUrl)(imageSrc)) !== null && _a !== void 0 ? _a : "") }),
                 react_1.default.createElement("div", { className: "uxf-image-gallery__custom-content" }, customContent))),
-        props.images.length > 1 && (react_1.default.createElement("div", { className: "uxf-image-gallery__dots" }, props.images.map((image, index) => (react_1.default.createElement(dot_1.Dot, { key: (0, image_1.getImgUniqueIdentifier)(image.src) || index, active: index === props.imageIndex })))))));
+        props.images.length > 1 && (react_1.default.createElement("div", { className: "uxf-image-gallery__dots" }, props.images.map((image, index) => (react_1.default.createElement(dot_1.Dot, { active: index === props.imageIndex, key: (0, image_1.getImgUniqueIdentifier)(image.src) || index })))))));
 };
 exports.Gallery = Gallery;
 exports.Gallery.displayName = "UxfUiGallery";

package/image-gallery/context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ImageGalleryImageProps } from "./types";
 type ContextType = {
     registerImage: (props: ImageGalleryImageProps) => void;

package/image-gallery/image-gallery.js

@@ -48,7 +48,7 @@ const ImageGallery = (props) => {
     const contextValue = { registerImage, unregisterImage, openGallery };
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(context_1.ImageGalleryProvider, { value: contextValue }, props.children),
-        typeof moduloImageIndex === "number" && (react_1.default.createElement(gallery_1.Gallery, { closeButtonTitle: props.closeButtonTitle, disableBackdropClose: props.disableBackdropClose, onClose: () => setImageIndex(null), onNext: onNext, onPrevious: onPrevious, imageIndex: moduloImageIndex, images: images, nextButtonElement: props.nextButtonElement, prevButtonElement: props.prevButtonElement, closeButtonElement: props.closeButtonElement }))));
+        typeof moduloImageIndex === "number" && (react_1.default.createElement(gallery_1.Gallery, { closeButtonElement: props.closeButtonElement, closeButtonTitle: props.closeButtonTitle, disableBackdropClose: props.disableBackdropClose, imageIndex: moduloImageIndex, images: images, nextButtonElement: props.nextButtonElement, onClose: () => setImageIndex(null), onNext: onNext, onPrevious: onPrevious, prevButtonElement: props.prevButtonElement }))));
 };
 exports.ImageGallery = ImageGallery;
 exports.ImageGallery.displayName = "UxfUiImageGallery";

package/image-gallery/image-gallery.stories.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.Default = Default;
 const image_1 = require("@uxf/core/utils/image");
 const react_1 = __importDefault(require("react"));
 const icon_1 = require("../icon");
@@ -36,7 +36,6 @@ const nextButtonElement = react_1.default.createElement(icon_1.Icon, { className
 const prevButtonElement = react_1.default.createElement(icon_1.Icon, { className: "uxf-image-gallery__button-icon", name: "chevronLeft" });
 const closeButtonElement = react_1.default.createElement(icon_1.Icon, { className: "uxf-image-gallery__button-icon", name: "xmarkLarge" });
 function Default() {
-    return (react_1.default.createElement(index_1.ImageGallery, { prevButtonElement: prevButtonElement, nextButtonElement: nextButtonElement, closeButtonElement: closeButtonElement },
-        react_1.default.createElement("div", { className: "flex-direction flex gap-2" }, images.map((image, index) => (react_1.default.createElement(index_1.ImageGallery.Image, { key: (0, image_1.getImgUniqueIdentifier)(image.src) || index, src: image.src, className: "size-56 cursor-pointer object-cover transition-transform hover:scale-105", customContent: image.title }))))));
+    return (react_1.default.createElement(index_1.ImageGallery, { closeButtonElement: closeButtonElement, nextButtonElement: nextButtonElement, prevButtonElement: prevButtonElement },
+        react_1.default.createElement("div", { className: "flex-direction flex gap-2" }, images.map((image, index) => (react_1.default.createElement(index_1.ImageGallery.Image, { className: "size-56 cursor-pointer object-cover transition-transform hover:scale-105", customContent: image.title, key: (0, image_1.getImgUniqueIdentifier)(image.src) || index, src: image.src }))))));
 }
-exports.Default = Default;

package/image-gallery/image.js

@@ -12,7 +12,7 @@ const Image = (props) => {
     const openGallery = (0, use_image_1.useImage)(props);
     return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions
-    react_1.default.createElement("img", { alt: props.alt, className: props.className, onClick: openGallery, src: typeof props.src === "string" ? props.src : (_a = (0, resizer_1.resizerImageUrl)(props.src)) !== null && _a !== void 0 ? _a : "", title: props.title }));
+    react_1.default.createElement("img", { alt: props.alt, className: props.className, onClick: openGallery, src: typeof props.src === "string" ? props.src : ((_a = (0, resizer_1.resizerImageUrl)(props.src)) !== null && _a !== void 0 ? _a : ""), title: props.title }));
 };
 exports.Image = Image;
 exports.Image.displayName = "UxfUiImageGalleryImage";

package/image-gallery/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export { useImage } from "./use-image";
 export declare const ImageGallery: import("react").FC<import("./image-gallery").ImageGalleryProps> & {
     Image: import("react").FC<import("./types").ImageGalleryImageProps>;

package/image-gallery/use-image.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useImage = void 0;
+exports.useImage = useImage;
 const use_on_mount_1 = require("@uxf/core-react/hooks/use-on-mount");
 const react_1 = require("react");
 const context_1 = require("./context");
@@ -14,4 +14,3 @@ function useImage(props) {
     });
     return (0, react_1.useCallback)(() => openGallery(props), [props, openGallery]);
 }
-exports.useImage = useImage;

package/input/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { InputArrowIcon } from "./input-arrow-icon";
 export type { InputProps } from "./input";
 export type { InputElementProps } from "./input-element";

package/input/input-arrow-icon.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputArrowIcon = void 0;
+exports.InputArrowIcon = InputArrowIcon;
 const classes_1 = require("@uxf/core/constants/classes");
 const cx_1 = require("@uxf/core/utils/cx");
 const icon_1 = require("@uxf/ui/icon");
@@ -13,4 +13,3 @@ function InputArrowIcon(props) {
     const iconName = (_a = props.iconName) !== null && _a !== void 0 ? _a : "caretDown";
     return react_1.default.createElement(icon_1.Icon, { className: (0, cx_1.cx)("uxf-input__arrow-icon", props.isOpen && classes_1.CLASSES.IS_OPEN), name: iconName });
 }
-exports.InputArrowIcon = InputArrowIcon;

package/input/input-element.js

@@ -27,7 +27,7 @@ exports.InputElement = void 0;
 const react_1 = __importStar(require("react"));
 exports.InputElement = (0, react_1.forwardRef)((props, ref) => {
     const onChange = (event) => props.onChange(event.target.value, event);
-    const filteredProps = Object.fromEntries(Object.entries(props).filter((p) => p[0].startsWith("aria-") || p[0].startsWith("data-")));
+    const filteredProps = Object.fromEntries(Object.entries(props).filter((p) => { var _a, _b; return Boolean(((_a = p.at(0)) === null || _a === void 0 ? void 0 : _a.startsWith("aria-")) || ((_b = p.at(0)) === null || _b === void 0 ? void 0 : _b.startsWith("data-"))); }));
     return (react_1.default.createElement("input", { ...filteredProps, "aria-describedby": props["aria-describedby"], "aria-invalid": props.isInvalid, autoComplete: props.autoComplete, autoFocus: props.autoFocus, className: "uxf-input__element", disabled: props.isDisabled, form: props.form, id: props.id, inputMode: props.inputMode, max: props.max, maxLength: props.maxLength, min: props.min, minLength: props.minLength, name: props.name, onBlur: props.onBlur, onChange: onChange, onFocus: props.onFocus, onKeyDown: props.onKeyDown, pattern: props.pattern, placeholder: props.placeholder, readOnly: props.isReadOnly, ref: ref, step: props.step, style: props.style, tabIndex: props.isReadOnly ? -1 : undefined, type: props.type, value: props.value }));
 });
 exports.InputElement.displayName = "UxfUiInputElement";

package/input/input.js

@@ -30,7 +30,7 @@ const classes_1 = require("@uxf/core/constants/classes");
 const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = __importStar(require("react"));
 const isApplicable = (...args) => {
-    return args.some((i) => !!i);
+    return args.some(Boolean);
 };
 function getChildrenById(children, componentName) {
     return react_1.Children.toArray(children)

package/input/input.stories.js

@@ -26,7 +26,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComponentStructure = exports.Sizes = exports.Default = void 0;
+exports.Default = Default;
+exports.Sizes = Sizes;
+exports.ComponentStructure = ComponentStructure;
 const input_1 = require("@uxf/ui/input");
 const action_1 = require("@uxf/ui/utils/action");
 const component_structure_analyzer_1 = __importDefault(require("@uxf/ui/utils/component-structure-analyzer"));
@@ -44,32 +46,31 @@ function Default() {
         react_1.default.createElement(input_1.Input, null,
             react_1.default.createElement(input_1.Input.LeftAddon, null, "InputLeftAddon"),
             react_1.default.createElement(input_1.Input.LeftElement, null, "InputLeftElement"),
-            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: onChange, placeholder: "Placeholder", isInvalid: isInvalid, name: "input-element-1" }),
+            react_1.default.createElement(input_1.Input.Element, { isInvalid: isInvalid, name: "input-element-1", onChange: onChange, placeholder: "Placeholder", value: value }),
             react_1.default.createElement(input_1.Input.RightElement, null, "InputRightElement"),
             react_1.default.createElement(input_1.Input.RightAddon, null, "InputRightAddon")),
         react_1.default.createElement(input_1.Input, null,
             react_1.default.createElement(input_1.Input.LeftAddon, null, "https://"),
-            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: onChange, placeholder: "Placeholder", isInvalid: isInvalid, name: "input-element-2" }),
+            react_1.default.createElement(input_1.Input.Element, { isInvalid: isInvalid, name: "input-element-2", onChange: onChange, placeholder: "Placeholder", value: value }),
             react_1.default.createElement(input_1.Input.RightAddon, null, ".uxf.cz")),
         react_1.default.createElement(input_1.Input, null,
-            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: onChange, placeholder: "Placeholder", isInvalid: isInvalid, name: "input-element-3" }),
+            react_1.default.createElement(input_1.Input.Element, { isInvalid: isInvalid, name: "input-element-3", onChange: onChange, placeholder: "Placeholder", value: value }),
             react_1.default.createElement(input_1.Input.RightAddon, null, ".test.cz")),
         react_1.default.createElement(input_1.Input, null,
             react_1.default.createElement(input_1.Input.LeftElement, null, "\uD83C\uDF37"),
-            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: onChange, placeholder: "Placeholder", isInvalid: isInvalid, name: "input-element-4" }),
+            react_1.default.createElement(input_1.Input.Element, { isInvalid: isInvalid, name: "input-element-4", onChange: onChange, placeholder: "Placeholder", value: value }),
             react_1.default.createElement(input_1.Input.RightElement, null, "\uD83D\uDD14")),
         react_1.default.createElement(input_1.Input, null,
-            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: onChange, placeholder: "Placeholder", isInvalid: isInvalid, name: "input-element-5" })),
+            react_1.default.createElement(input_1.Input.Element, { isInvalid: isInvalid, name: "input-element-5", onChange: onChange, placeholder: "Placeholder", value: value })),
         react_1.default.createElement(input_1.Input, null,
-            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: onChange, placeholder: "Disabled", isInvalid: isInvalid, isDisabled: true, name: "input-element-6" })),
+            react_1.default.createElement(input_1.Input.Element, { isDisabled: true, isInvalid: isInvalid, name: "input-element-6", onChange: onChange, placeholder: "Disabled", value: value })),
         react_1.default.createElement(input_1.Input, null,
-            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: onChange, placeholder: "Read Only", isInvalid: isInvalid, isReadOnly: true, name: "input-element-7" }))));
+            react_1.default.createElement(input_1.Input.Element, { isInvalid: isInvalid, isReadOnly: true, name: "input-element-7", onChange: onChange, placeholder: "Read Only", value: value }))));
     const onInvalidChange = (e) => setInvalid(e.target.checked);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("input", { type: "checkbox", checked: isInvalid, onChange: onInvalidChange }),
+        react_1.default.createElement("input", { checked: isInvalid, onChange: onInvalidChange, type: "checkbox" }),
         react_1.default.createElement("div", { className: "space-y-2 p-20" }, storyInputs)));
 }
-exports.Default = Default;
 function Sizes() {
     const config = (0, storybook_config_1.useStorybookConfig)("Input");
     const [value, setValue] = (0, react_1.useState)("");
@@ -77,19 +78,17 @@ function Sizes() {
     return (react_1.default.createElement("div", { className: "space-y-4" }, config.sizes.map((size) => (react_1.default.createElement(input_1.Input, { key: size, size: size },
         react_1.default.createElement(input_1.Input.LeftAddon, null, "LeftAddon"),
         react_1.default.createElement(input_1.Input.LeftElement, null, "\uD83C\uDF37"),
-        react_1.default.createElement(input_1.Input.Element, { value: value, onChange: onChange, placeholder: size, name: `input-element-size-${size}` }),
+        react_1.default.createElement(input_1.Input.Element, { name: `input-element-size-${size}`, onChange: onChange, placeholder: size, value: value }),
         react_1.default.createElement(input_1.Input.RightElement, null, "\uD83D\uDD14"),
         react_1.default.createElement(input_1.Input.RightAddon, null, "RightAddon"))))));
 }
-exports.Sizes = Sizes;
 function ComponentStructure() {
     const [value, onChange] = (0, react_1.useState)("");
     return (react_1.default.createElement(component_structure_analyzer_1.default, null,
         react_1.default.createElement(input_1.Input, null,
             react_1.default.createElement(input_1.Input.LeftAddon, null, "Left addon"),
             react_1.default.createElement(input_1.Input.LeftElement, null, "Left element"),
-            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: onChange, name: "input-element-component-structure" }),
+            react_1.default.createElement(input_1.Input.Element, { name: "input-element-component-structure", onChange: onChange, value: value }),
             react_1.default.createElement(input_1.Input.RightElement, null, "Right element"),
             react_1.default.createElement(input_1.Input.RightAddon, null, "Right addon"))));
 }
-exports.ComponentStructure = ComponentStructure;

package/label/label.stories.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.Default = Default;
 const react_1 = __importDefault(require("react"));
 const index_1 = require("./index");
 exports.default = {
@@ -14,4 +14,3 @@ function Default() {
     return (react_1.default.createElement("div", { className: "space-y-2" },
         react_1.default.createElement(index_1.Label, null, "Label")));
 }
-exports.Default = Default;

package/layout/layout.js

@@ -36,11 +36,11 @@ const Layout = (props) => {
             react_2.default.createElement("div", { className: "uxf-sidebar__content" }, props.sidebar)),
         react_2.default.createElement("div", { className: "uxf-app-bar" },
             react_2.default.createElement("div", { className: "uxf-app-bar__left-container" },
-                react_2.default.createElement("button", { type: "button", className: "uxf-app-bar__menu-button", onClick: () => setSidebarOpen(true) },
-                    react_2.default.createElement(icon_1.Icon, { name: "bars", className: "text-white", size: 26 })),
+                react_2.default.createElement("button", { className: "uxf-app-bar__menu-button", onClick: () => setSidebarOpen(true), type: "button" },
+                    react_2.default.createElement(icon_1.Icon, { className: "text-white", name: "bars", size: 26 })),
                 react_2.default.createElement("div", { className: "uxf-app-bar__logo" }, (_a = props.logo) !== null && _a !== void 0 ? _a : react_2.default.createElement(uxf_logo_1.UxfLogo, null))),
             react_2.default.createElement("div", { className: "uxf-app-bar__right-container" }, props.toolbarRight)),
-        react_2.default.createElement(react_1.Transition.Root, { show: sidebarOpen, as: react_2.Fragment },
+        react_2.default.createElement(react_1.Transition.Root, { as: react_2.Fragment, show: sidebarOpen },
             react_2.default.createElement(react_1.Dialog, { as: "div", className: "relative z-40 md:hidden", onClose: setSidebarOpen },
                 react_2.default.createElement(react_1.Transition.Child, { as: react_2.Fragment, enter: "transition-opacity ease-linear duration-300", enterFrom: "opacity-0", enterTo: "opacity-100", leave: "transition-opacity ease-linear duration-300", leaveFrom: "opacity-100", leaveTo: "opacity-0" },
                     react_2.default.createElement("div", { className: "fixed inset-0 bg-gray-600/75" })),
@@ -49,12 +49,12 @@ const Layout = (props) => {
                         react_2.default.createElement(react_1.Dialog.Panel, { className: "relative flex w-full max-w-xs flex-1 flex-col bg-white pb-4 pt-5" },
                             react_2.default.createElement(react_1.Transition.Child, { as: react_2.Fragment, enter: "ease-in-out duration-300", enterFrom: "opacity-0", enterTo: "opacity-100", leave: "ease-in-out duration-300", leaveFrom: "opacity-100", leaveTo: "opacity-0" },
                                 react_2.default.createElement("div", { className: "absolute right-0 top-0 -mr-12 pt-2" },
-                                    react_2.default.createElement("button", { type: "button", className: "ml-1 flex size-10 items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white", onClick: () => setSidebarOpen(false) },
+                                    react_2.default.createElement("button", { className: "ml-1 flex size-10 items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white", onClick: () => setSidebarOpen(false), type: "button" },
                                         react_2.default.createElement("span", { className: "sr-only" }, "Close sidebar"),
-                                        react_2.default.createElement(icon_1.Icon, { name: "xmarkLarge", size: 24, className: "text-white" })))),
+                                        react_2.default.createElement(icon_1.Icon, { className: "text-white", name: "xmarkLarge", size: 24 })))),
                             react_2.default.createElement("div", { className: "uxf-drawer__logo" }, (_b = props.logo) !== null && _b !== void 0 ? _b : react_2.default.createElement(uxf_logo_1.UxfLogo, { isDark: true })),
                             react_2.default.createElement("div", { className: "uxf-drawer__content" }, props.sidebar))),
-                    react_2.default.createElement("div", { className: "w-14 shrink-0", "aria-hidden": "true" })))),
+                    react_2.default.createElement("div", { "aria-hidden": "true", className: "w-14 shrink-0" })))),
         react_2.default.createElement("main", { className: "uxf-layout__content" }, props.children)));
 };
 exports.Layout = Layout;

package/layout/layout.stories.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.Default = Default;
 const react_1 = __importDefault(require("react"));
 const layout_1 = require("./layout");
 exports.default = {
@@ -18,4 +18,3 @@ function Default() {
         react_1.default.createElement("div", { className: "p-8" },
             react_1.default.createElement("div", { className: "flex h-64 items-center justify-center rounded-xl border-4 border-dashed border-gray-200 text-xl font-semibold text-gray-300" }, "children"))));
 }
-exports.Default = Default;

package/layout/uxf-logo.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.UxfLogo = void 0;
 const react_1 = __importDefault(require("react"));
 const UxfLogo = (props) => {
-    return (react_1.default.createElement("svg", { width: "179", height: "40" },
-        react_1.default.createElement("path", { fill: "#FF4F06", fillRule: "evenodd", d: "M33.563 12.874a9.103 9.103 0 0 0 0-12.874L20.69 12.874l.107.105a9.103 9.103 0 0 0 12.766-.105Zm-20.69-6.437a9.103 9.103 0 0 1 .106 12.766l-.105.107L0 6.437a9.103 9.103 0 0 1 12.874 0ZM40 33.563 27.127 20.69l-.106.107a9.103 9.103 0 0 0 12.98 12.766Zm-20.69-6.437-.107-.105A9.103 9.103 0 0 0 6.437 40l12.874-12.874Z", clipRule: "evenodd" }),
-        react_1.default.createElement("path", { fill: props.isDark ? "#140939" : "#FFF", fillRule: "evenodd", d: "m84.325 7.295 5.133 8.675h.199l5.158-8.675h6.078l-7.768 12.727 7.942 12.727h-6.19l-5.22-8.687h-.199l-5.22 8.687h-6.165l7.967-12.727-7.818-12.727h6.103Zm-24.194 0v16.07c0 .97.214 1.832.64 2.586a4.58 4.58 0 0 0 1.809 1.777c.779.431 1.686.647 2.722.647 1.044 0 1.953-.216 2.728-.647a4.591 4.591 0 0 0 1.802-1.777c.427-.754.64-1.616.64-2.585V7.296h5.382v16.53c0 1.856-.441 3.48-1.324 4.872-.882 1.392-2.115 2.475-3.697 3.25-1.583.775-3.426 1.162-5.531 1.162-2.113 0-3.96-.387-5.543-1.162-1.583-.775-2.813-1.858-3.692-3.25-.878-1.392-1.317-3.016-1.317-4.872V7.296h5.381ZM170.25 13.41c2.411 0 4.311.51 5.698 1.529 1.388 1.019 2.198 2.407 2.43 4.164l-4.847.298a2.555 2.555 0 0 0-.534-1.125 2.942 2.942 0 0 0-1.075-.808c-.444-.203-.972-.304-1.585-.304-.821 0-1.512.172-2.076.515-.563.344-.845.802-.845 1.374 0 .456.182.84.547 1.156.364.315.99.567 1.877.758l3.455.696c1.856.381 3.24.994 4.151 1.84.912.845 1.367 1.955 1.367 3.33 0 1.252-.366 2.35-1.1 3.294-.733.945-1.736 1.68-3.007 2.206-1.272.526-2.737.79-4.394.79-2.527 0-4.539-.529-6.034-1.585-1.496-1.057-2.372-2.496-2.629-4.32l5.208-.273c.157.77.538 1.357 1.143 1.759.605.402 1.38.603 2.324.603.928 0 1.676-.18 2.244-.54.567-.361.855-.827.864-1.4-.009-.48-.212-.875-.609-1.186-.398-.31-1.011-.55-1.84-.715l-3.306-.659c-1.864-.372-3.25-1.019-4.157-1.938-.908-.92-1.361-2.093-1.361-3.518 0-1.226.333-2.283 1-3.17.667-.886 1.608-1.57 2.821-2.05 1.214-.48 2.637-.72 4.27-.72Zm-36.686.373a12.285 12.285 0 0 0-3.051-.373c-1.525 0-2.865.23-4.021.69-1.156.46-2.098 1.114-2.827 1.964-.73.849-1.219 1.854-1.467 3.014l4.897.397c.182-.63.555-1.153 1.119-1.572.563-.418 1.321-.627 2.274-.627.903 0 1.601.215 2.094.646.493.43.74 1.04.74 1.827v.075c0 .405-.153.712-.46.92-.307.206-.8.362-1.479.465-.68.104-1.574.214-2.685.33-.944.09-1.845.248-2.703.472a7.698 7.698 0 0 0-2.293.994 4.727 4.727 0 0 0-1.591 1.74c-.39.721-.584 1.612-.584 2.673 0 1.259.275 2.31.826 3.15a5.147 5.147 0 0 0 2.256 1.902c.953.427 2.038.64 3.257.64.944 0 1.777-.126 2.498-.38a5.55 5.55 0 0 0 1.852-1.055 5.31 5.31 0 0 0 1.23-1.573h.149v2.648h5.022V19.873c0-1.135-.22-2.11-.659-2.927a5.655 5.655 0 0 0-1.796-2.007 8.039 8.039 0 0 0-2.598-1.156Zm-13.424-2.05V7.294h-16.853v25.454h5.381V22.235h10.354v-4.438h-10.354v-6.065h11.472Zm32.603 1.677c1.326 0 2.482.29 3.468.87.986.58 1.753 1.407 2.3 2.48.546 1.073.82 2.35.82 3.834V32.75h-5.295V21.539c.008-1.169-.29-2.082-.895-2.74-.605-.66-1.437-.989-2.498-.989-.713 0-1.34.153-1.883.46a3.166 3.166 0 0 0-1.268 1.336c-.302.584-.458 1.286-.466 2.107V32.75h-5.295V13.659h5.047v3.368H147a5.358 5.358 0 0 1 2.126-2.641c.994-.65 2.2-.976 3.616-.976Zm-20.061 10.782c.286-.087.512-.184.678-.292v2.026c0 .671-.17 1.272-.51 1.802-.34.53-.808.951-1.404 1.262-.597.31-1.285.466-2.064.466-.812 0-1.481-.189-2.007-.566-.526-.377-.789-.925-.789-1.646 0-.497.128-.914.385-1.25.257-.335.617-.602 1.082-.801a6.547 6.547 0 0 1 1.628-.435l.969-.143a24.15 24.15 0 0 0 1.069-.186c.356-.071.677-.15.963-.237Z", clipRule: "evenodd" })));
+    return (react_1.default.createElement("svg", { height: "40", width: "179" },
+        react_1.default.createElement("path", { clipRule: "evenodd", d: "M33.563 12.874a9.103 9.103 0 0 0 0-12.874L20.69 12.874l.107.105a9.103 9.103 0 0 0 12.766-.105Zm-20.69-6.437a9.103 9.103 0 0 1 .106 12.766l-.105.107L0 6.437a9.103 9.103 0 0 1 12.874 0ZM40 33.563 27.127 20.69l-.106.107a9.103 9.103 0 0 0 12.98 12.766Zm-20.69-6.437-.107-.105A9.103 9.103 0 0 0 6.437 40l12.874-12.874Z", fill: "#FF4F06", fillRule: "evenodd" }),
+        react_1.default.createElement("path", { clipRule: "evenodd", d: "m84.325 7.295 5.133 8.675h.199l5.158-8.675h6.078l-7.768 12.727 7.942 12.727h-6.19l-5.22-8.687h-.199l-5.22 8.687h-6.165l7.967-12.727-7.818-12.727h6.103Zm-24.194 0v16.07c0 .97.214 1.832.64 2.586a4.58 4.58 0 0 0 1.809 1.777c.779.431 1.686.647 2.722.647 1.044 0 1.953-.216 2.728-.647a4.591 4.591 0 0 0 1.802-1.777c.427-.754.64-1.616.64-2.585V7.296h5.382v16.53c0 1.856-.441 3.48-1.324 4.872-.882 1.392-2.115 2.475-3.697 3.25-1.583.775-3.426 1.162-5.531 1.162-2.113 0-3.96-.387-5.543-1.162-1.583-.775-2.813-1.858-3.692-3.25-.878-1.392-1.317-3.016-1.317-4.872V7.296h5.381ZM170.25 13.41c2.411 0 4.311.51 5.698 1.529 1.388 1.019 2.198 2.407 2.43 4.164l-4.847.298a2.555 2.555 0 0 0-.534-1.125 2.942 2.942 0 0 0-1.075-.808c-.444-.203-.972-.304-1.585-.304-.821 0-1.512.172-2.076.515-.563.344-.845.802-.845 1.374 0 .456.182.84.547 1.156.364.315.99.567 1.877.758l3.455.696c1.856.381 3.24.994 4.151 1.84.912.845 1.367 1.955 1.367 3.33 0 1.252-.366 2.35-1.1 3.294-.733.945-1.736 1.68-3.007 2.206-1.272.526-2.737.79-4.394.79-2.527 0-4.539-.529-6.034-1.585-1.496-1.057-2.372-2.496-2.629-4.32l5.208-.273c.157.77.538 1.357 1.143 1.759.605.402 1.38.603 2.324.603.928 0 1.676-.18 2.244-.54.567-.361.855-.827.864-1.4-.009-.48-.212-.875-.609-1.186-.398-.31-1.011-.55-1.84-.715l-3.306-.659c-1.864-.372-3.25-1.019-4.157-1.938-.908-.92-1.361-2.093-1.361-3.518 0-1.226.333-2.283 1-3.17.667-.886 1.608-1.57 2.821-2.05 1.214-.48 2.637-.72 4.27-.72Zm-36.686.373a12.285 12.285 0 0 0-3.051-.373c-1.525 0-2.865.23-4.021.69-1.156.46-2.098 1.114-2.827 1.964-.73.849-1.219 1.854-1.467 3.014l4.897.397c.182-.63.555-1.153 1.119-1.572.563-.418 1.321-.627 2.274-.627.903 0 1.601.215 2.094.646.493.43.74 1.04.74 1.827v.075c0 .405-.153.712-.46.92-.307.206-.8.362-1.479.465-.68.104-1.574.214-2.685.33-.944.09-1.845.248-2.703.472a7.698 7.698 0 0 0-2.293.994 4.727 4.727 0 0 0-1.591 1.74c-.39.721-.584 1.612-.584 2.673 0 1.259.275 2.31.826 3.15a5.147 5.147 0 0 0 2.256 1.902c.953.427 2.038.64 3.257.64.944 0 1.777-.126 2.498-.38a5.55 5.55 0 0 0 1.852-1.055 5.31 5.31 0 0 0 1.23-1.573h.149v2.648h5.022V19.873c0-1.135-.22-2.11-.659-2.927a5.655 5.655 0 0 0-1.796-2.007 8.039 8.039 0 0 0-2.598-1.156Zm-13.424-2.05V7.294h-16.853v25.454h5.381V22.235h10.354v-4.438h-10.354v-6.065h11.472Zm32.603 1.677c1.326 0 2.482.29 3.468.87.986.58 1.753 1.407 2.3 2.48.546 1.073.82 2.35.82 3.834V32.75h-5.295V21.539c.008-1.169-.29-2.082-.895-2.74-.605-.66-1.437-.989-2.498-.989-.713 0-1.34.153-1.883.46a3.166 3.166 0 0 0-1.268 1.336c-.302.584-.458 1.286-.466 2.107V32.75h-5.295V13.659h5.047v3.368H147a5.358 5.358 0 0 1 2.126-2.641c.994-.65 2.2-.976 3.616-.976Zm-20.061 10.782c.286-.087.512-.184.678-.292v2.026c0 .671-.17 1.272-.51 1.802-.34.53-.808.951-1.404 1.262-.597.31-1.285.466-2.064.466-.812 0-1.481-.189-2.007-.566-.526-.377-.789-.925-.789-1.646 0-.497.128-.914.385-1.25.257-.335.617-.602 1.082-.801a6.547 6.547 0 0 1 1.628-.435l.969-.143a24.15 24.15 0 0 0 1.069-.186c.356-.071.677-.15.963-.237Z", fill: props.isDark ? "#140939" : "#FFF", fillRule: "evenodd" })));
 };
 exports.UxfLogo = UxfLogo;

package/list-item/list-item.stories.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.Default = Default;
 const react_1 = __importDefault(require("react"));
 const icon_1 = require("../icon");
 const index_1 = require("./index");
@@ -25,9 +25,8 @@ function Default() {
         react_1.default.createElement("div", { className: "border-gray500 border-b" }),
         react_1.default.createElement(index_1.ListItem, { onClick: onClick }, "No end icon"),
         react_1.default.createElement("div", { className: "border-gray500 border-b" }),
-        react_1.default.createElement(index_1.ListItem, { endElement: react_1.default.createElement(icon_1.Icon, { name: "camera", className: "text-success", size: 24 }), onClick: onClick }, "End element"),
-        react_1.default.createElement(index_1.ListItem, { endElement: react_1.default.createElement(icon_1.Icon, { name: "camera", className: "text-success", size: 24 }), endIcon: "chevronRight", onClick: onClick }, "End element and end icon")));
+        react_1.default.createElement(index_1.ListItem, { endElement: react_1.default.createElement(icon_1.Icon, { className: "text-success", name: "camera", size: 24 }), onClick: onClick }, "End element"),
+        react_1.default.createElement(index_1.ListItem, { endElement: react_1.default.createElement(icon_1.Icon, { className: "text-success", name: "camera", size: 24 }), endIcon: "chevronRight", onClick: onClick }, "End element and end icon")));
     return (react_1.default.createElement("div", { className: "flex" },
         react_1.default.createElement("div", { className: "grow gap-4 p-4" }, storyListItem)));
 }
-exports.Default = Default;

package/loader/loader.js

@@ -29,6 +29,6 @@ const react_1 = __importStar(require("react"));
 exports.Loader = (0, react_1.forwardRef)((props, ref) => {
     var _a;
     const loaderClassName = (0, cx_1.cx)("uxf-loader", `uxf-loader--size-${(_a = props.size) !== null && _a !== void 0 ? _a : "default"}`, props.className);
-    return react_1.default.createElement("span", { ref: ref, className: loaderClassName });
+    return react_1.default.createElement("span", { className: loaderClassName, ref: ref });
 });
 exports.Loader.displayName = "UxfUiLoader";

package/loader/loader.stories.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.Default = Default;
 const react_1 = __importDefault(require("react"));
 const loader_1 = require("./loader");
 exports.default = {
@@ -18,4 +18,3 @@ function Default() {
     return (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
         react_1.default.createElement("div", { className: "space-x-4 space-y-4 p-8" }, loaders)));
 }
-exports.Default = Default;

package/lozenge/lozenge.js

@@ -29,7 +29,7 @@ const react_1 = __importStar(require("react"));
 exports.Lozenge = (0, react_1.forwardRef)((props, ref) => {
     var _a, _b;
     const lozengeClassName = (0, cx_1.cx)("uxf-lozenge", `uxf-lozenge--color-${(_a = props.color) !== null && _a !== void 0 ? _a : "default"}`, `uxf-lozenge--variant-${(_b = props.variant) !== null && _b !== void 0 ? _b : "default"}`, props.className);
-    return (react_1.default.createElement("div", { ref: ref, className: lozengeClassName },
+    return (react_1.default.createElement("div", { className: lozengeClassName, ref: ref },
         react_1.default.createElement("span", { className: "uxf-lozenge__text" }, props.children)));
 });
 exports.Lozenge.displayName = "UxfLozenge";

package/lozenge/lozenge.stories.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.Default = Default;
 const lozenge_1 = require("@uxf/ui/lozenge");
 const react_1 = __importDefault(require("react"));
 const storybook_config_1 = require("../utils/storybook-config");
@@ -14,4 +14,3 @@ function Default() {
         " / ",
         color))))));
 }
-exports.Default = Default;

package/message/message-content.js

@@ -35,7 +35,7 @@ const MessageContent = (props) => {
                 react_1.default.createElement("p", { className: "uxf-message__description" }, props.description)),
             props.children),
         react_1.default.createElement("div", { className: "uxf-message__buttons-wrapper" },
-            react_1.default.createElement(button_1.Button, { className: "uxf-message__cancel-button", variant: "secondary", isFullWidth: isCentered, onClick: onCancelClick }, props.cancelLabel),
+            react_1.default.createElement(button_1.Button, { className: "uxf-message__cancel-button", isFullWidth: isCentered, onClick: onCancelClick, variant: "secondary" }, props.cancelLabel),
             props.onAccept ? (react_1.default.createElement(button_1.Button, { className: "uxf-message__accept-button", color: BUTTON_COLOR[props.color], isFullWidth: isCentered, onClick: onAcceptClick }, (_c = props.acceptLabel) !== null && _c !== void 0 ? _c : "Ok")) : null)));
 };
 exports.MessageContent = MessageContent;

package/message/message-service.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { MessageProps, MessageRef } from "./message";
 declare function getMessageRef(): import("react").RefObject<MessageRef>;
 declare function openAlert(confirm: Omit<MessageProps, "onAccept" | "acceptLabel">): void;

package/message/message.js

@@ -41,7 +41,7 @@ exports.Message = (0, react_1.forwardRef)((props, ref) => {
         close: innerRef.current.close,
         message: innerRef.current.message,
     }), []);
-    return content ? (react_1.default.createElement(dialog_1.Dialog, { className: (0, cx_1.cx)("uxf-message", `uxf-message--variant-${(_a = content.variant) !== null && _a !== void 0 ? _a : "simple"}`, `uxf-message--color-${content.color}`, content.className), disableBackdropClose: true, onClose: close, open: !!content },
+    return content ? (react_1.default.createElement(dialog_1.Dialog, { className: (0, cx_1.cx)("uxf-message", `uxf-message--variant-${(_a = content.variant) !== null && _a !== void 0 ? _a : "simple"}`, `uxf-message--color-${content.color}`, content.className), disableBackdropClose: true, onClose: close, open: true },
         react_1.default.createElement(message_content_1.MessageContent, { CustomIconComponent: content.CustomIconComponent, acceptLabel: content.acceptLabel, cancelLabel: content.cancelLabel, color: content.color, description: content.description, icon: content.icon, onAccept: content.onAccept, onCancel: content.onCancel, onClose: close, title: content.title, variant: content.variant }, content.children))) : null;
 });
 exports.Message.displayName = "UxfUiMessage";