@arc-ui/components 11.10.0 → 11.12.0

package/dist/index.js

@@ -363,8 +363,7 @@ var Surface = function (_a) {
         React__default["default"].createElement("div", __assign({ "data-testid": "arc-surface", className: classNames((_b = {
                     "arc-Surface": true
                 },
-                _b["arc-Surface--".concat(background &&
-                    camelCase$1(background), "Background")] = background,
+                _b["arc-Surface--".concat(background && camelCase$1(background), "Background")] = background,
                 _b["arc-Surface--growVertically"] = growVertically,
                 _b["arc-Surface--padding".concat(padding)] = padding,
                 _b["arc-Surface--paddingHorizontal".concat(paddingHorizontal)] = paddingHorizontal,
@@ -381,26 +380,26 @@ var backgroundsShared = [
     "turquoise",
     "light",
     "lighter",
-    "white"
+    "white",
 ];
 __spreadArray([], backgroundsShared, true);
 __spreadArray([], backgroundsShared, true);
 
-const ArcIconArc = props =>
+const ArcIconArc = (props) =>
   /*#__PURE__*/ React__default["default"].createElement(
     "svg",
     Object.assign(
       {
         viewBox: "0 0 16 16",
-        xmlns: "http://www.w3.org/2000/svg"
+        xmlns: "http://www.w3.org/2000/svg",
       },
-      props
+      props,
     ),
     /*#__PURE__*/ React__default["default"].createElement("path", {
       fill: "none",
       d: "M3.472 11.69a6.5 6.5 0 012.321-6.839A6.5 6.5 0 0113 4.38",
-      stroke: "currentColor"
-    })
+      stroke: "currentColor",
+    }),
   );
 
 /**
@@ -469,123 +468,115 @@ var Text = function (_a) {
             _b)) }, filterDataAttrs(props)), children));
 };
 
-const BtIconCrossAlt2Px = props =>
+const BtIconCrossAlt2Px = (props) =>
   /*#__PURE__*/ React__default["default"].createElement(
     "svg",
     Object.assign(
       {
         xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32"
+        viewBox: "0 0 32 32",
       },
-      props
+      props,
     ),
     /*#__PURE__*/ React__default["default"].createElement("defs", null),
     /*#__PURE__*/ React__default["default"].createElement("path", {
-      d:
-        "M17.41406,16l3.793-3.793A.99989.99989,0,0,0,19.793,10.793L16,14.58594l-3.793-3.793A.99989.99989,0,0,0,10.793,12.207L14.58594,16l-3.793,3.793A.99989.99989,0,1,0,12.207,21.207L16,17.41406l3.793,3.793A.99989.99989,0,0,0,21.207,19.793Z",
-      fill: "currentColor"
-    })
+      d: "M17.41406,16l3.793-3.793A.99989.99989,0,0,0,19.793,10.793L16,14.58594l-3.793-3.793A.99989.99989,0,0,0,10.793,12.207L14.58594,16l-3.793,3.793A.99989.99989,0,1,0,12.207,21.207L16,17.41406l3.793,3.793A.99989.99989,0,0,0,21.207,19.793Z",
+      fill: "currentColor",
+    }),
   );
 
-const BtIconNotification = props =>
+const BtIconNotification = (props) =>
   /*#__PURE__*/ React__default["default"].createElement(
     "svg",
     Object.assign(
       {
         xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32"
+        viewBox: "0 0 32 32",
       },
-      props
+      props,
     ),
     /*#__PURE__*/ React__default["default"].createElement("defs", null),
     /*#__PURE__*/ React__default["default"].createElement("path", {
-      d:
-        "M24.50977,21.98867,24,21.99014,23.99414,13.975a7.98466,7.98466,0,0,0-6.66046-7.86011,1.46733,1.46733,0,0,0,.15655-.65063,1.48633,1.48633,0,1,0-2.97265,0,1.46732,1.46732,0,0,0,.15826.65369,7.9849,7.9849,0,0,0-6.63971,7.857v8.0166l-.50781-.00293a1.50464,1.50464,0,1,0,0,3.00928h3.45679a1.997,1.997,0,0,0,3.99365,0h9.532a1.50464,1.50464,0,1,0-.001-3.00928ZM16.00391,4.97793a.48633.48633,0,1,1-.48633.48633A.48668.48668,0,0,1,16.00391,4.97793ZM12.98242,25.97158a.998.998,0,0,1-.99469-.97363h1.98841A.99785.99785,0,0,1,12.98242,25.97158ZM24.51074,23.998H7.52832a.50465.50465,0,0,1-.00488-1.00928l1.51269.00293V13.975a6.979,6.979,0,0,1,13.958.00049L23,22.99209l1.51074-.00342a.50464.50464,0,1,1,0,1.00928Z",
-      fill: "currentColor"
-    })
+      d: "M24.50977,21.98867,24,21.99014,23.99414,13.975a7.98466,7.98466,0,0,0-6.66046-7.86011,1.46733,1.46733,0,0,0,.15655-.65063,1.48633,1.48633,0,1,0-2.97265,0,1.46732,1.46732,0,0,0,.15826.65369,7.9849,7.9849,0,0,0-6.63971,7.857v8.0166l-.50781-.00293a1.50464,1.50464,0,1,0,0,3.00928h3.45679a1.997,1.997,0,0,0,3.99365,0h9.532a1.50464,1.50464,0,1,0-.001-3.00928ZM16.00391,4.97793a.48633.48633,0,1,1-.48633.48633A.48668.48668,0,0,1,16.00391,4.97793ZM12.98242,25.97158a.998.998,0,0,1-.99469-.97363h1.98841A.99785.99785,0,0,1,12.98242,25.97158ZM24.51074,23.998H7.52832a.50465.50465,0,0,1-.00488-1.00928l1.51269.00293V13.975a6.979,6.979,0,0,1,13.958.00049L23,22.99209l1.51074-.00342a.50464.50464,0,1,1,0,1.00928Z",
+      fill: "currentColor",
+    }),
   );
 
