@easypost/easy-ui 1.0.0-alpha.92 → 1.0.0-alpha.93

package/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AAGrD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAK7C,MAAM,MAAM,WAAW,GACnB,SAAS,GACT,WAAW,GACX,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,CAAC;AAEd,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AACpE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,CAAC;AAErC,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG;IAC1C,mBAAmB;IACnB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,qBAAqB;IACrB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,kBAAkB;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,sBAAsB;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DG;AACH,eAAO,MAAM,MAAM;IAnFjB,mBAAmB;YACX,WAAW;IACnB,qBAAqB;cACX,aAAa;IACvB,kBAAkB;WACX,UAAU;IACjB,sBAAsB;iBACT,OAAO;IACpB,6CAA6C;cACnC,OAAO;IACjB,4CAA4C;kBAC9B,UAAU;IACxB,2CAA2C;gBAC/B,UAAU;IACtB,6BAA6B;eAClB,SAAS;IACpB,yBAAyB;WAClB,MAAM;8BAuHb,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AAGrD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAK7C,MAAM,MAAM,WAAW,GACnB,SAAS,GACT,WAAW,GACX,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,CAAC;AAEd,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AACpE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,CAAC;AAErC,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG;IAC1C,mBAAmB;IACnB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,qBAAqB;IACrB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,kBAAkB;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,sBAAsB;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DG;AACH,eAAO,MAAM,MAAM;IAnFjB,mBAAmB;YACX,WAAW;IACnB,qBAAqB;cACX,aAAa;IACvB,kBAAkB;WACX,UAAU;IACjB,sBAAsB;iBACT,OAAO;IACpB,6CAA6C;cACnC,OAAO;IACjB,4CAA4C;kBAC9B,UAAU;IACxB,2CAA2C;gBAC/B,UAAU;IACtB,6BAA6B;eAClB,SAAS;IACpB,yBAAyB;WAClB,MAAM;8BAyHb,CAAC"}

package/Button/index.js

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

package/Button/index.mjs

@@ -1,4 +1,4 @@
-import { B } from "../__chunks__/Button-DweJ2JfF.mjs";
+import { B } from "../__chunks__/Button-BUkrUXzg.mjs";
 export {
   B as Button
 };

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @easypost/easy-ui
 
+## 1.0.0-alpha.93
+
+### Minor Changes
+
+- 730e13a: feat: support xl size for Modal
+
+### Patch Changes
+
+- 9523c3d: Allow icons for sm Button and add icons
+- Updated dependencies [9523c3d]
+  - @easypost/easy-ui-icons@1.0.0-alpha.49
+
 ## 1.0.0-alpha.92
 
 ### Patch Changes

package/FocusedProductLayout/index.js

@@ -37,7 +37,7 @@ const HelpMenu = require("../__chunks__/HelpMenu-BWEypFzC.js");
 const ArrowBack = require("../__chunks__/ArrowBack-C_LSatif.js");
 const Icon = require("../__chunks__/Icon-W8F9w-jS.js");
 const Text = require("../__chunks__/Text-BXsuDbqc.js");
