@easypost/easy-ui 1.0.0-alpha.111 → 1.0.0-alpha.113

package/CodeBlock/index.js

@@ -1,5 +1,7 @@
 "use strict";
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -15,21 +17,23 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../__chunks__/jsx-runtime-CH1d66I3.js");
 const React = require("react");
-const CodeSnippet = require("../__chunks__/CodeSnippet-CIijbclb.js");
-const HorizontalStack = require("../__chunks__/HorizontalStack-CXpjASZi.js");
+const CodeSnippet = require("../__chunks__/CodeSnippet-BCOMwE07.js");
+const HorizontalStack = require("../__chunks__/HorizontalStack-DidoI4Ks.js");
 const utilities_css = require("../utilities/css.js");
 const utilities_react = require("../utilities/react.js");
-const Icon = require("../__chunks__/Icon-W8F9w-jS.js");
-const Text = require("../__chunks__/Text-CSESKR_s.js");
-const Tooltip = require("../__chunks__/Tooltip-DqpxBjpa.js");
+const Icon = require("../__chunks__/Icon-BVa5ddiD.js");
+const Text = require("../__chunks__/Text-C4CEsglh.js");
+const Tooltip = require("../__chunks__/Tooltip-COjtKErw.js");
 const useHover = require("../__chunks__/useHover-Ck1otl-j.js");
 const useFocus = require("../__chunks__/useFocus-D_NKNXdi.js");
 const mergeProps = require("../__chunks__/mergeProps-DLPcevok.js");
 const ExpandMore400 = require("../__chunks__/ExpandMore400-CJpvxyJm.js");
-const Menu = require("../__chunks__/Menu-Kfc6nxFP.js");
-const UnstyledButton = require("../__chunks__/UnstyledButton-BFpQ2Irc.js");
+const Menu = require("../__chunks__/Menu-Du8SsMeJ.js");
+const UnstyledButton = require("../__chunks__/UnstyledButton-_YQekhlm.js");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -232,18 +236,21 @@ function CopyButton({ text }) {
     tooltipState.close();
   }, [clipboard, text, tooltipState]);
   const content = clipboard.copied ? "Copied!" : "Copy code block";
-  return React.createElement(Tooltip.Tooltip, {
-    key: content,
+  return jsxRuntime.jsxRuntimeExports.jsx(Tooltip.Tooltip, {
     isOpen: tooltipState.isOpen || clipboard.copied,
-    content
-  }, React.createElement("button", __spreadValues({
-    className: styles$1.CopyButton,
-    onClick: handlePress
-  }, triggerProps), React.createElement(Text.Text, {
-    visuallyHidden: true
-  }, "Copy code"), React.createElement(Icon.Icon, {
-    symbol: ContentCopy
-  })));
+    content,
+    children: jsxRuntime.jsxRuntimeExports.jsxs("button", __spreadProps(__spreadValues({
+      className: styles$1.CopyButton,
+      onClick: handlePress
+    }, triggerProps), {
+      children: [jsxRuntime.jsxRuntimeExports.jsx(Text.Text, {
+        visuallyHidden: true,
+        children: "Copy code"
+      }), jsxRuntime.jsxRuntimeExports.jsx(Icon.Icon, {
+        symbol: ContentCopy
+      })]
+    }))
+  }, content);
 }
 CopyButton.displayName = "CopyButton";
 function useCopyButtonTooltipState() {
@@ -269,20 +276,29 @@ function LanguageMenu(props) {
     const language2 = key;
     onChange(language2);
   }, [onChange]);