-const BtIconAlertTriangle = props =>
+const BtIconAlertTriangle = (props) =>
   /*#__PURE__*/ React__default["default"].createElement(
     "svg",
     Object.assign(
       {
         xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32"
+        viewBox: "0 0 32 32",
       },
-      props
+      props,
     ),
     /*#__PURE__*/ React__default["default"].createElement("defs", null),
     /*#__PURE__*/ React__default["default"].createElement("path", {
       fill: "currentColor",
-      d: "M16 21.99335A1 1 0 1 0 16 23.99335 1 1 0 1 0 16 21.99335z"
+      d: "M16 21.99335A1 1 0 1 0 16 23.99335 1 1 0 1 0 16 21.99335z",
     }),
     /*#__PURE__*/ React__default["default"].createElement("path", {
-      d:
-        "M16.00488,20.00977a.49972.49972,0,0,0,.5-.5l.002-9.00977a.5.5,0,0,0-1,0l-.002,9.00977A.5.5,0,0,0,16.00488,20.00977Z",
-      fill: "currentColor"
+      d: "M16.00488,20.00977a.49972.49972,0,0,0,.5-.5l.002-9.00977a.5.5,0,0,0-1,0l-.002,9.00977A.5.5,0,0,0,16.00488,20.00977Z",
+      fill: "currentColor",
     }),
     /*#__PURE__*/ React__default["default"].createElement("path", {
-      d:
-        "M29.83691,26.21,17.041,4.5332A1.15617,1.15617,0,0,0,16.03711,3.959h-.001a1.159,1.159,0,0,0-1.00586.57373L2.23535,26.21045a1.16676,1.16676,0,0,0,1.00488,1.76074H28.83105A1.16843,1.16843,0,0,0,29.83691,26.21Zm-.86035.67725a.164.164,0,0,1-.14551.084H3.24023a.16737.16737,0,0,1-.14355-.25244L15.8916,5.0415a.167.167,0,0,1,.28809,0l12.7959,21.67627A.16531.16531,0,0,1,28.97656,26.88721Z",
-      fill: "currentColor"
-    })
+      d: "M29.83691,26.21,17.041,4.5332A1.15617,1.15617,0,0,0,16.03711,3.959h-.001a1.159,1.159,0,0,0-1.00586.57373L2.23535,26.21045a1.16676,1.16676,0,0,0,1.00488,1.76074H28.83105A1.16843,1.16843,0,0,0,29.83691,26.21Zm-.86035.67725a.164.164,0,0,1-.14551.084H3.24023a.16737.16737,0,0,1-.14355-.25244L15.8916,5.0415a.167.167,0,0,1,.28809,0l12.7959,21.67627A.16531.16531,0,0,1,28.97656,26.88721Z",
+      fill: "currentColor",
+    }),
   );
 
-const BtIconAlert = props =>
+const BtIconAlert = (props) =>
   /*#__PURE__*/ React__default["default"].createElement(
     "svg",
     Object.assign(
       {
         xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32"
+        viewBox: "0 0 32 32",
       },
-      props
+      props,
     ),
     /*#__PURE__*/ React__default["default"].createElement("defs", null),
     /*#__PURE__*/ React__default["default"].createElement("path", {
-      d:
-        "M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,27A13,13,0,1,1,29,16,13.01474,13.01474,0,0,1,16,29Z",
-      fill: "currentColor"
+      d: "M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,27A13,13,0,1,1,29,16,13.01474,13.01474,0,0,1,16,29Z",
+      fill: "currentColor",
     }),
     /*#__PURE__*/ React__default["default"].createElement("path", {
       fill: "currentColor",
-      d: "M16 20.99335A1 1 0 1 0 16 22.99335 1 1 0 1 0 16 20.99335z"
+      d: "M16 20.99335A1 1 0 1 0 16 22.99335 1 1 0 1 0 16 20.99335z",
     }),
     /*#__PURE__*/ React__default["default"].createElement("path", {
-      d:
-        "M16.00488,19.00977a.49972.49972,0,0,0,.5-.5L16.50684,9.5a.5.5,0,0,0-1,0l-.002,9.00977A.5.5,0,0,0,16.00488,19.00977Z",
-      fill: "currentColor"
-    })
+      d: "M16.00488,19.00977a.49972.49972,0,0,0,.5-.5L16.50684,9.5a.5.5,0,0,0-1,0l-.002,9.00977A.5.5,0,0,0,16.00488,19.00977Z",
+      fill: "currentColor",
+    }),
   );
 
-const BtIconTick = props =>
+const BtIconTick = (props) =>
   /*#__PURE__*/ React__default["default"].createElement(
     "svg",
     Object.assign(
       {
         xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32"
+        viewBox: "0 0 32 32",
       },
-      props
+      props,
     ),
     /*#__PURE__*/ React__default["default"].createElement("defs", null),
     /*#__PURE__*/ React__default["default"].createElement(
       "g",
       {
-        "data-name": "Icons"
+        "data-name": "Icons",
       },
       /*#__PURE__*/ React__default["default"].createElement("path", {
-        d:
-          "M16,3A13,13,0,1,1,3,16,12.9741,12.9741,0,0,1,16,3m0-1A14,14,0,1,0,30,16,14.04116,14.04116,0,0,0,16,2Z",
-        fill: "currentColor"
+        d: "M16,3A13,13,0,1,1,3,16,12.9741,12.9741,0,0,1,16,3m0-1A14,14,0,1,0,30,16,14.04116,14.04116,0,0,0,16,2Z",
+        fill: "currentColor",
       }),
       /*#__PURE__*/ React__default["default"].createElement("path", {
-        d:
-          "M13.5,21.2,9.1,16.8a.495.495,0,1,1,.7-.7l3.6,3.6L22,11.1a.495.495,0,1,1,.7.7Z",
-        fill: "currentColor"
-      })
-    )
+        d: "M13.5,21.2,9.1,16.8a.495.495,0,1,1,.7-.7l3.6,3.6L22,11.1a.495.495,0,1,1,.7.7Z",
+        fill: "currentColor",
+      }),
+    ),
   );
 
 /** use `Alert` to display persistent messages, either permanent or dismissible. */
@@ -621,7 +612,7 @@ var Alert = function (_a) {
         React__default["default"].createElement("div", { className: "arc-Alert-content" },
             React__default["default"].createElement("div", { className: "arc-Alert-heading" },
                 React__default["default"].createElement(Heading, { size: "xs", level: headingLevel }, heading)),
-            description && React__default["default"].createElement(Text, { size: "s" }, description),
+            description ? (React__default["default"].isValidElement(description) ? (description) : (React__default["default"].createElement(Text, { size: "s" }, description))) : null,
             link && (React__default["default"].createElement("div", { className: "arc-Alert-link" },
                 React__default["default"].createElement(Text, { size: "s" },
                     React__default["default"].createElement("a", __assign({ href: link, "aria-label": linkAriaLabel }, (onLinkClick && { onClick: handleLinkClick })), linkText))))),
@@ -1237,40 +1228,38 @@ function debounce(func, wait, options) {
 
 var debounce_1 = debounce;
 
-const BtIconChevronLeft2Px = props =>
+const BtIconChevronLeft2Px = (props) =>
   /*#__PURE__*/ React__default["default"].createElement(
     "svg",
     Object.assign(
       {
         xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32"
+        viewBox: "0 0 32 32",
       },
-      props
+      props,
     ),
     /*#__PURE__*/ React__default["default"].createElement("defs", null),
     /*#__PURE__*/ React__default["default"].createElement("path", {
-      d:
-        "M22.5,29.99854a.99676.99676,0,0,1-.707-.293L8.08594,15.99268,21.793,2.294A1.00023,1.00023,0,0,1,23.207,3.709l-12.293,12.28467L23.207,28.2915a1,1,0,0,1-.707,1.707Z",
-      fill: "currentColor"
-    })
+      d: "M22.5,29.99854a.99676.99676,0,0,1-.707-.293L8.08594,15.99268,21.793,2.294A1.00023,1.00023,0,0,1,23.207,3.709l-12.293,12.28467L23.207,28.2915a1,1,0,0,1-.707,1.707Z",
+      fill: "currentColor",
+    }),
   );
 
