@cerberus-design/react 0.6.1-next-0345599 → 0.6.1-next-1315bf2

package/build/legacy/chunk-YRUUO4AP.js

@@ -0,0 +1,166 @@
+import {
+  Portal
+} from "./chunk-4CAT3FHV.js";
+import {
+  Button
+} from "./chunk-2ATICEW3.js";
+import {
+  Show
+} from "./chunk-4O4QFF4S.js";
+import {
+  trapFocus
+} from "./chunk-KESKDLX6.js";
+import {
+  $cerberusIcons
+} from "./chunk-3TYUA4C7.js";
+
+// src/context/confirm-modal.tsx
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { css, cx } from "@cerberus-design/styled-system/css";
+import { circle, hstack, vstack } from "@cerberus-design/styled-system/patterns";
+import {
+  confirmModal
+} from "@cerberus-design/styled-system/recipes";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ConfirmModalContext = createContext(null);
+function ConfirmModal(props) {
+  const dialogRef = useRef(null);
+  const resolveRef = useRef(null);
+  const [content, setContent] = useState(null);
+  const focusTrap = trapFocus(dialogRef);
+  const palette = useMemo(
+    () => (content == null ? void 0 : content.kind) === "destructive" ? "danger" : "action",
+    [content]
+  );
+  const styles = confirmModal({ palette });
+  const handleChoice = useCallback((e) => {
+    var _a, _b, _c;
+    const target = e.currentTarget;
+    if (target.value === "true") {
+      (_a = resolveRef.current) == null ? void 0 : _a.call(resolveRef, true);
+    }
+    (_b = resolveRef.current) == null ? void 0 : _b.call(resolveRef, false);
+    (_c = dialogRef == null ? void 0 : dialogRef.current) == null ? void 0 : _c.close();
+  }, []);
+  const handleShow = useCallback((options) => {
+    return new Promise((resolve) => {
+      var _a;
+      setContent({ ...options, kind: options.kind || "non-destructive" });
+      (_a = dialogRef == null ? void 0 : dialogRef.current) == null ? void 0 : _a.showModal();
+      resolveRef.current = resolve;
+    });
+  }, []);
+  const value = useMemo(
+    () => ({
+      show: handleShow
+    }),
+    [handleShow]
+  );
+  return /* @__PURE__ */ jsxs(ConfirmModalContext.Provider, { value, children: [
+    props.children,
+    /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs("dialog", { className: styles.dialog, onKeyDown: focusTrap, ref: dialogRef, children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: vstack({
+            alignItems: "flex-start",
+            gap: "4",
+            mb: "8"
+          }),
+          children: [
+            /* @__PURE__ */ jsx(ConfirmModalIcon, { palette }),
+            /* @__PURE__ */ jsx("h2", { className: styles.heading, children: content == null ? void 0 : content.heading }),
+            /* @__PURE__ */ jsx("p", { className: styles.description, children: content == null ? void 0 : content.description })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: hstack({
+            justifyContent: "stretch",
+            gap: "4"
+          }),
+          children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                autoFocus: true,
+                className: css({
+                  w: "1/2"
+                }),
+                name: "confirm",
+                onClick: handleChoice,
+                palette,
+                value: "true",
+                children: content == null ? void 0 : content.actionText
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                className: css({
+                  w: "1/2"
+                }),
+                name: "cancel",
+                onClick: handleChoice,
+                usage: "outlined",
+                value: "false",
+                children: content == null ? void 0 : content.cancelText
+              }
+            )
+          ]
+        }
+      )
+    ] }) })
+  ] });
+}
+function ConfirmModalIcon(props) {
+  const InfoIcon = $cerberusIcons.confirmModal;
+  return /* @__PURE__ */ jsx(
+    Show,
+    {
+      when: props.palette === "danger",
+      fallback: /* @__PURE__ */ jsx("div", { className: cx(confirmModal().icon, circle()), children: /* @__PURE__ */ jsx(InfoIcon, {}) }),
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cx(
+            confirmModal({
+              palette: "danger"
+            }).icon,
+            circle({
+              bgColor: "danger.surface.initial"
+            })
+          ),
+          style: {
+            color: "var(--cerberus-colors-danger-text-100)"
+          },
+          children: /* @__PURE__ */ jsx(InfoIcon, {})
+        }
+      )
+    }
+  );
+}
+function useConfirmModal() {
+  const context = useContext(ConfirmModalContext);
+  if (context === null) {
+    throw new Error(
+      "useConfirmModal must be used within a ConfirmModal Provider"
+    );
+  }
+  return context;
+}
+
+export {
+  ConfirmModal,
+  useConfirmModal
+};
+//# sourceMappingURL=chunk-YRUUO4AP.js.map

