@automattic/vip-design-system 1.2.1 → 1.2.2

package/src/system/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,133 @@
+/**
+ * Internal dependencies
+ */
+import { Tooltip, Button, Heading, Text, Link } from '..';
+
+export default {
+	title: 'Tooltip',
+	component: Tooltip,
+	parameters: {
+		docs: {
+			description: {
+				component: `
+A tooltip is a short descriptive message that appears when a user hovers or focuses on an
+element. Our tooltip aims to be 100% CSS-only. It uses a global css approach to inject the
+tooltip styles.
+
+## Kwown issues
+
+- Storybook uses iframes to render the components. This means that the tooltip box will overlap in the demos, but you can click on each demo page to see the correct render.
+- The current implementation of this component is <strong>NOT</strong> protected from viewport
+clipping (collision). For now, you can pick another <code>vip-tooltip-position</code> if
+possible.
+
+## Guidance
+
+### When to use the tooltip component
+
+- <strong>Helpful, non-critical information.</strong> Use tooltips to strengthen an existing
+message.
+- <strong>Enhance confidence.</strong> Use tooltips to increase certainty about an
+interaction.
+- <strong>Brief descriptions.</strong> Tooltips perform best with succinct helper text.
+- <strong>Lack of space.</strong> Tooltips are useful as a last resort for space-constrained
+UI. Explore other options for keeping content visible without a tooltip.
+
+### When to consider something else
+
+- <strong>Critical information.</strong> Don&apos;t hide information necessary for completing
+a task behind an tooltip interaction.
+- <strong>Lengthy descriptions.</strong> Tooltips are microcopy, and should be brief.
+Don&apos;t use a tooltip if you need a lot of text.
+- <strong>Redundant content.</strong> Don&apos;t use a tooltip when its content is repetitive
+or if usability is obvious.
+- <strong>Sufficient space.</strong> If content can fit outside a tooltip, don&apos;t use a
+tooltip.
+
+### Usability guidance
+
+- <strong>Use affordances.</strong> A hidden tooltip is unusable. Use tooltips only on
+elements that appear interactive, like buttons or links.
+- <strong>Avoid collisions.</strong> Be careful not introduce conflicting hover or focus
+events.
+- <strong>Use consistently.</strong> If using tooltips in one context, use in all similar
+contexts.
+- <strong>Don&apos;t block content.</strong> Use the <code>data-position</code> attribute to
+prevent the tooltip from covering other page elements.
+
+-------
+
+This documentation is heavily inspired by the [U.S Web Design System (USWDS)](https://designsystem.digital.gov/components/tooltip/#package). We use USWDS as trusted source of truth for accessibility and usability best practices.
+
+## Component Properties
+`,
+			},
+		},
+	},
+};
+
+export const Basic = () => (
+	<>
+		<Heading variant="h2">Basic Usage</Heading>
+		<Text>
+			Pass a trigger and title, the trigger component will be cloned and injected with a{ ' ' }
+			<code>[vip-tooltip]</code> HTML attribute.
+		</Text>
+
+		<Tooltip
+			trigger={ <Button sx={ { mr: 3 } }>Button with top tooltip</Button> }
+			title="On the top"
+			position="top"
+		/>
+
+		<Tooltip
+			trigger={ <Button sx={ { mr: 3 } }>Button with bottom tooltip</Button> }
+			title="On the Bottom"
+			position="bottom"
+		/>
+
+		<Tooltip
+			trigger={ <Button sx={ { mr: 3 } }>Button with left tooltip</Button> }
+			title="On the Left"
+			position="left"
+		/>
+
+		<Tooltip
+			trigger={ <Button>Button with right tooltip</Button> }
+			title="On the Right"
+			position="right"
+		/>
+	</>
+);
+
+export const Container = () => (
+	<div>
+		<Heading variant="h2">Container Usage</Heading>
+
+		<Text>
+			You can also wrap a component with the <code>Tooltip</code> component. To use tooltips you can
+			simply pass <code>data-vip-tooltip</code> as an HTML attribute to your component.
+		</Text>
+
+		<div sx={ { backgroundColor: 'red' } }>
+			<Tooltip>
+				<Button data-vip-tooltip-position="top" data-vip-tooltip="Test test" sx={ { ml: 3 } }>
+					This is another way
+				</Button>
+
+				<br />
+				<br />
+				<br />
+
+				<Link
+					href="http://google.com"
+					data-vip-tooltip-position="right"
+					data-vip-tooltip="is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500"
+					sx={ { ml: 3 } }
+				>
+					Use with links too
+				</Link>
+			</Tooltip>
+		</div>
+	</div>
+);

