@uxf/ui 11.48.4 → 11.49.1

package/components.d.ts

@@ -30,7 +30,7 @@ import * as formComponentStories from "./form-component/form-component.stories";
 import * as iconStories from "./icon/icon.stories";
 import * as iconButtonStories from "./icon-button/icon-button.stories";
 import * as imageGalleryStories from "./image-gallery/image-gallery.stories";
-import * as infoboxStories from "./info-box/info-box.stories";
+import * as infoBoxStories from "./info-box/info-box.stories";
 import * as inputStories from "./input/input.stories";
 import * as labelStories from "./label/label.stories";
 import * as layoutStories from "./layout/layout.stories";
@@ -187,9 +187,9 @@ export declare const components: {
         readonly title: "ImageGallery";
         readonly stories: typeof imageGalleryStories;
     };
-    readonly infobox: {
-        readonly title: "Infobox";
-        readonly stories: typeof infoboxStories;
+    readonly "info-box": {
+        readonly title: "InfoBox";
+        readonly stories: typeof infoBoxStories;
     };
     readonly input: {
         readonly title: "Input";

package/components.js

@@ -57,7 +57,7 @@ const formComponentStories = __importStar(require("./form-component/form-compone
 const iconStories = __importStar(require("./icon/icon.stories"));
 const iconButtonStories = __importStar(require("./icon-button/icon-button.stories"));
 const imageGalleryStories = __importStar(require("./image-gallery/image-gallery.stories"));
-const infoboxStories = __importStar(require("./info-box/info-box.stories"));
+const infoBoxStories = __importStar(require("./info-box/info-box.stories"));
 const inputStories = __importStar(require("./input/input.stories"));
 const labelStories = __importStar(require("./label/label.stories"));
 const layoutStories = __importStar(require("./layout/layout.stories"));
@@ -214,9 +214,9 @@ exports.components = {
         title: "ImageGallery",
         stories: imageGalleryStories
     },
-    "infobox": {
-        title: "Infobox",
-        stories: infoboxStories
+    "info-box": {
+        title: "InfoBox",
+        stories: infoBoxStories
     },
     "input": {
         title: "Input",

package/css/dialog.css

@@ -1,5 +1,4 @@
 .uxf-dialog {
-    --panel-max-w: unset;
     --panel-border-radius: theme("borderRadius.2xl");
 
     position: relative;
@@ -30,6 +29,10 @@
         }
     }
 
+    &__panel-wrapper {
+        display: contents;
+    }
+
     &__panel {
         background-color: theme("colors.white");
         border-top-left-radius: var(--panel-border-radius);
@@ -48,6 +51,26 @@
         @screen sm {
             border-radius: var(--panel-border-radius);
         }
+
+        &--width-xs {
+            --panel-max-w: theme("maxWidth.xs");
+        }
+
+        &--width-sm {
+            --panel-max-w: theme("maxWidth.sm");
+        }
+
+        &--width-default {
+            --panel-max-w: theme("maxWidth.lg");
+        }
+
+        &--width-lg {
+            --panel-max-w: theme("maxWidth.3xl");
+        }
+
+        &--width-xl {
+            --panel-max-w: theme("maxWidth.5xl");
+        }
     }
 
     &--variant-drawer-right {

package/css/info-box.css

@@ -1,74 +1,81 @@
-.uxf-infobox {
-    --infobox-bg-color: transparent;
-    --infobox-border-color: transparent;
+.uxf-info-box {
+    --info-box-bg-color: transparent;
+    --info-box-border-color: transparent;
     --i-w: theme("spacing.5");
     --i-h: theme("spacing.5");
 
     @apply transition;
 
-    background-color: var(--infobox-bg-color);
-    border: 1px solid var(--infobox-border-color);
+    background-color: var(--info-box-bg-color);
+    border: 1px solid var(--info-box-border-color);
     border-radius: theme("borderRadius.lg");
     color: theme("colors.base_text_high_emphasis");
     display: flex;
     font-size: theme("fontSize.sm");
     font-weight: theme("fontWeight.medium");
-    gap: theme("spacing.2");
-    padding: theme("spacing.2");
+    gap: theme("spacing.3");
+    min-height: 48px;
+    padding: theme("spacing.2") theme("spacing.4");
+
+    &--centered {
+        align-items: center;
+    }
 
     &__text-wrapper {
         display: flex;
         flex-direction: column;
         gap: 6px;
-        justify-content: center;
-        min-height: theme("height.8");
+    }
 
-        .uxf-info-box__title {
-            font-size: theme("fontSize.medium");
-            font-weight: theme("fontWeight.semibold");
-            margin-top: 6px;
-        }
+    &__title {
+        font-size: theme("fontSize.medium");
+        font-weight: theme("fontWeight.semibold");
+    }
+
+    &__text {
+        font-weight: theme("fontWeight.normal");
+        margin-right: theme("spacing.2");
+        padding-inline: theme("spacing.1");
+    }
 
-        .uxf-info-box__text {
-            font-weight: theme("fontWeight.normal");
-            margin-right: theme("spacing.2");
-            padding: theme("spacing.1") 0;
-        }
+    &__action-component {
+        align-self: center;
+        margin-left: auto;
     }
 
     &--brand {
         --uxf-icon-color: theme("colors.brand_icon_on_muted");
-        --infobox-bg-color: theme("colors.brand_surface_muted");
-        --infobox-border-color: theme("colors.brand_border");
+        --info-box-bg-color: theme("colors.brand_surface_muted");
+        --info-box-border-color: theme("colors.brand_border");
     }
 
     &--info {
         --uxf-icon-color: theme("colors.info_icon_on_muted");
-        --infobox-bg-color: theme("colors.info_surface_muted");
-        --infobox-border-color: theme("colors.info_border");
+        --info-box-bg-color: theme("colors.info_surface_muted");
+        --info-box-border-color: theme("colors.info_border");
     }
 
     &--negative {
         --uxf-icon-color: theme("colors.negative_icon_on_muted");
-        --infobox-bg-color: theme("colors.negative_surface_muted");
-        --infobox-border-color: theme("colors.negative_border");
+        --info-box-bg-color: theme("colors.negative_surface_muted");
+        --info-box-border-color: theme("colors.negative_border");
     }
 
     &--neutral {
         --uxf-icon-color: theme("colors.neutral_icon_on_muted");
-        --infobox-bg-color: theme("colors.neutral_surface_muted");
-        --infobox-border-color: theme("colors.neutral_border");
+        --info-box-bg-color: theme("colors.neutral_surface_muted");
+        --info-box-border-color: theme("colors.neutral_border");
     }
 
     &--positive {
         --uxf-icon-color: theme("colors.positive_icon_on_muted");
-        --infobox-bg-color: theme("colors.positive_surface_muted");
-        --infobox-border-color: theme("colors.positive_border");
+        --info-box-bg-color: theme("colors.positive_surface_muted");
+        --info-box-border-color: theme("colors.positive_border");
     }
 
     &--warning {
         --uxf-icon-color: theme("colors.warning_icon_on_muted");
-        --infobox-bg-color: theme("colors.warning_surface_muted");
-        --infobox-border-color: theme("colors.warning_border");
+        --info-box-bg-color: theme("colors.warning_surface_muted");
+        --info-box-border-color: theme("colors.warning_border");
     }
 }

package/css/modal-dialog.css

@@ -7,17 +7,13 @@
     line-height: var(--uxf-typo-main-line-height);
     padding: theme("spacing.4");
 
-    &__icon {
-        flex-shrink: 0;
-        height: theme("spacing.5");
-        transform: translateY(2px);
-        width: theme("spacing.5");
-    }
-
     &__header {
-        align-items: flex-start;
+        align-items: center;
         display: flex;
-        gap: theme("spacing.2");
+        gap: theme("spacing.3");
+
+        --i-h: theme("spacing.5");
+        --i-w: theme("spacing.5");
     }
 
     &__title {

package/dialog/dialog-panel.d.ts

@@ -0,0 +1,12 @@
+import { DialogPanelWidths } from "@uxf/ui/dialog/theme";
+import React, { ReactNode } from "react";
+export type DialogPanelWidth = keyof DialogPanelWidths;
+export interface DialogPanelProps {
+    children?: ReactNode;
+    className?: string;
+    width?: DialogPanelWidth;
+}
+export declare function DialogPanel(props: DialogPanelProps): React.JSX.Element;
+export declare namespace DialogPanel {
+    var displayName: string;
+}

package/dialog/dialog-panel.js

@@ -0,0 +1,13 @@
+"use strict";
+"use client";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogPanel = DialogPanel;
+const react_1 = __importDefault(require("react"));
+function DialogPanel(props) {
+    var _a, _b;
+    return (react_1.default.createElement("div", { className: `uxf-dialog__panel uxf-dialog__panel--width-${(_a = props.width) !== null && _a !== void 0 ? _a : "default"} ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}` }, props.children));
+}
+DialogPanel.displayName = "UxfUiDialogPanel";

package/dialog/dialog.d.ts

@@ -1,7 +1,8 @@
 import { UseFloatingReturn } from "@floating-ui/react";
-import { DialogVariant, DialogWidth } from "@uxf/ui/dialog/theme";
+import { DialogVariants } from "@uxf/ui/dialog/theme";
 import React, { FC, HTMLProps, ReactNode, Ref } from "react";
 type GetFloatingElementProps = (userProps?: HTMLProps<HTMLElement>) => Record<string, unknown>;
+export type DialogVariant = keyof DialogVariants;
 export interface DialogProps {
     children?: ReactNode;
     className?: string;
@@ -11,9 +12,8 @@ export interface DialogProps {
     getFloatingProps: GetFloatingElementProps;
     isOpen: boolean;
     variant?: DialogVariant;
-    width?: DialogWidth;
 }
-type DialogProviderProps = Pick<DialogProps, "variant" | "width" | "className" | "children">;
+type DialogProviderProps = Pick<DialogProps, "variant" | "className" | "children">;
 export declare const Dialog: React.NamedExoticComponent<DialogProps>;
 type DialogCloseHandler = () => void;
 export declare function useDialog(dialogConfig?: {

package/dialog/dialog.js

@@ -32,14 +32,14 @@ const use_latest_1 = require("@uxf/core-react/hooks/use-latest");
 const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
 const react_2 = __importStar(require("react"));
 exports.Dialog = (0, react_2.memo)((props) => {
-    var _a, _b, _c;
+    var _a, _b;
     return (react_2.default.createElement(react_1.FloatingPortal, null,
         react_2.default.createElement(show_1.Show, { when: props.isOpen },
-            react_2.default.createElement(react_1.FloatingOverlay, { className: `uxf-dialog uxf-dialog__backdrop uxf-dialog--variant-${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"} ${(_b = props.className) !== null && _b !== void 0 ? _b : ""} uxf-dialog--width-${(_c = props.width) !== null && _c !== void 0 ? _c : "default"}`, lockScroll: true },
+            react_2.default.createElement(react_1.FloatingOverlay, { className: `uxf-dialog uxf-dialog__backdrop uxf-dialog--variant-${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"} ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}`, lockScroll: true },
                 react_2.default.createElement(react_1.FloatingFocusManager, { context: props.context, guards: true, initialFocus: 0, modal: true },
                     react_2.default.createElement("div", { className: "uxf-dialog__wrapper" },
                         react_2.default.createElement("div", { className: "uxf-dialog__body" },
-                            react_2.default.createElement("div", { className: "uxf-dialog__panel", ref: props.forwardedRef, ...props.getFloatingProps() }, props.children))))))));
+                            react_2.default.createElement("div", { className: "uxf-dialog__panel-wrapper", ref: props.forwardedRef, ...props.getFloatingProps() }, props.children))))))));
 });
 exports.Dialog.displayName = "UxfUiDialog";
 function useDialog(dialogConfig) {
@@ -64,7 +64,7 @@ function useDialog(dialogConfig) {
     const { getReferenceProps, getFloatingProps } = (0, react_1.useInteractions)([click, role, dismiss]);
     const latestContext = (0, use_latest_1.useLatest)(context);
     const DialogProvider = (0, react_2.useCallback)((config) => {
-        return (react_2.default.createElement(exports.Dialog, { className: config === null || config === void 0 ? void 0 : config.className, context: latestContext.current, forwardedRef: refs.setFloating, getFloatingProps: getFloatingProps, isOpen: Boolean(content), variant: config === null || config === void 0 ? void 0 : config.variant, width: config === null || config === void 0 ? void 0 : config.width }, content));
+        return (react_2.default.createElement(exports.Dialog, { className: config === null || config === void 0 ? void 0 : config.className, context: latestContext.current, forwardedRef: refs.setFloating, getFloatingProps: getFloatingProps, isOpen: Boolean(content), variant: config === null || config === void 0 ? void 0 : config.variant }, content));
     }, [latestContext, refs.setFloating, getFloatingProps, content]);
     return {
         openDialog: setContent,

package/dialog/index.d.ts

@@ -1,2 +1,4 @@
 export { Dialog } from "./dialog";
-export type { DialogProps } from "./dialog";
+export type { DialogProps, DialogVariant } from "./dialog";
+export { DialogPanel } from "./dialog-panel";
+export type { DialogPanelProps, DialogPanelWidth } from "./dialog-panel";

package/dialog/index.js

@@ -1,5 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Dialog = void 0;
+exports.DialogPanel = exports.Dialog = void 0;
 var dialog_1 = require("./dialog");
 Object.defineProperty(exports, "Dialog", { enumerable: true, get: function () { return dialog_1.Dialog; } });
+var dialog_panel_1 = require("./dialog-panel");
+Object.defineProperty(exports, "DialogPanel", { enumerable: true, get: function () { return dialog_panel_1.DialogPanel; } });

package/dialog/theme.d.ts

@@ -2,12 +2,10 @@ export interface DialogVariants {
     default: true;
     "drawer-right": true;
 }
-export type DialogVariant = keyof DialogVariants;
-export interface DialogWidths {
+export interface DialogPanelWidths {
     xs: true;
     sm: true;
     default: true;
     lg: true;
     xl: true;
 }
-export type DialogWidth = keyof DialogWidths;

package/info-box/info-box.d.ts

@@ -4,10 +4,10 @@ import { InfoBoxColor } from "./types";
 import IntrinsicElements = React.JSX.IntrinsicElements;
 export declare const getDefaultIconName: (color: InfoBoxColor) => IconName;
 export interface InfoboxProps {
-    action?: ReactNode;
+    actionElement?: ReactNode;
     className?: string;
     color?: InfoBoxColor;
-    description: ReactNode;
+    description?: ReactNode;
     icon?: IconName | false;
     title?: ReactNode;
     titleElement?: keyof Pick<IntrinsicElements, "p" | "h1" | "h2" | "h3" | "h4">;

package/info-box/info-box.js

@@ -25,6 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InfoBox = exports.getDefaultIconName = void 0;
 const show_1 = require("@uxf/core-react/components/show");
+const is_nil_1 = require("@uxf/core/utils/is-nil");
 const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
 const react_1 = __importStar(require("react"));
 const icon_1 = require("../icon");
@@ -48,12 +49,13 @@ exports.InfoBox = (0, react_1.forwardRef)((props, ref) => {
     var _a, _b, _c;
     const color = (_a = props.color) !== null && _a !== void 0 ? _a : "warning";
     const Component = (_b = props.titleElement) !== null && _b !== void 0 ? _b : "p";
-    return (react_1.default.createElement("div", { className: `uxf-infobox uxf-infobox--${color} ${(_c = props.className) !== null && _c !== void 0 ? _c : ""}`, ref: ref },
-        props.icon !== false && react_1.default.createElement(icon_1.Icon, { name: props.icon || (0, exports.getDefaultIconName)(color) }),
-        react_1.default.createElement("div", { className: "uxf-infobox__text-wrapper" },
+    return (react_1.default.createElement("div", { className: `uxf-info-box uxf-info-box--${color} ${(0, is_nil_1.isNil)(props.description) || (0, is_nil_1.isNil)(props.title) ? "uxf-info-box--centered" : ""} ${(_c = props.className) !== null && _c !== void 0 ? _c : ""}`, ref: ref },
+        props.icon !== false && (react_1.default.createElement(icon_1.Icon, { className: "uxf-info-box__icon", name: props.icon || (0, exports.getDefaultIconName)(color) })),
+        react_1.default.createElement("div", { className: "uxf-info-box__text-wrapper" },
             react_1.default.createElement(show_1.Show, { when: (0, is_not_nil_1.isNotNil)(props.title) },
-                react_1.default.createElement(Component, { className: "uxf-infobox__title" }, props.title)),
-            react_1.default.createElement("p", { className: "uxf-infobox__description" }, props.description)),
-        (0, is_not_nil_1.isNotNil)(props.action) && react_1.default.createElement("div", { className: "uxf-info-box__action" }, props.action)));
+                react_1.default.createElement(Component, { className: "uxf-info-box__title" }, props.title)),
+            react_1.default.createElement(show_1.Show, { when: (0, is_not_nil_1.isNotNil)(props.description) },
+                react_1.default.createElement("p", { className: "uxf-info-box__description" }, props.description))),
+        (0, is_not_nil_1.isNotNil)(props.actionElement) && (react_1.default.createElement("div", { className: "uxf-info-box__action-component" }, props.actionElement))));
 });
 exports.InfoBox.displayName = "UxfUiInfoBox";

package/info-box/info-box.stories.js

@@ -10,10 +10,11 @@ const info_box_1 = require("./info-box");
 const TEXT = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus faucibus molestie nisl. Cras elementum.";
 function Default() {
     return (react_1.default.createElement("div", { className: "space-y-4 p-4" },
-        react_1.default.createElement(info_box_1.InfoBox, { action: react_1.default.createElement(button_1.Button, { color: "warning", variant: "secondary" }, "Button"), color: "warning", description: TEXT, title: "Warning" }),
-        react_1.default.createElement(info_box_1.InfoBox, { action: react_1.default.createElement(button_1.Button, { color: "positive", variant: "secondary" }, "Button"), color: "positive", description: TEXT, title: "Positive" }),
+        react_1.default.createElement(info_box_1.InfoBox, { actionElement: react_1.default.createElement(button_1.Button, { color: "warning", variant: "secondary" }, "Button"), color: "warning", description: TEXT, title: "Warning" }),
+        react_1.default.createElement(info_box_1.InfoBox, { actionElement: react_1.default.createElement(button_1.Button, { color: "positive", variant: "secondary" }, "Button"), color: "positive", title: "Positive no description" }),
         react_1.default.createElement(info_box_1.InfoBox, { color: "negative", description: TEXT, title: "Negative" }),
         react_1.default.createElement(info_box_1.InfoBox, { color: "info", description: TEXT, title: "Info" }),
         react_1.default.createElement(info_box_1.InfoBox, { color: "brand", description: TEXT, title: "Brand" }),
-        react_1.default.createElement(info_box_1.InfoBox, { color: "neutral", description: TEXT, title: "Neutral" })));
+        react_1.default.createElement(info_box_1.InfoBox, { color: "neutral", description: TEXT, title: "Neutral" }),
+        react_1.default.createElement(info_box_1.InfoBox, { color: "neutral", description: "Neutral no title" })));
 }

package/modal/README.md

@@ -4,21 +4,59 @@
 
 ```css
 @import url("@uxf/ui/dialog/dialog.css");
-@import url("@uxf/ui/modal/modal.css");
 ```
 
-## Implementation
+## Implementation ModalProvider
 
 ```tsx
 import {AppProps} from "next/app";
-import {getModalRef, Modal} from "@uxf/ui/modal";
+import {getModalRef, ModalProvider} from "@uxf/ui/modal";
 
 function App(props: AppProps) {
     return (
         <UiContextProvider value={...}>
             {props.children}
-            <Modal ref={getModalRef()}/>
+            <ModalProvider ref={getModalRef()}/>
         </UiContextProvider>
     );
 }
+
+function Component(props: AppProps) {
+    return (
+        <div>
+            <Button
+                onClick={() =>
+                    openModal({
+                        children: (
+                            <DialogPanel width="xs">Whatever content inside Modal</DialogPanel>
+                        ),
+                        onClose: () => console.log("modal closed"),
+                    })
+                }
+            >
+                Click to open modal - default
+            </Button>
+        </div>
+    );
+}
+
+
+
+```
+
+## Implementation Modal
+
+```tsx
+function Component(props: AppProps) {
+    const [isOpen, setIsOpen] = useState(false);
+    
+    return (
+        <div>
+            <Button onClick={() => setIsOpen(true)}>Click to open modal</Button>
+            <Modal close={() => setIsOpen(false)} isOpen={isOpen}>
+                <DialogPanel width="xs">Whatever content inside Modal</DialogPanel>
+            </Modal>
+        </div>
+    );
+}
 ```

package/modal/index.d.ts

@@ -1,4 +1,4 @@
 export { Modal } from "./modal";
-export type { ModalProps, ModalRef } from "./modal";
+export { ModalProvider } from "./modal-provider";
 export { closeModal, getModalRef, openModal } from "./modal-service";
-export type { ModalWidth } from "./theme";
+export type { ModalProps, ModalProviderProps, ModalRef, ModalVariant } from "./types";

package/modal/index.js

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.openModal = exports.getModalRef = exports.closeModal = exports.Modal = void 0;
+exports.openModal = exports.getModalRef = exports.closeModal = exports.ModalProvider = exports.Modal = void 0;
 var modal_1 = require("./modal");
 Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return modal_1.Modal; } });
+var modal_provider_1 = require("./modal-provider");
+Object.defineProperty(exports, "ModalProvider", { enumerable: true, get: function () { return modal_provider_1.ModalProvider; } });
 var modal_service_1 = require("./modal-service");
 Object.defineProperty(exports, "closeModal", { enumerable: true, get: function () { return modal_service_1.closeModal; } });
 Object.defineProperty(exports, "getModalRef", { enumerable: true, get: function () { return modal_service_1.getModalRef; } });

package/modal/modal-provider.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { ModalRef } from "./types";
+export declare const ModalProvider: React.ForwardRefExoticComponent<React.RefAttributes<ModalRef>>;

package/modal/modal-provider.js

@@ -0,0 +1,57 @@
+"use strict";
+"use client";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalProvider = void 0;
+const react_1 = __importStar(require("react"));
+const dialog_1 = require("../dialog/dialog");
+exports.ModalProvider = (0, react_1.forwardRef)((props, ref) => {
+    var _a, _b;
+    const [content, setContent] = (0, react_1.useState)();
+    const { openDialog, DialogProvider, closeDialog } = (0, dialog_1.useDialog)({
+        onDialogClose: content === null || content === void 0 ? void 0 : content.onClose,
+        isBackdropCloseDisabled: content === null || content === void 0 ? void 0 : content.isBackdropCloseDisabled,
+    });
+    const openModalHandler = (modal) => {
+        openDialog(modal.children);
+        setContent(modal);
+    };
+    const closeModalHandler = () => {
+        if (content === null || content === void 0 ? void 0 : content.onClose) {
+            content.onClose();
+        }
+        closeDialog();
+    };
+    const innerRef = (0, react_1.useRef)({
+        close: closeModalHandler,
+        open: openModalHandler,
+    });
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        close: innerRef.current.close,
+        open: innerRef.current.open,
+    }), []);
+    return (react_1.default.createElement(DialogProvider, { className: `uxf-modal uxf-modal--variant-${(_a = content === null || content === void 0 ? void 0 : content.variant) !== null && _a !== void 0 ? _a : "default"} ${(_b = content === null || content === void 0 ? void 0 : content.className) !== null && _b !== void 0 ? _b : ""}`, variant: content === null || content === void 0 ? void 0 : content.variant }));
+});
+exports.ModalProvider.displayName = "UxfUiModalProvider";

package/modal/modal-service.d.ts

@@ -1,4 +1,4 @@
-import { ModalProps, ModalRef } from "./modal";
+import { ModalProviderProps, ModalRef } from "./types";
 export declare function getModalRef(): import("react").RefObject<ModalRef>;
-export declare function openModal(modal: ModalProps): void;
+export declare function openModal(modal: ModalProviderProps): void;
 export declare function closeModal(): void;

package/modal/modal.d.ts

@@ -1,16 +1,3 @@
-import { ModalVariant, ModalWidth } from "@uxf/ui/modal/theme";
-import React, { ReactNode } from "react";
-import type { DialogProps } from "../dialog";
-export interface ModalProps {
-    children: ReactNode;
-    className?: DialogProps["className"];
-    isBackdropCloseDisabled?: DialogProps["isBackdropCloseDisabled"];
-    onClose?: () => void;
-    variant?: ModalVariant;
-    width?: ModalWidth;
-}
-export interface ModalRef {
-    close: () => void;
-    open: (modal: ModalProps) => void;
-}
-export declare const Modal: React.ForwardRefExoticComponent<React.RefAttributes<ModalRef>>;
+import React from "react";
+import { ModalProps } from "./types";
+export declare function Modal(props: ModalProps): React.JSX.Element;

package/modal/modal.js

@@ -1,57 +1,27 @@
 "use strict";
-"use client";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Modal = void 0;
-const react_1 = __importStar(require("react"));
-const dialog_1 = require("../dialog/dialog");
-exports.Modal = (0, react_1.forwardRef)((props, ref) => {
-    var _a, _b, _c;
-    const [content, setContent] = (0, react_1.useState)();
-    const { openDialog, DialogProvider, closeDialog } = (0, dialog_1.useDialog)({
-        onDialogClose: content === null || content === void 0 ? void 0 : content.onClose,
-        isBackdropCloseDisabled: content === null || content === void 0 ? void 0 : content.isBackdropCloseDisabled,
+exports.Modal = Modal;
+const react_1 = require("@floating-ui/react");
+const use_latest_1 = require("@uxf/core-react/hooks/use-latest");
+const dialog_1 = require("@uxf/ui/dialog");
+const react_2 = __importDefault(require("react"));
+function Modal(props) {
+    var _a, _b;
+    const { refs, context } = (0, react_1.useFloating)({
+        open: props.isOpen,
+        onOpenChange(nextOpen, event, reason) {
+            if (!props.isBackdropCloseDisabled && (reason === "escape-key" || reason === "outside-press")) {
+                props.close();
+            }
+        },
     });
-    const openModalHandler = (modal) => {
-        openDialog(modal.children);
-        setContent(modal);
-    };
-    const closeModalHandler = () => {
-        if (content === null || content === void 0 ? void 0 : content.onClose) {
-            content.onClose();
-        }
-        closeDialog();
-    };
-    const innerRef = (0, react_1.useRef)({
-        close: closeModalHandler,
-        open: openModalHandler,
-    });
-    (0, react_1.useImperativeHandle)(ref, () => ({
-        close: innerRef.current.close,
-        open: innerRef.current.open,
-    }), []);
-    return (react_1.default.createElement(DialogProvider, { className: `uxf-modal uxf-modal--variant-${(_a = content === null || content === void 0 ? void 0 : content.variant) !== null && _a !== void 0 ? _a : "default"} uxf-modal--width-${(_b = content === null || content === void 0 ? void 0 : content.width) !== null && _b !== void 0 ? _b : "default"} ${(_c = content === null || content === void 0 ? void 0 : content.className) !== null && _c !== void 0 ? _c : ""}`, variant: content === null || content === void 0 ? void 0 : content.variant, width: content === null || content === void 0 ? void 0 : content.width }));
-});
-exports.Modal.displayName = "UxfUiModal";
+    const click = (0, react_1.useClick)(context);
+    const role = (0, react_1.useRole)(context);
+    const dismiss = (0, react_1.useDismiss)(context, { outsidePressEvent: "mousedown", escapeKey: true });
+    const { getFloatingProps } = (0, react_1.useInteractions)([click, role, dismiss]);
+    const latestContext = (0, use_latest_1.useLatest)(context);
+    return (react_2.default.createElement(dialog_1.Dialog, { className: `uxf-modal uxf-modal--variant-${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"} ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}`, context: latestContext.current, forwardedRef: refs.setFloating, getFloatingProps: getFloatingProps, isOpen: props.isOpen, variant: props.variant }, props.children));
+}

package/modal/modal.stories.d.ts

@@ -1,2 +1,3 @@
 import React from "react";
 export declare function Default(): React.JSX.Element;
+export declare function ModalProvider(): React.JSX.Element;

package/modal/modal.stories.js

@@ -1,62 +1,109 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = Default;
+exports.ModalProvider = ModalProvider;
 const button_1 = require("@uxf/ui/button");
-const react_1 = __importDefault(require("react"));
+const dialog_1 = require("@uxf/ui/dialog");
+const react_1 = __importStar(require("react"));
+const modal_1 = require("./modal");
 const modal_service_1 = require("./modal-service");
 function Default() {
-    const storyModals = (react_1.default.createElement("div", { className: "light inline-flex flex-col space-y-4" },
-        react_1.default.createElement(button_1.Button, { onClick: () => (0, modal_service_1.openModal)({
-                children: (react_1.default.createElement("div", { className: "p-4" },
-                    react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Modal - default size"),
-                    react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: modal_service_1.closeModal }, "Close modal"))),
-                onClose: () => console.log("modal closed"),
-            }) }, "Click to open modal - default"),
-        react_1.default.createElement(button_1.Button, { onClick: () => (0, modal_service_1.openModal)({
-                children: (react_1.default.createElement("div", { className: "p-4" },
-                    react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Modal - xs size"),
-                    react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: modal_service_1.closeModal }, "Close modal"))),
-                width: "xs",
-            }) }, "Click to open modal - xs"),
-        react_1.default.createElement(button_1.Button, { onClick: () => (0, modal_service_1.openModal)({
-                children: (react_1.default.createElement("div", { className: "p-4" },
-                    react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Modal - sm size"),
-                    react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: modal_service_1.closeModal }, "Close modal"))),
-                width: "sm",
-            }) }, "Click to open modal - sm"),
-        react_1.default.createElement(button_1.Button, { onClick: () => (0, modal_service_1.openModal)({
-                children: (react_1.default.createElement("div", { className: "p-4" },
-                    react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Modal - lg size"),
-                    react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: modal_service_1.closeModal }, "Close modal"))),
-                width: "lg",
-            }) }, "Click to open modal - lg"),
-        react_1.default.createElement(button_1.Button, { onClick: () => (0, modal_service_1.openModal)({
-                children: (react_1.default.createElement("div", { className: "p-4" },
-                    react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Modal - xl size"),
-                    react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: modal_service_1.closeModal }, "Close modal"))),
-                width: "xl",
-            }) }, "Click to open modal - xl"),
-        react_1.default.createElement(button_1.Button, { onClick: () => (0, modal_service_1.openModal)({
-                children: (react_1.default.createElement("div", { className: "p-4" },
-                    react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Modal - dark"),
-                    react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: modal_service_1.closeModal }, "Close modal"))),
-                className: "dark",
-            }) }, "Click to open modal - dark"),
-        react_1.default.createElement(button_1.Button, { onClick: () => (0, modal_service_1.openModal)({
-                children: (react_1.default.createElement("div", { className: "p-4" },
-                    react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Modal - disable backdrop close"),
-                    react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: modal_service_1.closeModal }, "Close modal"))),
-                isBackdropCloseDisabled: true,
-            }) }, "Click to open modal - disable backdrop close"),
-        react_1.default.createElement(button_1.Button, { onClick: () => (0, modal_service_1.openModal)({
-                children: (react_1.default.createElement("div", { className: "p-4" },
-                    react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Modal - variant right drawer"),
-                    react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: modal_service_1.closeModal }, "Close modal"))),
-                variant: "drawer-right",
-            }) }, "Click to open modal - variant right drawer")));
-    return (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
-        react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, storyModals)));
+    const [isOpenXs, setIsOpenXs] = (0, react_1.useState)(false);
+    const [isOpenRightDrawer, setIsOpenRightDrawer] = (0, react_1.useState)(false);
+    const [isOpenDisableBackdrop, setIsOpenDisableBackdrop] = (0, react_1.useState)(false);
+    return (react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" },
+        react_1.default.createElement("div", null,
+            react_1.default.createElement(button_1.Button, { onClick: () => setIsOpenXs(true) }, "Click to open modal xs"),
+            react_1.default.createElement(modal_1.Modal, { close: () => setIsOpenXs(false), isOpen: isOpenXs },
+                react_1.default.createElement(dialog_1.DialogPanel, { width: "xs" }, "Whatever content inside Modal xs"))),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement(button_1.Button, { onClick: () => setIsOpenRightDrawer(true) }, "Click to open modal drawer-right"),
+            react_1.default.createElement(modal_1.Modal, { close: () => setIsOpenRightDrawer(false), isOpen: isOpenRightDrawer, variant: "drawer-right" },
+                react_1.default.createElement(dialog_1.DialogPanel, null, "Whatever content inside Modal drawer-right"))),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement(button_1.Button, { onClick: () => setIsOpenDisableBackdrop(true) }, "Click to open modal DisableBackdrop"),
+            react_1.default.createElement(modal_1.Modal, { close: () => setIsOpenDisableBackdrop(false), isBackdropCloseDisabled: true, isOpen: isOpenDisableBackdrop },
+                react_1.default.createElement(dialog_1.DialogPanel, null,
+                    react_1.default.createElement("div", { className: "p-4" },
+                        react_1.default.createElement("p", null, "Whatever content inside DisableBackdrop:"),
+                        react_1.default.createElement(button_1.Button, { className: "mt-2", onClick: () => setIsOpenDisableBackdrop(false) }, "Close")))))));
+}
+function ModalProvider() {
+    return (react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" },
+        react_1.default.createElement("div", { className: "light inline-flex flex-col space-y-4" },
+            react_1.default.createElement(button_1.Button, { onClick: () => (0, modal_service_1.openModal)({
+                    children: (react_1.default.createElement(dialog_1.DialogPanel, null,
+                        react_1.default.createElement("div", { className: "p-4" },
+                            react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Modal - default size"),
+                            react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: modal_service_1.closeModal }, "Close modal")))),
+                    onClose: () => console.log("modal closed"),
+                }) }, "Click to open modal - default"),
+            react_1.default.createElement(button_1.Button, { onClick: () => (0, modal_service_1.openModal)({
+                    children: (react_1.default.createElement(dialog_1.DialogPanel, { width: "xs" },
+                        react_1.default.createElement("div", { className: "p-4" },
+                            react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Modal - xs size"),
+                            react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: modal_service_1.closeModal }, "Close modal")))),
+                }) }, "Click to open modal - xs"),
+            react_1.default.createElement(button_1.Button, { onClick: () => (0, modal_service_1.openModal)({
+                    children: (react_1.default.createElement(dialog_1.DialogPanel, { width: "sm" },
+                        react_1.default.createElement("div", { className: "p-4" },
+                            react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Modal - sm size"),
+                            react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: modal_service_1.closeModal }, "Close modal")))),
+                }) }, "Click to open modal - sm"),
+            react_1.default.createElement(button_1.Button, { onClick: () => (0, modal_service_1.openModal)({
+                    children: (react_1.default.createElement(dialog_1.DialogPanel, { width: "lg" },
+                        react_1.default.createElement("div", { className: "p-4" },
+                            react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Modal - lg size"),
+                            react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: modal_service_1.closeModal }, "Close modal")))),
+                }) }, "Click to open modal - lg"),
+            react_1.default.createElement(button_1.Button, { onClick: () => (0, modal_service_1.openModal)({
+                    children: (react_1.default.createElement(dialog_1.DialogPanel, { width: "xl" },
+                        react_1.default.createElement("div", { className: "p-4" },
+                            react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Modal - xl size"),
+                            react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: modal_service_1.closeModal }, "Close modal")))),
+                }) }, "Click to open modal - xl"),
+            react_1.default.createElement(button_1.Button, { onClick: () => (0, modal_service_1.openModal)({
+                    children: (react_1.default.createElement(dialog_1.DialogPanel, null,
+                        react_1.default.createElement("div", { className: "p-4" },
+                            react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Modal - dark"),
+                            react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: modal_service_1.closeModal }, "Close modal")))),
+                    className: "dark",
+                }) }, "Click to open modal - dark"),
+            react_1.default.createElement(button_1.Button, { onClick: () => (0, modal_service_1.openModal)({
+                    children: (react_1.default.createElement(dialog_1.DialogPanel, null,
+                        react_1.default.createElement("div", { className: "p-4" },
+                            react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Modal - disable backdrop close"),
+                            react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: modal_service_1.closeModal }, "Close modal")))),
+                    isBackdropCloseDisabled: true,
+                }) }, "Click to open modal - disable backdrop close"),
+            react_1.default.createElement(button_1.Button, { onClick: () => (0, modal_service_1.openModal)({
+                    children: (react_1.default.createElement(dialog_1.DialogPanel, null,
+                        react_1.default.createElement("div", { className: "p-4" },
+                            react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Modal - variant right drawer"),
+                            react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: modal_service_1.closeModal }, "Close modal")))),
+                    variant: "drawer-right",
+                }) }, "Click to open modal - variant right drawer"))));
 }