package/build/legacy/chunk-YRUUO4AP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/context/confirm-modal.tsx"],"sourcesContent":["'use client'\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n  type MouseEvent,\n  type PropsWithChildren,\n} from 'react'\nimport { Portal } from '../components/Portal'\nimport { Button } from '../components/Button'\nimport { css, cx } from '@cerberus-design/styled-system/css'\nimport { circle, hstack, vstack } from '@cerberus-design/styled-system/patterns'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport {\n  confirmModal,\n  type ConfirmModalVariantProps,\n} from '@cerberus-design/styled-system/recipes'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\nimport { Show } from '../components/Show'\n\n/**\n * This module provides a context and hook for the confirm modal.\n * @module\n */\n\nexport interface ShowConfirmModalOptions {\n  kind?: 'destructive' | 'non-destructive'\n  heading: string\n  description?: string\n  actionText: string\n  cancelText: string\n}\nexport type ShowResult =\n  | ((value: boolean | PromiseLike<boolean>) => void)\n  | null\n\nexport interface ConfirmModalValue {\n  show: (options: ShowConfirmModalOptions) => Promise<boolean>\n}\n\nconst ConfirmModalContext = createContext<ConfirmModalValue | null>(null)\n\nexport interface ConfirmModalProviderProps {}\n\n/**\n * Provides a confirm modal to the app.\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <ConfirmModal>\n *   <SomeFeatureSection />\n * </ConfirmModal>\n *\n * // Use the hook to show the confirm modal.\n * const confirm = useConfirmModal()\n *\n * const handleClick = useCallback(async () => {\n *  const userConsent = await confirm.show({\n *   heading: 'Add new payment method?',\n *  description:\n *   'This will add a new payment method to your account to be billed for future purchases.',\n * actionText: 'Yes, add payment method',\n * cancelText: 'No, cancel',\n * })\n * setConsent(userConsent)\n * }, [confirm])\n * ```\n */\nexport function ConfirmModal(\n  props: PropsWithChildren<ConfirmModalProviderProps>,\n) {\n  const dialogRef = useRef<HTMLDialogElement>(null)\n  const resolveRef = useRef<ShowResult>(null)\n  const [content, setContent] = useState<ShowConfirmModalOptions | null>(null)\n  const focusTrap = trapFocus(dialogRef)\n\n  const palette = useMemo(\n    () => (content?.kind === 'destructive' ? 'danger' : 'action'),\n    [content],\n  )\n  const styles = confirmModal({ palette })\n\n  const handleChoice = useCallback((e: MouseEvent<HTMLButtonElement>) => {\n    const target = e.currentTarget as HTMLButtonElement\n    if (target.value === 'true') {\n      resolveRef.current?.(true)\n    }\n    resolveRef.current?.(false)\n    dialogRef?.current?.close()\n  }, [])\n\n  const handleShow = useCallback((options: ShowConfirmModalOptions) => {\n    return new Promise<boolean>((resolve) => {\n      setContent({ ...options, kind: options.kind || 'non-destructive' })\n      dialogRef?.current?.showModal()\n      resolveRef.current = resolve\n    })\n  }, [])\n\n  const value = useMemo(\n    () => ({\n      show: handleShow,\n    }),\n    [handleShow],\n  )\n\n  return (\n    <ConfirmModalContext.Provider value={value}>\n      {props.children}\n\n      <Portal>\n        <dialog className={styles.dialog} onKeyDown={focusTrap} ref={dialogRef}>\n          <div\n            className={vstack({\n              alignItems: 'flex-start',\n              gap: '4',\n              mb: '8',\n            })}\n          >\n            <ConfirmModalIcon palette={palette} />\n            <h2 className={styles.heading}>{content?.heading}</h2>\n            <p className={styles.description}>{content?.description}</p>\n          </div>\n\n          <div\n            className={hstack({\n              justifyContent: 'stretch',\n              gap: '4',\n            })}\n          >\n            <Button\n              autoFocus\n              className={css({\n                w: '1/2',\n              })}\n              name=\"confirm\"\n              onClick={handleChoice}\n              palette={palette}\n              value=\"true\"\n            >\n              {content?.actionText}\n            </Button>\n            <Button\n              className={css({\n                w: '1/2',\n              })}\n              name=\"cancel\"\n              onClick={handleChoice}\n              usage=\"outlined\"\n              value=\"false\"\n            >\n              {content?.cancelText}\n            </Button>\n          </div>\n        </dialog>\n      </Portal>\n    </ConfirmModalContext.Provider>\n  )\n}\n\n// This is to help show the variant styles for the icon since Panda is\n// not syncing correctly for the danger variant.\nfunction ConfirmModalIcon(props: ConfirmModalVariantProps) {\n  const InfoIcon = $cerberusIcons.confirmModal\n  return (\n    <Show\n      when={props.palette === 'danger'}\n      fallback={\n        <div className={cx(confirmModal().icon, circle())}>\n          <InfoIcon />\n        </div>\n      }\n    >\n      <div\n        className={cx(\n          confirmModal({\n            palette: 'danger',\n          }).icon,\n          circle({\n            bgColor: 'danger.surface.initial',\n          }),\n        )}\n        style={{\n          color: 'var(--cerberus-colors-danger-text-100)',\n        }}\n      >\n        <InfoIcon />\n      </div>\n    </Show>\n  )\n}\n\nexport function useConfirmModal(): ConfirmModalValue {\n  const context = useContext(ConfirmModalContext)\n  if (context === null) {\n    throw new Error(\n      'useConfirmModal must be used within a ConfirmModal Provider',\n    )\n  }\n  return context\n}\n"],"mappings":"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","names":[]}

