@redsift/products 11.5.0 → 11.6.0-muiv5-alpha.0

package/package.json

@@ -30,11 +30,11 @@
     "test": "yarn test:unit && yarn test:storybook"
   },
   "types": "index.d.ts",
-  "version": "11.5.0",
+  "version": "11.6.0-muiv5-alpha.0",
   "dependencies": {
-    "@redsift/design-system": "^11.5.0",
-    "@redsift/icons": "^11.5.0",
-    "@redsift/pickers": "^11.5.0",
+    "@redsift/design-system": "^11.6.0-muiv5-alpha.0",
+    "@redsift/icons": "^11.6.0-muiv5-alpha.0",
+    "@redsift/pickers": "^11.6.0-muiv5-alpha.0",
     "classnames": "^2.3.1",
     "styled-components": "^5.3.5"
   },
@@ -88,12 +88,12 @@
     "ts-jest": "^28.0.3"
   },
   "peerDependencies": {
-    "@redsift/design-system": "^11.5.0-0",
-    "@redsift/icons": "^11.5.0-0",
-    "@redsift/pickers": "^11.5.0-0",
+    "@redsift/design-system": "^11.6.0-0",
+    "@redsift/icons": "^11.6.0-0",
+    "@redsift/pickers": "^11.6.0-0",
     "react": ">=17",
     "react-dom": ">=17",
     "styled-components": "^5.3.5"
   },
-  "gitHead": "00c9f15eeac63e69b783d0b9f6b5703265694381"
+  "gitHead": "479124ec4716c2bc55894b4fd7477e9c7814afee"
 }

package/packages/popovers/src/components/dialog/Dialog.js

@@ -0,0 +1,56 @@
+import React__default from 'react';
+import { useTheme, partitionComponents, isComponent, ThemeProvider } from '@redsift/design-system';
+import { DialogContext } from './context.js';
+import { DialogSize } from './types.js';
+import { useDialog } from './useDialog.js';
+import { DialogTrigger } from '../dialog-trigger/DialogTrigger.js';
+import { DialogContent } from '../dialog-content/DialogContent.js';
+
+const COMPONENT_NAME = 'Dialog';
+const CLASSNAME = 'redsift-dialog';
+
+/**
+ * The Dialog component.
+ */
+const BaseDialog = props => {
+  const {
+    color,
+    children,
+    defaultOpen,
+    hasCloseButton = true,
+    initialFocus,
+    isOpen,
+    onOpen,
+    size = DialogSize.medium,
+    theme: propsTheme,
+    triggerClassName
+  } = props;
+  const theme = useTheme(propsTheme);
+  const dialog = useDialog({
+    color,
+    defaultOpen,
+    hasCloseButton,
+    initialFocus,
+    isOpen,
+    onOpen,
+    size,
+    triggerClassName
+  });
+  const [[trigger], [content]] = partitionComponents(React__default.Children.toArray(children), [isComponent('DialogTrigger'), isComponent('DialogContent')]);
+  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    value: {
+      theme
+    }
+  }, /*#__PURE__*/React__default.createElement(DialogContext.Provider, {
+    value: dialog
+  }, trigger && isComponent('DialogTrigger')(trigger) ? trigger : null, content && isComponent('DialogContent')(content) ? content : null));
+};
+BaseDialog.className = CLASSNAME;
+BaseDialog.displayName = COMPONENT_NAME;
+const Dialog = Object.assign(BaseDialog, {
+  Trigger: DialogTrigger,
+  Content: DialogContent
+});
+
+export { BaseDialog, Dialog };
+//# sourceMappingURL=Dialog.js.map

