@pismo/marola 0.0.1-alpha.6 → 0.0.1-alpha.8

package/dist/components/Button/Button.d.ts

@@ -3,17 +3,25 @@ import { ReactNode } from 'react';
 
 type Variant = 'primary' | 'secondary' | 'quick';
 type ButtonCoreProps = {
+    /** Button to display and act in a loading state */
     loading?: boolean;
+    /** Button to display and act in a disabled state */
     disabled?: boolean;
+    /** Space seperated list of CSS classes to apply */
     className?: string;
+    /** Text or children to display */
     children: ReactNode;
+    /** Space seperated list of CSS classes to apply */
     variant?: Variant;
 };
 interface ButtonPropsWithLink extends ButtonCoreProps {
+    /** link for component to navigate to, if provide component will be an anchor */
     link: string;
 }
 interface ButtonPropsWithOnClick extends ButtonCoreProps {
+    /** functionality to perform once clicked */
     onClick: () => void;
+    /** HTML type of button */
     type?: HTMLButtonElement['type'];
 }
 export type ButtonProps = Either<ButtonPropsWithLink, ButtonPropsWithOnClick>;

package/dist/components/Button/Button.js

@@ -3,7 +3,7 @@ import { jsx as e, jsxs as a } from "react/jsx-runtime";
 import { forwardRef as m, useMemo as c } from "react";
 import { c as y } from "../../clsx-DB4S2d7J.js";
 import { LoadingSpinner as g } from "../LoadingSpinner/LoadingSpinner.js";