-const BtIconChevronRight2Px = props =>
+const BtIconChevronRight2Px = (props) =>
   /*#__PURE__*/ React__default["default"].createElement(
     "svg",
     Object.assign(
       {
         xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32"
+        viewBox: "0 0 32 32",
       },
-      props
+      props,
     ),
     /*#__PURE__*/ React__default["default"].createElement("defs", null),
     /*#__PURE__*/ React__default["default"].createElement("path", {
-      d:
-        "M9.5,29.99854A1.00025,1.00025,0,0,1,8.793,28.291l12.293-12.28467L8.793,3.7085A.99989.99989,0,0,1,10.207,2.29443l13.707,13.71289L10.207,29.70605A.99827.99827,0,0,1,9.5,29.99854Z",
-      fill: "currentColor"
-    })
+      d: "M9.5,29.99854A1.00025,1.00025,0,0,1,8.793,28.291l12.293-12.28467L8.793,3.7085A.99989.99989,0,0,1,10.207,2.29443l13.707,13.71289L10.207,29.70605A.99827.99827,0,0,1,9.5,29.99854Z",
+      fill: "currentColor",
+    }),
   );
 
 var BreadcrumbsItem = function (_a) {
@@ -1348,7 +1337,7 @@ var Breadcrumbs = function (_a) {
     var items = React__default["default"].Children.toArray(children);
     return (React__default["default"].createElement("nav", __assign({ "aria-label": "Breadcrumbs", role: "navigation", className: classNames({
             "arc-Breadcrumbs": true,
-            "arc-Breadcrumbs--dark": isLight
+            "arc-Breadcrumbs--light": isLight
         }) }, filterDataAttrs(props)),
         React__default["default"].createElement("ul", { className: "arc-Breadcrumbs-list", ref: breadcrumbsList }, showBackTrail ? (React__default["default"].createElement(React__default["default"].Fragment, null, items.length < 3 ? (React__default["default"].createElement(Breadcrumbs.Item, { spacerIconBefore: true }, items[0].props.children)) : (React__default["default"].createElement(Breadcrumbs.Item, { spacerIconBefore: true }, items[items.length - 2].props.children)))) : (React__default["default"].createElement(React__default["default"].Fragment, null, isCompressed ? (React__default["default"].createElement(React__default["default"].Fragment, null,
             React__default["default"].createElement(Breadcrumbs.Item, { spacerIconAfter: true }, items[0].props.children),
@@ -1374,44 +1363,42 @@ var Breadcrumbs = function (_a) {
 Breadcrumbs.Item = BreadcrumbsItem;
 Breadcrumbs.Link = BreadcrumbsLink;
 
-const BtIconChevronLeftMid = props =>
+const BtIconChevronLeftMid = (props) =>
   /*#__PURE__*/ React__default["default"].createElement(
     "svg",
     Object.assign(
       {
         viewBox: "0 0 16 16",
         fill: "none",
-        xmlns: "http://www.w3.org/2000/svg"
+        xmlns: "http://www.w3.org/2000/svg",
       },
-      props
+      props,
     ),
     /*#__PURE__*/ React__default["default"].createElement("path", {
       fillRule: "evenodd",
       clipRule: "evenodd",
-      d:
-        "M7.62107 8.00023L10.4697 10.8522C10.5957 10.9785 10.6665 11.1495 10.6665 11.3279C10.6665 11.5063 10.5957 11.6773 10.4697 11.8036C10.4074 11.866 10.3335 11.9155 10.252 11.9493C10.1706 11.983 10.0833 12.0004 9.99507 12.0004C9.9069 12.0004 9.81959 11.983 9.73814 11.9493C9.65669 11.9155 9.5827 11.866 9.52041 11.8036L6.19641 8.47556C6.07061 8.34935 5.99998 8.17842 5.99998 8.00023C5.99998 7.82203 6.07061 7.6511 6.19641 7.52489L9.52041 4.19689C9.5827 4.13449 9.65669 4.08498 9.73814 4.0512C9.81959 4.01741 9.9069 4.00003 9.99507 4.00003C10.0832 4.00003 10.1706 4.01741 10.252 4.0512C10.3335 4.08498 10.4074 4.13449 10.4697 4.19689C10.5957 4.32313 10.6665 4.4942 10.6665 4.67256C10.6665 4.85092 10.5957 5.02199 10.4697 5.14823L7.62107 8.00023Z",
-      fill: "currentColor"
-    })
+      d: "M7.62107 8.00023L10.4697 10.8522C10.5957 10.9785 10.6665 11.1495 10.6665 11.3279C10.6665 11.5063 10.5957 11.6773 10.4697 11.8036C10.4074 11.866 10.3335 11.9155 10.252 11.9493C10.1706 11.983 10.0833 12.0004 9.99507 12.0004C9.9069 12.0004 9.81959 11.983 9.73814 11.9493C9.65669 11.9155 9.5827 11.866 9.52041 11.8036L6.19641 8.47556C6.07061 8.34935 5.99998 8.17842 5.99998 8.00023C5.99998 7.82203 6.07061 7.6511 6.19641 7.52489L9.52041 4.19689C9.5827 4.13449 9.65669 4.08498 9.73814 4.0512C9.81959 4.01741 9.9069 4.00003 9.99507 4.00003C10.0832 4.00003 10.1706 4.01741 10.252 4.0512C10.3335 4.08498 10.4074 4.13449 10.4697 4.19689C10.5957 4.32313 10.6665 4.4942 10.6665 4.67256C10.6665 4.85092 10.5957 5.02199 10.4697 5.14823L7.62107 8.00023Z",
+      fill: "currentColor",
+    }),
   );
 
-const BtIconChevronRightMid = props =>
+const BtIconChevronRightMid = (props) =>
   /*#__PURE__*/ React__default["default"].createElement(
     "svg",
     Object.assign(
       {
         viewBox: "0 0 16 16",
         fill: "none",
-        xmlns: "http://www.w3.org/2000/svg"
+        xmlns: "http://www.w3.org/2000/svg",
       },
-      props
+      props,
     ),
     /*#__PURE__*/ React__default["default"].createElement("path", {
       fillRule: "evenodd",
       clipRule: "evenodd",
-      d:
-        "M9.04543 8.0002L6.19676 5.1482C6.07077 5.02196 6 4.85089 6 4.67253C6 4.49418 6.07077 4.32311 6.19676 4.19687C6.25906 4.13446 6.33304 4.08495 6.41449 4.05117C6.49594 4.01739 6.58325 4 6.67143 4C6.75961 4 6.84692 4.01739 6.92837 4.05117C7.00982 4.08495 7.0838 4.13446 7.1461 4.19687L10.4701 7.52487C10.5959 7.65108 10.6665 7.82201 10.6665 8.0002C10.6665 8.1784 10.5959 8.34932 10.4701 8.47553L7.1461 11.8035C7.0838 11.8659 7.00982 11.9155 6.92837 11.9492C6.84692 11.983 6.75961 12.0004 6.67143 12.0004C6.58325 12.0004 6.49594 11.983 6.41449 11.9492C6.33304 11.9155 6.25906 11.8659 6.19676 11.8035C6.07077 11.6773 6 11.5062 6 11.3279C6 11.1495 6.07077 10.9784 6.19676 10.8522L9.04543 8.0002Z",
-      fill: "currentColor"
-    })
+      d: "M9.04543 8.0002L6.19676 5.1482C6.07077 5.02196 6 4.85089 6 4.67253C6 4.49418 6.07077 4.32311 6.19676 4.19687C6.25906 4.13446 6.33304 4.08495 6.41449 4.05117C6.49594 4.01739 6.58325 4 6.67143 4C6.75961 4 6.84692 4.01739 6.92837 4.05117C7.00982 4.08495 7.0838 4.13446 7.1461 4.19687L10.4701 7.52487C10.5959 7.65108 10.6665 7.82201 10.6665 8.0002C10.6665 8.1784 10.5959 8.34932 10.4701 8.47553L7.1461 11.8035C7.0838 11.8659 7.00982 11.9155 6.92837 11.9492C6.84692 11.983 6.75961 12.0004 6.67143 12.0004C6.58325 12.0004 6.49594 11.983 6.41449 11.9492C6.33304 11.9155 6.25906 11.8659 6.19676 11.8035C6.07077 11.6773 6 11.5062 6 11.3279C6 11.1495 6.07077 10.9784 6.19676 10.8522L9.04543 8.0002Z",
+      fill: "currentColor",
+    }),
   );
 
 /**
@@ -1419,7 +1406,7 @@ const BtIconChevronRightMid = props =>
  */
 var Button = React.forwardRef(function (_a, ref) {
     var _b;
-    var ariaLabel = _a.ariaLabel, _c = _a.fill, fill = _c === void 0 ? "solid" : _c, href = _a.href, icon = _a.icon, _d = _a.iconPosition, iconPosition = _d === void 0 ? "afterText" : _d, id = _a.id, _e = _a.isDisabled, isDisabled = _e === void 0 ? false : _e, _f = _a.isDisplayBlock, isDisplayBlock = _f === void 0 ? false : _f, _g = _a.isFullWidth, isFullWidth = _g === void 0 ? false : _g, label = _a.label, onClick = _a.onClick, rel = _a.rel, supportingText = _a.supportingText, target = _a.target, type = _a.type, form = _a.form, props = __rest(_a, ["ariaLabel", "fill", "href", "icon", "iconPosition", "id", "isDisabled", "isDisplayBlock", "isFullWidth", "label", "onClick", "rel", "supportingText", "target", "type", "form"]);
+    var ariaLabel = _a.ariaLabel, _c = _a.fill, fill = _c === void 0 ? "solid" : _c, href = _a.href, icon = _a.icon, _d = _a.iconPosition, iconPosition = _d === void 0 ? "afterText" : _d, id = _a.id, _e = _a.isDisabled, isDisabled = _e === void 0 ? false : _e, _f = _a.isDisplayBlock, isDisplayBlock = _f === void 0 ? false : _f, _g = _a.isFullWidth, isFullWidth = _g === void 0 ? false : _g, label = _a.label, onClick = _a.onClick, rel = _a.rel, _h = _a.size, size = _h === void 0 ? "m" : _h, supportingText = _a.supportingText, target = _a.target, type = _a.type, form = _a.form, props = __rest(_a, ["ariaLabel", "fill", "href", "icon", "iconPosition", "id", "isDisabled", "isDisplayBlock", "isFullWidth", "label", "onClick", "rel", "size", "supportingText", "target", "type", "form"]);
     var surface = React.useContext(Context$3).surface;
     var buttonClasses = classNames((_b = {
             "arc-Button": true,
@@ -1432,6 +1419,7 @@ var Button = React.forwardRef(function (_a, ref) {
             iconPosition !== "afterText",
         _b["arc-Button--hasSupportingText"] = supportingText,
         _b["arc-Button--onDarkSurface"] = surface === "dark",
+        _b["arc-Button--size".concat(size && size.toUpperCase())] = size && size !== "m",
         _b));
     var commonProps = __assign({ id: id, onClick: onClick, ref: ref }, filterDataAttrs(props));
     var buttonText = supportingText ? (React__default["default"].createElement("span", null,
@@ -1680,40 +1668,38 @@ var CardLink = function (_a) {
             React__default["default"].createElement(Icon, { testId: "cardIcon", icon: BtIconChevronRightMid, size: 24 })))));
 };
 
-const BtIconTickAlt2Px = props =>
+const BtIconTickAlt2Px = (props) =>
   /*#__PURE__*/ React__default["default"].createElement(
     "svg",
     Object.assign(
       {
         xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32"
+        viewBox: "0 0 32 32",
       },
-      props
+      props,
     ),
     /*#__PURE__*/ React__default["default"].createElement("defs", null),
     /*#__PURE__*/ React__default["default"].createElement("path", {
-      d:
-        "M13.49963,21.91418l-4.707-4.707a1.0014,1.0014,0,0,1,0-1.41406,1.02353,1.02353,0,0,1,1.41406,0l3.293,3.293,8.293-8.293a.99989.99989,0,1,1,1.41406,1.41406Z",
-      fill: "currentColor"
-    })
+      d: "M13.49963,21.91418l-4.707-4.707a1.0014,1.0014,0,0,1,0-1.41406,1.02353,1.02353,0,0,1,1.41406,0l3.293,3.293,8.293-8.293a.99989.99989,0,1,1,1.41406,1.41406Z",
+      fill: "currentColor",
+    }),
   );
 
-const BtIconChevronDown2Px = props =>
+const BtIconChevronDown2Px = (props) =>
   /*#__PURE__*/ React__default["default"].createElement(
     "svg",
     Object.assign(
       {
         xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32"
+        viewBox: "0 0 32 32",
       },
-      props
+      props,
     ),
     /*#__PURE__*/ React__default["default"].createElement("defs", null),
     /*#__PURE__*/ React__default["default"].createElement("path", {
-      d:
-        "M15.99316,23.91406,2.294,10.207A.99989.99989,0,1,1,3.708,8.793l12.28515,12.293L28.292,8.793A.99989.99989,0,1,1,29.70605,10.207Z",
-      fill: "currentColor"
-    })
+      d: "M15.99316,23.91406,2.294,10.207A.99989.99989,0,1,1,3.708,8.793l12.28515,12.293L28.292,8.793A.99989.99989,0,1,1,29.70605,10.207Z",
+      fill: "currentColor",
+    }),
   );
 
 /**
@@ -1761,7 +1747,7 @@ var FormControl = function (_a) {
         disclosureText: disclosureText,
         errorMessage: errorMessage,
         helper: helper,
-        id: htmlFor || id // `htmlFor` is preference to keep this deterministic with TextInput
+        id: htmlFor || id
     }), ariaDescribedby = _f.ariaDescribedby, idError = _f.idError, idHelper = _f.idHelper, idDisclosure = _f.idDisclosure;
     var LabelType = ElementType === "div" ? "label" : "legend";
     var elementProps = {};
@@ -35138,7 +35124,7 @@ var usePagination = function (pageCount, selectedPage) {
             // show 1 - 5 the right dots are visible.
             return formatValues(__spreadArray(__spreadArray([], Array.from({ length: 5 }, function (_value, index) { return index + 1; }), true), [
                 "...",
-                pageCount
+                pageCount,
             ], false));
         }
         if (pageCount > 7 && selectedPage >= pageCount - 3) {
@@ -35157,7 +35143,7 @@ var usePagination = function (pageCount, selectedPage) {
                 selectedPage,
                 selectedPage + 1,
                 "...",
-                pageCount
+                pageCount,
             ]);
         }
         // show all pages from pageCount
@@ -35259,27 +35245,25 @@ var Poster = function (_a) {
 Poster.Image = PosterImage;
 Poster.Video = PosterVideo;
 
-const BtIconRefresh = props =>
+const BtIconRefresh = (props) =>
   /*#__PURE__*/ React__default["default"].createElement(
     "svg",
     Object.assign(
       {
         xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32"
+        viewBox: "0 0 32 32",
       },
-      props
+      props,
     ),
     /*#__PURE__*/ React__default["default"].createElement("defs", null),
     /*#__PURE__*/ React__default["default"].createElement("path", {
-      d:
-        "M13.41077,21.99951a.5005.5005,0,0,0-.35743.8501l2.04609,2.08716A8.98732,8.98732,0,0,1,13.15332,7.46631a.50028.50028,0,1,0-.31641-.94922A9.98437,9.98437,0,0,0,15.127,25.93823l.00159.02881c.0011.01.02008.00128.03015.002L13.026,28.16846a.50036.50036,0,0,0,.71875.69629l3.28418-3.38819-3.26074-3.32715A.50106.50106,0,0,0,13.41077,21.99951Z",
-      fill: "currentColor"
+      d: "M13.41077,21.99951a.5005.5005,0,0,0-.35743.8501l2.04609,2.08716A8.98732,8.98732,0,0,1,13.15332,7.46631a.50028.50028,0,1,0-.31641-.94922A9.98437,9.98437,0,0,0,15.127,25.93823l.00159.02881c.0011.01.02008.00128.03015.002L13.026,28.16846a.50036.50036,0,0,0,.71875.69629l3.28418-3.38819-3.26074-3.32715A.50106.50106,0,0,0,13.41077,21.99951Z",
+      fill: "currentColor",
     }),
     /*#__PURE__*/ React__default["default"].createElement("path", {
-      d:
-        "M16.79028,6.04633,16.79,6.04077c-.0011-.01-.02008-.00128-.03015-.00195l2.13275-2.19946a.50036.50036,0,0,0-.71875-.69629L14.88965,6.53125,18.15039,9.8584a.50106.50106,0,0,0,.35742.1499.5005.5005,0,0,0,.35742-.8501L16.7951,7.04657a8.98484,8.98484,0,0,1,2.05646,17.47589.49982.49982,0,1,0,.31641.94824A9.98244,9.98244,0,0,0,16.79028,6.04633Z",
-      fill: "currentColor"
-    })
+      d: "M16.79028,6.04633,16.79,6.04077c-.0011-.01-.02008-.00128-.03015-.00195l2.13275-2.19946a.50036.50036,0,0,0-.71875-.69629L14.88965,6.53125,18.15039,9.8584a.50106.50106,0,0,0,.35742.1499.5005.5005,0,0,0,.35742-.8501L16.7951,7.04657a8.98484,8.98484,0,0,1,2.05646,17.47589.49982.49982,0,1,0,.31641.94824A9.98244,9.98244,0,0,0,16.79028,6.04633Z",
+      fill: "currentColor",
+    }),
   );
 
 var PROGRESS_BAR_ICON_MAP = {
@@ -35330,60 +35314,57 @@ var ProgressBar = function (_a) {
                             React__default["default"].createElement(Icon, { icon: PROGRESS_BAR_ICON_MAP[action.icon], size: 24 }))))))))));
 };
 