package/packages/popovers/src/components/dialog/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","sources":["../../../../../../../popovers/src/components/dialog/Dialog.tsx"],"sourcesContent":["import React from 'react';\nimport { partitionComponents, isComponent, useTheme, ThemeProvider } from '@redsift/design-system';\nimport { DialogContent } from '../dialog-content';\nimport { DialogTrigger } from '../dialog-trigger';\n\nimport { DialogContext } from './context';\nimport { DialogProps, DialogSize } from './types';\nimport { useDialog } from './useDialog';\n\nconst COMPONENT_NAME = 'Dialog';\nconst CLASSNAME = 'redsift-dialog';\n\n/**\n * The Dialog component.\n */\nexport const BaseDialog: React.FC<DialogProps> & {\n  displayName?: string;\n  className?: string;\n} = (props) => {\n  const {\n    color,\n    children,\n    defaultOpen,\n    hasCloseButton = true,\n    initialFocus,\n    isOpen,\n    onOpen,\n    size = DialogSize.medium,\n    theme: propsTheme,\n    triggerClassName,\n  } = props;\n\n  const theme = useTheme(propsTheme);\n\n  const dialog = useDialog({\n    color,\n    defaultOpen,\n    hasCloseButton,\n    initialFocus,\n    isOpen,\n    onOpen,\n    size,\n    triggerClassName,\n  });\n\n  const [[trigger], [content]] = partitionComponents(React.Children.toArray(children), [\n    isComponent('DialogTrigger'),\n    isComponent('DialogContent'),\n  ]);\n\n  return (\n    <ThemeProvider value={{ theme }}>\n      <DialogContext.Provider value={dialog}>\n        {trigger && isComponent('DialogTrigger')(trigger) ? trigger : null}\n        {content && isComponent('DialogContent')(content) ? content : null}\n      </DialogContext.Provider>\n    </ThemeProvider>\n  );\n};\nBaseDialog.className = CLASSNAME;\nBaseDialog.displayName = COMPONENT_NAME;\n\nexport const Dialog = Object.assign(BaseDialog, {\n  Trigger: DialogTrigger,\n  Content: DialogContent,\n});\n"],"names":["COMPONENT_NAME","CLASSNAME","BaseDialog","props","color","children","defaultOpen","hasCloseButton","initialFocus","isOpen","onOpen","size","DialogSize","medium","theme","propsTheme","triggerClassName","useTheme","dialog","useDialog","trigger","content","partitionComponents","React","Children","toArray","isComponent","createElement","ThemeProvider","value","DialogContext","Provider","className","displayName","Dialog","Object","assign","Trigger","DialogTrigger","Content","DialogContent"],"mappings":";;;;;;;;AASA,MAAMA,cAAc,GAAG,QAAQ,CAAA;AAC/B,MAAMC,SAAS,GAAG,gBAAgB,CAAA;;AAElC;AACA;AACA;AACaC,MAAAA,UAGZ,GAAIC,KAAK,IAAK;EACb,MAAM;IACJC,KAAK;IACLC,QAAQ;IACRC,WAAW;AACXC,IAAAA,cAAc,GAAG,IAAI;IACrBC,YAAY;IACZC,MAAM;IACNC,MAAM;IACNC,IAAI,GAAGC,UAAU,CAACC,MAAM;AACxBC,IAAAA,KAAK,EAAEC,UAAU;AACjBC,IAAAA,gBAAAA;AACF,GAAC,GAAGb,KAAK,CAAA;AAET,EAAA,MAAMW,KAAK,GAAGG,QAAQ,CAACF,UAAU,CAAC,CAAA;EAElC,MAAMG,MAAM,GAAGC,SAAS,CAAC;IACvBf,KAAK;IACLE,WAAW;IACXC,cAAc;IACdC,YAAY;IACZC,MAAM;IACNC,MAAM;IACNC,IAAI;AACJK,IAAAA,gBAAAA;AACF,GAAC,CAAC,CAAA;AAEF,EAAA,MAAM,CAAC,CAACI,OAAO,CAAC,EAAE,CAACC,OAAO,CAAC,CAAC,GAAGC,mBAAmB,CAACC,cAAK,CAACC,QAAQ,CAACC,OAAO,CAACpB,QAAQ,CAAC,EAAE,CACnFqB,WAAW,CAAC,eAAe,CAAC,EAC5BA,WAAW,CAAC,eAAe,CAAC,CAC7B,CAAC,CAAA;AAEF,EAAA,oBACEH,cAAA,CAAAI,aAAA,CAACC,aAAa,EAAA;AAACC,IAAAA,KAAK,EAAE;AAAEf,MAAAA,KAAAA;AAAM,KAAA;AAAE,GAAA,eAC9BS,cAAA,CAAAI,aAAA,CAACG,aAAa,CAACC,QAAQ,EAAA;AAACF,IAAAA,KAAK,EAAEX,MAAAA;AAAO,GAAA,EACnCE,OAAO,IAAIM,WAAW,CAAC,eAAe,CAAC,CAACN,OAAO,CAAC,GAAGA,OAAO,GAAG,IAAI,EACjEC,OAAO,IAAIK,WAAW,CAAC,eAAe,CAAC,CAACL,OAAO,CAAC,GAAGA,OAAO,GAAG,IACxC,CACX,CAAC,CAAA;AAEpB,EAAC;AACDnB,UAAU,CAAC8B,SAAS,GAAG/B,SAAS,CAAA;AAChCC,UAAU,CAAC+B,WAAW,GAAGjC,cAAc,CAAA;AAEhC,MAAMkC,MAAM,GAAGC,MAAM,CAACC,MAAM,CAAClC,UAAU,EAAE;AAC9CmC,EAAAA,OAAO,EAAEC,aAAa;AACtBC,EAAAA,OAAO,EAAEC,aAAAA;AACX,CAAC;;;;"}

package/packages/popovers/src/components/dialog/context.js

@@ -0,0 +1,6 @@
+import React__default from 'react';
+
+const DialogContext = /*#__PURE__*/React__default.createContext(null);
+
+export { DialogContext };
+//# sourceMappingURL=context.js.map

package/packages/popovers/src/components/dialog/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sources":["../../../../../../../popovers/src/components/dialog/context.ts"],"sourcesContent":["import React from 'react';\nimport { DialogState } from './types';\n\nexport const DialogContext = React.createContext<DialogState | null>(null);\n"],"names":["DialogContext","React","createContext"],"mappings":";;AAGO,MAAMA,aAAa,gBAAGC,cAAK,CAACC,aAAa,CAAqB,IAAI;;;;"}

package/packages/popovers/src/components/dialog/types.js

@@ -0,0 +1,20 @@
+/**
+ * Context props.
+ */
+
+/**
+ * Component variant.
+ */
+const DialogSize = {
+  small: 'small',
+  medium: 'medium',
+  large: 'large',
+  xlarge: 'xlarge'
+};
+
+/**
+ * Component props.
+ */
+
+export { DialogSize };
+//# sourceMappingURL=types.js.map