package/build/legacy/components/FeatureFlag.js

@@ -0,0 +1,10 @@
+"use client";
+import {
+  FeatureFlag
+} from "../chunk-VULPMZUW.js";
+import "../chunk-4M3EUP57.js";
+import "../chunk-4O4QFF4S.js";
+export {
+  FeatureFlag
+};
+//# sourceMappingURL=FeatureFlag.js.map

package/build/legacy/components/FeatureFlag.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/legacy/components/Input.js

@@ -1,11 +1,11 @@
 "use client";
 import {
   Input
-} from "../chunk-X4YQ27D5.js";
+} from "../chunk-5RA3ZIXA.js";
 import "../chunk-ZAU4JVLL.js";
 import "../chunk-4O4QFF4S.js";
-import "../chunk-3CBN7U25.js";
-import "../chunk-5MNCW677.js";
+import "../chunk-3TYUA4C7.js";
+import "../chunk-SCAVVE6E.js";
 export {
   Input
 };

package/build/legacy/components/Label.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   Label
-} from "../chunk-HE3HFKYU.js";
+} from "../chunk-JJGZRBIR.js";
 import "../chunk-ZAU4JVLL.js";
 import "../chunk-4O4QFF4S.js";
 export {

package/build/legacy/components/NavMenuList.js

@@ -2,7 +2,7 @@
 import {
   NavMenuList,
   getPosition
-} from "../chunk-G2QMBSK5.js";
+} from "../chunk-PMCYXRAH.js";
 import "../chunk-KJUCHZHV.js";
 import "../chunk-4O4QFF4S.js";
 export {

package/build/legacy/components/Portal.js

@@ -0,0 +1,7 @@
+import {
+  Portal
+} from "../chunk-4CAT3FHV.js";
+export {
+  Portal
+};
+//# sourceMappingURL=Portal.js.map

package/build/legacy/components/Portal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/legacy/components/Tag.js

@@ -1,6 +1,6 @@
 import {
   Tag
-} from "../chunk-5XNLWIZO.js";
+} from "../chunk-EVEEQRH6.js";
 import "../chunk-4O4QFF4S.js";
 export {
   Tag

package/build/legacy/components/Toggle.js

@@ -1,10 +1,10 @@
 "use client";
 import {
   Toggle
-} from "../chunk-734PGVLT.js";
+} from "../chunk-VLVKNEA5.js";
 import "../chunk-ZAU4JVLL.js";