-const BtIconTickVariant = props =>
+const BtIconTickVariant = (props) =>
   /*#__PURE__*/ React__default["default"].createElement(
     "svg",
     Object.assign(
       {
         xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32"
+        viewBox: "0 0 32 32",
       },
-      props
+      props,
     ),
     /*#__PURE__*/ React__default["default"].createElement("defs", null),
     /*#__PURE__*/ React__default["default"].createElement("path", {
-      d:
-        "M13.5,21.207,9.14648,16.85352a.5.5,0,0,1,.707-.707L13.5,19.793l8.64648-8.64649a.5.5,0,0,1,.707.707Z",
-      fill: "currentColor"
-    })
+      d: "M13.5,21.207,9.14648,16.85352a.5.5,0,0,1,.707-.707L13.5,19.793l8.64648-8.64649a.5.5,0,0,1,.707.707Z",
+      fill: "currentColor",
+    }),
   );
 
-const BtIconCrossAlt = props =>
+const BtIconCrossAlt = (props) =>
   /*#__PURE__*/ React__default["default"].createElement(
     "svg",
     Object.assign(
       {
         xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32"
+        viewBox: "0 0 32 32",
       },
-      props
+      props,
     ),
     /*#__PURE__*/ React__default["default"].createElement("defs", null),
     /*#__PURE__*/ React__default["default"].createElement("path", {
-      d:
-        "M16.70709,16.02l4.48236-4.49365a.4996.4996,0,1,0-.707-.70606l-4.481,4.49225-4.481-4.49225a.4996.4996,0,1,0-.707.70606L15.29584,16.02l-4.48236,4.49365a.4996.4996,0,1,0,.707.70606l4.481-4.49225,4.481,4.49225a.4996.4996,0,1,0,.707-.70606Z",
-      fill: "currentColor"
-    })
+      d: "M16.70709,16.02l4.48236-4.49365a.4996.4996,0,1,0-.707-.70606l-4.481,4.49225-4.481-4.49225a.4996.4996,0,1,0-.707.70606L15.29584,16.02l-4.48236,4.49365a.4996.4996,0,1,0,.707.70606l4.481-4.49225,4.481,4.49225a.4996.4996,0,1,0,.707-.70606Z",
+      fill: "currentColor",
+    }),
   );
 