-  return React.createElement(Menu.Menu, null, React.createElement(Menu.Menu.Trigger, null, React.createElement(UnstyledButton.UnstyledButton, null, React.createElement(HorizontalStack.HorizontalStack, {
-    blockAlign: "center",
-    gap: "1",
-    wrap: false
-  }, React.createElement(Text.Text, {
-    variant: "body1"
-  }, CodeSnippet.friendlySnippetLanguageNames[language]), React.createElement(Icon.Icon, {
-    symbol: ExpandMore400.ExpandMore400
-  })))), React.createElement(Menu.Menu.Overlay, {
-    maxItemsUntilScroll: Infinity,
-    onAction: handleMenuAction
-  }, languages.map((language2) => React.createElement(Menu.Menu.Item, {
-    key: language2
-  }, CodeSnippet.friendlySnippetLanguageNames[language2]))));
+  return jsxRuntime.jsxRuntimeExports.jsxs(Menu.Menu, {
+    children: [jsxRuntime.jsxRuntimeExports.jsx(Menu.Menu.Trigger, {
+      children: jsxRuntime.jsxRuntimeExports.jsx(UnstyledButton.UnstyledButton, {
+        children: jsxRuntime.jsxRuntimeExports.jsxs(HorizontalStack.HorizontalStack, {
+          blockAlign: "center",
+          gap: "1",
+          wrap: false,
+          children: [jsxRuntime.jsxRuntimeExports.jsx(Text.Text, {
+            variant: "body1",
+            children: CodeSnippet.friendlySnippetLanguageNames[language]
+          }), jsxRuntime.jsxRuntimeExports.jsx(Icon.Icon, {
+            symbol: ExpandMore400.ExpandMore400
+          })]
+        })
+      })
+    }), jsxRuntime.jsxRuntimeExports.jsx(Menu.Menu.Overlay, {
+      maxItemsUntilScroll: Infinity,
+      onAction: handleMenuAction,
+      children: languages.map((language2) => jsxRuntime.jsxRuntimeExports.jsx(Menu.Menu.Item, {
+        children: CodeSnippet.friendlySnippetLanguageNames[language2]
+      }, language2))
+    })]
+  });
 }
 const CodeBlock$1 = "_CodeBlock_w5hab_4";
 const header = "_header_w5hab_12";
@@ -302,31 +318,35 @@ function CodeBlockHeader(props) {
   const { children, color = "neutral", hideCopy = false } = props;
   const { snippet, languages, language, onLanguageChange } = CodeSnippet.useCodeBlock();
   const className = utilities_css.classNames(styles.header, styles[utilities_css.variationName("color", color)]);
-  return React.createElement("div", {
-    className
-  }, React.createElement(HorizontalStack.HorizontalStack, {
-    align: "space-between",
-    gap: "2",
-    wrap: false,
-    blockAlign: "start"
-  }, React.createElement("span", {
-    className: styles.headerTitle
-  }, children), React.createElement(HorizontalStack.HorizontalStack, {
-    gap: "2",
-    wrap: false
-  }, languages.length > 1 && React.createElement(LanguageMenu, {
-    languages,
-    language,
-    onChange: onLanguageChange
-  }), languages.length > 1 && !hideCopy && React.createElement("span", {
-    className: styles.divider
-  }), !hideCopy && React.createElement(CopyButton, {
-    text: snippet.props.code
-  }))));
+  return jsxRuntime.jsxRuntimeExports.jsx("div", {
+    className,
+    children: jsxRuntime.jsxRuntimeExports.jsxs(HorizontalStack.HorizontalStack, {
+      align: "space-between",
+      gap: "2",
+      wrap: false,
+      blockAlign: "start",
+      children: [jsxRuntime.jsxRuntimeExports.jsx("span", {
+        className: styles.headerTitle,
+        children
+      }), jsxRuntime.jsxRuntimeExports.jsxs(HorizontalStack.HorizontalStack, {
+        gap: "2",
+        wrap: false,
+        children: [languages.length > 1 && jsxRuntime.jsxRuntimeExports.jsx(LanguageMenu, {
+          languages,
+          language,
+          onChange: onLanguageChange
+        }), languages.length > 1 && !hideCopy && jsxRuntime.jsxRuntimeExports.jsx("span", {
+          className: styles.divider
+        }), !hideCopy && jsxRuntime.jsxRuntimeExports.jsx(CopyButton, {
+          text: snippet.props.code
+        })]
+      })]
+    })
+  });
 }
 CodeBlockHeader.displayName = "CodeBlock.Header";
 function CodeBlockSnippet(props) {
-  return React.createElement(CodeSnippet.CodeSnippet, __spreadValues({}, props));
+  return jsxRuntime.jsxRuntimeExports.jsx(CodeSnippet.CodeSnippet, __spreadValues({}, props));
 }
 CodeBlockSnippet.displayName = "CodeBlock.Snippet";
 function CodeBlock(props) {
@@ -359,11 +379,13 @@ function CodeBlock(props) {
       onLanguageChange
     };
   }, [languages, snippet, language, onLanguageChange]);