-import { B as f } from "../../Button-W6tM-_IT.js";
+import { B as f } from "../../Button-B1umG8kJ.js";
 const k = "_h1_2qr61_1", p = "_h2_2qr61_11", w = "_h3_2qr61_21", x = "_h4_2qr61_31", N = "_body_2qr61_41", v = "_quote_2qr61_75", B = "_form__input_2qr61_98", j = "_form__hint_2qr61_103", S = "_form__label_2qr61_108", $ = "_form__dropdown_2qr61_113", C = "_table__header_2qr61_131", L = "_table__body_2qr61_136", M = "_button_2qr61_159", r = {
   h1: k,
   "h1--bold": "_h1--bold_2qr61_7",

package/dist/components/Button/Button.stories.d.ts

@@ -0,0 +1,60 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./Button').ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+    tags: string[];
+    decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+        link: string;
+        loading?: boolean | undefined;
+        disabled?: boolean | undefined;
+        className?: string | undefined;
+        children: import('react').ReactNode;
+        variant?: ("primary" | "secondary" | "quick") | undefined;
+        type?: undefined;
+        onClick?: undefined;
+        ref?: import('react').LegacyRef<HTMLButtonElement> | undefined;
+        key?: import('react').Key | null | undefined;
+    } | {
+        onClick: () => void;
+        type?: "button" | "submit" | "reset" | undefined;
+        loading?: boolean | undefined;
+        disabled?: boolean | undefined;
+        className?: string | undefined;
+        children: import('react').ReactNode;
+        variant?: ("primary" | "secondary" | "quick") | undefined;
+        link?: undefined;
+        ref?: import('react').LegacyRef<HTMLButtonElement> | undefined;
+        key?: import('react').Key | null | undefined;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+    argTypes: {
+        onClick: {
+            if: {
+                arg: string;
+                exists: false;
+            };
+        };
+        type: {
+            control: {
+                type: "text";
+            };
+            if: {
+                arg: string;
+                exists: true;
+            };
+        };
+        link: {
+            control: {
+                type: "text";
+            };
+            if: {
+                arg: string;
+                exists: false;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Simple: Story;
+export declare const Link: Story;

package/dist/components/Button/Button.stories.js

@@ -0,0 +1,40 @@
+import '../../assets/global.css';
+import { jsx as t } from "react/jsx-runtime";
+/* empty css                    */
+import { Button as i } from "./Button.js";
+import "react";
+import "../Dialog/Backdrop.js";
+import "../Typography/Typography.js";
+import "../IconButton/IconButton.js";
+import "../Table/Table.js";
+import "../Tabs/Tabs.js";
+const d = {
+  title: "Components/Button",
+  component: i,
+  tags: ["autodocs"],
+  decorators: [
+    (o) => /* @__PURE__ */ t("div", { style: { padding: "1em" }, children: /* @__PURE__ */ t(o, {}) })
+  ],
+  argTypes: {
+    onClick: {
+      if: { arg: "link", exists: !1 }
+    },
+    type: {
+      control: { type: "text" },
+      if: { arg: "onClick", exists: !0 }
+    },
+    link: {
+      control: { type: "text" },
+      if: { arg: "onClick", exists: !1 }
+    }
+  }
+}, k = {
+  args: { children: "Button", onClick: () => alert("Button was clicked!") }
+}, f = {
+  args: { children: "Button", link: "https://marola.pismolabs.io" }
+};
+export {
+  f as Link,
+  k as Simple,
+  d as default
+};

package/dist/components/Dialog/CloseIconButton.js

@@ -1,20 +1,20 @@
 import { jsx as s } from "react/jsx-runtime";
-import { W as l } from "../../react-CGNQ6M5x.js";
+import { Icon as r } from "../Icon/Icon.js";
 import { s as t } from "../../Dialog.module-CGVM5V_D.js";
-import { B as r } from "../../Button-W6tM-_IT.js";
-const m = ({ handleOnClose: a, className: o }) => {
-  const i = o != null ? t["dialog__close-icon "] + o : t["dialog__close-icon"];
+import { B as a } from "../../Button-B1umG8kJ.js";
+const d = ({ handleOnClose: i, className: o }) => {
+  const l = o != null ? t["dialog__close-icon "] + o : t["dialog__close-icon"];
   return /* @__PURE__ */ s(
-    r,
+    a,
     {
-      className: i,
+      className: l,
       "aria-description": "Close dialog",
-      onClick: a,
+      onClick: i,
       "data-testid": "dialog-close-button",
-      children: /* @__PURE__ */ s(l, { icon: "fa/duotone/circle-xmark", size: 32, color: "var(--gray-75)" })
+      children: /* @__PURE__ */ s(r, { icon: "circle-xmark", size: 32, color: "var(--gray-75)" })
     }
   );
 };
 export {
-  m as default
+  d as default
 };

package/dist/components/Dialog/Dialog.d.ts

@@ -6,7 +6,7 @@ import { JSXElementConstructor, ReactElement, ReactNode } from 'react';
 
 export type CloseReason = 'backdropClick' | 'escapeKeyDown' | 'closeButtonClick';
 export interface DialogProps extends ModalProps {
-    /** main children content */
+    /** main content */
     children: ReactElement<unknown, string | JSXElementConstructor<unknown>>;
     /** display title label */
     dialogTitle: ReactNode;
@@ -14,7 +14,8 @@ export interface DialogProps extends ModalProps {
     dialogSubtitle?: ReactNode;
     /** if true, show skeleton */
     isLoading?: boolean;
-    onClose: () => void;
+    /** callback for when close is clicked */
+    onClose?: () => void;
 }
 declare const Dialog: ({ children, dialogTitle, dialogSubtitle, isLoading, onClose, ...props }: DialogProps) => import("react/jsx-runtime").JSX.Element;
 export { Dialog, DialogTitle, Content, Actions };

package/dist/components/Dialog/Dialog.js

@@ -1,14 +1,15 @@
 import { jsxs as $, jsx as S } from "react/jsx-runtime";
-import { default as Ve } from "./Actions.js";
+import { default as $e } from "./Actions.js";
 import oe from "./Backdrop.js";
 import re from "./CloseIconButton.js";
-import { default as Ye } from "./Content.js";
+import { default as ze } from "./Content.js";
 import { s as q } from "../../Dialog.module-CGVM5V_D.js";
 import se from "./Title.js";
 import { a as C, _ as ie } from "../../objectWithoutPropertiesLoose-D7Cp0Pg_.js";
 import * as f from "react";
-import { d as Z, P as i, e as ae, g as le, a as ce, u as z, c as de, b as ue } from "../../index-D2P7y2mE.js";
-import { o as w, e as ee, a as fe, u as G, P as pe, H as be } from "../../Portal-P3fPvS3-.js";
+import { u as Z, P as i, e as ae, g as le, a as ce, b as z, c as de, d as ue } from "../../index-CqjC7P5Y.js";
+import { o as w, e as ee, a as fe, u as G } from "../../index-BNWbc5Kh.js";
+import { P as pe, H as be } from "../../Portal-BcdMtRGF.js";
 function X(...e) {
   return e.reduce((t, o) => o == null ? t : function(...s) {
     t.apply(this, s), o.apply(this, s);
@@ -612,7 +613,7 @@ process.env.NODE_ENV !== "production" && (ne.propTypes = {
     root: i.elementType
   })
 });
-const We = ({
+const je = ({
   children: e,
   dialogTitle: t,
   dialogSubtitle: o,
@@ -637,9 +638,9 @@ const We = ({
   }
 );
 export {
-  Ve as Actions,
-  Ye as Content,
-  We as Dialog,
+  $e as Actions,
+  ze as Content,
+  je as Dialog,
   se as DialogTitle,
-  We as default
+  je as default
 };

package/dist/components/Dialog/Dialog.stories.d.ts

@@ -0,0 +1,343 @@
+import { DialogProps } from '../../main';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ children, dialogTitle, dialogSubtitle, isLoading, onClose, ...props }: DialogProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+        children: import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<unknown>>;
+        dialogTitle: import('react').ReactNode;
+        dialogSubtitle?: import('react').ReactNode;
+        isLoading?: boolean | undefined;
+        onClose?: (() => void) | undefined;
+        closeAfterTransition?: boolean | undefined;
+        container?: Element | (() => Element | null) | null | undefined;
+        disableAutoFocus?: boolean | undefined;
+        disableEnforceFocus?: boolean | undefined;
+        disableEscapeKeyDown?: boolean | undefined;
+        disablePortal?: boolean | undefined;
+        disableRestoreFocus?: boolean | undefined;
+        disableScrollLock?: boolean | undefined;
+        hideBackdrop?: boolean | undefined;
+        keepMounted?: boolean | undefined;
+        onBackdropClick?: import('react').ReactEventHandler<{}> | undefined;
+        onTransitionEnter?: (() => void) | undefined;
+        onTransitionExited?: (() => void) | undefined;
+        open: boolean;
+        slotProps?: {
+            root?: import('@mui/base').SlotComponentProps<"div", import('@mui/base').ModalRootSlotPropsOverrides, {
+                children: import('react').ReactElement<any, string | import('react').JSXElementConstructor<any>>;
+                closeAfterTransition: boolean;
+                container?: Element | (() => Element | null) | null | undefined;
+                disableAutoFocus: boolean;
+                disableEnforceFocus: boolean;
+                disableEscapeKeyDown: boolean;
+                disablePortal: boolean;
+                disableRestoreFocus: boolean;
+                disableScrollLock: boolean;
+                hideBackdrop: boolean;
+                keepMounted: boolean;
+                onBackdropClick?: import('react').ReactEventHandler<{}> | undefined;
+                onClose?: ((event: {}, reason: "backdropClick" | "escapeKeyDown") => void) | undefined;
+                onTransitionEnter?: (() => void) | undefined;
+                onTransitionExited?: (() => void) | undefined;
+                open: boolean;
+                slotProps?: any | undefined;
+                slots?: import('@mui/base').ModalSlots | undefined;
+                exited: boolean;
+            }> | undefined;
+            backdrop?: import('@mui/base').SlotComponentProps<"div", import('@mui/base').ModalBackdropSlotPropsOverrides, {
+                children: import('react').ReactElement<any, string | import('react').JSXElementConstructor<any>>;
+                closeAfterTransition: boolean;
+                container?: Element | (() => Element | null) | null | undefined;
+                disableAutoFocus: boolean;
+                disableEnforceFocus: boolean;
+                disableEscapeKeyDown: boolean;
+                disablePortal: boolean;
+                disableRestoreFocus: boolean;
+                disableScrollLock: boolean;
+                hideBackdrop: boolean;
+                keepMounted: boolean;
+                onBackdropClick?: import('react').ReactEventHandler<{}> | undefined;
+                onClose?: ((event: {}, reason: "backdropClick" | "escapeKeyDown") => void) | undefined;
+                onTransitionEnter?: (() => void) | undefined;
+                onTransitionExited?: (() => void) | undefined;
+                open: boolean;
+                slotProps?: any | undefined;
+                slots?: import('@mui/base').ModalSlots | undefined;
+                exited: boolean;
+            }> | undefined;
+        } | undefined;
+        slots?: import('@mui/base').ModalSlots | undefined;
+        slot?: string | undefined;
+        style?: import('react').CSSProperties | undefined;
+        title?: string | undefined;
+        suppressHydrationWarning?: boolean | undefined;
+        className?: string | undefined;
+        color?: string | undefined;
+        id?: string | undefined;
+        lang?: string | undefined;
+        role?: import('react').AriaRole | undefined;
+        tabIndex?: number | undefined;
+        "aria-activedescendant"?: string | undefined;
+        "aria-atomic"?: (boolean | "true" | "false") | undefined;
+        "aria-autocomplete"?: "list" | "none" | "inline" | "both" | undefined;
+        "aria-braillelabel"?: string | undefined;
+        "aria-brailleroledescription"?: string | undefined;
+        "aria-busy"?: (boolean | "true" | "false") | undefined;
+        "aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
+        "aria-colcount"?: number | undefined;
+        "aria-colindex"?: number | undefined;
+        "aria-colindextext"?: string | undefined;
+        "aria-colspan"?: number | undefined;
+        "aria-controls"?: string | undefined;
+        "aria-current"?: boolean | "time" | "true" | "false" | "step" | "date" | "page" | "location" | undefined;
+        "aria-describedby"?: string | undefined;
+        "aria-description"?: string | undefined;
+        "aria-details"?: string | undefined;
+        "aria-disabled"?: (boolean | "true" | "false") | undefined;
+        "aria-dropeffect"?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+        "aria-errormessage"?: string | undefined;
+        "aria-expanded"?: (boolean | "true" | "false") | undefined;
+        "aria-flowto"?: string | undefined;
+        "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+        "aria-haspopup"?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false" | undefined;
+        "aria-hidden"?: (boolean | "true" | "false") | undefined;
+        "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+        "aria-keyshortcuts"?: string | undefined;
+        "aria-label"?: string | undefined;
+        "aria-labelledby"?: string | undefined;
+        "aria-level"?: number | undefined;
+        "aria-live"?: "off" | "assertive" | "polite" | undefined;
+        "aria-modal"?: (boolean | "true" | "false") | undefined;
+        "aria-multiline"?: (boolean | "true" | "false") | undefined;
+        "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+        "aria-orientation"?: "horizontal" | "vertical" | undefined;
+        "aria-owns"?: string | undefined;
+        "aria-placeholder"?: string | undefined;
+        "aria-posinset"?: number | undefined;
+        "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
+        "aria-readonly"?: (boolean | "true" | "false") | undefined;
+        "aria-relevant"?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+        "aria-required"?: (boolean | "true" | "false") | undefined;
+        "aria-roledescription"?: string | undefined;
+        "aria-rowcount"?: number | undefined;
+        "aria-rowindex"?: number | undefined;
+        "aria-rowindextext"?: string | undefined;
+        "aria-rowspan"?: number | undefined;
+        "aria-selected"?: (boolean | "true" | "false") | undefined;
+        "aria-setsize"?: number | undefined;
+        "aria-sort"?: "none" | "other" | "ascending" | "descending" | undefined;
+        "aria-valuemax"?: number | undefined;
+        "aria-valuemin"?: number | undefined;
+        "aria-valuenow"?: number | undefined;
+        "aria-valuetext"?: string | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined;
+        onCopy?: import('react').ClipboardEventHandler<HTMLDivElement> | undefined;
+        onCopyCapture?: import('react').ClipboardEventHandler<HTMLDivElement> | undefined;
+        onCut?: import('react').ClipboardEventHandler<HTMLDivElement> | undefined;
+        onCutCapture?: import('react').ClipboardEventHandler<HTMLDivElement> | undefined;
+        onPaste?: import('react').ClipboardEventHandler<HTMLDivElement> | undefined;
+        onPasteCapture?: import('react').ClipboardEventHandler<HTMLDivElement> | undefined;
+        onCompositionEnd?: import('react').CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionEndCapture?: import('react').CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionStart?: import('react').CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionStartCapture?: import('react').CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionUpdate?: import('react').CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionUpdateCapture?: import('react').CompositionEventHandler<HTMLDivElement> | undefined;
+        onFocus?: import('react').FocusEventHandler<HTMLDivElement> | undefined;
+        onFocusCapture?: import('react').FocusEventHandler<HTMLDivElement> | undefined;
+        onBlur?: import('react').FocusEventHandler<HTMLDivElement> | undefined;
+        onBlurCapture?: import('react').FocusEventHandler<HTMLDivElement> | undefined;
+        onChange?: import('react').FormEventHandler<HTMLDivElement> | undefined;
+        onChangeCapture?: import('react').FormEventHandler<HTMLDivElement> | undefined;
+        onBeforeInput?: import('react').FormEventHandler<HTMLDivElement> | undefined;
+        onBeforeInputCapture?: import('react').FormEventHandler<HTMLDivElement> | undefined;
+        onInput?: import('react').FormEventHandler<HTMLDivElement> | undefined;
+        onInputCapture?: import('react').FormEventHandler<HTMLDivElement> | undefined;
+        onReset?: import('react').FormEventHandler<HTMLDivElement> | undefined;
+        onResetCapture?: import('react').FormEventHandler<HTMLDivElement> | undefined;
+        onSubmit?: import('react').FormEventHandler<HTMLDivElement> | undefined;
+        onSubmitCapture?: import('react').FormEventHandler<HTMLDivElement> | undefined;
+        onInvalid?: import('react').FormEventHandler<HTMLDivElement> | undefined;
+        onInvalidCapture?: import('react').FormEventHandler<HTMLDivElement> | undefined;
+        onLoad?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onError?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onErrorCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onKeyDown?: import('react').KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyDownCapture?: import('react').KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyPress?: import('react').KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyPressCapture?: import('react').KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyUp?: import('react').KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyUpCapture?: import('react').KeyboardEventHandler<HTMLDivElement> | undefined;
+        onAbort?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onAbortCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onCanPlay?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onCanPlayCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onCanPlayThrough?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onCanPlayThroughCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onDurationChange?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onDurationChangeCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onEmptied?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onEmptiedCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onEncrypted?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onEncryptedCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onEnded?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onEndedCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadedData?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadedDataCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadedMetadata?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadedMetadataCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadStart?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadStartCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onPause?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onPauseCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onPlay?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onPlayCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onPlaying?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onPlayingCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onProgress?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onProgressCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onRateChange?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onRateChangeCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onResize?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onResizeCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onSeeked?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onSeekedCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onSeeking?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onSeekingCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onStalled?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onStalledCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onSuspend?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onSuspendCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onTimeUpdate?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onTimeUpdateCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onVolumeChange?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onVolumeChangeCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onWaiting?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onWaitingCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onAuxClick?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+        onAuxClickCapture?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+        onClick?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+        onClickCapture?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+        onContextMenu?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+        onContextMenuCapture?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+        onDoubleClick?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+        onDoubleClickCapture?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+        onDrag?: import('react').DragEventHandler<HTMLDivElement> | undefined;
+        onDragCapture?: import('react').DragEventHandler<HTMLDivElement> | undefined;
+        onDragEnd?: import('react').DragEventHandler<HTMLDivElement> | undefined;
+        onDragEndCapture?: import('react').DragEventHandler<HTMLDivElement> | undefined;
+        onDragEnter?: import('react').DragEventHandler<HTMLDivElement> | undefined;
+        onDragEnterCapture?: import('react').DragEventHandler<HTMLDivElement> | undefined;
+        onDragExit?: import('react').DragEventHandler<HTMLDivElement> | undefined;
+        onDragExitCapture?: import('react').DragEventHandler<HTMLDivElement> | undefined;
+        onDragLeave?: import('react').DragEventHandler<HTMLDivElement> | undefined;
+        onDragLeaveCapture?: import('react').DragEventHandler<HTMLDivElement> | undefined;
+        onDragOver?: import('react').DragEventHandler<HTMLDivElement> | undefined;
+        onDragOverCapture?: import('react').DragEventHandler<HTMLDivElement> | undefined;
+        onDragStart?: import('react').DragEventHandler<HTMLDivElement> | undefined;
+        onDragStartCapture?: import('react').DragEventHandler<HTMLDivElement> | undefined;
+        onDrop?: import('react').DragEventHandler<HTMLDivElement> | undefined;
+        onDropCapture?: import('react').DragEventHandler<HTMLDivElement> | undefined;
+        onMouseDown?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseDownCapture?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseEnter?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseLeave?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseMove?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseMoveCapture?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseOut?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseOutCapture?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseOver?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseOverCapture?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseUp?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseUpCapture?: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+        onSelect?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onSelectCapture?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
+        onTouchCancel?: import('react').TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchCancelCapture?: import('react').TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchEnd?: import('react').TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchEndCapture?: import('react').TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchMove?: import('react').TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchMoveCapture?: import('react').TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchStart?: import('react').TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchStartCapture?: import('react').TouchEventHandler<HTMLDivElement> | undefined;
+        onPointerDown?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerDownCapture?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerMove?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerMoveCapture?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerUp?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerUpCapture?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerCancel?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerCancelCapture?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerEnter?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerLeave?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerOver?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerOverCapture?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerOut?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerOutCapture?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+        onGotPointerCapture?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+        onGotPointerCaptureCapture?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+        onLostPointerCapture?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+        onLostPointerCaptureCapture?: import('react').PointerEventHandler<HTMLDivElement> | undefined;
+        onScroll?: import('react').UIEventHandler<HTMLDivElement> | undefined;
+        onScrollCapture?: import('react').UIEventHandler<HTMLDivElement> | undefined;
+        onWheel?: import('react').WheelEventHandler<HTMLDivElement> | undefined;
+        onWheelCapture?: import('react').WheelEventHandler<HTMLDivElement> | undefined;
+        onAnimationStart?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationStartCapture?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationEnd?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationEndCapture?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationIteration?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationIterationCapture?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
+        onTransitionEnd?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionEndCapture?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
+        ref?: ((instance: HTMLDivElement | null) => void) | import('react').RefObject<HTMLDivElement> | null | undefined;
+        key?: import('react').Key | null | undefined;
+        content?: string | undefined;
+        defaultChecked?: boolean | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined;
+        accessKey?: string | undefined;
+        autoFocus?: boolean | undefined;
+        contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
+        contextMenu?: string | undefined;
+        dir?: string | undefined;
+        draggable?: (boolean | "true" | "false") | undefined;
+        hidden?: boolean | undefined;
+        nonce?: string | undefined;
+        spellCheck?: (boolean | "true" | "false") | undefined;
+        translate?: "no" | "yes" | undefined;
+        radioGroup?: string | undefined;
+        about?: string | undefined;
+        datatype?: string | undefined;
+        inlist?: any;
+        prefix?: string | undefined;
+        property?: string | undefined;
+        rel?: string | undefined;
+        resource?: string | undefined;
+        rev?: string | undefined;
+        typeof?: string | undefined;
+        vocab?: string | undefined;
+        autoCapitalize?: string | undefined;
+        autoCorrect?: string | undefined;
+        autoSave?: string | undefined;
+        itemProp?: string | undefined;
+        itemScope?: boolean | undefined;
+        itemType?: string | undefined;
+        itemID?: string | undefined;
+        itemRef?: string | undefined;
+        results?: number | undefined;
+        security?: string | undefined;
+        unselectable?: "on" | "off" | undefined;
+        inputMode?: "search" | "text" | "none" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
+        is?: string | undefined;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Simple: Story;

package/dist/components/Dialog/Dialog.stories.js

@@ -0,0 +1,59 @@
+import '../../assets/global.css';
+import { jsx as e, Fragment as r, jsxs as i } from "react/jsx-runtime";
+import { useState as m } from "react";
+/* empty css                    */
+import { Button as l } from "../Button/Button.js";
+import { Dialog as a } from "./Dialog.js";
+import "../IconButton/IconButton.js";
+import { Typography as n } from "../Typography/Typography.js";
+import "../Table/Table.js";
+import "../Tabs/Tabs.js";
+import s from "./Content.js";
+import c from "./Actions.js";
+const q = {
+  title: "Components/Dialog",
+  component: a,
+  tags: ["autodocs"],
+  decorators: [
+    (o) => /* @__PURE__ */ e("div", { style: { padding: "1em" }, children: /* @__PURE__ */ e(o, {}) })
+  ]
+};
+function p(o) {
+  const [d, t] = m(!1);
+  return /* @__PURE__ */ i(r, { children: [
+    /* @__PURE__ */ e(l, { onClick: () => t(!0), children: "Open" }),
+    /* @__PURE__ */ e(
+      a,
+      {
+        dialogTitle: o.dialogTitle,
+        dialogSubtitle: o.dialogSubtitle,
+        open: d,
+        onClose: () => {
+          t(!1), o != null && o.onClose && (o == null || o.onClose());
+        },
+        children: /* @__PURE__ */ i(r, { children: [
+          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(n, { element: "p", children: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptates eum ipsum, corrupti, quod eveniet non sed recusandae iusto alias consectetur ipsam! Officia doloremque voluptates molestiae, autem maxime soluta? Blanditiis, consequuntur!" }) }),
+          /* @__PURE__ */ i(c, { children: [
+            /* @__PURE__ */ e(l, { onClick: () => t(!1), children: /* @__PURE__ */ e(n, { variant: "button", children: "Cancel" }) }),
+            /* @__PURE__ */ e(l, { onClick: () => t(!1), children: /* @__PURE__ */ e(n, { variant: "button", children: "Submit" }) }),
+            " "
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+const y = {
+  render: p,
+  args: {
+    dialogTitle: "This is a dialog title",
+    dialogSubtitle: "Here is a dialog sub title",
+    onClose: () => alert("Consider the dialog closed"),
+    children: /* @__PURE__ */ e(r, {}),
+    open: !1
+  }
+};
+export {
+  y as Simple,
+  q as default
+};