-const BtIconCircle = props =>
+const BtIconCircle = (props) =>
   /*#__PURE__*/ React__default["default"].createElement(
     "svg",
     Object.assign(
       {
         viewBox: "0 0 32 32",
         fill: "none",
-        xmlns: "http://www.w3.org/2000/svg"
+        xmlns: "http://www.w3.org/2000/svg",
       },
-      props
+      props,
     ),
     /*#__PURE__*/ React__default["default"].createElement("path", {
       fillRule: "evenodd",
       clipRule: "evenodd",
-      d:
-        "M9 16C9 19.87 12.13 23 16 23C19.87 23 23 19.87 23 16C23 12.13 19.87 9 16 9C12.13 9 9 12.13 9 16ZM16 7C11.03 7 7 11.03 7 16C7 20.97 11.03 25 16 25C20.97 25 25 20.97 25 16C25 11.03 20.97 7 16 7Z",
-      fill: "currentColor"
-    })
+      d: "M9 16C9 19.87 12.13 23 16 23C19.87 23 23 19.87 23 16C23 12.13 19.87 9 16 9C12.13 9 9 12.13 9 16ZM16 7C11.03 7 7 11.03 7 16C7 20.97 11.03 25 16 25C20.97 25 25 20.97 25 16C25 11.03 20.97 7 16 7Z",
+      fill: "currentColor",
+    }),
   );
 
 /**
@@ -35533,22 +35514,21 @@ var Rule = function (props) {
         }) }, filterDataAttrs(props))));
 };
 
-const BtIconArrowAltUp = props =>
+const BtIconArrowAltUp = (props) =>
   /*#__PURE__*/ React__default["default"].createElement(
     "svg",
     Object.assign(
       {
         xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32"
+        viewBox: "0 0 32 32",
       },
-      props
+      props,
     ),
     /*#__PURE__*/ React__default["default"].createElement("defs", null),
     /*#__PURE__*/ React__default["default"].createElement("path", {
-      d:
-        "M20.35352,13.14648,16,8.793l-4.35352,4.35352a.49995.49995,0,0,0,.707.707L15.5,10.707V22.5a.5.5,0,0,0,1,0V10.707l3.14648,3.14648a.49995.49995,0,0,0,.707-.707Z",
-      fill: "currentColor"
-    })
+      d: "M20.35352,13.14648,16,8.793l-4.35352,4.35352a.49995.49995,0,0,0,.707.707L15.5,10.707V22.5a.5.5,0,0,0,1,0V10.707l3.14648,3.14648a.49995.49995,0,0,0,.707-.707Z",
+      fill: "currentColor",
+    }),
   );
 
 /**
@@ -37621,31 +37601,31 @@ const $cc7e05a45900e73f$export$c3468e2714d175fa = $cc7e05a45900e73f$export$6b919
 const $cc7e05a45900e73f$export$2f60d3ec9ad468f2 = $cc7e05a45900e73f$export$d8117927658af6d7;
 const $cc7e05a45900e73f$export$bf1aedc3039c8d63 = $cc7e05a45900e73f$export$ff951e476c12189;
 
-const BtIconChevronUp2Px = props =>
+const BtIconChevronUp2Px = (props) =>
   /*#__PURE__*/ React__default["default"].createElement(
     "svg",
     Object.assign(
       {
         xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32"
+        viewBox: "0 0 32 32",
       },
-      props
+      props,
     ),
     /*#__PURE__*/ React__default["default"].createElement("defs", null),
     /*#__PURE__*/ React__default["default"].createElement("path", {
-      d:
-        "M28.999,23.5a.99676.99676,0,0,1-.707-.293l-12.28515-12.293L3.708,23.207A.99989.99989,0,0,1,2.294,21.793l13.71289-13.707L29.70605,21.793a.99976.99976,0,0,1-.707,1.707Z",
-      fill: "currentColor"
-    })
+      d: "M28.999,23.5a.99676.99676,0,0,1-.707-.293l-12.28515-12.293L3.708,23.207A.99989.99989,0,0,1,2.294,21.793l13.71289-13.707L29.70605,21.793a.99976.99976,0,0,1-.707,1.707Z",
+      fill: "currentColor",
+    }),
   );
 
 /** Use `Select` to choose from a dropdown list of options. */
 var Select = function (_a) {
-    var isRequired = _a.isRequired, isDisabled = _a.isDisabled, placeholder = _a.placeholder, label = _a.label, options = _a.options, onOpenChange = _a.onOpenChange, isDefaultOpen = _a.isDefaultOpen, defaultValue = _a.defaultValue, errorMessage = _a.errorMessage, labelSize = _a.labelSize, helper = _a.helper, name = _a.name, isFluid = _a.isFluid, onBlur = _a.onBlur, onChange = _a.onChange, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, props = __rest(_a, ["isRequired", "isDisabled", "placeholder", "label", "options", "onOpenChange", "isDefaultOpen", "defaultValue", "errorMessage", "labelSize", "helper", "name", "isFluid", "onBlur", "onChange", "disclosureTitle", "disclosureText", "onClickDisclosure"]);
+    var _b;
+    var isRequired = _a.isRequired, isDisabled = _a.isDisabled, placeholder = _a.placeholder, label = _a.label, options = _a.options, onOpenChange = _a.onOpenChange, isDefaultOpen = _a.isDefaultOpen, defaultValue = _a.defaultValue, errorMessage = _a.errorMessage, labelSize = _a.labelSize, helper = _a.helper, name = _a.name, isFluid = _a.isFluid, onBlur = _a.onBlur, onChange = _a.onChange, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, _c = _a.selectSize, selectSize = _c === void 0 ? "m" : _c, props = __rest(_a, ["isRequired", "isDisabled", "placeholder", "label", "options", "onOpenChange", "isDefaultOpen", "defaultValue", "errorMessage", "labelSize", "helper", "name", "isFluid", "onBlur", "onChange", "disclosureTitle", "disclosureText", "onClickDisclosure", "selectSize"]);
     var id = React.useId();
     var arcRootElement = React.useContext(ArcRootElementContext);
     var surface = React.useContext(Context$3).surface;
-    var _b = React.useState(defaultValue), selectedValue = _b[0], setSelectedValue = _b[1];
+    var _d = React.useState(defaultValue), selectedValue = _d[0], setSelectedValue = _d[1];
     var onValueChange = function (value) {
         onChange && onChange(value);
         setSelectedValue(value);
@@ -37654,16 +37634,28 @@ var Select = function (_a) {
         var _a;
         return (_a = options.find(function (option) { return option.value === value; })) === null || _a === void 0 ? void 0 : _a.name;
     };
+    var getIconSize = function (selectSize) {
+        switch (selectSize) {
+            case "s":
+                return 16;
+            case "l":
+                return 24;
+            default:
+                return 20;
+        }
+    };
     return (React__default["default"].createElement(FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, label: label, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional", isDisabled: isDisabled, disclosureText: disclosureText, disclosureTitle: disclosureTitle, onClickDisclosure: onClickDisclosure },
         React__default["default"].createElement($cc7e05a45900e73f$export$be92b6f5f03c0fe9, { name: name, required: isRequired, disabled: isDisabled, defaultOpen: isDefaultOpen, value: selectedValue, onOpenChange: onOpenChange, onValueChange: function (value) { return onValueChange(value); } },
-            React__default["default"].createElement($cc7e05a45900e73f$export$41fb9f06171c75f4, __assign({ id: id, name: name, onBlur: onBlur, className: classNames("arc-Select-trigger", {
-                    "arc-Select-trigger--constrained": !isFluid,
-                    "arc-Select-trigger--onDarkSurface": surface === "dark",
-                    "arc-Select-trigger--invalid": errorMessage
-                }) }, filterDataAttrs(props)),
+            React__default["default"].createElement($cc7e05a45900e73f$export$41fb9f06171c75f4, __assign({ id: id, name: name, onBlur: onBlur, className: classNames("arc-Select-trigger", (_b = {
+                        "arc-Select-trigger--constrained": !isFluid,
+                        "arc-Select-trigger--onDarkSurface": surface === "dark",
+                        "arc-Select-trigger--invalid": errorMessage
+                    },
+                    _b["arc-Select-trigger--size".concat(selectSize && selectSize.toUpperCase())] = selectSize && selectSize !== "m",
+                    _b)) }, filterDataAttrs(props)),
                 React__default["default"].createElement($cc7e05a45900e73f$export$4c8d1a57a761ef94, { asChild: true, "aria-label": getSelectedValueName(selectedValue) }, !selectedValue ? (React__default["default"].createElement("span", { "aria-hidden": true, className: "arc-Select-placeHolder" }, placeholder)) : (React__default["default"].createElement("span", { className: "arc-Select-valueItem" }, getSelectedValueName(selectedValue)))),
                 React__default["default"].createElement($cc7e05a45900e73f$export$f04a61298a47a40f, { className: "arc-Select-triggerIcon" },
-                    React__default["default"].createElement(Icon, { icon: BtIconChevronDown2Px, size: 20 }))),
+                    React__default["default"].createElement(Icon, { icon: BtIconChevronDown2Px, size: getIconSize(selectSize) }))),
             React__default["default"].createElement($cc7e05a45900e73f$export$602eac185826482c, { container: arcRootElement || undefined },
                 React__default["default"].createElement($cc7e05a45900e73f$export$7c6e2c02157bb7d2, { className: classNames("arc-Select-content", {
                         "arc-Select-content--onDarkSurface": surface === "dark"
@@ -37981,7 +37973,7 @@ var NavItem = function (_a) {
             } },
             React__default["default"].createElement("span", null, title),
             React__default["default"].createElement("span", { className: "arc-SiteHeaderNavItem-linkIcon" }, isMinWidthArcBreakpointL ? (React__default["default"].createElement(BtIconChevronDown2Px, null)) : (React__default["default"].createElement(BtIconChevronRight2Px, null)))),
-        React__default["default"].createElement(Panel, { navItemRef: navItem, open: panelOpen, promo: promo, setOpen: setPanelOpen, viewAll: href ? (React__default["default"].createElement(Panel.ViewAll, { href: href, onClick: onClick, title: viewAllTitle || "View all ".concat(title.toLowerCase()) })) : (undefined) }, children)))));
+        React__default["default"].createElement(Panel, { navItemRef: navItem, open: panelOpen, promo: promo, setOpen: setPanelOpen, viewAll: href ? (React__default["default"].createElement(Panel.ViewAll, { href: href, onClick: onClick, title: viewAllTitle || "View all ".concat(title.toLowerCase()) })) : undefined }, children)))));
 };
 
 var NavItemRehydrator = (function (el, hydrate) { return __awaiter(void 0, void 0, void 0, function () {
@@ -38070,7 +38062,7 @@ var SubNavItem = function (_a) {
                 React__default["default"].createElement(BtIconChevronRight2Px, null)))),
         React__default["default"].createElement(Panel, { navItemRef: navItem, open: panelOpen, setOpen: setPanelOpen, subNavItemRef: subNavItem, subNavLink: "arc-SiteHeaderSubNavItem-link", promo: promo, title: React__default["default"].createElement("span", null,
                 title,
-                subTitle && (React__default["default"].createElement(Text, { size: "xs", tone: "supporting" }, subTitle))), viewAll: href ? (React__default["default"].createElement(Panel.ViewAll, { href: href, onClick: onClick, title: viewAllTitle || "View all ".concat(title.toLowerCase()) })) : (undefined) }, children)))));
+                subTitle && (React__default["default"].createElement(Text, { size: "xs", tone: "supporting" }, subTitle))), viewAll: href ? (React__default["default"].createElement(Panel.ViewAll, { href: href, onClick: onClick, title: viewAllTitle || "View all ".concat(title.toLowerCase()) })) : undefined }, children)))));
 };
 
 var SubNavItemRehydrator = (function (el, hydrate) { return __awaiter(void 0, void 0, void 0, function () {
@@ -38179,7 +38171,7 @@ var NavItemWithSubNav = function (_a) {
                 } },
                 title,
                 React__default["default"].createElement("span", { className: "arc-SiteHeaderNavItem-linkIcon" }, isMinWidthArcBreakpointL ? (React__default["default"].createElement(BtIconChevronDown2Px, null)) : (React__default["default"].createElement(BtIconChevronRight2Px, null)))),
-            React__default["default"].createElement(Panel, { navItemRef: navItem, open: panelOpen, setOpen: setPanelOpen, title: subTitle, viewAll: href ? (React__default["default"].createElement(Panel.ViewAll, { href: href, onClick: onViewAllClick, title: viewAllTitle || "View all ".concat(title.toLowerCase()) })) : (undefined), withSubNav: true },
+            React__default["default"].createElement(Panel, { navItemRef: navItem, open: panelOpen, setOpen: setPanelOpen, title: subTitle, viewAll: href ? (React__default["default"].createElement(Panel.ViewAll, { href: href, onClick: onViewAllClick, title: viewAllTitle || "View all ".concat(title.toLowerCase()) })) : undefined, withSubNav: true },
                 defaultItem
                     ? React__default["default"].cloneElement(slot1, { isDefaultItem: defaultItem })
                     : slot1,
@@ -39076,40 +39068,38 @@ var TabContent = function (_a) {
     return (React__default["default"].createElement($69cb30bb0017df05$export$7c6e2c02157bb7d2, { className: "arc-Tab-content", value: value }, children));
 };
 
-const BtIconArrowRightFill = props =>
+const BtIconArrowRightFill = (props) =>
   /*#__PURE__*/ React__default["default"].createElement(
     "svg",
     Object.assign(
       {
         xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32"
+        viewBox: "0 0 32 32",
       },
-      props
+      props,
     ),
     /*#__PURE__*/ React__default["default"].createElement("defs", null),
     /*#__PURE__*/ React__default["default"].createElement("path", {
-      d:
-        "M2,16A14,14,0,1,0,16,2,14,14,0,0,0,2,16Zm16.85352-4.35352L23.207,16l-4.35351,4.35352a.5.5,0,0,1-.707-.707L21.293,16.5H9.5a.5.5,0,0,1,0-1H21.293l-3.14649-3.14648a.5.5,0,0,1,.707-.707Z",
-      fill: "currentColor"
-    })
+      d: "M2,16A14,14,0,1,0,16,2,14,14,0,0,0,2,16Zm16.85352-4.35352L23.207,16l-4.35351,4.35352a.5.5,0,0,1-.707-.707L21.293,16.5H9.5a.5.5,0,0,1,0-1H21.293l-3.14649-3.14648a.5.5,0,0,1,.707-.707Z",
+      fill: "currentColor",
+    }),
   );
 
-const BtIconArrowLeftFill = props =>
+const BtIconArrowLeftFill = (props) =>
   /*#__PURE__*/ React__default["default"].createElement(
     "svg",
     Object.assign(
       {
         xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32"
+        viewBox: "0 0 32 32",
       },
-      props
+      props,
     ),
     /*#__PURE__*/ React__default["default"].createElement("defs", null),
     /*#__PURE__*/ React__default["default"].createElement("path", {
-      d:
-        "M30,16A14,14,0,1,0,16,30,14,14,0,0,0,30,16ZM13.14648,20.35352,8.793,16l4.35351-4.35352a.5.5,0,0,1,.707.707L10.707,15.5H22.5a.5.5,0,0,1,0,1H10.707l3.14649,3.14648a.5.5,0,0,1-.707.707Z",
-      fill: "currentColor"
-    })
+      d: "M30,16A14,14,0,1,0,16,30,14,14,0,0,0,30,16ZM13.14648,20.35352,8.793,16l4.35351-4.35352a.5.5,0,0,1,.707.707L10.707,15.5H22.5a.5.5,0,0,1,0,1H10.707l3.14649,3.14648a.5.5,0,0,1-.707.707Z",
+      fill: "currentColor",
+    }),
   );
 
 var TabsList = function (_a) {
@@ -39170,45 +39160,42 @@ Tabs.Tab = Tab;
 Tabs.List = TabsList;
 Tabs.Content = TabContent;
 
-const BtIconCross = props =>
+const BtIconCross = (props) =>
   /*#__PURE__*/ React__default["default"].createElement(
     "svg",
     Object.assign(
       {
         xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32"
+        viewBox: "0 0 32 32",
       },
-      props
+      props,
     ),
     /*#__PURE__*/ React__default["default"].createElement("defs", null),
     /*#__PURE__*/ React__default["default"].createElement("path", {
-      d:
-        "M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,27A13,13,0,1,1,29,16,13.01474,13.01474,0,0,1,16,29Z",
-      fill: "currentColor"
+      d: "M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,27A13,13,0,1,1,29,16,13.01474,13.01474,0,0,1,16,29Z",
+      fill: "currentColor",
     }),
     /*#__PURE__*/ React__default["default"].createElement("path", {
-      d:
-        "M20.85352,11.14648a.49983.49983,0,0,0-.707,0L16,15.293l-4.14648-4.14649a.5.5,0,0,0-.707.707L15.293,16l-4.14649,4.14648a.5.5,0,1,0,.707.707L16,16.707l4.14648,4.14649a.5.5,0,0,0,.707-.707L16.707,16l4.14649-4.14648A.49983.49983,0,0,0,20.85352,11.14648Z",
-      fill: "currentColor"
-    })
+      d: "M20.85352,11.14648a.49983.49983,0,0,0-.707,0L16,15.293l-4.14648-4.14649a.5.5,0,0,0-.707.707L15.293,16l-4.14649,4.14648a.5.5,0,1,0,.707.707L16,16.707l4.14648,4.14649a.5.5,0,0,0,.707-.707L16.707,16l4.14649-4.14648A.49983.49983,0,0,0,20.85352,11.14648Z",
+      fill: "currentColor",
+    }),
   );
 