-  return React.createElement(CodeSnippet.CodeBlockContext.Provider, {
-    value: context
-  }, React.createElement("div", {
-    className: styles.CodeBlock
-  }, header2, snippet));
+  return jsxRuntime.jsxRuntimeExports.jsx(CodeSnippet.CodeBlockContext.Provider, {
+    value: context,
+    children: jsxRuntime.jsxRuntimeExports.jsxs("div", {
+      className: styles.CodeBlock,
+      children: [header2, snippet]
+    })
+  });
 }
 CodeBlock.displayName = "CodeBlock";
 CodeBlock.Header = CodeBlockHeader;

package/CodeBlock/index.mjs

@@ -1,4 +1,6 @@
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -14,21 +16,23 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { j as jsxRuntimeExports } from "../__chunks__/jsx-runtime-DTpFD6nx.mjs";
 import * as React from "react";
 import React__default, { useCallback, useMemo } from "react";
-import { f as friendlySnippetLanguageNames, a as CodeBlockContext, u as useCodeBlock, C as CodeSnippet } from "../__chunks__/CodeSnippet-QpCpkoXv.mjs";
-import { H as HorizontalStack } from "../__chunks__/HorizontalStack-CxE8tPx_.mjs";
+import { f as friendlySnippetLanguageNames, a as CodeBlockContext, u as useCodeBlock, C as CodeSnippet } from "../__chunks__/CodeSnippet-CWnMHdVu.mjs";
+import { H as HorizontalStack } from "../__chunks__/HorizontalStack-BkE82C73.mjs";
 import { classNames, variationName } from "../utilities/css.mjs";
 import { filterChildrenByDisplayName } from "../utilities/react.mjs";
-import { I as Icon } from "../__chunks__/Icon-0SN9dbwU.mjs";
-import { T as Text } from "../__chunks__/Text-YOL3isF4.mjs";
-import { T as Tooltip, $ as $8796f90736e175cb$export$4d40659c25ecb50b } from "../__chunks__/Tooltip-DAyUY3na.mjs";
+import { I as Icon } from "../__chunks__/Icon-DzTns8u5.mjs";
+import { T as Text } from "../__chunks__/Text-u9mYLeWj.mjs";
+import { T as Tooltip, $ as $8796f90736e175cb$export$4d40659c25ecb50b } from "../__chunks__/Tooltip-BKGkKnOx.mjs";
 import { $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../__chunks__/useHover-FWU5y5-k.mjs";
 import { $ as $a1ea59d68270f0dd$export$f8168d8dd8fd66e6 } from "../__chunks__/useFocus-u61kyYs8.mjs";
 import { $ as $3ef42575df84b30b$export$9d1611c77c2fe928 } from "../__chunks__/mergeProps-COnPag8r.mjs";
 import { E as ExpandMore400 } from "../__chunks__/ExpandMore400-CH7GNxqk.mjs";
-import { M as Menu } from "../__chunks__/Menu-DHwqwFlg.mjs";
-import { U as UnstyledButton } from "../__chunks__/UnstyledButton-DpQ5Ic9D.mjs";
+import { M as Menu } from "../__chunks__/Menu-C2F4fvhd.mjs";
+import { U as UnstyledButton } from "../__chunks__/UnstyledButton-BCg7eEyP.mjs";
 var __defProp2 = Object.defineProperty;
 var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
 var __hasOwnProp2 = Object.prototype.hasOwnProperty;
@@ -214,18 +218,21 @@ function CopyButton({ text }) {
     tooltipState.close();
   }, [clipboard, text, tooltipState]);
   const content = clipboard.copied ? "Copied!" : "Copy code block";