package/src/system/Tooltip/Tooltip.tsx

@@ -0,0 +1,39 @@
+/**
+ * External dependencies
+ */
+import { PropsWithChildren, ReactElement, cloneElement } from 'react';
+import css from './Tooltip.css';
+
+/**
+ * Internal dependencies
+ */
+
+export interface TooltipProps {
+	title?: string;
+	trigger?: ReactElement;
+	position?: 'top' | 'bottom' | 'left' | 'right';
+}
+
+const Tooltip = ( {
+	title,
+	trigger,
+	children,
+	position = 'top',
+}: PropsWithChildren< TooltipProps > ) => {
+	const triggerCloned = trigger
+		? cloneElement( trigger, {
+				'data-vip-tooltip': title,
+				'aria-label': title,
+				'data-vip-tooltip-position': position,
+		  } )
+		: null;
+
+	return (
+		<>
+			{ triggerCloned }
+			{ children }
+		</>
+	);
+};
+
+export { Tooltip, css };

package/src/system/index.js

@@ -43,7 +43,7 @@ import { Notice } from './Notice';
 import { Progress } from './Progress';
 import { Spinner } from './Spinner';
 import { Tooltip } from './Tooltip';
-import { Notification } from './Notification';
+
 import { OptionRow } from './OptionRow';
 import { Table, TableRow, TableCell } from './Table';
 import { Text } from './Text';