package/packages/popovers/src/components/dialog/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../../../../../popovers/src/components/dialog/types.ts"],"sourcesContent":["import { Dispatch, ReactNode, SetStateAction } from 'react';\nimport { ButtonColor, Theme, ValueOf } from '@redsift/design-system';\nimport { useDialog } from './useDialog';\n\n/**\n * Context props.\n */\nexport type DialogState =\n  | (ReturnType<typeof useDialog> & {\n      setLabelId: Dispatch<SetStateAction<string | undefined>>;\n      setDescriptionId: Dispatch<SetStateAction<string | undefined>>;\n      /** Class name to append to the trigger. */\n      readonly triggerClassName?: string;\n    })\n  | null;\n\n/**\n * Component variant.\n */\nexport const DialogSize = {\n  small: 'small',\n  medium: 'medium',\n  large: 'large',\n  xlarge: 'xlarge',\n} as const;\nexport type DialogSize = ValueOf<typeof DialogSize>;\n\n/**\n * Component props.\n */\nexport interface DialogProps {\n  /** Button color that will be forward to the trigger. */\n  color?: ButtonColor;\n  /** Children. Can only be DialogTrigger and DialogContent. */\n  children: ReactNode;\n  /**\n   * Default open status.\n   * Used for uncontrolled version.\n   */\n  defaultOpen?: boolean;\n  /** Whether the Close icon button is displayed or not. */\n  hasCloseButton?: boolean;\n  /** Which element to initially focus. Can be either a number (tabbable index), a ref to en element, or a shortcut pointing towards a section of the dialog. See the accessibility section in the documentation to know which one to use. */\n  initialFocus?: number | React.MutableRefObject<HTMLElement | null> | 'header' | 'body' | 'actions';\n  /**\n   * Whether the component is opened or not.\n   * Used for controlled version.\n   */\n  isOpen?: boolean;\n  /** Method to handle component change. */\n  onOpen?: (open: boolean) => void;\n  /** Dialog size. */\n  size?: DialogSize | { width?: string; maxWidth?: string; minWidth?: string };\n  /** Theme. */\n  theme?: Theme;\n  /** Class name to append to the trigger. */\n  triggerClassName?: string;\n}\n\nexport type StyledDialogProps = DialogProps;\n"],"names":["DialogSize","small","medium","large","xlarge"],"mappings":"AAIA;AACA;AACA;;AAUA;AACA;AACA;AACO,MAAMA,UAAU,GAAG;AACxBC,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,MAAM,EAAE,QAAQ;AAChBC,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,MAAM,EAAE,QAAA;AACV,EAAU;;AAGV;AACA;AACA;;;;"}

package/packages/popovers/src/components/dialog/useDialog.js

@@ -0,0 +1,95 @@
+import { objectSpread2 as _objectSpread2 } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useRef, useState, useEffect, useCallback } from 'react';
+import { useFloating, useDismiss, useRole, useInteractions } from '../../../../../node_modules/@floating-ui/react/dist/floating-ui.react.mjs.js';
+import { DialogSize } from './types.js';
+
+const sizeToDimension = size => {
+  if (typeof size !== 'string') {
+    return size;
+  }
+  switch (size) {
+    case DialogSize.small:
+      return {
+        width: '540px'
+      };
+    case DialogSize.large:
+      return {
+        width: '800px'
+      };
+    case DialogSize.xlarge:
+      return {
+        width: '80vw'
+      };
+    case DialogSize.medium:
+    default:
+      return {
+        width: '700px'
+      };
+  }
+};
+function useDialog(_ref) {
+  let {
+    color,
+    defaultOpen,
+    hasCloseButton,
+    initialFocus,
+    isOpen: propsIsOpen,
+    onOpen,
+    size,
+    triggerClassName
+  } = _ref;
+  const headerRef = useRef(null);
+  const bodyRef = useRef(null);
+  const actionsRef = useRef(null);
+  const [labelId, setLabelId] = React__default.useState();
+  const [descriptionId, setDescriptionId] = React__default.useState();
+  const [isOpen, setIsOpen] = useState(propsIsOpen !== null && propsIsOpen !== void 0 ? propsIsOpen : defaultOpen);
+  const {
+    width,
+    minWidth,
+    maxWidth
+  } = sizeToDimension(size);
+  useEffect(() => {
+    setIsOpen(propsIsOpen !== null && propsIsOpen !== void 0 ? propsIsOpen : defaultOpen);
+  }, [propsIsOpen, defaultOpen]);
+  const handleOpen = useCallback(collapsed => {
+    if (onOpen) {
+      onOpen(collapsed);
+    }
+    if (propsIsOpen === undefined || propsIsOpen === null) {
+      setIsOpen(collapsed);
+    }
+  }, [onOpen]);
+  const data = useFloating({
+    open: isOpen,
+    onOpenChange: handleOpen
+  });
+  const context = data.context;
+  const dismiss = useDismiss(context, {
+    outsidePressEvent: 'mousedown'
+  });
+  const role = useRole(context);
+  const interactions = useInteractions([dismiss, role]);
+  return React__default.useMemo(() => _objectSpread2(_objectSpread2(_objectSpread2({
+    color,
+    isOpen,
+    handleOpen
+  }, interactions), data), {}, {
+    labelId,
+    descriptionId,
+    setLabelId,
+    setDescriptionId,
+    hasCloseButton,
+    initialFocus,
+    width,
+    minWidth,
+    maxWidth,
+    headerRef,
+    bodyRef,
+    actionsRef,
+    triggerClassName
+  }), [color, isOpen, handleOpen, interactions, data, labelId, descriptionId, hasCloseButton, initialFocus, width, minWidth, maxWidth, headerRef, bodyRef, actionsRef, triggerClassName]);
+}
+
+export { sizeToDimension, useDialog };
+//# sourceMappingURL=useDialog.js.map