-  return React__default.createElement(Tooltip, {
-    key: content,
+  return jsxRuntimeExports.jsx(Tooltip, {
     isOpen: tooltipState.isOpen || clipboard.copied,
-    content
-  }, React__default.createElement("button", __spreadValues({
-    className: styles$1.CopyButton,
-    onClick: handlePress
-  }, triggerProps), React__default.createElement(Text, {
-    visuallyHidden: true
-  }, "Copy code"), React__default.createElement(Icon, {
-    symbol: ContentCopy
-  })));
+    content,
+    children: jsxRuntimeExports.jsxs("button", __spreadProps(__spreadValues({
+      className: styles$1.CopyButton,
+      onClick: handlePress
+    }, triggerProps), {
+      children: [jsxRuntimeExports.jsx(Text, {
+        visuallyHidden: true,
+        children: "Copy code"
+      }), jsxRuntimeExports.jsx(Icon, {
+        symbol: ContentCopy
+      })]
+    }))
+  }, content);
 }
 CopyButton.displayName = "CopyButton";
 function useCopyButtonTooltipState() {
@@ -251,20 +258,29 @@ function LanguageMenu(props) {
     const language2 = key;
     onChange(language2);
   }, [onChange]);
-  return React__default.createElement(Menu, null, React__default.createElement(Menu.Trigger, null, React__default.createElement(UnstyledButton, null, React__default.createElement(HorizontalStack, {
-    blockAlign: "center",
-    gap: "1",
-    wrap: false
-  }, React__default.createElement(Text, {
-    variant: "body1"
-  }, friendlySnippetLanguageNames[language]), React__default.createElement(Icon, {
-    symbol: ExpandMore400
-  })))), React__default.createElement(Menu.Overlay, {
-    maxItemsUntilScroll: Infinity,
-    onAction: handleMenuAction
-  }, languages.map((language2) => React__default.createElement(Menu.Item, {
-    key: language2
-  }, friendlySnippetLanguageNames[language2]))));
+  return jsxRuntimeExports.jsxs(Menu, {
+    children: [jsxRuntimeExports.jsx(Menu.Trigger, {
+      children: jsxRuntimeExports.jsx(UnstyledButton, {
+        children: jsxRuntimeExports.jsxs(HorizontalStack, {
+          blockAlign: "center",
+          gap: "1",
+          wrap: false,
+          children: [jsxRuntimeExports.jsx(Text, {
+            variant: "body1",
+            children: friendlySnippetLanguageNames[language]
+          }), jsxRuntimeExports.jsx(Icon, {
+            symbol: ExpandMore400
+          })]
+        })
+      })
+    }), jsxRuntimeExports.jsx(Menu.Overlay, {
+      maxItemsUntilScroll: Infinity,
+      onAction: handleMenuAction,
+      children: languages.map((language2) => jsxRuntimeExports.jsx(Menu.Item, {
+        children: friendlySnippetLanguageNames[language2]
+      }, language2))
+    })]
+  });
 }
 const CodeBlock$1 = "_CodeBlock_w5hab_4";
 const header = "_header_w5hab_12";
