@arc-ui/components 11.15.0 → 11.17.0

package/dist/types/components/TextArea/TextArea.d.ts

@@ -59,5 +59,9 @@ export interface TextAreaProps extends Omit<FormControlProps, "children" | "elem
      * `onChange` callback function. Otherwise, use `defaultValue` (or `isReadOnly`).
      */
     value?: string;
+    /**
+     * Sets the width of the TextArea.
+     */
+    width?: string;
 }
 export {};

package/dist/types/components/TextInput/TextInput.d.ts

@@ -1,10 +1,11 @@
-import React, { FC } from "react";
+import React from "react";
 import { FormControlProps } from "../FormControl/FormControl";
+import { ArcIcon } from "../../types/arc-icon";
 type EventType = React.ChangeEvent<HTMLInputElement>;
 /**
  * Use `TextInput` to allow custom user text entry with a keyboard.
  */
-export declare const TextInput: FC<TextInputProps>;
+export declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
 export interface TextInputProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "helperUnderLabel" | "supplementaryInfo"> {
     /**
      * Uncontrolled default value of the TextInput. If the TextInput is controlled
@@ -48,7 +49,7 @@ export interface TextInputProps extends Omit<FormControlProps, "children" | "ele
     /**
      * Function to call when the TextInput loses focus.
      */
-    onBlur?: (e: EventType) => void;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement, Element>) => void;
     /**
      * Callback function commonly used to update the TextInput's controlled
      * `value`, for example `e => setValue(e.target.value)`.
@@ -63,9 +64,20 @@ export interface TextInputProps extends Omit<FormControlProps, "children" | "ele
      */
     inputSize?: "s" | "m" | "l";
     /**
-     * Enable button to toggle TextInput type from `Selected Type` to `Text`
+     * Determine the alignment of the text within the input
+     */
+    inputAlignment?: "left" | "right";
+    /**
+     * Enable button to toggle TextInput type from `Selected Type` to `Text`. This will override any `suffix` elements
      */
     showPassword?: boolean;
+    /**
+     * Add a prefixed value within `TextInput`
+     */
+    prefix?: string;
+    /**
+     * Add a suffixed value within `TextInput`. If `showPassword` is true, suffix will not be displayed   */
+    suffix?: string;
     /**
      * Type for the input. `number` will be changed to `text` and set the `numeric` inputMode.
      */
@@ -75,5 +87,23 @@ export interface TextInputProps extends Omit<FormControlProps, "children" | "ele
      * `onChange` callback function. Otherwise, use `defaultValue` (or `isReadOnly`).
      */
     value?: string;
+    /**
+     * Placeholder for the input
+     */
+    placeholder?: string;
+    /**
+     * Icon button to show at the end of the input
+     */
+    iconButton?: {
+        ref?: React.Ref<HTMLButtonElement>;
+        onFocus?: React.FocusEventHandler<HTMLButtonElement>;
+        onClick: () => void;
+        label: string;
+        icon: ArcIcon;
+    };
+    /**
+     * Sets the width of the TextInput.
+     */
+    width?: string;
 }
 export {};

package/dist/types/components/TypographyCard/TypographyCard.d.ts

@@ -0,0 +1,48 @@
+import React, { FC } from "react";
+import { HeadingLevel } from "../Heading/Heading";
+export declare const TypographyCard: FC<TypographyCardProps>;
+type TypographyCardIcon = "play" | "arrow";
+type TypographyCardPathway = "light" | "dark";
+export interface TypographyCardProps {
+    /**
+     * Heading for the TypographyCard.
+     */
+    heading: string;
+    /**
+     * Url for the TypographyCard.
+     */
+    url: string;
+    /**
+     * Sets a dark or light background for the TypographyCard.
+     */
+    pathway?: TypographyCardPathway;
+    /**
+     * Icon for the TypographyCard Cta button.
+     */
+    buttonIcon?: TypographyCardIcon;
+    /**
+     * Heading level for the TypographyCard heading.
+     */
+    headingLevel?: HeadingLevel;
+    /**
+     * Uppercase label for the TypographyCard.
+     */
+    label?: string;
+    /**
+     * Click handler for the TypographyCard.
+     */
+    onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
+    /**
+     *
+     * Text to show adjacent to the cta
+     */
+    metaText?: string;
+    /**
+     * Object of `data-` attributes to render on internal anchor element, e.g.
+     * `{ data-analytics-link: "My link"}` => `<a data-analytics-link="My link">`.
+     */
+    linkData?: {
+        [key: string]: string;
+    };
+}
+export {};