-const Button = require("../__chunks__/Button--4bR8jiH.js");
+const Button = require("../__chunks__/Button-852xZ4Ws.js");
 const Stepper = require("../__chunks__/Stepper-DV4cL0T9.js");
 function Content({ children }) {
   return React.createElement("main", null, children);

package/FocusedProductLayout/index.mjs

@@ -35,7 +35,7 @@ import { H as HelpMenu } from "../__chunks__/HelpMenu-CSrPwH1K.mjs";
 import { A as ArrowBack } from "../__chunks__/ArrowBack-BFS-tCpV.mjs";
 import { I as Icon } from "../__chunks__/Icon-0SN9dbwU.mjs";
 import { T as Text } from "../__chunks__/Text-BWjD7__Y.mjs";
-import { B as Button } from "../__chunks__/Button-DweJ2JfF.mjs";
+import { B as Button } from "../__chunks__/Button-BUkrUXzg.mjs";
 import { S as Stepper } from "../__chunks__/Stepper-CexdatYw.mjs";
 function Content({ children }) {
   return React__default.createElement("main", null, children);

package/Modal/Modal.d.ts

@@ -5,7 +5,7 @@ import { ModalHeader } from "./ModalHeader";
 import { ModalTrigger } from "./ModalTrigger";
 import { ModalContainer } from "./ModalContainer";
 import { useModalTrigger } from "./context";
-type ModalSize = "sm" | "md" | "lg";
+type ModalSize = "sm" | "md" | "lg" | "xl";
 export type ModalProps = {
     /**
      * Content of the modal.

package/Modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,SAAS,EAAmB,MAAM,OAAO,CAAC;AAGtE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAI5C,KAAK,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpC,MAAM,MAAM,UAAU,GAAG;IACvB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,qBAqCtC;yBArCe,KAAK;;;;;;AAsErB,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,SAAS,EAAmB,MAAM,OAAO,CAAC;AAGtE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAI5C,KAAK,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,MAAM,UAAU,GAAG;IACvB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,qBAqCtC;yBArCe,KAAK;;;;;;AAsErB,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC"}

package/Modal/index.js

@@ -34,7 +34,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const utilities_css = require("../utilities/css.js");
 const utilities_useScrollbar = require("../utilities/useScrollbar.js");
-const Button = require("../__chunks__/Button--4bR8jiH.js");
+const Button = require("../__chunks__/Button-852xZ4Ws.js");
 const Close = require("../__chunks__/Close-BQ2IlPyf.js");
 const HorizontalStack = require("../__chunks__/HorizontalStack-CXpjASZi.js");
 const Icon = require("../__chunks__/Icon-W8F9w-jS.js");
@@ -65,20 +65,21 @@ const useModalTrigger = () => {
   const modalTriggerContext = useModalTriggerContext();
   return modalTriggerContext.state;
 };
-const underlayBg = "_underlayBg_1hnpv_4";
-const underlayBox = "_underlayBox_1hnpv_27";
-const underlayEdge = "_underlayEdge_1hnpv_35";
-const Modal$1 = "_Modal_1hnpv_41";
-const header = "_header_1hnpv_59";
-const stuck = "_stuck_1hnpv_65";
-const body = "_body_1hnpv_69";
-const content = "_content_1hnpv_76";
-const footer = "_footer_1hnpv_93";
-const closeBtn = "_closeBtn_1hnpv_110";
-const iconAtEnd = "_iconAtEnd_1hnpv_124";
-const sizeSm = "_sizeSm_1hnpv_130";
-const sizeMd = "_sizeMd_1hnpv_134";
-const sizeLg = "_sizeLg_1hnpv_138";
+const underlayBg = "_underlayBg_12m01_4";
+const underlayBox = "_underlayBox_12m01_27";
+const underlayEdge = "_underlayEdge_12m01_35";
+const Modal$1 = "_Modal_12m01_41";
+const header = "_header_12m01_59";
+const stuck = "_stuck_12m01_65";
+const body = "_body_12m01_69";
+const content = "_content_12m01_76";
+const footer = "_footer_12m01_93";
+const closeBtn = "_closeBtn_12m01_110";
+const iconAtEnd = "_iconAtEnd_12m01_124";
+const sizeSm = "_sizeSm_12m01_130";
+const sizeMd = "_sizeMd_12m01_134";
+const sizeLg = "_sizeLg_12m01_138";
+const sizeXl = "_sizeXl_12m01_142";
 const styles = {
   underlayBg,
   underlayBox,
@@ -93,7 +94,8 @@ const styles = {
   iconAtEnd,
   sizeSm,
   sizeMd,
-  sizeLg
+  sizeLg,
+  sizeXl
 };
 function ModalBody(props) {
   const { children } = props;

package/Modal/index.mjs

@@ -32,7 +32,7 @@ var __objRest = (source, exclude) => {
 import React__default, { createContext, useContext, useMemo, cloneElement, useState, useRef } from "react";
 import { classNames, variationName } from "../utilities/css.mjs";
 import { useScrollbar } from "../utilities/useScrollbar.mjs";
-import { B as Button } from "../__chunks__/Button-DweJ2JfF.mjs";
+import { B as Button } from "../__chunks__/Button-BUkrUXzg.mjs";
 import { C as Close } from "../__chunks__/Close-Cq6Q6MN6.mjs";
 import { H as HorizontalStack } from "../__chunks__/HorizontalStack-CxE8tPx_.mjs";
 import { I as Icon } from "../__chunks__/Icon-0SN9dbwU.mjs";
@@ -63,20 +63,21 @@ const useModalTrigger = () => {
   const modalTriggerContext = useModalTriggerContext();
   return modalTriggerContext.state;
 };
-const underlayBg = "_underlayBg_1hnpv_4";
-const underlayBox = "_underlayBox_1hnpv_27";
-const underlayEdge = "_underlayEdge_1hnpv_35";
-const Modal$1 = "_Modal_1hnpv_41";
-const header = "_header_1hnpv_59";
-const stuck = "_stuck_1hnpv_65";
-const body = "_body_1hnpv_69";
-const content = "_content_1hnpv_76";
-const footer = "_footer_1hnpv_93";
-const closeBtn = "_closeBtn_1hnpv_110";
-const iconAtEnd = "_iconAtEnd_1hnpv_124";
-const sizeSm = "_sizeSm_1hnpv_130";
-const sizeMd = "_sizeMd_1hnpv_134";
-const sizeLg = "_sizeLg_1hnpv_138";
+const underlayBg = "_underlayBg_12m01_4";
+const underlayBox = "_underlayBox_12m01_27";
+const underlayEdge = "_underlayEdge_12m01_35";
+const Modal$1 = "_Modal_12m01_41";
+const header = "_header_12m01_59";
+const stuck = "_stuck_12m01_65";
+const body = "_body_12m01_69";
+const content = "_content_12m01_76";
+const footer = "_footer_12m01_93";
+const closeBtn = "_closeBtn_12m01_110";
+const iconAtEnd = "_iconAtEnd_12m01_124";
+const sizeSm = "_sizeSm_12m01_130";
+const sizeMd = "_sizeMd_12m01_134";
+const sizeLg = "_sizeLg_12m01_138";
+const sizeXl = "_sizeXl_12m01_142";
 const styles = {
   underlayBg,
   underlayBox,
@@ -91,7 +92,8 @@ const styles = {
   iconAtEnd,
   sizeSm,
   sizeMd,
-  sizeLg
+  sizeLg,
+  sizeXl
 };
 function ModalBody(props) {
   const { children } = props;

package/ProductLayout/index.js

@@ -33,7 +33,7 @@ var __objRest = (source, exclude) => {
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const Menu = require("../__chunks__/Menu-OacI_98l.js");
-const Button = require("../__chunks__/Button--4bR8jiH.js");
+const Button = require("../__chunks__/Button-852xZ4Ws.js");
 const Icon = require("../__chunks__/Icon-W8F9w-jS.js");
 const Text = require("../__chunks__/Text-BXsuDbqc.js");
 const UnstyledButton = require("../__chunks__/UnstyledButton-DaRYVyfB.js");

package/ProductLayout/index.mjs

@@ -31,7 +31,7 @@ var __objRest = (source, exclude) => {
 };
 import React__default, { useEffect, createContext, useContext, useCallback, useRef, useMemo } from "react";
 import { M as Menu } from "../__chunks__/Menu-qMqvSorL.mjs";
-import { B as Button } from "../__chunks__/Button-DweJ2JfF.mjs";
+import { B as Button } from "../__chunks__/Button-BUkrUXzg.mjs";
 import { I as Icon } from "../__chunks__/Icon-0SN9dbwU.mjs";
 import { T as Text } from "../__chunks__/Text-BWjD7__Y.mjs";
 import { U as UnstyledButton } from "../__chunks__/UnstyledButton-CbCwVIkK.mjs";

package/SearchNav/index.js

@@ -45,7 +45,7 @@ const Close = require("../__chunks__/Close-BQ2IlPyf.js");
 const Menu$1 = require("../__chunks__/Menu-OacI_98l.js");
 const Search$1 = require("../__chunks__/Search-BY7IgEyX.js");
 const HorizontalStack = require("../__chunks__/HorizontalStack-CXpjASZi.js");
-const Button = require("../__chunks__/Button--4bR8jiH.js");
+const Button = require("../__chunks__/Button-852xZ4Ws.js");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {

package/SearchNav/index.mjs

@@ -44,7 +44,7 @@ import { C as Close } from "../__chunks__/Close-Cq6Q6MN6.mjs";
 import { M as Menu$1 } from "../__chunks__/Menu-qMqvSorL.mjs";
 import { S as Search$1 } from "../__chunks__/Search-Cyblmqo5.mjs";
 import { H as HorizontalStack } from "../__chunks__/HorizontalStack-CxE8tPx_.mjs";
-import { B as Button } from "../__chunks__/Button-DweJ2JfF.mjs";
+import { B as Button } from "../__chunks__/Button-BUkrUXzg.mjs";
 const nav = "_nav_1sb0u_4";
 const desktop = "_desktop_1sb0u_16";
 const onlyLogoGroup = "_onlyLogoGroup_1sb0u_29";

package/__chunks__/{Button--4bR8jiH.js → Button-852xZ4Ws.js}

@@ -76,8 +76,9 @@ const Button = React.forwardRef((props, inRef) => {
   if (bothIconPropsDefined) {
     console.warn("Cannot simultaneously define `iconAtEnd` and `iconAtStart`");
   }
-  const canUseIcon = (iconAtEnd2 || iconAtStart2) && !bothIconPropsDefined && variant !== "link" && size !== "sm";
+  const canUseIcon = (iconAtEnd2 || iconAtStart2) && !bothIconPropsDefined && variant !== "link";
   UnstyledButton.logWarningIfInvalidColorVariantCombination(color, variant);
+  const iconSize = size === "sm" ? "xs" : "md";
   return React.createElement(UnstyledButton.UnstyledButton, __spreadProps(__spreadValues({
     isDisabled,
     ref: inRef,
@@ -85,11 +86,13 @@ const Button = React.forwardRef((props, inRef) => {
   }, restProps), {
     className: utilities_css.classNames(styles.Button, styles[utilities_css.variationName("color", color)], styles[utilities_css.variationName("variant", variant)], styles[utilities_css.variationName("size", size)], isBlock && styles.block)
   }), iconAtStart2 && canUseIcon && React.createElement(Icon.Icon, {
-    symbol: iconAtStart2
+    symbol: iconAtStart2,
+    size: iconSize
   }), React.createElement("span", {
     className: utilities_css.classNames(iconAtStart2 && canUseIcon && styles.iconAtStart, iconAtEnd2 && canUseIcon && styles.iconAtEnd)
   }, children), iconAtEnd2 && canUseIcon && React.createElement(Icon.Icon, {
-    symbol: iconAtEnd2
+    symbol: iconAtEnd2,
+    size: iconSize
   }));
 });
 Button.displayName = "Button";

package/__chunks__/{Button-DweJ2JfF.mjs → Button-BUkrUXzg.mjs}

@@ -75,8 +75,9 @@ const Button = forwardRef((props, inRef) => {
   if (bothIconPropsDefined) {
     console.warn("Cannot simultaneously define `iconAtEnd` and `iconAtStart`");
   }
-  const canUseIcon = (iconAtEnd2 || iconAtStart2) && !bothIconPropsDefined && variant !== "link" && size !== "sm";
+  const canUseIcon = (iconAtEnd2 || iconAtStart2) && !bothIconPropsDefined && variant !== "link";
   logWarningIfInvalidColorVariantCombination(color, variant);
+  const iconSize = size === "sm" ? "xs" : "md";
   return React__default.createElement(UnstyledButton, __spreadProps(__spreadValues({
     isDisabled,
     ref: inRef,
@@ -84,11 +85,13 @@ const Button = forwardRef((props, inRef) => {
   }, restProps), {
     className: classNames(styles.Button, styles[variationName("color", color)], styles[variationName("variant", variant)], styles[variationName("size", size)], isBlock && styles.block)
   }), iconAtStart2 && canUseIcon && React__default.createElement(Icon, {
-    symbol: iconAtStart2
+    symbol: iconAtStart2,
+    size: iconSize
   }), React__default.createElement("span", {
     className: classNames(iconAtStart2 && canUseIcon && styles.iconAtStart, iconAtEnd2 && canUseIcon && styles.iconAtEnd)
   }, children), iconAtEnd2 && canUseIcon && React__default.createElement(Icon, {
-    symbol: iconAtEnd2
+    symbol: iconAtEnd2,
+    size: iconSize
   }));
 });
 Button.displayName = "Button";

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@easypost/easy-ui",
-  "version": "1.0.0-alpha.92",
+  "version": "1.0.0-alpha.93",
   "sideEffects": [
     "**/*.css"
   ],
   "dependencies": {
-    "@easypost/easy-ui-icons": "1.0.0-alpha.48",
+    "@easypost/easy-ui-icons": "1.0.0-alpha.49",
     "@easypost/easy-ui-tokens": "1.0.0-alpha.16",
     "@react-aria/toast": "^3.0.5",
     "@react-aria/utils": "^3.29.1",

package/style.css

@@ -4961,7 +4961,7 @@ textarea {
 }/**
  * Do not edit directly, this file was auto-generated.
  */
-._underlayBg_1hnpv_4 {
+._underlayBg_12m01_4 {
   --ezui-c-modal-underlay-edge-max-height: 72px;
   --ezui-c-modal-underlay-edge-min-height: 2.5vh;
   position: fixed;
@@ -4969,22 +4969,22 @@ textarea {
   display: flex;
   flex-direction: column;
 }
-._underlayBg_1hnpv_4::before {
+._underlayBg_12m01_4::before {
   content: "";
   position: absolute;
   background: var(--ezui-color-primary-800);
   opacity: var(--ezui-opacity-underlay);
 }
 
-._underlayBg_1hnpv_4,
-._underlayBg_1hnpv_4::before {
+._underlayBg_12m01_4,
+._underlayBg_12m01_4::before {
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
 }
 
-._underlayBox_1hnpv_27 {
+._underlayBox_12m01_27 {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -4992,13 +4992,13 @@ textarea {
   pointer-events: none;
 }
 
-._underlayEdge_1hnpv_35 {
+._underlayEdge_12m01_35 {
   flex: 0 9 auto;
   height: var(--ezui-c-modal-underlay-edge-max-height);
   min-height: var(--ezui-c-modal-underlay-edge-min-height);
 }
 
-._Modal_1hnpv_41 {
+._Modal_12m01_41 {
   --ezui-c-modal-max-height: 762px;
   --ezui-c-modal-width: 95vw;
   flex: 0 1 auto;
@@ -5016,41 +5016,41 @@ textarea {
   outline: none;
 }
 
-._header_1hnpv_59 {
+._header_12m01_59 {
   margin: 0;
   padding: var(--ezui-space-5);
   padding-bottom: var(--ezui-space-2);
   color: var(--ezui-color-primary-800);
 }
-._header_1hnpv_59._stuck_1hnpv_65 {
+._header_12m01_59._stuck_12m01_65 {
   box-shadow: var(--ezui-shadow-stuck-from-top);
 }
 
-._body_1hnpv_69 {
+._body_12m01_69 {
   overflow: auto;
   display: flex;
   flex-direction: column;
   overscroll-behavior: contain;
 }
 
-._content_1hnpv_76 {
+._content_12m01_76 {
   padding: 0 var(--ezui-space-5);
   position: relative;
 }
-._content_1hnpv_76 [data-intercept] {
+._content_12m01_76 [data-intercept] {
   position: absolute;
   left: 0;
   width: 1px;
   height: 1px;
 }
-._content_1hnpv_76 [data-intercept="header"] {
+._content_12m01_76 [data-intercept="header"] {
   top: 0;
 }
-._content_1hnpv_76 [data-intercept="footer"] {
+._content_12m01_76 [data-intercept="footer"] {
   bottom: 0;
 }
 
-._footer_1hnpv_93 {
+._footer_12m01_93 {
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
@@ -5059,15 +5059,15 @@ textarea {
   padding-top: var(--ezui-space-3);
 }
 @media (min-width: 30em) {
-  ._footer_1hnpv_93 {
+  ._footer_12m01_93 {
     flex-direction: row;
   }
 }
-._footer_1hnpv_93._stuck_1hnpv_65 {
+._footer_12m01_93._stuck_12m01_65 {
   box-shadow: var(--ezui-shadow-stuck-from-bottom);
 }
 
-._closeBtn_1hnpv_110 {
+._closeBtn_12m01_110 {
   appearance: none;
   margin: 0;
   padding: 0;
@@ -5081,22 +5081,26 @@ textarea {
   cursor: pointer;
 }
 
-._iconAtEnd_1hnpv_124[data-size="2xl"] {
+._iconAtEnd_12m01_124[data-size="2xl"] {
   display: inline-flex;
   margin-top: -5px;
   margin-bottom: -5px;
 }
 
-._sizeSm_1hnpv_130 {
+._sizeSm_12m01_130 {
   --ezui-c-modal-max-width: 528px;
 }
 
-._sizeMd_1hnpv_134 {
+._sizeMd_12m01_134 {
   --ezui-c-modal-max-width: 672px;
 }
 
-._sizeLg_1hnpv_138 {
+._sizeLg_12m01_138 {
   --ezui-c-modal-max-width: 788px;
+}
+
+._sizeXl_12m01_142 {
+  --ezui-c-modal-max-width: 1000px;
 }/**
  * Do not edit directly, this file was auto-generated.
  */