@@ -284,31 +300,35 @@ function CodeBlockHeader(props) {
   const { children, color = "neutral", hideCopy = false } = props;
   const { snippet, languages, language, onLanguageChange } = useCodeBlock();
   const className = classNames(styles.header, styles[variationName("color", color)]);
-  return React__default.createElement("div", {
-    className
-  }, React__default.createElement(HorizontalStack, {
-    align: "space-between",
-    gap: "2",
-    wrap: false,
-    blockAlign: "start"
-  }, React__default.createElement("span", {
-    className: styles.headerTitle
-  }, children), React__default.createElement(HorizontalStack, {
-    gap: "2",
-    wrap: false
-  }, languages.length > 1 && React__default.createElement(LanguageMenu, {
-    languages,
-    language,
-    onChange: onLanguageChange
-  }), languages.length > 1 && !hideCopy && React__default.createElement("span", {
-    className: styles.divider
-  }), !hideCopy && React__default.createElement(CopyButton, {
-    text: snippet.props.code
-  }))));
+  return jsxRuntimeExports.jsx("div", {
+    className,
+    children: jsxRuntimeExports.jsxs(HorizontalStack, {
+      align: "space-between",
+      gap: "2",
+      wrap: false,
+      blockAlign: "start",
+      children: [jsxRuntimeExports.jsx("span", {
+        className: styles.headerTitle,
+        children
+      }), jsxRuntimeExports.jsxs(HorizontalStack, {
+        gap: "2",
+        wrap: false,
+        children: [languages.length > 1 && jsxRuntimeExports.jsx(LanguageMenu, {
+          languages,
+          language,
+          onChange: onLanguageChange
+        }), languages.length > 1 && !hideCopy && jsxRuntimeExports.jsx("span", {
+          className: styles.divider
+        }), !hideCopy && jsxRuntimeExports.jsx(CopyButton, {
+          text: snippet.props.code
+        })]
+      })]
+    })
+  });
 }
 CodeBlockHeader.displayName = "CodeBlock.Header";
 function CodeBlockSnippet(props) {
-  return React__default.createElement(CodeSnippet, __spreadValues({}, props));
+  return jsxRuntimeExports.jsx(CodeSnippet, __spreadValues({}, props));
 }
 CodeBlockSnippet.displayName = "CodeBlock.Snippet";
 function CodeBlock(props) {
@@ -341,11 +361,13 @@ function CodeBlock(props) {
       onLanguageChange
     };
   }, [languages, snippet, language, onLanguageChange]);
-  return React__default.createElement(CodeBlockContext.Provider, {
-    value: context
-  }, React__default.createElement("div", {
-    className: styles.CodeBlock
-  }, header2, snippet));
+  return jsxRuntimeExports.jsx(CodeBlockContext.Provider, {
+    value: context,
+    children: jsxRuntimeExports.jsxs("div", {
+      className: styles.CodeBlock,
+      children: [header2, snippet]
+    })
+  });
 }
 CodeBlock.displayName = "CodeBlock";
 CodeBlock.Header = CodeBlockHeader;

package/CodeSnippet/index.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const CodeSnippet = require("../__chunks__/CodeSnippet-CIijbclb.js");
+const CodeSnippet = require("../__chunks__/CodeSnippet-BCOMwE07.js");
 exports.CodeSnippet = CodeSnippet.CodeSnippet;

package/CodeSnippet/index.mjs

@@ -1,4 +1,4 @@
-import { C } from "../__chunks__/CodeSnippet-QpCpkoXv.mjs";
+import { C } from "../__chunks__/CodeSnippet-CWnMHdVu.mjs";
 export {
   C as CodeSnippet
 };

package/ColorPicker/index.js

@@ -32,6 +32,7 @@ var __objRest = (source, exclude) => {
   return target;
 };
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../__chunks__/jsx-runtime-CH1d66I3.js");
 const React = require("react");
 const utils = require("../__chunks__/utils-CRWC8dEm.js");
 const BaseCollection = require("../__chunks__/BaseCollection-BFCqPRBy.js");
@@ -64,7 +65,7 @@ const useSpinButton = require("../__chunks__/useSpinButton-BtlaFD9D.js");
 const useEvent = require("../__chunks__/useEvent-D3eKExds.js");
 const useTextField = require("../__chunks__/useTextField-BlTYl2ML.js");
 const useNumberFormatter = require("../__chunks__/useNumberFormatter-BCYp6Is8.js");