package/modal/theme.d.ts

@@ -1,13 +1,4 @@
-export interface ModalWidths {
-    xs: true;
-    sm: true;
-    default: true;
-    lg: true;
-    xl: true;
-}
-export type ModalWidth = keyof ModalWidths;
 export interface ModalVariants {
     default: true;
     "drawer-right": true;
 }
-export type ModalVariant = keyof ModalVariants;

package/modal/types.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from "react";
+import type { DialogProps } from "../dialog";
+import { ModalVariants } from "./theme";
+export type ModalVariant = keyof ModalVariants;
+export interface ModalProviderProps {
+    children: ReactNode;
+    className?: DialogProps["className"];
+    isBackdropCloseDisabled?: DialogProps["isBackdropCloseDisabled"];
+    onClose?: () => void;
+    variant?: ModalVariant;
+}
+export interface ModalRef {
+    close: () => void;
+    open: (modal: ModalProviderProps) => void;
+}
+export interface ModalProps {
+    children: ReactNode;
+    className?: DialogProps["className"];
+    close: () => void;
+    isBackdropCloseDisabled?: boolean;
+    isOpen: boolean;
+    variant?: ModalVariant;
+}

package/modal/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/modal-dialog/modal-dialog.d.ts

@@ -1,10 +1,12 @@
 import React, { ReactNode } from "react";