package/dist/types/components/TypographyCard/index.d.ts

@@ -0,0 +1 @@
+export { TypographyCard } from "./TypographyCard";

package/dist/types/components/index.d.ts

@@ -36,6 +36,7 @@ export { Section } from "./Section";
 export { Select } from "./Select";
 export { SiteFooter, SiteFooterRehydrator } from "./SiteFooter";
 export { SiteHeader, SiteHeaderRehydrator } from "./SiteHeader";
+export { SiteHeaderV2 } from "./SiteHeaderV2";
 export { Surface, SurfaceContext } from "./Surface";
 export { Switch } from "./Switch";
 export { Tabs } from "./Tabs";
@@ -45,6 +46,7 @@ export { TextArea } from "./TextArea";
 export { TextInput } from "./TextInput";
 export { Toast } from "./Toast";
 export { Truncate } from "./Truncate";
+export { TypographyCard } from "./TypographyCard";
 export { UniversalHeader } from "./UniversalHeader";
 export { VerticalSpace } from "./VerticalSpace";
 export { VisuallyHidden } from "./VisuallyHidden";

package/dist/types/private-components/CardFooter/CardFooter.d.ts

@@ -0,0 +1,11 @@
+import { FC } from "react";
+export declare const CardFooter: FC<CardFooterProps>;
+type CardFooterIcon = "play" | "arrow";
+export interface CardFooterProps {
+    metaText?: string;
+    isDarkPathway?: boolean;
+    buttonIcon?: CardFooterIcon;
+    showFilledIcon?: boolean;
+    showButton?: boolean;
+}
+export {};

package/dist/types/private-components/CardFooter/index.d.ts

@@ -0,0 +1 @@
+export { CardFooter } from "./CardFooter";

package/dist/types/private-components/CardHeading/CardHeading.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { HeadingLevel } from "../../components/Heading/Heading";
+export declare const CardHeading: React.FC<CardHeadingProps>;
+interface CardHeadingProps {
+    heading: string;
+    size?: "s" | "m";
+    isDarkPathway?: boolean;
+    href?: string;
+    headingLevel?: HeadingLevel;
+    onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    linkData?: {
+        [key: string]: string;
+    };
+}
+export {};

package/dist/types/private-components/CardHeading/index.d.ts

@@ -0,0 +1 @@
+export { CardHeading } from "./CardHeading";

package/dist/types/private-components/CardLabel/CardLabel.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export declare const CardLabel: React.FC<CardLabelProps>;
+interface CardLabelProps {
+    text: string;
+    isDarkPathway?: boolean;
+    color?: "supporting" | "muted";
+    isBold?: boolean;
+    withSpacing?: boolean;
+}
+export {};

package/dist/types/private-components/CardLabel/index.d.ts

@@ -0,0 +1 @@
+export { CardLabel } from "./CardLabel";

package/dist/types/private-components/ConditionalWrapper/ConditionalWrapper.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export declare const ConditionalWrapper: React.FC<{
+    condition: boolean;
+    wrapper: (children: React.ReactNode) => React.ReactNode;
+    children: React.ReactNode;
+}>;

package/dist/types/private-components/ConditionalWrapper/index.d.ts

@@ -0,0 +1 @@
+export { ConditionalWrapper } from "./ConditionalWrapper";

package/dist/types/private-components/index.d.ts

@@ -0,0 +1,4 @@
+export { CardHeading } from "./CardHeading";
+export { CardLabel } from "./CardLabel";
+export { CardFooter } from "./CardFooter";
+export { ConditionalWrapper } from "./ConditionalWrapper";

package/dist/types/styles.d.ts

@@ -2,10 +2,10 @@ import "./components/Alert/Alert.css";
 import "./components/Align/Align.css";
 import "./components/Badge/Badge.css";
 import "./components/Base/Base.css";
+import "./components/Box/Box.css";
 import "./components/BrandLogo/BrandLogo.css";
 import "./components/Breadcrumbs/Breadcrumbs.css";
 import "./components/Card/Card.css";
-import "./components/Box/Box.css";
 import "./components/Button/Button.css";
 import "./components/Checkbox/Checkbox.css";
 import "./components/Clock/Clock.css";