-const BtIconCrossFill = props =>
+const BtIconCrossFill = (props) =>
   /*#__PURE__*/ React__default["default"].createElement(
     "svg",
     Object.assign(
       {
         xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32"
+        viewBox: "0 0 32 32",
       },
-      props
+      props,
     ),
     /*#__PURE__*/ React__default["default"].createElement("defs", null),
     /*#__PURE__*/ React__default["default"].createElement("path", {
-      d:
-        "M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm4.85352,18.14648a.5.5,0,1,1-.707.707L16,16.707l-4.14648,4.14649a.5.5,0,0,1-.707-.707L15.293,16l-4.14649-4.14648a.5.5,0,0,1,.707-.707L16,15.293l4.14648-4.14649a.5.5,0,0,1,.707.707L16.707,16Z",
-      fill: "currentColor"
-    })
+      d: "M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm4.85352,18.14648a.5.5,0,1,1-.707.707L16,16.707l-4.14648,4.14649a.5.5,0,0,1-.707-.707L15.293,16l-4.14649-4.14648a.5.5,0,0,1,.707-.707L16,15.293l4.14648-4.14649a.5.5,0,0,1,.707.707L16.707,16Z",
+      fill: "currentColor",
+    }),
   );
 
 /**
@@ -39252,8 +39239,7 @@ var TextArea = React.forwardRef(function (_a, ref) {
     var _j = React.useState((value && value.length) || (defaultValue && defaultValue.length) || 0), characterCount = _j[0], setCharacterCount = _j[1];
     var setSmartHeight = function (el) {
         el.style.height = "auto";
-        el.style.height = "".concat(parseInt(getComputedStyle(el).getPropertyValue("border-width")) *
-            2 +
+        el.style.height = "".concat(parseInt(getComputedStyle(el).getPropertyValue("border-width")) * 2 +
             el.scrollHeight, "px");
     };
     var getTextAreaRef = function (elementRef) {
@@ -39288,9 +39274,10 @@ var TextArea = React.forwardRef(function (_a, ref) {
  * Use `TextInput` to allow custom user text entry with a keyboard.
  */
 var TextInput = React.forwardRef(function (_a, ref) {
-    var _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, inputMode = _a.inputMode, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isReadOnly, isReadOnly = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, label = _a.label, _f = _a.labelSize, labelSize = _f === void 0 ? "l" : _f, maxLength = _a.maxLength, minLength = _a.minLength, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onClickDisclosure = _a.onClickDisclosure, pattern = _a.pattern, _g = _a.type, type = _g === void 0 ? "text" : _g, _h = _a.showPassword, showPassword = _h === void 0 ? false : _h, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, props = __rest(_a, ["defaultValue", "errorMessage", "helper", "id", "inputMode", "isDisabled", "isReadOnly", "isRequired", "label", "labelSize", "maxLength", "minLength", "name", "onBlur", "onChange", "onClickDisclosure", "pattern", "type", "showPassword", "value", "disclosureTitle", "disclosureText"]);
+    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 = __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(Context$3).surface;
-    var _j = React.useState(false), showPasswordToggle = _j[0], setShowPasswordToggle = _j[1];
+    var _l = React.useState(false), showPasswordToggle = _l[0], setShowPasswordToggle = _l[1];
     var inferredInputProps = useNumericInput({
         inputMode: inputMode,
         pattern: pattern,
@@ -39303,12 +39290,14 @@ var TextInput = React.forwardRef(function (_a, ref) {
         helper: helper,
         disclosureText: disclosureText
     }).ariaDescribedby;
-    return (React__default["default"].createElement("div", __assign({ className: classNames({
-            "arc-TextInput": true,
-            "arc-TextInput--withPasswordToggle": showPassword,
-            "arc-TextInput--invalid": errorMessage,
-            "arc-TextInput--onDarkSurface": surface === "dark"
-        }) }, filterDataAttrs(props)),
+    return (React__default["default"].createElement("div", __assign({ className: 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(props)),
         React__default["default"].createElement(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", __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)),