-const InputCaption = require("../__chunks__/InputCaption-C3Hf9Hvt.js");
+const InputCaption = require("../__chunks__/InputCaption-Dkyn1sg6.js");
 var $2d805fd52bb48883$exports = {};
 $2d805fd52bb48883$exports = {
   "alpha": `ألفا`,
@@ -5214,7 +5215,7 @@ const styles$4 = {
   ColorThumb: ColorThumb$1
 };
 function ColorThumb2(props) {
-  return React.createElement($e2b71ec1d6016406$export$a3cc47cee1c1ccc, __spreadProps(__spreadValues({}, props), {
+  return jsxRuntime.jsxRuntimeExports.jsx($e2b71ec1d6016406$export$a3cc47cee1c1ccc, __spreadProps(__spreadValues({}, props), {
     className: utilities_css.classNames(styles$4.ColorThumb, props.className)
   }));
 }
@@ -5223,9 +5224,10 @@ const styles$3 = {
   ColorArea: ColorArea$1
 };
 function ColorArea2(props) {
-  return React.createElement($0de070065d44825d$export$b2103f68a961418e, __spreadProps(__spreadValues({}, props), {
-    className: styles$3.ColorArea
-  }), React.createElement(ColorThumb2, null));
+  return jsxRuntime.jsxRuntimeExports.jsx($0de070065d44825d$export$b2103f68a961418e, __spreadProps(__spreadValues({}, props), {
+    className: styles$3.ColorArea,
+    children: jsxRuntime.jsxRuntimeExports.jsx(ColorThumb2, {})
+  }));
 }
 const ColorSlider$1 = "_ColorSlider_2ybsk_4";
 const track = "_track_2ybsk_10";
@@ -5236,40 +5238,45 @@ const styles$2 = {
   thumb
 };
 function ColorSlider2(props) {
-  return React.createElement($1cca5300a3c2e7f9$export$44fd664bcca5b6fb, __spreadProps(__spreadValues({}, props), {
-    className: styles$2.ColorSlider
-  }), React.createElement($6f909507e6374d18$export$105594979f116971, {
-    className: styles$2.track,
-    style: ({ defaultStyle }) => ({
-      background: `
+  return jsxRuntime.jsxRuntimeExports.jsx($1cca5300a3c2e7f9$export$44fd664bcca5b6fb, __spreadProps(__spreadValues({}, props), {
+    className: styles$2.ColorSlider,
+    children: jsxRuntime.jsxRuntimeExports.jsx($6f909507e6374d18$export$105594979f116971, {
+      className: styles$2.track,
+      style: ({ defaultStyle }) => ({
+        background: `
             ${defaultStyle.background},
             repeating-conic-gradient(#CCC 0% 25%, white 0% 50%) 50% / 16px 16px
           `
-    }),
-    "aria-label": "Hue slider"
-  }, React.createElement(ColorThumb2, {
-    className: styles$2.thumb
-  })));
+      }),
+      "aria-label": "Hue slider",
+      children: jsxRuntime.jsxRuntimeExports.jsx(ColorThumb2, {
+        className: styles$2.thumb
+      })
+    })
+  }));
 }
 const popover = "_popover_1c5tw_4";
 const styles$1 = {
   popover
 };
 function ColorPicker(props) {
-  return React.createElement($2637d3f5efb23186$export$9feb1bc2e5f1ccb3, __spreadValues({}, props));
+  return jsxRuntime.jsxRuntimeExports.jsx($2637d3f5efb23186$export$9feb1bc2e5f1ccb3, __spreadValues({}, props));
 }
 function ColorPickerTrigger({ children }) {
-  return React.createElement(Dialog.$de32f1b87079253c$export$2e1e1122cf0cba88, null, children, React.createElement(Dialog.$07b14b47974efb58$export$5b6b19405a83ff9d, {
-    placement: "bottom start",
-    className: styles$1.popover
-  }, React.createElement(ColorArea2, {
-    colorSpace: "hsb",
-    xChannel: "saturation",
-    yChannel: "brightness"
-  }), React.createElement(ColorSlider2, {
-    colorSpace: "hsb",
-    channel: "hue"
-  })));
+  return jsxRuntime.jsxRuntimeExports.jsxs(Dialog.$de32f1b87079253c$export$2e1e1122cf0cba88, {
+    children: [children, jsxRuntime.jsxRuntimeExports.jsxs(Dialog.$07b14b47974efb58$export$5b6b19405a83ff9d, {
+      placement: "bottom start",
+      className: styles$1.popover,
+      children: [jsxRuntime.jsxRuntimeExports.jsx(ColorArea2, {
+        colorSpace: "hsb",
+        xChannel: "saturation",
+        yChannel: "brightness"
+      }), jsxRuntime.jsxRuntimeExports.jsx(ColorSlider2, {
+        colorSpace: "hsb",
+        channel: "hue"
+      })]
+    })]
+  });
 }
 ColorPicker.Trigger = ColorPickerTrigger;
 function useColorPickerState() {
@@ -5302,34 +5309,44 @@ const styles = {
 function ColorPickerInputField(props) {
   const _a = props, { size = "md", validationState, errorText, helperText, label, isLabelEmphasized, isDisabled, isReadOnly, isRequired, placeholder, autoFocus, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby } = _a, colorPickerProps = __objRest(_a, ["size", "validationState", "errorText", "helperText", "label", "isLabelEmphasized", "isDisabled", "isReadOnly", "isRequired", "placeholder", "autoFocus", "aria-label", "aria-labelledby"]);
   const className = utilities_css.classNames(styles.ColorPickerInput, validationState === "invalid" && styles.error, styles[utilities_css.variationName("size", size)]);
-  return React.createElement(ColorPicker, __spreadValues({}, colorPickerProps), React.createElement($3ada01a82feafb94$export$b865d4358897bb17, {
-    className,
-    isDisabled,
-    isReadOnly,
-    isRequired,
-    isInvalid: validationState === "invalid",
-    autoFocus,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledby
-  }, label && React.createElement(InputCaption.Label, {
-    isLabelEmphasized,
-    fieldSize: size,
-    hasError: validationState === "invalid"
-  }, label), React.createElement("div", {
-    className: styles.inputContainer
-  }, React.createElement("div", {
-    className: styles.swatchContainer
-  }, isDisabled || isReadOnly ? React.createElement(InputColorSwatch, null) : React.createElement(ColorPicker.Trigger, null, React.createElement(Button.$d2b4bc8c273e7be6$export$353f5b6fc5456de1, {
-    className: styles.swatchButton
-  }, React.createElement(InputColorSwatch, null)))), React.createElement(Input.$3985021b0ad6602f$export$f5b8910cec6cf069, {
-    className: styles.input,
-    placeholder
-  })), (helperText || errorText) && React.createElement(InputCaption.InputCaption, {
-    variant: errorText && validationState === "invalid" ? "error" : "helper"
-  }, errorText || helperText)));
+  return jsxRuntime.jsxRuntimeExports.jsx(ColorPicker, __spreadProps(__spreadValues({}, colorPickerProps), {
+    children: jsxRuntime.jsxRuntimeExports.jsxs($3ada01a82feafb94$export$b865d4358897bb17, {
+      className,
+      isDisabled,
+      isReadOnly,
+      isRequired,
+      isInvalid: validationState === "invalid",
+      autoFocus,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby,
+      children: [label && jsxRuntime.jsxRuntimeExports.jsx(InputCaption.Label, {
+        isLabelEmphasized,
+        fieldSize: size,
+        hasError: validationState === "invalid",
+        children: label
+      }), jsxRuntime.jsxRuntimeExports.jsxs("div", {
+        className: styles.inputContainer,
+        children: [jsxRuntime.jsxRuntimeExports.jsx("div", {
+          className: styles.swatchContainer,
+          children: isDisabled || isReadOnly ? jsxRuntime.jsxRuntimeExports.jsx(InputColorSwatch, {}) : jsxRuntime.jsxRuntimeExports.jsx(ColorPicker.Trigger, {
+            children: jsxRuntime.jsxRuntimeExports.jsx(Button.$d2b4bc8c273e7be6$export$353f5b6fc5456de1, {
+              className: styles.swatchButton,
+              children: jsxRuntime.jsxRuntimeExports.jsx(InputColorSwatch, {})
+            })
+          })
+        }), jsxRuntime.jsxRuntimeExports.jsx(Input.$3985021b0ad6602f$export$f5b8910cec6cf069, {
+          className: styles.input,
+          placeholder
+        })]
+      }), (helperText || errorText) && jsxRuntime.jsxRuntimeExports.jsx(InputCaption.InputCaption, {
+        variant: errorText && validationState === "invalid" ? "error" : "helper",
+        children: errorText || helperText
+      })]
+    })
+  }));
 }
 function InputColorSwatch() {
-  return React.createElement($251c695a52d94a8d$export$cae13e90592f246a, {
+  return jsxRuntime.jsxRuntimeExports.jsx($251c695a52d94a8d$export$cae13e90592f246a, {
     className: styles.swatch,
     style: ({ color }) => ({
       background: `