-import "../chunk-3CBN7U25.js";
-import "../chunk-5MNCW677.js";
+import "../chunk-3TYUA4C7.js";
+import "../chunk-SCAVVE6E.js";
 export {
   Toggle
 };

package/build/legacy/config/cerbIcons.js

@@ -1,6 +1,6 @@
 import {
   defaultIcons
-} from "../chunk-5MNCW677.js";
+} from "../chunk-SCAVVE6E.js";
 export {
   defaultIcons
 };

package/build/legacy/config/defineIcons.js

@@ -1,8 +1,8 @@
 import {
   $cerberusIcons,
   defineIcons
-} from "../chunk-3CBN7U25.js";
-import "../chunk-5MNCW677.js";
+} from "../chunk-3TYUA4C7.js";
+import "../chunk-SCAVVE6E.js";
 export {
   $cerberusIcons,
   defineIcons

package/build/legacy/context/confirm-modal.js

@@ -0,0 +1,16 @@
+"use client";
+import {
+  ConfirmModal,
+  useConfirmModal
+} from "../chunk-YRUUO4AP.js";
+import "../chunk-4CAT3FHV.js";
+import "../chunk-2ATICEW3.js";
+import "../chunk-4O4QFF4S.js";
+import "../chunk-KESKDLX6.js";
+import "../chunk-3TYUA4C7.js";
+import "../chunk-SCAVVE6E.js";
+export {
+  ConfirmModal,
+  useConfirmModal
+};
+//# sourceMappingURL=confirm-modal.js.map

package/build/legacy/context/confirm-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/legacy/context/feature-flags.js

@@ -0,0 +1,10 @@
+"use client";
+import {
+  FeatureFlags,
+  useFeatureFlags
+} from "../chunk-4M3EUP57.js";
+export {
+  FeatureFlags,
+  useFeatureFlags
+};
+//# sourceMappingURL=feature-flags.js.map

package/build/legacy/context/feature-flags.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/legacy/index.js

@@ -1,3 +1,30 @@
+import {
+  Tag
+} from "./chunk-EVEEQRH6.js";
+import {
+  Textarea
+} from "./chunk-TCO46FK7.js";
+import {
+  Toggle
+} from "./chunk-VLVKNEA5.js";
+import {
+  ConfirmModal,
+  useConfirmModal
+} from "./chunk-YRUUO4AP.js";
+import {
+  NavMenuList,
+  getPosition
+} from "./chunk-PMCYXRAH.js";
+import {
+  NavMenuTrigger
+} from "./chunk-RPZAPUCF.js";
+import {
+  NavMenu,
+  useNavMenuContext
+} from "./chunk-KJUCHZHV.js";
+import {
+  Portal
+} from "./chunk-4CAT3FHV.js";
 import {
   Radio
 } from "./chunk-WE3JNSNO.js";
@@ -11,17 +38,18 @@ import {
   TabPanel
 } from "./chunk-67S42J4B.js";
 import {
-  Tag
-} from "./chunk-5XNLWIZO.js";
-import {
-  Textarea
-} from "./chunk-TCO46FK7.js";
-import {
-  Toggle
-} from "./chunk-734PGVLT.js";
+  useToggle
+} from "./chunk-SCQVXJBT.js";
 import {
   Button
 } from "./chunk-2ATICEW3.js";