@@ -34,6 +34,7 @@ import "./components/Section/Section.css";
 import "./components/Select/Select.css";
 import "./components/SiteFooter/SiteFooter.css";
 import "./components/SiteHeader/SiteHeader.css";
+import "./components/SiteHeaderV2/SiteHeaderV2.css";
 import "./components/Surface/Surface.css";
 import "./components/Tabs/Tabs.css";
 import "./components/Tag/Tag.css";
@@ -73,4 +74,10 @@ import "./components/UniversalHeader/UniversalHeader.bt.css";
 import "./components/Switch/Switch.bt.css";
 import "./components/Toast/Toast.css";
 import "./components/ProgressStepper/ProgressStepper.css";
+import "./components/Calendar/Calendar.css";
+import "./components/DatePicker/DatePicker.css";
 import "./components/InformationCard/InformationCard.css";
+import "./components/TypographyCard/TypographyCard.css";
+import "./private-components/CardHeading/CardHeading.css";
+import "./private-components/CardLabel/CardLabel.css";
+import "./private-components/CardFooter/CardFooter.css";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arc-ui/components",
-  "version": "11.15.0",
+  "version": "11.17.0",
   "homepage": "https://ui.digital-ent-int.bt.com",
   "author": "BT Enterprise Digital UI Team <ui-digital-ent-int@bt.com>",
   "main": "./dist/index.js",
