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

package/ColorPicker/index.mjs

@@ -30,6 +30,7 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+import { j as jsxRuntimeExports } from "../__chunks__/jsx-runtime-DTpFD6nx.mjs";
 import React__default, { useState, useMemo, useRef, useCallback, useEffect, createContext, forwardRef, useContext } from "react";
 import { a as $64fa3d84918910a7$export$4d86445c2cf5e3, $ as $64fa3d84918910a7$export$29f1550f4b0d4415, b as $64fa3d84918910a7$export$2881499e37b75b9a, e as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, f as $64fa3d84918910a7$export$ef03459518577ad4, d as $64fa3d84918910a7$export$fabf2dc03a41866e } from "../__chunks__/utils-C1be5hOp.mjs";
 import { f as $4e85f108e88277b8$export$ebe63fadcdce34ed, g as $4e85f108e88277b8$export$44644b8a16031b5b, h as $4e85f108e88277b8$export$717b2c0a523a0b53, i as $4e85f108e88277b8$export$265015d6dc85bf21 } from "../__chunks__/BaseCollection-BVO0lZBs.mjs";
@@ -62,7 +63,7 @@ import { a as $6c7bd7858deea686$export$cd11ab140839f11d, $ as $d2e8511e6f209edf$
 import { $ as $e9faafb641e167db$export$90fc3a17d93f704c } from "../__chunks__/useEvent-CnahkmoD.mjs";
 import { $ as $2d73ec29415bd339$export$712718f7aec83d5 } from "../__chunks__/useTextField-0Mbs_DmY.mjs";
 import { $ as $a916eb452884faea$export$b7a616150fdb9f44 } from "../__chunks__/useNumberFormatter-dSwO_MBg.mjs";
-import { L as Label, I as InputCaption } from "../__chunks__/InputCaption-BJO9_Tby.mjs";
+import { L as Label, I as InputCaption } from "../__chunks__/InputCaption-B8bZH6sX.mjs";
 var $2d805fd52bb48883$exports = {};
 $2d805fd52bb48883$exports = {
   "alpha": `ألفا`,
@@ -5212,7 +5213,7 @@ const styles$4 = {
   ColorThumb: ColorThumb$1
 };
 function ColorThumb2(props) {
-  return React__default.createElement($e2b71ec1d6016406$export$a3cc47cee1c1ccc, __spreadProps(__spreadValues({}, props), {
+  return jsxRuntimeExports.jsx($e2b71ec1d6016406$export$a3cc47cee1c1ccc, __spreadProps(__spreadValues({}, props), {
     className: classNames(styles$4.ColorThumb, props.className)
   }));
 }
@@ -5221,9 +5222,10 @@ const styles$3 = {
   ColorArea: ColorArea$1
 };
 function ColorArea2(props) {
-  return React__default.createElement($0de070065d44825d$export$b2103f68a961418e, __spreadProps(__spreadValues({}, props), {
-    className: styles$3.ColorArea
-  }), React__default.createElement(ColorThumb2, null));
+  return jsxRuntimeExports.jsx($0de070065d44825d$export$b2103f68a961418e, __spreadProps(__spreadValues({}, props), {
+    className: styles$3.ColorArea,
+    children: jsxRuntimeExports.jsx(ColorThumb2, {})
+  }));
 }
 const ColorSlider$1 = "_ColorSlider_2ybsk_4";
 const track = "_track_2ybsk_10";
@@ -5234,40 +5236,45 @@ const styles$2 = {
   thumb
 };
 function ColorSlider2(props) {
-  return React__default.createElement($1cca5300a3c2e7f9$export$44fd664bcca5b6fb, __spreadProps(__spreadValues({}, props), {
-    className: styles$2.ColorSlider
-  }), React__default.createElement($6f909507e6374d18$export$105594979f116971, {
-    className: styles$2.track,
-    style: ({ defaultStyle }) => ({
-      background: `
+  return jsxRuntimeExports.jsx($1cca5300a3c2e7f9$export$44fd664bcca5b6fb, __spreadProps(__spreadValues({}, props), {
+    className: styles$2.ColorSlider,
+    children: 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__default.createElement(ColorThumb2, {
-    className: styles$2.thumb
-  })));
+      }),
+      "aria-label": "Hue slider",
+      children: jsxRuntimeExports.jsx(ColorThumb2, {
+        className: styles$2.thumb
+      })
+    })
+  }));
 }
 const popover = "_popover_1c5tw_4";
 const styles$1 = {
   popover
 };
 function ColorPicker(props) {
-  return React__default.createElement($2637d3f5efb23186$export$9feb1bc2e5f1ccb3, __spreadValues({}, props));
+  return jsxRuntimeExports.jsx($2637d3f5efb23186$export$9feb1bc2e5f1ccb3, __spreadValues({}, props));
 }
 function ColorPickerTrigger({ children }) {
-  return React__default.createElement($de32f1b87079253c$export$2e1e1122cf0cba88, null, children, React__default.createElement($07b14b47974efb58$export$5b6b19405a83ff9d, {
-    placement: "bottom start",
-    className: styles$1.popover
-  }, React__default.createElement(ColorArea2, {
-    colorSpace: "hsb",
-    xChannel: "saturation",
-    yChannel: "brightness"
-  }), React__default.createElement(ColorSlider2, {
-    colorSpace: "hsb",
-    channel: "hue"
-  })));
+  return jsxRuntimeExports.jsxs($de32f1b87079253c$export$2e1e1122cf0cba88, {
+    children: [children, jsxRuntimeExports.jsxs($07b14b47974efb58$export$5b6b19405a83ff9d, {
+      placement: "bottom start",
+      className: styles$1.popover,
+      children: [jsxRuntimeExports.jsx(ColorArea2, {
+        colorSpace: "hsb",
+        xChannel: "saturation",
+        yChannel: "brightness"
+      }), jsxRuntimeExports.jsx(ColorSlider2, {
+        colorSpace: "hsb",
+        channel: "hue"
+      })]
+    })]
+  });
 }
 ColorPicker.Trigger = ColorPickerTrigger;
 function useColorPickerState() {
@@ -5300,34 +5307,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 = classNames(styles.ColorPickerInput, validationState === "invalid" && styles.error, styles[variationName("size", size)]);
-  return React__default.createElement(ColorPicker, __spreadValues({}, colorPickerProps), React__default.createElement($3ada01a82feafb94$export$b865d4358897bb17, {
-    className,
-    isDisabled,
-    isReadOnly,
-    isRequired,
-    isInvalid: validationState === "invalid",
-    autoFocus,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledby
-  }, label && React__default.createElement(Label, {
-    isLabelEmphasized,
-    fieldSize: size,
-    hasError: validationState === "invalid"
-  }, label), React__default.createElement("div", {
-    className: styles.inputContainer
-  }, React__default.createElement("div", {
-    className: styles.swatchContainer
-  }, isDisabled || isReadOnly ? React__default.createElement(InputColorSwatch, null) : React__default.createElement(ColorPicker.Trigger, null, React__default.createElement($d2b4bc8c273e7be6$export$353f5b6fc5456de1, {
-    className: styles.swatchButton
-  }, React__default.createElement(InputColorSwatch, null)))), React__default.createElement($3985021b0ad6602f$export$f5b8910cec6cf069, {
-    className: styles.input,
-    placeholder
-  })), (helperText || errorText) && React__default.createElement(InputCaption, {
-    variant: errorText && validationState === "invalid" ? "error" : "helper"
-  }, errorText || helperText)));
+  return jsxRuntimeExports.jsx(ColorPicker, __spreadProps(__spreadValues({}, colorPickerProps), {
+    children: jsxRuntimeExports.jsxs($3ada01a82feafb94$export$b865d4358897bb17, {
+      className,
+      isDisabled,
+      isReadOnly,
+      isRequired,
+      isInvalid: validationState === "invalid",
+      autoFocus,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby,
+      children: [label && jsxRuntimeExports.jsx(Label, {
+        isLabelEmphasized,
+        fieldSize: size,
+        hasError: validationState === "invalid",
+        children: label
+      }), jsxRuntimeExports.jsxs("div", {
+        className: styles.inputContainer,
+        children: [jsxRuntimeExports.jsx("div", {
+          className: styles.swatchContainer,
+          children: isDisabled || isReadOnly ? jsxRuntimeExports.jsx(InputColorSwatch, {}) : jsxRuntimeExports.jsx(ColorPicker.Trigger, {
+            children: jsxRuntimeExports.jsx($d2b4bc8c273e7be6$export$353f5b6fc5456de1, {
+              className: styles.swatchButton,
+              children: jsxRuntimeExports.jsx(InputColorSwatch, {})
+            })
+          })
+        }), jsxRuntimeExports.jsx($3985021b0ad6602f$export$f5b8910cec6cf069, {
+          className: styles.input,
+          placeholder
+        })]
+      }), (helperText || errorText) && jsxRuntimeExports.jsx(InputCaption, {
+        variant: errorText && validationState === "invalid" ? "error" : "helper",
+        children: errorText || helperText
+      })]
+    })
+  }));
 }
 function InputColorSwatch() {
-  return React__default.createElement($251c695a52d94a8d$export$cae13e90592f246a, {
+  return jsxRuntimeExports.jsx($251c695a52d94a8d$export$cae13e90592f246a, {
     className: styles.swatch,
     style: ({ color }) => ({
       background: `

package/CustomerPortalLayout/index.js

@@ -31,13 +31,14 @@ 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 EasyPostLogo = require("../__chunks__/EasyPostLogo-DQt5KlFX.js");
-const HorizontalStack = require("../__chunks__/HorizontalStack-CXpjASZi.js");
-const Text = require("../__chunks__/Text-CSESKR_s.js");
-const Icon = require("../__chunks__/Icon-W8F9w-jS.js");
+const EasyPostLogo = require("../__chunks__/EasyPostLogo-D3WNdZ29.js");
+const HorizontalStack = require("../__chunks__/HorizontalStack-DidoI4Ks.js");
+const Text = require("../__chunks__/Text-C4CEsglh.js");
+const Icon = require("../__chunks__/Icon-BVa5ddiD.js");
 const Button = require("../__chunks__/Button-BpQFyL49.js");
-const Menu = require("../__chunks__/Menu-Kfc6nxFP.js");
+const Menu = require("../__chunks__/Menu-Du8SsMeJ.js");
 const utilities_css = require("../utilities/css.js");
 const useFocusRing = require("../__chunks__/useFocusRing-DbC9E5wC.js");
 const mergeProps = require("../__chunks__/mergeProps-DLPcevok.js");
@@ -116,11 +117,12 @@ const styles$1 = {
 };
 function CustomerPortalLayoutActions(props) {
   const { children } = props;
-  return React.createElement(HorizontalStack.HorizontalStack, {
+  return jsxRuntime.jsxRuntimeExports.jsx(HorizontalStack.HorizontalStack, {
     wrap: false,
     gap: "1",
-    align: "end"
-  }, children);
+    align: "end",
+    children
+  });
 }
 function CustomerPortalLayoutMenuAction(props) {
   const { accessibilityLabel = "Actions", iconSymbol, children, renderBadge } = props;
@@ -131,18 +133,25 @@ function CustomerPortalLayoutMenuAction(props) {
   const { focusProps, isFocusVisible } = useFocusRing.$f7dceffc5ad7768b$export$4e328f61c538687f({});
   const { hoverProps, isHovered } = useHover.$6179b936705e76d3$export$ae780daf29e6d456({});
   const className = utilities_css.classNames(styles$1.button, isFocusVisible && styles$1.focused, isHovered && styles$1.hovered, isOpen && styles$1.open);
-  return React.createElement(Menu.Menu, {
+  return jsxRuntime.jsxRuntimeExports.jsxs(Menu.Menu, {
     isOpen,
-    onOpenChange: handleOpenChange
-  }, React.createElement(Menu.Menu.Trigger, null, React.createElement(PressableButton, __spreadValues({
-    className
-  }, mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(focusProps, hoverProps)), React.createElement(Text.Text, {
-    visuallyHidden: true
-  }, accessibilityLabel), React.createElement(Icon.Icon, {
-    symbol: iconSymbol
-  }), renderBadge && React.createElement("div", {
-    className: styles$1.badgeContainer
-  }, renderBadge()))), children);
+    onOpenChange: handleOpenChange,
+    children: [jsxRuntime.jsxRuntimeExports.jsx(Menu.Menu.Trigger, {
+      children: jsxRuntime.jsxRuntimeExports.jsxs(PressableButton, __spreadProps(__spreadValues({
+        className
+      }, mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(focusProps, hoverProps)), {
+        children: [jsxRuntime.jsxRuntimeExports.jsx(Text.Text, {
+          visuallyHidden: true,
+          children: accessibilityLabel
+        }), jsxRuntime.jsxRuntimeExports.jsx(Icon.Icon, {
+          symbol: iconSymbol
+        }), renderBadge && jsxRuntime.jsxRuntimeExports.jsx("div", {
+          className: styles$1.badgeContainer,
+          children: renderBadge()
+        })]
+      }))
+    }), children]
+  });
 }
 function CustomerPortalLayoutLinkAction(props) {
   const { accessibilityLabel = "Actions", iconSymbol, renderBadge, isSelected } = props;
@@ -151,44 +160,52 @@ function CustomerPortalLayoutLinkAction(props) {
   const { focusProps, isFocusVisible } = useFocusRing.$f7dceffc5ad7768b$export$4e328f61c538687f(props);
   const { hoverProps, isHovered } = useHover.$6179b936705e76d3$export$ae780daf29e6d456(props);
   const className = utilities_css.classNames(styles$1.button, isFocusVisible && styles$1.focused, isHovered && styles$1.hovered, isSelected && styles$1.selected);
-  return React.createElement("a", __spreadProps(__spreadValues({
+  return jsxRuntime.jsxRuntimeExports.jsxs("a", __spreadProps(__spreadValues({
     ref,
     className
   }, mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(hoverProps, focusProps, linkProps)), {
-    "aria-current": isSelected ? "true" : void 0
-  }), React.createElement(Text.Text, {
-    visuallyHidden: true
-  }, accessibilityLabel), React.createElement(Icon.Icon, {
-    symbol: iconSymbol
-  }), renderBadge && React.createElement("div", {
-    className: styles$1.badgeContainer
-  }, renderBadge()));
+    "aria-current": isSelected ? "true" : void 0,
+    children: [jsxRuntime.jsxRuntimeExports.jsx(Text.Text, {
+      visuallyHidden: true,
+      children: accessibilityLabel
+    }), jsxRuntime.jsxRuntimeExports.jsx(Icon.Icon, {
+      symbol: iconSymbol
+    }), renderBadge && jsxRuntime.jsxRuntimeExports.jsx("div", {
+      className: styles$1.badgeContainer,
+      children: renderBadge()
+    })]
+  }));
 }
 function CustomerPortalLayoutButtonAction(props) {
   const _a = props, { accessibilityLabel = "Actions", iconSymbol, renderBadge, isSelected } = _a, buttonProps = __objRest(_a, ["accessibilityLabel", "iconSymbol", "renderBadge", "isSelected"]);
   const ref = React.useRef(null);
   const className = utilities_css.classNames(styles$1.button, isSelected && styles$1.selected);
-  return React.createElement(Button.$d2b4bc8c273e7be6$export$353f5b6fc5456de1, __spreadValues({
+  return jsxRuntime.jsxRuntimeExports.jsxs(Button.$d2b4bc8c273e7be6$export$353f5b6fc5456de1, __spreadProps(__spreadValues({
     ref,
     className,
     "aria-current": isSelected ? "true" : void 0
-  }, buttonProps), React.createElement(Text.Text, {
-    visuallyHidden: true
-  }, accessibilityLabel), React.createElement(Icon.Icon, {
-    symbol: iconSymbol
-  }), renderBadge && React.createElement("div", {
-    className: styles$1.badgeContainer
-  }, renderBadge()));
+  }, buttonProps), {
+    children: [jsxRuntime.jsxRuntimeExports.jsx(Text.Text, {
+      visuallyHidden: true,
+      children: accessibilityLabel
+    }), jsxRuntime.jsxRuntimeExports.jsx(Icon.Icon, {
+      symbol: iconSymbol
+    }), renderBadge && jsxRuntime.jsxRuntimeExports.jsx("div", {
+      className: styles$1.badgeContainer,
+      children: renderBadge()
+    })]
+  }));
 }
 function CustomerPortalLayoutActionBadge(props) {
   const { children } = props;
-  return React.createElement("div", {
-    className: styles$1.badge
-  }, children);
+  return jsxRuntime.jsxRuntimeExports.jsx("div", {
+    className: styles$1.badge,
+    children
+  });
 }
 const PressableButton = React.forwardRef((props, ref) => {
   const { pressProps } = usePress.$f6c31cce2adf654f$export$45712eceda6fad21(props);
-  return React.createElement("button", __spreadProps(__spreadValues({}, pressProps), {
+  return jsxRuntime.jsxRuntimeExports.jsx("button", __spreadProps(__spreadValues({}, pressProps), {
     ref,
     className: utilities_css.classNames(pressProps.className)
   }));
@@ -224,58 +241,70 @@ function CustomerPortalLayout(props) {
       shouldDisplayEasyPostLogo
     };
   }, [mode, shouldDisplayEasyPostLogo]);
-  return React.createElement(CustomerPortalLayoutContext.Provider, {
-    value: context
-  }, React.createElement("div", {
-    className: styles.CustomerPortalLayout
-  }, children));
+  return jsxRuntime.jsxRuntimeExports.jsx(CustomerPortalLayoutContext.Provider, {
+    value: context,
+    children: jsxRuntime.jsxRuntimeExports.jsx("div", {
+      className: styles.CustomerPortalLayout,
+      children
+    })
+  });
 }
 function TestModeBanner() {
-  return React.createElement("div", {
-    className: styles.testModeBanner
-  }, React.createElement(HorizontalStack.HorizontalStack, {
-    gap: "1",
-    blockAlign: "center"
-  }, React.createElement(Icon.Icon, {
-    symbol: Experiment,
-    color: "primary.700",
-    size: "lg"
-  }), React.createElement(Text.Text, {
-    variant: "subtitle1",
-    color: "warning.900"
-  }, "This Environment is in Test Mode")));
+  return jsxRuntime.jsxRuntimeExports.jsx("div", {
+    className: styles.testModeBanner,
+    children: jsxRuntime.jsxRuntimeExports.jsxs(HorizontalStack.HorizontalStack, {
+      gap: "1",
+      blockAlign: "center",
+      children: [jsxRuntime.jsxRuntimeExports.jsx(Icon.Icon, {
+        symbol: Experiment,
+        color: "primary.700",
+        size: "lg"
+      }), jsxRuntime.jsxRuntimeExports.jsx(Text.Text, {
+        variant: "subtitle1",
+        color: "warning.900",
+        children: "This Environment is in Test Mode"
+      })]
+    })
+  });
 }
 function CustomerPortalLayoutHeader(props) {
   const { children } = props;
   const { mode } = useCustomerPortalLayout();
   const isTestMode = mode === "test";
-  return React.createElement("header", {
-    className: styles.header
-  }, isTestMode && React.createElement(TestModeBanner, null), React.createElement("div", {
-    className: styles.logoAndActions
-  }, children));
+  return jsxRuntime.jsxRuntimeExports.jsxs("header", {
+    className: styles.header,
+    children: [isTestMode && jsxRuntime.jsxRuntimeExports.jsx(TestModeBanner, {}), jsxRuntime.jsxRuntimeExports.jsx("div", {
+      className: styles.logoAndActions,
+      children
+    })]
+  });
 }
 function CustomerPortalLayoutLogo(props) {
   const { children } = props;
-  return React.createElement("div", {
-    className: styles.logo
-  }, children);
+  return jsxRuntime.jsxRuntimeExports.jsx("div", {
+    className: styles.logo,
+    children
+  });
 }
 function CustomerPortalLayoutLogoContainer(props) {
   const { children } = props;
   const { shouldDisplayEasyPostLogo } = useCustomerPortalLayout();
-  return React.createElement(HorizontalStack.HorizontalStack, {
+  return jsxRuntime.jsxRuntimeExports.jsxs(HorizontalStack.HorizontalStack, {
     gap: "1",
     blockAlign: "center",
     align: "start",
-    wrap: false
-  }, shouldDisplayEasyPostLogo && React.createElement(CustomerPortalLayoutLogo, null, React.createElement(EasyPostLogo.EasyPostLogo, null)), children);
+    wrap: false,
+    children: [shouldDisplayEasyPostLogo && jsxRuntime.jsxRuntimeExports.jsx(CustomerPortalLayoutLogo, {
+      children: jsxRuntime.jsxRuntimeExports.jsx(EasyPostLogo.EasyPostLogo, {})
+    }), children]
+  });
 }
 function CustomerPortalLayoutContent(props) {
   const { children } = props;
-  return React.createElement("main", {
-    className: styles.content
-  }, children);
+  return jsxRuntime.jsxRuntimeExports.jsx("main", {
+    className: styles.content,
+    children
+  });
 }
 CustomerPortalLayout.Header = CustomerPortalLayoutHeader;
 CustomerPortalLayout.Logo = CustomerPortalLayoutLogo;