@ultraviolet/ui 1.48.1 → 1.50.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import react__default, { ReactNode, ComponentProps, ButtonHTMLAttributes, AriaRole, MouseEventHandler, JSX, MouseEvent, InputHTMLAttributes, FocusEvent, HTMLAttributeAnchorTarget, AnchorHTMLAttributes, Dispatch, SetStateAction, ReactElement, Ref, RefObject, KeyboardEventHandler, HTMLAttributes, CSSProperties, ChangeEventHandler, FocusEventHandler, ForwardRefExoticComponent, ForwardedRef, ElementType, DOMAttributes, TextareaHTMLAttributes } from 'react';
+import react__default, { ReactNode, ComponentProps, ButtonHTMLAttributes, AriaRole, MouseEventHandler, JSX, MouseEvent, InputHTMLAttributes, FocusEvent, ReactElement, HTMLAttributeAnchorTarget, AnchorHTMLAttributes, Dispatch, SetStateAction, Ref, RefObject, KeyboardEventHandler, HTMLAttributes, CSSProperties, ChangeEventHandler, FocusEventHandler, ForwardRefExoticComponent, ForwardedRef, ElementType, DOMAttributes, TextareaHTMLAttributes } from 'react';
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import * as _emotion_styled from '@emotion/styled';
 import * as _emotion_react from '@emotion/react';
@@ -1638,6 +1638,157 @@ type DateInputProps = Pick<ReactDatePickerProps<string, boolean>, 'locale' | 'on
  */
 declare const DateInput: ({ autoFocus, disabled, error, format, label, labelDescription, locale, maxDate, minDate, startDate, endDate, name, onBlur, onChange, onFocus, required, excludeDates, value, selectsRange, className, id, success, helper, size, readOnly, tooltip, "data-testid": dataTestId, }: DateInputProps) => _emotion_react_jsx_runtime.JSX.Element;
 