@@ -26,12 +26,14 @@
   },
   "dependencies": {
     "@geometricpanda/storybook-addon-badges": "^2.0.0",
-    "@radix-ui/react-dialog": "1.0.4",
+    "@radix-ui/react-dialog": "1.0.5",
     "@radix-ui/react-label": "2.0.0",
-    "@radix-ui/react-select": "1.1.2",
+    "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-select": "2.0.0",
     "@radix-ui/react-switch": "1.0.1",
     "@radix-ui/react-tabs": "1.0.4",
     "@radix-ui/react-toast": "1.1.4",
+    "date-fns": "^2.30.0",
     "storybook": "^7.4.5"
   },
   "devDependencies": {

package/dist/_shared/cjs/TextInput-bf1fe052.js

@@ -1,81 +0,0 @@
-'use strict';
-
-var filterDataAttrs = require('./filter-data-attrs-1c9a530c.js');
-var index = require('./index-9947ac13.js');
-var React = require('react');
-var FormControl = require('./FormControl-7daf8110.js');
-var Surface = require('./Surface-038db6e1.js');
-var VisuallyHidden = require('./VisuallyHidden-e2c8b291.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-/**
- * Infer the correct inputMode, pattern and type if specifying a `number` type.
- */
-var useNumericInput = function (props) {
-    var type = props.type === "number" ? "text" : props.type;
-    var inputMode = props.inputMode;
-    if (!props.inputMode) {
-        if (props.type === "email") {
-            inputMode = "email";
-        }
-        else if (props.type === "number") {
-            inputMode = "numeric";
-        }
-        else if (props.type === "tel") {
-            inputMode = "tel";
-        }
-        else if (props.type === "url") {
-            inputMode = "url";
-        }
-    }
-    var pattern = props.pattern;
-    if (!props.pattern && props.type === "number") {
-        pattern = "[0-9]*";
-    }
-    return { inputMode: inputMode, pattern: pattern, type: type };
-};
-
-/**
- * Use `TextInput` to allow custom user text entry with a keyboard.
- */
-var TextInput = React.forwardRef(function (_a, ref) {
-    var _b;
-    var _c = _a.defaultValue, defaultValue = _c === void 0 ? "" : _c, errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, inputMode = _a.inputMode, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isReadOnly, isReadOnly = _e === void 0 ? false : _e, _f = _a.isRequired, isRequired = _f === void 0 ? false : _f, label = _a.label, _g = _a.labelSize, labelSize = _g === void 0 ? "l" : _g, maxLength = _a.maxLength, minLength = _a.minLength, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onClickDisclosure = _a.onClickDisclosure, pattern = _a.pattern, _h = _a.type, type = _h === void 0 ? "text" : _h, _j = _a.showPassword, showPassword = _j === void 0 ? false : _j, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, _k = _a.inputSize, inputSize = _k === void 0 ? "m" : _k, props = filterDataAttrs.__rest(_a, ["defaultValue", "errorMessage", "helper", "id", "inputMode", "isDisabled", "isReadOnly", "isRequired", "label", "labelSize", "maxLength", "minLength", "name", "onBlur", "onChange", "onClickDisclosure", "pattern", "type", "showPassword", "value", "disclosureTitle", "disclosureText", "inputSize"]);
-    var surface = React.useContext(Surface.Context).surface;
-    var _l = React.useState(false), showPasswordToggle = _l[0], setShowPasswordToggle = _l[1];
-    var inferredInputProps = useNumericInput({
-        inputMode: inputMode,
-        pattern: pattern,
-        type: showPasswordToggle ? "text" : type
-    });
-    // Although this is used within FormControlWrapper, it's deterministic so we can call it here too
-    var ariaDescribedby = FormControl.useAriaDescribedby({
-        errorMessage: errorMessage,
-        id: id,
-        helper: helper,
-        disclosureText: disclosureText
-    }).ariaDescribedby;
-    return (React__default["default"].createElement("div", filterDataAttrs.__assign({ className: index.classNames((_b = {
-                "arc-TextInput": true,
-                "arc-TextInput--withPasswordToggle": showPassword,
-                "arc-TextInput--invalid": errorMessage,
-                "arc-TextInput--onDarkSurface": surface === "dark"
-            },
-            _b["arc-TextInput--size".concat(inputSize && inputSize.toUpperCase())] = inputSize && inputSize !== "m",
-            _b)) }, filterDataAttrs.filterDataAttrs(props)),
-        React__default["default"].createElement(FormControl.FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, isDisabled: isDisabled, label: label, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional", disclosureTitle: disclosureTitle, disclosureText: disclosureText, onClickDisclosure: onClickDisclosure },
-            React__default["default"].createElement("div", { className: "arc-TextInput-inputWrapper" },
-                React__default["default"].createElement("input", filterDataAttrs.__assign({ "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", className: "arc-TextInput-input", defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, id: id, maxLength: maxLength, minLength: minLength, name: name, onChange: onChange, onBlur: onBlur, readOnly: isReadOnly, ref: ref, required: isRequired, value: typeof value !== "undefined" ? value : undefined }, inferredInputProps)),
-                showPassword && (React__default["default"].createElement(React__default["default"].Fragment, null,
-                    React__default["default"].createElement("button", { className: "arc-TextInput-passwordToggle", onClick: function () { return setShowPasswordToggle(function (p) { return !p; }); }, type: "button" }, showPasswordToggle ? "Hide" : "Show"),
-                    React__default["default"].createElement(VisuallyHidden.VisuallyHidden, null,
-                        React__default["default"].createElement("div", { "aria-live": "polite" },
-                            React__default["default"].createElement("p", null, showPasswordToggle
-                                ? "Your password is shown"
-                                : "Your password is hidden")))))))));
-});
-
-exports.TextInput = TextInput;

package/dist/_shared/cjs/index-6b2a9ac3.js

@@ -1,289 +0,0 @@
-'use strict';
-
-var _extends = require('./extends-8c5e4b48.js');
-var React = require('react');
-var index = require('./index-c575a255.js');
-var $7SXl2$reactdom = require('react-dom');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var $7SXl2$reactdom__default = /*#__PURE__*/_interopDefaultLegacy($7SXl2$reactdom);
-
-/**
- * Listens for when the escape key is down
- */ function $addc16e1bbe58fd0$export$3a72a57244d6e765(onEscapeKeyDownProp, ownerDocument = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) {
-    const onEscapeKeyDown = index.$b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onEscapeKeyDownProp);
-    React.useEffect(()=>{
-        const handleKeyDown = (event)=>{
-            if (event.key === 'Escape') onEscapeKeyDown(event);
-        };
-        ownerDocument.addEventListener('keydown', handleKeyDown);
-        return ()=>ownerDocument.removeEventListener('keydown', handleKeyDown)
-        ;
-    }, [
-        onEscapeKeyDown,
-        ownerDocument
-    ]);
-}
-
-const $5cb92bef7577960e$var$CONTEXT_UPDATE = 'dismissableLayer.update';
-const $5cb92bef7577960e$var$POINTER_DOWN_OUTSIDE = 'dismissableLayer.pointerDownOutside';
-const $5cb92bef7577960e$var$FOCUS_OUTSIDE = 'dismissableLayer.focusOutside';
-let $5cb92bef7577960e$var$originalBodyPointerEvents;
-const $5cb92bef7577960e$var$DismissableLayerContext = /*#__PURE__*/ React.createContext({
-    layers: new Set(),
-    layersWithOutsidePointerEventsDisabled: new Set(),
-    branches: new Set()
-});
-const $5cb92bef7577960e$export$177fb62ff3ec1f22 = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
-    var _node$ownerDocument;
-    const { disableOutsidePointerEvents: disableOutsidePointerEvents = false , onEscapeKeyDown: onEscapeKeyDown , onPointerDownOutside: onPointerDownOutside , onFocusOutside: onFocusOutside , onInteractOutside: onInteractOutside , onDismiss: onDismiss , ...layerProps } = props;
-    const context = React.useContext($5cb92bef7577960e$var$DismissableLayerContext);
-    const [node1, setNode] = React.useState(null);
-    const ownerDocument = (_node$ownerDocument = node1 === null || node1 === void 0 ? void 0 : node1.ownerDocument) !== null && _node$ownerDocument !== void 0 ? _node$ownerDocument : globalThis === null || globalThis === void 0 ? void 0 : globalThis.document;
-    const [, force] = React.useState({});
-    const composedRefs = index.$6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, (node)=>setNode(node)
-    );
-    const layers = Array.from(context.layers);
-    const [highestLayerWithOutsidePointerEventsDisabled] = [
-        ...context.layersWithOutsidePointerEventsDisabled
-    ].slice(-1); // prettier-ignore
-    const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(highestLayerWithOutsidePointerEventsDisabled); // prettier-ignore
-    const index$1 = node1 ? layers.indexOf(node1) : -1;
-    const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0;
-    const isPointerEventsEnabled = index$1 >= highestLayerWithOutsidePointerEventsDisabledIndex;
-    const pointerDownOutside = $5cb92bef7577960e$var$usePointerDownOutside((event)=>{
-        const target = event.target;
-        const isPointerDownOnBranch = [
-            ...context.branches
-        ].some((branch)=>branch.contains(target)
-        );
-        if (!isPointerEventsEnabled || isPointerDownOnBranch) return;
-        onPointerDownOutside === null || onPointerDownOutside === void 0 || onPointerDownOutside(event);
-        onInteractOutside === null || onInteractOutside === void 0 || onInteractOutside(event);
-        if (!event.defaultPrevented) onDismiss === null || onDismiss === void 0 || onDismiss();
-    }, ownerDocument);
-    const focusOutside = $5cb92bef7577960e$var$useFocusOutside((event)=>{
-        const target = event.target;
-        const isFocusInBranch = [
-            ...context.branches
-        ].some((branch)=>branch.contains(target)
-        );
-        if (isFocusInBranch) return;
-        onFocusOutside === null || onFocusOutside === void 0 || onFocusOutside(event);
-        onInteractOutside === null || onInteractOutside === void 0 || onInteractOutside(event);
-        if (!event.defaultPrevented) onDismiss === null || onDismiss === void 0 || onDismiss();
-    }, ownerDocument);
-    $addc16e1bbe58fd0$export$3a72a57244d6e765((event)=>{
-        const isHighestLayer = index$1 === context.layers.size - 1;
-        if (!isHighestLayer) return;
-        onEscapeKeyDown === null || onEscapeKeyDown === void 0 || onEscapeKeyDown(event);
-        if (!event.defaultPrevented && onDismiss) {
-            event.preventDefault();
-            onDismiss();
-        }
-    }, ownerDocument);
-    React.useEffect(()=>{
-        if (!node1) return;
-        if (disableOutsidePointerEvents) {
-            if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
-                $5cb92bef7577960e$var$originalBodyPointerEvents = ownerDocument.body.style.pointerEvents;
-                ownerDocument.body.style.pointerEvents = 'none';
-            }
-            context.layersWithOutsidePointerEventsDisabled.add(node1);
-        }
-        context.layers.add(node1);
-        $5cb92bef7577960e$var$dispatchUpdate();
-        return ()=>{
-            if (disableOutsidePointerEvents && context.layersWithOutsidePointerEventsDisabled.size === 1) ownerDocument.body.style.pointerEvents = $5cb92bef7577960e$var$originalBodyPointerEvents;
-        };
-    }, [
-        node1,
-        ownerDocument,
-        disableOutsidePointerEvents,
-        context
-    ]);
-    /**
-   * We purposefully prevent combining this effect with the `disableOutsidePointerEvents` effect
-   * because a change to `disableOutsidePointerEvents` would remove this layer from the stack
-   * and add it to the end again so the layering order wouldn't be _creation order_.
-   * We only want them to be removed from context stacks when unmounted.
-   */ React.useEffect(()=>{
-        return ()=>{
-            if (!node1) return;
-            context.layers.delete(node1);
-            context.layersWithOutsidePointerEventsDisabled.delete(node1);
-            $5cb92bef7577960e$var$dispatchUpdate();
-        };
-    }, [
-        node1,
-        context
-    ]);
-    React.useEffect(()=>{
-        const handleUpdate = ()=>force({})
-        ;
-        document.addEventListener($5cb92bef7577960e$var$CONTEXT_UPDATE, handleUpdate);
-        return ()=>document.removeEventListener($5cb92bef7577960e$var$CONTEXT_UPDATE, handleUpdate)
-        ;
-    }, []);
-    return /*#__PURE__*/ React.createElement(index.$8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends._extends({}, layerProps, {
-        ref: composedRefs,
-        style: {
-            pointerEvents: isBodyPointerEventsDisabled ? isPointerEventsEnabled ? 'auto' : 'none' : undefined,
-            ...props.style
-        },
-        onFocusCapture: index.$e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onFocusCapture, focusOutside.onFocusCapture),
-        onBlurCapture: index.$e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onBlurCapture, focusOutside.onBlurCapture),
-        onPointerDownCapture: index.$e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onPointerDownCapture, pointerDownOutside.onPointerDownCapture)
-    }));
-});
-const $5cb92bef7577960e$export$4d5eb2109db14228 = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
-    const context = React.useContext($5cb92bef7577960e$var$DismissableLayerContext);
-    const ref = React.useRef(null);
-    const composedRefs = index.$6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, ref);
-    React.useEffect(()=>{
-        const node = ref.current;
-        if (node) {
-            context.branches.add(node);
-            return ()=>{
-                context.branches.delete(node);
-            };
-        }
-    }, [
-        context.branches
-    ]);
-    return /*#__PURE__*/ React.createElement(index.$8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends._extends({}, props, {
-        ref: composedRefs
-    }));
-});
-/* -----------------------------------------------------------------------------------------------*/ /**
- * Listens for `pointerdown` outside a react subtree. We use `pointerdown` rather than `pointerup`
- * to mimic layer dismissing behaviour present in OS.
- * Returns props to pass to the node we want to check for outside events.
- */ function $5cb92bef7577960e$var$usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) {
-    const handlePointerDownOutside = index.$b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onPointerDownOutside);
-    const isPointerInsideReactTreeRef = React.useRef(false);
-    const handleClickRef = React.useRef(()=>{});
-    React.useEffect(()=>{
-        const handlePointerDown = (event)=>{
-            if (event.target && !isPointerInsideReactTreeRef.current) {
-                const eventDetail = {
-                    originalEvent: event
-                };
-                function handleAndDispatchPointerDownOutsideEvent() {
-                    $5cb92bef7577960e$var$handleAndDispatchCustomEvent($5cb92bef7577960e$var$POINTER_DOWN_OUTSIDE, handlePointerDownOutside, eventDetail, {
-                        discrete: true
-                    });
-                }
-                /**
-         * On touch devices, we need to wait for a click event because browsers implement
-         * a ~350ms delay between the time the user stops touching the display and when the
-         * browser executres events. We need to ensure we don't reactivate pointer-events within
-         * this timeframe otherwise the browser may execute events that should have been prevented.
-         *
-         * Additionally, this also lets us deal automatically with cancellations when a click event
-         * isn't raised because the page was considered scrolled/drag-scrolled, long-pressed, etc.
-         *
-         * This is why we also continuously remove the previous listener, because we cannot be
-         * certain that it was raised, and therefore cleaned-up.
-         */ if (event.pointerType === 'touch') {
-                    ownerDocument.removeEventListener('click', handleClickRef.current);
-                    handleClickRef.current = handleAndDispatchPointerDownOutsideEvent;
-                    ownerDocument.addEventListener('click', handleClickRef.current, {
-                        once: true
-                    });
-                } else handleAndDispatchPointerDownOutsideEvent();
-            }
-            isPointerInsideReactTreeRef.current = false;
-        };
-        /**
-     * if this hook executes in a component that mounts via a `pointerdown` event, the event
-     * would bubble up to the document and trigger a `pointerDownOutside` event. We avoid
-     * this by delaying the event listener registration on the document.
-     * This is not React specific, but rather how the DOM works, ie:
-     * ```
-     * button.addEventListener('pointerdown', () => {
-     *   console.log('I will log');
-     *   document.addEventListener('pointerdown', () => {
-     *     console.log('I will also log');
-     *   })
-     * });
-     */ const timerId = window.setTimeout(()=>{
-            ownerDocument.addEventListener('pointerdown', handlePointerDown);
-        }, 0);
-        return ()=>{
-            window.clearTimeout(timerId);
-            ownerDocument.removeEventListener('pointerdown', handlePointerDown);
-            ownerDocument.removeEventListener('click', handleClickRef.current);
-        };
-    }, [
-        ownerDocument,
-        handlePointerDownOutside
-    ]);
-    return {
-        // ensures we check React component tree (not just DOM tree)
-        onPointerDownCapture: ()=>isPointerInsideReactTreeRef.current = true
-    };
-}
-/**
- * Listens for when focus happens outside a react subtree.
- * Returns props to pass to the root (node) of the subtree we want to check.
- */ function $5cb92bef7577960e$var$useFocusOutside(onFocusOutside, ownerDocument = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) {
-    const handleFocusOutside = index.$b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onFocusOutside);
-    const isFocusInsideReactTreeRef = React.useRef(false);
-    React.useEffect(()=>{
-        const handleFocus = (event)=>{
-            if (event.target && !isFocusInsideReactTreeRef.current) {
-                const eventDetail = {
-                    originalEvent: event
-                };
-                $5cb92bef7577960e$var$handleAndDispatchCustomEvent($5cb92bef7577960e$var$FOCUS_OUTSIDE, handleFocusOutside, eventDetail, {
-                    discrete: false
-                });
-            }
-        };
-        ownerDocument.addEventListener('focusin', handleFocus);
-        return ()=>ownerDocument.removeEventListener('focusin', handleFocus)
-        ;
-    }, [
-        ownerDocument,
-        handleFocusOutside
-    ]);
-    return {
-        onFocusCapture: ()=>isFocusInsideReactTreeRef.current = true
-        ,
-        onBlurCapture: ()=>isFocusInsideReactTreeRef.current = false
-    };
-}
-function $5cb92bef7577960e$var$dispatchUpdate() {
-    const event = new CustomEvent($5cb92bef7577960e$var$CONTEXT_UPDATE);
-    document.dispatchEvent(event);
-}
-function $5cb92bef7577960e$var$handleAndDispatchCustomEvent(name, handler, detail, { discrete: discrete  }) {
-    const target = detail.originalEvent.target;
-    const event = new CustomEvent(name, {
-        bubbles: false,
-        cancelable: true,
-        detail: detail
-    });
-    if (handler) target.addEventListener(name, handler, {
-        once: true
-    });
-    if (discrete) index.$8927f6f2acc4f386$export$6d1a0317bde7de7f(target, event);
-    else target.dispatchEvent(event);
-}
-const $5cb92bef7577960e$export$be92b6f5f03c0fe9 = $5cb92bef7577960e$export$177fb62ff3ec1f22;
-const $5cb92bef7577960e$export$aecb2ddcb55c95be = $5cb92bef7577960e$export$4d5eb2109db14228;
-
-const $f1701beae083dbae$export$602eac185826482c = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
-    var _globalThis$document;
-    const { container: container = globalThis === null || globalThis === void 0 ? void 0 : (_globalThis$document = globalThis.document) === null || _globalThis$document === void 0 ? void 0 : _globalThis$document.body , ...portalProps } = props;
-    return container ? /*#__PURE__*/ $7SXl2$reactdom__default["default"].createPortal(/*#__PURE__*/ React.createElement(index.$8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends._extends({}, portalProps, {
-        ref: forwardedRef
-    })), container) : null;
-});
-
-exports.$5cb92bef7577960e$export$177fb62ff3ec1f22 = $5cb92bef7577960e$export$177fb62ff3ec1f22;
-exports.$5cb92bef7577960e$export$aecb2ddcb55c95be = $5cb92bef7577960e$export$aecb2ddcb55c95be;
-exports.$5cb92bef7577960e$export$be92b6f5f03c0fe9 = $5cb92bef7577960e$export$be92b6f5f03c0fe9;
-exports.$f1701beae083dbae$export$602eac185826482c = $f1701beae083dbae$export$602eac185826482c;