package/packages/popovers/src/components/dialog/useDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDialog.js","sources":["../../../../../../../popovers/src/components/dialog/useDialog.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { useFloating, useDismiss, useRole, useInteractions } from '@floating-ui/react';\nimport { DialogProps, DialogSize } from './types';\n\nexport const sizeToDimension = (\n  size: DialogSize | { width?: string; maxWidth?: string; minWidth?: string }\n): { width?: string; maxWidth?: string; minWidth?: string } => {\n  if (typeof size !== 'string') {\n    return size;\n  }\n\n  switch (size) {\n    case DialogSize.small:\n      return { width: '540px' };\n    case DialogSize.large:\n      return { width: '800px' };\n    case DialogSize.xlarge:\n      return { width: '80vw' };\n    case DialogSize.medium:\n    default:\n      return { width: '700px' };\n  }\n};\n\nexport function useDialog({\n  color,\n  defaultOpen,\n  hasCloseButton,\n  initialFocus,\n  isOpen: propsIsOpen,\n  onOpen,\n  size,\n  triggerClassName,\n}: Omit<DialogProps, 'children'>) {\n  const headerRef = useRef(null);\n  const bodyRef = useRef(null);\n  const actionsRef = useRef(null);\n  const [labelId, setLabelId] = React.useState<string | undefined>();\n  const [descriptionId, setDescriptionId] = React.useState<string | undefined>();\n\n  const [isOpen, setIsOpen] = useState(propsIsOpen ?? defaultOpen);\n\n  const { width, minWidth, maxWidth } = sizeToDimension(size!);\n\n  useEffect(() => {\n    setIsOpen(propsIsOpen ?? defaultOpen);\n  }, [propsIsOpen, defaultOpen]);\n\n  const handleOpen = useCallback(\n    (collapsed: boolean) => {\n      if (onOpen) {\n        onOpen(collapsed);\n      }\n      if (propsIsOpen === undefined || propsIsOpen === null) {\n        setIsOpen(collapsed);\n      }\n    },\n    [onOpen]\n  );\n\n  const data = useFloating({\n    open: isOpen,\n    onOpenChange: handleOpen,\n  });\n\n  const context = data.context;\n\n  const dismiss = useDismiss(context, { outsidePressEvent: 'mousedown' });\n  const role = useRole(context);\n\n  const interactions = useInteractions([dismiss, role]);\n\n  return React.useMemo(\n    () => ({\n      color,\n      isOpen,\n      handleOpen,\n      ...interactions,\n      ...data,\n      labelId,\n      descriptionId,\n      setLabelId,\n      setDescriptionId,\n      hasCloseButton,\n      initialFocus,\n      width,\n      minWidth,\n      maxWidth,\n      headerRef,\n      bodyRef,\n      actionsRef,\n      triggerClassName,\n    }),\n    [\n      color,\n      isOpen,\n      handleOpen,\n      interactions,\n      data,\n      labelId,\n      descriptionId,\n      hasCloseButton,\n      initialFocus,\n      width,\n      minWidth,\n      maxWidth,\n      headerRef,\n      bodyRef,\n      actionsRef,\n      triggerClassName,\n    ]\n  );\n}\n"],"names":["sizeToDimension","size","DialogSize","small","width","large","xlarge","medium","useDialog","_ref","color","defaultOpen","hasCloseButton","initialFocus","isOpen","propsIsOpen","onOpen","triggerClassName","headerRef","useRef","bodyRef","actionsRef","labelId","setLabelId","React","useState","descriptionId","setDescriptionId","setIsOpen","minWidth","maxWidth","useEffect","handleOpen","useCallback","collapsed","undefined","data","useFloating","open","onOpenChange","context","dismiss","useDismiss","outsidePressEvent","role","useRole","interactions","useInteractions","useMemo","_objectSpread"],"mappings":"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"}

package/packages/popovers/src/components/dialog/useDialogContext.js

@@ -0,0 +1,13 @@
+import React__default from 'react';
+import { DialogContext } from './context.js';
+
+const useDialogContext = () => {
+  const context = React__default.useContext(DialogContext);
+  if (context == null) {
+    throw new Error('Dialog components must be wrapped in <Dialog />');
+  }
+  return context;
+};
+
+export { useDialogContext };
+//# sourceMappingURL=useDialogContext.js.map

package/packages/popovers/src/components/dialog/useDialogContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDialogContext.js","sources":["../../../../../../../popovers/src/components/dialog/useDialogContext.tsx"],"sourcesContent":["import React from 'react';\nimport { DialogContext } from './context';\n\nexport const useDialogContext = () => {\n  const context = React.useContext(DialogContext);\n\n  if (context == null) {\n    throw new Error('Dialog components must be wrapped in <Dialog />');\n  }\n\n  return context;\n};\n"],"names":["useDialogContext","context","React","useContext","DialogContext","Error"],"mappings":";;;AAGaA,MAAAA,gBAAgB,GAAGA,MAAM;AACpC,EAAA,MAAMC,OAAO,GAAGC,cAAK,CAACC,UAAU,CAACC,aAAa,CAAC,CAAA;EAE/C,IAAIH,OAAO,IAAI,IAAI,EAAE;AACnB,IAAA,MAAM,IAAII,KAAK,CAAC,iDAAiD,CAAC,CAAA;AACpE,GAAA;AAEA,EAAA,OAAOJ,OAAO,CAAA;AAChB;;;;"}

package/packages/popovers/src/components/dialog-content/DialogContent.js