+type ModalSize = 'large' | 'medium' | 'small' | 'xsmall' | 'xxsmall';
+type ModalPlacement = 'bottom' | 'bottom-left' | 'bottom-right' | 'center' | 'top' | 'top-left' | 'top-right' | 'right' | 'left';
+type ModalState = {
+    /**
+     * @deprecated use show
+     */
+    onOpen: () => void;
+    /**
+     * @deprecated use close
+     */
+    onClose: () => void;
+    toggle: () => void;
+    visible: boolean;
+    modalId: string;
+    /**
+     * @deprecated use close
+     */
+    hide: () => void;
+    close: () => void;
+    show: () => void;
+};
+
+type ModalProps = {
+    id?: string;
+    hideOnEsc?: boolean;
+    hideOnClickOutside?: boolean;
+    preventBodyScroll?: boolean;
+    ariaLabel?: string;
+    disclosure?: ReactElement | ((state: ModalState) => ReactElement);
+    isClosable?: boolean;
+    onClose?: () => void;
+    onBeforeClose?: () => Promise<void> | void;
+    open?: boolean;
+    /**
+     * @deprecated You should use open prop instead
+     */
+    opened?: boolean;
+    placement?: ModalPlacement;
+    size?: ModalSize;
+    /**
+     * @deprecated You should use size prop instead
+     */
+    width?: ModalSize;
+    children: ReactNode | ((args: ModalState) => ReactNode);
+    className?: string;
+    'data-testid'?: string;
+    backdropClassName?: string;
+    /**
+     * @deprecated You should use backdropClassName instead
+     */
+    customDialogBackdropStyles?: react__default.JSX.IntrinsicAttributes['css'];
+    /**
+     * @deprecated You should use className instead
+     */
+    customDialogStyles?: react__default.JSX.IntrinsicAttributes['css'];
+};
+/**
+ * Modal is a component that allows you to display content on top of other content.
+ * It is often used to display a dialog with additional information or to ask for a confirmation.
+ */
+declare const Modal: ({ ariaLabel, id, children, disclosure, hideOnClickOutside, hideOnEsc, isClosable, onClose, onBeforeClose, open, opened, placement, preventBodyScroll, size, className, "data-testid": dataTestId, backdropClassName, width, customDialogStyles, customDialogBackdropStyles, }: ModalProps) => _emotion_react_jsx_runtime.JSX.Element;
+
+declare const DIALOG_SENTIMENTS: ("primary" | "success" | "danger" | "warning")[];
+type DialogSentiment = (typeof DIALOG_SENTIMENTS)[number];
+
+type DialogContextType = {
+    sentiment: DialogSentiment;
+};
+
+type DialogProps = Pick<ComponentProps<typeof Modal>, 'ariaLabel' | 'children' | 'className' | 'data-testid' | 'disclosure' | 'hideOnClickOutside' | 'hideOnEsc' | 'id' | 'isClosable' | 'onBeforeClose' | 'onClose' | 'open' | 'placement'> & {
+    title: string;
+    sentiment: DialogSentiment;
+};
+/**
+ * The Dialog component is used to show content on top of an overlay that requires user interaction.
+ * @experimental This component is experimental and may be subject to breaking changes in the future.
+ */
+declare const Dialog: (({ ariaLabel, className, children, "data-testid": dataTestId, disclosure, hideOnClickOutside, hideOnEsc, id, isClosable, onBeforeClose, onClose, open, placement, sentiment, title, }: DialogProps) => _emotion_react_jsx_runtime.JSX.Element) & {
+    Buttons: ({ secondaryButton, primaryButton, }: {
+        secondaryButton: react.ReactNode;
+        primaryButton: react.ReactNode;
+    }) => _emotion_react_jsx_runtime.JSX.Element;
+    Button: ({ children, onClick, disabled, tooltip, }: {
+        children: react.ReactNode;
+    } & Pick<({
+        type?: "button" | "reset" | "submit" | undefined;
+        autoFocus?: boolean | undefined;
+        variant?: "filled" | "outlined" | "ghost" | undefined;
+        role?: react.AriaRole | undefined;
+        size?: "large" | "small" | "xsmall" | "medium" | undefined;
+        className?: string | undefined;
+        'data-testid'?: string | undefined;
+        sentiment?: "primary" | "secondary" | "neutral" | "success" | "danger" | "warning" | "info" | undefined;
+        disabled?: boolean | undefined;
+        iconPosition?: "left" | "right" | undefined;
+        iconVariant?: "filled" | "outlined" | undefined;
+        fullWidth?: boolean | undefined;
+        isLoading?: boolean | undefined;
+        'aria-label'?: string | undefined;
+        'aria-current'?: boolean | undefined;
+        'aria-controls'?: string | undefined;
+        'aria-expanded'?: boolean | undefined;
+        'aria-haspopup'?: boolean | undefined;
+        onClick?: react.MouseEventHandler<HTMLElement> | undefined;
+        tooltip?: string | undefined;
+        tabIndex?: number | undefined;
+        onMouseDown?: react.MouseEventHandler<HTMLElement> | undefined;
+        onMouseUp?: react.MouseEventHandler<HTMLElement> | undefined;
+        onMouseOut?: react.MouseEventHandler<HTMLElement> | undefined;
+    } & ({
+        children: react.ReactNode;
+        icon?: "address" | "search" | "filter" | "view" | "id" | "alert" | "x" | "anchor" | "cancel" | "close" | "sort" | "download" | "arrow-down" | "arrow-left-bottom" | "arrow-left-double" | "arrow-left" | "arrow-right-bottom" | "arrow-right-double" | "arrow-right" | "arrow-up" | "asterisk" | "attach" | "burger" | "check" | "close-circle-outline" | "copy-content" | "detach" | "dots-horizontal" | "dots-vertical" | "drag-vertical" | "drag-variant" | "east" | "equal" | "escape" | "expand" | "expand-more" | "github" | "instagram" | "linkedIn" | "logout" | "minus" | "north" | "open-in-new" | "organization" | "plus" | "progress-check" | "ray-end-arrow" | "ray-start-arrow" | "ray-start-end" | "ray-top-arrow" | "reboot" | "restore" | "revoke" | "rss" | "send" | "slack" | "south" | "switch_orga" | "upload" | "west" | "youtube" | "auto-fix" | "book-open-outline" | "bullhorn" | "calculator" | "calendar-range" | "chat" | "checkbox-circle-outline" | "clock-outline" | "console" | "credentials" | "credit-card" | "database" | "delete" | "doc" | "earth" | "email-remove-outline" | "email-outline" | "eye-off" | "eye" | "folder" | "help-circle-outline" | "information-outline" | "lock" | "members" | "moon" | "mosaic" | "pen" | "pencil" | "phone" | "play-circle-outline" | "privacy" | "profile" | "rocket" | "settings" | "sun" | "support" | "unlock" | "weather-night" | "pin" | "unpin" | undefined;
+        name?: string | undefined;
+        href?: undefined;
+        target?: undefined;
+        download?: undefined;
+    } | {
+        children?: undefined;
+        icon: "address" | "search" | "filter" | "view" | "id" | "alert" | "x" | "anchor" | "cancel" | "close" | "sort" | "download" | "arrow-down" | "arrow-left-bottom" | "arrow-left-double" | "arrow-left" | "arrow-right-bottom" | "arrow-right-double" | "arrow-right" | "arrow-up" | "asterisk" | "attach" | "burger" | "check" | "close-circle-outline" | "copy-content" | "detach" | "dots-horizontal" | "dots-vertical" | "drag-vertical" | "drag-variant" | "east" | "equal" | "escape" | "expand" | "expand-more" | "github" | "instagram" | "linkedIn" | "logout" | "minus" | "north" | "open-in-new" | "organization" | "plus" | "progress-check" | "ray-end-arrow" | "ray-start-arrow" | "ray-start-end" | "ray-top-arrow" | "reboot" | "restore" | "revoke" | "rss" | "send" | "slack" | "south" | "switch_orga" | "upload" | "west" | "youtube" | "auto-fix" | "book-open-outline" | "bullhorn" | "calculator" | "calendar-range" | "chat" | "checkbox-circle-outline" | "clock-outline" | "console" | "credentials" | "credit-card" | "database" | "delete" | "doc" | "earth" | "email-remove-outline" | "email-outline" | "eye-off" | "eye" | "folder" | "help-circle-outline" | "information-outline" | "lock" | "members" | "moon" | "mosaic" | "pen" | "pencil" | "phone" | "play-circle-outline" | "privacy" | "profile" | "rocket" | "settings" | "sun" | "support" | "unlock" | "weather-night" | "pin" | "unpin" | undefined;
+        name?: string | undefined;
+        href?: undefined;
+        target?: undefined;
+        download?: undefined;
+    } | {
+        children: react.ReactNode;
+        icon?: "address" | "search" | "filter" | "view" | "id" | "alert" | "x" | "anchor" | "cancel" | "close" | "sort" | "download" | "arrow-down" | "arrow-left-bottom" | "arrow-left-double" | "arrow-left" | "arrow-right-bottom" | "arrow-right-double" | "arrow-right" | "arrow-up" | "asterisk" | "attach" | "burger" | "check" | "close-circle-outline" | "copy-content" | "detach" | "dots-horizontal" | "dots-vertical" | "drag-vertical" | "drag-variant" | "east" | "equal" | "escape" | "expand" | "expand-more" | "github" | "instagram" | "linkedIn" | "logout" | "minus" | "north" | "open-in-new" | "organization" | "plus" | "progress-check" | "ray-end-arrow" | "ray-start-arrow" | "ray-start-end" | "ray-top-arrow" | "reboot" | "restore" | "revoke" | "rss" | "send" | "slack" | "south" | "switch_orga" | "upload" | "west" | "youtube" | "auto-fix" | "book-open-outline" | "bullhorn" | "calculator" | "calendar-range" | "chat" | "checkbox-circle-outline" | "clock-outline" | "console" | "credentials" | "credit-card" | "database" | "delete" | "doc" | "earth" | "email-remove-outline" | "email-outline" | "eye-off" | "eye" | "folder" | "help-circle-outline" | "information-outline" | "lock" | "members" | "moon" | "mosaic" | "pen" | "pencil" | "phone" | "play-circle-outline" | "privacy" | "profile" | "rocket" | "settings" | "sun" | "support" | "unlock" | "weather-night" | "pin" | "unpin" | undefined;
+        name?: undefined;
+        href: string;
+        target?: string | undefined;
+        download?: string | undefined;
+    } | {
+        children?: undefined;
+        icon: "address" | "search" | "filter" | "view" | "id" | "alert" | "x" | "anchor" | "cancel" | "close" | "sort" | "download" | "arrow-down" | "arrow-left-bottom" | "arrow-left-double" | "arrow-left" | "arrow-right-bottom" | "arrow-right-double" | "arrow-right" | "arrow-up" | "asterisk" | "attach" | "burger" | "check" | "close-circle-outline" | "copy-content" | "detach" | "dots-horizontal" | "dots-vertical" | "drag-vertical" | "drag-variant" | "east" | "equal" | "escape" | "expand" | "expand-more" | "github" | "instagram" | "linkedIn" | "logout" | "minus" | "north" | "open-in-new" | "organization" | "plus" | "progress-check" | "ray-end-arrow" | "ray-start-arrow" | "ray-start-end" | "ray-top-arrow" | "reboot" | "restore" | "revoke" | "rss" | "send" | "slack" | "south" | "switch_orga" | "upload" | "west" | "youtube" | "auto-fix" | "book-open-outline" | "bullhorn" | "calculator" | "calendar-range" | "chat" | "checkbox-circle-outline" | "clock-outline" | "console" | "credentials" | "credit-card" | "database" | "delete" | "doc" | "earth" | "email-remove-outline" | "email-outline" | "eye-off" | "eye" | "folder" | "help-circle-outline" | "information-outline" | "lock" | "members" | "moon" | "mosaic" | "pen" | "pencil" | "phone" | "play-circle-outline" | "privacy" | "profile" | "rocket" | "settings" | "sun" | "support" | "unlock" | "weather-night" | "pin" | "unpin" | undefined;
+        name?: undefined;
+        href: string;
+        target?: string | undefined;
+        download?: string | undefined;
+    })) & react.RefAttributes<Element>, "tooltip" | "onClick" | "disabled">) => _emotion_react_jsx_runtime.JSX.Element;
+    CancelButton: ({ children, onClick, }: {
+        children: react.ReactNode;
+        onClick: react.MouseEventHandler<HTMLElement> | undefined;
+    }) => _emotion_react_jsx_runtime.JSX.Element;
+    Stack: ({ children }: {
+        children: react.ReactNode;
+    }) => _emotion_react_jsx_runtime.JSX.Element;
+    Text: ({ children }: {
+        children: react.ReactNode;
+    }) => _emotion_react_jsx_runtime.JSX.Element;
+    useDialogContext: () => DialogContextType;
+};
+
 declare const CONTAINER_SIZES: {
     readonly small: 720;
     readonly medium: 720;
@@ -1941,64 +2092,6 @@ type PasswordStrengthMeterProps$1 = {
  */
 declare const Meter: ({ strength, title, value, className, "data-testid": dataTestId, id, }: PasswordStrengthMeterProps$1) => _emotion_react_jsx_runtime.JSX.Element;
 
-type ModalSize = 'large' | 'medium' | 'small' | 'xsmall' | 'xxsmall';
-type ModalPlacement = 'bottom' | 'bottom-left' | 'bottom-right' | 'center' | 'top' | 'top-left' | 'top-right' | 'right' | 'left';
-type ModalState = {
-    /**
-     * @deprecated use show
-     */
-    onOpen: () => void;
-    /**
-     * @deprecated use close
-     */
-    onClose: () => void;
-    toggle: () => void;
-    visible: boolean;
-    modalId: string;
-    /**
-     * @deprecated use close
-     */
-    hide: () => void;
-    close: () => void;
-    show: () => void;
-};
-
-type ModalProps = {
-    id?: string;
-    hideOnEsc?: boolean;
-    hideOnClickOutside?: boolean;
-    preventBodyScroll?: boolean;
-    ariaLabel?: string;
-    disclosure?: ReactElement | ((state: ModalState) => ReactElement);
-    isClosable?: boolean;
-    onClose?: () => void;
-    onBeforeClose?: () => Promise<void> | void;
-    opened?: boolean;
-    placement?: ModalPlacement;
-    size?: ModalSize;
-    /**
-     * @deprecated You should use size prop instead
-     */
-    width?: ModalSize;
-    children: ReactNode | ((args: ModalState) => ReactNode);
-    className?: string;
-    'data-testid'?: string;
-    backdropClassName?: string;
-    /**
-     * @deprecated You should use backdropClassName instead
-     */
-    customDialogBackdropStyles?: react__default.JSX.IntrinsicAttributes['css'];
-    /**
-     * @deprecated You should use className instead
-     */
-    customDialogStyles?: react__default.JSX.IntrinsicAttributes['css'];
-};
-/**
- * Modal is a component that allows you to display content on top of other content.
- * It is often used to display a dialog with additional information or to ask for a confirmation.
- */
-declare const Modal: ({ ariaLabel, id, children, disclosure, hideOnClickOutside, hideOnEsc, isClosable, onClose, onBeforeClose, opened, placement, preventBodyScroll, size, className, "data-testid": dataTestId, backdropClassName, width, customDialogStyles, customDialogBackdropStyles, }: ModalProps) => _emotion_react_jsx_runtime.JSX.Element;
-
 type NoticeProps = {
     children: ReactNode;
     className?: string;
@@ -3441,15 +3534,11 @@ type OptionType = {
 };
 type DataType = Record<string, OptionType[]> | OptionType[];
 
-type SelectInputV2Props = {
+type SelectInputV2Props<IsMulti extends undefined | boolean = false> = {
     /**
      * Input name
      */
     name: string;
-    /**
-     * Default value, must be one of the options
-     */
-    value?: OptionType;
     /**
      * Place holder when no value defined
      */
@@ -3494,10 +3583,6 @@ type SelectInputV2Props = {
      * Size of the input
      */
     size?: 'small' | 'medium' | 'large';
-    /**
-     * Whether it is possible to select multiple options
-     */
-    multiselect?: boolean;
     /**
      * Whether field is required
      */
@@ -3546,13 +3631,21 @@ type SelectInputV2Props = {
      */
     selectAllGroup?: boolean;
     autofocus?: boolean;
+    /**
+     * Whether it is possible to select multiple options
+     */
+    multiselect?: IsMulti;
+    /**
+     * Default value, must be one of the options
+     */
+    value?: IsMulti extends true ? string[] : string;
+    onChange?: IsMulti extends true ? (value: string[]) => void : (value: string) => void;
     'data-testid'?: string;
-    onChange?: (value: string[]) => void;
 } & Pick<HTMLAttributes<HTMLDivElement>, 'id' | 'onBlur' | 'onFocus' | 'aria-label' | 'className'>;
 /**
  * SelectInputV2 component is used to select one or many elements from a selection.
  */
-declare const SelectInputV2: ({ name, id, onBlur, onFocus, onChange, "aria-label": ariaLabel, value, label, helper, options, size, emptyState, descriptionDirection, success, error, "data-testid": dataTestId, className, footer, placeholderSearch, placeholder, searchable, disabled, readOnly, clearable, multiselect, required, labelDescription, autofocus, loadMore, optionalInfoPlacement, isLoading, selectAll, selectAllGroup, }: SelectInputV2Props) => _emotion_react_jsx_runtime.JSX.Element;
+declare const SelectInputV2: <IsMulti extends boolean | undefined>({ name, id, onBlur, onFocus, onChange, "aria-label": ariaLabel, value, label, helper, options, size, emptyState, descriptionDirection, success, error, "data-testid": dataTestId, className, footer, placeholderSearch, placeholder, searchable, disabled, readOnly, clearable, multiselect, required, labelDescription, autofocus, loadMore, optionalInfoPlacement, isLoading, selectAll, selectAllGroup, }: SelectInputV2Props<IsMulti>) => _emotion_react_jsx_runtime.JSX.Element;
 
 declare const getUUID: (prefix?: string) => string;
 
@@ -3597,4 +3690,4 @@ declare const down: (size: ScreenSize, rules: string) => string;
 
 declare const normalize: () => string;
 
-export { ActionBar, Alert, Avatar, Badge, Banner, BarChart, BarStack, Breadcrumbs, Breakpoint, Bullet, Button, Card, Carousel, Checkbox, CheckboxGroup, CheckboxGroupCheckbox, CopyButton, DateInput, EmptyState, Expandable, GlobalAlert, LineChart, Link, List, Loader, Menu, MenuV2, Meter, Modal, Notice, NotificationContainer, NumberInput, NumberInputV2, Pagination, PasswordCheck, PasswordStrengthMeter, PieChart, Popover, Popup, ProgressBar, Radio, RadioGroup, Row, type SCWUITheme, SelectInput, SelectInputV2, SelectableCard, SelectableCardGroup, Separator, Skeleton, Snippet, Stack, Status, StepList, Stepper, SwitchButton, Table, Tabs, Tag, TagInput, TagList, Text, TextArea, TextInput, TextInputV2, TimeInput, ToastContainer, Toggle, ToggleGroup, Tooltip, type UltravioletUITheme, VerificationCode, bounce, down, extendTheme, fadeIn, fadeOut, flash, getUUID, normalize, notification, ping, pulse, quickScaleDown, scaleBack, scaleDown, scaleForward, scaleUp, sketchIn, sketchOut, slideDownLarge, slideFromBottom, slideFromLeft, slideFromRight, slideFromTop, slideToBottom, slideToLeft, slideToRight, slideToTop, slideUpLarge, toast, unfoldIn, unfoldOut, up, zoomIn, zoomOut };
+export { ActionBar, Alert, Avatar, Badge, Banner, BarChart, BarStack, Breadcrumbs, Breakpoint, Bullet, Button, Card, Carousel, Checkbox, CheckboxGroup, CheckboxGroupCheckbox, CopyButton, DateInput, Dialog, EmptyState, Expandable, GlobalAlert, LineChart, Link, List, Loader, Menu, MenuV2, Meter, Modal, Notice, NotificationContainer, NumberInput, NumberInputV2, Pagination, PasswordCheck, PasswordStrengthMeter, PieChart, Popover, Popup, ProgressBar, Radio, RadioGroup, Row, type SCWUITheme, SelectInput, SelectInputV2, SelectableCard, SelectableCardGroup, Separator, Skeleton, Snippet, Stack, Status, StepList, Stepper, SwitchButton, Table, Tabs, Tag, TagInput, TagList, Text, TextArea, TextInput, TextInputV2, TimeInput, ToastContainer, Toggle, ToggleGroup, Tooltip, type UltravioletUITheme, VerificationCode, bounce, down, extendTheme, fadeIn, fadeOut, flash, getUUID, normalize, notification, ping, pulse, quickScaleDown, scaleBack, scaleDown, scaleForward, scaleUp, sketchIn, sketchOut, slideDownLarge, slideFromBottom, slideFromLeft, slideFromRight, slideFromTop, slideToBottom, slideToLeft, slideToRight, slideToTop, slideUpLarge, toast, unfoldIn, unfoldOut, up, zoomIn, zoomOut };

package/dist/src/components/Bullet/index.js

@@ -89,7 +89,7 @@ const Bullet = ({
     prominence: prominence,
     children: icon ? jsx(Icon, {
       name: icon,
-      size: "50%",
+      size: "small",
       variant: iconVariant
     }) : text
   })

package/dist/src/components/Dialog/Context.js

@@ -0,0 +1,12 @@
+import { useContext, createContext } from 'react';
+
+const DialogContext = /*#__PURE__*/createContext(undefined);
+const useDialogContext = () => {
+  const context = useContext(DialogContext);
+  if (!context) {
+    throw new Error('Dialog context can only be used inside a Dialog component');
+  }
+  return context;
+};
+
+export { DialogContext, useDialogContext };

package/dist/src/components/Dialog/index.js

@@ -0,0 +1,88 @@
+import _styled from '@emotion/styled/base';
+import { useMemo } from 'react';
+import { Bullet } from '../Bullet/index.js';
+import { Modal } from '../Modal/index.js';
+import { Text } from '../Text/index.js';
+import { useDialogContext, DialogContext } from './Context.js';
+import { DialogButton } from './subComponents/Button.js';
+import { DialogButtons } from './subComponents/Buttons.js';
+import { DialogCancelButton } from './subComponents/CancelButton.js';
+import { DialogStack } from './subComponents/Stack.js';
+import { DialogText } from './subComponents/Text.js';
+import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
+
+const StyledTextTitle = /*#__PURE__*/_styled(Text, {
+  target: "ehf9m9r0"
+})("margin-top:", ({
+  theme
+}) => theme.space['2'], ";margin-bottom:", ({
+  theme
+}) => theme.space['1'], ";");
+const BaseDialog = ({
+  ariaLabel,
+  className,
+  children,
+  'data-testid': dataTestId,
+  disclosure,
+  hideOnClickOutside,
+  hideOnEsc,
+  id,
+  isClosable,
+  onBeforeClose,
+  onClose,
+  open,
+  placement,
+  sentiment,
+  title
+}) => {
+  const headerContent = jsxs(Fragment, {
+    children: [jsx(Bullet, {
+      sentiment: sentiment,
+      icon: sentiment === 'warning' || sentiment === 'danger' ? 'information-outline' : 'check'
+    }), jsx(StyledTextTitle, {
+      as: "h2",
+      variant: "headingSmallStronger",
+      children: title
+    })]
+  });
+  const contextValue = useMemo(() => ({
+    sentiment
+  }), [sentiment]);
+  return jsx(Modal, {
+    ariaLabel: ariaLabel,
+    className: className,
+    "data-testid": dataTestId,
+    disclosure: disclosure,
+    hideOnClickOutside: hideOnClickOutside,
+    hideOnEsc: hideOnEsc,
+    id: id,
+    isClosable: isClosable,
+    onBeforeClose: onBeforeClose,
+    onClose: onClose,
+    open: open,
+    placement: placement,
+    size: "xsmall",
+    children: typeof children === 'function' ? modalProps => jsxs(DialogContext.Provider, {
+      value: contextValue,
+      children: [headerContent, children(modalProps)]
+    }) : jsxs(DialogContext.Provider, {
+      value: contextValue,
+      children: [headerContent, children]
+    })
+  });
+};
+
+/**
+ * The Dialog component is used to show content on top of an overlay that requires user interaction.
+ * @experimental This component is experimental and may be subject to breaking changes in the future.
+ */
+const Dialog = /*#__PURE__*/Object.assign(BaseDialog, {
+  Buttons: DialogButtons,
+  Button: DialogButton,
+  CancelButton: DialogCancelButton,
+  Stack: DialogStack,
+  Text: DialogText,
+  useDialogContext
+});
+
+export { BaseDialog, Dialog };

package/dist/src/components/Dialog/subComponents/Button.js

@@ -0,0 +1,21 @@
+import { Button } from '../../Button/index.js';
+import { useDialogContext } from '../Context.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+const DialogButton = ({
+  children,
+  onClick,
+  disabled,
+  tooltip
+}) => {
+  const context = useDialogContext();
+  return jsx(Button, {
+    sentiment: context.sentiment,
+    onClick: onClick,
+    disabled: disabled,
+    tooltip: tooltip,
+    children: children
+  });
+};
+
+export { DialogButton };

package/dist/src/components/Dialog/subComponents/Buttons.js

@@ -0,0 +1,14 @@
+import { Stack } from '../../Stack/index.js';
+import { jsxs } from '@emotion/react/jsx-runtime';
+
+const DialogButtons = ({
+  secondaryButton,
+  primaryButton
+}) => jsxs(Stack, {
+  direction: "row",
+  gap: 2,
+  justifyContent: "end",
+  children: [secondaryButton, primaryButton]
+});
+
+export { DialogButtons };

package/dist/src/components/Dialog/subComponents/CancelButton.js

@@ -0,0 +1,14 @@
+import { Button } from '../../Button/index.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+const DialogCancelButton = ({
+  children,
+  onClick
+}) => jsx(Button, {
+  variant: "outlined",
+  sentiment: "neutral",
+  onClick: onClick,
+  children: children
+});
+
+export { DialogCancelButton };

package/dist/src/components/Dialog/subComponents/Stack.js

@@ -0,0 +1,11 @@
+import { Stack } from '../../Stack/index.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+const DialogStack = ({
+  children
+}) => jsx(Stack, {
+  gap: 3,
+  children: children
+});
+
+export { DialogStack };

