@ultraviolet/ui 1.48.1 → 1.49.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;
@@ -3446,10 +3539,6 @@ type SelectInputV2Props = {
      * 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
      */
@@ -3548,7 +3633,25 @@ type SelectInputV2Props = {
     autofocus?: boolean;
     'data-testid'?: string;
     onChange?: (value: string[]) => void;
-} & Pick<HTMLAttributes<HTMLDivElement>, 'id' | 'onBlur' | 'onFocus' | 'aria-label' | 'className'>;
+} & Pick<HTMLAttributes<HTMLDivElement>, 'id' | 'onBlur' | 'onFocus' | 'aria-label' | 'className'> & ({
+    /**
+     * Whether it is possible to select multiple options
+     */
+    multiselect: true;
+    /**
+     * Default value, must be one of the options
+     */
+    value?: string[];
+} | {
+    /**
+     * Whether it is possible to select multiple options
+     */
+    multiselect?: false | undefined;
+    /**
+     * Default value, must be one of the options
+     */
+    value?: string;
+});
 /**
  * SelectInputV2 component is used to select one or many elements from a selection.
  */
@@ -3597,4 +3700,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,

package/dist/src/components/SelectInputV2/Dropdown.js

@@ -91,7 +91,7 @@ const DropdownItem = /*#__PURE__*/_styled("button", {
   theme
 }) => theme.colors.primary.background, ";color:", ({
   theme
-}) => theme.colors.primary.text, ";cursor:'pointer';outline:none;}&[data-selected='true']{background-color:", ({
+}) => theme.colors.primary.text, ";cursor:pointer;outline:none;}&[data-selected='true']{background-color:", ({
   theme
 }) => theme.colors.primary.background, ";}&[disabled]{background-color:", ({
   theme
@@ -118,13 +118,14 @@ const PopupFooter = /*#__PURE__*/_styled("div", {
 const StyledCheckbox = /*#__PURE__*/_styled(Checkbox, {
   target: "eeucz6c2"
 })(process.env.NODE_ENV === "production" ? {
-  name: "10y07ze",
-  styles: "width:100%;position:static;text-align:left;align-items:center"
+  name: "1l9xw77",
+  styles: "width:100%;position:static;text-align:left;align-items:center;pointer-events:none"
 } : {
-  name: "10y07ze",
-  styles: "width:100%;position:static;text-align:left;align-items:center",
+  name: "1l9xw77",
+  styles: "width:100%;position:static;text-align:left;align-items:center;pointer-events:none",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
+}); // pointer-events: none prevents any error when using the checkbox in a form since it is an unnamed input
+
 const EmptyState = /*#__PURE__*/_styled(Stack, {
   target: "eeucz6c1"
 })("padding:", ({
@@ -246,10 +247,10 @@ const CreateDropdown = ({
       group
     });
     if (multiselect) {
-      if (selectedData.selectedValues.includes(clickedOption)) {
-        onChange?.(selectedData.selectedValues.filter(val => val !== clickedOption).map(val => val?.value));
+      if (selectedData.selectedValues.includes(clickedOption.value)) {
+        onChange?.(selectedData.selectedValues.filter(val => val !== clickedOption.value));
       } else {
-        onChange?.([...selectedData.selectedValues, clickedOption].map(val => val?.value));
+        onChange?.([...selectedData.selectedValues, clickedOption.value]);
       }
     } else {
       onChange?.([clickedOption.value]);
@@ -284,12 +285,12 @@ const CreateDropdown = ({
     });
     if (!Array.isArray(options)) {
       if (selectedData.selectedGroups.includes(group)) {
-        const newSelectedValues = [...selectedData.selectedValues].filter(selectedValue => !options[group].includes(selectedValue));
-        onChange?.(newSelectedValues.map(value => value.value));
+        const newSelectedValues = [...selectedData.selectedValues].filter(selectedValue => !options[group].find(option => option.value === selectedValue));
+        onChange?.(newSelectedValues);
       } else {
         const newSelectedValues = [...selectedData.selectedValues];
-        options[group].map(option => newSelectedValues.includes(option) || option.disabled ? null : newSelectedValues.push(option));
-        onChange?.(newSelectedValues.map(value => value.value));
+        options[group].map(option => newSelectedValues.includes(option.value) || option.disabled ? null : newSelectedValues.push(option.value));
+        onChange?.(newSelectedValues);
       }
     }
   };
@@ -314,12 +315,12 @@ const CreateDropdown = ({
           id: "select-all",
           role: "option",
           onKeyDown: event => [' ', 'Enter'].includes(event.key) ? selectAllOptions() : null,
+          onClick: selectAllOptions,
           children: jsx(StyledCheckbox, {
             checked: selectedData.allSelected,
             disabled: false,
             value: "select-all",
             "data-testid": "select-all-checkbox",
-            onChange: selectAllOptions,
             tabIndex: -1,
             children: jsxs(Stack, {
               direction: "column",
@@ -339,7 +340,7 @@ const CreateDropdown = ({
             })
           })
         })
-      }) : null, Object.keys(displayedOptions).map(group => jsxs(Stack, {
+      }) : null, Object.keys(displayedOptions).map((group, index) => jsxs(Stack, {
         gap: 0.25,
         children: [displayedOptions[group].length > 0 ? jsx(DropdownGroupWrapper, {
           id: selectAllGroup ? 'items' : undefined,
@@ -353,11 +354,12 @@ const CreateDropdown = ({
             },
             "data-selectgroup": selectAllGroup,
             role: "group",
+            "data-testid": `group-${index}`,
+            onClick: () => selectAllGroup ? handleSelectGroup(group) : null,
             children: selectAllGroup ? jsx(StyledCheckbox, {
               checked: selectedData.selectedGroups.includes(group),
               disabled: false,
               value: group,
-              onChange: () => handleSelectGroup(group),
               "data-testid": "select-group",
               tabIndex: -1,
               children: jsx(Text, {
@@ -376,12 +378,12 @@ const CreateDropdown = ({
         }) : null, jsxs(Stack, {
           id: "items",
           gap: "0.25",
-          children: [displayedOptions[group].map((option, index) => jsx(DropdownItem, {
+          children: [displayedOptions[group].map((option, indexOption) => jsx(DropdownItem, {
             disabled: option.disabled,
-            "data-selected": selectedData.selectedValues.includes(option) && !option.disabled,
+            "data-selected": selectedData.selectedValues.includes(option.value) && !option.disabled,
             "aria-label": option.value,
-            "data-testid": `option-${index}`,
-            id: `option-${index}`,
+            "data-testid": `option-${option.value}`,
+            id: `option-${indexOption}`,
             role: "option",
             onClick: () => {
               if (!option.disabled) {
@@ -391,19 +393,17 @@ const CreateDropdown = ({
             onKeyDown: event => [' ', 'Enter'].includes(event.key) ? handleClick(option, group) : null,
             ref: option.value === defaultSearchValue || option.searchText === defaultSearchValue ? focusedItemRef : null,
             children: multiselect ? jsx(StyledCheckbox, {
-              checked: selectedData.selectedValues.includes(option) && !option.disabled,
+              checked: selectedData.selectedValues.includes(option.value) && !option.disabled,
               disabled: option.disabled,
               value: option.value,
               tabIndex: -1,
               children: jsx(DisplayOption, {
                 option: option,
-                multiselect: multiselect,
                 descriptionDirection: descriptionDirection,
                 optionalInfoPlacement: optionalInfoPlacement
               })
             }) : jsx(DisplayOption, {
               option: option,
-              multiselect: multiselect,
               descriptionDirection: descriptionDirection,
               optionalInfoPlacement: optionalInfoPlacement
             })
@@ -432,12 +432,12 @@ const CreateDropdown = ({
         "data-testid": "select-all",
         role: "option",
         onKeyDown: event => [' ', 'Enter'].includes(event.key) ? selectAllOptions() : null,
+        onClick: selectAllOptions,
         children: jsx(StyledCheckbox, {
           checked: selectedData.allSelected,
           disabled: false,
           value: "select-all",
           "data-testid": "select-all-checkbox",
-          onChange: selectAllOptions,
           tabIndex: -1,
           children: jsxs(Stack, {
             direction: "column",
@@ -464,32 +464,30 @@ const CreateDropdown = ({
         variant: "block"
       }) : displayedOptions.map((option, index) => jsx(DropdownItem, {
         disabled: option.disabled,
-        "data-selected": selectedData.selectedValues.includes(option) && !option.disabled,
+        "data-selected": selectedData.selectedValues.includes(option.value) && !option.disabled,
         onClick: () => {
           if (!option.disabled) {
             handleClick(option);
           }
         },
         "aria-label": option.value,
-        "data-testid": `option-${index}`,
+        "data-testid": `option-${option.value}`,
         id: `option-${index}`,
         role: "option",
         ref: option.value === defaultSearchValue || option.searchText === defaultSearchValue ? focusedItemRef : null,
         onKeyDown: event => [' ', 'Enter'].includes(event.key) ? handleClick(option) : null,
         children: multiselect ? jsx(StyledCheckbox, {
-          checked: selectedData.selectedValues.includes(option) && !option.disabled,
+          checked: selectedData.selectedValues.includes(option.value) && !option.disabled,
           disabled: option.disabled,
           value: option.value,
           tabIndex: -1,
           children: jsx(DisplayOption, {
             option: option,
-            multiselect: multiselect,
             descriptionDirection: descriptionDirection,
             optionalInfoPlacement: optionalInfoPlacement
           })
         }) : jsx(DisplayOption, {
           option: option,
-          multiselect: multiselect,
           descriptionDirection: descriptionDirection,
           optionalInfoPlacement: optionalInfoPlacement
         })

package/dist/src/components/SelectInputV2/DropdownOption.js

@@ -16,7 +16,6 @@ const StyledInfo = /*#__PURE__*/_styled("div", {
 });
 const DisplayOption = ({
   option,
-  multiselect,
   optionalInfoPlacement,
   descriptionDirection
 }) => {
@@ -25,7 +24,6 @@ const DisplayOption = ({
       gap: 0.5,
       direction: "row",
       justifyContent: "left",
-      onClick: event => multiselect ? event.stopPropagation() : null,
       "data-testid": `option-stack-${option.value}`,
       children: jsxs(Stack, {
         gap: 0.5,
@@ -52,7 +50,6 @@ const DisplayOption = ({
       gap: 0.5,
       direction: "row",
       justifyContent: "space-between",
-      onClick: event => multiselect ? event.stopPropagation() : null,
       alignItems: "baseline",
       "data-testid": `option-stack-${option.value}`,
       children: [jsxs(Stack, {
@@ -85,7 +82,6 @@ const DisplayOption = ({
       children: [option.optionalInfo ?? null, jsxs(Stack, {
         gap: 0.5,
         direction: "column",
-        onClick: event => multiselect ? event.stopPropagation() : null,
         "data-testid": `option-stack-${option.value}`,
         children: [jsx(Text, {
           as: "span",
@@ -107,7 +103,6 @@ const DisplayOption = ({
     gap: 0.5,
     direction: "column",
     alignItems: "normal",
-    onClick: event => multiselect ? event.stopPropagation() : null,
     "data-testid": `option-stack-${option.value}`,
     children: [jsxs(Stack, {
       gap: 0.5,

package/dist/src/components/SelectInputV2/SearchBarDropdown.js

@@ -85,14 +85,14 @@ const SearchBarDropdown = ({
             clickedOption: closestOption,
             group: !Array.isArray(options) ? Object.keys(options).filter(group => options[group].includes(closestOption))[0] : undefined
           });
-          onChange?.(selectedData.selectedValues.includes(closestOption) ? selectedData.selectedValues.map(val => val?.value) : [...selectedData.selectedValues, closestOption].map(val => val?.value));
+          onChange?.(selectedData.selectedValues.includes(closestOption.value) ? selectedData.selectedValues : [...selectedData.selectedValues, closestOption.value]);
           setSearchInput(closestOption.searchText ?? closestOption.value);
         } else {
           setSelectedData({
             type: 'selectOption',
             clickedOption: closestOption
           });
-          onChange?.(selectedData.selectedValues.map(val => val?.value));
+          onChange?.(selectedData.selectedValues);
         }
       }
     }

package/dist/src/components/SelectInputV2/SelectBar.js

@@ -6,6 +6,7 @@ import { Stack } from '../Stack/index.js';
 import { Tag } from '../Tag/index.js';
 import { Text } from '../Text/index.js';
 import { useSelectInput } from './SelectInputProvider.js';
+import { findOptionInOptions } from './findOptionInOptions.js';
 import { INPUT_SIZE_HEIGHT, SIZES_TAG } from './types.js';
 import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 
@@ -25,9 +26,7 @@ const StyledInputWrapper = /*#__PURE__*/_styled(Stack, {
   theme
 }) => theme.colors.neutral.background, ";border-radius:", ({
   theme
-}) => theme.radii.default, ";&:hover,:focus{border-color:", ({
-  theme
-}) => theme.colors.primary.borderHover, ";outline:none;}&[data-readonly='true']{background:", ({
+}) => theme.radii.default, ";&[data-readonly='true']{background:", ({
   theme
 }) => theme.colors.neutral.backgroundWeak, ";border-color:", ({
   theme
@@ -35,7 +34,7 @@ const StyledInputWrapper = /*#__PURE__*/_styled(Stack, {
   theme
 }) => theme.colors.neutral.backgroundDisabled, ";border-color:", ({
   theme
-}) => theme.colors.neutral.borderDisabled, ";cursor:not-allowed;}&[data-size='small']{height:", INPUT_SIZE_HEIGHT.small, "px;}&[data-size='medium']{height:", INPUT_SIZE_HEIGHT.medium, "px;}&[data-size='larger']{height:", INPUT_SIZE_HEIGHT.large, "px;}&[data-state='neutral']{border:1px solid ", ({
+}) => theme.colors.neutral.borderDisabled, ";cursor:not-allowed;}&[data-size='small']{height:", INPUT_SIZE_HEIGHT.small, "px;}&[data-size='medium']{height:", INPUT_SIZE_HEIGHT.medium, "px;}&[data-size='large']{height:", INPUT_SIZE_HEIGHT.large, "px;}&[data-state='neutral']{border:1px solid ", ({
   theme
 }) => theme.colors.neutral.border, ";}&[data-state='success']{border:1px solid ", ({
   theme
@@ -45,7 +44,9 @@ const StyledInputWrapper = /*#__PURE__*/_styled(Stack, {
   theme
 }) => theme.colors.primary.border, ";}&:not([data-disabled='true']):not([data-readonly]):active{box-shadow:", ({
   theme
-}) => theme.shadows.focusPrimary, ";}&[data-dropdownvisible='true']{box-shadow:", ({
+}) => theme.shadows.focusPrimary, ";}&:hover,:focus{border-color:", ({
+  theme
+}) => theme.colors.primary.borderHover, ";outline:none;}&[data-dropdownvisible='true']{box-shadow:", ({
   theme
 }) => theme.shadows.focusPrimary, ";border-color:", ({
   theme
@@ -69,7 +70,7 @@ const StyledPlaceholder = /*#__PURE__*/_styled(Text, {
 }) => theme.typography.body.fontSize, ";display:flex;flex:1;align-self:center;&[data-disabled='true']{color:", ({
   theme
 }) => theme.colors.neutral.textWeakDisabled, ";}");
-const isValidSelectedValue = (selectedValue, options) => !Array.isArray(options) ? Object.keys(options).some(group => options[group].some(option => option === selectedValue && !option.disabled)) : options.some(option => option === selectedValue && !option.disabled);
+const isValidSelectedValue = (selectedValue, options) => !Array.isArray(options) ? Object.keys(options).some(group => options[group].some(option => option.value === selectedValue && !option.disabled)) : options.some(option => option.value === selectedValue && !option.disabled);
 const DisplayValues = ({
   multiselect,
   refTag,
@@ -81,7 +82,8 @@ const DisplayValues = ({
   overflowAmount,
   setSelectedData,
   selectedData,
-  size
+  size,
+  options
 }) => multiselect ? jsxs(Stack, {
   direction: "row",
   gap: "1",
@@ -98,8 +100,8 @@ const DisplayValues = ({
         type: 'selectOption',
         clickedOption: option
       });
-      const newSelectedValues = selectedData.selectedValues?.filter(val => val !== option);
-      onChange?.(newSelectedValues.map(val => val?.value));
+      const newSelectedValues = selectedData.selectedValues?.filter(val => val !== option.value);
+      onChange?.(newSelectedValues);
     } : undefined,
     children: option?.label
   }, option?.value)), overflowed ? jsxs(Tag, {
@@ -114,7 +116,7 @@ const DisplayValues = ({
 }) : jsx(Text, {
   as: "p",
   variant: size === 'large' ? 'body' : 'bodySmall',
-  children: selectedData.selectedValues[0]?.label
+  children: selectedData.selectedValues[0] ? findOptionInOptions(options, selectedData.selectedValues[0])?.label : null
 });
 const SelectBar = ({
   size,
@@ -141,7 +143,13 @@ const SelectBar = ({
   const width = innerRef.current?.offsetWidth;
   const [overflowed, setOverflowed] = useState(false);
   const [overflowAmount, setOverflowAmount] = useState(0);
-  const [nonOverflowedValues, setNonOverFlowedValues] = useState(selectedData.selectedValues[0] ? [selectedData.selectedValues[0]] : []);
+  const [nonOverflowedValues, setNonOverFlowedValues] = useState(() => {
+    if (selectedData.selectedValues[0]) {
+      const firstSelectOption = findOptionInOptions(options, selectedData.selectedValues[0]);
+      return firstSelectOption ? [firstSelectOption] : [];
+    }
+    return [];
+  });
   const state = useMemo(() => {
     if (error) {
       return 'danger';
@@ -158,14 +166,15 @@ const SelectBar = ({
     let computedNonOverflowedValues = [];
     const newSelectedValues = selectedData.selectedValues.filter(selectedValue => isValidSelectedValue(selectedValue, options));
     for (const selectedValue of newSelectedValues) {
-      if (selectedValue && selectedValue.label && width && isValidSelectedValue(selectedValue, options)) {
-        const lengthValue = selectedValue.value.length; // Find a better way to find the number of displayed characters?
+      const selectedOption = findOptionInOptions(options, selectedValue);
+      if (selectedOption?.label && width && isValidSelectedValue(selectedValue, options)) {
+        const lengthValue = selectedOption.value.length; // Find a better way to find the number of displayed characters?
         const totalTagWidth = SIZES_TAG.tagWidth + SIZES_TAG.letterWidth * lengthValue;
         if (totalTagWidth + tagsWidth > width - 100) {
           computedOverflowAmount += 1;
           setOverflowAmount(computedOverflowAmount);
         } else {
-          computedNonOverflowedValues = [...computedNonOverflowedValues, selectedValue];
+          computedNonOverflowedValues = [...computedNonOverflowedValues, selectedOption];
           setNonOverFlowedValues(computedNonOverflowedValues);
           tagsWidth += totalTagWidth;
         }
@@ -224,7 +233,8 @@ const SelectBar = ({
       onChange: onChange,
       overflowed: overflowed,
       overflowAmount: overflowAmount,
-      size: size
+      size: size,
+      options: options
     }) : jsx(StyledPlaceholder, {
       as: "p",
       variant: size === 'large' ? 'body' : 'bodySmall',

package/dist/src/components/SelectInputV2/SelectInputProvider.js

@@ -1,4 +1,4 @@
-import { useState, useReducer, useMemo, createContext, useContext } from 'react';
+import { useMemo, useState, useReducer, createContext, useContext } from 'react';
 import { jsx } from '@emotion/react/jsx-runtime';
 
 const SelectInputContext = /*#__PURE__*/createContext({
@@ -32,23 +32,36 @@ const SelectInputProvider = ({
   numberOfOptions,
   children
 }) => {
-  const defaultValue = value ? [value] : [];
+  const currentValue = useMemo(() => {
+    if (value) {
+      if (Array.isArray(value)) {
+        return value;
+      }
+      return [value];
+    }
+    return [];
+  }, [value]);
+  const selectedGroups = useMemo(() => {
+    if (Array.isArray(options)) {
+      return [];
+    }
+    return Object.keys(options).filter(group => options[group].every(groupOption => currentValue.includes(groupOption.value)));
+  }, [currentValue, options]);
   const [displayedOptions, setDisplayedOptions] = useState(options);
   const [isDropdownVisible, setIsDropdownVisible] = useState(false);
   const [searchInput, setSearchInput] = useState('');
-  const allValues = [];
-  const allGroups = [];
-  if (!Array.isArray(options)) {
-    Object.keys(options).map(group => options[group].map(option => {
-      if (!option.disabled) {
-        allValues.push(option);
-      }
-      return null;
-    }));
-    Object.keys(options).forEach(group => allGroups.push(group));
-  } else {
-    options.map(option => allValues.push(option));
-  }
+  const allValues = useMemo(() => {
+    if (!Array.isArray(options)) {
+      return Object.keys(options).map(group => options[group].filter(option => !option.disabled)).flat();
+    }
+    return options;
+  }, [options]);
+  const allGroups = useMemo(() => {
+    if (!Array.isArray(options)) {
+      return Object.keys(options);
+    }
+    return [];
+  }, [options]);
   const reducer = (state, action) => {
     switch (action.type) {
       case 'selectAll':
@@ -60,7 +73,7 @@ const SelectInputProvider = ({
           };
         }
         return {
-          selectedValues: allValues,
+          selectedValues: allValues.map(option => option.value),
           allSelected: true,
           selectedGroups: allGroups
         };
@@ -68,13 +81,13 @@ const SelectInputProvider = ({
         if (!Array.isArray(options)) {
           if (state.selectedGroups.includes(action.selectedGroup)) {
             return {
-              selectedValues: [...state.selectedValues].filter(selectedValue => !options[action.selectedGroup].includes(selectedValue)),
+              selectedValues: [...state.selectedValues].filter(selectedValue => !options[action.selectedGroup].find(option => option.value === selectedValue)),
               allSelected: false,
               selectedGroups: state.selectedGroups.filter(selectedGroup => selectedGroup !== action.selectedGroup)
             };
           }
           const newSelectedValues = [...state.selectedValues];
-          options[action.selectedGroup].map(option => newSelectedValues.includes(option) || option.disabled ? null : newSelectedValues.push(option));
+          options[action.selectedGroup].map(option => newSelectedValues.find(aValue => aValue === option.value) || option.disabled ? null : newSelectedValues.push(option.value));
           return {
             selectedValues: newSelectedValues,
             allSelected: newSelectedValues.length === numberOfOptions,
@@ -84,21 +97,21 @@ const SelectInputProvider = ({
         return state;
       case 'selectOption':
         if (multiselect) {
-          if (state.selectedValues.includes(action.clickedOption)) {
+          if (state.selectedValues.includes(action.clickedOption.value)) {
             return {
-              selectedValues: state.selectedValues.filter(val => val !== action.clickedOption),
+              selectedValues: state.selectedValues.filter(val => val !== action.clickedOption.value),
               allSelected: false,
               selectedGroups: action.group && state.selectedGroups.includes(action.group) ? state.selectedGroups.filter(selectedGroup => selectedGroup !== action.group) : []
             };
           }
           return {
-            selectedValues: [...state.selectedValues, action.clickedOption],
+            selectedValues: [...state.selectedValues, action.clickedOption.value],
             allSelected: state.selectedValues.length + 1 === numberOfOptions,
-            selectedGroups: !Array.isArray(options) && action.group && options[action.group].every(option => [...state.selectedValues, action.clickedOption].includes(option) || option.disabled) ? [...state.selectedGroups, action.group] : state.selectedGroups
+            selectedGroups: !Array.isArray(options) && action.group && options[action.group].every(option => [...state.selectedValues, action.clickedOption.value].includes(option.value) || option.disabled) ? [...state.selectedGroups, action.group] : state.selectedGroups
           };
         }
         return {
-          selectedValues: [action.clickedOption],
+          selectedValues: [action.clickedOption.value],
           allSelected: false,
           selectedGroups: state.selectedGroups
         };
@@ -115,9 +128,9 @@ const SelectInputProvider = ({
           allSelected: state.allSelected,
           selectedValues: state.selectedValues.filter(selectedValue => {
             if (!Array.isArray(options)) {
-              return Object.keys(options).some(group => options[group].some(option => option === selectedValue && !option.disabled));
+              return Object.keys(options).some(group => options[group].some(option => option.value === selectedValue && !option.disabled));
             }
-            return options.some(option => option === selectedValue && !option.disabled);
+            return options.some(option => option.value === selectedValue && !option.disabled);
           })
         };
       default:
@@ -125,9 +138,9 @@ const SelectInputProvider = ({
     }
   };
   const [selectedData, setSelectedData] = useReducer(reducer, {
-    selectedValues: defaultValue,
+    selectedValues: currentValue,
     allSelected: false,
-    selectedGroups: []
+    selectedGroups
   });
   const providerValue = useMemo(() => ({
     onSearch: setDisplayedOptions,

package/dist/src/components/SelectInputV2/findOptionInOptions.js

@@ -0,0 +1,11 @@
+const findOptionInOptions = (options, optionValue) => {
+  let flatOptions = [];
+  if (!Array.isArray(options)) {
+    flatOptions = Object.keys(options).map(group => options[group]).flat();
+  } else {
+    flatOptions = options;
+  }
+  return flatOptions.find(option => option.value === optionValue);
+};
+
+export { findOptionInOptions };

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

@@ -100,7 +100,7 @@ const SelectInputV2 = ({
               as: "label",
               variant: size === 'large' ? 'bodyStrong' : 'bodySmallStrong',
               children: label
-            }) : null, required ? jsx(Icon, {
+            }) : null, required && label ? jsx(Icon, {
               name: "asterisk",
               sentiment: "danger",
               size: 8

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

@@ -117,7 +117,7 @@ const SelectableCardGroup = ({
             }) : null]
           }) : null, jsx(Row, {
             gap: 2,
-            templateColumns: `repeat(${columns}, auto)`,
+            templateColumns: `repeat(${columns}, minmax(0, 1fr))`,
             children: children
           })]
         })

package/dist/src/index.js

@@ -20,6 +20,7 @@ export { Carousel } from './components/Carousel/index.js';
 export { Checkbox } from './components/Checkbox/index.js';
 export { CopyButton } from './components/CopyButton/index.js';
 export { DateInput } from './components/DateInput/index.js';
+export { Dialog } from './components/Dialog/index.js';
 export { EmptyState } from './components/EmptyState/index.js';
 export { Expandable } from './components/Expandable/index.js';
 export { LineChart } from './components/LineChart/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "1.48.1",
+  "version": "1.49.0",
   "description": "Ultraviolet UI",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -19,7 +19,7 @@
   },
   "engines": {
     "node": ">=18.x",
-    "pnpm": ">=8.0.0"
+    "pnpm": ">=9.x"
   },
   "os": [
     "darwin",
@@ -56,7 +56,7 @@
     "@nivo/line": "0.80.0",
     "@nivo/pie": "0.80.0",
     "@nivo/scales": "0.80.0",
-    "@scaleway/random-name": "5.0.1",
+    "@scaleway/random-name": "5.0.2",
     "@scaleway/use-media": "3.0.1",
     "deepmerge": "4.3.1",
     "react-datepicker": "4.25.0",