@@ -0,0 +1,97 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, objectSpread2 as _objectSpread2 } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useContext } from 'react';
+import classNames from 'classnames';
+import { useTransitionStyles, useMergeRefs, FloatingPortal, FloatingFocusManager } from '../../../../../node_modules/@floating-ui/react/dist/floating-ui.react.mjs.js';
+import { mdiClose } from '@redsift/icons';
+import { AppContainerContext, useTheme, useMessageFormatter, partitionComponents, isComponent, IconButton } from '@redsift/design-system';
+import intlMessages from './intl/index.js';
+import { StyledFloatingOverlay, StyledDialogContent } from './styles.js';
+import { DialogContentHeader } from '../dialog-content-header/DialogContentHeader.js';
+import { DialogContentBody } from '../dialog-content-body/DialogContentBody.js';
+import { DialogContentActions } from '../dialog-content-actions/DialogContentActions.js';
+import { useDialogContext } from '../dialog/useDialogContext.js';
+
+const _excluded = ["children", "className", "style", "theme"];
+const COMPONENT_NAME = 'DialogContent';
+const CLASSNAME = 'redsift-dialog-content';
+
+/**
+ * The DialogContent component.
+ */
+const BaseDialogContent = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      style,
+      theme: propsTheme
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const appContainerState = useContext(AppContainerContext);
+  const {
+    context: floatingContext,
+    getFloatingProps,
+    refs,
+    labelId,
+    descriptionId,
+    handleOpen,
+    hasCloseButton,
+    initialFocus: propsInitialFocus,
+    width,
+    minWidth,
+    maxWidth,
+    headerRef,
+    bodyRef,
+    actionsRef
+  } = useDialogContext();
+  const theme = useTheme(propsTheme);
+  const {
+    isMounted,
+    styles
+  } = useTransitionStyles(floatingContext);
+  const dialogRef = useMergeRefs([refs.setFloating, ref]);
+  const format = useMessageFormatter(intlMessages);
+  const [[header], [body], [actions]] = partitionComponents(React__default.Children.toArray(children), [isComponent('DialogContentHeader'), isComponent('DialogContentBody'), isComponent('DialogContentActions')]);
+  const initialFocus = propsInitialFocus === 'header' ? headerRef : propsInitialFocus === 'body' ? bodyRef : propsInitialFocus === 'actions' ? actionsRef : propsInitialFocus ? propsInitialFocus : undefined;
+  return /*#__PURE__*/React__default.createElement(FloatingPortal, {
+    root: appContainerState === null || appContainerState === void 0 ? void 0 : appContainerState.appContainerRef.current
+  }, isMounted && /*#__PURE__*/React__default.createElement(StyledFloatingOverlay, {
+    lockScroll: true,
+    style: styles
+  }, /*#__PURE__*/React__default.createElement(FloatingFocusManager, {
+    context: floatingContext,
+    initialFocus: initialFocus ? initialFocus : undefined
+  }, /*#__PURE__*/React__default.createElement(StyledDialogContent, _extends({
+    $theme: theme,
+    className: classNames(DialogContent.className, className)
+  }, forwardedProps, {
+    ref: dialogRef,
+    "aria-labelledby": labelId,
+    "aria-describedby": descriptionId
+  }, getFloatingProps(props), {
+    style: _objectSpread2(_objectSpread2({}, styles), style),
+    $width: width,
+    $minWidth: minWidth,
+    $maxWidth: maxWidth
+  }), !header && !body && !actions ? /*#__PURE__*/React__default.createElement(DialogContentBody, null, children) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, header || hasCloseButton ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${BaseDialogContent.className}__header`
+  }, header, hasCloseButton ? /*#__PURE__*/React__default.createElement(IconButton, {
+    theme: theme,
+    "aria-label": format('close'),
+    className: `${BaseDialogContent.className}-header__icon-button`,
+    color: "grey",
+    icon: mdiClose,
+    onClick: () => handleOpen(false)
+  }) : null) : null, body || actions ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${BaseDialogContent.className}__content`
+  }, body, actions) : null)))));
+});
+BaseDialogContent.className = CLASSNAME;
+BaseDialogContent.displayName = COMPONENT_NAME;
+const DialogContent = Object.assign(BaseDialogContent, {
+  Header: DialogContentHeader,
+  Body: DialogContentBody,
+  Actions: DialogContentActions
+});
+
+export { BaseDialogContent, DialogContent };
+//# sourceMappingURL=DialogContent.js.map