@@ -85,7 +85,6 @@ export {
 	TableRow,
 	TableCell,
 	Tooltip,
-	Notification,
 	Link,
 	Radio,
 	RadioBoxGroup,

package/src/system/theme/index.js

@@ -54,7 +54,27 @@ const getComponentColors = ( theme, gColor, gVariants ) => ( {
 
 	// Notice
 	notice: {
-		...theme.support,
+		// extending the notice theme to support the alert variant
+		background: {
+			alert: theme.support.background.error,
+			...theme.support.background,
+		},
+		link: {
+			alert: theme.support.link.error,
+			...theme.support.link,
+		},
+		accent: {
+			alert: theme.support.accent.error,
+			...theme.support.accent,
+		},
+		icon: {
+			alert: theme.support.icon.error,
+			...theme.support.icon,
+		},
+		text: {
+			alert: theme.support.text.error,
+			...theme.support.text,
+		},
 	},
 
 	// layer

package/test/fileMock.ts

@@ -0,0 +1 @@
+export default {};

package/test/setupAfterEnv.ts

@@ -0,0 +1,5 @@
+/**
+ * External dependencies
+ */
+import 'jest-axe/extend-expect';
+import '@testing-library/jest-dom';

package/tsconfig.definition.json

@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    // Produce .d.ts declaration files. Must be enabled via command-line flags
+    // since noEmit=true in this file. See `npm run build:types` script.
+    "declaration": true,
+
+    // Output directory for declaration files.
+    "outDir": "build/system"
+  },
+  "include": [ "src" ]
+}

package/.storybook/decorators/withBoundingBox.jsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import { makeDecorator } from '@storybook/addons';
-import { Box, Heading } from '../../src/system';
-
-export default makeDecorator( {
-	name: 'withBoundingBox',
-	parameterName: 'colorMode2',
-	wrapper: ( storyFn, context ) => {
-		return (
-			<Box sx={ { p: 3, height: '100vh' } }>
-				<Box sx={ { backgroundColor: 'backgroundMuted', p: 3, borderRadius: 2 } }>
-					<Heading variant="h1" sx={ { mb: 1 } }>
-						{ context.title }
-					</Heading>
-					<Heading variant="h2">{ context.name }</Heading>
-				</Box>
-
-				<Box sx={ { py: 3 } }>{ storyFn() }</Box>
-			</Box>
-		);
-	},
-} );

package/build/system/Box/Box.stories.tsx

@@ -1,11 +0,0 @@
-/**
- * Internal dependencies
- */
-import { Box } from '..';
-
-export default {
-	title: 'Box',
-	component: Box,
-};
-
-export const Default = () => <Box>Hello</Box>;

package/build/system/Box/Box.tsx

@@ -1,22 +0,0 @@
-/**
- * External dependencies
- */
-import React, { Ref } from 'react';
-import classNames, { Argument } from 'classnames';
-import { Box as ThemeBox, BoxProps as ThemeBoxProps } from 'theme-ui';
-
-export interface BoxProps extends Omit< ThemeBoxProps, 'className' > {
-	className?: Argument;
-}
-
-export const Box = React.forwardRef< HTMLDivElement, BoxProps >(
-	( props: BoxProps, ref: Ref< HTMLDivElement > ) => (
-		<ThemeBox
-			{ ...props }
-			className={ classNames( 'vip-box-component', props.className ) }
-			ref={ ref }
-		/>
-	)
-);
-
-Box.displayName = 'Box';

package/build/system/Button/ButtonSubmit.stories.js

@@ -1,58 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports["default"] = exports.Default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _ = require("..");
-var _variants = _interopRequireDefault(require("./variants"));
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /**
-                                                                                                                                                                                                                                                                                                                                                     * External dependencies
-                                                                                                                                                                                                                                                                                                                                                     */ /**
-                                                                                                                                                                                                                                                                                                                                                         * Internal dependencies
-                                                                                                                                                                                                                                                                                                                                                         */
-var _default = {
-  title: 'ButtonSubmit',
-  component: _.ButtonSubmit,
-  argTypes: {
-    loading: {
-      control: {
-        type: 'boolean',
-        defaultValue: true
-      }
-    },
-    disabled: {
-      control: {
-        type: 'boolean'
-      }
-    },
-    show: {
-      control: {
-        type: 'boolean',
-        "default": true
-      }
-    },
-    variant: {
-      type: 'select',
-      options: _variants["default"]
-    }
-  }
-};
-exports["default"] = _default;
-var Template = function Template(args) {
-  return (0, _jsxRuntime.jsx)(_react["default"].Fragment, {
-    children: _variants["default"].map(function (v) {
-      return (0, _jsxRuntime.jsx)(_.ButtonSubmit, _extends({
-        sx: {
-          m: 3
-        },
-        variant: v
-      }, args, {
-        label: "Loading\u2026"
-      }), v);
-    })
-  });
-};
-var Default = Template.bind({});
-exports.Default = Default;

package/build/system/ConfirmationDialog/ConfirmationDialog.stories.js

@@ -1,42 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports["default"] = exports.Default = void 0;
-var _ = require("..");
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-/**
- * Internal dependencies
- */
-var _default = {
-  title: 'Deprecated/ConfirmationDialog',
-  component: _.ConfirmationDialog
-};
-exports["default"] = _default;
-var ConfirmationTrigger = (0, _jsxRuntime.jsx)(_.Button, {
-  sx: {
-    mr: 3
-  },
-  children: "Dangerous Action"
-});
-var ConfirmationContent = (0, _jsxRuntime.jsxs)(_.Box, {
-  p: 5,
-  children: [(0, _jsxRuntime.jsx)(_.Heading, {
-    children: "This is a Modal"
-  }), (0, _jsxRuntime.jsx)(_.Text, {
-    sx: {
-      fontSize: 3
-    },
-    children: "A modal is used to perform more detailed actions that don\u2018t necessarily need the context behind."
-  })]
-});
-var Default = function Default() {
-  return (0, _jsxRuntime.jsx)(_.Flex, {
-    children: (0, _jsxRuntime.jsx)(_.Box, {
-      children: (0, _jsxRuntime.jsx)(_.ConfirmationDialog, {
-        trigger: ConfirmationTrigger,
-        content: ConfirmationContent
-      })
-    })
-  });
-};
-exports.Default = Default;

package/build/system/Dialog/Dialog.stories.js

@@ -1,70 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports["default"] = exports.Default = void 0;
-var _ = require("..");
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-/**
- * Internal dependencies
- */
-var _default = {
-  title: 'Deprecated/Dialog',
-  component: _.Dialog
-};
-exports["default"] = _default;
-var DropdownTrigger = (0, _jsxRuntime.jsx)(_.Button, {
-  children: "Trigger Dropdown"
-});
-var ModalTrigger = (0, _jsxRuntime.jsx)(_.Button, {
-  sx: {
-    mr: 3
-  },
-  children: "Trigger Modal"
-});
-var DropdownContent = (0, _jsxRuntime.jsxs)("div", {
-  children: [(0, _jsxRuntime.jsxs)(_.DialogMenu, {
-    children: [(0, _jsxRuntime.jsx)(_.DialogMenuItem, {
-      children: "Profile"
-    }), (0, _jsxRuntime.jsx)(_.DialogMenuItem, {
-      children: "Account"
-    }), (0, _jsxRuntime.jsx)(_.DialogMenuItem, {
-      children: "Dark Mode"
-    })]
-  }), (0, _jsxRuntime.jsx)(_.DialogDivider, {}), (0, _jsxRuntime.jsx)(_.DialogMenu, {
-    children: (0, _jsxRuntime.jsx)(_.DialogMenuItem, {
-      children: "Logout"
-    })
-  })]
-});
-var ModalContent = (0, _jsxRuntime.jsxs)(_.Box, {
-  p: 5,
-  children: [(0, _jsxRuntime.jsx)(_.Heading, {
-    children: "This is a Modal"
-  }), (0, _jsxRuntime.jsx)(_.Text, {
-    sx: {
-      fontSize: 3
-    },
-    children: "A modal is used to perform more detailed actions that don\u2018t necessarily need the context behind."
-  })]
-});
-var Default = function Default() {
-  return (0, _jsxRuntime.jsxs)(_.Flex, {
-    children: [(0, _jsxRuntime.jsx)(_.Box, {
-      children: (0, _jsxRuntime.jsx)(_.Dialog, {
-        trigger: ModalTrigger,
-        content: ModalContent,
-        sx: {
-          width: 480
-        },
-        variant: "modal"
-      })
-    }), (0, _jsxRuntime.jsx)(_.Dialog, {
-      trigger: DropdownTrigger,
-      content: DropdownContent,
-      sx: {
-        width: 200
-      }
-    })]
-  });
-};
-exports.Default = Default;

package/build/system/Dropdown/Dropdown.stories.js

@@ -1,197 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports["default"] = exports.WithDialog = exports.Default = exports.ComplexOptions = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _reactIcons = require("@radix-ui/react-icons");
-var Dropdown = _interopRequireWildcard(require("."));
-var _Button = require("../Button");
-var NewDialog = _interopRequireWildcard(require("../NewDialog"));
-var _Link = require("../Link");
-var _Text = require("../Text");
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-var _excluded = ["onConfirm"];
-/**
- * External dependencies
- */
-/**
-/**
-* Internal dependencies
-*/
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-var _default = {
-  title: 'Dropdown',
-  component: Dropdown.Root
-};
-exports["default"] = _default;
-var Default = function Default() {
-  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [(0, _jsxRuntime.jsxs)(Dropdown.Root, {
-      trigger: (0, _jsxRuntime.jsx)(_Button.Button, {
-        children: "Open"
-      }),
-      children: [(0, _jsxRuntime.jsx)(Dropdown.Item, {
-        children: "All"
-      }), (0, _jsxRuntime.jsx)(Dropdown.Item, {
-        children: "Completed"
-      }), (0, _jsxRuntime.jsx)(Dropdown.Item, {
-        children: "Running"
-      }), (0, _jsxRuntime.jsx)(Dropdown.Item, {
-        children: "Cancelled"
-      }), (0, _jsxRuntime.jsx)(Dropdown.Separator, {}), (0, _jsxRuntime.jsx)(Dropdown.Item, {
-        children: "Errored"
-      })]
-    }), (0, _jsxRuntime.jsxs)(_Text.Text, {
-      children: ["This component is based on the Radix Dropdown. You can find all available options, props and features in the", ' ', (0, _jsxRuntime.jsx)(_Link.Link, {
-        href: "https://www.radix-ui.com/docs/primitives/components/dropdown-menu",
-        target: "_blank",
-        rel: "noopener noreferrer",
-        children: "Dropdown Documentation page."
-      })]
-    })]
-  });
-};
-exports.Default = Default;
-var ComplexOptions = function ComplexOptions() {
-  var _React$useState = _react["default"].useState(true),
-    bookmarksChecked = _React$useState[0],
-    setBookmarksChecked = _React$useState[1];
-  var _React$useState2 = _react["default"].useState(false),
-    urlsChecked = _React$useState2[0],
-    setUrlsChecked = _React$useState2[1];
-  var _React$useState3 = _react["default"].useState('pedro'),
-    person = _React$useState3[0],
-    setPerson = _React$useState3[1];
-  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [(0, _jsxRuntime.jsxs)(Dropdown.Root, {
-      trigger: (0, _jsxRuntime.jsx)(_Button.Button, {
-        children: "See options"
-      }),
-      children: [(0, _jsxRuntime.jsx)(Dropdown.Item, {
-        children: "New Tab"
-      }), (0, _jsxRuntime.jsx)(Dropdown.Item, {
-        children: "New Window"
-      }), (0, _jsxRuntime.jsx)(Dropdown.Item, {
-        disabled: true,
-        children: "New Private Window"
-      }), (0, _jsxRuntime.jsxs)(Dropdown.Sub, {
-        children: [(0, _jsxRuntime.jsxs)(Dropdown.SubTrigger, {
-          children: ["More Tools", (0, _jsxRuntime.jsx)(_reactIcons.ChevronRightIcon, {})]
-        }), (0, _jsxRuntime.jsxs)(Dropdown.SubContent, {
-          sideOffset: 2,
-          alignOffset: -5,
-          children: [(0, _jsxRuntime.jsx)(Dropdown.Item, {
-            children: "Save Page As\u2026"
-          }), (0, _jsxRuntime.jsx)(Dropdown.Item, {
-            children: "Create Shortcut\u2026"
-          }), (0, _jsxRuntime.jsx)(Dropdown.Item, {
-            children: "Name Window\u2026"
-          }), (0, _jsxRuntime.jsx)(Dropdown.Separator, {}), (0, _jsxRuntime.jsx)(Dropdown.Item, {
-            children: "Developer Tools"
-          })]
-        })]
-      }), (0, _jsxRuntime.jsx)(Dropdown.Separator, {}), (0, _jsxRuntime.jsxs)(Dropdown.CheckboxItem, {
-        checked: bookmarksChecked,
-        onCheckedChange: setBookmarksChecked,
-        children: [(0, _jsxRuntime.jsx)(Dropdown.ItemIndicator, {
-          children: (0, _jsxRuntime.jsx)(_reactIcons.CheckIcon, {})
-        }), "Show Bookmarks"]
-      }), (0, _jsxRuntime.jsxs)(Dropdown.CheckboxItem, {
-        checked: urlsChecked,
-        onCheckedChange: setUrlsChecked,
-        children: [(0, _jsxRuntime.jsx)(Dropdown.ItemIndicator, {
-          children: (0, _jsxRuntime.jsx)(_reactIcons.CheckIcon, {})
-        }), "Show Full URLs"]
-      }), (0, _jsxRuntime.jsx)(Dropdown.Separator, {}), (0, _jsxRuntime.jsx)(Dropdown.Label, {
-        children: "People"
-      }), (0, _jsxRuntime.jsxs)(Dropdown.RadioGroup, {
-        value: person,
-        onValueChange: setPerson,
-        children: [(0, _jsxRuntime.jsxs)(Dropdown.RadioItem, {
-          value: "pedro",
-          children: [(0, _jsxRuntime.jsx)(Dropdown.ItemIndicator, {
-            children: (0, _jsxRuntime.jsx)(_reactIcons.DotFilledIcon, {})
-          }), "Pedro Duarte"]
-        }), (0, _jsxRuntime.jsxs)(Dropdown.RadioItem, {
-          value: "colm",
-          children: [(0, _jsxRuntime.jsx)(Dropdown.ItemIndicator, {
-            children: (0, _jsxRuntime.jsx)(_reactIcons.DotFilledIcon, {})
-          }), "Colm Tuite"]
-        })]
-      })]
-    }), (0, _jsxRuntime.jsxs)(_Text.Text, {
-      children: ["This component is based on the Radix Dropdown. You can find all available options, props and features in the", ' ', (0, _jsxRuntime.jsx)(_Link.Link, {
-        href: "https://www.radix-ui.com/docs/primitives/components/dropdown-menu",
-        target: "_blank",
-        rel: "noopener noreferrer",
-        children: "Dropdown Documentation page."
-      })]
-    })]
-  });
-};
-exports.ComplexOptions = ComplexOptions;
-var WithDialog = function WithDialog() {
-  var _React$useState4 = _react["default"].useState(false),
-    alertOpen = _React$useState4[0],
-    setAlertOpen = _React$useState4[1];
-  var _React$useState5 = _react["default"].useState(false),
-    menuOpen = _React$useState5[0],
-    setMenuOpen = _React$useState5[1];
-
-  // eslint-disable-next-line react/prop-types
-  var AreYouSureDialog = function AreYouSureDialog(_ref) {
-    var onConfirm = _ref.onConfirm,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-    return (0, _jsxRuntime.jsx)(NewDialog.Root, _extends({}, props, {
-      content: (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [(0, _jsxRuntime.jsx)(_Button.Button, {
-          variant: "secondary",
-          onClick: function onClick() {
-            return onConfirm();
-          },
-          children: "Custom Close."
-        }), (0, _jsxRuntime.jsx)("p", {
-          children: "Teste abc."
-        })]
-      })
-    }));
-  };
-  return (0, _jsxRuntime.jsxs)("div", {
-    children: [(0, _jsxRuntime.jsx)(_Text.Text, {
-      children: "This is an important example when combining the Dropdown component with the NewDialog component. In order to have the correct accessibility, there are some events you need to use. Use this example if you want to copy and paste the code."
-    }), (0, _jsxRuntime.jsxs)(Dropdown.Root, {
-      modal: !alertOpen,
-      open: menuOpen,
-      onOpenChange: setMenuOpen,
-      contentProps: {
-        sideOffset: 5
-      },
-      trigger: (0, _jsxRuntime.jsx)(_Button.Button, {
-        children: "Open"
-      }),
-      children: [(0, _jsxRuntime.jsx)(Dropdown.Item, {
-        children: "I don't do anything"
-      }), (0, _jsxRuntime.jsx)(AreYouSureDialog, {
-        title: "Are you in the jungle?",
-        description: "sha-n-n-n-n-n-n-n-n knees, knees",
-        open: alertOpen,
-        onOpenChange: setAlertOpen,
-        onConfirm: function onConfirm() {
-          setAlertOpen(false);
-          setMenuOpen(false);
-        },
-        trigger: (0, _jsxRuntime.jsx)(Dropdown.Item, {
-          onSelect: function onSelect(event) {
-            return event.preventDefault();
-          },
-          children: "Open Dialog"
-        })
-      })]
-    })]
-  });
-};
-exports.WithDialog = WithDialog;