+import { DialogPanelWidth } from "../dialog";
 interface ModalDialogProps {
     children?: ReactNode;
     className?: string;
     footer?: ReactNode;
     icon?: ReactNode;
     title: string;
+    width?: DialogPanelWidth;
 }
 export declare function ModalDialog(props: ModalDialogProps): React.JSX.Element;
 export {};

package/modal-dialog/modal-dialog.js

@@ -5,12 +5,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModalDialog = ModalDialog;
 const react_1 = __importDefault(require("react"));
+const dialog_1 = require("../dialog");
 function ModalDialog(props) {
-    var _a;
-    return (react_1.default.createElement("div", { className: `uxf-modal-dialog ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` },
-        react_1.default.createElement("div", { className: "uxf-modal-dialog__header" },
-            props.icon && react_1.default.createElement("div", { className: "uxf-modal-dialog__icon" }, props.icon),
-            react_1.default.createElement("div", { className: "uxf-modal-dialog__title" }, props.title)),
-        props.children && react_1.default.createElement("div", { className: "uxf-modal-dialog__text" }, props.children),
-        props.footer && react_1.default.createElement("div", { className: "uxf-modal-dialog__footer" }, props.footer)));
+    var _a, _b;
+    return (react_1.default.createElement(dialog_1.DialogPanel, { width: (_a = props.width) !== null && _a !== void 0 ? _a : "xs" },
+        react_1.default.createElement("div", { className: `uxf-modal-dialog ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}` },
+            react_1.default.createElement("div", { className: "uxf-modal-dialog__header" },
+                props.icon,
+                react_1.default.createElement("div", { className: "uxf-modal-dialog__title" }, props.title)),
+            props.children && react_1.default.createElement("div", { className: "uxf-modal-dialog__text" }, props.children),
+            props.footer && react_1.default.createElement("div", { className: "uxf-modal-dialog__footer" }, props.footer))));
 }