package/packages/popovers/src/components/dialog-content/DialogContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogContent.js","sources":["../../../../../../../popovers/src/components/dialog-content/DialogContent.tsx"],"sourcesContent":["import React, { forwardRef, useContext } from 'react';\nimport classNames from 'classnames';\nimport { useMergeRefs, FloatingPortal, FloatingFocusManager, useTransitionStyles } from '@floating-ui/react';\nimport { mdiClose } from '@redsift/icons';\n\nimport { AppContainerContext, useMessageFormatter } from '@redsift/design-system';\nimport intlMessages from './intl';\n\nimport { Comp, IconButton, isComponent, partitionComponents, useTheme } from '@redsift/design-system';\nimport { DialogContentProps } from './types';\nimport { useDialogContext } from '../dialog';\nimport { StyledDialogContent, StyledFloatingOverlay } from './styles';\nimport { DialogContentActions } from '../dialog-content-actions';\nimport { DialogContentBody } from '../dialog-content-body';\nimport { DialogContentHeader } from '../dialog-content-header';\n\nconst COMPONENT_NAME = 'DialogContent';\nconst CLASSNAME = 'redsift-dialog-content';\n\n/**\n * The DialogContent component.\n */\nexport const BaseDialogContent: Comp<DialogContentProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const { children, className, style, theme: propsTheme, ...forwardedProps } = props;\n  const appContainerState = useContext(AppContainerContext);\n  const {\n    context: floatingContext,\n    getFloatingProps,\n    refs,\n    labelId,\n    descriptionId,\n    handleOpen,\n    hasCloseButton,\n    initialFocus: propsInitialFocus,\n    width,\n    minWidth,\n    maxWidth,\n    headerRef,\n    bodyRef,\n    actionsRef,\n  } = useDialogContext();\n  const theme = useTheme(propsTheme);\n  const { isMounted, styles } = useTransitionStyles(floatingContext);\n  const dialogRef = useMergeRefs([refs.setFloating, ref]);\n\n  const format = useMessageFormatter(intlMessages);\n\n  const [[header], [body], [actions]] = partitionComponents(React.Children.toArray(children), [\n    isComponent('DialogContentHeader'),\n    isComponent('DialogContentBody'),\n    isComponent('DialogContentActions'),\n  ]);\n\n  const initialFocus: number | React.MutableRefObject<HTMLElement | null> | undefined =\n    propsInitialFocus === 'header'\n      ? headerRef\n      : propsInitialFocus === 'body'\n      ? bodyRef\n      : propsInitialFocus === 'actions'\n      ? actionsRef\n      : propsInitialFocus\n      ? propsInitialFocus\n      : undefined;\n\n  return (\n    <FloatingPortal root={appContainerState?.appContainerRef.current}>\n      {isMounted && (\n        <StyledFloatingOverlay lockScroll style={styles}>\n          <FloatingFocusManager context={floatingContext} initialFocus={initialFocus ? initialFocus : undefined}>\n            <StyledDialogContent\n              $theme={theme!}\n              className={classNames(DialogContent.className, className)}\n              {...forwardedProps}\n              ref={dialogRef}\n              aria-labelledby={labelId}\n              aria-describedby={descriptionId}\n              {...getFloatingProps(props)}\n              style={{ ...styles, ...style }}\n              $width={width}\n              $minWidth={minWidth}\n              $maxWidth={maxWidth}\n            >\n              {!header && !body && !actions ? (\n                <DialogContentBody>{children}</DialogContentBody>\n              ) : (\n                <>\n                  {header || hasCloseButton ? (\n                    <div className={`${BaseDialogContent.className}__header`}>\n                      {header}\n\n                      {hasCloseButton ? (\n                        <IconButton\n                          theme={theme}\n                          aria-label={format('close')}\n                          className={`${BaseDialogContent.className}-header__icon-button`}\n                          color=\"grey\"\n                          icon={mdiClose}\n                          onClick={() => handleOpen(false)}\n                        />\n                      ) : null}\n                    </div>\n                  ) : null}\n                  {body || actions ? (\n                    <div className={`${BaseDialogContent.className}__content`}>\n                      {body}\n                      {actions}\n                    </div>\n                  ) : null}\n                </>\n              )}\n            </StyledDialogContent>\n          </FloatingFocusManager>\n        </StyledFloatingOverlay>\n      )}\n    </FloatingPortal>\n  );\n});\nBaseDialogContent.className = CLASSNAME;\nBaseDialogContent.displayName = COMPONENT_NAME;\n\nexport const DialogContent = Object.assign(BaseDialogContent, {\n  Header: DialogContentHeader,\n  Body: DialogContentBody,\n  Actions: DialogContentActions,\n});\n"],"names":["COMPONENT_NAME","CLASSNAME","BaseDialogContent","forwardRef","props","ref","children","className","style","theme","propsTheme","forwardedProps","_objectWithoutProperties","_excluded","appContainerState","useContext","AppContainerContext","context","floatingContext","getFloatingProps","refs","labelId","descriptionId","handleOpen","hasCloseButton","initialFocus","propsInitialFocus","width","minWidth","maxWidth","headerRef","bodyRef","actionsRef","useDialogContext","useTheme","isMounted","styles","useTransitionStyles","dialogRef","useMergeRefs","setFloating","format","useMessageFormatter","intlMessages","header","body","actions","partitionComponents","React","Children","toArray","isComponent","undefined","createElement","FloatingPortal","root","appContainerRef","current","StyledFloatingOverlay","lockScroll","FloatingFocusManager","StyledDialogContent","_extends","$theme","classNames","DialogContent","_objectSpread","$width","$minWidth","$maxWidth","DialogContentBody","Fragment","IconButton","color","icon","mdiClose","onClick","displayName","Object","assign","Header","DialogContentHeader","Body","Actions","DialogContentActions"],"mappings":"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"}

package/packages/popovers/src/components/dialog-content/intl/en-US.json.js

@@ -0,0 +1,7 @@
+var close = "Close";
+var enUS = {
+	close: close
+};
+
+export { close, enUS as default };
+//# sourceMappingURL=en-US.json.js.map

package/packages/popovers/src/components/dialog-content/intl/en-US.json.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"en-US.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/packages/popovers/src/components/dialog-content/intl/fr-FR.json.js

@@ -0,0 +1,7 @@
+var close = "Fermer";
+var frFR = {
+	close: close
+};
+
+export { close, frFR as default };
+//# sourceMappingURL=fr-FR.json.js.map

package/packages/popovers/src/components/dialog-content/intl/fr-FR.json.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fr-FR.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/packages/popovers/src/components/dialog-content/intl/index.js

@@ -0,0 +1,10 @@
+import enUS from './en-US.json.js';
+import frFR from './fr-FR.json.js';
+
+var intlMessages = {
+  'en-US': enUS,
+  'fr-FR': frFR
+};
+
+export { intlMessages as default };
+//# sourceMappingURL=index.js.map

package/packages/popovers/src/components/dialog-content/intl/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../../../popovers/src/components/dialog-content/intl/index.ts"],"sourcesContent":["import enUS from './en-US.json';\nimport frFR from './fr-FR.json';\n\nexport default {\n  'en-US': enUS,\n  'fr-FR': frFR,\n};\n"],"names":["enUS","frFR"],"mappings":";;;AAGA,mBAAe;AACb,EAAA,OAAO,EAAEA,IAAI;AACb,EAAA,OAAO,EAAEC,IAAAA;AACX,CAAC;;;;"}

package/packages/popovers/src/components/dialog-content/styles.js

@@ -0,0 +1,77 @@
+import { FloatingOverlay } from '../../../../../node_modules/@floating-ui/react/dist/floating-ui.react.mjs.js';
+import styled, { css } from 'styled-components';
+import { baseContainer, Theme } from '@redsift/design-system';
+
+/**
+ * Component style.
+ */
+const StyledDialogContent = styled.div`
+  ${baseContainer}
+  ${_ref => {
+  let {
+    $theme
+  } = _ref;
+  return css`
+    color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});
+    background-color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'black' : 'white'});
+  `;
+}}
+
+  border-radius: 4px;
+  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2);
+  display: flex;
+  filter: drop-shadow(0px 4px 5px rgba(0, 0, 0, 0.14)) drop-shadow(0px 1px 10px rgba(0, 0, 0, 0.12));
+  flex-direction: column;
+  font-family: var(--redsift-typography-dialog-font-family);
+  font-size: var(--redsift-typography-dialog-font-size);
+  font-weight: var(--redsift-typography-dialog-font-weight);
+  line-height: var(--redsift-typography-dialog-line-height);
+  margin: 32px;
+  max-width: calc(100vw - 48px);
+  padding: 24px;
+  width: 540px;
+  z-index: var(--redsift-layout-z-index-dialog);
+
+  ${_ref2 => {
+  let {
+    $width,
+    $maxWidth,
+    $minWidth
+  } = _ref2;
+  return css`
+    ${$width !== undefined ? `width: ${$width};` : ''}
+    ${$maxWidth !== undefined ? `min-width: ${$maxWidth};` : ''}
+    ${$minWidth !== undefined ? `max-width: ${$minWidth};` : ''}
+  `;
+}}
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  .redsift-dialog-content__header {
+    align-items: flex-start;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .redsift-card-header__icon-button {
+    margin-top: 8px;
+    margin-left: auto;
+    margin-right: 8px;
+
+    [dir='rtl'] & {
+      margin-left: 8px;
+      margin-right: auto;
+    }
+  }
+`;
+const StyledFloatingOverlay = styled(FloatingOverlay)`
+  background: rgba(0, 0, 0, 0.8);
+  display: grid;
+  place-items: center;
+  z-index: var(--redsift-layout-z-index-overlay);
+`;
+
+export { StyledDialogContent, StyledFloatingOverlay };
+//# sourceMappingURL=styles.js.map

package/packages/popovers/src/components/dialog-content/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../../popovers/src/components/dialog-content/styles.ts"],"sourcesContent":["import { FloatingOverlay } from '@floating-ui/react';\nimport styled, { css } from 'styled-components';\nimport { StyledDialogContentProps } from './types';\nimport { Theme, baseContainer } from '@redsift/design-system';\n\n/**\n * Component style.\n */\nexport const StyledDialogContent = styled.div<StyledDialogContentProps>`\n  ${baseContainer}\n  ${({ $theme }) => css`\n    color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});\n    background-color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'black' : 'white'});\n  `}\n\n  border-radius: 4px;\n  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2);\n  display: flex;\n  filter: drop-shadow(0px 4px 5px rgba(0, 0, 0, 0.14)) drop-shadow(0px 1px 10px rgba(0, 0, 0, 0.12));\n  flex-direction: column;\n  font-family: var(--redsift-typography-dialog-font-family);\n  font-size: var(--redsift-typography-dialog-font-size);\n  font-weight: var(--redsift-typography-dialog-font-weight);\n  line-height: var(--redsift-typography-dialog-line-height);\n  margin: 32px;\n  max-width: calc(100vw - 48px);\n  padding: 24px;\n  width: 540px;\n  z-index: var(--redsift-layout-z-index-dialog);\n\n  ${({ $width, $maxWidth, $minWidth }) => css`\n    ${$width !== undefined ? `width: ${$width};` : ''}\n    ${$maxWidth !== undefined ? `min-width: ${$maxWidth};` : ''}\n    ${$minWidth !== undefined ? `max-width: ${$minWidth};` : ''}\n  `}\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  .redsift-dialog-content__header {\n    align-items: flex-start;\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .redsift-card-header__icon-button {\n    margin-top: 8px;\n    margin-left: auto;\n    margin-right: 8px;\n\n    [dir='rtl'] & {\n      margin-left: 8px;\n      margin-right: auto;\n    }\n  }\n`;\n\nexport const StyledFloatingOverlay = styled(FloatingOverlay)`\n  background: rgba(0, 0, 0, 0.8);\n  display: grid;\n  place-items: center;\n  z-index: var(--redsift-layout-z-index-overlay);\n`;\n"],"names":["StyledDialogContent","styled","div","baseContainer","_ref","$theme","css","Theme","dark","_ref2","$width","$maxWidth","$minWidth","undefined","StyledFloatingOverlay","FloatingOverlay"],"mappings":";;;;AAKA;AACA;AACA;AACaA,MAAAA,mBAAmB,GAAGC,MAAM,CAACC,GAA8B,CAAA;AACxE,EAAA,EAAIC,aAAc,CAAA;AAClB,EAAA,EAAIC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAD,IAAA,CAAA;AAAA,EAAA,OAAKE,GAAI,CAAA;AACxB,uCAAyCD,EAAAA,MAAM,KAAKE,KAAK,CAACC,IAAI,GAAG,OAAO,GAAG,aAAc,CAAA;AACzF,kDAAoDH,EAAAA,MAAM,KAAKE,KAAK,CAACC,IAAI,GAAG,OAAO,GAAG,OAAQ,CAAA;AAC9F,EAAG,CAAA,CAAA;AAAA,CAAC,CAAA;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAA,EAAIC,KAAA,IAAA;EAAA,IAAC;IAAEC,MAAM;IAAEC,SAAS;AAAEC,IAAAA,SAAAA;AAAU,GAAC,GAAAH,KAAA,CAAA;AAAA,EAAA,OAAKH,GAAI,CAAA;AAC9C,IAAMI,EAAAA,MAAM,KAAKG,SAAS,GAAI,UAASH,MAAO,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AACtD,IAAMC,EAAAA,SAAS,KAAKE,SAAS,GAAI,cAAaF,SAAU,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AAChE,IAAMC,EAAAA,SAAS,KAAKC,SAAS,GAAI,cAAaD,SAAU,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AAChE,EAAG,CAAA,CAAA;AAAA,CAAC,CAAA;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAC;MAEYE,qBAAqB,GAAGb,MAAM,CAACc,eAAe,CAAE,CAAA;AAC7D;AACA;AACA;AACA;AACA;;;;"}