+import {
+  FeatureFlag
+} from "./chunk-VULPMZUW.js";
+import {
+  FeatureFlags,
+  useFeatureFlags
+} from "./chunk-4M3EUP57.js";
 import {
   FieldMessage
 } from "./chunk-VGHVH2T3.js";
@@ -30,10 +58,10 @@ import {
 } from "./chunk-SLHX5K6I.js";
 import {
   Input
-} from "./chunk-X4YQ27D5.js";
+} from "./chunk-5RA3ZIXA.js";
 import {
   Label
-} from "./chunk-HE3HFKYU.js";
+} from "./chunk-JJGZRBIR.js";
 import {
   Field,
   useFieldContext
@@ -41,17 +69,6 @@ import {
 import {
   NavMenuLink
 } from "./chunk-6DIGPXAD.js";
-import {
-  NavMenuList,
-  getPosition
-} from "./chunk-G2QMBSK5.js";
-import {
-  NavMenuTrigger
-} from "./chunk-RPZAPUCF.js";
-import {
-  NavMenu,
-  useNavMenuContext
-} from "./chunk-KJUCHZHV.js";
 import {
   Show
 } from "./chunk-4O4QFF4S.js";
@@ -67,11 +84,14 @@ import {
   TabsContext,
   useTabsContext
 } from "./chunk-7KJIZIAU.js";
+import {
+  trapFocus
+} from "./chunk-KESKDLX6.js";
 import {
   $cerberusIcons,
   defineIcons
-} from "./chunk-3CBN7U25.js";
-import "./chunk-5MNCW677.js";
+} from "./chunk-3TYUA4C7.js";
+import "./chunk-SCAVVE6E.js";
 import {
   MODE_KEY,
   THEME_KEY,
@@ -79,12 +99,12 @@ import {
   useTheme,
   useThemeContext
 } from "./chunk-SXXWC6UD.js";
-import {
-  useToggle
-} from "./chunk-SCQVXJBT.js";
 export {
   $cerberusIcons,
   Button,
+  ConfirmModal,
+  FeatureFlag,
+  FeatureFlags,
   Field,
   FieldMessage,
   IconButton,
@@ -95,6 +115,7 @@ export {
   NavMenuLink,
   NavMenuList,
   NavMenuTrigger,
+  Portal,
   Radio,
   Show,
   THEME_KEY,
@@ -110,6 +131,9 @@ export {
   createNavTriggerProps,
   defineIcons,
   getPosition,
+  trapFocus,
+  useConfirmModal,
+  useFeatureFlags,
   useFieldContext,
   useNavMenuContext,
   useTabsContext,

package/build/modern/_tsup-dts-rollup.d.ts

@@ -11,12 +11,14 @@ import { iconButton } from '@cerberus/styled-system/recipes';
 import { input } from '@cerberus/styled-system/recipes';
 import type { InputHTMLAttributes } from 'react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
+import type { KeyboardEventHandler } from 'react';
 import { label } from '@cerberus/styled-system/recipes';
 import { MutableRefObject } from 'react';
 import type { Pretty } from '@cerberus-design/styled-system/types';
 import { PropsWithChildren } from 'react';
 import { radio } from '@cerberus-design/styled-system/recipes';
 import { ReactNode } from 'react';
+import { ReactPortal } from 'react';
 import { RecipeVariantProps } from '@cerberus/styled-system/css';
 import type { RecipeVariantProps as RecipeVariantProps_2 } from '@cerberus-design/styled-system/types';
 import type { RecipeVariantProps as RecipeVariantProps_3 } from '@cerberus/styled-system/types';
@@ -26,7 +28,7 @@ import { tag } from '@cerberus/styled-system/recipes';
 import type { TextareaHTMLAttributes } from 'react';
 import { ToggleVariantProps } from '@cerberus-design/styled-system/recipes';
 
-declare let $cerberusIcons: DefinedIcons;
+declare let $cerberusIcons: Required<DefinedIcons>;
 export { $cerberusIcons }
 export { $cerberusIcons as $cerberusIcons_alias_1 }
 
@@ -60,6 +62,45 @@ declare type ColorModes = 'light' | 'dark';
 export { ColorModes }
 export { ColorModes as ColorModes_alias_1 }
 
+/**
+ * Provides a confirm modal to the app.
+ * @example
+ * ```tsx
+ * // Wrap the Provider around the root of the feature.
+ * <ConfirmModal>
+ *   <SomeFeatureSection />
+ * </ConfirmModal>
+ *
+ * // Use the hook to show the confirm modal.
+ * const confirm = useConfirmModal()
+ *
+ * const handleClick = useCallback(async () => {
+ *  const userConsent = await confirm.show({
+ *   heading: 'Add new payment method?',
+ *  description:
+ *   'This will add a new payment method to your account to be billed for future purchases.',
+ * actionText: 'Yes, add payment method',
+ * cancelText: 'No, cancel',
+ * })
+ * setConsent(userConsent)
+ * }, [confirm])
+ * ```
+ */
+declare function ConfirmModal(props: PropsWithChildren<ConfirmModalProviderProps>): JSX_2.Element;
+export { ConfirmModal }
+export { ConfirmModal as ConfirmModal_alias_1 }
+
+declare interface ConfirmModalProviderProps {
+}
+export { ConfirmModalProviderProps }
+export { ConfirmModalProviderProps as ConfirmModalProviderProps_alias_1 }
+
+declare interface ConfirmModalValue {
+    show: (options: ShowConfirmModalOptions) => Promise<boolean>;
+}
+export { ConfirmModalValue }
+export { ConfirmModalValue as ConfirmModalValue_alias_1 }
+
 declare function createNavTriggerProps(values: NavTriggerAriaValues): NavTriggerAriaReturn;
 export { createNavTriggerProps }
 export { createNavTriggerProps as createNavTriggerProps_alias_1 }
@@ -75,14 +116,67 @@ export { DefaultThemes }
 export { DefaultThemes as DefaultThemes_alias_1 }
 
 export declare interface DefinedIcons {
+    confirmModal?: CarbonIconType | ElementType;
     invalid: CarbonIconType | ElementType;
-    toggleChecked: CarbonIconType | ElementType;
+    toggleChecked?: CarbonIconType | ElementType;
 }
 
-declare function defineIcons(icons: DefinedIcons): DefinedIcons;
+declare function defineIcons(icons: DefinedIcons): Required<DefinedIcons>;
 export { defineIcons }
 export { defineIcons as defineIcons_alias_1 }
 
+declare function FeatureFlag(props: PropsWithChildren<FeatureFlagProps>): JSX_2.Element;
+export { FeatureFlag }
+export { FeatureFlag as FeatureFlag_alias_1 }
+
+declare interface FeatureFlagProps {
+    flag: string;
+}
+export { FeatureFlagProps }
+export { FeatureFlagProps as FeatureFlagProps_alias_1 }
+
+declare interface FeatureFlagProviderProps {
+    flags: FeatureFlagValue;
+}
+export { FeatureFlagProviderProps }
+export { FeatureFlagProviderProps as FeatureFlagProviderProps_alias_1 }
+
+/**
+ * Provides feature flags to the application.
+ * @param flags - The flags data for the provider.
+ * @example
+ * ```tsx
+ * // This should be a JSON file or a server response.
+ * const flags = {
+ *  featureOne: true,
+ *  featureTwo: false
+ * }
+ *
+ * // Wrap the Provider around the root of your application.
+ * <FeatureFlags flags={flags}>
+ *    <FeatureFlag flag="featureOne">
+ *      This is visible.
+ *    </FeatureFlag>
+ *   <FeatureFlag flag="featureTwo">
+ *     This is hidden.
+ *   </FeatureFlag>
+ * </FeatureFlags>
+ * ```
+ */
+declare function FeatureFlags(props: PropsWithChildren<FeatureFlagProviderProps>): JSX_2.Element;
+export { FeatureFlags }
+export { FeatureFlags as FeatureFlags_alias_1 }
+
+/**
+ * This module provides a context and hook for feature flags.
+ * @module
+ */
+declare interface FeatureFlagValue {
+    [key: string]: boolean;
+}
+export { FeatureFlagValue }
+export { FeatureFlagValue as FeatureFlagValue_alias_1 }
+
 declare function Field(props: PropsWithChildren<FieldContextValue>): JSX.Element;
 export { Field }
 export { Field as Field_alias_1 }
@@ -318,6 +412,26 @@ declare type NavTriggerRef = RefObject<HTMLButtonElement>;
 export { NavTriggerRef }
 export { NavTriggerRef as NavTriggerRef_alias_1 }
 
+/**
+ * The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
+ * @param container - The props for the Portal component.
+ * @returns ReactPortal
+ */
+declare function Portal(props: PropsWithChildren<PortalProps>): ReactPortal;
+export { Portal }
+export { Portal as Portal_alias_1 }
+
+/**
+ * This module is the Portal component.
+ * @module
+ */
+declare interface PortalProps {
+    container?: Element | DocumentFragment;
+    key?: null | string;
+}
+export { PortalProps }
+export { PortalProps as PortalProps_alias_1 }
+
 declare type Positions = 'top' | 'right' | 'bottom' | 'left';
 export { Positions }
 export { Positions as Positions_alias_1 }
@@ -354,6 +468,20 @@ declare function Show(props: PropsWithChildren<ShowProps>): ReactNode;
 export { Show }
 export { Show as Show_alias_1 }
 
+/**
+ * This module provides a context and hook for the confirm modal.
+ * @module
+ */
+declare interface ShowConfirmModalOptions {
+    kind?: 'destructive' | 'non-destructive';
+    heading: string;
+    description?: string;
+    actionText: string;
+    cancelText: string;
+}
+export { ShowConfirmModalOptions }
+export { ShowConfirmModalOptions as ShowConfirmModalOptions_alias_1 }
+
 declare interface ShowProps {
     when: boolean | null | undefined;
     fallback?: ReactNode;
@@ -361,6 +489,10 @@ declare interface ShowProps {
 export { ShowProps }
 export { ShowProps as ShowProps_alias_1 }
 
+declare type ShowResult = ((value: boolean | PromiseLike<boolean>) => void) | null;
+export { ShowResult }
+export { ShowResult as ShowResult_alias_1 }
+
 declare type StaticTagProps = HTMLAttributes<HTMLSpanElement> & TagRecipeProps & {
     onClick?: never;
 };
@@ -587,6 +719,18 @@ declare type ToggleProps = ToggleBase & ToggleVariantProps;
 export { ToggleProps }
 export { ToggleProps as ToggleProps_alias_1 }
 
+declare function trapFocus(modalRef: RefObject<HTMLDialogElement>): KeyboardEventHandler<HTMLDialogElement>;
+export { trapFocus }
+export { trapFocus as trapFocus_alias_1 }
+
+declare function useConfirmModal(): ConfirmModalValue;
+export { useConfirmModal }
+export { useConfirmModal as useConfirmModal_alias_1 }
+
+declare function useFeatureFlags(key: string): boolean;
+export { useFeatureFlags }
+export { useFeatureFlags as useFeatureFlags_alias_1 }
+
 declare function useFieldContext(): FieldContextValue;
 export { useFieldContext }
 export { useFieldContext as useFieldContext_alias_1 }