package/modal-dialog/modal-dialog.stories.js

@@ -21,8 +21,8 @@ function Default() {
                 react_1.default.createElement(button_1.Button, { color: "positive" }, "Save")), icon: react_1.default.createElement(icon_1.Icon, { color: "positive", name: "youtube" }), title: "Positive dialog asda ksdjahs kjdhakj shdk jahksdjh kajsdh k" }, "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat volutpat. Praesent dapibus. Vestibulum fermentum tortor id mi."),
         react_1.default.createElement(modal_dialog_1.ModalDialog, { footer: react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(button_1.Button, { variant: "text" }, "Cancel"),
-                react_1.default.createElement(button_1.Button, { color: "negative" }, "Save")), icon: react_1.default.createElement(icon_1.Icon, { color: "negative", name: "xmark" }), title: "Negative dialog" }, "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat volutpat. Praesent dapibus. Vestibulum fermentum tortor id mi."),
+                react_1.default.createElement(button_1.Button, { color: "negative" }, "Save")), icon: react_1.default.createElement(icon_1.Icon, { color: "negative", name: "xmark", size: 48 }), title: "Negative dialog" }, "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat volutpat. Praesent dapibus. Vestibulum fermentum tortor id mi."),
         react_1.default.createElement(modal_dialog_1.ModalDialog, { footer: react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(button_1.Button, { variant: "text" }, "Cancel"),
-                react_1.default.createElement(button_1.Button, { color: "info" }, "Save")), icon: react_1.default.createElement(icon_1.Icon, { color: "info", name: "circle-info" }), title: "Info dialog" }, "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat volutpat. Praesent dapibus. Vestibulum fermentum tortor id mi.")));
+                react_1.default.createElement(button_1.Button, { color: "info" }, "Save")), icon: react_1.default.createElement(icon_1.Icon, { color: "info", name: "circle-info" }), title: "Info dialog", width: "lg" }, "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat volutpat. Praesent dapibus. Vestibulum fermentum tortor id mi.")));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/ui",
-    "version": "11.48.4",
+    "version": "11.49.1",
     "description": "",
     "publishConfig": {
         "access": "public"

package/readmes.d.ts

@@ -32,7 +32,7 @@ export declare const readmes: {
     readonly icon: typeof alertBubbleReadme;
     readonly "icon-button": typeof alertBubbleReadme;
     readonly "image-gallery": typeof alertBubbleReadme;
-    readonly infobox: typeof alertBubbleReadme;
+    readonly "info-box": typeof alertBubbleReadme;
     readonly input: typeof alertBubbleReadme;
     readonly label: typeof alertBubbleReadme;
     readonly layout: typeof alertBubbleReadme;

package/readmes.js

@@ -98,7 +98,7 @@ exports.readmes = {
     "icon": README_md_30.default,
     "icon-button": README_md_31.default,
     "image-gallery": README_md_32.default,
-    "infobox": README_md_33.default,
+    "info-box": README_md_33.default,
     "input": README_md_34.default,
     "label": README_md_35.default,
     "layout": README_md_36.default,

package/css/modal.css

@@ -1,21 +0,0 @@
-.uxf-modal {
-    &--width-xs {
-        --panel-max-w: theme("maxWidth.xs");
-    }
-
-    &--width-sm {
-        --panel-max-w: theme("maxWidth.sm");
-    }
-
-    &--width-default {
-        --panel-max-w: theme("maxWidth.lg");
-    }
-
-    &--width-lg {
-        --panel-max-w: theme("maxWidth.3xl");
-    }
-
-    &--width-xl {
-        --panel-max-w: theme("maxWidth.5xl");
-    }
-}