package/packages/popovers/src/components/dialog-content-actions/DialogContentActions.js

@@ -0,0 +1,38 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { useMergeRefs } from '../../../../../node_modules/@floating-ui/react/dist/floating-ui.react.mjs.js';
+import { StyledDialogContentActions } from './styles.js';
+import { useDialogContext } from '../dialog/useDialogContext.js';
+
+const _excluded = ["children", "className", "flexDirection"];
+const COMPONENT_NAME = 'DialogContentActions';
+const CLASSNAME = 'redsift-dialog-content-actions';
+
+/**
+ * The DialogContentActions component.
+ */
+const DialogContentActions = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      flexDirection = 'row'
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const {
+    actionsRef,
+    initialFocus
+  } = useDialogContext();
+  return /*#__PURE__*/React__default.createElement(StyledDialogContentActions, _extends({
+    flexDirection: flexDirection
+  }, forwardedProps, {
+    className: classNames(DialogContentActions.className, className),
+    ref: useMergeRefs([ref, actionsRef]),
+    tabIndex: initialFocus === 'actions' ? -1 : undefined
+  }), children);
+});
+DialogContentActions.className = CLASSNAME;
+DialogContentActions.displayName = COMPONENT_NAME;
+
+export { DialogContentActions };
+//# sourceMappingURL=DialogContentActions.js.map