package/dist/src/components/Dialog/subComponents/Text.js

@@ -0,0 +1,12 @@
+import { Text } from '../../Text/index.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+const DialogText = ({
+  children
+}) => jsx(Text, {
+  as: "p",
+  variant: "body",
+  children: children
+});
+
+export { DialogText };

package/dist/src/components/Modal/index.js

@@ -1,5 +1,5 @@
 import _styled from '@emotion/styled/base';
-import { useState, useId, useCallback, useEffect } from 'react';
+import { useState, useId, useCallback } from 'react';
 import { Button } from '../Button/index.js';
 import { Dialog } from './Dialog.js';
 import { Disclosure } from './Disclosure.js';
@@ -27,6 +27,7 @@ const Modal = ({
   isClosable = true,
   onClose,
   onBeforeClose,
+  open = false,
   opened = false,
   placement = 'center',
   preventBodyScroll = true,
@@ -38,7 +39,8 @@ const Modal = ({
   customDialogStyles,
   customDialogBackdropStyles
 }) => {
-  const [visible, setVisible] = useState(opened);
+  // Used for disclosure usage only
+  const [visible, setVisible] = useState(false);
   const controlId = useId();
   const handleOpen = useCallback(() => {
     setVisible(true);
@@ -59,19 +61,16 @@ const Modal = ({
   }, []);
   const finalId = id ?? controlId;
   const finalSize = size ?? width;
-  useEffect(() => {
-    setVisible(opened);
-  }, [opened]);
   return jsxs(Fragment, {
-    children: [jsx(Disclosure, {
+    children: [disclosure ? jsx(Disclosure, {
       id: finalId,
       handleOpen: handleOpen,
       disclosure: disclosure,
       handleClose: handleClose,
       visible: visible,
       toggle: handleToggle
-    }), jsx(Dialog, {
-      open: visible,
+    }) : null, jsx(Dialog, {
+      open: visible || open || opened,
       placement: placement,
       size: finalSize,
       ariaLabel: ariaLabel,