package/packages/popovers/src/components/dialog-content-actions/DialogContentActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogContentActions.js","sources":["../../../../../../../popovers/src/components/dialog-content-actions/DialogContentActions.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport classNames from 'classnames';\nimport { useMergeRefs } from '@floating-ui/react';\n\nimport { Comp } from '@redsift/design-system';\nimport { StyledDialogContentActions } from './styles';\nimport { DialogContentActionsProps } from './types';\nimport { useDialogContext } from '../dialog';\n\nconst COMPONENT_NAME = 'DialogContentActions';\nconst CLASSNAME = 'redsift-dialog-content-actions';\n\n/**\n * The DialogContentActions component.\n */\nexport const DialogContentActions: Comp<DialogContentActionsProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const { children, className, flexDirection = 'row', ...forwardedProps } = props;\n\n  const { actionsRef, initialFocus } = useDialogContext();\n\n  return (\n    <StyledDialogContentActions\n      flexDirection={flexDirection}\n      {...forwardedProps}\n      className={classNames(DialogContentActions.className, className)}\n      ref={useMergeRefs([ref, actionsRef])}\n      tabIndex={initialFocus === 'actions' ? -1 : undefined}\n    >\n      {children}\n    </StyledDialogContentActions>\n  );\n});\nDialogContentActions.className = CLASSNAME;\nDialogContentActions.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","DialogContentActions","forwardRef","props","ref","children","className","flexDirection","forwardedProps","_objectWithoutProperties","_excluded","actionsRef","initialFocus","useDialogContext","React","createElement","StyledDialogContentActions","_extends","classNames","useMergeRefs","tabIndex","undefined","displayName"],"mappings":";;;;;;;;AASA,MAAMA,cAAc,GAAG,sBAAsB,CAAA;AAC7C,MAAMC,SAAS,GAAG,gCAAgC,CAAA;;AAElD;AACA;AACA;AACO,MAAMC,oBAAqE,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EAC9G,MAAM;MAAEC,QAAQ;MAAEC,SAAS;AAAEC,MAAAA,aAAa,GAAG,KAAA;AAAyB,KAAC,GAAGJ,KAAK;AAAxBK,IAAAA,cAAc,GAAAC,wBAAA,CAAKN,KAAK,EAAAO,SAAA,CAAA,CAAA;EAE/E,MAAM;IAAEC,UAAU;AAAEC,IAAAA,YAAAA;GAAc,GAAGC,gBAAgB,EAAE,CAAA;AAEvD,EAAA,oBACEC,cAAA,CAAAC,aAAA,CAACC,0BAA0B,EAAAC,QAAA,CAAA;AACzBV,IAAAA,aAAa,EAAEA,aAAAA;AAAc,GAAA,EACzBC,cAAc,EAAA;IAClBF,SAAS,EAAEY,UAAU,CAACjB,oBAAoB,CAACK,SAAS,EAAEA,SAAS,CAAE;IACjEF,GAAG,EAAEe,YAAY,CAAC,CAACf,GAAG,EAAEO,UAAU,CAAC,CAAE;AACrCS,IAAAA,QAAQ,EAAER,YAAY,KAAK,SAAS,GAAG,CAAC,CAAC,GAAGS,SAAAA;AAAU,GAAA,CAAA,EAErDhB,QACyB,CAAC,CAAA;AAEjC,CAAC,EAAC;AACFJ,oBAAoB,CAACK,SAAS,GAAGN,SAAS,CAAA;AAC1CC,oBAAoB,CAACqB,WAAW,GAAGvB,cAAc;;;;"}

package/packages/popovers/src/components/dialog-content-actions/styles.js

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+import { baseContainer } from '@redsift/design-system';
+
+/**
+ * Component style.
+ */
+const StyledDialogContentActions = styled.div`
+  display: flex;
+  ${baseContainer}
+
+  margin-top: 8px;
+  margin-bottom: 8px;
+
+  &:focus-visible {
+    outline: none;
+  }
+`;
+
+export { StyledDialogContentActions };
+//# sourceMappingURL=styles.js.map

package/packages/popovers/src/components/dialog-content-actions/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../../popovers/src/components/dialog-content-actions/styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { baseContainer } from '@redsift/design-system';\nimport { StyledDialogContentActionsProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledDialogContentActions = styled.div<StyledDialogContentActionsProps>`\n  display: flex;\n  ${baseContainer}\n\n  margin-top: 8px;\n  margin-bottom: 8px;\n\n  &:focus-visible {\n    outline: none;\n  }\n`;\n"],"names":["StyledDialogContentActions","styled","div","baseContainer"],"mappings":";;;AAIA;AACA;AACA;AACaA,MAAAA,0BAA0B,GAAGC,MAAM,CAACC,GAAqC,CAAA;AACtF;AACA,EAAA,EAAIC,aAAc,CAAA;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;"}